/* ==========================================================================
   GOYER PFINGSTEN — LAYOUT
   Header/Navigation, Burger-Menü, Hero, Sections, Footer.
   Breakpoint-Referenz (siehe tokens.css Kommentarblock):
   1024px = verbindliche Burger-Menü-Schwelle.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* HEADER / NAVIGATION                                                     */
/* ---------------------------------------------------------------------- */

.site-header{
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled{
  background: rgba(248,247,247,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-md);
}

.site-header__logo{
  position: relative;
  display: block;
  height: clamp(5.5rem, 4.9231rem + 2.5641vw, 8rem);
  aspect-ratio: 442 / 170;
  flex-shrink: 0;
}
.site-header__logo .logo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.site-header__logo .logo-img--dark{ opacity: 0; }
.site-header.is-scrolled .site-header__logo .logo-img--light{ opacity: 0; }
.site-header.is-scrolled .site-header__logo .logo-img--dark{ opacity: 1; }

.site-nav{
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.site-nav__list{
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.site-nav__item{ flex-shrink: 0; }
.site-nav__list a{
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--color-white);
  padding-block: var(--space-3xs);
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled .site-nav__list a{ color: var(--c-text); }
.site-nav__list a:hover,
.site-nav__list a:focus-visible{ border-color: currentColor; }

.site-nav__cta,
.site-header.is-scrolled .site-nav__cta{ flex-shrink: 0; padding-block: var(--space-2xs) !important; color: var(--color-white) !important; }
.site-nav__cta:hover,
.site-nav__cta:focus-visible{ border-color: transparent !important; }

/* Dropdown-Submenü ("Leistungen" -> Privatkunden / Geschäftskunden) */
.site-nav__item{ position: relative; }
.site-nav__link-parent{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}
.site-nav__caret{
  width: 9px; height: 9px;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-standard);
}
.site-nav__item:hover > .site-nav__link-parent .site-nav__caret,
.site-nav__item:focus-within > .site-nav__link-parent .site-nav__caret,
.site-nav__item.is-open > .site-nav__link-parent .site-nav__caret{ transform: rotate(180deg); }

.site-nav__submenu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  width: max-content;
  max-width: min(340px, calc(100vw - 2rem));
  margin-top: var(--space-sm);
  padding: var(--space-2xs);
  background: var(--c-surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lifted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              visibility 0s linear var(--dur-base);
}
/* Sprechblasen-Pfeil oben am Dropdown, zeigt auf "Leistungen" */
.site-nav__submenu::before{
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: var(--c-surface);
  border-radius: 2px 0 0 0;
  transform: rotate(45deg);
  box-shadow: -1px -1px 2px rgba(36,25,28,0.04);
}
.site-nav__item:hover > .site-nav__submenu,
.site-nav__item:focus-within > .site-nav__submenu,
.site-nav__item.is-open > .site-nav__submenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              visibility 0s linear 0s;
}
.site-nav__submenu a,
.site-nav__submenu-btn{
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text) !important;
  text-transform: none;
  letter-spacing: var(--ls-normal);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-s);
  border-bottom: none !important;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.site-nav__submenu a:hover,
.site-nav__submenu a:focus-visible,
.site-nav__submenu-btn:hover,
.site-nav__submenu-btn:focus-visible{ background: var(--c-accent-tint); color: var(--c-accent-dark) !important; }

/* Verschachteltes Untermenü (z.B. "Für Geschäftskunden" -> Spezialthemen):
   dieselben .site-nav__item/.has-submenu/.site-nav__caret/.site-nav__submenu
   Klassen werden rekursiv wiederverwendet — hier nur die Positionierung für
   den Fall überschrieben, dass ein .site-nav__submenu selbst innerhalb eines
   anderen .site-nav__submenu liegt: es klappt dann seitlich aus statt nach
   unten, und die Sprechblasen-Spitze der obersten Ebene wird nicht wiederholt. */
