/* Sprachstudio Bonjour — Shared Stylesheet */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --y:   #EFF000;
  --ylt: #F5FA30;
  --ybg: #F8FAD6;
  --c0:  #FAF8F2;
  --c1:  #F2F0E8;
  --c2:  #EAE7DC;
  --d:   #1E1A14;
  --t:   #3B3528;
  --m:   #6A6255;
  --mu:  #99907F;
  --b:   rgba(60,50,35,.08);
  --max: 1060px;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--c1);color:var(--t);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}

/* ─── NAV ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:80px;padding:0 52px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--c1);border-bottom:1px solid var(--b);
  transition:box-shadow .35s;
}
.nav.up{box-shadow:0 3px 28px rgba(0,0,0,.07)}
.nav-logo{text-decoration:none;display:flex;align-items:center}
.nav-logo img{height:58px;width:auto}
.nav-tagline{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Caveat',cursive;font-size:22px;
  color:var(--m);letter-spacing:.01em;white-space:nowrap;
}
.nav-links{list-style:none;display:flex;gap:28px;align-items:center}
.nav-links>li{position:relative}
.nav-links a{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--d);text-decoration:none;transition:color .2s;display:block;padding:4px 0;
}
.nav-cta{
  background:var(--y)!important;color:var(--d)!important;
  padding:9px 20px!important;border-radius:2px;letter-spacing:.09em!important;
}
.nav-cta:hover{background:var(--ylt)!important;color:var(--d)!important}

/* dropdown */
.has-dd{cursor:default}
.has-dd>a::after{content:' ▾';font-size:.65em;opacity:.6}
.dd{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  background:var(--c0);border:1px solid var(--b);min-width:220px;
  box-shadow:0 12px 40px rgba(0,0,0,.1);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s,visibility .22s;
}
.has-dd:hover .dd{opacity:1;visibility:visible;pointer-events:all}
.dd a{
  display:block;padding:11px 20px;
  border-bottom:1px solid var(--b);font-size:10px!important;
}
.dd li:last-child a{border-bottom:none}
.dd a:hover{background:var(--c1)}

/* ─── HELPERS ─── */
.w{max-width:var(--max);margin:0 auto}
.sec{padding:88px 52px}

h2.t{font-family:'Playfair Display',serif;font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:600;color:var(--d);line-height:1.2;margin-bottom:22px}
h2.t em{font-style:italic}
h3.st{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:600;color:var(--d);margin-bottom:10px}
p.body{font-size:1.15rem;color:var(--t);margin-bottom:18px;line-height:1.7}
p.body:last-child{margin-bottom:0}
.rule-y{width:44px;height:1.5px;background:var(--mu)}
.rule-c{width:44px;height:1.5px;background:var(--mu);margin:0 auto 18px}

/* ─── HERO (homepage) ─── */
.hero-full{
  position:relative;width:100%;height:100vh;min-height:640px;
  background:#C2BAB0;display:flex;align-items:flex-end;
}
.hero-full::after{content:'';position:absolute;inset:0;background:linear-gradient(165deg,rgba(30,26,20,0) 35%,rgba(30,26,20,.6) 100%)}
.hero-body{position:relative;z-index:2;padding:0 80px 80px;max-width:700px}
.hero-script{font-family:'Caveat',cursive;font-size:26px;color:var(--y);display:block;margin-bottom:10px}
.hero-full h1{font-family:'Playfair Display',serif;font-size:clamp(3rem,6vw,5.2rem);font-weight:700;color:#FAF8F2;line-height:1.08;margin-bottom:22px}
.hero-sub{font-size:1.12rem;color:rgba(250,248,242,.76);max-width:420px;line-height:1.7}

/* hero floating note */
.hero-note{
  position:absolute;right:80px;top:50%;
  transform:translateY(-50%) rotate(-1.6deg);
  z-index:5;background:var(--c0);
  padding:38px 42px;width:320px;
  box-shadow:0 28px 72px rgba(0,0,0,.22);
}
.hero-note p{font-family:'Caveat',cursive;font-size:2.2rem;color:var(--d);line-height:1.4}
.hero-note cite{display:block;font-family:'Inter',sans-serif;font-style:normal;font-size:.84rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);margin-top:14px}
.float-bar{width:38px;height:2.5px;background:var(--mu);margin-bottom:18px}

