/* StudiKal – Gestaltung.
   Aufbau: 1 Tokens · 2 Grundlagen · 3 Layout (Kopf, Navigation, Inhalt) · 4 Bausteine (Knöpfe, Felder,
   Schalter, Karten, Hinweise, Abzeichen, Meldungen) · 5 Seiten (Start, Willkommen, Termine, Regeln,
   Kalender, Konto, Fehler) · 6 Hilfsklassen und Bewegung.
   Keine Inline-Styles (Content-Security-Policy); Zustände hängen an data-Attributen. */

/* 1 Tokens ------------------------------------------------------------------- */

:root {
  color-scheme: light dark;
  --flaeche: #FAF8F3;
  --karte: #FFFFFF;
  --karte-2: #FFFDF9;
  --karte-3: #F3F0E9;          /* leicht abgesetzt: Segment-Hintergrund, Kopfzeile */
  --text: #1F1D1A;
  --text-2: #6B665E;           /* gedämpft, 5.4:1 auf der Fläche */
  --linie: #E8E3D9;
  --rahmen: #8F887C;           /* Grenzen von Bedienelementen, ≥ 3:1 */
  --akzent: #2F6B58;
  --akzent-text: #FFFFFF;      /* Text auf Akzentfläche, 6.2:1 */
  --akzent-flaeche: #E6EDEB;   /* Pille, Hervorhebung */
  --akzent-hover: #27594A;
  --fehler: #B3261E;
  --fehler-text: #FFFFFF;
  --fehler-flaeche: #F9EEED;
  --fehler-hover: #981F19;
  --schatten: 0 1px 2px rgba(0, 0, 0, .04);
  --fokus: var(--akzent);
  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231F1D1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kurs-0: #B4553F;
  --kurs-1: #A8761A;
  --kurs-2: #4F7A2F;
  --kurs-3: #2E8A8A;
  --kurs-4: #3F74C2;
  --kurs-5: #7A5FBF;
  --kurs-6: #C2588F;
  --kurs-7: #7E7366;

  --radius: 12px;
  --radius-feld: 9px;
  --inhalt-breite: 880px;
  --nav-hoehe: 60px;
  --dauer: 160ms;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --flaeche: #1B1A18;
    --karte: #242320;
    --karte-2: #262521;
    --karte-3: #2C2B27;
    --text: #ECE9E2;
    --text-2: #A9A49B;          /* 7:1 auf der Fläche */
    --linie: #34322E;
    --rahmen: #7A746B;
    --akzent: #7FC4AC;
    --akzent-text: #1B1A18;     /* 8.6:1 */
    --akzent-flaeche: #333D36;
    --akzent-hover: #93D0BB;
    --fehler: #F08C84;
    --fehler-text: #1B1A18;
    --fehler-flaeche: #3A2A28;
    --fehler-hover: #F5A099;
    --schatten: 0 1px 2px rgba(0, 0, 0, .25);
    --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23ECE9E2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --kurs-0: #E0836B;
    --kurs-1: #E0B04A;
    --kurs-2: #8FC262;
    --kurs-3: #5BC2C2;
    --kurs-4: #7FA9EC;
    --kurs-5: #B39BE8;
    --kurs-6: #EC8DBE;
    --kurs-7: #B8ACA0;
  }
}

/* 2 Grundlagen ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  background: var(--flaeche);
  color: var(--text);
  scroll-padding-top: 16px;
  /* Fokus und Sprungziele nicht hinter der unteren Navigation verstecken */
  scroll-padding-bottom: calc(var(--nav-hoehe) + 16px + env(safe-area-inset-bottom));
}

@media (min-width: 760px) {
  html { font-size: 17px; scroll-padding-top: 72px; scroll-padding-bottom: 16px; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--flaeche);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }

p { margin: 0; }
p + p { margin-top: 8px; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent-hover); }

strong { font-weight: 600; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

ul, ol { margin: 0; padding: 0; }
ul.terminliste, ul.regel-karten, ul.kurs-regeln, ul.kurznamen { list-style: none; }

details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--akzent-flaeche); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* 3 Layout ------------------------------------------------------------------ */

.sprung {
  position: absolute; left: 16px; top: -48px;
  background: var(--akzent); color: var(--akzent-text);
  padding: 8px 12px; border-radius: 8px; z-index: 30;
}
.sprung:focus { top: 12px; }

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.kopf-innen {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: 0 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.marke {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none;
  font-weight: 650; font-size: 1.125rem; letter-spacing: -0.01em;
  min-height: 44px;
}
.marke-zeichen { color: var(--akzent); flex: none; }

/* Navigation: am Handy unten fixiert, ab 760 px schlanke Leiste oben. */
.navigation {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--karte);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}

.navigation a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--nav-hoehe);
  padding: 6px 4px;
  color: var(--text-2);
  text-decoration: none;
  font-size: .75rem; font-weight: 500;
  transition: color var(--dauer) ease, background var(--dauer) ease;
}
.navigation a:hover { color: var(--text); }
.navigation a[aria-current="page"] { color: var(--akzent); font-weight: 600; }
.navigation a:focus-visible { outline-offset: -3px; }

