/* ==========================================================================
   Gäbler Medizintechnik — Website V1
   Design: Entwurf A "Klinik-Klar" (abgenommen 24.07.2026)
   Alle Schriften und Assets werden lokal ausgeliefert.
   Beim Aufruf der Seite wird keine Verbindung zu Dritten aufgebaut.
   ========================================================================== */

/* --- Schrift lokal (Roboto, Apache License 2.0, siehe assets/fonts/) ------ */
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/roboto-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:'Roboto';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/roboto-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;
}

/* --- Design-Tokens (CI Gäbler Medizintechnik) ---------------------------- */
:root{
  --rot:#E30813;            /* Primär-Akzent: nur CTA, aktiver Menüpunkt, kleine Akzente */
  --rot-dunkel:#b7060f;
  --indigo:#312783;         /* Sekundär: Überschriften, Icons */
  --indigo-dunkel:#241d61;
  --tinte:#23262b;
  --grau:#6b7280;
  --grau-hell:#9aa0ab;
  --hell:#f7f8fa;
  --linie:#e7e9ef;
  --tint-i:rgba(49,39,131,.07);
  --weiss:#fff;
  --schatten:0 6px 22px rgba(24,26,48,.10);
  --schatten-stark:0 14px 38px rgba(24,26,48,.16);
  --radius-btn:8px;
  --radius-card:12px;
  --fokus:#312783;
  --max:1180px;
}

/* --- Reset / Grundlagen -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  font-family:'Roboto','Segoe UI',Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--tinte);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo)}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.4px}
p{margin:0 0 1em}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;border-radius:3px}
/* Auf dunklen Flaechen waere der indigo Fokusrahmen fast unsichtbar
   (1,26:1 im Fussbereich). Dort deshalb weiss, das ergibt ueber 15:1. */
.site-footer :focus-visible,
.hero :focus-visible,
.page-head :focus-visible{outline-color:#fff}

.container{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.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}
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--indigo);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-btn) 0;font-weight:600;text-decoration:none}
.skiplink:focus{left:0}

/* Line-Icons: dünn, gerundet, Farbe erbt */
.ic{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px;flex:none}

/* --- Kontaktzeile -------------------------------------------------------- */
.topbar{background:var(--hell);border-bottom:1px solid var(--linie);font-size:13px;color:var(--grau)}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:8px;padding-bottom:8px}
.topbar a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:var(--indigo)}
.topbar .tb-links{display:flex;gap:22px;flex-wrap:wrap}
.topbar .ic{width:15px;height:15px}
.topbar .iso{border:1px solid var(--indigo);color:var(--indigo);padding:3px 12px;border-radius:20px;font-weight:600;font-size:11.5px;white-space:nowrap}

/* --- Kopfbereich / Navigation ------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.site-header .container{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.logo{display:inline-flex;align-items:center}
.logo img{height:44px;width:auto}
/* Navigation ohne Skript: <details> uebernimmt das Auf- und Zuklappen.
   Auf grossen Bildschirmen soll die Navigation immer offen stehen. Browser
   verstecken den Inhalt eines geschlossenen <details> ueber content-visibility,
   das wird hier gezielt zurueckgenommen. Auf kleinen Bildschirmen greift dann
   weiter unten wieder das normale Auf- und Zuklappen. */
/* Umschalter fuer kleine Bildschirme: versteckte Checkbox plus Label.
   Die Checkbox bleibt fuer die Tastatur erreichbar, sie ist nur optisch
   ausgeblendet.
   Auf grossen Bildschirmen ist der Umschalter funktionslos und das Label
   ausgeblendet. Er wird deshalb dort ganz entfernt, damit die Tastatur nicht
   an einer Stelle haelt, an der nichts zu sehen ist. Der gestapelte Block
   weiter unten schaltet ihn fuer kleine Bildschirme wieder ein. */
.menue-schalter{display:none;position:absolute;width:1px;height:1px;opacity:0;margin:0;
  clip:rect(0,0,0,0);clip-path:inset(50%)}
