/* Moved out of aiory_landing.html (29.10.2026, page weight: Bing flags HTML over 125 KB). */
*{box-sizing:border-box;margin:0;padding:0}
:root{
--vio:#8b5cf6;--vioL:var(--violet-400,#a78bfa);--ind:var(--violet-600,#7c3aed);
--txt:var(--neutral-200,#e2e8f0);--mut:var(--neutral-400,#94a3b8);--line:rgba(255,255,255,.09);
--sky:var(--sky-400,#38bdf8);--cyan:#22d3ee;--amber:var(--amber-400,#fbbf24);--emerald:var(--emerald-400,#34d399);--pink:#f472b6;--indigo:#818cf8;--rose:#fb7185;
--card:rgba(255,255,255,.028);
--navbar-height:4.3rem;
}
html{scroll-behavior:smooth}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{margin-top:calc(var(--navbar-height) + 1px)}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--txt);background:#0a0a15;min-height:100vh;overflow-x:hidden}
.wrap{max-width:1150px;margin:0 auto;padding:0 1.25rem;position:relative;z-index:1}
::selection{background:rgba(139,92,246,.4)}
/* ---- Hintergrund: Aurora + Dot-Grid ---- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(900px 600px at 50% 0%,#000 0%,transparent 75%);-webkit-mask-image:radial-gradient(900px 600px at 50% 0%,#000 0%,transparent 75%)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.blob.b1{width:640px;height:640px;left:-160px;top:-220px;background:radial-gradient(circle,rgba(139,92,246,.38),transparent 65%);animation:drift1 26s ease-in-out infinite alternate}
.blob.b2{width:520px;height:520px;right:-140px;top:16%;background:radial-gradient(circle,rgba(56,189,248,.2),transparent 65%);animation:drift2 32s ease-in-out infinite alternate}
.blob.b3{width:700px;height:700px;left:28%;bottom:-320px;background:radial-gradient(circle,rgba(124,58,237,.26),transparent 65%);animation:drift1 38s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(70px,50px) scale(1.08)}}
@keyframes drift2{to{transform:translate(-60px,70px) scale(.94)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none}*{animation-duration:.001s!important;transition-duration:.001s!important}}
/* ---- Topbar ---- */
.top{position:sticky;top:0;z-index:50;background:#0a0a15;border-bottom:1px solid var(--line)}
/* NICHT "padding:.8rem 0" schreiben: die Kurzform setzt auch links/rechts auf 0
und schlaegt als spaetere Regel gleicher Spezifitaet (0,1,0) die seitliche
Polsterung von ".wrap" - Logo und Menueknopf klebten ab 401 px Breite am
Displayrand. Senkrecht und waagerecht muessen getrennt gesetzt werden. */
.top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-top:.8rem;padding-bottom:.8rem}
.brand{justify-self:start;display:flex;align-items:center;gap:0;font-size:1.25rem;font-weight:800;color:#b05cff;text-decoration:none;letter-spacing:-.02em}
.brand:hover{color:#A855F7}
.brand-logo{width:4.8594rem;height:2.3467rem;margin-bottom:-.2467rem;display:block;flex:none;object-fit:contain}
/* 1,05rem statt 1,4rem: seit die Kopfzeile ihre seitliche Polsterung wirklich
bekommt, hat die Linkleiste 1110 statt 1150 px Inhaltsbreite. Mit 1,4rem
brauchte die volle Liste 958 px bei 957,8 px Platz und brach zweizeilig um
(Kopfzeile 81 px hoch). 1,05rem laesst 44 px Reserve, Schriftgroesse bleibt. */
.nav-links{justify-self:center;display:flex;gap:1.05rem;align-items:center}
/* :not(.btn) ist wichtig: ".nav-links a" (0,1,1) schlaegt sonst ".btn-p" (0,1,0)
und faerbt die Button-Schrift grau -> Kontrast 2,2:1 auf dem violetten Verlauf. */
.nav-links a:not(.btn){font-size:.88rem;font-weight:600;color:#cbd5e1;text-decoration:none;transition:color .15s}
.nav-links a:not(.btn):hover{color:#fff}
.lang-menu{position:relative;justify-self:end}
.lang-trigger{width:2.65rem;height:2.65rem;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:.75rem;background:transparent;color:#e2e8f0;cursor:pointer;transition:background .15s,border-color .15s}
.lang-trigger:hover,.lang-trigger[aria-expanded="true"]{background:rgba(255,255,255,.06);border-color:var(--line)}
.lang-trigger .lang-flag,.lang-option .lang-flag{flex:none}
.lang-dropdown{position:absolute;right:0;top:calc(100% + .55rem);width:12.5rem;padding:.45rem 0;border:1px solid rgba(148,163,184,.22);border-radius:.9rem;background:rgba(15,15,30,.98);box-shadow:0 18px 50px rgba(0,0,0,.45);backdrop-filter:blur(14px);overflow:hidden;z-index:80}
.lang-dropdown[hidden]{display:none}
.lang-option{width:100%;display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;border:0;background:transparent;color:#cbd5e1;font:inherit;font-size:.86rem;font-weight:600;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.lang-option:hover,.lang-option[aria-current="true"]{background:rgba(139,92,246,.14);color:#fff}
.lang-check{margin-left:auto;color:#a78bfa;opacity:0}
.lang-option[aria-current="true"] .lang-check{opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.8rem;padding:.65rem 1.3rem;
font-size:.9rem;font-weight:700;text-decoration:none;transition:all .18s;border:1px solid transparent;cursor:pointer}
.btn svg{display:inline-block}
.btn-p{color:#fff;font-weight:800;background:linear-gradient(135deg,#6d28d9,#4338ca);box-shadow:0 8px 26px -8px rgba(109,40,217,.6)}
.btn-p:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-g{color:#e2e8f0;background:rgba(255,255,255,.05);border-color:var(--line)}
.btn-g:hover{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.4);color:#fff}
/* ---- Hero: Text und Box teilen die linke Kante ---- */
.hero{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:2.6rem 0 2.8rem}
.hero .demo{width:100%}
.hero .demo-stage{margin-top:1.5rem}
/* Kopfzeile: Headline links, Kennzahlen rechts auf gleicher Grundlinie */
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:#c4b5fd;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);border-radius:999px;padding:.35rem .8rem}
.eyebrow .dot{width:.45rem;height:.45rem;border-radius:50%;background:#a78bfa;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
h1{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.06;letter-spacing:-.035em;color:#fff;margin:.9rem 0 0;text-wrap:balance}
h1 .g{background:linear-gradient(90deg,#c4b5fd,#818cf8,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.06rem;line-height:1.6;color:var(--mut);max-width:38rem;margin-top:1rem}
/* Fließtext links, Buttons rechts – die Zeile spannt bis zur Boxkante */
/* 19.09.2026: Knoepfe stehen direkt unter dem Fliesstext, nicht mehr rechts
unter den Kennzahlen - der Hauptknopf war dort der kleinste von dreien und
konkurrierte mit Hinweis, Kennzahlen und Store-Abzeichen (9 Elemente). */
.hero-sub{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem;align-items:start;margin-top:1.1rem}
.hero-text{max-width:38rem}
.cta{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1.4rem}
.hero .cta .btn-p{padding:.85rem 1.6rem;font-size:1rem}
.hero .cta .btn-g{padding:.85rem 1.3rem;font-size:.95rem}
/* Store-Abzeichen: rechts unter den Kennzahlen, an derselben Kante buendig. */
.store-downloads{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;margin-top:.4rem}
.store-downloads-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin:0;text-align:right}
.store-badges{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;flex-wrap:nowrap}
/* 19.09.2026: Beide Abzeichen reagieren gleich. Der Apple-Knopf hatte weder
Hover noch Fokusrahmen und sah dadurch deaktiviert aus - er hatte bis
heute ja auch kein Ziel. ⚠️ `brightness` allein traegt hier nicht: beide
Flaechen sind schwarz (#050506 bzw. das schwarze Apple-SVG), eine
Aufhellung von Schwarz sieht man nicht. Der Schatten ist der Teil, der
den Zustand in beiden Designs wirklich zeigt. */
.store-google,.store-google:visited,.store-apple,.store-apple:visited{display:block;color:#fff;text-decoration:none;
border-radius:.55rem;transition:transform .18s,filter .18s,box-shadow .18s}
.store-google:hover,.store-apple:hover{transform:translateY(-2px);filter:brightness(1.12);
box-shadow:0 10px 22px -10px rgba(139,92,246,.6)}
.store-google:active,.store-apple:active{transform:translateY(0);box-shadow:0 4px 12px -8px rgba(139,92,246,.5)}
.store-google:focus-visible,.store-apple:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.play-badge{width:8.975rem;height:3rem;display:flex;align-items:center;gap:.5rem;padding:0 .65rem;color:#fff;background:#050506;border:1px solid #a6a6a6;border-radius:.45rem}
.play-badge svg{width:1.6rem;height:1.8rem;flex:none;display:block}
.play-badge-copy{display:flex;flex-direction:column;min-width:0;line-height:1;text-align:left}
.play-badge-copy small{font-size:.48rem;font-weight:500;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}
.play-badge-copy strong{font-size:1rem;font-weight:500;letter-spacing:-.035em;white-space:nowrap;margin-top:.16rem}
.store-apple{display:block;border-radius:.45rem}
.store-apple img{display:block;width:auto;height:3rem}
/* Kennzahlen: kompakt 2x2 rechts neben der Headline, bündig an der Boxkante */
.hero-meta{display:grid;grid-template-columns:repeat(2,auto);gap:.9rem 1.6rem;justify-content:end;padding-bottom:.4rem}
.hm{text-align:right}
.hm b{display:block;font-size:1.15rem;color:#fff;letter-spacing:-.01em;line-height:1.2}
.hm span{font-size:.74rem;color:var(--mut)}
/* ---- Hero-Auswahl: welcher Clip laeuft (Pendant zu den App-Karten unten) ---- */
.hero-picks{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.hero-pick{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.82rem;font-weight:600;
color:var(--mut);cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--line);
border-radius:999px;padding:.45rem .95rem;transition:color .18s,background .18s,border-color .18s}
.hero-pick svg{width:.95rem;height:.95rem;display:inline-block;flex:none}
.hero-pick:hover{color:#fff;border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.09)}
.hero-pick:focus-visible{outline:2px solid rgba(167,139,250,.7);outline-offset:2px}
.hero-pick.on{color:#fff;background:rgba(139,92,246,.18);border-color:rgba(167,139,250,.6)}
@media(max-width:560px){.hero-picks{gap:.4rem}.hero-pick{font-size:.76rem;padding:.38rem .75rem}}
/* ---- Browser-Rahmen für die Video-Slider (Hero + Office) ---- */
.demo{border-radius:1.25rem;border:1px solid rgba(167,139,250,.3);background:rgba(13,13,28,.86);
box-shadow:0 30px 90px -20px rgba(88,28,135,.6),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden}
.demo{position:relative}
/* Umschalt-Pfeile liegen AUSSERHALB der Karte im Rand DANEBEN - die Karte
behaelt ihre volle Breite (kein Padding-Lane, das sie schmaler machte). */
.demo-stage{position:relative}
.demo-stage .demo{margin-top:0}
.demo-arrow{position:absolute;top:calc(50% + 1rem);transform:translateY(-50%);z-index:5;width:2.7rem;height:2.7rem;border-radius:.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer;
background:rgba(10,10,21,.66);border:1px solid rgba(255,255,255,.16);color:#e2e8f0;transition:all .18s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.demo-arrow svg{width:1.15rem;height:1.15rem;display:inline-block}
.demo-arrow:hover{background:rgba(139,92,246,.3);border-color:rgba(167,139,250,.5)}
.demo-arrow.prev{left:-3.25rem}.demo-arrow.next{right:-3.25rem}
/* Unter ~1240px ist neben der Karte kein Platz -> Pfeile weg (Mobil/Tablet
brauchen sie nicht; Pillen + Wischen bleiben). */
@media(max-width:1240px){.demo-arrow{display:none}}
.demo-bar{display:flex;align-items:center;gap:.4rem;padding:.65rem .95rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.demo-bar i{width:.6rem;height:.6rem;border-radius:50%;display:block}
.demo-bar .u{margin-left:.55rem;font-size:.74rem;color:var(--mut)}
.demo-tag{margin-left:auto;font-size:.7rem;font-weight:700;color:#c4b5fd;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.35);border-radius:999px;padding:.16rem .6rem}
.hero-vid{display:block;width:100%;aspect-ratio:1280/720;object-fit:cover;background:#0a0a15}
/* Pause button of the clip sliders (WCAG 2.2.2): a 44x44 hit area in the browser bar. The negative
margins keep the bar as high as before; aria-pressed="true" means paused, the icon then shows play. */
.media-pause{flex:none;width:2.75rem;height:2.75rem;margin:-.8rem -.55rem -.8rem .15rem;display:inline-flex;align-items:center;justify-content:center;
border:1px solid transparent;border-radius:.75rem;background:transparent;color:#e2e8f0;cursor:pointer;position:relative;z-index:2;transition:background .15s,border-color .15s}
.media-pause:hover{background:rgba(255,255,255,.07);border-color:var(--line)}
.media-pause:focus-visible,.show-pause:focus-visible{outline:2px solid rgba(167,139,250,.8);outline-offset:-2px}
.media-pause svg,.show-pause svg{width:1rem;height:1rem;display:block}
.media-pause .ic-play,.show-pause .ic-play{display:none}
.media-pause[aria-pressed="true"] .ic-play,.show-pause[aria-pressed="true"] .ic-play{display:block}
.media-pause[aria-pressed="true"] .ic-pause,.show-pause[aria-pressed="true"] .ic-pause{display:none}
/* Chapter timeline of the clip sliders (Marcel 18.10.2026): ONE strip below the clip, one section per
clip, like story progress. It replaces the pick badges and the single-clip scrub bar: tap a section to
jump there, drag across the strip to scrub through all clips. Names under the sections from 900 px on;
narrower, only the tag in the window bar names the running clip. --f = filled share of a section. */
.media-chapters{display:flex;gap:4px;padding:.15rem .9rem .2rem;border-top:1px solid var(--line);background:rgba(255,255,255,.03);
touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.media-chapter{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.3rem;min-height:1.75rem;padding:.3rem 0;margin:0;
border:0;background:none;color:var(--mut);font:inherit;font-size:.7rem;line-height:1.2;text-align:left;cursor:pointer}
.media-chapter__bar{position:relative;display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.media-chapter__bar i{position:absolute;inset:0;background:#8b5cf6;transform-origin:left center;transform:scaleX(var(--f,0))}
.media-chapter__label{display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-chapter.is-on{color:#fff}
.media-chapter.is-on .media-chapter__label{font-weight:600}
.media-chapter:hover .media-chapter__bar{background:rgba(255,255,255,.34)}
.media-chapter:focus-visible{outline:2px solid rgba(167,139,250,.8);outline-offset:1px;border-radius:4px}
@media(min-width:900px){.media-chapters{padding:.2rem .9rem .3rem}.media-chapter__label{display:block}}
/* Press and hold on a clip pauses it, like a story; no save-image menu on a long press. */
.media-hold{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* ---- Sektionen ---- */
.sec{padding:3.4rem 0 1.2rem}
/* Beim Ankersprung tiefer einrasten, damit der Sticky-Header (~65px) den
.eyebrow-Badge nicht anschneidet (Eigen-Padding von 3.4rem reicht knapp nicht). */
.sec{scroll-margin-top:2rem}
.sec-head{text-align:center;max-width:42rem;margin:0 auto 2.2rem}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;color:#fff;margin-top:1rem}
.sec-head p{color:var(--mut);margin-top:.6rem;font-size:.97rem;line-height:1.65}
.rev{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rev.in{opacity:1;transform:none}
.plan-link{color:#c4b5fd;text-decoration:underline;text-underline-offset:2px}
/* ---- Feature-Cards (Chat-Kern) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.card{position:relative;border:1px solid var(--line);border-radius:1.1rem;padding:1.35rem;background:var(--card);transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden}
.card:hover{border-color:rgba(139,92,246,.4);transform:translateY(-3px);box-shadow:0 18px 44px -18px rgba(139,92,246,.35)}
.card .ic{width:2.6rem;height:2.6rem;border-radius:.8rem;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;
background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.3)}
.card .ic svg{width:1.3rem;height:1.3rem;color:#c4b5fd;display:inline-block}
.card h3{font-size:1rem;color:#fff;margin-bottom:.4rem}
.card p{font-size:.85rem;line-height:1.62;color:var(--mut)}
/* ---- Apps-Grid mit echten Screenshots ---- */
.app{position:relative;border:1px solid var(--line);border-radius:1.15rem;background:var(--card);transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden;cursor:zoom-in;padding:0;text-align:left;color:inherit;font:inherit}
.app-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0d0d1c;border-bottom:1px solid var(--line)}
.app-shot img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .35s ease}
.app:hover .app-shot img{transform:scale(1.04)}
.app-shot .zoom{position:absolute;right:.7rem;bottom:.7rem;width:2rem;height:2rem;border-radius:.6rem;display:flex;align-items:center;justify-content:center;
background:rgba(10,10,21,.72);border:1px solid rgba(255,255,255,.18);opacity:0;transition:opacity .2s}
.app-shot .zoom svg{width:1rem;height:1rem;color:#e2e8f0;display:inline-block}
.app:hover .app-shot .zoom{opacity:1}
.app-body{padding:1.05rem 1.15rem 1.2rem}
.app-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.app-head .ic{width:1.9rem;height:1.9rem;border-radius:.55rem;display:flex;align-items:center;justify-content:center;border:1px solid;flex:none}
.app-head .ic svg{width:1rem;height:1rem;display:inline-block}
.app h3{font-size:.98rem;color:#fff}
.app p{font-size:.84rem;line-height:1.6;color:var(--mut)}
.app .tag{position:absolute;top:.85rem;left:.85rem;z-index:2;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#e2e8f0;
border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.22rem .6rem;background:rgba(10,10,21,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.app.c-sky .ic{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.35)}.app.c-sky .ic svg{color:var(--sky)}
.app.c-sky:hover{border-color:rgba(56,189,248,.45);box-shadow:0 18px 44px -18px rgba(56,189,248,.3);transform:translateY(-3px)}
.app.c-cyan .ic{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.35)}.app.c-cyan .ic svg{color:var(--cyan)}
.app.c-cyan:hover{border-color:rgba(34,211,238,.45);box-shadow:0 18px 44px -18px rgba(34,211,238,.3);transform:translateY(-3px)}
.app.c-amber .ic{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.35)}.app.c-amber .ic svg{color:var(--amber)}
.app.c-amber:hover{border-color:rgba(251,191,36,.45);box-shadow:0 18px 44px -18px rgba(251,191,36,.28);transform:translateY(-3px)}
.app.c-emerald .ic{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35)}.app.c-emerald .ic svg{color:var(--emerald)}
.app.c-emerald:hover{border-color:rgba(52,211,153,.45);box-shadow:0 18px 44px -18px rgba(52,211,153,.28);transform:translateY(-3px)}
.app.c-vio .ic{background:rgba(139,92,246,.13);border-color:rgba(139,92,246,.35)}.app.c-vio .ic svg{color:var(--vioL)}
.app.c-vio:hover{border-color:rgba(139,92,246,.45);box-shadow:0 18px 44px -18px rgba(139,92,246,.32);transform:translateY(-3px)}
.app.c-indigo .ic{background:rgba(129,140,248,.12);border-color:rgba(129,140,248,.35)}.app.c-indigo .ic svg{color:var(--indigo)}
.app.c-indigo:hover{border-color:rgba(129,140,248,.45);box-shadow:0 18px 44px -18px rgba(129,140,248,.3);transform:translateY(-3px)}
.app.c-pink .ic{background:rgba(244,114,182,.1);border-color:rgba(244,114,182,.35)}.app.c-pink .ic svg{color:var(--pink)}
.app.c-pink:hover{border-color:rgba(244,114,182,.45);box-shadow:0 18px 44px -18px rgba(244,114,182,.28);transform:translateY(-3px)}
/* ---- App-Showcase (Auto-Slider) ---- */
.show-stage{position:relative;border-radius:1.3rem;overflow:hidden;border:1px solid rgba(167,139,250,.32);cursor:zoom-in;
background:radial-gradient(120% 140% at 50% 0%,rgba(139,92,246,.1),transparent 60%),#0c0c1a;
height:clamp(420px,62vh,640px);box-shadow:0 34px 100px -28px rgba(88,28,135,.6)}
.show-imgs{position:absolute;inset:0}
.show-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:1.4rem 1.4rem 6.4rem;opacity:0;transform:scale(.985);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.show-imgs img.on{opacity:1;transform:none}
.show-info{position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;display:flex;align-items:center;gap:.85rem;
background:rgba(10,10,21,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.12);border-radius:1rem;padding:.8rem 1rem;pointer-events:none}
.show-ic{width:2.4rem;height:2.4rem;border-radius:.7rem;display:flex;align-items:center;justify-content:center;border:1px solid;flex:none}
.show-ic svg{width:1.2rem;height:1.2rem;display:inline-block}
.show-txt{min-width:0}
.show-line{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.show-info h3{font-size:1.02rem;color:#fff}
.show-info em{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#cbd5e1;
border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.18rem .55rem;background:rgba(255,255,255,.05)}
.show-info p{font-size:.85rem;line-height:1.55;color:#b6c0d4;margin-top:.25rem}
.show-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:2.7rem;height:2.7rem;border-radius:.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer;
background:rgba(10,10,21,.66);border:1px solid rgba(255,255,255,.16);color:#e2e8f0;transition:all .18s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.show-arrow svg{width:1.15rem;height:1.15rem}
.show-arrow:hover{background:rgba(139,92,246,.3);border-color:rgba(167,139,250,.5)}
.show{position:relative}
.show-arrow.prev{left:-3.25rem}.show-arrow.next{right:-3.25rem}
/* Wie Hero-/Office-Slider: Pfeile neben der Karte; unter ~1240px kein Platz -> weg (Pillen/App-Karten + Wischen bleiben). */
@media(max-width:1240px){.show-arrow{display:none}}
.show-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.04);z-index:6}
.show-prog i{display:block;height:100%;width:0;background:rgba(167,139,250,.38)}
.show-prog i.run{animation:prog var(--dur,6.5s) linear forwards}
@keyframes prog{to{width:100%}}
/* Pause button of the tour: top right on the stage; it stops the click from opening the lightbox. */
.show-pause{position:absolute;top:.8rem;right:.8rem;z-index:7;width:2.75rem;height:2.75rem;border-radius:.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer;
background:rgba(10,10,21,.66);border:1px solid rgba(255,255,255,.16);color:#e2e8f0;transition:background .18s,border-color .18s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.show-pause:hover{background:rgba(139,92,246,.3);border-color:rgba(167,139,250,.5)}
@media(max-width:700px){
.show-stage{height:clamp(340px,52vh,480px)}
.show-imgs img{padding:.9rem .9rem 7.2rem}
.show-info{left:.7rem;right:.7rem;bottom:.7rem;padding:.65rem .8rem}
.show-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* ---- Lightbox ---- */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:2rem;background:rgba(5,5,12,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb.open{display:flex}
.lb img{max-width:min(1100px,94vw);max-height:88vh;border-radius:1rem;border:1px solid rgba(167,139,250,.35);box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.lb .x{position:absolute;top:1.2rem;right:1.4rem;width:2.6rem;height:2.6rem;border-radius:.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.lb .x svg{width:1.2rem;height:1.2rem;color:#fff;display:inline-block}
.lb .cap{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);font-size:.85rem;color:#cbd5e1;background:rgba(10,10,21,.7);border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;white-space:nowrap}
/* ---- Video-Sektion ---- */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem}
.vid{border:1px solid var(--line);border-radius:1.15rem;overflow:hidden;background:var(--card);transition:transform .2s,border-color .2s,box-shadow .2s}
.vid:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.4);box-shadow:0 18px 44px -18px rgba(139,92,246,.3)}
.vid video{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#0d0d1c}
.vid .vb{padding:1rem 1.15rem 1.15rem}
.vid h3{font-size:.95rem;color:#fff;margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}
.vid h3 .live{width:.5rem;height:.5rem;border-radius:50%;background:#34d399;animation:pulse 2s ease-in-out infinite;display:inline-block}
.vid p{font-size:.83rem;line-height:1.6;color:var(--mut)}
/* ---- Cloud & Office: Punkte unter dem Slider ---- */
.ticks{margin-top:1.2rem;display:flex;flex-direction:column;gap:.7rem}
.ticks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2rem;margin-top:1.8rem}
.tick{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--txt);line-height:1.55}
.tick svg{width:1.15rem;height:1.15rem;color:var(--emerald);flex:none;margin-top:.1rem;display:inline-block}
.tick span b{color:#fff}
@media(max-width:760px){.ticks-grid{grid-template-columns:1fr;gap:.75rem}}
/* ---- Schritte ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{border:1px solid var(--line);border-radius:1.1rem;padding:1.5rem 1.35rem;background:var(--card)}
.step .num{width:2.2rem;height:2.2rem;border-radius:.7rem;display:flex;align-items:center;justify-content:center;font-weight:800;color:#c4b5fd;
background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.35);margin-bottom:.9rem;font-size:.95rem}
.step h3{font-size:1rem;color:#fff;margin-bottom:.4rem}
.step p{font-size:.86rem;line-height:1.62;color:var(--mut)}
/* ---- Pricing ---- */
/* ---- CTA-Box & Footer ---- */
.cta-box{margin:3rem 0 2.6rem;text-align:center;border-radius:1.5rem;padding:3rem 1.5rem;border:1px solid rgba(139,92,246,.32);position:relative;overflow:hidden;
background:radial-gradient(120% 150% at 50% 0%,rgba(139,92,246,.2),transparent 60%),rgba(255,255,255,.02)}
.cta-box h2{font-size:clamp(1.4rem,3vw,2rem);color:#fff;margin-bottom:.6rem;letter-spacing:-.02em}
.cta-box p{color:var(--mut);margin-bottom:1rem;font-size:.97rem}
.cta-ex{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 auto 1.6rem;max-width:46rem}
.cta-ex span{font-size:.82rem;color:#c4b5fd;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.32);border-radius:999px;padding:.4rem .85rem;line-height:1.3}
/* ---- Footer: gleicher Aufbau wie die Aionity-Startseite (18.07., Marcels Wunsch —
Aionity ist die Firma hinter Aiory): 3 Spalten Produkt/Rechtliches/Social,
darunter Copyright + Markenhinweis. Optik in der Farbwelt dieser Seite. ---- */
footer{border-top:1px solid var(--line);padding:2.4rem 0 0;margin-top:.5rem}
.ft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-evenly;gap:2rem 3rem;padding-bottom:2rem}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.ft-col h4{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 .55rem}
.ft-col a{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--mut);text-decoration:none;border-radius:6px;padding:.12rem .4rem;margin-left:-.4rem;transition:color .15s,background .15s,transform .2s}
.ft-col a:hover{color:#fff;background:rgba(255,255,255,.04);transform:translateX(-2px)}
.ft-col a svg{width:.95rem;height:.95rem;flex:none}
/* Social-Links liegen in einer eigenen Reihe – am Schreibtisch untereinander
wie bisher, auf dem Handy nebeneinander als Symbolknöpfe (s. u.). */
.ft-soc-row{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.ft-bar{border-top:1px solid rgba(255,255,255,.05);padding:1.1rem 0 1.7rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.4rem;flex-wrap:wrap;font-size:.78rem;color:var(--mut)}
.ft-bar a{color:#a78bfa;text-decoration:none}
.ft-bar a:hover{color:#c4b5fd}
/* ---- Footer auf dem Handy (27.07.): vorher 13 Links in EINER Spalte
untereinander – 620 px hoch, 20 px hohe Trefferflächen und rechts zwei
Drittel leere Fläche. Jetzt zwei Spalten, Daumen-taugliche Zeilen und
Social als Symbolreihe. ---- */
@media(max-width:560px){
footer{padding-top:2rem}
.ft-grid{grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch;
align-items:start;gap:1.4rem 1rem;padding-bottom:1.5rem}
/* „Produkt" hat 6 Einträge, „Rechtliches" nur 4 – Social füllt die Lücke
darunter, statt eine dritte Reihe anzufangen. Beide Spalten enden
dadurch fast auf gleicher Höhe. */
.ft-col:nth-child(1){grid-column:1;grid-row:1/span 2}
.ft-col:nth-child(2){grid-column:2;grid-row:1}
.ft-col{gap:0}
.ft-col h4{font-size:.72rem;margin-bottom:.15rem}
/* ~44 px Trefferhöhe (Apple/Google-Richtwert) statt 20 px. */
.ft-col a{font-size:.9rem;min-height:2.75rem;padding:.6rem .55rem;margin-left:-.55rem;
align-self:stretch;line-height:1.25}
.ft-col a:hover{transform:none}
/* Symbolreihe über die volle Breite; Beschriftung steckt im aria-label. */
.ft-social{grid-column:2;grid-row:2}
.ft-soc-row{flex-direction:row;flex-wrap:wrap;gap:.6rem;margin-top:.45rem}
.ft-social a{width:2.9rem;height:2.9rem;min-height:0;padding:0;margin:0;flex:none;
justify-content:center;border:1px solid var(--line);border-radius:12px;
background:rgba(255,255,255,.03)}
.ft-social a svg{width:1.15rem;height:1.15rem}
.ft-social a:active{background:rgba(255,255,255,.08);color:#fff}
.ft-social a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ft-bar{flex-direction:column;align-items:flex-start;gap:.5rem;padding:1rem 0 1.6rem}
/* Der Partnerhinweis ist Kleingedrucktes – er soll die Links nicht überstrahlen. */
.ft-bar span:last-child{font-size:.72rem;line-height:1.5;opacity:.75}
}
@media(max-width:340px){
/* Bei 320 px passen „Automatisierung"/„Cloud & Office" sonst knapp nicht.
:not(.ft-social), sonst erbt die Symbolreihe den negativen Rand. */
.ft-col:not(.ft-social) a{font-size:.84rem;padding-left:.45rem;margin-left:-.45rem}
.ft-soc-row{gap:.45rem}
.ft-social a{width:2.7rem;height:2.7rem}
.store-badges{gap:.25rem}
.play-badge{width:8.137rem;height:2.72rem;padding:0 .55rem;gap:.42rem}
.play-badge svg{width:1.45rem;height:1.65rem}
.play-badge-copy small{font-size:.43rem}
.play-badge-copy strong{font-size:.9rem}
.store-apple img{height:2.72rem}
}
/* ---- Was ist Aiory (3 Pfeiler) ---- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.why .card{padding:1.6rem 1.5rem}
.why .num{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:.6rem;font-size:.8rem;font-weight:800;color:#c4b5fd;background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.35);margin-bottom:.8rem}
.why h3{font-size:1.05rem}
.why p{font-size:.88rem}
.why .ex{margin-top:.8rem;font-size:.8rem;color:#c4b5fd;background:rgba(139,92,246,.09);border:1px dashed rgba(139,92,246,.35);border-radius:.7rem;padding:.55rem .75rem;line-height:1.5}
.why .ex b{color:#e2e8f0;font-weight:600}
@media(max-width:960px){.why{grid-template-columns:1fr}}
/* ---- App-Katalog: klickbare Karten, steuern die Bühne oben ---- */
/* App-Auswahl unter der Bühne: dieselben Pillen wie die Clip-Leisten im Hero
(.hero-pick), nur mit eigenem Abstand und farbigem App-Icon. */
#app-catalog{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.4rem}
#app-catalog .pick-ic{display:inline-flex;align-items:center;flex:none}
#app-catalog .pick-ic svg{width:.95rem;height:.95rem;display:block}
/* ---- FAQ ---- */
.faq{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.faq details{border:1px solid var(--line);border-radius:1rem;background:var(--card);overflow:hidden}
.faq details[open]{border-color:rgba(139,92,246,.4)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;font-size:.92rem;font-weight:700;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.2rem;font-weight:600;color:#a78bfa;transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 1.2rem 1.1rem;font-size:.86rem;line-height:1.65;color:var(--mut)}
.faq .fa a{color:#a78bfa;text-decoration:none}
/* Link to the help pages (/help, the Aiory wiki) under the questions. */
.faq-more{max-width:46rem;margin:1.3rem auto 0;text-align:center;font-size:.92rem}
.faq-more a{color:#a78bfa;font-weight:700;text-decoration:none}
.faq-more a::after{content:" →"}
.faq-more a:hover{text-decoration:underline}
/* ---- Responsive ---- */
@media(max-width:960px){
/* Kein Platz für zwei Spalten: Kopfzeile und Textzeile stapeln, Kante bleibt links */
.hero{padding-top:2rem}
/* 19.09.2026: Die Hero-Huellen loesen sich auf (display:contents), damit
sich die Bausteine neu ordnen lassen: Titel, Text+Knopf, Demo, Auswahl,
erst dann Kennzahlen und Store-Abzeichen. Vorher lag der erste Knopf bei
541 px und das Produktbild erst bei 867 px - auf dem zweiten Bildschirm. */
.hero-top,.hero-sub{display:contents}
.hero-title{order:1}
.hero-text{order:2}
.store-downloads{order:3;flex-direction:row;align-items:center;justify-content:flex-start;
flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}
.store-downloads-label{text-align:left}
.store-badges{justify-content:flex-start}
.hero .demo-stage{order:4}
.hero-picks{order:5}
.hero-meta{order:6;justify-content:flex-start;padding-bottom:0;margin-top:1.6rem}
.hm{text-align:left}
.cta{justify-content:flex-start}
.steps{grid-template-columns:1fr}
}
/* Die vollständige Linkliste brauchte in Originalgröße ~1050 px und schob die
Sprachauswahl bis zu 88 px über den rechten Rand – die Seite ließ sich
zwischen 961 und 1049 px seitwärts scrollen (u.a. iPad quer, kleine
Notebook-Fenster). Zwei Stufen statt einer:
bis 1160 px kompaktere Linkleiste, Links brechen nie um
bis 1019 px die langen Abschnittslinks weichen ganz
⚠️ 19.09.2026: die Grenze lag bei 999 px und war 20 px zu frueh - bei
genau 1000-1019 px waren die Links wieder da, die Kopfzeile aber 9 px
zu breit (gemessen scrollWidth 1009 bei 1000 px Sichtfeld, Ueberstand an
`.top-right`). Die Seite liess sich dort seitwaerts scrollen. */
@media(max-width:1160px){
.nav-links{gap:.7rem}
.nav-links a{white-space:nowrap}
.nav-links a:not(.btn){font-size:.8rem}
.top-in .btn{padding:.6rem 1rem;font-size:.84rem}
}
/* ---- Menü-Schublade fürs Handy ----
Bis 1019 px ist die Linkleiste schlicht ausgeblendet: auf dem Handy gab es
dadurch KEINE Navigation mehr - weder Startseite noch Überblick,
Funktionen, Apps oder FAQ. Jetzt wandern alle Links in eine Schublade
hinter dem Menüknopf. */
.top-right{justify-self:end;display:flex;align-items:center;gap:.5rem}
.top-right .btn{white-space:nowrap;flex:none}
/* Der Helligkeits-Umschalter teilt sich die Klasse .nav-toggle mit dem
Menueknopf fuers Handy - und erbte damit dessen Rahmen. In der Leiste
steht er aber neben dem Sprachknopf, der KEINEN traegt; bei Markets ist
der Mond ebenfalls rahmenlos. Deshalb hier auf die Optik von
.lang-trigger ziehen: Flaeche und Rahmen erst beim Ueberfahren.
Angesprochen wird bewusst nur die ID - der Menueknopf fuers Handy
BEHAELT seinen Rahmen, er braucht ihn als Trefferflaeche.
(Marcel, 16.08.2026) */
#aiory-theme-toggle{display:inline-flex;border-color:transparent;background:transparent}
#aiory-theme-toggle:hover{background:rgba(255,255,255,.06);border-color:var(--line)}
html.theme-light #aiory-theme-toggle:hover{background:rgba(15,23,42,.06)}
#aiory-theme-toggle .ic-sonne{display:none}
html.theme-light #aiory-theme-toggle .ic-mond{display:none}
html.theme-light #aiory-theme-toggle .ic-sonne{display:block}
#aiory-theme-toggle svg{width:1.15rem;height:1.15rem}
.nav-toggle{display:none;width:2.65rem;height:2.65rem;align-items:center;justify-content:center;flex:none;
border:1px solid var(--line);border-radius:.75rem;background:transparent;color:#e2e8f0;cursor:pointer;
transition:background .15s,border-color .15s}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.4)}
.nav-toggle svg{width:1.25rem;height:1.25rem;display:block}
.nav-toggle .ic-x{display:none}
.nav-toggle[aria-expanded="true"] .ic-x{display:block}
.nav-toggle[aria-expanded="true"] .ic-menu{display:none}
.nav-mobile{display:none;border-top:1px solid var(--line);background:#0a0a15;
max-height:calc(100vh - var(--navbar-height));overflow-y:auto}
.nav-mobile.open{display:block}
.nav-mobile a{display:block;padding:.85rem 0;font-size:.95rem;font-weight:600;color:#cbd5e1;
text-decoration:none;border-bottom:1px solid var(--line);transition:color .15s}
.nav-mobile a:last-child{border-bottom:0}
.nav-mobile a:hover,.nav-mobile a:focus-visible{color:#fff}
@media(max-width:1019px){
/* Alle Textlinks in die Schublade; oben bleiben Marke, "Zu Aiory",
Sprache und Menüknopf. */
.nav-links a:not(.btn){display:none}
.nav-toggle{display:inline-flex}
}
@media(max-width:480px){
.top-in{grid-template-columns:auto 1fr auto;gap:.55rem}
.nav-links{justify-self:end;gap:.55rem}
.hero-meta{gap:1.1rem}
.hm b{font-size:1.05rem}
}
/* ────────────────────────────────────────────────────────────────────
Schmale Geräte – ausgelegt bis hinunter auf 320 px (iPhone SE 1.
Generation, Galaxy Fold zugeklappt). Alles darüber bleibt wie gehabt.
──────────────────────────────────────────────────────────────────── */
@media(max-width:480px){
/* Weniger Leerraum – bei 320 px war die Seite 12.900 px lang. */
.sec{padding:2.6rem 0 1rem}
.sec-head{margin-bottom:1.7rem}
.hero{padding:1.6rem 0 2rem}
/* Die drei Hero-Knöpfe standen unterschiedlich breit untereinander.
Volle Breite gibt eine ruhige Leiste und ~48 px Trefferhöhe. */
.hero .cta{width:100%;gap:.6rem}
.hero .cta .btn{width:100%;min-height:3rem;padding:.8rem 1.1rem}
/* Store-Zeile mittig (Marcel, 20.09.2026: „aiory app herunterladen in die
mitte machen auf mobile?“). Sie stand linksbuendig unter zwei Knoepfen,
die ab hier die VOLLE Breite haben und ihre Beschriftung mittig tragen -
die linke Kante darunter brach die Achse. Gilt bewusst nur in diesem
Block: erst ab hier sind die Knoepfe breit, darueber stehen sie links
und die Store-Zeile gehoert an dieselbe Kante.
`width:100%` auf beide Teile, damit sie in der `flex-wrap`-Zeile
untereinander stehen und JEDER fuer sich mittig sitzt. */
.store-downloads{justify-content:center}
.store-downloads-label{width:100%;text-align:center}
.store-badges{width:100%;justify-content:center}
/* Deutsche Langwörter reißen bei ~290 px Zeilenbreite große Löcher. */
.lead,.sec-head p,.faq .fa,.why p,.tick span{hyphens:auto;-webkit-hyphens:auto}
}
/* Buehne im Hochformat, sobald der Handy-Clipsatz laeuft (Klasse setzt das
Skript). Die Aufnahme ist 390x800 - mit dem 16:9-Kasten wuerde
object-fit:cover Kopfzeile und Eingabeleiste wegschneiden. */
@media(max-width:480px){
.demo-hoch .hero-vid{aspect-ratio:390/800}
.demo-hoch .demo{max-width:22rem;margin-left:auto;margin-right:auto}
}
@media(max-width:400px){
/* Ebenfalls keine Kurzform: "padding:0 1.1rem" haette die senkrechte
Polsterung von ".top-in" wieder auf 0 gesetzt (Kopfzeile nur 38 px hoch). */
.wrap{padding-left:1.1rem;padding-right:1.1rem}
/* Topbar: „Zu Aiory" brach zweizeilig um und die Zeile wurde 72 px hoch.
Marke, Link und Knopf schrumpfen gemeinsam, damit "Preise" bleiben kann. */
.top-in{gap:.4rem}
.brand{font-size:1.05rem;gap:0}
.brand-logo{width:3.48rem;height:1.68rem;margin-bottom:-.18rem}
.nav-links{gap:.45rem}
.nav-links a:not(.btn){font-size:.82rem}
.top-in .btn{padding:.5rem .8rem;font-size:.8rem;white-space:nowrap;border-radius:.65rem}
.lang-trigger,.nav-toggle{width:2.3rem;height:2.3rem;border-radius:.6rem}
.top-right{gap:.35rem}
h1{font-size:1.85rem}
.lead{font-size:1rem}
.hero-meta{gap:.85rem 1.1rem}
.hm span{font-size:.72rem}
/* Picks under the stages: up to 10 (hero), 6 (office) and 15 (tour, R11 dropped) pills wrap into calm rows. */
.hero-picks,#app-catalog{gap:.4rem}
.hero-pick{font-size:.74rem;padding:.42rem .62rem;gap:.35rem}
.demo-bar{padding:.5rem .7rem;gap:.3rem}
.demo-bar .u{margin-left:.4rem;font-size:.68rem}
.demo-bar i{width:.5rem;height:.5rem}
.why .card{padding:1.2rem 1.1rem}
.faq summary{padding:.85rem 1rem;font-size:.88rem;gap:.6rem}
.faq .fa{padding:0 1rem 1rem}
}
/* Schrift auf Akzentflaechen bleibt WEISS: der violette Verlauf ist in
beiden Designs gleich, mein Umsetzer hat #fff aber pauschal gedreht -
dunkle Schrift auf Violett (gemessen: rgb(15,23,42) auf #6d28d9). */
html.theme-light .btn-p,
html.theme-light .btn-p * { color: #fff !important; }
/* Zwei Resttexte aus dem Suchlauf: 3,86:1 und 4,20:1. */
html.theme-light .u { color: #475569 !important; }
html.theme-light .hero-pick { color: #475569 !important; }
/* Vorschaurahmen: die einzigen zwei Flaechen, die nach dem Hell-Durchlauf
noch dunkel waren (gemessen). Sie umrahmen die Produktvideos - hell nur
sinnvoll, wenn auch die Clips hell sind (--hell im Rekorder). */
html.theme-light .demo { background: rgba(248,250,252,.86) !important; }
html.theme-light #show-stage { background: #eef2f7 !important; }
html.theme-light .demo-bar { background: #e2e8f0 !important; }
/* ══ Helles Design der Startseite (16.08.2026) ═══════════════════
Erzeugt aus den eigenen Regeln dieser Seite: helle Schrift wird
dunkel, dunkler Grund hell, weisse Schleier werden dunkle. Akzent-
violett bleibt. Steht am ENDE des Blattes, gewinnt also bei
gleicher Spezifitaet gegen die Ausgangsregel. */
html.theme-light { --vioL: #6d28d9; --txt: #1e293b; --mut: #64748b; --line: rgba(15,23,42,.09); --card: rgba(15,23,42,.028); }
html.theme-light body { background: #f8fafc; }
html.theme-light .bg::after { background-image: radial-gradient(rgba(15,23,42,.055) 1px,transparent 1px); }
html.theme-light /* ---- Topbar ---- */
.top { background: #f8fafc; }
html.theme-light /* :not(.btn) ist wichtig: ".nav-links a" (0, html.theme-light 1, html.theme-light 1) schlaegt sonst ".btn-p" (0, html.theme-light 1, html.theme-light 0)
und faerbt die Button-Schrift grau -> Kontrast 2, html.theme-light 2:1 auf dem violetten Verlauf. */
.nav-links a:not(.btn) { color: #334155; }
html.theme-light .nav-links a:not(.btn):hover { color: #0f172a; }
html.theme-light .lang-trigger { color: #1e293b; }
html.theme-light .lang-trigger:hover, html.theme-light .lang-trigger[aria-expanded="true"] { background: rgba(15,23,42,.06); }
html.theme-light .lang-option { color: #334155; }
html.theme-light .lang-option:hover, html.theme-light .lang-option[aria-current="true"] { color: #0f172a; }
html.theme-light .lang-check { color: #6d28d9; }
html.theme-light .btn-p { color: #0f172a; }
html.theme-light .btn-g { color: #1e293b; background: rgba(15,23,42,.05); }
html.theme-light .btn-g:hover { color: #0f172a; }
html.theme-light .eyebrow { color: #5b21b6; }
html.theme-light .eyebrow .dot { background: #6d28d9; }
html.theme-light h1 { color: #0f172a; }
html.theme-light h1 .g { background: linear-gradient(90deg,#5b21b6,#818cf8,#38bdf8); }
html.theme-light .hm b { color: #0f172a; }
html.theme-light .hero-pick { background: rgba(15,23,42,.04); }
html.theme-light .hero-pick:hover { color: #0f172a; }
html.theme-light .hero-pick.on { color: #0f172a; }
html.theme-light /* ---- Browser-Rahmen für die Video-Slider (Hero + Office) ---- */
.demo { box-shadow: 0 30px 90px -20px rgba(88,28,135,.6),0 0 0 1px rgba(15,23,42,.02) inset; }
html.theme-light .demo-arrow { background: rgba(248,250,252,.66); border: 1px solid rgba(15,23,42,.16); color: #1e293b; }
html.theme-light /* Unter ~1240px ist neben der Karte kein Platz -> Pfeile weg (Mobil/Tablet
brauchen sie nicht; Pillen + Wischen bleiben). */
.demo-bar { background: rgba(15,23,42,.03); }
html.theme-light .demo-tag { color: #5b21b6; }
html.theme-light .media-pause { color: #1e293b; }
html.theme-light .media-pause:hover { background: rgba(15,23,42,.06); }
html.theme-light .media-chapters { background: #e2e8f0; }
html.theme-light .media-chapter { color: #475569; }
html.theme-light .media-chapter.is-on { color: #0f172a; }
html.theme-light .media-chapter__bar { background: rgba(15,23,42,.16); }
html.theme-light .media-chapter:hover .media-chapter__bar { background: rgba(15,23,42,.26); }
html.theme-light .media-chapter__bar i { background: #7c3aed; }
html.theme-light .show-pause { background: rgba(248,250,252,.78); border: 1px solid rgba(15,23,42,.16); color: #1e293b; }
html.theme-light .hero-vid { background: #f8fafc; }
html.theme-light .sec-head h2 { color: #0f172a; }
html.theme-light .card .ic svg { color: #5b21b6; }
html.theme-light .card h3 { color: #0f172a; }
html.theme-light .app-shot .zoom { background: rgba(248,250,252,.72); border: 1px solid rgba(15,23,42,.18); }
html.theme-light .app-shot .zoom svg { color: #1e293b; }
html.theme-light .app h3 { color: #0f172a; }
html.theme-light .app .tag { color: #1e293b; border: 1px solid rgba(15,23,42,.16); background: rgba(248,250,252,.66); }
html.theme-light .show-info { background: rgba(248,250,252,.78); border: 1px solid rgba(15,23,42,.12); }
html.theme-light .show-info h3 { color: #0f172a; }
html.theme-light .show-info em { color: #334155; border: 1px solid rgba(15,23,42,.16); background: rgba(15,23,42,.05); }
html.theme-light .show-arrow { background: rgba(248,250,252,.66); border: 1px solid rgba(15,23,42,.16); color: #1e293b; }
html.theme-light /* Wie Hero-/Office-Slider: Pfeile neben der Karte; unter ~1240px kein Platz -> weg (Pillen/App-Karten + Wischen bleiben). */
.show-prog { background: rgba(15,23,42,.04); }
html.theme-light .lb .x { background: rgba(15,23,42,.07); border: 1px solid rgba(15,23,42,.18); }
html.theme-light .lb .x svg { color: #0f172a; }
html.theme-light .lb .cap { color: #334155; background: rgba(248,250,252,.7); }
html.theme-light .vid h3 { color: #0f172a; }
html.theme-light .tick span b { color: #0f172a; }
html.theme-light .step .num { color: #5b21b6; }
html.theme-light .step h3 { color: #0f172a; }
/* ---- CTA-Box & Footer ---- */
html.theme-light .cta-box { background: radial-gradient(120% 150% at 50% 0%,rgba(139,92,246,.2),transparent 60%),rgba(15,23,42,.02); }
html.theme-light .cta-box h2 { color: #0f172a; }
html.theme-light .cta-ex span { color: #5b21b6; }
html.theme-light .ft-col h4 { color: #0f172a; }
html.theme-light .ft-col a:hover { color: #0f172a; background: rgba(15,23,42,.04); }
html.theme-light .ft-bar { border-top: 1px solid rgba(15,23,42,.05); }
html.theme-light .ft-bar a { color: #6d28d9; }
html.theme-light .ft-bar a:hover { color: #5b21b6; }
html.theme-light .why .num { color: #5b21b6; }
html.theme-light .why .ex { color: #5b21b6; }
html.theme-light .why .ex b { color: #1e293b; }
html.theme-light .faq summary { color: #0f172a; }
html.theme-light .faq summary::after { color: #6d28d9; }
html.theme-light .faq .fa a { color: #6d28d9; }
html.theme-light .faq-more a { color: #6d28d9; }
html.theme-light .nav-toggle { color: #1e293b; }
html.theme-light .nav-mobile { background: #f8fafc; }
html.theme-light .nav-mobile a { color: #334155; }
html.theme-light .nav-mobile a:hover, html.theme-light .nav-mobile a:focus-visible { color: #0f172a; }
/* 19.09.2026: Hell-Kontraste unter 4,5:1 nachgezogen - App-Beschreibung im
Rundgang (1,75:1), Planhinweis-Link (1,76:1), Store-Beschriftung (2,45:1);
das Sprachmenue blieb im hellen Design ein dunkles Fenster. */
html.theme-light .show-info p { color: #475569; }
html.theme-light .plan-link { color: #6d28d9; }
html.theme-light .store-downloads-label { color: #475569; }
html.theme-light .lang-dropdown { background: rgba(248,250,252,.98); border-color: rgba(15,23,42,.12); box-shadow: 0 18px 50px rgba(15,23,42,.18); }
@media(max-width:560px) {
html.theme-light .ft-social a { background: rgba(15,23,42,.03); }
html.theme-light .ft-social a:active { background: rgba(15,23,42,.08); color: #0f172a; }
}