:root {
  --bg-light: var(--c-bg); --bg-dark: var(--c-bg-dark);
  --ink: var(--c-ink); --muted: var(--c-muted); --line: var(--c-line);
  --card: var(--c-card); --ph: var(--c-ph); --ph2: color-mix(in srgb, var(--c-ph) 85%, var(--c-ink));
  --accent: var(--c-accent); --accent-ink: var(--c-accent-ink);
  --gut: 4vw; --max: 1480px;
}
[data-theme="dark"] { --ink: var(--c-ink-dark); --muted: var(--c-muted-dark); --line: var(--c-line-dark); --card: var(--c-card-dark); --ph: var(--c-ph-dark);
  --ph2: color-mix(in srgb, var(--c-ph-dark) 80%, var(--c-ink-dark)); --accent: var(--c-accent-dark); --accent-ink: var(--c-accent-ink-dark); color: var(--ink); }

* { box-sizing: border-box; }
html { background: var(--bg-light); overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }

body { margin: 0; background: var(--bg-light); color: var(--ink); padding-bottom: 38px; overflow-x: clip;
  font: var(--size-body)/1.55 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-head); font-weight: var(--w-head); font-stretch: var(--stretch-head); text-transform: var(--tt-head); margin: 0; }
h1 { font-size: clamp(56px, 6.6vw, 118px); line-height: var(--lh-head); letter-spacing: var(--ls-head); margin-bottom: 32px; }
h2 { font-size: clamp(40px, 4.4vw, 76px); line-height: calc(var(--lh-head) + .02); letter-spacing: calc(var(--ls-head) + .005em); margin-bottom: 28px; max-width: 18ch; }
.big, .num, h3 { font-size: var(--t-3); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 10px; }
p { margin: 0 0 14px; max-width: 62ch; }
ul, ol { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 6px; }
blockquote { margin: 12px 0; font-size: var(--t-lead); line-height: 1.4; letter-spacing: -.01em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
section { position: relative; padding: 18vh 0; }
section + section { border-top: 0; }


.eyebrow, p.small > b:only-child { font-size: var(--t-small); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 40ch; }
.big { font-size: clamp(26px, 2.4vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; max-width: 26ch; }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }
.narrow { max-width: 860px; }
.center { text-align: center; }
.center .narrow, .narrow.center { margin-left: auto; margin-right: auto; }
.center p { margin-left: auto; margin-right: auto; }
.row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 7vw; align-items: center; }


.img { position: relative; background: var(--ph); border-radius: 12px; min-height: 180px; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--muted); font: 12px/1.4 ui-monospace, Menlo, monospace; padding: 14px; overflow: hidden; }
.img.dark { background: var(--ph2); }

.img.photo { background: var(--ph) var(--src) center / cover no-repeat; color: transparent; filter: var(--img-filter); }
.img.photo::after { content: ""; position: absolute; inset: 0; background: var(--img-tint); pointer-events: none; }
.img.photo.top { background-position: center top; }

.img.phone.photo { background-position: center top; box-shadow: 0 0 0 7px #111, 0 30px 60px -20px rgba(0,0,0,.4); }
.img.screen { border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 30px 70px -30px rgba(0,0,0,.35); }
.phone { width: 210px; flex: 0 0 210px; min-height: 0 !important; aspect-ratio: 9 / 19; border-radius: 30px; }


.box { background: var(--card); border-radius: var(--r-card); padding: 34px; }
.box > h3:first-child { margin-top: 0; }
a.box { text-decoration: none; display: block; transition: transform .5s var(--ease); }
a.box:hover { transform: translateY(-6px); }
.num { font-size: clamp(40px, 3.6vw, 64px); font-weight: var(--w-head); letter-spacing: -.04em; line-height: 1; margin-bottom: 14px; color: var(--c-num); }
.img { border-radius: var(--r-img); }
.logo-row img { height: 44px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; }
[data-theme="dark"] .logo-row img { filter: grayscale(1) invert(1); mix-blend-mode: screen; }


.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; border: 1px solid currentColor; border-radius: var(--r-btn); padding: var(--s-2) var(--s-4);
  font: inherit; font-size: var(--t-body); font-weight: var(--w-strong); text-decoration: none; background: transparent; color: var(--ink); cursor: pointer; }
.btn { transition: background-color .2s, color .2s, border-color .2s, opacity .2s; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg-light); }
[data-theme="dark"] .btn:hover { color: var(--bg-dark); }
.btn.fill { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.fill:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); opacity: .8; }


html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }


:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
b, strong { font-weight: var(--w-strong); }


.todo { display: inline-block; border: 1px dashed currentColor; border-radius: 6px; padding: 0 6px; font: 12px ui-monospace, Menlo, monospace; }




.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 8000; height: 88px; display: flex; align-items: center; gap: var(--s-5); padding: 0 max(var(--gut), calc((100vw - var(--w-stage)) / 2));
  color: var(--c-ink); transition: transform .6s var(--ease), color .4s, background-color .4s; }
.site-head.on-dark { color: var(--c-ink-dark); }
.site-head.scrolled { background: color-mix(in srgb, var(--c-bg) 72%, transparent); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
.site-head.scrolled.on-dark { background: color-mix(in srgb, var(--c-bg-dark) 70%, transparent); }
.site-head.hide { transform: translateY(-100%); }
.logo { text-decoration: none; display: flex; align-items: center; position: relative; height: 30px; }
.logo img { height: 30px; width: auto; display: block; transition: opacity .4s; }
.logo .lw { position: absolute; left: 0; top: 0; opacity: 0; }
.on-dark .logo .lw { opacity: 1; }
.on-dark .logo .lb { opacity: 0; }
.site-head nav { display: flex; gap: var(--s-4); flex: 1; font-size: var(--t-small); }
.site-head nav a { text-decoration: none; opacity: .7; }
.site-head nav a.on, .site-head nav a:hover { opacity: 1; }
.site-head .btn { color: inherit; padding: var(--s-1) var(--s-3); font-size: var(--t-small); }
.site-head { --kopf-text: var(--c-ink); --kopf-grund: var(--c-bg); }
.site-head.on-dark { --kopf-text: var(--c-ink-dark); --kopf-grund: var(--c-bg-dark); }
.site-head .btn:hover { background: var(--kopf-text); border-color: var(--kopf-text); color: var(--kopf-grund); }
.site-head .btn::before { background: currentColor; }
.site-head .btn:hover { color: var(--c-bg); }
.site-head.on-dark .btn:hover { color: var(--c-bg-dark); }
.menu-btn { display: none; }
main { display: block; }
main > section:first-child { padding-top: 22vh; }


.chapters { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 7000; display: flex; flex-direction: column; gap: 6px;
  color: #fff; mix-blend-mode: difference; font: 11px/1 ui-monospace, Menlo, monospace; }
.chapters a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-decoration: none; opacity: .45; height: 16px; }
.chapters a span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .6s var(--ease); }
.chapters a.on { opacity: 1; }
.chapters:hover a span { max-width: 220px; }
.chapters svg { width: 32px; height: 10px; overflow: visible; }
.chapters path { fill: none; stroke: currentColor; stroke-width: 1.4; }


.curtain { position: fixed; inset: 0; z-index: 9500; background: var(--c-bg-dark); pointer-events: none; }
.static .curtain { display: none; }


.site-foot { position: relative; padding: var(--s-6) 0 var(--s-4); background: var(--bg-dark); color: var(--muted); overflow: hidden; }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s-4); font-size: var(--t-small); line-height: 1.4; }
.site-foot .foot-logo img { display: block; height: 28px; width: auto; }
.site-foot h4 { margin: 0 0 var(--s-2); font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.site-foot .cols a { display: block; margin-bottom: var(--s-1); text-decoration: none; transition: color .2s; }
.site-foot .cols a:hover { color: var(--ink); }
.site-foot .base { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--t-micro); }


.logos { display: flex; gap: 14px; }
.logos .img { min-height: 64px; flex: 1; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: marquee 38s linear infinite; }
.marquee .track > * { flex: 0 0 200px; }
@keyframes marquee { to { transform: translateX(-50%); } }

table { width: 100%; border-collapse: collapse; }
table th, table td { text-align: left; padding: 14px 10px !important; border-top: 1px solid var(--line) !important; }


form .field { margin-bottom: 16px; }
form label { display: block; font-weight: 600; font-size: var(--t-small); margin-bottom: 6px; }
form input, form textarea, form select { width: 100%; border: 0; border-bottom: 1px solid var(--ink); padding: 12px 2px; font: inherit; background: transparent; color: inherit; border-radius: 0; }
form textarea { min-height: 110px; }
.steps { display: flex; gap: 8px; margin-bottom: 22px; font-size: var(--t-micro); }
.steps span { border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; }
.steps span.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.step { display: none; }
.step.on { display: block; }


.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
.wall.cols { display: flex; gap: 18px; }

.wall .tile .img { min-height: 260px; }

.wall .tile p { margin: 8px 0 0; font-size: var(--t-small); }


.ba { position: relative; border-radius: 14px; overflow: hidden; --p: 50%; cursor: ew-resize; user-select: none; touch-action: pan-y; }
.ba .img { border-radius: 0; min-height: 380px; }
.ba .img + .img { position: absolute; inset: 0; background: var(--ph2); clip-path: inset(0 0 0 var(--p)); }
.ba .ba-h { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.35); z-index: 3; }
.ba .ba-h::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.3); }


.strip { display: flex; gap: 14px; margin-top: 16px; width: max-content; cursor: grab; }
.strip > * { flex: 0 0 300px; }
.strip .img { min-height: 190px; }

.drag-area { overflow: hidden; margin-right: calc(-1 * var(--gut)); }
.drag-area .track { display: flex; gap: 20px; width: max-content; cursor: grab; padding-right: var(--gut); }
.drag-area .track > * { flex: 0 0 420px; }
.cursor-label { position: fixed; top: 0; left: 0; z-index: 8500; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--bg-dark); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 600; pointer-events: none; transform: scale(0); }




