/* Sommerland-Festival – modern, warm, gut lesbar (Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");

/* =========================================
   Fluid Typography Basis
   (vom Nutzer gewünscht: zentrale CLAMP)
========================================= */
html {
  /* 13px → 17px zwischen 360px und 1440px Viewportbreite */
  font-size: clamp(13px, 1.2vw + 0.5rem, 17px);
}

/* =========================================
   Farb- & Layout-Variablen
========================================= */
:root{
  --bg:    #f7f3f1;   /* cremiger Seitenhintergrund */
  --paper: #ffffff;   /* Karten/Boxen */
  --ink:   #201613;   /* sehr dunkles Braun (Text) */
  --muted: #6b605a;   /* gedämpfter Sekundärtext */
  --terra: #b76f5e;   /* terrakotta (Akzent) */
  --rose:  #d39e8f;   /* warmes Rosé (Hover/Flächen) */
  --amber: #e6a03a;   /* warmes Amber (Fokus/Buttons) */
  --ring:  rgba(183,111,94,.35);
  --radius: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,.06);
  --maxw: 1200px;
}

/* =========================================
   Base / Resets
========================================= */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.7;
}

/* harte Resets gegen "ausgewaschen" durch Fremd-CSS */
html, body, .site, .content, .footer, .hero{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
body::before, body::after{ content: none !important; display: none !important; }

/* Konsistentes [hidden] Verhalten */
[hidden]{ display: none !important; }

.site{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 28px);
}

/* =========================================
   Sticky Header (Logo links, Burger rechts)
   – eigener Hintergrund (var(--bg))
========================================= */
.slf-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
.slf-header-inner{
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 8px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* Logo | Titel | Burger */
  align-items: center;
  gap: 12px;
  min-block-size: 44px;
}

/* Zentrierte Seitenüberschrift im Header */
.slf-header-title{
  text-align: center;
  font-weight: 600;            /* leicht hervorgehoben */
  font-size: 1.25em;           /* minimal größer als Grundgröße */
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px){
  .slf-header-title{ font-size: 1em; }
}


.slf-logo img{
  display: block;
  height: 42px;         /* so klein wie der Burger */
  inline-size: auto;
}

