/* 
    Created on : 12.12.2025
    Author     : Christian Roth
    Project    : Website Rendsburger Druck- und Verlagshaus
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

@font-face {
    font-family: titel;
    src: url('../fonts/segoeuil.ttf') format('truetype');
}

@font-face {
    font-family: text;
    src: url('../fonts/segoeui.ttf') format('truetype');
}

body {
    font-family: text, sans-serif;
    color: #555555;
    line-height: 1.5;
}

#tochter{
   text-transform:uppercase;
    font-family:titel, sans-serif;  
    display:block;
    font-weight:200;
    font-size:1.3em;
    text-align: center;
      margin-top:2em;
      width:100%;
      margin-left:38%;
}

#Kanalblatt img{
    margin-top:2.5em;
    width:17em;
    margin-left:30%;
}
 
 
#anzeige img{
    position:absolute;
    top:0;
    transform: rotate(-5.5deg);
    width:365px;
    height:auto;
    z-index:1;
             -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
            transition-duration: 0.5s;
    
}

.gruen{
    color:#22bb22;
    font-weight: bold;
}
.gruenlich{
    color:#22bb22 !important;
}

.leaf{
    width:1.3em;
    height:auto;
    margin-bottom:-0.2em;
    margin-right:0.1em;
}
.gruen:hover{
    color:#33dd33;
    font-weight: bolder;
}

nav{
     z-index:99;
    font-weight:800;
    display: block;
    font-size:1.1em;  
    text-align:center;
    color:#0EA1E0;
    padding-bottom:1em;
    border-bottom: 1em solid #0EA1E0;
    
}

nav a:hover{
    color:#0EA1E0;
    
}

nav b{
     z-index:99;
    font-weight:bold;
    color:#0EA1E0;
}

#unternehmen .links35{
    width:80%;
}

#unternehmen{
    padding-bottom: 5em;
    width: 100%; 
    font-size: 1em;
    min-height:200px;
}

.white{
    color: white;
    
}

nav a{
    z-index:99;
    font-family:titel, sans-serif;  
    color:#555555;
    font-weight:200;
    text-decoration:none;
    padding:5px;

}

#boger, #rieper{
    height:12.45em;
    width:auto;
    margin-top:0.2em;
}

#corporate{
    background-image: url("../grafics/corporate.png");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100px;
    padding-top:105px;
             -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
            transition-duration: 0.5s;
}

#corporate:hover{
    cursor: pointer;
   color: #0EA1E0;
   background-image: url("../grafics/corporate_a.png");
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
             transition-duration: 0.5s;   
}

#werbe{
    background-image: url("../grafics/werbe.png");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100px;
    padding-top:105px;
             -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#werbe:hover{
    cursor: pointer;
   color: #0EA1E0;
   background-image: url("../grafics/werbe_a.png");
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;   
}

#solar{
    background-image: url("../grafics/solar.png");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100px;
    padding-top:105px;
             -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#solar:hover{
    cursor: pointer;
   color: #22bb22;
   background-image: url("../grafics/solar_a.png");
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;   
}

#digital{
    background-image: url("../grafics/digital.png");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100px;
    padding-top:105px;
             -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

#digital:hover{
   cursor: pointer;
   color: #0EA1E0;
   background-image: url("../grafics/digital_a.png");
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;   
}
#paper{
    background-image: url("../grafics/paper.png");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100px;
    padding-top:105px;
             -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

#paper:hover{
   cursor: pointer;
   color: #22bb22;
   background-image: url("../grafics/paper_a.png");
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;   
}

#offset{
    background-image: url("../grafics/offset.png");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100px;
    padding-top:105px;
             -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

#offset:hover{
    cursor: pointer;
   color:#22bb22;
   background-image: url("../grafics/offset_a.png");
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;   
}

#nachhaltigkeit{
    background-image: url("../grafics/nachhaltig.png");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100px;
    padding-top:105px;
             -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

#nachhaltigkeit:hover{
    cursor: pointer;
   color:#22bb22;
   background-image: url("../grafics/nachhaltig_a.png");
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;   
}

#paint{
    background-image: url("../grafics/paint.png");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100px;
    padding-top:105px;
             -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

#paint:hover{
    cursor: pointer;
   color:#22bb22;
   background-image: url("../grafics/paint_a.png");
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
 transition-duration: 0.5s;   
}



.logo{
   height:auto;
   width:22em;
   margin-top:1.5em;
   margin-bottom:2em;
   display:block;
   margin-right:auto;
   margin-left:auto;   
}

.logos{
    width:18em;
    margin-top:5%;
    margin-left:5%;
    display:block;
    margin-bottom:35px;
}

.banner{
    background-image:url(../grafics/banner.jpg);
    background-color:white;
    opacity:0.7;
    width:100%;
    height:575px;
    background-size:100%;
    background-position: top;
            -webkit-transition-duration: 0.75s;
            -moz-transition-duration: 0.75s;
            -o-transition-duration: 0.75s;
  transition-duration: 0.75s;

}

.aktpic{
    display:inline;
    width: 45%;
}

.banner2{
    background-image:url(../grafics/banner2.jpg);
    width:100%;
    background-position:0 -220px;
    height:125px;
    background-size:cover;
   
}

h1{
     text-transform:uppercase;
     font-family:titel, sans-serif;  
     font-weight:100;
     padding-top:1em;
     display:block;
     font-size:3em;
          
}
#indextitel{
    border-top: 0.15em solid #0EA1E0;
}

h2{
    color:#0EA1E0;
    font-family: titel, text, sans-serif;
    font-size:2em;
    font-weight: 200;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

h3{
    text-transform:uppercase;
    font-family:titel, sans-serif;  
    display:block;
    font-weight:200;
    font-size:1.3em;
}
#titel{
    display:block;
    text-align:center;
}


#vierzeilig{
    margin-top:4em;
    margin-bottom:1.5em;
    display:block;

}

#vierzeilig a{
    text-decoration:none;
    color:#444444;
}

.inlineblock{
    display:inline-block;
    width:21%;
    font-size:0.8em;
    margin-left:3%;
    text-align:center;
    vertical-align: top;
}


.block{
    margin-top:10px;
}
.inlineblock img{
    width:33%;
}
.zweizeilig{   
    width: 100%; 
    font-size:1em;
    padding-bottom:1.5em;
}


#aktuell{
    margin-left:5%;
    background-position: 90% 33%;
    background-repeat:no-repeat;
    background-size: 33% auto; 
}

#aktuell a{
    color:#0EA1E0;
    text-decoration:underline;
}

#offdruck{
    background-image:url(../grafics/offdruck2.jpg);
    background-position: right;
    background-repeat:no-repeat;
    background-size:46% auto; 
      border-top: 0.5em solid #0EA1E0;
    min-height:350px;
}
#mineralfrei{
    background-image:url(../grafics/farben.jpg);
    background-position: right;
    background-repeat:no-repeat;
    background-size:48% auto; 
    border-top: 0.5em solid #0EA1E0;
    min-height:350px;
}
#recycling{
    background-image:url(../grafics/wald.jpg);
    background-position: right;
    background-repeat:no-repeat;
    background-size:48% auto; 
    border-top: 0.5em solid #0EA1E0;
    min-height:350px;
}
#neueenergie{
    background-image:url(../grafics/solar.jpg);
    background-position: right;
    background-repeat:no-repeat;
    background-size:48% auto; 
    border-top: 0.5em solid #0EA1E0;
    min-height:350px;
}
#naturell{
    background-image:url(../grafics/nachhaltig.jpg);
    background-position: right;
    background-repeat:no-repeat;
    background-size:48% auto; 
    border-top: 0.5em solid #0EA1E0;
    min-height:350px;
}
#codesign{
  border-top: 0.5em solid #0EA1E0;
      min-height:350px;
}

#werbetechnik{  
    background-image:url(../grafics/werbetechnik.jpg);
    background-position: right;
      background-repeat:no-repeat;
    background-size: 46% 110%; 
    min-height:350px;
      border-top: 0.5em solid #0EA1E0;
}
#digidruck{
    background-image:url(../grafics/digidruck.jpg);
    background-position: right;
    background-repeat:no-repeat;
    background-size: 46% auto; 
      min-height:350px;
        border-top: 0.5em solid #0EA1E0; 
}

.links35{     
    vertical-align: top;
    width:43%;
    display:inline-block;
    margin-left:5%;
}
#unternehmen .links35{     
    vertical-align: top;
    width:50%;
    display:inline-block;
    margin-left:5%;
}

#unternehmen a, #unternehmen h3{
     color:#6090e0;
      font-weight:500;
}

#impressum .links35{     
    vertical-align: top;
    width:30%;
    display:inline-block;
    margin-left:5%;
}

 .email{ 
        color:#0EA1E0;
 }
 #kontakt .links35{     
    vertical-align: top;
    width:40%;
    display:inline-block;
    margin-left:5%;
}

.rechts20{     
    vertical-align: top;
    width:28%;
    display:inline-block;
}

#unternehmen .rechts20{     
    vertical-align: top;
    width:40%;
    margin-right:2%;
    display:inline-block;
}

   
#impressum .rechts20{     
    vertical-align: top;
    width:30%;
    margin-right:2%;
    display:inline-block;
}

.rechts2{     
    vertical-align: top;
    margin-left:5%;
  margin-right:0%;

    display:inline-block;
}


.links35 h1{
     text-transform:uppercase;
     font-family:titel, sans-serif;  
     font-weight:300;
     display:block;
     color:#0EA1E0;
     font-size:2em;

}
#aktuell h1{
      text-transform:uppercase;
     font-family:titel, sans-serif;  
     font-weight:300;
     display:block;
     color:#0EA1E0;
     font-size:2em;
    
}

.rechts{
    float:right;  
}

#impressum h1{
    margin-bottom:0.5em;
}
#impressum h4{
    font-size:1.5em;
    margin-left:5%;
    margin-bottom:0.5em;
    color:#0EA1E0;
    margin-top: 1em;
}

#impressum p{
    margin-left:5%;
    margin-right:4%;
    margin-bottom:1.5em;
}

.abstand{
  
}

#kontakt{
    margin-top:2em;
    margin-bottom:2em;
}

#kontakt h3, #impressum h3{
    font-size:1.25em;
    font-weight:600;
    margin-bottom:0.5em;
 
}

.dataprotection{
    margin-left:5%;
}

p{
    padding-bottom:1.5em;
}

footer{
    border-top: 0.5em solid #0EA1E0;
    width:100%;
}

footer .banner2{
    padding-top:80px;
    padding-bottom:80px;
}

footer .center{
padding-top:2em;
text-align: center;
    
}


.bgcolor{
    z-index:99; 
    width:100%;
    background-color:#0EA1E0;   
    color:white;   
}

.links30{
    margin-top:1.5em;
    vertical-align: top;
    width:28%;
    display:inline-block;
    margin-left:5%;
}

.nonefloat{
     margin-top:5em;
    float:none;
}

#weiss{
    padding-bottom:6.3em;
}

@media (max-width: 1601px){


#anzeige img{
    width:300px;

}
.banner{
    height:450px;
}

#offdruck{
    background-size: 42% 100%; 
    min-height:400px;
}
#mineralfrei{
    background-size: 48% 100%; 
    min-height:400px;
}
#recycling{
    background-size: 48% 100%; 
    min-height:400px;
}
#naturell{
    background-size: 48% 100%; 
    min-height:400px;
}
#neueenergie{
    background-size: 48% 100%; 
    min-height:400px;
}
#digidruck{
    background-size: 42% 100%; 
    min-height:450px;
}

#werbetechnik{  
    background-size: 42% 100%; 
    min-height:450px;
}

#codesign{
    min-height:450px;
}
    
}
@media (max-width: 1220px){
    
    #anzeige img{
    width:220px;

}
}

@media (max-width: 1060px){

    
    #anzeige img{
    width:175px;

}
#werbe, #corporate, #digital, #offset{
    background-size:70px;
    padding-top:75px;
}

.banner2{
    height:250px;
    
}

.rechts20{
       display:block;
       float: none;
       margin-left:5%;
       margin-top: 1em;
}
 
.rechts2{
       display:block;
       float: none;
       margin-left:5%;
       margin-top: 1em;
}
#unternehmen .rechts20{     
    vertical-align: top;
    width:23%;
    margin-right:3%;
    display:inline-block;
    margin-top: 0;
}
#unternehmen .links35{     
    vertical-align: top;
    width:47%;
    display:inline-block;
    margin-left:5%;
}

footer .links30{
 margin-left:4%;   
    
}    
#offdruck{ 
    background-image:none;
}

 #digidruck{ 
    background-image:none;
}

 #aktuell{ 
    background-image:none;
}
 #werbetechnik{ 
    min-height:500px;
    background-image:none;
}
#mineralfrei{
    background-image:none;
}
#naturell{
    background-image:none;
}#neueenergie{
    background-image:none;
}#recycling{
    background-image:none;
}


 #codesign{ 
    background-image:none;
}

 #unternehmen{ 
    background-image:none;
}

 .banner{
       height:200px;
   }
   
   body {
       font-size: 1em;
   }
   
   h3{
       font-size:1.5em;
   }
   h1{
      font-size:2.75em;
   }
 .links35{
       width:80%;
   }
   
   
   .links30{
       width:80%;
   }
   .rechts20{
       width:80%;
   }
   
   #tochter{
      margin-left:0;   
      text-align: left;  
   }

 
 #impressum .links35, #kontakt .links35{     
    width:90%;
}

#weiss{
    padding-bottom:0em;

}


}

@media (max-width: 950px){
   #anzeige img{
    width:130px;
   }
   
   #unternehmen .rechts20{     
    vertical-align: top;
    width:100%;
    float:none;
    margin-left:5%;
    display: block;
    margin-top: 0;
}

#unternehmen .links35{     
    vertical-align: top;
    width:85%;
     float:none;
    display:block;
    margin-left:5%;
    margin-right:5%;
}
    
#Kanalblatt img{
    margin-top:2em;
    width:17em;
    margin-left:0;
  
}




}   
 
 
@media (max-width: 550px){
   #anzeige img{
    display:none;

}   
 
.aktpic{
    display:block;
    width: 90%;
}

 
 #werbe, #corporate, #digital, #offset{
    background-size:50px;
    padding-top:55px;
}
     
 .banner{
       height:100px;
   }
    body {
       font-size: 1em;
   }
   
   #vierzeilig h3{
       font-size:1em;
   }
   
   .inlineblock h3{
       display:none;
   }
   
   h2{
       font-size:1.25em;
   }
   
   h1{
      font-size:1em;
   }


 
.logos{
    display:none;
}
footer{
    font-size: 0.75em;
}
   .links35{
       width:80%;
   }
   .links30{
       width:80%;
   }
   .rechts20{
       width:80%;
   }

  

   
   footer .links30{
       width: 52%;
}
.banner2{
    background-repeat:no-repeat;

}
   
}

/* =====================================================
   SLIDER – ERGÄNZUNGEN (SICHER & ADDITIV)
   ===================================================== */

