/*
 * YOURLEAF – Corporate Design „Petrol & Mint“ (docs/CD.md, 11.11.2026)
 *
 * Alle Farben, Schriften und Formen der Website kommen aus den Variablen
 * in :root. Schriften selbst ausgeliefert: public/assets/marke/schriften.css.
 *
 * Geladen nach main.css und responsive.css (siehe layouts/app.blade.php).
 * Ältere Seiten mit eigenen <style>-Blöcken werden über die Abschnitte
 * „Gemeinsame Klassen älterer Seiten“ unten angeglichen.
 */

:root {
  /* CD-Farben */
  --yl-petrol: #033246;
  --yl-mint:   #ABDAC6;
  --yl-nebel:  #F4F8F7;
  --yl-tanne:  #2D7B62;
  --yl-tinte:  #10232B;
  --yl-grau:   #50646B;
  --yl-linie:  #D5DFDC;
  --yl-weiss:  #FFFFFF;

  /* Produktfarben – nur als Kante, Punkt oder Unterstreichung */
  --yl-cardit: #2E8BFF;
  --yl-you:    #ABDAC6;
  --yl-8boy:   #F2C14E;

  /* Rollen – hierauf beziehen sich die Bausteine unten */
  --yl-grund:          var(--yl-weiss);
  --yl-flaeche:        var(--yl-nebel);
  --yl-dunkel:         var(--yl-petrol);
  --yl-dunkel-tief:    var(--yl-petrol);
  --yl-akzent:         var(--yl-tanne);
  --yl-akzent-hell:    var(--yl-mint);
  --yl-text:           var(--yl-tinte);
  --yl-text-leise:     var(--yl-grau);
  --yl-text-auf-dunkel: var(--yl-weiss);
  --yl-text-auf-dunkel-leise: rgba(255, 255, 255, 0.82);
  --yl-linie-auf-dunkel: rgba(171, 218, 198, 0.28);

  /* Schrift */
  --yl-schrift:        'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --yl-schrift-titel:  'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --yl-gewicht-titel:  600;

  /* Form: fast eckig, keine weichen Schatten */
  --yl-radius:         2px;
  --yl-radius-klein:   2px;
  --yl-schatten:       none;
}

/* ------------------------------------------------------------------
   Grundschrift
   ------------------------------------------------------------------ */
body {
  font-family: var(--yl-schrift);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--yl-tinte);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--yl-schrift-titel);
  letter-spacing: 0.01em;
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--yl-tanne); }
.yl-steckbrief dd, .yl-preis { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
   Kopf: Petrol, Wortmarke ohne Rahmen, Hauptnavigation
   ------------------------------------------------------------------ */
.header {
  background: var(--yl-petrol);
  box-shadow: none;
  border-bottom: 1px solid var(--yl-linie-auf-dunkel);
}
.header .logo img.yl-wortmarke {
  display: block;
  height: 1.375rem;
  width: auto;
  max-width: none;
}
.nav-links { gap: 1.6rem; align-items: center; }
.nav-link {
  font-family: var(--yl-schrift-titel);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--yl-weiss);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--yl-mint); }
.nav-link.active {
  color: var(--yl-mint);
  font-weight: 600;
  border-bottom-color: var(--yl-mint);
}
.nav-link:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-menu-btn:focus-visible,
.logo:focus-visible { outline: 2px solid var(--yl-mint); outline-offset: 3px; }
.mobile-menu-btn { color: var(--yl-weiss); min-width: 44px; min-height: 44px; }
.mobile-nav {
  background: var(--yl-petrol);
  border-top: 1px solid var(--yl-linie-auf-dunkel);
}
.mobile-nav-link {
  font-family: var(--yl-schrift-titel);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--yl-weiss);
}
.mobile-nav-link:hover { background: rgba(171, 218, 198, 0.1); color: var(--yl-mint); }
.mobile-nav-link.active { color: var(--yl-mint); }

/* ------------------------------------------------------------------
   Abschnitte
   ------------------------------------------------------------------ */
