@charset "utf-8";
/* ============================================================================
   Köberl GmbH — Auffrischung 2026
   Gilt für sonnenfenster.com und sonnenmarkise.at.
   Eingebunden in templates/fe_page.xhtml NACH style.css, damit diese Datei
   gewinnt. Die alten Dateien bleiben unverändert — zum Zurücknehmen genügt es,
   die eine <link>-Zeile in fe_page.xhtml wieder zu entfernen.

   Leitgedanke „Licht und Lamelle": Das Unternehmen verkauft die Beherrschung
   von Tageslicht. Deshalb warmes Papierweiß statt kaltem Weiß, das Gold der
   Marke als Akzent statt als Fläche — und als einziges Schmuckelement ein
   schmales Lamellenband, wie ein Raffstore von der Seite gesehen.
   ========================================================================= */

/* --- Schriften, selbst gehostet: kein fremder Server im Betrieb ---------- */
@font-face{
  font-family:'ArchivoKB'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'InterKB'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --papier:#FAF7F1;      /* Tageslicht auf Wand */
  --karte:#FFFFFF;
  --nacht:#14120E;       /* warmes Fast-Schwarz statt #000 */
  --tinte:#211E19;
  --gedaempft:#6B6357;
  --sonne:#EFB000;       /* Markengold, unverändert */
  --glut:#9A6A08;        /* dunkleres Gold: lesbar auf Hell */
  --linie:rgba(33,30,25,.13);
  --linie-hell:rgba(255,255,255,.12);
  --radius:14px;
  --schatten:0 1px 2px rgba(20,18,14,.05), 0 8px 28px rgba(20,18,14,.07);
}

/* --- Grundlage ---------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;}
body{
  min-width:0!important;
  font-family:'InterKB',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.65; color:var(--tinte);
  background:var(--nacht);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto;}
#wrapper{background:var(--papier)!important;}

.container_24{
  width:auto!important; max-width:1160px; min-width:0!important;
  margin:0 auto!important; padding:0 24px; box-sizing:border-box;
}

/* --- Typografie --------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-family:'ArchivoKB','InterKB',system-ui,Arial,sans-serif;
  letter-spacing:-.015em; color:var(--tinte);
}
h1{font-size:clamp(29px,4vw,42px); line-height:1.14; font-weight:700; margin:0 0 20px;}
h2{font-size:clamp(21px,2.5vw,27px); line-height:1.28; font-weight:600; color:var(--glut); margin:36px 0 14px;}
h3{font-size:19px; line-height:1.4; font-weight:600; margin:0 0 8px;}
p{margin:0 0 16px;}
strong,b{font-weight:600;}
ul,ol{margin:0 0 18px; padding-left:22px;}
li{margin-left:0;}
a{color:var(--glut); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
a:hover{color:var(--tinte);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--sonne); outline-offset:2px;
}

/* --- Kopf: Logo und Navigation nebeneinander, Bühne darunter ------------- */
#header{background:var(--nacht); position:relative;}
#header .container_24{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  column-gap:28px; row-gap:0; padding-top:14px; padding-bottom:14px;
}
#header .clear{display:none;}
#logo{
  grid-column:1; grid-row:1;
  position:static!important; float:none!important;
  margin:0!important; padding:0!important;
  width:276px; height:52px; max-width:56vw;
  background-size:contain!important; background-position:left center!important;
  background-repeat:no-repeat!important;
}
/* Die Logo-Dateien haben einen schwarzen Hintergrund. „lighten" lässt genau
   diese schwarzen Flächen mit dem Kopf verschmelzen — ohne die Dateien
   anzufassen. Ältere Browser zeigen schlicht das Bild wie bisher. */
#logo,#logo_F,#logo_M,#logo_MFB{mix-blend-mode:lighten;}
.sonnenmarkise #logo{top:auto!important; width:300px; height:52px;}
.mod_mootoolsnav.nav_main,.nav_main{
  grid-column:2; grid-row:1;
  float:none!important; margin:0!important; padding:0!important;
}
.mod_slideshow2{grid-column:1/-1; grid-row:2; margin-top:14px;}

