/* ============================================================
   Denis Bergemann – Sprecher | Custom Styles
   Ergaenzt Tailwind (Play CDN). Edel, dunkel, Gold-Akzent.
   ============================================================ */

:root {
  /* Farben als RGB-Kanäle (fuer Tailwind + Transparenz), im Admin ueberschreibbar */
  --c-accent: 201 162 75;
  --c-accent-soft: 228 200 119;
  --c-bg: 11 11 13;
  --c-surface: 19 19 23;
  --c-surface2: 28 28 34;
  --c-text: 233 233 238;

  /* Komfort-Aliasse (volle Farben) */
  --gold: rgb(var(--c-accent));
  --gold-soft: rgb(var(--c-accent-soft));
  --ink: rgb(var(--c-bg));
  --ink-2: rgb(var(--c-surface));
  --ink-3: rgb(var(--c-surface2));
  --paper: #f5f2ea;
  --muted: #9a9aa2;

  /* Schriften & Formen (im Admin waehlbar) */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --btn-radius: 999px;
  --card-radius: 18px;
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }

/* ---------- Barrierefreiheit ---------- */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 100;
  background: var(--gold); color: #1a1409; font-weight: 600;
  padding: .7rem 1.2rem; border-radius: 0 0 10px 10px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; outline: none; }

/* Sichtbarer Tastatur-Fokus (nur bei Tastaturnutzung) */
:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  background: var(--ink);
  color: rgb(var(--c-text));
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.font-display { font-family: var(--font-display); }

/* ---------------------------------------------------------------
   Textfarbe an das Theme koppeln: "text-white/xx" folgt --c-text,
   damit die Seite auch mit hellem Hintergrund lesbar bleibt.
   (Nur öffentliche Seite – der Admin lädt main.css nicht.)
   Bild-/Overlay-Texte bleiben separat weiß (siehe #fff-Regeln unten).
--------------------------------------------------------------- */
.text-white       { color: rgb(var(--c-text)) !important; }
.text-white\/95   { color: rgb(var(--c-text) / .95) !important; }
.text-white\/90   { color: rgb(var(--c-text) / .90) !important; }
.text-white\/85   { color: rgb(var(--c-text) / .85) !important; }
.text-white\/80   { color: rgb(var(--c-text) / .80) !important; }
.text-white\/75   { color: rgb(var(--c-text) / .75) !important; }
.text-white\/70   { color: rgb(var(--c-text) / .70) !important; }
.text-white\/65   { color: rgb(var(--c-text) / .65) !important; }
.text-white\/60   { color: rgb(var(--c-text) / .60) !important; }
.text-white\/55   { color: rgb(var(--c-text) / .55) !important; }
.text-white\/50   { color: rgb(var(--c-text) / .50) !important; }
.text-white\/45   { color: rgb(var(--c-text) / .45) !important; }
.text-white\/40   { color: rgb(var(--c-text) / .40) !important; }
.text-white\/30   { color: rgb(var(--c-text) / .30) !important; }
.text-white\/25   { color: rgb(var(--c-text) / .25) !important; }
.text-white\/20   { color: rgb(var(--c-text) / .20) !important; }
/* dezente Rahmen/Flächen ebenfalls themeabhängig */
.border-white\/5  { border-color: rgb(var(--c-text) / .08) !important; }
.border-white\/10 { border-color: rgb(var(--c-text) / .12) !important; }

/* ---------- Gold-Text / Trennlinien ---------- */
.text-gold { color: var(--gold); }
.gold-gradient {
  background: linear-gradient(90deg, var(--gold-soft), var(--gold) 55%, #a97f2e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.divider {
  width: 68px; height: 2px; border: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.25rem 0;
}
.divider.center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: var(--btn-radius);
  font-weight: 600; letter-spacing: .02em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #1a1409;
  box-shadow: 0 10px 30px -10px rgba(201,162,75,.6);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(201,162,75,.75); }
.btn-ghost {
  border: 1px solid rgba(201,162,75,.5); color: var(--gold);
}
.btn-ghost:hover { background: rgba(201,162,75,.1); transform: translateY(-2px); }