.slider {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.slide.active {
    opacity: 1;
    z-index: 1;
}

/* =====================================================
   SLIDE OVERLAY + TEXTFLÄCHE
   ===================================================== */

.slide-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none; /* verhindert Klickprobleme */
}

.slide-panel {
    padding: 2.5em;
    width: 100%;
}

.slide-panel h2 {
    font-family: titel, sans-serif;
    font-size: 2em;
    font-weight: 300;
    margin-bottom: 0.4em;
}

.slide-panel p {
    font-family: text, sans-serif;
    font-size: 1.1em;
    line-height: 1.5;
}

/* =====================================================
   FARBVARIANTEN (CMYK-VORBEREITET)
   ===================================================== */

.slide-panel-blue {
    background-color: #0EA1E0;
    color: #ffffff;
}

.slide-panel-c {
    background-color: #00AEEF;
    color: #ffffff;
}

.slide-panel-m {
    background-color: #EC008C;
    color: #ffffff;
}

.slide-panel-y {
    background-color: #FFF200;
    color: #000000; /* korrekt: Schwarz auf Gelb */
}

.slide-panel-k {
    background-color: #000000;
    color: #ffffff;
}

/* =====================================================
   SLIDER DOTS (bestehend erweitert)
   ===================================================== */

.slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.slider-dots .dot {
    width: 12px;
    height: 12px;
    background: #ffffff;
    opacity: 0.5;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

.slider-dots .dot.active {
    background: #0EA1E0;
    opacity: 1;
}

/* =====================================================
   RESPONSIVE – SLIDER (SANFT)
   ===================================================== */

@media (max-width: 768px) {

    .slider {
        height: 260px;
    }

    .slide-overlay {
        width: 100%;
        align-items: flex-end;
    }

    .slide-panel {
        padding: 1.5em;
    }

    .slide-panel h2 {
        font-size: 1.5em;
    }

    .slide-panel p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {

    .slider {
        height: 200px;
    }

    .slider-dots {
        bottom: 10px;
    }
}
/* =====================================================
   FIX: ÖFFNUNGSZEITEN – ZENTRIERT & RD-BLAU
   ===================================================== */

.oeffnungszeiten {
    text-align: left;
    margin: 1.5em 0 3em 0; /* KEIN auto */
}

.oeffnungszeiten-title {
    text-align: left !important;
    color: #0EA1E0 !important; /* RD Druck Blau */
}

.oeffnungszeiten-text {
    text-align: left !important;
}

/* =====================================================
   AKTUELLES – REDAKTIONELLES LAYOUT
   ===================================================== */

.aktuell-wrapper {
    max-width: 1100px;
    margin: 0 auto 4em;
    padding: 0 1.5em;
}

/* AKTUELLES – Box ohne Rahmen */
.aktuell-box {
    border: none;
    padding: 0;
}


.aktuell-box h3 {
    color: #0EA1E0; /* RD Blau */
    margin-top: 1.8em;
}

.aktuell-text p {
    margin-bottom: 1.2em;
    line-height: 1.6;
}

/* Titelbild */
.aktuell-hero img {
    width: 100%;
    height: auto;
}

/* AKTUELLES – Titelbild verkleinern */
.aktuell-hero {
    max-width: 80%;      /* ≈ 20 % kleiner */
    
}

/* AKTUELLES – Bildrahmen wie Startseite */
.aktuell-hero img,
.aktuell-inline-image img {
    border: 2px solid #0EA1E0; /* RD Druck Blau */
    box-sizing: border-box;
    display: block;
}


.aktuell-hero figcaption {
    font-size: 0.9em;
    margin-top: 0.5em;
}

/* Bild im Text */
.aktuell-inline-image {
    float: right;
    width: 45%;
    margin: 0.5em 0 1em 2em;
}

.aktuell-inline-image img {
    width: 100%;
    height: auto;
}

.aktuell-inline-image figcaption {
    font-size: 0.85em;
    margin-top: 0.4em;
}

/* Responsive */
@media (max-width: 768px) {
    .aktuell-inline-image {
        float: none;
        width: 100%;
        margin: 1.5em 0;
    }

    .aktuell-box {
        padding: 1.5em;
    }
}
/* =====================================================
   AKTUELLES – SEITENZENTRIERTER BERICHT
   ===================================================== */

/* Überschrift bleibt links, bekommt Abstand nach unten */
#aktuell > h1 {
    margin-bottom: 3.5em;
}

/* =====================================================
   AKTUELLES – SEITENZENTRIERT (AUS DEM RASTER GELÖST)
   ===================================================== */

/* gesamter Aktuelles-Bereich */
article#aktuell {
    max-width: 1200px;     /* Seitenbreite */
    margin: 0 auto 5em;    /* ZENTRIERT zur Webseite */
    padding: 0 2em;
}

