/* New Healing 2026 — Design-System nach Stitch-Entwurf, als reines CSS (offlinefähig) */

@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/jakarta-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/jakarta-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Material Symbols Outlined';font-style:normal;font-weight:400;font-display:block;
  src:url(fonts/material-symbols.woff2) format('woff2');
}

/* Zwei Themes, eine Token-Liste: unten steht das dunkle als Vorgabe, darunter das helle
 * in einem @media-Block. Ausgewählt wird allein über die System-/Browsereinstellung
 * (prefers-color-scheme) — die App speichert dazu nichts und fragt nichts ab.
 * Regeln weiter unten greifen ausschließlich auf diese Tokens zu; steht dort eine
 * Farbe direkt, gilt sie bewusst in beiden Themes (Sunset-Verlauf, Kartenoverlay). */
:root{
  color-scheme:dark;

  /* Farben */
  --background:#151027;
  --surface-dim:#151027;
  --surface-lowest:#0f0a21;
  --surface-low:#1d182f;
  --surface-container:#211c34;
  --surface-high:#2c273f;
  --surface-highest:#37314a;
  --surface-bright:#3b364f;
  --surface-variant:#37314a;
  --sheet:#2d1b4d;

  --primary:#d3beeb;
  --on-primary:#38294d;
  --on-primary-fixed:#231437;
  --secondary:#ffb77d;
  --on-secondary:#4d2600;
  --secondary-container:#fd8b00;
  --tertiary:#ffb0ca;
  --on-tertiary:#640036;
  --error:#ffb4ab;

  --on-surface:#e7defe;
  --on-surface-variant:#cbc4ce;
  --outline:#958f98;
  --outline-variant:#4a454d;

  /* Der Sunset-Verlauf ist die Marke und bleibt in beiden Themes derselbe.
     Was darauf steht, deshalb auch — sonst stünde im Hellen Weiß auf Pfirsich. */
  --sunset:linear-gradient(135deg,#ffb77d 0%,#ffb0ca 50%,#f3008a 100%);
  --on-sunset:#231437;

  /* Glasflächen, Balken, Trennlinien */
  --glass:rgba(45,27,77,.6);
  --glass-line:rgba(255,255,255,.1);
  --glass-line-strong:rgba(255,255,255,.2);
  --hairline:rgba(255,255,255,.05);
  --bar:rgba(21,16,39,.8);
  --bar-solid:rgba(21,16,39,.94);
  --tabbar:rgba(21,16,39,.85);
  --bg-fade:rgba(21,16,39,.9);
  --sheet-fade:rgba(45,27,77,.9);
  --player-bg:rgba(29,24,47,.96);
  --player-line:rgba(255,255,255,.12);
  --inset:rgba(29,24,47,.5);
  --inset-soft:rgba(29,24,47,.3);
  --inset-line:rgba(255,255,255,.08);
  --chip-glass:rgba(55,49,74,.8);
  --kbody:rgba(33,28,52,.5);
  --kfade:#151027;
  --khead-l1:26%;
  --khead-l2:16%;
  --khead-ico:rgba(255,255,255,.22);

  /* Ränder und Tönungen, die von einer Rollenfarbe abgeleitet sind */
  --field-line:rgba(149,143,152,.3);
  --placeholder:rgba(203,196,206,.5);
  --grip:rgba(203,196,206,.3);
  --primary-line:rgba(211,190,235,.3);
  --tertiary-line:rgba(255,176,202,.5);
  --error-line:rgba(255,180,171,.5);
  --error-soft:rgba(255,180,171,.1);
  --error-glow:rgba(255,180,171,.3);
  --warn-line:rgba(255,183,125,.45);
  --warn-soft:rgba(255,183,125,.1);
  --play-bg:linear-gradient(135deg,rgba(255,183,125,.16),rgba(243,0,138,.16));
  --play-line:rgba(255,176,202,.35);

  /* Schatten und Leuchten */
  --scrim:rgba(0,0,0,.45);
  --shadow-up:0 -8px 32px rgba(0,0,0,.4);
  --shadow-up-lg:0 -10px 40px rgba(0,0,0,.5);
  --glow:0 0 15px rgba(255,20,147,.3);
  --glow-lg:0 0 20px rgba(255,20,147,.3);

  /* Kartenoverlay: liegt auf dem hell gedruckten Lageplan und bleibt deshalb in
     beiden Themes gleich — der Untergrund wird ja nicht dunkel. */
  --map-ink:#151027;
  --map-ink-soft:rgba(21,16,39,.6);
  --map-label:#e7defe;
  --map-label-2:#cbc4ce;
  --map-dot-2:#4a454d;
  --map-accent:#ffb77d;
  --map-dist:#ffb0ca;

  /* Abstände */
  --xs:4px; --sm:8px; --md:16px; --lg:24px; --xl:32px; --xxl:48px;
  --pad:20px; --tap:44px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --player-h:0px;
  --tabbar-h:70px;
}

/* ---------- Helles Theme ---------- */
/* Aus dem dunklen Violett wird ein helles Lila-Weiß; die drei Akzentfarben werden
 * abgedunkelt, weil Pfirsich und Rosa auf Weiß nicht mehr lesbar wären. Die
 * „on-“Farben kippen entsprechend mit. Alles ≥ 4,5:1 gegen seinen Untergrund. */
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;

    --background:#f6f1fb;
    --surface-dim:#e6dced;
    --surface-lowest:#ffffff;
    --surface-low:#f1eaf8;
    --surface-container:#ebe3f3;
    --surface-high:#e3daee;
    --surface-highest:#dad0e8;
    --surface-bright:#fdfaff;
    /* Trägt nur Konturen (Tages- und Bereichsknöpfe). Auf Weiß braucht eine Haarlinie
       mehr Zug als auf Dunkel, sonst franst die Knopfform aus. */
    --surface-variant:#c9bdd8;
    --sheet:#fdf9ff;

    --primary:#573f80;
    --on-primary:#ffffff;
    /* --on-primary-fixed bleibt dunkel: es steht auf dem Sunset-Verlauf. */
    --secondary:#8f4c00;
    --on-secondary:#ffffff;
    --secondary-container:#a25700;
    --tertiary:#a4004f;
    --on-tertiary:#ffffff;
    --error:#ba1a1a;

    --on-surface:#1d1727;
    --on-surface-variant:#4d4557;
    --outline:#7b7387;
    --outline-variant:#bfb4cd;

    --glass:rgba(255,255,255,.72);
    --glass-line:rgba(29,23,39,.1);
    --glass-line-strong:rgba(29,23,39,.22);
    --hairline:rgba(29,23,39,.08);
    --bar:rgba(246,241,251,.82);
    --bar-solid:rgba(246,241,251,.94);
    --tabbar:rgba(255,255,255,.88);
    --bg-fade:rgba(246,241,251,.9);
    --sheet-fade:rgba(253,249,255,.9);
    --player-bg:rgba(253,249,255,.97);
    --player-line:rgba(29,23,39,.12);
    --inset:rgba(235,227,243,.7);
    --inset-soft:rgba(235,227,243,.45);
    --inset-line:rgba(29,23,39,.08);
    --chip-glass:rgba(255,255,255,.82);
    --kbody:rgba(255,255,255,.75);
    --kfade:#fbf7ff;
    /* Heller Farbstreifen statt dunklem — das Wasserzeichen darin wird dafür dunkel,
       sonst verschwände es (Weiß auf Pastell hat praktisch keinen Kontrast). */
    --khead-l1:80%;
    --khead-l2:66%;
    --khead-ico:rgba(29,23,39,.22);

    --field-line:rgba(93,84,105,.35);
    --placeholder:rgba(77,69,87,.6);
    --grip:rgba(77,69,87,.3);
    --primary-line:rgba(87,63,128,.35);
    --tertiary-line:rgba(164,0,79,.45);
    --error-line:rgba(186,26,26,.5);
    --error-soft:rgba(186,26,26,.08);
    --error-glow:rgba(186,26,26,.18);
    --warn-line:rgba(143,76,0,.45);
    --warn-soft:rgba(143,76,0,.08);
    --play-bg:linear-gradient(135deg,rgba(255,183,125,.3),rgba(243,0,138,.12));
    --play-line:rgba(164,0,79,.28);

    --scrim:rgba(29,23,39,.32);
    --shadow-up:0 -8px 32px rgba(45,27,77,.14);
    --shadow-up-lg:0 -10px 40px rgba(45,27,77,.2);
    --glow:0 0 15px rgba(243,0,138,.22);
    --glow-lg:0 0 20px rgba(243,0,138,.22);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--background);
  color:var(--on-surface);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:24px;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top:calc(64px + var(--safe-t));
  padding-bottom:calc(var(--tabbar-h) + var(--player-h) + 16px);
  overscroll-behavior-y:contain;
}
button,input{font-family:inherit;color:inherit;font-size:inherit}
a{color:var(--tertiary)}

