/* =========================================================================
   SERENA GARDA — Designsystem 1.1
   Child-Theme-Stylesheet für Divi 5

   Enthält:
   1. Schrifteinbindung (selbst gehostet)
   2. Design-Tokens als CSS-Variablen
   3. Typografische Feinheiten
   4. Buttons, Links, Fokuszustände
   5. Layout-Hilfsklassen für die Startseite
   6. Bewegung
   7. SERENA GUIDE

   Grundlage: Brandbook Version 1.1 vom 13. August 2026
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Schriften
   ------------------------------------------------------------------------- */
@font-face{font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-garamond-300.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";
  src:url("../fonts/karla-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";
  src:url("../fonts/karla-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";
  src:url("../fonts/karla-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* -------------------------------------------------------------------------
   2. Design-Tokens
   Die Werte sind identisch mit den Design Variables in Divi. Divi versorgt
   den Builder, diese Variablen versorgen alles, was von Hand ergänzt wird.
   ------------------------------------------------------------------------- */
:root{
  --sg-olive-deep:#3F4A3C;
  --sg-olive-soft:#707760;
  --sg-ink:#362014;
  --sg-earth:#8E5D33;
  --sg-honey:#C17B3D;
  --sg-sand:#D6BA8A;
  --sg-linen:#CBBAA6;
  --sg-cream:#F6EDDE;
  --sg-warm-white:#FDFAF4;
  --sg-muted-text:#6B695F;

  --sg-font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sg-font-sans:"Karla",Arial,Helvetica,sans-serif;

  --sg-max-width:1240px;
  --sg-text-width:720px;
  --sg-editorial-width:640px;
  --sg-gutter:48px;
  --sg-section:120px;
  --sg-grid-gap:32px;
  --sg-margin-col:200px;
  --sg-radius:4px;
}
@media(max-width:980px){:root{--sg-gutter:32px;--sg-section:88px;--sg-margin-col:140px}}
@media(max-width:767px){:root{--sg-gutter:20px;--sg-section:64px;--sg-grid-gap:20px}}

/* -------------------------------------------------------------------------
   3. Typografie
   ------------------------------------------------------------------------- */
body,.et_pb_text,.et_pb_blurb_description,input,textarea,select,button{
  font-family:var(--sg-font-sans)}
body{color:var(--sg-ink)}
h1,h2,h3{font-family:var(--sg-font-display)}

/* Kein vom Browser erzeugter Fettschnitt oder Kursivschnitt */
h1,h2,h3,.sg-display,.sg-h2,.sg-h3,.sg-quote{font-synthesis:none}

/* Gewichtslogik: je kleiner der Grad, desto mehr Gewicht.
   Cormorant verliert unter 30 px sonst die Haarstriche. */
.sg-display{font-weight:300}
.sg-h2{font-weight:400}
.sg-h3,.sg-serif-small{font-weight:500}

.sg-eyebrow p,.sg-eyebrow{
  font-family:var(--sg-font-sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.12em;font-size:13px;line-height:1.3;color:var(--sg-earth);
  display:flex;align-items:flex-start;gap:14px;margin:0 0 16px}
.sg-eyebrow::before{content:"";flex:0 0 22px;height:1px;background:var(--sg-honey);
  margin-top:.62em}
@media(max-width:767px){.sg-eyebrow p,.sg-eyebrow{font-size:12px}}

.sg-meta{font-size:14px;line-height:1.5;color:var(--sg-muted-text)}
@media(max-width:767px){.sg-meta{font-size:13px}}

/* Listen als typografische Reihen statt Aufzählungspunkte */
.sg-list ul{list-style:none;padding-left:0;margin:0}
.sg-list li{padding:12px 0;border-bottom:1px solid var(--sg-sand)}
.sg-on-dark .sg-list li{border-bottom-color:rgba(214,186,138,.32)}

/* -------------------------------------------------------------------------
   4. Buttons, Links, Fokus
   Buttons sind erdfarben. Das Olivgrün bleibt den großen Flächen vorbehalten.
   ------------------------------------------------------------------------- */
.sg-btn .et_pb_button,.sg-btn.et_pb_button{
  font-family:var(--sg-font-sans);font-weight:500;font-size:15px;
  letter-spacing:.04em;line-height:1.2;border-radius:0;padding:16px 26px;
  min-height:44px;
  transition:background-color 400ms ease,color 400ms ease,border-color 400ms ease}

.sg-btn--primary.et_pb_button{
  background-color:var(--sg-earth);color:var(--sg-warm-white);
  border:1px solid var(--sg-earth)}
.sg-btn--primary.et_pb_button:hover{
  background-color:var(--sg-ink);border-color:var(--sg-ink);
  color:var(--sg-warm-white)}

.sg-btn--secondary.et_pb_button{
  background-color:transparent;color:var(--sg-earth);
  border:1px solid var(--sg-earth)}
.sg-btn--secondary.et_pb_button:hover{
  background-color:var(--sg-earth);color:var(--sg-warm-white)}

.sg-on-dark .sg-btn--secondary.et_pb_button{
  color:var(--sg-warm-white);border-color:var(--sg-sand)}
.sg-on-dark .sg-btn--secondary.et_pb_button:hover{
  background-color:var(--sg-warm-white);color:var(--sg-olive-deep);
  border-color:var(--sg-warm-white)}

/* Textlinks: die Farbe bleibt konstant, nur die Unterstreichung wechselt.
   So bleibt der Kontrast in jedem Zustand über 4,5:1. */
.sg-body a,.sg-lead a,.et_pb_text a{
  color:var(--sg-ink);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--sg-sand);
  transition:text-decoration-color 300ms ease}
.sg-body a:hover,.sg-lead a:hover,.et_pb_text a:hover{
  color:var(--sg-ink);text-decoration-color:var(--sg-honey)}

a:focus-visible,button:focus-visible,.et_pb_button:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--sg-earth);outline-offset:2px}
.sg-on-dark a:focus-visible,.sg-on-dark button:focus-visible{
  outline-color:var(--sg-warm-white)}

/* -------------------------------------------------------------------------
   5. Layout
   ------------------------------------------------------------------------- */
.sg-image img{border-radius:var(--sg-radius)}
.sg-image-full img{border-radius:0;width:100%;object-fit:cover}

/* Marginalspalte: Eyebrow steht links außen, der Inhalt beginnt eingerückt */
.sg-editorial .et_pb_column:first-child{max-width:var(--sg-margin-col)}
@media(max-width:767px){.sg-editorial .et_pb_column:first-child{max-width:none}}

/* Bilder, die aus dem Raster ausbrechen.
   In Divi auf die Row anwenden, deren Bild bis zum Bildschirmrand laufen soll. */
.sg-bleed-left{margin-left:calc((100vw - min(100vw,var(--sg-max-width))) / -2)}
.sg-bleed-right{margin-right:calc((100vw - min(100vw,var(--sg-max-width))) / -2)}
@media(max-width:980px){.sg-bleed-left,.sg-bleed-right{margin-left:0;margin-right:0}}

/* Versetztes Bildpaar */
.sg-offset{transform:translateY(72px)}
@media(max-width:980px){.sg-offset{transform:translateY(40px)}}
@media(max-width:767px){.sg-offset{transform:none}}

/* Auf Mobil steht das Bild immer vor dem Text */
@media(max-width:767px){
  .sg-image-first{display:flex;flex-direction:column}
  .sg-image-first .et_pb_column:last-child{order:-1}
}

.sg-divider{border-top:1px solid var(--sg-sand)}
.sg-accent-rule{border-top:1px solid var(--sg-honey)}

/* -------------------------------------------------------------------------
   6. Bewegung
   ------------------------------------------------------------------------- */
.sg-image img{transition:transform 500ms ease}
.sg-hover-zoom:hover .sg-image img{transform:scale(1.02)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* -------------------------------------------------------------------------
   7. SERENA GUIDE
   Wird nur auf den Guide-Templates gebraucht.
   ------------------------------------------------------------------------- */
.sg-guide{background-color:var(--sg-warm-white)}
.sg-guide h1{font-size:39px;line-height:1.10;font-weight:300}
.sg-guide h2{font-size:31px;line-height:1.18;font-weight:500}
.sg-guide h3{font-family:var(--sg-font-sans);font-weight:500;font-size:22px;
  line-height:1.25}
.sg-guide,.sg-guide p{font-size:16px;line-height:1.65}
@media(min-width:768px){
  .sg-guide h1{font-size:48px}
  .sg-guide h2{font-size:37px}
  .sg-guide h3{font-size:25px}
  .sg-guide,.sg-guide p{font-size:17px}
}

.sg-guide-tile{position:relative;display:block;aspect-ratio:4/3;min-height:44px;
  border-radius:var(--sg-radius);overflow:hidden;background:var(--sg-linen)}
.sg-guide-tile::after{content:"";position:absolute;inset:0;
  background:rgba(54,32,20,.35)}
.sg-guide-tile span{position:absolute;inset:auto 16px 16px 16px;z-index:1;
  color:var(--sg-warm-white);font-family:var(--sg-font-sans);font-weight:500;
  font-size:16px;line-height:1.25}

.sg-guide-accordion button{width:100%;min-height:56px;text-align:left;
  background:var(--sg-warm-white);border:1px solid var(--sg-sand);
  border-radius:var(--sg-radius);padding:16px;font-family:var(--sg-font-sans);
  font-weight:500;font-size:17px;color:var(--sg-ink)}

.sg-guide-emergency{background:var(--sg-warm-white);border:1px solid var(--sg-sand);
  border-left:4px solid var(--sg-honey);border-radius:var(--sg-radius);padding:20px}

.sg-guide-bottomnav{position:fixed;inset:auto 0 0 0;height:64px;display:flex;
  background:var(--sg-warm-white);border-top:1px solid var(--sg-sand);
  padding-bottom:env(safe-area-inset-bottom);z-index:999}
.sg-guide-bottomnav a{flex:1;min-height:44px;display:flex;align-items:center;
  justify-content:center;font-family:var(--sg-font-sans);font-weight:500;
  font-size:13px;color:var(--sg-muted-text);text-decoration:none}
.sg-guide-bottomnav a[aria-current="page"]{color:var(--sg-earth)}

/* -------------------------------------------------------------------------
   9. Responsive Typografie — verbindlich
   Divi 5 arbeitet mit mehr als drei Breakpoint-Stufen. Werte, die im Builder
   für Tablet und Smartphone eingetragen werden, greifen dadurch nicht
   zuverlässig. Die Schriftgrößen werden deshalb hier zentral gesetzt.
   Diese Regeln stehen bewusst am Ende der Datei und gewinnen damit gegen
   Divis Moduleinstellungen.
   ------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 980px){
  .et-db #et-boc h1, body h1{font-size:56px !important;line-height:1.04 !important}
  .et-db #et-boc h2, body h2{font-size:41px !important;line-height:1.15 !important}
  .et-db #et-boc h3, body h3{font-size:31px !important;line-height:1.22 !important}
}

/* Smartphone */
@media (max-width: 767px){
  .et-db #et-boc h1, body h1{font-size:34px !important;line-height:1.08 !important}
  .et-db #et-boc h2, body h2{font-size:30px !important;line-height:1.16 !important}
  .et-db #et-boc h3, body h3{font-size:25px !important;line-height:1.24 !important}

  /* Lange Wörter dürfen umbrechen statt aus dem Bild zu laufen */
  body h1, body h2, body h3{overflow-wrap:break-word;hyphens:auto}

  /* Der Claim: kleiner und enger gesperrt, damit er auf eine Zeile passt */
  .sg-claim, .sg-claim p{
    font-size:11px !important;
    letter-spacing:.18em !important;
    line-height:1.7 !important;
  }

  /* Buttons über die volle Breite, damit sie nicht zufällig wirken */
  .sg-btn .et_pb_button, .sg-btn.et_pb_button{
    display:block;width:100%;text-align:center;
  }
}

/* -------------------------------------------------------------------------
   10. Feste Breiten auf kleinen Bildschirmen aufheben
   Module mit einer max-width in Pixeln ragen sonst über den Bildschirm
   hinaus, statt umzubrechen. Betrifft alle Textblöcke mit Lesebreite.
   ------------------------------------------------------------------------- */
@media (max-width: 980px){
  .et_pb_module,
  .et_pb_text,
  .et_pb_column,
  .et_pb_row{
    max-width:100% !important;
  }
}

/* Schriftgrößen mit erhöhter Spezifität, damit sie gegen Divis
   Moduleinstellungen gewinnen. */
@media (max-width: 767px){
  html body .et_pb_section .et_pb_row .et_pb_column .et_pb_module h1{
    font-size:34px !important;line-height:1.08 !important}
  html body .et_pb_section .et_pb_row .et_pb_column .et_pb_module h2{
    font-size:30px !important;line-height:1.16 !important}
  html body .et_pb_section .et_pb_row .et_pb_column .et_pb_module h3{
    font-size:25px !important;line-height:1.24 !important}
}
@media (min-width: 768px) and (max-width: 980px){
  html body .et_pb_section .et_pb_row .et_pb_column .et_pb_module h1{
    font-size:56px !important;line-height:1.04 !important}
  html body .et_pb_section .et_pb_row .et_pb_column .et_pb_module h2{
    font-size:41px !important;line-height:1.15 !important}
  html body .et_pb_section .et_pb_row .et_pb_column .et_pb_module h3{
    font-size:31px !important;line-height:1.22 !important}
}

/* -------------------------------------------------------------------------
   11. Horizontales Überlaufen verhindern
   Ein einzelnes Element, das über den rechten Rand hinausragt, erzeugt einen
   weißen Streifen über die ganze Seite. Diese Regeln fangen das ab.
   ------------------------------------------------------------------------- */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
#page-container, #et-main-area, .et_pb_section, .et_pb_row{
  max-width:100%;
}
.et_pb_section{overflow-x:clip}

/* Bildbruch über die volle Breite */
.sg-imagebreak,
.sg-imagebreak .et_pb_row,
.sg-imagebreak .et_pb_column,
.sg-imagebreak .et_pb_module{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
.sg-imagebreak .et_pb_image,
.sg-imagebreak .et_pb_image .et_pb_image_wrap,
.sg-imagebreak .et_pb_image img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  border-radius:0 !important;
}
.sg-imagebreak .et_pb_image img{
  height:auto;
  max-height:720px;
  object-fit:cover;
}
@media (max-width:767px){
  .sg-imagebreak .et_pb_image img{max-height:420px}
}

/* -------------------------------------------------------------------------
   12. Fließende Überschriftengrößen
   Ersetzt die Stufenlogik. Die Schrift wächst stufenlos mit der Fenster-
   breite, dadurch entstehen keine Sprünge und keine Zwischengrößen, die
   aus dem Bild laufen. Die Endwerte entsprechen dem Designsystem:
   H1 34 bis 74 px, H2 30 bis 50 px, H3 25 bis 34 px.
   ------------------------------------------------------------------------- */
html body .et_pb_section .et_pb_row .et_pb_column .et_pb_module h1,
html body h1{
  font-size:clamp(34px, 5.6vw, 74px) !important;
  line-height:1.06 !important;
  overflow-wrap:break-word;
  hyphens:auto;
}
html body .et_pb_section .et_pb_row .et_pb_column .et_pb_module h2,
html body h2{
  font-size:clamp(30px, 3.9vw, 50px) !important;
  line-height:1.15 !important;
  overflow-wrap:break-word;
}
html body .et_pb_section .et_pb_row .et_pb_column .et_pb_module h3,
html body h3{
  font-size:clamp(25px, 2.6vw, 34px) !important;
  line-height:1.22 !important;
}

/* -------------------------------------------------------------------------
   13. Hervorhebungen im Merkmalssatz
   Unterstrichene Wörter bekommen eine feine Haarlinie in Honig statt der
   üblichen dicken Unterstreichung in Textfarbe. Klasse sg-merkmale am
   Textmodul setzen. Deckt beide Auszeichnungen ab, die der Editor erzeugt.
   ------------------------------------------------------------------------- */
.sg-merkmale u,
.sg-merkmale span[style*="underline"],
.sg-merkmale [style*="text-decoration: underline"]{
  text-decoration:underline !important;
  text-decoration-color:var(--sg-honey) !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:8px !important;
  text-decoration-skip-ink:auto;
}

/* -------------------------------------------------------------------------
   14. Ausgleich fuer Karla
   Karla hat eine etwas geringere x-Hoehe und laeuft schmaler als Poppins.
   Fliesstext und Lead laufen deshalb einen Punkt groesser, damit die
   Lesbarkeit gleich bleibt.
   ------------------------------------------------------------------------- */
html body .et_pb_module p,
html body .et_pb_text p{
  letter-spacing:.005em;
}