/* Burger – auch am Desktop sichtbar */
.burger{
  display: inline-flex;
  inline-size: 44px;
  block-size: 38px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.burger:focus-visible{
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}
/* schlichte Burger-Bars */
.burger-bars{
  position: relative;
  display: inline-block;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.burger-bars::before,
.burger-bars::after{
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.burger-bars::before{ transform: translateY(-6px); }
.burger-bars::after { transform: translateY( 6px); }

/* Panel direkt unter dem Header – schlichtes Listenlayout */
.nav-panel{
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 6px 16px 10px;
  background: var(--paper);              /* Panel behält eigenen Hintergrund */
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.06);
  border-top: 0;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* Einspaltige Liste ohne Rahmen/Chips */
.nav-panel ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-panel li{
  margin: 0;
  padding: 0;
}

/* Reine Textzeile pro Link */
.nav-panel li > a{
  display: block;                        /* volle Breite anklickbar */
  padding: 8px 2px;
  text-decoration: none;
  color: var(--ink);
  border: 0;
  background: transparent;
}

/* Hover/Active: nur Textbetonung */
.nav-panel li > a:hover{
  text-decoration: underline;
}
.nav-panel li.active > a,
.nav-panel li > a.current{
  font-weight: 700;
  text-decoration: underline;
}

/* Unterpunkte leicht einrücken */
.nav-panel ul ul{
  margin-left: 16px;
  border-left: 2px solid #eee;
  padding-left: 12px;
}

/* Optional: dezente Trennlinien zwischen Punkten */
.nav-panel li + li > a{
  border-top: 1px solid #eee;
}


/* =========================================
   HERO (Startseite)
========================================= */
.hero{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.05);
  background:
    linear-gradient(180deg, rgba(32,22,19,.56), rgba(32,22,19,.25)),
    url("../../userfiles/images/Startbild.jpg") center/cover no-repeat;
  min-height: clamp(280px, 52vh, 520px);
  display: grid;
  place-items: center;
  margin: 6px 0 18px;
}
.hero__inner{
  text-align: center;
  padding: clamp(18px, 4vw, 28px);
  color: #fff;
}
.hero__logo{
  width: clamp(120px, 20vw, 180px);
  height: auto;
  display: inline-block;
  margin-bottom: clamp(10px, 2vw, 14px);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}
.hero__title{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(26px, 5vw, 44px);
  color: #fff;
}
.hero__subtitle{
  margin: 0;
  font-weight: 600;
  font-size: clamp(14px, 2.6vw, 18px);
  color: #fff;
  opacity: .95;
}

/* =========================================
   Inhalt
========================================= */
.content { padding: 24px; }

/* =========================================
   Typografie
========================================= */
h1, h2, h3{
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
h1{
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  margin: 0 0 14px;
}
h2{
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  margin: 22px 0 10px;
}
h3{
  font-size: clamp(1rem, 0.8rem + 1vw, 1.25rem);
  margin: 18px 0 8px;
}
p{ margin: 0 0 14px; }
a{ color: var(--terra); }
a:hover{ color: #a76546; }
ul, ol{ padding-left: 1.2em; }

/* =========================================
   Buttons & Fokus – vereinheitlicht
   (passt zu: slf-btn slf-btn--toolbar + IDs)
========================================= */

/* Basis für alle Buttons */
button,
input[type="submit"],
.btn,
.slf-btn {
  appearance: none;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .05s ease, filter .2s ease;
  font: inherit;
  line-height: 1;
}
button:hover,
input[type="submit"]:hover,
.btn:hover,
.slf-btn:hover { filter: brightness(.95); }
button:active,
input[type="submit"]:active,
.btn:active,
.slf-btn:active { transform: translateY(1px); }

/* einheitlicher Fokus */
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ===== Toolbar-Variante (Filter / Sort / Mein Lineup) ===== */
.slf-btn--toolbar,
#slf-filter-toggle,
#slf-sort-toggle,
#slf-mylineup-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 .9rem;
  line-height: 1;

  gap: .5rem;
  border: 2px solid color-mix(in srgb, var(--terra) 25%, transparent);
  border-radius: var(--radius);
  font-weight: 600;
  background: color-mix(in srgb, var(--rose) 25%, var(--paper));
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  transition:
    transform .06s ease,
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}
.slf-btn--toolbar:hover,
#slf-filter-toggle:hover,
#slf-sort-toggle:hover,
#slf-mylineup-toggle:hover {
  background: color-mix(in srgb, var(--rose) 45%, var(--paper));
  border-color: var(--terra);
  transform: translateY(-1px);
}
.slf-btn--toolbar:active,
#slf-filter-toggle:active,
#slf-sort-toggle:active,
#slf-mylineup-toggle:active {
  transform: translateY(0);
}
.slf-btn--toolbar:focus-visible,
#slf-filter-toggle:focus-visible,
#slf-sort-toggle:focus-visible,
#slf-mylineup-toggle:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--ring);
}

/* Aktive Zustände (per aria-pressed) */
#slf-filter-toggle[aria-pressed="true"] {
  background: var(--terra);
  color: #fff;
  border-color: var(--terra);
}
#slf-sort-toggle[aria-pressed="true"] {
  background: var(--rose);
  color: var(--ink);
  border-color: var(--rose);
}
#slf-mylineup-toggle[aria-pressed="true"] {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}

/* =========================================
   Infobox (statisch)
========================================= */
.infobox{
  margin-top: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(230,160,58,.10), rgba(230,160,58,.05));
  border: 1px solid rgba(230,160,58,.35);
  border-radius: 12px;
  color: #4e4633;
}

