/* Kalender (bg/012, Nutzer 05.11.2026: „Der Kalender sollte schön aussehen und zum Layout passen. Funktional und einfach zu bedienen“).
   Nur Variablen aus app.css (und der Marke darüber): hell und dunkel ohne eigene Farbwerte. Gold markiert „heute“, die rote Linie „jetzt“
   (wie in jedem Kalender), Termine in der Farbe ihres Kalenders – Fläche getönt, Schrift im dunklen Ton derselben Farbe. */

.kalender { --kal-stunde: 48px; --kal-rinne: 58px; display: flex; flex-direction: column; gap: 12px; }
svg.ic.mini { width: 13px; height: 13px; stroke-width: 2; }

/* Farben der Kalender: Fläche, Schrift, Punkt */
.farbe-gold   { --kal-hg: var(--akzent-hg-stark); --kal-text: var(--akzent-text); --kal-punkt: var(--akzent); }
.farbe-gruen  { --kal-hg: var(--gruen-hg);  --kal-text: var(--gruen-text);  --kal-punkt: var(--gruen); }
.farbe-orange { --kal-hg: var(--orange-hg); --kal-text: var(--orange-text); --kal-punkt: var(--orange); }
.farbe-rot    { --kal-hg: var(--rot-hg);    --kal-text: var(--rot-text);    --kal-punkt: var(--rot); }
.farbe-lila   { --kal-hg: var(--lila-hg);   --kal-text: var(--lila-text);   --kal-punkt: var(--lila); }
.farbe-grau   { --kal-hg: var(--grau-hg);   --kal-text: var(--grau-text);   --kal-punkt: var(--grau-text); }
.kal-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--kal-punkt, var(--akzent)); flex: none; }

/* Kopf und Leiste ---------------------------------------------------------------------------------------------------------------- */
.kal-kopf { margin-bottom: 4px; }
.kal-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kal-nav { display: inline-flex; align-items: center; gap: 4px; }
.kal-pfeil { width: 36px; min-height: 36px; }
.kal-heute { min-height: 36px; }
.kal-zeitraum { margin: 0; font-family: var(--schrift-titel); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1;
  display: inline-flex; align-items: baseline; gap: 10px; }
.kal-kw { font-family: var(--schrift); font-size: 12.5px; font-weight: 500; color: var(--text-2); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.kal-segmente button { min-width: 64px; justify-content: center; min-height: 32px; }

.kal-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kal-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 12px 4px 10px; border-radius: 999px;
  border: 0.5px solid var(--linie-stark); background: transparent; color: var(--text-2); font-size: 13px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s; }
.kal-chip .kal-punkt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--kal-punkt); }
.kal-chip.an { background: var(--kal-hg); color: var(--text); border-color: transparent; }
.kal-chip.an .kal-punkt { background: var(--kal-punkt); box-shadow: none; }
.kal-chip:hover { border-color: var(--kal-punkt); }
.kal-chip:focus-visible, .kal-termin:focus-visible, .kal-mnr:focus-visible, .kal-ehaupt:focus-visible, .kal-tagwahl:focus-visible,
.kal-wtag:focus-visible, .kal-person:focus-visible, .kal-farbe:focus-visible, .kal-mehr:focus-visible { outline: none; box-shadow: var(--fokus); }
.kal-verwalten { margin-left: 2px; }

.kal-flaeche { min-height: 320px; position: relative; }
.kal-flaeche[aria-busy="true"] > :not(.lade-flaeche) { opacity: 0.55; transition: opacity 0.2s 0.15s; }
.kal-leerhinweis { margin: 10px 4px 0; color: var(--text-2); font-size: 13px; }
.kalender.kal-ablegen .kal-flaeche { outline: 2px dashed var(--akzent); outline-offset: 4px; border-radius: var(--radius); }

