/* ==========================================================================
   IT-Reinbek – Stylesheet (Onepage)
   Farben unverändert von it-reinbek.de · Schrift: Roboto
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:86px}

/* --------------------------------------------------------------------------
   1. TOKENS – Dunkelmodus (Standard)
   -------------------------------------------------------------------------- */
:root{
  --bg:#121212;
  --surface:#181f24;
  --card:#1b2730;
  --card-2:#20303b;
  --line:#263743;
  --primary:#216477;
  --primary-lt:#2f9ab5;
  --primary-dk:#184e5c;
  --text:#e6f0f6;
  --muted:#8ba9bc;
  --green:#198754;
  --tint:rgba(33,100,119,.14);
  --tint-line:rgba(33,100,119,.32);

  --sh-1:0 2px 10px rgba(0,0,0,.28);
  --sh-2:0 14px 44px rgba(0,0,0,.36);
  --glow:0 0 34px rgba(33,100,119,.25);
  --img-op:.15;
  --img-fx:grayscale(58%) brightness(.55) contrast(1.06);

  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-pill:100px;

  --wrap:1200px;
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  --dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23216477' fill-opacity='.16'/%3E%3C/svg%3E");
  --grid-line:rgba(33,100,119,.07);
}

/* Hellmodus – weich und luftig (Anleihe „Bloom“) */
html[data-theme="light"]{
  --bg:#f2f6f8;
  --surface:#ffffff;
  --card:#ffffff;
  --card-2:#eef4f7;
  --line:#dae4ec;
  --primary:#216477;
  --primary-lt:#2a8ba5;
  --primary-dk:#164654;
  --text:#0e1a24;
  --muted:#5a6f80;
  --green:#198754;
  --tint:rgba(33,100,119,.07);
  --tint-line:rgba(33,100,119,.20);

  --sh-1:0 2px 12px rgba(20,45,60,.06);
  --sh-2:0 16px 46px rgba(20,45,60,.10);
  --glow:0 0 30px rgba(33,100,119,.15);
  --img-op:.11;
  --img-fx:grayscale(30%) brightness(1.03) contrast(.97);

  --dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23216477' fill-opacity='.10'/%3E%3C/svg%3E");
  --grid-line:rgba(33,100,119,.05);
}

body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;font-weight:400;line-height:1.7;
  overflow-x:hidden;max-width:100vw;-webkit-font-smoothing:antialiased;
  transition:background .32s ease,color .32s ease;
}
img{max-width:100%;display:block}
a{color:var(--primary-lt);text-decoration:none;transition:color .18s}
a:hover{color:var(--primary)}
button{font-family:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.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}

/* --------------------------------------------------------------------------
   2. TYPOGRAFIE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.4px;line-height:1.18;color:var(--text)}
h1{font-size:clamp(34px,5.4vw,60px);font-weight:500;letter-spacing:-1.6px;line-height:1.06}
h2{font-size:clamp(27px,3.9vw,42px);letter-spacing:-1px;margin-bottom:16px}
h3{font-size:20px;margin-bottom:9px}
.grad{
  background:linear-gradient(120deg,var(--primary-lt) 0%,var(--primary) 58%,var(--primary-dk) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--primary-lt);margin-bottom:14px;
}
.eyebrow::before{content:'';width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--primary-lt),transparent)}
.lead{font-size:17px;color:var(--muted);line-height:1.85;max-width:640px;font-weight:300}
.sec-head{margin-bottom:52px;max-width:720px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.mid .eyebrow{justify-content:center}
.sec-head.mid .eyebrow::before{display:none}
.sec-head.mid .lead{margin-left:auto;margin-right:auto}

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:none;border-radius:var(--r-pill);padding:14px 30px;
  font-size:15px;font-weight:500;cursor:pointer;line-height:1.3;text-align:center;
  transition:transform .2s cubic-bezier(.34,1.4,.64,1),box-shadow .24s,background .2s,color .2s,border-color .2s;
}
.btn i{font-size:18px}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-lt));color:#fff;box-shadow:0 5px 20px rgba(33,100,119,.4)}
.btn-primary:hover{color:#fff;box-shadow:0 9px 32px rgba(33,100,119,.58);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--line);padding:12.5px 28px}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary-lt);background:var(--tint);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--primary);box-shadow:0 5px 20px rgba(0,0,0,.18)}
.btn-white:hover{color:var(--primary-dk);transform:translateY(-2px);box-shadow:0 9px 30px rgba(0,0,0,.26)}
.btn-sm{padding:10px 22px;font-size:14px}
.btn-sm i{font-size:16px}
.btn-block{width:100%}

/* --------------------------------------------------------------------------
   4. TOPBAR + KOPFZEILE
   -------------------------------------------------------------------------- */