/* ─── PAGE HERO (inner pages) ─── */
.page-hero{
  position:relative;width:100%;height:36vh;min-height:240px;
  background-color:#C8C0B8;background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;align-items:flex-end;padding-top:80px;/* offset nav */
;display:flex;align-items:center}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(30,26,20,.1) 0%,rgba(30,26,20,.55) 100%)}
.page-hero-body{position:relative;z-index:2;padding:0 80px;max-width:800px}
.page-hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:700;color:#FAF8F2;line-height:1.12;margin-bottom:16px}


/* ─── 16:9 MEDIA ─── */
.img16{position:relative;width:100%;overflow:visible}
.img16-bg{width:100%;aspect-ratio:16/9;max-height:460px;display:block;background:center/cover no-repeat}
.img21-bg{width:100%;aspect-ratio:21/9;display:block;background:center/cover no-repeat}
.img16::before{content:'';position:absolute;inset:0;background:rgba(30,26,20,.14);z-index:1;pointer-events:none}

/* floating cards */
.fc{position:absolute;z-index:10;background:#F7F6A9;background:color-mix(in srgb, var(--y) 30%, var(--c0));box-shadow:0 32px 80px rgba(0,0,0,.17)}
.fc-rb{right:72px;bottom:-70px;width:348px;padding:42px 46px;transform:rotate(.7deg)}
.fc-lc{left:72px;top:50%;transform:translateY(-50%) rotate(-1.3deg);width:338px;padding:40px 44px}
.fc .hs{font-family:'Caveat',cursive;font-size:2.9rem;color:var(--d);display:block;margin-bottom:10px}
.fc p{overflow-wrap:break-word;hyphens:auto;font-size:1.15rem;color:var(--m);line-height:1.7;margin-bottom:18px}
.fc .clink{font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--d);text-decoration:none;border-bottom:1.5px solid var(--y);padding-bottom:2px;transition:color .2s}
.fc .clink:hover{color:var(--y)}
.fc .attr{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);margin-top:10px}

/* ─── COURSE CONTENT ─── */
.course-grid{display:grid;grid-template-columns:3fr 2fr;gap:72px;align-items:start}
.course-list{list-style:none;margin-top:8px}
.course-list li{padding:14px 0;border-bottom:1px solid var(--b);font-size:1.15rem;color:var(--t);display:flex;align-items:flex-start;gap:12px;line-height:1.7}
.course-list li::before{content:'';width:6px;height:6px;background:var(--mu);border-radius:50%;flex-shrink:0;margin-top:7px}
.course-list li:last-child{border-bottom:none}
.info-card{background:var(--c0);padding:36px 32px;border:1px solid var(--b)}
.info-card h3{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:600;color:var(--d);margin-bottom:18px}
.info-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;font-size:.9rem;color:var(--t)}
.info-row:last-child{margin-bottom:0}
.info-dot{width:6px;height:6px;background:var(--mu);border-radius:50%;flex-shrink:0;margin-top:6px}
.btn{display:inline-block;background:var(--y);border:none;cursor:pointer;font-family:inherit;color:var(--d);font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:14px 28px;transition:background .2s,transform .15s}
.btn:hover{background:var(--d);color:var(--c0);transform:translateY(-2px)}
.btn-outline{display:inline-block;border:1.5px solid var(--mu);color:var(--d);font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:12px 26px;transition:all .2s;margin-left:12px}
.btn-outline:hover{background:var(--d);border-color:var(--d);color:var(--c0)}

