/* ==========================================================================
   GrillApp — Gestaltung

   Die Farbwelt kommt von der Sache selbst: Glut, Flamme, Holzkohle, warmes
   Papier. Kein Firmenblau, weil das hier kein Verwaltungsvorgang ist.

   Drei Regeln, die alles andere bestimmen:

   1. **Daumenreichweite.** Bedient wird einhändig, im Stehen, oft mit fettigen
      Fingern. Alles Wichtige sitzt unten, Berührflächen sind mindestens 48 px,
      und die wichtigste Handlung eines Bildschirms ist immer die größte.
   2. **Bewegung erklärt, was passiert ist, und tritt nie zwischen den Nutzer
      und seine Absicht.** Antwort auf eine Berührung unter 100 ms, Übergang
      zwischen zwei Zuständen ~180 ms. Mehr gibt es nicht.
   3. **Die Farbe trägt keine Information allein.** Zusage und Absage
      unterscheiden sich in Form und Text, nicht nur in Grün und Rot — jeder
      zwölfte Mann sieht Rot und Grün nicht als verschiedene Farben.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --glut:        #E2571E;
  --glut-hell:   #FF7A3D;
  --flamme:      #F5A524;
  --kohle:       #241D18;

  --bg:          #FBF6F0;
  --bg-tief:     #F3EBE2;
  --flaeche:     #FFFFFF;
  --flaeche-2:   #F7F1EA;
  --linie:       #E8DDD1;
  --text:        #241D18;
  --text-leise:  #7C6C5F;
  --akzent:      var(--glut);
  --akzent-weich:#FCEDE4;
  --gut:         #2E7D4F;
  --gut-weich:   #E4F2E9;
  --warn:        #B4620A;
  --warn-weich:  #FBEEDC;
  --schlecht:    #C0392B;
  --schlecht-weich:#FBE9E7;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;

  --schatten-1: 0 1px 2px rgba(36, 29, 24, .06), 0 1px 3px rgba(36, 29, 24, .04);
  --schatten-2: 0 2px 8px rgba(36, 29, 24, .07), 0 8px 24px rgba(36, 29, 24, .06);
  --schatten-3: 0 8px 32px rgba(36, 29, 24, .16);

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --zahl: ui-rounded, "SF Pro Rounded", var(--schrift);

  --schnell: 90ms;
  --normal: 180ms;
  --kurve: cubic-bezier(.2, .8, .2, 1);

  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #15110F;
    --bg-tief:     #0F0C0A;
    --flaeche:     #211B17;
    --flaeche-2:   #2A221D;
    --linie:       #372D26;
    --text:        #F6EEE6;
    --text-leise:  #A8988B;
    --akzent:      var(--glut-hell);
    --akzent-weich:#3A2117;
    --gut:         #5FCB8E;
    --gut-weich:   #17301F;
    --warn:        #F0A94B;
    --warn-weich:  #33230F;
    --schlecht:    #FF7B6B;
    --schlecht-weich:#3A1A16;
    --schatten-1: 0 1px 2px rgba(0, 0, 0, .4);
    --schatten-2: 0 2px 8px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .3);
    --schatten-3: 0 8px 32px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body { min-height: 100dvh; }

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .6em; }
a  { color: var(--akzent); }

button, input, select, textarea { font: inherit; color: inherit; }

/* Grundmaß für jedes eingebettete Zeichen. Ohne diese Zeile zieht sich ein
   <svg> ohne Größenangabe auf die volle Breite seines Kastens — und eine
   Ortsmarke wird zum bildschirmhohen Tropfen. Die Bausteine weiter unten
   setzen davon abweichende Maße; sie sind spezifischer und gewinnen. */
svg { width: 22px; height: 22px; flex: none; vertical-align: -.22em; }
.avatar svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- Gerüst */

#app { min-height: 100dvh; display: flex; flex-direction: column; }

.kopf {
  position: sticky; top: 0; z-index: 30;
  padding: calc(var(--oben) + 14px) 16px 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--normal) var(--kurve);
  display: flex; align-items: center; gap: 12px;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf h1 { flex: 1; min-width: 0; }
.kopf .unter { display: block; font-size: .8rem; font-weight: 500; color: var(--text-leise); }

.inhalt {
  flex: 1;
  padding: 4px 16px calc(96px + var(--unten));
  max-width: 720px; width: 100%; margin: 0 auto;
}

.zurueck {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--flaeche); color: var(--text);
  box-shadow: var(--schatten-1);
  cursor: pointer;
}
.zurueck:active { transform: scale(.94); }

/* --------------------------------------------------------------- Reiter unten */

