/* TTbuilds — gemeinsames Stylesheet.
   Heller, ruhiger Grund, darauf weiße und getönte Karten mit großen Radien.
   Eine neutrale Grotesk (Switzer) in großen Graden, eine extraschmale Schrift nur
   für die Wortmarke. Drei Töne ordnen die Leistungen: Aprikose (ausgeblichenes Orange) = Aufsteller,
   Nebel = Websites, Nacht = Videoschnitt. Ein einziger Akzent (Blau, wie im Logo).
   Szenen (Kartenstapel, Demos) liegen in szenen.css, die Musterkarten in karten.css. */

:root{
  --tinte:#101113;
  --tinte-weich:rgba(16,17,19,.68);
  --linie:rgba(16,17,19,.14);
  --papier:#FFFFFF;
  --grund:#F2F2EF;
  --aprikose:#F2C092;                  /* Aufsteller: ausgeblichenes Orange, warme Fläche zum kalten Akzent */
  --nebel:#D9E2E8;
  --nacht:#141517;
  --akzent:#2B4EFF;                    /* dasselbe Blau wie im Logo und auf Instagram */
  --fehler:#B3200F;

  --blatt:var(--papier);              /* Ton der Bühne oben auf der aktuellen Seite */

  /* Ein Takt für alle Bewegung: jede Dauer ist ein Vielfaches davon. */
  --takt:160ms;
  --aus:cubic-bezier(.23,1,.32,1);
  --hin-her:cubic-bezier(.77,0,.175,1);

  --breit:1240px;
  --schmal:720px;
  --rand:clamp(18px,3.4vw,44px);
  --aussen:clamp(8px,1vw,14px);       /* Abstand der großen Karten zum Fensterrand */
  --rund:clamp(18px,2vw,28px);
  --rund-klein:12px;
  --schmal-schrift:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  --pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19L19 5M8 5h11v11'/%3E%3C/svg%3E");
}
body.gelb{ --blatt:var(--aprikose); }
body.gruen{ --blatt:var(--nebel); }
body.rosa{ --blatt:var(--nacht); }

/* Dunkle Flächen drehen die Rollen um: alles, was mit --tinte zeichnet, wird hell. */
.band-tinte,.b-rosa,.k-rosa,.a-rosa,body.rosa .band-kopf,.fuss{
  background:var(--nacht); color:#F2F2EF;
  --tinte:#F2F2EF; --tinte-weich:rgba(242,242,239,.7); --linie:rgba(242,242,239,.2); --papier:#141517;
}

