/* ==========================================================================
   ELONIX — Designsystem
   Systemschriften (SF Pro auf Apple-Geräten), monochrome Basis,
   Farbe entsteht aus Material und Tiefe, nicht aus buntem Akzent.
   ========================================================================== */

/* ---------- Farbwerte: Hell ist die Voreinstellung ---------- */
:root{
  color-scheme:light;

  --bg:#FBFBFD;
  --bg-2:#F3F4F7;
  --elev-1:rgba(10,12,16,.030);
  --elev-2:rgba(10,12,16,.052);
  --elev-3:rgba(10,12,16,.075);
  --hair:rgba(10,12,16,.11);
  --hair-strong:rgba(10,12,16,.20);

  --text:#0A0B0D;
  --text-2:#585E68;
  --text-3:#666C74;
  --text-inv:#FBFBFD;

  --glass:rgba(251,251,253,.66);
  --glass-edge:rgba(255,255,255,.75);
  --scrim:rgba(30,32,38,.30);

  /* Umgebungsfarbe — ausschliesslich fuer grossflaechige, sehr schwache Woelkchen */
  --aur-1:#2FD3B0;
  --aur-2:#3AA8F0;
  --aur-3:#7A6BFF;
  --aur-a:.085;

  --focus:#0B63CE;

  --shadow-1:0 1px 2px rgba(16,20,28,.07);
  --shadow-2:0 12px 32px -14px rgba(16,20,28,.20);
  --shadow-3:0 40px 90px -34px rgba(16,20,28,.28);

  /* Raster */
  --u:.5rem;
  --s1:.5rem;  --s2:.75rem; --s3:1rem;   --s4:1.5rem;
  --s5:2rem;   --s6:3rem;   --s7:4.5rem; --s8:7rem;  --s9:10rem;

  --r1:8px; --r2:14px; --r3:22px; --r4:32px;
  --maxw:1180px;
  --nav-h:58px;

  /* Kurven */
  --ease:cubic-bezier(.32,.72,0,1);      /* Apple-naher Standard */
  --ease-in:cubic-bezier(.4,0,1,1);
}

:root[data-theme="dark"]{
  color-scheme:dark;

  --bg:#08090B;
  --bg-2:#0C0E12;
  --elev-1:rgba(255,255,255,.038);
  --elev-2:rgba(255,255,255,.062);
  --elev-3:rgba(255,255,255,.086);
  --hair:rgba(255,255,255,.10);
  --hair-strong:rgba(255,255,255,.18);

  --text:#F2F3F5;
  --text-2:#9BA0A8;
  --text-3:#7E848D;
  --text-inv:#0A0B0D;

  --glass:rgba(12,14,18,.62);
  --glass-edge:rgba(255,255,255,.10);
  --scrim:rgba(4,5,7,.62);

  --aur-a:.15;
  --focus:#8FC6FF;

  --shadow-1:0 1px 2px rgba(0,0,0,.30);
  --shadow-2:0 12px 32px -12px rgba(0,0,0,.55);
  --shadow-3:0 40px 90px -30px rgba(0,0,0,.75);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--s5));
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
              "Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:17px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}

img,svg{display:block; max-width:100%;}
a{color:inherit;}
button{font:inherit; color:inherit;}

::selection{background:var(--text); color:var(--bg);}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed; left:-9999px; top:0; z-index:200;
  background:var(--text); color:var(--bg);
  padding:var(--s2) var(--s3); border-radius:var(--r1); font-weight:600;
}
.skip-link:focus{left:var(--s3); top:var(--s3);}

.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s4);}
.container-narrow{max-width:760px;}

section{padding-block:var(--s8);}
.sec-tight{padding-block:var(--s7);}

/* ---------- Typografie: Tracking und Leading skalieren mit der Groesse ---------- */
h1,h2,h3,h4{margin:0 0 var(--s3); font-weight:600; font-optical-sizing:auto;}

.display em{font-style:italic; font-weight:600;}
.display{
  font-size:clamp(2.6rem,7.2vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.035em;   /* grosse Schrift braucht negatives Tracking */
  font-weight:600;
}
h1{font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.06; letter-spacing:-.028em;}
h2{font-size:clamp(1.65rem,3.6vw,2.6rem); line-height:1.1;  letter-spacing:-.024em;}
h3{font-size:1.22rem; line-height:1.24; letter-spacing:-.016em;}
h4{font-size:1rem; line-height:1.3; letter-spacing:-.01em; font-weight:600;}

p{margin:0 0 var(--s3);}
p:last-child{margin-bottom:0;}

.lead{
  font-size:clamp(1.12rem,1.9vw,1.36rem);
  line-height:1.48; letter-spacing:-.014em;
  color:var(--text-2); max-width:60ch;
}
.small{font-size:.9rem; letter-spacing:0; color:var(--text-2);}
.tiny{font-size:.79rem; letter-spacing:.005em; color:var(--text-3); line-height:1.5;}

.eyebrow{
  display:inline-block;
  font-size:.75rem; font-weight:600;
  letter-spacing:.075em;      /* kleine Schrift braucht positives Tracking */
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:var(--s3);
}

.balance{text-wrap:balance;}
.muted{color:var(--text-2);}

/* ---------- Umgebungslicht: grossflaechig, sehr schwach, nie hinter Text ---------- */
.aurora{
  position:absolute; inset:-25% -10% auto -10%; height:min(760px,88vh);
  pointer-events:none; z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
}
.aurora span{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:var(--aur-a);
}
.aurora span:nth-child(1){width:46vw; height:46vw; left:4%;  top:6%;  background:var(--aur-1);}
.aurora span:nth-child(2){width:40vw; height:40vw; left:34%; top:-6%; background:var(--aur-2);}
.aurora span:nth-child(3){width:38vw; height:38vw; right:2%; top:10%; background:var(--aur-3);}

/* ---------- Fortschrittsleiste ---------- */
.progress{
  position:fixed; left:0; top:0; height:2px; z-index:120;
  width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--aur-1),var(--aur-2),var(--aur-3));
  opacity:.9; pointer-events:none;
}

