/* Dashboard: ruhig, hell, nach Apple. Systemschrift, viel Luft, große Kacheln. */
:root {
  --bg: #F5F5F7;
  --card: #FFFFFF;
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --line: rgba(0,0,0,.08);
  --glanz: rgba(255,255,255,.6);
  --blue: #0A84FF;
  --blue-ink: #FFFFFF;
  --red: #FF3B30;
  --green: #34C759;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.08);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.05), 0 24px 48px rgba(0,0,0,.14);
  --radius: 28px;
  box-sizing: border-box;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --card: #1C1C1E; --ink: #F5F5F7; --muted: #98989D; --line: rgba(255,255,255,.1); --glanz: rgba(255,255,255,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
    --shadow-hover: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --card: #1C1C1E; --ink: #F5F5F7; --muted: #98989D; --line: rgba(255,255,255,.1); --glanz: rgba(255,255,255,.14);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px rgba(0,0,0,.6);
}
*, *::before, *::after { box-sizing: inherit; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif;
  font-size: 17px; line-height: 1.47; -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 10px; }
button { font: inherit; }

.wrap { max-width: 980px; margin: 0 auto; padding: 48px 20px 64px; }
@media (max-width: 600px) { .wrap { padding: 28px 16px 48px; } .hallo { flex-direction: column; align-items: flex-start; gap: 4px; } .hallo .datum { padding-bottom: 0; } }