.yl-abschnitt {
  padding: 5rem 0;
  background: var(--yl-grund);
  color: var(--yl-text);
  font-family: var(--yl-schrift);
}
.yl-abschnitt--flaeche { background: var(--yl-flaeche); }
.yl-abschnitt--dunkel {
  background: var(--yl-dunkel);
  color: var(--yl-text-auf-dunkel);
}
.yl-abschnitt--tief {
  background: var(--yl-dunkel-tief);
  color: var(--yl-text-auf-dunkel);
}
.yl-abschnitt--eng { padding: 3.5rem 0; }

.yl-breite { max-width: 1120px; }
.yl-breite-schmal { max-width: 820px; }

.yl-kopf { max-width: 760px; margin: 0 0 2.75rem; }
.yl-kopf--mitte { margin-left: auto; margin-right: auto; text-align: center; }

.yl-dachzeile {
  display: inline-block;
  font-family: var(--yl-schrift-titel);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yl-akzent);
  margin-bottom: 0.75rem;
}
.yl-abschnitt--dunkel .yl-dachzeile,
.yl-abschnitt--tief .yl-dachzeile,
.yl-held .yl-dachzeile { color: var(--yl-akzent-hell); }

.yl-titel {
  font-family: var(--yl-schrift-titel);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.yl-einleitung {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--yl-text-leise);
}
.yl-abschnitt--dunkel .yl-einleitung,
.yl-abschnitt--tief .yl-einleitung { color: var(--yl-text-auf-dunkel-leise); }

.yl-zwischentitel {
  font-family: var(--yl-schrift-titel);
  font-size: 1.35rem;
  font-weight: var(--yl-gewicht-titel);
  line-height: 1.3;
  margin: 3rem 0 1rem;
}

.yl-text p { line-height: 1.75; margin-bottom: 1rem; color: var(--yl-text-leise); }
.yl-text p:last-child { margin-bottom: 0; }
.yl-text strong { color: var(--yl-text); }

/* ------------------------------------------------------------------
   Held (Seitenkopf)
   ------------------------------------------------------------------ */
.yl-held {
  background: var(--yl-dunkel);
  color: var(--yl-text-auf-dunkel);
  padding: 6rem 0 5.5rem;
  font-family: var(--yl-schrift);
}
.yl-held--klein { padding: 4.5rem 0 4rem; }
.yl-held h1 {
  font-family: var(--yl-schrift-titel);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
  max-width: 820px;
}
.yl-held p {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--yl-text-auf-dunkel-leise);
  max-width: 680px;
  margin-bottom: 0;
}
.yl-held .yl-knoepfe { margin-top: 2.25rem; }

/* ------------------------------------------------------------------
   Knöpfe und Links
   ------------------------------------------------------------------ */
.yl-knoepfe { display: flex; flex-wrap: wrap; gap: 0.875rem; }

.yl-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.6rem;
  border-radius: var(--yl-radius-klein);
  font-family: var(--yl-schrift-titel);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.yl-knopf:focus-visible,
.yl-link:focus-visible { outline: 3px solid var(--yl-akzent-hell); outline-offset: 2px; }

/* auf Petrol: Mint-Fläche mit Petrol-Text (primär), Mint-Kontur mit weißem Text */
.yl-knopf--hell { background: var(--yl-mint); border-color: var(--yl-mint); color: var(--yl-petrol); }
.yl-knopf--hell:hover { background: var(--yl-weiss); border-color: var(--yl-weiss); color: var(--yl-petrol); }
.yl-knopf--rand-hell { border-color: var(--yl-mint); color: var(--yl-weiss); }
.yl-knopf--rand-hell:hover { background: var(--yl-mint); color: var(--yl-petrol); }

/* auf hell: Petrol-Fläche mit weißem Text (primär), Petrol-Kontur */
.yl-knopf--akzent { background: var(--yl-petrol); border-color: var(--yl-petrol); color: var(--yl-weiss); }
.yl-knopf--akzent:hover { background: var(--yl-tanne); border-color: var(--yl-tanne); color: var(--yl-weiss); }
.yl-knopf--rand { border-color: var(--yl-petrol); color: var(--yl-petrol); }
.yl-knopf--rand:hover { background: var(--yl-petrol); color: var(--yl-weiss); }

