/* Business-Check (Jennifer 31.10.2026, Richtung A „Ein Schritt nach dem anderen“): je eine Frage, ruhig und übersichtlich, am
   Ende klar Unterstützung ja oder nein und in welchem Bereich. Eigene Datei, die übrigen Seiten bleiben unberührt. Farben und
   Schriften kommen aus style.css. */

/* Kleinere Welle im Fuß, diese Datei gilt nur für den Check */
:root { --kante: clamp(20px, 2.6vw, 38px); }

/* Oben kein Kopf (Jennifer 31.10.: „das ist zu viel oben“), die Seite beginnt direkt im Sand. Viel Luft, „alles sehr gequetscht“.
   Der Fuß ist nie angeschnitten (Jennifer 1.11.): Passt alles auf den Bildschirm, sitzt er am unteren Rand, sonst bleibt er mit der
   Welle ganz darunter. Die Klasse fc-lang setzt js/flow-check.js. */
body { display: flex; flex-direction: column; min-height: 100svh; }
.fc { --akz: var(--akzent-tief); position: relative; flex: 1 0 auto; padding: min(clamp(56px, 8vw, 96px), clamp(48px, 20vh - 72px, 96px)) 0 calc(var(--kante) + 36px); background: var(--sand); overflow-wrap: break-word; }
.fc.fc-lang { min-height: calc(100svh + var(--kante)); padding-bottom: calc(var(--kante) + clamp(56px, 8vw, 88px)); }
/* 740 px (Jennifer 1.11.): die kurzen Fragen stehen in einer Zeile, die Ergebnis-Texte brauchen weniger Zeilen */
.fc-spalte { width: min(740px, 100% - 2 * var(--rand)); margin-inline: auto; }
.fc h1 { font-size: clamp(2.2rem, 7.4vw, 3.4rem); line-height: 1.04; }
.fc-text { margin: 20px 0 0; max-width: 46ch; font: 400 clamp(1.12rem, 3vw, 1.3rem)/1.4 var(--serif); }
.fc-ergebnis .fc-text { max-width: none; }
/* Instrument Serif hat keinen echten Fettschnitt, darum in Hanken Grotesk */
.fc-text strong { font-family: var(--sans); font-size: .9em; }
.fc-fakten { margin: 26px 0 18px; font-weight: 600; }
.fc-ohne-js { margin: 0; font-weight: 600; }
.ganz { white-space: nowrap; }
/* bleibt als Gruppe zusammen, darf bei 200 % Schrift aber noch umbrechen, darum kein nowrap; ab Tablet in eigener Zeile */
.fc-gruppe { display: inline-block; }
@media (min-width: 720px) { .fc-gruppe { display: block; } }
.fc .knopf { max-width: 100%; font-size: 1.15rem; }
/* lange Wörter brechen nur, wenn sie sonst aus dem Bild ragen (320 px bei 200 % Schrift) */
.fc .knopf span, .fc-antwort span:first-child, .knoten li, .fc-urteil { min-width: 0; overflow-wrap: anywhere; }

