/* ============================================================================
   THITRONIK Campus 2026 Feedbackbogen - v14
   Schritt fuer Schritt. Mobile first.

   FARBEN: verbindliche THITRONIK Markenpalette. Die Namen sind seit der
   Zusammenfuehrung mit dem Wissenscheck dieselben wie dort — vorher hiess
   das Navy hier --blue, waehrend --th-blue im Quiz das Cyan ist. Zwei
   Stylesheets mit derselben Marke und gekreuzten Namen haetten beim
   Zusammenlegen still die Flaechen umgefaerbt.
     --th-navy   #1D3661  Primary Flaechen, Headlines, Primary Buttons
     --th-blue   #3BA9D3  Akzente, Badges, Links, Info-Flaechen
     --th-lime   #AFCA05  Marker und Status, sehr sparsam
     --th-red    #CE132D  Logo-Segel, sehr sparsam
     --th-soft   #F0F0F0  Backgrounds, Card-Flaechen
     --th-white  #FFFFFF  Ruheflaechen
     --th-ink    #111111  Text und Icons auf hell

   Rot erscheint deshalb ausschliesslich bei Fehlern und in der Skalen-Note 5,
   also dort, wo die Signalwirkung inhaltlich verdient ist. Primary Buttons
   sind blau. Lime markiert Status, nie Flaeche.

   RADIEN (verbindlich):
     --radius-md    Eingaben, Optionen, Kommentarfelder
     --radius-lg    Karten und grosse Flaechen
     --radius-pill  Aktionen und Badges
   ========================================================================== */

:root {
  /* Marke */
  --th-navy: #1D3661;
  --th-blue: #3BA9D3;
  --th-lime: #AFCA05;
  --th-red: #CE132D;
  --th-soft: #F0F0F0;
  --th-white: #FFFFFF;
  --th-ink: #111111;

  /* Abgeleitet, bleibt im Farbklang der Marke */
  --th-navy-deep: #0A2747;
  --th-navy-hover: #16294B;
  --info-bg: #EDF7FB;
  --th-lime-text: #5F7000;
  --th-red-text: #A81024;
  --th-muted: #5E6672;
  --th-line: #DDE2E7;
  --th-line-soft: #E6EAEF;

  /* Radien */
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --gap: 20px;
  --shell: 1200px;
  --ring: 0 0 0 3px rgba(59, 169, 211, .5);
  --lift: 0 10px 30px rgba(29, 54, 97, .10);

  /* BEWEGUNG: kurz und ausklingend. Eine Animation darf einen Zustandswechsel
     bestaetigen, sie darf ihn nie verzoegern. Deshalb nichts ueber 220 ms und
     kein ease-in auf Interaktionen: der traege Anlauf laesst die Oberflaeche
     langsamer wirken, als sie ist.

     Die Zahlen stammen seit der Zusammenfuehrung aus dem Wissenscheck
     (vorher 90/130/180 ms und eine flachere Kurve). Die Regel darueber
     gilt unveraendert weiter: 220 ms bleibt die Obergrenze. */
  --duration-press: 140ms;
  --duration-fast: 160ms;
  --duration-normal: 220ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Solange die Schrittleiste unten klebt, deckt sie die letzten rund 86 px des
   Sichtfensters ab. Ohne scroll-padding-bottom schiebt jedes scrollIntoView
   und jeder Tastatursprung ein Feld genau dorthin, also unter die Leiste.
   Betrifft besonders block:'nearest' beim Aufklappen der Kommentarfelder.
   Bewusst ohne :has() an die Bedingung geknuepft: das hier ist eine
   Zugaenglichkeitszusage und soll nicht an Browserunterstuetzung haengen.
   Auf dem Startbildschirm ohne Leiste schadet der Abstand nichts, dort
   springt nichts ins Bild. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

/* Die Seite als Spalte über die volle Fensterhöhe, damit die Fußleiste am
   unteren Rand steht. Auf der Startseite endete sie bei 1440 × 900 bei
   688 px, darunter lagen 212 px leere Fläche. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--th-soft);
  color: var(--th-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; }
button, label, input[type="radio"], input[type="checkbox"] { cursor: pointer; }

h1, h2 { margin: 0; color: var(--th-navy); letter-spacing: -.021em; }

.shell { width: min(var(--shell), 100% - 28px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; z-index: 999; top: 10px; left: 10px;
  transform: translateY(-160%);
  padding: 11px 16px; border-radius: var(--radius-pill);
  background: var(--th-white); color: var(--th-navy);
  font-weight: 700; text-decoration: none;
  box-shadow: var(--lift);
  transition: transform var(--duration-fast) var(--ease-out);
}
/* Auch :focus, nicht nur :focus-visible. Der Sprunglink ist ausschliesslich
   ueber die Tastatur erreichbar, darf aber nie unsichtbar den Fokus halten. */
.skip:focus, .skip:focus-visible { transform: translateY(0); }

.noscript {
  margin: 0; padding: 16px;
  background: #FFF6E0; color: #6B4A00;
  border-bottom: 2px solid #E0B23A;
  text-align: center; font-weight: 600;
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--th-blue);
  outline-offset: 2px;
}

input[type="text"], textarea, .rate, .field { scroll-margin-top: 118px; }

/* Auf Touch gibt es keinen Hover, der die Beruehrung bestaetigt. Das Einsinken
   beim Druecken uebernimmt diese Rolle: sofort beim Beruehren, weiches
   Zurueckfedern beim Loslassen. Nur transform, damit es auf der Compositor-
   Ebene bleibt und auch auf schwachen Geraeten nicht ruckelt. */
.rate__opt span, .chip span, .overall__opt span, .rate__na span, .isle__box,
.stepbar__next, .stepbar__back, .intro__start { -webkit-tap-highlight-color: transparent; }
.rate__opt:active span, .chip:active span,
.overall__opt:active span, .rate__na:active span { transform: scale(.96); }
.isle:active .isle__box { transform: scale(.985); }
.isle input:disabled:active + .isle__box { transform: none; }

