:root{
    --bg: #121a3b;
    --card: #121833;
    --card-2:#0f1530;
    --muted:#b8c3e6;
    --text: #f4f6ff;
    --accent: #82b5ff;
    --accent-2:#34d399;
    --danger:#ff6b6b;
    --warning:#ffd166;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  
  /* Event-Einreichen Variablen */
  :root {
    --ee-bg:#fff; --ee-border:#e5e7eb; --ee-primary:#0f172a; --ee-accent:#2563eb; --ee-text:#0b1220; --ee-muted:#6b7280;
    --ee-shadow:0 10px 25px rgba(0,0,0,.12); --ee-radius:16px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color:var(--text);
    background: radial-gradient(1200px 800px at 15% -10%, #24318a 0%, transparent 60%),
                radial-gradient(1200px 800px at 100% 0%, #1d2a6e 0%, transparent 60%),
                var(--bg);
    background-attachment: fixed, fixed, fixed;
    background-repeat: no-repeat;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }

  .heroMount{ 
    margin: 0;
  }

  
/* Farb- und Effekt-Variablen nur für das Hero */
:root{
  --hero-bg-1: #0a0f1e;
  --hero-bg-2: #0f1633;
  --hero-bg-3: #0b1228;
  --hero-gold: #d4af37;
  --hero-gold-2: #b9972e;
  --hero-gold-glow: rgba(212,175,55,.25);
  --hero-text: #f3f4f6;
  --color-blue1: #1d2a6e; 
  --color-blue2: #24318a;
}

/* Wrapper; erlaubt sanftes Einklappen nach Suche */
#heroMount{
  position: sticky;
  top: 0;
  z-index: 3000;
  transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease;
  will-change: transform;
}
#heroMount.is-collapsed{
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
}


/* Der Hero-Container nimmt volle Viewport-Höhe ein */
#heroMount .hero{
  min-height: 100svh;       /* volle Bildschirmhöhe (safe viewport) */
  display: grid;            /* damit wir .hero-inner vertikal mittig ausrichten können */
}

/* Innenraum mittig platzieren, mit „Luft“ oben/unten */
#heroMount .hero .hero-inner{
  min-height: 100svh;       /* gleiche Höhe wie der äußere Hero */
  display: grid;
  align-content: center;    /* vertikal mittig */
  padding-block: clamp(24px, 8vh, 64px); /* etwas Puffer oben/unten */
}

/* Die zwei Spalten (links Suche, rechts Empfehlungen) vertikal mittig ausrichten */
#heroMount .hero .hero-grid{
  align-items: center;
}

/* Auf sehr kleinen Höhen lieber oben beginnen statt zu quetschen */
@media (max-height: 680px){
  #heroMount .hero,
  #heroMount .hero .hero-inner{
    min-height: 680px;      /* sanfte Untergrenze */
  }
}


/* Grundfläche des Hero – bewusst NICHT full-bleed,
   damit das Element "links" im Seiten-Layout bleibt */
.hero{
  position: relative;
  z-index: 0;

  color: var(--hero-text);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);

  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(900px 600px at 95% 10%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(180deg, var(--hero-bg-3), var(--hero-bg-1) 60%, var(--hero-bg-2));
  overflow: clip;
}

/* dezent goldene Glanzkante oben rechts */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    conic-gradient(from 140deg at 80% -10%, transparent 0 70%, rgba(212,175,55,.14) 72% 78%, transparent 80% 100%);
  pointer-events:none;
  z-index:0;
}
/* leichte Vignette unten */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 500px at 50% 110%, rgba(0,0,0,.35), transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* Innenlayout */
.hero .hero-inner{
  position: relative; z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(18px, 3.2vw, 28px);
}
.hero .hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); /* links breiter */
  gap: 24px;
  align-items: start;
}

/* Linke Hälfte (Marke, Chips, Orte) */
.hero .hero-left{ display: grid; gap: 16px; }