/* ---------- Navigation: schwebende, durchscheinende Ebene ---------- */
.nav{
  position:fixed; inset:var(--s2) 0 auto 0; z-index:110;
  display:flex; justify-content:center; pointer-events:none;
}
.nav-inner{
  pointer-events:auto;
  width:min(var(--maxw), calc(100% - var(--s4)*2));
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--s3);
  padding-inline:var(--s2) var(--s2);
  border-radius:999px;
  background:var(--glass);
  border:1px solid var(--glass-edge);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow-1);
  transition:box-shadow .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease);
}
.nav.is-scrolled .nav-inner{box-shadow:var(--shadow-2);}

.brand{display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none; padding:6px 8px; border-radius:999px; flex:none;}
.brand .mark{width:26px; height:26px; border-radius:7px; flex:none;}
.brand .word{
  font-size:.95rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
}

.nav-links{display:flex; align-items:center; gap:2px; margin:0 auto; padding:0; list-style:none;}
.nav-links a{
  position:relative; display:block; text-decoration:none;
  padding:8px 13px; border-radius:999px;
  font-size:.9rem; font-weight:500; letter-spacing:-.005em; color:var(--text-2);
  white-space:nowrap;
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.nav-links a:hover{color:var(--text); background:var(--elev-1);}
.nav-links a.active{color:var(--text); background:var(--elev-2);}

/* margin-left:auto haelt die Werkzeuge am rechten Rand, auch wenn die
   Linkliste (die sonst den Zwischenraum traegt) ausgeblendet ist. */
.nav-tools{display:flex; align-items:center; gap:6px; flex:none; margin-left:auto;}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  background:transparent; border:1px solid transparent; cursor:pointer;
  color:var(--text-2);
  transition:background-color .25s var(--ease), color .25s var(--ease), transform .18s var(--ease);
}
.icon-btn:hover{background:var(--elev-2); color:var(--text);}
.icon-btn:active{transform:scale(.92);}

.kbd-hint{
  display:inline-flex; align-items:center; gap:5px;
  height:34px; padding:0 11px; border-radius:999px;
  background:var(--elev-1); border:1px solid var(--hair);
  color:var(--text-3); font-size:.78rem; letter-spacing:.01em; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.kbd-hint:hover{background:var(--elev-2); color:var(--text-2); border-color:var(--hair-strong);}
.kbd-hint kbd{font:inherit; font-size:.82rem;}

/* ---------- Schaltflaechen ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:.82rem 1.4rem; border-radius:999px;
  font-size:.95rem; font-weight:550; letter-spacing:-.008em;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  will-change:transform;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}
.btn > *{position:relative; z-index:1;}
.btn-primary{background:var(--text); color:var(--bg); box-shadow:var(--shadow-1);}
.btn-primary:hover{box-shadow:var(--shadow-2);}
.btn-secondary{background:var(--elev-2); color:var(--text); border-color:var(--hair);}
.btn-secondary:hover{background:var(--elev-3); border-color:var(--hair-strong);}
.btn-quiet{background:transparent; color:var(--text-2); padding-inline:.4rem;}
.btn-quiet:hover{color:var(--text);}
.btn-sm{padding:.55rem 1rem; font-size:.875rem;}
.btn-lg{padding:1rem 1.7rem; font-size:1.02rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}

/* Aktionen auf Zeigerdruck, nicht erst beim Loslassen */
.btn:active{transform:scale(.975);}

.arrow-link{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:550; font-size:.95rem; color:var(--text);
}
.arrow-link svg{transition:transform .35s var(--ease);}
.arrow-link:hover svg{transform:translateX(4px);}

/* ---------- Segmentierte Steuerung (Thema, Geraet) ---------- */
.segmented{
  position:relative; display:inline-flex; align-items:center;
  padding:3px; border-radius:999px;
  background:var(--elev-1); border:1px solid var(--hair);
}
.segmented .thumb{
  position:absolute; top:3px; bottom:3px; left:3px;
  border-radius:999px; background:var(--elev-3);
  box-shadow:var(--shadow-1);
  will-change:transform,width;
  pointer-events:none;
}
.segmented button{
  position:relative; z-index:1;
  border:0; background:transparent; cursor:pointer;
  padding:.45rem .85rem; border-radius:999px;
  font-size:.83rem; font-weight:550; letter-spacing:-.004em; color:var(--text-3);
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.segmented button[aria-selected="true"]{color:var(--text);}
.segmented button:hover{color:var(--text-2);}

/* ---------- Karten und Flaechen ---------- */
.card{
  position:relative;
  background:var(--elev-1);
  border:1px solid var(--hair);
  border-radius:var(--r3);
  padding:var(--s4);
  transition:border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.card:hover{border-color:var(--hair-strong); background:var(--elev-2);}
.card h3{margin-bottom:var(--s2);}
.card p{color:var(--text-2); font-size:.95rem;}

.card-num{
  font-size:.78rem; font-weight:600; letter-spacing:.08em;
  color:var(--text-3); margin-bottom:var(--s3); display:block;
}

.grid{display:grid; gap:var(--s3);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6); align-items:center;}
.sec-head{max-width:640px; margin-bottom:var(--s6);}

.hair-list{list-style:none; margin:0; padding:0;}
.hair-list li{
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s3) 0; border-top:1px solid var(--hair);
}
.hair-list li:last-child{border-bottom:1px solid var(--hair);}
.hair-list .k{flex:none; width:2.2rem; color:var(--text-3); font-size:.82rem; font-weight:600; letter-spacing:.06em; padding-top:.18rem;}

.check{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2);}
.check li{display:flex; gap:10px; align-items:flex-start; font-size:.93rem; color:var(--text-2);}
.check li::before{
  content:""; flex:none; width:16px; height:16px; margin-top:.24rem; border-radius:50%;
  background:var(--elev-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
  background-color:var(--text);
}

/* ---------- Hinweiskasten ---------- */
.note{
  display:flex; gap:var(--s3); align-items:flex-start;
  border:1px solid var(--hair); border-radius:var(--r2);
  background:var(--elev-1); padding:var(--s3) var(--s4);
}
.note .dot{
  flex:none; width:18px; height:18px; margin-top:.2rem; border-radius:50%;
  background:var(--text-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center/17px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center/17px no-repeat;
}
.note h4{margin-bottom:4px;}
.note p{margin:0; font-size:.9rem; color:var(--text-2);}

/* ---------- Hero ---------- */
.hero{position:relative; padding-block:calc(var(--nav-h) + var(--s8)) var(--s7); overflow:hidden;}
.hero .container{position:relative; z-index:1;}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5);}

