/* desktop-bilder.css: die Widgets, die ein Bild zeigen (17.10.2026), und die Klassiker (Uhr, Timer, Wecker,
   Rechner, Player). Jede Fläche ist ein Container; was erscheint, hängt an ihrer Größe. */

:root {
  --bvRolle-fertig: #3fb27f; --bvRolle-jetzt: var(--gold, #d4a24c); --bvRolle-offen: #e0a84a;
  --bvRolle-weg: #6b6f7a; --bvRolle-ohne: #3a3d46;
}
.bvFlaeche { container-type: size; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.bvZahl { font-size: 26px; font-weight: 700; line-height: 1; color: var(--kopf, var(--text));
  font-variant-numeric: tabular-nums; }
.bvWort { font-size: 12px; color: var(--dim); }

/* verlauf */
.bvSumme { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bvKarte { display: none; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
  flex: 1; min-height: 0; }
.bvFeld { border-radius: 3px; background: var(--linie); min-width: 0; min-height: 0; }
.bvFeld[data-stufe="1"] { background: color-mix(in srgb, var(--bvRolle-jetzt) 30%, var(--linie)); }
.bvFeld[data-stufe="2"] { background: color-mix(in srgb, var(--bvRolle-jetzt) 55%, var(--linie)); }
.bvFeld[data-stufe="3"] { background: color-mix(in srgb, var(--bvRolle-jetzt) 78%, var(--linie)); }
.bvFeld[data-stufe="4"] { background: var(--bvRolle-jetzt); }
.bvBalken { display: flex; align-items: flex-end; gap: 3px; flex: 1; min-height: 24px; }
.bvSaeule { flex: 1; height: calc(6% + var(--anteil, 0) * 94%); border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--bvRolle-jetzt), color-mix(in srgb, var(--bvRolle-jetzt) 45%, transparent));
  transform-origin: bottom; animation: bvWachsen .6s ease-out both; }
.bvSaeule:last-child { box-shadow: 0 0 0 1px var(--kopf, var(--text)) inset; }
@keyframes bvWachsen { from { transform: scaleY(0); } }
@container (min-width: 300px) and (min-height: 190px) {
  .bvVerlauf .bvKarte { display: grid; }
  .bvVerlauf .bvBalken { flex: 0 0 42px; }
}
@container (max-height: 120px) { .bvVerlauf .bvBalken { display: none; } }

/* verteilung und ring */
.bvRing { --dicke: 22%; aspect-ratio: 1; height: min(100%, 100cqw); max-height: 100%; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center; position: relative; flex: 1 1 auto; min-height: 0;
  animation: bvDrehen .7s ease-out both; }
