/* ------------------------------------------------------------------
   Oberflaeche - Paket 33

   Neue Kopfzeile mit Menue je nach Rolle, Leiste unten fuers Handy,
   neue Startseite, neues Antragsformular.

   Wird als LETZTE Datei geladen. Farben kommen aus den Variablen von
   style.css / dunkelmodus.css, damit hell und dunkel ohne Zusatzarbeit
   mitziehen.

   Zwei Fehler der alten Startseite sind hier mit erledigt:
     1. handy.css setzt a:visited{color:inherit}. Die grosse Kachel ist
        ein Link - einmal besucht, erbte die Ueberschrift die dunkle
        Schriftfarbe und stand dunkel auf Dunkelblau.
     2. Der helle Text der grossen Kachel wurde von einer spaeteren Regel
        wieder grau gefaerbt.
   Deshalb nennen die Regeln unten bei Links :visited immer mit.
   ------------------------------------------------------------------ */

:root{
  --schatten:0 1px 2px rgba(11,33,56,.06),0 4px 16px rgba(11,33,56,.06);
  --kopf-text:#CFE0EC;
}
html[data-thema="dunkel"]{ --schatten:0 1px 2px rgba(0,0,0,.35); }
@media (prefers-color-scheme: dark){
  html:not([data-thema="hell"]){ --schatten:0 1px 2px rgba(0,0,0,.35); }
}

