@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/schrift/plus-jakarta-sans.woff2) format('woff2');
}
:root {
  --seite: #f4f8ff;
  --weiss: #ffffff;
  --karte: #ffffff;
  --rand: rgba(11, 26, 51, 0.10);
  --rand-stark: rgba(11, 26, 51, 0.24);
  --text: #0b1a33;
  --text-2: #3b4763;
  --text-3: #57627c;
  --akzent: #0075ff;
  --akzent-knopf: #0068e6;
  --akzent-hell: #0068e6;
  --akzent-flaeche: #e6f0ff;
  --rund: 20px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem; line-height: 1.6; color: var(--text-2);
  background: var(--seite);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { color: var(--text); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
h1 { font-size: min(calc((100vw - 2.5rem) / 11), 4rem); }
h1 span { white-space: nowrap; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); }
h3 { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
h1 span, h2 span { display: block; }
h2 span, h3 { text-wrap: balance; }
.leise { color: var(--akzent-hell); }
.wrap { width: min(100% - 2.5rem, 1160px); margin-inline: auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0.85rem 1.8rem; border-radius: 999px;
  background: var(--akzent-knopf); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(0, 104, 230, 0.75);
}
.btn-klein { min-height: 44px; padding: 0.55rem 1.25rem; font-size: 0.9375rem; box-shadow: none; }
.btn-hell { background: #fff; color: var(--akzent-knopf); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.5); }
.btn-rand { background: transparent; color: var(--akzent-knopf); border: 1.5px solid var(--akzent-knopf); box-shadow: none; }
.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-hell); }
.kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.offen {
  color: #7a4f00; background: rgba(255, 181, 71, 0.28); border-radius: 6px; padding: 1px 6px;
  font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.platz {
  display: grid; place-items: center; text-align: center; padding: 24px;
  border: 1.5px dashed var(--rand-stark); border-radius: var(--rund);
  background: rgba(11, 26, 51, 0.035); color: var(--text-3); font-weight: 600; font-size: 0.9375rem;
}
.karte {
  background: var(--karte); border: 1px solid rgba(11, 26, 51, 0.08); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(11, 26, 51, 0.05), 0 22px 44px -30px rgba(11, 26, 51, 0.38);
}
.sek { padding-block: clamp(72px, 10vw, 128px); }
.sek.weiss { background: var(--weiss); }
.sek.weiss .karte { background: var(--seite); box-shadow: none; }
.kopf { max-width: 760px; margin-bottom: clamp(32px, 5vw, 60px); }
.kopf p { margin-top: 20px; font-size: 1.1875rem; line-height: 1.55; max-width: 56ch; }
.entwurf-hinweis { display: block; margin-bottom: 26px; max-width: 78ch; padding: 10px 14px; font-size: 0.9375rem; line-height: 1.5; }
.kopfzeile { position: fixed; top: 0; left: 0; right: 0; z-index: 8; background: rgba(6, 11, 40, 0.92); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.js .kopfzeile:not(.fest) { background: transparent; }
.kopfzeile.fest { background: rgba(6, 11, 40, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7); }
.kopfzeile .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 16px; transition: min-height 0.3s ease; }
.kopfzeile.fest .wrap { min-height: 66px; }
section[id] { scroll-margin-top: 72px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 36px; width: auto; }
@media (max-width: 480px) { .logo img { height: 28px; } }
.nav { display: none; gap: 26px; font-size: 0.9375rem; font-weight: 600; color: var(--text-2); }
.nav a { position: relative; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px; background: #6fb0ff; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 940px) { .nav { display: flex; } }
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.btn .kurz { display: none; }
.menue-knopf { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); cursor: pointer; }
.menue-knopf i { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.3s ease, opacity 0.2s ease; }
.menue-offen .menue-knopf i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue-offen .menue-knopf i:nth-child(2) { opacity: 0; }
.menue-offen .menue-knopf i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 940px) { .menue-knopf { display: none; } }
@media (max-width: 939px) {
  .kopfzeile.menue-offen { background: rgba(6, 11, 40, 0.97); }
  .kopfzeile.menue-offen .nav { display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 0; padding: 8px 20px 20px; background: rgba(6, 11, 40, 0.97); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.7); font-size: 1.125rem; animation: menue-rein 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .kopfzeile.menue-offen .nav a { min-height: 52px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .kopfzeile.menue-offen .nav a::after { display: none; }
}
.login { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 0.875rem; font-weight: 600; color: #c9d4e8; text-decoration: none; transition: color 0.2s ease; }
.login:hover { color: #fff; }
.login svg { flex: none; opacity: 0.85; }
.nav .login-menue { display: none; }
.nav a, .login { white-space: nowrap; }
@media (max-width: 939px) { .login-kopf { display: none; } .kopfzeile.menue-offen .nav .login-menue { display: inline-flex; font-size: 1.125rem; color: #e6ecf7; } .kopfzeile.menue-offen .nav .login-menue svg { width: 18px; height: 18px; } }
@keyframes menue-rein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .btn .lang { display: none; } .btn .kurz { display: inline; } }
@media (prefers-reduced-motion: reduce) { .nav a::after, .menue-knopf i { transition: none; } .kopfzeile.menue-offen .nav { animation: none; } }
.start {
  position: relative; overflow: hidden; isolation: isolate; padding-block: 132px clamp(96px, 11vw, 140px); text-align: center; color: #dbe4f3; background: #060b28;
}
.foto-tiefe { position: absolute; inset: -6% 0; z-index: -3; transform: translate3d(0, var(--tiefe, 0px), 0); will-change: transform; }
.foto-tiefe img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform-origin: 50% 40%; }
.js .seitenkopf .foto-tiefe img { animation: foto-zoom 22s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes foto-zoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.start::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 56% 42% at 50% 33%, rgba(6, 11, 40, 0.82) 0%, rgba(6, 11, 40, 0.66) 55%, rgba(6, 11, 40, 0) 100%),
    linear-gradient(180deg, rgba(6, 11, 40, 0.78) 0%, rgba(6, 11, 40, 0.40) 52%, rgba(6, 11, 40, 0.86) 100%);
}
.start::after, .seitenkopf::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 14%; width: min(1100px, 120vw); height: 560px; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(61, 149, 255, 0.30), rgba(0, 117, 255, 0.10) 55%, transparent);
  opacity: 0.85;
}
.js .start::after, .js .seitenkopf::after { animation: licht 9s ease-in-out infinite alternate; }
@keyframes licht { from { opacity: 0.55; transform: scale(0.94); } to { opacity: 1; transform: scale(1.04); } }
.start > .wrap { position: relative; }
.start { min-height: max(660px, min(100svh, 960px)); display: flex; align-items: center; }
.start > .wrap { flex: none; }
.wand-buehne { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.wand { position: absolute; top: -32%; bottom: -32%; left: -6%; width: 112%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px);
  transform: perspective(1900px) rotateX(22deg) rotateY(-12deg) rotateZ(7deg); transform-origin: 50% 50%; opacity: 0; transition: opacity 1.2s ease; }
.wand.bereit { opacity: 1; }
.spalte { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 26px); animation: wand-hoch 130s linear infinite; will-change: transform; }
.spalte:nth-child(2n) { animation-name: wand-runter; animation-duration: 150s; }
.spalte:nth-child(3) { animation-duration: 170s; }
@keyframes wand-hoch { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes wand-runter { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
.start.ruht .spalte { animation-play-state: paused; }
.kachel { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #0b1438;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.kachel img { display: block; width: 100%; height: auto; transform: translate3d(0, 0, 0); transition: transform 1.4s cubic-bezier(0.45, 0, 0.55, 1); }
.kachel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(6, 11, 40, 0.5); transition: opacity 0.45s ease; }
.kachel::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.45s ease;
  box-shadow: inset 0 0 0 2px #6fb0ff, 0 0 0 4px rgba(0, 117, 255, 0.35), 0 0 60px 6px rgba(0, 117, 255, 0.55); }
@media (hover: hover) and (pointer: fine) {
  .start.mit-wand .wand-buehne { pointer-events: auto; }
  .start > .wrap { pointer-events: none; }
  .start > .wrap a, .start > .wrap button, .start > .wrap .sw-feld { pointer-events: auto; }
  .kachel:hover::after { opacity: 0; }
  .kachel:hover::before { opacity: 1; }
  .kachel:hover img { transform: translate3d(0, var(--fahrt, 0%), 0); transition: transform 5s cubic-bezier(0.45, 0, 0.55, 1); }
  .wand:has(.kachel:hover) .spalte { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .kachel img { transition: none; } .kachel:hover img { transform: none; } }
.start.mit-wand::before {
  background:
    radial-gradient(ellipse 46% 42% at 50% 47%, rgba(6, 11, 40, 0.88) 0%, rgba(6, 11, 40, 0.74) 55%, rgba(6, 11, 40, 0) 100%),
    linear-gradient(180deg, rgba(6, 11, 40, 0.55) 0%, rgba(6, 11, 40, 0) 26%, rgba(6, 11, 40, 0) 74%, rgba(6, 11, 40, 0.9) 100%);
}
.blick-schatten { position: absolute; z-index: -1; left: 0; top: 0; width: 400vmax; height: 400vmax; margin: -200vmax 0 0 -200vmax; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  background: radial-gradient(circle var(--lr, 300px) at 50% 50%, rgba(6, 11, 40, 0) 0%, rgba(6, 11, 40, 0.06) 45%, rgba(6, 11, 40, 0.44) 100%); }
.blick { position: absolute; z-index: -1; left: 0; top: 0; border-radius: 50%; border: 1px solid rgba(61, 149, 255, 0.38); pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  box-shadow: 0 0 0 1px rgba(61, 149, 255, 0.08), inset 0 0 80px rgba(61, 149, 255, 0.08); }
.blick-schatten.da, .blick.da { opacity: 1; }
@media (max-width: 760px) {
  .wand { left: -30%; width: 175%; top: -14%; bottom: auto; height: 96%; transform: perspective(1400px) rotateX(24deg) rotateY(-10deg) rotateZ(9deg); }
  .start.mit-wand::before { background: linear-gradient(180deg, rgba(6, 11, 40, 0.62) 0%, rgba(6, 11, 40, 0.78) 18%, rgba(6, 11, 40, 0.90) 30%, rgba(6, 11, 40, 0.92) 80%, rgba(6, 11, 40, 0.96) 100%); }
}
@media (prefers-reduced-motion: reduce) { .spalte { animation: none; } .wand { transition: none; } }
.held-mass { min-height: max(100svh, 680px); padding: calc(var(--kopf-h, 72px) + 32px) 0 calc(56px + 72px); }
.held-mass::after { display: none; }
.held-mass.mit-wand .foto-tiefe { opacity: 0; transition: opacity 1s ease; }
.held-mass > .wrap { width: min(100% - 2 * clamp(18px, 5vw, 72px), 1320px); }
.held-mass .start-text { max-width: 940px; margin: 0; text-align: left; }
.held-titel { color: #fff; font-size: clamp(3rem, 8.2vw, 8rem); font-weight: 800; letter-spacing: -0.048em; line-height: 0.96; }
.held-titel em { font-style: normal; color: #3d95ff; }
.held-titel::before { content: ""; display: block; width: 0.82em; height: 0.12em; min-height: 5px; background: #3d95ff; border-radius: 2px; margin-bottom: 0.26em; transform-origin: left center; }
.js .held-titel::before { animation: held-balken 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both; }
@keyframes held-balken { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.start.held-mass .unter { margin: 26px 0 0; max-width: 33em; font-size: clamp(1.06rem, 1.35vw, 1.28rem); line-height: 1.55; color: #c3cde4; text-align: left; }
.held-knoepfe { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.held-knoepfe .pf { margin-left: 10px; transition: transform 0.25s ease; }
.held-knoepfe .btn:hover .pf { transform: translateX(3px); }
.btn-glas { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.4); box-shadow: none; }
.btn-glas:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.held-fuss { position: absolute; left: 0; right: 0; bottom: calc(26px + 72px); pointer-events: none; }
.held-fuss .wrap { width: min(100% - 2 * clamp(18px, 5vw, 72px), 1320px); display: flex; justify-content: flex-end; }
.held-fuss small { font-size: 13px; color: rgba(255, 255, 255, 0.55); display: inline-flex; gap: 10px; align-items: center; }
.held-fuss small::before { content: ""; width: 28px; height: 1px; background: rgba(255, 255, 255, 0.35); }
.held-mass .wand { top: -28%; bottom: -28%; left: 30%; width: 104%; transform: perspective(1900px) rotateX(24deg) rotateY(-20deg) rotateZ(8deg); transform-origin: 30% 50%; }
.held-mass.mit-wand::before {
  background:
    linear-gradient(90deg, rgba(6, 11, 40, 0.96) 0, rgba(6, 11, 40, 0.82) 34%, rgba(6, 11, 40, 0) 64%),
    linear-gradient(0deg, rgba(6, 11, 40, 0.9) 0, rgba(6, 11, 40, 0) 26%);
}
@media (max-width: 760px) {
  .held-mass { align-items: flex-end; padding-bottom: calc(40px + 72px); min-height: max(100svh, 640px); }
  .held-mass .wand { left: -24%; width: 170%; top: -18%; bottom: auto; height: 90%; transform: perspective(1400px) rotateX(26deg) rotateY(-14deg) rotateZ(10deg); }
  .held-mass.mit-wand::before { background: linear-gradient(0deg, rgba(6, 11, 40, 1) 0, rgba(6, 11, 40, 0.94) 44%, rgba(6, 11, 40, 0) 74%); }
  .held-fuss { display: none; }
}
@media (prefers-reduced-motion: reduce) { .js .held-titel::before { animation: none; } }
.js .rein { animation: rein 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.12s + var(--r, 0) * 0.11s); }
@keyframes rein { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .foto-tiefe img { object-position: 28% 50%; }
  .start::before { background: linear-gradient(180deg, rgba(6, 11, 40, 0.86) 0%, rgba(6, 11, 40, 0.78) 62%, rgba(6, 11, 40, 0.70) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .js .foto-tiefe img, .js .start::after, .js .seitenkopf::after, .js .rein { animation: none; }
  .foto-tiefe { transform: none; }
}
.start h1 { color: #fff; }
.start .leise { color: #6fb0ff; }
.start .kicker { color: #9cc8ff; }
.start .haken-zeile { color: #fff; }
.start .haken-zeile li::before { background: rgba(255, 255, 255, 0.16); color: #9cc8ff; }
.start .geraet .rahmen { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.85); }
.kopfzeile .nav { color: #e6ecf7; }
.start .kicker { justify-content: center; }
.start .kicker::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.start p.unter { margin: 22px auto 0; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); max-width: 36em; color: #dbe4f3; }
.start-aktion { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.start-aktion small { font-size: 0.9375rem; color: #b8c4d9; }
.haken-zeile { list-style: none; margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.haken-zeile li, .haken li { display: flex; align-items: flex-start; gap: 10px; }
.haken-zeile li::before, .haken li::before {
  content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--akzent-flaeche); color: var(--akzent-hell); font-size: 0.8125rem; font-weight: 800;
}
.geraete { container-type: inline-size; position: relative; width: min(100%, 800px); margin: clamp(40px, 6vw, 64px) auto 0; aspect-ratio: 100 / 46; }
.geraet { position: absolute; }
.geraet .rahmen { background: #101a30; overflow: hidden; box-shadow: 0 2.4cqw 5cqw -2.6cqw rgba(11, 26, 51, 0.7); }
.geraet .mini { border-radius: 0.5cqw; overflow: hidden; }
.g-monitor { left: 20cqw; top: 0; width: 56cqw; }
.g-monitor .rahmen { padding: 1.4cqw 1.4cqw 3cqw; border-radius: 1.6cqw; }
.g-monitor::after { content: ""; display: block; width: 15cqw; height: 5.4cqw; margin: 0 auto; background: linear-gradient(#cfd6e2, #a9b3c5); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.g-laptop { right: 3cqw; bottom: 0; width: 36cqw; z-index: 2; }
.g-laptop .rahmen { padding: 1cqw 1cqw 1.2cqw; border-radius: 1.3cqw 1.3cqw 0 0; }
.g-laptop::after { content: ""; display: block; height: 1.5cqw; margin-inline: -3cqw; border-radius: 0 0 1.6cqw 1.6cqw; background: linear-gradient(#d5dbe6, #9ea9bd); }
.g-tablet { left: 10cqw; bottom: 0.4cqw; width: 15cqw; z-index: 2; }
.g-tablet .rahmen { padding: 0.9cqw; border-radius: 1.6cqw; }
.g-tablet .mini { aspect-ratio: 3 / 4; }
.g-handy { left: 4cqw; bottom: 0; width: 8.4cqw; z-index: 3; }
.g-handy .rahmen { padding: 0.6cqw; border-radius: 1.5cqw; }
.g-handy .mini { aspect-ratio: 9 / 18; }
.band { --ueber: 72px; position: relative; z-index: 2; margin-top: calc(-1 * var(--ueber)); background: linear-gradient(transparent 0 var(--ueber), var(--seite) var(--ueber)); }
.band-raster { display: grid; gap: 10px; padding: 10px; border-radius: 30px; background: linear-gradient(140deg, #0b1a33, #0a2a66 60%, #0b1a33);
  border: 1px solid rgba(111, 176, 255, 0.4); box-shadow: 0 0 0 6px rgba(0, 117, 255, 0.10), 0 44px 80px -40px rgba(0, 85, 200, 0.9); }
.band-kachel { position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.6vw, 32px); border-radius: 22px; color: #dbe4f3; text-decoration: none;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; }
.band-kachel:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.3); }
.band-kachel:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 3px; }
.band-kachel .zeichen { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); }
.band-kachel svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.band-kachel h3 { color: #fff; font-size: 1.375rem; }
.band-kachel p { font-size: 1rem; color: #dbe4f3; }
.band-kachel .weiter { margin-top: 6px; font-weight: 700; color: #fff; }
.band-kachel .weiter::after { content: " →"; }
.band-haupt { background: linear-gradient(135deg, #1c8bff 0%, #0068e6 55%, #0050c0 100%); border-color: rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 24px 50px -26px rgba(0, 104, 230, 0.95); }
.band-haupt:hover { background: linear-gradient(135deg, #2b94ff 0%, #0a72f0 55%, #0058d0 100%); }
.band-haupt::after { content: ""; position: absolute; right: -80px; top: -110px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 65%); pointer-events: none; }
.band-haupt .marke-klein { display: inline-block; justify-self: start; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.band-haupt h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.band-haupt p { font-size: 1.125rem; color: #fff; max-width: 34em; }
.band-haupt .zeichen { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); }
.band-neben { display: grid; gap: 10px; }
@media (min-width: 900px) { .band-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .band-kachel { transition: none; } .band-kachel:hover { transform: none; } }
.zwei { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .zwei { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; } }
.schau { container-type: inline-size; position: relative; padding: 7% 7% 10%; border-radius: calc(var(--rund) + 6px); background: linear-gradient(140deg, #dbe8ff, #eef4ff); }
.schau .fenster { width: 86%; }
.schau .g-handy { position: absolute; left: auto; right: 6%; bottom: 5%; width: 21%; }
.schau .g-handy .rahmen { padding: 1.4cqw; border-radius: 3.6cqw; background: #101a30; box-shadow: 0 5cqw 9cqw -5cqw rgba(11, 26, 51, 0.8); }
.schau .g-handy .mini { border-radius: 2.4cqw; overflow: hidden; }
.haken { list-style: none; margin-top: 28px; display: grid; gap: 14px 28px; font-weight: 600; color: var(--text); }
@media (min-width: 560px) { .haken { grid-template-columns: 1fr 1fr; } }
.lead { margin-top: 18px; font-size: 1.1875rem; font-weight: 700; color: var(--text); line-height: 1.45; }
.zwei h2 { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.375rem); }
.zwei .text p + p { margin-top: 18px; }
.zwei .text .lead + p { margin-top: 22px; }
.beispiele .kopf { margin-bottom: clamp(20px, 3vw, 36px); }
.rondell { --karte-b: min(82vw, 520px); }
.rondell-bahn {
  display: flex; gap: clamp(14px, 2.4vw, 28px); list-style: none;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 20px calc(50% - var(--karte-b) / 2) 26px; scrollbar-width: none;
}
.rondell-bahn::-webkit-scrollbar { display: none; }
.rondell-bahn:focus-visible { outline: 2px solid var(--akzent); outline-offset: -4px; }
.rad { flex: 0 0 var(--karte-b); scroll-snap-align: center; opacity: 0.55; transition: opacity 0.25s linear; }
.rad.mitte { opacity: 1; }
.rad figure { position: relative; }
.rad figcaption { margin-top: 16px; text-align: center; }
.rad figcaption strong { display: block; color: var(--text); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.015em; }
.rad figcaption span { font-size: 0.9375rem; color: var(--text-3); }
.fenster { border-radius: 16px; overflow: hidden; border: 1px solid var(--rand-stark); box-shadow: 0 24px 44px -30px rgba(11, 26, 51, 0.55); background: var(--m-bg); }
.fenster-leiste { display: flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px; background: #e3e8f1; }
.fenster-leiste i { width: 8px; height: 8px; border-radius: 50%; background: #b3bccd; }
.fenster-leiste b { flex: 1; height: 14px; margin-left: 10px; border-radius: 999px; background: #fff; }
.mini { container-type: inline-size; aspect-ratio: 16 / 10; background: var(--m-bg); color: var(--m-text); text-align: left; }
.mini-innen { height: 100%; display: grid; grid-template-rows: auto 1fr; padding: 3.4cqw 4.4cqw 4.4cqw; gap: 2cqw; }
.mini-kopf { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.mini-kopf em { font-style: normal; font-weight: 800; font-size: 2.7cqw; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 1.4cqw; white-space: nowrap; }
.mini-kopf em::before { content: ""; width: 2.8cqw; height: 2.8cqw; border-radius: 0.8cqw; background: var(--m-akzent); }
.mini-kopf b { font-weight: 700; font-size: 1.9cqw; padding: 1.3cqw 2.6cqw; border-radius: 99cqw; background: var(--m-akzent); color: var(--m-knopf-text, #fff); white-space: nowrap; }
.mini-start { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4cqw; align-items: center; }
.mini-start small { display: inline-block; font-size: 1.8cqw; font-weight: 600; padding: 0.7cqw 1.8cqw; border-radius: 99cqw; border: 1px solid var(--m-rand); color: var(--m-leise); }
.mini-start h4 { margin-top: 2.2cqw; font-size: 5.6cqw; font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; color: var(--m-text); }
.mini-start h4 span { display: block; color: var(--m-akzent-text, var(--m-akzent)); }
.mini-start p { margin-top: 2.2cqw; font-size: 2.2cqw; line-height: 1.45; color: var(--m-leise); max-width: 28em; }
.mini-start u { display: inline-block; margin-top: 3cqw; text-decoration: none; font-weight: 700; font-size: 2.2cqw; padding: 1.8cqw 3.6cqw; border-radius: 99cqw; background: var(--m-akzent); color: var(--m-knopf-text, #fff); }
.mini-bild { position: relative; align-self: stretch; min-height: 34cqw; border-radius: 3cqw; background: var(--m-bild); display: grid; place-items: center; font-size: 2cqw; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.mini-bild i { position: absolute; left: 6%; right: 6%; bottom: -3cqw; height: 8cqw; border-radius: 2cqw; background: var(--m-karte); border: 1px solid var(--m-rand); box-shadow: 0 2cqw 4cqw -2.4cqw rgba(0, 0, 0, 0.4); }
.mini.hoch .mini-innen { padding: 7cqw 7cqw 0; gap: 6cqw; }
.mini.hoch .mini-kopf em { font-size: 6cqw; gap: 2.4cqw; }
.mini.hoch .mini-kopf em::before { width: 6cqw; height: 6cqw; border-radius: 1.6cqw; }
.mini.hoch .mini-kopf b { display: none; }
.mini.hoch .mini-start { grid-template-columns: 1fr; gap: 7cqw; align-content: start; }
.mini.hoch .mini-start small { font-size: 4cqw; padding: 1.2cqw 3.4cqw; }
.mini.hoch .mini-start h4 { margin-top: 4cqw; font-size: 11cqw; }
.mini.hoch .mini-start p { margin-top: 4cqw; font-size: 4.6cqw; }
.mini.hoch .mini-start u { margin-top: 5cqw; font-size: 4.6cqw; padding: 3.2cqw 6.4cqw; }
.mini.hoch .mini-bild { min-height: 60cqw; border-radius: 5cqw 5cqw 0 0; font-size: 4.4cqw; }
.mini.hoch .mini-bild i { display: none; }
.t-erstblick { --m-bg: #f4f8ff; --m-text: #0b1a33; --m-leise: #57627c; --m-akzent: #0075ff; --m-akzent-text: #0068e6; --m-rand: rgba(11, 26, 51, 0.16); --m-karte: #fff; --m-bild: linear-gradient(140deg, #9cc8ff, #0068e6); }
.t-zahn { --m-bg: #f1fbfb; --m-text: #0c2b33; --m-leise: #4d6a70; --m-akzent: #0e8f9c; --m-akzent-text: #0b7884; --m-rand: rgba(12, 43, 51, 0.16); --m-karte: #fff; --m-bild: linear-gradient(140deg, #7fd6dc, #0e8f9c); }
.t-garten { --m-bg: #f3f9f1; --m-text: #17301d; --m-leise: #4f6a55; --m-akzent: #2c8a47; --m-akzent-text: #237239; --m-rand: rgba(23, 48, 29, 0.16); --m-karte: #fff; --m-bild: linear-gradient(140deg, #9bd49f, #2c8a47); }
.t-handwerk { --m-bg: #1d232c; --m-text: #fff; --m-leise: #b7c0cd; --m-akzent: #f08a24; --m-knopf-text: #1d232c; --m-rand: rgba(255, 255, 255, 0.2); --m-karte: #2a323e; --m-bild: linear-gradient(140deg, #f6b064, #b85f0c); }
.t-friseur { --m-bg: #fdf4f6; --m-text: #3a1524; --m-leise: #7a5262; --m-akzent: #c2477d; --m-akzent-text: #a8366a; --m-rand: rgba(58, 21, 36, 0.16); --m-karte: #fff; --m-bild: linear-gradient(140deg, #f0a7c4, #c2477d); }
.t-kosmetik { --m-bg: #f7f4ff; --m-text: #241a45; --m-leise: #645a86; --m-akzent: #7c4ef0; --m-akzent-text: #6a3de0; --m-rand: rgba(36, 26, 69, 0.16); --m-karte: #fff; --m-bild: linear-gradient(140deg, #c3adff, #7c4ef0); }
.t-fitness { --m-bg: #14161b; --m-text: #fff; --m-leise: #b4b9c4; --m-akzent: #ef4444; --m-akzent-text: #ff6b6b; --m-rand: rgba(255, 255, 255, 0.2); --m-karte: #20242c; --m-bild: linear-gradient(140deg, #ff8a8a, #b91c1c); }
.t-gastro { --m-bg: #fdf8ee; --m-text: #33260c; --m-leise: #715f3a; --m-akzent: #b7791f; --m-akzent-text: #8f5c10; --m-rand: rgba(51, 38, 12, 0.18); --m-karte: #fff; --m-bild: linear-gradient(140deg, #f0cf8a, #b7791f); }
.rondell-bedienung { display: flex; align-items: center; justify-content: center; gap: 18px; }
.rondell-knopf { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rand-stark); background: #fff; color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer; font-family: inherit; box-shadow: 0 8px 18px -12px rgba(11, 26, 51, 0.5); }
.rondell-knopf:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.rondell-stand { min-width: 5.5rem; text-align: center; font-size: 0.9375rem; font-weight: 600; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .rondell-bahn { scroll-behavior: auto; } }
.prinzip { margin-top: clamp(40px, 6vw, 72px); padding: clamp(22px, 3vw, 34px); display: grid; gap: 10px 40px; align-items: center; background: var(--akzent-flaeche); border-color: rgba(0, 117, 255, 0.22); box-shadow: none; }
.prinzip h3 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.prinzip h3 span { display: block; }
.prinzip h3 span + span { color: var(--akzent-hell); }
.prinzip p { color: var(--text-2); max-width: 52ch; }
@media (min-width: 860px) { .prinzip { grid-template-columns: auto minmax(0, 1fr); } }
.beispiele { position: relative; overflow: hidden; color: #cfd9ea; padding-bottom: clamp(56px, 8vw, 96px);
  background: radial-gradient(ellipse 46% 42% at 50% 56%, rgba(0, 117, 255, 0.42), transparent 72%), radial-gradient(ellipse 60% 30% at 50% 0%, rgba(61, 149, 255, 0.18), transparent 70%), #060b28; }
.beispiele .kopf { margin-inline: auto; text-align: center; }
.beispiele .kopf .kicker { justify-content: center; color: #9cc8ff; }
.beispiele .kopf .kicker::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.beispiele .kopf p { margin-inline: auto; color: #cfd9ea; }
.beispiele h2 { color: #fff; }
.beispiele h2 .leise { color: #6fb0ff; }
.beispiele .kopf .offen { background: rgba(255, 226, 170, 0.96); }
.reiter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 8px; }
@media (max-width: 760px) { .reiter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-inline: -20px; padding-inline: 20px; } .reiter::-webkit-scrollbar { display: none; } .reiter button { flex: none; } }
.reiter button { min-height: 44px; padding: 8px 18px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.9375rem; font-weight: 600; color: #dbe4f3;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.reiter button:hover { background: rgba(255, 255, 255, 0.12); }
.reiter button[aria-pressed="true"] { background: #0075ff; border-color: #6fb0ff; color: #fff; box-shadow: 0 0 0 5px rgba(0, 117, 255, 0.18), 0 10px 30px -10px rgba(0, 117, 255, 0.9); }
.reiter button:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 3px; }
.buehne { position: relative; }
.rondell-wort { position: absolute; left: 50%; top: -0.12em; transform: translateX(-50%); white-space: nowrap; pointer-events: none; user-select: none;
  font-size: clamp(4.5rem, 17vw, 15rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.13); transition: opacity 0.3s ease; }
.beispiele .rondell { position: relative; --karte-b: min(84vw, 640px); --luecke: clamp(14px, 2.4vw, 28px); overflow: hidden; }
.beispiele .rondell-bahn { display: flex; gap: var(--luecke); list-style: none; padding: clamp(40px, 6vw, 80px) 0 20px; margin: 0; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.beispiele .rondell-bahn img, .beispiele .rondell-bahn .vorlage-knopf { -webkit-user-drag: none; user-drag: none; }
.beispiele .rondell-bahn.zieht { transition: none; cursor: grabbing; }
.beispiele .rondell-bahn .rad { flex: 0 0 var(--karte-b); scroll-snap-align: none; }
.beispiele .rad { opacity: 0.92; transition: opacity 0.38s ease-out; }
.beispiele .rad.mitte { opacity: 1; }
.beispiele .rad:not(.mitte) { pointer-events: none; }
.rad-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; opacity: 0; transition: opacity 0.3s ease; }
.beispiele .rad.mitte .rad-knoepfe { opacity: 1; }
.rad-knoepfe .btn-hell { color: var(--text); }
.rondell-wort { transition: opacity 0.19s ease-out, transform 0.19s ease-out; }
.rondell-wort.wechsel { opacity: 0; transform: translateX(-50%) translateY(8px); }
.vorlage-knopf { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; border-radius: 18px; }
.vorlage-knopf:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 5px; }
.beispiele .fenster { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); transition: border-color 0.38s ease-out; }
.beispiele .rad.mitte .fenster { border-color: rgba(156, 200, 255, 0.75); }
.beispiele .vorlage-knopf { position: relative; }
.beispiele .vorlage-knopf::before { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; opacity: 0; transition: opacity 0.38s ease-out;
  box-shadow: 0 0 0 6px rgba(0, 117, 255, 0.16), 0 0 90px 10px rgba(0, 117, 255, 0.55), 0 40px 70px -30px rgba(0, 0, 0, 0.9); }
.beispiele .rad.mitte .vorlage-knopf::before { opacity: 1; }
.vorlage-live { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.vorlage-live iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform: scale(var(--s, 0.4)); transform-origin: 0 0; pointer-events: none; background: #fff; }
.vorlage-fenster { width: min(96vw, 1180px); height: min(94vh, 1400px); padding: 0; border: 0; border-radius: 20px; background: #060b28; color: #dbe4f3; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.9); overflow: hidden; display: none; grid-template-rows: auto 1fr; }
.vorlage-fenster[open] { display: grid; }
.vorlage-fenster::backdrop { background: rgba(6, 11, 40, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vf-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 18px; background: #0b1a33; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.vf-leiste b { display: block; color: #fff; font-size: 1.0625rem; }
.vf-leiste span { font-size: 0.8125rem; color: #9cc8ff; }
.vf-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-knopf { min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.4); background: transparent; color: #fff; font: 600 0.875rem/1 inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.vf-knopf.haupt { background: #0075ff; border-color: #0075ff; }
.vf-inhalt { overflow: hidden; padding: 0; background: #fff; }
.vf-inhalt iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 520px) { .vf-leiste { padding: 10px 12px; } .vf-knopf { flex: 1 1 auto; justify-content: center; padding-inline: 12px; } }
.vorlage-lupe { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(6, 11, 40, 0.86); color: #fff; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity 0.25s ease; }
.beispiele .rad.mitte .vorlage-lupe { opacity: 1; }
.beispiele .fenster { position: relative; }
.wahl { margin-top: 18px; display: none; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font-weight: 600; }
.wahl.da { display: inline-flex; }
.wahl b { color: #9cc8ff; }
.beispiele .rad figure::after { content: ""; display: block; height: 26px; margin: 10px 8% 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(111, 176, 255, 0.5), transparent 70%); opacity: 0; transition: opacity 0.3s ease; }
.beispiele .rad.mitte figure::after { opacity: 1; }
.beispiele .rad figcaption { margin-top: 6px; }
.beispiele .rad figcaption strong { color: #fff; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; }
.beispiele .rad figcaption span { color: #9cc8ff; font-weight: 600; }
.beispiele .rondell-knopf { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; box-shadow: none; }
.beispiele .rondell-knopf:hover:not(:disabled) { background: #0075ff; border-color: #6fb0ff; }
.beispiele .rondell-stand { color: #cfd9ea; }
.beispiele .prinzip { background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)); border-color: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.beispiele .prinzip h3 { color: #fff; }
.beispiele .prinzip h3 span + span { color: #6fb0ff; }
.beispiele .prinzip p { color: #cfd9ea; }
@media (prefers-reduced-motion: reduce) { .beispiele .rad, .beispiele .fenster, .reiter button, .rondell-wort, .beispiele .rondell-bahn, .rad-knoepfe, .beispiele .vorlage-knopf::before { transition: none; } }
.faecher { position: relative; height: 172px; margin: -6px -6px 8px; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse 70% 80% at 50% 100%, #cfe1ff, #eef4ff 70%); }
.faecher > button { position: absolute; left: 50%; bottom: -14px; width: 36%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px;
  transform-origin: 50% 135%; transform: translateX(-50%) rotate(var(--w, 0deg)); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.faecher > button:nth-child(1) { --w: -17deg; }
.faecher > button:nth-child(2) { --w: 0deg; z-index: 1; }
.faecher > button:nth-child(3) { --w: 17deg; }
.faecher.vier > button { width: 27%; bottom: 20px; transform-origin: 50% 210%; align-self: end; }
.faecher.vier > button:nth-child(1) { --w: -21deg; }
.faecher.vier > button:nth-child(2) { --w: -7deg; z-index: 1; }
.faecher.vier > button:nth-child(3) { --w: 7deg; z-index: 1; }
.faecher.vier > button:nth-child(4) { --w: 21deg; bottom: 6px; }
.zusatz:hover .faecher > button:nth-child(1) { --w: -22deg; }
.zusatz:hover .faecher > button:nth-child(3) { --w: 22deg; }
.zusatz:hover .faecher.vier > button:nth-child(1) { --w: -26deg; }
.zusatz:hover .faecher.vier > button:nth-child(2) { --w: -9deg; }
.zusatz:hover .faecher.vier > button:nth-child(3) { --w: 9deg; }
.zusatz:hover .faecher.vier > button:nth-child(4) { --w: 26deg; }
.faecher > button:hover, .faecher > button:focus-visible, .faecher > button.aktiv { z-index: 3; transform: translateX(-50%) rotate(var(--w, 0deg)) translateY(-12px); }
.faecher > button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.blatt { container-type: inline-size; display: block; width: 100%; overflow: hidden; background: #fff; border-radius: 9% / 7%; border: 1px solid rgba(11, 26, 51, 0.12); box-shadow: 0 12px 24px -12px rgba(11, 26, 51, 0.6); text-align: left; }
.blatt .bild { display: block; background: var(--m-bild, linear-gradient(140deg, #9cc8ff, #0068e6)); }
.blatt .text { display: grid; gap: 4.5cqw; align-content: start; padding: 8cqw; }
.blatt .zeile { display: block; height: 4.6cqw; border-radius: 9cqw; background: #cfd6e4; }
.blatt .zeile.dick { height: 7cqw; width: 82%; background: #0b1a33; }
.blatt .zeile.kurz { width: 58%; }
.blatt .knopf { display: block; height: 11cqw; width: 48%; border-radius: 99cqw; background: var(--m-akzent, #0075ff); }
.b-anzeige { aspect-ratio: 1 / 1; display: grid; grid-template-rows: 56% 1fr; border-radius: 9%; }
.b-funnel { aspect-ratio: 9 / 15; display: grid; grid-template-rows: 34% 1fr; border-radius: 13% / 8%; }
.b-artikel { aspect-ratio: 3 / 4; display: grid; grid-template-rows: 40% 1fr; }
.b-text { aspect-ratio: 3 / 4; }
.b-text .text { padding: 11cqw 10cqw; gap: 5.5cqw; }
.b-landing { aspect-ratio: 3 / 5; display: grid; grid-template-rows: 9% 30% 1fr; }
.b-landing .leiste { display: block; background: #e3e8f1; }
.b-design { aspect-ratio: 16 / 12; padding: 0; border-radius: 6% / 8%; }
.faecher.quer > button { width: 58%; bottom: 14px; transform-origin: 50% 190%; }
.faecher.quer > button:nth-child(1) { --w: -13deg; }
.faecher.quer > button:nth-child(3) { --w: 13deg; }
.zusatz:hover .faecher.quer > button:nth-child(1) { --w: -17deg; }
.zusatz:hover .faecher.quer > button:nth-child(3) { --w: 17deg; }
.b-design .mini { aspect-ratio: 16 / 12; }
@media (min-width: 1040px) { .zusaetze .zusatz.breit { grid-template-columns: 300px minmax(0, 1.1fr) minmax(0, 0.9fr); } .zusatz.breit .faecher { margin: -8px 0 -8px -10px; height: 190px; } }
@media (prefers-reduced-motion: reduce) { .faecher > button { transition: none; } }
.zusaetze .faecher > button { cursor: pointer; }
.b-bild { padding: 0; background: #0b1a33; }
.b-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.b-quadrat { aspect-ratio: 1 / 1; } .b-hoch { aspect-ratio: 3 / 4; } .b-quer { aspect-ratio: 16 / 10; }
.schau-inhalt > .blatt.b-bild { aspect-ratio: auto; width: min(100%, 720px); border-radius: 16px; }
.schau-inhalt > .blatt.b-bild img { height: auto; object-fit: contain; }
.anfrage-form { --af-glas: rgba(255, 255, 255, 0.07); --af-linie: rgba(255, 255, 255, 0.16); --af-blau: #3d95ff;
  position: relative; container-type: inline-size; margin-top: 28px; padding: clamp(18px, 3vw, 28px); border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--af-linie); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); isolation: isolate; }
.anfrage-form::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 50% at 15% 0%, rgba(61, 149, 255, 0.35), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(0, 117, 255, 0.22), transparent 70%); }
.af-schritte { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.af-schritte li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: rgba(219, 228, 243, 0.55); line-height: 1.25; transition: color 0.3s; }
.af-schritte li span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.25); font-size: 0.8125rem; font-weight: 800; transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s; }
.af-schritte li.aktiv { color: #fff; }
.af-schritte li.aktiv span { background: var(--af-blau); border-color: var(--af-blau); color: #fff; box-shadow: 0 0 0 5px rgba(61, 149, 255, 0.2), 0 0 24px rgba(61, 149, 255, 0.6); }
.af-schritte li.fertig span { background: rgba(61, 149, 255, 0.22); border-color: var(--af-blau); color: #fff; }
.af-balken { height: 3px; margin: 14px 0 22px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.af-balken i { display: block; height: 100%; width: var(--af-fort, 33.3%); border-radius: inherit; background: linear-gradient(90deg, #0075ff, #7dbaff); box-shadow: 0 0 14px rgba(61, 149, 255, 0.9); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.af-schritt, .af-danke { animation: af-rein 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes af-rein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.af-titel { color: #fff; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; }
.af-unter { margin: 6px 0 18px !important; font-size: 0.9375rem !important; color: rgba(219, 228, 243, 0.78) !important; }
.af-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 540px) { .af-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.af-kachel, .af-schalt, .af-chip { position: relative; cursor: pointer; }
.af-kachel input, .af-schalt input, .af-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.af-kachel-innen { position: relative; display: grid; gap: 2px; height: 100%; padding: 14px 14px 13px; border-radius: 18px; background: var(--af-glas); border: 1px solid var(--af-linie);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s, border-color 0.25s, box-shadow 0.25s; }
.af-kachel:hover .af-kachel-innen { transform: translateY(-2px); border-color: rgba(125, 186, 255, 0.5); }
.af-kachel-innen b { margin-top: 8px; color: #fff; font-size: 0.9875rem; font-weight: 700; line-height: 1.25; }
.af-kachel-innen small { font-size: 0.8125rem; color: rgba(219, 228, 243, 0.65); line-height: 1.35; }
.af-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(61, 149, 255, 0.14); color: #9cc8ff; transition: background 0.25s, color 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.af-icon svg, .laufend-symbol svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.af-icon.klein { width: 28px; height: 28px; border-radius: 9px; }
.af-icon.klein svg { width: 16px; height: 16px; }
.af-haken-marke { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.28); transition: background 0.25s, border-color 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.af-haken-marke svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.35s 0.05s; }
.af-kachel input:checked + .af-kachel-innen { background: linear-gradient(150deg, rgba(0, 117, 255, 0.42), rgba(0, 117, 255, 0.14)); border-color: #7dbaff; box-shadow: 0 0 0 1px #7dbaff, 0 18px 40px -18px rgba(0, 117, 255, 0.9); }
.af-kachel input:checked + .af-kachel-innen .af-icon { background: #0075ff; color: #fff; transform: scale(1.06) rotate(-4deg); }
.af-kachel input:checked + .af-kachel-innen .af-haken-marke { background: #0075ff; border-color: #fff; transform: scale(1.1); }
.af-kachel input:checked + .af-kachel-innen .af-haken-marke svg { stroke-dashoffset: 0; }
.af-kachel input:focus-visible + .af-kachel-innen, .af-schalt input:focus-visible + .af-schalt-innen, .af-chip input:focus-visible + span { outline: 2px solid var(--af-blau); outline-offset: 2px; }
.af-details { display: grid; gap: 10px; margin-top: 14px; }
.af-details:empty { display: none; }
.af-detail { min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--af-linie); border-radius: 18px; background: rgba(6, 11, 40, 0.35); animation: af-rein 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.af-detail legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; margin-left: -6px; color: #fff; font-size: 0.9375rem; font-weight: 700; }
.af-frage + .af-frage { margin-top: 12px; }
.af-frage-text { display: block; margin: 6px 0 8px; font-size: 0.8125rem; font-weight: 600; color: rgba(219, 228, 243, 0.75); }
.af-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.af-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: #dbe4f3; font-size: 0.875rem; font-weight: 600; line-height: 1.2; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.af-chip:hover span { border-color: rgba(125, 186, 255, 0.6); }
.af-chip input:checked + span { background: #fff; border-color: #fff; color: #0b1a33; transform: translateY(-1px); }
.af-schalter { display: grid; gap: 10px; }
.af-schalt-innen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text knopf" "icon preis knopf"; align-items: center; column-gap: 14px; row-gap: 4px; padding: 16px; border-radius: 18px;
  background: var(--af-glas); border: 1px solid var(--af-linie); transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; }
.af-schalt-innen .af-icon { grid-area: icon; }
.af-schalt-text { grid-area: text; display: grid; gap: 2px; }
.af-schalt-text b { color: #fff; font-size: 1rem; }
.af-schalt-text small { font-size: 0.8125rem; color: rgba(219, 228, 243, 0.7); line-height: 1.4; }
.af-preis { grid-area: preis; font-size: 0.875rem; font-weight: 700; color: #9cc8ff; }
.af-preis em { font-style: normal; font-weight: 500; color: rgba(219, 228, 243, 0.6); margin-left: 4px; }
.af-knopf { grid-area: knopf; position: relative; width: 48px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); transition: background 0.3s; }
.af-knopf::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.af-schalt input:checked + .af-schalt-innen { background: linear-gradient(150deg, rgba(0, 117, 255, 0.36), rgba(0, 117, 255, 0.1)); border-color: #7dbaff; box-shadow: 0 18px 40px -20px rgba(0, 117, 255, 0.9); }
.af-schalt input:checked + .af-schalt-innen .af-knopf { background: #0075ff; }
.af-schalt input:checked + .af-schalt-innen .af-knopf::after { transform: translateX(20px); }
.af-schalt input:checked + .af-schalt-innen .af-icon { background: #0075ff; color: #fff; }
.af-reihe { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 480px) { .af-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.af-schritt > .af-reihe, .af-schritt > .af-feld, .af-schritt > .af-haken { margin-top: 12px; }
.af-feld { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; color: #dbe4f3; }
.af-schalter + .af-feld { margin-top: 16px; }
.anfrage-form input:not([type=checkbox]):not([type=radio]), .anfrage-form textarea { width: 100%; min-width: 0; padding: 13px 15px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(6, 11, 40, 0.4); color: #fff; font: inherit; font-weight: 500; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.anfrage-form input:not([type=checkbox]):not([type=radio]):focus, .anfrage-form textarea:focus { outline: none; border-color: #7dbaff; background: rgba(6, 11, 40, 0.6); box-shadow: 0 0 0 4px rgba(61, 149, 255, 0.22); }
.anfrage-form input[type=date] { color-scheme: dark; }
.anfrage-form input::placeholder, .anfrage-form textarea::placeholder { color: rgba(219, 228, 243, 0.5); }
.anfrage-form select { width: 100%; min-width: 0; padding: 13px 40px 13px 15px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(6, 11, 40, 0.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239cc8ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; color: #fff; font: inherit; font-weight: 500; -webkit-appearance: none; appearance: none; color-scheme: dark; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.anfrage-form select:focus { outline: none; border-color: #7dbaff; background-color: rgba(6, 11, 40, 0.6); box-shadow: 0 0 0 4px rgba(61, 149, 255, 0.22); }
.anfrage-form select option { background: #0b1a33; color: #fff; }
.af-feld[hidden] { display: none; }
.af-detail .af-feld { margin-top: 12px; }
.af-betrieb { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--af-linie); }
.af-betrieb .af-frage { margin-top: 0; }
.af-schritt > .af-reihe + .af-reihe { margin-top: 12px; }
.af-haken { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 0.875rem; font-weight: 500; color: #dbe4f3; line-height: 1.45; }
.af-haken input { margin-top: 3px; width: 18px; height: 18px; accent-color: #0075ff; }
.af-haken a { color: #9cc8ff; }
.af-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.af-weiter { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 20px; }
.anfrage-form .btn { margin-top: 0; border: 0; cursor: pointer; font: inherit; font-weight: 700; box-shadow: 0 16px 34px -14px rgba(0, 117, 255, 0.95); }
.anfrage-form .btn[disabled] { opacity: 0.6; cursor: wait; }
.af-zurueck { margin-right: auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #dbe4f3; font: inherit; font-weight: 600; cursor: pointer; }
.af-zurueck:hover { background: rgba(255, 255, 255, 0.08); }
.af-danke { display: grid; justify-items: center; text-align: center; padding: 14px 4px 6px; }
.af-danke-haken svg { width: 76px; height: 76px; fill: none; stroke: #7dbaff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 16px rgba(61, 149, 255, 0.8)); }
.af-danke-haken circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: af-strich 0.7s 0.1s forwards; }
.af-danke-haken path { stroke: #fff; stroke-dasharray: 36; stroke-dashoffset: 36; animation: af-strich 0.4s 0.7s forwards; }
@keyframes af-strich { to { stroke-dashoffset: 0; } }
.af-danke .af-titel { margin-top: 14px; }
.af-zusammen { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.af-zusammen li { padding: 6px 12px; border-radius: 999px; background: rgba(61, 149, 255, 0.18); border: 1px solid rgba(125, 186, 255, 0.4); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.af-meldung { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 0.9375rem; line-height: 1.45; }
.af-meldung.ok { background: rgba(15, 157, 99, 0.18); color: #c8f5df; border: 1px solid rgba(15, 157, 99, 0.5); }
.af-meldung.fehler { background: rgba(214, 51, 74, 0.18); color: #ffd3da; border: 1px solid rgba(214, 51, 74, 0.5); }
.af-zurueck { flex: none; }
.feld .anfrage-form .btn { margin-top: 0; }
@container (max-width: 440px) {
  .af-schalt-innen { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text knopf" "preis preis preis"; align-items: start; row-gap: 10px; }
  .af-preis { padding-top: 10px; border-top: 1px solid var(--af-linie); }
  .af-weiter { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .af-weiter .btn { width: 100%; min-width: 0; padding-inline: 16px; white-space: normal; }
  .af-schritt[data-schritt="1"] .af-weiter { grid-template-columns: minmax(0, 1fr); }
}
.af-wackeln { animation: af-wackeln 0.4s; }
@keyframes af-wackeln { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@container (max-width: 380px) { .af-schritte li { font-size: 0; gap: 0; justify-content: center; } .af-schritte li span { font-size: 0.8125rem; } }
@media (max-width: 600px) {
  .feld:has(.anfrage-form) { padding: 26px 14px 18px; }
  .feld:has(.anfrage-form) .feld-text > h2, .feld:has(.anfrage-form) .feld-text > p, .feld:has(.anfrage-form) .wahl { padding-inline: 8px; }
  .anfrage-form { margin-top: 22px; padding: 18px 14px 20px; border-radius: 22px; }
  .af-schritte { gap: 4px; }
  .af-schritte li, .af-schritte li.aktiv { flex-direction: column; justify-content: flex-start; gap: 6px; font-size: 0.6875rem; text-align: center; letter-spacing: 0; }
  .af-schritte li span { width: 30px; height: 30px; font-size: 0.8125rem; }
  .af-balken { margin: 12px 0 20px; }
  .af-kacheln { gap: 8px; }
  .af-kachel-innen { padding: 12px 12px 12px; border-radius: 16px; }
  .af-kachel-innen b { font-size: 0.9375rem; }
  .af-haken-marke { top: 10px; right: 10px; }
  .af-detail { padding: 16px 0 0; border: 0; border-top: 1px solid var(--af-linie); border-radius: 0; background: none; }
  .af-detail legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; }
  .af-detail legend + * { clear: both; }
  .af-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .af-chip span { width: 100%; height: 100%; min-height: 46px; justify-content: center; padding: 8px 10px; border-radius: 14px; text-align: center; font-size: 0.875rem; }
  .af-chip input:checked + span { box-shadow: 0 10px 24px -12px rgba(125, 186, 255, 0.9); }
  .af-frage-text { margin: 10px 0 8px; font-size: 0.875rem; color: #dbe4f3; }
}
@media (max-width: 380px) { .af-kachel-innen { padding-inline: 11px; } .af-kachel-innen b { font-size: 0.875rem; letter-spacing: -0.01em; } }
@media (prefers-reduced-motion: reduce) { .af-schritt, .af-danke, .af-detail, .af-wackeln { animation: none; } .af-kachel-innen, .af-icon, .af-knopf::after, .af-balken i { transition: none; } .af-danke-haken circle, .af-danke-haken path { animation: none; stroke-dashoffset: 0; } }
.feld-text .af-meldung { margin-top: 14px; font-size: 0.9375rem; max-width: none; }
.mehr-link { margin-top: 18px; font-weight: 700; }
.mehr-link a { color: var(--akzent-knopf); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.mehr-link a::after { content: "→"; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.mehr-link a:hover::after { transform: translateX(4px); }
.fuss-motto { font-weight: 800; letter-spacing: -0.01em; color: var(--text); font-size: 1.0625rem; }
.recht-hervor { padding: 14px 16px; border-left: 3px solid #0075ff; border-radius: 10px; background: #eef5ff; }
.recht-fenster { width: min(94vw, 760px); max-height: 88vh; margin: auto; padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--text, #0b1a33); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.6); overflow: auto; }
.recht-fenster::backdrop { background: rgba(6, 11, 40, 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.recht-kopf { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: #fff; border-bottom: 1px solid var(--rand, #dbe6f5); }
.recht-kopf strong { font-size: 1.1875rem; font-weight: 800; }
.recht-zu { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rand, #dbe6f5); background: #f4f8ff; font-size: 1.25rem; cursor: pointer; }
.recht-inhalt { padding: 8px 22px 26px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2, #34445f); }
.recht-inhalt h3 { margin: 20px 0 6px; font-size: 1rem; color: var(--text, #0b1a33); }
.recht-inhalt .klein { font-size: 0.8125rem; }
.schau-fenster { width: min(94vw, 980px); max-height: 92vh; margin: auto; padding: 0; border: 0; border-radius: 24px; background: #0b1a33; color: #dbe4f3; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.9); overflow: auto; }
.schau-fenster::backdrop { background: rgba(6, 11, 40, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.schau-kopf { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: #0b1a33; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.schau-kopf strong { color: #fff; font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.015em; }
.schau-zu { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1.375rem; line-height: 1; cursor: pointer; font-family: inherit; }
.schau-inhalt { padding: clamp(18px, 3vw, 34px); display: grid; justify-items: center; background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(0, 117, 255, 0.3), transparent 72%); }
.schau-inhalt > * { width: 100%; }
.schau-inhalt > .blatt { width: min(100%, 420px); }
.schau-inhalt > .blatt.b-design, .schau-inhalt > .fenster { width: 100%; }
.schau-fuss { padding: 0 22px 22px; text-align: center; font-size: 0.9375rem; }
.schau-fuss .offen { display: inline-block; background: rgba(255, 226, 170, 0.96); }
@media (min-width: 760px) { .modelle.reihe { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } }
.modelle.reihe .betrag > span, .modell.modell-gross .betrag > span { white-space: nowrap; }
.modell.modell-gross { margin-top: 20px; color: #dbe4f3; border-color: rgba(111, 176, 255, 0.45); background: radial-gradient(120% 140% at 85% 0%, #16306b 0%, #0b1a33 55%, #060b28 100%); }
.modell.modell-gross h3 { color: #fff; }
.modell.modell-gross .art { color: #9cc8ff; }
.modell.modell-gross .kurz, .modell.modell-gross li { color: #dbe4f3; }
.modell.modell-gross li.fett { color: #fff; }
.modell.modell-gross li::before { background: #0075ff; color: #fff; }
.modell.modell-gross ul, .modell.modell-gross .preis-zeile { border-color: rgba(255, 255, 255, 0.18); }
.modell.modell-gross .betrag { color: #fff; }
.modell.modell-gross .betrag small, .modell.modell-gross .preis-zeile .dazu { color: #b8c4d9; }
.modell.modell-gross .btn { background: #fff; color: #0b1a33; border: 0; }
@media (min-width: 1000px) {
  .modell.modell-gross { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 36px; align-items: center; }
  .modell.modell-gross ul { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: 1fr 1fr; }
  .modell.modell-gross .preis { margin-top: 0; padding-top: 0; }
  .modell.modell-gross .preis-zeile { padding-top: 0; border-top: 0; }
}
.modell .betrag .ab { margin-right: 6px; }
.laufend { margin-top: 20px; display: grid; gap: 14px; padding: clamp(20px, 3vw, 30px); border-radius: 24px; background: linear-gradient(120deg, #0b1a33, #10284f); color: #dbe4f3; position: relative; overflow: hidden; }
.laufend::before { content: ""; position: absolute; inset: auto -10% -60% 30%; height: 140%; background: radial-gradient(closest-side, rgba(0, 117, 255, 0.35), transparent); pointer-events: none; }
@media (min-width: 900px) { .laufend { grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 18px; } }
.laufend > * { position: relative; }
.laufend-marke { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(61, 149, 255, 0.18); border: 1px solid rgba(125, 186, 255, 0.4); color: #9cc8ff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.laufend h3 { margin-top: 12px; color: #fff; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.laufend-text p { margin-top: 6px; font-size: 0.9375rem; color: #b8c4d9; }
.laufend-karte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-content: start; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.laufend-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #0075ff; color: #fff; }
.laufend-karte h4 { color: #fff; font-size: 1.0625rem; font-weight: 800; }
.laufend-karte p { font-size: 0.875rem; color: #b8c4d9; line-height: 1.45; }
.laufend-karte strong { grid-column: 1 / -1; color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.laufend-karte strong small { font-size: 0.875rem; font-weight: 600; color: #9cc8ff; margin-left: 4px; }
.laufend-karte strong small.ab { margin: 0 6px 0 0; }
.modelle { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 900px) { .modelle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 900px) and (max-width: 1099px) { .modelle.drei { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }
@media (min-width: 1100px) { .modelle.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .modelle.drei .modell { padding: 34px 30px; } }
.betrag small.ab { margin: 0 6px 0 0; }
.modell { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; background: #fff; border: 1px solid rgba(11, 26, 51, 0.08);
  box-shadow: 0 1px 2px rgba(11, 26, 51, 0.05), 0 30px 60px -36px rgba(11, 26, 51, 0.45); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.modell:hover { transform: translateY(-4px); }
.modell .art { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-hell); }
.modell h3 { margin-top: 10px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.modell .kurz { margin-top: 10px; font-size: 1.125rem; color: var(--text-2); }
.modell ul { list-style: none; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--rand); display: grid; gap: 14px; }
.modell li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--text-2); }
.modell li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--akzent-flaeche); color: var(--akzent-hell); font-size: 0.8125rem; font-weight: 800; }
.modell li.fett { color: var(--text); font-weight: 700; }
.modell .preis { margin-top: auto; padding-top: 28px; }
.modell .preis-zeile { padding-top: 22px; border-top: 1px solid var(--rand); display: grid; gap: 4px; }
.betrag { color: var(--text); font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.betrag small { font-size: 1rem; font-weight: 600; color: var(--text-3); letter-spacing: 0; margin-left: 8px; }
.modell .betrag { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem); }
.betrag:has([data-netto]), .laufend-karte strong:has([data-netto]) { display: flex; flex-wrap: wrap; align-items: baseline; }
[data-netto] { display: contents; }
.inkl { font-size: 0.82em; font-weight: 500; color: var(--text-3, #6b7790); white-space: nowrap; letter-spacing: 0; }
.dunkel .inkl, .modell.vorn .inkl, .modell.modell-gross .inkl { color: #b8c4d9; }
[data-netto] .inkl { display: block; order: 9; flex-basis: 100%; margin: 8px 0 0 !important; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.laufend-karte [data-netto] .inkl { margin: 4px 0 0; font-size: 0.75rem; color: #9cc8ff; }
.modell.vorn .betrag { color: #fff; }
.modell.vorn .betrag small, .modell.vorn .preis-zeile .dazu { color: #b8c4d9; }
.preis-zeile .dazu { font-size: 0.9375rem; color: var(--text-3); }
.zusatz .preis-klein { color: var(--text); font-weight: 700; }
.zusatz .preis-klein small { font-size: 0.875rem; font-weight: 500; color: var(--text-3); }
.zusatz .preis-klein [data-leistung], .frage [data-leistung] { white-space: nowrap; }
.modell .btn { margin-top: 22px; width: 100%; }
.modell.vorn { color: #dbe4f3; border-color: rgba(111, 176, 255, 0.45);
  background: radial-gradient(ellipse 70% 50% at 85% 0%, rgba(0, 117, 255, 0.55), transparent 70%), radial-gradient(ellipse 60% 40% at 0% 100%, rgba(61, 149, 255, 0.28), transparent 70%), #0b1a33;
  box-shadow: 0 0 0 6px rgba(0, 117, 255, 0.10), 0 40px 80px -40px rgba(0, 85, 200, 0.85); }
.modell.vorn h3 { color: #fff; }
.modell.vorn .art { color: #9cc8ff; }
.modell.vorn .kurz, .modell.vorn li { color: #dbe4f3; }
.modell.vorn li.fett { color: #fff; }
.modell.vorn li::before { background: #0075ff; color: #fff; }
.modell.vorn ul, .modell.vorn .preis-zeile { border-color: rgba(255, 255, 255, 0.18); }
.modell.vorn .offen { background: rgba(255, 226, 170, 0.96); }
.modell .schild { position: absolute; top: 22px; right: 22px; padding: 5px 13px; border-radius: 999px; background: #0075ff; color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; }
.alt { text-decoration: line-through; opacity: 0.6; font-weight: 600; margin-right: 6px; font-size: 0.8em; }
.aktion-marke { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #1f9d55; color: #fff; font-size: 0.8125rem; font-weight: 700; font-style: normal; letter-spacing: 0; vertical-align: middle; }
.bedingungen[data-kombis]:empty { display: none; }
.bedingungen[data-kombis] > span { color: var(--text); font-weight: 600; }
.betreuung { margin-top: 20px; display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--rand); border-radius: 22px; background: var(--karte); }
@media (min-width: 900px) { .betreuung { grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 20px; } }
.betreuung h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.betreuung > div > p { margin-top: 4px; font-size: 0.9375rem; color: var(--text-3); }
.betreuung-stufe { padding: 16px 18px; border-radius: 16px; background: var(--seite); border: 1px solid var(--rand); }
.betreuung-stufe.plus { background: var(--akzent-flaeche); border-color: rgba(0, 117, 255, 0.28); }
.betreuung-stufe strong { display: block; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.betreuung-stufe strong small { font-size: 0.875rem; font-weight: 600; color: var(--text-3); margin-left: 4px; }
.betreuung-stufe > span { display: block; font-size: 0.9375rem; color: var(--text-2); margin-top: 2px; }
.bedingungen { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9375rem; color: var(--text-3); }
.bedingungen > span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); margin-right: 8px; vertical-align: 2px; }
.steuer { margin-bottom: 22px; font-size: 0.9375rem; color: var(--text-3); }
.zusatz-kopf { margin: clamp(48px, 7vw, 88px) 0 22px; display: grid; gap: 8px; }
.zusatz-kopf h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); font-weight: 800; letter-spacing: -0.025em; }
.zusatz-kopf p { font-size: 1.125rem; max-width: 52ch; }
.zusaetze { display: grid; gap: 16px; }
@media (min-width: 640px) { .zusaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .zusaetze { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .zusatz.breit { grid-column: span 4; } }
.zusatz { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.zusatz:hover { transform: translateY(-4px); border-color: rgba(0, 117, 255, 0.35); box-shadow: 0 1px 2px rgba(11, 26, 51, 0.05), 0 28px 50px -30px rgba(0, 85, 200, 0.5); }
.zusatz .plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--akzent-flaeche); color: var(--akzent-hell); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.zusatz h4 { color: var(--text); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.zusatz p { font-size: 1rem; }
.zusatz .preis-klein { margin-top: 4px; font-size: 0.9375rem; }
.zusatz.breit { background: linear-gradient(120deg, #fff 0%, #eef5ff 100%); border-color: rgba(0, 117, 255, 0.22); }
@media (min-width: 1040px) { .zusatz.breit { grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px 28px; align-items: center; padding: 30px 32px; } .zusatz.breit .preis-klein { margin-top: 0; } }
.zusatz .dreier { list-style: none; display: grid; gap: 8px; font-size: 1rem; color: var(--text); font-weight: 600; }
.zusatz .dreier li { display: flex; gap: 10px; align-items: flex-start; }
.zusatz .dreier li::before { content: "→"; color: var(--akzent-hell); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .modell, .zusatz { transition: none; } .modell:hover, .zusatz:hover { transform: none; } }
.sw { margin-top: 26px; }
.sw-knopf {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 18px 8px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; font: inherit; font-size: 0.9375rem; font-weight: 600;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sw-knopf > span { white-space: nowrap; }
.sw-kurz { display: none; }
@media (max-width: 520px) { .sw-lang { display: none; } .sw-kurz { display: inline; } .sw-knopf { gap: 7px; padding-inline: 12px; font-size: 0.875rem; max-width: 100%; } .sw-knopf .sterne { font-size: 0.9375rem; letter-spacing: 0; } .sw-knopf .beispiel { padding-inline: 7px; } }
.sw-knopf:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }
.sw-knopf:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 3px; }
.sw-pfeil { width: 9px; height: 9px; margin: -4px 2px 0 2px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform 0.35s ease; }
.sw.auf .sw-pfeil { transform: rotate(225deg); margin-top: 4px; }
.sw-feld { display: grid; grid-template-rows: 1fr; }
.js .sw-feld { grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .sw.auf .sw-feld { grid-template-rows: 1fr; }
.sw-innen { overflow: hidden; min-height: 0; }
.sw-flaeche { margin-top: 18px; padding: clamp(16px, 2.4vw, 26px); border-radius: var(--rund); text-align: left;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9); }
.sw-flaeche .entwurf-hinweis { margin-bottom: 16px; max-width: none; background: rgba(255, 226, 170, 0.96); }
.sw-karten { display: grid; gap: 14px; perspective: 1200px; }
@media (min-width: 860px) { .sw-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stimme { position: relative; padding: 22px; display: grid; gap: 12px; align-content: start; border-radius: 16px; background: #fff; color: var(--text-2); }
.js .stimme { opacity: 0; transform: translateY(26px) rotateX(-14deg); transform-origin: 50% 0; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .sw.auf .stimme { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--k, 0) * 0.11s); }
.stimme-kopf { display: flex; align-items: center; gap: 12px; padding-right: 76px; }
.stimme-bild { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.125rem; }
.stimme-kopf strong { display: block; color: var(--text); font-size: 1rem; line-height: 1.3; }
.stimme-kopf small { font-size: 0.8125rem; color: var(--text-3); }
.sterne { color: #f5a400; font-size: 1.125rem; letter-spacing: 2px; line-height: 1; }
.stimme .sterne + small { margin-left: 8px; font-size: 0.8125rem; color: var(--text-3); }
.stimme p { font-size: 1rem; color: var(--text-2); }
.beispiel { position: absolute; top: 16px; right: 16px; padding: 3px 9px; border-radius: 999px; border: 1px dashed #a36a00; color: #7a4f00; background: rgba(255, 181, 71, 0.2); font-size: 0.8125rem; font-weight: 700; }
.sw-knopf .beispiel { position: static; background: rgba(255, 220, 150, 0.95); border-style: solid; }
@media (prefers-reduced-motion: reduce) { .js .sw-feld, .js .stimme, .sw-pfeil { transition: none; } }
.weg {
  position: relative; overflow: hidden; padding-block: clamp(88px, 12vw, 160px); color: #cfd9ea;
  background:
    radial-gradient(ellipse 55% 38% at 12% 6%, rgba(0, 117, 255, 0.34), transparent 70%),
    radial-gradient(ellipse 50% 36% at 92% 58%, rgba(0, 117, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 30% at 40% 100%, rgba(61, 149, 255, 0.20), transparent 72%),
    #060b28;
}
.weg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 78%); pointer-events: none; }
.weg .wrap { position: relative; }
.weg h2 { color: #fff; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); }
.weg h2 .leise { color: #6fb0ff; }
.weg .kicker { color: #9cc8ff; }
.weg .kopf p { color: #cfd9ea; font-size: 1.1875rem; }
.weg-liste { --weg: 1; list-style: none; position: relative; margin-top: clamp(40px, 6vw, 80px); display: grid; gap: clamp(36px, 6vw, 84px); }
.js .weg-liste { --weg: 0; }
.weg-liste::before, .weg-liste::after { content: ""; position: absolute; top: 34px; bottom: 11px; left: 33px; width: 2px; border-radius: 2px; }
.weg-liste::before { background: rgba(255, 255, 255, 0.14); }
.weg-liste::after { background: linear-gradient(180deg, #3d95ff, #0075ff); box-shadow: 0 0 18px 2px rgba(0, 117, 255, 0.75); transform: scaleY(var(--weg)); transform-origin: 50% 0; }
.station { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px 22px; align-items: start; }
.station-nr { position: relative; z-index: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: #0b1438; border: 2px solid rgba(255, 255, 255, 0.22); color: #9cc8ff; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
  transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease; }
.station.aktiv .station-nr, html:not(.js) .station-nr { background: #0075ff; border-color: #6fb0ff; color: #fff; box-shadow: 0 0 0 8px rgba(0, 117, 255, 0.18), 0 0 44px 6px rgba(0, 117, 255, 0.55); transform: scale(1.06); }
.station-text h3 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.station-text .schritt-zeile { display: block; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9cc8ff; }
.station-text p { margin-top: 12px; font-size: 1.125rem; max-width: 34em; color: #cfd9ea; }
.vorteil { grid-column: 2; padding: 22px 24px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9); }
.vorteil small { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6fb0ff; }
.vorteil small::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0075ff; color: #fff; font-size: 0.8125rem; letter-spacing: 0; }
.vorteil strong { display: block; margin-top: 10px; color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.vorteil p { margin-top: 6px; font-size: 1rem; color: #cfd9ea; }
.vorteil + .vorteil { margin-top: -22px; }
.ziel { position: relative; display: grid; grid-template-columns: 68px; }
.ziel-punkt { position: relative; z-index: 1; justify-self: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(111, 176, 255, 0.35), 0 0 40px 10px rgba(0, 117, 255, 0.7); }
.ziel-text { margin-top: 26px; display: grid; gap: 18px; justify-items: start; }
.ziel-text strong { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; }
@media (min-width: 980px) {
  .weg-liste::before, .weg-liste::after { left: calc(50% - 1px); }
  .station { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 0 40px; align-items: center; }
  .station-nr { grid-row: auto; grid-column: 2; justify-self: center; width: 84px; height: 84px; font-size: 1.5rem; }
  .station-text { grid-column: 1; grid-row: 1; text-align: right; }
  .station-text p { margin-left: auto; }
  .station .vorteile { grid-column: 3; grid-row: 1; }
  .station:nth-child(even) .station-text { grid-column: 3; text-align: left; }
  .station:nth-child(even) .station-text p { margin-left: 0; }
  .station:nth-child(even) .vorteile { grid-column: 1; }
  .vorteil { grid-column: auto; }
  .ziel { grid-template-columns: 1fr; }
  .ziel-text { justify-items: center; text-align: center; }
}
.vorteile { display: grid; gap: 14px; grid-column: 2; }
.vorteile .vorteil + .vorteil { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .station-nr { transition: none; } }
.visitenkarte { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 44px); border-radius: 22px; background: #060b28; color: #fff; box-shadow: 0 36px 60px -30px rgba(11, 26, 51, 0.65); }
.visitenkarte::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 117, 255, 0.45), transparent); pointer-events: none; }
.vk-zeichen { display: grid; gap: 6px; width: 44px; margin-bottom: 28px; }
.vk-zeichen i { display: block; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.9); }
.vk-zeichen i:first-child { background: #3d95ff; }
.vk-zeichen i:nth-child(2) { width: 72%; }
.visitenkarte strong { display: block; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.vk-rolle { display: block; margin-top: 6px; color: rgba(255, 255, 255, 0.72); }
.visitenkarte ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.visitenkarte li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); overflow-wrap: anywhere; }
.visitenkarte li > span { color: rgba(255, 255, 255, 0.55); font-size: 0.875rem; }
.visitenkarte a { color: #fff; text-decoration: none; }
.visitenkarte a:hover { color: #3d95ff; }
.vk-motto { margin: 28px 0 0; font-weight: 700; color: #3d95ff; }
.fragen-raster.ohne-bild, .fragen-raster:not(:has(.fragen-bild)) { grid-template-columns: minmax(0, 1fr) !important; max-width: 860px; margin-inline: auto; }
.gruender-raster { display: grid; gap: 48px; align-items: center; }
@media (min-width: 940px) { .gruender-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr); gap: 80px; } }
.gruender-text h2 .leise { display: block; }
.gruender-text p { margin-top: 20px; max-width: 54ch; }
.gruender-text .name { color: var(--akzent-hell); font-weight: 700; }
.gruender-text .entwurf-hinweis { margin: 24px 0 0; }
.gruender-text .zitat-gruender { font-size: 1.15rem; font-weight: 700; color: var(--tinte, inherit); border-left: 3px solid var(--akzent, #0075ff); padding-left: 14px; }
.rahmenbild { position: relative; margin: 0 0 44px 24px; }
.rahmenbild img { width: 100%; aspect-ratio: 5 / 4.3; object-fit: cover; object-position: 50% 12%; border-radius: 14px; box-shadow: 0 0 0 1px var(--rand), 0 36px 60px -30px rgba(11, 26, 51, 0.65); }
.namensschild { position: absolute; left: -24px; bottom: -40px; padding: 18px 28px 20px; background: #fff !important; box-shadow: 0 20px 40px -24px rgba(11, 26, 51, 0.45) !important; border-radius: 14px; }
.namensschild strong { display: block; color: var(--text); font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; }
.namensschild > span { font-size: 0.9375rem; color: var(--text-2); }
.rahmenbild .beispiel, .fragen-bild .beispiel { top: 14px; right: 14px; background: rgba(255, 244, 222, 0.95); }
.kopf.mitte { margin-inline: auto; text-align: center; }
.kopf.mitte .kicker { justify-content: center; }
.kopf.mitte .kicker::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.kopf.mitte p { margin-inline: auto; }
.fragen-raster { position: relative; display: grid; gap: 28px; align-items: stretch; }
.fragen-bild { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(11, 26, 51, 0.05), 0 34px 60px -34px rgba(11, 26, 51, 0.55); }
.fragen-bild img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
@media (min-width: 940px) {
  .fragen-raster { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 56px; }
  .fragen-bild { min-height: 100%; }
  .fragen-bild img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 50% 30%; }
}
.fragen { display: grid; gap: 14px; align-content: start; counter-reset: frage; }
.frage { position: relative; counter-increment: frage; background: #fff; border: 1px solid rgba(11, 26, 51, 0.09); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(11, 26, 51, 0.04), 0 14px 30px -24px rgba(11, 26, 51, 0.4); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.frage:hover { transform: translateY(-2px); border-color: rgba(0, 117, 255, 0.3); box-shadow: 0 1px 2px rgba(11, 26, 51, 0.04), 0 22px 40px -26px rgba(0, 85, 200, 0.45); }
.frage[open] { border-color: rgba(0, 117, 255, 0.45); box-shadow: 0 0 0 4px rgba(0, 117, 255, 0.08), 0 26px 50px -30px rgba(0, 85, 200, 0.5); }
.frage summary {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  min-height: 76px; padding: 16px 22px; cursor: pointer; list-style: none;
  color: var(--text); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.3;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::before { content: counter(frage, decimal-leading-zero); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; color: var(--akzent-hell); }
.frage summary::after { content: "+"; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--akzent-flaeche); color: var(--akzent-hell); font-size: 1.5rem; font-weight: 500; line-height: 1; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.frage[open] summary::after { content: "+"; transform: rotate(45deg); background: var(--akzent-knopf); color: #fff; }
.frage > div { padding: 0 22px 24px 62px; max-width: 66ch; font-size: 1.0625rem; line-height: 1.6; }
.frage[open] > div { animation: antwort 0.35s ease both; }
@keyframes antwort { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .frage summary { gap: 12px; padding-inline: 16px; font-size: 1.0625rem; } .frage > div { padding: 0 16px 22px 16px; } }
@media (prefers-reduced-motion: reduce) { .frage, .frage summary::after { transition: none; } .frage[open] > div { animation: none; } .frage:hover { transform: none; } }
.dunkel { background: #0b1a33; color: #dbe4f3; }
.dunkel h2 { color: #fff; }
.dunkel .kicker { color: #9cc8ff; }
.gespraech { position: relative; overflow: hidden; }
.gespraech .wrap { position: relative; z-index: 1; padding-block: clamp(64px, 9vw, 112px); }
.gespraech-text { max-width: 560px; }
.gespraech .haken { margin-top: 30px; grid-template-columns: 1fr; gap: 16px; color: #fff; font-weight: 500; font-size: 1.125rem; }
.gespraech .haken li::before { background: var(--akzent); color: #fff; width: 26px; height: 26px; }
.gespraech .btn { margin-top: 36px; }
.gespraech-bild { position: relative; height: 260px; overflow: hidden; background: #0b1a33; }
.gespraech-bild > img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; object-position: 60% 50%; transform: translate3d(0, var(--tiefe, 0px), 0); }
.gespraech-bild::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #0b1a33 0%, rgba(11, 26, 51, 0.55) 40%, rgba(11, 26, 51, 0.6) 100%); }
.gespraech-bild > span { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; }
@media (min-width: 940px) {
  .gespraech-bild { position: absolute; inset: 0 0 0 46%; height: auto; }
  .gespraech-bild::before { background: linear-gradient(90deg, #0b1a33 0%, rgba(11, 26, 51, 0.62) 38%, rgba(11, 26, 51, 0.5) 100%); }
  .gespraech-bild > span { left: auto; right: 28px; bottom: 28px; width: 320px; text-align: right; }
}
.gespraech-bild .offen { display: inline-block; background: rgba(255, 210, 122, 0.92); }
.abschluss { padding-top: clamp(96px, 12vw, 170px); overflow: hidden; }
.feld { position: relative; display: grid; gap: 28px; align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: calc(var(--rund) + 10px); color: #dbe4f3;
  background: linear-gradient(180deg, #0b1a33 0%, #0b1a33 55%, #54698f 82%, #dfe8f7 100%); }
.feld h2 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.feld > * { position: relative; z-index: 1; }
.feld > .feld-foto { position: absolute; z-index: 0; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.feld-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.feld-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 26, 51, 0.90) 0%, rgba(11, 26, 51, 0.82) 55%, rgba(84, 105, 143, 0.80) 82%, rgba(223, 232, 247, 0.96) 100%); }
@media (min-width: 940px) { .feld-foto::after { background: linear-gradient(100deg, rgba(11, 26, 51, 0.94) 0%, rgba(11, 26, 51, 0.82) 40%, rgba(11, 26, 51, 0.30) 64%, rgba(84, 105, 143, 0.55) 80%, rgba(223, 232, 247, 0.92) 100%); } }
.feld-text p { margin-top: 18px; font-size: 1.1875rem; max-width: 34em; color: #dbe4f3; }
.feld .btn { margin-top: 30px; }
.szene { container-type: inline-size; position: relative; width: min(100%, 560px); margin-inline: auto; aspect-ratio: 100 / 74; }
.szene .geraet .mini { border-radius: 0.6cqw; overflow: hidden; }
.szene .rahmen { background: #101a30; overflow: hidden; box-shadow: 0 4cqw 8cqw -4cqw rgba(0, 0, 0, 0.75); }
.szene .s-monitor { right: 0; top: 0; width: 60cqw; transform: rotate(-4deg); }
.szene .s-monitor .rahmen { padding: 1.6cqw 1.6cqw 3.4cqw; border-radius: 2cqw; background: #e9edf4; }
.szene .s-monitor::after { content: ""; display: block; width: 16cqw; height: 9cqw; margin: 0 auto; background: linear-gradient(#d9dee8, #aeb7c8); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.szene .s-laptop { left: 0; top: 20cqw; width: 54cqw; z-index: 2; transform: rotate(3deg); }
.szene .s-laptop .rahmen { padding: 1.4cqw 1.4cqw 1.6cqw; border-radius: 1.8cqw 1.8cqw 0 0; }
.szene .s-laptop::after { content: ""; display: block; height: 2.2cqw; margin-inline: -4cqw; border-radius: 0 0 2.4cqw 2.4cqw; background: linear-gradient(#5a6272, #2c3340); }
.szene .s-handy { right: 16cqw; bottom: 0; width: 16cqw; z-index: 3; transform: rotate(22deg); }
.szene .s-handy .rahmen { padding: 1cqw; border-radius: 3cqw; }
.szene .s-handy .mini { aspect-ratio: 9 / 18; border-radius: 2.2cqw; }
@media (min-width: 940px) {
  .feld { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr); gap: 40px; background: linear-gradient(100deg, #0b1a33 0%, #0b1a33 44%, #54698f 76%, #dfe8f7 100%); }
  .szene { margin-block: calc(-1 * clamp(110px, 12vw, 170px)) -20px; margin-inline: 0 -20px; width: 100%; }
}
.fuss { background: var(--seite); border-top: 1px solid var(--rand); padding-block: clamp(48px, 7vw, 88px) 28px; font-size: 1rem; color: var(--text-2); }
.fuss-raster { display: grid; gap: 36px; }
@media (min-width: 720px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .fuss-raster { grid-template-columns: 1.4fr 0.8fr 1fr 1fr; gap: 48px; } }
.fuss .logo img { height: 40px; }
.fuss-angaben { margin-top: 18px; display: grid; gap: 14px; }
.fuss-angaben strong { display: block; color: var(--text); }
.fuss-sozial { display: flex; flex-wrap: wrap; gap: 10px; }
.fuss-sozial-knopf { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border: 1px solid var(--rand); border-radius: 999px; background: var(--flaeche, #fff); color: var(--text); font-weight: 600; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.fuss-sozial-knopf:hover { transform: translateY(-2px); border-color: transparent; box-shadow: 0 10px 24px -12px rgba(6, 11, 40, .35); }
.fuss-sozial-zeichen { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; }
.fuss-sozial-zeichen svg { width: 18px; height: 18px; fill: #fff; }
.fuss h3 { font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.fuss ul { list-style: none; }
.fuss li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fuss li a:hover { text-decoration: underline; }
.fuss-ende { margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--rand-stark); text-align: center; font-size: 0.9375rem; color: var(--text-3); }
.fortschritt { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 3px; background: var(--akzent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.js .zeig { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.js .zeig.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .zeig { opacity: 1; transform: none; transition: none; }
  .gespraech-bild > img, [data-tiefe] { transform: none !important; }
  .fortschritt { display: none; }
}
.seite-rein { animation: seite-rein 0.28s ease-out; }
.sr-weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.motto-band .kicker::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
@keyframes seite-rein { from { opacity: 0; } to { opacity: 1; } }
.seitenkopf { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(140px, 16vw, 200px) clamp(72px, 9vw, 120px); color: #dbe4f3; background: #060b28; }
.seitenkopf::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6, 11, 40, 0.90) 0%, rgba(6, 11, 40, 0.74) 46%, rgba(6, 11, 40, 0.35) 100%), linear-gradient(180deg, rgba(6, 11, 40, 0.55) 0%, rgba(6, 11, 40, 0) 30%, rgba(6, 11, 40, 0.65) 100%); }
.seitenkopf::after { left: 30%; }
@media (max-width: 760px) { .seitenkopf::before { background: linear-gradient(180deg, rgba(6, 11, 40, 0.86) 0%, rgba(6, 11, 40, 0.78) 60%, rgba(6, 11, 40, 0.88) 100%); } }
.seitenkopf .wrap { position: relative; }
.seitenkopf-text { max-width: 720px; }
.seitenkopf h1 { color: #fff; font-size: clamp(2.125rem, 1.3rem + 3.6vw, 4rem); }
.seitenkopf h1 span { white-space: normal; }
.seitenkopf h1 .leise, .seitenkopf .leise { color: #6fb0ff; }
.seitenkopf .kicker { color: #9cc8ff; }
.seitenkopf p.unter { margin-top: 22px; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); max-width: 36em; color: #dbe4f3; }
.seitenkopf .start-aktion { align-items: flex-start; }
.seitenkopf .haken-zeile { justify-content: flex-start; color: #fff; }
.seitenkopf .haken-zeile li::before { background: rgba(255, 255, 255, 0.16); color: #9cc8ff; }
.sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.sprung a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.07); color: #fff; font-size: 0.875rem; font-weight: 600; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 0.25s ease, border-color 0.25s ease; }
.sprung a:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); }
.vergleich-huelle { position: relative; margin-top: 28px; overflow-x: auto; border-radius: 22px; border: 1px solid var(--rand); background: #fff; -webkit-overflow-scrolling: touch; }
.vergleich { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9375rem; }
.vergleich th, .vergleich td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rand); }
.vergleich thead th { color: var(--text); font-size: 1.0625rem; font-weight: 800; background: var(--akzent-flaeche); }
.vergleich thead th small { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.vergleich tbody th { width: 22%; color: var(--text); font-weight: 700; }
.vergleich tbody tr:last-child th, .vergleich tbody tr:last-child td { border-bottom: 0; }
.vergleich td.hervor, .vergleich th.hervor { background: rgba(0, 117, 255, 0.05); }
.vergleich .nein { color: var(--text-3); }
.vergleich-hinweis { margin-top: 10px; font-size: 0.875rem; color: var(--text-3); }
@media (min-width: 700px) { .vergleich-hinweis { display: none; } }
.stufen { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 640px) { .stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .stufen { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.stufe { padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--rand); }
.stufe h4 { color: var(--text); font-size: 1.0625rem; font-weight: 800; }
.stufe strong { display: block; margin-top: 8px; color: var(--text); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.stufe strong small { font-size: 0.875rem; font-weight: 600; color: var(--text-3); margin-left: 4px; }
.stufe ul { list-style: none; margin-top: 12px; display: grid; gap: 6px; font-size: 0.9375rem; }
.stufe li::before { content: "✓"; color: var(--akzent-hell); font-weight: 800; margin-right: 8px; }
.detail { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--rand); }
.detail:first-of-type { border-top: 0; }
@media (min-width: 900px) { .detail { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .detail.links-text > .detail-bild { order: 2; } }
.detail-bild { position: relative; display: grid; place-items: center; padding: clamp(18px, 3vw, 34px); border-radius: 26px; background: radial-gradient(ellipse 70% 80% at 50% 100%, #cfe1ff, #eef4ff 70%); overflow: hidden; }
.detail-bild img { width: auto; max-width: 100%; max-height: 380px; border-radius: 14px; box-shadow: 0 30px 50px -30px rgba(11, 26, 51, 0.6); }
.detail-bild.foto { padding: 0; background: #0b1a33; }
.detail-bild.foto img { width: 100%; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; box-shadow: none; }
.detail h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); font-weight: 800; letter-spacing: -0.025em; }
.detail .art { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-hell); margin-bottom: 8px; }
.detail p { margin-top: 14px; max-width: 56ch; }
.detail .haken { margin-top: 20px; grid-template-columns: 1fr; gap: 10px; font-weight: 500; }
.detail .preis-klein { margin-top: 18px; color: var(--text); font-weight: 700; font-size: 1.0625rem; }
.detail .preis-klein small { font-size: 0.9375rem; font-weight: 500; color: var(--text-3); }
.detail .preis-klein [data-leistung] { white-space: nowrap; }
.vorteil-raster { display: grid; gap: 16px; }
@media (min-width: 700px) { .vorteil-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .vorteil-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vorteil-kachel { padding: 26px; }
.vorteil-kachel span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--akzent-flaeche); color: var(--akzent-hell); font-weight: 800; }
.vorteil-kachel h3 { margin-top: 14px; font-size: 1.1875rem; }
.vorteil-kachel p { margin-top: 8px; font-size: 1rem; }
.motto-band { text-align: center; }
.motto-band blockquote { max-width: 22ch; margin-inline: auto; color: var(--text); font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.motto-band blockquote span { display: block; color: var(--akzent-hell); }
.motto-band p { margin: 22px auto 0; max-width: 52ch; font-size: 1.1875rem; }
.schritte { list-style: none; display: grid; gap: 16px; counter-reset: schritt; }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schritte li { position: relative; padding: 26px 24px; counter-increment: schritt; }
.schritte li::before { content: counter(schritt, decimal-leading-zero); display: block; color: var(--akzent-hell); font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.08em; }
.schritte h3 { margin-top: 10px; font-size: 1.1875rem; }
.schritte p { margin-top: 8px; font-size: 1rem; }
.kontakt-raster { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .kontakt-raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; } }
.kontakt-wege { display: grid; gap: 14px; }
.kontakt-weg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 20px 22px; text-decoration: none; color: inherit; transition: transform 0.25s ease, border-color 0.25s ease; }
a.kontakt-weg:hover { transform: translateY(-2px); border-color: rgba(0, 117, 255, 0.35); }
.kontakt-weg .af-icon { grid-row: span 2; background: var(--akzent-flaeche); color: var(--akzent-hell); }
.kontakt-weg small { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.kontakt-weg strong { color: var(--text); font-size: 1.125rem; overflow-wrap: anywhere; }
.kontakt-feld { padding: clamp(20px, 3.5vw, 40px); border-radius: calc(var(--rund) + 10px); color: #dbe4f3; background: radial-gradient(ellipse 70% 50% at 85% 0%, rgba(0, 117, 255, 0.45), transparent 70%), #0b1a33; }
.kontakt-feld h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.kontakt-feld > p { margin-top: 12px; color: #dbe4f3; }
.kontakt-feld .anfrage-form { margin-top: 22px; }
.kontakt-haken { margin-top: 22px; grid-template-columns: 1fr; gap: 12px; }
.aufruf { padding: clamp(28px, 5vw, 56px); border-radius: calc(var(--rund) + 10px); color: #dbe4f3; text-align: center; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(0, 117, 255, 0.5), transparent 70%), #0b1a33; }
.aufruf h2 { color: #fff; }
.aufruf p { margin: 16px auto 0; max-width: 46ch; font-size: 1.125rem; }
.aufruf .btn { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .seite-rein { animation: none; } a.kontakt-weg:hover { transform: none; } }
.plan { background: #e7ecf5; color: #1b2440; padding-block: 72px; border-top: 2px dashed var(--rand-stark); }
.plan h2 { color: #0b1a33; font-size: 1.75rem; }
.plan h3 { color: #0b1a33; font-size: 1.0625rem; margin: 30px 0 10px; }
.plan p, .plan li { color: #3b4763; font-size: 1rem; }
.plan ul, .plan ol { padding-left: 1.25rem; display: grid; gap: 6px; }
.plan .hinweis { margin-top: 12px; max-width: 70ch; }
.plan-raster { display: grid; gap: 8px 48px; margin-top: 8px; }
@media (min-width: 900px) { .plan-raster { grid-template-columns: 1fr 1fr; } }
.recht-seite { background: var(--seite); }
.recht-main { padding: clamp(110px, 14vw, 150px) 0 clamp(56px, 8vw, 96px); }
.recht-main .recht-inhalt { max-width: 760px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--rand); border-radius: 22px; background: #fff; font-size: 1rem; }
.recht-main h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--text); margin-bottom: 8px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.js .recht-seite .kopfzeile:not(.fest) { background: rgba(6, 11, 40, 0.92); }
.recht-main .recht-inhalt ul { margin: 8px 0 0; padding-left: 1.2em; }
.recht-main .recht-inhalt li { margin-top: 4px; }
.recht-main .recht-inhalt h3 { font-size: 1.0625rem; margin-top: 26px; }
.recht-main .recht-inhalt p { margin-top: 8px; overflow-wrap: anywhere; }
.recht-main .recht-inhalt a { color: var(--akzent-knopf); }