/* ============================================================
   SBA — Homepage-Layout (holger-henke.cloud)
   Aufbauend auf sba-base.css (Design-System-Tokens)
   ============================================================ */

.sba-container { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); }

/* ---- Sektionen ---- */
.sba-section      { padding:var(--space-20) 0; }
.sba-section-alt  { background:var(--sba-cream); }
.sba-section-header { text-align:center; max-width:680px; margin:0 auto var(--space-12); }
.sba-section-header h2 { margin-bottom:var(--space-3); }
.sba-section-header p  { color:var(--sba-muted); font-size:var(--fs-h3); line-height:1.5; }

/* Ankerziele: die Nav ist sticky und 53px hoch - ohne diesen Abstand
   verschwindet das angesprungene Element darunter. Betrifft #leistungen,
   #ueber, #kontakt und die Qualifikations-Karten. */
.sba-section[id], .sba-cta-section[id], .sba-card[id] { scroll-margin-top:80px; }

/* ---- Navigation (sticky, transluzent) ---- */
.sba-nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--sba-line-soft); }
.sba-nav-inner { max-width:var(--maxw); margin:0 auto; padding:var(--space-3) var(--pad-x); display:flex; align-items:center; justify-content:space-between; }
.sba-nav-brand { display:flex; align-items:center; gap:var(--space-4); font-weight:var(--fw-bold); color:var(--sba-navy); font-size:var(--fs-h3); }

/* Wortmarke: Versalien mit vertikalen Tri-Dots im Lime-Verlauf (Marken-Signatur) */
.sba-wordmark { display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.04em; font-weight:var(--fw-bold); color:var(--sba-navy); font-size:16px; }
.sba-wordmark-dots { display:inline-flex; flex-direction:column; gap:3px; }
.sba-wordmark-dots i { width:5px; height:5px; border-radius:50%; }
.sba-wordmark-dots i:nth-child(1) { background:var(--sba-lime-bright); }
.sba-wordmark-dots i:nth-child(2) { background:var(--sba-lime); }
.sba-wordmark-dots i:nth-child(3) { background:var(--sba-lime-deep); }

/* Logo als Badge-Kachel: hängt oben über die Kante Weiß/Navy,
   schrumpft beim Scrollen auf Nav-Größe (JS setzt .sba-nav-scrolled) */
.sba-nav-brand img {
  width:192px; height:auto;                 /* 4x der alten 48px — hier zentral justieren */
  margin:-4px 0 -86px;                      /* negativer Bottom-Margin = Überhang in den Hero */
  border-radius:var(--radius-lg);
  box-shadow:0 8px 24px rgba(15,37,72,.28);
  position:relative; z-index:5;
  transition:width var(--dur-slow) var(--ease-standard),
             margin var(--dur-slow) var(--ease-standard),
             box-shadow var(--dur-slow) var(--ease-standard);
}
.sba-nav-scrolled .sba-nav-brand img {
  width:48px; margin:0; box-shadow:none; border-radius:var(--radius-sm);
}

.sba-nav-links { display:flex; align-items:center; gap:var(--space-5); list-style:none; }
.sba-nav-links a { font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--sba-ink-2); white-space:nowrap; }
.sba-nav-links a:hover, .sba-nav-links a.active { color:var(--sba-navy); }

/* Intern-Link: dezent abgesetzt vom öffentlichen Menü */
.sba-nav-links a.sba-nav-intern {
  color:var(--sba-muted);
  padding-left:var(--space-5);
  border-left:1px solid var(--sba-border);
}
.sba-nav-links a.sba-nav-intern:hover { color:var(--sba-navy); }

.sba-nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.sba-nav-toggle span { width:24px; height:2px; background:var(--sba-navy); border-radius:2px; }