/* ─── PREIS BOXES (inner) ─── */
.preis-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:36px 0}
.preis-box{background:var(--c0);border:1px solid var(--b);padding:32px 28px;text-align:center}
.preis-box.hi{border-top:2.5px solid var(--y)}
.preis-box .pn{font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;color:var(--d);margin-bottom:16px}
.preis-box .pa{font-size:2.4rem;font-weight:700;color:var(--d);line-height:1}
.preis-box .pa sup{font-size:.9rem;font-weight:400;color:var(--mu);vertical-align:super}
.preis-box .pu{font-size:.76rem;color:var(--mu);margin-top:4px}

/* ─── CONTACT FORM ─── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-full{grid-column:1/-1}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.form-group input,
.form-group select,
.form-group textarea{
  background:var(--c0);border:1px solid var(--b);
  padding:12px 16px;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--d);
  outline:none;transition:border-color .2s;
  appearance:none;border-radius:0;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--y)}
.form-group textarea{resize:vertical;min-height:130px}
.form-group select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2399907F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.form-submit{margin-top:8px}
.form-note{font-size:.8rem;color:var(--mu);margin-top:10px;line-height:1.5}
.form-success{display:none;background:var(--ybg);border-left:3px solid var(--y);padding:24px 28px;margin-top:24px}
.form-success p{font-family:'Caveat',cursive;color:var(--d)}

/* ─── CONTACT DETAILS ─── */
.kontakt-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}
.krows{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.krow{display:flex;align-items:flex-start;gap:14px}
.kdot{width:7px;height:7px;background:var(--mu);border-radius:50%;flex-shrink:0;margin-top:8px}
.ktx strong{display:block;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);margin-bottom:2px}
.ktx a,.ktx span{font-size:.94rem;color:var(--d);text-decoration:none}
.ktx a:hover{color:var(--y)}
.mapbox{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--b)}
.mapbox iframe{width:100%;height:100%;border:0;display:block}

/* ─── PORTRAIT PAGE ─── */
.portrait-bio{max-width:720px}
.portrait-sig{font-family:'Caveat',cursive;font-style:normal;font-weight:600;color:var(--d);margin-top:30px}

/* ─── HOME INTRO ─── */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.text-accent{font-family:'Caveat',cursive;color:var(--d);border-top:1px solid var(--b);padding-top:22px;margin-top:26px;line-height:1.5}

/* ─── HOME KURSE ─── */
.kgrid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--b)}
.ki{padding:40px 34px;border-right:1px solid var(--b);border-bottom:1px solid var(--b);transition:background .25s}
.ki:nth-child(3n){border-right:none}
.ki:nth-child(n+4){border-bottom:none}
.ki:hover{background:var(--c1)}
.ki-n{font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:700;color:rgba(239,240,0,.3);line-height:1;margin-bottom:12px;display:block}
.ki h3{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:600;color:var(--d);margin-bottom:9px}
.ki p{font-size:1.02rem;color:var(--m);line-height:1.65}
.ki a{display:inline-block;margin-top:12px;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--d);text-decoration:none;border-bottom:1px solid var(--y);padding-bottom:1px}

/* ─── PREISE (full page) ─── */
.preise-table{width:100%;border-collapse:collapse;margin:32px 0}
.preise-table th{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);text-align:left;padding:0 20px 12px;border-bottom:2px solid var(--b)}
.preise-table td{padding:18px 20px;border-bottom:1px solid var(--b);font-size:1.04rem;color:var(--t)}
.preise-table tr:last-child td{border-bottom:none}
.preise-table td:last-child{font-weight:600;color:var(--d)}
.preise-table tr:hover td{background:var(--c0)}

/* ─── TESTIMONIAL ─── */




/* ─── CTA STRIP ─── */

.cta-strip h2{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:600;color:var(--d);margin-bottom:10px}
.cta-strip p{color:var(--m);margin-bottom:28px;max-width:480px;margin-left:auto;margin-right:auto}

/* ─── FOOTER ─── */
footer{background:var(--d);color:rgba(250,248,242,.42);padding:44px 52px;text-align:center;font-size:.79rem;line-height:2}
footer strong{color:rgba(250,248,242,.8)}
footer a{color:rgba(250,248,242,.58);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--y)}

