/* OnlyMew – Landingpage. Farben, Schrift und Logo nach dem Brandbook (Oktober 2026).
   Layout: zentrierte Spalte (1180 px Bühne, 1060 px Inhalt); Hero zweispaltig mit 3D-Bühne;
   Szenen in ruhigen Bändern; Abschluss auf einer immer dunklen Bühne mit der Katze.
   Dunkel ist der Start (Julian, E3); Hell nur über den Umschalter ([data-theme="light"]).
   Schriftdateien werden beim Bauen mit Prüfsumme benannt (Platzhalter FONT im url). */

@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/inter-latin.3100e775e8.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/inter-latin-ext.34b9c504ca.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/inter-cyrillic.71d5ee93cc.woff2) format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope Variable";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(fonts/manrope-latin.a30ddcd349.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope Variable";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(fonts/manrope-latin-ext.3911b66d9f.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope Variable";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(fonts/manrope-cyrillic.c268b459a9.woff2) format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

@property --px{syntax:"<number>";inherits:false;initial-value:0}
@property --py{syntax:"<number>";inherits:false;initial-value:0}
@property --rx{syntax:"<angle>";inherits:false;initial-value:12deg}
@property --ry{syntax:"<angle>";inherits:false;initial-value:-18deg}
@property --rz{syntax:"<angle>";inherits:false;initial-value:3deg}
@property --lift{syntax:"<length>";inherits:false;initial-value:0px}

:root{
  --bg:#09090D; --bg-raise:#0D0D14; --surface:#11111A; --surface-2:#171723;
  --line:rgba(236,232,255,.08); --line-2:rgba(236,232,255,.16);
  --fg:#F4F2FB; --fg-2:#A9A9B6; --fg-3:#8C8C9A;
  --v300:#C9A8FF; --v400:#A670FB; --v500:#905EFC; --v700:#5F2AF5;
  --accent:#905EFC; --accent-ink:#B892FF; --btn-a:#7A44F6; --btn-b:#6230EE; --on-accent:#FFFFFF;
  --glow:rgba(144,94,252,.55); --glow-soft:rgba(144,94,252,.16);
  --amb-1:#24144D; --amb-2:#151021; --amb-3:#09090D;
  --app-bg:#0B0B12; --app-side:#0E0E16; --app-panel:#12121C; --app-row:#14141F; --app-row-on:#1F1836;
  --app-line:rgba(236,232,255,.07); --app-text:#ECEAF6; --app-mute:#8B8B99; --bubble-in:#1D1D2B;
  --shadow-card:0 40px 80px -40px rgba(0,0,0,.9);
  --rim:rgba(201,168,255,.20);
  --tile-bg:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  --font-display:"Manrope Variable","Inter Variable",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter Variable",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r-card:22px; --r-tile:28px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F7F7FA; --bg-raise:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1EFF8;
  --line:rgba(9,9,13,.08); --line-2:rgba(9,9,13,.16);
  --fg:#09090D; --fg-2:#4F4F5C; --fg-3:#686875;
  --accent-ink:#6A33F4; --glow:rgba(144,94,252,.30); --glow-soft:rgba(144,94,252,.10);
  --amb-1:#ECE2FF; --amb-2:#F5F0FF; --amb-3:#F7F7FA;
  --app-bg:#FFFFFF; --app-side:#F7F7FA; --app-panel:#FFFFFF; --app-row:#FFFFFF; --app-row-on:#F2EBFF;
  --app-line:rgba(9,9,13,.07); --app-text:#15151C; --app-mute:#6F6F7D; --bubble-in:#F0EFF6;
  --shadow-card:0 30px 60px -30px rgba(70,40,150,.28);
  --rim:rgba(9,9,13,.10);
  --tile-bg:linear-gradient(160deg,#FFFFFF,#F6F3FD);
  color-scheme:light;
}
.dark-stage{
  --fg:#F4F2FB; --fg-2:#B9B8C6; --fg-3:#9392A3; --line:rgba(236,232,255,.1); --accent-ink:#B892FF;
  --amb-1:#24144D; --amb-2:#151021; --amb-3:#09090D; --glow:rgba(144,94,252,.55);
  color-scheme:dark;
}

/* Schriften je Sprache: Latein aus Inter/Manrope, sonst Systemschriften */
:lang(ar){--font-body:"Inter Variable","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;--font-display:"Manrope Variable","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif}
:lang(hi){--font-body:"Inter Variable","Nirmala UI","Noto Sans Devanagari",sans-serif;--font-display:"Manrope Variable","Nirmala UI","Noto Sans Devanagari",sans-serif}
:lang(ja){--font-body:"Inter Variable","Yu Gothic UI","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;--font-display:"Manrope Variable","Yu Gothic UI","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif}
:lang(ko){--font-body:"Inter Variable","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;--font-display:"Manrope Variable","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif}
:lang(zh-Hans){--font-body:"Inter Variable","Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;--font-display:"Manrope Variable","Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif}
:lang(zh-Hant){--font-body:"Inter Variable","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;--font-display:"Manrope Variable","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif}
:is(:lang(ar),:lang(hi),:lang(ja),:lang(ko),:lang(zh)) :is(h1,h2,h3){letter-spacing:0;line-height:1.3}
:is(:lang(ar),:lang(hi),:lang(ja),:lang(ko),:lang(zh)) .eyebrow{letter-spacing:0;text-transform:none;font-size:14px}
:is(:lang(ar),:lang(hi),:lang(ja),:lang(ko),:lang(zh)) .hero h1{line-height:1.25}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--v400);outline-offset:3px;border-radius:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:100;background:var(--surface);color:var(--fg);
  padding:8px 14px;border-radius:10px;transform:translateY(-200%);transition:transform .2s}
