/* ============================================================
   THOMAS GABRIEL – the modern art of magic
   Haupt-Stylesheet  |  style.css  |  Version 2.0

   FARB-SYSTEM (orientiert am offiziellen Logo-Bild):
   --silver-metallic = Silberner Metallic-Schriftzug (Logo)
   --purple-nebula   = Lila Nebel-Effekt
   --bg-black        = Tiefes Schwarz-Blau (Hintergrund)

   TYPOGRAFIE-VORGABEN:
   Headline 1 → Cinzel Bold
   Headline 2 → Cinzel Regular
   Subhead    → Times New Roman
   Body       → Times New Roman
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');

/* ── Designvariablen ── */
:root {
  /* Hintergründe – tiefes Schwarz mit Blau-Violett-Stich (wie Referenzbild) */
  --bg-black:       #060509;
  --bg-deep:        #0a0712;
  --bg-card:        #110d1c;
  --bg-card-hover:  #181226;

  /* Royal-Purple-Töne (dunkler, edler – nach Vorgabe) */
  --purple-nebula:  #4b2d82;
  --purple-glow:    #5a2d91;
  --purple-bright:  #8456c4;
  --purple-dark:    #2e1a52;
  --purple-dim:     #1d1138;

  /* Silber-Metallic (für Schriftzüge wie im Logo) */
  --silver-metallic:#e4ddf0;
  --silver-bright:  #f4eeff;
  --silver-mid:     #c4bbd8;
  --silver-dim:     #8a8099;
  --silver-faint:   #2d2640;

  /* Schriften */
  --font-display:   'Cinzel', 'Times New Roman', serif;     /* Headlines */
  --font-body:      'Times New Roman', 'Georgia', serif;    /* Subheads + Body */

  --transition:     all 0.35s ease;
  --radius:         3px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 20px; }
body {
  background: var(--bg-black);
  color: var(--silver-mid);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════════════════════════
   TYPOGRAFIE (nach Vorgaben)
   Headline 1: Cinzel Bold      | Headline 2: Cinzel Regular
   Subhead:    Times New Roman  | Body:       Times New Roman
   ════════════════════════════════════════════════════════════ */

/* Headlines = Cinzel */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.25;
  color: var(--silver-bright);
}
/* H1 + H2 = Cinzel Bold (700) */
h1 { font-weight: 700; font-size: clamp(2.2rem, 5.5vw, 3.8rem); letter-spacing: 0.06em; }
h2 { font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 2.9rem); letter-spacing: 0.05em; }
/* H3 + H4 = Cinzel Regular (400) */
h3 { font-weight: 400; font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: 0.05em; }
h4 { font-weight: 400; font-size: 1.3rem; letter-spacing: 0.06em; }

/* Body = Times New Roman */
p {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--silver-mid);
  max-width: 68ch;
  line-height: 1.82;
}

a  { color: var(--purple-bright); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--silver-bright); }
img { display: block; max-width: 100%; height: auto; }
ul  { list-style: none; }

/* Silberner Metallic-Schriftzug-Effekt (wie im Logo) */

/* ── Utilities ── */
.container { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; }
.text-center { text-align: center; }
.text-center p { margin-left: auto; margin-right: auto; }

.divider {
  width: 90px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple-glow), transparent);
  margin: 1.1rem auto;
}
.section-header { text-align: center; margin-bottom: 3rem; }
/* Eyebrow (kleiner violetter Text über den Überschriften) – gilt überall,
   damit auch Einzel-Eyebrows wie „Nächste Vorstellung" violett & gleich groß sind */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 400; font-style: italic;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--purple-bright);
  display: block; margin-bottom: 0.7rem;
}
.section { padding: 5.5rem 2rem; position: relative; }
.section--dark { background: var(--bg-deep); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.95rem 2.3rem;
  border-radius: var(--radius);
  cursor: pointer; transition: var(--transition);
  border: 1px solid transparent;
}
.btn-primary {
  background: linear-gradient(135deg, var(--purple-glow), var(--purple-nebula));
  color: var(--silver-bright);
  border-color: var(--purple-glow);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--purple-bright), var(--purple-glow));
  border-color: var(--purple-bright);
  color: #fff;
  box-shadow: 0 0 30px rgba(90,45,145,0.5);
}
.btn-outline {
  background: transparent; color: var(--silver-mid);
  border-color: var(--silver-faint);
}
.btn-outline:hover { border-color: var(--purple-bright); color: var(--purple-bright); }

