/* =========================================================================
   sections.css — sektionsspezifisches Layout (Hero, Kap. I–V, Kontakt, Footer)
   Farbrhythmus (Bauplan 3): Hero dunkel → I dunkel → II Elfenbein → III dunkel
   schmal → IV Elfenbein → V dunkel → Kontakt dunkel → Footer Midnight-soft.
   ========================================================================= */

/* Farbkontext-Helfer für Sektionen ------------------------------------- */
.bg-dark {
  background: var(--bg);
  color: var(--text-on-dark);
}
.bg-ivory {
  background:
    linear-gradient(180deg, rgba(6,7,13,0.72), rgba(6,7,13,0.86)),
    url('../img/bg-alt.webp') center/cover no-repeat,
    var(--bg-alt);
  color: var(--text-on-ivory);
}
.bg-elevated {
  background: var(--bg-elevated);
  color: var(--text-on-dark);
}

/* Sektions-Kopf (Eyebrow + H2 + optional Subline) ---------------------- */
.section-head {
  max-width: var(--container-narrow);
  margin-bottom: var(--sp-16);
}
.section-head .section-title {
  font-size: var(--fs-600);
  margin-top: var(--sp-3);
}
/* Kapitel III bewusst schmal/zurückhaltend (Bauplan 3.4) */
.section-head .section-title--sm { font-size: var(--fs-500); }
.bg-ivory .section-title { color: var(--text-on-ivory); }
/* Eyebrow auf Elfenbein: abgedunkelter Bronze-Ton für AA-Kontrast */
.bg-ivory .eyebrow { color: var(--accent-text-on-ivory); }
.section-head .section-sub {
  font-size: var(--fs-400);
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif-light);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--text-on-dark-mut);
  margin-top: var(--sp-4);
  font-variation-settings: 'opsz' var(--serif-opsz-text), 'wght' var(--fw-serif-light);
}
.bg-ivory .section-sub { color: var(--text-on-ivory-mut); }

/* =========================================================================
   SECTION-DIVIDER — reines CSS (kein SVG mehr: preserveAspectRatio="none" auf
   einem breiten/flachen viewBox verzerrte die Knoten-Kreise zu Ellipsen, sah
   kaputt aus). Nutzt die vorhandene .reveal/.visible-IntersectionObserver-
   Infrastruktur (animations.js) — Linie zieht sich beim Scrollen ins Bild,
   Knoten poppen gestaffelt nach. Kein neues JS nötig.
   ========================================================================= */
.section-divider {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(40px, 6vw, 72px);
  padding-inline: var(--gutter);
  pointer-events: none;
}
.section-divider__line {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s var(--ease-out-expo);
}
.section-divider.visible .section-divider__line { transform: scaleX(1); }
.section-divider__node {
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s var(--ease-out-expo) 0.55s;
}
.section-divider__node--ring {
  width: 11px; height: 11px;
  background: transparent;
  border: 1px solid var(--line-strong);
}
.section-divider.visible .section-divider__node { transform: translate(-50%, -50%) scale(1); }
/* Divider auf Elfenbein-Kontext (dunklere Alt-Fläche) */
.section-divider.on-ivory .section-divider__line { background: var(--line-ivory); }
@media (prefers-reduced-motion: reduce) {
  .section-divider__line, .section-divider__node { transition: none; transform: scaleX(1); }
  .section-divider__node { transform: translate(-50%, -50%) scale(1); }
}

/* =========================================================================
   1. HERO (#hero)
   ========================================================================= */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(7rem, 12vh, 10rem) var(--sp-16);
  background:
    linear-gradient(180deg, rgba(6,7,13,0.5), rgba(6,7,13,0.8)),
    url('../img/bg-hero.webp') center/cover no-repeat,
    var(--bg);
}
/* Canvas-Hintergrundebene */
#hero-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-motif-hero);
  pointer-events: none;
}
/* Sanfter Vignette-Verlauf für Textlesbarkeit über Canvas */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-motif-hero);
  background:
    radial-gradient(120% 80% at 25% 45%, rgba(10,18,32,0.35), transparent 60%),
    linear-gradient(180deg, transparent 60%, var(--c-midnight));
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}
/* Portrait steht visuell über dem Textblock, unabhängig von der DOM-Reihenfolge im Markup */
.hero-portrait { order: -1; }
.hero-content { max-width: 100%; display: flex; flex-direction: column; align-items: center; }