.reiter {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  padding: 6px 8px calc(6px + var(--unten));
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--linie);
}
.reiter button {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 5px;
  border: 0; background: none; cursor: pointer;
  color: var(--text-leise);
  font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  border-radius: var(--r-m);
  transition: color var(--schnell) linear;
}
.reiter button svg { width: 24px; height: 24px; stroke-width: 1.9; }
.reiter button[aria-current="page"] { color: var(--akzent); }
.reiter button[aria-current="page"] svg { stroke-width: 2.4; }
.reiter button:active { background: var(--flaeche-2); }
.reiter .punkt {
  position: absolute; transform: translate(14px, -8px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--glut); border: 2px solid var(--flaeche);
}

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

.karte {
  background: var(--flaeche);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-1);
  padding: 16px;
  margin-bottom: 12px;
}
.karte.flach { box-shadow: none; border: 1px solid var(--linie); }
.karte-kopf {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
}
.karte-kopf h2 { flex: 1; min-width: 0; }

.abschnitt {
  margin: 22px 0 8px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-leise);
}

/* --------------------------------------------------------------- Der Termin-Held */

.held {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: 22px 20px 20px;
  margin-bottom: 14px;
  color: #FFF6EE;
  background:
    radial-gradient(120% 130% at 12% 0%, #FF9A4D 0%, transparent 55%),
    radial-gradient(90% 120% at 95% 100%, #8E2A0B 0%, transparent 60%),
    linear-gradient(150deg, #E2571E 0%, #B3360F 60%, #6E2109 100%);
  box-shadow: var(--schatten-2);
}
.held::after {
  /* Glutflimmern, ganz dezent — es soll warm wirken, nicht blinken. */
  content: ""; position: absolute; inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 200, 120, .35), transparent 45%);
  animation: glut 7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes glut { from { opacity: .35; } to { opacity: .75; } }
.held > * { position: relative; z-index: 1; }
.held .datum { font-size: .82rem; font-weight: 700; letter-spacing: .06em;
               text-transform: uppercase; opacity: .85; }
.held h2 { font-size: 1.75rem; margin: 4px 0 2px; }
.held .ort { opacity: .9; font-size: .95rem; }
.held .ort svg { width: 1.05em; height: 1.05em; }
.held .countdown {
  font-family: var(--zahl); font-variant-numeric: tabular-nums;
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em;
  margin: 10px 0 0; line-height: 1;
}
.held .countdown small { font-size: .9rem; font-weight: 600; opacity: .8; margin-left: 2px; }
.held.aus {
  background: linear-gradient(150deg, #4A423C 0%, #2B2521 100%);
}

/* --------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 0; border-radius: var(--r-m);
  background: var(--akzent); color: #fff;
  font-weight: 700; font-size: 1rem;
  cursor: pointer; text-decoration: none;
  transition: transform var(--schnell) var(--kurve),
              filter var(--schnell) linear, opacity var(--schnell) linear;
}
.knopf:active { transform: scale(.97); filter: brightness(.94); }
.knopf[disabled] { opacity: .45; pointer-events: none; }
.knopf.breit { width: 100%; }
.knopf.still { background: var(--flaeche-2); color: var(--text); }
.knopf.rand  { background: transparent; color: var(--akzent);
               box-shadow: inset 0 0 0 1.5px currentColor; }
.knopf.gut   { background: var(--gut); }
.knopf.weg   { background: var(--schlecht-weich); color: var(--schlecht); }
.knopf.klein { min-height: 38px; padding: 0 14px; font-size: .88rem; border-radius: var(--r-s); }
.knopf svg { width: 20px; height: 20px; stroke-width: 2; }

.knopfzeile { display: flex; gap: 10px; }
/* Auch als <a>: WhatsApp und SMS sind echte Links, keine Knöpfe mit
   window.open() — das blockiert die installierte App auf dem Handy. */
a.knopf { line-height: 1; }
.knopfzeile > * { flex: 1; }

/* Die zwei Knöpfe, um die sich alles dreht. Bewusst riesig: Das ist die
   einzige Handlung, die ein normales Mitglied je tun muss. */
.zusage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zusage button {
  min-height: 74px; border: 2px solid var(--linie); border-radius: var(--r-l);
  background: var(--flaeche); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; font-weight: 700;
  transition: transform var(--schnell) var(--kurve),
              border-color var(--normal) var(--kurve),
              background var(--normal) var(--kurve);
}
.zusage button svg { width: 26px; height: 26px; stroke-width: 2.2; }
.zusage button:active { transform: scale(.97); }
.zusage button[aria-pressed="true"].ja {
  background: var(--gut-weich); border-color: var(--gut); color: var(--gut);
}
.zusage button[aria-pressed="true"].nein {
  background: var(--schlecht-weich); border-color: var(--schlecht); color: var(--schlecht);
}

/* --------------------------------------------------------------- Listen */

.liste { display: flex; flex-direction: column; gap: 1px;
         background: var(--linie); border-radius: var(--r-l); overflow: hidden; }
.liste > .zeile { background: var(--flaeche); }

.zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; min-height: 56px;
  border: 0; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: background var(--schnell) linear;
}
.zeile:not(button) { cursor: default; }
button.zeile:active { background: var(--flaeche-2); }
.zeile .haupt { flex: 1; min-width: 0; }
/* Beide als Block: sonst fließen Titel und Nebenzeile in einen Absatz, und
   „Ich bringe jemanden mit" klebt an „Partner, Kind, Praktikant". */
.titel { display: block; font-weight: 600; }
.neben { display: block; font-size: .84rem; color: var(--text-leise); }
.titel .marke { margin-left: 6px; vertical-align: 1px; }
.zeile .wert { font-family: var(--zahl); font-variant-numeric: tabular-nums;
               font-weight: 700; white-space: nowrap; }
.zeile .pfeil { color: var(--text-leise); flex: none; }
.zeile .pfeil svg { width: 18px; height: 18px; stroke-width: 2.4; }

.avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--akzent-weich); color: var(--akzent);
  font-weight: 800; font-size: .84rem; letter-spacing: .02em;
}
.avatar.klein { width: 28px; height: 28px; font-size: .68rem; }
.avatar.gut { background: var(--gut-weich); color: var(--gut); }
.avatar.weg { background: var(--schlecht-weich); color: var(--schlecht); }