/* ── SPRACH-UMSCHALTER ── */
.lang-switch {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--silver-faint);
  border-radius: 20px; padding: 3px;
}
.lang-btn {
  background: none; border: none;
  font-family: var(--font-display);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; color: var(--silver-dim);
  padding: 4px 11px; border-radius: 16px;
  cursor: pointer; transition: var(--transition);
}
.lang-btn.active { background: var(--purple-glow); color: var(--silver-bright); }
.lang-btn:hover:not(.active) { color: var(--silver-bright); }

/* ── NAVIGATION ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000; padding: 1.2rem 0; transition: var(--transition);
}
.nav.scrolled {
  background: rgba(6,5,9,0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--silver-faint); padding: 0.7rem 0;
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; gap: 1.5rem;
}
.nav__logo { display: flex; flex-direction: column; line-height: 1.2; text-decoration: none; flex-shrink: 0; }
.nav__logo-name {
  font-family: var(--font-display); font-size: 23px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--silver-bright); white-space: nowrap;
}
.nav__logo-tagline {
  font-family: var(--font-body); font-size: 15px; font-style: normal;
  letter-spacing: 0.12em; color: var(--purple-bright); text-transform: lowercase; white-space: nowrap;
}
.nav__links { display: flex; gap: 1.5rem; align-items: center; flex: 1; justify-content: center; }
.nav__links a {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver-dim); position: relative; transition: var(--transition);
}
.nav__links a::after {
  content:''; position:absolute; bottom:-5px; left:0; width:0; height:1px;
  background:var(--purple-glow); transition:var(--transition);
}
.nav__links a:hover, .nav__links a.active { color: var(--silver-bright); }
.nav__links a:hover::after, .nav__links a.active::after { width: 100%; }
.nav__right { display: flex; align-items: center; gap: 1rem; }
.nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; }
.nav__hamburger span { display: block; width: 24px; height: 1px; background: var(--silver-mid); transition: var(--transition); }
.nav__mobile {
  display: none; flex-direction: column;
  background: rgba(6,5,9,0.99); border-top: 1px solid var(--silver-faint); padding: 0.5rem 0;
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver-dim); padding: 0.9rem 1.5rem; transition: var(--transition);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.nav__mobile a:hover { color: var(--purple-bright); background: rgba(90,45,145,0.07); }

/* ── HERO ── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 52%;
}
/* .hero__bg.loaded nicht mehr nötig – Animation übernimmt */
/* Sanfter Verlauf nach unten, damit Text/Buttons lesbar bleiben */
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(6,5,9,0.15) 0%, rgba(6,5,9,0) 30%,
      rgba(6,5,9,0.45) 75%, rgba(6,5,9,0.95) 100%);
}
.hero__content { position: relative; z-index: 1; padding: 2rem; animation: heroIn 1.7s ease forwards; }
@keyframes heroIn { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
/* Logo mittig im Nebel – transparentes PNG, großzügig dimensioniert */
.hero__logo-img {
  width: min(640px, 88vw); margin: 0 auto 2rem;
  filter: drop-shadow(0 0 60px rgba(90,45,145,0.55));
}

/* ── HERO – animierter Hintergrund + statisches Logo-IMG ──
   Hintergrund läuft (Ken-Burns), Logo ist <img> → immer scharf
   ─────────────────────────────────────────────────────────── */

/* Hintergrund: langsamer Ken-Burns-Zoom */
.hero__bg {
  animation: heroKenBurns 24s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}

/* Sanft pulsierender Nebel-Schimmer */
.hero__shimmer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at center 55%,
              rgba(90,45,145,0.18) 0%, transparent 65%);
  mix-blend-mode: screen;
  animation: heroShimmer 8s ease-in-out infinite;
}
@keyframes heroShimmer {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}

/* Statisches Logo-Bild (scharfes PNG, kein background-image) */
.hero__logo-img {
  /* Kleiner, damit das komplette Logo IM Nebelring sitzt */
  width: min(520px, 78vw);
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
  /* KEINE transform-Animation – Logo bleibt statisch scharf */
  filter: drop-shadow(0 0 40px rgba(90,45,145,0.45));
  flex-shrink: 0;
}