.inhalt {
  width: 100%;
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: 24px 16px calc(var(--nav-hoehe) + 32px + env(safe-area-inset-bottom));
  flex: 1;
}
.inhalt:focus { outline: none; }

body[data-seite="start"] .inhalt { padding-bottom: 48px; }

@media (min-width: 760px) {
  .kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--flaeche) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .navigation {
    position: static; display: flex; gap: 4px;
    background: transparent; border: 0; padding: 0;
  }
  .navigation a {
    flex-direction: row; gap: 8px;
    min-height: 44px; padding: 0 12px;
    border-radius: 999px;
    font-size: .95rem;
  }
  .navigation a svg { width: 18px; height: 18px; }
  .navigation a[aria-current="page"] { background: var(--akzent-flaeche); }
  .navigation a:hover:not([aria-current="page"]) { background: var(--karte-3); }
  .inhalt { padding: 40px 24px 64px; }
}

.seitenkopf { margin-bottom: 24px; }
.seitenkopf h1 { margin-bottom: 8px; }
.einleitung { color: var(--text-2); max-width: 60ch; }
.ueberzeile { color: var(--akzent); font-size: .875rem; font-weight: 600; letter-spacing: .02em; margin-bottom: 4px; }
.abschnitt { margin-top: 32px; }
.abschnitt > h2 { margin-bottom: 12px; }
.abschnitt > h2 + .gedaempft { margin-top: -6px; margin-bottom: 12px; }
.karte.abschnitt > h2 { margin-bottom: 8px; }
.karte.abschnitt > h2 + p { margin-top: 0; }
.karte.abschnitt > p + p { margin-top: 8px; }

/* 4 Bausteine ---------------------------------------------------------------- */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 20px;
}
.karte-ruhig { background: var(--karte-2); }

@media (min-width: 760px) {
  .karte { padding: 24px; }
}

.gedaempft { color: var(--text-2); }
.klein { font-size: .875rem; }
.kleingedruckt { color: var(--text-2); font-size: .875rem; margin-top: 32px; text-align: center; }
.trenner { color: var(--text-2); margin: 0 2px; }

/* Knöpfe */
.knopf, .knopf-text {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 16px;
  border-radius: var(--radius-feld);
  border: 1px solid var(--rahmen);
  background: var(--karte); color: var(--text);
  font-weight: 500; text-decoration: none; line-height: 1.25; text-align: center;
  white-space: normal;
  transition: background var(--dauer) ease, border-color var(--dauer) ease, color var(--dauer) ease, transform var(--dauer) ease;
}
.knopf:hover { background: var(--karte-3); color: var(--text); border-color: var(--text-2); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled, .knopf[aria-busy="true"], .knopf-text:disabled { opacity: .6; cursor: default; transform: none; }

.knopf-primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.knopf-primaer:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); color: var(--akzent-text); }

.knopf-gefahr { background: var(--fehler); color: var(--fehler-text); border-color: var(--fehler); }
.knopf-gefahr:hover { background: var(--fehler-hover); border-color: var(--fehler-hover); color: var(--fehler-text); }

.knopf-leise { background: transparent; border-color: transparent; color: var(--akzent); }
.knopf-leise:hover { background: var(--akzent-flaeche); border-color: transparent; color: var(--akzent-hover); }

.knopf-klein { min-height: 36px; padding: 4px 12px; font-size: .9rem; }

.knopf-text {
  border: 0; background: transparent; color: var(--akzent);
  padding: 8px 6px; min-height: 44px; font-weight: 500;
  border-radius: 8px;
}
.knopf-text:hover { background: var(--akzent-flaeche); color: var(--akzent-hover); }

.knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.knopfzeile form { display: contents; }

