/* ALM — geteiltes Apple-Style Designsystem (Dark + Whitemode).
   Jede Seite bindet diese Datei ein und ergänzt nur noch seitenspezifische
   Regeln. Alle Farben laufen über Custom Properties, damit ein einziger
   [data-theme="light"]-Block genügt, um jede Seite umzuschalten. */

:root {
  color-scheme: dark;
  --bg: #05070a;
  --ink: #f4f7fb;
  --muted: rgba(235, 241, 250, 0.56);
  --faint: rgba(235, 241, 250, 0.34);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-strong: rgba(255, 255, 255, 0.17);
  --glass: linear-gradient(158deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022));
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 60px -32px rgba(0, 0, 0, 0.95);
  --halo-opacity: 0.16;
  --aurora-opacity-1: 0.30;
  --aurora-opacity-2: 0.22;
  --radius: 28px;
  --radius-sm: 16px;

  --schiri: #32d74b;
  --mail: #0a84ff;
  --signal: #5e5ce6;
  --whatsapp: #2fb8b0;
  --kiberone: #ff9f0a;
  --schule: #ff375f;
  --schulmanager: var(--schule);
  --manuell: #bf5af2;
  /* Termine vom iPhone sind ebenfalls eigene Termine, nur auf dem Gerät
     statt in ALM eingetragen - deshalb dieselbe Farbe, unterschieden wird
     über das Etikett. */
  --iphone: var(--manuell);
  --heute: #ff453a;
  --wichtig: #ff9f0a;
  --spam: #ff453a;
  --ia4sp: #0a84ff;
  --sonstiges: #8b96a5;
  --todo: #0a84ff;
  --termin: #ff9f0a;
  --homework: #0a84ff;
  --exam: #ff453a;
  --event: #ff9f0a;
  --letter: #bf5af2;
  --message: #32d74b;
  --zugesagt: #32d74b;
  --abgesagt: #ff453a;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f2f2f7;
    --ink: #1c1c1e;
    --muted: rgba(60, 60, 67, 0.62);
    --faint: rgba(60, 60, 67, 0.42);
    --stroke: rgba(60, 60, 67, 0.13);
    --stroke-strong: rgba(60, 60, 67, 0.24);
    --glass: linear-gradient(158deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
    --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 46px -30px rgba(60, 60, 67, 0.28);
    --halo-opacity: 0.11;
    --aurora-opacity-1: 0.16;
    --aurora-opacity-2: 0.13;
    --whatsapp: #10817a;
    --sonstiges: #6c7280;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7;
  --ink: #1c1c1e;
  --muted: rgba(60, 60, 67, 0.62);
  --faint: rgba(60, 60, 67, 0.42);
  --stroke: rgba(60, 60, 67, 0.13);
  --stroke-strong: rgba(60, 60, 67, 0.24);
  --glass: linear-gradient(158deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 46px -30px rgba(60, 60, 67, 0.28);
  --halo-opacity: 0.11;
  --aurora-opacity-1: 0.16;
  --aurora-opacity-2: 0.13;
  --whatsapp: #10817a;
  --sonstiges: #6c7280;
}

* { box-sizing: border-box; }

html, body { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  /* dvh statt vh: auf dem iPhone waechst und schrumpft die Safari-Leiste
     beim Scrollen, 100vh rechnet dabei mit der groesseren Hoehe und laesst
     die Seite unten ueberstehen. */
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  transition: background-color 0.25s ease, color 0.25s ease;
  /* Sonst vergroessert iOS im Querformat einzelne Textbloecke eigenmaechtig. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- Aurora-Hintergrund ----------
   Waren zwei 720px-Kreise mit filter: blur(120px). Ein Blur-Filter zwingt den
   Browser, die Ebene erst in voller Groesse zu zeichnen und dann Pixel fuer
   Pixel zu verwischen - auf dem iPhone eine der teuersten Operationen
   ueberhaupt, und das hinter einer fixierten Ebene, die bei jedem Scrollen
   erneut zusammengesetzt wird. Zwei radiale Verlaeufe sehen genauso aus,
   werden aber einmal gerastert und danach nur noch kopiert. */
.aurora {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(480px 480px at 160px 40px,
      rgba(29, 78, 216, var(--aurora-opacity-1)), rgba(29, 78, 216, 0) 70%),
    radial-gradient(500px 500px at calc(100% - 210px) 100%,
      rgba(15, 118, 110, var(--aurora-opacity-2)), rgba(15, 118, 110, 0) 70%);
}

/* ---------- Grundgerüst ---------- */
.shell {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 3.5rem;
}
.shell.wide { max-width: 1240px; }

.pagebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.pagebar-left { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.pagebar h1 { margin: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.025em; }
.pagebar .sub { font-size: 0.82rem; color: var(--muted); }
a.back {
  color: var(--muted); font-size: 0.85rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
a.back:hover { color: var(--ink); }
.pagebar-right { display: flex; align-items: center; gap: 0.7rem; }

/* ---------- Theme-Umschalter ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
:root[data-theme="light"] .theme-toggle { background: rgba(0, 0, 0, 0.035); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle { background: rgba(0, 0, 0, 0.035); }
}
.theme-toggle:hover { color: var(--ink); border-color: var(--stroke-strong); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .i-moon { display: block; }
}

/* ---------- Karten ---------- */
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding: 1.35rem 1.45rem;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--glass);
  box-shadow: var(--card-shadow);
}
/* Der Akzent-Halo war ein Kreis mit filter: blur(70px) - pro Karte eine
   eigene, teuer zu rasternde Ebene. Als Verlauf kostet er nichts. */
.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(190px 190px at 50px 30px, var(--accent, #ffffff), transparent 72%);
  opacity: var(--halo-opacity);
}

/* backdrop-filter legt fuer jedes Element eine eigene Compositing-Ebene an,
   die bei jedem Frame neu aus dem Hintergrund gesampelt wird. Darunter liegt
   hier nur ein weicher Verlauf - es gibt also praktisch nichts zu verwischen,
   waehrend das Scrollen auf dem iPhone sichtbar darunter leidet. Auf grossen
   Zeigegeraeten bleibt der Effekt, dort faellt er nicht ins Gewicht. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .card {
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
  }
}
.card-head { display: flex; align-items: center; gap: 0.7rem; }
.card-head h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; }
.card-head .sub { margin: 0.12rem 0 0; font-size: 0.76rem; color: var(--faint); }
.card-head .spacer { flex: 1; }
.card-foot {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--stroke);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  font-size: 0.78rem;
}
.card-foot a { color: var(--muted); text-decoration: none; }
.card-foot a:hover { color: var(--ink); }

.glyph {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.glyph svg { width: 17px; height: 17px; color: var(--accent); }

.pill {
  display: inline-block;
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  white-space: nowrap;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.pill.plain { color: var(--faint); background: rgba(127, 127, 127, 0.12); font-weight: 500; }

/* ---------- Zeilenlisten (E-Mails, Chats, Schule, Kalender ...) ---------- */
.list { display: flex; flex-direction: column; gap: 0.6rem; }
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--glass);
  box-shadow: var(--card-shadow);
  /* Die Listenseiten zeigen bis zu 300 Zeilen. Ohne content-visibility legt
     der Browser jede davon sofort aus und zeichnet sie, obwohl auf einem
     iPhone-Bildschirm nur eine Handvoll sichtbar ist. contain-intrinsic-size
     merkt sich die einmal gemessene Hoehe, damit die Scrollleiste dabei
     nicht springt. Aeltere Browser ignorieren beides und rendern wie bisher. */
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
}
.row.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke)); }
.row.done { opacity: 0.55; }
.row .content { flex: 1; min-width: 0; }
.row .title, .row .summary, .row .subject {
  font-size: 0.93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row.done .title, .row.done .summary, .row.done .subject { text-decoration: line-through; }
.row .body, .row .location {
  font-size: 0.8rem; color: var(--faint); margin-top: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .meta { flex-shrink: 0; font-size: 0.75rem; color: var(--faint); text-align: right; line-height: 1.5; }
.row .meta .wann { color: var(--muted); }

/* Kategorie-Etikett in Zeilenlisten - bewusst .tag statt .badge genannt:
   index.html hat schon ein .badge für die runde Ungelesen-Blase im
   Kommunikations-Widget, ein gleichnamiges Rendering hier würde sich damit
   in der Kaskade beißen. */
.tag {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  min-width: 5.2rem;
  color: var(--c, var(--ink));
  background: color-mix(in srgb, var(--c, var(--ink)) 16%, transparent);
}

.empty { color: var(--faint); text-align: center; margin-top: 3rem; font-size: 0.9rem; }
.empty-section { color: var(--faint); font-size: 0.85rem; }

section.group { margin: 0 0 2rem; }
section.group h2 {
  font-size: 0.78rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
  display: flex; align-items: baseline; gap: 0.5rem;
}
section.group h2 .zahl { font-size: 0.78rem; color: var(--faint); text-transform: none; letter-spacing: 0; }
section.group h3 { font-size: 0.85rem; color: var(--muted); margin: 1.25rem 0 0.5rem; font-weight: 600; }
section.group h3:first-of-type { margin-top: 0; }

/* ---------- ToDo-Häkchen ---------- */
.check {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.6px solid var(--stroke-strong);
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.check svg { width: 14px; height: 14px; }
.check[data-done="true"] {
  background: var(--c, var(--schiri));
  border-color: var(--c, var(--schiri));
  color: #fff;
}
.check:hover { border-color: var(--c, var(--ink)); }

/* ---------- Zu-/Absage (RSVP) ---------- */
.rsvp { display: inline-flex; gap: 0.3rem; flex-shrink: 0; }
.rsvp button {
  border: 1px solid var(--stroke);
  background: rgba(127, 127, 127, 0.08);
  color: var(--muted);
  font-size: 0.72rem; font-weight: 600;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rsvp button:hover { color: var(--ink); border-color: var(--stroke-strong); }
.rsvp button.active[data-status="zugesagt"] { background: color-mix(in srgb, var(--zugesagt) 22%, transparent); color: var(--zugesagt); border-color: color-mix(in srgb, var(--zugesagt) 45%, transparent); }
.rsvp button.active[data-status="abgesagt"] { background: color-mix(in srgb, var(--abgesagt) 22%, transparent); color: var(--abgesagt); border-color: color-mix(in srgb, var(--abgesagt) 45%, transparent); }

/* ---------- Monatsraster + Agenda (Dashboard-Widget & /kalender.html) ---------- */
.kalender { display: flex; gap: 1.4rem; }
.monat { flex: 1.35; min-width: 0; display: flex; flex-direction: column; }
.monat-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.monat-nav .label { font-size: 0.85rem; font-weight: 600; }
.monat-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--stroke);
}
.monat-nav a:hover { color: var(--ink); border-color: var(--stroke-strong); }
.monat-nav a svg { width: 14px; height: 14px; }
.weekdays, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; }
.weekdays div {
  text-align: center; font-size: 0.68rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 0.35rem;
}
.day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.22rem;
  border-radius: 12px;
  font-size: 0.82rem;
  padding: 0.35rem 0;
  text-decoration: none;
  color: inherit;
}
.days a.day { cursor: pointer; }
.days a.day:hover { background: rgba(127, 127, 127, 0.08); }
.day.outside { color: var(--faint); opacity: 0.55; }
.day.selected { background: color-mix(in srgb, var(--mail) 16%, transparent); }
.day .num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.day.today .num { background: var(--heute); color: #fff; font-weight: 600; }
.day .dots { display: flex; gap: 3px; height: 5px; }
.day .dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.dots i.schiri, .stripe.schiri, .tag.schiri { background: var(--schiri); }
.dots i.mail, .stripe.mail, .tag.mail { background: var(--mail); }
.dots i.signal, .stripe.signal, .tag.signal { background: var(--signal); }
.dots i.whatsapp, .stripe.whatsapp, .tag.whatsapp { background: var(--whatsapp); }
.dots i.schulmanager, .stripe.schulmanager, .tag.schulmanager { background: var(--schule); }
.dots i.manuell, .stripe.manuell, .tag.manuell { background: var(--manuell); }
.dots i.iphone, .stripe.iphone, .tag.iphone { background: var(--iphone); }

.agenda {
  flex: 1; min-width: 0;
  border-left: 1px solid var(--stroke);
  padding-left: 1.3rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.agenda h3 {
  margin: 0 0 0.15rem; font-size: 0.72rem; font-weight: 600;
  color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em;
}
.termin { display: flex; gap: 0.7rem; align-items: stretch; }
.termin .stripe { width: 3px; border-radius: 999px; flex-shrink: 0; }
.termin .t { min-width: 0; flex: 1; }
.termin .t b {
  display: block; font-size: 0.82rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.termin .t span { font-size: 0.73rem; color: var(--faint); }

/* ---------- Segmentierte Umschalter (z.B. Spiel-Ansichten) ---------- */
.segmente {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.22rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(127, 127, 127, 0.1);
}
.segmente a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--muted); text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.segmente a:hover { color: var(--ink); }
.segmente a.aktiv {
  color: var(--ink);
  background: var(--glass);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.segmente a .zahl { font-size: 0.72rem; font-weight: 500; color: var(--faint); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(127, 127, 127, 0.1);
  color: var(--muted);
  font-size: 0.78rem; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.knopf:hover { color: var(--ink); border-color: var(--stroke-strong); }
.knopf svg { width: 14px; height: 14px; }
.knopf.primaer {
  color: #fff;
  background: var(--mail);
  border-color: transparent;
}
.knopf.primaer:hover { color: #fff; filter: brightness(1.1); }
.knopf.gefahr { color: var(--abgesagt); border-color: color-mix(in srgb, var(--abgesagt) 35%, transparent); }
.knopf.gefahr:hover { color: var(--abgesagt); background: color-mix(in srgb, var(--abgesagt) 14%, transparent); }
/* Kleiner Icon-Knopf, wie er in Zeilenlisten neben dem Inhalt steht. */
.knopf.icon { width: 30px; height: 30px; padding: 0; border-radius: 50%; flex-shrink: 0; }

/* ---------- Meldungen ---------- */
.meldung {
  margin: 0 0 1.1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  color: var(--ink);
}
.meldung.fehler { --c: var(--abgesagt); }
.meldung.hinweis { --c: var(--wichtig); }

/* ---------- Dialog (Termin anlegen / bearbeiten) ---------- */
dialog.blatt {
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.5rem 1.5rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
dialog.blatt::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); }
dialog.blatt h2 { margin: 0 0 1.1rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }

.feld { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
.feld label { font-size: 0.75rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; }
.feld input, .feld textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(127, 127, 127, 0.1);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
}
.feld textarea { resize: vertical; min-height: 4.2rem; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--mail); }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.schalter {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.85rem;
  font-size: 0.85rem; color: var(--muted); cursor: pointer;
}
.schalter input { width: 1.05rem; height: 1.05rem; accent-color: var(--mail); }
.dialog-fuss { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.2rem; }
.dialog-fuss .spacer { flex: 1; }

:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 3px; border-radius: 12px; }

/* ---------- Schmale Bildschirme / iPhone ---------- */

@media (max-width: 760px) {
  /* env(safe-area-inset-*) zusammen mit viewport-fit=cover im <head>: die
     Seite darf bis unter Notch und Home-Indikator laufen, haelt Inhalte aber
     davon frei. Ohne das klebt im Querformat der Text an der Kameraleiste. */
  .shell {
    padding-top: 1.5rem;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
  }
  .kalender { flex-direction: column; gap: 1.1rem; }
  .agenda { border-left: 0; border-top: 1px solid var(--stroke); padding: 1.1rem 0 0; }
  .card { padding: 1.15rem 1.1rem; border-radius: 22px; }
  .pagebar { margin-bottom: 1.2rem; }
  .pagebar h1 { font-size: 1.28rem; }
  /* Der Ansichtsumschalter auf /schiedsrichter passte in einer Zeile nicht
     mehr neben die Ueberschrift und rutschte halb aus dem Bild. */
  .segmente { display: flex; width: 100%; }
  .segmente a { flex: 1; justify-content: center; padding: 0.4rem 0.5rem; }
}

@media (max-width: 560px) {
  /* Eine Listenzeile ist auf 390 Punkten Breite zu eng fuer Etikett, Text,
     Zeitpunkt und Knoepfe nebeneinander - der Text blieb auf ein paar Woerter
     zusammengequetscht. Sie bricht jetzt um: Etikett und Zeitpunkt oben, der
     Text darunter ueber die volle Breite, Bedienelemente zuletzt. */
  .row {
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    padding: 0.8rem 0.9rem;
    contain-intrinsic-size: auto 118px;
  }
  .row .content { flex: 1 1 100%; order: 2; }
  .row .tag, .row .check { order: 0; }
  .row .meta { order: 1; margin-left: auto; text-align: right; }
  .row .rsvp, .row .aktionen { order: 3; }
  .row .rsvp { margin-left: 0; }
  /* Statt einer abgeschnittenen Zeile lieber zwei ganze - auf dem Handy war
     von Betreff und Zusammenfassung sonst kaum etwas zu lesen. */
  .row .title, .row .summary, .row .subject,
  .row .body, .row .location {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .tag { min-width: 4.4rem; }

  /* Unter 16px zoomt iOS beim Antippen eines Eingabefelds in die Seite hinein
     und kehrt danach nicht von selbst zurueck. */
  .feld input, .feld textarea { font-size: 16px; }
  .feldpaar { grid-template-columns: 1fr; }
  /* Der Termin-Dialog als Blatt von unten - so wie iOS es ueberall macht. */
  dialog.blatt {
    width: 100%;
    max-width: none;
    margin: auto auto 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(1.35rem + env(safe-area-inset-bottom));
  }
}

@media (pointer: coarse) {
  /* Apples Richtwert fuer Tippziele sind 44 Punkte. Die Knoepfe lagen bei 26
     bis 38 und wurden auf dem iPhone regelmaessig danebengetippt. Wo Platz
     ist, wachsen sie sichtbar; wo sie klein bleiben muessen, damit die Zeile
     nicht auseinanderfaellt, vergroessert ein unsichtbares ::after nur die
     Trefferflaeche. Beim Haekchen und den runden Icon-Knoepfen steht rundum
     genug Abstand, dass sich dabei nichts ueberlappt. */
  .check { width: 30px; height: 30px; position: relative; }
  .check::after { content: ""; position: absolute; inset: -7px; }
  .knopf { padding: 0.55rem 1rem; }
  .knopf.icon { width: 38px; height: 38px; position: relative; }
  .knopf.icon::after { content: ""; position: absolute; inset: -3px; }
  .theme-toggle { width: 44px; height: 44px; }
  .monat-nav a { width: 44px; height: 44px; }
  .rsvp button { padding: 0.55rem 1rem; }
  .day { padding: 0.5rem 0; min-height: 44px; }
  a.back { padding: 0.35rem 0; }

  /* Auf Touch bleibt :hover nach dem Tippen haengen - die angetippte Zeile
     sah dann dauerhaft ausgewaehlt aus. Kurzes Zusammenziehen beim Druecken
     gibt die Rueckmeldung stattdessen im richtigen Moment. */
  .days a.day:hover, .segmente a:hover { background: none; }
  a, button { -webkit-tap-highlight-color: transparent; }
  .knopf:active, .rsvp button:active, .check:active, .theme-toggle:active { transform: scale(0.96); }
}

/* "Transparenz reduzieren" in den iOS-Bedienungshilfen: dann keine Verlaeufe
   und kein Glas, sondern schlicht gefuellte Flaechen. Spart nebenbei genau
   die Arbeit, die das Zeichnen teuer macht. */
@media (prefers-reduced-transparency: reduce) {
  .aurora { display: none; }
  .card::before { display: none; }
  .card, .row { background: color-mix(in srgb, var(--ink) 7%, var(--bg)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}