/* Kommunenportal -- CSS-Variablen 1:1 aus site-live/style.css uebernommen
   (BAUPLAN rote Linie #6: EIN Farbsystem). A1-Umfang: minimal funktional,
   Feinschliff nach K2-Komponenten folgt in A2. */
/* afw-brand v3.0 (Eisblau-Welt, MASTER C:\Users\floet\OneDrive\Dokumente\CLAUDE-lokal\skills\afw-brand\SKILL.md
   Section 1/2) -- Warmgrau #EFF0E5 und Alt-Mint/Teal #7BB39A sind seit
   10.08.2026 hart eliminiert, NIE aus einem gecachten Skill-Stand uebernehmen. */
:root {
  --dark: #0B3E6C;        /* Marineblau -- Primaerfarbe */
  --dark-deep: #08192A;   /* Verlaufsende Marineblau-Sektion */
  --bg: #EDF2F4;          /* Eisblau -- Grundflaeche */
  --surface: #fff;        /* Kartenflaeche */
  --soft: #F4F8F9;        /* Nebelweiss -- Sekundaerflaeche */
  --line: #E2E8EB;        /* Dunstgrau -- Trennlinien */
  --emerald: #1F7D4F;     /* Emerald tief -- Verlaufsende/Hover */
  --emerald-mid: #2FA36B; /* Emerald -- CTAs, Akzent */
  --emerald-soft: #7BE0AE;/* Emerald hell -- Highlights auf Dunkel */
  --petrol: #15596B;      /* Petrol dunkel -- Kicker/Quellenzeile direkt auf Eisblau */
  --petrol-card: #2F7D8C; /* Petrol -- Kicker/Tags auf weissen Karten */
  --mint: #D8E9E4;        /* Mint-Pastell -- weiterhin gueltig (v3.0 Section 1c) */
  --text: #2C3A44;        /* Fliesstext */
  --muted: #56656E;       /* Sekundaertext */
  --link: #156082;        /* Hyperlink primaer */
  --terrakotta: #B4571E;  /* NUR fuer Gas-/Oelkosten, nie dekorativ */
}

* { box-sizing: border-box; }

html {
  /* Wurzel-Fix Sticky-Chat (Design-Kritikrunde): manche Browser/Umgebungen
     setzen body eine eigene Scroll-Box (overflow-y:auto), wodurch body statt
     des Viewports zum Scroll-Container wird -- .magazin-seitenspalte{position:
     sticky} verankert sich dann auf dem FALSCHEN Vorfahren und "klebt" nie.
     html traegt den Seitenscroll explizit selbst, body bekommt unten
     ausdruecklich KEINEN eigenen Scroll-Container. */
  overflow-y: auto;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Open Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  padding: 0;
  overflow-y: visible;
  min-height: 100%;
}

/* Fluent-Typoskala + 4px-Raster (Kommune-Sicht-Umbau P2, Anja-Auftrag 10.08.2026):
   Segoe UI zuerst, CI-Farben unveraendert. */
h1 { font-size: 1.75rem; font-weight: 600; }
h2 { font-size: 1.3rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
.fluent-caption { font-size: 12px; color: var(--muted); }

a, button, input, textarea, select { font-family: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--dark);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dark);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap { margin: 0 auto; max-width: 880px; padding: 24px 16px 64px; }

.site-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 0; }

/* SharePoint-artiger Breadcrumb unter dem Kopfbereich (Kommune-Sicht-Umbau P2,
   Runde 2) -- eigene Zeile, ruehrt die Hauptnav nicht an. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: .8rem;
  color: var(--muted);
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.breadcrumb a { color: var(--link); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--dark); font-weight: 600; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0; }
.brand { color: var(--dark); font-weight: 800; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 34px; width: auto; }
.nav a { color: var(--dark); font-weight: 700; text-decoration: none; margin-right: 14px; }
.nav a:hover { color: var(--emerald); }
.link-button { background: none; border: 0; color: var(--dark); cursor: pointer; font: inherit; font-weight: 700; text-decoration: underline; padding: 0; }

h1, h2, h3 { color: var(--dark); line-height: 1.15; letter-spacing: -0.015em; }
.eyebrow { color: var(--petrol); font-size: .82rem; font-weight: 800; letter-spacing: .06em; margin: 0 0 .3rem; text-transform: uppercase; }
.muted { color: var(--muted); }

/* Fluent Depth-Schatten statt harter Kartenrahmen (depth-4/depth-8-Anlehnung). */
.depth-4 { box-shadow: 0 1.6px 3.6px rgba(11, 62, 108, .10), 0 0.3px 0.9px rgba(11, 62, 108, .08); }
.depth-8 { box-shadow: 0 3.2px 7.2px rgba(11, 62, 108, .12), 0 0.6px 1.8px rgba(11, 62, 108, .08); }

