html {
  -webkit-text-size-adjust: 100%; /* Verhindert das automatische Vergrößern auf iPhones/Safari */
  -moz-text-size-adjust: 100%;    /* Für mobile Firefox-Browser */
  -ms-text-size-adjust: 100%;     /* Für ältere Windows-Mobile-Browser */
  text-size-adjust: 100%;         /* Standard-Regel für moderne Browser */
}
/*-------------------------------------------------------------------------*/
/* BODY */
body {
  height : 100%;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  margin : 0px;
  padding : 0px;
  background-color:#434343;
}

.main {
  width : 870px;
  height : 650px;
  margin : 10px auto;
  border : 4px solid #FFFFFF;
  background-color:#FFFFFF;
  height:auto;
  overflow: inherit;
}

.inhalt {
  width :660px;
  margin-left :180px;
  margin-top : 10px;
  font-size : 12px;
  color : #000000;
  height:auto;
  min-height:240px;
  overflow: inherit;
}

.td_background {
  background-image : url(../images/nav_button.jpg);
  background-repeat : no-repeat;
  height : 26px;
  width : 185px;
  margin-bottom : 3px;
  margin-left:250px;
}

.nav {
  white-space:normal;
  width:190px;
  height:250px;
  font-family:Arial, Helvetica, sans-serif;
  position : absolute;
  margin-left :31.8px;
  margin-top : 98px;
  margin-bottom : 3px;
  overflow: inherit;
}

.footer 
{
    margin-top:1em;
    background:none;
    padding:1px;
	border-top : 1px solid #FA0202;   
}	    

/*-------------------------------------------------------------------------*/
/*Links */

/*für Menü */
.navi
{
  font-family:Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: normal;
  font-weight: 700;              
  color: #000000;
  margin-left: 10px;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.5px;         
}

/*für Menü Öl- und Gasheizung wegen Länge*/
.naviz
{
  font-family:Helvetica, Arial, sans-serif;
  font-size: 0.99rem;            
  line-height: normal;
  font-weight: 700;
  color: #000000;
  margin-left: 10px;
  text-align: center;
  text-decoration: none;
  letter-spacing: -0.2px;        
}

a.navi:hover 
{
color: red;
}
a.naviz:hover 
{
color: red;
}
/*Links normal*/ 
.navi1
{
  font-family:Open Sans, Calibri, Arial;
  font-size:1.1rem;
  line-height:normal;
  font-weight:bold;
  color : #000000;
  text-decoration:none;
}
a.navi1:hover
{
	color:#F0100F;
	font-weight:bolder;
	text-transform:uppercase;
}
/*Links Händler (Bilder)*/
.navi2
{
  margin-left:65px;
  text-decoration:none;
}

/*Links groß*/
.navi3
{
   font-family:Open Sans, Calibri, Arial;;
   font-size:1.1rem;
   line-height:1.5;
   font-weight:800;
   color:#000000;
   text-decoration:none;  
}

a.navi3:hover
{
	color:#F0100F;
	font-size:1.1rem;
	font-weight:bold;
	text-transform:uppercase;
}
/*-------------------------------------------------------------------------*/
/*Efekte für Bilder */
/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

/*-------------------------------------------------------------------------*/
/*Schriftarten*/
/* Überschrift TOP */
.style1 {	
    font-family: "Segoe Script", Papyrus, cursive;
    font-style: oblique;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.5;
    text-shadow: 2px 2px 2px #aaa;
    margin-left: 45px;
    color: #F0100F;
}

/* Schrift normal */
.style2 {
    font-family: "Open Sans", Calibri, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 65px;
    margin-right: 20px;
    color: #000000;
}

/* Schrift fett */
.style3 {
    font-family: "Open Sans", Calibri, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 580;
    line-height: 1.5;
    margin-left: 65px;
    margin-right: 20px;
    color: #000000;
}

/* Schrift Spruch (Home) */
.style4 {
    font-family: Montserrat, Calibri, Arial, sans-serif; 
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1px;
    word-spacing: 1px;
    margin-left: 65px;
    margin-right: 20px;
    color: #000000;
}

/* Footer*/
.style5 {
    font-family: Calibri, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 350;
    line-height: 20px;
    margin-right: 20px;
    color: #000000;
    text-decoration: none;
}

/* Überschrift Groß  */
.style6 {
    font-family: "Open Sans", Calibri, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 580;
    line-height: 1.5;
    margin-left: 65px;
    word-spacing: 2px;
    letter-spacing: 2px;
    color: #000000;
}