.hero .hero-brand{
  font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  line-height: 1.05; letter-spacing: .3px; margin: 0;
  background: linear-gradient(180deg, #ffffff, #e7e9ff 60%, #c7cfef);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 20px rgba(255,255,255,.06);
}
.hero .hero-kicker{ color: #c7cfef; margin: 2px 0 4px; }

.hero .hero-quick{ display: grid; gap: 14px; margin-top: 4px; }
.hero .hero-row strong{ display:block; font-size:.95rem; color:#c7cfef; margin-bottom:6px }
.hero .quick-chips{ display:flex; gap:10px; flex-wrap:wrap }

/* Chips (Kategorien) mit Gold-Ring im aktiven Zustand */
.hero .chip{
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid #2b366b;
  background: rgba(12,19,48,.7);
  color: var(--hero-text);
  transition: border-color .2s ease, box-shadow .2s ease, transform .02s ease;
}
.hero .chip:hover{
  border-color: var(--hero-gold-2);
  box-shadow: 0 0 0 3px var(--hero-gold-glow);
}
.hero .chip.is-active{
  border-color: var(--hero-gold);
  box-shadow: 0 0 0 3px var(--hero-gold-glow);
}
.hero .btn.secondary.is-active {
  background: #d4af37;   /* Gold */
  color: #1a1a1a;
  border-color: #d4af37;
}

/* Buttons – „Anzeigen“ mit Gold-Highlight */
.hero .btn{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter: blur(6px);
  padding: 10px 16px;
  color: var(--hero-text);
  transition: border-color .2s ease, box-shadow .2s ease, transform .02s ease;
}
.hero .btn:hover{
  border-color: var(--hero-gold-2);
  box-shadow: 0 0 0 3px var(--hero-gold-glow);
}
.hero .btn[data-hero="apply"]{
  padding: 14px 22px;
  font-size: 1.05rem;
  letter-spacing: .02em;
  border-radius: 14px;
  border-color: var(--hero-gold);
  background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10));
  color: #fff7d1;
  box-shadow:
    0 10px 28px rgba(212,175,55,.20),
    inset 0 0 0 1px rgba(0,0,0,.25);
}

.hero .btn[data-hero="apply"]:hover{
  box-shadow:
    0 14px 38px rgba(212,175,55,.28),
    0 0 0 3px var(--hero-gold-glow),
    inset 0 0 0 1px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

.hero .hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px }

/* Kategorien-Kopf mit kleinem "Alle Kategorien"-Button */
.hero .cat-head{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.hero .cat-head strong{ margin: 0; } /* sonst doppelte Unterabstände */

/* kompakter, unaufdringlicher Reset-Button */
.hero .btn-all-cats{
  padding: 4px 10px;
  font-size: .82rem;
  line-height: 1;
  border-color: #2b366b;
  background: transparent;
  color: var(--hero-text);
  opacity: .85;
}
.hero .btn-all-cats:hover{
  opacity: 1;
  border-color: var(--hero-gold-2);
  box-shadow: 0 0 0 3px var(--hero-gold-glow);
}


/* Städte-Links */
.hero .hero-cies,
.hero .hero-cities{ margin-top: 8px; display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center;
height: auto;
background-color: #00000022;
border-radius: 20px;
padding-top: 10px;
}

.hero .hero-cities .cities-head{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
}

.hero .hero-cities .city-all{
  padding: 6px 10px;
  font-size: .85rem;
  border-color: var(--hero-gold-2);
  background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10));
  opacity: .75;
  color: white;
}
.hero .hero-cities .city-all:hover{
  box-shadow: 0 0 0 3px var(--hero-gold-glow);
  opacity: 1;
  background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10));
}