.stapel { display: flex; flex-wrap: wrap; gap: 6px; }
.stapel .avatar { margin: 0; }

/* --------------------------------------------------------------- Marken */

.marke {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  background: var(--flaeche-2); color: var(--text-leise);
  white-space: nowrap;
}
.marke.gut { background: var(--gut-weich); color: var(--gut); }
.marke.warn { background: var(--warn-weich); color: var(--warn); }
.marke.weg { background: var(--schlecht-weich); color: var(--schlecht); }
.marke.glut { background: var(--akzent-weich); color: var(--akzent); }
.marke svg { width: 13px; height: 13px; stroke-width: 2.6; }

/* --------------------------------------------------------------- Kennzahlen */

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
              gap: 10px; margin-bottom: 12px; }
.kennzahl {
  background: var(--flaeche); border-radius: var(--r-m);
  padding: 13px 14px; box-shadow: var(--schatten-1);
}
.kennzahl .zahl {
  font-family: var(--zahl); font-variant-numeric: tabular-nums;
  font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
}
.kennzahl .was { font-size: .74rem; font-weight: 600; color: var(--text-leise);
                 text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.kennzahl.glut .zahl { color: var(--akzent); }
.kennzahl.gut .zahl { color: var(--gut); }
.kennzahl.weg .zahl { color: var(--schlecht); }

.balken { height: 8px; border-radius: 999px; background: var(--flaeche-2); overflow: hidden; }
.balken > i { display: block; height: 100%; border-radius: 999px;
              background: linear-gradient(90deg, var(--flamme), var(--glut));
              transition: width var(--normal) var(--kurve); }

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

.feld { margin-bottom: 14px; }
.feld > label { display: block; font-size: .8rem; font-weight: 700;
                color: var(--text-leise); margin-bottom: 5px;
                text-transform: uppercase; letter-spacing: .04em; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  background: var(--flaeche-2);
  border: 1.5px solid transparent; border-radius: var(--r-m);
  outline: none;
  transition: border-color var(--schnell) linear, background var(--schnell) linear;
}
.feld textarea { min-height: 84px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--akzent); background: var(--flaeche);
}
.feld .hinweis { font-size: .8rem; color: var(--text-leise); margin-top: 5px; }
.feld.fehler input, .feld.fehler select { border-color: var(--schlecht); }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.segment {
  display: flex; gap: 3px; padding: 3px;
  background: var(--flaeche-2); border-radius: var(--r-m);
}
.segment button {
  flex: 1; min-height: 40px; border: 0; border-radius: calc(var(--r-m) - 4px);
  background: transparent; color: var(--text-leise);
  font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: background var(--schnell) var(--kurve), color var(--schnell) linear;
}
.segment button[aria-pressed="true"] {
  background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-1);
}