/* Baustelle */
.style7 {
    font-family: Calibri, Arial, sans-serif;
    font-size: 1.2em;
    line-height: normal;
    font-weight: 600;
    margin-left: 65px;
    word-spacing: 3px;
    letter-spacing: 2px;
    color: #000000;
}

/* Schriftkursiv zentriert */
.style8 {
    font-family: "Segoe Script", Verdana, cursive;
    color: #990000;
    font-weight: bold;
    font-size: 13pt;
    margin-left: 65px;
    font-style: italic;
    text-align: center;
} 

/* Schrift Spruch (Home / rot) */
.style9 {
    font-family: Montserrat, Calibri, Arial, sans-serif; 
    font-size: 1.1rem;
    font-weight: 525;
    line-height: 1.5;
    letter-spacing: 2px;
    word-spacing: 3px;
    text-shadow: #000900, 1px 1px 2px;
    margin-left: 65px;
    margin-right: 20px;
    color: #FF0000;
}

/*-------------------------------------------------------------------------*/	
/* Bilder */

.logo {
  position : absolute;
  margin-left : 32px;
  margin-top :5px;
}

/* Bild, Headliner */
.bild
{
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* Bilder oben */
.bild1
{
  margin-left:65px;
  margin-right:8px;
}

/*Logo Links Händler*/
.bild2
{
	margin-left:40px;
}

/* Bilder rund, Text rechts*/
.bild3
{
    border-radius: 30px;
	float:left;
	margin-left:25px;
} 

/* Bilder Galerie*/
.bild4
{
	margin-bottom:15px;
	margin-right:15px;
	border: 1px solid #000000;
} 

/* Bilder eck, Text links*/
.bild5
{
    float:right;
	margin-top:40px;
	margin-right:25px;
	margin-left:65px;
} 

/* Bilder eck, Text links*/
.bild6
{
	float:right;
	margin-right:25px;
	margin-left:25px;
} 

/* Bild,Logo/Index */
.bild7
{
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

/* Bild,Logo/Über uns Seite */
.bild8
{
  margin-right:25px;
  margin-left:25px;
}

/* Bild,Logo/Über uns Seite */
.bild9
{
  margin-right:25px;
  margin-left:30px;
  margin-top:10px;
  text-align:center;
}

/*-------------------------------------------------------------------------*/
.table {
   border-collapse : collapse;
   margin-left:65px;
}
	        
.table1 {
   border-collapse : collapse;
}

.td_top {
  vertical-align : top;
  padding : 5px;
  font-size : 12px;
}

.td_check {
  padding : 5px;
  font-size : 12px;
}

/*-------------------------------------------------------------------------*/
/* AB HIER: PC-SCHUTZ & SMARTPHONE-CODE (VÖLLIG GETRENNT)                 */
/*-------------------------------------------------------------------------*/

.menu-icon, .close-icon, #menu-toggle {
  display: none;
}

@media screen and (max-width: 1024px) {

  /* 1. Hauptrahmen am Handy flexibel */
  .main {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0px !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. Oberes Logo am Handy zentrieren */
  .logo {
    position: relative !important;
    margin: 15px auto 5px auto !important; 
    text-shadow: none !important;
    text-align: center !important;          
    display: block !important;
    height: auto !important;
    width: 100% !important;
  }
  .logo img {
    margin: 0 auto !important;
    width: 240px !important;  
    height: auto !important;  
    display: inline-block !important;
  }

  /* 3. Menü-Button */
  #menu-toggle {
    display: none !important;
  }

  .menu-icon {
    display: block !important;
    background-color: #F0100F; 
    color: white !important;
    padding: 10px 15px !important;
    font-family: Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    margin: 8px auto 15px auto !important; 
    width: 120px !important;
    box-sizing: border-box;
    text-align: center !important;
    font-size: 14px !important;
  }

  /* 4. Seitliche Schublade am Handy */
  .nav {
    position: static !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  .menu-drawer {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: -260px !important;
    width: 240px !important;
    height: 100% !important;
    background-color: rgba(67, 67, 67, 0.65); 
    backdrop-filter: blur(8px);              
    -webkit-backdrop-filter: blur(8px);       
    z-index: 9999 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    transition: left 0.3s ease !important;
    box-shadow: 4px 0px 10px rgba(0,0,0,0.5);
    overflow-y: auto !important;
  }

  .close-icon {
    display: block !important;
    color: white !important;
    font-size: 30px !important;
    text-align: right !important;
    cursor: pointer;
    margin-bottom: 15px !important;
    line-height: 1;
  }

  #menu-toggle:checked ~ .menu-drawer {
    left: 0 !important;
  }

  .table1, .table1 tbody, .table1 tr, .table1 td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }


  .menu-drawer .td_background {
    background-image: none !important;        
    background-color: transparent !important; 
    margin-left: 0px !important;              
    margin-bottom: 5px !important;
    padding: 8px 0 !important;              
    width: 100% !important;
  }

  /* TEXTLESBARKEIT IM HANDY-MENÜ OPTIMIEREN */
  .menu-drawer a.navi, .menu-drawer a.naviz {
    color: #FFFFFF !important;             
    margin-left: 5px !important;             
    text-align: left !important;             
    display: block !important;
    width: 100% !important;
  }

  /* 5. Inhalt am Handy linksbündig */
  .inhalt {
    width: 92% !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    margin-top: 10px !important;
    text-align: left !important;
    float: none !important;
  }
  
  .style2, .style3, .style4, .style6, .style7, .style8, .style9 {
    margin-left: 0px !important;
    margin-right: 0px !important;
    text-align: left !important;
  }

  /* 6. Footer am Handy zentriert */
  .footer {
    width: 100% !important;
    margin-top: 30px !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }
  .footer table { 
    display: table !important; 
    width: 100% !important; 
    margin-left: 0px !important; 
  }
  .footer td[width="125"] { 
    display: none !important; 
  }
  .footer td[width="600"] { 
    display: block !important; 
    width: 100% !important; 
    text-shadow: none !important; 
    text-align: center !important; 
  }
  
  /* Blendet das große PC-Logo auf dem Handy aus */
  .footer img {
    display: none !important;
  }

  /* Fügt das neue, kleinere Handy-Logo ein */
  .footer td[width="600"]::before {
    content: "" !important;
    display: block !important;
    background-image: url("../images/logo_bottom_mobile.jpg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 180px !important;  
    height: 50px !important;  
    margin: 0 auto 0px auto !important; 
  }

  /* Blendet das störende <br/>-Tag direkt nach dem Logo aus */
  .footer td[width="600"] > br:first-of-type {
    display: none !important;
  }
  
  /* 7. Bilder-Korrektur (Kein Rechts-Drift mehr für Ofenherde)                */
  /* ========================================================================= */
  .top img {
    width: 100% !important;
    max-width: 870px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
 
  /* Zwingt die Inhalts-HTML-Tabelle in das sichtbare Displayfenster des Handys */
  .inhalt table.table {
    display: table !important;
    max-width: 100% !important;
    width: 100% !important;
    table-layout: fixed !important; 
    margin: 15px 0 !important;
  }

  /* Setzt die starre 200px-HTML-Breite außer Kraft und verteilt den Platz symmetrisch */
  .inhalt table.table td {
    display: table-cell !important;
    width: 33.333% !important;       
    padding: 0 4px !important;       
    text-align: center !important;    
  }

  .inhalt table.table td img {
    display: block !important;
    width: 100% !important;          /* Nutzt die volle Breite des Spaltendrittels */
    max-width: 160px !important;     
    
    /* REPARIERT: Keine starre Höhe mehr, sondern ein festes Seitenverhältnis */
    height: auto !important;         /* Hebt die starren 85px auf */
    aspect-ratio: 16 / 11 !important; /* Hält die Bilder immer perfekt im Ofenherd-Format (160x110) */
    
    object-fit: cover !important;    /* Schneidet nichts mehr unschön ab, da die Höhe mitwächst */
    margin: 0 auto !important;
  }
  
  p.bild2 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    margin-left: 0px !important;
    margin-right: 5px !important;
    padding: 0px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    font-size: 0px !important;        
    letter-spacing: -4px !important; 
    word-spacing: -4px !important;  
  }
  
  p.bild2 a {
    display: inline-block !important;   /* Macht die Links zu stabilen, nebeneinanderstehenden Boxen */
    text-decoration: none !important;
    margin-left: 0px !important;
    margin-right:20px !important;       
    margin-top: 20px !important;
    margin-bottom: 5px !important;
    padding: 0px !important;
    height: 19px !important;       
    letter-spacing: normal !important; 
    word-spacing: normal !important;
  }
  
  /* Allgemeine Bildeigenschaften für alle Logos */
 .pic {
    width: 88px !important;        
    height: 19px !important;       
    object-fit: contain !important; 
    object-position: left center !important; /* Richtet das Logo innerhalb seiner Box links aus */
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    image-rendering: -webkit-optimize-contrast !important; 
  }

  /* Rika-Logo: Die goldene Mitte */
  p.bild2 a[href*="rika.de"] {
    width: 65px !important;        
  }
  p.bild2 a[href*="rika.de"] .pic {
    width: 65px !important;
    height: 12px !important;       
    object-position: center center !important;
  }

  /* Leda-Logo: Die goldene Mitte */
  p.bild2 a[href*="leda.de"] {
    width: 65px !important;        
  }
  p.bild2 a[href*="leda.de"] .pic {
    width: 65px !important;
    height: 12px !important;
    object-position: center center !important;
  }

  /* Ember-Logo: Die goldene Mitte */
  p.bild2 a[href*="ember.de"] {
    width: 72px !important;        
  }
  p.bild2 a[href*="ember.de"] .pic {
    width: 72px !important;
    height: 14px !important;       
    object-position: center center !important;
  }
p.bild2 a[href*="mcz.it"], p.bild2 a[href*="mcz.it"] .pic { 
    width: 65px !important; /* Identische zierliche Breite */
  }
  p.bild2 a[href*="mcz.it"] .pic { 
    height: 12px !important; /* Identische zierliche Höhe */
    object-position: left center !important; 
  }

  /* Bartz-Logo perfekt in die Reihe integrieren */
  p.bild2 a[href*="bartz-heiztechnik.de"] {
    width: 72px !important;        /* Identische Box-Größe wie Ember */
  }
  p.bild2 a[href*="bartz-heiztechnik.de"] .pic {
    width: 72px !important;
    height: 14px !important;       /* Perfekte Proportion für das Bartz-Logo */
    object-position: center center !important;
  }
  
.bild9 {
    float: none !important;       
    margin-left: auto !important;   
    margin-right: auto !important;
    margin-top: 25px !important;     
    margin-bottom: 15px !important;  
    display: block !important;
    width: 180px !important;         
    height:100px  !important;
}
  img {
    max-width: 100% !important;
    height: auto !important; 
  }
   .style1 {
    display: none !important;
    font-size: 1.3rem !important;        
    line-height: 1.3 !important;         
    font-weight: bold !important;         
    color: #F0100F !important;           
    margin-top: 15px !important;
    margin-bottom: 20px !important;      
    text-align: center !important;       
    letter-spacing: 0.5px !important; 
	 margin-left: 0px !important;
    margin-right: 0px !important;
    text-align: center !important;   
  }	
    .style2, .style3 {
        font-size: 1rem;       
        margin-left: 15px;      
        margin-right: 15px;     
    }

    .style4, .style9 {
        font-size: 0.95rem;     
        letter-spacing: 1px;    
        word-spacing: 1px;
        margin-left: 15px;
        margin-right: 15px;
    }

   .style5 {
        font-size: 0.9rem;
        margin-right: 0;
        text-align: center;     
        display: inline;        
        line-height: 1.6;       
    }

    .style6, .style7 {
        font-size: 1.05rem;
        margin-left: 15px;
        margin-right: 15px;
        letter-spacing: 1px;
    }

    .style8 {
        font-size: 11pt;
        margin-left: 0;         
        padding: 0 10px;
    }
   
    /* DIESE ZEILEN CODIEREN DEN SCHUTZ VOR DEM RAND: */
    width: 100% !important;              /* Nutzt exakt die Breite des Inhaltsbereiches */
    max-width: 100% !important;          /* Erlaubt unter keinen Umständen, breiter zu werden */
    box-sizing: border-box !important;   /* Rechnet Innenabstände korrekt ein */
    
    /* AUTOMATISCHE WORTTRENNUNG, FALLS EIN WORT ZU LANG IST: */
    white-space: normal !important;      /* Erlaubt normalen Zeilenumbruch */
    word-wrap: break-word !important;    /* Bricht extrem lange Wörter radikal um */
    word-break: break-word !important;   /* Sicherheitsnetz für ältere Browser */
    hyphens: auto !important;            /* Setzt bei Bedarf ordentliche Trennstriche (-) */
  }
}