/* ========================================================================
   STYLE.CSS – Onepager Bianca Stahl
   Struktur nach Vorlage leagiltjes.de, Farben/Typografie nach den
   Design-Standards stahls-hunde.de v2.1 (Juli 2026).
   Aufbau: 1. Farben & Grundlagen  2. Typografie  3. Abschnitt für
   Abschnitt  4. Desktop-Anpassungen  5. Animationen
   Die Seite ist „mobile-first" gebaut: Alles oben gilt fürs Handy,
   der @media-Block passt das Layout für größere Bildschirme an.
   ======================================================================== */


/* ------------------------------------------------------------------------
   1. FARBEN & GRUNDLAGEN
   Die Farbpalette aus den Design-Standards v2.1, Abschnitt 1.
   ------------------------------------------------------------------------ */
:root {
  --weiss:        #FFFFFF;  /* Primär: Haupt-Sektionshintergrund */
  --creme:        #FAF5E5;  /* Sekundär: alternierender Sektionshintergrund */
  --text:         #7A7A7A;  /* Fließtext, Eyebrows, gedämpfte Elemente */
  --dunkel:       #1A1A18;  /* Überschriften, Rahmen, Button-Text, dunkle Flächen */
  --highlight:    #FFCD57;  /* Primäres Highlight: CTAs, Badges, Haken-Kreise */
  --karten-rahmen:#e5e0d0;  /* dünner Rahmen für Karten (Abschnitt 9) */
  --footer-text:  #D3D1C7;  /* Textfarbe im dunklen Footer (Abschnitt 18) */

  --schrift-headline: "Montserrat", sans-serif;  /* Überschriften, Eyebrows, Buttons */
  --schrift-lesen:    "Nunito", sans-serif;       /* Fließtext */

  --radius: 8px;            /* durchgängig auf allen Boxen (Regel 3.1) */
  --kopf-hoehe: 4rem;       /* Höhe der Sticky-Navigation */
}

/* Box-Sizing: Breitenangaben schließen Innenabstände mit ein. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-lesen);
  font-weight: 300;               /* Light – laut Typografie-Standard */
  font-size: 1rem;
  line-height: 1.7;
}

/* Bilder verhalten sich wie Blöcke und passen sich der Breite an */
img {
  display: block;
  width: 100%;
  height: auto;
}

/* Wenn jemand Text markiert: Gelb statt Browser-Blau */
::selection {
  background-color: var(--highlight);
  color: var(--dunkel);
}

/* Tastatur-Nutzung: sichtbarer Rahmen um das fokussierte Element */
:focus-visible {
  outline: 3px solid var(--dunkel);
  outline-offset: 3px;
}

/* Sektionsrahmen (Standard 3): jede Sektion bekommt links und rechts
   eine 1px-Linie in Dunkel. Bewusst OHNE Radius (Ausnahme, Regel 3.1). */
.aufschlag,
main > section,
.fusszeile {
  border-left: 1px solid var(--dunkel);
  border-right: 1px solid var(--dunkel);
}

/* Anker-Sprünge landen nicht UNTER der Sticky-Leiste, sondern darunter
   sichtbar – dieser Abstand schafft Platz für die Navigation. */
.wer,
.welten,
.newsletter {
  scroll-margin-top: calc(var(--kopf-hoehe) + 1rem);
}

/* .inhalt = unsichtbarer Rahmen, der Text auf angenehme Breite begrenzt
   und mittig hält (Standard: Inhaltsbreite 660–860px). */
.inhalt {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}


/* ------------------------------------------------------------------------
   2. TYPOGRAFIE
   Montserrat Light 300 = Überschriften, Eyebrows, Buttons.
   Nunito Light 300 = Fließtext.
   Überschriften nie farbig: immer Dunkel (Standard-Regel).
   ------------------------------------------------------------------------ */
h1 {
  font-family: var(--schrift-headline);
  font-weight: 300;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);   /* 36–52px laut Standard */
  line-height: 1.15;
  color: var(--dunkel);
  margin: 1.25rem 0 1rem;
}

