/* ============================================================
   Herbert Anreitter — anreitter.at
   Art-Deco-Onepager · Gold auf Nachtblau
   ============================================================ */

:root {
  --bg:        #0a0d14;
  --bg-alt:    #0d1120;
  --gold:      #c9a45c;
  --gold-soft: #a8874a;
  --gold-hi:   #e8d5a3;
  --cream:     #f2ead8;
  --muted:     #9a937f;
  --line:      rgba(201, 164, 92, 0.35);
  --font-deco: 'Poiret One', 'Josefin Sans', sans-serif;
  --font-body: 'Josefin Sans', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --rail-w: 64px; /* Breite der linken Menü-Rail = zugleich rechter Dunkelrand der Fahrt */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

/* Subtile Vignette + Körnung über allem */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at 50% 20%, rgba(201,164,92,0.04), transparent 55%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--gold); color: var(--bg); }

/* ---------- Custom Cursor ---------- */
.cursor-dot, .cursor-ring, .cursor-arrow {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 300;
  border-radius: 50%;
  opacity: 0;
}
.cursor-arrow {
  color: var(--gold-hi);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--gold-hi);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid var(--gold);
  transition: border-color 0.3s;
}
.cursor-ring.is-active { border-color: var(--gold-hi); }
body.has-cursor, body.has-cursor * { cursor: none !important; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader-ring { width: 110px; height: 110px; }
.plr-track { fill: none; stroke: rgba(201, 164, 92, 0.18); stroke-width: 1.5; }
.plr-progress {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.plr-num {
  font-family: var(--font-deco);
  font-size: 21px;
  letter-spacing: 0.06em;
  fill: var(--gold-hi);
}

/* ---------- Kopfleiste ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(to bottom, rgba(10,13,20,0.92), rgba(10,13,20,0.75));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,164,92,0.18);
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.visible { transform: translateY(0); }
.header-name {
  font-family: var(--font-deco);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--gold-hi);
  text-decoration: none;
}
/* Mobiler Burger: eigenständig fix rechts oben, von Anfang an sichtbar
   (die Kopfleiste gleitet erst nach dem Hero herein, der Burger sitzt
   dann optisch in ihr). Liegt über dem Slide-in-Menü (z-index 75),
   damit er als Schließen-X erreichbar bleibt. */
.mobile-burger {
  position: fixed;
  top: 12px;
  right: clamp(1.2rem, 4vw, 3rem);
  z-index: 80;
}
.horiz .mobile-burger { display: none; }

/* ---------- Menüspalte links (nur Desktop/horizontal) ---------- */
.side-rail { display: none; }
.horiz .side-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  z-index: 80;
  padding: 1.3rem 0 1.6rem;
  background: rgb(10, 13, 20);
  border-right: 1px solid rgba(201, 164, 92, 0.22);
}
.burger {
  width: 34px;
  height: 30px;
  background: none;
  border: none;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--gold-hi);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}
.menu-open .burger span:first-child { transform: translateY(8.25px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-8.25px) rotate(-45deg); }
.rail-name {
  margin-top: auto;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-deco);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
}
.rail-name:hover { color: var(--gold-hi); }

/* ---------- Navigation unten (nur Desktop/horizontal) ---------- */
.bottom-nav { display: none; }
.horiz .bottom-nav {
  display: flex;
  justify-content: center;
  gap: clamp(1.1rem, 2.2vw, 2.6rem);
  position: fixed;
  left: 64px; right: 0; bottom: 0;
  z-index: 55;
  padding: 1.1rem 0 1.25rem;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.horiz .bottom-nav.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.bottom-nav a {
  position: relative;
  color: var(--cream);
  opacity: 0.62;
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.2rem 0.1rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  transition: opacity 0.3s, color 0.3s;
}
.bottom-nav a:hover { opacity: 1; }
.bottom-nav a::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-hi) 50%, transparent);
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.bottom-nav a.active {
  opacity: 1;
  color: var(--gold-hi);
}
.bottom-nav a.active::before { transform: scaleX(1); }

