/* BEN 24/7 – gemeinsame Basis für alle Seiten.
 * Einzige Quelle für Farben, Typografie, Abstände, Radien, Schatten und Bewegung.
 * Enthält die selbst gehosteten Schriften. Keine Fremd-Requests.
 *
 * Typografie: Archivo (Ueberschriften, Zahlen) + Source Sans 3 (Text, Bedienung).
 * Beide unter SIL Open Font License 1.1, Dateien unter fonts/, kein Google-Kontakt.
 */

/* ---------- Schriften ---------- */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  /* Farbe: Blau ist die Handlungsfarbe, Gruen markiert WhatsApp und Bestaetigendes. */
  --blue:#1e40c0;
  --blue-dark:#15287a;
  --blue-deep:#101d52;
  --blue-soft:#eef1fc;
  --blue-softer:#f7f9ff;
  --green:#18811f;
  --green-dark:#136619;
  --green-soft:#e8f5e9;
  --ink:#0f1729;
  --ink-soft:#2a3348;
  --muted:#56607a;
  --muted-soft:#7b849c;
  --line:#e7eaf3;
  --line-strong:#d5dcee;
  --bg:#ffffff;
  --bg-alt:#f6f8fd;
  --bg-ink:#0b132c;
  --on-dark:#ffffff;
  --on-dark-muted:rgba(255,255,255,.78);
  --on-dark-line:rgba(255,255,255,.18);

  /* Schrift */
  --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-text:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Typo-Skala */
  --text-xs:.8125rem;
  --text-sm:.9375rem;
  --text-base:1.0625rem;
  --text-lg:1.25rem;
  --text-xl:clamp(1.35rem,1.2rem + .7vw,1.6rem);
  --text-2xl:clamp(1.7rem,1.35rem + 1.7vw,2.5rem);
  --text-3xl:clamp(2rem,1.4rem + 2.8vw,3.1rem);
  --text-display:clamp(2.25rem,1.45rem + 3.4vw,3.9rem);
  --text-hero:clamp(2.6rem,1.2rem + 5.6vw,5rem);

  /* Abstand, 4-Punkt-Raster mit sprechenden Namen */
  --space-2xs:.25rem;
  --space-xs:.5rem;
  --space-sm:.75rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-2xl:3rem;
  --space-3xl:4rem;
  /* Ein Regler fuer den vertikalen Rhythmus aller Abschnitte. */
  --section-y:clamp(3.25rem,2.1rem + 4.4vw,5.25rem);

  /* Form */
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:16px;
  --radius-lg:20px;
  --radius-pill:999px;

  /* Tiefe */
  --shadow-sm:0 2px 10px rgba(15,23,41,.06);
  --shadow:0 12px 30px rgba(15,23,41,.09);
  --shadow-lg:0 26px 60px rgba(15,23,41,.16);

  /* Bewegung */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:.15s;
  --dur-2:.22s;
  --dur-3:.35s;

  /* Mass */
  --container:1180px;
  --container-narrow:860px;
  /* Kopfbereich: Logo-Hoehe steuert die Kopfhoehe (freigestelltes Logo, Auftrag 06.10.). */
  --logo-h:144px;
  --header-h:calc(var(--logo-h) + 24px);
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
body{
  font-family:var(--font-text);
  font-size:var(--text-base);
  line-height:1.62;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p,li,a,summary,dd,dt,label,button{overflow-wrap:break-word}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-lg)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--space-lg)}
section{padding:var(--section-y) 0}
/* Verhindert, dass Rasterkinder mit Bildern die Spur sprengen. */
main>*,.hero-inner>*,.why-grid>*,.contact-grid>*,.grid-cards>*,.foot-grid>*,.media-grid>*,.steps>*,.split>*{min-width:0}

