/*
  Teamzentrale der Taubenhilfe Gaggenau (0.1.0). Gestaltung nach Apples HIG (Skill apple-design),
  Farben und Schrift von www.taubenhilfe-gaggenau.de: Source Sans 3 (OFL, Dateien hier im Ordner),
  Petrol #173c4b für Überschriften, #3f7f98 für Knöpfe, viel Weiß und Luft.
  Handy zuerst: Tippflächen 44 px, Abstände in rem, Hell/Dunkel nach Gerät, Bewegung kurz und
  abschaltbar (prefers-reduced-motion). Kopfleiste als schwebende Glas-Kapsel wie in mein.jedesleben.de.
*/
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("SourceSans3-Regular.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("SourceSans3-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("SourceSans3-Bold.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("SourceSans3-It.woff2") format("woff2"); }
/* 0.1.1: feste Schnitte statt variabler Schrift. Im nachgestellten iPhone (Playwright-WebKit) griffen die
   Gewichte der variablen Datei nicht, alles wirkte dünn; feste Dateien sind in jedem Browser eindeutig.
   Gewicht 500 fällt auf 400 oder 600 zurück. */

:root {
  color-scheme: light dark;
  --petrol: light-dark(#173c4b, #cfe3ec);        /* Überschriften, Marke */
  --akzent: light-dark(#3f7f98, #6fb3cc);        /* Knöpfe, Links, Auswahl */
  --akzent-kraeftig: light-dark(#2f6a81, #8cc5da);
  --hintergrund: light-dark(#f3f6f8, #07111a);
  --text: light-dark(#1b2b33, #e9f0f3);
  --text-2: light-dark(rgba(27, 43, 51, .72), rgba(233, 240, 243, .68));
  --text-3: light-dark(rgba(27, 43, 51, .4), rgba(233, 240, 243, .38));
  --flaeche: light-dark(rgba(255, 255, 255, .74), rgba(255, 255, 255, .07));
  --fuellung: light-dark(rgba(23, 60, 75, .07), rgba(255, 255, 255, .1));
  --trenner: light-dark(rgba(23, 60, 75, .14), rgba(255, 255, 255, .14));
  --glas-kante: inset 0 1px 0 light-dark(rgba(255, 255, 255, .95), rgba(255, 255, 255, .16)),
    inset 0 0 0 .5px light-dark(rgba(23, 60, 75, .08), rgba(255, 255, 255, .12));
  --glas-schatten: 0 .25rem 1.25rem light-dark(rgba(23, 60, 75, .08), rgba(0, 0, 0, .4));
  --rot: light-dark(#c8372d, #ff6b61);
  --gruen: light-dark(#2f8f5b, #5fd08f);
  --rand: max(1rem, env(safe-area-inset-left));
  --federnd: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-contrast: more) {
  :root { --text-2: light-dark(rgba(27, 43, 51, .9), rgba(233, 240, 243, .9)); --trenner: light-dark(rgba(23, 60, 75, .35), rgba(255, 255, 255, .35)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--hintergrund); color: var(--text);
  font: 400 1.0625rem/1.45 "Source Sans 3", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  letter-spacing: 0; -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
}
main { max-width: 52rem; margin: 0 auto; padding: 1rem var(--rand) max(3rem, env(safe-area-inset-bottom)); }
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
b, strong { font-weight: 600; }
code { font: .9375rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Weicher Farbgrund: ein Hauch Petrol oben links, Sand unten rechts; sonst ruhig */
.farbgrund {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--hintergrund);
  background-image:
    radial-gradient(60% 45% at 8% 0%, light-dark(rgba(63, 127, 152, .22), rgba(63, 127, 152, .28)), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, light-dark(rgba(214, 178, 120, .22), rgba(120, 90, 50, .25)), transparent 70%);
}
@media (prefers-reduced-transparency: reduce) { .farbgrund { display: none; } :root { --flaeche: light-dark(#fff, #14202a); } }

/* ---------- Kopfleiste: schwebende Glas-Kapsel ---------- */
.kopfleiste {
  position: sticky; top: 0; z-index: 50;
  padding: calc(env(safe-area-inset-top) + .5rem) max(.5rem, env(safe-area-inset-right)) 0 max(.5rem, env(safe-area-inset-left));
}
.k-innen {
  position: relative; z-index: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  max-width: 52rem; height: 2.875rem; margin: 0 auto; padding: 0 .25rem; border-radius: 999px;
}
.k-innen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: light-dark(rgba(255, 255, 255, .62), rgba(20, 32, 42, .55));
  box-shadow: var(--glas-kante), 0 .5rem 2rem light-dark(rgba(23, 60, 75, .12), rgba(0, 0, 0, .5));
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
}
@media (prefers-reduced-transparency: reduce) { .k-innen::before, .k-liste { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.kopfleiste a, .kopfleiste button { -webkit-tap-highlight-color: transparent; }
.k-marke, .k-knopf, .k-konto {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .625rem; border: 0; border-radius: 999px;
  background: none; color: var(--petrol); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 150ms;
}
.k-marke .k-text { white-space: nowrap; }
.k-marke .k-text small { font-weight: 400; color: var(--text-2); margin-left: .2rem; font-size: .9375rem; }
/* 0.4.1: mit sechs Einträgen in der Leiste brach die Marke am Rechner in zwei Zeilen; „Team“ nur bei viel Platz */
@media (max-width: 62rem) { .k-marke .k-text small { display: none; } }
@media (min-width: 44rem) and (max-width: 56rem) { .k-nav-link { padding: .375rem .5rem; font-size: .9375rem; } }
.k-logo { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--akzent) url("zeichen.svg") center/70% no-repeat; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.k-nav { display: none; gap: .125rem; }
.k-nav-link { padding: .375rem .75rem; border-radius: 999px; color: var(--text); font-weight: 600; text-decoration: none; transition: background-color 150ms; }
.k-nav-link.aktuell { background: var(--fuellung); font-weight: 600; color: var(--petrol); }
@media (min-width: 44rem) { .k-nav { display: flex; } }
.k-rechts { display: flex; align-items: center; gap: .125rem; }
.k-konto { padding: .25rem .5rem .25rem .25rem; }
.k-avatar {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(180deg, #5b9ab3, var(--akzent-kraeftig)); color: #fff; font-size: .9375rem; font-weight: 600;
}
.k-wer { display: grid; line-height: 1.15; min-width: 0; text-align: left; }
.k-wer b { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; }
.k-wer small { font-size: .75rem; font-weight: 400; color: var(--text-2); }
@media (max-width: 30rem) { .k-marke .k-text, .k-konto .k-wer { display: none; } }
.k-symbol { justify-content: center; width: 2.75rem; padding: 0; }
.k-symbol svg { width: 1.375rem; height: 1.375rem; }
.k-knopf[aria-expanded="true"], .k-marke:active, .k-konto:active, .k-knopf:active { background: var(--fuellung); }
@media (hover: hover) { .k-marke:hover, .k-knopf:hover, .k-konto:hover, .k-nav-link:hover { background: var(--fuellung); } }
.k-marke:focus-visible, .k-knopf:focus-visible, .k-konto:focus-visible, .k-nav-link:focus-visible, .k-eintrag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }

/* Menü: klappt unter der Kapsel auf, rechts verankert */
.k-liste {
  position: absolute; right: max(.5rem, env(safe-area-inset-right)); top: calc(100% + .375rem); z-index: 1;
  width: min(18rem, calc(100vw - 1rem)); max-height: calc(100dvh - 5rem); overflow: auto; padding: .375rem;
  border-radius: 1.25rem; background: light-dark(rgba(255, 255, 255, .86), rgba(24, 36, 46, .86));
  box-shadow: var(--glas-kante), 0 1rem 3rem light-dark(rgba(23, 60, 75, .18), rgba(0, 0, 0, .6));
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  transform-origin: top right; animation: k-auf 200ms var(--federnd) both;
}
.kopfleiste { --k-rechts: 0; }
@media (min-width: 53rem) { .k-liste { right: calc((100vw - 52rem) / 2); } }
@keyframes k-auf { from { opacity: 0; transform: scale(.95) translateY(-.25rem); } }
.k-gruppe { margin: .25rem 0 0; padding: .375rem .625rem .25rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.k-gruppe:first-child { margin-top: 0; }
.k-eintrag {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 2.75rem; padding: .375rem .625rem; border: 0;
  border-radius: .625rem; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.k-eintrag[aria-current="page"] { background: var(--fuellung); font-weight: 600; }
.k-eintrag .k-name { flex: 1; }
.k-hinweis { font-size: .8125rem; color: var(--text-2); white-space: nowrap; }
.k-rot { color: var(--rot); }
@media (hover: hover) { .k-eintrag:hover { background: var(--fuellung); } }
.k-liste form { margin: 0; }

/* ---------- Seitenaufbau ---------- */
.seitenkopf { margin: .75rem 0 1.25rem; }
.seitenkopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.status-pille {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .2rem .7rem .2rem .55rem; border-radius: 999px;
  background: var(--flaeche); box-shadow: var(--glas-kante); font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2);
}
.status-pille::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gruen); }
.status-pille.schlicht::before { content: none; }
h1 { margin: 0; color: var(--petrol); font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
.unter { margin: .5rem 0 0; max-width: 40rem; font-size: 1.0625rem; line-height: 1.45; color: var(--text-2); }
main section + section { margin-top: 1.75rem; }
main section > h2:first-child { margin: 0 0 .625rem; padding: 0 .25rem; font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--petrol); }
.gruppe { border-radius: 1.125rem; background: var(--flaeche); box-shadow: var(--glas-kante), var(--glas-schatten); }
.gruppe.text { padding: .875rem 1.125rem; }
.gruppe.text ol, .gruppe.text ul { margin: 0; padding-left: 1.25rem; }
.gruppe.text li + li { margin-top: .5rem; }
.fussnote { margin: .625rem .25rem 0; font-size: .875rem; line-height: 1.4; color: var(--text-2); }
.meldung {
  margin: 0 0 1rem; padding: .75rem 1rem; border-radius: .875rem; background: light-dark(rgba(47, 143, 91, .12), rgba(95, 208, 143, .14));
  color: light-dark(#1f6b42, #a9ecc4); font-weight: 600; animation: auftauchen 400ms var(--federnd) both;
}
.fehler { margin: .75rem .25rem 0; font-size: .9375rem; font-weight: 600; color: var(--rot); }
.fuss { max-width: 52rem; margin: 0 auto; padding: 0 var(--rand) max(1.5rem, env(safe-area-inset-bottom)); font-size: .8125rem; color: var(--text-3); }
.fuss a { color: inherit; }

/* ---------- Kacheln der Startseite ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.kachelkarte {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .125rem; align-items: center;
  padding: .875rem 1rem; border-radius: 1.125rem; background: var(--flaeche); box-shadow: var(--glas-kante), var(--glas-schatten);
  animation: auftauchen 500ms var(--federnd) both; transition: transform 200ms var(--federnd), background-color 200ms;
}
.kachelkarte:nth-child(2) { animation-delay: 40ms; } .kachelkarte:nth-child(3) { animation-delay: 80ms; } .kachelkarte:nth-child(4) { animation-delay: 120ms; }
.kachelkarte:nth-child(5) { animation-delay: 160ms; } .kachelkarte:nth-child(6) { animation-delay: 200ms; }
.kachelkarte:has(.karte-link):active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .kachelkarte:has(.karte-link):hover { background: light-dark(rgba(255, 255, 255, .92), rgba(255, 255, 255, .11)); } }
.kachelkarte .kachel { grid-row: 1 / 3; }
.kachelkarte .name { font-size: 1.0625rem; font-weight: 600; color: var(--petrol); text-decoration: none; }
.karte-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kachelkarte:has(.karte-link:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kachelkarte .beschreibung { grid-column: 2; margin: 0; font-size: .875rem; line-height: 1.35; color: var(--text-2); }
.kachelkarte.geplant { opacity: .7; }
.kachelkarte.geplant .name { color: var(--text-2); }
.kachel {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; color: #fff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08), 0 1px 1.5px rgba(0, 0, 0, .1);
}
.kachel svg { width: 1.375rem; height: 1.375rem; filter: drop-shadow(0 .5px .5px rgba(0, 0, 0, .15)); }
.rot { background-color: light-dark(#d9534a, #e4635a); }
.blau { background-color: var(--akzent); }
.gruen { background-color: light-dark(#3a9a67, #4db37c); }
.grau { background-color: light-dark(#7f8b92, #5b6870); }
.lila { background-color: light-dark(#6c63c7, #8a82e0); }
.status {
  display: inline-flex; align-items: center; padding: 0 .5rem; border-radius: 999px; line-height: 1.25rem;
  background: var(--fuellung); color: var(--text-2); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.kachelkarte .status { grid-column: 2; justify-self: start; margin: .125rem 0; }

/* ---------- Formulare: gruppierte Felder wie in iOS ---------- */
.felder { margin: 0; padding: 0; border: 0; border-radius: 1.125rem; background: var(--flaeche); box-shadow: var(--glas-kante), var(--glas-schatten); overflow: hidden; }
.feld { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: .75rem; min-height: 3rem; padding: 0 1rem; }
.feld + .feld { border-top: .5px solid var(--trenner); }
.feld > span { font-size: .9375rem; font-weight: 600; color: var(--text); }
.feld input, .feld select { width: 100%; min-height: 3rem; padding: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; }
.feld input::placeholder { color: var(--text-3); }
.feld.nur-text b { font-weight: 600; color: var(--text-2); }
.felder:focus-within { box-shadow: var(--glas-kante), 0 0 0 2px var(--akzent); }
@media (max-width: 30rem) {
  .feld { grid-template-columns: 1fr; gap: 0; padding: .5rem 1rem; }
  .feld > span { font-size: .8125rem; color: var(--text-2); }
  .feld input, .feld select { min-height: 2.25rem; }
}
.auswahl { appearance: auto; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* Knöpfe: Petrol gefüllt wie auf der Website, als weiche Pille; Nebenknopf grau, Löschen rot */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.125rem; border: 0; border-radius: .875rem;
  background: var(--akzent); color: #fff; font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform 120ms ease-out, background-color 150ms, opacity 150ms;
}
.knopf:active:not(:disabled) { transform: scale(.97); }
.knopf:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .knopf:hover:not(:disabled) { background: var(--akzent-kraeftig); } }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.knopf.voll { width: 100%; margin-top: .75rem; min-height: 3.125rem; }
.knopf.klein { min-height: 2.25rem; padding: 0 .75rem; font-size: .875rem; border-radius: .625rem; }
.knopf.zweit { background: var(--fuellung); color: var(--petrol); }
.knopf.gefahr { background: var(--fuellung); color: var(--rot); }
@media (hover: hover) and (pointer: fine) {
  .knopf.zweit:hover:not(:disabled), .knopf.gefahr:hover:not(:disabled) { background: light-dark(rgba(23, 60, 75, .14), rgba(255, 255, 255, .18)); }
}

/* ---------- Listen mit Zeilen (Konten) ---------- */
.zeilen { margin: 0; padding: 0; list-style: none; }
.zeile { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: center; padding: .75rem 1rem; }
.zeile + .zeile { border-top: .5px solid var(--trenner); }
.zeile-text { display: grid; min-width: 0; line-height: 1.3; }
.zeile-text b { font-weight: 600; }
.zeile-text small { font-size: .8125rem; color: var(--text-2); overflow-wrap: anywhere; }
.zeile.gesperrt .zeile-text { opacity: .55; }
.zeile-aktionen { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.zeile-aktionen form { display: contents; }
.zeile-aktions form.inline { display: inline-flex; }
.zeile-aktionen form.inline { display: inline-flex; gap: .25rem; align-items: center; }
.zeile-aktionen select.auswahl { min-height: 2.25rem; padding: 0 .5rem; border: .5px solid var(--trenner); border-radius: .625rem; background: var(--flaeche); color: var(--text); font: inherit; font-size: .875rem; }
@media (min-width: 44rem) { .zeile { grid-template-columns: auto 1fr auto; } .zeile-aktionen { grid-column: 3; justify-content: flex-end; } }
.linkkasten { padding: .875rem 1.125rem; }
.linkkasten p { margin: 0 0 .5rem; }
.linkkasten .link { padding: .625rem .75rem; border-radius: .75rem; background: var(--fuellung); }

/* ---------- Notfälle und Tauben (0.2.0) ---------- */
.zaehler { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .75rem; }
.kopf-karte {
  display: grid; gap: .0625rem; min-width: 0; padding: .625rem .875rem; border-radius: 1rem; text-decoration: none; color: var(--text);
  background: var(--flaeche); box-shadow: var(--glas-kante), var(--glas-schatten); transition: transform 200ms var(--federnd);
}
.kopf-karte small { font-size: .75rem; line-height: 1.25; color: var(--text-2); }
.kopf-karte strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--petrol); }
.kopf-karte:active { transform: scale(.97); }
@media (max-width: 30rem) { .zaehler { grid-template-columns: 1fr 1fr; } .zaehler .kopf-karte:last-child { grid-column: 1 / -1; } }
.schnell { display: flex; gap: .5rem; }
.schnell input {
  flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: .875rem; background: var(--flaeche); box-shadow: var(--glas-kante), var(--glas-schatten);
  color: var(--text); font: inherit;
}
.schnell input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.schnell input::placeholder { color: var(--text-3); }
@media (max-width: 30rem) { .schnell { flex-direction: column; } }
.filterzeile { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .625rem; }
.knopf.aus { opacity: .35; pointer-events: none; }
.zeile-link { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; width: 100%; color: inherit; text-decoration: none; }
.zeile:has(.zeile-link) { display: block; padding: 0; }
.zeile-link { padding: .75rem 1rem; }
.zeile-link:active { background: var(--fuellung); }
@media (hover: hover) { .zeile-link:hover { background: var(--fuellung); } }
.zeile-link:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; border-radius: inherit; }
.stand { width: .75rem; height: .75rem; border-radius: 50%; background: var(--text-3); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); }
.stand-gemeldet { background: light-dark(#d9534a, #e4635a); }
.stand-versorgt { background: light-dark(#e3a21a, #f0b63a); }
.stand-abgeschlossen { background: light-dark(#3a9a67, #4db37c); }
.chevron { width: 1rem; height: 1rem; color: var(--text-3); }
.status.dringend { background: light-dark(rgba(217, 83, 74, .14), rgba(228, 99, 90, .25)); color: light-dark(#b3261e, #ffb4ad); vertical-align: middle; }
.fussnote.leer { padding: .75rem 1rem; border-radius: 1.125rem; background: var(--flaeche); box-shadow: var(--glas-kante); }
details.zuklapp summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; padding: .25rem .25rem .625rem; }
details.zuklapp summary::-webkit-details-marker { display: none; }
details.zuklapp summary::before { content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform 200ms var(--federnd); }
details.zuklapp[open] summary::before { transform: rotate(45deg); }
details.zuklapp summary h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--petrol); }
.feld.hoch { align-items: start; }
.feld textarea { width: 100%; min-height: 4.5rem; padding: .75rem 0; border: 0; outline: none; resize: vertical; background: transparent; color: var(--text); font: inherit; }
.feld textarea::placeholder { color: var(--text-3); }
.kommentar-form textarea {
  display: block; width: 100%; min-height: 3.5rem; padding: .75rem 1rem; border: 0; border-radius: .875rem; resize: vertical;
  background: var(--flaeche); box-shadow: var(--glas-kante), var(--glas-schatten); color: var(--text); font: inherit;
}
.kommentar-form textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.kommentar-form { margin-bottom: .75rem; }
.verlauf { margin: 0; padding: .25rem 0; list-style: none; }
.eintrag { padding: .625rem 1rem; }
.eintrag + .eintrag { border-top: .5px solid var(--trenner); }
.eintrag-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.eintrag small { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--text-2); }
.eintrag.system .eintrag-text { font-size: .9375rem; color: var(--text-2); }
.eintrag.system .eintrag-text::before { content: "↻ "; }
.suche { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; }
.suche input, .suche select.auswahl {
  min-width: 0; width: 100%; /* 0.2.2: sonst ragte die Zeile am iPhone 33 px über den Rand (Eigenbreite der Auswahl) */
  min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: .875rem; background: var(--flaeche); box-shadow: var(--glas-kante), var(--glas-schatten); color: var(--text); font: inherit;
}
.suche input:focus, .suche select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.suche .filterzeile { grid-column: 1 / -1; margin: 0; }
@media (max-width: 36rem) { .suche { grid-template-columns: 1fr 1fr; } .suche input { grid-column: 1 / -1; } }

/* ---------- Dienstplan (0.4.0) ---------- */
.wochen-nav { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 1.25rem; }
.wochen-nav form { display: contents; }
.tag-link { grid-template-columns: 4.25rem 1fr auto; align-items: start; }
.tag-link .tag { padding-top: .125rem; font-weight: 600; white-space: nowrap; }
.dienste { display: grid; gap: .125rem; min-width: 0; }
.dienst { font-size: .9375rem; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.dienst.offen { color: var(--rot); font-weight: 600; }
.dienst.erledigt { color: light-dark(#1f6b42, #a9ecc4); }
p.dienst { margin: 0 .25rem .625rem; }
.zeile.heute { box-shadow: inset .25rem 0 0 var(--akzent); }
.zeile.heute .tag { color: var(--akzent); }
.status.meins { background: light-dark(rgba(63, 127, 152, .16), rgba(111, 179, 204, .25)); color: var(--akzent-kraeftig); vertical-align: middle; }
.bereiche { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.feld input[type="checkbox"] { width: 1.375rem; height: 1.375rem; min-height: 0; justify-self: start; accent-color: var(--akzent); }
@media (max-width: 30rem) { .feld input[type="checkbox"] { margin: .25rem 0; } }

/* ---------- Fotos (0.5.0) ---------- */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.foto { display: grid; gap: .375rem; }
.foto a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 1rem; background: var(--fuellung); box-shadow: var(--glas-kante), var(--glas-schatten); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--federnd); }
@media (hover: hover) and (pointer: fine) { .foto a:hover img { transform: scale(1.04); } }
.foto a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.foto small { font-size: .8125rem; line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; }
.foto form { margin: 0; }
.feld input[type="file"] { min-height: 0; padding: .625rem 0; font-size: .9375rem; }
.foto-gross img { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto 1rem; border-radius: 1rem; box-shadow: var(--glas-schatten); }
.knopfzeile .fussnote { margin: 0; align-self: center; }

/* ---------- Schlichte Seiten (Anmelden, Einladung) ---------- */
body.schlicht main { display: grid; place-items: center; min-height: calc(100dvh - 4rem); }
.karte.schmal { width: 100%; max-width: 23rem; padding: 1.5rem 1.25rem; border-radius: 1.5rem; background: var(--flaeche); box-shadow: var(--glas-kante), var(--glas-schatten); animation: auftauchen 500ms var(--federnd) both; }
.karte.schmal h1 { text-align: center; font-size: 1.75rem; }
.karte.schmal .unter { margin: .375rem 0 1.25rem; text-align: center; font-size: .9375rem; }
.karte.schmal .felder { box-shadow: inset 0 0 0 .5px var(--trenner); background: light-dark(rgba(255, 255, 255, .7), rgba(0, 0, 0, .2)); }
.karte.schmal .fussnote { text-align: center; }
.zeichen { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 1.25rem; background: var(--akzent) url("zeichen.svg") center/66% no-repeat; box-shadow: 0 .5rem 1.5rem rgba(23, 60, 75, .25), inset 0 1px 0 rgba(255, 255, 255, .35); }

@keyframes auftauchen { from { opacity: 0; transform: translateY(.375rem); } }
@media (prefers-reduced-motion: reduce) {
  .kachelkarte, .karte.schmal, .meldung { animation: opacity 200ms ease both; }
  .k-liste { animation: none; }
  .knopf, .kachelkarte, .k-marke, .k-knopf, .k-konto, .k-nav-link { transition: none; }
}