/* Apps-Showcase (/apps): Produktdemo Browser, iPhone/Android und Apple Watch,
   inszeniert als Abfolge von Akten.
   Baut auf css/landing.css auf (Farbvariablen, .container, .btn, .reveal).
   Alle Geraeterahmen sind eigene, neutrale Zeichnungen — keine Hersteller-
   Produktbilder (Marken-/Bildrechte).

   Android-Anmutung kommt bewusst NICHT ueber die Schriftart: Roboto ist auf
   macOS und Windows nicht installiert und fiele auf dieselbe Schrift wie iOS
   zurueck. Unterschieden wird ueber Form und Farbe — Material-Surfaces,
   groessere Radien, Pill-Indikator, FAB und die Drei-Tasten-Navigationsleiste. */

/* Nur fuer Screenreader: Bedienhinweise hinter dem sichtbaren Buttontext. */
.ax-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ax{--ax-night:#0b1322;--ax-night-2:#131f36;--ax-line:rgba(255,255,255,.09);--ax-teal:#0d9488;--ax-run:#e8a020;--ax-text-dim:#aab5c9}
.ax *{box-sizing:border-box}
.ax h1,.ax h2,.ax h3{hyphens:manual;-webkit-hyphens:manual;text-wrap:balance}
.ax .tnum{font-variant-numeric:tabular-nums}

/* ── Hero: die Buehne ─────────────────────────────────────────── */
.ax-hero{background:radial-gradient(120% 80% at 70% 0%,#1c2b4a 0%,var(--ax-night) 55%);color:#fff;padding:7rem 2.5rem 0;position:relative;overflow:hidden}
.ax-hero .container{position:relative}
.ax-eyebrow{color:var(--amber);font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .9rem}
.ax-hero h1{color:#fff;font-size:clamp(2.1rem,4.8vw,3.9rem);max-width:19ch;hyphens:none;-webkit-hyphens:none;text-wrap:balance;letter-spacing:-.03em;line-height:1.06;margin:0 0 1.25rem}
.ax-hero-lead{max-width:58ch;color:#cfd8e8;font-size:1.15rem;line-height:1.65;font-weight:300;margin:0}
.ax-hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;align-items:center}
.ax-hero-note{color:var(--ax-text-dim);font-size:.92rem}
.ax-hero .btn-outline,.ax-btn-light{color:#fff;border-color:rgba(255,255,255,.32)}
.ax-hero .btn-outline:hover,.ax-btn-light:hover{background:rgba(255,255,255,.1);border-color:#fff}

.ax-controls{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:1.5rem 0 0}
.ax-seg{display:inline-flex;padding:4px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--ax-line)}
.ax-seg button{appearance:none;border:0;background:transparent;color:#d3dbe9;font:600 .95rem var(--ff-b);padding:.6rem 1.25rem;border-radius:99px;cursor:pointer;min-height:44px;transition:background .2s,color .2s}
.ax-seg button[aria-pressed="true"]{background:#fff;color:var(--navy)}
.ax-seg button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ax-demo-btn{appearance:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.6rem 1.25rem;border-radius:99px;border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;font:600 .95rem var(--ff-b);cursor:pointer;transition:background .2s,border-color .2s}
.ax-demo-btn:hover{background:rgba(255,255,255,.1);border-color:#fff}
.ax-demo-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ax-demo-btn i{font-size:1.15rem}
.ax-hint{color:var(--ax-text-dim);font-size:.95rem;display:flex;align-items:center;gap:.5rem;margin:0}
.ax-hint i{color:var(--amber)}

.ax-stage{position:relative;height:clamp(460px,52vw,560px);margin-top:2.5rem}
.ax-sync{position:absolute;inset:0;pointer-events:none;z-index:4}
.ax-sync span{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 18px 4px rgba(232,160,32,.55);opacity:0}
.ax-sync span.go{animation:axPulse .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes axPulse{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}

/* Buehnenaufbau: die Geraete treten nacheinander auf, einmal je Seitenaufruf. */
.js .ax-stage .ax-browser,.js .ax-stage .ax-phone,.js .ax-stage .ax-watch{opacity:0}
.ax-stage.up .ax-browser{animation:axEnter .7s cubic-bezier(.16,1,.3,1) forwards}
.ax-stage.up .ax-phone{animation:axEnter .7s cubic-bezier(.16,1,.3,1) .12s forwards}
.ax-stage.up .ax-watch{animation:axEnter .7s cubic-bezier(.16,1,.3,1) .24s forwards}
@keyframes axEnter{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}

/* ── Browser-Fenster ─────────────────────────────────────────── */
.ax-browser{position:absolute;left:0;top:0;width:58%;height:clamp(400px,46vw,500px);background:#fff;border-radius:14px;box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;color:var(--ink);z-index:1;display:flex;flex-direction:column}
.ax-bar{height:40px;background:#eef0f4;display:flex;align-items:center;gap:.5rem;padding:0 .9rem;flex:0 0 auto}
.ax-dots{display:flex;gap:6px}
.ax-dots i{width:11px;height:11px;border-radius:50%;background:#cfd4dd;display:block}
.ax-url{flex:1;max-width:340px;margin:0 auto;background:#fff;border-radius:7px;height:25px;font-size:.78rem;color:#5c677a;display:flex;align-items:center;justify-content:center;gap:.35rem}
.ax-app{display:grid;grid-template-columns:170px 1fr;flex:1;min-height:0}
.ax-side{background:var(--navy);color:#c9d2e3;padding:1rem .8rem;font-size:.8rem;display:flex;flex-direction:column;gap:.2rem}
.ax-side b{color:#fff;font-family:var(--ff-logo);font-weight:400;font-size:1rem;margin-bottom:.8rem;display:block}
.ax-side span{padding:.45rem .6rem;border-radius:7px;display:flex;gap:.5rem;align-items:center}
.ax-side span.on{background:rgba(255,255,255,.1);color:#fff}
.ax-main{padding:1rem 1.2rem;display:flex;flex-direction:column;min-width:0;min-height:0}
.ax-main-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.8rem}
.ax-main-head h2{font-family:var(--ff-h);font-size:1.15rem;margin:0;color:var(--ink)}
.ax-main-head small{color:var(--ink-3);font-size:.78rem}
.ax-runchips{display:flex;flex-wrap:wrap;gap:.4rem;min-height:30px;margin-bottom:.7rem}
.ax-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:600;padding:.3rem .65rem;border-radius:99px;background:var(--cream);border:1px solid var(--border)}
.ax-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.ax-chip.run{background:#fff7e6;border-color:#f4cf85}
.ax-chip.run .dot{animation:axBlink 1.2s infinite}
@keyframes axBlink{50%{opacity:.25}}
.ax-grid{position:relative;flex:1;min-height:0;border-top:1px solid var(--border);overflow:hidden}
.ax-hour{position:absolute;left:0;right:0;border-top:1px dashed #ebe7df;font-size:.66rem;color:var(--ink-3);padding-left:2px}
.ax-block{position:absolute;left:52px;right:8px;white-space:nowrap;border-radius:7px;background:color-mix(in srgb,var(--c) 16%,#fff);border-left:4px solid var(--c);font-size:.72rem;padding:.2rem .5rem;overflow:hidden;line-height:1.25;transition:height .6s ease}
.ax-block b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-block.run{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,#fff) 0 8px,color-mix(in srgb,var(--c) 12%,#fff) 8px 16px)}
.ax-block.held{background:#fff;border:1px dashed color-mix(in srgb,var(--c) 70%,#fff);border-left:4px solid var(--c)}
.ax-block.new{animation:axIn .7s ease}
@keyframes axIn{from{opacity:0;transform:scaleY(.3);transform-origin:top}to{opacity:1;transform:none}}
/* Gebuchte Bloecke sind anklickbar: sie oeffnen "Taetigkeit bearbeiten". */
.ax-block.edit{cursor:pointer;appearance:none;text-align:left;font-family:inherit}
.ax-block.edit:hover{filter:brightness(.97)}
.ax-block.edit:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.ax-block .pen{position:absolute;right:5px;top:4px;font-size:.7rem;color:var(--ink-3);opacity:0;transition:opacity .2s}
.ax-block.edit:hover .pen,.ax-block.edit:focus-visible .pen{opacity:1}
.ax-block.todo{box-shadow:inset 0 0 0 1px #d8a33a}
.ax-block .flag{display:inline-block;margin-left:.3rem;font-size:.66rem;font-weight:700;color:#8a5a00}
.ax-now{position:absolute;left:44px;right:0;height:2px;background:var(--red);z-index:2}
.ax-now::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--red)}

/* Bearbeiten-Dialog im Browser-Mockup */
.ax-sheet{position:absolute;inset:0;background:rgba(15,23,41,.42);display:flex;align-items:flex-end;justify-content:center;z-index:5;border-radius:0 0 14px 14px}
.ax-sheet[hidden]{display:none}
.ax-sheet-in{background:#fff;width:100%;max-width:420px;border-radius:16px 16px 0 0;padding:1rem 1.1rem 1.1rem;box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:axSheetUp .32s cubic-bezier(.16,1,.3,1)}
@keyframes axSheetUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.ax-sheet h3{font-family:var(--ff-h);font-size:1rem;margin:0 0 .8rem;color:var(--ink)}
.ax-sheet label{display:block;font-size:.76rem;font-weight:600;color:var(--ink-2);margin:0 0 .15rem}
.ax-sheet input,.ax-sheet select{width:100%;font:inherit;font-size:16px;border:1px solid #cfd4dd;border-radius:9px;padding:.5rem .6rem;background:#fff;color:var(--ink);margin-bottom:.7rem;min-height:44px}
.ax-sheet input:focus-visible,.ax-sheet select:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.ax-sheet-bill{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin-bottom:1rem;cursor:pointer;min-height:44px}
.ax-sheet-bill input{width:20px;height:20px;min-height:20px;margin:0;flex:0 0 auto}
.ax-sheet-acts{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}
.ax-sheet-acts button{min-height:44px;padding:.5rem 1.1rem;border-radius:10px;font:600 .9rem var(--ff-b);cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--ink-2)}
.ax-sheet-acts .prim{background:var(--navy);color:#fff;border-color:var(--navy)}
.ax-sheet-acts button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ── Telefon ─────────────────────────────────────────────────── */
.ax-phone{position:absolute;right:0;top:10px;width:262px;height:clamp(420px,48vw,520px);border-radius:44px;background:#1a1d24;padding:11px;box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 0 2px #3a3f4b;z-index:2}
.ax-screen{width:100%;height:100%;border-radius:34px;overflow:hidden;background:#f2f2f7;color:#111827;position:relative;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',var(--ff-b)}
.ax-status{height:36px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;font-size:.72rem;font-weight:600;flex:0 0 auto}
.ax-status .isl{width:84px;height:24px;border-radius:14px;background:#000}
.ax-p-title{padding:.2rem 1rem .6rem;font-size:1.55rem;font-weight:700;letter-spacing:-.02em}
.ax-p-clock{gap:.5rem;margin:0 .8rem .7rem;border-radius:14px;background:#fff;padding:.7rem .85rem;display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
.ax-p-clock strong{display:block;font-size:1.05rem}
.ax-p-clock .pill{background:#dcfce7;color:#166534;font-weight:700;padding:.32rem .6rem;border-radius:99px;font-size:.7rem;text-align:center;flex:0 1 auto}
.ax-p-clock>div{min-width:0}
.ax-p-sec{padding:0 1rem .35rem;font-size:.74rem;color:#5b6270;font-weight:600}
.ax-p-list{margin:0 .8rem;border-radius:14px;background:#fff;overflow:hidden;flex:0 1 auto;min-height:0;overflow-y:auto}
.ax-p-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-bottom:1px solid #eef0f3;font-size:.82rem;box-shadow:inset 3px 0 0 var(--c)}
.ax-p-row:last-child{border-bottom:0}
.ax-p-row .nm{flex:1;min-width:0;font-weight:600;line-height:1.3}
.ax-p-row .nm small{display:block;font-weight:400;color:#5b6270;font-size:.72rem;line-height:1.35}
.ax-p-row .nm small .tm{white-space:nowrap}
.ax-p-row .tm{font-weight:600}
.ax-p-row .tm:not(:empty)::before{content:'· '}
.ax-p-row.run .tm{color:#9a4a06}
/* Beruehrziele: 44px hoch, Breite darf im Mockup schmaler sein. */
.ax-p-act{appearance:none;border:0;background:none;padding:0;cursor:pointer;min-width:36px;min-height:44px;display:flex;align-items:center;justify-content:center;line-height:1}
.ax-p-act.tg{font-size:1.4rem;color:#5b6270}
.ax-p-row.run .ax-p-act.tg{color:#9a4a06}
.ax-p-act.bk{font-size:1.25rem;color:#15803d}
.ax-p-act:focus-visible{outline:2px solid var(--navy);outline-offset:1px;border-radius:8px}
.ax-p-tabs{margin-top:auto;height:60px;background:rgba(249,249,251,.94);border-top:1px solid #e5e7eb;display:flex;justify-content:space-around;align-items:flex-start;padding-top:8px;font-size:.6rem;color:#6b7280;flex:0 0 auto}
.ax-p-tabs span{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0}
.ax-p-tabs em{font-style:normal;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-p-tabs span i{font-size:1.1rem}
.ax-p-tabs span.on{color:var(--navy)}
.ax-p-fab,.ax-p-navbar{display:none}

/* Android: Material-Anmutung ueber Form und Farbe, nicht ueber die Schrift. */
.ax[data-os="android"] .ax-phone{border-radius:30px;padding:9px;background:#23262d}
.ax[data-os="android"] .ax-screen{border-radius:22px;background:#fbf8fd}
.ax[data-os="android"] .ax-status{padding:0 14px;font-weight:500}
.ax[data-os="android"] .ax-status .isl{width:11px;height:11px;border-radius:50%;order:-1;margin-left:38%}
.ax[data-os="android"] .ax-p-title{font-size:1.5rem;font-weight:700;padding:.5rem 1rem .7rem;letter-spacing:-.01em}
.ax[data-os="android"] .ax-p-clock,.ax[data-os="android"] .ax-p-list{border-radius:20px;background:#eae5ef}
.ax[data-os="android"] .ax-p-clock .pill{background:#3157c8;color:#fff;border-radius:99px;padding:.4rem .8rem}
.ax[data-os="android"] .ax-p-row{border-bottom-color:#ddd5e4;background:transparent}
.ax[data-os="android"] .ax-p-sec{color:#49454f;font-weight:700}
.ax[data-os="android"] .ax-p-tabs{font-size:.56rem;height:64px;background:#f0e9f5;border-top:0;padding-top:8px;color:#49454f}
.ax[data-os="android"] .ax-p-tabs span.on i{background:#d3e3fd;border-radius:99px;padding:3px 18px;color:#1d192b}
.ax[data-os="android"] .ax-p-tabs span.on{color:#1d192b;font-weight:600}
.ax[data-os="android"] .ax-p-fab{display:flex;position:absolute;right:12px;bottom:84px;width:48px;height:48px;border-radius:16px;background:#d3e3fd;color:#1a1c1e;align-items:center;justify-content:center;font-size:1.35rem;box-shadow:0 3px 8px rgba(0,0,0,.2)}
/* Drei-Tasten-Navigation: das eindeutigste Android-Merkmal im Mockup. */
.ax[data-os="android"] .ax-p-navbar{display:flex;justify-content:space-around;align-items:center;height:26px;background:#f0e9f5;color:#4a4458;font-size:.6rem;flex:0 0 auto}
.ax[data-os="android"] .ax-p-tabs{margin-top:auto}

/* ── Uhr ─────────────────────────────────────────────────────── */
/* Die Uhr steht bewusst vor dem Browserfenster, darf dessen Tagesplaner aber
   nur am Rand ueberdecken — sonst verschwindet genau der Block, den die
   Vorfuehrung gerade erzeugt. */
.ax-watch{position:absolute;right:255px;bottom:0;width:190px;z-index:3;transition:opacity .4s,transform .4s,visibility .4s}
.ax-strap{width:118px;height:42px;margin:0 auto;background:linear-gradient(#2b3140,#1d2230);border-radius:14px 14px 4px 4px}
.ax-strap.b{border-radius:4px 4px 14px 14px}
.ax-case{position:relative;width:190px;height:238px;border-radius:52px;background:#20242d;padding:12px;box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 2px #444a57}
.ax-case::after{content:'';position:absolute;right:-7px;top:62px;width:9px;height:38px;border-radius:4px;background:#3a3f4b}
.ax-wscreen{position:relative;width:100%;height:100%;border-radius:40px;background:#000;color:#fff;overflow:hidden;display:flex;flex-direction:column;padding:11px 10px 9px;font-family:-apple-system,BlinkMacSystemFont,var(--ff-b)}
.ax-w-top{display:flex;justify-content:space-between;font-size:.7rem;color:#aab2c0;padding:0 5px 4px}
.ax-w-top b{color:var(--ax-run);font-weight:600}
.ax-w-list{display:flex;flex-direction:column;gap:4px;overflow-y:auto;scrollbar-width:none;flex:1}
.ax-w-list::-webkit-scrollbar{display:none}
.ax-w-btn{appearance:none;border:0;width:100%;text-align:left;background:#1c1c1e;color:#fff;border-radius:13px;padding:.3rem .55rem;font:600 .76rem/1.2 -apple-system,BlinkMacSystemFont,var(--ff-b);display:flex;align-items:center;gap:.4rem;cursor:pointer;min-height:44px;flex:0 0 auto;transition:background .2s,transform .12s}
.ax-w-btn:active{transform:scale(.96)}
.ax-w-btn .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ax-w-btn .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-w-btn .tm{font-size:.72rem;color:#aab2c0;font-weight:500}
.ax-w-btn.run{background:color-mix(in srgb,var(--c) 42%,#1c1c1e)}
.ax-w-btn.run .tm{color:#fff}
.ax-w-btn:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.ax-w-btn[disabled]{opacity:.45;cursor:default}
/* Der Stopp-Dialog der Uhr: beenden, verwerfen oder weiterlaufen lassen. */
.ax-w-sheet{position:absolute;inset:0;background:#000;border-radius:40px;padding:12px 10px;display:flex;flex-direction:column;justify-content:center;gap:5px;z-index:2;animation:axWSheet .26s cubic-bezier(.16,1,.3,1)}
.ax-w-sheet[hidden]{display:none}
@keyframes axWSheet{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ax-w-sheet p{margin:0 0 .3rem;font-size:.7rem;color:#c8cfdb;text-align:center;line-height:1.3}
.ax-w-sheet button{appearance:none;border:0;width:100%;border-radius:12px;padding:.35rem .5rem;font:600 .74rem/1.2 -apple-system,BlinkMacSystemFont,var(--ff-b);cursor:pointer;min-height:44px;background:#2c2c2e;color:#fff}
.ax-w-sheet button.ok{background:#0b4f3a;color:#b9f5d8}
.ax-w-sheet button.del{background:#4a1114;color:#ffb4b4}
.ax-w-sheet button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.ax[data-os="android"] .ax-watch{opacity:0;visibility:hidden;transform:translateY(20px);pointer-events:none}

.ax-disclaimer{margin:1.2rem 0 0;color:var(--ax-text-dim);font-size:.84rem}
.ax-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Vertrauensband direkt unter der Buehne */
.ax-trust{margin-top:3rem;border-top:1px solid var(--ax-line);background:rgba(0,0,0,.18);display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem 2.5rem;padding:1.1rem 2.5rem}
.ax-trust span{display:inline-flex;align-items:center;gap:.5rem;color:#cfd8e8;font-size:.92rem;font-weight:500}
.ax-trust i{color:var(--ax-teal);font-size:1.1rem}

/* ── Akte ────────────────────────────────────────────────────── */
.ax-act{padding:var(--sec-y) 2.5rem;background:var(--white)}
.ax-act-wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.ax-act-rev .ax-act-text{order:2}
.ax-act-no{font-size:.86rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .8rem}
.ax-act-no.light{color:var(--amber)}
.ax-act h2{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.025em;line-height:1.1;max-width:16ch;margin:0 0 1.1rem}
.ax-intro{max-width:58ch;color:var(--ink-2);font-size:1.08rem;line-height:1.7;font-weight:300;margin:0 0 1rem}
.ax-intro a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ax-act-dark .ax-intro a{color:#fff}
.ax-act .dev{display:inline-flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}
.ax-act .dev span{font-size:.8rem;font-weight:600;background:var(--cream);border:1px solid var(--border);border-radius:99px;padding:.3rem .75rem}
.ax-act-vis{display:flex;align-items:center;justify-content:center}
.ax-act-dark{background:var(--ax-night);color:#fff}
.ax-act-dark h2{color:#fff}
.ax-act-dark .ax-intro{color:#cfd8e8}
.ax-act-dark .ax-act-no{color:var(--amber)}
.ax-act-dark .dev span{background:rgba(255,255,255,.07);border-color:var(--ax-line);color:#cfd8e8}
.ax-act-dark .btn{margin:.6rem 0 1.2rem}

/* Sanftes Auftauchen der Bildseite, sobald der Akt im Blick ist. */
.js .sc-reveal,.js .ax-act-vis>.ax-rep-card,.js .ax-off-demo{opacity:0;transform:translateY(20px)}
.ax-act.on .sc-reveal,.ax-act.on .ax-act-vis>.ax-rep-card,.ax-act.on .ax-off-demo{animation:axEnter .65s cubic-bezier(.16,1,.3,1) .1s forwards}

.sc-card{background:#fff;border-radius:var(--r-mock);box-shadow:var(--sh-2);padding:1.5rem 1.6rem;width:100%;max-width:340px}
.sc-big{font-size:2.6rem;font-weight:700;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.sc-sub{color:var(--ink-3);font-size:.9rem}
.sc-btn{margin-top:1rem;border-radius:14px;background:#15803d;color:#fff;text-align:center;font-weight:700;padding:.8rem}
.sc-watch{width:200px;height:238px;border-radius:52px;background:#20242d;padding:12px;box-shadow:0 26px 50px rgba(0,0,0,.45);flex:0 0 auto}
.sc-watch > div{height:100%;border-radius:40px;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;padding:1rem}
.sc-watch .sc-sub{color:#aab2c0}
.sc-watch .big{font-size:1.9rem;font-weight:700;color:var(--ax-run);font-variant-numeric:tabular-nums}

/* Bearbeiten-Karte in Akt 3 */
.ax-edit-demo{max-width:380px}
.ax-f{display:block;border-bottom:1px solid var(--border);padding:.55rem 0}
.ax-f span{display:block;font-size:.76rem;color:var(--ink-3);font-weight:600;margin-bottom:.1rem}
.ax-f b{font-size:1rem;color:var(--ink);font-weight:600}
.ax-f-row{display:flex;align-items:center;gap:.6rem;padding-top:.85rem;font-weight:600;color:var(--ink)}
.ax-check{width:24px;height:24px;border-radius:7px;background:var(--ax-teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}

/* ── Offline-Szene ───────────────────────────────────────────── */
.ax-off-demo{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}
.ax-off-demo .sc-watch{transition:box-shadow .45s}
.ax-off-demo.cut .sc-watch{box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 2px var(--ax-run)}
.ax-off-link{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ax-text-dim);font-size:.86rem;min-width:120px;text-align:center}
.ax-off-link i{font-size:1.7rem;transition:color .3s}
.ax-off-link.ok i{color:#34d399}
.ax-off-link.cut i{color:#f87171}
.ax-queue{font-size:.76rem;color:#aab2c0;margin-top:.2rem;min-height:1.1em}

/* ── Auswertung ──────────────────────────────────────────────── */
.ax-rep{background:var(--cream)}
.ax-rep-card{background:#fff;border-radius:var(--r-mock);border:1px solid var(--border);padding:1.6rem;box-shadow:var(--sh-2);width:100%;max-width:520px}
.ax-rep-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.ax-rep-head strong{font-family:var(--ff-h);font-size:1.25rem}
.ax-rep .ax-seg{background:var(--cream);border-color:var(--border)}
.ax-rep .ax-seg button{color:var(--ink-2);padding:.45rem 1rem;font-size:.88rem}
.ax-rep .ax-seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.ax-bars{display:flex;flex-direction:column;gap:.95rem}
.ax-bar-row{display:grid;grid-template-columns:minmax(7rem,9.5rem) 1fr 4.2rem;align-items:center;gap:.8rem;font-size:.95rem}
.ax-bar-row .lbl{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-bar-row .trk{display:block;height:14px;background:var(--cream);border-radius:7px;overflow:hidden}
.ax-bar-row .fill{display:block;height:100%;width:0;border-radius:7px;background:var(--c);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.ax-bar-row .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ax-rep-foot{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.92rem;color:var(--ink-2)}
.ax-rep-foot b{color:var(--ink);font-variant-numeric:tabular-nums}
.ax-csv{margin-top:1rem;background:var(--navy);color:#dde4ee;border-radius:12px;padding:0 1rem;font:.78rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;white-space:pre;max-height:0;opacity:0;visibility:hidden;transition:max-height .5s,opacity .4s,padding .4s,visibility 0s linear .5s}
/* Scrollbar erst im offenen Zustand; dann setzt js/apps-showcase.js tabindex=0 */
.ax-csv.open{max-height:260px;overflow-x:auto;opacity:1;visibility:visible;padding-top:.9rem;padding-bottom:.9rem;transition:max-height .5s,opacity .4s,padding .4s,visibility 0s}
.ax-csv:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ax-list{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.9rem}
.ax-list li{display:flex;gap:.75rem;align-items:flex-start;color:var(--ink-2);line-height:1.6}
.ax-list li i{color:var(--ax-teal);font-size:1.15rem;margin-top:.05rem}
.ax-list b{color:var(--ink)}

/* ── Plattformen ─────────────────────────────────────────────── */
.ax-plat{padding:var(--sec-y) 2.5rem;background:var(--white)}
.ax-plat h2{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.025em;line-height:1.1;max-width:20ch;margin:0 0 1.1rem}
.ax-plat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.5rem}
.ax-pl{border:1px solid var(--border);border-radius:var(--r-card);padding:1.5rem;display:flex;flex-direction:column;gap:.55rem;background:#fff}
.ax-pl i.big{font-size:1.8rem;color:var(--navy)}
.ax-pl h3{margin:.2rem 0 0;font-size:1.14rem}
.ax-pl p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.6;flex:1}
.ax-st{align-self:flex-start;font-size:.76rem;font-weight:700;padding:.3rem .75rem;border-radius:99px}
.ax-st.live{background:var(--green-l);color:#07663d}
.ax-st.beta{background:var(--amber-l);color:#7d5100}
.ax-pl a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px;font-size:.95rem}

/* Bedarfsabfrage Wear OS — bewusst kein Versprechen, nur eine Frage. */
.ax-wear{margin-top:1.6rem;border:1px dashed var(--border);border-radius:var(--r-card);background:var(--cream);padding:1.4rem 1.6rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.ax-wear>i{font-size:2rem;color:var(--ink-3);flex:0 0 auto}
.ax-wear div{flex:1;min-width:260px}
.ax-wear h3{margin:0 0 .3rem;font-size:1.08rem}
.ax-wear p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.ax-wear .btn{flex:0 0 auto}

/* ── One more thing ──────────────────────────────────────────── */
.ax-omt{padding:var(--sec-y) 2.5rem;background:var(--navy);color:#fff;text-align:center}
.ax-omt h2{color:#fff;font-size:clamp(2.1rem,4.4vw,3.6rem);letter-spacing:-.03em;line-height:1.08;max-width:18ch;margin:0 auto 1.2rem}
.ax-omt p{color:#cfd8e8;max-width:60ch;margin:0 auto;font-size:1.12rem;line-height:1.7;font-weight:300}
.ax-omt .ax-act-no{margin-bottom:1rem}
.ax-omt .ax-hero-actions{justify-content:center;margin-top:2.2rem}

.ax-faq{padding:var(--sec-y-tight) 2.5rem;background:var(--cream)}
.ax-faq h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.02em;margin:0}
/* margin-left:0: landing.css zentriert .faq-list, die H2 steht aber links (Design-Audit A12) */
.ax-faq .faq-list{margin-top:2rem;margin-left:0;max-width:840px;display:grid;gap:.6rem}
.ax-faq .faq-item{border:1px solid var(--border);border-radius:12px;background:var(--white);overflow:hidden}
.ax-faq .faq-item summary{cursor:pointer;padding:1rem 1.2rem;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:48px;font-size:1rem}
.ax-faq .faq-item summary::-webkit-details-marker{display:none}
.ax-faq .faq-item summary::after{content:'+';font-size:1.4rem;font-weight:300;color:var(--ink-2);flex:0 0 auto;line-height:1}
.ax-faq .faq-item[open] summary::after{content:'\2212'}
.ax-faq .faq-item summary:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.ax-faq .faq-answer{padding:0 1.2rem 1.1rem;color:var(--ink-2);font-size:1rem;line-height:1.7}
.ax-faq .faq-answer p{margin:0}

.ax-legal{padding:1.8rem 2.5rem;background:var(--navy);border-top:1px solid rgba(255,255,255,.08);color:#93a0b6;font-size:.8rem;line-height:1.65}
.ax-legal p{max-width:1240px;margin:0 auto .35rem}

/* ── Responsiv ───────────────────────────────────────────────── */
@media(max-width:1100px){
  .ax-hero{padding:6rem 1.25rem 0}
  .ax-act,.ax-plat,.ax-faq,.ax-omt{padding-left:1.25rem;padding-right:1.25rem}
  .ax-legal,.ax-trust{padding-left:1.25rem;padding-right:1.25rem}
  .ax-plat-grid{grid-template-columns:repeat(2,1fr)}
  .ax-act-wrap{gap:2.5rem}
  /* Enger Desktop: Der Browser gibt Breite ab, damit die Uhr zwischen ihm und
     dem Handy Platz findet, statt die Bedienelemente eines der beiden zu
     verdecken. */
  .ax-browser{width:55%}
  .ax-phone{right:0}
  .ax-watch{right:252px}
}
@media(min-width:861px){.ax-devices{position:absolute;inset:0}}
@media(max-width:860px){
  .ax-stage{height:auto;margin-top:2rem}
  /* Untereinander statt uebereinander: verhindert die Ueberlappung von
     Handy und Uhr, die bei schmalen Geraeten sonst entsteht. */
  .ax-devices{display:flex;flex-direction:column;align-items:center;gap:1.75rem}
  .ax-phone,.ax-watch,.ax-browser{position:relative;right:auto;left:auto;top:auto;bottom:auto}
  .ax-phone{width:min(262px,82vw);height:auto;aspect-ratio:262/520}
  .ax-watch{width:min(200px,60vw)}
  .ax-case{width:100%;height:auto;aspect-ratio:190/238}
  .ax-browser{width:100%;max-width:520px;height:min(420px,62vh)}
  /* Im gestapelten Layout steht die Uhr im Fluss. Auf Android wird sie nicht
     nur unsichtbar, sondern muss auch ihren Platz raeumen — sonst klafft dort
     eine Luecke. */
  .ax[data-os="android"] .ax-watch{display:none}
  .ax-app{grid-template-columns:1fr}
  .ax-side{display:none}
  .ax-act-wrap{grid-template-columns:1fr}
  .ax-act-rev .ax-act-text{order:0}
  .ax-act{padding-top:4.5rem;padding-bottom:4.5rem}
  .ax-act h2,.ax-plat h2{max-width:100%}
  .ax-omt{padding-top:5rem;padding-bottom:5rem}
}
@media(max-width:560px){
  .ax-plat-grid{grid-template-columns:1fr}
  .ax-bar-row{grid-template-columns:6.5rem 1fr 3.6rem;font-size:.88rem}
  .ax-hero-lead{font-size:1.05rem}
  .ax-trust{gap:.8rem 1.4rem;justify-content:flex-start}
  .ax-trust span{font-size:.86rem}
  .ax-wear{padding:1.2rem}
  .ax-sheet-in{max-width:100%}
}
.ax-act-wrap>*,.ax-off-demo>*{min-width:0}
@media(prefers-reduced-motion:reduce){
  .ax *,.ax *::before,.ax *::after{animation:none!important;transition:none!important}
  .ax-sync{display:none}
  .js .ax-stage .ax-browser,.js .ax-stage .ax-phone,.js .ax-stage .ax-watch,
  .js .sc-reveal,.js .ax-act-vis>.ax-rep-card,.js .ax-off-demo{opacity:1;transform:none}
}