[data-m="layers"] { height: 380vh; padding: 0 !important; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ly { position: absolute; inset: 0; will-change: transform, opacity; }

.ly-sky { inset: -6%; background: #3a3d3c url("img/hero/p1-platte-himmel.jpg") 50% 50% / cover no-repeat; filter: var(--img-filter); transition: background-image .4s; }
.ly-shade { background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); }

.ly-mask { inset: 0; -webkit-mask: var(--shape) center / var(--ms, 3000%) no-repeat; mask: var(--shape) center / var(--ms, 3000%) no-repeat; }
.hero-copy { position: absolute; left: var(--gut); bottom: 12vh; z-index: 10; max-width: 1020px; color: var(--c-ink-dark); --ink: var(--c-ink-dark); --accent: var(--c-ink-dark); --accent-ink: var(--c-bg-dark); }
.hero-copy .small { opacity: .85; }
.hero-after { position: absolute; left: 0; right: 0; top: 34vh; z-index: 12; text-align: center; color: var(--c-ink); padding: 0 var(--gut); }
.hero-after h2 { margin: 0 auto; max-width: 20ch; }
.scroll-hint { position: absolute; right: var(--gut); bottom: 12vh; z-index: 10; font-size: var(--t-small); color: var(--c-ink-dark); opacity: .8; }






[data-m="hscroll"] { height: 100vh; padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.h-track { display: flex; gap: 28px; padding: 0 var(--gut); width: max-content; will-change: transform; }
.h-track > * { flex: 0 0 34vw; }
.h-track .img { min-height: 52vh; }



.progress { height: 2px; background: var(--line); margin: 10px 0 30px; position: relative; }
.progress i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.static .progress i { transform: none; }


.years { display: grid; grid-template-columns: 1fr 1.05fr; gap: 6vw; }


.season-demo { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }

.mini { background: var(--card); border-radius: 18px; overflow: hidden; }

.mini .hero { padding: 24px; border-bottom: 1px solid var(--line); }
.mini .hero .img { min-height: 130px; margin-bottom: 14px; }


.static [data-m="layers"]{ height: auto; }
.static .stage { position: relative; height: 100vh; }
 .static .hero-after{ display: none; }
.static section[data-theme="dark"] { background: var(--bg-dark); }


@media (max-width: 900px) {
  :root { --gut: 20px; }
  section { padding: 12vh 0; }
  main > section:first-child { padding-top: 16vh; }
  h1 { font-size: clamp(38px, 10.5vw, 56px); margin-bottom: 22px; }
  h2 { font-size: clamp(30px, 8.4vw, 44px); margin-bottom: 20px; }
  .big { font-size: clamp(22px, 6vw, 30px); }
  [data-m="words"][style] { font-size: clamp(30px, 8.4vw, 44px) !important; }
  .grid2, .grid3, .split, .season-demo, .years { grid-template-columns: 1fr; gap: 28px; }
  
  .box { padding: 24px; }
  .img[style*="min-height"] { min-height: 56vw !important; }
  .img.phone[style] { min-height: 0 !important; }
  .row { gap: 12px; }

  .site-head { height: 64px; gap: 0; justify-content: space-between; }
  .logo, .logo img { height: 24px; }
  .site-head nav, .site-head > .btn { display: none; }
  .menu-btn { display: block; background: none; border: 0; color: inherit; font: inherit; font-size: var(--t-small); font-weight: 600; padding: 10px 0; cursor: pointer; }
  .menu-open .site-head { background: var(--c-bg); color: var(--c-ink); height: 100svh; align-items: flex-start; padding-top: 20px; flex-wrap: wrap; align-content: flex-start; }
  .menu-open .site-head .logo .lw { opacity: 0; } .menu-open .site-head .logo .lb { opacity: 1; }
  .menu-open .site-head nav { display: flex; flex-direction: column; gap: 6px; width: 100%; order: 3; margin-top: 8vh; font-size: var(--t-2); font-family: var(--f-head); font-weight: var(--w-head); letter-spacing: var(--ls-head); }
  .menu-open .site-head > .btn { display: inline-flex; order: 4; margin-top: 5vh; }
  .chapters, .cursor-label { display: none; }

  .hero-copy { bottom: 10vh; right: var(--gut); }
  .scroll-hint { display: none; }
  .hero-after { top: 26vh; }

  
  
  
  
  
  
  
  
  

  [data-m="hscroll"] .h-track > * { flex-basis: 78vw; }
  [data-m="hscroll"] .h-track .img { min-height: 46vh; }
  .drag-area .track > * { flex-basis: 78vw; }
  .marquee .track > * { flex-basis: 120px; }
  
  .wall .tile .img { min-height: 160px; }
  
  
  
  
  
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
  .site-foot .base { flex-direction: column; gap: 6px; }
  .ba .img { min-height: 56vw; }
  
}


.marquee.logo-row .track { gap: 64px; align-items: center; padding: 10px 0; }
.marquee.logo-row .track > img { flex: 0 0 auto; }
figure { margin: 0; }

@media (max-width: 900px) {  .marquee.logo-row .track { gap: 36px; } .logo-row img { height: 32px; } }

.img.scrolly { background-size: 100% auto; background-position: center top; transition: background-position 7s cubic-bezier(.45,0,.2,1); }
.img.scrolly:hover { background-position: center bottom; transition-duration: 9s; }
.wall .tile .img { box-shadow: 0 0 0 1px var(--line); }



.img.ad-phone { padding: 0; display: block; background: #fff; color: #111; box-shadow: 0 0 0 7px #111, 0 30px 60px -20px rgba(0,0,0,.4); text-align: left; font: 12px/1.4 var(--f-body); }
.ad { height: 100%; display: flex; flex-direction: column; padding-top: 34px; }
.ad-head { display: flex; gap: 8px; align-items: center; padding: 0 12px 10px; }
.ad-head i { width: 30px; height: 30px; border-radius: 50%; background: #ddd center top / cover; flex: none; }
.ad-head b { display: block; font-size: 12px; }
.ad-head span { font-size: 10px; color: #777; }
.ad > p { margin: 0 12px 10px; font-size: 12px; }
.ad-img { flex: 1; background: #ccc center / cover; filter: var(--img-filter); }
.ad-cta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: #f2f2f2; font-weight: 600; font-size: 11.5px; }
.ad-cta em { font-style: normal; background: #e4e4e4; border-radius: 6px; padding: 6px 9px; white-space: nowrap; }
.ad small { display: block; padding: 6px 12px 14px; font-size: 9.5px; color: #888; }
.ad.story { position: relative; background: #333 center / cover; color: #fff; padding: 40px 14px 18px; justify-content: flex-end; }
.ad.story::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 30%, transparent 50%, rgba(0,0,0,.7)); }
.ad.story > * { position: relative; }
.ad.story .ad-head { position: absolute; top: 34px; left: 0; padding: 0 12px; }
.ad.story .ad-head span { color: rgba(255,255,255,.75); margin-left: 4px; }
.ad.story p { font: var(--w-head) 24px/1.05 var(--f-head); letter-spacing: -.02em; margin: 0 0 14px; }
.ad.story em { font-style: normal; align-self: center; background: #fff; color: #111; border-radius: 99px; padding: 8px 14px; font-weight: 600; }
.ad.story small { color: rgba(255,255,255,.7); text-align: center; padding: 10px 0 0; }




.ba .img.photo, .ba .img.photo + .img.photo { background: var(--ph) var(--src) center top / cover no-repeat; min-height: 0 !important; aspect-ratio: 16 / 10; }
.ba .img:not(.photo) + .img.photo, .ba .img.photo + .img:not(.photo) { min-height: 0 !important; }
.ba:has(.img.photo) .img:not(.photo) { aspect-ratio: 16 / 10; min-height: 0 !important; }
.ba .ba-tag { position: absolute; top: 14px; z-index: 4; font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.6); color: #fff; padding: 5px 10px; border-radius: 99px; }


@media (max-width: 900px) {
  
  
  .menu-open .site-head { transform: none !important; }
}
@media (max-width: 900px) {
  
  .menu-open .site-head, .menu-open .site-head.scrolled { background: var(--c-bg) !important; color: var(--c-ink) !important; backdrop-filter: none; }
}




.stage .ly-mask { z-index: 2; }
.fly { position: absolute; top: 100%; width: var(--w); z-index: 1; will-change: transform; pointer-events: none; }
.fly.back { opacity: .5; }
.fly.front { z-index: 6; }
.fly .img { min-height: 0; aspect-ratio: 16 / 10; border-radius: 10px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); }
.fly.hand .img { aspect-ratio: 9 / 19; border-radius: 16px; box-shadow: 0 0 0 4px #111, 0 30px 70px -20px rgba(0,0,0,.7); }
.hero-after { top: 0; bottom: 0; display: grid; place-items: center; color: #fff; pointer-events: none; opacity: 0; }
.hero-after h2 { text-shadow: 0 2px 40px rgba(0,0,0,.55); }
.static .hero-after { display: none; }
@media (max-width: 900px) {
  .fly { width: calc(var(--w) * 2.2); }
  .hero-after { top: 0; }
}


.cursor-label { transition: none; }




.ba .img { min-height: 0 !important; aspect-ratio: 16 / 10; }


.ly-shade::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); }



#weiche { padding-top: 4vh; }



#weiche { padding-top: 0; position: relative; z-index: 3; }
.static #weiche { margin-top: 0 !important; }















@media (min-width: 901px) {
  
  
  
  
  
  
  
  
  
}

@keyframes madeby-float { 50% { transform: translateY(-6px); } }





@keyframes cs-bob { 50% { transform: translateY(8px); } }


:root { --max: calc(var(--w-stage) + 2 * var(--gut)); }
body { font: var(--t-body)/var(--lh-body) var(--f-body); }
section { padding: var(--s-section) 0; }
h1, h2, h3 { font-weight: var(--w-head); text-wrap: balance; }
h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-head); margin-bottom: var(--s-4); }
h2 { font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: var(--ls-head); margin-bottom: var(--s-4); max-width: 20ch; }
h3 { font-size: var(--t-3); line-height: var(--lh-3); letter-spacing: -.005em; margin-bottom: var(--s-2); }
p { margin: 0 0 var(--s-2); max-width: var(--w-text); text-wrap: pretty; }
.eyebrow { font-size: var(--t-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: 0; text-transform: none; font-weight: var(--w-strong); margin: 0 0 var(--s-3); }
.lead { font-size: var(--t-lead); line-height: var(--lh-lead); max-width: var(--w-text); }
.big { font-size: var(--t-3); line-height: var(--lh-3); letter-spacing: var(--ls-head); font-weight: var(--w-head); max-width: 26ch; }
.small { font-size: var(--t-small); line-height: var(--lh-small); }
blockquote { font-size: var(--t-lead); line-height: var(--lh-lead); margin: var(--s-2) 0; }
.num { font-size: var(--t-2); line-height: 1; margin-bottom: var(--s-2); }
p + .btn, p + a.btn { margin-top: var(--s-4); }
.box { padding: var(--s-5); }
.grid3 { gap: var(--s-4); }
.split { gap: var(--s-7); }
.wrap > h2 + .grid3, .wrap > h2 + .drag-area { margin-top: var(--s-6); }


.site-foot .cols { font-size: var(--t-small); }
.site-foot h4 { font-size: var(--t-micro); }
@media (max-width: 900px) {
  section { padding: var(--s-section) 0; }
  h1 { font-size: var(--t-hero); } h2 { font-size: var(--t-1); } .lead { font-size: var(--t-lead); } .big { font-size: var(--t-3); }
  .grid2, .grid3, .split { gap: var(--s-5); }
}
.site-foot h4 { font-size: var(--t-small); letter-spacing: 0; text-transform: none; font-weight: var(--w-strong); }





 






.img.dummy::before { content: "Platzhalter · Shooting unbearbeitet"; position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; border-radius: 99px;
  background: rgba(0,0,0,.6); color: #fff; font: 600 var(--t-micro)/1 var(--f-body); letter-spacing: 0; pointer-events: none; backdrop-filter: blur(6px); }
.img.dummy.mini::before { content: "Dummy"; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 3px 6px; font-size: 9px; }






.ly-sky-tim { inset: -6%; background: url("img/hero/p1-tim-himmel.webp") 50% 50% / cover no-repeat; pointer-events: none; }




.hero-trust { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-5); }
.hero-trust .tr { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-radius: 12px; background: rgba(255,255,255,.92);
  color: #1d1d1f; text-decoration: none; box-shadow: 0 8px 24px -12px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.hero-trust .tr > img { height: 34px; width: auto; display: block; }
.hero-trust .tr-google > img { height: 26px; }
.hero-trust .tr-google span { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.hero-trust .tr-google b { font-size: var(--t-small); font-weight: var(--w-strong); }
.hero-trust .tr-google i { display: flex; gap: 1px; } .hero-trust .tr-google i img { width: 13px; height: 13px; }

@media (max-width: 734px) { .hero-trust .tr { height: 44px; padding: 0 12px; } .hero-trust .tr > img { height: 26px; } }

.hero-trust { gap: var(--s-5); align-items: center; margin-top: var(--s-5); }
.hero-trust .tr { height: auto; padding: 0; background: none; box-shadow: none; backdrop-filter: none; border-radius: 0; color: #fff; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.hero-trust .tr-google > img { height: 44px; }
.hero-trust .tr-google span { gap: 6px; }
.hero-trust .tr-google b { font-size: var(--t-lead); color: #fff; }
.hero-trust .tr-google i img { width: 18px; height: 18px; }

@media (max-width: 734px) { .hero-trust { gap: var(--s-4); }  .hero-trust .tr-google > img { height: 34px; }  }

.hero-trust { display: grid; grid-template-columns: repeat(6, auto); justify-content: start; gap: 0; margin-top: var(--s-5); }
.hero-trust .tr { height: 64px; padding: 0 var(--s-4); border-left: 1px solid rgba(255,255,255,.35); justify-content: center; }
.hero-trust .tr:first-child { padding-left: 0; border-left: 0; }

.hero-trust .tr-saar > img { height: 46px; }
@media (max-width: 1068px) { .hero-trust { grid-template-columns: repeat(3, auto); row-gap: var(--s-3); } .hero-trust .tr:nth-child(4) { padding-left: 0; border-left: 0; } }

.hero-trust { grid-template-columns: repeat(6, 112px); gap: 10px; }
.hero-trust .tr, .hero-trust .tr:first-child { width: 112px; height: 112px; padding: 12px 8px; border: 0; border-radius: 20px; background: rgba(255,255,255,.94); color: #1d1d1f;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; filter: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 30px -14px rgba(0,0,0,.45); backdrop-filter: blur(10px); }

.hero-trust .tr-google > img { height: 26px; }
.hero-trust .tr-google span { align-items: center; gap: 4px; }
.hero-trust .tr-google b { font-size: 26px; font-weight: 700; color: #1d1d1f; line-height: 1; }
.hero-trust .tr-google i img { width: 13px; height: 13px; }
.hero-trust .tr-saar > img { height: auto; width: 76px; }
@media (max-width: 1068px) { .hero-trust { grid-template-columns: repeat(3, 104px); } .hero-trust .tr, .hero-trust .tr:first-child { width: 104px; height: 104px; } }

.hero-trust { grid-template-columns: repeat(6, auto); gap: 14px; align-items: center; }
.hero-trust .tr-svg, .hero-trust .tr-svg:first-child { width: auto; height: 116px; padding: 0; background: none; box-shadow: none; backdrop-filter: none; border-radius: 0; }
.hero-trust .tr-svg .seal { height: 116px; width: auto; display: block; filter: drop-shadow(0 12px 18px rgba(0,0,0,.35)); overflow: visible; }
.hero-trust .tr-google { width: 104px; height: 104px; border-radius: 24px; }
.hero-trust .tr-saar { width: 108px; height: 108px; border-radius: 16px; }
@media (max-width: 1068px) { .hero-trust { grid-template-columns: repeat(3, auto); } .hero-trust .tr-svg, .hero-trust .tr-svg .seal { height: 100px; } }

.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-trust .tr-google, .hero-trust .tr-google:first-child { width: auto; height: 80px; padding: 0 20px; flex-direction: row; gap: 14px; border-radius: 12px; background: #fff; }
.hero-trust .tr-google > img { height: 40px; }
.hero-trust .tr-google span { align-items: flex-start; gap: 4px; }
.hero-trust .tr-google b { font-size: 17px; font-weight: 700; color: #1d1d1f; line-height: 1.1; }
.hero-trust .tr-google em { font-style: normal; display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; color: #1d1d1f; }
.hero-trust .tr-google i img { width: 18px; height: 18px; }

.hero-trust .tr-svg .seal { transition: transform .4s var(--ease); }
.hero-trust .tr-svg:hover .seal { transform: rotate(-4deg) scale(1.04); }

.hero-trust .tr-saar-claim { width: auto; height: 96px; padding: 0 20px; border-radius: 16px; }
.hero-trust .tr-saar-claim > img { width: auto; height: 58px; }
.hero-trust .tr-svg .seal-frei { height: 92px; }

.hero-trust .tr-google, .hero-trust .tr-google:first-child { height: 96px; }
.hero-trust .tr-saar-claim:first-child { padding: 0 20px; }
.hero-trust .tr-saar-claim:first-child { width: auto; height: 96px; border-radius: 16px; }
.hero-trust .tr-google:first-child { width: auto; height: 96px; padding: 0 20px; border-radius: 12px; }





.tile { display: flex; flex-direction: column; align-items: flex-start; padding: 48px 38px 32px; border-radius: 18px; background: #fff; color: #1d1d1f; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 48px -32px rgba(0,0,0,.25); }
  

@media (max-width: 900px) { .tile { padding: 36px 26px 26px; } }

  
  


.tile { display: grid; grid-row: span 5; grid-template-rows: subgrid; justify-items: start; align-content: start; }

@media (max-width: 900px) {  .tile { grid-row: auto; grid-template-rows: none; } }


[data-m="stimmen"] { padding: 0 !important; overflow: hidden; background: var(--c-bg); color: var(--c-ink); }
.st-var { position: relative; min-height: 100vh; }
.st-q { margin: 0; }
.st-q blockquote { margin: 0; font: var(--w-strong) var(--t-1)/var(--lh-1) var(--f-head); letter-spacing: var(--ls-tight); text-wrap: balance; }
.st-q figcaption { margin-top: var(--s-3); font-size: var(--t-body); color: var(--c-muted); }
.st-goo { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-4); font-size: var(--t-body); font-weight: var(--w-strong); color: inherit; text-decoration: none; }
.st-goo img { width: 20px; height: 20px; }
.st-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: 46px; padding: 6px 12px; border-radius: 12px; background: #fff; color: #1d1d1f; box-shadow: 0 8px 22px -10px rgba(0,0,0,.28); font-size: var(--t-micro); white-space: nowrap; }
.st-logo img { max-height: 32px; max-width: 92px; width: auto; height: auto; display: block; mix-blend-mode: multiply; }





.st-saetze { position: relative; width: min(100%, var(--w-wide)); height: 44vh; }
.st-saetze .st-q { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.st-saetze blockquote { font-size: var(--t-hero); line-height: var(--lh-hero); }

 



.st-raum { position: absolute; inset: 0; }
.st-w { position: absolute; left: 50%; top: 50%; opacity: 0; }

.static .st-w { position: static; opacity: 1; }

@media (max-width: 900px) {
  
  .st-logo { min-width: 0; height: 30px; padding: 3px 6px; font-size: var(--t-micro); }
  .st-logo img { max-height: 20px; max-width: 50px; }
}




 


.st-w { min-width: 110px; height: 64px; }
.st-w img { max-height: 46px; max-width: 120px; }
.st-w b { font-size: var(--t-small); }


.st-mix { height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gut); }
.st-mix .st-raum { position: absolute; inset: 0; }
.st-mix .st-w { position: absolute; left: 50%; top: 50%; opacity: 0; will-change: transform, opacity; }


.st-mix .st-saetze { position: relative; z-index: 2; width: min(100%, var(--w-content)); height: auto; display: grid; }
.st-mix .st-saetze .st-q { position: relative; inset: auto; grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; }
.st-mix .st-goo { position: relative; z-index: 2; order: -1; margin: 0 0 var(--s-3); }
.st-bub { display: flex; flex-direction: column; gap: 6px; width: 250px; padding: 14px 18px; border-radius: 20px; background: #fff; color: #1d1d1f; text-align: left; box-shadow: 0 16px 36px -18px rgba(0,0,0,.35); font-size: var(--t-small); line-height: 1.3; }
.st-bub::after { content: ""; position: absolute; left: 26px; bottom: -8px; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.st-bub em { display: flex; gap: 1px; } .st-bub em img { width: 13px; height: 13px; }
.st-bub q { quotes: "„" "“"; font-weight: var(--w-strong); }
.st-bub small { color: #6e6e73; font-size: var(--t-micro); }
@media (max-width: 900px) {
  .st-mix .st-bub.st-w { width: 200px; padding: 10px 14px; font-size: 13px; }
  .st-mix .st-saetze .st-q:not(:first-child){ display: none; }
}
.static .st-mix .st-raum { display: none; }
.static .st-saetze .st-q:not(:first-child) { display: none; }
.st-mix .st-bub.st-w { height: auto; min-width: 0; width: 260px; }

.st-mix .st-logo.st-w { background: none; box-shadow: none; padding: 0; height: auto; min-width: 0; }

.st-mix .st-logo.st-w img { max-width: none; max-height: none; object-fit: contain; mix-blend-mode: normal; }
.st-mix .st-logo.st-w b { font-size: var(--t-body); font-weight: var(--w-strong); color: var(--c-ink); }
.st-mix { background: var(--c-bg); }


.lj { --bogen: 16vw; background: var(--bg-dark); padding: var(--s-section) var(--gut) calc(var(--bogen) + var(--s-7)); color: var(--c-ink-dark); overflow: clip; }
.lj-h { margin: 0 auto var(--s-6); max-width: var(--w-wide); text-align: center; font-size: var(--t-hero); line-height: var(--lh-hero); }
.lj-eins { display: block; }
.lj-t { position: relative; isolation: isolate; transform: translateZ(0); height: min(84vh, 720px); min-height: 560px; max-width: var(--w-stage); margin: 0 auto var(--s-2); overflow: hidden; border-radius: var(--r-box); background: var(--c-card-dark); }

.lj-t > .sc { position: absolute; inset: -2px; width: auto; height: auto; }
.lj-tx { position: absolute; z-index: 4; left: var(--s-6); bottom: var(--s-6); width: 44%; pointer-events: none; }
.lj-tx p { margin: 0; max-width: none; }
.lj-name { margin: 0 0 var(--s-2); font-size: var(--t-1); line-height: var(--lh-1); }
.lj-sub { display: block; font-family: var(--f-head); font-weight: 600; letter-spacing: var(--ls-head); font-size: var(--t-2); line-height: var(--lh-2); }
.lj-wer { display: block; margin-top: var(--s-2); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--c-muted-dark); }
.lj-erg { min-height: 2.4em; }
.lj-an { pointer-events: auto; margin-top: var(--s-4); transition: color .3s, border-color .3s; }
.lj-neben { position: relative; z-index: 1; margin: var(--s-6) auto 0; max-width: var(--w-content); text-align: center; color: var(--c-muted-dark); font-size: var(--t-lead); }
.lj-neben a { color: var(--c-ink-dark); text-decoration: none; white-space: nowrap; }
.lj-neben a:hover { text-decoration: underline; }

.sc { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: size; background: var(--c-card-dark); }
.sc:not(.on) * { animation-play-state: paused !important; }
.sc img { display: block; max-width: none; }
.cap { position: absolute; z-index: 3; right: 5cqw; bottom: 6cqh; padding: 7px 14px; border-radius: 999px; background: var(--c-card-dark); font-size: var(--t-small); white-space: nowrap; color: var(--c-ink-dark); }


.sc-web { pointer-events: none; }

.web-wand { position: absolute; inset: 0; -webkit-mask: linear-gradient(90deg, rgba(0,0,0,.06) 30%, rgba(0,0,0,.3) 52%, #000 74%); mask: linear-gradient(90deg, rgba(0,0,0,.06) 30%, rgba(0,0,0,.3) 52%, #000 74%); }
.web-tilt { position: absolute; inset: -30% -18%; display: flex; gap: 2.2cqmax; justify-content: center; transform: rotate(-11deg); }
.web-col { flex: none; width: 27cqmax; display: flex; flex-direction: column; gap: 2.2cqmax; animation: web-hoch var(--d) linear infinite; will-change: transform; }
.web-col.rev { animation-direction: reverse; }
.web-col img { width: 100%; height: auto; border-radius: 1cqmax; }
.web-col.schmal { width: 14cqmax; }
@keyframes web-hoch { to { transform: translateY(calc(-50% - 1.1cqmax)); } }


.sc-ads { background: radial-gradient(90% 90% at 50% 45%, #0e1a3a 0%, #070a14 70%); }
.ads-map { position: absolute; left: 72%; top: 50%; height: 80cqh; aspect-ratio: 751.3 / 580; max-width: 50cqw; transform: translate(-50%, -50%); }
.ads-land { position: absolute; inset: 0; background: rgba(255,255,255,.13); -webkit-mask: url('img/brand/saarland-umriss.svg') center / contain no-repeat; mask: url('img/brand/saarland-umriss.svg') center / contain no-repeat; overflow: hidden; }
.ads-fill { position: absolute; left: 46%; top: 50%; width: 56%; aspect-ratio: 1; margin: -28% 0 0 -28%; border-radius: 50%; background: linear-gradient(var(--c-blau), var(--c-blau-tief)); transform: scale(.08); }
.ads-pin { position: absolute; width: 2.4%; aspect-ratio: 1; margin: -1.2% 0 0 -1.2%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5cqmin rgba(255,255,255,.25); transform: scale(0); }
.ads-note { position: absolute; right: 7cqw; top: 9cqh; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--c-ink-dark); color: var(--c-bg-dark); font-size: var(--t-small); line-height: 1.25; opacity: 0; }
.ads-note i { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--c-blau); }
.ads-note b { display: block; font-weight: 600; }


.lj .lj-sonder { height: auto; min-height: 0; padding: var(--s-6); background: var(--c-card-dark); }
.lj-sonder .lj-tx { position: static; width: auto; display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-5); align-items: start; margin-bottom: var(--s-6); }
.lj-sonder .lj-name, .lj-sonder .lj-sub { grid-column: 1; }
.lj-sonder .lj-sub { color: var(--c-muted-dark); }
.lj-sonder .lj-an { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.lj-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(250px, auto); gap: var(--s-2); }
.lj-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-box); background: var(--c-bg-dark); text-align: center; color: var(--c-muted-dark); }
.lj-kachel svg { width: 56px; height: 56px; color: var(--c-ink-dark); }
.lj-kachel p { margin: 0; max-width: 30ch; font-size: var(--t-lead); line-height: 1.3; }
.lj-kachel b { color: var(--c-ink-dark); font-weight: 600; }
.lj-gross { gap: var(--s-1); }
.lj-gross strong { font-family: var(--f-head); font-weight: 600; letter-spacing: var(--ls-head); font-size: var(--t-1); line-height: 1.1; color: var(--c-ink-dark); }


[data-m="layers"] { background: var(--c-bg-dark); }


.lj-bogen { position: absolute; left: -20%; bottom: -1px; width: 140%; height: var(--bogen); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--c-bg); transform-origin: 50% 100%; }

.ueber { background: var(--bg-dark); }


.abschluss { padding: 0 var(--gut) var(--s-7); background: var(--bg-dark); }
.abschluss-box { position: relative; isolation: isolate; display: flex; align-items: center; height: min(88vh, 760px); min-height: 560px; max-width: var(--w-stage); margin: 0 auto; overflow: hidden; border-radius: var(--r-box); background: var(--c-card-dark); transform: translateZ(0); }
.abschluss-bild { position: absolute; z-index: -1; right: -6%; top: 50%; width: 74%; }

.abschluss-bild img { display: block; width: 100%; max-width: none; height: auto; transform: translateY(-47%);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(transparent 24%, #000 33%, #000 64%, transparent 76%); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(transparent 24%, #000 33%, #000 64%, transparent 76%); mask-composite: intersect; }
.abschluss-tx { width: 50%; padding: 0 0 0 var(--s-6); }
.abschluss-tx h2 { margin: 0 0 var(--s-2); max-width: 14ch; font-size: var(--t-1); line-height: var(--lh-1); }
.abschluss-tx .lead { margin: 0 0 var(--s-4); max-width: 26ch; color: var(--c-muted-dark); }
.static .lj-bogen { display: none; }


.dt { padding: var(--s-section) var(--gut); overflow: clip; }
.dt-dunkel { background: var(--bg-dark); color: var(--c-ink-dark); }
.dt-hell { background: var(--c-bg); color: var(--c-ink); }
.dt-nachher { padding-top: 0; }
.dt:has(> .lj-bogen) { padding-bottom: calc(16vw + var(--s-7)); }
.lj-bogen { --bogen: 16vw; }
.dt-innen { max-width: var(--w-stage); margin: 0 auto; }
.dt-innen + .dt-innen { margin-top: var(--s-6); }
.dt-mitte { max-width: var(--w-content); text-align: center; }
.dt-mitte h2 { margin: 0 auto var(--s-3); }
.dt-mitte .lead, .dt-mitte p { margin-left: auto; margin-right: auto; text-wrap: balance; }
.dt-mitte p:last-child { margin-bottom: 0; }
.dt-schmal { max-width: var(--w-text); }
.dt-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
.dt-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.dt-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-box); }
.dt-box { padding: var(--s-6); border-radius: var(--r-box); background: var(--c-card-dark); }
.dt-hell .dt-box { background: var(--c-card); }
.dt-hell .dt-box-stark { background: var(--c-bg-dark); color: var(--c-ink-dark); }
.dt-box h3, .dt-h3 { margin: 0 0 var(--s-3); font-size: var(--t-3); line-height: var(--lh-3); }
.dt-box p:last-child { margin-bottom: 0; }
.dt-liste { margin: 0; padding: 0; list-style: none; }
.dt-liste li { padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.dt-box-stark .dt-liste li { border-color: var(--c-line-dark); }
.dt-liste li:first-child { border-top: 0; padding-top: 0; }
.dt-link { display: block; text-decoration: none; transition: background-color .2s; color: inherit; }
.dt-link span { font-weight: var(--w-strong); }
.dt-link:hover { background: var(--c-ph-dark); }
.dt-fehlt { min-height: 100%; background: var(--c-ph-dark); }
.dt-platzhalter { margin-top: var(--s-3); color: var(--c-muted-dark); }

.statement { margin: var(--s-4) 0; font-family: var(--f-head); font-weight: var(--w-strong); letter-spacing: var(--ls-head); font-size: var(--t-2); line-height: var(--lh-2); max-width: none; }


.dt-hero { position: relative; display: flex; align-items: center; min-height: 100vh; padding: var(--s-section) max(var(--gut), calc((100vw - var(--w-stage)) / 2)) var(--s-7); overflow: clip; background: var(--bg-dark); color: var(--c-ink-dark); }
.dt-hero > .sc { position: absolute; inset: 0; background: var(--bg-dark); pointer-events: none; }
.dt-hero .web-wand { -webkit-mask: linear-gradient(90deg, transparent 48%, rgba(0,0,0,.35) 62%, #000 82%); mask: linear-gradient(90deg, transparent 48%, rgba(0,0,0,.35) 62%, #000 82%); }
.dt-hero .web-tilt { inset: -30% -18% -30% 30%; }
.dt-hero-tx { position: relative; z-index: 1; width: 52%; }
.dt-hero-tx .eyebrow { margin-bottom: var(--s-3); }
.dt-hero-tx h1 { margin: 0 0 var(--s-4); font-size: var(--t-1); line-height: var(--lh-1); }
.dt-hero-tx .lead { margin-bottom: var(--s-3); }
.dt-hero-tx p { max-width: var(--w-text); }
.dt-fakten { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: var(--s-6) 0 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--c-muted-dark); }
.dt-fakten b { display: block; font-family: var(--f-head); font-size: var(--t-3); line-height: 1.2; color: var(--c-ink-dark); }


.dt-hell .lj-kachel { background: var(--c-card); color: var(--c-muted); }
.dt-hell .lj-kachel svg, .dt-hell .lj-kachel b, .dt-hell .lj-gross strong { color: var(--c-ink); }
.dt-satz { margin-top: var(--s-7); }
.dt-drei { grid-auto-rows: auto; }
.dt-schritt { justify-content: flex-start; }
.dt-schritt p { margin: 0; }
.dt-nummer { font-family: var(--f-head); font-weight: var(--w-strong); font-size: var(--t-2); line-height: 1; color: var(--c-ink); }
.dt-erhalten { align-items: stretch; text-align: left; gap: var(--s-3); }
.dt-erhalten strong { font-size: var(--t-3); line-height: var(--lh-3); }
.dt-erhalten .dt-liste li { padding: var(--s-1) 0; font-size: var(--t-small); }


.dt-faelle { display: grid; gap: var(--s-6); }
.fall { padding: var(--s-6); border-radius: var(--r-box); background: var(--c-card-dark); }
.fall-kopf { margin-bottom: var(--s-5); }
.dt-vor { margin: 0 0 var(--s-2); color: var(--c-muted-dark); }
.fall-titel { margin: 0 0 var(--s-2); font-size: var(--t-1); line-height: var(--lh-1); }
.fall-erg { margin: 0; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--c-muted-dark); }
.fall-buehne { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-img); background: var(--c-bg-dark); }
.fall-vor, .fall-nach { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fall-handy { position: absolute; right: var(--s-5); bottom: 0; width: 18%; height: auto; border-radius: var(--s-2) var(--s-2) 0 0; }
.fall-buehne .dt-fehlt { position: absolute; inset: 0; }
.fall-marke { position: absolute; left: var(--s-3); top: var(--s-3); padding: var(--s-1) var(--s-2); border-radius: var(--r-btn); background: var(--c-card-dark); font-size: var(--t-small); color: var(--c-ink-dark); }
.fall-text { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-5); font-size: var(--t-body); }
.fall-text h4, .fall-mehr summary { margin: 0 0 var(--s-2); font-size: var(--t-body); font-weight: var(--w-strong); }
.fall-text p { color: var(--c-muted-dark); }
.fall-zitat { margin: var(--s-5) 0 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--c-line-dark); font-family: var(--f-head); font-weight: var(--w-strong); letter-spacing: var(--ls-head); font-size: var(--t-3); line-height: var(--lh-3); }
.fall-zitat cite { display: block; margin-top: var(--s-2); font-family: var(--f-body); font-style: normal; font-weight: 400; letter-spacing: 0; font-size: var(--t-small); color: var(--c-muted-dark); }
.fall-mehr { margin-top: var(--s-4); border-top: 1px solid var(--c-line-dark); padding-top: var(--s-3); }
.fall-mehr summary { margin: 0; cursor: pointer; list-style: none; }
.fall-mehr summary::after, .dt-frage summary::after { content: " +"; }
.fall-mehr[open] summary::after, .dt-frage[open] summary::after { content: " −"; }
.fall-mehr p { margin: var(--s-2) 0 0; max-width: var(--w-content); color: var(--c-muted-dark); }


.dt-galerie { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.dt-paar-bild { margin: 0; padding: var(--s-3); border-radius: var(--r-box); background: var(--c-card-dark); }
.dt-vn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.dt-vn > div { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-img); background: var(--c-bg-dark); }
.dt-vn img, .dt-regio img, .dt-demo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dt-vn span { position: absolute; left: var(--s-1); bottom: var(--s-1); padding: 2px var(--s-1); border-radius: var(--r-btn); background: var(--c-bg-dark); font-size: var(--t-micro); color: var(--c-ink-dark); }
.dt-paar-bild figcaption, .dt-regio figcaption, .dt-demo figcaption { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-muted-dark); }
.dt-paar-bild b, .dt-regio b, .dt-demo b { color: var(--c-ink-dark); }
.dt-regio { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-2); margin: 0; padding: var(--s-3); border-radius: var(--r-box); background: var(--c-card-dark); }
.dt-regio-gross { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-img); background: var(--c-bg-dark); }
.dt-regio-klein { display: grid; gap: var(--s-1); }
.dt-regio-klein > div { min-height: 0; overflow: hidden; border-radius: var(--r-img); background: var(--c-bg-dark); }
.dt-regio figcaption { grid-column: 1 / -1; margin: 0; }


.dt-demos { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.dt-demo { grid-column: span 2; margin: 0; padding: var(--s-2); border-radius: var(--r-box); background: var(--c-card-dark); }
.dt-demo:nth-child(-n+2), .dt-demo:nth-last-child(-n+2) { grid-column: span 3; }
.dt-demo img { aspect-ratio: 16 / 10; height: auto; border-radius: var(--r-img); }
.dt-weiter { margin-top: var(--s-7) !important; }

.dt-hell + .abschluss { padding-top: var(--s-7); }


.dw-hero { gap: var(--s-6); align-items: flex-start; }
[data-m="karte"] .ads-map { left: 50%; max-width: 72cqw; } 
.ads-fahrt { position: absolute; inset: 0; }
.ads-de { position: absolute; left: 0; top: 0; width: min(65cqh, 88cqw); aspect-ratio: 740.4 / 1000; transform-origin: 11.22% 73%; opacity: 0; }
.ads-de-land { position: absolute; inset: 0; overflow: hidden; background: rgba(255,255,255,.13); -webkit-mask: url('img/brand/deutschland-umriss.svg') center / contain no-repeat; mask: url('img/brand/deutschland-umriss.svg') center / contain no-repeat; }
.ads-de-fill { position: absolute; left: 11.22%; top: 73%; width: 100%; aspect-ratio: 1; margin: -50% 0 0 -50%; border-radius: 50%; background: linear-gradient(var(--c-blau), var(--c-blau-tief)); transform: scale(0); }
.ads-de-pin { width: 2%; margin: -1% 0 0 -1%; }
.static .ads-de { display: none; }
.dw-hero .dt-hero-tx { width: auto; flex: 1 1 56%; }
.dt-hero:has(> .lj-bogen) { padding-bottom: calc(16vw + var(--s-7)); }
.dw-telefon { position: relative; z-index: 1; flex: none; }
.dw-seiten { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.dw-seiten > div { aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-img); background: var(--c-bg-dark); }
.dw-seiten img { display: block; width: 100%; height: auto; }
.dw-prinzip { margin-top: var(--s-2); }
.dw-prinzip .lj-kachel { background: var(--c-bg-dark); }
.dw-weg h3 { font-size: var(--t-2); line-height: var(--lh-2); margin-bottom: var(--s-3); }
.dw-weg .dt-liste { margin-bottom: var(--s-3); }
.dt-hell .dw-weg .dt-vor { color: var(--c-muted); }
.dt-hell .dw-weg.dt-box-stark .dt-vor { color: var(--c-muted-dark); }
.dw-plaetze { margin-top: var(--s-3); }
.dw-tabelle { width: 100%; border-collapse: collapse; }
.dw-tabelle th, .dw-tabelle td { padding: var(--s-2) var(--s-3) var(--s-2) 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.dw-tabelle thead th, .dw-tabelle thead td { border-top: 0; font-size: var(--t-3); }
.dw-tabelle tbody th { font-weight: var(--w-strong); width: 20%; }
.dw-stufe { font-family: var(--f-head); font-weight: var(--w-strong); letter-spacing: var(--ls-head); font-size: var(--t-3); line-height: var(--lh-3); color: var(--c-ink-dark); }
.dw-beispiele { margin-top: var(--s-7) !important; }
.dw-anzeigen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5); }
.dw-fuenf { grid-template-columns: repeat(5, 1fr); grid-auto-rows: auto; }
.dw-formular form.box { padding: var(--s-6); border-radius: var(--r-box); background: var(--c-card-dark); }
.dw-formular .btn { margin-top: var(--s-3); }


.ds-hero { align-items: center; }
.ds-hero .dt-hero-tx { flex: 1 1 50%; }
.ds-hero-bild { position: relative; flex: 1 1 50%; align-self: center; }
.ds-hero-gross { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--r-img); }
.ds-hero-handy { position: absolute; right: var(--s-3); bottom: calc(-1 * var(--s-5)); width: 26%; border-radius: var(--s-2); }
.ds-kachel { color: var(--c-muted); text-decoration: none; transition: background-color .2s; }
.ds-kachel:hover { background: var(--c-ph); }
.ds-prozess { margin-top: var(--s-5); }
.ds-box-tief { background: var(--c-bg-dark); }
.ds-zahlen { counter-reset: schritt; }
.ds-zahlen li { counter-increment: schritt; display: grid; grid-template-columns: var(--s-5) 1fr; }
.ds-zahlen li::before { content: counter(schritt); font-weight: var(--w-strong); color: var(--c-muted-dark); }
.ds-saison { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: center; }
.ds-saison-tx h2 { font-size: var(--t-2); line-height: var(--lh-2); margin-bottom: var(--s-3); }
.ds-saison-tx .dt-liste { margin: var(--s-3) 0 var(--s-4); }
.ds-saison-buehne { padding: var(--s-5); border-radius: var(--r-box); background: var(--c-card-dark); }
.so-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-img); background: var(--c-bg-dark); }
.so-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }
.so-mon { display: flex; justify-content: space-between; margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-muted-dark); }
.so-mon span { padding: var(--s-1) 2px; cursor: pointer; transition: color .2s; }
.so-mon span:hover, .so-mon span.ist { color: var(--c-ink-dark); }
.so-mon span.ist { font-weight: var(--w-strong); }
.ds-saison-text { margin: var(--s-1) 0 0; font-size: var(--t-small); color: var(--c-muted-dark); }
.static .so-screen img:nth-child(2) { opacity: 1; }
.ds-fluss { display: grid; grid-template-columns: 1fr var(--s-6) 1fr; align-items: center; padding: var(--s-5); border-radius: var(--r-box); background: var(--c-card); }
.ds-formular { display: grid; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-img); background: var(--c-bg); }
.ds-formular i { display: block; height: var(--s-1); border-radius: var(--r-btn); background: var(--c-ph); }
.ds-formular i.kurz { width: 60%; }
.ds-linien { display: grid; gap: var(--s-4); }
.ds-linien span { display: block; height: 2px; background: linear-gradient(90deg, var(--c-blau), var(--c-blau-tief)); transform-origin: 0 50%; }
.ds-ziele { display: grid; gap: var(--s-1); }
.ds-ziel { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border-radius: var(--r-img); background: var(--c-bg); font-size: var(--t-small); font-weight: var(--w-strong); }
.ds-ziel svg { width: var(--s-4); height: var(--s-4); }
.ds-demo > :first-child { height: 120px; }
.ds-wuerfel { position: relative; width: 90px; height: 90px; margin: var(--s-1) auto; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(30deg); }
.ds-wuerfel i { position: absolute; inset: 0; border: 2px solid var(--c-blau-tief); background: color-mix(in srgb, var(--c-blau) 16%, transparent); }
.ds-wuerfel i:nth-child(1) { transform: translateZ(45px); } .ds-wuerfel i:nth-child(2) { transform: rotateY(180deg) translateZ(45px); }
.ds-wuerfel i:nth-child(3) { transform: rotateY(90deg) translateZ(45px); } .ds-wuerfel i:nth-child(4) { transform: rotateY(-90deg) translateZ(45px); }
.ds-wuerfel i:nth-child(5) { transform: rotateX(90deg) translateZ(45px); } .ds-wuerfel i:nth-child(6) { transform: rotateX(-90deg) translateZ(45px); }
.ds-ablauf { display: flex; align-items: center; gap: var(--s-1); width: 100%; }
.ds-ablauf span { flex: 1; height: var(--s-2); border-radius: var(--r-btn); background: linear-gradient(90deg, var(--c-blau), var(--c-blau-tief)); transform-origin: 0 50%; }
.ds-grafik { display: flex; align-items: flex-end; justify-content: center; gap: var(--s-2); width: 100%; }
.ds-grafik i { display: block; width: var(--s-5); border-radius: var(--s-1) var(--s-1) 0 0; background: linear-gradient(var(--c-blau), var(--c-blau-tief)); transform-origin: 50% 100%; }
.ds-grafik .a { height: 44%; } .ds-grafik .b { height: 70%; } .ds-grafik .c { height: 100%; }
.ds-mitte { display: flex; flex-direction: column; align-items: flex-start; }
.ds-mitte .btn { margin-top: auto; }


.uu { position: relative; }
.uu > .dt-innen { position: relative; z-index: 1; }
.uu-jahr { position: absolute; z-index: 0; right: -2vw; top: var(--s-5); font-family: var(--f-head); font-weight: var(--w-strong); letter-spacing: -.04em; font-size: 26vw; line-height: .85; pointer-events: none; }
.uu-umriss { color: transparent; -webkit-text-stroke: 1px var(--c-line-dark); }
.uu-warm { color: transparent; background: linear-gradient(#e7893c, transparent 82%); -webkit-background-clip: text; background-clip: text; opacity: .32; }
.uu-blau { color: transparent; background: linear-gradient(var(--c-blau), transparent 82%); -webkit-background-clip: text; background-clip: text; opacity: .28; }
.uu-hero { gap: var(--s-6); }
.uu-hero .uu-jahr { top: 8vh; right: auto; left: max(var(--gut), calc((100vw - var(--w-stage)) / 2)); font-size: 18vw; }
.uu-hero .dt-hero-tx { flex: 1 1 56%; width: auto; }
.uu-hero h1 { font-size: var(--t-hero); line-height: var(--lh-hero); }
.uu-hero-bild { position: relative; z-index: 1; flex: 1 1 34%; }
.uu-hero-bild img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--r-box); }
.uu h2 { margin-bottom: var(--s-3); }
.uu-fenster { padding: var(--s-1) var(--s-1) 0; border-radius: var(--r-img); background: var(--c-card-dark); }
.uu-leiste { display: flex; align-items: center; gap: 6px; padding: var(--s-1); font-size: var(--t-micro); color: var(--c-muted-dark); }
.uu-leiste span { width: 10px; height: 10px; border-radius: 50%; background: var(--c-ph-dark); }
.uu-leiste b { margin-left: var(--s-1); font-weight: 400; }
.uu-fenster img { display: block; width: 100%; height: auto; border-radius: var(--s-1); }
.uu-klein { margin: var(--s-2) 0; font-size: var(--t-small); color: var(--c-muted-dark); }
.uu-fenster .uu-klein { padding: 0 var(--s-1); }
.uu-zahl { display: block; font-family: var(--f-head); font-weight: var(--w-strong); letter-spacing: var(--ls-head); font-size: var(--t-1); line-height: 1; margin-bottom: var(--s-3); }
.uu-jahre h3 { margin-bottom: var(--s-1); }
.uu-breit img { aspect-ratio: 16 / 10; }
.uu-rechnung { background: var(--c-card-dark); }
.uu-summe { display: flex; justify-content: space-between; gap: var(--s-3); margin: var(--s-3) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--c-ink-dark); }
.uu-summe span { color: var(--c-muted-dark); }
.uu-satz { margin-top: var(--s-7) !important; }
.uu-collage { position: relative; aspect-ratio: 4 / 3; }
.uu-collage img { position: absolute; width: 68%; height: auto; border-radius: var(--r-img); box-shadow: 0 var(--s-2) var(--s-5) rgba(0,0,0,.18); }
.uu-collage img:nth-child(1) { left: 0; top: 0; } .uu-collage img:nth-child(2) { right: 0; top: 22%; } .uu-collage img:nth-child(3) { left: 14%; bottom: 0; }
.uu-name { padding-top: var(--s-section); }
.uu-logo { display: block; height: var(--s-6); width: auto; margin: 0 auto var(--s-5); }
.uu-saetze blockquote { margin: var(--s-2) 0; font-family: var(--f-head); font-weight: var(--w-strong); letter-spacing: var(--ls-head); font-size: var(--t-3); line-height: var(--lh-3); }
.uu-saetze { margin-top: var(--s-7) !important; }
.uu-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.uu-leistungen { margin-top: var(--s-2) !important; }
.dt-hell .dt-link:hover { background: var(--c-ph); }


.dk-oben { padding-top: calc(88px + var(--s-7)); }
.dk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
.dk-zwei h1 { margin-bottom: var(--s-3); font-size: var(--t-1); line-height: var(--lh-1); }
.dk-person { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.dk-person img { flex: none; width: 96px; height: 96px; object-fit: cover; object-position: top; border-radius: 50%; }
.dk-person p { margin: 0; }
.dk-person b, .dk-person span, .dk-person a { display: block; }
.dk-person span { color: var(--c-muted-dark); }
.dk-person a { text-decoration: none; }
.dk-person a:hover { text-decoration: underline; }
.dw-formular .row { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.dw-formular .row .btn { margin-top: var(--s-3); }
.de-prozent { padding-bottom: calc(16vw + var(--s-7)); }
.de-zahl { margin: 0; font-family: var(--f-head); font-weight: var(--w-strong); letter-spacing: -.04em; font-size: clamp(120px, 22vw, 320px); line-height: .95; color: transparent; background: linear-gradient(var(--c-blau), var(--c-blau-tief)); -webkit-background-clip: text; background-clip: text; }
.de-abstand { margin-top: var(--s-4); }
.de-haken { display: flex; gap: var(--s-2); align-items: flex-start; }
.de-haken input { flex: none; width: auto; margin-top: 5px; }
.de-haken label { margin: 0; font-weight: 400; }


.ds-hero-gross { object-position: center; }
.dz-breit { max-width: var(--w-content); }
.dz-nutzen { grid-auto-rows: auto; }
.dz-nutzen { grid-template-columns: repeat(6, 1fr); }
.dz-nutzen .dt-schritt { grid-column: span 2; }
.dz-nutzen .dt-schritt:nth-child(n+4) { grid-column: span 3; }
.dz-tabelle { overflow-x: auto; }
.dt-dunkel .dw-tabelle th, .dt-dunkel .dw-tabelle td { border-color: var(--c-line-dark); }
.dz-tabelle .dw-tabelle thead th { font-size: var(--t-small); font-weight: var(--w-strong); }
.dz-kalender td, .dz-kalender th { font-size: var(--t-small); }
.dz-beispiele { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.dz-beispiel { margin: 0; padding: var(--s-2); border-radius: var(--r-box); background: var(--c-card-dark); }
.dz-beispiel > div { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-img); background: var(--c-bg-dark); }
.dz-beispiel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dz-beispiel figcaption { padding: var(--s-2) var(--s-1) var(--s-1); color: var(--c-muted-dark); }
.dz-beispiel b { display: block; margin-bottom: var(--s-1); color: var(--c-ink-dark); }
.dt-box .statement { margin: 0; }
.dk-danke { display: grid; align-items: center; min-height: 80vh; padding-top: calc(88px + var(--s-7)); }
.dk-danke h1 { margin-bottom: var(--s-3); font-size: var(--t-1); line-height: var(--lh-1); }
.dk-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); margin-top: var(--s-4); }
.dk-links .btn { margin-top: 0; }
.dk-recht { padding-top: calc(88px + var(--s-7)); }
.dk-recht h1 { margin-bottom: var(--s-4); font-size: var(--t-1); line-height: var(--lh-1); }
.dk-recht h2 { margin: var(--s-6) 0 var(--s-2); font-size: var(--t-3); line-height: var(--lh-3); }
.dk-zwei .dt-liste { margin-top: var(--s-4); }
.dt-hero-tx .row { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.dt-hero-tx .eyebrow a { text-decoration: none; }


.dt-schmal h2 { margin-bottom: var(--s-5); }
.dt-frage { border-top: 1px solid var(--line); padding: var(--s-3) 0; }
.dt-frage summary { font-weight: var(--w-strong); cursor: pointer; list-style: none; }
.dt-frage p { margin: var(--s-2) 0 0; color: var(--c-muted); }

@media (max-width: 1068px) {
  .dt-hero-tx { width: 70%; }
  .dw-telefon { display: none; }
  .dw-fuenf { grid-template-columns: repeat(3, 1fr); }
  .fall-text { grid-template-columns: 1fr; }
}
@media (max-width: 734px) {
  .dt-hero { align-items: flex-start; min-height: 0; padding-top: 110px; padding-bottom: 46vh; }
  .dt-hero .web-wand { -webkit-mask: linear-gradient(transparent calc(100% - 46vh), #000 calc(100% - 26vh)); mask: linear-gradient(transparent calc(100% - 46vh), #000 calc(100% - 26vh)); }
  .dt-hero .web-tilt { inset: 0 -30% -30% -30%; }
  .dt-hero-tx { width: 100%; }
  .dt-zwei, .dt-paar, .dt-galerie, .dt-regio { grid-template-columns: 1fr; }
  .dt-box, .fall { padding: var(--s-4) var(--s-3); }
  .fall-buehne { aspect-ratio: 4 / 3; }
  .fall-handy { width: 26%; right: var(--s-2); }
  .dt-demo, .dt-demo:nth-child(-n+2), .dt-demo:nth-last-child(-n+2) { grid-column: 1 / -1; }
  .dz-beispiele { grid-template-columns: 1fr; }
  .dz-nutzen { grid-template-columns: 1fr; }
  .dz-nutzen .dt-schritt, .dz-nutzen .dt-schritt:nth-child(n+4) { grid-column: 1; }
  .dk-zwei { grid-template-columns: 1fr; }
  .uu-hero { flex-direction: column; align-items: flex-start; }
  .uu-hero h1 { font-size: var(--t-1); line-height: var(--lh-1); }
  .uu-hero-bild { width: 100%; flex: none; }
  .uu-hero .uu-jahr { left: auto; right: -2vw; top: 70px; font-size: 40vw; }
  .uu-drei { grid-template-columns: 1fr; }
  .uu-summe { flex-direction: column; gap: var(--s-1); }
  .ds-hero { align-items: flex-start; }
  .ds-hero-bild { width: 100%; flex: none; margin-bottom: var(--s-5); }
  .ds-saison { grid-template-columns: 1fr; }
  .ds-saison-buehne { padding: var(--s-3); }
  .so-mon { font-size: var(--t-micro); }
  .ds-fluss { padding: var(--s-3); grid-template-columns: 1fr var(--s-4) 1fr; }
  .dw-hero { flex-direction: column; padding-bottom: calc(16vw + var(--s-7)); }
  .dw-seiten { grid-template-columns: 1fr 1fr; }
  .dw-fuenf { grid-template-columns: 1fr; }
  [data-m="karte"] .ads-map { top: 50%; }
  .dw-formular form.box { padding: var(--s-4) var(--s-3); }
  .dw-tabelle thead { display: none; }
  .dw-tabelle td, .dw-tabelle th { display: block; width: 100%; padding: var(--s-1) 0; }
  .dw-tabelle tbody th { width: 100%; padding-top: var(--s-3); }
}


.lj-schritt { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gut); background: rgba(0,0,0,.72); color: var(--c-ink-dark); }
.lj-karte { position: relative; width: 100%; max-width: var(--w-text); max-height: 100%; overflow: auto; padding: var(--s-6); border-radius: var(--r-box); background: var(--c-card-dark); }
.lj-vor { margin-bottom: var(--s-2); color: var(--c-muted-dark); }
.lj-sn { margin-bottom: var(--s-2); font-size: var(--t-2); line-height: var(--lh-2); }
.lj-karte ul { margin: var(--s-4) 0 var(--s-5); padding: 0; list-style: none; }
.lj-karte li { padding: var(--s-2) 0; border-top: 1px solid var(--c-line-dark); }
.lj-zu { position: absolute; right: var(--s-2); top: var(--s-2); width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 22px; cursor: pointer; }


.static .web-col { animation: none; }
.static .ads-fill { transform: scale(5.5); }
.static .ads-pin { transform: none; }

@media (max-width: 734px) {
  .lj-t { height: 92vh; min-height: 0; }
  .lj-tx { left: var(--s-4); right: var(--s-4); width: auto; top: var(--s-5); bottom: auto; }
  .web-wand { -webkit-mask: linear-gradient(rgba(0,0,0,.08) 28%, rgba(0,0,0,.5) 50%, #000 70%); mask: linear-gradient(rgba(0,0,0,.08) 28%, rgba(0,0,0,.5) 50%, #000 70%); }
  .ads-map { left: 50%; top: 72%; height: auto; width: 92cqw; max-width: none; }
  .ads-note { top: auto; bottom: 4cqh; right: 5cqw; }
  .cap { display: none; }
  .abschluss-box { align-items: flex-start; text-align: center; height: 92vh; min-height: 0; }
  .abschluss-tx { width: 100%; padding: var(--s-6) var(--s-3) 0; }
  .abschluss-tx h2, .abschluss-tx .lead { margin-left: auto; margin-right: auto; }
  .abschluss-bild { left: -40%; right: auto; top: auto; bottom: 0; width: 180%; }
  .abschluss-bild img { transform: translateY(30%); -webkit-mask: linear-gradient(transparent 24%, #000 33%, #000 64%, transparent 76%); mask: linear-gradient(transparent 24%, #000 33%, #000 64%, transparent 76%); }
  .lj .lj-sonder { padding: var(--s-5) var(--s-3); }
  .lj-sonder .lj-tx { display: block; }
  .lj-sonder .lj-an { margin-top: var(--s-4); }
  .lj-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .lj-kachel { padding: var(--s-5) var(--s-3); }
}


.dk-jubel { position: relative; width: 76px; height: 76px; margin: 0 auto var(--s-4); }
.dk-jubel svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--c-blau); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dk-jubel i { position: absolute; left: 50%; top: 50%; width: 7px; height: 12px; margin: -6px 0 0 -3.5px; border-radius: 2px; pointer-events: none; }


.dk-404-wrap { position: relative; width: max-content; margin: 0 auto var(--s-4); }
.dk-404-zahl { position: relative; z-index: 1; font: var(--w-head) clamp(140px, 22vw, 300px)/.9 var(--f-head); letter-spacing: -.04em; color: #e9e8e4; user-select: none; }
.dk-404-schein { display: none; position: absolute; inset: -140px -240px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at calc(var(--x, 50%) + 240px) calc(var(--y, 50%) + 140px), rgba(255,255,255,.13) 0, rgba(255,255,255,.05) calc(var(--r, 0px) * .6), rgba(255,255,255,0) calc(var(--r, 0px) * 1.15)); }
.dk-404.lampe-an .dk-404-schein { display: block; }
.dk-404.lampe-an .dk-404-zahl { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #ffffff 0, #e9e8e4 calc(var(--r, 0px) * .35), #7a7976 calc(var(--r, 0px) * .7), #232325 var(--r, 0px)); }


.dk-hinweis { margin-top: var(--s-4); padding-left: 16px; border-left: 2px solid var(--c-blau); color: var(--c-muted-dark); }


.dw-formular .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--s-5); font-size: var(--t-small); }
.dw-formular .steps span { border: 0; border-radius: 0; padding: 12px 0 0; background: none; color: var(--c-muted-dark); position: relative; transition: color .4s; }
.dw-formular .steps span::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); transition: background .4s; }
.dw-formular .steps span em { display: block; font-style: normal; font-size: var(--t-micro); opacity: .7; margin-bottom: 2px; }
.dw-formular .steps span.on, .dw-formular .steps span.done { color: var(--c-ink-dark); background: none; }
.dw-formular .steps span.on::before, .dw-formular .steps span.done::before { background: var(--c-blau); }
.dw-formular .field { margin-bottom: var(--s-3); }
.dw-formular label { font-size: var(--t-body); font-weight: 600; margin-bottom: 10px; color: var(--c-ink-dark); }
.dw-formular input, .dw-formular textarea, .dw-formular select { padding: 15px 18px; font-size: 17px; color: var(--c-ink-dark); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; transition: border-color .25s, box-shadow .25s, background .25s; }
.dw-formular input::placeholder, .dw-formular textarea::placeholder { color: rgba(241,240,236,.38); }
.dw-formular input:hover, .dw-formular textarea:hover, .dw-formular select:hover { border-color: rgba(255,255,255,.28); }
.dw-formular input:focus, .dw-formular textarea:focus, .dw-formular select:focus { outline: none; background: rgba(255,255,255,.09); border-color: var(--c-blau); box-shadow: 0 0 0 4px rgba(74,125,255,.25); }
.dw-formular textarea { min-height: 130px; resize: vertical; }
.dw-formular select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23f1f0ec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; }
.dw-formular select option { color: #141414; }
.dw-formular .btn.fill span { display: inline-block; margin-left: 4px; transition: transform .3s var(--ease); }
.dw-formular .btn.fill:hover span { transform: translateX(4px); }
.dw-formular .dk-zurueck { border-color: transparent; color: var(--c-muted-dark); padding-left: 0; padding-right: 8px; }
.dw-formular .dk-zurueck:hover { color: var(--c-ink-dark); background: none; }
.dw-formular .small.muted { color: var(--c-muted-dark); margin-top: var(--s-2); }
.dw-formular .small.muted a { color: inherit; }

.dw-formular .dk-daten { margin: var(--s-2) 0 0; font-size: 12px; line-height: 1.3; }
.dw-formular .dk-daten a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted-dark); text-decoration: none; transition: color .25s; }
.dw-formular .dk-daten a:hover { color: var(--c-ink-dark); }
.dw-formular .dk-daten svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }


.dw-formular form.box { padding: var(--s-5); }
.dw-formular .steps { margin-bottom: var(--s-4); }
.dw-formular .field { margin-bottom: 12px; }
.dw-formular .fl { position: relative; }
.dw-formular .fl input, .dw-formular .fl select { height: 58px; padding: 24px 16px 6px; }
.dw-formular .fl select { padding-right: 46px; }
.dw-formular .fl textarea { padding: 28px 16px 10px; min-height: 120px; }
.dw-formular .fl label { position: absolute; left: 17px; top: 18px; margin: 0; font-size: 17px; font-weight: 400; line-height: 1.3; color: rgba(241,240,236,.5); pointer-events: none; transform-origin: left top; transition: top .2s var(--ease), font-size .2s var(--ease), color .2s; }
.dw-formular .fl input:focus + label, .dw-formular .fl input:not(:placeholder-shown) + label,
.dw-formular .fl textarea:focus + label, .dw-formular .fl textarea:not(:placeholder-shown) + label,
.dw-formular .fl-wahl label { top: 8px; font-size: 12px; }
.dw-formular .fl input:focus + label, .dw-formular .fl textarea:focus + label, .dw-formular .fl select:focus + label { color: #9db8ff; }
.dw-formular .fl input::placeholder, .dw-formular .fl textarea::placeholder { color: transparent; transition: color .2s; }
.dw-formular .fl input:focus::placeholder, .dw-formular .fl textarea:focus::placeholder { color: rgba(241,240,236,.38); }
.dw-formular .fl-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dw-formular .btn { margin-top: var(--s-2); }
.dw-formular .row .btn { margin-top: var(--s-2); }


.dw-formular .chips { border: 0; padding: 0; margin: 0 0 var(--s-3); min-width: 0; }
.dw-formular .chips legend { padding: 0; margin-bottom: 10px; font-size: 15px; color: rgba(241,240,236,.7); }
.dw-formular .chips legend em { font-style: normal; margin-left: 8px; font-size: 12px; opacity: .6; }
.dw-formular .chip-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.dw-formular .chip { position: relative; margin: 0; font-size: 15px; font-weight: 400; color: var(--c-ink-dark); cursor: pointer; }
.dw-formular .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; pointer-events: none; }
.dw-formular .chip span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); transition: background .2s, border-color .2s, color .2s; }
.dw-formular .chip span::before { content: ''; width: 0; height: 12px; margin-right: -8px; opacity: 0; transition: width .2s var(--ease), opacity .2s, margin .2s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.5l3.7 3.7L12.5 2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.dw-formular .chip:hover span { border-color: rgba(255,255,255,.32); }
.dw-formular .chip input:checked + span { background: var(--c-blau); border-color: var(--c-blau); color: #fff; }
.dw-formular .chip input:checked + span::before { width: 13px; margin-right: 0; opacity: 1; }
.dw-formular .chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(74,125,255,.35); }


.dw-formular .steps { gap: 6px; margin-bottom: var(--s-5); }
.dw-formular .steps span { padding-top: 14px; font-size: 13px; }
.dw-formular .steps span:not(.on) { color: transparent; }
.dw-formular .steps span em { display: inline; margin: 0 8px 0 0; font-size: 13px; opacity: .55; }
.dw-formular .steps span::before { height: 2px; }
.dw-formular .chips { margin-bottom: var(--s-4); }
.dw-formular .chips legend { font-size: 17px; color: var(--c-ink-dark); margin-bottom: 14px; }
.dw-formular .chip-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dw-formular .chip span { display: flex; justify-content: center; width: 100%; padding: 14px 16px; border: 0; border-radius: 12px; background: rgba(255,255,255,.07); }
.dw-formular .chip:hover span { background: rgba(255,255,255,.11); }
.dw-formular .fl input, .dw-formular .fl textarea { border-color: transparent; background: rgba(255,255,255,.07); }
.dw-formular .fl input:hover, .dw-formular .fl textarea:hover { border-color: transparent; background: rgba(255,255,255,.1); }
.dw-formular .row .btn, .dw-formular .step > .btn { margin-top: var(--s-4); }
.dw-formular .chip-reihe { grid-template-columns: repeat(var(--spalten, 2), 1fr); }


.dk-danke .dk-stoebern { margin: var(--s-6) auto 0; font-size: var(--t-small); letter-spacing: .02em; color: var(--c-muted-dark); }
.dk-danke .dk-stoebern + .dk-links { margin-top: var(--s-2); }

.dk-danke .dk-stoebern { margin-top: var(--s-5); }
.dk-danke .dk-stoebern + .dk-links { margin-top: var(--s-3); }
.dk-danke .dk-links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-content: center; width: max-content; margin-left: auto; margin-right: auto; }
.dk-danke .dk-links .btn { justify-content: center; text-align: center; padding-left: 28px; padding-right: 28px; }


.dw-formular .pflicht { color: #ff6b5e; margin-left: 3px; }
.dw-formular .de-haken { display: flex; gap: 12px; align-items: flex-start; margin: var(--s-3) 0 0; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--c-ink-dark); cursor: pointer; }
.dw-formular .de-haken input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }
.dw-formular .de-box { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); transition: background .2s, border-color .2s; }
.dw-formular .de-haken:hover .de-box { border-color: rgba(255,255,255,.4); }
.dw-formular .de-haken input:checked + .de-box { background: var(--c-blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.5l3.7 3.7L12.5 2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--c-blau); }
.dw-formular .de-haken input:focus-visible + .de-box { box-shadow: 0 0 0 4px rgba(74,125,255,.35); }
.dw-formular .fl .fehlt { border-color: #ff6b5e; box-shadow: 0 0 0 4px rgba(255,107,94,.18); }
.dw-formular .fl .fehlt + label { color: #ff8a80; }
.dw-formular .fl-fehler { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 2px; font-size: 13px; color: #ff8a80; animation: fl-rein .25s var(--ease); }
.dw-formular .fl-fehler::before { content: '!'; flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #ff6b5e; color: #000; font-size: 11px; font-weight: 700; }
.dw-formular .de-haken .fehlt + .de-box { border-color: #ff6b5e; }
.dw-formular .de-haken .fl-fehler { flex-basis: 100%; }
.dw-formular .de-haken { flex-wrap: wrap; }
@keyframes fl-rein { from { opacity: 0; transform: translateY(-4px); } }


.dt-icons li { display: flex; align-items: flex-start; gap: 12px; }
.dt-icons li svg { flex: none; width: 17px; height: 17px; margin-top: .2em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.dt-icons li span { text-wrap: pretty; }


.site-foot .foot-neu { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--c-blau); }
.site-foot .foot-neu i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--c-blau); }
.site-foot .foot-neu i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--c-blau); animation: foot-puls 2s ease-out infinite; }
@keyframes foot-puls { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }

.site-foot .foot-empf { background: linear-gradient(90deg, #4A7DFF, #9db8ff, #f5b301, #ff8a5c, #4A7DFF) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foot-verlauf 6s linear infinite; }
.site-foot .foot-empf:hover { text-decoration-color: #f5b301; }
@keyframes foot-verlauf { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .site-foot .foot-neu i::after, .site-foot .foot-empf { animation: none; } }


.site-foot .foot-neu { display: inline-block; vertical-align: 1px; margin: 0 0 0 10px; padding: 3px 6px 2px; border-radius: 3px; background: var(--c-blau); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }

.site-foot .foot-empf { background: linear-gradient(90deg, #4A7DFF 0%, #9b5cf6 38%, #e2479b 70%, #f5652a 100%); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: none; }

.site-foot .foot-empf { background-image: linear-gradient(90deg, #4A7DFF 0%, #5f9dff 45%, #86dcf5 100%); }

.site-foot .foot-empf {
  background-image: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%),
                    linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%);
  background-size: 250% 100%, 220% 100%; background-repeat: no-repeat;
  animation: foot-leben 9s ease-in-out infinite; }
@keyframes foot-leben {
  0%   { background-position: 100% 0, 0% 0; }
  10%  { background-position: 0% 0, 10% 0; }
  55%  { background-position: 0% 0, 100% 0; }
  100% { background-position: 0% 0, 0% 0; }
}
@media (prefers-reduced-motion: reduce) { .site-foot .foot-empf { animation: none; background-position: 0% 0, 0% 0; } }


.de-seite { padding-top: calc(88px + var(--s-7)); }
.de-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: var(--s-7); max-width: var(--w-stage); margin: 0 auto; align-items: start; }
.de-text h1 { font-size: var(--t-1); line-height: var(--lh-1); margin-bottom: var(--s-3); }
.de-text .lead { max-width: 600px; }
.de-block { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--c-line-dark); max-width: 620px; }
.de-block .dt-h3 { margin-bottom: var(--s-3); }
.de-belohnung .de-zahl { font-size: clamp(110px, 13vw, 200px); }
.de-belohnung .statement { margin: var(--s-2) 0 var(--s-1); }
.de-belohnung p:last-child { color: var(--c-muted-dark); }
.de-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.de-schritte li { display: flex; gap: var(--s-3); align-items: flex-start; }
.de-schritte p { margin: 4px 0 0; color: var(--c-muted-dark); }
.de-nr { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-line-dark); font-weight: 600; font-size: 15px; }
.de-seite .dt-liste li { border-color: var(--c-line-dark); }
.de-seite .dt-frage { border-color: var(--c-line-dark); }
.de-form { position: sticky; top: 104px; }
.de-form-titel { margin: 0 0 var(--s-3); font-family: var(--f-head); font-weight: var(--w-strong); font-size: var(--t-3); }
.dw-formular .de-haken > span:last-child { flex: 1 1 0; min-width: 0; }


.de-block { border-top: 0; padding-top: 0; margin-top: var(--s-7); }
.de-belohnung { margin-top: var(--s-6); }
.de-regeln { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.de-regeln li { position: relative; padding-left: 30px; }
.de-regeln li::before { content: ''; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23f1f0ec' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.de-seite .dt-frage { border-top: 0; padding: var(--s-1) 0; }
.de-seite .dt-frage p { margin: var(--s-1) 0 0; color: var(--c-muted-dark); }
.de-seite .dt-frage summary { font-weight: 600; }
.de-belohnung { margin-top: var(--s-6); }
.de-bruecke { margin: 0 0 var(--s-1); font-size: var(--t-lead); color: var(--c-muted-dark); }
.de-belohnung .de-zahl { margin-top: 0; }
.de-belohnung .statement { margin: var(--s-1) 0 var(--s-1); }
.de-belohnung .de-leise { color: var(--c-muted-dark); }

.de-max {
  white-space: nowrap; font-weight: var(--w-strong);
  background-image: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%),
                    linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%);
  background-size: 250% 100%, 220% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foot-leben 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .de-max { animation: none; background-position: 0% 0, 0% 0; } }

.de-anzeichen { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.de-anzeichen li { position: relative; padding-left: 26px; font-size: 19px; line-height: 1.45; color: var(--c-muted-dark); }
.de-anzeichen li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-blau); box-shadow: 0 0 12px rgba(74,125,255,.7); }


.e2 { padding: calc(88px + var(--s-6)) var(--s-3) var(--s-7); text-align: center; }
.e2 > * { max-width: var(--w-content); margin-left: auto; margin-right: auto; }
.e2-hero .eyebrow { margin-left: auto; margin-right: auto; }
.e2-hero h1 { font-size: clamp(48px, 7vw, 96px); line-height: 1.02; letter-spacing: -.035em; margin: var(--s-2) auto var(--s-3); max-width: 960px; text-wrap: balance; }
.e2-hero .lead { max-width: 700px; margin: 0 auto; color: var(--c-muted-dark); text-wrap: balance; }

.e2-karten { margin-top: var(--s-6); display: flex; justify-content: center; align-items: center; padding: var(--s-3) 0; }
.e2-karte { position: relative; flex: none; width: min(420px, 46vw); aspect-ratio: 1.586; border-radius: 24px; padding: 26px 30px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 100px -30px rgba(74,125,255,.5), 0 24px 50px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.e2-karte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.11) 48%, rgba(255,255,255,0) 60%); pointer-events: none; }
.e2-k-links { background: radial-gradient(120% 90% at 100% 0%, rgba(74,125,255,.55) 0%, rgba(74,125,255,0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(134,220,245,.2) 0%, rgba(134,220,245,0) 60%), linear-gradient(160deg, #1d1d22 0%, #0d0d10 100%);
  transform: rotate(-5deg) translateY(10px); margin-right: -36px; z-index: 1; }
.e2-k-rechts { background: radial-gradient(120% 90% at 0% 0%, rgba(134,220,245,.42) 0%, rgba(134,220,245,0) 55%), radial-gradient(90% 80% at 100% 100%, rgba(74,125,255,.35) 0%, rgba(74,125,255,0) 60%), linear-gradient(200deg, #22222a 0%, #0f0f13 100%);
  transform: rotate(5deg) translateY(-10px); z-index: 2; }
.e2-karten:hover .e2-k-links { transform: rotate(-2deg) translateX(-14px); }
.e2-karten:hover .e2-k-rechts { transform: rotate(2deg) translateX(14px); }
.e2-karte-kopf { display: flex; justify-content: space-between; align-items: center; }
.e2-karte-kopf img { height: 22px; width: auto; }
.e2-karte-kopf span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.e2-karte-fuss { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-2); }
.e2-karte-was { margin: 0; font-family: var(--f-head); font-weight: 600; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.25; color: var(--c-ink-dark); }
.e2-karte-wert { margin: 0; font-family: var(--f-head); font-weight: var(--w-strong); font-size: clamp(44px, 5.6vw, 72px); line-height: .9; letter-spacing: -.04em; white-space: nowrap; }
.e2-cta { margin-top: var(--s-5); }
.e2-fein { margin: var(--s-3) auto 0; max-width: 620px; font-size: var(--t-small); color: var(--c-muted-dark); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .e2-karte { transition: none; } }

.e2-trio { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-7) auto 0; }
.e2-trio i { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); font-style: normal; font-size: 15px; font-weight: 600; color: var(--c-ink-dark); margin-bottom: var(--s-2); }
.e2-trio b { display: block; white-space: nowrap; font-family: var(--f-head); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; }
.e2-trio span { display: block; margin: 6px auto 0; max-width: 260px; color: var(--c-muted-dark); text-wrap: balance; }
.e2-formbereich { margin-top: var(--s-7); }
.e2-formbereich h2 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -.03em; line-height: 1.05; margin: 0 auto; }
.e2-sub { margin: var(--s-2) auto var(--s-5); max-width: 620px; color: var(--c-muted-dark); font-size: 21px; text-wrap: balance; }
.e2-form { max-width: 520px; margin: 0 auto; text-align: left; }
.e2-form .btn { width: 100%; justify-content: center; }
.e2-klein { margin-top: var(--s-7); max-width: 692px; text-align: left; font-size: var(--t-small); color: var(--c-muted-dark); border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--s-5); }
.e2-klein p { margin: 0 0 var(--s-2); font-weight: 600; color: var(--c-ink-dark); }
.e2-klein ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-1); }
@media (max-width: 734px) {
  .e2-trio { grid-template-columns: minmax(0, 1fr); }
  .e2-karten { flex-direction: column; }
  .e2-karte { width: min(360px, 88vw); padding: 20px 22px; border-radius: 18px; }
  .e2-k-links { margin: 0 0 -40px; transform: rotate(-4deg); }
  .e2-k-rechts { transform: rotate(3deg); }
}