/* ─── REVEAL ─── */
.r{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.r.on{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ─── RESPONSIVE ─── */
@media(max-width:980px){
  .intro-grid,.kontakt-layout,.course-grid{grid-template-columns:1fr}
  .kgrid{grid-template-columns:1fr 1fr}
  .ki:nth-child(3n){border-right:1px solid var(--b)}
  .ki:nth-child(2n){border-right:none}
  .ki:nth-child(n+4){border-bottom:1px solid var(--b)}
  .ki:last-child{border-bottom:none}
  .fc-rb{right:32px;width:280px;bottom:-52px}
  .fc-lc{left:32px;width:260px}
  .hero-note{right:32px;width:260px;padding:28px 32px}
  .nav-tagline{display:none}
  .form-grid{grid-template-columns:1fr}
  .page-hero-body{padding:0 32px 48px}
}
@media(max-width:720px){
  .kgrid{grid-template-columns:1fr}
  .ki:nth-child(n){border-right:none;border-bottom:1px solid var(--b)}
  .ki:last-child{border-bottom:none}
  .hero-note,.fc-rb,.fc-lc{display:none}
  .sec{padding:64px 22px}
  .hero-body,.hero-body{padding:0 24px 52px}
  .page-hero-body{padding:0 22px 40px}
  .preis-row{grid-template-columns:1fr}
  .hero-full h1{font-size:2.6rem}
  .testi-sec,
}
@media(max-width:480px){
  .nav{padding:0 18px}
  .nav-links{padding:10px 18px 32px!important}
  .page-hero h1{font-size:2rem}
  .fc-rb,.fc-lc{padding:28px 26px;width:calc(100% - 36px)!important;right:18px!important;left:18px!important}
  .preise-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .preise-table th,.preise-table td{padding:12px 10px;font-size:.86rem;white-space:nowrap}
}

/* ─── MOBILE NAV (hamburger) ─── */
/* Basis nur: Sichtbarkeit + Strichfarbe. Der X-Transform und alles Breakpoint-
   Spezifische lebt einzig im Vollflaechen-Overlay-Block weiter unten —
   frueher gab's hier eine zweite, konkurrierende Regel-Kaskade (aria-expanded-
   basiert), die mit der neuen (.is-open-basiert) um denselben Button stritt. */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:0;cursor:pointer;padding:0;z-index:210}
.nav-burger span{display:block;width:100%;height:2px;background:var(--d);transition:transform .25s,opacity .25s}

/* ─── SPRACHUMSCHALTER / SÉLECTEUR DE LANGUE ─── */
/* <li> bleibt im normalen Inline-Fluss (kein flex, keine eigene line-height),
   damit DE/FR exakt auf der Grundlinie der übrigen Nav-Links sitzen. */
/* Box-Modell exakt wie die Geschwister-Links in style.css
   (.nav-links a = display:block, padding:4px 0, line-height 18.375px),
   damit DE/EN auf derselben Grundlinie sitzen. */
.nav-lang{display:flex;align-items:center;font-size:10.5px;line-height:1.75;margin-left:10px;margin-right:4px;padding:4px 0 4px 24px;white-space:nowrap}
.nav-lang::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:15px;background:rgba(60,50,35,.18)}
.nav-lang .cur,.nav-lang a,.nav-lang .sep{
  display:inline;padding:0;border:0;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.nav-lang .cur{color:var(--d)}
.nav-lang a{color:var(--mu)}
.nav-lang a:hover{color:var(--y)}
.nav-lang .sep{color:var(--mu);font-weight:400;margin:0 5px;letter-spacing:0}
/* Mobile Darstellung von .nav-lang lebt im Vollflaechen-Overlay-Block weiter unten. */

/* Quellenangaben sauber umbrechen */
.testi-cite,.hero-float cite,.fc .attr{text-wrap:balance}








@media(max-width:900px){
  
  
}
@media(max-width:560px){
  
  
  
}
/* aktiver Menupunkt: Gelb auf Creme braucht Definition — weich, nicht grell */
/* KONTAKT-Button (Desktop-Grundform + Mobile-Overlay-Form) lebt einzig in den
   Bloecken bei Zeile ~396 und im Vollflaechen-Overlay weiter unten —
   frueher gab's hier eine dritte, konkurrierende Kopie derselben Regel. */


.cta-strip{background:var(--c0);padding:76px 52px;text-align:center}
@media(max-width:560px){.cta-strip{padding:64px 22px}}

/* ─── Zitat-Sektion: lange Fassung, lesbar gesetzt ─── */
.testi-sec{background:var(--c2);padding:88px 52px 78px;text-align:center}
.testi-q{font-family:'Inter',sans-serif;font-weight:400;font-size:1.15rem;line-height:1.7;color:var(--t);max-width:62ch;margin:16px auto 0;text-align:center}
/* Name in Schreibschrift — Kontrast zum Serifen-Zitat */
.testi-cite{display:block;margin:24px auto 0;max-width:62ch;text-align:center;font-family:'Caveat',cursive;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--m)}
/* Blaettern */




