/* ========================================================= Nerdschmie.de – Custom Styles (scoped via body.nsd) ========================================================= */ /* ---------- Design Tokens ---------- */ body.nsd{ --nsd-bg:#0A0A0A; --nsd-panel:#1A1A1A; --nsd-panel-2:#2A2A2A; --nsd-text:#F0F0F0; --nsd-muted:#9aa7b3; --nsd-accent:#00FF96; --nsd-danger:#FF4A4A; --nsd-head:#0aa36a; --nsd-bdr-strong:rgba(0,255,150,.40); --nsd-bdr:rgba(0,255,150,.30); /* <- grüne Linie / Borders */ --nsd-bdr-soft:rgba(0,255,150,.20); --nsd-row-even:rgba(255,255,255,.04); --nsd-row-hover:rgba(0,255,150,.08); --nsd-maxw:1100px; --nsd-padx:1rem; background:var(--nsd-bg); color:var(--nsd-text); } /* ---------- Wrapper ---------- */ body.nsd .container, body.nsd .grav-content, body.nsd .content, body.nsd .content-wrapper{ max-width:var(--nsd-maxw); margin:0 auto; padding:0 var(--nsd-padx); background:transparent; } /* ---------- Typografie ---------- */ body.nsd h1,body.nsd h2,body.nsd h3,body.nsd h4,body.nsd h5,body.nsd h6{ color:var(--nsd-head); margin:.9rem 0 .6rem; border:0; line-height:1.2; } body.nsd p, body.nsd li{ line-height:1.55; } body.nsd hr{ border:0; border-top:1px solid var(--nsd-bdr); margin:1rem 0; } /* Links */ body.nsd a, body.nsd a:visited{ color:var(--nsd-accent); text-decoration:none; border-bottom:1px solid rgba(0,255,150,.35); } body.nsd a:hover{ border-bottom-color:var(--nsd-accent); } /* Form Controls */ body.nsd input[type="text"], body.nsd input[type="search"], body.nsd select, body.nsd textarea{ background:var(--nsd-panel-2); color:var(--nsd-text); border:1px solid var(--nsd-bdr-strong); border-radius:6px; padding:.45rem .6rem; }

/* =========================================================
   Header / Navigation (Quark) – Logo bündig mit Content
   ========================================================= */

/* Feintuning-Variablen nur für das Logo */
body.nsd{
  --nsd-logo-gap: .55rem;   /* Abstand Icon ↔ Text */
  --nsd-logo-size: 36px;    /* Iconhöhe Desktop */
}
@media (max-width:960px){
  body.nsd{ --nsd-logo-size: 24px; }
}

/* Header mit grüner Trennlinie */
body.nsd #header.section{
  background:var(--nsd-panel) !important;
  border-bottom:1px solid var(--nsd-bdr) !important;
  box-shadow:none !important;
}

/* „zum Inhalt springen“ entfernen */
body.nsd .a11y.skip{ display:none !important; }

/* Doppel-Linien im Content vermeiden */
body.nsd #body-wrapper .container > hr:first-child,
body.nsd #body-wrapper .container > .divider:first-child,
body.nsd .ns-content > hr:first-child,
body.nsd .ns-content > .divider:first-child{ display:none !important; }

/* --- NAVBAR-POLSTER LINKS ENTFERNEN (wichtig für Ausrichtung) --- */
body.nsd #header .navbar{ padding-left:0 !important; padding-right:0 !important; }
body.nsd #header .navbar .navbar-section.logo{ margin-left:0 !important; padding-left:0 !important; }
body.nsd #header .navbar .navbar-brand{ margin-left:0 !important; padding-left:0 !important; }

/* Header-Links */
body.nsd #header .navbar a,
body.nsd #header .navbar .navbar-brand{
  color:var(--nsd-text) !important;
  border-bottom:none !important;
}
body.nsd #header .dropmenu > ul > li > a:hover,
body.nsd #header .dropmenu > ul > li > a.active{
  color:var(--nsd-accent) !important;
}