/* ---------- Ueberschriften ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.022em;
  color:var(--ink);
  overflow-wrap:break-word;
  min-width:0;
}
h1{font-size:var(--text-display);font-weight:800;letter-spacing:-.03em}
h2{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}
h3{font-size:var(--text-lg);letter-spacing:-.016em;line-height:1.3}
h4{font-size:var(--text-base);letter-spacing:-.01em}
h1,h2{text-wrap:balance;hyphens:auto}
h3,h4{text-wrap:pretty}

.lead{color:var(--muted);font-size:var(--text-lg);line-height:1.55;max-width:62ch}
.eyebrow{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-dark);background:var(--blue-soft);
  padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-pill);
  margin-bottom:var(--space-md);
}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.center .eyebrow{margin-left:auto;margin-right:auto}

/* ---------- Schaltflaechen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  font-family:var(--font-display);font-weight:700;font-size:var(--text-base);
  letter-spacing:-.012em;line-height:1.1;
  min-height:52px;padding:14px 24px;
  border:1.5px solid transparent;border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(30,64,192,.2)}
.btn-primary:hover{background:var(--blue-dark);box-shadow:0 12px 28px rgba(30,64,192,.26);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(30,64,192,.22)}
.btn-wa{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(24,129,31,.18)}
.btn-wa:hover{background:var(--green-dark);box-shadow:0 12px 26px rgba(24,129,31,.24);transform:translateY(-2px)}
.btn-wa:active{transform:translateY(0);box-shadow:0 4px 12px rgba(24,129,31,.2)}
.btn-ghost{background:#fff;color:var(--blue);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost:active{transform:translateY(0)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* Fokus ist sofort sichtbar, nie animiert. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
.on-dark a:focus-visible,.on-dark button:focus-visible,.on-dark summary:focus-visible,
.on-dark input:focus-visible,.on-dark select:focus-visible,.on-dark textarea:focus-visible{
  outline-color:#fff;
}

/* ---------- Kopfzeile ---------- */
header.site,.topbar{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid rgba(213,220,238,.9);
  box-shadow:0 8px 28px rgba(15,23,41,.035);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);height:var(--header-h);min-height:0}
.brand{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-weight:800;font-size:var(--text-base);letter-spacing:-.025em;color:var(--ink)}
.brand .logo,.brand img{width:44px;height:44px;flex:0 0 auto;object-fit:contain;border-radius:11px;background:#fff;box-shadow:0 2px 10px rgba(15,23,41,.08)}
/* Kopfbereich: freigestelltes Logo, keine Kachel, keine Schatten (Auftrag 06.10.).
   Der Fussbereich behaelt die weisse Kachel, damit das Logo auf dunklem Grund lesbar bleibt. */
header .brand .logo{
  width:auto;height:var(--logo-h);
  background:transparent;border-radius:0;box-shadow:none;
}
.brand small{display:block;font-family:var(--font-text);font-weight:600;font-size:.75rem;color:var(--muted);letter-spacing:.01em}
.brand>span{white-space:nowrap}
.nav-actions{display:flex;align-items:center;gap:var(--space-xs);flex:0 0 auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{position:relative;font-weight:600;font-size:var(--text-sm);color:#46506a;transition:color var(--dur-2) var(--ease-out)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transition:transform var(--dur-2) var(--ease-out)}
.nav-links a:hover{color:var(--blue)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:var(--space-xs);flex:0 0 auto}
.nav-cta .btn{white-space:nowrap}
@media(max-width:1000px){:is(.nav-cta,.nav-actions) .btn-ghost{display:none}}
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:1180px) and (min-width:901px){
  /* Tablett quer: Logo zuruecknehmen, damit Luft zur Navigation bleibt. */
  :root{--logo-h:112px}
}
@media(max-width:1240px) and (min-width:901px){
  /* Sechs direkte Seitenlinks in der Kopfnavi: enger stellen, statt Umbrauch. */
  .nav-links{gap:20px}
  .nav-links a{white-space:nowrap}
}
@media(max-width:1080px) and (min-width:901px){
  .nav-links{gap:14px}
  .nav-links a{font-size:13px}
  :is(.nav-cta,.nav-actions) .btn-primary .cta-num{display:none}
  :is(.nav-cta,.nav-actions) .btn-primary{padding:11px 13px}
}
@media(max-width:900px){
  /* Burger-Layout: kompakter Kopfbereich. */
  :root{--logo-h:104px}
}
@media(max-width:560px){
  :root{--logo-h:84px}
  .brand{gap:var(--space-xs)}
  footer.site .brand small{display:none}
  :is(.nav-cta,.nav-actions) .btn-primary{padding:11px 16px;font-size:var(--text-sm)}
}
/* Auf sehr schmalen Geraeten darf die Kopfzeile nicht ueberlaufen: Marke und
   Telefonknopf schrumpfen, die Nummer entfaellt zugunsten des Labels. */
@media(max-width:400px){
  .brand{font-size:var(--text-sm);gap:var(--space-xs)}
  .nav{gap:var(--space-xs)}
  :is(.nav-cta,.nav-actions) .btn{padding:11px 13px}
  .nav-cta .btn-primary .cta-num{display:none}
}


/* ---------- Burger-Menue (Startseite, unter 901 px) ---------- */
.menu{position:relative;display:none}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-xs);color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:22px;height:22px}
.menu[open] summary{border-color:var(--blue);color:var(--blue)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:80;
  min-width:240px;padding:var(--space-xs);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);display:grid;
  max-height:calc(100vh - 120px);overflow-y:auto;
}
.menu-panel a{display:flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:var(--radius-xs);font-weight:600;font-size:var(--text-sm);color:var(--ink-soft);white-space:nowrap}
.menu-panel a:hover{background:var(--blue-soft);color:var(--blue)}
.menu-panel .sep{height:1px;background:var(--line);margin:6px 8px}
.menu-panel a[aria-current="page"]{background:var(--blue-soft);color:var(--blue-dark);font-weight:700}
@media(max-width:900px){
  .nav-links{display:none}
  .menu{display:inline-flex}
}
@media(min-width:901px){
  .menu{display:none}
}