/* ---------- Header / Nav ---------- */
.nav {
  transition: background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.nav.scrolled {
  background: rgb(var(--c-bg) / .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(201,162,75,.18);
}
.nav-link { position: relative; color: rgb(var(--c-text) / .8); transition: color .25s; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--gold); transition: width .3s ease;
}
.nav-link:hover { color: rgb(var(--c-text)); }
.nav-link:hover::after { width: 100%; }

/* Logo (Header/Hero/Footer) */
.site-logo { width: auto; max-width: 100%; object-fit: contain; display: inline-block; }

/* Menüzeile: konfigurierbarer Stil */
.nav-menu.nav-upper .nav-link,
.nav-menu.nav-upper .btn { text-transform: uppercase; letter-spacing: .09em; }
.nav-menu.nav-w-normal   .nav-link { font-weight: 400; }
.nav-menu.nav-w-medium   .nav-link { font-weight: 500; }
.nav-menu.nav-w-semibold .nav-link { font-weight: 600; }
.nav-ico { display: inline-block; margin-right: .3rem; }
/* Effekt-Varianten */
.nav-menu.nav-fx-none  .nav-link::after { display: none; }
.nav-menu.nav-fx-none  .nav-link:hover  { color: var(--gold); }
.nav-menu.nav-fx-grow  .nav-link::after { left: 50%; transform: translateX(-50%); }
.nav-menu.nav-fx-scale .nav-link::after { display: none; }
.nav-menu.nav-fx-scale .nav-link { transition: color .25s, transform .25s; display: inline-block; }
.nav-menu.nav-fx-scale .nav-link:hover { transform: scale(1.12); color: var(--gold); }
.nav-menu.nav-fx-glow  .nav-link::after { display: none; }
.nav-menu.nav-fx-glow  .nav-link:hover { color: var(--gold); text-shadow: 0 0 12px rgb(var(--c-accent) / .8); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(201,162,75,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(201,162,75,.10), transparent 60%),
    var(--ink);
}
/* Hero mit Hintergrundbild: Text immer hell (liegt über dunklem Overlay) */
.hero-on-image [class*="text-white"] { color: #fff !important; }
.hero-on-image .gold-gradient { -webkit-text-fill-color: transparent; }
/* Overlay als eigene Ebene mit Variable -> Stärke live in der Admin-Vorschau regelbar */
.hero-on-image::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(0, 0, 0, var(--hero-ov, .55));
}
.hero-on-image > * { position: relative; z-index: 1; }

/* Wählbare Hero-Höhe (reduziert Leerraum auf großen Bildschirmen) */
.hero.hero-h-full    { min-height: 100svh; }
.hero.hero-h-large   { min-height: 80svh; }
.hero.hero-h-compact { min-height: 62svh; }
/* Kompakt-Layout: etwas weniger Innenabstand */
.hero.hero-compact .grid { padding-top: 7rem; padding-bottom: 4rem; }
.hero-portrait {
  filter: grayscale(15%) contrast(1.05);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(201,162,75,.25);
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero-ring {
  position: absolute; inset: -8%;
  border-radius: 50%;
  border: 1px solid rgba(201,162,75,.25);
  animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* schwebende Tonwellen im Hero */
.wave-bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.wave-bars span {
  width: 4px; border-radius: 4px; background: linear-gradient(var(--gold-soft), var(--gold));
  animation: wave 1.2s ease-in-out infinite;
}
.wave-bars span:nth-child(2){ animation-delay:.1s } .wave-bars span:nth-child(3){ animation-delay:.2s }
.wave-bars span:nth-child(4){ animation-delay:.3s } .wave-bars span:nth-child(5){ animation-delay:.15s }
.wave-bars span:nth-child(6){ animation-delay:.25s } .wave-bars span:nth-child(7){ animation-delay:.05s }
@keyframes wave { 0%,100%{ height:8px } 50%{ height:38px } }

/* ---------- Section Basics ---------- */
.section { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }
.eyebrow { letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; color: var(--gold); }
.card {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgb(var(--c-text) / .08);
  border-radius: var(--card-radius);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,75,.4);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}

/* ---------- Audio-Player ---------- */
.audio-card { padding: 1.25rem 1.4rem; }
.audio-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.play-btn {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #1a1409; transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px -10px rgba(201,162,75,.7);
}
.play-btn:hover { transform: scale(1.06); }
.play-btn svg { width: 22px; height: 22px; }
.progress {
  height: 6px; border-radius: 999px; background: rgb(var(--c-text) / .12);
  overflow: hidden; cursor: pointer; position: relative;
}
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.audio-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.download-link { color: var(--muted); transition: color .2s; }
.download-link:hover { color: var(--gold); }

/* ---------- Hörproben-Filter-Tabs ---------- */
.audio-tab {
  padding: .5rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 500;
  color: rgb(var(--c-text) / .8); border: 1px solid rgb(var(--c-text) / .15); background: rgb(var(--c-text) / .03);
  transition: all .25s ease;
}
.audio-tab:hover { border-color: rgba(201,162,75,.5); color: rgb(var(--c-text)); }
.audio-tab.is-active {
  color: #1a1409; border-color: transparent;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}
.audio-card.is-hidden { display: none; }

/* ---------- Audio-Visualisierung ---------- */
.audio-viz { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.audio-viz.viz-wave { display: block; }
.viz-canvas { width: 100%; height: 44px; display: block; }
.audio-card.is-playing { border-color: rgba(201,162,75,.5); }

/* Fixierter Mini-Player */
.mini-player {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%);
  width: min(680px, calc(100% - 24px)); z-index: 60;
  display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem;
  background: rgba(20,20,24,.92); backdrop-filter: blur(14px);
  border: 1px solid rgba(201,162,75,.3); border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.9);
  transition: transform .35s cubic-bezier(.2,.9,.3,1); opacity: 0;
}
.mini-player.open { transform: translate(-50%, 0); opacity: 1; }
.mp-btn {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #1a1409; cursor: pointer;
}
.mp-btn svg { width: 20px; height: 20px; }
.mp-btn-sm { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #cfcfd6; cursor: pointer; }
.mp-btn-sm:hover { color: var(--gold); background: rgba(255,255,255,.05); }
.mp-info { flex: 0 0 auto; width: 150px; }
.mp-title { font-size: .9rem; font-weight: 600; }
.mp-time { font-size: .72rem; font-variant-numeric: tabular-nums; }
.mp-progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); cursor: pointer; overflow: hidden; }
.mp-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
@media (max-width: 640px) { .mp-info { width: 100px; } }

/* ---------- Steps (Wie funktioniert's) ---------- */
.step-num {
  font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; line-height: 1;
  color: var(--gold);
}
.step-icon {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(201,162,75,.12); color: var(--gold); border: 1px solid rgba(201,162,75,.3);
}

/* ---------- Video: Klick-zum-Laden + Lightbox ---------- */
.video-embed { position: relative; cursor: pointer; border: 0; padding: 0; background: none; }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #1a1409;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.7); transition: transform .25s ease;
}
.video-embed:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-note {
  position: absolute; bottom: 8px; left: 8px; right: 8px; font-size: .68rem; color: #fff;
  background: rgba(0,0,0,.55); padding: .25rem .5rem; border-radius: 6px; opacity: 0; transition: opacity .25s;
}
.video-embed:hover .video-note { opacity: 1; }
.video-item.is-hidden { display: none; }

