/* ===== Brand & Base ===== */
:root{
  --bg:#0f1115;           /* dunkler als grau-800 */
  --panel:#151821;        /* Section/Panels */
  --muted:#9aa3b2;
  --text:#f5f7fb;
  --accent:#e50914;       /* Akzent (änderbar) */
  --accent-2:#22d3ee;     /* sekundärer Akzent */
  --radius:10px;
  --shadow:0 8px 24px rgba(0,0,0,.45);
}

html,body{ background:var(--bg) !important; color:var(--text); }
a{ color:inherit; text-decoration:none }
a:hover{ color:var(--accent) }

/* ===== Header / Navbar ===== */
header{ box-shadow:0 2px 0 rgba(255,255,255,.02) inset }
header .container{ background:rgba(21,24,33,.85)!important; backdrop-filter: saturate(140%) blur(8px); }
.navbar-blur{ background:rgba(21,24,33,.75)!important; backdrop-filter: blur(10px); }

nav a{ letter-spacing:.02em; }
nav a:hover{ color:var(--accent)!important; }
nav .rounded, .rounded{ border-radius:var(--radius)!important; }

/* Login/Join Buttons */
a.bg-gray-700{ background:#1e2330!important; border:1px solid #2a3142 }
a.bg-gray-700:hover{ background:var(--accent)!important; border-color:transparent }

/* Suche (aufklappbar) */
#searchBox{ background:var(--panel)!important; border-left:1px solid #252a38 }
#searchBox input, #searchBox select{
  background:#0f131b!important; border:1px solid #242b3a!important; color:var(--text)!important;
  border-radius:10px!important;
}
#searchBox button{ background:#1e2330!important; border:1px solid #30384b }
#searchBox button:hover{ background:var(--accent)!important; border-color:transparent }

/* ===== Section Headings ===== */
h2.text-yellow-400, h3.text-yellow-500{
  color:var(--text)!important;
  border-color:#262c3b!important;
  position:relative;
}
h2.text-yellow-400::after, h3.text-yellow-500::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:64px; height:3px; background:linear-gradient(90deg,var(--accent),transparent);
}

/* ===== Cards / Poster ===== */
.card{
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow);
  transform:none!important; opacity:1!important;
  background:#0f131b;
}
.card .card-image-content{ border-radius:var(--radius)!important; }
.card .image-card img{ border-radius:var(--radius)!important; transition: transform .25s ease, filter .25s ease; }
.card:hover .image-card img{ transform:scale(1.04); filter:saturate(1.1) }
.card:hover .card-image-content{ box-shadow:0 14px 28px rgba(0,0,0,.5) }

.card .card-overlay{ border-radius:var(--radius)!important; background-color: rgba(0,0,0,.45)!important; }
.card .persons-overlay, .card .collections-overlay{ border-radius:var(--radius)!important; }

.card-header{ font-size:15px!important; letter-spacing:.15px; }
.card-subheader{ color:var(--muted)!important; }

