/* Fahrgemeinschaften.
   Zuerst fuers Handy gebaut - dort wird die Seite benutzt, meist im Stehen
   und mit einer Hand. Deshalb grosse Flaechen, wenig Text, keine Tabellen. */

:root {
  --grund: #f4f6fb;
  --karte: #ffffff;
  --karte-hoch: #eef1f8;
  --rand: #dde2ee;
  --text: #1a1f2e;
  --leise: #66708a;

  --akzent: #0d7d6b;
  --akzent-hell: #11a08a;
  --akzent-sanft: #e2f4f0;

  --warn: #b4531a;
  --warn-sanft: #fdeee2;
  --gut: #0d7d6b;

  --radius: 16px;
  --schatten: 0 2px 10px rgba(20, 30, 60, 0.07);
  --schatten-hoch: 0 12px 40px rgba(20, 30, 60, 0.18);
  --schrift: "Segoe UI", system-ui, -apple-system, "Inter", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #11141c;
    --karte: #1a1e29;
    --karte-hoch: #232837;
    --rand: #2e3547;
    --text: #edf0f7;
    --leise: #98a2ba;

    --akzent: #2ac0a5;
    --akzent-hell: #3fd9bd;
    --akzent-sanft: #17342f;

    --warn: #f0a072;
    --warn-sanft: #3a2418;
    --gut: #2ac0a5;

    --schatten: 0 2px 10px rgba(0, 0, 0, 0.35);
    --schatten-hoch: 0 12px 40px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--schrift);
  background: var(--grund);
  color: var(--text);
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}

button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
.verstecken { display: none !important; }

/* ------------------------------------------------------------ Anmeldung */

.tor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--grund);
}

.tor-kasten {
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 22px;
  padding: 30px 24px;
  box-shadow: var(--schatten);
}

.tor-symbol { font-size: 44px; line-height: 1; }
.tor-kasten h1 { font-size: 24px; }

#passwort {
  margin-top: 6px;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid var(--rand);
  background: var(--grund);
  text-align: center;
  font-size: 17px;
  min-height: 52px;
}

#passwort:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }

.fehler { color: var(--warn); font-size: 14px; font-weight: 600; }

/* --------------------------------------------------------------- Knoepfe */

.knopf {
  background: var(--akzent);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

.knopf:hover { background: var(--akzent-hell); }
.knopf:active { transform: scale(0.97); }
.knopf:disabled { opacity: 0.5; cursor: default; }

.knopf-leise {
  background: var(--karte-hoch);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 42px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.knopf-leise:hover { background: var(--rand); }
.knopf-leise.breit { width: 100%; border-radius: 12px; margin-top: 4px; }
.knopf-leise.gefahr { color: var(--warn); }

.knopf-winzig {
  background: none;
  border: none;
  color: var(--leise);
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  min-height: 34px;
  border-radius: 8px;
  cursor: pointer;
}

.knopf-winzig:hover { background: var(--karte-hoch); }

/* ----------------------------------------------------------------- Seite */

.seite {
  max-width: 760px;
  margin: 0 auto;
  padding:
    max(16px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.oberzeile {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 3px;
}

.titel {
  background: none;
  border: none;
  padding: 0;
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
  color: inherit;
  border-bottom: 2px dashed transparent;
}

.titel:hover { border-bottom-color: var(--rand); }

.zahlen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.zahl {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 7px 11px;
  text-align: center;
  min-width: 62px;
}

.zahl b { display: block; font-size: 17px; line-height: 1.1; }
.zahl span { font-size: 10px; font-weight: 700; text-transform: uppercase;
             letter-spacing: 0.07em; color: var(--leise); }
.zahl.hebt b { color: var(--akzent); }

/* ----------------------------------------------------------------- Suche */

/* Bei 80 Namen ist Tippen schneller als Scrollen. Die Suche filtert beides:
   die offene Liste und die Autos samt ihren Mitfahrern. */
.suchzeile {
  position: relative;
  display: flex;
}

#suche {
  width: 100%;
  padding: 13px 44px 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--rand);
  background: var(--karte);
  font-size: 16px;
  min-height: 50px;
  box-shadow: var(--schatten);
}

#suche:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
#suche::-webkit-search-cancel-button { display: none; }

.suche-weg {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  color: var(--leise);
  font-size: 15px;
  border-radius: 10px;
  cursor: pointer;
}

.suche-weg:hover { background: var(--karte-hoch); color: var(--text); }

.such-ergebnis {
  margin-top: -10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
}

/* --------------------------------------------------------------- Bloecke */

.block { display: flex; flex-direction: column; gap: 12px; }

.block-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.block-kopf h2 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--leise);
  display: flex;
  align-items: center;
  gap: 8px;
}

.zaehler {
  background: var(--karte-hoch);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  color: var(--text);
}

.leer-hinweis {
  background: var(--karte);
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  color: var(--leise);
  font-size: 14px;
  line-height: 1.6;
}

/* -------------------------------------------------------------- Personen */

.personen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Ab etwa 15 Namen wuerde die offene Liste den halben Bildschirm fuellen und
   die Autos waeren nur noch durch langes Wischen erreichbar. Deshalb bekommt
   sie dann eine eigene Hoehe und scrollt in sich. */
.personen.viele {
  max-height: 42dvh;
  overflow-y: auto;
  padding: 2px;
  border-radius: 14px;
  background: var(--karte-hoch);
  border: 1px solid var(--rand);
  padding: 10px;
}

