/* CLUNIQ Marketing — gemeinsames Design-System (alle Seiten).
   Schriften lokal (DSGVO), Farbwelt wie App: Grün auf Creme. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-sans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-sans-500.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/dm-sans-600.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/dm-sans-700.woff2') format('woff2')}

/* Die Farbwelt der Marke ist und bleibt GRÜN.

   Am 09.09.2026 hatte ich sie auf Petrol/Navy gezogen, weil die neuen Logos
   einen petrolfarbenen Anteil haben. Das war meine Entscheidung, nicht die
   gewünschte — Julian hat sie zurückgenommen. Die Werte hier sind wieder die
   von vorher, Zeichen für Zeichen.

   Was aus dem Logo NICHT in die Palette wandert: Petrol #036c72 und Limette
   #84bb22 leben in der Zeichnung. Die Fläche darum herum ist grün. */
:root{
  --green-950:#0c1a0e;--green-900:#012d18;--green-800:#006837;--green-700:#0a7f46;
  --green-500:#4eb054;--green-400:#52cc5a;
  --green-soft:#e4f2e7;--green-mist:#f0f7f1;
  --ink:#15231b;--ink-soft:#46544b;--ink-faint:#6b7a70;
  --cream:#fbfaf6;--card:#ffffff;--line:#e7e3d8;
  --radius:18px;--shadow:0 10px 30px rgba(1,45,24,.07);
  /* Die rollende Navigation gleicht dieses Polster negativ aus, damit
     sie bis an den Bildschirmrand laeuft statt in der Spalte zu enden. */
  --wrap-polster:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
/* Die Seite ehrt den Wunsch nach weniger Bewegung beim Film und beim
   Aufblenden — und liess ihn ausgerechnet bei der einen Bewegung fallen, der
   niemand ausweichen kann: Ein Sprung auf #warteliste faehrt ueber 6000 px. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--green-800);text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--wrap-polster)}

/* ── Ökosystem-Leiste ────────────────────────────────────
   Vorher führte auf den Manager-Seiten NICHTS zurück zur Startseite —
   die Marke zeigte auf /manager/. Man saß im Silo, was das Gegenteil
   dessen ist, was die Seite behauptet.

   Die Leiste steht über jeder Seite, trägt alle fünf Sparten, markiert
   die aktuelle und sagt, welche noch nicht laufen. Damit ist das
   Ökosystem auf jeder Seite eine Tatsache und keine Überschrift.

   DUNKEL SEIT DEM 10.09.2026 — und wieder ist der Grund gemessen, nicht
   Geschmack.

   Am 09.09. wurde die Kopfzeile HELL gemacht, damit die farbige Marke dort
   stehen kann: Ihr Wortverlauf beginnt bei #0d2131 und sinkt auf dunklem
   Grund ein (1,18:1 gegen #080f08 — unsichtbar). Das war richtig gerechnet
   und trotzdem die falsche Entscheidung, weil es die Frage vom Kopf her
   löste statt von der Fläche.

   Was dabei entstand: Ökosystem-Leiste #f0f7f1 über Kopfzeile #fbfaf6 über
   Seitengrund #fbfaf6. Zwei Bänder, die sich um 1,04:1 unterscheiden — das
   Auge trennt ab etwa 1,2. Dazu zweimal «CLUNIQ» auf 110 px, zwei
   Navigationsleisten und zwei aktive Pillen. Gemeldet als «nicht
   harmonisch», und das war es auch.

   Jetzt ist der Kopf ein dunkler Block, und die Marke steht dort WEISS
   (19,4:1). Die farbige Fassung verschwindet nicht: Sie steht im
   Fussbereich, der auf allen Unterseiten hell ist (#f7f5ef). Damit gilt
   endlich die Regel aus DESIGN.md, wie sie gemeint war — farbig auf hell,
   weiss auf dunkel — statt der Fläche einen Grund vorzuschreiben. */
.oeko-leiste{background:#050b05;color:rgba(238,242,238,.55);
  font-size:13px;position:relative;z-index:60;
  border-bottom:1px solid rgba(223,233,225,.09)}
.oeko-leiste .wrap{display:flex;align-items:center;gap:18px;min-height:38px}
.ol-heim{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  color:rgba(238,242,238,.62);font-weight:600;letter-spacing:.01em;
  padding:6px 0;transition:color .15s}
.ol-heim img{width:34px;height:18px}
.ol-heim:hover{color:var(--green-800)}
.ol-sparten{display:flex;align-items:center;gap:2px;margin-left:auto;
  overflow-x:auto;scrollbar-width:none}
.ol-sparten::-webkit-scrollbar{display:none}
.ol-sparten a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:7px 11px;border-radius:8px;color:rgba(238,242,238,.55);
  font-weight:400;transition:color .15s,background .15s}
