/* === Stuarnado – Final CSS ================================== */

/* Grundlayout / Farben */
:root{
  --bg:#0a0a0a;          /* dunkel */
  --text:#f2f2f2;        /* hell */
  --muted:#cccccc;
  --brand:#0f3d2e;       /* tiefes Grün */
  --accent:#d4af37;      /* Gold */
  --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}

/* Container */
.container{width:90%;max-width:var(--maxw);margin:0 auto}
/* === Stuarnado – Final CSS ================================== */

/* Grundlayout / Farben */
:root{
  --bg:#0a0a0a;          /* dunkel */
  --text:#f2f2f2;        /* hell */
  --muted:#cccccc;
  --brand:#0f3d2e;       /* tiefes Grün */
  --accent:#d4af37;      /* Gold */
  --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}

/* Container */
.container{width:90%;max-width:var(--maxw);margin:0 auto}

/* Header / Navigation */
header{position:sticky;top:0;z-index:1000;background:#000;border-bottom:1px solid #222}
.navbar,.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.brand,.logo{display:flex;align-items:center;color:var(--accent);text-decoration:none;font-weight:700;letter-spacing:.3px}
.brandmark,.logo img{width:36px;height:36px;margin-right:.5rem}
.nav-toggle{display:none;background:none;border:1px solid #333;color:var(--text);padding:.5rem .75rem;border-radius:4px}
.nav-list{list-style:none;display:flex;gap:1.25rem}
.nav-list a{color:var(--text);text-decoration:none;font-weight:500}
.nav-list a:hover{color:var(--accent)}

/* Mobile Menü */
@media (max-width:768px){
  .nav-toggle{display:block}
  .nav-list{flex-direction:column;background:#111;padding:1rem;margin-top:1rem}
  .nav-list[hidden]{display:none}
}

/* Hero – zuverlässig vollflächig */
.hero{
  position:relative;
  min-height:70vh;           /* sichtbare Höhe */
  background:#0b0f14;        /* Fallback-Hintergrund */
  overflow:hidden;
}
.hero picture,
.hero img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;          /* füllt, schneidet sauber zu */
  filter:brightness(.35);
}

/* Overlay/Text – beide Klassennamen abdecken */
.overlay,.hero-text{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:var(--text);
  text-shadow:0 0 10px rgba(0,0,0,.6);
  max-width:700px;
  width:calc(100% - 2rem);
  padding:0 1rem;
}
.overlay h1,.hero-text h1{
  font-size:clamp(1.6rem,4vw,2.4rem);
  margin-bottom:1rem;
  color:var(--accent);
}
.overlay .lead,.hero-text .lead{margin-bottom:1.25rem}

/* Buttons – beide Klassen unterstützen */
.btn,.cta{
  display:inline-block;
  background:var(--accent); color:#000; font-weight:700;
  padding:.8rem 1.4rem; border-radius:4px; text-decoration:none;
  transition:.25s ease;
}
.btn:hover,.cta:hover{background:#fff;color:#000}

/* Intro / Sektionen */
.intro{background:#111;padding:3rem 0;text-align:center}
.intro h2{color:var(--accent);margin-bottom:1rem;font-size:clamp(1.4rem,3.5vw,2rem)}
.intro p{max-width:720px;margin:0 auto}

/* Generische Sektionen */
section[id]:not(.hero):not(.intro){padding:2.5rem 0}
section[id] h2{color:var(--accent);margin-bottom:.75rem}

/* Footer */
footer{background:#000;border-top:1px solid #222;color:#ccc;text-align:center;padding:1rem 0}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{color:#fff}

/* Bildausrichtung bei breiten Displays */
@media (min-aspect-ratio:16/10){
  .hero{min-height:75vh}
}
/* === Logo größer im Header === */
.logo img{ width:72px; height:72px; }
.logo span{ font-size:1.25rem; }
@media (max-width:768px){
  .logo img{ width:56px; height:56px; }
}

/* === Modals (Impressum / Datenschutz) === */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
  z-index: 2000;
}
.modal__dialog{
  background:#0f0f10;
  color:#f2f2f2;
  width:min(720px, 100%);
  border:1px solid #222;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.modal__dialog h2{
  color:#d4af37;
  margin:0 0 .75rem 0;
  font-size: clamp(1.3rem, 3.5vw, 1.6rem);
}
.modal__dialog a{ color:#d4af37; text-decoration:none; }
.modal__dialog a:hover{ color:#fff; }
.modal__close{
  position:absolute; right:.75rem; top:.5rem;
  background:none; border:0; color:#aaa;
  font-size:1.8rem; line-height:1; cursor:pointer;
}
.modal__close:hover{ color:#fff; }

/* Footer-Layout */
.footer-flex{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
@media(min-width:768px){.footer-flex{flex-direction:column;gap:.6rem}}
.footer-legal{text-align:center}

/* Social Icons – klein, in einer Reihe */
.footer-social{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin-bottom:.4rem; /* Abstand über dem Copyright */
}

.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  color:var(--accent);
  background:rgba(255,255,255,.06);
  border-radius:50%;
  text-decoration:none;
  transition:all .25s ease;
}
.footer-social a:hover{
  background:var(--accent);
  color:#000;
  transform:translateY(-2px);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}



/* === Footer Social Icons – kompakt nebeneinander === */
.footer-flex{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
}
@media(min-width:768px){
  .footer-flex{flex-direction:row;justify-content:space-between;text-align:left}
}

/* === Footer Social Icons – waagerecht nebeneinander === */
.footer-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

/* === Footer: Layout + Social-Icons (waagerecht & klein) === */
.footer-flex{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  text-align:center;
}
@media (min-width:768px){
  .footer-flex{
    flex-direction:row;
    justify-content:space-between;
    text-align:left;
  }
}

.footer-social{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:0.6rem;
}

.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  color:var(--accent);
  background:rgba(255,255,255,.06);
  border-radius:50%;
  text-decoration:none;
  transition:all .25s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible{
  background:var(--accent);
  color:#000;
  transform:translateY(-2px);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  outline:none;
}


/* === END-FIX: Social Icons richtig klein, waagerecht === */
footer .footer-social {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.6rem !important;
  margin-bottom: 0.5rem !important;
}

footer .footer-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

footer .footer-social a:hover {
  background: var(--accent) !important;
  color: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

footer .footer-social svg,
footer .footer-social img {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 auto !important;
}

/* === Social CTA über Icons === */
.social-cta {
  text-align: center;
  color: #fff;
  opacity: 0.9;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
}
.social-cta strong {
  color: var(--accent, #e0b949);
  font-weight: 700;
}

.hero{ position:relative; background:#0b0f14; }
.hero-media{ min-height:clamp(360px,60vh,780px); display:grid; place-items:center; }
.hero-logo{ width:min(540px,64vw); height:auto; filter:drop-shadow(0 12px 32px rgba(0,0,0,.55)); }

.overlay{ position:absolute; inset:auto 0 0 0; padding:clamp(16px,2.5vw,24px); color:#fff; text-align:center; }
@media (min-width:768px){ .overlay{ inset:0; display:grid; place-items:center; } }
/* === HERO: klares Layout, zentriert, mit großem Logo === */
.hero{
  position: relative;
  overflow: hidden;
  background: #0b0f14;               /* dunkler Grund */
}

.hero-bg{
  position: absolute;
  inset: 0;
  /* dezentes Glühen hinter dem Logo */
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.25));
  pointer-events: none;
}

.hero-content{
  position: relative;                 /* über dem Hintergrund */
  z-index: 1;
  min-height: clamp(480px, 68vh, 860px);
  display: grid;
  place-items: center;
  gap: clamp(8px, 1.6vw, 16px);
  text-align: center;
  padding: clamp(16px, 3vw, 32px);
}

.hero-logo{
  width: min(520px, 42vw);
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.55));
}

.hero h1{
  margin: 0;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--accent, #e0b949);
}

.hero .lead{
  margin: 0;
  max-width: 60ch;
  color: #fff;
  opacity: .95;
}

/* Button gern so lassen – hier nur falls benötigt */
.hero .btn{
  display: inline-block;
  padding: .9rem 1.4rem;
  border-radius: .6rem;
  text-decoration: none;
  background: linear-gradient(#e6c452, #c9a93f);
  color: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hero .btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.35); }

/* Sicherheitsnetz: alte Overlays aushebeln, falls noch .hero-logo{
  display:block;
  width:min(520px, 42vw);
  height:auto;
  opacity:.95;
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.55)) brightness(1.06) contrast(1.05);
  margin-inline:auto;
}
body.modal-open{ overflow:hidden; }
/* === HERO: Layout zentriert mit großem Logo === */
.hero{
  position:relative;
  overflow:hidden;
  background:#0b0f14;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.25));
  pointer-events:none;
}

.hero-content{
  position:relative;        /* über dem Hintergrund */
  z-index:1;
  min-height:clamp(480px, 68vh, 860px);
  display:grid;
  place-items:center;       /* Logo + Text perfekt mittig */
  gap:clamp(8px, 1.6vw, 16px);
  text-align:center;
  padding:clamp(16px, 3vw, 32px);
}

/* Overlay aus alter Struktur sicher abschalten, falls noch im DOM */
.hero .overlay{ display:none !important; }

/* Überschrift & Lead im Hero */
.hero h1{
  margin:0;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--accent, #e0b949);
}
.hero .lead{
  margin:0;
  max-width:60ch;
  color:#fff;
  opacity:.95;
}

/* Button im Hero */
.hero .btn{
  display:inline-block;
  padding:.9rem 1.4rem;
  border-radius:.6rem;
  text-decoration:none;
  background:linear-gradient(#e6c452, #c9a93f);
  color:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.hero .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.35); }

/* Modals: Scroll sperren */
body.modal-open{ overflow:hidden; }

/* --- Modal Feinschliff --- */
.modal[hidden]{ display:none; }

.modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.modal__dialog{
  position: relative;
  margin: 4vh auto;
  width: min(960px, calc(100% - 2rem));
  border-radius: 14px;
  background: #0e0f12;
  color: #f5f5f5;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  overflow: hidden; /* wichtig für sticky Kopfzeile */
}

/* Kopfzeile bleibt kleben beim Scrollen */
.modal__head{
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: rgba(14,15,18,.98);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.modal__title{
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .2px;
}

.modal__close{
  margin-left: auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  padding: .5rem .6rem;
  border-radius: 8px;
  cursor: pointer;
}
.modal__close:hover{ background: rgba(255,255,255,.08); }

/* Inhalt scrollt, nicht der Dialog */
.modal__body{
  max-height: min(70vh, 75svh);
  overflow: auto;
  padding: 1.25rem 1.25rem 1.5rem;
}

/* Lesbarkeit im Impressum */
.impressum-grid p{ margin: 0 0 .8rem; }
.impressum-grid h3{ margin: 1.2rem 0 .35rem; font-size: 1.05rem; }
.impressum-grid a{ color: var(--accent,#e0b949); text-decoration: underline; }
.impressum-grid .muted{ opacity: .8; }

@media (max-width: 420px){
  .modal__dialog{ margin: 2vh auto; }
  .modal__body{ max-height: 76vh; padding: 1rem; }
}
<!-- MODALS -->
 /* --- Modal Feinschliff --- */
.modal[hidden]{ display:none; }
.modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.modal__dialog{
  position: relative;
  margin: 4vh auto;
  width: min(960px, calc(100% - 2rem));
  border-radius: 14px;
  background: #0e0f12;
  color: #f5f5f5;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  overflow: hidden; /* wichtig für sticky Kopfzeile */
}
/* Kopfzeile bleibt kleben beim Scrollen */
.modal__head{
    position: sticky; top: 0; z-index: 1;
  display:flex; align-items:center; gap:.75rem; padding: 1rem 1.25rem;
  background: rgba(14,15,18,.98); border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal__title{ margin:0; font-weight:700; }
.modal__close{
  margin-left:auto; appearance:none; border:0; background:transparent; color:#fff;
  font-size:1.25rem; line-height:1; padding:.5rem .6rem; border-radius:8px; cursor:pointer;
}
.modal__body{ max-height: min(70vh, 75svh); overflow:auto; padding: 1.25rem 1.25rem 1.5rem; }
body.modal-open{ overflow:hidden; }

/* Falls es irgendwo existiert, killt ein dunkles Overlay auf dem Hero: */
.hero::before,
.hero::after { content: none !important; }

/* Bild sauber zeigen */
.hero img { filter: none !important; }  /* falls ein globaler Filter zu stark war */

<section class="hero">
  <img src="assets/hero.avif" alt="Stuarnado Phönix-Logo vor dunklem Hintergrund">
</section>

/* === 4 Säulen Layout === */

/* === TEMPEL – Säulen horizontal & schlanker === */
:root{
  /* Ziel: ~60% der bisherigen Breite, responsive */
  --pillar-w: clamp(72px, 12vw, 110px);   /* Breite */
  --pillar-h: clamp(220px, 38vw, 360px);  /* Höhe */
  --pillar-radius: 16px;
  --pillar-gap: clamp(12px, 4vw, 28px);
}

/* Dach/Brand bleibt mittig */
.temple__roof{
  margin: 0 auto var(--pillar-gap);
  width: min(92vw, 980px);
  display: grid;
  place-items: center;
}
.temple__brand{
  font-family: inherit; /* falls du eine Brand-Font setzt, hier ändern */
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--accent, #e0b949);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
}

/* Glanz-Effekt separat definieren */
.pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(224, 185, 73, 0.35) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
}

/* Animation bei Hover */
.pillar:hover::before,
.pillar:focus-visible::before {
  animation: shine 1.4s ease forwards;
}

/* Keyframes für Bewegung des Glanzstreifens */
@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* Keyframes für Bewegung des Glanzstreifens */
@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}
/* === Modals (Stuarnado Gold) === */
.modal[hidden]{ display:none; }

.modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  display: grid;
  place-items: center;
}

.modal__dialog{
  width: min(820px, calc(100% - 32px));
  max-height: min(76vh, 720px);
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(224,185,73,.10) 0%, rgba(18,18,18,1) 35%);
  border: 1px solid rgba(224,185,73,.35);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 40px rgba(224,185,73,.25) inset;
  color: #f5f5f5;
  animation: modalIn .25s ease-out;
}

@keyframes modalIn{
  from{ transform: translateY(10px) scale(.98); opacity:.0; }
  to  { transform: translateY(0)    scale(1);   opacity:1; }
}

.modal__head{
  position: sticky; top: 0;
  display:flex; align-items:center; gap:.75rem;
  padding: 1rem 1.25rem;
  background: rgba(14,15,18,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 1;
}

.modal__title{
  margin:0;
  font-weight:800;
  letter-spacing:.6px;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color:#e0b949;
  text-shadow: 0 0 16px rgba(224,185,73,.35);
}

.modal__close{
  margin-left:auto; appearance:none; border:0; background:transparent;
  color:#fff; font-size:1.4rem; line-height:1;
  padding:.35rem .55rem; border-radius:8px; cursor:pointer;
}
.modal__close:hover{ background: rgba(255,255,255,.08); color:#fff; }

.modal__body{
  padding: 1.25rem 1.25rem 1.35rem;
  max-height: min(70vh, 75svh);
  overflow:auto;
}

.modal__body p{ margin: .75rem 0; }
.modal__body strong{ color:#e0b949; }

/* === Tempel mit Dach + 4 schlanken Säulen === */
/* === Tempel mit Dach + 4 schlanken Säulen === */
.temple {
  padding: clamp(32px, 5vw, 56px) 0;
}
.temple__container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Dach */
.temple__roof {
  position: relative;
  width: 100%;
  height: 80px;
  margin: 0 auto 40px;
  background: linear-gradient(to bottom,
    rgba(255,215,128,.16),
    rgba(255,215,128,.06)
  );
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  border-bottom: 1px solid rgba(255,215,128,.35);
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.45));
}
.temple__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -20%);
  font-weight: 800;
  letter-spacing: .15em;
  color: var(--accent, #e0b949);
}

/* Säulen horizontal nebeneinander */
.pillars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(16px, 4vw, 40px);
  flex-wrap: wrap;
}

/* Säule – 30 % der bisherigen Breite */
.pillar {
  --w: 90px;     /* vorher 140px → ~30 % schmaler */
  --h: 340px;
  width: var(--w);
  height: var(--h);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(255,215,128,.12),
    rgba(255,215,128,0) 40%,
    rgba(255,255,255,.04)
  );
  border: 1px solid rgba(255,215,128,.35);
  position: relative;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: inset 0 0 1px rgba(0,0,0,.25), 0 20px 40px rgba(0,0,0,.35);
}

/* Hover-Effekt */
.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--accent, #e0b949);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 24px rgba(224,185,73,.25);
}

/* Säulen-Titel waagerecht mittig */
/* === Zentrierte Titel in den Säulen === */
.pillar__title {
  position: absolute;
  top: 50%;                      /* vertikal Mitte */
  left: 50%;                     /* horizontal Mitte */
  transform: translate(-50%, -50%); /* exakt zentriert */
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent, #e0b949);
  text-align: center;
  writing-mode: horizontal-tb;   /* sicherstellen, dass Text waagerecht bleibt */
  white-space: nowrap;           /* kein Zeilenumbruch */
}

/* Responsiv */
@media (max-width: 960px) {
  .pillar { --w: 80px; --h: 300px; }
}
@media (max-width: 720px) {
  .pillars { flex-wrap: wrap; }
  .pillar { --w: 70px; --h: 280px; }
}
@media (max-width: 420px) {
  .pillars { flex-direction: column; }
  .pillar { --w: 60%; --h: 240px; }
}
/* === Glanz-Effekt für die Säulen ===================== */
/* WICHTIG: .pillar muss schneiden, sonst sieht man den Effekt links/rechts */
.pillar{
  position: relative;           /* Bezugspunkt für ::before */
  overflow: hidden;             /* Effekt bleibt IN der Säule */
}

/* der eigentliche Glanzstreifen */
.pillar::before{
  content: "";
  position: absolute;
  top: -20%;                    /* etwas höher, damit die Schräge schön wirkt */
  left: -60%;                   /* Start weit links */
  width: 60%;                   /* Breite des Streifens */
  height: 140%;                 /* etwas größer als die Säule */
  pointer-events: none;         /* Klicks nicht blockieren */

  /* weicher goldener Streifen */
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(224,185,73,0.35) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-22deg);     /* schräge Kante */
  opacity: .0;                  /* initial unsichtbar */
}

/* Bewegung beim Hover / Fokus */
.pillar:hover::before,
.pillar:focus-visible::before{
  animation: shine 1.2s ease forwards;
  opacity: 1;
}

/* Animation – Streifen wandert einmal quer durch die Säule */
@keyframes shine{
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* ---- Cleanup: alten Glanz/Diagonale deaktivieren ---- */
.pillar .shine,
.pillar .gloss,
.pillar .highlight { display: none !important; }

/* falls früher zusätzlich ::after verwendet wurde */
.pillar::after { content: none !important; }

/* diagonale Hintergrund-Grafik auf der Säule abschalten */
.pillar { background-image: none !important; }

/* === Hero-Logo: 60 % kleiner auf Laptop / PC === */
@media (min-width: 900px) {
  .hero-logo {
    max-width: 40% !important;  /* verkleinert proportional */
    height: auto;               /* behält Seitenverhältnis */
    margin-top: inherit;        /* behält vertikale Abstände */
    margin-bottom: inherit;
    display: block;
    margin-left: auto;
    margin-right: auto;         /* bleibt zentriert */
  }
}