/* anpassungen.css — Ergänzungen zum Design-Entwurf (nach dem Seiten-CSS geladen, auf allen Seiten):
   Burger-Menü fürs Handy, Cockpit-Seite (Hero-Schriftzug mittig, Handy-Darstellung). */

/* ---- Cockpit-Hero: Schriftzug vertikal mittig (ab 761 px; auf dem Handy verdeckte er sonst den Monitor) ---- */
@media (min-width:761px){
  .wv-top .w-h.hero-ap{top:0 !important;bottom:0 !important;align-content:center}
}

/* ---- Burger-Menü (bis 760 px) ---- */
.bm-knopf{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:12px;background:transparent;color:#111113;cursor:pointer}
.bm-knopf:focus-visible{outline:2px solid #1E2CE6;outline-offset:2px}
.mt-root[data-mt="dark"] .bm-knopf,header[data-theme="dark"] .bm-knopf{color:#F4F3F0}

.bm{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;padding:16px clamp(16px,4vw,48px) 32px;overflow-y:auto;overscroll-behavior:contain;background:#F4F3F0;color:#111113;font-family:'Instrument Sans',system-ui,sans-serif;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.bm[hidden]{display:none}
.bm.offen{opacity:1;transform:none}
.bm.dunkel{background:#000000;color:#F5F5F7;background-image:radial-gradient(900px 560px at 50% 0%,rgba(75,87,255,0.22),transparent 62%)}
.bm-kopf{display:flex;align-items:center;justify-content:space-between;min-height:58px}
.bm-kopf img{display:block;height:26px;width:auto}
.bm-zu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer}
.bm-gruppe{margin:28px 0 8px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#6B6B73}
.bm.dunkel .bm-gruppe{color:#8A8A93}
.bm-liste{display:flex;flex-direction:column}
.bm-liste a{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid rgba(17,17,19,0.08);color:inherit;text-decoration:none}
.bm.dunkel .bm-liste a{border-bottom-color:rgba(255,255,255,0.10)}
.bm-liste a[aria-current]{color:#1E2CE6}
.bm.dunkel .bm-liste a[aria-current]{color:#AEB4FF}
.bm-t{font-size:19px;font-weight:500;letter-spacing:-0.015em}
.bm-d{font-size:14px;line-height:1.45;color:#6B6B73}
.bm.dunkel .bm-d{color:#A1A1A6}
.bm-haupt a{padding:14px 0;font-size:24px;font-weight:400;letter-spacing:-0.025em}
.bm-demo{margin-top:28px;align-self:flex-start}
.bm.dunkel .bm-demo{background:#F4F3F0 !important;color:#111113 !important}
.bm.dunkel .bm-demo .btn-dot{background:#111113 !important}
.bm.dunkel .bm-demo .btn-dot svg{stroke:#F4F3F0}
html.bm-gesperrt,html.bm-gesperrt body{overflow:hidden}

@media (max-width:760px){
  header > nav.nv{display:none !important}
  /* Burger bleibt beim Scrollen sichtbar: fest oben rechts, mit Hintergrund über jedem Inhalt */
  .bm-knopf{display:inline-flex;position:fixed;top:max(16px, env(safe-area-inset-top));right:12px;margin:0;z-index:150;border-radius:999px;background:rgba(244,243,240,0.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(17,17,19,0.08),0 6px 18px rgba(20,24,60,0.10)}
  .mt-root[data-mt="dark"] .bm-knopf,header[data-theme="dark"] .bm-knopf{background:rgba(22,24,32,0.72);box-shadow:0 0 0 1px rgba(255,255,255,0.12),0 6px 18px rgba(0,0,0,0.4)}
  /* Hell/Dunkel-Knopf links neben dem Burger, gleiche Gestalt */
  .dm-knopf{display:inline-flex;align-items:center;justify-content:center;position:fixed;top:max(16px, env(safe-area-inset-top));right:64px;width:44px;height:44px;padding:0;border:0;z-index:150;border-radius:999px;cursor:pointer;color:#111113;background:rgba(244,243,240,0.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(17,17,19,0.08),0 6px 18px rgba(20,24,60,0.10)}
  .mt-root[data-mt="dark"] .dm-knopf,header[data-theme="dark"] .dm-knopf{color:#F4F3F0;background:rgba(22,24,32,0.72);box-shadow:0 0 0 1px rgba(255,255,255,0.12),0 6px 18px rgba(0,0,0,0.4)}
  .dm-knopf:focus-visible{outline:2px solid #1E2CE6;outline-offset:2px}
}
@media (min-width:761px){.dm-knopf{display:none !important}}
@media (prefers-reduced-motion:reduce){.bm{transition:none}}

/* ---- Cockpit-Seite auf dem Handy ---- */
@media (max-width:760px){
  /* Hero: Das Scroll-Video spult auf dem iPhone nicht mit (iOS lädt es nicht vor) und kostet 8 MB —
     auf dem Handy steht statt dessen der Endzustand als Bild über dem Text, ohne lange Scroll-Strecke. */
  .wv-top{height:auto !important}
  .wv-top > div:first-child{position:relative !important;top:auto !important;height:auto !important;justify-content:flex-start !important;gap:28px !important;padding:96px 0 24px}
  .wv-top .w-stage{order:-1}
  .wv-top .w-vid{aspect-ratio:16/9;background:#000 url(/assets/media/cockpit-hero-mobil.webp) center/cover no-repeat}
  .wv-top .w-vid video{display:none !important}
  .wv-top .w-vid::after{display:none !important}
  .wv-top .w-h.hero-ap{position:relative !important;top:auto !important;bottom:auto !important}
  .wv-top .w-h,.wv-top .w-h > *{animation:none !important;opacity:1 !important;transform:none !important}
  /* Cockpit-Ansichten: auf dem Handy ein Screenshot-Ausschnitt (cockpit-mobil.js) statt der verkleinerten
     1440-px-Oberfläche — die wäre bei ~28 % unlesbar */
  .teaser.teaser-mobil{height:auto !important;max-height:none !important;-webkit-mask-image:none !important;mask-image:none !important}
  .teaser.teaser-mobil:has(> .ansicht-bild) > .teaser-in{display:none !important}
  .teaser > .ansicht-bild{display:block;width:100%;height:auto}
  /* Unschärfe-Effekte in den Cockpit-Ansichten kosten auf dem Handy viel Speicher (Absturzgefahr) */
  .ckp,.ckp *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}

/* ---- WhatsApp-Seite: „Leistungen im Überblick“ in drei Spalten (zwei Zeilen) ---- */
.ls-raster{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
@media (max-width:900px){.ls-raster{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:600px){.ls-raster{grid-template-columns:minmax(0,1fr) !important}}

/* ---- Cockpit-Hero: Headline weiß ohne Verlauf, Knopf im Standard-Design unter dem Text ---- */
.ap-h{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:#FFFFFF !important}
.ap-cta:hover{color:#111113 !important}

/* Screenshot-Ausschnitte der Cockpit-Ansichten nur auf dem Handy */
@media (min-width:761px){.teaser > .ansicht-bild{display:none !important}}

/* ---- Handy: Grafik über dem Text (Zeitleisten-Schritte; übrige Abschnitte stellt mobil.js um) ---- */
@media (max-width:899px){
  .tl-step{grid-template-areas:"vis" "text" !important}
}

/* ---- Handy: Kacheln ohne Desktop-Mindesthöhe, Preistabelle bündig, Hell/Dunkel im Menü ---- */
@media (max-width:760px){
  .tile{min-height:0 !important}
  .mx-row > [role=cell] .mx-k{min-height:2.7em}
  .mt-row{display:none !important}
}
.bm-modus{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding:14px 0;border-top:1px solid rgba(17,17,19,0.08);border-bottom:1px solid rgba(17,17,19,0.08);font-size:17px}
.bm.dunkel .bm-modus{border-color:rgba(255,255,255,0.10)}
.bm-sw{position:relative;flex:none;width:52px;height:30px;border:0;padding:0;border-radius:999px;background:rgba(17,17,19,0.14);cursor:pointer;transition:background .3s}
.bm-sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 6px rgba(0,0,0,0.25);transition:transform .3s cubic-bezier(.34,1.45,.64,1)}
.bm-sw[aria-checked="true"]{background:#4B57FF}
.bm-sw[aria-checked="true"]::after{transform:translateX(22px)}
.bm-sw:focus-visible{outline:2px solid #1E2CE6;outline-offset:3px}
/* Kreisgrafiken („Immer genauer“, „Immer besser“, „Kampagnen“): Beschriftungen sitzen auf dem Kreisrand und
   ragten auf dem Handy über die Karte hinaus — Kreis kleiner, damit sie hineinpassen */
@media (max-width:760px){
  .lightglass > div[style*="aspect-ratio: 1"]{width:82% !important}
  .lightglass > div[style*="aspect-ratio: 1"] > div[style*="white-space: nowrap"]{font-size:13px !important;padding:7px 12px !important}
  .split-main > .lightglass{min-height:0 !important}
}

/* ---- Handy: Einflug-Effekte der Cockpit-Ansichten ruhiger (Desktop: 220 px seitlich, 125 % Zoom, 32° kippen) ---- */
@keyframes fxMobil{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .fx-rise,.fx-zoom,.fx-tilt,.fx-slide-l,.fx-slide-r{animation-name:fxMobil !important}
}

/* ---- Startseite, Handy: „Demo vereinbaren“ mittig, „Ablauf ansehen“ darunter ---- */
@media (max-width:760px){
  div:has(> a.btn-steel + a[href="#ablauf"]){flex-direction:column !important;gap:18px !important}
}

/* ---- Cockpit-Seite, Telefon-KI: Hörprobe im Orbit (cockpit-hoerprobe.js) ---- */
.hp-buehne canvas[data-orb]{transform-origin:50% 50%;will-change:transform}
.hp-knopf{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 0 3px;background:var(--fg);color:var(--card);box-shadow:0 18px 40px rgba(30,44,230,0.28),0 0 0 1px var(--line);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hp-spielt .hp-knopf{padding:0}
.hp-knopf:hover{transform:scale(1.05)}
.hp-knopf:focus-visible{outline:2px solid var(--accent2);outline-offset:4px}
.hp-knopf::before,.hp-knopf::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1.5px solid var(--accent2);opacity:0;pointer-events:none}
.hp-spielt .hp-knopf::before{animation:hp-ring 1.8s cubic-bezier(.2,.8,.2,1) infinite}
.hp-spielt .hp-knopf::after{animation:hp-ring 1.8s cubic-bezier(.2,.8,.2,1) .9s infinite}
@keyframes hp-ring{0%{opacity:.55;transform:scale(.9)}100%{opacity:0;transform:scale(1.45)}}
.hp-frage{position:absolute;left:24px;right:24px;bottom:22px;margin:0;text-align:center;font-size:15px;line-height:1.4;color:var(--fg)}
.hp-frage span{display:block;margin-bottom:4px;font-size:13px;color:var(--mut)}
/* Handy: Orbit kleiner und etwas höher, damit die Frage darunter frei steht */
@media (max-width:560px){
  .hp-buehne canvas[data-orb]{width:min(240px,70%) !important;height:auto !important;aspect-ratio:1;margin-bottom:44px}
  .hp-knopf{top:calc(50% - 22px);width:72px;height:72px;margin:-36px 0 0 -36px}
  .hp-frage{bottom:18px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.hp-spielt .hp-knopf::before,.hp-spielt .hp-knopf::after{animation:none}.hp-knopf{transition:none}}