/* app.curveguard.de — was die Web-App ÜBER stil.css hinaus braucht.
   stil.css (curveguard.de) bleibt die Stilquelle (UMSETZUNG-WEB § 0 Nr. 1):
   nginx liefert sie für app. aus /srv/web aus, sie wird nicht kopiert.
   Hier stehen nur die Formen der Rahmen A-01…A-16 aus WebApp.dc.html, die
   stil.css nicht kennt (Seitenleiste, Zeilen, Band, Karte), und zwar mit
   den Farbrollen von stil.css (var(--…)) — keine eigene Farbe, hell und
   dunkel folgen damit prefers-color-scheme wie die Webseite.
   Die Alarmfarbe kommt hier nicht vor: die Web-App alarmiert nie. */

/* Kopf (A-01…A-16): „Web-App“ hinter der Marke, Konto rechts */
.kopfw .logo .wa{color:var(--leise);font-weight:500;font-size:14px;margin-left:4px}
.wer{display:inline-flex;align-items:center;gap:8px;color:var(--sub);font-size:14px;padding:0 8px;min-width:0}
.wer .kreis{width:28px;height:28px;border-radius:50%;background:var(--grund);border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;flex:none}
.navw button.cta{font:inherit;font-weight:700;font-size:15px;border:0;cursor:pointer;background:var(--flaeche);color:var(--text)}
.kopf-tel{display:none}
.kopfw .logo,.kopfw .logo .wa,.kopf-tel a,.kopf-tel button{white-space:nowrap}
/* Telefon-Menü ☰ (§ 20 Festlegung 17): Fahrten · Planen · Entdecken · Garage · Abmelden */
.menue{position:relative}
.menue summary{list-style:none;cursor:pointer;font-weight:700;font-size:18px;background:var(--flaeche);color:var(--text);padding:6px 12px;border-radius:10px;line-height:1.2}
.menue summary::-webkit-details-marker{display:none}
.menue nav{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:220px;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--blatt);border:1px solid var(--linie);border-radius:12px}
.menue nav a,.menue nav button{display:block;padding:10px 12px;border-radius:12px;color:var(--text);font:inherit;font-size:15px;text-align:left;background:none;border:0;cursor:pointer;white-space:nowrap}
.menue nav button{border-top:1px solid var(--linie);border-radius:0 0 12px 12px;font-weight:700}

/* Gerüst: Seitenleiste + Inhalt */
.appw{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 65px)}
.seitenleiste{border-right:1px solid var(--linie);background:var(--blatt);padding:20px 14px;display:flex;flex-direction:column;gap:4px}
.seitenleiste a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--sub);font-size:15px}
.seitenleiste a svg{flex:none;stroke:var(--rand3)}
.seitenleiste a.an{background:var(--flaeche);color:var(--text);font-weight:600}
.seitenleiste a.an svg{stroke:var(--taupe-hell)}
.seitenleiste .luft{flex:1}
.seitenleiste a.klein{font-size:14px;color:var(--leise)}
.inhaltw{padding:24px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.inhaltw .h2{font-size:26px;margin:0}
.inhaltw .unter{color:var(--leise);font-size:14px;margin-top:0}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.zwei.breit{grid-template-columns:1.4fr 1fr}
.spalte{display:flex;flex-direction:column;gap:12px;min-width:0}

/* Zeilen (L1, GA1–GA4) */
.reihe{display:flex;align-items:center;gap:12px;padding:12px 14px;box-sizing:border-box;min-height:56px;width:100%;color:inherit;text-align:left}
button.reihe{font:inherit;background:none;border:0;cursor:pointer}
button.kn.rand{background:none}
.reihe .mitte{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.reihe .rechts{color:var(--sub);font-size:15px;text-align:right}
.reihe.an{background:var(--blatt)}
.hair{height:1px;background:var(--linie);flex:none;margin:0 14px}
.gruppe{font-size:14px;letter-spacing:.06em;color:var(--leise);padding:12px 14px 2px;text-transform:uppercase}
.t16{font-size:16px} .t18{font-size:18px;font-weight:700} .t20{font-size:20px;font-weight:700}
.fett{font-weight:700}
.faint{color:var(--leise)}
.titel{color:var(--titel)}
.zahl{font-variant-numeric:tabular-nums}
.pfeil{flex:none;stroke:var(--taupe)}
.mitte>.prem{align-self:flex-start}
.prem{display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--taupe-hell);border:1px solid var(--linie2);border-radius:999px;padding:2px 10px;flex:none;white-space:nowrap}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--linie);font-size:14px;color:var(--sub);white-space:nowrap;flex:none;background:none;font-family:inherit;cursor:pointer}
.chip.an{background:var(--taupe);color:var(--knopftext);border-color:var(--taupe);font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}