.hero-eyebrow { margin-bottom: var(--sp-6); }

.hero-title {
  font-size: var(--fs-800);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  padding-top: 0.12em;
  font-weight: var(--fw-serif-semi);
}
.hero-title .hero-line { display: block; }
/* "ÖZKAN" als Bronze-Gradient-Clip. background-clip:text füllt nur die eigene
   Content-Box der Zeile — bei zu knappem line-height ragen die Umlaut-Punkte des
   "Ö" über diese Box hinaus und bleiben ungefüllt (sehen "abgeschnitten" aus).
   Grosszügiges line-height + Padding schafft Raum, negativer Margin gleicht den
   optischen Abstand zur Zeile darüber wieder aus. */
.hero-title .hero-accent {
  display: block;
  line-height: 1.4;
  padding-top: 0.22em;
  margin-top: -0.34em;
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-hover) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}

.hero-typing {
  margin-top: var(--sp-6);
  font-family: var(--ff-sans);
  font-size: var(--fs-400);
  font-weight: var(--fw-sans-med);
  color: var(--text-on-dark);
  min-height: 1.6em;
}
.hero-typing .type-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--accent);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-lead {
  margin-top: var(--sp-6);
  font-size: var(--fs-300);
  color: var(--text-on-dark-mut);
  max-width: 42ch;
}

/* Hero-CTA-Block (zentriert, unter dem Lead) */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-10, 2.5rem);
}
@media (max-width: 460px) {
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* Status-Badge mit pulsierendem Dot */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-200);
  color: var(--text-on-dark-mut);
}
.hero-status .status-dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-hover);
  flex: none;
}
.hero-status .status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent-hover);
  animation: status-pulse 2.4s var(--ease-out-soft) infinite;
}
@keyframes status-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Scroll-Hinweis unten */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 3rem);
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-dark-mut);
}
.hero-scroll .scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scroll-hint 2s var(--ease-in-out-refined) infinite;
  transform-origin: top;
}
@keyframes scroll-hint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Hero-Portrait (Ken-Burns) — Markup von A (Bauplan 5.1) --------------- */
.hero-portrait {
  position: relative;
  width: min(55%, 240px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  isolation: isolate;
}
/* Clipping sitzt am <picture>-Wrapper, NICHT an .hero-portrait selbst — sonst würden
   Ring/Glow (die bewusst über den Kreisrand hinausragen) mit weggeschnitten.
   Ohne dieses overflow:hidden zeigte die Ken-Burns-Zoom-Animation am Kreisrand einen
   feinen, mitpulsierenden Lücken-/Antialiasing-Spalt (border-radius allein auf dem
   animierten <img> reicht dafür nicht zuverlässig). */
.hero-portrait picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.hero-portrait__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ken-burns 28s var(--ease-in-out-refined) infinite;
  will-change: transform;
  transform-origin: 55% 40%;
}
/* Bronze-Rahmen */
.hero-portrait__ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 40px -8px rgba(0,230,140,0.25);
}
.hero-portrait__ring::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
/* weicher radialer Glow (atmet langsam) */
.hero-portrait__glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle at 50% 45%, var(--motif-node-glow), transparent 62%);
  animation: portrait-glow 6s var(--ease-in-out-refined) infinite;
  pointer-events: none;
}
@keyframes ken-burns {
  0%   { transform: scale(1.0)  translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1.5%, -1%); }
  100% { transform: scale(1.0)  translate(0, 0); }
}
@keyframes portrait-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-portrait__img { animation: none; }
  .hero-portrait__glow { animation: none; }
  .hero-status .status-dot::after,
  .hero-scroll .scroll-line { animation: none; }
  .hero-typing .type-caret { animation: none; }
}