/* Überschrift bleibt links im Artikel, aber Artikel selbst ist mittig */
article#aktuell > h1 {
    margin-top: 3em;
    margin-bottom: 3em;
}

/* Inhaltsbox bleibt ruhig */
article#aktuell .aktuell-box {
    margin: 0 auto;
}
/* =====================================================
   SLIDER – FINAL (Bild + Farbbanner angrenzend, stabil)
   ===================================================== */

.slider{
  position: relative;
  width: 100%;
  margin: 0 auto 3.5rem;
}

/* KEIN absolute stacking mehr -> verhindert Überlappung mit Content */
.slide{
  display: none;
}
.slide.active{
  display: block;
}

/* Höhe stabilisieren (damit nichts in den Content darunter ragt) */
.slide-inner{
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 0;                 /* wichtig: direkt angrenzend */
  height: clamp(280px, 34vw, 520px);  /* passt sich an, bleibt aber stabil */
  overflow: hidden;       /* falls Bilder minimal “zu groß” sind */
}

/* Verhältnis: Bild etwas mehr als die Hälfte,
   Banner ca. 20% schmaler als Bild (Banner = 0.8*Bild)
   => Bild ~55.6%, Banner ~44.4% */
.slide-image{
  flex: 0 0 55.6%;
}
.slide-panel{
  flex: 0 0 44.4%;
}

