/* FRIDA – the look of the FDP/BAMH-Fraktion (Spec 6.1).
 *
 * Plain CSS, no build step and no CDN. The visual language is the click demo of
 * 19.10.2026: navy top bar, logo square in green and blue, cards on a light grey.
 * Colours are custom properties: logo and final colours of the Fraktion follow
 * (Spec 20 Nr. 8) and replace the values in :root only.
 *
 * Base size 18 px, contrast after WCAG 2.2 AA (text at least 4.5:1, borders of
 * controls 3:1), dark mode after the device setting, touch targets 44 px.
 * Under 768 px a tab bar at the bottom, from 768 px a side bar.
 */

:root {
  --blau: #2a9bd8;
  --blau-d: #1d6fa0;
  --gruen: #95c11f;
  --gruen-d: #5f7e10;
  --gelb: #ffed00;
  --navy: #12324a;
  --bg: #f3f5f8;
  --card: #ffffff;
  --text: #15202b;
  --muted: #5b6876;
  --line: #e1e6ec;
  --rand: #7b8794; /* borders of inputs: 3:1 against the card */
  --rot: #c62828;
  --link: var(--blau-d);
  --fokus: var(--blau-d);
  --warn-bg: #fff3e0;
  --warn-text: #8a4b00;
  --ok-bg: #e9f4d2;
  --ok-text: #3f5a07;
  --fehler-bg: #fde7e7;
  --fehler-text: #a51d1d;
  --info-bg: #e1f1fb;
  --info-text: #145a85;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(18, 50, 74, .06), 0 4px 16px rgba(18, 50, 74, .05);
  --tab-hoehe: 64px;
  /* The arrow of a select (WebKit ignores the height of a native select, so it is drawn here). */
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6876' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 112.5%; /* 18 px */
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1620;
    --card: #16212d;
    --text: #e7edf3;
    --muted: #9aa8b6;
    --line: #253445;
    --rand: #6b7a89;
    --navy: #0a1824;
    --link: #7cc8f0;
    --fokus: #7cc8f0;
    --rot: #ff8a80;
    --warn-bg: #3a2a10;
    --warn-text: #f3c27a;
    --ok-bg: #26340a;
    --ok-text: #c9e67e;
    --fehler-bg: #3a1616;
    --fehler-text: #f3a6a6;
    --info-bg: #0f3047;
    --info-text: #9ed4f3;
    --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8b6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* --- Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; overflow-wrap: anywhere; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; margin-top: 1.4rem; }
h3 { font-size: 1.05rem; }
p { margin: .4rem 0 .9rem; }
a { color: var(--link); text-underline-offset: .15em; }
small { font-size: .85rem; }
img, svg { max-width: 100%; }
ul, ol { padding-left: 1.3rem; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
/* In the navy header the blue ring would be too faint (WCAG 1.4.11): white there. */
.kopf :focus-visible { outline-color: #fff; }

.sprungmarke {
  position: absolute; left: .5rem; top: -4rem; z-index: 50;
  background: var(--card); color: var(--link); padding: .6rem 1rem; border-radius: 10px;
}
.sprungmarke:focus { top: .5rem; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Forms and buttons --------------------------------------------------------- */

label { display: block; font-weight: 600; margin: .8rem 0 .3rem; }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--card);
  border: 1px solid var(--rand); border-radius: 10px; padding: .55rem .75rem;
  min-height: 44px; width: 100%; max-width: 32rem;
}
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.6rem; background: var(--card) var(--pfeil) no-repeat right .75rem center / 1.1rem;
}
input[type="checkbox"], input[type="radio"] {
  width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--blau-d);
}
.haken { display: flex; align-items: center; gap: .6rem; font-weight: 400; margin: .6rem 0; min-height: 44px; }