@media(max-width:560px){
  .testi-sec{padding:60px 22px 56px}
  .testi-q{font-size:1rem;line-height:1.75}
  
}









/* ═══ TYPO-STANDARD (eine Quelle, nicht verstreute Einzelwerte) ═══════════
   Caveat hat eine kleine x-Hoehe und muss darum groesser gesetzt werden als
   Inter bei gleicher Punktangabe — daher eigene Stufen fuer die Handschrift. */
:root{
  --fs-body:1.15rem;   --lh-body:1.7;    /* Fliesstext ueberall */
  --fs-lead:1.28rem;                     /* Lead unter einer Ueberschrift */
  --fs-small:.95rem;                     /* Hilfs-/Metatext */
  --fs-micro:.78rem;                     /* Labels, Versalien */
  --fs-kicker:2.15rem;                   /* Caveat: Kicker ueber Ueberschrift */
  --fs-sig:1.85rem;                      /* Caveat: Name / Signatur */
  --fs-accent:2.3rem;                    /* Caveat: hervorgehobene Aussage */
}
.eyebrow{font-family:'Caveat',cursive;font-size:var(--fs-kicker);color:var(--mu);
  display:block;margin-bottom:8px;line-height:1.2}
/* auf dunklem Bild: Markenfarbe statt gedaempftem Grau */
.page-hero .eyebrow,.page-hero-body .eyebrow{color:var(--y)}
.page-hero-sub{font-size:var(--fs-lead);color:rgba(250,248,242,.86);max-width:520px;line-height:1.62}
.text-accent{font-size:var(--fs-accent);line-height:1.32}
.portrait-sig{font-size:var(--fs-sig)}
.testi-cite{font-size:var(--fs-sig)}
.form-success p{font-size:var(--fs-accent)}
.intro-grid p,p.body,.portrait-bio p,.faq-item p,.course-list li,.fc p,.testi-q{
  font-size:var(--fs-body);line-height:var(--lh-body)}

.back-link{position:absolute;top:104px;left:80px;z-index:6;display:inline-flex;align-items:center;
  gap:9px;font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,248,242,.78);text-decoration:none;transition:color .22s,transform .22s}
.back-link:hover{color:var(--y);transform:translateX(-3px)}
.back-link svg{flex:none}
@media(max-width:900px){.page-hero-body{padding:0 32px}.back-link{top:92px;left:32px}}
@media(max-width:560px){.page-hero-body{padding:0 22px}.back-link{top:84px;left:22px}}

/* ═══ NAVIGATION ═══════════════════════════════════════════════════════════
   Header weiss. Marken-Gelb bleibt voll intensiv (#EFF000), wird aber als
   Markierung eingesetzt, nicht als Schriftfarbe — gelbe Schrift auf hellem
   Grund erreicht nur 1.2:1 Kontrast und ist unlesbar. Als Unterstreichung
   unter dunklem Text bleibt das Gelb kraeftig UND der Text lesbar (17:1). */