/* ---- Hero (Navy — Signature, Lime-Akzentlinie) ---- */
.sba-hero { background:var(--sba-navy); position:relative; overflow:hidden; }
.sba-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--sba-grad-duo); }
.sba-hero-inner { max-width:var(--maxw); margin:0 auto; padding:var(--space-20) var(--pad-x); display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-12); align-items:center; }
.sba-hero-tagline { font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:var(--fs-xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--sba-lime); margin-bottom:var(--space-4); }
.sba-hero h1 { font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--tracking-tight); color:var(--sba-white); margin-bottom:var(--space-5); }
.sba-hero-sub { color:rgba(255,255,255,.82); font-size:var(--fs-h3); line-height:1.55; max-width:48ch; margin-bottom:var(--space-8); }
.sba-hero-actions { display:flex; gap:var(--space-4); flex-wrap:wrap; }
/* Sekundaerbutton auf Navy-Grund: gilt fuer Hero und CTA-Band gleichermassen */
.sba-hero .sba-btn-secondary, .sba-cta-section .sba-btn-secondary { color:var(--sba-white); border-color:rgba(255,255,255,.35); }
.sba-hero .sba-btn-secondary:hover, .sba-cta-section .sba-btn-secondary:hover { border-color:var(--sba-white); }
.sba-hero-image { justify-self:end; }
.sba-hero-image img { width:280px; height:280px; border-radius:var(--radius-2xl); object-fit:cover; border:3px solid rgba(255,255,255,.12); }

/* ---- Grid ---- */
.sba-grid   { display:grid; gap:var(--space-6); }
.sba-grid-3 { grid-template-columns:repeat(3,1fr); }

/* ---- Seitenkopf für Unterseiten (Navy-Band, wie Hero-Sprache) ---- */
/* padding-top raeumt den Logo-Ueberhang (max. 86px) frei */
.sba-page-head { background:var(--sba-navy); position:relative; padding:112px 0 var(--space-12); }
.sba-page-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--sba-grad-duo); }
.sba-page-head-tagline { font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:var(--fs-xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--sba-lime); margin-bottom:var(--space-3); }
.sba-page-head h1 { color:var(--sba-white); margin-bottom:var(--space-4); }
.sba-page-head-sub { color:rgba(255,255,255,.82); font-size:var(--fs-h3); line-height:1.55; max-width:56ch; }
.sba-page-head-sub strong { color:var(--sba-white); font-weight:var(--fw-bold); }

/* ---- Kontakt: zwei Spalten ---- */
.sba-kontakt-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:var(--space-12); align-items:start; }
.sba-kontakt-side h2, .sba-kontakt-form-wrap h2 { margin-bottom:var(--space-4); }
.sba-kontakt-side p { color:var(--sba-muted); margin-bottom:var(--space-6); }
.sba-kontakt-kanaele { margin-top:var(--space-10); }
.sba-kontakt-kanaele h3 { margin-bottom:var(--space-4); }
.sba-kontakt-kanaele ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.sba-kontakt-kanaele li { display:flex; align-items:center; gap:var(--space-3); color:var(--sba-navy); }
.sba-kontakt-kanaele svg { color:var(--sba-lime-deep); flex:none; }

/* ---- Formular ---- */
.sba-form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.sba-form-field { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.sba-form-field label { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--sba-ink); }
.sba-form-field input, .sba-form-field select, .sba-form-field textarea {
  font-family:var(--font-sans); font-size:var(--fs-body); color:var(--sba-ink);
  padding:11px 14px; border:1px solid var(--sba-border); border-radius:var(--radius-md);
  background:var(--sba-white);
  transition:border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.sba-form-field input:focus, .sba-form-field select:focus, .sba-form-field textarea:focus { outline:none; border-color:var(--sba-navy); box-shadow:var(--focus-ring); }
.sba-form-field select option { color:#1a2230; background:#fff; }
.sba-form-field textarea { resize:vertical; min-height:120px; }

/* Honeypot: visuell und für Screenreader raus, im DOM für Bots drin */
.sba-form-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.sba-form-consent { display:flex; align-items:flex-start; gap:var(--space-3); margin:var(--space-5) 0 var(--space-6); }
.sba-form-consent input { width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--sba-navy); }
.sba-form-consent label { font-size:var(--fs-sm); color:var(--sba-muted); line-height:1.5; }

.sba-form-error { background:var(--sba-error-bg); color:var(--sba-error-ink); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); font-size:var(--fs-sm); margin-bottom:var(--space-4); }
.sba-form-note { font-size:var(--fs-xs); color:var(--sba-muted); margin-top:var(--space-3); }

