/* ===========================================================================
   geo-bot - Design System & Comic Layout (FeelsWebMan Match)
   =========================================================================== */

/* 0. Schriften ------------------------------------------------------------- */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --bg:          #F5F6F7;
  --white:       #FFFFFF;
  --ink:         #0B0B0C;
  --text:        #4A4D52;
  --muted:       #8A8D93;
  --line:        #E2E3E6;
  --accent:      #FF4D12;   /* Signalorange - FeelsWebMan Akzent */
  --accent-light:#FFE9DF;
  --error:       #C2261B;
  
  --gut:         #12B76A;
  --gut-bg:      #E6F4ED;
  --mittel:      #FF4D12;
  --mittel-bg:   #FFE9DF;
  --schlecht:    #C2261B;
  --schlecht-bg: #FEE4E2;

  --display: "Unbounded", system-ui, sans-serif;
  --sans:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "DM Mono", ui-monospace, Consolas, monospace;

  --gutter:    clamp(16px, 4vw, 48px);   /* wie feelswebman.com */
  --section:   clamp(48px, 7vw, 96px);
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;

  /* Comic-System: Tusche-Kontur + harter Schatten */
  --stroke:  2.5px;
  --pop-xs:  2px 2px 0 var(--ink);
  --pop-sm:    3px 3px 0 var(--ink);
  --pop:     5px 5px 0 var(--ink);
  --pop-lg:  7px 7px 0 var(--ink);
  --ease:    cubic-bezier(.2, .7, .2, 1);
}

/* 2. Basis ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--ink); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--white); }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 { color: var(--ink); font-weight: 500; text-wrap: balance; }
h1 {
  font-family: var(--display);
  font-size: clamp(1.85rem, 1.1rem + 2.8vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.04em;
}
h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}
h3 {
  font-family: var(--display);
  font-size: clamp(1.1rem, .95rem + .6vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}

.leise { color: var(--text); font-size: 1.05rem; }
.still { color: var(--muted); font-size: .875rem; }
.mono  { font-family: var(--mono); font-size: .85rem; }

/* 3. Gerüst & Kopfzeile --------------------------------------------------- */
.huelle {
  width: 100%;
  max-width: 1280px;   /* bündig mit der Kopfzeile von feelswebman.com */
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.schmal { max-width: 760px; }

/* Sticky Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(245, 246, 247, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--stroke) solid var(--ink);
}
.topbar .huelle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 76px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.parent-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s;
}
.parent-back-link:hover {
  background: var(--accent-light);
  color: var(--accent);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.03em;
  color: var(--ink);
}
.marke span { color: var(--accent); }

/* Avatar Icon Header */
.header-bot-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: 2px 2px 0 var(--ink);
  object-fit: cover;
  flex-shrink: 0;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: .95rem;
  font-weight: 600;
}
.topbar nav a {
  color: var(--text);
  transition: color .15s;
}
.topbar nav a:hover {
  color: var(--ink);
}


/* Sprachumschalter EN/DE – wie auf feelswebman.com (alte geo-bot-Kopfzeile) */
.sprache { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--white); border: 2px solid var(--ink); font-family: var(--mono); font-size: .75rem; font-weight: 500; }
.sprache a, .sprache span { padding: 4px 10px; border-radius: 999px; line-height: 1.4; }
.sprache span { background: var(--ink); color: var(--white); }
.topbar nav .sprache a { color: var(--muted); }
.topbar nav .sprache a:hover { color: var(--ink); }

/* 4. Comic Buttons --------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: var(--stroke) solid var(--ink);
  background: var(--accent);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  box-shadow: var(--pop-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, transform .15s var(--ease), box-shadow .15s var(--ease);
}
.knopf:hover {
  background: var(--ink);
  color: var(--white);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--accent);
  text-decoration: none;
}
.knopf:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.knopf.stumm {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--pop-sm);
}
.knopf.stumm:hover {
  background: var(--ink);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}

.knopf.breit { width: 100%; }
.knopf[disabled], .knopf.laedt { opacity: .6; cursor: not-allowed; transform: none !important; }

/* 5. Comic-Karten & Panel System ------------------------------------------- */
.karte {
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: var(--pop);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.karte + .karte { margin-top: 24px; }

.karte.interaktiv:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--pop-lg);
}