/* ================= Kopfzeile ================= */
.kopf{
  position:sticky; top:0; z-index:40;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; gap:16px;
  padding:0 18px; min-height:60px;
  border-bottom:3px solid var(--thw-blue);
}
.kopf-marke, .kopf-marke:visited{
  display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; flex-shrink:0;
}
.kopf-marke .brand-mark{ width:28px; height:28px; }
.kopf-marke b{ display:block; font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; }
.kopf-marke small{ display:block; font-size:10px; color:#9FB6C9; letter-spacing:.04em; }

.kopf-menue{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.kopf-menue > a, .kopf-menue > a:visited,
.klapp > summary{
  color:var(--kopf-text); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:8px 11px; border-radius:7px; cursor:pointer; white-space:nowrap;
}
.kopf-menue > a:hover, .klapp > summary:hover{ background:rgba(255,255,255,.08); color:#fff; }
.kopf-menue > a[aria-current]{ background:rgba(255,255,255,.13); color:#fff; }
.kopf-menue > a.kopf-karte, .kopf-menue > a.kopf-karte:visited{
  background:var(--orange); color:#fff; font-weight:600; margin:0 4px;
}
.kopf-menue > a.kopf-karte:hover{ background:#cf6509; }

/* Aufklappmenues (details/summary - funktionieren auch ohne JavaScript) */
.klapp{ position:relative; }
.klapp > summary{ list-style:none; display:flex; align-items:center; gap:6px; }
.klapp > summary::-webkit-details-marker{ display:none; }
.klapp:not(.konto) > summary::after{ content:"▾"; font-size:11px; opacity:.8; }
.klapp-liste{
  position:absolute; right:0; top:calc(100% + 8px); min-width:270px; z-index:60;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 34px rgba(0,0,0,.2); padding:6px;
}
.klapp-liste a, .klapp-liste a:visited{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  color:var(--ink); text-decoration:none; padding:9px 10px; border-radius:8px; font-size:14px;
}
.klapp-liste a:hover{ background:var(--flaeche-weich); }
.klapp-liste a small{ color:var(--ink-soft); font-size:11.5px; }
.klapp-kopf{ padding:8px 10px 6px; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.klapp-kopf b{ display:block; color:var(--ink); font-size:14.5px; }
.klapp-kopf.klein{ padding-bottom:2px; font-size:12px; }
.trenn{ height:1px; background:var(--line); margin:6px 4px; }
.zahl{
  display:inline-block; min-width:20px; text-align:center;
  background:var(--orange); color:#fff; font-size:11px; font-weight:700;
  border-radius:10px; padding:1px 6px; line-height:1.5;
}
.kreis{
  width:34px; height:34px; border-radius:50%;
  background:var(--navy-2); border:1px solid #3E5A72; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
}
.konto > summary{ padding:4px; }
.anzeige{ display:flex; gap:2px; background:var(--flaeche-weich); border-radius:9px; padding:3px; margin:2px 6px 6px; }
.anzeige button{
  flex:1; font:inherit; font-size:12.5px; border:0; background:none; color:var(--ink-soft);
  padding:7px 4px; border-radius:7px; cursor:pointer;
}
.anzeige button[aria-pressed="true"]{ background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14); font-weight:600; }

.nur-handy{ display:none; }

/* ================= Leiste unten (Handy) ================= */
.unten{ display:none; }

@media (max-width:820px){
  .kopf{ padding:0 12px; gap:10px; }
  .kopf-marke small{ display:none; }
  .nur-gross{ display:none !important; }
  .nur-handy{ display:block; }
  .klapp-liste{ position:fixed; left:10px; right:10px; top:66px; min-width:0; max-height:calc(100dvh - 160px); overflow-y:auto; }

  .unten{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--panel); border-top:1px solid var(--line);
    padding:6px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .unten a, .unten a:visited{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:11.5px; color:var(--ink-soft); text-decoration:none; padding:4px 0;
  }
  .unten a svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .unten a.aktiv{ color:var(--link); }
  .unten a.unten-karte{ color:var(--ink); font-weight:600; }
  .unten a.unten-karte span{ background:var(--orange); color:#fff; border-radius:14px; padding:5px 16px; display:flex; }
  body.mit-menue{ padding-bottom:78px; }
}

/* ================= Startseite ================= */
.startseite{ max-width:1040px; }

.gruss{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:4px 0 18px; }
.gruss h1{ margin:0; font-size:28px; color:var(--ueberschrift, var(--ink)); }
.gruss p{ margin:4px 0 0; color:var(--ink-soft); font-size:14px; }
.rolle{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.03em;
  color:var(--link); background:var(--flaeche-weich); border-radius:20px; padding:2px 9px; margin-left:4px;
}
.lampe{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:5px 12px;
}
.lampe i{ width:8px; height:8px; border-radius:50%; background:var(--green-ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--green-ok) 25%, transparent); }
.lampe--stoerung i{ background:#C0392B; box-shadow:0 0 0 3px rgba(192,57,43,.25); }
.lampe--stoerung{ color:var(--ink); border-color:#C0392B; }
.lampe--unklar i{ background:var(--ink-soft); box-shadow:none; }

/* Grosse Kachel zur Karte */
.held, .held:visited{
  display:grid; grid-template-columns:1.35fr 1fr; border-radius:16px; overflow:hidden;
  background:#0B2138; color:#fff; text-decoration:none; box-shadow:var(--schatten);
  margin-bottom:16px; min-height:200px; border:1px solid transparent;
}
.held:hover{ border-color:var(--orange); }
.held-text{ padding:26px 28px; display:flex; flex-direction:column; justify-content:center; }
.held .held-text h2{ margin:0 0 6px; font-size:26px; color:#fff; }
.held .held-text p{ margin:0 0 18px; color:#CFE0EC; font-size:15px; line-height:1.5; max-width:44ch; }
.held-knopf{
  align-self:flex-start; background:var(--orange); color:#fff; font-weight:600; font-size:15px;
  border-radius:10px; padding:12px 20px;
}
.held:hover .held-knopf{ background:#cf6509; }
.held-bild{ position:relative; background:linear-gradient(135deg,#123452,#0f2a44); }
.held-bild svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }

/* Schnellzugriffe */
.schnell{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.schnell-kachel, .schnell-kachel:visited{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:8px;
  box-shadow:var(--schatten); transition:transform .12s, border-color .12s;
}
.schnell-kachel:hover{ transform:translateY(-2px); border-color:var(--thw-blue); }
.schnell-kachel .sym{ width:40px; height:40px; border-radius:10px; background:var(--flaeche-weich); display:flex; align-items:center; justify-content:center; }
.schnell-kachel .sym svg{ width:22px; height:22px; stroke:var(--link); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.schnell-kachel b{ font-size:15px; }
.schnell-kachel > span:last-child{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.schnell-kachel em{ font-style:normal; font-weight:600; }
.schnell-kachel em.an{ color:var(--green-ok); }

/* Felder */
.spalten{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:stretch; }
.feld{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; box-shadow:var(--schatten); margin-bottom:16px;
}
.spalten .feld{ margin-bottom:0; }
.feld-titel{
  margin:0 0 12px; font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.feld-titel small{ font-family:'IBM Plex Sans',sans-serif; text-transform:none; letter-spacing:0; font-weight:500; font-size:12.5px; }

.feld-wetter .wtr-box{
  margin:0; height:100%; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; box-shadow:var(--schatten);
}

.tipp b{ display:block; margin-bottom:4px; font-size:15px; }
.tipp p{ margin:0 0 10px; color:var(--ink-soft); font-size:14px; line-height:1.5; }
.tipp a, .tipp a:visited, .tipp-fuss a, .tipp-fuss a:visited{ color:var(--link); }
.tipp-fuss{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px; font-size:13px; }
.link-knopf{ font:inherit; font-size:13px; background:none; border:0; padding:0; color:var(--link); cursor:pointer; text-decoration:underline; }

.aufgaben{ display:flex; gap:10px; flex-wrap:wrap; }
.aufgabe, .aufgabe:visited{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; text-decoration:none; color:var(--ink); font-size:14px; background:var(--panel);
}
.aufgabe:hover{ border-color:var(--thw-blue); }

.teile{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px; padding:0; list-style:none; font-size:13.5px; }
.teil::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green-ok); margin-right:6px; }
.teil--fehler::before{ background:#C0392B; }
.teil--unbekannt::before{ background:var(--ink-soft); }
.teil small{ color:var(--ink-soft); font-size:12px; }
.werte{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.wert{ background:var(--flaeche-weich); border-radius:10px; padding:10px 12px; }
.wert small{ display:block; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.wert b{ font-size:17px; }
.wert em{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-soft); }
.wert.auffaellig{ outline:2px solid var(--orange); }

@media (max-width:820px){
  .gruss h1{ font-size:24px; }
  .held, .held:visited{ grid-template-columns:1fr; }
  .held-bild{ height:100px; order:-1; }
  .held-text{ padding:20px; }
  .held .held-text h2{ font-size:22px; }
  .schnell{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .spalten{ grid-template-columns:1fr; }
}

/* ================= Fusszeile ================= */
/* Paket 34: oben "Gebaut mit", darunter Datenquellen, ganz unten die
   Rechtslinks. Wie bei grossen Seiten - ruhig, grau, nicht aufdringlich. */
.fusszeile{
  margin:3rem auto 1rem; padding:1.4rem 1.2rem 0; text-align:center; max-width:1040px;
  border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-soft);
}
.fusszeile a, .fusszeile a:visited{ color:inherit; }
.gebaut-mit{ margin:0 0 14px; }
.gm-titel{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.gm-reihe{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 28px; }
.gm-eintrag, .gm-eintrag:visited{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:var(--ink-soft); opacity:.85; transition:opacity .12s;
}
.gm-eintrag:hover{ opacity:1; color:var(--ink); }
.gm-eintrag img{ height:28px; width:auto; display:block; }
.gm-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:19px; letter-spacing:.02em; color:var(--ink); line-height:28px; }
.gm-eintrag small{ font-size:11px; }
.gm-quellen{ margin:0 auto 10px; font-size:11.5px; line-height:1.6; max-width:720px; }
.gm-quellen a, .gm-quellen a:visited{ text-decoration:underline; text-decoration-color:var(--line); }
.gm-links{ font-size:.85rem; }
html[data-thema="dunkel"] .gm-eintrag img{ filter:brightness(1.15); }

/* ================= Rueckmeldung ================= */
.rm-feld{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px; }
.rm-links p{ margin:0 0 10px; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.rm-links p b{ color:var(--ink); }
.rm-links .rm-klein{ font-size:12.5px; }
.rm-seite{ max-width:620px; margin:8px auto 0; }
.rm-seite h1{ margin:0 0 6px; font-size:24px; color:var(--ueberschrift, var(--ink)); }
.rm-unter{ margin:0 0 16px; color:var(--ink-soft); font-size:14px; line-height:1.55; }

.rm-formular{ display:flex; flex-direction:column; gap:8px; }
.rm-arten{ border:0; margin:0 0 4px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.rm-arten legend{ font-size:13px; font-weight:600; color:var(--ink); padding:0; margin-bottom:6px; }
.rm-art{ position:relative; }
.rm-art input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.rm-art span{
  display:inline-block; padding:6px 14px; border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; color:var(--ink); background:var(--panel); cursor:pointer; user-select:none;
}
.rm-art input:checked + span{ background:var(--knopf, #0E6BA8); border-color:var(--knopf, #0E6BA8); color:#fff; }
.rm-art input:focus-visible + span{ outline:2px solid var(--orange); outline-offset:2px; }
.rm-titel{ font-size:13px; font-weight:600; color:var(--ink); }
.rm-titel small{ font-weight:400; color:var(--ink-soft); }
.rm-formular textarea, .rm-formular input[type="email"]{
  width:100%; box-sizing:border-box; font:inherit; font-size:max(15px,16px); line-height:1.45;
  padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--feld, var(--panel)); color:var(--ink); resize:vertical;
}
.rm-hinweis{ margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.rm-antwort{ font-size:13px; }
.rm-antwort summary{ cursor:pointer; color:var(--link); }
.rm-antwort[open] summary{ margin-bottom:8px; }
.rm-antwort label{ display:block; margin-bottom:5px; }
.rm-fuss{ display:flex; align-items:center; gap:16px; margin-top:4px; font-size:13px; }
.rm-fuss a, .rm-fuss a:visited{ color:var(--ink-soft); }
.rm-senden{
  font:inherit; font-weight:600; font-size:15px; padding:10px 22px; border:0; border-radius:10px;
  background:var(--orange); color:#fff; cursor:pointer;
}
.rm-senden:hover{ filter:brightness(1.06); }
@media (max-width:820px){
  .rm-feld{ grid-template-columns:1fr; gap:6px; }
}

/* ================= Anmelden / Zugang beantragen ================= */
.antrag{
  max-width:480px; margin:24px auto; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--schatten);
}
.antrag h1{ margin:0 0 4px; font-size:24px; color:var(--ueberschrift, var(--ink)); }
.antrag .unter{ margin:0 0 18px; color:var(--ink-soft); font-size:14px; line-height:1.5; }
.antrag label{ display:block; font-size:13px; font-weight:600; margin:14px 0 5px; color:var(--ink); }
.antrag label small{ font-weight:400; color:var(--ink-soft); }
.antrag input[type="text"], .antrag input[type="password"], .antrag select{
  width:100%; font:inherit; font-size:15px; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--feld); color:var(--ink);
}
.antrag .reihe{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.antrag .reihe label{ margin-top:0; }
.antrag .haken{ display:flex; gap:8px; align-items:flex-start; font-weight:400; font-size:13px; color:var(--ink-soft); margin-top:10px; }
.antrag .haken input{ margin-top:2px; }
.antrag .hinweis{ font-size:12.5px; color:var(--ink-soft); margin:6px 0 0; line-height:1.45; }
.antrag .ergebnis{ margin-top:8px; font-size:13px; background:var(--flaeche-weich); border-radius:8px; padding:8px 10px; color:var(--ink-soft); }
.antrag .ergebnis b{ color:var(--ink); }
.antrag button.senden, .antrag a.senden, .antrag a.senden:visited{
  display:block; width:100%; margin-top:18px; text-align:center; text-decoration:none;
  background:var(--knopf, #0E6BA8); color:#fff; font:inherit; font-weight:600; font-size:15px;
  border:0; border-radius:10px; padding:12px; cursor:pointer;
}
.antrag details{ margin-top:14px; font-size:13px; color:var(--ink-soft); }
.antrag details summary{ cursor:pointer; color:var(--ink); font-weight:600; }
.antrag details p{ line-height:1.5; }
.antrag .links{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; font-size:13px; }
.antrag a, .antrag a:visited{ color:var(--link); }
.antrag .wege{ margin-top:20px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; line-height:1.5; }
.antrag .wege p{ margin:0 0 10px; }
@media (max-width:480px){
  .antrag{ margin:12px 0; padding:20px 16px; border-radius:12px; }
  .antrag .reihe{ grid-template-columns:1fr; }
}

/* ================= Woran wir gerade arbeiten (Paket 35) ================= */
.bs-feld .feld-titel a.bs-bearbeiten, .bs-feld .feld-titel a.bs-bearbeiten:visited{
  font-family:'IBM Plex Sans',sans-serif; text-transform:none; letter-spacing:0;
  font-size:12.5px; font-weight:500; color:var(--link);
}
.bs-spalten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.bs-spalte h3{
  margin:0 0 8px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  display:flex; align-items:center; gap:7px;
}
.bs-spalte h3 i{ width:8px; height:8px; border-radius:50%; background:var(--ink-soft); display:inline-block; }
.bs-spalte--in_arbeit h3 i{ background:var(--orange); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent); }
.bs-spalte--geplant h3 i{ background:var(--link); }
.bs-spalte--fertig h3 i{ background:var(--green-ok); }
.bs-spalte ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.bs-spalte li{ font-size:14px; line-height:1.45; }
.bs-spalte li b{ color:var(--ink); font-weight:600; }
.bs-spalte li small{ color:var(--ink-soft); font-size:12px; }
.bs-spalte li span{ display:block; color:var(--ink-soft); font-size:13px; }
.bs-spalte--fertig li b{ font-weight:500; }
.bs-fuss{ margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft); }
.bs-fuss a, .bs-fuss a:visited{ color:var(--link); }

/* Pflegeseite */
.bs-seite{ max-width:900px; }
.bs-zurueck{ margin:0 0 10px; font-size:14px; }
.bs-zurueck a, .bs-zurueck a:visited{ color:var(--link); }
.bs-h1{ margin:0 0 6px; font-size:26px; color:var(--ueberschrift, var(--ink)); }
.bs-unter{ margin:0 0 16px; color:var(--ink-soft); font-size:14px; line-height:1.5; }
.bs-leer{ margin:0; color:var(--ink-soft); font-size:13.5px; }
.bs-zeile{ display:grid; grid-template-columns:1fr 210px; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.bs-gruppe .bs-zeile:first-of-type{ border-top:0; padding-top:0; }
.bs-felder{ display:flex; flex-direction:column; gap:6px; }
.bs-zeile input:not([type="hidden"]), .bs-zeile textarea, .bs-zeile select{
  font:inherit; font-size:max(14px,16px); padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--feld, var(--panel)); color:var(--ink); width:100%; box-sizing:border-box;
}
.bs-zeile input[name="titel"]{ font-weight:600; }
.bs-zeile textarea{ resize:vertical; font-size:max(13.5px,16px); }
.bs-rechts{ display:flex; flex-direction:column; gap:6px; }
.bs-nr{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); }
.bs-nr input{ width:90px !important; }
.bs-knoepfe{ display:flex; gap:6px; flex-wrap:wrap; }
.bs-wer{ font-size:11.5px; color:var(--ink-soft); }
@media (max-width:640px){
  .bs-zeile{ grid-template-columns:1fr; }
}