/* Beide Seiten füllen die volle Höhe */
.slide-image img,
.slide-panel img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Optional: pro Slide Seiten tauschen (wenn du abwechseln willst)
   -> dem .slide zusätzlich die Klasse "reverse" geben */
.slide.reverse .slide-inner{
  flex-direction: row-reverse;
}

/* Dots bleiben unten im Slider */
.slider-dots{
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* Responsive: untereinander */
@media (max-width: 900px){
  .slide-inner{
    flex-direction: column;
    height: auto;
  }
  .slide-image,
  .slide-panel{
    flex: 0 0 auto;
  }
  .slide-image img,
  .slide-panel img{
    height: auto;
  }
}

/* =====================================================
   KONTAKT – KLASSISCH / REDAKTIONELL
   ===================================================== */

.kontakt-seite {
    max-width: 1200px;
    margin: 3em auto 5em;
    padding: 0 2em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
}

/* Linke redaktionelle Spalte */
.kontakt-redaktion p {
    line-height: 1.6;
    margin-bottom: 2em;
}

.kontakt-bild img {
    width: 100%;
    height: auto;
    margin-bottom: 0.6em;
}

.kontakt-bild figcaption {
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 2em;
}

.kontakt-daten p {
    margin: 0.4em 0;
}

/* Formular-Spalte */
.kontakt-formular {
    border: 1px solid #dddddd;
    padding: 2.5em;
}

.kontakt-formular h3 {
    color: #0EA1E0; /* RD Blau */
    margin-bottom: 1.5em;
}

.kontakt-formular label {
    display: block;
    margin-top: 1.2em;
    font-weight: bold;
}

.kontakt-formular input,
.kontakt-formular select,
.kontakt-formular textarea {
    width: 100%;
    padding: 0.6em;
    margin-top: 0.4em;
    border: 1px solid #cccccc;
    font-family: inherit;
}

.kontakt-formular input:focus,
.kontakt-formular select:focus,
.kontakt-formular textarea:focus {
    outline: none;
    border-color: #0EA1E0;
}

.kontakt-formular button {
    margin-top: 2em;
    padding: 0.7em 2.5em;
    background: #0EA1E0;
    color: #ffffff;
    border: none;
    cursor: pointer;
}

.kontakt-formular button:hover {
    background: #0b8cc4;
}

/* Responsive */
@media (max-width: 900px) {
    .kontakt-seite {
        grid-template-columns: 1fr;
    }

    .kontakt-formular {
        margin-top: 3em;
    }
}
/* =====================================================
   SPRACHUMSCHALTER (DE / EN)
   ===================================================== */

.lang-switch {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 0.9em;
    white-space: nowrap;
}

.lang-switch a {
    color: #000000;
    text-decoration: none;
    margin: 0 3px;
}

.lang-switch a.active {
    font-weight: bold;
}

.lang-switch img {
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Responsive: unter Navigation */
@media (max-width: 900px) {
    .lang-switch {
        position: static;
        text-align: right;
        margin: 0.5em 1em;
    }
}
/* =====================================================
   FOOTER – RD DRUCK
   ===================================================== */

.site-footer {
    background: #0EA1E0; /* RD Druck Blau */
    color: #ffffff;
    margin-top: 4em;
    font-size: 0.95em;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5em 2em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
}

.footer-col strong {
    display: block;
    margin-bottom: 0.6em;
}

.site-footer a {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer a:hover {
    text-decoration: none;
}

/* Untere Zeile */
.footer-bottom {
    text-align: center;
    padding: 1em;
    background: #0b8cc4; /* dunkleres RD-Blau */
    font-size: 0.85em;
}

/* Responsive */
@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
/* =====================================================
   ONLINE-SHOP LANDINGPAGE (CTA-Variante)
   ===================================================== */

.onlineshop-seite {
    max-width: 1200px;
    margin: 3em auto 5em;
    padding: 0 2em;
}

.onlineshop-einleitung {
    max-width: 800px;
    margin: 0 auto 3em;
    line-height: 1.6;
    font-size: 1em;
}

/* Call to Action */
.onlineshop-cta {
    text-align: center;
}

.cta-button {
    display: inline-block;
    padding: 0.9em 2.8em;
    background: #0EA1E0; /* RD Druck Blau */
    color: #ffffff;
    text-decoration: none;
    font-size: 1.05em;
    border-radius: 2px;
}

.cta-button:hover {
    background: #0b8cc4;
}
/* Prozessgrafik unter CTA */
.onlineshop-prozess {
    margin-top: 3em;
    text-align: center;
}

.onlineshop-prozess img {
    max-width: 300px;
    width: 100%;
    height: auto;
    opacity: 0.9; /* leicht zurückgenommen */
}

/* =====================================================
   FIXIERTER SEITEN-STÖRER – INSTAGRAM & E-MAIL
   ===================================================== */

.side-contact {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(calc(-50% + 400px));
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Einzelnes Element */
.side-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 160px;
    padding: 12px 14px;

    background-color: rgba(14, 161, 224, 0.9); /* RD Blau */
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;

    border-radius: 6px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Icon */
.side-contact-item img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1); /* weiß */
}

/* Hover & Fokus */
.side-contact-item:hover,
.side-contact-item:focus {
    background-color: #ffffff;
    color: #0EA1E0;
}

.side-contact-item:hover img,
.side-contact-item:focus img {
    filter: none; /* Icon wieder original (RD-Blau) */
}

/* Tastatur-Fokus sichtbar */
.side-contact-item:focus {
    outline: 2px solid #0EA1E0;
    outline-offset: 3px;
}

/* Mobile: ausblenden (nicht nerven) */
@media (max-width: 768px) {
    .side-contact {
        display: none;
    }
}
/* =====================================================
   STARTSEITE – NACHHALTIGKEIT (SKELETON)
   ===================================================== */

.nachhaltigkeit {
    max-width: 1200px;
    margin: 4em auto;
    padding: 0 2em;
}

.nachhaltigkeit h2 {
    margin-bottom: 2.5em;
}

/* Block-Grundlayout */
.nh-block {
    display: flex;
    align-items: center;
    gap: 3em;
}

/* Textbereich */
.nh-text {
    flex: 1;
}

.nh-text h3 {
    color: #0EA1E0; /* RD Druck Blau */
    margin-bottom: 0.6em;
}

.nh-text p {
    line-height: 1.6;
}

/* Bildbereich

/* Bildcontainer in Nachhaltigkeits-Blöcken */
.nh-image {
    flex: 1;
    max-width: 500px;      /* Rahmenbreite */
}

/* Bild selbst */
.nh-image img {
    width: 100%;
    height: auto;
    display: block;
}


/* Reihenfolge tauschen */
.nh-block.reverse {
    flex-direction: row-reverse;
}

/* Trenner */
.nh-divider {
    height: 1px;
    background: #0EA1E0;
    opacity: 0.4;
    margin: 3em 0;
}

/* Responsive */
@media (max-width: 900px) {
    .nh-block,
    .nh-block.reverse {
        flex-direction: column;
    }

    .nh-image {
        width: 100%;
    }
}
/* Nachhaltigkeit – Überschrift mit Blatt */
.nh-headline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
}

.nh-headline img {
    height: 1em;
    width: auto;
}
/* Nachhaltigkeit – Bildrahmen direkt am Bild */
.nh-image img {
    border: 2px solid #0EA1E0;   /* RD Druck Blau, etwas stärker */
    box-sizing: border-box;
    display: block;
}
/* ================= SLIDER – FINAL STABIL ================= */

.slider {
  width: 100%;
  max-width: 100vw;
  position: relative;
  overflow: hidden;
}

.slide {
  display: none;
  width: 100%;
}

.slide.active {
  display: block;
}

.slide img {
  width: 100%;
  height: auto;      /* WICHTIG: verhindert Abschneiden */
  display: block;
}

/* Dots */
.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-dots .dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
}

