/* Stall-App · Stil „Weide“ (hell/warm, Dunkelmodus über prefers-color-scheme) */
:root {
  --bg: #F6F1E7;
  --karte: #FFFDF8;
  --feld: #FFFFFF;
  --text: #1E2A23;
  --gedaempft: #5E6B62;
  --primaer: #2F5D46;
  --knopf-bg: #2F5D46;
  --knopf-fg: #FFFFFF;
  --link: #2F5D46;
  --primaer-soft: #E2ECE3;
  --akzent: #A7683A;
  --akzent-text: #86502A;
  --warn: #C98A1B;
  --warn-text: #6E4A00;
  --warn-bg: #F8ECD2;
  --fehler: #B0432E;
  --fehler-text: #9A3521;
  --fehler-bg: #F7E3DC;
  --ok: #3E7D55;
  --ok-text: #2C6042;
  --ok-bg: #E1EEE4;
  --sand: #EDE6D6;
  --linie: rgba(30, 42, 35, .13);
  --linie-stark: rgba(30, 42, 35, .38);
  --fokus: #1D63D8;
  --kopf-bg: #2F5D46;
  --kopf-fg: #F6F1E7;
  --schatten: 0 1px 2px rgba(30, 42, 35, .06), 0 4px 14px rgba(30, 42, 35, .05);
  --r: 18px;
  --r-klein: 14px;
  --safe-o: env(safe-area-inset-top, 0px);
  --safe-u: env(safe-area-inset-bottom, 0px);
  --av-rand: rgba(0, 0, 0, .16);
  --kopf-h: calc(56px + var(--safe-o));
  --tab-h: 68px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141A16;
    --karte: #1D251F;
    --feld: #141A16;
    --text: #ECE7DC;
    --gedaempft: #A9B4AB;
    --primaer: #7CBD96;
    --knopf-bg: #74B68F;
    --knopf-fg: #0E2016;
    --link: #8FCCA8;
    --primaer-soft: #22382B;
    --akzent: #D39A6A;
    --akzent-text: #E0AF85;
    --warn: #D9A03A;
    --warn-text: #F2CB78;
    --warn-bg: #3A2F14;
    --fehler: #E58A75;
    --fehler-text: #F1A08D;
    --fehler-bg: #3E211B;
    --ok: #7CC493;
    --ok-text: #9BD8AF;
    --ok-bg: #203629;
    --sand: #28322B;
    --linie: rgba(236, 231, 220, .14);
    --linie-stark: rgba(236, 231, 220, .42);
    --fokus: #8DBBFF;
    --kopf-bg: #1B3427;
    --kopf-fg: #ECE7DC;
    --av-rand: rgba(255, 255, 255, .34);
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  line-height: 1.45; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  min-height: 100dvh; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.012em; font-weight: 750; text-wrap: balance; }
p { margin: 0 0 .75em; }
a { color: var(--link); }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
.view:focus { outline: none; }

.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nur-druck { display: none; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--karte); color: var(--text); border: 2px solid var(--fokus); border-radius: 10px; padding: 10px 14px; }
.skip:focus { top: calc(8px + var(--safe-o)); }

