/* apple.css – Zusatz-CSS der App-Ansicht (Apple-Design-Prinzipien) auf den Seiten Kanban und Einsatz bearbeiten.
   base.html lädt diese Datei auf jeder Seite und trägt die Klasse "apple" fest am <body>; alle Regeln hängen
   an body.apple. Farben, Schriften (Work Sans / Open Sans, lokal) und Kopfleiste bleiben wie heute; geändert werden Rhythmus,
   Hierarchie, Gruppierung, Tippflächen, Fokus und Kontrast.

   Markup (siehe templates/einsaetze/einsatz_bearbeiten.html und kanban.html): Die Wrapper .fa-gruppe, .fa-gruppe-karte, .fa-paar,
   .fa-aktionsleiste, .alarmkreise-teil und .alarmkreise-chips haben in einsatz-formular.css "display: contents" und sind dort
   unsichtbar; hier bekommen sie ihre Anzeige zurück. Elemente mit .nur-neu sind sonst ausgeblendet. */

body.apple {
  --a-text: #3a332c;
  --a-text-2: #5f554a;      /* Hilfetexte/Beschriftungen: >= 6:1 auf Weiß und auf #f5efe8 */
  --a-label: #4a4038;
  --a-linie: #e8dccb;       /* Trennlinien */
  --a-rand: #a39270;        /* Feld- und Chip-Rahmen: 3,0:1 auf Weiß (vorher #c4b399 = 2,05:1) */
  --a-gruppe-bg: #f5efe8;   /* Formularfläche */
  --a-petrol: #0c577f;
  --a-petrol-dunkel: #084660;
  --a-petrol-tint: #e3eef3;
  --a-terrakotta: #c17668;
  --a-terrakotta-dunkel: #a85f52;
  --a-pflicht: #b42318;
  --a-h-feld: 40px;         /* Feldhöhe Desktop */
  --a-h-chip: 36px;
  --a-r-feld: 12px;
  --a-r-gruppe: 16px;
  --a-schatten: 0 1px 2px rgba(58, 38, 28, .06);
  --a-schatten-hover: 0 4px 12px -6px rgba(58, 38, 28, .22);
  --farbe-primaer-dunkel: #084660;   /* Hover im Petrol-Ton statt im braunen Standard-Dunkel der heutigen App */
  -webkit-text-size-adjust: 100%;
}
@media (pointer: coarse), (max-width: 800px) {
  body.apple { --a-h-feld: 44px; --a-h-chip: 44px; }
}
html:has(body.apple) { scroll-padding-bottom: 96px; } /* Fokus-Sprünge landen nicht unter der Aktionsleiste */

/* Zusatzelemente der Ansicht "Neu" einblenden (in basis.css: display none). Absichtlich ohne Gewicht (:where), damit die
   konkreten Regeln unten (Zähler, Aktionsleiste ...) ihre eigene Anzeige festlegen können. */
:where(body.apple) .nur-neu { display: revert; }