/* ---------- Typo-Skala ---------- */
.t-headline{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.01em}
.t-title{font-size:20px;line-height:28px;font-weight:600}
.t-body{font-size:16px;line-height:24px}
.t-small{font-size:14px;line-height:20px}
.t-caps{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.t-time{font-size:18px;line-height:24px;font-weight:500;letter-spacing:.05em;font-variant-numeric:tabular-nums}

/* ---------- Bausteine ---------- */
.glass{
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-line);
}
.mso{
  font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;
  font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;user-select:none;
}
.mso.fill{font-variation-settings:'FILL' 1}
.mso.s16{font-size:16px}
.mso.s18{font-size:18px}
.mso.s20{font-size:20px}

/* ---------- Top-Bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;height:calc(64px + var(--safe-t));
  padding:var(--safe-t) var(--pad) 0;
  background:var(--bar);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--glass-line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sm);
}
.topbar .brand{
  flex:1;text-align:center;font-size:19px;line-height:28px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;
  background:linear-gradient(90deg,var(--secondary),var(--tertiary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.iconbtn{
  width:var(--tap);height:var(--tap);flex:none;display:grid;place-items:center;
  background:none;border:0;color:var(--primary);cursor:pointer;border-radius:999px;
}
.iconbtn.muted{color:var(--on-surface-variant)}
.iconbtn:active{transform:scale(.95)}

.searchbar{padding:0 var(--pad) var(--sm);position:relative}
.searchbar .mso{position:absolute;left:calc(var(--pad) + 14px);top:12px;color:var(--on-surface-variant);pointer-events:none}
.searchbar input{
  width:100%;height:48px;padding:0 var(--md) 0 48px;
  background:var(--surface-low);border:1px solid var(--field-line);border-radius:999px;
  color:var(--on-surface);outline:none;
}
.searchbar input:focus{border-color:var(--secondary)}
.searchbar input::placeholder{color:var(--placeholder)}

/* ---------- Layout ---------- */
main{padding:var(--md) var(--pad) 0;max-width:760px;margin:0 auto}
.page-h{font-size:28px;line-height:36px;font-weight:700;color:var(--primary);margin:0 0 var(--lg);letter-spacing:-.02em}