.ico { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.ico--gross { width: 34px; height: 34px; }

/* ---------- Rahmen ---------- */
.kopf {
  position: sticky; top: 0; z-index: 30; height: var(--kopf-h); padding: var(--safe-o) max(16px, calc((100vw - 600px) / 2 + 16px)) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--kopf-bg); color: var(--kopf-fg);
}
.kopf__marke { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; min-height: 44px; }
.kopf__logo { width: 44px; height: 44px; border-radius: 12px; background: rgba(246, 241, 231, .16); display: grid; place-items: center; flex: none; color: inherit; margin-left: -4px; }
.kopf__logo .ico { width: 22px; height: 22px; }
.kopf__stall { flex: 0 1 auto; margin-right: auto; display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 44px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.kopf__stall--mehrere { background: rgba(246, 241, 231, .14); padding: 0 8px 0 14px; }
.kopf__stall:active { background: rgba(246, 241, 231, .22); }
.kopf__pfeil { width: 20px; height: 20px; opacity: .6; }
.kopf__stall--mehrere .kopf__pfeil { opacity: 1; }
.kopf__name { font-weight: 750; font-size: 1.05rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf__glocke { position: relative; width: 48px; height: 48px; margin-right: -8px; display: grid; place-items: center; color: inherit; border-radius: 50%; }
.kopf__glocke .ico { width: 26px; height: 26px; }
.zaehler { position: absolute; top: 2px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #E0A526; color: #1E1500; font-size: .72rem; font-weight: 800; display: grid; place-items: center; line-height: 1; border: 2px solid var(--kopf-bg); }
.zaehler--zeile { position: static; border-color: transparent; background: var(--warn); }
.kopf__stall .zaehler--kopf { position: static; margin-left: 2px; border-color: transparent; flex: none; }
.kopf__glocke .zaehler { right: 2px; }

.view {
  max-width: 600px; margin: 0 auto; padding: 16px 16px calc(var(--tab-h) + var(--safe-u) + 28px);
  opacity: 0; transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease);
  min-height: calc(100dvh - var(--kopf-h));
}
.view--da, .start-lade { opacity: 1; transform: none; }
body[data-layout="auth"] .view { padding-bottom: calc(28px + var(--safe-u)); padding-top: calc(20px + var(--safe-o)); min-height: 100dvh; }
.view:has(> .start-lade) { opacity: 1; transform: none; }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px max(6px, calc((100vw - 600px) / 2 + 6px)) calc(6px + var(--safe-u));
  background: var(--karte); border-top: 1px solid var(--linie);
}
.tab {
  min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--gedaempft); text-decoration: none; font-size: .78rem; font-weight: 650; border-radius: 14px;
  transition: color .15s;
}
.tab__ico { position: relative; width: 56px; height: 30px; border-radius: 999px; display: grid; place-items: center; transition: background .2s var(--ease); }
.tab[aria-current="page"] { color: var(--text); }
.tab[aria-current="page"] .tab__ico { background: var(--primaer-soft); color: var(--link); }
.tab[aria-current="page"] .tab__text { font-weight: 800; }
.tab__punkt { position: absolute; top: 2px; right: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--warn); border: 2px solid var(--karte); }
.tab:active .tab__ico { background: var(--sand); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tab-h) + var(--safe-u) + 14px); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
body[data-layout="auth"] .toasts { bottom: calc(16px + var(--safe-u)); }
.toast {
  pointer-events: auto; max-width: 520px; display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border-radius: 14px;
  background: #1E2A23; color: #F6F1E7; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); font-weight: 550; line-height: 1.35;
  opacity: 0; transform: translateY(10px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast .ico { margin-top: 1px; }
.toast--da { opacity: 1; transform: none; }
.toast--fehler { background: #8E3120; color: #fff; }
.toast--ok { background: #2A5A41; color: #fff; }
@media (prefers-color-scheme: dark) {
  .toast { background: #ECE7DC; color: #141A16; }
  .toast--fehler { background: #F1A08D; color: #2A0F08; }
  .toast--ok { background: #9BD8AF; color: #0B2016; }
}

/* ---------- Typografie & Blöcke ---------- */
.seitenkopf { margin-bottom: 16px; }
.seitenkopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.seitentitel { font-size: 1.7rem; }
.seitenunter { color: var(--gedaempft); margin: 6px 0 0; }
.zurueck { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -6px 0 0 -8px; padding: 0 10px 0 4px; color: var(--link); text-decoration: none; font-weight: 650; }
.block { margin-top: 24px; }
.block__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.block__titel { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.block__kopf .block__titel { margin-bottom: 0; }
.block__link { font-weight: 650; min-height: 44px; display: inline-flex; align-items: center; }
.zahl { font-size: .8rem; background: var(--sand); color: var(--gedaempft); border-radius: 999px; padding: 1px 9px; font-weight: 700; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); padding: 16px; box-shadow: var(--schatten); margin-top: 16px; }
.block > .karte, .block .karte:first-child { margin-top: 0; }
.karte--liste { padding: 4px 0; overflow: hidden; }
.karte--still { color: var(--gedaempft); }
.karte--still p { margin: 0; display: inline; }
.liste { display: grid; gap: 12px; }
.raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feld { min-width: 0; }
.formzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.zeichenzaehler { color: var(--gedaempft); font-size: .85rem; }
.hinweiszeile { display: flex; align-items: center; gap: 8px; margin: 4px 16px 12px; color: var(--warn-text); font-weight: 600; font-size: .92rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border: 2px solid transparent; border-radius: 14px; background: var(--knopf-bg); color: var(--knopf-fg);
  font-weight: 700; font-size: 1rem; line-height: 1.1; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: transform .12s var(--ease), background .15s, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--zweit { background: transparent; color: var(--text); border-color: var(--linie-stark); }
.btn--text { background: transparent; color: var(--link); padding: 0 12px; }
.btn--gefahr { background: var(--fehler); color: #fff; }
@media (prefers-color-scheme: dark) { .btn--gefahr { color: #2A0F08; } }
.btn--gefahr-text { background: transparent; color: var(--fehler-text); }
.btn--klein { min-height: 44px; padding: 0 14px; font-size: .95rem; }
.btn--gross { min-height: 56px; font-size: 1.08rem; }
.btn--block { display: flex; width: 100%; }
.btn--hell { background: #FFFDF8; color: #14201A; }
.btn--hell-rand { background: transparent; color: var(--typ-fg, #fff); border-color: currentColor; }
.btn--lade { position: relative; }
.btn--lade .btn__text { opacity: .6; }
.btn--lade::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: dreh .7s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.knopfreihe { display: flex; gap: 12px; margin-top: 16px; }
.knopfreihe > * { flex: 1; }
.knopfreihe--umbruch { flex-wrap: wrap; }
.knopfreihe--umbruch > * { flex: 1 1 auto; }
.linkknopf { background: none; border: 0; color: var(--link); font-weight: 650; text-decoration: underline; min-height: 44px; padding: 0 4px; cursor: pointer; margin-top: 8px; }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 16px; }
.feld label, .auswahl legend { display: block; font-weight: 650; font-size: .95rem; margin-bottom: 6px; }
.feld__pflicht { color: var(--fehler-text); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--text); background: var(--feld);
  border: 1.5px solid var(--linie-stark); border-radius: 14px; appearance: none; -webkit-appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--gedaempft) 50%), linear-gradient(135deg, var(--gedaempft) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--fokus); border-radius: 14px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fehler); }
input[type="date"], input[type="time"] { min-width: 0; max-width: 100%; }
input::-webkit-date-and-time-value { text-align: left; }
.feld__hinweis { color: var(--gedaempft); font-size: .88rem; margin: 6px 0 0; }
.feld__fehler, .formfehler { color: var(--fehler-text); font-weight: 600; font-size: .92rem; margin: 6px 0 0; }
.formfehler { background: var(--fehler-bg); border: 1px solid var(--fehler); border-radius: 12px; padding: 12px 14px; margin: 0; }
.passwort { position: relative; }
.passwort input { padding-right: 56px; }
.passwort__zeige { position: absolute; right: 2px; top: 2px; width: 48px; height: 48px; border: 0; background: none; color: var(--gedaempft); border-radius: 12px; display: grid; place-items: center; cursor: pointer; }
.passwort__zeige[aria-pressed="true"] { color: var(--link); }
.auswahl { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.auswahl legend { padding: 0; }
.auswahl__opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; background: var(--feld); border: 1.5px solid var(--linie); border-radius: 14px; cursor: pointer; font-weight: 600; }
.auswahl__opt:has(input:checked) { border-color: var(--knopf-bg); background: var(--primaer-soft); }
.auswahl__opt input { width: 24px; height: 24px; accent-color: var(--knopf-bg); flex: none; margin: 0; }
.mehr-angaben { border: 1.5px dashed var(--linie-stark); border-radius: 14px; padding: 4px 14px 14px; }
.mehr-angaben summary { min-height: 48px; display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.mehr-angaben[open] summary { margin-bottom: 8px; }

.schalter__zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--linie); cursor: pointer; }
.schalter__text { display: grid; gap: 2px; }
.schalter__label { font-weight: 650; }
.schalter__hinweis { color: var(--gedaempft); font-size: .88rem; }
.schalter__spur { display: none; }
.schalter__input { appearance: none; -webkit-appearance: none; flex: none; width: 58px; height: 34px; margin: 0; border-radius: 999px; background: var(--sand); border: 2px solid var(--linie-stark); position: relative; cursor: pointer; transition: background .2s, border-color .2s; }
.schalter__input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--gedaempft); transition: transform .2s var(--ease), background .2s; }
.schalter__input:checked { background: var(--knopf-bg); border-color: var(--knopf-bg); }
.schalter__input:checked::after { transform: translateX(24px); background: var(--knopf-fg); }
.schalter__input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 999px; }
.schalter + .feld, .feld + .schalter { margin-top: 14px; }
.schalter + .feld { border-top: 0; }
.speicherstatus { min-height: 1.4em; margin: 10px 0 0; color: var(--ok-text); font-weight: 650; font-size: .92rem; }

/* ---------- Skelett / Leer / Fehler ---------- */
.skelett, .start-lade { display: grid; gap: 12px; padding-top: 4px; }
.skel { border-radius: var(--r); background: linear-gradient(100deg, var(--sand) 30%, color-mix(in srgb, var(--sand) 55%, var(--karte)) 50%, var(--sand) 70%); background-size: 220% 100%; animation: schimmer 1.4s linear infinite; }
@keyframes schimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.leer { text-align: center; padding: 36px 20px; display: grid; justify-items: center; gap: 8px; }
.leer__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--primaer-soft); color: var(--link); display: grid; place-items: center; margin-bottom: 4px; }
.leer__titel { font-size: 1.2rem; }
.leer__text { color: var(--gedaempft); max-width: 32ch; margin: 0 0 8px; }
.fehlerbox { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 28px 16px; color: var(--fehler-text); }

/* ---------- Anmeldung ---------- */
.auth { max-width: 460px; margin: 0 auto; display: grid; gap: 16px; align-content: start; }
.marke { text-align: center; padding: 8px 0 4px; }
.marke__logo { width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 24px; background: var(--kopf-bg); color: var(--kopf-fg); display: grid; place-items: center; box-shadow: var(--schatten); }
.marke__logo .ico { width: 44px; height: 44px; }
.marke__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.marke__unter { color: var(--gedaempft); margin: 4px 0 0; }
.auth__karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 22px; padding: 22px 20px; box-shadow: var(--schatten); display: grid; gap: 14px; }
.auth__karte--mitte { text-align: center; justify-items: center; }
.auth__karte--mitte p { margin: 0; }
.auth__hinweis { color: var(--gedaempft); margin: 0; }
.auth__wechsel { text-align: center; margin: 0; }
.auth__wechsel a { font-weight: 700; display: inline-block; padding: 10px 4px; }
.vergessen { display: grid; gap: 12px; border-top: 1px solid var(--linie); padding-top: 14px; }
.leer__icon--gross { width: 88px; height: 88px; }

/* ---------- Avatare & Chips ---------- */
.avatar {
  --av: 26px; width: var(--av); height: var(--av); border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-size: max(9px, calc(var(--av) * .42)); font-weight: 800; letter-spacing: .01em; line-height: 1; overflow: hidden;
  background: var(--av-bg, var(--sand)); color: var(--av-fg, var(--text)); box-shadow: inset 0 0 0 1px var(--av-rand);
}
.avatar--gross { --av: 42px; }
.avatar--klein { --av: 20px; }
/* Ring = eigene Person: Abstand in Kartenfarbe, dann Textfarbe (auch ohne Farbunterschied erkennbar) */
.avatar--ich { overflow: visible; box-shadow: 0 0 0 1.5px var(--karte), 0 0 0 3.5px var(--text); }
.pchip .avatar--ich { overflow: hidden; box-shadow: inset 0 0 0 1px var(--av-rand); }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; background: var(--sand); border-radius: 999px; font-size: .92rem; font-weight: 600; max-width: 100%; }
.pchip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip--ich { background: var(--primaer-soft); box-shadow: inset 0 0 0 1.5px var(--knopf-bg); }
.pchip__haken { color: var(--ok-text); display: inline-flex; }
.pchip__haken .ico { width: 18px; height: 18px; stroke-width: 3; }
.pchip__warn { color: var(--warn-text); display: inline-flex; }
.pchip__warn .ico { width: 17px; height: 17px; }
.pchip--abwesend { box-shadow: inset 0 0 0 1.5px var(--warn); }
.frei { display: inline-flex; align-items: center; background: var(--warn-bg); color: var(--warn-text); border: 1.5px solid var(--warn); border-radius: 999px; padding: 2px 11px; font-weight: 800; font-size: .88rem; white-space: nowrap; }
.frei--klein { padding: 0 9px; font-size: .8rem; }
.etikett { margin-left: 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--primaer-soft); color: var(--link); border-radius: 6px; padding: 2px 7px; vertical-align: 2px; }