/* Felder */
.feld {
  width: 100%;
  min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--rahmen); border-radius: var(--radius-feld);
  background: var(--karte); color: var(--text);
  transition: border-color var(--dauer) ease, box-shadow var(--dauer) ease, background var(--dauer) ease;
}
.feld:hover { border-color: var(--text-2); }
.feld:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; border-color: var(--akzent); }
.feld::placeholder { color: var(--text-2); opacity: .8; }
.feld[readonly] { background: var(--karte-3); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.feld[aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 1px var(--fehler) inset; }
.feld[aria-invalid="true"]:focus-visible { outline-color: var(--fehler); }
.feld[data-zustand="ok"] { border-color: var(--akzent); }
.feld-gross { font-size: 1.0625rem; }
.feld-kurz { max-width: 16rem; }
.feld-zahl { max-width: 7rem; }

select.feld {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: var(--chevron);
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
  cursor: pointer;
}
.feld-kompakt { width: auto; min-height: 40px; padding: 6px 10px; font-size: .95rem; }
select.feld-kompakt { padding-right: 32px; }
input[type="date"].feld, input[type="time"].feld { min-width: 0; }

.formular label:not(.kaestchen):not(.schalter) { display: block; font-weight: 600; margin-bottom: 6px; }
.formular .feld + .feld-meldung, .formular .feld + .feld-hilfe { margin-top: 8px; }
.formular .knopf { margin-top: 12px; }

.feld-meldung { color: var(--fehler); font-weight: 500; min-height: 0; }
.feld-meldung:empty { display: none; }
.feld-meldung[data-zustand="ok"] { color: var(--akzent); }
.feld-hilfe { color: var(--text-2); font-size: .875rem; margin-top: 6px; }

.feldgruppe { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; }
.feldgruppe > span { font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.feldgruppe-breit { flex: 1 1 100%; }
.feldgruppe-breit select { max-width: 24rem; }

/* Eckiges Kästchen (Konto: Löschen bestätigen) */
.kaestchen { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.kaestchen input {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 0; flex: none;
  border: 2px solid var(--rahmen); border-radius: 6px; background: var(--karte); position: relative;
  transition: background var(--dauer) ease, border-color var(--dauer) ease;
}
.kaestchen input:checked { background: var(--akzent); border-color: var(--akzent); }
.kaestchen input::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid var(--akzent-text); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) scale(0);
  transition: transform var(--dauer) ease;
}
.kaestchen input:checked::after { transform: rotate(45deg) scale(1); }

/* Schalter („To-do in Google“): echte Checkbox mit role="switch" */
.schalter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: .95rem; font-weight: 500; }
.schalter input {
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 24px; margin: 0; flex: none;
  border-radius: 999px; border: 1px solid var(--rahmen);
  background: var(--karte-3); position: relative; cursor: pointer;
  transition: background var(--dauer) ease, border-color var(--dauer) ease;
}
.schalter input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--rahmen);
  transition: transform var(--dauer) ease, background var(--dauer) ease;
}
.schalter input:checked { background: var(--akzent); border-color: var(--akzent); }
.schalter input:checked::before { background: var(--akzent-text); transform: translateX(16px); }
.schalter input:hover { border-color: var(--akzent); }
.schalter-feld { align-self: end; }

/* Hinweise */
.hinweis {
  background: var(--karte-2); border: 1px solid var(--linie); border-left: 3px solid var(--akzent);
  border-radius: 10px; padding: 12px 16px; margin: 0 0 16px;
  color: var(--text); font-size: .95rem;
}
.hinweis-fehler { border-left-color: var(--fehler); }
.hinweis-demo, .hinweis-moodle { color: var(--text); }
.hinweis-regeln { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.hinweis-knoepfe { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.hinweis-zeile { display: block; margin-top: 4px; }
.karten-hinweis { margin-top: 12px; }
.hinweisliste { margin: 16px 0 0; padding-left: 20px; color: var(--text-2); font-size: .95rem; }
.hinweisliste li + li { margin-top: 6px; }

.leer { color: var(--text-2); }
.leer strong { color: var(--text); display: block; margin-bottom: 2px; }

/* Abzeichen, Pillen, Punkte */
.abzeichen {
  display: inline-block; vertical-align: middle;
  font-size: .75rem; font-weight: 600; line-height: 1.4;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--linie); color: var(--text-2); background: var(--karte-3);
}
.abzeichen-neu { background: var(--akzent-flaeche); color: var(--akzent); border-color: transparent; }

.kurs-punkt {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-2); margin-right: 6px; vertical-align: 0; flex: none;
}
.kurs-0 { background: var(--kurs-0); } .kurs-1 { background: var(--kurs-1); }
.kurs-2 { background: var(--kurs-2); } .kurs-3 { background: var(--kurs-3); }
.kurs-4 { background: var(--kurs-4); } .kurs-5 { background: var(--kurs-5); }
.kurs-6 { background: var(--kurs-6); } .kurs-7 { background: var(--kurs-7); }

.status-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); margin-right: 6px; }
.status-punkt-aus { background: var(--fehler); }

/* Link-Feld mit Kopierknopf */
.link-feld { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.link-feld .feld { flex: 1 1 240px; }
.link-feld .knopf { flex: none; min-width: 7.5rem; }
.link-feld .knopf[data-zustand="kopiert"] { border-color: var(--akzent); color: var(--akzent); }

/* Aufklappbereiche */
.aufklapp { margin-top: 16px; border-top: 1px solid var(--linie); padding-top: 12px; }
.aufklapp > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; color: var(--akzent); list-style: none; }
.aufklapp > summary::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-left: 4px; transition: transform var(--dauer) ease; }
.aufklapp[open] > summary::before { transform: rotate(45deg); }
.anleitungsliste { padding-left: 20px; color: var(--text-2); font-size: .95rem; }
.anleitungsliste li + li { margin-top: 8px; }
.anleitungsliste strong { color: var(--text); }