.skip:focus{transform:none}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
.narrow{max-width:1060px}
@media (max-width:600px){.wrap{padding-inline:16px}}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(30px,4.2vw,44px);line-height:1.1;font-weight:800}
h3{font-size:clamp(19px,2vw,22px);line-height:1.25;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1.2 var(--font-body);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.7;flex:none}
.lead{color:var(--fg-2);font-size:clamp(16.5px,1.6vw,18.5px);max-width:58ch}
.sec{padding-block:clamp(72px,10vw,128px)}
.sec.tight{padding-block-start:0}
.sec-head{display:grid;gap:16px;margin-block-end:clamp(36px,5vw,56px);max-width:720px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.grad{background:linear-gradient(100deg,var(--v300),var(--v500) 55%,var(--v700));-webkit-background-clip:text;background-clip:text;color:transparent}
.small{font-size:13px;color:var(--fg-3)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  text-decoration:none;font-weight:600;font-size:16px;line-height:1.1;border-radius:14px;padding:16px 22px;
  transition:transform .16s var(--ease-out),box-shadow .3s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-primary{color:var(--on-accent);background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 32px -12px var(--glow)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 16px 44px -10px var(--glow)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.btn svg{width:18px;height:18px;flex:none}
.btn-sm{padding:11px 16px;font-size:14.5px;border-radius:12px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:0;cursor:pointer;
  background:transparent;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,transform .16s var(--ease-out)}
.icon-btn:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:18px;height:18px}
.i-moon{display:none}
:root[data-theme="light"] .i-sun{display:none}
:root[data-theme="light"] .i-moon{display:block}

/* Kopf */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-block-end:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-block-end-color:var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);flex:none}
.brand .ico{width:30px;height:29px}
.brand .wm{width:116px;height:auto}
[dir="rtl"] .brand{direction:ltr}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav a{text-decoration:none;color:var(--fg-2);font-size:15px;font-weight:500;padding:8px 12px;border-radius:10px;transition:color .2s}
.nav a:hover{color:var(--fg)}
.top-actions{display:flex;align-items:center;gap:8px}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:12px;border:0;
  cursor:pointer;background:transparent;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600;text-transform:uppercase}
.lang-btn svg{width:16px;height:16px}
@media (max-width:860px){.nav{display:none}.top-actions{margin-inline-start:auto}}
@media (max-width:520px){.top-in{gap:10px}.brand .wm{width:96px}.top .btn-sm .lbl{display:none}.top .btn-sm{padding:11px 12px}}

/* Hero */
.hero{position:relative;padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,104px);overflow:clip}
.hero::before{content:"";position:absolute;inset:-20% -10% 0 30%;pointer-events:none;
  background:radial-gradient(50% 50% at 60% 40%,var(--glow-soft),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;position:relative}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.hero-copy{display:grid;gap:22px;max-width:560px}
.hero h1{font-size:clamp(40px,5.6vw,62px);line-height:1.04;font-weight:800;letter-spacing:-.035em}
.hero h1 span{display:block}
.hero h1 .live{display:inline-block;position:relative;padding-inline-end:.42em}
.hero h1 .live::after{content:"";position:absolute;inset-inline-end:.04em;top:.2em;width:.2em;height:.2em;border-radius:50%;
  background:var(--v400);animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 .32em transparent}100%{box-shadow:0 0 0 0 transparent}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.assure{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--fg-3);font-size:13.5px;list-style:none;margin:0;padding:0}
.assure li{display:inline-flex;align-items:center;gap:6px}
.assure svg{width:14px;height:14px;color:var(--accent-ink)}
.soon{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--fg-2);
  padding:4px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}