/* ---------- Tagesauswahl ---------- */
/* Tagesleiste bleibt direkt unter der Top-Bar stehen, nur der Inhalt darunter scrollt */
.days{
  position:sticky;top:calc(64px + var(--safe-t));z-index:35;
  display:flex;gap:var(--sm);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  margin:calc(-1 * var(--md)) calc(-1 * var(--pad)) var(--md);
  padding:var(--sm) var(--pad);
  background:var(--bar-solid);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--glass-line);
}
.days::-webkit-scrollbar{display:none}
.day{
  scroll-snap-align:start;flex:0 0 auto;width:60px;height:72px;border-radius:999px;
  border:1px solid var(--surface-variant);background:none;color:var(--on-surface-variant);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:pointer;position:relative;
}
.day .d{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.day .n{font-size:16px;line-height:24px}
.day.on{background:var(--sunset);border-color:transparent;color:var(--on-sunset);box-shadow:var(--glow)}
.day.on .n{font-weight:700}
.day .dot{
  position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;
  background:var(--tertiary);color:var(--on-tertiary);border:2px solid var(--background);
  border-radius:999px;font-size:10px;line-height:14px;font-weight:700;
}

/* ---------- Filter ---------- */
.chiprow{display:flex;gap:var(--sm);overflow-x:auto;padding-bottom:var(--xs);scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow.areas{margin-bottom:var(--sm)}
.chiprow.toggles{margin-bottom:var(--lg)}
.achip{
  flex:0 0 auto;height:var(--tap);padding:0 var(--md);border-radius:999px;
  border:1px solid var(--surface-variant);background:none;color:var(--on-surface-variant);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;cursor:pointer;white-space:nowrap;
}
.achip.on{background:var(--secondary);border-color:transparent;color:var(--on-secondary);box-shadow:var(--glow)}
.tchip{
  flex:0 0 auto;height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--primary-line);background:none;color:var(--primary);
  font-size:14px;line-height:20px;display:flex;align-items:center;gap:var(--xs);
  cursor:pointer;white-space:nowrap;
}
.tchip.on{background:var(--primary);color:var(--on-primary);border-color:transparent}

/* ---------- Timeline ---------- */
.timeline{position:relative}
.nowline{position:absolute;left:0;right:0;display:flex;align-items:center;z-index:10;pointer-events:none}
.nowline b{width:50px;flex:none;text-align:right;padding-right:var(--sm);color:var(--tertiary);font-size:12px;font-weight:700;letter-spacing:.1em}
.nowline i{flex:1;height:2px;background:var(--tertiary);box-shadow:0 0 8px var(--tertiary)}

.slot{display:flex;gap:var(--md);margin-bottom:var(--lg)}
.slot-time{width:50px;flex:none;text-align:right;padding-top:var(--md);
  font-size:18px;line-height:24px;font-weight:500;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;color:var(--on-surface-variant)}
.slot.past .slot-time{opacity:.5}
.slot-items{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sm)}