.mainnav>ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center}
.mainnav a{font-size:14.5px;font-weight:500;color:var(--tinte);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.mainnav a:hover{color:var(--indigo);border-bottom-color:var(--linie)}
.mainnav a[aria-current="page"]{color:var(--rot);border-bottom-color:var(--rot);font-weight:600}

/* Alle Menuepunkte auf eine Linie.
   Die normalen Punkte sind Links, "Branchen" ist ein <summary>. Ein Link ist
   von Haus aus ein Inline-Element, und bei Inline-Elementen zaehlen Innenabstand
   und Rahmen nicht zur Layouthoehe: die <li> blieb bei 25,6 px. Das <summary>
   ist dagegen ein echter Kasten und wurde 33,2 px hoch. Das align-items:center
   der Leiste hat die beiden ungleichen Hoehen gegeneinander zentriert, dadurch
   sass "Branchen" 1,8 px zu hoch und seine Unterstreichung 1,4 px zu tief.
   Loesung: der Link bekommt denselben Kastentyp wie das <summary>. Damit
   entstehen beide Menuepunkt-Arten nach genau derselben Mechanik, naemlich als
   Zeilenkasten um eine inline-flex-Box mit gleicher Schriftgroesse, gleichem
   Innenabstand und gleichem Rahmen.

   Die naheliegende Alternative, die <li> zu Flex-Kaesten zu machen, sieht bei
   16 px genauso gut aus, taugt aber nicht: dann werden die zwei Arten nach
   zwei verschiedenen Verfahren gleich hoch, und das haelt nur zufaellig.
   Gemessen bei einer im Browser erhoehten Mindestschriftgroesse (body 22 px):
   mit Flex-<li> laufen sie 2,50 px auseinander, mit der Regel unten bleiben
   sie bei 0. Eine erhoehte Mindestschriftgroesse ist eine gaengige Einstellung
   fuer sehschwache Nutzer, also kein Randfall.

   Bewusst OHNE Media-Block, also als Grundregel. Ein Block ab 761 px haette
   eine Luecke gelassen: "bis 760" und "ab 761" decken zusammen nicht alles ab,
   bei einer Fensterbreite von 760,5 px greift keiner von beiden. Solche
   gebrochenen Breiten entstehen bei Browser-Zoom und auf Bildschirmen mit
   gebrochener Pixeldichte, dort waere der Versatz zurueckgewesen.
   Der gestapelte Block weiter unten nimmt die Zeile gezielt zurueck. */
.mainnav>ul>li>a{display:inline-flex;align-items:center}

/* Branchen-Untermenue, ebenfalls als <details> */
.mainnav li{position:relative}
.branchen{position:relative}
.untermenue-schalter{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;
  color:var(--tinte);padding:4px 0;cursor:pointer;border-bottom:2px solid transparent;
  list-style:none;user-select:none}
.untermenue-schalter::-webkit-details-marker{display:none}
/* Beim Ueberfahren bekommen die vier Links eine graue Unterstreichung. Das
   <summary> muss dasselbe tun, sonst faerbt sich Branchen als einziger Punkt
   nur um. Jetzt, wo alle Punkte auf einer Linie stehen, faellt das auf. */
.untermenue-schalter:hover{color:var(--indigo);border-bottom-color:var(--linie)}
.pfeil-runter{width:13px;height:13px;transform:rotate(90deg);transition:transform .18s}
.branchen[open] .pfeil-runter{transform:rotate(-90deg)}
.hat-untermenue.branche-aktiv .untermenue-schalter{color:var(--rot);border-bottom-color:var(--rot);font-weight:600}
.branchen:not([open]) .untermenue{display:none}
.mainnav .untermenue{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);min-width:262px;
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius-card);box-shadow:var(--schatten-stark);
  padding:8px;display:flex;flex-direction:column;gap:0;margin:0;list-style:none;z-index:20;
  content-visibility:visible}
.mainnav .untermenue li{border:0}
.untermenue a{display:block;padding:10px 13px;border-radius:7px;font-size:14.5px;border-bottom:0;white-space:nowrap}
.untermenue a:hover{background:var(--hell);border-bottom:0}
.untermenue a[aria-current="page"]{background:var(--tint-i);border-bottom:0}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:1px solid var(--linie);border-radius:var(--radius-btn);cursor:pointer;
  padding:0;align-items:center}