/* Logo-Zeile */
body.nsd #header .dk-logo{ display:flex; align-items:center; }
body.nsd #header .dk-logo .logo{ margin:0; }
body.nsd #header .dk-logo .logo a.navbar-brand{
  display:flex !important;
  align-items:center !important;
  gap:var(--nsd-logo-gap) !important;
  text-decoration:none !important;
  border:0 !important;
  color:var(--nsd-text) !important;
  overflow:visible !important;
}

/* Icon: feste Höhe, KEIN negatives margin mehr */
body.nsd #header .dk-logo .logo img{
  height:var(--nsd-logo-size) !important;
  width:auto !important;
  margin-left:0 !important;
}

/* Wortmarke */
body.nsd #header .dk-logo .logo a.navbar-brand > span{
  display:inline !important;
  color:var(--nsd-accent);
  font-weight:700;
  letter-spacing:.02em;
}


/* Mobile-Menü: Hamburger-Bars in Überschriften-Farbe */
body.nsd .mobile-menu .button_container span,
body.nsd .mobile-container .button_container span,
body.nsd .button_container span::before,
body.nsd .button_container span::after,
body.nsd .button_container.active span,
body.nsd .button_container.active span::before,
body.nsd .button_container.active span::after{
  background: var(--nsd-head) !important; /* gleiche Farbe wie Überschriften */
}

/* (Optional) Hover/Fokus – leicht aufhellen */
@media (hover:hover){
  body.nsd .mobile-menu .button_container:hover span{
    background: var(--nsd-accent) !important;
  }
}


/* ===== Mobile-Overlay: Kopfzeile wie der Header ===== */
body.nsd .mobile-container .mobile-logo{
  background: var(--nsd-panel);
  border-bottom: 1px solid var(--nsd-bdr);
  padding: .6rem var(--nsd-padx);
  position: sticky; top: 0; z-index: 9;
}

body.nsd .mobile-container .mobile-logo .dk-logo{ 
  display: flex; 
  align-items: center; 
}

body.nsd .mobile-container .mobile-logo h1.logo{
  margin: 0;
  font-size: .9rem;            /* nicht riesig */
  line-height: 1.1;
}

body.nsd .mobile-container .mobile-logo .logo{ margin: 0; }

body.nsd .mobile-container .mobile-logo .logo a.navbar-brand{
  display: flex !important;
  align-items: center !important;
  gap: var(--nsd-logo-gap);       /* Abstand Icon ↔ Text */
  color: var(--nsd-text) !important;
  text-decoration: none !important;
  border: 0 !important;
  transform: translateX(15px);   /* schiebt Icon + Text gemeinsam */
}

body.nsd .mobile-container .mobile-logo .logo img{
  height: var(--nsd-logo-size) !important;  /* gleiche Iconhöhe wie im Header */
  width: auto !important;
  margin-left: calc(-1 * var(--nsd-logo-shift)); /* Icon leicht „einhängen“ */
}

body.nsd .mobile-container .mobile-logo .logo a.navbar-brand > span{
  display: inline !important;
  color: var(--nsd-accent);
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: 9px; 
}


/* === Mobile Overlay-Menü: Links immer grün ===================== */
body.nsd .mobile-container .overlay-menu a,
body.nsd .mobile-container .overlay-menu a:link,
body.nsd .mobile-container .overlay-menu a:visited,
body.nsd .mobile-container .overlay-menu a:hover,
body.nsd .mobile-container .overlay-menu a:focus,
body.nsd .mobile-container .overlay-menu a:active,
body.nsd .mobile-container .overlay-menu .tree a{
  color: var(--nsd-accent) !important;
  border-bottom-color: rgba(0,255,150,.35) !important; /* Linie passend zu grün */
  text-decoration: none !important;
}













/* Altes kleines Plus aus dem Tree-Plugin ausblenden */
.mobile-container .overlay-menu .tree .toggler,
.mobile-container .overlay-menu .tree li.has-children > a::before {
  display: none !important;
  content: none !important;
}

/* Großer, fingerfreundlicher Toggle-Button */
.mobile-container .overlay-menu .tree li.has-children > a { flex: 1 1 auto; }