@view-transition{ navigation:auto; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px;
  scrollbar-color:#101113 #F2F2EF; }
body{
  margin:0; background:var(--grund); color:var(--tinte);
  font-family:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem; line-height:1.55; font-weight:400;
  text-wrap:pretty; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  caret-color:var(--akzent);
}
::selection{ background:var(--akzent); color:#FFFFFF; }
:focus-visible{ outline:2.5px solid var(--akzent); outline-offset:3px; border-radius:4px; }
main{ overflow-x:clip; }
img,svg{ max-width:100%; display:block; }
img{ height:auto; }

h1,h2{ font-weight:500; line-height:1; margin:0 0 .4em; text-wrap:balance; overflow-wrap:normal; hyphens:manual; }
h1{ font-size:clamp(2.7rem,6.4vw,5.6rem); letter-spacing:-.04em; }
h2{ font-size:clamp(2rem,4.3vw,3.5rem); letter-spacing:-.035em; line-height:1.04; }
h3{ font-size:1.2rem; font-weight:600; line-height:1.25; letter-spacing:-.01em; margin:0 0 .4em; }
p{ margin:0 0 1em; }
p,li{ hyphens:auto; hyphenate-limit-chars:8 4 4; }
a{ color:inherit; text-underline-offset:.22em; text-decoration-thickness:1.5px; }
strong{ font-weight:600; }

.wrap{ max-width:var(--breit); margin:0 auto; padding:0 var(--rand); }
.schmal{ max-width:var(--schmal); }
.lead{ font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.42; letter-spacing:-.012em; max-width:33em; color:var(--tinte-weich); hyphens:manual; }
.klein{ font-size:.92rem; color:var(--tinte-weich); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sprung{ position:absolute; left:16px; top:-70px; z-index:100; background:var(--tinte); color:var(--papier);
  padding:12px 18px; border-radius:var(--rund-klein); transition:top var(--takt) var(--aus); }
.sprung:focus{ top:16px; }

/* ---------- Kopf: schwebende Leiste ---------- */
.kopf{ position:sticky; top:var(--aussen); z-index:50; margin:var(--aussen) var(--aussen) 0; }
.kopf-innen{
  display:flex; align-items:center; gap:22px; min-height:62px; padding:8px 8px 8px 22px;
  background:rgba(255,255,255,.82); border-radius:16px;
  backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 30px -22px rgba(16,17,19,.45);
}
@media (prefers-reduced-transparency:reduce){ .kopf-innen{ background:#fff; backdrop-filter:none; } }
.marke{ font-weight:600; font-size:1.02rem; letter-spacing:.02em; text-transform:uppercase; text-decoration:none;
  margin-right:auto; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.logo{ height:17px; width:auto; flex:none; fill:currentColor; }
.logo-punkt{ fill:var(--akzent); }
.nav{ display:flex; align-items:center; gap:6px; }
.nav a:not(.knopf){ font-size:.98rem; text-decoration:none; padding:10px 14px; border-radius:10px;
  transition:background-color var(--takt) ease; }
.nav a[aria-current="page"]:not(.knopf){ background:rgba(16,17,19,.08); }
@media (hover:hover) and (pointer:fine){ .nav a:not(.knopf):hover{ background:rgba(16,17,19,.06); } }
.nav .knopf{ margin-left:10px; }
.nav-schalter{ display:none; font:inherit; font-weight:500; color:var(--tinte); background:rgba(16,17,19,.07);
  border:0; border-radius:10px; min-height:46px; padding:0 18px; cursor:pointer; }

@media (max-width:860px){
  .nav-schalter{ display:block; }
  .nav{ position:absolute; left:0; right:0; top:calc(100% + 8px); flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-radius:16px; padding:10px; box-shadow:0 24px 50px -24px rgba(16,17,19,.5);
    visibility:hidden; opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top right;
    transition:opacity var(--takt) var(--aus),transform calc(var(--takt)*1.5) var(--aus),visibility 0s var(--takt); }
  .nav.offen{ visibility:visible; opacity:1; transform:none; transition-delay:0s; }
  .nav a:not(.knopf){ min-height:52px; display:flex; align-items:center; font-size:1.1rem; }
  .nav .knopf{ margin:8px 0 0; justify-content:center; }
}

/* Zweite Zeile im Kopf, nur auf den Aufsteller-Seiten: Überblick, Designs, Preise.
   Klebt mit dem Kopf oben, damit man von jeder Scrollposition direkt wechseln kann. */
.kopf-innen{ position:relative; z-index:2; }
.kopf-unter{ display:flex; justify-content:center; margin-top:6px; pointer-events:none; }
.kopf-unter .unternav{ pointer-events:auto; margin-top:0; flex-wrap:nowrap; background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 30px -22px rgba(16,17,19,.45); }
.kopf-unter .unternav a{ padding:0 20px; white-space:nowrap; }
.kopf-unter .unternav a[aria-current="page"]{ background:var(--tinte); color:var(--papier); box-shadow:none; }
@media (prefers-reduced-transparency:reduce){ .kopf-unter .unternav{ background:#fff; backdrop-filter:none; } }
html:has(.kopf-unter){ scroll-padding-top:164px; }
/* Breite Fenster: der Schalter sitzt IN der Kopfleiste neben der Marke statt als zweite Zeile darunter,
   damit über dem Inhalt nur ein einziges schwebendes Element liegt. */
@media (min-width:1100px){
  .kopf-unter{ position:absolute; z-index:3; left:172px; top:0; bottom:0; margin:0; align-items:center; }
  .kopf-unter .unternav{ padding:4px; background:rgba(16,17,19,.06); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .kopf-unter .unternav a{ min-height:38px; padding:0 16px; font-size:.95rem; }
  html:has(.kopf-unter){ scroll-padding-top:100px; }
}
@media (max-width:420px){ .kopf-unter .unternav{ width:100%; } .kopf-unter .unternav a{ flex:1; justify-content:center; padding:0 8px; } }

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 24px;
  font:inherit; font-weight:500; text-decoration:none; cursor:pointer; border-radius:var(--rund-klein);
  color:var(--papier); background:var(--tinte); border:1.5px solid var(--tinte);
  transition:transform calc(var(--takt)*.75) var(--aus),background-color var(--takt) ease,color var(--takt) ease;
}
.knopf::after,.kreislauf a::after{ content:''; width:1em; height:1em; flex:none; background:currentColor;
  -webkit-mask:var(--pfeil) center/contain no-repeat; mask:var(--pfeil) center/contain no-repeat;
  transition:transform calc(var(--takt)*1.5) var(--aus); }
.knopf:active{ transform:scale(.97); }
.knopf-hell{ background:transparent; color:var(--tinte); border-color:var(--linie); }
.knopf-klein{ min-height:46px; padding:0 20px; }
.knopf-klein::after{ content:none; }
@media (hover:hover) and (pointer:fine){
  .knopf:hover::after,.kreislauf a:hover::after{ transform:translate(2px,-2px); }
  .knopf-hell:hover{ background:var(--tinte); color:var(--papier); border-color:var(--tinte); }
}
.knopf-reihe{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; align-items:center; }

/* ---------- Abschnitte: große Karten mit Luft zum Rand ---------- */
.band{ padding:clamp(60px,8vw,118px) 0; }
.band-papier,.band-tinte,.band-kopf{ margin:var(--aussen); border-radius:var(--rund); }
.band-papier{ background:var(--papier); }
.band-kopf{ background:var(--blatt); padding-top:clamp(28px,4vw,48px); }
.abriss{ border:0; }
.band h2 + .lead{ margin-top:-.1em; }
.oben{ margin-top:clamp(36px,5vw,64px); }
.oben-klein{ margin-top:18px; }
.band-unten{ padding-bottom:clamp(64px,9vw,120px); }

/* Kopfzeile einer Leistungsseite: Nummer und Name, darunter eine feine Linie. */
.blattzeile{ display:flex; justify-content:space-between; gap:16px; font-size:.88rem; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; padding-bottom:14px; border-bottom:1px solid var(--linie); margin-bottom:clamp(36px,6vw,80px); }
.sterne-reihe{ display:inline-flex; gap:2px; vertical-align:-.12em; color:var(--akzent); }
.sterne-reihe svg{ width:1em; height:1em; fill:currentColor; }

.raster-2,.raster-3{ display:grid; gap:clamp(28px,4vw,64px); }
@media (min-width:820px){
  .raster-2{ grid-template-columns:1fr 1fr; }
  .raster-3{ grid-template-columns:repeat(3,1fr); }
  .mitte{ align-items:center; }
}

/* ---------- Zeilen: Beschriftung klein, Eintrag groß, Linie darunter ---------- */
.zeilen{ margin:0; }
.zeilen > div{ display:grid; grid-template-columns:7.5em 1fr; gap:12px; align-items:baseline; padding:14px 0; position:relative; }
.zeilen > div::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--tinte); opacity:.28; transform-origin:left; }
.zeilen dt{ font-size:.8rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--tinte-weich); }
.zeilen dd{ margin:0; font-weight:500; }
.zeilen .gross{ font-size:2.5rem; font-weight:500; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }

/* ---------- Ankreuzlisten ---------- */
.kasten{ width:1.5em; height:1.5em; border:1.5px solid var(--tinte); border-radius:7px; flex:none; display:inline-grid;
  place-items:center; background:transparent; transition:background-color var(--takt) ease,border-color var(--takt) ease; }
.kasten svg{ width:74%; height:74%; fill:none; stroke:var(--papier); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.kasten path{ stroke-dasharray:40; stroke-dashoffset:40; transition:stroke-dashoffset calc(var(--takt)*2) var(--aus); }
.kasten.an,input:checked + .kasten{ background:var(--tinte); }
.kasten.an path,input:checked + .kasten path{ stroke-dashoffset:0; }

.liste{ list-style:none; margin:0; padding:0; }
.liste li{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--linie); }
.liste li:first-child{ border-top:1px solid var(--linie); }
.liste .kasten{ margin-top:.1em; }
.liste p{ margin:0; color:var(--tinte-weich); max-width:40em; }
.liste h3{ margin-bottom:.25em; }

/* ---------- Kreislauf (Start): vier Stationen als getönte Karten ---------- */
.kreislauf{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.kreislauf li{ display:grid; gap:12px 40px; padding:clamp(24px,3.4vw,44px); border-radius:calc(var(--rund) - 6px); }
@media (min-width:760px){ .kreislauf li{ grid-template-columns:minmax(220px,340px) 1fr; align-items:start; } }
.station{ font-size:clamp(1.9rem,3.6vw,3rem); font-weight:500; letter-spacing:-.04em; line-height:1; }
.k-gelb{ background:var(--aprikose); } .k-gruen{ background:var(--nebel); }
.kreislauf p{ color:var(--tinte-weich); max-width:40em; margin-bottom:.6em; }
.kreislauf a{ font-weight:500; display:inline-flex; align-items:center; gap:8px; min-height:44px; }

.fuss-bild{ margin:0; }
.fuss-bild img{ border-radius:calc(var(--rund) - 6px); aspect-ratio:4/3; object-fit:cover; object-position:50% 78%; width:100%; }
.fuss-bild figcaption{ margin-top:20px; }
.fuss-bild p{ color:var(--tinte-weich); }

/* ---------- Plakette (früher Stempel): kleine Marke im Akzent ---------- */
.stempel{ display:inline-flex; align-items:center; font-size:.9rem; font-weight:600; letter-spacing:.02em; line-height:1;
  padding:10px 14px; border-radius:999px; background:var(--akzent); color:#FFFFFF; transform:rotate(-4deg); white-space:nowrap; }

/* ---------- Schritte ---------- */
.schritte{ list-style:none; margin:0; padding:0; counter-reset:schritt; display:grid; gap:0; }
.schritte li{ counter-increment:schritt; display:grid; grid-template-columns:3.4em auto 1fr; gap:16px;
  padding:24px 0; border-bottom:1px solid var(--linie); align-items:start; }
.schritte li:first-child{ border-top:1px solid var(--linie); }
.schritte li::before{ content:'(0' counter(schritt) ')'; font-size:.92rem; font-weight:500; color:var(--tinte-weich);
  font-variant-numeric:tabular-nums; padding-top:.28em; }
.schritte p{ margin:0; color:var(--tinte-weich); }
.schritte .wann{ font-size:.92rem; font-weight:400; color:var(--tinte-weich); margin-left:8px; white-space:nowrap; }

/* ---------- Preis-Positionen ---------- */
.positionen{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.positionen th,.positionen td{ text-align:left; vertical-align:baseline; padding:22px 14px 20px 0; border-bottom:1px solid var(--linie); }
.positionen thead th{ font-size:.8rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--tinte-weich); padding-bottom:12px; }
.positionen tbody th{ font-weight:600; font-size:1.2rem; letter-spacing:-.01em; width:30%; }
.positionen td{ color:var(--tinte-weich); }
.positionen .zahl{ font-size:clamp(2rem,4.2vw,3rem); font-weight:500; letter-spacing:-.04em; line-height:1;
  color:var(--tinte); text-align:right; white-space:nowrap; padding-right:0; }
.positionen .zahl small{ font-size:.9rem; font-weight:400; letter-spacing:0; display:block; line-height:1.3; margin-top:8px; color:var(--tinte-weich); white-space:normal; }
@media (max-width:640px){
  .positionen thead{ display:none; }
  .positionen tr{ display:grid; grid-template-columns:1fr auto; column-gap:12px; border-bottom:1px solid var(--linie); padding:18px 0; }
  .positionen th,.positionen td{ border:0; padding:0; }
  .positionen tbody th{ width:auto; }
  .positionen td:not(.zahl){ grid-column:1; grid-row:2; margin-top:6px; }
  .positionen .zahl{ grid-column:2; grid-row:1 / span 2; }
}

/* ---------- Pakete ---------- */
.pakete{ display:grid; gap:12px; }
@media (min-width:900px){ .pakete{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.paket{ background:var(--papier); border-radius:calc(var(--rund) - 4px); padding:30px 28px 28px; display:flex; flex-direction:column; }
.paket-ziel{ background:var(--nacht); color:#F2F2EF;
  --tinte:#F2F2EF; --tinte-weich:rgba(242,242,239,.7); --linie:rgba(242,242,239,.2); --papier:#141517; }
.paket h3{ font-size:1.5rem; font-weight:500; letter-spacing:-.02em; }
.paket .preis{ font-size:clamp(3.2rem,5vw,4.4rem); font-weight:500; letter-spacing:-.05em; line-height:1; margin:18px 0 4px; font-variant-numeric:tabular-nums; }
.paket ul{ list-style:none; padding:0; margin:22px 0 28px; }
.paket li{ padding:11px 0; border-top:1px solid var(--linie); }
.paket .knopf{ margin-top:auto; justify-content:center; }

/* ---------- Hinweis ---------- */
.hinweis{ border-radius:calc(var(--rund) - 6px); padding:26px 28px; background:var(--papier); }
.band-papier .hinweis{ background:var(--grund); }
.hinweis p:last-child{ margin-bottom:0; }

/* ---------- Unternavigation (Aufsteller) ---------- */
.unternav{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:36px; padding:5px; border-radius:14px; background:rgba(16,17,19,.07); }
.unternav a{ min-height:44px; display:inline-flex; align-items:center; padding:0 18px; font-weight:500; border-radius:10px;
  text-decoration:none; transition:background-color var(--takt) ease; }
.unternav a[aria-current="page"]{ background:var(--papier); box-shadow:0 1px 3px rgba(16,17,19,.12); }
@media (hover:hover) and (pointer:fine){ .unternav a:not([aria-current]):hover{ background:rgba(255,255,255,.5); } }

/* ---------- Weiter-Kacheln am Ende der Aufsteller-Seiten ---------- */
.weiter-band{ padding-top:clamp(40px,5vw,72px); }
.weiter{ display:grid; gap:12px; margin-top:clamp(24px,3vw,40px); }
@media (min-width:760px){ .weiter{ grid-template-columns:1fr 1fr; } }
.weiter a{ position:relative; display:grid; gap:10px; padding:clamp(24px,3vw,40px); padding-right:clamp(64px,7vw,96px); text-decoration:none;
  background:var(--papier); border-radius:calc(var(--rund) - 4px); transition:background-color var(--takt) ease; }
.weiter a::after{ content:''; position:absolute; right:clamp(22px,3vw,38px); top:clamp(26px,3vw,42px); width:1.7rem; height:1.7rem; background:currentColor;
  -webkit-mask:var(--pfeil) center/contain no-repeat; mask:var(--pfeil) center/contain no-repeat; transition:transform calc(var(--takt)*1.5) var(--aus); }
.weiter-name{ font-size:clamp(1.9rem,3.4vw,2.8rem); font-weight:500; letter-spacing:-.04em; line-height:1; }
.weiter-text{ color:var(--tinte-weich); max-width:30em; }
.weiter a:active{ background:var(--aprikose); }
@media (hover:hover) and (pointer:fine){ .weiter a:hover{ background:var(--aprikose); } .weiter a:hover::after{ transform:translate(3px,-3px); } }

/* ---------- Fragen ---------- */
.fragen details{ border-bottom:1px solid var(--linie); }
.fragen details:first-child{ border-top:1px solid var(--linie); }
.fragen summary{ list-style:none; cursor:pointer; min-height:72px; padding:18px 0; font-weight:500; font-size:1.25rem; letter-spacing:-.015em;
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; }
.fragen summary::-webkit-details-marker{ display:none; }
.fragen summary::after{ content:''; width:18px; height:18px;
  background:linear-gradient(var(--tinte),var(--tinte)) center/100% 1.5px no-repeat,linear-gradient(var(--tinte),var(--tinte)) center/1.5px 100% no-repeat;
  transition:transform calc(var(--takt)*1.5) var(--aus); }
.fragen details[open] summary::after{ transform:rotate(45deg); }
.fragen details p{ max-width:40em; color:var(--tinte-weich); padding-bottom:12px; }

/* ---------- Text-Seiten (Impressum, Datenschutz) ---------- */
.text h1{ font-size:clamp(2.4rem,5.6vw,4rem); hyphens:auto; }
.text h2{ font-size:1.3rem; font-weight:600; line-height:1.25; margin:2em 0 .5em; letter-spacing:-.01em; }
.text p{ max-width:40em; }

/* ---------- Formular ---------- */
.zettel{ background:var(--papier); border-radius:var(--rund); overflow:hidden; box-shadow:0 40px 80px -50px rgba(16,17,19,.45); }
.zettel-kopf{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:22px clamp(20px,4vw,44px);
  border-bottom:1px solid var(--linie); font-size:.82rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--tinte-weich); }
.abschnitt{ padding:clamp(26px,4vw,44px) clamp(20px,4vw,44px); border-bottom:1px solid var(--linie); }
.abschnitt h2{ font-size:clamp(1.6rem,3.2vw,2.2rem); margin-bottom:.7em; }
.a-gelb{ background:var(--aprikose); } .a-gruen{ background:var(--nebel); }
.feld{ margin-bottom:24px; }
.feld:last-child{ margin-bottom:0; }
.feld > label,.feld legend{ display:block; font-weight:500; margin-bottom:8px; padding:0; }
.hilfe{ font-size:.92rem; color:var(--tinte-weich); margin:0 0 10px; max-width:38em; }
.feld input[type=text],.feld input[type=tel],.feld input[type=email],.feld input[type=number],.feld textarea{
  width:100%; font:inherit; color:var(--tinte); background:rgba(127,127,127,.1); border:1.5px solid transparent;
  border-radius:var(--rund-klein); padding:12px 16px; min-height:52px;
  transition:background-color var(--takt) ease,border-color var(--takt) ease; }
.feld textarea{ min-height:130px; resize:vertical; }
.feld input::placeholder,.feld textarea::placeholder{ color:var(--tinte-weich); }
.feld input:focus-visible,.feld textarea:focus-visible{ outline:none; border-color:var(--tinte); background:transparent; }
.feld input[type=file]{ font:inherit; font-size:.95rem; max-width:100%; color:var(--tinte-weich); }
.feld input[type=file]::file-selector-button{ font:inherit; font-weight:500; color:var(--tinte); background:transparent;
  border:1.5px solid var(--linie); border-radius:var(--rund-klein); min-height:48px; padding:0 18px; margin-right:14px; cursor:pointer;
  transition:background-color var(--takt) ease,color var(--takt) ease; }
@media (hover:hover) and (pointer:fine){ .feld input[type=file]::file-selector-button:hover{ background:var(--tinte); color:var(--papier); } }
.feld input[type=number]{ max-width:7em; font-size:1.3rem; font-weight:500; }
.feld-paar{ display:grid; gap:24px; } @media (min-width:700px){ .feld-paar{ grid-template-columns:1fr 1fr; } }
fieldset{ border:0; margin:0; padding:0; min-width:0; }
.wahl{ display:flex; flex-wrap:wrap; gap:8px; }
.wahl label{ display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:6px 18px 6px 12px; cursor:pointer;
  border:1.5px solid var(--linie); border-radius:var(--rund-klein); font-weight:500;
  transition:background-color var(--takt) ease,border-color var(--takt) ease; }
.wahl label:has(input:checked){ border-color:var(--tinte); background:rgba(127,127,127,.1); }
.wahl label:has(input:focus-visible){ outline:2.5px solid var(--akzent); outline-offset:3px; }
.wahl input{ position:absolute; opacity:0; width:1px; height:1px; }
.wahl .kasten{ width:1.3em; height:1.3em; border-radius:6px; }
.wahl small{ font-weight:400; color:var(--tinte-weich); }
.wahl-gross label{ flex:1 1 200px; font-size:1.15rem; min-height:68px; }
.fehlertext{ color:var(--fehler); font-weight:500; }
/* Abschnitte je Leistung: nur sichtbar, wenn die Leistung angekreuzt ist. */
.nur-auf,.nur-web,.nur-video{ display:none; }
.zettel:has(#l-auf:checked) .nur-auf,.zettel:has(#l-web:checked) .nur-web,.zettel:has(#l-video:checked) .nur-video{ display:block; }
.summe{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; padding:clamp(26px,4vw,44px) clamp(20px,4vw,44px); }
.summe-zahl{ font-size:3.2rem; font-weight:500; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }

/* ---------- Fuß ---------- */
.fuss{ margin:var(--aussen); border-radius:var(--rund); padding:clamp(48px,6vw,80px) 0 0; font-size:1rem; overflow:hidden; }
.fuss-raster{ display:grid; gap:36px; } @media (min-width:760px){ .fuss-raster{ grid-template-columns:2fr 1fr 1fr; } }
.fuss-marke{ font-weight:600; letter-spacing:.02em; text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:9px; }
.fuss-marke .logo{ height:26px; }
.fuss p{ color:var(--tinte-weich); }
.fuss nav{ display:flex; flex-direction:column; }
.fuss a{ text-decoration-thickness:1px; }
.fuss nav a{ text-decoration:none; min-height:40px; display:inline-flex; align-items:center; color:var(--tinte-weich); transition:color var(--takt) ease; }
@media (hover:hover) and (pointer:fine){ .fuss nav a:hover{ color:var(--tinte); } }
/* Die Wortmarke läuft unten aus dem Fuß heraus, wie oben auf der Startseite. */
.fuss-wort{ font-family:var(--schmal-schrift); font-weight:900; font-size:27.6vw; line-height:.74; text-transform:uppercase;
  text-align:center; white-space:nowrap; margin:clamp(40px,6vw,80px) 0 -.06em; user-select:none; }
.fuss .fuss-wort{ color:rgba(242,242,239,.1); }   /* schlägt .fuss p */
/* Unten steht der Schatten des Buchstabens, darüber liegt seine helle Kopie. Die Kopie füllt sich von unten
   nach oben, sobald die Wortmarke ins Bild kommt: das Wort baut sich auf. Oben auf der Startseite steigen die
   Buchstaben dagegen als Ganzes hoch. Ohne JavaScript steht die Wortmarke gleich hell da. */
.fuss-wort span{ position:relative; display:inline-block; }
.fuss-wort span::after{ content:attr(data-b); position:absolute; left:0; top:0; color:#F2F2EF; clip-path:inset(-20% 0 -20% 0); }
.fuss-wort .punkt{ display:inline-block; width:.125em; height:.125em; margin-left:.035em; background:var(--akzent); }

/* =========================================================
   BEWEGUNG. Ohne JavaScript ist alles sichtbar; erst die Klasse .js
   (kopf.js) erlaubt einen versteckten Ausgangszustand.
   ========================================================= */
.js [data-zeig] .zeilen > div::after{ transform:scaleX(0); transition:transform calc(var(--takt)*4) var(--aus); }
.js [data-zeig] .zeilen dd{ clip-path:inset(0 100% 0 0); transition:clip-path calc(var(--takt)*3) var(--aus); }
.js [data-zeig].da .zeilen > div::after{ transform:none; }
.js [data-zeig].da .zeilen dd{ clip-path:inset(-10% -5% -10% 0); }
.js [data-zeig] .zeilen > div:nth-child(2)::after,.js [data-zeig] .zeilen > div:nth-child(2) dd{ transition-delay:var(--takt); }
.js [data-zeig] .zeilen > div:nth-child(3)::after,.js [data-zeig] .zeilen > div:nth-child(3) dd{ transition-delay:calc(var(--takt)*2); }
.js [data-zeig] .zeilen > div:nth-child(4)::after,.js [data-zeig] .zeilen > div:nth-child(4) dd{ transition-delay:calc(var(--takt)*3); }

.js [data-zeig] .stempel{ opacity:0; transform:rotate(-4deg) scale(1.4); }
.js [data-zeig].da .stempel{ opacity:1; transform:rotate(-4deg) scale(1);
  transition:opacity var(--takt) ease-out calc(var(--takt)*3),transform calc(var(--takt)*1.5) var(--aus) calc(var(--takt)*3); }

/* Schritte haken sich nacheinander ab */
.js [data-zeig].abhaken .kasten{ background:transparent; }
.js [data-zeig].abhaken .kasten path{ stroke-dashoffset:40; }
.js [data-zeig].abhaken.da .kasten{ background:var(--tinte); }
.js [data-zeig].abhaken.da .kasten path{ stroke-dashoffset:0; }
.js [data-zeig].abhaken li:nth-child(2) .kasten,.js [data-zeig].abhaken li:nth-child(2) path{ transition-delay:calc(var(--takt)*2); }
.js [data-zeig].abhaken li:nth-child(3) .kasten,.js [data-zeig].abhaken li:nth-child(3) path{ transition-delay:calc(var(--takt)*4); }
.js [data-zeig].abhaken li:nth-child(4) .kasten,.js [data-zeig].abhaken li:nth-child(4) path{ transition-delay:calc(var(--takt)*6); }

/* Wortmarke im Fuß: Buchstabe für Buchstabe füllt sich von unten, mit einem kurzen Absacken wie ein Pegel.
   Zuletzt fällt das Quadrat auf die Grundlinie. */
.js .fuss-wort[data-zeig] span::after{ clip-path:inset(120% 0 -20% 0); }
.js .fuss-wort[data-zeig] .punkt{ opacity:0; transform:translateY(-320%); }
.js .fuss-wort[data-zeig].da span::after{ animation:aufbauen calc(var(--takt)*7) cubic-bezier(.65,0,.35,1) both; }
.js .fuss-wort[data-zeig].da span:nth-child(2)::after{ animation-delay:calc(var(--takt)*.5); }
.js .fuss-wort[data-zeig].da span:nth-child(3)::after{ animation-delay:calc(var(--takt)*1); }
.js .fuss-wort[data-zeig].da span:nth-child(4)::after{ animation-delay:calc(var(--takt)*1.5); }
.js .fuss-wort[data-zeig].da span:nth-child(5)::after{ animation-delay:calc(var(--takt)*2); }
.js .fuss-wort[data-zeig].da span:nth-child(6)::after{ animation-delay:calc(var(--takt)*2.5); }
.js .fuss-wort[data-zeig].da span:nth-child(7)::after{ animation-delay:calc(var(--takt)*3); }
.js .fuss-wort[data-zeig].da span:nth-child(8)::after{ animation-delay:calc(var(--takt)*3.5); }
.js .fuss-wort[data-zeig].da .punkt{ opacity:1; transform:none;
  transition:opacity var(--takt) ease-out calc(var(--takt)*9.5),transform calc(var(--takt)*3) var(--aus) calc(var(--takt)*9.5); }
@keyframes aufbauen{
  0%{ clip-path:inset(120% 0 -20% 0); }
  42%{ clip-path:inset(26% 0 -20% 0); }
  58%{ clip-path:inset(40% 0 -20% 0); }
  100%{ clip-path:inset(-20% 0 -20% 0); }
}

/* Stationen des Kreislaufs rücken nacheinander ein */
.js .kreislauf[data-zeig] li{ opacity:0; transform:translateY(24px) scale(.985);
  transition:opacity calc(var(--takt)*3) ease,transform calc(var(--takt)*4) var(--aus); }
.js .kreislauf[data-zeig].da li{ opacity:1; transform:none; }
.js .kreislauf[data-zeig] li:nth-child(2){ transition-delay:calc(var(--takt)*.75); }
.js .kreislauf[data-zeig] li:nth-child(3){ transition-delay:calc(var(--takt)*1.5); }
.js .kreislauf[data-zeig] li:nth-child(4){ transition-delay:calc(var(--takt)*2.25); }

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