/* ==== VIER HELLIGKEITSSTUFEN ==== */
:root{
  --fd:'Archivo',sans-serif; --fb:'Source Sans 3',sans-serif; --fm:'IBM Plex Mono',monospace;
  --tr:-.028em;
  --bg:#F3F6F9; --bg2:#E9EFF4; --card:#FFFFFF; --alt:#FFFFFF;
  --line:#DFE7EE; --line2:#C8D4DE;
  --ink:#16293A; --tx2:#51616F; --tx3:#8695A2;
  --sys:#0B7A85; --act:#111820; --star:#D99B10;
  --heroA:#FFFFFF; --heroB:#F4F7FA;
  --sh:0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.06);
  --shL:0 2px 4px rgba(16,24,40,.05), 0 28px 64px rgba(16,24,40,.10);
  --glA:rgba(11,122,133,.12); --glB:rgba(17,24,32,.08);
  --netL:11,122,133; --netLo:.16; --netD:100,125,150; --netDo:.30;
  --topBg:#132535; --topTx:#94A3B0; --hdBg:rgba(244,247,250,.86);
  --inp:#FAFCFD; --btnTx:#FFFFFF;
  --ease:cubic-bezier(.22,1,.36,1);
  --mon:#132535; --monLine:#22394C; --monTx:#C6D3DE; --monTx2:#7A8C9C; --monOk:#4FD1A5; --monWarn:#F0A93B;
  --navy:#16293A; --or:#D9551B; --orL:#E8692C;
}