.hero-meta{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--hair);
}
.hero-meta span{font-size:.83rem; color:var(--text-3); letter-spacing:.005em;}

.page-head{position:relative; padding-block:calc(var(--nav-h) + var(--s7)) var(--s5); overflow:hidden;}
.page-head .container{position:relative; z-index:1;}
.crumb{display:flex; gap:8px; align-items:center; font-size:.82rem; color:var(--text-3); margin-bottom:var(--s3);}
.crumb a{text-decoration:none; color:var(--text-2);}
.crumb a:hover{color:var(--text);}

/* ---------- Vorher/Nachher-Regler ---------- */
.ba{
  position:relative; border-radius:var(--r3); overflow:hidden;
  border:1px solid var(--hair); background:var(--bg-2);
  aspect-ratio:16/9; touch-action:pan-y; user-select:none; cursor:ew-resize;
  box-shadow:var(--shadow-2);
}
.ba-layer{position:absolute; inset:0;}
.ba-after{clip-path:inset(0 0 0 var(--split,50%));}
.ba-before{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0);}
.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px;
  background:rgba(255,255,255,.85); transform:translateX(-1px); z-index:3;
  box-shadow:0 0 0 1px rgba(0,0,0,.22);
}
.ba-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:999px;
  background:rgba(255,255,255,.9); color:#0A0B0D;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .3s var(--ease);
}
.ba:active .ba-grip{transform:translate(-50%,-50%) scale(1.08);}
.ba-tag{
  position:absolute; top:var(--s3); z-index:4;
  font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  background:rgba(10,11,13,.55); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
}
.ba-tag.l{left:var(--s3);} .ba-tag.r{right:var(--s3);}

/* ==========================================================================
   Zwei vollstaendige Seiten-Schemata fuer den Vergleich und den Geraeterahmen.
   Beide tragen echten Text statt grauer Balken, damit man in jeder
   Reglerstellung wirklich Struktur erkennt.
   ========================================================================== */
.pg{position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column;}