/* ---------------------------------------------------------------- Kopfbereich */

.masthead {
  position: relative;
  background: var(--th-navy);
  overflow: hidden;
}
/* Das maritime Motiv bleibt als leiser Marken-Anklang, aber nur hier oben.
   Die Seitenflaeche selbst ist graySoft, wie in der Palette vorgesehen. */
.masthead::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/v12/background-800.webp") center / cover no-repeat;
  opacity: .34;
  pointer-events: none;
}
/* Lichtstrahlen. Liegen ueber dem Motiv, aber unter allem Lesbaren: eine
   Dekoration darf nie zwischen Nutzer und Inhalt geraten.

   Die Reihenfolge ist bewusst durchnummeriert statt der Baumreihenfolge
   ueberlassen: Motiv, dann Lichtschein aus CSS, dann der Canvas, dann der
   Inhalt. Mit gemischten z-index-Angaben und Pseudoelementen wird die
   Stapelung sonst schnell zur Ratesache. */
.masthead::before, .done::before { z-index: 0; }
.masthead::after, .done::after { z-index: 1; }
.rays { z-index: 2; }

/* Der Lichtschein steckt in CSS, nicht nur im Shader. Er ist da, bevor
   JavaScript laeuft, und er bleibt da, wenn WebGL fehlt oder blockiert ist -
   etwa in den eingebauten Browsern mancher Messenger-Apps. Ohne ihn hiesse
   "kein WebGL" schlicht: eine leere blaue Flaeche. */
.masthead::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 260% at 50% -55%,
      rgba(89, 196, 236, .40) 0%,
      rgba(59, 169, 211, .22) 34%,
      rgba(59, 169, 211, .08) 58%,
      transparent 78%);
}
.done::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(95% 62% at 50% 118%,
      rgba(89, 196, 236, .46) 0%,
      rgba(59, 169, 211, .22) 38%,
      transparent 72%);
}

.rays {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.rays canvas { display: block; width: 100%; height: 100%; }

.masthead__bar {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px; min-height: 76px;
}
.masthead__home {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  min-height: 48px;
  color: var(--th-navy);
  text-decoration: none;
}
.masthead__logo { width: min(220px, 46vw); height: auto; }
.masthead__home-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 17px;
  border: 1px solid var(--th-lime);
  border-radius: var(--radius-md);
  background: var(--th-lime);
  color: var(--th-ink);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(5, 21, 45, .18);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-press) var(--ease-out);
}
.masthead__home-icon {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.masthead__home:hover .masthead__home-action {
  border-color: #c1db1a;
  background: #c1db1a;
  box-shadow: 0 10px 26px rgba(5, 21, 45, .24);
  transform: translateY(-1px);
}
.masthead__home:active .masthead__home-action { transform: scale(.98); }

@media (min-width: 760px) { .masthead__bar { min-height: 96px; } }

/* ------------------------------------------------------- Fortschrittsanzeige */

.rail {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--th-line-soft);
  box-shadow: 0 6px 20px rgba(29, 54, 97, .07);
}
.rail[hidden] { display: none; }

.rail__inner {
  display: grid; gap: 9px;
  padding: 11px 0 12px;
}

.rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.rail__now { margin: 0; display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.rail__step { flex: none; color: var(--th-muted); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.rail__now strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--th-navy); font-size: 1.02rem; letter-spacing: -.015em;
}
.rail__count { margin: 0; flex: none; color: var(--th-muted); font-size: .76rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Sechs Segmente statt eines durchgehenden Balkens: bei einem Fluss mit
   bekannter Laenge sagt die Form selbst, wie weit man ist. Erledigte
   Segmente sind anklickbar und fuehren zurueck. */
.steps { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.steps li { flex: 1; min-width: 0; }
/* Der sichtbare Balken ist 5 px hoch, die Trefferflaeche misst 24 px. WCAG 2.2
   verlangt 24x24 fuer jedes Ziel, und ein 15 px hoher Streifen ist auf dem
   Daumen nicht sicher zu treffen. */
.steps button {
  display: block; width: 100%;
  padding: 10px 0 9px;
  cursor: default;
}
.steps button::before {
  content: "";
  display: block; height: 5px;
  border-radius: var(--radius-pill);
  background: var(--th-line);
  transition: background var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.steps button:disabled { cursor: default; }
/* Erledigt und anklickbar. Erledigt, aber gesperrt (vorwaerts) bleibt heller,
   damit die Farbe nicht zum Klicken einlaedt, wo nichts passiert. */
.steps [data-state="done"] button::before { background: #9CC9DF; }
.steps [data-state="done"] button:not(:disabled) { cursor: pointer; }
.steps [data-state="done"] button:not(:disabled)::before { background: var(--th-blue); }
.steps [data-state="done"] button:not(:disabled):hover::before { background: var(--th-navy); }
.steps [data-state="current"] button::before { background: var(--th-navy); transform: scaleY(1.6); }
.steps button:focus-visible { outline: 3px solid var(--th-blue); outline-offset: -1px; border-radius: 8px; }

.steps__label { display: none; }

@media (min-width: 900px) {
  .steps { gap: 8px; }
  .steps button { padding-bottom: 0; }
  .steps__label {
    display: block; margin-top: 7px;
    color: var(--th-muted); font-size: .72rem; font-weight: 650;
    text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .steps [data-state="current"] .steps__label { color: var(--th-navy); font-weight: 800; }
  .steps [data-state="done"] .steps__label { color: var(--th-navy); }
}

@media (max-width: 620px) { .rail__step { display: none; } }

/* ---------------------------------------------------------------- Grundlayout */

.main { padding: 20px 0 24px; }

.panel[hidden] { display: none; }
/* Der Fokus wandert beim Schrittwechsel auf das Panel, damit Vorlesesoftware
   den Abschnitt ansagt. Ein Rahmen um die ganze Karte waere dabei nur Laerm. */
.panel:focus, .panel:focus-visible { outline: none; }

/* Der Schrittwechsel tauscht die komplette Flaeche aus. Ohne jede Bewegung
   wirkt das wie ein Seitensprung und man verliert kurz die Orientierung.
   Ein sehr kurzes Aufblenden mit 6 px Weg beantwortet die Frage "ist etwas
   passiert?", ohne den naechsten Klick auszubremsen: die Karte ist waehrend
   der Animation bereits bedienbar. Nur beim Vorwaerts- und Rueckwaertsgehen,
   nicht beim ersten Aufbau der Seite. */
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* fill-mode backwards, nicht both: der Endzustand der Animation ist exakt der
   normale Zustand des Panels. Mit "both" bliebe die Animation danach dauerhaft
   auf opacity und transform liegen und keine andere Regel kaeme mehr daran. */
.panel.is-entering { animation: panelIn 190ms var(--ease-out) backwards; }
.panel.is-entering--back { animation-name: panelInBack; }
@keyframes panelInBack {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

body.is-stepping { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
body.is-stepping .foot { display: none; }

.form { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- Startscreen */

.intro {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--th-white);
  box-shadow: var(--lift);
}
.intro__media { position: relative; }
.intro__media img {
  width: 100%; height: clamp(168px, 36vw, 310px);
  object-fit: cover; object-position: center 45%;
}
.intro__time {
  position: absolute; right: 14px; bottom: 14px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: rgba(29, 54, 97, .94); color: var(--th-white);
  font-size: .76rem; font-weight: 700;
  backdrop-filter: blur(6px);
}
.intro__copy { padding: 26px 22px 30px; }
.intro h1 { font-size: clamp(1.74rem, 6.2vw, 2.85rem); line-height: 1.1; }
.intro h1 br { display: none; }
.intro__lead {
  margin: 15px 0 0; max-width: 54ch;
  color: var(--th-muted); font-size: clamp(1rem, 2.4vw, 1.09rem);
}

.intro__facts {
  display: grid; gap: 10px;
  margin: 24px 0 0; padding: 0; list-style: none;
}
.intro__facts li {
  display: flex; align-items: center; gap: 11px;
  color: var(--th-navy); font-size: .93rem; font-weight: 620;
}
.intro__facts b {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--info-bg); color: var(--th-navy);
  font-size: .74rem; font-weight: 900;
}
.intro__privacy {
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--th-muted);
  font-size: .83rem;
  line-height: 1.48;
}

.draft {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 14px 16px;
  border: 1.5px solid var(--th-blue);
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--th-navy); font-size: .89rem; font-weight: 620;
}
.draft[hidden] { display: none; }

/* Derselbe Kasten wie beim gefundenen Entwurf, nur ohne Knopf: Beides sagt
   "hier steht schon etwas, das nicht von dieser Seite stammt". */
.draft__note {
  margin: 16px 0 0; padding: 12px 16px;
  border: 1.5px solid var(--th-blue);
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--th-navy); font-size: .86rem; font-weight: 620; line-height: 1.45;
}
.draft__note[hidden] { display: none; }
.draft button {
  min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--th-navy); border-radius: var(--radius-pill);
  color: var(--th-navy); font-size: .82rem; font-weight: 750;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.draft button:hover { background: var(--th-navy); color: var(--th-white); }
.draft button:active { transform: scale(.97); }

.recommend { margin-top: 26px; }
.recommend__why { margin-top: 24px; }

.intro__start {
  margin-top: 26px; width: 100%;
  min-height: 58px; padding: 15px 30px;
  border-radius: var(--radius-pill);
  background: var(--th-navy); color: var(--th-white);
  font-size: 1.05rem; font-weight: 800;
  box-shadow: 0 10px 26px rgba(29, 54, 97, .26);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.intro__start:hover { background: var(--th-navy-hover); }
.intro__start:active { transform: scale(.975); }

@media (min-width: 760px) {
  .intro__copy { padding: 38px 44px 46px; }
  .intro h1 br { display: block; }
  .intro__facts { grid-auto-flow: column; justify-content: start; gap: 26px; }
  .intro__start { width: auto; min-width: 290px; }
}

/* --------------------------------------------------------------------- Karten */

.card {
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  background: var(--th-white);
  box-shadow: var(--lift);
}

.card__head { display: flex; align-items: center; gap: 13px; }
.card__no {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: var(--th-navy); color: var(--th-white);
  font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.card__head h2 { font-size: clamp(1.18rem, 3.5vw, 1.55rem); line-height: 1.22; }

.card__tally {
  margin: 0 0 0 auto; flex: none;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--th-soft);
  color: var(--th-muted); font-size: .74rem; font-weight: 750;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.card__tally--full { background: var(--th-lime); color: var(--th-ink); }

.card__note {
  margin: 15px 0 0; max-width: 68ch;
  color: var(--th-muted); font-size: .93rem;
}
.card__head + .grid, .card__head + .rates, .card__head + .isles,
.card__head + .overall, .card__note + * { margin-top: 22px; }

@media (min-width: 760px) {
  .card { padding: 32px 36px 36px; }
  .card__no { width: 42px; height: 42px; font-size: 1.05rem; }
}

/* ----------------------------------------------------------------- Formfelder */

.grid { display: grid; gap: var(--gap); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: 1fr 1fr; } }

/* Schritt 1 traegt seit v14 drei Felder statt zwei. Betrieb und Nummer stehen
   nebeneinander, weil beide denselben Betrieb bezeichnen; der Name faellt
   darunter in die volle Breite, sonst bliebe rechts ein sichtbares Loch.
   Die Nummer bekommt eine feste schmale Spalte: fuenf Ziffern in einem Feld
   ueber die halbe Kartenbreite versprechen mehr Eingabe als hineinpasst. */
@media (min-width: 700px) {
  .grid--angaben { grid-template-columns: minmax(0, 1fr) 200px; }
  .grid--angaben .field--wide { grid-column: 1 / -1; }
}

/* Ziffern gleich breit, damit die Nummer beim Tippen nicht zappelt. */
.field--num input[type="text"] { font-variant-numeric: tabular-nums; letter-spacing: .09em; }

.field label, .chips legend, .recommend legend {
  display: block; margin-bottom: 8px;
  color: var(--th-navy); font-weight: 700; font-size: .96rem;
}
/* "Pflicht" bleibt als Wort stehen, verliert aber das Rot: Rot ist in diesem
   Bogen die Fehlerfarbe. Ein rotes Etikett an einem noch unberuehrten Feld
   sieht aus wie eine Ruege, bevor man etwas falsch gemacht hat. */
.req {
  margin-left: 8px;
  color: var(--th-muted); font-size: .69rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.hint { margin-left: 7px; color: var(--th-muted); font-size: .8rem; font-weight: 600; }

/* Eingaben sind weiss mit Rahmen, nicht grau gefuellt. Die Seitenflaeche ist
   selbst graySoft: ein graues Feld auf weisser Karte liest sich als gesperrt.
   Weiss plus Rahmen ist ausserdem dieselbe Sprache wie Chips und Skalenfelder,
   damit alles Bedienbare gleich aussieht. */
input[type="text"], textarea {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--th-line);
  border-radius: var(--radius-md);
  background: var(--th-white);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
input[type="text"] { min-height: 50px; }
textarea { min-height: 100px; resize: vertical; }
input[type="text"]:hover, textarea:hover { border-color: #BFC8D2; }
input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: var(--th-blue);
  box-shadow: var(--ring);
}
input[type="text"]::placeholder, textarea::placeholder { color: #8B95A1; }
.field--bad input[type="text"], .field--bad textarea {
  border-color: var(--th-red); background: #FDF2F4;
}
.field__err { margin: 7px 0 0; color: var(--th-red-text); font-size: .84rem; font-weight: 650; }
.field__err[hidden] { display: none; }

/* Das Format steht dauerhaft unter dem Feld, nicht erst im Fehlerfall. Eine
   Regel, die man vorher kennt, ist keine Ruege hinterher. Verschwindet, sobald
   der Fehlertext die Stelle braucht, damit nicht zwei Zeilen konkurrieren. */
.field__hint { margin: 7px 0 0; color: var(--th-muted); font-size: .82rem; }
.field--bad .field__hint { display: none; }

/* ---------------------------------------------------------------------- Chips */

.chips, .recommend, .overall, .rate, .isles__list {
  margin: 0; padding: 0; border: 0; min-inline-size: 0;
}
.chips { margin-top: 24px; }
/* Fliessend statt an festen Bruchpunkten: die Spalten entstehen, sobald ein
   Wort wie "Geschaeftsfuehrung" ohne Umbruch hineinpasst. */
.chips__row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
.recommend__row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); max-width: 480px; }

.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 11px 14px;
  border: 1.5px solid var(--th-line);
  border-radius: var(--radius-md);
  background: var(--th-white);
  font-weight: 650; font-size: .95rem; text-align: center;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.chip span:hover { border-color: var(--th-blue); }
.chip input:checked + span { border-color: var(--th-navy); background: var(--th-navy); color: var(--th-white); }
.chip input:focus-visible + span { outline: 3px solid var(--th-blue); outline-offset: 2px; }

/* Mehrfachauswahl braucht ein Kaestchen. Ohne Markierung sehen die Felder aus
   wie Knoepfe, bei denen eine Wahl die vorige ersetzt. Die Einfachauswahl
   weiter unten ("Ja / Vielleicht / Nein") bekommt bewusst keines. */
.chips .chip span { justify-content: flex-start; gap: 11px; text-align: left; }
.chips .chip span::before {
  content: ""; flex: none;
  width: 20px; height: 20px;
  border: 2px solid #9AA6B2; border-radius: 6px;
  background: var(--th-white);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.chips .chip input:checked + span::before {
  border-color: var(--th-white);
  background: var(--th-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231D3661' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* -------------------------------------------------------------- Gesamteindruck */

.overall__row { display: grid; gap: 9px; }
.overall__opt { position: relative; display: block; }
.overall__opt input { position: absolute; opacity: 0; pointer-events: none; }
.overall__opt span {
  display: flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 11px 13px;
  border: 1.5px solid var(--th-line);
  border-radius: var(--radius-md);
  background: var(--th-white);
  font-weight: 650; font-size: .93rem; text-align: center;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.overall__opt span:hover { border-color: var(--th-blue); }
.overall__opt input:checked + span { border-color: var(--th-navy); background: var(--th-navy); color: var(--th-white); }
/* Endpunkte tragen die Bedeutung, damit die Reihe als Skala liest. */
.overall__opt:first-child input:checked + span {
  border-color: var(--th-lime); background: var(--th-lime); color: var(--th-ink);
}
.overall__opt:last-child input:checked + span { border-color: var(--th-red); background: var(--th-red); color: var(--th-white); }
.overall__opt input:focus-visible + span { outline: 3px solid var(--th-blue); outline-offset: 2px; }

@media (min-width: 560px) { .overall__row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .overall__row { grid-template-columns: repeat(5, 1fr); } }

/* ---------------------------------------------------------------- Bewertungen */

.rates { border-top: 1px solid var(--th-line-soft); }
.rate { padding: 20px 0; border-bottom: 1px solid var(--th-line-soft); }
.rate::after { content: ""; display: block; clear: both; }

.rate__label {
  display: block; padding: 0 0 13px;
  color: var(--th-navy); font-weight: 700; font-size: 1rem; line-height: 1.35;
}

.rate__control { display: grid; grid-template-columns: minmax(0, 1fr); }
.rate__options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.rate__opt { position: relative; display: block; }
.rate__opt input { position: absolute; opacity: 0; pointer-events: none; }
.rate__opt span {
  display: grid; place-items: center;
  min-height: 52px;
  border: 1.5px solid var(--th-line);
  border-radius: var(--radius-md);
  background: var(--th-white);
  color: var(--th-navy); font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.rate__opt span:hover { border-color: var(--th-blue); background: var(--info-bg); }
.rate__opt input:checked + span { border-color: var(--th-navy); background: var(--th-navy); color: var(--th-white); }

/* Die Farbe haengt am WERT, nicht an der Position. Bis v13 stand hier
   :first-child und :last-child - als sich die Skala drehte, blieben die Farben
   an ihrem Platz stehen und die schlechteste Note leuchtete gruen. Ueber den
   Wert angesprochen wandert sie beim naechsten Mal von allein mit.

   Nur die Endpunkte tragen Farbe. Lime und Rot sind laut Markenpalette "sehr
   sparsam" einzusetzen, und eine durchgefaerbte Skala braeuchte Zwischentoene
   in Orange und Gelb, die es in der Palette nicht gibt. Die Bedeutung haengt
   ohnehin nicht an der Farbe allein: Ziffer, Anker darunter und aria-label
   sagen dasselbe - Farbe bestaetigt hier nur, sie traegt nicht (WCAG 1.4.1).

   Kontrast am fertigen Feld gemessen: Lime mit ink 10,1:1, Rot mit weiss
   5,6:1. Beides ueber AA. Rot braucht weissen Text, Lime schwarzen - eine
   gemeinsame Textfarbe gibt es fuer beide nicht. */
.rate__opt input[value="1"]:checked + span {
  border-color: var(--th-red); background: var(--th-red); color: var(--th-white);
}
.rate__opt input[value="5"]:checked + span {
  border-color: var(--th-lime); background: var(--th-lime); color: var(--th-ink);
}
.rate__opt input:focus-visible + span { outline: 3px solid var(--th-blue); outline-offset: 2px; }

/* Bleibt auf JEDER Bildschirmgroesse sichtbar. Ohne diese Anker sind die
   Ziffern 1 bis 5 auf dem Smartphone bedeutungslos. */
.rate__anchors {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 7px 2px 0;
  color: var(--th-muted); font-size: .74rem; font-weight: 650;
}
.rate__anchors span:last-child { text-align: right; }

/* "Nicht beurteilt" stand vorher rechtsbuendig direkt unter dem Anker
   "verbesserungswuerdig" und las sich dadurch wie ein Anhaengsel der Note 5.
   Es gehoert aber zur ganzen Zeile, nicht zu einem Ende der Skala. Deshalb
   links an der Zeilenkante, mit deutlichem Abstand zur Skala. */
.rate__na { position: relative; display: inline-flex; justify-self: start; margin-top: 12px; }
.rate__na input { position: absolute; opacity: 0; pointer-events: none; }
.rate__na span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 15px;
  border: 1.5px dashed var(--th-line);
  border-radius: var(--radius-pill);
  color: var(--th-muted); font-size: .82rem; font-weight: 650;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.rate__na span:hover { border-color: var(--th-blue); color: var(--th-navy); }
.rate__na input:checked + span {
  border-style: solid; border-color: #C2CBD5;
  background: var(--th-soft); color: var(--th-ink);
}
.rate__na input:focus-visible + span { outline: 3px solid var(--th-blue); outline-offset: 2px; }

.rate__comment {
  margin-top: 14px; padding: 14px;
  border: 1.5px solid var(--th-line-soft);
  border-radius: var(--radius-md);
  background: var(--th-soft);
}
.rate__comment[hidden] { display: none; }
.rate__comment textarea { min-height: 84px; background: var(--th-white); }
.rate__commentLabel { display: block; margin-bottom: 8px; color: var(--th-navy); font-weight: 700; font-size: .92rem; }
.rate__commentHelp { margin: 7px 0 0; color: var(--th-muted); font-size: .82rem; }
.rate__comment--must { border-color: #EFC3CA; background: #FDF2F4; }
.rate__comment--must .rate__commentHelp { color: var(--th-red-text); font-weight: 650; }
.rate__comment--good { border-color: #D6E08A; background: #FAFCEB; }

/* Das Feld erscheint als Folge der eigenen Auswahl. Ein kurzes Aufblenden
   erklaert diesen Zusammenhang; ohne das wirkt es, als sei die Seite
   gesprungen. Nur bei eigener Eingabe, nicht beim Wiederherstellen. */
@keyframes commentIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.rate__comment.is-revealed { animation: commentIn var(--duration-normal) var(--ease-out) backwards; }

@media (min-width: 900px) {
  .rate__label { float: left; width: 33%; padding: 6px 26px 0 0; }
  .rate__control, .rate__comment { margin-left: 35%; }
  /* Skala links, Opt-out ganz rechts am Zeilenende. Das schliesst die tote
     Flaeche am rechten Kartenrand, macht die Zeile knapp 50 px flacher und
     legt sichtbaren Abstand zwischen die Note 5 und "Nicht beurteilt". */
  .rate__control {
    grid-template-columns: minmax(0, 430px) auto;
    justify-content: space-between;
    column-gap: 32px; align-items: center;
  }
  .rate__options { grid-column: 1; grid-row: 1; }
  .rate__anchors { grid-column: 1; grid-row: 2; }
  .rate__na { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .rate__comment { max-width: 660px; }
}

/* --------------------------------------------------------------------- Inseln */

.isles { display: grid; gap: 22px; }
.isles__list { display: grid; gap: 9px; }

.isle { position: relative; display: block; }
.isle input { position: absolute; opacity: 0; pointer-events: none; }

.isle__box {
  position: relative;
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  min-height: 80px; padding: 12px 14px 12px 46px;
  border: 1.5px solid var(--th-line);
  border-radius: var(--radius-md);
  background: var(--th-white);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.isle__box::before {
  content: "";
  position: absolute; left: 15px; top: 50%;
  width: 21px; height: 21px;
  transform: translateY(-50%);
  border: 2px solid #9AA6B2;
  border-radius: 6px;
  background: var(--th-white);
  transition: background .15s ease, border-color .15s ease;
}
.isle input:checked + .isle__box {
  border-color: var(--th-navy);
  box-shadow: 0 0 0 1px var(--th-navy), 0 10px 24px rgba(29, 54, 97, .14);
}
.isle input:checked + .isle__box::before {
  border-color: var(--th-navy);
  background: var(--th-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.isle input:focus-visible + .isle__box { outline: 3px solid var(--th-blue); outline-offset: 2px; }

/* Sind drei Inseln gewaehlt, treten die uebrigen zurueck statt zu verschwinden.
   Der Nutzer soll sehen, dass sie noch da sind, nur eben nicht mehr waehlbar. */
.isle input:disabled + .isle__box { opacity: .42; cursor: not-allowed; }
.isle input:disabled + .isle__box::before { border-color: #C3CAD2; }
.isle:has(input:disabled) { cursor: not-allowed; }

/* Rang-Marke: zeigt die Reihenfolge der Auswahl als Platz 1 bis 3.
   Sie sitzt rechts, wo vorher die laufende Nummer der Insel stand. Zwei
   Zahlensysteme nebeneinander waren die eigentliche Schwaeche dieser Liste:
   die feste Nummer 1 bis 8 sah aus wie eine Platzierung, ohne eine zu sein.
   Jetzt bedeutet eine Zahl an dieser Stelle immer den eigenen Rang. Die
   Spalte behaelt ihre Breite, damit beim Auswaehlen nichts springt. */
.isle__slot {
  display: grid; place-items: center;
  min-width: 68px; min-height: 26px;
}
/* Auf dem Smartphone kostet das ausgeschriebene "Platz" zu viel Breite: die
   Beschreibungen brachen sonst auf drei Zeilen um. Dort bleibt die Ziffer
   sichtbar, das Wort nur noch fuer Vorlesesoftware. Eine limefarbene 1 an
   einer ausgewaehlten Zeile ist unter der Ueberschrift "Ihre Top 3" eindeutig. */
@media (max-width: 559px) {
  .isle__slot { min-width: 38px; }
  .isle__rankWord {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .isle__rank { padding: 4px 9px; }
  .isle__box { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; }
  .isle__thumb { width: 54px; height: 52px; }
  .isle__thumb img { max-width: 50px; max-height: 46px; }
}
.isle__rank {
  display: none; place-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--th-lime); color: var(--th-ink);
  font-size: .66rem; font-weight: 900; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.isle input:checked + .isle__box .isle__rank { display: grid; animation: rankIn 200ms var(--ease-out) backwards; }
@keyframes rankIn {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: none; }
}

.isle__thumb {
  display: grid; place-items: center;
  width: 62px; height: 56px;
  border-radius: 10px;
  background: var(--th-soft);
  overflow: hidden;
}
.isle__thumb img { max-width: 56px; max-height: 50px; width: auto; height: auto; }
.isle__thumb--icon svg {
  width: 34px; height: 34px;
  fill: none; stroke: var(--th-navy); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

.isle__text { min-width: 0; }
.isle__text strong { display: block; color: var(--th-navy); font-size: 1rem; line-height: 1.3; }
.isle__text small { display: block; margin-top: 2px; color: var(--th-muted); font-size: .8rem; line-height: 1.35; }

.isles__poster {
  margin: 0; overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--th-line-soft);
}
.isles__poster img { width: 100%; height: auto; }

/* Das Plakat ist Beiwerk und stand auf dem Smartphone mit rund 500 px Hoehe
   unter einer ohnehin langen Liste. Schmaler statt beschnitten: die Karte
   bleibt als Erinnerungsstuetze vollstaendig lesbar, verdoppelt den Schritt
   aber nicht mehr. Ein angeschnittenes Plakat saehe nach Fehler aus. */
@media (max-width: 999px) {
  .isles__poster { max-width: min(320px, 100%); margin-inline: auto; }
}

@media (min-width: 1000px) {
  .isles { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 32px; align-items: start; }
}

/* ------------------------------------------------------------------ Absenden */

.missing {
  margin-top: 24px; padding: 16px 18px;
  border: 1.5px solid #EFC3CA;
  border-radius: var(--radius-md);
  background: #FDF2F4;
}
.missing[hidden] { display: none; }
.missing__head { margin: 0 0 10px; color: var(--th-red-text); font-weight: 750; font-size: .92rem; }
.missing__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.missing__list a {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 4px 0;
  color: var(--th-navy); font-size: .93rem; font-weight: 650;
  text-decoration: underline; text-underline-offset: 3px;
}
.missing__list a::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--th-red);
}

.send__status { margin: 14px 0 0; min-height: 1.3em; color: var(--th-muted); font-weight: 650; font-size: .94rem; }
.send__status:empty { display: none; }
.send__status.is-error { color: var(--th-red-text); }
.send__status.is-success { color: var(--th-lime-text); }
.send__note {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--th-line-soft);
  color: var(--th-muted);
  font-size: .84rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------- Schrittleiste */

.stepbar {
  position: fixed; z-index: 60;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--th-line-soft);
  box-shadow: 0 -6px 24px rgba(29, 54, 97, .10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.stepbar[hidden] { display: none; }
.stepbar__inner { display: flex; align-items: center; gap: 12px; padding: 11px 0; }

.stepbar__back, .stepbar__next {
  min-height: 54px; padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-weight: 800; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.stepbar__back {
  flex: 0 0 auto;
  border: 1.5px solid var(--th-line);
  color: var(--th-navy);
}
.stepbar__back:hover { border-color: var(--th-navy); }
.stepbar__back[hidden] { display: none; }

.stepbar__next {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--th-navy); color: var(--th-white);
  font-size: 1.02rem;
  box-shadow: 0 8px 22px rgba(29, 54, 97, .26);
}
.stepbar__next:hover { background: var(--th-navy-hover); }
.stepbar__next:disabled { opacity: .7; cursor: progress; }
.stepbar__back:active, .stepbar__next:active { transform: scale(.975); }

/* Auf 320 px trugen "Zurueck" und "Feedback absenden" zusammen mehr Polsterung,
   als die Zeile hergibt: der Absenden-Knopf lief 27 px ueber den Rand hinaus
   und war rechts angeschnitten. Schmalere Polsterung loest das, ohne dass die
   Trefferflaeche unter 54 px Hoehe faellt. */
@media (max-width: 430px) {
  .stepbar__inner { gap: 10px; }
  .stepbar__back { padding-inline: 15px; }
  .stepbar__next { padding-inline: 14px; font-size: 1rem; }
}

/* Ladezustand: ohne sichtbare Rueckmeldung tippen Leute auf schlechtem Netz
   ein zweites Mal. */
.stepbar__spin {
  display: none;
  width: 17px; height: 17px; flex: none;
  border: 2.5px solid rgba(255, 255, 255, .4);
  border-top-color: var(--th-white);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.stepbar__next[aria-busy="true"] .stepbar__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 760px) {
  .stepbar__inner { justify-content: flex-end; }
  .stepbar__next { flex: 0 0 auto; min-width: 250px; }
}

/* ------------------------------------------------------------------ Fusszeile */

.foot { margin-top: auto; background: var(--th-navy); }
.foot__inner {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 6px 18px; min-height: 70px; padding: 16px 0;
  color: rgba(255, 255, 255, .84); font-size: .84rem; font-weight: 600;
}

/* -------------------------------------------------------------- Danke-Ansicht */

.done {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: start center;
  padding: 48px; overflow: auto;
  background: var(--th-navy-deep);
  color: var(--th-navy);
  overscroll-behavior: contain;
}
.done[hidden] { display: none; }
.done::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/v12/background-800.webp") center / cover no-repeat;
  opacity: .22;
  pointer-events: none;
}
.done__shell {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(1600px, 100%);
  min-height: min(860px, calc(100dvh - 96px));
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--th-white);
  box-shadow: 0 30px 70px rgba(2, 18, 35, .28);
}

.done__hero {
  position: relative;
  isolation: isolate;
  min-height: 700px;
  overflow: hidden;
  background: var(--th-navy-deep);
}
.done__picture,
.done__picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.done__picture img { object-fit: cover; object-position: 42% 50%; }
.done__hero::after {
  content: "";
  position: absolute; z-index: 1; inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 26, 54, .84) 0%, rgba(5, 31, 62, .36) 44%, rgba(3, 21, 44, .62) 100%),
    linear-gradient(90deg, rgba(4, 27, 55, .3), transparent 72%);
  pointer-events: none;
}
.done__hero-content {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: 48px;
  color: var(--th-white);
}
.done__brand { display: flex; align-items: center; gap: 24px; }
.done__logo { width: min(300px, 51%); height: auto; }
.done__campus {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, .7);
  color: var(--th-white);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.done__campus svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.done__hero-copy { max-width: 640px; padding-bottom: 9%; }
.done__hero-title {
  margin: 0 0 16px;
  color: var(--th-white);
  font-size: clamp(2.8rem, 4.2vw, 4.35rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(3, 20, 42, .38);
}
.done__hero-copy > p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  text-shadow: 0 1px 10px rgba(3, 20, 42, .44);
}

.done__panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding: 36px 64px 28px;
  background: var(--th-white);
}
.done__progress-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  min-height: 28px;
  color: var(--th-navy);
  font-size: .98rem;
}
.done__progress-marks { display: inline-flex; gap: 12px; }
.done__progress-marks i { display: block; width: 54px; height: 8px; border-radius: var(--radius-pill); background: var(--th-navy); }
.done__progress-marks i:last-child { background: var(--th-red); }
.done__heading h2 {
  color: var(--th-navy);
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  line-height: 1.08;
  text-wrap: balance;
}
.done__lead {
  margin: 14px 0 0;
  color: #62749B;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.5;
}
.done__lead strong { color: var(--th-navy); }

.done__achievement {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 38px;
  align-items: center;
}
.done__check {
  display: grid; place-items: center;
  width: 190px; height: 190px;
  border: 2px dashed #2260CE;
  border-radius: 50%;
  color: var(--th-navy);
}
.done__check svg { width: 112px; height: 112px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.done__achievement-copy > strong {
  display: block;
  color: var(--th-navy-deep);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}
.done__achievement-copy > p { margin: 8px 0 22px; color: var(--th-navy); }
.done__achievement-copy > span { display: block; margin-bottom: 7px; color: var(--th-navy); font-size: 1.08rem; }
.done__progress {
  height: 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #E7EBF0;
}
.done__progress i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--th-red); }

.done__actions { display: grid; gap: 14px; margin-top: auto; }
.done__certificate,
.done__back {
  min-height: 64px;
  border-radius: var(--radius-md);
  font-weight: 800;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.done__certificate {
  display: grid;
  grid-template-columns: 34px 1fr 28px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px 18px;
  border: 1px solid var(--th-navy);
  background: var(--th-navy);
  color: var(--th-white);
  text-align: left;
}
.done__certificate span { display: grid; }
.done__certificate strong { font-size: 1.03rem; }
.done__certificate small { font-size: .76rem; font-weight: 600; opacity: .85; }
.done__certificate svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.done__download-icon { width: 28px; height: 28px; }
.done__arrow { width: 26px; height: 26px; justify-self: end; }
/* Bis das persönliche PDF bereitsteht, ist die Fläche ein Hinweis und kein
   Knopf. Grau gefüllt und mit Pfeil sah sie wie ein gesperrter Download aus,
   den man nur noch nicht drücken darf. Gestrichelt, ohne Füllung und ohne
   Pfeil liest sie sich als Platzhalter. */
.done__certificate:disabled {
  border: 1px dashed #B7C2CF;
  background: transparent;
  color: #59677A;
  cursor: default;
}
.done__certificate:disabled .done__arrow { visibility: hidden; }
.done__certificate-note { margin: -4px 0 2px; color: var(--th-muted); font-size: .82rem; text-align: center; }
.done__back {
  display: grid;
  place-items: center;
  padding: 10px 18px;
  border: 1px solid var(--th-navy);
  color: var(--th-navy);
  background: var(--th-white);
  font-size: 1.05rem;
}
.done__back:active { transform: scale(.985); }

.done__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
}
.done__footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--th-navy);
  font-size: .78rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .done__back:hover { background: #F2F5F8; }
  .done__footer a:hover { color: var(--th-red-text); }
}

@media (max-width: 1099px) {
  .done { place-items: start center; padding: 32px; }
  .done__shell { grid-template-columns: 1fr; min-height: 0; }
  .done__hero { min-height: 330px; }
  .done__picture img { object-position: 44% 53%; }
  .done__hero-content { min-height: 330px; padding: 28px 32px; }
  .done__logo { width: min(250px, 48%); }
  .done__campus { min-height: 48px; font-size: .94rem; }
  .done__hero-copy { padding-bottom: 0; }
  .done__hero-title { margin-bottom: 10px; font-size: clamp(2.4rem, 6.2vw, 3.7rem); }
  .done__panel { padding: 34px 48px 24px; }
  .done__achievement { grid-template-columns: 160px minmax(0, 1fr); gap: 30px; }
  .done__check { width: 160px; height: 160px; }
  .done__check svg { width: 96px; height: 96px; }
}

@media (max-width: 639px) {
  .done { display: block; padding: 0; }
  .done__shell { min-height: 100dvh; border-radius: 0; }
  .done__hero { min-height: 270px; }
  .done__picture img { object-position: 37% 52%; }
  .done__hero-content { min-height: 270px; padding: 20px; }
  .done__brand { gap: 12px; }
  .done__logo { width: min(178px, 52%); }
  .done__campus { min-height: 38px; gap: 7px; padding-left: 12px; font-size: .72rem; }
  .done__campus svg { width: 20px; height: 20px; }
  .done__hero-title { margin-bottom: 7px; font-size: clamp(2rem, 10vw, 2.75rem); }
  .done__hero-copy > p:last-child { font-size: .92rem; }
  .done__panel { gap: 22px; padding: 24px 20px 20px; }
  .done__progress-head { justify-content: space-between; gap: 10px; font-size: .82rem; }
  .done__progress-marks { gap: 7px; }
  .done__progress-marks i { width: 32px; height: 6px; }
  .done__heading h2 { font-size: clamp(1.85rem, 9vw, 2.4rem); }
  .done__lead { margin-top: 10px; font-size: .94rem; }
  .done__achievement { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
  .done__check { width: 96px; height: 96px; }
  .done__check svg { width: 60px; height: 60px; stroke-width: 5.5; }
  .done__achievement-copy > strong { font-size: 1rem; line-height: 1.35; }
  .done__achievement-copy > p { margin: 5px 0 13px; font-size: .86rem; }
  .done__achievement-copy > span { margin-bottom: 5px; font-size: .92rem; }
  .done__progress { height: 9px; }
  .done__certificate, .done__back { min-height: 56px; }
  .done__certificate { grid-template-columns: 28px 1fr 22px; gap: 10px; padding-inline: 14px; }
  .done__certificate strong { font-size: .93rem; }
  .done__certificate small { font-size: .7rem; }
  .done__certificate-note { font-size: .76rem; }
  .done__footer { gap: 2px 18px; }
  .done__footer a { font-size: .74rem; }
}

@media (max-width: 560px) {
  .masthead__logo { width: min(176px, 48vw); }
  .masthead__home-action { width: 48px; padding-inline: 0; }
  .masthead__home-label { display: none; }
}

body.is-done { overflow: hidden; }

/* ------------------------------------------------------------- Vorschau */

/* Der Hinweis lag fest auf 96 px ueber dem unteren Rand und deckte damit auf
   dem Startbildschirm die Fusszeile zu, wo gar keine Schrittleiste steht.
   Jetzt richtet er sich danach, ob gerade ausgefuellt wird. */
.demo {
  position: fixed; z-index: 3000;
  left: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  margin: 0; padding: 8px 14px;
  border: 1px solid #EFC3CA; border-radius: var(--radius-pill);
  background: var(--th-white); color: var(--th-red-text);
  font-size: .74rem; font-weight: 800;
  box-shadow: 0 8px 24px rgba(29, 54, 97, .22);
  pointer-events: none;
}
body.is-stepping .demo { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
body.is-done .demo { display: none; }

/* ---------------------------------------------------- Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Sehr schmale Geraete: die fuenf Bewertungsfelder muessen 44px halten. */
@media (max-width: 360px) {
  .card, .intro__copy { padding-left: 15px; padding-right: 15px; }
  .rate__options { gap: 5px; }
  .isle__box { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding-left: 42px; }
  .isle__thumb { width: 48px; height: 46px; }
  .isle__thumb img { max-width: 44px; max-height: 42px; }
}