.ol-sparten a:hover{color:#fff;background:rgba(255,255,255,.07)}
/* KEINE zweite Pille. Der Kopf hatte zwei aktive Markierungen übereinander,
   40 px auseinander — dasselbe Mittel für zwei verschiedene Ränge. Die
   Leiste markiert mit Punkt und Helligkeit, die Pille bleibt der Kopfzeile. */
.ol-sparten a.aktiv{color:#fff;font-weight:500;background:transparent}
.ol-sparten a.aktiv::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--green-400);flex-shrink:0}
.oeko-leiste :focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
@media(max-width:900px){
  .oeko-leiste .wrap{gap:10px}
  /* Nur optisch weg, nicht aus dem Zugaenglichkeitsbaum: sonst ist der
     erste Link der Seite namenlos. Absolut positioniert ist der span
     kein Flex-Element mehr, das gap der Leiste greift also nicht. */
  .ol-heim span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .ol-sparten{margin-left:0}
  .ol-sparten a{padding:7px 9px}
}

/* Nur fuer Vorleseprogramme.
 *
 * `display:none` und `visibility:hidden` nehmen den Text auch aus dem
 * Zugaenglichkeitsbaum — dann liest ihn niemand. Diese Fassung laesst ihn
 * dort stehen und nimmt ihm nur die Flaeche. `white-space:nowrap` verhindert,
 * dass ein Umbruch im 1px-Kasten Woerter zusammenzieht.
 *
 * Bis zum 10.09.2026 gab es die Klasse nur im Stilblock von web/index.html.
 * Wer sie auf einer Unterseite benutzte, bekam den Text sichtbar. */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Header & Navigation ─────────────────────────────── */
/* Auf dem dunklen Kopf ist es umgekehrt als auf Creme: --green-700 trägt
   dort nur 2,3:1, --green-400 dagegen 7,6:1. */
header.site :focus-visible,.oeko-leiste :focus-visible{outline:2px solid var(--green-400);outline-offset:3px}
header.site{position:sticky;top:0;z-index:50;background:rgba(12,26,14,.95);
  backdrop-filter:blur(12px);border-bottom:0}
.nav{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em;color:#fff}
.brand svg{width:32px;height:31px}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links>div,.nav-links>a{position:relative}
.nav-links a.top,.nav-links button.top{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border:0;background:none;font:inherit;font-weight:500;font-size:15px;color:rgba(238,242,238,.68);border-radius:10px;cursor:pointer}
.nav-links a.top:hover,.nav-links button.top:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-links a.top.aktiv{color:#0c1a0e;font-weight:600;background:#fff}
.caret{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.drop{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px rgba(1,45,24,.13);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.15s ease}
.hat-drop:hover .drop,.hat-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 12px;border-radius:10px}
.drop a:hover{background:var(--green-mist)}
.drop b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.drop span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.4}

/* DER KNOPF IM KOPF IST NICHT DER KNOPF DER SEITE.
 *
 * `.btn` traegt 13/24 bei 15,5px — gemessen 54 px hoch. In einer 70-px-Kopfzeile
 * sind das 77 % der Bandhoehe und 11 px mehr als jeder Menueeintrag (43 px).
 * Daneben stand «Anmelden» als 25 px hoher Text ohne Polsterung: ein Kloetzchen
 * neben einem Strich, statt zweier Wege nebeneinander.
 *
 * Jetzt tragen beide dieselbe Hoehe wie die Navigation: 43 px. Der Rang bleibt
 * trotzdem eindeutig — der eine ist gefuellt, der andere nicht.
 *
 * 8px Polsterung und nicht 11: `.btn` setzt KEINE eigene Zeilenhoehe und erbt
 * die 1,6 des Fliesstexts, also 24 px statt der erwarteten 18. Mit 11 kam der
 * Knopf auf 49. Nachgemessen, nicht nachgerechnet — die Rechnung war falsch.
 *
 * «Anmelden» bekommt Polsterung, obwohl man sie nicht sieht: Sie macht aus
 * einem 72x25-Ziel ein 84x43-Ziel. Auf dem Telefon ist das der Unterschied
 * zwischen treffen und danebentippen. */
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:8px}
header.site .nav-cta .btn{padding:8px 20px;font-size:15px}
.nav-cta .login{font-weight:500;font-size:15px;color:rgba(238,242,238,.68);
  white-space:nowrap;padding:9px 12px;border-radius:999px;transition:color .15s,background .15s}
