/* BLOC - Aussehen „New“ (seit 2026-10-15), zusätzlich zu „Klassik“.
   Alles steht unter :root[data-layout="new"]; ohne das Attribut ändert sich nichts. Farben kommen weiter aus den Designs
   (System, Hell, Dunkel, Nacht), hier ändern sich nur Formen, Flächen und die untere Leiste.
   Grundsätze: ruhige Flächen, große Rundungen mit einer kleinen Ecke oben links, Milchglas nur auf der unteren Leiste (mit deckendem
   Rückfall), dazu die Navigation „Heute · Training · Kalender · Fortschritt“ mit Hauptknopf (js/03-router.js). Funktionen bleiben. */

:root[data-layout="new"]{
  --radius:24px;
  --ecke:8px;                       /* kleine Ecke oben links */
  --nl-linie:color-mix(in srgb, var(--text) 9%, transparent);
}

/* ---------- Flächen ---------- */
:root[data-layout="new"] .card,
:root[data-layout="new"] .list-item,
:root[data-layout="new"] .area-tile,
:root[data-layout="new"] .installtip,
:root[data-layout="new"] .woche{
  border:1px solid var(--nl-linie);
  border-top-left-radius:var(--ecke);
}
:root[data-layout="new"] .home-hero{ border-top-left-radius:var(--ecke); border:1px solid var(--nl-linie); }
:root[data-layout="new"] .list-item{ padding:16px 18px; }

/* ---------- Knöpfe ---------- */
/* :where: Spezifität 0, damit Kompaktregeln (Knopfleisten in Studio, Plan, Lauf) weiter gewinnen */
:where(:root[data-layout="new"]) .btn{ border-radius:28px; border-top-left-radius:var(--ecke); padding:18px 22px; }
:root[data-layout="new"] .btn-secondary{ border:1px solid var(--nl-linie); }
:root[data-layout="new"] .playbtn{ border-radius:50%; }
:root[data-layout="new"] .iconbtn{ width:52px; height:52px; border-radius:50%; border:1px solid var(--nl-linie); }
:root[data-layout="new"] .fab{ border-radius:50%; width:64px; height:64px; }

/* ---------- Auswahl: Pillen statt Kästen ---------- */
:root[data-layout="new"] .seg-row button,
:root[data-layout="new"] .theme-pick button,
:root[data-layout="new"] .lib-chip,
:root[data-layout="new"] .fc-chip,
:root[data-layout="new"] .fc-seg button{ border-radius:999px; }
:root[data-layout="new"] .chip{ border:1px solid var(--nl-linie); }

/* ---------- Überschriften ---------- */
:root[data-layout="new"] .section-title{ letter-spacing:.09em; font-weight:600; }