@media (max-width: 860px) {
  .hero-portrait { width: min(60%, 220px); }
  .hero-scroll { display: none; }
}

/* =========================================================================
   2. KAPITEL I — URSPRUNG (#ursprung, dunkel) — .moment-Zweispalter
   ========================================================================= */
#ursprung { position: relative; }
.moments {
  position: relative;
  margin-top: var(--sp-8);
}
/* Vertikale Verbindungslinie (Sand → Bronze-Fill via js-motif-line) */
.moments-rail {
  position: absolute;
  left: clamp(1.2rem, 5vw, 4rem);
  top: 0.5rem; bottom: 3rem;
  width: 2px;
  background: var(--line);
  border-radius: var(--r-pill);
}
.moments-fill {
  position: absolute;
  left: clamp(1.2rem, 5vw, 4rem);
  top: 0.5rem;
  width: 2px;
  height: calc(100% - 3.5rem);
  background: linear-gradient(180deg, var(--c-slate), var(--accent-hover));
  border-radius: var(--r-pill);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
@media (max-width: 620px) {
  .moments-rail, .moments-fill { display: none; }
}

.moment {
  position: relative;
  display: grid;
  grid-template-columns: clamp(2.4rem, 10vw, 8rem) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: var(--sp-24);
}
.moment:last-child { padding-bottom: 0; }

/* Scroll-Reveal-Basiszustand je Moment (gestaffelter Delay via animations.js) */
.js-moment {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out-soft),
    transform var(--dur-slow) var(--ease-out-soft);
  will-change: opacity, transform;
}
.js-moment.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .js-moment {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.moment__index {
  position: relative;
  padding-left: clamp(1.5rem, 5vw, 4.5rem);
}
/* Knoten auf der Verbindungslinie */
.moment__index::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.2rem, 5vw, 4rem) - clamp(1.5rem, 5vw, 4.5rem) + 1px);
  top: 0.55em;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-midnight);
  border: 2px solid var(--accent);
  transform: translateX(-50%);
  box-shadow: 0 0 0 5px rgba(10,18,32,1);
}
.moment__num {
  display: block;
  font-family: var(--ff-serif);
  font-size: var(--fs-600);
  font-weight: var(--fw-serif-light);
  line-height: 1;
  color: var(--accent);
  font-variation-settings: 'opsz' var(--serif-opsz-display), 'wght' var(--fw-serif-light);
}
.moment__icon {
  width: 30px; height: 30px;
  margin-top: var(--sp-3);
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(0,230,140,0.5));
}
.moment__title {
  font-size: var(--fs-500);
  color: var(--text-on-dark);
  margin-bottom: var(--sp-3);
}
.moment__text {
  font-size: var(--fs-300);
  color: var(--text-on-dark-mut);
  max-width: 52ch;
}

@media (max-width: 620px) {
  .moment {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-bottom: var(--sp-16);
  }
  .moment__index { padding-left: 0; }
  .moment__index::before { display: none; }
}

/* =========================================================================
   3. KAPITEL II — HANDWERK (#handwerk, Elfenbein) — asymm. Editorial-Grid
   ========================================================================= */
#handwerk .craft-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem) clamp(2rem, 6vw, 6rem);
  margin-top: var(--sp-8);
  align-items: start;
}
.craft-item {
  border-top: 1px solid var(--line-ivory);
  padding-top: var(--sp-6);
  transition: border-color var(--dur-med) var(--ease-out-soft);
}
.craft-item:hover { border-color: var(--accent); }
.craft-item:hover .craft-item__icon {
  filter: drop-shadow(0 0 10px rgba(0,230,140,0.85));
}