button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  min-height: 44px; padding: .65rem 1.1rem; margin: .4rem .4rem .4rem 0;
  border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  background: var(--blau-d); color: #fff;
}
button:hover, .knopf:hover { filter: brightness(1.08); }
button:disabled { opacity: .55; cursor: not-allowed; }
.knopf-zweit { background: transparent; color: var(--link); border-color: var(--rand); }
.knopf-gefahr { background: var(--rot); color: #fff; }
@media (prefers-color-scheme: dark) { .knopf-gefahr { background: #c62828; } }

form { margin: 0; }
.formzeile { display: flex; flex-wrap: wrap; gap: 0 .75rem; align-items: flex-end; }
.formzeile > div { flex: 1 1 12rem; min-width: 0; }

/* --- Shell ---------------------------------------------------------------------- */

.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem 1rem; padding-top: max(.55rem, env(safe-area-inset-top));
  padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right));
  background: var(--navy); color: #fff;
}
.marke { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; min-height: 44px; min-width: 0; }
.logo {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: #fff;
  background: linear-gradient(135deg, var(--gruen) 0 50%, var(--blau) 50% 100%);
}
.markentext { min-width: 0; }
.markentext b { display: block; letter-spacing: .08em; font-size: 1.05rem; }
.markentext small { display: block; font-size: .78rem; color: #c4ccd3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: var(--blau-d); color: #fff;
}

.banner { margin: 0; padding: .6rem 1rem; font-weight: 600; display: flex; gap: .5rem; align-items: center; }
.banner-warnung { background: var(--warn-bg); color: var(--warn-text); }