/* Watchlist Icon Badge */
.watchlist-button-card{ top:10px!important; right:10px!important; }
.watchlist-button-card svg{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

/* ===== Sliders / Slick ===== */
.slick-slider{ padding:2px 0 }
.slick-list{ overflow:visible }
.slick-slide{ transition:transform .2s ease }
.slick-slide:hover{ z-index:2; transform: translateY(-2px) }

/* ===== Buttons (generisch) ===== */
.btn, .px-3.py-1{ border-radius:3px!important; }
.btn-accent, .hover\:text-yellow-400:hover{ color:#fff!important }
.btn-accent{ background:var(--accent); border:none }
.btn-accent:hover{ filter: brightness(1.05) }

/* ===== Footer ===== */
footer .container{ background:var(--panel)!important; }
footer .border-t-2{ border-top:1px solid #262c3b!important; }
footer a{ color:var(--muted) }
footer a:hover{ color:#fff }

/* ===== Utilities ===== */
.shadow-soft{ box-shadow: var(--shadow) }
.bg-panel{ background: var(--panel)!important }
.text-muted{ color: var(--muted)!important }

/* ===== Small polish ===== */
.iconify{ opacity:.95 }
.iconify:hover{ opacity:1 }

/* === 1) Logo größer + Slogan besser lesbar =============================== */
/* Ziel: nur das Logo oben links, ohne anderes zu beeinflussen */
header .container a[href="/"] img {
  width: 12.5rem !important;          /* vorher ~8rem/10rem -> jetzt ca. 200px */
  max-height: 56px;                    /* verhindert, dass die Navbar höher wird */
  object-fit: contain;
}

/* Falls die umgebenden Tailwind-Breiten limitieren: erlaub etwas mehr Platz */
header .container .sm\:w-32,
header .container .w-20 { width: auto !important; }

/* === 2) Abgerundete Ecken etwas schwächer ================================ */
:root { --radius: 6px; }              /* vorher 14px */
.card,
.card .card-image-content,
.card .image-card img,
.card .card-overlay,
.card .persons-overlay,
.card .collections-overlay { border-radius: var(--radius) !important; }

/* === 3) Footer links bündig + ruhiger Textblock ========================= */
/* Container leicht nach links – bündig zum restlichen Grid */
footer .container { padding-left: 1.25rem !important; }  /* 20px */
@media (min-width: 1024px){
  footer .container { padding-left: 2rem !important; }   /* 32px – wirkt perfekt mit deinem Grid */
}

/* Erste Spalte im Footer (Logo + Beschreibung) sauber setzen */
footer .container .grid > div:first-child { padding-left: 0 !important; }

/* Logo + Text bündig */
footer .container .grid > div:first-child a img { margin-left: -4px !important; }

/* Beschreibungstext: ruhiger Satzspiegel */
footer .container .grid > div:first-child span {
  display: block;
  max-width: 60ch;                     /* angenehme Zeilenlänge */
  line-height: 1.65;
  color: #cfd5df;                      /* etwas heller/ruhiger */
  text-align: justify;                 /* gleichmäßige linke/rechte Kante */
  text-justify: inter-word;
  text-wrap: pretty;
}

/* === 4) Mehr „Dark“ im Header + dezenter Akzent ========================= */
header .container{
  background: linear-gradient(180deg, rgba(15,17,21,.95), rgba(15,17,21,.85)) !important;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
nav a:hover{ color:#fff !important; }                 /* weg vom Gelb */
a.bg-gray-700:hover{ background:#e50914 !important; } /* Akzent auf Buttons */

/* Sektion-Überschriften: gelben Balken dezenter, mehr „Dark“ */
h2.text-yellow-400, h3.text-yellow-500{
  color:#e6e9ef !important;
  border-color:#262c3b !important;
}
h2.text-yellow-400::after, h3.text-yellow-500::after{
  width:56px; height:3px;
  background:linear-gradient(90deg,#e50914,transparent);
}

/* === 5) Cards minimal ruhiger ========================================== */
.card { box-shadow: 0 10px 30px rgba(0,0,0,.45); background:#0f131b; }
.card:hover .image-card img{ transform:scale(1.03); filter:saturate(1.06); }
.card-subheader{ color:#9aa3b2 !important; }

/* 1) Wrapper entsperren – sonst cappt er das Bild auf 8rem */
header .container .sm\:w-32,
header .container .w-20 {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* 2) Bild wirklich auf 12rem setzen */
header .container a[href="/"] img.w-32 {
  width: 12rem !important;   /* 12rem = 192px */
  max-width: none !important; /* ignoriert img{max-width:100%} */
  height: auto !important;
}

/* (Optional) maximale Höhe begrenzen, damit die Navbar nicht wächst */
@media (min-width: 1024px){
  header .container a[href="/"] img.w-32 { max-height: 72px !important; }
}

/* Wrapper entsperren – sonst cappt er das Bild wieder auf 8rem */
header .container .w-20 { width: auto !important; flex: 0 0 auto !important; }
@media (min-width: 640px){
  header .container .sm\:w-32 { width: auto !important; flex: 0 0 auto !important; }
}

/* Logo wirklich auf 12rem setzen (192px) */
#siteLogo{
  width: 12rem !important;
  max-height: 72px !important;   /* Navbar bleibt flach */
  height: auto !important;
  max-width: none !important;    /* ignoriert evtl. img{max-width:100%} */
}

/* --- Slick Overflow-Fix für Detailseiten/Carousels --- */

/* 1) Global wieder einkapseln – nichts darf rechts rauslaufen */
.slick-list{
  overflow: hidden !important;
}

/* 2) etwas Innenluft, damit Cards nicht am Rand kleben */
.slick-list{ padding: 0 8px; }               /* optional */
.slick-slide{ margin: 0 8px; box-sizing: border-box; } /* Randabstand zwischen Slides */

/* 3) Bilder sauber einpassen */
.slick-slide img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* 4) Falls du horizontales Scrollen gesehen hast, vorsichtshalber kappen */
html, body{ overflow-x: hidden; }

/* Kommentare – Rundung + Abstand fixen */
#comment-form .bg-gray-800,
#comment-form .bg-gray-700{
  border-radius: var(--radius, 10px) !important;  /* obere Box hatte keine Rundung */
  overflow: hidden;                                /* Rundung sichtbar machen */
}

/* Abstand zwischen oberer und unterer Box */
#comment-form .bg-gray-800{                        /* erste Hinweisbox */
  margin-bottom: 12px !important;
}

/* Fallback, falls Wrapper dazwischen sitzt */
#comment-form .w-full + .w-full{                   /* zwei Wrapper hintereinander */
  margin-top: 12px !important;
}

/* ===== WatchBase: Red theme ===================================== */
:root{
  /* Deine neue Akzentfarbe – nimm gern deinen Hexwert hier rein */
  --accent:        #e11d48;   /* Primär (kräftiges Rot)          */
  --accent-light:  #f43f5e;   /* Hover auf Text/Links (heller)   */
  --accent-dark:   #9f1239;   /* Hover auf Flächen/Borders       */
  --on-accent:     #ffffff;   /* Text auf roten Buttons          */
}

/* Text-Akzent: ersetzt gelbe Tailwind-Klassen durch Rot */
.text-yellow-400,
.text-yellow-500,
.hover\:text-yellow-400:hover,
.hover\:text-yellow-500:hover{
  color: var(--accent) !important;
}

/* Dezentes Hover (helleres Rot) für Akzent-Text */
.text-yellow-400:hover,
.text-yellow-500:hover{
  color: var(--accent-light) !important;
}

/* Linien/Divider mit dunklerem Rot statt Gelb */
.border-yellow-400,
.border-yellow-500{
  border-color: var(--accent-dark) !important;
}

/* Buttons/Badges mit Rot; Hover etwas dunkler */
.bg-yellow-400,
.bg-yellow-500{
  background-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
.hover\:bg-yellow-400:hover,
.hover\:bg-yellow-500:hover{
  background-color: var(--accent-dark) !important;
  color: var(--on-accent) !important;
}

/* Section-Überschriften: Farbe bleibt stabil beim Hover */
h2.text-yellow-400:hover,
h3.text-yellow-400:hover{
  color: var(--accent) !important;
}

/* === Rechte Sidebar-Karten sichtbar abheben ===================== */
/* Ziel: Kinder-Elemente direkt im .space-y-3-Wrapper stylen       */
@media (min-width: 1280px){
  .xl\:w-3\/12 .w-full.flex.flex-wrap.space-y-3 > *{
    background-color: #1d2430 !important;                /* heller als BG */
    border: 0px solid rgba(255,255,255,.08) !important;   /* zarte Kontur  */
    border-radius: 3px !important;                       /* weiche Ecken  */
    box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;    /* leichte Tiefe */
  }
  .xl\:w-3\/12 .w-full.flex.flex-wrap.space-y-3 > *:hover{
    background-color: #232c3a !important;                /* dezentes Hover */
    border-color: rgba(255,255,255,.12) !important;
  }
}

/* Falls einzelne Karten intern nochmal .bg-gray-800/900 setzen,
   überschreiben wir das ebenfalls dezent: */
.xl\:w-3\/12 .space-y-3 > * .bg-gray-800,
.xl\:w-3\/12 .space-y-3 > * .bg-gray-900{
  background-color: transparent !important;
}