/* ===== Gemeinsam: Fokus, Hover, Bewegung ===== */
body.apple :is(a, button, summary, select, input, textarea, label):focus-visible {
  outline: 2px solid var(--a-petrol); outline-offset: 2px;
}
body.apple .button:hover { background: var(--farbe-primaer-dunkel); }
body.apple .button:active { background: #06384d; transform: translateY(.5px); }
body.apple .button-sekundaer:hover { background: var(--a-gruppe-bg); }
body.apple .button-sekundaer:active { background: #efe4d4; }
body.apple .button[hidden] { display: none !important; }
body.apple input[type="checkbox"] { accent-color: var(--a-petrol); }
@media (prefers-reduced-motion: reduce) {
  body.apple *, body.apple *::before, body.apple *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===== Seitentitel (Large Title) und Kopfleiste ===== */
body.apple h1 { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--a-text); }
body.apple .kopfzeile-mit-aktion { margin-bottom: 24px; gap: 12px 24px; }
@media (max-width: 800px) { body.apple h1 { font-size: 28px; } body.apple .kopfzeile-mit-aktion { margin-bottom: 16px; } }
body.apple .kopf-nav a { min-height: 36px; display: inline-flex; align-items: center; }
body.apple .kopf-nav a[aria-current="page"] { background: var(--a-petrol-tint); color: var(--a-petrol-dunkel); font-weight: 700; }
body.apple .kopf-nav a.kopf-nav-neu { min-height: 36px; }
/* Tablet und schmale Fenster (801 bis 1180 px, z. B. iPad quer): Das Menüband bleibt, läuft aber in einer Zeile (statt zwei bis drei Zeilen). Passt es nicht ganz hinein, scrollt es seitlich; "Profilverwaltung (Name)" wird zum Profilbild. */
@media (min-width: 801px) and (max-width: 1180px) {
  body.apple .kopf { padding: 10px 16px; gap: 10px; flex-wrap: nowrap; }
  body.apple .kopf-marke { flex: 0 0 auto; }
  body.apple .kopf-nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  body.apple .kopf-nav a { flex: 0 0 auto; padding: 8px 10px; font-size: .88em; white-space: nowrap; }
  body.apple .kopf-benutzer { flex: 0 0 auto; gap: 8px; }
  body.apple .kopf-profil-text { display: none; }
}
/* Mittlere Fensterbreiten (1181 bis 1500 px): Der Zähler braucht Platz, deshalb steht "Profilverwaltung" dort nur als Profilbild, damit das Menüband einzeilig bleibt */
@media (min-width: 1181px) and (max-width: 1500px) { body.apple .kopf-profil-text { display: none; } }
/* Zähler bis zur automatischen Abmeldung (Uhr und Restzeit; Einzelheiten als Einblendung, siehe js/aktivitaet.js) */
body.apple .abmelde-zaehler { display: inline-flex; }
body.apple .abmelde-zaehler-mobil { display: none; }
body.apple .abmelde-zaehler-knopf {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 999px;
  background: var(--a-gruppe-bg, #f5efe8); color: var(--farbe-text-mittel, #5f554a); font: inherit; font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer;
}
body.apple .abmelde-zaehler-knopf:hover { background: #efe4d4; }
body.apple .abmelde-zaehler-knopf svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }
body.apple .abmelde-zaehler-info {
  position: fixed; z-index: 300; max-width: min(260px, calc(100vw - 16px)); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--a-linie, #e8dccb); border-radius: 12px; box-shadow: var(--a-schatten, 0 4px 16px rgba(58, 38, 28, .12));
  color: var(--a-text, #3a332c); font-size: 13px; line-height: 1.4;
}
body.apple .abmelde-zaehler-info[hidden] { display: none; }
body.apple .abmelde-zaehler-titel { font-weight: 700; }
@media (pointer: coarse) { body.apple .abmelde-zaehler-knopf { min-height: 44px; } }
/* Ränder: alle Seiten ab 801 px mit demselben seitlichen Abstand (vorher 13 bis 38 px je nach Seite) */
@media (min-width: 801px) { body.apple .inhalt, body.apple .inhalt-breit { padding-left: 24px; padding-right: 24px; } }
/* Touch (iPad quer hat das Desktop-Menüband): Tippfläche mindestens 44 px, mit Maus bleibt es bei 36 px */
@media (pointer: coarse) { body.apple .kopf-nav a, body.apple .kopf-nav a.kopf-nav-neu { min-height: 44px; } }
body.apple .button-gross { padding: 0 24px; min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; }
@media (max-width: 800px) {
  body.apple .kopf-nav a { min-height: 44px; }
  body.apple .kopf-nav a.kopf-nav-neu { display: none; }
}

/* ===== Bearbeiten-Formular: Inset Grouped ===== */
body.apple #kombiniertformular.karte { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 24px; }
body.apple #kombiniertformular .fa-formular {
  background: #fff; border: 1px solid var(--a-linie); border-radius: 20px; padding: 16px; margin-bottom: 0; box-shadow: var(--a-schatten);
}
@media (min-width: 801px) { body.apple #kombiniertformular .fa-formular { padding: 24px; } }

body.apple .fa-gruppe { display: block; margin: 0 0 24px; min-width: 0; }
body.apple .fa-gruppe:last-child { margin-bottom: 0; }

/* Abschnittskopf (Section Header) */
body.apple #kombiniertformular .fa-formular h3.fa-section,
body.apple #kombiniertformular .fa-formular .fa-gruppe > h3.fa-section:first-of-type,
body.apple h2.fa-section {
  border: 0; margin: 0; padding: 0 4px 8px;
  font-family: var(--font-text); font-size: 13px; line-height: 1.3; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--a-text-2);
}

/* Gruppen-Karte: beige Fläche wie heute, damit die weißen Eingabefelder sich klar abheben; Zeilen mit Trennlinie */
body.apple .fa-gruppe-karte {
  display: block; background: var(--a-gruppe-bg); border: 1px solid var(--a-linie); border-radius: var(--a-r-gruppe);
  padding: 0 16px; margin: 0; box-shadow: var(--a-schatten); list-style: none;
}
body.apple .fa-gruppe-karte > * { padding: 16px 0; margin: 0; }
body.apple .fa-gruppe-karte > * + * { border-top: 1px solid var(--a-linie); }
@media (max-width: 800px) { body.apple .fa-gruppe-karte { padding: 0 12px; } }

body.apple #kombiniertformular .fa-grid2,
body.apple #kombiniertformular .fa-grid3,
body.apple #kombiniertformular .fa-paar { gap: 16px; margin-bottom: 0; }
/* Fotograf/in und Letzte Nachfrage stehen nebeneinander wie die anderen Paare (heute je eine Zeile) */
body.apple #kombiniertformular .fa-paar { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { body.apple #kombiniertformular .fa-paar { grid-template-columns: 1fr; } }
/* Der Abstand unter dem Feld kommt jetzt von der Gruppenzeile, nicht mehr vom Feld (heute: margin-bottom 16px) */
body.apple #kombiniertformular .fa-gruppe-karte .fa-feld,
body.apple #kombiniertformular .fa-paar > .fa-feld { margin-bottom: 0; }
body.apple #kombiniertformular .fa-feld { gap: 8px; min-width: 0; }

/* Beschriftung immer über dem Feld, gleiches Muster */
body.apple #kombiniertformular .fa-formular label:not(.fa-option) {
  font-size: 14px !important; line-height: 1.3; font-weight: 600 !important; color: var(--a-label) !important;
}
body.apple .pflicht-stern { color: var(--a-pflicht); }

/* Eingabefelder: gleiche Höhe, gleiche Radien */
body.apple #kombiniertformular input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
body.apple #kombiniertformular select,
body.apple #kombiniertformular textarea {
  min-height: var(--a-h-feld); padding: 8px 12px !important;
  border: 1px solid var(--a-rand) !important; border-radius: var(--a-r-feld) !important;
  background-color: #fff; font-size: 16px !important; line-height: 1.3; color: var(--a-text) !important;
}
body.apple #kombiniertformular select {
  -webkit-appearance: none; appearance: none; padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f554a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
body.apple #kombiniertformular :is(input, select, textarea):focus { outline: none; box-shadow: none; border-color: var(--a-petrol); }
body.apple #kombiniertformular :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
  outline: 2px solid var(--a-petrol); outline-offset: 2px; box-shadow: none;
}
body.apple #kombiniertformular input[readonly] { background-color: var(--a-gruppe-bg); color: var(--a-text-2) !important; }
@media (max-width: 800px) {
  body.apple #kombiniertformular input[type="datetime-local"]:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
    min-height: 44px; padding: 0 44px 0 12px !important; background-color: #fff;
    border: 1px solid var(--a-rand) !important; border-radius: var(--a-r-feld) !important;
  }
}

