/* ===========================================================================
   AUFTRAG — Gestaltung der Verfolgung und der Management-Bereiche
   ---------------------------------------------------------------------------
   Gleiche Sprache wie der Rest der App: Glas statt Farbflaeche, Rot nur als
   Akzent, zwei Schriften, viel Ruhe. Neu sind nur Bausteine, die es noch
   nicht gab - nichts Bestehendes wird ueberschrieben.

   Alle Breitenregeln fragen den APP-RAHMEN ab, nicht das Fenster
   (@container), weil die App am Rechner in einem schmalen Rahmen steckt.
   Ohne das saehe der Rechner anders aus als das Handy.
   =========================================================================== */

.inhalt { container-type: inline-size; container-name: apprahmen; }

/* ─────────────────────────────────────────────────────────────────────
   DAS BAND UNTER DEM KOPF
   Immer sichtbar, in jedem Bereich - wie die Lieferzeile in einer
   Bestell-App. Ein Tipp fuehrt in den Auftrag.
   ───────────────────────────────────────────────────────────────────── */
.band {
  position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 35;
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 46px; padding: 0 14px;
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--linie);
  text-align: left; transition: background .2s var(--kurve);
}
.band:active { background: var(--flaeche-2); }
.band__punkt {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--text-still);
}
.band__text { flex: 1; min-width: 0; display: block; }
.band__text b {
  display: block; font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.band__text i {
  display: block; font-style: normal; font-size: 11px; color: var(--text-still);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.band__pfeil { width: 15px; height: 15px; color: var(--text-still); flex: none; }

/* Der Punkt sagt den Zustand. Rot bleibt Akzent, nie Flaeche. */
.band[data-ton="gut"]   .band__punkt { background: var(--gruen); }
.band[data-ton="lauf"]  .band__punkt { background: var(--gold); }
.band[data-ton="eilig"] .band__punkt { background: var(--gold); }
.band[data-ton="spaet"] .band__punkt { background: var(--rot); }

/* Puls nur, solange wirklich etwas laeuft - und nur im Blickfeld.
   Hausregel: nichts bewegt sich, wenn niemand hinsieht. */
.band[data-ton="lauf"]  .band__punkt,
.band[data-ton="eilig"] .band__punkt { animation: bandPuls 2.4s var(--kurve) infinite; }
html.ruht .band__punkt { animation-play-state: paused; }
@keyframes bandPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,192,122,.42); }
  70%      { box-shadow: 0 0 0 7px rgba(232,192,122,0); }
}
@media (prefers-reduced-motion: reduce) { .band__punkt { animation: none !important; } }

/* ─────────────────────────────────────────────────────────────────────
   DIE GROSSE ZUSTANDSKARTE
   Eine Aussage, ein Satz, ein Knopf. Mehr steht hier nie.
   ───────────────────────────────────────────────────────────────────── */
.lage {
  position: relative; overflow: hidden;
  padding: 20px 18px 18px; border-radius: var(--r-karte);
  background: var(--glas);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glas-kante);
  box-shadow: var(--glas-licht);
}
/* Ein weicher Schein, keine Verlaufsflaeche - Rot bleibt Akzent. */
.lage::after {
  content: ''; position: absolute; inset: -40% -30% auto auto;
  width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(229,20,42,.16), transparent 68%);
}
.lage[data-ton="gut"]::after   { background: radial-gradient(circle, rgba(74,222,128,.14), transparent 68%); }
.lage[data-ton="still"]::after { background: radial-gradient(circle, rgba(243,233,236,.07), transparent 68%); }
.lage__klein {
  margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-still);
}
.lage__gross {
  margin: 7px 0 0; font-family: var(--anzeige); font-weight: 700;
  font-size: 27px; line-height: 1.1; letter-spacing: -.02em; color: var(--text);
}
.lage__satz {
  margin: 9px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-leise);
  max-width: 42ch;
}
.lage__knopf { margin-top: 16px; }
.lage + .karte { margin-top: 12px; }

/* ─────────────────────────────────────────────────────────────────────
   DER WEG — die sieben Stationen
   Alle sichtbar, auch die, die noch kommen. Die Linie verbindet sie.
   ───────────────────────────────────────────────────────────────────── */
.weg { list-style: none; margin: 0; padding: 0; }
.weg__st {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 0 0 16px; min-height: 34px;
}
.weg__st:last-child { padding-bottom: 0; }
/* Die Linie zur naechsten Station. */
.weg__st::before {
  content: ''; position: absolute; left: 12.5px; top: 26px; bottom: 2px;
  width: 2px; border-radius: 2px; background: var(--linie);
}
.weg__st:last-child::before { display: none; }
.weg__st[data-stand="durch"]::before { background: rgba(74,222,128,.42); }

