/* ============================================================
   anneknapp.de — Fassung B: Tageslicht als Zuhause, Nacht als Bühne
   Marke LebensFreudePlus · Regelwerk siehe Markenhandbuch
   ============================================================ */
:root{
  /* helle Welt */
  --creme:#FAF4E8;
  --papier:#FFFDF8;
  --kante:#E6D9C2;
  --kante-stark:#D5C3A4;
  --navy:#14283D;
  --text:#4A5B6B;
  --text-still:#7B8896;

  /* dunkle Welt */
  --nacht:#06101B;
  --creme-schrift:#FBF3E4;
  --sand:#DCC9AC;
  --sand-still:#A79074;

  /* Gold in zwei Fassungen — nie die falsche verwenden */
  --gold-auf-hell:linear-gradient(138deg,#4A3510 0%,#7A5C1B 20%,#A8842F 42%,#8E6B22 58%,#6E5218 78%,#4A3510 100%);
  --gold-auf-dunkel:linear-gradient(138deg,#8E6B22 0%,#C9A44A 16%,#FFF8E4 38%,#EBD293 48%,#C9A44A 62%,#9A7A2C 82%,#6E5218 100%);
  --gold-dunkel:#8E6B22;
  --gold-hell:#EBD6A2;

  --glut:#FF7A1A;
  --glut-tief:#C95205;
  --glut-schein:rgba(255,122,26,.45);

  --mass:1180px;
  --schmal:760px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--creme);color:var(--navy);
  font-family:Archivo,"Segoe UI",system-ui,sans-serif;
  font-size:19px;line-height:1.64;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;text-wrap:balance;font-family:Fraunces,Georgia,serif;font-weight:600}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}

.huelle{max-width:var(--mass);margin:0 auto;padding:0 24px}
.huelle.schmal{max-width:var(--schmal)}

.sprung{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--creme);
  padding:12px 20px;border-radius:0 0 8px 0;z-index:100}
.sprung:focus{left:0}

a{color:var(--glut-tief)}
a:focus-visible,button:focus-visible{outline:2px solid var(--glut);outline-offset:3px;border-radius:4px}

.augbraue{
  font-size:14px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-dunkel);display:flex;align-items:center;gap:10px;margin:0 0 14px;
}
.augbraue::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--glut)}
.augbraue.hell{color:var(--gold-hell)}
.mitte-augbraue{justify-content:center}