h2 {
  font-family: var(--schrift-headline);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.2;
  color: var(--dunkel);
  margin: 1.1rem 0 1.25rem;       /* ca. 16–20px Abstand zum Eyebrow-Strich */
}

h3 {
  font-family: var(--schrift-headline);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--dunkel);
  margin: 0 0 0.75rem;
}

/* Signature-Element (Standard 4): Eyebrow + Unterstrich.
   Pflicht für jede Sektion. Der kurze Strich hängt als ::after
   direkt unter dem Eyebrow-Text. */
.eyebrow {
  font-family: var(--schrift-headline);
  font-weight: 300;
  font-size: 0.85rem;             /* 13–14px */
  text-transform: uppercase;
  letter-spacing: 0.08em;         /* 0.05–0.1em laut Standard */
  color: var(--text);
  text-align: center;             /* Standard: zentriert */
  margin: 0;
}

.eyebrow::after {
  content: "";
  display: block;
  width: 44px;                    /* 40–50px */
  height: 1px;
  background-color: var(--dunkel);
  margin: 8px auto 0;
}

/* Das gelb unterstrichene Wort in der großen Headline */
.unterstrichen {
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

/* Wichtige Begriffe im Fließtext (Standard 7) */
strong, b {
  font-weight: 500;
}


/* ------------------------------------------------------------------------
   3a. NAVIGATION (sticky)
   Weißer Balken, der beim Scrollen oben kleben bleibt.
   Logo links, Anker-Links rechts (Muster der Vorlage).
   ------------------------------------------------------------------------ */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 50;                    /* liegt über allen Sektionen */
  background-color: var(--weiss);
  border-bottom: 1px solid var(--dunkel);   /* Trennlinie: schwarz, 1px */
}

.kopfleiste-zeile {
  min-height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.logo {
  font-family: var(--schrift-headline);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--dunkel);
  text-decoration: none;
  letter-spacing: 0.02em;
}

/* Hamburger-Knopf: nur auf dem Handy sichtbar (Desktop blendet ihn aus).
   Drei Striche, die im geöffneten Zustand zu einem X werden. */
.menue-knopf {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;                    /* bequeme Tap-Größe */
  height: 44px;
  padding: 11px 9px;
  background: none;
  border: none;
  cursor: pointer;
}

.menue-strich {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--dunkel);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.kopfleiste.menue-offen .menue-strich:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopfleiste.menue-offen .menue-strich:nth-child(2) { opacity: 0; }
.kopfleiste.menue-offen .menue-strich:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menü-Links: auf dem Handy ein aufklappbares Panel direkt unter der
   Leiste, das erst mit der Klasse „menue-offen" sichtbar wird. */
.kopf-links {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background-color: var(--weiss);
  border-bottom: 1px solid var(--dunkel);
  padding: 0.5rem 1.25rem 1rem;
}

.kopfleiste.menue-offen .kopf-links {
  display: flex;
}

.kopf-links a {
  font-family: var(--schrift-headline);
  font-weight: 300;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dunkel);
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* Gelber Unterstrich beim Hover UND beim aktiven Abschnitt (Scrollspy) */
.kopf-links a:hover,
.kopf-links a.aktiv {
  border-bottom-color: var(--highlight);
}


/* ------------------------------------------------------------------------
   3b. ABSCHNITT 1: HERO
   Creme-Fläche, zweispaltig: Text links, Porträt rechts (Muster der
   Vorlage). Padding: 120px oben, 80px unten (Standard 3).
   ------------------------------------------------------------------------ */
.aufschlag {
  background-color: var(--creme);
  padding: 100px 0 80px;
}

.aufschlag-raster {
  display: grid;
  gap: 3rem;                      /* Handy: Text oben, Bild darunter */
  align-items: center;
}

/* Hero-Badge: gelbe Pill über dem H1 (Standard 5) */
.hero-badge {
  display: inline-block;
  background-color: var(--highlight);
  color: var(--dunkel);
  font-family: var(--schrift-headline);
  font-weight: 300;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;           /* Pill-Form */
  margin: 0;
}