.mobile-container .overlay-menu .tree .submenu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;                  /* 44x44px Touch-Ziel (Apple/Google Guideline) */
  height:44px;
  margin-right:.5rem;
  border:1px solid var(--nsd-bdr, rgba(0,255,150,.35));
  border-radius:10px;
  background:transparent;
  color:var(--nsd-accent, #00FF96);
  font:inherit;
  line-height:1;
  cursor:pointer;
}

.mobile-container .overlay-menu .tree .submenu-toggle span{
  display:inline-block;
  font-size:1.4rem;
  transition:transform .18s ease;
}

.mobile-container .overlay-menu .tree li.open > .submenu-toggle span{
  transform:rotate(45deg);     /* + wird zu × beim Öffnen */
}

.mobile-container .overlay-menu .tree .submenu-toggle:focus{
  outline:2px solid var(--nsd-accent, #00FF96);
  outline-offset:2px;
}

/* ===== Mobile-Menu: 2-Spalten Grid (Icon/Toggle | Link) ===== */
:root{
  --nav-icon: 44px;     /* Breite/Höhe der Toggle-Spalte */
  --nav-gap: .5rem;
}

/* Altes Mini-Plus des Plugins sicher ausblenden */
.mobile-container .overlay-menu .tree .toggler,
.mobile-container .overlay-menu .tree li.has-children > a::before{
  display: none !important;
  content: none !important;
}

/* Grundlayout pro LI */
.mobile-container .overlay-menu .tree li{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===== Mobile-Menu: Hauptpunkte bündig, Submenüs eingerückt ===== */

/* alle Top-Level-LIs im Overlay in 2-Spalten-Grid (Icon/Toggle | Link) */
.mobile-container .overlay-menu .tree > li{
  display: grid;
  grid-template-columns: var(--nav-icon) 1fr; /* z.B. 44px | Rest */
  align-items: center;
}

/* Link der Top-Level-Punkte immer in Spalte 2, ohne extra Einrückung */
.mobile-container .overlay-menu .tree > li > a{
  grid-column: 2;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* der Toggle-Button sitzt in Spalte 1 (links) */
.mobile-container .overlay-menu .tree > li > .submenu-toggle{
  grid-column: 1;
  justify-self: center;
}

/* Submenü (z.B. „Lineup“) steht UNTER der Hauptzeile und ist eingerückt */
.mobile-container .overlay-menu .tree > li > ul{
  grid-column: 1 / -1; /* über beide Spalten laufen lassen */
  width: 100%;
  margin: .35rem 0 0;
  padding-left: calc(var(--nav-icon) + var(--nav-gap)); /* Einrückung wie Icon-Spalte */
}

/* Sicherheit: etwaige Standard-Einrückungen des Themes für Links neutralisieren */
.mobile-container .overlay-menu .tree a{
  padding-left: 0 !important;
}

/* Fingerfreundlicher Toggle-Button (bleibt wie vorher) */
.mobile-container .overlay-menu .tree .submenu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-icon);
  height: var(--nav-icon);
  margin-right: var(--nav-gap);
  border: 1px solid var(--nsd-bdr, rgba(0,255,150,.35));
  border-radius: 10px;
  background: transparent;
  color: var(--nsd-accent, #00FF96);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.mobile-container .overlay-menu .tree .submenu-toggle span{
  font-size: 1.4rem;
  transition: transform .18s ease;
}
.mobile-container .overlay-menu .tree li.open > .submenu-toggle span{ transform: rotate(45deg); }
.mobile-container .overlay-menu .tree .submenu-toggle:focus{
  outline: 2px solid var(--nsd-accent, #00FF96);
  outline-offset: 2px;
}










/* Mobile Overlay-Menü: große, fingerfreundliche Toggler */
body.nsd .mobile-container .overlay-menu .tree li.has-children > a{
  position: relative;
  padding-left: 52px;                 /* Platz für den 44px-Toggler links */
}

body.nsd .mobile-container .overlay-menu .tree li.has-children > a::before{
  content: "+";                       /* wird per .open zu "–" */
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;          /* Tap-Ziel nach HIG */
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,255,150,.35);
  border-radius: 8px;
  color: var(--nsd-accent);
  font-size: 22px; line-height: 1;
}

/* geöffneter Zustand */
body.nsd .mobile-container .overlay-menu .tree li.open > a::before{
  content: "–";
}

/* etwas mehr Zeilenhöhe, damit das Ziel nicht gequetscht wirkt */
body.nsd .mobile-container .overlay-menu .tree a{
  min-height: 48px;
  display: flex; align-items: center;
}

/* optional: kleiner Hover/Focus-Effekt */
body.nsd .mobile-container .overlay-menu .tree li.has-children > a:focus::before,
body.nsd .mobile-container .overlay-menu .tree li.has-children > a:hover::before{
  box-shadow: 0 0 0 2px rgba(0,255,150,.15) inset;
}









/* ===== Desktop: Dropmenu (Untermenüs) in schwarz/grün =================== */
@media (min-width: 961px){
  /* Container des Untermenüs */
  body.nsd #header .dropmenu > ul > li > ul{
    background: var(--nsd-panel);                 /* dunkel */
    border: 1px solid var(--nsd-bdr);
    border-radius: 10px;
    padding: .25rem;
    box-shadow: 0 12px 24px rgba(0,0,0,.45);
    z-index: 1000;
  }

  /* Breite + Zeilen */
  body.nsd #header .dropmenu > ul > li > ul > li{
    min-width: 180px;
  }

  /* Links im Untermenü */
  body.nsd #header .dropmenu > ul > li > ul a,
  body.nsd #header .dropmenu > ul > li > ul a:visited{
    display: block;
    padding: .45rem .75rem;
    color: var(--nsd-text) !important;            /* Text hell */
    background: transparent !important;           /* kein Weiß */
    border: 0 !important;                         /* keine Unterlinie */
    white-space: nowrap;
  }

  /* Hover/Fokus: grün betonen */
  body.nsd #header .dropmenu > ul > li > ul a:hover,
  body.nsd #header .dropmenu > ul > li > ul a:focus{
    color: var(--nsd-accent) !important;
    background: rgba(0,255,150,.08);
    border-radius: 8px;
  }

  /* zarte Trenner zwischen Items (optional) */
  body.nsd #header .dropmenu > ul > li > ul > li + li{
    border-top: 1px solid var(--nsd-bdr-soft);
    margin-top: .15rem;
    padding-top: .15rem;
  }
}