/* ---------- Kopfleiste ---------- */
.kopfleiste{
  position:sticky;top:0;z-index:50;
  background:rgba(250,244,232,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--kante);
}
.kopfleiste-innen{display:flex;align-items:center;gap:24px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.marke-zeichen{width:40px;height:44px;flex:none}
.marke-text{font-weight:700;font-size:21px;letter-spacing:-.01em;white-space:nowrap}
.marke-text.klein{font-size:19px}
.m1{background:var(--gold-auf-hell);-webkit-background-clip:text;background-clip:text;color:transparent}
.m2{color:var(--glut-tief)}
.m3{color:var(--navy)}

.navi{margin-left:auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.navi a{color:var(--navy);text-decoration:none;font-size:17px;font-weight:500;padding:6px 0;
  border-bottom:2px solid transparent}
.navi a:hover{border-bottom-color:var(--glut)}
.navi-knopf{
  background:linear-gradient(168deg,#FFA95E,#FF9440 22%,#FF7A1A 52%,#C95205);
  color:#2B1103 !important;border:1px solid rgba(255,214,175,.6);border-radius:10px;
  padding:11px 20px !important;font-weight:600;
  box-shadow:0 10px 22px -12px var(--glut-schein),inset 0 2px 0 rgba(255,238,216,.8);
}
.navi-knopf:hover{border-bottom-color:transparent}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-block;padding:16px 32px;border-radius:12px;text-decoration:none;
  font-size:18px;font-weight:600;border:1px solid transparent}
.knopf-glut{
  background:linear-gradient(168deg,#FFA95E,#FF9440 22%,#FF7A1A 52%,#C95205);
  color:#2B1103;border-color:rgba(255,214,175,.6);
  box-shadow:0 16px 34px -14px var(--glut-schein),inset 0 2px 0 rgba(255,238,216,.8);
}
.knopf-rand{background:var(--papier);border-color:var(--kante-stark);color:var(--navy)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.knopfreihe.mitte{justify-content:center}
@media (prefers-reduced-motion:no-preference){
  .knopf{transition:transform .18s ease}
  .knopf:hover{transform:translateY(-2px)}
}

/* ---------- Kopfbereich ---------- */
.held{
  padding:64px 0 72px;
  background:
    radial-gradient(58% 44% at 92% 0%,rgba(255,122,26,.10),rgba(255,122,26,0) 66%),
    radial-gradient(46% 40% at 2% 88%,rgba(201,164,74,.13),rgba(201,164,74,0) 70%),
    var(--creme);
}
.held-raster{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.held h1{font-size:clamp(40px,6vw,68px);line-height:1.03;letter-spacing:-.015em}
.held h1 em{font-style:normal;background:var(--gold-auf-hell);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kernsatz{font-size:clamp(20px,2.3vw,24px);color:var(--text);max-width:38ch;margin:22px 0 30px;line-height:1.5}
.held-fuss{margin-top:24px;font-size:16px;color:var(--text-still)}
.held-bild img{
  border-radius:14px;
  filter:drop-shadow(0 30px 46px rgba(20,40,61,.24));
}

/* ---------- Abschnitte hell ---------- */
.abschnitt{padding:76px 0}
.abschnitt h2{font-size:clamp(28px,3.8vw,42px);margin-bottom:16px}
.beischrift{color:var(--text);max-width:60ch;margin-bottom:34px}
.mitte-text{margin-left:auto;margin-right:auto;text-align:center}
.mitte-satz{text-align:center}
.zwei-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;
  color:var(--text);font-size:19.5px}
.zwei-spalten b{color:var(--navy)}
.abschnitt-kontakt{background:var(--papier);border-top:1px solid var(--kante);border-bottom:1px solid var(--kante)}

/* ---------- Karten hell ---------- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:24px}
.karte{
  background:var(--papier);border:1px solid var(--kante);border-radius:14px;padding:30px 28px;
  box-shadow:0 16px 34px -26px rgba(20,40,61,.65);position:relative;overflow:hidden;
}
.karte::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-auf-hell)}
.karte h3{font-size:22px;margin:16px 0 10px}
.karte p{color:var(--text);font-size:17.5px}
.karte-fuss{margin-top:14px;font-size:15.5px;color:var(--text-still)}
.ikon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  border:1px solid var(--kante-stark);background:rgba(201,164,74,.07)}
.ikon svg{width:28px;height:28px}
.mehr{font-weight:600}

/* ---------- Dunkle Bänder ---------- */
.band{
  position:relative;overflow:hidden;padding:84px 0;color:var(--creme-schrift);
  background:
    radial-gradient(54% 42% at 86% 0%,rgba(201,164,74,.18),rgba(201,164,74,0) 68%),
    radial-gradient(46% 38% at 2% 24%,rgba(255,122,26,.16),rgba(255,122,26,0) 70%),
    linear-gradient(172deg,#0D2540 0%,#06101B 52%,#0B1D2E 100%);
}
.band-struktur{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.band-innen{position:relative}
.band h2{font-size:clamp(28px,3.8vw,42px);color:#FFF8EC;margin-bottom:16px}
.band-vorspann{color:var(--sand);max-width:62ch;margin-bottom:36px;font-size:19.5px}

/* ---------- Glas (nur auf dunklem Grund!) ---------- */
.glas-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:22px}
.glas{
  position:relative;border-radius:14px;padding:30px 28px;
  background:linear-gradient(145deg,rgba(255,250,238,.30) 0%,rgba(255,250,238,.10) 24%,
    rgba(255,250,238,.035) 52%,rgba(255,250,238,.09) 78%,rgba(255,250,238,.20) 100%);
  backdrop-filter:blur(8px) saturate(210%) contrast(1.2) brightness(1.14);
  -webkit-backdrop-filter:blur(8px) saturate(210%) contrast(1.2) brightness(1.14);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.98),
    inset 0 2px 1px rgba(255,252,242,.46),
    inset 0 -24px 40px -28px rgba(0,0,0,.5),
    inset 0 0 44px rgba(255,246,220,.10),
    0 0 34px -14px rgba(255,232,180,.22);
}
.glas::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.4px;
  background:linear-gradient(140deg,rgba(255,253,247,1) 0%,rgba(255,253,247,.4) 20%,
    rgba(255,253,247,.1) 54%,rgba(255,253,247,.38) 78%,rgba(255,253,247,.75) 100%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask-composite:exclude;
}
.glas > *{position:relative;z-index:1}
.glas h3{font-size:21px;color:#FFF8EC;margin-bottom:10px}
.glas p{color:var(--sand);font-size:17.5px}

/* ---------- Slogan ---------- */
.band-slogan{padding:76px 0}
.slogan{display:inline-block;max-width:620px;padding:44px 48px;margin:0;text-align:center}
.slogan p{
  font-family:Fraunces,Georgia,serif;font-size:clamp(24px,3.6vw,36px);line-height:1.42;
  background:var(--gold-auf-dunkel);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(94,68,20,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.55));
  margin:0;
}
.slogan .strich{display:block;width:64px;height:1px;margin:22px auto 0;
  background:var(--gold-auf-dunkel);opacity:.8}
.slogan cite{display:block;margin-top:18px;font-style:normal;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}

/* ---------- Über mich ---------- */
.ueber-raster{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.ueber-bild img{border-radius:14px;filter:drop-shadow(0 24px 38px rgba(20,40,61,.22))}
.ueber-raster p{color:var(--text)}
.stationen{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.stationen li{
  position:relative;padding-left:26px;color:var(--text);font-size:17.5px;line-height:1.55;
}
.stationen li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--gold-auf-hell);
}
.stationen b{color:var(--navy)}

/* ---------- Fußzeile ---------- */
.fussleiste{background:var(--navy);color:var(--sand);padding:56px 0 0;margin-top:0}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:40px}
.fussleiste .m3{color:var(--creme-schrift)}
.fuss-klein{margin-top:14px;font-size:16px;color:var(--sand-still);line-height:1.55}
.fuss-titel{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hell);
  font-weight:600;margin-bottom:12px}
.fussleiste nav a{display:block;color:var(--sand);text-decoration:none;padding:5px 0;font-size:17px}
.fussleiste nav a:hover{color:var(--creme-schrift);text-decoration:underline}
.fuss-zeile{border-top:1px solid rgba(255,246,224,.14);padding-top:20px;padding-bottom:26px}
.fuss-zeile p{margin:0;font-size:15.5px;color:var(--sand-still)}

/* ---------- schmale Bildschirme ---------- */
@media (max-width:900px){
  .held-raster{grid-template-columns:1fr;gap:34px}
  .held-bild{order:-1;max-width:340px}
  .ueber-raster{grid-template-columns:1fr;gap:30px}
  .ueber-bild{max-width:300px}
  .fuss-raster{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:640px){
  body{font-size:18px}
  .held{padding:40px 0 52px}
  .abschnitt{padding:56px 0}
  .band{padding:60px 0}
  .navi{gap:16px;width:100%}
  .navi a{font-size:16px}
  .slogan{padding:34px 26px}
  .fuss-raster{grid-template-columns:1fr}
}


/* ---------- Die vier Adern ---------- */
.abschnitt-adern{background:var(--papier);border-top:1px solid var(--kante);
  border-bottom:1px solid var(--kante);padding-top:56px}
.adern{display:grid;grid-template-columns:1fr 1fr;gap:46px 52px}
.ader{position:relative;padding-left:0}
.ader-ikon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--kante-stark);background:rgba(201,164,74,.08);margin-bottom:16px}
.ader-ikon svg{width:27px;height:27px}
.ader h3{font-size:22px;margin-bottom:10px}
.ader p{color:var(--text);font-size:17.5px;margin-bottom:.85em}
.ader b{color:var(--navy)}

/* ---------- Formular ---------- */
.formular{margin-top:8px;display:grid;gap:20px;text-align:left}
.feld{display:grid;gap:7px}
.feld label{font-size:16.5px;font-weight:600;color:var(--navy)}
.freiwillig{font-weight:400;color:var(--text-still)}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],
.feld select,.feld textarea{
  font-family:inherit;font-size:18px;color:var(--navy);
  background:var(--papier);border:1px solid var(--kante-stark);border-radius:10px;
  padding:14px 16px;width:100%;
}
.feld textarea{resize:vertical;min-height:130px;line-height:1.6}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--glut);outline-offset:1px;border-color:transparent}
.feld-haken{grid-template-columns:auto 1fr;align-items:start;gap:12px}
.feld-haken input{width:22px;height:22px;margin-top:3px;accent-color:var(--glut-tief)}
.feld-haken label{font-weight:400;font-size:16.5px;color:var(--text);line-height:1.5}
.formular button{justify-self:start;cursor:pointer;font-family:inherit}
.formular-fuss{font-size:16px;color:var(--text-still);margin:0}
.falle{position:absolute;left:-9999px}