/* ---------- Schichtkarte ---------- */
.schichten { display: grid; gap: 10px; }
.schicht {
  position: relative; display: grid; grid-template-columns: 7px 1fr 22px; align-items: stretch; width: 100%; text-align: left; padding: 0;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten); cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .15s; touch-action: manipulation;
}
.schicht:active { transform: scale(.985); }
.schicht__streifen { background: var(--typ); }
.schicht__inhalt { display: grid; gap: 6px; padding: 13px 4px 13px 14px; min-width: 0; }
.schicht__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.schicht__zeit { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.schicht__titel { font-weight: 650; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.schicht__punkte { color: var(--gedaempft); font-size: .82rem; font-weight: 600; }
.schicht__leute { display: flex; flex-wrap: wrap; gap: 6px; }
.schicht__niemand { color: var(--gedaempft); font-size: .92rem; }
.schicht__status { color: var(--ok-text); font-weight: 700; font-size: .88rem; }
.schicht__kann { color: var(--gedaempft); font-size: .84rem; }
.schicht__hinweis { display: flex; align-items: center; gap: 6px; color: var(--warn-text); font-size: .86rem; font-weight: 600; }
.schicht__hinweis .ico { width: 18px; height: 18px; }
.schicht__vorbei { color: var(--gedaempft); font-size: .82rem; font-weight: 650; }
.schicht__pfeil { display: grid; place-items: center; color: var(--gedaempft); padding-right: 6px; }
.schicht--mein { background: var(--primaer-soft); border-color: color-mix(in srgb, var(--knopf-bg) 55%, transparent); }
.schicht--mein .pchip { background: color-mix(in srgb, var(--karte) 70%, transparent); }
.schicht--vorbei { opacity: .72; }

.zeile { display: grid; grid-template-columns: 3.4rem 10px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; background: none; text-align: left; cursor: pointer; border-bottom: 1px solid var(--linie); }
.zeile:last-child { border-bottom: 0; }
.zeile__zeit { font-weight: 800; }
.zeile__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--typ); }
.zeile__titel { font-weight: 600; min-width: 0; }
.zeile__leute { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.zeile--vorbei { opacity: .65; }
.zeile:active { background: var(--sand); }

/* ---------- Heute ---------- */
.gruss { font-size: 1.65rem; margin-bottom: 14px; }
.naechster { position: relative; overflow: hidden; background: var(--typ, var(--knopf-bg)); color: var(--typ-fg, #fff); border-radius: 26px; padding: 22px 20px 20px; display: grid; gap: 4px; box-shadow: var(--schatten); }
.naechster::after { content: ""; position: absolute; right: -34px; bottom: -40px; width: 170px; height: 170px; background: currentColor; opacity: .11; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7.4 5.2A7 7 0 1 0 16.6 5.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7.4 5.2A7 7 0 1 0 16.6 5.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.naechster__kicker { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; opacity: .88; }
.naechster__titel { font-size: 1.6rem; margin-top: 2px; }
.naechster__meta { margin: 0; font-size: 1.08rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.naechster__in { opacity: .9; font-weight: 800; }
.naechster__akt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; position: relative; z-index: 1; }
.naechster__akt .btn { flex: 1 1 auto; }
.naechster__fertig { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; min-height: 48px; }
.naechster--leer { background: var(--karte); color: var(--text); border: 2px dashed var(--linie-stark); box-shadow: none; }
.naechster--leer .btn--hell { background: var(--knopf-bg); color: var(--knopf-fg); align-self: start; justify-self: start; margin-top: 12px; }
.naechster--leer::after { display: none; }
.band { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--text); min-height: 56px; }
.band__text { flex: 1; }
.band--warn { background: var(--warn-bg); border: 1.5px solid var(--warn); }
.band--warn .band__icon { color: var(--warn-text); }
.band--ok { background: var(--ok-bg); color: var(--ok-text); font-weight: 600; }
.punkte__zahl { margin: 0 0 10px; font-size: 1.05rem; }
.punkte__zahl strong { font-size: 1.6rem; letter-spacing: -.02em; }
.punkte__sub { color: var(--gedaempft); font-size: .9rem; margin: 10px 0 0; }
.balken { position: relative; height: 14px; border-radius: 999px; background: var(--sand); }
.balken__geplant, .balken__ist { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.balken__geplant { background: color-mix(in srgb, var(--knopf-bg) 34%, transparent); }
.balken__ist { background: var(--knopf-bg); }
.balken__soll { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -2px; border-radius: 2px; background: var(--text); }
.balkenlegende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; color: var(--gedaempft); font-size: .86rem; }
.balkenlegende li { display: inline-flex; align-items: center; gap: 6px; }
.balkenlegende i { display: inline-block; width: 16px; height: 10px; border-radius: 999px; }
.balkenlegende__erledigt { background: var(--knopf-bg); }
.balkenlegende__eingetragen { background: color-mix(in srgb, var(--knopf-bg) 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--knopf-bg) 50%, transparent); }
.balkenlegende .balkenlegende__soll { width: 3px; height: 14px; border-radius: 2px; background: var(--text); }
.statkopf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.statkopf__zelle { display: grid; gap: 2px; align-content: start; }
.statkopf__zelle strong { font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.statkopf__zelle span { color: var(--gedaempft); font-size: .82rem; }
.hinweisbox { display: grid; gap: 6px; margin: 12px 0; padding: 12px 14px; background: var(--sand); border: 1px solid var(--linie); border-radius: 12px; font-size: .92rem; line-height: 1.45; }
.hinweisbox__liste { margin: 0; padding-left: 18px; }
.mitglied__dienste { border-top: 1px solid var(--linie); }
.mitglied__dienste .schalter__zeile { border-bottom: 0; padding: 6px 0; }
.pin { display: grid; gap: 2px; padding: 12px 16px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie); }
.pin:last-child { border-bottom: 0; }
.pin__text { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pin__meta { color: var(--gedaempft); font-size: .84rem; }

/* ---------- Plan ---------- */
.plan-kopf { position: sticky; top: calc(var(--kopf-h) + var(--band-h, 0px)); z-index: 20; margin: 0 -16px 8px; padding: 12px 16px 10px; background: var(--bg); border-bottom: 1px solid var(--linie); display: grid; gap: 10px; }
.woche { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.woche__pfeil { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--linie-stark); background: var(--karte); display: grid; place-items: center; cursor: pointer; }
.woche__pfeil:active { background: var(--sand); }
.woche__label { flex: 1; text-align: center; font-weight: 750; font-size: 1.05rem; display: grid; justify-items: center; gap: 2px; }
.woche__heute { background: none; border: 0; color: var(--link); font-weight: 700; font-size: .88rem; min-height: 28px; padding: 0 8px; cursor: pointer; text-decoration: underline; }
.woche--monat { margin-bottom: 12px; }
.wochenleiste { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tag { min-height: 64px; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 4px 0; border-radius: 14px; border: 1.5px solid var(--linie); background: var(--karte); cursor: pointer; }
.tag__wt { font-size: .74rem; color: var(--gedaempft); font-weight: 700; }
.tag__nr { font-size: 1.15rem; font-weight: 800; }
.tag__punkte { display: flex; gap: 3px; height: 8px; align-items: center; }
.pkt { width: 7px; height: 7px; border-radius: 50%; display: block; }
.pkt--offen { background: var(--warn); }
.pkt--mein { background: var(--ok); }
.tag--heute { border: 2px solid var(--knopf-bg); }
.tag--fokus { background: var(--knopf-bg); color: var(--knopf-fg); border-color: var(--knopf-bg); }
.tag--fokus .tag__wt { color: inherit; opacity: .85; }
.tag--fokus .pkt--mein { background: var(--knopf-fg); }
.chips { display: flex; gap: 8px; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--linie-stark); background: transparent; font-weight: 650; cursor: pointer; }
.chip--an { background: var(--text); color: var(--bg); border-color: var(--text); }
.tagblock { margin-top: 18px; }
.tagblock__kopf { font-size: 1rem; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--gedaempft); text-transform: none; }
.tagblock__kopf--heute { color: var(--text); }
.tagblock__heute { background: var(--knopf-bg); color: var(--knopf-fg); font-size: .72rem; padding: 2px 9px; border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tagblock__abwesend { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--warn-text); font-size: .9rem; font-weight: 600; }
.tagblock__abwesend .ico { width: 20px; height: 20px; }
.tagblock__leer { color: var(--gedaempft); font-size: .92rem; margin: 0; padding: 4px 2px; }
.slide-l { animation: gleite-l .22s var(--ease); }
.slide-r { animation: gleite-r .22s var(--ease); }
@keyframes gleite-l { from { opacity: .3; transform: translateX(28px); } }
@keyframes gleite-r { from { opacity: .3; transform: translateX(-28px); } }

/* ---------- Bottom-Sheet ---------- */
html:has(dialog[open]) { overflow: hidden; }
dialog.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 600px; max-height: 92dvh; border: 0; padding: 0;
  border-radius: 26px 26px 0 0; background: var(--karte); color: var(--text); box-shadow: 0 -10px 40px rgba(0, 0, 0, .28); overflow: hidden;
  animation: sheet-rein .24s var(--ease);
}
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet.sheet--raus { animation: sheet-raus .16s ease-in forwards; }
dialog.sheet::backdrop { background: rgba(8, 14, 10, .58); }
@keyframes sheet-rein { from { transform: translateY(100%); } }
@keyframes sheet-raus { to { transform: translateY(100%); } }
.sheet__griff { width: 44px; height: 5px; border-radius: 3px; background: var(--linie-stark); margin: 10px auto 0; flex: none; }
.sheet__zu { position: absolute; top: 6px; right: 8px; width: 48px; height: 48px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--gedaempft); z-index: 2; }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px calc(24px + var(--safe-u)); display: grid; gap: 16px; align-content: start; }
.sheet__titel { font-size: 1.35rem; padding-right: 44px; }
.sheet__text { margin: 0; color: var(--gedaempft); }
.sh-kopf { display: grid; grid-template-columns: 8px 1fr; gap: 14px; }
.sh-kopf__streifen { background: var(--typ); border-radius: 4px; }
.sh-kopf__meta { margin: 4px 0 0; font-weight: 650; }
.sh-kopf__meta--klein { color: var(--gedaempft); font-weight: 500; font-size: .92rem; margin-top: 2px; }
.sh-block { display: grid; gap: 8px; }
.sh-block__titel { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gedaempft); font-weight: 800; display: flex; align-items: center; gap: 8px; margin: 0; }
.checkliste { white-space: pre-line; margin: 0; background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.personen { display: grid; gap: 8px; }
.personen__zeile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 0; }
.personen__text { display: grid; min-width: 0; }
.personen__name { font-weight: 700; overflow-wrap: anywhere; }
.personen__sub { color: var(--gedaempft); font-size: .88rem; overflow-wrap: anywhere; }
.personen__akt { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.sh-leer { color: var(--gedaempft); margin: 0; }
.sh-kann { margin: 0; font-size: .92rem; color: var(--gedaempft); }
.sh-hinweis { margin: -4px 0 0; color: var(--gedaempft); font-size: .88rem; text-align: center; }
.sh-aktionen { display: grid; gap: 10px; padding-top: 4px; }
.sh-admin { display: grid; gap: 8px; border-top: 1px solid var(--linie); padding-top: 14px; margin-top: 4px; }

/* ---------- Pferde ---------- */
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--sand); border-radius: 16px; margin-bottom: 16px; }
.segment__opt { min-height: 46px; display: grid; place-items: center; border-radius: 12px; text-decoration: none; color: var(--gedaempft); font-weight: 700; }
.segment__opt[aria-current="page"], .segment__opt[aria-pressed="true"] { background: var(--karte); color: var(--text); box-shadow: var(--schatten); }
button.segment__opt { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
button.segment__opt[aria-pressed="true"] { background: var(--karte); }
.segment--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pferdegitter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pferdekarte { display: block; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--text); box-shadow: var(--schatten); transition: transform .12s var(--ease); }
.pferdekarte:active { transform: scale(.98); }
.pferdekarte__text { display: grid; padding: 10px 12px 12px; }
.pferdekarte__name { font-weight: 750; font-size: 1.05rem; overflow-wrap: anywhere; }
.pferdekarte__sub { color: var(--gedaempft); font-size: .86rem; }
.foto { position: relative; aspect-ratio: 4 / 5; background: var(--sand); overflow: hidden; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto--leer { display: grid; place-items: center; color: color-mix(in srgb, var(--gedaempft) 55%, var(--sand)); --karte: var(--sand); }
.foto--leer .pferd-platzhalter { width: 58%; height: auto; }
.foto--hero { aspect-ratio: 4 / 3; border-radius: 22px; margin-top: 4px; }
.foto--form { width: 116px; flex: none; border-radius: 16px; }
.pferd__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 16px 0 12px; }
.hervor { border-radius: var(--r); padding: 16px 18px; margin-top: 12px; }
.hervor__titel { font-size: 1.05rem; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hervor__text { white-space: pre-line; margin: 0; font-size: 1.1rem; line-height: 1.5; overflow-wrap: anywhere; }
.hervor--futter { background: var(--primaer-soft); border: 1.5px solid color-mix(in srgb, var(--knopf-bg) 45%, transparent); }
.hervor--warn { background: var(--warn-bg); border: 1.5px solid var(--warn); }
.hervor--warn .hervor__titel { color: var(--warn-text); }
.infos { margin: 0; display: grid; }
.info { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.info:last-child { border-bottom: 0; padding-bottom: 0; }
.info dt { color: var(--gedaempft); font-size: .84rem; font-weight: 700; }
.info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
a.tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.fotoauswahl { display: flex; gap: 16px; align-items: flex-start; }
.fotoauswahl__akt { display: grid; gap: 4px; position: relative; min-width: 0; }
.fotoauswahl__akt .nur-sr { left: 0; top: 0; }
.fotoauswahl__akt label.btn { justify-self: start; }
.gefahrzone { margin-top: 24px; }

.futter { display: grid; gap: 10px; }
.futter__pferd { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); padding: 14px 16px; }
.futter__name { font-size: 1.15rem; margin-bottom: 4px; }
.futter__name a { color: var(--text); text-decoration: none; }
.futter__text { white-space: pre-line; margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.futter__bes { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); font-weight: 600; white-space: pre-line; }
.futter__bes .ico { margin-top: 2px; }

/* ---------- Mehr ---------- */
.profilkarte { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); text-decoration: none; color: var(--text); box-shadow: var(--schatten); }
.profilkarte__text { flex: 1; display: grid; min-width: 0; }
.profilkarte__name { font-weight: 800; font-size: 1.1rem; overflow-wrap: anywhere; }
.profilkarte__sub { color: var(--gedaempft); font-size: .9rem; }
.menue__eintrag { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 16px; color: var(--text); text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; border-bottom: 1px solid var(--linie); }
.karte--liste > .menue__eintrag:last-of-type { border-bottom: 0; }
.menue__eintrag:active { background: var(--sand); }
.menue__ico { width: 40px; height: 40px; border-radius: 12px; background: var(--primaer-soft); color: var(--link); display: grid; place-items: center; flex: none; }
.menue__text { flex: 1; display: grid; min-width: 0; }
.menue__label { font-weight: 650; }
.menue__sub { color: var(--gedaempft); font-size: .86rem; }
.menue__pfeil { color: var(--gedaempft); }
.installieren { padding: 0 16px; }
.installieren summary { display: flex; align-items: center; gap: 14px; min-height: 60px; cursor: pointer; list-style: none; }
.installieren summary::-webkit-details-marker { display: none; }
.installieren__inhalt { display: grid; gap: 10px; padding-bottom: 16px; }
.schritte { padding-left: 1.3em; list-style: decimal; display: grid; gap: 8px; margin: 0 0 8px; }
.schritte .ico { width: 20px; height: 20px; margin: -3px 2px 0; }
.abmelden { margin-top: 20px; }
.avidis-fuss { margin-top: 28px; text-align: center; color: var(--gedaempft); }
.avidis-fuss__kopie { margin: 0; font-size: .78rem; }
.fuss__avidis { margin: 0; padding-block: .4rem 1rem; text-align: center; text-wrap: balance; line-height: 2; font-size: .75rem; letter-spacing: .05em; color: var(--gedaempft); }
.fuss__avidis a { white-space: nowrap; font-weight: 600; letter-spacing: .12em; text-decoration: none; color: var(--text); opacity: .85; transition: color .25s; }
.fuss__avidis a:hover { color: var(--primaer); }
.herz { display: inline-block; width: .95em; height: .95em; margin: 0 .15em; vertical-align: -.14em; fill: #2F5D46; transform-origin: 50% 60%; animation: herzschlag 2.4s ease-in-out infinite; }
@media (prefers-color-scheme: dark) { .herz { fill: #7CBD96; } }
@keyframes herzschlag { 0%, 32%, 100% { transform: scale(1); } 11% { transform: scale(1.2); } 20% { transform: scale(1.04); } 26% { transform: scale(1.12); } }

/* ---------- Mitteilungen / Pinnwand ---------- */
.mitt { display: grid; gap: 8px; }
.mitt__eintrag { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; text-align: left; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); cursor: pointer; min-height: 64px; }
.mitt__eintrag--neu { border-color: color-mix(in srgb, var(--knopf-bg) 55%, transparent); background: var(--primaer-soft); }
.mitt__ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sand); display: grid; place-items: center; flex: none; color: var(--link); }
.mitt__text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.mitt__titel { font-weight: 750; overflow-wrap: anywhere; }
.mitt__inhalt { color: var(--text); overflow-wrap: anywhere; }
.mitt__zeit { color: var(--gedaempft); font-size: .84rem; }
.mitt__punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--warn); flex: none; margin-top: 6px; }
.pinliste { display: grid; gap: 10px; margin-top: 16px; }
.pinbeitrag { margin: 0; }
.pinbeitrag__text { white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 8px; }
.pinbeitrag__fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--gedaempft); font-size: .86rem; }