.schalter { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.schalter .haupt { flex: 1; }
.schalter input { appearance: none; -webkit-appearance: none;
                  width: 52px; height: 32px; flex: none; margin: 0;
                  border-radius: 999px; background: var(--linie);
                  position: relative; cursor: pointer;
                  transition: background var(--normal) var(--kurve); }
.schalter input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: var(--schatten-1);
  transition: transform var(--normal) var(--kurve);
}
.schalter input:checked { background: var(--gut); }
.schalter input:checked::after { transform: translateX(20px); }

/* --------------------------------------------------------------- Sheet / Dialog */

.schleier {
  position: fixed; inset: 0; z-index: 60;
  /* Kräftig genug, um ohne backdrop-filter zu tragen: Nicht jeder Browser
     kann ihn, und wo er fehlt, stand der Dialog vorher fast unsichtbar auf
     dem Inhalt. */
  background: rgba(14, 9, 6, .66);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: einblenden var(--normal) var(--kurve);
}
.schleier.mitte { align-items: center; padding: 16px; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  width: 100%; max-width: 560px;
  background: var(--bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 18px calc(22px + var(--unten));
  max-height: 88dvh; overflow-y: auto;
  box-shadow: var(--schatten-3);
  animation: hoch var(--normal) var(--kurve);
}
.schleier.mitte .sheet { border-radius: var(--r-xl); animation: auf var(--normal) var(--kurve); }
@keyframes hoch { from { transform: translateY(14px); opacity: .6; } }
@keyframes auf  { from { transform: scale(.97); opacity: .5; } }
.sheet .griff { width: 40px; height: 4px; border-radius: 999px;
                background: var(--linie); margin: 2px auto 14px; }
.sheet h2 { margin-bottom: 14px; }

/* --------------------------------------------------------------- Meldung */

.toast-raum {
  position: fixed; left: 0; right: 0; z-index: 80;
  bottom: calc(86px + var(--unten));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding: 0 16px;
}
.toast {
  max-width: 460px; padding: 12px 18px; border-radius: 999px;
  background: var(--kohle); color: #FFF3E8;
  font-weight: 600; font-size: .92rem;
  box-shadow: var(--schatten-3);
  animation: hoch var(--normal) var(--kurve);
  display: flex; align-items: center; gap: 9px;
}
.toast.gut { background: var(--gut); color: #fff; }
.toast.weg { background: var(--schlecht); color: #fff; }
.toast svg { width: 18px; height: 18px; stroke-width: 2.4; flex: none; }

/* Der Haken nach einer Buchung: der Abschluss eines Vorgangs, einmal, kurz. */
.haken-raum { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
              pointer-events: none; }
.haken-raum svg { width: 108px; height: 108px; color: var(--gut); }
.haken-raum circle { stroke-dasharray: 302; stroke-dashoffset: 302;
                     animation: zeichnen .42s var(--kurve) forwards; }
.haken-raum path { stroke-dasharray: 60; stroke-dashoffset: 60;
                   animation: zeichnen .3s var(--kurve) .3s forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------- Zustände */

.leer { text-align: center; padding: 42px 20px; color: var(--text-leise); }
.leer svg { width: 54px; height: 54px; opacity: .35; margin-bottom: 12px; stroke-width: 1.4; }
.leer p { margin: 0 auto; max-width: 30ch; }

.laden { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.schimmer {
  height: 66px; border-radius: var(--r-l);
  background: linear-gradient(100deg, var(--flaeche) 30%,
              var(--flaeche-2) 48%, var(--flaeche) 66%);
  background-size: 300% 100%;
  animation: schimmern 1.2s linear infinite;
}
@keyframes schimmern { to { background-position: -150% 0; } }

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

.tor {
  min-height: 100dvh; display: flex; flex-direction: column;
  justify-content: center; padding: 28px 22px calc(28px + var(--unten));
  max-width: 440px; margin: 0 auto; width: 100%;
}
.tor .zeichen { width: 82px; height: 82px; margin: 0 auto 18px; display: block; }
.tor h1 { text-align: center; margin-bottom: 6px; }
.tor .unter { text-align: center; color: var(--text-leise); margin-bottom: 26px; }

/* --------------------------------------------------------------- Breit */

@media (min-width: 860px) {
  .inhalt { max-width: 860px; padding-bottom: 40px; padding-top: 8px; }
  .reiter {
    position: sticky; top: 0; bottom: auto;
    max-width: 860px; margin: 0 auto; border-top: 0;
    border-bottom: 1px solid var(--linie); padding-bottom: 6px;
    background: transparent; backdrop-filter: none;
  }
  .reiter button { flex-direction: row; gap: 8px; font-size: .9rem; padding: 10px 14px; }
  .reiter button svg { width: 20px; height: 20px; }
  .toast-raum { bottom: 28px; }
  .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
}

/* --------------------------------------------------------------- Ruhe */

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