.e2-k-links { margin-right: var(--s-3); }
.e2 .nw { white-space: nowrap; }
@media (max-width: 734px) { .e2-k-links { margin: 0 0 var(--s-2); } }

.e2-geschenk { position: relative; flex: none; margin-right: var(--s-3); transform: rotate(-5deg) translateY(10px); transition: transform .8s cubic-bezier(.2,.7,.2,1); z-index: 1; }
.e2-geschenk .e2-k-links { transform: none; margin: 0; }
.e2-karten:hover .e2-geschenk { transform: rotate(-2deg) translateX(-14px); }
.e2-karten:hover .e2-k-links { transform: none; }
.e2-karte-kopf span { font-family: inherit; font-size: 15px; font-weight: var(--w-strong); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.85); }
.e2-wer { list-style: none; padding: 0; margin: 0 auto var(--s-5); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-4); }
.e2-wer li { display: flex; align-items: center; gap: 8px; color: var(--c-ink-dark); font-size: 17px; }
.e2-wer li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--c-blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.e2-formbereich h2 { max-width: 820px; text-wrap: balance; }
@media (max-width: 734px) { .e2-geschenk { margin: 0 0 var(--s-2); transform: rotate(-4deg); } }


.s2-hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--c-bg-dark); color: var(--c-ink-dark); display: flex; align-items: flex-end; }
.s2-hero-bild, .s2-hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.s2-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%), linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 40%); pointer-events: none; }
.s2-hero-text { position: relative; z-index: 1; width: 100%; max-width: var(--w-stage); margin: 0 auto; padding: 0 var(--gut) var(--s-7); }
.s2-hero h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: -.03em; max-width: 12ch; margin: 0 0 var(--s-4); text-wrap: balance; }
.s2-hero .lead { max-width: 34ch; margin: 0 0 var(--s-5); color: rgba(241,240,236,.86); text-wrap: balance; }
.s2-wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); }
.s2-hero .s2-wege { margin-top: 0; }
.s2-wege .btn { margin: 0; }
.s2-link { color: #6f9bff; font-size: var(--t-body); text-decoration: none; }
.s2-link:hover { text-decoration: underline; }
.s2-hell .s2-link { color: var(--c-blau-tief); }
.s2-google { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-5); font-size: var(--t-small); font-weight: var(--w-strong); color: var(--c-ink-dark); text-decoration: none; opacity: .9; }
.s2-google img, .s2-google-gross img { width: 18px; height: 18px; }