/* ---------- Zeiten ---------- */
.zeitenraster { display: grid; gap: 12px; }
.zeitentyp { border: 1px solid var(--linie); border-radius: var(--r); background: var(--karte); padding: 12px 14px 14px; margin: 0; min-width: 0; }
.zeitentyp__name { display: flex; align-items: center; gap: 8px; padding: 0; font-weight: 750; float: left; width: 100%; margin-bottom: 10px; }
.zeitentyp__name + * { clear: both; }
.zeitentyp__streifen { width: 8px; height: 22px; border-radius: 3px; background: var(--typ); }
.zeitentyp__zeit { margin-left: auto; color: var(--gedaempft); font-weight: 600; font-size: .88rem; }
.wochentage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.wtknopf { min-height: 48px; border-radius: 12px; border: 1.5px solid var(--linie-stark); background: transparent; font-weight: 750; cursor: pointer; display: grid; place-items: center; padding: 0; touch-action: manipulation; }
.wtknopf--an { background: var(--knopf-bg); color: var(--knopf-fg); border-color: var(--knopf-bg); }
.wtknopf--aus { border-style: dashed; border-color: var(--linie); color: var(--linie-stark); cursor: default; }
.abwliste { display: grid; margin-bottom: 4px; }
.abw { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.abw__text { display: grid; }

/* ---------- Push / Status ---------- */
.pushkarte { display: grid; gap: 10px; }
.pushkarte p { margin: 0; }
.status { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.status--ok { color: var(--ok-text); }

/* ---------- Onboarding ---------- */
.willkommen { max-width: 520px; margin: 0 auto; display: grid; gap: 14px; }
.schritte-kopf { display: grid; gap: 8px; }
.schritte-kopf__text { margin: 0; font-weight: 750; color: var(--gedaempft); font-size: .9rem; text-transform: uppercase; letter-spacing: .07em; }
.schritte-kopf__leiste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.schritte-kopf__punkt { height: 6px; border-radius: 3px; background: var(--sand); }
.schritte-kopf__punkt--an { background: var(--knopf-bg); }

/* ---------- Admin ---------- */
.mitglied { list-style: none; margin: 0; display: grid; gap: 12px; }
.mitglied__kopf { display: flex; gap: 12px; align-items: flex-start; }
.mitglied__text { display: grid; min-width: 0; }
.mitglied__name { font-weight: 750; overflow-wrap: anywhere; }
.mitglied__sub { color: var(--gedaempft); font-size: .9rem; overflow-wrap: anywhere; }
.mitglied__akt { display: flex; gap: 8px; flex-wrap: wrap; }
.typkarte { display: grid; grid-template-columns: 8px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 14px 16px 14px 0; text-align: left; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); cursor: pointer; overflow: hidden; }
.typkarte__streifen { align-self: stretch; background: var(--typ); }
.typkarte__text { display: grid; }
.typkarte__name { font-weight: 750; }
.typkarte__sub { color: var(--gedaempft); font-size: .9rem; }
.farben { display: flex; flex-wrap: wrap; gap: 10px; }
.farbe { position: relative; }
.farbe input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.farbe__punkt { width: 48px; height: 48px; border-radius: 50%; background: var(--c); display: grid; place-items: center; color: transparent; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--linie-stark); }
.farbe input:checked + .farbe__punkt { color: #fff; border-color: var(--karte); box-shadow: 0 0 0 3px var(--text); }
.farbe input:focus-visible + .farbe__punkt { outline: 3px solid var(--fokus); outline-offset: 3px; }
.tabellenrahmen { overflow-x: auto; margin: 12px 0; border: 1px solid var(--linie); border-radius: 14px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th, .tabelle td { padding: 10px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tabelle th { background: var(--sand); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gedaempft); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td:first-child { white-space: nowrap; }
.tabelle__grund { color: var(--gedaempft); font-size: .8rem; }
.statliste { display: grid; gap: 16px; }
.statzeile__kopf { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.statzeile__name { font-weight: 750; overflow-wrap: anywhere; }
.statzeile__sub { color: var(--gedaempft); font-size: .86rem; }
.statzeile__zahlen { color: var(--gedaempft); font-size: .86rem; margin: 6px 0 0; }
.stallcode { background: var(--kopf-bg); color: var(--kopf-fg); border-radius: 24px; padding: 22px 20px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.stallcode__kicker { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.stallcode__wert { margin: 0; font-size: 2.3rem; font-weight: 850; letter-spacing: .12em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.stallcode .btn--zweit { color: var(--kopf-fg); border-color: rgba(246, 241, 231, .6); }
.stallcode__hinweis { margin: 4px 0 0; font-size: .78rem; opacity: .75; overflow-wrap: anywhere; }

/* ---------- Plan: Woche & Monat ---------- */
.plan-kopf > .segment { margin: 0; padding: 3px; }
.plan-filter { margin: 0 0 12px; }
.plan-kopf > .segment .segment__opt { min-height: 44px; }
.plan-inhalt { min-height: 120px; }
.wgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.wzelle { display: grid; gap: 4px; align-content: stretch; min-width: 0; }
.wzelle--weg { min-height: 0; }
.wtag__kopf { min-height: 48px; display: grid; justify-items: center; align-content: center; padding: 2px 0; border-radius: 12px; border: 1.5px solid var(--linie); background: var(--karte); cursor: pointer; }
.wtag__wt { font-size: .72rem; color: var(--gedaempft); font-weight: 700; }
.wtag__nr { font-size: 1.05rem; font-weight: 800; }
.wtag__kopf--heute { border: 2px solid var(--knopf-bg); background: var(--primaer-soft); }
.wtag__kopf--heute .wtag__wt { color: var(--text); }
.wtag__weg { display: grid; place-items: center; color: var(--warn-text); }
.wtag__weg .ico { width: 17px; height: 17px; }
.wleerhinweis { margin-top: 12px; }
.wblock {
  position: relative; display: grid; gap: 3px; justify-items: center; align-content: start; width: 100%; height: 100%; min-height: 46px; padding: 8px 1px 4px;
  border: 1px solid var(--linie); border-radius: 9px; background: var(--karte); cursor: pointer; overflow: hidden; text-align: center; touch-action: manipulation;
}
.wblock::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--typ); }
.wblock:active { transform: scale(.97); }
.wblock__zeit { font-size: .74rem; font-weight: 800; line-height: 1.1; }
.wblock__titel { display: none; }
.wblock__leute { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
.wperson { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.wperson__name { display: none; }
.wleer { width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed var(--warn); display: inline-block; flex: none; }
.wblock--frei { background: var(--warn-bg); border-color: var(--warn); }
.wblock--mein { border: 2px solid var(--knopf-bg); background: var(--primaer-soft); }
.wblock--vorbei { opacity: .62; }

.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mkopf { text-align: center; font-size: .74rem; font-weight: 750; color: var(--gedaempft); padding: 0 0 2px; }
.mtag {
  position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; min-width: 0; min-height: 70px; padding: 4px 2px 4px;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); cursor: pointer; text-align: left; touch-action: manipulation;
}
.mtag:active { transform: scale(.97); }
.mtag__nr { font-size: .78rem; font-weight: 750; padding-left: 3px; line-height: 1.2; }
.mtag__offen { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.mtag__leute { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 4px 3px; margin-top: 3px; }
.mtag__leute .avatar { --av: 18px; }
.mplus { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--text); font-size: .62rem; font-weight: 800; box-shadow: inset 0 0 0 1px var(--av-rand); }
.mtag--fremd { opacity: .66; }
.mtag--mein { background: var(--primaer-soft); }
.mtag--heute { border: 2px solid var(--knopf-bg); }
.mtag--heute .mtag__nr { color: var(--link); }

.legende { margin-top: 16px; padding: 12px 14px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-klein); display: grid; gap: 10px; }
.legende__titel { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); }
.legende__leute { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.legende__person { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 600; min-height: 26px; }
.legende__zeichen { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--gedaempft); font-size: .84rem; }
.legende__zeichen > span { display: inline-flex; align-items: center; gap: 7px; }
.legende__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); display: inline-block; }
.legende__leer { color: var(--gedaempft); font-size: .9rem; margin: 0; }

@media (min-width: 760px) {
  .view:has(.plan--woche), .view:has(.plan--monat) { max-width: 1040px; }
  .wgrid { gap: 8px; }
  .wtag__kopf { min-height: 54px; }
  .wtag__wt { font-size: .82rem; }
  .wblock { justify-items: start; text-align: left; gap: 5px; padding: 10px 10px 9px 15px; min-height: 68px; border-radius: 12px; }
  .wblock::before { right: auto; bottom: 0; width: 5px; height: auto; }
  .wblock__zeit { font-size: .9rem; }
  .wblock__titel { display: block; font-size: .86rem; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
  .wblock__leute { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 5px; }
  .wperson__name { display: inline; font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .wleer { width: 22px; height: 22px; }
  .wblock__leute .avatar { --av: 24px; }
  .mgrid { gap: 6px; }
  .mtag { min-height: 104px; padding: 8px 6px; border-radius: 12px; }
  .mtag__nr { font-size: .95rem; padding-left: 2px; }
  .mtag__offen { top: 10px; right: 10px; width: 10px; height: 10px; }
  .mtag__leute { justify-content: flex-start; gap: 5px; margin-top: 6px; }
  .mtag__leute .avatar, .mplus { --av: 26px; width: 26px; height: 26px; }
}

/* ---------- Farbwahl ---------- */
.fw { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fw > legend { padding: 0; font-weight: 650; font-size: .95rem; margin-bottom: 4px; }
.fw__raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 4px; justify-items: center; }
.fw__opt { position: relative; width: 100%; max-width: 56px; height: 56px; display: grid; place-items: center; }
.fw__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.fw__punkt { width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: var(--fg, #fff); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--av-rand); transition: box-shadow .15s var(--ease); }
.fw__punkt .ico { width: 22px; height: 22px; stroke-width: 3; opacity: 0; }
.fw__opt input:checked + .fw__punkt, .fw__opt--an .fw__punkt { box-shadow: 0 0 0 2.5px var(--karte), 0 0 0 5px var(--text); }
.fw__opt input:checked + .fw__punkt .ico, .fw__opt--an .fw__punkt .ico { opacity: 1; }
.fw__opt input:focus-visible + .fw__punkt { outline: 3px solid var(--fokus); outline-offset: 6px; }
.fw__opt--eigen .fw__punkt { background: conic-gradient(#d33, #dd3, #3c4, #3cc, #33d, #c3c, #d33); }
.fw__opt--eigen.fw__opt--an .fw__punkt { background: var(--c); }
.fw__vorschau { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--sand); border-radius: 14px; font-weight: 650; min-width: 0; }
.fw__vorschau span:last-child { overflow-wrap: anywhere; }
.fw__hinweis { margin: 0; color: var(--gedaempft); font-size: .9rem; }
.fw__hinweis--doppelt { color: var(--warn-text); }
.fw + .seitenunter, .fw + .seitenunter + .btn { margin-top: 12px; }
.fw--kompakt .fw__vorschau { padding: 8px 12px; }

.avatarknopf { position: relative; flex: none; min-width: 48px; min-height: 48px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; margin: -3px -3px -3px -3px; }
.avatarknopf__stift { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--karte); color: var(--text); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--linie-stark); }
.avatarknopf__stift .ico { width: 12px; height: 12px; stroke-width: 2.6; }
.pinbeitrag__autor { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pin__meta { display: flex; align-items: center; gap: 7px; }

/* ---------- Live: Banner, Herunterziehen, Update-Band ---------- */
body { overscroll-behavior-y: contain; }
html { overscroll-behavior-y: contain; }

.livebanner {
  position: fixed; z-index: 90; left: 12px; right: 12px; top: calc(var(--kopf-h) + 8px);
  max-width: 576px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
body { --band-hoehe: 56px; }
body.hat-updateband { --band-h: var(--band-hoehe); }
body.hat-updateband .livebanner { top: calc(var(--kopf-h) + var(--band-h) + 8px); }
.lb {
  pointer-events: auto; display: flex; align-items: stretch; background: var(--karte); color: var(--text);
  border: 1px solid var(--linie-stark); border-left: 5px solid var(--akzent); border-radius: var(--r-klein);
  box-shadow: 0 8px 26px rgba(20, 30, 24, .22), var(--schatten);
  opacity: 0; transform: translateY(-14px); transition: opacity .22s var(--ease), transform .22s var(--ease); touch-action: pan-y;
}
.lb--da { opacity: 1; transform: none; }
.lb--weg { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.lb--zieht { transition: none; }
.lb__haupt {
  flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px 12px 14px;
  background: none; border: 0; text-align: left; cursor: pointer; color: inherit; border-radius: var(--r-klein) 0 0 var(--r-klein);
}
.lb__ico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--primaer-soft); color: var(--primaer); display: grid; place-items: center; }
.lb__ico .ico { width: 20px; height: 20px; }
.lb__text { display: grid; gap: 1px; min-width: 0; }
.lb__titel { font-weight: 750; font-size: .95rem; line-height: 1.25; }
.lb__inhalt { font-size: .86rem; color: var(--gedaempft); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb__zu { flex: none; width: 48px; min-height: 48px; align-self: flex-start; height: 48px; border: 0; background: none; color: var(--gedaempft); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.lb-mehr {
  pointer-events: auto; align-self: center; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--karte); color: var(--text); border: 1px solid var(--linie-stark); box-shadow: var(--schatten); font-weight: 700; font-size: .88rem; text-decoration: none;
}

.updateband {
  position: sticky; z-index: 29; top: var(--kopf-h); height: var(--band-hoehe); width: 100%; padding: 4px 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer;
  background: var(--warn-bg); color: var(--warn-text); font-weight: 700; font-size: .85rem; line-height: 1.25; text-align: left;
  border-bottom: 1px solid var(--warn);
}
body[data-layout="auth"] .updateband { top: var(--safe-o); }

.ziehen {
  --zieh: 0px;
  position: fixed; z-index: 25; left: 50%; top: var(--kopf-h); display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px 0 5px; border-radius: 999px; background: var(--karte); color: var(--text);
  border: 1px solid var(--linie-stark); box-shadow: var(--schatten); pointer-events: none; white-space: nowrap;
  transform: translate(-50%, calc(var(--zieh) - 64px)); opacity: 0; font-size: .86rem; font-weight: 700;
}
body[data-layout="auth"] .ziehen { top: var(--safe-o); }
.ziehen--da, .ziehen--laed { opacity: 1; }
.ziehen--zurueck { transition: transform .22s var(--ease), opacity .22s var(--ease); }
.ziehen--laed { transition: transform .18s var(--ease); }
.ziehen__kreis {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--primaer-soft); color: var(--primaer); transform: rotate(var(--dreh, 0deg)); transition: background .15s, color .15s;
}
.ziehen--bereit .ziehen__kreis { background: var(--knopf-bg); color: var(--knopf-fg); }
.ziehen__kreis .ico { width: 20px; height: 20px; }
.ziehen--laed .ziehen__kreis { animation: ziehen-dreh .9s linear infinite; }
@keyframes ziehen-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ziehen--laed .ziehen__kreis { animation: none; }
  .lb { transform: none; }
}
@media print { .livebanner, .ziehen, .updateband { display: none !important; } }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .herz { animation: none !important; }
  .view { transform: none; }
}

/* ---------- Druck (Futterliste) ---------- */
@media print {
  html { font-size: 12pt; }
  body { background: #fff; color: #000; }
  .kopf, .tabs, .toasts, .nicht-drucken, .segment, .zurueck, .skip, .btn { display: none !important; }
  .view { max-width: none; padding: 0; opacity: 1; transform: none; min-height: 0; }
  .nur-druck { display: block; color: #333; margin: 0 0 10pt; }
  .futter__pferd { break-inside: avoid; border: 0; border-bottom: 1px solid #999; border-radius: 0; padding: 8pt 0; background: none; }
  .futter__bes { background: none; color: #000; border: 1px solid #000; }
  .futter__name a { color: #000; }
  .seitentitel { font-size: 18pt; }
}

/* ---------- Feste Dienste (Serien) ---------- */
.schritte-kopf__leiste--4 { grid-template-columns: repeat(4, 1fr); }
.seite-serie { max-width: 560px; margin: 0 auto; }
.serie { display: grid; gap: 14px; }
.serie__titel { font-size: 1.35rem; margin: 6px 0 0; }
.serie__titel:focus { outline: none; }
.serie__unter { margin: -6px 0 2px; }
.serie__knoepfe { margin-top: 8px; position: sticky; bottom: calc(var(--tab-h) + var(--safe-u)); z-index: 5; padding: 10px 0; background: linear-gradient(to bottom, transparent, var(--bg) 22%); }
.serie__knoepfe > :last-child:not(:first-child) { flex: 1.6; }
.sheet .serie__knoepfe { bottom: 0; background: linear-gradient(to bottom, transparent, var(--karte) 22%); }
.serie__knoepfe--fertig { position: static; background: none; }
.serie__knoepfe--fertig { display: grid; gap: 10px; }
.serie__hinweis { margin: 0; color: var(--gedaempft); font-size: .95rem; }
.serie__hinweis--dauer { display: flex; align-items: flex-start; gap: 8px; }
.serie__hinweis--dauer .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.btn--aus { opacity: .55; }
.typwahl { display: grid; gap: 10px; }
.typkarte { display: grid; grid-template-columns: 8px 1fr auto; gap: 14px; align-items: center; min-height: 68px; padding: 10px 14px 10px 10px; background: var(--karte); border: 1.5px solid var(--linie); border-radius: 16px; cursor: pointer; }
.typkarte--an { border-color: var(--knopf-bg); background: var(--primaer-soft); }
.typkarte__streifen { align-self: stretch; min-height: 40px; background: var(--typ); border-radius: 4px; }
.typkarte__text { display: grid; min-width: 0; }
.typkarte__name { font-weight: 750; }
.typkarte__meta { color: var(--gedaempft); font-size: .9rem; }
.typkarte__box { width: 26px; height: 26px; margin: 0; accent-color: var(--knopf-bg); }
.wochentage--gross { gap: 6px; }
.wtknopf--gross { min-height: 60px; font-size: 1.02rem; }
.tagenotizen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tagenotiz { display: flex; align-items: flex-start; gap: 8px; font-size: .95rem; color: var(--ok-text); }
.tagenotiz .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.tagenotiz--warn { color: var(--warn-text); }
.auswahl__opt--zwei { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.auswahl__opt--zwei input { margin-top: 1px; }
.opt__text { display: grid; gap: 2px; min-width: 0; }
.opt__sub { font-weight: 500; color: var(--gedaempft); font-size: .9rem; }
.serie__pferd { margin-top: 6px; }

.vchips { display: flex; flex-wrap: wrap; gap: 8px; }
.vchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 999px; font-weight: 750; font-size: .92rem; background: var(--sand); color: var(--text); }
.vchip .ico { width: 18px; height: 18px; }
.vchip--frei { background: var(--ok-bg); color: var(--ok-text); }
.vchip--belegt { background: var(--warn-bg); color: var(--warn-text); box-shadow: inset 0 0 0 1.5px var(--warn); }
.vliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vmonat { margin-top: 8px; font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); }
.vzeile { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 12px; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; }
.vzeile__ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--gedaempft); }
.vzeile__ico .ico { width: 20px; height: 20px; }
.vzeile--frei .vzeile__ico { background: var(--ok-bg); color: var(--ok-text); }
.vzeile--belegt { border-color: var(--warn); background: color-mix(in srgb, var(--warn-bg) 55%, var(--karte)); }
.vzeile--belegt .vzeile__ico { background: var(--warn-bg); color: var(--warn-text); }
.vzeile--abwesend, .vzeile--meins { background: transparent; }
.vzeile__text { display: grid; gap: 3px; min-width: 0; }
.vzeile__kopf { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.vzeile__zeit { color: var(--gedaempft); font-size: .9rem; }
.vzeile__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .92rem; color: var(--gedaempft); }
.vzeile--frei .vzeile__status { color: var(--ok-text); font-weight: 650; }
.vzeile__status--belegt { color: var(--warn-text); font-weight: 650; }
.vzeile__wer { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 2px; background: var(--sand); border-radius: 999px; color: var(--text); font-weight: 650; }
.erfolg { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 18px 4px 6px; }
.erfolg__ico { width: 84px; height: 84px; border-radius: 50%; background: var(--ok-bg); color: var(--ok-text); display: grid; place-items: center; }
.erfolg__ico .ico { width: 44px; height: 44px; stroke-width: 2.4; }
.erfolg__text { color: var(--gedaempft); margin: 0; }
.serie-hinweis .seitenunter { margin: 0 0 12px; }

.plan-fab-zeile { position: sticky; bottom: calc(var(--tab-h) + var(--safe-u) + 14px); height: 0; display: flex; justify-content: flex-end; z-index: 15; pointer-events: none; }
.plan-fab { pointer-events: auto; transform: translateY(-100%); display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--knopf-bg); color: var(--knopf-fg); font-weight: 750; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.plan-fab .ico { width: 22px; height: 22px; stroke-width: 2.4; }
.plan-fab:active { transform: translateY(-100%) scale(.98); }
.plan { padding-bottom: 72px; }

.meineserien__unter { margin: -4px 0 12px; }
.serienliste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.serie-karte { margin-top: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 10px 12px 10px; }
.serie-karte__streifen { align-self: stretch; background: var(--typ); border-radius: 4px; min-height: 44px; }
.serie-karte__text { display: grid; gap: 1px; min-width: 0; }
.serie-karte__meta, .serie-karte__kommend { color: var(--gedaempft); font-size: .9rem; }
.serie-neu { margin-top: 4px; }

.luecken { margin: 0 0 14px; }
.luecken__karte { background: var(--warn-bg); border: 1.5px solid var(--warn); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.luecken__karte--ok { display: flex; align-items: center; gap: 12px; background: var(--ok-bg); border-color: transparent; color: var(--ok-text); }
.luecken__kopf { display: flex; align-items: flex-start; gap: 12px; }
.luecken__ico { flex: none; display: grid; place-items: center; color: var(--warn-text); }
.luecken__karte--ok .luecken__ico { color: var(--ok-text); }
.luecken__text { display: grid; gap: 2px; min-width: 0; }
.luecken__sub { color: var(--warn-text); font-size: .92rem; }
.luecken__toggle { justify-self: start; }
.luecken__tage { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.luecken__tag { display: grid; gap: 6px; }
.luecken__datum { font-weight: 750; font-size: .95rem; }
.luecken__schichten { display: grid; gap: 6px; }
.luecken__schicht { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px 0 10px; background: var(--karte); color: var(--text); border: 1.5px solid var(--linie); border-radius: 12px; text-align: left; cursor: pointer; font: inherit; }
.luecken__punkt { width: 8px; height: 26px; border-radius: 3px; background: var(--typ); flex: none; }
.luecken__zeit { font-variant-numeric: tabular-nums; font-weight: 700; }
.luecken__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.luecken__frei { font-weight: 800; font-size: .85rem; color: var(--warn-text); white-space: nowrap; }

.sh-wunsch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 10px 12px; background: var(--warn-bg); border: 1.5px solid var(--warn); border-radius: 12px; color: var(--warn-text); font-size: .92rem; }
.sh-wunsch .ico { width: 20px; height: 20px; flex: none; }
.sh-wunsch__avatare { display: inline-flex; gap: 4px; }
.sh-wunsch__hinweis { flex-basis: 100%; color: var(--gedaempft); font-size: .86rem; }

/* ---------- Mehrere Ställe ---------- */
.statuschip { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 800; border-radius: 999px; padding: 2px 10px; line-height: 1.4; white-space: nowrap; }
.statuschip--warn { background: var(--warn-bg); color: var(--warn-text); box-shadow: inset 0 0 0 1.5px var(--warn); }
.statuschip--fehler { background: var(--fehler-bg); color: var(--fehler-text); box-shadow: inset 0 0 0 1.5px var(--fehler); }
.statuschip--ok { background: var(--ok-bg); color: var(--ok-text); box-shadow: inset 0 0 0 1.5px var(--ok); }

.kontaktlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 650; overflow-wrap: anywhere; }
.kontaktlink .ico { width: 20px; height: 20px; }

/* Registrieren: zwei große Karten */
.wegwahl { display: grid; gap: 12px; }
.wegkarte { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 14px; border-radius: 18px; border: 1.5px solid var(--linie-stark); background: var(--bg); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s var(--ease); }
.wegkarte:active { transform: scale(.985); background: var(--sand); }
.wegkarte:hover { border-color: var(--knopf-bg); }
.wegkarte__ico { width: 52px; height: 52px; border-radius: 15px; background: var(--primaer-soft); color: var(--link); display: grid; place-items: center; flex: none; }
.wegkarte__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wegkarte__titel { font-weight: 750; font-size: 1.02rem; }
.wegkarte__sub { color: var(--gedaempft); font-size: .92rem; line-height: 1.35; }
.wegkarte__pfeil { color: var(--gedaempft); }

/* Sheet „Deine Ställe“ */
.stallwahl { display: grid; gap: 8px; }
.stallwahl__eintrag { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 16px; border: 1.5px solid var(--linie); background: var(--bg); color: var(--text); text-align: left; cursor: pointer; }
.stallwahl__eintrag:active { background: var(--sand); }
.stallwahl__eintrag--aktuell { border-color: var(--knopf-bg); background: var(--primaer-soft); }
.stallwahl__text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.stallwahl__name { font-weight: 750; overflow-wrap: anywhere; }
.stallwahl__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--gedaempft); font-size: .88rem; }
.stallwahl__haken { color: var(--ok-text); display: inline-flex; }
.stallwahl__haken .ico { stroke-width: 3; }
.stallwahl__aktionen { display: grid; gap: 8px; }
.stallwahl__mehr { border: 1.5px solid var(--linie); border-radius: 16px; background: var(--karte); overflow: hidden; }
.stallwahl__mehr > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; cursor: pointer; list-style: none; font-weight: 650; }
.stallwahl__mehr > summary::-webkit-details-marker { display: none; }
.stallwahl__mehr-text { flex: 1; }
.stallwahl__pfeil { color: var(--gedaempft); transition: transform .2s var(--ease); }
.stallwahl__mehr[open] .stallwahl__pfeil { transform: rotate(180deg); }
.stallwahl__form { padding: 4px 14px 16px; }

/* Zustandsseiten */
.leer__icon--warn { background: var(--warn-bg); color: var(--warn-text); }
.zustand__aktionen { display: grid; gap: 10px; width: 100%; justify-items: stretch; }
.zustand__aktionen:empty { display: none; }
.zustand__block { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--linie); }
.zustand__titel { font-size: 1.1rem; }
.zustand__kontakt { display: grid; justify-items: center; gap: 0; }
.auth__karte .btn--text.btn--block { justify-content: center; gap: 8px; }

/* Mehr: Meine Ställe */
.stallkarten { display: grid; gap: 10px; }
.stallkarten .karte { margin-top: 0; }
.stallkarte { display: grid; gap: 6px; }
.stallkarte--aktuell { border-color: var(--knopf-bg); }
.stallkarte__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.stallkarte__name { font-weight: 750; font-size: 1.05rem; overflow-wrap: anywhere; }
.stallkarte__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--gedaempft); font-size: .92rem; }
.stallkarte__knoepfe { margin-top: 4px; }
.stallkarte__knoepfe > * { flex: 0 1 auto; }
.stallkarte__knoepfe > .btn--gefahr-text:first-child { margin-left: -12px; }
.stallkarten__neu { margin-top: 12px; }