/* Lamellenband — das eine Schmuckelement */
#header::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(to bottom,
             rgba(239,176,0,.9) 0 1px, transparent 1px 3px);
  opacity:.65;
}

/* --- Navigation --------------------------------------------------------- */
.nav_main ul.level_1{
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px;
  list-style:none; margin:0; padding:0;
}
.nav_main li{
  float:none!important; margin:0!important; border:0!important;
  background:none!important; list-style:none; position:relative;
}
.nav_main a{
  display:block; padding:11px 14px; line-height:1.2!important;
  font-family:'ArchivoKB','InterKB',sans-serif;
  font-size:14px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:#F3EEE4; text-decoration:none; background:none!important;
  border-radius:999px; transition:background-color .18s ease, color .18s ease;
}
.nav_main a:hover,.nav_main .active a,.nav_main .trail a{
  background:rgba(239,176,0,.16)!important; color:var(--sonne)!important;
}
.nav_main .level_2{
  background:var(--karte)!important; border-radius:16px; padding:6px!important;
  box-shadow:0 18px 44px rgba(0,0,0,.28); border:1px solid var(--linie);
  min-width:220px; overflow:hidden;
}
.nav_main .level_2 li{border:0!important;}
.nav_main .level_2 a{
  background:var(--karte)!important; color:var(--tinte)!important;
  text-transform:none; letter-spacing:0; font-size:15px; line-height:1.35!important;
  padding:10px 16px!important; border-radius:999px;
}
.nav_main ul.level_2 a:hover,.nav_main ul.level_2 .active a,.nav_main ul.level_2 .trail a{
  background:var(--papier)!important; color:var(--glut)!important;
}

/* --- Bühne / Diaschau --------------------------------------------------- */
.mod_slideshow2{
  background:none!important; padding-bottom:0!important;
  border-radius:16px; overflow:hidden; line-height:0;
}
#show_1,#show_1 .slideshow-images{
  width:100%!important; height:auto!important; aspect-ratio:1000/396;
}
.mod_slideshow2 img,.slideshow img{width:100%!important; height:auto!important; display:block;}
/* Die Diaschau schiebt ihr Bild per Inline-Stil nach unten (top:128px), weil sie
   mit der alten festen Höhe von 396px rechnet. Bei fließender Breite schneidet
   das die Bühne ab — deshalb hier zurück auf den Anschlag. */
#show_1 .slideshow-images img{top:0!important;}
#show_1 .slideshow-images{overflow:hidden;}
#show_1 .slideshow-captions{width:100%!important;}

/* --- Inhaltsbereich: zwei Spalten, die am Handy untereinander rutschen --- */
#container{
  background:var(--papier)!important; border-bottom:0!important;
  padding:44px 0 60px!important;
}
#container>.container_24{
  display:flex; align-items:flex-start; gap:44px;
}
#container>.container_24>.clear{display:none;}
#main{
  float:none!important; width:auto!important; min-width:0;
  flex:1 1 auto; margin:0!important; padding:0!important;
}
#right{
  float:none!important; width:auto!important;
  flex:0 0 320px; margin:0!important; padding:0!important;
}
#main .inside,#right .inside{width:auto;}
/* Das Raster von 2012 setzt display:inline und float:left mit festen Pixelbreiten.
   Beides muss weg, sonst kleben Text und Kasten nebeneinander in Spalten, die
   nicht mitwachsen. */
#main [class*="grid_"],#footer [class*="grid_"],#right [class*="grid_"]{
  width:auto!important; float:none!important; display:block!important;
  margin-left:0!important; margin-right:0!important;
}
#main iframe{max-width:100%; border-radius:12px; border:1px solid var(--linie);}
/* Die eingebettete Google-Karte ist seit Jahren tot: der alte Dienst
   maps.google.at/...&output=embed antwortet mit 404 und verbietet zusätzlich das
   Einbetten. Statt eines leeren grauen Kastens bleibt der Textlink darunter. */
#main iframe[src*="maps.google"]{display:none!important;}
#main [class*="grid_"] small a{
  display:inline-block; margin-top:4px; padding:10px 18px;
  border:1px solid var(--linie); border-radius:999px;
  background:var(--karte); color:var(--tinte)!important;
  font-size:15px; text-decoration:none;
}
#main [class*="grid_"] small a:hover{border-color:var(--sonne); color:var(--glut)!important;}