/* ---------- Brücke ---------- */
.hinweis-satz{
  margin-top:26px;padding:16px 22px;border-left:3px solid var(--glut);
  background:var(--papier);border-radius:0 10px 10px 0;
  font-size:17.5px;color:var(--text);
}

/* ---------- Bilderstreifen ---------- */
.streifen-kopf{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:56px 0 16px}
.streifen-kopf .augbraue{margin:0}
.streifen-hinweis{margin:0;font-size:15.5px;color:var(--text-still)}
.streifen{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,340px);gap:20px;
  overflow-x:auto;padding-bottom:14px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--kante-stark) transparent;
}
.streifen:focus-visible{outline:2px solid var(--glut);outline-offset:6px;border-radius:8px}
.streifen figure{margin:0;scroll-snap-align:start}
.streifen img{
  border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%;
  border:1px solid var(--kante);box-shadow:0 16px 32px -24px rgba(20,40,61,.7);
}
.streifen figcaption{margin-top:10px;font-size:16px;color:var(--text-still);line-height:1.45}
.streifen::-webkit-scrollbar{height:8px}
.streifen::-webkit-scrollbar-thumb{background:var(--kante-stark);border-radius:4px}
.streifen::-webkit-scrollbar-track{background:transparent}

@media (max-width:820px){
  .adern{grid-template-columns:1fr;gap:38px}
}