/* 6. Formulare ------------------------------------------------------------- */
.feld { margin-bottom: 20px; }
.feld label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
}
.feld input[type=text],
.feld input[type=email],
.feld input[type=password],
.feld input[type=url],
.feld textarea,
.feld select {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.feld textarea { min-height: 120px; resize: vertical; }

.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  outline: none;
  background-color: var(--white);
  border-color: var(--ink);
  box-shadow: 3.5px 3.5px 0 var(--accent);
}

.hinweis {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--pop-sm);
  font-size: .95rem;
  margin-bottom: 24px;
}
.hinweis.fehler { background: var(--schlecht-bg); color: var(--schlecht); }
.hinweis.gut    { background: var(--gut-bg); color: var(--gut); }
.hinweis.info   { background: var(--accent-light); color: var(--ink); }

/* 7. Marker & Badges ------------------------------------------------------- */
.marker {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.marker.gut      { background: var(--gut-bg); color: var(--gut); }
.marker.schlecht { background: var(--schlecht-bg); color: var(--schlecht); }
.marker.akzent   { background: var(--accent); color: var(--white); }

/* 8. AI Bot Avatar Badge & Sprechblase -------------------------------------- */
.bot-avatar-badge {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}
.bot-avatar-frame {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--pop-sm);
  overflow: visible;
}
.bot-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.bot-online-dot {
  position: absolute;
  bottom: 0px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
}

.comic-bubble {
  position: relative;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: 18px;
  padding: 14px 20px;
  box-shadow: var(--pop);
  max-width: 620px;
}
.comic-bubble::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 24px;
  border-width: 8px 11px 8px 0;
  border-style: solid;
  border-color: transparent var(--ink) transparent transparent;
}
.comic-bubble::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 24px;
  border-width: 6px 9px 6px 0;
  border-style: solid;
  border-color: transparent var(--white) transparent transparent;
}
.comic-bubble__talk {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
}

/* 9. Hero / Startseite ----------------------------------------------------- */
.held { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 96px); }
.held h1 { max-width: 20ch; margin-bottom: 20px; }
.held .unterzeile {
  font-size: clamp(1.05rem, 1rem + 1vw, 1.25rem);
  color: var(--text);
  max-width: 58ch;
  line-height: 1.6;
}

.check-karte { margin-top: 36px; }
.check-gitter { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.check-gitter .voll { grid-column: 1 / -1; }
@media (max-width: 640px) { .check-gitter { grid-template-columns: 1fr; } }

/* 3-Schritte Feature Karten */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 840px) { .steps-grid { grid-template-columns: 1fr; } }

.step-card {
  position: relative;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--pop);
  display: flex;
  flex-direction: column;
}
.step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: var(--stroke) solid var(--ink);
  background: var(--accent-light);
  color: var(--accent);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: var(--pop-xs);
  margin-bottom: 18px;
}
.step-card:last-child .step-num {
  background: var(--accent);
  color: var(--white);
}

/* 10. Ergebnis Ring & Metrics ---------------------------------------------- */
.ergebnis-kopf {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.ring {
  --wert: 0;
  position: relative;
  flex: 0 0 auto;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--ring-farbe, var(--accent)) calc(var(--wert) * 3.6deg), #E2E3E6 0);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--pop-sm);
}
.ring::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: var(--white);
  border-radius: 50%;
  border: 2px solid var(--ink);
}
.ring .zahl {
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1.1;
}
.ring .zahl b {
  display: block;
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ink);
}
.ring .zahl small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
}