.topbar{background:linear-gradient(90deg,var(--primary-dk),var(--primary) 55%,#1e7f93);color:#fff;font-size:13.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:22px;padding:9px 26px;flex-wrap:wrap}
.topbar a{color:#fff;display:inline-flex;align-items:center;gap:7px;font-weight:300}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar .sep{opacity:.38}

.site-header{
  position:sticky;top:0;z-index:900;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid var(--line);transition:background .3s,border-color .3s,box-shadow .3s;
}
.site-header.scrolled{box-shadow:var(--sh-1)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:15px;padding-bottom:15px;gap:20px}

/* Kopfzeile und Topbar: der HINTERGRUND spannt sich über die volle
   Bildschirmbreite (siehe Viewport-Breakout weiter unten), der INHALT
   (Logo, Menü, Buttons) nutzt aber bewusst dieselbe Spaltenbreite wie
   Hero und alle übrigen Abschnitte (.wrap: max-width 1200px, zentriert,
   26px Innenabstand) - dadurch sitzt das Logo exakt auf derselben Höhe
   wie z. B. "Schnell." im Hero-Text, und der letzte Menüpunkt endet
   exakt auf Höhe des rechten Bildrands. Keine eigene Breiten-Regel mehr
   nötig - .topbar .wrap und .site-header .wrap übernehmen einfach die
   Basis-Werte der normalen .wrap-Klasse ohne Überschreibung.

   Reihenfolge der Kopfzeilen-Elemente: Logo links, danach Umschalter +
   "Beratung anfragen", und ganz rechts die Hauptnavigation - deren
   letzter Punkt so am rechten Rand endet. */
.site-header .head-act{order:2}
.site-header .nav{order:3}

/* Dauerhafte Absicherung gegen Elementors eigene Container-Breite:
   Elementor wickelt eingefügtes HTML in einen eigenen Container mit
   fester Höchstbreite ("Boxed"). Diese Einstellung ist nur am Container
   selbst gespeichert, NICHT an unserem Inhalt - wird das HTML-Widget
   künftig komplett neu befüllt (Inhalt löschen und neu einfügen), kann
   Elementor den Container dabei stillschweigend auf die Standardbreite
   zurücksetzen, ohne dass irgendetwas an unserem Code sich geändert hat.
   Statt auf Elementors internen Klassennamen zu raten (der sich je nach
   Version/Konfiguration unterscheiden kann), sprengen Topbar und Kopfzeile
   ihren Elternrahmen direkt über die klassische Viewport-Breakout-Technik:
   Das Element wird exakt auf Bildschirmbreite gesetzt und über einen
   negativen Rand so verschoben, dass es unabhängig von der Breite oder
   dem Innenabstand JEDES umschließenden Containers randständig sitzt -
   ganz gleich, wie Elementor diesen Container intern benennt oder
   einschränkt. Voraussetzung: body{overflow-x:hidden} (bereits gesetzt),
   damit die kurzzeitige Verbreiterung auf 100vw kein horizontales
   Scrollen auslöst. */
/* Kein Viewport-Breakout mehr (width:100vw + negativer Rand) - diese
   Technik kann auf echten Mobilgeräten einige Pixel echten horizontalen
   Überlauf erzeugen, der sich per Wisch-Geste "aufdecken" lässt, auch
   wenn er im Emulator unsichtbar bleibt. Da die Elementor-Container über
   die :has()-Regel weiter unten bereits zuverlässig auf 100% Breite
   erzwungen sind, genügt hier ganz normales width:100% ohne
   Viewport-Einheiten - sicherer und ohne das Überlauf-Risiko. */
.topbar,
.site-header{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

body:has(.topbar) .elementor-element:has(> .topbar),
body:has(.site-header) .elementor-element:has(> .site-header),
body:has(main) .elementor-element:has(> main),
.e-con:has(> .topbar),
.e-con:has(> .site-header),
.e-con:has(> main){
  max-width:none!important;
  width:100%!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Falls Elementor an einem umschließenden Container einen eigenen
   "transform" setzt (etwa für Sticky- oder Animations-Effekte), würde das
   einen neuen Bezugsrahmen für alle "position:fixed"-Elemente darin
   erzeugen - unser mobiles Menü, der Abdunklungs-Hintergrund dahinter und
   der "Nach oben"-Button wären dann nicht mehr am Bildschirm fixiert,
   sondern nur noch am transformierten Elternelement, was zu genau der Art
   von seltsamem, "mitscrollendem" Verhalten führt, die auf dem Screenshot
   zu sehen war. Da unser gesamter Seiteninhalt in Elementor-Containern
   dieser Klasse steckt, ist das Entfernen hier ohne Nebenwirkungen. */
.elementor-element{transform:none!important}
/* --- Wortmarke / Logo --------------------------------------------------
   Originaldatei: 2560 x 746 Pixel (Seitenverhältnis 3,43 : 1).
   Gesteuert wird ausschließlich über die Höhe; die Breite ergibt sich
   aus dem Seitenverhältnis. width/height im HTML verhindern Umbrüche
   beim Laden.
   --------------------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:500;letter-spacing:-.6px;color:var(--primary-lt);flex-shrink:0}
.brand:hover{color:var(--primary-lt)}
.brand b{font-weight:500;color:var(--text)}
.brand img{
  height:42px;width:auto;max-width:none;
  aspect-ratio:2560 / 746;
  object-fit:contain;
  transition:height .34s cubic-bezier(.22,.61,.36,1),filter .3s ease,opacity .3s ease;
}
/* Der Schriftzug entfällt, sobald das Logo geladen ist */
.brand-text{display:none}
.brand:not(:has(img)) .brand-text{display:inline}

/* Im Dunkelmodus etwas aufhellen, damit dunkle Logoanteile lesbar bleiben.
   Falls das Logo bereits hell ist, diese Regel entfernen. */
html[data-theme="dark"] .brand img{filter:brightness(1.12) contrast(1.04)}

.nav ul{display:flex;gap:30px;list-style:none;align-items:center}
.nav a{font-size:15px;font-weight:400;color:var(--muted);position:relative;padding:5px 0}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;background:var(--primary-lt);transition:width .26s cubic-bezier(.34,1.2,.64,1)}
.nav a:hover,.nav a.active{color:var(--text)}
.nav a:hover::after,.nav a.active::after{width:100%}

.head-act{display:flex;align-items:center;gap:11px}
.tgl{
  background:var(--card);border:1px solid var(--line);border-radius:50%;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;font-size:19px;
  transition:border-color .2s,color .2s,transform .32s cubic-bezier(.34,1.4,.64,1),background .2s;
}
.tgl:hover{border-color:var(--primary);color:var(--primary-lt);transform:rotate(28deg)}
.tgl .i-sun{display:none}
html[data-theme="light"] .tgl .i-moon{display:none}
html[data-theme="light"] .tgl .i-sun{display:block}

.burger{
  display:none;background:var(--card);border:1px solid var(--line);border-radius:50%;
  width:42px;height:42px;align-items:center;justify-content:center;color:var(--text);
  cursor:pointer;font-size:21px;
}
.veil{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.58);z-index:880;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.veil.on{opacity:1;visibility:visible}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:var(--img-fx);opacity:var(--img-op)}
.hero-fx{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 32%,rgba(33,100,119,.24) 0%,transparent 62%),
    radial-gradient(ellipse 50% 45% at 10% 82%,rgba(25,135,84,.08) 0%,transparent 55%),
    var(--dots);
}
.hero-grid-lines{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,#000 20%,transparent 78%);
}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;padding-top:96px;padding-bottom:92px}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--tint);border:1px solid var(--tint-line);color:var(--primary-lt);
  font-size:13.5px;font-weight:500;padding:7px 18px;border-radius:var(--r-pill);margin-bottom:26px;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(25,135,84,.2)}