/* Eingänge oben in der Fahrtenliste (L1): Woche · Rückblick · Entdecken */
.eingaenge{display:flex;gap:8px}
.eingaenge a{flex:1;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.eingaenge svg{stroke:var(--sub)}

/* Enge-Band (cg_fahrt_band.dart, kern/farben.dart cgSkalaRolle): die Stufen
   der Skala. Hell hat „20–35°“ zwei Farben, am Artboard gemessen: Balken
   #B08A3E, Legendenpunkt #F5DEB8 (farben.dart sand.hell). */
:root{--skala-sand:#F5DEB8;--skala-sand-punkt:#F5DEB8}
@media (prefers-color-scheme: light){:root{--skala-sand:#B08A3E}}
.engeband{display:flex;align-items:flex-end;gap:2px;height:16px}
.engeband i{flex:1;border-radius:2px;display:block;min-width:2px}
.engeband i.salbei{background:var(--salbei)}
.engeband i.sand{background:var(--skala-sand)}
.engeband i.taupe{background:var(--taupe-hell)}
.engeband i.ohne{background:var(--linie2);height:3px;border-radius:1.5px}
.engeband.h22{height:22px}
.skala{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--sub)}
.skala span{display:inline-flex;align-items:center;gap:6px}
.skala i{width:12px;height:12px;border-radius:3px;display:inline-block}
.skala i.salbei{background:var(--salbei)} .skala i.sand{background:var(--skala-sand-punkt)} .skala i.taupe{background:var(--taupe-hell)} .skala i.ohne{background:var(--linie2)}

/* Karte (MapLibre) */
.kartew{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--linie);background:var(--grund)}
.kartew.h280{height:280px} .kartew.h520{height:520px}
.kartew .leer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--leise);font-size:14px;padding:16px;text-align:center}
.lizenz-k{color:var(--leise);font-size:13px;margin:0}

/* Zustände (A-16): leer · lädt · Fehler · offline */
.zustand{padding:22px;display:flex;flex-direction:column;gap:10px}
.zustand .t18{color:var(--text)}
.zustand .satz{color:var(--sub);margin:0}
.lampe{display:inline-flex;align-items:center;gap:8px;background:var(--flaeche);border:1px solid var(--linie);border-radius:999px;padding:7px 14px;font-size:14px;align-self:flex-start}
.lampe .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--warm)}
.laedt{visibility:hidden}
.laedt.sichtbar{visibility:visible}

/* Formular der Anmeldung (A-01) */
.anmelden{max-width:480px;padding-top:48px;padding-bottom:60px}
.anmelden .lead{font-size:16px}
.oder{display:flex;align-items:center;gap:10px;color:var(--leise);font-size:13px}
.oder i{flex:1;height:1px;background:var(--linie)}
.kn.marke{background:#FFFFFF;color:#000000;font-weight:600;border:1px solid var(--linie2)}
.kn.marke svg{stroke:#000000}
.links{color:var(--taupe-hell);font-size:14px;text-align:center}
.links button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:6px 2px}
.bleiben{display:flex;gap:10px;align-items:flex-start;margin:0;color:var(--leise);font-size:13px;line-height:1.45}
.bleiben input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--taupe)}
.bleiben b{color:var(--sub)}
.hinweis-a{margin:0;color:var(--sub);font-size:14px}

/* Zahlen (F1/RT4) */
.zahlen4{display:grid;grid-template-columns:repeat(4,1fr)}
.zahlen4 .kachel b{font-size:22px}

/* Premium (A-09) */
.preise2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.preise2 .knoepfe{display:flex;flex-direction:column;gap:10px;margin-top:8px}

/* Planen (A-02) */
.planfeld{display:flex;flex-direction:column;gap:12px;padding:18px}
.treffer{display:flex;flex-direction:column}
.treffer button{font:inherit;color:var(--text);background:none;border:0;border-top:1px solid var(--linie);text-align:left;padding:10px 4px;cursor:pointer}
.treffer button small{color:var(--leise);display:block}

@container (max-width: 700px){
  .appw{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;min-height:0}
  /* Telefon: das Menü ☰ im Kopf ersetzt die Seitenleiste (§ 20 Festlegung 17). */
  .seitenleiste{display:none}
  .inhaltw{padding:16px}
  .zwei,.zwei.breit,.preise2{grid-template-columns:1fr}
  .zahlen4{grid-template-columns:repeat(2,1fr)}
  .wer .adr{display:none}
  .kopf-tel{display:flex;margin-left:auto;gap:8px;align-items:center}
  .anmelden{padding-top:28px}
  .kartew.h520{height:360px}
}
.wer .kreis svg{stroke:var(--taupe)}
.kopfbreit{max-width:none}
.kopfbreit .kopfw{padding:0 4px}
/* Unter 380 px passen Marke, „Web-App“, Sprache und Abmelden nicht in eine
   Zeile (Abnahme 360 × 640) — „Web-App“ fällt weg, nichts wird kleiner. */
@container (max-width: 380px){ .kopfw .logo .wa{display:none} }
@container (max-width: 700px){ .tabelle th,.tabelle td{overflow-wrap:break-word;hyphens:auto;padding:10px 8px} .preise2 .kn{white-space:normal;text-align:center} }