/* Woche ------------------------------------------------------------------------------------------------------------------------------ */
.kal-woche { --tage: 7; background: var(--hg-2); border-radius: var(--radius-g); box-shadow: var(--schatten); overflow: hidden; }
.kal-wkopf, .kal-ganztag, .kal-stunden { display: grid; grid-template-columns: var(--kal-rinne) repeat(var(--tage), minmax(0, 1fr)); }
.kal-wkopf { border-bottom: 0.5px solid var(--linie); }
.kal-tagkopf { padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.kal-tagkopf .kal-wt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.kal-tagkopf b { font-family: var(--schrift-titel); font-size: 25px; font-weight: 500; line-height: 1.1; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%; font-variant-numeric: lining-nums tabular-nums; }
.kal-tagkopf.wochenende .kal-wt, .kal-tagkopf.wochenende b { color: var(--text-3); }
.kal-tagkopf.heute .kal-wt { color: var(--akzent-text); }
.kal-tagkopf.heute b { background: var(--gold, var(--akzent)); color: var(--auf-gold, #fff); }
.kal-feiertag { font-size: 10.5px; color: var(--akzent-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kal-ganztag { border-bottom: 0.5px solid var(--linie); min-height: 30px; }
.kal-ganztag.ohne { min-height: 22px; }
.kal-ganztag > .kal-rinne { font-size: 10.5px; color: var(--text-3); text-align: right; padding: 6px 8px 0 0; }
.kal-ganztag.ohne > .kal-rinne { padding-top: 4px; }
.kal-ganzzelle { border-left: 0.5px solid var(--linie); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: copy; }
.kal-ganzzelle.heute { background: var(--wc-hg); }

.kal-scroll { max-height: max(380px, calc(100dvh - 330px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: var(--linie-stark) transparent; }
.kal-stunden { height: calc(var(--kal-stunde) * 24); position: relative; }
.kal-uhrzeiten { position: relative; }
.kal-uhrzeiten span { position: absolute; right: 9px; top: calc(var(--h) * var(--kal-stunde)); transform: translateY(-50%); font-size: 11px;
  color: var(--text-3); font-variant-numeric: tabular-nums; }
.kal-spalte { position: relative; border-left: 0.5px solid var(--linie); cursor: copy; min-width: 0;
  background-image: linear-gradient(to bottom, var(--linie) 0.5px, transparent 0.5px);
  background-size: 100% var(--kal-stunde); }
.kal-spalte.wochenende { background-color: var(--hg-4); }
.kal-spalte.heute { background-color: var(--wc-hg); }

.kal-termin { font: inherit; text-align: left; border: 0; cursor: pointer; color: var(--kal-text); background: var(--kal-hg);
  border-radius: 7px; padding: 4px 7px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; min-width: 0;
  transition: box-shadow 0.15s, transform 0.12s; -webkit-user-select: none; user-select: none; }
.kal-spalte > .kal-termin { position: absolute; top: var(--oben); height: var(--hoehe); left: calc(var(--links) + 2px);
  width: calc(var(--breite) - 4px); z-index: 1; }
.kal-termin:hover { box-shadow: 0 0 0 1px var(--kal-punkt), var(--schatten); z-index: 2; }
.kal-termin .kal-ttitel { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--text); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; flex: none; }
.kal-termin.lang .kal-ttitel { -webkit-line-clamp: 3; }
.kal-termin .kal-tzeit { font-size: 11.5px; line-height: 1.25; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; flex: none; }
.kal-termin .kal-tzeit .ic { vertical-align: -2px; margin-right: 3px; }
.kal-termin.kurz { flex-direction: row; align-items: center; gap: 6px; padding-top: 1px; padding-bottom: 1px; }
.kal-termin.kurz .kal-ttitel { -webkit-line-clamp: 1; }
.kal-termin.offen { background: transparent; box-shadow: inset 0 0 0 1px var(--kal-punkt); background-image:
  repeating-linear-gradient(135deg, var(--kal-hg) 0 6px, transparent 6px 12px); }
.kal-termin.abgesagt { opacity: 0.55; }
.kal-termin.abgesagt .kal-ttitel { text-decoration: line-through; }
.kal-termin.zieht { cursor: grabbing; box-shadow: var(--schatten-hoch); transform: translateX(var(--dx, 0)) scale(1.02); z-index: 5; opacity: 0.94;
  transition: box-shadow 0.15s; }
.kal-ganz { padding: 2px 7px; border-radius: 6px; }
.kal-ganz .kal-ttitel { -webkit-line-clamp: 1; font-size: 12px; }

.kal-jetzt { position: absolute; left: -1px; right: 0; top: var(--oben); height: 2px; background: var(--rot); z-index: 3; pointer-events: none; }
.kal-jetzt::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rot); }

/* Handy: ein Tag, darüber die Woche zum Antippen */
.kal-tagleiste { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 8px 6px; border-bottom: 0.5px solid var(--linie); }
.kal-tagwahl { font: inherit; border: 0; background: none; color: var(--text); border-radius: 12px; min-height: 56px; padding: 4px 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px; }
.kal-tagwahl .kal-wt { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.kal-tagwahl b { font-family: var(--schrift-titel); font-size: 22px; font-weight: 500; line-height: 1.1; }
.kal-tagwahl.heute b { color: var(--akzent-text); }
.kal-tagwahl.aktiv { background: var(--text); color: var(--hg); }
.kal-tagwahl.aktiv .kal-wt { color: inherit; opacity: 0.75; }
.kal-tagwahl.aktiv.heute { background: var(--gold, var(--akzent)); color: var(--auf-gold, #fff); }
.kal-tagwahl.aktiv.heute b { color: inherit; }
.kal-hatpunkt { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.kal-hatpunkt.da { background: var(--akzent); }
.kal-tagwahl.aktiv .kal-hatpunkt.da { background: currentColor; }
.kal-woche.ein-tag .kal-wkopf { display: none; }

/* Monat ----------------------------------------------------------------------------------------------------------------------------- */
.kal-monat { background: var(--hg-2); border-radius: var(--radius-g); box-shadow: var(--schatten); overflow: hidden; }
.kal-mkopf, .kal-mzeile { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-mkopf div { padding: 9px 10px 7px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.kal-mkopf div.wochenende { color: var(--text-3); }
.kal-mzeile { border-top: 0.5px solid var(--linie); }
.kal-mtag { min-height: 112px; padding: 5px 5px 6px; border-left: 0.5px solid var(--linie); display: flex; flex-direction: column; gap: 2px; min-width: 0;
  cursor: copy; }
.kal-mtag:first-child { border-left: 0; }
.kal-mtag.wochenende { background: var(--hg-4); }
.kal-mtag.anders .kal-mnr b { color: var(--text-3); }
.kal-mtag.anders > .kal-termin { opacity: 0.6; }
.kal-mnr { font: inherit; border: 0; background: none; padding: 0; cursor: pointer; align-self: flex-start; border-radius: 50%; color: var(--text); }
.kal-mnr b { font-family: var(--schrift-titel); font-size: 19px; font-weight: 500; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; font-variant-numeric: lining-nums tabular-nums; }
.kal-mnr:hover b { background: var(--hg-3); }
.kal-mtag.heute .kal-mnr b { background: var(--gold, var(--akzent)); color: var(--auf-gold, #fff); }
.kal-mtag > .kal-feiertag { padding-left: 4px; }
.kal-mtermin { flex-direction: row; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 5px; min-height: 22px; }
.kal-mtermin .kal-ttitel { -webkit-line-clamp: 1; font-size: 12px; font-weight: 500; }
.kal-mtermin .kal-tzeit { flex: none; color: var(--kal-text); font-size: 11px; }
.kal-mtermin:not(.kal-ganz) { background: transparent; }
.kal-mtermin:not(.kal-ganz)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kal-punkt); flex: none; }
.kal-mtermin:not(.kal-ganz):hover { background: var(--kal-hg); box-shadow: none; }
.kal-mehr { font: inherit; border: 0; background: none; color: var(--text-2); font-size: 11.5px; font-weight: 500; text-align: left; padding: 2px 6px;
  border-radius: 5px; cursor: pointer; }
.kal-mehr:hover { background: var(--hg-3); color: var(--text); }
.kal-mpunkte { display: flex; gap: 3px; justify-content: center; }
.kal-mpunkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--kal-punkt); }

/* Liste --------------------------------------------------------------------------------------------------------------------------------- */
.kal-liste { display: flex; flex-direction: column; gap: 4px; max-width: 860px; }
.kal-tagabschnitt + .kal-tagabschnitt { margin-top: 14px; }
.kal-tagtitel { margin: 0 4px 8px; font-family: var(--schrift-titel); font-size: 21px; font-weight: 500; letter-spacing: -0.005em;
  display: flex; align-items: baseline; gap: 10px; }
.kal-tagtitel.heute { color: var(--akzent-text); }
.kal-gruppe { background: var(--hg-2); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.kal-eintrag { display: flex; align-items: center; gap: 10px; padding-right: 12px; position: relative; }
.kal-eintrag + .kal-eintrag::before { content: ""; position: absolute; top: 0; left: 88px; right: 0; height: 0.5px; background: var(--linie); }
.kal-ehaupt { font: inherit; color: inherit; text-align: left; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; border: 0;
  background: none; padding: 12px 6px 12px 14px; cursor: pointer; min-height: 56px; }
button.kal-ehaupt:hover { background: var(--hg-hover); }
.kal-ezeit { width: 52px; flex: none; display: flex; flex-direction: column; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kal-ezeit b { font-weight: 600; }
.kal-ezeit span { color: var(--text-2); font-size: 12px; }
.kal-ehaupt > .kal-punkt { margin-top: 5px; }
.kal-etext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kal-etext b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.kal-eunter { color: var(--text-2); font-size: 12.5px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.kal-eunter .pille { margin-left: 4px; }
.kal-serie { display: inline-flex; color: var(--text-3); margin-left: 2px; }
.kal-eintrag.offen .kal-etext b::after { content: ""; }
.kal-eintrag.abgesagt .kal-etext b { text-decoration: line-through; color: var(--text-2); }
.kal-beitreten { flex: none; }
.kal-leer-knoepfe { justify-content: center; flex-wrap: wrap; }
.kal-tagliste { margin-top: 14px; }
.kal-tagleer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--hg-2);
  border-radius: var(--radius); box-shadow: var(--schatten); color: var(--text-2); }

/* Detail -------------------------------------------------------------------------------------------------------------------------------- */
.kal-detail { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.kal-detail > div { display: flex; align-items: flex-start; gap: 12px; }
.kal-detail > div > .ic { color: var(--text-2); margin-top: 1px; }
.kal-detail > div > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kal-dzeit b { font-size: 15px; }
.kal-dserie { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 13px; }
.kal-donline { background: var(--kal-hg); border-radius: var(--radius); padding: 12px 14px; }
.kal-donline > .ic { color: var(--kal-text); }
.kal-link { font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.kal-dknoepfe { gap: 8px; margin: 8px 0 2px; flex-wrap: wrap; }
.kal-dkal { align-items: center !important; color: var(--text-2); font-size: 13px; }
.kal-dkal .kal-punkt { margin: 0 4px; }
.kal-detail > .kal-dteilnehmer, .kal-detail > .kal-dantwort, .kal-detail > .kal-dnotiz { flex-direction: column; gap: 0; }
.kal-dteilnehmer .abschnitt-titel, .kal-dantwort .abschnitt-titel, .kal-dnotiz .abschnitt-titel { margin: 0 0 6px; }
.kal-dteilnehmer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kal-dteilnehmer li { display: flex; align-items: center; gap: 10px; }
.kal-dteilnehmer li .pille { margin-left: auto; }
.kal-dnotiz p { margin: 0; color: var(--text); line-height: 1.5; max-width: 68ch; }
.kal-dfuss { margin: 0; }

/* Formular ------------------------------------------------------------------------------------------------------------------------------ */
.blatt.kal-blatt { width: min(620px, 100%); }
.kal-formular { display: flex; flex-direction: column; gap: 16px; padding-bottom: 6px; }
.kal-fblock { display: flex; flex-direction: column; gap: 8px; }
.kal-fzeit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kal-fpaar { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kal-fwerte { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 6px; }
.kal-fzeit.ganz .kal-fwerte { grid-template-columns: 1fr; }
.kal-wdh { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--hg-4); border-radius: var(--radius-k); }
.kal-wdh[hidden] { display: none; }
.kal-wzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; }
.kal-wzeile .feld { width: auto; }
.kal-zahl { width: 76px !important; }
.kal-einheit { color: var(--text-2); }
.kal-wtage { display: flex; gap: 6px; flex-wrap: wrap; }
.kal-wtage[hidden] { display: none; }
.kal-wtag { font: inherit; font-size: 13px; font-weight: 600; width: 40px; height: 40px; border-radius: 50%; border: 0.5px solid var(--linie-stark);
  background: var(--hg-2); color: var(--text-2); cursor: pointer; }
.kal-wtag[aria-pressed="true"] { background: var(--gold, var(--akzent)); color: var(--auf-gold, #fff); border-color: transparent; }
.kal-wo { display: flex; flex-direction: column; gap: 8px; }
.kal-wo .segmente { align-self: flex-start; }
.kal-linkinfo { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.kal-linkinfo .ic { color: var(--gruen-text); }
.kal-personen { display: flex; flex-wrap: wrap; gap: 8px; }
.kal-person { font: inherit; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border-radius: 999px;
  border: 0.5px solid var(--linie-stark); background: var(--hg-2); color: var(--text); cursor: pointer; font-size: 13.5px; }
.kal-person .avatar { width: 30px; height: 30px; font-size: 11px; }
.kal-person .ic { display: none; color: var(--akzent-text); }
.kal-person[aria-pressed="true"] { background: var(--akzent-hg); border-color: var(--akzent); }
.kal-person[aria-pressed="true"] .ic { display: block; }

/* Kalender verwalten */
.kal-vzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 0.5px solid var(--linie); }
.kal-vtext { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.kal-farben { display: flex; gap: 6px; }
.kal-farbe { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--kal-punkt); cursor: pointer; position: relative; }
.kal-farbe[aria-checked="true"] { box-shadow: 0 0 0 2px var(--hg-2), 0 0 0 4px var(--kal-punkt); }
.kal-vneu { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.kal-vneu .zeile-flex { gap: 8px; }
.kal-umfang .zeile { min-height: 56px; }

/* Handy: 390 px ohne seitliches Rollen, Ziele ≥ 44 px ------------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .kalender { gap: 10px; }
  .kal-kopf .untertitel { display: none; }
  .kal-kopf .aktionen { width: 100%; margin-left: 0; }
  .kal-kopf .aktionen .knopf { min-height: 44px; flex: 1; }
  .kal-import span { display: none; }
  .kal-kopf .aktionen .kal-import { flex: 0 0 48px; }
  .kal-leiste { gap: 8px; }
  .kal-pfeil { width: 44px; min-height: 44px; }
  .kal-heute { min-height: 44px; }
  .kal-zeitraum { font-size: 22px; order: 3; width: 100%; }
  .kal-leiste .raum { display: none; }
  .kal-ansicht { margin-left: auto; }
  .kal-segmente button { min-height: 40px; min-width: 0; padding-left: 12px; padding-right: 12px; }
  .kal-chip { min-height: 36px; }
  .kal-verwalten { min-height: 36px; }
  .kal-woche { border-radius: var(--radius); --kal-rinne: 48px; }
  .kal-scroll { max-height: max(360px, calc(100dvh - 380px)); }
  .kal-spalte > .kal-termin { min-height: 26px; }
  .kal-monat { border-radius: var(--radius); }
  .kal-mkopf div { padding: 8px 0 6px; text-align: center; font-size: 10.5px; letter-spacing: 0.04em; }
  .kal-mtag { min-height: 52px; padding: 3px 0 5px; align-items: center; cursor: pointer; }
  .kal-mtag.gewaehlt { background: var(--akzent-hg); }
  .kal-mnr { align-self: center; min-width: 44px; min-height: 36px; display: grid; place-items: center; }
  .kal-mnr b { font-size: 17px; width: 32px; height: 32px; }
  .kal-eintrag { flex-wrap: wrap; padding: 0 12px 0 0; }
  .kal-eintrag + .kal-eintrag::before { left: 14px; }
  .kal-ehaupt { padding-left: 12px; gap: 10px; flex: 1 1 100%; }
  .kal-ezeit { width: 54px; }
  .kal-eintrag .kal-beitreten { margin: -4px 0 12px 80px; min-height: 40px; }
  .kal-tagtitel { font-size: 19px; }
  .kal-fzeit { grid-template-columns: 1fr; }
  .kal-wtag { width: 40px; height: 40px; }
  .kal-dknoepfe .knopf { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .kal-termin, .kal-chip, .kal-flaeche[aria-busy="true"] > * { transition: none; }
  .kal-termin.zieht { transform: translateX(var(--dx, 0)); }
}

/* Startseite: „Heute im Kalender“ (views/start.js, Nutzer 05.11.2026: „Ja, anbinden“) – neben Meine Post, am Handy darunter */
.start-oben { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.start-oben > .karte { margin: 0; }
.kal-heute .karte-kopf { justify-content: space-between; }
.kh-feiertag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--akzent-hg); color: var(--akzent-text); }
.kh-liste { display: grid; gap: 4px; }
.kh-titel { margin: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.kh-leer { margin: 0; color: var(--text-2); font-size: 14px; }
.kh-zeile { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-k); transition: background-color .2s; }
.kh-zeile:hover { background: var(--hg-hover); }
.kh-haupt { display: grid; grid-template-columns: 92px 10px minmax(0, 1fr); align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 8px 10px; min-height: 44px; color: inherit; text-decoration: none; border-radius: var(--radius-k); }
.kh-haupt:focus-visible { outline: none; box-shadow: var(--fokus); }
.kh-zeit { display: grid; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.kh-zeit b { font-size: 12px; color: var(--text-3); font-weight: 600; }
.kh-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--kal-punkt); }
.kh-text { display: grid; min-width: 0; }
.kh-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-text span { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-zeile.laeuft { background: var(--kal-hg); }
.kh-zeile.laeuft .kh-zeit { color: var(--kal-text); font-weight: 600; }
.kh-zeile.vorbei .kh-haupt { opacity: .55; }
.kh-beitreten { flex: none; margin-right: 8px; }
.kh-fuss { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 480px) {
  /* „Beitreten“ unter den Eintrag, damit der Titel stehen bleibt; Uhrzeiten ohne Umbruch */
  .kh-zeile { flex-wrap: wrap; gap: 0; }
  .kh-haupt { flex: 1 1 100%; grid-template-columns: 84px 10px minmax(0, 1fr); gap: 8px; }
  .kh-zeit { font-size: 12.5px; white-space: nowrap; }
  .kh-beitreten { margin: -4px 0 8px 120px; min-height: 40px; }
}