/* ---------- Großes Slide-in-Menü ---------- */
.mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
.menu-open .mega-backdrop { opacity: 1; pointer-events: auto; }
.mega-menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(80vw, 880px);
  z-index: 75;
  background: linear-gradient(155deg, #0d1120, #090c13);
  border-right: 1px solid rgba(201, 164, 92, 0.35);
  transform: translateX(-105%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem clamp(3rem, 10vw, 8rem);
  overflow: hidden; /* lange Menüworte dürfen nicht aus dem Kasten ragen */
}
.menu-open .mega-menu { transform: none; }
.mega-nav { display: flex; flex-direction: column; gap: clamp(0.6rem, 2.2vh, 1.4rem); }
.mega-nav a {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-deco);
  font-size: clamp(1.6rem, 4.2vh, 2.6rem);
  letter-spacing: 0.03em;
  opacity: 0.8;
  transition: opacity 0.3s, color 0.3s, letter-spacing 0.3s;
}
.mega-nav a span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  min-width: 2ch;
}
.mega-nav a:hover {
  opacity: 1;
  color: var(--gold-hi);
  letter-spacing: 0.2em;
}
.mega-foot {
  margin-top: clamp(2rem, 6vh, 4rem);
  border-top: 1px solid rgba(201, 164, 92, 0.22);
  padding-top: 1.4rem;
}
.mega-foot a {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
  text-decoration: none;
}
.mega-foot a:hover { color: var(--gold-hi); }
.mega-foot { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.mega-legal { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--muted); }
.mega-legal a {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mega-legal a:hover { color: var(--gold); }

/* Kopfleiste im Horizontalmodus ausblenden (ersetzt durch Rail + Bottom-Nav) */
.horiz .site-header { display: none; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.2rem 14vh;
  position: relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% 32%, rgba(201,164,92,0.07), transparent 70%),
    linear-gradient(to bottom, #0b0f1a 0%, var(--bg) 70%);
}
.hero-ornament {
  width: min(14vh, 34vw, 125px);
  margin-bottom: 1.4rem;
}
#ornament { width: 100%; height: auto; display: block; }

.orn { stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.calc-body rect { stroke: var(--gold); stroke-width: 2; }
.calc-display rect { stroke: var(--gold-hi); stroke-width: 1.6; }
.calc-display-text {
  fill: var(--gold-hi);
  font-family: var(--font-deco);
  font-size: 58px;
  letter-spacing: 0.05em;
}
.calc-keys circle, .calc-keys rect {
  stroke: var(--gold-soft);
  stroke-width: 1.5;
  fill: rgba(201, 164, 92, 0.16);
}
/* Testweise ausgeblendet — zum Reaktivieren die display-Zeile entfernen */
.calc-labels { display: none; }
.calc-labels text {
  fill: var(--cream);
  opacity: 0.9;
  font-family: var(--font-body);
  font-size: 26px;
}
.calc-labels .op { fill: var(--gold-hi); }
.calc-labels .eq { fill: var(--gold-hi); font-size: 32px; }

.hero-name {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: clamp(2.2rem, 7.5vw, 4.6rem);
  letter-spacing: 0.03em;
  color: var(--gold-hi);
  text-shadow: 0 0 40px rgba(201,164,92,0.25);
  margin-bottom: 1rem;
  white-space: nowrap;
}
.hero-title {
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 1.4rem;
}
.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  color: var(--gold);
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}
.scroll-hint-line {
  display: block;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--gold));
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.55); opacity: 0.4; transform-origin: top; }
  50%      { transform: scaleY(1);    opacity: 1;   transform-origin: top; }
}
/* Horizontalmodus: die Seite fährt seitlich — der Hinweis liegt waagrecht
   und pulsiert in Richtung der nächsten Seite (nach rechts) */
.horiz .scroll-hint-line {
  width: 64px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
  animation: scrollPulseX 2.4s ease-in-out infinite;
}
@keyframes scrollPulseX {
  0%, 100% { transform: scaleX(0.5); opacity: 0.4; transform-origin: left; }
  50%      { transform: scaleX(1);   opacity: 1;   transform-origin: left; }
}

