/* ============================================================
   SilverSHIFT Landingpage – Design-System
   Prinzip: Weißraum, große Typografie, Anthrazit + Grün-Akzent
   Keine externen Ressourcen (DSGVO: kein CDN, keine Webfonts)
   ============================================================ */
:root{
  --anthrazit:      #23282d;   /* Haupttext, dunkle Flächen */
  --anthrazit-soft: #3b424a;   /* Sekundärtext */
  --grau:           #6b737c;   /* gedämpfter Text */
  --linie:          #e4e7ea;   /* feine Trennlinien */
  --flaeche:        #f6f7f8;   /* helle Kartenflächen */
  --weiss:          #ffffff;
  --gruen:          #1e7a55;   /* Akzent: Zukunft, Handlung */
  --gruen-dunkel:   #16613f;   /* Hover */
  --gruen-hell:     #e8f3ee;   /* Hintergrund-Akzent */
  --radius: 14px;
  --schrift: "Trebuchet MS", "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
/* 18px-Basis statt Browser-Standard 16px: alle rem-Größen skalieren mit
   (Lesbarkeit für Zielgruppe 60+) */
html{ font-size:112.5%; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--schrift);
  color:var(--anthrazit);
  background:var(--weiss);
  line-height:1.65;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
section{ padding:96px 0; }
h1,h2,h3{ line-height:1.15; letter-spacing:-0.015em; font-weight:700; }
h1{ font-size:clamp(2.1rem,5vw,3.6rem); }
h2{ font-size:clamp(1.6rem,3.4vw,2.4rem); margin-bottom:20px; }
h3{ font-size:1.1rem; margin-bottom:8px; }
p{ max-width:72ch; }
.lead{ font-size:clamp(1.05rem,2vw,1.3rem); color:var(--anthrazit-soft); }
.muted{ color:var(--grau); }
.label{
  display:inline-block; font-size:0.85rem; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--gruen);
  margin-bottom:14px;
}
/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; color:var(--anthrazit); text-decoration:none; }
.logo img{ height:34px; width:34px; }
.nav-links{ display:flex; gap:26px; align-items:center; }
.nav-links a{ color:var(--anthrazit-soft); text-decoration:none; font-size:0.92rem; }
.nav-links a:hover{ color:var(--anthrazit); }
/* ---------- Buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  border-radius:10px; padding:14px 26px; font-size:1rem;
  transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  text-align:center;
}
.btn-gruen{ background:var(--gruen); color:#fff; }
.btn-gruen:hover{ background:var(--gruen-dunkel); }
.btn-outline{ border:1.5px solid var(--anthrazit); color:var(--anthrazit); background:transparent; }
.btn-outline:hover{ background:var(--flaeche); }
.btn-klein{ padding:9px 18px; font-size:0.9rem; }
.cta-hinweis{ font-size:0.9rem; color:var(--grau); margin-top:12px; }
.textlink{ color:var(--gruen); font-weight:700; text-decoration:none; }
.textlink:hover{ color:var(--gruen-dunkel); }
/* ---------- Hero: reine Typografie, kein Bild ---------- */
.hero{ padding:130px 0 110px; }
.hero-inhalt{ max-width:780px; }
.hero .lead{ margin:26px 0 10px; }
.hero .sub{ font-size:0.98rem; color:var(--grau); margin-bottom:34px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
/* ---------- Karten ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px; }
.karte{
  background:var(--weiss); border:1px solid var(--linie);
  border-radius:var(--radius); padding:28px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.karte:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(35,40,45,0.07); }
.karte svg{ margin-bottom:14px; }
.karte p{ font-size:1rem; color:var(--anthrazit-soft); }
.sektion-grau{ background:var(--flaeche); }
/* ---------- Kernsatz ---------- */
.kernsatz{
  background:var(--anthrazit); color:#fff; border-radius:var(--radius);
  padding:52px 48px; margin-top:56px;
}
.kernsatz p{ font-size:clamp(1.2rem,2.6vw,1.7rem); line-height:1.4; font-weight:700; max-width:none; }
.kernsatz .gruen{ color:#6fcf9f; }
/* ---------- Klarstellung ---------- */
.kasten{
  background:var(--gruen-hell); border-left:4px solid var(--gruen);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:24px 28px; margin-top:40px;
}
.kasten p{ font-size:0.98rem; max-width:none; }
/* ---------- Hebel ---------- */
.hebel .karte{ border-top:3px solid var(--gruen); }
.hebel h3{ font-size:1.25rem; }
/* ---------- Vorgehen ---------- */
.schritte{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px; }
.schritt{ position:relative; padding-top:8px; }
.schritt .nr{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--anthrazit); color:#fff; font-weight:700; margin-bottom:16px;
}
.schritt p{ font-size:1rem; color:var(--anthrazit-soft); }
/* ---------- Vertrauen (mit Porträtfoto) ---------- */
.vertrauen-grid{ display:grid; grid-template-columns:260px 1fr; gap:52px; align-items:start; margin-top:36px; }
.person-bild{
  width:100%; height:auto; border-radius:var(--radius);
  border:1px solid var(--linie); display:block;
}
.stationen{ list-style:none; margin-top:26px; }
.stationen li{
  padding:7px 0 7px 26px; position:relative;
  font-size:0.95rem; color:var(--anthrazit-soft);
}
.stationen li::before{
  content:""; position:absolute; left:2px; top:16px;
  width:8px; height:8px; border-radius:50%; background:var(--gruen);
}
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.chip{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:999px; padding:8px 18px; font-size:0.9rem; font-weight:700;
}
/* ---------- Termine ---------- */
.event-liste{ margin-top:44px; display:grid; gap:0; }
.event{
  display:grid; grid-template-columns:220px 1fr auto; gap:24px;
  align-items:baseline; padding:26px 0;
  border-bottom:1px solid var(--linie);
}
.event:first-child{ border-top:1px solid var(--linie); }
.event .datum{ font-weight:700; font-size:0.95rem; color:var(--gruen); }
.event h3{ margin-bottom:6px; }
.event p{ font-size:1rem; color:var(--anthrazit-soft); }
.event .ort{ font-size:0.85rem; color:var(--grau); margin-top:6px; }
/* ---------- FAQ ---------- */
.faq details{
  border-bottom:1px solid var(--linie); padding:6px 0;
}
.faq summary{
  cursor:pointer; font-weight:700; font-size:1.05rem;
  padding:18px 36px 18px 0; list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:14px;
  font-size:1.5rem; font-weight:400; color:var(--gruen); transition:transform 0.2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 0 20px; color:var(--anthrazit-soft); }
/* ---------- Erstgespräch ---------- */
.erstgespraech{ text-align:left; }
.erstgespraech ul{ list-style:none; margin:28px 0 36px; }
.erstgespraech li{
  padding:8px 0 8px 32px; position:relative; color:var(--anthrazit-soft);
}
.erstgespraech li::before{
  content:""; position:absolute; left:0; top:15px;
  width:16px; height:9px; border-left:2.5px solid var(--gruen);
  border-bottom:2.5px solid var(--gruen); transform:rotate(-45deg);
}
.kontaktzeile{ margin-top:22px; color:var(--grau); font-size:0.95rem; }
.kontaktzeile a{ color:var(--anthrazit); font-weight:700; text-decoration:none; }
/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--linie); padding:40px 0; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; align-items:center; }
footer p, footer a{ font-size:0.88rem; color:var(--grau); text-decoration:none; }
footer a:hover{ color:var(--anthrazit); }
.footer-links{ display:flex; gap:22px; }
/* ---------- Sticky Mobile CTA ---------- */
.sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:var(--weiss); border-top:1px solid var(--linie);
  padding:10px 16px; display:none; align-items:center; gap:10px;
  box-shadow:0 -6px 20px rgba(35,40,45,0.08);
}
.sticky-cta.sichtbar{ display:flex; }
.sticky-cta .btn{ flex:1; }
.sticky-cta button{
  background:none; border:none; font-size:1.3rem; color:var(--grau); cursor:pointer; padding:6px;
}
/* ---------- Scroll-Reveal ---------- */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity 0.5s ease, transform 0.5s ease; }
.reveal.sichtbar{ opacity:1; transform:none; }
/* Barrierefreiheit: reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .karte, .btn{ transition:none; }
}
/* ---------- Mobil ---------- */
@media (max-width: 860px){
  section{ padding:64px 0; }
  .hero{ padding:72px 0 56px; }
  .grid-3, .grid-2, .schritte{ grid-template-columns:1fr; }
  .vertrauen-grid{ grid-template-columns:1fr; gap:30px; }
  .person-bild{ max-width:240px; }
  .event{ grid-template-columns:1fr; gap:6px; }
  .nav-links a:not(.btn){ display:none; }
  .hero-ctas{ flex-direction:column; }
  .hero-ctas .btn{ width:100%; padding:15px; }
  .kernsatz{ padding:36px 26px; }
  .schritte{ border-left:2px solid var(--linie); padding-left:22px; }
}