.s2-raster { background: var(--c-bg-dark); padding: var(--s-2); display: grid; gap: var(--s-2); }
.s2-buehne, .s2-kachel { position: relative; overflow: hidden; border-radius: var(--r-box); }
.s2-buehne { min-height: 680px; display: flex; align-items: center; background: #0b0b0d; color: var(--c-ink-dark); border: 1px solid rgba(255,255,255,.08); }
.s2-tx { position: relative; z-index: 2; }
.s2-buehne .s2-tx { width: 100%; max-width: var(--w-stage); margin: 0 auto; padding: var(--s-7) var(--gut); }
.s2-buehne h2 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: -.035em; margin: 0; }
.s2-satz { font-size: var(--t-3); line-height: var(--lh-3); margin: var(--s-2) 0 0; max-width: 22ch; text-wrap: balance; }
.s2-buehne .s2-satz { color: rgba(241,240,236,.82); }
.s2-notiz { font-size: var(--t-small); margin: var(--s-2) 0 0; color: var(--c-muted-dark); }


.s2-wandbox { position: absolute; inset: 0; container-type: size; }
.s2-web .web-wand { -webkit-mask: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.35) 50%, #000 72%); mask: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.35) 50%, #000 72%); }
.s2-web .web-tilt { inset: -30% -10% -30% 30%; }