/* AVIDIS-Verwaltung */
.sa-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.sa-filter .chip { padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (min-width: 520px) { .sa-filter { grid-template-columns: repeat(4, auto); justify-content: start; } }
.chip__zahl { font-size: .8rem; font-weight: 800; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--sand); color: var(--text); }
.chip--an .chip__zahl { background: rgba(255, 255, 255, .22); color: inherit; }
.sa-liste { display: grid; gap: 12px; }
.sa-liste .karte { margin-top: 0; }
.sa-stall { display: grid; gap: 10px; }
.sa-stall--beantragt { border-color: var(--warn); }
.sa-stall__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sa-stall__name { font-size: 1.15rem; overflow-wrap: anywhere; }
.sa-stall__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--gedaempft); font-size: .94rem; }
.sa-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--text); background: var(--sand); border-radius: 6px; padding: 1px 7px; }
.sa-wartend { color: var(--warn-text); font-weight: 700; }
.sa-stall__block { display: grid; gap: 4px; }
.sa-leitungen { display: grid; gap: 4px; }
.sa-leitung { display: grid; gap: 0; }
.sa-leitung__name { font-weight: 650; }
.sa-leitung__links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.sa-stall__daten { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; color: var(--gedaempft); font-size: .88rem; }
.sa-stall__knoepfe { margin-top: 2px; }
.sa-stall__knoepfe > * { flex: 0 1 auto; min-width: 120px; }