.hero h1{margin-bottom:8px}
.hero .sub{font-size:clamp(21px,2.7vw,30px);font-weight:300;color:var(--muted);margin-bottom:26px;letter-spacing:-.6px}
.hero .txt{font-size:17px;font-weight:300;color:var(--muted);max-width:490px;margin-bottom:38px;line-height:1.85}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-vis{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--tint-line);box-shadow:var(--sh-2),var(--glow)}
.hero-vis img{width:100%;height:430px;object-fit:cover;filter:saturate(.8) brightness(.84)}
html[data-theme="light"] .hero-vis img{filter:saturate(.94) brightness(1)}
.hero-vis::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(18,18,18,.62),transparent 52%)}
html[data-theme="light"] .hero-vis::after{background:linear-gradient(to top,rgba(14,26,36,.42),transparent 52%)}
.chip{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px;border-radius:var(--r-pill);font-size:13px;font-weight:500;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.chip.a{bottom:18px;left:18px;background:rgba(33,100,119,.93);color:#fff;border:1px solid rgba(255,255,255,.2)}
.chip.b{top:18px;right:18px;background:rgba(18,18,18,.8);color:#e6f0f6;border:1px solid rgba(255,255,255,.15)}

/* --------------------------------------------------------------------------
   6. VERTRAUENSLEISTE
   -------------------------------------------------------------------------- */
.trust{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 26px}
.trust-i{display:flex;align-items:center;gap:14px;padding:26px 22px;border-right:1px solid var(--line)}
.trust-i:last-child{border-right:none}
.trust-i i{
  font-size:23px;color:var(--primary-lt);flex-shrink:0;
  width:46px;height:46px;border-radius:14px;background:var(--tint);
  display:flex;align-items:center;justify-content:center;
}
.trust-i .t{font-size:15px;font-weight:500;color:var(--text);line-height:1.35}
.trust-i .s{font-size:13px;font-weight:300;color:var(--muted);line-height:1.4}

/* --------------------------------------------------------------------------
   7. SEKTIONEN
   -------------------------------------------------------------------------- */
.sec{padding:96px 0;position:relative}
.sec-alt{background:var(--surface)}
.sec-soft{background:var(--card-2)}

/* --------------------------------------------------------------------------
   8. LEISTUNGEN – Reiter/Karussell (Anleihe „ZeBeyond“)
   -------------------------------------------------------------------------- */
.svc{display:grid;grid-template-columns:305px 1fr;gap:34px;align-items:start;min-width:0}

/* Reiterspalte */
.svc-tabs{display:flex;flex-direction:column;gap:7px;position:sticky;top:104px}
.svc-tab{
  display:flex;align-items:center;gap:14px;width:100%;
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  padding:14px 16px;cursor:pointer;text-align:left;color:var(--muted);
  transition:background .22s,border-color .22s,color .22s,transform .22s;
  position:relative;overflow:hidden;
}
.svc-tab::before{
  content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;
  background:var(--primary-lt);transform:scaleY(0);transform-origin:center;transition:transform .28s cubic-bezier(.34,1.3,.64,1);
}
.svc-tab i{font-size:21px;flex-shrink:0;transition:transform .26s,color .22s}
.svc-tab .lbl{font-size:15.5px;font-weight:400}
.svc-tab:hover{background:var(--tint);color:var(--text);transform:translateX(3px)}
.svc-tab[aria-selected="true"]{
  background:var(--card);border-color:var(--tint-line);color:var(--text);
  box-shadow:var(--sh-1);
}
.svc-tab[aria-selected="true"]::before{transform:scaleY(1)}
.svc-tab[aria-selected="true"] i{color:var(--primary-lt);transform:scale(1.1)}
.svc-tab[aria-selected="true"] .lbl{font-weight:500}

/* Inhaltsfläche */
.svc-stage{position:relative;min-height:520px;min-width:0}
.svc-tabs + div{min-width:0}
.svc-panel{
  display:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
}
.svc-panel.on{display:block;animation:panelIn .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.svc-media{position:relative;height:230px;overflow:hidden}
.svc-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) brightness(.72);transition:transform 6s ease}
html[data-theme="light"] .svc-media img{filter:saturate(.92) brightness(.94)}
.svc-panel.on .svc-media img{transform:scale(1.06)}
.svc-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--card) 2%,rgba(27,39,48,.35) 45%,transparent 100%)}
html[data-theme="light"] .svc-media::after{background:linear-gradient(to top,var(--card) 2%,rgba(255,255,255,.4) 45%,transparent 100%)}
.svc-media .ico{display:none}
.svc-body{padding:44px 34px 36px}
.svc-body h3{font-size:26px;letter-spacing:-.6px;margin-bottom:12px}
.svc-body .desc{font-size:16px;font-weight:300;color:var(--muted);line-height:1.85;margin-bottom:26px}
.svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px}
.svc-cols h4{font-size:13px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--primary-lt);margin-bottom:14px}
.svc-list{list-style:none}
.svc-list li{display:flex;align-items:flex-start;gap:11px;padding:6px 0;font-size:14.5px;font-weight:300;color:var(--muted);line-height:1.65}
.svc-list li i{color:var(--green);font-size:17px;flex-shrink:0;margin-top:3px}
.svc-note{
  background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--primary);
  border-radius:var(--r-sm);padding:18px 22px;margin-bottom:26px;
}
.svc-note p{font-size:14.5px;font-weight:300;color:var(--muted);line-height:1.75}
.svc-note strong{color:var(--text);font-weight:500}
.svc-foot{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Karussell-Steuerung (Tablet/Handy) */
.svc-nav{display:none;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.svc-arrows{display:flex;gap:9px}
.svc-arrow{
  width:44px;height:44px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s,color .2s;
}
.svc-arrow:hover{background:var(--tint);border-color:var(--primary);color:var(--primary-lt)}
.svc-arrow:disabled{opacity:.35;cursor:not-allowed}
.svc-dots{display:flex;gap:8px;align-items:center}
.svc-dot{
  width:8px;height:8px;border-radius:50%;background:var(--line);border:none;cursor:pointer;padding:0;
  transition:width .3s cubic-bezier(.34,1.3,.64,1),background .25s;
}
.svc-dot[aria-current="true"]{width:26px;border-radius:var(--r-pill);background:var(--primary-lt)}
.svc-count{font-size:14px;font-weight:300;color:var(--muted);white-space:nowrap}

/* Reiter als waagerechte Leiste ab Tablet */
.svc-scroller{display:none}

/* --------------------------------------------------------------------------
   9. VORTEILE
   -------------------------------------------------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.vcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:32px 28px;transition:transform .28s cubic-bezier(.34,1.2,.64,1),border-color .26s,box-shadow .26s;
  position:relative;overflow:hidden;
}
.vcard::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 70% 60% at 80% 0%,rgba(33,100,119,.13),transparent 70%);
  transition:opacity .34s;
}
.vcard:hover{transform:translateY(-5px);border-color:var(--tint-line);box-shadow:var(--sh-2),var(--glow)}
.vcard:hover::after{opacity:1}
.vcard .ico{
  width:54px;height:54px;border-radius:17px;background:var(--tint);border:1px solid var(--tint-line);
  display:flex;align-items:center;justify-content:center;font-size:25px;color:var(--primary-lt);
  margin-bottom:20px;transition:transform .3s cubic-bezier(.34,1.4,.64,1),background .25s;
}
.vcard:hover .ico{transform:scale(1.09) rotate(-6deg);background:rgba(33,100,119,.24)}
.vcard h3{font-size:18.5px;margin-bottom:10px}
.vcard p{font-size:15px;font-weight:300;color:var(--muted);line-height:1.75}

/* --------------------------------------------------------------------------
   10. ABLAUF – Punkte ploppen auf, Linien wachsen
   -------------------------------------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px}
.fstep{display:flex;flex-direction:column;align-items:center;text-align:center}
.frow{display:flex;align-items:center;width:100%}
.fnode{
  width:64px;height:64px;flex-shrink:0;border-radius:50%;position:relative;z-index:2;
  background:var(--card);border:2px solid var(--tint-line);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--primary-lt);
  opacity:0;transform:scale(0);
}
.fnum{
  position:absolute;top:-6px;right:-6px;width:25px;height:25px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-lt));color:#fff;
  font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--bg);
}
.sec-alt .fnum{border-color:var(--surface)}
.fline{flex:1;height:2px;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--primary),rgba(33,100,119,.28))}
.fstep:last-child .fline{display:none}
.flabel{margin-top:22px;padding:0 14px;opacity:0;transform:translateY(14px)}
.flabel h3{font-size:18px;margin-bottom:7px}
.flabel p{font-size:14.5px;font-weight:300;color:var(--muted);line-height:1.65}

@keyframes popN{0%{opacity:0;transform:scale(0) rotate(-12deg)}55%{opacity:1;transform:scale(1.24) rotate(7deg)}78%{transform:scale(.93) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes drawL{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes riseL{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.flow.run .fstep:nth-child(1) .fnode{animation:popN .52s cubic-bezier(.34,1.56,.64,1) .06s both}
.flow.run .fstep:nth-child(1) .fline{animation:drawL .44s ease-out .5s both}
.flow.run .fstep:nth-child(1) .flabel{animation:riseL .46s ease .18s both}
.flow.run .fstep:nth-child(2) .fnode{animation:popN .52s cubic-bezier(.34,1.56,.64,1) .84s both}
.flow.run .fstep:nth-child(2) .fline{animation:drawL .44s ease-out 1.28s both}
.flow.run .fstep:nth-child(2) .flabel{animation:riseL .46s ease .96s both}
.flow.run .fstep:nth-child(3) .fnode{animation:popN .52s cubic-bezier(.34,1.56,.64,1) 1.62s both}
.flow.run .fstep:nth-child(3) .fline{animation:drawL .44s ease-out 2.06s both}
.flow.run .fstep:nth-child(3) .flabel{animation:riseL .46s ease 1.74s both}
.flow.run .fstep:nth-child(4) .fnode{animation:popN .52s cubic-bezier(.34,1.56,.64,1) 2.4s both}
.flow.run .fstep:nth-child(4) .flabel{animation:riseL .46s ease 2.52s both}
.flow.run .fnode{box-shadow:0 0 26px rgba(33,100,119,.34)}

/* --------------------------------------------------------------------------
   11. SPLIT
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split-media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2)}
.split-media img{width:100%;height:420px;object-fit:cover;filter:saturate(.8) brightness(.86)}
html[data-theme="light"] .split-media img{filter:saturate(.94) brightness(1)}
.split-media::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(33,100,119,.2),transparent 62%)}
.chk{list-style:none;margin:24px 0 32px}
.chk li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-size:15.5px;font-weight:300;color:var(--muted);line-height:1.7}
.chk li i{color:var(--green);font-size:19px;flex-shrink:0;margin-top:3px}

/* Kennzahlen-Kacheln */
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.mini{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:22px 18px;text-align:center;transition:border-color .24s,transform .24s}
.mini:hover{border-color:var(--tint-line);transform:translateY(-3px)}
.mini .n{font-size:26px;font-weight:500;letter-spacing:-.8px;line-height:1.1}
.mini .l{font-size:12.5px;font-weight:300;color:var(--muted);margin-top:6px;line-height:1.4}

/* --------------------------------------------------------------------------
   12. BANNER
   -------------------------------------------------------------------------- */
.banner{position:relative;overflow:hidden;padding:88px 0;background:linear-gradient(135deg,var(--primary-dk) 0%,var(--primary) 52%,#1e7f93 100%)}
.banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 30% 60%,rgba(255,255,255,.13) 0%,transparent 58%)}
.banner::after{content:'';position:absolute;inset:0;background-image:var(--dots);opacity:.3}
.banner .wrap{position:relative;z-index:2;max-width:760px;text-align:center}
.banner .pill{background:rgba(255,255,255,.19);border-color:rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(8px)}
.banner h2{color:#fff;margin-bottom:16px}
.banner p{font-size:17px;font-weight:300;color:rgba(255,255,255,.9);line-height:1.85;margin-bottom:34px}

/* --------------------------------------------------------------------------
   13. KONTAKT
   -------------------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.form-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;box-shadow:var(--sh-1)}
.form-box h3{font-size:24px;margin-bottom:8px}
.form-box>.intro{font-size:15px;font-weight:300;color:var(--muted);margin-bottom:30px;line-height:1.75}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-box p,.wpcf7-form p{margin-bottom:18px}
.f-label,.wpcf7-form label{display:block;font-size:14px;font-weight:500;color:var(--text);margin-bottom:8px}
.form-box input[type=text],.form-box input[type=email],.form-box input[type=tel],
.form-box select,.form-box textarea,
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],
.wpcf7-form select,.wpcf7-form textarea{
  width:100%;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 16px;font-family:var(--font);font-size:15px;font-weight:300;line-height:1.5;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-box input:focus,.form-box select:focus,.form-box textarea:focus,
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(33,100,119,.2);
}
.form-box textarea,.wpcf7-form textarea{min-height:158px;resize:vertical}
.wpcf7-form input[type=submit],.form-box button[type=submit]{
  width:auto;background:linear-gradient(135deg,var(--primary),var(--primary-lt));color:#fff;
  border:none;border-radius:var(--r-pill);padding:15px 36px;
  font-family:var(--font);font-size:15px;font-weight:500;cursor:pointer;
  box-shadow:0 5px 20px rgba(33,100,119,.4);transition:transform .2s,box-shadow .24s;
}
.wpcf7-form input[type=submit]:hover,.form-box button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 9px 30px rgba(33,100,119,.56)}
.f-note{font-size:13px;font-weight:300;color:var(--muted);line-height:1.7;margin-top:18px}
.cf7-hint{
  background:var(--tint);border:1px dashed var(--tint-line);border-radius:var(--r-sm);
  padding:17px 20px;font-size:13.5px;font-weight:300;color:var(--muted);margin-top:26px;line-height:1.75;
}
.cf7-hint code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:13px;color:var(--primary-lt);font-family:Consolas,Monaco,monospace}

.info-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:30px;margin-bottom:18px}
.info-box h3{font-size:18px;margin-bottom:20px}
.info-row{display:flex;align-items:flex-start;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:none;padding-bottom:0}
.info-row>i{
  font-size:20px;color:var(--primary-lt);flex-shrink:0;
  width:42px;height:42px;border-radius:13px;background:var(--tint);
  display:flex;align-items:center;justify-content:center;
}
.info-row .k{font-size:12px;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.info-row .v{font-size:16px;font-weight:500;color:var(--text)}
.info-row .v a{color:var(--text)}
.info-row .v a:hover{color:var(--primary-lt)}
.info-row .v.plain{font-weight:300;font-size:15px}

/* --------------------------------------------------------------------------
   14. SUPPORT / RUSTDESK
   -------------------------------------------------------------------------- */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-bottom:34px}
.dl-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:30px 26px;text-align:center;
  transition:transform .28s cubic-bezier(.34,1.2,.64,1),border-color .26s,box-shadow .26s;
}
.dl-card:hover{transform:translateY(-5px);border-color:var(--tint-line);box-shadow:var(--sh-2),var(--glow)}
.dl-card .os{
  width:62px;height:62px;margin:0 auto 18px;border-radius:19px;
  background:var(--tint);border:1px solid var(--tint-line);
  display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--primary-lt);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
.dl-card:hover .os{transform:scale(1.09)}
.dl-card h3{font-size:19px;margin-bottom:7px}
.dl-card p{font-size:14px;font-weight:300;color:var(--muted);margin-bottom:22px;line-height:1.7}

.cfg-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:32px;margin-bottom:20px}
.cfg-box h3{font-size:19px;margin-bottom:6px}
.cfg-box>p{font-size:14.5px;font-weight:300;color:var(--muted);margin-bottom:24px;line-height:1.75}
.cfg-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px 18px;margin-bottom:11px;
}
.cfg-row .kv{min-width:0;flex:1}
.cfg-row .k{font-size:11.5px;font-weight:400;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.cfg-row .v{font-family:Consolas,Monaco,monospace;font-size:14.5px;color:var(--primary-lt);word-break:break-all;line-height:1.5}
.copy-btn{
  flex-shrink:0;background:var(--card);border:1px solid var(--line);border-radius:9px;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;font-size:18px;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.copy-btn:hover{background:var(--tint);border-color:var(--primary);color:var(--primary-lt)}
.copy-btn.done{color:var(--green);border-color:var(--green);transform:scale(1.08)}

.steps-list{counter-reset:s;list-style:none;margin-top:8px}
.steps-list li{
  counter-increment:s;position:relative;padding:0 0 26px 56px;
  font-size:15px;font-weight:300;color:var(--muted);line-height:1.75;
}
.steps-list li::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  width:36px;height:36px;border-radius:50%;
  background:var(--tint);border:1px solid var(--tint-line);color:var(--primary-lt);
  font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center;
}
.steps-list li::after{
  content:'';position:absolute;left:17.5px;top:38px;bottom:6px;width:1px;
  background:linear-gradient(to bottom,var(--tint-line),transparent);
}
.steps-list li:last-child{padding-bottom:0}
.steps-list li:last-child::after{display:none}
.steps-list strong{color:var(--text);font-weight:500;display:block;margin-bottom:3px;font-size:16px}

/* --------------------------------------------------------------------------
   15. UNTERSEITEN-KOPF
   -------------------------------------------------------------------------- */
.page-top{position:relative;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line)}
.page-top-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:var(--img-fx);opacity:calc(var(--img-op) + .05)}
.page-top-fx{position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 72% 42%,rgba(33,100,119,.2) 0%,transparent 62%),var(--dots)}
.page-top .wrap{position:relative;z-index:2;padding-top:78px;padding-bottom:70px}
.crumb{font-size:13.5px;font-weight:300;color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--primary-lt)}
.crumb i{font-size:14px;opacity:.55}