.s2-ads .s2-tx { padding-right: 52%; }
.s2-graph { position: absolute; right: var(--gut); top: 50%; width: min(46%, 620px); aspect-ratio: 600 / 340; transform: translateY(-50%); }
.s2-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s2-raster-linien line { stroke: rgba(255,255,255,.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s2-kurve { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 10px rgba(74,125,255,.6)); }
.s2-flaeche { opacity: 0; }
.s2-graph.an .s2-kurve { animation: s2-zeichnen 2.4s cubic-bezier(.4,0,.2,1) forwards; }
.s2-graph.an .s2-flaeche { animation: s2-ein 1.2s ease 1.4s forwards; }
@keyframes s2-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes s2-ein { to { opacity: 1; } }
.s2-note { position: absolute; transform: translate(-50%, -115%) scale(.85); opacity: 0; display: flex; align-items: center; gap: var(--s-1); padding: 10px 14px; border-radius: 14px; background: rgba(29,29,31,.92); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); white-space: nowrap; font-size: var(--t-small); line-height: 1.25; backdrop-filter: blur(8px); }
.s2-note i { width: 10px; height: 10px; border-radius: 50%; background: #34c759; box-shadow: 0 0 10px #34c759; flex: none; }
.s2-note span { display: flex; flex-direction: column; color: var(--c-muted-dark); }
.s2-note b { color: var(--c-ink-dark); }
.s2-graph.an .s2-note { animation: s2-plopp .5s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(1s + var(--i) * .6s); }
@keyframes s2-plopp { to { opacity: 1; transform: translate(-50%, -115%) scale(1); } }


.s2-sonder { min-height: 760px; background: radial-gradient(80% 90% at 70% 50%, #0d1430 0%, #050507 70%); }
.s2-feld { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.s2-sonder .s2-tx { pointer-events: none; }
.s2-sonder .s2-tx a { pointer-events: auto; }
.s2-hinweis { margin: var(--s-6) 0 0; font-size: var(--t-small); color: var(--c-muted-dark); }


.s2-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.s2-kachel { min-height: 620px; text-align: center; display: flex; flex-direction: column; }
.s2-kachel .s2-tx { padding: var(--s-7) var(--s-5) 0; display: flex; flex-direction: column; align-items: center; }
.s2-kachel h2 { font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: -.025em; margin: 0; }
.s2-kachel .s2-satz, .s2-kachel h2 { margin-left: auto; margin-right: auto; }
.s2-kachel .s2-wege { justify-content: center; }
.s2-hell { background: var(--c-card); color: var(--c-ink); }
.s2-bild { position: relative; flex: 1; margin-top: var(--s-6); display: flex; align-items: flex-end; justify-content: center; }
.s2-schirm-einzel { width: 86%; border-radius: var(--r-img) var(--r-img) 0 0; box-shadow: 0 30px 80px -30px rgba(0,0,0,.35); }
.s2-tim { background: #111; color: var(--c-ink-dark); }
.s2-foto-tim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 60%); mask-image: linear-gradient(180deg, transparent 18%, #000 60%); }
.s2-tim .s2-satz { color: rgba(241,240,236,.82); }


.s2-trust { background: var(--c-bg); color: var(--c-ink); text-align: center; padding: var(--s-section) var(--gut); }
.s2-google-gross { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-3); font-weight: var(--w-strong); }
.s2-trust h2 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: -.035em; margin: 0 auto; }
.s2-trust .lead { margin: var(--s-3) auto 0; color: var(--c-muted); }
.s2-stimmen { margin: var(--s-7) auto 0; max-width: var(--w-stage); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); text-align: left; }
.s2-stimmen figure { margin: 0; background: var(--c-card); border-radius: var(--r-card); padding: var(--s-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4); }
.s2-stimmen blockquote { margin: 0; font-size: var(--t-3); line-height: var(--lh-3); font-weight: var(--w-strong); letter-spacing: -.015em; }
.s2-stimmen figcaption { font-size: var(--t-small); color: var(--c-muted); }
.s2-logos { margin: var(--s-7) auto 0; max-width: var(--w-content); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-5) var(--s-6); }
.s2-logos img { height: 30px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.s2-logos img:hover { filter: none; opacity: 1; }
.s2-agentur { margin: var(--s-7) auto 0; font-size: var(--t-small); color: var(--c-muted); }
.s2-agentur a { color: var(--c-blau-tief); text-decoration: none; }


.s2-ende { background: var(--c-bg-dark); color: var(--c-ink-dark); padding: var(--s-section) var(--gut); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-7); align-items: center; max-width: var(--w-stage); margin: 0 auto; box-sizing: content-box; }
.s2-ende h2 { font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: -.025em; margin: 0 0 var(--s-4); max-width: 16ch; text-wrap: balance; }
.s2-ende .lead { color: var(--c-muted-dark); margin: 0 0 var(--s-5); max-width: 30ch; }
.s2-ende-bild { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 36%; border-radius: var(--r-box); }
main:has(.s2-ende) { background: var(--c-bg-dark); }

@media (prefers-reduced-motion: reduce) { .s2-kurve { stroke-dashoffset: 0; } .s2-flaeche, .s2-note { opacity: 1; } .s2-graph.an * { animation: none !important; } }
@media (max-width: 734px) {
  .s2-paar, .s2-stimmen, .s2-ende { grid-template-columns: minmax(0, 1fr); }
  .s2-buehne { min-height: 620px; align-items: flex-start; }
  .s2-ads .s2-tx { padding-right: var(--gut); }
  .s2-graph { top: auto; bottom: var(--s-5); left: var(--gut); right: var(--gut); width: auto; transform: none; }
  .s2-web .web-tilt { inset: 20% -30% -30% -30%; }
  .s2-web .web-wand { -webkit-mask: linear-gradient(transparent 40%, #000 75%); mask: linear-gradient(transparent 40%, #000 75%); }
}

.s2-ads .s2-tx { padding-right: var(--gut); }
.s2-ads .s2-tx > * { max-width: 40%; }
.s2-ads .s2-tx h2 { max-width: none; white-space: nowrap; }
.s2-graph { right: max(var(--gut), calc((100% - var(--w-stage)) / 2 + var(--gut))); width: min(50%, 640px); }
@media (max-width: 734px) { .s2-ads .s2-tx > * { max-width: none; } .s2-ads .s2-tx h2 { white-space: normal; } }
.s2-graph { width: min(44%, 540px); }

.s2-graph { right: 0; bottom: 0; top: auto; transform: none; width: 64%; height: 82%; aspect-ratio: auto;
  -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 18%, #000 40%); mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 18%, #000 40%); }
.s2-kurve { stroke-width: 5; }
.s2-ende { align-items: start; }
.s2-ende-text { padding-top: var(--s-5); }
.s2-ende-form { width: 100%; }
@media (max-width: 734px) { .s2-graph { width: 100%; height: 45%; left: 0; } }

.s2-kurve { stroke-dasharray: none; stroke-dashoffset: 0; }
.s2-graph svg { clip-path: inset(0 100% 0 0); }
.s2-graph.an svg { animation: s2-aufdecken 2.4s cubic-bezier(.4,0,.2,1) forwards; }
.s2-graph.an .s2-kurve { animation: none; }
.s2-flaeche { opacity: 1; }
.s2-graph.an .s2-flaeche { animation: none; }
@keyframes s2-aufdecken { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .s2-graph svg { clip-path: none; } }

.s2-glanz { filter: drop-shadow(0 0 8px rgba(160,210,255,.9)); }
.s2-graph.an .s2-flaeche { animation: s2-atmen 5s ease-in-out 2.4s infinite; }
@keyframes s2-atmen { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .s2-glanz { display: none; } }

.s2-tx h2 .de-max { background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%); }

.s2-plattform { margin-top: var(--s-5); }
.s2-plattform span { display: block; font-size: var(--t-small); color: var(--c-muted-dark); margin-bottom: var(--s-1); }
.s2-plattform ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.s2-plattform li { font-size: var(--t-3); font-weight: var(--w-strong); letter-spacing: -.015em; color: rgba(241,240,236,.42); }

.s2-plattform li { font-size: var(--t-lead); }
.s2-saar { position: absolute; z-index: 0; top: 8%; bottom: 8%; left: 50%; width: 42%; pointer-events: none;
  -webkit-mask: url('img/brand/saarland-umriss.svg') center / contain no-repeat; mask: url('img/brand/saarland-umriss.svg') center / contain no-repeat;
  background: radial-gradient(60% 60% at 50% 50%, rgba(74,125,255,.16), rgba(74,125,255,.05)); }
.s2-ads .s2-graph { z-index: 1; }

main:has(.s2-raster) { background: var(--c-bg-dark); }
.s2-hero { max-width: var(--w-wide); margin: calc(72px + var(--s-2)) auto 0; width: calc(100% - 2 * var(--s-2)); border-radius: var(--r-box); min-height: calc(100svh - 72px - 2 * var(--s-2)); }
.s2-raster { max-width: var(--w-wide); margin: 0 auto; }
.s2-trust { max-width: var(--w-wide); margin: 0 auto; width: calc(100% - 2 * var(--s-2)); border-radius: var(--r-box); box-sizing: border-box; }
.s2-buehne .s2-tx { max-width: none; padding-left: var(--s-7); padding-right: var(--s-7); }
.s2-hero-text { max-width: none; padding-left: var(--s-7); padding-right: var(--s-7); }
.s2-graph { right: 0; }
@media (max-width: 734px) { .s2-hero { margin-top: 64px; width: 100%; border-radius: 0; } .s2-buehne .s2-tx, .s2-hero-text { padding-left: var(--gut); padding-right: var(--gut); } .s2-trust { width: 100%; border-radius: 0; } }

.s2-rahmen { background: var(--c-bg-dark); padding: calc(72px + var(--s-2)) var(--s-2) 0; }
.s2-hero { margin: 0 auto; width: auto; max-width: calc(var(--w-wide) - 2 * var(--s-2)); min-height: calc(100svh - 72px - 2 * var(--s-2)); }
.s2-trust { width: auto; max-width: calc(var(--w-wide) - 2 * var(--s-2)); margin: 0 auto; }
main:has(.s2-trust) .s2-trust { margin-left: max(var(--s-2), calc((100% - var(--w-wide)) / 2 + var(--s-2))); margin-right: max(var(--s-2), calc((100% - var(--w-wide)) / 2 + var(--s-2))); }
@media (max-width: 734px) { .s2-rahmen { padding: 64px 0 0; } }
main > section.s2-rahmen { padding: calc(72px + var(--s-2)) var(--s-2) 0; }
@media (max-width: 734px) { main > section.s2-rahmen { padding: 64px 0 0; } }

.s2-saison { width: 88%; padding-bottom: var(--s-5); }
.s2-sbuehne { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-img); overflow: hidden; background: #132018; color: #efeadf; box-shadow: 0 30px 80px -30px rgba(0,0,0,.45); text-align: left; }
.s2-sb { position: absolute; inset: 0; clip-path: circle(0% at 70% 50%); animation: s2-kreis 12s infinite both; animation-delay: calc(var(--i) * 3s); }
.s2-sb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s2-sb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.1) 100%); }
@keyframes s2-kreis {
  0% { clip-path: circle(0% at 70% 50%); z-index: 2; }
  6% { clip-path: circle(150% at 70% 50%); z-index: 2; }
  25% { clip-path: circle(150% at 70% 50%); z-index: 2; }
  25.1%, 31% { clip-path: circle(150% at 70% 50%); z-index: 1; }
  31.1%, 100% { clip-path: circle(0% at 70% 50%); z-index: 0; }
}
.s2-st { position: absolute; z-index: 3; left: 7%; top: 44%; transform: translateY(-50%); width: 62%; opacity: 0; animation: s2-tafel 12s infinite both; animation-delay: calc(var(--i) * 3s); }
@keyframes s2-tafel { 0%, 3% { opacity: 0; transform: translateY(calc(-50% + 10px)); } 8%, 23% { opacity: 1; transform: translateY(-50%); } 26%, 100% { opacity: 0; transform: translateY(calc(-50% - 6px)); } }
.s2-marke { display: block; font-size: 11px; font-weight: 600; color: #e8a46b; margin-bottom: 6px; }
.s2-st b { display: block; font-family: "Newsreader", "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.02; letter-spacing: -.01em; }
.s2-st em { color: #e8a46b; }
.s2-st p { margin: 8px 0 12px; font-size: 13px; line-height: 1.35; color: rgba(239,234,223,.8); max-width: 30ch; }
.s2-knopf { display: inline-block; font-size: 11px; font-weight: 600; background: #a5571f; color: #fff; padding: 7px 12px; border-radius: 999px; }
.s2-sleiste { position: absolute; z-index: 3; left: 7%; right: 7%; bottom: 7%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.s2-sleiste span { font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding-top: 6px; border-top: 2px solid rgba(255,255,255,.25); color: rgba(239,234,223,.55); animation: s2-monat 12s infinite both; animation-delay: calc(var(--i) * 3s); }
@keyframes s2-monat { 0%, 4% { border-color: rgba(255,255,255,.25); color: rgba(239,234,223,.55); } 7%, 25% { border-color: #e8a46b; color: #efeadf; } 28%, 100% { border-color: rgba(255,255,255,.25); color: rgba(239,234,223,.55); } }
@media (prefers-reduced-motion: reduce) { .s2-sb, .s2-st, .s2-sleiste span { animation: none; } .s2-sb:first-child { clip-path: none; } .s2-st:nth-of-type(5) { opacity: 1; } }
.s2-kachel .s2-satz { max-width: 30ch; }
.s2-zwei { max-width: none; text-wrap: nowrap; }
.s2-zwei span { white-space: nowrap; }
@media (max-width: 1068px) { .s2-zwei { text-wrap: balance; } .s2-zwei span { white-space: normal; } }

.s2-sleiste { position: static; margin-top: var(--s-3); padding: 0 2%; }
.s2-sleiste span { font-size: 11px; color: var(--c-muted); border-top: 3px solid rgba(0,0,0,.1); border-radius: 2px; padding-top: 8px; text-align: center; animation-name: s2-monat-hell; }
@keyframes s2-monat-hell { 0%, 4% { border-color: rgba(0,0,0,.1); color: var(--c-muted); } 7%, 25% { border-color: var(--c-blau); color: var(--c-ink); } 28%, 100% { border-color: rgba(0,0,0,.1); color: var(--c-muted); } }

.s2-st { top: auto; bottom: 8%; left: 7%; transform: none; width: 64%; animation-name: s2-tafel-unten; }
@keyframes s2-tafel-unten { 0%, 3% { opacity: 0; transform: translateY(10px); } 8%, 23% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-6px); } }
.s2-sb::after { background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 100%), linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%); }

.s2-hero-schwarz { background: #000; }
.s2-hero-schwarz::after { background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 30%); }
.s2-hs > * { position: absolute; }
.s2-hs-raster { inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask: radial-gradient(60% 70% at 68% 45%, #000 0%, transparent 75%); mask: radial-gradient(60% 70% at 68% 45%, #000 0%, transparent 75%); }
.s2-hs-saar { top: 8%; bottom: 6%; left: 42%; right: 2%; background: radial-gradient(55% 55% at 50% 50%, rgba(74,125,255,.18), rgba(74,125,255,.04));
  -webkit-mask: url('img/brand/saarland-umriss.svg') center / contain no-repeat; mask: url('img/brand/saarland-umriss.svg') center / contain no-repeat; }
.s2-hs-licht { width: 70%; aspect-ratio: 1; right: -4%; top: 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(74,125,255,.55), rgba(74,125,255,.18) 45%, rgba(74,125,255,0) 70%); filter: blur(20px); animation: s2-licht 8s ease-in-out infinite; }
@keyframes s2-licht { 50% { opacity: .75; transform: scale(1.05); } }
.s2-hs-tim { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: drop-shadow(0 0 1px rgba(160,200,255,.9)) drop-shadow(0 0 24px rgba(74,125,255,.45)) brightness(.95) contrast(1.05); }
.s2-hero-schwarz h1 .de-max { background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%); }
@media (prefers-reduced-motion: reduce) { .s2-hs-licht { animation: none; } }

.s2-hero-schwarz { background: #0b0b0d; border: 1px solid rgba(255,255,255,.08); }
.s2-hs-tim { filter: drop-shadow(0 0 18px rgba(74,125,255,.22)) brightness(.96) contrast(1.04); }
.s2-hs-licht { background: radial-gradient(closest-side, rgba(74,125,255,.42), rgba(74,125,255,.14) 45%, rgba(74,125,255,0) 70%); }

.s2-hero-uni { background: #0b0b0d; border: 1px solid rgba(255,255,255,.08); flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-7) var(--s-5); gap: var(--s-7); }
.s2-hero-uni::after { display: none; }
.s2-uni-licht { position: absolute; left: 50%; bottom: -20%; width: 90%; aspect-ratio: 2.4; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(74,125,255,.35), rgba(74,125,255,0)); filter: blur(30px); pointer-events: none; }
.s2-uni-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.s2-uni-text h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: -.035em; max-width: 14ch; margin: 0 0 var(--s-4); text-wrap: balance; }
.s2-uni-text .lead { max-width: 34ch; margin: 0 0 var(--s-5); color: rgba(241,240,236,.8); text-wrap: balance; }
.s2-uni-text .s2-wege { justify-content: center; }
.s2-hero-uni h1 .de-max { background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%); }
.s2-uni { position: relative; z-index: 1; width: 100%; max-width: 1180px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); perspective: 1600px; }
.s2-uk { display: flex; flex-direction: column; gap: var(--s-2); text-decoration: none; color: var(--c-ink-dark); transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2,.7,.2,1); animation: s2-schweben 6s ease-in-out infinite; animation-delay: calc(var(--n) * -1.5s); }
.s2-uni { --rx: 0deg; --ry: 0deg; }
.s2-uk { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
@keyframes s2-schweben { 50% { translate: 0 -10px; } }
.s2-uk-bild { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: #111116; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(74,125,255,0); transition: box-shadow .4s, border-color .4s; }
.s2-uk:hover .s2-uk-bild { border-color: rgba(111,155,255,.6); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 40px -10px rgba(74,125,255,.6); }
.s2-uk span { font-size: var(--t-small); font-weight: var(--w-strong); color: rgba(241,240,236,.75); }
.s2-uk:hover span { color: #6f9bff; }

.s2-mw { position: absolute; inset: -20% -10%; display: flex; gap: 8px; transform: rotate(-10deg); }
.s2-mw > div { flex: 1; display: flex; flex-direction: column; gap: 8px; animation: s2-mw 26s linear infinite; }
.s2-mw > div.rev { animation-direction: reverse; animation-duration: 32s; }
.s2-mw img { width: 100%; border-radius: 6px; display: block; }
@keyframes s2-mw { to { transform: translateY(-50%); } }

.s2-mg { position: absolute; inset: 18% 0 0 0; }
.s2-mg svg { width: 100%; height: 100%; display: block; }

.s2-minij { position: absolute; inset: 0; width: 100%; height: 100%; }
.s2-uk-bild:has(.s2-minij) { background: radial-gradient(70% 70% at 50% 50%, #0d1430 0%, #08080b 80%); }

.s2-ms { position: absolute; inset: 0; }
.s2-ms .s2-sb img { width: 100%; height: 100%; object-fit: cover; }
.s2-ms .s2-sb::after { display: none; }
@media (prefers-reduced-motion: reduce) { .s2-uk, .s2-mw > div { animation: none; } }
@media (max-width: 1068px) { .s2-uni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.s2-hero-wort { background: #000; border: 1px solid rgba(255,255,255,.08); align-items: stretch; flex-direction: column; justify-content: space-between; }
.s2-hero-wort::after { display: none; }
.s2-hero-wort .s2-wandbox { position: absolute; inset: 0; }
.s2-hero-wort .web-wand { -webkit-mask: none; mask: none; }
.s2-hero-wort .web-tilt { inset: -30% -18%; }
.s2-wort-maske { position: absolute; inset: 0; background: #000; mix-blend-mode: multiply; display: flex; align-items: center; padding: 0 var(--s-7); }
.s2-wort-maske h1 { color: #fff; font-size: clamp(64px, 9.4vw, 150px); line-height: .92; letter-spacing: -.05em; font-weight: 800; margin: 0 0 var(--s-7); max-width: 9.5ch; }
.s2-wort-unten { position: absolute; z-index: 2; left: var(--s-7); right: var(--s-7); bottom: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.s2-wort-unten .lead { margin: 0; max-width: 34ch; color: rgba(241,240,236,.8); flex-basis: 100%; }
.s2-wort-unten .s2-wege { margin: 0; }
.s2-wort-unten .s2-google { margin: 0; }

.s2-hero-wort .s2-wandbox { background: #e9e7e1; }
.s2-wort-maske h1 { font-size: clamp(72px, 10.5vw, 176px); max-width: 11ch; }

.s2-wort-unten { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.s2-wort-unten .lead { flex-basis: auto; }
.s2-wort-unten, .s2-wort-unten * { opacity: 1 !important; visibility: visible !important; }
.s2-wort-unten .lead, .s2-wort-unten .btn { transform: none !important; }

.s2-hero-uni { background: none; border: 0; border-radius: 0; min-height: 0; padding: var(--s-7) var(--s-5) var(--s-7); gap: 0; }
.s2-uni-text .lead { max-width: none; text-wrap: initial; }

.s2-web { align-items: flex-end; }
.s2-web .s2-tx { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 0; padding-bottom: var(--s-6); }
.s2-web .s2-satz { margin-left: auto; margin-right: auto; max-width: none; }
.s2-web .s2-wege { justify-content: center; }
.s2-web .web-wand { -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.25) 62%, transparent 82%); mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.25) 62%, transparent 82%); }
.s2-web .web-tilt { inset: -30% -18%; }
.s2-web .web-wand { -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 28%, rgba(0,0,0,.2) 52%, transparent 68%); mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 28%, rgba(0,0,0,.2) 52%, transparent 68%); }

.s2-web .web-wand {
  -webkit-mask-image: radial-gradient(ellipse 34% 48% at 50% 100%, transparent 45%, rgba(0,0,0,.6) 72%, #000 100%), linear-gradient(180deg, #000 78%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 34% 48% at 50% 100%, transparent 45%, rgba(0,0,0,.6) 72%, #000 100%), linear-gradient(180deg, #000 78%, transparent 96%);
  mask-composite: intersect; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.s2-web .web-wand {
  -webkit-mask-image: radial-gradient(ellipse 50% 78% at 50% 100%, transparent 52%, rgba(0,0,0,.55) 76%, #000 100%), linear-gradient(180deg, #000 80%, transparent 97%);
  mask-image: radial-gradient(ellipse 50% 78% at 50% 100%, transparent 52%, rgba(0,0,0,.55) 76%, #000 100%), linear-gradient(180deg, #000 80%, transparent 97%);
}

.s2-ads { align-items: flex-end; }
.s2-ads .s2-tx { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 0 var(--s-7) var(--s-6); }
.s2-ads .s2-tx > * { max-width: none; }
.s2-ads .s2-satz { margin-left: auto; margin-right: auto; }
.s2-ads .s2-wege { justify-content: center; }
.s2-ads .s2-graph { left: 0; right: 0; top: 12%; bottom: 0; width: auto; height: auto; transform: none; }
.s2-ads .s2-saar { left: 18%; right: 18%; top: 4%; bottom: 4%; width: auto; }
.s2-ads .s2-graph, .s2-ads .s2-saar {
  -webkit-mask-image: radial-gradient(ellipse 50% 72% at 50% 100%, transparent 50%, rgba(0,0,0,.55) 76%, #000 100%);
  mask-image: radial-gradient(ellipse 50% 72% at 50% 100%, transparent 50%, rgba(0,0,0,.55) 76%, #000 100%); }
.s2-ads .s2-saar { -webkit-mask-image: url('img/brand/saarland-umriss.svg'), radial-gradient(ellipse 70% 72% at 50% 100%, transparent 45%, #000 100%); -webkit-mask-size: contain, 100% 100%; -webkit-mask-position: center, center; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-in;
  mask-image: url('img/brand/saarland-umriss.svg'), radial-gradient(ellipse 70% 72% at 50% 100%, transparent 45%, #000 100%); mask-size: contain, 100% 100%; mask-position: center, center; mask-repeat: no-repeat; mask-composite: intersect; }

.s2-sonder { align-items: flex-end; }
.s2-feld { cursor: default; }
.s2-sonder .s2-tx { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 0 var(--s-7) var(--s-6); }
.s2-sonder .s2-satz { margin-left: auto; margin-right: auto; max-width: none; }
.s2-sonder .s2-wege { justify-content: center; }
.s2-sonder .s2-feld { -webkit-mask-image: radial-gradient(ellipse 46% 56% at 50% 100%, transparent 50%, rgba(0,0,0,.55) 78%, #000 100%); mask-image: radial-gradient(ellipse 46% 56% at 50% 100%, transparent 50%, rgba(0,0,0,.55) 78%, #000 100%); }

.s2-saar-punkte { position: absolute; z-index: 1; left: 50%; top: 50%; height: 92%; aspect-ratio: 751 / 580; transform: translate(-50%, -50%); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, transparent 40%, #000 85%); mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, transparent 40%, #000 85%); }
.s2-saar-punkte i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 10px 3px rgba(255,255,255,.55), 0 0 28px 8px rgba(134,190,255,.35); animation: s2-anfrage 8.8s ease-in-out infinite; animation-delay: calc(var(--i) * .8s); }
@keyframes s2-anfrage { 0% { opacity: 0; transform: scale(.6); } 8% { opacity: .95; transform: scale(1); } 30% { opacity: .5; } 55%, 100% { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .s2-saar-punkte i { animation: none; opacity: .5; } }


.w2 { background: var(--c-bg-dark); color: var(--c-ink-dark); text-align: center; padding: var(--s-section) var(--gut); }
.w2 > * { margin-left: auto; margin-right: auto; }
.w2-titel { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: -.035em; max-width: 16ch; margin-top: 0; margin-bottom: var(--s-4); text-wrap: balance; }
.w2 .lead { max-width: 36ch; color: rgba(241,240,236,.8); text-wrap: balance; margin-top: 0; }
.w2-zeit { display: block; font-size: var(--t-small); font-weight: var(--w-strong); color: var(--c-muted-dark); letter-spacing: .02em; margin-bottom: var(--s-1); }
.w2-blau { color: #6f9bff; }

.w2-zeilen { max-width: 760px; margin-top: var(--s-7); display: grid; gap: var(--s-7); }
.w2-zeile { opacity: .12; transform: translateY(16px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.w2-zeile.an { opacity: 1; transform: none; }
.w2-zeile p { margin: 0; font-size: var(--t-2); line-height: var(--lh-2); letter-spacing: -.02em; font-weight: 500; color: rgba(241,240,236,.7); text-wrap: balance; }
.w2-zeile p b { color: var(--c-ink-dark); font-weight: var(--w-strong); }
.w2-schlag { margin-top: var(--s-section); }
.w2-schlag p { font-size: var(--t-hero); line-height: var(--lh-hero); font-weight: var(--w-strong); letter-spacing: -.035em; color: var(--c-ink-dark); }
.w2-schlag span { display: block; margin-top: var(--s-4); font-size: var(--t-lead); color: var(--c-muted-dark); }

.w2-frueher { padding-top: 0; }
.w2-zwei { max-width: var(--w-content); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); text-align: left; }
.w2-zwei > div { background: #0b0b0d; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-box); padding: var(--s-6) var(--s-5); }
.w2-zwei p { margin: 0; font-size: var(--t-3); line-height: var(--lh-3); color: rgba(241,240,236,.85); }
.w2-zwei > div:first-child p { color: rgba(241,240,236,.5); }
.w2-gross { margin-top: var(--s-7); margin-bottom: 0; font-size: var(--t-1); line-height: var(--lh-1); font-weight: var(--w-strong); letter-spacing: -.025em; max-width: 24ch; text-wrap: balance; }
.w2-gross .de-max { background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%); }

.w2-verstaerker { background: var(--c-bg); color: var(--c-ink); }
.w2-verstaerker .lead { color: var(--c-muted); }
.w2-fragen { list-style: none; padding: 0; margin-top: var(--s-6); margin-bottom: var(--s-6); max-width: var(--w-content); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.w2-fragen li { background: var(--c-card); border-radius: 999px; padding: 12px 20px; font-size: var(--t-body); font-weight: 500; }
.w2-klein { font-size: var(--t-small); color: var(--c-muted); max-width: 52ch; margin-top: 0; }
.w2 .w2-klein { color: var(--c-muted-dark); }
.w2-verstaerker .w2-klein { color: var(--c-muted); }
.w2-zitat { margin-top: var(--s-3); margin-bottom: 0; font-size: var(--t-1); line-height: var(--lh-1); font-weight: var(--w-strong); letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }

.w2-person { padding-bottom: var(--s-7); }
.w2-person-box { max-width: calc(var(--w-wide) - 2 * var(--s-2)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: #0b0b0d; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-box); overflow: hidden; text-align: left; }
.w2-person-box img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: center 30%; }
.w2-person-box > div { padding: var(--s-7); }
.w2-person-box h2 { font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: -.025em; margin: 0 0 var(--s-4); }
.w2-person-box .lead { margin-left: 0; }
.w2-person-box p:not(.lead) { color: var(--c-muted-dark); max-width: 40ch; }

.w2-vier { max-width: var(--w-stage); margin-top: var(--s-7); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); text-align: left; }
.w2-vier > div { background: #0b0b0d; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-card); padding: var(--s-5); }
.w2-vier b { display: block; font-size: var(--t-3); margin-bottom: var(--s-2); }
.w2-vier p { margin: 0; color: var(--c-muted-dark); }

.w2-wen { background: var(--c-bg); color: var(--c-ink); }
.w2-wen .lead { color: var(--c-ink); max-width: 30ch; }
.w2-kapazitaet { max-width: 48ch; color: var(--c-muted); margin-top: var(--s-5); }

.w2-faq { padding-bottom: 0; }
.w2-faq-liste { max-width: var(--w-stage); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); text-align: left; }
.w2-frage b { display: block; font-size: var(--t-3); line-height: var(--lh-3); }
.w2-frage p { margin: var(--s-2) 0 0; color: var(--c-muted-dark); }

.w2-weiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); max-width: calc(var(--w-wide) - 2 * var(--s-2)); padding-top: 0; }
.w2-weiter a { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-6) var(--s-5); background: #0b0b0d; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-box); text-decoration: none; color: var(--c-ink-dark); transition: border-color .3s; }
.w2-weiter a:hover { border-color: rgba(111,155,255,.6); }
.w2-weiter b { font-size: var(--t-2); }
.w2-weiter span { color: #6f9bff; }
@media (prefers-reduced-motion: reduce) { .w2-zeile { opacity: 1; transform: none; } }
@media (max-width: 734px) { .w2-zwei, .w2-person-box, .w2-vier, .w2-faq-liste, .w2-weiter { grid-template-columns: minmax(0, 1fr); } .w2-person-box img { min-height: 360px; } }
.w2-schlag p, .w2-zeile p { margin-left: auto; margin-right: auto; }
.w2-schlag p { max-width: 20ch; }
.w2-zeile p { max-width: 30ch; }
.w2-weiter > a { margin: 0; }
.w2-weiter { margin-left: auto; margin-right: auto; box-sizing: border-box; }
.w2-wen .w2-klein { color: var(--c-muted); }

.w2-trust { display: inline-flex !important; align-items: stretch; gap: 0; flex-wrap: wrap; margin-top: var(--s-5); padding: 0; background: rgba(10,12,16,.38); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); overflow: hidden; }
.w2-t { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 22px; color: #fff; text-decoration: none; border-left: 1px solid rgba(255,255,255,.14); }
.w2-t:first-child { border-left: 0; }
.w2-t b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-3); line-height: 1; font-weight: var(--w-strong); letter-spacing: -.01em; white-space: nowrap; }
.w2-t b img { width: 18px; height: 18px; }
.w2-t b i { font-style: normal; font-size: 12px; letter-spacing: 1px; color: #fbbc04; }
.w2-t span { font-size: 12px; line-height: 1.3; color: rgba(255,255,255,.72); max-width: 16ch; }
a.w2-t:hover span { color: #fff; }
.w2-t-saar { background: #fff; padding: 10px 18px; }
.w2-t-saar img { height: 40px; width: auto; display: block; }
@media (max-width: 734px) { .w2-t { padding: 12px 14px; } .w2-t b { font-size: 21px; } }

.w2-t span { max-width: none; white-space: nowrap; }
.w2-t { justify-content: center; }

.w2-h1-zwei { display: block; color: rgba(255,255,255,.62); }

.w2-story { max-width: var(--w-stage); margin-top: var(--s-7); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-7); text-align: left; }
.w2-story .w2-zeilen { margin: 0; gap: 0; }
.w2-story .w2-zeile { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.w2-story .w2-zeile p { margin-left: 0; max-width: 22ch; }
.w2-handy-spur { position: relative; }
.w2-handy { position: sticky; top: calc(50vh - 310px); width: 300px; height: 620px; margin-left: auto; margin-right: auto; border-radius: 48px; background: #1d1d1f; padding: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 50px 120px -40px rgba(74,125,255,.45); }
.w2-schirm { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #000; }
.w2-sch { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transform: scale(.98); }
.w2-handy[data-schritt="0"] .w2-sch[data-schritt="0"], .w2-handy[data-schritt="1"] .w2-sch[data-schritt="1"], .w2-handy[data-schritt="2"] .w2-sch[data-schritt="2"],
.w2-handy[data-schritt="3"] .w2-sch[data-schritt="3"], .w2-handy[data-schritt="4"] .w2-sch[data-schritt="4"] { opacity: 1; transform: none; }
.w2-s { position: absolute; inset: 0; padding: 48px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.w2-s small { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 10px; color: rgba(0,0,0,.35); }

.w2-s-sperr { align-items: center; padding-top: 90px; background: radial-gradient(120% 80% at 50% 0%, #2a3350, #0b0d14); color: #fff; }
.w2-s-sperr b { font-size: 64px; font-weight: 600; letter-spacing: -.02em; }
.w2-s-sperr span { font-size: 13px; color: rgba(255,255,255,.7); }

.w2-s-suche { background: #fff; }
.w2-such { display: flex; align-items: center; gap: 8px; border: 1px solid #ddd; border-radius: 999px; padding: 10px 14px; font-size: 13px; color: #222; }
.w2-such i { width: 12px; height: 12px; border: 2px solid #888; border-radius: 50%; flex: none; }
.w2-tippen { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid #4A7DFF; width: 0; }
.w2-handy[data-schritt="1"] .w2-tippen { animation: w2-tippen 1.6s steps(28) .3s forwards; }
@keyframes w2-tippen { to { width: 100%; } }
.w2-erg { height: 70px; border-radius: 12px; background: linear-gradient(#e9eef8 0 14px, transparent 14px), linear-gradient(#f2f2f2 0 0); background-size: 60% 14px, 100% 100%; background-repeat: no-repeat; background-position: 12px 12px, 0 0; }

.w2-s-alt { background: #e8e4d8; font-family: Georgia, serif; }
.w2-alt-kopf { background: #6b7d5b; color: #fff; font-size: 11px; padding: 8px; }
.w2-alt-bild { height: 120px; background: repeating-linear-gradient(45deg, #cfc9b8 0 8px, #d8d2c2 8px 16px); }
.w2-alt-text { height: 60px; background: repeating-linear-gradient(#b9b3a4 0 3px, transparent 3px 9px); }
.w2-alt-text.kurz { height: 30px; width: 60%; }
.w2-handy[data-schritt="2"] .w2-s-alt { filter: saturate(.6); }

.w2-s-vergl { background: #f4f4f6; }
.w2-karte-v { height: 110px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px -10px rgba(0,0,0,.25); transform: translateX(110%); }
.w2-handy[data-schritt="3"] .w2-karte-v { animation: w2-wisch .6s cubic-bezier(.2,.7,.2,1) forwards; }
.w2-handy[data-schritt="3"] .w2-karte-v:nth-child(2) { animation-delay: .25s; }
.w2-handy[data-schritt="3"] .w2-karte-v:nth-child(3) { animation-delay: .5s; }
.w2-handy[data-schritt="3"] .w2-karte-v:nth-child(4) { animation-delay: .75s; }
@keyframes w2-wisch { to { transform: none; } }

.w2-s-neu { background: #fff; padding-top: 0; }
.w2-neu-bild { height: 230px; margin: 0 -18px; background: linear-gradient(160deg, #4A7DFF, #86dcf5); }
.w2-neu-titel { height: 22px; width: 80%; border-radius: 6px; background: #111; margin-top: 6px; }
.w2-neu-text { height: 40px; background: repeating-linear-gradient(#d9dce3 0 6px, transparent 6px 14px); }
.w2-neu-knopf { height: 40px; width: 55%; border-radius: 999px; background: #4A7DFF; }
.w2-toast { position: absolute; left: 14px; right: 14px; top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(30,30,32,.92); color: #fff; font-size: 13px; font-weight: 600; transform: translateY(-140%); }
.w2-handy[data-schritt="4"] .w2-toast { animation: w2-toast .5s cubic-bezier(.2,1.3,.4,1) 1s forwards; }
@keyframes w2-toast { to { transform: none; } }
@media (max-width: 1068px) { .w2-story { grid-template-columns: minmax(0, 1fr); } .w2-handy-spur { display: none; } .w2-story .w2-zeile { min-height: 0; padding: var(--s-5) 0; } }
@media (prefers-reduced-motion: reduce) { .w2-tippen { width: 100%; } .w2-karte-v, .w2-toast { transform: none; } }

.w2-fragen li { display: inline-flex; align-items: center; gap: 10px; transition: background .4s, color .4s; }
.w2-fragen li i { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #d9d8d3; flex: none; transition: background .4s; }
.w2-fragen li i::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-style: normal; color: #fff; }
.w2-fragen.an li { animation: w2-haken-li .01s linear forwards; animation-delay: calc(.4s + var(--i) * .45s); }
.w2-fragen.an li i { animation: w2-haken-i .4s ease forwards; animation-delay: calc(.4s + var(--i) * .45s); }
.w2-fragen.an li i::after { animation: w2-haken-z .01s linear forwards; animation-delay: calc(.4s + var(--i) * .45s); }
@keyframes w2-haken-i { to { background: var(--c-blau); } }
@keyframes w2-haken-z { to { content: "✓"; } }
@keyframes w2-haken-li { to { background: #fff; } }
.w2-bruecke { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--c-ink); max-width: 34ch; margin-top: 0; margin-bottom: var(--s-6); text-wrap: balance; }
.w2-anruf { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 999px; background: #1d1d1f; color: #fff; text-align: left; margin-bottom: var(--s-4); }
.w2-anruf i { width: 30px; height: 30px; border-radius: 50%; background: #34c759; flex: none; box-shadow: 0 0 0 0 rgba(52,199,89,.6); animation: w2-klingeln 1.6s ease-out infinite; }
.w2-anruf span { display: flex; flex-direction: column; font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.3; }
.w2-anruf b { font-size: 14px; color: #fff; }
@keyframes w2-klingeln { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.55); } 100% { box-shadow: 0 0 0 14px rgba(52,199,89,0); } }
.w2-zitat .de-max { background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #0036F7 0%, #4A7DFF 35%, #5f9dff 60%, #4A7DFF 80%, #0036F7 100%); }
@media (prefers-reduced-motion: reduce) { .w2-anruf i { animation: none; } .w2-fragen li i { background: var(--c-blau); } .w2-fragen li i::after { content: "✓"; } }
.w2-zitat .de-max { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.w2-faelle .lead { margin-bottom: var(--s-5); }
.w2-fall-navi { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-7); }
.w2-fall-navi a { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: rgba(241,240,236,.8); text-decoration: none; font-size: var(--t-small); }
.w2-fall-navi a:hover { border-color: #6f9bff; color: #fff; }
.w2-fall { max-width: calc(var(--w-wide) - 2 * var(--s-2)); margin: 0 auto var(--s-2); background: #0b0b0d; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-box); padding: var(--s-7); text-align: left; scroll-margin-top: 100px; }
.w2-fall-kopf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--s-6); align-items: end; margin-bottom: var(--s-6); }
.w2-fall-kopf h3 { margin: 0; font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: -.025em; text-wrap: balance; }
.w2-fall-zahl { text-align: right; }
.w2-fall-zahl b { display: block; font-size: clamp(56px, 6vw, 96px); line-height: .95; letter-spacing: -.04em; font-weight: var(--w-strong); background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%); }
.w2-fall-zahl span { display: block; margin-top: var(--s-1); color: var(--c-muted-dark); font-size: var(--t-lead); }
.w2-fall-zahl .w2-fall-zahl-nur { font-size: var(--t-3); color: rgba(241,240,236,.85); }

.w2-fall-buehne { position: relative; padding-right: 8%; }
.w2-fall-schirm { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-img); overflow: hidden; background: #111; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9); }
.w2-fall-schirm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.w2-mit-vor .w2-fall-nach { clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.w2-mit-vor .w2-fall-schirm::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 100%); width: 2px; background: #fff; box-shadow: 0 0 24px 4px rgba(111,155,255,.8); opacity: calc(1 - abs(var(--p, 0) - .5) * 2); pointer-events: none; }
.w2-fall-handy { position: absolute; right: 0; bottom: -6%; width: 17%; border-radius: 18px; border: 6px solid #1d1d1f; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }
.w2-fall-stand { margin: var(--s-3) 0 0; font-size: var(--t-small); display: flex; gap: var(--s-2); }
.w2-fall-stand span { color: var(--c-muted-dark); transition: color .3s; }
.w2-fall-stand .w2-stand-vor { color: #fff; }
.w2-fall-buehne.ist-nach + .w2-fall-stand .w2-stand-vor { color: var(--c-muted-dark); }
.w2-fall-buehne.ist-nach + .w2-fall-stand .w2-stand-nach { color: #fff; }
.w2-fall-text { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.w2-fall-text h4 { margin: 0 0 var(--s-2); font-size: var(--t-3); }
.w2-fall-text p { margin: 0; color: rgba(241,240,236,.72); font-size: var(--t-body); line-height: 1.55; }
.w2-fall .fall-zitat { margin: var(--s-7) 0 0; font-size: var(--t-2); line-height: var(--lh-2); font-weight: var(--w-strong); letter-spacing: -.02em; max-width: 30ch; }
.w2-fall .fall-zitat cite { display: block; margin-top: var(--s-2); font-size: var(--t-small); font-style: normal; font-weight: 400; color: var(--c-muted-dark); letter-spacing: 0; }
.w2-fall .fall-mehr { margin-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--s-3); }
.w2-fall .fall-mehr summary { cursor: pointer; color: #6f9bff; font-size: var(--t-body); list-style: none; }
.w2-fall .fall-mehr summary::after { content: " ›"; }
.w2-fall .fall-mehr[open] summary::after { content: " ⌄"; }
.w2-fall .fall-mehr p { color: rgba(241,240,236,.72); max-width: 70ch; }
@media (max-width: 1068px) { .w2-fall { padding: var(--s-5); } .w2-fall-kopf, .w2-fall-text { grid-template-columns: minmax(0, 1fr); } .w2-fall-zahl { text-align: left; } }

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.w2-mit-vor { transition: --p 1.4s cubic-bezier(.65,0,.25,1); }
.w2-fall-stand { gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); display: inline-flex; }
.w2-fall-stand button { font: inherit; font-size: var(--t-small); padding: 8px 18px; border-radius: 999px; border: 0; background: transparent; color: var(--c-muted-dark); cursor: pointer; transition: background .3s, color .3s; }
.w2-fall-stand .w2-stand-vor, .w2-fall-buehne.ist-nach + .w2-fall-stand .w2-stand-nach { background: rgba(255,255,255,.14); color: #fff; }
.w2-fall-buehne.ist-nach + .w2-fall-stand .w2-stand-vor { background: transparent; color: var(--c-muted-dark); }
.w2-fall-zahl b { line-height: 1.12; padding-bottom: .06em; }

.w2-fall-punkte { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.w2-fall-punkte li { position: relative; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 30px); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-card); font-size: var(--t-body); line-height: 1.45; color: var(--c-ink-dark); font-weight: 500; }
.w2-fall-punkte li::before { content: "✓"; position: absolute; left: var(--s-4); top: var(--s-4); width: 20px; height: 20px; border-radius: 50%; background: var(--c-blau); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.w2-collage { position: relative; margin-top: var(--s-6); height: 380px; display: flex; justify-content: center; align-items: center; gap: 0; perspective: 1600px; overflow: hidden; border-radius: var(--r-img);
  background: radial-gradient(70% 90% at 50% 50%, rgba(74,125,255,.12), rgba(74,125,255,0)); }
.w2-collage img { position: relative; border-radius: 10px; box-shadow: 0 30px 60px -25px rgba(0,0,0,.9); object-fit: cover; object-position: top; margin: 0 -18px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.w2-c-s { width: 30%; max-width: 420px; height: 240px; }
.w2-c-h { width: 12%; max-width: 160px; height: 330px; border: 5px solid #1d1d1f; border-radius: 22px !important; z-index: 2; }
.w2-collage img:nth-child(1) { transform: rotate(-6deg) translateY(16px); }
.w2-collage img:nth-child(2) { transform: rotate(-2deg) translateY(-6px); }
.w2-collage img:nth-child(3) { transform: translateY(-14px); z-index: 1; }
.w2-collage img:nth-child(4) { transform: rotate(3deg) translateY(4px); }
.w2-collage img:nth-child(5) { transform: rotate(6deg) translateY(18px); }
.w2-fall:hover .w2-collage img:nth-child(1) { transform: rotate(-8deg) translate(-12px, 12px); }
.w2-fall:hover .w2-collage img:nth-child(5) { transform: rotate(8deg) translate(12px, 14px); }
@media (max-width: 1068px) { .w2-fall-punkte { grid-template-columns: minmax(0, 1fr); } .w2-collage { height: 260px; } .w2-c-s { height: 160px; } .w2-c-h { height: 220px; } }

.w2-person-buehne { position: relative; max-width: calc(var(--w-wide) - 2 * var(--s-2)); min-height: 820px; margin: 0 auto; border-radius: var(--r-box); overflow: hidden; background: #0b0b0d; border: 1px solid rgba(255,255,255,.08); display: flex; align-items: flex-end; justify-content: center; }
.w2-person-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(1) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 46% 52% at 50% 100%, transparent 55%, rgba(0,0,0,.55) 80%, #000 100%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 46% 52% at 50% 100%, transparent 55%, rgba(0,0,0,.55) 80%, #000 100%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.w2-person-tx { position: relative; z-index: 1; text-align: center; padding: 0 var(--s-7) var(--s-6); display: flex; flex-direction: column; align-items: center; }
.w2-person-tx h2 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: -.035em; margin: 0 0 var(--s-4); }
.w2-person-tx h2 .de-max { background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%); }
.w2-person-tx .lead { max-width: 34ch; margin: 0 auto var(--s-2); color: rgba(241,240,236,.85); }
.w2-person-klein { max-width: 46ch; margin: 0 auto; color: var(--c-muted-dark); }
.w2-person-name { margin: var(--s-4) auto 0; font-size: var(--t-small); font-weight: var(--w-strong); color: rgba(241,240,236,.6); letter-spacing: .02em; }
.w2-person-tx .s2-wege { justify-content: center; margin-top: var(--s-3); }
@media (max-width: 734px) { .w2-person-buehne { min-height: 680px; } .w2-person-tx { padding: 0 var(--gut) var(--s-5); } }

.w2-person-buehne { min-height: 920px; }
.w2-person-bild { inset: 0 auto auto 50%; transform: translateX(-50%); width: min(720px, 70%); height: 74%; object-position: center 28%;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 35%, #000 45%, transparent 75%); mask-image: radial-gradient(ellipse 60% 75% at 50% 35%, #000 45%, transparent 75%); -webkit-mask-composite: source-over; mask-composite: add; }

.w2-person-licht { position: absolute; left: 50%; top: 6%; width: 60%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(74,125,255,.42), rgba(74,125,255,.12) 50%, rgba(74,125,255,0) 72%); filter: blur(24px); pointer-events: none; }
.w2-person-bild { inset: 0 auto auto 50%; transform: translateX(-50%); width: 100%; height: 78%; object-fit: cover; object-position: 80% 0; filter: saturate(.85) contrast(1.03);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%); mask-image: linear-gradient(180deg, #000 55%, transparent 96%); }

.w2-person-bild { top: -4%; left: 50%; right: auto; bottom: auto; width: 190%; height: auto; max-width: none; transform: translateX(-81.5%); -webkit-mask-image: none; mask-image: none; }
.w2-person-buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0b0b0d 0%, #0b0b0d 22%, rgba(11,11,13,.85) 38%, rgba(11,11,13,0) 62%); pointer-events: none; }
.w2-person-tx { z-index: 2; }
.w2-person-licht { width: 70%; top: 0; }
.w2-person-bild { width: min(1180px, 84%); top: 0; transform: translateX(-82%); }
.w2-person-buehne::after { background: linear-gradient(0deg, #0b0b0d 0%, #0b0b0d 30%, rgba(11,11,13,.8) 42%, rgba(11,11,13,0) 58%); }
.w2-person-licht { width: 46%; top: 2%; }
.w2-person-bild { top: 5%; clip-path: inset(0 4% 0 0); }
.w2-person-bild { clip-path: inset(2% 4% 0 0); }

.w2-person { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.w2-person-ruhig { max-width: var(--w-content); grid-template-columns: 220px minmax(0, 1fr); }
.w2-person-ruhig img { min-height: 0; height: 100%; aspect-ratio: 1; object-position: center 25%; filter: grayscale(1); }
.w2-person-ruhig > div { padding: var(--s-5) var(--s-6); }
.w2-person-ruhig h2 { font-size: var(--t-3); line-height: var(--lh-3); margin: 0 0 var(--s-2); letter-spacing: -.01em; }
.w2-person-ruhig p { margin: 0; color: var(--c-muted-dark); font-size: var(--t-body); max-width: 56ch; }
.w2-person-ruhig .s2-wege { margin-top: var(--s-3); }
@media (max-width: 734px) { .w2-person-ruhig { grid-template-columns: minmax(0, 1fr); } .w2-person-ruhig img { aspect-ratio: 16 / 9; } }
.w2-person-ruhig h2 { max-width: none; }

.w2-person-ruhig { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
.w2-person-ruhig img { order: 2; aspect-ratio: auto; height: 100%; min-height: 300px; object-position: center 30%; }
.w2-person-ruhig > div { order: 1; padding: var(--s-6); }
.w2-person-ruhig p + p { margin-top: var(--s-2); }
@media (max-width: 734px) { .w2-person-ruhig img { order: 0; aspect-ratio: 4 / 3; } }
.w2-person-ruhig p { max-width: none; }

.w2-person-ruhig .w2-person-sub { color: var(--c-text-dark, #f5f5f7); font-size: var(--t-lead); line-height: 1.35; font-weight: 500; margin: 0 0 var(--s-3); }
.w2-person-ruhig .w2-person-pointe { margin-top: var(--s-4); color: var(--c-blau); font-weight: 500; }
.w2-person .w2-person-ruhig p.w2-person-sub { color: #f5f5f7 !important; }
.w2-person .w2-person-ruhig p.w2-person-pointe { color: var(--c-blau) !important; }
.w2-person .s2-link.w2-link-leise { color: var(--c-muted-dark) !important; }
.w2-person .s2-link.w2-link-leise:hover { color: #f5f5f7 !important; }

.w2-schritte { list-style: none; counter-reset: w2s; max-width: var(--w-content); margin: var(--s-6) auto 0; padding: 0; text-align: left; }
.w2-schritte li { counter-increment: w2s; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid rgba(255,255,255,.1); }
.w2-schritte li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.w2-schritte b { font-size: var(--t-lead); font-weight: 600; color: #f5f5f7; }
.w2-schritte b::before { content: counter(w2s) "  "; color: var(--c-blau); white-space: pre; }
.w2-schritte p { margin: 0; max-width: none; color: var(--c-muted-dark); }
@media (max-width: 734px) { .w2-schritte li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }
.w2-rest .w2-titel { max-width: none; }

.w2-tradein { list-style: none; margin: var(--s-6) auto 0; padding: 0; max-width: var(--w-wide); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); text-align: left; position: relative; }
.w2-tradein::before { content: ""; position: absolute; top: 18px; left: 40px; right: 0; height: 1px; background: linear-gradient(90deg, rgba(74,125,255,.5), rgba(255,255,255,.08)); }
.w2-tradein li { position: relative; }
.w2-tradein svg { width: 36px; height: 36px; fill: none; stroke: var(--c-blau); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: #000; padding-right: 8px; box-sizing: content-box; position: relative; }
.w2-tradein .w2-schritt-nr { display: block; margin-top: var(--s-3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted-dark); }
.w2-tradein b { display: block; margin-top: var(--s-1); font-size: var(--t-lead); line-height: 1.25; font-weight: 600; color: #f5f5f7; }
.w2-tradein p { margin: var(--s-2) 0 0; max-width: none; font-size: var(--t-small); line-height: 1.5; color: var(--c-muted-dark); }
@media (max-width: 1068px) { .w2-tradein { grid-template-columns: repeat(3, minmax(0, 1fr)); } .w2-tradein::before { display: none; } }
@media (max-width: 734px) { .w2-tradein { grid-template-columns: minmax(0, 1fr); } }
.w2-tradein::before { right: calc((100% - 4 * var(--s-5)) / 5 - 44px); }

.w2-tradein { grid-template-rows: auto auto auto; text-align: center; }
.w2-tradein li { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; row-gap: 0; }
.w2-tradein svg { padding: 0 10px; margin: 0; }
.w2-tradein b { margin-top: var(--s-3); text-wrap: balance; }
.w2-tradein p { text-wrap: pretty; }
.w2-tradein::before { left: 10%; right: 10%; }
@media (max-width: 1068px) { .w2-tradein li { grid-row: auto; display: block; } }

.w2-wen-jobs { padding-block: calc(var(--s-7) * 1.6); }
.w2-wen-jobs .w2-titel { font-size: var(--t-hero); line-height: 1.02; max-width: none; }
.w2-wen-jobs .lead { margin: var(--s-4) auto 0; max-width: 34ch; color: var(--c-muted); }
.w2-wen-knapp { margin: calc(var(--s-7) * 1.3) auto 0; max-width: none; font-size: var(--t-1); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; }
.w2-wen-knapp .de-max { background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #0036F7 0%, #4A7DFF 35%, #5f9dff 60%, #4A7DFF 80%, #0036F7 100%); }
.w2-wen-grund { margin: var(--s-3) auto 0; max-width: none; font-size: var(--t-lead); color: var(--c-ink); }
.w2-wen-jobs .w2-wen-pointe { margin: calc(var(--s-7) * 1.1) auto 0; max-width: none; font-size: var(--t-small); color: var(--c-muted); }

.w2-wen-hinweis { padding-block: var(--s-7); }
.w2-wen-zeile { max-width: var(--w-content); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-6); align-items: start; text-align: left; }
.w2-wen-zeile h2 { margin: 0; max-width: none; font-size: var(--t-2); line-height: 1.08; letter-spacing: -.02em; color: var(--c-ink); }
.w2-wen-zeile p { margin: 0; max-width: none; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
.w2-wen-zeile p + p { margin-top: var(--s-2); }
@media (max-width: 734px) { .w2-wen-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }

.w2-faq-liste { max-width: var(--w-wide); margin-inline: auto; text-align: center; grid-template-rows: auto auto; }
.w2-frage { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; justify-items: center; }
.w2-frage b { font-size: var(--t-lead); line-height: 1.25; font-weight: 600; color: #f5f5f7; text-wrap: balance; }
.w2-frage p { max-width: none; font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; }
@media (max-width: 734px) { .w2-frage { grid-row: auto; display: block; } }

.o2-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-7); align-items: center; max-width: var(--w-stage); margin: 0 auto; box-sizing: content-box; text-align: left; padding-top: calc(var(--s-section) + 40px); }
.o2-hero .eyebrow { margin: 0 0 var(--s-3); color: var(--c-muted-dark); }
.o2-hero h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: -.035em; margin: 0 0 var(--s-4); max-width: 14ch; }
.o2-hero .lead { color: var(--c-muted-dark); max-width: 34ch; margin: 0 0 var(--s-5); }
.o2-plaetze { display: flex; gap: var(--s-6); margin-top: var(--s-6); }
.o2-plaetze b { display: block; font-size: var(--t-2); line-height: 1; letter-spacing: -.02em; }
.o2-plaetze span { display: block; margin-top: 6px; font-size: var(--t-small); color: var(--c-muted-dark); }
.o2-telefon { justify-self: center; }
.o2-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--w-content); margin-top: var(--s-6); }
.o2-vergleich { max-width: var(--w-content); margin: var(--s-6) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); text-align: left; }
.o2-weg h3 { font-size: var(--t-1); line-height: 1; letter-spacing: -.03em; margin: 0; }
.o2-weg-zitat { margin: var(--s-3) 0 0; color: var(--c-muted-dark); font-style: italic; max-width: none; }
.o2-weg-fuer { margin: var(--s-5) 0 var(--s-2); font-weight: 600; max-width: none; }
.o2-weg ul { margin: 0; padding-left: 1.1em; color: var(--c-muted-dark); }
.o2-weg li + li { margin-top: 4px; }
.o2-weg dl { margin: var(--s-5) 0 0; }
.o2-weg dl > div { padding: var(--s-2) 0; border-top: 1px solid rgba(255,255,255,.1); }
.o2-weg dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted-dark); }
.o2-weg dd { margin: 4px 0 0; }
.o2-weg-plaetze { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-small); color: var(--c-muted-dark); max-width: none; }
.o2-listen { margin-top: var(--s-6); }
.o2-listen h3 { margin: 0 0 var(--s-2); font-size: var(--t-lead); color: var(--c-ink); }
.o2-listen ul { margin: 0; padding-left: 1.1em; color: var(--c-muted); line-height: 1.6; }
@media (max-width: 1068px) { .o2-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 734px) { .o2-drei, .o2-vergleich { grid-template-columns: minmax(0, 1fr); } }
.o2-bald { max-width: none; margin: var(--s-6) auto 0; color: var(--c-muted-dark); font-size: var(--t-small); }
.o2-karte .dt-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.o2-geraet { position: relative; justify-self: center; width: min(340px, 80vw); aspect-ratio: 968 / 2000; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.o2-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.o2-schirm { position: absolute; left: 4.13%; right: 4.13%; top: 1.65%; bottom: 1.7%; border-radius: 15% / 6.9%; overflow: hidden; background: #fff; color: #111; text-align: left; font: 13px/1.4 var(--f-body); z-index: 1; }
.o2-schirm .ad { padding-top: 15%; }
.o2-schirm .ad-head { padding: 0 14px 10px; }
.o2-schirm .ad > p { margin: 0 14px 12px; font-size: 13px; }
.o2-schirm .ad small { padding-bottom: 22px; text-align: center; }
.o2-status { position: absolute; top: 0; left: 0; right: 0; height: 13%; max-height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 0 9% 0 11%; font: 600 15px/1 var(--f-body); color: #111; z-index: 1; }
.o2-status span { display: flex; gap: 6px; align-items: center; }
.o2-netz { width: 17px; height: 11px; fill: currentColor; }
.o2-akku { width: 25px; height: 12px; fill: currentColor; }
.o2-geraet-box { margin: 0; justify-self: center; display: flex; flex-direction: column; align-items: center; }
.o2-demo { margin-top: var(--s-3); font-size: 12px; color: var(--c-muted-dark); }
.o2-schirm .ad-cta { margin-bottom: 9%; }
.o2-warum .w2-titel { max-width: none; }

.o2-kacheln { max-width: var(--w-stage); margin: var(--s-6) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); text-align: left; }
.o2-kachel { background: var(--c-card-dark); border-radius: var(--r-box); padding: var(--s-6) var(--s-5); }
.o2-kachel svg { width: 40px; height: 40px; fill: none; stroke: var(--c-blau); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.o2-kachel h3 { margin: var(--s-4) 0 var(--s-3); font-size: var(--t-2); line-height: 1.1; letter-spacing: -.02em; color: #f5f5f7; text-wrap: balance; }
.o2-kachel p { margin: 0; max-width: none; color: var(--c-muted-dark); font-size: var(--t-body); line-height: 1.5; }
@media (max-width: 1068px) { .o2-kacheln { grid-template-columns: minmax(0, 1fr); max-width: var(--w-content); } }
.o2-kacheln { grid-template-rows: auto auto auto; }
.o2-kachel { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
@media (max-width: 1068px) { .o2-kachel { grid-row: auto; display: block; } }

.o2-handys { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin: var(--s-6) auto var(--s-5); padding-top: var(--s-4); }
.o2-geraet-klein { width: clamp(150px, 19vw, 230px); margin: 0 -14px; transform: rotate(calc((var(--n) - 1.5) * 4deg)) translateY(calc(abs(var(--n) - 1.5) * 18px)); filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.o2-geraet-klein:nth-child(2), .o2-geraet-klein:nth-child(3) { z-index: 1; }
.o2-geraet-klein .o2-schirm img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 734px) { .o2-geraet-klein:nth-child(n+3) { display: none; } }
.o2-geraet-klein { transform: none; }
.o2-geraet-klein:nth-child(1) { transform: rotate(-6deg) translateY(28px); }
.o2-geraet-klein:nth-child(2) { transform: rotate(-2deg) translateY(6px); }
.o2-geraet-klein:nth-child(3) { transform: rotate(2deg) translateY(6px); }
.o2-geraet-klein:nth-child(4) { transform: rotate(6deg) translateY(28px); }

.o2-fall-zwei { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: start; }
.o2-stapel { position: relative; height: 100%; min-height: 1400px; perspective: 1800px; perspective-origin: 30% 20%; overflow: hidden; border-radius: 12px; }
.o2-blatt { position: absolute; top: calc(var(--n) * 46px); left: calc(var(--n) * 17%); width: 46%; height: auto; border-radius: 6px; transform-origin: left top; transform: rotateY(28deg) rotateZ(-2deg); box-shadow: -20px 30px 60px rgba(0,0,0,.65); z-index: calc(10 - var(--n)); }
.o2-fall-inhalt .w2-fall-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.o2-fall-inhalt .w2-fall-zahl { text-align: left; }
.o2-fall-inhalt .w2-fall-punkte { grid-template-columns: minmax(0, 1fr); }
.o2-fall-inhalt .w2-fall-text { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-6); }
@media (max-width: 1068px) { .o2-fall-zwei { grid-template-columns: minmax(0, 1fr); } .o2-stapel { min-height: 0; height: 520px; } }
.o2-blatt { width: 41%; left: calc(var(--n) * 19%); }

.o2-blatt { z-index: calc(1 + var(--n)); transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease, box-shadow .6s ease; cursor: zoom-in; }
.o2-stapel:has(.o2-blatt:hover) .o2-blatt:not(:hover) { filter: brightness(.55); }
.o2-blatt:hover { z-index: 20; transform: rotateY(8deg) rotateZ(0deg) translateY(-18px) translateX(-6%); box-shadow: -10px 40px 80px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) { .o2-blatt { transition: none; } }
.o2-blatt { top: calc(28px + var(--n) * 46px); }
.o2-blatt:hover { transform: rotateY(8deg) translateY(-20px); }

.o2-stimme { grid-column: 1 / -1; margin: var(--s-6) auto 0; max-width: 760px; text-align: center; }
.o2-stimme-foto { width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; overflow: hidden; background: #2a2a2d; display: grid; place-items: center; }
.o2-stimme-foto img { width: 100%; height: 100%; object-fit: cover; }
.o2-stimme-foto span { font-size: var(--t-2); color: var(--c-muted-dark); font-weight: 600; }
.o2-stimme figcaption { margin-top: var(--s-3); }
.o2-stimme figcaption b { display: block; font-size: var(--t-lead); color: #f5f5f7; }
.o2-stimme figcaption span { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--c-muted-dark); }
.o2-stimme blockquote { margin: var(--s-4) 0 0; font-size: var(--t-body); line-height: 1.65; color: rgba(241,240,236,.85); text-wrap: pretty; }

.o2-blase { position: relative; margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); background: #1d1d1f; border-radius: 22px; }
.o2-blase::after { content: ""; position: absolute; left: 36px; bottom: -10px; width: 22px; height: 22px; background: #1d1d1f; transform: rotate(45deg); border-radius: 3px; }
.o2-sterne { color: #f5b400; letter-spacing: 2px; font-size: 15px; }
.o2-blase blockquote { margin: var(--s-2) 0 0; font-size: var(--t-lead); line-height: 1.4; color: #f5f5f7; }
.o2-blase figcaption { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-muted-dark); }
.o2-fall .w2-fall-kopf { margin-bottom: var(--s-5); }
.o2-umsetzung { max-width: calc(var(--w-wide) - 2 * var(--s-2)); margin: var(--s-5) auto 0; text-align: left; columns: 2; column-gap: var(--s-6); padding: 0 var(--s-7); }
.o2-umsetzung h4 { column-span: all; margin: 0 0 var(--s-3); font-size: var(--t-3); color: #f5f5f7; }
.o2-umsetzung p { max-width: none; margin: 0 0 var(--s-3); color: var(--c-muted-dark); break-inside: avoid; }
@media (max-width: 1068px) { .o2-umsetzung { columns: 1; padding: 0 var(--s-5); } }
.o2-blase blockquote { font-size: var(--t-body); line-height: 1.6; color: rgba(241,240,236,.88); }
.o2-blase figcaption { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.o2-blase-foto { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: #2a2a2d; }
.o2-blase-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o2-blase figcaption b { display: block; color: #f5f5f7; font-size: var(--t-body); }

.o2-blase-box { margin: 0 0 var(--s-5); }
.o2-blase-box .o2-blase { margin: 0; }
.o2-blase-box figcaption { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); padding-left: 22px; font-size: var(--t-small); color: var(--c-muted-dark); }
.o2-blase-box figcaption b { display: block; color: #f5f5f7; font-size: var(--t-body); }

.o2-blase-box .o2-blase { position: relative; padding-right: calc(var(--s-5) + 24px); }
.o2-blase-box .o2-blase::after { display: none; }
.o2-blase-box .o2-blase-foto { position: absolute; top: -26px; right: -18px; width: 76px; height: 76px; border: 4px solid #0b0b0d; box-shadow: 0 10px 24px rgba(0,0,0,.5); }

.o2-blase-box { margin-top: 56px; }
.o2-blase-box .o2-blase { padding-right: var(--s-5); }
.o2-blase-box .o2-blase-foto { width: 140px; height: 140px; top: -70px; right: -34px; border-width: 5px; }
.o2-blase-box blockquote::before { content: ""; float: right; width: 80px; height: 46px; }

.o2-blase-box .o2-blase { border-radius: 6px 26px 26px 26px; padding-left: var(--s-5); }
.o2-blase-box .o2-blase-foto { right: auto; left: -40px; top: -76px; }
.o2-blase-box blockquote::before { float: left; width: 96px; height: 40px; }
.o2-blase-box .o2-sterne { display: block; padding-left: 96px; }
.o2-blase-box { margin-top: 92px; }

.o2-blase-box { position: relative; margin-top: var(--s-5); }
.o2-blase-box .o2-blase-foto { position: absolute; left: -36px; top: -36px; width: 140px; height: 140px; border: 0; box-shadow: 0 14px 30px rgba(0,0,0,.55); z-index: 1; }
.o2-blase-box .o2-blase { padding: var(--s-4) var(--s-5) var(--s-5); border-radius: 26px;
  -webkit-mask: radial-gradient(circle 84px at 34px 34px, transparent 83px, #000 84px); mask: radial-gradient(circle 84px at 34px 34px, transparent 83px, #000 84px); }
.o2-blase-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); padding-left: 104px; min-height: 92px; }
.o2-blase-kopf b { display: block; font-size: var(--t-lead); color: #f5f5f7; }
.o2-blase-kopf span:first-child { font-size: var(--t-small); color: var(--c-muted-dark); }
.o2-blase-box .o2-sterne { display: inline; padding-left: 0; font-size: 18px; white-space: nowrap; }
.o2-blase-box blockquote { margin-top: var(--s-2); }
.o2-blase-box blockquote::before { display: none; }

.o2-blase-box { margin-top: calc(var(--s-6) + 50px); }
.o2-blase-box .o2-blase-foto { left: 0; top: -50px; }
.o2-blase-box .o2-blase { -webkit-mask: radial-gradient(circle 82px at 70px 20px, transparent 81px, #000 82px); mask: radial-gradient(circle 82px at 70px 20px, transparent 81px, #000 82px); }
.o2-blase-kopf { padding-left: 150px; min-height: 96px; }
.o2-zurueck { text-align: center; margin: var(--s-7) auto 0; max-width: none; } .o2-zurueck .btn { font-size: var(--t-lead); padding: 16px 32px; }  

.o2-mini { position: relative; width: 78%; margin: 0 auto var(--s-5); aspect-ratio: 751.3 / 580; }
.o2-mini-land { position: absolute; inset: 0; background: rgba(255,255,255,.12); -webkit-mask: url('img/brand/saarland-umriss.svg') center / contain no-repeat; mask: url('img/brand/saarland-umriss.svg') center / contain no-repeat; overflow: hidden; }
.o2-mini-fill { position: absolute; left: 46%; top: 50%; width: 56%; aspect-ratio: 1; margin: -28% 0 0 -28%; border-radius: 50%; background: linear-gradient(var(--c-blau), var(--c-blau-tief)); transform: scale(.08); transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
.o2-mini-lokal .o2-mini-fill { transform: scale(1); }
.o2-mini-regional .o2-mini-fill { transform: scale(5.5); }
.o2-pin { position: absolute; width: 2.6%; aspect-ratio: 1; margin: -1.3% 0 0 -1.3%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.o2-weg h3 { text-align: center; }
.o2-weg-zitat { text-align: center; }

.o2-vergleich { column-gap: var(--s-7); }
.o2-weg { text-align: center; display: flex; flex-direction: column; align-items: center; }
.o2-mini-lokal .o2-mini-fill { width: 52.6%; margin: -26.3% 0 0 -26.3%; }  
.o2-weg-plaetze { margin: 0 0 6px; font-size: var(--t-small); font-weight: 600; color: var(--c-blau); }
.o2-weg h3 { font-size: var(--t-1); margin: 0; }
.o2-weg-zitat { margin: var(--s-2) auto var(--s-5); font-style: normal; font-weight: 600; color: #f5f5f7; max-width: 26ch; font-size: var(--t-lead); }
.o2-weg-knopf { margin: 0; }
.o2-weg hr { width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: var(--s-6) 0; }
.o2-weg-fuer { margin: 0 0 var(--s-2); font-weight: 600; color: #f5f5f7; }
.o2-weg ul { list-style: none; padding: 0; margin: 0; color: var(--c-muted-dark); }
.o2-weg li + li { margin-top: 6px; }
.o2-specs { display: flex; flex-direction: column; gap: var(--s-6); margin: var(--s-7) 0; width: 100%; }
.o2-spec { display: flex; flex-direction: column; align-items: center; }
.o2-spec svg { width: 40px; height: 40px; fill: none; stroke: #f5f5f7; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--s-2); }
.o2-spec small { font-size: var(--t-small); color: #f5f5f7; }
.o2-spec b { font-size: var(--t-2); line-height: 1.1; letter-spacing: -.02em; color: #f5f5f7; }
.o2-spec span { margin-top: 4px; font-size: var(--t-small); color: var(--c-muted-dark); max-width: 30ch; }

.o2-vergleich { grid-template-rows: repeat(14, auto); row-gap: 0; }
.o2-weg { display: grid; grid-row: span 14; grid-template-rows: subgrid; justify-items: center; align-content: start; }
.o2-specs { display: contents; }
.o2-spec { margin-top: var(--s-6); }
.o2-specs .o2-spec:first-child { margin-top: var(--s-7); }
.o2-weg > .o2-weg-knopf:last-child { margin-top: var(--s-7); align-self: start; }
.o2-weg ul { align-self: start; }
@media (max-width: 734px) { .o2-vergleich { grid-template-rows: none; } .o2-weg { grid-row: auto; display: flex; } .o2-specs { display: flex; } }

.o2-mini { width: 62%; }
.o2-mini-lokal .o2-mini-fill { width: 35%; margin: -17.5% 0 0 -17.5%; }  
.o2-weg h3 { font-size: var(--t-2); letter-spacing: -.02em; }
.o2-weg-plaetze { font-size: 12px; margin-bottom: 4px; }
.o2-weg-zitat { font-size: var(--t-body); margin: var(--s-1) auto var(--s-4); max-width: 30ch; }
.o2-weg-knopf { font-size: var(--t-small); padding: 10px 20px; }
.o2-weg hr { margin: var(--s-5) 0; }
.o2-weg-fuer { font-size: var(--t-small); }
.o2-weg ul { font-size: var(--t-small); }
.o2-spec { margin-top: var(--s-5); }
.o2-specs .o2-spec:first-child { margin-top: var(--s-6); }
.o2-spec svg { width: 34px; height: 34px; }
.o2-spec b { font-size: var(--t-3); }
.o2-spec small, .o2-spec span { font-size: 12px; }
.o2-weg > .o2-weg-knopf:last-child { margin-top: var(--s-6); }

.o2-weg ul { list-style: disc; text-align: left; padding-left: 1.2em; max-width: 34ch; justify-self: center; }
.o2-weg li::marker { color: var(--c-blau); }

.o2-haken { overflow: hidden; }
.o2-haken-titel { position: relative; }
.o2-kran { position: relative; width: 200px; height: 370px; margin: var(--s-3) 0 0 6px; touch-action: pan-y; }
.o2-kran-svg { position: absolute; left: 0; top: 0; width: 200px; height: 367px; overflow: visible; transform-origin: 60% -260px; cursor: grab; will-change: transform; }
.o2-kran-svg.zieht { cursor: grabbing; }
.o2-kran-haken { transform-box: view-box; transform-origin: 120px 345px; }
.o2-kran-seile rect { opacity: .9; }
@media (max-width: 734px) { .o2-kran { width: 150px; height: 280px; margin-inline: auto; } .o2-kran-svg { width: 150px; height: 275px; transform-origin: 60% -260px; } }
.o2-kran-svg { transform-origin: 50% -260px; }

.o2-kran { clip-path: inset(0 -400px -400px -400px); }
.o2-kran-svg { transform-origin: 52.3% calc(-400px * 200 / 240); }
@media (max-width: 734px) { .o2-kran-svg { transform-origin: 52.3% calc(-400px * 150 / 240); } }
.o2-kran-haken { transform-origin: 121px 352px; }
.o2-kran { height: 390px; } .o2-kran-svg { height: 383px; }
@media (max-width: 734px) { .o2-kran { height: 292px; } .o2-kran-svg { height: 288px; } }

.o2-kran { height: 400px; } .o2-kran-svg { height: 392px; transform-origin: 53.75% calc(-400px * 200 / 240); }
.o2-kran-haken { transform-origin: 113px 352px; }
@media (max-width: 734px) { .o2-kran { height: 300px; } .o2-kran-svg { height: 294px; transform-origin: 53.75% calc(-400px * 150 / 240); } }
.o2-kran { height: 416px; } .o2-kran-svg { height: 408px; }
.o2-kran-haken { transform-origin: 113px 356px; }
@media (max-width: 734px) { .o2-kran { height: 312px; } .o2-kran-svg { height: 306px; } }

.o2-kran { height: 420px; } .o2-kran-svg { height: 415px; transform-origin: 47.1% calc(-400px * 200 / 260); }
.o2-kran-haken { transform-origin: 0 0; }
@media (max-width: 734px) { .o2-kran { height: 316px; } .o2-kran-svg { height: 312px; transform-origin: 47.1% calc(-400px * 150 / 260); } }
.o2-kran { height: 496px; margin-top: 0; } .o2-kran-svg { height: 492px; }
@media (max-width: 734px) { .o2-kran { height: 372px; } .o2-kran-svg { height: 369px; } }

.o2-kran { height: 504px; } .o2-kran-svg { height: 500px; transform-origin: 52.7% calc(-400px * 200 / 260); }
@media (max-width: 734px) { .o2-kran { height: 378px; } .o2-kran-svg { height: 375px; transform-origin: 52.7% calc(-400px * 150 / 260); } }

.o2-haken-titel .o2-kran { margin: calc(-1 * var(--s-7)) 0 0 -14px; }
@media (max-width: 734px) { .o2-haken-titel .o2-kran { margin-inline: auto; } }
.o2-haken .w2-wen-zeile h2 + p { margin-top: var(--s-3); }
.o2-einstieg { color: var(--c-ink); font-weight: 600; }

.o2-haken .w2-wen-zeile p.o2-haken-sub { margin-top: var(--s-2); color: var(--c-ink); font-size: var(--t-3); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.o2-haken .w2-wen-zeile .o2-haken-sub + p { margin-top: var(--s-3); }
.o2-haken .o2-listen { margin-top: var(--s-5); }
.o2-haken .o2-listen h3 { margin: 0 0 var(--s-3); font-size: var(--t-3); line-height: 1.2; letter-spacing: -.01em; }
.o2-haken .o2-listen ul { list-style: none; padding: 0; margin: 0; color: var(--c-ink); font-size: var(--t-body); line-height: 1.45; }
.o2-haken .o2-listen li { position: relative; padding: 14px 0; border-top: 1px solid var(--c-line); }
.o2-haken .o2-listen li:last-child { border-bottom: 1px solid var(--c-line); }
.o2-haken .o2-liste-plus li { padding-left: 32px; }
.o2-haken .o2-liste-plus li::before { content: ""; position: absolute; left: 0; top: 16px; width: 20px; height: 20px; background: var(--c-blau-tief);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.x2-geraete { position: relative; margin: 0; justify-self: center; width: 100%; max-width: 560px; }
.x2-geraete .x2-gross { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.x2-geraete .x2-handy { position: absolute; right: -4%; bottom: -10%; width: 30%; aspect-ratio: 9 / 19; object-fit: cover; object-position: top; border-radius: 22px; border: 6px solid #1d1d1f; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.x2-intro .x2-sub { margin-top: var(--s-2) !important; color: var(--c-ink) !important; font-size: var(--t-3) !important; line-height: 1.25 !important; font-weight: 600; letter-spacing: -.01em; }
.x2-intro .x2-sub + p { margin-top: var(--s-3); }
.x2-intro .w2-wen-zeile h2 { font-size: var(--t-2); }
.x2-link { color: var(--c-blau); white-space: nowrap; text-decoration: none; }
.x2-link:hover { text-decoration: underline; }
.x2-loesungen { padding-block: var(--s-section); }
.x2-loesungen .w2-titel { margin-inline: auto; }
.x2-fall { max-width: var(--w-stage); margin: var(--s-7) auto 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-7); align-items: center; text-align: left; }
.x2-fall-dreh .x2-fall-bild { order: 2; }
.x2-fall-bild img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.x2-fall-handys { display: flex; gap: var(--s-3); justify-content: center; }
.x2-fall-handys img { width: 42%; aspect-ratio: 9 / 19; object-fit: cover; object-position: top; border-radius: 26px; border: 6px solid #1d1d1f; }
.x2-fall-handys img + img { transform: translateY(var(--s-5)); }
.x2-fall-wer { margin: 0 0 var(--s-2); color: var(--c-muted); font-size: var(--t-small, 14px); }
.x2-fall h3 { margin: 0 0 var(--s-4); font-size: var(--t-2); line-height: 1.1; letter-spacing: -.02em; color: var(--c-ink); text-wrap: balance; }
.x2-fall p { color: var(--c-muted); max-width: none; }
.x2-vorher-heute { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.x2-vorher-heute h4 { margin: 0 0 var(--s-2); font-size: var(--t-body); color: var(--c-muted); }
.x2-heute h4 { color: var(--c-ink); }
.x2-vorher-heute ul { list-style: none; padding: 0; margin: 0; font-size: var(--t-body); line-height: 1.45; }
.x2-vorher-heute li { padding: 10px 0; border-top: 1px solid var(--c-line); color: var(--c-muted); }
.x2-vorher-heute li:last-child { border-bottom: 1px solid var(--c-line); }
.x2-vorher-heute div:first-child li { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.x2-heute li { color: var(--c-ink); }
.x2-fall-plus { margin-top: var(--s-4); color: var(--c-ink) !important; font-weight: 600; }
@media (max-width: 1068px) { .x2-fall { grid-template-columns: minmax(0, 1fr); max-width: var(--w-content); } .x2-fall-dreh .x2-fall-bild { order: 0; } .x2-geraete .x2-handy { right: 2%; } }
@media (max-width: 734px) { .x2-vorher-heute { grid-template-columns: minmax(0, 1fr); } }

.x2-vor { margin: 0 0 var(--s-3); color: rgba(241,240,236,.6); font-size: var(--t-body); letter-spacing: .02em; }
.x2-raster { padding-top: var(--s-7); }
.x2-raster-titel { margin: 0 auto var(--s-5); text-align: center; color: var(--c-ink-dark); font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: -.025em; }
.x2-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.x2-kachel { background: #0b0b0d; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-box); padding: var(--s-5) var(--s-5) var(--s-6); color: var(--c-ink-dark); text-align: center; display: flex; flex-direction: column; align-items: center; }
.x2-grafik { width: 100%; max-width: 220px; height: auto; margin: var(--s-2) 0 var(--s-5); fill: none; stroke: rgba(241,240,236,.38); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.x2-grafik .x2-g-ak { stroke: #6f9bff; }
.x2-grafik .x2-g-voll { fill: #6f9bff; stroke: none; }
.x2-grafik .x2-g-fl { fill: rgba(255,255,255,.04); }
.x2-kachel h3 { margin: 0 0 var(--s-2); font-size: var(--t-3); line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.x2-kachel p { margin: 0; color: rgba(241,240,236,.72); font-size: var(--t-body); line-height: 1.45; max-width: 30ch; text-wrap: pretty; }
.x2-saison { margin-top: 0; }
.x2-welde { padding-block: var(--s-section); }
.x2-welde-kopf { max-width: var(--w-content, 760px); margin: 0 auto var(--s-7); text-align: center; }
.x2-welde-kopf h2 { margin: 0 0 var(--s-3); font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: -.025em; text-wrap: balance; }
.x2-fall-wer { margin: 0 0 var(--s-2); color: var(--c-muted); font-size: var(--t-small, 14px); }
.x2-welde-vorher { margin: 0 auto; color: var(--c-muted); max-width: 46ch; }
.x2-w-schritte { list-style: none; padding: 0; margin: 0 auto; max-width: var(--w-stage); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); counter-reset: none; }
.x2-w-schritte > li { text-align: left; }
.x2-w-bild { position: relative; aspect-ratio: 4 / 3; background: var(--c-card); border-radius: var(--r-box); display: grid; place-items: center; overflow: hidden; margin-bottom: var(--s-4); }
.x2-w-nr { margin: 0 0 var(--s-1); color: var(--c-blau-tief); font-weight: 600; font-size: var(--t-body); }
.x2-w-schritte h4 { margin: 0 0 var(--s-1); font-size: var(--t-3); line-height: 1.2; letter-spacing: -.015em; color: var(--c-ink); }
.x2-w-schritte li > p:last-child { margin: 0; color: var(--c-muted); }

.x2-w-ui { width: 70%; background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.1); padding: 14px 16px; font-size: 13px; color: var(--c-ink); }
.x2-w-ui-kopf { margin: 0 0 8px; font-weight: 600; display: flex; justify-content: space-between; }
.x2-w-ui-kopf span { color: var(--c-muted); font-weight: 400; }
.x2-w-ui ul, .x2-w-pdf ul { list-style: none; padding: 0; margin: 0; }
.x2-w-ui li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--c-line); }
.x2-w-ui li span, .x2-w-pdf li span { width: 20px; color: var(--c-muted); }
.x2-w-ui li i, .x2-w-pdf li i { flex: 1; height: 7px; border-radius: 4px; background: rgba(0,0,0,.09); }
.x2-w-ui li b { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.2); }
.x2-w-ui li b.an { border: 0; background: var(--c-blau-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

.x2-w-pdf { width: 46%; aspect-ratio: 1 / 1.414; background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.12); padding: 7% 8%; font-size: 10px; display: flex; flex-direction: column; align-items: center; transform: rotate(-3deg); }
.x2-w-pdf img { width: 62%; height: auto; }
.x2-w-pdf p { margin: 6px 0 8px; font-weight: 700; color: #8b1d1d; letter-spacing: .04em; text-transform: uppercase; font-size: 9px; }
.x2-w-pdf ul { width: 100%; }
.x2-w-pdf li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px solid rgba(139,29,29,.18); }
.x2-w-pdf li span { width: 14px; font-size: 8px; }
.x2-w-pdf li i { height: 5px; }
.x2-w-knopf { position: absolute; right: 10%; bottom: 12%; background: var(--c-blau-tief); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; box-shadow: 0 10px 24px rgba(0,0,0,.18); }

.x2-w-browser { width: 76%; background: #fff; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.1); overflow: hidden; }
.x2-w-leiste { margin: 0; display: flex; gap: 5px; padding: 8px 10px; background: #f0f0f2; }
.x2-w-leiste i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.14); }
.x2-w-seite { padding: 14px; display: flex; align-items: center; gap: 12px; }
.x2-w-pdf-klein { width: 30%; aspect-ratio: 1 / 1.414; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 6px 16px rgba(0,0,0,.08); background-image: linear-gradient(rgba(139,29,29,.2) 1px, transparent 1px); background-size: 100% 18%; background-position: 0 30%; }
.x2-w-neu { margin: 0; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.x2-w-neu::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34c759; margin-right: 6px; vertical-align: 1px; }
.x2-w-tag { position: absolute; right: 9%; top: 10%; width: 44px; height: 48px; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.12); display: grid; place-items: center; font-weight: 700; font-size: 17px; color: var(--c-ink); border-top: 10px solid #ff3b30; }
@media (max-width: 1068px) { .x2-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x2-w-schritte { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
@media (max-width: 734px) { .x2-kacheln { grid-template-columns: minmax(0, 1fr); } }
.x2-welde { background: var(--c-bg); }
.x2-saison { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; min-height: 0; text-align: left; padding: var(--s-6) var(--s-6) var(--s-6) 0; }
.x2-saison .s2-tx { padding: 0 var(--s-5) 0 var(--s-7); align-items: flex-start; }
.x2-saison .s2-tx h2, .x2-saison .s2-satz { margin-left: 0; }
.x2-saison .s2-wege { justify-content: flex-start; }
.x2-saison .s2-bild { margin: 0; }
.x2-saison .s2-saison { width: 100%; padding: 0; }
@media (max-width: 1068px) { .x2-saison { grid-template-columns: minmax(0, 1fr); padding: var(--s-6) var(--s-4); text-align: center; } .x2-saison .s2-tx { padding: 0 0 var(--s-5); align-items: center; } .x2-saison .s2-wege { justify-content: center; } .x2-saison .s2-tx h2, .x2-saison .s2-satz { margin-left: auto; } }
.x2-welde { color: var(--c-ink); } .x2-welde-kopf h2 { color: var(--c-ink); }
.x2-welde-kopf h2, .x2-welde-kopf p { margin-left: auto; margin-right: auto; }

main:has(.z2-hero) { background: var(--c-bg-dark); }
.z2-hero { background: var(--c-bg-dark); color: var(--c-ink-dark); padding: calc(72px + var(--s-7)) var(--gut) var(--s-section); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s-7); align-items: center; max-width: var(--w-wide); margin: 0 auto; }
.z2-hero h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: -.035em; margin: 0 0 var(--s-4); text-wrap: balance; }
.z2-hero h1 .de-max { background-image: linear-gradient(transparent, transparent), linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%); }
.z2-hero .lead { color: rgba(241,240,236,.8); margin: 0 0 var(--s-5); max-width: 30ch; }
.z2-hero-bild .s2-saison { width: 100%; padding: 0; }
.z2-hero-bild .s2-sleiste { color: rgba(241,240,236,.5); }
.z2-satz { background: var(--c-bg); color: var(--c-ink); padding: var(--s-section) var(--gut); }
.z2-paar { max-width: var(--w-stage); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.z2-paar p { margin: 0; padding: var(--s-7) var(--s-6); border-radius: var(--r-box); background: var(--c-card); font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
.z2-paar p span { display: block; margin-bottom: var(--s-3); font-size: var(--t-body); line-height: 1.4; letter-spacing: 0; font-weight: 400; color: var(--c-muted); }
.z2-paar .z2-gut { background: #0b0b0d; color: var(--c-ink-dark); }
.z2-paar .z2-gut span { color: rgba(241,240,236,.6); }
.z2-gewerke { background: var(--c-bg); color: var(--c-ink); padding: 0 var(--gut) var(--s-section); text-align: center; }
.z2-gewerke h2 { margin: 0 auto var(--s-6); font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: -.025em; }
.z2-reihe { max-width: var(--w-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); text-align: left; }
.z2-gewerk { margin: 0; }
.z2-gewerk > div { aspect-ratio: 4 / 5; border-radius: var(--r-box); overflow: hidden; background: var(--c-card); }
.z2-gewerk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.z2-gewerk figcaption { padding: var(--s-3) var(--s-1) 0; color: var(--c-muted); font-size: var(--t-body); line-height: 1.45; }
.z2-gewerk b { display: block; margin-bottom: var(--s-1); color: var(--c-ink); font-size: var(--t-3); line-height: 1.2; letter-spacing: -.015em; }
.z2-fuss { max-width: 52ch; margin: var(--s-6) auto 0; color: var(--c-muted); }
@media (max-width: 1068px) { .z2-hero { grid-template-columns: minmax(0, 1fr); } .z2-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .z2-paar { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 734px) { .z2-hero { padding-top: calc(64px + var(--s-5)); } .z2-reihe { grid-template-columns: minmax(0, 1fr); } .z2-paar p { padding: var(--s-5) var(--s-4); } }

main:has(.u2-hero) { background: var(--c-bg-dark); }
.u2-bild img { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 640px; object-fit: cover; border-radius: var(--r-box); }
.u2-hero .lead { max-width: 36ch; }
.u2-klein { margin: 0; color: rgba(241,240,236,.55); font-size: var(--t-small, 14px); max-width: 44ch; }
.u2-luecke { text-align: center; }
.u2-luecke h2 { margin: 0 auto var(--s-6); font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: -.025em; }
.u2-luecke .z2-paar { text-align: left; }
.u2-satz { margin: var(--s-6) auto 0; max-width: 24ch; font-size: var(--t-2); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
.u2-heute { padding-top: 0; }
.u2-unter { margin: 0 auto var(--s-6); }
.u2-grund { max-width: var(--w-stage); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); text-align: left; }
.u2-grund > div { background: var(--c-card); border-radius: var(--r-box); padding: var(--s-5); }
.u2-grund b { display: block; margin-bottom: var(--s-2); font-size: var(--t-3); line-height: 1.2; letter-spacing: -.015em; }
.u2-grund p { margin: 0; color: var(--c-muted); }
@media (max-width: 1068px) { .u2-grund { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .u2-bild img { max-height: 520px; } }
.u2-bild img { aspect-ratio: 1 / 1; max-height: min(620px, 68vh); }
.fl-versand a { white-space: nowrap; color: inherit; }

@media (max-width: 734px) {
  .w2-person-ruhig { grid-template-columns: minmax(0, 1fr); }
  .w2-person-ruhig img { order: 0; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .w2-person-ruhig > div { padding: var(--s-5) var(--s-4); }
  .btn { text-align: center; }
}
.dw-formular .steps span { white-space: nowrap; overflow: visible; }
@media (max-width: 734px) {
  .chip-reihe[style*="--spalten:3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .chip-reihe[style*="--spalten:3"] > :last-child:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 734px) {
  .dk-links { grid-template-columns: minmax(0, 1fr) !important; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .dk-danke > .dt-innen { min-width: 0; max-width: 100%; }
  .dk-danke { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 734px) { .dk-danke .dk-links { grid-auto-flow: row; width: 100%; max-width: 280px; } }

.menu-open .site-head { display: flex !important; flex-wrap: wrap; justify-content: space-between; }
.menu-open .site-head .menu-btn { margin-left: auto; order: 2; }
.menu-open .site-head .logo { order: 1; }
.menu-open .site-head nav { flex: 0 0 100%; width: 100% !important; max-width: none; margin-left: 0 !important; align-items: flex-start; text-align: left; white-space: nowrap; order: 3; }
.menu-open .site-head nav a { margin: 0; padding: 6px 0; }

.s2-ende .s2-agentur-unten { grid-column: 1 / -1; margin: var(--s-6) 0 0; text-align: center; color: rgba(241,240,236,.5); font-size: var(--t-small, 14px); }
.s2-ende .s2-agentur-unten a { color: #6f9bff; text-decoration: none; }
.s2-ende .s2-agentur-unten { justify-self: stretch; width: auto; max-width: none; margin-left: 0; margin-right: 0; }
.s2-ende .s2-agentur-unten { margin-top: calc(var(--s-5) - var(--s-7)); }
.s2-ende:has(.s2-agentur-unten) { padding-bottom: var(--s-6); }

@media (max-width: 734px) {
  .s2-web .web-wand {
    -webkit-mask-image: radial-gradient(ellipse 120% 62% at 50% 100%, transparent 55%, rgba(0,0,0,.5) 78%, #000 100%), linear-gradient(180deg, #000 60%, transparent 92%);
    mask-image: radial-gradient(ellipse 120% 62% at 50% 100%, transparent 55%, rgba(0,0,0,.5) 78%, #000 100%), linear-gradient(180deg, #000 60%, transparent 92%);
  }
}



body { padding-bottom: 0; }

.btn { white-space: nowrap; }
@media (max-width: 480px) {
  .btn { font-size: var(--t-btn, 15px); padding-left: 20px; padding-right: 20px; }
  
  .dw-formular form .btn.fill, .dw-formular form button[type=submit] { width: 100%; justify-content: center; }
}
@media (max-width: 734px) {
  
  .de-max { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .o2-blase-box .o2-sterne { white-space: normal; font-size: 15px; letter-spacing: 1px; }
  .o2-blase-kopf { flex-direction: column; justify-content: center; gap: 4px; }
  .o2-blase blockquote.klapp { --zeilen: 4; }
  
  .dw-formular .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dw-formular .steps span { min-width: 0; overflow: visible; }
  
  .s2-ads { min-height: 480px; }
  .s2-ads .s2-tx { padding-left: var(--s-4); padding-right: var(--s-4); }
  .s2-ads .s2-tx h2 .de-max, .s2-web .s2-tx h2 .de-max { white-space: nowrap; }
  
  .s2-agentur-unten a { display: block; margin-top: 4px; }
  
  .dk-zwei { grid-template-columns: minmax(0, 1fr); }
  .dk-zwei > * { min-width: 0; }
  
  .w2-fragen { gap: 6px; }
  .w2-fragen li { font-size: 15px; padding: 9px 16px; gap: 8px; }
  .w2-fragen li i { width: 18px; height: 18px; }
  
  .e2-karte { width: min(300px, 78vw); padding: 16px 18px; }
  .e2-wer { display: grid; justify-content: center; justify-items: start; gap: var(--s-1); text-align: left; }
  
  form[data-thanks="danke-agentur.html"] .chip-reihe { grid-template-columns: minmax(0, 1fr); }
  form[data-thanks="danke-agentur.html"] .chip, form[data-thanks="danke-agentur.html"] .chip span { text-align: left; justify-content: flex-start; }
  
  .o2-weg > .o2-weg-knopf:last-child { align-self: center; margin-top: var(--s-5); }
  .o2-weg ul { align-self: center; }
  .o2-weg + .o2-weg { margin-top: var(--s-7); }
  .o2-specs { margin-top: var(--s-5); }
  .o2-specs .o2-spec:first-child { margin-top: var(--s-5); }
}

.klapp-knopf { display: none; }
@media (max-width: 734px) {
  .klapp.zu p, .klapp.zu blockquote, blockquote.klapp.zu { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--zeilen, 2); overflow: hidden; }
  .klapp.zu p ~ p { display: none; }
  .klapp-knopf { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 6px 0; border: 0; background: none; color: #6f9bff; font: inherit; font-size: var(--t-small); cursor: pointer; }
  .klapp-knopf::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .3s; }
  .klapp-knopf[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .o2-umsetzung.zu p { display: none; }
  .o2-umsetzung h4 { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--t-body); padding-bottom: var(--s-2); border-bottom: 1px solid rgba(255,255,255,.14); }
  .o2-umsetzung h4::after { content: ""; flex: none; width: 9px; height: 9px; border: solid #6f9bff; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .3s; }
  .o2-umsetzung:not(.zu) h4::after { transform: translateY(2px) rotate(-135deg); }
}

.s2-logos.s2-logos-lauf { display: flex; flex-direction: column; gap: var(--s-4); max-width: none; margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.s2-logos-reihe { overflow: hidden; }
.s2-logos-spur { display: flex; align-items: center; gap: var(--s-5); width: max-content; padding-right: var(--s-5); animation: logos-lauf var(--dauer, 30s) linear infinite; }
.s2-logos-spur.rueck { animation-direction: reverse; }
.s2-logos-spur img { height: 26px; max-width: 110px; }
@keyframes logos-lauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .s2-logos-spur { animation: none; } .s2-logos-reihe { overflow-x: auto; } }


@media (max-width: 734px) {
  
  .ly-sky, .ly-sky-tim { background-size: auto 74%; background-position: 72% 9%; }
  .ly-sky { background-color: #15140f; }
  .ly-shade { background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 34%, rgba(0,0,0,.72) 56%, rgba(0,0,0,.92) 100%); }
  .hero-copy { bottom: 6vh; }
  .hero-copy h1 { font-size: 34px; line-height: 1.08; }
  .hero-copy .eyebrow { margin-bottom: var(--s-2); }
  
  .w2-trust { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; margin-top: var(--s-4); border-radius: 14px; }
  .w2-t { padding: 10px 14px; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .w2-t:nth-child(-n+2) { border-top: 0; }
  .w2-t:nth-child(even) { border-left: 1px solid rgba(255,255,255,.12); }
  .w2-t b { font-size: 19px; }
  .w2-t b i { font-size: 10px; }
  .w2-t span { white-space: normal; font-size: 11px; }
  .w2-t-saar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; padding: 6px 14px; border-top: 0; }
  .w2-t-saar img { height: 30px; }
}

.s2-ads .s2-saar { -webkit-mask-image: url('img/brand/saarland-umriss.svg'); mask-image: url('img/brand/saarland-umriss.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-composite: source-over; mask-composite: add; }
.s2-ads::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 72% at 50% 100%, #0b0b0d 45%, rgba(11,11,13,0) 100%); }
@media (max-width: 734px) {
  .ly-sky, .ly-sky-tim { background-position: 78% 9%; }
  
  .w2-fall { padding: var(--s-4) 18px; }
  .w2-fall-buehne { padding-right: 7%; margin-right: -6px; }
  .w2-fall-handy { width: 23%; border-width: 3px; border-radius: 11px; bottom: -8%; }
  .w2-fall-stand { display: flex; width: fit-content; margin-left: auto; margin-right: auto; margin-top: var(--s-4); }
  .w2-collage { display: none; }
  .klapp { --zeilen: 3; }
  .o2-blase blockquote.klapp { --zeilen: 4; }
  
  .o2-blase-box { display: flex; flex-direction: column; align-items: center; margin-top: var(--s-5); }
  .o2-blase-box .o2-blase-foto { position: relative; left: auto; top: auto; width: 120px; height: 120px; margin: 0 auto -60px; }
  .o2-blase-box .o2-blase { width: 100%; padding: 76px var(--s-4) var(--s-4);
    -webkit-mask: radial-gradient(circle 70px at 50% 0, transparent 69px, #000 70px); mask: radial-gradient(circle 70px at 50% 0, transparent 69px, #000 70px); }
  .o2-blase-box .o2-blase-kopf { padding-left: 0; min-height: 0; align-items: center; text-align: center; }
  
  .s2-agentur-unten .zeile { display: block; }
}
@media (max-width: 734px) {
  
  .site-foot .cols > .foot-logo { grid-column: 1 / -1; justify-self: center; margin-bottom: var(--s-5); }
  .site-foot .foot-logo img { height: 34px; }
  .site-foot .cols { row-gap: var(--s-5); }
  .site-foot .base { align-items: center; text-align: center; }
}
@media (max-width: 900px) { .st-mix .st-bub.st-w { width: 190px; padding: 10px 12px; font-size: 12px; } }
@media (max-width: 480px) { .hero-copy h1 { font-size: var(--t-hero); } }
@media (max-width: 734px) {
  
  .s2-ads .s2-saar, .s2-ads .s2-saar-punkte { left: 6%; right: auto; top: 9%; bottom: auto; width: 118%; height: auto; aspect-ratio: 751.3 / 580; transform: none; }
}

.w2-fall-handy.o2-geraet { position: absolute; right: 0; bottom: -6%; width: 17%; aspect-ratio: 968 / 2000; border: 0; border-radius: 0; box-shadow: none; z-index: 2; justify-self: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.w2-fall-handy .o2-schirm { background: #000; }
.w2-fall-handy .o2-schirm img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.w2-handy { background: none; padding: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 50px 80px rgba(74,125,255,.35)); }
.w2-handy .w2-schirm { position: absolute; left: 4.13%; right: 4.13%; top: 1.65%; bottom: 1.7%; width: auto; height: auto; border-radius: 15% / 6.9%; }
.w2-handy > .o2-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
@media (max-width: 734px) {
  
  .w2-fall-buehne { display: flex; align-items: flex-end; padding: var(--s-2) 0 0; margin-right: 0; min-height: 0; }
  .w2-fall-handy.o2-geraet { position: relative; right: auto; bottom: auto; width: 54%; margin-left: 2%; }
  .w2-fall-buehne .w2-fall-schirm { position: absolute; right: 0; bottom: 10%; width: 60%; z-index: 1; border-radius: 10px; }
}

.s2-logos-spur img { width: 92px; height: 30px; max-width: none; object-fit: contain; }
.s2-logos-spur { gap: var(--s-4); padding-right: var(--s-4); }

@media (max-width: 900px) {
  .st-mix .st-bub.st-w { width: 136px; padding: 7px 9px; font-size: 9px; line-height: 1.25; border-radius: 12px; gap: 3px; }
  .st-mix .st-bub.st-w::after { width: 9px; height: 9px; left: 16px; bottom: -4px; }
  .st-mix .st-bub.st-w em img { width: 8px; height: 8px; }
  .st-mix .st-bub.st-w small { font-size: 8px; }
}
.s2-logos.s2-logos-lauf { align-items: stretch; justify-content: flex-start; }
.s2-logos-reihe { width: 100%; min-width: 0; }
@media (max-width: 734px) {
  
  .w2-fragen { gap: 6px; margin-top: var(--s-5); margin-bottom: var(--s-5); }
  .w2-fragen li { font-size: 12px; padding: 6px 11px; gap: 6px; }
  .w2-fragen li i { width: 15px; height: 15px; }
  .w2-fragen li i::after { font-size: 10px; }
}

.w2-fall-handy .o2-schirm img { position: absolute; inset: 0; }
.w2-mit-vor .w2-fall-handy-nach { clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }

@media (max-width: 734px) {
  .btn { font-size: 16px; font-weight: 500; line-height: 1.18; padding: 9px 20px; gap: 8px; }
  .site-head .btn { padding: 8px 16px; }
}

[data-m="stimmen"] .st-mix .st-bub.st-w { width: var(--blase-b, 260px); font-size: var(--blase-s, 14px); }


@media (max-width: 734px) {
  .st-q figcaption { margin-top: var(--s-2); font-size: 10px; }   
}


br.nur-handy { display: none; }
@media (max-width: 734px) {
  br.nur-handy { display: inline; }
  .e2-hero h1 { font-size: var(--t-hero); }            
  .e2-formbereich h2 { font-size: var(--t-1); }
  .o2-zurueck .btn { font-size: 16px; padding: 9px 20px; }   
}


.knopf-kurz { display: none; }
@media (max-width: 734px) {
  
  .o2-hero .o2-hero-tx { text-align: center; }
  .o2-hero .o2-hero-tx > * { margin-left: auto; margin-right: auto; }
  .o2-hero .s2-wege { justify-content: center; flex-direction: column; }
  .o2-hero .o2-plaetze { justify-content: center; }

  
  .w2-faelle > .w2-titel, .w2-faelle > .lead { text-align: left; margin-left: 0; margin-right: 0; }
  .w2-fall-navi { justify-content: flex-start; }

  
  .w2-rest { text-align: left; }
  .w2-rest > .w2-titel, .w2-rest > .lead, .w2-rest > p { text-align: left; margin-left: 0; margin-right: 0; }
  .w2-tradein { text-align: left; gap: var(--s-4); }
  .w2-tradein li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s-3); justify-items: start; align-items: start; }
  .w2-tradein svg { grid-row: span 3; padding: 0; width: 28px; height: 28px; background: none; }
  .w2-tradein b { margin-top: 2px; text-wrap: pretty; }
  .w2-tradein p { margin-top: 4px; }

  
  [data-id="K2"] .dt-mitte, [data-id="K2"] .dt-schritt { text-align: left; }

  
  .e2-formbereich, .e2-formbereich h2, .e2-formbereich .e2-sub { text-align: left; margin-left: 0; margin-right: 0; }

  
  .o2-wege > .w2-titel { text-align: left; margin-left: 0; margin-right: 0; }
  .o2-vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(14, auto); column-gap: var(--s-3); row-gap: 0; margin-top: var(--s-5); }
  .o2-weg { display: grid; grid-row: span 14; grid-template-rows: subgrid; justify-items: start; align-content: start; text-align: left; }
  .o2-weg + .o2-weg { margin-top: 0; }
  .o2-specs { display: contents; }
  .o2-mini { width: 100%; margin: 0 0 var(--s-3); }
  .o2-weg h3 { font-size: var(--t-3); text-align: left; }
  .o2-weg-zitat { text-align: left; font-size: 14px; line-height: 1.35; margin: var(--s-1) 0 var(--s-3); max-width: none; }
  .o2-weg-knopf { font-size: 14px; padding: 7px 16px; }
  .knopf-lang { display: none; } .knopf-kurz { display: inline; }
  .o2-weg hr { margin: var(--s-4) 0; }
  .o2-weg-fuer { font-size: 12px; }
  .o2-weg ul { font-size: 12px; line-height: 1.4; justify-self: start; align-self: start; max-width: none; padding-left: 1.1em; }
  .o2-spec { align-items: flex-start; margin-top: var(--s-4); }
  .o2-specs .o2-spec:first-child { margin-top: var(--s-5); }
  .o2-spec svg { width: 26px; height: 26px; margin-bottom: var(--s-1); }
  .o2-spec b { font-size: 21px; }
  .o2-spec small, .o2-spec span { font-size: 12px; max-width: none; }
  .o2-weg > .o2-weg-knopf:last-child { align-self: start; margin-top: var(--s-5); }
}
@media (max-width: 734px) {
  .o2-weg .o2-spec { align-self: start; }   
  .o2-bald { text-align: left; margin-left: 0; margin-right: 0; }
}
@media (max-width: 734px) {
  .w2-tradein li { grid-row: auto; grid-template-rows: none; }
  .w2-tradein li > :not(svg) { grid-column: 2; }
  [data-id="K2"] .dt-schritt, [data-id="K2"] .dt-schritt * { text-align: left; justify-content: flex-start; align-items: flex-start; }
  [data-id="K2"] .dt-nummer { margin-left: 0; }
  .e2-formbereich > h2, .e2-formbereich > .e2-sub, .e2-formbereich > .e2-wer { padding-left: var(--gut); padding-right: var(--gut); box-sizing: border-box; }
}


.dk-recht .dt-innen { max-width: var(--w-text); }
.dk-recht h2 { margin: var(--s-6) 0 var(--s-3); }
.dk-recht h1 + h2, .dk-recht h1 + p { margin-top: 0; }
.dk-recht h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 600; }
.dk-recht h4 { margin: var(--s-4) 0 var(--s-1); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 600; color: var(--c-muted); }
.dk-recht h2 + h3 { margin-top: 0; }
.dk-recht h3 + h4 { margin-top: var(--s-2); }
.dk-recht p, .dk-recht li { font-size: var(--t-body); line-height: var(--lh-body); max-width: none; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.dk-recht p { margin: 0 0 var(--s-2); }
.dk-recht ul { margin: 0 0 var(--s-2); padding-left: 1.2em; }
.dk-recht li + li { margin-top: 6px; }
.dk-recht .dk-quelle { margin-top: var(--s-6); font-size: var(--t-small); color: var(--c-muted); }
.dk-recht h2, .dk-recht h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.dk-recht h1, .dk-recht h2 { max-width: none; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-wrap: pretty; }


.wa-knopf { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 7900; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), background .2s; }
.wa-knopf.an { opacity: 1; transform: none; pointer-events: auto; }
.wa-knopf:hover { background: #1ebe5b; }
.wa-knopf svg { width: 34px; height: 34px; }
@media (max-width: 734px) { .wa-knopf { width: 60px; height: 60px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); } .wa-knopf svg { width: 32px; height: 32px; } }
.static .wa-knopf { transition: none; }
.jd-banner-offen .wa-knopf { opacity: 0; pointer-events: none; }   


.w2-collage > * { flex-shrink: 0; }
.w2-collage > .w2-c-h { width: 15%; max-width: 170px; height: auto; aspect-ratio: 968 / 2000; border: 0; border-radius: 0 !important; box-shadow: none; margin: 0 -18px; z-index: 2; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.w2-collage .o2-schirm img { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: top; transform: none !important; }
.w2-collage > .o2-geraet .o2-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; transform: none !important; }
.w2-collage > :nth-child(2) { transform: rotate(-2deg) translateY(-6px); }
.w2-collage > :nth-child(4) { transform: rotate(3deg) translateY(4px); }
@media (max-width: 1068px) { .w2-collage > .w2-c-h { height: auto; width: 16%; } }


.w2-story { position: relative; }
.w2-kulisse { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: 0; pointer-events: none; }
.w2-k-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.w2-k-buehne > video, .w2-k-buehne > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.w2-k-buehne[data-szene="0"] > [data-szene="0"], .w2-k-buehne[data-szene="1"] > [data-szene="1"], .w2-k-buehne[data-szene="2"] > [data-szene="2"] { opacity: 1; }
.w2-k-hoch { display: none; }
.w2-k-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 28%, rgba(0,0,0,0) 46%), linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, #000 100%); }
.w2-story .w2-zeilen, .w2-story .w2-handy-spur { position: relative; z-index: 1; }
.w2-story .w2-zeile p { text-shadow: 0 2px 24px rgba(0,0,0,.9); }
.w2-handy { margin-right: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.w2-handy[data-schritt="0"] { opacity: 0; transform: translateY(60px); }
@media (max-width: 1068px) {
  .w2-k-quer { display: none; }
  .w2-k-hoch { display: block; }
  .w2-k-schleier { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 26%, rgba(0,0,0,0) 44%, rgba(0,0,0,0) 90%, #000 100%); }
  .w2-story .w2-zeile { min-height: 100svh; justify-content: flex-start; padding: 12svh 0 0; }
}
@media (prefers-reduced-motion: reduce) { .w2-k-buehne > video, .w2-k-buehne > img { transition: none; } }

@media (min-width: 1069px) {
  .w2-k-buehne > .w2-k-quer { top: 50%; bottom: auto; height: auto; aspect-ratio: 16 / 9; transform: translate(7%, -50%); object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
}


.w2-s { font-family: -apple-system, "SF Pro Text", var(--f-body); color: #1d1d1f; text-align: left; }
.w2-s svg { width: 13px; height: 13px; flex: none; color: #70757a; }
.w2-s-suche, .w2-s-vergl { background: #fff; padding: 52px 14px 14px; gap: 10px; }
.w2-such { border: 0; background: #f1f3f4; padding: 10px 13px; font-size: 13px; }
.w2-reiter { display: flex; gap: 14px; font-size: 11px; color: #70757a; padding: 0 4px; border-bottom: 1px solid #ebebeb; }
.w2-reiter b { color: #1a73e8; font-weight: 600; padding-bottom: 6px; border-bottom: 2px solid #1a73e8; }
.w2-ergebnisse { display: grid; gap: 10px; opacity: 0; }
.w2-handy[data-schritt="1"] .w2-ergebnisse { animation: w2-auf .5s ease 1.9s forwards; }
@keyframes w2-auf { to { opacity: 1; } }
.w2-tr { padding: 10px 11px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #ececec; }
.w2-tr-kopf { display: flex; gap: 8px; align-items: center; }
.w2-tr-kopf i { width: 22px; height: 22px; border-radius: 50%; background: #e8eaed; color: #5f6368; font: 600 10px/22px var(--f-body); text-align: center; font-style: normal; }
.w2-tr-kopf span { display: flex; flex-direction: column; line-height: 1.2; }
.w2-tr-kopf b { font-size: 10.5px; font-weight: 500; }
.w2-tr-kopf small { position: static; font-size: 9px; color: #70757a; text-align: left; }
.w2-tr h5 { margin: 6px 0 3px; font-size: 13px; line-height: 1.25; font-weight: 500; color: #1a0dab; }
.w2-tr p { margin: 0; font-size: 10.5px; line-height: 1.4; color: #4d5156; }
.w2-tr-ort h5 { margin-top: 0; color: #1d1d1f; }
.w2-zu { color: #d93025 !important; }
.w2-tr-knoepfe { display: flex; gap: 6px; margin-top: 8px; }
.w2-tr-knoepfe span { font-size: 10px; padding: 4px 9px; border-radius: 999px; box-shadow: 0 0 0 1px #dadce0; color: #1a73e8; }

.w2-s-alt { background: #c9c9c9; padding: 44px 0 0; gap: 0; }
.w2-adresse { margin: 0 12px 8px; padding: 7px; border-radius: 10px; background: #e4e4e6; font-size: 11px; text-align: center; color: #333; }
.w2-alt-seite { width: 200%; transform: scale(.5); transform-origin: 0 0; background: #fffef4; font-family: "Times New Roman", Times, serif; color: #000; }
.w2-alt-kopf { background: linear-gradient(#3a5f9e, #1d3c74); color: #ffd84a; font: italic 700 22px/1 "Times New Roman", serif; padding: 18px 14px; text-shadow: 2px 2px 0 #000; height: auto; }
.w2-alt-nav { background: #dfe6f2; font-size: 13px; padding: 6px 10px; color: #00e; border-bottom: 2px solid #1d3c74; }
.w2-alt-inhalt { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 14px; }
.w2-alt-bild { height: 120px; background: #ddd; border: 1px solid #999; color: #888; font-size: 12px; display: grid; place-items: center; }
.w2-alt-inhalt h6 { margin: 0 0 8px; font-size: 19px; color: #b00; text-decoration: underline; }
.w2-alt-inhalt p { margin: 0 0 8px; font-size: 14px; line-height: 1.35; }
.w2-alt-bau { color: #f00 !important; font-weight: 700; }
.w2-alt-fuss { margin-top: 20px; padding: 10px; border-top: 1px dashed #999; font-size: 12px; text-align: center; color: #555; }
.w2-alt-fuss span { font-family: monospace; background: #000; color: #0f0; padding: 1px 4px; }
.w2-handy[data-schritt="2"] .w2-s-alt { filter: none; }

.w2-karten { display: grid; gap: 9px; }
.w2-karte-v { height: auto; display: flex; gap: 10px; align-items: center; padding: 9px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #ececec, 0 6px 16px -10px rgba(0,0,0,.25); }
.w2-karte-v i { width: 54px; height: 54px; border-radius: 9px; flex: none; background: #e5e5e5 center top / cover; }
.w2-karte-v:nth-child(1) i { background-color: #d9d4c8; } .w2-karte-v:nth-child(2) i { background-color: #c8d1d9; } .w2-karte-v:nth-child(3) i { background-color: #dad5d0; }
.w2-karte-v span { display: flex; flex-direction: column; gap: 2px; }
.w2-karte-v b { font-size: 12px; font-weight: 600; }
.w2-karte-v small { position: static; font-size: 10px; color: #70757a; text-align: left; }
.w2-karte-wahl { box-shadow: 0 0 0 2px #1a73e8, 0 10px 22px -10px rgba(26,115,232,.5); }

.w2-s-neu { padding: 0; background: #f5f5f3; }
.w2-s-neu img { width: 100%; height: 100%; object-fit: cover; object-position: top; padding-top: 34px; background: #f5f5f3; }
.w2-toast { top: 12px; left: 10px; right: 10px; display: flex; flex-direction: column; gap: 2px; font-weight: 400; background: rgba(28,28,30,.94); box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); }
.w2-toast b { font-size: 13px; font-weight: 600; }
.w2-toast span { font-size: 11px; color: rgba(255,255,255,.75); }
.w2-s-alt { background: #fffef4; }
.w2-alt-seite { min-height: 200%; }
.w2-alt-block { padding: 4px 14px 10px; }
.w2-alt-block h6 { margin: 6px 0; font-size: 16px; color: #1d3c74; text-decoration: underline; }
.w2-alt-block ul { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.5; list-style: square; }
.w2-alt-block p { margin: 0; font-size: 14px; line-height: 1.4; }
.w2-alt-block u { color: #00e; }
.w2-alt-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.w2-alt-karte { height: 90px; border: 1px solid #999; background: #e9e9e9; color: #777; font-size: 12px; display: grid; place-items: center; }
.w2-s-neu img { padding-top: 0; }
.w2-toast { top: 50px; }

.w2-story .w2-zeile > * { transition: opacity .6s ease; }
@media (min-width: 1069px) { .w2-story .w2-zeile:not(.jetzt) > * { opacity: .22 !important; } }

.w2-s-neu { padding: 44px 0 0; background: #f6f2ea; gap: 0; }
.w2-neu-kopf { display: flex; align-items: center; gap: 8px; padding: 6px 14px 10px; }
.w2-neu-logo { display: flex; }
.w2-neu-logo i { width: 11px; height: 11px; border-radius: 50%; margin-right: -3px; background: #c9542f; }
.w2-neu-logo i:nth-child(2) { background: #e3a93a; } .w2-neu-logo i:nth-child(3) { background: #2f6b5c; }
.w2-neu-kopf b { font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: #1f2544; }
.w2-neu-menue { margin-left: auto; width: 18px; height: 10px; border-top: 2px solid #1f2544; border-bottom: 2px solid #1f2544; }
.w2-neu-held { position: relative; margin: 0 10px; border-radius: 18px; overflow: hidden; height: 300px; }
.w2-neu-held img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; padding: 0; }
.w2-neu-held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,40,0) 40%, rgba(20,22,40,.82) 100%); }
.w2-neu-tx { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; color: #fff; }
.w2-neu-tx small { position: static; display: block; text-align: left; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.w2-neu-tx h5 { margin: 4px 0 6px; font-size: 22px; line-height: 1.05; letter-spacing: -.02em; font-weight: 700; }
.w2-neu-tx p { margin: 0; font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.85); }
.w2-neu-leiste { display: flex; gap: 6px; padding: 12px 10px 0; }
.w2-neu-leiste span { flex: 1; text-align: center; font-size: 10px; padding: 7px 0; border-radius: 999px; background: #fff; color: #1f2544; box-shadow: 0 0 0 1px #e7e0d2; }
.w2-s-neu .w2-neu-knopf { margin: 12px 10px 0; width: auto; height: auto; padding: 12px; border-radius: 999px; background: #1f2544; color: #fff; font-size: 12px; font-weight: 600; text-align: center; }


.w2-ende { position: relative; }
.w2-empf { position: absolute; z-index: 3; pointer-events: none; }
.w2-empf canvas { display: block; width: 100%; height: 100%; }
.w2-empf-spiegel canvas { transform: scaleX(-1); }
.w2-gedrueckt { transform: scale(.95); transition: transform .12s ease; }
@media (max-width: 1068px) { .w2-empf { display: none; } }  


.w2-story .w2-zeile { display: block; min-height: 0; height: 125vh; padding: 0; }
.w2-story .w2-zeile:last-child { height: 110vh; }
.w2-anker { position: sticky; top: calc(50vh - 5.2em); }
.w2-story .w2-zeile:not(.jetzt) > * { opacity: 1 !important; }
@media (min-width: 1069px) { .w2-story .w2-zeile:not(.jetzt) .w2-anker { opacity: .2; } }
.w2-anker { transition: opacity .5s ease; }
.w2-leiste-spur { position: absolute; top: 0; bottom: 0; left: -56px; width: 20px; pointer-events: none; z-index: 2; }
.w2-leiste { position: sticky; top: calc(50vh - 110px); height: 220px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; --fort: 0; }
.w2-leiste::before, .w2-leiste-fuell { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,.14); border-radius: 2px; }
.w2-leiste-fuell { bottom: auto; height: calc((100% - 12px) * var(--fort)); background: #4A7DFF; }
.w2-punkt { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px rgba(255,255,255,.25); transition: transform .4s ease, box-shadow .4s ease, background .4s ease; }
.w2-punkt.war { background: #4A7DFF; box-shadow: 0 0 0 2px #4A7DFF; }
.w2-punkt.jetzt { background: #4A7DFF; box-shadow: 0 0 0 2px #4A7DFF, 0 0 0 7px rgba(74,125,255,.25); transform: scale(1.25); }
.w2-punkt.naechst { box-shadow: 0 0 0 2px rgba(255,255,255,.6); animation: w2-naechst 1.8s ease-in-out infinite; }
@keyframes w2-naechst { 50% { box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 0 6px rgba(255,255,255,.12); } }
@media (max-width: 1068px) {
  .w2-story .w2-zeile { height: 140svh; padding: 0; }
  .w2-story .w2-zeile:last-child { height: 115svh; }
  .w2-anker { top: 11svh; }
  .w2-leiste-spur { left: auto; right: -6px; }
  .w2-leiste { top: 11svh; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .w2-punkt.naechst { animation: none; } }

.w2-story .w2-zeile { padding-top: 32vh; height: 150vh; }
.w2-story .w2-zeile:first-child { padding-top: 6vh; height: 120vh; }
.w2-story .w2-zeile:last-child { height: 130vh; }
@media (max-width: 1068px) {
  .w2-story .w2-zeile { padding-top: 30svh; height: 150svh; }
  .w2-story .w2-zeile:first-child { padding-top: 0; height: 120svh; }
  .w2-story .w2-zeile:last-child { height: 130svh; }
}
@media (max-width: 1068px) { .w2-story .w2-zeile:not(.jetzt) .w2-anker { opacity: .25; } }


.w2-story .w2-zeile p b { color: #5f9dff; }
.w2-leiste { height: 180px; top: calc(50vh - 90px); }
.w2-leiste::before { width: 1px; background: rgba(255,255,255,.12); }
.w2-leiste-fuell { width: 1px; background: rgba(255,255,255,.45); }
.w2-punkt { width: 5px; height: 5px; background: rgba(255,255,255,.18); box-shadow: none; }
.w2-punkt.war { background: rgba(255,255,255,.55); box-shadow: none; }
.w2-punkt.jetzt { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); transform: scale(1.3); }
.w2-punkt.naechst { background: rgba(255,255,255,.35); box-shadow: none; animation: w2-naechst2 1.8s ease-in-out infinite; }
@keyframes w2-naechst2 { 50% { box-shadow: 0 0 0 3px rgba(255,255,255,.1); } }
.w2-story .w2-zeile { padding-top: 28vh; height: 138vh; }
.w2-story .w2-zeile:first-child { padding-top: 6vh; height: 112vh; }
.w2-story .w2-zeile:last-child { height: 122vh; }
@media (max-width: 1068px) {
  .w2-leiste { height: 100px; top: 11svh; }
  .w2-story .w2-zeile { padding-top: 26svh; height: 138svh; }
  .w2-story .w2-zeile:first-child { padding-top: 0; height: 112svh; }
  .w2-story .w2-zeile:last-child { height: 122svh; }
}

@media (min-width: 1069px) { .w2-story .w2-zeile:not(.jetzt) > .w2-anker { opacity: .2 !important; } }
@media (max-width: 1068px) { .w2-story .w2-zeile:not(.jetzt) > .w2-anker { opacity: .25 !important; } }

.w2-story .w2-zeile p b {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%),
                    linear-gradient(90deg, #4A7DFF 0%, #5f9dff 30%, #86dcf5 55%, #5f9dff 78%, #4A7DFF 100%);
  background-size: 250% 100%, 220% 100%; background-repeat: no-repeat;
  animation: foot-leben 9s ease-in-out infinite; text-shadow: none;
}
@media (prefers-reduced-motion: reduce) { .w2-story .w2-zeile p b { animation: none; background-position: 0% 0, 0% 0; } }


main[data-tempo="straff"] [data-m="layers"] { height: 270vh; }
main[data-tempo="straff"] .w2 { padding-top: calc(var(--s-section) * .68); padding-bottom: calc(var(--s-section) * .68); }
main[data-tempo="straff"] .w2-frueher { padding-top: 0; }
main[data-tempo="straff"] .s2-ende { padding-top: calc(var(--s-section) * .68); padding-bottom: calc(var(--s-section) * .68); }
main[data-tempo="straff"] .w2-zeile { transition-duration: .6s; }

.w2-story .w2-zeile { padding-top: 20vh; height: 98vh; }
.w2-story .w2-zeile:first-child { padding-top: 4vh; height: 82vh; }
.w2-story .w2-zeile:last-child { height: 90vh; }
@media (max-width: 1068px) {
  .w2-story .w2-zeile { padding-top: 20svh; height: 100svh; }
  .w2-story .w2-zeile:first-child { padding-top: 0; height: 85svh; }
  .w2-story .w2-zeile:last-child { height: 92svh; }
}


@media (max-width: 1068px) {
  .w2-story .w2-handy-spur { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; pointer-events: none; }
  .w2-story .w2-handy { --k: .5; position: sticky; top: calc(100svh - 620px * var(--k) - 96px); margin: 0 -6px 0 auto; transform-origin: top right; scale: var(--k); }
  .w2-handy[data-schritt="0"] { transform: translateY(60px); }
}
@media (max-width: 380px) { .w2-story .w2-handy { --k: .44; } }
@media (max-width: 1068px) {
  .w2-story .w2-handy { --k: .42; top: calc(100svh - 620px * var(--k) - 92px); transition: opacity .5s ease, transform .5s ease; }
  .w2-story .w2-handy.w2-handy-aus { opacity: 0; transform: translateY(40px); }
}
@media (max-width: 380px) { .w2-story .w2-handy { --k: .38; } }
@media (max-width: 1068px) { .w2-story .w2-handy-spur { bottom: -70svh; } }

@media (max-width: 1068px) { .w2-story .w2-zeile:last-child { height: 165svh; } }

@media (max-width: 1068px) {
  .w2-story .w2-handy { transition: opacity .5s ease, transform .5s ease, scale .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1), top .7s cubic-bezier(.2,.7,.2,1); }
  .w2-story .w2-handy[data-schritt="4"] { --k: 1; top: calc(100svh - 300px); translate: calc(156px - 50vw) 0;
    -webkit-mask-image: linear-gradient(#000 30%, transparent 47%); mask-image: linear-gradient(#000 30%, transparent 47%); }
  .w2-story .w2-handy.w2-handy-aus { opacity: 1; transform: none; }
  .w2-story .w2-handy-spur { bottom: -330px; }
}

@media (max-width: 1068px) { .w2-story .w2-zeile:last-child { padding-bottom: 430px; height: calc(165svh + 430px); } }

@media (max-width: 1068px) {
  .w2-story .w2-handy[data-schritt="4"] { -webkit-mask-image: none; mask-image: none; }
  .w2-story .w2-handy::after { content: ""; position: absolute; inset: -2px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .7s ease;
    background: linear-gradient(transparent 28%, #000 46%); }
  .w2-story .w2-handy[data-schritt="4"]::after { opacity: 1; }
  .w2-story .w2-zeile:last-child { height: auto; }
}
@media (max-width: 1068px) {
  .w2-story .w2-handy[data-schritt="4"] { clip-path: inset(-40px -40px 54% -40px); }
  .w2-story .w2-handy::after { background: linear-gradient(transparent 26%, #000 44%); }
}
@media (max-width: 1068px) { .w2-story .w2-handy[data-schritt="4"] { filter: none; clip-path: inset(0 0 54% 0); } }

.w2-person-ruhig img { filter: none; }