/* ==== DUNKLE BÄNDER (unabhängig vom Thema) ==== */
.band{background:var(--mon);color:var(--monTx);padding:86px 0;position:relative;overflow:hidden}
.band h2,.band h3{color:#fff}
.band .eyebrow{color:var(--monOk)}
.band p{color:#9AA6B3}
.band .head p{color:#9AA6B3}
.bandglow{position:absolute;width:760px;height:760px;border-radius:50%;top:-330px;right:-200px;
  background:radial-gradient(circle,rgba(74,222,128,.09),transparent 64%);pointer-events:none}

/* Paket */
.pak{display:grid;grid-template-columns:1fr 420px;gap:52px;align-items:start;position:relative;z-index:2}
@media(max-width:1000px){.pak{grid-template-columns:1fr;gap:36px}}
.pakliste{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--monLine);
  border:1px solid var(--monLine);border-radius:12px;overflow:hidden;margin-top:28px}
@media(max-width:640px){.pakliste{grid-template-columns:1fr}}
.pk{background:rgba(255,255,255,.022);padding:15px 18px;display:flex;gap:11px;align-items:flex-start;
  font-size:14px;color:#C3CDD8;transition:background .22s}
.pk:hover{background:rgba(255,255,255,.05)}
.pk i{color:var(--monOk);font-style:normal;font-size:13px;line-height:1.5;flex-shrink:0}
.pakraus{margin-top:26px;padding:18px 20px;border-left:2px solid var(--monWarn);background:rgba(251,191,36,.05);
  border-radius:0 8px 8px 0;font-size:14.5px;color:#B9C4D0}
.pakraus b{color:#fff;font-weight:500;display:block;margin-bottom:5px;font-family:var(--fd)}

/* SLA-Karte */
.sla{background:rgba(255,255,255,.035);border:1px solid var(--monLine);border-radius:14px;overflow:hidden}
.slah{padding:18px 20px 0}
.slah .t{font-family:var(--fd);font-size:17px;color:#fff;margin-bottom:14px}
.tog{display:flex;gap:4px;background:rgba(0,0,0,.3);border-radius:9px;padding:4px;margin-bottom:16px}
.tog button{flex:1;font-family:var(--fm);font-size:11.5px;padding:8px;border-radius:6px;
  border:0;cursor:pointer;background:transparent;color:#8B96A3;transition:.2s}
.tog button.on{background:var(--monOk);color:#04150B;font-weight:500}
.slat{width:100%;border-collapse:collapse;font-size:13px}
.slat th{font-family:var(--fm);font-size:10px;letter-spacing:.1em;color:#6E7A87;
  text-align:left;padding:9px 20px;border-top:1px solid var(--monLine);border-bottom:1px solid var(--monLine);font-weight:400}
.slat th:last-child,.slat td:last-child{text-align:right}
.slat td{padding:12px 20px;border-bottom:1px solid rgba(27,37,50,.6);color:#B9C4D0}
.slat tr:last-child td{border-bottom:0}
.slat td.z{font-family:var(--fm);color:var(--monOk);font-size:14px}
.slaf{padding:14px 20px;border-top:1px solid var(--monLine);font-size:11.5px;color:#6E7A87;
  font-family:var(--fm);line-height:1.6}

/* Partner */
.part{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pt{background:var(--card);padding:26px 18px;text-align:center;font-family:var(--fd);
  font-size:16px;font-weight:500;color:var(--tx2);transition:.24s var(--ease)}
.pt:hover{color:var(--ink);background:var(--bg2)}
.pt small{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;
  color:var(--tx3);margin-top:5px;font-weight:400}

/* Ansprechpartner */
.ap{display:grid;grid-template-columns:110px 1fr auto;gap:28px;align-items:center;position:relative;z-index:2;
  background:rgba(255,255,255,.035);border:1px solid var(--monLine);border-radius:16px;padding:30px 32px}
@media(max-width:820px){.ap{grid-template-columns:1fr;gap:20px;text-align:left}}
.apf{width:110px;height:110px;border-radius:50%;background:linear-gradient(140deg,#1E2A36,#141D26);
  border:1px solid var(--monLine);display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-size:32px;font-weight:600;color:var(--monOk)}
.ap .nm{font-family:var(--fd);font-size:22px;color:#fff;margin-bottom:3px}
.ap .rl{font-family:var(--fm);font-size:11px;color:var(--monOk);letter-spacing:.09em;margin-bottom:12px}
.ap .ct{font-size:14px;color:#9AA6B3;line-height:1.75}
.ap .ct a{color:#C3CDD8;text-decoration:none}
.ap .ct a:hover{color:var(--monOk)}



/* ==== VIDEO-HINTERGRUND ==== */
.vid{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.vid video{width:100%;height:100%;object-fit:cover;display:block}
.vid::after{content:'';position:absolute;inset:0}
.hero .vid{opacity:.30}
.hero .vid::after{background:linear-gradient(105deg,var(--bg) 8%,rgba(243,246,249,.72) 46%,rgba(243,246,249,.30) 100%)}
.band .vid{opacity:.34}
.band .vid::after{background:linear-gradient(180deg,var(--mon) 0%,rgba(19,37,53,.78) 40%,var(--mon) 100%)}
/* Platzhalter, solange keine Videodatei vorliegt */
.vfall{position:absolute;inset:0;background:
  radial-gradient(1100px 460px at 78% 18%,rgba(11,122,133,.18),transparent 62%),
  radial-gradient(900px 520px at 12% 82%,rgba(13,110,122,.20),transparent 64%),
  linear-gradient(120deg,#0E1F2E,#16293A 52%,#0C2029);
  background-size:180% 180%;animation:drift 42s ease-in-out infinite alternate}
@keyframes drift{to{background-position:100% 100%}}
@media(max-width:900px){.vid video{display:none}}






/* ==== UNTERSEITEN ==== */
.krumen{background:var(--bg);border-bottom:1px solid var(--line)}
.krumen .w{padding:12px 40px;font-family:var(--fm);font-size:11.5px;color:var(--tx3);letter-spacing:.04em}
.krumen a{color:var(--tx3);text-decoration:none;transition:color .18s}
.krumen a:hover{color:var(--act)}
.krumen span{margin:0 8px;opacity:.5}
.subhero{background:linear-gradient(180deg,var(--heroA) 0%,var(--heroB) 100%);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.subhero .w{padding:62px 40px 66px;max-width:1240px;position:relative;z-index:2}
.subhero .inner{max-width:60ch}
.subhero h1{font-size:clamp(31px,4.4vw,50px);margin-bottom:20px;max-width:20ch}
.subhero .lead{font-size:18px;margin-bottom:26px}
.subhero .gl{position:absolute;border-radius:50%;pointer-events:none}
.liste{border-top:1px solid var(--line)}
.liste .z{display:grid;grid-template-columns:210px 1fr;gap:30px;padding:22px 0;border-bottom:1px solid var(--line);
  transition:background .24s var(--ease)}
.liste .z:hover{background:var(--bg2)}
@media(max-width:760px){.liste .z{grid-template-columns:1fr;gap:6px}}
.liste .z h3{font-size:19px;font-weight:600}
.liste .z p{font-size:15px;color:var(--tx2)}
.vgl{width:100%;border-collapse:collapse;font-size:15px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vgl th,.vgl td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.vgl thead th{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx3);background:var(--bg2);font-weight:400}
.vgl thead th:first-child{width:34%}
.vgl tbody tr:last-child td{border-bottom:0}
.vgl td.j{color:var(--sys);font-weight:600}
.vgl td.n{color:var(--tx3)}
.vgl tbody tr:hover{background:var(--bg2)}
.orte{display:flex;gap:8px;flex-wrap:wrap}
.orte a{border:1px solid var(--line2);background:var(--card);border-radius:8px;padding:8px 14px;font-size:14px;
  color:var(--tx2);text-decoration:none;transition:.2s var(--ease)}
.orte a:hover{border-color:var(--act);color:var(--ink);transform:translateY(-1px);box-shadow:var(--sh)}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;position:relative;z-index:2}
.info h3{font-family:var(--fd);font-size:16px;color:#fff;margin-bottom:8px;font-weight:600}
.info p{font-size:14.5px;color:#9AA6B3;line-height:1.7}
.info p a{color:#C6D3DE;text-decoration:none}
.info p a:hover{color:var(--monOk)}

/* ==== MEGAMENÜ ==== */
.mainnav{display:flex}
.mainnav>ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.mainnav li{position:static}
.navlink{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:8px;font-size:14.5px;
  color:#9AA6B4;text-decoration:none;transition:color .18s,background .18s;white-space:nowrap}
.navlink:hover,.mainnav li.auf>.navlink{color:#fff;background:rgba(255,255,255,.06)}
.navlink .pf{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .26s var(--ease);opacity:.6}
.mainnav li.auf>.navlink .pf{transform:rotate(-135deg) translateY(-2px)}

.mega{position:absolute;left:0;right:0;top:100%;background:#0F161E;border-top:1px solid #1D2631;
  border-bottom:1px solid #1D2631;box-shadow:0 30px 60px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .26s var(--ease),visibility .22s;z-index:70}
.mainnav li.auf>.mega{opacity:1;visibility:visible;transform:none}
.mega .in{max-width:1240px;margin:0 auto;padding:32px 40px 34px;display:grid;gap:34px}
.mega.l4 .in{grid-template-columns:repeat(4,1fr) 280px}
.mega.l3 .in{grid-template-columns:repeat(3,1fr) 280px}
.mega.l2 .in{grid-template-columns:repeat(2,1fr) 280px}
@media(max-width:1200px){.mega .in{grid-template-columns:repeat(3,1fr)!important}.mfeat{display:none!important}}

.mcol h4{margin:0 0 4px}
.mcol h4 a{font-family:var(--fd);font-size:15px;font-weight:700;color:#fff;text-decoration:none;
  letter-spacing:var(--tr);display:inline-flex;align-items:center;gap:7px}
.mcol h4 a:hover{color:#4FD1A5}
.mcol h4 a::after{content:'→';font-size:12px;opacity:0;transform:translateX(-4px);transition:.22s var(--ease)}
.mcol h4 a:hover::after{opacity:1;transform:none}
.mcol .sub{font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:#5D6B7A;text-transform:uppercase;
  margin-bottom:14px;display:block}
.mcol ul{list-style:none;display:grid;gap:1px;margin:0;padding:0}
.mcol li a{display:block;padding:7px 10px;margin-left:-10px;border-radius:7px;font-size:14px;color:#A7B3C0;
  text-decoration:none;transition:.18s;line-height:1.45}
.mcol li a:hover{color:#fff;background:rgba(255,255,255,.05)}
.mcol li a small{display:block;font-size:12px;color:#67747F;margin-top:1px}

.mfeat{background:rgba(255,255,255,.035);border:1px solid #1D2631;border-radius:14px;padding:22px 20px;align-self:start}
.mfeat .lb{font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:#4FD1A5;text-transform:uppercase;margin-bottom:10px}
.mfeat h5{font-family:var(--fd);font-size:17px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:var(--tr)}
.mfeat p{font-size:13.5px;color:#8B98A6;margin:0 0 16px;line-height:1.55}
.mfeat a.mb{display:inline-block;background:#fff;color:#111820;padding:10px 18px;border-radius:8px;
  font-size:13.5px;font-weight:600;text-decoration:none;transition:.2s var(--ease)}
.mfeat a.mb:hover{background:#E9EDF1;transform:translateY(-1px)}

/* Burger + Schublade */
.burger{display:none;background:transparent;border:1px solid #2A3644;border-radius:9px;width:42px;height:42px;
  cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:#DCE4EC;transition:.26s var(--ease)}
.burger.auf span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.auf span:nth-child(2){opacity:0}
.burger.auf span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,88vw);background:#0F161E;z-index:150;
  transform:translateX(102%);transition:transform .34s var(--ease);overflow-y:auto;padding:22px 22px 60px;
  box-shadow:-20px 0 60px rgba(0,0,0,.45)}
.drawer.auf{transform:none}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.drawer .dh img{height:28px}
.drawer details{border-bottom:1px solid #1D2631}
.drawer summary{padding:15px 0;cursor:pointer;font-family:var(--fd);font-size:16px;font-weight:600;color:#fff;
  list-style:none;display:flex;justify-content:space-between}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:'+';color:#4FD1A5;font-size:19px;transition:transform .24s var(--ease)}
.drawer details[open] summary::after{transform:rotate(45deg)}
.drawer details ul{list-style:none;padding:0 0 12px;display:grid;gap:2px}
.drawer details ul a{display:block;padding:8px 10px;border-radius:7px;color:#A7B3C0;font-size:14.5px;text-decoration:none}
.drawer details ul a:hover{background:rgba(255,255,255,.05);color:#fff}
.drawer .dl2{margin-top:22px;display:grid;gap:9px}
.schatten{position:fixed;inset:0;background:rgba(6,10,14,.6);z-index:140;opacity:0;pointer-events:none;transition:.3s}
.schatten.auf{opacity:1;pointer-events:auto}
@media(max-width:1160px){.mainnav{display:none}.burger{display:flex}}

/* ==== DUNKLE KOPFZEILE ==== */
.top{background:#0B0F14 !important;color:#7E8B99 !important}
.top .dl{border-color:#222C38}
.top a:hover{color:#fff}
header{background:rgba(17,24,32,.94) !important;border-bottom:1px solid #1D2631}
header nav ul{color:#9AA6B4}
header nav a:hover{color:#fff}
header nav a::after{background:#4FD1A5}
header .logo .dun{display:none !important}
header .logo .hell{display:block !important}
header.klein{box-shadow:0 6px 26px rgba(11,15,20,.28)}
.tel2{border:1px solid #2A3644;background:transparent;color:#DCE4EC}
.tel2:hover{border-color:#4FD1A5;color:#fff;box-shadow:none;background:rgba(255,255,255,.04)}
.tel{background:#FFFFFF;color:#111820}
.tel:hover{background:#F0F3F6;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.hero{border-top:0}

/* ==== HERO-DYNAMIK ==== */
.hero .w{padding-top:64px}
#net{opacity:1}
.rot{display:inline-block;position:relative;vertical-align:bottom;min-width:9ch}
.rot span{display:inline-block;white-space:nowrap;position:absolute;left:0;top:0;
  opacity:0;transform:translateY(70%) rotateX(-70deg);transform-origin:50% 0;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rot span.on{opacity:1;transform:none;position:relative}
.rot span.out{opacity:0;transform:translateY(-70%) rotateX(70deg)}
.kicker{perspective:600px;min-height:1.3em}
.badge span{display:inline-block;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.badge span.weg{opacity:0;transform:translateY(-8px)}
/* Legende zum Netz */
.netleg{position:absolute;right:40px;bottom:26px;z-index:2;font-family:var(--fm);font-size:10.5px;
  color:var(--tx3);letter-spacing:.08em;display:flex;gap:14px;align-items:center;pointer-events:none}
.netleg i{width:6px;height:6px;border-radius:50%;background:var(--sys);display:inline-block;margin-right:5px}
@media(max-width:1060px){.netleg{display:none}}

/* ==== PARALLAX ==== */
[data-px]{will-change:transform}
.hero{perspective:1200px}
.hero .vid video{transform:scale(1.14);will-change:transform}
.zoomwrap{overflow:hidden}
/* Großtypografie-Band */
.claim{padding:110px 0;text-align:center;overflow:hidden;position:relative}
.claim h2{font-family:var(--fd);font-weight:800;line-height:.94;letter-spacing:-.05em;
  font-size:clamp(38px,8.4vw,116px);text-transform:uppercase;color:var(--ink)}
.claim h2 em{font-style:normal;color:var(--act)}
.claim p{margin:26px auto 0;max-width:56ch;font-size:17px;color:var(--tx2)}
.claim .bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--fd);font-weight:800;font-size:clamp(120px,26vw,360px);color:var(--ink);
  opacity:.032;white-space:nowrap;pointer-events:none;letter-spacing:-.06em}

/* ==== BEWEGUNG ==== */
/* Lesefortschritt */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;background:var(--act);
  transition:width .1s linear;box-shadow:0 0 10px rgba(11,15,20,.35)}
/* Kopfzeile schrumpft */
header{transition:height .3s var(--ease),box-shadow .3s var(--ease)}
header .w{transition:height .3s var(--ease)}
header.klein .w{height:60px}
header.klein{box-shadow:0 6px 26px rgba(22,41,58,.10)}
header .logo img{transition:height .3s var(--ease)}
header.klein .logo img{height:27px}
/* Zeilenweiser Aufbau der Überschrift */
.rl{display:block;overflow:hidden}
.rl>span{display:block;transform:translateY(102%);opacity:0;
  animation:auf .85s var(--ease) forwards}
.rl:nth-child(2)>span{animation-delay:.10s}
.rl:nth-child(3)>span{animation-delay:.20s}
@keyframes auf{to{transform:translateY(0);opacity:1}}
.fadeIn{opacity:0;animation:fi .8s var(--ease) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.34s}.d3{animation-delay:.44s}
.d4{animation-delay:.54s}.d5{animation-delay:.62s}.d6{animation-delay:.70s}
@keyframes fi{to{opacity:1}}
/* Formular gleitet herein */
.form{opacity:0;transform:translateY(20px);animation:fu .9s .3s var(--ease) forwards}
@keyframes fu{to{opacity:1;transform:none}}
/* Überschriftenlinie zieht sich auf */
.head h2{position:relative;display:inline-block;padding-bottom:12px}
.head h2::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--act);
  transition:width .8s .15s var(--ease)}
[data-rv].in .head h2::after,.head[data-rv].in h2::after{width:56px}
/* Karten gestaffelt */
.grid.in .cell{opacity:0;transform:translateY(20px);animation:fu .55s var(--ease) forwards}
.grid.in .cell:nth-child(1){animation-delay:.02s}.grid.in .cell:nth-child(2){animation-delay:.08s}
.grid.in .cell:nth-child(3){animation-delay:.14s}.grid.in .cell:nth-child(4){animation-delay:.20s}
.grid.in .cell:nth-child(5){animation-delay:.26s}.grid.in .cell:nth-child(6){animation-delay:.32s}
.grid.in .cell:nth-child(7){animation-delay:.38s}.grid.in .cell:nth-child(8){animation-delay:.44s}
.pakliste.in .pk{opacity:0;animation:fi .5s var(--ease) forwards}
.pakliste.in .pk:nth-child(1){animation-delay:.04s}.pakliste.in .pk:nth-child(2){animation-delay:.10s}
.pakliste.in .pk:nth-child(3){animation-delay:.16s}.pakliste.in .pk:nth-child(4){animation-delay:.22s}
.pakliste.in .pk:nth-child(5){animation-delay:.28s}.pakliste.in .pk:nth-child(6){animation-delay:.34s}
.pakliste.in .pk:nth-child(7){animation-delay:.40s}.pakliste.in .pk:nth-child(8){animation-delay:.46s}
/* Kacheln: Farbkante beim Überfahren */
.cell::before{content:'';position:absolute;left:0;top:0;width:2px;height:0;background:var(--act);
  transition:height .3s var(--ease);border-radius:2px 0 0 2px}
.cell:hover::before{height:100%}
.cell{overflow:hidden}
/* Schaltflächen: Schimmer */
.b1,.tel,.form button{position:relative;overflow:hidden}
.b1::after,.tel::after,.form button::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);transition:left .65s var(--ease)}
.b1:hover::after,.tel:hover::after,.form button:hover::after{left:130%}
/* Schritte: verbindende Linie */
.step{position:relative}
.step::before{content:'';position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--act);
  transition:width .7s var(--ease)}
.steps.in .step::before{width:100%}
.steps.in .step:nth-child(2)::before{transition-delay:.14s}
.steps.in .step:nth-child(3)::before{transition-delay:.28s}
.steps.in .step:nth-child(4)::before{transition-delay:.42s}
/* Partner-Laufband */
.pwrap{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--card);padding:26px 0;position:relative}
.pwrap::before,.pwrap::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.pwrap::before{left:0;background:linear-gradient(90deg,var(--card),transparent)}
.pwrap::after{right:0;background:linear-gradient(270deg,var(--card),transparent)}
.ptrack{display:flex;gap:60px;width:max-content;animation:lauf 34s linear infinite}
.pwrap:hover .ptrack{animation-play-state:paused}
@keyframes lauf{to{transform:translateX(-50%)}}
.ptrack span{font-family:var(--fd);font-size:21px;font-weight:600;color:var(--tx3);
  white-space:nowrap;transition:color .22s;letter-spacing:-.02em}
.ptrack span:hover{color:var(--act)}
/* Statuspunkte im Monitor */
.mh .lv i{box-shadow:0 0 0 0 rgba(79,209,165,.6);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(79,209,165,.55)}70%{box-shadow:0 0 0 9px rgba(79,209,165,0)}100%{box-shadow:0 0 0 0 rgba(79,209,165,0)}}
/* Zurück nach oben */
.up{position:fixed;right:22px;bottom:22px;z-index:110;width:44px;height:44px;border-radius:12px;
  background:var(--act);color:#fff;border:0;cursor:pointer;font-size:18px;opacity:0;pointer-events:none;
  transform:translateY(12px);transition:.3s var(--ease);box-shadow:0 8px 22px rgba(11,15,20,.20)}
.up.da{opacity:1;pointer-events:auto;transform:none}
.up:hover{transform:translateY(-2px)}
@media(max-width:640px){.up{right:14px;bottom:78px}}


/* ==== KARTEN MIT TIEFE ==== */
.cell{background:var(--card);border:1px solid var(--line);border-radius:16px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  transform-style:preserve-3d;will-change:transform}
.cell::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:0;
  transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
  rgba(11,15,20,.07),transparent 42%)}
.cell:hover::after{opacity:1}
.cell:hover{border-color:var(--line2);box-shadow:var(--shL)}
.cell .ic{width:38px;height:38px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  transition:.3s var(--ease);font-family:var(--fm);font-size:12px;color:var(--sys)}
.cell:hover .ic{background:var(--act);border-color:var(--act);color:#fff;transform:rotate(-6deg) scale(1.06)}
.cell .no{display:none}
/* Formular- und Monitorkarte leicht plastisch */
.form,.monin,.sla{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.form:hover{box-shadow:0 4px 8px rgba(16,24,40,.06), 0 36px 80px rgba(16,24,40,.14)}
/* ==== MIKRO-INTERAKTIONEN ==== */
.b1,.b2,.tel{will-change:transform}
.rip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.30);
  animation:rip .58s var(--ease) forwards;pointer-events:none}
@keyframes rip{to{transform:scale(3.4);opacity:0}}
.kopiert{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);z-index:300;
  background:var(--mon);color:#fff;padding:11px 20px;border-radius:10px;font-size:14px;
  opacity:0;transition:.3s var(--ease);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.kopiert.da{opacity:1;transform:translateX(-50%) translateY(0)}
.form input,.form textarea{transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.form input:focus,.form textarea:focus{transform:translateY(-1px)}
.chip{cursor:default}
.q summary{transition:color .2s,padding-left .26s var(--ease)}
.q summary:hover{padding-left:8px}
.st{transition:background .28s var(--ease)}
.st:hover{background:var(--bg2)}
.pk{cursor:default}
/* Sichtbarer Tastaturfokus (EAA) */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--act);outline-offset:3px;border-radius:6px}
/* Schriftschalter */



*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);-webkit-font-smoothing:antialiased;line-height:1.62}
.w{max-width:1240px;margin:0 auto;padding:0 40px}
@media(max-width:700px){.w{padding:0 20px}}
h1,h2,h3{font-family:var(--fd);letter-spacing:var(--tr);line-height:1.1}
.mono{font-family:var(--fm)}
.eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sys)}
a{color:inherit}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Topbar + Header */
.top{background:var(--topBg);color:var(--topTx);font-size:12.5px}
.top .w{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px;flex-wrap:wrap}
.top a{text-decoration:none;transition:color .18s}.top a:hover{color:#fff}
.top .dl{border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:4px 11px}
header{position:sticky;top:0;z-index:80;background:var(--hdBg);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
header .w{display:flex;justify-content:space-between;align-items:center;height:74px;gap:20px}
.logo{display:inline-block;line-height:0;text-decoration:none;transition:opacity .2s}
.logo:hover{opacity:.82}
.logo img{height:34px;width:auto;display:block}
.logo .hell{display:none}
footer .logo img{height:32px}
nav ul{display:flex;gap:28px;list-style:none;font-size:14.5px;color:var(--tx2)}
nav a{text-decoration:none;position:relative;transition:color .18s}
nav a::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--sys);transition:width .26s var(--ease)}
nav a:hover{color:var(--ink)}nav a:hover::after{width:100%}
.hdbtn{display:flex;gap:9px;align-items:center}
.tel2{border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:10px 18px;border-radius:9px;
  font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:.2s var(--ease)}
.tel2:hover{border-color:var(--act);color:var(--act);transform:translateY(-1px);box-shadow:var(--sh)}
@media(max-width:1120px){.tel2{display:none}}
.tel{background:var(--act);color:var(--btnTx);padding:11px 21px;border-radius:9px;font-weight:600;font-size:14.5px;
  text-decoration:none;white-space:nowrap;transition:.2s var(--ease);box-shadow:0 5px 14px rgba(11,15,20,.14)}
.tel:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(11,15,20,.20)}
@media(max-width:940px){nav,.top .dl{display:none}}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--heroA) 0%,var(--heroB) 100%);border-bottom:1px solid var(--line)}
#net{position:absolute;inset:0;width:100%;height:100%}
.gl{position:absolute;border-radius:50%;pointer-events:none}
.gl.a{width:820px;height:820px;top:-380px;right:-220px;background:radial-gradient(circle,var(--glA),transparent 64%)}
.gl.b{width:640px;height:640px;bottom:-340px;left:-200px;background:radial-gradient(circle,var(--glB),transparent 64%)}
.hero .w>div:first-child{position:relative}
.hero .w>div:first-child::before{content:"";position:absolute;inset:-30px -60px -20px -50px;z-index:-1;
  background:radial-gradient(58% 62% at 34% 48%,var(--bg) 30%,transparent 78%);opacity:.86}
.hero .w{position:relative;z-index:2;padding:74px 40px 80px;display:grid;grid-template-columns:1fr 428px;gap:56px;align-items:start}
@media(max-width:1060px){.hero .w{grid-template-columns:1fr;gap:40px;padding:52px 20px 60px}}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line2);background:var(--card);
  border-radius:30px;padding:7px 15px;font-size:12.5px;color:var(--tx2);margin-bottom:26px;box-shadow:var(--sh)}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--sys);animation:pl 2.4s infinite}
@keyframes pl{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--netL),.4)}50%{opacity:.5;box-shadow:0 0 0 8px rgba(var(--netL),0)}}
.kicker{font-family:var(--fd);font-size:clamp(19px,2.2vw,25px);font-weight:500;color:var(--sys);
  margin-bottom:12px;letter-spacing:-.02em}
h1{font-size:clamp(34px,5.1vw,57px);font-weight:700;margin-bottom:22px;max-width:17ch}
h1 span{color:var(--tx2)}
.lead{font-size:18px;color:var(--tx2);max-width:52ch;margin-bottom:26px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.chip{border:1px solid var(--line2);background:var(--card);border-radius:8px;padding:8px 14px;font-size:13.5px;color:var(--tx2);
  display:flex;align-items:center;gap:7px;transition:.2s var(--ease)}
.chip:hover{border-color:var(--sys);color:var(--ink);transform:translateY(-1px);box-shadow:var(--sh)}
.chip b{color:var(--sys);font-weight:600}
.rate{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--tx2);margin-bottom:30px}
.stars{color:var(--star);letter-spacing:2px;font-size:15px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.b1{background:var(--act);color:var(--btnTx);padding:15px 29px;border-radius:10px;font-weight:600;font-size:15px;
  text-decoration:none;transition:.2s var(--ease);box-shadow:0 5px 14px rgba(11,15,20,.14)}
.b1:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,15,20,.20)}
.b2{border:1px solid var(--line2);background:var(--card);padding:15px 29px;border-radius:10px;font-size:15px;
  text-decoration:none;color:var(--ink);transition:.2s var(--ease)}
.b2:hover{border-color:var(--sys);color:var(--sys);transform:translateY(-1px);box-shadow:var(--sh)}

/* Formular */
.form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shL)}
.form h2{font-size:21px;margin-bottom:6px}
.form p.s{font-size:13.5px;color:var(--tx3);margin-bottom:20px}
.form label{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;
  color:var(--tx3);text-transform:uppercase;margin-bottom:6px}
.form input,.form textarea{width:100%;background:var(--inp);border:1px solid var(--line2);border-radius:9px;
  padding:12px 14px;color:var(--ink);font-family:var(--fb);font-size:14.5px;margin-bottom:14px;transition:.18s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--sys);background:var(--card);box-shadow:0 0 0 3px rgba(var(--netL),.16)}
.form textarea{resize:vertical;min-height:74px}
.form .dsg{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--tx3);margin-bottom:18px}
.form .dsg a{color:var(--sys)}
.form button{width:100%;background:var(--act);color:var(--btnTx);border:0;padding:15px;border-radius:10px;
  font-weight:600;font-size:15px;cursor:pointer;font-family:var(--fb);transition:.2s var(--ease);
  box-shadow:0 5px 14px rgba(11,15,20,.14)}
.form button:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(11,15,20,.20)}

/* Betriebsmonitor — einziges dunkles Element */
.monwrap{background:var(--bg);padding:60px 0}
.monin{background:var(--mon);border-radius:16px;overflow:hidden;box-shadow:var(--shL);color:var(--monTx)}
.mh{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--monLine);
  font-family:var(--fm);font-size:11px;color:var(--monTx2);letter-spacing:.08em}
.mh .lv{display:flex;align-items:center;gap:7px;color:var(--monOk)}
.mh .lv i{width:6px;height:6px;border-radius:50%;background:var(--monOk);animation:bl 2s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.28}}
.mg{display:grid;grid-template-columns:1fr 340px}
@media(max-width:900px){.mg{grid-template-columns:1fr}}
.rows{border-right:1px solid var(--monLine)}
.row{display:grid;grid-template-columns:16px 1fr auto;gap:12px;align-items:center;padding:12px 22px;
  font-family:var(--fm);font-size:12.5px;border-bottom:1px solid var(--monLine);
  opacity:0;transform:translateY(6px)}
.monin.go .row{animation:rin .34s var(--ease) forwards}
.monin.go .row:nth-child(1){animation-delay:.1s}.monin.go .row:nth-child(2){animation-delay:.19s}
.monin.go .row:nth-child(3){animation-delay:.28s}.monin.go .row:nth-child(4){animation-delay:.37s}
.monin.go .row:nth-child(5){animation-delay:.46s}
@keyframes rin{to{opacity:1;transform:translateY(0)}}
.row:last-child{border-bottom:0}
.row .s{width:7px;height:7px;border-radius:50%;background:var(--monOk)}
.row.w .s{background:var(--monWarn);animation:bl 1.7s infinite}
.row .t{color:var(--monTx)}.row .v{color:var(--monTx2);font-size:11.5px}
.spark{padding:20px 22px}
.spark .lb{font-family:var(--fm);font-size:10.5px;color:var(--monTx2);letter-spacing:.1em;margin-bottom:12px}
.note{padding:12px 22px;border-top:1px solid var(--monLine);font-size:11.5px;color:var(--monTx2);font-family:var(--fm)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:26px}
.st{background:var(--card);padding:26px 22px}
.st .n{font-family:var(--fd);font-size:36px;font-weight:600;letter-spacing:-.03em;color:var(--sys)}
.st .l{font-family:var(--fm);font-size:10.5px;color:var(--tx3);margin-top:6px;letter-spacing:.06em}

/* Abschnitte */
section.sec{padding:86px 0;border-top:1px solid var(--line)}
section.sec.alt{background:var(--alt)}
.head{max-width:60ch;margin-bottom:44px}
.head .eyebrow{display:block;margin-bottom:14px}
.head h2{font-size:clamp(27px,3.4vw,38px);font-weight:600;margin-bottom:14px}
.head p{color:var(--tx2);font-size:17px}
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-rv].in{opacity:1;transform:none}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.cell{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 26px 34px;position:relative;
  transition:.26s var(--ease);text-decoration:none;display:block}
.cell:hover{border-color:var(--sys);transform:translateY(-3px);box-shadow:var(--shL)}
.cell .no{font-family:var(--fm);font-size:10.5px;color:var(--tx3);margin-bottom:18px}
.cell h3{font-size:20px;font-weight:600;margin-bottom:9px}
.cell p{font-size:14.5px;color:var(--tx2)}
.cell .ar{position:absolute;right:26px;bottom:26px;color:var(--sys);opacity:0;transform:translateX(-8px);transition:.26s var(--ease)}
.cell:hover .ar{opacity:1;transform:none}

.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:34px}
.why h3{font-size:19px;font-weight:600;margin-bottom:10px;padding-top:16px;border-top:2px solid var(--sys)}
.why p{font-size:14.5px;color:var(--tx2)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.step{padding-top:18px;border-top:1px solid var(--line2)}
.step .n{font-family:var(--fm);font-size:11px;color:var(--sys);margin-bottom:12px}
.step h3{font-size:17px;font-weight:600;margin-bottom:8px}
.step p{font-size:14px;color:var(--tx2)}

.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{padding:21px 0;cursor:pointer;font-family:var(--fd);font-size:17.5px;font-weight:500;
  display:flex;justify-content:space-between;gap:20px;list-style:none;transition:color .2s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--sys)}
.q summary::after{content:'+';color:var(--sys);font-size:22px;transition:transform .26s var(--ease)}
.q[open] summary::after{transform:rotate(45deg)}
.q p{padding:0 0 22px;color:var(--tx2);max-width:76ch;font-size:15px}

.cta{background:var(--mon);color:var(--monTx);border-radius:18px;padding:52px 46px;display:grid;
  grid-template-columns:1fr auto;gap:36px;align-items:center;box-shadow:var(--shL)}
@media(max-width:820px){.cta{grid-template-columns:1fr;padding:36px 26px}}
.cta h2{font-size:clamp(25px,3vw,34px);font-weight:600;color:#fff;margin-bottom:10px}
.cta p{color:#8E9BA8;max-width:48ch}
.cta .b2{background:transparent;border-color:var(--monLine);color:var(--monTx)}
.cta .b2:hover{border-color:var(--monOk);color:#fff;box-shadow:none}

footer{padding:60px 0 40px;font-size:14px;color:var(--tx2);background:var(--alt);border-top:1px solid var(--line)}
footer .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
@media(max-width:800px){footer .fg{grid-template-columns:1fr}}
footer h4{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;color:var(--tx3);
  text-transform:uppercase;margin-bottom:14px}
footer a{text-decoration:none;transition:color .18s}footer a:hover{color:var(--sys)}
footer ul{list-style:none;display:grid;gap:8px}
.legal{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:13px;color:var(--tx3)}

/* ============ ERGÄNZUNGEN: MOBIL & FEINSCHLIFF ============ */
.logo img{height:34px}
header.klein .logo img{height:27px}
footer .logo img{height:32px}

/* Touchflächen mindestens 44px */
@media(hover:none){
  .navlink,.mcol li a,.drawer details ul a,.q summary{min-height:44px;display:flex;align-items:center}
  .b1,.b2,.tel,.tel2,.form button{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .cell:hover{transform:none!important}
  .cell::after{display:none}
}

@media(max-width:1060px){
  .hero .w{padding:44px 20px 52px}
  .hero .w>div:first-child::before{display:none}
  #net{opacity:.55}
  .subhero .w{padding:44px 20px 48px}
}
@media(max-width:760px){
  .w{padding:0 18px}
  section.sec{padding:56px 0}
  .band{padding:56px 0}
  .claim{padding:66px 0}
  .head{margin-bottom:30px}
  h1{font-size:clamp(28px,7.6vw,38px)}
  .subhero h1{font-size:clamp(26px,7.2vw,34px)}
  .lead{font-size:16.5px}
  .stats{grid-template-columns:1fr 1fr}
  .st{padding:20px 16px}
  .st .n{font-size:29px}
  .pak{grid-template-columns:1fr}
  .pakliste{grid-template-columns:1fr!important}
  .mg{grid-template-columns:1fr}
  .rows{border-right:0;border-bottom:1px solid var(--monLine)}
  .cta{grid-template-columns:1fr;padding:30px 22px;text-align:left}
  .cta .btns{width:100%}
  .cta .btns a{flex:1;text-align:center}
  .ap{grid-template-columns:1fr;padding:24px 22px}
  .apf{width:74px;height:74px;font-size:23px}
  .info{grid-template-columns:1fr 1fr;gap:22px}
  .krumen .w{padding:11px 18px;font-size:10.5px}
  .liste .z{grid-template-columns:1fr;gap:5px;padding:18px 0}
  .why{gap:26px}
  .steps{gap:22px}
  .q summary{font-size:16px;gap:14px}
  .vgl{font-size:13.5px}
  .vgl th,.vgl td{padding:11px 12px}
  .claim h2{font-size:clamp(30px,10vw,52px)}
  .claim .bg{display:none}
  footer{padding:44px 0 32px}
  .legal{flex-direction:column;gap:10px}
  .up{width:46px;height:46px}
}
@media(max-width:420px){
  .info{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .chips{gap:7px}
  .chip{font-size:12.5px;padding:7px 11px}
  .btns{width:100%}
  .btns .b1,.btns .b2{flex:1;text-align:center;padding:14px 18px}
}

/* Tabellen horizontal scrollbar mit Hinweis */
.scrollbox{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scrollbox::-webkit-scrollbar{height:6px}
.scrollbox::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}

/* Sprungmarke für Tastaturnutzer */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:#111820;color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-size:14px;text-decoration:none}
.skip:focus{left:0}

/* Leistungsübersicht */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.hub{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;
  transition:.26s var(--ease);text-decoration:none;display:block}
.hub:hover{border-color:var(--line2);box-shadow:var(--shL);transform:translateY(-3px)}
.hub .ic{width:38px;height:38px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-family:var(--fm);
  font-size:12px;color:var(--sys);transition:.3s var(--ease)}
.hub:hover .ic{background:var(--act);border-color:var(--act);color:#fff}
.hub h3{font-size:20px;font-weight:600;margin-bottom:8px}
.hub p{font-size:14.5px;color:var(--tx2);margin-bottom:14px}
.hub ul{list-style:none;display:grid;gap:5px;padding:0;margin:0}
.hub li{font-size:13.5px;color:var(--tx3);padding-left:14px;position:relative}
.hub li::before{content:'·';position:absolute;left:3px;color:var(--sys)}

/* ==================== AGB / RECHTSTEXTE ==================== */
.agbhinweis{background:var(--bg2);border:1px solid var(--line2);border-left:3px solid var(--sys);
  border-radius:0 12px 12px 0;padding:20px 24px;max-width:74ch;margin-bottom:26px}
.agbhinweis b{display:block;font-family:var(--fd);font-size:15px;font-weight:600;
  color:var(--ink);margin-bottom:6px}
.agbnav{display:flex;flex-wrap:wrap;gap:7px;max-width:80ch}
.agbnav a{font-family:var(--fm);font-size:11.5px;letter-spacing:.02em;color:var(--tx2);
  text-decoration:none;background:var(--card);border:1px solid var(--line);
  border-radius:7px;padding:7px 11px;transition:.18s var(--ease)}
.agbnav a:hover{border-color:var(--act);color:var(--ink)}
.agbtext{max-width:82ch}
.agbp{margin-bottom:38px;scroll-margin-top:110px}
.agbp h2{font-size:20px;font-weight:600;letter-spacing:-.015em;margin-bottom:16px;
  padding-bottom:11px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
.agbp h2 span{font-family:var(--fm);font-size:12.5px;color:var(--sys);
  letter-spacing:.04em;flex:none}
.agbz{display:grid;grid-template-columns:52px 1fr;gap:14px;margin-bottom:13px}
.agbz .nr{font-family:var(--fm);font-size:11.5px;color:var(--tx3);padding-top:4px;letter-spacing:.02em}
.agbz p{font-size:14.8px;line-height:1.72;color:var(--tx2)}
.agbz p strong{color:var(--ink);font-weight:600}
@media(max-width:640px){
  .agbz{grid-template-columns:1fr;gap:2px}
  .agbz .nr{padding-top:0}
  .agbp h2{flex-direction:column;gap:4px}
  .agbnav{gap:6px}
  .agbnav a{font-size:10.5px;padding:6px 9px}
}
.agbfuss{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;max-width:82ch;margin-top:34px;font-size:14.5px;color:var(--tx2);line-height:1.7}
.agbfuss b{display:block;font-family:var(--fd);font-size:15px;font-weight:600;
  color:var(--ink);margin-bottom:8px}
.agbfuss a{color:var(--sys);text-decoration:none}
.agbfuss .st{display:block;margin-top:14px;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.09em;color:var(--tx3);text-transform:uppercase}

/* Rechtstexte */
.rechtstext{max-width:78ch}
.rp{margin-bottom:34px;scroll-margin-top:110px}
.rp h2{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:13px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.rp p{font-size:15px;line-height:1.75;color:var(--tx2);margin-bottom:12px}
.rp p strong{color:var(--ink);font-weight:600}
.rp a{color:var(--sys);text-decoration:none}
.rp a:hover{text-decoration:underline}
.rp ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.rp li{font-size:15px;line-height:1.65;color:var(--tx2);padding-left:19px;position:relative}
.rp li::before{content:'';position:absolute;left:2px;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--sys);opacity:.55}
.rpstand{margin-top:30px;font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx3)}

/* Fernwartung in der oberen Leiste */
.dlgruppe{display:flex;gap:16px;align-items:center}
.dlgruppe .zweit{opacity:.72}
.dlgruppe .zweit::before{content:'';display:inline-block;width:1px;height:11px;
  background:currentColor;opacity:.35;margin-right:16px;vertical-align:-1px}
@media(max-width:900px){.dlgruppe .zweit{display:none}}

/* Fernwartung in der Schublade */
.dlfern{border-top:1px solid #1D2733;margin-top:6px;padding:18px 22px 4px;display:grid;gap:9px}
.dlfern .lb{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;color:#5D6B7A}
.dlfern a{color:#C6D3DE;text-decoration:none;font-size:14.5px;padding:9px 0;
  display:flex;align-items:center;gap:9px;min-height:44px}
.dlfern a::before{content:'⟳';color:var(--monOk);font-size:13px}
.dlfern a:hover{color:#fff}

/* Fernwartungskarten auf der Kontaktseite */
.fernkarten{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.fernkarten{grid-template-columns:1fr}}
.fk{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 26px;text-decoration:none;display:block;transition:.26s var(--ease)}
.fk:hover{border-color:var(--line2);box-shadow:var(--shL);transform:translateY(-3px)}
.fk .ic{width:46px;height:34px;border-radius:9px;background:var(--bg2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-family:var(--fm);font-size:12px;color:var(--sys);transition:.3s var(--ease)}
.fk:hover .ic{background:var(--act);border-color:var(--act);color:#fff}
.fk h3{font-size:20px;font-weight:600;margin-bottom:9px}
.fk p{font-size:14.5px;color:var(--tx2);line-height:1.7;margin-bottom:14px}
.fk .ar{font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;color:var(--sys)}

/* ==================== PROVENEXPERT-SIEGEL ==================== */
.pesiegel{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:30px 28px;max-width:640px}
.pesiegel .pefrage{display:grid;gap:14px}
.pesiegel .pekopf{display:flex;align-items:center;gap:13px}
.pesiegel .pemarke{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em}
.pesiegel .pestern{color:var(--star);font-size:15px;letter-spacing:1px}
.pesiegel p{font-size:14.5px;color:var(--tx2);line-height:1.7}
.pesiegel .peklein{font-size:12.5px;color:var(--tx3)}
.pesiegel button{align-self:start;background:var(--act);color:var(--btnTx);border:0;
  border-radius:10px;padding:12px 22px;font-family:var(--fb);font-size:15px;
  font-weight:600;cursor:pointer;transition:.2s var(--ease);min-height:46px}
.pesiegel button:hover{background:#1D2733}
.pesiegel button:disabled{opacity:.5;cursor:default}
.pesiegel .pefehler{color:#B4451F;font-size:13.5px}
.pesiegel a{color:var(--sys);text-decoration:none}
.pesiegel a:hover{text-decoration:underline}
.pesiegel.geladen{padding:20px}
#proSealWidget{min-height:60px}
@media(max-width:520px){
  .pesiegel{padding:24px 20px}
  .pesiegel button{width:100%;text-align:center;justify-content:center}
}

/* ============ GESTALTUNGSKLASSEN DES REDAKTIONSBEREICHS ============
   Vom Editor gesetzt. Relative Werte, damit die Verhältnisse stimmen
   und die Seite auf jedem Gerät lesbar bleibt. */
.t-1{font-size:.70em!important}
.t-2{font-size:.80em!important}
.t-3{font-size:.90em!important}
.t-5{font-size:1.12em!important}
.t-6{font-size:1.25em!important}
.t-7{font-size:1.40em!important}
.t-8{font-size:1.60em!important}
.t-9{font-size:1.85em!important}
.w-400{font-weight:400!important}
.w-500{font-weight:500!important}
.w-600{font-weight:600!important}
.w-700{font-weight:700!important}
.w-800{font-weight:800!important}
.a-links{text-align:left!important}
.a-mitte{text-align:center!important}
.a-rechts{text-align:right!important}
.a-mitte .btns,.a-mitte .chips{justify-content:center}
.a-rechts .btns,.a-rechts .chips{justify-content:flex-end}
.lh-eng{line-height:1.28!important}
.lh-weit{line-height:1.95!important}
.c-tx2{color:var(--tx2)!important}
.c-tx3{color:var(--tx3)!important}
.c-sys{color:var(--sys)!important}
.c-act{color:var(--act)!important}
.c-weiss{color:#fff!important}
.bg-hell{background:var(--bg2)!important}
.bg-weiss{background:#fff!important}
.bg-petrol{background:var(--sys)!important;color:#fff!important}
.bg-dunkel{background:var(--act)!important;color:#E4EAF0!important}
.bg-dunkel h1,.bg-dunkel h2,.bg-dunkel h3,.bg-dunkel h4,.bg-dunkel strong,.bg-petrol h1,.bg-petrol h2,.bg-petrol h3,.bg-petrol h4,.bg-petrol strong{color:#fff!important}
.bg-dunkel p,.bg-dunkel li,.bg-petrol p,.bg-petrol li{color:#C6D3DE!important}
.bg-hell,.bg-weiss,.bg-petrol,.bg-dunkel{padding:22px 24px;border-radius:14px}
.p-0{padding:0!important}
.p-s{padding:12px 14px!important}
.p-m{padding:24px 26px!important}
.p-l{padding:42px 44px!important}
.mt-0{margin-top:0!important}.mt-s{margin-top:12px!important}
.mt-m{margin-top:30px!important}.mt-l{margin-top:60px!important}
.mb-0{margin-bottom:0!important}.mb-s{margin-bottom:12px!important}
.mb-m{margin-bottom:30px!important}.mb-l{margin-bottom:60px!important}
.b-voll{grid-column:1/-1}
.b-halb{grid-column:span 2}
.r-0{border-radius:0!important}.r-m{border-radius:16px!important}
.r-l{border-radius:26px!important}
.tt-gross{text-transform:uppercase!important;letter-spacing:.06em}
.ra-1{border:1px solid var(--line2)!important}
.sh-1{box-shadow:var(--shL)!important}
section.sp-eng{padding-top:38px!important;padding-bottom:38px!important}
section.sp-weit{padding-top:132px!important;padding-bottom:132px!important}
@media(max-width:760px){
  section.sp-weit{padding-top:72px!important;padding-bottom:72px!important}
  .t-8{font-size:1.4em!important}.t-9{font-size:1.5em!important}
  .p-l{padding:26px 22px!important}
  .b-halb{grid-column:1/-1}
}

/* Honigtopf: fuer Menschen unsichtbar, fuer Skripte sichtbar */
.honig{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}