.weg__mal {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-content: center;
  border: 1.5px solid var(--linie); background: var(--flaeche-2);
  color: var(--text-still);
}
.weg__mal svg { width: 13px; height: 13px; }
.weg__punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.weg__st[data-stand="durch"] .weg__mal {
  border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.11); color: var(--gruen);
}
.weg__st[data-stand="jetzt"] .weg__mal {
  border-color: rgba(232,192,122,.6); background: rgba(232,192,122,.13); color: var(--gold);
}

.weg__text { flex: 1; min-width: 0; padding-top: 3px; }
.weg__text b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-leise); }
.weg__text i {
  display: block; font-style: normal; font-size: 11.5px; line-height: 1.5;
  color: var(--text-still); margin-top: 2px;
}
.weg__st[data-stand="jetzt"] .weg__text b { color: var(--text); }
.weg__st[data-stand="durch"] .weg__text b { color: var(--text-leise); }

/* Auftritt gestaffelt, aber nur einmal. */
.bild[data-an="1"] .weg__st { animation: wegRein .34s var(--kurve) both; animation-delay: calc(var(--n) * 45ms); }
@keyframes wegRein { from { opacity: 0; transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .weg__st { animation: none !important; } }

/* ─────────────────────────────────────────────────────────────────────
   VIER GROSSE KACHELN
   Daumengerecht, zwei nebeneinander. Am Rechner nicht breiter, sondern
   ruhiger - Merts Regel: nie einfach mitskalieren.
   ───────────────────────────────────────────────────────────────────── */
.kachelnGross {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
}
.kachelG {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 13px 13px; border-radius: var(--r-karte); text-align: left;
  background: var(--glas-tief);
  border: 1px solid var(--linie);
  transition: transform .18s var(--kurve), background .18s;
}
.kachelG:active { transform: scale(.975); background: var(--flaeche-2); }
.kachelG__sym {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-content: center;
  background: rgba(232,192,122,.12); color: var(--gold); margin-bottom: 7px;
}
.kachelG__sym svg { width: 16px; height: 16px; }
.kachelG__was { font-size: 13.5px; font-weight: 700; color: var(--text); }
.kachelG__dazu {
  font-size: 11px; color: var(--text-still); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────
   FRIST — die grosse Zahl
   ───────────────────────────────────────────────────────────────────── */
.frist {
  display: flex; align-items: center; gap: 13px; margin-top: 12px;
  padding: 13px 14px; border-radius: 12px;
  background: var(--glas-tief); border: 1px solid var(--linie);
}
.frist__zahl {
  font-family: var(--anzeige); font-size: 32px; font-weight: 700; line-height: 1;
  color: var(--gold); flex: none; font-variant-numeric: tabular-nums;
}
.frist__was { font-size: 13px; font-weight: 700; color: var(--text); }
.frist__was i {
  display: block; font-style: normal; font-size: 11.5px; font-weight: 500;
  color: var(--text-still); margin-top: 2px;
}
.frist[data-ton="gut"]   .frist__zahl { color: var(--gruen); }
.frist[data-ton="eilig"] .frist__zahl { color: var(--gold); }
.frist[data-ton="spaet"] { border-color: rgba(229,20,42,.3); }
.frist[data-ton="spaet"] .frist__zahl { color: var(--rot); }

/* ─────────────────────────────────────────────────────────────────────
   EINGABEFELDER
   ───────────────────────────────────────────────────────────────────── */
.feld { display: block; }
.feld__was {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-still); margin-bottom: 7px;
}
.feld__ein {
  width: 100%; min-height: 50px; padding: 0 15px; border-radius: 12px;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  color: var(--text); font: 600 15px/1 var(--schrift);
  transition: border-color .18s var(--kurve);
}
.feld__ein::placeholder { color: var(--text-still); font-weight: 500; }
.feld__ein:focus { outline: none; border-color: rgba(232,192,122,.5); }
.feld + .knopf, .feld + .mini { margin-top: 10px; }

/* Dieselbe Falle wie auf der Vertragsseite (Mert, 06.09.2026): iOS-Safari gibt
   einem Datumsfeld eine eigene Mindestbreite, ignoriert width:100% und stellt
   den Wert mittig. Es stand dadurch ueber die Kante hinaus. Hier gleich mit
   behoben, damit der Fehler nicht in der App wieder auftaucht. */
.feld__ein[type="date"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; max-width: 100%;
  height: calc(1.5em + 28px); text-align: left;   /* exakt so hoch wie die Textfelder */
}
.feld__ein[type="date"]::-webkit-datetime-edit { padding: 0; }
.feld__ein[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.feld__ein[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; opacity: .55; }

/* ─────────────────────────────────────────────────────────────────────
   KARTE ALS KNOPF
   ───────────────────────────────────────────────────────────────────── */
.karte--knopf {
  display: block; width: 100%; text-align: left;
  transition: transform .18s var(--kurve), background .18s;
}
.karte--knopf:active { transform: scale(.99); background: var(--flaeche-2); }
.karte--knopf .zeile { display: flex; align-items: center; gap: 11px; padding: 0; }

.knopf__zahl {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-content: center; margin-left: 2px;
  background: rgba(229,20,42,.16); color: var(--rot);
  font-size: 11px; font-weight: 800;
}

/* ─────────────────────────────────────────────────────────────────────
   DER CODE — gross, zum Antippen
   ───────────────────────────────────────────────────────────────────── */
.codeGross { text-align: center; padding: 4px 0 2px; }
.codeGross__wert {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 16px 22px; border-radius: 14px;
  background: var(--glas); border: 1px dashed rgba(232,192,122,.42);
  color: var(--text); font-family: var(--anzeige);
  font-size: 26px; font-weight: 700; letter-spacing: .06em;
  transition: transform .18s var(--kurve), background .18s;
  max-width: 100%; overflow-wrap: anywhere;
}
.codeGross__wert:active { transform: scale(.97); background: var(--flaeche-2); }
.codeGross__k { width: 18px; height: 18px; color: var(--gold); flex: none; }
.codeGross__dazu { margin: 10px 0 0; font-size: 11.5px; color: var(--text-still); }

/* ─────────────────────────────────────────────────────────────────────
   NACHRICHTEN
   ───────────────────────────────────────────────────────────────────── */
.nachr {
  padding: 12px 13px; border-radius: 12px; margin-bottom: 9px;
  background: var(--flaeche-2); border: 1px solid var(--linie);
}
.nachr:last-child { margin-bottom: 0; }
.nachr[data-von="ich"] { background: rgba(232,192,122,.07); border-color: rgba(232,192,122,.22); }
.nachr__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.nachr__am { margin: 6px 0 0; font-size: 11px; color: var(--text-still); }

/* ─────────────────────────────────────────────────────────────────────
   SCHMALE RAHMEN
   Gemessen am App-Rahmen, nicht am Fenster.
   ───────────────────────────────────────────────────────────────────── */
@container apprahmen (max-width: 340px) {
  .kachelnGross { grid-template-columns: 1fr; }
  .lage__gross { font-size: 23px; }
  .codeGross__wert { font-size: 21px; padding: 14px 16px; }
}

/* ─────────────────────────────────────────────────────────────────────
   BALKENLEISTE
   Uebernommen aus dem Stepper von @originui, Fassung "With labels":
   statt Kreisen ein duenner Balken je Schritt (dort h-1 w-full, also 4px
   hoch und volle Breite), Beschriftung darunter, erledigte und aktive in
   der Hauptfarbe, offene in der Linienfarbe. Der Abstand dort ist gap-4;
   bei sieben Schritten auf einem Handy waere das zu viel, deshalb 6px.
   Ebenfalls anders als im Original: nur der aktuelle Schritt traegt
   seinen Namen - sieben deutsche Woerter passen bei 375px nicht nebeneinander.
   ───────────────────────────────────────────────────────────────────── */
.balkenweg { margin: 14px 0 0; }
.balkenweg__reihe { display: flex; gap: 6px; }
.balkenweg__b {
  flex: 1; height: 4px; border-radius: 3px; background: var(--linie);
  transition: background .3s var(--kurve);
}
.balkenweg__b[data-stand="durch"] { background: var(--gruen); }
.balkenweg__b[data-stand="jetzt"] { background: var(--gold); }
.balkenweg__marke {
  margin: 9px 0 0; font-size: 11.5px; font-weight: 600; color: var(--text-leise);
}

/* ─────────────────────────────────────────────────────────────────────
   KANALZEILEN
   Aufbau uebernommen aus "Integrations 02" (@shadcnui-blocks): Zeichen
   links, Name, rechts entweder ein Abzeichen mit dem Zustand oder ein
   schmaler Knopf. Dort sind es 32px Zeichen (size-8), Zeilen mit
   px-3 py-3 und Rahmen, rechts h-7 - diese Verhaeltnisse sind uebernommen.
   ───────────────────────────────────────────────────────────────────── */
.kan {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; margin-bottom: 8px;
  border: 1px solid var(--linie); border-radius: 11px;
  background: var(--glas-tief);
}
.kan:last-of-type { margin-bottom: 0; }
.kan__sym {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-content: center;
  background: var(--flaeche-2); color: var(--text-leise);
}
.kan__sym svg { width: 16px; height: 16px; }
.kan__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.kan__da {
  flex: none; min-width: 92px; height: 28px; padding: 0 11px; border-radius: 9px;
  display: inline-grid; place-content: center;
  background: rgba(74,222,128,.11); color: var(--gruen);
  font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kan__knopf {
  flex: none; min-width: 92px; height: 28px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--text);
  font-size: 12px; font-weight: 700;
  transition: transform .18s var(--kurve), border-color .18s;
}
.kan__knopf:active { transform: scale(.96); border-color: rgba(232,192,122,.5); }

/* Die erste Station fuehrt in den Vertrag - sie muss sich anfassbar anfuehlen. */
.weg__st[data-tat] { cursor: pointer; border-radius: 10px; margin: -4px -6px 12px; padding: 4px 6px 16px; }
.weg__st[data-tat]:active { background: var(--flaeche-2); }