/* Dezenter Verlauf am unteren Rand */
.hero__overlay {
  background: linear-gradient(to bottom,
    rgba(6,5,9,0) 0%, rgba(6,5,9,0) 45%,
    rgba(6,5,9,0.4) 82%, rgba(6,5,9,0.97) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg    { animation: none; }
  .hero__shimmer { animation: none; opacity: 0.5; }
}

@media (max-width: 768px) {
  .hero__logo-img { width: min(340px, 88vw); }
}

.hero__divider {
  width: 130px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple-glow), transparent);
  margin: 0 auto 2rem;
}

.hero__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(9px); } }

/* ── SEITEN-HEADER ── */
.page-header { padding: 10.5rem 2rem 4rem; text-align: center; position: relative; overflow: hidden; }
.page-header::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at center 65%, rgba(90,45,145,0.13) 0%, transparent 62%);
  pointer-events: none;
}
.page-header__sub {
  font-family: var(--font-body); font-style: italic; font-size: 1rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--purple-bright);
  display: block; margin-bottom: 0.8rem;
}
.page-header__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem,5.5vw,3.6rem);
  background: linear-gradient(180deg,#ffffff 0%,#cfc6e0 35%,#a89dc2 60%,#ece5f7 80%,#b3a8cf 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── REFERENZEN / KUNDEN (Text-Variante) ── */
/* ── REFERENZEN / KUNDEN – dreispaltige Textliste ── */
.clients-text {
  padding: 4rem 2rem;
  background: var(--bg-deep);
}
/* ── Vertikales Kunden-Laufband ── */
/* Die Bewegung wird vollständig per JavaScript über transform: translateY
   gesteuert (siehe main.js). Das erlaubt sowohl den automatischen Lauf als
   auch echtes Endlos-Scrollen mit dem Mausrad beim Hover. */
.clients-marquee {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  height: 280px;              /* sichtbarer Ausschnitt */
  overflow: hidden;
  cursor: ns-resize;          /* signalisiert vertikale Scrollbarkeit */
  /* sanftes Aus-/Einblenden oben und unten */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.clients-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
/* Zwei-Spalten-Laufband: zwei eigenständige Spuren nebeneinander */
.clients-marquee--2col {
  max-width: 860px;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}
.clients-marquee--2col .clients-track { flex: 1 1 50%; min-width: 0; }
@media (max-width: 520px) {
  .clients-marquee--2col { gap: 0.5rem; }
  .clients-marquee--2col .client-name { font-size: 0.95rem; }
}
.client-item {
  text-align: center;
  padding: 0.75rem 1rem;
}
.client-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--silver-mid);
  letter-spacing: 0.03em;
  line-height: 1.3;
  transition: color .2s;
}
.client-item:hover .client-name {
  color: var(--silver-bright);
}
/* Nutzer mit reduzierter Bewegung: keine Auto-Bewegung, normale Liste */
@media (prefers-reduced-motion: reduce) {
  .clients-marquee {
    height: auto;
    cursor: default;
    -webkit-mask-image: none;
            mask-image: none;
  }
}
@media (max-width: 520px) {
  .clients-marquee { height: 240px; }
  .client-name { font-size: 1.05rem; }
}

/* ── KARTEN ── */
.card { background: var(--bg-card); border: 1px solid var(--silver-faint); border-radius: var(--radius); padding: 2rem; transition: var(--transition); }
.card:hover { border-color: var(--purple-dark); background: var(--bg-card-hover); box-shadow: 0 0 30px rgba(90,45,145,0.12); }