.yl-link {
  color: var(--yl-akzent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.yl-link:hover { color: var(--yl-petrol); }
.yl-abschnitt--dunkel .yl-link,
.yl-abschnitt--tief .yl-link { color: var(--yl-akzent-hell); }
.yl-abschnitt--dunkel .yl-link:hover,
.yl-abschnitt--tief .yl-link:hover { color: var(--yl-weiss); }

.yl-linkzeile { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 2rem; }

/* ------------------------------------------------------------------
   Raster und Karten
   ------------------------------------------------------------------ */
.yl-raster {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.yl-raster--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.yl-zweispaltig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.yl-zweispaltig--mitte { align-items: center; }

.yl-karte {
  background: var(--yl-grund);
  border: 1px solid var(--yl-linie);
  border-radius: var(--yl-radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  color: var(--yl-text);
}
.yl-abschnitt--grund .yl-karte,
.yl-karte--flaeche { background: var(--yl-flaeche); }
.yl-karte h3 {
  font-family: var(--yl-schrift-titel);
  font-size: 1.55rem;
  font-weight: var(--yl-gewicht-titel);
  line-height: 1.25;
  margin-bottom: 0.25rem;
}
.yl-karte__art {
  font-family: var(--yl-schrift-titel);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yl-akzent);
  margin-bottom: 0.5rem;
}
.yl-karte__wer {
  font-size: 0.9rem;
  color: var(--yl-text-leise);
  margin-bottom: 1rem;
}
.yl-karte__text { color: var(--yl-text-leise); line-height: 1.7; margin-bottom: 1.25rem; }
.yl-karte h3 + .yl-karte__text { margin-top: 0.6rem; }
.yl-karte__fuss { margin-top: auto; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* Produktkarten: helle Karte, schmale Oberkante in Produktfarbe,
   Produktname als Etikett in Barlow */
.yl-produktkarte { border-top: 4px solid var(--produktfarbe, var(--yl-petrol)); }
.yl-produktkarte--cardit { --produktfarbe: var(--yl-cardit); }
.yl-produktkarte--you    { --produktfarbe: var(--yl-you); }
.yl-produktkarte--8boy   { --produktfarbe: var(--yl-8boy); }
.yl-etikett {
  font-family: var(--yl-schrift-titel);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yl-petrol);
  margin-bottom: 0.6rem;
}
.yl-produktkarte__was {
  font-family: var(--yl-schrift-titel);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--yl-tinte);
  margin-bottom: 0.2rem;
}

/* Faktenliste: kurze Zeilen mit Strich statt Symbol */
.yl-fakten { list-style: none; padding: 0; margin: 0; }
.yl-fakten li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.1rem;
  border-top: 1px solid var(--yl-linie);
  line-height: 1.5;
  color: var(--yl-text);
}
.yl-fakten li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 0.45rem;
  height: 2px;
  background: var(--yl-akzent);
}
.yl-abschnitt--dunkel .yl-fakten li,
.yl-abschnitt--tief .yl-fakten li { border-color: var(--yl-linie-auf-dunkel); color: var(--yl-text-auf-dunkel); }
.yl-abschnitt--dunkel .yl-fakten li::before,
.yl-abschnitt--tief .yl-fakten li::before { background: var(--yl-akzent-hell); }

/* Nummerierte Schritte */
.yl-schritte { list-style: none; padding: 0; margin: 0; counter-reset: schritt; }
.yl-schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 1rem 2.6rem;
  line-height: 1.6;
}
.yl-schritte li::before {
  content: counter(schritt);
  font-family: var(--yl-schrift-titel);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--yl-radius);
  background: var(--yl-petrol);
  color: var(--yl-mint);
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Preis- und Steckbrief-Tabelle */
.yl-steckbrief { margin: 0; }
.yl-steckbrief div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--yl-linie);
}
.yl-steckbrief dt { color: var(--yl-text-leise); }
.yl-steckbrief dd { margin: 0; font-weight: 600; text-align: right; }
.yl-hinweis { font-size: 0.9rem; color: var(--yl-text-leise); margin-top: 0.75rem; }