/* --- Seitenspalte: Karten ----------------------------------------------- */
#right .mod_newslist{
  background:var(--nacht)!important; color:#EDE7DC;
  border-radius:var(--radius) var(--radius) 0 0; padding:26px 26px 6px!important;
}
#right .mod_newslist h2{color:#FFF; background:none!important; margin:0 0 14px; font-size:22px;}
#right .mod_newslist h3 a{color:#FFF; font-weight:600; text-decoration:none;}
#right .mod_newslist h3 a:hover{color:var(--sonne);}
#right .mod_newslist .date{font-family:'InterKB',sans-serif!important; font-size:13px!important; color:var(--sonne); letter-spacing:.04em;}
#right .mod_newslist .item{border-bottom:1px solid var(--linie-hell)!important; padding-bottom:14px!important; margin-bottom:14px!important;}
.allNews{
  background:var(--nacht)!important; border-radius:0 0 var(--radius) var(--radius);
  margin:0 0 26px!important; padding:4px 26px 20px!important; line-height:1.5!important;
  list-style:none; text-align:right;
}
.allNews a{color:var(--sonne); text-decoration:none; font-size:15px;}
.allNews a:hover{text-decoration:underline;}

.box_sm{
  background:var(--sonne)!important; color:#221B05;
  border-radius:var(--radius); padding:26px!important; margin-bottom:26px;
}
#main .box_sm{padding:26px!important;}
.box_sm h2,.box_sm.contact_box h2,.contact_box h2{
  background:none!important; color:#221B05!important; margin:0 0 12px!important;
  font-size:22px!important; line-height:1.25;
}
.box_sm a{color:#221B05!important; text-align:left!important; font-weight:600;}
.box_sm.contact_box,.box_sm.mfb{
  background:var(--nacht)!important; color:#EDE7DC; border-radius:var(--radius);
}
.box_sm.contact_box h2,.box_sm.mfb h2{color:#FFF!important;}
.box_sm.contact_box a,.box_sm.mfb a{color:var(--sonne)!important;}
.box_sm.contact_box iframe,.contact_box iframe{border-radius:10px; margin-top:12px; max-width:100%;}

/* --- Fußzeile ----------------------------------------------------------- */
#footer{
  background:var(--nacht)!important; color:#9C9385;
  border-top:0!important; position:relative;
}
#footer::before{
  content:''; position:absolute; left:0; right:0; top:0; height:6px;
  background:repeating-linear-gradient(to bottom,
             rgba(239,176,0,.9) 0 1px, transparent 1px 3px);
  opacity:.65;
}
#footer .container_24{
  padding:44px 24px 0!important;
  display:grid; grid-template-columns:1fr auto; column-gap:48px; align-items:start;
}
#footer .tpl_footer_text{grid-column:1; grid-row:1; max-width:56ch;}
#footer .clear{display:none;}
#footer .tpl_footer{grid-column:1/-1; grid-row:2;}
#footer h3{color:#EDE7DC!important; font-size:17px;}
#footer p{color:#9C9385;}
#footer a{color:#C6BDAD; font-weight:500;}
#footer a:hover{color:var(--sonne);}
.tpl_footer_text{padding-left:0!important;}
.tpl_footer{
  background:none!important; color:#8E8577!important;
  border-top:1px solid var(--linie-hell); margin-top:36px;
  padding:20px 0; line-height:1.8!important; font-size:14px; text-align:center;
}
#footer .tpl_footer a{color:#8E8577!important;}
#footer .tpl_footer a:hover{color:var(--sonne)!important;}
#logo_F,#logo_M,#logo_MFB{
  grid-column:2; grid-row:1; justify-self:end; align-self:center;
  float:none!important; background-size:contain!important;
  background-position:right center!important;
  max-width:100%; margin:0!important; padding:0!important;
  width:260px; height:80px;
}