.craft-item__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.craft-item__index {
  font-family: var(--ff-serif);
  font-size: var(--fs-500);
  font-weight: var(--fw-serif-light);
  line-height: 1;
  color: var(--accent);
  font-variation-settings: 'opsz' var(--serif-opsz-display), 'wght' var(--fw-serif-light);
}
.craft-item__icon {
  width: 26px; height: 26px;
  color: var(--accent);
  flex: none;
  margin-left: auto;
  filter: drop-shadow(0 0 6px rgba(0,230,140,0.55));
  transition: filter var(--dur-med) var(--ease-out-soft);
}
.craft-item__title {
  font-size: var(--fs-500);
  color: var(--text-on-ivory);
  margin-bottom: var(--sp-3);
}
.craft-item__lead {
  font-size: var(--fs-300);
  color: var(--text-on-ivory-mut);
  margin-bottom: var(--sp-2);
}

@media (max-width: 760px) {
  #handwerk .craft-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   3.5 REFERENZPROJEKT (#projekt, dunkel)
   ========================================================================= */
.project-lead {
  max-width: var(--container-narrow);
  margin-top: var(--sp-8);
  font-size: var(--fs-400);
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif-light);
  line-height: var(--lh-snug);
  color: var(--text-on-dark-mut);
}
/* Horizontaler Prozess-Stepper mit Knoten + Verbindungslinie */
.project-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-16);
  list-style: none;
}
/* durchgehende Linie hinter den Knoten (auf Knotenhöhe) */
.project-stepper::before {
  content: "";
  position: absolute;
  left: 7%; right: 7%;
  top: 14px;
  height: 1px;
  background: linear-gradient(90deg, var(--c-slate), var(--accent) 40%, var(--accent-hover));
  opacity: 0.5;
  z-index: 0;
}
.pstep {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
}
.pstep__node {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-midnight);
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(6,7,13,1), 0 0 12px rgba(0,230,140,0.3);
}
.pstep__num {
  font-family: var(--ff-serif);
  font-size: var(--fs-100);
  font-weight: var(--fw-serif-semi);
  color: var(--accent);
  line-height: 1;
}
.pstep__label {
  font-size: var(--fs-100);
  color: var(--text-on-dark-mut);
  max-width: 16ch;
  line-height: 1.35;
}
/* Mobile: vertikaler Stepper (Linie links, Knoten aufgereiht) */
@media (max-width: 760px) {
  .project-stepper {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-left: var(--sp-2);
  }
  .project-stepper::before {
    left: 14px; right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
    background: linear-gradient(180deg, var(--c-slate), var(--accent) 40%, var(--accent-hover));
  }
  .pstep {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    text-align: left;
  }
  .pstep__label { max-width: none; font-size: var(--fs-200); }
}
.project-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-12);
}
.project-tags li {
  font-size: var(--fs-100);
  letter-spacing: 0.04em;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-on-dark-mut);
}

/* Inline-Links innerhalb übersetzter Fließtexte (z.B. "OIT.ONE") */
.inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out-soft);
}
.inline-link:hover { text-decoration-color: var(--accent); }

/* Tonwert-Atempause vor Kontakt (bricht Monotonie im Dark-Theme) */
#faq { background: var(--bg-elevated); }

/* =========================================================================
   4. KAPITEL III — WERKZEUGE (#werkzeuge, dunkel, schmal)
   ========================================================================= */