.site-nav__submenu .site-nav__submenu{
  top: calc(var(--space-2xs) * -1);
  left: 100%;
  margin-top: 0;
  margin-left: 0;
  transform: translateX(6px);
}
/* Der Link eines verschachtelten Eintrags (z.B. "Für Geschäftskunden") muss
   Text + Pfeil zwingend in einer Zeile halten, auch wenn .site-nav__submenu a
   weiter oben display:block setzt -> hier explizit wieder auf Flex mit
   nowrap zurückgesetzt, Pfeil bekommt flex-shrink:0. */
.site-nav__submenu .site-nav__item.has-submenu > .site-nav__link-parent{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  white-space: nowrap;
}
/* Unsichtbare Hover-Brücke: schließt die Lücke zwischen dem Eltern-Listenpunkt
   und dem seitlich ausklappenden Untermenü, damit der :hover-Zustand beim
   Mausweg dorthin nicht verloren geht (klassisches CSS-Flyout-Problem). */
.site-nav__submenu .site-nav__item.has-submenu::after{
  content: "";
  position: absolute;
  top: 0;
  right: -12px;
  width: 12px;
  height: 100%;
}
.site-nav__submenu .site-nav__submenu::before{ display: none; }
.site-nav__submenu .site-nav__item:hover > .site-nav__submenu,
.site-nav__submenu .site-nav__item:focus-within > .site-nav__submenu,
.site-nav__submenu .site-nav__item.is-open > .site-nav__submenu{
  transform: translateX(0);
}

/* Pfeil der zweiten Ebene zeigt zur Seite (öffnet als Flyout, nicht nach unten) */
.site-nav__submenu .site-nav__item .site-nav__caret{ transform: rotate(-90deg); }
.site-nav__submenu .site-nav__item:hover .site-nav__caret,
.site-nav__submenu .site-nav__item:focus-within .site-nav__caret,
.site-nav__submenu .site-nav__item.is-open .site-nav__caret{ transform: rotate(0deg); }

/* Burger — nur < 1024px sichtbar */
.burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.burger span{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled .burger span{ background: var(--c-text); }
body.nav-open .burger span{ background: var(--color-white); }
body.nav-open .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity: 0; }
body.nav-open .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Vollbildmenü */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--c-brand-dark);
  padding: var(--space-md) var(--container-gutter) var(--space-lg);
  /* Fällt der Inhalt (Menüpunkte + Footer-Buttons) höher aus als die
     Viewporthöhe, z.B. bei kleinen Displays oder mehreren Footer-Buttons,
     darf nichts unerreichbar abgeschnitten werden -> die ganze Fläche wird
     vertikal scrollbar. */
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              visibility 0s linear var(--dur-base);
}
body.nav-open .mobile-nav{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              visibility 0s linear 0s;
}
.mobile-nav__logo{
  height: clamp(5.5rem, 4.9231rem + 2.5641vw, 8rem);
  width: auto;
}

.mobile-nav__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  flex-shrink: 0;
}
.mobile-nav__close{
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.mobile-nav__close span{
  position: absolute;
  width: 22px; height: 2px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
}
.mobile-nav__close span:first-child{ transform: rotate(45deg); }
.mobile-nav__close span:last-child{ transform: rotate(-45deg); }

.mobile-nav__list{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}
.mobile-nav__list a{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--color-white);
}

/* Ausklapp-Untermenü ("Leistungen" -> Privatkunden / Geschäftskunden) */
.mobile-nav__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.mobile-nav__caret{
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-s);
  background: rgba(255,255,255,0.04);
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.mobile-nav__caret:hover,
.mobile-nav__caret:focus-visible{
  border-color: var(--color-white);
  background: rgba(255,255,255,0.12);
}
.mobile-nav__caret svg{
  width: 16px; height: 16px;
  color: var(--color-white);
  transition: transform var(--dur-base) var(--ease-standard);
}
.has-submenu.is-open > .mobile-nav__row .mobile-nav__caret svg{ transform: rotate(180deg); }

.mobile-nav__submenu{
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: max-height var(--dur-base) var(--ease-standard);
}
/* Großzügig bemessen, damit auch die verschachtelte Ebene (z.B. "Für
   Geschäftskunden" -> 4 Spezialthemen) beim gleichzeitigen Aufklappen von
   Eltern- und Kind-Akkordeon nicht abgeschnitten wird. Der Trenner (weiße
   Linie + Abstand) sitzt bewusst nur in der :is-open-Regel, nicht in der
   Basis-Regel: bei max-height:0 (box-sizing:border-box) würde ein
   border-top sonst als hauchdünne Linie stehen bleiben, obwohl das
   Untermenü eigentlich geschlossen ist. */