/* ------------------------------------------------------------------
   Produktseite
   ------------------------------------------------------------------ */
.yl-sprungmarken { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.yl-produkt { scroll-margin-top: 5rem; }
.yl-produkt .yl-kasten { border-top: 4px solid var(--produktfarbe, var(--yl-petrol)); }
#cardit { --produktfarbe: var(--yl-cardit); }
#you    { --produktfarbe: var(--yl-you); }
[id="8boy"] { --produktfarbe: var(--yl-8boy); }
.yl-produkt + .yl-produkt { border-top: 1px solid var(--yl-linie); }
.yl-produkt h2 { font-size: 2.5rem; }
.yl-produkt h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.75rem 0 0.75rem;
  color: var(--yl-text);
}
.yl-produkt h3:first-child { margin-top: 0; }
.yl-kasten {
  background: var(--yl-flaeche);
  border-radius: var(--yl-radius);
  padding: 1.75rem;
}
.yl-kasten--grund { background: var(--yl-grund); }
.yl-labor {
  margin-top: 2.5rem;
  padding: 1.75rem;
  border-radius: var(--yl-radius);
  border: 1px solid var(--yl-linie);
  border-left: 4px solid var(--yl-8boy);
}
.yl-labor h3 { margin-top: 0; }

/* ------------------------------------------------------------------
   Referenzen
   ------------------------------------------------------------------ */
.yl-referenz {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 0;
}
.yl-referenz + .yl-referenz { border-top: 1px solid var(--yl-linie); }
.yl-referenz--gedreht .yl-referenz__bild { order: 2; }
.yl-referenz__bild {
  border-radius: var(--yl-radius);
  overflow: hidden;
  border: 1px solid var(--yl-linie);
  background: var(--yl-flaeche);
  box-shadow: var(--yl-schatten);
}
.yl-referenz__bild img { display: block; width: 100%; height: auto; }
.yl-referenz h2, .yl-referenz h3 { font-size: 2rem; font-weight: var(--yl-gewicht-titel); line-height: 1.2; margin-bottom: 0.4rem; }

.yl-referenz-kurz h3 { font-size: 1.5rem; font-weight: var(--yl-gewicht-titel); line-height: 1.25; margin-bottom: 0.25rem; }
.yl-referenz-kurz .yl-referenz__bild { margin-bottom: 1.25rem; box-shadow: none; }
.yl-referenz-kurz .yl-referenz__bild img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }

/* ------------------------------------------------------------------
   Partner
   ------------------------------------------------------------------ */
.yl-partnerlogo { display: block; }
.yl-partnerlogo img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; border-radius: var(--yl-radius); }
.yl-logo-platz {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  border: 1px dashed var(--yl-linie);
  border-radius: var(--yl-radius);
  background: var(--yl-grund);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--yl-text);
  text-align: center;
  padding: 1.5rem;
}
.yl-zitat {
  border-left: 3px solid var(--yl-akzent);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--yl-text);
}

/* ------------------------------------------------------------------
   Kontakt-Aufruf
   ------------------------------------------------------------------ */
.yl-aufruf { text-align: center; }
.yl-aufruf .yl-einleitung { margin: 0 auto 2rem; max-width: 620px; }
.yl-aufruf .yl-knoepfe { justify-content: center; }

/* ------------------------------------------------------------------
   Fuß
   ------------------------------------------------------------------ */