.video-lightbox {
  position: fixed; inset: 0; z-index: 90; display: none; place-items: center;
  background: rgba(0,0,0,.9); padding: 4vw;
}
.video-lightbox.open { display: grid; }
.video-lightbox .vl-frame { width: min(1100px, 100%); aspect-ratio: 16/9; }
.video-lightbox iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }
.vl-close {
  position: absolute; top: 18px; right: 26px; font-size: 2.4rem; line-height: 1; color: #fff;
  background: none; border: 0; cursor: pointer; opacity: .8;
}
.vl-close:hover { opacity: 1; color: var(--gold); }

/* ---------- Referenzen ---------- */
.ref-chip {
  border: 1px solid rgb(var(--c-text) / .1);
  border-radius: 12px; padding: 1rem 1.25rem; text-align: center;
  color: rgb(var(--c-text) / .85); background: rgb(var(--c-text) / .03);
  transition: all .3s ease;
}
.ref-chip:hover { border-color: rgba(201,162,75,.5); color: rgb(var(--c-text)); transform: translateY(-4px); }

/* ============ Bildergalerie ============ */
.gallery-thumb {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: none; overflow: hidden; border-radius: var(--card-radius);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gallery-thumb:hover img { transform: scale(1.06); }
.gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .9rem .8rem; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: .9rem; font-weight: 600;
  opacity: 0; transform: translateY(8px); transition: all .3s ease;
}
.gallery-cap small { display: block; font-weight: 400; opacity: .8; font-size: .78rem; }
.gallery-thumb:hover .gallery-cap { opacity: 1; transform: translateY(0); }

/* Raster: gleich große Kacheln */
.gallery-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid .gallery-thumb { aspect-ratio: 1 / 1; }

