/* life long -- eigene Anpassungen ausschliesslich hier (R1: Basis-CSS bleibt unangetastet). */

@font-face {
  font-family: 'Neue Haas Grotesk Display';
  src: url('/_external/fonts-thirty7/642c32f06ea47131c6f6c62b_NeueHaasDisplayLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display';
  src: url('/_external/fonts-thirty7/642c32ef00bfb7367f00fb83_NeueHaasDisplayRoman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display';
  src: url('/_external/fonts-thirty7/642c32f05abed12436985e76_NeueHaasDisplayMediu.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display';
  src: url('/_external/fonts-thirty7/642c32ef6585b9167afea08f_NeueHaasDisplayBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ogg';
  src: url('/_external/fonts-thirty7/644f7866b6958147045c8517_Ogg-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Fliesstext: Neue Haas Grotesk Display statt Spender-Variable-Font */
body {
  --font-family: 'Neue Haas Grotesk Display', Arial, sans-serif;
}

/* Ueberschriften: erben ueber --font-family von body (Neue Haas Grotesk Display) --
   kein eigener Font-Family-Eintrag noetig, day1run setzt auf h1-h5 und den u-h-Klassen
   ohnehin keine eigene font-family (nur Groesse/Zeilenhoehe/Letter-Spacing). */

/* Ogg Italic (Thirty7-Mirror) nur als Akzent-Schrift -- King-Ansage: "das bisschen
   geschweifte soll nur fuer Akzente dienen". Greift ueberall dort, wo bereits die
   Akzentfarbe .color-gray-dark verwendet wird (Akzent-Spans in Ueberschriften,
   gedaempfte Kicker wie "Wer wir sind"/"Kontakt"/"Bereit?", Klammer-Zusaetze wie
   "(Hauptsitz)") -- nie fuer den grossen Fliesstext einer Ueberschrift.
   Akzentfarbe (warmes Gold/Messing, King-Auswahl 30.07.2026) ergaenzt dieselbe
   Klasse -- betrifft dieselben "manche Ueberschriften"-Stellen, nicht den
   Fliesstext. */
.color-gray-dark {
  font-family: 'Ogg', serif;
  font-style: italic;
  color: #C9A66B;
}

/* Wortmarke "life long": zwei Schriften, wie in der Thirty7-Fassung festgelegt --
   "life" ist der einzige feste (nicht akzentgebundene) Ogg-Einsatz, da Teil des
   Logos/der Wortmarke selbst. */
.wordmark-life {
  font-family: 'Ogg', serif;
  font-style: italic;
  font-weight: 400;
  color: #C9A66B;
}
.wordmark-long {
  font-family: 'Neue Haas Grotesk Display', sans-serif;
  font-weight: 700;
  color: #C9A66B;
}

/* Logo: Icon + Wortmarke "life long" nebeneinander statt Icon allein. */
.logo_svg.wordmark_text,
.burger_logo_img.wordmark_text,
a.wordmark_text {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Spender-Reset (a{background-color:#0000}) setzt weder Farbe noch Unterstreichung --
   ohne eigene Komponentenklasse (.button/.text-draw) fallen Links auf Browser-Default
   (blau/unterstrichen) zurueck, z.B. Footer-Wortmarke oder Inline-Links im Rechtstext.
   Generischer Reset statt Einzelfall-Flicken. */
a {
  color: inherit;
  text-decoration: none;
}
a.lifelong-inline-link {
  text-decoration: underline;
}

/* Bild-Logo (ersetzt die Text-Wortmarke in Nav/Burger/Footer) -- Hoehe an der
   bisherigen Textmarke ausgerichtet (~1.25em, skaliert mit dem Text mit). */
.lifelong-logo-mark {
  height: 1.25em;
  width: auto;
  display: block;
}

/* Bugfix (beim Logo-Check entdeckt, nicht durch den Logo-Einbau verursacht):
   .hero hat in der Basis background-color:transparent (erwartet ein
   Bild/Video-Kind als Fuellung). Die Rechtsseiten (Impressum/Datenschutz)
   haben keinen Bild-Hero, daher blieb die ganze Kopfzeile (100vh) auf dem
   weissen body-Hintergrund -- unsichtbar in fruehen Screenshots, weil der
   Pageloader (der selbst korrekt dunkel ist) sie so lange ueberdeckt hat.
   Dunkler Grundton wie beim Footer nachgezogen. */
.lifelong-legal-hero {
  background-color: var(--color-background);
}

/* Task #47: .hero ist in der Basis fest height:100vh (fuer die Bild-Hero
   der Homepage gedacht) -- auf den Rechtsseiten sitzt darin nur Nav +
   H1, wodurch bis zu 750px leerer Raum vor dem Fliesstext entstand.
   Rechtsseiten-Hero schrumpft auf ihren tatsaechlichen Inhalt. */
.lifelong-legal-hero {
  height: auto;
  min-height: 0;
}
.lifelong-legal-hero .hero_container {
  height: auto;
  padding-bottom: 2.5em;
}

/* Leistungen-Karten als Slider (Task #25) -- day1run's centered-slider-Muster
   wiederverwendet (bereits produktiv bei "So arbeiten wir"), loest den
   bekannten Desktop-Overflow (.runs_cms_item_inner{width:34em} x3 sprengte
   die starre Flex-Row, kein flex-wrap). Zwei gezielte Ueberschreibungen,
   beide auf #runs beschraenkt -- Basis-CSS bleibt unangetastet:
   1) .centered-slider-group bringt margin-top:11.25em/padding-bottom:1.25em
      aus dem Kalender-Kontext mit, hier unpassend (die Runs-Sektion hat
      bereits eigenen Abstand ueber .runs_wrapper). Auf 0 zurueckgesetzt.
   2) .runs_cms_item{width:100%} kollidiert mit .centered-slider-slide{flex:
      none} -- als Flex-Item ohne Wachstum wuerde width:100% jede Karte auf
      die volle Zeilenbreite ziehen. Auf auto gesetzt, die tatsaechliche
      Kartenbreite kommt weiterhin von .runs_cms_item_inner{width:34em}. */
#runs .centered-slider-group {
  margin-top: 0;
  padding-bottom: 0;
}
#runs .centered-slider-slide.runs_cms_item {
  width: auto;
}

/* nav-018 als echte Navigation (Task #24) -- King-Ansage: "kein normaler
   Header sondern das als Nav". Das bestehende Burger-Overlay (.burger)
   hat schon eine funktionierende Basis-Animation (Icon-Morph, Lenis-
   Scroll-Lock, SplitText-Stagger, siehe 59817.js initMobileMenu) -- die
   wird NICHT ersetzt oder dupliziert. Stattdessen wird der Toggle auf
   allen Breakpoints sichtbar gemacht (statt nur mobil) und die separate
   Desktop-Inline-Linkzeile im Header ausgeblendet -- die Nav-Overlay
   (mit den unten ergaenzten nav-018-Strips/Frame) ist jetzt "die Nav"
   auf jeder Bildschirmgroesse. Footer-Kopie derselben Linkzeilen-Klasse
   bleibt unberuehrt (Scoping ueber .nav als Vorfahre). */
/* z-index:1000 + position:relative fehlten ausserhalb der Mobile-Media-
   Query komplett (nur display:none/block dort definiert) -- ohne eigenen
   Stapelkontext verliert der Toggle-Button auf Desktop gegen das
   Fullscreen-Overlay (z-index:999) und wird bei offenem Menu unklickbar
   (Fund: Playwright-Klick auf den Toggle schlug beim Schliessen-Test mit
   "burger_content intercepts pointer events" fehl). */
.nav_burger {
  z-index: 1000;
  display: block;
  position: relative;
}
/* Die komplette Burger-Overlay-Optik (.burger, .burger_bg, .burger_content,
   .burger_logo(_img), .burger_links, .burger_footer, .nav_burger_icon/_line)
   existiert in der Spender-Basis AUSSCHLIESSLICH innerhalb der Mobile-
   Media-Query (<=991px) -- ausserhalb davon nur .burger{display:none},
   sonst nichts (kein Hintergrund, kein Padding, kein Flex-Layout). Fuer
   den Desktop-Einsatz als echte Nav wird dieser gesamte Eigenschaftssatz
   unconditional uebernommen (1:1 aus der Media-Query kopiert), sonst
   rendert das Overlay ungestylt/transparent/ueberlappend statt als volle
   Bildschirmflaeche. Eine Ausnahme: .burger bekommt position:fixed statt
   absolute -- die Spender-Variante richtet sich per position:absolute
   nach dem naechsten positionierten Vorfahren (.nav, position:relative),
   was auf Mobile zufaellig passt (.nav nimmt dort die volle Breite ein),
   auf Desktop aber nur eine schmale Grid-Spalte ergibt (Fund beim ersten
   Screenshot-Beweis). position:fixed richtet sich immer nach dem
   Viewport, unabhaengig vom Grid-Kontext des Vorfahren. */
.nav_burger_icon {
  gap: 0.5em;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.nav_burger_line {
  width: 2.5em;
}
.burger {
  z-index: 999;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0;
  display: block;
  position: fixed;
  inset: 0%;
}
.burger_bg {
  background-color: var(--color-background);
  width: 100%;
  height: 100%;
  min-height: 100vh;
  position: absolute;
  inset: 0%;
}
.burger_content {
  width: 100%;
  height: 100dvh;
  padding: 2.5em var(--grid-margin) 3.75em;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  position: relative;
}
.burger_logo {
  justify-content: center;
  align-items: center;
  display: flex;
}
.burger_logo_img {
  width: 6.375em;
}
.burger_links {
  gap: 0.625em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.burger_footer {
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.burger_item {
  color: var(--color);
  text-decoration: none;
}
.nav .nav-link_wrapper {
  display: none;
}

/* nav-018-Strips + Frame: zusaetzliche Ebene zwischen .burger_bg und
   .burger_content, angesteuert von lifelong-custom.js synchron zu
   body.burger-open (siehe dort). Farben aus den Projekt-Tokens
   (--color-background/--color) statt nav-018s eigenen Hex-Werten. */
.menu-strips {
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: absolute;
  inset: 0%;
}
.menu-strip {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-background) 88%, white 4%), var(--color-background));
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.menu-strip:last-child {
  border-right: none;
}
.menu-frame {
  z-index: 1;
  border: 1px solid rgba(201, 166, 107, 0.25);
  border-radius: 2.5em;
  position: absolute;
  inset: 1.75em;
}
.burger_content {
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .menu-strip,
  .menu-frame {
    transition: none !important;
  }
}

/* hero-022 Glaseffekt fuer "So arbeiten wir" (Task #26) -- Ueberschrift
   "wir" auf dem Wireframe-Skizzen-Hintergrund kaum lesbar. .calendar_background
   ist in der Basis bereits position:absolute;overflow:hidden (erfuellt die
   Fallstrick-Vorgabe aus hero-022/meta.json). Progressive Enhancement,
   siehe hero022-glass.js: das echte <img> bleibt der Fallback bis das
   Script erfolgreich eine Textur geladen hat (.hero022-ready), erst dann
   wird es ausgeblendet -- kein WebGL/reduzierte Bewegung = Bild bleibt wie
   zuvor sichtbar. */
.calendar_background canvas.hero022-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.calendar_background_img {
  transition: opacity 0.4s ease;
}
.calendar_background.hero022-ready .calendar_background_img {
  opacity: 0;
}
/* Ueberschrift+Unterzeile erben --color:white vom Spender (dunkles
   Theme) -- der Hintergrund hier ist aber ein helles Skizzenpapier-Foto.
   Der hero-022-Glaseffekt kaschiert das nur auf Geraeten mit
   hover:hover+pointer:fine (siehe Media-Query in hero022-glass.js) --
   auf Touch-Geraeten greift der Effekt nie, Text blieb dort unlesbar
   (Koenig-Meldung, echtes Foto vom iPhone). .color-gray-dark (Gold-
   Akzent-Span "we"/"wir") hat eine eigene explizite Farbe und bleibt
   davon unberuehrt. */
.calendar_header {
  color: var(--color-background);
}

/* Sternenfeld-Background im Pageloader (background-010 aus library/effects/)
   -- Nachbau/Inspiration von Shopify Editions Winter26s Sidekick-Sternenfeld-
   Hintergrund, keine Kopie. .pageloader ist bereits position:fixed;inset:0%
   (Basis-CSS) -- die neue Ebene liegt zwischen .pageloader_bg (Grundton)
   und .pageloader_content (Text), Farben auf Projekt-Gold/Weiss umgestellt.
   Reduced-Motion-Abschaltung per Inline-Guard vor dem Effekt-Script (siehe
   HTML) -- kein Bewegungs-Overhead bei reduzierter Bewegung. */
.pageloader_stars {
  z-index: 0;
  position: absolute;
  inset: 0%;
  width: 100%;
  height: 100%;
}
.pageloader_stars canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.pageloader_content {
  z-index: 1;
}

/* Kontaktformular (Task #39) -- day1run hat kein eigenes Kontaktformular
   (nur das Newsletter-Formular, in Task #28 entfernt) -- .text-field
   (Basis-Input-Styling) wiederverwendet, Formular-Layout/Textarea/
   Absenden-Button und Erfolgs-/Fehlerzustand neu, siehe contact-form.js. */
.lifelong-contact-form-wrapper {
  margin-top: 1.875em;
  max-width: 34em;
}
.lifelong-contact-form {
  display: flex;
  flex-flow: column;
  gap: 0.9375em;
}
.lifelong-form-field {
  width: 100%;
}
.lifelong-form-textarea {
  height: 8em;
  padding-top: 0.75em;
  resize: vertical;
}
.lifelong-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.lifelong-contact-form-wrapper .success-message,
.lifelong-contact-form-wrapper .error-message {
  display: none;
  margin-top: 0.9375em;
  border-radius: 0.125em;
  padding: 0.625em 1.25em;
}
.lifelong-contact-form-wrapper.is-success .lifelong-contact-form {
  display: none;
}
.lifelong-contact-form-wrapper.is-success .success-message {
  display: block;
  background-color: rgba(201, 166, 107, 0.12);
  color: var(--color);
}
.lifelong-contact-form-wrapper.is-error .error-message {
  display: block;
  background-color: rgba(200, 80, 80, 0.16);
  color: var(--color);
}

/* hover-014 Crossfade (Task #40, korrigiert) -- direkt auf den 3
   Leistungskarten-Bildern statt als Sektions-Hintergrund (King-
   Korrektur: verdeckte dort die Ueberschrift). .runs_cms_item_inner
   ist bereits position:relative (Basis-CSS) -- Canvas liegt an
   derselben Stelle wie .runs_map_img (direkt danach im DOM eingefuegt,
   siehe hover014-crossfade.js), Ueberschrift/Text bleiben als spaetere
   Geschwister obenauf. Progressive Enhancement: das <img> bleibt
   Fallback und wird erst nach erfolgreichem Setup ausgeblendet. */
.hover014-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.runs_map_img {
  transition: opacity 0.4s ease;
}
.runs_cms_item_inner.hover014-ready .runs_map_img {
  opacity: 0;
}

/* Burger-Menu: Rechtstexte oben+unten in kleinerer Schrift (Task #49) --
   nav-018s Original-Katalog-Effekt hat .menu-meta (oben) + .menu-footer
   (unten) als Geschwister von .menu-nav in einem
   justify-content:space-between-Container -- dasselbe Muster hier auf
   .burger_content uebertragen (bereits justify-content:space-between,
   siehe Task #24), zwei neue kleine Zeilen ergaenzt: oben DE/EN-
   Sprachumschalter, unten Copyright + Datenschutz/Impressum. Werte
   stammen 1:1 aus dem bestehenden Footer derselben Seite (kein neuer
   Text erfunden). */
.lifelong-burger-lang,
.lifelong-burger-legal {
  display: flex;
  align-items: center;
  gap: 1.25em;
}
.lifelong-burger-lang {
  justify-content: center;
}
.lifelong-burger-legal {
  justify-content: space-between;
  width: 100%;
}
.lifelong-burger-legal-links {
  display: flex;
  gap: 1.25em;
}
.lifelong-burger-lang .burger_item_text,
.lifelong-burger-legal .burger_item_text,
.lifelong-burger-legal p {
  opacity: 0.68;
}

/* Header beim Scrollen sichtbar (Task #50) -- .nav sass bisher als
   Grid-Kind in .hero_container, verschwand beim Scrollen aus der
   Hero-Sektion mit. Jetzt position:fixed, dauerhaft erreichbar. Z-index
   500: unter dem Burger-Overlay (999) und dem Toggle selbst (1000,
   Task #24), damit das Overlay beim Oeffnen weiterhin sauber darueber
   liegt. .nav wird per Grid-Entfernung aus dem Fluss genommen -- der
   Rest der Hero-Sektion braucht daher oben Platz fuer die neue fixe
   Leiste (siehe .hero_container-Nachtrag). */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  padding: var(--grid-gutter) var(--grid-margin);
  background-color: var(--color-background);
}
.hero_container {
  padding-top: calc(var(--grid-gutter) * 2 + 2.5em);
}

/* DE/EN-Toggle dauerhaft im Header (Task #52) -- die zwei text-draw-Links
   existierten bereits im .nav-link_wrapper, der komplett display:none ist
   (Task #24). Statt den ganzen Wrapper zu zeigen (brauchte sonst wieder
   Leistungen/Ueber-uns/Kontakt doppelt neben dem Burger), werden nur DE/EN
   dupliziert und ganz ans Ende von .nav_container gehaengt -- margin-left:
   auto schiebt sie im flex-start-Container ans rechte Ende, ohne
   Logo/Burger zu verschieben. */
.lifelong-header-lang {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.625em;
}