/* --- Formulare ---------------------------------------------------------- */
.ce_form fieldset{border:0!important; padding:0!important; margin:0!important;}
.ce_form legend{
  font-family:'ArchivoKB',sans-serif!important; font-style:normal!important;
  color:var(--tinte)!important; font-size:22px!important; padding:0!important;
}
.ce_form label{
  float:none!important; width:auto!important; display:block; clear:none!important;
  border:0!important; margin:0 0 6px!important; padding:0!important;
  font-weight:600; color:var(--tinte); line-height:1.4!important;
}
.ce_form .text,.ce_form .textarea,.ce_form .captcha,.ce_form .select{
  float:none!important; width:100%!important; max-width:520px; box-sizing:border-box;
  height:auto!important; padding:12px 14px!important;
  border:1px solid var(--linie)!important; border-radius:10px;
  background:var(--karte)!important; color:var(--tinte)!important;
  font-family:'InterKB',sans-serif!important; font-size:16px!important;
  margin-bottom:20px!important;
}
.ce_form .textarea{min-height:150px; resize:vertical!important;}
.ce_form .captcha{max-width:160px; margin-bottom:8px!important;}
.ce_form .captcha_text{float:none!important; display:block; color:var(--gedaempft); margin-bottom:20px!important;}
.ce_form .text:hover,.ce_form .textarea:hover{border-color:var(--gedaempft)!important;}
.ce_form .text:focus,.ce_form .textarea:focus{border-color:var(--sonne)!important;}
.ce_form .submit{
  background:var(--nacht)!important; color:#FFF!important; border:0!important;
  border-radius:999px; width:auto!important; height:auto!important;
  padding:14px 30px!important; font-family:'ArchivoKB',sans-serif!important;
  font-size:15px!important; font-weight:600; letter-spacing:.06em;
  cursor:pointer; transition:background-color .18s ease;
}
.ce_form .submit:hover{background:var(--glut)!important; color:#FFF!important;}
.ce_form label.error{color:#B3261E!important; border:0!important;}

/* --- Bildergalerien ----------------------------------------------------- */
.ce_gallery .image_container,.ce_INREDgallery .gallery img{
  border:0!important; border-radius:10px; overflow:hidden;
}
.ce_gallery img{border-radius:10px;}

/* ============================================================================
   Handy und Tablet
   ========================================================================= */
@media (max-width:900px){
  body{font-size:16px;}
  #header .container_24{grid-template-columns:1fr; row-gap:12px; padding-top:16px;}
  #logo{grid-column:1; grid-row:1; width:240px; height:46px;}
  .mod_mootoolsnav.nav_main,.nav_main{grid-column:1; grid-row:2;}
  .mod_slideshow2{grid-column:1; grid-row:3;}
  .nav_main ul.level_1{justify-content:flex-start;}
  .nav_main a{padding:10px 12px; font-size:13px;}
  /* Aufklappmenüs brauchen einen Mauszeiger — am Handy führen die
     Hauptpunkte direkt auf die jeweilige Seite. */
  .nav_main .level_2{display:none!important;}
  #container{padding:32px 0 44px!important;}
  #container>.container_24{flex-direction:column; gap:32px;}
  #right{flex:1 1 auto; width:100%!important; align-self:stretch;}
  .container_24{padding:0 18px;}
  #footer .container_24{
    padding:32px 18px 0!important; grid-template-columns:1fr; row-gap:24px;
  }
  #footer .tpl_footer_text{grid-column:1; grid-row:1;}
  #logo_F,#logo_M,#logo_MFB{
    grid-column:1; grid-row:2; justify-self:start;
    width:220px!important; height:64px!important;
    background-position:left center!important;
  }
  #footer .tpl_footer{grid-column:1; grid-row:3;}
}
@media (max-width:520px){
  h1{font-size:27px;}
  .box_sm{padding:20px!important;}
  #right .mod_newslist{padding:20px 20px 4px!important;}
  .allNews{padding:4px 20px 16px!important;}
  .tpl_footer{font-size:13px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important;}
}

/* --- Druck -------------------------------------------------------------- */
@media print{
  #header,#footer,#right,.mod_slideshow2{display:none!important;}
  #wrapper,#container{background:#FFF!important;}
  body{font-size:11pt; color:#000;}
}