/* Lightbox-Modus: etwas größere klickbare Kacheln */
.gallery-lightbox { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px){ .gallery-lightbox { grid-template-columns: repeat(3, 1fr); } }
.gallery-lightbox .gallery-thumb { aspect-ratio: 4 / 3; }

/* Masonry: Mauerwerk */
.gallery-masonry { column-count: 2; column-gap: .9rem; }
@media (min-width: 640px){ .gallery-masonry { column-count: 3; } }
@media (min-width: 1024px){ .gallery-masonry { column-count: 4; } }
.gallery-masonry .gallery-thumb { margin-bottom: .9rem; break-inside: avoid; }
.gallery-masonry .gallery-thumb img { height: auto; }

/* Vollbild-Portfolio */
.gallery-full { position: relative; margin-bottom: 1.5rem; border-radius: var(--card-radius); overflow: hidden; }
.gallery-full img { width: 100%; max-height: 90svh; object-fit: cover; display: block; }
.gallery-full figcaption { position: absolute; left: 0; bottom: 0; padding: 2rem 1.5rem 1.3rem; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; width: 100%; }

/* Slideshow / Karussell */
.gallery-slideshow { position: relative; }
.gallery-slides { position: relative; border-radius: var(--card-radius); overflow: hidden; background: var(--ink-2); }
.gallery-slide { display: none; }
.gallery-slide.active { display: block; animation: fadeSlide .6s ease; }
.gallery-slide img { width: 100%; max-height: 78svh; object-fit: contain; display: block; margin: 0 auto; background: #000; }
.gallery-slide figcaption { text-align: center; padding: .9rem; color: #fff; }
@keyframes fadeSlide { from { opacity: .2; } to { opacity: 1; } }
.gs-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; border: 0; font-size: 1.6rem; cursor: pointer; z-index: 2;
}
.gs-nav:hover { background: var(--gold); color: #1a1409; }
.gs-prev { left: 12px; } .gs-next { right: 12px; }
.gs-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.gs-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); cursor: pointer; }
.gs-dot.active { background: var(--gold); }