@media (prefers-reduced-motion: reduce) {
  .wegkarte, .stallwahl__pfeil { transition: none; }
}

/* ---------- Plan: Ansichts-Umschalter (Liste · Woche · Monat) – bewusst kräftig, damit man ihn sofort sieht ---------- */
.plan-kopf { padding: 8px 16px 8px; gap: 8px; }
.plan-kopf > .segment--ansicht { margin: 0; padding: 3px; gap: 3px; background: var(--karte); border: 2px solid var(--primaer); border-radius: 18px; box-shadow: var(--schatten); }
.plan-kopf > .segment--ansicht .segment__opt {
  min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; border-radius: 14px;
  color: var(--text); font-size: 1rem; font-weight: 750; touch-action: manipulation; transition: background .15s var(--ease), color .15s var(--ease);
}
.plan-kopf > .segment--ansicht .segment__opt:active { background: var(--primaer-soft); }
.plan-kopf > .segment--ansicht button.segment__opt[aria-pressed="true"] { background: var(--knopf-bg); color: var(--knopf-fg); box-shadow: none; }
.segment--ansicht .ico { width: 22px; height: 22px; }

/* ---------- Aufgaben-Symbole ---------- */
.sym { display: inline-grid; place-items: center; flex: none; color: inherit; }
.sym .ico { width: 100%; height: 100%; }
.sym--extra { background: var(--warn); color: #2A1C00; border-radius: 5px; padding: 1px; box-sizing: border-box; }
.symreihe { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.symchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); font-size: .86rem; font-weight: 650; line-height: 1.2;
}
.symchip .ico { width: 18px; height: 18px; }
.symchip--extra { background: var(--warn-bg); color: var(--warn-text); box-shadow: inset 0 0 0 1.5px var(--warn); font-weight: 750; }
.symreihe--klein { gap: 4px; margin-top: 4px; }
.symreihe--klein .symchip { min-height: 24px; padding: 2px 8px 2px 5px; font-size: .78rem; gap: 4px; }
.symreihe--klein .symchip .ico { width: 15px; height: 15px; }
.symreihe--gross { gap: 8px; }
.symreihe--gross .symchip { min-height: 44px; padding: 6px 16px 6px 10px; gap: 10px; font-size: 1rem; }
.symreihe--gross .symchip .ico { width: 26px; height: 26px; }
.schicht__aufgaben { display: flex; flex-wrap: wrap; gap: 6px; }