/* ---------- Event-Karte ---------- */
.card{
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-line);border-radius:16px;padding:var(--md);
  position:relative;overflow:hidden;cursor:pointer;text-align:left;width:100%;display:block;
}
.card:active{border-color:var(--glass-line-strong)}
.card .accent{position:absolute;top:0;left:0;height:3px;width:100%;background:var(--sunset)}
.card.marker{opacity:.55}
.card.marker .accent{background:var(--outline-variant)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sm)}
.card h3{margin:0 0 var(--xs);font-size:20px;line-height:28px;font-weight:600;color:var(--on-surface)}
.card .host{margin:0;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.star{
  flex:none;width:32px;height:32px;border-radius:999px;border:0;cursor:pointer;
  background:var(--surface-container);color:var(--on-surface-variant);
  display:grid;place-items:center;
}
.star.on{color:var(--tertiary)}
.pills{display:flex;flex-wrap:wrap;gap:var(--xs);align-items:center;margin-top:var(--md)}
.pill{
  display:inline-flex;align-items:center;padding:3px var(--sm);border-radius:999px;
  background:var(--surface-high);color:var(--on-surface-variant);
  font-size:10px;line-height:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.pill.venue{color:var(--primary)}
.pill.note{text-transform:none;letter-spacing:0;font-weight:400;font-size:11px}
.flagicon{color:var(--secondary)}
.flagicon.pay{color:var(--error)}
.flagicon.spice{color:var(--tertiary)}

/* Konflikt */
.card.clash{border-color:var(--error-line);box-shadow:0 0 15px var(--error-glow)}
.card.clash .accent{background:var(--error)}
.slot.clash .slot-time{color:var(--error)}
.clashnote{
  display:flex;align-items:flex-start;gap:var(--xs);margin-top:var(--sm);
  background:var(--error-soft);color:var(--error);
  padding:4px var(--sm);border-radius:8px;font-size:14px;line-height:20px;
}

/* Zu knapper Fußweg: gelb statt rot — es passt zeitlich, nur eben nicht zu Fuß. */
.card.tight{border-color:var(--warn-line)}
.card.tight .accent{background:var(--secondary)}
.slot.tight .slot-time{color:var(--secondary)}
.walknote{
  display:flex;align-items:flex-start;gap:var(--xs);margin-top:var(--sm);
  background:var(--warn-soft);color:var(--secondary);
  padding:4px var(--sm);border-radius:8px;font-size:14px;line-height:20px;
}

/* ---------- Karte ---------- */
.maphead{display:flex;align-items:center;justify-content:space-between;gap:var(--sm)}
.maphead .page-h{margin:0}
.mapbtn{
  flex:none;height:44px;padding:0 var(--md);border-radius:12px;cursor:pointer;
  background:var(--surface-highest);border:1px solid var(--outline-variant);
  color:var(--primary);font-family:inherit;font-size:14px;font-weight:600;white-space:nowrap;
}
.mapbtn:active{opacity:.8}
.mapwrap{
  margin:var(--md) calc(-1 * var(--pad)) 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mapwrap::-webkit-scrollbar{display:none}
.mapwrap svg{display:block;width:100%;height:auto}
.mapwrap.zoom svg{width:210%;max-width:none}

/* Untergrund ist der gedruckte Lageplan — ein helles Bild. Punkte, Linien und
   Beschriftungen tragen deshalb alle einen dunklen Rand, sonst verschwinden sie darin.
   Aus demselben Grund folgt das Overlay nicht dem Theme, sondern hält sich an die
   eigenen --map-*-Tokens: der Untergrund wird im hellen Theme ja nicht anders. */
.mapwrap svg image{filter:saturate(.92)}

.m{cursor:pointer}
.m .hit{fill:transparent}
.m .dot{fill:hsl(var(--mh,265) 62% 62%);stroke:var(--map-ink);stroke-width:3}
.m-s .dot{fill:var(--map-dot-2);stroke-width:2}
.m text{
  fill:var(--map-label);font-size:27px;font-weight:600;
  paint-order:stroke;stroke:var(--map-ink);stroke-width:6px;stroke-linejoin:round;
}
.m-s text{fill:var(--map-label-2);font-size:22px;font-weight:400}
.m.off .dot{fill:none;stroke:hsl(var(--mh,265) 40% 55%);stroke-width:4}
.m.off text{opacity:.6}
.m.on .dot{fill:var(--map-accent)}
.m.on text{fill:var(--map-accent)}
.m .ring{fill:none;stroke:var(--map-accent);stroke-width:3;opacity:.55}
.dl{stroke:var(--map-ink-soft);stroke-width:3;stroke-dasharray:9 9}
.dm{
  fill:var(--map-dist);font-size:25px;font-weight:700;text-anchor:middle;
  paint-order:stroke;stroke:var(--map-ink);stroke-width:7px;stroke-linejoin:round;
}

.maphint{margin:var(--md) 0 0;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.maphint b{color:var(--secondary)}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--tertiary);
  font-size:14px;text-decoration:underline;font-family:inherit}

/* Fußwegliste im Sheet */
.waylist{list-style:none;margin:0;padding:0}
.waylist li{display:flex;align-items:flex-start;gap:var(--md);margin-bottom:12px}
.waylist .mso{color:var(--primary);margin-top:2px;flex:none}
.waylist b{display:block;font-size:16px;line-height:24px;font-weight:500;color:var(--on-surface)}
.waylist span{font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.waylist li.snug .mso,.waylist li.snug b{color:var(--secondary)}
.metabtn{
  margin-left:var(--sm);background:none;border:0;padding:0;cursor:pointer;
  color:var(--tertiary);font-size:13px;text-decoration:underline;font-family:inherit;
}

/* ---------- Mein Plan ---------- */
.summary{
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-line);border-radius:16px;padding:var(--lg);margin-bottom:var(--lg);
}
.summary h2{margin:0 0 var(--sm);font-size:28px;line-height:36px;font-weight:700;color:var(--primary);letter-spacing:-.02em}
.summary p{margin:0;font-size:20px;line-height:28px;font-weight:600;color:var(--on-surface)}
.summary .clash{color:var(--error);display:flex;align-items:center;gap:var(--xs);margin-top:var(--sm);font-size:14px;font-weight:400;line-height:20px}
.summary .fine{color:var(--secondary);display:flex;align-items:center;gap:var(--xs);margin-top:var(--sm);font-size:14px;font-weight:400;line-height:20px}
.summary .snug{color:var(--secondary);display:flex;align-items:center;gap:var(--xs);margin-top:var(--xs);font-size:14px;font-weight:400;line-height:20px;opacity:.9}
.planjump{display:flex;gap:var(--sm);overflow-x:auto;margin-top:var(--md);padding-bottom:var(--sm);scrollbar-width:none}
.planjump::-webkit-scrollbar{display:none}
.jchip{
  flex:0 0 auto;min-height:var(--tap);padding:0 var(--md);border-radius:999px;cursor:pointer;
  border:1px solid var(--outline);background:none;color:var(--on-surface-variant);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;
}
.jchip.on{border-color:var(--secondary);color:var(--secondary)}

.actions{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + var(--player-h));z-index:40;
  padding:var(--md) var(--pad);pointer-events:none;
  background:linear-gradient(to top,var(--background) 40%,var(--bg-fade) 70%,transparent);
}
.actions .inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sm)}
.btn{
  pointer-events:auto;width:100%;height:56px;border-radius:999px;border:0;cursor:pointer;
  background:var(--sunset);color:var(--on-primary-fixed);
  font-size:20px;line-height:28px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:var(--sm);
  box-shadow:var(--glow-lg);
}
.btn.ghost{background:none;border:1px solid var(--primary);color:var(--primary);box-shadow:none;font-size:16px}
.btn:active{opacity:.9}