.kennzahlen {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 28px;
}
.kennzahl {
  background: var(--bg);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--pop-xs);
}
.kennzahl b {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: -.03em;
  color: var(--ink);
}
.kennzahl span { color: var(--muted); font-size: .85rem; font-weight: 500; }

/* Ergebnis Tabellen */
.tabelle-rollt { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.liste { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.liste th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 12px 12px 0;
  border-bottom: 2px solid var(--ink);
}
table.liste td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.liste tr:last-child td { border-bottom: none; }

.balken {
  height: 10px;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  min-width: 80px;
}
.balken i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .4s var(--ease);
}

/* 11. Maßnahmen Panel Cards ----------------------------------------------- */
.massnahme {
  border-left: 6px solid var(--accent);
}
.massnahme .warum { color: var(--text); font-size: .95rem; margin-bottom: 16px; }
.massnahme details summary {
  cursor: pointer;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
}
.massnahme details summary:hover { background: var(--accent-light); }
.massnahme details pre {
  background: #111318;
  color: #F5F6F7;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  padding: 20px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--mono);
  font-size: .86rem;
  line-height: 1.6;
  margin-top: 14px;
  box-shadow: var(--pop-sm);
}

/* Baustein mit Kopieren-Knopf */
.baustein { position: relative; }
.kopieren {
  position: absolute; top: 24px; right: 12px; z-index: 1;
  font: 600 .78rem var(--mono); padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink);
}
.kopieren:hover { background: var(--accent-light); }

/* Berichtkopf mit PDF-Knopf */
.bericht-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.bericht-methode { margin-top: 28px; font-size: .85rem; max-width: 72ch; }

/* Die Fragen im Einzelnen */
.fragenliste { list-style: none; margin: 16px 0 0; padding: 0; }
.fragenliste > li { padding: 16px 0; border-top: 1px solid var(--line); }
.frage-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.frage-nr {
  display: inline-grid; place-content: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--ink); font: 600 .8rem var(--mono); color: var(--ink); background: var(--white);
}
.frage-text { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.frage-namen { margin: 8px 0 0 40px; font-size: .9rem; color: var(--text); }
.frage-namen .eigene { color: var(--gut); }
.frage-antwort { margin: 8px 0 0 40px; }
.frage-antwort summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--accent); }
.frage-antwort p { margin: 8px 0 0; white-space: pre-wrap; line-height: 1.6; font-size: .92rem; color: var(--text); }
@media (max-width: 640px) {
  .frage-kopf { grid-template-columns: auto 1fr; }
  .frage-kopf .marker { grid-column: 2; justify-self: start; }
  .frage-namen, .frage-antwort { margin-left: 0; }
}