/* ---------- VORHER: gewachsene Seite aus den Nuller-Jahren ---------- */
.pg-old{background:#fff; color:#111; font-family:"Times New Roman",Times,serif;}
.pg-old .ob-banner{
  background:linear-gradient(180deg,#3C63A8 0%,#27447C 100%);
  color:#FFE24D; text-align:center; padding:9px 8px 7px;
  font-size:23px; font-weight:700; letter-spacing:.5px;
  text-shadow:1.5px 1.5px 0 #10203D; flex:none;
}
.pg-old .ob-tag{background:#FFFFCC; border-bottom:2px solid #27447C; color:#A00;
  text-align:center; font-size:10px; padding:3px; flex:none; font-style:italic;}
.pg-old .ob-body{display:grid; grid-template-columns:124px 1fr; flex:1; min-height:0;}
.pg-old .ob-nav{background:#DCE4F2; border-right:2px solid #27447C; padding:9px 7px;}
.pg-old .ob-nav b{display:block; font-size:10px; color:#27447C; border-bottom:1px solid #9BAED2;
  padding-bottom:3px; margin-bottom:4px;}
.pg-old .ob-nav .lk{display:block; color:#0000CC; text-decoration:underline; font-size:11px; padding:2.5px 0;}
.pg-old .ob-nav a{display:block; color:#0000CC; text-decoration:underline; font-size:11px; padding:2.5px 0;}
.pg-old .ob-main{padding:9px 11px; min-width:0; overflow:hidden;}
.pg-old .ob-h{font-size:15px; color:#A00; font-weight:700; margin:0 0 5px;}
.pg-old .ob-broken{
  float:right; width:132px; height:88px; margin:2px 0 6px 9px;
  border:2px inset #A9A9A9; background:#F2F2F2;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:9px; color:#888; font-family:sans-serif; padding:6px;
}
.pg-old .ob-p{font-size:10.5px; line-height:1.38; text-align:justify; margin:0 0 6px;}
.pg-old .ob-tbl{width:100%; border-collapse:collapse; margin-top:4px; clear:both;}
.pg-old .ob-tbl td,.pg-old .ob-tbl th{border:1px solid #8FA4C8; padding:3px 5px; font-size:9.5px;}
.pg-old .ob-tbl th{background:#DCE4F2; color:#27447C; text-align:left;}
.pg-old .ob-news{border:1px dashed #A00; background:#FFF8E1; padding:5px 6px; margin-top:6px; font-size:9.5px;}
.pg-old .ob-foot{
  background:#DCE4F2; border-top:2px solid #27447C; flex:none;
  padding:5px 8px; font-size:9px; color:#333;
  display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.pg-old .ob-cnt{font-family:"Courier New",monospace; background:#111; color:#0F0; padding:1px 5px; letter-spacing:1px;}

/* ---------- NACHHER: derselbe Betrieb, neu aufgebaut ---------- */
.pg-new{background:#FAFAFB; color:#14161C; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
.pg-new .nb{
  display:flex; align-items:center; gap:14px; padding:9px 15px; flex:none;
  background:#fff; border-bottom:1px solid #E7E9EF;
}
.pg-new .nb .lg{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.05em;}
.pg-new .nb .lg i{width:17px; height:17px; border-radius:5px; background:#14161C; display:block;}
.pg-new .nb .nv{display:flex; gap:13px; margin-left:auto; font-size:10.5px; color:#5B616B; font-weight:500;}
.pg-new .nb nav{display:flex; gap:13px; margin-left:auto; font-size:10.5px; color:#5B616B; font-weight:500;}
.pg-new .nb .cta{background:#14161C; color:#fff; border-radius:99px; padding:5px 12px; font-size:10px; font-weight:600;}
.pg-new .nh{
  display:grid; grid-template-columns:1.3fr .9fr; gap:16px; align-items:center;
  padding:20px 15px 18px; flex:none;
  background:linear-gradient(160deg,#F4F6FA 0%,#FAFAFB 62%);
  border-bottom:1px solid #E7E9EF;
}
.pg-new .nh .eb{font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#5B616B; margin-bottom:7px;}
.pg-new .nh .hd{font-size:25px; line-height:1.06; letter-spacing:-.032em; font-weight:700; margin:0 0 8px;}
.pg-new .nh h1{font-size:25px; line-height:1.06; letter-spacing:-.032em; font-weight:700; margin:0 0 8px;}
.pg-new .nh p{font-size:10.5px; line-height:1.5; color:#5B616B; margin:0 0 11px;}
.pg-new .nh .btns{display:flex; gap:7px;}
.pg-new .nh .b1{background:#14161C; color:#fff; border-radius:99px; padding:6px 13px; font-size:10px; font-weight:600;}
.pg-new .nh .b2{border:1px solid #D2D6DE; border-radius:99px; padding:6px 13px; font-size:10px; font-weight:600; color:#14161C;}
.pg-new .nh .rev{background:#fff; border:1px solid #E7E9EF; border-radius:11px; padding:11px;}
.pg-new .nh .rev .sc{font-size:22px; font-weight:700; letter-spacing:-.03em; line-height:1;}
.pg-new .nh .rev .st{color:#E8A33D; font-size:11px; letter-spacing:1px; margin:3px 0 5px;}
.pg-new .nh .rev .q{font-size:9.5px; line-height:1.45; color:#5B616B;}
.pg-new .kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#E7E9EF; flex:none;}
.pg-new .kpi div{background:#FAFAFB; padding:9px 14px;}
.pg-new .kpi .n{font-size:17px; font-weight:700; letter-spacing:-.03em; line-height:1;}
.pg-new .kpi .l{font-size:8.5px; color:#5B616B; letter-spacing:.04em; text-transform:uppercase; margin-top:3px;}
.pg-new .svc{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:14px 15px; flex:1; min-height:0;}
.pg-new .svc .c{background:#fff; border:1px solid #E7E9EF; border-radius:11px; padding:10px;}
.pg-new .svc .c i{display:block; width:20px; height:20px; border-radius:6px; background:#EDEFF4; margin-bottom:7px;}
.pg-new .svc .c b{display:block; font-size:11px; font-weight:650; letter-spacing:-.01em; margin-bottom:3px;}
.pg-new .svc .c span{font-size:9.5px; line-height:1.45; color:#5B616B;}
.pg-new .nf{background:#14161C; color:#C9CDD4; padding:9px 15px; font-size:9px; flex:none;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.pg-new .nf b{color:#fff; font-weight:600;}

/* Im Handy-Rahmen stapeln beide Seiten */
.device[data-size="mobile"] .pg-old .ob-body{grid-template-columns:1fr;}
.device[data-size="mobile"] .pg-old .ob-nav{display:none;}
.device[data-size="mobile"] .pg-new .nh{grid-template-columns:1fr; gap:11px;}
.device[data-size="mobile"] .pg-new .svc{grid-template-columns:1fr;}
.device[data-size="mobile"] .pg-new .nb .nv{display:flex; gap:13px; margin-left:auto; font-size:10.5px; color:#5B616B; font-weight:500;}
.pg-new .nb nav{display:none;}
.device[data-size="mobile"] .pg-new .kpi{grid-template-columns:1fr;}

/* ---------- Geraeterahmen ---------- */
.device-wrap{display:flex; flex-direction:column; align-items:center; gap:var(--s4);}
.device{
  position:relative; margin-inline:auto;
  border-radius:var(--r3); border:1px solid var(--hair);
  background:var(--bg-2); box-shadow:var(--shadow-3);
  overflow:hidden; will-change:width;
  width:100%;
}
.device-bar{
  height:34px; display:flex; align-items:center; gap:7px; padding-inline:13px;
  border-bottom:1px solid var(--hair); background:var(--elev-1);
}
.device-bar i{width:9px; height:9px; border-radius:50%; background:var(--hair-strong); display:block;}
.device-bar .url{
  margin-left:8px; height:19px; flex:1; border-radius:999px; background:var(--elev-2);
  display:flex; align-items:center; padding-inline:10px; font-size:.68rem; color:var(--text-3);
  letter-spacing:.01em; overflow:hidden; white-space:nowrap;
}
.device-view{aspect-ratio:16/10; position:relative; overflow:hidden;}
.device[data-size="mobile"] .device-view{aspect-ratio:9/16;}
.device[data-size="tablet"] .device-view{aspect-ratio:4/5;}

/* ---------- Karussell mit Schwung ---------- */
.rail-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s4);}
.rail-nav{display:flex; gap:6px; flex:none;}
.rail{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
}
.rail-track{
  display:flex; gap:var(--s3); padding:2px 26px;
  will-change:transform; cursor:grab; touch-action:pan-y;
}
.rail-track.is-dragging{cursor:grabbing;}
.rail-item{
  flex:none; width:min(330px,74vw);
  background:var(--elev-1); border:1px solid var(--hair); border-radius:var(--r3);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2);
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.rail-item:hover{border-color:var(--hair-strong); background:var(--elev-2);}
.rail-item .badge{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--elev-3); font-size:.82rem; font-weight:600; letter-spacing:.05em; color:var(--text);
  margin-bottom:var(--s2);
}
.rail-item .meta{font-size:.78rem; color:var(--text-3); letter-spacing:.02em;}
.rail-item p{font-size:.92rem; color:var(--text-2); margin:0;}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:var(--s3);}
.tag{
  font-size:.74rem; letter-spacing:.01em; color:var(--text-2);
  border:1px solid var(--hair); border-radius:999px; padding:3px 9px;
}
.rail-dots{display:flex; gap:2px; justify-content:center; margin-top:var(--s4);}
/* Grosszuegige Trefferflaeche, sichtbarer Punkt nur im Pseudoelement:
   skaliert statt die Breite zu animieren, damit kein Layout neu berechnet wird. */
.rail-dots button{
  width:24px; height:24px; padding:0; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.rail-dots button::after{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--hair-strong);
  transition:transform .4s var(--ease), background-color .4s var(--ease);
}
.rail-dots button[aria-current="true"]::after{transform:scale(1.5); background:var(--text);}

/* ---------- Arbeiten-Karte ---------- */
.work{display:flex; flex-direction:column; padding:var(--s5) var(--s4) var(--s4);}
.work .badge{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:var(--elev-3); font-size:.82rem; font-weight:600; letter-spacing:.05em; color:var(--text);
  margin-bottom:var(--s5);
}
.work h3{margin-bottom:2px;}
.work .meta{font-size:.78rem; color:var(--text-3); letter-spacing:.02em; display:block; margin-bottom:var(--s3);}
.work p{margin:0 0 var(--s5);}
.work .tags{margin-top:auto; padding-top:0;}

/* ---------- Kennzahlen ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s4);}
.stat{border-top:1px solid var(--hair); padding-top:var(--s3);}
.stat .n{
  display:block; font-size:clamp(2.2rem,4.6vw,3.2rem); font-weight:600;
  letter-spacing:-.035em; line-height:1; margin-bottom:var(--s2);
  font-variant-numeric:tabular-nums;
}
.stat .l{font-size:.87rem; color:var(--text-2); line-height:1.42;}

/* ---------- Kontaktfeld ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s3);}
.field label{font-size:.83rem; font-weight:550; color:var(--text-2); letter-spacing:0;}
.field input,.field textarea{
  font:inherit; font-size:.95rem; color:var(--text);
  background:var(--elev-1); border:1px solid var(--hair); border-radius:var(--r1);
  padding:.7rem .85rem; width:100%;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--hair-strong); background:var(--elev-2);}
.field textarea{resize:vertical; min-height:96px;}
.field .err{font-size:.79rem; color:var(--text-3); min-height:1em;}
.field.is-invalid input,.field.is-invalid textarea{border-color:#E0674B;}
.field.is-invalid .err{color:#E0674B;}

/* ---------- Karte ---------- */
.map{border:1px solid var(--hair); border-radius:var(--r3); overflow:hidden; background:var(--elev-1);}
.map-frame{position:relative; aspect-ratio:16/9; min-height:260px;}
.map-frame iframe{width:100%; height:100%; border:0; display:block;}
.map-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2); text-align:center; padding:var(--s4);}
.map-actions{display:flex; flex-wrap:wrap; gap:var(--s2); padding:var(--s3) var(--s4);}

/* ---------- Befehlspalette ---------- */
.cmdk-backdrop{
  position:fixed; inset:0; z-index:150; display:none;
  align-items:flex-start; justify-content:center; padding:12vh var(--s3) var(--s3);
  background:var(--scrim);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.cmdk-backdrop.is-open{display:flex;}
.cmdk{
  width:min(560px,100%);
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:var(--r3);
  backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:var(--shadow-3);
  overflow:hidden; will-change:transform,opacity;
}
.cmdk-input-row{display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s4); border-bottom:1px solid var(--hair);}
.cmdk-input-row svg{color:var(--text-3); flex:none;}
.cmdk input{
  flex:1; font:inherit; font-size:1.02rem; letter-spacing:-.012em;
  background:transparent; border:0; outline:none; color:var(--text);
}
.cmdk input::placeholder{color:var(--text-3);}
.cmdk-esc{font-size:.72rem; color:var(--text-3); border:1px solid var(--hair); border-radius:6px; padding:2px 6px;}
.cmdk-list{max-height:min(48vh,380px); overflow-y:auto; padding:6px;}
.cmdk-group{font-size:.71rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); padding:var(--s2) var(--s2) 6px;}
.cmdk-item{
  display:flex; align-items:center; gap:var(--s3); width:100%;
  padding:10px var(--s2); border:0; border-radius:10px; background:transparent;
  cursor:pointer; text-align:left; text-decoration:none; color:var(--text);
}
.cmdk-item[aria-selected="true"]{background:var(--elev-2);}
.cmdk-item .ci-ico{
  flex:none; width:28px; height:28px; border-radius:8px; background:var(--elev-2);
  display:flex; align-items:center; justify-content:center; color:var(--text-2);
}
.cmdk-item .ci-txt{flex:1; min-width:0;}
.cmdk-item .ci-t{font-size:.92rem; font-weight:500; display:block;}
.cmdk-item .ci-s{font-size:.78rem; color:var(--text-3); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cmdk-empty{padding:var(--s5); text-align:center; color:var(--text-3); font-size:.9rem;}
.cmdk-foot{display:flex; gap:var(--s4); padding:10px var(--s4); border-top:1px solid var(--hair); font-size:.75rem; color:var(--text-3);}
.cmdk-foot span{display:inline-flex; gap:6px; align-items:center;}

/* ---------- Mobile Navigation ---------- */
.sheet{
  position:fixed; inset:auto 0 0 0; z-index:140;
  background:var(--glass); border-top:1px solid var(--glass-edge);
  backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-radius:var(--r4) var(--r4) 0 0; box-shadow:var(--shadow-3);
  padding:var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  transform:translateY(100%); will-change:transform; touch-action:none;
}
.sheet-grab{width:38px; height:5px; border-radius:99px; background:var(--hair-strong); margin:var(--s2) auto var(--s3);}
.sheet ul{list-style:none; margin:0 0 var(--s3); padding:0;}
.sheet ul a{display:block; padding:var(--s3) 0; text-decoration:none; font-size:1.08rem; letter-spacing:-.015em; border-bottom:1px solid var(--hair);}
.sheet .sheet-tools{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3);}
.sheet-backdrop{position:fixed; inset:0; z-index:139; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .4s var(--ease);}
.sheet-backdrop.is-open{opacity:1; pointer-events:auto;}

/* ---------- Cookie ---------- */
.cookie{
  position:fixed; left:var(--s3); right:var(--s3); bottom:var(--s3); z-index:130;
  max-width:440px; margin-left:auto;
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:var(--r3);
  backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:var(--shadow-3); padding:var(--s4);
  display:none; will-change:transform,opacity;
}
.cookie.is-visible{display:block;}
.cookie p{font-size:.9rem; color:var(--text-2); margin-bottom:var(--s3);}
.cookie a{color:var(--text);}
.cookie-actions{display:flex; flex-wrap:wrap; gap:var(--s2);}

.modal-backdrop{
  position:fixed; inset:0; z-index:145; display:none; align-items:center; justify-content:center;
  padding:var(--s3); background:var(--scrim);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.modal-backdrop.is-open{display:flex;}
.modal{
  width:min(520px,100%); max-height:86vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r3);
  padding:var(--s5); box-shadow:var(--shadow-3); will-change:transform,opacity;
}
.opt{display:flex; gap:var(--s4); align-items:flex-start; justify-content:space-between; padding:var(--s3) 0; border-top:1px solid var(--hair);}
.opt h4{margin-bottom:3px;}
.opt p{margin:0; font-size:.85rem; color:var(--text-3);}
.modal-actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4);}

.switch{position:relative; flex:none; width:48px; height:29px;}
.switch input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.switch .track{position:absolute; inset:0; border-radius:99px; background:var(--hair-strong); transition:background-color .3s var(--ease); pointer-events:none;}
.switch .track::after{content:""; position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:var(--shadow-1); transition:transform .32s var(--ease);}
.switch input:checked + .track{background:var(--text);}
.switch input:checked + .track::after{transform:translateX(19px); background:var(--bg);}
.switch input:disabled + .track{opacity:.5;}

/* ---------- Fusszeile ---------- */
.foot{border-top:1px solid var(--hair); padding-block:var(--s6) var(--s5); margin-top:var(--s7);}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr)); gap:var(--s5); padding-bottom:var(--s5);}
.foot h4{font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s3); font-weight:600;}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.foot a,.foot button{
  color:var(--text-2); text-decoration:none; font-size:.9rem;
  background:none; border:0; padding:0; cursor:pointer; text-align:left; font-family:inherit;
  transition:color .25s var(--ease);
}
.foot a:hover,.foot button:hover{color:var(--text);}
.foot-bottom{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between; padding-top:var(--s4); border-top:1px solid var(--hair);}

/* ---------- Rechtstexte ---------- */
.legal{display:grid; grid-template-columns:210px minmax(0,1fr); gap:var(--s6); align-items:start; padding-bottom:var(--s8);}
.legal-toc{position:sticky; top:calc(var(--nav-h) + var(--s4));}
.legal-toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.legal-toc a{
  display:block; padding:7px 12px; border-radius:8px; text-decoration:none;
  font-size:.86rem; color:var(--text-3);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.legal-toc a:hover{color:var(--text); background:var(--elev-1);}
.legal-body h2{font-size:1.32rem; letter-spacing:-.018em; margin-top:var(--s6);}
.legal-body h2:first-child{margin-top:0;}
.legal-body h3{font-size:1rem; margin-top:var(--s4);}
.legal-body p,.legal-body li{color:var(--text-2); font-size:.95rem;}
.legal-body ul{padding-left:1.1rem;}
.legal-body li{margin-bottom:6px;}
.legal-body a{color:var(--text);}
.legal-body dl{display:grid; grid-template-columns:auto 1fr; gap:8px var(--s4); margin:0 0 var(--s3);}
.legal-body dt{font-weight:550; color:var(--text);}
.legal-body dd{margin:0; color:var(--text-2);}

/* ---------- Einblenden ---------- */
.reveal{opacity:0; transform:translate3d(0,20px,0); will-change:opacity,transform;}
.reveal.is-in{opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal[data-d="1"].is-in{transition-delay:.07s;}
.reveal[data-d="2"].is-in{transition-delay:.14s;}
.reveal[data-d="3"].is-in{transition-delay:.21s;}
.reveal[data-d="4"].is-in{transition-delay:.28s;}

/* ---------- Hell/Dunkel: ein deutlich sichtbarer Schalter ---------- */
.theme-toggle{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  height:36px; padding:0 13px 0 9px; border-radius:999px;
  background:var(--elev-2); border:1px solid var(--hair);
  color:var(--text); font-size:.83rem; font-weight:600; letter-spacing:-.004em;
  cursor:pointer; white-space:nowrap;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.theme-toggle:hover{background:var(--elev-3); border-color:var(--hair-strong);}
.theme-toggle:active{transform:scale(.96);}
.theme-toggle .ic{position:relative; width:18px; height:18px; flex:none;}
.theme-toggle .ic svg{position:absolute; inset:0; transition:opacity .3s var(--ease), transform .4s var(--ease);}
.theme-toggle .ic .moon{opacity:1; transform:rotate(0deg) scale(1);}
.theme-toggle .ic .sun{opacity:0; transform:rotate(-90deg) scale(.6);}
:root[data-theme="dark"] .theme-toggle .ic .moon{opacity:0; transform:rotate(90deg) scale(.6);}
:root[data-theme="dark"] .theme-toggle .ic .sun{opacity:1; transform:rotate(0deg) scale(1);}
.theme-toggle .lbl-dark{display:inline;}
.theme-toggle .lbl-light{display:none;}
:root[data-theme="dark"] .theme-toggle .lbl-dark{display:none;}
:root[data-theme="dark"] .theme-toggle .lbl-light{display:inline;}

/* ---------- Laufband ---------- */
.strip{
  border-block:1px solid var(--hair);
  background:var(--elev-1);
  overflow:hidden; padding-block:var(--s3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.strip-track{display:flex; width:max-content; animation:strip 42s linear infinite;}
.strip:hover .strip-track{animation-play-state:paused;}
.strip-group{display:flex; align-items:center; flex:none;}
.strip-item{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  padding-inline:var(--s4); font-size:.88rem; font-weight:500; color:var(--text-2);
  letter-spacing:-.005em; white-space:nowrap;
}
.strip-item::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--hair-strong); flex:none;}
@keyframes strip{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}
@media (prefers-reduced-motion:reduce){
  .strip-track{animation:none; width:100%; overflow-x:auto; flex-wrap:wrap; justify-content:center;}
  .strip-group:nth-child(2){display:none;}
}

/* ---------- Fehlerbilder auf der Check-Seite ---------- */
.flaw{
  background:var(--elev-1); border:1px solid var(--hair); border-radius:var(--r3);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .4s var(--ease);
}
.flaw:hover{border-color:var(--hair-strong);}
.flaw-vis{
  position:relative; aspect-ratio:16/10; background:var(--bg-2);
  border-bottom:1px solid var(--hair); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:var(--s4);
}
.flaw-txt{padding:var(--s4);}
.flaw-txt .no{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#C2452A; margin-bottom:var(--s2);
}
:root[data-theme="dark"] .flaw-txt .no{color:#F08163;}
.flaw-txt .no::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.flaw-txt h3{margin-bottom:6px;}
.flaw-txt p{font-size:.94rem; color:var(--text-2); margin:0;}
.flaw-fix{
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--hair);
  font-size:.9rem; color:var(--text);
}
.flaw-fix b{font-weight:650;}

/* Bausteine fuer die Zeichnungen in .flaw-vis */
.v-phone{width:104px; height:186px; border-radius:15px; border:2px solid var(--hair-strong);
  background:var(--bg); padding:9px 7px; display:flex; flex-direction:column; gap:5px; position:relative; overflow:hidden;}
.v-phone .r{height:7px; border-radius:3px; background:var(--elev-3);}
.v-phone.bad .r{width:190%;}
.v-phone.bad::after{content:"";position:absolute;inset:0;box-shadow:inset -22px 0 26px -18px rgba(200,60,30,.65);}
.v-tap{width:30px; height:30px; border-radius:50%; border:2px dashed var(--hair-strong); display:grid; place-items:center; font-size:.6rem; color:var(--text-3);}
.v-row{display:flex; align-items:center; gap:11px; flex-wrap:wrap; justify-content:center;}
.v-chip{border:1px solid var(--hair); border-radius:99px; padding:5px 11px; font-size:.76rem; color:var(--text-2); background:var(--bg);}
.v-chip.warn{border-color:#C2452A55; color:#C2452A;}
:root[data-theme="dark"] .v-chip.warn{border-color:#F0816355; color:#F08163;}
.v-chip.ok{border-color:#2E7D5B55; color:#2E7D5B;}
:root[data-theme="dark"] .v-chip.ok{border-color:#5FCB9C55; color:#5FCB9C;}
.v-bars{display:flex; align-items:flex-end; gap:9px; height:100%; max-height:150px;}
.v-bar{width:44px; border-radius:6px 6px 0 0; background:var(--elev-3); position:relative;}
.v-bar span{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:.7rem; color:var(--text-3);}
.v-bar b{position:absolute; top:-19px; left:0; right:0; text-align:center; font-size:.78rem; font-weight:650;}
.v-bar.hi{background:var(--text);}
.v-note{font-size:.78rem; color:var(--text-3); text-align:center; max-width:30ch;}

/* ---------- Umbrueche ---------- */
@media (max-width:1000px){
  .split{grid-template-columns:1fr; gap:var(--s5);}
  .legal{grid-template-columns:1fr; gap:var(--s4);}
  .legal-toc{position:static;}
}
/* Die Kopfleiste duennt gestaffelt aus, damit nie etwas herausragt:
   zuerst der Suchhinweis, dann die Handlungsaufforderung, zuletzt die Links. */
@media (max-width:1120px){
  .kbd-hint{display:none;}
}
@media (max-width:1000px){
  .nav-cta{display:none;}
}
@media (max-width:860px){
  .nav-links{display:none;}
  /* Thema-Regler und Handlungsaufforderung wandern ins Blatt-Menue. Bleiben sie
     hier stehen, schiebt sich der Menueknopf aus dem Bildschirm. */
  .nav [data-theme-seg]{display:none;}
  .nav-cta{display:none;}
  section{padding-block:var(--s7);}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .container{padding-inline:var(--s3);}
  .nav-inner{width:calc(100% - var(--s3)*2);}
  .foot-grid{grid-template-columns:1fr;}
  .cookie{max-width:none;}
}
@media (min-width:861px){
  .menu-btn{display:none;}
}

/* ---------- Systemeinstellungen respektieren ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.14s !important;
  }
  .reveal{opacity:1; transform:none;}
  .btn:active,.icon-btn:active{transform:none;}
}
@media (prefers-reduced-transparency:reduce){
  .nav-inner,.cmdk,.cookie,.sheet{
    background:var(--bg-2); backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .aurora{display:none;}
}
@media (prefers-contrast:more){
  :root{--hair:rgba(10,12,16,.32); --hair-strong:rgba(10,12,16,.5); --text-2:#33383F; --text-3:#4C525A;}
  :root[data-theme="dark"]{--hair:rgba(255,255,255,.30); --hair-strong:rgba(255,255,255,.48); --text-2:#C9CDD3; --text-3:#A7ACB4;}
  .nav-inner,.cmdk,.cookie,.sheet{background:var(--bg-2); backdrop-filter:none;}
}