/* Komponenten – Maße und Farben aus der Übergabe. Klassen deutsch, BEM-artig. */

/* ---- Karten ---- */
.karte { background: var(--card); border: 1px solid var(--ink-12); border-radius: var(--r-karte); padding: 16px 18px; color: var(--ink); }
.karte--gross { border-radius: var(--r-gross); padding: 20px 22px 18px; }
.karte--26 { border-radius: var(--r-26); }
.karte--22 { border-radius: var(--r-22); padding: 15px 17px; }
.karte--klein { border-radius: var(--r-klein); padding: 12px 14px; }
.karte--ac { background: var(--ac); border-color: var(--ac); color: var(--bg); }
.karte--ac-l { background: var(--ac-l); border-color: var(--ac-l); }
.karte--ac2-l { background: var(--ac2-l); border-color: var(--ac2-l); }
.karte--rand-ac { border: 2px solid var(--ac); }
.karte--zeile { display: flex; align-items: center; gap: 13px; text-align: left; width: 100%; }
button.karte { -webkit-appearance: none; appearance: none; }
@media (hover: hover) {
  button.karte:hover, a.karte:hover { border-color: var(--ac); }
  button.karte--ac2-l:hover { border-color: var(--ac2); }
}

/* ---- Pillen ---- */
.pille { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-pille);
  padding: 9px 14px; font: 700 var(--t-12)/1 var(--font-body); border: 1px solid var(--ink-12); background: transparent; color: var(--ink); min-height: 36px; white-space: nowrap; }
.pille--aktiv { background: var(--ac); border-color: var(--ac); color: var(--bg); }
.pille--ac { background: var(--ac); border-color: var(--ac); color: var(--bg); }
.pille--ac-l { background: var(--ac-l); border-color: var(--ac-l); color: var(--ac-d); }
.pille--ac2 { background: var(--ac2); border-color: var(--ac2); color: var(--bg); }
.pille--ac2-l { background: var(--ac2-l); border-color: var(--ac2-l); color: var(--ac2-d); }
.pille--neutral { border-color: transparent; color: var(--ink-45); }
.pille--umriss { color: var(--ink-60); }
.pille--klein { padding: 5px 9px; font-size: var(--t-mini); min-height: 0; }
.pille--klein-ac2 { padding: 6px 14px; letter-spacing: .09em; text-transform: uppercase; font-size: var(--t-11); background: var(--ac2-l); border-color: var(--ac2-l); color: var(--ac2-d); }
.pille--tipp { min-height: var(--tippziel); padding: 10px 13px; }
button.pille { -webkit-appearance: none; appearance: none; }
@media (hover: hover) {
  button.pille:not(.pille--aktiv):hover { background: var(--ac-l); border-color: var(--ac); color: var(--ac-d); }
  button.pille--aktiv:hover { background: var(--ac-d); border-color: var(--ac-d); }
  button.pille--ac-l:hover { background: var(--ac); color: var(--bg); border-color: var(--ac); }
}
.pillen { display: flex; gap: 6px; flex-wrap: wrap; }
.pillen--gleich > * { flex: 1; }

