/* ============================================================
   kundenbuch – Grundgeruest
   Eigenes CSS statt Framework (Entscheidung 2026-09-08).
   Vorgaben, die hier von Anfang an sitzen:
     - Bedienelemente mindestens 44 px hoch (Apple HIG; die Nutzerinnen
       bedienen mit feuchten Fingern und in Eile)
     - Textkontrast >= 4.5:1, Rahmen/Bedienelemente >= 3:1 (WCAG 1.4.3/1.4.11)
     - sichtbarer Fokus (WCAG 2.4.7)
     - kein Horizontalscroll ab 320 px (WCAG 1.4.10)
   ============================================================ */

:root {
  --grund:        #ffffff;
  --flaeche:      #f4f6f8;
  --linie:        #c9d1d9;
  --text:         #1c2530;   /* auf --grund: 14.6:1 */
  --text-leise:   #55606d;   /* auf --grund:  6.4:1 */
  --haupt:        #0f6674;   /* Petrol, auf weiss 5.7:1 */
  --haupt-dunkel: #0a4d58;
  --haupt-hell:   #e3f1f3;
  --fehler:       #a3282b;   /* auf weiss 6.5:1 */
  --erfolg:       #1d6b3f;
  --radius:       10px;
  --abstand:      1rem;
  --tippziel:     44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:      #161b22;
    --flaeche:    #1f2630;
    --linie:      #3a4552;
    --text:       #e8edf2;
    --text-leise: #a8b3bf;
    --haupt:      #4bb8c9;
    --haupt-dunkel: #7fd3e0;
    --haupt-hell: #16323a;
    --fehler:     #ff8a8d;
    --erfolg:     #6ed49a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
  -webkit-text-size-adjust: 100%;
}

/* --- Kopfbereich ------------------------------------------------------- */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand);
  padding: 0.6rem var(--abstand);
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 600; color: var(--haupt); font-size: 1.15rem; }
.kopf-rechts { display: flex; align-items: center; gap: 0.75rem; }
.kopf-benutzer { color: var(--text-leise); font-size: 0.95rem; }

/* --- Inhalt ------------------------------------------------------------ */
.inhalt {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--abstand);
}
body.mittig .inhalt {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  max-width: 26rem;
}

h1 { font-size: 1.5rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }

.karte {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand);
  margin-bottom: var(--abstand);
}

.daten { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; }
.daten dt { color: var(--text-leise); }
.daten dd { margin: 0; }

.modulliste { margin: 0; padding-left: 1.2rem; }
.hinweis { color: var(--text-leise); }

/* --- Anmeldung --------------------------------------------------------- */
.anmeldung { width: 100%; }
.anmeldung h1 { color: var(--haupt); text-align: center; margin-bottom: 0.25rem; }
.unterzeile { text-align: center; color: var(--text-leise); margin: 0 0 1.25rem; }

form { display: flex; flex-direction: column; gap: 0.35rem; }

label { font-weight: 500; margin-top: 0.5rem; }

input[type="email"],
input[type="password"],
input[type="text"] {
  min-height: var(--tippziel);
  padding: 0.6rem 0.75rem;
  font-size: 17px;               /* verhindert das Zoomen in iOS-Safari */
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie); /* Kontrast >= 3:1 */
  border-radius: var(--radius);
}
input:focus-visible,
.knopf:focus-visible,
a:focus-visible {
  outline: 3px solid var(--haupt);
  outline-offset: 2px;
}

/* --- Knoepfe ----------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tippziel);
  padding: 0.5rem 1.1rem;
  font: inherit;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}
.knopf-haupt {
  margin-top: 1rem;
  background: var(--haupt);
  color: #fff;
  font-weight: 600;
}
.knopf-haupt:hover { background: var(--haupt-dunkel); }
.knopf-still {
  background: var(--grund);
  color: var(--haupt);
  border-color: var(--linie);
}
.knopf-still:hover { background: var(--haupt-hell); }

@media (prefers-color-scheme: dark) {
  .knopf-haupt { color: #08222a; }
}

/* --- Meldungen --------------------------------------------------------- */
.fehler, .erfolg {
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  margin: 0 0 0.75rem;
}
.fehler { color: var(--fehler); background: color-mix(in srgb, var(--fehler) 12%, transparent); }
.erfolg { color: var(--erfolg); background: color-mix(in srgb, var(--erfolg) 12%, transparent); }