.sba-form-success { background:var(--sba-success-bg); border:1px solid var(--sba-success); border-radius:var(--radius-xl); padding:var(--space-8); text-align:center; }
.sba-form-success svg { color:var(--sba-success); margin:0 auto var(--space-4); }
.sba-form-success h3 { margin-bottom:var(--space-3); }
.sba-form-success p { color:var(--sba-ink-2); }

/* ---- Karten als Links (Leistungs-Detailseiten) ---- */
a.sba-card-link { display:flex; flex-direction:column; color:inherit; }
a.sba-card-link:hover { color:inherit; }
a.sba-card-link h3 { color:var(--sba-ink); }
a.sba-card-link:hover h3 { color:var(--sba-navy); }
.sba-card-more {
  margin-top:auto; padding-top:var(--space-4);
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--sba-navy);
}
a.sba-card-link:hover .sba-card-more { color:var(--sba-navy-light); }

/* Eyebrow als Kategoriezeile ueber der Kartenueberschrift (Unterseiten) */
.sba-card .sba-eyebrow { display:block; margin-bottom:var(--space-2); }

/* ---- Trust-Grid ---- */
.sba-trust-grid { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; }

/* Badges als Links (Qualifikations-Detailseite) */
a.sba-trust-badge { transition:background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
a.sba-trust-badge:hover { background:var(--sba-lime-soft); color:var(--sba-navy); transform:translateY(-1px); }

/* ---- CTA-Sektion (Navy-Bookend) ---- */
.sba-cta-section { background:var(--sba-grad-navy); text-align:center; padding:var(--space-20) 0; position:relative; }
.sba-cta-section::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--sba-grad-duo); }
.sba-cta-section .sba-container { max-width:720px; }
.sba-cta-section h2 { color:var(--sba-white); margin-bottom:var(--space-4); }
.sba-cta-section p  { color:rgba(255,255,255,.82); font-size:var(--fs-h3); line-height:1.55; margin-bottom:var(--space-8); }
.sba-cta-actions { display:flex; gap:var(--space-4); flex-wrap:wrap; justify-content:center; }

/* ---- Footer ---- */
/* Grid, 2 Spalten x 2 Zeilen — vier feste Fluchten:
   [Siegel-Karte      | Social-Icons  ]   Icon-Oberkante = Karten-Oberkante
   [Copyright         | Rechtslinks   ]   gleiche Text-Horizontale, links-/rechtsbündig
   Zeilenabstand >= eine Zeilenhöhe der Schrift. */
.sba-footer { background:var(--sba-navy-deep); color:rgba(255,255,255,.7); }
.sba-footer-inner {
  max-width:var(--maxw); margin:0 auto;
  padding:var(--space-10) var(--pad-x);
  display:grid;
  grid-template-columns:auto 1fr;
  row-gap:var(--space-6);   /* 24px > Zeilenhöhe (13px x 1.5) = mind. eine Leerzeile */
  column-gap:var(--space-8);
  font-size:var(--fs-sm);
  align-items:start;
}

/* Siegel-Karte: gleiche Kontur wie die Leistungs-Kacheln (.sba-card) —
   CSS rundet die Ecken, der Navy-Hintergrund folgt der Rundung automatisch */
.sba-cert-card {
  grid-column:1; grid-row:1;
  justify-self:start;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  background:var(--sba-white); border:1px solid var(--sba-border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-card);
  padding:var(--space-5) var(--space-6);
}
.sba-cert-card img { width:180px; height:auto; }
.sba-cert-card-text { text-align:center; font-size:var(--fs-sm); line-height:1.5; color:var(--sba-muted); }
.sba-cert-card-text strong { color:var(--sba-navy); font-weight:var(--fw-bold); }