.hero .hero-cities ul{
  display:flex; gap:20px; flex-wrap:wrap; padding:0; margin:20px 0 0; list-style:none; min-height:100px ;
}
.hero .hero-cities a{
  text-decoration: none;
  border: none;
  color: var(--color-blue1);
  background-color: rgba(255,255,255,0.9);
  font-weight: 700;
  padding: 10px;
  border-radius: 8px;
  transition: transform .15s ease, opacity .15s ease;
  
}
.hero .hero-cities a:hover{ 
  transform: translateY(-1px);
  opacity: .9;

}

/* Rechte Hälfte (Empfohlene Karten) */
.hero .hero-right{ display: grid; gap: 10px; }

.featured-head{
  display:flex; align-items:center; gap:10px;
  color:#e6e6f6; margin-bottom: 2px;
}
#feat-title{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding-left: 12px;
  border-left: 3px solid var(--hero-gold);
}

.featured-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Kacheln mit Bild-Hintergrund + goldenen Details */
.featured-card{
  position: relative;
  display: block;
  min-height: 170px;
  color: #fff; text-decoration: none;

  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  transition: transform .08s ease, box-shadow .25s ease, border-color .2s ease, filter .2s ease;
}
.featured-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
  border-color: var(--hero-gold-2);
  filter: saturate(1.03);
}