/* ---------- Wochenpunkte: weiß = frei, orange = trainiert, Ring = geplant ---------- */
:root[data-layout="new"] .wo-tag i{ width:13px; height:13px; background:#fff; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--text) 45%, transparent); }
:root[data-layout="new"] .woche-kal .wo-tag i{ width:16px; height:16px; }
:root[data-layout="new"] .wo-tag small{ font-size:11px; }
:root[data-layout="new"] .wo-tag.an i{ background:var(--accent); box-shadow:none; }
:root[data-layout="new"] .wo-tag.plan i{ background:transparent; box-shadow:inset 0 0 0 2.5px var(--accent); }
:root[data-layout="new"] .wo-tag.heute i{ outline:2px solid var(--text); outline-offset:2px; }

/* ---------- Untere Leiste: schwebende Pille, aktiver Reiter in Orange ---------- */
/* Die Leiste besteht aus der Pille mit den vier Reitern und - je nach Seite - einem runden Hauptknopf rechts daneben (wie im Entwurf) */
:root[data-layout="new"] .tabbar{
  left:50%; right:auto; transform:translateX(-50%);
  width:calc(100% - 28px); max-width:532px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  padding:0; gap:10px; align-items:center; justify-content:stretch;
  border:0; background:none; box-shadow:none;
}
:root[data-layout="new"] .tabbar .pille{
  flex:1; min-width:0; display:flex; justify-content:space-around; gap:2px; padding:6px;
  border:1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius:999px;
  background:var(--surface); border-color:var(--border);   /* Rückfall für Browser ohne color-mix */
  background:color-mix(in srgb, var(--surface) 96%, transparent);   /* ohne Blur deckend genug für den Kontrast */
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root[data-layout="new"] .tabbar .pille{
    background:color-mix(in srgb, var(--surface) 91%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  }
}
@media (prefers-reduced-transparency: reduce){
  :root[data-layout="new"] .tabbar .pille{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
:root[data-layout="new"] .tabbar .hauptknopf{
  flex:none; width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-ink, var(--accent)); color:var(--accent-text); box-shadow:0 10px 28px rgba(0,0,0,.28);
}
:root[data-layout="new"] .tabbar .hauptknopf:active{ transform:scale(.94); }
:root[data-layout="new"] .tabbar .hauptknopf svg{ width:28px; height:28px; }
:root[data-layout="new"] .tabbar .tab{ flex:1; min-width:0; max-width:none; border-radius:999px; padding:8px 2px 7px; }
:root[data-layout="new"] .tabbar .tab > span:last-child{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:359px){ :root[data-layout="new"] .tabbar .tab{ font-size:10px; } }
/* Hauptseiten haben in New keinen Zurück-Pfeil (sie sind über die Leiste erreichbar) */
:root[data-layout="new"] body.mit-tabs .topbar .back{ display:none; }
:root[data-layout="new"] .tabbar .tab.active{ color:var(--accent-ink, var(--accent)); background:color-mix(in srgb, var(--accent) 11%, transparent); }   /* accent-ink: in Hell dunkleres Orange (Kontrast) */
:root[data-layout="new"] .tabbar .tab.active > span:last-child{ font-weight:700; }
:root[data-layout="new"] body.mit-tabs #app{ padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
:root[data-layout="new"] body.mit-tabs .fab{ bottom:calc(98px + env(safe-area-inset-bottom)); }
:root[data-layout="new"] body.mit-tabs .fab-menu{ bottom:calc(176px + env(safe-area-inset-bottom)); }

/* ---------- Fenster (Sheets) ---------- */
:root[data-layout="new"] .confirm-sheet{ border-radius:32px 32px 0 0; border-top-left-radius:32px; border:1px solid var(--nl-linie); border-bottom:0; }

@media (prefers-reduced-motion: reduce){
  :root[data-layout="new"] *{ transition-duration:0s !important; }
}

/* ---------- Seite „Training“ und Workout-Builder auf Heute (nur New) ---------- */
:root[data-layout="new"] .topbar .kopf-sym{ width:48px; height:48px; margin-left:2px; }
:root[data-layout="new"] .suchfeld-neu{
  display:flex; align-items:center; gap:12px; width:100%; margin:6px 0 16px; padding:15px 18px;
  border:1px solid var(--nl-linie); border-radius:999px; background:var(--surface); color:var(--text-dim);
  font:inherit; font-size:15px; text-align:left; cursor:pointer; box-shadow:var(--shadow);
}
:root[data-layout="new"] .suchfeld-neu svg{ width:20px; height:20px; flex:none; color:var(--text); }

/* Bereiche als Fotokarten */
:root[data-layout="new"] .training-seite .area-bereiche{ gap:0; }
:root[data-layout="new"] .training-seite .area-gruppe{ background:none; box-shadow:none; border-radius:0; overflow:visible; display:grid; gap:12px; }
:root[data-layout="new"] .training-seite .area-tile.zeile{
  position:relative; isolation:isolate; overflow:hidden; min-height:124px; padding:16px 16px; gap:14px; align-items:flex-end;
  border:1px solid var(--nl-linie); border-radius:var(--radius); border-top-left-radius:var(--ecke); color:#fff;
  background-color:#2a2a2e; background-size:cover; background-position:50% 45%;
}
:root[data-layout="new"] .training-seite .area-tile.zeile::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,11,.20) 0%, rgba(8,9,11,.50) 40%, rgba(8,9,11,.86) 100%);
}
:root[data-layout="new"] .training-seite .area-tile.zeile + .area-tile.zeile{ border-top:1px solid var(--nl-linie); }
:root[data-layout="new"] .training-seite .area-tile .at-ico{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.26); }
:root[data-layout="new"] .training-seite .area-tile .at-name{ color:#fff; font-size:18px; }
:root[data-layout="new"] .training-seite .area-tile .at-sub{ color:rgba(255,255,255,.92); font-size:13px; }
:root[data-layout="new"] .training-seite .area-tile .at-name, :root[data-layout="new"] .training-seite .area-tile .at-sub{ text-shadow:0 1px 6px rgba(0,0,0,.55); }
:root[data-layout="new"] .training-seite .area-tile .at-ico{ box-shadow:none; }
:root[data-layout="new"] .training-seite .area-tile .at-chev{ color:#fff; }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="katalog"]{ background-image:url("img/neu-workout.jpg"); }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="warm"]{ background-image:url("img/neu-mobility.jpg"); }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="intervall"]{ background-image:url("img/neu-timer.jpg"); }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="reps"]{ background-image:url("img/neu-summit.jpg"); }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="run"]{ background-image:url("img/bereich-run.jpg"); background-position:50% 50%; }

/* Workout-Builder */
:root[data-layout="new"] .builder-neu{
  position:relative; isolation:isolate; overflow:hidden; min-height:200px; padding:18px; margin:0 0 14px; color:#fff;
  border:1px solid var(--nl-linie); border-radius:var(--radius); border-top-left-radius:var(--ecke); box-shadow:var(--shadow);
  background:#2a2a2e;
  display:flex; flex-direction:column; gap:14px;
}
:root[data-layout="new"] .builder-neu::after{ content:""; position:absolute; inset:-6px; z-index:-2; background:url("img/neu-builder.webp") 50% 38%/cover; filter:blur(1.5px); }
:root[data-layout="new"] .builder-neu::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,11,.14) 0%, rgba(8,9,11,.36) 45%, rgba(8,9,11,.80) 100%);
}
:root[data-layout="new"] .bn-text{ display:flex; flex-direction:column; gap:4px; margin-top:auto; }
:root[data-layout="new"] .bn-kicker{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.82); }
:root[data-layout="new"] .bn-text b{ font-size:22px; line-height:1.2; }
:root[data-layout="new"] .bn-text small{ font-size:13.5px; color:rgba(255,255,255,.86); }
:root[data-layout="new"] .bn-knoepfe{ display:flex; gap:10px; }
:root[data-layout="new"] .bn-knoepfe .btn{ margin-top:0; padding:14px 12px; font-size:15px; }
:root[data-layout="new"] .bn-knoepfe .btn-secondary{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.3); }