.has-submenu.is-open > .mobile-nav__submenu{
  max-height: 30rem;
  margin-top: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.4);
}
.mobile-nav__submenu a,
.mobile-nav__submenu-btn{
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: calc(var(--fs-base) * 1.2);
  text-transform: none;
  letter-spacing: var(--ls-normal);
  color: var(--color-white);
  padding-block: var(--space-3xs);
  padding-left: var(--space-md);
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

/* Verschachtelte Ebene: stärker eingerückt, eigene (etwas kleinere) Basisgröße,
   aber ebenfalls um 20% vergrößert gegenüber ihrer Basisgröße. */
.mobile-nav__submenu .mobile-nav__submenu{
  padding-left: var(--space-md);
  gap: var(--space-2xs);
}
.mobile-nav__submenu .mobile-nav__submenu a,
.mobile-nav__submenu .mobile-nav__submenu-btn{
  font-size: calc(var(--fs-sm) * 1.2);
  padding-left: var(--space-md);
}
.mobile-nav__submenu .mobile-nav__row .mobile-nav__caret{ width: 40px; height: 40px; }
.mobile-nav__submenu .mobile-nav__row .mobile-nav__caret svg{ width: 14px; height: 14px; }
.mobile-nav__foot{
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.mobile-nav__foot a{
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--color-teal-200);
}
/* Telefonnummer als breiter, direkt antippbarer Button statt reinem Text. */
.mobile-nav__foot a.btn{
  color: var(--color-white);
  font-size: var(--fs-md);
  padding-block: var(--space-sm);
}
.mobile-nav__foot a.btn svg{ flex-shrink: 0; width: 22px; height: 22px; }

@media (max-width: 1023px){
  .site-nav{ display: none; }
  .burger{ display: flex; }
}
@media (min-width: 1024px){
  .mobile-nav{ display: none; }
}

/* ---------------------------------------------------------------------- */
/* HERO                                                                    */
/* ---------------------------------------------------------------------- */

.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}
.hero__media{
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Hero-eigene Abmischung nach CMYK-Vorgabe der Kundin (C0 M90 Y90,
     K je Stufe 65/55/45) — bewusst feste Werte statt Marken-Tokens,
     damit nur der Hero diese warme Rot-Mischung trägt. */
  background: linear-gradient(150deg, #590909 0%, #730B0B 62%, #8C0E0E 100%);
}
.hero__media video,
.hero__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
.hero__media img.is-active,
.hero__media video.is-active{ opacity: 1; }
.hero__scrim{
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Kein Scrim mehr: der neutrale Dunkel-Layer hat wie ein Grauschleier
     gewirkt und das Rot entsättigt. Textkontraste stimmen auch ohne
     (Weiß auf hellstem Verlaufston 6,2:1, geprüft). Layer bleibt für
     spätere Foto-/Video-Hintergründe erhalten. */
  background: none;
}
.hero__content{
  position: relative;
  width: 100%;
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-2xl);
}
.hero__title{
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  max-width: 20ch;
  color: var(--color-white);
}
.hero__title em{
  font-style: normal;
  color: var(--color-teal-200);
}
.hero__lede{
  max-width: 46ch;
  font-size: var(--fs-md);
  color: var(--color-bordeaux-100);
  margin-bottom: var(--space-subline-content);
}
.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}
/* ---------------------------------------------------------------------- */
/* HERO — dynamischer Text-Aufbau beim Laden (reines CSS, kein JS nötig)   */
/* Jedes Element trägt einen Stagger-Index --wi; ein Element/Wort baut     */
/* per Keyframe-Animation ein, zeitversetzt über --hb-step. Läuft auch     */
/* ohne JavaScript, da CSS-Animationen automatisch beim Rendern starten.  */
/* ---------------------------------------------------------------------- */
.hero--kinetic{
  --hb-base: 120ms;
  --hb-step: 80ms;
}
.hb-words{ display: inline; }
.hb-word{
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(0.98);
  filter: blur(6px);
  animation: hb-word-in 700ms var(--ease-reveal) both;
  animation-delay: calc(var(--hb-base) + var(--wi, 0) * var(--hb-step));
}
.hb-line{
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  animation: hb-line-in 620ms var(--ease-reveal) both;
  animation-delay: calc(var(--hb-base) + var(--wi, 0) * var(--hb-step));
}
@keyframes hb-word-in{
  to{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes hb-line-in{
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hb-word, .hb-line{
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------------------------------------------------------------------- */
/* HERO-CLAIM — mehrzeilige, zeitversetzte Reveal-Sequenz mit Pausen      */
/* ("Steuerberatung." -> Pause -> "Persönlich." -> Pause -> "Digital." ->  */
/* Pause -> "Vorausschauend."). Jedes Wort blendet gleich ein (kein        */
/* Sonderverhalten mehr für "Digital." — die frühere Breiten-/Typewriter-  */
/* Animation wurde verworfen, da sie wiederholt Versatz- und Abstands-     */
/* probleme verursacht hat). Reine CSS-Animation über animation-delay in   */
/* Sekunden (--hc-d je Wort), läuft einmalig beim Laden, kein JavaScript,  */
/* kein Loop. */
/* ---------------------------------------------------------------------- */
.hero__title--claim{ max-width: 34ch; }
.hc-words{ display: block; }
.hc-line{ display: block; }
.hc-line + .hc-line{ margin-top: 0.12em; }
/* Zeile 2 ("Persönlich. Digital. Vorausschauend.") bewusst kleiner als die
   Haupt-Headline — sonst passt der Dreiwort-Claim bei großer --fs-hero auf
   Desktop-Breite nicht mehr in eine Zeile. Ab 768px in einer Zeile, darunter
   darf natürlich umbrechen. */
.hc-line--2{
  font-size: clamp(1.5rem, 1.05rem + 2.2vw, 3.25rem);
  font-weight: var(--fw-medium);
}
@media (min-width: 768px){
  .hc-line--2{ white-space: nowrap; }
}
.hc-word{
  display: inline-block;
  vertical-align: bottom;
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(0.98);
  filter: blur(6px);
  animation: hb-word-in 700ms var(--ease-reveal) both;
  animation-delay: var(--hc-d, 0s);
}
.hc-word--accent{ color: var(--color-teal-200); }
@media (prefers-reduced-motion: reduce){
  .hc-word{
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------------------------------------------------------------------- */
/* SECTIONS — generisches Raster                                          */
/* ---------------------------------------------------------------------- */

.section{
  padding-block: var(--space-3xl);
  border-top: 1px solid var(--c-border);
}
/* Erste Section direkt unter dem fixierten Header: --space-3xl allein reicht
   nicht, um die tatsächliche Headerhöhe zu unterschreiten (--header-height
   ist über den gesamten fluiden Bereich größer als --space-3xl), wodurch
   die Eyebrow sonst direkt am Header klebt. Eigene Headerhöhe einrechnen,
   analog zu .hero__content. */
.section--flush-top{
  border-top: none;
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-lg);
}
/* Content-Section direkt nach dem Hero: eigener, deutlich kleinerer
   Abstand nach oben statt des vollen --space-3xl, sonst summiert sich der
   Leerraum aus Hero-Bottom-Padding + Content-Top-Padding zu einer
   unästhetisch großen Lücke. Nur die unmittelbar folgende Section betroffen
   (Adjacent-Sibling), spätere Sections behalten ihren normalen Rhythmus. */
.section--flush-top + .section--no-divider{
  padding-top: var(--space-lg);
}
/* Für Sections, die NICHT die erste unter dem fixierten Header sind, aber
   trotzdem ohne Trennlinie an die vorherige Section anschließen sollen —
   ohne die Header-Clearance von .section--flush-top ein zweites Mal
   aufzuaddieren (das war der Bug: mehrere aufeinanderfolgende
   .section--flush-top pro Seite summierten die Headerhöhe und erzeugten
   einen riesigen Leerraum vor dem eigentlichen Inhalt). */
.section--no-divider{ border-top: none; }
.section--alt{ background: var(--c-surface); }
.section--dark{
  position: relative;
  overflow: hidden;
  background: var(--c-brand-dark);
  color: var(--color-white);
  border-top: none;
}

.section--dark h2,
.section--dark h3{ color: var(--color-white); }
.section--dark .eyebrow{ color: var(--color-teal-200); }
.section--dark .eyebrow::before{ background: var(--color-teal-200); }

.section__head{ max-width: 78ch; margin-bottom: var(--space-subline-content-loose); }
.section__lede{
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  max-width: 75ch;
}
.section--dark .section__lede{ color: var(--color-bordeaux-100); }

.grid{
  display: grid;
  gap: var(--space-md);
}
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--kanzlei{ grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); align-items: center; }

@media (max-width: 1023px){
  .grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--kanzlei{ grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 639px){
  .grid--3, .grid--4, .grid--2{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* S-MARKENELEMENT — dezente Hintergrund-Deko                              */
/* Das "S" aus dem Logo (assets/deko/s-outline-*.svg) als haarfeine       */
/* Konturlinie, stark zurückgenommen, immer hinter dem Inhalt und ohne    */
/* Einfluss auf Interaktion (pointer-events über Pseudo-Element ohnehin   */
/* keine) oder Layout (absolut positioniert, overflow gekappt).           */
/* ---------------------------------------------------------------------- */
.smark{ position: relative; overflow: hidden; }
.smark::after{
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -3%;
  width: clamp(180px, 22vw, 400px);
  aspect-ratio: 373 / 843;
  transform: translateY(-46%) rotate(10deg);
  background: url("../assets/deko/s-outline-ink.svg") no-repeat center / contain;
  opacity: 0.10;
  pointer-events: none;
}
.smark > .container{ position: relative; z-index: 1; }

/* Hero (Startseite): großes weißes Outline-S rechts, sehr subtil über dem
   Scrim, aber unter dem Textinhalt (z-index -1 innerhalb der isolierten
   Hero-Stacking-Context, ::after wird nach .hero__scrim gemalt). */
.hero::after{
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -4%;
  width: clamp(260px, 30vw, 560px);
  aspect-ratio: 373 / 843;
  transform: translateY(-44%) rotate(10deg);
  background: url("../assets/deko/s-outline-white.svg") no-repeat center / contain;
  opacity: 0.12;
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* FOOTER                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer{
  position: relative;
  overflow: hidden;
  background: var(--c-brand-dark);
  color: var(--color-bordeaux-100);
  padding-block: var(--space-2xl) var(--space-lg);
}
/* S-Element auch im Footer: weiße Kontur, kaum wahrnehmbar, rechts unten
   angeschnitten. Inhalt liegt über eigener z-Ebene. */
.site-footer::after{
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -18%;
  right: -2%;
  width: clamp(200px, 20vw, 380px);
  aspect-ratio: 373 / 843;
  transform: rotate(-8deg);
  background: url("../assets/deko/s-outline-white.svg") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
}
.site-footer > .container{ position: relative; z-index: 1; }
.site-footer__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-footer__brand .logo-img{ height: clamp(4.5rem, 4.0385rem + 2.0513vw, 6.5rem); width: auto; margin-bottom: var(--space-sm); }
.site-footer__brand p{ max-width: 34ch; font-size: var(--fs-sm); color: var(--color-bordeaux-100); }
.site-footer__col h5{
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--color-teal-200);
  margin-bottom: var(--space-sm);
  font-weight: var(--fw-semibold);
}
.site-footer__col ul{ display: flex; flex-direction: column; gap: var(--space-2xs); }
.site-footer__col a{ font-size: var(--fs-sm); color: var(--color-bordeaux-100); }
.site-footer__col a:hover{ color: var(--color-white); }

.site-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-bordeaux-300);
}

@media (max-width: 1023px){
  .site-footer__grid{ grid-template-columns: 1fr 1fr; }
  .site-footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 639px){
  .site-footer__grid{ grid-template-columns: 1fr; }
}