/* Eine Person ist eine Schaltflaeche - antippen oeffnet die Zuordnung.
   Mindestens 44 px hoch, sonst trifft man sie am Handy nicht sicher. */
.person {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 8px 13px;
  min-height: 46px;
  justify-content: center;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--schatten);
  transition: transform 0.1s ease, border-color 0.15s ease;
}

.person:hover { border-color: var(--akzent); }
.person:active { transform: scale(0.97); }

.person b { font-size: 15px; font-weight: 700; }
.person small { font-size: 11px; color: var(--leise); }

.person.im-auto {
  background: transparent;
  box-shadow: none;
  border-style: solid;
  border-color: var(--rand);
}

/* ----------------------------------------------------------------- Autos */

.autos { display: flex; flex-direction: column; gap: 12px; }

.auto {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.auto-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 15px;
  cursor: pointer;
  text-align: left;
}

.auto-kopf:hover { background: var(--karte-hoch); }

.auto-symbol { font-size: 22px; line-height: 1; flex: 0 0 auto; }

.auto-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die freien Plaetze sind die wichtigste Zahl auf der Seite. */
.auto-plaetze {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--akzent-sanft);
  color: var(--akzent);
  white-space: nowrap;
}

.auto-plaetze.voll { background: var(--karte-hoch); color: var(--leise); }
.auto-plaetze.zuviel { background: var(--warn-sanft); color: var(--warn); }

.auto-koerper {
  padding: 0 15px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.auto-leer { font-size: 13px; color: var(--leise); padding: 2px 0 4px; }

.platz-frei {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px dashed var(--rand);
  border-radius: 12px;
  padding: 8px 13px;
  min-height: 46px;
  color: var(--leise);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.platz-frei:hover { border-color: var(--akzent); color: var(--akzent); }

/* ------------------------------------------------------------ Blatt/Sheet */

dialog { border: none; padding: 0; background: none; color: inherit; }
dialog::backdrop { background: rgba(15, 20, 35, 0.5); backdrop-filter: blur(2px); }

.blatt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  max-height: 85dvh;
  overflow-y: auto;
  background: var(--karte);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--schatten-hoch);
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
}

.blatt[open] { animation: hoch 0.22s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes hoch {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.blatt-griff {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--rand);
  margin: 2px auto 14px;
}

.blatt h3 { font-size: 19px; margin-bottom: 2px; }
.blatt .leise { font-size: 13px; color: var(--leise); margin-bottom: 10px; }

.blatt-suchfeld {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--rand);
  background: var(--grund);
  font-size: 16px;
  min-height: 48px;
  margin-bottom: 4px;
}

.blatt-suchfeld:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.blatt-suchfeld::-webkit-search-cancel-button { display: none; }

/* Gefundene Namen heben sich ab, auch wenn sie in einem Auto sitzen */
.person.treffer {
  border-color: var(--akzent);
  background: var(--akzent-sanft);
}

.blatt-inhalt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 14px;
}

/* Eine Wahlmoeglichkeit im Blatt - ganze Breite, damit man sie trifft. */
.wahl {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 13px 15px;
  min-height: 56px;
  cursor: pointer;
  text-align: left;
}

.wahl:hover { border-color: var(--akzent); background: var(--akzent-sanft); }
.wahl:active { transform: scale(0.99); }

.wahl-symbol { font-size: 20px; flex: 0 0 auto; }
.wahl-text { flex: 1 1 auto; min-width: 0; }
.wahl-text b { display: block; font-size: 15px; font-weight: 700; }
.wahl-text small { font-size: 12px; color: var(--leise); }

.wahl-rechts {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--akzent);
  white-space: nowrap;
}

.wahl.voll .wahl-rechts { color: var(--leise); }
.wahl.gefahr { border-color: transparent; }
.wahl.gefahr .wahl-text b { color: var(--warn); }

.blatt-trenner {
  height: 1px;
  background: var(--rand);
  margin: 4px 0;
  border: none;
}

/* ------------------------------------------------------------- Formulare */

.formular {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100% - 28px, 420px);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--karte);
  border-radius: 20px;
  box-shadow: var(--schatten-hoch);
  padding: 22px;
}

.formular h3 { font-size: 19px; margin-bottom: 16px; }

.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.feld label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
}

.feld input, .feld textarea {
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--rand);
  background: var(--grund);
  font-size: 16px; /* kleiner zoomt iOS beim Antippen hinein */
  min-height: 50px;
  width: 100%;
}

.feld textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.feld .hinweis { font-size: 12px; color: var(--leise); }

/* Plaetze werden mit Knoepfen gesetzt, nicht getippt - schneller am Handy */
.stufen { display: flex; flex-wrap: wrap; gap: 7px; }

.stufe {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--rand);
  background: var(--grund);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.stufe.gewaehlt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

/* Unauffaelliger Umstieg im Formular - kein dritter Knopf in der Fusszeile,
   der von den beiden wichtigen ablenkt. */
.textknopf {
  background: none;
  border: none;
  padding: 2px 0 6px;
  color: var(--akzent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 40px;
}

.formular-fuss {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

.formular-fuss .knopf, .formular-fuss .knopf-leise { flex: 1 1 auto; }

/* ------------------------------------------------------------------ Fuss */

.fuss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--leise);
}

.puls {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gut);
  animation: pulsen 2.6s ease-out infinite;
}

.puls.gestoert { background: var(--warn); animation: none; }

@keyframes pulsen {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.meldung {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 200;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--text);
  color: var(--grund);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--schatten-hoch);
  max-width: calc(100% - 32px);
  text-align: center;
}

.meldung.schlecht { background: var(--warn); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}