.burger span:not(.sr-only){width:22px;height:2px;background:var(--tinte);border-radius:2px;
  transition:transform .2s,opacity .2s}
.menue-schalter:checked~.burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menue-schalter:checked~.burger span:nth-child(2){opacity:0}
.menue-schalter:checked~.burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menue-schalter:focus-visible~.burger{outline:3px solid var(--fokus);outline-offset:2px}

/* --- Buttons ------------------------------------------------------------- */
a.cta,.cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:var(--radius-btn);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.cta .ic{width:18px;height:18px}
a.cta-prim,.cta-prim{background:var(--rot);color:#fff}
a.cta-prim:hover,.cta-prim:hover{background:var(--rot-dunkel);color:#fff}
a.cta-ghost,.cta-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff}
a.cta-ghost:hover,.cta-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
a.cta-line,.cta-line{background:transparent;border-color:var(--linie);color:var(--tinte)}
a.cta-line:hover,.cta-line:hover{border-color:var(--indigo);color:var(--indigo)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* --- Startseiten-Hero ---------------------------------------------------- */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(460px,66vh,660px);overflow:hidden;background:#141620}
.hero-media{position:absolute;inset:0}
/* 70% waagerecht: rueckt den Bildausschnitt nach rechts, damit Gaebler neben
   dem Textblock steht und nicht dahinter.
   40% statt center senkrecht: der Hero ist ein flaches Band, ab etwa 1280 px
   Fensterbreite wird oben und unten abgeschnitten, und zwar umso mehr, je
   breiter der Bildschirm ist. Bei 2560 px sind nur noch 297 von 720 Zeilen
   sichtbar, mittig zentriert lag die Oberkante dann genau auf dem Kopf.
   40% verschiebt den Ausschnitt nach oben und laesst wieder Luft darueber.
   Unter 1280 px gibt es senkrecht keinen Ueberhang, dort aendert der Wert
   nichts, Handy und Tablet bleiben also unveraendert. */
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:70% 40%}
/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt das
   Standbild statt des laufenden Videos. Das Bild wird hier als Hintergrund
   gesetzt, weil das <video> selbst ausgeblendet wird. Ohne JavaScript ist das
   der einzige Weg, die Bewegung wirklich anzuhalten. */
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero-media{background-image:url(../img/hero-poster.jpg);
    background-size:cover;background-position:70% 40%;background-repeat:no-repeat}
}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,22,32,.92) 0%,rgba(20,22,32,.74) 42%,rgba(20,22,32,.22) 74%,rgba(20,22,32,0) 100%)}
.hero .container{position:relative;z-index:2;width:100%;padding-top:52px;padding-bottom:52px}
.hero-box{max-width:620px;color:#fff}
.kicker{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:#d7d8e2;margin-bottom:16px}
.kicker::before{content:"";width:26px;height:2px;background:var(--rot);flex:none}
.hero h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.9px;margin-bottom:16px}
.hero-lead{font-size:clamp(15px,1.6vw,17px);line-height:1.65;color:#dcdde5;max-width:540px;margin-bottom:28px}

/* --- Unterseiten-Kopf: Bild als Hintergrund, abgedunkelt ---------------- */
.page-head{position:relative;background:#141620;color:#fff;overflow:hidden;
  display:flex;align-items:flex-end;min-height:clamp(260px,34vw,400px)}
.page-head .ph-media{position:absolute;inset:0}
.page-head .ph-media img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.page-head .ph-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,18,28,.62) 0%,rgba(16,18,28,.72) 45%,rgba(16,18,28,.9) 100%)}
.page-head .container{position:relative;z-index:2;width:100%;
  padding-top:clamp(40px,6vw,66px);padding-bottom:clamp(30px,4vw,44px)}
.page-head .kicker{color:#e2e3ee;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.page-head h1{font-size:clamp(28px,4.4vw,42px);font-weight:800;margin-bottom:12px;
  text-shadow:0 2px 18px rgba(0,0,0,.55)}