/* Galerie-Lightbox-Overlay */
.glb { position: fixed; inset: 0; z-index: 95; display: none; place-items: center; background: rgba(0,0,0,.92); }
.glb.open { display: grid; }
.glb .gl-stage { max-width: 92vw; max-height: 88vh; text-align: center; }
.glb .gl-stage img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.glb .gl-cap { color: #fff; margin-top: .8rem; font-size: .95rem; }
.gl-close { position: absolute; top: 16px; right: 24px; font-size: 2.4rem; color: #fff; background: none; border: 0; cursor: pointer; }
.gl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; border: 0; font-size: 2rem; cursor: pointer; }
.gl-nav:hover { background: var(--gold); color: #1a1409; }
.gl-prev { left: 3vw; } .gl-next { right: 3vw; }
.gl-close:hover { color: var(--gold); }

/* ---------- FAQ-Accordion ---------- */
.faq-q { cursor: pointer; }
.faq-icon { font-size: 1.6rem; line-height: 1; transition: transform .3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }

/* ---------- Kontakt / Formular ---------- */
.field {
  width: 100%; background: rgb(var(--c-text) / .05); border: 1px solid rgb(var(--c-text) / .15);
  border-radius: 12px; padding: .9rem 1.1rem; color: rgb(var(--c-text)); transition: border-color .25s, box-shadow .25s;
}
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,75,.15); }
.field::placeholder { color: #75757e; }

/* ---------- Rechtstexte (Impressum/Datenschutz) ---------- */
.legal-content h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; color: #fff; margin: 1.5rem 0 .5rem; }
.legal-content h3 { font-size: 1.15rem; font-weight: 600; color: var(--gold); margin: 1.4rem 0 .35rem; }
.legal-content p { margin-bottom: .75rem; }
.legal-content a { color: var(--gold); text-decoration: underline; }
.legal-content ul { list-style: disc; padding-left: 1.4rem; margin-bottom: .75rem; }

/* ---------- Rich-Text (Über mich aus WYSIWYG) ---------- */
.richtext h3 { font-family: var(--font-display); font-size: 1.6rem; color: #fff; margin: 1rem 0 .3rem; }
.richtext a { color: var(--gold); text-decoration: underline; }
.richtext ul { list-style: disc; padding-left: 1.4rem; }
.richtext ol { list-style: decimal; padding-left: 1.4rem; }
.richtext strong { color: #fff; }

/* Kurzes Hervorheben einer Sektion, wenn die Admin-Vorschau dorthin springt */
.pv-flash { animation: pvFlash 1.2s ease; }
@keyframes pvFlash {
  0%, 100% { box-shadow: inset 0 0 0 0 rgb(var(--c-accent) / 0); }
  25%      { box-shadow: inset 0 0 0 3px rgb(var(--c-accent) / .9); }
}

/* ---------- Social-Kanäle ---------- */
.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.social-ico {
  display: grid; place-items: center; width: 40px; height: 40px;
  color: var(--sc, var(--gold));
  border: 1px solid rgb(var(--c-text) / .14);
  background: rgb(var(--c-text) / .04);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.social-ico svg { fill: var(--sc, currentColor); color: var(--sc, currentColor); }
.social-ico:hover { transform: translateY(-2px); background: rgb(var(--c-text) / .1); border-color: var(--sc, var(--gold)); }
.socials-circle  .social-ico { border-radius: 50%; }
.socials-rounded .social-ico { border-radius: 10px; }
.socials-square  .social-ico { border-radius: 0; }
/* im Menü kompakter & ohne Rahmen */
.nav .socials { margin-top: 0; margin-left: .5rem; gap: .25rem; }
.nav .social-ico { width: 34px; height: 34px; border: 0; background: transparent; }
.nav .social-ico:hover { background: rgb(var(--c-text) / .08); transform: none; }

/* ---------- Cookie-Consent-Banner ---------- */
.cookie-banner {
  position: fixed; z-index: 100; background: rgb(var(--c-surface)); color: rgb(var(--c-text));
  border: 1px solid rgb(var(--c-text) / .12); box-shadow: 0 20px 60px -20px rgba(0,0,0,.7);
}
.cookie-banner[hidden] { display: none; }
.cookie-bar { left: 0; right: 0; bottom: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.cookie-box { right: 18px; bottom: 18px; width: min(440px, calc(100% - 24px)); border-radius: 16px; }
.cookie-inner { max-width: 1200px; margin: 0 auto; padding: .8rem 1.2rem; }
.cookie-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cookie-text { flex: 1 1 340px; min-width: 220px; margin: 0; font-size: .86rem; line-height: 1.45; color: rgb(var(--c-text) / .72); }
.cookie-title { color: rgb(var(--c-text)); font-weight: 700; }
.cookie-link { color: var(--gold); text-decoration: underline; white-space: nowrap; }
.cookie-actions { display: flex; gap: .5rem; flex-wrap: wrap; flex: 0 0 auto; }
.cookie-btn { padding: .5rem 1.05rem; border-radius: var(--btn-radius); font-weight: 600; font-size: .84rem; cursor: pointer; border: 1px solid rgb(var(--c-text) / .25); background: transparent; color: rgb(var(--c-text)); white-space: nowrap; }
.cookie-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.cookie-btn-gold { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #1a1409; border: 0; }
.cookie-cats { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; align-items: stretch; }
.cookie-cat { flex: 1 1 210px; display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .7rem; border: 1px solid rgb(var(--c-text) / .12); border-radius: 10px; font-size: .8rem; color: rgb(var(--c-text) / .85); }
.cookie-cat input { margin-top: .15rem; accent-color: var(--gold); }
.cookie-cat b { display: block; }
.cookie-cat small { display: block; color: rgb(var(--c-text) / .55); font-size: .72rem; margin-top: .1rem; }
.cookie-cat--fixed { opacity: .7; }
.cookie-save-inline { flex: 0 0 auto; align-self: center; }
/* Ultra-kompakt: Kategorien erst nach Klick auf „Einstellungen" */
.cookie-banner.mode-compact .cookie-cats { display: none; }
.cookie-banner.mode-compact.show-details .cookie-cats { display: flex; }
/* Box-Position: alles gestapelt */
.cookie-box .cookie-head { flex-direction: column; align-items: stretch; }
.cookie-box .cookie-actions { justify-content: flex-end; }
.cookie-box .cookie-cat { flex-basis: 100%; }
.cookie-reopen {
  position: fixed; left: 16px; bottom: 16px; z-index: 90; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgb(var(--c-text) / .15); background: rgb(var(--c-surface)); font-size: 1.2rem; cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
}
.cookie-reopen[hidden] { display: none; }

/* ---------- Footer ---------- */
footer a:hover { color: var(--gold); }

/* ---------- Reveal (Fallback falls AOS fehlt) ---------- */
[data-aos] { will-change: transform, opacity; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2a2a31; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Mobile Menu */
#mobileMenu { transition: opacity .3s ease, transform .3s ease; }