/* Bild + Overlays */
.featured-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05) brightness(.95);
  transform: scale(1.02);
}
.featured-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55) 60%, rgba(0,0,0,.70)),
    radial-gradient(800px 400px at 110% -10%, rgba(212,175,55,.22), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

/* Inhalt */
.featured-content{
  position:relative; z-index:1;
  display:grid; gap:6px;
  padding: 14px;
}
.featured-badge{
  align-self: start;
  justify-self: start;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 800;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(212,175,55,.28), rgba(212,175,55,.14));
  color: #fff1c4;
  border: 1px solid var(--hero-gold-2);
  box-shadow: 0 0 0 3px var(--hero-gold-glow);
}
.featured-title{
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.featured-sub{
  color: #e6e6f6;
  opacity: .95;
  font-size: .92rem;
}
.featured-info{
  color: #fff;
  opacity: .92;
  font-size: .9rem;
}

/* Responsives Verhalten: rechts unter links stapeln */
@media (max-width: 1060px){
  .hero .hero-grid{ grid-template-columns: 1fr; }
}

/* Motion-Preference respektieren */
@media (prefers-reduced-motion: reduce){
  #heroMount, .featured-card, .hero .chip, .hero .btn{
    transition: none !important;
  }
}



  




  
  .container{max-width:1100px; margin:32px auto; padding:0 16px}
  header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
  .title{font-size: clamp(1.1rem, 1rem + 1.5vw, 2rem); font-weight:800; letter-spacing:.2px}
  .subtitle{color:var(--muted); font-size:.95rem}
  
  /* Filters + forms */
  .filters{display:grid; gap:14px; grid-template-columns: repeat(12, 1fr)}
  .card{background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.07); padding:16px; border-radius:var(--radius); box-shadow:var(--shadow)}
  .card--filters{grid-column: 1 / -1; display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
  .card--list{ margin-top:16px; }
  
  .field{display:flex; flex-direction:column; gap:8px}
  .field label{font-weight:600; font-size:.9rem; color:#c7cfef}
  .inline{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  input[type="date"], select, input[type="text"], input[type="search"]{
    background:#0c1330; color:var(--text); border:1px solid #2b366b; border-radius:10px; padding:10px 12px; outline:none; width:100%;
  }
  input[type="range"]{width:100%}
  .range-meta{display:flex; justify-content:space-between; color:var(--muted); font-size:.85rem}
  
  .chips{display:flex; gap:8px; flex-wrap:wrap}
  .chip{display:inline-flex; align-items:center; gap:8px; border:1px solid #2b366b; background:#1a235a; border-radius:999px; padding:6px 10px; cursor:pointer; user-select:none; font-weight:600}
  .chip input{accent-color: var(--accent)}
  
  
  .actions{display:flex; gap:10px; flex-wrap:wrap; align-items:end}
  .btn{appearance:none; border:0px solid transparent; border: 1px solid; background:linear-gradient(90deg, var(--accent), #5de0e6); color:#0b1020; font-weight:800; padding:10px 14px; border-radius:12px; cursor:pointer; transition: background-color 0.2s ease;}
  .btn.secondary{background:transparent; color:var(--text); border-color:#2b366b}
  
  .btn:hover {
    background: linear-gradient(90deg, #003f73, #003f73);
    color: white;
  }

  .btn.secondary:hover {
    background-color: #005fa3;   /* etwas dunkler */
    
  }
  .btn:active {
    background-color: #003f73;   /* noch dunkler */
  }
  
  
  .meta{display:flex; align-items:center; justify-content:space-between; margin-top:12px; color:var(--muted)}
  
  table{width:100%; border-collapse:separate; border-spacing:0 10px}
  thead th{font-size:.9rem; text-align:left; color:#c7cfef; padding:0 12px}
  tbody tr{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.07)}
  tbody td{padding:14px 12px; vertical-align:top}
  tbody tr{border-radius:12px}
  tbody tr td:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px}
  tbody tr td:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px}

  /* Tages-Separator zwischen Datumsblöcken */
tbody tr.day-sep {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.sep-cell { padding: 8px 0 0; }

.sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .02em;
}
.sep::before,
.sep::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.18);
}
.sep > span {
  white-space: nowrap;
  font-size: .95rem;
}

/* Eventtitel-Links: immer weiß, nie unterstrichen */
a.ev-title-link,
a.ev-title-link:visited,
.ev-title a,
.ev-title a:visited {
  color: #fff;
  text-decoration: none;
}

/* Optional: auch beim Hover/Focus nicht unterstreichen */
a.ev-title-link:hover,
a.ev-title-link:focus,
.ev-title a:hover,
.ev-title a:focus {
  text-decoration: none;
}

  
  .ev-title{ margin:0; font-size:1rem; line-height:1.3; font-weight:800 }
  @media (max-width: 860px){
    .ev-title{ font-size:1.05rem; }
  }
  .container{margin-top: 60px;}
  .badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:.82rem; font-weight:700}
  .b-konzerte{background:#4d61c7; color:#ffffff; border:1px solid #20306b}
  .b-familie{background:#9c9916; color:#ffffff; border:1px solid #ddce00}
  .b-kultur{background:#751313; color:#ffffff; border:1px solid #d10e0e}
  .b-sport{background:#0f3d37; color:#eafff7; border:1px solid #2db79f}
      .b-fussball{background:#94e79a82; color:#ffffff; border:1px solid #ffffff}
      .b-basketball{background:#e794947b; color:#ffffff; border:1px solid #ffffff}
      .b-handball{background:#e4e79479; color:#ffffff; border:1px solid #ffffff79}
      .b-eishockey{background:#94b8e77c; color:#ffffff; border:1px solid #ffffff7c}
  .b-karriere{background:#3a2e08; color:#fff4cf; border:1px solid #caa94c}
  .b-party{background:rgba(255,110,190,.16); color:#ffd6ef; border:1px solid rgba(255,110,190,.35)}
  .dist{opacity:.85; font-size:.8rem; color:#c9d1ff}
  
  a.link{color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; font-weight:700}
  a.link:hover{text-decoration-thickness: 2px}
  
  details{margin-top:16px}
  summary{cursor:pointer; color:#c7cfef}
  
  .muted{color:var(--muted)}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  
  :focus-visible{outline:3px solid var(--accent-2); outline-offset:3px; border-radius:8px}
  
  /* Selected row + share */
  .ev-row{ cursor:pointer; transition: background .2s ease, box-shadow .2s ease, filter .2s ease; }
  .ev-row:hover{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); }
  .ev-row.is-selected{ background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.12)); box-shadow: 0 0 0 2px rgba(130,181,255,.50), var(--shadow); filter: brightness(1.08); }
  .ev-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .share-wrap{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
  .share-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid #2b366b; background:#0c1330; color:var(--text); font-weight:800; cursor:pointer }
  .share-btn:hover{ border-color:#4560c7 }
  .share-btn svg{ width:16px; height:16px }
  #toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; background: rgba(20,28,60,.95); color:#fff; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow); display:none; z-index: 4000; font-weight:800 }
  
  .empty-hint{ display:none; padding:12px }
  
  .ev-info {
    margin-top: 6px;
    font-size: 0.9rem;
    color: #ffffff;
  }
  
  .ev-info details {
    margin-top: 4px;
    
  }
  
  .ev-info summary {
    cursor: pointer;
    font-weight: 500;
    color: #c9c9c9;
    list-style: none; /* Browser-Standard-Pfeil entfernen */
  }

  .ev-info summary::before {
    content: "+ ";
  
  }
  
  .ev-info details[open] summary::before {
    content: "- ";
  }
  
  
  .ev-info summary::-webkit-details-marker {
    display: none; /* Marker in Chrome/Safari ausblenden */
  }
  
  .ev-info details[open] summary {
    color: #005bb5; /* andere Farbe wenn offen */
  }
  
  
  .badge.b-ganzjaehrig {
    background-color: #4caf50; /* Grün als Beispiel */
    color: #fff;
  }
  

  /* Consent Modal */
  #consentOverlay{
    position: fixed; inset: 0; display: none; place-items: center; z-index: 9999;
    background: rgba(5,8,20,.55); backdrop-filter: blur(4px);
  }
  #consentBox{
    width: min(560px, 92vw);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.12);
    border-radius: 16px; padding: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
  }
  #consentBox h3{ margin: 0 0 8px 0; }
  #consentBox p{ margin: 0 0 12px 0; color: var(--muted); }
  #consentActions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-top:12px; }
  #consentActions .btn{ padding:10px 14px; border-radius:12px; border:1px solid transparent; cursor:pointer; font-weight:800; }
  #consentAccept{ background: linear-gradient(90deg, var(--accent), #5de0e6); color:#0b1020; }
  #consentDecline{ background: transparent; color: var(--text); border-color:#2b366b; }
  #consentMore{ color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
  
  /* Footer & noscript */
  .footer{margin:32px 0; text-align:center; color:#b8c3e6; font-size:.9rem}
  .footer-link{color:inherit; text-decoration:underline; text-underline-offset:2px}
  .noscript-box{max-width:1100px; margin:16px auto; color:#333; background:#fff; padding:12px; border-radius:8px}
  
  /* EE Panel (Event einreichen) */
  .ee-wrapper{position:fixed;top:20px;right:20px;z-index:2000;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;}
  .ee-tab{display:inline-flex;align-items:center;gap:10px;background:var(--ee-bg);border:1px solid var(--ee-border);padding:10px 14px;border-radius:999px;box-shadow:var(--ee-shadow);color:var(--ee-primary);font-weight:600;cursor:pointer;user-select:none}
  .ee-tab svg{width:14px;height:14px;transition:transform .2s ease}
  .ee-panel{width:360px;max-width:90vw;background:var(--ee-bg);border:1px solid var(--ee-border);border-radius:var(--ee-radius);box-shadow:var(--ee-shadow);padding:18px;   max-height: clamp(360px, 65vh, 640px); /* so „bis ungefähr Mitte“ sichtbar bleibt */
    overflow: auto;                        /* scrollt nur das Panel, nicht die Seite */
    overscroll-behavior: contain;          /* verhindert „Durchscrollen“ der Seite */
    -webkit-overflow-scrolling: touch;     /* smooth auf iOS */}
  .ee-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
  .ee-title{font-size:16px;font-weight:700;color:var(--ee-primary);margin:0}
  .ee-toggle-btn{background:transparent;border:none;cursor:pointer;padding:6px;border-radius:10px}
  .ee-toggle-btn:hover{background:#f3f4f6}
  .ee-toggle-btn svg{width:18px;height:18px;transition:transform .2s ease}
  .ee-desc{color:var(--ee-muted);font-size:13px;line-height:1.4;margin-bottom:12px}
  .ee-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
  .ee-label{font-size:12px;color:var(--ee-primary);font-weight:600}
  .ee-input,.ee-textarea{border:1px solid var(--ee-border);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ee-text);background:#fff;outline:none}
  .ee-textarea{min-height:80px;resize:vertical}
  .ee-input:focus,.ee-textarea:focus{border-color:var(--ee-accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
  .ee-tags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;color: #0b1220;}
  .ee-tag-item{display:flex;align-items:center;gap:8px;border:1px solid var(--ee-border);border-radius:10px;padding:8px 10px}
  .ee-tag-item input{accent-color:var(--ee-accent)}
  .ee-hint{font-size:12px;color:var(--ee-muted)}
  .ee-actions{display:flex;gap:10px;margin-top:16px}
  .ee-btn{border:1px solid var(--ee-accent);background:var(--ee-accent);color:#fff;border-radius:12px;padding:10px 14px;font-weight:700;font-size:14px;cursor:pointer}
  .ee-btn:disabled{opacity:.6;cursor:not-allowed}
  .ee-btn.secondary{background:#fff;color:var(--ee-accent)}
  .ee-collapsed .ee-panel{display:none}
  .ee-expanded .ee-tab{display:none}
  .ee-alert{border-radius:10px;padding:10px 12px;font-size:13px;margin:10px 0 0}
  .ee-alert.error{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}
  .ee-alert.success{background:#dcfce7;color:#14532d;border:1px solid #bbf7d0}
  
  /* Responsive */
  @media (max-width: 860px){
    .card--filters{grid-template-columns: 1fr}
    .filters{grid-template-columns:1fr}
    thead{display:none}
    table, tbody, tr, td{display:block; width:100%}
    tbody tr{margin-bottom:12px}
    tbody td{display:flex; justify-content:space-between; gap:12px}
    tbody td::before{content: attr(data-label); color:#c7cfef; font-weight:700}
    .share-wrap{ margin-top:10px }
  }
  
  /* Mobile-specific compact rows without header labels */
  @media (max-width: 860px){
    .mobile-hide{display:block  !important}
    thead{display:none}
    table, tbody, tr, td{display:block; width:100%}
    tbody tr{margin-bottom:12px}
    tbody td{display:block !important; padding:8px 12px}
    tbody td::before{content: none !important}
  }
  



  /* --- Sticky-Hero + Hide-on-scroll-down --- */
#heroMount{
  position: static; top:auto; z-index:auto; transform:none; transition:none;
}
#heroMount.hero-hidden{
  transform:none; opacity:1;
}

/* --- Filter-Sektion einklappen --- */
.filters.is-collapsed .card--filters{
  display: none;
}

/* --- „Sport: mehr“ UI im Hero --- */
.chip-group{ display:inline-flex; align-items:center; gap:6px;  }
.chip-more{padding: 4px 8px;
  font-size: .82rem;
  line-height: 1;
  border: 1px dashed var(--hero-gold-2);
  background: transparent;
  color: var(--hero-gold);
  opacity: .95;
  transform: translateY(-1px); /* optisch näher an "Sport" */
}
.chip-more:hover{
  box-shadow: 0 0 0 3px var(--hero-gold-glow);
  opacity: 1;
}

.sport-subchips{
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(212,175,55,.35);
  background: linear-gradient(180deg, rgba(212,175,55,.10), rgba(255,255,255,.03));
}
.sport-subchips .chip.sub{
  background: rgba(12,19,48,.7);
}
.sport-subchips .chip.sub.is-active{
  border-color: var(--hero-gold);
  box-shadow: 0 0 0 3px var(--hero-gold-glow);
}