/* TalentHook-Design – wie talenthook.de (Waldgrün, Papier, Haken-Grün nur als Akzent, Plus Jakarta Sans) */
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --forest: #0E2B23;
  --forest-2: #15392E;
  --paper: #EEF2EA;
  --tone: #E1E8DC;
  --kasten: #EEF3EA;
  --muted: #3B5148;
  --muted-light: #B9C8BF;
  --accent: #B8F25C;

  --farbe: var(--forest);
  --tinte: var(--forest);
  --leise: var(--muted);
  --linie: #CFD9CD;
  --flaeche: var(--tone);
  --weiss: #fff;
  --rund: 14px;
  --schatten: none;

  --step-small: .9375rem;
  --step-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --step-head: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
}

body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; background: var(--paper); color: var(--forest); font-size: var(--step-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.03em; }
h1 { font-size: var(--step-head); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.08; }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }

/* Kopfzeile: dunkles Band, Haken-Logo links (wie auf der Website) */
.kopf { max-width: none; margin: 0; padding: 22px clamp(20px, 4vw, 48px) 0; background: var(--forest); }
.marke img { height: 42px; }
.marke { gap: 10px; }
.marke-text { color: var(--paper); font-size: 34px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
@media (max-width: 640px) { .marke img { height: 34px; } .marke-text { font-size: 28px; } }
.marke { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .marke:hover { transform: translateY(3px); } }
.kopf :focus-visible { outline-color: var(--accent); }

/* Fortschritt: Haken-Grün auf dunklem Band */
.balken { background: rgba(238, 242, 234, .15); height: 4px; }

/* Startbereich dunkel wie der Hero der Website */
.start { background: var(--forest); color: var(--paper); padding-bottom: 24px; }
.start .seite { padding-top: clamp(24px, 6vh, 64px); padding-bottom: 56px; max-width: 820px; }
.start h1 { color: var(--paper); }
.start .oben { color: var(--muted-light); font-size: var(--step-small); font-weight: 600; }
.start-text { color: var(--muted-light); font-size: var(--step-lead); line-height: 1.45; max-width: 640px; margin: 18px auto 30px; }
.start-frage { margin-bottom: 0; }
.start .unterzeile { color: var(--muted-light); font-size: var(--step-small); margin-top: 18px; }
.start .unterzeile strong { color: var(--paper); }
.start .nein-text { color: var(--muted-light); }
.start :focus-visible { outline-color: var(--accent); }
.start .vertrauen { color: var(--muted-light); }
.start .stapel .kuerzel { background: var(--forest-2); color: var(--accent); border-color: var(--forest); }
.start .seite.start-zwei { max-width: 1160px; padding-bottom: 72px; }
.start h1 { font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; margin-bottom: 0; }
.start-zwei .start-text { max-width: 560px; }
.start .ja-nein { grid-template-columns: auto auto; justify-content: center; max-width: none; }
.start-zwei .ja-nein { justify-content: start; }
.start .ja-nein .knopf { white-space: nowrap; padding-left: 26px; padding-right: 26px; }
@media (max-width: 899px) { .start-zwei .ja-nein { justify-content: center; } }
@media (max-width: 640px) { .start .ja-nein { grid-template-columns: 1fr; } .start h1 { font-size: clamp(1.9rem, 9.2vw, 2.5rem); } }
.eingang { border-radius: 20px; }
.eingang-karte { background: var(--kasten); }
.eingang-kopf + .eingang-karte { background: #fff; }
.eingang-karte .kuerzel { background: var(--forest); color: var(--accent); }
.etikett { background: var(--tone); color: var(--muted); }

/* Fragen: Punkte, Sprechblase, Kacheln */
.punkte span { background: #CFD9CD; }
.punkte .fertig { background: var(--forest); }
.blase { border-color: var(--linie); }
.kacheln .karte-wahl { background: var(--weiss); }
.icon-linie { background: var(--kasten); color: var(--forest); }

/* Kontakt + Danke */
.kontakt-zwei .formular, .angaben, .kontakt-seite .team { box-shadow: 0 1px 0 rgba(14, 43, 35, .04); }
.kontakt-seite .team { background: var(--forest); color: var(--paper); }
.kontakt-seite .team h3 { color: var(--paper); }
.kontakt-seite .team p { color: var(--muted-light); font-size: 15px; line-height: 1.5; }
.kontakt-seite .team h3 { font-size: 17px; margin: 6px 0 4px; }
.angaben dt { margin-top: 4px; }
.kontakt-seite .team a { color: var(--accent); }
.kontakt-seite .team .kuerzel { background: var(--accent); color: var(--forest); }
.danke-schritte .nr { border-color: #CFD9CD; }
.danke-schritte li:not(:last-child)::after { background: #CFD9CD; }

/* Knöpfe: eine Form wie auf der Website – Haken-Grün, dunkle Schrift, leicht rund */
.knopf { background: var(--accent); color: var(--forest); border-radius: 10px; box-shadow: none; min-height: 56px; font-weight: 700; transition: transform .18s cubic-bezier(.2,.7,.2,1), background-color .18s; }
@media (hover: hover) { .knopf:hover { background: #C9F77E; transform: none; } }
.knopf:active { transform: scale(.97); }
.knopf small { color: var(--forest); opacity: .75; }
.knopf-leise { background: transparent; color: var(--forest); border: 1.5px solid var(--forest); }
.start .knopf-leise { color: var(--paper); border-color: rgba(238, 242, 234, .45); }
@media (hover: hover) { .knopf-leise:hover { background: rgba(184, 242, 92, .14); } .start .knopf-leise:hover { background: rgba(238, 242, 234, .08); border-color: var(--paper); } }
.knopf.blass { opacity: .55; }

/* Abschnitte im Wechsel Papier / Ton */
.abschnitt { padding: clamp(48px, 7vw, 88px) 20px; }
.abschnitt:nth-of-type(even) { background: var(--paper); }
.abschnitt:nth-of-type(odd) { background: var(--tone); }
.abschnitt-text { color: var(--muted); font-size: var(--step-lead); line-height: 1.45; margin-top: 12px; }

.schritte li, .info-karte, .liste li { background: var(--weiss); border: 0; border-radius: var(--rund); }
.schritte li { padding: 20px 22px; }
.schritte h3, .info-karte h3 { font-size: var(--step-lead); letter-spacing: -.02em; }
.schritte p, .info-karte p { color: var(--muted); }
.schritte .nr, .kuerzel { background: var(--forest); color: var(--accent); }
.liste { max-width: 680px; }
.liste li { padding: 16px 18px 16px 52px; }
.liste li::before { background: var(--forest); color: var(--accent); top: 17px; left: 16px; }
.raster { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.raster .info-karte { text-align: center; padding: 26px 20px 24px; }
.info-karte .karte-zahl { color: var(--forest); }
.kopfbild .kuerzel.foto { border: 3px solid var(--accent); }
.bildschritte h3 { letter-spacing: -.02em; }
.bildschritte p, .liste-icons small { color: var(--muted); }
.post-knopf { background: var(--forest); }
.handy { background: #081812; }
.handy-insel { background: #081812; }
.start .bild-unterschrift { color: var(--muted-light); opacity: 1; }
.berater .kuerzel.foto, .kontakt-seite .team .kuerzel.foto { border: 2px solid var(--accent); }

/* Fragen */
.schritt { color: var(--muted); font-weight: 600; font-size: var(--step-small); }
.seite > h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.karte-wahl { border: 1.5px solid var(--linie); border-radius: var(--rund); box-shadow: none; min-height: 64px; font-size: var(--step-body); }
@media (hover: hover) { .karte-wahl:hover { border-color: var(--forest); background: var(--kasten); } }
.karte-wahl .kreis { border-color: #A9B8AE; }
.karte-wahl[aria-pressed="true"], .karte-wahl[aria-checked="true"] { border-color: var(--forest); background: var(--kasten); box-shadow: inset 0 0 0 1px var(--forest); }
.karte-wahl[aria-pressed="true"] .kreis, .karte-wahl[aria-checked="true"] .kreis { background: var(--forest); border-color: var(--forest); color: var(--accent); }

/* Formular */
textarea, input[type=text], input[type=email], input[type=tel] { border: 1.5px solid var(--linie); border-radius: 10px; background: var(--weiss); color: var(--forest); }
textarea:focus, input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(184, 242, 92, .55); }
.formular label.feld { color: var(--muted); font-weight: 600; }
.tel .vorwahl { background: var(--kasten); border-color: var(--linie); border-radius: 10px; }
.zustimmung input { accent-color: var(--forest); }
.team { background: var(--weiss); border-radius: var(--rund); }
.team a { color: var(--forest); }
.zurueck { color: var(--muted); }

/* Danke-Seite: Haken-Kreis */
.grosses-icon { width: 72px; height: 72px; margin: 8px auto 18px; border-radius: 50%; background: var(--accent); color: var(--forest); display: grid; place-items: center; font-size: 34px; font-weight: 800; }
.danke-tel a { color: var(--forest); font-weight: 700; }

/* Fuß: dunkel mit Schriftzug und kleinem Haken-Logo (wie auf der Website) */
.fuss { background: var(--forest); color: var(--muted-light); padding: 40px 20px 44px; }
.fuss-marke { color: var(--paper); font-size: 40px; letter-spacing: -.06em; }
.fuss-marke img { height: 40px; }
.fuss a, .fuss button { color: var(--muted-light); }
.fuss :focus-visible { outline-color: var(--accent); }

/* Cookie-Hinweis */
.cookie-box { border-radius: 14px; }
.cookie-box .knopf-leise { color: var(--forest); border-color: var(--forest); }