.unterzeile {
  font-family: var(--schrift-lesen);
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--text);
  max-width: 32rem;
  margin: 0 0 2rem;
}

/* Anker-CTA im Hero: schlichter Text-Link mit gelbem Unterstrich
   (Muster der Vorlage, übersetzt in unsere Palette) */
.hero-cta {
  margin: 0;
}

.hero-cta a {
  font-family: var(--schrift-headline);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dunkel);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--highlight);
  transition: background-color 0.15s ease;
}

.hero-cta a:hover {
  background-color: var(--highlight);
}

/* Porträt: Hochformat, 8px Radius (Regel 3.1). Der feine Rahmen
   hebt das Bild vom Creme-Hintergrund ab. */
.aufschlag-bild img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--karten-rahmen);
}


/* ------------------------------------------------------------------------
   3c. ABSCHNITT 2: WER ICH BIN
   Weiße Fläche. Zweispalten-Muster der Vorlage: Überschrift links
   (bleibt beim Scrollen kurz „kleben"), Lesetext rechts.
   Eyebrow + Unterstrich hier LINKSBÜNDIG (2-Spalten-Ausnahme,
   Standard 4).
   ------------------------------------------------------------------------ */
.wer {
  background-color: var(--weiss);
  padding: 80px 0;
}

.wer-raster {
  display: grid;
  gap: 2.5rem;                    /* Handy: Kopf oben, Text darunter */
}

.wer .eyebrow {
  text-align: left;
}

.wer .eyebrow::after {
  margin-left: 0;                 /* Strich linksbündig wie der Eyebrow */
}

.wer-kopf h2 {
  margin-bottom: 0;
}

.wer-text p {
  font-family: var(--schrift-lesen);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.75;
  max-width: 38rem;
  margin: 0 0 1.5rem;
}

/* Der Einstiegsabsatz: größer und dunkler – wie ein Vorwort */
.wer-text p.einstieg {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--dunkel);
}

/* Zitat-Kasten: heller Rahmen, 8px Radius (Muster „Abschluss-Zitat-
   Kasten" aus den Design-Standards, Abschnitt 16) */
.zitat-kasten {
  border: 1px solid var(--dunkel);
  border-radius: var(--radius);
  background-color: var(--creme);
  font-family: var(--schrift-headline);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--dunkel);
  max-width: 38rem;
  margin: 2.25rem 0;
  padding: 1.5rem 1.75rem;
}

/* „Meine ganze Geschichte lesen": zusammenklappbarer Bereich.
   Der summary-Knopf ist als Outline-Button gestaltet (Sekundär-
   Button-Muster der Standards, auf hellem Grund in Dunkel). */
.mehr-geschichte summary {
  list-style: none;               /* Standard-Dreieck des Browsers weg */
  cursor: pointer;
  display: inline-block;
  border: 1px solid var(--dunkel);
  border-radius: var(--radius);
  padding: 0.85rem 1.75rem;
  font-family: var(--schrift-headline);
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dunkel);
  transition: background-color 0.15s ease;
}

.mehr-geschichte summary::-webkit-details-marker {
  display: none;                  /* dito für Safari */
}

.mehr-geschichte summary:hover {
  background-color: var(--highlight);  /* füllt sich gelb wie die CTAs */
}

/* Beschriftung wechselt je nach Zustand (zu / aufgeklappt) */
.mehr-geschichte .weniger-label { display: none; }
.mehr-geschichte[open] .mehr-label { display: none; }
.mehr-geschichte[open] .weniger-label { display: inline; }

.mehr-inhalt {
  margin-top: 2rem;
}


/* ------------------------------------------------------------------------
   ÜBERGANGSBILD
   Vollbreites Bild zwischen zwei Text-Sektionen (Standard-Muster).
   ------------------------------------------------------------------------ */
.uebergang img {
  height: min(45vh, 24rem);
  object-fit: cover;
}