/* Fließtext */
.prose{max-width:790px}
.prose h3{margin-top:38px;margin-bottom:12px;font-size:21px}
.prose h3:first-child{margin-top:0}
.prose p{font-size:16px;font-weight:300;color:var(--muted);line-height:1.9;margin-bottom:20px}
.prose ul{list-style:none;margin:0 0 24px}
.prose ul li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-size:15.5px;font-weight:300;color:var(--muted);line-height:1.75}
.prose ul li i{color:var(--green);font-size:17px;flex-shrink:0;margin-top:4px}
.note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--r-sm);padding:24px 28px;margin:32px 0}
.note p{margin-bottom:0;font-size:15.5px}
.note strong{color:var(--text);font-weight:500}

/* --------------------------------------------------------------------------
   16. ABSCHLUSS-AUFRUF
   -------------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;padding:104px 0;text-align:center;background:var(--bg);border-top:1px solid var(--line)}
.cta::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 55% 55% at 50% 46%,rgba(33,100,119,.22) 0%,transparent 64%),
    radial-gradient(ellipse 40% 40% at 84% 84%,rgba(25,135,84,.07) 0%,transparent 50%),
    var(--dots);
}
.cta .wrap{position:relative;z-index:2}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px}

/* --------------------------------------------------------------------------
   17. FUSSBEREICH
   -------------------------------------------------------------------------- */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:66px 0 28px;position:relative;overflow:hidden}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:150px;background:linear-gradient(to bottom,rgba(33,100,119,.06),transparent)}