/* ---- Knöpfe ---- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--r-pille);
  border: 1px solid var(--ink-12); background: var(--card); color: var(--ink); padding: 14px 20px;
  font: 700 var(--t-14)/1 var(--font-body); min-height: var(--tippziel); text-decoration: none; -webkit-appearance: none; appearance: none;
  transition: background var(--dauer), color var(--dauer), border-color var(--dauer); }
.knopf--primaer { background: var(--ac); border-color: var(--ac); color: var(--bg); font-family: var(--font-heading); font-weight: 400; font-size: var(--t-18); min-height: 56px; padding: 16px 22px; }
.knopf--primaer-klein { background: var(--ac); border-color: var(--ac); color: var(--bg); font-size: var(--t-135); padding: 13px 20px; min-height: 46px; }
.knopf--hell { background: var(--ac-l); border-color: var(--ac-l); color: var(--ac-d); }
.knopf--umriss { background: transparent; color: var(--ac-d); }
.knopf--geist { background: transparent; border-color: transparent; color: var(--ac-d); padding: 10px 4px; font-size: var(--t-135); justify-content: flex-start; }
.knopf--klein { padding: 10px 14px; font-size: var(--t-13); min-height: 40px; }
.knopf--block { width: 100%; }
.knopf--rund { width: var(--groesse, 44px); height: var(--groesse, 44px); min-height: 0; padding: 0; border-radius: 999px; }
.knopf--rund.knopf--ac { background: var(--ac); border-color: var(--ac); color: var(--bg); }
.knopf--rund.knopf--ac2 { background: var(--ac2); border-color: var(--ac2); color: var(--bg); }
.knopf--rund.knopf--bg { background: var(--bg); }
.knopf--inaktiv, .knopf:disabled { background: var(--ink-12); border-color: transparent; color: var(--ink-40); cursor: default; }
@media (hover: hover) {
  .knopf:not(:disabled):not(.knopf--inaktiv):hover { background: var(--ac-l); border-color: var(--ac); color: var(--ac-d); }
  .knopf--primaer:not(:disabled):hover, .knopf--primaer-klein:not(:disabled):hover, .knopf--rund.knopf--ac:hover { background: var(--ac-d); border-color: var(--ac-d); color: var(--bg); }
  .knopf--rund.knopf--ac2:hover { background: var(--ac2-d); border-color: var(--ac2-d); color: var(--bg); }
}
.knopf .ico { flex: none; }

/* ---- Icons, Kreise, Avatare ---- */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--18 { width: 18px; height: 18px; } .ico--19 { width: 19px; height: 19px; } .ico--20 { width: 20px; height: 20px; }
.ico--22 { width: 22px; height: 22px; } .ico--25 { width: 25px; height: 25px; } .ico--26 { width: 26px; height: 26px; }
.ico--28 { width: 28px; height: 28px; } .ico--34 { width: 34px; height: 34px; }
.kreis { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; flex: none;
  width: var(--groesse, 40px); height: var(--groesse, 40px); font: 700 var(--t-14)/1 var(--font-body); }
.kreis--34 { --groesse: 34px; } .kreis--36 { --groesse: 36px; } .kreis--38 { --groesse: 38px; } .kreis--42 { --groesse: 42px; }
.kreis--46 { --groesse: 46px; font-size: 19px; } .kreis--52 { --groesse: 52px; font-size: 19px; } .kreis--58 { --groesse: 58px; }
.kreis--60 { --groesse: 60px; } .kreis--64 { --groesse: 64px; }
.kreis--ac { background: var(--ac); color: var(--bg); }
.kreis--ac2 { background: var(--ac2); color: var(--bg); }
.kreis--ac-l { background: var(--ac-l); color: var(--ac-d); }
.kreis--ac2-l { background: var(--ac2-l); color: var(--ac2-d); }
.kreis--card { background: var(--card); border: 1px solid var(--ink-12); color: var(--ink); }
.kreis--umriss { border: 1px solid var(--ink-12); color: var(--ink-35); }
.kreis--klein-text { font-size: var(--t-12); }

/* ---- Hinweise ---- */
.hinweis { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-20); padding: 14px 16px; font: 400 var(--t-sek)/1.45 var(--font-body); }
.hinweis--ac2 { background: var(--ac2-l); color: var(--ac2-d); }
.hinweis--ac { background: var(--ac-l); color: var(--ac-d); }
.hinweis--fehler { background: var(--ac-l); color: var(--ac-d); border: 1px solid var(--ac); font-weight: 600; }
.hinweis .ico { margin-top: 1px; }