/* Eine Frage: Stand, Flow-Linie als Fortschritt, Antworten zum Antippen */
.fc-stand { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; font-size: .98rem; }
.fc-zurueck { display: inline-flex; align-items: center; min-height: 48px; padding: 0; border: 0; background: none; color: var(--text); font: 600 1rem var(--sans); text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: .3em; cursor: pointer; }
.fc-linie { display: block; width: 100%; height: 26px; margin: 2px 0 clamp(18px, 3.4vw, 30px); overflow: visible; }
.fc-linie path { fill: none; stroke-linecap: round; stroke-width: 3.4; vector-effect: non-scaling-stroke; }
.fc-linie .spur { stroke: var(--karamell-hell); }
.fc-linie .weit { stroke: var(--akzent-tief); stroke-dasharray: 1; stroke-dashoffset: var(--rest, 1); transition: stroke-dashoffset .5s ease; }
.fc .fc-frage { margin: 0; font: 400 clamp(1.7rem, 5.2vw, 2.5rem)/1.12 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
.fc-frage:focus, .fc-urteil:focus { outline: none; }
.fc-frage:focus-visible, .fc-urteil:focus-visible { outline: 3px solid var(--fokus); outline-offset: 6px; }
.fc-antworten { list-style: none; display: grid; gap: 12px; margin: clamp(24px, 3.6vw, 32px) 0 0; padding: 0; }
.fc-antwort { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px 12px 20px; border: 0; border-radius: 18px; background: var(--karte); color: var(--text); font: 500 1.08rem/1.32 var(--sans); text-align: left; cursor: pointer; box-shadow: 0 12px 26px -20px rgba(59, 43, 32, .55); transition: background-color .2s ease; }
.fc-antwort:hover { background: var(--creme); }
.fc-antwort .haken { flex: none; width: 28px; height: 28px; border: 1.5px solid var(--tan); border-radius: 50%; }
.fc-antwort[aria-pressed="true"] { background: var(--akzent); color: var(--creme); }
.fc-antwort[aria-pressed="true"] .haken { border-color: var(--creme); background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%236b5128' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* Ergebnis: zuerst die klare Antwort, dann Linie, was auf der Strecke bleibt, Angebot */
.fc-urteil { margin: 0 0 18px; font: 400 clamp(1.02rem, 2.6vw, 1.12rem)/1.4 var(--sans); }
.fc-ergebnis h1 { font-size: clamp(1.65rem, 5.2vw, 2.3rem); }
.knoten { margin: clamp(26px, 4vw, 36px) 0 clamp(28px, 4vw, 38px); }
.knoten svg { display: block; width: 100%; height: auto; overflow: visible; }
.knoten path { fill: none; }
.knoten .seil { stroke: var(--akzent-tief); stroke-width: 7; stroke-linecap: round; }
.knoten ol { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 8px 0 0; padding: 0; font-size: clamp(.78rem, 3.4vw, .92rem); line-height: 1.25; text-align: center; }
.knoten li.hier { font-weight: 800; }
.fc-kasten { margin-top: 28px; padding: clamp(24px, 4vw, 32px); border-radius: 24px; background: var(--karte); }
.fc-kasten h2 { margin: 0 0 12px; font: 400 clamp(1.25rem, 3.2vw, 1.45rem)/1.2 var(--serif); }
.fc-liste { list-style: none; margin: 0; padding: 0; }
.fc-liste li { position: relative; padding: 7px 0 7px 28px; }
.fc-liste li::before { content: ""; position: absolute; left: 0; top: 13px; width: 16px; height: 16px; border-radius: 50%; background: var(--sand-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%236b5128' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* Was liegen bleibt, ist noch nicht erledigt: Punkt statt Haken */
.fc-offen li::before { left: 3px; top: 15px; width: 10px; height: 10px; background: var(--tan); }
/* Jennifer 1.11.: Der Schluss steht immer mittig wie die Knöpfe, bei „leichter“ nur eine Leerzeile unter dem Text */
.fc-weiter { margin-top: 48px; text-align: center; }
.fc-weiter.eng { margin-top: 20px; }
.fc-weiter h2 { margin: 0 0 20px; font: 400 clamp(1.35rem, 3.8vw, 1.7rem)/1.15 var(--serif); text-wrap: balance; }
/* So klein wie die Schrift. Der feste Umbruch im Text ist nötig: Bricht der Text von selbst um, bleibt der Knopf voll breit. */
.fc-weiter .knopf { display: flex; justify-content: space-between; gap: 12px; width: fit-content; min-height: 52px; margin-inline: auto; padding: 6px 6px 6px 22px; font-size: 1.05rem; text-align: center; }
.fc-weiter .knopf .pfeil { width: 36px; height: 36px; }
/* Drei Knöpfe wie ein Dreieck: Termin breit, E-Mail im hellen Braun der Linien schmaler, „Check erneut starten“ klein und weiß (Jennifer 31.10.) */
.fc-wege { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.fc-wege a { display: flex; align-self: center; align-items: center; justify-content: center; min-height: 52px; padding: 8px 36px; border-radius: 999px; background: var(--tan); color: var(--text); font: 400 1.1rem/1.2 var(--serif); text-align: center; text-decoration: none; transition: background-color .25s ease; }
.fc-wege a:hover { background: var(--karamell-hell); }
.fc-wege button { align-self: center; min-height: 48px; padding: 6px 22px; border: 0; border-radius: 999px; background: var(--karte); color: var(--text); font: 400 1.02rem/1.2 var(--serif); cursor: pointer; transition: background-color .25s ease; }
.fc-wege button:hover { background: var(--creme); }
.fc-hinweis { margin: 44px 0 0; padding-top: 18px; border-top: 1px solid var(--linie); font-size: .95rem; }

/* Schmaler Fuß: nur das Rechtliche, das Motto steht schon über dem Knopf */
.fuss { padding: 4px 0 12px; }
.fuss-innen { display: block; }
.fuss-recht { padding-top: 0; border-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .knoten svg { animation: einblenden .7s ease both; }
}

@keyframes einblenden { from { opacity: 0; } }