/* ============================================================
   Erweiterungen für Unterseiten
   ============================================================ */
/* ---------- Unterseiten-Hero (kompakter als Startseite) ---------- */
.seiten-hero{ padding:90px 0 64px; border-bottom:1px solid var(--linie); }
.seiten-hero h1{ font-size:clamp(1.9rem,4.4vw,3rem); max-width:20ch; }
.seiten-hero .lead{ margin-top:22px; }
.fakten-zeile{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ---------- Formulare ---------- */
.formular{ background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius); padding:36px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.feld-voll{ grid-column:1 / -1; }
.form-gruppe label{ display:block; font-weight:700; font-size:0.92rem; margin-bottom:6px; }
.form-gruppe input[type="text"],
.form-gruppe input[type="email"],
.form-gruppe input[type="tel"],
.form-gruppe textarea{
  width:100%; padding:12px 14px; font-family:var(--schrift); font-size:1rem;
  border:1px solid var(--linie); border-radius:8px; background:var(--weiss);
  color:var(--anthrazit);
}
.form-gruppe input:focus, .form-gruppe textarea:focus{
  outline:2px solid var(--gruen); outline-offset:1px; border-color:var(--gruen);
}
.check-gruppe{ display:flex; gap:12px; align-items:flex-start; }
.check-gruppe input[type="checkbox"]{ width:20px; height:20px; margin-top:2px; accent-color:var(--gruen); flex-shrink:0; }
.check-gruppe label{ font-weight:400; font-size:0.92rem; color:var(--anthrazit-soft); }
.fehler-meldung{ display:none; color:#b23a3a; font-size:0.85rem; margin-top:5px; }
.form-gruppe.ungueltig .fehler-meldung{ display:block; }
.form-gruppe.ungueltig input{ border-color:#b23a3a; }
.form-status{ display:none; margin-top:20px; padding:16px 20px; border-radius:8px; font-weight:700; }
.form-status.erfolg{ display:block; background:var(--gruen-hell); color:var(--gruen-dunkel); }
.form-status.fehler{ display:block; background:#f9ecec; color:#b23a3a; }
.honigtopf{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* ---------- KI-Reifegrad ---------- */
.dimension{ border:1px solid var(--linie); border-radius:var(--radius); padding:28px; margin-top:22px; background:var(--weiss); }
.dimension h3{ font-size:1.15rem; }
.dimension > p{ color:var(--anthrazit-soft); font-size:0.95rem; margin-top:4px; }
.skala{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:18px; }
.skala label{
  display:block; border:1px solid var(--linie); border-radius:8px;
  padding:12px 10px; font-size:0.88rem; text-align:center; cursor:pointer;
  color:var(--anthrazit-soft); transition:border-color 0.15s ease, background 0.15s ease;
}
.skala label:hover{ border-color:var(--gruen); }
.skala input{ position:absolute; opacity:0; }
.skala input:checked + span{ font-weight:700; color:var(--gruen-dunkel); }
.skala label:has(input:checked){ background:var(--gruen-hell); border-color:var(--gruen); }
.skala input:focus-visible + span{ outline:2px solid var(--gruen); outline-offset:4px; }
.skala .stufe-nr{ display:block; font-weight:700; font-size:1.05rem; color:var(--anthrazit); margin-bottom:4px; }
.fortschritt{ position:sticky; top:64px; z-index:40; background:var(--weiss); padding:12px 0; border-bottom:1px solid var(--linie); }
.fortschritt-balken{ height:6px; background:var(--flaeche); border-radius:3px; overflow:hidden; }
.fortschritt-balken div{ height:100%; width:0; background:var(--gruen); border-radius:3px; transition:width 0.3s ease; }
.fortschritt p{ font-size:0.85rem; color:var(--grau); margin-top:6px; }
.score-box{ background:var(--anthrazit); color:#fff; border-radius:var(--radius); padding:48px 40px; text-align:center; margin-top:40px; }
.score-box .wert{ font-size:3.4rem; font-weight:700; line-height:1; }
.score-box .von{ font-size:1.1rem; color:#a8b0b8; }
.score-box .kategorie{ font-size:1.4rem; font-weight:700; margin-top:14px; color:#6fcf9f; }
.score-box .interpretation{ max-width:56ch; margin:14px auto 0; color:#c9ced3; font-size:0.98rem; }
.dim-ergebnis{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--linie); }
.dim-ergebnis .balken-wrap{ grid-column:1 / -1; height:8px; background:var(--flaeche); border-radius:4px; overflow:hidden; }
.dim-ergebnis .balken{ height:100%; background:var(--gruen); border-radius:4px; }
.empfehlung{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--linie); }
.badge{ flex-shrink:0; font-size:0.8rem; font-weight:700; letter-spacing:0.06em; padding:4px 10px; border-radius:999px; }
.badge-hoch{ background:#f6e8dd; color:#9a5b22; }
.badge-mittel{ background:var(--gruen-hell); color:var(--gruen-dunkel); }
.badge-niedrig{ background:var(--flaeche); color:var(--grau); }

/* ---------- Rechtstexte (Impressum/Datenschutz) ---------- */
.rechtstext{ max-width:760px; }
.rechtstext h2{ margin-top:44px; font-size:1.35rem; }
.rechtstext h3{ margin-top:28px; }
.rechtstext p, .rechtstext li{ color:var(--anthrazit-soft); font-size:0.97rem; }
.rechtstext ul{ padding-left:22px; margin-top:8px; }
.itrk-legaltext{ margin-top:32px; }
.itrk-legaltext iframe{ width:100%; border:none; min-height:900px; }

/* ---------- Referenzen ---------- */
.ref-eintrag{ padding:26px 0; border-bottom:1px solid var(--linie); }
.ref-eintrag h3{ font-size:1.1rem; }
.ref-eintrag p{ color:var(--anthrazit-soft); font-size:1rem; margin-top:4px; }
.ref-eintrag .meta{ font-size:0.85rem; color:var(--grau); margin-top:6px; }

/* ---------- Zwei-Säulen-Karten (Digital Circle) ---------- */
.saeule{ border-top:3px solid var(--gruen); }
.saeule dl{ margin-top:14px; }
.saeule dt{ font-weight:700; font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--grau); margin-top:14px; }
.saeule dd{ margin:2px 0 0; font-size:1rem; color:var(--anthrazit-soft); }

/* ---------- Mobil-Ergänzungen Unterseiten ---------- */
@media (max-width: 860px){
  .seiten-hero{ padding:56px 0 44px; }
  .form-grid{ grid-template-columns:1fr; }
  .formular{ padding:24px; }
  .skala{ grid-template-columns:1fr; }
  .skala label{ text-align:left; display:flex; gap:10px; align-items:baseline; }
  .skala .stufe-nr{ margin-bottom:0; }
  .fortschritt{ top:64px; }
}

/* ============================================================
   Korrekturen & Ergänzungen (Überarbeitung Juli 2026)
   ============================================================ */
/* Grüner Button: Schrift immer weiß – auch in der Navigation
   (.nav-links a hatte höhere Spezifität und färbte den Text dunkel) */
a.btn-gruen, a.btn-gruen:visited, a.btn-gruen:hover,
.nav-links a.btn-gruen, .nav-links a.btn-gruen:hover{ color:#fff; }

/* Terminleiste unter dem Header: aktuelles Angebot prominent */
.termin-leiste{
  display:block; background:var(--gruen); color:#fff;
  text-align:center; padding:11px 18px; font-size:0.95rem;
  text-decoration:none; line-height:1.5;
}
.termin-leiste strong{ color:#fff; }
.termin-leiste .pfeil{ font-weight:700; white-space:nowrap; }
.termin-leiste:hover{ background:var(--gruen-dunkel); }

/* Hervorgehobene Angebots-Sektion (hellgrün) */
.sektion-akzent{ background:var(--gruen-hell); }

/* Footer: Claim in einer Zeile, Copyright-Zeile */
.footer-claim{ margin-bottom:16px; white-space:nowrap; max-width:none; }
.footer-unterseiten{ flex-wrap:wrap; margin-bottom:20px; }
.copyright{ font-size:0.85rem; color:var(--grau); }
@media (max-width: 860px){
  .footer-claim{ white-space:normal; }
}

/* ============================================================
   Aufklappbares Angebote-Menü im Header
   Öffnet per Maus (hover) und Tastatur (focus-within) –
   barrierefrei ohne JavaScript.
   ============================================================ */
.dropdown{ position:relative; }
.dropdown > button{
  background:none; border:none; cursor:pointer;
  font-family:var(--schrift); font-size:0.92rem;
  color:var(--anthrazit-soft); padding:20px 0;
}
.dropdown > button::after{ content:" ▾"; font-size:0.75rem; }
.dropdown > button:hover{ color:var(--anthrazit); }
.dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--weiss); border:1px solid var(--linie); border-radius:10px;
  box-shadow:0 10px 30px rgba(35,40,45,0.10);
  padding:8px; min-width:250px; display:none; z-index:60;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{ display:block; }
.dropdown-menu a{
  display:block; padding:10px 14px; border-radius:7px;
  color:var(--anthrazit) !important; font-size:0.92rem; text-decoration:none;
}
.dropdown-menu a:hover{ background:var(--flaeche); }
.dropdown-menu .menu-hinweis{
  display:block; font-size:0.82rem; color:var(--grau); font-weight:400;
}
@media (max-width: 860px){
  .dropdown{ display:none; } /* mobil führt die Startseiten-Sektion zu den Angeboten */
}

/* ---------- Brotkrumen-Navigation (Orientierung auf Unterseiten) ---------- */
.brotkrumen{ font-size:0.88rem; color:var(--grau); margin-bottom:20px; }
.brotkrumen a{ color:var(--grau); text-decoration:none; }
.brotkrumen a:hover{ color:var(--anthrazit); text-decoration:underline; }
.brotkrumen span[aria-current]{ color:var(--anthrazit); font-weight:700; }

/* ---------- Mitgliedschafts-Logos (Referenzen) ---------- */
.mitglied-logo{
  height:44px; width:auto; max-width:170px;
  object-fit:contain; display:block; margin-bottom:16px;
}