.nav-links>li{display:flex;align-items:center}     /* Buttons exakt mittig */


.nav-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:34px;padding:1px 22px 0!important;line-height:1!important;text-align:center}

/* Slider-Navigation: zurueckhaltend, ohne Rahmen — die Pfeile allein genuegen */
.testi-nav{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:34px}
.testi-nav button{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--mu);cursor:pointer;padding:0;opacity:.7;
  transition:color .25s,opacity .25s,transform .25s}
.testi-nav button:hover{background:none;color:var(--d);opacity:1}
.tn-prev:hover{transform:translateX(-2px)}
.tn-next:hover{transform:translateX(2px)}
.tn-dots{display:inline-flex;align-items:center;gap:8px}
.tn-dot{width:6px!important;height:6px!important;border-radius:50%!important;padding:0;
  border:none!important;background:rgba(60,50,35,.2)!important;cursor:pointer;opacity:1!important;
  transition:background .3s,transform .3s}
.tn-dot.is-on{background:var(--d)!important;transform:scale(1.25)}
.tn-dot:hover{background:var(--mu)!important;transform:none}

/* Navigation: Spruch laeuft im Fluss mit, statt absolut mittig zu kleben —
   sonst kollidiert er, sobald das Menue breiter wird (z.B. neuer Punkt). */
.nav{background:#FFFFFF;gap:24px}
.nav-tagline{position:static;transform:none;flex:1 1 auto;min-width:0;text-align:center;
  padding:0 18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-logo{flex:0 0 auto}
.nav-links{flex:0 0 auto}
@media(max-width:1180px){.nav-tagline{display:none}}

/* Menue: kein Button-Hover. Aktiv und Hover werden beide ueber die Linie
   gezeigt — Hover dezenter, Aktiv voll. Linie naeher am Text. */
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:var(--y);border-radius:1px;opacity:0;transform:scaleX(.4);transform-origin:center;
  transition:opacity .22s ease,transform .28s ease}
.nav-links a:hover{color:var(--d);background:none!important}
.nav-links a:hover::after{opacity:.55;transform:scaleX(1)}
.nav-links a.active{color:var(--d);text-shadow:none}
.nav-links a.active::after{opacity:1;transform:scaleX(1);height:2px;bottom:-4px}
/* Der KONTAKT-Button bleibt ein Button und bekommt keine Linie */
.nav-cta::after{display:none!important}
.nav-lang a::after{display:none!important}

/* ─── Post-it im Seiten-Hero (alle Unterseiten) ─── */
.hero-float{position:absolute;right:80px;top:50%;
  transform:translateY(-50%) rotate(-1.6deg);z-index:5;
  background:#F7F6A9;background:color-mix(in srgb, var(--y) 30%, var(--c0));
  padding:38px 42px;width:330px;box-shadow:0 28px 72px rgba(0,0,0,.22)}
.hero-float .float-bar{width:38px;height:2.5px;background:var(--mu);margin-bottom:18px}
.hero-float p{font-family:'Caveat',cursive;font-size:2.1rem;text-wrap:balance;hyphens:auto;overflow-wrap:break-word;
  color:var(--d);line-height:1.25;margin:0}
.hero-float cite{display:block;font-family:'Inter',sans-serif;font-style:normal;
  font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mu);margin-top:14px}
@media(max-width:1200px){.hero-float{right:36px;width:270px;padding:30px 32px}
  .hero-float p{font-size:1.75rem}}
@media(max-width:900px){.hero-float{display:none}}

/* ═══ MOBILE NAVIGATION — Vollflaechen-Overlay ════════════════════════════
   Burger verwandelt sich in ein X. Das Menue legt sich als ganze Flaeche
   ueber die Seite, Punkte fahren gestaffelt ein. Keine gequetschte Liste. */