/* ---- Formularfelder ---- */
.feld { display: flex; flex-direction: column; gap: 8px; }
.eingabe { background: var(--card); border: 1px solid var(--ink-12); border-radius: var(--r-16); padding: 14px 18px; font: 600 var(--t-std)/1.2 var(--font-body); color: var(--ink); width: 100%; min-height: 50px; }
.eingabe--pille { border-radius: var(--r-pille); padding: 16px 20px; }
.eingabe::placeholder { color: var(--ink-40); font-weight: 600; }
.eingabe:focus { border-color: var(--ac); }
.eingabe--mehrzeilig { min-height: 96px; resize: vertical; line-height: 1.45; }
.eingabe--klein { padding: 10px 14px; min-height: var(--tippziel); font-size: var(--t-14); }
select.eingabe { -webkit-appearance: none; appearance: none; }

/* Login: 7 Code-Kästen über EINEM Eingabefeld */
.code-kaesten { position: relative; display: flex; gap: 6px; }
.code-kaesten .code-eingabe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; caret-color: transparent; border: 0; background: transparent; }
.code-kasten { flex: 1; aspect-ratio: 3 / 4; max-height: 58px; border: 2px solid var(--ink-16); border-radius: var(--r-16); background: var(--card);
  display: flex; align-items: center; justify-content: center; font: 400 20px/1 var(--font-heading); color: var(--ink); pointer-events: none; transition: border-color var(--dauer); }
.code-kasten--voll { border-color: var(--ac); }
.code-kasten--aktiv { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-l); }
.code-kaesten--fehler .code-kasten { border-color: var(--ac); background: var(--ac-l); }
.code-kasten--trenner { flex: 0 0 8px; border: 0; background: transparent; align-self: center; height: 2px; max-height: 2px; }

/* ---- Schalter ---- */
.schalter { width: 58px; height: 34px; border-radius: 999px; background: var(--ink-16); border: 0; padding: 4px; display: inline-flex; align-items: center; justify-content: flex-start; flex: none; transition: background var(--dauer); }
.schalter__knopf { width: 26px; height: 26px; border-radius: 999px; background: var(--card); box-shadow: var(--schatten-sm); transition: transform var(--dauer); }
.schalter[aria-checked="true"] { background: var(--ac); }
.schalter--ac2[aria-checked="true"] { background: var(--ac2); }
.schalter[aria-checked="true"] .schalter__knopf { transform: translateX(24px); }
.schalter--klein { width: 50px; height: 30px; }
.schalter--klein .schalter__knopf { width: 22px; height: 22px; }
.schalter--klein[aria-checked="true"] .schalter__knopf { transform: translateX(20px); }

/* ---- Balken, Fortschritt ---- */
.balken { height: 7px; border-radius: 999px; background: var(--ink-12); overflow: hidden; width: 100%; }
.balken--8 { height: 8px; } .balken--12 { height: 12px; }
.balken__fuellung { display: block; height: 100%; border-radius: 999px; background: var(--ac); transition: width .3s; }
.balken__fuellung--voll { background: var(--ac2); }
.balken--mini { width: 54px; flex: none; }

/* ---- Bestätigung (2,6 s) und Toast ---- */
.bestaetigung { position: fixed; left: 50%; bottom: calc(var(--s-tab-unten) - 30px); transform: translateX(-50%); z-index: 60;
  background: var(--ac); color: var(--bg); border-radius: var(--r-22); padding: 14px 17px; font: 700 var(--t-135)/1.35 var(--font-body);
  max-width: min(92vw, 420px); box-shadow: var(--schatten-lg); animation: bestaetigung-auf .25s ease-out; }
.bestaetigung--oben { top: calc(env(safe-area-inset-top, 0px) + 20px); bottom: auto; left: auto; right: 20px; transform: none; }
@keyframes bestaetigung-auf { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--s-tab-unten) + 8px); z-index: 70; display: flex; gap: 12px; align-items: center;
  background: var(--ink); color: var(--bg); border-radius: var(--r-20); padding: 12px 14px 12px 18px; font: 600 var(--t-135)/1.3 var(--font-body); box-shadow: var(--schatten-lg); max-width: 92vw; }
.toast .knopf { min-height: var(--tippziel); }