.slider-dots .dot.active {
  background: #00AEEF;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {
  .slide-inner {
    flex-direction: column;
  }

  .slide-media,
  .slide-panel {
    flex: 0 0 100%;
  }
}
html, body {
  font-size: 16px !important;
  zoom: 1 !important;
  transform: none !important;
}

* {
  max-width: 100% !important;
}

.onlineshop-prozess {
  display: flex;
  justify-content: center;
}

.onlineshop-prozess img {
  width: auto !important;
  max-width: 220px !important;
  height: auto !important;
  flex: 0 0 auto !important;
  display: block;
}

/* =====================================================
   SLIDER – HOTFIX DESKTOP (UEBERSCHREIBT ALLE ALTREGELN)
   Ziel: nichts wird unten abgeschnitten, Bild bleibt korrekt,
   Dots bleiben sichtbar – auch im Vollbild/auf grossen Monitoren.
   ===================================================== */

.slider{
  position: relative !important;
  width: 100% !important;
  height: auto !important;          /* WICHTIG: keine fixe Höhe mehr */
  min-height: 0 !important;
  overflow: hidden !important;      /* okay, weil Dots im Slider liegen */
  padding-bottom: 34px !important;  /* Platz für Dots, damit sie nie “weg” sind */
}

/* wir nutzen "display none/block" statt absolute stacking */
.slider .slide{
  position: relative !important;
  inset: auto !important;
  display: none !important;
  opacity: 1 !important;            /* überschreibt alte opacity/transition-Logik */
  background: none !important;      /* falls alte Regeln background-size nutzen */
}