/* Social-Icons: Zeile 1 rechts, Oberkante buendig mit Karten-Oberkante */
.sba-footer-social {
  grid-column:2; grid-row:1;
  justify-self:end; align-self:start;
  display:flex; gap:var(--space-5);
  margin-right:-4px;  /* Ausgleich der SVG-Innenraender: visuelle Kante = Textkante */
}
.sba-footer-social a {
  display:inline-flex; color:rgba(255,255,255,.8); cursor:pointer;
  transition:color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.sba-footer-social a:hover { color:var(--sba-lime); transform:translateY(-2px); }

/* Zeile 2: Copyright links, Rechtslinks rechts — dieselbe Horizontale */
.sba-footer-copy  { grid-column:1; grid-row:2; justify-self:start; }
.sba-footer-links { grid-column:2; grid-row:2; justify-self:end; display:flex; gap:var(--space-5); }
.sba-footer a { color:rgba(255,255,255,.7); }
.sba-footer a:hover { color:var(--sba-lime); }

/* ---- Responsive ---- */
/* Zwischenstufe: bevor es eng wird, Logo und Wortmarke verkleinern */
@media (max-width:1180px){
  .sba-nav-brand img { width:132px; margin:-4px 0 -56px; }
  .sba-wordmark { font-size:var(--fs-sm); gap:7px; }
  .sba-wordmark-dots i { width:4px; height:4px; }
}
/* Unter 1000px: Wortmarke ausblenden, das Logo allein traegt die Marke */
@media (max-width:1000px){
  .sba-wordmark { display:none; }
}
@media (max-width:900px){
  .sba-grid-3 { grid-template-columns:1fr; }
  .sba-kontakt-grid { grid-template-columns:1fr; gap:var(--space-10); }
  .sba-form-row { grid-template-columns:1fr; gap:0; }
  .sba-hero-inner { grid-template-columns:1fr; }
  .sba-hero-image { justify-self:start; order:-1; }
  .sba-hero-image img { width:150px; height:150px; }
}
@media (max-width:768px){
  :root { --pad-x:24px; --fs-display:34px; --fs-h1:26px; --fs-h2:21px; }
  .sba-nav-toggle { display:flex; }
  /* Logo mobil kleiner überlappend, sonst erdrückt es die Seite */
  .sba-nav-brand img { width:112px; margin:-4px 0 -48px; }
  .sba-nav-scrolled .sba-nav-brand img { width:40px; margin:0; }
  .sba-wordmark { font-size:var(--fs-sm); gap:6px; letter-spacing:.04em; }
  .sba-wordmark-dots i { width:4px; height:4px; }
  .sba-nav-links {
    position:absolute; top:100%; left:0; right:0; display:none;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--sba-white); border-bottom:1px solid var(--sba-border);
    padding:var(--space-2) var(--pad-x);
  }
  .sba-nav-links.open { display:flex; }
  .sba-nav-links li { width:100%; }
  .sba-nav-links a { display:block; padding:var(--space-3) 0; width:100%; }
  .sba-nav-links a.sba-nav-intern { border-left:none; padding-left:0; border-top:1px solid var(--sba-line-soft); }
  .sba-section, .sba-cta-section { padding:var(--space-12) 0; }
  .sba-hero-inner { padding:var(--space-12) var(--pad-x); }
  /* Footer mobil: eine Spalte, Reihenfolge Karte > Icons > Copyright > Links */
  .sba-footer-inner { grid-template-columns:1fr; }
  .sba-cert-card    { grid-column:1; grid-row:1; }
  .sba-footer-social{ grid-column:1; grid-row:2; justify-self:start; margin-right:0; }
  .sba-footer-copy  { grid-column:1; grid-row:3; }
  .sba-footer-links { grid-column:1; grid-row:4; justify-self:start; }
  .sba-footer-social a svg { width:40px; height:40px; }
}