@media(max-width:1024px){
  .nav{position:fixed;top:0;left:0;right:0;height:72px;padding:0 22px;z-index:1000}
  .nav-tagline{display:none}
  .nav-burger{display:flex!important;position:relative;z-index:1002;
    width:42px;height:42px;border:none;background:none;padding:0;cursor:pointer;
    flex-direction:column;justify-content:center;align-items:center;gap:6px}
  .nav-burger span{display:block;width:24px;height:2px;background:var(--d);border-radius:2px;
    transition:transform .34s cubic-bezier(.65,.05,.36,1),opacity .2s ease,width .34s ease}
  .nav-burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-burger.is-open span:nth-child(2){opacity:0;width:0}
  .nav-burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* Vollflaeche */
  .nav-links{position:fixed!important;inset:0;z-index:1001;
    display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:0!important;padding:0 32px!important;margin:0;
    background:var(--c0);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:none!important;
    overflow-y:auto;
    transition:opacity .38s ease,visibility .38s ease}
  .nav-links.is-open{opacity:1;visibility:visible;pointer-events:all}

  .nav-links>li{width:100%;display:block;border-bottom:1px solid rgba(60,50,35,.09);
    opacity:0;transform:translateY(14px);
    transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
  .nav-links.is-open>li{opacity:1;transform:none}
  .nav-links.is-open>li:nth-child(1){transition-delay:.08s}
  .nav-links.is-open>li:nth-child(2){transition-delay:.14s}
  .nav-links.is-open>li:nth-child(3){transition-delay:.20s}
  .nav-links.is-open>li:nth-child(4){transition-delay:.26s}
  .nav-links.is-open>li:nth-child(5){transition-delay:.32s}
  .nav-links.is-open>li:nth-child(6){transition-delay:.38s}

  .nav-links a{display:block;padding:20px 0!important;
    font-family:'Playfair Display',serif!important;text-transform:none!important;
    font-size:1.85rem!important;font-weight:600!important;letter-spacing:-.01em!important;
    color:var(--d)!important;border:none!important}
  .nav-links a::after{bottom:14px;height:2px}
  .nav-links a.active::after{opacity:1;transform:scaleX(1)}

  /* Sprachwahl + CTA am Fuss der Flaeche */
  .nav-lang{border-bottom:none!important;padding:26px 0 0!important;margin:0!important;
    display:flex!important;gap:10px;font-size:12px!important}
  .nav-lang::before{display:none!important}
  /* .nav-links a.nav-cta (statt nur .nav-cta): der KONTAKT-Link ist selbst ein
     <a> in .nav-links, darum sticht die generische ".nav-links a"-Regel oben
     sonst per hoeherer Spezifitaet durch, obwohl beide !important nutzen. */
  .nav-links a.nav-cta{display:inline-flex!important;height:auto!important;
    padding:16px 30px!important;margin-top:18px;font-size:11px!important;
    font-family:'Inter',sans-serif!important;text-transform:uppercase!important;
    letter-spacing:.1em!important;font-weight:600!important}
  body.nav-open{overflow:hidden}
}
@media(max-width:560px){
  .nav-links a{font-size:1.55rem!important;padding:16px 0!important}
  .nav-links{padding:0 22px!important}
}
/* Mobile QUERFORMAT: Handy liegend hat oft <500px Hoehe — 6 Punkte + Sprachwahl
   + Button passen dann nicht mittig auf den Screen. Statt zu zentrieren, oben
   ausrichten und alles enger stapeln, Rest wird gescrollt (overflow-y oben). */
@media(max-width:1024px) and (max-height:500px){
  .nav-links{justify-content:flex-start!important;padding-top:88px!important}
  .nav-links>li{border-bottom:1px solid rgba(60,50,35,.07)}
  .nav-links a{padding:11px 0!important;font-size:1.25rem!important}
  .nav-lang{padding:14px 0 0!important}
  .nav-links a.nav-cta{padding:11px 26px!important;margin-top:10px;font-size:10px!important}
}