/* ── GALERIE ── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.85rem; }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius); cursor: pointer; aspect-ratio: 3/4; border: 1px solid var(--silver-faint); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform 0.55s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__overlay { position:absolute; inset:0; background: linear-gradient(to top, rgba(6,5,9,0.85) 0%, transparent 55%); opacity:0; transition:var(--transition); display:flex; align-items:flex-end; padding:1rem; }
.gallery-item:hover .gallery-item__overlay { opacity:1; }
.gallery-caption { font-family: var(--font-body); font-style: italic; font-size:0.85rem; color:var(--silver-mid); letter-spacing:0.04em; }

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; z-index:9999; background:rgba(3,2,6,0.97); align-items:center; justify-content:center; }
.lightbox.active { display:flex; }
.lightbox__img { max-width:90vw; max-height:90vh; object-fit:contain; border:1px solid var(--silver-faint); border-radius:var(--radius); }
.lightbox__close { position:absolute; top:1.25rem; right:1.5rem; background:none; border:none; color:var(--silver-mid); font-size:2.2rem; cursor:pointer; transition:var(--transition); line-height:1; }
.lightbox__close:hover { color:var(--silver-bright); }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(90,45,145,0.25); border:1px solid var(--purple-dark); color:var(--silver-bright); font-size:1.6rem; padding:0.75rem 1rem; cursor:pointer; transition:var(--transition); }
.lightbox__nav:hover { background:var(--purple-glow); }
.lightbox__nav--prev { left:1rem; }
.lightbox__nav--next { right:1rem; }

/* ── TERMINE ── */
.events-grid { display:grid; grid-template-columns:1fr; gap:1rem; max-width:900px; margin:0 auto; }
.event-card { background:var(--bg-card); border:1px solid var(--silver-faint); border-radius:var(--radius); padding:1.8rem 2rem; display:flex; gap:1.6rem; align-items:center; transition:var(--transition); text-decoration:none; color:inherit; cursor:pointer; width:100%; }
.event-card:hover { border-color:var(--purple-glow); background:var(--bg-card-hover); box-shadow:0 0 28px rgba(90,45,145,0.2); transform:translateY(-3px); color:inherit; }
.event-card__date { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:80px; min-height:80px; padding:6px 5px; gap:2px; background:linear-gradient(135deg,var(--purple-dim),var(--purple-dark)); border:1px solid var(--purple-dark); border-radius:var(--radius); flex-shrink:0; }
.event-card__day  { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--silver-bright); line-height:1; }
.event-card__month { font-family:var(--font-body); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--purple-bright); }
.event-card__time { font-family:var(--font-body); font-size:0.7rem; font-weight:600; letter-spacing:0.03em; color:var(--silver-mid); margin-top:3px; white-space:nowrap; text-align:center; }
.event-card__info { flex:1; }
.event-card__title { font-family:var(--font-display); font-weight:400; font-size:1.25rem; color:var(--silver-bright); margin-bottom:0.25rem; letter-spacing:0.03em; }
.event-card__location { font-family:var(--font-body); font-size:1.02rem; color:var(--silver-dim); margin-bottom:0.4rem; }
.event-card__link-hint { font-family:var(--font-body); font-style:italic; font-size:0.92rem; letter-spacing:0.08em; color:var(--purple-bright); }
.events-past .event-card { opacity:0.4; filter:grayscale(0.4); }
.events-past .event-card:hover { opacity:0.6; }