/* ---------- Leistungsleiste ---------- */
.service-nav{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:40}
.service-nav .container{display:flex;gap:var(--space-xs);overflow-x:auto;padding-top:5px;padding-bottom:5px;scrollbar-width:none;scrollbar-color:transparent transparent}
.service-nav .container::-webkit-scrollbar{display:none}
.service-nav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:8px 15px;border-radius:var(--radius-pill);color:var(--muted);font-size:var(--text-sm);font-weight:600;white-space:nowrap;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.service-nav a:hover{background:var(--blue-soft);color:var(--blue)}
.service-nav a[aria-current="page"]{background:var(--blue-soft);color:var(--blue-dark);font-weight:700}

/* ---------- Feste mobile Kontaktleiste ---------- */
.mobile-bar{display:none}
@media(max-width:900px){
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    position:fixed;bottom:0;left:0;right:0;z-index:60;
    box-shadow:0 -6px 20px rgba(0,0,0,.14);
  }
  .mobile-bar a{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:56px;padding:15px;padding-bottom:calc(15px + env(safe-area-inset-bottom));font-family:var(--font-display);font-weight:700;color:#fff}
  .mobile-bar svg{width:18px;height:18px}
  .mobile-bar .mb-call,.mobile-bar .call{background:var(--blue)}
  .mobile-bar .mb-wa,.mobile-bar .wa{background:var(--green)}
  footer.site{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}

/* ---------- Hilfsklassen ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack>*+*{margin-top:var(--space-md)}
.on-dark{color:var(--on-dark-muted)}
.on-dark h2,.on-dark h3,.on-dark h4{color:var(--on-dark)}

/* ---------- Bewegung reduzieren ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,.card:hover{transform:none !important}
}

/* ---------- Fussbereich ---------- */
footer.site{background:var(--bg-ink);color:#c5cce0;font-size:var(--text-sm)}
footer.site .container{padding-top:var(--space-3xl);padding-bottom:var(--space-xl)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-2xl)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:var(--space-xl)}}
footer.site h3{color:#fff;font-size:var(--text-base);margin-bottom:var(--space-md)}
footer.site ul{display:grid;gap:9px}
footer.site a:hover{color:#fff}
footer.site .brand{color:#fff;margin-bottom:var(--space-md)}
footer.site .brand small{color:#8b96b5}
.foot-imp{line-height:1.9}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:var(--space-2xl);padding-top:var(--space-lg);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-sm);
  color:#8b96b5;font-size:var(--text-xs);
}