/* ---- Miniaturen (Notenlinien-Platzhalter) ---- */
.miniatur { width: 56px; height: 70px; border-radius: var(--r-mini); background: var(--bg); border: 1px solid var(--ink-12); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 8px; flex: none; overflow: hidden; }
.miniatur span { display: block; height: 2px; background: var(--ink-20); border-radius: 1px; }
.miniatur--78 { width: 100%; height: 78px; border-radius: var(--r-14); }
.miniatur--74 { width: 74px; height: 74px; }
.miniatur img { width: 100%; height: 100%; object-fit: cover; }
.miniatur--bild { padding: 0; }

/* ---- Listenzeile mit Trenner ---- */
.liste { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--ink-12); border-radius: var(--r-karte); overflow: hidden; }
.liste__zeile { display: flex; align-items: center; gap: 13px; padding: 15px 18px; min-height: 58px; border-bottom: 1px solid var(--ink-12); background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; width: 100%; color: var(--ink); }
.liste__zeile:last-child { border-bottom: 0; }
@media (hover: hover) { button.liste__zeile:hover, a.liste__zeile:hover { background: var(--ac-l); } }

/* ---- Chips (Bibliothek) ---- */
.chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 9px 14px; font: 700 var(--t-12)/1 var(--font-body); border: 1px solid var(--ink-12); color: var(--ink); background: transparent; }
.chip--aktiv { background: var(--ac); border-color: var(--ac); color: var(--bg); }

/* ---- Tag/Etikett ---- */
.etikett { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font: 700 var(--t-mini)/1 var(--font-body); border: 1px solid var(--ink-12); color: var(--ink-60); white-space: nowrap; }
.etikett--ac-l { background: var(--ac-l); border-color: var(--ac-l); color: var(--ac-d); }
.etikett--ac2-l { background: var(--ac2-l); border-color: var(--ac2-l); color: var(--ac2-d); }
.etikett--ac { background: var(--ac); border-color: var(--ac); color: var(--bg); }
.etikett--neutral { border-color: transparent; color: var(--ink-40); }

/* ---- Punkte (Schwierigkeit) ---- */
.punkte { display: inline-flex; gap: 3px; }
.punkte span { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-12); }
.punkte span.an { background: var(--ac); }
.punkte--leicht span.an { background: var(--ac2); }

/* ---- Sprechblasen ---- */
.blase { max-width: 80%; padding: 13px 16px; font: 400 var(--t-14)/1.5 var(--font-body); }
.blase--ein { align-self: flex-start; background: var(--card); border: 1px solid var(--ink-12); border-radius: 22px 22px 22px 6px; }
.blase--aus { align-self: flex-end; background: var(--ac); color: var(--bg); border-radius: 22px 22px 6px 22px; }

/* ---- Farbschema-Muster ---- */
.schema-muster { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; padding: 0; }
.schema-muster__kreis { width: 58px; height: 58px; border-radius: 999px; border: 3px solid var(--ink-12); display: flex; align-items: center; justify-content: center; gap: 3px; }
.schema-muster[aria-checked="true"] .schema-muster__kreis { border-color: var(--ink); }
.schema-muster__stab { width: 14px; height: 28px; border-radius: 999px; }
.schema-muster span:last-child { font: 700 var(--t-kicker)/1 var(--font-body); color: var(--ink-60); }

