/* Gemeinsame Gestaltung für alle Seiten von fitmitalltag.de
   Welt: Walters Instagram-Karussells. Beige und Schwarz wechseln wie Slides, Rot nur für Kästen, Knöpfe und Schlagwörter. */
@font-face{font-family:"Anton";src:url("/assets/fonts/anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/assets/fonts/intertight.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --beige:#ece6d8;
  --schwarz:#111111;
  --schwarz-tief:#0a0a0a;
  --rot:#e50403;
  --rot-hover:#c90302;
  --event:#eb5e28;
  --event-hover:#d9511c;
  --rot-auf-beige:#c00302;
  --rot-auf-schwarz:#ff3b2f;
  --tinte:#141312;
  --tinte-leise:#4a4640;
  --papier:#ece6d8;
  --papier-text:#ddd6c8;
  --papier-leise:#b9b2a4;
  --platzhalter:#6c665c;
  --linie:4px;
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --text:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --inhalt:1180px;
  --rand:clamp(16px,5vw,64px);
  --luft:clamp(56px,7vw,104px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--rot) var(--schwarz);scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--schwarz);color:var(--tinte);font-family:var(--text);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.5;font-weight:450;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--rot);color:var(--beige)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--rot)}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:2px}
p{margin:0 0 1em;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[id]{scroll-margin-top:24px}

/* Grund: Papier hell und dunkel */
.hell{background:var(--beige) url("/assets/papier-hell.jpg") center top/810px auto;color:var(--tinte)}
.dunkel{background:var(--schwarz) url("/assets/papier-dunkel.jpg") center top/810px auto;color:var(--papier)}
.hell .rotwort{color:var(--rot-auf-beige)}
.dunkel .rotwort{color:var(--rot-auf-schwarz)}

main{position:relative}
.band{position:relative;padding-block:var(--luft)}
.band.erstes{padding-top:clamp(96px,9vw,124px)}
.wrap{position:relative;z-index:2;max-width:var(--inhalt);margin-inline:auto;padding-inline:var(--rand)}

/* Die rote Linie */
.faden{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.faden path{fill:none;stroke:var(--rot);stroke-width:var(--linie);stroke-linecap:round;stroke-linejoin:round}
.faden .ende{fill:var(--rot)}

/* Hook-Schrift mit rotem Kasten */
.hook{font-family:var(--display);font-size:clamp(2.5rem,1.4rem + 4.4vw,4.25rem);line-height:.98;letter-spacing:-.03em}
.hook .zeile{display:block}
.titel2{font-family:var(--display);font-size:clamp(2.1rem,1.4rem + 2.8vw,3.25rem);line-height:1;letter-spacing:-.03em}
.kasten{display:block;width:fit-content;background:var(--rot);color:var(--beige);padding:.1em .16em .12em;margin:.14em 0 0 -.16em;line-height:1}
.js .kasten{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease) .15s}
.js .kasten.ist-da{clip-path:inset(0 0 0 0)}
.satz{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.5;max-width:36ch;font-weight:500}

/* Kopf mit Menü */
.kopf{position:absolute;top:0;left:0;right:0;z-index:20}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.logo{font-family:var(--display);font-size:1.65rem;line-height:1;letter-spacing:.02em;background:var(--rot);color:var(--beige);padding:.2em .34em .26em;text-decoration:none;flex:none;transform:rotate(-3deg);transition:transform .35s var(--ease)}
.logo:hover{transform:rotate(0)}
.menue{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px)}
.menue a{font-weight:650;font-size:.98rem;text-decoration:none;padding:.4em 0;color:var(--tinte);border-bottom:2px solid transparent;transition:border-color .2s}
.menue a:hover{border-bottom-color:var(--rot)}
.menue a[aria-current="page"]{border-bottom-color:var(--tinte)}
.menue a.coaching{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1;letter-spacing:.01em;background:var(--rot);color:var(--beige);padding:.3em .5em .34em;border:0;transition:background-color .2s}
.menue a.coaching:hover{background:var(--rot-hover)}
.menue a.coaching[aria-current="page"]{background:var(--tinte)}
.menue a.event{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1;letter-spacing:.01em;background:var(--event);color:var(--tinte);padding:.3em .5em .34em;border:0;transition:background-color .2s}
.menue a.event:hover{background:var(--event-hover)}
.menue a.event[aria-current="page"]{box-shadow:0 0 0 2px var(--tinte)}
.menue .gesperrt{position:relative;display:inline-block;font-family:var(--display);font-size:1.5rem;line-height:1;letter-spacing:.01em;padding:.3em .5em .34em;color:var(--tinte);opacity:1;cursor:not-allowed;user-select:none}
.menue .gesperrt .name{opacity:.5}
.menue .gesperrt .baustelle{position:absolute;left:-4%;right:-4%;top:52%;transform:translateY(-50%) rotate(-8deg);background:var(--tinte);color:var(--beige);font-family:var(--display);font-size:.62rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:.3em 0 .34em;box-shadow:0 0 0 2px var(--beige)}
.menue .insta{display:inline-grid;place-items:center;padding:.4em;border:0}
.menue .insta svg{width:20px;height:20px}
.menue .insta:hover{transform:scale(1.1)}
.menue .insta{transition:transform .25s var(--ease)}
.menueknopf{display:none;border:0;background:none;font:inherit;font-weight:700;font-size:.98rem;color:var(--tinte);cursor:pointer;padding:10px 0 10px 10px;align-items:center;gap:10px}
.menueknopf .striche{width:24px;height:14px;position:relative}
.menueknopf .striche::before,.menueknopf .striche::after{content:"";position:absolute;left:0;right:0;height:2.5px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.menueknopf .striche::before{top:2px}
.menueknopf .striche::after{top:10px}
.menue-offen .menueknopf .striche::before{top:6px;transform:rotate(45deg)}
.menue-offen .menueknopf .striche::after{top:6px;transform:rotate(-45deg)}

/* Formular */
.formular{max-width:520px}
.feldreihe{display:flex;background:var(--beige);border:2px solid var(--tinte);transition:border-color .2s}
.dunkel .feldreihe{border-color:var(--beige)}
.feldreihe:focus-within{border-color:var(--rot)}
.feldreihe input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.0625rem;font-weight:500;color:var(--tinte);padding:13px 16px;caret-color:var(--rot)}
.feldreihe input::placeholder{color:var(--platzhalter);opacity:1}
.feldreihe input:focus{outline:none}
.knopf{border:0;cursor:pointer;background:var(--rot);color:var(--beige);font-family:var(--display);font-size:1.5rem;line-height:1;letter-spacing:.01em;padding:0 22px;white-space:nowrap;text-decoration:none;transition:background-color .2s,transform .2s var(--ease)}
.knopf:hover{background:var(--rot-hover)}
.knopf:active{transform:translateY(1px)}
.knopf:disabled{cursor:progress;background:#8f2a22}
a.knopf{display:inline-block;padding:.42em .6em .46em}
.formular .klein{font-size:.875rem;line-height:1.5;margin:14px 0 0;max-width:46ch}
.hell .klein{color:var(--tinte-leise)}
.dunkel .klein{color:var(--papier-leise)}
.fehler{display:none;font-weight:600;font-size:.95rem;margin:10px 0 0}
.hell .fehler{color:var(--rot-auf-beige)}
.dunkel .fehler{color:var(--rot-auf-schwarz)}
.formular.hat-fehler .fehler{display:block}
.formular.hat-fehler .feldreihe{border-color:var(--rot)}
.geschafft{display:none}
.formular.ist-fertig form{display:none}
.formular.ist-fertig .geschafft{display:block}
.geschafft strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.25rem);line-height:1;margin-bottom:.35em}
.geschafft p{max-width:40ch;font-weight:500}