/* =========================================================
   Layout: Content + Sidebar
   ========================================================= */
.ns-layout{ display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start; }
@media (max-width:980px){ .ns-layout{ grid-template-columns:1fr; } }
.ns-sidebar{ position:sticky; top:1.25rem; }
.ns-box{
  background:rgba(0,0,0,.14);
  border:1px solid rgba(0,255,150,.22);
  border-radius:12px;
  padding:12px 14px;
  color:var(--nsd-text);
}
.ns-sidebar h3{ margin:0 0 .4rem; color:var(--nsd-text); opacity:.9; }
.ns-list{ list-style:none; margin:0; padding:0; }
.ns-list li + li{ margin-top:6px; }
.ns-list a{
  display:inline-block;
  padding:.4rem .7rem;
  border:1px dashed rgba(0,255,150,.35);
  border-radius:999px;
  color:var(--nsd-text);
}
.ns-list a:hover{ background:rgba(0,255,150,.10); border-color:rgba(0,255,150,.6); }

/* =========================================================
   Event-Liste (ZWEI-ZEILEN-Layout)
   ========================================================= */

/* Filter-Zeile */
.ns-filter{display:flex;gap:.75rem;align-items:center;margin:.5rem 0 1rem}
.ns-filter label{display:flex;gap:.35rem;align-items:center;font-size:.95rem}
.ns-reset{margin-left:auto;opacity:.8}

/* Harte Resets: keine alte Card-/Grid-Struktur mehr */
.ns-event{
  display:block !important;
  grid-template-columns:unset !important;
  padding:0;
  margin:.25rem 0;
  border:0;
  background:transparent;
}
.ns-event .ns-event-figure{ display:none !important; }

/* ZWEI ZEILEN:
   1) .loc   => Ort, Datum  (volle Breite)
   2) .title => Titel, danach .meta (Uhrzeit/Venue) und optional .genres */