/* Hilfetexte: lesbarer Kontrast */
body.apple #kombiniertformular .fa-hint,
body.apple .hinweis-klein { font-size: 14px; line-height: 1.4; color: var(--a-text-2) !important; margin: 0; }

/* Zubehör am Feld (Kopieren, Forum): in derselben Zeile wie das Eingabefeld, gleiche Größe.
   Das Markup bleibt wie heute (Beschriftung, Feld, Fehler, Hinweis, Knopf in .kopier-zeile); ein Raster stellt sie um. */
body.apple #kombiniertformular .fa-feld-zubehoer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch;
}
body.apple #kombiniertformular .fa-feld-zubehoer > label { grid-column: 1 / -1; grid-row: 1; }
body.apple #kombiniertformular .fa-feld-zubehoer > input { grid-column: 1; grid-row: 2; min-width: 0; }
body.apple #kombiniertformular .fa-feld-zubehoer > .kopier-zeile { grid-column: 2; grid-row: 2; display: flex; margin: 0; padding: 0; border: 0; }
body.apple #kombiniertformular .fa-feld-zubehoer > .fa-hint { grid-column: 1 / -1; grid-row: 3; }
body.apple #kombiniertformular .fa-feld-zubehoer > .errorlist { grid-column: 1 / -1; grid-row: 4; }
/* Forum-Knopf noch ausgeblendet (kein Link): das Feld nimmt die ganze Breite */
body.apple #kombiniertformular .fa-feld-zubehoer:has(> .kopier-zeile > [hidden]) { grid-template-columns: minmax(0, 1fr); }
body.apple #kombiniertformular .fa-feld-zubehoer > .kopier-zeile:has(> [hidden]) { display: none; }
body.apple .fa-formular .fa-zubehoer {
  flex: 1 1 auto; margin: 0; min-width: 156px; min-height: var(--a-h-feld); padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 0; border-radius: 999px; box-shadow: none; background: var(--farbe-primaer); color: #fff; text-decoration: none; cursor: pointer;
}
body.apple .fa-formular .fa-zubehoer:hover { background: var(--farbe-primaer-dunkel); }
body.apple .fa-formular .fa-zubehoer:active { background: #06384d; transform: translateY(.5px); }
body.apple .fa-formular .fa-zubehoer:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) {
  body.apple #kombiniertformular .fa-feld-zubehoer { grid-template-columns: minmax(0, 1fr); }
  body.apple #kombiniertformular .fa-feld-zubehoer > .kopier-zeile { grid-column: 1; grid-row: 3; }
  body.apple #kombiniertformular .fa-feld-zubehoer > .fa-hint { grid-row: 4; }
  body.apple #kombiniertformular .fa-feld-zubehoer > .errorlist { grid-row: 5; }
}