.koerper { flex: 1; display: flex; min-width: 0; }
.inhalt {
  flex: 1; min-width: 0; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 1rem max(1rem, env(safe-area-inset-right)) calc(var(--tab-hoehe) + 1.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.inhalt:focus { outline: none; }
.allris-stand { margin-top: 2.5rem; font-size: .85rem; color: var(--muted); text-align: center; }

.seitenleiste { display: none; }
.tableiste {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tab-hoehe); padding: .4rem .2rem; font-size: .78rem; color: var(--muted); text-decoration: none;
}
.tab.aktiv { color: var(--link); font-weight: 700; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.symbol { flex: none; width: 22px; height: 22px; }

@media (min-width: 768px) {
  .tableiste { display: none; }
  .inhalt { padding: 1.5rem 1.75rem 2rem; }
  .seitenleiste {
    display: flex; flex-direction: column; gap: 2px; flex: none; width: 240px;
    padding: 1rem .6rem; background: var(--card); border-right: 1px solid var(--line);
    position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto;
  }
  .navpunkt {
    display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .6rem .75rem;
    border-radius: 10px; color: var(--text); text-decoration: none;
  }
  .navpunkt:hover { background: var(--bg); }
  .navpunkt.aktiv { background: color-mix(in srgb, var(--blau) 14%, transparent); color: var(--link); font-weight: 700; }
  .seitenfuss { margin-top: auto; padding: .8rem .75rem 0; border-top: 1px solid var(--line); }
  .seitenfuss b { display: block; font-size: .95rem; overflow-wrap: anywhere; }
  .seitenfuss small { color: var(--muted); }
  h1 { font-size: 1.8rem; }
}
@media (min-width: 1200px) { .seitenleiste { width: 260px; } }

/* --- Building blocks -------------------------------------------------------------- */

.seitenkopf { margin-bottom: 1.2rem; }
.unterzeile { color: var(--muted); margin: .2rem 0 0; }
.gedaempft { color: var(--muted); }
/* htmx indicators: own rules, because basis.html turns includeIndicatorStyles off (CSP style-src 'self'). hx-indicator puts htmx-request on the indicator element itself, hence the compound selector. */
.htmx-indicator { display: none; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { display: inline; }

.karte {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem; min-width: 0;
}
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.karte-leer { background: transparent; box-shadow: none; border-style: dashed; }
.karte-hinweis { border-left: 5px solid var(--blau); }

.raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 900px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { border-top: 1px solid var(--line); padding: .75rem 0; }
.liste > li:first-child { border-top: 0; padding-top: .25rem; }

.termin { display: flex; gap: .8rem; align-items: flex-start; }
.datum { flex: none; width: 3.4rem; text-align: center; background: var(--bg); border-radius: 10px; padding: .35rem 0; }
.datum b { display: block; }
.datum small { display: block; color: var(--muted); }
.termin-text { min-width: 0; flex: 1; }
.termin-text b { display: block; overflow-wrap: anywhere; }
.termin-text .gedaempft { display: block; overflow-wrap: anywhere; }
.extern { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.marker {
  display: inline-block; font-size: .8rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px;
  white-space: nowrap; background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.marker-ok { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.marker-warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.marker-fehler { background: var(--fehler-bg); color: var(--fehler-text); border-color: transparent; }
.marker-info { background: var(--info-bg); color: var(--info-text); border-color: transparent; }

.meldungen { margin-bottom: 1rem; }
.meldung { margin: 0 0 .5rem; padding: .7rem .9rem; border-radius: 10px; background: var(--info-bg); color: var(--info-text); font-weight: 600; }
.meldung-success { background: var(--ok-bg); color: var(--ok-text); }
.meldung-warning { background: var(--warn-bg); color: var(--warn-text); }
.meldung-error { background: var(--fehler-bg); color: var(--fehler-text); }
[data-passkey-meldung] { color: var(--fehler-text); font-weight: 600; }
[data-push-meldung] { font-weight: 600; }

/* --- Verwaltung ---------------------------------------------------------------------- */

.reiter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.reiter a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border-radius: 999px;
  border: 1px solid var(--rand); color: var(--text); text-decoration: none; background: var(--card);
}
.reiter a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Navy vanishes on the dark page: the active pill takes the link colour (3:1 against the page). */
@media (prefers-color-scheme: dark) { .reiter a[aria-current="page"] { background: var(--link); border-color: var(--link); color: var(--bg); } }

.person { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: baseline; }
.person-name { font-weight: 700; overflow-wrap: anywhere; }
.person-mail { overflow-wrap: anywhere; }
.merkmale { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 0; }

details.aktionen { margin-top: .5rem; }
details.aktionen > summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  color: var(--link); font-weight: 600; list-style: none;
}
details.aktionen > summary::-webkit-details-marker { display: none; }
details.aktionen > summary::before { content: "▸"; margin-right: .4rem; }
details.aktionen[open] > summary::before { content: "▾"; }
.aktion { border-top: 1px solid var(--line); padding: .6rem 0; }
.aktion h3 { font-size: 1rem; margin: .2rem 0 .3rem; }
.aktion p { margin: .2rem 0 .4rem; }

.sitze { list-style: none; margin: .5rem 0 0; padding: 0; }
.sitz {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .1rem .75rem;
  border-top: 1px solid var(--line); padding: .55rem 0;
}
.sitz:first-child { border-top: 0; }
.sitz .rang { font-weight: 700; color: var(--muted); font-size: .9rem; }
.sitz .wer { font-weight: 600; overflow-wrap: anywhere; }
.sitz .angaben { grid-column: 2; color: var(--muted); font-size: .9rem; }
/* Three columns once the card itself is wide enough, whatever the grid around it. */
.gremium { container-type: inline-size; }
@container (min-width: 620px) {
  .sitz { grid-template-columns: 5rem minmax(0, 1.4fr) minmax(0, 1.6fr); align-items: baseline; }
  .sitz .angaben { grid-column: auto; }
}
.gremienraster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; align-items: start; }
@media (min-width: 1280px) { .gremienraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gremium-kopf { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: baseline; justify-content: space-between; }
.gremium-kopf h2 { margin: 0; }
.zwischentitel { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 1rem 0 .2rem; }
/* Facts of a run or of the costs, one per line (Kernstil). */
.kennzahlen { list-style: none; margin: .5rem 0 .4rem; padding: 0; }
.kennzahlen li { padding: .1rem 0; overflow-wrap: anywhere; }

/* --- Gefahrenradar: cards on the phone, one list from 768 px ------------------------------- */

.radar { list-style: none; margin: 0; padding: 0; }
.radar-eintrag {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .9rem 1.1rem; margin-bottom: 1rem; min-width: 0;
}
.radar-kandidat { border-left: 5px solid var(--rot); }
.radar-termine {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1rem;
  font-size: .9rem; color: var(--muted);
}
.radar-termine li { overflow-wrap: anywhere; }
.radar-termine b { color: var(--text); font-weight: 600; }
.radar-inhalt { min-width: 0; }
.radar-titel { font-size: 1.05rem; margin: .2rem 0 .1rem; }
.radar-titel a { display: block; min-height: 44px; padding: .45rem 0; overflow-wrap: anywhere; }
.radar-nummer { white-space: nowrap; font-weight: 800; }
.radar-kurz { margin: .5rem 0 .3rem; overflow-wrap: anywhere; }
.radar-vorschlag { margin: .3rem 0; overflow-wrap: anywhere; }
.radar-kriterien { margin-top: .2rem; }
.radar-kriterienliste { list-style: none; margin: 0; padding: 0; }
.radar-kriterienliste > li { border-top: 1px solid var(--line); padding: .55rem 0; overflow-wrap: anywhere; }
.radar-kriterienliste > li:first-child { border-top: 0; }
.radar-kriterienliste p { margin: .2rem 0 0; }
.radar-zitat { margin: .35rem 0 0; padding-left: .75rem; border-left: 3px solid var(--line); }
.radar-alarme { margin-top: .6rem; color: var(--warn-text); font-weight: 600; }

@media (min-width: 768px) {
  .radar {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .2rem 1.1rem;
  }
  .radar-eintrag {
    background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0;
    box-shadow: none; margin: 0; padding: .8rem 0;
  }
  .radar-eintrag:first-child { border-top: 0; }
  .radar-kandidat { border-left: 0; box-shadow: inset 4px 0 0 var(--rot); padding-left: .9rem; }
}
/* Wide enough for a column of sessions on the left. */
@media (min-width: 1100px) {
  .radar-eintrag { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0 1.5rem; align-items: start; }
  .radar-termine { flex-direction: column; padding-top: .55rem; }
}

/* --- Presse: cards on the phone, one list from 768 px ------------------------------------ */

.presse { list-style: none; margin: 0; padding: 0; }
.presse-eintrag {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .9rem 1.1rem; margin-bottom: 1rem; min-width: 0;
}
.presse-titel { font-size: 1.05rem; margin: .2rem 0 .1rem; }
.presse-titel a { display: block; min-height: 44px; padding: .45rem 0; overflow-wrap: anywhere; }
.presse-treffer { list-style: none; margin: .6rem 0 0; padding: 0; }
.presse-treffer > li { border-top: 1px solid var(--line); padding: .5rem 0; overflow-wrap: anywhere; }
.presse-top { margin: 0; }
.presse-top a { display: block; min-height: 44px; padding: .45rem 0; overflow-wrap: anywhere; }
.presse-kern { margin: 0; overflow-wrap: anywhere; }
.presse-text textarea { width: 100%; }

@media (min-width: 768px) {
  .presse {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .2rem 1.1rem;
  }
  .presse-eintrag {
    background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0;
    box-shadow: none; margin: 0; padding: .8rem 0;
  }
  .presse-eintrag:first-child { border-top: 0; }
}

/* --- Print (Spec 14.3 Nr. 2): the reader's name on every page, the screen stays without --- */

.druckfuss { display: none; }

@media print {
  :root { color-scheme: light; --text: #000; --muted: #333; --card: #fff; --bg: #fff; --line: #999; --link: #000; }
  @page { margin: 15mm 15mm 22mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .kopf, .seitenleiste, .tableiste, .banner, .allris-stand, .sprungmarke, .reiter, button, .knopf, details.aktionen, .nicht-drucken { display: none !important; }
  .inhalt { padding: 0 0 9mm; max-width: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .karte { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  a { color: #000; }
  .druckfuss {
    display: block; position: fixed; left: 0; right: 0; bottom: 0;
    font-size: 9pt; text-align: center; color: #000; background: #fff; padding-top: 2mm;
  }
}

/* Test mailbox (D25): a mail text wraps, nothing scrolls sideways. */
.mailtext { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0 0 1rem; }

/* --- Voten: cards on the phone, a wide table-like sheet from 1024 px (Spec 6.1 Nr. 1) ------ */

.voten-liste { list-style: none; margin: 0; padding: 0; }
.voten-eintrag {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .9rem 1.1rem; margin-bottom: 1rem; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem 1rem;
}
.voten-eintrag > div { min-width: 0; overflow-wrap: anywhere; }
.voten-link .knopf { margin-bottom: 0; }
/* The state in words is a phrase, not a label: it may wrap inside its marker. Wherever a marker may
   wrap, it takes a smaller radius instead of the pill (999px): a pill over two to four lines cuts its
   corners, and CSS cannot tell whether it wraps, so all wrapping zones share one calm shape. */
.voten-zustand .marker, .arbeitsplatz .unterzeile .marker, .zeile-kopf .marker, .lage-tabelle .marker { white-space: normal; overflow-wrap: anywhere; border-radius: .6rem; }

@media (min-width: 768px) {
  .voten-liste {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .2rem 1.1rem;
  }
  .voten-eintrag {
    background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
    margin: 0; padding: .6rem 0; align-items: center;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.8fr) minmax(0, 2fr) auto;
  }
  .voten-eintrag:first-child { border-top: 0; }
}

.zeilen { min-width: 0; }
.zeile { padding: 1rem 1.1rem; }
.zeile h3 { margin: 0 0 .2rem; overflow-wrap: anywhere; }
.zeile-nummer { white-space: nowrap; font-weight: 800; }
.zeile-vorlage { margin: 0; }
.zeile-vorlage a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
.zeile-warnung { border-left: 5px solid var(--rot); }
.zeile textarea { width: 100%; max-width: none; resize: vertical; overflow-wrap: anywhere; }
.zeile select { max-width: 100%; }
.zeile-unstrittig small { display: block; }
.platz:empty { display: none; }
.hinweise { margin: .5rem 0 0; }

/* Laptop: one row per TOP with the columns TOP and Vorlage, Votum, Begründung and Sprechpunkte, Unstrittig. */
@media (min-width: 1024px) {
  .arbeitsplatz .zeile {
    display: grid; gap: .5rem 1.25rem; align-items: start;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr);
  }
  .arbeitsplatz .zeile > * { min-width: 0; }
  .arbeitsplatz .zeile > .zeile-kopf { grid-column: 1; }
  .arbeitsplatz .zeile > .zeile-art { grid-column: 2; }
  .arbeitsplatz .zeile > .zeile-text { grid-column: 3; }
  .arbeitsplatz .zeile > .zeile-unstrittig { grid-column: 4; }
  .arbeitsplatz .zeile > .platz,
  .arbeitsplatz .zeile > .meldung,
  .arbeitsplatz .zeile > button { grid-column: 1 / -1; justify-self: start; }
  .arbeitsplatz .zeile > .platz { justify-self: stretch; }
  .arbeitsplatz .zeile label:first-child { margin-top: 0; }
}

/* Freigabeseite: one card per TOP, long texts wrap, nothing has a fixed width (Spec 6.1 Nr. 1). */
.freigabe { min-width: 0; }
.votum-zeile { padding: 1rem 1.1rem; min-width: 0; }
.votum-zeile h3 { margin: 0 0 .2rem; overflow-wrap: anywhere; }
.votum-text { white-space: pre-line; overflow-wrap: anywhere; }
.votum-risiko { overflow-wrap: anywhere; }
.freigabe textarea, .freigabe select, .freigabe input[type="text"] { width: 100%; max-width: none; }
.freigabe textarea { resize: vertical; }
.freigabe details.aktionen > summary, .freigabe details.karte > summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600;
}

/* Sitzungsmappe (Task 9): long texts wrap, the summary and links are tall enough for a thumb. */
.mappe { min-width: 0; }
.mappe-top { padding: 1rem 0; border-top: 1px solid var(--line); min-width: 0; }
.mappe-top:first-of-type { border-top: 0; }
.mappe-top h3 { margin: 0 0 .2rem; overflow-wrap: anywhere; }
.mappe-marken { margin: .25rem 0 .5rem; }
.mappe-marken .marker { white-space: normal; overflow-wrap: anywhere; border-radius: .6rem; }  /* wrapping: no pill */
.mappe-unstrittig > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; }
.mappe-eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; min-width: 0; }
.mappe-eintrag > b { flex: 1 1 100%; overflow-wrap: anywhere; }
.mappe-eintrag .knopf { margin: .25rem 0; }
.kenntnis { margin-bottom: 1rem; }
.zutun-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
/* Status markers may wrap here: a long status text must not push the page wider than the viewport. */
.termin-text .marker, .mappe-eintrag .marker { white-space: normal; overflow-wrap: anywhere; border-radius: .6rem; }  /* wrapping: no pill */

/* TOP-Karte der KI in der Zeile des Arbeitsplatzes (Task 10): KI-Text bricht um, nichts hat feste Breite. */
.ki-karte, .ki-vorschlag { overflow-wrap: anywhere; min-width: 0; }
.ki-karte h4, .ki-vorschlag h4 { margin: .6rem 0 .2rem; }
.ki-karte h5 { margin: .6rem 0 .1rem; font-size: .95rem; }
.ki-karte p, .ki-vorschlag p { margin: .2rem 0; }
.ki-karte ul, .ki-vorschlag ul { margin: .2rem 0; padding-left: 1.2rem; }
.ki-karte small, .ki-vorschlag small { display: inline-block; }

/* TOP-Karte and two columns (Task 12): the list on the left, the card on the right from 768 px. On the
   phone the list or the card, one at a time (data-ansicht). Nothing scrolls sideways in any format:
   markers and press headlines wrap, the 205 px list column of the iPad must not push the page wider. */
.mappe-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.mappe-spalten[data-ansicht="mappe"] .mappe-karte { display: none; }
.mappe-spalten[data-ansicht="top"] .mappe-liste { display: none; }
.mappe-liste, .mappe-karte { min-width: 0; }
.mappe-liste { overflow-wrap: anywhere; }
.mappe-liste .marker { white-space: normal; overflow-wrap: anywhere; border-radius: .6rem; }  /* wrapping: no pill */
.top-liste > li.top-eintrag { padding: 0; }
.top-liste > li.top-warnung { box-shadow: inset 4px 0 0 var(--rot); padding-left: .6rem; }
.top-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-height: 44px; padding: .5rem 0; margin: 0;
  color: var(--text); text-decoration: none; overflow-wrap: anywhere; min-width: 0;
}
.top-link .top-titel { flex: 1 1 8rem; min-width: 0; font-weight: 600; }
.top-link .top-nr { font-weight: 800; }
.top-link .marker { white-space: normal; overflow-wrap: anywhere; border-radius: .6rem; }  /* wrapping: no pill */
.top-karte { min-width: 0; overflow-wrap: anywhere; }
.top-karte .marker { white-space: normal; overflow-wrap: anywhere; border-radius: .6rem; }  /* wrapping: no pill */
.top-karte h2 { margin-top: 0; }
.top-karte h3 { margin: 1rem 0 .25rem; font-size: 1.05rem; }
.top-karte ul { margin: .25rem 0; padding-left: 1.2rem; }
.top-karte dl { margin: .25rem 0; }
.top-karte dt { font-weight: 700; margin-top: .6rem; }
.top-karte dd { margin: .1rem 0 0; }
.top-karte .presse-karte { list-style: none; padding-left: 0; }
.top-karte .presse-karte > li { padding: .25rem 0; }
.top-karte .extern { display: inline-flex; max-width: 100%; text-align: left; }
.ki-text { white-space: pre-line; overflow-wrap: anywhere; }
.fundstelle { display: inline-block; max-width: 100%; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.nur-schmal { display: block; margin: 0 0 .25rem; }
.nur-schmal .zurueck { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 768px) {
  .mappe-spalten { grid-template-columns: minmax(13rem, 2fr) minmax(0, 3fr); align-items: start; }
  .mappe-spalten[data-ansicht] .mappe-liste, .mappe-spalten[data-ansicht] .mappe-karte { display: block; }
  .mappe-karte { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; }
  .nur-schmal { display: none; }
}
@media print {
  .mappe-spalten { display: block; }
  .mappe-karte { position: static; max-height: none; overflow: visible; }
  .druck-karte { break-inside: avoid-page; border-top: 1px solid #999; padding-top: .5rem; }
  .nur-schmal { display: none !important; }
  .fundstelle { color: #000; }
}

/* --- Lage: cards below 1024 px, a table above (Spec 6.1 Nr. 1, R17) ------------------------- */

.lage { min-width: 0; }
.lage-tabelle, .lage-tabelle tbody, .lage-tabelle tr, .lage-tabelle th, .lage-tabelle td { display: block; min-width: 0; }
.lage-tabelle { width: 100%; }
.lage-tabelle tr {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.lage-tabelle th, .lage-tabelle td { padding: .25rem 0; text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.lage-tabelle th b { font-weight: 800; }
.lage-tabelle td::before { content: attr(data-label); font-weight: 700; display: block; font-size: .8rem; color: var(--muted); }
.lage-tabelle .lage-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.lage-tabelle .lage-links::before { flex-basis: 100%; }
.lage-tabelle .lage-eintraege { margin-top: -.6rem; }

@media (min-width: 1200px) {
  .lage-tabelle { display: table; table-layout: fixed; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
  .lage-tabelle thead { display: table-header-group; position: static; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; white-space: normal; }
  .lage-tabelle tbody { display: table-row-group; }
  .lage-tabelle tr { display: table-row; background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
  .lage-tabelle thead tr { display: table-row; }
  .lage-tabelle th, .lage-tabelle td {
    display: table-cell; padding: .6rem .5rem; vertical-align: top; border-top: 1px solid var(--line);
    font-size: .9rem; overflow-wrap: anywhere; hyphens: auto;
  }
  .lage-tabelle thead th { font-weight: 700; font-size: .8rem; color: var(--muted); border-top: 0; }
  .lage-tabelle td::before { content: none; }
  .lage-tabelle .lage-links { display: table-cell; }
  .lage-tabelle .lage-links a { display: flex; }
  .lage-tabelle .lage-eintraege td { border-top: 0; padding-top: 0; }
}

/* Wochenlage: the week links in a row, long headlines and quotes wrap (Task 20b). */
.wochen-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .4rem 0 0; }
.wochenlage .liste li { overflow-wrap: anywhere; }

/* Touch targets (Spec 6.1, Task 22b): links in lists, cards, tabs, the Lagebild table and the footer
   are at least 44 px high. :where() keeps the specificity at zero, so the rules of single link kinds
   (.top-link, .radar-titel a, .extern ...) keep their own layout. Links inside running text stay lines. */
:where(.liste, .karte, .reiter, .lage-tabelle, .allris-stand) :where(a:not(p a)) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
}