/* DEF.S3C — Design System
   Basis: CrowdStrike-Layoutmuster, Signalfarbe #FF5500
   Schriften: Outfit (Display) + Public Sans (Fliesstext), lokal eingebunden
   Diese Datei wird vom Theme geladen und vom Plugin mitbenutzt. */
:root{
  --o:#FF5500;          /* an der Stelle von CrowdStrike-Rot #FC0000 */
  --o-dk:#E04A00;
  --o-lt:#FFF1E9;
  --orange-bed:rgba(255,85,0,.10);
  /* Marken-Orange erreicht als KLEINE Schrift auf Weiss nur 3.21:1 und faellt
     damit unter den AA-Grenzwert. Fuer Textelemente auf hellem Grund gibt es
     deshalb eine abgedunkelte Variante (5.10:1 auf Weiss, 4.63:1 auf Grau).
     Flaechen (Buttons, Badges, Balken) behalten das reine Marken-Orange. */
  --o-text:#C24400;
  --ink:#111111;        /* CrowdStrike nutzt #292929 */
  --ink2:#3D3D3D;
  --body:#565656;
  --mut:#7A7A7A;
  --wht:#FFFFFF;
  --gry:#F4F4F4;
  --gry2:#EAEAEA;
  --bd:#E2E2E2;
  --dark:#0A0A0A;
  --dark2:#181818;
  --dark-bd:#2E2E2E;
  --fd:"Outfit","Helvetica Neue",Arial,sans-serif;
  --fb:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --w:1240px;
  --r:8px;
  --rshot:14px;      /* einheitlicher Radius fuer alle Bildschirmaufnahmen */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wht);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