/* ===== Alarmkreise: Chips ===== */
body.apple .fa-gruppe-alarm { counter-reset: gewaehlt; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
body.apple .fa-gruppe-alarm > .fa-section { grid-column: 1; grid-row: 1; }
body.apple .fa-gruppe-alarm > .fa-zaehler { grid-column: 2; grid-row: 1; align-self: start; margin-bottom: 6px; }
/* Hier ist die Auswahl selbst die Karte; Karte und Feld-Hülle erzeugen keine eigene Box, damit der Fuß (Zurücksetzen + Hinweis)
   unter der Karte stehen kann. */
body.apple .fa-gruppe-alarm > .fa-gruppe-karte,
body.apple #kombiniertformular .fa-gruppe-alarm .fa-feld-alarm { display: contents; }
body.apple .fa-gruppe-alarm .fa-label { display: none; }
body.apple #kombiniertformular .fa-gruppe-alarm .alarmkreise-auswahl {
  grid-column: 1 / -1; grid-row: 2; display: grid; gap: 16px; margin: 0; padding: 16px;
  background: var(--a-gruppe-bg); border: 1px solid var(--a-linie); border-radius: var(--a-r-gruppe); box-shadow: var(--a-schatten);
}
@media (max-width: 800px) { body.apple #kombiniertformular .fa-gruppe-alarm .alarmkreise-auswahl { padding: 12px; } }
body.apple .fa-gruppe-alarm .errorlist { grid-column: 1 / -1; grid-row: 4; }
body.apple .fa-gruppe-alarm .fa-gruppe-fuss { grid-column: 1 / -1; grid-row: 3; }
/* Zähler "3 gewählt" ohne Skript: jedes angehakte Kästchen zählt eins hoch (Anzeige am Ende des Abschnitts, oben platziert) */
body.apple .fa-gruppe-alarm .alarmkreis-kasten:has(input:checked) { counter-increment: gewaehlt; }
body.apple .fa-zaehler::after {
  content: counter(gewaehlt) " gewählt";
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--a-petrol-tint); color: var(--a-petrol-dunkel); font-size: 13px; font-weight: 600; line-height: 1.3;
}