#werkzeuge {
  padding-block: clamp(3.5rem, 6vw, 6rem);   /* bewusst schmaler */
  background: var(--bg-elevated);
}
#werkzeuge .werkzeuge-intro {
  max-width: var(--container-narrow);
  margin-bottom: var(--sp-12);
}
#werkzeuge .werkzeuge-intro p {
  font-size: var(--fs-300);
  color: var(--text-on-dark-mut);
  margin-top: var(--sp-3);
}
/* Horizontaler Knoten-Streifen: 6 Werkzeuge, durch Linie verbunden */
.tools-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-4);
}
/* durchgehende Linie hinter den Knoten (Desktop) */
.tools-strip::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%;
  top: 15px;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.tool-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 90px;
  text-align: center;
  cursor: default;
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.tool-node__dot {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-midnight);
  border: 1px solid var(--line);
  color: var(--c-slate);
  transition: border-color var(--dur-med) var(--ease-out-soft),
              color var(--dur-med) var(--ease-out-soft),
              box-shadow var(--dur-med) var(--ease-out-soft);
}
.tool-node__dot svg { width: 16px; height: 16px; filter: drop-shadow(0 0 4px currentColor); }
.tool-node:hover .tool-node__dot {
  border-color: var(--accent);
  color: var(--accent-hover);
  box-shadow: 0 0 0 4px rgba(0,230,140,0.12), 0 0 16px rgba(0,230,140,0.35);
}
.tool-node__label {
  font-size: var(--fs-200);
  font-weight: var(--fw-sans-med);
  color: var(--text-on-dark-mut);
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.tool-node:hover .tool-node__label { color: var(--text-on-dark); }

@media (max-width: 620px) {
  .tools-strip::before { display: none; }
  .tools-strip { justify-content: center; }
  .tool-node { flex: 0 1 30%; }
}

/* =========================================================================
   5. KAPITEL IV — WEG (#weg, Elfenbein) — EINE Timeline
   ========================================================================= */
#weg .timeline-wrap {
  max-width: 780px;
  margin-top: var(--sp-8);
}
/* Timeline-Farben auf Elfenbein-Kontext (Rail dunkler für Kontrast) */
#weg .timeline-rail { background: var(--line-ivory); }
#weg .timeline-dot { background: var(--c-surface-alt); border-color: var(--c-slate); }

/* =========================================================================
   6. KAPITEL V — AUSBLICK (#ausblick, dunkel) — Canvas-Hintergrund
   ========================================================================= */
#ausblick {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6,7,13,0.6), rgba(6,7,13,0.85)),
    url('../img/bg-ausblick.webp') center/cover no-repeat,
    var(--bg);
}
#ausblick-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-motif-hero);
  pointer-events: none;
  opacity: 0.9;
}
#ausblick::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-motif-hero);
  background: radial-gradient(90% 70% at 70% 50%, transparent, var(--c-midnight) 78%);
  pointer-events: none;
}
.ausblick-inner {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--container-narrow);
}
.ausblick-text {
  font-family: var(--ff-serif);
  font-size: var(--fs-400);
  font-weight: var(--fw-serif-light);
  line-height: var(--lh-body);
  color: var(--text-on-dark);
  margin-top: var(--sp-4);
  font-variation-settings: 'opsz' var(--serif-opsz-text), 'wght' var(--fw-serif-light);
}
/* =========================================================================
   7. KONTAKT (#kontakt, dunkel/tief)
   ========================================================================= */
#kontakt {
  position: relative;
  padding-block: clamp(6rem, 4rem + 8vw, 11rem);
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--sp-8);
  position: relative;
}
/* dünne Linie, die die drei Karten als Knoten verbindet (Desktop) */
.contact-grid::before {
  content: "";
  position: absolute;
  left: 16%; right: 16%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
  .contact-grid::before { display: none; }
}

/* =========================================================================
   8. FOOTER (#footer, Midnight-soft)
   ========================================================================= */
#footer {
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-16) var(--sp-12);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-8);
}
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.footer-brand {
  display: inline-flex;
  transition: filter var(--dur-fast) var(--ease-out-soft);
}
.footer-brand:hover { filter: drop-shadow(0 0 12px rgba(0,230,140,0.5)); }
.footer-privacy {
  font-size: var(--fs-200);
  color: var(--text-on-dark-mut);
  max-width: 60ch;
  margin-inline: auto;
  line-height: var(--lh-body);
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-100);
  color: var(--text-on-dark-mut);
}
.footer-secret {
  font-size: var(--fs-100);
  color: var(--text-on-dark-mut);
  opacity: 0.7;
}