/* ==========================================================================
   Computerhilfe Heidenheim – Hilfe-Assistent
   --------------------------------------------------------------------------
   Gestaltung

   Leitgedanken:
   - Grundschrift 20 px und groesser
   - grosse Schaltflaechen, viel Abstand, hoher Kontrast
   - ruhig und serioes, keine Spielereien, keine Animationen
   - zuerst fuer das Smartphone gebaut, dann fuer Tablet und Bildschirm
   ========================================================================== */

/* --------------------------------------------------------------------------
   Farben und Schrift
   -------------------------------------------------------------------------- */
:root {
  --schrift: Verdana, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --text:        #1b2a38;   /* Kontrast auf Weiss: 14:1 */
  --text-leise:  #4a5b6b;   /* Kontrast auf Weiss:  7:1 */
  --grund:       #eef1f5;
  --karte:       #ffffff;
  --rahmen:      #b3c0cd;
  --rahmen-fein: #d7dee6;

  --blau:        #12395c;   /* Weiss darauf: 11:1 */
  --blau-hell:   #1d5384;
  --blau-zart:   #eef4fa;

  --orange:      #fbb040;   /* Hausfarbe – nur als Schmuck, nie als Information */
  --orange-text: #8a5300;   /* dunkle Variante, falls Text noetig */

  --rot:         #96231d;   /* Fehlermeldung, Kontrast auf Weiss: 7:1 */

  --radius: 10px;
}

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

html {
  /* Prozent statt Pixel: So bleibt die eingestellte Schriftgroesse
     des Nutzers wirksam. 125 % sind bei Standardeinstellung 20 px. */
  font-size: 125%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--grund);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

h1, h2, p, ul, li, figure, address { margin: 0; }
ul { list-style: none; padding: 0; }

a { color: var(--blau); }
a:hover { color: var(--blau-hell); }

/* Fokus: immer deutlich sichtbar, auf jedem Untergrund */
:focus-visible {
  outline: 4px solid var(--blau);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Aeltere Browser ohne :focus-visible */
:focus:not(:focus-visible) { outline: none; }

/* Bewegung nur, wenn der Nutzer sie nicht abgeschaltet hat */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Sprungmarke fuer Tastatur und Screenreader
   -------------------------------------------------------------------------- */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blau);
  color: #fff;
  padding: 14px 20px;
  z-index: 10;
  text-decoration: none;
}
.sprungmarke:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Kopf- und Fussbereich
   -------------------------------------------------------------------------- */
.kopf {
  background: var(--karte);
  border-bottom: 4px solid var(--orange);
  padding: 14px 20px;
}
.kopf__inner,
.fuss__inner {
  max-width: 780px;
  margin: 0 auto;
}
.kopf__marke {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--blau);
  text-decoration: none;
}
.kopf__marke:hover { text-decoration: underline; }

.fuss {
  padding: 28px 20px 40px;
  font-size: 0.8rem;
  color: var(--text-leise);
  text-align: center;
}
.fuss a { color: var(--text-leise); }
.fuss__telefon {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  color: var(--blau);
  margin-bottom: 12px;
  text-decoration: none;
}
.fuss__links a { margin: 0 10px; display: inline-block; padding: 6px 0; }

/* --------------------------------------------------------------------------
   Karte mit dem Assistenten
   -------------------------------------------------------------------------- */
.huelle {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 14px 8px;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--rahmen-fein);
  border-radius: 14px;
  padding: 22px 18px 26px;
}

/* --------------------------------------------------------------------------
   Leiste mit Zurueck / Schritt / Von vorne
   -------------------------------------------------------------------------- */
.leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--rahmen-fein);
}

.leiste__knopf {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--blau);
  background: var(--karte);
  border: 2px solid var(--rahmen);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-height: 50px;
  cursor: pointer;
}
.leiste__knopf:hover { background: var(--blau-zart); border-color: var(--blau); }
.leiste__knopf--leise { color: var(--text-leise); }
.leiste__pfeil { font-size: 1.1em; }

