/* ==========================================================================
   charlott-josefin.com — statische Fassung
   ==========================================================================

   Ersetzt WordPress mit Divi, Essential Grid und Contact Form 7. Das Ziel ist
   ausdruecklich KEIN neues Aussehen: Die Seite soll aussehen wie bisher. Was
   sich aendert, ist allein der Unterbau — aus ~200 KB Geruest je Seite werden
   wenige Kilobyte, und es gibt nichts mehr zu aktualisieren oder zu kapern.

   Alle Kennwerte sind aus der laufenden Seite AUSGELESEN, nicht geschaetzt:
     Flaeche       rgb(220, 206, 202)   warmes Altrosa-Beige
     Text          rgb(102, 102, 102)   14 px
     Ueberschrift  GFS Didot, 300
     Menue         hero-new, 12 px
     Fliesstext    Open Sans
*/

/* Google-Schriften LOKAL (29.09.2026): GFS Didot und Open Sans liegen auf
   dem eigenen Server — beim Seitenaufruf geht keine Verbindung zu Google.
   Beide stehen unter der SIL Open Font License, Selbst-Hosten ist erlaubt.
   Open Sans ist eine variable Schrift: eine Datei fuer 300 bis 700. */
@font-face{font-family:"GFS Didot";font-style:normal;font-weight:400;font-display:swap;
  src:url("schriften/gfs-didot-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("schriften/open-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("schriften/open-sans-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --sand:      #dcceca;   /* rgb(220,206,202) — Grundflaeche */
  --weiss:     #ffffff;
  --text:      #666666;   /* rgb(102,102,102) */
  --tinte:     #000000;
  --linie:     rgba(0,0,0,.18);

  --didot:  "GFS Didot", "Didot", "Times New Roman", serif;
  --hero:   "hero-new", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:   "Open Sans", Arial, sans-serif;

  --breite: 1080px;       /* Inhaltsbreite wie in der Vorlage */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--weiss);color:var(--text);
  font-family:var(--sans);font-size:14px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------------- Kopf ---
   Gemessen am Original (29.09.2026, 1710 breit): 96 hoch, Inhalt 255..1455,
   Logo 190 x 25 bei y=35, Menue hero-new 12 px, Buchstaben bei y=41, 50 px
   zwischen den Punkten. Der Kopf laeuft mit (fixed) — ganz oben durchsichtig,
   beim Scrollen Milchglas: Weiss 40 %, 10 px Unschaerfe, 0,3 s. */
.band{height:26px;background:var(--sand)}
.kopf{position:fixed;top:0;left:0;right:0;z-index:60;height:96px;
  transition:background-color .3s ease-in-out}
.kopf.fest{background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.menue-auf .kopf{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.kopf__innen{max-width:1200px;height:100%;margin:0 auto;padding:0 24px;box-sizing:content-box;
  display:flex;align-items:center;justify-content:space-between}
.kopf__logo img{width:190px;height:auto;display:block;margin-top:-1px}
.menue{display:flex;align-items:center;gap:50px;list-style:none;margin:0 9px 0 0;padding:0}
.menue > li{position:relative}
.menue a{font-family:var(--hero);font-weight:400;font-size:12px;line-height:14px;color:var(--tinte);
  display:inline-block;padding:31px 0;white-space:nowrap}
.menue a:hover{opacity:.6}
.menue .hoch{font-size:8px;line-height:8px;vertical-align:7px;margin-left:-1px}
.menue .hat-unter > a{padding-right:20px;position:relative}
.menue .hat-unter > a::after{content:"";position:absolute;right:3px;top:50%;width:5px;height:5px;
  border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.unter{position:absolute;top:calc(100% - 1px);left:-30px;width:240px;background:#fff;list-style:none;
  margin:0;padding:20px 0 20px 30px;border-top:3px solid #fff;box-sizing:border-box;box-shadow:0 2px 5px rgba(0,0,0,.1);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
.menue > li:hover .unter,.menue > li:focus-within .unter{opacity:1;visibility:visible;transition:opacity .2s ease}
.unter a{display:block;padding:6px 20px;line-height:28px;font-size:12px}

/* Burger (erst auf schmalen Bildschirmen): drei Linien, die mittlere am
   laengsten — wird beim Oeffnen zum X. Werte aus dem Original-CSS. */
.burger{display:none;position:relative;width:30px;height:22px;background:none;border:0;padding:0;cursor:pointer}
.linie{position:absolute;left:0;height:2px;width:90%;background:#000;transition:.1s ease-in-out}
.linie-1{top:0}.linie-2{top:10px;width:100%}.linie-3{top:20px;width:70%}
.burger.auf .linie-1{top:10px;width:100%;transform:rotate(135deg)}
.burger.auf .linie-2{display:none}
.burger.auf .linie-3{top:10px;width:100%;transform:rotate(-135deg)}

/* Handy-Menue: Vollbild auf Sand, gleitet von links, 0,5 s. */
.handymenue{position:fixed;inset:0;z-index:55;background:var(--sand);padding:114px 25px 40px;
  overflow-y:auto;left:-100%;opacity:0;transition:all .5s ease;visibility:hidden}
.handymenue.auf{left:0;opacity:1;visibility:visible}
.handymenue nav a{display:block;font-family:var(--hero);text-transform:uppercase;letter-spacing:2px;
  color:var(--tinte);line-height:23.8px;margin-bottom:10px}
.handymenue a.hm-haupt{font-size:13px;font-weight:600}
.handymenue a.hm-unter{font-size:11px;font-weight:400;padding-left:25px}
.handymenue nav sup{font-size:8px;margin-left:4px;line-height:0;vertical-align:6px}
.handymenue__adresse{font-family:var(--hero);font-size:11px;font-weight:400;letter-spacing:2px;
  line-height:23.8px;color:var(--tinte);margin:68px 0 12px}
.handymenue__mail{font-family:var(--hero);font-size:11px;font-weight:700;letter-spacing:2px;color:var(--tinte)}
.handymenue__sozial{display:flex;align-items:center;gap:8px;margin:4px 0 0 -5px}
.handymenue__sozial a{display:flex;align-items:center;justify-content:center;width:36px;height:36px}
.handymenue__sozial a + a{width:32px;height:32px}


/* ---------------------------------------------------------------- Hero ---
   Vollflaechiges Hintergrundbild, rechts der gerahmte Kasten. Die Hoehe
   entspricht dem Fenster, wie in der Vorlage (dort 925 px bei 925 px
   Fensterhoehe). */
.hero{
  /* Volle Fensterhoehe. Gemessen: Hero 0,26 1710x981 bei 981 px Fensterhoehe —
     also genau 100vh, beginnend unter dem 26-px-Band. */
  position:relative;height:100vh;
  background:var(--sand) var(--bild) center/cover no-repeat;display:flex;align-items:center;
}
/* Der Textblock haengt NICHT im 1080er Raster, sondern am rechten Rand:
   gemessen 1060..1560 bei 1710 Fensterbreite, also 150 px Abstand rechts.
   Er sitzt im leeren Teil des Fotos — deshalb der feste Rand statt einer
   Spalte, die auf breiten Bildschirmen wegwandern wuerde. */
.hero__innen{width:100%;display:flex;padding-right:150px}
.hero__block{
  width:500px;margin-left:auto;text-align:center;
  /* Gemessen steht der Block 53 px UEBER der Mitte (364 statt 417).
     Der doppelte Wert als unterer Abstand verschiebt ihn genau so weit. */
  margin-bottom:106px;
}
/* Der Eck-Button — im Original `.btnTCC`, Werte aus dessen Stylesheet:
   350 x 100, Rahmen 1 px #333, hero-new in der Hairline-Staerke 100,
   50 px, Grossbuchstaben. Zwei Flaechen in der Grundfarbe verdecken die
   Mitte des Rahmens (300 x 100 die Waagerechten, 352 x 50 die
   Senkrechten), sodass nur die vier Ecken stehen bleiben. Beim Darueber-
   fahren ziehen sie sich in einer Sekunde zurueck und der Rahmen schliesst
   sich. */
.hero__rahmen{
  position:relative;z-index:0;display:flex;align-items:center;justify-content:center;
  width:350px;height:100px;margin:0 auto;border:1px solid #333;
  font-family:var(--hero);font-weight:100;font-size:50px;line-height:1;
  text-transform:uppercase;color:var(--tinte);transition:1s;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.hero__rahmen::before,.hero__rahmen::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--sand);z-index:-1;transition:1s;
}
.hero__rahmen::before{width:300px;height:100px}
.hero__rahmen::after{width:352px;height:50px}
.hero__rahmen:hover{background:var(--sand)}
.hero__rahmen:hover::before{width:0}
.hero__rahmen:hover::after{height:0}
/* Handy-Knopf: im Original ein Divi-Knopf, erst unter 768 px sichtbar */
.hero__mobil{display:none;font-family:var(--hero);font-weight:300;font-size:20px;
  color:var(--tinte);background:var(--sand);border:1px solid var(--text);padding:6px 20px}
/* Abstand gemessen: Rahmenunterkante 463, Text bei 538 → 75 px */
.hero__unter{font-family:var(--hero);font-weight:200;font-size:14px;color:var(--tinte);margin:75px 0 0}

/* ------------------------------------------------------------ Abschnitt ---*/
.abschnitt{max-width:var(--breite);margin:0 auto;padding:78px 24px}

/* ----------------------------------------------------------------- Fuss ---
   Gemessen (Desktop): weiss, 524 hoch, Raster 1080 = 3 x 320 + 2 x 60.
   Logo 220 x 29 zwischen zwei 320er Linien; Links hero-new 14/25.2, 300,
   Grossbuchstaben, mittig; Icons 30 px 2 x 2 (200 / 22 Abstand); dann ein
   senkrechter Strich 100 px, ©, Jahr. */
.fuss{background:var(--weiss);padding:54px 24px;text-align:center;font-family:var(--hero);color:var(--tinte)}
.fuss__oben,.fuss__mitte{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:320px 1fr 320px;align-items:center}
.fuss__oben{padding:27px 0 4px}
.fuss__strich{height:1px;background:var(--tinte)}
.fuss__logo{justify-self:center}
.fuss__logo img{width:220px;height:auto;display:block}
.fuss__mitte{padding-top:27px;align-items:start}
.fuss__links{margin:0;font-size:14px;line-height:25.2px;font-weight:300;text-transform:uppercase}
.fuss__links a,.fuss__handyzeile a{color:var(--tinte)}
.fuss__links a:hover,.fuss__handyzeile a:hover{opacity:.6}
.fuss__sozial{justify-self:center;display:grid;grid-template-columns:30px 30px;column-gap:200px;row-gap:22px}
.fuss__sozial img{width:30px;height:auto;display:block}
.fuss__schluss{margin-top:53px}
.fuss__senkrecht{display:block;width:1px;height:100px;background:var(--tinte);margin:0 auto 8px}
.fuss__schluss p{margin:0;font-size:14px;line-height:23.8px;font-weight:300}
.fuss__jahr{margin-top:30px!important}
.fuss__handyzeile{display:none;margin:0;font-size:14px;line-height:25.2px;font-weight:300;text-transform:uppercase}

/* Kopfbreite: 90 % der Fensterbreite, hoechstens 1200 (Original: Logo bei
   x=100 auf 1400, x=51 auf 1024). */
.kopf__innen{width:90%;padding:0}
@media (max-width:980px){
  /* Burger ab 980 abwaerts; Kopf 80 hoch, Logo 185 bei x=25, y=30 */
  .kopf{height:80px}
  .kopf.fest{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .kopf__innen{width:auto;padding:0 20px 0 25px;align-items:flex-start;padding-top:30px;box-sizing:border-box}
  .kopf__logo img{width:185px;margin-top:0}
  .kopf__nav{display:none}
  .burger{display:block;margin-top:0}
}
@media (max-width:767px){
  /* Handy-Fuss (Original): Logo 250 breit, Icons 2 x 2 (30 px Abstand),
     dann „ABOUT ME | PORTFOLIO | CONTACT", ©, „IMPRINT | PRIVACY POLICY" */
  .fuss{padding:80px 20px 57px}
  .fuss__oben{display:block;padding:0}
  .fuss__strich{display:none}
  .fuss__logo img{width:250px;margin:0 auto}
  .fuss__mitte{display:block;padding-top:30px}
  .fuss__mitte .fuss__links{display:none}
  .fuss__sozial{display:grid;justify-content:center;grid-template-columns:30px 30px;column-gap:30px;row-gap:38px}
  .fuss__handyzeile{display:block;margin-top:34px}
  .fuss__schluss{margin-top:30px}
  .fuss__senkrecht,.fuss__jahr{display:none}
  .fuss__schluss p{padding-bottom:14px;line-height:25.2px;text-transform:uppercase}
  .fuss__schluss + .fuss__handyzeile{margin-top:12px}
}

/* ---------------------------------------------------------------- Mobil ---*/
@media (max-width:980px){
}
@media (max-width:860px){
  .hero__innen{justify-content:center;padding-right:0;padding-left:0}
  .hero__block{margin:0 auto;width:100%;max-width:420px}
  .hero__unter{margin-top:44px}
}
@media (max-width:767px){
  /* wie im Original: Eck-Button und Unterzeile weg, schlichter Knopf her */
  .hero__rahmen,.hero__unter{display:none}
  .hero__mobil{display:inline-block}
  /* Gemessen bei 390 px: Der Kopf liegt hier UEBER dem Hero, nicht darauf
     (Hero beginnt 80 px unter der Oberkante), und der Hero ist nicht
     bildschirmhoch, sondern so hoch, dass das Foto ganz zu sehen ist. */
  .hero--oben,.hero--unten{height:auto;border-top:54px solid var(--sand);align-items:flex-start;
    background-image:var(--bild-mobil,var(--bild))}
  .hero--oben{min-height:455px;background-position:0 100%;padding-top:70px}
  .hero--unten{min-height:490px;background-position:50% 50%;padding-top:362px}
  .hero--unten .hero__mobil{border-color:var(--tinte)}
  .hero--oben .hero__block,.hero--unten .hero__block{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ======================================================================
   GALERIEN
   ======================================================================
   Ersetzt Essential Grid (Layout „cobbles"). Das Plugin baut sein Raster
   erst beim Scrollen per JavaScript auf und laedt ab Bild 21 per Ajax nach
   — wer die Seite nur abruft statt scrollt, sieht es leer. (Am 26.09.
   deshalb faelschlich als „kaputt" notiert; es funktioniert.)

   Hier braucht es kein Plugin: ein CSS-Raster, fertig. Nichts, was eine
   Lizenz hat und stillschweigend aufhoeren kann zu arbeiten. */

.galeriekopf{
  background:var(--sand);min-height:460px;
  display:flex;align-items:center;justify-content:center;
}
.galeriekopf h1{
  font-family:var(--didot);font-weight:400;font-size:38px;letter-spacing:.04em;
  color:var(--tinte);margin:0;text-transform:uppercase;
}

.galerie{padding:64px 24px 92px;background:var(--weiss)}

/* ---- Fashion, Beauty, Commercial, Swimwear ------------------------------
   Gemessen am laufenden Original (1710 breit): Die ganze Seite liegt auf der
   Grundflaeche, Titel GFS Didot 300, 35 px, Oberkante 277; das Raster
   beginnt 77 px tiefer (354), nach dem Raster 106 px bis zum Fuss. */
.galerieseite{background:var(--sand)}
.galerieseite .galeriekopf{min-height:0;display:block;text-align:center;padding:251px 24px 32px}
.galerieseite .galeriekopf h1{font-weight:300;font-size:35px;line-height:45px;letter-spacing:0}
.galerie--raster{background:var(--sand);padding:0 24px 106px}

/* Das Raster: 2 Spalten, 7 px Abstand, Grundzelle 4:3. Die Zeilenhoehe
   haengt an der Breite — dafuer ist die Huelle ein Container, und 100cqw
   ist ihre Breite. Hochformat 1x2, Querformat 2x2, Luecken fuellt „dense". */
.rasterhuelle{max-width:1170px;margin:0 auto;container-type:inline-size}
.raster{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;grid-auto-flow:row dense;
  grid-auto-rows:calc((100cqw - 7px) / 2 * .75);
}
.zelle{position:relative;margin:0;overflow:hidden;background:#d3c4c0;grid-row:span 2}
.zelle--quer{grid-column:span 2}
.zelle img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
/* Hover wie im Original: eine Spur dunkler (5 %) — dazu ein langsamer Zoom */
.zelle::after{content:"";position:absolute;inset:0;background:#000;opacity:0;
  transition:opacity .6s ease;pointer-events:none}
.zelle.da:hover::after{opacity:.05}
.zelle.da:hover img{transform:scale(1.035)}

/* Reveal: nur mit JavaScript (html.js). Die Kachel ist zunaechst von oben
   zugezogen und oeffnet sich nach oben hin wie ein Vorhang; das Bild kommt
   aus 108 % Groesse. Tempo am 29.09. auf Mathias' Wunsch gestrafft (war
   1,15 s / 1,8 s — zu langsam, wer zuegig scrollt, sah es nicht). --verzug staffelt, was gleichzeitig sichtbar wird. */
.js .raster .zelle{clip-path:inset(100% 0 0 0)}
.js .raster .zelle img{transform:scale(1.08)}
.js .raster .zelle.da{clip-path:inset(0 0 0 0);
  transition:clip-path .7s cubic-bezier(.77,0,.18,1) var(--verzug,0ms)}
.js .raster .zelle.da img{transform:scale(1);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1) var(--verzug,0ms)}
.js .raster .zelle.da:hover img{transform:scale(1.035);transition-delay:0ms;transition-duration:1.4s}

@media (max-width:760px){
  .galerie{padding:40px 16px 64px}
  .galeriekopf{min-height:320px}
  .galeriekopf h1{font-size:30px}
  .galerieseite .galeriekopf{padding:140px 16px 24px}
  .galerie--raster{padding:0 10px 64px}
}
@media (prefers-reduced-motion:reduce){
  .js .raster .zelle{clip-path:none}
  .js .raster .zelle img{transform:none}
}

/* ======================================================================
   INHALTSSEITEN — Portfolio, Ads, About me, Imprint, Privacy Policy
   ======================================================================
   Gemessen am Original bei 1710 Breite (29.09.2026). Alles haengt am
   1170er Raster ab x=270 — zwei Spalten sind je 553 breit mit 64 Abstand,
   drei Spalten je 367 mit 35 Abstand. */

/* Seitenueberschrift: GFS Didot 300, 35 px, 45 hoch (Divi gibt h1 10 px
   Unterabstand), 54 px bis zum Inhalt. Portfolio steht bei 207, Ads
   bei 277 — das Original setzt beide unterschiedlich hoch. */
.seite{max-width:1170px;margin:0 auto;padding:181px 24px 90px;box-sizing:content-box}
.seite--ads{padding-top:251px;padding-bottom:67px}
.seitentitel{font-family:var(--didot);font-weight:300;font-size:35px;line-height:35px;
  padding-bottom:10px;margin:0 0 54px;text-transform:uppercase;text-align:center;color:var(--tinte)}

/* Portfolio-Karten: Bild 553 x 454, Name 33 px darunter, 64 px bis zur
   naechsten Reihe. Hover: Schleier ueber die ganze Karte + „View Gallery". */
.pkarten{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.pkarte{position:relative;display:block;color:var(--tinte)}
.pkarte__bild{position:relative;display:block;aspect-ratio:553/454;overflow:hidden}
.pkarte__bild img{width:100%;height:100%;object-fit:cover}
.pkarte__name{display:block;margin-top:33px;font-family:var(--didot);font-weight:300;
  font-size:35px;line-height:35px;padding-bottom:10px;text-align:center}
.pkarte::after{content:"";position:absolute;inset:0;background:rgba(220,206,202,.3);
  opacity:0;transition:opacity .4s ease;pointer-events:none}
.pkarte__mehr{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-family:var(--hero);font-weight:300;font-size:24px;color:#fff;
  opacity:0;transition:opacity .4s ease;z-index:1}
.pkarte:hover::after,.pkarte:focus-visible::after,
.pkarte:hover .pkarte__mehr,.pkarte:focus-visible .pkarte__mehr{opacity:1}

/* Ads: drei Spalten, Name UNTER dem Video (Didot 23, 500, #333). */
.kampagnen{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 35px}
.film{position:relative;background:#000;overflow:hidden}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.film__vorschau{position:absolute;inset:0;border:0;padding:0;cursor:pointer;
  background:#cbbcb8 center/cover no-repeat;display:none}
.js .film__vorschau{display:block}   /* ohne JS: gleich das Video mit Steuerung */
/* Play-Dreieck wie im Original: weiss, 50 px, mittig */
.film__vorschau::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-35%,-50%);border-style:solid;border-width:14px 0 14px 23px;
  border-color:transparent transparent transparent #fff;transition:transform .3s ease}
.film__vorschau::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .3s ease}
.film__vorschau:hover::after{opacity:.15}
.film__vorschau:hover::before{transform:translate(-35%,-50%) scale(1.12)}
.film__vorschau:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
.film.laeuft .film__vorschau{display:none}
.kampagne h2{font-family:var(--didot);font-weight:500;font-size:23px;line-height:23px;
  color:#333;text-align:center;margin:18px 0 0;padding-bottom:10px}
.refliste{margin-top:64px}
.refliste + .refliste{margin-top:12px}
.refliste h1{font-family:var(--didot);font-weight:300;font-size:35px;line-height:63px;
  color:var(--tinte);margin:0;padding-bottom:10px}
.refliste p{font-family:var(--hero);font-weight:200;font-size:22px;line-height:1.8;
  color:var(--tinte);margin:0;padding-bottom:0;overflow:hidden}
.refliste a{color:inherit;text-decoration:none}
.refliste a:hover{text-decoration:underline}
.undmehr{float:right}

/* Zwei Spalten: About me (Bild | Text), Imprint und Privacy (Titel | Text).
   Inhalt beginnt bei 237. */
.zweispalt{max-width:1170px;margin:0 auto;padding:211px 24px 81px;box-sizing:content-box;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.zweispalt__links img{width:100%;height:auto;display:block}
.spaltentitel{font-family:var(--didot);font-weight:300;font-size:35px;line-height:63px;
  color:var(--tinte);margin:0;padding-bottom:10px}
.fliess{overflow-wrap:anywhere}   /* lange Web-Adressen in der Datenschutzerklaerung */
.recht .spaltentitel{margin-top:23px}
.fliess p,.fliess li{font-family:var(--hero);font-weight:300;font-size:14px;line-height:1.7;
  color:var(--tinte);margin:0;padding-bottom:14px}
.fliess .stark{font-weight:500}
.fliess h2{font-family:var(--didot);font-weight:500;font-size:26px;line-height:26px;
  color:#333;margin:0;padding:0 0 10px}
.fliess h3{font-family:var(--didot);font-weight:500;font-size:22px;line-height:22px;color:#333;margin:0;padding:0 0 10px}
.fliess strong{font-weight:700}
.fliess ul{margin:0 0 14px;padding-left:14px}
.fliess li{padding-bottom:0;line-height:26px}
.fliess a{text-decoration:underline}

@media (max-width:900px){
  .seite,.zweispalt{padding:130px 20px 60px}
  .pkarten,.zweispalt{grid-template-columns:minmax(0,1fr);gap:40px}
  .kampagnen{grid-template-columns:1fr 1fr;gap:40px 20px}
  .recht .spaltentitel{margin-top:0}
}
@media (max-width:560px){
  .kampagnen{grid-template-columns:1fr}
  .pkarte__name{font-size:30px}
  .refliste p{font-size:18px}
}

/* ======================================================================
   GROSSANSICHT
   ======================================================================
   Ersetzt die Lightbox von Essential Grid. Die 1400-px-Fassung wird erst
   beim Klick geladen — vorgeladen waeren es 9 MB fuer einen Fall, der
   meistens nicht eintritt. */
.gross{
  position:fixed;inset:0;z-index:200;background:rgba(22,19,13,.93);
  display:flex;align-items:center;justify-content:center;padding:44px 74px;
}
.gross[hidden]{display:none}
.gross__bild{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 18px 60px rgba(0,0,0,.5)}
.gross__zu{
  position:absolute;top:18px;right:22px;width:44px;height:44px;
  background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;
}
.gross__pfeil{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:72px;background:none;border:0;color:#fff;
  font-size:44px;line-height:1;cursor:pointer;opacity:.7;
}
.gross__pfeil:hover,.gross__zu:hover{opacity:1}
.gross__pfeil--links{left:10px}
.gross__pfeil--rechts{right:10px}
.gross__zu:focus-visible,.gross__pfeil:focus-visible,
.zelle:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:760px){
  .gross{padding:16px 8px}
  .gross__pfeil{width:40px;font-size:34px}
}

/* ======================================================================
   MODELCOACHING
   ======================================================================
   Gemessen bei 1710 x 981. Anders als die Model-Seiten schreibt diese Seite
   ihren Fliesstext in hero-new 200, schwarz — nicht Open Sans grau. Die
   Handschrift unter „Beginner" und „Advanced" ist Taylor Hand; sie lag bei
   WordPress unter /wp-content/fonts/ und liegt jetzt unter assets/schriften/. */
@font-face{
  font-family:"Taylor Hand";font-display:swap;font-weight:normal;font-style:normal;
  src:url("schriften/TaylorHand.woff2") format("woff2"),url("schriften/TaylorHand.woff") format("woff");
}
.choch p,.wie p,.kurse p,.kurs p,.kurs li{
  font-family:var(--hero);font-weight:200;font-size:14px;line-height:1.7;color:var(--tinte)}
.choch b,.wie b,.kurs b{font-weight:700}

/* Hero: Bild randlos, die Frau steht links im Bild. Der Text beginnt bei
   780 von 1710 (45,6 %) und ist 780 breit; Oberkante 294 unter dem Band —
   Divi rechnet das als 27,9 % Innenabstand oben. */
.choch{position:relative;min-height:100vh;background:var(--sand) center/cover no-repeat;
  padding:calc(27.9vh + 30px) 24px 50px 45.6%}
.choch__text{max-width:780px}
.choch h1{font-family:var(--didot);font-weight:500;font-size:35px;line-height:1;
  text-transform:uppercase;color:var(--tinte);margin:0 0 10px}
.choch__unter{font-family:var(--didot)!important;font-weight:500!important;
  font-size:20px!important;line-height:1.2!important;margin:0 0 34px}
.choch p{margin:0 0 24px}
.choch__wie{display:flex;align-items:flex-start;margin-top:20px}
.choch__wie a{font-family:var(--didot);font-weight:500;font-size:23px;line-height:1.7;
  text-transform:uppercase;color:var(--tinte);padding:7px 0;white-space:nowrap}
.choch__wie a:hover{opacity:.6}
/* Die gestrichelte Schleife: gemessen 942,675 — sie ueberlappt den Knopf
   um 53 px und sitzt 12 px tiefer. */
.choch__wie img{width:240px;height:198px;margin:12px 0 0 -30px}

/* Text mit Bild. Reihe 1240 breit: Text 717, Abstand 68, Bild 455. */
.wie{padding:62px 24px 31px}
.wie__innen{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:717fr 455fr;gap:68px;align-items:center}
.wie p{margin:0}
.wie__bild img{width:100%;max-width:455px}
.wie__nurmobil{display:none}

/* Der gerahmte Termin-Knopf: Linie oben und unten, 10 px Innenabstand.
   Neben dem Text 645 breit (36 px Rand je Seite), in den Kursen 420. */
.termin{border-top:1px solid #333;border-bottom:1px solid #333;padding:10px 0;
  margin:26px 36px 0;text-align:center}
.termin--schmal{max-width:420px;margin:62px auto 0}
.termin a{font-family:var(--didot);font-weight:500;font-size:24px;line-height:1;
  text-transform:uppercase;color:var(--tinte);display:inline-flex;align-items:center;gap:10px}
.termin a:hover{opacity:.6}
.termin .pfeil{width:17px;height:13px}
.termin p{margin:6px 0 0!important}

/* „Model-Onlinekurse by CJ": Verlauf von Weiss nach Sand in den ersten 15 %. */
.kurse{background:linear-gradient(#fff 0%,var(--sand) 15%,var(--sand) 100%);
  padding:81px 24px 60px;text-align:center}
.kurse h1{font-family:var(--didot);font-weight:300;font-size:35px;line-height:1;
  text-transform:uppercase;color:var(--tinte);margin:0}
.kurse hr{width:100px;border:0;border-top:1px solid var(--tinte);margin:33px auto 36px}
.kurse p{max-width:1170px;margin:0 auto}

/* Kurse: zwei Haelften, 883 hoch. Das Bild fuellt seine Haelfte randlos,
   der Text steht 650 breit mittig in der anderen. */
.kurs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:883px}
.kurs--weiss .kurs__text{background:var(--sand)}
.kurs--sand{background:var(--sand)}
.kurs__bild{background:var(--sand) center/cover no-repeat;min-height:420px}
.kurs__text{display:flex;justify-content:center;align-items:center;padding:40px 24px}
.kurs__innen{width:650px;max-width:100%}
.kurs h2{font-family:var(--didot);font-weight:300;font-size:50px;line-height:1;
  color:var(--tinte);margin:0}
.kurs__zusatz{font-family:"Taylor Hand",cursive;font-weight:300;font-size:3vw;line-height:1;
  color:var(--tinte);padding-left:50px;margin:-10px 0 -3px;pointer-events:none}
.kurs--sand .kurs__zusatz{font-size:4vw;margin-top:-14px}
.kurs p{margin:0 0 14px}
.kurs ul{margin:0 0 42px;padding-left:42px;list-style:square}
.kurs li{line-height:26px}
.kurs li::marker{font-size:10px}
.klapp details{border-top:1px solid var(--tinte)}
.klapp details:last-child{border-bottom:1px solid var(--tinte)}
.klapp summary{list-style:none;cursor:pointer;position:relative;padding:20px 40px 20px 20px;
  font-family:var(--didot);font-weight:500;font-size:16px;line-height:1;color:var(--tinte)}
.klapp summary::-webkit-details-marker{display:none}
/* Der doppelte Winkel rechts (im Original ein Zeichen aus ETmodules) */
.klapp summary::after{content:"»";position:absolute;right:22px;top:50%;
  font-family:var(--hero);font-size:16px;font-weight:600;transform:translateY(-55%) rotate(90deg)}
.klapp details[open] summary::after{transform:translateY(-45%) rotate(-90deg)}
.klapp details ul{margin:0 0 20px;padding-left:62px}

/* Kundenstimmen: alle Folien in derselben Rasterzelle — die Buehne ist so
   hoch wie die laengste Stimme, und nichts springt beim Wechsel. */
.stimmen{padding:81px 24px 40px;text-align:center}
.stimmen h1{font-family:var(--didot);font-weight:300;font-size:35px;line-height:1;
  text-transform:uppercase;color:var(--tinte);margin:0 0 50px}
.stimmen__buehne{display:grid;max-width:860px;margin:0 auto;align-items:center}
.stimme{grid-area:1/1;margin:0;opacity:0;visibility:hidden;
  transition:opacity .5s ease,visibility 0s .5s}
.stimme.aktiv{opacity:1;visibility:visible;transition:opacity .5s ease}
.stimme__sterne{font-size:20px;letter-spacing:2px;color:var(--tinte);margin-bottom:12px}
.stimme blockquote{margin:0}
.stimme p{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6;
  color:var(--tinte);margin:0 0 4px}
.stimme figcaption{font-family:var(--sans);font-weight:300;font-size:14px;
  color:var(--tinte);margin-top:18px}
.stimmen__punkte{display:flex;justify-content:center;gap:8px;margin:40px 0 0}
.stimmen__punkte button{width:7px;height:7px;border-radius:50%;border:0;padding:0;
  background:rgba(0,0,0,.3);cursor:pointer}
.stimmen__punkte button[aria-current]{background:rgba(0,0,0,.9)}
.stimmen__punkte button:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}

@media (max-width:980px){
  /* Mobil verdeckt das Foto den Text. Wie im Original: oben nur Bild und
     Titel, der Einleitungstext rutscht in den naechsten Abschnitt. */
  .choch{min-height:0;padding:0;background-position:22% center;display:flex;
    flex-direction:column;justify-content:flex-end;height:90vh}
  .choch__text{background:linear-gradient(transparent,rgba(220,206,202,.92) 30%);
    padding:60px 20px 24px;max-width:none}
  .choch__text > p:not(.choch__unter){display:none}
  .choch__wie{margin-top:8px}
  .choch__wie img{width:150px;height:auto;margin:6px 0 0 -30px}
  .wie__nurmobil{display:block;margin-bottom:0}
  .wie__innen{grid-template-columns:1fr;gap:34px}
  .wie__bild img{margin:0 auto}
  .wie{padding:40px 20px}
  .termin{margin:26px 0 0}
  .termin a{font-size:20px}
  .kurs{grid-template-columns:minmax(0,1fr);min-height:0}
  .kurs--sand .kurs__bild{order:-1}
  .kurs__bild{min-height:110vw}
  .kurs__text{padding:48px 20px}
  .kurs__zusatz,.kurs--sand .kurs__zusatz{font-size:8vw;white-space:nowrap;margin-top:-6px;padding-left:20px;letter-spacing:1px}
  .kurse{padding:60px 20px 48px}
  .kurse h1,.stimmen h1{font-size:28px;line-height:1.15}
}

/* ------------------------------------------------ Seitenflaeche ---
   Im Original ist der Seitenhintergrund Sand; wo bei mir Abschnitte ihr
   eigenes Weiss mitbringen (.galerie, Kontaktblock …), gilt auf diesen
   Seiten die Grundflaeche. Der Fuss bleibt weiss, wie im Original. */
body.sand{background:var(--sand)}
body.sand .galerie{background:transparent}

/* ------------------------------------------------ nackte Zielseiten ---*/
body.nackt{background:var(--sand)}
.kalender{background:#fff;padding:0 0 1px}
.kalender .calendly-inline-widget{max-width:1080px;margin:0 auto}

/* ======================================================================
   STARTSEITE, Mittelteil — gemessen 29.09.2026 (1710 breit)
   ======================================================================
   Raster 1080 ab x=315. Oben zwei Spalten je 510 (60 Abstand), 100 px
   Innenabstand oben: links „DATA" senkrecht (hero-new 100, 171 px, 5 %
   Schwarz) und die Masse rechtsbuendig (30/39, Zahl 200, Wort 400),
   unten buendig mit dem Cover 510 x 668. Darunter der Podcast: Cover
   277 x 283 rechtsbuendig in der linken Spalte, Text ab x=771. */
.start2{background:#fff;padding:0 24px 47px}
.start2__oben,.start2__unten{max-width:1080px;margin:0 auto}
.start2__oben{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;padding:100px 0 27px;align-items:end}
.start2__links{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:flex-end}
.start2__wort{position:absolute;right:39px;top:-90px;width:68px;height:510px;overflow:visible;
  pointer-events:none;user-select:none}
.start2__wort::before{content:"DATA";position:absolute;left:0;top:0;transform-origin:0 0;
  transform:translate(0,510px) rotate(-90deg);width:510px;text-align:right;
  font-family:var(--hero);font-weight:100;font-size:171px;line-height:68.4px;color:rgba(0,0,0,.05)}
.start2__wort{font-size:0}
.start2__daten{margin:0;text-align:right;font-family:var(--hero);font-weight:200;font-size:30px;
  line-height:39px;color:var(--tinte)}
.start2__daten span{font-weight:400}
.start2__bild img{width:100%;height:auto;display:block}
.start2__unten{display:grid;grid-template-columns:396px 1fr;column-gap:60px;padding-top:27px}
.start2__cover{display:flex;justify-content:flex-end;align-items:flex-start}
.start2__cover img{width:277px;height:auto;display:block}
.start2__text{padding-top:23px;font-family:var(--hero);font-size:14px;line-height:23.8px;font-weight:300;color:var(--tinte)}
.start2__text p{margin:0;padding-bottom:14px}
.start2__text h1{font-family:var(--didot);font-weight:300;font-size:35px;line-height:31.5px;margin:0;padding-bottom:10px;color:var(--tinte)}
.start2__text h2{font-family:var(--didot);font-weight:500;font-size:23px;line-height:23px;margin:0;padding-bottom:10px;color:#333}
.start2__rubrik{font-weight:500;text-transform:uppercase}
.start2__text .podcast__knoepfe{padding-top:11px}
/* Badges wie im Original-Einbettungscode */
.hoerknopf{display:inline-block;width:165px;height:40px;background-color:#000;border:1px solid #000;
  border-radius:5px;margin:0 5px 5px 0;text-indent:-9000px;overflow:hidden;
  background-image:url("bilder/listen-on-embed.svg");background-repeat:no-repeat;box-sizing:content-box}
@media (max-width:980px){
  .start2__oben,.start2__unten{grid-template-columns:1fr;row-gap:30px}
  .start2__wort{display:none}
  .start2__daten{text-align:center}
  .start2__cover{justify-content:center}
}

/* Contact (gemessen): Hero beginnt erst bei 96 (darueber Sand), der Block
   steht mittig bei x=1030 von 1710 — nicht am rechten Rand wie auf der
   Startseite. */
@media (min-width:768px){
  .hero--unten{border-top:70px solid var(--sand);box-sizing:content-box}
  .hero--unten .hero__innen{padding-right:calc(39.8% - 250px)}
}

/* ======================================================================
   HANDY-FEINSCHLIFF — aus dem automatischen Vergleich (pruefen.py, 390 px)
   ====================================================================== */
@media (max-width:767px){
  /* Seitentitel: Portfolio/Ads bei 141, 66 px bis zum Inhalt */
  .seite{padding:115px 10px 60px}
  .seitentitel{margin-bottom:66px}
  .pkarten{gap:47px}
  .pkarte__name{font-size:28px;line-height:28px;padding-bottom:7px;margin-top:25px}
  .kampagnen{grid-template-columns:1fr;gap:48px;padding:0 10px}
  .kampagne h2{margin-top:26px}
  /* Galerien: Titel bei 191, Raster 35 px tiefer als bisher */
  .galerieseite .galeriekopf{padding:165px 16px 35px}
  /* Imprint/Privacy: Titel 28 px bei 125; About: Titel UEBER dem Bild, bei 102 */
  .zweispalt{padding:99px 20px 60px;gap:40px}
  .spaltentitel{font-size:28px;line-height:25px}
  .zweispalt--ueber{padding-top:76px;gap:0}
  .zweispalt--ueber .zweispalt__rechts{display:contents}
  .zweispalt--ueber .spaltentitel{order:-1;margin-bottom:12px}
  .zweispalt--ueber .zweispalt__links{margin-bottom:31px}
  /* Startseite: DATA waagerecht, Masse rechtsbuendig, Podcast-Cover NACH dem Text */
  .start2{padding:20px 39px 30px}
  .start2__oben{padding-top:100px;row-gap:30px}
  .start2__links{display:block}
  .start2__wort{display:block;position:static;width:auto;height:auto;font-size:117px;line-height:46.8px;
    font-family:var(--hero);font-weight:100;color:rgba(0,0,0,.05);text-align:right;margin-bottom:30px}
  .start2__wort::before{display:none}
  .start2__daten{text-align:right}
  .start2__unten{padding-top:30px}
  .start2__cover{order:2;justify-content:center;margin-top:30px}
  .start2__cover img{width:100%}
  .start2__text{padding-top:23px}
  .start2__text h1{font-size:28px;line-height:25.2px}
  .start2__text .podcast__knoepfe{display:flex;flex-direction:column;align-items:center}
  /* Modelcoaching-Hero: eigenes Hochformat unten angeschlagen, Titel oben mittig */
  .choch{height:auto;min-height:100vh;border-top:54px solid var(--sand);padding:30px 49px 50px;
    background-image:var(--mobil)!important;background-size:contain;background-position:50% 100%;
    display:block;text-align:center}
  .choch__text{background:none;padding:0;max-width:none}
  .choch h1{text-align:center;margin-bottom:0;padding-bottom:10px}
  .choch__unter{text-align:center}
  .choch__wie,.choch__text > p:not(.choch__unter){display:none}
  .choch__runter{display:block}
}
.choch__runter{display:none;position:absolute;left:50%;bottom:50px;width:34px;height:34px;margin-left:-17px;
  border:1.5px solid var(--tinte);border-radius:50%}
.choch__runter::before{content:"";position:absolute;left:50%;top:44%;width:9px;height:9px;
  border-right:1.5px solid var(--tinte);border-bottom:1.5px solid var(--tinte);transform:translate(-50%,-50%) rotate(45deg)}

@media (max-width:767px){
  /* Portfolio: Divi setzt nach je zwei Karten 30 px extra */
  .pkarte:nth-child(3){margin-top:30px}
  /* Ads-Listen: auf dem Handy 20 px Rand, Ueberschrift 28, Liste bleibt 22 */
  .refliste{padding:0 10px}
  .refliste h1{font-size:28px;line-height:50.4px}
  .refliste p{font-size:22px;line-height:39.6px}
  /* Contact: Hero im Original 591 hoch */
  .hero--unten{min-height:591px}
  /* Startseite: im Original 147 px mehr Luft zwischen Hero und DATA */
  .start2{padding-top:167px}
  /* Modelcoaching: Textspalten mit 39 px Rand, Kursueberschrift 35 px */
  .wie{padding:40px 39px}
  .kurse{padding:60px 11px 48px}
  .kurse h1{font-size:35px;line-height:35px}
  .kurs__text{padding:48px 39px}
}
/* Badge-Ausschnitte aus derselben Vektordatei (Werte aus dem Original-Code) */
.hoerknopf--apple  {background-position:10px 7px}
.hoerknopf--spotify{background-position:10px -53px}
.hoerknopf:hover{opacity:.85}
.start2__text p:last-of-type{padding-bottom:0}

/* ---- dritter Abgleich (29.09.2026) ---- */
.kurs .kurs__nach{margin-bottom:0}
.fliess img[src*="dsg-seal"]{display:block;margin-left:auto}   /* Siegel rechtsbuendig wie im Original */
.recht--privacy-policy{padding-bottom:67px}
.seite--ads{padding-bottom:92px}
@media (max-width:767px){
  /* Hero-Hoehen inkl. 54-px-Sandrand (border-box): Start 549, Contact 591 */
  .hero--oben{min-height:603px}
  .hero--unten{min-height:645px}
  .start2{padding-top:73px}
  .start2__unten{padding-top:65px}
  .pkarte:nth-child(3){margin-top:38px}
  .seite{padding-bottom:95px}
  .recht{padding-bottom:78px}
  /* Handy-Fuss: unter © noch die Jahreszahl, dann Imprint | Privacy */
  .fuss__jahr{display:block!important;margin-top:0!important;padding-bottom:0!important}
  .fuss__schluss + .fuss__handyzeile{margin-top:0}
}
@media (max-width:767px){
  /* Essential Grid rundet die Zellhoehe auf ganze Pixel auf (Reihenabstand
     288 statt 287 bei 390 Breite) — sonst wandert jede Reihe 1 px */
  .raster{grid-auto-rows:round(up, calc((100cqw - 7px) / 2 * .75), 1px)}
  /* Modelcoaching-Hero: 100vh ab dem Sandrand (border-box) */
  .choch{min-height:calc(100vh + 54px)}
  .wie{padding-top:50px}
  /* Ads: nach je drei Videos setzt Divi eine neue Reihe mit Abstand */
  .kampagne:nth-child(4){margin-top:27px}
}
@media (max-width:767px){
  .start2{padding-top:19px}
  /* Textspalte 351 wie im Original (sonst einzelne Extra-Umbrueche) */
  .zweispalt{padding-left:20px;padding-right:19px}
}
/* Kursbloecke: senkrecht mittig wie im Original, feinjustiert auf die
   gemessene Lage (Beginner bei +75, Advanced bei +93 ab Abschnittsbeginn) */
@media (min-width:981px){
  .kurs--weiss .kurs__innen{margin-top:-14px}
  .kurs--sand .kurs__innen{margin-top:-24px}
}
@media (max-width:767px){
  /* Modelcoaching Handy (gemessen): Einleitungsabsaetze mit 14 px Abstand */
  .wie__nurmobil p{padding-bottom:14px}
  .wie__nurmobil{margin-bottom:14px}
  .kurs--sand .kurs__zusatz{font-size:39px;padding-left:50px}
  .klapp summary{padding-right:80px}
  .stimmen h1{font-size:35px;line-height:39px}
  .stimmen__buehne{padding:0 29px}
  .stimme p{font-size:14px}
}
/* ---- letzter Abgleich der Abstaende bis zum Fuss (29.09.2026) ---- */
.stimmen{padding-bottom:12px}
@media (max-width:767px){
  .start2__cover{margin-top:-5px}
  .zweispalt--ueber{padding-bottom:75px}
  .galerie--raster{padding-bottom:104px}
  .recht--privacy-policy{padding-bottom:68px}
  .stimmen{padding-bottom:17px}
  .pkarte:nth-child(3){margin-top:35px}
}
/* Feinabgleich Modelcoaching (Kontrolllauf 29.09.) */
.kurs--sand .kurs__zusatz{margin-bottom:16px}
.wie .termin{margin-top:36px}
.wie__bild{padding-top:0}
@media (max-width:767px){ .wie__innen{gap:0} .wie__bild{padding-top:0} }
@media (max-width:767px){
  /* Modelcoaching Handy — aus den gemessenen Deltas je Abschnitt */
  .wie__bild{margin-top:-7px}
  .kurse{padding-top:76px;padding-bottom:29px}
  .kurs__text{padding:53px 39px 34px}
  .kurs--sand .kurs__text{padding-bottom:76px}
  .kurs__zusatz{margin-bottom:6px}
  .kurs--sand .kurs__zusatz{margin-bottom:-4px}
  .termin--schmal{margin-top:44px}
}
.termin--schmal p{margin-top:0!important}
@media (max-width:767px){
  /* letzte Einzelwerte aus dem Schlusslauf */
  .kampagne:nth-child(5){margin-top:-8px}
  .kampagne:nth-child(6){margin-top:-3px}
  .hero--oben .hero__mobil{transform:translateX(-8px)}
  .hero--unten .hero__mobil{transform:translateX(-7px)}
  .kurs--sand .kurs__zusatz{margin-top:-20px}
  .kurs__bild{min-height:108.2vw}
}
@media (max-width:767px){
  .kurs__text{padding-top:60px;padding-bottom:40px}
  .kurs--sand .kurs__zusatz{margin-bottom:10px}
  .kampagnen{padding:0 9px 0 10px}
  .refliste{margin-top:74px}
}
@media (max-width:767px){
  .kampagne:nth-child(4){margin-top:21px}
  .refliste{margin-top:67px}
  .seite--ads{padding-bottom:85px}
}
@media (min-width:981px){
  .kurs--weiss .kurs__zusatz{margin-top:-17px;margin-bottom:4px}
}
@media (max-width:767px){
  .refliste + .refliste{margin-top:20px}
}

/* ======================================================================
   EINWILLIGUNG (Cookie-Banner) — assets/einwilligung.js
   ======================================================================
   Beide Hauptknoepfe gleich gestaltet („Alle akzeptieren" / „Nur
   notwendige") — kein Vorschubsen, wie es die Datenschutzbehoerden
   verlangen. Schrift: Open Sans (lokal), weil hero-new ja erst NACH der
   Zustimmung laden darf. */
.einw{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:300;
  width:min(640px,calc(100% - 32px));background:#fff;color:var(--tinte);
  box-shadow:0 10px 40px rgba(0,0,0,.18);padding:22px 24px 20px;font-family:var(--sans);
  font-size:13px;line-height:1.6;max-height:calc(100vh - 40px);overflow-y:auto}
.einw[hidden],.einw-frage[hidden],.einw-wieder[hidden]{display:none}
.einw__titel{font-family:var(--didot);font-size:22px;line-height:1.2;margin:0 0 10px}
.einw__text{margin:0 0 14px}
.einw__text a,.kalender__text a{text-decoration:underline}
.einw__wahl{border-top:1px solid rgba(0,0,0,.12);margin:0 0 14px;padding-top:10px}
.einw__zeile{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer}
.einw__zeile input{margin-top:4px;accent-color:#000;width:16px;height:16px;flex:none}
.einw__knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.einw__knopf{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:10px 18px;border:1px solid var(--tinte);background:var(--tinte);color:#fff;cursor:pointer;flex:1 1 auto}
.einw__knopf:hover{opacity:.85}
.einw__knopf--leise{background:#fff;color:var(--tinte);flex:0 1 auto}
.einw__knopf:focus-visible,.einw-wieder:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
/* Nachfrage fuer Calendly: zentriertes Fenster */
.einw-frage{position:fixed;inset:0;z-index:310;background:rgba(0,0,0,.35);display:flex;
  align-items:center;justify-content:center;padding:16px}
.einw-frage__kasten{background:#fff;max-width:520px;width:100%;padding:24px;font-family:var(--sans);
  font-size:13px;line-height:1.6;box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* Widerruf jederzeit: runder Knopf unten rechts (wie Cookiebot im Original) */
.einw-wieder{position:fixed;right:16px;bottom:16px;z-index:250;width:44px;height:44px;border-radius:50%;
  border:0;background:#fff;color:var(--tinte);box-shadow:0 3px 14px rgba(0,0,0,.18);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.einw-wieder:hover{transform:scale(1.06)}
/* Kennenlern-Seite: Platzhalter bis zur Einwilligung */
.kalender__platz{max-width:560px;margin:0 auto;padding:120px 24px;text-align:center;font-family:var(--sans);
  font-size:14px;line-height:1.7;color:var(--tinte)}
.kalender__platz .einw__knopf{flex:none;margin:6px 0 10px}
.kalender__titel{font-family:var(--didot);font-size:32px;margin:0 0 14px}
.kalender__platz--geladen{max-width:1080px;padding:0}
@media (max-width:560px){
  .einw{bottom:0;width:100%;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .einw__knopf{flex:1 1 100%}
}

/* ---- Sprachumschalter DE / EN (29.09.2026) ------------------------------
   Im Menue hinter „Contact", gleiche Schrift wie die Menuepunkte; die
   aktive Sprache ist unterstrichen. Jede Seite verweist direkt auf ihr
   Gegenstueck (/about-me/ <-> /en/about-me/). */
.sprachwahl{display:inline-flex;align-items:center;gap:5px;font-family:var(--hero);font-size:12px;color:var(--tinte)}
.menue .sprachwahl a{padding:31px 0}
.sprachwahl a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.sprachwahl a:not([aria-current]){opacity:.55}
.sprachwahl a:hover{opacity:1}
.sprachwahl--handy{margin:6px 0 0;font-size:13px;font-weight:600;letter-spacing:2px;gap:8px}
.sprachwahl--handy a{padding:4px 0}

/* ---- Aufklapper weich (assets/klapp.js) ---- */
.klapp__inhalt{overflow:hidden;transition:height .4s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.klapp summary::after{transition:transform .4s cubic-bezier(.4,0,.2,1)}
.js .klapp details.klapp--auf summary::after{transform:translateY(-45%) rotate(-90deg)}
.js .klapp details:not(.klapp--auf) summary::after{transform:translateY(-55%) rotate(90deg)}
.klapp summary:hover{opacity:.7}

/* ======================================================================
   404 — eigene Fehlerseite (gab es im Original nicht)
   ====================================================================== */
.fehler{min-height:calc(100vh - 26px);display:flex;align-items:center;justify-content:center;
  padding:150px 24px 100px;text-align:center}
.fehler__innen{max-width:820px}
.fehler__zahl{font-family:var(--didot);font-weight:400;font-size:clamp(110px,18vw,220px);line-height:.9;
  color:rgba(0,0,0,.07);margin:0 0 -34px;letter-spacing:.04em;user-select:none}
.fehler__titel{margin-bottom:22px}
.fehler__text{font-family:var(--hero);font-weight:300;font-size:15px;line-height:1.7;color:var(--tinte);
  margin:0 auto 44px;max-width:460px}
.fehler__knopf{margin:0 auto}
.fehler__links{margin:44px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;
  font-family:var(--hero);font-weight:300;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.fehler__links a{color:var(--tinte);border-bottom:1px solid rgba(0,0,0,.25);padding-bottom:2px}
.fehler__links a:hover{border-color:var(--tinte)}
.fehler__links span{opacity:.4}
@media (max-width:767px){
  .fehler{padding:120px 20px 70px}
  .fehler__zahl{margin-bottom:-18px}
  /* Der Eck-Button ist auf dem Handy sonst ausgeblendet (Hero-Regel) */
  .fehler .hero__rahmen{display:flex;width:260px;height:80px;font-size:38px}
  .fehler .hero__rahmen::before{width:220px;height:80px}
  .fehler .hero__rahmen::after{width:262px;height:40px}
}