.page-head p{font-size:clamp(14.5px,1.55vw,17px);color:#e8e9f1;max-width:660px;margin:0;
  text-shadow:0 1px 12px rgba(0,0,0,.6)}
/* Fallback ohne Bild: einfarbig indigo */
.page-head.ohne-bild{background:var(--indigo);min-height:0;display:block}
.page-head.ohne-bild::after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;
  border:34px solid rgba(255,255,255,.05);border-radius:50%}
.page-head.ohne-bild h1,.page-head.ohne-bild p,.page-head.ohne-bild .kicker{text-shadow:none}
.page-head.ohne-bild .kicker{color:#c9c9e8}
.page-head.ohne-bild p{color:#dcdcf0}

/* --- Infografik: Ablauf in Schritten ------------------------------------ */
.infografik{background:var(--hell);border:1px solid var(--linie);border-radius:var(--radius-card);
  padding:26px 24px}
.infografik .ig-kopf{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.infografik .ig-kopf .ic{width:20px;height:20px;color:var(--rot)}
.infografik h2,.infografik .ig-titel{font-size:17px;font-weight:800;color:var(--indigo);margin:0;letter-spacing:-.2px;line-height:1.25}
.infografik .ig-sub{font-size:13px;color:var(--grau);margin:0 0 20px;line-height:1.5}
.ablauf{list-style:none;margin:0;padding:0;position:relative}
.ablauf>li{position:relative;padding:0 0 22px 52px}
.ablauf>li:last-child{padding-bottom:0}
/* Verbindungslinie */
.ablauf>li::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;
  background:var(--linie);transform-origin:top center}
.ablauf>li:last-child::before{display:none}
.ablauf .nr{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--weiss);border:2px solid var(--indigo);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.ablauf li.hebt .nr{background:var(--rot);border-color:var(--rot);color:#fff}

/* Die Infografiken sind bewusst statisch. Sie waren zwischenzeitlich
   scroll-animiert, das wurde auf Wunsch wieder entfernt. */

/* --- Kontakt-Karte im Einstiegsblock ------------------------------------ */
.cta-karte{margin-top:30px;background:var(--weiss);border:1px solid var(--linie);
  border-left:3px solid var(--rot);border-radius:var(--radius-card);padding:22px 24px}
.cta-karte h2,.cta-karte .ct-titel{font-size:17px;font-weight:800;color:var(--indigo);
  margin:0 0 6px;letter-spacing:-.2px}
.cta-karte .ct-text{font-size:14px;color:var(--grau);line-height:1.55;margin:0 0 16px}
.cta-karte .ct-wege{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 18px;padding:0}
.cta-karte .ct-wege li{display:flex;align-items:center;gap:9px;font-size:14.5px}
.cta-karte .ct-wege a{color:var(--tinte);text-decoration:none;font-weight:600}
.cta-karte .ct-wege a:hover{color:var(--indigo);text-decoration:underline}
.cta-karte .ct-wege .ic{width:17px;height:17px;color:var(--indigo);flex:none}
.cta-karte .cta{font-size:14.5px;padding:12px 22px}
.ablauf b{display:block;font-size:14.5px;font-weight:700;color:var(--tinte);margin:8px 0 3px}
.ablauf span{display:block;font-size:13px;color:var(--grau);line-height:1.5}
.infografik .ig-fuss{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--linie);
  font-size:12.5px;color:var(--grau);line-height:1.5;display:flex;gap:10px;align-items:flex-start}
.infografik .ig-fuss .ic{width:16px;height:16px;color:var(--indigo);margin-top:2px;flex:none}

/* --- Kennzahlen-Infografik ---------------------------------------------- */
.kennzahlen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.kennzahlen div{background:var(--weiss);border:1px solid var(--linie);border-radius:9px;padding:15px 14px}
.kennzahlen .ic{width:22px;height:22px;color:var(--indigo);margin-bottom:9px}
.kennzahlen b{display:block;font-size:14px;font-weight:700;margin-bottom:2px}
.kennzahlen small{font-size:12px;color:var(--grau);line-height:1.45;display:block}

/* --- FAQ ---------------------------------------------------------------- */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--linie);padding:20px 0}
.faq-item:first-of-type{border-top:1px solid var(--linie)}
.faq-item h3{font-size:17px;font-weight:700;color:var(--indigo);margin-bottom:9px;
  display:flex;gap:11px;align-items:flex-start}