.slider .slide.active{
  display: block !important;
  z-index: 1 !important;
}

/* Bild verhält sich sauber auf grossen Screens */
.slider .slide img{
  width: 100% !important;
  height: auto !important;          /* verhindert Abschneiden */
  display: block !important;
  object-fit: contain !important;   /* zeigt komplettes Motiv */
  object-position: center bottom !important;
}

/* Dots immer sichtbar und über dem Bild */
.slider .slider-dots{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 10px !important;
  z-index: 10 !important;
  pointer-events: none;             /* optional: wenn sie eh nicht klickbar sind */
}

/* Englisch Schalter aus, löschen für Aktivierung */
.lang-switch a[href*="en"] {
  display: none;
}
/* Online-Shop: Einleitungstext zentrieren */
.onlineshop-einleitung{
    text-align: center;
    max-width: 900px;     /* optional, wirkt ruhiger */
    margin: 0 auto 3em;   /* zentriert + Abstand nach unten */
}
/* ==============================
   LEISTUNGEN – HERO + TITLE
============================== */
#leistungen-seite .page-title{
  margin-left: 5%;
  border-top: 0.15em solid #0EA1E0;
}

.leistung-hero{
  margin: 2em 5% 1.2em 5%;
}

.leistung-hero img{
  width: 100%;
  max-width: 900px;      /* <- damit der Leguan NICHT riesig wird */
  height: auto;
  display: block;
  border: 2px solid #0EA1E0;  /* blauer Rand direkt am Bild */
  box-sizing: border-box;
}