/* Kopf */
.hallo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.hallo h1 { margin: 0; font-size: clamp(32px, 6vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.hallo p { margin: 6px 0 0; color: var(--muted); font-size: 17px; }
.hallo .datum { color: var(--muted); font-size: 15px; white-space: nowrap; padding-bottom: 6px; }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.kachel {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 240px; padding: 26px 26px 22px; border-radius: var(--radius); color: #fff;
  text-decoration: none; overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.kachel:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--shadow-hover); text-decoration: none; }
.kachel:active { transform: scale(.985); transition-duration: .12s; }
.kachel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.28), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08));
}
.kachel.radio { background: linear-gradient(135deg, #FF6A3D 0%, #FF2D55 100%); }
.kachel.konzerte { background: linear-gradient(135deg, #5E5CE6 0%, #2F2BD1 100%); }
.kachel.questlog { background: linear-gradient(135deg, #30D158 0%, #0A8F3C 100%); }
.kachel .glyph { width: 64px; height: 64px; display: block; }
.kachel .glyph svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.kachel .text b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kachel .text span { display: block; margin-top: 6px; font-size: 15px; opacity: .85; }
.kachel .pfeil { position: absolute; right: 22px; bottom: 22px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; backdrop-filter: blur(6px); }
.kachel .pfeil svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kachel .merk { position: absolute; top: 22px; right: 22px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.22); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); }

/* Fuß */
.fuss { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; color: var(--muted); font-size: 15px; }
.fuss button, .fuss a { font-size: 15px; color: var(--blue); background: none; border: none; padding: 0; cursor: pointer; }
.fuss .punkt { opacity: .4; }

/* Anmeldung */
.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.karte {
  width: 100%; max-width: 400px; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 36px 32px 28px;
}
@media (max-width: 420px) { .karte { padding: 28px 22px 22px; } }
.karte .logo { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; background: linear-gradient(135deg, #FF6A3D, #5E5CE6); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(94,92,230,.35); }
.karte .logo svg { width: 36px; height: 36px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.karte h1 { margin: 0; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.karte .sub { margin: 4px 0 24px; text-align: center; color: var(--muted); font-size: 15px; }
.gruppe { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg); }
.gruppe label { display: block; position: relative; }
.gruppe label + label { border-top: 1px solid var(--line); }
.gruppe input {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: none;
  padding: 14px 16px; outline: none; -webkit-appearance: none;
}
.gruppe input::placeholder { color: var(--muted); }
.gruppe label:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.knopf {
  display: block; width: 100%; margin-top: 18px; padding: 14px 18px; border: none; border-radius: 14px;
  background: var(--blue); color: var(--blue-ink); font-size: 17px; font-weight: 600; cursor: pointer;
  transition: transform .15s, filter .15s;
}
.knopf:hover { filter: brightness(1.06); }
.knopf:active { transform: scale(.98); }
.knopf[disabled] { opacity: .55; cursor: default; }
.knopf.leise { background: transparent; color: var(--blue); margin-top: 8px; font-weight: 500; }
.knopf.rot { background: var(--red); }
.fehler { margin: 14px 0 0; min-height: 1.4em; color: var(--red); font-size: 15px; text-align: center; }
.hinweis { margin: 16px 0 0; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.5; }
.code input { text-align: center; letter-spacing: .4em; font-variant-numeric: tabular-nums; font-size: 24px; }

/* Sicherheitsseite, gruppierte Listen wie in den iOS-Einstellungen */
.abschnitt { margin-top: 28px; }
.abschnitt h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px 16px; }
.liste { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.zeile + .zeile { border-top: 1px solid var(--line); }
.zeile .l b { display: block; font-weight: 600; }
.zeile .l span { display: block; color: var(--muted); font-size: 14px; }
.zeile .r { color: var(--muted); font-size: 15px; white-space: nowrap; }
.pille { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(52,199,89,.15); color: #1E8E3E; }
.pille.aus { background: rgba(110,110,115,.15); color: var(--muted); }
.formular { padding: 16px 18px 18px; }
.formular .gruppe { background: var(--bg); }
.formular .knopf { margin-top: 12px; }
.geheimnis { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 17px; letter-spacing: .08em; word-break: break-all; background: var(--bg); padding: 12px 14px; border-radius: 12px; margin: 12px 0; text-align: center; }
.zurueck { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 17px; margin-bottom: 8px; }
.zurueck svg { width: 12px; height: 18px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ok { color: #1E8E3E; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ===== Startseite: Kopf mit Uhr ===== */
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.kopfzeile h1 { margin: 0; font-size: clamp(30px, 5.5vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.kopfzeile p { margin: 6px 0 0; color: var(--muted); font-size: 16px; }
.uhr { font-weight: 700; font-size: clamp(40px, 7vw, 64px); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uhr small { font-size: .38em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
@media (max-width: 600px) { .kopfzeile { align-items: flex-start; flex-direction: column; gap: 10px; } }

.kacheln.klein .kachel { min-height: 150px; padding: 20px 22px 18px; }
.kacheln.klein .kachel .glyph { width: 44px; height: 44px; }
.kacheln.klein .kachel .text b { font-size: 22px; }
.kacheln.klein .kachel .text span { font-size: 14px; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kacheln.klein .kachel .pfeil { width: 30px; height: 30px; bottom: 18px; right: 18px; }

/* ===== Widgets ===== */
.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; margin-top: 20px; }
.widget { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 18px 20px 14px; min-width: 0; display: flex; flex-direction: column; }
.wkopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.wkopf h2 { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.wicon { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.wicon.radio { background: linear-gradient(135deg, #FF6A3D, #FF2D55); }
.wicon.konzerte { background: linear-gradient(135deg, #5E5CE6, #2F2BD1); }
.wicon.ticker { background: linear-gradient(135deg, #30D158, #0A8F3C); }
.wicon.funken { background: linear-gradient(135deg, #FF2D55, #AF52DE); }
.funkenStand { display: flex; align-items: center; gap: 14px; padding: 4px 0 2px; }
.fuRing { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#FFB340 calc(var(--p) * 1%), var(--line) 0); }
.fuRing i { position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
.fuRing b { position: relative; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fuRing.voll { background: conic-gradient(var(--green) 100%, var(--green) 0); }
.fuText { display: flex; flex-direction: column; min-width: 0; }
.fuText b { font-size: 16px; }
.fuText span { font-size: 13px; color: var(--muted); }
.wicon.chancen { background: linear-gradient(135deg, #FFB340, #FF7A00); }
.wmeta { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfuss { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.leise { background: none; border: none; color: var(--blue); font-size: 14px; cursor: pointer; padding: 4px 0; }
.leise[disabled] { opacity: .5; }

/* Radio */
.sender { list-style: none; margin: 0; padding: 0; }
.sender li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.sender li:first-child { border-top: none; }
.sender li.aus { opacity: .5; }
.sender .play { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--bg); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .15s; }
.sender .play svg { width: 20px; height: 20px; fill: currentColor; }
.sender .play:hover { transform: scale(1.06); }
.sender li.an .play { background: linear-gradient(135deg, #FF6A3D, #FF2D55); color: #fff; box-shadow: 0 6px 16px rgba(255,45,85,.3); }
.sInfo { min-width: 0; }
.sInfo b { display: block; font-size: 15px; font-weight: 600; }
.sInfo span { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sInfo .lauf { display: block; height: 3px; border-radius: 2px; background: var(--line); margin-top: 6px; overflow: hidden; }
.sInfo .lauf i { display: block; height: 100%; background: var(--muted); border-radius: 2px; transition: width 1s linear; }
.sender li.an .lauf i { background: linear-gradient(90deg, #FF6A3D, #FF2D55); }
.hoerer { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hoerer small { font-size: 11px; }

/* Konzerte */
.termine { list-style: none; margin: 0; padding: 0; }
.termine li { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.termine li:first-child { border-top: none; }
.termine li.leer { display: block; color: var(--muted); }
.tDatum { text-align: center; background: var(--bg); border-radius: 12px; padding: 5px 0; }
.tDatum b { display: block; font-size: 19px; line-height: 1; font-weight: 700; }
.tDatum small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.termine li.booked .tDatum { background: #5E5CE6; color: #fff; } .termine li.booked .tDatum small { color: rgba(255,255,255,.8); }
.termine li.want .tDatum { background: #FFC93C; color: #1D1D1F; } .termine li.want .tDatum small { color: rgba(29,29,31,.7); }
.tInfo { min-width: 0; }
.tInfo b { display: block; font-size: 15px; font-weight: 600; }
.tInfo span { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tRechts { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tRechts small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.badge { font-size: 11px; font-weight: 700; font-style: normal; background: #5E5CE6; color: #fff; border-radius: 6px; padding: 2px 7px; }
.badge.want { background: #FFC93C; color: #1D1D1F; }

/* ===== HUD (Questlog-Look, Cyberpunk) ===== */
.widget.hud {
  position: relative; color: #e6dfd1; background: #0b0709; border-radius: 24px; overflow: hidden;
  font-family: 'Rajdhani', system-ui, sans-serif; font-weight: 600; letter-spacing: .02em;
  background-image: radial-gradient(900px 400px at 90% -20%, rgba(211,87,91,.18), transparent 60%),
    linear-gradient(rgba(211,87,91,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(211,87,91,.05) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(211,87,91,.25);
}
.widget.hud::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.12) 2px 3px); }
.hudEcke { position: absolute; width: 18px; height: 18px; border-color: #f7f500; border-style: solid; opacity: .9; }
.hudEcke.tl { top: 12px; left: 12px; border-width: 2px 0 0 2px; }
.hudEcke.br { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }
.hudKopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 2px 4px 10px; }
.hudKopf h2 { margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: .22em; color: #f7f500; text-shadow: 0 0 10px rgba(247,245,0,.4); }
.hudKopf span { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: .14em; color: #61e4fa; white-space: nowrap; }
.hudListe { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.hudListe li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-left: 2px solid rgba(211,87,91,.3); margin-bottom: 6px; background: rgba(20,10,13,.7); transition: opacity .4s, transform .4s; }
.hudListe li.t1 { border-left-color: #ff3b4a; } .hudListe li.t2 { border-left-color: #61e4fa; } .hudListe li.t3 { border-left-color: #9a8f86; }
.hudListe li.spaet .hudTitel { color: #ff3b4a; }
.hudListe li.fertig { opacity: .25; transform: translateX(6px); }
.hudListe li.hudLeer { display: block; color: #9a8f86; border-left-color: transparent; background: none; }
.hudCheck { width: 22px; height: 22px; border: 2px solid #9a8f86; background: transparent; transform: rotate(45deg); cursor: pointer; transition: all .2s; }
.hudCheck:hover { border-color: #f7f500; box-shadow: 0 0 10px rgba(247,245,0,.35); }
.hudListe li.fertig .hudCheck { background: #4ef08a; border-color: #4ef08a; }
.hudTitel { font-size: 16px; letter-spacing: .04em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hudTitel small { margin-left: 8px; font-family: 'Orbitron', sans-serif; font-size: 10px; color: #61e4fa; }
.hudRechts { display: flex; gap: 8px; align-items: center; }
.hudRechts em { font-style: normal; font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: .08em; color: #f7f500; }
.hudTimer { font-style: normal; font-family: 'Orbitron', sans-serif; font-size: 10px; color: #ff3b4a; animation: hudBlink 1.2s steps(2) infinite; }
@keyframes hudBlink { 50% { opacity: .3; } }
.hudBalken { height: 4px; background: rgba(255,255,255,.08); margin: 8px 4px 0; position: relative; z-index: 1; }
.hudBalken i { display: block; height: 100%; background: linear-gradient(90deg, #f7f500, #61e4fa); box-shadow: 0 0 10px rgba(247,245,0,.5); transition: width .6s; }
.hudFuss { display: flex; justify-content: space-between; gap: 12px; margin: 10px 4px 2px; font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: .12em; color: #9a8f86; position: relative; z-index: 1; }
.hudFuss a { color: #61e4fa; }

/* ===== Kleinanzeigen-Ticker ===== */
.suchform { display: grid; grid-template-columns: 1fr 110px 80px; gap: 8px; align-items: center; margin-bottom: 10px; }
.suchform input[type=text], .suchform input[type=number] { font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; -webkit-appearance: none; }
.suchform .toggle { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.suchform .knopf.klein { margin: 0; padding: 10px 14px; font-size: 15px; border-radius: 12px; grid-column: 3; }
.suchform .toggle { grid-column: 1 / 3; }
@media (max-width: 520px) { .suchform { grid-template-columns: 1fr 1fr; } .suchform #sBegriff { grid-column: 1 / -1; } .suchform .toggle { grid-column: 1; } .suchform .knopf.klein { grid-column: 2; } }
.neuStrip { padding: 2px 0 4px; }
.neuReihe { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 8px; scrollbar-width: none; }
.neuStrip a { flex: 0 0 auto; max-width: 240px; background: linear-gradient(135deg, #30D158, #0A8F3C); color: #fff; border-radius: 12px; padding: 8px 12px; text-decoration: none; display: grid; }
.neuStrip a b { font-size: 15px; } .neuStrip a span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .neuStrip a small { font-size: 11px; opacity: .8; }
.suchen { list-style: none; margin: 0; padding: 0; }
.suchen > li { border-top: 1px solid var(--line); padding: 8px 0; }
.suchen > li:first-child { border-top: none; }
.sKopf { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 8px; align-items: center; }
.sAuf { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; padding: 4px 0; }
.sTitel { cursor: pointer; }
.sTitel { min-width: 0; } .sTitel b { display: block; font-size: 15px; font-weight: 600; } .sTitel span { display: block; font-size: 12px; color: var(--muted); }
.sZahlen { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .sZahlen span { font-size: 13px; } .sZahlen small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.neuBadge { font-style: normal; font-size: 11px; font-weight: 700; background: #30D158; color: #fff; border-radius: 6px; padding: 1px 7px; }
.sAktion { display: flex; gap: 2px; }
.sAktion button { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--bg); color: var(--ink); cursor: pointer; font-size: 14px; }
.sAktion button:hover { background: var(--line); }
.treffer { list-style: none; margin: 8px 0 0 32px; padding: 0; display: grid; gap: 6px; }
.treffer a { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "bild titel preis" "bild meta meta"; gap: 0 10px; align-items: center; text-decoration: none; color: var(--ink); background: var(--bg); border-radius: 12px; padding: 6px 10px 6px 6px; }
.treffer li.neu a { box-shadow: inset 3px 0 0 #30D158; }
.treffer img, .treffer .kein { grid-area: bild; width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--line); display: block; }
.treffer .tt { grid-area: titel; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treffer b { grid-area: preis; font-size: 14px; white-space: nowrap; }
.treffer small { grid-area: meta; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alleLink { display: inline-block; margin: 8px 0 0 32px; font-size: 13px; }
.leerHinweis { color: var(--muted); font-size: 14px; margin: 6px 0 0; }

/* ===== Anmeldung: Glas und Licht ===== */
.anmeldung { position: relative; overflow: hidden; }
.himmel { position: fixed; inset: -20%; z-index: -1; filter: blur(60px) saturate(1.2); opacity: .55; }
.himmel i { position: absolute; border-radius: 50%; width: 55vmax; height: 55vmax; animation: treiben 26s ease-in-out infinite alternate; }
.himmel i:nth-child(1) { background: #FF6A3D; left: -10%; top: -10%; }
.himmel i:nth-child(2) { background: #5E5CE6; right: -15%; top: 10%; animation-delay: -9s; animation-duration: 32s; }
.himmel i:nth-child(3) { background: #30D158; left: 20%; bottom: -30%; animation-delay: -17s; animation-duration: 38s; width: 45vmax; height: 45vmax; }
@keyframes treiben { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw, 6vh) scale(1.15); } }
.anmeldung .karte { background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(255,255,255,.35); animation: auftauchen .6s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .anmeldung .karte { border-color: rgba(255,255,255,.08); } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.anmeldung .gruppe { background: color-mix(in srgb, var(--bg) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .himmel i { animation: none; } }
.widgets { align-items: start; }
@media (max-width: 520px) {
  .sKopf { grid-template-columns: 24px 1fr auto; grid-template-areas: "auf titel aktion" "auf zahlen zahlen"; }
  .sAuf { grid-area: auf; } .sTitel { grid-area: titel; } .sAktion { grid-area: aktion; }
  .sZahlen { grid-area: zahlen; flex-direction: row; align-items: center; gap: 8px; justify-content: flex-start; margin-top: 4px; }
  .treffer, .alleLink { margin-left: 0; }
}

/* ===== Push-Banner ===== */
.pushBanner { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 12px; align-items: center; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 16px; }
.pushBanner[hidden] { display: none; }
.pbIcon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #FF3B30, #FF9500); display: grid; place-items: center; }
.pbIcon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pbText b { display: block; font-size: 15px; } .pbText span { display: block; font-size: 13px; color: var(--muted); }
.pushBanner .knopf.klein { margin: 0; width: auto; padding: 9px 14px; font-size: 15px; border-radius: 12px; }
.pbZu { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 6px; }
@media (max-width: 520px) { .pushBanner { grid-template-columns: 40px 1fr auto; } .pushBanner .knopf.klein { grid-column: 1 / -1; } .pbZu { grid-row: 1; grid-column: 3; } }

/* ===== Chat (Nachrichten-Look) ===== */
.widget.chat { padding-bottom: 12px; }
.chatKopf { margin-bottom: 6px; }
.chatWer { display: flex; align-items: center; gap: 10px; }
.chatWer b { display: block; font-size: 17px; } .chatWer small { display: block; font-size: 12px; color: var(--muted); }
.avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #8E8E93, #636366); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 17px; }
.avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #8E8E93; border: 2px solid var(--card); transition: background .3s; }
.avatar.online::after { background: #34C759; box-shadow: 0 0 0 0 rgba(52,199,89,.6); animation: pulsieren 2s infinite; }
@keyframes pulsieren { 70% { box-shadow: 0 0 0 7px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } }
.pingKnopf { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px; padding: 8px 14px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .15s, background .2s; }
.pingKnopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pingKnopf:hover { transform: scale(1.04); }
.pingKnopf.gesendet { background: #FF9500; color: #fff; }
.pingKnopf.gesendet svg { animation: drehen 1s ease-out; }
@keyframes drehen { to { transform: rotate(180deg) scale(1.2); } }
.verlauf { height: 300px; overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
.blase { max-width: 78%; padding: 8px 13px; border-radius: 18px; font-size: 15px; line-height: 1.35; white-space: pre-wrap; word-wrap: break-word; background: var(--bg); align-self: flex-start; border-bottom-left-radius: 6px; }
.blase.eigen { background: #0A84FF; color: #fff; align-self: flex-end; border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.zeitTrenner { text-align: center; font-size: 11px; color: var(--muted); margin: 10px 0 4px; }
.gelesen { align-self: flex-end; font-size: 11px; color: var(--muted); margin: 1px 4px 0; }
.ping { align-self: center; margin: 6px 0; }
.ping span { display: inline-block; font-size: 12px; font-weight: 600; color: #fff; background: #FF9500; border-radius: 999px; padding: 4px 12px; }
.ping.eigen span { background: var(--bg); color: var(--muted); }
.chatLeer { margin: auto; color: var(--muted); font-size: 14px; }
.eingabe { display: grid; grid-template-columns: 1fr 36px; gap: 8px; align-items: center; margin-top: 8px; border: 1px solid var(--line); border-radius: 22px; padding: 4px 4px 4px 14px; }
.eingabe input { font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: none; outline: none; min-width: 0; padding: 6px 0; }
.eingabe button { width: 32px; height: 32px; border-radius: 50%; border: none; background: #0A84FF; display: grid; place-items: center; cursor: pointer; }
.eingabe button svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.eingabe:focus-within { border-color: #0A84FF; }
.widget.wackeln { animation: wackeln .5s; }
@keyframes wackeln { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ===== Ticker: Optionen und Glocke ===== */
.suchform .optionen { grid-column: 1 / 3; display: flex; gap: 14px; flex-wrap: wrap; }
.suchform .optionen .toggle { grid-column: auto; }
@media (max-width: 520px) { .suchform .optionen { grid-column: 1; } }
.sAktion .glocke svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sAktion .glocke.an { background: rgba(255,149,0,.15); }
.sAktion .glocke.an svg { stroke: #FF9500; fill: rgba(255,149,0,.25); }

/* ===== Einstellungen: Schalter wie iOS ===== */
.schalter { position: relative; width: 51px; height: 31px; flex: none; }
.schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.schalter i { position: absolute; inset: 0; border-radius: 999px; background: rgba(120,120,128,.24); transition: background .25s; }
.schalter i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.schalter input:checked + i { background: #34C759; }
.schalter input:checked + i::after { transform: translateX(20px); }
.schalter input:focus-visible + i { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ===== Vier Kacheln ===== */
.kacheln.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kacheln.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .kacheln.vier { gap: 12px; } .kacheln.vier .kachel { min-height: 136px; padding: 16px; } .kacheln.vier .kachel .text b { font-size: 19px; } .kacheln.vier .kachel .pfeil { display: none; } .kacheln.vier .kachel .text span { max-width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
.kachel.freunde { background: linear-gradient(135deg, #34C759 0%, #0E9F6E 100%); }
.kachel.fun { background: linear-gradient(135deg, #FF9F0A 0%, #FF375F 100%); border: none; font: inherit; text-align: left; cursor: pointer; }
.kachel .merk { z-index: 1; }

/* ===== Wann zuletzt ===== */
.wicon.zuletzt { background: linear-gradient(135deg, #64D2FF, #0A84FF); }
.routineForm { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.routineForm input { font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; min-width: 0; }
.routineForm #rSymbol { text-align: center; }
.rIntervall { font-size: 13px; color: var(--muted); white-space: nowrap; } .rIntervall input { width: 56px; padding: 7px 6px; }
.routineForm .knopf.klein { margin: 0; width: auto; padding: 9px 12px; font-size: 14px; border-radius: 12px; }
@media (max-width: 520px) { .routineForm { grid-template-columns: 48px 1fr; } .rIntervall { grid-column: 1; } .routineForm .knopf.klein { grid-column: 2; } }
.routinen { list-style: none; margin: 0; padding: 0; }
.routinen li { display: grid; grid-template-columns: 34px 1fr 40px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.routinen li:first-child { border-top: none; }
.routinen li.leer { display: block; color: var(--muted); }
.rSym { font-size: 22px; text-align: center; }
.rText { background: none; border: none; text-align: left; padding: 0; cursor: pointer; color: inherit; font: inherit; min-width: 0; }
.rText b { display: block; font-size: 15px; font-weight: 600; } .rText span { display: block; font-size: 13px; color: var(--muted); }
.routinen li.faellig .rText span { color: #FF3B30; font-weight: 600; }
.rBalken { display: block; height: 3px; border-radius: 2px; background: var(--line); margin-top: 5px; overflow: hidden; }
.rBalken i { display: block; height: 100%; background: #0A84FF; border-radius: 2px; }
.routinen li.faellig .rBalken i { background: #FF3B30; }
.rErledigt { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: transparent; color: var(--muted); font-size: 16px; font-weight: 700; cursor: pointer; transition: all .2s; }
.rErledigt:hover { border-color: #34C759; color: #34C759; }
.routinen li.faellig .rErledigt { border-color: #FF3B30; color: #FF3B30; }
.routinen li.geschafft .rErledigt { background: #34C759; border-color: #34C759; color: #fff; transform: scale(1.1); }
.rMehr { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--muted); padding: 4px 0 2px; }
.rMehr input { font: inherit; font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; width: 64px; }
.rMehr input[type=date] { width: auto; }
.rMehr small { flex-basis: 100%; }
.leise.rot { color: #FF3B30; }

/* ===== Fun-Blatt (Sheet wie iOS) ===== */
dialog.blatt { width: min(560px, 100%); max-height: min(88dvh, 820px); border: none; border-radius: 28px; padding: 10px 22px 22px; background: var(--card); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow-y: auto; }
dialog.blatt::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.blatt[open] { animation: hochfahren .4s cubic-bezier(.2,.8,.2,1); }
@keyframes hochfahren { from { transform: translateY(40px); opacity: 0; } }
@media (max-width: 600px) { dialog.blatt { margin: auto 0 0; max-width: 100%; border-radius: 28px 28px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); } }
.blattGriff { width: 36px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 8px; }
.blattKopf { display: flex; justify-content: space-between; align-items: center; }
.blattKopf h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.blattZu { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--bg); color: var(--muted); cursor: pointer; }
.vorschlag { margin: 16px 0 12px; border-radius: 22px; padding: 22px; text-align: center; background: linear-gradient(135deg, #FF9F0A, #FF375F); color: #fff; box-shadow: 0 14px 30px rgba(255,55,95,.28); }
.vorschlag.neu { animation: wuerfelAuf .45s cubic-bezier(.2,.8,.2,1); }
@keyframes wuerfelAuf { from { transform: scale(.92) rotate(-2deg); opacity: .3; } }
.vSym { display: block; font-size: 56px; line-height: 1.1; }
.vorschlag b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.vorschlag p { margin: 6px 0 0; font-size: 16px; opacity: .92; }
.vorschlag small { display: block; margin-top: 10px; font-size: 12px; opacity: .8; }
.vFreund { display: block; margin-top: 12px; background: rgba(255,255,255,.22); color: #fff; border-radius: 12px; padding: 8px 12px; font-weight: 600; font-size: 14px; }
.vorschlagKnoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vorschlagKnoepfe .knopf { margin: 0; }
.vorschlagKnoepfe #wuerfeln { background: var(--bg); color: var(--ink); }
.knopf.gruen { background: #34C759; }
.blattUnter { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 8px; font-weight: 600; }
.ideen { display: flex; flex-wrap: wrap; gap: 8px; }
.idee { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 8px 30px 8px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.idee.an { background: var(--ink); color: var(--card); border-color: var(--ink); }
.idee i { position: absolute; right: 8px; font-style: normal; font-size: 11px; opacity: .45; padding: 2px; }
.idee i:hover { opacity: 1; }
.ideeForm { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; margin-top: 12px; }
.ideeForm input { font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; min-width: 0; }
.ideeForm #iSymbol { text-align: center; }
.ideeForm .knopf.klein { margin: 0; width: auto; padding: 9px 14px; font-size: 14px; border-radius: 12px; }

/* hidden gilt immer, auch gegen display-Regeln von Knöpfen */
[hidden] { display: none !important; }
@media (max-width: 520px) {
  .routineForm { grid-template-columns: 48px 1fr; }
  .routineForm .rIntervall { grid-column: 1 / -1; }
  .routineForm .knopf.klein { grid-column: 1 / -1; }
}


/* =====================================================================
   Startseite als Home-Bildschirm: weiche Tapete, Dock mit Apps,
   zwei Spalten (Widgets und Seitenleiste „Was läuft“)
   ===================================================================== */
.start { position: relative; }
.tapete { position: fixed; inset: -25%; z-index: -1; pointer-events: none; filter: blur(80px) saturate(1.15); opacity: .32; }
/* Steht still: die treibenden Flecken unter 80px Unschärfe ließen die Grafikkarte jedes Bild neu rechnen und
   zogen am Mac spürbar Akku, solange das Dashboard offen war (Leon, 28.10.2026). */
.tapete i { position: absolute; border-radius: 50%; width: 55vmax; height: 55vmax; }
.tapete i:nth-child(1) { background: #FF9F0A; left: -12%; top: -15%; }
.tapete i:nth-child(2) { background: #5E5CE6; right: -18%; top: 5%; animation-delay: -14s; animation-duration: 48s; }
.tapete i:nth-child(3) { background: #34C759; left: 25%; bottom: -35%; animation-delay: -26s; animation-duration: 56s; width: 45vmax; height: 45vmax; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tapete { opacity: .22; } }
@media (prefers-reduced-motion: reduce) { .tapete i { animation: none; } }
.wrap.breit { max-width: 1240px; }

/* Kopf mit zwei Uhren */
.zeiten { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dort { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--card) 75%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06); color: var(--ink); text-decoration: none; transition: transform .2s; }
.dort:hover { transform: translateY(-1px); text-decoration: none; }
.dort .avatar.klein { width: 28px; height: 28px; font-size: 13px; }
.dort .avatar.klein::after { width: 9px; height: 9px; border-width: 1.5px; }
.dortText { display: flex; flex-direction: column; line-height: 1.15; }
.dortText b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dortText small { font-size: 12px; color: var(--muted); white-space: nowrap; }


/* Dock */
.dock {
  display: flex; gap: 6px; justify-content: space-between; align-items: flex-start;
  padding: 18px 14px 12px; margin: 4px 0 22px; border-radius: 30px;
  background: color-mix(in srgb, var(--card) 62%, transparent);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.04), 0 14px 36px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dock { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 36px rgba(0,0,0,.5); } }
.app { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; padding: 4px 2px; color: var(--ink); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app:hover { text-decoration: none; }
.app .ikone {
  position: relative; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.28), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.1));
}
.app:hover .ikone { transform: translateY(-4px) scale(1.04); box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 18px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); }
.app:active .ikone { transform: scale(.94); transition-duration: .1s; }
.app .ikone svg { width: 36px; height: 36px; color: #fff; fill: currentColor; stroke: none; }
.app .name { font-size: 13px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app.radio .ikone { background-color: #FF3B30; background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FF6A3D, #FF2D55); }
.app.konzerte .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #5E5CE6, #2F2BD1); }
.app.freunde .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #34C759, #0E9F6E); }
.app.fun .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FF9F0A, #FF375F); }
.app.questlog .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(135deg, #2b1b22, #0b0709); }
.app.questlog .ikone svg { color: #f7f500; filter: drop-shadow(0 0 6px rgba(247,245,0,.45)); }
.app.garten .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #7FB069, #3E7A4B); }
.app.mediathek .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #40C8E0, #0A6E9A); }
.app.inbox .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #32ADE6, #0A84FF); }
.app.funapp .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FFD60A, #FF375F 55%, #BF5AF2); }
.app.foto .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FFB000, #E8590C); }
.app.funken .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FF2D55, #AF52DE); }
.app.chancen .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FFB340, #FF7A00); }
.app.jobs .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #3A7BD5, #1D3F8F); }
.app.zukunft .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #5E5CE6, #BF5AF2); }
.app.tv .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #6b4a35, #2e1f16); }
.app.rechner .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.2), transparent 55%), linear-gradient(135deg, #3b0f0a, #0b0507); }
.app.rechner .ikone svg { color: #3dff88; filter: drop-shadow(0 0 5px rgba(61,255,136,.45)); }
.app.einstellungen .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #A2A2A8, #636366); }
.app .zahl { position: absolute; top: -7px; right: -7px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #FF3B30; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 2px var(--card); line-height: 1; }
.app .live { position: absolute; right: 8px; bottom: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: pulsieren 1.6s infinite; }
@media (max-width: 760px) {
  .dock { flex-wrap: wrap; justify-content: center; gap: 10px 6px; padding: 16px 10px 12px; border-radius: 26px; }
  .app { flex: 0 0 30%; }
  .app .ikone { width: 62px; height: 62px; border-radius: 19px; }
  .app .ikone svg { width: 32px; height: 32px; }
}
@media (max-width: 380px) { .app .ikone { width: 56px; height: 56px; border-radius: 17px; } }

/* Zwei Spalten */
.raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.widgets.spalte { margin-top: 0; display: flex; gap: 20px; align-items: flex-start; }
.widgets.spalte > .wsp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.widgets.spalte.eins > .wsp.rechts { display: none; }
.seite { position: sticky; top: 20px; display: grid; gap: 20px; }
@media (max-width: 1060px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .seite { position: static; order: -1; }
}

/* Widget-Kopf: kleine App-Ikone statt Punkt */
.wicon { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.wicon.laeuft { background: linear-gradient(135deg, #FF9F0A, #FF375F); }
.widget { border-radius: 26px; background: color-mix(in srgb, var(--card) 92%, transparent); }

/* Was läuft: jeder Bereich in seiner Farbe */
.verteilung { margin: 0 0 14px; }
.vBalken { display: flex; gap: 3px; height: 8px; border-radius: 4px; overflow: hidden; }
.vBalken i { display: block; min-width: 6px; }
.vLegende { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.vLegende span { display: inline-flex; align-items: center; gap: 5px; }
.vLegende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.vLegende b { color: var(--ink); font-weight: 600; }
.bereiche { display: grid; gap: 10px; }
.bereich { --f: #8E8E93; border-radius: 18px; padding: 10px 10px 6px; background: color-mix(in srgb, var(--f) 9%, transparent); box-shadow: inset 3px 0 0 var(--f); }
.bereich h3 { margin: 0 0 2px; display: flex; align-items: center; gap: 7px; font-size: 13px; }
.chip { display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .02em; color: #fff; background: var(--f); border-radius: 999px; padding: 3px 10px; }
.bereich h3 .bAktion { margin-left: auto; display: none; gap: 3px; align-items: center; }
.laeuft.bearbeiten .bereich h3 .bAktion { display: inline-flex; }
.bAktion button { border: none; background: var(--card); color: var(--muted); width: 26px; height: 26px; border-radius: 50%; font-size: 13px; cursor: pointer; }
.bAktion .farbWahl { background: conic-gradient(#FF375F, #FF9F0A, #34C759, #64D2FF, #0A84FF, #BF5AF2, #FF375F); box-shadow: inset 0 0 0 3px var(--card); }
.eintraege { list-style: none; margin: 0; padding: 0; }
.eintraege li { border-top: 1px solid color-mix(in srgb, var(--f) 16%, transparent); }
.eintraege li:first-child { border-top: none; }
.eintraege button { width: 100%; display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; background: none; border: none; text-align: left; padding: 8px 2px; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; }
.eintraege button:hover { background: color-mix(in srgb, var(--f) 10%, transparent); }
.eintraege .punktS { width: 10px; height: 10px; border-radius: 50%; background: var(--f); justify-self: center; box-shadow: 0 0 0 3px color-mix(in srgb, var(--f) 22%, transparent); }
.eintraege li.bald .punktS { background: transparent; box-shadow: inset 0 0 0 2px var(--f); }
.eintraege li.pause .punktS { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); opacity: .6; }
.eintraege li.fertig .punktS { background: var(--muted); box-shadow: none; opacity: .5; }
.eintraege li.pause .eTitel b, .eintraege li.fertig .eTitel b { color: var(--muted); }
.eintraege li.fertig .eTitel b { text-decoration: line-through; }
.eTitel { min-width: 0; } .eTitel b { display: block; font-size: 15px; font-weight: 600; } .eTitel span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sPille { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-left: 6px; padding: 1px 6px; border-radius: 5px; vertical-align: 2px; color: var(--f); background: color-mix(in srgb, var(--f) 16%, transparent); }
.sPille.pause { color: var(--muted); background: var(--line); }
.eRechts { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: right; }
.eRechts.bald { color: var(--f); font-weight: 600; }
.eRechts.knapp { color: #FF3B30; font-weight: 600; }
.eRechts.heute { color: #fff; background: #FF3B30; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.eintraege li.neuEintrag button { color: var(--f); font-weight: 600; font-size: 13px; padding: 6px 2px; display: none; }
.laeuft.bearbeiten .eintraege li.neuEintrag button { display: grid; }
.eintraege li.leerB { color: var(--muted); font-size: 13px; padding: 4px 2px 6px; }
.bereichNeu { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.bereichNeu input { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.bereichNeu .knopf.klein { margin: 0; width: auto; padding: 8px 12px; font-size: 14px; border-radius: 12px; }

/* Eintrag-Blatt */
.ebForm { display: grid; gap: 12px; margin-top: 14px; }
.ebForm label { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.ebZeile { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
@media (max-width: 480px) { .ebZeile { grid-template-columns: 1fr; } }
.feld { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.segment { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg); border-radius: 10px; padding: 2px; }
.segment button { border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 4px; border-radius: 8px; color: var(--muted); cursor: pointer; }
.segment button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.dFuss { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.dFuss .knopf.klein { margin: 0; width: auto; padding: 10px 18px; font-size: 15px; border-radius: 12px; }


/* =====================================================================
   Handy als App: Tab-Leiste unten, Glas wie bei iOS
   ===================================================================== */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--card) 72%, transparent);
    backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
    border-top: 1px solid var(--line);
  }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 4px 0; -webkit-tap-highlight-color: transparent; }
  .tabbar a svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a.an { color: var(--blue); }
  .tabbar a.an svg { stroke-width: 2.2; }
  .tabPunkt { position: absolute; top: 2px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 2px var(--card); }
  .start .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .widget { scroll-margin-top: calc(14px + env(safe-area-inset-top)); }
  .kopfzeile { flex-direction: row; align-items: flex-start; }
  .kopfzeile .gruss h1 { font-size: 30px; }
  .zeiten { align-items: flex-end; }
  .uhr { font-size: 40px; }
  .dort { padding: 4px 10px 4px 4px; }
  .dortText small { white-space: normal; text-align: left; max-width: 150px; }
  .verlauf { height: 260px; }
  /* Ansichten: jeder Tab zeigt nur seine Bereiche */
  .ansichtAus { display: none !important; }
  body[data-ansicht=aufgaben] .seite { order: -1; }
  .ansichtKopf { padding: calc(6px + env(safe-area-inset-top)) 4px 14px; }
  .ansichtKopf[hidden] { display: none; }
  .ansichtKopf h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
  .ansichtKopf p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
  .startHilfe { margin: 4px 4px 14px; font-size: 14px; line-height: 1.45; color: var(--muted); }
  .startHilfe .leise { padding: 0; font-size: 14px; }
}

/* Als Home-Bildschirm-App: Platz unter der Statusleiste, kein Gummiband oben */
.app-modus { overscroll-behavior-y: none; }
.dort.nacht .avatar { filter: grayscale(.4) brightness(.9); }
.laeuft:not(.bearbeiten) .eintraege li.neuEintrag { display: none; }


/* =====================================================================
   Countdown, Heute, Check-in, Wünsche, Mithören, Anruf, Rundgang
   ===================================================================== */
.countdowns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.countdowns a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06); color: var(--ink); text-decoration: none; font-size: 14px; }
.countdowns a b { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.countdowns a span { line-height: 1.2; }
.countdowns a span small { display: block; font-size: 12px; color: var(--muted); }
.countdowns a.heute b { animation: pulsieren 2s infinite; }

.mond { width: 16px; height: 16px; margin-left: 5px; vertical-align: -2px; fill: #FFD60A; stroke: none; }
.dort.nacht { background: color-mix(in srgb, #1C1C3A 85%, transparent); color: #fff; }
.dort.nacht .dortText small { color: rgba(255,255,255,.7); }

/* Heute: drei Dinge */
.wicon.heute { background: linear-gradient(135deg, #FFD60A, #FF9F0A); }
.heuteFrage { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.heuteFelder { display: grid; gap: 8px; }
.heuteFelder .feld { font-size: 16px; }
.vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.vorschlaege button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vorschlaege button i { font-style: normal; margin-right: 5px; }
.vorschlaege button:hover { border-color: var(--blue); color: var(--blue); }
#heuteLos { width: 100%; margin-top: 12px; padding: 11px; font-size: 16px; border-radius: 14px; }
.dinge { list-style: none; margin: 0; padding: 0; counter-reset: ding; }
.dinge li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.dinge li:first-child { border-top: none; }
.dinge button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: transparent; color: transparent; font-size: 18px; cursor: pointer; transition: all .2s; display: grid; place-items: center; }
.dinge button:hover { border-color: #34C759; }
.dinge li.fertig button { background: #34C759; border-color: #34C759; color: #fff; transform: scale(1.05); }
.dinge li b { font-size: 17px; font-weight: 600; }
.dinge li.fertig b { color: var(--muted); text-decoration: line-through; }
.dinge li small { display: block; font-size: 12px; color: var(--muted); }
.dinge li.alles { display: block; text-align: center; padding: 14px 0 6px; font-size: 16px; }
.heuteRing { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: conic-gradient(#34C759 var(--p, 0%), var(--line) 0); }
.heuteRing i { width: 20px; height: 20px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-style: normal; }

/* Check-in */
.wicon.checkin { background: linear-gradient(135deg, #BF5AF2, #5E5CE6); }
.ciFragen { display: grid; gap: 10px; }
.ciFragen label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.ciFragen textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; min-height: 54px; }
.ciSenden { margin-top: 10px; width: 100%; padding: 11px; border-radius: 14px; font-size: 16px; }
.ciWarte { text-align: center; padding: 18px 10px; color: var(--muted); }
.ciWarte b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.ciAntworten { display: grid; gap: 12px; }
.ciFrage { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 4px; }
.ciPaar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .ciPaar { grid-template-columns: 1fr; } }
.ciPaar div { background: var(--bg); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; }
.ciPaar div b { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.ciPaar div.ich { background: color-mix(in srgb, #5E5CE6 12%, transparent); }

/* Wünsche */
.wicon.wuensche { background: linear-gradient(135deg, #FF9F0A, #FF375F); }
.wunschListe { list-style: none; margin: 0; padding: 0; }
.wunschListe li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.wunschListe li:first-child { border-top: none; }
.wunschListe b { display: block; font-size: 15px; }
.wunschListe span { display: block; font-size: 13px; color: var(--muted); }
.wunschListe em { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 5px; margin-right: 6px; background: var(--line); color: var(--muted); }
.wunschListe em.brauche { background: rgba(52,199,89,.18); color: #1E8E3E; }
.wunschListe em.nett { background: rgba(10,132,255,.14); color: #0A84FF; }
.wunschListe em.nein { background: rgba(255,59,48,.12); color: #FF3B30; }
.wunschListe button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.wunschListe button:hover { border-color: #34C759; color: #34C759; }

/* Mithören */
.mithoeren { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #FF2D55 9%, transparent); font-size: 14px; }
.mithoeren .avatar { width: 30px; height: 30px; font-size: 13px; }
.mithoeren span { flex: 1; min-width: 0; }
.mithoeren b { font-weight: 600; }
.mithoeren button { border: none; border-radius: 999px; padding: 7px 14px; background: linear-gradient(135deg, #FF6A3D, #FF2D55); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mithoeren.gemeinsam { background: color-mix(in srgb, #34C759 12%, transparent); }

/* Anruf */
.anrufKnopf { padding: 8px 10px; }
.anrufKnopf svg { width: 20px; height: 20px; stroke: #34C759; fill: none; }
.anrufHinweis { margin: 0; min-height: 0; font-size: 12px; color: var(--muted); text-align: center; }
.anrufHinweis:empty { display: none; }
.anrufBanner { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 50; width: min(440px, calc(100% - 24px)); display: grid; grid-template-columns: 44px 1fr 48px 48px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 24px; background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.25); animation: hochfahren .4s cubic-bezier(.2,.8,.2,1); }
.anrufBanner .avatar { width: 44px; height: 44px; font-size: 19px; }
.abText b { display: block; font-size: 16px; } .abText small { display: block; font-size: 12px; color: var(--muted); }
.abKnopf { width: 48px; height: 48px; border-radius: 50%; border: none; display: grid; place-items: center; cursor: pointer; color: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.abKnopf svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.abKnopf.gruen { background: #34C759; animation: pulsieren 1.6s infinite; }
.abKnopf.rot { background: #FF3B30; } .abKnopf.rot svg { transform: rotate(135deg); }
.anrufLeiste { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-radius: 999px; background: #1C1C1E; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 14px; max-width: calc(100% - 24px); }
.alPunkt { width: 10px; height: 10px; border-radius: 50%; background: #34C759; animation: pulsieren 1.6s infinite; flex: none; }
.anrufLeiste b { font-weight: 600; }
.anrufLeiste #anrufStatus { color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alKnopf { border: none; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; white-space: nowrap; }
.alKnopf[aria-pressed="true"] { background: #fff; color: #1C1C1E; }
.alKnopf.rot { background: #FF3B30; }
.imAnruf .pushBanner { display: none; }

/* Checkliste im Eintrag */
.kreuz { display: flex !important; align-items: center; gap: 8px; font-size: 14px !important; color: var(--ink) !important; }
.kreuz input { width: 20px; height: 20px; accent-color: var(--blue); }
.schritte h4 { margin: 4px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; justify-content: space-between; }
.schritte ul { list-style: none; margin: 0; padding: 0; }
.schritte li { display: grid; grid-template-columns: 30px 1fr 28px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.schritte li:first-child { border-top: none; }
.schritte li button.hk { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: transparent; color: transparent; cursor: pointer; font-size: 14px; }
.schritte li.erledigt button.hk { background: #34C759; border-color: #34C759; color: #fff; }
.schritte li.erledigt span { color: var(--muted); text-decoration: line-through; }
.schritte li button.weg { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.schrittNeu { display: grid; grid-template-columns: 1fr 44px; gap: 8px; margin-top: 8px; }
.schrittNeu .knopf.klein { margin: 0; padding: 0; width: 44px; border-radius: 12px; font-size: 20px; }
.eTitel b small.sch { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--f); background: color-mix(in srgb, var(--f) 14%, transparent); border-radius: 6px; padding: 1px 6px; vertical-align: 2px; }
.bAktion .teilen[aria-pressed="true"] { background: var(--f); color: #fff; }
.andereLaeuft { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.andereLaeuft h3.wer { margin: 0 0 8px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.andereLaeuft h3.wer .avatar { width: 22px; height: 22px; font-size: 11px; }
.andereLaeuft .bereich { opacity: .92; }
.andereLaeuft .eintraege button { cursor: default; }
.andereLaeuft .eintraege button:hover { background: none; }

/* Rundgang */
dialog.rundgang { width: min(520px, 100%); }
.rgPunkte { display: flex; justify-content: center; gap: 6px; margin: 4px 0 14px; }
.rgPunkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .3s; }
.rgPunkte i.an { background: var(--ink); width: 18px; border-radius: 4px; }
.rgInhalt { min-height: 300px; animation: wuerfelAuf .35s cubic-bezier(.2,.8,.2,1); }
.rgBild { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; margin: 6px 0 16px; color: #fff; font-size: 34px; box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.35); }
.rgInhalt h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.rgInhalt p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.rgInhalt p.leise { color: var(--muted); font-size: 14px; }
.rgInhalt ul { margin: 0 0 10px; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.rgInhalt .knopf.klein { margin: 8px 0 0; width: auto; padding: 10px 16px; font-size: 15px; border-radius: 12px; }
.rgFuss { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.rgKnoepfe { display: flex; gap: 8px; }
.rgKnoepfe .knopf.klein { margin: 0; width: auto; padding: 10px 18px; font-size: 15px; border-radius: 12px; }
.knopf.grau { background: var(--bg); color: var(--ink); }
.rgMatrix { display: grid; gap: 8px; margin: 8px 0 12px; }
.rgMatrix .zeileM { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.rgMatrix .segment { grid-template-columns: repeat(3, auto); }
.rgMatrix .segment button { padding: 6px 9px; font-size: 12px; }
.rgInhalt textarea { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 80px; resize: vertical; }

/* Rückblick */
.wzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 4px; }
@media (max-width: 480px) { .wzahlen { grid-template-columns: repeat(2, 1fr); } }
.wzahl { border-radius: 16px; padding: 12px 10px; background: color-mix(in srgb, var(--f) 14%, transparent); text-align: center; }
.wzahl b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.wzahl span { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.wliste { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.wkopf .leise + .wmeta, .wkopf #heuteMeta { margin-left: auto; }


/* ===== Fokus-Karte: das eine große Ding, oben rechts ===== */
.fokusKarte { --f: #8C1515; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 16px; border-radius: 26px; color: #fff; text-decoration: none; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.26), transparent 55%), linear-gradient(135deg, var(--f), color-mix(in srgb, var(--f) 55%, #000 45%));
  box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 18px 44px color-mix(in srgb, var(--f) 40%, transparent);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.fokusKarte:hover { transform: translateY(-3px) scale(1.01); text-decoration: none; box-shadow: 0 4px 8px rgba(0,0,0,.12), 0 28px 60px color-mix(in srgb, var(--f) 50%, transparent); }
.fokusKarte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.035) 14px 15px); }
.fkKopf { display: flex; justify-content: space-between; align-items: center; }
.fkKurz { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; background: rgba(255,255,255,.2); padding: 3px 9px; border-radius: 999px; }
.fkPfeil { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 18px; line-height: 1; }
.fokusKarte b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; }
.fkUnter { font-size: 13px; opacity: .85; }
.fkZahl { display: flex; align-items: baseline; gap: 4px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.fkZahl b { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0; }
.fkZahl small { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; margin-right: 10px; }
.fkNaechste { font-size: 14px; font-weight: 600; }
.fkSchritt { font-size: 13px; opacity: .85; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1060px) { .fokusKarte { order: -2; } }

/* ===== Widgets anordnen: eigenes Blatt mit zwei Spalten ===== */
.widget.versteckt { display: none; }
#anordnenBlatt { width: min(820px, 100%); }
.oSpalten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.oSpalten h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; font-weight: 700; }
.oListe { list-style: none; margin: 0; padding: 6px; min-height: 64px; border-radius: 16px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.oListe li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; background: var(--card); border-radius: 12px; padding: 8px 8px 8px 4px; box-shadow: 0 1px 2px rgba(0,0,0,.08); font-size: 14px; user-select: none; -webkit-user-select: none; }
.oListe li.aus b { color: var(--muted); text-decoration: line-through; }
.oListe li.zieht { opacity: .85; box-shadow: 0 8px 24px rgba(0,0,0,.2); transform: scale(1.02); }
.oListe .griff { cursor: grab; touch-action: none; color: var(--muted); font-size: 18px; text-align: center; padding: 4px 0; }
.oListe b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oKnoepfe { display: flex; gap: 3px; }
.oKnoepfe button { border: none; background: var(--bg); color: var(--ink); border-radius: 8px; width: 30px; height: 30px; font: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.oKnoepfe button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; vertical-align: middle; }
.oKnoepfe button.auge.aus { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.oHinweis { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
@media (max-width: 600px) { .oSpalten { grid-template-columns: 1fr; } }
.fuss button#anordnen { color: var(--blue); }


/* ===== Fokus im Dock: ganz rechts, rot, mit Trenner. Alarm ruhig mit rotem Ring. ===== */
.dockTrenner { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--line); flex: 0 0 1px; }
.app.fokusApp { --f: #8C1515; }
.app.fokusApp .ikone { background-color: var(--f); background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.28), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--f) 70%, #fff 30%), var(--f) 55%, color-mix(in srgb, var(--f) 70%, #000 30%)); }
.app.fokusApp .name { font-weight: 700; color: var(--f); }
.app.fokusApp.alarm .ikone { box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 10px 24px rgba(0,0,0,.14), 0 0 0 3px rgba(255,59,48,.45); }
@media (max-width: 640px) { .dockTrenner { display: none; } }

/* ===== Fokus-Karte: Alarm-Zustand ===== */
.fkAlarm { margin-left: auto; margin-right: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #fff; color: var(--f); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.fokusKarte.bald .fkAlarm { background: rgba(255,255,255,.22); color: #fff; }
.fokusKarte.alarm { box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 18px 44px color-mix(in srgb, var(--f) 55%, transparent); outline: 3px solid rgba(255,59,48,.6); outline-offset: 4px; }
.fkStand { font-size: 12px; opacity: .75; margin-top: 6px; }


/* ===== Videoanruf ===== */
.anrufKnopf.video svg { stroke: var(--blue); }
.videoWand { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; overflow: hidden; }
.videoWand video { object-fit: cover; background: #111; }
#fernVideo { position: absolute; inset: 0; width: 100%; height: 100%; }
#eigenVideo { position: absolute; right: calc(14px + env(safe-area-inset-right)); bottom: calc(96px + env(safe-area-inset-bottom)); width: 28vw; max-width: 160px; aspect-ratio: 3 / 4; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.5); transform: scaleX(-1); border: 1px solid rgba(255,255,255,.2); transition: opacity .2s; }
#eigenVideo.aus { opacity: .25; }
.vwKopf { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; font-size: 15px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vwKopf b { font-weight: 700; font-size: 17px; }
.vwKopf span { color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; flex: 1; }
.vwRund { width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; font-size: 18px; cursor: pointer; backdrop-filter: blur(10px); }
.vwLeiste { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 10px; padding: 0 12px; flex-wrap: wrap; }
.vwLeiste .alKnopf { padding: 12px 18px; font-size: 14px; background: rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vwLeiste .alKnopf[aria-pressed="true"] { background: #fff; color: #1C1C1E; }
.vwLeiste .alKnopf.rot { background: #FF3B30; }
/* verkleinert: schwebendes Bild unten rechts, Leiste oben übernimmt */
.videoWand.klein { inset: auto 14px calc(84px + env(safe-area-inset-bottom)) auto; width: 132px; height: 176px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.4); cursor: pointer; }
.videoWand.klein #eigenVideo, .videoWand.klein .vwLeiste, .videoWand.klein .vwKopf span { display: none; }
.videoWand.klein .vwKopf { top: 8px; left: 10px; right: 8px; font-size: 12px; }
.videoWand.klein .vwKopf b { font-size: 12px; }
.videoWand.klein .vwRund { width: 26px; height: 26px; font-size: 13px; }
.imVideo .anrufBanner { display: none; }


/* ===== Präsenz: wer gerade da ist ===== */
.dort.da { box-shadow: 0 0 0 2px #34C759, 0 6px 18px rgba(52,199,89,.25); }
.dort.da .dortText small { color: #248A3D; font-weight: 600; }
@media (prefers-color-scheme: dark) { .dort.da .dortText small { color: #30D158; } }
.daToast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border-radius: 22px; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 44px rgba(0,0,0,.2); animation: hochfahren .4s cubic-bezier(.2,.8,.2,1); max-width: calc(100% - 24px); }
.daToast .avatar { width: 34px; height: 34px; font-size: 15px; flex: none; }
.daToast .avatar::after { background: #34C759; }
.daToast span { font-size: 14px; } .daToast span b { font-weight: 700; }
.daToast .knopf { flex: none; width: auto; padding: 8px 16px; }
.daToast > span:not(.avatar) { white-space: nowrap; }
.daToast .zu { border: none; background: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 6px; }
@media (max-width: 640px) { .daToast { bottom: calc(86px + env(safe-area-inset-bottom)); } }

/* ===== Kleinanzeigen: einklappbar ===== */
.neuKopf { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; padding: 4px 0 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.neuKopf .neuBadge { margin: 0; }
.neuKopf i { font-style: normal; color: var(--muted); width: 14px; }
/* Ticket-Suchaufträge aus dem Konzertkalender */
.konzertMarke { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; background: rgba(10,132,255,.14); color: #0A84FF; vertical-align: 2px; margin-left: 4px; }


/* ===== Main Task: groß über allen Widgets ===== */
.mainTasks { display: grid; gap: 14px; margin: 0 0 22px; }
.mainTask { display: grid; grid-template-columns: 60px 1fr; gap: 4px 18px; padding: 22px 24px; border-radius: 28px; color: #fff; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.25), transparent 55%), linear-gradient(135deg, #5E5CE6, #2F2BD1 60%, #1E1A9E);
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 20px 50px rgba(47,43,209,.35); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s, max-height .45s; max-height: 2000px; }
.mainTask::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.035) 14px 15px); }
.mainTask.weg { transform: translateX(40px) scale(.96); opacity: 0; }
.mtHaken { width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255,255,255,.75); background: rgba(255,255,255,.08); cursor: pointer; display: grid; place-items: center; align-self: start; transition: background .2s, transform .15s; }
.mtHaken svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.mtHaken:hover { background: rgba(255,255,255,.2); } .mtHaken:hover svg { opacity: .6; }
.mtHaken:active { transform: scale(.92); }
.mainTask.weg .mtHaken { background: #34C759; border-color: #34C759; } .mainTask.weg .mtHaken svg { opacity: 1; }
.mtText { display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; }
.mtLabel { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.mtLabel i { font-style: normal; font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .8; margin-left: 6px; }
.mtTitel { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.mtKurz { font-size: 16px; opacity: .9; }
.mtMehr { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 600; align-self: flex-start; background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: 999px; }
.mtMehr svg { width: 12px; height: 8px; fill: none; stroke: #fff; stroke-width: 2; transition: transform .25s; }
.mainTask.auf .mtMehr svg { transform: rotate(180deg); }
.mtInhalt { grid-column: 1 / -1; margin-top: 14px; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.12); font-size: 16px; line-height: 1.5; }
.mtInhalt ol { margin: 0; padding-left: 1.6em; display: grid; gap: 8px; }
.mtInhalt li::marker { font-weight: 800; opacity: .8; }
.mtInhalt p { margin: 12px 0 0; opacity: .9; }
.mtFuss { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.mtFuss .leise { color: #fff; background: rgba(255,255,255,.16); border-radius: 12px; padding: 9px 14px; }
.mtFuss .knopf { background: #fff; color: #2F2BD1; width: auto; margin: 0; }
.mtRueck { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 14px; background: #1C1C1E; color: #fff; padding: 10px 10px 10px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: 14px; max-width: calc(100% - 32px); animation: hochfahren .35s cubic-bezier(.2,.8,.2,1); }
.mtRueck span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtRueck button { border: none; background: rgba(255,255,255,.16); color: #FFD60A; font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
@media (max-width: 640px) { .mainTask { grid-template-columns: 48px 1fr; padding: 18px; gap: 4px 14px; } .mtHaken { width: 46px; height: 46px; } .mtInhalt { padding: 14px 16px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .mainTask { transition: none; } }

/* Link-Knopf auf der großen Karte */
.mtLink { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 12px; background: #fff; color: #2F2BD1; font-weight: 800; font-size: 18px; padding: 12px 22px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.mtLink:hover { text-decoration: none; transform: translateY(-1px); }
.mtLink svg { width: 20px; height: 20px; fill: none; stroke: #34C759; stroke-width: 2.2; stroke-linejoin: round; }

/* ===== Dezente Aufgabe: schmales Banner ganz oben ===== */
.leiseTasks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 4px 0 14px; max-width: 100%; }
.leiseTask { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 16px; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; color: var(--muted); transition: opacity .4s, transform .4s; }
.leiseTask.weg { opacity: 0; transform: translateY(-6px); }
.ltHaken { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.ltHaken svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ltHaken:hover svg { opacity: .6; }
.leiseTask.weg .ltHaken { background: #34C759; border-color: #34C759; } .leiseTask.weg .ltHaken svg { opacity: 1; stroke: #fff; }
.ltText { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltText b { color: var(--ink); font-weight: 500; opacity: .85; }
.leiseTask.prio { border-color: color-mix(in srgb, #FF3B30 35%, var(--line)); }
.ltPrio { flex: 0 0 18px; width: 18px; height: 18px; margin-left: -4px; border-radius: 50%; background: #FF3B30; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.ltLink { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; }


/* ===== Küche ===== */
.wicon.kueche { background: linear-gradient(135deg, #F3C85B, #E2574C); }
.app.kueche .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #F7B733, #E2574C); }
.kochListe { display: grid; gap: 6px; }
.koch { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 6px; margin: 0 -6px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .2s; }
.koch:hover { background: var(--bg); text-decoration: none; }
.kochBild { width: 64px; height: 48px; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.kochBild svg { width: 100%; height: 100%; display: block; }
.kochText { display: flex; flex-direction: column; min-width: 0; }
.kochText b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kochText small { font-size: 12px; color: var(--muted); }
.kochLeer, .kochBald { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.kochBald { color: #FF9F0A; font-weight: 600; }
.wfuss { display: flex; gap: 14px; }


/* ===== Uhr ohne Sekunden: Doppelpunkt mittig, atmet sanft ===== */
.uhr { display: inline-flex; align-items: baseline; }
.uhr .doppel { display: inline-block; margin: 0 .04em; position: relative; top: -.08em; animation: atmen 4s ease-in-out infinite; }
@keyframes atmen { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .uhr .doppel { animation: none; } }

/* Avatare nie stauchen */
.avatar { flex: none; aspect-ratio: 1; line-height: 1; }

/* Marvin schläft: Mond statt Initiale, Pille dunkler */
.avatar.schlaeft { background: linear-gradient(135deg, #2C2C5A, #121230); }
.avatar.schlaeft svg { width: 72%; height: 72%; fill: #FFD60A; filter: drop-shadow(0 0 4px rgba(255,214,10,.5)); }
.avatar.schlaeft::after { display: none; }
.dort.nacht { background: color-mix(in srgb, #12122A 90%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 22px rgba(18,18,48,.35); }


/* ===== Erscheinungsbild ===== */
.themaWahl { display: inline-flex; background: var(--bg); border-radius: 10px; padding: 2px; }
.themaWahl button { border: none; background: transparent; font-size: 13px; padding: 6px 10px; border-radius: 8px; color: var(--muted); cursor: pointer; }
.themaWahl button.aktiv { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.fuss button.themaKnopf { color: var(--blue); }


/* ===== Widgets klein/groß ===== */
.ueberzaehlig { display: none !important; }
.listeGross { max-height: 400px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); padding-bottom: 16px; }
#suchen ul.treffer.listeGross { max-height: 340px; }
.mehrKnopf { display: block; width: 100%; margin: 6px 0 0; padding: 9px 12px; border: none; border-radius: 12px; background: var(--bg); color: var(--blue); font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; }
.mehrKnopf:hover { background: color-mix(in srgb, var(--blue) 10%, var(--bg)); }
.hud .mehrKnopf { background: rgba(0,240,255,.08); color: #00F0FF; font-family: inherit; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; border-radius: 4px; }

/* ===== Überschrift als Link zur Haupt-App ===== */
.wLink { color: inherit; display: inline-flex; align-items: center; gap: inherit; text-decoration: none; }
.wLink:hover { text-decoration: none; color: var(--blue); }
.wPfeil { width: 7px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .45; margin-left: 2px; transition: transform .2s, opacity .2s; }
.wLink:hover .wPfeil { opacity: 1; transform: translateX(2px); }
.hud .wLink:hover { color: #00F0FF; }


/* ===== Ebene über dem Dashboard (Radio läuft weiter) ===== */
.rahmen { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--bg); }
@keyframes rahmenRein { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.rahmenLeiste { display: flex; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--line); }
.rahmenZu { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: var(--blue); font-size: 16px; font-weight: 500; cursor: pointer; padding: 6px 8px; border-radius: 10px; }
.rahmenZu svg { width: 10px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rahmenTitel { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rahmenSpielt { display: inline-flex; align-items: center; gap: 8px; max-width: 44%; padding: 5px 6px 5px 12px; border-radius: 999px; background: #FF3B30; color: #fff; font-size: 13px; font-weight: 600; }
.rahmenSpielt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rahmenSpielt button { flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(255,255,255,.25); display: grid; place-items: center; cursor: pointer; padding: 0; }
.rahmenSpielt button svg { width: 12px; height: 12px; fill: #fff; }
.welle { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.welle b { width: 3px; background: #fff; border-radius: 2px; animation: welle 1s ease-in-out infinite; }
.welle b:nth-child(2) { animation-delay: .2s; } .welle b:nth-child(3) { animation-delay: .4s; }
@keyframes welle { 0%, 100% { height: 4px; } 50% { height: 12px; } }
.rahmen iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
/* Weicher Rand oben an der Ebene (Oberkante der Knöpfe), rechts frei für die Scrollleiste */
body.imRahmen.rahmenDunkel .leiste { --card: #1C1C1E; --ink: #F5F5F7; --muted: #98989D; --line: rgba(255,255,255,.1); --glanz: rgba(255,255,255,.14); color: var(--ink); }
body.imRahmen.rahmenHell .leiste { --card: #FFFFFF; --ink: #1D1D1F; --muted: #6E6E73; --line: rgba(0,0,0,.08); --glanz: rgba(255,255,255,.6); color: var(--ink); }
.rahmen::after { content: ""; position: absolute; left: 0; right: 14px; top: var(--rahmenOben, 0px); height: 14px; background: linear-gradient(var(--rahmenBg, var(--bg)), color-mix(in srgb, var(--rahmenBg, var(--bg)) 0%, transparent)); pointer-events: none; z-index: 1; }
/* Über einer App decken die Knöpfe voll, es scheint nichts durch */
body.imRahmen .leiste.klein .zeiten { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.imRahmen { overflow: hidden; }
/* Die Ebene reicht bis unten, unter der Tab-Leiste liegt ihre eigene Farbe statt des Dashboards (auch über der Home-Leiste der installierten App) */
@media (max-width: 760px) { .rahmen { padding-bottom: calc(var(--tbH, 64px) + env(safe-area-inset-bottom)); } body.imRahmen .tabbar { z-index: 47; } }
@media (max-width: 600px) { .rahmenTitel { display: none; } .rahmenSpielt { max-width: 62%; margin-left: auto; } }

/* ===== iPad hochkant: KHS-Karte und „Was läuft“ nebeneinander ===== */
@media (min-width: 700px) and (max-width: 1060px) {
  .seite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .seite > .fokusKarte { order: 0; }
  .seite > .fokusKarte[hidden] + #wLaeuft { grid-column: 1 / -1; }
  /* Arbeit steht jetzt, wo KHS war: „Was läuft“ rückt in die Lücke daneben, statt rechts alles leer zu lassen */
  .seite { grid-auto-flow: row dense; }
  .seite > #wLaeuft { max-height: 470px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .seite > .widget:not(#wLaeuft) { grid-column: 1 / -1; }
}


/* ===== Startplatz-Wächter ===== */
.wicon.startplatz { background: linear-gradient(135deg, #E4002B, #9B001D); }
.spGross { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--bg); margin-bottom: 10px; }
.spGross b { display: block; font-size: 17px; }
.spGross small { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.spGross > div { flex: 1; min-width: 0; }
.spLicht { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #8E8E93; box-shadow: 0 0 0 4px color-mix(in srgb, #8E8E93 20%, transparent); }
.spGross.ja { background: color-mix(in srgb, #34C759 14%, var(--card)); }
.spGross.ja .spLicht { background: #34C759; animation: spPuls 1.4s infinite; }
@keyframes spPuls { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.6); } 70% { box-shadow: 0 0 0 12px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } }
.startplatz.frei { box-shadow: 0 0 0 2px #34C759, var(--shadow); }
.spJetzt { flex: none; margin: 0; width: auto; background: #34C759; }
.spListe { list-style: none; margin: 0; padding: 0; }
.spListe li { display: grid; grid-template-columns: 10px auto 1fr auto; gap: 10px; align-items: center; padding: 7px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.spListe li:first-child { border-top: none; }
.spPunkt { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; }
.spListe li.ja .spPunkt { background: #34C759; }
.spInfo { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spPreis { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.spVerlauf { margin-top: 6px; font-size: 13px; color: var(--muted); }
.spVerlauf summary { cursor: pointer; }
.spVerlauf ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.spVerlauf time { display: inline-block; min-width: 92px; font-variant-numeric: tabular-nums; }
.startplatz .wfuss { align-items: center; flex-wrap: wrap; }
.spStand { font-size: 12px; color: var(--muted); margin-right: auto; }

/* ===== Nächste Wettkämpfe ===== */
.wettkaempfe li[data-wk] { cursor: pointer; }
.wettkaempfe li.frei .tDatum { background: #34C759; color: #fff; } .wettkaempfe li.frei .tDatum small { color: rgba(255,255,255,.85); }
.wettkaempfe li.booked .tDatum { background: #E4002B; }
.wkBadge { font-size: 11px; font-weight: 700; font-style: normal; border-radius: 6px; padding: 2px 7px; white-space: nowrap; background: var(--bg); color: var(--muted); }
.wkBadge.ja { background: #34C759; color: #fff; }
.wkBadge.wl { background: #FF9F0A; color: #1D1D1F; }
.wkBadge.nein { background: color-mix(in srgb, #E4002B 14%, var(--card)); color: #C4001F; }
.wkBadge.gemeldet { background: #E4002B; color: #fff; }
.wkUnklar { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; margin-left: 4px; vertical-align: 2px; }
.wkMehr { grid-column: 1 / -1; cursor: default; font-size: 13px; color: var(--muted); line-height: 1.4; }
.wkMehr p { margin: 2px 0 8px; }
.wkVerlauf { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 3px; }
.wkVerlauf li { display: block !important; padding: 0 !important; border: none !important; }
.wkVerlauf time { display: inline-block; min-width: 92px; font-variant-numeric: tabular-nums; }
.wkKnoepfe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wkKnoepfe .knopf { width: auto; margin: 0; text-decoration: none; padding: 8px 16px; font-size: 14px; border-radius: 12px; }
#wWettkampf .wfuss { align-items: center; }
/* Live-Ticker: Rennen suchen und an/aus (03.11.2026) */
.wkSuche { margin: 2px 0 8px; }
.wkSuche input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.wkTreffer { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.wkTreffer li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.wkTreffer li.leer { display: block; color: var(--muted); }
.wkTName { min-width: 0; } .wkTName b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wkTName small { color: var(--muted); }
.wkArt { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 6px; background: var(--bg); color: var(--muted); }
.wkTreffer button, .wkKat button { font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.wkTreffer button.an, .wkKat button.an { background: #34C759; border-color: #34C759; color: #fff; }
.wkKat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.wkKat small { flex-basis: 100%; }
.wkZm { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 3px; }
.wkZm li { display: block !important; padding: 0 !important; border: none !important; }
.wkZm a { color: var(--ink); }
.wettkaempfe li.tickerAus { opacity: .55; }
.wkBadge.aus { background: var(--bg); color: var(--muted); border: 1px dashed var(--line); }
.sAktion button.live { width: auto; border-radius: 999px; padding: 0 9px; font-size: 11px; font-weight: 700; color: var(--muted); }
.sAktion button.live.an { background: #34C759; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wkBadge.nein { color: #FF6B7F; } }
:root[data-theme="dark"] .wkBadge.nein { color: #FF6B7F; }

/* ===== Training auf der Startseite ===== */
.wicon.training { background: linear-gradient(135deg, #FF9F0A, #FF375F); }
.app.training .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FF9F0A, #FF375F); }
.app.anzeigen .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #34C759, #0E9F6E); }
.trHeute { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--f) 10%, var(--card)); margin-bottom: 10px; }
.trHeute i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--f) 22%, transparent); font-style: normal; }
.trHeute.fertig i { width: 24px; height: 24px; color: #fff; display: grid; place-items: center; font-size: 13px; box-shadow: none; }
.trHeute > div { flex: 1; min-width: 0; }
.trHeute b { display: block; font-size: 16px; }
.trHeute span { display: block; font-size: 13px; color: var(--muted); }
.trHeute .knopf.klein { width: auto; margin: 0; padding: 8px 14px; font-size: 14px; border-radius: 12px; background: var(--f); }
.trWoche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.trWoche span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.trWoche i { display: block; width: 100%; height: 22px; border-radius: 7px; opacity: .4; }
.trWoche span.ok i { opacity: 1; }
.trWoche span.heute i { opacity: .9; box-shadow: 0 0 0 2px var(--ink); }
.trWoche span:not(.vorbei):not(.heute) i { opacity: .3; }
.trWoche small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.trWoche span.heute small { color: var(--ink); font-weight: 700; }
.trZahlen { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }
.trZahlen b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ===== Umschalter alte/neue Ansicht ===== */
.ansichtWechsel { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.ansichtWechsel i { width: 26px; height: 16px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; }
.ansichtWechsel i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .2s; }
.ansichtWechsel.an i { background: var(--blue); }
.ansichtWechsel.an i::after { left: 12px; }
.ansichtWechsel.an { color: var(--ink); }

/* ===== Neue Ansicht: vier Bereiche ===== */
body.neu .raster { grid-template-columns: minmax(0, 1fr); }
body.neu .seite { display: none; }
body.neu .app.einstellungen, body.neu .app.fun { display: none; }
body.neu .widgets.spalte.neuRaster { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "anzeigen anzeigen" "heute demnaechst" "projekte zusammen"; gap: 28px 20px; align-items: start; }
body.neu .widgets.spalte.neuRaster.eins { grid-template-columns: 1fr; grid-template-areas: "anzeigen" "heute" "projekte" "demnaechst" "zusammen"; }
.bereichNeu { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#bHeute { grid-area: heute; } #bProjekte { grid-area: projekte; } #bDemnaechst { grid-area: demnaechst; } #bZusammen { grid-area: zusammen; } #bAnzeigen { grid-area: anzeigen; }
.bKopf { display: flex; align-items: baseline; gap: 10px; padding: 0 6px; }
.bKopf h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.bKopf span { font-size: 13px; color: var(--muted); }
.bKopf .leise { margin-left: auto; }
.neuVersteckt { display: none !important; }
body.neu #bAnzeigen { display: none; }
body.neu.anzeigenAuf #bAnzeigen { display: flex; }
body.neu #bAnzeigen .widget { width: 100%; }
body.neu .bereichNeu > .widget, body.neu .bereichNeu > .fokusKarte { width: 100%; }
body.neu .bereichNeu > [hidden] { display: none; }
body.neu .fokusKarte { padding: 14px 18px 12px; }
body.neu .fokusKarte .fkZahl b { font-size: 32px; }
body.neu .fokusKarte .fkSchritt { display: none; }
/* Main Jobs ohne Neon, im Look der anderen Widgets */
body.neu .widget.hud { background: var(--card); color: var(--ink); font-family: inherit; font-weight: 400; letter-spacing: 0; box-shadow: var(--shadow); }
body.neu .widget.hud::after, body.neu .hudEcke { display: none; }
body.neu .hudKopf h2 { color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: 0; text-shadow: none; font-family: inherit; }
body.neu .hudKopf h2::after { content: none; }
body.neu #hudMeta, body.neu .hudFuss, body.neu #hudStand { color: var(--muted); text-shadow: none; font-family: inherit; }
body.neu .hudFuss a { color: var(--blue); }
body.neu .hudBalken { background: var(--line); } body.neu .hudBalken i { background: var(--blue); box-shadow: none; }
body.neu .hudListe li, body.neu .hudListe b, body.neu .hudListe span { color: var(--ink); text-shadow: none; }
body.neu .hudListe small { color: var(--muted); }
/* Radio nur, wenn es läuft */
body.neu #wRadio:not(.laeuftRadio) { display: none; }
/* Dran */
.wicon.faellig { background: linear-gradient(135deg, #FF3B30, #FF9F0A); }
.wicon.demnaechst { background: linear-gradient(135deg, #5E5CE6, #0A84FF); }
.faelligListe { list-style: none; margin: 0; padding: 0; }
.faelligListe li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.faelligListe li:first-child { border-top: none; }
.faelligListe a { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: center; padding: 9px 2px; color: inherit; text-decoration: none; }
.faelligListe a:hover { text-decoration: none; }
.faelligListe i { width: 12px; height: 12px; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--f) 20%, transparent); }
.faelligListe b { display: block; font-size: 15px; font-weight: 600; }
.faelligListe small { display: block; font-size: 13px; color: var(--muted); }
.faelligListe .rErledigt { margin-right: 2px; }
.termine li.frist .tDatum small { color: rgba(255,255,255,.8); }
.termine li > a { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; color: inherit; text-decoration: none; grid-column: 1 / -1; }
.termine li > a:hover { text-decoration: none; }
.termine li.rennen.gemeldet .tDatum { background: #E4002B; color: #fff; } .termine li.rennen.gemeldet .tDatum small { color: rgba(255,255,255,.8); }
.termine li.rennen.ja .tDatum { background: #34C759; color: #fff; } .termine li.rennen.ja .tDatum small { color: rgba(255,255,255,.85); }
.wkBadge.frist { background: var(--ink); color: var(--card); }
.wkBadge.booked { background: #5E5CE6; color: #fff; }
.wkBadge.want { background: #FFC93C; color: #1D1D1F; }
/* Seit gestern */
.seitGestern { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.sgTitel { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.seitGestern a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.seitGestern a i { width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
body:not(.neu) .seitGestern, body:not(.neu) .nurNeu { display: none; }
@media (max-width: 760px) { body.neu .bKopf { display: none; } body.neu .widgets.spalte.neuRaster { gap: 14px; } body.neu #dockAnzeigen { display: none; } }
body.neu .hudListe li { background: var(--bg); border-left-width: 3px; border-radius: 10px; }
body.neu .hudKopf h2 { text-transform: none; }
body.neu .hudFuss { font-family: inherit; font-size: 13px; letter-spacing: 0; }

/* ===== Einstellungen: Reiter, Geräte, Passkey ===== */
.eReiter { display: flex; background: var(--line); border-radius: 12px; padding: 3px; gap: 2px; margin: 6px 0 4px; }
.eReiter button { flex: 1; border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 10px; border-radius: 10px; color: var(--muted); cursor: pointer; }
.eReiter button.aktiv { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.pille.klein { font-size: 11px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.zeile .r .leise { background: none; border: none; color: var(--blue); font-size: 14px; cursor: pointer; padding: 4px 6px; }
.zeile .r .leise.rot { color: var(--red); }
.knopf.passkey { margin-top: 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 10px; }
.knopf.passkey svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Main Task mit Notizen je Punkt (z. B. Fragen für eine zweite Meinung) */
.mainTask.mitNotizen .mtInhalt ol { gap: 18px; }
.mtFrage { display: block; font-weight: 700; }
.mtHinweis { display: block; font-size: 14px; opacity: .8; margin-top: 2px; }
.mtNotiz { display: block; width: 100%; margin-top: 8px; font: inherit; font-size: 15px; line-height: 1.45; color: #fff; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 10px 12px; resize: vertical; min-height: 52px; }
.mtNotiz::placeholder { color: rgba(255,255,255,.55); }
.mtNotiz:focus { outline: none; border-color: rgba(255,255,255,.7); background: rgba(0,0,0,.24); }
.mtStand { margin-right: auto; align-self: center; font-size: 13px; opacity: .8; }
.mainTask[style*="--mt"] { background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(135deg, var(--mt), color-mix(in srgb, var(--mt) 60%, #000)); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 20px 50px color-mix(in srgb, var(--mt) 35%, transparent); }
.mainTask.mitNotizen { max-height: none; }
.mainTask[style*="--mt"] .mtFuss .knopf { color: var(--mt); }
.app.uebersichten .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #5B6B86, #2F3A4F); }
.app.coaching .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FFB340, #E5670F); }
.app.apotheke .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #2E8C7E, #155E57); }

/* ===== Kalender ===== */
.wicon.kalender { background: linear-gradient(135deg, #FF453A, #FF9F0A); }
.wicon.trello { background: linear-gradient(135deg, #0079BF, #5067C5); }
.kalWoche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.kalWoche span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; }
.kalWoche span.heute { background: #FF453A; color: #fff; }
.kalWoche small { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.kalWoche .heute small { color: rgba(255,255,255,.85); }
.kalWoche b { font-size: 17px; font-variant-numeric: tabular-nums; }
.kalWoche i { display: flex; gap: 2px; height: 6px; }
.kalWoche em { width: 5px; height: 5px; border-radius: 50%; }
.kalWoche .heute em { box-shadow: 0 0 0 1px #fff; }
.kalListe, .trListe { list-style: none; margin: 0; padding: 0; }
.kalListe li { display: grid; grid-template-columns: 4px 64px 1fr; gap: 10px; align-items: center; padding: 7px 0; }
.kalListe li > i { align-self: stretch; border-radius: 2px; background: var(--f); }
.kalListe li.kalTag { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 0 2px; }
.kalListe li.kalTag:first-child { padding-top: 0; }
.kalListe li.leer, .trListe li.leer { display: block; color: var(--muted); font-size: 14px; }
.kalZeit { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kalText b { display: block; font-size: 15px; font-weight: 600; }
.kalText small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== Trello ===== */
.trNeu { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-bottom: 8px; }
.trNeu input { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 0; }
.trNeu .knopf { margin: 0; width: auto; padding: 8px 12px; }
.trListe li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); transition: opacity .3s, transform .3s; }
.trListe li:first-child { border-top: none; }
.trListe li.weg { opacity: 0; transform: translateX(10px); }
.trHaken { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.trHaken svg { width: 13px; height: 13px; fill: none; stroke: #34C759; stroke-width: 3; opacity: 0; }
.trHaken:hover svg { opacity: .7; }
.trText { color: inherit; text-decoration: none; min-width: 0; }
.trText:hover { text-decoration: none; }
.trText b { display: block; font-size: 15px; font-weight: 600; }
.trText small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trText small em { width: 14px; height: 6px; border-radius: 3px; flex: none; }
.trDue { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.trDue.bald { color: #FF9F0A; } .trDue.ueber { color: #FF3B30; }
@media (max-width: 520px) { .trNeu { grid-template-columns: 1fr auto; } .trNeu input[type=date] { grid-column: 1; } }
.schritte { margin: 0 0 12px; padding-left: 1.3em; font-size: 14px; color: var(--muted); display: grid; gap: 6px; }
.schritte b { color: var(--ink); }
.schritte li { display: list-item !important; text-align: left; padding: 0 !important; border: none !important; }
.formular[hidden] { display: none !important; }
.app.usa .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #3A5BA0, #13284B); }
.app.usa .zahl { background: #B22234; }



/* ===== Feste Leiste oben: Tropfen links, Radio-Pille und Uhren rechts ===== */
.dock.quelle { display: none !important; }
.start .wrap { padding-top: calc(86px + env(safe-area-inset-top)); }
.kopfzeile { margin-bottom: 18px; }
.leiste { position: fixed; z-index: 48; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left)); pointer-events: none; }
.leiste > * { pointer-events: auto; }
.leisteRechts { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zeiten { align-items: flex-end !important; flex-direction: column !important; gap: 2px !important; flex: none; }
.leiste .uhr { font-size: 30px; line-height: 1; }
.leiste .dort { gap: 5px; padding: 2px 8px 2px 2px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.08); }
.leiste .dort .avatar.klein { width: 20px; height: 20px; font-size: 10px; }
.leiste .dortText b { font-size: 12px; }
.dortHimmel { display: inline-grid; place-items: center; width: 16px; height: 16px; }
.dortHimmel svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dortHimmel.sonne { color: #FF9F0A; } .dortHimmel.sonne svg circle { fill: #FFCC00; stroke: #FF9F0A; }
.dortHimmel.nachts svg path { fill: #8E8CF8; stroke: none; }
.dort.nacht .dortHimmel.nachts svg path { fill: #FFD60A; }

/* Tropfen: dunkles Rauchglas, wabert leicht; in der Mitte Raster (Apps) oder Haus (zurück) */
.tropfen { position: relative; flex: none; width: 56px; height: 56px; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tropfen .kern { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, rgba(58,60,72,.72), rgba(24,25,32,.68) 55%, rgba(48,50,62,.7));
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  animation: tropfenForm 12s ease-in-out infinite; }
.tropfen .kern::before { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); animation: schimmer 8s ease-in-out infinite; }
.tropfen .kern::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.28), rgba(255,255,255,0) 40%); }
.tropfen svg { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; fill: #fff; opacity: .95; transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1); }
.tropfen .tHaus { opacity: 0; transform: scale(.6); }
.tropfen.heim .tHaus { opacity: .95; transform: none; }
.tropfen.heim .tRaster { opacity: 0; transform: scale(.6); }
.tropfen .kern { transition: scale .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s; }
.tropfen:hover .kern { scale: 1.08; animation-duration: 7s; }
.tropfen:active .kern { scale: .94; }
@keyframes schimmer { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
@keyframes tropfenForm { 0%, 100% { border-radius: 50%; } 25% { border-radius: 53% 47% 51% 49% / 48% 53% 47% 52%; } 50% { border-radius: 48% 52% 47% 53% / 52% 48% 53% 47%; } 75% { border-radius: 51% 49% 54% 46% / 48% 51% 49% 52%; } }
/* Hinter dem Tropfen gucken Apps raus, leicht schwebend */
.tropfen .blick { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; gap: 0; flex: none; z-index: -1; pointer-events: none; opacity: 0;
  transform: rotate(var(--w)) translate(10px) rotate(calc(-1 * var(--w))) scale(.3);
  transition: transform .38s cubic-bezier(.3,1.35,.5,1) calc(var(--i) * 30ms), opacity .25s ease calc(var(--i) * 30ms); }
.tropfen .blick .ikone { width: 28px; height: 28px; border-radius: 9px; box-shadow: 0 4px 10px rgba(0,0,0,.25); animation: blickSchweben 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
.tropfen .blick .ikone svg { width: 15px; height: 15px; }
.tropfen .blick .zahl, .tropfen .blick .live { display: none; }
.tropfen:hover .blick { opacity: 1; transform: rotate(var(--w)) translate(52px) rotate(calc(-1 * var(--w))) scale(1); }
@keyframes blickSchweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* Rad: Apps im Kreis oben links */
.rad { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.rad[hidden] { display: none; }
.radScheibe { position: absolute; border-radius: 50%; touch-action: none; pointer-events: auto; background: color-mix(in srgb, var(--card) 34%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 18px 50px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.3); }
.radScheibe::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--line) 60%, transparent); pointer-events: none; }
.rad .app { position: absolute; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2); padding: 0; gap: 0; flex: none; transition: transform .2s cubic-bezier(.25,1.4,.45,1); z-index: 1; }
.rad .app .ikone { width: var(--g); height: var(--g); border-radius: calc(var(--g) * .3); }
.rad .app .ikone svg { width: 55%; height: 55%; }
.rad .app .zahl { top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; }
.rad .app.an, .rad .app:hover { transform: scale(1.3); z-index: 2; }
.rad .app.an .ikone { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--blue), 0 16px 34px rgba(0,0,0,.35); }
.rad .app.offen .ikone { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--muted); }
.radMitte { position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: linear-gradient(135deg, rgba(58,60,72,.85), rgba(24,25,32,.85)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 16px rgba(0,0,0,.25); display: grid; place-items: center; text-align: center; cursor: pointer; padding: 8px; }
.radMitte b { display: block; font-size: 12px; letter-spacing: -.01em; }
.radMitte small { display: block; font-size: 9px; opacity: .7; margin-top: 1px; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .tropfen .kern, .tropfen .kern::before, .tropfen .blick .ikone { animation: none; } }

/* Radio-Pille: dunkelrotes Glas, an leuchtet warm. Davor der Skip-Knopf beim Drüberfahren, darunter die Senderliste */
.rpBereich { position: relative; display: flex; align-items: center; min-width: 0; }
.radioPille { position: relative; height: 48px; max-width: min(44vw, 300px); display: flex; align-items: center; gap: 9px; padding: 0 14px 0 6px; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; color: #fff; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: linear-gradient(135deg, rgba(58,60,72,.78), rgba(24,25,32,.74) 55%, rgba(48,50,62,.76));
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 8px 22px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -8px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16);
  transition: scale .3s cubic-bezier(.2,.9,.3,1), box-shadow .4s, background .5s; }
.radioPille::before { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); animation: schimmer 8s ease-in-out infinite; animation-delay: -3s; pointer-events: none; }
.radioPille:hover { scale: 1.03; }
.radioPille:active { scale: .97; }
.radioPille:not(.an) { padding-right: 6px; }
.radioPille:not(.an) .rpText { display: none; }
.rpLicht { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 24% 50%, rgba(255,120,60,.95), rgba(255,60,40,.55) 40%, rgba(120,20,30,0) 75%); opacity: 0; transition: opacity .6s; pointer-events: none; }
.radioPille.an .rpLicht { opacity: 1; animation: rpGlimmen 3.2s ease-in-out infinite; }
@keyframes rpGlimmen { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.radioPille.an { background: linear-gradient(135deg, rgba(140,24,34,.74), rgba(70,8,16,.7) 55%, rgba(120,20,30,.66)); box-shadow: 0 8px 26px rgba(255,80,40,.35), inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -8px 16px rgba(0,0,0,.15); }
.rpSymbol { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FF6A3D, #FF2D55); box-shadow: 0 4px 12px rgba(255,60,60,.35), inset 0 0 0 1px rgba(255,255,255,.3); transition: background .4s, box-shadow .4s; }
.radioPille.an .rpSymbol { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.rpPlay { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.radioPille .welle { display: none; }
.radioPille.an .rpPlay { display: none; }
.radioPille.an .welle { display: inline-flex; }
.rpText { position: relative; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; max-width: 240px; transition: max-width .32s cubic-bezier(.2,.8,.2,1), opacity .2s, margin .32s; }
.leiste.klein .rpText { max-width: 0; opacity: 0; margin-left: -9px; }
.leiste.klein .radioPille.an { padding-right: 6px; }
.rpText b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.rpText small { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpWeiter { position: absolute; right: calc(100% + 8px); top: 50%; height: 40px; min-width: 40px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, rgba(58,60,72,.78), rgba(24,25,32,.75)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.2);
  opacity: 0; translate: 14px -50%; pointer-events: none; transition: opacity .25s, translate .3s cubic-bezier(.2,.9,.3,1); }
.rpWeiter svg { width: 18px; height: 18px; fill: #fff; }
.rpWeiter small { font-size: 11px; font-weight: 600; }
.rpWeiter.besetzt { opacity: .6 !important; }
.rpBereich.laeuft:hover .rpWeiter, .rpBereich.laeuft .rpWeiter:focus-visible { opacity: 1; translate: 0 -50%; pointer-events: auto; }
@media (hover: none) { .rpBereich .rpWeiter { display: none; } }
.rpMenue { position: fixed; z-index: 61; top: calc(68px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); width: min(340px, calc(100vw - 28px)); border-radius: 22px; overflow: hidden; color: var(--ink);
  background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 18px 50px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.25); transform-origin: top right; }
.rpMenue[hidden] { display: none; }
.rpListe { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.rpListe li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; cursor: pointer; transition: background .15s; }
.rpListe li:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.rpListe li.an { background: linear-gradient(135deg, rgba(255,106,61,.18), rgba(255,45,85,.14)); }
.rpListe li.aus { opacity: .45; }
.rpListe .rpPunkt { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FF6A3D, #FF2D55); color: #fff; box-shadow: 0 3px 8px rgba(255,60,60,.3); }
.rpListe li.an .rpPunkt { background: #1C1C1E; }
.rpListe .rpPunkt svg { width: 14px; height: 14px; fill: #fff; }
.rpListe .rpInfo { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.rpListe .rpInfo b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpListe .rpInfo span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpListe .lauf { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.rpListe .lauf i { display: block; height: 100%; background: linear-gradient(90deg, #FF6A3D, #FF2D55); border-radius: 2px; }
.rpListe .rpHoerer { flex: none; font-size: 11px; color: var(--muted); }
.rpFuss { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px; border-top: 1px solid var(--line); }
.rpKnopf { border: 0; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.rpKnopf[hidden] { display: none; }
.rpLink { margin-left: auto; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .radioPille { max-width: 42vw; } .rpText small { display: none; } }
@media (prefers-reduced-motion: reduce) { .tropfen .kern::before, .radioPille::before, .rpLicht { animation: none; } }

/* In der Mac-App: Platz für die Ampel links oben, kein Push-Banner (Mitteilungen kommen nativ) */
body.nativ .leiste { padding-top: 8px; }
body.nativ .pushBanner { display: none !important; }
body.nativ .start .wrap, .nativ.start .wrap { padding-top: 126px; }
body.nativ .fuss #abmelden { display: inline; }

/* ===== Das Feuer unten rechts ===== */
.feuer { position: fixed; z-index: 49; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) { .feuer { bottom: calc(var(--tbH, 64px) + env(safe-area-inset-bottom) + 12px); right: calc(12px + env(safe-area-inset-right)); } }
.feuerKnopf { position: relative; width: 50px; height: 50px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: radial-gradient(circle at 50% 70%, rgba(255,140,40,.28), rgba(255,140,40,0) 60%), linear-gradient(135deg, rgba(58,40,36,.78), rgba(24,18,18,.74));
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 22px rgba(255,120,40,.25), inset 0 0 0 1px rgba(255,255,255,.18); transition: scale .3s cubic-bezier(.2,.9,.3,1), box-shadow .4s; }
.feuerKnopf:hover, .feuer.offen .feuerKnopf { scale: 1.08; box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 0 34px rgba(255,120,40,.45), inset 0 0 0 1px rgba(255,255,255,.25); }
.feuerKnopf svg { width: 26px; height: 32px; overflow: visible; filter: drop-shadow(0 0 6px rgba(255,150,40,.7)); }
.flAussen { transform-origin: 50% 95%; animation: flackernA 1.6s ease-in-out infinite alternate; }
.flInnen { transform-origin: 50% 95%; animation: flackernB 1.1s ease-in-out infinite alternate; }
@keyframes flackernA { 0% { transform: scale(1, 1) skewX(0); } 35% { transform: scale(.96, 1.05) skewX(-2deg); } 70% { transform: scale(1.03, .97) skewX(2deg); } 100% { transform: scale(.98, 1.03) skewX(-1deg); } }
@keyframes flackernB { 0% { transform: scale(1, .95); opacity: .95; } 50% { transform: scale(.92, 1.08); opacity: 1; } 100% { transform: scale(1.04, .98); opacity: .9; } }
.feuerBlase { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(320px, calc(100vw - 32px)); padding: 16px 18px 12px; border-radius: 22px; transform-origin: bottom right; color: #fff;
  background: linear-gradient(160deg, rgba(60,30,22,.9), rgba(22,14,14,.92)); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 40px rgba(255,120,40,.18), inset 0 0 0 1px rgba(255,255,255,.14); }
.feuerBlase[hidden] { display: none; }
.feuerBlase::after { content: ""; position: absolute; right: 19px; bottom: -6px; width: 12px; height: 12px; transform: rotate(45deg); background: rgba(22,14,14,.92); box-shadow: 1px 1px 0 rgba(255,255,255,.1); }
.fbKopf { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFB25C; }
.fbListe { margin: 0; padding: 0; list-style: none; counter-reset: grund; display: flex; flex-direction: column; gap: 12px; }
.fbListe li { counter-increment: grund; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; }
.fbListe li::before { content: counter(grund); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #2b1206; background: linear-gradient(135deg, #FFD36E, #FF8A2A); box-shadow: 0 0 12px rgba(255,140,40,.45); }
.fbListe li:first-child b { font-size: 18px; }
.fbListe b { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.fbListe span { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.7); margin-top: 2px; }
.fbAendern { display: block; margin: 12px 0 0 auto; border: 0; background: none; color: rgba(255,255,255,.55); font-size: 12px; cursor: pointer; padding: 2px 0; }
.fbAendern:hover { color: #fff; }
.fbForm { display: flex; flex-direction: column; gap: 10px; }
.fbForm label { display: grid; grid-template-columns: 18px 1fr; gap: 4px 6px; align-items: center; }
.fbForm label span { grid-row: span 2; font-weight: 800; color: #FFB25C; }
.fbForm input { width: 100%; border: 0; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 14px; color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.fbForm input[name^="x"] { font-size: 12px; }
.fbForm .knopf { align-self: flex-end; }
@media (prefers-reduced-motion: reduce) { .flAussen, .flInnen { animation: none; } }

/* ===== Loose Threads ===== */
.wicon.faeden { background: linear-gradient(135deg, #BF5AF2, #5E5CE6); }
.fadenNeu { display: flex; gap: 8px; margin-bottom: 10px; }
.fadenNeu input { flex: 1; min-width: 0; border: 0; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* Chancen-Radar auf der Startseite: die nächsten drei Fristen mit Countdown */
.chancenListe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chancenListe a { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 12px; color: inherit; text-decoration: none; min-width: 0; }
.chancenListe a:hover { background: var(--bg); }
.chancenListe li.leer { color: var(--muted); font-size: 13px; padding: 6px 4px; }
.chTage { flex: 0 0 auto; min-width: 54px; text-align: center; font-size: 13px; font-weight: 750; padding: 5px 8px; border-radius: 10px; background: var(--bg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chTage.rot { color: #FF3B30; background: color-mix(in srgb, #FF3B30 12%, var(--card)); }
.chTage.gelb { color: #8A6100; background: color-mix(in srgb, #FFB800 18%, var(--card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chTage.gelb { color: #FFD25C; } }
:root[data-theme="dark"] .chTage.gelb { color: #FFD25C; }
.chText { min-width: 0; display: flex; flex-direction: column; }
.chText strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chText small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fadenListe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fadenListe li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 12px; transition: opacity .25s, transform .25s; }
.fadenListe li.weg { opacity: 0; transform: translateX(16px); }
.fadenListe li.leer { color: var(--muted); font-size: 13px; }
.fadenPunkt { flex: none; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #BF5AF2, transparent); }
.fadenText { flex: 1; min-width: 0; font-size: 15px; display: flex; flex-direction: column; }
.fadenText small { font-size: 11px; color: var(--muted); }
.fadenWeg { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); opacity: .5; transition: opacity .2s, background .2s, color .2s; }
.fadenListe li:hover .fadenWeg { opacity: 1; }
.fadenWeg:hover { background: #34C759; color: #fff; }
@media (hover: none) { .fadenWeg { opacity: 1; } }
.fadenNeu .knopf { flex: none; width: auto; }
.fadenNeu input { flex: 1 1 auto; width: auto; }
.fadenText a { color: inherit; text-decoration: none; } .fadenText a:hover { text-decoration: underline; }
.fadenListe li.da .fadenText small { color: #34C759; font-weight: 700; }

/* ===== Die Leiste oben: ganz oben eine schwebende Glasinsel, beim Scrollen fällt alles in die Ecken ===== */
.leiste::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: calc(10px + env(safe-area-inset-top)); bottom: 0; left: max(16px, calc(50% - 620px)); right: max(16px, calc(50% - 620px)); border-radius: 34px;
  background: color-mix(in srgb, var(--card) 66%, transparent); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 80%, transparent), inset 0 1px 0 var(--glanz), 0 16px 48px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04);
  opacity: 0; transform: translateY(-12px) scale(.97); transform-origin: 50% 0; transition: opacity .28s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
.leiste.voll::before { opacity: 1; transform: none; }
.leiste { padding-bottom: 10px; }
.leisteApps { display: none; }
.leisteRechts { flex: none; }
.radioPille { flex-shrink: 0; }

/* Eingeklappt: drei Glaskörper in den Ecken, die Uhren zusammen in einer Kapsel */
.leiste.klein .zeiten { flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 5px 6px 5px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 72%, transparent); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 80%, transparent), inset 0 1px 0 var(--glanz), 0 8px 24px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.05); }
.leiste.klein .zeiten:has(#dort[hidden]) { padding-right: 14px; }
.leiste.klein .uhr { font-size: 31px; letter-spacing: -.02em; }   /* Leon, 06.10.: eingeklappt etwas größer */
.leiste.klein .dort { background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 3px 10px 3px 3px; gap: 6px; }
.leiste.klein .dort:hover { transform: none; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.leiste.klein .dort .avatar.klein { width: 22px; height: 22px; font-size: 10px; }
.leiste.klein .dortText b { font-size: 13px; }
.leiste.klein .dortHimmel, .leiste.klein .dortHimmel svg { width: 14px; height: 14px; }
.leiste.klein .dort.nacht { background: color-mix(in srgb, #1C1C3A 85%, transparent); }
.leiste.klein .dort.da { box-shadow: inset 0 0 0 1.5px #34C759; }
@media (max-width: 600px) {
  .leiste { gap: 8px; } .leisteRechts { gap: 8px; }
  .leiste.klein .zeiten { padding: 4px 5px 4px 12px; gap: 8px !important; }
  .leiste.klein .uhr { font-size: 26px; }
  .leiste.klein .dort { padding: 2px 8px 2px 2px; gap: 5px; }
  .leiste.klein .dort .avatar.klein { width: 20px; height: 20px; font-size: 9px; }
  .leiste.klein .dortText b { font-size: 12px; }
}

/* ===== Ganz oben: Tropfen links, in der Mitte die beiden Uhren wie eine Weltuhr, rechts das Radio ===== */
.uhrTag { display: none; }
.leiste.voll { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: calc(22px + env(safe-area-inset-top)) max(32px, calc(50% - 604px)) 12px; }
.leiste.voll .leisteRechts { display: contents; }
.leiste.voll .tropfen { width: 68px; height: 68px; order: 0; justify-self: start; }
/* Breit genug: links und rechts gleich breit, dann sitzt die Uhr wirklich in der Mitte */
@media (min-width: 1100px) { .leiste.voll { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.leiste.voll .tropfen svg { width: 26px; height: 26px; }
.leiste.voll .zeiten { order: 1; min-width: 0; display: grid !important; grid-template-columns: auto auto; grid-template-areas: "uhr dort" "tag dort"; justify-content: center; align-items: center; column-gap: 0 !important; row-gap: 0 !important; }
.leiste.voll .uhr { grid-area: uhr; font-size: 56px; line-height: .95; justify-self: end; padding-right: 26px; }
.leiste.voll .uhrTag { grid-area: tag; display: block; justify-self: end; padding-right: 26px; margin-top: 3px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.leiste.voll .dort { grid-area: dort; position: relative; align-self: center; gap: 12px; padding: 8px 16px 8px 26px; border-radius: 20px;
  background: none; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink); transition: background .2s; }
.leiste.voll .dort::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--line); }
.leiste.voll .dort:hover { transform: none; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.leiste.voll .dort .avatar.klein { width: 44px; height: 44px; font-size: 18px; }
.leiste.voll .dortHimmel { width: 26px; height: 26px; }
.leiste.voll .dortHimmel svg { width: 24px; height: 24px; }
.leiste.voll .dortText b { font-size: 24px; display: flex; gap: 8px; align-items: baseline; letter-spacing: -.02em; }
.leiste.voll #dortName[hidden] { display: inline !important; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.leiste.voll #dortInfo[hidden] { display: block !important; font-size: 13px; color: var(--muted); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.leiste.voll .dort.nacht { background: none; color: var(--ink); }
.leiste.voll .dort.nacht .dortText small, .leiste.voll .dort.nacht #dortName, .leiste.voll .dort.nacht #dortInfo { color: var(--muted); }
.leiste.voll .dort.nacht .dortHimmel.nachts svg path { fill: #7A78F0; }
.leiste.voll .dort.da .dortText small { color: #248A3D; }
.leiste.voll .rpBereich { order: 2; gap: 10px; justify-self: end; min-width: 0; max-width: 100%; }
/* Lange Titel: die Pille darf schrumpfen, der Text bekommt Punkte, Symbol und Skip bleiben */
.leiste.voll .radioPille { height: 64px; max-width: 360px; min-width: 0; flex: 0 1 auto; padding: 0 22px 0 7px; gap: 12px; }
.leiste.voll .radioPille.an { min-width: 64px; }
.leiste.voll .rpWeiter { flex: none; }
.leiste.voll .rpSymbol { width: 50px; height: 50px; }
.leiste.voll .rpPlay { width: 24px; height: 24px; }
.leiste.voll .radioPille .rpText { display: flex !important; }
.leiste.voll .rpText b { font-size: 16px; }
.leiste.voll .rpText small { display: block !important; font-size: 13px; }
.leiste.voll .rpWeiter { position: relative; right: auto; top: auto; height: 50px; min-width: 50px; translate: none; }
.leiste.voll .rpWeiter svg { width: 22px; height: 22px; }
.leiste.voll .rpMenue { top: calc(118px + env(safe-area-inset-top)); right: max(16px, calc(50% - 620px)); }
.leiste.voll .dort, .leiste.voll .radioPille, .leiste.voll .tropfen, .leiste.voll .uhr { will-change: transform; }
.start .wrap { padding-top: calc(128px + env(safe-area-inset-top)); }
/* Mittelbreit (Tablet, schmales Fenster): etwas kompakter, Marvins Zweitzeile fällt weg */
@media (min-width: 900px) and (max-width: 1099px) {
  .leiste.voll { gap: 14px; padding-left: 22px; padding-right: 22px; }
  .leiste.voll .tropfen { width: 60px; height: 60px; }
  .leiste.voll .uhr { font-size: 46px; padding-right: 18px; }
  .leiste.voll .uhrTag { padding-right: 18px; font-size: 13px; }
  .leiste.voll .dort { padding: 6px 10px 6px 18px; gap: 9px; }
  .leiste.voll .dort .avatar.klein { width: 36px; height: 36px; font-size: 15px; }
  .leiste.voll .dortText b { font-size: 20px; }
  .leiste.voll #dortInfo, .leiste.voll #dortInfo[hidden] { display: none !important; }
  .leiste.voll .dortHimmel, .leiste.voll .dortHimmel svg { width: 20px; height: 20px; }
  .leiste.voll .radioPille { height: 58px; max-width: 230px; padding-right: 16px; }
  .leiste.voll .rpSymbol { width: 46px; height: 46px; }
  .leiste.voll .rpWeiter { height: 46px; min-width: 46px; }
}
@media (max-width: 899px) {
  .leiste::before { top: calc(8px + env(safe-area-inset-top)); left: 10px; right: 10px; border-radius: 30px; }
  .leiste.voll { padding: calc(18px + env(safe-area-inset-top)) 20px 10px; gap: 10px; }
  .leiste.voll .tropfen { width: 56px; height: 56px; }
  .leiste.voll .tropfen svg { width: 23px; height: 23px; }
  .leiste.voll .zeiten { grid-template-columns: auto; grid-template-areas: "uhr" "dort"; justify-items: center; row-gap: 3px !important; }
  .leiste.voll .uhr { font-size: 38px; justify-self: center; padding: 0; }
  .leiste.voll .uhrTag { display: none; }
  .leiste.voll .dort { padding: 2px 10px 2px 2px; gap: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .leiste.voll .dort::before { display: none; }
  .leiste.voll .dort .avatar.klein { width: 24px; height: 24px; font-size: 11px; }
  .leiste.voll .dortText b { font-size: 14px; letter-spacing: 0; }
  .leiste.voll #dortName, .leiste.voll #dortInfo, .leiste.voll #dortName[hidden], .leiste.voll #dortInfo[hidden] { display: none !important; }
  .leiste.voll .dortHimmel, .leiste.voll .dortHimmel svg { width: 16px; height: 16px; }
  .leiste.voll .dort.nacht { background: color-mix(in srgb, #1C1C3A 85%, transparent); color: #fff; }
  .leiste.voll .radioPille { height: 56px; width: 56px; min-width: 0; max-width: 56px; padding: 0 !important; gap: 0; justify-content: center; }
  .leiste.voll .radioPille .rpText { display: none !important; }
  .leiste.voll .rpSymbol { width: 44px; height: 44px; }
  .leiste.voll .rpPlay { width: 22px; height: 22px; }
  .leiste.voll .rpWeiter { display: none; }
  .leiste.voll .rpMenue { top: calc(110px + env(safe-area-inset-top)); right: 10px; }
  .start .wrap { padding-top: calc(122px + env(safe-area-inset-top)); }
}
/* Tablet: wie am Handy gestapelt, aber die Pille darf ihren Text zeigen */
@media (min-width: 761px) and (max-width: 899px) {
  .leiste.voll { padding-left: 26px; padding-right: 26px; }
  .leiste.voll .tropfen { width: 60px; height: 60px; }
  .leiste.voll .uhr { font-size: 42px; }
  .leiste.voll .radioPille { width: auto; max-width: 240px; height: 60px; padding: 0 18px 0 7px !important; gap: 10px; justify-content: flex-start; }
  .leiste.voll .radioPille:not(.an) { padding-right: 7px !important; }
  .leiste.voll .radioPille .rpText { display: flex !important; }
  .leiste.voll .radioPille:not(.an) .rpText { display: none !important; }
  .leiste.voll .rpSymbol { width: 46px; height: 46px; }
}
/* iPhone quer als installierte App: Glasinsel und Knöpfe bleiben neben der Notch */
@media (max-width: 1099px) and (max-height: 500px) and (pointer: coarse) {
  .leiste::before { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
  .leiste.voll { padding-left: max(20px, calc(10px + env(safe-area-inset-left))); padding-right: max(20px, calc(10px + env(safe-area-inset-right))); }
}
/* Mac-App: die Ampel sitzt links oben auf der Insel, der Tropfen rückt daneben */
body.nativ .leiste::before { top: 6px; }
body.nativ .leiste.voll { padding-top: 18px; padding-left: max(92px, calc(50% - 604px)); }
body.nativ .leiste.klein { padding-left: 84px; }

/* ===== Aufgeräumt: ausgelagerte Bereiche leben in eigenen Apps ===== */
.ausgelagert { display: none !important; }
body.nurApp .leiste, body.nurApp .feuer, body.nurApp .tabbar, body.nurApp .raster, body.nurApp .kopfzeile, body.nurApp .dock, body.nurApp .mainTasks,
body.nurApp .countdowns, body.nurApp .seitGestern, body.nurApp .pushBanner, body.nurApp .leiseTasks, body.nurApp .fuss, body.nurApp .ansichtKopf, body.nurApp .startHilfe, body.nurApp .rad { display: none !important; }
body.nurApp .wrap { max-width: 920px; padding-top: 24px; }
.nurBuehne { display: flex; flex-direction: column; gap: 20px; }
.nurKopf h1 { margin: 0; font-size: clamp(30px, 5vw, 40px); font-weight: 700; letter-spacing: -.02em; }
.nurKopf p { margin: 6px 0 0; color: var(--muted); font-size: 16px; }
.nurBuehne > .widget { width: 100%; }
.app.kassetten .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #C7A27A, #7A5A3A); }
.app.wettkaempfe .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FF453A, #B0221A); }
.app.alltag .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #64D2FF, #0A84FF); }
.app.planer .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #8E8E93, #3A3A3C); }
.app.platten .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #BF5AF2, #5B2A9E); }
.app.shop .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #FF5C8A, #C2185B); }
.app.tuer .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #30D158, #0E7C5A); }
.app.wohnung .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #D9A066, #A0522D); }

/* Lautstärke und AirPlay im Radio-Menü */
.rpRegler { display: flex; align-items: center; gap: 10px; padding: 6px 16px 10px; }
.rpRegler svg { width: 18px; height: 18px; fill: var(--muted); color: var(--muted); flex: none; }
.rpRegler input { flex: 1; min-width: 0; accent-color: #FF5A3C; height: 24px; }
.rpRegler.ohneLaut input, .rpRegler.ohneLaut .rpLeise, .rpRegler.ohneLaut .rpLaut { display: none; }
.rpRegler.ohneLaut { justify-content: flex-end; }
.rpAirplay { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.rpAirplay[hidden] { display: none; }
.rpAirplay svg { width: 20px; height: 20px; fill: currentColor; color: currentColor; }
.rpAirplay.an { background: #0A84FF; color: #fff; }
.rpHinweis { margin: -4px 16px 10px; font-size: 12px; color: var(--muted); }

/* ===== Rad mit zwei Ringen, Suche darunter, Gruppen-Reiter unten ===== */
.rad .app[data-ring="0"] { z-index: 2; }
.radScheibe::before { inset: 15%; }
.radMitte { width: 30%; }
.radSuche { position: absolute; z-index: 61; pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; border-radius: 22px; padding: 0;
  background: color-mix(in srgb, var(--card) 84%, transparent); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 14px 40px rgba(0,0,0,.2), inset 0 0 0 1px color-mix(in srgb, var(--card) 80%, transparent), inset 0 1px 0 var(--glanz); }
.radSuche[hidden] { display: none; }
.radSuche .rsLupe { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.radSuche input { flex: 1 1 100%; min-width: 0; height: 44px; border: 0; background: none; padding: 0 14px 0 40px; font: inherit; font-size: 15px; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.radSuche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.radTreffer { flex: 1 1 100%; list-style: none; margin: 0; padding: 4px 6px 6px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; max-height: min(46vh, 380px); overflow-y: auto; }
.radTreffer[hidden] { display: none; }
.radTreffer li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; cursor: pointer; }
.radTreffer li.an, .radTreffer li:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.radTreffer .tIkone { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.radTreffer .tIkone .ikone { width: 30px; height: 30px; border-radius: 9px; }
.radTreffer .tIkone .ikone svg { width: 16px; height: 16px; }
.radTreffer .tIkone.ort::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #8E8E93, #636366); }
.radTreffer .tText { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.radTreffer .tText b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radTreffer .tText small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gruppenLeiste { position: fixed; z-index: 46; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 999px; max-width: calc(100vw - 140px);
  background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 12px 36px rgba(0,0,0,.18), inset 0 0 0 1px color-mix(in srgb, var(--card) 80%, transparent), inset 0 1px 0 var(--glanz); }
.gruppenLeiste[hidden] { display: none; }
.gruppenLeiste .gl { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 5px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.gruppenLeiste .gl .ikone { width: 28px; height: 28px; border-radius: 9px; }
.gruppenLeiste .gl .ikone svg { width: 15px; height: 15px; }
.gruppenLeiste .gl .zahl, .gruppenLeiste .gl .live { display: none; }
.gruppenLeiste .gl.an { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.gruppenLeiste .gl:not(.an) { color: var(--muted); }
.gruppenLeiste .gl:not(.an) .ikone { filter: saturate(.6); opacity: .8; }
@media (max-width: 760px) { .gruppenLeiste { bottom: calc(var(--tbH, 64px) + env(safe-area-inset-bottom) + 12px); max-width: calc(100vw - 90px); left: 12px; transform: none; } .gruppenLeiste .gl > span:not(.ikone) { display: none; } .gruppenLeiste .gl.an > span:not(.ikone) { display: inline; } }

/* ===== Projekte: was gerade groß läuft, mit Fortschritt ===== */
.wicon.projekte { background: linear-gradient(135deg, #FF9F0A, #FF375F); }
.projektListe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.projekt a { display: flex; align-items: center; gap: 12px; padding: 8px 6px 8px 4px; border-radius: 16px; color: var(--ink); text-decoration: none; transition: background .15s; }
.projekt a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); text-decoration: none; }
.projekt .pIkone { flex: none; width: 40px; height: 40px; }
.projekt .pIkone .ikone { width: 40px; height: 40px; border-radius: 12px; }
.projekt .pIkone .ikone svg { width: 22px; height: 22px; }
.projekt .pIkone .zahl, .projekt .pIkone .live { display: none; }
.projekt .pText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.projekt .pText b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projekt .pText small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projekt .pBalken { display: block; height: 4px; border-radius: 2px; margin-top: 2px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.projekt .pBalken i { display: block; height: 100%; border-radius: 2px; background: var(--pf); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.projekt.alarm .pBalken i { background: linear-gradient(90deg, var(--pf), #FF375F); }
.projekt .pPfeil { flex: none; color: var(--muted); font-size: 20px; padding-right: 4px; }

/* Geliehene App-Kacheln (Reiter, Suche, Projekte): Farbe ja, Dock-Layout nein */
.gruppenLeiste .gl.app, .radTreffer .tIkone.app, .projekt .pIkone.app { flex: none; flex-direction: row; gap: 7px; padding: 0; min-width: 0; }
.radTreffer .tIkone.app, .projekt .pIkone.app { display: grid; place-items: center; }
.gruppenLeiste .gl.app { padding: 0 12px 0 5px; }
.gruppenLeiste .gl.app:hover .ikone, .radTreffer .tIkone.app:hover .ikone, .projekt .pIkone.app:hover .ikone { transform: none; box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 3px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.3); }
.radTreffer .tIkone .zahl, .radTreffer .tIkone .live { display: none; }
.radMitte { width: 28%; }
.radScheibe::before { inset: 23%; }
/* Die Suche liegt im Rad-Container, die Rad-Regeln für .app dürfen dort nicht greifen */
.radTreffer .tIkone.app { position: static; width: 30px; height: 30px; margin: 0; transform: none !important; transition: none; z-index: auto; }
.radTreffer .tIkone.app .ikone { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 3px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.3); }
.radTreffer .tIkone.app .ikone svg { width: 16px; height: 16px; }
@media (hover: none) { .tropfen .blick { display: none; } }

/* ===== Das Dock ist zurück auf der Startseite (Rad aus) ===== */
.dock.sichtbar { margin-top: 0; }
.dock.sichtbar .app.offen .ikone { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--blue); }
@media (max-width: 640px) { .dock.sichtbar .app { flex: 0 0 calc(25% - 6px); } .dock.sichtbar .app .ikone { width: 60px; height: 60px; border-radius: 18px; } .dock.sichtbar .app .ikone svg { width: 30px; height: 30px; } .dock.sichtbar .app .name { font-size: 12px; } }
.tropfen.heim .tRaster { opacity: 0; }

/* ===== Marker: steht ganz oben, bis es erledigt ist ===== */
.markerBar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.markerBar[hidden] { display: none; }
.marker { position: relative; border-radius: 22px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mf) 88%, #fff), var(--mf) 60%, color-mix(in srgb, var(--mf) 70%, #000));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--mf) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.marker::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: multiply;
  background: repeating-linear-gradient(115deg, transparent 0 16px, rgba(0,0,0,.45) 16px 18px); }
.mKopf { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mZeichen { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.marker.eilig .mZeichen { animation: pulsieren 2s infinite; }
.mText { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mText b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.mText small { font-size: 13px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mFrist { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.mFrist b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.mFrist small { font-size: 12px; opacity: .8; white-space: nowrap; }
.mPfeil { flex: none; font-size: 22px; opacity: .7; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.marker.auf .mPfeil { transform: rotate(90deg); }
.mMehr { position: relative; z-index: 1; display: none; padding: 0 18px 16px; }
.marker.auf .mMehr { display: block; }
.mSchritte { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.mSchritte li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; line-height: 1.35; }
.mSchritte li.erledigt span { opacity: .55; text-decoration: line-through; }
.mHaken { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: none; color: transparent; font-size: 14px; cursor: pointer; display: grid; place-items: center; }
.mSchritte li.erledigt .mHaken { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); color: var(--mf); }
.mSchritte li span { flex: 1; min-width: 0; }
.mWeg { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: rgba(255,255,255,.55); font-size: 13px; cursor: pointer; }
.mWeg:hover { background: rgba(255,255,255,.18); color: #fff; }
.mNeu { display: flex; gap: 8px; margin-bottom: 12px; max-width: 520px; }
.mNeu input { flex: 1; min-width: 0; border: 0; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 15px; color: #fff; background: rgba(255,255,255,.16); }
.mNeu input::placeholder { color: rgba(255,255,255,.6); }
.mNeu .knopf { flex: none; width: auto; background: rgba(255,255,255,.92); color: var(--mf); }
.mFuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.22); font-size: 14px; }
.mFuss label { display: inline-flex; align-items: center; gap: 8px; }
.mFuss input[type=date] { border: 0; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 14px; color: #fff; background: rgba(255,255,255,.16); color-scheme: dark; }
.mFertig { border: 0; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--mf); background: rgba(255,255,255,.92); cursor: pointer; }
.mFertig:active { transform: scale(.97); }
/* Punkt am Tropfen, solange ein Marker offen ist */
.tropfen.markiert::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 2px var(--card), 0 2px 6px rgba(0,0,0,.3); animation: pulsieren 2.4s infinite; }
@media (max-width: 600px) {
  .mKopf { gap: 10px; padding: 14px; align-items: flex-start; flex-wrap: wrap; }
  .mZeichen { width: 30px; height: 30px; font-size: 17px; }
  .mText b { font-size: 17px; }
  .mText small { white-space: normal; }
  .mFrist { flex-basis: 100%; align-items: flex-start; padding-left: 40px; }
  .mFrist b { font-size: 14px; }
  .mPfeil { position: absolute; right: 14px; top: 16px; }
  .mMehr { padding: 0 14px 14px; }
  .mFuss { justify-content: flex-start; }
}

/* ===== Arbeit: Projekte als Apps, da wo vorher die KHS-Karte stand (Leon, 07.10.) ===== */
#fokusKarte { display: none !important; }   /* KHS ist abgegeben, die Karte macht Platz. Erreichbar unter „Persönlich“. */
.pjIkone { --pf: #2F6BFF; flex: none; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; color: oklch(from var(--pf) clamp(0.22, (0.8 - l) * 1000, 1) 0 0);
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.35), transparent 55%), linear-gradient(140deg, color-mix(in srgb, var(--pf) 78%, #fff), var(--pf) 55%, color-mix(in srgb, var(--pf) 70%, #000));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 12px color-mix(in srgb, var(--pf) 35%, transparent); }
.pjIkone b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pjIkone.plus { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); font-size: 26px; font-weight: 300; }
.app.projekte .ikone { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #5B8CFF, #2F4FD6); }
.projekt .pIkone.werk .pjIkone { width: 40px; height: 40px; border-radius: 12px; box-shadow: none; }

.arbeitKarte { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 14px; border-radius: 26px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; }
.arbeitKarte::before { content: ""; position: absolute; inset: 0 0 auto; height: 120px; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 100% at 0% 0%, color-mix(in srgb, #2F6BFF 16%, transparent), transparent 70%), radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, #7A5AF8 12%, transparent), transparent 70%); }
.akKopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.akTitel { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; min-width: 0; }
.akTitel:hover { text-decoration: none; }
.akMarke { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #2F6BFF; }
.akTitel b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.akAlle { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); text-decoration: none; padding-bottom: 2px; }
.akAlle:hover { text-decoration: none; color: var(--ink); }
.akApps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -6px; padding: 2px 6px 4px; }
.akApps::-webkit-scrollbar { display: none; }
.akApp { --pf: #2F6BFF; position: relative; flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; border-radius: 16px; color: var(--ink); text-decoration: none; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.akApp:hover { text-decoration: none; transform: translateY(-2px); }
.akApp:active { transform: scale(.95); }
.akApp .pjIkone { width: 58px; height: 58px; border-radius: 17px; }
.akApp .pjIkone b { font-size: 20px; }
.akApp > span:last-child { font-size: 12px; font-weight: 600; max-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akApp.neu > span:last-child { color: var(--muted); }
.akZahl { position: absolute; top: -5px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #FF3B30; box-shadow: 0 0 0 2px var(--card); }
.akFort { width: 40px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; position: relative; margin-top: -1px; }
.akFort::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f) * 100%); border-radius: 2px; background: var(--pf); }
.akNaechste { list-style: none; margin: 0; padding: 4px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.akNaechste a { --pf: #2F6BFF; display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.akNaechste a:hover { text-decoration: none; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.akPunkt { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--pf); }
.akPunkt.dran { background: var(--pf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf) 25%, transparent); }
.akText { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akWichtig { flex: none; font-style: normal; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: #FF375F; }
.akFrist { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.akFrist.knapp { color: #C77700; }
.akFrist.ueber { color: #FF3B30; }
.akProjekt { flex: none; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; color: oklch(from var(--pf) clamp(0.22, (0.8 - l) * 1000, 1) 0 0); background: var(--pf); }

/* ===== Chat: Links (Leon, 08.10.: „Links schicken soll einfacher sein“) ===== */
.eingabe:has(.chatLinkKnopf:not([hidden])) { grid-template-columns: 32px 1fr 36px; padding-left: 4px; }
.eingabe .chatLinkKnopf { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.eingabe .chatLinkKnopf[hidden] { display: none; }
.eingabe .chatLinkKnopf svg { stroke: var(--ink); stroke-width: 2.2; opacity: .75; }
.blase a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); word-break: break-all; }
.blase:not(.eigen) a { color: #0A84FF; }
.linkKarte { display: flex; flex-direction: column; max-width: min(78%, 320px); margin-top: 3px; border-radius: 16px; overflow: hidden; background: var(--bg); color: var(--ink); text-decoration: none; align-self: flex-start; box-shadow: inset 0 0 0 1px var(--line); }
.linkKarte.eigen { align-self: flex-end; }
.linkKarte:hover { text-decoration: none; filter: brightness(.98); }
.linkKarte img { display: block; width: 100%; aspect-ratio: 1.91; object-fit: cover; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.linkKarte span { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 10px; }
.linkKarte small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.linkKarte b { font-size: 14px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linkKarte em { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Einstellungen, Info: Flugmodus */
.flugSchritte { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.flugSchritte b { font-weight: 650; }
/* Fünf Reiter passen am Handy nicht nebeneinander: schmaler, notfalls wischen */
@media (max-width: 520px) { .eReiter { position: relative; overflow-x: auto; scrollbar-width: none; } .eReiter::-webkit-scrollbar { display: none; } .eReiter button { flex: none; padding: 8px 11px; font-size: 13px; white-space: nowrap; } }

/* Kommentar aus der Kommentar-App im Chat */
.kommentarZu { display: block; font-size: 12px; opacity: .7; margin-bottom: 2px; }

/* Skip in der Radio-Pille (Leon, 29.10.2026)
   Groß: das Symbol links wird beim Drüberfahren selbst zum Pfeil, die Pille bleibt, wie sie ist.
   Klein: die Pille wird rechts breiter, der Pfeil wächst an seinem festen Platz auf, statt mitzurutschen.
   Nach dem Klick zeigt der Knopf die Sperre in Sekunden statt des Pfeils, aber nur solange man drüber ist. */
.rpBereich .rpWeiter, .leiste.voll .rpBereich .rpWeiter { position: absolute; right: auto; top: 50%; z-index: 2; padding: 0; justify-content: center; gap: 0; border-radius: 50%;
  opacity: 0; pointer-events: none; translate: 0 -50%; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: opacity .2s ease, scale .32s cubic-bezier(.2,.9,.3,1), background .2s; }
.rpBereich .rpWeiter { left: 50px; width: 36px; height: 36px; min-width: 0; scale: .6;
  background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.rpBereich .rpWeiter svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rpBereich .rpWeiter small { font-size: 11px; }
.rpBereich .rpWeiter.besetzt { opacity: 0 !important; }
.rpBereich .rpWeiter.besetzt svg { display: none; }
.rpBereich.laeuft:hover .rpWeiter, .rpBereich.laeuft .rpWeiter:focus-visible { opacity: 1; scale: 1; pointer-events: auto; }
.rpBereich.laeuft:hover .rpWeiter.besetzt { opacity: .7 !important; }
.rpBereich .rpWeiter:hover { background: rgba(255,255,255,.34); }
.radioPille { transition: padding .32s cubic-bezier(.2,.9,.3,1), scale .2s, box-shadow .4s, background .5s; }
.rpBereich.laeuft .radioPille:hover { scale: 1; }
.rpBereich.laeuft:hover .radioPille.an { padding-right: 50px; }
/* Groß: Pfeil liegt genau auf dem Symbol, die Welle blendet aus */
.leiste.voll .rpBereich .rpWeiter { left: 7px; width: 50px; height: 50px; min-width: 0; scale: 1; background: transparent; box-shadow: none; }
.leiste.voll .rpBereich .rpWeiter svg { width: 24px; height: 24px; }
.leiste.voll .rpBereich .rpWeiter:hover { background: rgba(255,255,255,.14); }
.leiste.voll .rpBereich.laeuft:hover .radioPille.an { padding-right: 22px; }
.leiste.voll .radioPille .welle { transition: opacity .2s; }
.leiste.voll .rpBereich.laeuft:hover .radioPille .welle { opacity: 0; }
@media (min-width: 900px) and (max-width: 1099px) {
  .leiste.voll .rpBereich .rpWeiter { width: 46px; height: 46px; }
  .leiste.voll .rpBereich.laeuft:hover .radioPille.an { padding-right: 16px; }
}
/* Radio aus: derselbe Knopf startet AAA Learning Background. Groß liegt er unsichtbar auf dem Play-Symbol,
   klein macht die Pille beim Drüberfahren Platz für einen Play-Knopf. Die Pille selbst öffnet weiter die Senderliste. */
.rpBereich .rpWeiter .rpStart { display: none; fill: #fff; stroke: none; margin-left: 2px; }
.rpBereich:not(.laeuft) .rpWeiter .rpPfeil { display: none; }
.rpBereich:not(.laeuft) .rpWeiter .rpStart { display: block; }
.rpBereich:not(.laeuft):hover .rpWeiter, .rpBereich:not(.laeuft) .rpWeiter:focus-visible { opacity: 1; scale: 1; pointer-events: auto; }
.rpBereich:not(.laeuft):hover .radioPille { padding-right: 50px; }
.leiste.voll .rpBereich:not(.laeuft) .rpWeiter { opacity: 1; pointer-events: auto; }
.leiste.voll .rpBereich:not(.laeuft) .rpWeiter .rpStart { display: none; }
.leiste.voll .rpBereich:not(.laeuft) .rpWeiter:hover { background: rgba(255,255,255,.18); }
.leiste.voll .rpBereich:not(.laeuft):hover .radioPille { padding-right: 22px; }
@media (hover: none) { .rpBereich .rpWeiter, .leiste.voll .rpBereich .rpWeiter { display: none; } }

/* ===== Strom sparen (Leon, 28.10.: Chrome zieht viel Energie) =====
   Diese Daueranimationen lassen sich nicht auf der Grafikkarte verschieben, der Browser malt sie bei jedem Bild neu.
   Mit wenigen Zwischenbildern sehen sie gleich aus, kosten aber nur einen Bruchteil. */
.tropfen .kern { animation: none; }   /* Wabern hinter dem Blur: der Filter wurde 60× pro Sekunde neu berechnet, größter Stromfresser der Seite */
.flAussen { animation-timing-function: steps(4); }
.flInnen { animation-timing-function: steps(3); }
.tropfen .kern::before, .radioPille::before { will-change: transform; }   /* Glanz als eigene Ebene, sonst malt er den Tropfen mit */
.avatar.online::after, .app .live, .countdowns a.heute b, .abKnopf.gruen, .alPunkt, .marker.eilig .mZeichen { animation-timing-function: steps(12); }
.tropfen.markiert::after { animation-timing-function: steps(5); }
.welle b { height: 12px; transform-origin: 50% 100%; animation-name: welleSkal; will-change: transform; }
@keyframes welleSkal { 0%, 100% { transform: scaleY(.34); } 50% { transform: scaleY(1); } }

/* ===== Nur eine Aufgabe (Main Task mit Stil „allein“, Leon für Marvin, 29.10.2026) =====
   Oben bleibt die Leiste, darunter steht nur die Aufgabe, groß und offen, bis sie abgehakt ist. */
body.nurAufgabe .markerBar, body.nurAufgabe .leiseTasks, body.nurAufgabe .kopfzeile, body.nurAufgabe .pushBanner,
body.nurAufgabe .countdowns, body.nurAufgabe .seitGestern, body.nurAufgabe #dockSichtbar, body.nurAufgabe .raster,
body.nurAufgabe .fuss, body.nurAufgabe .feuer, body.nurAufgabe .startHilfe, body.nurAufgabe .tabbar, body.nurAufgabe .ansichtKopf { display: none !important; }
body.nurAufgabe .wrap { max-width: 900px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
body.nurAufgabe .mainTasks { margin: 0; }
.mainTask.allein { grid-template-columns: 76px 1fr; gap: 6px 24px; padding: 40px 44px; border-radius: 36px; }
.mainTask.allein .mtText { cursor: default; }
.mainTask.allein .mtMehr { display: none; }
.mainTask.allein .mtHaken { width: 72px; height: 72px; }
.mainTask.allein .mtHaken svg { width: 34px; height: 34px; }
.mainTask.allein .mtTitel { font-size: clamp(36px, 6.4vw, 64px); letter-spacing: -.035em; line-height: 1.02; }
.mainTask.allein .mtKurz { font-size: clamp(17px, 2vw, 21px); margin-top: 8px; max-width: 40em; }
.mainTask.allein .mtInhalt { margin-top: 26px; padding: 26px 30px; font-size: 17px; }
.mainTask.allein .mtInhalt ol { gap: 16px; }
.mainTask.allein .mtFrage { font-weight: 700; }
.mainTask.allein .mtHinweis { display: block; margin-top: 3px; font-size: 15px; opacity: .88; }
.mtInhalt a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 3px; word-break: break-word; }
.mtInhalt a:hover { text-decoration-color: #fff; }
@media (max-width: 640px) {
  .mainTask.allein { grid-template-columns: 1fr; padding: 26px 22px; }
  .mainTask.allein .mtHaken { width: 56px; height: 56px; }
  .mainTask.allein .mtInhalt { padding: 18px; font-size: 16px; }
}