@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; font-display: swap; src: url("assets/schriften/Inter-Light.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/schriften/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/schriften/Inter-Medium.woff") format("woff"); }

:root {
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --display: var(--schrift);               

  --bg: #EEF2F6;
  --punkt: rgba(40, 56, 84, .19);
  --weiss: #FFFFFF;
  --text: #17122E;
  --text-2: #575270;
  --linie: rgba(23, 18, 46, .12);
  --schwarz: #0D0B1A;

  --uv: #5B3FEA;      
  --uv-t: #4128C2;    
  --uv-z: #E6E0FF;
  --uv-k: #CFC3FF;
  --mint: #7DEBB0;
  --mint-t: #0F6B45;
  --mint-z: #DDF8EA;
  --rose: #FF8FAB;
  --rose-t: #A3234A;
  --rose-z: #FFE1E9;
  --knopf: #CFD8F5;   
  --knopf-h: #BCC9F0;

  --glas: rgba(255, 255, 255, .62);
  --glas-kante: rgba(255, 255, 255, .95);
  --radius: 28px;
  --rand: 16px;
  --breite: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, .punktgrund { background-image: radial-gradient(var(--punkt) .9px, transparent .9px); background-size: 17px 17px; }
body {
  margin: 0; color: var(--text); font-family: var(--schrift); font-size: 17px; line-height: 1.55; font-weight: 400;
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { text-wrap: balance; margin: 0; font-family: var(--display); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
a { color: var(--uv-t); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--uv-t); outline-offset: 3px; border-radius: 6px; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; background: var(--schwarz); color: #fff; padding: 10px 16px; border-radius: 20px; z-index: 50; text-decoration: none; }
.sprung:focus { top: 8px; }

.wrap { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

.test { background: var(--schwarz); color: #fff; font-size: 13.5px; line-height: 1.4; text-align: center; padding: 8px var(--rand); }
.test b { font-weight: 500; }

.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 20; }
.kopf .wrap { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.logo { position: relative; display: block; flex-shrink: 0; width: 118px; aspect-ratio: 3 / 1; overflow: hidden; background: var(--weiss); }
.logo img { position: absolute; width: 126.67%; max-width: none; left: -12.67%; top: -54%; height: auto; }
.nav { display: none; gap: 4px; margin-left: 12px; }
.nav a { padding: 8px 14px; border-radius: 20px; text-decoration: none; color: var(--text); font-size: 15px; }
.nav a:hover { background: var(--uv-z); }
.nav a[aria-current="page"] { background: var(--uv-z); }
.kopf .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.kn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 22px; border: 1.5px solid transparent;
  font: 500 15px/1 var(--schrift); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.kn.dunkel { background: var(--schwarz); color: #fff; }
.kn.dunkel:hover { background: #2A2542; }
.kn.rand { border-color: var(--text); color: var(--text); background: transparent; }
.kn.rand:hover { background: var(--knopf); }
.kn.blau { background: var(--knopf); color: var(--text); }
.kn.blau:hover { background: var(--knopf-h); }
.kn.weiss { background: #fff; color: var(--text); }
.kn.klein { height: 38px; padding: 0 16px; font-size: 14px; }
.kn[aria-disabled="true"], .kn:disabled { background: #D9DCE6; color: #4F5266; cursor: not-allowed; }
.kn svg { width: 16px; height: 16px; flex-shrink: 0; }

.lab { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.glas { background: var(--glas); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glas-kante); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 34px rgba(23, 18, 46, .07); }
.kachel { border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden; }
.kachel.weiss { background: var(--weiss); }
.kachel.grau { background: #F6F7FA; border: 1px solid var(--linie); }
.zahl { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: 14px; font-weight: 500; color: var(--text); }

section { padding: 40px 0; }
.sektion-kopf { max-width: 720px; margin-bottom: 24px; }
.sektion-kopf h2 { font-size: clamp(30px, 6.4vw, 48px); margin-top: 10px; }
.sektion-kopf p { margin-top: 14px; color: var(--text-2); font-size: 18px; }

.ehrlich { background: var(--weiss); border-radius: var(--radius); padding: 26px 20px; display: grid; gap: 18px; }
.ehrlich h2 { font-size: clamp(28px, 6vw, 42px); }
.ehrlich ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ehrlich li { padding-left: 20px; position: relative; color: var(--text-2); }
.ehrlich li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--uv); }

.warteliste { background: var(--uv-z); border-radius: var(--radius); padding: 28px 20px; display: grid; gap: 22px; }
.warteliste h2 { font-size: clamp(30px, 6.4vw, 46px); margin-top: 10px; }
.warteliste .lab { color: var(--uv-t); }
.warteliste p.lead { margin-top: 14px; color: var(--text-2); max-width: 520px; }
.formular { background: var(--weiss); border-radius: 22px; padding: 20px; display: grid; gap: 14px; }
.formular label { font-size: 15px; font-weight: 500; display: block; margin-bottom: 6px; }
.formular input[type="email"] { width: 100%; height: 48px; border: 1.5px solid #B9BED0; border-radius: 24px; padding: 0 18px; font: 400 16px var(--schrift); color: var(--text); background: #fff; }
.formular input[type="email"]:disabled { background: #F1F2F7; color: #4F5266; }
.einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.einwilligung input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }

.platzhalter { border: 2px dashed var(--rose-t); background: var(--rose-z); color: #6E1030; border-radius: 16px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; }
.platzhalter b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; color: var(--rose-t); }
.chip { white-space: nowrap; display: inline-block; padding: 3px 10px; border-radius: 12px; border: 1.5px dashed var(--rose-t); background: var(--rose-z); color: #6E1030; font-size: 14px; font-weight: 500; }

.preise-raster { display: grid; gap: 14px; }
.preis-karte { padding: 24px 20px; }
.preis-karte h3 { font-size: 28px; font-weight: 400; }
.preis-karte .beschr { margin-top: 10px; color: var(--text-2); }
.preis-tab { margin-top: 18px; display: grid; gap: 8px; }
.preis-tab .z { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: #F6F7FA; border-radius: 16px; }
.preis-tab .z span:first-child { font-weight: 500; }
.preis-karte.test-karte { background: var(--mint); color: #0B2A1D; }
.preis-karte.test-karte .beschr { color: #123F2C; }

.seite { padding-top: 28px; padding-bottom: 56px; }
.seite h1 { font-size: clamp(34px, 7.4vw, 56px); }
.seite .lead { margin-top: 14px; font-size: 18px; color: var(--text-2); max-width: 640px; }
.inhalt-karte { background: var(--weiss); border-radius: var(--radius); padding: 24px 20px; margin-top: 22px; max-width: 820px; }
.inhalt-karte h2 { font-size: 26px; font-weight: 400; margin: 26px 0 10px; letter-spacing: -.015em; }
.inhalt-karte h2:first-child { margin-top: 0; }
.inhalt-karte p + p { margin-top: 10px; }
.inhalt-karte .platzhalter { margin: 10px 0; }
.achtung { margin-top: 18px; max-width: 820px; background: var(--rose); color: #3A0D1C; border-radius: 22px; padding: 16px 18px; font-size: 16px; }
.achtung b { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; display: block; margin-bottom: 4px; }

.fuss { margin-top: 24px; background: var(--weiss); border-top: 1px solid var(--linie); padding: 30px 0 34px; }
.fuss .wrap { display: grid; gap: 20px; }
.fuss .nav-fuss { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fuss .nav-fuss a { color: var(--text); text-decoration: none; font-size: 15px; padding: 6px 0; }
.fuss .nav-fuss a:hover { text-decoration: underline; }
.fuss .klein { font-size: 14px; color: var(--text-2); max-width: 680px; }

@media (min-width: 760px) {
  :root { --rand: 28px; }
  body { font-size: 18px; }
  section { padding: 56px 0; }
  .nav { display: flex; }
  .logo { width: 150px; }
  .kopf .wrap { min-height: 72px; }
  .ehrlich { grid-template-columns: 1fr 1.2fr; padding: 40px; gap: 40px; }
  .preise-raster { grid-template-columns: 1fr 1.3fr; }
  .inhalt-karte { padding: 34px 36px; }
  .fuss .wrap { grid-template-columns: 1fr auto; align-items: start; }
}
@media (min-width: 1100px) {
  .claim { font-size: 30px; }
}
@media (max-width: 420px) {
  .kopf .wrap { gap: 6px; }
  .kopf .kn { padding: 0 14px; font-size: 14px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blobs i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .55; }
.blobs .b1 { width: 560px; height: 560px; left: -180px; top: 120px; background: var(--uv-k); animation: treiben 22s ease-in-out infinite alternate; }
.blobs .b2 { width: 520px; height: 520px; right: -160px; top: 40px; background: var(--rose-z); opacity: .9; animation: treiben 26s ease-in-out infinite alternate-reverse; }
.blobs .b3 { width: 620px; height: 420px; left: 30%; top: 720px; background: var(--mint-z); opacity: .9; animation: treiben 30s ease-in-out infinite alternate; }
.blobs .b4 { width: 520px; height: 520px; left: -120px; top: -80px; background: var(--uv); opacity: .45; animation: treiben 24s ease-in-out infinite alternate; }
.blobs .b5 { width: 460px; height: 460px; right: -100px; bottom: -120px; background: #2B4EE6; opacity: .35; animation: treiben 28s ease-in-out infinite alternate-reverse; }
.blobs .b6 { width: 420px; height: 420px; right: -120px; top: -140px; background: var(--rose); opacity: .45; }
.blobs .b7 { width: 380px; height: 380px; left: -100px; bottom: -160px; background: var(--mint); opacity: .4; }
@keyframes treiben { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.08); } }

.zweiton { font-size: clamp(32px, 6.6vw, 60px); letter-spacing: -.03em; line-height: 1.04; max-width: 980px; }
.zweiton .leise { color: #8C88A3; }
.zweiton.hell { color: #fff; }
.zweiton.hell .leise { color: #A9A3C9; }
.zweiton.klein { font-size: clamp(26px, 4.6vw, 40px); }
.lab.hell { color: #C9C4E6; }
.unter.hell, .fussnote.hell, .unter-bild.hell { color: #D9D5EE; }
.kn.gross { height: 52px; padding: 0 26px; border-radius: 26px; font-size: 16px; }
.unscharf { display: block; height: .62em; border-radius: .31em; background: currentColor; opacity: .22; margin-top: .45em; filter: blur(.6px); }
.w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }

.claim { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: clamp(17px, 4.9vw, 30px); font-weight: 500; letter-spacing: -.01em; line-height: 1; }
.claim > span { display: inline-flex; align-items: center; min-height: 2.15em; padding: 0 .78em; border: 2px solid var(--text); border-radius: 2em; background: rgba(255,255,255,.78); white-space: nowrap; }
.hinweis-klein { margin-top: 14px; font-size: 13.5px; color: var(--text-2); }
.mikro { width: 52px; height: 52px; border-radius: 50%; background: var(--mint); color: #0B2A1D; display: grid; place-items: center; flex-shrink: 0; }
.mikro svg { width: 24px; height: 24px; }
.hero2 { position: relative; overflow: hidden; padding: 34px 0 30px; }
.hero2 .wrap { position: relative; z-index: 1; }
.hero-text { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero2 .claim { justify-content: center; }
.claim .voll { background: var(--schwarz); color: #fff; border-color: var(--schwarz); }
.claim .paar { display: inline-flex; gap: 8px; flex-wrap: nowrap; padding: 0; border: 0; background: none; min-height: 0; border-radius: 0; }
.claim .paar span { display: inline-flex; align-items: center; min-height: 2.15em; padding: 0 .78em; border: 2px solid var(--text); border-radius: 2em; background: rgba(255,255,255,.78); white-space: nowrap; }
.riesig { margin-top: 28px; font-size: clamp(38px, 8.6vw, 84px); font-weight: 300; letter-spacing: -.04em; line-height: .98; max-width: 1080px; text-wrap: balance; }
.riesig .leise { color: #8C88A3; }
.hero2 .unter { margin-top: 22px; font-size: clamp(17px, 2.2vw, 20px); color: var(--text-2); max-width: 680px; }
.hero2 .knoepfe { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.buehne-geraet { position: relative; margin: 52px auto 0; max-width: 980px; }
.schwebe { position: absolute; z-index: 3; padding: 14px 16px; border-radius: 22px; display: none; }
.s-fokus { left: -120px; top: 30%; display: none; align-items: center; gap: 12px; animation: schweben 7s ease-in-out infinite; }
.s-fokus b { display: block; font-weight: 500; font-size: 15px; }
.s-fokus small { font-size: 13px; color: var(--text-2); }
.mini-ring { width: 38px; height: 38px; }
.mini-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mini-ring .spur { fill: none; stroke: var(--uv-z); stroke-width: 5; }
.mini-ring .lauf { fill: none; stroke: var(--uv-t); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 88; stroke-dashoffset: 28; animation: ablaufen 18s linear infinite; }
@keyframes ablaufen { from { stroke-dashoffset: 8; } to { stroke-dashoffset: 80; } }
.s-serie { right: -130px; top: 6%; width: 210px; animation: schweben 8s ease-in-out infinite -2s; }
.s-serie .lab { display: block; font-size: 10.5px; }
.serie-zahl { display: block; margin-top: 4px; font-size: 14px; color: var(--text-2); }
.serie-zahl b { font-size: 28px; font-weight: 300; color: var(--text); letter-spacing: -.02em; }
.serie-punkte { display: flex; gap: 5px; margin-top: 8px; }
.serie-punkte i { width: 20px; height: 20px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.serie-punkte i.g { background: var(--mint); box-shadow: none; }
.serie-punkte i.f { background: #fff; }
.serie-punkte i.h { box-shadow: inset 0 0 0 2px var(--uv); }
.s-karte { right: -150px; bottom: 22%; width: 250px; animation: schweben 9s ease-in-out infinite -4s; }
.s-karte .lab { display: block; font-size: 10.5px; margin-bottom: 8px; }
.bew { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bew i { font-style: normal; font-size: 13px; padding: 7px 10px; border-radius: 12px; background: #EEF1F5; display: flex; align-items: center; gap: 6px; }
.bew i::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bew .b-n::before, .bew .b-s::before { background: var(--rose); }
.bew .b-g::before { background: var(--mint); }
.bew .b-l::before { background: var(--uv-k); }
.bew .b-g { animation: wahl 6s ease-in-out infinite; }
@keyframes wahl { 0%, 55% { background: #EEF1F5; } 62%, 92% { background: var(--mint-z); box-shadow: inset 0 0 0 1.5px var(--mint-t); } 100% { background: #EEF1F5; } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.laptop { margin: 0; position: relative; z-index: 2; }
.laptop .deckel { position: relative; background: #15121F; border-radius: 26px 26px 10px 10px; padding: 2.1% 2.1% 2.6%; box-shadow: 0 0 0 1.5px #2C283A inset, 0 40px 90px rgba(23, 18, 46, .28), 0 10px 26px rgba(23, 18, 46, .16); }
.laptop .kamera { position: absolute; left: 50%; top: .8%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #3A3550; }
.laptop .schirm { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background-color: var(--bg); container-type: inline-size; }
.laptop .unterteil { position: relative; height: 0; padding-bottom: 2.6%; margin: 0 -6.5%; background: #CDD2DC; clip-path: polygon(0 0, 100% 0, 98.6% 100%, 1.4% 100%); border-radius: 0 0 40% 40% / 0 0 100% 100%; }
.laptop .unterteil span { position: absolute; left: 50%; top: 0; width: 13%; height: 42%; margin-left: -6.5%; border-radius: 0 0 10px 10px; background: #B6BCC9; }
.ansichten { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; }
.ansichten span { padding: 6px 14px; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid var(--linie); color: var(--text-2); }
.ansichten em { font-style: normal; font-size: 13px; color: var(--text-2); flex-basis: 100%; text-align: center; margin-top: 4px; }

.ui { position: absolute; inset: 0; font-size: calc(100cqw / 90); color: var(--text); line-height: 1.3; }
.ansicht { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; }
.ansicht.a1 { opacity: 1; }
.u-kopf { height: 4.6em; flex-shrink: 0; display: flex; align-items: center; gap: .5em; padding: 0 1.2em 0 .8em; background: rgba(255,255,255,.88); border-bottom: 1px solid var(--linie); }
.u-logo { position: relative; width: 8.4em; height: 2.8em; overflow: hidden; flex-shrink: 0; }
.u-logo img { position: absolute; width: 126.67%; max-width: none; left: -12.67%; top: -54%; height: auto; }
.u-orte { display: flex; gap: .2em; padding: .25em; border-radius: 2em; background: rgba(23,18,46,.05); margin-left: .6em; }
.u-orte i, .u-pill { font-style: normal; font-size: .95em; height: 2.4em; padding: 0 1em; border-radius: 1.2em; display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.u-orte i.an { background: var(--schwarz); color: #fff; }
.u-orte em { font-style: normal; font-size: .8em; padding: .15em .5em; border-radius: 1em; background: var(--knopf); color: var(--text); }
.u-raum { flex: 1; }
.u-pill { border: 1px solid var(--linie); background: #fff; }
.u-pill.an { background: var(--schwarz); color: #fff; border-color: var(--schwarz); }
.u-prof { font-style: normal; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--mint); display: grid; place-items: center; font-size: .95em; flex-shrink: 0; }
.u-leib { flex: 1; display: flex; gap: 1.2em; padding: 1.3em 1.3em 0; min-height: 0; overflow: hidden; }
.u-mitte { flex: 1; min-width: 0; align-content: start; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1em; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.u-rechts { width: 21em; flex-shrink: 0; display: flex; flex-direction: column; gap: 1em; }
.t { position: relative; border-radius: 1.6em; padding: 1.2em 1.3em; background: #fff; display: flex; flex-direction: column; gap: .35em; overflow: hidden; min-height: 9em; }
.t-lab { font-size: .7em; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--text-2); }
.t-lab.hell { color: rgba(255,255,255,.95); }
.t-gross { font-size: 2.3em; font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.t-mittel { font-size: 1.7em; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.t-zahl { font-size: 3.4em; font-weight: 300; letter-spacing: -.04em; line-height: 1; margin-top: .1em; }
.t-zahl small { font-size: .4em; letter-spacing: 0; }
.t-neben { font-size: .9em; color: var(--text-2); }
.t-hallo { min-height: 17em; justify-content: flex-end; background: #fff; }
.mclaim { position: absolute; left: 1.3em; top: 1.2em; display: flex; flex-direction: column; align-items: flex-start; gap: .35em; }
.mclaim i { font-style: normal; font-size: .9em; font-weight: 500; padding: .35em .8em; border-radius: 1em; border: 1.5px solid var(--text); }
.mclaim i.v { background: var(--schwarz); color: #fff; }
.t-uv { background: var(--uv); color: #fff; min-height: 17em; }
.t-uv .t-lab { color: rgba(255,255,255,.95); }
.u-schritt { display: flex; align-items: center; gap: .6em; padding: .45em .8em .45em .4em; border-radius: 1.4em; background: rgba(255,255,255,.16); font-size: .95em; margin-top: .25em; }
.u-schritt em { font-style: normal; width: 1.7em; height: 1.7em; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: .85em; }
.u-schritt small { margin-left: auto; font-size: .85em; opacity: .9; }
.u-schritt.an { background: #fff; color: var(--text); }
.u-schritt.an em { background: var(--uv); color: #fff; }
.u-knopf { align-self: flex-start; margin-top: auto; font-size: .9em; padding: .55em 1.2em; border-radius: 1.4em; background: var(--schwarz); color: #fff; }
.u-knopf.uvk { background: var(--uv-t); } .u-knopf.mk { background: var(--mint-t); } .u-knopf.rk { background: var(--rose-t); }
.u-nr { position: absolute; right: 1em; top: 1em; width: 2.3em; height: 2.3em; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: .85em; }
.t-lav { background: var(--uv-z); min-height: 17em; }
.t-mint { background: var(--mint); }
.t-rose { background: var(--rose); }
.t-mint.s3, .t-rose.s3 { min-height: 17em; }
.u-quad { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .4em; }
.u-quad i { width: .9em; height: .9em; border-radius: .25em; background: rgba(255,255,255,.65); }
.t-pflaume { background: #1B1238; color: #fff; }
.u-welle { display: flex; align-items: center; gap: .3em; height: 3em; margin-top: auto; }
.u-welle i { width: .35em; border-radius: .2em; background: var(--mint); height: 40%; animation: pegel 1.4s ease-in-out infinite; }
.u-welle i:nth-child(3n) { height: 70%; animation-delay: -.3s; } .u-welle i:nth-child(3n+1) { height: 55%; animation-delay: -.7s; } .u-welle i:nth-child(4n) { height: 85%; animation-delay: -1s; }
@keyframes pegel { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.t-grau { background: #E6EAF0; }
.t-weiss { background: #fff; }
.u-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: .4em; }
.u-zwei i { height: 6em; border-radius: 1.2em; background: #F4F6F9; }
.u-coach { background: var(--schwarz); color: #fff; border-radius: 1.8em; padding: 1.2em 1.3em; display: flex; flex-direction: column; gap: .6em; }
.c-kopf { font-size: 1em; } .c-kopf b { font-weight: 500; }
.c-titel { font-size: 1.6em; font-weight: 300; line-height: 1.12; letter-spacing: -.01em; }
.c-kann { display: flex; flex-direction: column; gap: .35em; background: #1A1E2B; border-radius: 1.2em; padding: .7em .8em; }
.c-kann i { font-style: normal; font-size: .85em; display: flex; align-items: center; gap: .5em; }
.c-kann i::before { content: ""; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--knopf); flex-shrink: 0; }
.c-ein { background: #fff; color: #6B7280; border-radius: 1.1em; padding: .8em 1em; font-size: .8em; }
.u-monat { display: grid; grid-template-columns: repeat(7, 1.5em); gap: .3em; margin-top: .4em; }
.u-monat i { width: 1.5em; height: 1.5em; border-radius: .4em; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.u-monat i.g { background: var(--mint); box-shadow: none; } .u-monat i.h { box-shadow: inset 0 0 0 2px var(--uv); } .u-monat i.o { background: transparent; }
.plan-kopf { min-height: 15em; }
.raster12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35em; margin-top: auto; }
.raster12 i { height: 1.3em; border-radius: .4em; background: #fff; }
.raster12 i.g { background: var(--mint); } .raster12 i.l { background: var(--uv-k); }
.tage { align-items: center; justify-content: center; min-height: 15em; }
.ring-gross { position: relative; width: 9em; height: 9em; display: grid; place-items: center; text-align: center; }
.ring-gross svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-gross .spur { fill: none; stroke: var(--uv-z); stroke-width: 10; }
.ring-gross .lav { fill: none; stroke: var(--uv); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 120; }
.ring-gross b { font-size: 2.6em; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.ring-gross small { position: absolute; bottom: 2.4em; font-size: .85em; color: var(--text-2); }
.weg-board { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: .7em; padding: .6em 0; }
.weg-board .pfad { position: absolute; left: 3%; right: 3%; top: 50%; border-top: .25em dotted #AEB7C4; }
.kk { position: relative; background: #fff; border-radius: 1.2em; padding: .8em .9em; font-size: .85em; line-height: 1.2; min-height: 4.6em; }
.kk small { display: block; margin-top: .3em; font-size: .85em; color: var(--text-2); }
.kk.g { background: var(--mint); } .kk.l { background: var(--uv-k); }
.u-balken { display: block; height: .55em; border-radius: .3em; background: rgba(255,255,255,.6); margin-top: auto; overflow: hidden; }
.u-balken i { display: block; height: 100%; background: var(--text); border-radius: .3em; }
.u-zeile { display: flex; justify-content: space-between; font-size: .9em; padding: .5em .7em; border-radius: .8em; background: #F4F6F9; margin-top: .3em; }
.u-zeile i { font-style: normal; color: var(--text-2); } .u-zeile b { font-weight: 500; }
.u-coach.kurz .c-titel { font-size: 1.5em; }
.f-titel { padding: .3em 0 .2em; }
.f-gelernt { flex-direction: row; align-items: center; gap: 2em; min-height: 13em; }
.ring-gross.mehr .seg { fill: none; stroke-width: 12; }
.ring-gross.mehr .s-a { stroke: var(--rose); stroke-dasharray: 60 314; }
.ring-gross.mehr .s-b { stroke: var(--uv); stroke-dasharray: 8 314; stroke-dashoffset: -64; }
.ring-gross.mehr .innen { fill: none; stroke: #CBD2DC; stroke-width: 6; }
.f-gruppen { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .8em 1.6em; }
.f-gruppen i { font-style: normal; font-size: .9em; display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.f-gruppen em { width: .8em; height: .8em; border-radius: .25em; }
.f-gruppen u { flex-basis: 100%; height: .45em; border-radius: .25em; background: rgba(23,18,46,.08); overflow: hidden; text-decoration: none; display: block; }
.f-gruppen s { display: block; height: 100%; text-decoration: none; }
.u-punkte { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .4em; }
.u-punkte i { width: .9em; height: .9em; border-radius: 50%; background: var(--uv); }

.ansicht.a1 { animation: zeigeA 18s infinite; }
.ansicht.a2 { animation: zeigeB 18s infinite; }
.ansicht.a3 { animation: zeigeC 18s infinite; }
@keyframes zeigeA { 0%, 30% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes zeigeB { 0%, 30% { opacity: 0; } 34%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes zeigeC { 0%, 63% { opacity: 0; } 67%, 96% { opacity: 1; } 100% { opacity: 0; } }
.ansichten .n1 { animation: markeA 18s infinite; } .ansichten .n2 { animation: markeB 18s infinite; } .ansichten .n3 { animation: markeC 18s infinite; }
@keyframes markeA { 0%, 32% { background: var(--schwarz); color: #fff; } 34%, 98% { background: rgba(255,255,255,.7); color: var(--text-2); } 100% { background: var(--schwarz); color: #fff; } }
@keyframes markeB { 0%, 32% { background: rgba(255,255,255,.7); color: var(--text-2); } 34%, 65% { background: var(--schwarz); color: #fff; } 67%, 100% { background: rgba(255,255,255,.7); color: var(--text-2); } }
@keyframes markeC { 0%, 65% { background: rgba(255,255,255,.7); color: var(--text-2); } 67%, 98% { background: var(--schwarz); color: #fff; } 100% { background: rgba(255,255,255,.7); color: var(--text-2); } }

.sauber { padding-top: 64px; padding-bottom: 40px; }
.linien3 { display: grid; margin-top: 34px; border-top: 1px solid rgba(23,18,46,.14); }
.linien3 > div { padding: 22px 0; border-bottom: 1px solid rgba(23,18,46,.14); }
.linien3 p { margin-top: 10px; font-size: 20px; font-weight: 300; letter-spacing: -.01em; line-height: 1.35; }

.bento2 { display: grid; gap: 16px; }
.bento2 .kachel { display: flex; flex-direction: column; padding: 26px; min-height: 420px; }
.bento2 h3 { font-size: 36px; margin-top: 22px; }
.bento2 p { margin-top: 12px; max-width: 40ch; }
.bento2 .uv { background: var(--uv); color: #fff; }
.bento2 .uv .zahl { color: var(--uv-t); }
.bento2 .mint { background: var(--mint); color: #0B2A1D; }
.bento2 .rose { background: var(--rose); color: #3A0D1C; }
.lese-mini, .karte-mini, .quiz-mini { margin-top: auto; padding-top: 22px; position: relative; }
.lese-mini { background: #fff; color: var(--text); border-radius: 22px; padding: 18px 20px 22px; margin-top: 24px; box-shadow: 0 20px 40px rgba(20,10,80,.25); }
.lm-pfad { display: flex; gap: 6px; } .lm-pfad i { font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--linie); }
.lm-titel { display: block; width: 55%; height: 18px; border-radius: 9px; background: var(--text); opacity: .85; margin: 14px 0 10px; }
.lm-z { display: block; height: 9px; border-radius: 5px; background: var(--text); opacity: .18; margin-top: 9px; }
.lm-z.kern { opacity: 1; background: var(--knopf); width: 86%; }
.lm-z.kurz { width: 55%; }
.lm-pop { position: absolute; right: 18px; top: 60px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #fff; box-shadow: 0 14px 30px rgba(23,18,46,.16); border-radius: 16px; padding: 10px 14px; font-size: 14px; font-weight: 500; animation: auftauchen 5s ease-in-out infinite -2s; }
.lm-pop small { display: block; font-weight: 400; color: var(--text-2); font-size: 12.5px; }
@keyframes auftauchen { 0%, 20% { opacity: 0; transform: translateY(8px); } 30%, 80% { opacity: 1; transform: translateY(0); } 90%, 100% { opacity: 0; transform: translateY(8px); } }
.karte-mini { background: #fff; color: var(--text); border-radius: 22px; padding: 16px 18px; margin-top: 24px; box-shadow: 0 20px 40px rgba(10,60,40,.18); }
.km-kopf { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.km-kopf i { font-style: normal; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--linie); }
.km-kopf i:first-child { width: 28px; height: 28px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #EEF1F5; border: 0; }
.km-kopf .r { margin-left: auto; border: 0; color: var(--text-2); }
.km-seite { display: block; padding: 14px 0 6px; font-size: 18px; }
.km-bew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.km-bew i { font-style: normal; font-size: 12.5px; padding: 8px 4px; border-radius: 12px; background: #EEF1F5; text-align: center; }
.km-bew .g { animation: wahl 6s ease-in-out infinite; }
.quiz-mini { background: #fff; color: var(--text); border-radius: 22px; padding: 16px; margin-top: 24px; box-shadow: 0 20px 40px rgba(90,10,40,.18); }
.qm-st { display: flex; gap: 6px; align-items: center; }
.qm-st i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(23,18,46,.25); }
.qm-st i.an { box-shadow: inset 0 0 0 3px var(--uv); }
.qm-frage { display: block; padding: 12px 0 8px; font-size: 20px; }
.qm-antw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qm-antw i { height: 40px; border-radius: 12px; border: 1.5px solid rgba(23,18,46,.14); display: flex; align-items: center; padding: 0 8px; }
.qm-antw em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--text); display: grid; place-items: center; font-size: 11px; }
.qm-antw i:nth-child(3) { animation: wahlQ 6s ease-in-out infinite; }
@keyframes wahlQ { 0%, 50% { background: #fff; } 58%, 92% { background: var(--mint); border-color: var(--mint); } 100% { background: #fff; } }

.dunkelband { position: relative; overflow: hidden; background: var(--schwarz); color: #fff; padding: 70px 0; margin: 30px 0; }
.dunkelband .wrap { position: relative; z-index: 1; }
.coach-raster { display: grid; gap: 40px; align-items: center; }
.lab.ki { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; }
.lab.ki::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.coach-text .zweiton { margin-top: 18px; }
.coach-text .unter { margin-top: 18px; font-size: 18px; max-width: 560px; }
.faehig { display: grid; gap: 10px; margin-top: 28px; }
.fk { border-radius: 20px; padding: 14px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.fk b { display: block; font-weight: 500; font-size: 16px; }
.fk span { display: block; margin-top: 3px; font-size: 14.5px; color: #C9C4E6; line-height: 1.45; }
.coach-text .fussnote { margin-top: 18px; font-size: 14px; max-width: 560px; }
.unter-bild { margin-top: 14px; font-size: 13px; text-align: center; }

.handy { margin: 0 auto; width: min(330px, 86vw); position: relative; }
.h-gehaeuse { position: relative; aspect-ratio: 9 / 19.3; background: #1C1928; border-radius: 52px; padding: 11px; box-shadow: 0 0 0 1.5px #3A3550 inset, 0 0 0 4px #0B0A12, 0 40px 80px rgba(0,0,0,.5); }
.h-gehaeuse::before, .h-gehaeuse::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #2C283A; }
.h-gehaeuse::before { left: -6px; top: 22%; height: 9%; }
.h-gehaeuse::after { right: -6px; top: 28%; height: 14%; }
.insel { position: absolute; left: 50%; top: 22px; width: 30%; height: 26px; margin-left: -15%; border-radius: 14px; background: #000; z-index: 3; }
.h-schirm { position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: #0D0B1A; container-type: inline-size; }
.h-ui { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: calc(100cqw / 24); color: #fff; }
.h-kopf { padding: 3.2em 1.2em .8em; display: flex; flex-direction: column; gap: .5em; border-bottom: 1px solid rgba(255,255,255,.08); }
.h-uhr { position: absolute; left: 1.6em; top: 1.15em; font-size: .9em; font-weight: 500; }
.h-titel { font-size: 1.15em; } .h-titel b { font-weight: 500; }
.h-titel em { font-style: normal; font-size: .7em; margin-left: .4em; padding: .15em .5em; border-radius: .6em; background: var(--mint); color: #0B2A1D; vertical-align: middle; }
.chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: 0 .9em .6em; overflow: hidden; }
.m { max-width: 86%; font-size: .9em; line-height: 1.38; padding: .7em .85em; border-radius: 1.2em; margin-top: .55em; overflow: hidden; }
.m.ich { align-self: flex-end; background: var(--knopf); color: var(--text); border-bottom-right-radius: .4em; }
.m.er { align-self: flex-start; background: #1E2232; color: #E8ECF1; border-bottom-left-radius: .4em; }
.m .unscharf { opacity: .3; }
.m-wahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; margin-top: .6em; }
.m-wahl i { font-style: normal; text-align: center; padding: .3em 0; border-radius: .6em; background: rgba(255,255,255,.1); font-size: .85em; }
.m-link { display: inline-block; margin-top: .6em; padding: .35em .8em; border-radius: 1em; background: var(--knopf); color: var(--text); font-size: .85em; }
.m-ziel { display: flex; align-items: center; gap: .6em; margin-top: .6em; padding: .55em .7em; border-radius: .9em; background: var(--mint); color: #0B2A1D; }
.m-ziel b { font-weight: 500; } .m-ziel small { font-size: .85em; } .m-ziel i { margin-left: auto; font-style: normal; font-size: .8em; padding: .25em .6em; border-radius: .8em; background: #0B2A1D; color: #fff; }
.m.sprache { display: flex; flex-direction: column; gap: .3em; }
.sp-welle { display: flex; align-items: center; gap: .2em; height: 1.6em; }
.sp-welle i { width: .22em; height: 60%; border-radius: .1em; background: var(--text); }
.sp-welle i:nth-child(2n) { height: 100%; } .sp-welle i:nth-child(3n) { height: 35%; }
.m.sprache small { font-size: .8em; color: #3D3858; }
.m-chips { display: flex; gap: .3em; margin: .5em 0 .4em; flex-wrap: wrap; }
.m-chips i { font-style: normal; font-size: .8em; padding: .2em .6em; border-radius: .8em; background: rgba(255,255,255,.12); filter: blur(.4px); }
.m-chips i.ok { background: var(--mint); color: #0B2A1D; }
.h-ein { margin: 0 .9em 1.6em; padding: .75em .9em; border-radius: 1.4em; background: #fff; color: #6B7280; font-size: .8em; display: flex; align-items: center; gap: .5em; }
.h-ein span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-ein i { width: 2em; height: 2em; border-radius: 50%; background: var(--schwarz); flex-shrink: 0; }

.m { animation: 32s infinite both; animation-delay: -15s; }
.m1 { animation-name: n1; } .m2 { animation-name: n2; } .m3 { animation-name: n3; } .m4 { animation-name: n4; } .m5 { animation-name: n5; }
.m6 { animation-name: n6; } .m7 { animation-name: n7; } .m8 { animation-name: n8; } .m9 { animation-name: n9; } .m10 { animation-name: n10; }
@keyframes n1 { 0%, 2% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 4%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
@keyframes n2 { 0%, 8% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 10%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
@keyframes n3 { 0%, 20% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 22%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
@keyframes n4 { 0%, 26% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 28%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
@keyframes n5 { 0%, 38% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 40%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
@keyframes n6 { 0%, 44% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 46%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
@keyframes n7 { 0%, 56% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 58%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
@keyframes n8 { 0%, 62% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 64%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
@keyframes n9 { 0%, 74% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 76%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
@keyframes n10 { 0%, 80% { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } 82%, 94% { max-height: 20em; opacity: 1; } 97%, 100% { max-height: 20em; opacity: 0; } }
.fk { animation: 32s infinite; animation-delay: -15s; }
.f1 { animation-name: hell1; } .f2 { animation-name: hell2; } .f3 { animation-name: hell3; } .f4 { animation-name: hell4; } .f5 { animation-name: hell5; }
@keyframes hell1 { 0%, 8% { background: rgba(255,255,255,.06); } 10%, 19% { background: rgba(207,216,245,.22); border-color: var(--knopf); } 21%, 100% { background: rgba(255,255,255,.06); } }
@keyframes hell2 { 0%, 26% { background: rgba(255,255,255,.06); } 28%, 37% { background: rgba(207,216,245,.22); border-color: var(--knopf); } 39%, 100% { background: rgba(255,255,255,.06); } }
@keyframes hell3 { 0%, 44% { background: rgba(255,255,255,.06); } 46%, 55% { background: rgba(207,216,245,.22); border-color: var(--knopf); } 57%, 100% { background: rgba(255,255,255,.06); } }
@keyframes hell4 { 0%, 62% { background: rgba(255,255,255,.06); } 64%, 73% { background: rgba(207,216,245,.22); border-color: var(--knopf); } 75%, 100% { background: rgba(255,255,255,.06); } }
@keyframes hell5 { 0%, 80% { background: rgba(255,255,255,.06); } 82%, 94% { background: rgba(207,216,245,.22); border-color: var(--knopf); } 96%, 100% { background: rgba(255,255,255,.06); } }

.bento3 { display: grid; gap: 16px; }
.bento3 .kachel { padding: 26px; display: flex; flex-direction: column; min-height: 240px; }
.bento3 h3 { font-size: 28px; font-weight: 300; }
.bento3 p { margin-top: 10px; color: var(--text-2); font-size: 16.5px; }
.plan-mini { margin-top: auto; padding-top: 24px; }
.pm-leiste { display: flex; gap: 4px; height: 18px; }
.pm-leiste i { flex: 1; border-radius: 9px; background: var(--uv-z); }
.pm-leiste i.f { background: var(--mint); } .pm-leiste i.h { background: var(--uv); animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.pm-achse { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; color: var(--text-2); }
.pm-achse b { font-weight: 500; color: var(--text); }
.fokus-ring { position: relative; width: 110px; height: 110px; display: grid; place-items: center; margin-bottom: 18px; }
.fokus-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fokus-ring .spur { fill: none; stroke: var(--uv-z); stroke-width: 10; }
.fokus-ring .lauf { fill: none; stroke: var(--uv); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; animation: fokuslauf 25s linear infinite; }
@keyframes fokuslauf { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 300; } }
.fokus-ring b { font-size: 32px; font-weight: 300; line-height: 1; } .fokus-ring small { position: absolute; bottom: 26px; font-size: 12px; color: var(--text-2); }
.balken-mini { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-bottom: 18px; }
.balken-mini i { flex: 1; max-width: 26px; border-radius: 8px 8px 4px 4px; background: var(--uv-k); }
.balken-mini i:last-child { background: var(--mint); }
.laut-kachel { background: #1B1238; color: #fff; }
.laut-kachel h3 { color: #fff; margin-top: 8px; }
.laut-kachel p { color: #E4E1F5; }
.laut-kachel .fussnote { font-size: 13.5px; color: #C9C4E6; margin-top: 14px; }
.laut-kachel .mikro { margin-bottom: 16px; }
.welle2 { display: flex; align-items: center; gap: 4px; height: 56px; margin-top: 18px; }
.welle2 i { flex: 1; max-width: 7px; height: 50%; border-radius: 4px; background: var(--mint); animation: pegel 1.3s ease-in-out infinite; }
.welle2 i:nth-child(2n) { height: 80%; animation-delay: -.4s; } .welle2 i:nth-child(3n) { height: 35%; animation-delay: -.8s; } .welle2 i:nth-child(5n) { height: 95%; animation-delay: -1.1s; }
.chips-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.chips-mini i { font-style: normal; font-size: 13.5px; padding: 6px 12px; border-radius: 16px; background: #EEF1F5; }
.chips-mini i:nth-child(1) { background: var(--uv-z); } .chips-mini i:nth-child(2) { background: var(--mint-z); } .chips-mini i:nth-child(3) { background: var(--rose-z); }
.dunkel-kachel { background: var(--schwarz); color: #fff; flex-direction: row !important; align-items: center; gap: 22px; flex-wrap: wrap; }
.dunkel-kachel p { margin-top: 0 !important; }
.schalter { width: 64px; height: 34px; border-radius: 17px; background: #2C283A; position: relative; flex-shrink: 0; }
.schalter::after { content: ""; position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--knopf); }
.dunkel-kachel h3 { color: #fff; }
.dunkel-kachel p { color: #C9C4E6; }

.stimmen-raster { display: grid; gap: 14px; }
.stimme { margin: 0; }
.stimme blockquote { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.4; }
.stimme figcaption { margin-top: 14px; font-size: 14px; color: var(--text-2); }

.warteliste2 { position: relative; overflow: hidden; background: var(--uv); color: #fff; border-radius: 36px; padding: 32px 22px; display: grid; gap: 24px; }
.warteliste2 > *:not(.blobs) { position: relative; z-index: 1; }
.warteliste2 h2 { font-size: clamp(32px, 6.4vw, 56px); margin-top: 12px; color: #fff; letter-spacing: -.03em; }
.warteliste2 p.lead { margin-top: 14px; color: #EDEAFF; max-width: 520px; }
.warteliste2 .formular { color: var(--text); }

.preise-zeile { display: grid; gap: 20px; align-items: end; }
.preise-zeile h2 { margin-top: 10px; }

@media (min-width: 760px) {
  .hero2 { padding: 56px 0 40px; }
  .linien3 { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .linien3 > div { border-bottom: 0; border-left: 1px solid rgba(23,18,46,.14); padding: 6px 28px 6px; }
  .linien3 > div:first-child { border-left: 0; padding-left: 0; }
  .bento2 { grid-template-columns: repeat(12, 1fr); }
  .b-lesen { grid-column: span 5; } .b-karten { grid-column: span 4; } .b-pruefen { grid-column: span 3; }
  .dunkelband { padding: 96px 0; border-radius: 48px; margin: 40px var(--rand); }
  .coach-raster { grid-template-columns: 1.15fr 1fr; gap: 56px; }
  .faehig { grid-template-columns: 1fr 1fr; }
  .faehig .f5 { grid-column: span 2; }
  .bento3 { grid-template-columns: repeat(12, 1fr); }
  .c-plan { grid-column: span 7; } .c-fokus { grid-column: span 5; }
  .c-laut { grid-column: span 12; } .c-fort { grid-column: span 6; } .c-komp { grid-column: span 6; }
  .c-dunkel { grid-column: span 12; min-height: 0 !important; }
  .stimmen-raster { grid-template-columns: repeat(3, 1fr); }
  .warteliste2 { grid-template-columns: 1.1fr 1fr; padding: 54px; align-items: center; gap: 40px; }
  .preise-zeile { grid-template-columns: 1fr auto; }
}
@media (min-width: 1100px) {
  .schwebe { display: block; }
  .s-fokus { display: flex; }
  .c-laut { grid-column: span 6; } .c-fort { grid-column: span 3; } .c-komp { grid-column: span 3; }
}
@media (max-width: 759px) {
  .claim .paar { flex-wrap: nowrap; }
  .laptop .deckel { border-radius: 14px 14px 6px 6px; }
  .bento2 .kachel { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .blobs i, .schwebe, .mini-ring .lauf, .bew .b-g, .u-welle i, .welle2 i, .lm-pop, .km-bew .g, .qm-antw i, .pm-leiste i.h, .fokus-ring .lauf, .fk, .ansichten span { animation: none !important; }
  .ansicht.a1 { animation: none; opacity: 1; } .ansicht.a2, .ansicht.a3 { animation: none; opacity: 0; }
  .ansichten .n1 { background: var(--schwarz); color: #fff; }
  .m { animation: none !important; opacity: 1; max-height: none; }
  .lm-pop { opacity: 1; }
}
@media (max-width: 759px) {
  .bento3 .c-dunkel { min-height: 0; }
  .buehne-geraet { margin-left: -6px; margin-right: -6px; }
}

.heute-handy { display: none; }
.hh-schirm { background: var(--bg); }
.hh-ui { color: var(--text); font-size: calc(100cqw / 22); }
.hh-kopf { display: flex; align-items: center; gap: .6em; padding: 3.1em 1.1em .7em; background: #fff; border-bottom: 1px solid var(--linie); }
.hh-logo { width: 5.4em; } .hh-logo img { display: block; width: 100%; height: auto; }
.hh-pill { margin-left: auto; font-style: normal; font-size: .8em; padding: .3em .8em; border-radius: 1em; border: 1px solid var(--text); }
.hh-leib { flex: 1; display: flex; flex-direction: column; gap: .7em; padding: .9em .9em .2em; overflow: hidden; }
.hh-hallo { font-weight: 300; font-size: 1.45em; line-height: 1.12; letter-spacing: -.02em; padding: 0 .1em; }
.hh-heute { display: flex; flex-direction: column; gap: .4em; padding: 1em .9em; border-radius: 1.3em; background: var(--uv); color: #fff; }
.hh-lab { font-size: .68em; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.hh-titel { font-weight: 300; font-size: 1.15em; margin-bottom: .2em; }
.hh-schritt { display: flex; align-items: center; gap: .55em; padding: .45em .5em .45em .4em; border-radius: 1.3em; background: rgba(255,255,255,.16); font-size: .9em; }
.hh-schritt em { font-style: normal; width: 1.7em; height: 1.7em; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: .85em; }
.hh-schritt small { margin-left: auto; font-size: .82em; opacity: .9; }
.hh-schritt i { font-style: normal; font-size: .8em; padding: .25em .75em; border-radius: 1em; background: rgba(255,255,255,.22); }
.hh-schritt.an { background: #fff; color: var(--text); }
.hh-schritt.an em { background: var(--uv); color: #fff; }
.hh-schritt.an i { background: var(--uv-t); color: #fff; }
.hh-start { margin-top: .35em; text-align: center; font-size: .9em; padding: .6em 1em; border-radius: 1.4em; background: var(--schwarz); color: #fff; }
.hh-serie { display: flex; flex-direction: column; gap: .3em; padding: .9em; border-radius: 1.2em; background: #fff; }
.hh-serie b { font-weight: 300; font-size: 1.05em; }
.hh-serie .serie-punkte i { width: 1.6em; height: 1.1em; }
.hh-leiste { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; padding: .6em .7em 1.7em; background: #fff; border-top: 1px solid var(--linie); }
.hh-leiste i { font-style: normal; font-size: .72em; text-align: center; padding: .45em 0; border-radius: 1em; color: var(--text-2); }
.hh-leiste i.an { background: var(--schwarz); color: #fff; }
@media (max-width: 759px) {
  .hero2 .laptop { display: none; }
  .heute-handy { display: block; }
}

:root { --rand: 16px; --bleed: 16px; --r0: 0px; --r1: 28px; --r2: 20px; --pk: 24px; --sek: 48px; --band: 64px; }
@media (min-width: 760px) { :root { --rand: 40px; --bleed: 24px; --r0: 40px; --r1: 32px; --r2: 24px; --pk: 24px; --sek: 64px; --band: 80px; } }
@media (min-width: 1100px) { :root { --rand: 56px; --bleed: 40px; --pk: 32px; --band: 96px; } }

.wrap { max-width: calc(var(--breite) + 2 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); }

main > section, main > section.sauber, main > section.demo { padding-top: var(--sek); padding-bottom: var(--sek); margin: 0; }
main > section.hero2 { padding-top: var(--sek); padding-bottom: var(--sek); }
.sektion-kopf { margin-bottom: 32px; }
.sektion-kopf h2 { margin-top: 16px; }

.sektion-kopf h1.zweiton { font-size: clamp(32px, 5.4vw, 56px); margin-top: 16px; }

.dunkelband { background: transparent; border-radius: 0; margin: 0 !important; padding-top: var(--band) !important; padding-bottom: var(--band) !important; overflow: visible; }
.dunkelband::before { content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(max(0px, (100% - var(--breite) - 2 * var(--rand)) / 2) + var(--rand) - var(--bleed));
  right: calc(max(0px, (100% - var(--breite) - 2 * var(--rand)) / 2) + var(--rand) - var(--bleed));
  background: var(--schwarz); border-radius: var(--r0); z-index: 0; }
.dunkelband > .blobs { top: 0; bottom: 0; border-radius: var(--r0);
  left: calc(max(0px, (100% - var(--breite) - 2 * var(--rand)) / 2) + var(--rand) - var(--bleed));
  right: calc(max(0px, (100% - var(--breite) - 2 * var(--rand)) / 2) + var(--rand) - var(--bleed)); }
.ehrlich, .warteliste2 { margin-left: calc(-1 * var(--bleed)); margin-right: calc(-1 * var(--bleed));
  padding: var(--band) var(--bleed) !important; border-radius: var(--r0) !important; }
@media (max-width: 759px) { .ehrlich, .warteliste2 { padding: 48px var(--bleed) !important; } }

.kachel, .bento2 .kachel, .bento3 .kachel { padding: var(--pk) !important; border-radius: var(--r1) !important; }
.formular, .lese-mini, .karte-mini, .quiz-mini { border-radius: var(--r2) !important; padding: 24px !important; }
.formular { padding: 24px !important; }
.fk { border-radius: var(--r2); padding: 16px 16px; }
.glas.schwebe { border-radius: var(--r2); padding: 16px; }

.kn { height: 48px; padding: 0 24px; border-radius: 999px; }
.kn.klein { height: 40px; padding: 0 16px; }
.kn.gross { height: 56px; padding: 0 32px; border-radius: 999px; }
.ansichten span { height: 32px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; }

.kachel p, .fussnote, .hinweis-klein, .unter, .lead, .ehrlich li, .fk span, .linien3 p { max-width: 32em; }
.hero2 .unter { max-width: 32em; margin-left: auto; margin-right: auto; }
.coach-text .unter, .coach-text .fussnote { max-width: 32em; }

h1, h2, h3, .riesig, .zweiton { text-wrap: balance; }
.linien3 > div:first-child { padding-left: 0; }

.w18, .w18-band {
  --persp: perspective(2200px) rotateY(-14deg) rotateX(3deg) rotateZ(1.5deg);
  --pfl: #1B1238; --uv5: #6A4DF4; --uvz5: #EEEAFF; --kob-z: #E1E7FF; --erd: #F7848B; --erd-z: #FFE7E1;
  --mnt-z: #DFF7EA; --tief: 0 30px 60px -24px rgba(27, 18, 56, .28), 0 10px 24px -12px rgba(27, 18, 56, .16);
}
main > section.w18 { padding-top: var(--sek); padding-bottom: var(--sek); }
.w18 img { height: auto; }
.w18 h2 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05; letter-spacing: -.03em; }
.w18 h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.w18-kopf { max-width: 760px; margin-bottom: 40px; }
.w18-kopf h2 { margin-top: 14px; }
.w18-kopf p { margin-top: 16px; color: var(--text-2); font-size: 19px; max-width: 34em; }
.w18-pille { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.8);
  border: 1px solid var(--linie); font-size: 14.5px; font-weight: 500; color: var(--text); }
.w18-pille.klein { height: auto; padding: 6px 12px; font-size: 13px; letter-spacing: 0; vertical-align: middle; background: var(--mnt-z); border-color: transparent; color: #0F5A3A; }
.w18-fein { margin-top: 20px; font-size: 15px; color: var(--text-2); }

main > section.w18-held { padding-top: 32px; padding-bottom: 24px; overflow: hidden; }
.w18-held-raster { display: grid; gap: 20px; grid-template-areas: "kopf" "szene" "unten"; }
.w18-held-text { grid-area: kopf; } .w18-szene { grid-area: szene; } .w18-held-unten { grid-area: unten; }
.w18-held h1 { margin-top: 18px; font-size: clamp(38px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.035em; font-weight: 300; max-width: 11.5em; }
.w18-lead { margin-top: 4px; font-size: clamp(18px, 1.6vw, 21px); color: var(--text-2); max-width: 30em; }
.w18-knoepfe { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.w18-klein { margin-top: 16px; font-size: 14.5px; color: var(--text-2); }

.w18-szene { position: relative; width: 100%; aspect-ratio: 1 / 1.02; container-type: inline-size; max-width: 780px; margin: 0 auto; }
.w18-szene > * { position: absolute; }
.w18-szene img { height: auto; max-width: none; }
.w18-fleck { border-radius: 50%; filter: blur(60px); z-index: 0; }
.w18-fleck.f1 { width: 56cqw; height: 56cqw; left: 22cqw; top: 18cqw; background: #D9D0FF; }
.w18-fleck.f2 { width: 30cqw; height: 30cqw; right: 0; top: 4cqw; background: #CFF5E2; opacity: .8; }
.w18-fleck.f3 { width: 26cqw; height: 26cqw; left: 2cqw; bottom: 6cqw; background: #FFDCD6; opacity: .8; }
.w18-blase { width: 84cqw; left: 10cqw; top: 8cqw; mix-blend-mode: multiply; opacity: 1; z-index: 1; filter: contrast(1.25); }
.w18-herz { width: 40cqw; left: 2cqw; top: 0; z-index: 1; filter: drop-shadow(0 30px 34px rgba(120, 30, 40, .2)); }
.w18-lunge { width: 25cqw; right: 1cqw; bottom: 1cqw; z-index: 1; filter: drop-shadow(0 26px 30px rgba(120, 40, 60, .18)); }
.w18-handy { width: 40cqw; left: 30cqw; top: 5cqw; z-index: 2; padding: 1cqw; border-radius: 6.6cqw;
  background: rgba(255, 255, 255, .42); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 0 0 1.5px rgba(23, 18, 46, .2), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 60px 90px -30px rgba(27, 18, 56, .38), 0 20px 40px -20px rgba(27, 18, 56, .22);
  transform: var(--persp); }
.w18-handy::before { content: ""; position: absolute; left: 50%; top: 2.4cqw; width: 10cqw; height: 2.8cqw; translate: -50% 0; border-radius: 999px; background: #0B0A10; z-index: 2; }
.w18-handy::after { content: ""; position: absolute; right: -.6cqw; top: 22cqw; width: .45cqw; height: 9cqw; border-radius: 0 3px 3px 0; border: 1.5px solid rgba(23, 18, 46, .22); border-left: 0; }
.w18-handy-schirm { border-radius: 5.6cqw; box-shadow: 0 0 0 1px rgba(23, 18, 46, .12); overflow: hidden; aspect-ratio: 9 / 19.4; background: #EEF2F6; padding-top: 6.6cqw; }
.w18-handy-schirm img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.w18-g { z-index: 4; transform: var(--persp); display: grid; gap: .45em; padding: 1.15em 1.3em; border-radius: 1.2em; font-size: clamp(10.5px, 1.9cqw, 15px); line-height: 1.35;
  background: rgba(255, 255, 255, .74); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #fff, var(--tief); color: var(--text); }
.w18-g b { font-weight: 500; font-size: 1.08em; }
.w18-gl { font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.w18-gl.ki { color: #4128C2; }
.w18-gt { color: var(--text-2); }
.w18-chips { display: flex; flex-wrap: wrap; gap: .35em; }
.w18-chips i { font-style: normal; font-size: .82em; padding: .3em .7em; border-radius: 999px; background: var(--uvz5); color: #4128C2; }
.w18-frage { justify-self: end; background: #17122E; color: #fff; padding: .45em .8em; border-radius: 1em 1em .3em 1em; font-size: .92em; }
.w18-pl { justify-self: start; font-size: .8em; padding: .25em .7em; border-radius: 999px; background: var(--uvz5); color: #4128C2; }
.w18-balken { display: grid; gap: .35em; }
.w18-balken i { display: block; height: .5em; border-radius: 999px; background: #D9DDEA; width: 100%; }
.w18-balken i.k { width: 62%; }
.w18-bew { display: grid; grid-template-columns: repeat(4, auto); gap: .35em; }
.w18-bew i { font-style: normal; font-size: .82em; padding: .4em .65em; border-radius: .7em; text-align: center; }
.w18-bew .n, .w18-bew .s { background: var(--erd-z); color: #8A1C2E; }
.w18-bew .g { background: #BDEFD3; color: #0F5A3A; box-shadow: 0 0 0 2px #0F6B45 inset; }
.w18-bew .l { background: var(--uvz5); color: #4128C2; }
.w18-ring { position: relative; width: 3.2em; height: 3.2em; display: grid; place-items: center; flex-shrink: 0; }
.w18-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.w18-ring circle { fill: none; stroke-width: 3.4; }
.w18-ring .sp { stroke: #E3E0F4; }
.w18-ring .la { stroke: var(--uv5); stroke-dasharray: 94.2; stroke-dashoffset: 31.4; stroke-linecap: round; }
.w18-ring b { font-size: .82em; }
.g-plan, .g-laut { grid-auto-flow: column; align-items: center; gap: .8em; }
.g-plan > span:last-child, .g-laut > span:last-child { display: grid; gap: .2em; }
.w18-mik { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: #7DEBB0; color: #0B2A1D; }
.w18-mik svg { width: 1.3em; height: 1.3em; }
.w18-welle { display: flex; align-items: center; gap: .22em; height: 1.6em; }
.w18-welle i { display: block; width: .22em; border-radius: 999px; background: var(--uv5); height: 40%; }
.w18-welle i:nth-child(3n) { height: 90%; } .w18-welle i:nth-child(3n+1) { height: 60%; } .w18-welle i:nth-child(4n) { height: 30%; }

.g-plan { right: -1cqw; top: 4cqw; width: 34cqw; }
.g-coach { right: -1cqw; top: 27cqw; width: 33cqw; }
.g-karte { right: 3cqw; top: 62cqw; }
.g-wort { left: 0; top: 30cqw; width: 26cqw; }
.g-patient { left: -1cqw; top: 55cqw; width: 34cqw; }
.g-laut { left: 30cqw; bottom: 0; }
@keyframes w18-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes w18-schweben2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
.w18-herz { animation: w18-schweben 7s ease-in-out infinite; }
.w18-lunge { animation: w18-schweben2 8s ease-in-out infinite; }
.w18-g { animation: w18-schweben 6s ease-in-out infinite; }
.g-coach { animation-delay: -2s; } .g-karte { animation-delay: -4s; animation-name: w18-schweben2; } .g-plan { animation-delay: -1s; }
.g-laut { animation-delay: -3s; animation-name: w18-schweben2; } .g-wort { animation-delay: -5s; }
.w18-blase { animation: w18-schweben2 11s ease-in-out infinite; }

@media (max-width: 559px) {
  .g-wort, .g-laut, .g-karte { display: none; }
  .w18-szene .w18-g { font-size: 9px; padding: 8px 10px; gap: 4px; border-radius: 12px; }
  .g-plan { width: 38cqw; top: 1cqw; right: -2cqw; }
  .g-coach { width: 40cqw; top: 30cqw; right: -2cqw; z-index: 5; }
  .g-patient { width: 38cqw; top: 58cqw; left: -2cqw; }
  .w18-szene .w18-chips i:nth-child(3) { display: none; }
}
@media (min-width: 1024px) {
  main > section.w18-held { padding-top: 56px; padding-bottom: 56px; }
  .w18-held-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 0;
    grid-template-areas: ". szene" "kopf szene" "unten szene"; align-items: start; }
  .w18-held-text { align-self: end; }
  .w18-lead { margin-top: 24px; }
  .w18-held-raster > .w18-held-unten { padding-bottom: 40px; }
}
.w18-held h1 .pkt { color: var(--uv5); }

.w18-kk { display: flex; align-items: center; gap: .55em; }
.w18-kk.zwischen { justify-content: space-between; gap: 1em; }
.w18-ic { width: 2em; height: 2em; border-radius: .7em; display: grid; place-items: center; flex-shrink: 0; font-style: normal; }
.w18-ic svg { width: 1.1em; height: 1.1em; }
.w18-ic.mint { background: #CFF5E2; color: #0F6B45; } .w18-ic.uv { background: var(--uvz5); color: #4128C2; }
.w18-ic.kobalt { background: var(--kob-z); color: #1A32B8; } .w18-ic.erd { background: var(--erd-z); color: #A8243A; }
.w18-ic.dunkel { background: #17122E; color: #fff; }
.w18-mini { font-size: .75em; color: var(--text-2); white-space: nowrap; }
.w18-serie { display: flex; gap: .3em; }
.w18-serie i { width: 1em; height: 1em; border-radius: .3em; background: #fff; box-shadow: inset 0 0 0 1px #D8D5E6; }
.w18-serie i.g { background: #22B573; box-shadow: none; }
.w18-serie i.h { box-shadow: inset 0 0 0 2px var(--uv5); }
.w18-marker { display: grid; gap: .35em; width: 9em; }
.w18-marker i { display: block; height: .55em; border-radius: 999px; background: #D9DDEA; }
.w18-marker i.k { width: 78%; background: #CFC3FF; height: .8em; }
.w18-ring.klein { width: 2.6em; height: 2.6em; }
.w18-ring .la.mint { stroke: #22B573; stroke-dashoffset: 66; }
.g-plan .w18-ring, .w18-ch .w18-ring { order: -1; }
.w18-ch { position: absolute; font-size: clamp(10px, 1.15vw, 14px); animation: w18-schweben 6s ease-in-out infinite; }
.w18-ch:nth-of-type(2n) { animation-name: w18-schweben2; animation-delay: -3s; }
.w18-ch.o-r { right: -3%; top: 6%; } .w18-ch.u-l { left: -4%; bottom: 8%; }
.w18-ch.o-l { left: -4%; top: 8%; } .w18-ch.u-r { right: -3%; bottom: 10%; }
.w18-ch:has(.w18-ring) { grid-auto-flow: column; align-items: center; gap: .7em; }

main > section.w18 { margin: 0; }
.s-hell { background-color: transparent; }
.s-weiss { background-color: #fff; }
.s-dunkel { background: var(--pfl); color: #fff; }
.s-uv { background: var(--uv5); color: #fff; }
.s-mint { background-color: #DFF7EA; }
.s-erd { background: #FFEDE8; }
main > section.w18:not(.w18-held):not(.w18-zahlen) { padding-top: var(--band); padding-bottom: var(--band); }
.s-dunkel .lab, .s-uv .lab { color: rgba(255, 255, 255, .86); }
.s-uv .w18-kopf p, .s-dunkel .w18-kopf p { color: rgba(255, 255, 255, .8); }
.w18-pille.hell { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff; }
.w18-fein.hell { color: rgba(255, 255, 255, .9); }

.w18-gross-nr { display: block; font-size: clamp(64px, 7vw, 104px); font-weight: 300; line-height: .9; letter-spacing: -.05em; color: var(--uv5); }

main > section.w18-zahlen { padding-top: 40px; padding-bottom: 40px; }
.w18-zahlen dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
.w18-zahlen dl > div { padding: 4px 20px; border-left: 1px solid var(--linie); }
.w18-zahlen dd { margin: 0; font-size: clamp(40px, 5vw, 68px); font-weight: 300; letter-spacing: -.035em; line-height: 1; }
.w18-zahlen dd small { font-size: .36em; color: var(--text-2); letter-spacing: 0; }
.w18-zahlen dt { margin-top: 8px; font-size: 15px; color: var(--text-2); }

.w18-drei { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.w18-drei li { font-size: clamp(32px, 5.6vw, 72px); font-weight: 300; letter-spacing: -.035em; line-height: 1.08; color: #8C84B5; }
.w18-drei li:last-child { color: #fff; }
.w18-antwort { margin-top: 26px; font-size: clamp(22px, 2.4vw, 30px); color: #7DEBB0; letter-spacing: -.015em; }

.w18-schritte { list-style: none; margin: 0; padding: 0; position: relative; }
.w18-schritt { display: grid; gap: 28px; align-items: center; padding: 40px 0; }
.w18-st-text { max-width: 30em; }
.w18-st-text h3 { margin-top: 10px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 300; }
.w18-st-text p { margin-top: 12px; color: var(--text-2); font-size: 18px; }
.w18-schritt.kob .w18-gross-nr { color: #2B4EE6; } .w18-schritt.mint .w18-gross-nr { color: #1B9A63; } .w18-schritt.erd .w18-gross-nr { color: #E0566A; }
.w18-st-bild { margin: 0; }
.w18-ill { position: relative; width: 100%; display: grid; place-items: center; padding: 8% 6%; }
.w18-fleck-ill { position: absolute; inset: 12% 14%; border-radius: 50%; filter: blur(50px); z-index: 0; background: #DCD3FF; }
.w18-schritt.kob .w18-fleck-ill { background: #CFD9FF; } .w18-schritt.mint .w18-fleck-ill { background: #BFF0D6; } .w18-schritt.erd .w18-fleck-ill { background: #FFD3CB; }
.w18-rahmen { position: relative; z-index: 1; padding: 10px; border-radius: 28px; background: rgba(255, 255, 255, .5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1.5px rgba(23, 18, 46, .14), inset 0 0 0 1px rgba(255, 255, 255, .95), var(--tief); transform: var(--persp); }
.w18-rahmen img { border-radius: 19px; box-shadow: 0 0 0 1px rgba(23, 18, 46, .08); max-height: 400px; width: auto; display: block; }
.w18-ill .w18-ch { z-index: 2; }

.w18-coach-raster { display: grid; gap: 40px; align-items: center; }
.w18-coach-text h2 { margin-top: 18px; color: #fff; max-width: 12em; }
.w18-coach-text > p { margin-top: 18px; font-size: 19px; color: rgba(255, 255, 255, .86); max-width: 30em; }
.w18-faehig { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.w18-faehig li { display: flex; gap: 14px; align-items: flex-start; }
.w18-faehig b { display: block; font-weight: 500; font-size: 18px; }
.w18-faehig span { color: rgba(255, 255, 255, .8); font-size: 16px; }
.w18-faehig b { color: #fff; }
.w18-ic.hell { background: rgba(255, 255, 255, .18); color: #fff; font-size: 18px; }
.w18-coach-text .w18-fein { margin-top: 26px; }
.w18-coach-bild { position: relative; min-height: 520px; display: grid; place-items: center; }
.w18-coach-herz { position: absolute; width: 46%; left: -2%; top: 2%; filter: drop-shadow(0 30px 40px rgba(20, 8, 70, .35)); animation: w18-schweben 8s ease-in-out infinite; }
.w18-coach-handy { position: relative; z-index: 1; width: min(340px, 80%); padding: 10px; border-radius: 48px; background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), 0 50px 80px -30px rgba(20, 8, 70, .55); transform: var(--persp); }
.w18-chat { display: grid; gap: 10px; padding: 46px 14px 14px; border-radius: 40px; background: #F6F5FB; color: var(--text); font-size: 13.5px; line-height: 1.4; position: relative; }
.w18-chat::before { content: ""; position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 84px; height: 22px; border-radius: 999px; background: #0B0A10; }
.w18-chat-kopf { font-size: 14px; display: flex; gap: 6px; align-items: center; }
.w18-chat-kopf b { font-weight: 500; }
.w18-chat-kopf i { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: #CFF5E2; color: #0F6B45; }
.w18-chat .bl { display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; max-width: 86%; }
.w18-chat .ich { justify-self: end; background: #17122E; color: #fff; border-bottom-right-radius: 6px; }
.w18-chat .er { background: #fff; box-shadow: 0 6px 16px -10px rgba(23, 18, 46, .3); border-bottom-left-radius: 6px; }
.w18-chat small { font-size: 11px; color: #4128C2; }
.w18-chat em { font-style: normal; justify-self: start; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: var(--uvz5); color: #4128C2; }
.w18-abcd { display: flex; gap: 6px; }
.w18-abcd i { font-style: normal; flex: 1; text-align: center; font-size: 11px; padding: 4px 0; border-radius: 8px; background: #F1EFF8; }
.w18-chat-feld { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 999px; background: #fff; color: var(--text-2); font-size: 12px; box-shadow: 0 0 0 1px var(--linie); }
.w18-chat-feld i { width: 22px; height: 22px; border-radius: 50%; background: #17122E; }
.w18-coach-bild .w18-ch.o-r { right: 0; top: 14%; } .w18-coach-bild .w18-ch.u-l { left: 0; bottom: 12%; }
.w18-coach-bild .w18-g { color: var(--text); }

.w18-fkt-raster { display: grid; gap: 48px 32px; }
.w18-f { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); }
.w18-f-bild { position: relative; height: 240px; border-radius: var(--r1); display: grid; place-items: center; overflow: visible; margin-bottom: 16px; }
.w18-f-bild.uv { background: #F1EDFF; } .w18-f-bild.kob { background: #EDF1FF; } .w18-f-bild.mint { background: #E6F9EF; }
.w18-f-bild.erd { background: #FFF0EC; } .w18-f-bild.pfl { background: var(--pfl); }
.w18-f-bild .w18-rahmen.klein { padding: 7px; border-radius: 22px; width: 76%; }
.w18-f-bild .w18-rahmen.klein img { border-radius: 16px; height: 180px; width: 100%; object-fit: cover; object-position: top left; }
.w18-info { width: 78%; height: auto; overflow: visible; }
.w18-f-3d { width: 52%; filter: drop-shadow(0 22px 24px rgba(120, 30, 40, .2)); animation: w18-schweben 7s ease-in-out infinite; }
.w18-mik.gross { width: 64px; height: 64px; font-size: 26px; margin-bottom: 10px; }
.w18-f-bild.pfl { gap: 0; align-content: center; }
.w18-welle.gross { height: 60px; gap: 6px; }
.w18-welle.gross i { width: 6px; background: #7DEBB0; }
.w18-f h3 { margin-top: 4px; }
.w18-f p { color: var(--text-2); font-size: 16px; max-width: 26em; }
.w18-f:hover .w18-f-bild { transform: translateY(-4px); }
.w18-f-bild { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.w18-mehr { margin-top: 40px; }

.w18-sprech-raster { display: grid; gap: 40px; align-items: center; }
.w18-sprech-bild .w18-rahmen img { max-height: 440px; }
.w18-sprech-text h2 { margin-top: 14px; }
.w18-sprech-text .w18-pille { margin-top: 16px; }
.w18-sprech-text > p { margin-top: 18px; color: var(--text-2); font-size: 18px; max-width: 32em; }
.w18-linie { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: s; }
.w18-linie li { counter-increment: s; position: relative; padding: 0 0 24px 56px; display: grid; gap: 2px; }
.w18-linie li::before { content: counter(s); position: absolute; left: 0; top: -6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #0F6B45; font-size: 17px; font-weight: 500; box-shadow: 0 0 0 1.5px #9DDBBC; }
.w18-linie li::after { content: ""; position: absolute; left: 19px; top: 38px; bottom: 0; width: 2px; background: #A9E3C6; }
.w18-linie li:last-child::after { display: none; }
.w18-linie b { font-weight: 500; font-size: 18px; }
.w18-linie span { color: var(--text-2); font-size: 16px; }
.w18-pille.klein { height: auto; padding: 6px 12px; font-size: 13px; background: #fff; border-color: transparent; color: #0F5A3A; }

.w18-spiel { max-width: 920px; }
.w18-sp-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-bottom: 22px; border-bottom: 1px solid var(--linie); }
.w18-sp-info { display: grid; gap: 2px; }
.w18-sp-info b { font-weight: 500; }
.w18-sp-stationen { display: flex; align-items: center; gap: 0; flex: 1; min-width: 160px; }
.w18-sp-stationen i { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #D8D5E6; flex-shrink: 0; }
.w18-sp-stationen i + i { margin-left: auto; }
.w18-sp-stationen i.an { box-shadow: inset 0 0 0 3px var(--uv5); background: var(--uvz5); }
.w18-sp-stationen i.ok { background: #22B573; box-shadow: none; } .w18-sp-stationen i.nein { background: var(--erd); box-shadow: none; }
.w18-sp-pille { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--linie); font-size: 15px; }
.w18-sp-pille svg { width: 16px; height: 16px; color: #E0566A; }
.w18-sp-pille b { font-weight: 500; font-size: 18px; }
.w18-sp-pille.uv { background: var(--uvz5); box-shadow: none; }
.w18-spiel h3 { margin-top: 28px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; max-width: 22em; }
.w18-sp-hinweis { margin-top: 8px; color: var(--text-2); font-size: 15px; }
.w18-sp-antw { margin-top: 22px; display: grid; gap: 12px; }
.w18-a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 0; border-radius: 18px; text-align: left; font: 400 17px/1.35 var(--schrift); color: var(--text); cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s; }
.w18-a:not(:disabled):hover { transform: translateY(-2px); }
.w18-a.c0 { background: #EEEAFF; } .w18-a.c1 { background: #DFF7EA; } .w18-a.c2 { background: #FFE7E1; } .w18-a.c3 { background: #E1E7FF; } .w18-a.c4 { background: #F1EFF8; }
.w18-a kbd { margin-left: auto; font: 500 13px var(--schrift); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.85); flex-shrink: 0; }
.w18-fo { width: 36px; height: 36px; border-radius: 50%; background: #fff; flex-shrink: 0; position: relative; }
.w18-fo::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 14px; height: 14px; }
.w18-fo.f0::after { border-radius: 50%; background: #4128C2; }
.w18-fo.f1::after { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid #0F6B45; }
.w18-fo.f2::after { border-radius: 3px; background: #C83A50; }
.w18-fo.f3::after { rotate: 45deg; background: #1A32B8; width: 12px; height: 12px; }
.w18-fo.f4::after { border-radius: 4px; background: #575270; width: 16px; height: 6px; }
.w18-a.richtig { background: #22B573; color: #0B2A1D; }
.w18-a.falsch { background: #FFBEB0; }
.w18-a.aus { opacity: .5; }
.w18-a:disabled { cursor: default; }
.w18-sp-fuss { margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.w18-sp-erg { font-size: 18px; }
.w18-sp-loes { margin-top: 14px; }
.w18-sp-loes summary { cursor: pointer; color: var(--text-2); font-size: 15px; }
.w18-sp-loes p { margin-top: 10px; max-width: 40em; color: var(--text-2); }
.w18-sp-loes b { color: var(--text); font-weight: 500; }

.w18-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.w18-wege li { display: grid; gap: 14px; align-content: start; }
.w18-wege .w18-gross-nr { color: #E0566A; }
.w18-wg { width: 170px; height: auto; }
.w18-wege h3 { font-size: 22px; }
.w18-wege p { color: var(--text-2); font-size: 16px; }

.w18-stand-kopf { display: grid; gap: 16px; align-items: end; margin-bottom: 28px; }
.w18-stand-kopf .w18-kopf { margin-bottom: 0; }
.w18-stand-zahl { font-size: clamp(64px, 8vw, 120px); font-weight: 300; letter-spacing: -.05em; line-height: .9; color: var(--uv5); }
.w18-stand-zahl small { font-size: 17px; letter-spacing: 0; color: var(--text-2); }
.w18-balken-gross { height: 14px; border-radius: 999px; background: #EEEAFF; overflow: hidden; }
.w18-balken-gross i { display: block; height: 100%; background: var(--uv5); border-radius: 999px; }
.w18-kapitel { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.w18-kapitel li { font-size: 14.5px; padding: 7px 14px; border-radius: 999px; border: 1px dashed #B7B2CC; color: var(--text-2); }
.w18-kapitel li.f { border: 1px solid transparent; background: var(--uvz5); color: #2E1C8F; }
.w18-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px dashed #8C87A6; margin: 0 6px 0 14px; vertical-align: middle; }
.w18-punkt.f { background: var(--uv5); border-color: transparent; margin-left: 0; }

.w18-zwei { display: grid; gap: 32px; }
.w18-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.w18-punkte li { padding-left: 26px; position: relative; color: var(--text-2); font-size: 17px; }
.w18-punkte li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--uv5); }
.w18-warte h2 { margin-top: 18px; color: #fff; }
.w18-warte .w18-zwei > div > p { margin-top: 16px; color: rgba(255, 255, 255, .85); font-size: 18px; max-width: 30em; }
.w18-form { display: grid; gap: 12px; align-content: start; }
.w18-form label { font-size: 15px; font-weight: 500; }
.w18-form input[type="email"] { height: 52px; border-radius: 999px; border: 0; padding: 0 20px; font: 400 16px var(--schrift); background: rgba(255, 255, 255, .92); }
.w18-form .w18-ok { display: flex; gap: 10px; font-weight: 400; font-size: 14px; color: rgba(255, 255, 255, .85); }
.w18-form .w18-ok input { margin-top: 3px; }
.w18-hinweis { font-size: 14px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed rgba(255, 255, 255, .6); color: #fff; }
.w18-hinweis b { font-weight: 500; }
.w18-form .kn.weiss:disabled { background: rgba(255, 255, 255, .7); color: #2E1C8F; }
.w18-preis-zeile { display: grid; gap: 24px; align-items: end; }
.w18-preis-zeile h2 { margin-top: 12px; font-size: clamp(28px, 3.6vw, 44px); }
.w18-preis-zeile p { margin-top: 10px; color: var(--text-2); }

.w18-fragen-raster { display: grid; gap: 8px; }
.w18-akk details { border-bottom: 1px solid var(--linie); }
.w18-akk summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-size: 20px; position: relative; }
.w18-akk summary::-webkit-details-marker { display: none; }
.w18-akk summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 28px; font-weight: 300; color: var(--text-2); transition: transform .3s; }
.w18-akk details[open] summary::after { transform: rotate(45deg); }
.w18-akk p { padding: 0 0 22px; color: var(--text-2); max-width: 36em; }

.w18-schluss .wrap { text-align: center; display: grid; justify-items: center; gap: 28px; }
.w18-schluss h2 { max-width: 12em; color: #fff; }
.w18-schluss .kn.dunkel { background: #fff; color: #17122E; }
.w18-organe { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 2vw, 28px); }
.w18-organe img { width: clamp(64px, 11vw, 150px); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .35)); animation: w18-schweben 7s ease-in-out infinite; }
.w18-organe img:nth-child(2n) { animation-name: w18-schweben2; animation-duration: 8s; }
.w18-organe img:nth-child(3) { animation-delay: -3s; }

@media (min-width: 760px) {
  .w18-zahlen dl { grid-template-columns: repeat(4, 1fr); }
  .w18-schritt { grid-template-columns: 1fr 1.25fr; gap: 56px; padding: 56px 0; }
  .w18-schritt:nth-child(even) .w18-st-text { order: 2; }
  .w18-fkt-raster { grid-template-columns: repeat(2, 1fr); }
  .w18-sprech-raster { grid-template-columns: 1.1fr 1fr; gap: 64px; }
  .w18-wege { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
  .w18-stand-kopf { grid-template-columns: 1fr auto; }
  .w18-zwei { grid-template-columns: 1fr 1.3fr; gap: 64px; }
  .w18-preis-zeile { grid-template-columns: 1fr auto; }
  .w18-fragen-raster { grid-template-columns: 1fr 1.6fr; gap: 48px; }
  .w18-coach-raster { grid-template-columns: 1fr 1fr; gap: 56px; }
  .w18-sp-antw { grid-template-columns: 1fr 1fr; }
  .w18-sp-antw .w18-a:last-child { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .w18-fkt-raster { grid-template-columns: repeat(3, 1fr); }
  .w18-wege { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 759px) {
  .w18-ch { font-size: 10px; }
  .w18-ch.o-r, .w18-ch.u-r { right: -2%; } .w18-ch.u-l, .w18-ch.o-l { left: -2%; }
  .w18-coach-bild { min-height: 440px; }
  .w18-zahlen dl > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .w18-herz, .w18-lunge, .w18-g, .w18-blase, .w18-organe img, .w18-ch, .w18-coach-herz, .w18-f-3d { animation: none; }
  .w18-a:not(:disabled):hover, .w18-f:hover .w18-f-bild { transform: none; }
}

.w18 [hidden] { display: none !important; }
.w18-pfadbild { overflow: hidden; }
.w18-pfadlinie { position: absolute; inset: 12% 6%; width: 88%; height: 76%; }
.w18-pfadbild .st { position: absolute; width: 26%; filter: drop-shadow(0 16px 18px rgba(30, 40, 120, .2)); animation: w18-schweben 7s ease-in-out infinite; }
.w18-pfadbild .s1 { left: 4%; bottom: 8%; } .w18-pfadbild .s2 { left: 38%; top: 4%; animation-name: w18-schweben2; } .w18-pfadbild .s3 { right: 4%; top: 18%; animation-delay: -3s; }
.w18-pfad-pille { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(23,18,46,.08), 0 8px 18px -10px rgba(23,18,46,.3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .w18-pfadbild .st { animation: none; } }

.w18-fkt-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.w18-fkt-kopf .w18-kopf { margin-bottom: 0; }
.w18-pfeile { display: flex; gap: 10px; flex-shrink: 0; }
.w18-pf { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--text); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.w18-pf:hover { background: var(--uvz5); }
.w18-pf svg { width: 20px; height: 20px; }
.w18-karussell { overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 24px 0 28px; scroll-padding-left: calc(max(0px, (100% - var(--breite) - 2 * var(--rand)) / 2) + var(--rand)); }
.w18-karussell::-webkit-scrollbar { display: none; }
.w18-karussell:focus-visible { outline-offset: -3px; }
.w18-k-spur { list-style: none; margin: 0; display: flex; gap: 24px; width: max-content;
  padding: 0 calc(max(0px, (100vw - var(--breite) - 2 * var(--rand)) / 2) + var(--rand)); }
.w18-slide { width: min(400px, 78vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.w18-slide h3 { margin-top: 4px; }
.w18-slide p { color: var(--text-2); font-size: 16px; }
.w18-s-bild { position: relative; height: 280px; border-radius: var(--r1); display: grid; place-items: center; margin-bottom: 16px; }
.w18-s-bild.uv { background: #F1EDFF; } .w18-s-bild.kob { background: #EDF1FF; } .w18-s-bild.mint { background: #E6F9EF; }
.w18-s-bild.erd { background: #FFF0EC; } .w18-s-bild.pfl { background: var(--pfl); }
.w18-s-bild .w18-ch { font-size: 13px; z-index: 3; }
.w18-s-bild .w18-ch.o-r { right: -10px; top: 18px; } .w18-s-bild .w18-ch.u-l { left: -10px; bottom: 20px; }
.w18-s-bild .w18-g { color: var(--text); }
.w18-s-haupt { position: relative; width: 74%; font-size: 13.5px; gap: 8px; z-index: 2; }
.w18-s-haupt.dunkel { background: rgba(37, 30, 70, .78); border-color: rgba(255,255,255,.18); color: #fff; box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); }
.w18-s-haupt.dunkel .w18-gl { color: #B9B0E8; }
.w18-s-haupt.dunkel .w18-balken i { background: rgba(255,255,255,.18); }
.w18-s-haupt.dunkel .w18-balken i.k { background: #7DEBB0; }
.w18-s-bild .w18-info { width: 72%; }
.w18-s-bild .w18-rahmen.klein { padding: 7px; border-radius: 22px; width: 80%; }
.w18-s-bild .w18-rahmen.klein img { border-radius: 16px; height: 190px; width: 100%; object-fit: cover; object-position: center; }
.w18-s-bild .w18-f-3d { width: 46%; }
.w18-s-bild.pfl { align-content: center; }
.w18-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.7); font-size: 13px; }
.w18-zeile i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: #EEEAFF; color: #4128C2; flex-shrink: 0; box-shadow: inset 0 0 0 1.5px #CFC3FF; }
.w18-zeile i svg { width: 13px; height: 13px; }
.w18-zeile small { margin-left: auto; color: var(--text-2); font-size: 11.5px; }
.w18-zeile.ok i { background: #22B573; color: #fff; box-shadow: none; }
.w18-zeile.an { background: #fff; box-shadow: 0 0 0 1.5px var(--uv5); }
.w18-zeile s { color: var(--text-2); }
.w18-fokus { grid-auto-flow: column; justify-content: start; align-items: center; gap: 16px; width: auto; padding: 18px 24px; }
.w18-fokus .w18-ring { width: 64px; height: 64px; }
.w18-uhr { font-size: 34px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.w18-punktreihe { display: flex; gap: 6px; }
.w18-punktreihe i { width: 10px; height: 10px; border-radius: 50%; background: #E3DEFF; }
.w18-punktreihe i.g { background: #22B573; } .w18-punktreihe i.h { background: var(--uv5); }
.w18-monat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.w18-monat i { aspect-ratio: 1; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #D8D5E6; }
.w18-monat i.g { background: #22B573; box-shadow: none; } .w18-monat i.h { box-shadow: inset 0 0 0 2px var(--uv5); }
.w18-gr { font-size: 34px; font-weight: 300; line-height: 1; }
.w18-nrk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #DFF7EA; color: #0F6B45; font-size: 12px; }
.w18-kt { font-size: 18px !important; font-weight: 400 !important; }
.w18-chips i.ok { background: #CFF5E2; color: #0F6B45; }

.w18-spiel.w18-karte { background: #fff; border-radius: 32px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 0 0 1px rgba(23, 18, 46, .06), 0 30px 60px -36px rgba(27, 18, 56, .35); }
.w18-karte .w18-sp-leiste { margin: calc(-1 * clamp(20px, 3vw, 36px)) calc(-1 * clamp(20px, 3vw, 36px)) 0; padding: 18px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--linie); border-radius: 32px 32px 0 0; background: #FBFAFE; }

@media (max-width: 759px) {
  .w18-fkt-kopf { display: block; }
  .w18-pfeile { margin-top: 20px; }
  .w18-s-bild { height: 240px; }
}

.w18-fokus-t { display: grid; gap: 2px; }
.w18-s-bild .w18-s-haupt .w18-kk.zwischen .w18-ring { order: 0; }
.w18-s-bild .w18-ch.o-r { top: 12px; }

.w18-mit-raster { display: grid; gap: 40px; align-items: center; }
.w18-mit-text h2 { margin-top: 14px; max-width: 13em; }
.w18-kern { background: none; color: inherit; padding: 0 .05em; box-shadow: inset 0 -.42em 0 #D7CDFF; }
.w18-mit-text > p { margin-top: 18px; color: var(--text-2); font-size: 18px; max-width: 32em; }
.w18-mit-punkte { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 18px; }
.w18-mit-punkte li { display: flex; gap: 14px; align-items: flex-start; }
.w18-mit-punkte .w18-ic { font-size: 19px; }
.w18-mit-punkte b { display: block; font-weight: 500; font-size: 18px; }
.w18-mit-punkte span span, .w18-mit-punkte li > span:last-child { color: var(--text-2); font-size: 16px; }
.w18-mit-punkte b { color: var(--text); }
.w18-pin { position: absolute; z-index: 3; left: 46%; top: 34%; width: 44px; height: 44px; border-radius: 50% 50% 50% 6px; background: var(--uv5); color: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(106, 77, 244, .18), 0 14px 24px -10px rgba(65, 40, 194, .6); animation: w18-schweben 5s ease-in-out infinite; }
.w18-pin svg { width: 20px; height: 20px; }
.w18-sende { justify-self: end; font-size: .82em; padding: .35em .9em; border-radius: 999px; background: #17122E; color: #fff; }
.w18-mit .w18-ch.o-r { width: 13em; }
@media (min-width: 760px) { .w18-mit-raster { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
@media (prefers-reduced-motion: reduce) { .w18-pin { animation: none; } }

.g-wort { width: 30cqw; }
.g-wort .w18-gt { font-size: .86em; line-height: 1.35; }
.w18-kernsatz { max-width: 15em; font-size: .92em; line-height: 1.45; }
.w18-kernsatz mark { background: none; color: var(--text); box-shadow: inset 0 -.55em 0 #D7CDFF; font-weight: 500; }
.w18-eingabe { font-size: .9em; color: #8C87A6; padding: .55em .7em; border-radius: .6em; background: #fff; box-shadow: inset 0 0 0 1px #E3E0EE; }
.w18-coach-bild .w18-ch.o-r { right: -9%; top: 6%; bottom: auto; }
.w18-coach-bild .w18-ch.u-l { left: -3%; bottom: 4%; }
.w18-abcd i { flex: 1; padding: 6px 0; }

.w18-quiz-buehne { position: relative; max-width: 1200px; display: grid; gap: 20px; align-items: center; }
.w18-q-fleck { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; }
.w18-q-fleck.f1 { width: 420px; height: 420px; left: -60px; top: -40px; background: #E4DDFF; }
.w18-q-fleck.f2 { width: 360px; height: 360px; left: 46%; bottom: -60px; background: #FFE0D8; }
.w18-quiz-buehne .w18-spiel { position: relative; z-index: 1; }
.w18-q-herz { position: absolute; z-index: 2; width: 120px; left: min(820px, 76%); top: -58px; filter: drop-shadow(0 18px 20px rgba(120, 30, 40, .25)); animation: w18-schweben 6s ease-in-out infinite; pointer-events: none; }
.w18-q-hinweis { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; color: var(--uv5); order: -1; }
.w18-q-text { font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -.02em; rotate: -3deg; color: #4128C2; }
.w18-q-hand { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #4128C2;
  box-shadow: 0 0 0 6px rgba(106, 77, 244, .14), 0 12px 24px -12px rgba(65, 40, 194, .5); animation: w18-tippen 1.8s ease-in-out infinite; flex-shrink: 0; }
.w18-q-hand svg { width: 28px; height: 28px; }
.w18-q-pfeil { width: 70px; height: auto; color: var(--uv5); rotate: 80deg; }
@keyframes w18-tippen { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(3px) scale(.92); } }

.w18-karte { overflow: visible; }
.w18-sp-stationen { position: relative; }
.w18-sp-stationen::before { content: ""; position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; translate: 0 -50%; background: #E3DEFF; z-index: 0; }
.w18-sp-stationen i { position: relative; z-index: 1; }
.w18-spiel h3 { font-size: clamp(26px, 3vw, 38px); }
.w18-a { min-height: 76px; padding: 14px 18px; border-radius: 22px; font-size: 18px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }
.w18-a:not(:disabled):hover { transform: translateY(-4px); box-shadow: 0 16px 26px -16px rgba(27, 18, 56, .35); }
.w18-fo { width: 44px; height: 44px; }
.w18-fo::after { width: 18px; height: 18px; }
.w18-fo.f1::after { border-left-width: 10px; border-right-width: 10px; border-bottom-width: 17px; }
.w18-a kbd { width: 32px; height: 32px; font-size: 14px; }
.w18-a.richtig { animation: w18-hupf .6s cubic-bezier(.2,.8,.2,1); }
.w18-a.falsch { animation: w18-wackel .45s ease; }
@keyframes w18-hupf { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes w18-wackel { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.w18-q-lob { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.w18-q-lob .w18-g { position: absolute; opacity: 0; scale: .6; transition: opacity .35s, scale .45s cubic-bezier(.2,1.4,.4,1); font-size: 16px; }
.w18-q-lob .lob1 { left: min(700px, 62%); top: 40px; }
.w18-q-lob .lob2 { left: min(560px, 50%); top: -8px; background: #22B573; color: #0B2A1D; border-color: transparent; }
.w18-q-lob .lob2 b { font-size: 20px; }
.geschafft .w18-q-lob .w18-g { opacity: 1; scale: 1; }
.geschafft .w18-q-lob .lob2 { transition-delay: .12s; }
.geschafft .w18-karte .w18-sp-leiste { background: #DFF7EA; }
.geschafft .w18-q-hinweis, .daneben .w18-q-hinweis { opacity: .35; }
.w18-sp-erg { font-size: 20px; font-weight: 500; }

@media (min-width: 1100px) {
  .w18-quiz-buehne { grid-template-columns: minmax(0, 860px) 1fr; gap: 40px; }
  .w18-quiz-buehne .w18-spiel { grid-column: 1; grid-row: 1; }
  .w18-q-hinweis { grid-column: 2; grid-row: 1; order: 0; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 120px; }
  .w18-q-pfeil { width: 130px; rotate: 0deg; margin-left: -30px; }
}
@media (max-width: 759px) {
  .w18-q-herz { width: 84px; right: 4px; left: auto; top: -40px; }
  .w18-q-lob .lob1 { left: auto; right: 8px; top: 50px; } .w18-q-lob .lob2 { left: 16px; top: -14px; }
  .w18-a { min-height: 64px; font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .w18-q-hand, .w18-q-herz, .w18-a.richtig, .w18-a.falsch { animation: none; }
}

.w18-kern { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.w18-kern.hell { box-shadow: inset 0 -.42em 0 rgba(255, 255, 255, .26); color: inherit; }
.w18-kern.erd { box-shadow: inset 0 -.42em 0 #FFC4B8; }
.w18-kern.dunkel { box-shadow: inset 0 -.42em 0 #5B3FE0; color: #fff; }

.w18-slide { width: clamp(290px, 34vw, 480px); }
.w18-s-bild { height: clamp(260px, 26vw, 360px); overflow: visible; }
.w18-rahmen.gross { width: 84%; height: 74%; padding: 8px; border-radius: 24px; }
.w18-rahmen.gross img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 17px; }
.w18-s-bild.pfl .w18-rahmen.gross { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .4), 0 40px 60px -30px rgba(0, 0, 0, .6); }
.w18-s-text { display: flex; gap: 16px; align-items: flex-end; }
.w18-s-nr { font-size: clamp(56px, 5vw, 76px); font-weight: 300; line-height: .82; letter-spacing: -.05em; color: var(--uv5); }
.w18-s-text h3 { margin-top: 4px; }
.w18-s-bild .w18-ch { font-size: 13px; }
.w18-s-bild .w18-ch .w18-kernsatz { font-size: 12.5px; }
.w18-k-spur { gap: 28px; }
@media (max-width: 759px) {
  .w18-slide { width: 80vw; }
  .w18-s-nr { font-size: 52px; }
}

.w18-wen .w18-kopf p { color: var(--text-2); }
.w18-wege > li { background: #fff; border-radius: 28px; padding: 26px 24px 28px; box-shadow: 0 30px 50px -40px rgba(120, 40, 50, .4); }
.w18-wen-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.w18-wen-kopf .w18-wg { width: 110px; }
.w18-wege h3 { margin-top: 18px; font-size: 21px; }
.w18-wen-sit { margin-top: 8px; color: var(--text-2); font-size: 15.5px; }
.w18-wen-lab { display: block; margin-top: 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: #C83A50; }
.w18-vorteile { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.w18-vorteile li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; }
.w18-vorteile i { width: 22px; height: 22px; border-radius: 50%; background: #FFE0D8; color: #C83A50; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.w18-vorteile svg { width: 13px; height: 13px; }
.w18-geraete { margin-top: 32px; display: flex; align-items: center; gap: 28px; padding: 24px 28px; border-radius: 28px; background: rgba(255,255,255,.6); }
.w18-ger-bild { width: 200px; flex-shrink: 0; }
.w18-geraete h3 { font-size: clamp(22px, 2.4vw, 30px); }
.w18-geraete p { margin-top: 8px; color: var(--text-2); }
@media (max-width: 759px) { .w18-geraete { flex-direction: column; align-items: flex-start; } .w18-ger-bild { width: 170px; } }
.w18-s-bild .w18-rahmen.gross { height: auto; }
.w18-s-bild .w18-rahmen.gross img { height: clamp(190px, 19vw, 262px); }

.w18-s-bild { overflow: hidden; }
.w18-mini-fleck { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(46px); opacity: .9; background: #D9CFFF; }
.w18-s-bild.kob .w18-mini-fleck { background: #C9D5FF; } .w18-s-bild.mint .w18-mini-fleck { background: #BDF0D5; }
.w18-s-bild.erd .w18-mini-fleck { background: #FFCFC5; } .w18-s-bild.pfl .w18-mini-fleck { background: #4B33C9; opacity: .6; }
.w18-mini { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; padding: 28px 34px 26px; border-radius: 28px; min-width: 56%;
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #fff, var(--tief); transform: var(--persp); text-align: center; }
.w18-mini b { font-size: 24px; font-weight: 400; letter-spacing: -.02em; }
.w18-mini-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--uvz5); color: #4128C2; }
.w18-mini-ic svg { width: 32px; height: 32px; }
.kob .w18-mini-ic { background: var(--kob-z); color: #1A32B8; } .mint .w18-mini-ic { background: #CFF5E2; color: #0F6B45; }
.erd .w18-mini-ic { background: var(--erd-z); color: #A8243A; } .pfl .w18-mini-ic { background: #17122E; color: #7DEBB0; }
.w18-mini-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; padding: 8px 16px; border-radius: 999px; background: #17122E; color: #fff; }
.w18-mini-neben { position: absolute; z-index: 2; font-size: 13px; padding: 8px 14px; border-radius: 14px; background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(23,18,46,.06), 0 14px 24px -14px rgba(27,18,56,.35); transform: var(--persp); animation: w18-schweben 6s ease-in-out infinite; }
.w18-mini-neben.o-r { right: 8%; top: 12%; } .w18-mini-neben.u-l { left: 8%; bottom: 12%; animation-name: w18-schweben2; }
.w18-mini-tage { display: flex; gap: 5px; }
.w18-mini-tage i { width: 16px; height: 16px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px #D8D5E6; }
.w18-mini-tage i.g { background: #22B573; box-shadow: none; } .w18-mini-tage i.h { box-shadow: inset 0 0 0 2px var(--uv5); }
.w18-mini-mark { font-size: 15px; color: var(--text-2); }
.w18-mini-mark mark { background: none; color: var(--text); box-shadow: inset 0 -.5em 0 #D7CDFF; }
.w18-mini .w18-welle { height: 26px; }
.w18-schalter { width: 30px; height: 18px; border-radius: 999px; background: #7DEBB0; position: relative; }
.w18-schalter i { position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.w18-s-bild.pfl .w18-mini { background: rgba(255, 255, 255, .1); border-color: rgba(255,255,255,.25); color: #fff; box-shadow: 0 40px 60px -30px rgba(0,0,0,.6); }
.w18-s-bild.pfl .w18-mini-pill { background: #fff; color: #17122E; }
@media (prefers-reduced-motion: reduce) { .w18-mini-neben { animation: none; } }

.w18-q-herz { width: clamp(260px, 30vw, 420px); left: auto; right: max(-40px, calc(100% - 900px)); top: -90px; z-index: 0; opacity: .95; }
.w18-quiz-buehne .w18-spiel.w18-karte { background: rgba(255, 255, 255, .78); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
.w18-quiz-buehne .w18-karte .w18-sp-leiste { background: rgba(251, 250, 254, .7); }
.w18-q-glas { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 22px; background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 #fff, var(--tief); transform: var(--persp); max-width: 300px; }
.w18-q-glas .w18-q-text { rotate: 0deg; font-size: 19px; line-height: 1.3; color: var(--text); display: grid; gap: 4px; }
.w18-q-glas .w18-q-text b { color: #4128C2; font-weight: 500; }
.w18-q-glas small { font-size: 13.5px; color: var(--text-2); }
.w18-q-hinweis { z-index: 3; }
.w18-coach-blase { position: absolute; width: 78%; left: 4%; top: 6%; mix-blend-mode: screen; opacity: .35; filter: invert(1) hue-rotate(180deg); animation: w18-schweben2 10s ease-in-out infinite; }
.w18-schluss-blase { width: clamp(140px, 16vw, 220px); mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg); opacity: .55; }
@media (min-width: 1100px) {
  .w18-q-herz { right: auto; left: 520px; top: -110px; }
  .w18-q-hinweis { margin-top: 160px; margin-left: -40px; }
}
@media (max-width: 759px) {
  .w18-q-herz { width: 200px; right: -30px; top: -70px; }
  .w18-q-glas { max-width: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .w18-coach-blase { animation: none; } }
.w18-schluss-blase, .w18-coach-blase { border-radius: 50%; clip-path: circle(46%); }

main > section.s-blasen { position: relative; overflow: hidden; background: #F4F1FF; }
.w18-wen-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.s-blasen > .wrap { position: relative; z-index: 1; }
.s-blasen .w18-kopf p { color: var(--text); }
.w18-wb-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.w18-wb { position: relative; padding: 28px 26px 26px; border-radius: 30px; background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 30px 60px -36px rgba(40, 20, 110, .45); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.w18-wb:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, 0 40px 70px -36px rgba(40, 20, 110, .55); }
.w18-wb-nr { position: absolute; right: 24px; top: 22px; font-size: 14px; color: var(--text-2); letter-spacing: .06em; }
.w18-wb-ic { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: var(--uv5);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -10px 18px rgba(0,0,0,.12), 0 18px 30px -14px rgba(65, 40, 194, .6); }
.w18-wb-ic svg { width: 38px; height: 38px; }
.w18-wb.mint .w18-wb-ic { background: #22B573; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -10px 18px rgba(0,0,0,.1), 0 18px 30px -14px rgba(20, 120, 80, .6); }
.w18-wb.kob .w18-wb-ic { background: #2B4EE6; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -10px 18px rgba(0,0,0,.12), 0 18px 30px -14px rgba(30, 50, 180, .6); }
.w18-wb.erd .w18-wb-ic { background: #E0566A; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -10px 18px rgba(0,0,0,.1), 0 18px 30px -14px rgba(180, 40, 60, .6); }
.w18-wb h3 { margin-top: 22px; font-size: 22px; font-weight: 400; }
.w18-wb > p { margin-top: 6px; color: var(--text-2); font-size: 16px; }
.w18-wb ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.w18-wb ul li { display: flex; align-items: center; gap: 8px; font-size: 15px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.75); width: fit-content; }
.w18-wb ul svg { width: 15px; height: 15px; color: #22B573; flex-shrink: 0; }
.s-blasen .w18-geraete { background: rgba(255, 255, 255, .5); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); border: 1px solid rgba(255,255,255,.9); }
.s-blasen .w18-fein { color: var(--text); }
@media (min-width: 700px) { .w18-wb-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .w18-wb-raster { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .w18-wb:hover { transform: none; } }

@media (min-width: 1100px) {
  .w18-q-herz { left: 730px; top: -50px; width: clamp(340px, 30vw, 430px); }
  .w18-q-hinweis { margin-top: 470px; margin-left: 20px; }
}
.s-blasen > img.w18-wen-bg { height: 100%; }

.s-blasen > img.w18-wen-bg { filter: saturate(.28) brightness(1.03); }
main > section.s-blasen { background: #F3F4F6; }

.s-stein { background-color: #EDEDEA; }
.w18-vision-raster { display: grid; gap: 44px; align-items: center; }
.w18-vision-bild { position: relative; margin: 0; }
.w18-vision-bild img { width: 100%; max-height: 640px; object-fit: cover; object-position: 50% 35%; border-radius: 32px; box-shadow: 0 50px 80px -50px rgba(23, 18, 46, .5); }
.w18-vision-name { position: absolute; left: -18px; bottom: 36px; font-size: 15px; transform: var(--persp); animation: w18-schweben 7s ease-in-out infinite; }
.w18-vision-name b { font-size: 18px; }
.w18-vision-text h2 { margin-top: 14px; max-width: 13em; }
.w18-vision-lead { margin-top: 18px; font-size: 19px; color: var(--text-2); max-width: 32em; }
.w18-vision-punkte { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.w18-vision-punkte li { display: flex; gap: 14px; align-items: flex-start; }
.w18-vision-punkte .w18-ic { font-size: 20px; }
.w18-vision-punkte b { display: block; font-weight: 500; font-size: 18px; color: var(--text); }
.w18-vision-punkte li > span:last-child { color: var(--text-2); font-size: 16px; }
.w18-vision-zitat { margin: 30px 0 0; padding: 0 0 0 20px; border-left: 3px solid var(--uv5); font-size: clamp(20px, 2vw, 26px); font-weight: 300; letter-spacing: -.015em; line-height: 1.35; color: var(--text); max-width: 26em; }
@media (min-width: 900px) { .w18-vision-raster { grid-template-columns: 1fr 1.15fr; gap: 72px; } }
@media (max-width: 759px) { .w18-vision-name { left: 12px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .w18-vision-name { animation: none; } }

@media (min-width: 1100px) {
  .w18-q-hinweis { flex-direction: row-reverse; align-items: center; gap: 4px; margin-left: -96px; margin-top: 430px; }
  .w18-q-pfeil { width: 110px; margin: 0; rotate: 0deg; transform: scaleY(-1) rotate(-8deg); flex-shrink: 0; }
}

.w18-mini.gross { min-width: 0; width: min(420px, 82%); padding: 34px 36px 30px; gap: 14px; }
.w18-mini.gross b { font-size: 26px; }
.w18-schritt.kob .w18-mini-ic { background: var(--kob-z); color: #1A32B8; } .w18-schritt.mint .w18-mini-ic { background: #CFF5E2; color: #0F6B45; }
.w18-schritt.erd .w18-mini-ic { background: var(--erd-z); color: #A8243A; }
.w18-mini-zeilen { display: grid; gap: 6px; width: 100%; }
.w18-mini-zeilen i { font-style: normal; text-align: left; font-size: 14px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.8); }
.w18-mini-zeilen i.ok { color: #0F6B45; background: #DFF7EA; } .w18-mini-zeilen i.an { box-shadow: 0 0 0 1.5px var(--uv5); background: #fff; }
.w18-mini .w18-bew { font-size: 14px; }
.w18-mini-tage.zehn i { width: 14px; height: 14px; }
.w18-mini-tage i.r { background: var(--erd); box-shadow: none; }
.w18-schritt .w18-ill .w18-ch.u-r { bottom: -2%; right: -6%; }

.w18-vision-bild { justify-self: center; width: min(460px, 86%); }
.w18-vision-bild img { aspect-ratio: 1; height: auto; max-height: none; border-radius: 50%; object-position: 54% 26%;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .7), 0 50px 80px -40px rgba(23, 18, 46, .45); }
.w18-vision-name { left: -6%; bottom: 8%; }
.w18-linkedin { margin-top: 28px; }
.w18-linkedin svg { width: 18px; height: 18px; color: #0A66C2; }
.w18-vision-text .w18-fein { margin-top: 22px; }

main > section.w18-vision { padding-top: 88px; padding-bottom: 88px; }
.w18-vision-raster { align-items: center; }
.w18-vision-links { display: grid; gap: 28px; justify-items: center; }
.w18-vision-bild { width: min(420px, 80%); }
.w18-vision-bild img { object-position: 52% 50%; }
.w18-vision-name { left: -8%; bottom: 10%; }
.w18-weg { width: min(460px, 100%); padding: 22px 24px; border-radius: 26px; background: rgba(255, 255, 255, .72); box-shadow: 0 30px 50px -40px rgba(23, 18, 46, .45); }
.w18-weg ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.w18-weg li { position: relative; padding: 0 0 16px 30px; display: grid; gap: 2px; font-size: 15px; }
.w18-weg li:last-child { padding-bottom: 0; }
.w18-weg li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #C9C3DD; }
.w18-weg li::after { content: ""; position: absolute; left: 6px; top: 22px; bottom: 2px; width: 2px; background: #DDD8EA; }
.w18-weg li:last-child::after { display: none; }
.w18-weg li.an::before { background: var(--uv5); box-shadow: 0 0 0 4px rgba(106, 77, 244, .18); }
.w18-weg b { font-weight: 500; }
.w18-weg span { color: var(--text-2); }
.w18-vision-text .w18-linkedin { margin-top: 30px; }
@media (min-width: 900px) { .w18-vision-raster { grid-template-columns: 1fr 1.1fr; gap: 64px; } }

main > section.s-blasen { background: #120D26; color: #fff; }
.s-blasen > img.w18-wen-bg { filter: invert(1) hue-rotate(180deg) saturate(.5) brightness(.75) contrast(1.15); opacity: .55; mix-blend-mode: screen; }
.s-blasen::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: transparent; box-shadow: inset 0 0 220px 40px rgba(18, 13, 38, .9); }
.s-blasen .lab { color: rgba(255, 255, 255, .8); }
.s-blasen h2 { color: #fff; }
.s-blasen .w18-kopf p { color: rgba(255, 255, 255, .85); }
.s-blasen .w18-kern.erd { box-shadow: inset 0 -.42em 0 rgba(247, 132, 139, .55); }
.s-blasen .w18-wb { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.s-blasen .w18-wb:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 40px 70px -30px rgba(0, 0, 0, .7); }
.s-blasen .w18-wb > p { color: #CFC9E6; }
.s-blasen .w18-wb-nr { color: rgba(255, 255, 255, .55); }
.s-blasen .w18-wb ul li { background: rgba(255, 255, 255, .1); color: #fff; }
.s-blasen .w18-wb ul svg { color: #7DEBB0; }
.s-blasen .w18-wb-ic { box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 18px 30px -12px rgba(0, 0, 0, .55); }
.s-blasen .w18-wb.uv .w18-wb-ic { background: #6A4DF4; color: #fff; }
.s-blasen .w18-wb.mint .w18-wb-ic { background: #7DEBB0; color: #0F6B45; }
.s-blasen .w18-wb.kob .w18-wb-ic { background: #2B4EE6; color: #fff; }
.s-blasen .w18-wb.erd .w18-wb-ic { background: #F7848B; color: #5A0F1E; }
.s-blasen .w18-geraete { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
.s-blasen .w18-geraete h3 { color: #fff; }
.s-blasen .w18-geraete p, .s-blasen .w18-fein { color: rgba(255, 255, 255, .78); }

.w18-vision-links { gap: 0; }
.w18-comm { position: relative; z-index: 3; width: min(440px, 100%); margin-top: -90px; padding: 22px 24px 24px; gap: 10px; font-size: 15px;
  background: rgba(255, 255, 255, .62); animation: w18-schweben2 8s ease-in-out infinite; }
.w18-comm b { font-size: 21px; font-weight: 400; letter-spacing: -.015em; line-height: 1.25; }
.w18-comm .w18-gt { font-size: 15px; line-height: 1.5; }
.w18-comm .kn { justify-self: start; margin-top: 6px; }
.w18-comm-kopf { display: flex; align-items: center; gap: 12px; }
.w18-comm-punkte { display: flex; }
.w18-comm-punkte i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; margin-right: -8px; }
.w18-comm-punkte svg { width: 16px; height: 16px; }
.w18-comm-punkte .a { background: #F7848B; color: #5A0F1E; } .w18-comm-punkte .b { background: #6A4DF4; color: #fff; } .w18-comm-punkte .c { background: #7DEBB0; color: #0F6B45; }
.w18-comm-kopf .w18-gl { margin-left: 8px; }
.w18-vision-name { bottom: 30%; }
@media (prefers-reduced-motion: reduce) { .w18-comm { animation: none; } }

.w18-comm { width: min(480px, 104%); padding: 26px 26px 24px; gap: 12px; }
.w18-comm > b { font-size: clamp(26px, 2.4vw, 32px); font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
.w18-comm > .w18-gt { font-size: 15.5px; }
.w18-comm-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.w18-comm-weg { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; text-decoration: none; color: var(--text);
  background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(23, 18, 46, .06); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.w18-comm-weg:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(23,18,46,.06), 0 16px 26px -16px rgba(23,18,46,.4); }
.w18-comm-weg i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.w18-comm-weg i svg { width: 20px; height: 20px; }
.w18-comm-weg.nl i { background: var(--uv5); color: #fff; }
.w18-comm-weg.li i { background: #0A66C2; color: #fff; }
.w18-comm-weg span { display: grid; gap: 1px; }
.w18-comm-weg b { font-size: 15px; font-weight: 500; }
.w18-comm-weg small { font-size: 12px; color: var(--text-2); line-height: 1.3; }
.w18-comm-weg em { position: absolute; right: 10px; top: 10px; color: var(--text-2); }
.w18-comm-weg em svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .w18-comm-wege { grid-template-columns: 1fr; } }

main > section.s-blasen { background: #3B26B8; }
.s-blasen::before { box-shadow: none; }
.s-blasen > img.w18-wen-bg { filter: saturate(1.1) brightness(1.05); opacity: .35; mix-blend-mode: soft-light; }
.w18-wen-fl { position: absolute; z-index: 0; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.w18-wen-fl.f1 { width: 520px; height: 520px; left: -120px; top: 30%; background: #7DEBB0; opacity: .55; }
.w18-wen-fl.f2 { width: 460px; height: 460px; right: -80px; top: -120px; background: #F7848B; opacity: .6; }
.w18-wen-fl.f3 { width: 420px; height: 420px; left: 42%; bottom: -160px; background: #6FA8FF; opacity: .55; }
.w18-wen-fl.f4 { width: 300px; height: 300px; left: 30%; top: 8%; background: #B9A6FF; opacity: .5; }
.s-blasen .w18-wb, .s-blasen .w18-geraete { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .42);
  backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -30px rgba(20, 8, 90, .55); }
.s-blasen .w18-wb:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 40px 70px -30px rgba(20, 8, 90, .65); }
.s-blasen .w18-wb > p, .s-blasen .w18-geraete p { color: rgba(255, 255, 255, .88); }
.s-blasen .w18-wb ul li { background: rgba(255, 255, 255, .2); }
.s-blasen .w18-wb ul svg { color: #A8F5CB; }
.s-blasen .w18-wb-nr { color: rgba(255, 255, 255, .75); }
.s-blasen .w18-wb.uv .w18-wb-ic { background: #fff; color: #6A4DF4; }
.s-blasen .w18-kern.erd { box-shadow: inset 0 -.42em 0 rgba(247, 132, 139, .75); }
.s-blasen .w18-fein { color: rgba(255, 255, 255, .85); }
.w18-wen-fl.f1 { opacity: .35; left: -200px; }

.w18-comm-wege { display: flex; flex-wrap: wrap; gap: 10px; grid-template-columns: none; }
.w18-comm-kn { height: 48px; padding: 0 20px; gap: 10px; font-size: 15px; }
.w18-comm-kn svg { width: 18px; height: 18px; }
.w18-comm-kn.li svg:first-child { color: #0A66C2; }
.w18-comm-kn.li svg:last-child { width: 14px; height: 14px; margin-left: -2px; }
.w18-comm-kn.rand { background: rgba(255, 255, 255, .7); }
.w18-comm > b { font-size: clamp(32px, 3vw, 42px); line-height: 1.05; letter-spacing: -.03em; font-weight: 300; }

.w18-comm { width: min(520px, 112%); }
.w18-comm-wege { flex-wrap: nowrap; }
.w18-comm-kn { height: 46px; padding: 0 16px; font-size: 14.5px; white-space: nowrap; }
@media (max-width: 520px) { .w18-comm-wege { flex-wrap: wrap; } }

.w18-comm { background: rgba(255, 255, 255, .28); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 30px rgba(255,255,255,.25), 0 40px 70px -40px rgba(23, 18, 46, .45); }
.w18-comm-kn.rand { background: rgba(255, 255, 255, .55); }
.w18-vision-links { position: relative; }
.w18-comm { margin-top: -130px; background: rgba(255, 255, 255, .18); }
.w18-comm-fl { position: absolute; z-index: 1; border-radius: 50%; filter: blur(50px); pointer-events: none; }
.w18-comm-fl.f1 { width: 260px; height: 260px; left: 2%; bottom: 4%; background: #B9A6FF; opacity: .75; }
.w18-comm-fl.f2 { width: 220px; height: 220px; right: 0; bottom: 18%; background: #9FE8C3; opacity: .7; }

.w18-vision-bild img { object-position: 50% 50%; }
.w18-comm { margin-top: -56px; }
.w18-vision-name { bottom: 34%; left: -10%; }
.w18-comm .w18-kern { box-shadow: inset 0 -.38em 0 #F7848B; }

.fuss.w18-fuss { position: relative; overflow: hidden; margin-top: 0; padding: 96px 0 40px; background: var(--pfl); color: #fff; border-top: 0; }
.w18-fuss > .wrap { position: relative; z-index: 1; display: block; }
.w18-fuss-fl { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.w18-fuss-fl.f1 { width: 520px; height: 520px; left: -140px; top: -160px; background: #6A4DF4; opacity: .55; }
.w18-fuss-fl.f2 { width: 420px; height: 420px; right: -100px; top: 20%; background: #F7848B; opacity: .35; }
.w18-fuss-fl.f3 { width: 380px; height: 380px; left: 40%; bottom: -180px; background: #7DEBB0; opacity: .25; }
.w18-fuss-oben { display: grid; gap: 28px; }
.w18-fuss-nl, .w18-fuss-comm { padding: clamp(26px, 3vw, 44px); border-radius: 36px; background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 40px 80px -40px rgba(0, 0, 0, .5); }
.w18-fuss h2 { margin-top: 18px; color: #fff; font-size: clamp(34px, 4vw, 56px); max-width: 12em; }
.w18-fuss-nl > p, .w18-fuss-comm > p { margin-top: 16px; color: rgba(255, 255, 255, .82); font-size: 18px; max-width: 30em; }
.w18-fuss-inhalt { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; gap: 14px; }
.w18-fuss-inhalt li { display: flex; gap: 14px; align-items: flex-start; }
.w18-fuss-inhalt i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.w18-fuss-inhalt i svg { width: 22px; height: 22px; }
.w18-fuss-inhalt i.erd { background: #F7848B; color: #5A0F1E; } .w18-fuss-inhalt i.mint { background: #7DEBB0; color: #0F6B45; }
.w18-fuss-inhalt i.uv { background: #6A4DF4; color: #fff; } .w18-fuss-inhalt i.kob { background: #2B4EE6; color: #fff; }
.w18-fuss-inhalt b { display: block; font-weight: 500; font-size: 17px; color: #fff; }
.w18-fuss-inhalt span { color: rgba(255, 255, 255, .78); font-size: 15.5px; }
.w18-fuss .kn.weiss { background: #fff; color: #17122E; }
.w18-fuss .kn svg { width: 20px; height: 20px; }
.w18-fuss-comm { display: flex; flex-direction: column; align-items: flex-start; }
.w18-fuss-comm h2 { font-size: clamp(34px, 4vw, 60px); }
.w18-fuss-li { margin-top: auto; background: #fff; color: #17122E; border-color: #fff; }
.w18-fuss-li svg { color: #0A66C2; }
.w18-fuss-comm > p { margin-bottom: 30px; }
.w18-fuss .w18-kern.dunkel { box-shadow: inset 0 -.38em 0 #6A4DF4; }
.w18-fuss-unten { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 20px; align-items: center; }
.w18-fuss-logo { display: block; width: 130px; aspect-ratio: 3 / 1; overflow: hidden; position: relative; border-radius: 10px; background: #fff; }
.w18-fuss-logo img { position: absolute; width: 126.67%; max-width: none; left: -12.67%; top: -54%; height: auto; }
.w18-fuss .nav-fuss a { color: rgba(255, 255, 255, .85); }
.w18-fuss .klein { color: rgba(255, 255, 255, .6); max-width: 60em; }
@media (min-width: 900px) {
  .w18-fuss-oben { grid-template-columns: 1.15fr 1fr; gap: 32px; }
  .w18-fuss-unten { grid-template-columns: auto 1fr; }
  .w18-fuss-unten .klein { grid-column: 1 / -1; }
  .w18-fuss .nav-fuss { justify-content: flex-end; }
}
.w18-fuss .kn.rand.w18-fuss-li { background: #fff; color: #17122E; border-color: #fff; }
.w18-fuss .kn.rand.w18-fuss-li:hover { background: #E9E4FF; }

main > section.s-blasen { background: #231B4A; }
.s-blasen > img.w18-wen-bg { filter: saturate(.4) brightness(.9); opacity: .14; mix-blend-mode: screen; }
.w18-wen-fl { filter: blur(110px); }
.w18-wen-fl.f1 { background: #6E8F86; opacity: .22; }
.w18-wen-fl.f2 { background: #9A6A80; opacity: .25; }
.w18-wen-fl.f3 { background: #5C6FA8; opacity: .3; }
.w18-wen-fl.f4 { background: #7B6CC4; opacity: .28; }
.s-blasen .w18-wb { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -36px rgba(0, 0, 0, .55); }
.s-blasen .w18-wb:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 40px 70px -36px rgba(0, 0, 0, .6); }
.s-blasen .w18-wb ul li { background: rgba(255, 255, 255, .08); }
.s-blasen .w18-wb > p { color: rgba(255, 255, 255, .75); }
.s-blasen .w18-wb-nr { color: rgba(255, 255, 255, .5); }
.s-blasen .w18-wb-ic { width: 64px; height: 64px; border-radius: 20px; box-shadow: none; }
.s-blasen .w18-wb-ic svg { width: 30px; height: 30px; }
.s-blasen .w18-wb.uv .w18-wb-ic { background: rgba(207, 195, 255, .16); color: #CFC3FF; }
.s-blasen .w18-wb.mint .w18-wb-ic { background: rgba(125, 235, 176, .14); color: #9FE8C3; }
.s-blasen .w18-wb.erd .w18-wb-ic { background: rgba(247, 132, 139, .15); color: #FFB3B8; }
.s-blasen .w18-wb.kob .w18-wb-ic { background: rgba(174, 190, 255, .15); color: #B8C6FF; }
.s-blasen .w18-wb ul svg { color: #9FE8C3; }
.s-blasen .w18-kern.erd { box-shadow: inset 0 -.38em 0 rgba(247, 132, 139, .45); }
.s-blasen .w18-fein { margin-top: 28px; color: rgba(255, 255, 255, .6); }

.w18-comm-fl.f1 { background: #C9C0E6; opacity: .55; }
.w18-comm-fl.f2 { background: #C3DCCF; opacity: .55; }
.w18-comm .w18-kern { box-shadow: inset 0 -.36em 0 #E8B7B5; }

.s-weiss { background-color: #fff; } .s-stein { background-color: #EDEDEA; } .s-mint { background-color: #DFF7EA; }
.s-weiss, .s-stein, .s-mint { background-size: 17px 17px; }

.fuss.w18-fuss2 { margin-top: 0; padding: 88px 0 36px; background: #E6EAF0; color: var(--text); border-top: 0; }
.w18-fuss2 > .wrap { display: block; }
.w18-f2-oben { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(23, 18, 46, .14); }
.w18-f2-nl { max-width: 620px; }
.w18-f2-nl h2 { font-size: clamp(34px, 4vw, 54px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.w18-f2-nl > p { margin-top: 14px; color: var(--text-2); font-size: 17px; max-width: 34em; }
.w18-f2-feld { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 460px; height: 56px; padding: 0 6px 0 22px;
  border-radius: 999px; background: #fff; text-decoration: none; color: #8C87A6; font-size: 16px; box-shadow: 0 0 0 1px rgba(23,18,46,.08); }
.w18-f2-feld b { font-weight: 500; color: #fff; background: #17122E; height: 44px; padding: 0 22px; border-radius: 999px; display: grid; place-items: center; }
.w18-f2-feld:hover b { background: #2A2542; }
.w18-f2-klein { margin-top: 12px !important; font-size: 13px !important; color: var(--text-2); }
.w18-f2-klein a { color: var(--text); }
.w18-f2-logo { display: block; flex-shrink: 0; width: 180px; aspect-ratio: 3 / 1; overflow: hidden; position: relative; border-radius: 12px; background: #fff; }
.w18-f2-logo img { position: absolute; width: 126.67%; max-width: none; left: -12.67%; top: -54%; height: auto; }
.w18-f2-spalten { display: grid; gap: 32px; padding: 40px 0; border-bottom: 1px solid rgba(23, 18, 46, .14); }
.w18-f2-spalten nav, .w18-f2-spalten > div { display: grid; gap: 10px; align-content: start; }
.w18-f2-kopf { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.w18-f2-spalten a:not(.w18-f2-li) { color: var(--text); text-decoration: none; font-size: 16px; }
.w18-f2-spalten a:not(.w18-f2-li):hover { text-decoration: underline; }
.w18-f2-text { font-size: 16px; color: var(--text); max-width: 22em; }
.w18-f2-li { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: #17122E; color: #fff; text-decoration: none; font-size: 15px; }
.w18-f2-li svg { width: 16px; height: 16px; }
.w18-f2-li:hover { background: #2A2542; }
.w18-f2-unten { padding-top: 24px; }
.w18-f2-unten .klein { font-size: 13.5px; color: var(--text-2); max-width: 64em; }
@media (min-width: 760px) { .w18-f2-spalten { grid-template-columns: 1fr 1fr 1.4fr; } }
@media (max-width: 759px) { .w18-f2-oben { flex-direction: column-reverse; } .w18-f2-logo { width: 140px; } }
.fuss.w18-fuss2 { background: #fff; }
.w18-f2-feld { background: #F3F5F8; box-shadow: none; }
.w18-f2-logo { border-radius: 0; }

.w18-slide { background: #fff; border-radius: 30px; padding: 10px 10px 26px; box-shadow: 0 0 0 1px rgba(23, 18, 46, .07), 0 24px 50px -34px rgba(27, 18, 56, .35);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.w18-slide:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(23,18,46,.08), 0 34px 60px -34px rgba(27, 18, 56, .45); }
.w18-slide .w18-s-bild { height: clamp(250px, 23vw, 300px); border-radius: 22px; margin-bottom: 20px; overflow: hidden; }
.w18-slide .w18-s-text, .w18-slide > p { padding: 0 16px; }
.w18-slide .w18-s-text { gap: 14px; }
.w18-slide .w18-s-nr { font-size: clamp(48px, 4vw, 60px); }
.w18-slide .w18-s-text h3 { font-size: 22px; }
.w18-slide > p { margin-top: 2px; }
.w18-s-bild.uv { background: #F1EEFC; } .w18-s-bild.kob { background: #EDF0FB; } .w18-s-bild.mint { background: #EAF6F0; }
.w18-s-bild.erd { background: #FBEFEC; } .w18-s-bild.pfl { background: #2A2350; }

.w18-ui { width: 82%; display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: #fff; color: var(--text); font-size: 13.5px;
  box-shadow: 0 0 0 1px rgba(23, 18, 46, .06), 0 1px 0 rgba(255,255,255,.8) inset, 0 22px 40px -24px rgba(27, 18, 56, .35); }
.w18-ui.dunkel { background: #17122E; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 22px 40px -20px rgba(0,0,0,.6); }
.u-kopf { display: flex; align-items: center; gap: 10px; }
.u-kopf b { font-weight: 500; font-size: 15px; }
.u-kopf .u-meta, .u-kopf .u-ring { margin-left: auto; }
.u-meta, .u-meta2 { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.w18-ui.dunkel .u-meta { color: #B9B0E8; }
.u-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #EEEAFF; color: #4128C2; flex-shrink: 0; }
.u-ic svg { width: 16px; height: 16px; }
.kob .u-ic { background: #E1E7FF; color: #1A32B8; } .mint .u-ic { background: #D9F4E6; color: #0F6B45; }
.erd .u-ic { background: #FDE3DF; color: #A8243A; } .pfl .u-ic { background: rgba(255,255,255,.1); color: #CFC3FF; }
.u-ring { position: relative; width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; }
.u-ring.gross { width: 76px; height: 76px; }
.u-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.u-ring circle { fill: none; stroke-width: 3.2; stroke-dasharray: 94.2; stroke-linecap: round; }
.u-ring .sp { stroke: #ECE9F5; stroke-dasharray: none; }
.u-ring.uv .la { stroke: #6A4DF4; } .u-ring.kob .la { stroke: #2B4EE6; } .u-ring.mint .la { stroke: #22B573; }
.u-ring b { font-size: 11px; font-weight: 500; }
.u-ring.gross b { font-size: 18px; font-weight: 400; }
.u-zeilen { display: grid; gap: 6px; }
.u-zeilen span { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: #F6F5FA; }
.w18-ui.dunkel .u-zeilen span { background: rgba(255,255,255,.07); }
.u-zeilen i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10.5px; background: #fff; box-shadow: inset 0 0 0 1.5px #D7D2EA; color: #4128C2; flex-shrink: 0; }
.u-zeilen i svg { width: 11px; height: 11px; }
.u-zeilen .ok i { background: #22B573; box-shadow: none; color: #fff; }
.u-zeilen .an { background: #fff; box-shadow: 0 0 0 1.5px #6A4DF4; }
.w18-ui.dunkel .u-zeilen .an { background: rgba(255,255,255,.12); box-shadow: 0 0 0 1.5px #9F8CFF; }
.u-zeilen em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--text-2); }
.w18-ui.dunkel .u-zeilen em { color: #B9B0E8; }
.u-zeilen s { color: var(--text-2); }
.u-kn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: #17122E; color: #fff; font-size: 12.5px; justify-self: start; }
.u-kn svg { width: 13px; height: 13px; }
.u-kn.hell { background: #F1EFF8; color: var(--text); }
.u-knoepfe { display: flex; gap: 8px; }
.u-split { display: flex; align-items: center; gap: 16px; }
.u-split.klein { justify-content: space-between; }
.u-stats { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.u-stats b { color: var(--text); font-weight: 500; font-size: 16px; margin-right: 4px; }
.u-chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 11px; border-radius: 999px; background: #F1EFF8; color: var(--text-2); }
.u-chip svg { width: 12px; height: 12px; }
.u-chip.mint { background: #DDF6E8; color: #0F6B45; } .u-chip.erd { background: #FDE3DF; color: #A8243A; }
.u-gross { font-size: 38px; font-weight: 300; letter-spacing: -.03em; line-height: 1; display: flex; align-items: baseline; gap: 6px; }
.u-gross small { font-size: 13px; color: var(--text-2); letter-spacing: 0; }
.u-punkte { display: flex; gap: 6px; margin-left: auto; }
.u-punkte i { width: 10px; height: 10px; border-radius: 50%; background: #E6E2F3; }
.u-punkte i.g { background: #22B573; } .u-punkte i.h { background: #6A4DF4; }
.u-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 10.5px; color: var(--text-2); }
.u-woche i { aspect-ratio: 1; border-radius: 8px; background: #F3F1F8; box-shadow: inset 0 0 0 1px #E3DFEE; }
.u-woche i.g { background: #22B573; box-shadow: none; } .u-woche i.h { box-shadow: inset 0 0 0 2px #6A4DF4; background: #fff; }
.u-text { display: grid; gap: 7px; }
.u-text i { display: block; height: 7px; border-radius: 999px; background: #ECEAF3; }
.u-text i.k { background: #D7CDFF; height: 9px; width: 92%; } .u-text i.k2 { background: #D7CDFF; height: 9px; width: 64%; } .u-text i.kurz { width: 58%; }
.u-pop { justify-self: end; display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #17122E; color: #fff; margin-top: -4px; }
.u-pop b { font-weight: 500; } .u-pop span { font-size: 11px; color: #CFC9E6; }
.u-mik { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #7DEBB0; color: #0B2A1D; flex-shrink: 0; }
.u-mik svg { width: 20px; height: 20px; }
.u-welle { display: flex; align-items: center; gap: 4px; height: 36px; }
.u-welle i { width: 4px; border-radius: 999px; background: #6A4DF4; height: 40%; }
.u-welle i:nth-child(3n) { height: 90%; } .u-welle i:nth-child(3n+1) { height: 60%; } .u-welle i:nth-child(4n) { height: 28%; }
.u-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.u-chips span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: #F1EFF8; color: var(--text-2); }
.u-chips span.ok { background: #DDF6E8; color: #0F6B45; } .u-chips svg { width: 11px; height: 11px; }
.u-frage { font-size: 17px; font-weight: 400; padding: 18px 14px; border-radius: 14px; background: #F6F5FA; text-align: center; }
.u-bew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.u-bew span { text-align: center; font-size: 11.5px; padding: 8px 0; border-radius: 10px; }
.u-bew .n, .u-bew .s { background: #FDE3DF; color: #8A1C2E; } .u-bew .g { background: #CFF2DE; color: #0F5A3A; box-shadow: inset 0 0 0 1.5px #22B573; } .u-bew .l { background: #EEEAFF; color: #4128C2; }
.u-stationen { display: flex; gap: 5px; }
.u-stationen i { flex: 1; height: 8px; border-radius: 999px; background: #ECEAF3; }
.u-stationen i.g { background: #22B573; } .u-stationen i.r { background: #F7848B; } .u-stationen i.h { background: #6A4DF4; }
.u-stationen.fein i { height: 6px; }
.u-antw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.u-antw span { height: 26px; border-radius: 9px; }
.u-antw .c0 { background: #EEEAFF; } .u-antw .c1 { background: #DFF7EA; } .u-antw .c2 { background: #FFE7E1; } .u-antw .c3 { background: #E1E7FF; }
.u-antw .richtig { background: #22B573; }
.u-linie { flex: 1; height: 60px; }
.u-schalter { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #CFC9E6; }
.u-schalter i { width: 32px; height: 18px; border-radius: 999px; background: #7DEBB0; position: relative; }
.u-schalter i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: reduce) { .w18-slide:hover { transform: none; } }

.w18-sp-antw { gap: 10px; }
.w18-a { min-height: 64px; padding: 12px 16px; border-radius: 16px; background: #F5F6FA; box-shadow: none; font-size: 17px; gap: 14px; }
.w18-a:not(:disabled):hover { transform: none; background: #ECEAF6; box-shadow: none; }
.w18-b8 { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #fff; color: #575270; font: 500 14px var(--schrift); box-shadow: inset 0 0 0 1px #E3E0EE; }
.w18-a.richtig { background: #A0DAB3; color: #0B2A1D; }
.w18-a.richtig .w18-b8 { background: #1B7A4E; color: #fff; box-shadow: none; }
.w18-a.falsch { background: #FFBE9F; }
.w18-a.falsch .w18-b8 { background: #fff; color: #A8243A; }
.w18-a.aus { opacity: .55; }
@media (max-width: 759px) { .w18-a { min-height: 56px; font-size: 16px; } }

.w18-q-fb { position: relative; z-index: 1; display: grid; gap: 12px; padding: 20px 22px; border-radius: 24px; max-width: 340px; transform: none; }
.w18-q-fb-kopf { display: flex; align-items: center; gap: 12px; }
.w18-q-fb-kopf b { font-size: 19px; font-weight: 500; }
.w18-q-fb > p { font-size: 15px; color: var(--text-2); }
.w18-q-fb-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.w18-q-fb-wahl button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #D8D5E6; font: 400 14.5px var(--schrift); color: var(--text); cursor: pointer; }
.w18-q-fb-wahl button svg { width: 16px; height: 16px; color: #4128C2; }
.w18-q-fb-wahl button:hover { box-shadow: inset 0 0 0 1px #17122E; }
.w18-q-fb-wahl button.an { background: #17122E; color: #fff; box-shadow: none; }
.w18-q-fb-wahl button.an svg { color: #fff; }
.w18-q-fb-danke { font-size: 14.5px; color: #1B7A4E; }
.w18-q-fb-danke:empty { display: none; }
@media (min-width: 1100px) {
  .w18-q-hinweis { align-self: start; }
  .w18-q-fb { grid-column: 2; grid-row: 1; align-self: start; margin-top: 8px; transform: var(--persp); }
}

.fuss.w18-fuss2 { background: #EFEEF4; }
.w18-f2-feld { background: #fff; box-shadow: 0 0 0 1px rgba(23, 18, 46, .06); }
.w18-f2-logo { border-radius: 14px; }
.w18-f2-nl .w18-f2-kopf { display: block; margin-bottom: 14px; }
.w18-f2-nl h2 { font-weight: 400; }
.w18-f2-nl h2 .w18-kern { box-shadow: inset 0 -.36em 0 #C9BCFF; }
.w18-f2-oben, .w18-f2-spalten { border-bottom-color: rgba(23, 18, 46, .1); }

.w18-tag .w18-schritt .w18-fleck-ill { background: #C8D2E1; opacity: 1; }

.w18-wen2 .w18-antwort { max-width: 34em; line-height: 1.35; }
.w18-wen2-fein { margin-top: 36px; font-size: 14px; color: rgba(255, 255, 255, .6); max-width: 60em; }

@media (min-width: 760px) and (max-width: 1099px) { .w18-zahlen dl { grid-template-columns: repeat(3, 1fr); } .w18-zahlen dl > div { border-left: 1px solid var(--linie); padding-left: 20px; } .w18-zahlen dl > div:nth-child(3n+1) { border-left: 0; padding-left: 0; } }
@media (min-width: 1100px) { .w18-zahlen dl { grid-template-columns: repeat(5, 1fr); } .w18-zahlen dl > div:nth-child(odd) { border-left: 1px solid var(--linie); padding-left: 20px; } .w18-zahlen dl > div:first-child { border-left: 0; padding-left: 0; } }
@media (max-width: 759px) { .w18-zahlen dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.w18-held .w18-pille { height: auto; min-height: 36px; padding: 8px 16px; line-height: 1.3; }
@media (max-width: 759px) { .w18-held .w18-pille { border-radius: 18px; font-size: 14px; } }

.w18-wen2-raster { display: grid; gap: 56px; align-items: center; }
.w18-gerz { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1.32; justify-self: center; transform: perspective(1400px) rotateY(-12deg) rotateX(4deg); }
.w18-laptop { position: absolute; left: 0; top: 0; width: 88%; }
.w18-laptop-schirm { border-radius: 14px 14px 4px 4px; padding: 2.2%; background: #2A2342; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 50px 80px -30px rgba(0, 0, 0, .65); }
.w18-laptop-schirm img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top; border-radius: 5px; }
.w18-laptop-fuss { height: 14px; margin: 0 -7%; border-radius: 2px 2px 14px 14px; background: #3A3256; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 24px 30px -18px rgba(0, 0, 0, .7); position: relative; }
.w18-laptop-fuss::after { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 5px; translate: -50% 0; border-radius: 0 0 6px 6px; background: #2A2342; }
.w18-handy2 { position: absolute; right: 0; bottom: 0; width: 30%; padding: 1.6%; border-radius: 22px; background: #2A2342; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 40px 60px -24px rgba(0, 0, 0, .75); }
.w18-handy2-schirm { border-radius: 17px; overflow: hidden; aspect-ratio: 600 / 1300; }
.w18-handy2-schirm img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 1100px) {
  .w18-wen2-raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; }
  .w18-wen2 .w18-drei li { font-size: clamp(34px, 3.2vw, 50px); }
}
@media (max-width: 759px) { .w18-gerz { transform: none; } .w18-handy2 { border-radius: 16px; } .w18-handy2-schirm { border-radius: 12px; } }

.w18-fb2 { position: relative; aspect-ratio: 1.08; width: 100%; max-width: 600px; justify-self: center; container-type: inline-size; }
.w18-fb2 .w18-fleck-ill { inset: 18% 12%; }
.w18-fb2-kopf { position: absolute; z-index: 2; left: 0; right: 4%; top: 4%; display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw 2.8cqw; border-radius: 4.4cqw; background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 18, 46, .08), 0 40px 60px -30px rgba(27, 18, 56, .35); transform: var(--persp); font-size: max(11px, 2.6cqw); }
.w18-fb2-logo { width: 17cqw; aspect-ratio: 3 / 1; overflow: hidden; position: relative; margin-right: auto; flex-shrink: 0; }
.w18-fb2-logo img { position: absolute; width: 126.67%; max-width: none; height: auto; left: -12.67%; top: -54%; }
.w18-fb2-p { display: inline-flex; align-items: center; gap: .5em; height: 2.6em; padding: 0 1em; border-radius: 999px; box-shadow: inset 0 0 0 1px #D8D5E6; white-space: nowrap; color: var(--text); }
.w18-fb2-p svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.w18-fb2-p.rund { width: 2.6em; padding: 0; justify-content: center; }
.w18-fb2-knopf { background: #17122E; color: #fff; box-shadow: 0 0 0 .45em rgba(106, 77, 244, .22); animation: w18-fb2-puls 2.4s ease-in-out infinite; }
@keyframes w18-fb2-puls { 0%, 100% { box-shadow: 0 0 0 .3em rgba(106, 77, 244, .25); } 50% { box-shadow: 0 0 0 .75em rgba(106, 77, 244, .08); } }
.w18-fb2-pfeil { position: absolute; z-index: 3; left: 65%; top: 16%; width: 13cqw; color: var(--uv5); }
.w18-fb2-box { position: absolute; z-index: 4; right: 0; top: 38%; width: 60%; font-size: max(12px, 2.6cqw); gap: .6em; }
.w18-fb2-box .w18-kk b { font-size: 1.12em; }
.w18-fb2-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.w18-fb2-chips i { font-style: normal; font-size: .86em; padding: .3em .8em; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px #D8D5E6; }
.w18-fb2-chips i.an { background: #17122E; color: #fff; box-shadow: none; }
.w18-fb2-box .w18-eingabe { min-height: 3.6em; }
.w18-fb2-ok { position: absolute; z-index: 5; left: 2%; bottom: 4%; font-size: max(11px, 2.4cqw); }
@media (prefers-reduced-motion: reduce) { .w18-fb2-knopf { animation: none; } }
@media (max-width: 759px) { .w18-fb2 { aspect-ratio: .95; } .w18-fb2-box { width: 74%; top: 34%; } .w18-fb2-p:not(.w18-fb2-knopf):not(.rund) { display: none; } }

.w18-slide .w18-s-bild { height: clamp(200px, 17vw, 236px); margin-bottom: 16px; }
.w18-slide .w18-s-nr { font-size: clamp(64px, 5.6vw, 86px); line-height: .9; }
.w18-slide .w18-s-text { gap: 16px; align-items: flex-end; }
.w18-slide .w18-s-text h3 { font-size: clamp(24px, 2vw, 29px); line-height: 1.12; letter-spacing: -.02em; }
.w18-slide .w18-s-text .lab { font-size: 11.5px; }
.w18-slide > p { margin-top: 10px; font-size: 15.5px; }
.w18-slide { padding-bottom: 22px; }
.w18-slide .w18-ui { gap: 10px; padding: 14px; font-size: 12.5px; width: 78%; }
.w18-slide .w18-ui .u-zeile, .w18-slide .w18-ui li { min-height: 0; }
.w18-slide .w18-ui .u-kn { display: none; }

.w18-q-cta { margin-top: 32px; max-width: 860px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 24px 28px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 18, 46, .07); }
.w18-q-cta p { flex: 1 1 320px; color: var(--text-2); font-size: 16.5px; }
.w18-q-cta p b { color: var(--text); font-weight: 500; }
.w18-q-cta-kn { display: grid; justify-items: center; gap: 6px; }
.w18-schluss-klein { margin-top: 12px; color: rgba(255, 255, 255, .7); }
.kopf-kurz { display: none; }
@media (max-width: 559px) { .kopf-lang { display: none; } .kopf-kurz { display: inline; } }

.w18-fb3 { position: relative; width: 100%; max-width: 600px; aspect-ratio: 600 / 480; justify-self: center; container-type: inline-size; }
.w18-fb3 .w18-fleck-ill { inset: 22% 18%; }
.w18-fb3-pfeile { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; color: var(--uv5); }
.w18-fb3-leiste { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 2.2cqw; padding: 2cqw 2.2cqw 2cqw 3cqw; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 18, 46, .08), 0 30px 50px -26px rgba(27, 18, 56, .4); font-size: max(12px, 2.8cqw); }
.w18-fb3-leiste .w18-fb2-logo { width: 15cqw; margin-right: 1cqw; }
.w18-fb3-s { position: absolute; z-index: 4; display: flex; align-items: center; gap: .6em; padding: .7em 1em .7em .7em; border-radius: 999px; white-space: nowrap; font-size: max(11px, 2.45cqw); transform: none; }
.w18-fb3-s .w18-ic { font-size: .9em; }
.w18-fb3-s.s1 { left: 6%; top: 11%; }
.w18-fb3-s.s2 { right: 2%; top: 15%; }
.w18-fb3-s.s3 { left: 0; top: 73%; }
.w18-fb3-s.s4 { right: 0; top: 74.5%; }
.w18-fb3-s.s5 { left: 0; right: 0; margin: 0 auto; width: max-content; top: 84%; border-radius: 1.1em; padding: .8em 1.2em .8em .8em; }
.w18-fb3-s.s5 > span { display: grid; gap: .15em; }
.w18-fb3-s.s5 small { font-size: .86em; color: var(--text-2); }
.w18-fb3-s.s3 { animation-delay: -1.5s; } .w18-fb3-s.s2 { animation-delay: -3s; } .w18-fb3-s.s4 { animation-delay: -4.5s; }
@media (max-width: 759px) {
  .w18-fb3 { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 0; }
  .w18-fb3-pfeile { display: none; }
  .w18-fb3-leiste { position: relative; left: auto; top: auto; translate: none; order: -1; margin: 0 auto 14px; flex-basis: auto; font-size: 13px; padding: 8px 8px 8px 14px; gap: 8px; }
  .w18-fb3-leiste .w18-fb2-logo { width: 72px; }
  .w18-fb3-break { flex-basis: 100%; height: 0; }
  .w18-fb3-s, .w18-fb3-s.s5 { position: relative; left: auto; right: auto; top: auto; margin: 0; font-size: 13px; animation: none; }
}
.w18-fb3-break { display: none; } @media (max-width: 759px) { .w18-fb3-break { display: block; } }

.w18-f2-logo { background: transparent; border-radius: 0; }
.w18-comm { position: relative; }
.w18-comm-marke { position: absolute; top: 22px; right: 22px; width: 48px; height: auto; }
@media (max-width: 759px) { .w18-comm-marke { width: 38px; top: 16px; right: 16px; } }

.w18-fb4 { position: relative; width: 100%; max-width: 600px; aspect-ratio: 600 / 520; justify-self: center; container-type: inline-size; }
.w18-fb4 .w18-fleck-ill { inset: 20% 14%; }
.w18-fb4-pfeile { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; color: var(--uv5); }
.w18-fb4-leiste { position: absolute; z-index: 3; left: 0; right: 0; top: 37.7%; height: 10.8%; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 18, 46, .08), 0 30px 50px -26px rgba(27, 18, 56, .4); font-size: max(10px, 2.2cqw); color: var(--text); }
.w18-fb4-leiste > * { position: absolute; top: 50%; translate: 0 -50%; }
.w18-fb4-leiste .w18-fb2-logo { left: 3%; width: 14cqw; }
.w18-fb4-orte { left: 20%; width: 37%; display: flex; justify-content: space-between; padding: .45em .6em; border-radius: 999px; background: #F1F0F6; }
.w18-fb4-orte span { display: inline-flex; align-items: center; gap: .35em; color: var(--text-2); }
.w18-fb4-orte svg, .w18-fb4-fb svg, .w18-fb4-rund svg { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.w18-fb4-fb { left: 59.5%; width: 17.5%; display: inline-flex; align-items: center; justify-content: center; gap: .45em; height: 2.6em; border-radius: 999px; background: #17122E; color: #fff;
  box-shadow: 0 0 0 .4em rgba(106, 77, 244, .22); animation: w18-fb2-puls 2.4s ease-in-out infinite; }
.w18-fb4-rund, .w18-fb4-profil { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; }
.w18-fb4-rund { left: 80%; box-shadow: inset 0 0 0 1px #D8D5E6; }
.w18-fb4-profil { left: 88.5%; background: #7DEBB0; color: #0B2A1D; box-shadow: inset 0 0 0 2px #E05A6B; }
.w18-fb4-tipp { position: absolute; z-index: 4; left: 68.3%; top: 27.5%; translate: -50% 0; padding: .45em .9em; border-radius: 10px; background: #17122E; color: #fff; font-size: max(11px, 2.2cqw); white-space: nowrap; }
.w18-fb4-tipp::after { content: ""; position: absolute; left: 50%; bottom: -5px; translate: -50% 0; border: 6px solid transparent; border-bottom: 0; border-top-color: #17122E; }
.w18-fb4-s { position: absolute; z-index: 4; display: flex; align-items: center; gap: .6em; padding: .65em 1em .65em .65em; border-radius: 999px; white-space: nowrap; font-size: max(11px, 2.4cqw); transform: none; }
.w18-fb4-s.s1 { left: 1%; top: 5%; }
.w18-fb4-s.s2 { left: 6%; top: 15.5%; animation-delay: -3s; }
.w18-fb4-form { position: absolute; z-index: 4; left: 0; top: 57.7%; width: 55%; font-size: max(11px, 2.3cqw); gap: .6em; transform: none; animation-delay: -1.5s; }
.w18-fb4-form .w18-eingabe { min-height: 2.8em; }
.w18-fb4-ok { position: absolute; z-index: 4; left: 63%; top: 68%; display: flex; align-items: center; gap: .7em; padding: .8em 1.1em .8em .8em; font-size: max(11px, 2.3cqw); transform: none; animation-delay: -4.5s; }
.w18-fb4-ok > span { display: grid; gap: .15em; }
.w18-fb4-ok small { font-size: .86em; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .w18-fb4-fb { animation: none; } }
@media (max-width: 759px) {
  .w18-fb4 { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 0; }
  .w18-fb4-pfeile, .w18-fb4-orte, .w18-fb4-profil { display: none; }
  .w18-fb4-tipp { position: relative; left: auto; top: auto; translate: none; order: -2; margin-bottom: 4px; font-size: 12px; }
  .w18-fb4-leiste { position: relative; top: auto; height: 52px; order: -1; width: 100%; margin-bottom: 14px; font-size: 13px; }
  .w18-fb4-leiste .w18-fb2-logo { width: 76px; left: 16px; }
  .w18-fb4-fb { left: auto; right: 64px; width: auto; padding: 0 1em; }
  .w18-fb4-rund { left: auto; right: 12px; }
  .w18-fb4-s, .w18-fb4-form, .w18-fb4-ok { position: relative; left: auto; top: auto; width: auto; font-size: 13px; animation: none; }
  .w18-fb4-form { width: 100%; }
}
@media (min-width: 760px) {
  .w18-fb4-tipp { left: 65%; translate: none; }
  .w18-fb4-tipp::after { left: 22px; translate: none; }
  .w18-fb4-ok { left: auto; right: 0; white-space: nowrap; }
}

.kopf { background: #fff; border-bottom: 1px solid rgba(23, 18, 46, .08); }
@supports (animation-timeline: scroll()) {
  .kopf { animation: kopf-glas linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
}

.w18-karussell { padding-bottom: 72px; margin-bottom: -44px; }
.w18-slide { padding: 8px 8px 22px; box-shadow: 0 0 0 1px rgba(23, 18, 46, .06), 0 18px 36px -26px rgba(27, 18, 56, .28); }
.w18-slide:hover { box-shadow: 0 0 0 1px rgba(23, 18, 46, .08), 0 24px 44px -26px rgba(27, 18, 56, .34); }
.w18-slide .w18-s-bild { height: auto; min-height: 0; padding: 18px; margin-bottom: 14px; display: block; border-radius: 22px; }
.w18-slide .w18-ui, .w18-slide .w18-ui.dunkel { width: 100%; padding: 0; background: transparent; box-shadow: none; gap: 10px; }
.w18-slide .w18-s-bild.pfl .w18-ui { color: #fff; }
.w18-slide .u-kopf { height: auto; padding: 0 0 10px; background: transparent; border-bottom: 1px solid rgba(23, 18, 46, .08); }
.w18-slide .w18-s-bild.pfl .u-kopf { border-bottom-color: rgba(255, 255, 255, .14); color: #fff; }
.w18-slide .w18-s-bild.pfl .u-meta { color: rgba(255, 255, 255, .7); }

.w18-q-cta { background: #6A4DF4; color: #fff; box-shadow: 0 30px 60px -34px rgba(65, 40, 194, .7); padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px); border-radius: 30px; gap: 20px 24px; flex-wrap: nowrap; }
.w18-q-cta-text { flex: 1 1 auto; display: grid; gap: 10px; }
.w18-q-cta-text h3 { color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.w18-q-cta-text p { color: rgba(255, 255, 255, .86); font-size: 16.5px; max-width: 34em; }
.w18-q-cta-pfeil { flex: 0 0 auto; width: 96px; color: #fff; opacity: .9; margin-top: -26px; }
.w18-q-cta .kn.weiss { background: #fff; color: #17122E; }
.w18-q-cta .kn.weiss:hover { background: #F1EEFC; }
@media (max-width: 759px) { .w18-q-cta { flex-wrap: wrap; } .w18-q-cta-pfeil { display: none; } .w18-q-cta-kn { justify-items: start; } }
.logo { background: transparent; }

.w18-lunge { width: 28cqw; bottom: 9cqw; right: 0; }

@media (min-width: 760px) { .w18-fb4-s.s1 { left: 4%; top: 9%; } .w18-fb4-s.s2 { left: 9%; top: 19%; } }

.w18-comm-marke { width: clamp(56px, 5.4vw, 78px); top: 7%; right: 6%; }
@media (max-width: 759px) { .w18-comm-marke { width: 48px; top: 14px; right: 16px; } }
.w18-schluss h2 { max-width: 17em; }
@media (min-width: 1100px) { .w18-wen2 .w18-drei li { font-size: clamp(36px, 3.4vw, 54px); } }
@media (min-width: 1100px) { .w18-wen2-raster { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; } }

@media (min-width: 760px) {
  .w18-fb4-s.s1 { left: 14%; top: 9%; }
  .w18-fb4-s.s2 { left: 22%; top: 22.5%; }
  .w18-fb4-form { top: 55%; }
  .w18-fb4-ok { top: 59%; }
}
.w18-wen2 .w18-antwort { font-size: clamp(18px, 1.6vw, 21px); font-weight: 400; letter-spacing: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.w18-comm > b { padding-right: 84px; }
.w18-comm-marke { width: 68px; top: 22px; right: 24px; }
@media (max-width: 759px) { .w18-comm > b { padding-right: 62px; } .w18-comm-marke { width: 48px; top: 16px; right: 16px; } }

@supports (animation-timeline: scroll()) {
  @keyframes kopf-glas {
    from { background: rgba(255, 255, 255, 1); border-bottom-color: rgba(23, 18, 46, .08); box-shadow: 0 12px 30px -22px rgba(27, 18, 56, 0); -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); }
    to { background: rgba(255, 255, 255, .7); border-bottom-color: rgba(23, 18, 46, .08); box-shadow: 0 12px 30px -22px rgba(27, 18, 56, .35); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
  }
}

.nav a { white-space: nowrap; }
.kopf .kn { white-space: nowrap; }
@media (max-width: 1099px) { .kopf .nav { display: none; } }

html, body { overflow-x: clip; }

.w18-slide { padding: 26px 24px 22px; gap: 0; border-radius: 28px; box-shadow: 0 18px 36px -28px rgba(27, 18, 56, .3); background: #F1EEFC; }
.w18-slide:has(.w18-s-bild.kob) { background: #EAEEFC; }
.w18-slide:has(.w18-s-bild.mint) { background: #E3F5EC; }
.w18-slide:has(.w18-s-bild.erd) { background: #FCEDEA; }
.w18-slide:has(.w18-s-bild.pfl) { background: #231B4A; color: #fff; }
.w18-slide .w18-s-text { order: 1; padding: 0; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 14px; }
.w18-slide .w18-s-nr { font-size: clamp(64px, 5.2vw, 84px); line-height: .8; }
.w18-slide .w18-s-text h3 { font-size: clamp(23px, 1.9vw, 28px); line-height: 1.1; }
.w18-slide > p { order: 2; padding: 0; margin-top: 14px; font-size: 15.5px; }
.w18-slide .w18-s-bild { order: 3; margin: 20px 0 0; padding: 0; height: auto; background: transparent; border-radius: 0; overflow: visible; }
.w18-slide .w18-ui, .w18-slide .w18-ui.dunkel { zoom: .78; width: 100%; padding: 16px 18px; border-radius: 22px; background: #fff; color: var(--text);
  box-shadow: 0 0 0 1px rgba(23, 18, 46, .05), 0 14px 26px -18px rgba(27, 18, 56, .35); }
.w18-slide:has(.w18-s-bild.pfl) .w18-ui { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.w18-slide:has(.w18-s-bild.pfl) .w18-s-nr { color: #B9A8FF; }
.w18-slide:has(.w18-s-bild.pfl) h3 { color: #fff; }
.w18-slide:has(.w18-s-bild.pfl) > p, .w18-slide:has(.w18-s-bild.pfl) .lab { color: rgba(255, 255, 255, .75); }
.w18-slide .u-kopf { border-bottom-color: rgba(23, 18, 46, .08); }
.w18-slide > p { margin-bottom: 20px; } .w18-slide .w18-s-bild { margin-top: auto; }
@media (min-width: 760px) { .w18-slide { width: clamp(280px, 28vw, 400px); } }

.w18-vision-punkte .w18-ic, .w18-vision-punkte .w18-ic.uv, .w18-vision-punkte .w18-ic.mint, .w18-vision-punkte .w18-ic.erd {
  background: #fff; color: #4A4560; box-shadow: inset 0 0 0 1px rgba(23, 18, 46, .09), 0 1px 2px rgba(23, 18, 46, .06); }

.w18-testpreis { display: inline-flex; margin-top: 16px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--erd-z); color: #8A2333; }
.w18-pr h1 { margin-top: 14px; font-size: clamp(38px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -.035em; font-weight: 300; }
.w18-pr-raster { display: grid; gap: 16px; }
.w18-pr-karte { display: flex; flex-direction: column; gap: 12px; padding: var(--pk); border-radius: var(--r1); background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 18, 46, .06), 0 18px 34px -26px rgba(27, 18, 56, .35); }
.w18-pr-karte.probe { background: var(--mnt-z); box-shadow: none; }
.w18-pr-karte h2 { font-size: clamp(26px, 2.4vw, 32px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.w18-pr-betrag { font-size: clamp(40px, 4vw, 52px); font-weight: 300; letter-spacing: -.03em; line-height: 1; margin: 6px 0 2px; white-space: nowrap; }
.w18-pr-betrag small { display: block; margin-top: 10px; font-size: 15px; letter-spacing: 0; color: var(--text-2); white-space: normal; }
.w18-pr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--text-2); font-size: 15.5px; }
.w18-pr-liste li { padding-left: 22px; position: relative; }
.w18-pr-liste li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px; border: solid #1B7A4E; border-width: 0 0 2px 2px; rotate: -45deg; }
.w18-pr-karte .kn { margin-top: auto; align-self: flex-start; }
.w18-pr-fein { margin-top: 24px; font-size: 15px; color: var(--text-2); max-width: 46em; }
.w18-pr-drin-raster { display: grid; gap: 32px; align-items: start; }
.w18-pr-drin h2 { margin-top: 14px; font-size: clamp(30px, 4vw, 48px); }
.w18-pr-haken { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; font-size: 17px; }
.w18-pr-haken li { padding-left: 30px; position: relative; }
.w18-pr-haken li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 11px; height: 6px; border: solid #1B7A4E; border-width: 0 0 2px 2px; rotate: -45deg; }
.w18-pr-coach { padding: var(--pk); border-radius: var(--r1); background: var(--uv5); color: #fff; display: grid; gap: 14px; }
.w18-pr-coach .lab { color: rgba(255, 255, 255, .86); }
.w18-pr-coach h3 { font-size: clamp(26px, 2.4vw, 32px); }
.w18-pr-coach p { color: rgba(255, 255, 255, .9); }
.w18-pr-coach-tab { margin: 4px 0 0; display: grid; gap: 0; }
.w18-pr-coach-tab div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.w18-pr-coach-tab dt { color: rgba(255, 255, 255, .86); }
.w18-pr-coach-tab dd { margin: 0; font-size: 20px; font-weight: 400; white-space: nowrap; }
.w18-pr-coach .w18-pr-coach-fein { font-size: 14.5px; color: rgba(255, 255, 255, .8); }
.w18-pr-mini { margin-top: 32px; display: grid; gap: 12px; }
.w18-pr-mini a { display: grid; gap: 6px; padding: 20px 24px; border-radius: var(--r2); background: #fff; color: var(--text); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(23, 18, 46, .06); transition: box-shadow .2s; }
.w18-pr-mini a:hover { box-shadow: 0 0 0 1.5px var(--text); }
.w18-pr-mini b { font-size: clamp(32px, 3vw, 40px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; }
.w18-pr-mini small { font-size: 14.5px; color: var(--text-2); }
.w18-akk p a { color: var(--text); }
@media (min-width: 760px) {
  .w18-pr-raster { grid-template-columns: repeat(2, 1fr); }
  .w18-pr-mini { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .w18-pr-raster { grid-template-columns: repeat(4, 1fr); }
  .w18-pr-drin-raster { grid-template-columns: 1.4fr 1fr; gap: 64px; }
  .w18-pr-coach { margin-top: 48px; }
}
.w18-pr-pro { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: rgba(255, 255, 255, .9); }
.w18-pr-pro b { font-weight: 500; color: #fff; }
.w18-pr-coach .kn { justify-self: start; }

.s-mint { background-color: #B4F1D0; }
.s-erd { background: #FFD6CF; }
.w18-slide { background: #DDD5FF; }
.w18-slide:has(.w18-s-bild.kob) { background: #D3DCFF; }
.w18-slide:has(.w18-s-bild.mint) { background: #BDF1D5; }
.w18-slide:has(.w18-s-bild.erd) { background: #FFD5CE; }
.w18-pr-karte.probe { background: #7DEBB0; }

.w18-pr3 { position: relative; }
.w18-takt-r { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.w18-takt { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 18, 46, .1); }
.w18-takt label { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 999px; cursor: pointer; font-size: 15.5px; color: var(--text); transition: background .2s, color .2s; }
.w18-takt label small { font-size: 12.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: #7DEBB0; color: #0B2A1D; }
#tb-m:checked ~ .w18-takt label[for="tb-m"], #tb-j:checked ~ .w18-takt label[for="tb-j"],
#tp-m:checked ~ .w18-takt label[for="tp-m"], #tp-j:checked ~ .w18-takt label[for="tp-j"] { background: #101820; color: #fff; }
.w18-pr3-box.pro .w18-takt { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.w18-pr3-box.pro .w18-takt label { color: #fff; }
.w18-pr3-box.pro #tp-m:checked ~ .w18-takt label[for="tp-m"], .w18-pr3-box.pro #tp-j:checked ~ .w18-takt label[for="tp-j"] { background: #fff; color: #2A1A8C; }
.w18-takt-r:focus-visible ~ .w18-takt { outline: 2px solid #101820; outline-offset: 3px; }
.w18-pr3-box.pro .w18-takt-r:focus-visible ~ .w18-takt { outline-color: #fff; }
.w18-pr3-box .w18-takt { align-self: flex-start; margin: 0; }
.w18-pr3 .tj { display: none; }
.w18-pr3-betrag > span, .w18-pr3-takt > span { display: block; }
.w18-takt-r[id$="-j"]:checked ~ * .tm, .w18-takt-r[id$="-j"]:checked ~ .tm { display: none; }
.w18-takt-r[id$="-j"]:checked ~ * span.tj { display: block; }
.w18-takt-r[id$="-j"]:checked ~ a.kn.tj { display: inline-flex; }
.w18-platz { display: block; width: fit-content; margin-top: 8px; padding: 4px 8px; border-radius: 8px; border: 1.5px dashed #C2475A; background: #FFE7E1; color: #6E1030; font-size: .92em; }
.w18-pr3-box.pro .w18-platz { background: #fff; }
.w18-pr3-raster { display: grid; gap: 16px; align-items: stretch; }
.w18-pr3-box { display: flex; flex-direction: column; gap: 14px; padding: var(--pk); border-radius: var(--r1); }
.w18-pr3-box h2 { margin: 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; letter-spacing: -.02em; line-height: 1.12; }
.w18-pr3-betrag { margin: 2px 0; font-size: clamp(40px, 4vw, 52px); font-weight: 300; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.w18-pr3-betrag small { display: block; margin-top: 10px; font-size: 15px; letter-spacing: 0; white-space: normal; color: var(--text-2); }
.w18-pr3-haken { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.4; }
.w18-pr3-haken li { position: relative; padding-left: 28px; }
.w18-pr3-haken li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 11px; height: 6px; border: solid #1B7A4E; border-width: 0 0 2.5px 2.5px; rotate: -45deg; }
.w18-pr3-haken b { font-weight: 500; }
.w18-pr3-plus { padding-top: 12px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--text-2); }
.w18-pr3-takt { font-size: 14.5px; color: var(--text-2); }
.w18-pr3-box .kn { margin-top: auto; align-self: flex-start; }
.w18-pr3-box.probe { background: #7DEBB0; color: #0B2A1D; }
.w18-pr3-box.probe .lab, .w18-pr3-box.probe small { color: #0E3B26; }
.w18-pr3-box.probe .w18-pr3-haken li::before { border-color: #0B2A1D; }
.w18-pr3-box.basic { background: #fff; box-shadow: 0 0 0 1px rgba(23, 18, 46, .08), 0 24px 44px -30px rgba(27, 18, 56, .4); }
.w18-pr3-box.pro { background: #6A4DF4; color: #fff; box-shadow: 0 30px 60px -34px rgba(65, 40, 194, .7); }
.w18-pr3-box.pro .lab { color: rgba(255, 255, 255, .9); }
.w18-pr3-box.pro small, .w18-pr3-box.pro .w18-pr3-takt { color: #fff; }
.w18-pr3-box.pro .w18-pr3-haken li::before { border-color: #7DEBB0; }
@media (min-width: 760px) { .w18-pr3-raster { grid-template-columns: repeat(2, 1fr); } .w18-pr3-box.probe { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .w18-pr3-raster { grid-template-columns: repeat(3, 1fr); } .w18-pr3-box.probe { grid-column: auto; } }
.w18-pr-mini a.probe { background: #7DEBB0; color: #0B2A1D; box-shadow: none; }
.w18-pr-mini a.probe small, .w18-pr-mini a.probe .lab { color: #0E3B26; }
.w18-pr-mini a.pro { background: #6A4DF4; color: #fff; box-shadow: none; }
.w18-pr-mini a.pro small, .w18-pr-mini a.pro .lab { color: #fff; }

.w18-slide .w18-s-text { align-items: start; }
.w18-slide .w18-s-text h3 { min-height: 2.2em; }
.w18-slide > p { min-height: 3em; }
.w18-s-gerz { width: 100%; flex: 1 1 100%; padding: 6px 4px 2px; }
.w18-s-gerz .w18-gerz { transform: none; max-width: 100%; }
.w18-s-gerz .w18-handy2 { border-radius: 14px; } .w18-s-gerz .w18-handy2-schirm { border-radius: 10px; }
.w18-s-gerz .w18-laptop-schirm { border-radius: 8px 8px 3px 3px; } .w18-s-gerz .w18-laptop-fuss { height: 8px; }

.w18 .w18-coachlogo { height: 1.9em; width: auto; display: block; }
.w18 .w18-coachwort { height: 1.5em; width: auto; display: inline-block; vertical-align: -0.42em; margin-left: .15em; }
.bl.er small { white-space: nowrap; }
.w18-ki { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-left: .2em; border: 1px solid currentColor;
  border-radius: 50%; font-size: max(9px, .55em); font-weight: 500; font-style: normal; line-height: 1; letter-spacing: 0; vertical-align: super; }
.w18-chat-kopf .w18-ki { color: #17122E; font-size: 9px; align-self: flex-start; margin-top: 1px; }
.bl.er small .w18-ki { color: #17122E; font-size: 8px; }

.w18-f2-feld input[type="email"] { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); outline: none; }
.w18-f2-feld input::placeholder { color: #8A86A0; }
.w18-f2-feld button { flex: 0 0 auto; font: inherit; font-size: 15.5px; font-weight: 500; color: #fff; background: #17122E; height: 44px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; }
.w18-f2-feld button:hover { background: #2A2542; }
.w18-f2-feld:focus-within { box-shadow: 0 0 0 2px #6A4DF4; }
.w18-f2-feld[aria-disabled="true"] button, .w18-f2-feld[aria-disabled="true"] input { cursor: not-allowed; }
.w18-nl-seite { max-width: 640px; }
.w18-nl-seite h1 { margin-top: 14px; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -.035em; font-weight: 300; }
.w18-nl-seite p { margin-top: 16px; font-size: 18px; color: var(--text-2); }
.w18-nl-seite .w18-knoepfe { margin-top: 28px; }

#funktionen { scroll-margin-top: 24px; }
#warteliste { scroll-margin-top: 0; }

.w18 .w18-coachlogo { height: 2.7em; }
.w18-ki { border-width: 1.6px; -webkit-text-stroke: .35px currentColor; margin-left: .06em; }
.w18 .w18-coachwort { margin-left: .1em; }
.w18-gl-logo { display: inline-flex; align-items: flex-start; line-height: 1; }
.w18-gl-logo .w18-coachwort { height: 1.35em; margin-left: 0; vertical-align: 0; }
.w18-gl-logo .w18-ki { color: #17122E; font-size: 8.5px; vertical-align: 0; margin-top: -1px; }
.w18-pille.w18-pille-logo { background: #fff; border-color: transparent; height: 40px; padding: 0 16px 0 14px; align-items: center; }
.w18-pille-logo .w18-coachwort { height: 22px; margin-left: 0; vertical-align: 0; }
.w18-pille-logo .w18-ki { color: #17122E; font-size: 9.5px; align-self: flex-start; margin-top: 6px; vertical-align: 0; }

.w18-handy-schirm { position: relative; background: #fff; }
.w18-status { position: absolute; left: 0; right: 0; top: 0; height: 6.6cqw; display: flex; align-items: center; justify-content: space-between;
  padding: 0 4.2cqw 0 5.4cqw; color: #0B0A10; font-size: 1.75cqw; z-index: 1; }
.w18-status b { font-weight: 500; letter-spacing: -.01em; }
.w18-status-r { display: inline-flex; align-items: center; gap: .7cqw; }
.w18-status-r svg { height: 1.25cqw; width: auto; fill: currentColor; }
.w18-status-r svg:last-child { height: 1.3cqw; }

.w18-warte .w18-zwei { align-items: center; }
.w18-warte-form label { color: #fff; }
.w18-warte-feld { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 6px 0 22px; border-radius: 999px; background: #fff; max-width: 520px; }
.w18-warte-feld input[type="email"] { flex: 1 1 auto; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); outline: none; }
.w18-warte-feld input::placeholder { color: #8A86A0; }
.w18-warte-feld .kn { flex: 0 0 auto; height: 48px; background: #17122E; color: #fff; }
.w18-warte-feld:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.w18-warte-feld :disabled { cursor: not-allowed; }
.w18-warte-feld .kn:disabled { opacity: .55; }
.w18-warte-klein { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 520px; }
.w18-warte-klein a { color: #fff; }
@media (max-width: 559px) {
  .w18-warte-feld { flex-wrap: wrap; height: auto; padding: 8px; border-radius: 26px; }
  .w18-warte-feld input[type="email"] { height: 44px; padding: 0 12px; }
  .w18-warte-feld .kn { width: 100%; }
}

.w18-pr-warte { margin: 0 0 22px; padding: 14px 20px; border-radius: 18px; background: #EDE8FF; color: #2E1C8F; font-size: 16px; max-width: 760px; }
.w18-pr-warte b { font-weight: 500; }
.w18-pr3.grau .w18-pr3-box > :not(.w18-pr3-warte) { filter: grayscale(1); opacity: .5; }
.w18-pr3.grau .w18-pr3-box { pointer-events: none; }
.w18-pr3.grau .w18-pr3-box .w18-pr3-warte, .w18-pr3.grau .w18-takt { pointer-events: auto; }
.w18-pr3-warte { display: inline-flex !important; }

.w18-s-gerz { height: 158px; display: flex; justify-content: center; padding: 0; }
.w18-s-gerz .w18-gerz { height: 100%; width: auto; max-width: none; aspect-ratio: 1.32; }
.w18-s-gerz .w18-handy2 { border-radius: 9px; } .w18-s-gerz .w18-handy2-schirm { border-radius: 6px; }
.w18-s-gerz .w18-laptop-schirm { border-radius: 6px 6px 2px 2px; } .w18-s-gerz .w18-laptop-fuss { height: 5px; }

.w18-pille.w18-pille-logo, .w18-chat-kopf, .w18-gl-logo { gap: 0; }
.w18-pille-logo .w18-ki, .w18-chat-kopf .w18-ki, .w18-gl-logo .w18-ki, .bl.er small .w18-ki { margin-left: 1px; }
.w18-gl-logo .w18-ki { font-size: 9.5px; }

.w18-warte-feld .kn.weiss, .w18-warte-feld .kn.weiss:disabled { background: #17122E; color: #fff; }
.w18-warte-feld .kn.weiss:disabled { opacity: .5; }
.w18-warte-form > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.w18-pr3.grau .w18-pr3-box { background: #F1F2F5 !important; border-color: transparent !important; box-shadow: 0 0 0 1px rgba(23, 18, 46, .08) !important; }
.w18-pr3.grau .w18-pr3-box > :not(.w18-pr3-warte) { filter: grayscale(1); opacity: .45; color: #17122E; }
.w18-pr3.grau .w18-pr3-box > :not(.w18-pr3-warte) * { color: inherit; }
.w18-pr3.grau .w18-pr3-warte.kn { background: #17122E; color: #fff; border-color: #17122E; }

.w18-pr-warte { display: grid; gap: 14px; max-width: none; padding: 22px 24px; }
.w18-pr-warte > p { margin: 0; max-width: 46em; }
.w18-pr-warte .w18-warte-feld { box-shadow: 0 0 0 1px rgba(46, 28, 143, .14); }
.w18-pr-warte .w18-warte-feld:focus-within { box-shadow: 0 0 0 2px #6A4DF4; }
.w18-pr-warte .w18-warte-klein { color: #4A4466; }
.w18-pr-warte .w18-warte-klein a { color: #2E1C8F; }
@media (min-width: 980px) { .w18-pr-warte { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; column-gap: 32px; } }
#warteliste-preise { scroll-margin-top: 96px; }

#fehler { display: none; }
#fehler:target { display: block; }
.w18-nl-seite:has(#fehler:target) .w18-ok-teil { display: none; }
.w18-fehler h2 { margin-top: 14px; }
.w18-fehler p { margin-top: 14px; }

.w18-handy-schirm { padding-top: 5cqw; }
.w18-status { height: 5cqw; padding-top: .5cqw; }

.w18-pille-logo .w18-ki { font-size: 8.8px; align-self: flex-start; margin-top: 1.6px; }          
.w18-chat-kopf { align-items: flex-start; }
.w18-chat-kopf .w18-ki { font-size: 8.8px; align-self: flex-start; margin-top: 13px; }            
.w18-gl-logo { align-items: flex-start; }
.w18-gl-logo .w18-coachwort { height: 18px; }
.w18-gl-logo .w18-ki { font-size: 7.5px; margin-top: .8px; }                                       
.bl.er small .w18-ki { font-size: 7.5px; overflow: hidden; vertical-align: baseline; }             

.w18-handy-schirm { aspect-ratio: auto; }
.w18-handy-schirm img { height: auto; }

.w18-pr-kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; }
.w18-pr-kopfzeile .w18-kopf { flex: 1 1 auto; }
.w18-pr-warte-kn { flex: 0 0 auto; }
.w18-pr-warte { display: block; padding: 14px 20px; max-width: 760px; }
.w18-pr3.grau .w18-pr3-box { pointer-events: auto; }
@media (max-width: 759px) { .w18-pr-kopfzeile { flex-direction: column; align-items: flex-start; } }
.w18-pille-logo .w18-ki { margin-top: 10.6px; }   

.wrap.w18-nl-seite { max-width: calc(var(--breite) + 2 * var(--rand)); }
.w18-nl-seite > *, .w18-nl-seite .w18-ok-teil > *, .w18-nl-seite .w18-fehler > * { max-width: 720px; }

.fuss.w18-fuss2 { background: #E1E6EF; box-shadow: inset 0 1px 0 rgba(23, 18, 46, .06); }

.w18-nl-seite-form { margin-top: 8px; }
.w18-nl-seite-form .w18-f2-feld { margin-top: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 18, 46, .1); }
.w18-nl-seite-form .w18-f2-klein { margin-top: 12px; font-size: 13.5px; max-width: 460px; }
.fuss.w18-fuss-knapp { margin-top: 0; padding: 26px 0; background: #E1E6EF; box-shadow: inset 0 1px 0 rgba(23, 18, 46, .06); }
.w18-fuss-knapp nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.w18-fuss-knapp a { color: var(--text-2); text-decoration: none; }
.w18-fuss-knapp a:hover { color: var(--text); text-decoration: underline; }
body:has(.w18-fuss-knapp) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(.w18-fuss-knapp) > main { flex: 1 0 auto; }

.w18-nl-form { margin-top: 24px; max-width: 520px; }
.w18-nl-form .w18-f2-feld { margin-top: 14px; }
.w18-nl-seite-form .w18-nl-form { margin-top: 18px; }

@media (max-width: 759px) {
  .w18-pr-kurz .w18-pr-satz2, .w18-pr-kurz .w18-pr-warte, .w18-pr-kurz .w18-pr3, .w18-pr-kurz .w18-pr-fein { display: none; }
}

@media (max-width: 759px) { .logo { width: 138px; } }

mark.w18-offen { background: #FFE58A; color: inherit; padding: 0 2px; }
#zaehlpixel, #feedback { scroll-margin-top: 96px; }

.w18-bald { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1.5; vertical-align: 1px; background: #7DEBB0; color: #0B2A1D; white-space: nowrap; }   

html { scroll-behavior: auto; }

#warteliste { scroll-margin-top: 65px; }
@media (min-width: 760px) { #warteliste { scroll-margin-top: 73px; } }