/* ── KONTAKT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; align-items:start; }
.contact-info__item { display:flex; gap:1rem; margin-bottom:1.4rem; align-items:flex-start; }
.contact-info__icon { width:42px; height:42px; background:linear-gradient(135deg,var(--purple-dim),var(--purple-dark)); border:1px solid var(--purple-dark); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.contact-info__label { font-family:var(--font-body); font-style:italic; font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--purple-bright); display:block; margin-bottom:0.15rem; }
.contact-info__value { font-family:var(--font-body); color:var(--silver-mid); font-size:0.98rem; }
.social-links { display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:1.5rem; }
.social-link { display:flex; align-items:center; gap:0.5rem; background:var(--bg-card); border:1px solid var(--silver-faint); border-radius:var(--radius); padding:0.55rem 0.95rem; font-family:var(--font-body); font-size:0.85rem; color:var(--silver-dim); text-decoration:none; transition:var(--transition); }
.social-link:hover { border-color:var(--purple-glow); color:var(--purple-bright); background:var(--bg-card-hover); }
.form-group { margin-bottom:1.4rem; }
.form-group label { display:block; font-family:var(--font-body); font-style:italic; font-size:18px; letter-spacing:0.14em; text-transform:uppercase; color:var(--silver-dim); margin-bottom:0.45rem; }
.form-group input, .form-group textarea, .form-group select {
  width:100%; background:var(--bg-card); border:1px solid var(--silver-faint); border-radius:var(--radius);
  padding:0.85rem 1rem; color:var(--silver-bright); font-family:var(--font-body); font-size:1rem; transition:var(--transition); outline:none;
}
.form-group input:focus, .form-group textarea:focus { border-color:var(--purple-glow); background:var(--bg-card-hover); box-shadow:0 0 0 3px rgba(90,45,145,0.14); }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--silver-faint); font-style:italic; }
.form-group textarea { resize:vertical; min-height:130px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.hp-field { display:none !important; visibility:hidden; position:absolute; left:-9999px; }
.form-message { padding:0.9rem 1.2rem; border-radius:var(--radius); margin-top:1rem; font-family:var(--font-body); font-size:0.92rem; display:none; }
.form-message.success { background:rgba(46,213,115,0.08); border:1px solid rgba(46,213,115,0.3); color:#2ed573; display:block; }
.form-message.error   { background:rgba(255,71,87,0.08);  border:1px solid rgba(255,71,87,0.3);  color:#ff4757; display:block; }

/* ── VITA ── */
.vita-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.vita-portrait { position:sticky; top:100px; }
.vita-portrait img { width:100%; border-radius:var(--radius); border:1px solid var(--silver-faint); filter:brightness(0.9) contrast(1.06); }
.vita-portrait-wrap { position:relative; }
.vita-portrait-wrap::after { content:''; position:absolute; top:14px; left:14px; right:-14px; bottom:-14px; border:1px solid var(--purple-dark); border-radius:var(--radius); z-index:-1; }
.vita-quote { border-left:2px solid var(--purple-glow); padding:1.1rem 1.6rem; margin:2rem 0; background:var(--bg-card); border-radius:0 var(--radius) var(--radius) 0; }
.vita-quote p { font-family:var(--font-body); font-style:italic; font-size:1.1rem; color:var(--silver-mid); max-width:none; }
.vita-quote cite { font-family:var(--font-display); font-size:0.8rem; letter-spacing:0.12em; color:var(--purple-bright); font-style:normal; }
.timeline { position:relative; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:linear-gradient(to bottom, transparent, var(--purple-glow), transparent); }
.timeline-item { position:relative; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--silver-faint); }
.timeline-item:last-child { border-bottom:none; margin-bottom:0; }
.timeline-item::before { content:''; position:absolute; left:-2rem; top:0.5rem; width:9px; height:9px; background:var(--purple-glow); border-radius:50%; box-shadow:0 0 12px rgba(90,45,145,0.7); transform:translateX(-4px); }
.timeline-item__year { font-family:var(--font-display); font-size:0.78rem; letter-spacing:0.16em; color:var(--purple-bright); margin-bottom:0.25rem; }
.timeline-item__title { font-family:var(--font-display); font-weight:400; font-size:1.05rem; color:var(--silver-bright); margin-bottom:0.4rem; letter-spacing:0.03em; }
.timeline-item__text { font-family:var(--font-body); font-size:0.95rem; color:var(--silver-dim); line-height:1.7; }
.awards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; margin-top:2rem; }
.award-card { background:var(--bg-card); border:1px solid var(--silver-faint); border-radius:var(--radius); padding:1.4rem; text-align:center; transition:var(--transition); }
.award-card:hover { border-color:var(--purple-glow); box-shadow:0 0 20px rgba(90,45,145,0.12); }
.award-card__icon { font-size:1.9rem; display:block; margin-bottom:0.65rem; }
.award-card__title { font-family:var(--font-display); font-weight:400; font-size:0.92rem; color:var(--silver-bright); display:block; margin-bottom:0.2rem; }
.award-card__sub { font-family:var(--font-body); font-style:italic; font-size:0.82rem; color:var(--silver-dim); }