.faq-item h3 .q{flex:none;width:24px;height:24px;border-radius:6px;background:var(--tint-i);
  color:var(--indigo);display:flex;align-items:center;justify-content:center;font-size:12.5px;
  font-weight:800;margin-top:1px}
.faq-item p{font-size:15px;color:#3b3f47;line-height:1.65;margin:0 0 0 35px}
/* Mehrteilige Antworten: Abstand zwischen den Absaetzen, sonst kleben sie. */
.faq-item p + p{margin-top:11px}
.breadcrumb{font-size:12.5px;color:var(--grau);border-bottom:1px solid var(--linie);background:var(--hell)}
.breadcrumb .container{padding-top:10px;padding-bottom:10px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.breadcrumb li+li::before{content:"›";margin-right:8px;color:var(--grau-hell)}
.breadcrumb a{color:var(--grau);text-decoration:none}
.breadcrumb a:hover{color:var(--indigo);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--tinte);font-weight:500}

/* --- Zielgruppen-Band ---------------------------------------------------- */
.zielgruppen{border-bottom:1px solid var(--linie);background:var(--weiss)}
.zg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;list-style:none}
.zg-grid li{border-right:1px solid var(--linie)}
.zg-grid li:last-child{border-right:0}
.zg-grid a{display:flex;flex-direction:column;gap:11px;padding:24px 18px;text-decoration:none;color:inherit;height:100%;transition:background .18s}
.zg-grid a:hover{background:var(--hell)}
.zg-grid a[aria-current="page"]{background:var(--hell)}
.zg-grid a[aria-current="page"] .icobox{background:var(--rot);color:#fff}
.zg-grid a[aria-current="page"] b{color:var(--indigo)}
.icobox{width:48px;height:48px;border-radius:11px;background:var(--tint-i);color:var(--indigo);display:flex;align-items:center;justify-content:center;flex:none}
.zg-grid b{font-size:15px;font-weight:700;display:block;margin-bottom:2px}
.zg-grid small{font-size:12.5px;color:var(--grau);line-height:1.45;display:block}

/* --- Abschnitte ---------------------------------------------------------- */
.section{padding:clamp(44px,6vw,76px) 0}
.section-hell{background:var(--hell)}
.section-head{max-width:720px;margin:0 auto 34px;text-align:center}
.section-head .ey{font-size:12px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--rot);display:block}
.section-head h2{font-size:clamp(23px,3.4vw,31px);font-weight:800;color:var(--indigo);margin:9px 0 0}
.section-head p{font-size:15.5px;color:var(--grau);margin:10px 0 0}

/* --- Fehlerseite: Wege zurueck in den Inhalt ---------------------------- */
.fehler-ziele{list-style:none;margin:22px 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.fehler-ziele a{display:block;padding:15px 17px;border:1px solid var(--linie);
  border-radius:var(--radius-card);text-decoration:none;background:#fff;
  transition:border-color .15s,box-shadow .15s}
.fehler-ziele a:hover{border-color:var(--indigo);box-shadow:var(--schatten)}
.fehler-ziele b{display:block;color:var(--indigo);font-size:15.5px;margin-bottom:3px}
.fehler-ziele small{display:block;color:var(--grau);font-size:13px;line-height:1.5}

/* --- Foto in der rechten Spalte, wo sonst die Infografik steht ---------- */
.seitenfoto{margin:0;border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--schatten);background:var(--hell)}
.seitenfoto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.seitenfoto figcaption{padding:12px 16px;font-size:13px;line-height:1.5;color:var(--grau)}