body.apple .fa-unterkopf {
  display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--a-text-2);
}
body.apple .alarmkreise-teil { display: block; }
body.apple .alarmkreise-teil:not(:has(.alarmkreis-kasten)) { display: none; }   /* keine Nummern oder keine Gruppen vorhanden */
body.apple .alarmkreise-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.apple .alarmkreise-chips.alarmkreise-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }

body.apple #kombiniertformular .fa-formular label.alarmkreis-kasten {
  position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--a-h-chip); min-width: 56px; padding: 0 12px; margin: 0 !important;
  border: 1.5px solid var(--a-rand); border-radius: 999px; background: #fff;
  color: var(--a-text) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* echtes Kästchen bleibt, ist unsichtbar und deckt die ganze Chip-Fläche ab (= volle Tippfläche) */
body.apple #kombiniertformular .alarmkreis-kasten input[type="checkbox"] {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important;
  margin: 0; opacity: 0; cursor: pointer; flex: none;
}
body.apple #kombiniertformular .fa-formular label.alarmkreis-kasten:hover { background: var(--a-gruppe-bg); }
body.apple #kombiniertformular .fa-formular label.alarmkreis-kasten:has(input:checked) {
  background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: #fff !important;
}
body.apple #kombiniertformular .fa-formular label.alarmkreis-kasten:has(input:checked):hover { background: var(--farbe-primaer-dunkel); border-color: var(--farbe-primaer-dunkel); }
body.apple #kombiniertformular .fa-formular label.alarmkreis-kasten:has(input:checked)::before { content: "✓"; font-size: 13px; font-weight: 700; }
body.apple #kombiniertformular .fa-formular label.alarmkreis-kasten:has(input:focus-visible) { outline: 2px solid var(--a-petrol); outline-offset: 2px; }
body.apple #kombiniertformular .fa-formular label.alarmkreis-kasten:active { transform: scale(.97); }