/* =========================================
   Footer
========================================= */
.footer{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  margin-top: 22px;
  padding: 14px 16px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.875rem;
}
.footer a{ color: var(--ink); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
.footer .sep{ margin: 0 8px; color: var(--muted); }
.toplink{
  margin-left: 8px; padding: 4px 8px;
  border-radius: 8px; background: rgba(230,160,58,.15);
}

/* =========================================
   Media & Tabellen (Allg.)
========================================= */
.content img{
  max-width:100%; height:auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.content table{
  width:100%; border-collapse: collapse; margin: 14px 0; font-size: 0.9375rem;
}
.content th, .content td{
  padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.content th{
  text-align:left; background: rgba(211,158,143,.14);
}

/* =========================================
   Lineup – Grid & Karten
========================================= */
.slf-grid{
  display:grid;
  grid-template-columns: 1fr; /* überall 1 Spalte */
  gap: 1rem;
}

/* Karte */
.slf-card {
  display: block;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  scroll-margin-top: 80px;
}
.slf-hash-focus { outline: 2px solid rgba(0,0,0,.2); box-shadow: 0 0 0 6px rgba(0,0,0,.08) inset; }

/* Bild als Background */
.slf-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #ddd center/cover no-repeat;
}

/* Body/Textbereich */
.slf-card-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; }
.slf-card-title { margin: .2rem 0 .25rem; font-size: 1.05rem; }
.slf-card-anbieter { margin: .25rem 0 0; color: #444; font-size: .95rem; }

/* Meta-/Badges */
.slf-card-meta { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: .85rem; }
.slf-badge {
  display: inline-block;
  background: #f3f6ff;
  color: #234;
  border: 1px solid #e3e8ff;
  border-radius: 8px;
  padding: .15rem .5rem;
}
a.slf-badge {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
a.slf-badge:hover {
  background: #e6ebff;
  border-color: #c8d4ff;
  text-decoration-style: solid;
}
.slf-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid #e8e1d6; background:#fff8ef; color:#5a4a32;
  padding:.25rem .55rem; border-radius:999px; font-size:.85rem;
}
a.slf-chip {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
a.slf-chip:hover {
  background: #fff0e0;
  border-color: #d8c8b0;
  text-decoration-style: solid;
}
.slf-chip button{ border:0; background:transparent; cursor:pointer; font-size:1rem; line-height:1; }

/* Beschreibung & Details */
.slf-card-desc { margin-top: .5rem; font-size: .95rem; line-height: 1.45; color: #333; }
.slf-card-desc--teaser { margin-top: .5rem; }
.slf-details { margin-top: .25rem; }
.slf-details-summary {
  display: inline-block;
  margin-top: .15rem;
  cursor: pointer;
  user-select: none;
  font-size: .92rem;
  color: #235;
  border-bottom: 1px dashed currentColor;
}
.slf-details[open] .slf-details-summary { border-bottom-style: solid; }

/* default ausblenden, nur bei open zeigen */
.slf-details .slf-details-body{ display: none; }
.slf-details[open] .slf-details-body{ display: block; }

/* Teaser ausblenden, sobald <details open> ist */
.slf-card:has(.slf-details[open]) .slf-card-desc--teaser { display: none; }

/* Desktop: 35/65 */
@media (min-width: 900px) {
  .slf-card {
    display: grid;
    grid-template-columns: 35% 65%;
    column-gap: 1rem;
    align-items: start;
  }
  .slf-card-img {
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 220px;
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    align-self: start;
  }
}

/* Slotliste – saubere Abstände */
.slf-slotlist {
  display: flex;
  flex-direction: column;
  row-gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: inherit;
  line-height: 1.4;
}
.slf-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.4rem;
  line-height: 1.2;
}
.slf-slot .slf-badge,
.slf-slot .slf-chip {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin: 0;
  font-size: 0.9em;
  padding: 0.2em 0.6em;
}
.slf-slot-title {
  font-weight: 500;
  flex-basis: 100%;
  margin-bottom: 0.15rem;
}
.slf-slot-title .slf-slot-cat {
  font-weight: 400;
  color: #666;
  font-size: 0.9em;
}
a.slf-slot-cat {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .15s;
}
a.slf-slot-cat:hover {
  color: #333;
  text-decoration-style: solid;
}

/* Dark Mode neutralisieren – Karten/Chips hell lassen */
@media (prefers-color-scheme: dark) {
  .slf-card { background: var(--paper) !important; color: var(--ink) !important; box-shadow: var(--shadow) !important; border-color: rgba(0,0,0,.06) !important; }
  .slf-card-desc, .slf-details-body, .slf-details-summary { color: var(--ink) !important; }
  .slf-badge, .slf-chip { background: var(--paper) !important; color: var(--ink) !important; border-color: rgba(0,0,0,.06) !important; }
}

/* =========================================
   Lineup – Filter
========================================= */
.slf-filter-header{ display:flex; justify-content:flex-start; align-items:center; gap:.75rem; margin:.5rem 0 1rem; flex-wrap:wrap; }
.slf-filterbar{
  display:flex; flex-wrap:wrap; gap:.75rem 1rem;
  align-items:flex-start; background:#fff; border:1px solid #eee;
  border-radius:1rem; padding:.75rem .9rem; margin:0 0 1rem 0;
  box-shadow:0 4px 10px rgba(0,0,0,.03);
}
.slf-filterbar[hidden]{ display: none !important; }
.slf-filter-group{display:flex; align-items:center; gap:.5rem;}
.slf-filter-label{font-weight:600; font-size:.95rem; color: var(--ink) !important; margin-right:.25rem;}
.slf-filter-buttons{display:flex; gap:.4rem; flex-wrap:wrap; max-width:28rem}
.slf-filter-toggle,
.slf-filter-btn,
.slf-filter-reset{
  color: var(--ink) !important;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: .35rem .7rem;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.2;
}
.slf-filter-btn[aria-pressed="true"]{
  background: #fff4e6;
  border-color: #caa374;
  color: var(--ink) !important;
  font-weight: 600;
}
.slf-active-filters{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 1rem; color: var(--ink); }
.slf-desc-block + .slf-desc-block { margin-top: .75rem; }
.slf-hr { border: 0; border-top: 1px solid #e5e5e5; margin: .75rem 0; }

/* Filter-Chips (scoped) */
.slf-filterbar .slf-chip {
  color: var(--ink);
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: .3rem .7rem;
  cursor: pointer;
  transition: all .15s ease-in-out;
}
.slf-filterbar .slf-chip.is-active {
  background: color-mix(in srgb, var(--ink) 15%, var(--bg));
  color: var(--bg);
  border-color: color-mix(in srgb, var(--ink) 60%, var(--bg));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 20%, transparent);
}
.slf-filterbar .slf-chip:hover {
  background: color-mix(in srgb, var(--ink) 10%, var(--bg));
}

/* =========================================
   UI – Nach oben Button (global)
========================================= */
.slf-to-top{
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, var(--bg));
  background: color-mix(in srgb, var(--ink) 90%, var(--bg));
  color: var(--bg);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
  z-index: 1000;
}
@supports not (color: color-mix(in srgb, #000 10%, #fff)) {
  .slf-to-top{
    border-color: #ddd;
    background: var(--ink);
    color: var(--bg);
  }
}
.slf-to-top.is-visible{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.slf-to-top:hover{ box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.slf-to-top:focus{ outline: 2px solid color-mix(in srgb, var(--ink) 60%, var(--bg)); outline-offset: 2px; }
.slf-to-top svg{ display:block; fill: currentColor; }
@media (max-width: 380px){ .slf-to-top{ width: 44px; height: 44px; } }

/* =========================================
   Lineup-Tabelle
========================================= */
.slf-lineup-tabelle {
  position: relative;
}

.slf-lineup-table .slf-table-wrap {
  margin: 0 0 2.5rem;
  width: 100%;
  max-height: calc(100vh - 200px);  /* Höhe begrenzen für sticky */
  overflow: auto;                    /* beide Richtungen scrollen */
  -webkit-overflow-scrolling: touch;
}

.slf-lineup-table .slf-table {
  width: auto;                      /* mobil: nicht zusammenquetschen */
  min-width: 1800px;                /* bewährte Basisbreite */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #E8E0DB;
}

/* Sticky Header (Orte-Zeile) */
.slf-lineup-table .slf-table thead {
  position: sticky;
  top: 0;
  z-index: 20;
}

.slf-lineup-table .slf-table thead th {
  background: #F5ECE6;
  border-bottom: 2px solid #E8E0DB;
}

/* Sticky erste Spalte (Zeit) */
.slf-lineup-table .slf-table .slf-col-time {
  position: sticky;
  left: 0;
  z-index: 10;
}

/* Ecke oben links: höchster z-index */
.slf-lineup-table .slf-table thead th.slf-col-time {
  z-index: 30;
}

/* Große Screens: auf Containerbreite strecken */
@media (min-width: 1200px) {
  .slf-lineup-table .slf-table-wrap {
    overflow-x: visible;
    overflow-y: auto;
  }
  .slf-lineup-table .slf-table {
    width: 100%;
    min-width: 100%;
  }
}

.slf-lineup-table .slf-table th,
.slf-lineup-table .slf-table td {
  position: relative;
  padding: .25rem .30rem;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #EDE4DE;
  border-bottom: 1px solid #EDE4DE;
}

.slf-lineup-table .slf-table th:last-child,
.slf-lineup-table .slf-table td:last-child {
  border-right: 0;
}

.slf-lineup-table .slf-table .slf-col-time {
  width: 70px;
  white-space: nowrap;
  text-align: left;
  background: #F8F1EC;
  font-weight: 700;
  color: #3a2b25;
}

/* Mindestbreiten für Inhalts-Spalten */
.slf-lineup-table .slf-table th:not(.slf-col-time),
.slf-lineup-table .slf-table td:not(.slf-col-time) {
  min-width: 180px;
}

/* Einheitliche Zeilenhöhe */
.slf-lineup-table .slf-table tbody tr {
  height: 180px;
}

/* Karten innerhalb der Tabelle */
.slf-lineup-table .slf-card-table {
  width: 100%;
  max-width: none;
  min-height: 160px;
  margin: .15rem auto;
  padding: .4rem .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  background: #fff;
  border-radius: .9rem;
  box-sizing: border-box;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

.slf-lineup-table .slf-card-table img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.slf-lineup-table .slf-card-table figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.slf-lineup-table .slf-card-table .slf-anbieter {
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.15;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slf-lineup-table .slf-card-table .slf-titel {
  font-size: .75rem;
  line-height: 1.15;
  color: #4a3b34;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tagesüberschrift - sticky */
.slf-day > h2 {
  position: sticky;
  top: 0;
  z-index: 25;
  margin: 1.5rem 0 .75rem;
  padding: .7rem .8rem;
  font-size: 1.25rem;
  background: #F5ECE6;
  border-radius: .5rem;
}

/* Abstand zwischen mehreren Karten in einer Zelle */
.slf-lineup-table .slf-table td .slf-card-table + .slf-card-table {
  margin-top: .35rem;
}

/* Lineup: Überschrift und Untertitel unter dem Hero ausblenden
      (gilt nur auf der Lineup-Seite) */
body[data-is-lineup="1"] .content h1:first-of-type{ display:none !important; }
body[data-is-lineup="1"] .content h1:first-of-type + p{ display:none !important; }

/* Hinweis-Blase für Lineup */
.slf-notice {
  position: relative;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .875rem 1rem;
  margin: .75rem 0 1rem;
  border: 1px solid #E8E0DB;
  border-radius: .75rem;
  background: #FCFAF9;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.slf-notice .slf-notice-body { line-height: 1.45; }
.slf-notice .slf-notice-close{
  position: absolute; top: .35rem; right: .5rem;
  border: 0; background: transparent; font-size: 1.25rem; line-height: 1;
  cursor: pointer; opacity: .55;
}
.slf-notice .slf-notice-close:hover,
.slf-notice .slf-notice-close:focus { opacity: .9; }
/* Optional: falls deine Lineup-Tabellenklasse existiert */
.slf-lineup-table .slf-notice { margin-bottom: 1rem; }

/* ============================================================
   MEIN LINEUP – Gesamtes Styling (Lineup + Lineup-Tabelle)
   ============================================================ */

/* Gastgeber markieren – optionaler Stil für ausgewählte Karten/Zellen */
.slf-ml-selected {
  outline: 2px solid rgba(0, 0, 0, .08);
  outline-offset: 2px;
}

/* Mini-Toast (Speicherhinweise unten am Bildschirm) */
.slf-ml-toast {
  position: fixed;
  inset-inline: 0;
  bottom: 1.2rem;
  margin: 0 auto;
  padding: .6rem .9rem;
  max-width: 24rem;
  border-radius: .7rem;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: .95rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: all .18s ease;
  z-index: 9999;
}
.slf-ml-toast.show { opacity: 1; transform: translateY(0); }
.slf-ml-toast[data-kind="error"] { background: #a40000; }

/* ============================================================
   LINEUP-KARTEN – Hauptdarstellung
   ============================================================ */

/* Kartenkörper relativ positionieren, damit der Stern absolut platziert werden kann */
.slf-card .slf-card-body { position: relative; }

/* Basisdarstellung des Sterns (☆/★) */
.slf-ml-star {
  position: absolute;
  top: .35rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1.9rem;
  border-radius: 9999px;
  border: 1px solid currentColor;
  font-weight: 700;
  font-size: 1.15rem;
  cursor: pointer;
  background: rgba(255,255,255,.85);
  color: #6b7280; /* graues ungewähltes Symbol */
  opacity: .9;
  user-select: none;
  transition:
    transform .12s ease,
    opacity .12s ease,
    background .12s ease,
    color .12s ease,
    box-shadow .12s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  z-index: 5;
}

/* Hover- und Fokusverhalten */
.slf-ml-star:hover,
.slf-ml-star:focus-visible {
  transform: scale(1.08);
  opacity: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  outline: none;
}

/* Tastaturfokus extra sichtbar */
.slf-ml-star:focus-visible {
  box-shadow:
    0 4px 10px rgba(0,0,0,.12),
    0 0 0 3px rgba(99,102,241,.25);
}

/* Gewählter Zustand (★) */
.slf-ml-star.is-on {
  background: currentColor;
  color: #fff;
  border-color: currentColor;
  box-shadow: 0 3px 10px rgba(217,119,6,.18);
}

/* Farbthema für aktive Sterne */
.slf-ml-star.is-on {
  color: #fff;
  background-color: #d97706; /* warmes Amber */
  border-color: #f59e0b;
}

/* Optional: Karte hervorheben, wenn gewählt */
.slf-card.slf-ml-selected {
  box-shadow: 0 0 0 2px rgba(245,158,11,.25),
              0 6px 18px rgba(0,0,0,.06);
}

/* ============================================================
   LINEUP-TABELLE – kleine Sternsymbole in Tabellenzellen
   ============================================================ */

.slf-card-table { position: relative; }

.slf-card-table > .slf-ml-star {
  position: absolute;
  top: .25rem;
  right: .25rem;
  margin: 0;
  width: 1.5rem;
  height: 1.5rem;
  font-size: .95rem;
  background: rgba(255,255,255,.85);
  color: #6b7280;
}

.slf-card-table > .slf-ml-star.is-on {
  color: #fff;
  background-color: #d97706;
  border-color: #f59e0b;
}

.slf-ml-changes {
  background: #fffbe6;
  border: 1px solid #e8d27a;
  border-radius: .5rem;
  padding: .75rem 1rem;
  margin: 1rem 0 1.25rem;
}
.slf-ml-changes h2 {
  font-size: 1.1rem;
  margin: 0 0 .5rem 0;
}
.slf-ml-changes ul { margin: 0; padding-left: 1.2rem; }

@media print {
  /* Seitenformat */
  @page { size: A4; margin: 14mm 12mm; }

  /* Druck-Überschrift zentriert */
  .content h1 { display: none !important; }
  .content::before {
    content: "Mein Lineup";
    display: block;
    font-weight: 700;
    font-size: 16pt;
    text-align: center;
    margin: 0 0 8mm 0;
  }

  /* Nicht drucken: Hero, Notice, Filter-/Sortierleiste, aktive-Filter-Zeile, Print-Button, Footer, To-Top */
  section.hero, .hero, .hero__inner, .hero * {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .slf-notice,
  .slf-filter-header,
  #slf-filterbar,
  #slf-active-filters,
  #slf-mylineup-toggle,
  #slf-filter-toggle,
  #slf-sort-toggle,
  #slf-filter-reset,
  #slf-print,
  .footer,
  #slf-to-top { display: none !important; }

  /* Content-Rand kompakt */
  .content { margin: 0 !important; padding: 0 !important; }

  /* Nur sichtbare Karten drucken (per JS gesetzte Klasse) */
  article.slf-card.slf-hidden { display: none !important; }

  /* Karten-Layout für den Druck (kompakt) */
  article.slf-card {
    display: block !important;
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    margin: 0 0 8mm 0 !important;
    padding: 0 !important;
    color: #000 !important;
  }

  /* kleines Bild links */
  article.slf-card .slf-card-img {
    width: 24mm; height: 24mm;
    float: left;
    margin: 0 6mm 0 0 !important;
    border-radius: 3mm;
    background-size: cover !important;
    background-position: center !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Textblock rechts neben dem Bild */
  article.slf-card .slf-card-body { overflow: hidden; padding: 0 !important; }

  /* Titel */
  article.slf-card .slf-card-title {
    font-size: 13pt !important;
    line-height: 1.25;
    margin: 0 0 2mm 0 !important;
    font-weight: 700;
  }

  /* Metazeile: Tag, Zeit, Ort, Kategorie */
  article.slf-card .slf-card-meta { margin: 0 !important; font-size: 10pt !important; }
  article.slf-card .slf-badge,
  article.slf-card .slf-chip {
    display: inline-block !important;
    margin: 0 2mm 0 0 !important;
    padding: 0 2mm !important;
    border: 1px solid #000 !important;
    border-radius: 2mm !important;
  }

  /* Trennzeichen/„kleine Striche“ zuverlässig entfernen */
  article.slf-card .slf-card-meta .slf-badge::before,
  article.slf-card .slf-card-meta .slf-badge::after,
  article.slf-card .slf-card-meta .slf-chip::before,
  article.slf-card .slf-card-meta .slf-chip::after,
  article.slf-card .slf-card-meta > * + *::before {
    content: none !important;
    border: 0 !important;
  }

  /* Rest in der Karte ausblenden */
  article.slf-card .slf-card-anbieter,
  article.slf-card details,
  article.slf-card .slf-details,
  article.slf-card .slf-details-body,
  article.slf-card .slf-ml-star { display: none !important; }
}

/* ============================================================
   ACCORDION NAVIGATION (Burger-Men�)
   ============================================================ */

/* Eltern-Eintrag mit Toggle-Button */
.nav-panel .nav-parent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-panel .nav-parent > a {
  flex: 1;
}

/* Toggle-Button f�r Untermen�s */
.nav-panel .nav-toggle {
  background: none;
  border: none;
  color: inherit;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}

.nav-panel .nav-toggle:hover {
  opacity: 1;
}

.nav-panel .nav-toggle[aria-expanded="true"] {
  transform: rotate(0deg);
}

/* Untermen�-Ebenen einr�cken */
.nav-panel ul.nav-level-2 {
  padding-left: 1rem;
  margin: 0.25rem 0;
}

.nav-panel ul.nav-level-3 {
  padding-left: 1.5rem;
  margin: 0.25rem 0;
}

.nav-panel ul.nav-level-2 li,
.nav-panel ul.nav-level-3 li {
  font-size: 0.95em;
}

/* Hidden-Attribut f�r Untermen�s */
.nav-panel ul[hidden] {
  display: none;
}