/* Als PDF speichern: Druckansicht ohne Navigation, Knöpfe und Werbung */
@media print {
  /* Kopf- und Fußzeile von feelswebman.com (header.top, footer.foot) und die alte geo-bot-Leiste */
  .top, .foot, .mobilmenue, .skip-link, .topbar, footer.fuss, .nicht-drucken, .kopieren { display: none !important; }
  body { background: #fff; }
  /* Browser lassen beim Drucken Hintergrundfarben weg – Balken, Ring und Marker
     bestehen aber daraus. Farben im Bericht deshalb ausdrücklich behalten. */
  .balken, .balken i, .ring, .ring *, .marker, .kennzahl, .frage-nr {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Große Karten dürfen umbrechen (sonst halbleere Seiten), kleine Einheiten bleiben zusammen */
  .karte { box-shadow: none !important; }
  .frage-kopf, .frage-namen, table.liste tr, .ergebnis-kopf, .kennzahlen, .massnahme h3, .massnahme .warum { break-inside: avoid; }
  .frage-kopf { break-after: avoid; }
  h2, h3 { break-after: avoid; }
  .massnahme details pre { background: #fff; color: #000; box-shadow: none; border: 1px solid #999; }
  .massnahme details summary, .frage-antwort summary { display: none; }
  a { color: inherit; text-decoration: none; }
}

/* 12. Preise Grid --------------------------------------------------------- */
.preis-gitter {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 36px;
}
.preis {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.preis.beliebt {
  border-color: var(--accent);
  box-shadow: var(--pop-lg);
  transform: scale(1.02);
}
.preis .betrag {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ink);
  margin: 12px 0;
}
.preis .betrag small {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  color: var(--muted);
}
.preis ul { list-style: none; padding: 0; margin: 20px 0; flex: 1; }
.preis li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 12px;
  font-size: .95rem;
  color: var(--text);
}
.preis li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* 13. Spinner & Motion ----------------------------------------------------- */
.laeuft { display: flex; align-items: center; gap: 16px; color: var(--ink); font-weight: 600; }
.kreisel {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dreh .75s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* Laufanzeige: Fenster offen lassen + Arbeits-Widget mit Eieruhr */
.hinweis.warnung {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 24px;
  background: var(--accent-light); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--pop-sm);
}
.hinweis.warnung p { margin: 0; }
.warnung__zeichen {
  flex: 0 0 auto; display: inline-grid; place-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--white); font: 700 .95rem var(--display); margin-top: 1px;
}
.arbeit__kopf { display: flex; align-items: center; gap: 20px; }
.arbeit__stand { margin: 0; font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.arbeit__zeit { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
/* Scan: GEO-bot im Kreis, ein Bogen läuft ruhig herum, ein Puls läuft nach außen aus */
.scan { position: relative; width: 64px; height: 64px; flex: 0 0 auto; }
.scan__bild { position: absolute; inset: 7px; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background: var(--white); border: 2px solid var(--ink); }
.scan__bogen {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--accent) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: dreh 1.6s linear infinite;
}
.scan__puls { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: puls 2.4s var(--ease) infinite; }
@keyframes puls { 0% { transform: scale(.85); opacity: .5; } 100% { transform: scale(1.45); opacity: 0; } }
.arbeit--fehler .scan__bogen, .arbeit--fehler .scan__puls { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .scan__bogen, .scan__puls { animation: none; } .scan__bogen { opacity: .6; } }

.schritte { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.schritte li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .95rem; }
.schritte li::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line);
}
.schritte li.aktiv { color: var(--ink); font-weight: 600; }
.schritte li.aktiv::before { border-color: var(--accent); border-top-color: transparent; animation: dreh .9s linear infinite; }
.schritte li.erledigt { color: var(--text); }
.schritte li.erledigt::before { content: "✓"; display: grid; place-content: center; border-color: var(--gut); background: var(--gut); color: var(--white); font-size: .7rem; font-weight: 700; }
.schritte__zahl { font-family: var(--mono); font-weight: 500; color: var(--muted); }
@media (max-width: 560px) { .arbeit__kopf { gap: 16px; } }

/* 14. Fußzeile (FeelsWebMan Match) ---------------------------------------- */
footer.fuss {
  border-top: var(--stroke) solid var(--ink);
  margin-top: 96px;
  padding: 48px 0 64px;
  background: var(--white);
  color: var(--text);
  font-size: .9375rem;
}
footer.fuss a { color: var(--text); transition: color .15s; }
footer.fuss a:hover { color: var(--accent); text-decoration: underline; }
footer.fuss .foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 760px) {
  footer.fuss .foot-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Kopfzeile auf dem Handy zweizeilig: Marke oben, Menü samt EN/DE darunter.
     "Check starten" entfällt dort – das Logo führt ohnehin zum Check. */
  .topbar .huelle { height: auto; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .parent-back-link { display: none; }
  .topbar nav { width: 100%; gap: 16px; font-size: .9rem; }
  .topbar nav .knopf:not(.stumm) { display: none; }
  .topbar nav .sprache { margin-left: auto; }
}

footer.fuss .zeilen {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-weight: 500;
}

.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}