/* ------------------------------------------------------------------------
   3d. ABSCHNITT 3: MEINE WELTEN
   Creme-Fläche. Listen-Muster der Vorlage: jede Welt als Zeile mit
   Bild links und Text rechts, getrennt durch schwarze 1px-Linien
   (Trennlinien-Standard). Status-Badges wie bei der Vorlage.
   ------------------------------------------------------------------------ */
.welten {
  background-color: var(--creme);
  padding: 80px 0;
}

.welten .eyebrow {
  text-align: left;
}

.welten .eyebrow::after {
  margin-left: 0;
}

.welten-intro {
  font-family: var(--schrift-lesen);
  font-weight: 300;
  font-size: 1.1rem;
  max-width: 38rem;
  margin: 0 0 3rem;
}

/* Jede Zeile beginnt mit einer feinen Trennlinie */
.projekt {
  border-top: 1px solid var(--dunkel);
  padding: 2.5rem 0;
  display: grid;
  gap: 1.5rem;                    /* Handy: Bild oben, Text darunter */
}

.projekt:last-child {
  padding-bottom: 0;
}

.projekt-bild img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  max-width: 320px;
}

/* Titelzeile: Projektname + Status-Badge nebeneinander */
.projekt-text h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.projekt-text p {
  font-family: var(--schrift-lesen);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

.projekt-text p:last-child {
  margin-bottom: 0;
}

/* Status-Badges (Chip-Muster aus den Design-Standards, Abschnitt 14):
   Aktiv = gelb gefüllt, Bald = heller Chip mit dunklem Rahmen. */
.badge {
  font-family: var(--schrift-headline);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius);
}

.badge-aktiv {
  background-color: var(--highlight);
  color: var(--dunkel);
}

.badge-bald {
  background-color: var(--weiss);
  border: 1px solid var(--dunkel);
  color: var(--dunkel);
}

/* DER Link der Seite – gestylt als Primär-CTA:
   gefüllt Gelb, dunkler Text, fett, Radius 8px (Standard 5). */
.ausgang {
  margin: 1.75rem 0 0;
}

.ausgang a {
  display: inline-block;
  background-color: var(--highlight);
  color: var(--dunkel);
  text-decoration: none;
  font-family: var(--schrift-headline);
  font-weight: 600;               /* Primär-CTA ist fett */
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover: dunkle Fläche, gelbe Schrift – bleibt in der Palette */
.ausgang a:hover {
  background-color: var(--dunkel);
  color: var(--highlight);
}

/* Gemeinsamer Ausgang am Ende der Angebote-Liste: zentriert, mit
   etwas Abstand zur letzten Zeile. */
.ausgang-zentriert {
  margin-top: 3rem;
  text-align: center;
}


/* ------------------------------------------------------------------------
   3e. ABSCHNITT 4: NEWSLETTER
   Vollflächiger gelber Block (Highlight-Farbe) als kräftiger Abschluss
   vor dem dunklen Footer – nach dem Muster des Referenzbildes.
   Dunkle Schrift auf Gelb; der Button ist dunkel (invertierter CTA)
   mit Pill-Form, damit er sich vom gelben Grund abhebt.
   ------------------------------------------------------------------------ */
.newsletter {
  background-color: var(--highlight);
  padding: 100px 0;
  text-align: center;
}

/* Eyebrow + Unterstrich auf Gelb: beides dunkel für genug Kontrast */
.newsletter .eyebrow {
  color: var(--dunkel);
}

.newsletter .eyebrow::after {
  background-color: var(--dunkel);
}

.newsletter h2 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  max-width: 16em;
  margin-left: auto;
  margin-right: auto;
}

.newsletter-text {
  font-family: var(--schrift-lesen);
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--dunkel);
  max-width: 34rem;
  margin: 0 auto 2.75rem;
}

/* Button: dunkle Pill (999px) mit heller Schrift, wie im Referenzbild */
.newsletter-cta {
  margin: 0;
}