.footer {
  background: var(--yl-petrol);
  border-top: 1px solid var(--yl-linie-auf-dunkel);
}
.footer .footer-wortmarke { display: block; height: 1.1rem; width: auto; margin-bottom: 1rem; }
.footer .footer-content {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2rem 2.5rem;
}
.footer .footer-section h3 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yl-mint);
}
.footer .footer-links a { font-size: 1rem; color: var(--yl-text-auf-dunkel-leise); }
.footer .footer-links a:hover { color: var(--yl-mint); }
.footer .footer-bottom { border-top-color: var(--yl-linie-auf-dunkel); color: var(--yl-text-auf-dunkel-leise); }
.footer .footer-bottom a { color: var(--yl-mint); }
.footer .footer-adresse { color: var(--yl-text-auf-dunkel-leise); line-height: 1.6; font-size: 1rem; }

/* ------------------------------------------------------------------
   Gemeinsame Klassen älterer Seiten (Über uns, Vorgehen, KfW, Kontakt,
   Software nach Maß …): deren <style>-Blöcke stehen im Seiteninhalt und
   damit hinter dieser Datei – daher hier gezielt mit !important.
   ------------------------------------------------------------------ */
.premium-hero { background: var(--yl-petrol) !important; }
.premium-hero::before { display: none !important; }
.premium-hero h1,
.section-title,
.card-title { font-family: var(--yl-schrift-titel); letter-spacing: 0.01em; }
.section-dark { background: var(--yl-petrol); }
.service-item::after,
.value-box::after { background: var(--yl-mint) !important; }

/* ------------------------------------------------------------------
   Schmale Bildschirme
   main.css/responsive.css setzen dort Überschriften und Absätze mit
   !important; die Regeln hier sind gezielt spezifischer.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .yl-zweispaltig,
  .yl-referenz { grid-template-columns: 1fr; gap: 2rem; }
  .yl-referenz--gedreht .yl-referenz__bild { order: 0; }
}

@media (max-width: 768px) {
  .yl-abschnitt { padding: 3.25rem 0; }
  .yl-abschnitt--eng { padding: 2.5rem 0; }
  .yl-held { padding: 3.5rem 0 3.25rem; }
  .yl-held--klein { padding: 3rem 0 2.75rem; }
  .yl-held h1 { font-size: 2.4rem !important; line-height: 1.08 !important; }
  .yl-produktkarte h3.yl-etikett { font-size: 1.45rem !important; line-height: 1 !important; }
  .header .logo img.yl-wortmarke { height: 1.2rem !important; max-width: none !important; width: auto !important; }
  .yl-held p { font-size: 1.05rem !important; }
  .yl-abschnitt .yl-titel,
  .yl-produkt h2 { font-size: 1.75rem !important; }
  .yl-karte { padding: 1.5rem; }
  .yl-karte h3,
  .yl-referenz-kurz h3,
  .yl-referenz h2,
  .yl-referenz h3 { font-size: 1.35rem !important; }
  .yl-produkt h3 { font-size: 1.05rem !important; }
  .yl-abschnitt .yl-zwischentitel { font-size: 1.25rem !important; margin-top: 2.25rem; }
  .yl-raster,
  .yl-raster--2 { grid-template-columns: 1fr; }
  .yl-knoepfe .yl-knopf { width: 100%; }
  ul.yl-fakten,
  ol.yl-schritte { padding-left: 0 !important; }
  .yl-fakten li,
  .yl-schritte li { margin-bottom: 0 !important; }
  .yl-schritte li { padding-bottom: 0.9rem; }
  .yl-steckbrief div { grid-template-columns: 1fr; gap: 0.15rem; }
  .yl-steckbrief dd { text-align: left; }
  .yl-logo-platz { font-size: 1.5rem; min-height: 6rem; }
  .footer .footer-section h3 { font-size: 0.9rem !important; }
  .footer img.footer-wortmarke { height: 1.1rem !important; width: auto !important; }
  .yl-kasten, .yl-labor { padding: 1.25rem; }
  .footer .footer-content { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .footer .footer-section h3 { font-size: 1rem !important; margin-bottom: 0.6rem; }
  .footer ul.footer-links { padding-left: 0 !important; }
  .footer .footer-links li { margin-bottom: 0.35rem !important; }
  .footer .footer-adresse { font-size: 0.9rem !important; }
  .footer .footer-bottom p { font-size: 0.85rem !important; }
}