/* Meldungen (Gespeichert · Rückgängig) */
.meldungen {
  position: fixed; left: 16px; right: 16px; z-index: 40;
  bottom: calc(var(--nav-hoehe) + 16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
body[data-seite="start"] .meldungen { bottom: 16px; }
.meldung {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 12px;
  max-width: 100%;
  background: var(--text); color: var(--flaeche);
  padding: 8px 8px 8px 16px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  font-size: .95rem;
  animation: meldung-auf var(--dauer) ease;
}
.meldung-fehler { background: var(--fehler); color: var(--fehler-text); }
.meldung button {
  background: transparent; border: 0; color: inherit; font-weight: 600;
  min-height: 36px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.meldung button:hover { background: rgba(255, 255, 255, .14); }
.meldung button:focus-visible { outline-color: var(--flaeche); }
@media (min-width: 760px) {
  .meldungen { bottom: 24px; }
}
@keyframes meldung-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Vorschauzeile */
.vorschau { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); font-size: .9rem; line-height: 1.45; }
.vorschau-icon { flex: none; margin-top: .2em; }
.vorschau-inhalt { min-width: 0; }
.vorschau-wort { color: var(--text-2); }
.vorschau [data-feld="vorschau-text"] { color: var(--text); }

/* 5 Seiten --------------------------------------------------------------------- */

/* Start: zuerst und groß das Feld für den Moodle-Link */
.start { max-width: 720px; padding-top: 8px; }
.start h1 { max-width: 18ch; margin-bottom: 12px; font-size: clamp(2rem, 5vw, 2.75rem); }
.start .einleitung { font-size: 1.0625rem; margin-bottom: 24px; }
.start-weiter { margin-bottom: 20px; }
.start-label { display: block; font-weight: 600; font-size: 1.0625rem; margin-bottom: 10px; }
.start-eingabe { display: flex; flex-wrap: wrap; gap: 10px; }
.start-eingabe .feld { flex: 1 1 320px; min-height: 52px; }
.knopf-gross { min-height: 52px; padding: 10px 22px; font-size: 1.0625rem; font-weight: 600; }
.start-eingabe .knopf { flex: 0 0 auto; }
.start-formular .feld-meldung { margin-top: 10px; }
.start-formular .feld-hilfe { margin-top: 10px; }
.moodle-anleitung { margin-top: 14px; }
.moodle-anleitung .anleitung { margin-top: 4px; }
.formular .moodle-anleitung { margin: 4px 0 12px; padding-top: 4px; }
.anleitung { padding-left: 20px; color: var(--text-2); }
.anleitung li { padding-left: 4px; }
.anleitung li + li { margin-top: 6px; }
.anleitung strong { color: var(--text); }
.start-nebenwege { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding-left: 4px; }
.start-nebenwege form, .start-nebenwege p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; }
@media (max-width: 599px) {
  .start-eingabe .knopf { flex: 1 1 100%; }
}

/* Willkommen */
.willkommen-weiter { margin: 0 0 32px; }

/* Kalender-Vorschau (Positionen: raster.css) */
.kv { --achse: 44px; --viertel: 8px; --leiste: 22px; padding: 16px 16px 12px; margin: 0 0 32px; }
.kv-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kv-ueberschrift { flex: 1; min-width: 0; }
.kv-ueberschrift h2 { font-size: 1.25rem; }
.kv-unterzeile { color: var(--text-2); font-size: .875rem; margin-top: 2px; }
.kv-zeitraum { font-variant-numeric: tabular-nums; }
.kv-nav { display: flex; flex: none; gap: 6px; }
.kv-nav .knopf { min-height: 44px; min-width: 44px; padding: 4px 12px; }
.kv-nav .kv-pfeil { padding: 0; }

.kv-raster { border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: var(--karte); scroll-margin-top: 72px; }
.kv-tage, .kv-ganztags, .kv-zeit { display: grid; grid-template-columns: var(--achse) repeat(7, minmax(0, 1fr)); }
.kv-tage { background: var(--karte-2); border-bottom: 1px solid var(--linie); }
.kv-tag-kopf { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px; border-left: 1px solid var(--linie); font-size: .75rem; color: var(--text-2); }
.kv-wtag { font-weight: 600; }
.kv-datum { width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; font-size: 1rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.kv-tag-kopf.heute .kv-wtag { color: var(--akzent); }
.kv-tag-kopf.heute .kv-datum { background: var(--akzent); color: var(--akzent-text); }
.kv-tag-kopf.vergangen .kv-datum { color: var(--text-2); font-weight: 500; }

.kv-ganztags { row-gap: 2px; padding: 3px 0; border-bottom: 1px solid var(--linie); }
.kv-ganztags::before {
  content: ""; grid-column: 2 / -1; grid-row: 1 / -1; margin: -3px 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--linie) 1px, transparent 1px); background-size: calc(100% / 7) 100%;
}
.kv-achse-text { grid-column: 1; grid-row: 1 / -1; padding: 3px 6px 0 2px; text-align: right; font-size: .6875rem; line-height: 1.15; color: var(--text-2); }