/* Fuß unter der Gruppe: Zurücksetzen + Hilfetext (wie ein Section Footer) */
body.apple .fa-gruppe-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 12px 4px 0; }
body.apple .fa-gruppe-fuss .button {
  margin: 0; min-height: var(--a-h-feld); padding: 0 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; border: 0; border-radius: 999px; box-shadow: none; background: var(--farbe-primaer); color: #fff;
}
body.apple .fa-gruppe-fuss .button:hover { background: var(--farbe-primaer-dunkel); }
body.apple .fa-gruppe-fuss .button:active { background: #06384d; transform: translateY(.5px); }
body.apple .fa-gruppe-fuss .hinweis-klein { flex: 1 1 260px; }

/* ===== Aktionsleiste unten (sticky) ===== */
body.apple .fa-aktionsleiste {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #faf7ef; border-top: 1px solid var(--a-linie);   /* deckender Fallback */
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.apple .fa-aktionsleiste {
    background: rgba(250, 247, 239, .82);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  }
}
@media (min-width: 801px) {
  body.apple .fa-aktionsleiste { bottom: 16px; margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--a-linie); border-radius: var(--a-r-gruppe); box-shadow: var(--a-schatten-hover); }
}
body.apple .fa-aktionsleiste .button {
  margin: 0; min-height: var(--a-h-feld); padding: 0 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
}
body.apple .fa-aktionsleiste .button-sekundaer { border: 1.5px solid var(--a-rand); color: var(--a-text); background: transparent; }
/* mit #kombiniertformular, weil die Seite den Speichern-Knopf dort mit einer ID-Regel formatiert */
body.apple #kombiniertformular .fa-aktionsleiste .fa-speichern {
  width: auto; margin: 0; min-height: var(--a-h-feld); padding: 0 32px; border: 0; border-radius: 999px; box-shadow: none; cursor: pointer;
  background: var(--a-terrakotta); color: #fff; font-family: var(--fa-font-family);
  font-size: 19px; font-weight: 700; line-height: 1; /* >= 18,66px fett = "großer Text": AA mit 3:1 */
}
body.apple #kombiniertformular .fa-aktionsleiste .fa-speichern:hover { background: var(--a-terrakotta-dunkel); }
body.apple #kombiniertformular .fa-aktionsleiste .fa-speichern:active { background: #924f43; transform: translateY(.5px); }
@media (max-width: 800px) { body.apple #kombiniertformular .fa-aktionsleiste .fa-speichern { flex: 1 1 auto; min-height: 48px; } }

/* Änderungshistorie als Gruppe (heute eine weiße Karte mit Überschrift und Liste) */
body.apple .karte.fa-historie { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 24px; }
body.apple .fa-historie .fa-liste {
  background: var(--a-gruppe-bg); border: 1px solid var(--a-linie); border-radius: var(--a-r-gruppe); box-shadow: var(--a-schatten);
  list-style: none; margin: 0; padding: 0 16px;
}
body.apple .fa-liste > li { padding: 12px 0; font-size: 15px; line-height: 1.4; color: var(--a-text); }
body.apple .fa-liste > li + li { border-top: 1px solid var(--a-linie); }
@media (max-width: 800px) { body.apple .fa-historie .fa-liste { padding: 0 12px; } }

/* ===== Kanban ===== */
body.apple .kanban-hinweis { color: var(--a-text-2); font-size: 14px; margin: -8px 0 16px; }
body.apple .alarm-automatik-zeile { margin: 0 0 16px; gap: 4px 12px; }
body.apple .alarm-automatik { font-size: 14px; line-height: 1.35; gap: 10px; min-height: 32px; color: var(--a-text); }
body.apple .alarm-automatik input { width: 20px; height: 20px; flex: 0 0 20px; }
body.apple .alarm-automatik-status { color: var(--a-text-2); font-size: 13px; }

body.apple .koordinator-filter { padding: 12px 16px; margin-bottom: 24px; border-radius: var(--a-r-gruppe); box-shadow: var(--a-schatten); font-size: 14px; }
body.apple .koordinator-filter-label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--a-text-2); }
body.apple .koordinator-filter-optionen { gap: 8px; margin-top: 8px; }
body.apple .koordinator-filter-option {
  min-height: 32px; padding: 0 12px 0 10px; gap: 8px; border: 1px solid var(--a-linie); border-radius: 999px; background: #fff; cursor: pointer;
}
/* Kein sichtbares Kästchen mehr: das echte Kästchen bleibt (Tastatur, Screenreader) und deckt die ganze Pille ab;
   gewählt zeigt die Pille Tönung, Rand und ein Häkchen (wie die Alarmkreis-Chips) */
