/* TRYSEO Web-Styleguide v1.0 – Farben, Typografie, Buttons, Karten, Tabellen */
:root {
  --honey: #fcb02f;      /* Primär: Buttons, Links, Karten, letzte Section */
  --honey-hover: #e3a02a;
  --dune: #e4dccf;       /* Sekundär: Service-Karten, Tabellenkontur */
  --snow: #f6f6f6;       /* Pastell: Sektionshintergrund */
  --snow-dark: #f7f5f0;  /* Tabellenkopf */
  --grey: #666666;       /* Fließtext, Eyebrows, Zusatzinfos */
  --line: #d9d9d9;
  --black: #000000;      /* Überschriften, Navigation, Footer, Button-Kontur */
  --white: #ffffff;
  --red: #c1121f;
  --green: #006400;
  --head: "Inter", "Helvetica Neue", Arial, sans-serif;
  --body: "Roboto Flex", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
  --measure: 40rem;
  --pad: clamp(20px, 4vw, 40px);
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 5rem); }
body { margin: 0; background: var(--white); color: var(--grey); font-family: var(--body); font-weight: 500; font-size: 1rem; line-height: 1.8; font-feature-settings: "tnum"; }
a { color: var(--black); text-decoration: underline; text-decoration-color: var(--honey); text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--black); text-decoration-color: var(--black); }

h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; color: var(--black); margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.375rem, 5vw, 4.5rem); line-height: 1.2; max-width: 24ch; }
h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.2; }
h3 { font-size: clamp(1.625rem, 2.5vw, 2.25rem); line-height: 1.35; margin-top: 3rem; }
h4 { font-size: 1.5rem; line-height: 1.4; }
p { margin: 0 0 1rem; max-width: var(--measure); }
strong { color: var(--black); font-weight: 700; }
.lede { font-size: 1.125rem; }
.muted, .help, .note, .hint { font-size: .9375rem; }
.eyebrow { font-family: var(--head); font-weight: 700; font-size: 1rem; line-height: 1.8; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin: 0 0 .5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Navigation (schwarz, sticky) */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--black); color: var(--white); display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 clamp(1rem, 4vw, 3rem); min-height: 64px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--black); z-index: 11; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--white); }
.brand img { height: 28px; width: auto; display: block; }
.brand img[hidden], .brand .wordmark[hidden] { display: none; }
.brand .wordmark { font-family: var(--head); font-weight: 700; font-size: 1.375rem; letter-spacing: .02em; color: var(--white); }
.top-cta { font-family: var(--head); font-weight: 700; font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--black); background: var(--honey); border: 2px solid var(--black); border-radius: var(--radius); padding: .55em 1.4em; text-decoration: none; box-shadow: 4px 4px 0 var(--black); }
.top-cta:hover { background: var(--honey-hover); color: var(--black); }

main { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
.stage { padding: clamp(3rem, 7vw, 5rem) 0 1rem; }
.stage + .stage { border-top: 1px solid var(--line); }

/* Eingabe */
.domain-form { display: flex; gap: .75rem; max-width: 36rem; margin: 2rem 0 .75rem; flex-wrap: wrap; }
.domain-form input { flex: 1 1 14rem; }
input[type=text] { font-family: var(--body); font-weight: 500; font-size: 1.125rem; color: var(--black); padding: .85rem 1.1rem; border: 2px solid var(--black); border-radius: var(--radius); background: var(--white); }
input::placeholder { color: #9a9a9a; }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }

/* Buttons nach Styleguide 11 */
button, .button { font-family: var(--head); font-weight: 700; font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--black); background: var(--honey); border: 2px solid var(--black); border-radius: var(--radius); padding: 1em 2em; cursor: pointer; text-decoration: none; display: inline-block; box-shadow: 4px 4px 0 var(--black); transition: transform .08s ease, box-shadow .08s ease, background .12s ease; }
button:hover, .button:hover { background: var(--honey-hover); color: var(--black); }
button:active, .button:active { transform: translate(4px, 4px); box-shadow: none; }
button[disabled] { opacity: .6; cursor: wait; transform: none; box-shadow: 4px 4px 0 var(--black); }
.button.secondary { background: var(--white); }
.button.secondary:hover { background: #e6e6e6; }
.error { color: var(--red); font-weight: 700; }

/* Fortschritt */
.progress { height: 8px; background: var(--snow); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 1.5rem 0; max-width: var(--measure); }
.progress-bar { height: 100%; width: 0; background: var(--honey); transition: width .6s ease; }
.log { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.log li { padding: .7rem 0 .7rem 2rem; position: relative; border-bottom: 1px solid var(--line); }
.log li::before { content: ""; position: absolute; left: .2rem; top: 1.25rem; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--line); background: var(--white); }
.log li.active { color: var(--black); }
.log li.active::before { border-color: var(--black); background: var(--honey); animation: pulse 1.2s ease-in-out infinite; }
.log li.done { color: var(--black); }
.log li.done::before { background: var(--black); border-color: var(--black); }
@keyframes pulse { 50% { transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .log li.active::before { animation: none; } .progress-bar, button, .button { transition: none; } }

/* Analyse */
.fit { color: var(--black); font-weight: 700; }
.fit.gering, .fit.mittel { color: var(--red); }
.iststand { background: var(--snow); border-radius: var(--radius); padding: var(--pad); max-width: 44rem; margin: 2rem 0; }
.iststand p { margin: 0; color: var(--black); font-size: 1.125rem; }

/* Tabellen nach Styleguide 24 */
.table-wrap { overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--dune); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; padding: 16px 28px; border-bottom: 1px solid var(--dune); vertical-align: top; }
thead th { background: var(--snow-dark); font-family: var(--head); font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); padding: 20px 28px; }
tbody tr:last-child td { border-bottom: 0; }
tfoot th { color: var(--black); font-weight: 700; border-top: 2px solid var(--black); border-bottom: 0; background: var(--snow); }
.num { text-align: right; white-space: nowrap; }
.kw td:first-child { color: var(--black); font-weight: 700; }
.pos-top { color: var(--green); font-weight: 700; }
.pos-mid { color: var(--honey-hover); font-weight: 700; }
@media (max-width: 640px) { th, td { padding: 12px 16px; } thead th { padding: 14px 16px; } }

.prompts { padding-left: 1.4rem; max-width: 44rem; color: var(--black); }
.prompts li { margin: .6rem 0; padding-left: .3rem; }
.prompts li::marker { font-family: var(--head); font-weight: 700; color: var(--honey-hover); }
.prompts .stage-tag { color: var(--grey); font-size: .85rem; margin-left: .5rem; white-space: nowrap; }

/* Eingaben */
.inputs { max-width: var(--measure); }
.field { margin: 1.5rem 0; }
label { display: block; font-family: var(--head); font-weight: 700; color: var(--black); margin-bottom: .5rem; font-size: 1.125rem; }
.money { display: flex; align-items: center; gap: .6rem; max-width: 18rem; }
.money input { flex: 1; font-size: 1.5rem; text-align: right; min-width: 0; }
.money span { font-family: var(--head); font-weight: 700; font-size: 1.5rem; color: var(--black); }
.advanced { margin: 1.75rem 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; }
.advanced[open] { background: var(--snow); border-color: var(--snow); }
summary { cursor: pointer; font-family: var(--head); font-weight: 700; color: var(--black); }
input[type=range] { width: 100%; max-width: 22rem; accent-color: var(--honey); }

/* Ergebnis */
.headline { font-family: var(--head); font-weight: 700; color: var(--black); font-size: clamp(2.75rem, 8vw, 5.5rem); line-height: 1.05; letter-spacing: -0.03em; margin: .25rem 0 .5rem; }
.range { font-size: 1.0625rem; }

/* Rechenweg: fünf Stufen, jede Zeile aus der vorherigen abgeleitet */
.ladder { list-style: none; padding: 0; margin: 1.25rem 0 0; max-width: 48rem; }
.ladder li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label value" "note note"; gap: .1rem 1.5rem; padding: 1.1rem 1.4rem; border-left: 3px solid var(--line); background: var(--white); }
.ladder li + li { margin-top: .35rem; }
.ladder li:nth-child(2) { margin-left: 1.25rem; } .ladder li:nth-child(3) { margin-left: 2.5rem; } .ladder li:nth-child(4) { margin-left: 3.75rem; }
.ladder li:nth-child(5) { margin-left: 5rem; border-left: 0; background: var(--honey); border-radius: var(--radius); padding: var(--pad); }
.ladder li:nth-child(5) .l-note, .ladder li:nth-child(5) .l-label { color: var(--black); }
.l-label { grid-area: label; font-family: var(--head); font-weight: 700; color: var(--black); }
.l-value { grid-area: value; font-family: var(--body); font-weight: 700; font-size: 1.75rem; color: var(--black); text-align: right; line-height: 1.2; }
.l-note { grid-area: note; font-size: .9375rem; }
@media (max-width: 600px) { .ladder li:nth-child(n) { margin-left: 0; } .ladder li:nth-child(2) { margin-left: .5rem; } .ladder li:nth-child(3) { margin-left: 1rem; } .ladder li:nth-child(4) { margin-left: 1.5rem; } .ladder li:nth-child(5) { margin-left: 2rem; } }

.scen td { text-align: right; } .scen td:first-child, .scen th:first-child { text-align: left; }
.scen tr.section td { color: var(--black); font-family: var(--head); font-weight: 700; border-bottom: 0; padding-top: 1.5rem; background: var(--snow); }
.scen td.basis { font-weight: 700; color: var(--black); }
.neg { color: var(--red); font-weight: 700; } .posv { color: var(--green); font-weight: 700; }

/* KI-Check: Dune-Karte */
.aicheck { margin-top: 3rem; padding: var(--pad); background: var(--dune); border-radius: var(--radius); max-width: 48rem; }
.aicheck h3 { margin-top: 0; font-size: 1.5rem; }
.aicheck ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.aicheck li { padding: 1rem 0; border-top: 1px solid rgba(0,0,0,.15); color: var(--black); }
.aicheck .verdict { font-weight: 700; }
.aicheck .verdict.yes { color: var(--green); } .aicheck .verdict.no { color: var(--red); }
.aicheck blockquote { margin: .5rem 0 0; color: var(--grey); font-size: .9375rem; border-left: 2px solid var(--black); padding-left: .8rem; }

/* Letzte Section vor dem Footer: schwarz, mit Honey-Button */
.cta { margin: 4rem 0 0; padding: var(--pad); background: var(--black); color: var(--white); border-radius: var(--radius); max-width: 48rem; }
.cta h3 { margin-top: 0; color: var(--white); font-size: clamp(1.625rem, 2.5vw, 2.25rem); }
.cta p { color: var(--white); opacity: .9; }
.cta .button { margin-top: .5rem; box-shadow: 4px 4px 0 var(--white); }
.cta .button:active { box-shadow: none; }
.cta-sub { font-size: .9375rem; opacity: .7; margin: 1rem 0 0; }

.fineprint { max-width: 48rem; margin-top: 2.5rem; font-size: .9375rem; }
.fineprint summary { font-size: 1rem; }
.fineprint ul { padding-left: 1.2rem; }
.fineprint li { margin: .5rem 0; }
.again { margin-top: 2.5rem; }

/* Footer schwarz */
.bottom { background: var(--black); color: var(--white); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 2rem clamp(1rem, 4vw, 3rem); margin-top: 5rem; font-size: .9375rem; }
.bottom a { color: var(--white); text-decoration-color: var(--honey); margin-left: 1.5rem; }
.bottom nav a:first-child { margin-left: 0; }

/* Datenschutzseite */
.legal { max-width: 48rem; padding: 3rem clamp(1rem, 4vw, 3rem) 0; }
.legal h2 { font-size: 1.5rem; margin-top: 2.5rem; }