.kv-eintrag {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden;
  color: var(--text); text-decoration: none; font-size: .75rem; font-weight: 500; line-height: 1.2;
  background: var(--akzent-flaeche); border-left: 3px solid var(--akzent); border-radius: 5px;
  transition: box-shadow var(--dauer) ease, background var(--dauer) ease;
}
.kv-eintrag:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--akzent); }
.kv-eintrag:focus-visible { outline-offset: 0; z-index: 2; }
.kv-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-eintrag .kurs-punkt { width: 7px; height: 7px; margin-right: 0; }
.kv-leiste { margin: 0 2px; padding: 0 6px; }
.kv-leiste.weiter-links { margin-left: 0; border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.kv-leiste.weiter-rechts { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.kv-leiste.aufgabe { background: var(--karte); border: 1px solid var(--akzent); color: var(--akzent); }
.kv-aufgabe-icon { flex: none; color: var(--akzent); }
.kv-mit-aufgabe { margin-left: auto; }
.kv-eintrag.erledigt { opacity: .6; }
.kv-eintrag.erledigt .kv-text { text-decoration: line-through; }

.kv-achse, .kv-spalte { display: grid; grid-template-rows: repeat(var(--zeilen), var(--viertel)); }
.kv-spalte {
  grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 0 1px;
  border-left: 1px solid var(--linie);
  background-image: linear-gradient(to bottom, var(--linie) 1px, transparent 1px); background-size: 100% calc(var(--viertel) * 4);
}
.kv-spalte.heute { background-color: color-mix(in srgb, var(--akzent-flaeche) 40%, transparent); }
.kv-stunde { grid-column: 1; align-self: start; padding-right: 6px; text-align: right; font-size: .6875rem; line-height: 1; color: var(--text-2); font-variant-numeric: tabular-nums; transform: translateY(-50%); }
.kv-stunde.z-1 { transform: none; padding-top: 2px; }
.kv-block { margin: 1px; padding: 3px 5px; align-items: flex-start; }
.kv-block .kv-text { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.kv-block.kurz .kv-text { -webkit-line-clamp: 1; }
.kv-uhr { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Frist ohne Dauer („Wie in Moodle“): nur ein dünner Strich – leicht zu übersehen. */
.kv-block.strich {
  align-self: start; margin: 0; padding: 1px 2px 0; overflow: visible;
  background: transparent; border: 0; border-top: 2px solid var(--akzent); border-radius: 0;
  font-size: .625rem; color: var(--text-2);
}
.kv-block.strich .kv-text { -webkit-line-clamp: 1; }

.kv-leer { margin-top: 10px; color: var(--text-2); }
.kv-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: .8125rem; color: var(--text-2); }
.kv-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.kv-muster { display: inline-block; width: 18px; height: 10px; border-radius: 3px; background: var(--akzent-flaeche); border-left: 3px solid var(--akzent); }
.kv-muster-block { width: 12px; height: 14px; }
.kv-muster-strich { height: 0; background: none; border: 0; border-top: 2px solid var(--akzent); border-radius: 0; }
.kv-tipp { flex-basis: 100%; }

@media (max-width: 599px) {
  .kv { --achse: 24px; --viertel: 6px; --leiste: 20px; padding: 12px 10px 10px; }
  .kv-ueberschrift h2 { font-size: 1.125rem; }
  .kv-nav { gap: 4px; }
  .kv-nav .knopf:not(.kv-pfeil) { padding: 4px 10px; }
  .kv-raster { margin: 0 -2px; }
  .kv-tag-kopf { font-size: .6875rem; padding: 4px 0; }
  .kv-datum { width: 24px; height: 24px; line-height: 24px; font-size: .875rem; }
  .kv-achse-text { visibility: hidden; }
  .kv-stunde { font-size: .625rem; padding-right: 3px; }
  .kv-eintrag { font-size: .625rem; border-left-width: 2px; border-radius: 4px; gap: 2px; }
  .kv-leiste { margin: 0 1px; padding: 0 3px; }
  .kv-eintrag .kurs-punkt, .kv-leiste.aufgabe .kv-aufgabe-icon { display: none; }
  .kv-mit-aufgabe { width: 9px; height: 9px; }
  .kv-block { padding: 2px 2px; }
  .kv-uhr { display: none; }
}

/* Termine: Status oben */
.status { padding: 6px 16px; margin-bottom: 16px; }
.status-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; }
.status-zeile + .status-zeile { border-top: 1px solid var(--linie); }
.status-zeichen {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--karte-3); color: var(--text-2); font-weight: 700; font-size: .9rem;
}
.status-ok { background: var(--akzent-flaeche); color: var(--akzent); }
.status-laeuft { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--akzent); border-right-color: transparent; animation: drehen 900ms linear infinite; }
.status-achtung { background: var(--fehler-flaeche); color: var(--fehler); }
.status-text { flex: 1 1 220px; min-width: 0; font-size: .95rem; }
.status-moodle .status-text { font-size: .9rem; }
.status .knopf-text { min-height: 40px; font-size: .9rem; }
.stand-ergebnis { margin-left: 4px; }
.stand-ergebnis[data-zustand="fehler"] { color: var(--fehler); }
.stand-ergebnis:empty { display: none; }