/* ---------- Wissen ---------- */
.seg{
  display:flex;padding:4px;background:var(--surface-high);border-radius:999px;
  max-width:380px;margin:0 auto var(--lg);
}
.seg button{
  flex:1;padding:9px var(--md);border-radius:999px;border:0;cursor:pointer;
  background:none;color:var(--on-surface-variant);font-size:14px;font-weight:600;
}
.seg button.on{background:var(--secondary-container);color:var(--on-secondary)}

.kgrid{display:grid;grid-template-columns:1fr;gap:var(--md)}
.kcard{
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-line);border-radius:16px;overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;text-align:left;width:100%;padding:0;
}
.kcard:active{border-color:var(--tertiary-line)}
.khead{
  height:96px;position:relative;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,hsl(var(--kh,280) 55% var(--khead-l1)),hsl(var(--kh,280) 45% var(--khead-l2)));
}
.khead .mso{font-size:56px;color:var(--khead-ico)}
.khead:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--kfade),transparent 70%)}
.kcat{
  position:absolute;top:var(--sm);right:var(--sm);z-index:2;
  background:var(--chip-glass);backdrop-filter:blur(8px);
  border:1px solid var(--glass-line);border-radius:999px;padding:4px 12px;
  color:var(--secondary);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.kbody{padding:var(--md);background:var(--kbody);flex:1;display:flex;flex-direction:column}
.kbody h3{margin:0 0 var(--xs);font-size:20px;line-height:28px;font-weight:600;color:var(--on-surface)}
.kbody p{margin:0 0 var(--md);font-size:14px;line-height:20px;color:var(--on-surface-variant);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kmore{display:flex;align-items:center;gap:var(--sm);margin-top:auto;color:var(--tertiary);opacity:.75;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Info ---------- */
.info{
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-line);border-radius:16px;padding:var(--lg);
}
.info h2{margin:0 0 var(--sm);font-size:28px;line-height:36px;font-weight:700;color:var(--primary);letter-spacing:-.02em}
.info h3{margin:var(--xl) 0 var(--sm);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tertiary);border-bottom:1px solid var(--hairline);padding-bottom:var(--xs)}
.info p{margin:0 0 var(--sm);font-size:16px;line-height:24px;color:var(--on-surface-variant)}
.info ul{list-style:none;padding:0;margin:0}
.info li{display:flex;align-items:flex-start;gap:var(--sm);padding:6px 0;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.info li b{color:var(--on-surface);font-weight:600}
code{background:var(--surface-high);padding:2px 6px;border-radius:6px;font-size:13px}

/* ---------- Installieren ---------- */
.installbtn{
  width:100%;height:52px;border-radius:999px;border:0;cursor:pointer;margin:var(--sm) 0 var(--md);
  background:var(--sunset);color:var(--on-primary-fixed);
  font-size:16px;font-weight:700;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:var(--sm);
  box-shadow:var(--glow-lg);
}
.installsteps{list-style:none;padding:0;margin:var(--sm) 0 0}
.installsteps li{
  display:flex;gap:var(--sm);align-items:flex-start;padding:5px 0;
  font-size:14px;line-height:20px;color:var(--on-surface-variant);
}
.installsteps .num{
  flex:none;width:20px;height:20px;border-radius:999px;background:var(--surface-highest);
  color:var(--secondary);font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px;
}
.installdone{
  display:flex;align-items:center;gap:var(--sm);color:var(--secondary);
  font-size:14px;line-height:20px;
}

/* ---------- App-weiter Player ---------- */
/* z-index über dem Sheet (60), damit der Player auch bei offenem Detail-Fenster sichtbar bleibt */
.player{
  position:fixed;left:0;right:0;bottom:var(--tabbar-h);z-index:70;
  background:var(--player-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--player-line);
  box-shadow:var(--shadow-up);
}
.player-bar{display:flex;align-items:center;gap:var(--sm);padding:var(--sm) var(--sm) var(--sm) var(--xs)}
.pl-btn{
  width:40px;height:40px;flex:none;border:0;border-radius:999px;cursor:pointer;
  background:none;color:var(--on-surface-variant);display:grid;place-items:center;
}
.player.open .pl-btn:first-child{color:var(--secondary)}
.pl-meta{flex:1;min-width:0;line-height:1.25}
.pl-meta b{
  display:block;font-size:14px;font-weight:700;color:var(--on-surface);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-meta span{
  display:block;font-size:12px;color:var(--on-surface-variant);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Eingeklappt: Iframe bleibt im Renderbaum (Höhe 0), damit der Ton weiterläuft. */
.player-frame{height:0;overflow:hidden;transition:height .22s ease}
.player.open .player-frame{height:auto}
.player-frame iframe{display:block;width:100%;border:0;background:#000}
/* Auf breiten Schirmen waere 16:9 ueber die volle Breite hoeher als das Fenster — die
   Leiste mit dem Schliessen-Knopf wanderte oben aus dem Bild. Deshalb die Videohoehe
   deckeln und das Bild mittig setzen; auf dem Handy greift weiterhin die volle Breite. */
.player.open .player-frame.yt iframe{
  aspect-ratio:16/9;height:min(56.25vw,46vh);width:auto;max-width:100%;margin:0 auto;
}
.player.open .player-frame.sc iframe{height:166px}
.player-frame.yt iframe{aspect-ratio:16/9}
.player-frame.sc iframe{height:166px}
.pl-off{padding:var(--md);font-size:14px;color:var(--on-surface-variant)}

/* Hörproben im Sheet */
.listen{display:flex;flex-direction:column;gap:var(--sm)}
.listen button,.listen a{
  display:flex;align-items:center;gap:var(--sm);text-decoration:none;
  background:var(--inset);border:1px solid var(--inset-line);border-radius:12px;
  padding:12px var(--md);color:var(--on-surface);cursor:pointer;font-size:14px;text-align:left;
  font-family:inherit;
}
.listen .play{
  background:var(--play-bg);
  border-color:var(--play-line);
}
.listen .play .mso{color:var(--tertiary)}
.listen .mso{color:var(--on-surface-variant);flex:none}
.listen b{display:block;font-weight:600}
.listen small{display:block;color:var(--on-surface-variant);font-size:12px;margin-top:1px}
.listen .grow{flex:1;min-width:0}

/* ---------- Bottom-Nav ---------- */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  border-radius:32px 32px 0 0;
  background:var(--tabbar);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--hairline);box-shadow:var(--shadow-up);
  display:flex;justify-content:space-around;align-items:center;
  padding:var(--sm) var(--sm) calc(var(--md) + var(--safe-b));
}
.tab{
  min-width:var(--tap);min-height:var(--tap);background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--on-surface-variant);position:relative;padding:0 2px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
/* Fünf Tabs statt vier: auf schmalen Geräten die Beschriftung enger setzen. */
@media(max-width:400px){.tab{font-size:11px;letter-spacing:.03em}}
/* „map“ fehlt im Icon-Subset — der Karten-Tab bringt sein Icon selbst mit. */
.tab .tico{width:24px;height:24px;fill:currentColor;display:block}
.tab.on{color:var(--secondary);transform:scale(.94)}
.tab.on:after{
  content:'';position:absolute;bottom:-4px;width:4px;height:4px;border-radius:999px;
  background:var(--secondary);box-shadow:0 0 10px var(--secondary-container);
}
.tab .cnt{
  position:absolute;top:0;left:50%;margin-left:8px;background:var(--tertiary);color:var(--on-tertiary);
  border-radius:999px;min-width:18px;padding:0 5px;font-size:10px;line-height:16px;letter-spacing:0;
}

/* ---------- Bottom-Sheet ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
/* Bei offenem Sheet ist die Tab-Bar verdeckt — der Player rutscht ganz nach unten,
   und das Sheet endet oberhalb davon, damit sich beide nicht überlagern. */
body.sheet-open .player{bottom:var(--safe-b)}
body.sheet-open.player-on .sheet{bottom:calc(var(--player-h) + var(--safe-b))}
.sheet-bd{position:absolute;inset:0;background:var(--scrim)}
.sheet-panel{
  position:relative;width:100%;height:85vh;max-height:100%;display:flex;flex-direction:column;
  background:var(--sheet);border-top:1px solid var(--glass-line);
  border-radius:32px 32px 0 0;box-shadow:var(--shadow-up-lg);
  animation:sheetup .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetup{from{transform:translateY(6%);opacity:.5}to{transform:none;opacity:1}}
.sheet-grip{
  flex:none;display:flex;justify-content:center;align-items:center;
  padding:var(--sm) 0 var(--md);position:relative;
}
.sheet-grip i{width:48px;height:6px;border-radius:999px;background:var(--grip)}
.sheet-x{
  position:absolute;right:var(--pad);top:var(--sm);width:var(--tap);height:var(--tap);
  border-radius:999px;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--inset);backdrop-filter:blur(8px);color:var(--on-surface);
}
.sheet-scroll{flex:1;overflow-y:auto;padding:0 var(--pad) 120px;-webkit-overflow-scrolling:touch}
.sh-h1{margin:0 0 var(--xs);font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.02em;color:var(--on-surface)}
.sh-host{margin:0 0 var(--xl);font-size:20px;line-height:28px;font-weight:600;color:var(--tertiary)}
.metarow{display:flex;flex-wrap:wrap;gap:var(--sm);margin-bottom:var(--xl)}
.meta{
  display:flex;align-items:center;gap:var(--xs);padding:0 var(--md);height:var(--tap);
  border-radius:999px;border:1px solid var(--outline-variant);
  background:var(--inset-soft);backdrop-filter:blur(6px);
  font-size:14px;line-height:20px;color:var(--on-surface);
}
.meta .mso{color:var(--primary)}
.meta.t .mso{color:var(--tertiary)}
.meta.s .mso{color:var(--secondary)}
.meta.d{color:var(--on-surface-variant)}
.meta.d .mso{color:var(--on-surface-variant)}
.block{margin-bottom:var(--xl)}
.block h2{
  margin:0 0 var(--sm);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tertiary);border-bottom:1px solid var(--hairline);padding-bottom:var(--xs);
}
.block p{margin:0 0 var(--md);font-size:16px;line-height:26px;color:var(--on-surface-variant)}
.block p:last-child{margin-bottom:0}
.block .boxed{
  background:var(--inset);border:1px solid var(--hairline);
  border-radius:12px;padding:var(--md);
}
.block .boxed p{font-size:14px;line-height:22px;margin:0}
.hintlist{list-style:none;margin:0;padding:0}
.hintlist li{display:flex;align-items:flex-start;gap:var(--md);margin-bottom:var(--md)}
.hintlist .mso{color:var(--secondary);margin-top:2px;flex:none}
.hintlist b{display:block;font-size:16px;line-height:24px;font-weight:500;color:var(--on-surface)}
.hintlist span{font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.alsolist{display:flex;flex-direction:column;gap:var(--sm)}
.alsolist button{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sm);
  background:var(--inset);border:1px solid var(--hairline);border-radius:12px;
  padding:12px var(--md);color:var(--on-surface);cursor:pointer;font-size:14px;text-align:left;
}
.alsolist b{color:var(--secondary);font-variant-numeric:tabular-nums;font-weight:700}
.sheet-cta{
  position:absolute;left:0;right:0;bottom:0;z-index:5;padding:var(--pad);
  background:linear-gradient(to top,var(--sheet) 55%,var(--sheet-fade) 75%,transparent);
  pointer-events:none;
}

@media(min-width:720px){
  .kgrid{grid-template-columns:1fr 1fr}
  .sheet{align-items:center;justify-content:center}
  .sheet-panel{max-width:620px;height:auto;max-height:86vh;border-radius:24px}
  .sheet-cta{position:sticky;border-radius:0 0 24px 24px}
}