/* 3D-Bühne (Beispiel-Oberfläche, dekorativ) */
.stage{--dir:1;position:relative;container-type:inline-size;aspect-ratio:16/12;perspective:1500px;perspective-origin:50% 40%;direction:ltr}
[dir="rtl"] .stage{--dir:-1}
.stage::before{content:"";position:absolute;inset:10% 6% 14% 10%;pointer-events:none;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,var(--glow-soft),transparent 72%);filter:blur(20px)}
.stage::after{content:"";position:absolute;left:8%;right:8%;bottom:2%;height:22%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%);opacity:.45;filter:blur(30px)}
.rig{--depth:1;position:absolute;inset:4% 0 6% 2%;transform-style:preserve-3d;
  transform:translateY(var(--lift)) rotateX(calc(var(--rx) - var(--py) * 7deg)) rotateY(calc((var(--ry) + var(--px) * 9deg) * var(--dir))) rotateZ(calc(var(--rz) * var(--dir)));
  font-size:clamp(6.5px,1.5cqw,11px)}
.float{position:absolute;transform:translateZ(calc(var(--z) * var(--depth)));transform-style:preserve-3d}
@media (max-width:1000px){
  .stage{margin-block-start:28px;aspect-ratio:16/13}
  .rig{--rx:10deg;--ry:-12deg;--rz:2deg;inset:10% 7% 12% 7%}
  .fc-creator{right:-5%;top:-4%}
  .fc-team{left:-5%;bottom:2%}
  .fc-toast{right:0;bottom:-10%}
}
@media (max-width:600px){.fc-team{display:none}}

/* App-Oberfläche */
.app{position:absolute;inset:0;border-radius:1.4em;background:var(--app-bg);overflow:hidden;
  box-shadow:0 0 0 1px var(--rim),inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-card),0 0 120px -30px var(--glow);
  display:grid;grid-template-rows:auto 1fr;color:var(--app-text);direction:ltr;text-align:left}
.titlebar{display:flex;align-items:center;gap:.8em;height:3.2em;padding:0 1.1em;border-bottom:1px solid var(--app-line)}
.titlebar .ti{width:1.6em;height:1.55em}
.titlebar b{font-weight:600;font-size:1.1em}
.win-ctl{margin-left:auto;display:flex;gap:1.6em;color:var(--app-mute)}
.win-ctl i{display:block;width:.9em;height:.9em;border:1.5px solid currentColor;border-radius:1px}
.win-ctl i:first-child{height:0;border-width:1.5px 0 0;margin-top:.45em}
.win-ctl i:last-child{border:0;position:relative}
.win-ctl i:last-child::before,.win-ctl i:last-child::after{content:"";position:absolute;left:50%;top:-.15em;width:1.5px;height:1.25em;background:currentColor;transform:rotate(45deg)}
.win-ctl i:last-child::after{transform:rotate(-45deg)}
.app-body{display:grid;grid-template-columns:4.6em 17.5em 1fr;min-height:0}
.app-body.two{grid-template-columns:4.6em 1fr}
.side{background:var(--app-side);border-right:1px solid var(--app-line);display:grid;align-content:start;gap:.6em;padding:1em 0;justify-items:center}
.side span{width:2.6em;height:2.6em;border-radius:.8em;display:grid;place-items:center;color:var(--app-mute)}
.side span.on{background:var(--app-row-on);color:var(--v400)}
.side svg{width:1.45em;height:1.45em}
.list{border-right:1px solid var(--app-line);display:grid;grid-template-rows:auto auto 1fr;min-height:0;background:var(--app-panel)}
.search{margin:1em 1em .6em;height:2.6em;border-radius:.8em;background:var(--app-row);box-shadow:inset 0 0 0 1px var(--app-line);
  display:flex;align-items:center;gap:.6em;padding:0 .8em;color:var(--app-mute);font-size:.95em}