.f-grid{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:46px}
.f-brand{font-size:22px;font-weight:500;letter-spacing:-.6px;color:var(--primary-lt);margin-bottom:18px;display:inline-block}
.f-brand img{
  height:46px;width:auto;max-width:100%;
  aspect-ratio:2560 / 746;object-fit:contain;
  transition:filter .3s ease;
}
html[data-theme="dark"] .f-brand img{filter:brightness(1.12) contrast(1.04)}
.f-about{font-size:15px;font-weight:300;color:var(--muted);line-height:1.85;margin-bottom:22px;max-width:340px}
.f-contact{list-style:none}
.f-contact li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:300;color:var(--muted);padding:5px 0}
.f-contact li i{color:var(--primary-lt);font-size:17px;flex-shrink:0}
.f-contact a{color:var(--muted)}
.f-contact a:hover{color:var(--primary-lt)}
.f-col h4{font-size:12px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.f-col ul{list-style:none}
.f-col li{padding:6px 0}
.f-col a{font-size:15px;font-weight:300;color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:transform .22s,color .18s}
.f-col a:hover{color:var(--primary-lt);transform:translateX(5px)}
.f-col a i{font-size:14px;opacity:.6}
.f-bottom{position:relative;border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.f-bottom p{font-size:13.5px;font-weight:300;color:var(--muted)}
.f-bottom nav{display:flex;gap:24px}
.f-bottom nav a{font-size:13.5px;font-weight:300;color:var(--muted)}
.f-bottom nav a:hover{color:var(--primary-lt)}

/* --------------------------------------------------------------------------
   18. SCROLL-ANIMATIONEN + NACH OBEN
   -------------------------------------------------------------------------- */
[data-anim]{opacity:0;transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1)}
[data-anim="up"]{transform:translateY(32px)}
[data-anim="left"]{transform:translateX(-32px)}
[data-anim="right"]{transform:translateX(32px)}
[data-anim="zoom"]{transform:scale(.96)}
[data-anim="fade"]{transform:none}
[data-anim].seen{opacity:1;transform:none}

.top-btn{
  position:fixed;right:24px;bottom:24px;z-index:800;
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-lt));color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 6px 24px rgba(33,100,119,.48);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .32s,visibility .32s,transform .32s cubic-bezier(.34,1.3,.64,1);
}
.top-btn.on{opacity:1;visibility:visible;transform:translateY(0)}
.top-btn:hover{transform:translateY(-4px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1;transform:none}
}