body.apple .koordinator-filter-option { position: relative; }
body.apple .koordinator-filter-option input[type="checkbox"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
body.apple .koordinator-filter-option:has(input:checked)::before { content: "✓"; font-size: 13px; font-weight: 700; color: var(--a-petrol); }
body.apple .koordinator-filter-option:has(input:focus-visible) { outline: 2px solid var(--a-petrol); outline-offset: 2px; }
body.apple .koordinator-filter-option:has(input:checked) { background: var(--a-petrol-tint); border-color: var(--a-petrol); }
body.apple .koordinator-filter-option:hover { background: var(--a-gruppe-bg); }
body.apple .koordinator-filter-option:has(input:checked):hover { background: #d3e5ec; }
@media (max-width: 800px) { body.apple .koordinator-filter-option { min-height: 44px; } }

body.apple .kanban-board { gap: 14px; padding-bottom: 16px; }
body.apple .kanban-spalte { padding: 12px; border-radius: 20px; }
body.apple .kanban-spalte-kopf {
  align-items: center; min-height: 32px; margin-bottom: 12px; padding: 0 4px; gap: 8px;
  font-size: 15px; line-height: 1.25; font-weight: 700; color: var(--a-text);
}
body.apple .kanban-anzahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; margin: 0; padding: 0 8px;
  background: #fff; border: 1px solid var(--a-linie); border-radius: 999px; color: var(--a-text); font-size: 12px; font-weight: 700; line-height: 1;
}
body.apple .kanban-karten-leer { color: var(--a-text-2); font-size: 14px; }

body.apple .kanban-karte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; align-content: start;
  padding: 10px 12px 10px 24px; margin-bottom: 8px; font-size: 14px; line-height: 1.3;
  border-radius: var(--radius-m); box-shadow: var(--a-schatten);
  transition: box-shadow .15s ease;
}
body.apple .kanban-karte > * { grid-column: 1 / -1; margin: 0; }
body.apple .kanban-karte:hover { box-shadow: var(--a-schatten-hover); }
/* Der Griff ist absolut positioniert: mit grid-column würde sich left auf den Inhaltsrand statt auf den Kartenrand beziehen */
body.apple .kanban-karte > .kanban-karte-griff { grid-column: auto; left: 3px; top: 8px; color: #9d8f7e; }
body.apple .kanban-karte-titel { grid-column: 1; font-size: 16px; line-height: 1.25; font-weight: 700; color: var(--a-text); }
body.apple .kanban-karte-titel:hover { color: var(--farbe-primaer); text-decoration: underline; }
/* Forum-Knopf wie heute in eigener Zeile unter den Kopierknöpfen: Der Titel behält die volle Kachelbreite.
   Reihenfolge per order (Markup bleibt): Kopf/Info (0), Kopierknöpfe (0), Forum (1), Terminfelder und Status (2). */
body.apple .kanban-karte .forum-link-knopf {
  grid-column: 1 / -1; order: 1; justify-self: start; margin: 4px 0 0;
  display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 12px;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
}
body.apple .kanban-karte .forum-link-knopf:active { background: #06384d; }
body.apple .einsatz-situation { font-size: 13px; line-height: 1.3; }

/* Icon-Zeilen: Symbol in fester Spalte, Text bündig */
body.apple .kanban-zeile { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 6px; align-items: start; font-size: 13px; line-height: 1.35; color: var(--a-text-2); overflow-wrap: anywhere; }
body.apple .kanban-icon { text-align: center; font-size: 14px; line-height: 1.3; }

/* Kopieren: Knöpfe gleich hoch, in einer Reihe wenn Platz ist, sonst wie heute umbrechen (schmale Spalten ab 200 px) */
body.apple .kanban-karte .kopier-knoepfe { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
body.apple .kopier-knopf {
  flex: 0 0 auto; min-width: 0; min-height: 24px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid var(--a-rand); border-radius: 999px; background: #fff; color: var(--a-text);
}
body.apple .kopier-knopf:hover:not(:disabled) { background: var(--a-gruppe-bg); }
body.apple .kopier-knopf:active:not(:disabled) { background: #efe4d4; transform: translateY(.5px); }
body.apple .kopier-knopf:disabled { opacity: .5; }

/* Zwei Auswahlfelder: gleiche Höhe, gleiche Optik */
body.apple .kanban-karte .naechster-alarm-zeile { display: grid; gap: 3px; margin: 0; order: 2; }
body.apple .kanban-karte .kanban-karte-status-wahl { order: 2; }
body.apple .letzte-nachfrage-auswahl, body.apple .naechster-alarm-auswahl,
body.apple .letzte-nachfrage-datum, body.apple .naechster-alarm-datum {
  width: 100%; min-height: 26px; padding: 0 8px; font-size: 12px; line-height: 1.3;
  border: 1px solid var(--a-rand); border-radius: 10px; background-color: #fff; color: var(--a-text);
}
body.apple .letzte-nachfrage-auswahl, body.apple .naechster-alarm-auswahl {
  -webkit-appearance: none; appearance: none; padding-right: 28px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f554a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
body.apple .letzte-nachfrage-datum[hidden], body.apple .naechster-alarm-datum[hidden] { display: none; }
/* Datumsfeld in schmalen Spalten: kleinere Schrift und weniger Innenabstand, damit Datum und Uhrzeit sichtbar bleiben */
body.apple .letzte-nachfrage-datum, body.apple .naechster-alarm-datum { min-width: 0; padding: 0 2px 0 4px; font-size: 10px; }

/* Handy: Tippflächen 44px */
@media (pointer: coarse), (max-width: 800px) {
  body.apple .kopier-knopf, body.apple .kanban-karte .forum-link-knopf { min-height: 44px; }
  body.apple .letzte-nachfrage-auswahl, body.apple .naechster-alarm-auswahl,
  body.apple .letzte-nachfrage-datum, body.apple .naechster-alarm-datum { min-height: 44px; font-size: 16px; }
  body.apple input[type="datetime-local"].letzte-nachfrage-datum, body.apple input[type="datetime-local"].naechster-alarm-datum { padding: 0 44px 0 12px; }
  body.apple .kanban-karte .naechster-alarm-zeile { margin-top: 4px; }
}
@media (max-width: 800px) {
  body.apple .kanban-karte { padding: 12px; }
  body.apple .kanban-spalte { padding: 12px; border-radius: 16px; }
  body.apple .kanban-spaltenwahl-zeile { font-size: 16px; }
  body.apple .kanban-spaltenwahl, body.apple .kanban-karte-status-wahl { border-radius: var(--a-r-feld); font-size: 16px; border: 1px solid var(--a-rand); }
  body.apple .kanban-karte-status-wahl { margin-top: 4px; }
  body.apple .alarm-automatik { min-height: 44px; }
}

/* Breite Spalten (Regler "Spaltenbreite"): Kopierknöpfe gleich breit in einer Reihe, Auswahlfelder und Datum größer */
@container kanban-spalte (min-width: 280px) {
  body.apple .kanban-karte .kopier-knoepfe { flex-wrap: nowrap; }
  body.apple .kopier-knopf { flex: 1 1 0; }
}
@container kanban-spalte (min-width: 340px) {
  body.apple .kanban-karte { padding: 12px 14px 12px 28px; }
  body.apple .kopier-knopf { min-height: 28px; font-size: 13px; }
  body.apple .letzte-nachfrage-auswahl, body.apple .naechster-alarm-auswahl { min-height: 32px; font-size: 13px; }
  body.apple .letzte-nachfrage-datum, body.apple .naechster-alarm-datum { min-height: 32px; font-size: 13px; padding: 0 10px; }
}