/* ==================================================================
   ACR — Basis. Gilt auf allen Seiten.
   Tokens, Typografie, Topbar, Navigation, Hero-Grundgerüst,
   Kontaktblock, Footer.
   ================================================================== */

@font-face{font-family:"Frutiger";src:url("../fonts/FrutigerLTCom-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Frutiger";src:url("../fonts/FrutigerLTCom-Roman.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Frutiger";src:url("../fonts/FrutigerLTCom-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Frutiger";src:url("../fonts/FrutigerLTCom-Black.ttf") format("truetype");font-weight:900;font-display:swap}
@font-face{font-family:"Frutiger Ultra";src:url("../fonts/FrutigerLTCom-UltraBlack.ttf") format("truetype");font-weight:900;font-display:swap}

:root{
  --red:#AC1424;--red-h:#8E1020;--tint:#F7E5E7;
  --ink:#0A0A0B;--g900:#0E0F12;--g800:#16181C;--g700:#2A2E35;--g500:#5A6069;--g400:#8A9099;--g300:#B7BCC2;--g200:#DCDFE3;--g100:#EEF0F2;--g50:#F6F7F8;--w:#fff;
  --sans:"Frutiger","Helvetica Neue",Arial,sans-serif;
  --ultra:"Frutiger","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Platz für die Bildlaufleiste immer freihalten. Sonst springt die Breite
   des Inhalts, sobald eine Seite kurz genug ist, dass die Leiste wegfällt —
   etwa bei einer Suche mit wenigen Treffern. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter: stable){html{overflow-y:scroll}}
body{font-family:var(--sans);color:var(--ink);background:var(--w);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
.tabnum{font-variant-numeric:tabular-nums}
.eyebrow{font-weight:700;font-size:15px;letter-spacing:0;color:var(--red)}
.eyebrow.mut{color:var(--g500)}
.page{position:relative;z-index:2}

/* ---------- KOPFBEREICH ----------
   Am Rechner verhält er sich wie jeder andere Seitenteil: Er scrollt mit
   nach oben weg, zum Menü muss man wieder hochscrollen. Nur am Handy
   klebt er oben und schrumpft dabei — dort ist der Weg nach oben lang
   und der Bildschirm klein. Die Regeln dafür stehen weiter unten im
   Block für schmale Bildschirme. */
.kopf-fuehler{position:absolute;top:0;height:1px;width:1px;pointer-events:none}

/* ---------- TOPBAR ---------- */
.topbar{background:var(--g800);color:var(--g300);font-size:13px;position:relative;z-index:4}
.topbar .in{max-width:1240px;margin:0 auto;padding:9px 44px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.topbar .l,.topbar .r{display:flex;align-items:center;gap:18px}
.topbar a{color:var(--g300);text-decoration:none;transition:color .15s;white-space:nowrap}
.topbar a:hover{color:#fff}
.topbar .sep{color:var(--g500)}
.topbar svg{width:15px;height:15px;fill:currentColor;display:block;flex:none}
.topbar .l a{display:inline-flex;align-items:center;gap:7px}
.topbar .l a span{position:relative;top:1px}
.topbar .r{gap:15px}
.topbar .r a{display:inline-flex;align-items:center}

/* ---------- NAVIGATION ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;padding:26px 44px;max-width:1240px;margin:0 auto;border-bottom:1px solid var(--ink);background:var(--w);position:relative;z-index:3}
.brand{font-weight:900;font-size:19px;letter-spacing:-.02em}
.brand b{color:var(--red)}
.nav .brand{display:inline-flex;align-items:center;gap:13px}
.nav .brand .mk{height:46px;width:auto;display:block}
.nav .brand span{font-weight:900;font-size:25px;letter-spacing:-.015em;color:var(--ink);position:relative;top:8px}
.nav .brand .mk-full{display:none}
.navr{font-weight:400;font-size:16px;display:flex;gap:26px;align-items:center;color:var(--g700)}
.navr a:hover{color:var(--red)}
.navr a.active{color:var(--red);font-weight:700}
.navr .req{font-weight:700;background:var(--red);color:#fff;padding:9px 16px}
.navr a.req:hover{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--red)}
.navr a.req.active{color:#fff}
/* Zwei Beschriftungen, ein Link: "Beratung anfragen" am Rechner,
   "Kontakt" im aufgeklappten Menü am Handy. */
.navr .req .m{display:none}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;margin:-9px -9px -9px 0;background:none;border:none;cursor:pointer}
.burger span{display:block;height:2px;width:24px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO (Grundform — Unterseiten) ---------- */
.hero{position:relative;overflow:hidden;min-height:340px}
.hero .bglog{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* Der Diagnose-Fliesstext ist ein Bild, kein Text.
   Grund: Als Text machte er je nach Seite 66 bis 85 Prozent des
   Seiteninhalts aus — Suchmaschinen lasen überwiegend Teilenummern
   statt der eigentlichen Inhalte. Als Bild ist er da, wo er hingehört:
   in der Dekoration.

   Als SVG und nicht als PNG, weil der Text darin Vektor bleibt: auf jedem
   Bildschirm gestochen scharf, auch auf Retina, und die Datei wiegt über
   die Leitung rund 6 KB statt 228. Das SVG hat keine Hintergrundfläche —
   es ist durchsichtig, damit der Weiston der Seite unverändert durchkommt.

   Die Kachel ist 1200 px hoch und wiederholt sich vertikal nahtlos, weil
   die Zeilenhöhe von 16 px darin aufgeht. Die Animation verschiebt sie um
   genau eine Kachelhöhe: 16 Pixel pro Sekunde. */
.hero .bgscroll{position:absolute;inset:0;
  background-image:url("../img/hintergrund.svg");
  background-repeat:repeat;background-position:0 0;
  background-size:2560px 1200px;
  animation:logup 75s linear infinite}
@keyframes logup{from{background-position:0 0}to{background-position:0 -1200px}}
.hero .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(255,255,255,.62)}
/* Je schmaler der Bildschirm, desto dichter der Schleier: Am Handy liegt der
   Fliesstext direkt hinter Überschrift und Vorspann statt weit daneben — bei
   gleicher Deckkraft wie am Rechner konkurriert er mit dem Text. */
@media(max-width:1024px){.hero .veil{background:rgba(255,255,255,.74)}}
@media(max-width:640px){.hero .veil{background:rgba(255,255,255,.78)}}
@media(prefers-reduced-motion:reduce){.hero .bgscroll{animation:none}}
.hero .inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:54px 44px 50px}
.hero h1{font-family:var(--ultra);font-weight:900;font-size:clamp(38px,5vw,72px);line-height:1.08;letter-spacing:-.015em;margin:24px 0 0}
.hero h1 .r{color:var(--red)}
.hero h1 .cur{color:var(--red)}
.hero .lead{font-weight:300;font-size:20px;line-height:1.45;color:var(--g700);max-width:600px;margin-top:22px;text-shadow:0 1px 12px rgba(255,255,255,.9)}

/* ---------- BUTTONS ---------- */
.cta{margin-top:30px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.btn{font-weight:700;font-size:16px;padding:15px 26px;background:var(--red);color:#fff;display:inline-block;border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--red-h)}
.btn2{font-weight:700;font-size:16px;border-bottom:2px solid var(--ink);padding-bottom:3px}
.btn2:hover{color:var(--red);border-color:var(--red)}

/* ---------- ABSCHNITTS-KOPF ---------- */
.sec-h{font-weight:700;font-size:15px;color:var(--g500);padding:60px 44px 20px;max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;border-bottom:1px solid var(--g200)}
.sec-h .c{color:var(--g400);font-weight:400}

/* ---------- KONTAKTBLOCK (dunkel) ---------- */
.contact{background:var(--g900);color:#fff;margin-top:20px}
.contact .in{max-width:1240px;margin:0 auto;padding:88px 44px}
.contact h2{font-family:var(--ultra);font-weight:900;font-size:clamp(32px,4.5vw,60px);line-height:1.08;letter-spacing:-.015em;color:#fff;margin-top:14px}
.contact h2 .cur{color:var(--red)}
.contact .sub{font-weight:300;font-size:20px;color:var(--g300);margin-top:20px;max-width:520px}
.contact .rows{margin-top:44px;border-top:1px solid var(--g700)}
.contact .r{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid var(--g700)}
.contact .r .l{font-size:15px;color:var(--g400)}
.contact .r .v{font-weight:700;font-size:clamp(18px,2.4vw,26px);letter-spacing:-.01em}
.contact .r .v:hover{color:var(--red)}

/* ---------- FOOTER ---------- */
footer{background:var(--g800);color:var(--g300);padding:64px 0 36px}
footer .in{max-width:1240px;margin:0 auto;padding:0 44px}
footer .top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--g700)}
footer .brand{display:inline-flex;align-items:center;gap:10px;color:#fff;margin-bottom:14px}
footer .brand .mk{height:30px;width:auto;display:block}
footer .brand span{font-weight:900;font-size:19px;letter-spacing:-.01em;position:relative;top:5px}
footer .brand b{color:#fff}
footer p{font-size:15px;color:var(--g400);max-width:360px;font-weight:300;line-height:1.6}
footer h5{font-weight:700;font-size:16px;color:#fff;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer li a{font-size:15px;color:var(--g300)}
footer li a:hover{color:#fff}
footer .soc{display:flex;gap:18px;margin-top:16px;font-size:14px;flex-wrap:wrap}
footer .soc a:hover{color:var(--red)}
footer .base{padding-top:24px;font-size:14px;color:var(--g500);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer .base a:hover{color:#fff}

/* ---------- MOBIL ---------- */
@media(max-width:900px){
  /* Kopf klebt oben — nur hier, nicht am Rechner. `sticky` statt `fixed`:
     Der Kasten behält seinen Platz im Seitenfluss, der Inhalt darunter
     rutscht also nicht hoch und braucht keinen Ausgleichsabstand. */
  .kopf{position:sticky;top:0;z-index:50}
  /* Ist man in WordPress angemeldet, sitzt oben die Adminleiste — der
     Kopf muss darunter kleben, sonst verschwindet er dahinter. */
  .admin-bar .kopf{top:46px}
  /* Sprungziele dürfen nicht unter dem klebenden Kopf landen. */
  :target{scroll-margin-top:150px}

  /* Flache Fassung, sobald gescrollt wird: Logo und Abstände schrumpfen,
     der Kopf gibt rund ein Drittel seiner Höhe frei. Nichts wird
     ausgeblendet — WhatsApp, E-Mail und die sozialen Netzwerke bleiben
     durchgehend erreichbar. */
  .kopf .nav,.kopf .topbar .in,.kopf .brand .mk,.kopf .brand .mk-full,
  .kopf .brand span,.kopf .topbar svg{
    transition:height .18s ease,padding .18s ease,font-size .18s ease,width .18s ease}
  .kopf.flach .nav{padding-top:10px;padding-bottom:10px}
  .kopf.flach .brand .mk{height:32px}
  .kopf.flach .brand .mk-full{height:34px}
  .kopf.flach .brand span{font-size:19px;top:5px}
  .kopf.flach .topbar .in{padding-top:5px;padding-bottom:5px}
  .kopf.flach .topbar svg{width:14px;height:14px}

  /* Beschriftungen weg, nur die Sinnbilder bleiben. Mit "WhatsApp" und
     "E-Mail" ausgeschrieben passte die Leiste nicht mehr in die Breite —
     die fünf Verweise rechts wurden abgeschnitten und waren am Handy gar
     nicht erreichbar. Jedes Sinnbild trägt ein aria-label, Vorleseprogramme
     lesen die Bezeichnung also weiterhin.

     Umbruch erlaubt: Reicht der Platz auf einem sehr schmalen Gerät trotzdem
     nicht, rutschen die Verweise in eine zweite Zeile, statt rechts aus dem
     Bild zu laufen. Abgeschnittene Symbole kann man nicht antippen — eine
     zweite Zeile schon. */
  .topbar .in{padding:8px 16px;gap:8px 14px;flex-wrap:wrap}
  .topbar .l,.topbar .r{gap:16px;flex-wrap:wrap}
  .topbar .r{margin-left:auto}
  .topbar .l a span{display:none}
  .topbar .sep{display:none}
  .topbar svg{width:18px;height:18px}
  .topbar .l a,.topbar .r a{padding:4px 0}
  .nav{padding:20px}
  .nav .brand .mk,.nav .brand span{display:none}
  .nav .brand .mk-full{display:block;height:46px;width:auto}
  .burger{display:flex}
  .navr{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--w);border-bottom:1px solid var(--ink);box-shadow:0 14px 26px rgba(10,10,11,.09);display:none;font-size:17px;z-index:20}
  .nav.open .navr{display:flex}
  .navr a{padding:15px 20px;border-top:1px solid var(--g200);color:var(--g700);font-weight:400}
  .navr a:first-child{border-top:none}
  .navr a.active{background:var(--red);color:#fff;font-weight:700}
  /* Am Handy fehlte der Kontakt ganz — in der Kopfzeile ist kein Platz
     dafür. Er steht jetzt als letzter Menüpunkt, als roter Rahmen statt
     als Fläche: sichtbar abgesetzt, ohne den Balken zu dominieren. */
  .navr .req{display:block;background:none;color:var(--red);font-weight:700;
    padding:13px 20px;margin:8px 20px 14px;border-top:none;
    box-shadow:inset 0 0 0 2px var(--red);text-align:center}
  .navr .req .d{display:none}
  .navr .req .m{display:inline}
  .navr a.req:hover{background:var(--red);color:#fff;box-shadow:inset 0 0 0 2px var(--red)}
  .navr a.req.active{background:var(--red);color:#fff}
  .hero .inner{padding:36px 24px 40px}
  /* Am Handy wird die Kachel auf drei Viertel gestaucht — auf allen Seiten
     gleich. In voller Grösse füllen wenige riesige Zeichenkolonnen den
     schmalen Bildschirm, das wirkt grob statt wie Hintergrund. Weil es ein
     Vektorbild ist, bleibt die Schrift dabei scharf.
     900 px sind wieder genau 75 Zeilen, die Kachelung bleibt nahtlos. Die
     Laufzeit bleibt bei 75 Sekunden: die Kachel ist kleiner, also läuft sie
     langsamer — im Verhältnis zur Schrift genauso schnell wie am Rechner. */
  .hero .bgscroll{background-size:1920px 900px;animation-name:logup-m}
  @keyframes logup-m{from{background-position:0 0}to{background-position:0 -900px}}
  .sec-h{padding-left:24px;padding-right:24px}
  .contact .in,footer .in{padding-left:24px;padding-right:24px}
  footer .top{grid-template-columns:1fr;gap:28px}
}