/* Termine: Liste – jede Zeile ist ein Knopf, der den Editor öffnet */
.liste-titel { font-size: 1.25rem; margin: 0 0 12px; }
.woche { margin-bottom: 24px; }
.woche-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; font-size: 1rem; }
.woche-titel .untertitel { color: var(--text-2); font-weight: 500; font-size: .875rem; font-variant-numeric: tabular-nums; }
.terminliste {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten);
  overflow: hidden;
}
.termin + .termin { border-top: 1px solid var(--linie); }
.termin-knopf {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: start; gap: 4px 14px;
  width: 100%; min-height: 64px; padding: 14px 16px; margin: 0;
  background: transparent; border: 0; text-align: left; color: var(--text);
  transition: background var(--dauer) ease, box-shadow var(--dauer) ease;
}
.termin-knopf:hover { background: var(--karte-2); }
.termin-knopf:focus-visible { outline-offset: -3px; border-radius: 0; }
.termin.hervorgehoben .termin-knopf { box-shadow: inset 3px 0 0 var(--akzent); background: var(--akzent-flaeche); }
.termin-wann { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; line-height: 1.3; }
.termin-tag { font-weight: 600; }
.termin-uhr { color: var(--text-2); font-size: .875rem; }
.termin-was { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.termin-titel { font-weight: 600; line-height: 1.35; }
.termin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--text-2); font-size: .875rem; }
.termin-meta .kurs { display: inline-flex; align-items: center; color: var(--text); font-weight: 500; }
.termin-darstellung { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .875rem; margin-top: 2px; }
.termin-darstellung [data-feld="vorschau-text"] { color: var(--text-2); }
.termin-rechts { display: flex; align-items: center; gap: 4px; color: var(--text-2); }
.countdown { font-size: .875rem; white-space: nowrap; }
.termin.dringend .countdown { color: var(--akzent); background: var(--akzent-flaeche); font-weight: 600; padding: 1px 10px; border-radius: 999px; }
.pfeil-rechts { flex: none; opacity: .7; }
.termin.ausgeblendet .termin-titel, .termin.erledigt .termin-titel, .termin.vergangen .termin-titel { color: var(--text-2); font-weight: 500; }
.termin.erledigt .termin-titel { text-decoration: line-through; }
@media (max-width: 599px) {
  .termin-knopf { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .termin-wann { grid-column: 1 / -1; flex-direction: row; gap: 6px; font-size: .875rem; }
  .termin-wann .termin-tag { color: var(--text); }
  .termin-rechts { grid-column: 2; grid-row: 1; justify-self: end; }
  .termin-was { grid-column: 1 / -1; }
}

.vergangene { margin-top: 8px; }
.vergangene > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  color: var(--text-2); font-weight: 500; list-style: none;
}
.vergangene > summary::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-left: 4px; transition: transform var(--dauer) ease; }
.vergangene[open] > summary::before { transform: rotate(45deg); }
.vergangene > summary:hover { color: var(--text); }
.vergangene .terminliste { margin-top: 10px; }

/* Kleine Kalender-Bilder je Darstellung */
.darstellung-bild { width: 48px; height: 36px; flex: none; }
.darstellung-bild.klein { width: 24px; height: 18px; }
.bild-rahmen { fill: var(--karte); stroke: var(--rahmen); stroke-width: 1.5; }
.bild-linie { fill: none; stroke: var(--linie); stroke-width: 1.2; }
.bild-ak { fill: var(--akzent); }
.bild-aus { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; }
.darstellung-bild.klein .bild-rahmen { stroke-width: 2.4; }
.darstellung-bild.klein .bild-linie { stroke-width: 2; }

