:root{--black:#0a1438;--grey-med:#5b6675;--grey:#d5d9de;--offwht:#f4f5f7;--white:#fff;--red:#2a43a0;--red-dark:#22378a;--radius:4px;--font:"Atlas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;--maxw:1200px;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--black);background:var(--white);font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
h1,h2,h3,h4,.mh,.ct-h1,.ct-title,.ckh{font-weight:300;letter-spacing:-.02em;line-height:1.1}.mh{display:block}p{font-weight:300}a{color:inherit;text-decoration:none}
.label{font-size:11px;text-transform:uppercase;letter-spacing:1.8px;font-weight:300}
svg{stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:300;text-transform:uppercase;letter-spacing:1.8px;padding:14px 22px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;transition:all .25s var(--ease);white-space:nowrap}
.btn .ar{font-size:14px;transition:transform .25s var(--ease)}.btn:hover .ar{transform:translateX(4px)}
.btn--red{background:var(--red);color:#fff}.btn--red:hover{background:var(--red-dark)}
.btn--outline{background:transparent;color:var(--black);border-color:var(--grey)}.btn--outline:hover{border-color:var(--black)}
.btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}.btn--light:hover{border-color:#fff}
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--black);transition:background .3s}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-size:17px;letter-spacing:.5px;color:#fff;font-weight:300}.logo .ai{color:var(--red);font-weight:400}
.menu{display:flex;align-items:center;gap:34px}.menu a{color:#fff;font-size:15px;opacity:.85;transition:opacity .2s}.menu a:hover{opacity:1}
.menu .caret{font-size:10px;opacity:.6;margin-left:5px}
.burger{display:flex;flex-direction:column;gap:5px;width:26px}.burger span{height:1px;background:#fff;display:block}
.cta-tab{position:fixed;top:74px;right:0;z-index:60;writing-mode:vertical-rl;background:var(--red);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:1.8px;padding:26px 15px;border-radius:0 0 0 var(--radius);cursor:pointer}.cta-tab:hover{background:var(--red-dark)}
.phero{padding:150px 0 90px}.phero.light{background:var(--offwht)}.phero.dark{background:var(--black);color:#fff}
.phero .eyebrow{margin-bottom:20px;display:block}.phero.light .eyebrow{color:var(--red)}.phero.dark .eyebrow{color:var(--grey-med)}
.phero h1{font-size:56px;max-width:960px;line-height:1.05}.phero p.sub{max-width:600px;font-size:18px;margin-top:24px}
.phero.light p.sub{color:#43434a}.phero .cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:720px){.phero h1{font-size:32px}.phero{padding:120px 0 60px}}
section.band{padding:100px 0;border-top:1px solid var(--grey)}.band.grey{background:var(--offwht)}.band.dark{background:var(--black);color:#fff}
.eyebrow{color:var(--grey-med);margin-bottom:18px;display:block}.band.dark .eyebrow{color:var(--grey-med)}
.sec-h{font-size:42px;max-width:740px;line-height:1.1}@media(max-width:720px){.sec-h{font-size:28px}}
.intro{max-width:620px;color:#43434a;font-size:17px;margin-top:22px}.band.dark .intro{color:#c9c9cf}
.tex{position:absolute;inset:0;opacity:.4;background-image:repeating-linear-gradient(60deg,rgba(0,0,0,.12) 0 2px,transparent 2px 9px),repeating-linear-gradient(-25deg,rgba(0,0,0,.10) 0 1px,transparent 1px 12px)}
.duo-grey{background:linear-gradient(115deg,#dfe3e6,#8b9298)}.duo-slate{background:linear-gradient(115deg,#8b949b,#5c646b)}.duo-red{background:linear-gradient(120deg,var(--red),#16224e)}.duo-dark{background:linear-gradient(120deg,#16224e,#0a1438)}
/* Die Haarlinien im Gitter kommen aus dem Schlagschatten der Karten und nicht
   aus dem Hintergrund des Gitters. Bei ungerader Kartenzahl bliebe der letzte,
   unbesetzte Platz sonst als graue Flaeche stehen. */
.grid{display:grid;gap:1px;background:#fff;border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden;margin-top:56px}
.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.cell{background:#fff;padding:38px 32px;min-height:230px;display:flex;flex-direction:column;gap:16px;box-shadow:0 0 0 1px var(--grey)}
.band.dark .grid{background:var(--black);border-color:rgba(255,255,255,.12)}
.band.dark .cell{background:var(--black);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.cell .ic{width:28px;height:28px;color:var(--red)}.cell h3,.cell h2{font-size:20px}.cell p{font-size:14px;color:#57575e;line-height:1.55}.band.dark .cell p{color:var(--grey-med)}
@media(max-width:820px){.g3,.g4{grid-template-columns:1fr 1fr}}@media(max-width:520px){.g3,.g4{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.stat{border-top:1px solid var(--grey);padding-top:26px}.stat .n{font-size:60px;font-weight:300;letter-spacing:-.03em;line-height:1}.stat .n .u{color:var(--red)}
.stat .d{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:var(--grey-med);margin-top:16px}
@media(max-width:720px){.stats{grid-template-columns:1fr}.stat .n{font-size:44px}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:40px}
.split.rev .txt{order:2}.split .art{border-radius:var(--radius);aspect-ratio:4/3;position:relative;overflow:hidden}
.split h3{font-size:30px;margin-bottom:18px}.split p{color:#57575e;font-size:16px}
@media(max-width:820px){.split{grid-template-columns:1fr}.split.rev .txt{order:0}}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.tabs button{font-family:var(--font);font-size:12px;text-transform:uppercase;letter-spacing:1.4px;padding:12px 18px;border:1px solid var(--grey);background:#fff;border-radius:var(--radius);cursor:pointer;color:var(--black);transition:all .2s}
.tabs button:hover:not(.on){border-color:var(--black);color:var(--black)}
.tabs button.on{background:var(--red);color:#fff;border-color:var(--red)}
.ftabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px;border-bottom:1px solid var(--grey);padding-bottom:0}
.ftabs button{font-family:var(--font);font-size:12px;text-transform:uppercase;letter-spacing:1.3px;padding:14px 4px;margin-right:22px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;color:var(--grey-med);transition:all .2s}
.ftabs button:hover:not(.on){color:var(--black);border-color:var(--grey)}
.ftabs button.on{color:var(--black);border-color:var(--red)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.card{border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease)}
.card:hover{transform:translateY(-4px)}
.card .thumb{height:180px;position:relative}.card .body{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}
.card .k{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--grey-med)}.card .t{font-size:18px;font-weight:300;line-height:1.3;flex:1}
.card .more{font-size:12px;text-transform:uppercase;letter-spacing:1.4px}.card .more .ar{color:var(--red)}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.member .ph{aspect-ratio:1/1;border-radius:var(--radius);margin-bottom:16px;position:relative;overflow:hidden}
.member h3{font-size:19px}.member .role{font-size:13px;color:var(--grey-med);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
@media(max-width:820px){.team{grid-template-columns:1fr 1fr}}
.ctaband{background:var(--red);color:#fff;padding:120px 0}.ctaband h2{font-size:44px;max-width:780px;line-height:1.08}.ctaband .row{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
@media(max-width:720px){.ctaband h2{font-size:28px}}
.ctaband.grey{background:#ebeef1;color:var(--black)}.ctaband.grey .btn--light{color:var(--black);border-color:var(--grey)}.ctaband.grey .btn--light:hover{border-color:var(--black)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:720px;margin-top:40px}
.form .full{grid-column:1/-1}.form label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--grey-med);margin-bottom:8px}
.form input,.form textarea{width:100%;border:1px solid var(--grey);border-radius:var(--radius);padding:13px 15px;font-family:var(--font);font-size:15px;outline:none;transition:border .2s}
.form input:focus,.form textarea:focus{border-color:var(--black)}.form textarea{min-height:130px;resize:vertical}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.faq{max-width:860px;margin-top:44px}.qa{border-top:1px solid var(--grey)}.qa:last-child{border-bottom:1px solid var(--grey)}
.qa .q{width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:var(--font);font-size:20px;font-weight:300;color:var(--black);padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;letter-spacing:-.01em}
.qa .q .pm{color:var(--red);font-size:24px;flex:none;transition:transform .25s}.qa.open .q .pm{transform:rotate(45deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}.qa .a p{padding:0 0 26px;color:#57575e;font-size:15px;max-width:680px}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.reason{border:1px solid var(--grey);border-radius:var(--radius);padding:32px;cursor:pointer;transition:all .2s}.reason:hover{border-color:var(--red)}
.reason .ic{width:24px;height:24px;color:var(--red);margin-bottom:18px}.reason h3{font-size:20px;margin-bottom:8px}.reason p{font-size:14px;color:#57575e}
@media(max-width:820px){.reasons{grid-template-columns:1fr}}
.jobs{margin-top:40px}.job{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;border-top:1px solid var(--grey);cursor:pointer;transition:padding .25s,background .25s}
.job:hover{background:var(--offwht);padding-left:14px}.job:hover h3{color:var(--red)}.job:hover .ar{transform:translateX(6px)}
.job:last-child{border-bottom:1px solid var(--grey)}.job h3{font-size:21px}.job .meta{font-size:13px;color:var(--grey-med);text-transform:uppercase;letter-spacing:1px;margin-top:6px}
.job h3{transition:color .2s}.job .ar{color:var(--red);font-size:20px;transition:transform .25s}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden;margin-top:56px}
.benefit{background:var(--black);padding:34px 28px;min-height:180px}.benefit .ic{width:24px;height:24px;color:var(--red);margin-bottom:18px}.benefit h3{font-size:19px;margin-bottom:8px}.benefit p{font-size:14px;color:var(--grey-med)}
@media(max-width:820px){.benefits{grid-template-columns:1fr}}
footer.ft{background:var(--black);color:#fff;padding:80px 0 40px}
.ftgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}.ftgrid h5,.ftgrid .fh{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--grey-med);margin-bottom:18px;font-weight:400}
.ftgrid a{display:block;color:#e6e6e8;font-size:14px;padding:6px 0;opacity:.85}.ftgrid a:hover{opacity:1;color:var(--red)}
.ft .logo{font-size:22px;margin-bottom:16px}.ft .tag{color:var(--grey-med);font-size:14px;max-width:280px}
.ftbottom{display:flex;justify-content:space-between;align-items:center;margin-top:60px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);color:var(--grey-med);font-size:12px;flex-wrap:wrap;gap:16px}
.social{display:flex;gap:14px}.social span{width:32px;height:32px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;font-size:12px}
@media(max-width:820px){.ftgrid{grid-template-columns:1fr 1fr}}
.note-ext{background:#fff4f4;border:1px solid #f3c9cc;color:#8a2a2f;border-radius:var(--radius);padding:12px 18px;font-size:12.5px;margin:0 0 -40px;position:relative;top:-40px}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1!important;transform:none!important}
.bb-menu-x .xln{clip-path:none!important}
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#0a1438;padding:12px 18px;font-size:14px;border:2px solid #2a43a0;border-radius:0 0 4px 0}
.skip-link:focus{left:0}
main:focus{outline:none}
.bb-mega{position:fixed;top:74px;left:0;right:0;background:#0a1438;border-top:1px solid rgba(255,255,255,.08);z-index:59;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .22s var(--ease)}
.bb-mega.open{opacity:1;visibility:visible;transform:none}
.bb-mega .inner{max-width:var(--maxw);margin:0 auto;padding:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1)}
.bb-mega a{display:block;background:#0a1438;padding:28px;color:#fff;transition:background .2s}.bb-mega a:hover{background:#16224e}
.bb-mega .k{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:var(--red);margin-bottom:10px}
.bb-mega h4,.bb-mega .mh{font-size:22px;margin-bottom:8px}.bb-mega p{font-size:13px;color:var(--grey-med)}
@media(max-width:820px){.bb-mega .inner{grid-template-columns:1fr}}
.bb-cookie{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--grey);box-shadow:0 -10px 40px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .3s var(--ease)}
.bb-cookie.show{transform:none}
.bb-cookie .inner{max-width:var(--maxw);margin:0 auto;padding:26px 40px;display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:center}
.bb-cookie h4,.bb-cookie .ckh{font-size:18px;margin-bottom:8px}.bb-cookie p{font-size:13px;color:#57575e;max-width:600px}.bb-cookie a{color:var(--red)}
.bb-cookie .opts{display:flex;gap:22px;margin:16px 0 4px;flex-wrap:wrap}
.bb-cookie .opt{display:flex;align-items:center;gap:9px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#57575e}
.bb-sw{position:relative;width:38px;height:20px;flex:none}.bb-sw input{opacity:0;width:0;height:0;position:absolute}
.bb-sw .tr{position:absolute;inset:0;background:var(--grey);border-radius:20px;transition:.2s;cursor:pointer}
.opt:hover .bb-sw .tr{background:#b9b9c2}.opt:hover .bb-sw input:checked+.tr{background:var(--red-dark)}.opt:hover .bb-sw input:disabled+.tr{background:#c9c9cf}
.bb-sw .tr:before{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.bb-sw input:checked+.tr{background:var(--red)}.bb-sw input:checked+.tr:before{transform:translateX(18px)}.bb-sw input:disabled+.tr{background:#c9c9cf;cursor:not-allowed}
.bb-cookie .btns{display:flex;flex-direction:column;gap:10px}.bb-cookie .btns .btn{justify-content:center}
@media(max-width:820px){.bb-cookie .inner{grid-template-columns:1fr;gap:18px}}
.bb-modal{position:fixed;inset:0;z-index:90;background:rgba(15,15,18,.6);display:none;align-items:center;justify-content:center;padding:24px}
.bb-modal.open{display:flex}
.bb-modal .box{background:#fff;border-radius:var(--radius);max-width:520px;width:100%;padding:40px;position:relative;max-height:90vh;overflow:auto}
.bb-modal .x{position:absolute;top:14px;right:16px;width:30px;height:30px;background:none;border:0;padding:0;cursor:pointer;color:var(--grey-med)}
.bb-modal .x .xln{width:28px;margin-left:-14px}
.bb-modal .eyebrow{color:var(--red);display:block;margin-bottom:12px}.bb-modal h3{font-size:28px;margin-bottom:22px}
.bb-field{margin-bottom:16px}.bb-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--grey-med);margin-bottom:7px}
.bb-field input,.bb-field textarea{width:100%;border:1px solid var(--grey);border-radius:var(--radius);padding:12px 14px;font-family:var(--font);font-size:15px;outline:none;transition:border .2s}
.bb-field input:focus,.bb-field textarea:focus{border-color:var(--black)}.bb-field textarea{min-height:100px;resize:vertical}
.bb-consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;font-size:12.5px;color:#57575e;line-height:1.5}
.bb-consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--red)}.bb-consent a{color:var(--red)}
.bb-ok{background:var(--offwht);border:1px solid var(--grey);border-radius:var(--radius);padding:22px;text-align:center;color:#1f7a34;font-size:15px}
.bb-note{font-size:11px;color:var(--grey-med);margin-top:14px}
.burger{cursor:pointer;display:flex}
@media(max-width:720px){
 .burger{display:flex}
 .menu{position:fixed;top:74px;left:0;right:0;background:#0a1438;flex-direction:column;align-items:flex-start;gap:0;padding:8px 0;transform:translateY(-130%);transition:transform .28s var(--ease);border-top:1px solid rgba(255,255,255,.08)}
 .menu.open{transform:none}.menu a{padding:15px 40px;width:100%;font-size:15px}
}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.carousel{margin-top:20px}.slide{display:none}.slide.on{display:block}
.carousel .nav-row{display:flex;align-items:center;gap:18px;margin-top:30px}
.carousel .cbtn{width:46px;height:46px;border:1px solid var(--grey);border-radius:50%;background:none;cursor:pointer;font-size:17px;color:var(--black);display:grid;place-items:center;transition:all .2s}
.carousel .cbtn:hover{border-color:var(--black)}
.carousel .dots{display:flex;gap:10px}.carousel .dots span{width:8px;height:8px;border-radius:50%;background:var(--grey);cursor:pointer;transition:background .2s}.carousel .dots span.on{background:var(--red)}
.cc{margin-top:56px;position:relative}
.cc-view{overflow-x:auto;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}
.cc-view::-webkit-scrollbar{display:none}
.cc-track{display:flex;gap:24px}
.cc-track .case{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;margin:0}
@media(max-width:1024px){.cc-track .case{flex:0 0 calc((100% - 24px)/2)}}
@media(max-width:640px){.cc-track .case{flex:0 0 100%}.cc{margin-top:36px}}
.cc .nav-row{display:flex;align-items:center;gap:18px;margin-top:30px}
.cc .cbtn{width:46px;height:46px;border:1px solid var(--grey);border-radius:50%;background:none;cursor:pointer;font-size:17px;color:var(--black);display:grid;place-items:center;transition:all .2s}
.cc .cbtn:hover{border-color:var(--black)}.cc .cbtn[disabled]{opacity:.35;cursor:default;pointer-events:none}
.cc .dots{display:flex;gap:10px}.cc .dots span{width:8px;height:8px;border-radius:50%;background:var(--grey);cursor:pointer;transition:background .2s}.cc .dots span.on{background:var(--red)}
.cc.cc-static .nav-row{display:none}
.cc .dots,.carousel .dots{display:none}
/* Top-Nav größer + Hamburger obere/untere Linie dünner (auch auf der Startseite) */
header.nav .menu a{font-size:15px}
header.nav .menu .caret,.menu .caret{display:none}
/* Desktop: Menüschrift direkt links neben dem Burger, geringerer Abstand. */
header.nav .wrap{justify-content:flex-start;gap:20px}
header.nav .logo{margin-right:auto}
header.nav .menu{gap:24px}
/* Burgerbalken folgen der Textfarbe, damit die adaptive Nav sie mitfärbt. */
header.nav .burger span{background:currentColor}
header.nav .burger{color:#fff}
@media(max-width:720px){header.nav .wrap{gap:0}header.nav .menu{gap:0}}
.burger{gap:5px;width:32px}
.burger span{height:1px;animation:burgerIn .5s var(--ease) both}
.burger span:nth-child(1){animation-delay:.12s}
.burger span:nth-child(2){animation-delay:.19s}
.burger span:nth-child(3){animation-delay:.26s}
@keyframes burgerIn{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.burger span,.bb-menu.open .bb-menu-x .xln{animation:none}.bb-menu-x .xln{clip-path:none}}
/* Minimale Scrollbar, passend zur Optik. Sie blendet sich aus, solange nicht
   gescrollt wird - der Platz bleibt aber reserviert (scrollbar-gutter und die
   feste Breite der Leiste), damit beim Ein- und Ausblenden nichts springt.
   Sichtbar wird sie über die Klasse scr, die das Skript beim Scrollen setzt. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
html.scr *{scrollbar-color:var(--red) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:20px;border:2px solid transparent;background-clip:padding-box;transition:background-color .35s var(--ease)}
html.scr ::-webkit-scrollbar-thumb{background:var(--red)}
html.scr ::-webkit-scrollbar-thumb:hover{background:var(--red-dark)}
@media(prefers-reduced-motion:reduce){::-webkit-scrollbar-thumb{transition:none}}
/* Card-Hover mit Pfeil, wie die Buttons */
.fcard,.btype,.case,.mega .mcard{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.fcard .go,.btype .go,.case .more .ar{display:inline-block;transition:transform .25s var(--ease)}
.fcard:hover,.btype:hover{transform:translateY(-4px)}
.case:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,20,56,.10)}
.fcard:hover .go,.btype:hover .go,.case:hover .more .ar{transform:translateX(6px)}
/* Suche im blauen Menü-Panel + Live-Ergebnisse */
.bb-menu-left{flex-direction:column;justify-content:center;gap:0}
.bb-menu-left .bb-search-wrap{width:100%;max-width:520px;position:relative}
.bb-menu-left .ct-field--act{width:100%;max-width:none;margin:0}
.bb-menu-left .ct-field--act input{border-color:rgba(255,255,255,.5);background:transparent;color:#fff}
.bb-menu-left .ct-field--act input:hover{border-color:#fff}
.bb-menu-left .ct-field--act label{color:rgba(255,255,255,.75)}
.bb-menu-left .ct-field--act input::placeholder{color:rgba(255,255,255,.7)}
.bb-menu-left .ct-field--act .ct-act{background:#fff;color:var(--red)}
.bb-menu-left .ct-field--act .ct-act:hover{background:var(--offwht)}
/* Auf dem royalblauen Menüpanel wäre ein blaues Feld unsichtbar:
   Aktivzustand daher in --red-dark mit voller weißer Kontur. */
.bb-menu-left .ct-field--act.on input{background:var(--red-dark);border-color:#fff;color:#fff}
.bb-menu-left .ct-field--act.on label{color:rgba(255,255,255,.85)}
.bb-search-results{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:5;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;max-height:min(46vh,420px);overflow-y:auto;box-shadow:0 22px 54px rgba(5,9,28,.32)}
.bb-search-results.on{display:flex}
.bb-search-results a{display:block;padding:13px 16px;color:var(--black);border-bottom:1px solid var(--offwht);transition:background .15s}
.bb-search-results a:last-child{border-bottom:0}
.bb-search-results a:hover{background:var(--offwht)}
.bb-search-results a .k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--red);margin-bottom:3px}
.bb-search-results a .t{font-size:15px;font-weight:300}
.bb-search-results .empty{padding:14px 16px;color:var(--grey-med);font-size:14px}
.tabpanels{margin-top:32px}.tabpanel{display:none}.tabpanel.on{display:block}.tabpanel p{font-size:18px;color:#43434a;max-width:660px;font-weight:300}
.card.hide{display:none}
.ct-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.ct-left{background:var(--red);color:#fff;padding:150px 60px 70px}
.ct-left h1,.ct-left .ct-h1{font-size:46px;max-width:470px;line-height:1.1}
.ct-reasons{margin-top:56px;display:flex;flex-direction:column;gap:14px;max-width:560px}
.ct-reason{font-family:var(--font);font-weight:300;text-align:left;background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;padding:16px 22px;border-radius:var(--radius);font-size:15px;cursor:pointer;transition:all .2s}
.ct-reason:hover{border-color:#fff}.ct-reason.on{background:#fff;color:var(--black);border-color:#fff}
.ct-right{padding:150px 60px 70px;max-width:820px}
.ct-right h2,.ct-right .ct-title{font-size:44px;margin-bottom:44px}
.ct-lab{color:var(--red);font-size:11px;text-transform:uppercase;letter-spacing:1.6px;margin-bottom:26px}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Flying-Label-Felder: Label liegt absolut über dem Feld und wandert nach oben,
   sobald das Feld fokussiert ist oder Inhalt hat (.up wird per JS gesetzt). */
.ct-field{margin-bottom:16px;position:relative}
.ct-field label{position:absolute;left:15px;top:17px;font-size:15px;line-height:1.2;letter-spacing:0;text-transform:none;color:#6a707d;margin:0;pointer-events:none;transform-origin:left top;transition:transform .18s var(--ease),color .18s var(--ease);z-index:2;max-width:calc(100% - 52px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-field input,.ct-field select,.ct-field textarea{width:100%;border:1px solid var(--grey);border-radius:var(--radius);padding:25px 38px 9px 15px;font-family:var(--font);font-size:15px;outline:none;background:#fff;transition:border-color .18s,background .18s,color .18s;color:var(--black);position:relative;z-index:1}
.ct-field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6a707d 50%),linear-gradient(135deg,#6a707d 50%,transparent 50%);background-position:calc(100% - 20px) calc(50% + 3px),calc(100% - 15px) calc(50% + 3px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:62px}
.ct-field input:hover,.ct-field select:hover,.ct-field textarea:hover{border-color:var(--grey-med)}
.ct-field.up label{transform:translateY(-10px) scale(.72);color:#6a707d}
/* Solange das Label mittig im Feld steht, bleibt der native Text unsichtbar:
   beim Auswahlfeld der Platzhalter, beim Datumsfeld die Maske tt.mm.jjjj.
   Sonst stuenden zwei Beschriftungen uebereinander. Die Liste selbst behaelt
   ihre Schriftfarbe, sonst waere sie im geoeffneten Zustand leer. */
.ct-field.sel:not(.up) select{color:transparent}
.ct-field select option{color:var(--black)}
.ct-field:not(.up) input[type=date],.ct-field:not(.up) input[type=time],
.ct-field:not(.up) input[type=month],.ct-field:not(.up) input[type=week],
.ct-field:not(.up) input[type=datetime-local]{color:transparent}
.ct-field input[type=date]::-webkit-calendar-picker-indicator,
.ct-field input[type=time]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.ct-field.on input[type=date]::-webkit-calendar-picker-indicator,
.ct-field.on input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.9}
.ct-field textarea{min-height:104px;resize:vertical;padding-top:27px}
.ct-field.ta label{top:15px}
/* Aktiv: kein Outline-Ring, sondern das Feld selbst in Royal Blue mit weißer Schrift */
.ct-field.on input,.ct-field.on select,.ct-field.on textarea{background:var(--red);border-color:var(--red);color:#fff;outline:none!important;box-shadow:none}
.ct-field.on input::placeholder,.ct-field.on textarea::placeholder{color:rgba(255,255,255,.72)}
.ct-field.on label{color:rgba(255,255,255,.85)}
.ct-field.on select{background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%)}
.ct-field.err:not(.on) input,.ct-field.err:not(.on) select,.ct-field.err:not(.on) textarea{border-color:#c0392b}
.ct-field.err .ct-msg{display:block}
.ct-msg{display:none;font-size:11.5px;color:#c0392b;margin-top:5px;line-height:1.4}
/* Bestätigungshaken rechts im Feld. Er erscheint erst, wenn die Eingabe abgeschlossen
   ist (okshow, gesetzt beim Verlassen des Feldes bzw. bei Auswahl). Die Klasse ok ist
   die reine Gültigkeit und steuert nur Logik, keine Darstellung.
   Der Platz rechts ist dauerhaft reserviert - sonst würde der Text springen, sobald
   der Haken auftaucht. Bei Auswahlfeldern sitzt der Haken links neben dem Pfeil. */
.ct-ok{position:absolute;right:13px;top:50%;margin-top:-8px;width:16px;height:16px;color:#1f9d55;opacity:0;transform:scale(.6);transition:opacity .2s var(--ease),transform .25s var(--ease);pointer-events:none;z-index:3}
.ct-field.ta .ct-ok{top:16px;margin-top:0}
.ct-field.sel .ct-ok{right:36px}
.ct-field.okshow .ct-ok{opacity:1;transform:scale(1)}
.ct-field.okshow.on .ct-ok{color:#7ff0b4}
/* Führendes Symbol im Feld. Es benennt die Art des Feldes auf einen Blick, ersetzt
   aber keine Beschriftung - deshalb aria-hidden und kein eigener Fokus. Nur Felder
   mit Symbol bekommen den größeren linken Abstand, mehrzeilige Textfelder tragen
   bewusst keines und bleiben unverändert. */
.ct-ic{position:absolute;left:15px;top:50%;margin-top:-8px;width:16px;height:16px;color:#6a707d;pointer-events:none;z-index:3;transition:color .18s var(--ease)}
.ct-field.ic input,.ct-field.ic select{padding-left:43px}
.ct-field.ic label{left:43px;max-width:calc(100% - 80px)}
.ct-field.ic.on .ct-ic{color:rgba(255,255,255,.9)}
.ct-check{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:#3a3a40;margin-bottom:14px;line-height:1.5}
.ct-check input{margin-top:2px;width:16px;height:16px;accent-color:var(--red);flex:none}
.ct-note{font-size:11px;color:var(--grey-med);margin:14px 0 28px;line-height:1.6;max-width:640px}.ct-note a{color:var(--red)}
.ct-submit{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--red);color:#fff;border:0;border-radius:var(--radius);padding:22px 26px;font-size:12px;text-transform:uppercase;letter-spacing:1.8px;cursor:pointer;font-family:var(--font);transition:background .2s}
.ct-submit:hover{background:var(--red-dark)}
/* Anmelden/Registrieren als Reiterkarte. Die Reiter sitzen wie Registerlaschen auf
   dem Kartenkörper: der aktive Reiter ist weiß, sein unterer Rand wird durch den
   negativen Abstand vom Kartenrand überdeckt, sodass Lasche und Karte verschmelzen.
   Umgeschaltet wird nur die Sichtbarkeit - beide Formulare bleiben im Markup, damit
   Eingaben beim Wechsel nicht verloren gehen. */
.auth{max-width:560px;width:100%}
.auth-tabs{display:flex;gap:4px;padding:0 0 0 2px;position:relative;z-index:2}
.auth-tab{appearance:none;background:var(--offwht);border:1px solid var(--grey);border-bottom-color:var(--grey);border-radius:var(--radius) var(--radius) 0 0;padding:14px 26px;margin-bottom:-1px;font-family:var(--font);font-size:14px;color:var(--grey-med);cursor:pointer;transition:background .2s,color .2s}
.auth-tab:hover{color:var(--black)}
.auth-tab.on{background:#fff;color:var(--black);border-bottom-color:#fff;font-weight:500}
.auth-modal .box{background:transparent;padding:0;max-width:600px;overflow:visible}
.auth-x{margin-left:auto;align-self:center;position:relative;width:30px;height:30px;background:none;border:0;padding:0;cursor:pointer;color:#fff;opacity:.85;transition:opacity .2s}
.auth-x:hover{opacity:1}
.auth-x .xln{width:26px;margin-left:-13px}
.auth-alt-link{font-size:12.5px;color:var(--red);text-decoration:none;white-space:nowrap}
.auth-alt-link:hover{text-decoration:underline}
.auth-body{background:#fff;border:1px solid var(--grey);border-radius:0 var(--radius) var(--radius) var(--radius);padding:34px 32px 30px}
.auth-pane{display:none}
.auth-pane.on{display:block;animation:authIn .28s var(--ease) both}
@keyframes authIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.auth-pane h3{font-size:26px;font-weight:400;letter-spacing:-.02em;margin:0 0 8px}
.auth-lead{font-size:14px;line-height:1.6;color:#57575e;margin:0 0 22px}
.auth-go{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--red);color:#fff;border:0;border-radius:var(--radius);padding:18px 24px;font-family:var(--font);font-size:12px;text-transform:uppercase;letter-spacing:1.6px;cursor:pointer;transition:background .2s}
.auth-go:hover{background:var(--red-dark)}
.auth-go .ar{transition:transform .2s var(--ease)}
.auth-go:hover .ar{transform:translateX(4px)}
.auth-note{font-size:11px;color:var(--grey-med);line-height:1.6;margin:14px 0 0}
.auth-alt{font-size:13px;margin:16px 0 0}
.auth-alt a{color:var(--red)}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:-2px 0 16px}
.auth-row .ct-check{margin-bottom:0}
@media(max-width:640px){.auth-tab{flex:1;padding:13px 10px;font-size:13px}.auth-body{padding:26px 20px 24px}.auth-pane h3{font-size:22px}.auth-row{flex-direction:column;align-items:flex-start;gap:10px}}
/* Schwebende Kontaktleiste unten rechts. Geschlossen ist sie nur ein Knopf; offen
   klappen die Kontaktwege mit ihren Daten darüber auf. Sie liegt unter den
   Overlays (z-index 70), damit Dialoge und Menü sie sauber verdecken. */
.fab{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.fab-list{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab-list[hidden]{display:none}
/* Solange die Cookie-Leiste steht, weicht der Knopf nach oben aus, sonst liegt er darunter. */
body.cookie-on .fab{bottom:calc(22px + var(--cookie-h,96px))}
.fab-item{display:flex;align-items:center;gap:10px;text-decoration:none;background:#fff;border:1px solid var(--grey);border-radius:999px;padding:8px 8px 8px 18px;color:var(--black);font-size:13.5px;box-shadow:0 8px 24px rgba(10,20,56,.12);opacity:0;transform:translateY(10px) scale(.94);pointer-events:none;transition:opacity .22s var(--ease),transform .28s var(--ease),border-color .2s,color .2s}
.fab-item b{font-weight:400;white-space:nowrap}
.fab-item span{font-size:11px;color:var(--grey-med);display:block;line-height:1.3}
.fab-item i{width:38px;height:38px;border-radius:50%;background:var(--offwht);color:var(--red);display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.fab-item i svg{width:17px;height:17px}
.fab-item:hover{border-color:var(--red);color:var(--red)}
.fab-item:hover i{background:var(--red);color:#fff}
.fab.open .fab-item{opacity:1;transform:none;pointer-events:auto}
.fab.open .fab-item:nth-child(1){transition-delay:.03s}
.fab.open .fab-item:nth-child(2){transition-delay:.06s}
.fab.open .fab-item:nth-child(3){transition-delay:.09s}
.fab.open .fab-item:nth-child(4){transition-delay:.12s}
.fab-btn{pointer-events:auto;width:58px;height:58px;border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 28px rgba(42,67,160,.36);transition:background .2s,transform .25s var(--ease)}
.fab-btn:hover{background:var(--red-dark);transform:scale(1.06)}
.fab-btn svg{width:22px;height:22px;transition:transform .3s var(--ease)}
.fab.open .fab-btn svg{transform:rotate(45deg)}
@media(max-width:640px){.fab{right:14px;bottom:14px}.fab-btn{width:52px;height:52px}.fab-item{font-size:13px;padding-left:15px}}
@media(prefers-reduced-motion:reduce){.fab-item{transition:opacity .01s}.fab-btn svg{transition:none}}
.ct-office{margin-top:76px}.ct-office h3{font-size:22px;margin-bottom:18px}.ct-office p{color:#43434a;font-size:15px;margin-bottom:14px;line-height:1.6}
.ct-arrow{color:var(--red);font-size:20px;display:inline-block;margin:6px 0}
.ct-contacts{display:flex;gap:80px;margin-top:10px;font-size:14px;color:#43434a;line-height:1.7;flex-wrap:wrap}.ct-contacts a{color:var(--red)}
@media(max-width:900px){.ct-split{grid-template-columns:1fr}.ct-left{padding:120px 30px 50px}.ct-left h1,.ct-left .ct-h1{font-size:32px}.ct-right{padding:50px 30px}.ct-grid{grid-template-columns:1fr}.ct-right h2,.ct-right .ct-title{font-size:30px}}
.ftl{background:#fff;border-top:1px solid var(--grey);padding:70px 0 34px;color:var(--black)}
.ftl-top{display:grid;grid-template-columns:1.1fr 2.5fr;gap:60px}
.ftl-news h3{font-size:26px;margin-bottom:16px;font-weight:300}.ftl-news h3 .ai{color:var(--red)}
.ftl-news p{color:#43434a;font-size:14px;max-width:280px}
/* Newsletterfeld nutzt bewusst dasselbe Feldverhalten wie alle anderen Formulare:
   fliegendes Label, blauer Aktivzustand, Haken nach der Prüfung. Der Pfeil sitzt
   daneben statt im Feld, sonst kollidiert er mit dem Haken. */
.ftl-form{display:flex;align-items:flex-start;gap:8px;max-width:340px;margin-top:22px}
.ftl-form .ct-field{flex:1;margin-bottom:0}
.ftl-form button{flex:0 0 44px;height:54px;border:1px solid var(--grey);border-radius:var(--radius);background:#fff;font-size:18px;cursor:pointer;color:var(--black);display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s}
.ftl-form button:hover{background:var(--red);border-color:var(--red);color:#fff}
.ftl-fine{font-size:10.5px;color:var(--grey-med);margin-top:12px;max-width:340px;line-height:1.6}
.ftl-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.ftl-cols h5,.ftl-cols .fh{font-size:16px;font-weight:300;margin-bottom:16px}
.ftl-cols a{display:block;color:#43434a;font-size:14px;padding:5px 0}.ftl-cols a:hover{color:var(--red)}
.ftl-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:60px;padding-top:24px;border-top:1px solid var(--grey)}
.ftl-legal{display:flex;flex-direction:column;gap:6px}.ftl-legal a{font-size:13px;color:#43434a}.ftl-legal a:hover{color:var(--red)}
.ftl .social span{border-color:var(--grey);color:var(--black)}
.ftl-copy{margin-top:30px;font-size:12px;color:var(--grey-med)}
@media(max-width:900px){.ftl-top{grid-template-columns:1fr}.ftl-cols{grid-template-columns:1fr 1fr}}
.bb-menu{position:fixed;inset:0;z-index:100;display:block;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s var(--ease)}
.bb-menu-wrap{max-width:none;margin:0;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;position:relative}
.bb-menu.open{opacity:1;visibility:visible}
.bb-menu-left{background:var(--red);display:flex;align-items:center;justify-content:center;position:relative;padding:40px}
.bb-menu-logo-top{position:absolute;top:26px;left:40px;color:#fff;font-size:16px;letter-spacing:.5px}.bb-menu-logo-top .ai{color:#fff;font-weight:400}
.bb-menu-img{width:56%;aspect-ratio:3/4;background:linear-gradient(160deg,#eef1f3,#c4c9cd);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bb-antennas{display:flex;gap:26px;align-items:flex-end;height:82px;margin-bottom:-2px}
.bb-antennas span{width:4px;background:#111;border-radius:3px}
.bb-antennas span:nth-child(1){height:64px}.bb-antennas span:nth-child(2){height:82px}.bb-antennas span:nth-child(3){height:54px}
.bb-device{width:62%;aspect-ratio:1/1;background:#0a1438;border-radius:3px;display:grid;place-items:center;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.bb-device .bb-menu-logo{color:#f2f2f2;font-size:20px;letter-spacing:1px}.bb-device .bb-menu-logo .ai{color:var(--red);font-weight:400}
.bb-menu-right{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px}
.bb-menu-inner{width:100%;max-width:min(88vw,2400px)}
.bb-menu-top{position:absolute;top:24px;left:44px;right:40px;display:flex;justify-content:space-between;align-items:center}
.bb-lang{display:flex;align-items:center;gap:8px}
.bb-lang button{background:none;border:0;font-family:var(--font);font-size:13px;letter-spacing:.5px;color:var(--grey-med);cursor:pointer;padding:2px;transition:color .2s}
.bb-lang button.on{color:var(--black);font-weight:400}
.bb-lang button:hover{color:var(--black)}
.bb-lang-sep{color:var(--grey);font-size:12px}
.bb-menu-x{position:fixed;top:0;width:32px;height:74px;right:calc((100vw - min(88vw,2400px)) / 2);z-index:110;background:none;border:0;padding:0;cursor:pointer;color:var(--black)}
.xln{position:absolute;top:50%;left:50%;width:32px;height:1px;margin:-.5px 0 0 -16px;background:currentColor;border-radius:2px}
/* FAQ hier, nicht in CSS: die Klonseiten bringen ihr eigenes Stylesheet mit,
   nur COMPONENTS_CSS wird in sie hineingeschrieben. */
.faq{max-width:none}
.qa .a p{max-width:none}
.qa .q{transition:color .2s}.qa .q:hover{color:var(--red)}
.bb-menu-x,.bb-contact-x,.bb-modal .x{transition:color .2s,opacity .2s}
.bb-menu-x:hover,.bb-contact-x:hover,.bb-modal .x:hover{color:var(--red)}
.xln.a{transform:rotate(45deg);clip-path:inset(0 100% 0 0)}
.xln.b{transform:rotate(-45deg);clip-path:inset(0 0 0 100%)}
.bb-menu.open .bb-menu-x .xln.a,.bb-contact.open .bb-contact-x .xln.a,.bb-modal.open .x .xln.a,.bb-modal.open .auth-x .xln.a{animation:xDrawA .45s var(--ease) .06s forwards}
.bb-menu.open .bb-menu-x .xln.b,.bb-contact.open .bb-contact-x .xln.b,.bb-modal.open .x .xln.b,.bb-modal.open .auth-x .xln.b{animation:xDrawB .45s var(--ease) .16s forwards}
@keyframes xDrawA{to{clip-path:inset(0 0 0 0)}}
@keyframes xDrawB{to{clip-path:inset(0 0 0 0)}}
@media(max-width:1024px){.bb-menu-x{right:clamp(24px,5vw,64px)}}
/* Aktionsfeld: ein Feld aus dem Feldsystem mit Knopf im Feld (Suche, Newsletter).
   Rahmen, Flying Label und Aktivzustand kommen aus .ct-field - hier nur Platz
   für den Knopf und der Knopf selbst. Kein eigenes Feldmodell mehr. */
.ct-field--act{margin-bottom:0}
.ct-field--act input{padding-right:60px}
.ct-field--act .ct-act{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:3px;background:var(--red);color:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .18s,color .18s}
.ct-field--act .ct-act svg{width:17px;height:17px;display:block;transition:transform .18s var(--ease)}
.ct-field--act .ct-act:hover{background:var(--red-dark)}
.ct-field--act .ct-act:hover svg{transform:translateX(2px)}
.ct-field--act.on .ct-act{background:#fff;color:var(--red)}
.ct-field--act.on .ct-act:hover{background:var(--offwht)}
/* Ein Suchfeld bekommt keinen grünen Haken und keine Fehlermeldung -
   es gibt hier nichts zu validieren. */
.ct-field--act .ct-ok,.ct-field--act .ct-msg{display:none}
.bb-acc-h{width:100%;text-align:left;background:none;border:0;font-family:var(--font);font-weight:300;font-size:48px;letter-spacing:-.02em;color:var(--black);padding:6px 0;cursor:pointer;display:flex;gap:16px;align-items:center;line-height:1.15}
.bb-acc-h span{color:var(--black);font-size:32px;transition:transform .2s;font-weight:200}
.bb-acc-item.open .bb-acc-h span{transform:rotate(45deg)}
.bb-acc-p{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.bb-acc-p a{display:block;font-size:16px;color:#57575e;padding:7px 0}.bb-acc-p a:hover{color:var(--red)}
.bb-menu-strip{position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(120deg,#16224e,#05091c);overflow:hidden}
.bb-menu-strip .tex{opacity:.5}
.bb-menu-cta{position:absolute;bottom:0;right:0;z-index:2;background:var(--red);color:#fff;padding:26px 40px;font-size:12px;text-transform:uppercase;letter-spacing:1.8px;display:flex;gap:60px;align-items:center;transition:background .2s}
.bb-menu-cta:hover{background:var(--red-dark)}
@media(max-width:820px){.bb-menu-wrap{grid-template-columns:1fr}.bb-menu-left{display:flex;background:transparent;min-height:auto;padding:84px 30px 0}.bb-menu-left .bb-menu-logo-top{display:none}.bb-menu-left .bb-search-wrap{max-width:none}.bb-menu-left .ct-field--act input{border-color:var(--grey);background:#fff;color:var(--black)}.bb-menu-left .ct-field--act label{color:#6a707d}.bb-menu-left .ct-field--act input::placeholder{color:var(--grey-med)}.bb-menu-left .ct-field--act .ct-act{background:var(--red);color:#fff}.bb-menu-left .ct-field--act.on input{background:var(--red);border-color:var(--red);color:#fff}.bb-menu-left .ct-field--act.on label{color:rgba(255,255,255,.85)}.bb-menu-left .ct-field--act.on .ct-act{background:#fff;color:var(--red)}.bb-menu-right{padding:26px 30px 50px;align-items:stretch}.bb-menu-inner{width:100%}.bb-menu-top{left:30px;right:24px}.bb-acc-h{font-size:34px}.bb-menu-strip{display:none}.bb-menu-cta{position:static;margin-top:40px;justify-content:space-between}}
@media(max-width:720px){.bb-menu-x{right:24px}}
.bb-contact{position:fixed;inset:0;z-index:100;background:#fff;overflow:auto;display:none}
.bb-contact.open{display:block}
.bb-contact .ct-split{min-height:100vh;width:min(88vw,2400px);max-width:min(88vw,2400px);margin:0 auto}
@media(max-width:1024px){.bb-contact .ct-split{width:auto;max-width:none}}
/* contact split: content centered in each area, capped on large screens */
.ct-split .ct-left{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:120px 6vw}
.ct-split .ct-left>*{width:100%;max-width:560px}
.ct-split .ct-right{display:flex;flex-direction:column;align-items:center;max-width:none;padding:120px 6vw}
.ct-split .ct-right>*{width:100%;max-width:720px}
.bb-contact-x{position:fixed;top:20px;width:32px;height:40px;right:calc((100vw - min(88vw,2400px)) / 2);z-index:110;background:none;border:0;padding:0;color:var(--black);cursor:pointer}
@media(max-width:1024px){.bb-contact-x{right:clamp(24px,5vw,64px)}}
.hub{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:44px;align-items:center;margin-top:56px}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hub-lines line{stroke:var(--red);stroke-width:.35;stroke-dasharray:1 1.2;opacity:.85}
.hub-col{display:flex;flex-direction:column;gap:44px;position:relative;z-index:2}
.hub-card{background:#fff;border-radius:var(--radius);padding:24px 26px;display:flex;gap:18px;align-items:flex-start;box-shadow:0 12px 34px rgba(0,0,0,.07)}
.hub-card .ic{width:27px;height:27px;color:#111;flex:none}
.hub-card h3{font-size:17px;font-weight:400;margin-bottom:6px;letter-spacing:0}
.hub-card p{font-size:13px;color:#57575e;line-height:1.5}
.hub-center{position:relative;z-index:2;display:grid;place-items:center}
.hub-mark{width:120px;height:120px;background:var(--red);border-radius:16px;display:grid;place-items:center;box-shadow:0 20px 50px rgba(42,67,160,.28)}
.hub-mark svg{width:42px;height:42px}
@media(max-width:820px){.hub{grid-template-columns:1fr;gap:20px}.hub-lines{display:none}.hub-center{order:-1;margin-bottom:8px}}
/* demo images (Lorem Picsum) with brand duotone overlay */
.duo-grey,.duo-slate,.duo-red,.duo-dark{background-size:cover !important;background-position:center !important;background-repeat:no-repeat}
.tex{opacity:.12 !important}
.hero{background:#0a1438 !important}
/* Fotoebene: Demo-Bilder liegen als <img> unter der Textur, damit Ausschnitt,
   lazy-loading und Alt-Text pro Motiv sauber steuerbar bleiben. */
.art,.thumb,.gal-ph,.member .ph,.btype,.video,.sol .art,.promo .art{position:relative;overflow:hidden}
.art>img,.thumb>img,.gal-ph>img,.member .ph>img,.btype>img,.video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.art>.tex,.art>.imgtex,.thumb>.tex,.thumb>.imgtex,.gal-ph>.tex,.member .ph>.tex,.btype>.imgtex,.video>.tex{z-index:1}
.btype>div:not(.imgtex):not(.tex),.video>.play,.gal-item .gal-cap{position:relative;z-index:2}
.art>img+.tex,.art>img+.imgtex,.thumb>img+.tex,.thumb>img+.imgtex,.gal-ph>img+.tex,.video>img+.tex{opacity:.10 !important}
/* Bildkacheln mit weißer Schrift bekommen einen Verlauf statt der Textur,
   sonst steht der Text auf dem Foto ohne Kontrast. */
.btype>img+.imgtex{opacity:1 !important;mix-blend-mode:normal;background:linear-gradient(to top,rgba(10,20,56,.92),rgba(10,20,56,.55) 34%,rgba(10,20,56,.10) 72%)}
.video>img{opacity:.5}
/* Echte Duotone-Fläche: Foto entsättigt, darüber der Markenverlauf.
   Nur dort einsetzen, wo die Fläche dekorativ ist - inhaltliche Motive
   bleiben unbehandelt, sonst sind Leistungen nicht mehr erkennbar. */
.duo-ov{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(120deg,rgba(42,67,160,.72),rgba(10,20,56,.88))}
.art:has(>.duo-ov)>img,.thumb:has(>.duo-ov)>img{filter:grayscale(1) contrast(1.08) brightness(1.05)}
/* keep everything inside the grid */
.grid,.g2,.g3,.g4,.cards,.team,.stats,.ct-grid,.hub,.techgrid,.benefits,.logos,.feature-row,.btypes,.solutions,.reasons,.datawrap{min-width:0}
.cell,.card,.stat,.member,.hub-card,.ct-field,.job,.benefit,.tcell,.fcard,.btype,.sol,.reason{min-width:0}
.ct-field input,.ct-field select,.ct-field textarea,.form input,.form textarea,.bb-field input,.bb-field textarea{max-width:100%}
h1,h2,h3,h4,.mh,.ct-h1,.ct-title,p,a,.t,.card .t,.sec-h,.hero h1{overflow-wrap:break-word}
img{max-width:100%;height:auto}
/* content scales with viewport, capped at 76vw; backgrounds stay full-bleed */
.wrap{width:min(88vw,2400px);max-width:min(88vw,2400px);margin:0 auto;padding:0}
@media(max-width:1024px){.wrap{width:auto;max-width:none;padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px)}}
.btn{max-width:100%}
@media(max-width:480px){.btn{white-space:normal}.ct-contacts{gap:30px}}
/* mobile optimizations */
@media(max-width:720px){
 .feature-row{grid-template-columns:1fr !important}
 .cta-tab{display:none}
 .ftgrid a,.ftl-cols a{padding-top:11px;padding-bottom:11px}
 .menu a{padding-top:16px;padding-bottom:16px}
 .ct-grid{gap:12px}
 .ct-field{margin-bottom:12px}
 /* 16px ist Pflicht: iOS Safari zoomt beim Fokus automatisch hinein, sobald ein
    Eingabefeld kleiner als 16px gesetzt ist. Label zieht mit, sonst sitzt die
    fliegende Beschriftung im Ruhezustand nicht mehr auf der Texthöhe. */
 .ct-field input,.ct-field select,.ct-field textarea{padding-top:24px;padding-bottom:8px;font-size:16px}
 .ct-field label{font-size:16px;top:16px}
 .ct-field textarea{padding-top:26px}
 .ct-left{padding-bottom:40px}
 .wrap{padding:0 24px}
 .sec-h{font-size:26px}
 .split h3{font-size:21px}
 .quote{font-size:22px}
}
/* mega menu (desktop) */
.mega{display:block !important;position:fixed;top:74px;left:0;right:0;z-index:59;background:#0a1438;color:#fff;border-top:1px solid rgba(255,255,255,.08);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s var(--ease)}
.mega.open{display:block}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega .inner{width:min(88vw,2400px);max-width:min(88vw,2400px);margin:0 auto;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.08)}
.mega.sol .inner{grid-template-columns:repeat(3,1fr) 1.2fr}
.mega.list .inner{grid-template-columns:2fr 1.2fr}
.mega .mcard{background:#0a1438;padding:30px 26px;display:block;color:#fff;transition:background .2s}
.mega .mcard:hover{background:#16224e}
.mega .k{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:#4d69c9;margin-bottom:10px;display:block}
.mega h4,.mega .mh{font-size:20px;margin-bottom:6px;font-weight:300}
.mega .mcard>span:last-child{font-size:13px;color:#b9c0c9;display:block;margin-top:4px}
.mega-col{background:#0a1438;padding:30px 26px}
.mega-col.mcols{column-count:2;column-gap:34px}
.mega-col h5,.mega-col .fh{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:#8891a3;margin-bottom:14px;column-span:all;font-weight:400}
.mega-col a{display:block;color:#e5e7ea;font-size:15px;padding:8px 0}
.mega-col a:hover{color:#4d69c9}
.mega-promo{background:linear-gradient(140deg,#22378a,#2a43a0);padding:32px 28px;display:flex;flex-direction:column;justify-content:center}
.mega-promo .k{color:#cfd8ff}
.mega-promo h4,.mega-promo .mh{font-size:22px;margin-bottom:20px;max-width:230px}
.menu a[data-mega]{cursor:pointer}
@media(max-width:820px){.mega{display:none !important}}
/* Content-Raster als Variable: identisch zu .wrap */
:root{--sbw:0px;--gut:calc((100vw - var(--sbw) - min(88vw,2400px)) / 2)}
@media(max-width:1024px){:root{--gut:clamp(24px,5vw,64px)}}
.bb-menu-x,.bb-contact-x{right:var(--gut)}
/* Logo in Overlays exakt auf Header-Position (linke Contentkante, 74px-Band) */
.bb-menu-logo-top,.bb-pop-logo{position:fixed;top:0;left:var(--gut);height:74px;display:flex;align-items:center;gap:.34em;z-index:110;color:#fff;font-size:17px;font-weight:300;letter-spacing:.5px;pointer-events:none}
.bb-menu-logo-top .ai,.bb-pop-logo .ai{color:#fff;font-weight:400}
/* Menü-Panel: Inhalt startet an derselben Kante wie das Logo */
.bb-menu-left{align-items:flex-start;padding:40px 40px 40px var(--gut)}
/* Kontakt-Popup: blauer Bereich randlos bis zur linken Viewportkante */
.bb-contact .ct-split{width:100%;max-width:none;margin:0}
.ct-split .ct-left{align-items:flex-start;padding:150px 40px 120px var(--gut)}
.ct-split .ct-right{align-items:flex-start;padding:150px var(--gut) 120px 6vw}
@media(max-width:1024px){.bb-contact .ct-split{width:100%;max-width:none}}
@media(max-width:900px){.ct-split .ct-left{padding:120px 30px 50px}.ct-split .ct-right{padding:50px 30px}}
@media(max-width:820px){.bb-menu-left{padding:84px 30px 0}.bb-pop-logo{display:none}}

/* ============================================================
   LESBARKEIT / KONTRAST  (WCAG AA: 4.5:1 Text, 3:1 Großtext)
   Tokens für dunkelblauen Grund (#0a1438)
   ============================================================ */
/* --on-dark-accent sitzt auf Dunkelblau #0a1438 bei Kontrast 5.8 und ist dort
   ausreichend. Auf Royalblau #2a43a0 fällt derselbe Ton auf 3.1 - dafür gibt es
   die hellere Variante, die auf beiden Untergründen über 4.5 bleibt. */
:root{--on-dark-muted:#8e99ad;--on-dark-soft:#c9cede;--on-dark-accent:#7f97e6;--on-dark-accent-strong:#a9bcf5}

/* Headlines auf blauem Grund immer weiß - nie blau */
.hero>.wrap>h1,.hero>.wrap>h2,.hero>.wrap>h3,
.phero.dark h1,.phero.dark h2,.phero.dark h3,
.band.dark h2,.band.dark h3,.band.tech h2,.band.tech h3,
.band.dark .sec-h,.band.tech .sec-h,
.ctaband:not(.grey) h2,.ct-left h1,.ct-left h2,.ct-left .ct-h1{color:#fff}
.ctaband.grey h2{color:var(--black)}
/* Dunkler Text auf grauem Duotone: Verlauf heller auslaufen lassen (Kontrast 1.06 -> ca. 5.4) */
.fcard.duo-grey{background:linear-gradient(115deg,#e6e9ec 0%,#c3c8cd 45%,#9aa1a7 100%)}
.hero>.wrap>p,.hero>.wrap>p.sub,.phero.dark p.sub{color:var(--on-dark-soft)}
.band.dark .intro,.band.tech .intro{color:var(--on-dark-soft)}

/* Eyebrow / Label auf blauem Grund: heller Akzent statt Dunkelblau */
.hero>.wrap>.label,.hero>.wrap>.eyebrow,
.phero.dark .eyebrow,.phero.dark .label,
.band.dark .eyebrow,.band.tech .eyebrow,
.band.dark .label,.band.tech .label{color:var(--on-dark-accent)}

/* Sekundärtext auf blauem Grund */
.band.dark .cell p,.band.tech .cell p,.benefit p,
.techgrid .d,.band.dark .stat .d,.band.tech .stat .d{color:var(--on-dark-muted)}
.band.dark .stat .n .u,.band.tech .stat .n .u,.techgrid .n .u{color:var(--on-dark-accent)}

/* Wortmarke: "AI" auf Dunkelblau lesbar */
header.nav .logo .ai,.ft .logo .ai{color:var(--on-dark-accent-strong)}

/* Footer dunkel */
.ft .tag,.ftgrid h5,.ftgrid .fh,.ftbottom,.ft .social span{color:var(--on-dark-muted)}
.ft .social span{border-color:rgba(255,255,255,.3)}
.ft .social span:hover{color:#fff;border-color:#fff}
.ftgrid a:hover{color:var(--on-dark-accent)}

/* Mega-Menü auf Dunkelblau */
.mega .k,.bb-mega .k{color:var(--on-dark-accent)}
.mega-col h5,.mega-col .fh{color:var(--on-dark-muted)}
.mega-col a:hover{color:var(--on-dark-accent)}
.mega .mcard>span:last-child,.bb-mega p{color:var(--on-dark-soft)}
.mega-promo .k{color:#e6ebff}

/* Helle Flächen */
.bb-lang-sep{color:var(--grey-med)}
.trusted .logos div,.logos div{color:#6a7382}

/* ---------- Bildergalerie (Carousel) ---------- */
.gal{margin-top:44px;position:relative}
.gal-view{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.gal-view::-webkit-scrollbar{display:none}
.gal-item{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;min-width:0}
.gal-ph{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;position:relative;transition:transform .4s var(--ease)}
.gal-ph .tex{position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 55%)}
.gal-item:hover .gal-ph{transform:scale(1.02)}
.gal-cap{margin-top:12px;font-size:14px;color:#57575e;line-height:1.5}
.gal-cap b{display:block;font-weight:400;color:var(--black);font-size:15px;margin-bottom:3px}
.gal-bar{display:flex;align-items:center;gap:16px;margin-top:26px}
.gal-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--grey);background:#fff;color:var(--black);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.gal-btn svg{width:16px;height:16px}
.gal-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.gal-btn[disabled]{opacity:.32;cursor:default}
.gal-btn[disabled]:hover{background:#fff;color:var(--black);border-color:var(--grey)}
.gal-dots{display:flex;gap:7px;margin-left:auto}
.gal-dots b{width:7px;height:7px;border-radius:50%;background:var(--grey);cursor:pointer;transition:background .2s,width .2s}
.gal-dots b.on{background:var(--red);width:20px;border-radius:4px}
.gal-count{font-size:13px;color:var(--grey-med);letter-spacing:.4px}
.band.dark .gal-btn,.phero.dark .gal-btn{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.band.dark .gal-cap,.phero.dark .gal-cap{color:var(--on-dark-soft)}
.band.dark .gal-cap b,.phero.dark .gal-cap b{color:#fff}
@media(max-width:900px){.gal-item{flex:0 0 calc((100% - 20px)/2)}}
@media(max-width:640px){.gal-item{flex:0 0 100%}.gal-view{gap:14px}.gal-dots{display:none}}

/* ---------- Step-by-Step mit Scrolllinie ---------- */
.steps{margin-top:52px;position:relative}
.step{display:grid;grid-template-columns:64px 1fr;gap:28px;position:relative;padding-bottom:52px}
.step:last-child{padding-bottom:0}
.step-rail{position:relative;display:flex;justify-content:center}
.step-num{width:52px;height:52px;border-radius:50%;background:var(--black);color:#fff;display:grid;place-items:center;font-size:19px;font-weight:300;flex:none;position:relative;z-index:2;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.step.on .step-num{background:var(--red);transform:scale(1.06)}
/* gepunktete Verbindung: graue Spur, farbiger Fortschritt darüber */
.step-line{position:absolute;top:52px;bottom:-52px;left:50%;width:2px;margin-left:-1px;z-index:1}
.step:last-child .step-line{display:none}
.step-line i{position:absolute;inset:0;background-image:linear-gradient(var(--grey) 55%,transparent 0);background-size:2px 9px;background-repeat:repeat-y}
.step-line b{position:absolute;top:0;left:0;right:0;height:0;background-image:linear-gradient(var(--red) 55%,transparent 0);background-size:2px 9px;background-repeat:repeat-y;transition:height .45s var(--ease)}
.step.on .step-line b{height:100%}
.step-body{padding-top:6px;min-width:0}
.step-k{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:var(--red);margin-bottom:9px}
.step-body h3{font-size:26px;font-weight:300;letter-spacing:-.01em;margin-bottom:12px}
.step-body p{font-size:16px;color:#43434a;line-height:1.65;max-width:640px}
.step-card{margin-top:22px;border:1px solid var(--grey);border-radius:var(--radius);padding:24px 26px;max-width:640px;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.step-card:hover{border-color:var(--red);box-shadow:0 16px 38px rgba(10,20,56,.09);transform:translateY(-2px)}
.step-card h4{font-size:17px;font-weight:400;margin-bottom:7px}
.step-card p{font-size:14px;color:#57575e;margin-bottom:14px}
.step-card .more{color:var(--red);font-size:14px;display:inline-flex;gap:8px;align-items:center}
.step-card .more .ar{transition:transform .2s var(--ease)}
.step-card:hover .more .ar{transform:translateX(4px)}
.band.dark .step-num{background:rgba(255,255,255,.16)}
.band.dark .step.on .step-num{background:var(--red)}
.band.dark .step-body p{color:var(--on-dark-soft)}
.band.dark .step-card{background:transparent;border-color:rgba(255,255,255,.18)}
.band.dark .step-card p{color:var(--on-dark-soft)}
@media(max-width:640px){.step{grid-template-columns:44px 1fr;gap:18px;padding-bottom:38px}.step-num{width:40px;height:40px;font-size:16px}.step-line{top:40px;bottom:-38px}.step-body h3{font-size:21px}.step-body p{font-size:15px}}

/* ---------- Mehrschritt-Popups (Termin, Schnellcheck) ---------- */
.wz{position:fixed;inset:0;z-index:120;background:rgba(6,10,26,.62);display:none;align-items:center;justify-content:center;padding:24px;overflow:auto}
.wz.open{display:flex}
.wz-box{background:#fff;border-radius:14px;width:100%;max-width:640px;padding:44px 44px 30px;position:relative;max-height:92vh;overflow:auto;box-shadow:0 40px 90px rgba(5,9,28,.4);animation:wzIn .34s var(--ease) both}
@keyframes wzIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.wz-x{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:0;background:var(--offwht);color:var(--black);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.wz-x:hover{background:var(--red);color:#fff}
.wz-x svg{width:14px;height:14px}
.wz-h{font-size:28px;font-weight:300;letter-spacing:-.01em;margin-bottom:6px;padding-right:44px}
.wz-sub{font-size:13px;color:var(--grey-med);margin-bottom:26px}
.wz-prog{height:3px;background:var(--offwht);border-radius:2px;margin-bottom:26px;overflow:hidden}
.wz-prog i{display:block;height:100%;background:var(--red);border-radius:2px;transition:width .4s var(--ease)}
.wz-step{display:none}.wz-step.on{display:block;animation:wzFade .3s var(--ease) both}
@keyframes wzFade{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.wz-foot{margin-top:28px;padding-top:20px;border-top:1px solid var(--grey);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Zurück trägt den Pfeil als Icon, nicht als Textzeichen - so bleibt es in der
   Vorlesereihenfolge eine schlichte Schaltfläche "Zurück". */
.wz-back{background:none;border:0;padding:0;font-family:var(--font);font-size:14px;color:var(--grey-med);cursor:pointer;transition:color .2s;display:inline-flex;align-items:center;gap:8px}
.wz-back svg{width:11px;height:11px;flex:0 0 11px;transition:transform .2s var(--ease)}
.wz-back:hover{color:var(--black)}
.wz-back:hover svg{transform:translateX(-3px)}
.wz-next{margin-left:auto;background:var(--red);color:#fff;border:0;border-radius:var(--radius);padding:15px 26px;font-family:var(--font);font-size:12px;text-transform:uppercase;letter-spacing:1.6px;cursor:pointer;transition:background .2s,opacity .2s}
.wz-next:hover{background:var(--red-dark)}
.wz-next[disabled]{opacity:.4;cursor:default;background:var(--red)}
.wz-legal{margin-top:18px;font-size:12px;color:var(--grey-med);line-height:1.7}
.wz-legal a{color:var(--red)}
.wz-legal span{display:block;margin-bottom:4px}
/* Kalender */
.wz-mon{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:18px}
.wz-mon strong{font-weight:400;font-size:17px;min-width:170px;text-align:center}
.wz-mnav{width:38px;height:38px;border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,opacity .2s}
.wz-mnav:hover{background:var(--red-dark)}
.wz-mnav[disabled]{opacity:.3;cursor:default}
.wz-mnav svg{width:14px;height:14px}
.wz-dow,.wz-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wz-dow span{text-align:center;font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--grey-med);padding:6px 0}
.wz-days button{aspect-ratio:1;border:1px solid transparent;border-radius:8px;background:var(--offwht);font-family:var(--font);font-size:14px;color:var(--black);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.wz-days button:hover{border-color:var(--red);background:#fff}
/* Vergangene Tage bleiben lesbar: --grey ist eine Linienfarbe, als Schrift auf
   Weiß liegt sie bei Kontrast 1.4 und ist praktisch unsichtbar. */
.wz-days button[disabled]{background:transparent;color:#98a0ad;cursor:default;border-color:transparent}
.wz-days button.today{box-shadow:inset 0 0 0 1px var(--red);font-weight:400}
.wz-days button.sel{background:var(--red);color:#fff;border-color:var(--red)}
.wz-days .pad{aspect-ratio:1;visibility:hidden}
.wz-pick-lead{font-size:14px;color:var(--grey-med);margin:0 0 4px}
.wz-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:22px}
.wz-slots button{border:1px solid var(--grey);border-radius:var(--radius);background:#fff;padding:12px 0;font-family:var(--font);font-size:14px;cursor:pointer;transition:all .18s}
.wz-slots button:hover{border-color:var(--red)}
.wz-slots button.sel{background:var(--red);border-color:var(--red);color:#fff}
/* Icon-Karten (Schnellcheck) */
.wz-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wz-opt{border:1px solid var(--grey);border-radius:10px;background:#fff;padding:20px 16px;text-align:left;font-family:var(--font);cursor:pointer;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.wz-opt svg{width:20px;height:20px;color:var(--red);transition:transform .25s var(--ease)}
.wz-opt span{font-size:14px;line-height:1.4;color:var(--black)}
.wz-opt:hover{border-color:var(--red);box-shadow:0 12px 30px rgba(10,20,56,.08);transform:translateY(-2px)}
.wz-opt:hover svg{transform:scale(1.08)}
.wz-opt.sel{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.wz-list{display:flex;flex-direction:column;gap:10px}
.wz-row{border:1px solid var(--grey);border-radius:var(--radius);background:#fff;padding:15px 18px;text-align:left;font-family:var(--font);font-size:15px;cursor:pointer;transition:border-color .2s,background .2s}
.wz-row:hover{border-color:var(--red)}
.wz-row.sel{background:var(--red);border-color:var(--red);color:#fff}
.wz-ok{text-align:center;padding:14px 0 4px}
.wz-ok .ring{width:64px;height:64px;border-radius:50%;background:#eaf7ef;color:#1f9d55;display:grid;place-items:center;margin:0 auto 18px}
.wz-ok .ring svg{width:28px;height:28px}
.wz-ok h4{font-size:22px;font-weight:300;margin-bottom:8px}
.wz-ok p{font-size:15px;color:#57575e;line-height:1.6;max-width:420px;margin:0 auto}
@media(max-width:640px){
 .wz{padding:0;align-items:flex-end}
 .wz-box{max-width:none;border-radius:14px 14px 0 0;padding:34px 22px 24px;max-height:94vh}
 .wz-h{font-size:23px}
 .wz-opts{grid-template-columns:repeat(2,1fr);gap:9px}
 .wz-opt{padding:16px 12px}
 .wz-slots{grid-template-columns:repeat(3,1fr)}
 .wz-next{padding:14px 20px;font-size:11px}
}

/* ---------- Sidebar für Unterseiten ---------- */
.sbwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:60px;align-items:start;margin-top:44px}
.sbar{position:sticky;top:98px;display:flex;flex-direction:column;gap:18px}
/* Inhaltsspalte: die globalen Textbreiten würden hier ein zweites Mal beschneiden. */
.sbmain>p,.sbmain>h3{max-width:none}
.sbmain .art{margin:0}
.sb-card{border:1px solid var(--grey);border-radius:var(--radius);background:#fff;overflow:hidden}
.sb-card>h3{font-size:13px;text-transform:uppercase;letter-spacing:1.4px;color:var(--grey-med);padding:20px 22px 14px;font-weight:400}
.sb-nav{border-top:1px solid var(--grey)}
.sb-item{border-bottom:1px solid var(--grey)}
.sb-item:last-child{border-bottom:0}
.sb-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;font-family:var(--font);font-size:15px;color:var(--black);text-align:left;padding:14px 22px;cursor:pointer;transition:color .2s,background .2s}
.sb-h:hover{color:var(--red);background:var(--offwht)}
.sb-h i{font-style:normal;font-size:17px;color:var(--grey-med);transition:transform .25s var(--ease),color .2s;flex:none;line-height:1}
.sb-item.open .sb-h{color:var(--red)}
.sb-item.open .sb-h i{transform:rotate(45deg);color:var(--red)}
.sb-p{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.sb-p a{display:block;font-size:14px;color:#57575e;padding:8px 22px 8px 34px;position:relative;transition:color .2s,background .2s}
.sb-p a:before{content:"";position:absolute;left:22px;top:50%;width:5px;height:1px;background:var(--grey);transition:width .2s,background .2s}
.sb-p a:hover{color:var(--red);background:var(--offwht)}
.sb-p a:hover:before{width:9px;background:var(--red)}
.sb-p a.cur{color:var(--red)}
.sb-p div:last-child{padding-bottom:8px}
.sb-flat{display:block;font-size:15px;color:var(--black);padding:14px 22px;border-bottom:1px solid var(--grey);transition:color .2s,background .2s}
.sb-flat:last-child{border-bottom:0}
.sb-flat:hover{color:var(--red);background:var(--offwht)}
/* Servicebox */
.sb-serv{background:var(--red);color:#fff;border-color:var(--red);padding:26px 24px}
.sb-serv h3{font-size:20px;font-weight:300;margin-bottom:10px;color:#fff;padding:0;text-transform:none;letter-spacing:-.01em}
.sb-serv p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);margin-bottom:20px}
.sb-serv .btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--red);border:0;border-radius:var(--radius);padding:14px 20px;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;font-family:var(--font);transition:background .2s}
.sb-serv .btn:hover{background:var(--offwht)}
.sb-serv .btn .ar{transition:transform .2s var(--ease)}
.sb-serv .btn:hover .ar{transform:translateX(4px)}
.sb-tel{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;color:#fff}
.sb-tel svg{width:16px;height:16px;flex:none;opacity:.85}
.sb-tel a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.sb-tel a:hover{border-color:#fff}
/* Geschlossener Bereich */
.sb-lock{padding:24px}
.sb-lock .lk{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sb-lock .lk svg{width:17px;height:17px;color:var(--red);flex:none}
.sb-lock .lk b{font-size:16px;font-weight:400}
.sb-lock p{font-size:13.5px;color:#57575e;line-height:1.6;margin-bottom:16px}
/* Der geschlossene Bereich zeigt in der Sidebar nur den Weg zum Login, kein
   Formular. Anmeldung und Registrierung liegen gebündelt im Auth-Dialog. */
.sb-lock button.go{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--black);color:#fff;border:0;border-radius:var(--radius);padding:15px 18px;font-family:var(--font);font-size:12px;text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;transition:background .2s}
.sb-lock button.go:hover{background:var(--red)}
.sb-lock button.go .ar{transition:transform .2s var(--ease)}
.sb-lock button.go:hover .ar{transform:translateX(4px)}
.sb-lock .alt{font-size:12.5px;color:var(--grey-med);margin-top:12px;line-height:1.6}
.sb-lock .alt a{color:var(--red)}
@media(max-width:1024px){.sbwrap{grid-template-columns:1fr;gap:44px}.sbar{position:static}}
@media(max-width:640px){.sbar{gap:14px}}

/* Sichtbarer Tastaturfokus (war vorher nur Browser-Default) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--on-dark-accent);outline-offset:3px;border-radius:2px}
.band.dark a:focus-visible,.phero.dark a:focus-visible,.ft a:focus-visible,.mega a:focus-visible,.ct-left a:focus-visible,.ct-left button:focus-visible{outline-color:#fff}

/* ---------- Ergebnisband dunkel (outcome) ----------
   Dunkle Karte mit Kennzahlen. Die Punktkugel ist Dekor, kein Datenbild -
   sie darf nie so beschriftet werden, als zeige sie Standorte. */
.outc{position:relative;overflow:hidden;border-radius:var(--radius);color:#fff;padding:66px 60px 58px;
 background:radial-gradient(120% 150% at 88% 50%,#1a2c68 0%,#101a48 42%,#0a1438 100%)}
.outc>*:not(.outc-orb){position:relative;z-index:2}
.outc .tag{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:1.8px;padding:7px 15px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.07);margin-bottom:28px}
.outc h2{font-size:42px;line-height:1.12;max-width:11em}
.outc p.lead{margin-top:22px;font-size:16px;color:#b9c1dd;max-width:31em}
.outc .cta{margin-top:32px}
.outc-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:70px;max-width:660px}
.outc-kpi .n{font-size:48px;letter-spacing:-.03em;line-height:1}
.outc-kpi .n .u{color:#8095ee}
.outc-kpi .d{margin-top:14px;font-size:13.5px;line-height:1.5;color:#98a2c8}
.outc-orb{position:absolute;z-index:1;right:-80px;top:50%;transform:translateY(-50%);width:620px;height:620px;pointer-events:none}
@media(max-width:1100px){.outc-orb{right:-240px;opacity:.5}}
@media(max-width:720px){.outc{padding:42px 26px 40px}.outc h2{font-size:28px}.outc .tag{margin-bottom:20px}
 .outc-kpi{grid-template-columns:1fr;gap:24px;margin-top:44px}.outc-kpi .n{font-size:38px}.outc-orb{display:none}}

/* ---------- Kennzahlkarten über Punktfeld (metrics) ----------
   Karten sind Auszüge aus einer Auswertung, keine Live-Daten. */
.mcx{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.mcx-k{display:inline-flex;gap:9px;align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:var(--red)}
.mcx-k svg{width:15px;height:15px;flex:none}
.mcx h3{font-size:28px;margin-top:18px}
.mcx p.lead{margin-top:14px;font-size:16px;color:#57575e;max-width:26em}
.mcx-art{position:relative;border-radius:var(--radius);background:var(--offwht);padding:38px;overflow:hidden}
.mcx-map{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.mcx-cards{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mcx-card{background:#fff;border:1px solid var(--grey);border-radius:var(--radius);padding:18px 20px;box-shadow:0 16px 36px rgba(10,20,56,.10)}
.mcx-card .h{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#3d4657}
.mcx-card .cip{width:26px;height:26px;border-radius:3px;display:grid;place-items:center;flex:none}
.mcx-card .cip svg{width:15px;height:15px}
.mcx-card .n{font-size:30px;letter-spacing:-.02em;margin-top:14px;line-height:1}
.mcx-card .u{font-size:12px;color:var(--grey-med);margin-top:7px}
.cip.d1{background:#e5e9f7;color:#2a43a0}.cip.d2{background:#e4eef8;color:#26608f}
.cip.d3{background:#e4f0e9;color:#2c6f50}.cip.d4{background:#f5edda;color:#8a5f11}
@media(max-width:960px){.mcx{grid-template-columns:1fr;gap:34px}}
@media(max-width:560px){.mcx-cards{grid-template-columns:1fr}.mcx-art{padding:22px}}

/* ---------- Datenansichten (viz) ----------
   Feste Demowerte im SVG. Datenfarben sind ausschließlich für Diagramme,
   nie für Bedienelemente. */
.viz-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.viz{position:relative;border:1px solid var(--grey);border-radius:var(--radius);background:linear-gradient(180deg,#fbfcfe 0%,#f3f5fb 100%);padding:30px;overflow:hidden;min-height:330px;display:flex;align-items:center;justify-content:center}
.viz svg.plot{width:100%;height:auto;display:block}
.viz-note{position:absolute;z-index:3;background:#fff;border:1px solid var(--grey);border-radius:var(--radius);box-shadow:0 18px 42px rgba(10,20,56,.16);padding:14px 16px;max-width:300px}
.viz-note .k{display:flex;align-items:center;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--grey-med);margin-bottom:8px}
.viz-note .k svg{width:14px;height:14px;flex:none}
.viz-note p{font-size:14px;line-height:1.5;color:#2b3140}
.viz-note b{color:var(--red);font-weight:400}
.viz-note.warn .k{color:#8a5f11}
.viz-note.a{top:44px;left:38px}
.viz-note.b{top:40px;right:26px;left:auto;transform:none;max-width:290px}
@media(max-width:860px){.viz-pair{grid-template-columns:1fr}}
@media(max-width:700px){
.viz{flex-direction:column;align-items:stretch;padding:20px;min-height:0}
.viz-note{position:static;transform:none;max-width:none;margin-top:16px;box-shadow:none}
.viz-note.a,.viz-note.b{top:auto;left:auto;transform:none}
}

/* ---------- Anwendungsfälle mit Chatvorschau (ucc) ----------
   Linke Liste schaltet die rechte Chatansicht. Der Chat ist eine Simulation
   mit hinterlegtem Text, keine Verbindung zu einem echten System. */
.ucc{display:grid;grid-template-columns:1fr 420px;gap:0;margin-top:48px;border-top:1px solid var(--grey);position:relative}
.ucc-list{border-right:1px solid var(--grey)}
.ucc-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:var(--font);font-weight:300;font-size:16px;color:#57575e;background:none;border:0;border-bottom:1px solid var(--grey);padding:20px 26px 20px 4px;cursor:pointer;position:relative;transition:background .2s,color .2s}
.ucc-row svg{width:19px;height:19px;flex:none;color:#8a93a3;transition:color .2s}
.ucc-row:hover{color:var(--black)}
.ucc-row:hover svg{color:var(--red)}
.ucc-row.on{background:#f1f3fb;color:var(--black)}
.ucc-row.on svg{color:var(--red)}
.ucc-row.on::after{content:"";position:absolute;left:0;bottom:-1px;width:44%;height:2px;background:var(--red)}
.ucc-panel{position:relative;padding:26px 0 26px 34px;
 background-image:repeating-linear-gradient(90deg,var(--offwht) 0 1px,transparent 1px 46px)}
.ucc-chat{background:#fff;border:1px solid var(--grey);border-radius:8px;box-shadow:0 24px 60px rgba(10,20,56,.13);padding:20px 20px 24px;min-height:420px;display:flex;flex-direction:column;gap:14px}
.ucc-head{display:flex;align-items:center;gap:11px;padding-bottom:4px}
.ucc-av{width:28px;height:28px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 30%,#7f92e8,#2a43a0)}
.ucc-head b{font-size:14px;font-weight:400}
.ucc-head span{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:var(--grey-med);margin-left:auto}
.ucc-in{align-self:flex-end;max-width:82%;background:var(--offwht);border-radius:8px 8px 2px 8px;padding:11px 14px;font-size:14px;line-height:1.5;color:#2b3140}
.ucc-out{max-width:92%;font-size:14px;line-height:1.6;color:#2b3140}
.ucc-out b{color:var(--red);font-weight:600}
.ucc-out+.ucc-out{margin-top:10px}
.ucc-dots{display:inline-flex;gap:5px;align-items:center;height:18px}
.ucc-dots i{width:5px;height:5px;border-radius:50%;background:#9aa3b8;display:block;animation:uccb 1s infinite}
.ucc-dots i:nth-child(2){animation-delay:.15s}.ucc-dots i:nth-child(3){animation-delay:.3s}
@keyframes uccb{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ucc-foot{margin-top:auto;display:flex;align-items:center;gap:10px;border-top:1px solid var(--offwht);padding-top:14px}
.ucc-foot .f{flex:1;font-size:13px;color:var(--grey-med)}
.ucc-foot .s{width:30px;height:30px;border-radius:4px;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.ucc-foot .s svg{width:15px;height:15px}
/* Teamfenster (Verlauf als Fensterdarstellung) */
.tmw-wrap{max-width:760px;margin:0 auto}
.tmw{position:relative;background:#fff;border:1px solid var(--grey);border-radius:10px;box-shadow:0 30px 70px rgba(10,20,56,.14);overflow:hidden}
.tmw-bar{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--grey);background:var(--offwht)}
.tmw-dots{display:flex;gap:7px;flex:none}
.tmw-dots i{width:11px;height:11px;border-radius:50%;background:#c8cdd6;display:block}
.tmw-ch{font-size:14px;color:var(--grey-med)}
.tmw-ch b{color:var(--black);font-weight:600}
.tmw-body{padding:32px 32px 58px;display:flex;flex-direction:column;gap:28px}
.tmw-msg{display:grid;grid-template-columns:44px 1fr;gap:16px}
.tmw-av{width:44px;height:44px;border-radius:4px;background:#e5e9f7;color:var(--red);display:grid;place-items:center;font-size:17px;font-weight:600;flex:none}
.tmw-av.bot{background:var(--black);border-radius:10px}
.tmw-av.bot svg{width:22px;height:22px}
.tmw-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:7px;flex-wrap:wrap}
.tmw-meta b{font-size:15px;color:var(--black)}
.tmw-meta span{font-size:12px;color:var(--grey-med)}
.tmw-txt{font-size:15px;line-height:1.62;color:#3d4757}
.tmw-txt p{margin:0 0 13px}
.tmw-txt p:last-child{margin:0}
.tmw-txt a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.tmw-txt b{color:var(--black);font-weight:600}
.tmw-fade{position:absolute;left:0;right:0;bottom:0;height:112px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 74%);pointer-events:none}
@media(max-width:640px){
.tmw-body{padding:22px 20px 48px;gap:22px}
.tmw-msg{grid-template-columns:36px 1fr;gap:12px}
.tmw-av{width:36px;height:36px;font-size:15px;border-radius:3px}
.tmw-av.bot{border-radius:8px}
.tmw-av.bot svg{width:18px;height:18px}
.tmw-txt{font-size:14px}
.tmw-meta b{font-size:14px}
.tmw-fade{height:100px}
}
.ucc-hint{font-size:12px;color:var(--grey-med);margin-top:14px}
/* ---------- Telefonnummer im Overlay-Menü ---------- */
.bb-menu-tel{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.bb-menu-tel a{color:#fff;font-size:26px;font-weight:500;letter-spacing:-.01em;text-decoration:none;display:inline-block}
.bb-menu-tel a:hover{color:var(--red)}
.bb-menu-tel:before{content:"Direkt anrufen";display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-med);margin-bottom:10px}
@media(max-width:820px){.bb-menu-tel a{font-size:21px}}

/* ---------- Glossar-Tooltip ---------- */
.gl{border-bottom:1px dotted var(--red);cursor:help;color:inherit;text-decoration:none;position:relative;white-space:normal}
.gl:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
#glPop{position:absolute;z-index:2400;max-width:340px;background:var(--black);color:#fff;border-radius:var(--radius);
 padding:16px 18px 14px;font-size:13.5px;line-height:1.55;box-shadow:0 18px 46px rgba(10,20,56,.30);
 opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s}
#glPop.on{opacity:1;visibility:visible;transform:translateY(0)}
#glPop .glt{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#9aa5bd;margin-bottom:6px}
#glPop .glh{font-weight:600;font-size:15px;margin-bottom:6px;display:block}
#glPop .gla{display:inline-block;margin-top:10px;color:#fff;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.35);text-decoration:none}
#glPop .gla:hover{border-color:#fff}
#glPop:after{content:"";position:absolute;left:22px;bottom:-6px;width:12px;height:12px;background:var(--black);transform:rotate(45deg)}
#glPop.up:after{bottom:auto;top:-6px}
@media(max-width:620px){#glPop{max-width:calc(100vw - 32px)}}

/* ---------- TL;DR Antwortblock (AEO/GEO) ---------- */
.tldr{background:var(--offwht);border:1px solid var(--grey);border-radius:var(--radius);
 padding:26px 30px;margin:34px 0}
.tldr .tl-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px;font-weight:600}
.tldr p{font-size:17px;line-height:1.6;color:var(--black);margin:0}
.tldr p+p{margin-top:12px}
.tldr ul{margin:14px 0 0;padding:0;list-style:none}
.tldr li{position:relative;padding-left:20px;font-size:15px;line-height:1.6;margin-top:7px;color:#2c3242}
.tldr li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.tldr--dark{background:var(--black);border-color:rgba(255,255,255,.16)}
.tldr--dark p{color:#fff}.tldr--dark li{color:#c8cede}.tldr--dark .tl-k{color:#8fa0d8}
@media(max-width:620px){.tldr{padding:22px 20px}.tldr p{font-size:15.5px}}

/* ---------- Kernfakten-Kasten ---------- */
.kf{border:1px solid var(--grey);border-radius:var(--radius);padding:0;margin:34px 0;overflow:hidden}
.kf-h{background:var(--offwht);padding:14px 22px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--grey-med);border-bottom:1px solid var(--grey);font-weight:600}
.kf-r{display:grid;grid-template-columns:230px 1fr;gap:0;border-bottom:1px solid var(--grey)}
.kf-r:last-child{border-bottom:0}
.kf-r>dt{padding:14px 22px;font-size:14px;color:var(--grey-med);background:#fbfbfc;border-right:1px solid var(--grey)}
.kf-r>dd{padding:14px 22px;font-size:15px;color:var(--black);margin:0}
@media(max-width:620px){.kf-r{grid-template-columns:1fr}.kf-r>dt{border-right:0;padding-bottom:4px}
 .kf-r>dd{padding-top:4px}}

/* ---------- Preistabelle ---------- */
.ptab{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.ptab th{text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-med);
 font-weight:600;padding:0 16px 12px 0;border-bottom:1px solid var(--black)}
.ptab td{padding:15px 16px 15px 0;border-bottom:1px solid var(--grey);vertical-align:top;line-height:1.5}
.ptab td:first-child{font-weight:500;color:var(--black)}
.ptab .num{white-space:nowrap;font-variant-numeric:tabular-nums}
.ptab-note{font-size:12.5px;color:var(--grey-med);line-height:1.6;margin-top:-12px}
@media(max-width:700px){.ptab,.ptab tbody,.ptab tr,.ptab td{display:block;width:100%}
 .ptab thead{display:none}
 .ptab tr{border-bottom:1px solid var(--grey);padding:14px 0}
 .ptab td{border:0;padding:3px 0}
 .ptab .num{white-space:normal}
 .ptab td:before{content:attr(data-l);display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-med)}}

/* ---------- FAQ / Antwortliste ---------- */
.faq{border-top:1px solid var(--grey);margin:36px 0 0}
.faq-i{border-bottom:1px solid var(--grey)}
.faq-q{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:22px 44px 22px 0;position:relative;
 font-family:var(--font);font-size:17.5px;font-weight:500;color:var(--black);line-height:1.4;letter-spacing:-.01em}
.faq-q:hover{color:var(--red)}
.faq-q i{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:16px;height:16px;font-style:normal;display:block}
.faq-q i:before,.faq-q i:after{content:"";position:absolute;background:currentColor;transition:transform .24s var(--ease),opacity .24s var(--ease)}
.faq-q i:before{left:0;top:7px;width:16px;height:1.6px}
.faq-q i:after{left:7px;top:0;width:1.6px;height:16px}
.faq-i.on .faq-q i:after{transform:rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.faq-a>div{padding:0 60px 26px 0;font-size:15.5px;line-height:1.72;color:#3a4152}
.faq-a p+p{margin-top:12px}
@media(max-width:620px){.faq-q{font-size:16px}.faq-a>div{padding-right:0}}

/* ---------- Inhaltsverzeichnis ---------- */
.toc{background:var(--offwht);border-radius:var(--radius);padding:24px 28px;margin:30px 0 40px}
.toc-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-med);margin-bottom:12px;font-weight:600}
.toc ol{margin:0;padding-left:20px;counter-reset:none}
.toc li{margin:7px 0;font-size:14.5px}
.toc a{color:var(--black);text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{color:var(--red);border-bottom-color:var(--red)}

/* ---------- Ortsseiten: Gewerbegebiete und Anforderungen ---------- */
/* Haarlinien aus dem Schlagschatten der Karten, nicht aus dem Gitterhintergrund.
   Sonst bliebe der letzte, unbesetzte Platz bei ungerader Anzahl grau. */
.zn{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:#fff;
 border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden;margin:32px 0}
.zn-c{background:#fff;padding:28px 26px 26px;box-shadow:0 0 0 1px var(--grey)}
.zn-c .zk{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:8px;font-weight:600}
.zn-c h3{font-size:19px;font-weight:500;letter-spacing:-.015em;margin:0 0 10px;color:var(--black)}
.zn-c p{font-size:14.5px;line-height:1.65;color:#4a5162;margin:0}
.zn-c ul{margin:14px 0 0;padding:0;list-style:none}
.zn-c li{font-size:13.5px;line-height:1.55;color:#4a5162;padding-left:16px;position:relative;margin-top:6px}
.zn-c li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--grey-med)}
.zn-c .zm{margin-top:16px;font-size:12.5px;color:var(--grey-med);padding-top:12px;border-top:1px solid var(--grey)}

/* Anforderungsliste ansässiger Betriebe */
/* Gleiche Kartenoptik wie .grid/.cell: ein Rahmen aussen, Haarlinien innen. */
/* Die Haarlinien kommen aus dem Schlagschatten der Karten, nicht aus dem
   Hintergrund des Gitters. Sonst bliebe der letzte, unbesetzte Platz einer
   ungeraden Anzahl als graue Flaeche stehen. */
.anf{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:#fff;
 border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden;margin:32px 0}
.anf-c{background:#fff;padding:32px 30px;box-shadow:0 0 0 1px var(--grey)}
.anf-c h3{font-size:20px;font-weight:500;margin:0 0 10px;letter-spacing:-.01em;color:var(--black)}
.anf-c p{font-size:14px;line-height:1.6;color:#57575e;margin:0}
.anf-c .anf-t{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-med);margin-bottom:12px}
.band.dark .anf{background:var(--black);border-color:rgba(255,255,255,.16)}
.band.dark .anf-c{background:var(--black);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.band.dark .anf-c h3{color:#fff}
.band.dark .anf-c p{color:var(--grey-med)}
@media(max-width:620px){.anf-c{padding:26px 22px}}

/* Anfahrt / Reaktionszeit */
.rz{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden;margin:30px 0}
.rz-i{flex:1 1 180px;padding:22px 24px;border-right:1px solid var(--grey)}
.rz-i:last-child{border-right:0}
.rz-i b{display:block;font-size:27px;font-weight:400;letter-spacing:-.02em;color:var(--black);line-height:1.1}
.rz-i span{display:block;font-size:12.5px;color:var(--grey-med);margin-top:6px;line-height:1.5}
@media(max-width:620px){.rz-i{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--grey)}
 .rz-i:last-child{border-bottom:0}}

/* ---------- Ratgeber-Artikel ---------- */
.art{max-width:760px}
.art h2{font-size:29px;font-weight:400;letter-spacing:-.025em;line-height:1.2;margin:52px 0 16px;color:var(--black);scroll-margin-top:110px}
.art h3{font-size:20px;font-weight:500;letter-spacing:-.015em;margin:34px 0 12px;color:var(--black);scroll-margin-top:110px}
.art p{font-size:16.5px;line-height:1.78;color:#33394a;margin:0 0 18px}
.art ul,.art ol{margin:0 0 20px;padding-left:22px}
.art li{font-size:16.5px;line-height:1.72;color:#33394a;margin:8px 0}
.art a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(42,67,160,.32)}
.art a:hover{border-bottom-color:var(--red)}
.art a.gl{color:inherit;border-bottom:1px dotted var(--red)}
.art blockquote{margin:30px 0;padding:4px 0 4px 26px;border-left:2px solid var(--red);font-size:18px;line-height:1.6;color:var(--black)}
.art img{width:100%;border-radius:var(--radius);margin:30px 0}
.art figure{margin:30px 0}.art figure img{margin:0}
.art figcaption{font-size:12.5px;color:var(--grey-med);margin-top:10px;line-height:1.5}
@media(max-width:620px){.art h2{font-size:24px;margin-top:40px}.art p,.art li{font-size:16px}}

.art-meta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:12.5px;color:var(--grey-med);
 padding-bottom:22px;border-bottom:1px solid var(--grey);margin-bottom:8px}
.art-meta span{display:inline-flex;align-items:center;gap:7px}
.art-au{display:flex;align-items:center;gap:14px;margin:44px 0 0;padding:22px 0 0;border-top:1px solid var(--grey)}
.art-au .av{width:46px;height:46px;border-radius:50%;background:var(--black);color:#fff;display:grid;place-items:center;
 font-size:15px;font-weight:500;flex:none}
.art-au b{display:block;font-size:14.5px;font-weight:500;color:var(--black)}
.art-au span{display:block;font-size:13px;color:var(--grey-med);margin-top:2px;line-height:1.5}

/* Ratgeber-Übersicht */
.rg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--grey);
 border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden}
.rg a{background:#fff;padding:30px 28px 28px;display:block;text-decoration:none;transition:background .2s var(--ease)}
.rg a:hover{background:var(--offwht)}
.rg .rk{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);font-weight:600}
.rg h3{font-size:19.5px;font-weight:500;letter-spacing:-.017em;line-height:1.32;margin:10px 0 9px;color:var(--black)}
.rg p{font-size:14.5px;line-height:1.6;color:#4a5162;margin:0}
.rg .rm{font-size:12px;color:var(--grey-med);margin-top:16px}

/* ---------- Glossar-Seite ---------- */
.gz{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 42px}
.gz a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--grey);border-radius:var(--radius);
 font-size:14px;color:var(--black);text-decoration:none;transition:all .18s var(--ease)}
.gz a:hover{background:var(--black);color:#fff;border-color:var(--black)}
.gz a.off{color:var(--grey);pointer-events:none}
.gl-grp{margin:0 0 44px}
.gl-grp>h2{font-size:34px;font-weight:400;color:var(--red);margin:0 0 14px;letter-spacing:-.02em;scroll-margin-top:110px}
.gl-e{border-top:1px solid var(--grey);padding:22px 0}
.gl-e h3{font-size:18px;font-weight:500;margin:0 0 8px;color:var(--black);letter-spacing:-.01em;scroll-margin-top:110px}
.gl-e p{font-size:15px;line-height:1.7;color:#3a4152;margin:0}
.gl-e .gl-x{margin-top:12px;font-size:13px;color:var(--grey-med)}
.gl-e .gl-x a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(42,67,160,.3)}

/* ---------- Ortsliste ---------- */
.orte{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--grey);
 border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden;margin:30px 0}
.orte a{background:#fff;padding:20px 22px;text-decoration:none;display:block;transition:background .18s var(--ease)}
.orte a:hover{background:var(--offwht)}
.orte b{display:block;font-size:16px;font-weight:500;color:var(--black);letter-spacing:-.01em}
.orte span{display:block;font-size:12.5px;color:var(--grey-med);margin-top:4px;line-height:1.45}

/* ---------- Referenz-Platzhalter ---------- */
.ref{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px;margin:34px 0}
.ref-c{border:1px solid var(--grey);border-radius:var(--radius);padding:28px 26px}
.ref-c .rt{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:10px}
.ref-c h3{font-size:19px;font-weight:500;margin:0 0 14px;color:var(--black);letter-spacing:-.015em}
.ref-c dl{margin:0;display:grid;grid-template-columns:120px 1fr;gap:8px 14px;font-size:14px}
.ref-c dt{color:var(--grey-med)}
.ref-c dd{margin:0;color:var(--black)}
.ref-c .rq{margin-top:18px;padding-top:16px;border-top:1px solid var(--grey);font-size:14.5px;line-height:1.6;
 color:#4a5162;font-style:italic}
.ref-ph{background:#fffbeb;border:1px dashed #d9b45e;color:#7a5a12;border-radius:var(--radius);padding:14px 18px;
 font-size:13px;line-height:1.6;margin:0 0 28px}

/* ---------- Ansprechpartner ---------- */
/* Gleiche Kartenoptik wie .grid/.cell und .anf. Die Haarlinien kommen aus dem
   Schlagschatten der Karten, damit ein unbesetzter Platz weiss bleibt. */
.ap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:#fff;
 border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden;margin:34px 0}
.ap-c{background:#fff;padding:28px 26px;box-shadow:0 0 0 1px var(--grey)}
.ap-c .av{width:56px;height:56px;border-radius:50%;background:var(--offwht);color:var(--black);display:grid;
 place-items:center;font-size:18px;font-weight:500;margin-bottom:14px}
.ap-c b{display:block;font-size:17px;font-weight:500;color:var(--black);letter-spacing:-.01em}
.ap-c .ro{display:block;font-size:13.5px;color:var(--grey-med);margin:4px 0 12px;line-height:1.5}
.ap-c a{display:block;font-size:14px;color:var(--black);text-decoration:none;margin-top:5px}
.ap-c a:hover{color:var(--red)}

/* ---------- Leistungsverzeichnis-Liste ---------- */
.lv{border-top:1px solid var(--grey);margin:30px 0}
.lv-r{display:grid;grid-template-columns:1fr 160px;gap:20px;padding:17px 0;border-bottom:1px solid var(--grey);align-items:baseline}
.lv-r b{font-size:15.5px;font-weight:500;color:var(--black)}
.lv-r p{font-size:14px;color:#4a5162;margin:5px 0 0;line-height:1.6}
.lv-r span{font-size:13px;color:var(--grey-med);text-align:right;white-space:nowrap}
@media(max-width:620px){.lv-r{grid-template-columns:1fr}.lv-r span{text-align:left}}

/* ---------- Vertrauensleiste ---------- */
.tru{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--grey);border-bottom:1px solid var(--grey);margin:0}
.tru-i{flex:1 1 200px;padding:26px 26px 26px 0;display:flex;gap:14px;align-items:flex-start}
.tru-i svg{width:15px;height:15px;flex:none;color:var(--red);margin-top:2px}
.tru-i b{display:block;font-size:14.5px;font-weight:500;color:var(--black);margin-bottom:4px}
.tru-i span{display:block;font-size:13px;color:var(--grey-med);line-height:1.55}

@media(max-width:960px){.ucc{grid-template-columns:1fr}.ucc-list{border-right:0}
 .ucc-panel{padding:26px 0 0;background-image:none}.ucc-chat{min-height:330px}}
@media(max-width:560px){.ucc-row{font-size:14.5px;padding:16px 14px 16px 2px}}
@media(prefers-reduced-motion:reduce){.ucc-dots i{animation:none}}