/* Sprung nach unten: roter Pfeil plus Text */
.weiter{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--rot);color:var(--beige);text-decoration:none;position:relative;z-index:3;transition:transform .4s var(--ease)}
.weiter:hover{transform:translateY(3px)}
.weiter svg{width:22px;height:22px}
.sprung{display:flex;align-items:center;gap:14px;margin-top:clamp(14px,1.6vw,20px)}
.sprung-text{font-family:var(--display);font-size:1.5rem;line-height:1;text-decoration:none;color:var(--tinte)}
.dunkel .sprung-text{color:var(--papier)}
.sprung-text:hover{color:var(--rot-auf-beige)}
.dunkel .sprung-text:hover{color:var(--rot-auf-schwarz)}

/* Textseiten: Datenschutz, Teilnahmebedingungen */
.recht .intro{margin-top:clamp(16px,2.2vw,26px);max-width:60ch;font-weight:500}
.abschnitte{margin-top:clamp(20px,2.8vw,32px);display:grid;gap:0;max-width:760px}
.abschnitt{border-top:1.5px solid var(--tinte);padding:clamp(14px,1.8vw,20px) 0}
.abschnitt h2{font-weight:700;font-size:1.125rem;line-height:1.25;letter-spacing:-.005em;margin-bottom:.45em}
.abschnitt p{max-width:64ch}
.abschnitt p:last-child{margin-bottom:0}
.abschnitt ul,.abschnitt ol{margin:.2em 0 1em;padding-left:1.2em;max-width:64ch}
.abschnitt li{margin-bottom:.35em}
.abschnitt a{text-decoration-color:var(--rot);text-decoration-thickness:2px}
.stand{margin-top:8px;font-size:.9rem;color:var(--tinte-leise)}
.recht .zurueck{margin-top:clamp(20px,2.6vw,30px)}
.hook.lang{font-size:clamp(1.9rem,1rem + 4.2vw,3.75rem)}