/* Editor: Dialog (am Handy von unten, am Desktop in der Mitte) */
.editor-dialog {
  width: min(560px, calc(100% - 32px)); max-height: min(88dvh, 860px); padding: 0;
  border: 1px solid var(--linie); border-radius: 16px; background: var(--karte); color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22); overflow: auto; overscroll-behavior: contain;
}
.editor-dialog::backdrop { background: rgba(20, 18, 15, .38); }
/* Solange der Editor offen ist, wohnen die Meldungen in ihm (sonst lägen sie unter dem Hintergrund). */
.editor-dialog .meldungen { position: sticky; left: auto; right: auto; bottom: 12px; padding: 0 12px 12px; }
.editor-dialog[open] { animation: editor-auf var(--dauer) ease; }
@keyframes editor-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) {
  .editor-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); }
}
.editor { padding: 20px; }
.editor[aria-busy="true"] { opacity: .75; }
.editor-kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.editor-kopf-text { flex: 1; min-width: 0; }
.editor-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--text-2); font-size: .875rem; margin-bottom: 4px; }
.editor-meta .kurs { display: inline-flex; align-items: center; color: var(--text); font-weight: 500; }
.editor-titel { font-size: 1.25rem; line-height: 1.3; }
.editor-frist { color: var(--text-2); font-size: .9rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.editor-zu {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-2);
}
.editor-zu:hover { background: var(--karte-3); color: var(--text); }
.editor-frage { font-weight: 600; margin-bottom: 10px; padding: 0; }
.darstellungen { border: 0; margin: 0; padding: 0; }
.darstellung-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.darstellung-karte {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 96px; padding: 12px 8px 10px; cursor: pointer; text-align: center;
  border: 1px solid var(--linie); border-radius: 12px; background: var(--karte);
  transition: border-color var(--dauer) ease, background var(--dauer) ease, box-shadow var(--dauer) ease;
}
.darstellung-karte:hover { border-color: var(--rahmen); }
.darstellung-karte input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.darstellung-name { font-size: .8125rem; font-weight: 500; line-height: 1.25; }
.darstellung-karte:has(input:checked) { border-color: var(--akzent); background: var(--akzent-flaeche); box-shadow: inset 0 0 0 1px var(--akzent); }
.darstellung-karte:has(input:checked) .darstellung-name { font-weight: 600; }
.darstellung-karte:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }
.editor-zusatz { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 14px; }
.editor-zusatz:not(:has([data-option]:not([hidden]))) { margin-top: 0; }
.editor-vorschau { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--karte-3); font-size: .9rem; }
.editor-vorschau svg { flex: none; margin-top: .15em; color: var(--text-2); }
.editor-extras { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie); }
.editor-hinweis { margin-top: 8px; color: var(--text-2); font-size: .875rem; }
.editor-geltung { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.editor-geltung .quelle { color: var(--text-2); font-size: .9rem; }
.editor-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.editor-knoepfe .knopf-klein { min-height: 40px; }
.editor-mehr { margin-top: 12px; }
.editor-mehr .feldgruppe { margin: 8px 0; }
.editor-mehr > p { margin-top: 8px; }
.beschreibung { color: var(--text-2); font-size: .9rem; }
@media (max-width: 599px) {
  .editor { padding: 16px; }
  .darstellung-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Zusatzfelder nur zur passenden Darstellung */
[data-option] { display: none; }
[data-darstellung="vorlauf"] [data-option="tage"],
[data-darstellung="block_vor_frist"] [data-option="stunden"],
[data-darstellung="block_wunschzeit"] [data-option="stunden"],
[data-darstellung="block_wunschzeit"] [data-option="wunsch_datum"],
[data-darstellung="block_wunschzeit"] [data-option="wunsch_uhrzeit"],
[data-darstellung="block_wunschzeit"] [data-option="wunsch_tage_vorher"],
[data-option="typ"], [data-option="erinnerung"] { display: inline-flex; }

/* Regeln */
.regel-karten { display: grid; gap: 16px; }
.regel-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.regel-felder { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.regel-felder + .regel-felder { margin-top: 12px; }
.regel-karte .vorschau { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.regel-karte .beispiel { color: var(--text); }
.pfeil { color: var(--text-2); }
@media (min-width: 760px) {
  .regel-karten { grid-template-columns: 1fr 1fr; }
}

.kurs-regeln { padding: 4px 20px; }
.kurs-regel { padding: 14px 0; border-top: 1px solid var(--linie); }
.kurs-regel:first-child { border-top: 0; }
.kurs-regel-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.kurs-regel-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.kurs-regel-name .paar { white-space: nowrap; }
.kurs-regel-knoepfe { display: inline-flex; gap: 4px; margin-right: -6px; }
.kurs-regel-knoepfe .knopf-text { min-height: 36px; padding: 4px 8px; font-size: .9rem; }
.kurs-regel .vorschau { margin-top: 4px; }
.regel-bearbeiten { margin-top: 12px; padding: 12px 14px; background: var(--karte-3); border-radius: 10px; }
.kurs-regel-neu { margin-top: 16px; }
.kurs-regel-neu h3 { margin-bottom: 12px; }

.kurznamen { padding: 4px 20px; }
.kursname { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--linie); }
.kursname:first-child { border-top: 0; }
.kursname-label { display: inline-flex; align-items: center; gap: 2px 8px; flex-wrap: wrap; }
.kursname-kurs { font-weight: 500; }
.kursname-eingabe { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kursname-eingabe .feld { width: 12rem; }
.kursname-eingabe > .klein { min-width: 11rem; }

/* Kalender: je Zustand eine Bühne mit genau einer Hauptaktion */
.buehne { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 0 8px; max-width: 560px; margin: 0 auto 28px; }
.buehne h1 { margin: 16px 0 8px; }
.buehne .einleitung { max-width: 46ch; }
.buehne-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--akzent-flaeche); color: var(--akzent); font-size: 2rem; font-weight: 700;
}
.buehne-fertig { background: var(--akzent); color: var(--akzent-text); animation: zeichen-auf 320ms cubic-bezier(.2, .9, .3, 1.3); }
.buehne-achtung { background: var(--fehler-flaeche); color: var(--fehler); }
.buehne-laeuft::after {
  content: ""; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--akzent); border-right-color: transparent; animation: drehen 900ms linear infinite;
}
@keyframes zeichen-auf { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drehen { to { transform: rotate(360deg); } }
.checkliste { list-style: none; display: grid; gap: 10px; margin: 20px 0 4px; text-align: left; }
.checkliste li { display: flex; align-items: flex-start; gap: 10px; }
.liste-zeichen { flex: none; margin-top: .15em; color: var(--akzent); }
.liste-zeichen-neutral { color: var(--text-2); }
.ohne-umbruch { white-space: nowrap; }
.buehne-knoepfe { justify-content: center; margin-top: 24px; }
.buehne .hinweis { text-align: left; margin-top: 8px; }
.buehne-fuss { margin-top: 16px; max-width: 46ch; }
@media (max-width: 599px) {
  .buehne { padding-top: 8px; }
  .buehne-knoepfe { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Andere Kalender: eingeklappt, aber sichtbar */
.andere { padding: 0; }
.andere > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 14px 20px; list-style: none; cursor: pointer; border-radius: var(--radius);
}
.andere > summary:hover { background: var(--karte-2); }
.andere > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border: solid var(--text-2); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dauer) ease;
}
.andere[open] > summary::after { transform: rotate(-135deg); }
.andere-kopf { display: flex; flex-direction: column; gap: 2px; }
.andere-titel { font-weight: 600; }
.andere-sub { color: var(--text-2); font-size: .875rem; }
.andere-inhalt { padding: 4px 20px 20px; border-top: 1px solid var(--linie); }
.andere-inhalt > p:first-child { margin-top: 14px; }
.andere-inhalt .hinweis { margin: 12px 0 0; }
.abo-knoepfe { display: grid; gap: 8px; margin: 12px 0; }
@media (min-width: 600px) {
  .abo-knoepfe { grid-template-columns: repeat(3, 1fr); }
}
.kalender-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; margin-top: 20px; font-size: .875rem; }
.kalender-fuss .knopf-text { min-height: 40px; font-size: inherit; }
.fuss-teil { white-space: nowrap; }
.fuss-teil + .fuss-teil::before { content: "·"; margin-right: 6px; }
.buehne .hinweis .knopf-text { min-height: 36px; padding: 2px 4px; }
.zurueck { margin-bottom: 8px; font-size: .9rem; }
.zurueck a { text-decoration: none; }