.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(11, 62, 108, .06);
  padding: 20px;
  margin-bottom: 16px;
}

/* v3.0 Section 1e "Marineblau-Sektion": Verlaeufe fuer ganzflaechige Baender
   sind Marineblau -> Dunkelblau-Tiefe, NICHT Emerald/Petrol gemischt. */
.belonging-banner {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-deep) 100%);
  color: #fff;
}
.belonging-banner h1, .belonging-banner .eyebrow { color: #fff; }

.hero-step { border-left: 5px solid var(--emerald-mid); }
.hero-step-text { font-size: 1.2rem; font-weight: 700; color: var(--dark); margin: 0; }

/* Fluent-Buttons: 32px Hoehe, 4px Radius, Primary = CI-Emerald (Kommune-Sicht-Umbau P2). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--emerald);
  border: 1px solid var(--emerald);
  border-radius: 4px;
  color: #fff !important;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  height: 32px;
  padding: 0 16px;
  text-decoration: none;
}
.button:hover { background: var(--dark); border-color: var(--dark); }

/* Fluent Command-Bar: Icon+Label statt verstreuter Buttons, ohne Fuellflaeche
   (an CI angepasste "subtle button"). */
.command-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.command-bar .button-command {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--dark) !important;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  height: 32px;
  padding: 0 12px;
  text-decoration: none;
}
.command-bar .button-command:hover { background: var(--soft); border-color: var(--line); }
.command-bar .button-command svg { flex: none; }