.ns-event.is-line .ns-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.25rem .6rem;
  white-space:normal;
  line-height:1.35;
  font-size:1rem;
}

/* 1. Zeile */
.ns-event.is-line .loc{
  order:1;
  width:100%;
  opacity:.95;
}

/* 2. Zeile */
.ns-event.is-line .title{
  order:2;
  font-weight:700;
  font-size:1.08rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ns-event.is-line .meta{
  order:3;
  font-size:.96em;
  opacity:.95;
}
.ns-event.is-line .genres{
  order:4;
  font-size:.95em;
  font-style:italic;
  opacity:.9;
}

/* Nur zwischen Titel ↔ Meta ↔ Genres trennen */
.ns-event.is-line .title + .meta::before,
.ns-event.is-line .meta + .genres::before{
  content:"—";
  opacity:.6;
  margin-right:.35rem;
}
/* evtl. alte globale Trenner-Regel neutralisieren */
.ns-event.is-line .ns-line > span + span::before{ content:none; }

/* Titel-Link: weiß + dezente Unterlinie */
.ns-event.is-line .title a,
.ns-event.is-line .title a:visited{
  color:var(--nsd-text) !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(255,255,255,.75);
}
.ns-event.is-line .title a:hover,
.ns-event.is-line .title a:focus{
  border-bottom-color:#fff;
}

/* Mobile: kompakter, Titel darf volle Breite nehmen */
@media (max-width:640px){
  .ns-event.is-line .ns-line{ gap:.2rem .45rem; font-size:.95rem; }
  .ns-event.is-line .title{ width:100%; font-size:1rem; }
}











/* === Mobile-Fix: Party-Liste nicht breiter als Viewport =================== */
@media (max-width: 700px){
  /* harte Bremse gegen Horizontal-Scroll */
  html, body{
    max-width: 100%;
    overflow-x: hidden;
  }
  /* Container & Inhalt clippen statt scrollen */
  body.nsd #page-wrapper,
  body.nsd #body-wrapper,
  body.nsd .container{
    max-width: 100%;
    overflow-x: clip;
  }

  /* Filterzeile darf umbrechen und schrumpfen */
  .ns-filter{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .6rem;
  }
  .ns-filter label{
    flex: 1 1 220px;       /* darf schmal werden */
    min-width: 0;          /* verhindert overflow durch min-content */
  }
  .ns-filter select{
    width: 100%;
    max-width: 100%;
  }

  /* Lange Event-Titel NICHT in einer Zeile festnageln */
  .ns-event.is-line .title,
  .ns-event.is-line .title a{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Auch die Segmente selbst dürfen schrumpfen */
  .ns-event.is-line .ns-line > span{
    min-width: 0;
  }

  /* Falls das „hängende“ Logo auf Mobile Breite erzeugt: neutralisieren */
  body.nsd #header .dk-logo{ transform: none !important; }
  body.nsd #header .dk-logo .logo img{ margin-left: 0 !important; }
}


















/* =========================================================
   Tracklist-Tabellen (kompakt, klar, sticky) – NUR .ns-tracklist
   ========================================================= */
body.nsd .ns-tracklist{
  width: 100%;
  table-layout: auto;                 /* Titelspalte bekommt den Rest */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--nsd-panel-2);
  color: var(--nsd-text);
  border: 1px solid var(--nsd-bdr-strong);
  border-radius: 10px;
  margin: .6rem 0 1.25rem;
  overflow: visible;                  /* ← NICHT clippen, damit Cover-Ecken frei bleiben */
  position: relative;                 /* Stacking-Kontext für z-index */
}

/* Kopfzeile (ein breites Feld „TRACKLISTE“) */
body.nsd .ns-tracklist thead th.tracklist-title{
  position: sticky; top: var(--nsd-sticky-offset, 0); z-index: 3;
  background: linear-gradient(180deg,#0f5e3b,#0a3f28);
  color: #e8fff5;
  padding: .5rem .6rem;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--nsd-bdr);
  border-top-left-radius: 10px;       /* Rundungen jetzt am Kopf ... */
  border-top-right-radius: 10px;
}

/* Zellen */
body.nsd .ns-tracklist th,
body.nsd .ns-tracklist td{
  padding: .45rem .6rem;
  border: 0;
  line-height: 1.3;
}

/* Zebra + Hover */
body.nsd .ns-tracklist tbody tr:nth-child(even) td{ background: var(--nsd-row-even); }
body.nsd .ns-tracklist tbody tr:hover td{ background: var(--nsd-row-hover); }

/* Untere Rundungen (… und am Tabellenende) */
body.nsd .ns-tracklist tbody tr:last-child td:first-child{ border-bottom-left-radius: 10px; }
body.nsd .ns-tracklist tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }

/* ===== Spaltenbreiten ausschließlich über <colgroup> steuern ===== */
body.nsd .ns-tracklist col.col-num    { width: 3.6ch; }  /* # */
body.nsd .ns-tracklist col.col-title  { width: auto; }   /* nimmt den Rest */
body.nsd .ns-tracklist col.col-len    { width: 6.8ch; }  /* 03:45 */
body.nsd .ns-tracklist col.col-rating { width: 12ch; }   /* ★★★★★ */

/* Ausrichtung/Inhalt je Spalte */
body.nsd .ns-tracklist td.num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.nsd .ns-tracklist td.title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;                 /* Desktop: in einer Zeile */
}
body.nsd .ns-tracklist td.len{
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
body.nsd .ns-tracklist td.rating{
  text-align: center;
  white-space: nowrap;
}

/* Typo-Helfer */
body.nsd .time  { font-variant-numeric: tabular-nums; font-size: .9em; }
body.nsd .stars { color: var(--nsd-accent); letter-spacing: .03em; font-size: .9em; }

/* ===== Mobile Tweaks ===== */
@media (max-width: 900px){
  body.nsd .ns-tracklist col.col-rating{ width: 10ch; }
}
@media (max-width: 640px){
  /* #: ausblenden – Platz für Titel; Breite des COL auf 0 ziehen */
  body.nsd .ns-tracklist td.num{ display:none; }
  body.nsd .ns-tracklist col.col-num{ width:0 !important; }

  /* Titel darf auf kleinen Screens umbrechen */
  body.nsd .ns-tracklist td.title{ white-space: normal; }

  /* etwas kleinere Paddings/Head */
  body.nsd .ns-tracklist thead th.tracklist-title{ font-size: .72rem; }
  body.nsd .ns-tracklist th,
  body.nsd .ns-tracklist td{ padding: .4rem .5rem; }
}

/* ===== Release-Radar: Cover-Rahmen + Mobil rechts floaten ===== */

/* Rahmen eng ums Bild, kein Vollbreiten-Block */
body.nsd .ns-album .ns-cover-frame{
  display: inline-block;
  float: right;
  border: 1px solid var(--nsd-bdr-strong);
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
}

/* Bild füllt den Rahmen, feste Breite über CSS-Var (Default 200px) */
body.nsd .ns-album .ns-cover-frame .ns-album-cover{
  display: block;
  width: var(--ns-cover-size, 200px) !important;
  height: auto !important;
  border-radius: inherit;
}

/* Trackliste beginnt unterhalb des gefloateten Covers */
body.nsd .ns-tracklist{ clear: right; }

/* ===== Mobile: Cover ~1/3 kleiner und weiterhin rechts, Text links umlaufend ===== */
@media (max-width: 700px){
  /* 200px -> ~134px */
  body.nsd{ --ns-cover-size: 134px; }

  /* überschreibt den generellen img-right-Mobile-Reset */
  body.nsd .img-right.ns-cover-frame{
    float: right !important;
    display: inline-block !important;
    max-width: none;
    margin: .2rem 0 .8rem .8rem; /* Abstand links zum Text */
  }
}




/* =========================================================
   Stream Links
   ========================================================= */

/* Streaming-Links: Abstand + keine Unterstreichung */
body.nsd .stream-links{
  display: flex;
  gap: .6rem;                 /* Abstand zwischen den Icons */
  align-items: center;
  margin: .35rem 0 .5rem;     /* Luft um die Zeile */
}

body.nsd .stream-links a,
body.nsd .stream-links a:visited{
  display: inline-flex;
  align-items: center;
  border-bottom: none !important;   /* Unterstreichung weg */
  text-decoration: none !important;
  line-height: 0;                   /* verhindert Restunterstreichung durch Zeilenhöhe */
}

body.nsd .stream-links a img{
  width: 25px;
  height: 25px;
  display: block;
  filter: grayscale(100%) opacity(.9);
  transition: transform .18s ease, filter .18s ease;
}

body.nsd .stream-links a:hover img,
body.nsd .stream-links a:focus img{
  filter: none;
  transform: translateY(-1px) scale(1.05);
}




/* =========================================================
   Footer (dunkel, wie Header)
   ========================================================= */
body.nsd #footer.section{
  background:var(--nsd-panel) !important;
  border-top:1px solid var(--nsd-bdr) !important;
  color:var(--nsd-text) !important;
}
body.nsd #footer a{
  color:var(--nsd-accent) !important;
  border-bottom:none !important;
  text-decoration:none !important;
}
body.nsd #footer a:hover{ color:#00cc7a !important; }
body.nsd #footer .container{
  max-width:var(--nsd-maxw);
  margin:0 auto;
  padding:.75rem var(--nsd-padx);
}
body.nsd #footer p{ margin:.5rem 0; text-align:center; }