/* ── HOMEPAGE FEATURES ── */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:1320px; margin:0 auto; padding:5rem 2rem 0; position:relative; z-index:2; }
.features--two { grid-template-columns:repeat(2,1fr); max-width:900px; }
.feature-card { background:var(--bg-card); border:1px solid var(--silver-faint); border-top:2px solid var(--purple-glow); border-radius:var(--radius); padding:2.4rem 2rem; text-align:center; transition:var(--transition); }
/* Angebots-Karten sind anklickbar (Link zur Angebot-Seite) */
a.feature-card { display:flex; flex-direction:column; text-decoration:none; cursor:pointer; }
a.feature-card .feature-card__text { flex:1 1 auto; }
.feature-card__more { display:inline-block; margin-top:1.2rem; font-family:var(--font-display); font-size:1.05rem; letter-spacing:0.04em; color:var(--purple-bright); transition:color .2s, transform .2s; }
a.feature-card:hover .feature-card__more { color:var(--silver-bright); transform:translateX(4px); }
/* Unvollständige letzte Reihe der Angebots-Karten zentriert (statt linksbündig) */
#angebote-grid.features, #angebote-grid.features--two { display:flex; flex-wrap:wrap; justify-content:center; }
#angebote-grid.features > .feature-card { flex:0 1 var(--fc-w,340px); max-width:var(--fc-max,380px); }
#angebote-grid.features--two > .feature-card { flex:0 1 var(--fc-w,400px); max-width:var(--fc-max,420px); }
@media (max-width:560px){ #angebote-grid.features > .feature-card, #angebote-grid.features--two > .feature-card { flex-basis:100%; max-width:100%; } }

/* ── ANGEBOT-SEITE: Leistungsblöcke (Bild + Text, abwechselnd) ── */
.angebot-block__inner { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.angebot-block__inner--noimg { display:block; max-width:820px; margin:0 auto; }
.angebot-block--reverse .about-preview__img { order:2; }
.angebot-block--reverse .angebot-block__body { order:1; }
.angebot-block .ab-text { font-size:1.18rem; color:var(--silver-dim); line-height:1.75; }
.angebot-block__inner--noimg .ab-text { font-size:1.22rem; }
@media (max-width:820px){
  .angebot-block__inner { grid-template-columns:1fr; gap:1.6rem; }
  .angebot-block--reverse .about-preview__img { order:0; }
}
.feature-card:hover { background:var(--bg-card-hover); box-shadow:0 0 30px rgba(90,45,145,0.18); transform:translateY(-4px); }
.feature-card h3 { font-size:1.85rem; color:var(--silver-bright); margin-bottom:0.9rem; }
.feature-card p  { font-family:var(--font-body); font-size:1.22rem; color:var(--silver-dim); max-width:none; }
.about-preview { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-preview__img { position:relative; }
.about-preview__img img { width:100%; height:580px; object-fit:cover; object-position:top; border-radius:var(--radius); border:1px solid var(--silver-faint); filter:brightness(0.9); }
.about-preview__img::after { content:''; position:absolute; top:14px; left:14px; right:-14px; bottom:-14px; border:1px solid var(--purple-dark); border-radius:var(--radius); z-index:-1; }

/* ── NOTICE BOX ── */
.notice-box { background:rgba(90,45,145,0.07); border:1px solid var(--purple-dark); border-radius:var(--radius); padding:1rem 1.4rem; display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:2.5rem; }
.notice-box p { font-family:var(--font-body); font-size:22px; color:var(--silver-dim); max-width:none; }
.month-divider { font-family:var(--font-display); font-size:0.78rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--purple-bright); padding:0.4rem 0; margin:2rem 0 0.75rem; border-bottom:1px solid var(--silver-faint); }
.month-divider:first-of-type { margin-top:0; }

/* ── IMPRESSUM ── */
.legal-content { max-width:800px; margin:0 auto; }
/* Sprachumschaltung der Rechtstexte: Deutsch standardmäßig sichtbar,
   Englisch nur wenn die Seite auf EN steht (html[lang="en"] wird von main.js gesetzt) */
.legal-lang.legal-en { display: none; }
html[lang="en"] .legal-lang.legal-de { display: none; }
html[lang="en"] .legal-lang.legal-en { display: block; }
.legal-content h2 { font-size:1.4rem; margin-top:2.5rem; margin-bottom:0.6rem; }
.legal-content h3 { font-family:var(--font-display); font-weight:400; font-size:1.1rem; margin-top:1.5rem; margin-bottom:0.4rem; color:var(--silver-mid); }
.legal-content p, .legal-content li { font-family:var(--font-body); font-size:19px; color:var(--silver-dim); line-height:1.85; margin-bottom:0.7rem; }
.legal-content ul { list-style:disc; padding-left:1.5rem; }
.legal-content strong { color:var(--silver-mid); font-weight:700; }

/* ── FOOTER ── */
.footer { background:var(--bg-black); border-top:1px solid var(--silver-faint); padding:3rem 2rem 1.75rem; }
.footer__inner { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:start; margin-bottom:1.75rem; }
.footer__name { font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:0.14em; color:var(--silver-bright); display:block; }
.footer__tagline { font-family:var(--font-body); font-style:normal; font-size:13px; letter-spacing:0.12em; color:var(--purple-bright); text-transform:lowercase; display:block; margin-top:0.2rem; }
.footer__logo-wrap { display:flex; justify-content:center; }
.footer__logo-wrap img { width:150px; opacity:0.8; filter:drop-shadow(0 0 16px rgba(90,45,145,0.4)); }
.footer__links { display:flex; flex-direction:column; align-items:flex-end; gap:0.45rem; }
.footer__links a { font-family:var(--font-display); font-size:16px; letter-spacing:0.13em; text-transform:uppercase; color:var(--silver-dim); }
.footer__links a:hover { color:var(--purple-bright); }
.footer__bottom { max-width:1320px; margin:0 auto; padding-top:1.25rem; border-top:1px solid var(--silver-faint); display:flex; justify-content:space-between; align-items:center; font-family:var(--font-body); font-size:15px; color:var(--silver-dim); flex-wrap:wrap; gap:0.75rem; }

/* ── COOKIE-BANNER ── */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:9998; background:rgba(10,7,18,0.98); border-top:1px solid var(--purple-dark); backdrop-filter:blur(10px); padding:1.1rem 2rem; display:none; }
.cookie-banner.visible { display:block; }
.cookie-banner__inner { max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.cookie-banner__text { flex:1; font-family:var(--font-body); font-size:0.9rem; color:var(--silver-dim); min-width:200px; }
.cookie-banner__buttons { display:flex; gap:0.65rem; flex-shrink:0; }

/* ── VIDEO ── */
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }
.video-embed { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:var(--radius); border:1px solid var(--silver-faint); }
.video-embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.video-title { font-family:var(--font-display); font-weight:400; font-size:1rem; color:var(--silver-bright); margin-top:0.7rem; margin-bottom:0.2rem; letter-spacing:0.03em; }

/* ── PRESS DOWNLOADS ── */
.press-downloads { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.download-card { background:var(--bg-card); border:1px solid var(--silver-faint); border-radius:var(--radius); padding:1.1rem; display:flex; align-items:center; gap:1rem; transition:var(--transition); text-decoration:none; color:inherit; }
.download-card:hover { border-color:var(--purple-glow); background:var(--bg-card-hover); }
.download-card__icon { font-size:2.6rem; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.download-card__icon img { width:2.6rem; height:2.6rem; object-fit:contain; display:block; }
.download-card__name { font-family:var(--font-display); font-weight:400; font-size:0.92rem; color:var(--silver-bright); display:block; margin-bottom:0.15rem; }
.download-card__meta { font-family:var(--font-body); font-style:italic; font-size:0.78rem; color:var(--silver-dim); }

/* ── SOCIAL-MEDIA-LEISTE ── */
.social-bar { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
.social-link { display:inline-flex; align-items:center; gap:0.6rem; background:var(--bg-card); border:1px solid var(--silver-faint); border-radius:var(--radius); padding:0.85rem 1.4rem; text-decoration:none; color:var(--silver-bright); font-family:var(--font-display); font-size:0.9rem; transition:var(--transition); }
.social-link:hover { border-color:var(--purple-glow); background:var(--bg-card-hover); color:var(--purple-bright); transform:translateY(-2px); }
.social-link__icon { font-size:2.1rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.social-link__icon img { width:2.1rem; height:2.1rem; object-fit:contain; display:block; }
.social-link__label { letter-spacing:0.02em; }
/* Ohne Bezeichnung: nur Symbol – etwas größer dargestellt */
.social-link--icon-only { padding:0.7rem 0.95rem; }
.social-link--icon-only .social-link__icon { font-size:2.8rem; }
.social-link--icon-only .social-link__icon img { width:2.8rem; height:2.8rem; }

/* ── FILTER BUTTONS ── */
.gallery-filter { display:flex; justify-content:center; gap:0.65rem; flex-wrap:wrap; margin-bottom:2rem; }
.filter-btn { background:transparent; border:1px solid var(--silver-faint); color:var(--silver-dim); font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.13em; text-transform:uppercase; padding:0.45rem 1.15rem; border-radius:2px; cursor:pointer; transition:var(--transition); }
.filter-btn:hover, .filter-btn.active { border-color:var(--purple-glow); color:var(--purple-bright); background:rgba(90,45,145,0.07); }

/* ── FADE-IN ── */
.fade-in { opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.fade-in:nth-child(2) { transition-delay:0.1s; }
.fade-in:nth-child(3) { transition-delay:0.2s; }
.fade-in:nth-child(4) { transition-delay:0.3s; }
.fade-in:nth-child(5) { transition-delay:0.4s; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity:1; transform:none; transition:none; }
  .hero__content, 
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE – optimiert für alle Endgeräte
   Breakpoints: 1200 / 1000 / 768 / 600 / 480 / 380
   ════════════════════════════════════════════════════════════ */

/* Große Tablets / kleine Desktops */
@media (max-width:1100px) {
  .nav__links { gap: 1.4rem; }
  .nav__links a { font-size: 0.68rem; letter-spacing: 0.12em; }
}

/* Tablets */
@media (max-width:1000px) {
  .features { grid-template-columns:1fr; max-width:520px; padding-top:3.5rem; }
  .features--two { grid-template-columns:1fr; max-width:520px; }
  .about-preview { grid-template-columns:1fr; gap:2.5rem; }
  .about-preview__img::after { display:none; }
  .about-preview__img img { height:auto; max-height:560px; }
  .contact-grid { grid-template-columns:1fr; gap:2.5rem; }
  .vita-grid { grid-template-columns:1fr; gap:2rem; }
  .vita-portrait { position:static; max-width:480px; margin:0 auto; }
  .vita-portrait-wrap::after { display:none; }
  .footer__inner { grid-template-columns:1fr; text-align:center; gap:1.5rem; }
  .footer__links { align-items:center; }
  .footer__logo-wrap { order:-1; }
}

/* Mobile / Hochkant-Tablet */
@media (max-width:768px) {
  .section { padding: 4rem 1.25rem; }
  .nav__links { display:none; }
  .nav__right .lang-switch { display:none; }
  .nav__hamburger { display:flex; }
  .nav__mobile .lang-switch { display:flex; margin:0.75rem 1.5rem; width:fit-content; }
  .hero__buttons { flex-direction:column; align-items:center; width:100%; }
  .hero__buttons .btn { width:100%; max-width:300px; }
  .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .gallery-item { aspect-ratio:1; }
  .events-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .lightbox__nav { display:none; }
  .footer__bottom { flex-direction:column; text-align:center; }

.video-grid { grid-template-columns:1fr; }
}

/* Kleine Smartphones */
@media (max-width:480px) {
  html { font-size: 15px; }
  .section { padding: 3rem 1rem; }
  .btn { padding:0.8rem 1.6rem; font-size:0.72rem; letter-spacing:0.18em; }
  .hero__logo-img { width: min(240px, 70vw); }
  .page-header { padding: 9rem 1rem 3rem; }
  .gallery-grid { grid-template-columns:1fr 1fr; gap:0.6rem; }
  .awards-grid { grid-template-columns:1fr 1fr; }
  .social-links { gap:0.5rem; }
  .social-link { font-size:0.8rem; padding:0.5rem 0.8rem; }
}

/* Sehr kleine Geräte */
@media (max-width:380px) {
  .gallery-grid { grid-template-columns:1fr; }
  .awards-grid { grid-template-columns:1fr; }
  
}

/* Touch-Geräte: Hover-Effekte reduzieren */
@media (hover: none) {
  .gallery-item__overlay { opacity: 1; background: linear-gradient(to top, rgba(6,5,9,0.7) 0%, transparent 60%); }
}

/* ── KONTAKT: zentriertes Formular (ohne Info-Spalte) ── */
.contact-form-wrap { max-width:640px; margin:0 auto; }

.footer__logo-img { width:150px; height:auto; opacity:0.85; filter:drop-shadow(0 0 14px rgba(90,45,145,0.38)); }

.contact-form-wrap h2 { font-size: clamp(1.9rem, 4.5vw, 2.9rem) !important; }

/* ── Termin-Archiv ausblenden (per Admin-Toggle) ── */
.events-hidden { display: none !important; }
/* Allgemeine Klasse zum Ein-/Ausblenden ganzer Bereiche über das Admin-Panel.
   Mehrfach abgesichert, damit der Bereich garantiert verschwindet – auch bei
   konkurrierenden Regeln oder Server-Caching. */
.section-hidden,
section.section-hidden,
.section.section-hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}