.nav-cta .login:hover{color:#fff;background:rgba(255,255,255,.11)}
/* DESIGN.md: gefüllt --green-800 mit Weiss; auf dunklem Grund umgekehrt.
   Ein grüner Knopf im dunklen Kopf stritte auf der Startseite mit dem
   grünen «VON EINEM ANBIETER» direkt darunter. */
.nav-cta .btn-primary{background:#fff;color:#0c1a0e;border-color:#fff}
.nav-cta .btn-primary:hover{background:var(--green-soft);border-color:var(--green-soft);transform:translateY(-1px)}

/* Nav kompakter auf schmalen Desktops/Tablets — sonst läuft der CTA rechts raus */
@media(max-width:1080px){
  .nav{gap:14px}
  .nav-links{gap:0;margin-left:0}
  .nav-links a.top,.nav-links button.top{padding:8px 9px;font-size:14px}
  .nav-cta{gap:10px}
  header.site .nav-cta .btn{padding:9px 16px;font-size:14px}
  .nav-cta .login{padding:8px 10px;font-size:14px}
}
@media(max-width:880px){
  /* „Anmelden" bleibt stehen. Ausgeblendet gab es bei 320px gar keinen Weg
     mehr zur Anmeldung — gemessen passt die Zeile dort ohne Ueberlauf. */
  .brand{font-size:18px}
}

/* Die Unternavigation bekommt eine eigene Zeile, statt zu verschwinden.
 *
 * Bis zum 10.09.2026 stand hier `.nav-links{display:none}` ab 640px. Auf dem
 * Telefon war die Unternavigation damit gar nicht erreichbar — wer auf einer
 * Sparten-Unterseite stand, kam nur ueber den Fussbereich weiter. Aufgefallen
 * ist es, als Teamwear einen sechsten Eintrag bekam und die Zeile schon bei
 * 900px ueberlief.
 *
 * ERSTER VERSUCH, VERWORFEN: die Navigation in derselben Zeile schrumpfen und
 * rollen zu lassen. Gemessen ergab das 4px Ueberlauf auf /social/,
 * /legendwall/ und /web/ — die drei Seiten loesen dasselbe Problem naemlich
 * seit jeher selbst, mit `order:3;width:100%`, und meine Regel kaempfte
 * dagegen. Uebernommen wird deshalb IHR Muster, und ihre eigenen Bloecke
 * fallen weg: ein Mechanismus statt zweier, die sich widersprechen.
 *
 * Die negativen Seitenraender lassen die Zeile bis an den Bildschirmrand
 * rollen; ohne sie endete sie mitten im Nichts der Textspalte. */
@media(max-width:900px){
  .nav{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:2px}
  .brand,.nav-cta{flex:0 0 auto}
  .nav-links{order:3;width:100%;gap:2px;margin:2px calc(-1 * var(--wrap-polster)) 0;
    padding:0 var(--wrap-polster) 8px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a.top,.nav-links button.top{white-space:nowrap;font-size:14px;padding:8px 11px}
}
/* Unter 560px passen Marke und Knopf nicht mehr nebeneinander.
 *
 * Gemessen am 10.09.2026: Bei 390px lief die Kopfzeile um 13px ueber, bei
 * 320px um 83px — und zwar schon VOR dem sechsten Navigationseintrag. Die
 * Ursache liegt nicht in der Navigation, die sich auf 0 schrumpfen laesst,
 * sondern in den beiden festen Bloecken links und rechts: Die Marke ist ein
 * Bild mit 201x44, der Knopf traegt achtzehn Zeichen.
 *
 * Beides wird kleiner, statt eines von beiden zu verstecken. Rechnung fuer
 * 320px: 288px nutzbar (Polster 16), Marke 128, Abstand 8, Knopf 136. */
@media(max-width:560px){
  :root{--wrap-polster:18px}
  .brand img{height:30px;width:auto}
  .nav{gap:8px}
  header.site .nav-cta .btn{padding:8px 13px;font-size:13px}
  .nav-cta .login{padding:7px 8px;font-size:13px}
}
@media(max-width:360px){
  .brand img{height:26px}
  header.site .nav-cta .btn{padding:7px 11px;font-size:12.5px}
  .nav-cta .login{padding:6px 6px;font-size:12.5px}
}


/* ── Buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:600;font-size:15.5px;border:1.5px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--green-800);color:#fff}
.btn-primary:hover{background:var(--green-900);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--card)}
.btn-ghost:hover{border-color:var(--green-500);color:var(--green-800)}
.btn-gross{padding:16px 30px;font-size:16.5px}

/* ── Hero ────────────────────────────────────────────── */
.hero{padding:84px 0 64px;background:
  radial-gradient(820px 460px at 86% -6%, var(--green-soft) 0%, rgba(228,242,231,0) 62%),
  radial-gradient(640px 380px at -6% 108%, var(--green-mist) 0%, rgba(240,247,241,0) 55%)}
/* `text-wrap:balance` verteilt die Zeilen gleichmaessig, statt die letzte
   mit einem Wort stehen zu lassen. Gemessen am 10.09.2026: «Dein Verein.
   Dein Look.» brach in der halben Heldenspalte nach dem zweiten «Dein»
   um — mitten in einem Satzpaar, das zusammengehoert. Der Schlussblock
   hatte die Regel laengst; die Ueberschrift der Seite nicht. */
h1{font-size:clamp(38px,5.2vw,62px);line-height:1.05;letter-spacing:-.035em;
  font-weight:700;text-wrap:balance}
h1 em{font-style:normal;color:var(--green-800)}
.lead{margin-top:22px;font-size:18.5px;color:var(--ink-soft);max-width:560px}
.hero-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-hint{margin-top:14px;font-size:13.5px;color:var(--ink-soft)}
/* Zentrierter Hero + großes, gerahmtes Produktbild (Screenshots gut lesbar) */
.hero-mitte{max-width:820px;margin:0 auto;text-align:center}
.hero-mitte .lead{margin-left:auto;margin-right:auto}
.hero-mitte .hero-cta{justify-content:center}
/* Hero-Split: Text links, Bildschirm rechts (Bildspalte etwas breiter) */
.split-hero{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center}
@media(max-width:900px){.split-hero{grid-template-columns:1fr;gap:34px}}
.produktbild{margin:0;perspective:1600px}
@media(max-width:900px){.produktbild{margin-top:8px}}
/* „Bildschirm": Browser-Fenster-Rahmen mit Adresszeile, leicht nach links gekippt */
.geraet{border-radius:12px;overflow:hidden;background:#fff;border:1px solid #dcd8cc;transform:rotateY(-8deg) rotateX(2deg);transform-origin:center;box-shadow:0 24px 48px -20px rgba(21,35,27,.28),0 70px 100px -60px rgba(21,35,27,.16)}
.geraet-leiste{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#f4f2ec;border-bottom:1px solid var(--line)}
.geraet-punkt{width:10px;height:10px;border-radius:99px;flex-shrink:0}
.geraet-punkt:nth-child(1){background:#e8a59e}
.geraet-punkt:nth-child(2){background:#ecd3a2}
.geraet-punkt:nth-child(3){background:#b5d4ae}
.geraet-url{margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:99px;font-size:12px;line-height:1;color:var(--ink-faint);padding:5px 16px}
.geraet-ausgleich{width:44px;flex-shrink:0}
.geraet img{display:block;width:100%;height:auto}
@media(max-width:640px){.produktbild{margin-top:36px}}

/* ── Was der Browser sonst selbst einfärbt ──────────────────────────
   Textmarkierung, Cursor, Rollbalken, Fokusring und der Abstand unter
   Verweisen kommen ab Werk in Systemfarben, die zu keiner Marke gehören.
   Sie kosten sieben Regeln und sind das billigste Zeichen dafür, dass eine
   Seite gebaut und nicht zusammengesetzt wurde. */
::selection{background:var(--green-soft);color:var(--green-900)}
html{caret-color:var(--green-800);scrollbar-color:var(--green-500) var(--green-mist)}
/* Auf der Startseite ist der Grund zu zwei Dritteln fast schwarz; eine
   minzfarbene Bahn daneben ist der auffaelligste ungewollte Streifen des
   Auftritts — und er begleitet alle 6000 px. */
body.dunkel{scrollbar-color:var(--green-700) var(--green-950)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--green-mist)}
body.dunkel ::-webkit-scrollbar-track{background:var(--green-950)}
::-webkit-scrollbar-thumb{background:var(--green-500);border-radius:999px;
  border:3px solid var(--green-mist)}
::-webkit-scrollbar-thumb:hover{background:var(--green-700)}

/* Sichtbarer Fokus für die Tastatur — im ganzen Stylesheet gab es bisher
   keine einzige Regel dafür, auf zwei Dutzend Seiten. */
:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
.btn:focus-visible{outline-offset:4px}

/* Unterstriche im Fließtext sitzen zu dicht an der Grundlinie. */
p a,li a{text-underline-offset:.18em;text-decoration-thickness:1px}

/* ── Sektionen ───────────────────────────────────────── */
section{padding:72px 0}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head.mittig{margin-left:auto;margin-right:auto;text-align:center}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.03em;font-weight:700}
.sub{margin-top:14px;font-size:16.5px;color:var(--ink-soft)}
h3{font-size:19px;font-weight:700;letter-spacing:-.015em}

/* ── Karten & Grids ──────────────────────────────────── */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.15s}
a.card:hover{border-color:var(--green-500);box-shadow:var(--shadow);transform:translateY(-2px)}
.card .icon{width:44px;height:44px;border-radius:12px;background:var(--green-mist);color:var(--green-800);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:21px}
.card p{margin-top:8px;font-size:14.5px;color:var(--ink-soft)}
.card .mehr{display:inline-block;margin-top:14px;font-weight:600;font-size:14px}

/* ── Checkliste ──────────────────────────────────────── */
.checks{list-style:none;display:grid;gap:12px}
.checks li{position:relative;padding-left:30px;font-size:15.5px;color:var(--ink-soft)}
.checks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:6px;background:var(--green-soft)}
.checks li::after{content:"";position:absolute;left:5px;top:8px;width:8px;height:5px;border-left:2px solid var(--green-800);border-bottom:2px solid var(--green-800);transform:rotate(-45deg)}
.checks b{color:var(--ink)}

/* ── Split (Text + Visual) ───────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.visual{background:linear-gradient(160deg,var(--green-mist),#fff 70%);border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow)}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin:5px 4px}

/* ── Band (Trust/Badges) ─────────────────────────────── */
.band{background:#f5f3ec;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.band .wrap{display:flex;gap:10px 12px;flex-wrap:wrap;justify-content:center}
/* Pille wie die Vertrauensabzeichen im Login — dort Haarlinie auf Dunkel,
   hier dieselbe Form auf Creme. */
.band .wrap > span{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  font-size:14px;font-weight:600;color:var(--ink-soft)}
/* Ring-Punkt wie die Merkmalsliste im Login: dort dunkler Ring mit hellem
   Kern, hier heller Ring mit dunklem Kern — dieselbe Form, umgekehrter Grund. */
.band .dot{width:16px;height:16px;border-radius:999px;flex-shrink:0;
  background:var(--green-mist);border:1px solid var(--green-500);
  display:inline-flex;align-items:center;justify-content:center}
.band .dot::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--green-800)}

/* ── Schritte ────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--green-700)}
.step h3{margin-top:10px}
.step p{margin-top:8px;font-size:14.5px;color:var(--ink-soft)}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 20px}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:10px;font-size:22px;color:var(--green-700);font-weight:500}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 16px;font-size:15px;color:var(--ink-soft)}

/* ── Dunkle Fläche ───────────────────────────────────────
   Übernommen aus der Marken-Fläche des Logins (app/layouts/auth.vue):
   Grund #0c1a0e, ein Punktraster in 24px, zwei weiche grüne Lichter.
   Wer auf „Anmelden" klickt, landet damit im selben Raum. */
.dunkel,.final{position:relative;background:var(--green-950);color:#fff}
.dunkel::before,.final::before{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  border-radius:inherit;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:24px 24px}
.dunkel::after,.final::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(620px 620px at 104% -14%, rgba(45,112,51,.42) 0%, rgba(45,112,51,0) 62%),
    radial-gradient(430px 430px at -12% 112%, rgba(0,104,55,.30) 0%, rgba(0,104,55,0) 64%)}
.dunkel > *,.final > *{position:relative;z-index:1}

/* ── Abschluss-CTA ───────────────────────────────────── */
.final{border-radius:26px;padding:60px 48px;text-align:center}
/* Ruhige Stimme statt lauter: Der Login setzt seine Aussage in Stärke 400.
   Der Nachdruck steckt in der Schaltfläche, nicht in der Überschrift. */
.final h2{color:#fff;font-weight:400;font-size:clamp(28px,4vw,48px);
  line-height:1.15;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
.final h2 em{font-style:normal;color:var(--green-400)}
.final p{margin:16px auto 30px;color:rgba(255,255,255,.72);font-size:17px;
  font-weight:500;max-width:520px}
.final .taten{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.final .btn-primary{background:#fff;color:var(--green-900);border-color:#fff}
.final .btn-primary:hover{background:var(--green-soft);border-color:var(--green-soft)}
/* Auf Dunkel wäre die helle Geister-Schaltfläche ein zweiter Block. Sie nimmt
   die Haarlinien-Pille der Vertrauensabzeichen im Login. */
.final .btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#fff}
.final .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
/* Auf schmalen Schirmen ist eine Pille breiter als der Kasten kein Knopf
   mehr, sondern ein Überlauf. Sie darf dort umbrechen.
   Seit dem 10.09.2026 gilt das nicht nur im Schlussblock: «Ausrüster-Vertrag
   anfragen →» ist 303px breit und stand bei 320px um 1px über. Ein Knopf, der
   ueber den Rand haengt, macht die ganze Seite waagerecht rollbar. */
@media(max-width:640px){
  .final{padding:44px 20px}
  .final .btn,.hero-cta .btn{white-space:normal;max-width:100%;text-align:center}
}

/* ── Footer ──────────────────────────────────────────── */
footer.site{border-top:1px solid var(--line);background:#f7f5ef;margin-top:40px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding:52px 0 40px}
@media(max-width:900px){.foot{grid-template-columns:1fr 1fr}}
.foot h4{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.foot a{display:block;padding:4px 0;font-size:14.5px;color:var(--ink-soft)}
.foot a:hover{color:var(--green-800)}
.foot .ueber{font-size:14.5px;color:var(--ink-soft);max-width:280px;margin-top:12px}
.foot-unten a{color:var(--ink-soft);margin-left:18px}
.foot-unten a:first-of-type{margin-left:0}
.foot-unten{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft)}

/* ── Reveal-Animationen ──────────────────────────────────
   Das Verbergen haengt an html.js. Wer die Klasse nicht bekommt — kein
   JavaScript, kein IntersectionObserver — sieht die Seite vollstaendig,
   statt auf leere Kaesten zu schauen. Die Folgeregeln muessen die
   Spezifitaet von „html.js .reveal" mitgehen, sonst gewinnen sie nicht. */
html.js .reveal{opacity:0;transform:translateY(16px);transition:.5s ease}
html.js .reveal.reveal-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* ── Warteliste ────────────────────────────────────────────────────────────
   Der eine Aufruf des Vor-Start-Auftritts. Steht am Ende jeder Seite und
   ersetzt «Kostenlos testen» — es gibt noch nichts zu testen.

   Ein dunkelgruenes Band, kein weiterer Kasten auf Creme: Die Seiten enden
   sonst leise, und der Besucher soll an genau einer Stelle merken, dass hier
   etwas von ihm gewollt ist. Weiss auf --green-900 traegt 15:1. */
.wl{background:var(--green-900);color:#fff;padding:72px 0}
.wl-innen{max-width:680px;margin:0 auto;text-align:center}
.wl h2{color:#fff}
.wl-sub{margin-top:16px;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.78)}

/* Die Karte traegt Formularinhalt und damit die Farbwelt der App, nicht die
   des Bandes — Eingabefelder auf dunklem Grund lesen sich schlechter, und die
   Fehlerfarben sind auf Weiss abgestimmt. */
.wl-karte{margin-top:34px;background:var(--card);border-radius:var(--radius);
  padding:28px;text-align:left;box-shadow:0 18px 44px rgba(0,0,0,.22)}
@media(max-width:560px){.wl{padding:56px 0}.wl-karte{padding:22px 18px}}

/* Der Hinweis erscheint nur, wenn kein Skript laeuft — dann ist er der
   einzige Weg, der von hier aus noch funktioniert. */
.wl-ohne-js{margin:0 0 18px;padding:14px 16px;border-radius:12px;text-align:left;
  background:var(--green-mist);border:1px solid var(--line);
  font-size:15px;line-height:1.55;color:var(--ink-soft)}
.wl-ohne-js a{color:var(--green-800);font-weight:600;text-decoration:underline;
  text-underline-offset:.2em}
.wl-zeile{display:flex;gap:12px;flex-wrap:wrap}
.wl-zeile>*{flex:1 1 220px;min-width:0}
.wl-feld{margin-bottom:14px}
.wl-feld>label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.wl-feld .optional{font-weight:400;color:var(--ink-faint)}
.wl-feld input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;font:inherit;font-size:15.5px;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s}
.wl-feld input::placeholder{color:var(--ink-faint)}
.wl-feld input:focus-visible{border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-soft)}
.wl-feld input.invalid{border-color:#cf4534}
.wl-fehler{margin-top:6px;font-size:13px;color:#b3261e}
.wl-fehler:empty{display:none}

/* Die Einwilligung ist Pflicht, also steht sie da wie eine — nicht als
   Kleingedrucktes unter dem Knopf. */
.wl-ok{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;
  font-size:14px;line-height:1.5;color:var(--ink-soft)}
.wl-ok input{flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:var(--green-800)}
.wl-ok input:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.wl-ok a{color:var(--green-800);text-decoration:underline;text-underline-offset:2px}

.wl-karte .btn{width:100%;justify-content:center}
.wl-karte .btn[disabled]{opacity:.6;pointer-events:none}
.wl-kasten{margin-bottom:14px;background:#fdecea;border:1px solid #f2c4bd;color:#8a2018;
  border-radius:12px;padding:11px 14px;font-size:14px}
.wl-hinweis{margin-top:12px;font-size:13px;color:var(--ink-faint);text-align:center}

/* Der Erfolgszustand ersetzt das Formular, statt darunter zu erscheinen:
   Sonst steht ein ausgefuelltes Formular neben der Bestaetigung, und man
   fragt sich, ob es geklappt hat. */
.wl-fertig{text-align:center;padding:8px 0}
.wl-fertig .haken{width:46px;height:46px;margin:0 auto 14px;border-radius:999px;
  background:var(--green-soft);color:var(--green-800);display:flex;align-items:center;
  justify-content:center;font-size:24px;font-weight:700;line-height:1}
.wl-fertig h3{font-size:20px;letter-spacing:-.01em}
.wl-fertig p{margin-top:8px;font-size:15px;color:var(--ink-soft)}

/* Der Honigtopf. Aus dem Blickfeld, aber nicht `display:none` — manche Bots
   fuellen nur, was gerendert ist, und genau die sollen hier hineinlaufen.
   `aria-hidden` und `tabindex="-1"` halten Vorlesesoftware und Tastatur davon
   fern; wer das Feld ausfuellt, war keiner von beiden. */
.wl-topf{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}