/* ---- Datumsblock, Termine ---- */
.termin-datum { width: 54px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.termin-datum .zahl { font-size: 24px; }
.termin-datum span:last-child { font: 700 var(--t-11)/1 var(--font-body); text-transform: uppercase; color: var(--ink-60); }
.trenner-v { width: 1px; align-self: stretch; background: var(--ink-12); flex: none; }

/* ---- Countdown ---- */
.countdown { display: flex; gap: 8px; }
.countdown__block { flex: 1; background: var(--card); border-radius: var(--r-klein); padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.countdown__block .zahl { font-size: 26px; color: var(--ac2-d); }
.countdown__block span:last-child { font: 700 10px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60); }

/* ---- Ring (Timer) ---- */
.ring { width: 252px; height: 252px; position: relative; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__spur { fill: none; stroke: var(--ac-l); stroke-width: 12; }
.ring__fortschritt { fill: none; stroke: var(--ac); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 326.7; transition: stroke-dashoffset .5s linear; }
.ring__mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ring__zeit { font-family: var(--font-heading); font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }
.ring__hinweis { font: 700 var(--t-13)/1 var(--font-body); color: var(--ink-60); }

/* ---- Hügel (Wochenkarte) ---- */
.huegel { width: 100%; height: 76px; display: block; overflow: visible; }
.huegel__flaeche { fill: rgba(255, 255, 255, .22); }
.huegel__linie { fill: none; stroke: var(--bg); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.huegel__punkt { stroke: var(--bg); stroke-width: 3; }
.huegel-tage { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font: 700 var(--t-kicker)/1 var(--font-body); }

/* ---- Abzeichen ---- */
.abzeichen { border-radius: var(--r-22); border: 1px solid transparent; padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.abzeichen--ac { background: var(--ac-l); } .abzeichen--ac .kreis { background: var(--ac); color: var(--bg); } .abzeichen--ac span:last-child { color: var(--ac-d); }
.abzeichen--ac2 { background: var(--ac2-l); } .abzeichen--ac2 .kreis { background: var(--ac2); color: var(--bg); } .abzeichen--ac2 span:last-child { color: var(--ac2-d); }
.abzeichen--offen { border-color: var(--ink-12); } .abzeichen--offen .kreis { border: 1px solid var(--ink-12); color: var(--ink-35); } .abzeichen--offen span:last-child { color: var(--ink-35); }
.abzeichen .kreis { --groesse: 44px; font-family: var(--font-heading); font-size: 18px; }
.abzeichen span:last-child { font: 700 var(--t-11)/1.2 var(--font-body); }
.abzeichen--neu { position: relative; }
.abzeichen--neu::after { content: "Neu"; position: absolute; top: 8px; right: 8px; background: var(--ac2); color: var(--bg); border-radius: 999px; padding: 3px 7px; font: 700 9px/1 var(--font-body); }

/* ---- Wochenbalken ---- */
.wochenbalken { display: flex; align-items: flex-end; gap: 12px; height: 150px; }
.wochenbalken__spalte { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.wochenbalken__wert { font: 700 var(--t-12)/1 var(--font-body); color: var(--ink-60); }
.wochenbalken__balken { width: 100%; border-radius: 14px 14px 6px 6px; background: var(--ac-l); min-height: 6px; }
.wochenbalken__balken--jetzt { background: var(--ac); }
.wochenbalken__label { font: 700 var(--t-11)/1 var(--font-body); color: var(--ink-35); }

/* ---- Tabelle (Lehrer-Tablet) ---- */
.tabelle { display: flex; flex-direction: column; }
.tabelle__kopf, .tabelle__zeile { display: grid; grid-template-columns: 2.1fr 1.1fr 1.5fr .9fr 1fr; gap: 12px; align-items: center; padding: 12px 6px; }
.tabelle__kopf { font: 700 var(--t-kicker)/1 var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-35); border-bottom: 1px solid var(--ink-12); }
.tabelle__zeile { border-bottom: 1px solid var(--ink-12); min-height: 58px; }
.tabelle__zeile:last-child { border-bottom: 0; }

/* ---- Kalender-Block ---- */
.kalender-block { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 8px 12px; border-radius: 10px; border-left: 4px solid var(--ink-20); background: var(--bg); }
.kalender-block--probe { border-left-color: var(--ac2); background: var(--ac2-l); color: var(--ac2-d); }
.kalender-block--auftritt { border-left-color: var(--ac); background: var(--ac-l); color: var(--ac-d); }
.kalender-block__zeit { font: 700 var(--t-kicker)/1 var(--font-body); }
.kalender-block__titel { font: 600 var(--t-sek)/1.25 var(--font-body); }

/* ---- Drop-Zone ---- */
.dropzone { min-height: 250px; border: 2px dashed var(--ac); border-radius: var(--r-gross); background: var(--ac-l); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--ac-d); }
.dropzone--aktiv { background: var(--ac); color: var(--bg); }
.dropzone--aktiv .kreis { background: var(--bg); color: var(--ac); }

/* ---- Stepper ---- */
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper .zahl { min-width: 84px; text-align: center; font-size: 26px; }

/* ---- Segment (Kinder-Auswahl) ---- */
.segment { display: inline-flex; background: var(--surface); border-radius: 999px; padding: 4px; gap: 4px; }
.segment > button { border: 0; background: transparent; border-radius: 999px; padding: 9px 14px; font: 700 var(--t-13)/1 var(--font-body); color: var(--ink-60); min-height: var(--tippziel); }
.segment > button[aria-pressed="true"] { background: var(--card); color: var(--ac-d); box-shadow: var(--schatten-sm); }

/* ---- Dialog ---- */
.dialog-hintergrund { position: fixed; inset: 0; background: rgba(var(--ink-rgb), .35); z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.dialog { background: var(--card); border-radius: var(--r-gross); padding: 22px; width: 100%; max-width: 520px; box-shadow: var(--schatten-lg); display: flex; flex-direction: column; gap: 14px; max-height: 88vh; overflow: auto; }
@media (min-width: 700px) { .dialog-hintergrund { align-items: center; } }

/* ---- Ladeanzeige ---- */
.app-laden { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.app-laden .kreis { animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .75; } }

/* ---- Wellenform-Platzhalter ---- */
.welle { display: flex; align-items: center; gap: 3px; height: 28px; }
.welle span { width: 3px; border-radius: 2px; background: var(--ink-20); height: var(--h, 40%); }

/* ---- Leere Zustände ---- */
.leer { padding: 24px; text-align: center; color: var(--ink-60); font-size: var(--t-14); border: 1px dashed var(--ink-12); border-radius: var(--r-22); }

/* ---- Login-Seite ---- */
.login__form .knopf--primaer { width: 100%; }
.login__demo { display: flex; flex-direction: column; gap: 9px; }
.login__demo form { display: contents; }
.login__demo-zeile { border-radius: var(--r-20); padding: 12px 15px; min-height: 58px; }
.login__demo-zeile .mono { flex: none; white-space: nowrap; }
.login__fuss { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.login__links a { color: var(--ink-60); }
.gast__punkte { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gast__punkte li { display: flex; align-items: center; gap: 12px; font: 600 var(--t-14)/1.3 var(--font-body); }
.gast__pille { align-self: flex-start; }
.gast__fuss { margin-top: auto; }
.kalender-block--extern { border-left-color: var(--ink-40); background: var(--surface); color: var(--ink-60); }
.kalender-block--abgesagt { opacity: .55; text-decoration: line-through; }
.kalender-block--knopf { border-top: 0; border-right: 0; border-bottom: 0; text-align: left; width: 100%; cursor: pointer; font: inherit; }
@media (hover: hover) { .kalender-block--knopf:hover { filter: brightness(.96); } }
.lob-vorschlag { text-align: left; width: 100%; font: 400 var(--t-13)/1.4 var(--font-body); }
@media (hover: hover) { .lob-vorschlag:hover { border-color: var(--ac2); background: var(--ac2-l); } }

/* Ziehen-zum-Aktualisieren: kleiner Kreis mit Pfeil, der dem Finger folgt und sich bei Erreichen der Schwelle füllt */
.ziehen { position: fixed; top: env(safe-area-inset-top, 0px); left: 50%; transform: translate(-50%, -52px); width: 40px; height: 40px; border-radius: 999px;
  background: var(--card); color: var(--ac-d); box-shadow: var(--schatten-md); display: flex; align-items: center; justify-content: center;
  font: 700 20px/1 var(--font-body); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .15s ease, background .15s ease, color .15s ease; }
.ziehen--sichtbar { opacity: 1; }
.ziehen--bereit { background: var(--ac); color: var(--bg); }
body.aktualisiert #app { opacity: .6; transition: opacity .2s ease; }