/* ---------- Sektionen ---------- */
.section { padding: clamp(5rem, 12vh, 8.5rem) 1.5rem; }
.section-alt {
  background: linear-gradient(to bottom, var(--bg), var(--bg-alt) 30%, var(--bg-alt) 70%, var(--bg));
}
.section-inner { max-width: 820px; margin: 0 auto; text-align: center; }

.section-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  margin-bottom: 0.8rem;
}
.section-heading {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--gold-hi);
  margin-bottom: 1.6rem;
}
/* Trenner: feiner Gold-Verlauf, abgestimmt auf die Hero-Scroll-Linie
   (transparent -> Gold -> transparent statt der früheren Jugendstil-Raute) */
.deco-divider {
  width: min(320px, 70%);
  height: 1px;
  margin: 0 auto 2.6rem;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
}
.deco-divider path { stroke: var(--gold); }

.lead {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  line-height: 1.9;
  max-width: 640px;
  margin: 0 auto 3.4rem;
}
.lead em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.12em;
  color: var(--gold-hi);
}

/* Säulen (Über mich) */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
}
.pillar {
  padding: 2.2rem 1.4rem 2rem;
  border: 1px solid rgba(201,164,92,0.22);
  position: relative;
  transition: border-color 0.4s, transform 0.4s;
}
/* Akzent: breiter Gold-Verlaufsstrich oben (statt der früheren Ecken-Rauten),
   selbes Motiv wie der Trenner */
.pillar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.pillar:hover { border-color: var(--gold); transform: translateY(-4px); }
.pillar-glyph {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.7rem;
  line-height: 1;
}
.pillar h3 {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--gold-hi);
  margin-bottom: 0.9rem;
}
.pillar p { font-size: 0.95rem; color: var(--cream); opacity: 0.85; }

/* Vortragsliste */
.talk-list {
  list-style: none;
  text-align: left;
  max-width: 680px;
  margin: 0 auto;
}
.talk {
  display: flex;
  align-items: baseline;
  gap: clamp(1.2rem, 4vw, 2.4rem);
  padding: 1.7rem 0.6rem;
  border-bottom: 1px solid rgba(201,164,92,0.18);
  transition: background 0.4s, padding-left 0.4s;
}
.talk:first-child { border-top: 1px solid rgba(201,164,92,0.18); }
.talk:hover { background: rgba(201,164,92,0.05); padding-left: 1.2rem; }
.talk-no {
  font-family: var(--font-deco);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--gold);
  line-height: 1;
  min-width: 2.2ch;
}
.talk-body h3 {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  letter-spacing: 0.12em;
  color: var(--gold-hi);
  margin-bottom: 0.35rem;
}
.talk-body p { font-size: 0.95rem; color: var(--cream); opacity: 0.8; }
.talk-body a {
  color: var(--gold-hi);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s;
}
.talk-body a:hover { border-color: var(--gold-hi); }
.talk-items {
  list-style: none;
  margin-top: 0.55rem;
  font-size: 0.95rem;
  color: var(--cream);
}
.talk-items li { opacity: 0.85; padding-left: 1.1rem; position: relative; }
.talk-items li + li { margin-top: 0.25rem; }
.talk-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
.talk-note {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  margin-top: 2.6rem;
  font-size: 1.05rem;
}

/* Social */
.socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  gap: clamp(1.4rem, 4vw, 2.6rem);
  justify-content: center;
  margin-bottom: 2.4rem;
}
.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 2.4rem 1.6rem 2.1rem;
  border: 1px solid rgba(201,164,92,0.25);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.4s;
}
.social-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(201,164,92,0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s;
}
.social-card:hover { border-color: var(--gold); transform: translateY(-5px); }
.social-card:hover::before { opacity: 1; }
.social-icon { width: 46px; height: 46px; margin-bottom: 0.5rem; }
.social-icon path, .social-icon rect, .social-icon circle {
  stroke: var(--gold-hi);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.social-name {
  font-family: var(--font-deco);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--gold-hi);
}
.social-handle { font-size: 0.88rem; color: var(--muted); letter-spacing: 0.08em; }
.social-note {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  font-size: 1.05rem;
}