.bvRing::before { content: ''; position: absolute; inset: var(--dicke); border-radius: 50%; background: var(--panel); }
.bvMitte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
@keyframes bvDrehen { from { transform: rotate(-90deg) scale(.85); opacity: 0; } }
.bvStreifen { display: none; height: 14px; border-radius: 7px; flex: none; }
.bvLegende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.bvLegende li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 6px; }
.bvPunkt { width: 10px; height: 10px; border-radius: 3px; }
.bvLegWort { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bvLegZahl { color: var(--dim); font-variant-numeric: tabular-nums; }
@container (min-width: 300px) {
  .bvVerteilung { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
  .bvVerteilung .bvRing { grid-row: 1 / span 2; height: min(100cqh, 60cqw); }
}
@container (max-height: 130px) {
  .bvVerteilung { display: flex !important; align-items: stretch !important; justify-content: center; }
  .bvVerteilung .bvRing { display: none; }
  .bvVerteilung .bvStreifen { display: block; }
  .bvVerteilung .bvLegende { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
}
.bvZielRing { background: conic-gradient(var(--bvRolle-jetzt) calc(var(--anteil) * 100%), var(--linie) 0); }
.bvZielRing.erreicht { background: conic-gradient(var(--bvRolle-fertig) 100%, var(--linie) 0); }
.bvZielFuss { text-align: center; font-size: 12.5px; color: var(--dim); }
.bvZielFeld input { width: 110px; border: 1px solid var(--linie); background: transparent; color: var(--text);
  border-radius: 6px; padding: 4px 6px; font: inherit; }

/* --- Die Klassiker ------------------------------------------------------------------------------------------ */
.dkUhr { container-type: size; gap: 6px; }
.dkZiffer { display: none; position: relative; aspect-ratio: 1; height: min(70cqh, 90cqw); border-radius: 50%;
  border: 2px solid var(--linie); background: radial-gradient(circle, var(--panel) 60%, color-mix(in srgb, var(--gold) 8%, var(--panel))); }
.dkStrich { position: absolute; inset: 0; }
.dkStrich::before { content: ''; position: absolute; left: 50%; top: 5%; width: 2px; height: 6%; margin-left: -1px;
  background: var(--dim); border-radius: 1px; }
.dkStrich.voll::before { width: 3px; height: 10%; margin-left: -1.5px; background: var(--text); }
.dkZeiger { position: absolute; inset: 0; transition: transform .25s cubic-bezier(.4, 2.3, .6, 1); }
.dkZeiger::before { content: ''; position: absolute; left: 50%; bottom: 50%; border-radius: 3px; }
.dkZeiger.std::before { width: 5px; height: 26%; margin-left: -2.5px; background: var(--text); }
.dkZeiger.min::before { width: 3px; height: 37%; margin-left: -1.5px; background: var(--text); }
.dkZeiger.sek::before { width: 1.5px; height: 42%; margin-left: -.75px; background: var(--gold); }
.dkNabe { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--gold); }
@container (min-height: 170px) and (min-width: 130px) {
  .dkZiffer { display: block; }
  .dkUhrZeit { font-size: 20px; }
}

.klLeiste { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.klVorwahl { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.klLeiste button, .klVorwahl button, .klSchalter { border: 1px solid var(--linie); background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.klLeiste .klHaupt, .klStillen { border-color: var(--gold); color: var(--goldText); font-weight: 600; }
.klMinuten { width: 58px; border: 1px solid var(--linie); background: transparent; color: var(--text); border-radius: 999px;
  padding: 4px 8px; font: inherit; font-size: 12.5px; }
.klTimerRing { --dicke: 12%; background: conic-gradient(var(--gold) calc(var(--anteil, 0) * 100%), var(--linie) 0);
  transition: background .25s linear; }
.klTimer.laeuft .klTimerRing { box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 35%, transparent); }
.klTimer.klAus .klTimerRing, .klWecker.klingelt { animation: klPuls .5s ease-in-out infinite alternate; }
@keyframes klPuls { to { transform: scale(1.04); box-shadow: 0 0 30px var(--gold); } }
@container (max-height: 170px) { .klTimer .klVorwahl { display: none; } }
/* Timer und Stoppuhr: der Ring nimmt einen festen Teil der Höhe, damit er im Flex nicht auf null schrumpft. */
.klTimerRing, .alStoppRing { flex: none; height: min(66cqh, 90cqw); max-height: none; }
/* Wenig Höhe: der Ring tritt zurück, die Zeit bleibt. */
@container (max-height: 130px) {
  .klTimerRing, .alStoppRing { background: none !important; box-shadow: none !important; aspect-ratio: auto;
    height: auto; animation: none; border-radius: 0; }
  .klTimerRing::before, .alStoppRing::before { display: none; }
  .klTimer .bvZahl, .alStopp .bvZahl { font-size: clamp(18px, 34cqh, 34px); }
}

.klWecker { align-items: center; justify-content: center; border-radius: 10px; gap: 4px; }
@container (max-height: 120px) { .klWecker .klBis { display: none; } }
.klWeckzeit { font: inherit; font-size: clamp(18px, min(22cqw, 30cqh), 46px); font-weight: 700; color: var(--kopf, var(--text));
  background: transparent; border: 0; text-align: center; font-variant-numeric: tabular-nums; color-scheme: light dark; }
.klSchalter.an { background: var(--gold); color: var(--panel); border-color: var(--gold); }
.klBis { font-size: 12px; color: var(--dim); min-height: 1em; }
.klStillen { display: none; }
.klWecker.klingelt .klStillen { display: inline-block; }

.klRechner { outline: none; gap: 6px; }
.klRechner:focus-visible { box-shadow: 0 0 0 1px var(--gold) inset; border-radius: 8px; }
.klVerlauf { font-size: 12px; color: var(--dim); text-align: right; min-height: 1.2em; overflow: hidden; white-space: nowrap; }
.klAnzeige { font-size: clamp(16px, min(14cqw, 12cqh), 40px); font-weight: 700; text-align: right; color: var(--kopf, var(--text));
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: rtl; font-variant-numeric: tabular-nums; }
.klAnzeige.klFalsch { color: var(--rot, #c0392b); }
.klTasten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; flex: 1; min-height: 0; }
.klTaste { border: 0; border-radius: 10px; background: var(--linie); color: var(--text); font: inherit; font-size: 16px;
  cursor: pointer; min-height: 0; transition: transform .08s; font-size: clamp(11px, 6cqh, 17px); padding: 0; line-height: 1; }
@container (max-height: 260px) { .klRechner .klVerlauf { display: none; } .klTasten { gap: 3px; } }
.klTaste:active { transform: scale(.94); }
.klTaste.op { background: color-mix(in srgb, var(--gold) 70%, var(--linie)); color: var(--panel); font-weight: 700; }
.klTaste.fn { background: color-mix(in srgb, var(--text) 18%, var(--linie)); }
.klTaste.null { grid-column: span 2; }

.klPlayer { gap: 6px; }
.klPlayer.klZiel { outline: 2px dashed var(--gold); border-radius: 8px; }
.klBild { width: 100%; flex: 1 1 60px; min-height: 30px; border-radius: 8px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gold) 7%, transparent)); }
.klName { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klFortschritt { height: 5px; border-radius: 3px; background: var(--linie); cursor: pointer; flex: none; }
.klFortschritt span { display: block; height: 100%; border-radius: 3px; background: var(--gold); }
.klRund { min-width: 38px; }
.klListe { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 40%; scrollbar-width: none; display: none; }
.klListe li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.klListe li:hover { background: var(--linie); }
.klListe li.jetzt { color: var(--goldText); font-weight: 600; }
.klListeName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klWeg { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 14px; }
.klHinweis { font-size: 11.5px; color: var(--dim); }
@container (min-height: 280px) { .klPlayer .klListe { display: block; } }
@container (max-height: 150px) { .klPlayer .kalNeu, .klPlayer .klHinweis { display: none; } }
[data-dk-bearbeiten] .klTaste, [data-dk-bearbeiten] .klLeiste button, [data-dk-bearbeiten] .klListe li { pointer-events: none; }

/* --- Alltag: Checkliste, Stoppuhr, Countdown (desktop-alltag.js) ------------------------------------------- */
.alStand { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.alBalken { height: 6px; border-radius: 3px; background: var(--linie); flex: none; overflow: hidden; }
.alBalken span { display: block; height: 100%; background: var(--gold); border-radius: 3px; transition: width .4s ease; }
.alAlles .alBalken span { background: var(--bvRolle-fertig); }
.alListe { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.alListe li { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: 13px; color: var(--text); }
.alListe li input { accent-color: var(--gold); width: 15px; height: 15px; flex: none; }
.alListe li.erledigt span { color: var(--dim); text-decoration: line-through; }
.alNeu input { width: 100%; box-sizing: border-box; border: 1px dashed var(--linie); background: transparent; color: var(--text);
  border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; }
.alMeldung { font-size: 11.5px; color: var(--rot, #c0392b); min-height: 0; }
.alMeldung:empty { display: none; }
.alStoppRing { --dicke: 10%; background: conic-gradient(var(--gold) calc(var(--anteil, 0) * 100%), var(--linie) 0); }
.alStopp.laeuft .alStoppRing { box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent); }
.alCount { justify-content: center; }
.alZahlen { display: flex; justify-content: space-around; gap: 6px; }
.alTeil { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.alTeil .bvZahl { font-size: clamp(16px, min(30cqh, 12cqw), 52px); }
.alZahlen { line-height: 1; }
.alZiel { align-self: center; border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 12px; color-scheme: light dark; }
.alLeerText { font-size: 12.5px; color: var(--dim); }
.alAlles .alZahlen .bvZahl { color: var(--bvRolle-fertig); }
@container (max-height: 140px) { .alCount .alZiel { display: none; } }
@container (max-height: 160px) { .alCheck .alNeu { display: none; } }
[data-dk-bearbeiten] .alListe input, [data-dk-bearbeiten] .alNeu, [data-dk-bearbeiten] .alZiel { pointer-events: none; }

/* Die Wache: Hinweis, wenn ein Timer abläuft oder ein Wecker klingelt, auf jedem Reiter. */
.dkAlarm { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--gold); color: var(--text);
  box-shadow: var(--schatten, 0 8px 28px rgba(0, 0, 0, .25)); font-size: 14px; animation: klPuls .6s ease-in-out infinite alternate; }
.dkAlarm button { border: 1px solid var(--gold); background: var(--panel); color: var(--goldText); border-radius: 999px;
  padding: 5px 14px; font: inherit; font-weight: 600; cursor: pointer; }
/* Lesezeichen und Strichliste */
.alLinks .alListe li { justify-content: space-between; }
.alLink { color: var(--goldText); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.alLink:hover { text-decoration: underline; }
.alZaehler { align-items: center; justify-content: center; gap: 6px; }
.alZahl { font-size: clamp(26px, min(48cqh, 36cqw), 96px); font-weight: 700; line-height: 1; color: var(--kopf, var(--text));
  font-variant-numeric: tabular-nums; }
.alPuls { animation: alPuls .25s ease-out; }
@keyframes alPuls { from { transform: scale(1.15); color: var(--goldText); } }
.alKnoepfe { display: flex; gap: 10px; }
.alRund { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linie); background: var(--panel); color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer; }
.alRund.alPlus { border-color: var(--gold); color: var(--goldText); font-weight: 700; }
@container (max-height: 100px) { .alZaehler { flex-direction: row; } .alZahl { font-size: clamp(22px, 60cqh, 48px); } }
[data-dk-bearbeiten] .alRund, [data-dk-bearbeiten] .alLink { pointer-events: none; }

/* --- Darstellungen: Daten als Bild (desktop-darstellung.js, 17.10.2026) --------------------------------------- */
.dvFlaeche { container-type: size; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: var(--text); }
.dvSymbol { display: inline-grid; place-items: center; color: var(--dvFarbe); }
.dvSymbol .ikon { width: 18px; height: 18px; }
.dvFuss { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.dvZahl { font-size: clamp(18px, 14cqh, 30px); font-weight: 700; color: var(--kopf, var(--text)); font-variant-numeric: tabular-nums; }
.dvVon { font-size: 13px; color: var(--dim); }
.dvRingBild { height: min(72cqh, 90cqw); max-height: 100%; }
.dvSpur { fill: none; stroke: var(--linie); stroke-width: 11; }
.dvBogen { fill: none; stroke: var(--dvFarbe); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 302;
  stroke-dashoffset: var(--dvVoll, 302); animation: dvFuellen 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dvFuellen { from { stroke-dashoffset: 302; } }
.dvMitte { font-size: 26px; font-weight: 700; fill: var(--kopf, var(--text)); }
.dvErreicht .dvBogen { stroke: #1D9E75; }
.dvPunkte { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(3px, 1.2cqw, 6px);
  max-width: 100%; padding: 0 4px; }
.dvPunkt { width: clamp(7px, 3.2cqw, 13px); aspect-ratio: 1; border-radius: 30%; background: var(--linie);
  animation: dvPopp .35s ease-out both, dvAtmen 2.6s ease-in-out infinite; }
.dvPunkt.voll { background: var(--dvFarbe); animation: dvPopp .35s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes dvPopp { from { transform: scale(0); } }
@keyframes dvAtmen { 50% { opacity: .45; } }
.dvReihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dvEins { width: clamp(30px, 22cqh, 48px); aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--dvFarbe) 16%, transparent); animation: dvPopp .4s ease-out both, dvPuls 2.2s ease-in-out infinite; }
.dvEins .ikon { width: 55%; height: 55%; }
@keyframes dvPuls { 50% { transform: scale(1.08); background: color-mix(in srgb, var(--dvFarbe) 28%, transparent); } }
.dvFertig { width: clamp(36px, 30cqh, 60px); aspect-ratio: 1; border-radius: 50%; color: #1D9E75;
  background: color-mix(in srgb, #1D9E75 16%, transparent); animation: dvPopp .5s cubic-bezier(.3,1.6,.5,1) both; }
.dvFertig .ikon { width: 55%; height: 55%; }
.dvStrahl { width: 100%; max-height: 100%; overflow: visible; }
.dvSpurLinie { stroke: var(--linie); stroke-width: 4; stroke-linecap: round; }
.dvGelaufen { stroke: #1D9E75; stroke-width: 4; stroke-linecap: round; }
.dvMarke circle { fill: color-mix(in srgb, var(--dvFarbe) 22%, var(--panel)); stroke: var(--dvFarbe); stroke-width: 2.5; }
.dvMarke.naechste circle { animation: dvGross 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dvGross { 50% { transform: scale(1.25); } }
.dvMarke.verpasst circle { stroke: #E24B4A; fill: color-mix(in srgb, #E24B4A 20%, var(--panel)); }
.dvZiel circle { fill: #D85A30; }
.dvHeute circle { fill: #1D9E75; animation: dvGross 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dvDatum { font-size: 11px; fill: var(--dim); }
.dvWort { font-size: 10px; fill: var(--text); }
.dv-zeitleiste { justify-content: center; padding: 0 6px; }
.alCount { gap: 4px; position: relative; }
.alCountRing { height: min(74cqh, 90cqw); max-height: 100%; --dvFarbe: #1D9E75; }
.alCount[data-naehe="bald"] .alCountRing { --dvFarbe: #BA7517; }
.alCount[data-naehe="nah"] .alCountRing { --dvFarbe: #D85A30; animation: dvPuls 1.6s ease-in-out infinite; }
.alCount[data-naehe="da"] .alCountRing { --dvFarbe: #D85A30; }
.alCountBogen { fill: none; stroke: var(--dvFarbe); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 302;
  stroke-dashoffset: var(--dvVoll, 0); transition: stroke-dashoffset .6s ease; animation: dvFuellen 1.4s cubic-bezier(.2,.8,.2,1) both; }
.alCountDatum { font-size: 12.5px; color: var(--dim); }
.alZiel.alZielVerdeckt { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.alWaehlbar { cursor: pointer; }
.alWaehlbar:hover .alCountDatum { color: var(--text); text-decoration: underline dotted; }
@container (max-height: 120px) { .alCount { flex-direction: row; } .alCount .dvFuss { display: none; } }
.dkBilder { display: flex; gap: 6px; margin: 4px 0 6px; }
.dkBilder button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; }
.dkBilder button svg { width: 18px; height: 18px; }
.dkBilder button.gewaehlt { outline: 2px solid var(--akzent, #7F77DD); }
.dkBildZiel { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.alCount .dvFuss { justify-content: center; }
.dkKoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.dkKopfKnopf, .dkVorlageKnopf { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; }
.dvKopf { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12.5px;
  font-weight: 600; color: #fff; background: var(--dvKopfFarbe, #7F77DD); flex: none; }
.dkVorlageKnopf { animation: dvPuls 2.2s ease-in-out 3; }
.dkKlein { font-size: 12px; color: var(--dim); margin: 4px 0; max-width: 260px; }
/* Meine To-Dos (17.10.2026) */
.tdFlaeche { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 2px 4px; }
.tdKopf { display: flex; align-items: center; gap: 8px; }
.tdRing { width: 34px; height: 34px; --dvFarbe: #1D9E75; }
.tdBogen { fill: none; stroke: var(--dvFarbe); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100.5;
  stroke-dashoffset: var(--dvVoll, 100.5); transition: stroke-dashoffset .6s ease; }
.tdZahl { font-size: 22px; font-weight: 600; }
.tdWort { font-size: 12.5px; color: var(--dim); }
.tdListe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow: hidden; }
.tdZeile { display: flex; align-items: center; gap: 8px; height: 26px; transition: opacity .5s, transform .5s; }
.tdZeile.erledigt { opacity: .35; transform: translateX(8px); }
.tdZeile.erledigt .tdTitel { text-decoration: line-through; }
.tdKreis { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--dim); background: transparent; padding: 0;
  display: grid; place-items: center; flex: none; cursor: pointer; color: #fff; }
.tdKreis:hover { border-color: #1D9E75; }
.tdZeile.erledigt .tdKreis { background: #1D9E75; border-color: #1D9E75; animation: dvPopp .35s ease; }
.tdKreis svg { width: 12px; height: 12px; }
.tdTitel { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.tdProjekt { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tdFrist { width: 10px; height: 10px; border-radius: 50%; flex: none; background: transparent; }
.tdZeile[data-naehe="spaeter"] .tdFrist { background: #1D9E75; }
.tdZeile[data-naehe="bald"] .tdFrist { background: #EF9F27; }
.tdZeile[data-naehe="heute"] .tdFrist { background: #BA7517; }
.tdZeile[data-naehe="verpasst"] .tdFrist { background: #D85A30; animation: dvPuls 1.6s ease-in-out infinite; }
.tdMehr { font-size: 12px; color: var(--dim); min-height: 0; }
.tdFertig { display: flex; align-items: center; gap: 8px; color: #1D9E75; font-size: 14px; padding: 6px 0; }
.tdFertig svg { width: 22px; height: 22px; animation: dvPopp .5s ease; }
.tdNeu { width: 100%; box-sizing: border-box; font-size: 13px; }
@container (max-height: 150px) { .tdNeu { display: none; } }
.tdRing .dvSpur { stroke-width: 6; fill: none; }
.dkProjektPunkt { width: 9px; height: 9px; border-radius: 3px; flex: none; margin-right: 6px; align-self: center; }
/* Tool aus einem Projekt (desktop-tool.js, 18.10.2026) */
.tlFlaeche { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 2px 4px; position: relative; }
.tlBalken { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--linie); }
.tlStueck { height: 100%; animation: dvFuellen 1s ease both; transform-origin: left; }
.tlLegende { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
.tlPunkt { display: inline-flex; align-items: center; gap: 5px; }
.tlPunkt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tlFarbe); }
.tlPunkt b { font-size: 15px; }
.tlDran { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; min-height: 0; overflow: hidden; }
.tlDran li { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlPuls { width: 8px; height: 8px; border-radius: 50%; background: #BA7517; flex: none; animation: dvPuls 1.6s ease-in-out infinite; }
.tlZahl { font-size: 22px; font-weight: 600; }
.tlStapel { position: relative; flex: 1; min-height: 60px; }
.tlBlatt { position: absolute; left: calc(var(--i) * 10px); top: calc(var(--i) * 8px); right: calc(30px - var(--i) * 6px); display: flex;
  align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche, #fff);
  font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.06); animation: dvPopp .4s ease both; animation-delay: calc(var(--i) * 80ms); }
.tlBlattBild svg { width: 14px; height: 14px; color: #534AB7; }
.tlBlattName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlFaecher { position: relative; flex: 1; min-height: 60px; }
.tlFolie { position: absolute; left: 50%; top: 10%; width: 46%; aspect-ratio: 16 / 9; border-radius: 6px; border: 1px solid var(--linie);
  background: linear-gradient(135deg, rgba(127,119,221,.18), rgba(29,158,117,.12)); transform-origin: bottom center;
  transform: translateX(-50%) rotate(calc((var(--i) - 2) * 7deg)); animation: dvPopp .5s ease both; animation-delay: calc(var(--i) * 70ms); }
.tlGrossBild { flex: 1; display: grid; place-items: center; color: #534AB7; }
.tlGrossBild svg { width: 42px; height: 42px; }
.tlOeffnen { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--linie); background: transparent; font: inherit; font-size: 12.5px; cursor: pointer; margin-top: auto; }
.tlOeffnen svg { width: 13px; height: 13px; }

/* Pläne (desktop-plan.js, 18.10.2026): Risiko-Matrix, Phasenband, Fortschritt je Gruppe */
.plMatrix { display: grid; grid-template-columns: 16px 1fr; grid-template-rows: 1fr auto auto; gap: 4px 6px; }
.plFeld { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 4px; min-height: 0; }
.plZelle { border-radius: 8px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px;
  padding: 4px; min-height: 0; overflow: hidden; background: color-mix(in srgb, var(--plHitze) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--plHitze) 40%, transparent); }
.plZelle[data-hitze="0"] { --plHitze: #1D9E75; }
.plZelle[data-hitze="1"] { --plHitze: #5DCAA5; }
.plZelle[data-hitze="2"] { --plHitze: #EF9F27; }
.plZelle[data-hitze="3"] { --plHitze: #D85A30; }
.plZelle[data-hitze="4"] { --plHitze: #E24B4A; }
.plZelle[data-hitze="4"]:not(:empty) { animation: plPuls 2.2s ease-in-out infinite; }
.plPunkt { width: 12px; height: 12px; border-radius: 50%; background: var(--plHitze); box-shadow: 0 0 6px var(--plHitze);
  cursor: help; animation: plAuf .5s ease-out both; }
.plPunkt.beobachtet { background: transparent; border: 2px solid var(--plHitze); }
@keyframes plAuf { from { transform: scale(0); } }
.plAchsen { display: contents; }
.plAchseY { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px;
  color: var(--dim); text-align: center; }
.plAchseX { grid-column: 2; grid-row: 2; font-size: 10.5px; color: var(--dim); text-align: center; }
.plMatrix .plFuss { grid-column: 1 / -1; }
.plFuss { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plHeiss { margin-left: auto; font-size: 12px; font-weight: 600; color: #E24B4A; }
@container (max-height: 170px) { .plMatrix .plFuss, .plAchseY, .plAchseX { display: none; } }

.plPhasen { justify-content: flex-start; }
.plBand { position: relative; height: 34px; flex: none; margin-top: 18px; border-radius: 10px; background: var(--linie); }
.plSegment { position: absolute; top: 0; bottom: 0; border-radius: 9px; background: var(--plFarbe);
  border: 2px solid var(--panel); box-sizing: border-box; display: grid; place-items: center;
  transform-origin: left; animation: plWachsen .7s ease-out both; }
.plSegment.laeuft { box-shadow: 0 0 0 2px var(--plFarbe), 0 0 18px var(--plFarbe); animation: plWachsen .7s ease-out both, plPuls 2s ease-in-out .7s infinite; }
.plNr { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
@keyframes plWachsen { from { transform: scaleX(0); } }
.plHeute { position: absolute; top: -18px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--kopf, var(--text)); }
.plHeute span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--kopf, var(--text));
  white-space: nowrap; }
.plAchse { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); flex: none; }
.plNamen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; min-height: 0;
  overflow: hidden; }
.plNamen li { display: flex; align-items: center; gap: 6px; color: var(--dim); }
.plNamen li.laeuft { color: var(--kopf, var(--text)); font-weight: 600; }
.plNamen b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px;
  background: var(--plFarbe); color: #fff; }
@container (max-height: 150px) { .plPhasen .plNamen { display: none; } }

.plRaster { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; min-height: 0;
  overflow: hidden; align-content: start; }
.plGruppe { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; cursor: default; }
.plRing { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  animation: plDrehen .8s ease-out both; }
.plRing::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); }
.plRing span { position: relative; font-size: 11.5px; font-weight: 700; color: var(--kopf, var(--text)); }
@keyframes plDrehen { from { transform: rotate(-90deg) scale(.6); opacity: 0; } }
.plGruppenName { font-size: 12px; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.plGruppenZahl { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
@keyframes plPuls { 50% { filter: brightness(1.3); } }