/* Intro-Text */
.leistungen-intro{
  margin-left:5%;
  margin-right:5%;
}

/* ==============================
   LEISTUNGEN – 3 NEUE KACHELN
   (Icons bitte als Dateien ablegen)
============================== */
#magazine{
  background-image: url("../grafics/magazine.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100px;
  padding-top:105px;
  transition-duration:0.5s;
}
#magazine:hover{
  cursor:pointer;
  color:#0EA1E0;
  background-image: url("../grafics/magazine_a.png");
}

#verkauf{
  background-image: url("../grafics/verkauf.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100px;
  padding-top:105px;
  transition-duration:0.5s;
}
#verkauf:hover{
  cursor:pointer;
  color:#0EA1E0;
  background-image: url("../grafics/verkauf_a.png");
}

#praesente{
  background-image: url("../grafics/praesente.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100px;
  padding-top:105px;
  transition-duration:0.5s;
}
#praesente:hover{
  cursor:pointer;
  color:#0EA1E0;
  background-image: url("../grafics/praesente_a.png");
}

/* Mobile: gleiche Behandlung wie die alten 4 */
@media (max-width: 550px){
  #werbe, #corporate, #digital, #magazine, #verkauf, #praesente{
    background-size:50px;
    padding-top:55px;
  }
}
#unternehmen .rechts20 img,
#unternehmen .rechts20 a{
  display: block;
  text-align: center;
}

#unternehmen .rechts20 img{
  margin: 0 auto;
}
/* Unternehmen – Überschrift über Tochterlogos zentrieren */
#unternehmen .rechts20 h4 {
    text-align: center;
    margin-bottom: 25px;
}