/* ---------- Auswandern: Stufen ---------- */
.stufe-nr{
  font-family:Fraunces,Georgia,serif;font-size:15px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 10px;
  background:var(--gold-auf-dunkel);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Aufklappbare Fragen ---------- */
.fragen{display:grid;gap:12px}
.fragen details{
  background:var(--papier);border:1px solid var(--kante);border-radius:12px;
  box-shadow:0 12px 26px -24px rgba(20,40,61,.6);
}
.fragen summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:Fraunces,Georgia,serif;font-size:20px;font-weight:600;color:var(--navy);
  display:flex;align-items:flex-start;gap:14px;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::before{
  content:"";flex:none;width:11px;height:11px;margin-top:.5em;border-right:2px solid var(--gold-dunkel);
  border-bottom:2px solid var(--gold-dunkel);transform:rotate(45deg);transform-origin:60% 60%;
}
.fragen details[open] summary::before{transform:rotate(-135deg)}
.fragen summary:focus-visible{outline:2px solid var(--glut);outline-offset:-2px;border-radius:12px}
.fragen p{margin:0;padding:0 24px 22px 49px;color:var(--text);font-size:17.5px;max-width:62ch}
@media (prefers-reduced-motion:no-preference){
  .fragen summary::before{transition:transform .2s ease}
}


/* ---------- Partnerhinweis ---------- */
.partner{
  display:flex;gap:20px;align-items:flex-start;margin-top:30px;
  background:var(--papier);border:1px solid var(--kante);border-radius:14px;padding:26px 28px;
  box-shadow:0 16px 34px -28px rgba(20,40,61,.65);
}
.partner-ikon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--kante-stark);background:rgba(201,164,74,.08)}
.partner-ikon svg{width:27px;height:27px}
.partner h3{font-family:Fraunces,Georgia,serif;font-size:20px;font-weight:600;margin-bottom:9px}
.partner p{margin:0;color:var(--text);font-size:17.5px}
@media (max-width:600px){.partner{flex-direction:column;gap:14px}}


/* ---------- längerer Fließtext, einspaltig ---------- */
.fliesstext{color:var(--text);font-size:19.5px;max-width:64ch}
.fliesstext p{margin-bottom:1.05em}
.fliesstext b{color:var(--navy)}


/* ---------- E-Mail im Impressum: lesbar, aber nicht verlinkt ---------- */
.mail-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mail-adresse{font-family:ui-monospace,Consolas,monospace;font-size:17.5px;color:var(--navy);
  background:rgba(20,40,61,.05);border:1px solid var(--kante);border-radius:7px;padding:4px 10px;
  user-select:all}
.kopieren{
  font-family:inherit;font-size:15.5px;font-weight:600;cursor:pointer;
  color:var(--navy);background:var(--papier);border:1px solid var(--kante-stark);
  border-radius:8px;padding:7px 14px;
}
.kopieren:hover{border-color:var(--glut)}
.kopieren:focus-visible{outline:2px solid var(--glut);outline-offset:2px}


/* ---------- kleiner Hinweis am Seitenende ---------- */
.pruef-hinweis{
  margin-top:38px;padding-top:18px;border-top:1px solid var(--kante);
  font-size:16px;color:var(--text-still);
}


/* ---------- Brücke zur Reiseseite ---------- */
.bruecke{
  margin:28px 0 6px;border-radius:16px;overflow:hidden;
  border:1px solid var(--kante-stark);
  background:
    radial-gradient(60% 50% at 92% 0%,rgba(255,122,26,.10),rgba(255,122,26,0) 68%),
    radial-gradient(46% 40% at 2% 96%,rgba(201,164,74,.14),rgba(201,164,74,0) 70%),
    var(--papier);
  box-shadow:0 20px 42px -30px rgba(20,40,61,.7);
}
.bruecke::before{content:"";display:block;height:3px;background:var(--gold-auf-hell)}
.bruecke-text{padding:30px 32px}
.bruecke h3{font-family:Fraunces,Georgia,serif;font-size:23px;font-weight:600;margin-bottom:11px}
.bruecke p{color:var(--text);font-size:17.5px;margin-bottom:22px;max-width:56ch}
@media (max-width:600px){.bruecke-text{padding:24px 22px}}