/* Kopfblock auf Heute: oben links dunkler, damit das Logo ruhig steht; Farbverlauf kommt von rechts unten */
:root[data-layout="new"] .home-hero::after{ background:linear-gradient(to top left, rgba(255,92,50,.78) 0%, rgba(255,140,60,.38) 45%, rgba(20,10,6,.4) 100%); }

/* ---------- Heute wie im Entwurf: Foto-Kopf, Woche darüber, „Heute geplant“, Favoriten als Fotokarten ---------- */
:root[data-layout="new"] .kopf-neu{
  position:relative; isolation:isolate; overflow:hidden; margin:0 -16px 0; min-height:300px;
  padding:calc(env(safe-area-inset-top) + 14px) 20px 58px; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--bg); color:#fff;
}
:root[data-layout="new"] .kn-bild{ position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:50% 38%; }
:root[data-layout="new"] .kn-tint{ position:absolute; inset:0; z-index:-2;
  background:linear-gradient(to top left, rgba(255,86,44,.82) 0%, rgba(255,140,60,.5) 34%, rgba(255,160,80,0) 72%); }
:root[data-layout="new"] .kopf-neu::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 85% 62% at 0% 0%, rgba(6,7,9,.82) 0%, rgba(6,7,9,.58) 38%, rgba(6,7,9,0) 78%); }
:root[data-layout="new"] .kopf-neu::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,11,0) 55%, var(--bg) 100%); }
:root[data-layout="new"] .kn-zeile{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
:root[data-layout="new"] .kn-sym{ display:flex; gap:8px; }
:root[data-layout="new"] .kn-sym .iconbtn{ width:48px; height:48px; margin:0; background:rgba(20,22,26,.46); color:#fff; border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
:root[data-layout="new"] .marke-neu b{ display:block; font-family:"Helvetica Neue","Arial Black",Roboto,Arial,sans-serif; font-weight:900;
  font-size:clamp(42px,12.5vw,56px); line-height:.95; letter-spacing:-.035em; color:#ff5a36; }
:root[data-layout="new"] .marke-neu small{ display:block; margin-top:6px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.9); }
:root[data-layout="new"] .kn-gruss{ display:flex; flex-direction:column; gap:2px; margin-top:auto; }
:root[data-layout="new"] .kn-gruss span{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.82); }
:root[data-layout="new"] .kn-gruss b{ font-size:24px; line-height:1.2; }

:root[data-layout="new"] .woche-neu{ position:relative; z-index:2; margin:-44px 0 14px; }
:root[data-layout="new"] .woche-neu .woche{
  margin:0; background:color-mix(in srgb, var(--surface) 80%, transparent); border:1px solid var(--nl-linie);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 18px rgba(0,0,0,.16);
}

:root[data-layout="new"] .geplant-neu{ margin:0 0 6px; }
:root[data-layout="new"] .gn-main{
  display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; text-align:left; font:inherit; color:var(--text); cursor:pointer;
  background:var(--surface); border:1px solid var(--nl-linie); border-radius:var(--radius); border-top-left-radius:var(--ecke); box-shadow:var(--shadow);
}
:root[data-layout="new"] .gn-play{ flex:none; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-ink, var(--accent)); color:var(--accent-text); font-size:18px; }
:root[data-layout="new"] .gn-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
:root[data-layout="new"] .gn-text small{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
:root[data-layout="new"] .gn-text b{ font-size:17px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-layout="new"] .gn-text span{ font-size:13px; color:var(--text-dim); }
:root[data-layout="new"] .gn-chev{ flex:none; color:var(--text-dim); display:flex; }

:root[data-layout="new"] .fav-fotos{ display:flex; gap:12px; overflow-x:auto; margin:0 -16px 8px; padding:0 16px 4px; scrollbar-width:none; scroll-snap-type:x proximity; }
:root[data-layout="new"] .fav-fotos::-webkit-scrollbar{ display:none; }
:root[data-layout="new"] .fav-foto{
  position:relative; isolation:isolate; overflow:hidden; flex:none; width:156px; height:196px; padding:12px; scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff; cursor:pointer;
  background-color:#2a2a2e; background-size:cover; background-position:50% 45%;
  border:1px solid var(--nl-linie); border-radius:var(--r-m, 20px); border-top-left-radius:var(--ecke);
}
:root[data-layout="new"] .fav-foto::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,11,.12) 0%, rgba(8,9,11,.45) 50%, rgba(8,9,11,.86) 100%); }
:root[data-layout="new"] .fav-foto[aria-disabled]{ opacity:.5; }
:root[data-layout="new"] .ff-stern{ position:absolute; top:10px; right:10px; width:18px; height:18px; color:#f0a020; display:flex; }
:root[data-layout="new"] .ff-stern svg{ width:18px; height:18px; }
:root[data-layout="new"] .ff-text{ display:flex; flex-direction:column; gap:2px; min-width:0; text-shadow:0 1px 6px rgba(0,0,0,.55); }
:root[data-layout="new"] .ff-bereich{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); }
:root[data-layout="new"] .ff-name{ font-size:16px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
:root[data-layout="new"] .ff-sub{ font-size:12.5px; color:rgba(255,255,255,.9); }

/* ---------- Training: ein Hauch Farbe im bisherigen dunklen Stil - Symbolfeld und ein zarter Schimmer pro Bereich ---------- */
:root[data-layout="new"] .training-seite .area-tile[data-bereich="katalog"]{ --nc:#ff5a36; }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="warm"]{ --nc:#1fa56f; }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="intervall"]{ --nc:#2a8fe0; }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="reps"]{ --nc:#d99a12; }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="run"]{ --nc:#8a6cf0; }
:root[data-layout="new"] .training-seite .area-tile.zeile::before{
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--nc, #444) 20%, transparent) 0%, color-mix(in srgb, var(--nc, #444) 0%, transparent) 70%),
    linear-gradient(180deg, rgba(8,9,11,.20) 0%, rgba(8,9,11,.50) 40%, rgba(8,9,11,.86) 100%);
}
:root[data-layout="new"] .training-seite .area-tile .at-ico{
  background:color-mix(in srgb, var(--nc, #fff) 78%, #000); color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow:none;
}

/* Favoriten: gleiche Bereichsfarben, nur als zarter Schimmer von unten */
:root[data-layout="new"] .fav-foto[data-art="tp"], :root[data-layout="new"] .fav-foto[data-art="st"]{ --nc:#ff5a36; }
:root[data-layout="new"] .fav-foto[data-art="ws"]{ --nc:#1fa56f; }
:root[data-layout="new"] .fav-foto[data-art="ti"]{ --nc:#2a8fe0; }
:root[data-layout="new"] .fav-foto[data-art="rep"]{ --nc:#d99a12; }
:root[data-layout="new"] .fav-foto::before{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nc, #444) 0%, transparent) 40%, color-mix(in srgb, var(--nc, #444) 22%, transparent) 100%),
    linear-gradient(180deg, rgba(8,9,11,.12) 0%, rgba(8,9,11,.45) 50%, rgba(8,9,11,.86) 100%);
}
/* Symbolfelder: einfarbig, nur Workout (orange) und Mobility (grün) behalten ihre Farbe */
:root[data-layout="new"] .training-seite .area-tile[data-bereich="intervall"] .at-ico,
:root[data-layout="new"] .training-seite .area-tile[data-bereich="reps"] .at-ico,
:root[data-layout="new"] .training-seite .area-tile[data-bereich="run"] .at-ico{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26);
}

/* ---------- Minimal: leiser, nach der Durchsicht des UX-Designers (Fassung 2026-10-16-10) ----------
   Ein Foto-Verlauf, Schatten nur für Schwebendes (Pille, Hauptknopf), keine Ränder auf Fotos, kein Textschatten,
   Farbe nur im Orange und bei Workout und Mobility. */
:root[data-layout="new"]{
  --foto-fuss:linear-gradient(180deg, rgba(8,9,11,0) 0%, rgba(8,9,11,.55) 55%, rgba(8,9,11,.80) 100%);
}
:root[data-layout="new"] .training-seite .area-tile.zeile::before,
:root[data-layout="new"] .fav-foto::before,
:root[data-layout="new"] .builder-neu::before{ background:var(--foto-fuss); }
:root[data-layout="new"] .training-seite .area-tile.zeile,
:root[data-layout="new"] .fav-foto,
:root[data-layout="new"] .builder-neu{ border:0; box-shadow:none; }
:root[data-layout="new"] .fav-foto{ border-radius:var(--radius); border-top-left-radius:var(--ecke); }
:root[data-layout="new"] .training-seite .area-tile.zeile{ min-height:112px; }
:root[data-layout="new"] .ff-stern{ color:rgba(255,255,255,.9); }
:root[data-layout="new"] .ff-text,
:root[data-layout="new"] .training-seite .area-tile .at-name,
:root[data-layout="new"] .training-seite .area-tile .at-sub{ text-shadow:none; }
:root[data-layout="new"] .training-seite .area-tile .at-chev{ background:none; width:auto; height:auto; border-radius:0; }

/* Symbolfelder: nur Workout (orange) und Mobility (grün) farbig, die übrigen ein ruhiges neutrales Feld */
:root[data-layout="new"] .training-seite .area-tile .at-ico{ border:0; background:rgba(255,255,255,.14); box-shadow:none; }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="katalog"] .at-ico{ background:color-mix(in srgb, #ff5a36 78%, #000); }
:root[data-layout="new"] .training-seite .area-tile[data-bereich="warm"] .at-ico{ background:color-mix(in srgb, #1fa56f 78%, #000); }

/* Heute: Kopf mit zwei Lagen, Kopfsymbole ohne Blur, Woche ohne Glas, nur ein gefüllter Kreis (der Hauptknopf) */
:root[data-layout="new"] .kn-tint{ background:linear-gradient(to top left, rgba(255,90,54,.45) 0%, rgba(255,90,54,0) 55%); }
:root[data-layout="new"] .kopf-neu::before{ background:radial-gradient(ellipse 85% 62% at 0% 0%, rgba(6,7,9,.66) 0%, rgba(6,7,9,.40) 40%, rgba(6,7,9,0) 78%); }
:root[data-layout="new"] .kopf-neu::after{ background:linear-gradient(180deg, rgba(8,9,11,0) 40%, rgba(8,9,11,.6) 78%, var(--bg) 100%); }
:root[data-layout="new"] .kn-sym .iconbtn{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(20,22,26,.55); border:0; }
:root[data-layout="new"] .woche-neu .woche{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
:root[data-layout="new"] .gn-main, :root[data-layout="new"] .suchfeld-neu{ box-shadow:none; }
:root[data-layout="new"] .gn-play{ width:auto; height:auto; background:none; color:var(--accent-ink, var(--accent)); font-size:22px; }
:root[data-layout="new"] .builder-neu::after{ inset:0; filter:none; }


/* ---------- Timer-Seite wie im Entwurf: Foto-Kopf, große Abschnittstitel, flache Zeilen mit großem Play-Kreis ---------- */
:root[data-layout="new"] .kopf-bereich{
  position:relative; isolation:isolate; overflow:hidden; margin:0 -16px 6px; min-height:228px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 18px; display:flex; flex-direction:column; justify-content:space-between;
  border-radius:0 0 var(--r-sheet, 28px) var(--r-sheet, 28px); background:var(--surface); color:#fff;
}
:root[data-layout="new"] .kb-bild{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
:root[data-layout="new"] .kopf-bereich::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,11,.25) 0%, rgba(8,9,11,0) 35%, rgba(8,9,11,.72) 100%); }
:root[data-layout="new"] .kb-zeile{ display:flex; justify-content:space-between; }
:root[data-layout="new"] .kb-rund{ width:48px; height:48px; border-radius:50%; background:rgba(20,22,26,.55); color:#fff; border:0; box-shadow:none; }
:root[data-layout="new"] .kb-text{ display:flex; flex-direction:column; gap:4px; }
:root[data-layout="new"] .kb-kicker{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.88); }
:root[data-layout="new"] .kb-text h1{ margin:0; font-size:34px; line-height:1.1; letter-spacing:-.02em; }

:root[data-layout="new"] .timer-panel{ display:flex; flex-direction:column; }
:root[data-layout="new"] .timer-panel .page-hint{ order:99; margin-top:18px; font-size:13px; color:var(--text-dim); }
:root[data-layout="new"] .timer-panel .section-title{
  font-size:22px; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--text); margin:24px 2px 8px;
}
:root[data-layout="new"] .timer-panel .list-item.entry{
  background:none; box-shadow:none; border:0; border-radius:0; border-bottom:1px solid var(--nl-linie); margin:0; padding:12px 2px; gap:14px;
}
:root[data-layout="new"] .timer-panel .list-item.entry:last-of-type{ border-bottom:0; }
:root[data-layout="new"] .timer-panel .playbtn{ width:52px; height:52px; font-size:20px; background:var(--text); color:var(--bg); }
:root[data-layout="new"] .timer-panel [data-playblock]{ width:44px; height:44px; font-size:17px; background:color-mix(in srgb, var(--text) 10%, transparent); color:var(--text); }
:root[data-layout="new"] .timer-panel .name{ font-size:17px; }
:root[data-layout="new"] .timer-panel .fav-empty{ border-radius:var(--radius); border-top-left-radius:var(--ecke); }
:root[data-layout="new"] .kb-rechts{ display:flex; gap:8px; }
:root[data-layout="new"] .kb-rechts .iconbtn:not(.kb-rund), :root[data-layout="new"] .kb-rechts .hint-btn{ width:48px; height:48px; border-radius:50%; background:rgba(20,22,26,.55); color:#fff; border:0; box-shadow:none; }

/* ---------- Reiter als Pille (Summit, Mobility, Workout) wie im Entwurf ---------- */
:root[data-layout="new"] .rz{ gap:2px; padding:4px; margin:12px 0 12px; border:1px solid var(--nl-linie); border-radius:999px;
  background:color-mix(in srgb, var(--text) 5%, transparent); }
:root[data-layout="new"] .rz button{ border-radius:999px; padding:11px 6px; font-size:14.5px; }
:root[data-layout="new"] .rz button.active{ background:color-mix(in srgb, var(--accent) 16%, var(--surface)); color:var(--text); font-weight:700;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
:root[data-layout="new"] .rz button.active::after{ display:none; }
/* Karten dieser Seiten: eine Spur größer gerundet mit der kleinen Ecke, ohne Schatten */
:root[data-layout="new"] .lib-card, :root[data-layout="new"] .list-item.entry.lib-card{ box-shadow:none; }
:root[data-layout="new"] .kopf-bereich ~ .bereich-bild{ display:none; }   /* der Foto-Kopf ersetzt das Bild der Seite */

/* Favoriten auf Heute: etwas kleinere Fotokarten (Rückmeldung) */
:root[data-layout="new"] .fav-foto{ width:132px; height:156px; padding:10px; }
:root[data-layout="new"] .fav-fotos{ gap:10px; }
:root[data-layout="new"] .ff-name{ font-size:15px; -webkit-line-clamp:2; }
:root[data-layout="new"] .ff-sub{ font-size:12px; }
:root[data-layout="new"] .ff-stern{ top:8px; right:8px; width:16px; height:16px; }
:root[data-layout="new"] .ff-stern svg{ width:16px; height:16px; }

/* Heute: Kopf mit Foto etwas niedriger (Rückmeldung) */
:root[data-layout="new"] .kopf-neu{ min-height:228px; padding-bottom:50px; }
:root[data-layout="new"] .kn-gruss b{ font-size:22px; }
:root[data-layout="new"] .woche-neu{ margin-top:-38px; }

/* Meine Woche auf Heute: weniger tief ins Foto hinein, dafür etwas größer */
:root[data-layout="new"] .woche-neu{ margin-top:-18px; }
:root[data-layout="new"] .woche-neu .woche{ padding:16px 18px; gap:14px; }
:root[data-layout="new"] .woche-neu .wo-titel{ font-size:16px; }
:root[data-layout="new"] .woche-neu .wo-summe{ font-size:13.5px; }
:root[data-layout="new"] .woche-neu .wo-tag{ gap:5px; }
:root[data-layout="new"] .woche-neu .wo-tag i{ width:17px; height:17px; }
:root[data-layout="new"] .woche-neu .wo-tag small{ font-size:11.5px; }
:root[data-layout="new"] .woche-neu .wo-tage{ gap:8px; }

/* ---------- Mehr Luft zwischen den Karten (Training) ---------- */
:root[data-layout="new"] .training-seite .area-gruppe{ gap:20px; }

/* ---------- Run-Seite: so ruhig wie im Entwurf - keine Karte um die Zahl, flache Verlaufszeilen ---------- */
:root[data-layout="new"] .run-hero{ background:none; border:0; box-shadow:none; padding:10px 0 6px; margin-bottom:14px; }
:root[data-layout="new"] .run-gross{ margin:6px 0 10px; }
:root[data-layout="new"] .run-item.list-item.entry{
  background:none; box-shadow:none; border:0; border-radius:0; border-bottom:1px solid var(--nl-linie); margin:0; padding:14px 2px;
}
:root[data-layout="new"] .trash-btn{ color:var(--text-dim); }
:root[data-layout="new"] .timer-panel .trash-btn{ color:var(--text-dim); }

/* Heute, Kopf im hellen Modus (Hell oder System bei hellem Gerät): helles Foto statt des dunklen Studios, Schrift dunkel, Verlauf nach unten in die helle Fläche.
   Zwei gleiche Regelsätze, weil „System“ kein data-theme setzt und nur per prefers-color-scheme erkannt wird. */
:root[data-layout="new"] .kn-hell{ display:none; }
:root[data-layout="new"][data-theme="light"] .kn-hell{ display:block; object-position:50% 25%; }
:root[data-layout="new"][data-theme="light"] .kn-bild:not(.kn-hell){ display:none; }
:root[data-layout="new"][data-theme="light"] .kopf-neu{ color:var(--text); }
:root[data-layout="new"][data-theme="light"] .kn-tint{ background:linear-gradient(to top left, rgba(255,90,54,.30) 0%, rgba(255,90,54,0) 52%); }
:root[data-layout="new"][data-theme="light"] .kopf-neu::before{ background:radial-gradient(ellipse 85% 62% at 0% 0%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.3) 42%, rgba(255,255,255,0) 78%), radial-gradient(ellipse 75% 45% at 0% 80%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%); }
:root[data-layout="new"][data-theme="light"] .kopf-neu::after{ background:linear-gradient(180deg, rgba(245,245,242,0) 45%, rgba(245,245,242,.7) 80%, var(--bg) 100%); }
:root[data-layout="new"][data-theme="light"] .marke-neu small,
:root[data-layout="new"][data-theme="light"] .kn-gruss span{ color:var(--text); opacity:.78; }
@media (prefers-color-scheme: light){
  :root[data-layout="new"]:not([data-theme]) .kn-hell{ display:block; object-position:50% 25%; }
  :root[data-layout="new"]:not([data-theme]) .kn-bild:not(.kn-hell){ display:none; }
  :root[data-layout="new"]:not([data-theme]) .kopf-neu{ color:var(--text); }
  :root[data-layout="new"]:not([data-theme]) .kn-tint{ background:linear-gradient(to top left, rgba(255,90,54,.30) 0%, rgba(255,90,54,0) 52%); }
  :root[data-layout="new"]:not([data-theme]) .kopf-neu::before{ background:radial-gradient(ellipse 85% 62% at 0% 0%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.3) 42%, rgba(255,255,255,0) 78%), radial-gradient(ellipse 75% 45% at 0% 80%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%); }
  :root[data-layout="new"]:not([data-theme]) .kopf-neu::after{ background:linear-gradient(180deg, rgba(245,245,242,0) 45%, rgba(245,245,242,.7) 80%, var(--bg) 100%); }
  :root[data-layout="new"]:not([data-theme]) .marke-neu small,
  :root[data-layout="new"]:not([data-theme]) .kn-gruss span{ color:var(--text); opacity:.78; }
}

/* ---------- Hell (2026-10-16): Karten auf Training und Favoriten als helle Karte - Foto oben, unten warm-heller Verlauf, dunkle Schrift;
   dazu helle Fotos aus FOTO_POOL_HELL (js/03-router.js). Baukasten und Titelbilder bleiben unveraendert. "System" hat kein data-theme,
   deshalb steht jede Regel zweimal (data-theme="light" und prefers-color-scheme). Dazu Lesbarkeit im Heute-Kopf. ---------- */:root[data-layout="new"][data-theme="light"] .training-seite .area-tile.zeile::before{ background:linear-gradient(180deg, rgba(255,250,244,0) 18%, rgba(255,250,244,.80) 64%, rgba(255,250,244,.94) 100%); }
:root[data-layout="new"][data-theme="light"] .fav-foto::before{ background:linear-gradient(180deg, rgba(255,250,244,0) 16%, rgba(255,250,244,.88) 56%, rgba(255,250,244,.96) 100%); }
:root[data-layout="new"][data-theme="light"] .training-seite .area-tile .at-name, :root[data-layout="new"][data-theme="light"] .training-seite .area-tile .at-chev, :root[data-layout="new"][data-theme="light"] .ff-name{ color:var(--text); }
:root[data-layout="new"][data-theme="light"] .training-seite .area-tile .at-sub, :root[data-layout="new"][data-theme="light"] .ff-bereich, :root[data-layout="new"][data-theme="light"] .ff-sub{ color:var(--text-dim); }
:root[data-layout="new"][data-theme="light"] .ff-stern{ color:#c98200; }
:root[data-layout="new"][data-theme="light"] .training-seite .area-tile[data-bereich="intervall"] .at-ico,
:root[data-layout="new"][data-theme="light"] .training-seite .area-tile[data-bereich="reps"] .at-ico,
:root[data-layout="new"][data-theme="light"] .training-seite .area-tile[data-bereich="run"] .at-ico{ background:rgba(28,28,30,.1); color:var(--text); }
:root[data-layout="new"][data-theme="light"] .marke-neu b{ color:#df4a22; }
:root[data-layout="new"][data-theme="light"] .kn-sym .iconbtn{ background:rgba(255,255,255,.66); color:var(--text); border-color:rgba(0,0,0,.1); }
:root[data-layout="new"][data-theme="light"] .kn-gruss span, :root[data-layout="new"][data-theme="light"] .kn-gruss b{ text-shadow:0 0 10px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.85); }
@media (prefers-color-scheme: light){
  :root[data-layout="new"]:not([data-theme]) .training-seite .area-tile.zeile::before{ background:linear-gradient(180deg, rgba(255,250,244,0) 18%, rgba(255,250,244,.80) 64%, rgba(255,250,244,.94) 100%); }
  :root[data-layout="new"]:not([data-theme]) .fav-foto::before{ background:linear-gradient(180deg, rgba(255,250,244,0) 16%, rgba(255,250,244,.88) 56%, rgba(255,250,244,.96) 100%); }
  :root[data-layout="new"]:not([data-theme]) .training-seite .area-tile .at-name, :root[data-layout="new"]:not([data-theme]) .training-seite .area-tile .at-chev, :root[data-layout="new"]:not([data-theme]) .ff-name{ color:var(--text); }
  :root[data-layout="new"]:not([data-theme]) .training-seite .area-tile .at-sub, :root[data-layout="new"]:not([data-theme]) .ff-bereich, :root[data-layout="new"]:not([data-theme]) .ff-sub{ color:var(--text-dim); }
  :root[data-layout="new"]:not([data-theme]) .ff-stern{ color:#c98200; }
  :root[data-layout="new"]:not([data-theme]) .training-seite .area-tile[data-bereich="intervall"] .at-ico,
  :root[data-layout="new"]:not([data-theme]) .training-seite .area-tile[data-bereich="reps"] .at-ico,
  :root[data-layout="new"]:not([data-theme]) .training-seite .area-tile[data-bereich="run"] .at-ico{ background:rgba(28,28,30,.1); color:var(--text); }
  :root[data-layout="new"]:not([data-theme]) .marke-neu b{ color:#df4a22; }
  :root[data-layout="new"]:not([data-theme]) .kn-sym .iconbtn{ background:rgba(255,255,255,.66); color:var(--text); border-color:rgba(0,0,0,.1); }
  :root[data-layout="new"]:not([data-theme]) .kn-gruss span, :root[data-layout="new"]:not([data-theme]) .kn-gruss b{ text-shadow:0 0 10px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.85); }
}
/* Meine Woche: der Untertitel darf umbrechen statt mit ... abzuschneiden (auch im Dunkeln) */
:root[data-layout="new"] .woche-neu .wo-summe{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
/* ---------- Untere Leiste fest und deckend (Rückmeldung eines Testers, 2026-10-16): volle Breite am unteren Rand mit eigenem Hintergrund,
   kein Inhalt scheint mehr durch; die Pille und der runde Hauptknopf bleiben, die Seiten haben unten genug Polster (body.mit-tabs #app). ---------- */
:root[data-layout="new"] .tabbar{
  left:0; right:0; transform:none; width:auto; max-width:none; bottom:0;
  padding:10px max(14px, calc((100% - 532px) / 2)) calc(10px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--nl-linie);
}
:root[data-layout="new"] .tabbar .pille{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border-color:var(--border); }
:root[data-layout="new"] body.mit-tabs #app{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); }

/* ---------- Run-Seite (Modern, 2026-10-16): das Läuferfoto liegt geblurrt hinter der ganzen Seite (dunkel: Gegenlicht-Läufer, hell: Waldweg),
   darüber weiße Karten; während des Laufens steht alles in einer weißen Karte. Der Kopf hat kein eigenes Foto mehr. ---------- */
:root[data-layout="new"] .run-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
:root[data-layout="new"] .run-bg i{ position:absolute; inset:-40px; background-size:cover; background-position:50% 45%; filter:blur(20px) saturate(1.3); }
:root[data-layout="new"] .run-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.62), rgba(10,10,12,.42) 45%, rgba(10,10,12,.68)); }
:root[data-layout="new"] .kopf-bereich.klar{ min-height:0; background:none; border-radius:0; padding:calc(env(safe-area-inset-top) + 12px) 16px 10px; gap:14px; }
:root[data-layout="new"] .kopf-bereich.klar::after{ display:none; }
:root[data-layout="new"] .run-hero{ background:var(--surface); border:0; border-radius:var(--radius); border-top-left-radius:var(--ecke); padding:18px 16px 16px; margin-bottom:14px; }
:root[data-layout="new"] .run-item.list-item.entry{ background:var(--surface); border:0; border-radius:16px; margin:0 0 8px; padding:14px; }
:root[data-layout="new"] .run-weiss{ background:var(--surface); border-radius:var(--radius); border-top-left-radius:var(--ecke); padding:18px 14px 12px; margin-bottom:14px; }
:root[data-layout="new"] .run-weiss .run-karte{ background:none; border:0; padding:0; }
:root[data-layout="new"] .run-bg ~ .section-title, :root[data-layout="new"] .run-bg ~ .page-hint{ color:rgba(255,255,255,.88); }:root[data-layout="new"][data-theme="light"] .run-bg::after{ background:linear-gradient(180deg, rgba(245,245,242,.44), rgba(245,245,242,.2) 45%, rgba(245,245,242,.6)); }
:root[data-layout="new"][data-theme="light"] .kopf-bereich.klar{ color:var(--text); }
:root[data-layout="new"][data-theme="light"] .kopf-bereich.klar .kb-kicker{ color:var(--text-dim); }
:root[data-layout="new"][data-theme="light"] .kopf-bereich.klar .kb-rund, :root[data-layout="new"][data-theme="light"] .kopf-bereich.klar .kb-rechts .iconbtn{ background:rgba(255,255,255,.7); color:var(--text); }
:root[data-layout="new"][data-theme="light"] .run-bg ~ .section-title, :root[data-layout="new"][data-theme="light"] .run-bg ~ .page-hint{ color:var(--text); }
@media (prefers-color-scheme: light){
  :root[data-layout="new"]:not([data-theme]) .run-bg::after{ background:linear-gradient(180deg, rgba(245,245,242,.44), rgba(245,245,242,.2) 45%, rgba(245,245,242,.6)); }
  :root[data-layout="new"]:not([data-theme]) .kopf-bereich.klar{ color:var(--text); }
  :root[data-layout="new"]:not([data-theme]) .kopf-bereich.klar .kb-kicker{ color:var(--text-dim); }
  :root[data-layout="new"]:not([data-theme]) .kopf-bereich.klar .kb-rund, :root[data-layout="new"]:not([data-theme]) .kopf-bereich.klar .kb-rechts .iconbtn{ background:rgba(255,255,255,.7); color:var(--text); }
  :root[data-layout="new"]:not([data-theme]) .run-bg ~ .section-title, :root[data-layout="new"]:not([data-theme]) .run-bg ~ .page-hint{ color:var(--text); }
}
/* Während des Laufens im dunklen Modus bleibt die Karte weiß (minimalistisch, gut lesbar im Hellen unterwegs); „Nacht“ bleibt dunkel */
:root[data-layout="new"][data-theme="dark"] .run-weiss{ --text:#1c1c1e; --text-dim:#6c6c70; --surface:#fff; --surface-2:#ececea; --border:#e2e1dd; background:#fff; color:#1c1c1e; }
@media (prefers-color-scheme: dark){
  :root[data-layout="new"]:not([data-theme]) .run-weiss{ --text:#1c1c1e; --text-dim:#6c6c70; --surface:#fff; --surface-2:#ececea; --border:#e2e1dd; background:#fff; color:#1c1c1e; }
}
:root[data-layout="new"] .run-bg ~ .topbar{ background:transparent; box-shadow:none; border:0; }