.newsletter-cta a {
  display: inline-block;
  background-color: var(--dunkel);
  color: var(--weiss);
  text-decoration: none;
  font-family: var(--schrift-headline);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 1.15rem 2.75rem;
  border-radius: 999px;           /* Pill-Form (Ausnahme, wie das Referenzbild) */
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover: heller Grund, dunkle Schrift – bleibt in der Palette */
.newsletter-cta a:hover {
  background-color: var(--weiss);
  color: var(--dunkel);
}


/* ------------------------------------------------------------------------
   3f. FUSSZEILE
   System der Vorlage (Name / Links / Copyright), Farben nach
   Footer-Standard (Abschnitt 18): dunkler Hintergrund, heller Text.
   ------------------------------------------------------------------------ */
.fusszeile {
  background-color: var(--dunkel);
  color: var(--footer-text);
  border-top: 1px solid var(--dunkel);
  padding: 2.5rem 0;
  font-size: 0.85rem;
}

.fusszeile-zeile {
  display: flex;
  flex-direction: column;         /* Handy: untereinander, zentriert */
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.fusszeile-zeile p {
  margin: 0;
}

.fusszeile-name {
  font-family: var(--schrift-headline);
  font-weight: 500;
  font-size: 1rem;
  color: var(--footer-text);
}

.fusszeile-links {
  display: flex;
  gap: 1.5rem;
}

.fusszeile-links a {
  color: var(--footer-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.fusszeile-links a:hover {
  color: var(--highlight);
  border-bottom-color: var(--highlight);
}

.fussnote {
  margin: 1.5rem 0 0;
  text-align: center;
  opacity: 0.7;
}


/* ------------------------------------------------------------------------
   4. DESKTOP-ANPASSUNGEN
   Alles hier drin gilt erst ab 760px Bildschirmbreite.
   ------------------------------------------------------------------------ */
@media (min-width: 760px) {

  /* Hero: Text links, Porträt rechts */
  .aufschlag-raster {
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
  }

  /* Wer ich bin: Überschrift links (klebt beim Scrollen), Text rechts */
  .wer-raster {
    grid-template-columns: 1fr 1.7fr;
    gap: 4rem;
    align-items: start;
  }

  .wer-kopf {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2rem);
  }

  /* Meine Welten: pro Zeile Bild links, Text rechts */
  .projekt {
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    align-items: start;
  }

  /* Navigation: Hamburger weg, Links wieder waagerecht in der Leiste */
  .menue-knopf {
    display: none;
  }

  .kopf-links {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 0.25rem 1.5rem;
    background: none;
    border-bottom: none;
    padding: 0;
  }

  .kopf-links a {
    font-size: 0.8rem;
    padding: 0 0 2px;
  }

  /* Fußzeile: Name links, Links mittig, Copyright rechts */
  .fusszeile-zeile {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}


/* ------------------------------------------------------------------------
   5. ANIMATIONEN
   Alles hier läuft nur, wenn die Person KEINE reduzierten Animationen
   eingestellt hat („prefers-reduced-motion: no-preference").
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {

  /* Anker-Links scrollen sanft statt zu springen */
  html {
    scroll-behavior: smooth;
  }

  /* Hero-Elemente gleiten beim Laden nacheinander von unten ein */
  @keyframes einschweben {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero-badge,
  .aufschlag h1,
  .unterzeile,
  .hero-cta,
  .aufschlag-bild {
    animation: einschweben 0.7s ease-out backwards;
  }

  .aufschlag h1    { animation-delay: 0.1s; }
  .unterzeile      { animation-delay: 0.2s; }
  .hero-cta        { animation-delay: 0.3s; }
  .aufschlag-bild  { animation-delay: 0.2s; }

  /* Scroll-Einblendungen: erst wenn JavaScript die Klasse „anim-bereit"
     setzt, werden .anim-Elemente versteckt – und gleiten dann einzeln
     ein, sobald sie ins Bild scrollen (Klasse „sichtbar" via Skript).
     Ohne JavaScript bleibt einfach alles sichtbar. */
  html.anim-bereit .anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  html.anim-bereit .anim.sichtbar {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ------------------------------------------------------------------------
   Wer in den System-Einstellungen „Animationen reduzieren" gewählt hat,
   bekommt keine Übergangs-Effekte. Kleine Rücksicht, große Wirkung.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}