/* ==========================================================================
   19. RESPONSIV
   ========================================================================== */

/* Kleinere Notebooks */
@media (max-width:1120px){
  .hero .wrap{gap:44px}
  .hero-vis img{height:380px}
  .svc{grid-template-columns:270px 1fr;gap:26px}
}

/* Tablet quer / klein */
@media (max-width:1000px){
  .sec{padding:74px 0}
  .hero .wrap{grid-template-columns:1fr;gap:46px;padding-top:64px;padding-bottom:64px}
  .hero-vis img{height:330px}
  .hero .txt{max-width:none}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust-i{border-bottom:1px solid var(--line)}
  .trust-i:nth-child(2){border-right:none}
  .trust-i:nth-child(3),.trust-i:nth-child(4){border-bottom:none}

  /* Leistungen → waagerechte Reiterleiste + Karussell */
  .svc{grid-template-columns:1fr;gap:0}
  .svc-tabs{display:none}
  .svc-scroller{
    display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;padding:4px 0 16px;margin-bottom:22px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;max-width:100%;min-width:0;
  }
  .svc-scroller::-webkit-scrollbar{display:none}
  .svc-chip{
    display:inline-flex;align-items:center;gap:9px;flex-shrink:0;scroll-snap-align:start;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);
    padding:10px 20px;font-size:14.5px;font-weight:400;color:var(--muted);cursor:pointer;
    transition:background .22s,border-color .22s,color .22s,transform .2s;white-space:nowrap;
  }
  .svc-chip i{font-size:18px}
  .svc-chip[aria-selected="true"]{
    background:linear-gradient(135deg,var(--primary),var(--primary-lt));
    border-color:transparent;color:#fff;font-weight:500;
    box-shadow:0 4px 16px rgba(33,100,119,.38);
  }
  .svc-stage{min-height:0}
  .svc-nav{display:flex}
  .split{grid-template-columns:1fr;gap:40px}
  .split-media img{height:340px}
  .contact{grid-template-columns:1fr;gap:32px}
  .flow{grid-template-columns:1fr 1fr;row-gap:48px}
  .fstep:nth-child(2) .fline{display:none}
  .f-grid{grid-template-columns:1fr 1fr;gap:34px}
}