/* =========================================================
   Utilities
   ========================================================= */
body.nsd .img-right{
  float:right; max-width:42%;
  margin:.85rem 0 .75rem 1rem;
  border-radius:8px;
  border:1px solid var(--nsd-bdr);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
@media (max-width:680px){
  body.nsd .img-right{ float:none; display:block; max-width:100%; margin:.25rem 0 1rem; }
}


/* === Party-Zeilen: saubere Typo + funktionierender Zeilenumbruch === */

/* Grundgröße NUR innerhalb der Eventliste */
body.nsd .ns-event-list{
  font-size: .8rem;
  line-height: 1.35;
}

/* Textzeile als flex-Zeile, aber mit Umbruch */
body.nsd .ns-event.is-line{
  padding: .15rem 0;
  margin:  .15rem 0;
  border: 0;
  background: transparent;
}
body.nsd .ns-event.is-line .ns-line{
  display: flex;
  align-items: baseline;
  gap: .35rem .6rem;
  flex-wrap: wrap !important;       /* erlaubt Umbruch */
  white-space: normal !important;   /* verhindert „nowrap“ */
  font-size: inherit;
  line-height: inherit;
}

/* Segmente: kein eigenes nowrap einschleusen */
body.nsd .ns-event.is-line .ns-line > span{
  display: inline-flex;
  align-items: baseline;
  white-space: normal !important;
}

/* Typo: Titel minimal größer */
body.nsd .ns-event.is-line .title{
  font-size: .8rem;
  font-weight: 700;
}

/* Titel-Link: weiß + Unterstreichung (statt grün) */
body.nsd .ns-event.is-line .title a,
body.nsd .ns-event.is-line .title a:visited{
  font-size: inherit !important;
  color: var(--nsd-text) !important;                         /* weiß */
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.75) !important; /* sichtbare Linie */
}
body.nsd .ns-event.is-line .title a:hover,
body.nsd .ns-event.is-line .title a:focus{
  border-bottom-color: #fff !important;
}

/* Nebeninfos etwas kleiner als der Titel */
body.nsd .ns-event.is-line .meta,
body.nsd .ns-event.is-line .genres{
  font-size: .95em;
}

/* Sicherheitsnetz: Facts/Links gar nicht anzeigen */
body.nsd .ns-event.is-line .facts,
body.nsd .ns-event.is-line .links{
  display: none !important;
}

/* Trennstrich zwischen Segmenten */
body.nsd .ns-event.is-line .ns-line > span + span::before{
  content: "—";
  opacity: .6;
  margin-right: .35rem;
}

/* Kleine Screens: Titel erste Zeile, Rest darunter */
@media (max-width: 700px){
  body.nsd .ns-event.is-line .ns-line{ gap: .25rem .45rem; font-size: .92rem; }
  body.nsd .ns-event.is-line .title{ width: 100%; }
}