/*
Theme Name: NK IT Service
Theme URI: https://www.nk-it.de/
Author: NK IT Service · Nikolaj Kinas
Author URI: https://www.nk-it.de/
Description: Maßgeschneidertes WordPress-Theme für NK IT Service Rastatt – Full-Service-IT-Agentur für Webdesign, KI, Microsoft 365, Cyber-Security und Telematik. Aus dem hauseigenen Prototyp (v42) entwickelt.
Version: 1.16.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nk-it-service
Tags: business, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready
*/

/* =========================================================================
   Inhalt dieser Datei:
   - WordPress-Theme-Header (oben)
   - Lokale Schriften (DSGVO-konform, ersetzen Google-Fonts-CDN)
   - Vollständiges Design-CSS aus dem Original-Prototyp (unverändert übernommen)
   Das CSS wird zusätzlich über functions.php geladen (wp_enqueue_style).
   ========================================================================= */

/* ---- Lokale Schriften (Variable Fonts, Latin-Subset) ---- */
@font-face{
  font-family:'Rubik';font-style:normal;font-weight:500 800;font-display:swap;
  src:url('assets/fonts/rubik-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Quicksand';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('assets/fonts/quicksand-var.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;
}

:root{
  --bg:#FFFFFF;
  --bg-soft:#F6F8FB;
  --bg-elev:#EDF1F6;
  --bg-line:#DEE5EE;
  --ink:#0F1A2E;
  --ink-2:#243047;
  --ink-mute:#5B6678;
  --brand:#2C5282;
  --brand-2:#1E3A5F;
  --brand-3:#0F1E36;
  --brand-light:#EDF2F8;
  --brand-pale:#E3EBF4;
  --accent:#1F6FEB;
  --warn:#E76F1C;
  --success:#1F8744;
  --radius:6px;
  --radius-lg:12px;
  --radius-xl:18px;
  --shadow-sm:0 2px 8px rgba(15,30,54,.04);
  --shadow:0 6px 18px rgba(15,30,54,.06);
  --shadow-lg:0 14px 36px -10px rgba(15,30,54,.14);
  --shadow-mega:0 24px 64px -12px rgba(15,30,54,.22);
  --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Quicksand',-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,h4,h5{font-family:'Rubik',sans-serif;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
h1{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.75rem,3.5vw,2.6rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.1rem}

/* ---- SAFETY NET für alle inline-SVGs ---- */
svg{flex-shrink:0;display:inline-block;vertical-align:middle}

/* ---- Bilder & Logo-Marquees ---- */
img{max-width:100%;height:auto;display:block}
.marquee-logo{height:44px;width:auto;opacity:.72;filter:grayscale(100%);transition:all .3s;flex-shrink:0;object-fit:contain}
.marquee:hover .marquee-logo{opacity:1;filter:grayscale(0%)}
.ref-logo{width:auto;max-width:200px;height:auto;max-height:110px;opacity:.7;filter:grayscale(100%);transition:filter .35s ease,opacity .35s ease;object-fit:contain}
.ref-item.text-only{font-weight:600;color:var(--ink-2);font-size:.88rem;letter-spacing:.02em;text-align:center}

/* ---- Partner-Sektion (Modern Cards) ---- */
.partners{padding:96px 0;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);border-top:1px solid var(--bg-line);border-bottom:1px solid var(--bg-line);position:relative;overflow:hidden}
.partners::before{content:"";position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 8%,transparent) 0%,transparent 70%);pointer-events:none}
.partners-head{text-align:center;max-width:680px;margin:0 auto 56px;position:relative;z-index:1}
.partners-head h3{font-size:1.5rem;margin-bottom:12px}
.partners-head p{font-size:.96rem;color:var(--ink-mute)}
.partners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;max-width:1200px;margin:0 auto;position:relative;z-index:1}
@media(min-width:560px){.partners-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
@media(min-width:1100px){.partners-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.partner-tile{background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:10px 12px;height:140px;display:grid;place-items:center;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;text-decoration:none}
.partner-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);opacity:0;transition:opacity .3s;z-index:0}
.partner-tile:hover{border-color:transparent;transform:translateY(-4px);box-shadow:0 16px 40px -12px rgba(44,82,130,.25)}
.partner-tile img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(70%);opacity:.78;transition:all .3s;position:relative;z-index:1}
.partner-tile:hover img{filter:grayscale(0%);opacity:1;transform:scale(1.06)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;background:var(--brand-light);color:var(--brand);border-radius:4px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;border:1px solid var(--brand-pale)}
a{color:inherit;text-decoration:none;transition:all .2s}

/* ===== TOPBAR ===== */
.topbar{background:var(--brand-3);color:rgba(255,255,255,.85);font-size:.8rem;position:relative;z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:9px 24px;gap:16px;flex-wrap:wrap;max-width:var(--max);margin:0 auto}
.topbar a{color:rgba(255,255,255,.85);font-weight:500}
.topbar a:hover{color:#fff}
.topbar-left,.topbar-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar-item{display:inline-flex;align-items:center;gap:6px}

/* ===== NAV ===== */
.nav{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--bg-line);z-index:100;transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 10px 34px -12px rgba(15,23,42,.28);background:rgba(255,255,255,.94)}
.nav-inner{transition:padding .3s ease}
.nav .logo-img{transition:transform .3s ease}
.nav.scrolled .nav-inner{padding-top:9px;padding-bottom:9px}
.nav.scrolled .logo-img{transform:scale(.86)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;max-width:var(--max);margin:0 auto;gap:24px}
.logo{display:flex;align-items:center;gap:14px;font-weight:700;font-size:1.15rem;letter-spacing:-.015em;color:var(--ink)}
.logo-mark{width:48px;height:48px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.02em;flex-shrink:0}
.logo small{display:block;font-size:.68rem;color:var(--ink-mute);font-weight:500;letter-spacing:.08em;margin-top:3px;text-transform:uppercase}
.logo img.logo-img{height:68px;width:auto;display:block}

.nav-links{display:none;gap:8px;font-size:.93rem;font-weight:600;align-items:center}
.nav-item{position:relative}
.nav-link{position:relative;padding:10px 14px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;border-radius:6px;cursor:pointer;font-family:'Quicksand',sans-serif;font-weight:600}
.nav-link:hover{color:var(--brand);background:var(--brand-light)}
.nav-link.has-dd::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.nav-item.open .nav-link.has-dd::after{transform:rotate(-135deg) translateY(2px)}

.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;padding:11px 22px;border-radius:var(--radius);font-weight:600;font-size:.9rem;transition:all .2s;border:1px solid var(--brand);flex-shrink:0}
.nav-cta:hover{background:var(--brand-2);border-color:var(--brand-2)}
.nav-cta:hover svg{transform:translateX(3px)}
.nav-cta svg{transition:transform .2s}

/* ===== MEGA MENU ===== */
.mega{
  position:absolute;left:50%;top:calc(100% + 12px);
  transform:translateX(-50%) translateY(-8px);
  width:min(1100px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-mega);
  padding:32px;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  z-index:200;
}
.nav-item.open .mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega::before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;background:#fff;border-left:1px solid var(--bg-line);border-top:1px solid var(--bg-line);transform:translateX(-50%) rotate(45deg)}

.mega-grid{display:grid;grid-template-columns:1.15fr 1.15fr 1fr;gap:32px}
.mega-col h6{font-size:.72rem;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--bg-line)}
.mega-list{display:flex;flex-direction:column;gap:2px;list-style:none}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:8px;color:var(--ink-2);transition:all .2s;--svc-color:var(--brand);position:relative;overflow:hidden}
.mega-link::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--svc-color);transform:scaleY(0);transform-origin:center;transition:transform .25s ease}
.mega-link:hover{background:color-mix(in srgb, var(--svc-color) 8%, transparent);color:var(--svc-color)}
.mega-link:hover::before{transform:scaleY(1)}
.mega-link:hover .mega-ico{background:var(--svc-color);color:#fff;border-color:var(--svc-color);transform:scale(1.05)}
.mega-ico{width:36px;height:36px;border-radius:8px;background:color-mix(in srgb, var(--svc-color) 10%, #fff);color:var(--svc-color);display:grid;place-items:center;flex-shrink:0;border:1px solid color-mix(in srgb, var(--svc-color) 18%, transparent);transition:all .2s}
.mega-title{display:block;font-weight:600;font-size:.9rem;color:var(--ink);line-height:1.3;margin-bottom:3px;transition:color .2s}
.mega-link:hover .mega-title{color:var(--svc-color)}
.mega-text{flex:1;min-width:0}
.mega-desc{display:block;font-size:.74rem;color:var(--ink-mute);line-height:1.4;transition:color .2s}
.mega-link:hover .mega-desc{color:color-mix(in srgb, var(--svc-color) 70%, var(--ink-mute))}

/* Featured Box in Mega-Menu */
.mega-feature{background:var(--brand-3);color:#fff;padding:20px;border-radius:var(--radius);position:relative;overflow:hidden}
.mega-feature h6{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.1)}
.mega-feature h4{color:#fff;font-size:1rem;margin-bottom:8px;line-height:1.3}
.mega-feature p{font-size:.82rem;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:18px}
.mega-feature .mega-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;color:var(--brand-3);border-radius:4px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mega-feature .mega-cta:hover{background:var(--brand);color:#fff}

/* small dropdown (Über uns / Support) */
.dd-small{
  position:absolute;left:0;top:calc(100% + 8px);
  min-width:240px;background:#fff;border:1px solid var(--bg-line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-mega);
  padding:8px;opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .2s,transform .2s;z-index:200;
}
.nav-item.open .dd-small{opacity:1;pointer-events:auto;transform:translateY(0)}
.dd-small a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;font-size:.88rem;font-weight:500;color:var(--ink-2)}
.dd-small a:hover{background:var(--brand-light);color:var(--brand)}

/* Aktive Seite in der Navigation („Sie sind hier") – wie Hover, aber dauerhaft */
.nav-link.is-active{color:var(--brand);background:var(--brand-light)}
.nav-item.is-active>.nav-link{color:var(--brand)}
.nav-link.is-active::before{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:currentColor;opacity:.65}
.nav-link.has-dd.is-active::before{display:none}
.mega-link.is-active{background:color-mix(in srgb, var(--svc-color) 8%, transparent)}
.mega-link.is-active::before{transform:scaleY(1)}
.mega-link.is-active .mega-ico{background:var(--svc-color);color:#fff;border-color:var(--svc-color)}
.mega-link.is-active .mega-title{color:var(--svc-color)}
.mega-link.is-active .mega-desc{color:color-mix(in srgb, var(--svc-color) 70%, var(--ink-mute))}
.dd-small a.is-active{background:var(--brand-light);color:var(--brand)}

/* Mobile menu button */
.nav-toggle{display:grid;place-items:center;width:42px;height:42px;border-radius:6px;background:var(--brand-light);color:var(--brand);border:1px solid var(--brand-pale);cursor:pointer;padding:0}
@media(min-width:1100px){.nav-links{display:flex}.nav-toggle{display:none}}

/* ---- Mobile-Header: kompakte Topbar & ungequetschte Logo-Zeile ---- */
@media(max-width:719px){
  .topbar-left{display:none}                               /* Adresse/Zeiten stehen im Footer & Kontakt */
  .topbar-inner{justify-content:center;padding:8px 14px}
  .topbar-right{justify-content:center;gap:16px;width:100%}
  .nav-cta{display:none}                                   /* CTA steckt im Burger-Menü */
  .logo small{display:none}
  .logo img.logo-img{height:50px}
  .logo span{font-size:1.05rem;white-space:nowrap}
  .nav-inner{gap:12px}
}
@media(max-width:419px){
  .topbar-right a:nth-child(2){display:none}               /* Fernwartung erst ab ~420px */
}

/* Mobile overlay */
.mob-nav{position:fixed;inset:0;background:#fff;z-index:999;padding:24px;overflow-y:auto;display:none;flex-direction:column;gap:8px}
.mob-nav.open{display:flex}
.mob-nav>*{flex-shrink:0}
.mob-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--bg-line)}
.mob-close{width:42px;height:42px;border-radius:6px;background:var(--bg-soft);border:1px solid var(--bg-line);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.mob-section{border:1px solid var(--bg-line);border-radius:var(--radius-lg);overflow:hidden}
.mob-section-head{padding:15px 16px;background:var(--bg-soft);font-weight:700;color:var(--ink);font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border:none;width:100%;font-family:inherit}
.mob-section-body{display:none;padding:8px;flex-direction:column;gap:2px}
.mob-section.open .mob-section-body{display:flex}
.mob-section.open .mob-section-head svg{transform:rotate(180deg)}
.mob-section-head svg{transition:transform .2s}
.mob-link{padding:12px 14px;border-radius:6px;font-size:1.05rem;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:10px}
.mob-link:hover{background:var(--brand-light);color:var(--brand)}
.mob-cta{margin-top:16px}

/* ===== HERO ===== */
.hero{position:relative;padding:72px 0 96px;background:var(--hero-bg,var(--bg-soft));overflow:hidden;border-bottom:1px solid var(--bg-line);transition:background .6s ease}
/* Animierter Gradient-Mesh hinter den Slides — fließt langsam, nur auf dunklen Slides sichtbar */
.hero-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease;overflow:hidden}
.hero.is-dark .hero-mesh{opacity:.45}
.hero-mesh span{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;will-change:transform}
.hero-mesh .m1{width:46%;height:60%;top:-8%;left:-6%;background:radial-gradient(circle,color-mix(in srgb,var(--slide-accent-current,var(--brand)) 70%,transparent),transparent 70%);animation:mesh1 19s ease-in-out infinite}
.hero-mesh .m2{width:40%;height:55%;bottom:-12%;right:-4%;background:radial-gradient(circle,color-mix(in srgb,var(--slide-accent-current,var(--brand)) 55%,#3a2a6e),transparent 70%);animation:mesh2 23s ease-in-out infinite}
.hero-mesh .m3{width:34%;height:48%;top:30%;left:38%;background:radial-gradient(circle,color-mix(in srgb,var(--slide-accent-current,var(--brand)) 40%,#0b2a45),transparent 70%);animation:mesh3 27s ease-in-out infinite}
@keyframes mesh1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(18%,12%) scale(1.15)}66%{transform:translate(-8%,20%) scale(.92)}}
@keyframes mesh2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-16%,-10%) scale(1.1)}66%{transform:translate(10%,-18%) scale(.95)}}
@keyframes mesh3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20%,-14%) scale(1.2)}}
/* Feine Grain/Noise-Textur für Tiefe */
.hero-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Gestaffelte Einblendung der Hero-Textspalte beim Slide-Wechsel */
/* NK-PERF: Erstanstrich mit .01 statt 0 – Inhalte, die bei Opazität 0 erstmals
   gezeichnet und nur per Compositor-Animation eingeblendet werden, erzeugen in
   Chrome KEINEN LCP-Kandidaten (PageSpeed: NO_LCP, kein Performance-Score).
   .01 ist unsichtbar, macht Hero-Text + Hero-Foto aber LCP-messbar. */
.hero-slide.active>div:first-child>*{opacity:.01;animation:heroRise .7s cubic-bezier(.22,.61,.36,1) forwards}
.hero-slide.active>div:first-child>*:nth-child(1){animation-delay:.05s}
.hero-slide.active>div:first-child>*:nth-child(2){animation-delay:.13s}
.hero-slide.active>div:first-child>*:nth-child(3){animation-delay:.21s}
.hero-slide.active>div:first-child>*:nth-child(4){animation-delay:.29s}
.hero-slide.active>div:first-child>*:nth-child(5){animation-delay:.37s}
@keyframes heroRise{from{opacity:.01;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} /* NK-PERF: from .01 statt 0 (LCP) */
@media(prefers-reduced-motion:reduce){
  .hero-mesh span,.hero-slide.active>div:first-child>*,.hero-visual .hv-card{animation:none!important}
  .hero-slide.active>div:first-child>*{opacity:1!important;transform:none!important}
  .hero-visual{transform:none!important}
}

/* ===== SLIDE-HINTERGRUNDANIMATIONEN (V35) ===== */
.hero-slide{position:relative;isolation:isolate}
.hero-slide>div:not(.slide-anim){position:relative;z-index:1}
/* Vertikal über die Slide hinaus bis an die Hero-Kanten gezogen (Hero-Padding +
   Slider-Nav). .hero hat overflow:hidden und beschneidet sauber, sodass die
   Animation die VOLLE Hero-Höhe füllt – nicht nur die volle Breite. */
.slide-anim{position:absolute;top:-160px;bottom:-220px;left:50%;width:100vw;transform:translateX(-50%);z-index:0;pointer-events:none;overflow:hidden}
.slide-anim canvas{width:100%;height:100%;display:block}
.slide-anim svg{width:100%;height:100%;display:block}
/* Slide 2 - Webdesign: akkumulierender Quellcode (Canvas) */
.slide-anim-code{color:var(--slide-accent)}
/* Slide 3 - IT-Service: globale Angriffskarte (Canvas) */
.slide-anim-attack{color:var(--slide-accent)}
/* Slide 4 - Reparatur: Live-Diagnose-Log (Canvas) */
.slide-anim-diag{color:var(--slide-accent)}
/* Slide 5 - Telematik: sichere Datenuebertragung (Canvas) */
.slide-anim-ti{color:var(--slide-accent)}
.hero::before{content:"";position:absolute;top:0;right:0;bottom:0;width:45%;background:linear-gradient(105deg,transparent 0%,color-mix(in srgb,var(--slide-accent-current,var(--brand)) 18%,transparent) 100%);z-index:0;pointer-events:none;transition:background .6s ease}
@media(max-width:979px){.hero::before{display:none}}
/* Hero auf dunklem Hintergrund: Text invertieren */
.hero.is-dark h1,
.hero.is-dark h2,
.hero.is-dark .hero-sub,
.hero.is-dark .hero-feat{color:#fff}
.hero.is-dark .hero-sub{color:rgba(255,255,255,.85)}
.hero.is-dark .hero-feat{color:rgba(255,255,255,.92)}
.hero.is-dark .btn-outline{background:transparent}
.hero.is-dark .slider-dot{background:rgba(255,255,255,.25)}
.hero-slider{position:relative;z-index:2}
.hero-slide{display:none;grid-template-columns:1fr;gap:48px;align-items:center}
.hero-slide.active{display:grid;animation:fadeIn .7s ease}
@keyframes fadeIn{from{opacity:.01;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* NK-PERF: from .01 statt 0 (LCP) */
@media(min-width:980px){.hero-slide{grid-template-columns:1.2fr 1fr;height:520px;min-height:520px}}
.hero h1{margin-bottom:22px}
/* Slide-Überschriften 2–5 sind h2 (nur ein h1 pro Seite), optisch identisch zur h1 */
.hero-slide h2{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:700;letter-spacing:-.025em;line-height:1.2;margin-bottom:22px;color:var(--ink)}
.hero h1 span{color:var(--brand)}
.hero-sub{font-size:clamp(1.02rem,1.2vw,1.15rem);color:var(--ink-mute);max-width:560px;margin-bottom:32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:42px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:var(--radius);font-weight:600;font-size:.92rem;transition:all .2s;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn:hover svg{transform:translateX(3px)}
.btn svg{transition:transform .2s}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff}

.hero-features{display:flex;gap:24px;flex-wrap:wrap}
.hero-feat{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink-2);font-weight:600}
.hero-feat svg{color:var(--success)}

.slider-nav{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none;z-index:5}
.slider-btn{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--slider-color,var(--brand));box-shadow:0 4px 14px -4px color-mix(in srgb,var(--slider-color,var(--brand)) 35%,transparent);display:grid;place-items:center;cursor:pointer;pointer-events:auto;transition:all .3s cubic-bezier(.4,0,.2,1);color:var(--slider-color,var(--brand));padding:0}
.slider-btn:hover{background:var(--slider-color,var(--brand));color:#fff;transform:scale(1.08);box-shadow:0 8px 20px -4px color-mix(in srgb,var(--slider-color,var(--brand)) 50%,transparent)}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:32px;position:relative;z-index:5}
.slider-dot{width:8px;height:8px;border-radius:50%;background:var(--bg-line);cursor:pointer;transition:all .2s;border:none;padding:0}
.slider-dot.active{background:var(--brand);width:24px;border-radius:4px}

.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:440px;--slide-pattern:none}
@media(min-width:980px){.hero-visual{height:100%;min-height:0}}
.hero-visual::before{content:"";position:absolute;inset:-30px -10px -30px 60px;background-image:var(--slide-pattern);background-repeat:no-repeat;background-position:right center;background-size:contain;opacity:.22;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 0%,#000 35%,transparent 78%);mask-image:radial-gradient(ellipse at 70% 50%,#000 0%,#000 35%,transparent 78%);z-index:0;pointer-events:none;animation:slidePatternIn .9s ease-out}
@keyframes slidePatternIn{from{opacity:0;transform:scale(.94)}to{opacity:.22;transform:scale(1)}}
.hv-card{position:absolute;background:#fff;border-radius:var(--radius-lg);padding:18px 20px;box-shadow:0 18px 40px -16px color-mix(in srgb,var(--slide-accent,var(--brand)) 35%,rgba(0,0,0,.15));min-width:230px;border:1px solid color-mix(in srgb,var(--slide-accent,var(--brand)) 18%,var(--bg-line));z-index:3;transition:box-shadow .3s}
/* Foto: sanftes Überblenden beim Slide-Wechsel (reine Opacity, kein Blur/Zoom) */
.hero-visual [class$="-photo"]{filter:saturate(1.04) contrast(1.02);opacity:.01} /* NK-PERF: .01 statt 0 (LCP) */
.hero-slide.active .hero-visual [class$="-photo"]{animation:photoRise 1.6s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes photoRise{from{opacity:.01}to{opacity:1}} /* NK-PERF: from .01 statt 0 (LCP) */
/* Schleier: deckt das GESAMTE Bild gleichmäßig (kein freier Rand), kräftige Deckung. Bild tritt klar zurück. */
.hero-visual::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(12,16,34,.66) 0%,rgba(12,16,34,.50) 42%,rgba(12,16,34,.54) 62%,rgba(12,16,34,.70) 100%),radial-gradient(ellipse at 52% 48%,transparent 24%,color-mix(in srgb,var(--slide-accent,var(--brand)) 30%,transparent) 100%);z-index:2;pointer-events:none;opacity:1}
/* Schleier ist konstant (kein Einblenden mehr) — verhindert Hell-Dunkel-Wechsel beim Slide-Start */
.hero-visual:not(:has([class$="-photo"]))::after{display:none}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
.hv-1{top:30px;left:0;animation:float1 7s ease-in-out infinite}
.hv-2{top:150px;right:10px;animation:float2 8s ease-in-out infinite}
.hv-3{bottom:30px;left:50px;animation:float1 9s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hv-icon{width:42px;height:42px;border-radius:8px;background:color-mix(in srgb,var(--slide-accent,var(--brand)) 12%,#fff);display:grid;place-items:center;margin-bottom:12px;color:var(--slide-accent,var(--brand));border:1px solid color-mix(in srgb,var(--slide-accent,var(--brand)) 25%,transparent)}
.hv-card h4{font-size:.98rem;margin-bottom:4px}
.hv-card p{font-size:.8rem;color:var(--ink-mute)}
.hv-progress{margin-top:12px;height:4px;background:var(--bg-elev);border-radius:2px;overflow:hidden}
.hv-progress span{display:block;height:100%;background:var(--slide-accent,var(--brand));border-radius:2px;animation:fillBar 2.5s ease-out forwards}
@keyframes fillBar{from{width:0}to{width:var(--w,80%)}}
@media(max-width:979px){.hero-visual{display:none}}
/* Slide-spezifische Headline-Akzentfarbe */
.hero-slide{--slide-accent:var(--brand)}
.hero-slide h1 span,.hero-slide h2 span{color:var(--slide-accent)}
.hero-slide .eyebrow{background:color-mix(in srgb,var(--slide-accent) 12%,#fff);color:var(--slide-accent);border-color:color-mix(in srgb,var(--slide-accent) 20%,transparent)}

/* KI-Slide: Foto-Hauptmotiv mit weichem Mask-Übergang, dezente hv-cards */
.hv-ki{align-items:stretch}
.hv-ki-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;border-radius:var(--radius-lg);z-index:0}
.hv-ki::before{opacity:.12}
.hv-ki .hv-card{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:200px;padding:14px 16px;box-shadow:0 14px 32px -12px rgba(124,58,237,.45),0 0 0 1px rgba(255,255,255,.08)}
.hv-ki .hv-card h4{font-size:.92rem}
.hv-ki .hv-card p{font-size:.76rem}
.hv-ki-1{top:auto;bottom:36px;left:auto;right:0}
.hv-ki-2{bottom:36px;left:30px}

/* Webdesign-Slide: Person links-mittig sichtbar, Cards auf rechte Bildseite */
.hv-webdesign{align-items:stretch}
.hv-webdesign-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% center;border-radius:var(--radius-lg);z-index:0}
.hv-webdesign::before{opacity:.12}
.hv-webdesign .hv-card{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:190px;padding:14px 16px;box-shadow:0 14px 32px -12px rgba(220,47,47,.45),0 0 0 1px rgba(255,255,255,.08)}
.hv-webdesign .hv-card h4{font-size:.92rem}
.hv-webdesign .hv-card p{font-size:.76rem}
.hv-wd-1{top:20px;right:0}
.hv-wd-2{bottom:28px;right:18px}

/* Cyber-Slide: Person links-mittig sichtbar, Cards auf rechte Bildseite */
.hv-cyber{align-items:stretch}
.hv-cyber-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% center;border-radius:var(--radius-lg);z-index:0}
.hv-cyber::before{opacity:.12}
.hv-cyber .hv-card{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:190px;padding:14px 16px;box-shadow:0 14px 32px -12px rgba(8,145,178,.45),0 0 0 1px rgba(255,255,255,.08)}
.hv-cyber .hv-card h4{font-size:.92rem}
.hv-cyber .hv-card p{font-size:.76rem}
.hv-cy-1{top:20px;right:0}
.hv-cy-2{bottom:28px;right:18px}

/* Telematik-Slide: Person rechts-mittig sichtbar, Cards auf linke Bildseite */
.hv-telematik{align-items:stretch}
.hv-telematik-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;border-radius:var(--radius-lg);z-index:0}
.hv-telematik::before{opacity:.12}
.hv-telematik .hv-card{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:190px;padding:14px 16px;box-shadow:0 14px 32px -12px rgba(45,134,89,.45),0 0 0 1px rgba(255,255,255,.08)}
.hv-telematik .hv-card h4{font-size:.92rem}
.hv-telematik .hv-card p{font-size:.76rem}
.hv-ti-1{top:20px;left:0}
.hv-ti-2{bottom:28px;left:18px}

/* Reparatur-Slide: Service-Mitarbeiter rechts sichtbar, Cards auf linke Bildseite */
.hv-reparatur{align-items:stretch}
.hv-reparatur-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;border-radius:var(--radius-lg);z-index:0}
.hv-reparatur::before{opacity:.12}
.hv-reparatur .hv-card{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:190px;padding:14px 16px;box-shadow:0 14px 32px -12px rgba(231,111,28,.45),0 0 0 1px rgba(255,255,255,.08)}
/* Card als getöntes Glas in Slide-Akzentfarbe (spürbar farbig, Text bleibt dunkel & lesbar) */
.hero-visual .hv-card{background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 42%,rgba(255,255,255,.95)) 0%,color-mix(in srgb,var(--brand) 32%,rgba(255,255,255,.92)) 100%);border:1px solid color-mix(in srgb,var(--brand) 55%,transparent);box-shadow:0 16px 38px -12px color-mix(in srgb,var(--brand) 60%,transparent),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.55);transition:background .35s ease,border-color .35s ease,box-shadow .3s ease,filter .3s ease}
.hero-visual .hv-card .hv-icon{background:color-mix(in srgb,var(--brand) 22%,#fff);color:var(--brand);transition:background .35s ease,color .35s ease}
.hero-visual .hv-card .hv-progress span{background:var(--brand);transition:background .35s ease}
/* Dezentes Schweben (leicht, asynchron) — feste Position bleibt, nur minimale vertikale Bewegung */
.hero-visual .hv-card{animation:cardFloat 7s ease-in-out infinite;transition:box-shadow .3s ease,filter .3s ease}
.hero-visual .hv-card:nth-of-type(2){animation-duration:8.5s;animation-delay:1.2s}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Hover: nur visueller Effekt (kräftigerer Schatten + leicht heller), KEINE Bewegung des Blocks */
.hero-visual .hv-card:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--slide-accent,var(--brand)) 42%,rgba(255,255,255,.95)) 0%,color-mix(in srgb,var(--slide-accent,var(--brand)) 32%,rgba(255,255,255,.92)) 100%);border-color:color-mix(in srgb,var(--slide-accent,var(--brand)) 55%,transparent);box-shadow:0 22px 52px -12px color-mix(in srgb,var(--slide-accent,var(--brand)) 72%,transparent),0 0 0 1px color-mix(in srgb,var(--slide-accent,var(--brand)) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.6);filter:brightness(1.03) saturate(1.05)}
.hero-visual .hv-card:hover .hv-icon{background:color-mix(in srgb,var(--slide-accent,var(--brand)) 22%,#fff);color:var(--slide-accent,var(--brand))}
.hero-visual .hv-card:hover .hv-progress span{background:var(--slide-accent,var(--brand))}
.hv-reparatur .hv-card h4{font-size:.92rem}
.hv-reparatur .hv-card p{font-size:.76rem}
.hv-rep-1{top:20px;left:0}
.hv-rep-2{bottom:28px;left:18px}

/* ===== STATS ===== */
.stats{padding:72px 0;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);border-bottom:1px solid var(--bg-line)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:24px}}
.stat{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:36px 22px 30px;background:#fff;border:1px solid var(--bg-line);border-radius:18px;box-shadow:0 4px 18px -8px rgba(44,82,130,.12);overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand) 0%,var(--accent) 100%)}
.stat:hover{transform:translateY(-5px);box-shadow:0 18px 40px -16px rgba(44,82,130,.28)}
.stat-ico{width:58px;height:58px;border-radius:14px;background:var(--brand-light);display:grid;place-items:center;color:var(--brand);flex-shrink:0;border:1px solid var(--brand-pale)}
.stat-ico svg{width:28px;height:28px}
.stat-num{font-family:'Rubik',sans-serif;font-size:clamp(2.3rem,5.5vw,3.3rem);font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em}
.stat-lbl{font-size:.92rem;color:var(--ink-mute);margin-top:0;font-weight:500}

/* ===== MARQUEE ===== */
.marquee{padding:36px 0;background:var(--bg-soft);overflow:hidden;border-bottom:1px solid var(--bg-line)}
.marquee-label{text-align:center;color:var(--ink-mute);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;margin-bottom:24px}
.marquee-track{display:flex;gap:56px;animation:scroll 38s linear infinite;width:fit-content}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee-item{font-size:1rem;font-weight:600;color:var(--ink-mute);white-space:nowrap;letter-spacing:.05em;transition:color .2s;flex-shrink:0}
.marquee-item:hover{color:var(--brand)}

/* ===== SECTION ===== */
section{position:relative}
.section{padding:96px 0}
.section-head{max-width:780px;margin-bottom:56px;text-align:center;margin-left:auto;margin-right:auto}
.section-head p{font-size:1.05rem;color:var(--ink-mute);max-width:620px;margin:16px auto 0}

/* ===== SERVICES ===== */
.services{background:#fff}
.svc-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:46px;flex-wrap:wrap;background:var(--bg-soft);padding:8px;border-radius:14px;width:fit-content;margin-left:auto;margin-right:auto;border:1px solid var(--bg-line)}
.svc-tab{padding:15px 34px;border-radius:10px;background:transparent;color:var(--ink-2);font-weight:700;font-size:1.05rem;cursor:pointer;border:none;transition:all .25s;font-family:inherit;display:inline-flex;align-items:center;gap:10px}
.svc-tab svg{width:20px;height:20px;transition:transform .25s}
.svc-tab:hover{color:var(--brand)}
.svc-tab.active{background:var(--brand);color:#fff;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--brand) 60%,transparent)}
.svc-tab.active svg{transform:scale(1.08)}
.svc-panel{display:none}
.svc-panel.active{display:block;animation:fadeIn .4s ease}
.svc-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:680px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc-card{background:#fff;border:2px solid var(--bg-line);border-radius:var(--radius-lg);padding:0;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column}
.svc-card:hover{transform:translateY(-8px);box-shadow:0 26px 56px -16px color-mix(in srgb,var(--svc-color,var(--brand)) 45%,transparent);border-color:var(--svc-color,var(--brand))}
.svc-card:hover .svc-img{transform:scale(1.08)}
.svc-card:hover .svc-img-wrap::after{opacity:.18}
.svc-card:hover .svc-icon{background:var(--svc-color,var(--brand));color:#fff;border-color:var(--svc-color,var(--brand));transform:scale(1.1) rotate(-3deg)}
.svc-card:hover h4{color:var(--svc-color,var(--brand))}
.svc-card:hover .svc-link{gap:10px}
.svc-card h4{transition:color .25s}
.svc-img-wrap{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--bg-soft);border-bottom:1px solid var(--bg-line)}
.svc-img-wrap::after{content:"";position:absolute;inset:0;background:var(--svc-color,var(--brand));opacity:0;transition:opacity .4s;mix-blend-mode:multiply}
.svc-img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block}
.svc-img--logo{object-fit:contain;padding:18px;background:#fff}
.svc-accent{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--svc-color,var(--brand));z-index:2;transform-origin:left;transition:transform .4s}
.svc-body{padding:24px;display:flex;flex-direction:column;flex:1}
.svc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.svc-icon{width:42px;height:42px;border-radius:10px;background:color-mix(in srgb,var(--svc-color,var(--brand)) 12%,#fff);display:grid;place-items:center;color:var(--svc-color,var(--brand));transition:all .35s cubic-bezier(.4,0,.2,1);border:1px solid color-mix(in srgb,var(--svc-color,var(--brand)) 22%,transparent);flex-shrink:0}
.svc-card h4{margin:0;font-size:1.05rem;flex:1;min-width:0}
.svc-card p{font-size:.88rem;color:var(--ink-mute);line-height:1.55;margin-bottom:18px;flex:1}
.svc-link{display:inline-flex;align-items:center;gap:6px;color:var(--svc-color,var(--brand));font-weight:600;font-size:.86rem;margin-top:auto;transition:gap .25s}
.svc-link::after{content:"";position:absolute;inset:0;z-index:2}

/* ===== FEATURE BLOCKS ===== */
.features-blue{background:var(--bg-soft);border-top:1px solid var(--bg-line);border-bottom:1px solid var(--bg-line)}
.fb-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.fb-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.fb-grid{grid-template-columns:repeat(4,1fr)}}
.fb-card{background:var(--brand-3);color:#fff;padding:32px 28px;border-radius:var(--radius-lg);position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;border:1px solid rgba(255,255,255,.06);--fb-color:#1F6FEB}
.fb-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--fb-color) 0%,color-mix(in srgb,var(--fb-color) 70%,#000) 100%);opacity:0;transition:opacity .4s;z-index:0}
.fb-card>*{position:relative;z-index:1}
.fb-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -14px color-mix(in srgb,var(--fb-color) 45%,transparent);border-color:transparent}
.fb-card:hover::before{opacity:1}
.fb-card:hover .fb-arrow{background:#fff;color:var(--fb-color);transform:translateX(4px)}
.fb-card:hover .fb-ico{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3)}
.fb-ico{width:54px;height:54px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;margin-bottom:22px;border:1px solid rgba(255,255,255,.1);transition:all .3s}
.fb-card h4{color:#fff;margin-bottom:12px;font-size:1.15rem}
.fb-card p{color:rgba(255,255,255,.75);font-size:.9rem;line-height:1.6}
.fb-card .fb-arrow{margin-top:20px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;transition:all .3s}

/* ===== PROCESS ===== */
.process{background:#fff;padding:96px 0}
.proc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.proc-step{padding:30px 26px;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-lg);transition:all .25s}
.proc-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.proc-num{width:48px;height:48px;border-radius:8px;background:var(--brand-light);color:var(--brand);display:grid;place-items:center;font-size:1.2rem;font-weight:700;margin-bottom:20px;border:1px solid var(--brand-pale)}
.proc-step:hover .proc-num{background:var(--brand);color:#fff;border-color:var(--brand)}
.proc-step h4{margin-bottom:10px}
.proc-step p{font-size:.9rem;color:var(--ink-mute);line-height:1.6}

/* ===== TESTIMONIALS → Startseite nutzt jetzt das Karussell „.htesti" am Dateiende ===== */

/* ===== WHY US ===== */
.why{background:#fff}
.why-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:980px){.why-grid{grid-template-columns:1fr 1.2fr;gap:64px}}
.why-list{display:flex;flex-direction:column;gap:12px}
.why-item{padding:22px;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-lg);display:flex;gap:18px;transition:all .2s;cursor:pointer;align-items:flex-start}
.why-item:hover{border-color:var(--brand);transform:translateX(4px)}
.why-item:hover .why-ico{background:var(--brand);color:#fff;border-color:var(--brand)}
.why-ico{width:44px;height:44px;border-radius:8px;background:var(--brand-light);color:var(--brand);display:grid;place-items:center;flex-shrink:0;transition:all .25s;border:1px solid var(--brand-pale)}
.why-content{flex:1;min-width:0}
.why-content h4{margin-bottom:6px;font-size:1.02rem}
.why-content p{font-size:.88rem;color:var(--ink-mute);line-height:1.6}

/* ===== REFS ===== */
.refs{background:var(--bg-soft);overflow:hidden;border-top:1px solid var(--bg-line);border-bottom:1px solid var(--bg-line)}
.ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
@media(min-width:560px){.ref-grid{grid-template-columns:repeat(3,1fr)}}
/* Ab 4 Spalten als zentriertes Flex-Raster, damit eine unvolle letzte Reihe mittig steht */
@media(min-width:840px){.ref-grid{display:flex;flex-wrap:wrap;justify-content:center}.ref-grid .ref-item{flex:0 1 calc(25% - 18px)}}
.ref-item{background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:18px 22px;height:220px;display:grid;place-items:center;font-weight:700;color:var(--ink-2);font-size:.85rem;text-align:center;transition:all .35s cubic-bezier(.4,0,.2,1);letter-spacing:.04em;position:relative;overflow:hidden;text-decoration:none}
.ref-item::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);opacity:0;transition:opacity .3s;z-index:0;border-radius:14px}
.ref-item>*{position:relative;z-index:1}
.ref-item:hover{border-color:transparent;transform:translateY(-6px);box-shadow:0 18px 44px -14px rgba(44,82,130,.28)}
.ref-item:hover .ref-logo{filter:grayscale(0%);opacity:1}
.ref-item:hover{border-color:var(--brand);color:var(--brand)}
/* Dunkle Variante für helle Logos auf dunklem Träger (LED Holding, con SWK) */
.ref-item-dark{background:#0f172a;border-color:#1e293b}
.ref-item-dark .ref-logo{filter:none;opacity:1}
.ref-item-dark:hover{background:#1a1f3a;border-color:#1a1f3a}

/* ===== NEWS ===== */
.news{background:#fff}
.news-slider{position:relative;overflow:hidden}
.news-track{display:flex;transition:transform .5s ease;gap:24px}
.news-card{flex:0 0 100%;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-lg);overflow:hidden;transition:all .35s cubic-bezier(.4,0,.2,1);--svc-color:var(--brand);position:relative}
@media(min-width:640px){.news-card{flex:0 0 calc(50% - 12px)}}
@media(min-width:1024px){.news-card{flex:0 0 calc(33.333% - 16px)}}
.news-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--svc-color);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:3}
.news-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px -16px color-mix(in srgb,var(--svc-color) 35%,transparent);border-color:transparent}
.news-card:hover::before{transform:scaleX(1)}
.news-card:hover .news-img{transform:scale(1.04)}
.news-card:hover h4{color:var(--svc-color)}
.news-card h4{transition:color .25s}
.news-img-wrap{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--bg-soft)}
.news-img{width:100%;height:100%;background:var(--brand-3);transition:transform .5s;display:grid;place-items:center;color:rgba(255,255,255,.3);object-fit:cover}
.news-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.news-card:hover .news-img img{transform:scale(1.04)}
.news-cat{position:absolute;top:14px;left:14px;background:var(--svc-color);color:#fff;padding:5px 12px;border-radius:6px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;z-index:2;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--svc-color) 50%,transparent)}
.news-body{padding:24px}
.news-date{font-size:.78rem;color:var(--ink-mute);margin-bottom:10px;font-weight:600;display:flex;align-items:center;gap:6px}
.news-card h4{margin-bottom:10px;font-size:1.05rem;line-height:1.4}
.news-card p{font-size:.86rem;color:var(--ink-mute);line-height:1.55}

/* ===== CTA ===== */
.cta-banner{background:#fff;padding:96px 0}
.cta-inner{background:var(--brand-3);border-radius:var(--radius-lg);padding:64px 48px;text-align:center;position:relative;overflow:hidden;color:#fff;border:1px solid var(--bg-line)}
.cta-inner .eyebrow{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.12)}
.cta-inner h2{color:#fff;margin-bottom:18px;max-width:720px;margin-left:auto;margin-right:auto}
.cta-inner p{color:rgba(255,255,255,.75);max-width:560px;margin:0 auto 32px;font-size:1.02rem}
.cta-inner .btn-primary{background:#fff;color:var(--brand-3);border-color:#fff}
.cta-inner .btn-primary:hover{background:var(--bg-soft);color:var(--brand-3)}
.cta-inner .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cta-inner .btn-outline:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}

/* ===== CONTACT ===== */
.contact{background:var(--bg-soft);padding:96px 0;border-top:1px solid var(--bg-line)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:980px){.contact-grid{grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start}}
.contact-info h2{margin-bottom:18px}
.contact-info > p{color:var(--ink-mute);margin-bottom:32px;font-size:1.02rem}
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-row{display:flex;gap:16px;align-items:center;padding:18px;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-lg);transition:all .2s;cursor:pointer}
.contact-row:hover{border-color:var(--brand);transform:translateX(3px)}
.contact-row:hover .contact-ico{background:var(--brand);color:#fff;border-color:var(--brand)}
.contact-ico{width:42px;height:42px;border-radius:8px;background:var(--brand-light);display:grid;place-items:center;color:var(--brand);flex-shrink:0;transition:all .25s;border:1px solid var(--brand-pale)}
.contact-row-label{font-size:.74rem;color:var(--ink-mute);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.contact-row-value{font-weight:700;color:var(--ink);font-size:.98rem}
.contact-form{background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-lg);padding:36px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
/* B1: nur die erste Zeile (Vorname+Nachname) bleibt zweispaltig; jede weitere Zeile einspaltig -> E-Mail, Telefon je eigene volle Zeile */
.contact-form .form-row ~ .form-row{grid-template-columns:1fr}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column}
.field label{font-size:.78rem;color:var(--ink-2);font-weight:600;margin-bottom:8px}
.field input,.field textarea,.field select{background:var(--bg-soft);border:1px solid var(--bg-line);border-radius:var(--radius);padding:12px 14px;color:var(--ink);font-family:inherit;font-size:.94rem;transition:all .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light)}
.field textarea{min-height:120px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:22px;font-size:.84rem;color:var(--ink-mute)}
.consent input{margin-top:4px;accent-color:var(--brand)}
.consent a{color:var(--brand);font-weight:600}

/* ===== Kontakt: heller Aufbau, Ansprechpartner steht gross aus dem Footer heraus ===== */
.contact{position:relative;overflow:visible}
.contact-top{max-width:720px;margin:0 0 34px}
.contact-top h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:14px}
.contact-top > p{color:var(--ink-mute);font-size:1.04rem;line-height:1.62;max-width:620px}
/* Kontaktdaten als Pillen-Reihe im Kopf (immer sichtbar) */
.cp-contacts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cp-contact{flex:1 1 240px;max-width:320px;display:flex;align-items:center;gap:12px;color:var(--ink);padding:11px 13px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--bg-line);transition:all .2s}
.cp-contact:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(15,26,46,.35)}
.cp-cico{width:38px;height:38px;border-radius:9px;background:var(--brand-light);display:grid;place-items:center;color:var(--brand);flex-shrink:0;border:1px solid var(--brand-pale)}
.cp-ctext{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cp-ctext b{font-family:'Rubik',sans-serif;font-weight:700;font-size:.98rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-ctext small{font-size:.76rem;color:var(--ink-mute)}
.cp-author-line{margin-top:16px;font-size:.94rem;color:var(--ink-mute)}
.cp-author-line strong{font-family:'Rubik',sans-serif;font-weight:800;color:var(--ink)}
/* Frage-Schilder als Wegweiser (mobil zentrierte Reihe, Desktop um die Person) */
.cp-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.cp-tag{display:inline-block;background:#fff;color:var(--brand);font-family:'Rubik',sans-serif;font-weight:700;
  font-size:.82rem;padding:8px 14px;border-radius:10px;border:1px solid var(--bg-line);box-shadow:0 10px 22px -10px rgba(15,26,46,.22)}
.cp-tag:nth-child(odd){transform:rotate(-2deg)}
.cp-tag:nth-child(even){transform:rotate(2deg)}
/* Ansprechpartner: in der rechten Spalte nah am Formular, ragt unten heraus (S10 A4/A5) */
.contact-aside{position:relative}
.contact-person-img{display:block;width:min(78%,380px);max-width:100%;height:auto;margin:24px auto -36px;
  object-fit:contain;object-position:bottom center;filter:drop-shadow(0 28px 36px rgba(15,26,46,.32))}
@media(min-width:980px){
  .contact .container{position:relative}
  .contact-grid{grid-template-columns:1fr .92fr;gap:32px;align-items:end}
  .contact-aside{align-self:stretch;min-height:500px}
  /* Ansprechpartner größer und bündig auf dem Footer (keine Lücke) */
  .contact-person-img{position:absolute;left:46%;bottom:-100px;transform:translateX(-50%);width:clamp(440px,40vw,620px);margin:0;z-index:1;pointer-events:none}
  /* Frage-Schilder in die freie Fläche oben rechts – auf Höhe der Überschrift (H2), dezent schwebend */
  .cp-tags{position:absolute;top:78px;right:0;width:min(44%,480px);height:300px;margin:0;display:block;z-index:3;pointer-events:none}
  .cp-tag{position:absolute;white-space:nowrap;animation:cpFloat 4.5s ease-in-out infinite}
  .cp-tag:nth-child(1){top:4%;left:4%;animation-delay:0s}
  .cp-tag:nth-child(2){top:0;right:2%;animation-delay:.5s}
  .cp-tag:nth-child(3){top:38%;left:0;animation-delay:1s}
  .cp-tag:nth-child(4){top:34%;right:5%;animation-delay:1.6s}
  .cp-tag:nth-child(5){top:70%;left:10%;animation-delay:.9s}
}
@keyframes cpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.cp-tag{animation:none!important}}
@media(max-width:980px){
  .cp-contact{flex:1 1 100%;max-width:none}
}

/* ===== FOOTER (hell, passend zum Gesamtdesign) ===== */
footer{background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);color:var(--ink-mute);padding:80px 0 30px;border-top:1px solid var(--bg-line);position:relative;overflow:hidden;z-index:2}
/* Dezenter Marken-Schimmer oben rechts (statt dunklem Raster) */
footer::after{content:"";position:absolute;top:-30%;right:-8%;width:520px;height:520px;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 7%,transparent) 0%,transparent 65%);pointer-events:none;z-index:0}
.foot-glow-left,.foot-glow-right{display:none}
footer .container{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1fr;gap:48px;margin-bottom:52px}
@media(min-width:640px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr 1fr}}
.foot-brand .logo{color:var(--ink)}
.foot-brand .logo small{color:var(--ink-mute)}
.foot-brand .logo-img{height:auto;max-height:none}
.foot-brand .logo-mark{background:var(--brand)}
/* Blaues Hauptlogo (wie in der Navigation) auf hellem Grund */
.logo-footer-full{display:block;width:92px;max-width:92px;margin-bottom:8px}
.logo.logo-footer-full img.logo-img{width:100%;height:auto;max-height:none;display:block}
.foot-brand p{margin:18px 0;font-size:.92rem;line-height:1.7;max-width:230px;color:var(--ink-mute)}
.foot-jubilee{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;background:var(--brand-light);border:1px solid var(--brand-pale);border-radius:8px;font-size:.74rem;color:var(--brand);font-weight:700;letter-spacing:.08em;margin-top:6px;text-transform:uppercase}
.foot-jubilee svg{color:var(--brand)}
.foot-social{display:flex;gap:10px;margin-top:26px}
.foot-social a{width:40px;height:40px;border-radius:10px;background:var(--bg-soft);display:grid;place-items:center;color:var(--ink-2);transition:all .25s;border:1px solid var(--bg-line)}
.foot-social a:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px -6px color-mix(in srgb,var(--brand) 45%,transparent)}
.foot-col h5{font-size:.78rem;font-weight:700;margin-bottom:20px;color:var(--ink);letter-spacing:.12em;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--bg-line);position:relative}
.foot-col h5::after{content:"";position:absolute;left:0;bottom:-1px;width:28px;height:2px;background:var(--brand)}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-col li{--svc-color:var(--brand)}
.foot-col a{color:var(--ink-2);font-size:.86rem;line-height:1.4;display:inline-flex;align-items:center;gap:10px;transition:all .2s;padding:2px 0}
.foot-col a:hover{color:var(--svc-color);transform:translateX(3px)}
.foot-col a:hover .foot-ico{background:var(--svc-color);color:#fff;border-color:var(--svc-color)}
.foot-ico{width:24px;height:24px;border-radius:6px;background:#fff;color:var(--ink-mute);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--bg-line);transition:all .2s}
.foot-ico svg{width:12px;height:12px}
.foot-bottom{padding-top:28px;border-top:1px solid var(--bg-line);display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;font-size:.82rem;color:var(--ink-mute)}
@media(min-width:768px){.foot-bottom{flex-direction:row;justify-content:space-between;text-align:left}}
.foot-legal{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.foot-legal ul{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0}
.foot-legal li{margin:0}
.foot-legal a{color:var(--ink-2);transition:color .2s}
.foot-legal a:hover{color:var(--brand)}

/* ===== REVEAL ===== */
/* Verstecken nur bei aktivem JS (html.js). Ohne JS bleibt aller Inhalt sichtbar. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.visible{opacity:1;transform:translateY(0)}
.js .reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal-l.visible{opacity:1;transform:translateX(0)}
.js .reveal-r{opacity:0;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal-r.visible{opacity:1;transform:translateX(0)}
.js .reveal-rise{opacity:0;transform:translateY(56px);transition:opacity .8s ease,transform .8s ease}
.js .reveal-rise.visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal-l,.js .reveal-r,.js .reveal-rise{opacity:1;transform:none;transition:none}
}

/* ===== VERWANDTE LEISTUNGEN ===== */
.nk-related{padding:64px 0;border-top:1px solid var(--bg-line)}
.nk-related-title{font-size:clamp(1.4rem,2.5vw,1.9rem);text-align:center;margin-bottom:28px}
.nk-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:980px;margin:0 auto}
.nk-related-card{display:flex;flex-direction:column;gap:7px;padding:22px 22px 20px;background:var(--surface,#fff);border:1px solid var(--bg-line);border-radius:14px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.nk-related-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(15,30,54,.30);border-color:color-mix(in srgb,var(--brand) 40%,var(--bg-line))}
.nk-related-name{font-family:'Rubik',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink)}
.nk-related-blurb{flex:1;font-size:.9rem;line-height:1.55;color:var(--ink-mute)}
.nk-related-go{margin-top:6px;color:var(--brand);display:inline-flex}
@media (prefers-reduced-motion:reduce){
  .nk-related-card{transition:none}
  .nk-related-card:hover{transform:none}
}

/* ===== FAB ===== */
.fab{position:fixed;bottom:24px;right:24px;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px -6px rgba(37,211,102,.4);z-index:200;transition:all .2s}
.fab:hover{transform:scale(1.06)}
/* ===== SCHNELLKONTAKT-LEISTE (rechts/desktop · unten/mobil) =====
   Slide-out ohne Layout-Animation: Button ist voll (Label+Icon) gerendert und
   per translateX so weit nach rechts geschoben, dass nur das 50px-Icon sichtbar
   bleibt; bei Hover/Fokus fährt der ganze Button auf translateX(0) heraus.
   Animiert wird ausschließlich transform/opacity. */
.nk-crail{position:fixed;right:0;top:50%;transform:translateY(calc(-50% + 1cm));z-index:150;width:50px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.nk-crail-btn{--c:var(--brand);pointer-events:auto;display:flex;align-items:center;height:50px;color:#fff;text-decoration:none;background:var(--c);border-radius:10px 0 0 10px;box-shadow:-3px 6px 18px -6px rgba(15,30,54,.35);transform:translateX(calc(100% - 50px));transition:transform .4s cubic-bezier(.22,1,.36,1)}
.nk-crail-btn.c-mail{--c:var(--brand-2)}
.nk-crail-btn.c-wa{--c:#1FA855}
.nk-crail-btn.c-termin{--c:var(--accent)}
.nk-crail-btn.c-fern{--c:var(--brand-3)}
.nk-crail-btn:hover,.nk-crail-btn:focus-visible{transform:translateX(0)}
.nk-crail-btn:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.nk-crail-ico{order:1;flex:0 0 50px;width:50px;height:50px;display:grid;place-items:center}
.nk-crail-lbl{order:2;white-space:nowrap;padding:0 16px 0 4px;font-family:'Rubik',sans-serif;font-weight:600;font-size:.92rem;line-height:1;opacity:.9;transition:opacity .25s ease}
.nk-crail-btn:hover .nk-crail-lbl,.nk-crail-btn:focus-visible .nk-crail-lbl{opacity:1}
@media (max-width:768px){
  .nk-crail{right:0;left:0;top:auto;bottom:0;width:auto;transform:none;flex-direction:row;align-items:stretch;gap:0;background:#fff;border-top:1px solid var(--bg-line);box-shadow:0 -4px 16px rgba(15,30,54,.1)}
  .nk-crail-btn{flex:1;flex-direction:column;height:auto;gap:3px;padding:8px 2px;background:transparent;color:var(--c);border-radius:0;box-shadow:none;transform:none}
  .nk-crail-btn:not(:last-child){border-right:1px solid var(--bg-line)}
  .nk-crail-btn:hover,.nk-crail-btn:focus-visible{transform:none}
  .nk-crail-lbl{order:2;padding:0;font-size:.66rem;font-weight:600;color:var(--ink-2);opacity:1}
  .nk-crail-ico{order:1;flex:none;width:auto;height:auto}
  body{padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){
  .nk-crail-btn{transition:none}
}
/* ===== H1 KI-SCHWERPUNKT-SEKTION ===== */
.ki-section{position:relative;padding:96px 0;background:linear-gradient(180deg,#0b1226 0%,#0d1a2e 50%,#0b1226 100%);color:#fff;overflow:hidden}
.ki-section::before{content:"";position:absolute;inset:0;background-image:
  radial-gradient(circle at 20% 30%,rgba(124,58,237,.18) 0%,transparent 50%),
  radial-gradient(circle at 80% 70%,rgba(56,189,248,.15) 0%,transparent 50%);
  pointer-events:none}
.ki-section::after{content:"";position:absolute;inset:0;background-image:
  radial-gradient(2px 2px at 14% 22%,rgba(167,139,250,.6),transparent),
  radial-gradient(2px 2px at 28% 64%,rgba(125,211,252,.5),transparent),
  radial-gradient(3px 3px at 42% 34%,rgba(167,139,250,.7),transparent),
  radial-gradient(2px 2px at 58% 78%,rgba(125,211,252,.55),transparent),
  radial-gradient(2.5px 2.5px at 72% 24%,rgba(167,139,250,.6),transparent),
  radial-gradient(2px 2px at 86% 56%,rgba(125,211,252,.5),transparent);
  pointer-events:none}
.ki-section .container{position:relative;z-index:1}
.ki-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:linear-gradient(135deg,rgba(167,139,250,.2),rgba(125,211,252,.12));border:1px solid rgba(167,139,250,.35);border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C4B5FD;margin-bottom:24px;backdrop-filter:blur(8px)}
.ki-eyebrow svg{color:#A78BFA}
.ki-section h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.15;margin-bottom:18px;color:#fff}
.ki-section h2 span{color:#A78BFA}
.ki-section .lede{font-size:1.1rem;line-height:1.6;color:rgba(255,255,255,.78);max-width:760px;margin-bottom:48px}

/* KI-Reifegrad-Check */
.ki-quiz{background:rgba(255,255,255,.04);border:1px solid rgba(167,139,250,.25);border-radius:20px;padding:36px;backdrop-filter:blur(12px);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.ki-quiz-head{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.ki-quiz-head-ico{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#7C3AED,#A78BFA);display:grid;place-items:center;color:#fff;box-shadow:0 8px 24px -4px rgba(124,58,237,.5)}
.ki-quiz-head h3{font-size:1.5rem;font-weight:700;margin:0;color:#fff}
.ki-quiz-head .meta{font-size:.86rem;color:#C4B5FD;margin-top:2px}
.ki-quiz-progress{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:rgba(255,255,255,.65);font-size:.84rem}
.ki-quiz-bar{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.ki-quiz-bar-fill{height:100%;background:linear-gradient(90deg,#A78BFA,#7DD3FC);border-radius:3px;transition:width .5s ease}
.ki-quiz-question{font-size:1.18rem;font-weight:600;color:#fff;margin-bottom:18px;line-height:1.4;min-height:60px}
.ki-quiz-options{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px}
@media(min-width:680px){.ki-quiz-options{grid-template-columns:repeat(2,1fr)}}
.ki-quiz-option{padding:14px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#fff;font-size:.94rem;text-align:left;cursor:pointer;transition:all .2s;font-family:inherit}
.ki-quiz-option:hover{background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.5);transform:translateX(2px)}
.ki-quiz-option.selected{background:rgba(167,139,250,.25);border-color:#A78BFA}
.ki-quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ki-quiz-btn{padding:11px 22px;border-radius:8px;font-weight:600;font-size:.92rem;cursor:pointer;transition:all .2s;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;display:inline-flex;align-items:center;gap:8px;font-family:inherit}
.ki-quiz-btn:hover:not(:disabled){background:rgba(255,255,255,.1);transform:translateY(-1px)}
.ki-quiz-btn:disabled{opacity:.35;cursor:not-allowed}
.ki-quiz-btn-primary{background:linear-gradient(135deg,#7C3AED,#A78BFA);border-color:transparent;color:#fff;box-shadow:0 6px 18px -4px rgba(124,58,237,.5)}
.ki-quiz-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#6D28D9,#8B5CF6);transform:translateY(-2px);box-shadow:0 10px 24px -4px rgba(124,58,237,.6)}
/* Ergebnis-View */
.ki-quiz-result{display:none}
.ki-quiz-result.active{display:block}
.ki-quiz-result-score{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.ki-score-circle{position:relative;width:160px;height:160px}
.ki-score-circle svg{transform:rotate(-90deg);width:100%;height:100%}
.ki-score-circle circle{fill:none;stroke-width:12}
.ki-score-circle .bg{stroke:rgba(255,255,255,.08)}
.ki-score-circle .progress{stroke:url(#scoreGrad);stroke-linecap:round;transition:stroke-dashoffset 1.2s ease-out}
.ki-score-num{position:absolute;inset:0;display:grid;place-items:center;flex-direction:column;text-align:center}
.ki-score-num .val{font-size:2.6rem;font-weight:800;color:#fff;line-height:1}
.ki-score-num .max{font-size:.84rem;color:rgba(255,255,255,.5);margin-top:2px}
.ki-result-text{flex:1;min-width:240px}
.ki-result-text h4{font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:8px}
.ki-result-text p{color:rgba(255,255,255,.75);line-height:1.6}
.ki-result-cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.ki-result-cta .btn{padding:12px 22px}
.ki-quiz-reset{background:transparent;border:none;color:#A78BFA;font-size:.86rem;cursor:pointer;text-decoration:underline;font-family:inherit;padding:0;margin-top:14px}

/* KI-FAQ */
.ki-faq{margin-top:64px}
.ki-faq-title{font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:8px}
.ki-faq-sub{color:rgba(255,255,255,.65);margin-bottom:28px;font-size:1rem}
.ki-faq-list{display:flex;flex-direction:column;gap:12px}
.ki-faq-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;transition:all .25s}
.ki-faq-item.open{background:rgba(167,139,250,.08);border-color:rgba(167,139,250,.3)}
.ki-faq-q{width:100%;padding:18px 22px;background:transparent;border:none;color:#fff;font-size:1rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;text-align:left;font-family:inherit}
.ki-faq-q-ico{flex-shrink:0;transition:transform .3s;color:#A78BFA}
.ki-faq-item.open .ki-faq-q-ico{transform:rotate(180deg)}
.ki-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s}
.ki-faq-item.open .ki-faq-a{max-height:400px;padding:0 22px 20px}
.ki-faq-a p{color:rgba(255,255,255,.78);line-height:1.7;font-size:.95rem}

/* ===== KI-TEASER (kompakt, designkonform) ===== */
.ki-teaser{padding:72px 0;background:var(--bg-soft)}
.ki-teaser-card{position:relative;background:linear-gradient(135deg,#fff 0%,#F7F9FC 100%);border:1px solid var(--bg-line);border-radius:20px;padding:48px;display:grid;grid-template-columns:1fr;gap:32px;align-items:center;overflow:hidden;box-shadow:0 12px 32px -16px rgba(15,30,60,.12)}
@media(min-width:780px){.ki-teaser-card{grid-template-columns:1fr auto}}
.ki-teaser-decor{position:absolute;right:-80px;top:-80px;width:340px;height:340px;background:radial-gradient(circle,rgba(124,58,237,.10) 0%,rgba(125,211,252,.06) 40%,transparent 70%);pointer-events:none}
.ki-teaser-card::after{content:"";position:absolute;right:30px;bottom:-50px;width:200px;height:200px;background-image:
  radial-gradient(2px 2px at 20% 30%,rgba(124,58,237,.4),transparent),
  radial-gradient(2px 2px at 60% 70%,rgba(125,211,252,.4),transparent),
  radial-gradient(2.5px 2.5px at 80% 20%,rgba(124,58,237,.3),transparent),
  radial-gradient(2px 2px at 30% 80%,rgba(125,211,252,.3),transparent);
  pointer-events:none;opacity:.7}
.ki-teaser-content{position:relative;z-index:1;max-width:680px}
.ki-teaser-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(125,211,252,.06));border:1px solid rgba(124,58,237,.20);border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7C3AED;margin-bottom:14px}
.ki-teaser-card h3{font-size:1.6rem;font-weight:800;line-height:1.25;color:var(--ink);margin-bottom:12px}
.ki-teaser-card h3 span{color:#7C3AED}
.ki-teaser-card p{color:var(--ink-mute);line-height:1.6;margin-bottom:18px;font-size:.98rem;max-width:600px}
.ki-teaser-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.ki-teaser-tags span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border:1px solid var(--bg-line);border-radius:8px;font-size:.82rem;font-weight:600;color:var(--ink);box-shadow:0 1px 2px rgba(15,30,60,.04)}
.ki-teaser-tags svg{color:#7C3AED}
.ki-teaser-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:linear-gradient(135deg,#7C3AED 0%,#0EA5E9 100%);color:#fff;border-radius:10px;font-weight:600;font-size:.94rem;text-decoration:none;transition:all .2s;box-shadow:0 8px 20px -6px rgba(124,58,237,.4)}
.ki-teaser-cta:hover{transform:translateY(-2px);box-shadow:0 14px 28px -6px rgba(124,58,237,.55)}

/* ===== H8 EYE-CATCHER KI-BERATUNG ===== */
.ki-catcher{position:relative;background:linear-gradient(135deg,#1A2A3E 0%,#0F1A2E 100%);color:#fff;overflow:hidden;border-radius:0}
.ki-catcher::before{content:"";position:absolute;inset:0;background-image:
  radial-gradient(circle at 70% 50%,rgba(124,58,237,.22) 0%,transparent 55%);
  pointer-events:none}
.ki-catcher::after{content:"";position:absolute;inset:0;background-image:
  repeating-linear-gradient(45deg,transparent 0,transparent 60px,rgba(255,255,255,.025) 60px,rgba(255,255,255,.025) 61px),
  repeating-linear-gradient(-45deg,transparent 0,transparent 60px,rgba(255,255,255,.025) 60px,rgba(255,255,255,.025) 61px);
  pointer-events:none}
.ki-catcher .container{position:relative;z-index:2}
.ki-catcher-grid{display:grid;grid-template-columns:1fr;gap:0;align-items:center;min-height:480px}
@media(min-width:980px){.ki-catcher-grid{grid-template-columns:1.2fr 1fr}}
.ki-catcher-content{padding:72px 0}
@media(min-width:980px){.ki-catcher-content{padding:88px 40px 88px 0}}
.ki-catcher-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;background:rgba(167,139,250,.18);border:1px solid rgba(167,139,250,.4);border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C4B5FD;margin-bottom:20px}
.ki-catcher h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;line-height:1.15;margin-bottom:18px;color:#fff}
.ki-catcher h2 span{color:#A78BFA}
.ki-catcher p{font-size:1.06rem;line-height:1.6;color:rgba(255,255,255,.78);margin-bottom:28px;max-width:540px}
.ki-catcher-actions{display:flex;gap:14px;flex-wrap:wrap}
.ki-catcher .btn-primary{background:linear-gradient(135deg,#7C3AED,#A78BFA);border-color:transparent;box-shadow:0 12px 30px -8px rgba(124,58,237,.55);padding:14px 26px;font-size:.98rem}
.ki-catcher .btn-primary:hover{background:linear-gradient(135deg,#6D28D9,#8B5CF6);transform:translateY(-2px);box-shadow:0 18px 40px -8px rgba(124,58,237,.7)}
.ki-catcher .btn-outline{color:#fff;border-color:rgba(255,255,255,.3);padding:14px 26px;font-size:.98rem}
.ki-catcher .btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.ki-catcher-visual{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;min-height:380px}
.ki-catcher-visual::before{content:"";position:absolute;inset:auto 0 0 0;height:80%;background:radial-gradient(ellipse at center bottom,rgba(167,139,250,.28) 0%,transparent 70%);pointer-events:none}
.ki-catcher-person{position:relative;z-index:2;max-width:520px;width:100%;height:auto;border-radius:16px;-webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 95%);mask-image:radial-gradient(ellipse at center,#000 50%,transparent 95%);filter:drop-shadow(0 24px 36px rgba(0,0,0,.4))}
@media(max-width:979px){.ki-catcher-visual{min-height:280px}.ki-catcher-person{max-width:340px}}
/* Animierte KI-Floating-Cards um Person */
.ki-float{position:absolute;background:rgba(255,255,255,.06);backdrop-filter:blur(14px);border:1px solid rgba(167,139,250,.3);border-radius:12px;padding:12px 16px;color:#fff;font-size:.84rem;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 14px 30px -8px rgba(0,0,0,.4);z-index:3}
.ki-float-ico{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#7C3AED,#A78BFA);display:grid;place-items:center;flex-shrink:0;color:#fff}
.ki-float-1{top:18%;left:-6%;animation:floatA 6s ease-in-out infinite}
.ki-float-2{top:42%;right:-4%;animation:floatB 7s ease-in-out infinite}
.ki-float-3{bottom:22%;left:2%;animation:floatA 8s ease-in-out infinite reverse}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:979px){.ki-float-1,.ki-float-2,.ki-float-3{display:none}}

/* ===== H9 CORE WEB VITALS LIVE-ANZEIGE ===== */
.cwv-bar{background:linear-gradient(90deg,#0b1226 0%,#0d1a2e 100%);color:#fff;padding:16px 0;border-top:1px solid rgba(125,211,252,.18);border-bottom:1px solid rgba(125,211,252,.18);position:relative;overflow:hidden}
.cwv-bar::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(56,189,248,.08) 0%,transparent 70%);pointer-events:none}
.cwv-bar .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cwv-headline{display:flex;align-items:center;gap:12px;font-size:.92rem;font-weight:600;color:#fff}
.cwv-headline .pulse{width:10px;height:10px;border-radius:50%;background:#22D3A4;box-shadow:0 0 14px #22D3A4;animation:cwvPulse 2s ease-in-out infinite}
@keyframes cwvPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}
.cwv-metrics{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cwv-metric{display:flex;align-items:baseline;gap:6px;font-size:.84rem;color:rgba(255,255,255,.7)}
.cwv-metric strong{font-family:'Rubik',sans-serif;color:#22D3A4;font-weight:700;font-size:.94rem}
.cwv-headline strong,#cwv-lcp{font-family:'Rubik',sans-serif}
.cwv-metric.warning strong{color:#FBBF24}
.cwv-cta{font-size:.84rem;color:#7DD3FC;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:600}
.cwv-cta:hover{color:#BAE6FD}

/* ===== H7-modifiziert: KI-CTA-BLOCK (Buchung statt Preise) ===== */
.ki-cta-block{padding:80px 0;background:linear-gradient(135deg,#173B5C 0%,#0F2A44 100%);color:#fff;position:relative;overflow:hidden}
.ki-cta-block::before{content:"";position:absolute;top:-30%;right:-15%;width:600px;height:600px;background:radial-gradient(circle,rgba(124,58,237,.18) 0%,transparent 60%);pointer-events:none}
.ki-cta-block::after{content:"";position:absolute;bottom:-30%;left:-15%;width:600px;height:600px;background:radial-gradient(circle,rgba(56,189,248,.15) 0%,transparent 60%);pointer-events:none}
.ki-cta-block .container{position:relative;z-index:1;text-align:center;max-width:820px}
.ki-cta-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;background:rgba(167,139,250,.2);border:1px solid rgba(167,139,250,.4);border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C4B5FD;margin-bottom:20px}
.ki-cta-block h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;line-height:1.2;margin-bottom:18px;color:#fff}
.ki-cta-block h2 span{color:#A78BFA}
.ki-cta-block p{font-size:1.1rem;line-height:1.65;color:rgba(255,255,255,.82);margin-bottom:32px;max-width:680px;margin-left:auto;margin-right:auto}
.ki-cta-block .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ki-cta-block .btn-primary{background:linear-gradient(135deg,#7C3AED,#A78BFA);border-color:transparent;box-shadow:0 12px 30px -8px rgba(124,58,237,.55);padding:14px 28px;font-size:1rem}
.ki-cta-block .btn-primary:hover{background:linear-gradient(135deg,#6D28D9,#8B5CF6);transform:translateY(-2px);box-shadow:0 18px 40px -8px rgba(124,58,237,.7)}
.ki-cta-block .btn-outline{color:#fff;border-color:rgba(255,255,255,.3);padding:14px 28px;font-size:1rem}
.ki-cta-block .btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.ki-cta-trust{display:flex;justify-content:center;gap:32px;margin-top:36px;flex-wrap:wrap;font-size:.86rem;color:rgba(255,255,255,.7)}
.ki-cta-trust div{display:flex;align-items:center;gap:8px}
.ki-cta-trust svg{color:#22D3A4}

/* =========================================================================
   WordPress-Ergänzungen (Theme-spezifisch, nicht im Original-Prototyp)
   ========================================================================= */

/* Accessibility: Skip-Link & Screen-Reader-Text */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:9999;display:inline-block;padding:12px 20px;background:var(--brand);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);clip:auto;clip-path:none;width:auto;height:auto;font-weight:700}

/* Schmalerer Lese-Container für Inhalte */
.container--narrow{max-width:820px}

/* Formular-Status-Meldungen */
.form-notice{padding:14px 18px;border-radius:var(--radius);font-size:.92rem;font-weight:600;margin-bottom:8px;border:1px solid}
.form-notice--ok{background:color-mix(in srgb,var(--success) 10%,#fff);border-color:color-mix(in srgb,var(--success) 35%,transparent);color:var(--success)}
.form-notice--err{background:color-mix(in srgb,var(--warn) 10%,#fff);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn)}

/* Beitrags-/Archiv-Grid */
.nk-post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;margin-top:40px}
.nk-post-grid .news-card{width:auto}
.nk-card-link{display:flex;flex-direction:column;height:100%;color:inherit}

/* Single / Page Inhalt */
.nk-entry-head{margin-bottom:28px}
.nk-entry-title{margin:14px 0 12px}
.nk-entry-meta{color:var(--ink-mute);font-size:.9rem;display:flex;align-items:center;gap:8px}
.nk-entry-thumb{margin:0 0 28px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.nk-entry-thumb img{width:100%;height:auto}
.nk-entry-content{font-size:1.05rem;line-height:1.8;color:var(--ink-2)}
.nk-entry-content > *{margin-bottom:1.1em}
.nk-entry-content h2{margin:1.4em 0 .5em}
.nk-entry-content h3{margin:1.2em 0 .5em}
.nk-entry-content a{color:var(--brand);text-decoration:underline}
.nk-entry-content a:hover{color:var(--brand-2)}
.nk-entry-content ul,.nk-entry-content ol{padding-left:1.4em}
.nk-entry-content li{margin-bottom:.4em}
.nk-entry-content blockquote{background:var(--bg-soft);border-radius:10px;padding:14px 20px;color:var(--ink-mute);font-style:italic;margin:1.2em 0}
.nk-entry-content img{border-radius:var(--radius-lg);height:auto}
.nk-entry-content pre{background:var(--brand-3);color:#fff;padding:18px;border-radius:var(--radius);overflow:auto;font-size:.9rem}
.nk-entry-content code{background:var(--bg-elev);padding:2px 6px;border-radius:4px;font-size:.9em}
.nk-entry-content pre code{background:none;padding:0}
.nk-entry-footer{margin-top:32px}
.nk-tags a{display:inline-block;background:var(--brand-light);color:var(--brand);padding:5px 12px;border-radius:4px;font-size:.8rem;font-weight:600;margin:0 6px 6px 0}

/* Block-/Ausrichtungs-Klassen */
.alignwide{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
@media(min-width:1100px){.alignwide{margin-left:-120px;margin-right:-120px}}
.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption{font-size:.85rem;color:var(--ink-mute);text-align:center;margin-top:8px}
.sticky .nk-entry-title::before{content:"★ ";color:var(--warn)}

/* Pagination (Scope strikt auf .pagination, NICHT global .nav-links – sonst rutscht das Hauptmenü nach unten) */
.pagination{margin-top:48px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:0}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--bg-line);border-radius:var(--radius);font-weight:600;color:var(--ink-2);background:#fff;transition:all .2s}
.pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.pagination .page-numbers.current{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Suchformular */
.search-form{display:flex;gap:10px;flex-wrap:wrap}
.search-form .search-field{flex:1;min-width:200px;padding:12px 16px;border:1px solid var(--bg-line);border-radius:var(--radius);font:inherit;background:#fff}
.search-form .search-submit{padding:12px 22px;background:var(--brand);color:#fff;border:none;border-radius:var(--radius);font-weight:600;cursor:pointer}
.search-form .search-submit:hover{background:var(--brand-2)}

/* Kommentare */
.comments-area{margin-top:48px;padding-top:32px;border-top:1px solid var(--bg-line)}
.comment-list{list-style:none;padding:0}
.comment-list .comment{margin-bottom:24px}
.comment-body{background:var(--bg-soft);border:1px solid var(--bg-line);border-radius:var(--radius-lg);padding:20px}
.comment-author{font-weight:700;display:flex;align-items:center;gap:10px}
.comment-meta{font-size:.82rem;color:var(--ink-mute);margin-bottom:8px}
.comment-respond{margin-top:32px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:12px 16px;border:1px solid var(--bg-line);border-radius:var(--radius);font:inherit;margin-top:6px;background:#fff}
.comment-form .submit{padding:12px 24px;background:var(--brand);color:#fff;border:none;border-radius:var(--radius);font-weight:600;cursor:pointer;margin-top:12px}

/* Admin-Bar-Abstand für sticky Nav */
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}

/* =========================================================================
   LEISTUNGSSEITE WEBDESIGN (page-webdesign.php) – eigenständiges Design
   ========================================================================= */
.wd-page{--wd-accent:#6366F1;--wd-accent2:#06B6D4}

/* ---- HERO ---- */
.wd-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b1226 0%,#15183a 45%,#2a1850 100%);color:#fff;padding:84px 0 96px;border-bottom:1px solid rgba(255,255,255,.06)}
.wd-hero-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.55}
.wd-hero-mesh span{position:absolute;border-radius:50%;filter:blur(80px);mix-blend-mode:screen;will-change:transform}
.wd-hero-mesh span:nth-child(1){width:48%;height:62%;top:-10%;left:-6%;background:radial-gradient(circle,color-mix(in srgb,var(--wd-accent) 75%,transparent),transparent 70%);animation:mesh1 20s ease-in-out infinite}
.wd-hero-mesh span:nth-child(2){width:42%;height:58%;bottom:-14%;right:-6%;background:radial-gradient(circle,color-mix(in srgb,var(--wd-accent2) 65%,#3a2a6e),transparent 70%);animation:mesh2 24s ease-in-out infinite}
.wd-hero-mesh span:nth-child(3){width:36%;height:50%;top:28%;left:36%;background:radial-gradient(circle,color-mix(in srgb,var(--wd-accent) 45%,#0b2a45),transparent 70%);animation:mesh3 28s ease-in-out infinite}
.wd-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:54px;align-items:center}
@media(min-width:992px){.wd-hero-inner{grid-template-columns:1.05fr .95fr}}

.wd-hero-text{position:relative;min-height:430px}
.wd-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.wd-slide.active{opacity:1;visibility:visible;transform:none;position:relative}
.wd-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:50px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px;color:#fff}
.wd-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--wd-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--wd-accent) 30%,transparent)}
.wd-slide h1{font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:18px}
.wd-slide h1 span{color:var(--wd-accent)}
.wd-slide p{font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,.78);max-width:560px;margin-bottom:26px}
.wd-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.wd-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:10px;font-weight:700;font-size:.96rem;transition:transform .2s,box-shadow .2s,background .2s}
.wd-btn-primary{background:linear-gradient(100deg,var(--wd-accent),var(--wd-accent2));color:#fff;box-shadow:0 12px 30px -10px color-mix(in srgb,var(--wd-accent) 70%,transparent)}
.wd-btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -10px color-mix(in srgb,var(--wd-accent) 80%,transparent)}
.wd-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.wd-btn-ghost:hover{background:rgba(255,255,255,.16)}
.wd-checks{display:flex;flex-wrap:wrap;gap:8px 22px}
.wd-checks span{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:rgba(255,255,255,.85);font-weight:600}
.wd-checks svg{color:var(--wd-accent2);flex-shrink:0}

.wd-hero-nav{position:relative;z-index:2;display:flex;align-items:center;gap:14px;margin-top:30px}
.wd-hero-dots{display:flex;gap:8px}
.wd-dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:all .25s}
.wd-dot.active{width:28px;border-radius:5px;background:linear-gradient(100deg,var(--wd-accent),var(--wd-accent2))}
.wd-arrow{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;transition:background .2s}
.wd-arrow:hover{background:rgba(255,255,255,.18)}

/* ---- HERO-VISUAL: animiertes Browser-Mockup ---- */
.wd-hero-visual{position:relative;z-index:2}
.wd-browser{background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;animation:wdFloat 7s ease-in-out infinite}
.wd-browser-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;background:#eef1f6;border-bottom:1px solid #e2e7ef}
.wd-browser-bar i{width:11px;height:11px;border-radius:50%;display:block}
.wd-browser-bar i:nth-child(1){background:#ff5f57}.wd-browser-bar i:nth-child(2){background:#febc2e}.wd-browser-bar i:nth-child(3){background:#28c840}
.wd-url{flex:1;margin-left:10px;background:#fff;border:1px solid #e2e7ef;border-radius:7px;padding:7px 12px;font-size:.78rem;color:#5B6678;font-family:ui-monospace,Menlo,Consolas,monospace;display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap}
.wd-url svg{color:#1F8744;flex-shrink:0}
.wd-url .typed{overflow:hidden;white-space:nowrap;border-right:2px solid var(--wd-accent);animation:wdType 6s steps(28) infinite}
.wd-browser-body{padding:20px;background:linear-gradient(180deg,#fff,#f7f9fc);min-height:340px}
.wd-blk{border-radius:9px;background:linear-gradient(100deg,#eef1f6 30%,#f6f8fb 50%,#eef1f6 70%);background-size:200% 100%;animation:wdShimmer 2.4s linear infinite,wdRise .7s cubic-bezier(.22,.61,.36,1) backwards}
.wd-blk.h-hero{height:96px;margin-bottom:16px;background:linear-gradient(110deg,color-mix(in srgb,var(--wd-accent) 22%,#eef1f6),color-mix(in srgb,var(--wd-accent2) 22%,#f6f8fb));animation-delay:.05s,.05s}
.wd-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.wd-row .wd-blk{height:64px}
.wd-row .wd-blk:nth-child(1){animation-delay:1.6s,.18s}
.wd-row .wd-blk:nth-child(2){animation-delay:1.8s,.26s}
.wd-row .wd-blk:nth-child(3){animation-delay:2.0s,.34s}
.wd-lines .wd-blk{height:12px;margin-bottom:10px}
.wd-lines .wd-blk:nth-child(1){width:90%;animation-delay:2.2s,.42s}
.wd-lines .wd-blk:nth-child(2){width:78%;animation-delay:2.35s,.5s}
.wd-lines .wd-blk:nth-child(3){width:84%;animation-delay:2.5s,.58s}
.wd-blk.btn{height:38px;width:150px;margin-top:16px;border-radius:8px;background:linear-gradient(100deg,var(--wd-accent),var(--wd-accent2));animation:wdRise .7s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:2.7s}

.wd-float{position:absolute;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);border-radius:12px;padding:11px 15px;box-shadow:0 18px 40px -14px rgba(8,12,30,.5);display:flex;align-items:center;gap:11px;backdrop-filter:blur(8px);animation:wdFloat 6s ease-in-out infinite}
.wd-float .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.wd-float b{display:block;font-size:.95rem;color:var(--ink);line-height:1.1}
.wd-float small{font-size:.72rem;color:var(--ink-mute)}
.wd-float-1{top:-22px;right:-12px;animation-delay:.4s}
.wd-float-1 .ico{background:#1F8744}
.wd-float-2{bottom:40px;left:-26px;animation-delay:1.2s}
.wd-float-2 .ico{background:var(--wd-accent)}
.wd-float-3{bottom:-20px;right:24px;animation-delay:2s}
.wd-float-3 .ico{background:var(--warn)}
@media(max-width:560px){.wd-float-2{left:-8px}.wd-float-1{right:0}}

@keyframes wdShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes wdRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes wdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wdType{0%{width:0}45%{width:13.5em}55%{width:13.5em}100%{width:0}}
@media(prefers-reduced-motion:reduce){.wd-browser,.wd-float{animation:none}.wd-blk{animation:none}.wd-url .typed{animation:none;border-right:none}}

/* ===== Service-Leistungsseiten (auf Basis der Webdesign-Seite) ===== */
.wd-svc .wd-hero-text{min-height:auto}
/* Themen-Animation (Canvas) hinter dem Hero, eingefärbt über --wd-accent */
.wd-svc .wd-hero-mesh{opacity:.38}
.wd-svc .wd-hero .slide-anim{z-index:1}
.wd-svc .wd-hero-text h1{font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:18px}
.wd-svc .wd-hero-text h1 span{color:var(--wd-accent)}
.wd-svc .wd-hero-text>p{font-size:clamp(1.02rem,1.2vw,1.15rem);color:rgba(255,255,255,.82);line-height:1.7;margin-bottom:30px;max-width:580px}
.wd-hero-photo{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);animation:wdFloat 7s ease-in-out infinite}
.wd-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 52%,color-mix(in srgb,var(--wd-accent) 60%,transparent));mix-blend-mode:multiply;opacity:.38}
.wd-hero-photo img{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:reduce){.wd-hero-photo{animation:none}}
/* Split-Band (Bild + Text) auf Serviceseiten */
.wd-split{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:920px){.wd-split{grid-template-columns:1fr 1fr;gap:60px}.wd-split.rev .wd-split-media{order:2}}
.wd-split-media img{width:100%;height:auto;border-radius:18px;box-shadow:0 34px 66px -26px rgba(15,30,54,.42);display:block}
.wd-split-text h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px}
.wd-split-text>p{color:var(--ink-mute);font-size:1.05rem;line-height:1.7;margin-bottom:22px}
.wd-split-text .wd-checks span{color:var(--ink-2)}
.wd-split-text .wd-checks svg{color:var(--success)}

/* ===== Signatur SEO: Google-SERP-Mockup im Hero ===== */
.seo-serp{background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:var(--ink)}
.seo-serp-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#f7f9fc;border-bottom:1px solid #e7ebf1}
.seo-serp-bar .g{display:flex;gap:5px}
.seo-serp-bar .g i{width:10px;height:10px;border-radius:50%}
.seo-serp-bar .g i:nth-child(1){background:#ff5f57}.seo-serp-bar .g i:nth-child(2){background:#febc2e}.seo-serp-bar .g i:nth-child(3){background:#28c840}
.seo-serp-search{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e7ef;border-radius:50px;padding:7px 14px;font-size:.82rem;color:#5B6678}
.seo-serp-search svg{color:var(--wd-accent);flex-shrink:0}
.seo-serp-body{padding:14px 16px 18px}
.seo-serp-row{padding:11px 12px;border-radius:10px;margin-bottom:9px;position:relative}
.seo-serp-row.top{background:color-mix(in srgb,var(--wd-accent) 9%,#fff);border:1px solid color-mix(in srgb,var(--wd-accent) 30%,transparent)}
.seo-serp-row.dim{opacity:.5}
.seo-serp-url{font-size:.72rem;color:#1F8744;display:flex;align-items:center;gap:6px}
.seo-serp-title{font-size:.95rem;color:#1a4fd6;font-weight:700;margin:3px 0 7px}
.seo-serp-line{height:6px;background:#e7ebf1;border-radius:3px}
.seo-serp-line.s{width:88%;margin-bottom:5px}.seo-serp-line.t{width:64%}
.seo-serp-rank{position:absolute;top:11px;right:11px;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:.82rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2))}

/* ===== Signatur SEO: Vorher/Nachher-Ranking ===== */
.seo-ba{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;max-width:940px;margin:0 auto}
@media(min-width:760px){.seo-ba{grid-template-columns:1fr auto 1fr}}
.seo-ba-card{background:#fff;border:1px solid var(--bg-line);border-radius:18px;padding:30px 26px;text-align:center}
.seo-ba-card.after{background:linear-gradient(160deg,var(--brand-3),#1b2a4a);color:#fff;border:none;box-shadow:0 30px 60px -24px rgba(15,30,54,.45)}
.seo-ba-tag{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.seo-ba-card.after .seo-ba-tag{color:rgba(255,255,255,.6)}
.seo-ba-pos{font-family:'Rubik',sans-serif;font-weight:800;font-size:2.7rem;line-height:1;margin:10px 0 4px;color:var(--ink-mute)}
.seo-ba-card.after .seo-ba-pos{color:#fff}
.seo-ba-sub{font-size:.9rem;color:var(--ink-mute)}
.seo-ba-card.after .seo-ba-sub{color:rgba(255,255,255,.72)}
.seo-ba-arrow{display:grid;place-items:center;color:var(--wd-accent)}
@media(max-width:759px){.seo-ba-arrow{transform:rotate(90deg)}}
.seo-metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.seo-metric{background:#fff;border:1px solid var(--bg-line);border-radius:50px;padding:10px 20px;display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ink-2);font-size:.9rem}
.seo-metric b{font-family:'Rubik',sans-serif;font-weight:800;color:var(--wd-accent)}

/* ===== Hover: Vorher/Nachher-Karten ===== */
.seo-ba-card{box-shadow:0 14px 34px -22px rgba(15,30,54,.16);transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .35s}
.seo-ba-card::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);transition:left .65s ease;pointer-events:none}
.seo-ba-card{position:relative;overflow:hidden}
.seo-ba-card:hover{transform:translateY(-8px) scale(1.02);border-color:var(--wd-accent);box-shadow:0 28px 56px -22px rgba(15,30,54,.32)}
.seo-ba-card.after:hover{box-shadow:0 34px 70px -22px color-mix(in srgb,var(--wd-accent) 55%,rgba(15,30,54,.55))}
.seo-ba-card:hover::after{left:130%}
.seo-ba:hover .seo-ba-arrow svg{animation:seoArrow .9s ease infinite}
@keyframes seoArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
.seo-metric{transition:transform .25s,border-color .25s,box-shadow .25s}
.seo-metric:hover{transform:translateY(-4px);border-color:var(--wd-accent);box-shadow:0 14px 28px -16px color-mix(in srgb,var(--wd-accent) 50%,transparent)}

/* ===== Hover: Prozess-Schritte (1–5) ===== */
.wd-step{transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.wd-step .n{position:relative;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.wd-step .n::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid color-mix(in srgb,var(--wd-accent) 50%,transparent);opacity:0;transform:scale(.7)}
.wd-step h4{transition:color .25s}
.wd-step:hover{transform:translateY(-6px)}
.wd-step:hover .n{transform:scale(1.14) rotate(-8deg);box-shadow:0 18px 38px -8px color-mix(in srgb,var(--wd-accent) 75%,transparent)}
.wd-step:hover .n::after{animation:wdRing 1.3s ease-out infinite}
.wd-step:hover h4{color:var(--wd-accent)}
@keyframes wdRing{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.4);opacity:0}}

/* ===== Hover: FAQ ===== */
.wd-faq details{transition:box-shadow .25s,border-color .25s,transform .25s}
.wd-faq details:hover{border-color:color-mix(in srgb,var(--wd-accent) 45%,var(--bg-line));box-shadow:0 16px 36px -18px rgba(15,30,54,.22);transform:translateX(6px)}
.wd-faq summary{transition:color .2s}
.wd-faq details:hover summary{color:var(--wd-accent)}
.wd-faq summary .pl{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.wd-faq details:not([open]):hover summary .pl{transform:rotate(90deg) scale(1.15)}

/* ===== Foto-Band mit Text-Overlay ===== */
.seo-band{position:relative;border-radius:24px;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;box-shadow:0 30px 70px -30px rgba(15,30,54,.4)}
.seo-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.seo-band:hover img{transform:scale(1.06)}
.seo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,38,.05) 25%,rgba(11,18,38,.9) 100%)}
.seo-band-text{position:relative;z-index:2;padding:38px;color:#fff;max-width:680px}
.seo-band-text .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.seo-band-text h3{font-family:'Rubik',sans-serif;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:12px 0 10px;color:#fff}
.seo-band-text p{color:rgba(255,255,255,.82);line-height:1.65;font-size:.98rem}

/* ===== Kontakt-Sektion im Hero-Stil (dunkel, Google & KI) ===== */
.seo-kontakt{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b1226 0%,#15183a 45%,#2a1850 100%);color:#fff;padding:90px 0;border-top:1px solid rgba(255,255,255,.06)}
.seo-kontakt-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:980px){.seo-kontakt-inner{grid-template-columns:1.05fr 1fr;gap:60px}}
.seo-kontakt-text h2{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.02em;margin:16px 0 18px;color:#fff}
.seo-kontakt-text h2 span{color:var(--wd-accent)}
.seo-kontakt-text>p{color:rgba(255,255,255,.78);line-height:1.7;max-width:520px}
.seo-kontakt-list{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.seo-kontakt-list span,.seo-kontakt-list a{display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.92);font-weight:600;font-size:.95rem;text-decoration:none}
.seo-kontakt-list svg{color:var(--wd-accent);flex-shrink:0}
.seo-kontakt-list a:hover{color:#fff;text-decoration:underline}
.seo-kontakt .contact-form{border:none;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.seo-kontakt .wd-hero-mesh{opacity:.5}

/* ===== SEO-Wissen: W-Fragen (Antwort-zuerst) ===== */
.seo-wissen{display:grid;grid-template-columns:1fr;gap:18px;max-width:1000px;margin:0 auto}
@media(min-width:740px){.seo-wissen{grid-template-columns:1fr 1fr}}
.seo-q{background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:24px 26px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-left-color .3s}
.seo-q:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(15,30,54,.26)}
.seo-q h3{font-size:1.1rem;margin-bottom:10px;color:var(--ink);display:flex;align-items:center;gap:10px}
.seo-q h3 .wq{flex-shrink:0;font-family:'Rubik',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));padding:3px 8px;border-radius:6px}
.seo-q p{color:var(--ink-mute);line-height:1.65;font-size:.95rem;margin:0}
.seo-q p b{color:var(--ink);font-weight:700}

/* ---- TRUST/STATS-BAR ---- */
.wd-trust{background:var(--brand-3);color:#fff;padding:30px 0}
.wd-trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;text-align:center}
@media(min-width:760px){.wd-trust-grid{grid-template-columns:repeat(4,1fr)}}
.wd-trust .num{font-family:'Rubik',sans-serif;font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:800;color:#fff;line-height:1}
.wd-trust .lbl{font-size:.85rem;color:rgba(255,255,255,.66);margin-top:6px;font-weight:600}

/* ---- GENERISCHE WD-SEKTIONEN ---- */
.wd-sec{padding:88px 0}
.wd-sec.alt{background:var(--bg-soft)}
.wd-head{max-width:720px;margin:0 auto 50px;text-align:center}
.wd-head .eyebrow{margin-left:auto;margin-right:auto}
.wd-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:14px}
.wd-head p{color:var(--ink-mute);font-size:1.04rem}

/* Leistungs-Karten */
.wd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.wd-card{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:26px;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s;position:relative;overflow:hidden;--c:var(--wd-accent)}
.wd-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.wd-card:hover{transform:translateY(-6px);box-shadow:0 26px 52px -18px color-mix(in srgb,var(--c) 55%,rgba(15,30,54,.22));border-color:color-mix(in srgb,var(--c) 38%,transparent)}
.wd-card:hover::before{transform:scaleX(1)}
.wd-card:hover h3{color:var(--c)}
.wd-card .wd-ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);margin-bottom:18px;transition:all .3s}
.wd-card:hover .wd-ico{background:var(--c);color:#fff;transform:scale(1.06) rotate(-4deg)}
.wd-card h3{font-size:1.18rem;margin-bottom:10px}
.wd-card p{color:var(--ink-mute);font-size:.94rem;line-height:1.6}
.wd-card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.wd-card li{font-size:.86rem;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.wd-card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex-shrink:0}

/* Abo-Highlight */
.wd-abo-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:860px){.wd-abo-grid{grid-template-columns:repeat(3,1fr)}}
.wd-abo-card{background:#fff;border:1px solid var(--bg-line);border-radius:18px;padding:30px;position:relative}
.wd-abo-card.feat{background:linear-gradient(160deg,var(--brand-3),#1b2a4a);color:#fff;border:none;box-shadow:0 30px 60px -24px rgba(15,30,54,.45)}
.wd-abo-card.feat h3,.wd-abo-card.feat p{color:#fff}
.wd-abo-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(100deg,var(--wd-accent),var(--wd-accent2));color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:50px;white-space:nowrap}
.wd-abo-card h3{font-size:1.3rem;margin-bottom:8px}
.wd-abo-card .lead{color:var(--ink-mute);font-size:.92rem;margin-bottom:18px}
.wd-abo-card.feat .lead{color:rgba(255,255,255,.7)}
.wd-ablist{list-style:none;display:flex;flex-direction:column;gap:11px}
.wd-ablist li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;line-height:1.4}
.wd-ablist svg{color:var(--success);flex-shrink:0;margin-top:2px}
.wd-abo-card.feat .wd-ablist svg{color:#5BE3A4}
.wd-abo-quote{max-width:760px;margin:40px auto 0;text-align:center;font-size:1.1rem;line-height:1.7;color:var(--ink-2);font-style:italic;border-top:1px solid var(--bg-line);padding-top:32px}

/* Webdesign-Abo: Preis-Tarife */
.wd-price-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch}
@media(min-width:860px){.wd-price-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.wd-price-card{background:#fff;border:1px solid var(--bg-line);border-radius:18px;padding:30px 26px;position:relative;display:flex;flex-direction:column}
.wd-price-card.feat{background:linear-gradient(160deg,var(--brand-3),#1b2a4a);color:#fff;border:none;box-shadow:0 30px 60px -24px rgba(15,30,54,.45)}
@media(min-width:860px){.wd-price-card.feat{transform:scale(1.045);z-index:2}}
.wd-price-name{font-family:'Rubik',sans-serif;font-weight:800;font-size:1.35rem;color:var(--ink)}
.wd-price-card.feat .wd-price-name{color:#fff}
.wd-price-desc{color:var(--ink-mute);font-size:.9rem;line-height:1.5;margin:8px 0 12px;min-height:40px}
.wd-price-card.feat .wd-price-desc{color:rgba(255,255,255,.72)}
.wd-price-amount{display:flex;align-items:baseline;gap:7px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--bg-line)}
.wd-price-card.feat .wd-price-amount{border-color:rgba(255,255,255,.16)}
.wd-price-amount .from{font-size:.85rem;font-weight:600;color:var(--ink-mute)}
.wd-price-amount .val{font-family:'Rubik',sans-serif;font-weight:800;font-size:2.7rem;line-height:1;color:var(--ink)}
.wd-price-amount .per{font-size:.9rem;font-weight:600;color:var(--ink-mute)}
.wd-price-card.feat .wd-price-amount .val{color:#fff}
.wd-price-card.feat .wd-price-amount .from,.wd-price-card.feat .wd-price-amount .per{color:rgba(255,255,255,.7)}
.wd-price-card .wd-btn{justify-content:center;width:100%;margin-bottom:22px}
.wd-price-incl{font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px}
.wd-price-card.feat .wd-price-incl{color:rgba(255,255,255,.6)}
.wd-price-card .wd-ablist li{font-size:.9rem;color:var(--ink-2)}
.wd-price-card.feat .wd-ablist li{color:rgba(255,255,255,.92)}
.wd-price-card.feat .wd-ablist svg{color:#5BE3A4}
.wd-price-note{text-align:center;color:var(--ink-mute);font-size:.85rem;margin-top:26px}
.wd-btn-soft{background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);border:1px solid color-mix(in srgb,var(--wd-accent) 28%,transparent)}
.wd-btn-soft:hover{background:color-mix(in srgb,var(--wd-accent) 20%,#fff);transform:translateY(-2px)}

/* Prozess */
.wd-process{display:grid;grid-template-columns:1fr;gap:20px;counter-reset:wd}
@media(min-width:680px){.wd-process{grid-template-columns:repeat(5,1fr)}}
.wd-step{position:relative;text-align:center;padding:0 8px}
.wd-step .n{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.2rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 10px 24px -8px color-mix(in srgb,var(--wd-accent) 65%,transparent)}
.wd-step h4{font-size:1.02rem;margin-bottom:8px}
.wd-step p{font-size:.86rem;color:var(--ink-mute);line-height:1.55}
@media(min-width:680px){.wd-step:not(:last-child)::after{content:"";position:absolute;top:28px;left:calc(50% + 36px);right:calc(-50% + 36px);height:2px;background:linear-gradient(90deg,var(--bg-line),var(--bg-line))}}

/* Tech-Stack */
.wd-tech-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.wd-chip{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;background:#fff;border:1px solid var(--bg-line);border-radius:50px;font-weight:700;color:var(--ink-2);font-size:.95rem;transition:all .25s}
.wd-chip:hover{border-color:var(--wd-accent);color:var(--wd-accent);transform:translateY(-2px)}
.wd-chip .d{width:10px;height:10px;border-radius:50%;background:var(--wd-accent)}

/* Portfolio */
.wd-pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} /* 2 pro Zeile (S22) – größere Mockups */
@media(max-width:700px){.wd-pf-grid{grid-template-columns:1fr}}
.wd-pf{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:24px;transition:transform .3s,box-shadow .3s}
.wd-pf:hover{transform:translateY(-5px);box-shadow:0 22px 46px -18px rgba(15,30,54,.2)}
.wd-pf .cat{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--wd-accent)}
.wd-pf h4{font-size:1.12rem;margin:8px 0 4px}
.wd-pf .meta{font-size:.85rem;color:var(--ink-mute);margin-bottom:12px}
.wd-pf .tags{display:flex;flex-wrap:wrap;gap:6px}
.wd-pf .tags span{font-size:.74rem;background:var(--bg-elev);color:var(--ink-2);padding:4px 10px;border-radius:6px;font-weight:600}

/* FAQ */
.wd-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.wd-faq details{background:#fff;border:1px solid var(--bg-line);border-radius:12px;overflow:hidden;transition:box-shadow .25s}
.wd-faq details[open]{box-shadow:0 14px 34px -16px rgba(15,30,54,.18)}
.wd-faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:1.01rem}
.wd-faq summary::-webkit-details-marker{display:none}
.wd-faq summary .pl{width:24px;height:24px;flex-shrink:0;position:relative}
.wd-faq summary .pl::before,.wd-faq summary .pl::after{content:"";position:absolute;background:var(--wd-accent);border-radius:2px;transition:transform .25s}
.wd-faq summary .pl::before{top:11px;left:4px;width:16px;height:2px}
.wd-faq summary .pl::after{top:4px;left:11px;width:2px;height:16px}
.wd-faq details[open] summary .pl::after{transform:rotate(90deg);opacity:0}
.wd-faq .a{padding:0 22px 20px;color:var(--ink-mute);line-height:1.7;font-size:.95rem}

/* CTA */
.wd-cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b1226,#2a1850);color:#fff;border-radius:24px;padding:56px 32px;text-align:center;margin:0 auto}
.wd-cta h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:12px}
.wd-cta p{color:rgba(255,255,255,.8);max-width:620px;margin:0 auto 28px;font-size:1.06rem}
.wd-cta .wd-actions{justify-content:center}

/* ---- Webdesign-Seite: Portfolio-Bilder & About-Band (Bild-Update) ---- */
.wd-pf{padding:0;overflow:hidden;display:flex;flex-direction:column;color:inherit}
.wd-pf-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-elev);border-bottom:1px solid var(--bg-line)}
.wd-pf-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease}
.wd-pf:hover .wd-pf-img img{transform:scale(1.05)}
.wd-pf-body{padding:20px 22px 22px}

/* Swipe-Gesten: vertikal scrollen erlaubt, horizontale Wischer gehen ans JS */
.wd-hero-slides{touch-action:pan-y}

/* CTA-Kachel im Portfolio-Grid („Ihr Projekt hier?") */
.wd-pf-cta{border:2px dashed color-mix(in srgb,var(--wd-accent) 40%,var(--bg-line));background:color-mix(in srgb,var(--wd-accent) 4%,#fff);display:grid;place-items:center;text-align:center;min-height:300px}
.wd-pf-cta:hover{border-color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 8%,#fff)}
.wd-pf-cta-inner{padding:32px 26px}
.wd-pf-cta-ico{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 12px 26px -10px color-mix(in srgb,var(--wd-accent) 65%,transparent);transition:transform .3s}
.wd-pf-cta:hover .wd-pf-cta-ico{transform:scale(1.08) rotate(90deg)}
.wd-pf-cta h4{font-size:1.15rem;margin-bottom:8px}
.wd-pf-cta p{font-size:.88rem;color:var(--ink-mute);line-height:1.55;margin-bottom:16px}
.wd-pf-cta-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;color:var(--wd-accent)}

.wd-about{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:920px){.wd-about{grid-template-columns:1fr 1fr;gap:64px}}
.wd-about-media{position:relative;padding:0 14px 22px 0}
.wd-about-main{width:90%;border-radius:18px;box-shadow:0 34px 66px -26px rgba(15,30,54,.42);display:block}
.wd-about-sub{position:absolute;right:0;bottom:0;width:48%;border-radius:14px;border:5px solid #fff;box-shadow:0 22px 46px -18px rgba(15,30,54,.45);display:block}
.wd-about-badge{position:absolute;top:16px;left:-12px;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));color:#fff;border-radius:14px;padding:12px 18px;text-align:center;box-shadow:0 18px 36px -12px color-mix(in srgb,var(--wd-accent) 60%,transparent);line-height:1.15}
.wd-about-badge .big{display:block;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.25rem}
.wd-about-badge span{font-size:.72rem;opacity:.92}
.wd-about-text h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.wd-about-text .wd-checks{flex-direction:column;gap:10px}
.wd-about-text .wd-checks span{color:var(--ink-2)}
.wd-about-text .wd-checks svg{color:var(--success)}
@media(max-width:560px){.wd-about-media{padding-right:0}.wd-about-sub{position:relative;right:auto;bottom:auto;width:62%;margin:16px auto 0}.wd-about-badge{left:0}}
.wd-pf-ph{display:grid;place-items:center;background:linear-gradient(135deg,#1b2a4a,#2a1850);color:#fff}
.wd-pf-ph span{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.85}
.wd-pf-ph em{font-style:normal;font-size:.84rem;font-weight:600;letter-spacing:.02em;font-family:ui-monospace,Menlo,Consolas,monospace}
/* ===== PAGE-KI (ki-) ===== */

/* ---- Hero: KI-Chat-Mockup ---- */
.ki-chat{background:#0d142e;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:#e8ecf6}
.ki-chat-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.ki-chat-bar .g{display:flex;gap:5px}
.ki-chat-bar .g i{width:10px;height:10px;border-radius:50%}
.ki-chat-bar .g i:nth-child(1){background:#ff5f57}.ki-chat-bar .g i:nth-child(2){background:#febc2e}.ki-chat-bar .g i:nth-child(3){background:#28c840}
.ki-chat-title{flex:1;display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.75)}
.ki-chat-title svg{color:var(--wd-accent2);flex-shrink:0}
.ki-chat-body{padding:18px 16px 20px;display:flex;flex-direction:column;gap:12px}
.ki-msg{max-width:88%;border-radius:14px;padding:12px 15px;font-size:.88rem;line-height:1.5}
.ki-msg p{margin:0;color:inherit}
.ki-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--wd-accent),color-mix(in srgb,var(--wd-accent) 55%,var(--wd-accent2)));color:#fff;border-bottom-right-radius:4px;box-shadow:0 14px 30px -14px color-mix(in srgb,var(--wd-accent) 80%,transparent)}
.ki-msg.bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-bottom-left-radius:4px}
.ki-msg-who{display:flex;align-items:center;gap:7px;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--wd-accent2);margin-bottom:7px;font-family:'Rubik',sans-serif}
.ki-msg-who::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wd-accent2);box-shadow:0 0 8px var(--wd-accent2)}
.ki-msg.bot ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ki-msg.bot li{display:flex;align-items:center;gap:8px;font-size:.84rem;color:rgba(255,255,255,.88)}
.ki-msg.bot li svg{color:#5BE3A4;flex-shrink:0}
.ki-typing{display:inline-flex;align-items:center;margin-top:11px;font-size:.8rem;color:rgba(255,255,255,.55);font-style:italic}
.ki-cursor{display:inline-block;width:8px;height:15px;margin-left:6px;border-radius:2px;background:var(--wd-accent2);animation:kiBlink 1s steps(1) infinite}
@keyframes kiBlink{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ki-chat{animation:none}.ki-cursor{animation:none}}

/* ---- Signatur: KI-Reifegrad-Check (4 Stufen) ---- */
.ki-levels{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.ki-levels{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.ki-levels{grid-template-columns:repeat(4,1fr)}}
.ki-level{position:relative;background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.ki-level:hover{transform:translateY(-6px);border-color:var(--wd-accent);box-shadow:0 24px 48px -20px color-mix(in srgb,var(--wd-accent) 38%,rgba(15,30,54,.3))}
.ki-level-step{display:inline-flex;align-self:flex-start;font-family:'Rubik',sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 10%,#fff);border:1px solid color-mix(in srgb,var(--wd-accent) 25%,transparent);border-radius:50px;padding:4px 11px;margin-bottom:14px;transition:background .3s,color .3s}
.ki-level:hover .ki-level-step{background:var(--wd-accent);color:#fff}
.ki-level h3{font-size:1.16rem;margin-bottom:4px;color:var(--ink)}
.ki-level-bar{height:6px;border-radius:3px;background:var(--bg-elev);margin:10px 0 14px;overflow:hidden}
.ki-level-bar i{display:block;height:100%;width:var(--lvl,25%);border-radius:3px;background:linear-gradient(90deg,var(--wd-accent),var(--wd-accent2))}
.ki-level p{font-size:.9rem;color:var(--ink-mute);line-height:1.62;margin:0}

/* ---- Signatur: Use-Case-Grid ---- */
.ki-uc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.ki-uc{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:24px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.ki-uc:hover{transform:translateY(-5px);border-color:var(--wd-accent);box-shadow:0 24px 48px -22px rgba(15,30,54,.26)}
.ki-uc-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 11%,#fff);color:var(--wd-accent);margin-bottom:14px;transition:background .3s,color .3s,transform .3s}
.ki-uc:hover .ki-uc-ico{background:var(--wd-accent);color:#fff;transform:scale(1.06) rotate(-4deg)}
.ki-uc h3{font-size:1.08rem;margin-bottom:8px;color:var(--ink)}
.ki-uc p{font-size:.9rem;color:var(--ink-mute);line-height:1.6;margin:0 0 16px}
.ki-uc-save{margin-top:auto;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:.8rem;font-weight:700;color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 8%,#fff);border:1px dashed color-mix(in srgb,var(--wd-accent) 35%,transparent);border-radius:50px;padding:6px 13px}
.ki-uc-save b{font-family:'Rubik',sans-serif;font-weight:800}
.ki-uc-save svg{flex-shrink:0}
/* ===== PAGE-HOST (host-) ===== */
/* Hero-Mockup: Server-Status-Panel */
.host-panel{position:relative;background:linear-gradient(165deg,#0e1733,#13204a);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:#eef2ff}
.host-panel-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.09)}
.host-panel-bar .g{display:flex;gap:5px}
.host-panel-bar .g i{width:10px;height:10px;border-radius:50%}
.host-panel-bar .g i:nth-child(1){background:#ff5f57}.host-panel-bar .g i:nth-child(2){background:#febc2e}.host-panel-bar .g i:nth-child(3){background:#28c840}
.host-panel-domain{flex:1;display:flex;align-items:center;gap:8px;background:rgba(11,18,38,.6);border:1px solid rgba(255,255,255,.12);border-radius:50px;padding:7px 14px;font-size:.82rem;color:rgba(255,255,255,.88);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.host-panel-domain svg{color:#34d399;flex-shrink:0}
.host-panel-live{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#34d399;flex-shrink:0}
.host-panel-live i{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:hostPulse 1.8s ease-out infinite}
@keyframes hostPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.host-panel-body{padding:14px 16px 16px}
.host-stat{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:.88rem}
.host-stat:nth-child(odd){background:rgba(255,255,255,.045)}
.host-stat .dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.7);flex-shrink:0}
.host-stat .lbl{color:rgba(255,255,255,.62)}
.host-stat .val{margin-left:auto;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.host-load{margin-top:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.035)}
.host-load-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;color:rgba(255,255,255,.62);margin-bottom:8px}
.host-load-top b{color:#fff;font-variant-numeric:tabular-nums}
.host-load-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.host-load-bar i{display:block;height:100%;width:23%;border-radius:6px;background:linear-gradient(90deg,var(--wd-accent2),#34d399);animation:hostLoad 6s ease-in-out infinite}
@keyframes hostLoad{0%,100%{width:23%}50%{width:36%}}
.host-panel~.wd-float-2{bottom:-22px;left:-18px}
@media(max-width:560px){.host-panel~.wd-float-2{left:-6px}}

/* Hosting-Pakete: Vergleichstabelle */
.host-tarife{max-width:1040px;margin:0 auto}
.host-tarife-wrap{overflow-x:auto;border:1px solid var(--bg-line);border-radius:18px;background:#fff;box-shadow:0 28px 60px -32px rgba(15,30,54,.22);-webkit-overflow-scrolling:touch}
.host-table{width:100%;min-width:660px;border-collapse:separate;border-spacing:0;font-size:.95rem}
.host-table th,.host-table td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--bg-line);vertical-align:middle}
.host-table thead th{padding:26px 18px 20px;vertical-align:top}
.host-table tbody th[scope=row]{text-align:left;font-weight:600;color:var(--ink-2);font-size:.9rem;white-space:nowrap}
.host-table td{color:var(--ink-2);font-weight:600}
.host-table tbody tr{transition:background .25s}
.host-table tbody tr:not(.host-table-cta):hover{background:color-mix(in srgb,var(--wd-accent) 5%,#fff)}
.host-table tbody tr:not(.host-table-cta):hover th[scope=row]{color:var(--wd-accent)}
.host-table tbody tr:last-child th,.host-table tbody tr:last-child td{border-bottom:none}
.host-table .hl{background:color-mix(in srgb,var(--wd-accent) 7%,#fff);border-left:1px solid color-mix(in srgb,var(--wd-accent) 22%,transparent);border-right:1px solid color-mix(in srgb,var(--wd-accent) 22%,transparent)}
.host-table thead th.hl{border-top:3px solid var(--wd-accent);border-top-left-radius:10px;border-top-right-radius:10px}
.host-plan{display:block;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.18rem;color:var(--ink);line-height:1.15}
.host-plan-sub{display:block;font-size:.78rem;font-weight:600;color:var(--ink-mute);margin-top:4px}
.host-price{display:block;margin-top:12px;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.55rem;color:var(--wd-accent);line-height:1}
.host-price .from{font-size:.8rem;color:var(--ink-mute);font-weight:600;margin-right:4px}
.host-price small{font-size:.76rem;color:var(--ink-mute);font-weight:600}
.host-badge{display:inline-block;background:linear-gradient(100deg,var(--wd-accent),var(--wd-accent2));color:#fff;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:50px;margin-bottom:9px}
.host-yes{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
.host-yes svg{color:var(--success);flex-shrink:0}
.host-table-cta td{padding:20px 18px 24px}
.host-table-cta .wd-btn{width:100%;justify-content:center;padding:11px 16px;font-size:.9rem}

/* Umzug ohne Stress: 3 Schritte */
.host-umzug{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch;max-width:1040px;margin:0 auto}
@media(min-width:880px){.host-umzug{grid-template-columns:1fr auto 1fr auto 1fr;gap:10px}}
.host-umzug-step{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:28px 26px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.host-umzug-step:hover{transform:translateY(-6px);box-shadow:0 26px 52px -22px rgba(15,30,54,.24);border-color:color-mix(in srgb,var(--wd-accent) 45%,var(--bg-line))}
.host-umzug-step .n{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.15rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 12px 26px -10px color-mix(in srgb,var(--wd-accent) 65%,transparent);margin-bottom:16px}
.host-umzug-step h3{font-size:1.12rem;margin-bottom:9px}
.host-umzug-step p{color:var(--ink-mute);font-size:.92rem;line-height:1.6;margin:0}
.host-umzug-arrow{display:grid;place-items:center;color:var(--wd-accent);opacity:.65}
@media(max-width:879px){.host-umzug-arrow svg{transform:rotate(90deg)}}
.host-umzug-note{max-width:1040px;margin:26px auto 0;display:flex;gap:14px;align-items:flex-start;background:color-mix(in srgb,var(--wd-accent) 6%,#fff);border:1px solid color-mix(in srgb,var(--wd-accent) 24%,transparent);border-radius:14px;padding:18px 22px}
.host-umzug-note svg{color:var(--wd-accent);flex-shrink:0;margin-top:3px}
.host-umzug-note p{color:var(--ink-2);font-size:.95rem;line-height:1.65;margin:0}
.host-umzug-note b{color:var(--ink)}

@media(prefers-reduced-motion:reduce){.host-panel{animation:none}.host-panel-live i{animation:none}.host-load-bar i{animation:none}}
/* ===== PAGE-SW (sw-) ===== */
/* Softwareentwicklung-Seite (page-softwareentwicklung.php) – Signatur-Komponenten */

/* -- Hero-Visual: Code-Editor-Mockup -- */
.sw-editor{background:#0c1322;border:1px solid rgba(255,255,255,.09);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;margin:22px 0}
/* Badges so versetzen, dass Tab-Leiste & Statuszeile lesbar bleiben (nur auf dieser Seite) */
.sw-editor~.wd-float-1{top:-34px}
.sw-editor~.wd-float-3{bottom:-34px}
.sw-editor-bar{display:flex;align-items:flex-end;gap:14px;padding:10px 14px 0;background:#080d18;border-bottom:1px solid rgba(255,255,255,.07)}
.sw-editor-bar .g{display:flex;gap:5px;align-self:center;padding-bottom:9px}
.sw-editor-bar .g i{width:10px;height:10px;border-radius:50%}
.sw-editor-bar .g i:nth-child(1){background:#ff5f57}.sw-editor-bar .g i:nth-child(2){background:#febc2e}.sw-editor-bar .g i:nth-child(3){background:#28c840}
.sw-tabs{display:flex;gap:2px;overflow:hidden}
.sw-tab{padding:8px 14px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;color:rgba(255,255,255,.42);border:1px solid transparent;border-bottom:none;border-radius:9px 9px 0 0;white-space:nowrap}
.sw-tab.active{position:relative;background:#0c1322;color:#67E8F9;border-color:rgba(255,255,255,.09)}
.sw-tab.active::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--wd-accent),var(--wd-accent2));border-radius:9px 9px 0 0}
.sw-editor-body{display:flex;flex-direction:column;gap:14px;padding:22px 18px 20px}
.sw-line{display:flex;align-items:center;gap:10px}
.sw-ln{width:20px;flex-shrink:0;text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;color:rgba(255,255,255,.26);user-select:none}
.sw-ind{width:22px;flex-shrink:0}
.sw-tok{height:10px;border-radius:5px;flex-shrink:0}
.sw-tok.c{background:#22D3EE;box-shadow:0 0 14px rgba(34,211,238,.35)}
.sw-tok.v{background:#A78BFA}
.sw-tok.g{background:#34D399}
.sw-tok.m{background:rgba(255,255,255,.2)}
.sw-cursor{width:9px;height:15px;border-radius:2px;background:#22D3EE;box-shadow:0 0 10px rgba(34,211,238,.55);animation:swBlink 1.1s steps(2,start) infinite;flex-shrink:0}
@keyframes swBlink{0%,55%{opacity:1}56%,100%{opacity:0}}
.sw-status{display:flex;align-items:center;gap:9px;padding:11px 16px;background:rgba(31,135,68,.18);border-top:1px solid rgba(91,227,164,.28);color:#5BE3A4;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem;font-weight:700}
.sw-status svg{flex-shrink:0}
.sw-status .sep{color:rgba(255,255,255,.38);font-weight:400}
@media(prefers-reduced-motion:reduce){.sw-editor{animation:none}.sw-cursor{animation:none}}

/* -- Lösungs-Flow: 4 Karten mit Pfeilen -- */
.sw-flow{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch;max-width:1180px;margin:0 auto}
@media(min-width:980px){.sw-flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px}}
.sw-flow-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:26px 24px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.sw-flow-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--wd-accent),var(--wd-accent2));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.sw-flow-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--wd-accent) 45%,var(--bg-line));box-shadow:0 24px 48px -20px color-mix(in srgb,var(--wd-accent) 38%,rgba(15,30,54,.3))}
.sw-flow-card:hover::before{transform:scaleX(1)}
.sw-flow-num{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:1rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 10px 22px -8px color-mix(in srgb,var(--wd-accent) 65%,transparent);margin-bottom:16px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sw-flow-card:hover .sw-flow-num{transform:scale(1.12) rotate(-6deg)}
.sw-flow-card h3{font-size:1.05rem;margin-bottom:8px;transition:color .25s}
.sw-flow-card:hover h3{color:var(--wd-accent)}
.sw-flow-card p{font-size:.88rem;color:var(--ink-mute);line-height:1.6;margin:0}
.sw-flow-arrow{display:grid;place-items:center;color:var(--wd-accent);opacity:.85}
@media(max-width:979px){.sw-flow-arrow{transform:rotate(90deg);justify-self:center}}
.sw-flow:hover .sw-flow-arrow svg{animation:swNudge .9s ease infinite}
@keyframes swNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@media(prefers-reduced-motion:reduce){.sw-flow:hover .sw-flow-arrow svg{animation:none}}

/* -- Tech-Stack: gruppierte Chips -- */
.sw-stack{display:grid;grid-template-columns:1fr;gap:20px;max-width:1040px;margin:0 auto}
@media(min-width:740px){.sw-stack{grid-template-columns:1fr 1fr}}
.sw-stack-group{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:24px 26px;box-shadow:0 10px 28px -22px rgba(15,30,54,.18);transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.sw-stack-group:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--wd-accent) 45%,var(--bg-line));box-shadow:0 22px 44px -20px color-mix(in srgb,var(--wd-accent) 30%,rgba(15,30,54,.25))}
.sw-stack-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.sw-stack-head .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);border:1px solid color-mix(in srgb,var(--wd-accent) 22%,transparent);flex-shrink:0;transition:all .3s}
.sw-stack-group:hover .ico{background:var(--wd-accent);color:#fff;transform:scale(1.06) rotate(-4deg)}
.sw-stack-head h3{font-size:1.02rem;margin:0;transition:color .25s}
.sw-stack-group:hover .sw-stack-head h3{color:var(--wd-accent)}
.sw-chips{display:flex;flex-wrap:wrap;gap:8px}
.sw-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;background:var(--bg-soft);border:1px solid var(--bg-line);border-radius:50px;font-weight:600;font-size:.84rem;color:var(--ink-2);transition:all .25s}
.sw-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wd-accent);flex-shrink:0}
.sw-chip:hover{border-color:var(--wd-accent);color:var(--wd-accent);background:#fff;transform:translateY(-2px)}
/* ===== PAGE-OM (om-) ===== */
/* ---- Hero: Kampagnen-Dashboard-Mockup ---- */
.om-dash{background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:var(--ink)}
.om-dash-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#f7f9fc;border-bottom:1px solid #e7ebf1}
.om-dash-bar .g{display:flex;gap:5px}
.om-dash-bar .g i{width:10px;height:10px;border-radius:50%}
.om-dash-bar .g i:nth-child(1){background:#ff5f57}.om-dash-bar .g i:nth-child(2){background:#febc2e}.om-dash-bar .g i:nth-child(3){background:#28c840}
.om-dash-title{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:#3c4759}
.om-dash-title svg{color:var(--wd-accent);flex-shrink:0}
.om-dash-live{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1F8744;background:#e7f6ec;border-radius:50px;padding:4px 10px}
.om-dash-live i{width:7px;height:7px;border-radius:50%;background:#28c840;animation:omPulse 1.8s ease-in-out infinite}
.om-dash-body{padding:14px 16px 16px}
.om-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.om-chip{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;color:#3c4759;background:#f3f5f9;border:1px solid #e2e7ef;border-radius:50px;padding:5px 12px}
.om-chip i{width:8px;height:8px;border-radius:50%;background:#28c840;box-shadow:0 0 0 3px rgba(40,200,64,.16);flex-shrink:0}
.om-chip.pause i{background:#febc2e;box-shadow:0 0 0 3px rgba(254,188,46,.18)}
.om-chart{position:relative;border:1px solid #e7ebf1;border-radius:12px;padding:30px 10px 4px;background:linear-gradient(180deg,#fff,#fbfcfe)}
.om-chart svg{display:block;width:100%;height:104px}
.om-chart-label{position:absolute;top:9px;left:12px;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8a93a6}
.om-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.om-kpi{border:1px solid #e7ebf1;border-radius:12px;padding:11px 13px;background:#fff}
.om-kpi .lbl{display:block;font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8a93a6;white-space:nowrap}
.om-kpi .val{display:flex;align-items:center;gap:8px;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.4rem;color:var(--ink);margin-top:4px}
.om-kpi .trend{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:.68rem;font-weight:800;border-radius:6px;padding:2px 7px}
.om-kpi .trend.up{color:#1F8744;background:#e7f6ec}
.om-kpi .trend.down{color:#1F8744;background:#e7f6ec}
.om-dash-note{display:block;margin-top:11px;max-width:64%;font-size:.68rem;color:#8a93a6;line-height:1.45}
@keyframes omPulse{0%,100%{box-shadow:0 0 0 0 rgba(40,200,64,.45)}50%{box-shadow:0 0 0 5px rgba(40,200,64,0)}}
@media(max-width:420px){.om-kpis{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.om-dash{animation:none}.om-dash-live i{animation:none}}

/* ---- Signatur: Marketing-Funnel (4 Stufen) ---- */
.om-funnel{max-width:840px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.om-stage{position:relative;width:var(--w,100%);background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:24px 26px 22px;text-align:center;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.om-stage::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--wd-accent),var(--wd-accent2));opacity:var(--o,1)}
.om-stage:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(15,30,54,.26);border-color:var(--wd-accent)}
.om-stage-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.om-stage-head .n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:.95rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 8px 18px -6px color-mix(in srgb,var(--wd-accent) 60%,transparent);flex-shrink:0}
.om-stage-head h3{font-size:1.16rem;margin:0}
.om-stage>p{color:var(--ink-mute);font-size:.93rem;line-height:1.6;margin:0 0 14px;max-width:560px;margin-left:auto;margin-right:auto}
.om-stage-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.om-stage-tools span{font-size:.73rem;font-weight:700;color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 8%,#fff);border:1px solid color-mix(in srgb,var(--wd-accent) 24%,transparent);border-radius:50px;padding:4px 11px}
.om-funnel-link{position:relative;width:2px;height:30px;background:linear-gradient(180deg,color-mix(in srgb,var(--wd-accent) 30%,transparent),var(--wd-accent))}
.om-funnel-link::after{content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom:none;border-top:7px solid var(--wd-accent)}
@media(max-width:719px){.om-funnel .om-stage{width:100%}}

/* ---- Signatur: Kanal-Kacheln (für wen / Kosten) ---- */
.om-kanaele{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.om-kanal{--c:var(--wd-accent);background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:24px 26px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.om-kanal:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(15,30,54,.26)}
.om-kanal-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.om-kanal-top .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);flex-shrink:0;transition:all .3s}
.om-kanal:hover .om-kanal-top .ico{background:var(--c);color:#fff;transform:scale(1.06) rotate(-4deg)}
.om-kanal h3{font-size:1.1rem;margin:0}
.om-kanal>p{color:var(--ink-mute);font-size:.92rem;line-height:1.6;margin:0 0 16px}
.om-kanal-facts{margin-top:auto;display:flex;flex-direction:column;gap:9px;border-top:1px dashed var(--bg-line);padding-top:14px}
.om-kanal-fact{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;line-height:1.5}
.om-kanal-fact .k{flex-shrink:0;font-weight:800;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c);background:color-mix(in srgb,var(--c) 9%,#fff);border-radius:6px;padding:3px 8px;margin-top:2px;min-width:62px;text-align:center}
.om-kanal-fact .v{color:var(--ink-2)}
/* ===== PAGE-SEC (sec-) ===== */
/* Leistungsseite Website-Sicherheit: Hero-Dashboard, Hack-Timeline, Schutz-Checkliste */

/* ---- Hero-Mockup: Security-Dashboard (dunkles Panel) ---- */
.sec-dash{position:relative;background:linear-gradient(165deg,#101e38,#0a1124);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:#fff}
.sec-dash-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.09)}
.sec-dash-bar .g{display:flex;gap:5px}
.sec-dash-bar .g i{width:10px;height:10px;border-radius:50%}
.sec-dash-bar .g i:nth-child(1){background:#ff5f57}.sec-dash-bar .g i:nth-child(2){background:#febc2e}.sec-dash-bar .g i:nth-child(3){background:#28c840}
.sec-dash-title{flex:1;display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7);overflow:hidden;white-space:nowrap}
.sec-dash-title svg{color:#5BE3A4;flex-shrink:0}
.sec-dash-live{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5BE3A4}
.sec-dash-live i{width:7px;height:7px;border-radius:50%;background:#5BE3A4;animation:secBlink 1.6s ease-in-out infinite}
.sec-dash-body{padding:22px 22px 16px}
.sec-dash-status{display:flex;align-items:center;gap:18px;padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.09)}
.sec-shield{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#5BE3A4;background:radial-gradient(circle,rgba(31,135,68,.4),rgba(31,135,68,.08) 72%)}
.sec-shield::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #5BE3A4;animation:secPulse 2.2s ease-out infinite}
.sec-shield-text b{display:block;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.35rem;line-height:1.15;color:#5BE3A4}
.sec-shield-text small{font-size:.8rem;color:rgba(255,255,255,.55)}
.sec-dash-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sec-dash-rows li{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.84)}
.sec-dash-rows li svg{color:#5BE3A4;flex-shrink:0}
.sec-dash-rows li em{margin-left:auto;font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5BE3A4;background:rgba(91,227,164,.12);border:1px solid rgba(91,227,164,.25);padding:2px 8px;border-radius:5px}
.sec-dash-foot{display:flex;align-items:center;gap:7px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);font-size:.74rem;color:rgba(255,255,255,.45)}
.sec-dash-foot svg{flex-shrink:0}
@keyframes secPulse{0%{transform:scale(.82);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes secBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- Hack-Timeline (rote Eskalation, grünes Ende) ---- */
.sec-timeline{position:relative;max-width:780px;margin:0 auto}
.sec-timeline::before{content:"";position:absolute;left:10px;top:10px;bottom:26px;width:3px;border-radius:2px;background:linear-gradient(180deg,#E8A33D 0%,#DC2F2F 45%,#A61B1B 72%,var(--wd-accent2) 100%)}
.sec-tl-item{--tl-c:#DC2F2F;position:relative;padding:0 0 30px 48px}
.sec-tl-item:last-child{padding-bottom:0}
.sec-tl-item::before{content:"";position:absolute;left:3px;top:4px;width:17px;height:17px;border-radius:50%;background:#fff;border:5px solid var(--tl-c);box-shadow:0 0 0 4px color-mix(in srgb,var(--tl-c) 18%,transparent)}
.sec-tl-time{display:inline-block;font-family:'Rubik',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--tl-c);padding:4px 11px;border-radius:6px;margin-bottom:10px}
.sec-tl-card{background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:20px 22px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.sec-tl-card h3{font-size:1.08rem;margin-bottom:7px}
.sec-tl-card p{color:var(--ink-mute);font-size:.94rem;line-height:1.65;margin:0}
.sec-tl-card:hover{transform:translateY(-4px) translateX(4px);border-color:var(--tl-c);box-shadow:0 22px 46px -20px color-mix(in srgb,var(--tl-c) 45%,rgba(15,30,54,.3))}
.sec-tl-item.safe .sec-tl-card{background:linear-gradient(160deg,#11341f,var(--wd-accent2));border:none;border-left:none;box-shadow:0 26px 54px -22px rgba(31,135,68,.55)}
.sec-tl-item.safe .sec-tl-card h3{color:#fff}
.sec-tl-item.safe .sec-tl-card p{color:rgba(255,255,255,.85)}
.sec-tl-item.safe .sec-tl-card:hover{box-shadow:0 32px 64px -22px rgba(31,135,68,.7)}
.sec-tl-item.safe::before{background:#fff;border-color:var(--wd-accent2)}

/* ---- Schutz-Checkliste (2 Spalten) ---- */
.sec-checklist{display:grid;grid-template-columns:1fr;gap:16px;max-width:1000px;margin:0 auto}
@media(min-width:740px){.sec-checklist{grid-template-columns:1fr 1fr}}
.sec-check{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:19px 21px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.sec-check:hover{transform:translateY(-5px);border-color:var(--wd-accent);box-shadow:0 20px 42px -20px rgba(15,30,54,.24)}
.sec-check .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);flex-shrink:0;transition:background .3s,color .3s,transform .3s}
.sec-check:hover .ico{background:var(--wd-accent);color:#fff;transform:scale(1.08) rotate(-5deg)}
.sec-check h3{font-size:1.02rem;margin-bottom:4px}
.sec-check p{font-size:.88rem;color:var(--ink-mute);line-height:1.6;margin:0}

@media(prefers-reduced-motion:reduce){
	.sec-dash{animation:none}
	.sec-dash-live i{animation:none}
	.sec-shield::after{animation:none;opacity:.5}
	.sec-tl-card,.sec-check,.sec-check .ico{transition:none}
}
/* ===== PAGE-CMS (cms-) ===== */
/* Hero-Mockup: CMS-Editor (helles Editor-Fenster, strukturell wie .seo-serp) */
.cms-editor{background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:var(--ink)}
.cms-editor-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#f7f9fc;border-bottom:1px solid #e7ebf1}
.cms-editor-bar .g{display:flex;gap:5px}
.cms-editor-bar .g i{width:10px;height:10px;border-radius:50%}
.cms-editor-bar .g i:nth-child(1){background:#ff5f57}.cms-editor-bar .g i:nth-child(2){background:#febc2e}.cms-editor-bar .g i:nth-child(3){background:#28c840}
.cms-editor-doc{flex:1;display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:#5B6678;white-space:nowrap;overflow:hidden}
.cms-editor-doc svg{color:var(--wd-accent);flex-shrink:0}
.cms-editor-tools{display:flex;align-items:center;gap:6px;padding:10px 16px;background:#fff;border-bottom:1px solid #eef1f6}
.cms-tool{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:#f3f6fa;border:1px solid #e7ebf1;color:#3c4659;font-size:.78rem;font-weight:800;line-height:1}
.cms-tool.b{font-family:'Rubik',sans-serif}
.cms-tool.i{font-style:italic;font-family:Georgia,'Times New Roman',serif;font-weight:700}
.cms-tool.t{font-family:'Rubik',sans-serif;font-size:.68rem;letter-spacing:.02em}
.cms-tool.on{background:color-mix(in srgb,var(--wd-accent) 14%,#fff);border-color:color-mix(in srgb,var(--wd-accent) 45%,transparent);color:var(--wd-accent)}
.cms-tool-sep{width:1px;height:20px;background:#e7ebf1;margin:0 4px}
.cms-editor-body{padding:18px 20px 8px}
.cms-editor-h{font-family:'Rubik',sans-serif;font-weight:800;font-size:1.16rem;color:var(--ink);display:flex;align-items:center;margin-bottom:12px}
.cms-caret{width:2px;height:1.15em;background:var(--wd-accent);margin-left:3px;animation:cmsCaret 1.1s steps(2) infinite}
@keyframes cmsCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.cms-par{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.cms-par .ln{height:8px;border-radius:4px;background:#e7ebf1}
.cms-par .ln:nth-child(1){width:96%}.cms-par .ln:nth-child(2){width:88%}.cms-par .ln:nth-child(3){width:64%}
.cms-par.s{margin-bottom:0}
.cms-par.s .ln:nth-child(1){width:100%}.cms-par.s .ln:nth-child(2){width:92%}.cms-par.s .ln:nth-child(3){width:84%}.cms-par.s .ln:nth-child(4){width:46%}
.cms-editor-media{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;margin-bottom:6px}
.cms-img{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--wd-accent) 55%,#9db89c),color-mix(in srgb,var(--wd-accent2) 45%,#7fb6be));outline:2px dashed color-mix(in srgb,var(--wd-accent) 55%,transparent);outline-offset:2px}
.cms-img>svg{opacity:.9;margin-bottom:14px}
.cms-img .swap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 4px;background:rgba(15,23,42,.62);backdrop-filter:blur(2px);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.cms-img .swap svg{flex-shrink:0}
.cms-editor-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;background:#fbfcfe;border-top:1px solid #eef1f6}
.cms-saved{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:#1F8744;white-space:nowrap}
.cms-saved svg{flex-shrink:0}
.cms-publish{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:9px;background:linear-gradient(100deg,#1F8744,var(--wd-accent));color:#fff;font-weight:700;font-size:.84rem;box-shadow:0 10px 24px -10px rgba(31,135,68,.75);white-space:nowrap}
.cms-float-b{bottom:-46px;right:18px}
@media(max-width:420px){.cms-editor-media{grid-template-columns:96px 1fr}.cms-saved{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.cms-editor{animation:none}.cms-caret{animation:none}}

/* Vergleich: Selbst pflegen vs. von uns betreut */
.cms-vs{display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch;max-width:1020px;margin:0 auto}
@media(min-width:860px){.cms-vs{grid-template-columns:1fr auto 1fr}}
.cms-vs-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--bg-line);border-radius:18px;padding:30px 28px;box-shadow:0 14px 34px -22px rgba(15,30,54,.16);transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .35s}
.cms-vs-card:hover{transform:translateY(-8px);border-color:var(--c,var(--wd-accent));box-shadow:0 28px 56px -22px rgba(15,30,54,.32)}
.cms-vs-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--wd-accent)) 12%,#fff);color:var(--c,var(--wd-accent));margin-bottom:18px;transition:background .3s,color .3s,transform .3s}
.cms-vs-card:hover .cms-vs-ico{background:var(--c,var(--wd-accent));color:#fff;transform:scale(1.06) rotate(-4deg)}
.cms-vs-card h3{font-size:1.3rem;margin-bottom:10px}
.cms-vs-card>p{color:var(--ink-mute);font-size:.95rem;line-height:1.65;margin-bottom:18px}
.cms-vs-card ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.cms-vs-card li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.cms-vs-card li svg{color:var(--c,var(--wd-accent));flex-shrink:0;margin-top:3px}
.cms-vs-or{align-self:center;justify-self:center;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 12px 26px -10px color-mix(in srgb,var(--wd-accent) 65%,transparent)}
.cms-vs-note{display:flex;align-items:flex-start;justify-content:center;gap:9px;max-width:760px;margin:28px auto 0;padding:14px 22px;border-radius:12px;background:color-mix(in srgb,var(--wd-accent) 8%,#fff);border:1px dashed color-mix(in srgb,var(--wd-accent) 40%,transparent);color:var(--ink-2);font-size:.92rem;line-height:1.6;text-align:left}
.cms-vs-note svg{color:var(--wd-accent);flex-shrink:0;margin-top:3px}

/* Grid: Das ändern Sie künftig selbst */
.cms-edit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:1100px;margin:0 auto}
.cms-tile{display:flex;align-items:flex-start;gap:15px;background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:24px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.cms-tile:hover{transform:translateY(-5px);border-color:var(--wd-accent);box-shadow:0 22px 44px -20px color-mix(in srgb,var(--wd-accent) 35%,rgba(15,30,54,.3))}
.cms-tile .ico{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);transition:background .3s,color .3s,transform .3s}
.cms-tile:hover .ico{background:var(--wd-accent);color:#fff;transform:scale(1.08) rotate(-4deg)}
.cms-tile h3{font-size:1.04rem;margin-bottom:5px;transition:color .25s}
.cms-tile:hover h3{color:var(--wd-accent)}
.cms-tile p{font-size:.88rem;color:var(--ink-mute);line-height:1.6;margin:0}
/* ===== PAGE-WDX (wdx-) ===== */
/* Foto-Band „Responsive Design": das helle Foto braucht eine kräftigere Abdunklung, damit der Overlay-Text lesbar bleibt. */
.wdx-band::after{background:linear-gradient(180deg,rgba(11,18,38,.16) 0%,rgba(11,18,38,.55) 45%,rgba(11,18,38,.94) 100%)}
/* ===== PAGE-DRO (dro-) ===== */
/* Hero: echtes Luftbild mit Kamera-HUD (Sucher-Optik) */
.dro-shot::after{opacity:.22}
.dro-hud{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:ui-monospace,Menlo,Consolas,monospace}
.dro-corner{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,.8)}
.dro-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.dro-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.dro-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-bottom-left-radius:6px}
.dro-corner.br{bottom:14px;right:14px;border-left:0;border-top:0;border-bottom-right-radius:6px}
.dro-hud-top{position:absolute;top:22px;left:30px;display:flex;align-items:center;gap:14px}
.dro-rec{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.dro-rec i{width:9px;height:9px;border-radius:50%;background:#FF3B30;box-shadow:0 0 10px rgba(255,59,48,.9);animation:droRec 1.3s ease-in-out infinite}
.dro-badge4k{background:rgba(8,12,30,.55);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:3px 10px;color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.1em;backdrop-filter:blur(4px);white-space:nowrap}
.dro-chips{position:absolute;left:30px;bottom:22px;display:flex;align-items:center;gap:9px}
.dro-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(8,12,30,.55);border:1px solid rgba(255,255,255,.22);border-radius:50px;padding:5px 12px;color:rgba(255,255,255,.95);font-size:.7rem;font-weight:600;letter-spacing:.06em;backdrop-filter:blur(4px);white-space:nowrap}
.dro-chip svg{flex-shrink:0;color:var(--wd-accent2)}
@keyframes droRec{0%,100%{opacity:1}50%{opacity:.25}}
/* Hero-Video: YouTube-Loop im Sucher-Rahmen (Foto bleibt Poster/Fallback) */
.dro-video{position:absolute;inset:0;z-index:1;overflow:hidden;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.dro-video.on{opacity:1}
.dro-video iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1.35);border:0;pointer-events:none}
.dro-video::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 52%,color-mix(in srgb,var(--wd-accent) 60%,transparent));mix-blend-mode:multiply;opacity:.38}
@media(max-width:560px){.dro-hud-top{top:18px;left:24px;gap:10px}.dro-chips{left:24px;bottom:16px}.dro-chip{font-size:.62rem;padding:4px 9px}.dro-chip:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.dro-rec i{animation:none}}

/* Einsatzgebiete-Galerie: Bild-Karten mit Overlay-Titel */
.dro-gallery{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:700px){.dro-gallery{grid-template-columns:1fr 1fr}}
.dro-tile{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 24px 50px -22px rgba(15,30,54,.35);transform:translateZ(0)}
.dro-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.3,1)}
.dro-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(11,18,38,0) 30%,rgba(11,18,38,.92) 100%);transition:opacity .45s ease}
.dro-tile:hover img{transform:scale(1.06)}
.dro-tile:hover::after{opacity:.72}
.dro-tile-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 26px;color:#fff;transition:transform .45s ease}
.dro-tile:hover .dro-tile-text{transform:translateY(-4px)}
.dro-tile-text h3{color:#fff;font-size:1.22rem;margin-bottom:6px}
.dro-tile-text p{color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.55;margin:0;max-width:520px}

/* Recht & Sicherheit: 4 Vertrauens-Karten */
.dro-law{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:680px){.dro-law{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.dro-law{grid-template-columns:repeat(4,1fr)}}
.dro-law-card{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:28px 24px;text-align:center;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.dro-law-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -20px rgba(15,30,54,.25)}
.dro-law-ico{width:54px;height:54px;margin:0 auto 16px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);transition:all .3s}
.dro-law-card:hover .dro-law-ico{background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));color:#fff;transform:scale(1.06)}
.dro-law-card h3{font-size:1.05rem;margin-bottom:9px}
.dro-law-card p{font-size:.9rem;color:var(--ink-mute);line-height:1.6;margin:0}
/* ===== PAGE-CYBER (cyber-) ===== */
/* Leistungsseite Cyber-Sicherheit (Unternehmens-IT, NIS2): Hero-Security-Panel, NIS2-Check, Schutzebenen */

/* ---- Hero-Mockup: Security-Status-Panel (dunkles Panel, Schutz-Score-Ring) ---- */
.cyber-soc{position:relative;background:linear-gradient(165deg,#101e38,#0a1124);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:#fff}
.cyber-soc-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.09)}
.cyber-soc-bar .g{display:flex;gap:5px}
.cyber-soc-bar .g i{width:10px;height:10px;border-radius:50%}
.cyber-soc-bar .g i:nth-child(1){background:#ff5f57}.cyber-soc-bar .g i:nth-child(2){background:#febc2e}.cyber-soc-bar .g i:nth-child(3){background:#28c840}
.cyber-soc-title{flex:1;display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7);overflow:hidden;white-space:nowrap}
.cyber-soc-title svg{color:#5BE3A4;flex-shrink:0}
.cyber-soc-live{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5BE3A4}
.cyber-soc-live i{width:7px;height:7px;border-radius:50%;background:#5BE3A4;animation:cyberBlink 1.6s ease-in-out infinite}
.cyber-soc-body{padding:22px 22px 16px}
.cyber-soc-status{display:flex;align-items:center;gap:18px;padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.09)}
.cyber-ring{position:relative;width:74px;height:74px;flex-shrink:0}
.cyber-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cyber-ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3}
.cyber-ring-val{fill:none;stroke:#5BE3A4;stroke-width:3;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--score,96));animation:cyberRing 1.6s cubic-bezier(.2,.8,.3,1) both}
.cyber-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.cyber-ring-num b{font-family:'Rubik',sans-serif;font-weight:800;font-size:1.4rem;color:#5BE3A4}
.cyber-ring-num small{font-size:.56rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:1px}
.cyber-soc-statustext b{display:block;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.3rem;line-height:1.15;color:#5BE3A4}
.cyber-soc-statustext small{font-size:.8rem;color:rgba(255,255,255,.55)}
.cyber-soc-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cyber-soc-rows li{display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.84)}
.cyber-soc-rows li svg{color:#5BE3A4;flex-shrink:0}
.cyber-soc-rows li em{margin-left:auto;font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5BE3A4;background:rgba(91,227,164,.12);border:1px solid rgba(91,227,164,.25);padding:2px 8px;border-radius:5px}
.cyber-soc-foot{display:flex;align-items:center;gap:7px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);font-size:.78rem;font-weight:600;color:rgba(255,255,255,.6)}
.cyber-soc-foot svg{color:rgba(255,255,255,.4);flex-shrink:0}
.cyber-soc-count{margin-left:auto;font-family:'Rubik',sans-serif;font-weight:800;font-size:.92rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));padding:2px 10px;border-radius:6px}
@keyframes cyberBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes cyberRing{from{stroke-dashoffset:100}}

/* ---- NIS2-Schnell-Check + erste 90 Tage (2 Spalten) ---- */
.cyber-nis2-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:1060px;margin:0 auto;align-items:start}
@media(min-width:880px){.cyber-nis2-grid{grid-template-columns:1.1fr .9fr}}
.cyber-check-card,.cyber-steps{background:#fff;border:1px solid var(--bg-line);border-radius:18px;padding:30px 30px 26px;box-shadow:0 14px 34px -22px rgba(15,30,54,.16);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.cyber-check-card:hover,.cyber-steps:hover{transform:translateY(-5px);box-shadow:0 28px 56px -26px color-mix(in srgb,var(--wd-accent) 32%,rgba(15,30,54,.35))}
.cyber-check-q,.cyber-step-list .n{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.cyber-check-card:hover .cyber-check-q,.cyber-steps:hover .n{transform:scale(1.1)}
.cyber-check-card{border-top:1px solid color-mix(in srgb,var(--wd-accent) 35%,transparent)}
.cyber-steps{border-top:1px solid color-mix(in srgb,var(--wd-accent2) 35%,transparent)}
.cyber-check-card h3,.cyber-steps h3{font-size:1.3rem;margin-bottom:6px}
.cyber-check-lead,.cyber-steps-lead{color:var(--ink-mute);font-size:.92rem;line-height:1.6;margin-bottom:20px}
.cyber-check-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:15px;position:relative}
.cyber-check-list::before{content:"";position:absolute;left:15px;top:12px;bottom:36px;width:6px;transform:translateX(-3px);z-index:0;background:radial-gradient(circle closest-side,color-mix(in srgb,var(--wd-accent) 80%,transparent) 95%,transparent) 0 0/6px 13px repeat-y;animation:cyberDotsDown 1s linear infinite}
@keyframes cyberDotsDown{to{background-position:0 13px}}
@media(prefers-reduced-motion:reduce){.cyber-check-list::before,.cyber-step-list::before{animation:none}}
.cyber-check-list li{display:flex;gap:14px;align-items:flex-start}
.cyber-check-q{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:.9rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));position:relative;z-index:1;box-shadow:0 0 0 4px #fff}
.cyber-check-list b,.cyber-step-list b{display:block;font-size:.98rem;color:var(--ink);margin-bottom:2px}
.cyber-check-list span:not(.cyber-check-q),.cyber-step-list span:not(.n){display:block;font-size:.88rem;color:var(--ink-mute);line-height:1.55}
.cyber-check-note{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--wd-accent) 8%,#fff);border:1px dashed color-mix(in srgb,var(--wd-accent) 40%,transparent);color:var(--ink-2);font-size:.88rem;line-height:1.55}
.cyber-check-note svg{color:var(--wd-accent);flex-shrink:0;margin-top:2px}
.cyber-step-list{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:18px}
.cyber-step-list::before{content:"";position:absolute;left:16px;top:12px;bottom:30px;width:6px;transform:translateX(-3px);z-index:0;background:radial-gradient(circle closest-side,color-mix(in srgb,var(--wd-accent2) 80%,transparent) 95%,transparent) 0 0/6px 13px repeat-y;animation:cyberDotsDown 1s linear infinite}
.cyber-step-list li{display:flex;gap:14px;align-items:flex-start;position:relative}
.cyber-step-list .n{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:.92rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 0 0 4px #fff;position:relative;z-index:1}
/* Cyber-Kontakt-Animation: Sicherheits-Scanner – Raster + abwärts wandernder Scan-Strahl (einzigartig) */
.cyber-scan-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,#fff 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#fff 6%,transparent) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(130% 100% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(130% 100% at 50% 50%,#000,transparent 80%)}
.cyber-scan-bg .beam{position:absolute;left:0;right:0;height:150px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--wd-accent) 18%,transparent),transparent);animation:cyberBeam 6.5s ease-in-out infinite}
@keyframes cyberBeam{0%{top:-150px}100%{top:100%}}
@media(prefers-reduced-motion:reduce){.cyber-scan-bg .beam{animation:none}}

/* ---- Schutzebenen-Grid (Schichten) ---- */
.cyber-layers{display:grid;grid-template-columns:1fr;gap:18px;max-width:1100px;margin:0 auto}
@media(min-width:640px){.cyber-layers{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cyber-layers{grid-template-columns:repeat(3,1fr)}}
.cyber-layer{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:22px 22px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.cyber-layer:hover{transform:translateY(-6px);border-color:var(--wd-accent);box-shadow:0 22px 46px -20px color-mix(in srgb,var(--wd-accent) 32%,rgba(15,30,54,.3))}
.cyber-layer .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);flex-shrink:0;transition:background .3s,color .3s,transform .3s}
.cyber-layer:hover .ico{background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));color:#fff;transform:scale(1.08) rotate(-5deg)}
.cyber-layer h3{font-size:1.04rem;margin-bottom:5px;transition:color .25s}
.cyber-layer:hover h3{color:var(--wd-accent)}
.cyber-layer p{font-size:.88rem;color:var(--ink-mute);line-height:1.6;margin:0}

@media(prefers-reduced-motion:reduce){
	.cyber-soc{animation:none}
	.cyber-soc-live i{animation:none}
	.cyber-ring-val{animation:none}
	.cyber-layer,.cyber-layer .ico{transition:none}
}
/* ===== PAGE-REP (rep-) ===== */
/* Festpreis-Rechner: Mindesthöhe haelt das Layout beim Schrittwechsel stabil (kein Springen/Wippen) */
#rc-app{min-height:480px}
/* Reparatur-Kontakt-Animation: langsam drehende Zahnräder (einzigartig, Werkstatt-Thema) */
.rep-gears-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.rep-gears-bg svg{position:absolute;fill:none;stroke:color-mix(in srgb,var(--wd-accent) 24%,transparent);stroke-width:1.1;opacity:.55}
.rep-gears-bg .g1{width:240px;height:240px;top:-58px;left:-54px;animation:repGearSpin 26s linear infinite}
.rep-gears-bg .g2{width:340px;height:340px;bottom:-120px;right:-90px;animation:repGearSpin 34s linear infinite reverse}
@keyframes repGearSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.rep-gears-bg svg{animation:none}}
/* Hero-Mockup: Reparatur-Auftrag-Ticket (dunkles Panel) */
.rep-ticket{background:#11182b;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;color:#fff;animation:wdFloat 7s ease-in-out infinite;margin:22px 16px 26px}
@media(prefers-reduced-motion:reduce){.rep-ticket{animation:none}}
.rep-ticket-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.rep-ticket-bar .g{display:flex;gap:5px}
.rep-ticket-bar .g i{width:10px;height:10px;border-radius:50%}
.rep-ticket-bar .g i:nth-child(1){background:#ff5f57}.rep-ticket-bar .g i:nth-child(2){background:#febc2e}.rep-ticket-bar .g i:nth-child(3){background:#28c840}
.rep-ticket-id{display:flex;align-items:center;gap:7px;font-family:'Rubik',sans-serif;font-weight:700;font-size:.82rem;color:#fff}
.rep-ticket-id svg{color:var(--wd-accent);flex-shrink:0}
.rep-ticket-dev{margin-left:auto;font-size:.74rem;color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);border-radius:50px;padding:4px 11px}
.rep-ticket-body{padding:20px 18px 22px}
/* Status-Stepper */
.rep-stepper{display:flex;align-items:flex-start;justify-content:space-between;position:relative;margin-bottom:22px}
.rep-stepper::before{content:"";position:absolute;top:11px;left:11%;right:11%;height:2px;background:rgba(255,255,255,.12)}
.rep-step{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;text-align:center}
.rep-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#11182b;border:2px solid rgba(255,255,255,.22);color:#11182b;flex-shrink:0;transition:all .3s}
.rep-step.done .rep-dot{background:#1F8744;border-color:#1F8744;color:#fff}
.rep-step.active .rep-dot{background:var(--wd-accent);border-color:var(--wd-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--wd-accent) 28%,transparent);animation:repPulse 1.8s ease-in-out infinite}
@keyframes repPulse{0%,100%{box-shadow:0 0 0 5px color-mix(in srgb,var(--wd-accent) 28%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--wd-accent) 10%,transparent)}}
@media(prefers-reduced-motion:reduce){.rep-step.active .rep-dot{animation:none}}
.rep-step-lbl{font-size:.7rem;line-height:1.2;color:rgba(255,255,255,.55);max-width:64px}
.rep-step.done .rep-step-lbl,.rep-step.active .rep-step-lbl{color:rgba(255,255,255,.92);font-weight:600}
/* Ticket-Zeilen */
.rep-ticket-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07);font-size:.88rem}
.rep-ticket-row .lbl{color:rgba(255,255,255,.6)}
.rep-ticket-row .val{font-family:'Rubik',sans-serif;font-weight:700;color:#fff;display:flex;align-items:baseline;gap:6px}
.rep-ticket-row .val small{font-size:.66rem;font-weight:400;color:rgba(255,255,255,.45)}
.rep-ticket-ok{display:flex;align-items:center;gap:8px;margin-top:14px;background:color-mix(in srgb,#1F8744 18%,#11182b);border:1px solid color-mix(in srgb,#1F8744 45%,transparent);color:#7be3a4;border-radius:10px;padding:10px 13px;font-size:.85rem;font-weight:600}
.rep-ticket-ok svg{color:#28c840;flex-shrink:0}
/* Floats am Rand des Tickets platzieren, ohne Inhalt zu verdecken */
.rep-ticket~.wd-float-1{top:-18px;right:-22px}
.rep-ticket~.wd-float-3{bottom:-22px;right:-14px}
@media(max-width:980px){.rep-ticket~.wd-float-1{right:-6px}.rep-ticket~.wd-float-3{right:-2px}}
@media(max-width:560px){.rep-ticket~.wd-float-1{right:2px;top:-12px}.rep-ticket~.wd-float-3{right:4px;bottom:-14px}}

/* Festpreis-Liste (#rep-preise) */
.rep-prices{display:grid;grid-template-columns:1fr;gap:14px;max-width:920px;margin:0 auto}
@media(min-width:680px){.rep-prices{grid-template-columns:1fr 1fr}}
.rep-price{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:18px 20px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-left-color .3s}
.rep-price:hover{transform:translateY(-5px);border-left-color:var(--wd-accent2);box-shadow:0 24px 48px -22px rgba(15,30,54,.26)}
.rep-price-ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);transition:all .3s}
.rep-price:hover .rep-price-ico{background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));color:#fff;transform:scale(1.06)}
.rep-price-main{flex:1;min-width:0}
.rep-price-main h3{font-size:1.02rem;margin:0 0 3px;color:var(--ink)}
.rep-price-main p{font-size:.83rem;color:var(--ink-mute);line-height:1.45;margin:0}
.rep-price-tag{flex-shrink:0;font-family:'Rubik',sans-serif;font-weight:800;font-size:.95rem;color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 9%,#fff);border:1px solid color-mix(in srgb,var(--wd-accent) 22%,transparent);border-radius:9px;padding:7px 12px;text-align:center;white-space:nowrap}

/* Geräte-Grid (was wir reparieren) */
.rep-devices{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.rep-device{flex:1 1 170px;max-width:220px;background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:28px 18px;text-align:center;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-top-color .3s}
.rep-device:hover{transform:translateY(-6px);border-top-color:var(--wd-accent2);box-shadow:0 24px 48px -20px rgba(15,30,54,.25)}
.rep-device-ico{width:72px;height:72px;margin:0 auto 16px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);transition:all .3s}
.rep-device:hover .rep-device-ico{background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));color:#fff;transform:scale(1.06)}
.rep-device h3{font-size:1rem;margin:0 0 5px;color:var(--ink)}
.rep-device p{font-size:.8rem;color:var(--ink-mute);line-height:1.45;margin:0}
/* ===== PAGE-DATEV (datev-) ===== */
/* Hero-Mockup: „Unternehmen online" – Mandant lädt Belege hoch, sie fließen zur Kanzlei (strukturell wie .seo-serp / .cms-editor) */
.datev-flow{background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:var(--ink)}
.datev-flow-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#f7f9fc;border-bottom:1px solid #e7ebf1}
.datev-flow-bar .g{display:flex;gap:5px}
.datev-flow-bar .g i{width:10px;height:10px;border-radius:50%}
.datev-flow-bar .g i:nth-child(1){background:#ff5f57}.datev-flow-bar .g i:nth-child(2){background:#febc2e}.datev-flow-bar .g i:nth-child(3){background:#28c840}
.datev-flow-doc{flex:1;display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:#5B6678;white-space:nowrap;overflow:hidden}
.datev-flow-doc svg{color:var(--wd-accent);flex-shrink:0}
.datev-flow-lock{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent)}
.datev-flow-body{padding:16px 16px 6px;display:flex;flex-direction:column;gap:9px}
.datev-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#f7f9fc;border:1px solid #eef1f6;transition:transform .3s,box-shadow .3s}
.datev-flow:hover .datev-row{transform:translateX(2px)}
.datev-row.ok{background:color-mix(in srgb,var(--wd-accent) 6%,#fff);border-color:color-mix(in srgb,var(--wd-accent) 18%,transparent)}
.datev-row-ico{flex-shrink:0;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid #e7ebf1;color:var(--wd-accent)}
.datev-row-name{flex:1;font-size:.84rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.datev-row-state{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.datev-row-state.ok{color:#1F8744}
.datev-row-state.ok svg{flex-shrink:0}
.datev-row-state.busy{color:#3D5A80}
.datev-dot{width:9px;height:9px;border-radius:50%;background:#3D5A80;box-shadow:0 0 0 0 color-mix(in srgb,#3D5A80 50%,transparent);animation:datevPulse 1.6s ease-out infinite}
@keyframes datevPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,#3D5A80 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.datev-flow-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 16px 0;padding:12px 16px;border-radius:10px;background:linear-gradient(100deg,color-mix(in srgb,var(--wd-accent) 10%,#fff),color-mix(in srgb,var(--wd-accent2) 10%,#fff));border:1px solid color-mix(in srgb,var(--wd-accent) 22%,transparent)}
.datev-sum-lbl{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.datev-sum-num{font-family:'Rubik',sans-serif;font-weight:800;font-size:1.5rem;line-height:1;color:var(--wd-accent)}
.datev-flow-foot{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 16px 18px}
.datev-node{font-size:.8rem;font-weight:700;color:var(--ink-2);padding:7px 14px;border-radius:50px;background:#f3f6fa;border:1px solid #e7ebf1;white-space:nowrap}
.datev-node.strong{color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));border-color:transparent;box-shadow:0 10px 22px -10px color-mix(in srgb,var(--wd-accent) 65%,transparent)}
.datev-arrow{color:var(--wd-accent);display:grid;place-items:center}
.datev-arrow svg{display:block}
.datev-flow:hover .datev-arrow svg{animation:datevSlide 1.1s ease-in-out infinite}
@keyframes datevSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.datev-float-b{bottom:-46px;right:18px}
@media(max-width:420px){.datev-flow-foot{gap:8px}.datev-node{padding:6px 10px;font-size:.74rem}}
@media(prefers-reduced-motion:reduce){.datev-flow{animation:none}.datev-dot{animation:none}.datev-flow:hover .datev-arrow svg{animation:none}}

/* „So arbeiten Kanzlei & Mandant zusammen": Vorteils-Karten */
.datev-adv{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:620px){.datev-adv{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.datev-adv{grid-template-columns:repeat(4,1fr)}}
.datev-adv-card{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:28px 24px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.datev-adv-card:hover{transform:translateY(-7px);border-top-color:var(--wd-accent2);box-shadow:0 26px 52px -22px color-mix(in srgb,var(--wd-accent) 38%,rgba(15,30,54,.3))}
.datev-adv-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);margin-bottom:18px;transition:background .3s,color .3s,transform .3s}
.datev-adv-card:hover .datev-adv-ico{background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));color:#fff;transform:scale(1.08) rotate(-5deg)}
.datev-adv-card h3{font-size:1.08rem;margin-bottom:9px;transition:color .25s}
.datev-adv-card:hover h3{color:var(--wd-accent)}
.datev-adv-card p{font-size:.92rem;color:var(--ink-mute);line-height:1.62;margin:0}
/* DATEV-Kontakt-Animation: Belegfluss – Datenpakete strömen von links nach rechts (einzigartig) */
.datev-flow-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.datev-flow-bg i{position:absolute;left:-12%;height:2px;width:64px;border-radius:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--wd-accent) 85%,transparent),transparent);box-shadow:0 0 10px color-mix(in srgb,var(--wd-accent) 55%,transparent);opacity:.55;animation:datevFlowBg var(--d,9s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes datevFlowBg{0%{transform:translateX(0)}100%{transform:translateX(124vw)}}
@media(prefers-reduced-motion:reduce){.datev-flow-bg i{animation:none;opacity:0}}
/* ===== PAGE-M365 (m365-) ===== */
/* Microsoft-365-Seite (page-microsoft-365.php) – Signatur-Komponenten */

/* -- Hero-Visual: App-Kachel-Grid in einem Fenster -- */
.m365-apps{background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:var(--ink)}
.m365-apps-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#f7f9fc;border-bottom:1px solid #e7ebf1}
.m365-apps-bar .g{display:flex;gap:5px}
.m365-apps-bar .g i{width:10px;height:10px;border-radius:50%}
.m365-apps-bar .g i:nth-child(1){background:#ff5f57}.m365-apps-bar .g i:nth-child(2){background:#febc2e}.m365-apps-bar .g i:nth-child(3){background:#28c840}
.m365-apps-title{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e7ef;border-radius:50px;padding:7px 14px;font-size:.8rem;color:#5B6678;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m365-apps-title svg{color:var(--wd-accent);flex-shrink:0}
.m365-apps-body{padding:18px 16px 18px}
.m365-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.m365-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 11px;border-radius:13px;background:color-mix(in srgb,var(--t) 7%,#fff);border:1px solid color-mix(in srgb,var(--t) 16%,transparent);transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.m365-tile:hover{transform:translateY(-4px) scale(1.03);border-color:var(--t);box-shadow:0 16px 32px -14px color-mix(in srgb,var(--t) 60%,transparent)}
.m365-ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.18rem;color:#fff;background:linear-gradient(140deg,var(--t),color-mix(in srgb,var(--t) 60%,#000));box-shadow:0 8px 18px -8px color-mix(in srgb,var(--t) 70%,transparent)}
.m365-lbl{font-size:.72rem;font-weight:700;color:var(--ink-2);letter-spacing:-.01em}
.m365-migrate{margin-top:14px;padding:13px 14px;border:1px solid #e7ebf1;border-radius:12px;background:#f7f9fc}
.m365-migrate-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--ink-mute);margin-bottom:8px}
.m365-migrate-top b{font-family:'Rubik',sans-serif;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.m365-migrate-bar{height:8px;border-radius:6px;background:#e2e7ef;overflow:hidden}
.m365-migrate-bar i{display:block;height:100%;width:90%;border-radius:6px;background:linear-gradient(90deg,var(--wd-accent),var(--wd-accent2));animation:m365Load 5s ease-in-out infinite}
@keyframes m365Load{0%{width:62%}55%,100%{width:90%}}
.m365-migrate-sync{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:.76rem;font-weight:700;color:#1F8744}
.m365-migrate-sync svg{flex-shrink:0}
@media(max-width:560px){.m365-grid{grid-template-columns:repeat(3,1fr);gap:9px}.m365-ico{width:34px;height:34px;font-size:1rem}}
@media(prefers-reduced-motion:reduce){.m365-apps{animation:none}.m365-migrate-bar i{animation:none}}

/* -- Plan-Vergleich: Tabelle (Basic / Standard / Premium) -- */
.m365-tarife{max-width:1040px;margin:0 auto}
.m365-tarife-wrap{overflow-x:auto;border:1px solid var(--bg-line);border-radius:18px;background:#fff;box-shadow:0 28px 60px -32px rgba(15,30,54,.22);-webkit-overflow-scrolling:touch}
.m365-table{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;font-size:.95rem}
.m365-table th,.m365-table td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--bg-line);vertical-align:middle}
.m365-table thead th{padding:26px 18px 20px;vertical-align:top}
.m365-table tbody th[scope=row]{text-align:left;font-weight:600;color:var(--ink-2);font-size:.9rem}
.m365-table td{color:var(--ink-2);font-weight:600}
.m365-table tbody tr{transition:background .25s}
.m365-table tbody tr:not(.m365-table-cta):hover{background:color-mix(in srgb,var(--wd-accent) 5%,#fff)}
.m365-table tbody tr:not(.m365-table-cta):hover th[scope=row]{color:var(--wd-accent)}
.m365-table tbody tr:last-child th,.m365-table tbody tr:last-child td{border-bottom:none}
.m365-table .hl{background:color-mix(in srgb,var(--wd-accent) 7%,#fff);border-left:1px solid color-mix(in srgb,var(--wd-accent) 22%,transparent);border-right:1px solid color-mix(in srgb,var(--wd-accent) 22%,transparent)}
.m365-table thead th.hl{border-top:3px solid var(--wd-accent);border-top-left-radius:10px;border-top-right-radius:10px}
.m365-plan{display:block;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.18rem;color:var(--ink);line-height:1.15}
.m365-plan-sub{display:block;font-size:.78rem;font-weight:600;color:var(--ink-mute);margin-top:4px}
.m365-price{display:block;margin-top:12px;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.55rem;color:var(--wd-accent);line-height:1}
.m365-price .from{font-size:.8rem;color:var(--ink-mute);font-weight:600;margin-right:4px}
.m365-price small{display:block;font-size:.72rem;color:var(--ink-mute);font-weight:600;margin-top:5px}
.m365-badge{display:inline-block;background:linear-gradient(100deg,var(--wd-accent),var(--wd-accent2));color:#fff;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:50px;margin-bottom:9px}
.m365-yes{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
.m365-yes svg{color:var(--success);flex-shrink:0}
.m365-no{color:var(--ink-mute);font-weight:700;opacity:.6}
.m365-table-cta td{padding:20px 18px 24px}
.m365-table-cta .wd-btn{width:100%;justify-content:center;padding:11px 16px;font-size:.9rem}
.m365-tarife-note{max-width:1040px;margin:26px auto 0;display:flex;gap:14px;align-items:flex-start;background:color-mix(in srgb,var(--wd-accent) 6%,#fff);border:1px solid color-mix(in srgb,var(--wd-accent) 24%,transparent);border-radius:14px;padding:18px 22px}
.m365-tarife-note svg{color:var(--wd-accent);flex-shrink:0;margin-top:3px}
.m365-tarife-note p{color:var(--ink-2);font-size:.95rem;line-height:1.65;margin:0}
.m365-tarife-note b{color:var(--ink)}

/* -- App-Übersicht: Karten je App -- */
.m365-app-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.m365-app-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.m365-app-grid{grid-template-columns:repeat(3,1fr)}}
.m365-app{position:relative;overflow:hidden;background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:26px 24px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s;--c:var(--wd-accent)}
.m365-app::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.m365-app:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 45%,var(--bg-line));box-shadow:0 24px 48px -20px color-mix(in srgb,var(--c) 38%,rgba(15,30,54,.3))}
.m365-app:hover::before{transform:scaleX(1)}
.m365-app-ico{width:56px;height:56px;display:grid;place-items:center;margin-bottom:18px;transition:transform .3s}
.m365-app-ico img{width:52px;height:52px;object-fit:contain;display:block;filter:drop-shadow(0 4px 9px rgba(15,30,54,.12))}
.m365-app:hover .m365-app-ico{transform:scale(1.08) rotate(-3deg)}
.m365-app h3{font-size:1.1rem;margin-bottom:9px;transition:color .25s}
.m365-app:hover h3{color:var(--c)}
.m365-app p{font-size:.92rem;color:var(--ink-mute);line-height:1.6;margin:0}
/* D2: Abschluss-Animation im Backup-Band ("automatisch gesichert") */
.m365-safe{display:inline-flex;align-items:center;gap:12px;margin-top:22px}
.m365-safe-ring{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;flex-shrink:0;animation:m365Safe 2.4s linear infinite}
@keyframes m365Safe{to{transform:rotate(360deg)}}
.m365-safe-txt{font-size:.84rem;font-weight:700;color:#fff;letter-spacing:.01em}
@media(prefers-reduced-motion:reduce){.m365-safe-ring{animation:none}}
/* D3: Kontakt-Animation – Cloud-Tiles steigen auf (einzigartig fuer M365) */
.m365-cloud{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.m365-cloud span{position:absolute;bottom:-60px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--wd-accent) 32%,transparent),color-mix(in srgb,var(--wd-accent2) 26%,transparent));border:1px solid color-mix(in srgb,#fff 18%,transparent);box-shadow:0 10px 26px -10px color-mix(in srgb,var(--wd-accent) 55%,transparent);animation:m365Rise var(--d,18s) linear infinite;animation-delay:var(--dl,0s);opacity:0}
@keyframes m365Rise{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.65}88%{opacity:.45}100%{transform:translateY(-118vh) rotate(22deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.m365-cloud span{animation:none;opacity:0}}
/* ===== PAGE-DR (dr-) ===== */
/* Signatur-Mockup im Hero: „Wiederherstellung läuft" */
.dr-scan{position:relative;background:linear-gradient(165deg,#0e1733,#13204a);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:#eef2ff}
.dr-scan-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.09)}
.dr-scan-bar .g{display:flex;gap:5px}
.dr-scan-bar .g i{width:10px;height:10px;border-radius:50%}
.dr-scan-bar .g i:nth-child(1){background:#ff5f57}.dr-scan-bar .g i:nth-child(2){background:#febc2e}.dr-scan-bar .g i:nth-child(3){background:#28c840}
.dr-scan-title{flex:1;display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.9);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-scan-title svg{color:var(--wd-accent2);flex-shrink:0}
.dr-scan-live{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#34d399;flex-shrink:0}
.dr-scan-live i{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:drPulse 1.8s ease-out infinite}
@keyframes drPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.dr-scan-body{padding:16px}
.dr-scan-disk{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.04);margin-bottom:14px}
.dr-scan-disk-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 28%,transparent);color:#fff;flex-shrink:0}
.dr-scan-disk-lbl{font-weight:700;font-size:.95rem;color:#fff;line-height:1.2}
.dr-scan-disk-sub{display:block;font-size:.74rem;color:rgba(255,255,255,.55);margin-top:2px}
.dr-scan-prog{padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.035);margin-bottom:14px}
.dr-scan-prog-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:rgba(255,255,255,.66);margin-bottom:9px}
.dr-scan-prog-top b{font-family:'Rubik',sans-serif;font-weight:800;font-size:1rem;color:#fff;font-variant-numeric:tabular-nums}
.dr-scan-prog-bar{height:9px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.dr-scan-prog-bar i{display:block;height:100%;width:78%;border-radius:6px;background:linear-gradient(90deg,var(--wd-accent),var(--wd-accent2));position:relative;animation:drProg 5.5s ease-in-out infinite}
.dr-scan-prog-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:drSheen 2.4s ease-in-out infinite}
@keyframes drProg{0%,100%{width:74%}50%{width:82%}}
@keyframes drSheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}
.dr-scan-files{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:2px}
.dr-scan-files li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:.88rem;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums}
.dr-scan-files li:nth-child(odd){background:rgba(255,255,255,.045)}
.dr-scan-files li{opacity:0;animation:drFileIn .5s ease forwards}
.dr-scan-files li:nth-child(1){animation-delay:.3s}.dr-scan-files li:nth-child(2){animation-delay:1.1s}.dr-scan-files li:nth-child(3){animation-delay:1.9s}
@keyframes drFileIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.dr-file-ok{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#34d399 24%,transparent);color:#34d399;flex-shrink:0}
.dr-file-ok svg{width:13px;height:13px}
.dr-scan-status{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.72);padding-top:4px}
.dr-scan-dot{width:8px;height:8px;border-radius:50%;background:var(--wd-accent2);box-shadow:0 0 8px color-mix(in srgb,var(--wd-accent2) 80%,transparent);flex-shrink:0;animation:drBlink 1.4s ease-in-out infinite}
@keyframes drBlink{0%,100%{opacity:1}50%{opacity:.35}}
.dr-scan~.wd-float-1{top:-22px;right:-12px}
.dr-scan~.wd-float-3{bottom:-22px;right:18px}
@media(max-width:560px){.dr-scan~.wd-float-1{right:0}}
/* Hover: Mockup leicht anheben */
.dr-scan:hover{box-shadow:0 48px 100px -30px color-mix(in srgb,var(--wd-accent) 38%,rgba(0,0,0,.6))}

/* No Data – No Fee Callout */
.dr-nofee{display:flex;align-items:flex-start;gap:20px;max-width:900px;margin:46px auto 0;background:linear-gradient(160deg,var(--brand-3),#1b2a4a);color:#fff;border-radius:20px;padding:30px 34px;box-shadow:0 30px 60px -24px rgba(15,30,54,.45);position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.dr-nofee::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);transition:left .7s ease;pointer-events:none}
.dr-nofee:hover{transform:translateY(-5px);box-shadow:0 40px 80px -26px color-mix(in srgb,var(--wd-accent) 45%,rgba(15,30,54,.5))}
.dr-nofee:hover::after{left:130%}
.dr-nofee-ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 38%,transparent);color:#fff;flex-shrink:0}
.dr-nofee-text h3{font-family:'Rubik',sans-serif;font-size:clamp(1.2rem,2.2vw,1.5rem);margin:2px 0 8px;color:#fff}
.dr-nofee-text p{color:rgba(255,255,255,.8);line-height:1.65;font-size:.96rem;margin:0}
@media(max-width:600px){.dr-nofee{flex-direction:column;gap:14px;padding:26px 22px}}

/* Kontakt-Hinweis: Gerät nicht weiter benutzen */
.dr-kontakt-hint{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--warn) 16%,rgba(255,255,255,.04));border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.dr-kontakt-hint svg{color:var(--warn);flex-shrink:0;margin-top:1px}
.dr-kontakt-hint span{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.85)}
.dr-kontakt-hint b{color:#fff}
@media(prefers-reduced-motion:reduce){.dr-scan{animation:none}.dr-scan-live i,.dr-scan-prog-bar i,.dr-scan-prog-bar i::after,.dr-scan-files li,.dr-scan-dot{animation:none}.dr-scan-files li{opacity:1}}

/* A1: Hersteller-Wand (Platzhalter-Wortmarken; <span> später durch <img>-Logo ersetzbar) */
.dr-brands{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:6px}
.dr-brand{flex:0 1 178px;display:flex;align-items:center;justify-content:center;min-height:96px;padding:16px 18px;border:1px solid var(--bg-line);border-radius:14px;background:#fff;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}
.dr-brand span{font-family:'Rubik',sans-serif;font-weight:700;font-size:1.08rem;letter-spacing:-.01em;color:var(--ink-2);text-align:center;transition:color .3s}
.dr-brand img{max-height:60px;max-width:100%;object-fit:contain;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.dr-brand:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--wd-accent) 45%,transparent);box-shadow:0 18px 36px -22px color-mix(in srgb,var(--wd-accent) 50%,rgba(15,30,54,.3))}
.dr-brand:hover span{color:var(--wd-accent)}
.dr-brand:hover img{transform:scale(1.06)}
.dr-brands-note{margin-top:18px;text-align:center;color:var(--ink-mute);font-size:.92rem;max-width:680px;margin-left:auto;margin-right:auto}

/* A6: Übergabe-Wahl (vorbeibringen / einschicken) */
.dr-handover{display:flex;flex-wrap:wrap;gap:10px}
.dr-radio{display:inline-flex;align-items:center;gap:9px;flex:1 1 170px;padding:12px 16px;border:1px solid var(--bg-line);border-radius:12px;background:var(--bg-soft);cursor:pointer;font-size:.92rem;font-weight:600;color:var(--ink-2);transition:border-color .2s,background .2s,color .2s}
.dr-radio input{accent-color:var(--wd-accent);margin:0;flex-shrink:0}
.dr-radio:has(input:checked){border-color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 8%,#fff);color:var(--wd-accent)}
.dr-handover-note{margin:10px 0 0;font-size:.84rem;color:var(--ink-mute);line-height:1.5}

/* A2: Datenrettungs-Animation im Kontaktbereich – Sektoren werden Block fuer Block wiederhergestellt */
.dr-recover{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.dr-recover span{position:absolute;inset:0;display:block}
.dr-recover .grid{background-image:linear-gradient(color-mix(in srgb,#fff 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#fff 8%,transparent) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(130% 90% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(130% 90% at 50% 0%,#000,transparent 72%)}
.dr-recover .blocks{background-image:radial-gradient(circle closest-side,color-mix(in srgb,var(--wd-accent) 60%,transparent) 90%,transparent);background-size:34px 34px;-webkit-mask-image:linear-gradient(58deg,transparent 42%,#000 50%,transparent 58%);mask-image:linear-gradient(58deg,transparent 42%,#000 50%,transparent 58%);-webkit-mask-size:280% 280%;mask-size:280% 280%;opacity:.55;animation:drRecover 7s linear infinite}
@keyframes drRecover{0%{-webkit-mask-position:0% 0%;mask-position:0% 0%}100%{-webkit-mask-position:100% 100%;mask-position:100% 100%}}
.dr-recover .head{left:-40%;width:40%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--wd-accent) 24%,transparent),transparent);filter:blur(10px);animation:drHead 7s ease-in-out infinite}
@keyframes drHead{0%{transform:translateX(0)}100%{transform:translateX(355%)}}
@media(prefers-reduced-motion:reduce){.dr-recover .blocks,.dr-recover .head{animation:none}}

/* ===== Trust-Badges (Google + ProvenExpert), site-weit neben dem Kontaktformular ===== */
.nk-trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.nk-trust-card{flex:1 1 200px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:16px;padding:20px 24px;min-height:148px;box-shadow:0 22px 48px -24px rgba(0,0,0,.55)}
.nk-trust-card img{max-width:100%;max-height:120px;width:auto;height:auto;object-fit:contain;display:block}
.nk-trust-card.nk-trust-pe img{max-height:172px}
@media(max-width:600px){.nk-trust-card{min-height:120px}.nk-trust-card img{max-height:96px}.nk-trust-card.nk-trust-pe img{max-height:140px}}

/* ===== PAGE-TI (ti-) ===== */
/* Leistungsseite Telematikinfrastruktur: Hero-Status-Panel, Zielgruppen-Karten, Ablauf */

/* ---- Hero-Mockup: TI-Status-Panel (dunkles Panel, struktur wie .sec-dash) ---- */
.ti-status{position:relative;background:linear-gradient(165deg,#0f2a20,#0a1a18);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:#fff}
.ti-status-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.09)}
.ti-status-bar .g{display:flex;gap:5px}
.ti-status-bar .g i{width:10px;height:10px;border-radius:50%}
.ti-status-bar .g i:nth-child(1){background:#ff5f57}.ti-status-bar .g i:nth-child(2){background:#febc2e}.ti-status-bar .g i:nth-child(3){background:#28c840}
.ti-status-title{flex:1;display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7);overflow:hidden;white-space:nowrap}
.ti-status-title svg{color:#5BE3A4;flex-shrink:0}
.ti-status-live{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5BE3A4}
.ti-status-live i{width:7px;height:7px;border-radius:50%;background:#5BE3A4;box-shadow:0 0 0 0 rgba(91,227,164,.6);animation:tiBlink 1.6s ease-in-out infinite}
.ti-status-body{padding:22px 22px 16px}
.ti-status-head{display:flex;align-items:center;gap:18px;padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.09)}
.ti-status-orb{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#5BE3A4;background:radial-gradient(circle,rgba(45,134,89,.45),rgba(45,134,89,.08) 72%)}
.ti-status-orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #5BE3A4;animation:tiPulse 2.2s ease-out infinite}
.ti-status-headtext b{display:block;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.35rem;line-height:1.15;color:#5BE3A4}
.ti-status-headtext small{font-size:.8rem;color:rgba(255,255,255,.55)}
.ti-status-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.ti-status-rows li{display:flex;align-items:center;gap:9px;font-size:.84rem;font-weight:600;color:rgba(255,255,255,.84)}
.ti-status-rows li svg{color:#5BE3A4;flex-shrink:0}
.ti-status-rows li em{margin-left:auto;font-style:normal;font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5BE3A4;background:rgba(91,227,164,.12);border:1px solid rgba(91,227,164,.25);padding:2px 7px;border-radius:5px}
.ti-status-foot{display:flex;align-items:center;gap:7px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);font-size:.74rem;color:rgba(255,255,255,.45)}
.ti-status-foot svg{flex-shrink:0}
@keyframes tiPulse{0%{transform:scale(.82);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes tiBlink{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:420px){.ti-status-rows{grid-template-columns:1fr}}

/* ---- Zielgruppen-Karten: Für wen ---- */
.ti-who{display:grid;grid-template-columns:1fr;gap:18px;max-width:1100px;margin:0 auto}
@media(min-width:560px){.ti-who{grid-template-columns:1fr 1fr}}
@media(min-width:920px){.ti-who{grid-template-columns:repeat(5,1fr)}}
.ti-who-card{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:24px 20px;text-align:center;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.ti-who-card:hover{transform:translateY(-6px);border-color:var(--wd-accent);box-shadow:0 22px 46px -20px color-mix(in srgb,var(--wd-accent) 38%,rgba(15,30,54,.3))}
.ti-who-ico{width:54px;height:54px;margin:0 auto 16px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent);transition:background .3s,color .3s,transform .3s}
.ti-who-card:hover .ti-who-ico{background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));color:#fff;transform:scale(1.08) rotate(-4deg)}
.ti-who-card h3{font-size:1.04rem;margin-bottom:7px}
.ti-who-card p{font-size:.86rem;color:var(--ink-mute);line-height:1.55;margin:0}

/* ---- Ablauf: Anbindung -> Einrichtung -> Schulung -> Support ---- */
.ti-flow{display:grid;grid-template-columns:1fr;gap:20px;max-width:1000px;margin:54px auto 0}
@media(min-width:680px){.ti-flow{grid-template-columns:repeat(4,1fr)}}
.ti-flow-step{position:relative;text-align:center;padding:0 8px}
.ti-flow-step .n{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.2rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 10px 24px -8px color-mix(in srgb,var(--wd-accent) 65%,transparent);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.ti-flow-step h4{font-size:1.02rem;margin-bottom:8px;transition:color .25s}
.ti-flow-step p{font-size:.86rem;color:var(--ink-mute);line-height:1.55;margin:0}
@media(min-width:680px){.ti-flow-step:not(:last-child)::after{content:"";position:absolute;top:28px;left:calc(50% + 36px);right:calc(-50% + 36px);height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--wd-accent) 35%,var(--bg-line)),var(--bg-line))}}
.ti-flow-step:hover .n{transform:scale(1.12) rotate(-6deg);box-shadow:0 18px 38px -8px color-mix(in srgb,var(--wd-accent) 75%,transparent)}
.ti-flow-step:hover h4{color:var(--wd-accent)}

@media(prefers-reduced-motion:reduce){
	.ti-status{animation:none}
	.ti-status-live i{animation:none}
	.ti-status-orb::after{animation:none;opacity:.5}
	.ti-who-card,.ti-who-ico,.ti-flow-step .n{transition:none}
}
/* ===== PAGE-HW (hw-) ===== */
/* Hero-Mockup: Arbeitsplatz-Konfiguration (konfigurierter Buero-PC) */
.hw-config{position:relative;background:linear-gradient(165deg,#1c1206,#2a1a0a);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:#f5ece1}
.hw-config-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.09)}
.hw-config-bar .g{display:flex;gap:5px}
.hw-config-bar .g i{width:10px;height:10px;border-radius:50%}
.hw-config-bar .g i:nth-child(1){background:#ff5f57}.hw-config-bar .g i:nth-child(2){background:#febc2e}.hw-config-bar .g i:nth-child(3){background:#28c840}
.hw-config-title{flex:1;display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:rgba(255,255,255,.92);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-config-title svg{color:var(--wd-accent2);flex-shrink:0}
.hw-config-tag{flex-shrink:0;font-size:.64rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));padding:4px 9px;border-radius:50px;white-space:nowrap}
.hw-config-body{padding:14px 16px 16px}
.hw-spec{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:.88rem;transition:background .25s}
.hw-spec:nth-child(odd){background:rgba(255,255,255,.045)}
.hw-spec .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:color-mix(in srgb,var(--wd-accent) 28%,transparent);color:var(--wd-accent2)}
.hw-spec .lbl{color:rgba(255,255,255,.62)}
.hw-spec .val{margin-left:auto;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.hw-config:hover .hw-spec{background:rgba(255,255,255,.06)}
.hw-config-status{margin-top:12px;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--wd-accent2) 36%,transparent);border-radius:10px;background:color-mix(in srgb,var(--wd-accent) 16%,transparent);font-weight:700;font-size:.88rem;color:#fff}
.hw-config-check{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff;background:linear-gradient(135deg,var(--wd-accent2),#34d399);box-shadow:0 0 0 0 rgba(231,111,28,.5);animation:hwPulse 2s ease-out infinite}
@keyframes hwPulse{0%{box-shadow:0 0 0 0 rgba(231,111,28,.5)}70%{box-shadow:0 0 0 10px rgba(231,111,28,0)}100%{box-shadow:0 0 0 0 rgba(231,111,28,0)}}
.hw-config~.wd-float-1{top:-26px;right:-14px}
.hw-config~.wd-float-3{bottom:-22px;right:18px}
@media(max-width:560px){.hw-config~.wd-float-1{right:0}.hw-config~.wd-float-3{right:6px}}

/* Ablauf: Von Beratung bis Einrichtung (4 Schritte + Pfeile) */
.hw-flow{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch;max-width:1080px;margin:0 auto}
@media(min-width:900px){.hw-flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px}}
.hw-flow-step{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:28px 24px;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.hw-flow-step:hover{transform:translateY(-6px);box-shadow:0 26px 52px -22px rgba(15,30,54,.24);border-color:color-mix(in srgb,var(--wd-accent) 45%,var(--bg-line))}
.hw-flow-step .n{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.18rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 12px 26px -10px color-mix(in srgb,var(--wd-accent) 65%,transparent);margin-bottom:16px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.hw-flow-step:hover .n{transform:scale(1.1) rotate(-6deg)}
.hw-flow-step h3{font-size:1.1rem;margin-bottom:9px;transition:color .25s}
.hw-flow-step:hover h3{color:var(--wd-accent)}
.hw-flow-step p{color:var(--ink-mute);font-size:.92rem;line-height:1.6;margin:0}
.hw-flow-arrow{display:grid;place-items:center;color:var(--wd-accent);opacity:.6}
@media(max-width:899px){.hw-flow-arrow svg{transform:rotate(90deg)}}
.hw-flow-note{max-width:1080px;margin:26px auto 0;display:flex;gap:14px;align-items:flex-start;background:color-mix(in srgb,var(--wd-accent) 6%,#fff);border:1px solid color-mix(in srgb,var(--wd-accent) 24%,transparent);border-radius:14px;padding:18px 22px}
.hw-flow-note svg{color:var(--wd-accent);flex-shrink:0;margin-top:2px}
.hw-flow-note p{color:var(--ink-2);font-size:.95rem;line-height:1.65;margin:0}
.hw-flow-note b{color:var(--ink)}

@media(prefers-reduced-motion:reduce){.hw-config{animation:none}.hw-config-check{animation:none}}
/* ===== PAGE-WG (wg-) ===== */
/* Hero-Mockup: „Geräteschutz · aktiv"-Karte (Schutzbrief-Optik, strukturell wie .seo-serp) */
.wg-police{background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden;animation:wdFloat 7s ease-in-out infinite;color:var(--ink)}
.wg-police-bar{display:flex;align-items:center;gap:11px;padding:14px 18px;background:linear-gradient(100deg,color-mix(in srgb,var(--wd-accent) 16%,#fff),color-mix(in srgb,var(--wd-accent2) 14%,#fff));border-bottom:1px solid color-mix(in srgb,var(--wd-accent) 24%,#e7ebf1)}
.wg-police-shield{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 8px 20px -8px color-mix(in srgb,var(--wd-accent) 70%,transparent)}
.wg-police-title{font-family:'Rubik',sans-serif;font-weight:800;font-size:1rem;color:var(--ink);flex:1;letter-spacing:-.01em}
.wg-police-status{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#1F8744;background:rgba(31,135,68,.1);border:1px solid rgba(31,135,68,.26);border-radius:50px;padding:4px 11px;white-space:nowrap}
.wg-police-status i{width:8px;height:8px;border-radius:50%;background:#28c840;box-shadow:0 0 0 3px rgba(40,200,64,.22);animation:wgPulse 2.2s ease-in-out infinite}
.wg-police-body{padding:18px 18px 20px}
.wg-police-device{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;background:#f7f9fc;border:1px solid #e7ebf1;margin-bottom:16px}
.wg-police-dev-ico{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 12%,#fff)}
.wg-police-device b{display:block;font-size:.95rem;color:var(--ink);line-height:1.15}
.wg-police-device small{font-size:.74rem;color:var(--ink-mute)}
.wg-police-risks{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.wg-police-risks li{display:flex;align-items:center;gap:11px;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.wg-police-risks .wg-chk{width:24px;height:24px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#1F8744,#28c840);box-shadow:0 6px 14px -6px rgba(31,135,68,.7)}
.wg-police-risks li:nth-child(1) .wg-chk{animation:wgPop .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.15s}
.wg-police-risks li:nth-child(2) .wg-chk{animation:wgPop .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.3s}
.wg-police-risks li:nth-child(3) .wg-chk{animation:wgPop .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.45s}
.wg-police-risks li:nth-child(4) .wg-chk{animation:wgPop .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.6s}
.wg-police-risks li:nth-child(5) .wg-chk{animation:wgPop .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.75s}
.wg-police-foot{display:flex;align-items:center;gap:9px;padding:13px 15px;border-radius:11px;background:color-mix(in srgb,var(--wd-accent) 9%,#fff);border:1px dashed color-mix(in srgb,var(--wd-accent) 40%,transparent);color:var(--ink-2);font-size:.86rem;font-weight:700;line-height:1.4}
.wg-police-foot svg{color:var(--wd-accent);flex-shrink:0}
.wg-float-b{bottom:-40px;right:14px}
@keyframes wgPulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes wgPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@media(max-width:420px){.wg-police-risks li{font-size:.86rem}.wg-police-foot{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.wg-police{animation:none}.wg-police-status i{animation:none}.wg-police-risks .wg-chk{animation:none}}

/* Ehrlicher Hinweis (Konditionen variieren je Tarif) */
.wg-note{display:flex;align-items:flex-start;gap:12px;max-width:880px;margin:34px auto 0;padding:18px 24px;border-radius:14px;background:color-mix(in srgb,var(--wd-accent) 8%,#fff);border:1px dashed color-mix(in srgb,var(--wd-accent) 42%,transparent);color:var(--ink-2);font-size:.95rem;line-height:1.65;transition:box-shadow .3s,transform .3s,border-color .3s}
.wg-note:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--wd-accent) 60%,transparent);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--wd-accent) 45%,rgba(15,30,54,.3))}
.wg-note svg{color:var(--wd-accent);flex-shrink:0;margin-top:2px}
.wg-note b{color:var(--ink);font-weight:800}
.wg-note em{font-style:normal;font-weight:700;color:var(--wd-accent)}


/* ===== HERO-STAGE (hs-): heller, zentrierter Produkt-Hero (Archetyp) ===== */
.hs-hero{position:relative;overflow:hidden;padding:60px 0 72px}
.hs-light{background:linear-gradient(180deg,#F5F8FD 0%,#E7F0FB 100%);color:var(--ink);border-bottom:1px solid var(--bg-line)}
.hs-glow{position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--wd-accent) 24%,transparent),transparent 62%);pointer-events:none}
.hs-intro{position:relative;max-width:840px;margin:0 auto;text-align:center}
.hs-eyebrow{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 12%,#fff);border:1px solid color-mix(in srgb,var(--wd-accent) 28%,transparent);border-radius:50px;padding:7px 16px;margin-bottom:22px}
.hs-intro h1{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(2.2rem,5.2vw,3.8rem);line-height:1.06;letter-spacing:-.03em;margin:0 0 20px;color:var(--ink)}
.hs-intro h1 span{color:var(--wd-accent)}
.hs-intro p{font-size:1.08rem;line-height:1.72;color:var(--ink-mute);max-width:640px;margin:0 auto 28px}
.hs-actions{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center}
.hs-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.96rem;color:var(--wd-accent);text-decoration:none}
.hs-link:hover{text-decoration:underline}
.hs-stage{position:relative;max-width:740px;margin:54px auto 0;perspective:1500px}
.hs-stage .m365-apps{transform:rotateX(9deg);transform-origin:center top;box-shadow:0 54px 100px -44px rgba(15,38,84,.55);transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.hs-stage:hover .m365-apps{transform:rotateX(0deg) translateY(-4px)}
.hs-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--bg-line);border-radius:50px;padding:10px 16px;font-weight:700;font-size:.83rem;color:var(--ink);box-shadow:0 18px 36px -16px rgba(15,38,84,.35)}
.hs-chip svg{color:var(--wd-accent);flex-shrink:0}
.hs-chip-l{top:30px;left:-18px;animation:wdFloat 7s ease-in-out infinite}
.hs-chip-r{bottom:40px;right:-18px;animation:wdFloat 8.5s ease-in-out infinite reverse}
.hs-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 50px;max-width:820px;margin:56px auto 0;border-top:1px solid var(--bg-line);padding-top:32px}
.hs-stats div{text-align:center}
.hs-stats b{display:block;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.7rem;line-height:1;color:var(--wd-accent)}
.hs-stats span{font-size:.82rem;color:var(--ink-mute)}
@media(max-width:760px){.hs-chip{display:none}.hs-stage .m365-apps{transform:none}.hs-stage:hover .m365-apps{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.hs-chip-l,.hs-chip-r{animation:none}}

/* ===== M365-Hero: Orbit-Variante (S15) – nur Microsoft-365 (scoped via .hs-hero--m365) ===== */
.hs-hero--m365 .container{display:grid;grid-template-columns:1.04fr .96fr;grid-template-areas:"intro stage";align-items:center;gap:18px 44px}
.hs-hero--m365 .hs-intro{grid-area:intro;max-width:none;margin:0;text-align:left}
.hs-hero--m365 .hs-intro p{margin-left:0;margin-right:0}
.hs-hero--m365 .hs-actions{justify-content:flex-start}
.hs-hero--m365 .hs-stage{grid-area:stage;max-width:none;margin:0;min-height:440px;display:grid;place-items:center;perspective:none}
.m365-orbit{position:relative;width:420px;height:420px;display:grid;place-items:center}
.m365o-core{position:absolute;z-index:6;width:120px;height:120px;display:grid;place-items:center;border-radius:26px;background:#fff;box-shadow:0 20px 44px -16px rgba(31,80,180,.5),0 0 0 1px var(--bg-line);animation:m365oFloat 6s ease-in-out infinite}
.m365o-core img{width:78%;height:auto;display:block;filter:drop-shadow(0 4px 8px rgba(80,40,160,.22))}
.m365o-pulse{position:absolute;z-index:5;width:120px;height:120px;border-radius:28px;animation:m365oPulse 3.6s ease-out infinite}
.m365o-ring{position:absolute;inset:0;display:grid;place-items:center}
.m365o-ring::before{content:"";position:absolute;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--wd-accent) 26%,transparent)}
.m365o-in::before{width:236px;height:236px}
.m365o-out::before{width:392px;height:392px}
.m365o-in{animation:m365oSpin 38s linear infinite}
.m365o-out{animation:m365oSpin 56s linear infinite reverse}
.m365o-slot{position:absolute;width:0;height:0;display:grid;place-items:center}
.m365o-in .m365o-slot{transform:rotate(var(--a)) translateY(-118px) rotate(calc(-1*var(--a)))}
.m365o-out .m365o-slot{transform:rotate(var(--a)) translateY(-196px) rotate(calc(-1*var(--a)))}
.m365o-lg{width:60px;height:60px;display:grid;place-items:center;background:#fff;border-radius:15px;box-shadow:0 8px 20px -8px rgba(15,38,84,.30),0 0 0 1px var(--bg-line)}
.m365o-out .m365o-lg{width:52px;height:52px;border-radius:13px}
.m365o-lg img{width:62%;height:auto;display:block}
.m365o-in .m365o-lg{animation:m365oSpin 38s linear infinite reverse}
.m365o-out .m365o-lg{animation:m365oSpin 56s linear infinite}
.m365o-badge{position:absolute;z-index:7;display:flex;align-items:center;background:#fff;border:1px solid var(--bg-line);border-radius:50px;padding:8px 14px;box-shadow:0 18px 36px -16px rgba(15,38,84,.30)}
.m365o-badge img{height:16px;width:auto;display:block}
.m365o-b1{top:7%;right:0}
@keyframes m365oSpin{to{transform:rotate(360deg)}}
@keyframes m365oFloat{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@keyframes m365oPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--wd-accent) 30%,transparent)}70%{box-shadow:0 0 0 32px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(max-width:860px){
.hs-hero--m365 .container{grid-template-columns:1fr;grid-template-areas:"intro" "stage" "stats";gap:6px}
.hs-hero--m365 .hs-intro{text-align:center}
.hs-hero--m365 .hs-intro p{margin-left:auto;margin-right:auto}
.hs-hero--m365 .hs-actions{justify-content:center}
.hs-hero--m365 .hs-stage{min-height:330px;margin-top:8px;overflow:hidden}
.m365-orbit{transform:scale(.72);margin:-59px}
}
@media(max-width:430px){.m365-orbit{transform:scale(.6);margin:-84px}}
@media(prefers-reduced-motion:reduce){.m365o-in,.m365o-out,.m365o-in .m365o-lg,.m365o-out .m365o-lg,.m365o-core,.m365o-pulse{animation:none}}


/* ===== HERO FOTO-SPLIT (fs-): heller Foto-Split-Hero (Archetyp B) =====
   Wiederverwendbar (Reparatur, Drohnen, Datenrettung, Hard-/Software …).
   Akzent über --wd-accent/--wd-accent2 am <main>. Foto + Glas-Badges. */
.fs-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,var(--bg-soft) 100%);border-bottom:1px solid var(--bg-line)}
.fs-inner{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;padding:64px 0 72px}
@media(min-width:992px){.fs-inner{grid-template-columns:1.02fr 1.05fr;gap:56px}}
.fs-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:50px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px;background:color-mix(in srgb,var(--wd-accent) 11%,#fff);border:1px solid color-mix(in srgb,var(--wd-accent) 30%,#fff);color:color-mix(in srgb,var(--wd-accent) 80%,var(--ink))}
.fs-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--wd-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--wd-accent) 28%,transparent)}
/* A3/A5/D4: pulsierender Standort-/Hinweis-Punkt (wiederverwendbarer Modifier .dot-pulse) */
.fs-eyebrow .dot.dot-pulse,.wd-eyebrow .dot.dot-pulse,.ds-eyebrow .dot.dot-pulse{animation:nkDotPulse 2.2s ease-in-out infinite}
@keyframes nkDotPulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--wd-accent) 28%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--wd-accent) 6%,transparent)}}
@media(prefers-reduced-motion:reduce){.dot.dot-pulse{animation:none}}
.fs-text h1{font-family:'Rubik',sans-serif;font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:18px}
.fs-text h1 span{color:var(--wd-accent)}
.fs-text p{font-size:1.08rem;line-height:1.65;color:var(--ink-2);max-width:540px}
.fs-actions{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.fs-text .wd-btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--bg-line)}
.fs-text .wd-btn-ghost:hover{background:var(--bg-soft)}
.fs-checks{display:flex;flex-wrap:wrap;gap:8px 22px}
.fs-checks span{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--ink-2)}
.fs-checks svg{color:var(--wd-accent);flex-shrink:0}
.fs-photo{position:relative}
.fs-photo>img{width:100%;height:clamp(360px,42vw,520px);object-fit:cover;border-radius:20px;box-shadow:var(--shadow-lg);display:block}
.fs-photo::after{content:"";position:absolute;inset:auto -14px -14px auto;width:62%;height:68%;border-radius:20px;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));z-index:-1}
.fs-badge{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:12px 15px;box-shadow:var(--shadow-lg)}
.fs-badge .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));flex-shrink:0}
.fs-badge b{display:block;font-family:'Rubik',sans-serif;font-size:.95rem;color:var(--ink);line-height:1.2}
.fs-badge small{font-size:.76rem;color:var(--ink-mute)}
.fs-badge-1{top:24px;left:-22px;animation:wdFloat 7s ease-in-out infinite}
.fs-badge-2{bottom:30px;right:-18px;animation:wdFloat 8.5s ease-in-out infinite reverse}
/* Wertgarantie: „vermittelt über"-Block schwebend im Hero-Bild (unten links) */
.fs-wg-badge{flex-direction:column;align-items:flex-start;gap:6px;bottom:24px;left:-22px;animation:wdFloat 8s ease-in-out infinite}
.fs-wg-badge .fs-wg-cap{font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)}
.fs-wg-badge img{height:34px;width:auto;display:block;object-fit:contain}
@media(max-width:600px){.fs-badge{display:none}.fs-inner{padding:48px 0 54px}}
@media(prefers-reduced-motion:reduce){.fs-badge-1,.fs-badge-2,.fs-wg-badge{animation:none}}


/* ===== HERO DARK STAGE (ds-): dunkle, zentrierte Dashboard-Bühne (Archetyp C) =====
   Wiederverwendbar (Hosting, Cyber, Website-Sicherheit, Telematik …).
   Panel-Inhalt je Seite; Frame + .ds-panel/.ds-row wiederverwendbar. */
.ds-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b1226 0%,#15183a 45%,#241043 100%);color:#fff;padding:62px 0 70px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
.ds-hero .container{position:relative;z-index:2}
.ds-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6}
.ds-glow span{position:absolute;border-radius:50%;filter:blur(90px)}
.ds-glow span:nth-child(1){width:46%;height:60%;top:-12%;left:8%;background:radial-gradient(circle,color-mix(in srgb,var(--wd-accent) 70%,transparent),transparent 70%)}
.ds-glow span:nth-child(2){width:40%;height:54%;bottom:-16%;right:6%;background:radial-gradient(circle,color-mix(in srgb,var(--wd-accent2) 55%,#3a2a6e),transparent 70%)}
.ds-anim{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ds-anim canvas{width:100%;height:100%;display:block}
.ds-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:50px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.ds-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--wd-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--wd-accent) 30%,transparent)}
.ds-hero h1{font-family:'Rubik',sans-serif;font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.06;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:16px}
.ds-hero h1 span{color:var(--wd-accent)}
.ds-lead{font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,.78);max-width:660px;margin:0 auto}
.ds-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:24px 0 0}
.ds-panel{max-width:860px;margin:46px auto 0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 44px 90px -44px rgba(0,0,0,.75);overflow:hidden;text-align:left}
.ds-panel-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.1);font-size:.85rem;font-weight:700;color:rgba(255,255,255,.92)}
.ds-panel-bar .g{display:inline-flex;gap:6px;flex-shrink:0}
.ds-panel-bar .g i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.22)}
.ds-panel-bar .mid{flex:1;text-align:center;color:rgba(255,255,255,.7);font-weight:600;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.ds-panel-bar .tag{display:inline-flex;align-items:center;gap:7px;color:var(--wd-accent2);font-size:.78rem;flex-shrink:0}
.ds-panel-bar .tag i{width:8px;height:8px;border-radius:50%;background:var(--wd-accent2);box-shadow:0 0 0 4px color-mix(in srgb,var(--wd-accent2) 30%,transparent)}
.ds-rows{padding:6px 8px}
.ds-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.ds-row:last-child{border-bottom:none}
.ds-row .ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--wd-accent2);background:color-mix(in srgb,var(--wd-accent) 26%,transparent);flex-shrink:0}
.ds-row .lbl{flex:1;font-size:.92rem;color:rgba(255,255,255,.82)}
.ds-row .val{font-family:'Rubik',sans-serif;font-weight:700;font-size:.92rem;color:#fff}
.ds-row .val.ok{color:var(--wd-accent2)}
.ds-loadwrap{padding:14px 16px 18px;border-top:1px solid rgba(255,255,255,.08)}
.ds-load-top{display:flex;justify-content:space-between;align-items:center;font-size:.84rem;color:rgba(255,255,255,.74);margin-bottom:9px}
.ds-load-top b{font-family:'Rubik',sans-serif;color:#fff}
.ds-bar{background:rgba(255,255,255,.08);border-radius:50px;height:8px;overflow:hidden}
.ds-bar i{display:block;height:100%;border-radius:50px;background:linear-gradient(90deg,var(--wd-accent),var(--wd-accent2))}
@media(max-width:600px){.ds-panel-bar .mid{display:none}}
/* Webhosting-Hero-Panel beleben (scoped via .wh-live; Cyber/Datenrettung-Panel unberuehrt) */
.wh-live .ds-bar i{animation:whBarFill 1.9s cubic-bezier(.22,1,.36,1)}
@keyframes whBarFill{from{width:0}}
.wh-live .ds-row{animation:whRowIn .55s ease-out backwards}
.wh-live .ds-row:nth-child(1){animation-delay:.08s}.wh-live .ds-row:nth-child(2){animation-delay:.18s}.wh-live .ds-row:nth-child(3){animation-delay:.28s}.wh-live .ds-row:nth-child(4){animation-delay:.38s}.wh-live .ds-row:nth-child(5){animation-delay:.48s}
@keyframes whRowIn{from{opacity:0;transform:translateY(8px)}}
.wh-live .ds-row .ico{animation:whIcoPop .5s cubic-bezier(.22,1,.36,1) backwards}
.wh-live .ds-row:nth-child(1) .ico{animation-delay:.16s}.wh-live .ds-row:nth-child(2) .ico{animation-delay:.26s}.wh-live .ds-row:nth-child(3) .ico{animation-delay:.36s}.wh-live .ds-row:nth-child(4) .ico{animation-delay:.46s}.wh-live .ds-row:nth-child(5) .ico{animation-delay:.56s}
@keyframes whIcoPop{from{transform:scale(.55);opacity:0}}
.wh-live .ds-panel-bar .tag i{animation:whOnline 1.9s ease-in-out infinite}
@keyframes whOnline{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--wd-accent2) 45%,transparent)}55%{box-shadow:0 0 0 6px color-mix(in srgb,var(--wd-accent2) 0%,transparent)}}
@media(prefers-reduced-motion:reduce){.wh-live .ds-bar i,.wh-live .ds-row,.wh-live .ds-row .ico,.wh-live .ds-panel-bar .tag i{animation:none}}


/* ===== HERO EDITORIAL (ed-): helle, zahl-geführte Editorial-Bühne (Archetyp D) =====
   Wiederverwendbar (SEO, Online-Marketing, KI, Software, DATEV …). Kennzahl als Anker. */
.ed-hero{position:relative;overflow:hidden;background:color-mix(in srgb,var(--wd-accent) 4%,#FAFAF7);border-bottom:1px solid var(--bg-line);padding:72px 0 78px}
.ed-inner{display:grid;grid-template-columns:1fr;gap:40px;align-items:end}
.ed-inner>*{min-width:0}
@media(min-width:992px){.ed-inner{grid-template-columns:1.45fr .55fr;gap:56px}}
.ed-eyebrow{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wd-accent);margin-bottom:18px}
.ed-text h1{font-family:'Rubik',sans-serif;font-size:clamp(2.6rem,6.2vw,5rem);line-height:.99;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-bottom:22px;overflow-wrap:break-word}
.ed-text h1 em{font-style:normal;color:var(--wd-accent)}
.ed-text h1 u{text-decoration:none;background:linear-gradient(transparent 60%,color-mix(in srgb,var(--wd-accent) 30%,transparent) 0);padding:0 .04em}
.ed-text p{font-size:1.1rem;line-height:1.62;color:var(--ink-2);max-width:540px}
.ed-actions{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0 0}
.ed-text .wd-btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--bg-line)}
.ed-text .wd-btn-ghost:hover{background:var(--bg-soft)}
.ed-num{border-left:1px solid color-mix(in srgb,var(--wd-accent) 40%,transparent);padding-left:24px}
.ed-num .big{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(3.6rem,7vw,6rem);line-height:.85;letter-spacing:-.04em;color:var(--wd-accent)}
.ed-num .big sub{font-size:.32em;font-weight:700;vertical-align:baseline;-webkit-text-fill-color:var(--wd-accent);margin-left:.1em}
.ed-num .lbl{font-size:.92rem;color:var(--ink-mute);margin-top:12px;max-width:250px}
.ed-num .mini{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.ed-num .mini div{border-top:1px solid var(--bg-line);padding-top:10px}
.ed-num .mini b{font-family:'Rubik',sans-serif;font-size:1.15rem;color:var(--ink);display:block}
.ed-num .mini span{font-size:.8rem;color:var(--ink-mute)}
@media(max-width:600px){.ed-text h1{font-size:clamp(2rem,8.5vw,2.7rem);line-height:1.05}}


/* ===== REPARATUR-KONFIGURATOR (rc-) ===== */
.rc{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.rc-head{padding:20px 26px;border-bottom:1px solid var(--bg-line);background:linear-gradient(180deg,#fff,var(--bg-soft))}
.rc-steps{display:flex;align-items:center;gap:6px;list-style:none;flex-wrap:wrap;margin:0;padding:0}
.rc-steps li{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--ink-mute)}
.rc-steps li .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg-elev);color:var(--ink-mute);font-size:.76rem;transition:.2s}
.rc-steps li.active{color:var(--ink)}
.rc-steps li.active .n{background:var(--wd-accent);color:#fff}
.rc-steps li.done .n{background:color-mix(in srgb,var(--wd-accent) 22%,#fff);color:var(--wd-accent)}
.rc-steps .sep{width:16px;height:2px;background:var(--bg-line);flex:0 0 auto}
.rc-body{padding:26px}
.rc-q{font-family:'Rubik',sans-serif;font-weight:700;font-size:1.18rem;margin:0 0 4px;color:var(--ink)}
.rc-hint{color:var(--ink-mute);font-size:.9rem;margin:0 0 18px}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.rc-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px 14px;border:1.5px solid var(--bg-line);border-radius:var(--radius-lg);background:#fff;cursor:pointer;transition:.15s;font-weight:700;color:var(--ink);font-size:.98rem}
.rc-card:hover{border-color:var(--wd-accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.rc-card.sel{border-color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 7%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--wd-accent) 18%,transparent)}
.rc-card .rc-ico{width:42px;height:42px;color:var(--wd-accent)}
.rc-card small{font-weight:500;color:var(--ink-mute);font-size:.76rem}
.rc-search{width:100%;padding:13px 16px;border:1.5px solid var(--bg-line);border-radius:var(--radius-lg);font-size:1rem;margin-bottom:14px;font-family:inherit;color:var(--ink)}
.rc-search:focus{outline:none;border-color:var(--wd-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wd-accent) 16%,transparent)}
.rc-list{max-height:344px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:2px}
.rc-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--bg-line);border-radius:10px;cursor:pointer;transition:.12s;font-weight:600;color:var(--ink)}
.rc-item:hover{border-color:var(--wd-accent);background:var(--bg-soft)}
.rc-item .rc-av{font-size:.74rem;font-weight:600;color:var(--ink-mute);white-space:nowrap}
.rc-empty{color:var(--ink-mute);text-align:center;padding:30px 10px}
.rc-defects{display:flex;flex-direction:column;gap:10px}
.rc-defect{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--bg-line);border-radius:var(--radius-lg);cursor:pointer;transition:.15s;background:#fff}
.rc-defect:hover{border-color:var(--wd-accent)}
.rc-defect.sel{border-color:var(--wd-accent);background:color-mix(in srgb,var(--wd-accent) 6%,#fff)}
.rc-check{width:24px;height:24px;border-radius:7px;border:2px solid var(--bg-line);display:grid;place-items:center;flex-shrink:0;color:#fff}
.rc-check svg{opacity:0;transition:.12s}
.rc-defect.sel .rc-check{background:var(--wd-accent);border-color:var(--wd-accent)}
.rc-defect.sel .rc-check svg{opacity:1}
.rc-dico{width:28px;height:28px;color:var(--wd-accent);flex-shrink:0}
.rc-dname{flex:1;font-weight:700;color:var(--ink)}
.rc-dname small{display:block;font-weight:500;color:var(--ink-mute);font-size:.76rem}
.rc-dprice{font-family:'Rubik',sans-serif;font-weight:800;color:var(--ink);text-align:right;white-space:nowrap}
.rc-dprice s{display:block;font-weight:500;color:var(--ink-mute);font-size:.78rem}
.rc-defect.anfrage .rc-dprice{font-size:.84rem;color:var(--ink-mute);font-weight:600}
.rc-summary{background:var(--bg-soft);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:18px}
.rc-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--bg-line);font-size:.95rem}
.rc-line:last-of-type{border-bottom:none}
.rc-line s{color:var(--ink-mute)}
.rc-total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:2px solid var(--bg-line)}
.rc-total .lbl{font-weight:700;color:var(--ink)}
.rc-total .amt{text-align:right}
.rc-total .amt .old{display:block;text-decoration:line-through;color:var(--ink-mute);font-size:.98rem}
.rc-total .amt .new{font-family:'Rubik',sans-serif;font-weight:800;font-size:2.1rem;line-height:1;color:var(--wd-accent)}
.rc-save{display:inline-block;margin-top:10px;background:color-mix(in srgb,var(--success) 14%,#fff);color:var(--success);font-weight:700;font-size:.82rem;padding:5px 12px;border-radius:50px}
.rc-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.rc-back{background:none;border:none;color:var(--ink-mute);font-weight:700;cursor:pointer;padding:12px 4px;font-size:.92rem}
.rc-back:hover{color:var(--ink)}
.rc-back:disabled{opacity:0;pointer-events:none}
.rc-note{font-size:.82rem;color:var(--ink-mute);margin-top:12px}
.rc-anfrage-box{background:color-mix(in srgb,var(--wd-accent) 7%,#fff);border:1px dashed color-mix(in srgb,var(--wd-accent) 40%,transparent);border-radius:var(--radius-lg);padding:16px 18px;color:var(--ink-2);font-size:.92rem;margin-bottom:18px}
.rc-done{text-align:center;padding:24px 10px}
.rc-done .rc-done-ico{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--success) 14%,#fff);color:var(--success)}
.rc-done h3{font-family:'Rubik',sans-serif;font-size:1.4rem;margin-bottom:8px;color:var(--ink)}
.rc-done p{color:var(--ink-mute);max-width:460px;margin:0 auto}
@media(max-width:560px){.rc-body{padding:18px}.rc-steps li .lbl{display:none}.rc-steps .sep{width:8px}}


/* ===== KI-AUTOMATISIERUNGS-FLOW (ki-flow, n8n-Stil) ===== */
.ki-flow-sec{padding:74px 0;background:radial-gradient(circle,rgba(255,255,255,.07) 1.5px,transparent 1.6px) 0 0/26px 26px,linear-gradient(180deg,#0b1020 0%,#141033 100%);color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.ki-flow-sec .wd-head h2{color:#fff}
.ki-flow-sec .wd-head .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.ki-flow-sec .wd-head p{color:rgba(255,255,255,.72)}
.ki-flow{max-width:1180px;margin:30px auto 0}
.ki-flow svg{width:100%;height:auto;display:block;overflow:visible}
.ki-grid{fill:rgba(255,255,255,.07)}
.ki-edge-base{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.4}
.ki-edge{fill:none;stroke:url(#kiEdgeGrad);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:10 8;animation:kiFlow 1.1s linear infinite;animation-delay:var(--k,0s);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--wd-accent) 60%,transparent))}
@keyframes kiFlow{to{stroke-dashoffset:-36}}
.ki-node{transform-box:fill-box;transform-origin:center;animation:kiFloat 5.5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ki-node-card{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.18);stroke-width:1.4}
.ki-chip{fill:#fff}
.ki-logo{pointer-events:none}
.ki-badge{fill:var(--wd-accent)}
.ki-badge-2{fill:var(--wd-accent2)}
.ki-ico{stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ki-label{fill:#fff;font-family:'Rubik',sans-serif;font-weight:700;font-size:16px}
.ki-sub{fill:rgba(255,255,255,.6);font-family:'Quicksand',sans-serif;font-size:12px}
.ki-ring{fill:none;stroke:var(--wd-accent2);stroke-width:2;stroke-dasharray:44 120;transform-box:fill-box;transform-origin:center;animation:kiSpin 3.2s linear infinite}
@keyframes kiSpin{to{transform:rotate(360deg)}}
.ki-pulse{fill:var(--wd-accent);opacity:.45;transform-box:fill-box;transform-origin:center;animation:kiPulse 2.6s ease-out infinite}
@keyframes kiPulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
@media(max-width:600px){.ki-label{font-size:17px}.ki-sub{font-size:13px}}
@media(prefers-reduced-motion:reduce){.ki-edge,.ki-node,.ki-ring,.ki-pulse{animation:none}.ki-edge{stroke-dasharray:none;stroke:color-mix(in srgb,var(--wd-accent) 60%,#fff)}}

/* ===== SEO-Seite: Partner-Badges + Technologie-Logos ===== */
.seo-badges{padding:60px 0;background:var(--bg-soft);border-top:1px solid var(--bg-line);border-bottom:1px solid var(--bg-line)}
.seo-badges-head{text-align:center;max-width:720px;margin:0 auto 30px}
.seo-badges-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:12px}
.seo-badges-head > p{color:var(--ink-mute);line-height:1.6}
.seo-badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:880px){.seo-badge-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.seo-badge-grid{grid-template-columns:1fr}}
.seo-badge{display:flex;align-items:center;justify-content:center;min-height:104px;gap:14px;padding:22px 24px;background:#fff;border:1px solid var(--bg-line);border-radius:14px;box-shadow:0 14px 32px -22px rgba(15,26,46,.4);transition:transform .2s,box-shadow .2s}
.seo-badge:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(15,26,46,.32)}
.seo-badge img{max-height:62px;max-width:100%;width:auto;height:auto;object-fit:contain}
.seo-badge b{display:block;font-family:'Rubik',sans-serif;font-weight:700;font-size:.96rem;color:var(--ink);line-height:1.2}
.seo-badge small{display:block;font-size:.78rem;color:var(--ink-mute);margin-top:3px}
.seo-tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;max-width:1040px;margin:6px auto 0}
.seo-tech-logo{display:flex;align-items:center;justify-content:center;height:88px;padding:16px;background:#fff;border:1px solid var(--bg-line);border-radius:12px;transition:transform .2s,box-shadow .2s}
.seo-tech-logo:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(15,26,46,.3)}
.seo-tech-logo img{max-height:40px;max-width:120px;width:auto;height:auto;object-fit:contain}
@media(max-width:520px){.seo-tech-grid{grid-template-columns:repeat(2,1fr)}.seo-tech-logo{height:78px}}

/* ===== Website-Sicherheit: WP AgentX (Eigenentwicklung, dunkle Command-Center-Sektion) ===== */
.wpx{position:relative;overflow:hidden;background:linear-gradient(170deg,#0a1426 0%,#0e1b33 55%,#0a1426 100%);color:rgba(255,255,255,.82);padding:88px 0}
.wpx::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 6%,rgba(61,90,128,.4),transparent 45%),radial-gradient(circle at 6% 92%,rgba(31,135,68,.22),transparent 48%)}
.wpx .container{position:relative;z-index:2}
.wpx-head{text-align:center;max-width:780px;margin:0 auto 40px}
.wpx-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7DD3FC;background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.22);padding:6px 14px;border-radius:50px;margin-bottom:20px}
.wpx-logo{display:block;height:88px;width:auto;max-width:100%;margin:0 auto 22px}
@media(max-width:600px){.wpx-logo{height:62px}}
.wpx-head h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:14px}
.wpx-head > p{color:rgba(255,255,255,.74);line-height:1.7}
.wpx-head strong{color:#fff}
.wpx-benefits{list-style:none;margin:0 auto 40px;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:780px){.wpx-benefits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.wpx-benefits{grid-template-columns:1fr}}
.wpx-benefits li{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px}
.wpx-benefits .i{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#7DD3FC;background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.2)}
.wpx-benefits .i svg{width:19px;height:19px}
.wpx-benefits b{display:block;color:#fff;font-size:.94rem;line-height:1.2}
.wpx-benefits div span{display:block;font-size:.82rem;color:rgba(255,255,255,.62);line-height:1.45;margin-top:3px}
.wpx-showcase{display:grid;grid-template-columns:1.3fr .9fr;gap:32px;align-items:start;margin-bottom:8px}
@media(max-width:920px){.wpx-showcase{grid-template-columns:1fr}}
.wpx-dash{background:rgba(8,16,30,.7);border:1px solid rgba(125,211,252,.16);border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.wpx-dash-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.wpx-dots{display:flex;gap:6px}.wpx-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.wpx-dash-title{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.72);font-weight:600}
.wpx-dash-title img{height:16px;width:auto;opacity:.92}
.wpx-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:#34D399}
.wpx-live i{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 10px #34D399;animation:cwvPulse 2s ease-in-out infinite}
.wpx-dash-body{padding:18px}
.wpx-dash-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.wpx-dash-nav span{font-size:.76rem;padding:6px 12px;border-radius:7px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.04)}
.wpx-dash-nav span.on{color:#fff;background:rgba(125,211,252,.18);font-weight:600}
.wpx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:560px){.wpx-kpis{grid-template-columns:repeat(2,1fr)}}
.wpx-kpi{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px}
.wpx-kpi .k{display:block;font-size:.66rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.wpx-kpi .v{font-family:'Rubik',sans-serif;font-weight:800;font-size:1.4rem;color:#fff;line-height:1}
.wpx-kpi .v i{font-style:normal;color:#7DD3FC;font-size:.85rem;vertical-align:super}
.wpx-kpi .v.ok{color:#34D399}.wpx-kpi .v.warn{color:#FBBF24}
.wpx-statusline{display:flex;align-items:center;gap:8px;font-size:.8rem;color:rgba(255,255,255,.72);padding:10px 12px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.2);border-radius:9px;margin-bottom:14px}
.wpx-ok-dot{width:9px;height:9px;border-radius:50%;background:#34D399;box-shadow:0 0 8px #34D399;flex-shrink:0}
.wpx-feed-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.45);margin-bottom:8px}
.wpx-feed ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.wpx-feed li{display:flex;align-items:center;gap:10px;font-size:.8rem;color:rgba(255,255,255,.72);line-height:1.35}
.wpx-feed .t{flex-shrink:0;min-width:64px;text-align:center;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 7px;border-radius:5px}
.wpx-feed .t.blk{color:#FCA5A5;background:rgba(220,47,47,.16)}
.wpx-feed .t.ok{color:#6EE7B7;background:rgba(52,211,153,.14)}
.wpx-feed .t.upd{color:#93C5FD;background:rgba(59,130,246,.16)}
.wpx-feed .t.warn{color:#FCD34D;background:rgba(251,191,36,.14)}
.wpx-side-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:14px}
.wpx-side-list li{display:flex;gap:13px;align-items:flex-start}
.wpx-side-list .i{flex-shrink:0;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#7DD3FC;background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.2)}
.wpx-side-list .i svg{width:20px;height:20px}
.wpx-side-list b{display:block;color:#fff;font-size:.96rem;line-height:1.25}
.wpx-side-list div span{display:block;font-size:.84rem;color:rgba(255,255,255,.62);line-height:1.5;margin-top:3px}
.wpx-side .wd-btn{width:100%;justify-content:center}
.wpx-note{font-size:.74rem;color:rgba(255,255,255,.4);margin-top:12px;text-align:center}
.wpx-block{margin-top:46px}
.wpx-subhead{text-align:center;color:#fff;font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:26px}
.wpx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.wpx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wpx-grid{grid-template-columns:1fr}}
.wpx-feat{position:relative;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:20px;transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s,background .28s,box-shadow .28s}
.wpx-feat:hover{transform:translateY(-6px);border-color:rgba(125,211,252,.5);background:rgba(125,211,252,.08);box-shadow:0 20px 44px -22px rgba(56,189,248,.6)}
.wpx-feat-ico{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;color:#7DD3FC;background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.2);margin-bottom:14px;transition:background .28s,border-color .28s,box-shadow .28s}
.wpx-feat:hover .wpx-feat-ico{background:rgba(125,211,252,.2);border-color:rgba(125,211,252,.55);box-shadow:0 0 0 4px rgba(125,211,252,.12)}
.wpx-feat-ico svg{width:22px;height:22px;transform-origin:center;will-change:transform}
/* Jedes Toolset-Icon hat seine eigene, dezente Dauer-Animation (nur transform/opacity). */
@keyframes wpxF1{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wpxF2{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
@keyframes wpxF3{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@keyframes wpxF4{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-7deg) translateY(-2px)}}
@keyframes wpxF5{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes wpxF6{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.93)}}
@keyframes wpxF7{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(5deg)}}
@keyframes wpxSpin{to{transform:rotate(360deg)}}
@keyframes wpxHover{0%,100%{transform:scale(1.06) rotate(0)}50%{transform:scale(1.2) rotate(7deg)}}
.wpx-grid .wpx-feat:nth-child(1) .wpx-feat-ico svg{animation:wpxF1 3.2s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(2) .wpx-feat-ico svg{animation:wpxF3 2.6s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(3) .wpx-feat-ico svg{animation:wpxF2 4.1s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(4) .wpx-feat-ico svg{animation:wpxF6 3.4s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(5) .wpx-feat-ico svg{animation:wpxSpin 7s linear infinite}
.wpx-grid .wpx-feat:nth-child(6) .wpx-feat-ico svg{animation:wpxF7 3s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(7) .wpx-feat-ico svg{animation:wpxSpin 6s linear infinite reverse}
.wpx-grid .wpx-feat:nth-child(8) .wpx-feat-ico svg{animation:wpxF1 3.7s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(9) .wpx-feat-ico svg{animation:wpxF3 2.9s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(10) .wpx-feat-ico svg{animation:wpxF2 3.8s ease-in-out infinite reverse}
.wpx-grid .wpx-feat:nth-child(11) .wpx-feat-ico svg{animation:wpxF5 3.3s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(12) .wpx-feat-ico svg{animation:wpxF4 3.5s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(13) .wpx-feat-ico svg{animation:wpxF3 3.1s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(14) .wpx-feat-ico svg{animation:wpxSpin 6.5s linear infinite}
.wpx-grid .wpx-feat:nth-child(15) .wpx-feat-ico svg{animation:wpxF1 3.4s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(16) .wpx-feat-ico svg{animation:wpxF7 2.8s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(17) .wpx-feat-ico svg{animation:wpxF6 3.6s ease-in-out infinite}
.wpx-grid .wpx-feat:nth-child(18) .wpx-feat-ico svg{animation:wpxF2 4s ease-in-out infinite reverse}
.wpx-grid .wpx-feat:hover .wpx-feat-ico svg{animation:wpxHover .85s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.wpx-grid .wpx-feat .wpx-feat-ico svg{animation:none!important}}
.wpx-feat h4{color:#fff;font-size:1.02rem;margin:0 0 7px}
.wpx-feat p{color:rgba(255,255,255,.66);font-size:.88rem;line-height:1.55;margin:0}
.wpx-arch{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.wpx-arch{grid-template-columns:1fr}}
.wpx-arch-card{display:flex;gap:15px;align-items:flex-start;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:20px}
.wpx-arch-ico{flex-shrink:0;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;color:#34D399;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.22)}
.wpx-arch-ico svg{width:22px;height:22px}
.wpx-arch-card h4{color:#fff;font-size:1.02rem;margin:0 0 6px}
.wpx-arch-card p{color:rgba(255,255,255,.66);font-size:.88rem;line-height:1.55;margin:0}
.wpx-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:44px}
.wpx-badges span{font-family:'Rubik',sans-serif;font-weight:600;font-size:.8rem;color:rgba(255,255,255,.8);padding:8px 16px;border-radius:50px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}

/* ===== Webhosting & Domains: Domain-Check (DoH/DNS, client-seitig) ===== */
.nkdc-box{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-xl);padding:clamp(22px,4vw,34px);box-shadow:0 30px 70px -40px rgba(15,26,46,.4);position:relative}
.nkdc-form{display:flex;gap:12px;align-items:stretch}
@media(max-width:620px){.nkdc-form{flex-direction:column}}
.nkdc-field{position:relative;flex:1;display:flex;align-items:center}
.nkdc-field-ico{position:absolute;left:16px;color:var(--ink-mute);pointer-events:none}
.nkdc-field input{width:100%;padding:16px 18px 16px 46px;font-family:'Quicksand',sans-serif;font-size:1.02rem;font-weight:600;color:var(--ink);background:var(--bg-soft);border:2px solid var(--bg-line);border-radius:12px;transition:border-color .2s,background .2s,box-shadow .2s}
.nkdc-field input::placeholder{color:var(--ink-mute);font-weight:500}
.nkdc-field input:focus{outline:none;border-color:var(--wd-accent);background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--wd-accent) 14%,transparent)}
.nkdc-submit{flex-shrink:0;justify-content:center;white-space:nowrap}
.nkdc-submit[disabled]{opacity:.6;cursor:wait;transform:none}
.nkdc-hint{margin-top:14px;font-size:.84rem;color:var(--ink-mute);text-align:center}
.nkdc-error{margin:0;font-size:.92rem;font-weight:600;color:#DC2F2F;text-align:center}
.nkdc-results{margin-top:24px;display:grid;gap:10px}
.nkdc-result{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--bg-line);border-radius:12px;background:var(--bg-soft);animation:nkdcIn .35s cubic-bezier(.22,.61,.36,1) backwards}
.nkdc-result .nkdc-dom{font-family:'Rubik',sans-serif;font-weight:600;font-size:1rem;color:var(--ink);word-break:break-all}
.nkdc-result .nkdc-stat{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:700;flex-shrink:0}
.nkdc-result .nkdc-stat svg{width:17px;height:17px}
.nkdc-result.is-loading{opacity:.72}
.nkdc-result.is-loading .nkdc-stat{color:var(--ink-mute)}
.nkdc-spin{width:15px;height:15px;border:2px solid color-mix(in srgb,var(--ink-mute) 40%,transparent);border-top-color:var(--wd-accent);border-radius:50%;animation:nkdcSpin .7s linear infinite}
.nkdc-result.is-free{border-color:color-mix(in srgb,#1F8744 45%,var(--bg-line));background:color-mix(in srgb,#1F8744 7%,#fff)}
.nkdc-result.is-free .nkdc-stat{color:#1F8744}
.nkdc-result.is-taken .nkdc-stat{color:var(--ink-mute)}
.nkdc-result.is-taken .nkdc-dom{color:var(--ink-mute);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-mute) 50%,transparent)}
.nkdc-result.is-error .nkdc-stat{color:#B45309}
.nkdc-grab{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:.84rem;color:#fff;background:linear-gradient(100deg,var(--wd-accent),var(--wd-accent2));border:none;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.nkdc-grab:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px color-mix(in srgb,var(--wd-accent) 70%,transparent)}
.nkdc-note{margin-top:20px;display:flex;gap:9px;align-items:flex-start;justify-content:center;max-width:640px;margin-left:auto;margin-right:auto;font-size:.78rem;line-height:1.5;color:var(--ink-mute);text-align:left}
.nkdc-note svg{flex-shrink:0;margin-top:1px;color:var(--ink-mute)}
@media(max-width:480px){.nkdc-result{flex-wrap:wrap}.nkdc-result .nkdc-stat{margin-left:0}.nkdc-grab{margin-left:auto}}
@keyframes nkdcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nkdcSpin{to{transform:rotate(360deg)}}

/* ===== Softwareentwicklung: vertikaler Prozess-Pfad mit animierter Punktlinie (von oben nach unten) ===== */
.sw-path{position:relative;max-width:760px;margin:0 auto}
.sw-path-step:not(:last-child)::after{content:"";position:absolute;left:21px;top:23px;width:4px;height:calc(100% + 22px);background-image:radial-gradient(circle,color-mix(in srgb,var(--wd-accent) 85%,transparent) 1.6px,transparent 2.3px);background-size:4px 14px;background-repeat:repeat-y;animation:swPathFlow 1.6s linear infinite;z-index:0}
@keyframes swPathFlow{from{background-position:0 0}to{background-position:0 14px}}
.sw-path-step{position:relative;display:grid;grid-template-columns:46px 1fr;gap:22px;align-items:start}
.sw-path-step+.sw-path-step{margin-top:22px}
.sw-path-node{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.15rem;color:#fff;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2));box-shadow:0 10px 24px -8px color-mix(in srgb,var(--wd-accent) 70%,transparent)}
.sw-path-node::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid color-mix(in srgb,var(--wd-accent) 55%,transparent);animation:swPathPulse 2.6s ease-out infinite}
@keyframes swPathPulse{0%{transform:scale(.78);opacity:.75}100%{transform:scale(1.7);opacity:0}}
.sw-path-card{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:20px 24px;box-shadow:0 18px 40px -28px rgba(15,26,46,.4);transition:transform .25s,box-shadow .25s,border-color .25s}
.sw-path-card:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--wd-accent) 40%,var(--bg-line));box-shadow:0 22px 48px -26px color-mix(in srgb,var(--wd-accent) 45%,rgba(15,26,46,.45))}
.sw-path-card h3{font-size:1.12rem;margin:0 0 7px}
.sw-path-card p{margin:0;color:var(--ink-mute);line-height:1.6;font-size:.95rem}
@media(max-width:520px){.sw-path-step{grid-template-columns:40px 1fr;gap:16px}.sw-path-step:not(:last-child)::after{left:18px;top:20px}.sw-path-node{width:40px;height:40px;font-size:1.02rem}.sw-path-card{padding:16px 18px}}
@media(prefers-reduced-motion:reduce){.sw-path-step::after{animation:none}.sw-path-node::after{display:none}}

/* ===== Animierte Service-Icons (Linien-Stil), genutzt in .svc-icon u. a. ===== */
.ai-st{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ai-fc{fill:currentColor}
@keyframes aiType{0%,100%{transform:scaleX(.15)}50%{transform:scaleX(1)}}
@keyframes aiPan{0%,100%{transform:translateX(-7px)}50%{transform:translateX(9px)}}
@keyframes aiDraw{0%{stroke-dashoffset:var(--len,34)}28%,72%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--len,34)}}
@keyframes aiBeat{0%,100%{transform:scale(.8)}50%{transform:scale(1.2)}}
@keyframes aiBlink{0%,100%{opacity:.12}50%{opacity:1}}
@keyframes aiGrowY{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
@keyframes aiSpin{to{transform:rotate(360deg)}}
@keyframes aiSpinR{to{transform:rotate(-360deg)}}
@keyframes aiWave{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes aiPop{0%,100%{transform:scale(.58);opacity:.4}50%{transform:scale(1);opacity:1}}
@keyframes aiScanY{0%,100%{transform:translateY(-11px);opacity:.15}50%{transform:translateY(11px);opacity:1}}
@keyframes aiWrench{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes aiUp{0%,100%{transform:translateY(6px);opacity:.4}50%{transform:translateY(-6px);opacity:1}}
@keyframes aiSlideX{0%,100%{transform:translateX(-6px);opacity:.4}50%{transform:translateX(0);opacity:1}}
@keyframes aiFloat{0%,100%{transform:translateY(-4.5px)}50%{transform:translateY(4.5px)}}
@keyframes aiDashRun{to{stroke-dashoffset:-32}}
@keyframes aiFlicker{0%,100%{transform:scaleY(1);opacity:.8}50%{transform:scaleY(1.18);opacity:1}}
@keyframes aiLock{0%,100%{transform:translateY(0)}38%,62%{transform:translateY(-3.5px)}}
.ai-spin{transform-box:fill-box;transform-origin:center;animation:aiSpin 3.4s linear infinite}
.ai-spinr{transform-box:fill-box;transform-origin:center;animation:aiSpinR 3.4s linear infinite}
.ai-spin-fast{transform-box:fill-box;transform-origin:center;animation:aiSpin 1.1s linear infinite}
.ai-beat{transform-box:fill-box;transform-origin:center;animation:aiBeat 1.7s ease-in-out infinite}
.ai-blink{animation:aiBlink 1.8s ease-in-out infinite}
.ai-blink.d2{animation-delay:.45s}.ai-blink.d3{animation-delay:.9s}.ai-blink.d4{animation-delay:1.35s}
.ai-type{transform-box:fill-box;transform-origin:left center;animation:aiType 2.6s ease-in-out infinite}
.ai-type.d2{animation-delay:.5s}
.ai-pan{transform-box:fill-box;animation:aiPan 3.2s ease-in-out infinite}
.ai-draw{stroke-dasharray:var(--len,34);animation:aiDraw 3s ease-in-out infinite}
.ai-grow{transform-box:fill-box;transform-origin:bottom;animation:aiGrowY 2.4s ease-in-out infinite}
.ai-grow.d2{animation-delay:.25s}.ai-grow.d3{animation-delay:.5s}.ai-grow.d4{animation-delay:.75s}
.ai-wave{transform-box:fill-box;transform-origin:18px 28px;animation:aiWave 2.2s ease-out infinite}
.ai-wave.d2{animation-delay:.7s}.ai-wave.d3{animation-delay:1.4s}
.ai-pop{transform-box:fill-box;transform-origin:center;animation:aiPop 2.4s ease-in-out infinite}
.ai-pop.d2{animation-delay:.3s}.ai-pop.d3{animation-delay:.6s}.ai-pop.d4{animation-delay:.9s}
.ai-scan{transform-box:fill-box;animation:aiScanY 2.6s ease-in-out infinite}
.ai-wrench{transform-box:fill-box;transform-origin:40px 16px;animation:aiWrench 2.2s ease-in-out infinite}
.ai-up{transform-box:fill-box;animation:aiUp 2.6s ease-in-out infinite}
.ai-slide{transform-box:fill-box;animation:aiSlideX 2.6s ease-in-out infinite}
.ai-float{transform-box:fill-box;animation:aiFloat 2.4s ease-in-out infinite}
.ai-dashrun{stroke-dasharray:6 6;animation:aiDashRun 1s linear infinite}
.ai-flicker{transform-box:fill-box;transform-origin:bottom;animation:aiFlicker 1.3s ease-in-out infinite}
.ai-lock{transform-box:fill-box;transform-origin:center;animation:aiLock 3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.ai-spin,.ai-spinr,.ai-spin-fast,.ai-beat,.ai-blink,.ai-type,.ai-pan,.ai-draw,.ai-grow,.ai-wave,.ai-pop,.ai-scan,.ai-wrench,.ai-up,.ai-slide,.ai-float,.ai-dashrun,.ai-flicker,.ai-lock{animation:none}.ai-type{transform:scaleX(1)}.ai-draw{stroke-dashoffset:0}.ai-grow{transform:scaleY(1)}.ai-blink,.ai-up,.ai-pop{opacity:1}.ai-wave{opacity:0}.ai-dashrun{stroke-dasharray:none}}

/* ============================================================
   BRANCHEN-LANDINGPAGES (.lp-)
   Nutzt die bestehenden Theme-Komponenten (.ed-hero, .wd-*, .seo-kontakt);
   hier nur landingpage-spezifische Ergänzungen.
   ============================================================ */
.lp-usps{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.lp-usp{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--bg-line);border-radius:999px;padding:7px 14px}
.lp-usp svg{color:var(--wd-accent);flex:none}
.lp-local{position:relative;overflow:hidden;border-radius:22px;padding:clamp(26px,4vw,42px);background:linear-gradient(120deg,color-mix(in srgb,var(--wd-accent) 11%,#fff),color-mix(in srgb,var(--wd-accent2) 10%,#fff));border:1px solid color-mix(in srgb,var(--wd-accent) 22%,var(--bg-line))}
.lp-local .eyebrow{margin-bottom:10px}
.lp-local h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:12px}
.lp-local>p{color:var(--ink-2);max-width:640px;line-height:1.65;font-size:1.05rem}
.lp-places{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.lp-place{font-size:.84rem;font-weight:600;color:var(--wd-accent);background:#fff;border:1px solid color-mix(in srgb,var(--wd-accent) 25%,var(--bg-line));border-radius:8px;padding:6px 12px}

/* ============================================================
   SEO-LEISTUNGSSEITE (.wd-svc) – Überarbeitung S4
   Nutzt bestehende Komponenten; nur seitenspezifische Ergänzungen.
   ============================================================ */

/* 1. Hero-Schreibmaschine (rotierende Suchbegriffe) */
.seo-typeword{color:var(--wd-accent);font-weight:inherit;white-space:nowrap;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--wd-accent) 26%,transparent) 0);padding:0 .06em}
.seo-typeword::after{content:"";display:inline-block;width:3px;height:.84em;margin-left:.05em;background:var(--wd-accent2);vertical-align:-.06em;border-radius:1px;animation:seoCaret 1.05s steps(1) infinite}
@keyframes seoCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* 2. Count-up Trust-Zahlen: stabile Breite ohne Springen */
.seo-count{font-variant-numeric:tabular-nums}

/* 3. Partner-Badges & Tech-Logos: Hover in SEO-Farbe */
.seo-badge{transition:transform .25s,box-shadow .25s,border-color .25s}
.seo-badge:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--wd-accent) 45%,transparent);box-shadow:0 24px 48px -16px color-mix(in srgb,var(--wd-accent) 62%,transparent)}
.seo-tech-logo{transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}
.seo-tech-logo:hover{transform:translateY(-4px);background:color-mix(in srgb,var(--wd-accent) 9%,#fff);border-color:color-mix(in srgb,var(--wd-accent) 40%,transparent);box-shadow:0 20px 38px -18px color-mix(in srgb,var(--wd-accent) 55%,transparent)}

/* 4. SEO-Wissen & FAQ: Hover in SEO-Farbe statt neutral */
.seo-q:hover{background:color-mix(in srgb,var(--wd-accent) 7%,#fff);border-left-color:var(--wd-accent2);box-shadow:0 24px 48px -22px color-mix(in srgb,var(--wd-accent) 55%,rgba(15,30,54,.26))}
.wd-svc .wd-faq details{transition:border-color .25s,background .25s}
.wd-svc .wd-faq details:hover{border-color:color-mix(in srgb,var(--wd-accent) 40%,transparent);background:color-mix(in srgb,var(--wd-accent) 5%,#fff)}

/* 5. Alle Eyebrow-Icons der Seite animieren (dezent, im Pill) */
.wd-svc .eyebrow svg{transform-box:fill-box;transform-origin:center;animation:seoEb 2.8s ease-in-out infinite}
.wd-svc .wd-sec:nth-of-type(2n) .eyebrow svg{animation-delay:.7s}
.wd-svc .wd-split .eyebrow svg{animation-duration:3.3s}
@keyframes seoEb{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.22) rotate(-6deg)}72%{transform:scale(1.22) rotate(6deg)}}

/* 6. Bild-Overlay-Karten („Bullets ins Bild") */
.wd-split-media{position:relative}
.seo-imgcard{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--wd-accent) 22%,var(--bg-line));border-radius:13px;padding:11px 15px;box-shadow:0 20px 44px -18px color-mix(in srgb,var(--wd-accent) 48%,rgba(15,30,54,.5));font-family:'Rubik',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.15;max-width:62%;opacity:0;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.seo-imgcard .ico{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 14%,#fff);color:var(--wd-accent)}
.seo-imgcard small{display:block;font-family:'Quicksand',sans-serif;font-weight:600;font-size:.74rem;color:var(--ink-mute);margin-top:2px}
.seo-imgcard.c1{top:16px;left:-12px;transform:translateX(-26px)}
.seo-imgcard.c2{top:50%;right:-12px;transform:translate(26px,-50%)}
.seo-imgcard.c3{bottom:18px;left:20px;transform:translateY(26px)}
.wd-split-media.visible .seo-imgcard.c1,.wd-split-media.visible .seo-imgcard.c3{opacity:1;transform:translate(0,0)}
.wd-split-media.visible .seo-imgcard.c2{opacity:1;transform:translate(0,-50%)}
.wd-split-media.visible .seo-imgcard.c1{transition-delay:.15s}
.wd-split-media.visible .seo-imgcard.c2{transition-delay:.32s}
.wd-split-media.visible .seo-imgcard.c3{transition-delay:.49s}
@media(max-width:560px){.seo-imgcard{font-size:.8rem;max-width:82%}.seo-imgcard.c1{left:0}.seo-imgcard.c2{right:0}}

/* 7. Vorher/Nachher: Podest mit Pokal im Nachher-Card */
.seo-podium{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:18px auto 2px;height:62px;width:118px}
.seo-podium .pod{width:32px;border-radius:5px 5px 0 0;display:grid;align-content:start;justify-items:center;padding-top:5px;font-family:'Rubik',sans-serif;font-weight:800;font-size:.82rem;color:#0b1226}
.seo-podium .pod.p1{height:50px;background:linear-gradient(180deg,#ffe9a8,#f5c451);box-shadow:0 -6px 18px -6px rgba(245,196,81,.7);animation:seoPod 2.6s ease-in-out infinite}
.seo-podium .pod.p2{height:34px;background:rgba(255,255,255,.55)}
.seo-podium .pod.p3{height:26px;background:rgba(255,255,255,.4)}
.seo-podium .cup{position:absolute;top:-3px;left:50%;transform:translateX(-50%);color:#f5c451;filter:drop-shadow(0 3px 8px rgba(245,196,81,.6));animation:seoBeat 1.7s ease-in-out infinite}
@keyframes seoPod{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes seoBeat{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.16)}}

/* 8. Ablauf: gepunktete Lauflinie zwischen den Schritten 1–5 (fließt permanent links→rechts) */
.wd-process.has-line{position:relative}
@media(min-width:680px){
  .wd-process.has-line::before{content:"";position:absolute;top:27px;left:7%;right:7%;height:6px;z-index:0;background:radial-gradient(circle closest-side,color-mix(in srgb,var(--wd-accent) 80%,transparent) 96%,transparent) 0 0/15px 6px repeat-x;animation:seoDotsRun 1s linear infinite}
  .wd-process.has-line .wd-step{position:relative;z-index:2}
}
@keyframes seoDotsRun{to{background-position:15px 0}}

/* 9. Content-Band: Lesbarkeit der Überschrift verbessern */
.seo-band::after{background:linear-gradient(115deg,color-mix(in srgb,var(--wd-accent) 32%,rgba(11,18,38,.8)) 0%,rgba(11,18,38,.36) 55%,rgba(11,18,38,.88) 100%)}
.seo-band-text{background:linear-gradient(120deg,rgba(11,18,38,.44),rgba(11,18,38,.1));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:16px;padding:26px 30px}
.seo-band-text h3{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.seo-band-text .eyebrow{background:color-mix(in srgb,var(--wd-accent) 60%,rgba(11,18,38,.3));border-color:color-mix(in srgb,var(--wd-accent2) 60%,transparent);color:#fff}

/* reduced-motion: neue Bewegungen ruhigstellen, Inhalte sichtbar */
@media(prefers-reduced-motion:reduce){
  .seo-typeword::after,.wd-svc .eyebrow svg,.seo-podium .pod.p1,.seo-podium .cup,.wd-process.has-line::before{animation:none}
  .seo-imgcard{opacity:1;transform:translate(0,0)}
  .seo-imgcard.c2{transform:translate(0,-50%)}
}

/* 10. Leistungs-Karten-Hover (Kartenfarbe statt grau) ist jetzt global in .wd-card:hover (S5) */

/* 11. SEO-Check – Vermarktung des eigenen Plugins (mittlere Seitenhöhe) */
.seo-check-wrap{position:relative;overflow:hidden;border-radius:26px;padding:clamp(28px,4vw,54px);background:linear-gradient(155deg,#0b1226 0%,#10233a 52%,#0b2b2a 100%);color:#fff;box-shadow:0 50px 100px -45px color-mix(in srgb,var(--wd-accent) 55%,rgba(0,0,0,.6))}
.seo-check-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--wd-accent) 24%,transparent),transparent 45%),radial-gradient(circle at 90% 100%,color-mix(in srgb,var(--wd-accent2) 22%,transparent),transparent 45%);pointer-events:none}
.seo-check-wrap>*{position:relative;z-index:1}
.seo-check-head{max-width:780px}
.seo-check-head .eyebrow{background:color-mix(in srgb,var(--wd-accent) 30%,rgba(255,255,255,.06));border-color:color-mix(in srgb,var(--wd-accent2) 50%,transparent);color:#fff}
.seo-check-head h2{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.12;margin:14px 0;color:#fff}
.seo-check-head h2 span{color:var(--wd-accent)}
.seo-check-head p{color:rgba(255,255,255,.84);line-height:1.7;font-size:1.05rem}
.seo-check-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.seo-check-badge{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 14px}
.seo-check-badge svg{color:var(--wd-accent2);flex:none}
.seo-check-pillars{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px}
@media(min-width:820px){.seo-check-pillars{grid-template-columns:repeat(3,1fr)}}
.seo-check-pillar{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px;transition:transform .3s,border-color .3s,background .3s}
.seo-check-pillar:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--pc) 55%,transparent);background:rgba(255,255,255,.08)}
.seo-check-pillar .pc-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.seo-check-pillar .pc-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--pc) 22%,transparent);color:var(--pc);flex:none}
.seo-check-pillar h3{font-size:1.1rem;color:#fff;margin:0;line-height:1.2}
.seo-check-pillar .pc-weight{display:block;font-size:.74rem;font-weight:700;color:var(--pc);letter-spacing:.02em;margin-top:2px}
.seo-check-pillar ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.seo-check-pillar li{position:relative;padding-left:20px;font-size:.88rem;color:rgba(255,255,255,.82);line-height:1.45}
.seo-check-pillar li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--pc)}
.seo-check-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:32px}
.seo-check-cta .wd-btn-primary{background:linear-gradient(100deg,var(--wd-accent),var(--wd-accent2));border:none;font-size:1.02rem;padding:15px 28px;box-shadow:0 18px 40px -14px color-mix(in srgb,var(--wd-accent) 70%,transparent)}
.seo-check-cta .note{font-size:.84rem;color:rgba(255,255,255,.62);max-width:320px}

/* ============================================================
   S5: SEO-Hero (ohne Preis-Karte) + Prozess-Linie
   Nur .wd-svc / .seo-hero-* – geteilte .ed-*-Basis bleibt unberührt.
   ============================================================ */
/* Hero einspaltig, volle Breite */
.wd-svc .ed-inner{grid-template-columns:1fr;align-items:start}
.wd-svc .ed-text{max-width:none}
.wd-svc .ed-text>p{max-width:720px}
/* Unverbindlich-Hinweis statt Preis */
.seo-hero-note{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.seo-hero-note svg{flex:none;color:var(--wd-accent)}
/* USP-Reihe (integriert den Inhalt der alten 0-€-Karte) */
.seo-hero-usps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.seo-hero-usps{grid-template-columns:repeat(3,1fr);gap:18px}}
.seo-hero-usps li{display:flex;align-items:flex-start;gap:13px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid color-mix(in srgb,var(--wd-accent) 16%,var(--bg-line));box-shadow:0 14px 34px -24px color-mix(in srgb,var(--wd-accent) 60%,rgba(15,30,54,.4));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:transform .3s,border-color .3s,box-shadow .3s}
.seo-hero-usps li:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--wd-accent) 40%,transparent);box-shadow:0 22px 44px -22px color-mix(in srgb,var(--wd-accent) 60%,rgba(15,30,54,.4))}
.seo-hero-usps .ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 12%,#fff);color:var(--wd-accent)}
.seo-hero-usps .txt{font-size:.86rem;color:var(--ink-mute);line-height:1.45}
.seo-hero-usps .txt b{display:block;font-family:'Rubik',sans-serif;font-weight:700;font-size:.98rem;color:var(--ink);margin-bottom:3px;line-height:1.2}

/* Prozess: alte Verbindungslinie unter has-line abschalten – nur die gepunktete Lauflinie bleibt */
.wd-process.has-line .wd-step::after{display:none}

/* ============================================================
   S5: KI-SEITE (.ki-anim) – Icon-Animationen kräftiger/sichtbarer
   Scope nur über .ki-anim am <main>; bereits abgestimmte Seiten bleiben unverändert.
   ============================================================ */
.ki-anim .ai-blink{animation-name:kiBlink;animation-duration:1.2s}
.ki-anim .ai-beat{animation-name:kiBeat;animation-duration:1.25s}
.ki-anim .ai-pop{animation-duration:1.7s}
.ki-anim .ai-spin,.ki-anim .ai-spinr{animation-duration:2.4s}
.ki-anim .ai-grow{animation-duration:1.7s}
.ki-anim .ai-float{animation-duration:1.7s}
.ki-anim .ai-up{animation-duration:1.8s}
.ki-anim .ai-type{animation-duration:1.9s}
@keyframes kiBlink{0%,100%{opacity:.05}50%{opacity:1}}
@keyframes kiBeat{0%,100%{transform:scale(.7)}50%{transform:scale(1.32)}}
/* Use-Case-Uhr: Zeiger dreht um die Mitte (view-box-Origin, nicht fill-box) */
.ai-clock{transform-box:view-box;transform-origin:12px 12px;animation:aiSpin 6s linear infinite}
@media(prefers-reduced-motion:reduce){
  .ki-anim .ai-blink,.ki-anim .ai-beat,.ki-anim .ai-pop,.ki-anim .ai-spin,.ki-anim .ai-spinr,.ki-anim .ai-grow,.ki-anim .ai-float,.ki-anim .ai-up,.ki-anim .ai-type,.ai-clock{animation:none}
}

/* S5: KI-Tools / Logo-Reihe „Mit welchen KIs wir arbeiten" */
.ki-tools-sec{padding-top:60px}
.ki-tools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:34px}
.ki-tool{display:flex;align-items:center;justify-content:center;min-width:118px;height:66px;padding:0 22px;border:1px solid var(--bg-line);border-radius:14px;background:#fff;transition:transform .3s,border-color .3s,box-shadow .3s}
.ki-tool:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--wd-accent) 40%,transparent);box-shadow:0 18px 38px -20px color-mix(in srgb,var(--wd-accent) 55%,rgba(15,30,54,.4))}
.ki-tool img{max-height:34px;max-width:140px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
.ki-tool:hover img{filter:grayscale(0);opacity:1}
.ki-tool-name{display:block;font-family:'Rubik',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink-2)}
.ki-tool.has-img .ki-tool-name{display:none}
.ki-tool:hover .ki-tool-name{color:var(--wd-accent)}

/* ===== S6: Geschwungene Block-Übergänge „Bogen + Akzent" (nur KI-Seite, .ki-anim) ===== */
.ki-anim .wd-sec{position:relative}
.ki-anim .wd-sec > .container,
.ki-anim .seo-kontakt > .container{position:relative;z-index:6}
.ki-wave{position:absolute;top:0;left:0;width:100%;height:clamp(38px,5vw,72px);line-height:0;pointer-events:none;z-index:5}
.ki-wave svg{display:block;width:100%;height:100%}
.ki-wave-fill{fill:var(--wave-from,#fff)}
.ki-wave-accent{fill:var(--wd-accent)}
.ki-wave--dark{--wave-from:#141033}
.ki-wave--soft{--wave-from:#F6F8FB}
.ki-wave--white{--wave-from:#FFFFFF}

/* ===== S6: Mobile-Navigation an Desktop-Mega angeglichen (vollständige Liste, Farben, Icons) ===== */
.mob-home{padding:13px 16px;background:var(--bg-soft);border-radius:8px;font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:10px;color:var(--ink)}
.mob-home svg{flex-shrink:0}
.mob-flat{padding:14px 16px;background:var(--bg-soft);border-radius:8px;font-weight:700}
.mob-link{--svc-color:var(--brand)}
.mob-svc{align-items:center}
.mob-svc .mob-ico{width:38px;height:38px;border-radius:8px;background:color-mix(in srgb,var(--svc-color) 12%,#fff);color:var(--svc-color);display:grid;place-items:center;flex-shrink:0;border:1px solid color-mix(in srgb,var(--svc-color) 20%,transparent);transition:all .2s}
.mob-ico-line{width:22px;color:var(--ink-mute);display:grid;place-items:center;flex-shrink:0}
.mob-ico svg,.mob-ico-line svg{display:block}
.mob-title{font-weight:600;color:var(--ink);line-height:1.3}
.mob-link:hover,.mob-link:active{background:color-mix(in srgb,var(--svc-color) 8%,transparent);color:var(--svc-color)}
.mob-svc:hover .mob-ico,.mob-svc:active .mob-ico{background:var(--svc-color);color:#fff;border-color:var(--svc-color)}
.mob-link:hover .mob-title,.mob-link:active .mob-title{color:var(--svc-color)}

/* === S7: SEO-Check-Formular in den SEO-Check-Block integriert === */
.seo-check-wrap .seo-check-anim{position:absolute;z-index:0;opacity:.4}
/* Zentrierter Stapel: Headline → Kontaktdaten → Formular (weiße Karte) → Trust-Banner */
.seo-check-formgrid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px;margin-top:34px;padding-top:34px;border-top:1px solid rgba(255,255,255,.12)}
.seo-check-formtext{max-width:680px}
.seo-check-formtext h3{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(1.4rem,2.4vw,1.9rem);color:#fff;margin:0 0 12px;line-height:1.15}
.seo-check-formtext>p{color:rgba(255,255,255,.8);line-height:1.7;max-width:540px;margin:0 auto}
.seo-check-formtext .seo-kontakt-list{align-items:center}
.seo-check-form{width:100%;max-width:580px;text-align:left;background:#fff;color:var(--ink-2);border-radius:18px;padding:clamp(22px,3vw,34px);box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}
.seo-check-form .seo-check-formnote{color:var(--ink-mute);opacity:1}
.seo-check-trust{width:100%;display:flex;justify-content:center}
.seo-check-wrap .contact-form{border:none;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}

/* === S9: Webdesign-Abo Rabatt-Streichpreis === */
.wd-price-amount .wd-price-old{align-self:baseline;font-family:'Rubik',sans-serif;font-weight:700;font-size:1.25rem;color:var(--ink-mute);text-decoration:line-through;text-decoration-thickness:2px;opacity:.7}
.wd-price-card.feat .wd-price-amount .wd-price-old{color:rgba(255,255,255,.55)}

/* === S9: Online-Erfolg-Icons lebhafter (B10) === */
#wd-leistungen .wd-ico .ai-beat{animation-duration:1.2s}
#wd-leistungen .wd-ico .ai-blink{animation-duration:1.1s}
#wd-leistungen .wd-ico .ai-spin{animation-duration:2.2s}
#wd-leistungen .wd-ico .ai-pan{animation-duration:2.4s}
#wd-leistungen .wd-ico .ai-grow{animation-duration:1.7s}
#wd-leistungen .wd-ico .ai-slide{animation-duration:1.8s}
#wd-leistungen .wd-ico .ai-dashrun{animation-duration:.85s}

/* === S9: Portfolio als Browser-Mockup, leicht geneigt + Hover-Scroll (B7) === */
.wd-pf-img{position:relative;background:#fff;transform:perspective(1200px) rotateX(6deg);transform-origin:center top;transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.wd-pf-img::before{content:"";position:absolute;top:0;left:0;right:0;height:26px;background:linear-gradient(#fbfbfd,#edeff3);border-bottom:1px solid rgba(15,30,54,.12);z-index:3}
.wd-pf-img::after{content:"";position:absolute;top:9px;left:13px;width:8px;height:8px;border-radius:50%;background:#ff5f57;box-shadow:13px 0 0 #febc2e,26px 0 0 #28c840;z-index:4}
.wd-pf:hover .wd-pf-img{transform:perspective(1200px) rotateX(0deg)}
.wd-pf-img img{object-position:center top;transition:object-position 3.2s ease,transform .5s ease}
.wd-pf:hover .wd-pf-img img{transform:none;object-position:center bottom}
.wd-pf-ph{padding-top:26px}
@media(prefers-reduced-motion:reduce){.wd-pf-img{transform:none}.wd-pf-img img{transition:none}}
/* Portfolio-Karte mit Geräte-Mockup (S22): Mockup bringt Panel + Geräte selbst
   mit – Browser-Leiste, Kipp-Perspektive und Scroll-Hover entfallen hier. */
.wd-pf-img--mock{aspect-ratio:2100/984;transform:none;background:#fff}
.wd-pf-img--mock::before,.wd-pf-img--mock::after{content:none}
.wd-pf:hover .wd-pf-img--mock{transform:none}
.wd-pf-img--mock img{object-position:center}
.wd-pf:hover .wd-pf-img--mock img{transform:scale(1.04);object-position:center}

/* === S10: Tech-Stack mit Marken-Logos + Konzept-Icons (B6) === */
.wd-chip-logo{padding-left:16px}
.wd-chip-logo .wd-logo{width:22px;height:22px;flex-shrink:0;background:var(--ink-mute);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:background .25s}
.wd-chip-logo:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.wd-chip-logo:hover .wd-logo{background:var(--brand)}
.wd-chip-ico .wd-cico{display:inline-flex;flex-shrink:0;color:var(--wd-accent,#DC2F2F)}
.wd-chip-ico .wd-cico svg{width:18px;height:18px;display:block}

/* === S10: Kundenstimmen als Karussell (B9) === */
.wd-testi{position:relative}
.wd-testi-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 14px;scrollbar-width:none;-ms-overflow-style:none}
.wd-testi-track::-webkit-scrollbar{display:none}
.wd-testi-card{flex:0 0 calc((100% - 72px)/4);scroll-snap-align:start;margin:0;display:flex;flex-direction:column}
.wd-testi-card blockquote{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.62;flex:1}
.wd-stars{color:#F5B301;font-size:1.05rem;letter-spacing:2px;margin-bottom:12px}
.wd-testi-person{display:flex;align-items:center;gap:13px;margin-top:18px;padding-top:16px;border-top:1px solid var(--bg-line)}
.wd-testi-ava{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#eef1f6;border:2px solid #fff;box-shadow:0 3px 10px -3px rgba(15,30,54,.25)}
.wd-testi-person b{display:block;font-weight:700;color:var(--ink);font-size:.95rem;line-height:1.2}
.wd-testi-person small{color:var(--ink-mute);font-size:.82rem}
.wd-testi-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--bg-line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -10px rgba(15,30,54,.3);transition:background .25s,color .25s,border-color .25s,opacity .25s}
.wd-testi-arrow:hover{background:var(--wd-accent,#DC2F2F);color:#fff;border-color:transparent}
.wd-testi-arrow.prev{left:-10px}
.wd-testi-arrow.next{right:-10px}
.wd-testi-arrow:disabled{opacity:0;pointer-events:none}
@media(max-width:1100px){.wd-testi-card{flex-basis:calc((100% - 48px)/3)}}
@media(max-width:820px){.wd-testi-card{flex-basis:calc((100% - 24px)/2)}.wd-testi-arrow{display:none}}
@media(max-width:560px){.wd-testi-card{flex-basis:86%}}

/* === S10: Leistungs-Eyebrow-Icons beim Scrollen animieren (B11) === */
@media(prefers-reduced-motion:no-preference){
	.wd-page .reveal .eyebrow svg,
	.wd-page .reveal-l .eyebrow svg,
	.wd-page .reveal-r .eyebrow svg{transform-box:fill-box;transform-origin:center}
	.wd-page .reveal.visible .eyebrow svg,
	.wd-page .reveal-l.visible .eyebrow svg,
	.wd-page .reveal-r.visible .eyebrow svg{animation:wdEbPop .65s cubic-bezier(.22,1,.36,1) both}
	@keyframes wdEbPop{0%{transform:scale(.4) rotate(-18deg);opacity:.35}60%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
}

/* === S10: Reparatur – Festpreis-Sektion beim Anker-Sprung unter dem fixen Header halten === */
#festpreis{scroll-margin-top:112px}

/* === S11: Webdesign – geschwungene Section-Übergänge (asymmetrische Welle, anders als KI-Doppelkurve) === */
.wd-page .wd-sec{position:relative}
.wd-wave{position:absolute;top:0;left:0;width:100%;height:clamp(32px,4.4vw,64px);line-height:0;pointer-events:none;z-index:4}
.wd-wave svg{display:block;width:100%;height:100%}
.wd-wave-fill{fill:var(--wave-from,#fff)}
.wd-wave-accent{fill:var(--wd-accent)}
.wd-wave--white{--wave-from:#fff}
.wd-wave--soft{--wave-from:var(--bg-soft)}
.wd-wave--dark{--wave-from:var(--brand-3)}

/* === S11: Navigations-Icons beim Hover animieren (einheitlicher Pop, nur bei Hover) === */
@media(prefers-reduced-motion:no-preference){
	.mega-link .mega-ico svg,
	.dd-small a svg{transition:transform .25s ease;transform-origin:center}
	.mega-link:hover .mega-ico svg,
	.dd-small a:hover svg{animation:navIcoPop .55s cubic-bezier(.22,1,.36,1)}
	@keyframes navIcoPop{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.22) rotate(-9deg)}65%{transform:scale(1.05) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
}

/* === S11: Website-Sicherheit – Animationen (Punkte 6–9) === */
/* Punkt 9: „In 4 Schritten" – 4-Spalten-Raster, animierte Lauflinie via has-line (alte Linie aus) */
@media(min-width:680px){.wd-process.wdp-4{grid-template-columns:repeat(4,1fr)}}

/* Punkt 7: „Ein Hack kommt selten mit Ankündigung" – vertikale Lauflinie, läuft nach unten */
.sec-timeline{position:relative}
.sec-timeline::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:4px;border-radius:3px;z-index:0;background:radial-gradient(circle closest-side,color-mix(in srgb,var(--wd-accent,#3D5A80) 80%,transparent) 95%,transparent) 0 0/4px 15px repeat-y;animation:secTlRun 1.1s linear infinite}
@keyframes secTlRun{to{background-position:0 15px}}
.sec-tl-item{z-index:1}

/* Punkt 8: „Acht Schichten…" – Icons animiert (je Schicht passende Bewegung) */
@media(prefers-reduced-motion:no-preference){
	.sec-check .ico svg{transform-origin:center}
	.sec-check:nth-child(1) .ico svg{animation:secSpin 4.5s linear infinite}
	.sec-check:nth-child(2) .ico svg{animation:secPulse 2.4s ease-in-out infinite}
	.sec-check:nth-child(3) .ico svg{animation:secScan 2.6s ease-in-out infinite}
	.sec-check:nth-child(4) .ico svg{animation:secFloat 3s ease-in-out infinite}
	.sec-check:nth-child(5) .ico svg{animation:secPulse 2.8s ease-in-out infinite}
	.sec-check:nth-child(6) .ico svg{animation:secWiggle 3.2s ease-in-out infinite}
	.sec-check:nth-child(7) .ico svg{animation:secPulse 1.9s ease-in-out infinite}
	.sec-check:nth-child(8) .ico svg{animation:secFloat 3.4s ease-in-out infinite}
}
@keyframes secSpin{to{transform:rotate(360deg)}}
@keyframes secPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes secScan{0%,100%{transform:translateX(-2.5px)}50%{transform:translateX(2.5px)}}
@keyframes secFloat{0%,100%{transform:translateY(-2.5px)}50%{transform:translateY(2.5px)}}
@keyframes secWiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* Punkt 6: WP-AgentX – Karten gestaffelt einblenden + Icons animiert */
.wpx-block .wpx-feat,.wpx-block .wpx-arch-card{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.wpx-block.visible .wpx-feat,.wpx-block.visible .wpx-arch-card{opacity:1;transform:none}
.wpx-block.visible .wpx-feat:nth-child(2),.wpx-block.visible .wpx-arch-card:nth-child(2){transition-delay:.06s}
.wpx-block.visible .wpx-feat:nth-child(3),.wpx-block.visible .wpx-arch-card:nth-child(3){transition-delay:.12s}
.wpx-block.visible .wpx-feat:nth-child(4),.wpx-block.visible .wpx-arch-card:nth-child(4){transition-delay:.18s}
.wpx-block.visible .wpx-feat:nth-child(5){transition-delay:.24s}
.wpx-block.visible .wpx-feat:nth-child(6){transition-delay:.3s}
.wpx-block.visible .wpx-feat:nth-child(7){transition-delay:.36s}
.wpx-block.visible .wpx-feat:nth-child(8){transition-delay:.42s}
.wpx-block.visible .wpx-feat:nth-child(9){transition-delay:.48s}
.wpx-block.visible .wpx-feat:nth-child(10){transition-delay:.54s}
.wpx-block.visible .wpx-feat:nth-child(11){transition-delay:.6s}
.wpx-block.visible .wpx-feat:nth-child(12){transition-delay:.66s}
@media(prefers-reduced-motion:no-preference){
	.wpx-feat-ico svg,.wpx-arch-ico svg{transform-origin:center;animation:wpxIcoFloat 3.4s ease-in-out infinite}
	.wpx-arch-ico svg{animation-duration:4s}
	@keyframes wpxIcoFloat{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
}
@media(prefers-reduced-motion:reduce){
	.wpx-block .wpx-feat,.wpx-block .wpx-arch-card{opacity:1;transform:none;transition:none}
	.sec-timeline::before{animation:none}
}

/* ============================================================
   Branchen-Langlandingpage (.lp-long) - prima-line-Aufbau in NK-CI
   Scope: ausschliesslich .lp-long, keine Auswirkung auf andere Seiten.
   ============================================================ */
.lp-long{--lp-navy:#0F1E36;--lp-navy2:#13294B}

/* HERO */
.lp-long .lp-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--lp-navy) 0%,#10233f 55%,#0c2c3a 100%);color:#fff;padding:64px 0 72px}
.lp-long .lp-hero-bg{position:absolute;inset:0;pointer-events:none}
.lp-long .lp-hero-bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.lp-long .lp-hero-bg span:nth-child(1){width:420px;height:420px;top:-120px;right:-80px;background:radial-gradient(circle,color-mix(in srgb,var(--wd-accent) 70%,transparent),transparent 70%)}
.lp-long .lp-hero-bg span:nth-child(2){width:360px;height:360px;bottom:-140px;left:-60px;background:radial-gradient(circle,color-mix(in srgb,var(--wd-accent2) 55%,transparent),transparent 70%)}
.lp-long .lp-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.lp-long .lp-hero-text h1{color:#fff;margin:14px 0 18px}
.lp-long .lp-hero-text h1 u{text-decoration:none;color:var(--wd-accent2)}
.lp-long .lp-hero-text>p{color:rgba(255,255,255,.82);font-size:1.06rem;max-width:38em}
.lp-long .lp-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:50px;background:color-mix(in srgb,var(--wd-accent) 22%,transparent);border:1px solid color-mix(in srgb,var(--wd-accent) 40%,transparent);color:#fff;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.lp-long .lp-feats{display:flex;flex-wrap:wrap;gap:10px 18px;margin:22px 0 26px}
.lp-long .lp-feat{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:rgba(255,255,255,.92)}
.lp-long .lp-feat svg{color:var(--wd-accent2)}
.lp-long .lp-hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.lp-long .wd-btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.lp-long .wd-btn-ghost-light:hover{background:rgba(255,255,255,.08);border-color:#fff}
.lp-long .lp-hero-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem;color:rgba(255,255,255,.7)}
.lp-long .lp-hero-trust b{color:#fff;font-family:'Rubik',sans-serif}
.lp-long .lp-hero-media{position:relative}
.lp-long .lp-hero-frame{border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.1)}
.lp-long .lp-hero-frame img{width:100%;height:auto;display:block}
.lp-long .lp-hero-badge{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);font-family:'Rubik',sans-serif;font-weight:700;font-size:.84rem;padding:9px 13px;border-radius:11px;box-shadow:0 18px 40px -14px rgba(0,0,0,.5)}
.lp-long .lp-hero-badge .ico{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:color-mix(in srgb,var(--wd-accent) 16%,#fff);color:var(--wd-accent)}
.lp-long .lp-hb1{top:18px;left:-14px}
.lp-long .lp-hb2{bottom:18px;right:-12px}

/* WERT-BAND */
.lp-long .lp-band-inner{max-width:760px;margin:0 auto;text-align:center}
.lp-long .lp-band-inner h2{margin:6px 0 14px}
.lp-long .lp-band-inner p{color:var(--ink-mute);font-size:1.04rem}
.lp-long .lp-band-soft{background:var(--bg-soft)}

/* SORGLOS-PAKET */
.lp-long .lp-pack{display:grid;grid-template-columns:1fr;gap:16px}
.lp-long .lp-pack-item{display:flex;gap:14px;background:#fff;border:1px solid var(--bg-line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s}
.lp-long .lp-pack-item:hover{transform:translateY(-4px);box-shadow:0 18px 38px -18px color-mix(in srgb,var(--wd-accent) 45%,rgba(15,30,54,.35));border-color:color-mix(in srgb,var(--wd-accent) 35%,transparent)}
.lp-long .lp-pack-ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 14%,#fff);color:var(--wd-accent)}
/* Branchen-LP (S22): Blöcke leben – Häkchen pulsieren versetzt, Karten heben sich. */
.lp-long .lp-pack-ico svg{transform-box:fill-box;transform-origin:center;animation:aiBeat 2.6s ease-in-out infinite}
.lp-long .lp-pack-item:nth-child(2) .lp-pack-ico svg{animation-delay:.4s}
.lp-long .lp-pack-item:nth-child(3) .lp-pack-ico svg{animation-delay:.8s}
.lp-long .lp-pack-item:nth-child(4) .lp-pack-ico svg{animation-delay:1.2s}
.lp-long .lp-pack-item:nth-child(5) .lp-pack-ico svg{animation-delay:1.6s}
.lp-long .lp-pack-item:nth-child(6) .lp-pack-ico svg{animation-delay:2s}
@media(prefers-reduced-motion:reduce){.lp-long .lp-pack-ico svg{animation:none}.lp-long .lp-pack-item{transition:none}.lp-long .lp-pack-item:hover{transform:none}}
.lp-long .lp-pack-item h3{font-size:1.05rem;margin-bottom:4px}
.lp-long .lp-pack-item p{font-size:.9rem;color:var(--ink-mute);line-height:1.5}

/* TIEFEN-BLOCK */
.lp-long .lp-block{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.lp-long .lp-block-media img{width:100%;height:auto;border-radius:18px;box-shadow:0 34px 66px -26px rgba(15,30,54,.42)}
.lp-long .lp-block-text h2{margin:8px 0 14px}
.lp-long .lp-block-text>p{color:var(--ink-mute);font-size:1.02rem;margin-bottom:22px}
.lp-long .lp-benefits{display:grid;gap:14px;margin-bottom:26px}
.lp-long .lp-benefit{display:flex;gap:12px;align-items:flex-start}
.lp-long .lp-benefit-ico{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--wd-accent) 14%,#fff);color:var(--wd-accent)}
.lp-long .lp-benefit b{display:block;font-family:'Rubik',sans-serif;font-size:.98rem}
.lp-long .lp-benefit span{font-size:.88rem;color:var(--ink-mute)}

/* WERT-DUNKEL */
.lp-long .lp-dark{background:linear-gradient(135deg,var(--lp-navy) 0%,#13294b 100%);color:#fff;padding:80px 0}
.lp-long .lp-eyebrow-dark{display:inline-block;color:var(--wd-accent2);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.lp-long .lp-dark-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;margin-top:34px}
.lp-long .lp-dark-media img{width:100%;border-radius:18px;box-shadow:0 34px 66px -26px rgba(0,0,0,.6)}
.lp-long .lp-qa{display:grid;gap:16px}
.lp-long .lp-qa-item{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px 22px 20px 26px;transition:transform .3s,background .3s,border-color .3s}
.lp-long .lp-qa-item:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:color-mix(in srgb,var(--wd-accent2) 55%,transparent)}
/* Pulsierender Akzentpunkt je Frage-Karte (S22), zeitversetzt. */
.lp-long .lp-qa-item::before{content:"";position:absolute;left:12px;top:27px;width:7px;height:7px;border-radius:50%;background:var(--wd-accent2);animation:aiBlink 2.4s ease-in-out infinite}
.lp-long .lp-qa-item:nth-child(2)::before{animation-delay:.8s}
.lp-long .lp-qa-item:nth-child(3)::before{animation-delay:1.6s}
@media(prefers-reduced-motion:reduce){.lp-long .lp-qa-item{transition:none}.lp-long .lp-qa-item:hover{transform:none}.lp-long .lp-qa-item::before{animation:none;opacity:1}}
.lp-long .lp-qa-item h3{color:#fff;font-size:1.1rem;margin-bottom:8px}
.lp-long .lp-qa-item p{color:rgba(255,255,255,.78);font-size:.94rem;line-height:1.6}

/* TESTIMONIALS */
.lp-long .lp-testi{display:grid;grid-template-columns:1fr;gap:20px}
.lp-long .lp-testi-card{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.lp-long .lp-stars{color:#F5A623;letter-spacing:2px;margin-bottom:12px}
.lp-long .lp-testi-card blockquote{font-size:1rem;line-height:1.6;color:var(--ink-2);margin-bottom:18px}
.lp-long .lp-testi-card figcaption{display:flex;align-items:center;gap:12px}
.lp-long .lp-avatar{width:44px;height:44px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--wd-accent),var(--wd-accent2))}
.lp-long .lp-testi-card figcaption b{display:block;font-family:'Rubik',sans-serif;font-size:.96rem}
.lp-long .lp-testi-card figcaption small{color:var(--ink-mute);font-size:.82rem}
.lp-long .lp-note{font-size:.82rem;color:var(--ink-mute);font-style:italic}

/* TEAM-BAND */
.lp-long .lp-teamband{position:relative;background:var(--bg-img) center/cover no-repeat,var(--lp-navy);color:#fff;padding:96px 0}
.lp-long .lp-teamband-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,30,54,.92) 0%,rgba(15,30,54,.55) 100%)}
.lp-long .lp-teamband-inner{position:relative;z-index:2;max-width:560px}
.lp-long .lp-teamband-inner h2{color:#fff;margin:6px 0 14px}
.lp-long .lp-teamband-inner p{color:rgba(255,255,255,.85);margin-bottom:24px}

/* SOFTWARE-KOMPAT */
.lp-long .lp-compat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lp-long .lp-compat-tile{background:#fff;border:1px solid var(--bg-line);border-radius:12px;padding:18px 12px;text-align:center;font-family:'Rubik',sans-serif;font-weight:600;font-size:.9rem;color:var(--ink-2);box-shadow:var(--shadow-sm);transition:.25s}
.lp-long .lp-compat-tile:hover{border-color:var(--wd-accent);color:var(--wd-accent);transform:translateY(-3px)}

/* FAKTEN */
.lp-long .lp-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.lp-long .lp-fact{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:24px 20px;text-align:center;box-shadow:var(--shadow-sm)}
.lp-long .lp-fact-num{font-family:'Rubik',sans-serif;font-weight:800;font-size:2.4rem;line-height:1;color:var(--wd-accent);display:flex;align-items:baseline;justify-content:center;gap:2px}
.lp-long .lp-fact-num span{font-size:1.2rem}
.lp-long .lp-fact p{margin-top:10px;font-size:.9rem;color:var(--ink-mute);line-height:1.5}

/* VERWANDTE */
.lp-long .lp-related{display:flex;flex-wrap:wrap;gap:12px}
.lp-long .lp-related-link{display:inline-flex;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--bg-line);border-radius:50px;padding:10px 18px;font-weight:600;font-size:.9rem;color:var(--ink-2);transition:.2s}
.lp-long .lp-related-link:hover{border-color:var(--wd-accent);color:var(--wd-accent)}
.lp-long .lp-related-link svg{color:var(--wd-accent)}

/* RESPONSIVE */
@media(min-width:880px){
  .lp-long .lp-hero-inner{grid-template-columns:1.05fr .95fr;gap:56px}
  .lp-long .lp-pack{grid-template-columns:repeat(2,1fr)}
  .lp-long .lp-block{grid-template-columns:1fr 1fr;gap:56px}
  .lp-long .lp-block.rev .lp-block-media{order:2}
  .lp-long .lp-benefits{grid-template-columns:1fr 1fr}
  .lp-long .lp-dark-grid{grid-template-columns:.9fr 1.1fr;gap:50px}
  .lp-long .lp-testi{grid-template-columns:repeat(3,1fr)}
  .lp-long .lp-compat-grid{grid-template-columns:repeat(4,1fr)}
  .lp-long .lp-facts{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1100px){
  .lp-long .lp-pack{grid-template-columns:repeat(3,1fr)}
  .lp-long .lp-compat-grid{grid-template-columns:repeat(6,1fr)}
}


/* ============================================================
   Geraete-Mockups (.lp-long) - Laptop/Phone/Browser/Code in NK-CI
   ============================================================ */

/* Mini-Website im Screen */
.lp-long .lp-site{width:100%;height:100%;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.lp-long .lp-site-top{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid #eef1f6}
.lp-long .lp-site-logo{width:22px;height:8px;border-radius:3px;background:var(--wd-accent)}
.lp-long .lp-site-nav{display:flex;gap:6px}
.lp-long .lp-site-nav i{display:block;width:14px;height:4px;border-radius:2px;background:#cdd5e1}
.lp-long .lp-site-cta{width:30px;height:11px;border-radius:6px;background:var(--wd-accent)}
.lp-long .lp-site-hero{flex:1;display:flex;gap:9px;padding:11px;align-items:center;background:linear-gradient(135deg,#f1fafc,#e9f6fb)}
.lp-long .lp-site-hero-txt{flex:1;display:flex;flex-direction:column;gap:6px}
.lp-long .lp-ln{height:6px;border-radius:3px;background:#cfd8e3}
.lp-long .lp-ln.w95{width:95%}
.lp-long .lp-ln.w80{width:80%}
.lp-long .lp-ln.w55{width:55%}
.lp-long .lp-site-btn{margin-top:4px;width:50px;height:14px;border-radius:7px;background:var(--wd-accent)}
.lp-long .lp-site-hero-img{width:44%;align-self:stretch;border-radius:7px;background-size:cover;background-position:center}
.lp-long .lp-site-cards{display:flex;gap:7px;padding:0 11px 11px}
.lp-long .lp-site-cards span{flex:1;height:30px;border-radius:6px;background:#eef2f7;border:1px solid #e6ecf3}

/* Laptop + Phone-Bühne */
.lp-long .lp-device-stage{position:relative;padding-bottom:18px}
.lp-long .lp-laptop{position:relative;width:100%;max-width:580px;margin:0 auto}
.lp-long .lp-laptop-top{position:relative;background:#11192b;border-radius:14px 14px 0 0;padding:13px 13px 0;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.lp-long .lp-laptop-cam{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#3a455c}
.lp-long .lp-laptop-screen{aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:#fff}
.lp-long .lp-laptop-base{height:15px;background:linear-gradient(180deg,#cfd5e0,#9aa3b5);border-radius:0 0 14px 14px;position:relative}
.lp-long .lp-laptop-base span{position:absolute;top:0;left:50%;transform:translateX(-50%);width:92px;height:6px;border-radius:0 0 8px 8px;background:#828ca3}
.lp-long .lp-phone{position:absolute;bottom:0;left:-4px;width:104px;background:#11192b;border-radius:17px;padding:7px 5px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 34px -12px rgba(0,0,0,.55);z-index:3}
.lp-long .lp-phone-notch{display:block;width:32px;height:5px;border-radius:5px;background:#2a3346;margin:0 auto 5px}
.lp-long .lp-phone-screen{aspect-ratio:9/19;border-radius:11px;overflow:hidden;background:#fff}
.lp-long .lp-phone .lp-site-hero{flex-direction:column;align-items:stretch;padding:9px}
.lp-long .lp-phone .lp-site-hero-img{width:100%;min-height:64px;margin-top:7px}
.lp-long .lp-phone .lp-site-cards{flex-direction:column}
.lp-long .lp-phone .lp-site-cards span{height:16px}
.lp-long .lp-phone .lp-site-nav{display:none}

/* Browser-Fenster */
.lp-long .lp-browser{border-radius:12px;overflow:hidden;box-shadow:0 34px 66px -26px rgba(15,30,54,.42);border:1px solid var(--bg-line);background:#fff}
.lp-long .lp-browser-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#eef1f6;border-bottom:1px solid var(--bg-line)}
.lp-long .lp-url{flex:1;height:14px;border-radius:7px;background:#fff;border:1px solid var(--bg-line);max-width:62%}
.lp-long .lp-browser-view{aspect-ratio:16/10}

/* Ampel-Punkte (Browser + Code) */
.lp-long .lp-dots{display:flex;gap:5px}
.lp-long .lp-dots i{display:block;width:9px;height:9px;border-radius:50%}
.lp-long .lp-dots i:nth-child(1){background:#ff6058}
.lp-long .lp-dots i:nth-child(2){background:#ffbd2e}
.lp-long .lp-dots i:nth-child(3){background:#28c93f}

/* Code-Editor-Fenster */
.lp-long .lp-code{border-radius:12px;overflow:hidden;box-shadow:0 34px 66px -26px rgba(0,0,0,.5);background:#0d1326;border:1px solid rgba(255,255,255,.08)}
.lp-long .lp-code-bar{display:flex;align-items:center;gap:10px;padding:10px 13px;background:#131c32;border-bottom:1px solid rgba(255,255,255,.06)}
.lp-long .lp-code-file{color:#8b97b1;font-size:.76rem;font-family:ui-monospace,Consolas,monospace}
.lp-long .lp-code-body{display:flex;gap:14px;padding:16px 14px;font-family:ui-monospace,Consolas,'Courier New',monospace}
.lp-long .lp-gut{display:flex;flex-direction:column;gap:5px;color:#3f4c6b;font-size:.74rem;text-align:right;user-select:none}
.lp-long .lp-code-lines{display:flex;flex-direction:column;gap:5px;font-size:.76rem;line-height:1.5;overflow-x:auto}
.lp-long .lp-code-lines .cl{display:block;white-space:pre;color:#cdd6e8}
.lp-long .t-com{color:#5c6b8a;font-style:italic}
.lp-long .t-tag{color:#5cc8e6}
.lp-long .t-attr{color:#c792ea}
.lp-long .t-str{color:#ffcb6b}
.lp-long .t-kw{color:#82e0aa}
.lp-long .t-val{color:#f78c6c}


/* Bewertungen: Badge-Leiste (Google/ProvenExpert) + Avatare */
.lp-long .lp-badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 44px;margin:0 auto 40px;padding:24px 28px;background:var(--bg-soft);border:1px solid var(--bg-line);border-radius:16px;max-width:700px}
.lp-long .lp-badges img{height:64px;width:auto;display:block}
.lp-long .lp-testi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lp-long .lp-testi-head .lp-stars{margin-bottom:0}
.lp-long .lp-gicon{display:inline-flex;flex:none}
.lp-long .lp-testi-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none}

/* ===== Startseite · Kundenstimmen-Karussell (htesti) ===== */
.htesti{padding:96px 0;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);border-top:1px solid var(--bg-line);position:relative;overflow:hidden}
.htesti .section-head{text-align:center;max-width:640px;margin:0 auto 30px}
.htesti .section-head p{font-size:.98rem;color:var(--ink-mute);margin-top:12px}
.htesti-viewport{position:relative}
.htesti-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 4px 20px;scrollbar-width:none;-ms-overflow-style:none}
.htesti-track::-webkit-scrollbar{display:none}
.htesti-card{flex:0 0 auto;width:min(380px,82vw);scroll-snap-align:start;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.htesti-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.htesti-stars{color:#F5B301;letter-spacing:2px;font-size:1.02rem;line-height:1}
.htesti-gicon{display:inline-flex;flex:none}
.htesti-card blockquote{font-size:.97rem;line-height:1.62;color:var(--ink-2);margin:0 0 22px;flex:1 0 auto}
.htesti-card figcaption{display:flex;align-items:center;gap:13px;margin-top:auto}
.htesti-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--brand-pale)}
.htesti-card figcaption b{display:block;font-family:'Rubik',sans-serif;font-size:.95rem;color:var(--ink)}
.htesti-card figcaption small{color:var(--ink-mute);font-size:.82rem}
.htesti-nav{position:absolute;top:46%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--bg-line);box-shadow:var(--shadow-lg);display:grid;place-items:center;cursor:pointer;color:var(--brand);transition:background .2s,color .2s,border-color .2s,opacity .2s}
.htesti-nav:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.htesti-nav:disabled{opacity:.32;cursor:default;pointer-events:none}
.htesti-prev{left:-8px}
.htesti-next{right:-8px}
.htesti-dots{display:flex;justify-content:center;gap:9px;margin-top:20px}
.htesti-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--bg-line);cursor:pointer;padding:0;transition:background .25s,width .25s}
.htesti-dots button.active{background:var(--brand);width:26px;border-radius:5px}
@media(max-width:640px){
  .htesti{padding:72px 0}
  .htesti-nav{display:none}
  .htesti-card{width:84vw;padding:22px}
}

/* ===== Startseite · Trust-Logos (Google / ProvenExpert) ===== */
.htrust{padding:90px 0;background:#fff;border-top:1px solid var(--bg-line)}
.htrust .section-head{text-align:center;max-width:640px;margin:0 auto 38px}
.htrust .section-head p{font-size:.98rem;color:var(--ink-mute);margin-top:12px}
.htrust-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:28px}
.htrust-card{flex:1 1 380px;max-width:460px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:40px 44px;min-height:230px}
.htrust-card img{max-width:100%;max-height:170px;width:auto;height:auto;display:block}
@media(max-width:600px){
  .htrust{padding:64px 0}
  .htrust-card{padding:30px;min-height:0}
  .htrust-card img{max-height:120px}
}

/* ===== Wertgarantie · Rechner-Block (isoliert) + Ablauf-Lauflinie (4 Schritte) ===== */
.wg-calc{position:relative;overflow:hidden;padding:90px 0;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);border-top:1px solid var(--bg-line)}
.wg-calc .wd-hero-mesh{opacity:.42;mix-blend-mode:normal}
.wg-calc .wd-head,.wg-calc .wg-calc-box{position:relative;z-index:2}
.wg-calc .wd-head{text-align:center;max-width:680px;margin:0 auto 34px}
.wg-calc-box{max-width:780px;margin:0 auto;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-xl);padding:22px;box-shadow:0 24px 50px -28px rgba(15,30,54,.22);min-height:120px}
/* Rechner-Ladezustand / Timeout-Fallback (externer Wertgarantie-Dienst) */
.wg-calc-state{text-align:center;color:var(--ink-mute);font-size:.95rem;padding:22px 14px}
.wg-calc-state[hidden]{display:none}
.wg-calc-spin{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:9px;border:2.5px solid color-mix(in srgb,var(--wd-accent) 22%,transparent);border-top-color:var(--wd-accent);border-radius:50%;animation:wgCalcSpin .8s linear infinite}
@keyframes wgCalcSpin{to{transform:rotate(360deg)}}
#wg-calc-fail p{margin:0 0 12px;color:var(--ink-2)}
#wg-calc-fail .wg-calc-alt{margin:14px 0 0;font-size:.86rem;color:var(--ink-mute)}
@media(prefers-reduced-motion:reduce){.wg-calc-spin{animation:none}}
/* Lauflinie endet exakt an erster/letzter Ziffer – 4 Schritte: Zentren bei 12,5 % und 87,5 % */
@media(min-width:680px){.wd-process.wdp-4.has-line::before{left:12.5%;right:12.5%}}

/* ===== Telematik · Ablauf 1–4: statische Linie raus, animierte Lauflinie (einheitlich) ===== */
.ti-flow.has-line .ti-flow-step:not(:last-child)::after{display:none}
@media(min-width:680px){
  .ti-flow.has-line{position:relative}
  .ti-flow.has-line::before{content:"";position:absolute;top:27px;left:12.5%;right:12.5%;height:6px;z-index:0;background:radial-gradient(circle closest-side,color-mix(in srgb,var(--wd-accent) 80%,transparent) 96%,transparent) 0 0/15px 6px repeat-x;animation:seoDotsRun 1s linear infinite}
  .ti-flow.has-line .ti-flow-step{position:relative;z-index:2}
}
@media(prefers-reduced-motion:reduce){.ti-flow.has-line::before{animation:none}}

/* ===== Telematik · Anbieter-/Partner-Leiste ===== */
.ti-partner-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 26px;margin:8px auto 0;max-width:880px}
.ti-partner-logo{background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:28px 48px;display:grid;place-items:center;transition:transform .3s,box-shadow .3s}
.ti-partner-logo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ti-partner-logo img{height:78px;width:auto;display:block;object-fit:contain}
.ti-partner-note{text-align:center;max-width:760px;margin:28px auto 0;font-size:.92rem;color:var(--ink-mute);line-height:1.65}
.ti-partner-note b{color:var(--ink-2)}
/* TI · Konnektoren/Terminals als Produkt-Karten + PVS-Logo-Leiste */
.ti-sub{text-align:center;font-family:'Rubik',sans-serif;font-size:1.18rem;margin:50px 0 6px;color:var(--ink)}
.ti-sub-note{text-align:center;max-width:680px;margin:0 auto 22px;font-size:.92rem;color:var(--ink-mute);line-height:1.6}
.ti-prod-grid{display:grid;grid-template-columns:1fr;gap:22px;max-width:1000px;margin:18px auto 0}
@media(min-width:760px){.ti-prod-grid{grid-template-columns:repeat(3,1fr)}.ti-prod-grid--2{grid-template-columns:repeat(2,1fr);max-width:680px}}
.ti-prod{margin:0;background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.ti-prod:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ti-prod-img{height:150px;display:grid;place-items:center;margin-bottom:14px}
.ti-prod-img img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain}
.ti-prod figcaption b{display:block;font-family:'Rubik',sans-serif;font-size:1.02rem;color:var(--ink);margin-bottom:5px}
.ti-prod figcaption span{font-size:.86rem;color:var(--ink-mute);line-height:1.5}
.ti-pvs-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;max-width:1120px;margin:12px auto 0}
.ti-pvs-logo{flex:0 0 auto;width:264px;height:172px;background:#fff;border:1px solid var(--bg-line);border-radius:16px;padding:26px;display:grid;place-items:center;transition:transform .3s,box-shadow .3s}
.ti-pvs-logo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ti-pvs-logo img{max-width:100%;max-height:118px;width:auto;height:auto;object-fit:contain}
@media(max-width:560px){.ti-pvs-logo{width:100%;max-width:300px;height:150px}}
/* TI · medizinische EKG-/Puls-Linie im Kontakt-Hintergrund (statt Netz-Canvas) */
.ti-ekg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.5}
.ti-ekg-svg{position:absolute;top:50%;left:0;width:100%;height:54%;transform:translateY(-50%)}
.ti-ekg-base{fill:none;stroke:color-mix(in srgb,var(--wd-accent2) 30%,transparent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ti-ekg-pulse{fill:none;stroke:var(--wd-accent2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px var(--wd-accent2));stroke-dasharray:90 910;stroke-dashoffset:1000;animation:tiEkgRun 3.8s linear infinite}
@keyframes tiEkgRun{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.ti-ekg-pulse{animation:none}}

/* ===== Microsoft 365 · Umstiegs-Lauflinie (5 Schritte: Zentren 10–90 %) ===== */
@media(min-width:680px){
  .wd-process.wdp-5{grid-template-columns:repeat(5,1fr)}
  .wd-process.wdp-5.has-line::before{left:10%;right:10%}
}

/* ===== Wertgarantie · Partner-Logo (Hero-Pille, Rechner, Partner-Band) ===== */
.wg-partner-hero{display:inline-flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:26px;padding:16px 24px;background:#fff;border:1px solid color-mix(in srgb,var(--wd-accent) 32%,var(--bg-line));border-radius:16px;box-shadow:0 20px 44px -24px color-mix(in srgb,var(--wd-accent) 55%,transparent),var(--shadow-sm)}
.wg-partner-hero span{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.wg-partner-hero img{height:92px;width:auto;display:block;object-fit:contain}
@media(max-width:560px){.wg-partner-hero img{height:74px}}
.wg-winwin{display:flex;gap:13px;align-items:flex-start;margin-top:20px;padding:15px 18px;background:#fff;border:1px solid var(--bg-line);border-radius:13px;box-shadow:var(--shadow-sm);font-size:.97rem;line-height:1.62;color:var(--ink);max-width:580px}
.wg-winwin svg{flex-shrink:0;color:var(--wd-accent);margin-top:2px}
.wg-winwin b{color:color-mix(in srgb,var(--wd-accent) 72%,#000)}
/* C3: Spar-Animation im "Lohnt sich"-Block (Sparpotenzial fuellt sich) */
.wg-save{margin-top:22px;max-width:340px}
.wg-save-bar{height:9px;border-radius:50px;background:rgba(255,255,255,.2);overflow:hidden}
.wg-save-bar i{display:block;height:100%;width:10%;border-radius:50px;background:linear-gradient(90deg,var(--wd-accent),var(--wd-accent2));animation:wgSave 3.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes wgSave{0%{width:8%}55%{width:92%}100%{width:92%}}
.wg-save span{display:block;margin-top:9px;font-size:.82rem;font-weight:700;color:#fff;letter-spacing:.01em}
@media(prefers-reduced-motion:reduce){.wg-save-bar i{animation:none;width:92%}}
.wg-calc-logo{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto 24px;position:relative;z-index:2}
.wg-calc-logo span{font-size:.84rem;font-weight:600;color:var(--ink-mute);letter-spacing:.02em}
.wg-calc-logo img{height:54px;width:auto;display:block;object-fit:contain}
.wg-partner-band{padding:64px 0;background:var(--bg-soft);border-top:1px solid var(--bg-line);border-bottom:1px solid var(--bg-line)}
.wg-partner-inner{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;background:#fff;border:1px solid var(--bg-line);border-radius:var(--radius-xl);padding:36px 40px;box-shadow:var(--shadow)}
@media(min-width:820px){.wg-partner-inner{grid-template-columns:1.45fr 1fr;gap:48px}}
.wg-partner-txt h2{font-family:'Rubik',sans-serif;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.18;margin:12px 0 12px}
.wg-partner-txt p{color:var(--ink-mute);line-height:1.7;font-size:.98rem;margin:0}
.wg-partner-logo{display:grid;place-items:center}
.wg-partner-logo img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain}

/* ===== Wertgarantie-Kontakt (S15): pulsierender Punkt + neue Schutzschild-Animation – nur .wg-kontakt ===== */
.wg-kontakt .wd-eyebrow .dot{animation:wgDotPulse 2.3s ease-in-out infinite}
@keyframes wgDotPulse{0%,100%{background:var(--wd-accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--wd-accent) 55%,transparent)}50%{background:var(--wd-accent2);box-shadow:0 0 0 7px color-mix(in srgb,var(--wd-accent2) 0%,transparent)}}
.wg-guard{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wg-guard i{position:absolute;display:block;color:var(--wd-accent);opacity:0;animation:wgRise var(--d,16s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.wg-guard i svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--wd-accent) 55%,transparent))}
.wg-guard::after{content:"";position:absolute;inset:-25% -12%;background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--wd-accent) 10%,transparent) 50%,transparent 58%);animation:wgSheen 12s ease-in-out infinite}
@keyframes wgRise{0%{opacity:0;transform:translateY(40px) rotate(-7deg) scale(.9)}18%{opacity:.22}55%{opacity:.13;transform:translateY(-16px) rotate(5deg) scale(1)}85%{opacity:.16}100%{opacity:0;transform:translateY(-78px) rotate(9deg) scale(1.05)}}
@keyframes wgSheen{0%,100%{transform:translateX(-22%)}50%{transform:translateX(22%)}}
@media(prefers-reduced-motion:reduce){.wg-kontakt .wd-eyebrow .dot,.wg-guard i,.wg-guard::after{animation:none}.wg-guard i{opacity:.12}}

/* ===================================================================
   CMS-Seite (S18): zweispaltiger Hero + Live-Editor, WordPress-Block
   =================================================================== */
.hs-hero--cms .container{display:grid;grid-template-columns:1.02fr .98fr;grid-template-areas:"intro stage";align-items:center;gap:28px 48px}
.hs-hero--cms .hs-intro{grid-area:intro;max-width:none;margin:0;text-align:left}
.hs-hero--cms .hs-intro p{margin-left:0;margin-right:0;max-width:560px}
.hs-hero--cms .hs-actions{justify-content:flex-start}
.hs-hero--cms .hs-stage{grid-area:stage;max-width:none;margin:0}
.hs-hero--cms .hs-stats{grid-column:1/-1;margin-top:44px}
@media(max-width:880px){
  .hs-hero--cms .container{grid-template-columns:1fr;grid-template-areas:"intro" "stage"}
  .hs-hero--cms .hs-intro{text-align:center;max-width:640px;margin:0 auto}
  .hs-hero--cms .hs-intro p{margin:0 auto 28px}
  .hs-hero--cms .hs-actions{justify-content:center}
  .hs-hero--cms .hs-stage{margin:30px auto 0;max-width:540px;width:100%}
}
/* Live-Editor-Demo: getippte Überschrift + Veröffentlichen-Puls */
.cms-editor-h{min-height:1.5em}
.cms-type{white-space:nowrap;overflow:hidden}
.cms-publish{transition:transform .18s ease,box-shadow .18s ease}
.cms-publish.pub{transform:scale(.93);box-shadow:0 4px 12px -6px rgba(31,135,68,.8)}
.cms-saved{transition:color .25s ease}
.cms-saved.is-pub{color:var(--wd-accent2,#06B6D4)}
@media(prefers-reduced-motion:reduce){.cms-publish{transition:none}}

/* WordPress nach vorn: weißer Erklärblock mit Logo + dezenter Grafik */
.wp-explain-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:32px 56px}
.wp-explain-visual{position:relative;min-height:310px;display:grid;place-items:center}
.wp-badge{position:relative;z-index:3;width:152px;height:152px;display:grid;place-items:center;border-radius:32px;background:#fff;box-shadow:0 26px 60px -24px rgba(15,38,84,.4),0 0 0 1px var(--bg-line);animation:wdFloat 7s ease-in-out infinite}
.wp-badge img{width:78%;height:auto;display:block}
.wp-ring{position:absolute;border-radius:50%;border:1.5px dashed color-mix(in srgb,#21759B 30%,transparent);z-index:1}
.wp-ring-1{width:252px;height:252px}
.wp-ring-2{width:384px;height:384px;border-color:color-mix(in srgb,#21759B 16%,transparent)}
.wp-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--bg-line);border-radius:50px;padding:9px 15px;font-weight:700;font-size:.8rem;color:var(--ink);box-shadow:0 16px 34px -16px rgba(15,38,84,.34)}
.wp-chip svg{color:#21759B;flex-shrink:0}
.wp-chip-1{top:10%;left:-4%;animation:wdFloat 6.5s ease-in-out infinite}
.wp-chip-2{bottom:15%;left:0;animation:wdFloat 8s ease-in-out infinite reverse}
.wp-chip-3{top:32%;right:-6%;animation:wdFloat 7.4s ease-in-out infinite}
.wp-points{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:13px}
.wp-points li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;line-height:1.55;color:var(--ink-mute)}
.wp-points li b{color:var(--ink)}
.wp-points li svg{flex-shrink:0;color:#21759B;margin-top:2px}
@media(max-width:880px){
  .wp-explain-grid{grid-template-columns:1fr;gap:10px}
  .wp-explain-visual{min-height:250px;order:-1;margin-bottom:6px}
  .wp-ring-2{width:300px;height:300px}
  .wp-ring-3{width:380px;height:380px}
}
@media(max-width:480px){.wp-chip{font-size:.72rem;padding:7px 11px}.wp-ring-2,.wp-ring-3{display:none}}
@media(prefers-reduced-motion:reduce){.wp-badge,.wp-chip{animation:none}}

/* ===================================================================
   CMS-Seite (S18 B): WP-Block mehr Punkte/Chips, Custom-Dev-Block,
   eigene Kontakt-Schreibanimation
   =================================================================== */
.wp-ring-3{width:466px;height:466px;border-radius:50%;position:absolute;border:1.5px dashed color-mix(in srgb,#21759B 11%,transparent);z-index:1}
.wp-chip-4{bottom:6%;right:-3%;animation:wdFloat 7.8s ease-in-out infinite}
.wp-chip-5{top:-3%;right:16%;animation:wdFloat 6.8s ease-in-out infinite reverse}
.wp-dot{position:absolute;border-radius:50%;background:#21759B;z-index:2;opacity:.5}
.wp-dot-1{width:10px;height:10px;top:14%;left:14%;animation:wpSwing 5.5s ease-in-out infinite}
.wp-dot-2{width:7px;height:7px;top:22%;right:20%;opacity:.4;animation:wpSwing 6.8s ease-in-out infinite reverse}
.wp-dot-3{width:13px;height:13px;bottom:18%;left:10%;opacity:.35;animation:wpSwing 7.6s ease-in-out infinite}
.wp-dot-4{width:6px;height:6px;bottom:26%;right:14%;animation:wpSwing 6s ease-in-out infinite reverse}
.wp-dot-5{width:9px;height:9px;top:46%;left:2%;opacity:.45;animation:wpSwing 8.2s ease-in-out infinite}
.wp-dot-6{width:8px;height:8px;bottom:8%;left:40%;opacity:.4;animation:wpSwing 6.4s ease-in-out infinite reverse}
.wp-dot-7{width:5px;height:5px;top:8%;right:38%;animation:wpSwing 5.8s ease-in-out infinite}
@keyframes wpSwing{0%,100%{transform:translate(0,0)}25%{transform:translate(6px,-8px)}50%{transform:translate(-4px,-12px)}75%{transform:translate(-7px,-4px)}}
@media(max-width:480px){.wp-dot{display:none}}
@media(prefers-reduced-motion:reduce){.wp-dot,.wp-chip-4,.wp-chip-5{animation:none}}

/* Custom-Dev-Block: Text + Code-Fenster */
.cms-dev-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px 48px}
.cms-dev-visual{position:relative}
.cms-code{background:#0f1b2d;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -28px rgba(8,17,38,.6);border:1px solid #1b2c45;animation:wdFloat 8s ease-in-out infinite}
.cms-code-bar{display:flex;align-items:center;gap:10px;padding:11px 15px;background:#13233a;border-bottom:1px solid #1b2c45}
.cms-code-bar .g{display:flex;gap:5px}
.cms-code-bar .g i{width:10px;height:10px;border-radius:50%}
.cms-code-bar .g i:nth-child(1){background:#ff5f57}.cms-code-bar .g i:nth-child(2){background:#febc2e}.cms-code-bar .g i:nth-child(3){background:#28c840}
.cms-code-file{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:#8aa0bd}
.cms-code-file svg{color:var(--wd-accent2,#06B6D4)}
.cms-code-body{margin:0;padding:20px 22px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.94rem;line-height:1.85;color:#c7d3e3;white-space:pre;overflow-x:auto}
.cms-code-body .ck{color:#c792ea}
.cms-code-body .cf{color:#82aaff}
.cms-code-body .cs{color:#c3e88d}
.cms-code-body .cc{color:#5c6b7a;font-style:italic}
.cms-code-body .ckw{color:#f78c6c}
.cms-code-body .ccaret{display:inline-block;width:7px;height:1.05em;background:var(--wd-accent2,#06B6D4);vertical-align:-2px;margin-left:2px;animation:cmsCaret 1.1s steps(2) infinite}
.cms-code-foot{display:flex;align-items:center;padding:11px 18px;background:#13233a;border-top:1px solid #1b2c45}
.cms-build{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:#7fd99a}
.cms-build .d{width:8px;height:8px;border-radius:50%;background:#28c840;box-shadow:0 0 0 0 rgba(40,200,64,.6);animation:cmsPulse 2.2s ease-out infinite}
@keyframes cmsPulse{0%{box-shadow:0 0 0 0 rgba(40,200,64,.55)}70%{box-shadow:0 0 0 9px rgba(40,200,64,0)}100%{box-shadow:0 0 0 0 rgba(40,200,64,0)}}
@media(max-width:880px){.cms-dev-grid{grid-template-columns:1fr;gap:26px}.cms-dev-visual{order:-1}}
@media(prefers-reduced-motion:reduce){.cms-code{animation:none}.cms-code-body .ccaret,.cms-build .d{animation:none}}

/* Eigene Kontakt-Animation (Redaktion/Schreiben) */
.cms-write-anim{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cms-write-canvas{position:absolute;inset:0;width:100%;height:100%}

/* ===================================================================
   Software-Seite (S18 C): Hero-Scramble, eigene Kontakt-Animation (Compile)
   =================================================================== */
.ed-scramble .sc-w{display:inline-block;white-space:nowrap}
.ed-scramble .sc-c{will-change:contents}
.ed-scramble .sc-c.scrambling{color:var(--wd-accent);opacity:.9;font-family:ui-monospace,Menlo,Consolas,monospace}
.ed-scramble .sc-c.ac.done{color:var(--wd-accent)}
@media(prefers-reduced-motion:reduce){.ed-scramble .sc-c{color:inherit}}

/* Eigene Kontakt-Animation Software: Code-/Compile-Strom */
.sw-compile-anim{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sw-compile-canvas{position:absolute;inset:0;width:100%;height:100%}

/* ===================================================================
   KI-Seite (S18 D): Flow-Logos in den Kreisen verkleinern (Ecken nicht
   mehr über den weißen Rand), Dots ganzflächig via .ki-flow-sec-Background
   =================================================================== */
.ki-flow .ki-logo{transform:scale(.8);transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){.ki-flow .ki-logo{transform:scale(.8)}}

/* ===================================================================
   Website-Sicherheit (S18): WP-AgentX Premium-Icons (Verlauf-Strich +
   Glow, edlere Tiles) und Hover-Animationen fuer Vorteils-Box,
   Side-Liste und Architektur-Karten
   =================================================================== */
/* Premium-Icons: Glow + edlere, einheitliche Tiles (Cyan-Verlauf) */
.wpx-feat-ico svg,.wpx-arch-ico svg,.wpx-side-list .i svg,.wpx-benefits .i svg{filter:drop-shadow(0 2px 5px rgba(59,130,246,.4));stroke-width:1.85}
.wpx-feat-ico,.wpx-side-list .i,.wpx-benefits .i,.wpx-arch-ico{background:linear-gradient(150deg,rgba(155,228,255,.18),rgba(59,130,246,.09));border-color:rgba(125,211,252,.3)}
/* Side-Liste als edle Karten (Basis + Hover) */
.wpx-side-list li{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:13px 15px}
/* Hover-Animationen (wie .wpx-feat) fuer Vorteils-Box, Side-Liste, Arch-Karten */
.wpx-benefits li,.wpx-side-list li,.wpx-arch-card{transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s,box-shadow .3s}
.wpx-benefits li:hover,.wpx-side-list li:hover,.wpx-arch-card:hover{transform:translateY(-5px);border-color:rgba(125,211,252,.5);background:rgba(125,211,252,.08);box-shadow:0 18px 40px -22px rgba(56,189,248,.6)}
.wpx-benefits .i,.wpx-side-list .i,.wpx-arch-ico{transition:background .3s,border-color .3s,box-shadow .3s}
.wpx-benefits li:hover .i,.wpx-side-list li:hover .i,.wpx-arch-card:hover .wpx-arch-ico{background:rgba(125,211,252,.22);border-color:rgba(125,211,252,.6);box-shadow:0 0 0 4px rgba(125,211,252,.12)}
.wpx-benefits li:hover .i svg,.wpx-side-list li:hover .i svg,.wpx-arch-card:hover .wpx-arch-ico svg{animation:wpxHover .85s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .wpx-benefits li:hover,.wpx-side-list li:hover,.wpx-arch-card:hover{transform:none}
  .wpx-benefits li:hover .i svg,.wpx-side-list li:hover .i svg,.wpx-arch-card:hover .wpx-arch-ico svg{animation:none}
}

/* ===================================================================
   Software-Seite (S18 C): Split-Bilder deutlich groesser (nur .sw-page)
   =================================================================== */
@media(min-width:920px){
  .sw-page .wd-split{grid-template-columns:1.34fr .86fr;gap:56px}
  .sw-page .wd-split.rev{grid-template-columns:.86fr 1.34fr}
}

/* Software-Seite: Mockup-Showcase (zwei Bilder mit Bildunterschrift) */
.sw-showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:34px}
@media(max-width:820px){.sw-showcase{grid-template-columns:1fr;gap:32px}}
.sw-shot{margin:0}
.sw-shot img{width:100%;height:auto;border-radius:16px;box-shadow:0 30px 60px -28px rgba(15,30,54,.42);display:block}
.sw-shot figcaption{margin-top:16px}
.sw-shot figcaption b{display:block;font-family:'Rubik',sans-serif;font-size:1.08rem;color:var(--ink);margin-bottom:4px}
.sw-shot figcaption span{color:var(--ink-mute);font-size:.96rem;line-height:1.55}

/* ===================================================================
   KI-Seite (S18 D): Token-Denken-Hero + animierte Neuronen-Linien-Übergänge
   =================================================================== */
/* D14: Token-Denken – Wort-Tokens blenden leuchtend ein, Caret laeuft mit */
.ki-token .kt-w{display:inline-block}
.ki-token .kt-w.kt-pending{opacity:0}
.ki-token .kt-w.kt-in{animation:ktIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes ktIn{0%{opacity:0;filter:blur(7px);transform:translateY(7px)}55%{opacity:1}100%{opacity:1;filter:blur(0);transform:translateY(0)}}
.ki-token .kt-w.ac{color:var(--wd-accent)}
.ki-token .kt-w.ac.kt-in{animation:ktInAc .62s cubic-bezier(.2,.8,.2,1) both}
@keyframes ktInAc{0%{opacity:0;filter:blur(9px) brightness(1.9);transform:translateY(7px)}55%{opacity:1;filter:blur(0) brightness(1.5)}100%{opacity:1;filter:blur(0) brightness(1);transform:translateY(0)}}
.ki-token .kt-caret{display:inline-block;width:.5ch;height:.9em;background:var(--wd-accent);margin-left:.05em;vertical-align:-.06em;border-radius:2px;box-shadow:0 0 12px var(--wd-accent),0 0 4px var(--wd-accent);animation:ktCaret 1.5s ease-in-out infinite}
.ki-token .kt-caret.kt-done{display:none}
@keyframes ktCaret{0%,100%{opacity:1}50%{opacity:.15}}
@media(prefers-reduced-motion:reduce){.ki-token .kt-w{opacity:1!important;filter:none!important;transform:none!important}.ki-token .kt-caret{display:none}}

/* K3: Eckiger Circuit-/Leiterbahn-Übergang zwischen Abschnitten (gezackt, hoch/runter) */
.ki-circuit{position:relative;height:44px;max-width:1180px;margin:6px auto;line-height:0}
.ki-circuit svg{width:100%;height:100%;display:block;overflow:visible}
.ki-circuit-trace{fill:none;stroke:color-mix(in srgb,var(--wd-accent) 55%,transparent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--wd-accent) 55%,transparent))}
.ki-circuit-nodes circle{fill:var(--wd-accent);filter:drop-shadow(0 0 5px var(--wd-accent))}
.ki-circuit-nodes circle:nth-child(1){animation:kiCircNode 2.6s ease-in-out infinite}
.ki-circuit-nodes circle:nth-child(2){animation:kiCircNode 3.1s ease-in-out infinite .4s}
.ki-circuit-nodes circle:nth-child(3){animation:kiCircNode 2.8s ease-in-out infinite .8s}
.ki-circuit-nodes circle:nth-child(4){animation:kiCircNode 3.3s ease-in-out infinite .2s}
.ki-circuit-nodes circle:nth-child(5){animation:kiCircNode 2.5s ease-in-out infinite .6s}
.ki-circuit-nodes circle:nth-child(6){animation:kiCircNode 3s ease-in-out infinite 1s}
@keyframes kiCircNode{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ki-circuit-nodes circle{animation:none}}

/* K4: KI-Kontakt – wachsende Gehirn-Animation (Canvas, ganzflächig) */
.ki-brain-anim{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ki-brain-canvas{position:absolute;inset:0;width:100%;height:100%}

/* ===================================================================
   Schnellkontakt-Overlay (E-Mail-Button der Kontakt-Schiene) + roter Puls
   =================================================================== */
.nk-modal{position:fixed;inset:0;z-index:1200;display:none}
.nk-modal.is-open{display:block}
body.nk-modal-lock{overflow:hidden}
.nk-modal-backdrop{position:absolute;inset:0;background:rgba(10,15,30,.55);backdrop-filter:blur(4px);animation:nkFade .25s ease}
.nk-modal-card{--wd-accent:#2C5282;--wd-accent2:#3B82F6;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 40px 100px -30px rgba(10,20,40,.6);padding:26px 26px 24px;animation:nkPop .32s cubic-bezier(.2,.9,.3,1)}
.nk-modal-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border:none;border-radius:10px;background:var(--bg-soft,#f1f4f8);color:var(--ink,#1a2233);display:grid;place-items:center;cursor:pointer;transition:background .2s}
.nk-modal-x:hover{background:#e5eaf1}
.nk-modal-head{margin:0 0 18px;padding-right:34px}
.nk-modal-kicker{display:inline-flex;align-items:center;gap:8px;font-family:'Rubik',sans-serif;font-size:.74rem;font-weight:700;color:var(--wd-accent,#2C5282);text-transform:uppercase;letter-spacing:.06em}
.nk-modal-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--wd-accent,#2C5282);box-shadow:0 0 0 0 color-mix(in srgb,var(--wd-accent,#2C5282) 55%,transparent);animation:nkDot 2.4s ease-out infinite}
.nk-modal-head h2{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(1.35rem,3.5vw,1.6rem);margin:9px 0 6px;color:var(--ink,#1a2233)}
.nk-modal-head p{font-size:.92rem;color:var(--ink-mute,#5b6678);line-height:1.55;margin:0}
.nk-modal-form{background:none;border:none;padding:0;box-shadow:none;border-radius:0}
@keyframes nkFade{from{opacity:0}to{opacity:1}}
@keyframes nkPop{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes nkDot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--wd-accent,#2C5282) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(max-width:560px){.nk-modal-card{width:calc(100vw - 18px);padding:20px 16px 18px;border-radius:16px;top:auto;bottom:0;left:0;transform:none;max-height:92dvh;border-bottom-left-radius:0;border-bottom-right-radius:0;animation:nkSheet .3s cubic-bezier(.2,.9,.3,1)}.nk-modal.is-open .nk-modal-card{transform:none}}
@keyframes nkSheet{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}
/* Ergebnis-Toast */
.nk-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:1300;max-width:min(420px,calc(100vw - 32px));padding:14px 18px;border-radius:12px;font-weight:600;font-size:.92rem;color:#fff;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);opacity:0;transition:opacity .35s,transform .35s}
.nk-toast.show{opacity:1;transform:translate(-50%,0)}
.nk-toast.ok{background:#1F8744}
.nk-toast.err{background:#DC2F2F}
/* Dezenter, leicht pulsierender roter Rand am E-Mail-Button */
.nk-crail-btn.c-mail{position:relative}
.nk-crail-btn.c-mail::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 16px 3px rgba(239,68,68,.6),0 0 0 0 rgba(239,68,68,.6);animation:nkMailPulse 2.3s ease-out infinite}
@keyframes nkMailPulse{0%{box-shadow:0 0 16px 3px rgba(239,68,68,.7),0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 12px 2px rgba(239,68,68,.4),0 0 0 11px rgba(239,68,68,0)}100%{box-shadow:0 0 16px 3px rgba(239,68,68,.7),0 0 0 0 rgba(239,68,68,0)}}
@media(prefers-reduced-motion:reduce){.nk-crail-btn.c-mail::after,.nk-modal-kicker .dot{animation:none}.nk-modal-backdrop,.nk-modal-card{animation:none}}

/* ===================================================================
   Drohnen-Hero: vollflächiges Hintergrundvideo (Cover) + Dunkel-Verlauf
   =================================================================== */
.dro-hero-full{position:relative;overflow:hidden;color:#fff;min-height:clamp(540px,74vh,780px);display:flex;align-items:center;padding:64px 0}
.dro-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0a1020}
.dro-hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.dro-hero-full .dro-video{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1s ease}
.dro-hero-full .dro-video.on{opacity:1}
.dro-hero-full .dro-video iframe{position:absolute;top:50%;left:50%;width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.dro-hero-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(7,11,22,.88) 0%,rgba(7,11,22,.62) 42%,rgba(7,11,22,.28) 74%,rgba(7,11,22,.38) 100%),linear-gradient(0deg,rgba(7,11,22,.55),transparent 45%)}
.dro-hero-full .wd-hero-inner{position:relative;z-index:3;display:block}
.dro-hero-full .wd-hero-text{max-width:880px;text-align:left;margin:0}
.dro-hero-full .wd-hero-text h1{color:#fff}
.dro-hero-full .wd-hero-text h1 span{color:var(--wd-accent,#06B6D4)}
.dro-hero-full .wd-hero-text p{color:rgba(255,255,255,.9)}
.dro-hero-full .wd-eyebrow{color:#fff}
.dro-hero-full .wd-checks span{color:rgba(255,255,255,.92)}
.dro-hero-full .wd-btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(4px)}
.dro-hero-full .wd-btn-ghost:hover{background:rgba(255,255,255,.22)}
.dro-hud--bg{position:absolute;top:20px;right:22px;z-index:3;display:flex;gap:10px;align-items:center}
@media(max-width:640px){.dro-hud--bg{top:14px;right:14px}.dro-hero-full{min-height:clamp(460px,80vh,640px)}}
@media(prefers-reduced-motion:reduce){.dro-hero-full .dro-video{display:none}}

/* =========================================================================
   Cookie-Consent-Banner (Eigenbau, DSGVO)
   Nutzt das nk-modal-Gerüst (Backdrop, Karte, Bottom-Sheet auf Mobil).
   Ablehnen und Akzeptieren bewusst gleichwertig (gleiche Größe/Gewichtung).
   ========================================================================= */
.nk-consent-card{width:min(580px,calc(100vw - 32px));display:flex;flex-direction:column;overflow:hidden}
/* Nur die Kategorien-Liste scrollt bei Platzmangel – Buttons und Rechtslinks bleiben immer sichtbar */
.nk-consent .nk-modal-head,.nk-consent .nkc-actions,.nk-consent .nkc-links{flex:none}
.nk-consent .nkc-cats{flex:1 1 auto;min-height:0;overflow:auto}
/* hidden-Attribut gewinnt gegen das display:grid der Basisklasse (erstes Erscheinen ohne X) */
.nk-consent .nk-modal-x[hidden]{display:none}
.nkc-cats{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.nkc-cat{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--bg-soft,#f1f4f8);border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px}
.nkc-cat-txt{display:grid;gap:2px}
.nkc-cat-txt .name{font-family:'Rubik',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink,#1a2233)}
.nkc-cat-txt .desc{font-size:.83rem;line-height:1.45;color:#4a5568}
.nkc-switch{position:relative;flex:none;width:46px;height:26px}
.nkc-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.nkc-switch input:disabled{cursor:default}
.nkc-switch i{display:block;width:100%;height:100%;border-radius:999px;background:#cbd5e1;position:relative;transition:background .2s}
.nkc-switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease-out}
.nkc-switch input:checked+i{background:#2563EB}
.nkc-switch input:checked+i::after{transform:translateX(20px)}
.nkc-switch input:disabled+i{background:#64748b}
.nkc-switch input:focus-visible+i{outline:2px solid #2563EB;outline-offset:2px}
.nkc-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.nkc-btn{appearance:none;border:0;border-radius:11px;padding:13px 14px;font-family:'Rubik',sans-serif;font-weight:700;font-size:.92rem;text-align:center;cursor:pointer;transition:filter .15s}
.nkc-btn:hover{filter:brightness(1.08)}
.nkc-btn:focus-visible{outline:2px solid #2563EB;outline-offset:2px}
.nkc-btn-deny{background:#3d4a5c;color:#fff}
.nkc-btn-accept{background:#2563EB;color:#fff}
.nkc-btn-save{background:#fff;color:var(--ink,#1a2233);box-shadow:inset 0 0 0 1.5px #cbd5e1}
.nkc-btn-save:hover{filter:none;background:#f1f4f8}
.nkc-links{margin:14px 0 0;font-size:.82rem;color:#4a5568;text-align:center}
.nkc-links a{color:var(--wd-accent,#2C5282);text-decoration:underline}
@media(max-width:560px){
  .nkc-actions{grid-template-columns:1fr;gap:8px}
  .nkc-cat-txt .desc{font-size:.8rem}
  .nk-consent-card{padding:18px 14px 14px}
  .nk-consent .nk-modal-head{margin-bottom:12px}
  .nk-consent .nk-modal-head p{font-size:.85rem}
  .nkc-cats{gap:8px;margin-bottom:12px}
  .nkc-cat{padding:10px 12px}
  .nkc-btn{padding:11px 12px}
  .nkc-links{margin-top:10px}
}

/* Drohnen-Hero: Aktivieren-Button, solange keine Einwilligung für externe Medien vorliegt */
.dro-consent{position:absolute;right:22px;bottom:20px;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(10,18,32,.62);color:#fff;font-family:'Rubik',sans-serif;font-weight:600;font-size:.85rem;cursor:pointer;transition:background .2s}
.dro-consent:hover{background:rgba(10,18,32,.82)}
.dro-consent:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:979px){.dro-consent{display:none}}

/* =========================================================================
   Marken-Unterseiten (S19): Logo-Kacheln als Links
   Hover-Optik kommt von den bestehenden Klassen-Regeln; hier nur
   Link-Resets + sichtbarer Tastatur-Fokus.
   ========================================================================= */
a.dr-brand,a.ki-tool,a.seo-tech-logo,a.wp-badge,a.wd-chip-logo{text-decoration:none;color:inherit}
a.dr-brand:focus-visible,a.ki-tool:focus-visible,a.seo-tech-logo:focus-visible,a.wp-badge:focus-visible,a.wd-chip-logo:focus-visible{outline:2px solid var(--wd-accent,#2C5282);outline-offset:3px}
a.wp-badge{cursor:pointer}

/* Reparatur-Konfigurator: Typenbezeichnung + Freitext-Validierung (S19) */
.rc-code{font-size:.78rem;font-weight:600;color:var(--ink-mute,#5b6678);white-space:nowrap}
.rc-item:hover .rc-code{color:inherit;opacity:.75}
.rc-model-err{margin:10px 0 0;padding:11px 14px;border-radius:10px;background:#FDECEC;border:1px solid #F5B5B5;color:#8A1F1F;font-size:.9rem;line-height:1.5}

/* =========================================================================
   Referenz-Galerien (Referenzen + Telematik): Raster + Lightbox (S19)
   Bilder im jeweiligen Ordner erscheinen automatisch; Klick öffnet die
   Lightbox zum Durchblättern (Pfeile, Tastatur, Wischen) statt eines Tabs.
   ========================================================================= */
.ref-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
@media(max-width:880px){.ref-gallery{grid-template-columns:1fr 1fr}}
.ref-gallery a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line,#e5e9f0);line-height:0;box-shadow:0 8px 24px rgba(20,40,80,.08);cursor:zoom-in}
.ref-gallery a:focus-visible{outline:2px solid var(--wd-accent,#2C5282);outline-offset:3px}
.ref-gallery img{width:100%;height:240px;object-fit:cover;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ref-gallery a:hover img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.ref-gallery img{transition:none}.ref-gallery a:hover img{transform:none}}

.nk-lb{position:fixed;inset:0;z-index:1250;display:none;align-items:center;justify-content:center;background:rgba(7,13,24,.93)}
.nk-lb.open{display:flex;animation:nkLbIn .22s ease-out}
@keyframes nkLbIn{from{opacity:0}}
.nk-lb-img{max-width:min(92vw,1200px);max-height:86vh;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);user-select:none}
.nk-lb button{position:absolute;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s}
.nk-lb button:hover{background:rgba(255,255,255,.24)}
.nk-lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nk-lb-close{top:18px;right:18px}
.nk-lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.nk-lb-next{right:14px;top:50%;transform:translateY(-50%)}
.nk-lb-count{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:rgba(255,255,255,.85);font-family:'Rubik',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.5px}
.nk-lb.single .nk-lb-prev,.nk-lb.single .nk-lb-next,.nk-lb.single .nk-lb-count{display:none}
@media(max-width:640px){.nk-lb-prev{left:6px}.nk-lb-next{right:6px}.nk-lb-img{max-width:96vw}}
@media(prefers-reduced-motion:reduce){.nk-lb.open{animation:none}}


/* =========================================================================
   KI-Websites (page-ki-webseiten) - Abo-Pakete, Vergleich, Branchen-Links
   ========================================================================= */
.kiw-compare-wrap{overflow-x:auto;border:1px solid var(--bg-line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.kiw-compare{width:100%;min-width:560px;border-collapse:collapse;font-size:.95rem}
.kiw-compare th{font-family:'Rubik',sans-serif;font-weight:700;text-align:left;padding:16px 20px;border-bottom:2px solid var(--bg-line)}
.kiw-compare td{padding:14px 20px;border-bottom:1px solid var(--bg-line);vertical-align:top}
.kiw-compare tbody tr:last-child td{border-bottom:none}
.kiw-compare td:first-child{color:var(--ink-2);width:44%}
.kiw-compare td:last-child{font-weight:600}
.kiw-compare th:last-child{color:var(--wd-accent)}
.kiw-compare th:last-child,.kiw-compare td:last-child{background:rgba(124,58,237,.05)}

.kiw-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:18px}
.kiw-plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--bg-line);border-radius:18px;padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1)}
.kiw-plan:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,40,80,.12)}
.kiw-plan--top{border:2px solid var(--wd-accent)}
.kiw-plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--wd-accent);color:#fff;font-family:'Rubik',sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.3px;padding:4px 14px;border-radius:999px;white-space:nowrap}
.kiw-plan h3{font-size:1.15rem;margin:0 0 10px}
.kiw-plan-price{font-family:'Rubik',sans-serif;font-size:1.05rem;color:var(--ink-2);margin-bottom:10px}
.kiw-plan-price b{font-size:2rem;font-weight:800;color:var(--wd-accent);letter-spacing:-.01em}
.kiw-plan-old{font-family:'Rubik',sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink-mute);text-decoration:line-through;text-decoration-thickness:2px;opacity:.7;margin-right:2px}
.kiw-plan-for{font-size:.92rem;color:var(--ink-2);margin:0 0 16px}
.kiw-plan ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;flex:1;align-content:start}
.kiw-plan li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;line-height:1.45}
.kiw-plan li .ico{color:var(--wd-accent);flex:none;margin-top:2px;display:inline-flex}
.kiw-plan .wd-btn{justify-content:center}
.kiw-addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:16px}
.kiw-addon{background:#fff;border:1px dashed var(--bg-line);border-radius:16px;padding:20px 22px}
.kiw-addon h4{margin:0 0 6px;font-size:1rem}
.kiw-addon p{margin:0 0 10px;font-size:.9rem;color:var(--ink-2)}
.kiw-addon-price{font-family:'Rubik',sans-serif;color:var(--ink-2)}
.kiw-addon-price b{font-size:1.3rem;font-weight:800;color:var(--wd-accent)}
.kiw-plans-note{font-size:.85rem;color:var(--ink-2);text-align:center;max-width:70ch;margin:0 auto}
.lp-long a.kiw-tile-link{display:block;text-decoration:none}
@media(prefers-reduced-motion:reduce){.kiw-plan{transition:none}.kiw-plan:hover{transform:none}}

/* =========================================================================
   Startseite - Deutschlandweit-Block (template-parts/home/national.php)
   ========================================================================= */
.home-national{position:relative;overflow:hidden;background:linear-gradient(135deg,#150b2e 0%,#1e1247 55%,#2b1a63 100%);padding:84px 0}
.home-national::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 20%,rgba(167,139,250,.16),transparent 70%),radial-gradient(500px 260px at 10% 90%,rgba(124,58,237,.18),transparent 70%);pointer-events:none}
.home-national-inner{position:relative;max-width:880px;text-align:center;margin:0 auto}
.home-national .eyebrow-nat{display:inline-flex;align-items:center;gap:8px;font-family:'Rubik',sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.4px;color:#C4B5FD;margin-bottom:16px}
.home-national .eyebrow-nat .dot{width:8px;height:8px;border-radius:50%;background:#A78BFA;animation:kiwDot 2.4s ease-out infinite}
@keyframes kiwDot{0%,100%{box-shadow:0 0 0 0 rgba(167,139,250,.5)}50%{box-shadow:0 0 0 8px rgba(167,139,250,0)}}
.home-national h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.2;margin:0 0 18px}
.home-national p{color:rgba(255,255,255,.82);font-size:1.05rem;line-height:1.65;max-width:72ch;margin:0 auto 26px}
.home-national-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:30px}
.home-national-chips span{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);color:#EDE9FE;border-radius:999px;padding:8px 16px;font-size:.88rem;font-weight:600}
@media(prefers-reduced-motion:reduce){.home-national .eyebrow-nat .dot{animation:none}}

/* =========================================================================
   Aktuelles/News (akt-) – KI-Beiträge: Übersicht, Karten, Einzelbeitrag
   (home.php, page-aktuelles.php, single.php, template-parts/home/news.php,
   Kontakt-Shortcode [nkcap_contact] in inc/news.php)
   ========================================================================= */
.akt-sec{padding-top:64px}
.akt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
@media(max-width:420px){.akt-grid{grid-template-columns:minmax(0,1fr)}}
.akt-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--bg-line);border-radius:16px;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s}
.akt-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -18px color-mix(in srgb,var(--nc,#1F6FEB) 45%,rgba(15,30,54,.25));border-color:color-mix(in srgb,var(--nc,#1F6FEB) 35%,transparent)}
.akt-card-link{display:flex;flex-direction:column;height:100%;color:inherit}
.akt-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft);display:grid;place-items:center;color:var(--ink-mute)}
.akt-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.akt-card:hover .akt-card-media img{transform:scale(1.045)}
.akt-cat{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.94);color:var(--nc,#1F6FEB);border:1px solid color-mix(in srgb,var(--nc,#1F6FEB) 25%,transparent);padding:4px 11px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.akt-card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.akt-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.8rem;font-weight:600;color:var(--ink-mute)}
.akt-card-body .akt-meta{margin-bottom:10px}
.akt-meta-dot{width:4px;height:4px;border-radius:50%;background:var(--ink-mute);opacity:.55}
.akt-card-body h3{font-size:1.12rem;line-height:1.35;margin:0 0 10px;color:var(--ink)}
.akt-card-body h2{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.22;margin:0 0 12px;color:var(--ink)}
.akt-card-body p{margin:0 0 16px;color:var(--ink-2);line-height:1.62;font-size:.95rem}
.akt-more{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:var(--nc,#1F6FEB)}
.akt-more svg{transition:transform .2s ease}
.akt-card:hover .akt-more svg{transform:translateX(3px)}
/* Bühne: neuester Beitrag, volle Breite über dem Raster */
.akt-card--feat{margin-bottom:24px}
.akt-card--feat .akt-card-link{flex-direction:row}
.akt-card--feat .akt-card-media{flex:0 0 52%;aspect-ratio:auto;min-height:320px}
.akt-card--feat .akt-card-body{flex:1;justify-content:center;padding:34px 38px}
@media(max-width:860px){.akt-card--feat .akt-card-link{flex-direction:column}.akt-card--feat .akt-card-media{flex:none;aspect-ratio:16/9;min-height:0}.akt-card--feat .akt-card-body{padding:24px 26px}}
/* Themen-Filter */
.akt-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 34px}
.akt-chip{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;border:1px solid var(--bg-line);background:#fff;color:var(--ink-2);font-size:.88rem;font-weight:600;transition:border-color .2s,background .2s,color .2s,transform .2s}
.akt-chip:hover{border-color:color-mix(in srgb,var(--nc,#1F6FEB) 40%,transparent);color:var(--nc,#1F6FEB);transform:translateY(-2px)}
.akt-chip.is-active{background:color-mix(in srgb,var(--nc,#1F6FEB) 10%,#fff);border-color:color-mix(in srgb,var(--nc,#1F6FEB) 45%,transparent);color:var(--nc,#1F6FEB)}
/* Leerzustand */
.akt-empty{max-width:560px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--bg-line);border-radius:18px;padding:56px 34px;box-shadow:var(--shadow-sm);color:var(--ink-mute)}
.akt-empty svg{color:var(--wd-accent);margin-bottom:18px}
.akt-empty h2{font-size:1.35rem;color:var(--ink);margin:0 0 10px}
.akt-empty p{margin:0 0 24px;line-height:1.65}
/* Einzelbeitrag */
.akt-head{position:relative;overflow:hidden;background:linear-gradient(180deg,#F5F8FD 0%,#E7F0FB 100%);border-bottom:1px solid var(--bg-line);padding:52px 0 92px}
.akt-head-inner{position:relative;max-width:840px;margin:0 auto;text-align:center}
.akt-back{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:var(--wd-accent);margin-bottom:22px}
.akt-back svg{transition:transform .2s ease}
.akt-back:hover svg{transform:translateX(-3px)}
.akt-head .akt-meta{justify-content:center;margin-bottom:16px}
.akt-head .akt-cat{position:static}
.akt-head h1{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 16px;color:var(--ink)}
.akt-lead{font-size:1.1rem;line-height:1.7;color:var(--ink-mute);max-width:680px;margin:0 auto}
.akt-body{padding-bottom:72px}
.akt-body--flat{padding-top:44px}
.akt-thumb{margin:-52px 0 36px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.akt-thumb img{width:100%;height:auto;display:block}
.akt-entry-footer{margin-top:36px}
/* CTA-Button aus dem Content Autopilot im Beitragsinhalt: Link-Farbregeln
   der Lese-Spalte (.nk-entry-content a) nicht auf Buttons anwenden */
.nk-entry-content a.wd-btn{color:#fff;text-decoration:none}
.nk-entry-content a.wd-btn:hover{color:#fff}
/* Kontakt-Box im Beitrag ([nkcap_contact]) */
.akt-contact{background:#fff;border:1px solid var(--bg-line);border-radius:18px;padding:30px 28px;margin:40px 0 8px;box-shadow:var(--shadow-sm)}
.akt-contact-head h3{margin:0 0 8px;font-size:1.3rem}
.akt-contact-head p{margin:0 0 22px;color:var(--ink-mute);font-size:.98rem;line-height:1.6}
.akt-contact .contact-form{background:transparent;border:0;box-shadow:none;padding:0;margin:0;max-width:none}
/* Startseiten-Teaser */
.akt-home-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;text-align:left;max-width:100%}
.akt-home-all{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--accent);font-size:.95rem}
.akt-home-all svg{transition:transform .2s ease}
.akt-home-all:hover svg{transform:translateX(3px)}
.akt-grid--home{margin-top:34px}
@media(prefers-reduced-motion:reduce){.akt-card,.akt-card-media img,.akt-more svg,.akt-chip,.akt-back svg,.akt-home-all svg{transition:none}}
/* Mobile Lesbarkeit: Überschriften deutlich größer, Fließtext größer.
   Gilt nur für die News-Ansichten (akt-), Desktop unverändert. */
@media(max-width:640px){
  .akt-page .hs-intro h1{font-size:3rem;line-height:1.1}
  .akt-page .hs-eyebrow{font-size:.82rem}
  .akt-page .hs-intro p{font-size:1.22rem;line-height:1.7}
  .akt-page .wd-head h2{font-size:2.5rem}
  .akt-page .wd-head p{font-size:1.18rem}
  .akt-card-body h2{font-size:2rem;line-height:1.2}
  .akt-card-body h3{font-size:1.62rem;line-height:1.28}
  .akt-card-body p{font-size:1.12rem;line-height:1.65}
  .akt-meta{font-size:.95rem}
  .akt-cat{font-size:.8rem}
  .akt-more{font-size:1.05rem}
  .akt-chip{font-size:1rem;padding:10px 18px}
  .akt-empty h2{font-size:1.7rem}
  .akt-empty p{font-size:1.12rem}
  .akt-head h1{font-size:2.7rem;line-height:1.12}
  .akt-head .akt-meta{font-size:.98rem}
  .akt-back{font-size:1.02rem}
  .akt-lead{font-size:1.22rem}
  .akt-content{font-size:1.18rem;line-height:1.75}
  .akt-content h2{font-size:1.9rem}
  .akt-content h3{font-size:1.6rem}
  .akt-contact-head h3{font-size:1.6rem}
  .akt-contact-head p{font-size:1.1rem}
  .akt-single .nk-tags a{font-size:.95rem}
  .akt-home .section-head h2{font-size:2.2rem}
  .akt-home-all{font-size:1.05rem}
}

/* =========================================================================
   Schnellkontakt-Modal (#nk-mailmodal) mobil: wirklich mittig, kompakt,
   passt komplett auf den Bildschirm (kein Scrollen noetig). Desktop und
   Consent-Banner (.nk-consent) bleiben unveraendert.
   ========================================================================= */
@media(max-width:600px){
  #nk-mailmodal .nk-modal-card{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);width:calc(100vw - 32px);max-width:420px;max-height:calc(100dvh - 32px);border-radius:16px;padding:18px 16px 16px;animation:nkPop .32s cubic-bezier(.2,.9,.3,1)}
  #nk-mailmodal .nk-modal-head{margin-bottom:12px;padding-right:40px}
  #nk-mailmodal .nk-modal-head h2{font-size:1.2rem;margin:6px 0 0}
  #nk-mailmodal .nk-modal-head p{display:none}
  #nk-mailmodal .nk-modal-x{top:10px;right:10px;width:34px;height:34px}
  /* Felder paarweise nebeneinander statt gestapelt – halbiert die Hoehe */
  #nk-mailmodal .form-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
  #nk-mailmodal .form-row ~ .form-row{grid-template-columns:1fr 1fr}
  #nk-mailmodal .field{min-width:0}
  #nk-mailmodal .field label{margin-bottom:5px;font-size:.74rem}
  /* 16px Eingabeschrift verhindert den automatischen iOS-Zoom beim Fokus;
     width/min-width: Inputs duerfen in den schmalen Grid-Spalten schrumpfen */
  #nk-mailmodal .field input,#nk-mailmodal .field textarea{padding:10px 12px;font-size:16px;width:100%;min-width:0}
  #nk-mailmodal textarea{min-height:64px;height:64px}
  #nk-mailmodal .consent{margin-bottom:12px;font-size:.76rem;line-height:1.45}
  #nk-mailmodal .wd-btn{padding:12px 20px;font-size:.95rem}
}