/* Tablet hoch / großes Handy */
@media (max-width:860px){
  html{scroll-padding-top:74px}
  .burger{display:flex}
  .nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    height:100vh;height:100dvh;
    width:min(340px,86vw);
    background:var(--surface);border-left:1px solid var(--line);
    padding:96px 26px 36px;overflow-y:auto;z-index:890;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);
    box-shadow:-18px 0 48px rgba(0,0,0,.34);
  }
  .nav.open{transform:translateX(0)}
  .nav ul{flex-direction:column;gap:0;align-items:stretch}
  .nav li{border-bottom:1px solid var(--line)}
  .nav li:last-child{border-bottom:none}
  .nav a{display:block;padding:15px 4px;font-size:17px;font-weight:400}
  .nav a::after{display:none}
  .nav a:hover,.nav a.active{color:var(--primary-lt)}
  .head-act .btn{display:none}
  .topbar .wrap{gap:12px;font-size:12.5px;padding:8px 20px}
  .topbar .sep{display:none}
  .svc-body{padding:42px 26px 30px}
  .svc-cols{grid-template-columns:1fr;gap:22px}
  .form-box{padding:30px 24px}
  .f-row{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;row-gap:36px}
  .fline{display:none!important}
  .frow{justify-content:center}
  .f-grid{grid-template-columns:1fr;gap:32px}
  .f-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .mini-stats{grid-template-columns:1fr}
}

/* Handy */
@media (max-width:560px){
  .wrap{padding:0 18px}
  .sec{padding:58px 0}
  .hero .wrap{padding-top:48px;padding-bottom:52px;gap:36px}
  .hero-vis img{height:240px}
  .hero-cta .btn,.cta-btns .btn{width:100%}
  .chip{font-size:12px;padding:7px 14px}
  .chip.a{bottom:14px;left:14px}
  .chip.b{top:14px;right:14px}
  .trust .wrap{grid-template-columns:1fr;padding:0 18px}
  .trust-i{border-right:none;padding:20px 4px}
  .trust-i:nth-child(3){border-bottom:1px solid var(--line)}
  .svc-media{height:180px}
  /* .svc-media .ico bleibt display:none (siehe Basisregel) */
  .svc-body{padding:38px 20px 26px}
  .svc-body h3{font-size:22px}
  .svc-foot .btn{width:100%}
  .svc-count{display:none}
  .vcard{padding:26px 22px}
  .split-media img{height:250px}
  .banner{padding:62px 0}
  .cta{padding:70px 0}
  .form-box,.info-box,.cfg-box,.dl-card{padding:24px 20px}
  .cfg-row{flex-direction:column;align-items:stretch;gap:12px}
  .copy-btn{width:100%;height:40px}
  .steps-list li{padding-left:48px}
  .page-top .wrap{padding-top:52px;padding-bottom:48px}
  .top-btn{right:16px;bottom:16px;width:46px;height:46px}
}


/* ==========================================================================
   20. VERFEINERTE ANIMATIONEN
   Zurückhaltend gehalten: kurze Wege, weiche Kurven, keine Spielereien.
   ========================================================================== */

/* --- Gestaffeltes Einblenden von Gruppen --------------------------------- */
[data-stagger] > *{opacity:0;transform:translateY(24px);transition:opacity .68s cubic-bezier(.22,.61,.36,1),transform .68s cubic-bezier(.22,.61,.36,1)}
[data-stagger].seen > *{opacity:1;transform:none}
[data-stagger].seen > *:nth-child(1){transition-delay:0ms}
[data-stagger].seen > *:nth-child(2){transition-delay:80ms}
[data-stagger].seen > *:nth-child(3){transition-delay:160ms}
[data-stagger].seen > *:nth-child(4){transition-delay:240ms}
[data-stagger].seen > *:nth-child(5){transition-delay:320ms}
[data-stagger].seen > *:nth-child(6){transition-delay:400ms}

/* --- Bild-Enthüllung per Clip-Path --------------------------------------- */
[data-reveal]{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.65,0,.35,1)}
[data-reveal].seen{clip-path:inset(0 0 0 0)}
[data-reveal] img{transform:scale(1.1);transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
[data-reveal].seen img{transform:scale(1)}

/* --- Überschrift mit mitlaufender Linie ---------------------------------- */
.eyebrow::before{transform-origin:left center;transform:scaleX(0);transition:transform .6s cubic-bezier(.22,.61,.36,1) .12s}
[data-anim].seen .eyebrow::before,
.eyebrow[data-anim].seen::before{transform:scaleX(1)}
.sec-head.mid .eyebrow::before{display:none}

/* --- Zahlen zählen hoch --------------------------------------------------- */
.count{font-variant-numeric:tabular-nums}

/* --- Buttons: Pfeil gleitet, sanfter Glanz -------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .72s cubic-bezier(.22,.61,.36,1);
}
.btn:hover::before{transform:translateX(130%)}
.btn-ghost::before{background:linear-gradient(105deg,transparent 38%,rgba(33,100,119,.14) 50%,transparent 62%)}
.btn i{transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
.btn:hover i.ti-arrow-right{transform:translateX(4px)}
.btn:hover i.ti-download{transform:translateY(2px)}
.btn:hover i.ti-chevron-right{transform:translateX(4px)}

/* --- Verweise mit aufziehender Unterstreichung ---------------------------- */
.f-col a,.crumb a,.topbar a{position:relative}
.f-col a::after,.topbar a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.f-col a:hover::after,.topbar a:hover::after{transform:scaleX(1);transform-origin:left center}
.topbar a:hover{text-decoration:none}

/* --- Karten: feiner Lichtstreif beim Überfahren --------------------------- */
.vcard,.dl-card,.info-box,.mini{position:relative;overflow:hidden}
.vcard::before,.dl-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--primary-lt),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.vcard:hover::before,.dl-card:hover::before{transform:scaleX(1)}

/* --- Reiter: Symbol wandert leicht mit ------------------------------------ */
.svc-tab .lbl{transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.svc-tab:hover .lbl{transform:translateX(2px)}
.svc-chip{position:relative;overflow:hidden}
.svc-chip::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--tint);opacity:0;transition:opacity .26s;
}
.svc-chip:hover::after{opacity:1}
.svc-chip[aria-selected="true"]::after{opacity:0}