/* Konto: gruppierte Einstellungsliste */
.gruppe-titel { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin: 24px 4px 8px; }
.einstellungen {
  list-style: none; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten); overflow: hidden;
}
.einstellungen-leise { margin-top: 24px; }
.zeile + .zeile { border-top: 1px solid var(--linie); }
.zeile { padding: 14px 16px; }
#moodle-link { scroll-margin-top: 16px; }
.zeile-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zeile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zeile-text strong { font-weight: 600; }
.zeile-text code { overflow-wrap: anywhere; }
.zeile-kopf .knopf { flex: none; }
.zeile-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -14px -16px; padding: 14px 16px; color: var(--text); text-decoration: none; }
.zeile-link:hover { background: var(--karte-2); color: var(--text); }
.zeile-link:focus-visible { outline-offset: -3px; border-radius: 0; }
.zeile-pfeil { flex: none; color: var(--text-2); }
.zeile-mehr { margin-top: 6px; }
.zeile-mehr > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  color: var(--akzent); font-size: .9rem; font-weight: 500; list-style: none;
}
.zeile-mehr > summary::before {
  content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform var(--dauer) ease;
}
.zeile-mehr[open] > summary::before { transform: rotate(45deg); }
.zeile-mehr > .feld, .zeile-mehr > .formular, .zeile-mehr > p { margin-top: 8px; }
.zeile-mehr .knopfzeile { margin-top: 10px; }
.zeile .hinweis { margin: 10px 0 0; }
.gefahr-zone { margin-top: 0; }
.gefahr-zone > summary.gefahr-summary { color: var(--fehler); font-weight: 600; font-size: 1rem; }
.gefahr-zone .formular { margin-top: 12px; }
.gefahr-zone .kaestchen { margin-bottom: 8px; }

/* Tippziele: am Handy und bei Touch mindestens 44 px */
@media (max-width: 759px), (pointer: coarse) {
  .knopf-klein, .editor-knoepfe .knopf-klein { min-height: 44px; }
  .zeile-mehr > summary { display: flex; min-height: 44px; }
  .kalender-fuss .knopf-text, .status .knopf-text, .buehne .hinweis .knopf-text { min-height: 44px; }
}

/* „Ein Projekt von Megalos“ unten auf der Startseite */
.projekt-von { display: flex; justify-content: center; margin-top: 20px; }
.projekt-von a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text-2); text-decoration: none; font-size: .875rem; }
.projekt-von a:hover { color: var(--text); }
.projekt-von img { border-radius: 8px; }
@media (prefers-color-scheme: dark) { .projekt-von img { filter: invert(1) brightness(.92); } }

/* Textseiten (Datenschutz) */
.text-seite { max-width: 68ch; }
.text-seite h2 { font-size: 1.125rem; margin: 24px 0 8px; }
.text-seite ul { padding-left: 20px; display: grid; gap: 6px; }
.text-seite p + p { margin-top: 8px; }

/* Fehler */
.fehler { padding: 32px 0; max-width: 60ch; }
.fehler h1 { margin-bottom: 12px; }
.fehler .knopf { margin-top: 16px; }

/* 6 Hilfsklassen, Bewegung ------------------------------------------------------ */

.js .nur-ohne-js { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .buehne-laeuft::after, .status-laeuft { border-right-color: var(--akzent-flaeche); }
}

@media (prefers-contrast: more) {
  :root { --linie: var(--rahmen); }
}

@media print {
  .kopf, .navigation, .status, .kv-nav, .editor-dialog, .meldungen { display: none !important; }
  .inhalt { padding: 0; }
  .termin { break-inside: avoid; }
}