/* Fuß */
.fuss{background:var(--schwarz-tief);color:var(--papier-leise);font-size:.875rem;line-height:1.55;padding-block:30px 26px;position:relative;z-index:2}
.fuss .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.fuss nav a{color:var(--papier);font-weight:600;text-decoration:none;padding:4px 0}
.fuss nav a:hover{color:var(--rot-auf-schwarz)}
@media (prefers-reduced-motion:reduce){.logo,.menue .insta{transition:none}}
.fuss .marke{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;border-top:1px solid #2a2927;padding-top:14px;font-size:.8125rem}

@media (max-width:900px){
  /* Menü als Klappfläche */
  .menueknopf{display:inline-flex;position:relative;z-index:22}
  .menue{position:fixed;inset:0;z-index:21;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:96px var(--rand) 48px;background:var(--beige) url("/assets/papier-hell.jpg") center top/810px auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .menue-offen .menue{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .menue a{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,9vw,3.4rem);line-height:1.05;letter-spacing:-.02em;padding:.08em 0}
  .menue a.event{font-size:clamp(2.4rem,9vw,3.4rem);margin:.1em 0 0 -.16em;padding:.1em .16em .12em}
  .menue .gesperrt{font-size:clamp(2.4rem,9vw,3.4rem);padding:.1em .16em .12em;margin:.1em 0 0 -.16em}
  .menue .gesperrt .baustelle{font-size:clamp(.8rem,3vw,1.05rem);left:-3%;right:-3%}
  .menue a,.menue a:hover,.menue a[aria-current="page"]{border-bottom:0}
  .menue a[aria-current="page"]:not(.event){text-decoration:underline;text-decoration-color:var(--rot);text-decoration-thickness:4px;text-underline-offset:.12em}
  .menue .insta{margin-top:18px;padding:0}
  .menue .insta svg{width:28px;height:28px}
  .menue-offen{overflow:hidden}
}
@media (max-width:520px){
  :root{--rand:28px}
  .feldreihe{flex-direction:column}
  .feldreihe input{padding:15px 14px}
  .knopf{padding:15px 18px;text-align:left}
  .kopf .wrap{padding-block:14px}
  .fuss .marke{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .kasten{clip-path:none;transition:none}
  .weiter,.knopf,.menue,.menueknopf .striche::before,.menueknopf .striche::after{transition:none}
}