.leiste__schritt {
  font-size: 0.8rem;
  color: var(--text-leise);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Ueberschriften und Einleitungen
   -------------------------------------------------------------------------- */
.titel {
  font-size: clamp(1.45rem, 1.15rem + 1.6vw, 1.85rem);
  line-height: 1.25;
  color: var(--blau);
  hyphens: auto;
  margin-bottom: 14px;
}
.titel:focus { outline: none; }        /* Fokus nur zum Vorlesen, nicht sichtbar */

.einleitung {
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.hinweis-oben {
  font-size: 0.85rem;
  color: var(--text-leise);
  margin-bottom: 26px;
}

.frage {
  font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.45rem);
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 12px;
  hyphens: auto;
}
.frage-hinweis {
  font-size: 0.85rem;
  color: var(--text-leise);
  margin-bottom: 20px;
}
.titel + .optionen,
.frage + .optionen { margin-top: 22px; }

/* --------------------------------------------------------------------------
   Auswahlknoepfe
   -------------------------------------------------------------------------- */
.optionen { margin-top: 22px; }
.optionen__zeile + .optionen__zeile { margin-top: 14px; }

.option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 78px;
  padding: 16px 18px 16px 26px;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.35;
  text-align: left;
  color: var(--text);
  background: var(--karte);
  border: 2px solid var(--rahmen);
  border-radius: var(--radius);
  /* Der orange Balken links ist reine Zierde und traegt keine Information. */
  box-shadow: inset 8px 0 0 0 var(--orange);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.option:hover {
  background: var(--blau-zart);
  border-color: var(--blau);
}
.option:active { background: #dfeaf5; }

.option__symbol {
  font-size: 1.6rem;
  line-height: 1;
  flex: 0 0 auto;
  width: 1.7em;
  text-align: center;
}
.option__texte { display: block; flex: 1 1 auto; }
.option__text  { display: block; }
.option__hinweis {
  display: block;
  font-size: 0.78rem;
  color: var(--text-leise);
  margin-top: 3px;
}

/* "Ich weiss es nicht" und "Etwas anderes" – gleichwertig, nur ruhiger */
.option--ausweich {
  box-shadow: inset 8px 0 0 0 var(--rahmen);
  background: #fafbfc;
}
.option--ausweich:hover { background: var(--blau-zart); }

/* Beim Zurueckgehen sichtbar: das war die letzte Wahl */
.option--gewaehlt { border-color: var(--blau); background: var(--blau-zart); }
.option__marke {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--blau);
  border: 1px solid var(--blau);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Ab dem grossen Bildschirm zwei Spalten bei langen Listen.
   Auf Handy und Tablet bleibt es immer einspaltig. */
@media (min-width: 900px) {
  .optionen--breit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .optionen--breit .optionen__zeile + .optionen__zeile { margin-top: 0; }
  .optionen--breit .option { height: 100%; }
}

/* --------------------------------------------------------------------------
   Ergebnisse
   -------------------------------------------------------------------------- */
.ergebnis { margin-bottom: 26px; }
.ergebnis__text   { font-size: 1.02rem; }
.ergebnis__zusatz { font-size: 0.9rem; color: var(--text-leise); margin-top: 12px; }

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 76px;
  padding: 18px 20px;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.3;
  text-align: center;
  color: #ffffff;
  background: var(--blau);
  border: 2px solid var(--blau);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.cta:hover  { background: var(--blau-hell); border-color: var(--blau-hell); color: #ffffff; text-decoration: none; }
.cta:active { background: #0d2b46; }
.cta[disabled] { background: var(--text-leise); border-color: var(--text-leise); cursor: default; }
.cta--gross { margin-top: 8px; }
.cta__zeile  { font-size: 0.9rem; }
.cta__nummer { font-size: 1.25rem; font-weight: bold; letter-spacing: 0.02em; }

.fussnote {
  font-size: 0.8rem;
  color: var(--text-leise);
  margin-top: 14px;
}

.adresse {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--grund);
  border-radius: var(--radius);
}

.anruf-alternative {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--text-leise);
  text-align: center;
}
.anruf-alternative__nummer {
  font-size: 1.05rem;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  padding: 6px 0;
}

.ergebnis-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid var(--rahmen-fein);
}

/* --------------------------------------------------------------------------
   Formulare (Freitext und Rueckruf)
   -------------------------------------------------------------------------- */
.formular { margin-top: 10px; }

.feld__beschriftung {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 22px;
}
.feld__hinweis {
  font-size: 0.8rem;
  color: var(--text-leise);
  margin-bottom: 8px;
}

.feld {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--text);
  background: var(--karte);
  border: 2px solid var(--rahmen);
  border-radius: var(--radius);
}
.feld:focus { border-color: var(--blau); }
.feld--gross { min-height: 130px; line-height: 1.5; resize: vertical; }
.feld--fehler { border-color: var(--rot); border-width: 3px; }

.fehlermeldung {
  font-size: 0.95rem;
  color: var(--rot);
  background: #fdf2f1;
  border: 2px solid var(--rot);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.fehlermeldung:focus { outline: 4px solid var(--rot); outline-offset: 3px; }

.datenschutz {
  font-size: 0.75rem;
  color: var(--text-leise);
  margin-top: 16px;
}

/* Spamfalle: fuer Menschen unsichtbar, fuer Roboter sichtbar */
.spamfalle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Fallback, wenn JavaScript nicht laeuft
   -------------------------------------------------------------------------- */
.ohne-js__liste { margin-top: 18px; }
.ohne-js__liste li + li { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Kleine Bildschirme
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  /* Die Schriftgroesse bleibt bewusst unveraendert (rund 20 px).
     Platz wird stattdessen ueber schmalere Raender gewonnen. */
  .huelle { padding: 14px 10px 8px; }
  .karte  { padding: 18px 14px 22px; border-radius: 10px; }
  .option { padding-left: 22px; gap: 12px; }
  .option__symbol { font-size: 1.4rem; width: 1.5em; }
  .leiste { gap: 8px; }
  .leiste__knopf { padding: 11px 12px; font-size: 0.8rem; }
}

/* Sehr grosse Bildschirme: Karte nicht ins Unendliche ziehen */
@media (min-width: 1100px) {
  .huelle { padding-top: 34px; }
  .karte  { padding: 34px 40px 40px; }
}