/* Fluent-Pills fuer Status/Badges (4px-Raster-Innenabstand, ruhigere Deckkraft). */
.tag {
  display: inline-block;
  background: var(--mint);
  border-radius: 999px;
  color: #114A5A;
  font-size: .78rem;
  font-weight: 700;
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
}
.tag.gruen, .tag.ampel-gruen { background: var(--emerald-soft); color: #0B3E20; }
.tag.gelb, .tag.ampel-gelb { background: #FBE7B0; color: #5A3E00; }
.tag.rot, .tag.ampel-rot { background: #F5C2C0; color: #6B0E0A; }
.tag.vorbereitung, .tag.ampel-vorbereitung { background: #DCE4EC; color: #33475A; }

.ampel, .ampel-gruen::before, .ampel-gelb::before, .ampel-rot::before, .ampel-vorbereitung::before {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.ampel.gruen { background: var(--emerald-mid); }
.ampel.gelb { background: #E8B93B; }
.ampel.rot { background: #D64541; }
.ampel.vorbereitung { background: #8A9BB0; }

.progress-bar { background: var(--soft); border-radius: 999px; height: 14px; overflow: hidden; margin: 10px 0; }
.progress-fill { background: var(--emerald-mid); height: 100%; }

/* Status je Dokumenttyp mit Upload-Link (Folgeauftrag UX-Runde1, 07.08.2026). */
.doktyp-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0 18px;
}
.doktyp-status-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.doktyp-status-link { color: var(--link); font-weight: 700; text-decoration: none; }
.doktyp-status-link:hover { text-decoration: underline; }
/* Fehlendes Dokument (rot): Upload-Weg besonders prominent statt kleiner Text-Link. */
.button-prominent { background: var(--petrol-card); }
.button-prominent:hover { background: var(--petrol); }
.doktyp-status-platzhalter { font-size: .85em; font-style: italic; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.milestone-list { list-style: none; margin: 0; padding: 0; }
.milestone-list li { padding: 4px 0; color: var(--muted); }
.milestone-list li.erreicht { color: var(--emerald); font-weight: 700; }

.formulare-grid, .form-grid, .file-list, .file-chips {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
.formulare-grid a.card { display: block; text-decoration: none; color: var(--text); }
.formulare-grid a.card:hover { border-color: var(--emerald-mid); }
.form-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  display: block; padding: 16px; text-decoration: none; color: var(--text);
}
.form-tile:hover { border-color: var(--emerald-mid); }
.form-tile span { display: block; color: var(--muted); font-size: .88rem; margin-top: 4px; }

label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--dark); }
input[type=password] {
  border: 2px solid var(--dark);
  border-radius: 8px;
  font: inherit;
  padding: 11px 14px;
  width: 100%;
  max-width: 320px;
}

.error { color: #8A1518; font-weight: 700; }

table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
th { color: var(--dark); }

footer.site-foot { color: var(--muted); font-size: .85rem; margin-top: 24px; }

/* --- Anja-Dashboard-Matrix (kompakt, keine horizontale Scroll bei 1400px) - */
.matrix-wrap { overflow-x: auto; }
.matrix-table { width: 100%; border-collapse: collapse; font-size: .85rem; table-layout: fixed; }
.matrix-table th, .matrix-table td { border-bottom: 1px solid var(--line); padding: 6px 6px; text-align: left; vertical-align: middle; }
.matrix-table th.matrix-doktyp, .matrix-table td.matrix-doktyp { width: 34px; text-align: center; padding: 6px 2px; }
.matrix-doktyp-label { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: .78rem; white-space: nowrap; }
.matrix-sticky { position: sticky; left: 0; background: var(--surface, #fff); z-index: 1; min-width: 190px; max-width: 220px; }
thead .matrix-sticky { z-index: 2; background: var(--soft, #f4f4f4); }

/* --- K2-Komponenten (A2) ------------------------------------------ */

.progress-path .progress-bar { position: relative; }
.progress-marker {
  position: absolute;
  top: -3px;
  width: 8px; height: 20px;
  border-radius: 4px;
  background: var(--line);
  transform: translateX(-50%);
}
.progress-marker.erreicht { background: var(--dark); }

.milestone-chips .tag.gruen, .milestone-chips .tag.ampel-gruen { background: var(--emerald-soft); }

.milestone-toast {
  border-left: 5px solid var(--emerald-mid);
  background: var(--mint);
  animation: toast-ein .4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .milestone-toast { animation: none; }
}
@keyframes toast-ein {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.community-feed .feed-list { list-style: none; margin: 0; padding: 0; }
.community-feed .feed-list li { border-bottom: 1px solid var(--line); padding: 8px 0; }
.community-feed .feed-list li:last-child { border-bottom: 0; }
.feed-kategorie { color: var(--petrol); font-weight: 700; font-size: .78rem; text-transform: uppercase; margin-right: 6px; }
.feed-datum { display: block; font-size: .78rem; }

.faq-search { margin-bottom: 16px; }
.faq-search input[type=search] {
  border: 2px solid var(--dark);
  border-radius: 8px;
  font: inherit;
  padding: 11px 14px;
  width: 100%;
}
.faq-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 20px; }
.faq-tile summary { cursor: pointer; font-weight: 700; color: var(--dark); }
.faq-tile p { margin: 10px 0 0; color: var(--text); }

.chat-verlauf { list-style: none; margin: 0; padding: 0; }
.chat-verlauf li { border-bottom: 1px solid var(--line); padding: 10px 0; }
.chat-verlauf li.antwort, .chat-verlauf li.chat-antwort { background: var(--soft); padding-left: 10px; }

/* Inline-Chat-Widget (bleibt als scrollbares Panel auf der Seite, kein Seitenwechsel) */
.chat-widget { display: flex; flex-direction: column; gap: 10px; }
.chat-verlauf-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.chat-widget .chat-verlauf li:last-child { border-bottom: 0; }
.chat-form { display: flex; flex-direction: column; gap: 6px; }
.chat-form-status { min-height: 1.2em; }
.chat-form-status.ist-fehler { color: #b3261e; }
textarea {
  border: 2px solid var(--dark);
  border-radius: 8px;
  font: inherit;
  padding: 10px 12px;
  width: 100%;
}

.tour-list { list-style: none; margin: 0; padding: 0; }
.tour-list li { border-bottom: 1px solid var(--line); padding: 8px 0; }

@media (max-width: 600px) {
  .wrap { padding: 16px 12px 48px; }
  /* 40px-Klickflaeche mobil (Fix-Runde, UX-Kritiker 10.08.2026): Fluent-Buttons
     sind am Desktop bewusst kompakt (32px), auf Touch-Geraeten braucht es mehr
     Treffsicherheit. */
  .nav a { display: inline-flex; align-items: center; min-height: 40px; margin: 4px 8px 4px 0; padding: 0 4px; }
  .button, .button-command { min-height: 40px; }
  .faq-grid { grid-template-columns: 1fr; }
}

/* --- Onepager-Umbau (Anja-Feedback-Runde, Punkt 5) ------------------ */

main.onepager { padding: 0; }
/* Design-Kritikrunde (Anja, sofort verbindlich): kompakter Kopfbereich, damit
   "Eure Unterlagen" ohne Scrollen mindestens anschneidend sichtbar ist --
   Baender einheitlich schlanker statt 40px (gilt fuer ALLE Baender gleich,
   sonst tanzen wieder die Kanten). */
.onepager .band { width: 100%; padding: 22px 0; }
.onepager .band-inner { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.onepager .band-dark { background: linear-gradient(135deg, var(--dark), var(--dark-deep)); color: #fff; }
.onepager .band-dark h1, .onepager .band-dark h2, .onepager .band-dark .eyebrow { color: #fff; }
.onepager .band-mint { background: var(--mint); }
.onepager .band-light { background: var(--surface); }
.onepager .band-bg { background: var(--bg); }
.onepager .band .card { margin-bottom: 16px; }
.onepager .band .card:last-child { margin-bottom: 0; }

/* Magazin-Raster (Anja-Design-Runde P3-5, Nachschaerfung "Spalten tanzen"):
   EIN CSS-Grid mit festen Spuren, das JEDE Startseiten-Sektion oberhalb des
   Unterlagen-Bereichs benutzt -- Toasts, Aufgabenzeile, Hinweisband UND das
   eigentliche Magazin selbst teilen sich exakt dieselben Spaltenkanten, damit
   nichts aus dem Raster springt. Echte Randspalten (Spur 1+4) statt eines
   mittigen Einheits-Containers: sie wachsen/schrumpfen symmetrisch mit dem
   Fenster, Hauptspalte (Spur 2) und Seitenspalte (Spur 3) bleiben in fester
   Breite stehen -- magazinhaft, nicht "eine Box in der Mitte". */
.magazin-raster {
  display: grid;
  /* Spur 1 ist eine ECHTE Marginalspalte (Kicker/Datum/Meta), keine reine
     Fuellspur -- waechst mit dem Fenster, bleibt aber nie schmaler als
     120px, damit der Kicker immer Platz hat (Design-Kritikrunde Blocker 2). */
  grid-template-columns: minmax(120px, 1fr) minmax(0, 640px) minmax(0, 300px) minmax(24px, 1fr);
  column-gap: 28px;
  row-gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
/* Volle-Breite-Baender (Toast/Aufgabe/Hinweis): Inhalt spannt Hauptspalte +
   Seitenspalte (Spur 2 bis 4) -- gleiche linke/rechte Kante wie das Magazin
   darunter, nur der Hintergrund des .band bleibt edge-to-edge. */
.magazin-band-inhalt { grid-column: 2 / 4; }
.magazin-rand-kicker {
  grid-column: 1; grid-row: 1;
  margin: 0; align-self: start;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--emerald-soft); line-height: 1.5;
}
.magazin-hauptspalte { grid-column: 2; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.magazin-seitenspalte { grid-column: 3; min-width: 0; }
/* Dokumente + Magazin teilen sich EIN Raster (siehe start.html). Wurzel-Fix
   Ueberdeckung (Anja live: "Chat haengt vor den Inhalten"): die Seitenspalte
   NIE ueber eine Reihe spannen lassen, die eine volle-Breite-Sektion
   (Unterlagen, Spur 2 BIS 4) mitbenutzt -- sonst liegt die sticky Seitenspalte
   im selben Grid-Feld wie der Unterlagen-Inhalt und ueberdeckt ihn beim
   Scrollen. Unterlagen bleibt darum eine EIGENE Reihe ganz ohne Seitenspalte
   (volle Breite, unangetastet); die Seitenspalte beginnt danach in Reihe 2,
   auf Hoehe der Magazin-Hauptspalte, und ist dort sticky -- kein
   Ueberlappungs-Risiko mehr, weil beide Elemente nie dieselbe Rasterzelle
   beanspruchen. Kein z-index-Pflaster noetig. */
.magazin-unterlagen-reihe { grid-column: 2 / 4; grid-row: 1; }
.magazin-hauptbereich .magazin-hauptspalte { grid-row: 2; }
.magazin-hauptbereich .magazin-seitenspalte { grid-row: 2; }

@media (max-width: 900px) {
  .magazin-raster { grid-template-columns: minmax(16px, 1fr) minmax(0, 1fr) minmax(16px, 1fr); column-gap: 0; }
  .magazin-band-inhalt, .magazin-hauptspalte, .magazin-seitenspalte, .magazin-rand-kicker, .magazin-unterlagen-reihe { grid-column: 2; }
  .magazin-hauptbereich .magazin-seitenspalte { grid-row: auto; position: static; }
  .magazin-rand-kicker { grid-row: auto; margin-bottom: 4px; }
}
@media (min-width: 901px) {
  .magazin-seitenspalte { position: sticky; top: 16px; align-self: start; }
}

.chat-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 0; }
.chat-panel .chat-verlauf { max-height: 280px; overflow-y: auto; }
.chat-panel h2 { font-size: 1.05rem; margin-top: 0; }

/* Magazin-Layout Startseite (Anja-Design-Runde P3-5): "Neuigkeiten & FAQ" ist
   die prominenteste, groesste Karte in der Hauptspalte -- leichter Petrol-
   Farbakzent oben statt schlichtem weissen Karten-Look, damit sie sich vom
   Rest abhebt ("der Grund, oefter reinzuklicken"). */
.magazin-hero-card { border-top: 4px solid var(--petrol-card); margin-bottom: 0; }

/* Typo-Hierarchie (Design-Kritikrunde, "WICHTIG"): jede Magazin-Sektion
   bekommt einen KLEINEN Kicker (gesperrte Petrol-Versalien, wie auf der
   Live-Site) UND einen GROSSEN Marineblau-Display-Titel -- nicht ueberall
   dasselbe Caps-Label. Kicker-Wortlaut ist je Sektion unterschiedlich
   ("Aus der Tour", "Terminplan", "Vor Ort", "Austausch" ...). */
.magazin-kicker {
  color: var(--petrol-card); font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px;
}
.magazin-titel { color: var(--dark); font-size: 1.6rem; font-weight: 700; line-height: 1.15; margin: 0 0 14px; letter-spacing: -.01em; }
.magazin-hero-card .magazin-titel { font-size: 1.85rem; }

/* Design-Referenz Ahlen-Praese (Anja-Ansage): nicht alles weiss -- ein Teil
   der Magazin-Karten traegt ein zartes CI-Farbfeld statt reinem Weiss (afw-
   brand v3.0: Mint-Pastell #D8E9E4 bleibt gueltig, Nebelweiss #F4F8F9 fuer
   ruhige Sekundaerflaechen -- Warmgrau/Alt-Mint sind NICHT im Einsatz). */
.magazin-hauptspalte .card[aria-label="WhatsApp-Gruppe zum Eventtag"] { background: var(--mint); border-color: var(--emerald-soft); }
.magazin-hauptspalte .card:last-child { background: var(--soft); }
/* Kontrast-Fix (Design-Kritikrunde): Petrol #2F7D8C erreicht auf Nebelweiss
   #F4F8F9 nur 4,43:1 (afw-brand v3.0, Section 1b) -- auf dieser Karte (Jour
   fixe & Kontakt, Hintergrund --soft) deshalb Petrol dunkel #15596B. */
.magazin-hauptspalte .card:last-child .magazin-kicker { color: var(--petrol); }
.magazin-zweispaltig { display: grid; grid-template-columns: 1fr; gap: 20px; }
.magazin-spalten-titel { font-weight: 700; color: var(--dark); margin: 0 0 8px; font-size: .95rem; }
@media (min-width: 640px) {
  .magazin-zweispaltig { grid-template-columns: 1fr 1fr; }
}

.jourfixe-liste { list-style: none; margin: 0; padding: 0; }
.jourfixe-liste li { padding: 6px 0; }

/* Punkt "Neuigkeiten & FAQ redaktionell gestalten" (Design-Kritikrunde):
   Karten mit Kategorie-Farbe statt grauer Log-Liste -- visuelle
   Differenzierung Meilenstein/Tour/Presse/Sonstiges ueber den linken Rand,
   Meta-Zeile (NEU-Pille, Kategorie, Datum) optisch abgesetzt vom Fliesstext. */
.neuigkeiten-karten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.neuigkeiten-karte {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--soft); border-left: 3px solid var(--line); border-radius: 8px;
  padding: 10px 12px;
}
.neuigkeiten-karte-presse { border-left-color: var(--petrol-card); }
.neuigkeiten-karte-termin { border-left-color: var(--emerald-mid); }
.neuigkeiten-karte-tour { border-left-color: var(--dark); }
.neuigkeiten-karte-sonstiges { border-left-color: var(--muted); }
.neuigkeiten-karte-inhalt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.neuigkeiten-karte-kopf { display: flex; align-items: center; gap: 8px; font-size: .75rem; }
.neuigkeiten-karte-kopf .feed-kategorie { font-weight: 700; color: var(--dark); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.neuigkeiten-karte-text { color: var(--text); }

/* FAQ-Teaser: groesserer Fliesstext mit Petrol-Aufzaehlungsstrich statt der
   generischen Chip-Optik -- FAQ soll wie ein redaktioneller Ausschnitt
   wirken, nicht wie eine weitere Tag-Wolke. */
.faq-teaser-liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.faq-teaser-liste li { padding-left: 14px; border-left: 3px solid var(--petrol-card); font-weight: 600; color: var(--dark); font-size: .95rem; line-height: 1.35; }

.einreichen-hinweis-karte { background: var(--soft); box-shadow: none; margin-bottom: 0; }

/* .magazin-hauptspalte hat schon row-gap ueber flex "gap" -- Karten darin
   brauchen kein eigenes margin-bottom mehr (sonst doppelter Abstand). */
.magazin-hauptspalte > .card { margin-bottom: 0; }

/* Newsticker mit Icons/Farbakzenten statt grauer Liste */
.feed-list li { display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.feed-list li:last-child { border-bottom: 0; }
.feed-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; color: #fff; }
.feed-icon.presse { background: var(--petrol); }
.feed-icon.termin { background: var(--emerald-mid); }
.feed-icon.tour { background: var(--dark); }
.feed-icon.sonstiges { background: var(--muted); }

/* FAQ-Sprungleiste + Accordion */
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.faq-jump a { background: var(--mint); border-radius: 999px; color: #114A5A; font-weight: 700; font-size: .85rem; padding: 6px 14px; text-decoration: none; }
.faq-toggle-row { margin-bottom: 12px; }

/* Countdown-Timeline (Kerpen-Muster, Punkt 3) */
.countdown-timeline { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--line); }
.countdown-timeline li { position: relative; padding: 6px 0 18px 22px; }
.countdown-timeline li::before {
  content: ""; position: absolute; left: -9px; top: 10px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--line); border: 2px solid var(--surface);
}
.countdown-timeline li.aktiv::before { background: var(--emerald-mid); }
.countdown-timeline li.erledigt::before { background: var(--dark); }
.countdown-timeline .phase-titel { font-weight: 800; color: var(--dark); }
.countdown-timeline li.aktiv .phase-titel { color: var(--emerald); }
.countdown-timeline .phase-massnahme { display: block; color: var(--text); margin-top: 2px; }
.countdown-timeline .phase-zeit { color: var(--muted); font-size: .85rem; }

/* Datei-Explorer (Anja-Feedback 2: "wie man es von Microsoft kennt" --
   nuechterne Tabelle statt bunter Karten im Versatz, dezente Hover-Zeile). */
.explorer-kopfzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.explorer-kopfzeile h2 { margin: 0; font-size: 1.15rem; }

/* Ansprechpartner:in ergaenzen als dicker Button rechts statt unauffaelligem
   Aufklappfeld (Anja-Feedback P3-5, Punkt 2) -- <summary> traegt die
   .button/.button-prominent-Optik, Formular liegt in einem Popover darunter. */
.ansprechpartner-kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: relative; margin-bottom: 10px; }
.ansprechpartner-formular-details { position: relative; }
.ansprechpartner-formular-details > summary { list-style: none; }
.ansprechpartner-formular-details > summary::-webkit-details-marker { display: none; }
.ansprechpartner-formular-popover {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5;
  width: min(360px, 90vw); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 16px;
}
@media (max-width: 640px) {
  .ansprechpartner-formular-popover { position: static; width: auto; box-shadow: none; margin-top: 8px; }
}
/* SharePoint/OneDrive-artige DetailsList (Kommune-Sicht-Umbau P2, 10.08.2026):
   44px-Zeilen, dezente 1px-Trennlinien statt Rahmen um jede Zeile, CI-getoenter
   Hover statt hartem Grau. */
.explorer-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.explorer-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.explorer-table caption { text-align: left; padding: 8px 12px; color: var(--muted); font-size: .78rem; }
.explorer-table th, .explorer-table td { padding: 0 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; height: 44px; }
.explorer-table thead th { height: 40px; background: var(--soft); font-weight: 600; color: var(--dark); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.explorer-table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--dark); }
.explorer-table th button:focus-visible { outline: 3px solid var(--dark); outline-offset: 2px; }
.explorer-table th[aria-sort] button::after { content: "⇅"; opacity: .5; font-weight: 400; }
.explorer-table th[aria-sort="ascending"] button::after { content: "▲"; opacity: 1; }
.explorer-table th[aria-sort="descending"] button::after { content: "▼"; opacity: 1; }
.explorer-table tbody tr:hover { background: var(--mint); background: color-mix(in srgb, var(--mint) 55%, var(--surface)); }
.explorer-table tbody tr:last-child td { border-bottom: 0; }
.explorer-table td.explorer-name { white-space: normal; font-weight: 600; }
.explorer-table td.explorer-beschreibung { white-space: normal; color: var(--muted); }
.explorer-icon { display: inline-flex; align-items: center; width: 18px; margin-right: 8px; vertical-align: middle; }
.explorer-table .explorer-download { color: var(--link); font-weight: 600; text-decoration: none; white-space: nowrap; }
.explorer-table .explorer-download:hover { text-decoration: underline; }
/* Vorversion als eigenes Badge statt Textzusatz im Dateinamen (UX-Runde1 Minor 2, 07.08.2026). */
.badge-vorversion {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-weight: 400;
  font-size: .78em;
  vertical-align: middle;
}
/* Status je Dokumenttyp mit direktem Upload-Weg (UX-Runde1 Folgeauftrag, 07.08.2026). */
.doktyp-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 8px 0 4px;
}
.doktyp-status-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* Anja-Feedback: war global (traf auch den "Jetzt einreichen"-Button im
   Aufgaben-Band -> voller-Breite-Balken statt normaler Button-Proportion) --
   volle Breite gilt NUR fuer die Einreichen-Kachel-Buttons in der
   Doktyp-Status-Kachel-Ansicht, nicht ueberall. */
.doktyp-status-tile .button-prominent { width: 100%; text-align: center; }
.doktyp-status-link { color: var(--link); font-weight: 700; text-decoration: none; }
.doktyp-status-link:hover { text-decoration: underline; }
.doktyp-status-platzhalter { font-size: .85rem; font-style: italic; }
.explorer-section { margin-bottom: 22px; }
.explorer-leer { padding: 14px 12px; color: var(--muted); }
details.explorer-einklappbar > summary { cursor: pointer; font-weight: 700; color: var(--dark); padding: 4px 0; }

/* Drei-Block-Unterlagenansicht (Bau-Runde, Anja-Auftrag 10.08.2026): Orga-/PR-/
   Standard-Block als gleichrangige Unterabschnitte innerhalb "Eure Unterlagen". */
.explorer-block-titel { font-size: 1rem; margin: 0 0 8px; color: var(--dark); }
.tag-neu { margin-left: 4px; }
.hinweisband-neu { border-left: 4px solid var(--emerald-mid); background: var(--mint); }
.hinweisband-neu a { color: var(--link); font-weight: 700; }

/* Zeitplan prominent im Orga-Block (Uelzen-Sichtung, Anja-Auftrag 10.08.2026,
   Punkt 3): eigene Mini-Sektion ganz oben, dezenter CI-Akzent, Fluent-konform. */
.zeitplan-hero {
  border-left: 3px solid var(--emerald-mid);
  background: var(--mint);
  border-radius: 12px;
  padding: 10px 14px 14px;
  margin-bottom: 16px;
}
.zeitplan-hero-titel { font-weight: 700; color: var(--dark); margin: 0 0 6px; font-size: .95rem; }
.zeitplan-hero .explorer-wrap { background: var(--surface); }

/* Phasen-abhaengige FAQ (Anja-Auftrag 10.08.2026): eingeklappter Abschnitt
   "Für euch gerade nicht relevant" -- gleiche Fluent-Einklapp-Optik wie der
   Datei-Explorer, nur ein Randstrich statt eigener Kachel. */
.faq-nicht-relevant { border-left: 3px solid var(--line); padding-left: 12px; margin-top: 18px; }
.faq-nicht-relevant > summary { color: var(--muted); }

/* Phasen-Auswahlfeld im Admin-FAQ-Formular (Anja-Auftrag 10.08.2026). */
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
fieldset legend { padding: 0 6px; color: var(--dark); font-weight: 700; font-size: .85rem; }
.phasen-checkbox { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; margin: 4px 14px 4px 0; }
.phasen-checkbox input { margin: 0; }

/* Frage-Feld waechst mit dem Inhalt (Anja 07.08.); moderner Weg + JS-Fallback in admin/faq.html. */
.frage-feld { field-sizing: content; min-height: 2.2rem; resize: vertical; width: 100%; overflow: hidden; }

/* /admin/faq als kompakte Liste statt grosser Karten (Anja-Auftrag 10.08.2026,
   Punkt 2): eine ruhige Zeile je Eintrag, Details/Bearbeitung nur aufgeklappt. */
.faq-admin-liste { border-top: 1px solid var(--line); margin-bottom: 22px; }
.faq-admin-zeile { border-bottom: 1px solid var(--line); }
.faq-admin-zeile > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px; cursor: pointer; list-style: none;
}
.faq-admin-zeile > summary::-webkit-details-marker { display: none; }
.faq-admin-zeile > summary::before { content: "▸"; color: var(--muted); margin-right: 8px; flex: none; }
.faq-admin-zeile[open] > summary::before { content: "▾"; }
.faq-admin-zeile:hover > summary { background: var(--soft); }
.faq-admin-frage { font-weight: 600; color: var(--text); flex: 1 1 auto; min-width: 0; }
.faq-admin-pills { display: flex; flex-wrap: wrap; gap: 4px; flex: none; }
.faq-admin-details { padding: 4px 4px 16px 26px; }

/* --- Leitbild-Umbau (Anja-Auftrag 07.08.2026 abends): Aufgabenzeile als
   einziges Akzentband, Einreichen als ruhige Reihe statt Kachel-Grid,
   "Braucht dich heute" als sortierte Aktionsliste. Typografische Hierarchie
   statt Kaesten -- weniger Rahmen, mehr Linien/Weissraum. --- */
/* v3.0 Section 1e "Marineblau-Sektion": Marineblau -> Dunkelblau-Tiefe,
   diagonal -- der kanonische Verlauf fuer ganzflaechige Akzentbaender.
   Kein Emerald/Petrol-Mix mehr (Design-Kritikrunde, Blocker 1). */
.band-akzent {
  width: 100%;
  padding: 28px 0;
  background: linear-gradient(115deg, var(--dark) 0%, var(--dark-deep) 100%);
  color: #fff;
  border-bottom: 4px solid var(--emerald-mid);
}
.band-akzent .band-inner { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.band-akzent .eyebrow { color: rgba(255,255,255,.85); }
/* Design-Kritikrunde: kompakter statt 1.35rem, damit die Aufgabenzeile
   weniger Vertikalraum frisst (above-the-fold-Anforderung fuer /start). */
.band-akzent .hero-step-text { color: #fff; font-size: 1.15rem; }
.band-akzent .muted { color: rgba(255,255,255,.8); }
.band-akzent .button-prominent { background: var(--emerald-soft); color: #08321F !important; }
.band-akzent .button-prominent:hover { background: #fff; }
/* Anja-Feedback 07.08. abends: die Anmeldestand-Zeile ging im Farbverlauf
   des Akzentbands unter. Jetzt eigene halbtransparente helle Pille statt
   direktem Text auf dem Band -- Text #0B3E6C auf weiss (rgba .92) hat
   rechnerisch ~10.9:1 Kontrast, weit ueber WCAG-AA (4.5:1). */
.anmeldestand-pille {
  margin: 8px 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  background: rgba(255,255,255,.92);
  color: var(--dark);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
  /* dataviz-Prinzip: Ziffern, die nebeneinander/im Vergleich stehen, bekommen
     Festbreiten-Ziffern -- kein "Wackeln" der Prozentzahl beim Aktualisieren. */
  font-variant-numeric: tabular-nums;
}
.anmeldestand-pille .anmeldestand-stand { color: var(--muted); font-weight: 500; font-size: .78rem; white-space: nowrap; }

/* Teams-Jour-fixe-Links (Anja-Auftrag 07.08.): Logo-Snippet vor dem Linktext,
   vertikal zentriert auf der Textmitte. */
.teams-link { display: inline-flex; align-items: center; gap: 6px; }
.teams-link .teams-icon { flex: none; }

/* Einreichen-Zeile: EINE ruhige Reihe statt Kachel-Grid (Leitbild Regel 3). */
.doktyp-status-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.doktyp-status-reihe li { display: flex; align-items: center; gap: 8px; }

/* "Braucht dich heute" -- Anja-Sicht, Dringlichkeit statt Alphabet. */
.braucht-dich-liste { list-style: none; margin: 0; padding: 0; }
.braucht-dich-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.braucht-dich-liste li:last-child { border-bottom: 0; }

/* Pflege-Linkleiste: ruhige dritte Zone mit Zaehlern statt eigener Kaesten. */
.pflege-linkleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 18px 0 28px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pflege-linkleiste a { color: var(--link); font-weight: 700; text-decoration: none; }
.pflege-linkleiste a:hover { text-decoration: underline; }

/* Dashboard: Akzentband nicht als volle Bildschirmbreite, sondern als Karte
   innerhalb des bestehenden .wrap-Layouts (Anja-Dashboard bleibt kompakt). */
.wrap .band-akzent { width: auto; border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; border-bottom: 0; }
.braucht-dich-liste .button { flex: 0 0 auto; }
.braucht-dich-liste li > span:first-child { flex: 1 1 auto; }