/* Gestaltung der Vereinswebseite – abgeleitet aus mockup/index.html */
@font-face { font-family: "Fontin Sans"; src: url("../fonts/fontin-sans_normal_400.208417fd1a2d.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Fontin Sans"; src: url("../fonts/fontin-sans_normal_700.6038b0eba000.woff2") format("woff2"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Fontin Sans"; src: url("../fonts/fontin-sans_italic_400.d02ffeb10ab4.woff2") format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Fontin Sans"; src: url("../fonts/fontin-sans_italic_700.e6324754436a.woff2") format("woff2"); font-weight: 700; font-style: italic; }

:root {
  /* Vereinsfarben aus dem Logo */
  --gruen: #003A19;
  --gruen-mittel: #2E6B3F;
  --gruen-hell: #E4EEDF;
  --rosa: #E6007E;
  --rosa-dunkel: #B0005F;
  --rosa-hell: #FCE4F0;
  --blau: #009FE3;

  --bg: #F7F5EC;
  --flaeche: #FFFFFF;
  --text: #1C2420;
  --text-leise: #4C5A52;
  --linie: #D9D6C6;

  --ok: #1E7A3A;      --ok-bg: #DDF1E2;
  --warn: #8A5A00;    --warn-bg: #FFF1C9;
  --offen: #A4262C;   --offen-bg: #FBE3E4;

  --schrift: "Fontin Sans", "Segoe UI", system-ui, sans-serif;
  --basis: 18px;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(0,40,20,.08), 0 4px 14px rgba(0,40,20,.06);
}

/* Barrierefreie Ansicht: größer, kontrastreicher, schlichtere Schrift */
html.leicht {
  --basis: 22px;
  --bg: #FFFFFF;
  --text: #000000;
  --text-leise: #1A1A1A;
  --linie: #000000;
  --gruen-mittel: #003A19;
  --schrift: Verdana, "Segoe UI", system-ui, sans-serif;
}
html.leicht a { text-decoration: underline; text-underline-offset: 3px; }
html.leicht .karte, html.leicht .kachel, html.leicht table { border: 2px solid #000; box-shadow: none; }
html.leicht :focus-visible { outline: 4px solid #000; outline-offset: 3px; }

* { box-sizing: border-box; }
html { font-size: var(--basis); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--schrift); line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: var(--schrift); font-style: italic; font-weight: 700; color: var(--gruen); line-height: 1.2; margin: 0 0 .5em; }
html.leicht h1, html.leicht h2, html.leicht h3 { font-style: normal; }
h1 { font-size: 2rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--gruen-mittel); }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 4px; }
.leise { color: var(--text-leise); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
/* Erscheint ein Scrollbalken, wird die Seite schmaler und der mittige Inhalt rückt nach links.
   Das gleichen wir aus (100vw ist mit, 100% ohne Scrollbalken); Kopf und Fuß bleiben randlos. */
:is(header, main, footer, .held) > .wrap {
  --scrollbalken: min((100vw - 100%) / 2, max(0px, (100% - 1280px) / 2)); /* nur bei freiem Rand */
  padding-left: calc(16px + var(--scrollbalken)); padding-right: calc(16px - var(--scrollbalken));
}
/* Im Kopf steht alles mittig (Logo, Menü): dort immer ausgleichen, auch ohne freien Rand */
header.kopf > .wrap { --scrollbalken: calc((100vw - 100%) / 2); }

/* ---------- Kopf ---------- */
header.kopf { background: var(--flaeche); border-bottom: 4px solid var(--gruen); }
/* Stilmittel des Vereins: Logo immer oben mittig, Menü darunter */
.kopf .wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 16px; padding-bottom: 10px; }
/* Für Gäste (ohne Menü) über und unter dem Logo so viel Luft wie in der Fußzeile; das Logo-Bild hat
   oben etwa 16px, unten fast keinen eigenen Rand */
.kopf .wrap:not(:has(nav)) { padding-top: 40px; padding-bottom: 33px; }
.logo img { height: 140px; margin: -24px 0; display: block; }
.logo { text-decoration: none; }
.logo-vorschau { max-height: 120px; max-width: 100%; display: block; }
.bildzeichen-vorschau { max-height: 64px; }
.logo-text { display: block; font-family: var(--schrift-titel, inherit); font-size: 1.6rem; font-weight: 700; color: var(--gruen); text-align: center; padding: 8px 0; }  /* ohne Logo: der Name */
.kopf nav { width: 100%; border-top: 1px solid var(--linie); padding-top: 8px; }
.kopf nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.kopf nav a { display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: var(--gruen); font-size: 1rem; }
.kopf nav a:hover { background: var(--gruen-hell); }
.kopf nav a[aria-current="page"] { background: var(--gruen); color: #fff; }
.kopf .menue-knopf { display: none; }
.kopf nav ul[hidden] { display: none; }
/* Am PC: "Leichter lesen" dezent oben rechts neben dem Logo */
.kopf .wrap { position: relative; }
.kopf-leiste { position: absolute; top: 12px; right: 16px; display: flex; gap: 8px; }
.kopf .leicht-schalter { border-color: transparent; font-size: .85rem; }
.kopf .leicht-schalter:hover { border-color: var(--gruen); }
.kopf .leicht-schalter[aria-pressed="true"] { background: var(--gruen); color: #fff; border-color: var(--gruen); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px; border-radius: var(--radius);
  font: inherit; font-size: 1rem; cursor: pointer; text-decoration: none;
  border: 2px solid var(--gruen); background: var(--gruen); color: #fff;
}
.knopf:hover { background: var(--gruen-mittel); border-color: var(--gruen-mittel); }
.knopf.rosa { background: var(--rosa); border-color: var(--rosa); }
.knopf.rosa:hover { background: var(--rosa-dunkel); border-color: var(--rosa-dunkel); }
.knopf.hell { background: var(--flaeche); color: var(--gruen); }
.knopf.hell:hover { background: var(--gruen-hell); }
.knopf.klein { min-height: 44px; padding: 8px 14px; font-size: .9rem; }
.knopf svg { width: 1.2em; height: 1.2em; flex: none; }

/* ---------- Bausteine ---------- */
main { padding: 32px 0 56px; }
.karte { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 24px; border: 1px solid var(--linie); }
.karte > :last-child { margin-bottom: 0; }  /* unten in der Karte reicht ihr eigener Innenabstand */
.raster { display: grid; gap: 20px; }
.raster > * { min-width: 0; } /* breite Tabellen werden zu Karten statt die Spalte zu sprengen */
.raster.zwei { grid-template-columns: 1fr 1fr; }
/* Formularfelder bringen ihren Abstand nach unten selbst mit; sonst doppelt, wenn das Raster einspaltig wird */
.raster:has(> .feld) { row-gap: 0; }
/* Zwei kurze Felder nebeneinander (Telefon und Mobil); untereinander erst auf schmalen Handys */
.raster.paar { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .raster.paar { grid-template-columns: 1fr; } }
.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.haupt { grid-template-columns: 2fr 1fr; align-items: start; }
.stapel > * + * { margin-top: 20px; }
/* Zurück-Link über der Überschrift: überall derselbe Abstand */
.zurueck { margin: 0 0 12px; }
.stapel > .zurueck + * { margin-top: 0; }
/* Einleitung direkt unter der Überschrift: überall derselbe Abstand (auch wo die Seite margin:0 setzt) */
h1 + p.leise, .tabellen-kopf:has(> h1) + p.leise { margin-top: 16px !important; }
/* Unsichtbare Felder am Anfang (z.B. CSRF im Formular) zählen nicht als erstes Element */
.stapel > input[type=hidden]:first-child + * { margin-top: 0; }

.held { background: var(--gruen); color: #fff; position: relative; overflow: hidden; }
.held .wrap { padding-top: 56px; padding-bottom: 56px; }
.held-inhalt { position: relative; z-index: 0; }
.held h1 { color: #fff; font-size: 2.4rem; max-width: 18ch; }
.held p { font-size: 1.15rem; max-width: 60ch; opacity: .95; }
/* Bündig mit dem rechten Rand des Inhalts (wie das Wetter darunter), hinter dem Text;
   −20px gleichen den durchsichtigen Rand im Bild aus */
.held .rose { position: absolute; z-index: -1; right: -20px; top: 50%; transform: translateY(-50%); width: 300px; opacity: .12; filter: brightness(0) invert(1); pointer-events: none; }
@media (max-width: 760px) { .held .rose { width: 200px; right: -66px; } }
html.leicht .held .rose { display: none; }

.kachel {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--schatten); min-height: 150px; border-top: 6px solid var(--gruen);
}
.kachel:hover { border-color: var(--gruen); }
.kachel .symbol { width: 44px; height: 44px; color: var(--rosa); }
.kachel strong { font-size: 1.2rem; color: var(--gruen); }
.kachel span { color: var(--text-leise); font-size: .95rem; }
.kachel.dringend { border-top-color: var(--rosa); }

.hinweis { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); border-left: 6px solid var(--rosa); background: var(--rosa-hell); }
.hinweis svg { width: 28px; height: 28px; flex: none; color: var(--rosa-dunkel); }
.hinweis[hidden] { display: none; }
/* Während die Wetterstatistik nachlädt: Karten blasser, oben rechts ein drehender Kreis; nichts verschiebt sich */
#wetterstatistik .karte { position: relative; }
#wetterstatistik .karte > * { transition: opacity .3s; }
#wetterstatistik.laedt .karte > * { opacity: .55; }
#wetterstatistik.laedt .karte::after { content: ""; position: absolute; top: 22px; right: 22px; width: 18px; height: 18px;
  border: 3px solid var(--gruen-mittel); border-right-color: transparent; border-radius: 50%; animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.hinweis.gruen { border-left-color: var(--gruen); background: var(--gruen-hell); }
.hinweis.gruen svg { color: var(--gruen); }
/* gelb: erledigt, aber nicht abgelesen (z.B. alle fehlenden Zählerstände geschätzt) */
.hinweis.gelb { border-left-color: var(--warn); background: var(--warn-bg); }
.hinweis.gelb svg { color: var(--warn); }
.symbol-natur { width: 1.1em; height: 1.1em; vertical-align: -0.15em; color: var(--gruen); }
.nur-online { border-left: 4px solid var(--gruen); }

.marke { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: .85rem; white-space: nowrap; }
.marke.ok { background: var(--ok-bg); color: var(--ok); }
.marke.warn { background: var(--warn-bg); color: var(--warn); }
.marke.offen { background: var(--offen-bg); color: var(--offen); }
.marke.neutral { background: var(--gruen-hell); color: var(--gruen); }
.marke.rosa { background: var(--rosa-hell); color: var(--rosa-dunkel); }
.marke.grau { background: #ECEBE6; color: var(--text-leise); }
.marke.durch { text-decoration: line-through; }
.punkt.grau { background: #ECEBE6; border: 1px solid #C9C7BE; }

/* Inhaber eines Amts: Name links, Knöpfe rechts, auf dem Handy darunter */
.inhaber-liste { list-style: none; margin: 0; padding: 0; }
.inhaber-liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.inhaber-liste li:first-child { padding-top: 0; }
.inhaber-liste li:last-child { padding-bottom: 0; border-bottom: 0; }

/* Vorschau eines Aushangs: das A4-Blatt (794 × 1123 px) verkleinert auf die Breite der Spalte */
.aushang-vorschau { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--schatten); }
.aushang-vorschau iframe { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; background: #fff; }
html.leicht .marke { border: 2px solid currentColor; white-space: normal; }

.fortschritt { height: 18px; background: var(--gruen-hell); border-radius: 99px; overflow: hidden; display: flex; }
.fortschritt i { display: block; height: 100%; }
.fortschritt .g { background: var(--ok); } .fortschritt .a { background: #E8B400; } .fortschritt .d { background: var(--rosa); }
/* Stunden je Parzelle: Balken mit einem Kästchen je Pflichtstunde */
.stunden { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie); }
.stunden-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 8px; }
.stunden-balken { position: relative; height: 26px; border-radius: 8px; border: 1px solid var(--linie); }
/* Trennstriche nur zwischen den Kästchen, nicht am rechten Rand */
.stunden-balken::after { content: ""; position: absolute; inset: 0 calc(100% / var(--teile, 6)) 0 0; pointer-events: none;
  background: linear-gradient(to right, transparent calc(100% - 2px), var(--flaeche) 0) 0 0 / calc(100% / (var(--teile, 6) - 1)) 100%; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: .95rem; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.punkt { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.punkt.g { background: var(--ok); } .punkt.a { background: #E8B400; } .punkt.d { background: var(--rosa); } .punkt.o { background: var(--gruen-hell); border: 1px solid var(--linie); }
.stunden-hinweis { margin: 6px 0 0; color: var(--text-leise); }

.datum { text-align: center; background: var(--gruen-hell); border-radius: 8px; padding: 6px 0; color: var(--gruen); line-height: 1.15; }
.datum b { display: block; font-size: 1.6rem; }
.datum small { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.einsatz { display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: center; }
.plaetze { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.plaetze i { width: 16px; height: 16px; border-radius: 4px; background: var(--gruen-mittel); }
.plaetze i.frei { background: transparent; border: 2px solid var(--gruen-mittel); }
.aktionen { display: flex; gap: 10px; flex-wrap: wrap; }

/* Formulare */
label { display: block; font-size: 1rem; margin-bottom: 6px; color: var(--gruen); }
.feld { margin-bottom: 18px; }
.feld small { display: block; color: var(--text-leise); font-size: .85rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=url], input[type=search], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time], select {
  width: 100%; min-height: 54px; font: inherit; font-size: 1.05rem; padding: 10px 14px;
  border: 2px solid var(--linie); border-radius: 8px; background: #fff; color: var(--text);
}
input:focus { border-color: var(--gruen); outline: 3px solid var(--blau); outline-offset: 1px; }
input.gross { font-size: 1.6rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
input[readonly] { background: var(--bg); }

.schritte { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; counter-reset: s; flex-wrap: wrap; }
.schritte li { counter-increment: s; display: flex; align-items: center; gap: 8px; color: var(--text-leise); font-size: .95rem; }
.schritte li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; }
.schritte li.aktiv { color: var(--gruen); }
.schritte li.aktiv::before { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.schritte li + li::after { content: none; }
.schritte li:not(:last-child)::after { content: ""; width: 28px; height: 2px; background: var(--linie); }

.foto { border: 3px dashed var(--gruen-mittel); border-radius: var(--radius); padding: 28px; text-align: center; background: var(--gruen-hell); }
.foto svg { width: 56px; height: 56px; color: var(--gruen); }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--flaeche); box-shadow: var(--schatten); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tabelle-hinweis { padding: 0 15px; }  /* Text unter einer Tabelle: bündig mit dem Text in den Zellen (Rand + Innenabstand) */
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
/* Striche nur zwischen Zeilen: unter der letzten keiner (außer vor einer Summenzeile) */
table:not(:has(tfoot)) > tbody > tr:last-child > :is(td, th) { border-bottom: 0; }
tbody tr:has(input:not([type=checkbox]), select) > td { vertical-align: middle; }  /* Text auf Höhe der Eingabefelder */
thead th { background: var(--gruen); color: #fff; font-weight: 400; white-space: nowrap; position: sticky; top: 0; }
thead th button { all: unset; cursor: pointer; }
tbody tr:nth-child(even) td { background: #FAF9F3; }
tbody tr:hover td { background: var(--gruen-hell); }
td:first-child, th:first-child { position: sticky; left: 0; z-index: 1; }
td:first-child { background: var(--flaeche); font-weight: 700; color: var(--gruen); }
/* Lange Listen: der Tabellenkopf bleibt beim Scrollen der Seite oben stehen. Das geht nur ohne
   eigenen Scrollbereich; den brauchen diese Tabellen nicht, zu breit werden sie zu Karten (kgv.js) */
.tabelle-huelle:not(.als-karten):has(> table.karten) { overflow: visible; }
/* Parzellen und Gemeinschaftsflächen: gleiche Spaltenbreiten (colgroup); die Mindestbreite sorgt dafür, dass
   die Tabellen bei zu wenig Platz wie die anderen Listen zu Karten werden */
table.parzellen-spalten { table-layout: fixed; min-width: 44rem; }
table.parzellen-spalten.ohne-aktionen { min-width: 34rem; }
.als-karten table.parzellen-spalten { min-width: 0; }
tr.kuenftig td, tr.kuenftig td:first-child { color: #8C948F; }
table.karten tr.trenner td { background: var(--gruen-hell); color: var(--gruen); font-weight: 700; padding-top: 14px; border-top: 2px solid var(--gruen-mittel); }
.als-karten table.karten tr.trenner { background: none; border: 0; box-shadow: none; margin: 20px 0 8px; }
.als-karten table.karten tr.trenner td { background: none !important; border: 0; padding: 0; }
.tabelle-huelle:not(.als-karten) > table.karten thead th { z-index: 2; }
.tabelle-huelle:not(.als-karten) > table.karten thead th:first-child { border-top-left-radius: var(--radius); }
.tabelle-huelle:not(.als-karten) > table.karten thead th:last-child { border-top-right-radius: var(--radius); }
.tabelle-huelle:not(.als-karten) > table.karten tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.tabelle-huelle:not(.als-karten) > table.karten tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
.tabellen-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.tabellen-kopf input { max-width: 280px; min-height: 46px; }
.legende { display: flex; gap: 10px; flex-wrap: wrap; font-size: .9rem; margin-top: 12px; }
.legende + p { margin-top: 12px; }

/* Wetter */
/* Raster aus Symbol und Wert, zweimal nebeneinander (Wetter, Wind): verteilt den Platz; in schmalen Karten steht
   der Wind darunter, Windrose unter der Wolke und Geschwindigkeit unter der Temperatur */
.wetter { --symbol: 64px; display: grid; grid-template-columns: var(--symbol) 1fr var(--symbol) 1fr; align-items: center;
          column-gap: 16px; row-gap: 14px; }
.wetter > svg { width: var(--symbol); height: var(--symbol); color: var(--text-leise); }
.wetter > svg.sonne { color: #E8B400; }
.wetter .grad { font-size: 2.8rem; color: var(--gruen); line-height: 1; font-weight: 600; }
/* Wetterseite im Mitgliederbereich, ohne Kacheln: oben links jetzt (groß, Windrose daneben), oben rechts heute, darunter die nächsten Tage */
.wetter-oben { display: grid; gap: 18px; }
.wetter-gross .wetter { --symbol: 84px; column-gap: 20px; row-gap: 18px; }
.wetter-gross .wetter .grad { font-size: 3.6rem; }
.wetter-gross .wetter .leise { font-size: 1.15rem; }
.wetter.laedt { display: block; }
.wetter.laedt > svg, .wetter.laedt .grad { display: none; }
.wetter-wind { display: contents; }
.wetter-wind[hidden] { display: none; }
.wetter-wind .rose { width: calc(var(--symbol) - 12px); height: calc(var(--symbol) - 12px); justify-self: center; overflow: visible; }
.wetter-wind .rose circle { fill: none; stroke: var(--linie); stroke-width: 2; }
.wetter-wind .rose .striche { stroke: var(--text-leise); stroke-width: 1.2; }
.wetter-wind .rose text { font-size: 9px; fill: var(--text-leise); text-anchor: middle; }
.wetter-wind .rose .pfeil line { stroke: var(--gruen); stroke-width: 5; stroke-linecap: round; }
.wetter-wind .rose .pfeil path { fill: var(--gruen); }
/* Der Pfeil schwankt leicht um die Windrichtung, bei Böen etwas mehr (siehe wetter.js) */
.wetter-wind .rose .schwanken { transform-box: view-box; transform-origin: 36px 36px; animation: schwanken 2.6s ease-in-out infinite alternate; }
@keyframes schwanken { from { transform: rotate(calc(-1 * var(--ausschlag, 4deg))); } to { transform: rotate(var(--ausschlag, 4deg)); } }
@media (prefers-reduced-motion: reduce) { .wetter-wind .rose .schwanken { animation: none; } }
.wetter-wind .grad small { font-size: .9rem; font-weight: 400; margin-left: 4px; }
.wetter-gross .wetter-wind .grad small { font-size: 1.1rem; }
.wetter-wind .leise { white-space: nowrap; }  /* Größe wie „bewölkt“ */
.wetter-heute { margin: 0; align-self: end; }  /* unten, mit demselben Abstand zur Linie wie die anderen Tage */
.wetter-tage.wetter-heute li { border: 0; padding: 0; }  /* sonst wie die anderen Tage */
.wetter-oben + .wetter-tage { margin-top: 10px; }
.wetter-tage { list-style: none; margin: 18px 0 0; padding: 0; }
.wetter-tage[hidden], .wetter [hidden], .wetter-tage .details [hidden] { display: none; }
.wetter-tage li { display: grid; row-gap: 4px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linie); }
.wetter-tage .tag { grid-area: tag; font-weight: 600; }
.wetter-tage .symbol { grid-area: symbol; color: var(--text-leise); }
.wetter-tage .symbol.sonne { color: #E8B400; }
.wetter-tage .text { grid-area: text; color: var(--text-leise); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wetter-tage .temp { grid-area: temp; font-weight: 600; white-space: nowrap; justify-self: end; }
.wetter-tage .temp span { font-weight: 400; color: var(--text-leise); }
.wetter-tage .details { grid-area: details; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--text-leise); }
.wetter-tage .details > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.wetter-tage .details svg { width: 15px; height: 15px; }
.wetter-tage .details .frost { color: #1F5FA8; background: #E3EEFA; border-radius: 99px; padding: 1px 8px 1px 6px; font-weight: 600; }
/* Großes Symbol links über beide Zeilen, wie in Wetter-Apps */
.wetter-tage li { grid-template-columns: 40px auto 1fr auto; grid-template-areas: "symbol tag text temp" "symbol details details details"; column-gap: 12px; }
.wetter-tage .symbol { width: 40px; height: 40px; }
.wetter-tage .temp { font-size: 1.1rem; }
/* Maßgeblich ist die Breite der Wetterkarte, nicht die des Fensters (in der Seitenspalte ist sie schmal) */
#wetter { container-type: inline-size; }
/* Zwei Tage nebeneinander, wenn die Karte breit genug ist */
@container (min-width: 760px) {
  .wetter-tage:not([hidden]):not(.wetter-heute) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .wetter-oben { grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: center; }
}
@container (max-width: 400px) {
  .wetter { grid-template-columns: var(--symbol) 1fr; }
  .wetter-tage.wetter-heute li { padding-top: 10px; border-top: 1px solid var(--linie); }
  .wetter-tage .text { display: none; }
  .wetter-tage li { grid-template-columns: 40px 1fr auto; grid-template-areas: "symbol tag temp" "symbol details details"; }
}
#karte { height: 340px; border-radius: var(--radius); z-index: 0; }

/* Dialog */
dialog { border: 0; border-radius: 14px; padding: 0; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.3); color: var(--text); font-family: var(--schrift); }
dialog::backdrop { background: rgba(0,30,10,.45); }
dialog .innen { padding: 28px; }
dialog .aktionen { justify-content: flex-end; margin-top: 20px; }

footer.fuss { background: var(--gruen); color: #E4EEDF; padding: 32px 0; font-size: .95rem; }
footer.fuss a { color: #fff; }
footer.fuss .fuss-ort::before { content: " – "; }  /* Name – Sitz, so im Vereinsregister eingetragen */
@media (max-width: 760px) { footer.fuss .fuss-ort { display: block; } footer.fuss .fuss-ort::before { content: none; } }
footer.fuss .wrap { display: flex; gap: 24px; justify-content: space-between; align-items: center; flex-wrap: wrap; }


/* ---------- Tablet / Handy ---------- */
@media (max-width: 900px) {
  .raster.drei { grid-template-columns: 1fr 1fr; }
  .raster.haupt, .raster.zwei { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  h1 { font-size: 1.6rem; } .held h1 { font-size: 1.9rem; }
  .logo img { height: 110px; margin: -20px 0; }
  .kopf .wrap:not(:has(nav)) { padding-top: 32px; padding-bottom: 20px; }
  /* Am Handy: Menü und "Leichter lesen" nebeneinander unter dem Logo */
  .kopf-leiste { position: static; width: 100%; justify-content: center; }
  .kopf .menue-knopf { display: inline-flex; flex: 1; }
  .kopf .leicht-schalter { border-color: var(--gruen); }
  .kopf nav { display: none; border-top: 0; padding-top: 0; }
  /* Menü klappt über dem Inhalt auf, statt ihn nach unten zu schieben (sonst wird die Seite
     länger, ein Scrollbalken erscheint und alles verrutscht) */
  header.kopf { position: relative; z-index: 50; }
  .kopf .wrap { position: static; }
  .kopf nav.offen { display: block; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
    background: var(--flaeche); border-bottom: 4px solid var(--gruen); box-shadow: 0 12px 24px rgba(0,40,20,.18);
    max-height: calc(100vh - 100%); overflow-y: auto; }
  /* Seite unter dem offenen Menü abdunkeln; Kopf mit Menü bleibt hell. Ein Tipp daneben schließt es. */
  body:has(#hauptmenue.offen)::before { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(0,30,10,.45); }
  /* Leicht animiert: Menü gleitet herein, Abdunklung blendet ein */
  .kopf nav.offen { animation: menue-ein .2s ease-out; }
  body:has(#hauptmenue.offen)::before { animation: abdunkeln-ein .2s ease-out; }
  .kopf nav ul { flex-direction: column; }
  .kopf nav a { padding: 14px 16px; font-size: 1.1rem; border-bottom: 1px solid var(--linie); border-radius: 0; }
  .kopf nav li:last-child a { border-bottom: 0; }
  .kopf .leicht-schalter .zustand { display: none; }
  .raster.drei { grid-template-columns: 1fr; }
  .kachel { min-height: 0; flex-direction: row; align-items: center; }
  .kachel .symbol { width: 40px; height: 40px; flex: none; }
  .einsatz { grid-template-columns: 1fr; }
  .aktionen .knopf { flex: 1 1 100%; }
  main { padding-top: 20px; }
  .karte { padding: 18px; }
}

/* Meldungen (Django messages) */
.meldungen { list-style: none; padding: 0; margin: 0 0 20px; }
.meldungen li + li { margin-top: 10px; }
.meldungen.in-karte { margin: 12px 0 0; }  /* nach dem Absenden in die Karte geholt (kgv.js, data-stelle-halten) */

/* Testinstanz-Hinweis */
.testbalken { background: var(--warn-bg); color: var(--warn); text-align: center; padding: 6px 16px; font-size: .9rem; border-bottom: 2px solid var(--warn); }

/* Formularfehler */
.fehler { color: var(--offen); font-size: .9rem; margin: 4px 0 0; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: var(--offen); }
textarea { width: 100%; min-height: 110px; font: inherit; font-size: 1rem; padding: 10px 14px; border: 2px solid var(--linie); border-radius: 8px; }
.formular-fehler { margin-bottom: 18px; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Abmelden ist ein Formular (POST), sieht aber aus wie ein Menüpunkt */
.kopf nav form { margin: 0; }
.nav-knopf { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 14px; border-radius: 8px; color: var(--gruen); font-size: 1rem; cursor: pointer; }
.nav-knopf:hover { background: var(--gruen-hell); }
.nav-knopf:focus-visible { outline: 3px solid var(--blau); }
@media (max-width: 760px) { .nav-knopf { padding: 14px 16px; font-size: 1.1rem; } }

/* Fußbereich auch auf kurzen Seiten unten */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1; }

/* Tabellen in der Verwaltung */
thead th a.sortier { color: #fff; text-decoration: none; }
thead th a.sortier:hover { text-decoration: underline; }
td a { color: var(--gruen); }
.tabellen-kopf input[type=text] { flex: 1; min-width: 200px; }
dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
dl.angaben dt { color: var(--text-leise); }
dl.angaben dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { dl.angaben { grid-template-columns: 1fr; gap: 2px; } dl.angaben dd { margin-bottom: 10px; } }
/* In der schmalen Seitenspalte stehen Bezeichnung und Wert untereinander */
aside dl.angaben { grid-template-columns: 1fr; gap: 2px; } aside dl.angaben dd { margin-bottom: 10px; } aside dl.angaben dd:last-child { margin-bottom: 0; }
.optionen { list-style: none; padding: 0; margin: 0; }
.optionen li { margin-bottom: 8px; }
.optionen label { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: 1rem; cursor: pointer; }
.optionen input { width: 22px; height: 22px; accent-color: var(--gruen); }
fieldset.feld { border: 0; padding: 0; min-width: 0; }
fieldset.feld legend { padding: 0; font-size: 1rem; margin-bottom: 8px; color: var(--gruen); }
.optionen.nebeneinander { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.optionen.nebeneinander li { margin: 0; }
.verlauf-eintrag { border-left: 4px solid var(--gruen); padding: 4px 0 4px 16px; margin-bottom: 20px; }
.verlauf-eintrag.angelegt { border-left-color: var(--ok); }
.verlauf-eintrag.geloescht { border-left-color: var(--warn); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.termin { display: flex; gap: 20px; align-items: flex-start; }
.termin-datum { flex: 0 0 64px; text-align: center; border-right: 1px solid var(--linie); padding-right: 16px; }
.termin-datum b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--gruen); }
.termin-datum span { font-size: .9rem; color: var(--text-leise); }
/* Titel links, freie Plätze rechts daneben, darunter die Uhrzeit; wird es eng, steht die Marke unter der Uhrzeit */
.termin > div:has(> .termin-kopf) { container-type: inline-size; }
.termin-kopf { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titel marke" "zeit zeit"; gap: 4px 12px; align-items: baseline; }
.termin-kopf h3 { grid-area: titel; }
.termin-kopf .marke { grid-area: marke; justify-self: end; }
.termin-kopf .termin-zeit { grid-area: zeit; margin: 0; }
@container (max-width: 400px) {
  .termin-kopf { grid-template-columns: 1fr; grid-template-areas: "titel" "zeit" "marke"; }
  .termin-kopf .marke { justify-self: start; margin-top: 4px; }
}
.anmeldung { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.anmeldung:not(:has(> *)) { display: none; }  /* nichts zu tun (ausgebucht, vorbei): auch keine Linie */
.anmeldung form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.anmeldung select { width: auto; min-height: 44px; }
/* Anzeige, die per Klick auf „Ändern“ zum Eingabefeld wird (ohne JavaScript): verstecktes Häkchen .umschalten */
.wechsel { position: relative; }  /* steht neben „Abmelden“; beim Bearbeiten eine eigene Zeile */
.wechsel:has(.umschalten:checked), .wechsel.zeile { flex-basis: 100%; }
.wechsel .anzeige { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wechsel .anzeige b { font-weight: 600; }
.wechsel .bearbeiten { display: none; }
.wechsel:has(.umschalten:checked) .anzeige { display: none; }
.wechsel:has(.umschalten:checked) .bearbeiten { display: flex; }
.wechsel .bearbeiten input[type=text] { flex: 1 1 260px; width: auto; min-height: 44px; }
.wechsel label { cursor: pointer; margin: 0; }  /* als Knopf: bündig mit „Absagen“ / „Abmelden“ */
.wechsel .abbrechen { color: var(--gruen-mittel); text-decoration: underline; }
.umschalten { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.umschalten:focus-visible ~ .anzeige label, .umschalten:focus-visible ~ .bearbeiten .abbrechen { outline: 3px solid var(--blau); outline-offset: 2px; }
.mitgebracht { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.mitgebracht ul { margin: 4px 0 0; padding-left: 20px; }
.geleistet { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.geleistet input { width: 5.5em; min-height: 44px; }
/* Stunden-Felder mit Pfeilen für halbe Stunden (kgv.js) */
.stunden-feld { position: relative; display: inline-block; }
.stunden-feld input { padding-right: 30px; }
.stunden-feld .pfeile { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 22px; display: flex; flex-direction: column; }
.stunden-feld .pfeile button { flex: 1; border: 0; padding: 0; background: transparent; color: var(--text-leise); font-size: .6rem; line-height: 1; cursor: pointer; border-radius: 4px; }
.stunden-feld .pfeile button:hover { background: var(--gruen-hell); color: var(--gruen); }
.verlauf-eintrag h3 { margin-bottom: 2px; font-size: 1.05rem; }
tbody tr.ehemalig td, tbody tr.ehemalig td a { color: var(--text-leise); }


/* Listen als Karten, sobald die Tabelle nicht mehr in die Breite passt: jede Zeile
   wird eine Karte, die Spaltenüberschrift steht davor (kgv.js setzt .als-karten und data-label) */
.tabelle-huelle.als-karten { overflow: visible; border: 0; background: none; box-shadow: none; }
.als-karten table.karten thead { display: none; }
.als-karten table.karten, .als-karten table.karten tbody { display: block; }
.als-karten table.karten colgroup { display: none; }
.als-karten table.karten tr { display: block; margin-bottom: 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.als-karten table.karten td { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; position: static; padding: 8px 14px; background: none !important; overflow-wrap: anywhere; }
.als-karten table.karten td:last-child { border-bottom: 0; }
.als-karten table.karten td::before { content: attr(data-label); color: var(--text-leise); font-weight: 400; white-space: normal; overflow-wrap: normal; }
.als-karten table.karten td[data-label=""], .als-karten table.karten td[colspan] { grid-template-columns: 1fr; }
.als-karten table.karten td[data-label=""]::before, .als-karten table.karten td[colspan]::before { display: none; }
.als-karten table.karten td:first-child { background: var(--gruen-hell) !important; }
/* Frosttermine: Überschriften dürfen umbrechen, damit die Tabelle länger als Tabelle bleibt; als Karte Bezeichnung in einer Zeile */
/* Zählerstände: breit als Tabelle; in schmalen Karten je Stand zwei Zeilen statt Scrollbalken */
.zaehler-karte { container-type: inline-size; }
.zaehler-karte .tabellen-kopf { flex-wrap: nowrap; gap: 8px; align-items: flex-start; }
.zaehler-karte .tabellen-kopf .marke { flex: none; display: inline-block; margin-top: 4px; }
.staende-tabelle td.stand { text-align: right; white-space: nowrap; }
.staende-tabelle td.aktion { text-align: right; }
.staende-tabelle td.aktion a.loeschen { color: var(--rosa-dunkel); }
.staende-tabelle .nur-schmal { display: none; }
@container (max-width: 680px) {  /* mittelbreit: „Erfasst von“ hinter den Anlass, damit nichts scrollt */
  .staende-tabelle th:nth-child(4), .staende-tabelle td.erfasst { display: none; }
  .staende-tabelle .nur-schmal { display: inline; }
}
@container (max-width: 520px) {
  .zaehler-karte .tabelle-huelle { overflow: visible; }
  .staende-tabelle thead { display: none; }
  .staende-tabelle, .staende-tabelle tbody { display: block; }
  .staende-tabelle tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--linie); }
  .staende-tabelle tbody tr:last-child { border-bottom: 0; }
  .staende-tabelle tbody tr:nth-child(even) { background: #FAF9F3; }
  .staende-tabelle td { display: block; position: static; padding: 0; border: 0; background: none !important; }
  .staende-tabelle td.am { grid-area: 1 / 1; }
  .staende-tabelle td.stand { grid-area: 1 / 2; font-weight: 600; }
  .staende-tabelle td.anlass { grid-column: 1; font-size: .85rem; color: var(--text-leise); }
  .staende-tabelle td.erfasst { display: none; }  /* steht schmal hinter dem Anlass: „Ablesung (Name)“ */
  .staende-tabelle td.aktion { grid-area: 2 / 2; align-self: end; }
  .staende-tabelle .nur-schmal { display: inline; }
}
table.frosttermine thead th { white-space: normal; vertical-align: bottom; }
table.frosttermine td { white-space: nowrap; }
.tabelle-huelle:not(.als-karten) table.frosttermine :is(th, td):first-child { padding-right: 36px; }
.als-karten table.frosttermine td { grid-template-columns: 1fr auto; gap: 10px; }
.als-karten table.frosttermine td::before { white-space: nowrap; }
/* Gleiche Spalten in allen Gruppen, damit die Tabellen untereinander bündig sind */
.tabelle-huelle:not(.als-karten) table.aemter th:nth-child(1) { width: 46%; }
.tabelle-huelle:not(.als-karten) table.aemter th:nth-child(2) { width: 30%; }
.tabelle-huelle:not(.als-karten) table.aemter th:nth-child(3) { width: 10%; }
.als-karten table.aemter td { grid-template-columns: 5em 1fr; }
.tabelle-huelle:not(.als-karten) table.beschluesse th:nth-child(1) { width: 7em; }
.tabelle-huelle:not(.als-karten) table.beschluesse th:nth-child(3) { width: 8.5em; }
.als-karten table.beschluesse td { grid-template-columns: 5.5em 1fr; }
/* Prüfseite des Imports: Zeile, Status, Beschreibung; in der Beschreibung je Feld Name und Wert */
.tabelle-huelle:not(.als-karten) table.import-pruefung th:nth-child(1) { width: 4.5em; }
.tabelle-huelle:not(.als-karten) table.import-pruefung th:nth-child(2) { width: 7em; }
table.import-pruefung td { vertical-align: top; }
table.import-pruefung .meldungen { color: var(--warn); font-size: .92rem; margin: 4px 0 0; }
table.import-pruefung dl.werte { display: grid; grid-template-columns: minmax(8em, max-content) 1fr; gap: 2px 16px; margin: 6px 0 0; font-size: .92rem; }
table.import-pruefung dl.werte dt { color: var(--text-leise); font-weight: 400; }
table.import-pruefung dl.werte dd { margin: 0; overflow-wrap: break-word; min-width: 0; }
table.import-pruefung dl.werte s { color: var(--text-leise); }
/* schmal: oben Zeile und Status in einer grünen Leiste, darunter die Beschreibung */
.als-karten table.import-pruefung tr { display: grid; grid-template-columns: auto 1fr; }
.als-karten table.import-pruefung td:nth-child(-n+2) { background: var(--gruen-hell) !important; align-items: center; border-bottom: 1px solid var(--linie); }
.als-karten table.import-pruefung td:nth-child(1) { grid-template-columns: auto auto; padding-right: 4px; }
.als-karten table.import-pruefung td:nth-child(2) { grid-template-columns: 1fr; padding-left: 4px; }
.als-karten table.import-pruefung td:nth-child(3) { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 0; }
.als-karten table.import-pruefung td:nth-child(3)::before { display: none; }
/* zu schmal für Feld und Wert nebeneinander: dann lieber Karten (kgv.js sieht die zu breite Tabelle) */
.tabelle-huelle:not(.als-karten) table.import-pruefung dl.werte { min-width: 22em; }
.als-karten table.import-pruefung .marke { justify-self: start; }
/* Reihenfolge per Ziehen am Griff */
.mit-griff { display: flex; align-items: flex-start; gap: 6px; }
.griff { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px 0 -6px -8px; padding: 0; border: 0; border-radius: 6px;
         background: none; color: var(--text-leise); cursor: grab; touch-action: none; }
.griff svg { width: 20px; height: 20px; }
.griff:hover, .griff:focus-visible { background: var(--gruen-hell); color: var(--gruen); }
.griff-symbol { width: 1.1em; height: 1.1em; vertical-align: -.2em; color: var(--gruen); }
tr.gezogen td { background: var(--gruen-hell); }
.pflicht-liste { list-style: none; margin: 0 0 16px; padding: 0; }
.pflicht-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.pflicht-liste li { flex-wrap: wrap; }
.pflicht-liste li:last-child { padding-bottom: 0; border-bottom: 0; }  /* Striche nur zwischen Einträgen */
/* Auswertung über den Arbeitsstunden */
.auswertung { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.auswertung-block { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 12px 16px; }
.auswertung-block h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font-size: 1.05rem; }
.auswertung-block h2 span { font-style: normal; font-weight: normal; font-size: .9rem; color: var(--text-leise); white-space: nowrap; }
.auswertung-summe { margin: 2px 0 6px; font-size: 1.4rem; font-weight: 600; color: var(--gruen); font-variant-numeric: tabular-nums; }
.auswertung-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .95rem; }
.auswertung-block li { display: flex; align-items: center; gap: 8px; }
/* Zahlen rechtsbündig in einer Spalte, damit das „h“ untereinander steht */
.stunden-liste { grid-template-columns: auto auto 1fr; align-items: center; }
.stunden-liste li { display: contents; }
.stunden-liste .punkt { margin-right: 8px; }
.stunden-liste .zahl { text-align: right; padding-right: .3em; font-variant-numeric: tabular-nums; }
.punkt.rot { background: var(--offen); }
/* Rollen und Rechte */
.rechte-tabelle th, .rechte-tabelle td { padding: 8px 10px; }
.rechte-tabelle td.haken { text-align: center; width: 1%; }
.rechte-tabelle thead th.rolle { text-align: center; white-space: normal; vertical-align: bottom; hyphens: auto; font-size: .85rem; line-height: 1.25; }
.rechte-tabelle td.haken { padding-left: 6px; padding-right: 6px; }
/* ohne eigenen Scrollbereich, damit die Kopfzeile beim Blättern oben stehen bleibt */
.tabelle-huelle:has(> table.rechte-tabelle) { overflow: visible; }
.rechte-tabelle thead th { z-index: 2; }
.rechte-tabelle thead th:first-child { border-top-left-radius: var(--radius); }
.rechte-tabelle thead th:last-child { border-top-right-radius: var(--radius); }
.rechte-tabelle tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.rechte-tabelle tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
.rechte-tabelle :is(th, td):first-child { white-space: normal; }
/* schmale Fenster: Spaltentitel senkrecht, damit alle Rollen nebeneinander passen */
@media (max-width: 900px) {
  .rechte-tabelle thead th.rolle { padding: 10px 2px; vertical-align: bottom; }
  .rechte-tabelle thead th.rolle span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; text-align: left; }
  .rechte-tabelle td.haken { padding: 8px 2px; }
  .rechte-tabelle input[type=checkbox] { width: 18px; height: 18px; margin: 0; vertical-align: middle; }
  .rechte-tabelle td:first-child { overflow-wrap: anywhere; hyphens: auto; }
  .rechte-tabelle :is(th, td):first-child { padding-left: 10px; padding-right: 6px; }
  .rechte-tabelle :is(th, td):last-child { padding-right: 10px; }
}
.rechte-tabelle tr.bereich th { background: var(--gruen-hell); color: var(--gruen); text-align: left; }
.rechte-tabelle input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gruen); }
.pflicht-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.pflicht-form input { width: 4.5em; text-align: right; }
@media (pointer: fine) { [data-sortieren] > tr { cursor: grab; } [data-sortieren] > tr a { cursor: pointer; } }
body.ziehen, body.ziehen * { cursor: grabbing !important; user-select: none; }
.als-karten table.stunden-tabelle td:empty { display: none; }  /* Einsätze ohne Anmeldung nicht als leere Zeile */
/* Arbeitsstunden: sechs und mehr Einsätze sollen nebeneinander passen */
.tabelle-huelle:not(.als-karten) table.stunden-tabelle :is(th, td) { padding: 10px 8px; }
.tabelle-huelle:not(.als-karten) table.stunden-tabelle :is(th, td):first-child { padding-left: 14px; }
.tabelle-huelle:not(.als-karten) table.stunden-tabelle :is(th, td).std { text-align: center; }
.tabelle-huelle:not(.als-karten) table.stunden-tabelle :is(th, td).std { padding-left: 4px; padding-right: 4px; }
.als-karten table.aemter td:first-child { grid-template-columns: 1fr; }  /* das Amt ist die Überschrift der Karte */
.als-karten table.aemter td:first-child::before { display: none; }
html.leicht .als-karten table.karten { border: 0; }

/* Sortierauswahl nur bei Kartenansicht (sonst sortieren die Spaltenköpfe) */
.nur-karten { display: none !important; }
.wrap:has(.als-karten) select.nur-karten { display: block !important; width: 100%; min-height: 46px; }
.wrap:has(.als-karten) form.nur-karten { display: flex !important; }
.wrap:has(.als-karten) .tabellen-kopf input[type=text] { max-width: none; }
/* Kartenansicht: Suchfeld, Filter und Sortierung füllen ihre Zeile immer ganz aus */
.wrap:has(.als-karten) form.tabellen-kopf > input[type=text] { flex: 1 1 100%; min-width: 0; }
.wrap:has(.als-karten) form.tabellen-kopf > select { flex: 1 1 8em; min-width: 0; max-width: none !important; }
.wrap:has(.als-karten) form.tabellen-kopf > select.nur-karten { flex-basis: 100%; }
/* Schmal (Karten): Überschrift allein in der Zeile, Knöpfe links darunter */
.wrap:has(.als-karten) .tabellen-kopf.umbrechen > :is(h1, h2) { flex-basis: 100%; }
.wrap:has(.als-karten) .tabellen-kopf.umbrechen > :not(h1, h2) { margin-left: 0 !important; }
.als-karten table.karten td.leer { display: none; }
.tabellen-kopf.umbrechen .aktionen .knopf { flex: 0 0 auto; } /* auch am Handy nebeneinander, nicht volle Breite */
.wrap:has(.als-karten) form.tabellen-kopf > button { flex: 0 0 auto; }

/* Karte auf der Startseite: erst nach Klick laden */
.karte-platzhalter { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; background: var(--gruen-hell); border-radius: var(--radius); }
.karte-platzhalter p { margin: 0; max-width: 40ch; color: var(--text-leise); }

@keyframes menue-ein { from { opacity: 0; transform: translateY(-10px); } }
@keyframes abdunkeln-ein { from { opacity: 0; } }
/* Wer im System „Bewegung reduzieren“ eingestellt hat, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Inhalte im Mitgliederbereich */
.inhalt-kachel { min-height: 0; flex-direction: row; align-items: center; }
.inhalt-kachel .symbol { flex: none; }
.inhalt-kachel small { font-size: .9rem; }
.inhalt-text { overflow-wrap: anywhere; }
.inhalt-text > :first-child { margin-top: 0; }
.inhalt-text > :last-child { margin-bottom: 0; }
.inhalt-text h2, .inhalt-text h3 { margin: 24px 0 8px; }
.inhalt-text li { margin-bottom: 4px; }
.inhalt-text.vorschau { border: 2px dashed var(--linie); border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 20px; }
.bilder figure { margin: 0; }
.bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.bilder figcaption { font-size: .9rem; color: var(--text-leise); margin-top: 4px; }
.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.downloads a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 8px; text-decoration: none; }
.downloads a:hover { border-color: var(--gruen); background: var(--gruen-hell); }
.downloads svg { width: 28px; height: 28px; flex: none; color: var(--rosa); }
.downloads small, .datei-liste small { display: block; color: var(--text-leise); font-size: .85rem; }
.datei-liste { list-style: none; padding: 0; margin: 0; }
.datei-liste li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--linie); }
.datei-liste li:first-child { border-top: 0; }
.datei-liste span { min-width: 0; overflow-wrap: anywhere; }
.datei-liste form { flex: none; }
.formathilfe code { background: var(--gruen-hell); padding: 1px 6px; border-radius: 4px; font-size: .9rem; overflow-wrap: anywhere; }
input[type=file] { width: 100%; font: inherit; padding: 8px 0; }

/* Vorschau beim Import der Mitgliederliste: Personen einer Parzelle gehören optisch zusammen */
.import-vorschau td { vertical-align: top; }
.import-vorschau tr.weiter td { border-top: 0; }
.import-vorschau tr.import-hinweise td { position: static; font-weight: 400; background: var(--warn-bg); color: var(--text); font-size: .9rem; padding-top: 6px; padding-bottom: 6px; }
.import-vorschau tr.import-hinweise ul { margin: 0; padding-left: 18px; }
.als-karten table.karten tr.import-hinweise td { background: var(--warn-bg) !important; font-weight: 400; color: var(--text); }
.als-karten table.import-vorschau td:empty { display: none; }
/* Als Kacheln: eine Kachel je Parzelle mit allen Pächtern, die Hinweise unten angehängt */
.als-karten table.import-vorschau tbody { margin-bottom: 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.als-karten table.import-vorschau tr { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.als-karten table.import-vorschau tr.weiter { border-top: 6px solid var(--linie); }
.als-karten table.import-vorschau tr.import-hinweise { border-top: 1px solid var(--linie); }

/* ---------- Wetterstatistik ---------- */
.wetter-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wetter-kennzahlen > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 10px; background: var(--hintergrund, #FBFAF5); }
.wetter-kennzahlen .etikett { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-leise); white-space: nowrap; }
.wetter-kennzahlen .etikett svg { width: 18px; height: 18px; flex: none; color: var(--gruen); }
.wetter-kennzahlen b { font-size: 1.45rem; line-height: 1.2; color: var(--gruen); white-space: nowrap; }
.wetter-kennzahlen span:last-child { color: var(--text-leise); font-size: .88rem; line-height: 1.35; hyphens: auto; }
@media (max-width: 760px) {
  .wetter-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wetter-kennzahlen b { font-size: 1.2rem; }
}
/* Schmale Handys: zwei Kacheln je Zeile, aber verdichtet; lange Wörter werden getrennt */
@media (max-width: 480px) {
  .wetter-kennzahlen { gap: 6px; }
  .wetter-kennzahlen > div { padding: 8px 9px; }
  .wetter-kennzahlen .etikett svg { display: none; }
  .wetter-kennzahlen .etikett { font-size: .78rem; white-space: normal; hyphens: auto; }
  .wetter-kennzahlen b { font-size: 1.05rem; white-space: normal; }
  .wetter-kennzahlen span:last-child { font-size: .78rem; }
}
.karte h3 { margin: 22px 0 6px; }
.diagramm { display: block; width: 100%; height: auto; margin: 8px 0; font-family: inherit; }
.diagramm text { font-size: 12px; fill: var(--text-leise); }
/* Jedes Diagramm gibt es breit und schmal (fürs Handy); gezeigt wird nur eines */
.diagramm.schmal { display: none; }
.diagramm.schmal text { font-size: 18px; }
.diagramm.schmal .dg-linientext { font-size: 15px; }
@media (max-width: 520px) { .diagramm.breit { display: none; } .diagramm.schmal { display: block; } }
.diagramm .dg-y { text-anchor: start; stroke: var(--flaeche); stroke-width: 4px; paint-order: stroke; } .diagramm .dg-x { text-anchor: middle; }
.diagramm .dg-gitter { stroke: var(--linie); stroke-width: 1; }
.diagramm .dg-gitter.dg-null { stroke: var(--text-leise); }
.diagramm .dg-linie { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.diagramm .dg-treffer { fill: transparent; }
.diagramm .dg-treffer:hover { fill: rgba(0, 60, 30, .07); }
.diagramm .dg-band { fill: rgba(192, 57, 43, .10); }
.diagramm line.dg-frostlinie, .diagramm line.dg-grenze { stroke: #2E6DB4; stroke-width: 1.5; stroke-dasharray: 5 4; }
.diagramm line.dg-grenze { stroke: #A4262C; }
.diagramm line.dg-hilfslinie { stroke: #6b6b6b; stroke-width: 1.5; stroke-dasharray: 5 4; }
.diagramm line.dg-normal { stroke: #333; stroke-width: 2.5; }
.diagramm .dg-linientext { text-anchor: end; font-size: 11px; stroke: var(--flaeche); stroke-width: 4px; paint-order: stroke; stroke-dasharray: none; }
:root { --dg-max: #C0392B; --dg-min: #2E6DB4; --dg-mittel: #1E7A3A; --dg-normal: #8A8A8A; --dg-regen: #3B7DD8; --dg-sonne: #E8B400;
        --dg-frost: #6FB3E0; --dg-bodenfrost: #A98BC4; --dg-boden: #7D3C98; --dg-boden5: #B5651D; --dg-boden20: #6B4423; --dg-ozon: #8E44AD;
        --dg-pm10: #7F8C8D; --dg-pm25: #34495E; --dg-wind: #5D8A84; }
.diagramm .dg-max { stroke: var(--dg-max); } .diagramm .dg-min { stroke: var(--dg-min); } .diagramm .dg-mittel { stroke: var(--dg-mittel); }
.diagramm .dg-normal-linie { stroke: var(--dg-normal); stroke-dasharray: 6 4; }
.diagramm .dg-boden { stroke: var(--dg-boden); } .diagramm .dg-boden5 { stroke: var(--dg-boden5); } .diagramm .dg-boden20 { stroke: var(--dg-boden20); }
.diagramm .dg-ozon { stroke: var(--dg-ozon); } .diagramm .dg-pm10 { stroke: var(--dg-pm10); } .diagramm .dg-pm25 { stroke: var(--dg-pm25); }
.diagramm .dg-p1 { stroke: #B5651D; } .diagramm .dg-p2 { stroke: #7D3C98; } .diagramm .dg-p3 { stroke: #1E7A3A; } .diagramm .dg-p4 { stroke: #2E6DB4; } .diagramm .dg-p5 { stroke: #C0392B; }
.diagramm line.dg-schwelle { stroke-width: 1.5; stroke-dasharray: 5 4; } .diagramm text.dg-linientext.dg-schwelle { stroke: var(--flaeche); }
.diagramm text.dg-schwelle.dg-p1 { fill: #B5651D; } .diagramm text.dg-schwelle.dg-p2 { fill: #7D3C98; } .diagramm text.dg-schwelle.dg-p3 { fill: #1E7A3A; } .diagramm text.dg-schwelle.dg-p4 { fill: #2E6DB4; } .diagramm text.dg-schwelle.dg-p5 { fill: #C0392B; }
.diagramm rect.dg-balken, .diagramm rect.dg-regen { fill: var(--dg-regen); } .diagramm rect.dg-sonne { fill: var(--dg-sonne); } .diagramm rect.dg-frost { fill: var(--dg-frost); } .diagramm rect.dg-bodenfrost { fill: var(--dg-bodenfrost); }
.diagramm rect.dg-wind { fill: var(--dg-wind); }
.diagramm rect.dg-waermer { fill: #CB181D; } .diagramm rect.dg-kaelter { fill: #2171B5; }
.diagramm rect.dg-uv1 { fill: #7CB342; } .diagramm rect.dg-uv2 { fill: #E8B400; } .diagramm rect.dg-uv3 { fill: #EF6C00; } .diagramm rect.dg-uv4 { fill: #C62828; }
.punkt.dg-max { background: var(--dg-max); } .punkt.dg-min { background: var(--dg-min); } .punkt.dg-mittel { background: var(--dg-mittel); }
.punkt.dg-normal-linie { background: var(--dg-normal); } .punkt.dg-regen { background: var(--dg-regen); } .punkt.dg-sonne { background: var(--dg-sonne); }
.punkt.dg-frost { background: var(--dg-frost); } .punkt.dg-bodenfrost { background: var(--dg-bodenfrost); } .punkt.dg-boden { background: var(--dg-boden); } .punkt.dg-boden5 { background: var(--dg-boden5); }
.punkt.dg-boden20 { background: var(--dg-boden20); } .punkt.dg-pm10 { background: var(--dg-pm10); } .punkt.dg-pm25 { background: var(--dg-pm25); }
.punkt.strich { height: 3px; background: #333; } .punkt.dg-band { background: rgba(192, 57, 43, .18); }
.punkt.dg-p1 { background: #B5651D; } .punkt.dg-p2 { background: #7D3C98; } .punkt.dg-p3 { background: #1E7A3A; } .punkt.dg-p4 { background: #2E6DB4; } .punkt.dg-p5 { background: #C0392B; }
/* Klimastreifen: 9 Stufen von deutlich kälter bis deutlich wärmer als 1991–2020 */
.streifen .dg-stufe-4 { fill: #08306B; } .streifen .dg-stufe-3 { fill: #2171B5; } .streifen .dg-stufe-2 { fill: #6BAED6; } .streifen .dg-stufe-1 { fill: #C6DBEF; }
.streifen .dg-stufe\+0 { fill: #E8E2D4; }
.streifen .dg-stufe\+1 { fill: #FCBBA1; } .streifen .dg-stufe\+2 { fill: #FB6A4A; } .streifen .dg-stufe\+3 { fill: #CB181D; } .streifen .dg-stufe\+4 { fill: #67000D; }

/* Zähler */
.zaehler-titel svg { width: 1em; height: 1em; vertical-align: -.12em; color: var(--rosa); }

/* ---------- Zählerfoto: Kamera mit Rahmen ---------- */
.zaehlerfoto { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; }
.zaehlerfoto p { margin: 0; flex: 1 1 240px; }
.zaehlerfoto img { width: 160px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie); }
.zaehlerfoto-bild { display: block; width: 100%; border-radius: 6px; }
[data-bildfenster]:is(img) { cursor: zoom-in; }
.bildfenster { padding: 0; border: 0; border-radius: var(--radius); background: transparent; width: fit-content; height: fit-content;
  max-width: min(96vw, 1200px); max-height: 92vh; overflow: hidden; }
.bildfenster::backdrop { background: rgba(0,0,0,.75); }
.bildfenster img { display: block; width: auto; height: auto; max-width: min(96vw, 1200px); max-height: 92vh; }
.bildfenster-zu { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.9); color: #1d2420; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.kamera { position: fixed; inset: 0; z-index: 100; margin: 0; background: #000; }  /* margin: kein Abstand aus .stapel */
.kamera[hidden] { display: none; }
.kamera [hidden] { display: none !important; }  /* auch Knöpfe, die sonst display setzen */
.kamera video { width: 100%; height: 100%; object-fit: cover; }
.kamera-bild { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; touch-action: none; cursor: grab; user-select: none; }
.kamera-bild:active { cursor: grabbing; }
.kamera-bild:not([hidden]) ~ .kamera-rahmen { pointer-events: none; }
.kamera-werkzeuge { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; gap: 8px;
  justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.kamera-werkzeuge [data-bild-werkzeuge]:not([hidden]) { display: flex; gap: 8px; }
.kamera-werkzeuge .knopf { min-width: 44px; }
.kamera-werkzeuge [data-bild-werkzeuge] .knopf { font-size: 1.3rem; }
.kamera-regler { display: flex; align-items: center; gap: 8px; color: #fff; font-size: .95rem; }
.kamera-regler[hidden] { display: none; }
.kamera-regler input { width: min(40vw, 220px); accent-color: var(--rosa); }
.kamera-fein { position: absolute; left: 16px; right: 16px; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 96px); }
.kamera-fein input { flex: 1; width: auto; height: 32px; }  /* über die ganze Breite: fein drehen geht so leichter */
.kamera-ausloeser.uebernehmen { background: var(--gruen-mittel); position: relative; }
.kamera-ausloeser.uebernehmen::after { content: ""; position: absolute; left: 50%; top: 45%; width: 14px; height: 26px; border: solid #fff;
  border-width: 0 5px 5px 0; transform: translate(-50%, -50%) rotate(45deg); }
.kamera-ausloeser[hidden] { display: none; }
.kamera-rahmen { position: absolute; left: 50%; top: 42%; width: min(86vw, 640px); aspect-ratio: 4 / 1; transform: translate(-50%, -50%);
  border: 3px solid var(--rosa); border-radius: 8px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
/* zu Beginn angedeutete Walzen: erst 5, dann 6, 7, 8 – so sieht man, wie das Zählwerk in den Rahmen gehört */
.kamera-walzen { position: absolute; inset: 8px 10px; display: flex; opacity: 0; transition: opacity .5s; }
.kamera-walzen.zeigen { opacity: .8; }
/* eine Walze: dunkle Rolle mit heller Ziffer, oben und unten schattiert; Nachkommawalzen rot */
.kamera-walzen span { flex: 0 1 0; min-width: 0; margin: 0; opacity: 0; overflow: hidden; display: flex; align-items: center;
  justify-content: center; border-radius: 3px; color: #f4f4f0; font: 600 clamp(1.1rem, 6vw, 2.4rem)/1 "Fontin Sans", sans-serif;
  background: linear-gradient(#0d0d0d, #4a4a4a 30%, #5a5a5a 50%, #4a4a4a 70%, #0d0d0d);
  transition: flex-grow .6s ease-in-out, margin .6s ease-in-out, opacity .6s ease-in-out, background .6s; }
.kamera-walzen span.da { flex-grow: 1; margin: 0 3px; opacity: 1; }
.kamera-walzen span.rot { background: linear-gradient(#5c0010, #c0102c 30%, #d4203a 50%, #c0102c 70%, #5c0010); }
@media (prefers-reduced-motion: reduce) { .kamera-walzen span { transition: none; } }
/* davor: das ganze Bild wird sauber gewischt – so wie man das Fenster am Zähler putzen soll */
.kamera-putzen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: none; }
.kamera-putzen.zeigen { display: block; }
.kamera-putzen .schmutz { position: absolute; inset: 0;
  background: radial-gradient(circle at 12% 18%, rgba(120,95,60,.7) 0 4%, transparent 9%),
    radial-gradient(ellipse at 30% 55%, rgba(110,90,55,.55) 0 6%, transparent 12%),
    radial-gradient(circle at 48% 28%, rgba(140,115,75,.6) 0 5%, transparent 10%),
    radial-gradient(ellipse at 62% 46%, rgba(100,80,50,.65) 0 5%, transparent 11%),
    radial-gradient(circle at 80% 22%, rgba(125,100,62,.6) 0 4%, transparent 9%),
    radial-gradient(circle at 22% 82%, rgba(115,92,58,.6) 0 5%, transparent 10%),
    radial-gradient(ellipse at 74% 78%, rgba(130,105,68,.6) 0 6%, transparent 12%),
    radial-gradient(circle at 92% 60%, rgba(105,85,52,.6) 0 4%, transparent 9%),
    linear-gradient(100deg, rgba(190,180,160,.5), rgba(160,150,125,.55));
  /* sauber wird es schräg von links oben nach rechts unten: eine Maske, deren Kante mitläuft */
  -webkit-mask-image: linear-gradient(to bottom right, transparent calc(var(--gewischt) - 6%), #000 var(--gewischt));
  mask-image: linear-gradient(to bottom right, transparent calc(var(--gewischt) - 6%), #000 var(--gewischt));
  animation: wischen 2.6s ease-in-out forwards; }
@property --gewischt { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes wischen { 0%, 5% { --gewischt: 0%; } 95%, 100% { --gewischt: 112%; } }
/* Die Hand sitzt auf der Kante: Der Punkt (g·Breite, g·Höhe) liegt auf ihr, und die Kante ist parallel zur
   Diagonale von links unten nach rechts oben (Winkel --kante, setzt zaehlerfoto.js). */
.kamera-putzen .werkzeug { position: absolute; width: 0; height: 0; transform: rotate(var(--kante, -35deg));
  animation: werkzeug 2.6s ease-in-out forwards; }
/* die Hand blendet aus, bevor es funkelt (ab 2,0 s) */
@keyframes werkzeug { 0%, 5% { left: -3%; top: -3%; } 62% { opacity: 1; } 74% { opacity: 0; } 95%, 100% { left: 109%; top: 109%; opacity: 0; } }
/* die Hand reibt im Kreis, während sie mit der Kante wandert; am Ende funkelt es kurz */
.kamera-putzen .hand svg { position: absolute; width: min(70vw, 440px); left: 0; top: 0; overflow: visible;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.5)); animation: reiben .6s linear infinite; }
@keyframes reiben { from { transform: translate(-50%, -50%) rotate(15deg) rotate(0turn) translateX(40px) rotate(0turn); }
  to { transform: translate(-50%, -50%) rotate(15deg) rotate(1turn) translateX(40px) rotate(-1turn); } }
.kamera-putzen .funkeln { position: absolute; width: 34px; height: 34px; margin: -17px; fill: #fff; opacity: 0;
  filter: drop-shadow(0 0 6px #fff); animation: funkeln .7s ease-out forwards; }
.kamera-putzen .funkeln:nth-of-type(1) { animation-delay: 2.1s; }
.kamera-putzen .funkeln:nth-of-type(2) { animation-delay: 2.3s; }
.kamera-putzen .funkeln:nth-of-type(3) { animation-delay: 2.0s; }
@keyframes funkeln { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.1) rotate(30deg); }
  100% { opacity: 0; transform: scale(.4) rotate(60deg); } }
.kamera-tipp { pointer-events: none; position: absolute; left: 16px; right: 16px; margin: 0; text-align: center; color: #fff;
  font-size: 1.05rem; top: calc(42% - min(86vw, 640px) / 8 - 16px); transform: translateY(-100%); transition: opacity .5s; }
.kamera-tipp.weg { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .kamera-putzen .werkzeug, .kamera-putzen .funkeln { display: none !important; } .kamera-putzen .schmutz { animation-duration: .01s; animation-delay: 1.5s; } }
.kamera-hinweis { pointer-events: none; position: absolute; left: 16px; right: 16px; top: calc(42% + min(86vw, 640px) / 8 + 18px); margin: 0;
  color: #fff; text-align: center; font-size: 1.05rem; }
.kamera-knoepfe { position: absolute; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom)); display: flex;
  justify-content: space-evenly; align-items: center; }
.kamera-knoepfe .knopf { min-width: 120px; }
.kamera-ausloeser { width: 76px; height: 76px; border-radius: 50%; border: 6px solid #fff; background: var(--rosa); cursor: pointer; }
.kamera-ausloeser:active { transform: scale(.94); }
.foto-beleg { display: inline-flex; vertical-align: -3px; color: var(--gruen-mittel); }
.foto-beleg svg { width: 18px; height: 18px; }
/* Ablese-Modus (Serien-Ablesung): je Foto ein Fenster zum Bestätigen, Foto oben, Angaben darunter */
.serie-datum { max-width: 14em; }
.serie-start { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.serie-start [data-meldung] { flex-basis: 100%; }
.serie-erfasst { margin: 0; padding-left: 1.2em; }
.serie-erfasst li { margin: 4px 0; }
.serie-dialog { max-width: 560px; max-height: calc(100dvh - 24px); overflow: auto; }
.serie-dialog form { padding: 18px 20px 20px; }
.serie-dialog h2 { margin: 0 0 12px; }
.serie-foto { display: block; width: 100%; max-height: 38dvh; object-fit: contain; border-radius: 8px; background: #000; margin-bottom: 12px; }
.serie-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.serie-zeile label.feld { margin-bottom: 8px; color: inherit; }
.serie-zeile label.feld > span { display: block; margin-bottom: 4px; color: var(--gruen); }
.serie-zeile select, .serie-zeile input[type=text] { width: 100%; }
.serie-zeile input[type=text] { font-size: 1.3rem; font-variant-numeric: tabular-nums; max-width: 14em; }
.serie-letzter { margin: -4px 0 8px; font-size: .9rem; }
.serie-meldung { margin: 6px 0 0; font-size: .92rem; }
.serie-meldung.warn { color: var(--warn); }
.serie-meldung.offen { color: var(--offen); }
.serie-trotzdem { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; color: var(--text); }
.serie-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 16px; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

/* Abrechnung: Beträge rechtsbündig untereinander (nicht in der Kartenansicht) */
table.abrechnung .betrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.als-karten table.abrechnung .betrag { text-align: left; }
table.abrechnung tr.teil th { background: var(--gruen-hell); color: var(--gruen); }
/* Festschreiben: je fehlendem Zählerstand die Verfahren untereinander */
table.schaetzung label.wahl { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 2px 0; font-weight: 400; }
table.schaetzung label.wahl input[type=text] { width: 8em; min-height: 36px; padding: 4px 8px; }
.tabelle-huelle:not(.als-karten) table.schaetzung td:nth-child(3), .tabelle-huelle:not(.als-karten) table.schaetzung td:nth-child(4) { white-space: nowrap; }

/* Jahresübersicht: Beträge und Rechnungen, die nach dem Festschreiben von der heutigen Berechnung abweichen (Tooltip mit dem alten Wert) */
.abweicht { color: var(--rosa-dunkel); }
span.abweicht { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* Rechnung: Karte „Zahlungen“ */
table.zahlungen { width: 100%; border-collapse: collapse; }
table.zahlungen td { padding: 6px 0; border-bottom: 1px solid var(--linie, #e5e2d8); vertical-align: top; }
table.zahlungen td.betrag { text-align: right; white-space: nowrap; }
/* Rechnungspaket: je Zustand eine Zeile mit Anzahl und den nächsten Schritten */
table.paket td { vertical-align: middle; }
table.paket td:first-child { font-weight: 600; }
.tabelle-huelle:not(.als-karten) table.paket td:first-child { white-space: nowrap; }
table.paket .betrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.als-karten table.paket .betrag { text-align: left; }
/* schmal: „Nächste Schritte“ über den Knöpfen, die Knöpfe in voller Breite darunter */
.als-karten table.paket td:last-child { grid-template-columns: 1fr; gap: 8px; }
table.paket .knopf { white-space: nowrap; }
/* zwei Knöpfe (Herunterladen, Drucken) gleich breit nebeneinander; erst wenn es sehr schmal wird, untereinander */
.aktionen.paar .knopf { flex: 1 1 7.5em; padding-left: 12px; padding-right: 12px; }
table.paket .aktionen { gap: 8px; margin: 0; flex-wrap: wrap; align-items: center; }
table.zahlungen a.loeschen { color: var(--rosa-dunkel); font-size: .85rem; }
.zahlung-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 16px; }
.zahlung-form .feld { margin: 0; flex: 1 1 8em; }
.zahlung-form .feld:nth-child(4) { flex-basis: 100%; }

/* Meine Daten: Abschnitte und Zugänge */
h3.abschnitt { font-size: 1rem; margin: 22px 0 10px; color: var(--gruen); }
form > h3.abschnitt:first-of-type { margin-top: 0; }
ul.zugaenge { list-style: none; margin: 0; padding: 0; }
ul.zugaenge li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
                 padding: 12px 0; border-top: 1px solid var(--linie, #e3e0d6); }
ul.zugaenge .wer { overflow-wrap: anywhere; }
ul.zugaenge .was { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
ul.zugaenge .was form { margin: 0; }
/* Umschalter „Kopie: an/aus“: speichert beim Klick sofort */
.umschalter { font: inherit; font-size: .9rem; padding: 6px 14px; min-height: 36px; border-radius: 999px; cursor: pointer;
              border: 2px solid var(--linie); background: #F1EFE8; color: var(--text-leise); }
.umschalter.an { border-color: var(--gruen); background: var(--gruen-hell); color: var(--gruen); font-weight: 600; }
.umschalter:hover { border-color: var(--gruen); }

/* Zustände einer Rechnung als Liste mit Punkten: erledigt grün gefüllt */
.zustaende { list-style: none; margin: 0; padding: 0; }
.zustaende li { position: relative; padding: 0 0 10px 22px; display: flex; flex-direction: column; }
.zustaende li::before { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--linie); background: var(--flaeche); }
.zustaende li::after { content: ""; position: absolute; left: 6px; top: 19px; bottom: 0; width: 2px; background: var(--linie); }
.zustaende li:last-child { padding-bottom: 0; }
.zustaende li:last-child::after { display: none; }
.zustaende li.erledigt::before { background: var(--gruen); border-color: var(--gruen); }
.zustaende li.storno::before { background: var(--warn); border-color: var(--warn); }
.zustaende span { color: var(--text-leise); font-size: .9rem; }

/* stornierte Rechnungen auf der Seite der Parzelle: blasser, Beträge durchgestrichen */
.karte.storniert table.abrechnung td.betrag, .karte.storniert tfoot .betrag { text-decoration: line-through; color: var(--text-leise); }

/* „Je Parzelle“: unter jedem Entwurf die festgeschriebenen Rechnungen, kleiner; stornierte durchgestrichen */
table.abrechnung tr.rechnung-zeile td { font-size: .9rem; padding-top: 6px; padding-bottom: 6px; }
table.abrechnung tr.storniert td.betrag { text-decoration: line-through; color: var(--text-leise); }

/* Zustände einer Rechnung, je einer auf einer Zeile (Seite der Parzelle) */
.zustaende-kurz { list-style: none; margin: 0 0 12px; padding: 0; color: var(--text-leise); font-size: .95rem; }
.zustaende-kurz b { color: var(--text); font-weight: 600; display: inline-block; min-width: 14em; }
.jahr-auswahl { display: flex; gap: 8px; margin: 0; }
.jahr-auswahl select { width: auto; padding-block: 4px; }

/* Buchhaltung */
table.buchungen .betrag, table.jahresauswertung .betrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.buchungen .betrag.minus, table.jahresauswertung .minus { color: var(--rosa-dunkel, #a3124f); }
.als-karten table.buchungen .betrag { text-align: left; }
table.jahresauswertung { width: 100%; }
table.jahresauswertung tr.summe th, table.jahresauswertung tr.summe td { border-top: 2px solid var(--linie); font-weight: 600; }
.journal-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.journal-filter .feld { margin: 0; flex: 1 1 11em; }
button.link { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; cursor: pointer; text-decoration: underline; }
table.zahlungen button.loeschen { color: var(--rosa-dunkel); font-size: .85rem; }
/* Konto bearbeiten: bei der Barkasse keine Bankfelder (ohne JavaScript, über die Auswahl „Art“) */
body:has(.konto-form select[name=art] option[value=kasse]:checked) .nur-bank { display: none; }