/* ---------- Footer ---------- */
.footer {
  padding: clamp(5rem, 14vh, 9rem) 1.5rem 3rem;
  background: linear-gradient(to bottom, var(--bg), #070910);
  text-align: center;
}
.footer-heading {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  letter-spacing: 0.02em;
  color: var(--gold-hi);
  margin-bottom: 1.6rem;
}
.footer-mail {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 3.4vw, 1.8rem);
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.35s, border-color 0.35s;
  margin-bottom: 2.8rem;
}
.footer-mail:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.footer .deco-divider { margin-bottom: 2rem; }
.footer-small {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}
.footer-legal {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-legal a { color: var(--muted); text-decoration: none; transition: color 0.25s; }
.footer-legal a:hover { color: var(--gold-hi); }

/* ---------- Reveal-Grundzustand (JS animiert) ---------- */
.js .reveal, .js .reveal-hero { opacity: 0; }

/* ============================================================
   Horizontalmodus (Desktop, per JS aktiviert: html.horiz)
   Die Seite fährt beim Scrollen nach links, Panels schieben
   sich von rechts herein; darunter liegt die Parallax-Ebene.
   ============================================================ */

.bg-stage { display: none; }

.horiz .hwrap {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.horiz .htrack {
  display: flex;
  height: 100svh;
  width: max-content;
  position: relative;
  z-index: 1;
  will-change: transform;
}
.horiz .panel {
  flex: 0 0 auto;
  width: 100vw;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* Bild-Bühne: fix hinter der Fahrt, Bilder bildschirmfüllend */
.horiz .bg-stage {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: var(--gold-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bg-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%; /* Kopfbereich schützen, Beschnitt eher unten */
  display: block;
}
.bg-slide-glyph span {
  font-family: var(--font-deco);
  line-height: 1;
  font-size: 74vh;
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(168, 135, 74, 0.6);
}
/* Bild-Slots in der Fahrt: durchsichtige Fenster auf die Bühne.
   Um genau die Rail-Breite schmaler als der Schirm — der Haltepunkt liegt
   in rideTo() an der linken Slot-Kante, daher bleibt rechts ein dunkler
   Kartenrand, exakt so breit wie das linke Menü (--rail-w). */
.img-slot { display: none; }
.horiz .img-slot { display: block; background: none; width: calc(100vw - var(--rail-w)); }

/* ---------- Mobil/vertikal: Bild-Fenster zwischen den Sektionen ----------
   Der Slot ist ein Sichtfenster auf ein leicht überhohes Foto, das beim
   Scrollen sanft vertikal driftet (Parallax, Tween in main.js). Das Bild
   ist bewusst am Fenster bemessen (nicht am Viewport) — so zeigt das fast
   quadratische Fenster viel vom 16:9-Motiv statt eines extremen Ausschnitts.
   Die Bilder setzt main.js nur im Vertikalmodus ein (Klasse has-img). */
.img-slot.has-img {
  display: block;
  position: relative;
  height: 46vh;
  height: min(46svh, 420px);
  margin: 0 clamp(1.2rem, 5vw, 2.4rem);
  clip-path: inset(0);
}
.img-slot.has-img img {
  position: absolute;
  left: 0;
  top: 0; /* Foto-Oberkante bündig: die Motive sitzen tiefer im Fenster */
  width: 100%;
  height: 128%; /* Überstand nur nach unten = Spielraum für die Drift */
  object-fit: cover;
}
/* Fassung im Deco-Stil: feine goldene Doppellinie als Passepartout
   (dasselbe Gold wie Säulen und Trenner) */
.img-slot.has-img::before,
.img-slot.has-img::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.img-slot.has-img::before { inset: 0; border: 1px solid rgba(201, 164, 92, 0.55); }
.img-slot.has-img::after  { inset: 9px; border: 1px solid rgba(201, 164, 92, 0.28); }

/* Panels als vollflächige Seiten (oben bis unten), die über die
   Bild-Bühne fahren */
.horiz .section, .horiz .footer { background: none; }
.horiz .panel-card {
  width: 100vw;
  height: 100svh;
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: linear-gradient(165deg, rgb(13,17,29), rgb(9,12,19));
  box-shadow: 0 0 90px rgba(0,0,0,0.6);
  padding: clamp(1.6rem, 3.6vh, 2.6rem) clamp(2rem, 4vw, 3.6rem);
  /* unten Raum für die fixe Bottom-Nav freihalten, damit sie nie
     über den Karteninhalt ragt */
  padding-bottom: 86px;
}
.horiz .panel-card > .section-inner {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
  width: 100%;
  position: relative; /* Bezugspunkt für die Überstands-Messung (offsetTop) */
}
.horiz .panel-card > .section-inner::-webkit-scrollbar { display: none; }

/* "Mehr unten"-Hinweis: Verlaufsschleier + Pfeil an der Kartenunterkante.
   Wird per JS nur in Sektionen eingesetzt, deren Inhalt übersteht, und
   blendet über die Master-Timeline aus, sobald man hinunterscrollt. */
.more-hint { display: none; }
.horiz .more-hint {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  left: 0; right: 0;
  bottom: 86px; /* direkt über der Inhalts-Unterkante (= Nav-Freiraum) */
  height: 84px;
  padding-bottom: 10px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(9, 12, 19, 0.92));
}
.more-hint::after {
  content: "";
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold-hi);
  border-bottom: 1.5px solid var(--gold-hi);
  transform: rotate(45deg);
  animation: moreHintPulse 2.4s ease-in-out infinite;
}
@keyframes moreHintPulse {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
  50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* Kompaktere Abstände, damit jedes Panel in 100svh passt */
.horiz .section-number { margin-bottom: 0.5rem; }
.horiz .section-heading { margin-bottom: 1rem; line-height: 1.15; }
.horiz .panel-card .lead { max-width: none; margin-bottom: 1.5rem; }
.horiz #ueber .pillar { padding: 1.4rem 1.1rem 1.2rem; }
/* Niedrige Fenster (Laptops): Karten kompakter */
@media (max-height: 780px) {
  .horiz .panel-card { max-height: 94svh; }
  .horiz .section-heading { margin-bottom: 0.7rem; }
  .horiz .deco-divider { margin-bottom: 1.2rem; }
  .horiz #ueber .pillar { padding: 1.1rem 1rem 1rem; }
  .horiz .pillar h3 { margin-bottom: 0.6rem; }
}
.horiz .talk-no { font-size: 1.9rem; }
.horiz .talk-body h3 { line-height: 1.35; }
.horiz .deco-divider { margin-bottom: 1.5rem; }
.horiz .lead { margin-bottom: 1.8rem; line-height: 1.75; }
.horiz .talk { padding: 1.1rem 0.5rem; }
.horiz .talk:hover { padding-left: 1rem; }
.horiz .talk-note { margin-top: 1.2rem; }
.horiz .pillar { padding: 1.6rem 1.2rem 1.4rem; }
.horiz .socials { margin-bottom: 1.6rem; }
.horiz .footer .panel-card { text-align: center; }
.horiz .footer-mail { margin-bottom: 1.8rem; }
.horiz .footer-heading { margin-bottom: 1.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  /* "Personalverrechnung" muss unumbrochen in das schmale Menü passen */
  .mega-nav a { font-size: clamp(1.05rem, 4.8vw, 1.6rem); }
  .pillars { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .socials { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto 2.2rem; }
  .header-name { font-size: 0.85rem; letter-spacing: 0.16em; }
  .hero-name { letter-spacing: 0.12em; }
}
@media (max-width: 420px) {
  .hero-name { font-size: 1.65rem; white-space: normal; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint-line { animation: none; }
  .js .reveal, .js .reveal-hero { opacity: 1; }
}