/* „Das ist zu tun“ (Schicht-Sheet, Heute-Karte) */
.todo { display: grid; gap: 10px; }
.todo__extra { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--warn-bg); border: 1.5px solid var(--warn); }
.todo__kopf { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; font-weight: 800; color: var(--warn-text); }
.todo__kopf .ico { width: 20px; height: 20px; }
.todo__extra .symchip--extra { background: var(--karte); color: var(--text); }
.naechster__todo { display: grid; gap: 8px; margin-top: 12px; position: relative; z-index: 1; }
.naechster__kicker--todo { font-size: .74rem; }
.naechster .symchip:not(.symchip--extra) { background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }

/* Woche / Monat: nur kleine Symbole */
.symmini { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; max-width: 100%; min-width: 0; }
.symmini__pkt { display: inline-flex; }
.symmini .sym { width: 16px; height: 16px; }
.symmini__mehr { font-size: .62rem; font-weight: 800; color: var(--gedaempft); }
.symmini--monat { margin-top: 3px; align-self: end; }
.symmini--monat .sym { width: 14px; height: 14px; }

/* Legende: Aufgaben */
.legende__block { display: grid; gap: 8px; }
.legende__aufgaben { display: flex; flex-wrap: wrap; gap: 6px; }
.legende .symchip { min-height: 26px; font-size: .82rem; padding: 2px 9px 2px 6px; }
.legende .symchip .ico { width: 16px; height: 16px; }
.legende__hinweis { margin: 0; color: var(--gedaempft); font-size: .82rem; }

/* Auswahl per Chips (Diensttyp, Extra-Aufgaben) */
.symwahl__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.symwahl__chip {
  min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 14px; border: 1.5px solid var(--linie-stark);
  background: transparent; color: var(--text); font: inherit; font-weight: 650; text-align: left; cursor: pointer; touch-action: manipulation;
}
.symwahl__chip .ico { width: 24px; height: 24px; }
.symwahl__chip[aria-pressed="true"] { background: var(--knopf-bg); color: var(--knopf-fg); border-color: var(--knopf-bg); font-weight: 750; }
.symwahl__chip--extra[aria-pressed="true"] { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }

@media (min-width: 760px) {
  .wblock .symmini { justify-content: flex-start; gap: 3px; }
  .symmini .sym { width: 20px; height: 20px; }
  .symmini--monat .sym { width: 20px; height: 20px; }
  .symmini--monat { justify-content: flex-start; gap: 4px; margin-top: 6px; }
}
.mtag { grid-template-rows: auto 1fr auto; }