/* --- Unternehmensvideo als Seiteninhalt --------------------------------- */
/* Nicht zu verwechseln mit dem Hintergrundvideo im Hero. Dieses hier hat
   Bedienelemente, Ton und wird vom Besucher selbst gestartet.
   aspect-ratio haelt den Platz frei, bevor das Video geladen ist. Ohne das
   springt das Layout beim Laden, und genau das bewertet Google negativ. */
.film-rahmen{max-width:900px;margin:0 auto;border-radius:var(--radius-card);
  overflow:hidden;background:#141620;box-shadow:var(--schatten-stark)}
.film{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#141620}
.film-platzhalter{aspect-ratio:16/9;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:24px;color:#c9cbd4;font-size:14px;line-height:1.6;
  border:2px dashed rgba(255,255,255,.22)}
.film-platzhalter strong{color:#fff}
.film-platzhalter code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:13px;background:rgba(255,255,255,.10);padding:2px 6px;border-radius:4px}
.film-platzhalter p{margin:0}
.section-head.links{text-align:left;margin-left:0}

/* --- Karten -------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-card);padding:24px 21px;display:flex;flex-direction:column}
.card .icobox{margin-bottom:15px}
.card h3{font-size:16.5px;font-weight:700;margin-bottom:7px}
.card p{font-size:13.5px;color:var(--grau);line-height:1.55;margin:0}
.card .bar{width:28px;height:2px;background:var(--rot);border-radius:2px;margin-top:15px}
.card-link{text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s,transform .18s}
.card-link:hover{border-color:#cfd3de;box-shadow:var(--schatten);transform:translateY(-2px)}
.card-more{margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:600;color:var(--rot);display:inline-flex;align-items:center;gap:7px}
.card-more .ic{width:15px;height:15px}

/* --- Fließtext ----------------------------------------------------------- */
.prose{max-width:760px}
.prose h2{font-size:clamp(21px,3vw,27px);color:var(--indigo);font-weight:800;margin:34px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;font-weight:700;margin:26px 0 9px}
.prose p{font-size:16px;color:#3b3f47;line-height:1.7}
.prose strong{color:var(--tinte)}
.prose a:not(.cta){color:var(--indigo);text-underline-offset:2px}

/* --- Geräte-/Leistungslisten --------------------------------------------- */
.checklist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:11px 26px}
.checklist-1{grid-template-columns:1fr}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:#3b3f47}
.checklist .ic{width:19px;height:19px;color:var(--rot);margin-top:2px;stroke-width:2.1}
.hinweis{margin-top:18px;padding:14px 17px;background:var(--hell);border-left:3px solid var(--indigo);border-radius:0 6px 6px 0;font-size:13.5px;color:var(--grau);line-height:1.55}
.hinweis strong{color:var(--tinte)}

/* --- Zwei-Spalter -------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,54px);align-items:start}
.split.mitte{align-items:center}
.split img{border-radius:var(--radius-card);box-shadow:var(--schatten)}

/* --- Vertrauensleiste ---------------------------------------------------- */
.trust{background:var(--hell);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.trust .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;padding-top:26px;padding-bottom:26px}
.trust-item{display:flex;gap:13px;align-items:flex-start;flex:1 1 240px}
.trust-item .ic{color:var(--indigo);width:26px;height:26px;margin-top:1px}
.trust-item b{display:block;font-size:15px;margin-bottom:2px}
.trust-item small{font-size:12.5px;color:var(--grau);line-height:1.5}

/* --- Kontakt-Streifen ---------------------------------------------------- */
.kontaktband{background:var(--weiss);border-top:1px solid var(--linie)}
.kontaktband .container{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;
  padding-top:clamp(32px,4vw,50px);padding-bottom:clamp(32px,4vw,50px)}
.kontaktband h2{font-size:clamp(21px,2.8vw,26px);color:var(--indigo);font-weight:800;margin-bottom:7px}
.kontaktband p{font-size:15px;color:var(--grau);max-width:470px;margin:0}
.kontaktliste{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15.5px}
.kontaktliste li{display:flex;align-items:center;gap:11px}
.kontaktliste a{color:var(--tinte);text-decoration:none}
.kontaktliste a:hover{color:var(--indigo);text-decoration:underline}
.kontaktliste .ic{width:18px;height:18px;color:var(--indigo)}
.kontaktliste .adr{color:var(--grau);font-size:14px}

/* --- Fußbereich ---------------------------------------------------------- */
.site-footer{background:var(--tinte);color:#a7abb5;font-size:14px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-top:44px;padding-bottom:34px}
.site-footer h3{color:#fff;font-size:14px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:8px}
.site-footer a{color:#a7abb5;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .f-logo{background:#fff;border-radius:8px;padding:10px 13px;display:inline-block;margin-bottom:15px}
.site-footer .f-logo img{height:38px}
.site-footer .f-about{font-size:13.5px;line-height:1.65;max-width:330px}
/* B2B-Hinweis: leiser als der Beschreibungstext darueber, aber klar lesbar.
   Kein Grau unter dem Kontrastwert, das ist eine rechtlich relevante Angabe. */
.site-footer .f-b2b{font-size:12.5px;line-height:1.6;max-width:330px;margin-top:14px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.12);color:#a7abb5}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;
  align-items:center;gap:14px 22px;flex-wrap:wrap;padding-top:16px;padding-bottom:20px;font-size:12.5px}
.footer-bottom ul{display:flex;gap:20px}
/* Der Aussenabstand aus Zeile 361 ist in dieser Zeile toter Raum: er macht die
   Liste 28 statt 20 px hoch, und das align-items:center des Streifens kippt sie
   dadurch 4 px nach oben gegen das Copyright und die Webdesign-Zeile. Derselbe
   Fehlertyp wie im Hauptmenue, nur an einer Stelle, die auf jeder Seite steht. */
.footer-bottom li{margin-bottom:0}
.footer-bottom .urheber{color:#7d818b}
.footer-bottom .urheber a{color:#a7abb5;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.footer-bottom .urheber a:hover{color:#fff;border-bottom-color:#fff;text-decoration:none}

/* --- Tabellen (Kontakt/Impressum) ---------------------------------------- */
.datentabelle{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 20px}
.datentabelle th,.datentabelle td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
.datentabelle th{width:36%;font-weight:600;color:var(--tinte)}
.datentabelle td{color:#3b3f47}

/* --- Offene Punkte (nur bis zum Livegang sichtbar) ----------------------- */
mark.offen{background:#fff3cd;color:#7a5900;border:1px dashed #d9a400;border-radius:4px;
  padding:2px 7px;font-size:.92em;font-weight:600}
/* Liste offener Kundenangaben. Kein Aufzaehlungspunkt, die gelbe Markierung
   ist deutlich genug, und die Zeilen sollen bei Umbruch sauber einruecken. */
.offen-liste{list-style:none;margin:14px 0 0;padding:0}
.offen-liste li{margin-bottom:9px;line-height:1.6}
.offen-liste mark.offen{display:inline-block}

/* --- Video-Platzhalter (Zwei-Klick, für spätere Vimeo-Einbindung) -------- */
.videowrap{position:relative;background:#141620;border-radius:var(--radius-card);overflow:hidden}
.consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:26px;background:rgba(20,22,32,.86);color:#fff}
.consent p{font-size:14px;max-width:430px;color:#dcdde5;margin:0}

/* ==========================================================================
   Umbrüche
   ========================================================================== */
@media(max-width:1040px){
  .zg-grid{grid-template-columns:repeat(3,1fr)}
  .zg-grid li:nth-child(3){border-right:0}
  .zg-grid li:nth-child(-n+3){border-bottom:1px solid var(--linie)}
}
@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:26px}
  .page-head{min-height:230px}
}
@media(max-width:760px){
  .topbar .iso{display:none}
  .topbar .tb-links{gap:16px;font-size:12.5px}

  /* Mobil: Der Burger klappt die Navigation auf und zu. */
  .burger{display:flex}
  /* Hier wird der Umschalter gebraucht, oben ist er ausgeschaltet. */
  .menue-schalter{display:block}
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
    box-shadow:var(--schatten);z-index:30}
  .menue-schalter:checked~.mainnav{display:block}
  .mainnav>ul{flex-direction:column;gap:0;align-items:stretch;padding:8px clamp(18px,4vw,44px) 16px}
  /* Die Grundregel fuer die Leiste hier gezielt zuruecknehmen, sonst schrumpft
     der Menuepunkt auf Textbreite und die Tippflaeche geht von der vollen
     Zeilenbreite auf die Wortbreite zurueck. Die Zeile braucht dieselbe
     Schreibweise mit >, sonst gewinnt die Grundregel: ".mainnav a" ist
     schwaecher als ".mainnav>ul>li>a" und kaeme gegen sie nicht an, egal wie
     weit unten sie steht. */
  .mainnav>ul>li>a{display:block}
  .mainnav>ul>li{border-bottom:1px solid var(--linie)}
  .mainnav>ul>li:last-child{border-bottom:0}
  .mainnav a{display:block;padding:14px 0;font-size:16px;border-bottom:0}
  .mainnav a[aria-current="page"]{border-bottom:0}

  /* Untermenue mobil: aufklappbare Gruppe statt schwebendes Menue */
  .untermenue-schalter{width:100%;justify-content:space-between;padding:14px 0;font-size:16px;border-bottom:0}
  .mainnav .untermenue{position:static;transform:none;min-width:0;border:0;box-shadow:none;
    padding:0 0 10px 0;background:transparent;border-radius:0}
  .untermenue a{padding:11px 0 11px 16px;border-left:2px solid var(--linie);border-radius:0;font-size:15px;white-space:normal}
  .untermenue a:hover{background:transparent;border-left-color:var(--indigo)}
  .untermenue a[aria-current="page"]{background:transparent;border-left-color:var(--rot);color:var(--rot);font-weight:600}

  /* Hero mobil: Bild oben, Textblock nahtlos darunter. Immer lesbar,
     unabhaengig davon, ueber wie viele Zeilen die Ueberschrift laeuft. */
  .hero{display:block;min-height:0;background:#141620}
  .hero-media{position:relative;height:300px}
  .hero-veil{inset:0 0 auto 0;height:300px;
    background:linear-gradient(180deg,rgba(20,22,32,.14) 0%,rgba(20,22,32,.48) 58%,#141620 100%)}
  .hero .container{padding-top:26px;padding-bottom:34px;background:#141620}
  .hero-box{max-width:none}
  .hero h1{margin-bottom:14px}
  .hero-lead{max-width:none;margin-bottom:24px}
  .cta{width:100%}

  .zg-grid{grid-template-columns:1fr}
  .zg-grid li{border-right:0;border-bottom:1px solid var(--linie)}
  .zg-grid li:last-child{border-bottom:0}
  .zg-grid a{flex-direction:row;align-items:center;gap:14px;padding:17px 0}

  .cards{grid-template-columns:1fr}
  .checklist{grid-template-columns:1fr}
  .kontaktband .container{flex-direction:column;align-items:flex-start}
  .footer-top{grid-template-columns:1fr;gap:24px;padding-top:34px}
  .footer-bottom{flex-direction:column;gap:10px}
  .footer-bottom ul{flex-wrap:wrap;gap:14px}
  .datentabelle th{width:auto;display:block;border-bottom:0;padding-bottom:0}
  .datentabelle td{display:block;padding-top:2px}

  .page-head{min-height:0;display:block}
  .page-head .ph-media{position:relative;height:190px}
  .page-head .ph-veil{inset:0 0 auto 0;height:190px;
    background:linear-gradient(180deg,rgba(16,18,28,.3) 0%,rgba(16,18,28,.55) 60%,#141620 100%)}
  .page-head .container{padding-top:20px;padding-bottom:28px;background:#141620}
  .infografik{padding:22px 18px}
  .kennzahlen{grid-template-columns:1fr}
  .faq-item p{margin-left:0}
}

/* --- Druck --------------------------------------------------------------- */
@media print{
  .topbar,.burger,.site-header,.kontaktband .cta,.skiplink{display:none!important}
  body{font-size:11pt;color:#000}
  .hero{min-height:0}
  .hero-veil{background:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}