::selection{background:var(--o);color:#fff}
:focus-visible{outline:2px solid var(--o);outline-offset:3px}
.w{max-width:var(--w);margin:0 auto;padding:0 32px}

h1,h2,h3,h4,h5{font-family:var(--fd);margin:0;letter-spacing:-.022em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.35rem,4.9vw,3.85rem);font-weight:700;line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,3.5vw,2.85rem);font-weight:700;letter-spacing:-.028em}
h3{font-size:1.35rem;font-weight:600}
p{margin:0 0 16px}
.lead{font-size:19px;color:var(--body);line-height:1.62;max-width:60ch;font-weight:400}
.kicker{font-family:var(--fd);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--o);margin-bottom:18px;display:block}
.kicker.g{color:var(--mut)}
.o{color:var(--o)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:600;font-size:16px;padding:15px 28px;border-radius:4px;border:1.5px solid transparent;cursor:pointer;transition:.2s ease;white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-p{background:var(--o);color:#fff;border-color:var(--o)}
.btn-p:hover{background:var(--o-dk);border-color:var(--o-dk)}
.btn-o{background:transparent;color:var(--ink);border-color:#C9C9C9}
.btn-o:hover{border-color:var(--ink);background:#FAFAFA}
.btn-w{background:#fff;color:var(--ink);border-color:#fff}
.btn-w:hover{background:#F0F0F0;border-color:#F0F0F0}
.btn-dk{background:transparent;color:#fff;border-color:#4A4A4A}
.btn-dk:hover{border-color:#fff}
.btn-sm{padding:11px 20px;font-size:15px}
.lnk{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;font-size:15.5px;color:var(--o)}
.lnk svg{width:14px;height:14px;transition:transform .2s}
.lnk:hover svg{transform:translateX(4px)}
.lnk.d{color:var(--ink)}
.lnk.d svg{color:var(--o)}

/* ---------- announcement ---------- */

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:300;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
header .w{display:flex;align-items:center;height:76px;gap:26px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:800;font-size:23px;letter-spacing:-.045em;color:var(--ink)}
.logo .mark{width:26px;height:26px;color:var(--o);flex:none}
/* In der Kopfzeile stand der Schriftzug rund anderthalbmal so gross wie die Navigation. */
header .logo{font-size:19px;gap:8px}
header .logo .mark,header .logo img.mark{width:22px}
/* Ein im Customizer hinterlegtes Logo traegt die Klasse custom-logo, nicht .mark -
   ohne diese Regel wuerde es unskaliert in Originalgroesse ausgegeben. */
.logo img{max-width:170px;height:auto;display:block}
header .logo img{max-height:34px;width:auto}
/* Sicherheitsnetz: ein Customizer-Logo ist oft quadratisch und mehrere tausend
   Pixel gross. Diese Regel greift auch dann, wenn es ausserhalb von .logo landet. */
header img.custom-logo,header .custom-logo-link img{max-height:34px;width:auto;max-width:170px;display:block}
.fb img.custom-logo{max-height:40px;width:auto}
nav.main{display:flex;align-items:center;height:100%;flex:1;margin-left:14px}
nav.main>.it{position:relative;height:100%;display:flex;align-items:center}
nav.main>.it>a{display:flex;align-items:center;gap:5px;padding:0 13px;height:100%;font-family:var(--fd);font-weight:500;font-size:14.5px;color:var(--ink2);position:relative}
nav.main>.it>a::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .22s}
nav.main>.it:hover>a{color:var(--ink)}
nav.main>.it:hover>a::after{transform:scaleX(1)}
nav.main .cv{width:10px;height:10px;color:var(--mut)}
.navr{display:flex;align-items:center;gap:18px;margin-left:auto}
.navr-icons{display:flex;align-items:center;gap:6px}
.navr-icons a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--ink2);transition:background .16s,color .16s}
.navr-icons a:hover{background:var(--gry);color:var(--o)}
.navr-icons svg{width:18px;height:18px}
.navr .li{font-family:var(--fd);font-weight:500;font-size:15.5px;color:var(--ink2);display:flex;align-items:center;gap:7px}
.navr .li:hover{color:var(--o)}
.navr .li svg{width:15px;height:15px}

.dd{position:absolute;top:76px;left:50%;transform:translateX(-50%) translateY(-6px);width:min(1120px,calc(100vw - 48px));background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.13);opacity:0;visibility:hidden;transition:.2s;overflow:hidden}
nav.main>.it:hover .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd-g{display:grid;grid-template-columns:repeat(3,1fr)}
.dd-c{padding:26px 26px 22px;border-right:1px solid var(--bd)}
.dd-c:last-child{border-right:0}
.dd-c h6{font-family:var(--fd);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 14px}
.dd-i{display:flex;gap:12px;padding:10px 12px;margin:0 -12px;border-radius:6px;transition:background .16s}
.dd-i:hover{background:var(--gry)}
.dd-i .ic{width:20px;height:20px;flex:none;color:var(--o);margin-top:3px}
.dd-i b{display:block;font-family:var(--fd);font-weight:600;font-size:15.5px;color:var(--ink)}
.dd-i span{display:block;font-size:13.5px;color:var(--mut);line-height:1.45;margin-top:1px}
.dd-f{background:var(--gry);border-top:1px solid var(--bd);padding:15px 26px;display:flex;justify-content:space-between;align-items:center;font-size:14.5px;color:var(--body);gap:20px;flex-wrap:wrap}
.dd.nr{width:330px;left:0;transform:translateY(-6px)}
nav.main>.it:hover .dd.nr{transform:translateY(0)}
.dd.nr .dd-g{grid-template-columns:1fr}
.dd.nr .dd-c{border:0}
.burger{display:none;background:none;border:0;color:var(--ink);padding:6px;cursor:pointer}
.burger svg{width:27px;height:27px}

/* ---------- sections ---------- */
section{padding:104px 0}
.g{background:var(--gry)}
.sechead{max-width:780px;margin-bottom:56px}
.sechead.ctr{margin-left:auto;margin-right:auto;text-align:center}
.sechead p{margin:20px 0 0}

/* ---------- hero ---------- */
.hero{padding:88px 0 0;background:linear-gradient(180deg,#fff 0%,#FCFCFC 60%,var(--gry) 100%)}
.hero .top{max-width:900px}
.hero h1{margin-bottom:24px}
.hero .lead{font-size:20.5px;max-width:58ch}
.hcta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;align-items:center}
.hnote{font-size:14.5px;color:var(--mut);margin-left:4px}
.trust{display:flex;gap:0;margin-top:52px;border-top:1px solid var(--bd);padding-top:22px;flex-wrap:wrap}
.trust span{font-size:13.5px;color:var(--mut);padding-right:22px;margin-right:22px;border-right:1px solid var(--bd)}
.trust span:last-child{border-right:0}

/* ---------- attack path diagram ---------- */
.diag{margin-top:64px;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.07);overflow:hidden;transform:translateY(52px)}
.diag-h{padding:20px 26px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.diag-h b{font-family:var(--fd);font-size:16.5px;font-weight:600}
.diag-h span{font-size:13.5px;color:var(--mut)}
.diag-b{padding:34px 26px;overflow-x:auto}
.lane{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;min-width:820px;margin-bottom:26px}
.lane:last-of-type{margin-bottom:0}
.lane-l{font-family:var(--fd);font-weight:600;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:9px}
.lane-l svg{width:18px;height:18px;color:var(--o)}
.lane-l em{display:block;font-style:normal;font-size:12px;color:var(--mut);font-weight:400}
.chain{display:flex;align-items:center;gap:0}
.node{background:#fff;border:1px solid var(--bd);border-radius:6px;padding:11px 15px;font-size:13.5px;color:var(--ink2);white-space:nowrap;transition:.22s;font-weight:500}
.node:hover{border-color:var(--o);color:var(--o);box-shadow:0 4px 14px rgba(255,85,0,.14)}
.arw{flex:1;height:1px;background:var(--gry2);position:relative;min-width:26px}
.arw::after{content:"";position:absolute;right:0;top:-3px;border-left:6px solid var(--gry2);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.node.end{background:var(--o);border-color:var(--o);color:#fff;font-weight:600}
.node.end:hover{color:#fff;box-shadow:0 6px 20px rgba(255,85,0,.32)}
.diag-f{background:var(--gry);border-top:1px solid var(--bd);padding:16px 26px;font-size:14px;color:var(--body);display:flex;gap:10px;align-items:center}
.diag-f svg{width:17px;height:17px;color:var(--o);flex:none}

/* ---------- metrics ---------- */
.mets{background:var(--gry);padding-top:126px}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.met b{display:block;font-family:var(--fd);font-size:clamp(2.6rem,4.6vw,3.7rem);font-weight:700;color:var(--o);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.met span{display:block;font-size:15.5px;color:var(--body);margin-top:14px;line-height:1.5;padding-top:14px;border-top:1px solid var(--gry2)}

/* ---------- generic cards ---------- */
.cards{display:grid;gap:22px}
.c3{grid-template-columns:repeat(3,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:30px 28px;transition:.24s ease;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card:hover{box-shadow:0 14px 36px rgba(0,0,0,.09);transform:translateY(-4px);border-color:#D2D2D2}
.card .ci{width:30px;height:30px;color:var(--o);margin-bottom:20px}
.card h3{margin-bottom:11px}
.card p{color:var(--body);font-size:15.5px;line-height:1.6;margin-bottom:18px}
.card .lnk{margin-top:auto}
.caps{font-size:14px;color:var(--mut);line-height:1.75;margin-bottom:20px}
.card .num{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--o);letter-spacing:.1em;margin-bottom:14px}

/* ---------- platform split ---------- */
.split{display:grid;grid-template-columns:1fr 1.12fr;gap:64px;align-items:center}
.plist{margin-top:32px}
.pl{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--bd)}
.pl:last-child{border-bottom:1px solid var(--bd)}
.pl svg{width:22px;height:22px;color:var(--o);flex:none;margin-top:3px}
.pl b{display:block;font-family:var(--fd);font-size:17px;font-weight:600;margin-bottom:4px}
.pl p{margin:0;font-size:15px;color:var(--body);line-height:1.55}

/* portal UI (light) */
.ui{background:#fff;border:1px solid var(--bd);border-radius:var(--rshot);box-shadow:0 20px 54px rgba(0,0,0,.10);overflow:hidden}
.ui-b{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--gry);border-bottom:1px solid var(--bd)}
.ui-b i{width:9px;height:9px;border-radius:50%;background:#D6D6D6;display:block}
.ui-b b{font-size:12.5px;color:var(--mut);font-weight:500;margin-left:8px;font-family:var(--fb)}
.ui-b .lv{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--fd);font-size:11.5px;font-weight:700;color:var(--o);letter-spacing:.08em}
.ui-b .lv em{width:7px;height:7px;border-radius:50%;background:var(--o);display:block;animation:pl 1.9s infinite}
@keyframes pl{0%,100%{box-shadow:0 0 0 0 rgba(255,85,0,.55)}70%{box-shadow:0 0 0 7px rgba(255,85,0,0)}}
.ui-h{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--bd);gap:16px}
.ui-h b{font-family:var(--fd);font-size:17px;font-weight:600;display:block}
.ui-h span{font-size:13px;color:var(--mut)}
.ui-h .sc{text-align:right;flex:none}
.ui-h .sc b{font-size:27px;color:#D92B20;font-weight:700;line-height:1}
.ui-h .sc span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.ur{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid #F0F0F0;transition:background .18s}
.ur:hover{background:#FAFAFA}
.ur .ui-id{font-size:12.5px;color:var(--mut);width:44px;flex:none;font-variant-numeric:tabular-nums}
.ur .ut{flex:1;min-width:0}
.ur .ut b{display:block;font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ur .ut span{font-size:12px;color:var(--mut)}
.pill{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 10px;border-radius:20px;flex:none}
.pc{background:#FDECEA;color:#C22B21}
.ph{background:var(--o-lt);color:#C24400}
.pm{background:#FFF6E0;color:#96650A}
.po{background:#E9F7F0;color:#1C7A56}
.ui-f{padding:14px 20px;background:var(--gry);border-top:1px solid var(--bd);display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:var(--mut);flex-wrap:wrap}

/* ---------- dark band ---------- */
.dark{background:var(--dark);color:#fff}
.dark h2,.dark h3{color:#fff}
.dark .lead,.dark p{color:#B8B8B8}
.dark .kicker.g{color:#8A8A8A}
.dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.dcard{background:var(--dark2);border:1px solid var(--dark-bd);border-radius:var(--r);padding:28px 26px;transition:.24s}
.dcard:hover{border-color:#4A4A4A;transform:translateY(-4px)}
.dcard b{display:block;font-family:var(--fd);font-size:17.5px;font-weight:600;color:#fff;margin-bottom:10px}
.dcard p{margin:0;font-size:15px;line-height:1.6;color:#A8A8A8}
.dcard .q{font-family:var(--fd);font-size:2.6rem;font-weight:700;color:var(--o);line-height:1;margin-bottom:16px;letter-spacing:-.04em}

/* ---------- standards ---------- */
.std{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stdc{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:26px 24px;text-align:center;transition:.24s}
.stdc:hover{border-color:var(--o);box-shadow:0 10px 28px rgba(255,85,0,.10)}
.stdc b{display:block;font-family:var(--fd);font-size:19px;font-weight:700;color:var(--ink);margin-bottom:8px}
.stdc span{font-size:14px;color:var(--body);line-height:1.5;display:block}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stp{padding:0 26px 0 0;position:relative}
.stp .bar{height:4px;background:var(--gry2);border-radius:2px;margin-bottom:22px;overflow:hidden}
.stp .bar i{display:block;height:100%;width:0;background:var(--o);border-radius:2px;transition:width 1s ease}
.stp.in .bar i{width:100%}
.stp .n{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--o);letter-spacing:.12em;margin-bottom:10px}
.stp h4{font-family:var(--fd);font-size:19px;font-weight:600;margin-bottom:10px}
.stp p{font-size:15px;color:var(--body);line-height:1.58;margin:0}

/* ---------- emergency ---------- */
.emg{background:#fff;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.emg .w{display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:center;padding-top:76px;padding-bottom:76px}
.emg .kicker{color:#D92B20}
.emg .box{background:var(--gry);border:1px solid var(--bd);border-radius:var(--r);padding:28px}
.emg .box .tel{font-family:var(--fd);font-size:26px;font-weight:700;color:var(--ink);display:block;margin-bottom:6px;letter-spacing:-.02em}
.emg .box small{font-size:13.5px;color:var(--mut);display:block;margin-bottom:20px}
.emg .box .btn{width:100%;justify-content:center;margin-bottom:10px}
.tl{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;border-top:1px solid var(--bd);padding-top:20px;gap:16px}
.tl b{display:block;font-family:var(--fd);font-size:16px;font-weight:700;color:#D92B20}
.tl span{display:block;font-size:13.5px;color:var(--body);margin-top:5px;line-height:1.45}
.disc{background:var(--gry);border-left:3px solid var(--mut);border-radius:0 6px 6px 0;padding:16px 20px;margin-top:28px;font-size:14.5px;color:var(--body);line-height:1.6}
.disc b{color:var(--ink)}

/* ---------- cta ---------- */
.cta{background:var(--dark);color:#fff;padding:96px 0}
.cta .w{display:grid;grid-template-columns:1fr 1.05fr;gap:66px;align-items:start}
.cta h2{color:#fff}
.cta .lead{color:#B8B8B8}
.tick{list-style:none;padding:0;margin:30px 0 0}
.tick li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #242424;font-size:15.5px;color:#C8C8C8}
.tick svg{width:16px;height:16px;color:var(--o);flex:none;margin-top:3px}
.dir{margin-top:28px;font-size:15.5px;color:#B8B8B8}
.dir a{color:#fff;border-bottom:1px solid #444}
.dir a:hover{color:var(--o);border-color:var(--o)}
form{background:#fff;border-radius:10px;padding:34px 32px}
form h4{font-family:var(--fd);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:6px}
form .sub{font-size:14.5px;color:var(--mut);margin-bottom:24px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fr.o1{grid-template-columns:1fr}
.fld label{display:block;font-family:var(--fd);font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;background:#fff;border:1px solid #CFCFCF;border-radius:5px;color:var(--ink);font-family:var(--fb);font-size:15.5px;padding:12px 13px;transition:.18s}
.fld textarea{resize:vertical;min-height:88px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--o);box-shadow:0 0 0 3px rgba(255,85,0,.13);outline:none}
.fld input::placeholder,.fld textarea::placeholder{color:#A6A6A6}
.chk{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:14px;color:var(--body);line-height:1.5}
.chk input{width:17px;height:17px;accent-color:var(--o);margin-top:2px;flex:none}
form .btn{width:100%;justify-content:center;margin-top:8px}
.fnote{font-size:13px;color:var(--mut);text-align:center;margin:14px 0 0;line-height:1.55}

/* ---------- footer ---------- */
footer{background:#0A0A0A;color:#fff;padding:72px 0 0}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:52px;border-bottom:1px solid #232323}
.fc h6{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A;margin:0 0 16px}
.fc a{display:block;font-size:15px;color:#C0C0C0;padding:6px 0;transition:.18s}
.fc a:hover{color:var(--o)}
.fb .logo{color:#fff}
.fb .claim{font-family:var(--fd);font-size:17px;font-weight:600;color:#fff;margin:18px 0 12px;line-height:1.35}
.fb p{font-size:14.5px;color:#9A9A9A;max-width:34ch;line-height:1.6}
.soc{display:flex;gap:10px;margin-top:20px}
.soc a{width:38px;height:38px;border:1px solid #2E2E2E;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#C0C0C0;transition:.2s}
.soc a:hover{border-color:var(--o);color:var(--o)}
.soc svg{width:17px;height:17px}
.leg{padding:28px 0 44px;font-size:13.5px;color:#7A7A7A;line-height:1.85}
.leg .r2{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid #1C1C1C;font-size:13px}
.leg a{color:#9A9A9A}
.leg a:hover{color:var(--o)}
.roe{display:block;margin-top:12px;color:#8A8A8A}
/* Der Bildnachweis-Link muss sich vom grauen Fliesstext abheben, sonst ist er nicht als Link erkennbar. */
.roe a{color:#B9B9B9;text-decoration:underline;text-underline-offset:2px}
.roe a:hover,.roe a:focus-visible{color:var(--o)}
.roe + .roe{margin-top:6px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  nav.main,.navr-icons{display:none}
  .burger{display:block}
  .split,.cta .w,.emg .w{grid-template-columns:1fr;gap:44px}
  .mgrid,.std{grid-template-columns:repeat(2,1fr);gap:28px}
  .c3,.dcards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px 0}
  .fg{grid-template-columns:1fr 1fr 1fr;gap:32px}
}
@media(max-width:720px){
  body{font-size:16px}
  .w{padding:0 20px}
  section{padding:68px 0}
  .hero{padding-top:56px}
  .mets{padding-top:104px}
  .c3,.c2,.dcards,.std,.steps,.tl,.fr,.fg{grid-template-columns:1fr}
  .mgrid{grid-template-columns:1fr;gap:24px}
  .hcta .btn{width:100%;justify-content:center}
  /* Kopfzeile war bei 500px bereits 7px zu breit - der Menue-Knopf lag ausserhalb
     und wurde von overflow-x:hidden abgeschnitten. Der Button steht im Menue. */
  .navr>.btn{display:none}
  header .w{gap:12px;height:64px}
  .burger{margin-right:-4px;padding:6px 4px}
  .diag{transform:translateY(38px)}
  form{padding:26px 22px}
  .stp{padding-right:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ================= Milchglas & Bildflächen ================= */
.glass{
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 14px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.15);
}
.glass-lt{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.shot{position:relative;overflow:hidden}
.shot-bg{position:absolute;inset:0;z-index:0}
.shot-bg img{width:100%;height:100%;object-fit:cover;display:block}
.shot-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.86) 42%,rgba(8,8,8,.58) 100%)}
.shot>.w{position:relative;z-index:2}
.shot.right .shot-bg::after{background:linear-gradient(258deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.88) 46%,rgba(8,8,8,.62) 100%)}

/* Hero: Text + Bild */
.hgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hshot{position:relative;margin:0;border-radius:12px;overflow:hidden;box-shadow:0 30px 68px rgba(0,0,0,.22)}
.hshot>img{width:100%;display:block;aspect-ratio:10/9;object-fit:cover}
.hshot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 100%)}
.hshot figcaption{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;border-radius:10px;padding:18px 20px}
.hshot .gk{font-family:var(--fd);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--o);display:block;margin-bottom:8px}
.hshot figcaption b{font-family:var(--fd);font-size:18px;font-weight:600;color:#fff;display:block;margin-bottom:6px;letter-spacing:-.015em}
.hshot figcaption p{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.84)}

/* Logo-Bildmarke */
.logo img.mark{width:26px;height:auto;display:block}
.fb .logo img.mark{width:30px}

/* Milchglas-Karten im dunklen Band */
.dark.shot .dcard{background:rgba(255,255,255,.07)}
.dark.shot .dcard:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.30)}

/* Methodik auf Schuppen-Textur */
#standards{position:relative;overflow:hidden}
#standards::before{content:"";position:absolute;inset:0;opacity:.13;
  background:url(../img/scales.jpg) center/cover no-repeat;filter:grayscale(.35)}
#standards>.w{position:relative;z-index:2}

/* CTA: Haken-Liste als Milchglas */
.cta .tickbox{border-radius:10px;padding:8px 22px;margin-top:30px}
.cta .tickbox .tick{margin:0}
.cta .tickbox .tick li{border-bottom-color:rgba(255,255,255,.12)}
.cta .tickbox .tick li:last-child{border-bottom:0}

@media(max-width:1040px){
  .hgrid{grid-template-columns:1fr;gap:40px}
  .hshot>img{aspect-ratio:16/10}
}
@media(max-width:720px){
  .hshot figcaption{left:10px;right:10px;bottom:10px;padding:14px 16px}
}


/* ============ Fal.Con-Muster: Statistik-Banner ============ */
.mets{background:#0A0A0A;color:#fff;position:relative;overflow:hidden;padding-bottom:100px;text-align:center}
.mets .bgimg{position:absolute;inset:0;z-index:0}
.mets .bgimg img{width:100%;height:100%;object-fit:cover;display:block}
.mets .bgimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.62),rgba(10,10,10,.86))}
.mets>.w{position:relative;z-index:2}
.mets .mtitle{font-family:var(--fd);font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:600;color:#fff;
  letter-spacing:-.02em;margin:0 auto 44px;max-width:22ch}
.mets .met b{color:#fff}
.mets .met span{color:#ADADAD;border-top:0;padding-top:0;margin-top:12px;font-size:14.5px;max-width:26ch;margin-left:auto;margin-right:auto}
.mets .met{position:relative;padding-top:22px}
.mets .met::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:3px;background:var(--o);border-radius:2px}

/* ============ Fal.Con-Muster: Bild-Text-Streifen ============ */
.strip{position:relative;overflow:hidden;color:#fff;padding:0;border:0}
.strip-bg{position:absolute;inset:0;z-index:0}
.strip-bg img{width:100%;height:100%;object-fit:cover;display:block}
.strip-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,8,.93) 0%,rgba(8,8,8,.74) 52%,rgba(8,8,8,.42) 100%)}
.strip.rev .strip-bg::after{
  background:linear-gradient(270deg,rgba(8,8,8,.93) 0%,rgba(8,8,8,.76) 52%,rgba(8,8,8,.44) 100%)}
.strip>.w{position:relative;z-index:2;min-height:540px;display:flex;align-items:center;
  padding-top:118px;padding-bottom:118px}
.strip-in{max-width:600px}
.strip.rev .strip-in{margin-left:auto}
.strip .kicker{text-align:center;display:block}
.strip h2{color:#fff;text-align:center;text-wrap:balance}
.strip p{color:#CBCBCB;font-size:17.5px;line-height:1.62;margin:22px 0 0;text-align:left}
.strip .lnk-w{margin-top:26px;color:#fff}
.strip .lnk-w svg{color:var(--o)}
.strip .lnk-w:hover{color:var(--o)}

/* CTA-Verlauf statt Foto */
.cta .shot-bg::after{
  background:linear-gradient(90deg,rgba(8,8,8,.90) 0%,rgba(8,8,8,.74) 48%,rgba(8,8,8,.88) 100%)}

/* Hero endet weiß, Diagramm ragt in das dunkle Band */
.hero{background:linear-gradient(180deg,#fff 0%,#FCFCFC 62%,#F7F7F7 100%)}

@media(max-width:1040px){
  .strip>.w{min-height:auto;padding-top:78px;padding-bottom:78px}
  .strip-in,.strip.rev .strip-in{max-width:100%;margin:0}
  .strip-bg::after,.strip.rev .strip-bg::after{
    background:linear-gradient(180deg,rgba(8,8,8,.86),rgba(8,8,8,.93))}
  .mets .met span{max-width:100%}
}


.hero-tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:26px}
.hero-tags span{background:var(--o);color:#fff;font-family:var(--fd);font-weight:700;font-size:12.5px;
  letter-spacing:.03em;padding:5px 12px;border-radius:3px}
/* Statistik-Banner schließt direkt an */
.mets{padding-top:100px}

/* ==================== Utility-Leiste (hell, rechtsbuendig) ==================== */
/* Ganz oben: drei klar getrennte Zeilen, nach dem Vorbild von crowdstrike.com
   1) durchgehend orange Ankuendigungsband, sitegweit, fett, mit unterstrichenem Link
   2) schmale weisse Utility-Zeile, rechtsbuendig, mit Pipe-Trennern statt Kaestchen
   3) Hauptheader mit Logo/Nav/CTA (unveraendert) */
.anno{background:var(--o);color:#fff}
.anno .w{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 0;
  font-size:14px;font-weight:700;flex-wrap:wrap;text-align:center;font-family:var(--fd)}
.anno a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.anno a:hover{text-decoration:none}

.util{background:#fff;border-bottom:1px solid var(--bd)}
.util .w{display:flex;justify-content:flex-end;align-items:center;gap:0;height:38px;font-size:13px}
.util a{color:var(--mut);padding:0 12px;line-height:1;font-weight:500}
.util a:hover{color:var(--o)}
.util .pipe{color:#D8D8D8;font-weight:400}
.util .pipe:last-child{display:none}

/* Sprachumschalter im Footer: Slide-/Pill-Toggle, eine eigene Zeile oberhalb der Impressum-Zeile
   (Position wie bei crowdstrike.com - dort als Dropdown ueber der Copyright-Zeile). */
.flangwrap{display:flex;justify-content:flex-end;padding:20px 0 0}
.flang{position:relative;display:inline-flex;background:#161616;border:1px solid #2A2A2A;border-radius:999px;padding:3px}
.flang::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  background:var(--o);border-radius:999px;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.flang.en::before{transform:translateX(100%)}
.flang a{position:relative;z-index:2;width:52px;text-align:center;padding:6px 0;font-family:var(--fd);
  font-weight:700;font-size:12.5px;color:#9A9A9A;border-radius:999px;transition:color .2s}
.flang a.on{color:#fff}

/* ==================== Buttons: Pill-Radius wie im Vorbild ==================== */
.btn{border-radius:6px}
.btn-sm{padding:11px 18px;font-size:14.5px}

/* ==================== HERO: randlos ==================== */
.hero{background:#0A0A0A;padding:0;position:relative;overflow:hidden;
  min-height:700px;display:flex;flex-direction:column;justify-content:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
/* Die Motive sind bereits sehr dunkel - das Overlay darf deshalb deutlich leichter
   ausfallen als bei den vorherigen Platzhaltern, sonst verschwindet das Tier ganz. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,6,7,.90) 0%,rgba(6,6,7,.62) 38%,rgba(6,6,7,.10) 72%,rgba(6,6,7,.34) 100%),
    linear-gradient(180deg,rgba(6,6,7,.34) 0%,rgba(6,6,7,0) 38%,rgba(6,6,7,.52) 100%)}
/* Warmer Schimmer auf Hoehe der Augen - verbindet das Motiv mit der Signalfarbe. */
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(38% 46% at 62% 46%, rgba(255,85,0,.13), transparent 68%)}
.hero-inner{position:relative;z-index:2;padding-top:104px;padding-bottom:8px}
.hero-head{max-width:780px;text-align:left}
.hero-head .kicker{display:block;margin-bottom:18px}
.hero h1{color:#fff;font-size:clamp(2.35rem,5vw,4.1rem);line-height:1.03;letter-spacing:-.032em;
  text-wrap:balance;margin-bottom:22px}
.hero-lead{color:#D6D6D6;font-size:19.5px;line-height:1.58;max-width:56ch;margin:0}
.hero .hcta{margin-top:32px;justify-content:flex-start}
.hero-note{color:#9A9A9A;font-size:14.5px;margin:16px 0 0}
/* Sekundaerer Button auf dunklem Grund - galt bisher nur fuer den Homepage-Hero und war auf
   allen Unterseiten (pagehero, cta, emg, dark, strip) unlesbar (dunkler Text auf dunklem Grund). */
/* Sekundaerbutton auf DUNKLEM Grund. .emg gehoert bewusst NICHT dazu - diese Sektion
   ist weiss mit hellgrauem Kasten, dort wuerde weisse Schrift unsichtbar. */
.hero .btn-o,.pagehero .btn-o,.cta .btn-o,.dark .btn-o,.strip .btn-o,.fpanel .btn-o{
  color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05)}
.hero .btn-o:hover,.pagehero .btn-o:hover,.cta .btn-o:hover,.dark .btn-o:hover,.strip .btn-o:hover,.fpanel .btn-o:hover{
  border-color:#fff;background:rgba(255,255,255,.14)}
/* Notfall-Kasten ist hell: dunkle Schrift, weisser Grund. */
.emg .box .btn-o{color:var(--ink);border-color:#C9C9C9;background:#fff}
.emg .box .btn-o:hover{border-color:var(--ink);background:#FAFAFA}

/* Glasleiste mit drei Spalten */
.hero-barwrap{position:relative;z-index:2;padding-top:56px;padding-bottom:56px}
.hero-bar{display:grid;grid-template-columns:repeat(3,1fr);border-radius:12px;overflow:hidden}
.hb{display:block;padding:26px 30px;border-right:1px solid rgba(255,255,255,.16);transition:background .2s}
.hb:last-child{border-right:0}
.hb:hover{background:rgba(255,255,255,.06)}
.hb span{display:block;font-family:var(--fd);font-size:13px;font-weight:700;color:var(--o);margin-bottom:9px}
.hb b{display:block;font-family:var(--fd);font-weight:600;font-size:16.5px;line-height:1.35;color:#fff}
.hb b svg{width:14px;height:14px;margin-left:5px;vertical-align:-1px;transition:transform .2s}
.hb:hover b svg{transform:translateX(4px)}

/* ==================== Statistik-Banner: zweizeilig ==================== */
.mets .mtitle b{font-weight:700;color:#fff}
.mets .mtitle span{font-weight:300;color:#E2E2E2}
.mets .mtitle{max-width:34ch;line-height:1.22}

/* ==================== Angriffspfad als eigene helle Sektion ==================== */
.diagsec{background:#fff;padding:96px 0}
.diagsec .diag{transform:none;margin:0;box-shadow:0 18px 48px rgba(0,0,0,.09)}

/* ==================== Split-Card (Text links, Bild rechts) ==================== */
.splitcard{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:16px;
  overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.05);border:1px solid #ECECEC}
.sc-text{padding:60px 54px;display:flex;flex-direction:column;justify-content:center}
.sc-text h2{margin-bottom:18px}
.sc-text p{color:var(--body);font-size:16.5px;max-width:46ch}
.sc-list{list-style:none;padding:0;margin:8px 0 28px}
.sc-list li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15.5px;color:var(--ink2);
  border-bottom:1px solid #F0F0F0}
.sc-list li:last-child{border-bottom:0}
.sc-list svg{width:15px;height:15px;color:var(--o);flex:none;margin-top:4px}
.sc-img{background:#101012;padding:40px 40px 40px 0;display:flex;align-items:center;
  min-width:0;overflow:hidden;height:100%;
  background-image:radial-gradient(80% 70% at 20% 0%,rgba(255,85,0,.18),transparent 62%)}
.sc-img .ui{margin-left:-40px;width:calc(100% + 40px);box-shadow:0 26px 60px rgba(0,0,0,.42)}
/* Ohne diese Regel hat das <img> keine Breitenbegrenzung: es zieht sich auf seine
   natuerliche Pixelgroesse und sprengt damit die Grid-Spalte, obwohl "1fr 1fr" gesetzt ist -
   das war die eigentliche Ursache fuer den schiefen 50/50-Split. */
.sc-photo{width:100%;height:100%;min-height:340px;object-fit:cover;display:block;border-radius:10px}
.sc-text{min-width:0}

/* ==================== Produktkarten ==================== */
.pcard{padding:0;overflow:hidden}
.pimg{padding:10px 10px 0}
.pimg img{width:100%;display:block;border-radius:10px;aspect-ratio:3/2;object-fit:cover}
/* In einem Kartenraster stehen helle Fotos neben den dunklen Schemagrafiken.
   Die leichte Entsaettigung nimmt den Fotos die Buntheit, damit die Reihe ruhig wirkt. */
.pimg-photo img{filter:saturate(.84) contrast(1.03)}
.pbody{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.plabel{font-family:var(--fd);font-size:13.5px;font-weight:600;color:var(--o);margin-bottom:7px}
.pcard h3{font-size:1.34rem;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.prule{height:2px;border-radius:2px;margin-bottom:16px;
  background:linear-gradient(90deg,var(--o) 0%,#C64A2A 45%,#2E9FB0 100%)}
.pcard p{font-size:15.5px;color:var(--body);line-height:1.6;margin-bottom:14px}
.pcard .caps{font-size:13.5px;color:var(--mut);line-height:1.7;margin-bottom:22px}
.pbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.pcard .pbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcard .pbtns .btn{justify-content:center;padding:12px 10px;font-size:14.5px;white-space:nowrap;min-width:0}

/* ==================== Responsive ==================== */
@media(max-width:1040px){
  .hero{min-height:auto}
  .hero-inner{padding-top:78px}
  .hero-barwrap{padding-top:44px;padding-bottom:44px}
  .hero-bar{grid-template-columns:1fr}
  .hb{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .hb:last-child{border-bottom:0}
  .splitcard{grid-template-columns:1fr}
  .sc-text{padding:44px 32px}
  .sc-img{padding:32px}
  .sc-img .ui{margin-left:0;width:100%}
  .util .w{justify-content:center;flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px}
  .diagsec{padding:64px 0}
}
@media(max-width:720px){
  .hero-inner{padding-top:56px}
  .hero-lead{font-size:17px}
  .hero .hcta .btn{width:100%;justify-content:center}
  .sc-text{padding:34px 22px}
  .sc-img{padding:22px}
  .util a,.util .u-new{padding:4px 9px;border-right:0;font-size:12.5px}
  .pcard .pbtns{grid-template-columns:1fr}
  .pbtns .btn{width:100%;justify-content:center}
}

/* ==================== Unterseiten-Header (page_hero) ==================== */
.pagehero{position:relative;overflow:hidden;background:#0A0A0A;padding:0;min-height:420px;display:flex;align-items:center}
.pagehero-bg{position:absolute;inset:0;z-index:0}
.pagehero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;opacity:1}
/* Links steht die Schrift, also dort kraeftig abdunkeln - nach rechts auslaufen lassen,
   sonst ist vom Motiv nichts mehr zu sehen und das Band wirkt einfach schwarz. */
.pagehero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,6,7,.90) 0%,rgba(6,6,7,.60) 46%,rgba(6,6,7,.14) 100%),
  linear-gradient(180deg,rgba(6,6,7,.28) 0%,rgba(6,6,7,.10) 55%,rgba(6,6,7,.60) 100%)}
.pagehero .w{position:relative;z-index:2;padding-top:96px;padding-bottom:64px}
/* Fotos als Seitenkopf: helle Motive (Klassenzimmer, Fassade, Wohnzimmer) brauchen
   deutlich mehr Abdunkelung als die dunklen Abstrakt-Hintergruende, sonst steht die
   weisse Headline auf hellem Grund. Der Orangeschleier bindet das Foto an die Marke. */
.pagehero--photo .pagehero-bg img{filter:grayscale(.10) contrast(1.05) brightness(.84);opacity:1}
.pagehero--photo .pagehero-bg::after{background:
  linear-gradient(90deg,rgba(6,6,7,.92) 0%,rgba(6,6,7,.70) 48%,rgba(6,6,7,.30) 100%),
  linear-gradient(180deg,rgba(6,6,7,.34) 0%,rgba(6,6,7,.16) 55%,rgba(6,6,7,.66) 100%),
  radial-gradient(120% 90% at 88% 28%,rgba(255,85,0,.16),transparent 62%)}
@media(max-width:720px){
  .pagehero--photo .pagehero-bg::after{background:
    linear-gradient(180deg,rgba(6,6,7,.74) 0%,rgba(6,6,7,.66) 45%,rgba(6,6,7,.88) 100%)}
}

.pagehero .hero-head{max-width:820px;text-align:left;margin:0}
.pagehero h1{color:#fff}
.pagehero .hero-lead{color:#D6D6D6}
.pagehero .hero-tags{justify-content:flex-start;margin-top:24px}

/* Grosses, blasses Wasserzeichen-Icon je Unterseite - sorgt fuer visuelle Unterscheidung
   zwischen den Seiten, obwohl der Rahmen (dunkles Band + Verlauf) derselbe bleibt. */
.pagehero-mark{position:absolute;z-index:1;right:-40px;top:50%;transform:translateY(-50%);
  width:340px;height:340px;color:rgba(255,255,255,.06);pointer-events:none}
.pagehero-mark svg{width:100%;height:100%}
@media(max-width:1040px){.pagehero-mark{width:220px;height:220px;right:-60px}}
@media(max-width:720px){.pagehero-mark{display:none}}

@media(max-width:720px){.pagehero{min-height:320px}.pagehero .w{padding-top:64px;padding-bottom:44px}}

/* ==================== Fliesstext-Seiten (Impressum, Datenschutz, AGB, Ueber uns) ==================== */
.prose{max-width:74ch}
.prose h1{margin-bottom:22px}
.prose h2{font-size:1.4rem;font-weight:700;margin:38px 0 12px;letter-spacing:-.015em}
.prose h2:first-of-type{margin-top:8px}
.prose p{font-size:16px;color:var(--body);line-height:1.7;margin-bottom:14px}
.prose a{color:var(--o);border-bottom:1px solid rgba(255,85,0,.35)}
.legal-note{background:var(--gry);border-left:3px solid var(--o);padding:14px 18px;border-radius:0 8px 8px 0;font-size:14.5px;color:var(--body);margin:22px 0}


/* ==================== Einwilligung (Cookies) ====================
   Beide Knoepfe gleich gewichtet - ein Banner, bei dem Ablehnen schwerer faellt
   als Zustimmen, gilt als unwirksam. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:500;padding:16px;display:flex;justify-content:center;
  pointer-events:none}
.cc[hidden]{display:none}
.cc-box{pointer-events:auto;width:min(720px,100%);background:#fff;border:1px solid var(--bd);
  border-radius:14px;box-shadow:0 24px 70px -18px rgba(0,0,0,.42);padding:24px 26px}
.cc-h{font-family:var(--fd);font-size:18px;font-weight:700;margin:0 0 8px;color:var(--ink)}
.cc-d{font-size:14.5px;line-height:1.6;color:var(--body);margin:0 0 16px}
.cc-opts{display:grid;gap:10px;margin-bottom:18px}
.cc-opt{display:flex;gap:11px;align-items:flex-start;background:var(--gry);border:1px solid var(--bd);
  border-radius:10px;padding:12px 14px;cursor:pointer}
.cc-opt--fixed{cursor:default;opacity:.85}
.cc-opt input{margin-top:3px;width:17px;height:17px;accent-color:var(--o);flex:none}
.cc-opt b{display:block;font-family:var(--fd);font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.cc-opt em{font-style:normal;font-size:13px;line-height:1.55;color:var(--body)}
.cc-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cc-btns .btn{flex:1 1 auto;justify-content:center;min-width:150px}
.cc-save{background:none;border:0;font-family:var(--fd);font-weight:600;font-size:14.5px;
  color:var(--o-text);cursor:pointer;padding:10px 6px;text-decoration:underline;text-underline-offset:3px}
.cc-legal{margin:14px 0 0;font-size:13px;color:var(--mut)}
.cc-legal a{color:var(--body);text-decoration:underline;text-underline-offset:2px}
.cc-legal a:hover{color:var(--o)}

/* Dauerhafter Zugang zur Entscheidung - Widerruf muss so leicht sein wie die Zustimmung. */
.cc-reopen{position:fixed;left:14px;bottom:14px;z-index:480;display:flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--bd);border-radius:999px;padding:8px 14px 8px 11px;cursor:pointer;
  font-family:var(--fd);font-size:13px;font-weight:600;color:var(--ink2);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.4);transition:color .16s,border-color .16s}
.cc-reopen[hidden]{display:none}
/* Bei offenem Handy-Menue wuerden Banner (z 500) und Dauerknopf (z 480) darueber liegen. */
body.mm-open .cc-reopen,body.mm-open .cc{display:none}
.cc-reopen:hover{color:var(--o);border-color:var(--o)}
.cc-reopen svg{width:18px;height:18px;flex:none}
@media(max-width:720px){
  .cc{padding:0}
  .cc-box{border-radius:14px 14px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
  .cc-btns .btn{flex:1 1 100%}
  .cc-reopen span{display:none}
  .cc-reopen{padding:10px;left:12px;bottom:12px}
}

/* ==================== Mobiles Menue ==================== */
/* Bildschirmfuellend und ueber der Kopfzeile (z 300). Die feste Hoehenannahme von
   frueher ist raus: Ankuendigungsband und Servicezeile aendern die Kopfhoehe. */
.mobilemenu{position:fixed;inset:0;z-index:400;background:#fff;display:flex;flex-direction:column;
  overscroll-behavior:contain}
.mobilemenu[hidden]{display:none}
.mm-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;
  padding:0 20px;height:64px;border-bottom:1px solid var(--bd)}
.mm-close{background:none;border:0;color:var(--ink);padding:8px;margin-right:-8px;cursor:pointer;
  display:flex;align-items:center}
.mm-close svg{width:26px;height:26px}
.mm-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 20px 20px}
.mm-sec{font-family:var(--fd);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--o-text);margin:22px 0 2px;padding:0 4px}
.mm-sec:first-child{margin-top:14px}
.mobilemenu a{display:block;padding:13px 4px;font-family:var(--fd);font-weight:600;font-size:17px;
  color:var(--ink);border-bottom:1px solid var(--bd)}
.mobilemenu a:active{color:var(--o)}
.mobilemenu .mm-top .logo{display:flex;align-items:center;border-bottom:0;padding:0;font-size:19px}
.mm-cta{flex:none;display:flex;flex-direction:column;gap:10px;padding:16px 20px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--bd);background:var(--gry)}
.mm-cta .btn{justify-content:center;width:100%;border-bottom:0}
.mm-portal{text-align:center;font-size:14px!important;font-weight:600;color:var(--o-text)!important;
  border-bottom:0!important;padding:4px 0 0!important}
body.mm-open{overflow:hidden}

/* ==================== Kontaktformular-Feldfehler ==================== */
.fld.has-error input,.fld.has-error select,.fld.has-error textarea{border-color:#D92B20;box-shadow:0 0 0 3px rgba(217,43,32,.12)}
.form-msg{min-height:1.2em;font-size:14.5px;margin:14px 0 0}
.form-msg.ok{color:#1C7A56}
.form-msg.err{color:#D92B20}
.hp{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none}
.nl-card{width:100%}
.nl-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.nl-inline{background:var(--gry);border:1px solid var(--bd);border-radius:12px;padding:26px}
.nl-inline form{background:transparent;border-radius:0;padding:0}
@media(max-width:720px){.nl-row{grid-template-columns:1fr}}

/* ==================== NEWS — CrowdStrike-Blogmuster, Orange statt Rot ==================== */
.news-hero{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--bd);margin-bottom:22px}
.news-hero .nh-img{position:relative;aspect-ratio:3/1;max-height:340px}
.news-hero .nh-img img{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.news-hero .nh-panel{background:#2A2A2A;color:#fff;padding:26px 30px}
.news-hero .nh-eyebrow{font-family:var(--fd);font-size:12.5px;font-weight:600;color:#C9C9C9;margin-bottom:8px;display:block}
.news-hero h2{color:#fff;font-size:1.7rem;margin-bottom:10px}
.news-hero .nh-meta{font-size:13.5px;color:#B0B0B0}
.news-hero a.news-hero-link{position:absolute;inset:0;z-index:3}

/* Schlanker heller Titelbereich fuer die News-Uebersicht - bewusst kein grosser dunkler Hero,
   damit sich die Seite von den Leistungs-/Zielgruppenseiten abhebt (CrowdStrike-Blog-Muster). */
.newshead{background:#fff;border-bottom:1px solid var(--bd);padding:64px 0 40px}
.newshead h1{font-size:clamp(2rem,4vw,2.85rem);margin:14px 0 12px}
.newshead .lead{margin:0}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:64px}
.news-grid-2{grid-template-columns:repeat(2,1fr);margin-bottom:0}
.news-card{background:#fff;border:1px solid var(--bd);border-radius:12px;overflow:hidden;transition:.22s;position:relative}
.news-card:hover{box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-3px)}
.news-card .nc-img{aspect-ratio:16/11;overflow:hidden;background:#111}
.news-card .nc-img img{width:100%;height:100%;object-fit:cover;display:block}
.news-card .nc-body{padding:18px 20px 22px}
.news-card .nc-eyebrow{font-family:var(--fd);font-size:12px;font-weight:700;color:var(--o);margin-bottom:8px;display:block}
.news-card h3{font-size:1.05rem;font-weight:700;line-height:1.35;margin-bottom:12px;letter-spacing:-.01em}
.news-card .lnk{font-size:14px}
.news-card a.news-card-link{position:absolute;inset:0;z-index:3}

.cat-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;flex-wrap:wrap;gap:10px}
.cat-head h2{margin:0}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.catcard{background:#fff;border:1px solid var(--bd);border-radius:12px;overflow:hidden;transition:.22s;position:relative}
.catcard:hover{box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-3px)}
.cat-thumb{position:relative;aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(155deg,rgba(255,85,0,.55),rgba(6,6,7,.94) 62%),
    url(../img/abstract-grid.jpg) center/cover no-repeat}
.cat-thumb svg{width:52px;height:52px;color:#fff;opacity:.94;position:relative;z-index:2}
.cat-body{padding:18px 20px 22px}
.cat-body h3{font-size:1.1rem;font-weight:700;margin-bottom:12px}
.cat-card-link{position:absolute;inset:0;z-index:3}
.cat-count{font-family:var(--fd);font-size:12px;color:var(--mut);margin-left:8px;font-weight:500}

.sidebar-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.sidebar-cats li{display:flex}
.sidebar-cats a{display:flex;align-items:center;gap:11px;width:100%;padding:9px 8px;border-radius:8px;
  color:var(--ink2);font-weight:500;font-size:14px;transition:background .16s}
.sidebar-cats a:hover{background:#fff;color:var(--o)}
.sidebar-cats svg{width:18px;height:18px;color:var(--o);flex:none}
.sidebar-cats .sc-name{flex:1;min-width:0}
.sidebar-cats .sc-n{color:var(--mut);font-variant-numeric:tabular-nums;font-size:12.5px;flex:none}
.newslayout{display:grid;grid-template-columns:1fr 268px;gap:48px;align-items:start}
.newslayout aside{position:sticky;top:92px;background:var(--gry);border:1px solid var(--bd);border-radius:12px;padding:18px}
.newslayout aside h4{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:4px 0 10px;padding:0 8px}

.article-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--mut);margin:10px 0 0}
.article-cats a{color:var(--o);font-weight:600}
.article-hero-img{border-radius:14px;overflow:hidden;margin:32px 0;aspect-ratio:16/8}
.article-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.article-share{display:flex;gap:10px;margin-top:36px;padding-top:22px;border-top:1px solid var(--bd)}

@media(max-width:1040px){
  .news-grid,.cat-grid{grid-template-columns:repeat(2,1fr)}
  .newslayout{grid-template-columns:1fr}
  .newslayout aside{position:static}
}
@media(max-width:720px){
  .news-grid,.cat-grid{grid-template-columns:1fr}
  .news-hero .nh-panel{padding:20px 20px 24px}
  .news-hero h2{font-size:1.35rem}
}


/* ==================== Grosse dunkle Runde-Karten (Analysten-/Feature-Panel-Muster) ==================== */
.panelwrap{display:flex;flex-direction:column;gap:22px}
.fpanel{background:#0A0A0A;border:1px solid #232323;border-radius:24px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:340px}
.fpanel-text{padding:52px 48px}
.fpanel-text .kicker{margin-bottom:16px}
.fpanel-text h3{color:#fff;font-size:1.9rem;font-weight:800;line-height:1.12;margin-bottom:14px;letter-spacing:-.02em}
.fpanel-text p{color:#B8B8B8;font-size:15.5px;line-height:1.62;margin-bottom:24px;max-width:44ch}
.fpanel-media{height:100%;min-height:340px;background:#111;position:relative;overflow:hidden}
.fpanel-media img{width:100%;height:100%;object-fit:cover;display:block}
.fpanel.rev{grid-template-columns:1fr 1fr}
.fpanel.rev .fpanel-media{order:-1}
.fpanel-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fpanel-row .fpanel{grid-template-columns:1fr;min-height:auto}
.fpanel-row .fpanel-text{padding:40px 36px 8px}
.fpanel-row .fpanel-text h3{font-size:1.4rem}
.fpanel-row .fpanel-media{min-height:200px;margin:0 24px 24px;border-radius:12px}
@media(max-width:1040px){
  .fpanel,.fpanel.rev{grid-template-columns:1fr}
  .fpanel.rev .fpanel-media{order:0}
  .fpanel-text{padding:36px 30px}
  .fpanel-media{min-height:240px}
  .fpanel-row{grid-template-columns:1fr}
}

/* ==================== FAQ-Akkordeon ==================== */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--bd)}
.faq-item{border-bottom:1px solid var(--bd)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 4px;background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--fd);font-weight:600;font-size:16.5px;color:var(--ink)}
.faq-q:hover{color:var(--o)}
.faq-q .fi{width:20px;height:20px;flex:none;color:var(--o);transition:transform .25s}
.faq-item.open .faq-q .fi{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:400px}
.faq-a p{padding:0 4px 22px;color:var(--body);font-size:15px;line-height:1.65;max-width:68ch}

/* ==================== Erzaehlende Szenario-Karte (Zielgruppenseiten) ==================== */
.scenario{background:var(--gry);border:1px solid var(--bd);border-radius:16px;padding:44px;
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.scenario .sic{width:46px;height:46px;color:var(--o);flex:none}
.scenario h3{font-size:1.3rem;margin-bottom:12px}
.scenario p{color:var(--body);font-size:15.5px;line-height:1.65;margin-bottom:12px;max-width:66ch}
.scenario p:last-child{margin-bottom:0}
.scenario .tag{display:inline-block;font-family:var(--fd);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#B23C00;background:var(--orange-bed);padding:4px 10px;border-radius:4px;margin-bottom:14px}
@media(max-width:720px){.scenario{grid-template-columns:1fr;padding:28px}}

/* ==================== Mega-Menue: rechtes Feature-Panel ==================== */
.dd-feat{background:#0D0D0D;padding:0;display:flex;flex-direction:column}
.dd-feat img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.dd-feat .df-body{padding:20px 22px;flex:1;display:flex;flex-direction:column}
.dd-feat .df-k{font-family:var(--fd);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--o);margin-bottom:8px}
.dd-feat h6{color:#fff;font-family:var(--fd);font-size:15px;font-weight:700;margin-bottom:8px;line-height:1.3}
.dd-feat p{color:#A8A8A8;font-size:12.5px;line-height:1.5;margin-bottom:14px}
.dd-feat .lnk{color:var(--o);font-size:13px;margin-top:auto}
.dd-g4{grid-template-columns:1fr 1fr 1fr .9fr}
/* Sechs Zielgruppen passen nicht nebeneinander - drei Spalten in zwei Reihen. */
.dd-g6{grid-template-columns:repeat(3,1fr)}

/* ==================== Plus-Matrix Hintergrund ====================
   Die Ebenen haengen an <html>, nicht an <body>: body traegt einen eigenen
   Hintergrund und wuerde negative z-index-Ebenen verdecken. So liegen sie
   sauber zwischen Canvas-Hintergrund (html) und Inhalt (body, z-index 1). */
html{background:var(--wht)}

html::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Cpath%20d='M22%2016.5v11M16.5%2022h11'%20stroke='%23FF5500'%20stroke-width='1.3'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:44px 44px;
  opacity:.16;
}

/* Inhalt liegt ueber der Matrix. */
body{position:relative;z-index:1;background:transparent}
/* Elementor schreibt ueber sein globales Kit eine Hintergrundfarbe direkt auf <body>
   (.elementor-kit-N). Steht dort Schwarz, schlaegt es durch jede halbtransparente
   Sektion durch - Ueberschriften standen dann dunkelgrau auf Schwarz. Das Theme ist
   hell angelegt und bringt seinen Untergrund auf <html> mit; der muss gewinnen. */
body[class*="elementor-kit-"]{background:transparent!important}


/* Helle Sektionen leicht transparent, damit die Matrix durchscheint. */
section:not(.g):not(.dark):not(.cta):not(.mets):not(.diagsec){background:transparent}
.diagsec{background:rgba(255,255,255,.55)}
.g{background:rgba(244,244,244,.68)}


/* ==================== Fachteil: Bild/Text im Wechsel ====================
   Statt einer Textwand wechseln sich Grafik und Text ab. Jeder Block hat einen
   fetten Einstiegssatz zum Ueberfliegen und eine hervorgehobene Kernaussage -
   damit die Seite sowohl fuer Entscheider als auch fuer Technik lesbar bleibt. */
.detail{display:flex;flex-direction:column;gap:64px}
.dblock{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.dblock:nth-child(even) .dblock-media{order:-1}
.dblock-media img{width:100%;display:block;border-radius:14px;border:1px solid var(--bd);
  box-shadow:0 14px 40px rgba(0,0,0,.10)}
.dblock-num{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-size:12.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--o);margin-bottom:14px}
.dblock-num::before{content:"";width:22px;height:2px;background:var(--o)}
.dblock h3{font-size:1.55rem;font-weight:700;letter-spacing:-.025em;line-height:1.18;margin-bottom:14px}
.dblock .dlead{font-size:17.5px;line-height:1.6;color:var(--ink2);font-weight:500;margin-bottom:18px}
.dblock p{color:var(--body);font-size:15.5px;line-height:1.72;margin-bottom:13px}
.dblock p:last-of-type{margin-bottom:0}
.dkey{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:16px 18px;
  background:var(--o-lt);border-left:3px solid var(--o);border-radius:0 8px 8px 0}
.dkey svg{width:17px;height:17px;color:var(--o);flex:none;margin-top:2px}
.dkey b{font-size:15px;line-height:1.55;color:var(--ink);font-weight:600}

/* Aufklappbare Vertiefung - haelt die Seite kurz, ohne Inhalt zu verlieren. */
.dmore{margin-top:16px;border-top:1px solid var(--bd);padding-top:14px}
.dmore summary{cursor:pointer;font-family:var(--fd);font-weight:600;font-size:14.5px;color:var(--o);
  list-style:none;display:flex;align-items:center;gap:8px}
.dmore summary::-webkit-details-marker{display:none}
.dmore summary::after{content:"+";font-size:17px;line-height:1}
.dmore[open] summary::after{content:"–"}
.dmore p{margin-top:12px;font-size:15px}

/* Kurzfassung fuer Entscheider, ganz oben auf der Leistungsseite. */
.exec{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:34px 36px;
  box-shadow:0 2px 6px rgba(0,0,0,.04)}
.exec-h{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:20px}
.exec-h svg{width:17px;height:17px;color:var(--o)}
.exec ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.exec li{display:flex;flex-direction:column;gap:7px}
.exec li b{font-family:var(--fd);font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.3}
.exec li span{font-size:14.5px;line-height:1.6;color:var(--body)}

@media(max-width:1040px){
  .dblock{grid-template-columns:1fr;gap:28px}
  .dblock:nth-child(even) .dblock-media{order:0}
  .exec ul{grid-template-columns:1fr;gap:20px}
}
@media(max-width:720px){
  .detail{gap:44px}
  .exec{padding:24px 22px}
  .dblock h3{font-size:1.32rem}
}

/* ==================== Sektionsraender ====================
   Frueher lag hier ueber jeder hellen Sektion oben UND unten ein 110px hoher
   Weissverlauf, der die Punktmatrix ausblenden sollte. Zwischen zwei Sektionen
   summierte sich das zu einem 220px breiten, hell leuchtenden Balken quer ueber
   die Seite. Die Matrix laeuft jetzt gleichmaessig durch - sie ist mit 16 %
   Deckkraft ohnehin so zurueckhaltend, dass kein Auslaufen noetig ist. */
section:not(.dark):not(.cta):not(.mets):not(.pagehero){position:relative}
section > .w{position:relative;z-index:1}

/* ==================== "Das ist enthalten"-Liste ==================== */
.inc{list-style:none;margin:8px 0 26px;padding:0;display:flex;flex-direction:column;gap:0}
.inc li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #F0F0F0;
  font-size:15.5px;line-height:1.6;color:var(--ink2)}
.inc li:last-child{border-bottom:0}
.inc svg{width:16px;height:16px;color:var(--o);flex:none;margin-top:4px}

/* ==================== Nachtraeglich gefundene Luecken ====================
   Diese Klassen waren im Markup in Verwendung, hatten aber nie eine Regel:
   der Punkt im Logo blieb schwarz statt orange, und die Fussnote unter den
   Kartenrastern hatte keinerlei Formatierung. */
.logo .dot{color:var(--o)}
.note-line{margin-top:28px;text-align:center;font-size:14.5px;line-height:1.6;
  color:var(--mut);max-width:70ch;margin-left:auto;margin-right:auto}
.dark .note-line,.cta .note-line,.strip .note-line{color:#9A9A9A}
.dblock-text{min-width:0}

/* Fokus-Sichtbarkeit fuer Tastaturbedienung - war nur global gesetzt,
   auf dunklem Grund aber kaum erkennbar. */
.dark a:focus-visible,.cta a:focus-visible,.pagehero a:focus-visible,
.hero a:focus-visible,.strip a:focus-visible,.anno a:focus-visible{
  outline:2px solid #fff;outline-offset:3px}

/* Bilder nie ueber ihren Container hinaus - schuetzt vor gesprengten Rastern. */
img{max-width:100%;height:auto}
.pimg img,.dblock-media img,.sc-photo,.nc-img img,.cat-thumb img{height:auto}
.sc-photo{height:100%}


/* ==================== Lesbarkeit: oranger Text auf hellem Grund ==================== */
.kicker,.lnk,.plabel,.dblock-num,.nc-eyebrow,.cat-count,.stp .n,.dd-feat .df-k,
.exec-h,.detail-n{color:var(--o-text)}
.lnk.d svg{color:var(--o-text)}

/* Auf dunklem Grund bleibt das reine Marken-Orange - dort erreicht es 6.18:1. */
.dark .kicker,.cta .kicker,.pagehero .kicker,.hero .kicker,.strip .kicker,
.fpanel .kicker,.mets .kicker,.dark .lnk,.cta .lnk,.strip .lnk,.fpanel .lnk,
.hero .hb span,.dd-feat .df-k{color:var(--o)}
.anno a{color:#fff}

/* Primaerbutton: Flaeche bleibt Marken-Orange, die Beschriftung wird etwas
   groesser und fetter gesetzt, damit sie naeher an der Large-Text-Schwelle liegt. */
.btn-p{font-size:16.5px;font-weight:700}
.btn-p.btn-sm{font-size:15px;font-weight:700}

/* ==================== Gegenüberstellung (klassisch vs. DEF.Intelligence) ==================== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cmp{border-radius:16px;padding:32px 30px;border:1px solid var(--bd);background:#fff}
.cmp.neg{background:var(--gry)}
.cmp.pos{border-color:rgba(255,85,0,.42);box-shadow:0 10px 34px rgba(255,85,0,.08)}
.cmp h3{font-size:1.22rem;font-weight:700;margin-bottom:6px}
.cmp .cmp-sub{font-size:14px;color:var(--mut);margin-bottom:20px}
.cmp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.cmp li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid #ECECEC;
  font-size:15.5px;line-height:1.6;color:var(--ink2)}
.cmp li:last-child{border-bottom:0}
.cmp .ico{width:20px;height:20px;flex:none;margin-top:2px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;font-size:13px;line-height:1}
.cmp.neg .ico{background:#E4E4E4;color:#6E6E6E}
.cmp.pos .ico{background:var(--o);color:#fff}
.cmp.neg li{color:var(--body)}
@media(max-width:860px){.compare{grid-template-columns:1fr}}

/* Lebenszyklus eines Findings */
.lifecycle{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:8px}
.lifecycle::before{content:"";position:absolute;top:21px;left:8%;right:8%;height:2px;background:var(--bd)}
.lc{padding:0 18px 0 0;position:relative}
.lc .lc-n{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--o);
  display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;
  color:var(--o-text);position:relative;z-index:2;margin-bottom:20px}
.lc:last-child .lc-n{background:var(--o);color:#fff;border-color:var(--o)}
.lc h4{font-size:17px;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
.lc p{font-size:14.5px;line-height:1.62;color:var(--body);margin:0}
@media(max-width:860px){
  .lifecycle{grid-template-columns:1fr;gap:26px}
  .lifecycle::before{display:none}
  .lc{padding-right:0}
}

/* ==================== Artikel-Typografie ====================
   the_content() liefert Überschriften, Listen, Bilder, Zitate und Tabellen.
   Bisher war davon fast nichts gestylt - Beiträge sahen deshalb ungestaltet aus. */
.prose{max-width:72ch;font-size:17px;line-height:1.75;color:var(--ink2)}
.prose > *:first-child{margin-top:0}

/* Erster Absatz als Lead */
.prose > p:first-of-type{font-size:19.5px;line-height:1.62;color:var(--ink);font-weight:500;margin-bottom:26px}

.prose p{margin:0 0 22px;color:var(--body)}
.prose h2{font-size:1.7rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;
  margin:52px 0 16px;color:var(--ink)}
.prose h3{font-size:1.3rem;font-weight:700;letter-spacing:-.015em;margin:38px 0 12px;color:var(--ink)}
.prose h4{font-size:1.08rem;font-weight:700;margin:30px 0 10px;color:var(--ink)}
.prose h2 + p,.prose h3 + p{margin-top:0}

.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose em{font-style:italic}
.prose a{color:var(--o-text);border-bottom:1px solid rgba(194,68,0,.35);transition:.18s}
.prose a:hover{border-bottom-color:var(--o-text);background:var(--o-lt)}

.prose ul,.prose ol{margin:0 0 22px;padding-left:0;list-style:none}
.prose ul li,.prose ol li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--body)}
.prose ul li::before{content:"";position:absolute;left:8px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--o)}
.prose ol{counter-reset:defs3c-ol}
.prose ol li{counter-increment:defs3c-ol}
.prose ol li::before{content:counter(defs3c-ol);position:absolute;left:0;top:1px;
  font-family:var(--fd);font-weight:700;font-size:14px;color:var(--o-text)}

/* Zitat als Aussage-Block, nicht als Einrückung */
.prose blockquote{margin:34px 0;padding:26px 30px;background:var(--gry);border-left:3px solid var(--o);
  border-radius:0 12px 12px 0}
.prose blockquote p{margin:0;font-family:var(--fd);font-size:19px;line-height:1.5;
  font-weight:600;color:var(--ink)}
.prose blockquote cite{display:block;margin-top:12px;font-size:14px;font-style:normal;color:var(--mut)}

/* Bilder im Artikel - gerahmt, mit Bildunterschrift */
.prose img{border-radius:12px;border:1px solid var(--bd);display:block}
.prose figure{margin:34px 0}
.prose figure img{width:100%}
.prose figcaption,.prose .wp-caption-text{margin-top:10px;font-size:13.5px;line-height:1.55;
  color:var(--mut);text-align:left;padding-left:2px;border-left:2px solid var(--o);padding-left:12px}
.prose .alignwide,.prose .alignfull{max-width:none}

.prose hr{border:0;border-top:1px solid var(--bd);margin:44px 0}

.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--gry);border:1px solid var(--bd);border-radius:4px;padding:2px 6px;color:#B23C00}
.prose pre{background:#0E0E10;color:#E4E4E8;border-radius:12px;padding:22px 24px;overflow-x:auto;
  font-size:14px;line-height:1.65;margin:0 0 24px}
.prose pre code{background:none;border:0;padding:0;color:inherit}

.prose table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15px}
.prose th{text-align:left;font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);border-bottom:2px solid var(--bd);padding:12px 10px}
.prose td{border-bottom:1px solid #EFEFEF;padding:13px 10px;color:var(--body);vertical-align:top}

/* ==================== Artikelkopf ==================== */
.article-cats a{display:inline-block;background:var(--o);color:#fff;font-family:var(--fd);
  font-weight:700;font-size:12px;letter-spacing:.06em;padding:5px 12px;border-radius:4px;
  text-transform:none}
.article-cats a:hover{background:var(--o-dk);color:#fff}
.pagehero .article-cats{margin-bottom:20px}
.article-meta{display:flex;gap:0;flex-wrap:wrap;font-size:14px;color:#B0B0B0;margin-top:20px}
.article-meta span{padding-right:16px;margin-right:16px;border-right:1px solid rgba(255,255,255,.22)}
.article-meta span:last-child{border-right:0;padding-right:0;margin-right:0}

.article-hero-img{border-radius:14px;overflow:hidden;margin:0 0 38px;border:1px solid var(--bd)}
.article-hero-img img{width:100%;display:block}

.article-share{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px;padding-top:26px;
  border-top:1px solid var(--bd)}

@media(max-width:720px){
  .prose{font-size:16.5px}
  .prose > p:first-of-type{font-size:18px}
  .prose h2{font-size:1.42rem;margin-top:38px}
  .prose blockquote{padding:20px 22px}
  .prose blockquote p{font-size:17px}
}


.ui-note{margin:0;padding:12px 16px 14px;font-size:12px;line-height:1.5;color:#8A8A8A;
  border-top:1px solid #23232A;background:#0D0D10}



/* ==================== Bildschirmaufnahmen des def.Portals ====================
   Screenshots brauchen einen Rahmen, sonst franst die helle Oberflaeche gegen den
   hellen Seitengrund aus, und eine Unterschrift, die sagt, was zu sehen ist. */
.shotfig{margin:0;display:flex;flex-direction:column;gap:14px}
.shotfig-img{border:1px solid var(--bd);border-radius:var(--rshot);overflow:hidden;background:var(--gry);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.45)}
.shotfig-img img{width:100%;height:auto;display:block}
.shotfig figcaption{display:flex;flex-direction:column;gap:5px;padding-left:14px;
  border-left:3px solid var(--o)}
.shotfig figcaption b{font-family:var(--fd);font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.35}
.shotfig figcaption span{font-size:14px;line-height:1.6;color:var(--body)}
.shotgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.shotgrid.wide{grid-template-columns:1fr}
/* Dunkle Motive (Bericht) bekommen keinen hellen Fuellgrund untergelegt. */
.shotfig.dark .shotfig-img{background:var(--dark);border-color:#2A2A2A}
@media(max-width:860px){.shotgrid{grid-template-columns:1fr;gap:28px}}

/* Hinweis, dass die Aufnahmen aus einem Demo-Mandat stammen. */
.shotnote{margin-top:26px;font-size:13.5px;line-height:1.6;color:var(--mut);
  background:var(--gry);border:1px solid var(--bd);border-radius:12px;padding:14px 18px}
.shotnote b{color:var(--ink2)}

/* ==================== Feinschliff zu den Motivfotos ====================
   Die Schlangenbilder sind kontrastreich und sehr dunkel. In Karten und Panels
   brauchen sie deshalb einen anderen Bildausschnitt als die frueheren Grafiken. */
.fpanel-media img{object-position:center 44%}
.sc-img .sc-photo{object-position:center 42%}
.dd-feat img{object-position:center 40%}
/* Bildschirmaufnahmen duerfen nicht wie Motivfotos beschnitten werden - sonst fehlt
   genau der Teil der Oberflaeche, den man zeigen will. */
.sc-img .sc-photo.shot{object-fit:contain;object-position:center;height:auto;min-height:0;
  border:1px solid #2A2A2A;border-radius:var(--rshot);background:#0D0D0D}
/* Das Portal-Bild im Menue hatte als einziges gar keine Rundung. */
.dd-feat img.shot{object-position:left top;border-radius:var(--rshot);border:1px solid #2A2A2A}
.dd-feat:has(img.shot){padding:14px 14px 0}
.dd-feat:has(img.shot) .df-body{padding:16px 8px 20px}

/* Motivbilder in Panels bekommen eine dunkle Kante nach innen, damit die
   Kartenkante nicht hart gegen das Motiv schneidet. */
.fpanel-media{position:relative}
.fpanel-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.55),transparent 34%)}
@media(max-width:860px){
  .fpanel-media::after{background:linear-gradient(180deg,rgba(10,10,10,.5),transparent 30%)}
}

/* Der Seitenkopf der Leistungsseiten mit Motivfoto: Wasserzeichen-Icon zuruecknehmen,
   damit es nicht mit dem Tier konkurriert. */
.pagehero:has(img[src*="snake-"]) .pagehero-mark{opacity:.5}

/* ==================== Lösungs-Menü: Überblick-Eintrag absetzen ====================
   Jede Spalte beginnt mit der Zielgruppen-Übersicht, darunter deren eigene Angebote.
   Die Trennlinie macht sichtbar, dass es zwei Ebenen sind. */
.dd-i--all{border-bottom:1px solid var(--bd);margin-bottom:6px;padding-bottom:12px}
.dd-i--all b{color:var(--ink)}
.dd-c .dd-i span b{display:block;line-height:1.35}
.dd-g4 .dd-c,.dd-g6 .dd-c{padding:24px 20px 20px}
.dd-g4 .dd-i,.dd-g6 .dd-i{padding:8px 10px;margin:0 -10px}
.dd-g4 .dd-i b,.dd-g6 .dd-i b{font-size:14.5px}
@media(max-width:1100px){
  .dd-g4,.dd-g6{grid-template-columns:repeat(2,1fr)}
}

/* ==================== Schnellfinder (Startseite) ==================== */
.finder{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd);border-radius:14px;
  padding:26px 24px 22px;transition:.22s;position:relative}
.fcard:hover{border-color:rgba(255,85,0,.5);box-shadow:0 14px 34px rgba(255,85,0,.1);transform:translateY(-3px)}
.fc-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.fc-ic{width:26px;height:26px;color:var(--o);flex:none}
.fc-top b{font-family:var(--fd);font-size:1.06rem;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.fc-n{font-family:var(--fd);font-size:12.5px;font-weight:600;color:var(--o-text);margin-bottom:14px}
.fc-list{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.fc-list span{font-size:14px;color:var(--body);padding-left:16px;position:relative;line-height:1.45}
.fc-list span::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--o);opacity:.45}
.fc-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);
  font-weight:600;font-size:14px;color:var(--o-text)}
.fc-go svg{width:14px;height:14px;transition:transform .2s}
.fcard:hover .fc-go svg{transform:translateX(4px)}
@media(max-width:1040px){.finder{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.finder{grid-template-columns:1fr}}

/* ==================== "Kurz erklärt" — Grundlagen im Kontext ==================== */
.explain{background:var(--gry);border:1px solid var(--bd);border-radius:14px;padding:26px 28px;margin:0 0 34px}
.explain-h{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.explain-h svg{width:20px;height:20px;color:var(--o);flex:none}
.explain-h span{font-family:var(--fd);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.explain-more{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--fd);
  font-weight:600;font-size:13.5px;color:var(--o-text)}
.explain-more svg{width:13px;height:13px;transition:transform .2s}
.explain-more:hover svg{transform:translateX(3px)}
.explain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px}
.explain-item b{display:block;font-family:var(--fd);font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.explain-item p{margin:0;font-size:14.5px;line-height:1.6;color:var(--body)}
@media(max-width:760px){.explain-grid{grid-template-columns:1fr}.explain{padding:22px 20px}}

/* Gegenüberstellung der Testarten */
.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.boxcard{background:#fff;border:1px solid var(--bd);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.boxcard-h{padding:22px 24px 18px;border-bottom:1px solid var(--bd)}
.boxcard-h .bx-n{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--o-text);display:block;margin-bottom:8px}
.boxcard-h h3{font-size:1.2rem;font-weight:700;margin:0}
.boxcard-b{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.boxcard-b .bx-img{font-size:14.5px;line-height:1.6;color:var(--ink2);font-style:italic;
  padding-left:14px;border-left:2px solid var(--o);margin-bottom:16px}
.boxcard-b p{font-size:14.5px;line-height:1.62;color:var(--body);margin:0 0 14px}
.boxcard-b .bx-when{margin-top:auto;padding-top:14px;border-top:1px solid #EFEFEF;font-size:14px;color:var(--ink2)}
.boxcard-b .bx-when strong{color:var(--ink)}
@media(max-width:900px){.boxes{grid-template-columns:1fr}}