/* --- Ablauf-Knoten: leises Pulsieren nach dem Erscheinen ------------------ */
@keyframes nodePulse{
  0%,100%{box-shadow:0 0 26px rgba(33,100,119,.30)}
  50%{box-shadow:0 0 34px rgba(33,100,119,.44)}
}
.flow.run .fnode{animation-fill-mode:both}
.flow.run .fstep:nth-child(1) .fnode{animation:popN .52s cubic-bezier(.34,1.56,.64,1) .06s both,nodePulse 3.4s ease-in-out 3s infinite}
.flow.run .fstep:nth-child(2) .fnode{animation:popN .52s cubic-bezier(.34,1.56,.64,1) .84s both,nodePulse 3.4s ease-in-out 3.4s infinite}
.flow.run .fstep:nth-child(3) .fnode{animation:popN .52s cubic-bezier(.34,1.56,.64,1) 1.62s both,nodePulse 3.4s ease-in-out 3.8s infinite}
.flow.run .fstep:nth-child(4) .fnode{animation:popN .52s cubic-bezier(.34,1.56,.64,1) 2.4s both,nodePulse 3.4s ease-in-out 4.2s infinite}

/* --- Hero-Bild: minimale Tiefenwirkung beim Scrollen ---------------------- */
.hero-img{will-change:transform}

/* --- Kopfzeile schrumpft beim Scrollen ----------------------------------- */
.site-header .wrap{transition:padding .34s cubic-bezier(.22,.61,.36,1)}
.site-header.scrolled .wrap{padding-top:10px;padding-bottom:10px}
.brand{transition:font-size .34s cubic-bezier(.22,.61,.36,1)}
.site-header.scrolled .brand{font-size:18.5px}
.site-header.scrolled .brand img{height:34px}

/* --- Ladezustand der Support-Seite --------------------------------------- */
.state{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 18px;font-size:14.5px;font-weight:300;color:var(--muted);margin-bottom:22px;
}
.state i{font-size:19px;flex-shrink:0}
.state.load i{color:var(--primary-lt);animation:spin 1.1s linear infinite}
.state.ok{border-color:rgba(25,135,84,.34);background:rgba(25,135,84,.07)}
.state.ok i{color:var(--green)}
.state.err{border-color:rgba(190,87,75,.4);background:rgba(190,87,75,.07)}
.state.err i{color:#be574b}
@keyframes spin{to{transform:rotate(360deg)}}

.skeleton{
  display:inline-block;min-width:180px;height:1.1em;vertical-align:middle;border-radius:5px;
  background:linear-gradient(90deg,var(--line) 25%,var(--card-2) 50%,var(--line) 75%);
  background-size:220% 100%;animation:shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer{from{background-position:220% 0}to{background-position:-220% 0}}

/* --- Empfohlene Plattform hervorheben ------------------------------------
   Dezentes, seriöses Pulsieren statt eines auffälligen Blinkens — der Rahmen
   und ein weicher Schein atmen langsam zwischen zwei Intensitäten, damit
   die passende Karte sofort ins Auge fällt, ohne aufdringlich zu wirken. */
.dl-card.suggested{
  border-color:var(--primary);
  animation:suggestedPulse 2.6s ease-in-out infinite;
}
@keyframes suggestedPulse{
  0%,100%{box-shadow:var(--sh-1),0 0 0 1px var(--primary) inset,0 0 0 rgba(33,100,119,0)}
  50%{box-shadow:var(--sh-2),0 0 0 1px var(--primary-lt) inset,0 0 22px rgba(33,100,119,.38)}
}
.dl-card.suggested:hover{animation-play-state:paused}

/* --- Noch nicht verfügbare Plattform (z. B. macOS ohne Build) ------------ */
.dl-card.is-off{opacity:.55}
.dl-card.is-off .os{filter:grayscale(1)}
.dl-card.is-off .btn{
  background:var(--card-2)!important;color:var(--muted)!important;
  box-shadow:none!important;cursor:not-allowed;
}
.dl-card.is-off .btn:hover{transform:none!important;box-shadow:none!important}
.dl-card.is-off:hover{transform:none;box-shadow:none;border-color:var(--line)}
.dl-card.is-off:hover .os{transform:none}
.dl-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--tint);border:1px solid var(--tint-line);color:var(--primary-lt);
  font-size:11.5px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--r-pill);margin-bottom:14px;
}
/* Eigene Regel oben überschreibt sonst das hidden-Attribut des Browsers -
   dieser Zusatz stellt sicher, dass nur die passende Karte das Badge zeigt */
.dl-badge[hidden]{display:none!important}

/* --- Prüfsumme ------------------------------------------------------------ */
.hash{
  font-family:Consolas,Monaco,monospace;font-size:12px;color:var(--muted);
  word-break:break-all;margin-top:14px;line-height:1.6;
}
.hash span{color:var(--primary-lt)}

@media (prefers-reduced-motion:reduce){
  [data-stagger] > *,[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .eyebrow::before{transform:scaleX(1)!important}
  .flow.run .fnode{animation:none!important;opacity:1!important;transform:none!important}
  .flow.run .fline{animation:none!important;transform:scaleX(1)!important}
  .flow.run .flabel{animation:none!important;opacity:1!important;transform:none!important}
  .skeleton,.state.load i{animation:none!important}
  .dl-card.suggested{animation:none!important;box-shadow:var(--sh-2),0 0 0 1px var(--primary) inset!important}
}


/* --------------------------------------------------------------------------
   21. LOGO – Größen je Bildschirmbreite
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .brand img{height:38px}
  .site-header.scrolled .brand img{height:32px}
}
@media (max-width:860px){
  .brand img{height:36px}
  .site-header.scrolled .brand img{height:31px}
  .f-brand img{height:42px}
}
@media (max-width:560px){
  .brand img{height:32px}
  .site-header.scrolled .brand img{height:28px}
  .f-brand img{height:38px}
}
@media (max-width:380px){
  .brand img{height:28px}
  .site-header.scrolled .brand img{height:26px}
}