.search svg{width:1.2em;height:1.2em}
.chips{display:flex;gap:.4em;padding:0 1em .7em}
.chips span{font-size:.85em;padding:.35em .8em;border-radius:99em;box-shadow:inset 0 0 0 1px var(--app-line);color:var(--app-mute);white-space:nowrap}
.chips span.on{background:var(--app-row-on);color:var(--v400);box-shadow:none;font-weight:600}
.rows{overflow:hidden;display:grid;align-content:start}
.row{display:grid;grid-template-columns:2.8em minmax(0,1fr) auto;gap:.2em .7em;align-items:center;padding:.75em 1em;border-bottom:1px solid var(--app-line);background:var(--app-panel)}
.row.on,.row.new{background:var(--app-row-on)}
.av{grid-row:span 2;width:2.8em;height:2.8em;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.95em;color:#fff;
  background:linear-gradient(140deg,#A670FB,#5F2AF5)}
.av.g1{background:linear-gradient(140deg,#C9A8FF,#7C48F8)}
.av.g2{background:linear-gradient(140deg,#D9C2FF,#905EFC)}
.av.g3{background:linear-gradient(140deg,#B48CFF,#4B1FD0)}
.row .n{font-weight:600;font-size:1em;display:flex;align-items:center;gap:.5em;min-width:0;white-space:nowrap}
.row .t{font-size:.82em;color:var(--app-mute);white-space:nowrap}
.row .s{font-size:.9em;color:var(--app-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row .u{justify-self:end;min-width:1.6em;height:1.6em;padding:0 .45em;border-radius:99em;background:#6A35F5;color:#fff;font-size:.78em;font-weight:700;display:grid;place-items:center}
.pf{font-size:.72em;font-weight:600;padding:.15em .55em;border-radius:99em;color:var(--v400);background:var(--app-row-on)}
.chat{display:grid;grid-template-rows:auto 1fr auto;min-height:0;background:var(--app-bg)}
.chat-h{display:flex;align-items:center;gap:.8em;padding:.9em 1.2em;border-bottom:1px solid var(--app-line)}
.chat-h .av{grid-row:auto;width:2.4em;height:2.4em}
.chat-h b{font-size:1.05em}
.chat-h small{display:block;color:var(--app-mute);font-size:.82em}
.livepill{margin-left:auto;display:inline-flex;align-items:center;gap:.45em;font-size:.8em;font-weight:600;color:var(--v400);
  padding:.3em .7em;border-radius:99em;background:var(--app-row-on)}
.livepill i{width:.55em;height:.55em;border-radius:50%;background:var(--v400);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.msgs{display:grid;align-content:end;gap:.6em;padding:1.2em;overflow:hidden}
.b{max-width:72%;padding:.65em .95em;border-radius:1.1em;font-size:.98em;line-height:1.4}
.b.in{background:var(--bubble-in);border-bottom-left-radius:.35em}
.b.out{justify-self:end;background:linear-gradient(180deg,var(--v400),var(--v500));color:#fff;border-bottom-right-radius:.35em}
.b small{display:block;font-size:.75em;opacity:.7;margin-top:.2em}
.typing{display:inline-flex;gap:.3em;padding:.75em .95em;border-radius:1.1em;background:var(--bubble-in);width:max-content}
.typing i{width:.5em;height:.5em;border-radius:50%;background:var(--app-mute);animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-.3em);opacity:1}}
.composer{margin:0 1.2em 1.2em;height:3.2em;border-radius:1em;background:var(--app-row);box-shadow:inset 0 0 0 1px var(--app-line);
  display:flex;align-items:center;padding:0 .5em 0 1em;color:var(--app-mute);font-size:.95em}
.composer .send{margin-left:auto;width:2.3em;height:2.3em;border-radius:.75em;background:var(--v500);display:grid;place-items:center;color:#fff}
.composer .send svg{width:1.1em;height:1.1em}

/* Schwebende Karten */
.fcard{border-radius:1.2em;background:var(--app-panel);color:var(--app-text);
  box-shadow:0 0 0 1px var(--rim),inset 0 1px 0 rgba(255,255,255,.07),0 40px 70px -24px rgba(0,0,0,.7),0 0 60px -14px var(--glow);padding:1.1em 1.2em;min-width:15em}
.fcard h4{margin:0 0 .7em;font:700 .8em/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--app-mute)}
.fc-creator{--z:120px;right:-6%;top:6%}
.fc-team{--z:170px;left:-2%;bottom:10%}
.fc-toast{--z:220px;right:4%;bottom:-6%;min-width:20em}
.toast-in{display:flex;align-items:center;gap:.9em}
.cr-head{display:flex;align-items:center;gap:.7em;margin-bottom:.8em}
.cr-head .av{grid-row:auto;width:2.6em;height:2.6em}
.cr-head b{display:block}
.cr-head small{color:var(--app-mute);font-size:.82em}
.cr-plat{display:grid;gap:.45em}
.cr-plat div{display:flex;align-items:center;gap:.6em;font-size:.92em}
.cr-plat i{width:.55em;height:.55em;border-radius:50%;background:var(--v400);box-shadow:0 0 .6em var(--v400)}
.cr-plat em{margin-left:auto;font-style:normal;color:var(--app-mute);font-size:.85em}
.team-av{display:flex;margin-bottom:.7em}
.team-av .av{grid-row:auto;width:2.4em;height:2.4em;font-size:.82em;box-shadow:0 0 0 .2em var(--app-panel)}
.team-av .av+.av{margin-left:-.6em}
.lockline{display:flex;align-items:center;gap:.55em;font-size:.9em;color:var(--app-mute)}
.lockline svg{width:1.2em;height:1.2em;color:var(--v400)}
.fc-toast .ic{width:2.6em;height:2.6em;border-radius:.9em;display:grid;place-items:center;background:linear-gradient(140deg,var(--v400),var(--v700));color:#fff;flex:none}
.fc-toast .ic svg{width:1.3em;height:1.3em}
.fc-toast b{display:block;font-size:.98em}
.fc-toast small{color:var(--app-mute);font-size:.85em}
.fc-toast .when{margin-left:auto;align-self:start;font-size:.78em;color:var(--v400);font-weight:600}

/* Plattformleiste */
.platforms{border-block:1px solid var(--line);background:var(--bg-raise)}
.plat-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;justify-content:center;padding-block:22px;list-style:none;margin-block:0}
.plat-label{font-size:13px;color:var(--fg-3);font-weight:500}
.plat{display:inline-flex;align-items:center;gap:8px;font:700 clamp(15px,1.6vw,18px)/1 var(--font-display);color:var(--fg);letter-spacing:-.01em}
.plat i{width:7px;height:7px;border-radius:50%;background:var(--v400);box-shadow:0 0 10px var(--v400)}

/* Problem */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.cards3{grid-template-columns:1fr}}
.pcard{border-radius:var(--r-card);background:var(--surface);box-shadow:0 0 0 1px var(--line);padding:24px;display:grid;gap:14px;align-content:start}
.pcard .who{font-size:12.5px;font-weight:600;color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase}
.pcard p{color:var(--fg-2);font-size:15.5px}
.pcard .then{color:var(--fg);font-weight:500;font-size:15px;padding-block-start:12px;border-block-start:1px solid var(--line)}
.viz{height:132px;border-radius:16px;background:var(--surface-2);position:relative;overflow:hidden;display:grid;place-items:center;direction:ltr}
.tabs7{display:flex;gap:4px;padding:0 14px;width:100%;align-self:start;margin-top:22px}
.tabs7 span{flex:1;height:26px;border-radius:8px 8px 0 0;background:var(--surface);box-shadow:0 0 0 1px var(--line);position:relative}
.tabs7 span.ping::after{content:"1";position:absolute;right:-4px;top:-6px;width:16px;height:16px;border-radius:50%;background:var(--v500);color:#fff;font:700 10px/16px var(--font-body);text-align:center;animation:pulse 1.4s infinite}
.tabs7+.page{position:absolute;left:14px;right:14px;top:48px;bottom:0;background:var(--surface);border-radius:0 8px 0 0;box-shadow:0 0 0 1px var(--line)}
.tabs7+.page::before,.tabs7+.page::after{content:"";position:absolute;left:14px;height:8px;border-radius:4px;background:var(--line-2)}
.tabs7+.page::before{top:18px;width:46%}.tabs7+.page::after{top:34px;width:30%}
.pw{background:var(--surface);border-radius:14px;padding:10px 14px;box-shadow:0 0 0 1px var(--line);font-size:13px;width:78%;display:grid;gap:4px}
.pw b{font-size:12px;color:var(--fg-3);font-weight:600}
.pw code{font:600 14px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.12em;color:var(--fg)}
.warnline{position:absolute;right:16px;bottom:12px;font-size:11.5px;font-weight:600;color:var(--accent-ink)}
.late{background:var(--surface);border-radius:14px;padding:10px 14px;box-shadow:0 0 0 1px var(--line);width:80%;display:flex;gap:10px;align-items:center}
.late .dotg{width:30px;height:30px;border-radius:50%;background:var(--surface-2);flex:none}
.late div{display:grid;gap:5px;flex:1}
.late div i{display:block;height:7px;border-radius:4px;background:var(--line-2)}
.late div i:last-child{width:60%}
.late b{font-size:12px;color:var(--accent-ink);white-space:nowrap}

/* Live-Posteingang */
.flow{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.3fr);align-items:center;
  border-radius:28px;background:radial-gradient(70% 90% at 70% 50%,var(--glow-soft),transparent 70%),var(--bg-raise);
  box-shadow:0 0 0 1px var(--line);padding:clamp(18px,3vw,36px);overflow:hidden;min-height:440px;contain:layout paint}
.sources{display:grid;gap:10px;position:relative;z-index:2;list-style:none;margin:0;padding:0}
.src{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line);
  font:700 15px/1 var(--font-display);transition:box-shadow .3s,transform .3s var(--ease-out)}
.src i{width:8px;height:8px;border-radius:50%;background:var(--v400);opacity:.5;transition:opacity .3s,box-shadow .3s}
.src.hit{box-shadow:0 0 0 1px var(--accent),0 0 24px -6px var(--glow);transform:translateX(calc(4px * var(--flowdir,1)))}
[dir="rtl"] .src.hit{--flowdir:-1}
.src.hit i{opacity:1;box-shadow:0 0 10px var(--v400)}
.lanes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.lanes path{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:3 6}
.inbox{grid-column:3;position:relative;z-index:2;border-radius:20px;background:var(--app-panel);color:var(--app-text);direction:ltr;text-align:left;
  box-shadow:0 0 0 1px var(--app-line),var(--shadow-card);overflow:hidden;font-size:clamp(11px,1.05vw,13.5px)}
.inbox-h{display:flex;align-items:center;gap:.7em;padding:1em 1.2em;border-bottom:1px solid var(--app-line);font-weight:700}
.inbox-h .cnt{font-size:.8em;font-weight:700;color:#fff;background:#6A35F5;border-radius:99em;padding:.15em .6em}
.inbox .rows{height:24.5em}
.inbox .row{padding:.85em 1.2em}
.bub{position:absolute;z-index:3;left:0;top:0;padding:7px 12px;border-radius:14px 14px 14px 4px;background:linear-gradient(180deg,var(--v400),var(--v500));
  color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 8px 24px -6px var(--glow);pointer-events:none;will-change:transform}
.flow-steps{display:flex;justify-content:center;gap:clamp(10px,3vw,28px);margin-block-start:20px;color:var(--fg-3);font-size:14px;flex-wrap:wrap;list-style:none;padding:0}
.flow-steps b{color:var(--fg);font-weight:600}
.flow-steps .arr{color:var(--fg-3)}
[dir="rtl"] .flow-steps .arr{transform:scaleX(-1)}
.flow-ctl{display:flex;justify-content:center;margin-block-start:12px}
.pause{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;color:var(--fg-3);font-size:13px;padding:6px 10px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.pause svg{width:14px;height:14px}
@media (max-width:860px){
  .flow{grid-template-columns:1fr;gap:28px;min-height:0}
  .sources{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .src{padding:8px 11px;font-size:13.5px}
  .inbox{grid-column:1}
  .lanes{display:none}
}

/* Glas-Kacheln */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;perspective:1200px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.tiles{grid-template-columns:1fr}}
.tile{--trx:0deg;--try:0deg;--mx:50%;--my:0%;position:relative;border-radius:var(--r-tile);padding:26px;display:grid;gap:12px;align-content:start;
  background:var(--tile-bg);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-card);
  transform:rotateX(var(--trx)) rotateY(var(--try));transform-style:preserve-3d;transition:transform .5s var(--ease-out)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px 200px at var(--mx) var(--my),rgba(201,168,255,.16),transparent 70%)}
.tile:hover::after{opacity:1}
.glyph{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;margin-block-end:8px;transform:translateZ(36px);
  background:radial-gradient(120% 120% at 28% 18%,#E3D2FF 0%,#B48CFF 22%,#905EFC 52%,#5F2AF5 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -10px 18px rgba(40,10,120,.45),0 18px 36px -12px var(--glow),0 0 0 1px rgba(255,255,255,.12)}
.glyph svg{width:34px;height:34px;color:#fff;filter:drop-shadow(0 2px 3px rgba(40,10,120,.5))}
.tile p{color:var(--fg-2);font-size:15.5px}

/* Tour */
.tour-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-block-end:24px}
.tour-tabs button{border:0;cursor:pointer;background:transparent;padding:10px 16px;border-radius:12px;font-weight:600;font-size:15px;color:var(--fg-2);
  box-shadow:inset 0 0 0 1px var(--line);transition:color .25s,background-color .25s,box-shadow .25s}
.tour-tabs button[aria-selected="true"]{color:var(--fg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent),0 8px 24px -12px var(--glow)}
.tour-win{position:relative;max-width:980px;margin-inline:auto;aspect-ratio:16/9.4;container-type:inline-size;contain:layout paint}
.tour-win .app{font-size:clamp(6.5px,1.25cqw,12px)}
.tour-pane{display:grid;min-height:0}
.tour-pane[hidden]{display:none}
.tour-cap{text-align:center;color:var(--fg-2);font-size:15px;margin-block-start:18px;min-height:3em}
.tour-note{display:block;text-align:center;font-size:13px;color:var(--fg-3);margin-block-start:6px}
.pane-inbox{display:grid;grid-template-columns:19em 1fr;min-height:0}
.grid-cards{padding:1.4em;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em;align-content:start;overflow:hidden}
.gc{border-radius:1em;background:var(--app-panel);box-shadow:0 0 0 1px var(--app-line);padding:1em;display:grid;gap:.7em}
.gc .cr-head{margin:0}
.gc .meta{display:flex;flex-wrap:wrap;gap:.35em}
.gc .meta span{font-size:.78em;padding:.2em .6em;border-radius:99em;background:var(--app-row-on);color:var(--v400);font-weight:600}
.gc .px{font-size:.82em;color:var(--app-mute);display:flex;align-items:center;gap:.4em}
.gc .px svg{width:1.1em;height:1.1em;color:var(--v400)}
.tbl{padding:1.2em 1.4em;display:grid;align-content:start;overflow:hidden}
.tr{display:grid;grid-template-columns:2.6em 1.4fr 1fr 1fr 1.2fr;gap:.8em;align-items:center;padding:.75em 0;border-bottom:1px solid var(--app-line);font-size:.95em}
.tr.h{color:var(--app-mute);font-size:.78em;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.tr .av{grid-row:auto;width:2.4em;height:2.4em;font-size:.8em}
.role{font-size:.82em;font-weight:600;padding:.2em .65em;border-radius:99em;background:var(--app-row-on);color:var(--v400);width:max-content}
.tr .mute{color:var(--app-mute)}
.tr .ok{display:flex;align-items:center;gap:.4em;color:var(--app-mute);font-size:.88em}
.tr .ok svg{width:1.1em;height:1.1em;color:var(--v400)}

/* Video */
.film{max-width:980px;margin:28px auto 0;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--line),var(--shadow-card);background:var(--app-bg)}
.film video{width:100%;height:auto;aspect-ratio:16/9}

/* Schritte */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{border-radius:var(--r-card);background:var(--surface);box-shadow:0 0 0 1px var(--line);padding:24px;display:grid;gap:10px;align-content:start}
.step .num{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:800 16px/1 var(--font-display);color:var(--accent-ink);
  background:var(--glow-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.step p{color:var(--fg-2);font-size:15.5px}

/* Preise */
.price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:960px){.price-grid{grid-template-columns:1fr}}
.price-card{border-radius:26px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-card);padding:clamp(22px,3vw,34px);display:grid;gap:18px}
.price-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-big b{font:800 clamp(44px,5vw,58px)/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-big span{color:var(--fg-2);font-size:15px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--accent-ink);background:var(--glow-soft);
  padding:7px 12px;border-radius:999px;width:max-content;max-width:100%}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;color:var(--fg-2);font-size:15.5px}
.checks svg{width:18px;height:18px;color:var(--accent-ink);flex:none;margin-block-start:3px}
.tiers{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.tiers th{text-align:start;font-weight:600;color:var(--fg-3);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 0 8px}
.tiers td{padding:8px 0;border-block-start:1px solid var(--line)}
.tiers td:last-child,.tiers th:last-child{text-align:end}
.tiers tr.cur td{color:var(--accent-ink);font-weight:600}
.calc{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field .lbl{font-size:14px;font-weight:600}
.stepper{display:flex;align-items:center;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);width:max-content}
.stepper button{width:44px;height:44px;border:0;background:transparent;cursor:pointer;font-size:20px;color:var(--fg)}
.stepper output{min-width:48px;text-align:center;font:700 17px/1 var(--font-body);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--v500) var(--fill,30%),var(--line-2) var(--fill,30%))}
[dir="rtl"] input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(270deg,var(--v500) var(--fill,30%),var(--line-2) var(--fill,30%))}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--line-2)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--v500)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;margin-top:-8px;box-shadow:0 0 0 4px var(--v500),0 4px 12px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--v500)}
.rev{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;font-weight:700}
.sum{border-radius:18px;background:var(--surface-2);padding:18px;display:grid;gap:8px;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between;gap:12px;color:var(--fg-2);font-size:14.5px}
.sum .tot{color:var(--fg);font-weight:700;font-size:15px;padding-block-start:10px;border-block-start:1px solid var(--line);align-items:baseline}
.sum .tot b{font:800 28px/1 var(--font-display);letter-spacing:-.02em}
.b2b{font-size:13px;color:var(--fg-2);padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}

/* Für wen */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:800px){.fit{grid-template-columns:1fr}}
.fit-col{border-radius:var(--r-card);padding:26px;box-shadow:0 0 0 1px var(--line);background:var(--surface);display:grid;gap:14px;align-content:start}
.fit-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fit-col li{display:flex;gap:10px;color:var(--fg-2);font-size:15.5px}
.fit-col li svg{width:18px;height:18px;flex:none;margin-block-start:3px}
.fit-col.yes li svg{color:var(--accent-ink)}
.fit-col.no li svg{color:var(--fg-3)}

/* FAQ */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:10px}
.faq details{border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s}
.faq details[open]{box-shadow:0 0 0 1px var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;display:flex;gap:16px;align-items:center;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:22px;height:22px;flex:none;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:2px;border-radius:1px;background:var(--accent-ink);transition:transform .3s var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a{padding:0 22px 20px;color:var(--fg-2);font-size:15.5px;display:grid;gap:8px}

/* Abschluss */
.final{padding-block:clamp(40px,6vw,72px) clamp(72px,9vw,120px)}
.final-box{position:relative;border-radius:34px;overflow:hidden;color:var(--fg);
  background:radial-gradient(80% 120% at 85% 60%,var(--amb-1) 0%,var(--amb-2) 45%,var(--amb-3) 100%);
  box-shadow:0 0 0 1px var(--line),0 60px 120px -60px var(--glow);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;min-height:460px}
[dir="rtl"] .final-box{background:radial-gradient(80% 120% at 15% 60%,var(--amb-1) 0%,var(--amb-2) 45%,var(--amb-3) 100%)}
@media (max-width:860px){.final-box{grid-template-columns:1fr}}
.final-copy{padding:clamp(28px,5vw,64px);display:grid;gap:20px;align-content:center;align-self:center}
.final-copy h2{font-size:clamp(32px,4.4vw,50px)}
.final-copy h2 span{display:block}
.cat{position:relative;align-self:end;justify-self:end;width:min(100%,430px);margin-inline-end:clamp(0px,3vw,40px);direction:ltr}
.cat img{width:100%;height:auto;-webkit-mask-image:radial-gradient(75% 70% at 55% 48%,#000 55%,transparent 100%);mask-image:radial-gradient(75% 70% at 55% 48%,#000 55%,transparent 100%)}
.cat svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eye-glow{opacity:.55;transition:opacity 1.2s var(--ease-out),filter 1.2s var(--ease-out)}
.final-box.awake .eye-glow{opacity:1;filter:drop-shadow(0 0 5px #A670FB) drop-shadow(0 0 14px rgba(144,94,252,.8))}
@media (max-width:860px){.cat{justify-self:center;width:min(80%,360px);margin:0}}

/* Fuß */
.foot{border-block-start:1px solid var(--line);padding-block:40px 56px;color:var(--fg-2);font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot h2{margin:0 0 12px;font:600 13px/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--fg);text-decoration:underline}
.foot .langs{display:flex;flex-wrap:wrap;gap:6px 12px}
.copy{display:flex;gap:6px 18px;flex-wrap:wrap;justify-content:space-between;margin-block-start:32px;padding-block-start:20px;border-block-start:1px solid var(--line);font-size:13px;color:var(--fg-3)}
.tag{font-size:11.5px;font-weight:600;color:var(--accent-ink);background:var(--glow-soft);padding:2px 7px;border-radius:99px;margin-inline-start:6px}
.linkbtn{border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit;text-decoration:none}
.linkbtn:hover{color:var(--fg);text-decoration:underline}

/* Sprachfenster */
dialog.langbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--fg)}
/* Die Seite soll dahinter erkennbar bleiben (F-460): nur leicht abdunkeln und weichzeichnen */
dialog.langbox::backdrop{background:color-mix(in srgb,var(--bg) 45%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
dialog.langbox[open]{display:grid;place-items:center}
.lang-card{width:min(calc(100% - 32px),520px);max-height:calc(100% - 32px);overflow:auto;border-radius:28px;background:var(--surface);
  box-shadow:0 0 0 1px var(--line-2),0 50px 100px -40px rgba(0,0,0,.7),0 0 120px -40px var(--glow);
  padding:30px clamp(20px,4vw,34px) 26px;display:grid;gap:18px;justify-items:center;text-align:center;position:relative}
.lang-card .x{position:absolute;inset-inline-end:14px;top:14px}
.lang-ico{width:64px;height:62px}
.lang-ico .tdot{animation:tdot 1.3s infinite;transform-box:fill-box;transform-origin:center}
.lang-ico .tdot:nth-of-type(2){animation-delay:.15s}.lang-ico .tdot:nth-of-type(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-22%);opacity:1}}
.lang-card h2,.start h1{font-size:24px;line-height:1.25}
.lang-card .sub{color:var(--fg-2);font-size:14.5px;margin-block-start:-10px}
.lang-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;list-style:none;margin:0;padding:0}
.lang-grid a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:14px;text-decoration:none;
  background:var(--surface-2);font-weight:600;font-size:15px;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s,background-color .2s}
.lang-grid a small{color:var(--fg-3);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.lang-grid a:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.lang-grid a[aria-current="true"],.lang-grid a.sug{box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--glow-soft)}
/* Handy: kompakt in zwei Spalten, damit das Fenster nicht den ganzen Bildschirm füllt (F-460) */
@media (max-width:520px){
  .lang-card{padding:22px 14px 16px;gap:12px;border-radius:24px}
  .lang-ico{width:44px;height:43px}
  .lang-card h2,.start h1{font-size:20px}
  .lang-grid{gap:6px}
  .lang-grid a{padding:10px 11px;font-size:14px}
  .lang-grid a small{display:none}
}

/* Startseite (Sprachwahl) und Textseiten */
.start{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;
  background:radial-gradient(60% 60% at 50% 30%,var(--glow-soft),transparent 70%),var(--bg)}
.start .lang-card{width:min(100%,560px)}
/* Startadresse mit JavaScript: springt sofort weiter (F-460), die Liste soll dabei nicht aufblitzen */
html.weiter body{visibility:hidden}
.doc{max-width:760px;margin-inline:auto;padding-block:48px 80px}
.doc h1{font-size:clamp(30px,4vw,40px);margin-block-end:24px}
.doc h2{font-size:22px;margin-block:32px 10px}
.doc h3{font-size:18px;margin-block:20px 8px}
.doc p,.doc li,.doc address{color:var(--fg-2);font-size:16px;font-style:normal}
.doc p+p{margin-block-start:10px}
.doc a{color:var(--accent-ink)}
mark.pruefen{background:rgba(255,196,0,.18);color:inherit;box-shadow:inset 0 -2px 0 rgba(255,196,0,.7);padding:0 2px;border-radius:3px}

[data-rise]{transition:transform .9s var(--ease-out)}
html.js [data-rise].pre{transform:translateY(22px)}

html.still *,html.still *::before,html.still *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}