/* ==========================================================================
   BRAUERMEDIA v2 – Design-System nach Vorbild Bese Media
   Helle Fläche (#eef1f3), dunkle Sektionen, Instrument Serif + Montserrat,
   hellblauer Kursiv-Akzent, Pill-Buttons. Mobile first.
   ========================================================================== */
@import url("../fonts/fonts.css");

:root {
  --bg: #eef1f3; --bg-2: #e6e9ec; --white: #ffffff;
  --dark: #08090a; --dark-2: #0f1216; --dark-3: #17191d; --dark-4: #1f232a;
  --ink: rgba(16, 24, 32, 0.92); --ink-2: rgba(16, 24, 32, 0.72); --ink-3: rgba(16, 24, 32, 0.52);
  --on-dark: #f4f5f6; --on-dark-2: rgba(244, 245, 246, 0.72); --on-dark-3: rgba(244, 245, 246, 0.5);
  --accent: #9cc4ee; --accent-ink: #2f5d99; --accent-soft: rgba(156, 196, 238, 0.16);
  --navy: #1b2a3c; --navy-2: #24364d;
  --line: rgba(16, 24, 32, 0.1); --line-dark: rgba(255, 255, 255, 0.1);
  --ok: #2fbf71; --warn: #e2a400; --bad: #d94f5c;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 22px; --r-s: 14px; --max: 1240px; --pad: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1); --nav-h: 76px;
  --shadow: 0 30px 60px -30px rgba(10, 20, 30, 0.25), 0 1px 0 rgba(255,255,255,.6) inset;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--dark); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h4 { font-family: var(--sans); font-weight: 700; font-size: 1rem; margin: 0 0 .4em; }
h1 em, h2 em, h3 em, .serif em { font-style: italic; color: var(--accent-ink); }
.sec--dark em, .sec--dark-2 em, .sec--dark-3 em, .page-hero em, .hero em { color: var(--accent); }
p { margin: 0 0 1em; }
.lead { font-size: clamp(.98rem, 1.3vw, 1.1rem); color: var(--ink-2); max-width: 64ch; }
.sec--dark .lead, .sec--dark-2 .lead, .sec--dark-3 .lead, .page-hero .lead, .hero .lead { color: var(--on-dark-2); }
.muted { color: var(--ink-3); } .sec--dark .muted, .sec--dark-2 .muted, .sec--dark-3 .muted { color: var(--on-dark-3); }
.small { font-size: .84rem; }
strong, b { font-weight: 700; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

.wrap { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }
.sec { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.sec--tight { padding: clamp(40px, 6vw, 72px) 0; }
.sec--white { background: var(--white); }
.sec--dark { background: var(--dark); color: var(--on-dark); }
.sec--dark-2 { background: radial-gradient(1200px 600px at 50% 0%, #1c2430 0%, var(--dark-2) 55%, var(--dark) 100%); color: var(--on-dark); }
.sec--dark-3 { background: var(--dark-3); color: var(--on-dark); }
.sec-head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 20px; }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); }
.sec--dark .kicker, .sec--dark-2 .kicker, .sec--dark-3 .kicker, .page-hero .kicker, .hero .kicker { border-color: var(--line-dark); background: rgba(255,255,255,.05); color: var(--on-dark-2); }
.sec--dark .kicker::before, .sec--dark-2 .kicker::before, .sec--dark-3 .kicker::before, .page-hero .kicker::before, .hero .kicker::before { background: var(--accent); }
.grid { display: grid; gap: clamp(14px, 2vw, 22px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--l { grid-template-columns: 1.15fr .85fr; } .split--r { grid-template-columns: .85fr 1.15fr; } }

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: .9rem; line-height: 1; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .3s var(--ease), box-shadow .3s, background .25s, border-color .25s, color .25s; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--navy); color: #fff; box-shadow: 0 12px 28px -14px rgba(27,42,60,.7); }
.btn--primary:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(27,42,60,.8); }
.btn--light { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 10px 24px -16px rgba(10,20,30,.35); }
.btn--light:hover { transform: translateY(-2px); border-color: rgba(16,24,32,.2); }
.btn--ghost { background: rgba(255,255,255,.06); color: var(--on-dark); border-color: var(--line-dark); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: var(--dark); }
.btn--accent:hover { background: #b4d3f3; transform: translateY(-2px); }
.btn--sm { padding: 10px 16px; font-size: .82rem; }
.btn--lg { padding: 16px 28px; font-size: .98rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(16,24,32,.25); }
.link:hover { text-decoration-color: currentColor; }
.sec--dark .link, .sec--dark-2 .link, .sec--dark-3 .link { color: var(--on-dark); text-decoration-color: rgba(255,255,255,.3); }
.ico-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line-dark); background: rgba(255,255,255,.06); color: var(--on-dark); transition: background .2s; }
.ico-btn:hover { background: rgba(255,255,255,.14); }
.ico-btn svg { width: 16px; height: 16px; }

/* Header */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 12px 0; }
.header__inner { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(12, 14, 18, 0.86); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 14px 40px -20px rgba(0,0,0,.6); color: var(--on-dark); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; color: inherit; }
.logo svg, .logo img { width: 30px; height: 30px; border-radius: 8px; }
.logo span em { font-style: normal; font-weight: 400; opacity: .85; }
.nav { display: none; align-items: center; gap: 2px; margin: 0 0 0 10px; padding: 0; }
.nav > li { list-style: none; position: relative; }
.nav a, .nav button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; font-size: .86rem; font-weight: 500; color: var(--on-dark-2); transition: color .2s, background .2s; }
.nav a:hover, .nav button:hover, .nav a[aria-current="page"], .nav li.is-open > button { color: #fff; background: rgba(255,255,255,.08); }
.nav button svg { width: 12px; height: 12px; transition: transform .3s; }
.nav li.is-open > button svg { transform: rotate(180deg); }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 300px; padding: 10px; margin-top: 12px; border-radius: 18px; background: rgba(14,16,20,.96); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); display: grid; gap: 4px; }
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav li.is-open > .dropdown { opacity: 1; transform: none; pointer-events: auto; }
.nav > li::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.dropdown a { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; }
.dropdown a:hover { background: rgba(255,255,255,.07); }
.dropdown .di { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(156,196,238,.12); color: var(--accent); }
.dropdown .di svg { width: 16px; height: 16px; }
.dropdown b { display: block; font-size: .86rem; color: #fff; }
.dropdown small { display: block; font-size: .72rem; color: var(--on-dark-3); font-weight: 400; margin-top: 1px; }
.header__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header__right .ico-btn, .header__right .btn--partner { display: none; }
.btn--partner { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: var(--on-dark); }
.btn--partner::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(156,196,238,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(156,196,238,.6);} 70% { box-shadow: 0 0 0 8px rgba(156,196,238,0);} 100% { box-shadow: 0 0 0 0 rgba(156,196,238,0);} }
.btn--cta { background: linear-gradient(135deg, #263a55, var(--navy)); color: #fff; border-color: rgba(255,255,255,.14); }
.btn--cta:hover { background: linear-gradient(135deg, #2e4664, #22334a); }
.burger { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.burger span { display: block; width: 16px; height: 2px; background: #fff; position: relative; transition: background .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: #fff; transition: transform .3s var(--ease), top .3s; }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 1100px) { .nav { display: flex; } .header__right .ico-btn, .header__right .btn--partner { display: inline-flex; } .burger { display: none; } }
.mnav { position: fixed; inset: 0; z-index: 990; background: rgba(8,9,10,.97); color: var(--on-dark); padding: calc(var(--nav-h) + 20px) var(--pad) 40px; overflow: auto; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .3s, transform .35s var(--ease); }
.mnav.is-open { opacity: 1; pointer-events: auto; transform: none; }
.mnav h5 { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); margin: 22px 0 8px; font-weight: 600; }
.mnav a.item { display: block; padding: 11px 0; border-bottom: 1px solid var(--line-dark); font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.01em; }
.mnav a.sub { display: block; padding: 9px 0; color: var(--on-dark-2); font-size: .95rem; }
.mnav .btn-row { margin-top: 24px; }

/* Hero */
.hero { position: relative; background: radial-gradient(1100px 700px at 65% 40%, #121a24 0%, var(--dark) 60%); color: var(--on-dark); padding: calc(var(--nav-h) + 48px) 0 0; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(156,196,238,.35) .6px, transparent .7px); background-size: 26px 26px; opacity: .25; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 70% 50%, #000, transparent 75%); pointer-events: none; }
.hero__branch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.hero__branch a { padding: 7px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--on-dark-2); border: 1px solid transparent; transition: all .2s; }
.hero__branch a:hover { color: #fff; border-color: var(--line-dark); }
.hero__branch a.is-active { background: rgba(255,255,255,.1); color: #fff; border-color: var(--line-dark); }
.hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { color: #fff; margin-bottom: 22px; font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.hero .lead { margin-bottom: 22px; max-width: 58ch; }
.hero .lead strong { color: #fff; }
.hero__list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 8px; }
.hero__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--on-dark-2); }
.hero__list li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: rgba(156,196,238,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239cc4ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat; }
.hero__visual { position: relative; min-height: 560px; }
@media (max-width: 1023px) { .hero__visual { min-height: 380px; margin-top: 10px; } }
.hero__obj { position: absolute; left: 46%; top: 30%; width: 112%; max-width: none; transform: translate(-50%, -50%); -webkit-mask-image: radial-gradient(ellipse 64% 62% at 50% 50%, #000 58%, transparent 82%); mask-image: radial-gradient(ellipse 64% 62% at 50% 50%, #000 58%, transparent 82%); animation: floatObj 7s ease-in-out infinite; }
@keyframes floatObj { 0%,100% { transform: translate(-50%, -50%) } 50% { transform: translate(-50%, calc(-50% - 12px)) } }
@keyframes floatY { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
.result-card { position: absolute; right: 0; bottom: 0; width: min(100%, 420px); z-index: 2; padding: 16px; border-radius: 18px; background: rgba(18,22,28,.82); border: 1px solid var(--line-dark); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.result-card__kicker { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600; color: var(--on-dark-2); margin-bottom: 12px; }
.result-card__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.result-card__body { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.result-card__img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.result-card b { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; color: #fff; margin-bottom: 6px; letter-spacing: -.02em; font-weight: 400; }
.result-card p { margin: 0 0 4px; font-size: .82rem; color: var(--on-dark-2); }
.result-card small { font-size: .7rem; color: var(--on-dark-3); }
.result-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-dark); }
.avatars { display: flex; }
.avatars img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #15181d; margin-left: -8px; object-fit: cover; }
.avatars img:first-child { margin-left: 0; }
.chip-play { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line-dark); font-size: .74rem; font-weight: 600; color: #fff; cursor: pointer; }
.chip-play i { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.chip-play i::after { content: ""; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #000; margin-left: 2px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; font-size: .82rem; color: var(--on-dark-2); }
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust svg { width: 14px; height: 14px; color: var(--accent); }
.hero__logos { margin-top: clamp(40px, 6vw, 72px); padding: 22px 0 28px; border-top: 1px solid var(--line-dark); }
.hero__logos p { text-align: center; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 18px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; align-items: center; }
.wordmark { font-family: var(--serif); font-size: 1.25rem; color: rgba(255,255,255,.75); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; }
.wordmark small { font-family: var(--sans); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); }

/* Video-/Story-Karten */
.scroller { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; scrollbar-width: none; -ms-overflow-style: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: 0 0 min(82%, 300px); }
.scroller-nav { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }
.scroller-nav .ico-btn { border-color: var(--line); background: #fff; color: var(--ink); }
.vcard { position: relative; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; background: var(--dark-3); color: #fff; box-shadow: var(--shadow); isolation: isolate; cursor: pointer; }
.vcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vcard:hover img { transform: scale(1.05); }
.vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.85) 100%); }
.vcard__top { position: absolute; top: 14px; left: 14px; z-index: 2; }
.vcard__bottom { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; }
.vcard__bottom b { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1; letter-spacing: -.02em; margin-bottom: 8px; font-weight: 400; }
.vcard__bottom p { font-size: .82rem; color: rgba(255,255,255,.8); margin: 0 0 10px; }
.vcard__bottom small { font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }

/* Flow-Diagramm */
.panel-dark { background: linear-gradient(180deg, #121519, #0b0d10); border: 1px solid var(--line-dark); border-radius: 26px; padding: clamp(20px, 3vw, 40px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.panel-dark__head { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.pstat { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); }
.pstat b { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; color: #fff; line-height: 1; } .pstat b span { font-size: inherit; }
.pstat b sup { font-size: .5em; color: var(--accent); }
.pstat span { font-size: .76rem; color: var(--on-dark-2); }
.panel-dark__head b { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: #fff; letter-spacing: -.02em; font-weight: 400; }
.panel-dark__head > span { font-size: .86rem; color: var(--on-dark-2); }
.flow { display: grid; gap: 14px; }
@media (min-width: 900px) { .flow { grid-template-columns: 1.2fr auto 1fr auto 1fr auto 1fr; align-items: center; } }
.flow__sources { display: grid; gap: 8px; }
.flow__src { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.03); font-size: .82rem; color: var(--on-dark-2); }
.flow__src i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .7; flex: none; }
.flow__arrow { display: none; }
@media (min-width: 900px) { .flow__arrow { display: block; width: 60px; height: 2px; background: linear-gradient(90deg, transparent, rgba(156,196,238,.6)); position: relative; } .flow__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: rgba(156,196,238,.8); } }
.flow__node { text-align: center; padding: 16px 12px; border-radius: 16px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.03); }
.flow__node .ring { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; border: 1px solid rgba(156,196,238,.5); display: grid; place-items: center; color: var(--accent); background: radial-gradient(circle, rgba(156,196,238,.15), transparent 70%); animation: ringPulse 3s infinite; }
@keyframes ringPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(156,196,238,.25) } 50% { box-shadow: 0 0 0 14px rgba(156,196,238,0) } }
.flow__node .ring svg { width: 22px; height: 22px; }
.flow__node b { display: block; font-size: .9rem; color: #fff; }
.flow__node small { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-dark); font-size: .66rem; color: var(--on-dark-3); }
.flow__caption { margin-top: 18px; text-align: center; font-size: .78rem; color: var(--on-dark-3); }

/* Ziel-Karten */
.goal { display: grid; border-radius: 26px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); border: 1px solid rgba(16,24,32,.06); }
@media (min-width: 900px) { .goal { grid-template-columns: 1fr 1fr; } .goal--rev .goal__media { order: 2; } }
.goal__media { position: relative; min-height: 300px; background: var(--dark-3); }
.goal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.goal__media .cap { position: absolute; left: 14px; bottom: 12px; font-size: .64rem; color: rgba(255,255,255,.85); background: rgba(0,0,0,.45); padding: 4px 9px; border-radius: 6px; backdrop-filter: blur(6px); }
.goal__body { padding: clamp(24px, 4vw, 48px); }
.goal__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 16px; }
.goal__kicker svg { width: 16px; height: 16px; }
.goal__body h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.goal__body p { color: var(--ink-2); }
.checks { list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; font-size: .9rem; color: var(--ink-2); }
.checks li b { color: var(--ink); }
.checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5d99' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat; margin-top: 1px; }
.goal--dark, .sec--dark .checks-wrap { background: linear-gradient(135deg, #171b21, #0e1013); color: var(--on-dark); border-color: var(--line-dark); }
.goal--dark .goal__body p, .sec--dark .checks li, .sec--dark-2 .checks li, .goal--dark .checks li { color: var(--on-dark-2); }
.goal--dark .goal__kicker { color: var(--accent); } .goal--dark h3 em { color: var(--accent); }
.goal--dark .checks, .sec--dark .checks, .sec--dark-2 .checks { border-color: var(--line-dark); }
.goal--dark .checks li b, .sec--dark .checks li b, .sec--dark-2 .checks li b { color: #fff; }
.goal--dark .checks li::before, .sec--dark .checks li::before, .sec--dark-2 .checks li::before { border-color: var(--line-dark); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239cc4ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }

/* Bento / Methode */
.device { position: relative; margin: 0 auto; max-width: 900px; }
.device img { width: 100%; filter: drop-shadow(0 50px 80px rgba(0,0,0,.6)); }
.bento { display: grid; gap: 14px; }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(6, 1fr); } .bento > .b-3 { grid-column: span 3; } .bento > .b-2 { grid-column: span 2; } .bento > .b-4 { grid-column: span 4; } }
.bcard { position: relative; padding: 26px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--line-dark); color: var(--on-dark); overflow: hidden; min-height: 190px; }
.bcard .serif { font-size: 1.05rem; color: var(--on-dark-2); font-style: italic; margin-bottom: 4px; }
.bcard h4 { font-size: 1.05rem; color: #fff; margin-bottom: 10px; }
.bcard p { font-size: .88rem; color: var(--on-dark-2); margin: 0; max-width: 42ch; }
.bcard .big { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); text-align: right; }
.bcard .big b { display: block; font-family: var(--serif); font-size: 4.4rem; line-height: 1; color: #fff; letter-spacing: -.03em; font-weight: 400; }
.bcard .big b sup { font-size: .4em; color: var(--accent); }
.bcard .big small { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); margin-top: 4px; }
@media (max-width: 899px) { .bcard .big { position: static; transform: none; text-align: left; margin-top: 14px; } .bcard .big b { font-size: 3rem; } }
.bcard--cta { text-align: center; display: grid; place-content: center; gap: 10px; }
.bcard--cta .pill { margin-inline: auto; }
.bcard--cta h3 { font-size: 1.9rem; margin: 0; }
.bcard--cta p { margin-inline: auto; font-style: italic; font-family: var(--serif); font-size: 1.05rem; }
.gauge { position: absolute; right: 20px; bottom: 16px; width: 110px; height: 110px; }
.gauge svg { transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 10; }
.gauge .bgc { stroke: rgba(255,255,255,.08); } .gauge .fgc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke-dashoffset 1.6s var(--ease); }
.is-in .gauge .fgc { stroke-dashoffset: 80; }
.gauge .spark { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); }
.gauge .spark svg { width: 26px; height: 26px; transform: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.06); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.feature-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; }
.feature-chips span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.04); font-size: .8rem; color: var(--on-dark-2); }
.feature-chips span b { color: #fff; font-weight: 600; }

/* Tool-Panel */
.tool { border-radius: 26px; background: #0d1117; color: var(--on-dark); border: 1px solid var(--line-dark); padding: clamp(22px, 3.5vw, 44px); box-shadow: 0 50px 100px -50px rgba(0,0,0,.6); position: relative; overflow: hidden; }
.tool::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px circle at 100% 0%, rgba(156,196,238,.12), transparent 55%); pointer-events: none; }
.tool > * { position: relative; }
.tool--light { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.tool--light::before { background: radial-gradient(700px circle at 100% 0%, rgba(156,196,238,.2), transparent 55%); }
.field { display: grid; gap: 6px; }
.field label { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); }
.tool--light .field label { color: var(--ink-3); }
.input { width: 100%; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); color: inherit; font: inherit; font-size: .98rem; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(156,196,238,.18); }
.input::placeholder { color: rgba(255,255,255,.35); }
.tool--light .input { background: var(--bg); border-color: var(--line); } .tool--light .input::placeholder { color: var(--ink-3); } .tool--light .input:focus { border-color: var(--accent-ink); }
select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px; }
select.input option { color: #111; }
textarea.input { min-height: 120px; resize: vertical; }
.input.is-error { border-color: var(--bad); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--on-dark-2); }
.tool--light .check { color: var(--ink-2); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-ink); flex: none; }
.form { display: grid; gap: 12px; }
@media (min-width: 640px) { .form--inline { grid-template-columns: 1fr auto; align-items: end; } }
.range-field { display: grid; gap: 8px; }
.range-field header { display: flex; justify-content: space-between; align-items: baseline; font-size: .86rem; color: var(--on-dark-2); }
.tool--light .range-field header { color: var(--ink-2); }
.range-field output { font-family: var(--serif); font-size: 1.3rem; color: inherit; }
input[type=range].range { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: linear-gradient(90deg, var(--accent-ink) var(--p, 50%), rgba(128,128,128,.25) var(--p, 50%)); border-radius: 999px; outline: none; }
input[type=range].range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-ink); box-shadow: 0 4px 12px rgba(0,0,0,.3); cursor: grab; }
input[type=range].range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-ink); cursor: grab; }
.steps { display: flex; gap: 6px; margin-bottom: 18px; }
.steps i { flex: 1; height: 4px; border-radius: 999px; background: rgba(128,128,128,.25); }
.steps i.is-done { background: var(--accent-ink); }
.wizard__step { display: none; } .wizard__step.is-active { display: grid; gap: 14px; animation: fadeUp .4s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.choice label { position: relative; display: block; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: .86rem; cursor: pointer; transition: border-color .2s, background .2s; }
.choice input { position: absolute; opacity: 0; }
.choice label:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; color: var(--accent-ink); }
.result { margin-top: 20px; display: none; }
.result.is-visible { display: block; animation: fadeUp .5s var(--ease); scroll-margin-top: 100px; }
.score { display: grid; gap: 18px; align-items: center; margin-bottom: 18px; }
@media (min-width: 560px) { .score { grid-template-columns: auto 1fr; } }
.score__ring { width: 110px; height: 110px; position: relative; }
.score__ring svg { transform: rotate(-90deg); }
.score__ring circle { fill: none; stroke-width: 9; }
.score__ring .bgc { stroke: rgba(128,128,128,.2); } .score__ring .fgc { stroke: var(--accent-ink); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.4s var(--ease); }
.score__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.score h3 { font-size: 1.4rem; margin-bottom: 4px; }
.score p { margin: 0; font-size: .9rem; }
.check-list { display: grid; gap: 8px; }
@media (min-width: 720px) { .check-list { grid-template-columns: 1fr 1fr; } }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(128,128,128,.08); border: 1px solid var(--line); font-size: .86rem; }
.tool:not(.tool--light) .check-row { border-color: var(--line-dark); }
.check-row .st { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; color: #fff; }
.check-row.ok .st { background: var(--ok); } .check-row.warn .st { background: var(--warn); } .check-row.bad .st { background: var(--bad); }
.check-row b { display: block; } .check-row span { opacity: .75; font-size: .8rem; }
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kpi { padding: 14px; border-radius: 14px; background: rgba(128,128,128,.08); border: 1px solid var(--line); }
.tool:not(.tool--light) .kpi { border-color: var(--line-dark); }
.kpi b { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1; margin-bottom: 6px; font-weight: 400; }
.kpi.good b { color: var(--ok); }
.kpi span { font-size: .72rem; opacity: .7; }
.alert { padding: 14px 16px; border-radius: 12px; font-size: .9rem; border: 1px solid; }
.alert--ok { background: rgba(47,191,113,.1); border-color: rgba(47,191,113,.4); }
.alert--bad { background: rgba(217,79,92,.1); border-color: rgba(217,79,92,.4); }
.alert--info { background: rgba(156,196,238,.12); border-color: rgba(156,196,238,.4); }
.ki-answer { padding: 16px; border-radius: 12px; background: rgba(128,128,128,.08); border: 1px solid var(--line); font-size: .9rem; white-space: pre-wrap; }
.ki-answer mark { background: rgba(47,191,113,.3); color: inherit; padding: 0 3px; border-radius: 3px; }
.loader { display: inline-flex; gap: 4px; align-items: center; }
.loader i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1s infinite; }
.loader i:nth-child(2) { animation-delay: .2s } .loader i:nth-child(3) { animation-delay: .4s }
@keyframes blink { 0%,80%,100% { opacity: .2 } 40% { opacity: 1 } }

/* Case-Karten */
.case { display: grid; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); color: var(--on-dark); }
@media (min-width: 900px) { .case { grid-template-columns: 1fr 1.1fr; } }
.case__media { position: relative; min-height: 260px; }
.case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__body { padding: clamp(20px, 3vw, 34px); }
.case__meta { display: flex; justify-content: space-between; gap: 10px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 10px; }
.case__meta i { font-style: normal; color: var(--accent); }
.case__body h3 { font-family: var(--sans); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; }
.case__body h3 em { font-style: normal; color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.tags span { padding: 4px 10px; border-radius: 999px; background: rgba(156,196,238,.12); color: var(--accent); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.case__box { padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid var(--line-dark); margin-top: 14px; }
.case__box small { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 8px; }
.case__box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .84rem; color: var(--on-dark-2); }
.case__box li::before { content: "• "; color: var(--accent); }
.case-nav { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.logo-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-top: 40px; }
.logo-wall .wordmark { font-size: 1.1rem; }

/* Team */
.team-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(16,24,32,.06); }
.team-card img { aspect-ratio: 4/5; width: 100%; object-fit: cover; }
.team-card div { padding: 16px 18px 18px; }
.team-card b { display: block; font-size: 1rem; }
.team-card span { font-size: .8rem; color: var(--ink-3); }

/* Reviews */
.badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; }
.badge svg { width: 16px; height: 16px; }
.review-cols { display: grid; gap: 14px; max-height: 620px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
@media (min-width: 700px) { .review-cols { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .review-cols { grid-template-columns: repeat(4, 1fr); } }
.review-col { display: grid; gap: 14px; align-content: start; animation: scrollUp var(--dur, 40s) linear infinite; }
.review-col:nth-child(2n) { animation-direction: reverse; }
.review-cols:hover .review-col { animation-play-state: paused; }
@keyframes scrollUp { from { transform: translateY(0) } to { transform: translateY(-50%) } }
.review { background: #fff; border-radius: 16px; padding: 18px; border: 1px solid var(--line); box-shadow: 0 10px 30px -20px rgba(10,20,30,.25); font-size: .86rem; color: var(--ink-2); }
.review .stars { color: #f5b301; letter-spacing: 2px; font-size: .8rem; margin-bottom: 8px; }
.review p { margin: 0 0 12px; }
.review footer { display: flex; align-items: center; gap: 10px; font-size: .78rem; }
.review footer b { color: var(--ink); display: block; } .review footer span { color: var(--ink-3); }
.review footer .g { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: .7rem; color: #4285f4; flex: none; }
.review-hint { text-align: center; font-size: .74rem; color: var(--ink-3); margin-top: 16px; }

/* Ehrlicher Check */
.honest { border-radius: 22px; background: linear-gradient(160deg, #1a1e25, #0d0f12); color: var(--on-dark); padding: clamp(22px, 3.5vw, 36px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.honest .pill { margin-bottom: 18px; }
.honest ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.honest li { display: flex; gap: 12px; font-size: .94rem; color: var(--on-dark-2); padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); }
.honest li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.honest p { font-size: .88rem; color: var(--on-dark-2); }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 14px; background: #14171c; color: var(--on-dark); border: 1px solid var(--line-dark); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; font-weight: 600; font-size: .92rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); border-radius: 50%; border: 1px solid var(--line-dark); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq__body { padding: 0 20px 20px; font-size: .9rem; color: var(--on-dark-2); }
.faq__body p:last-child { margin: 0; }
.ai-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-btns a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; }
.ai-btns a svg { width: 14px; height: 14px; }

/* Ablauf */
.process { display: grid; gap: 14px; counter-reset: s; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(4, 1fr); } }
.pstep { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); color: var(--on-dark); position: relative; }
.pstep small { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.pstep h3 { font-size: 1.5rem; margin-bottom: 6px; }
.pstep p { font-size: .86rem; color: var(--on-dark-2); margin: 0; }
.pstep::before { counter-increment: s; content: counter(s); position: absolute; right: 18px; top: 14px; font-family: var(--serif); font-size: 2.6rem; color: rgba(255,255,255,.08); line-height: 1; }

/* CTA-Karte */
.cta-card { background: #fff; color: var(--ink); border-radius: 24px; padding: clamp(26px, 4vw, 44px); box-shadow: 0 50px 100px -50px rgba(0,0,0,.7); display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .cta-card { grid-template-columns: 1.3fr 1fr; } }
.cta-card small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; }
.cta-card h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 10px; }
.cta-card h2 em { color: var(--accent-ink); }
.cta-card p { color: var(--ink-2); margin: 0; }
.cta-card__right { display: grid; gap: 10px; justify-items: end; }
.cta-card__badges { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; font-size: .74rem; color: var(--ink-3); }
.cta-card__badges b { display: block; color: var(--ink); font-size: .84rem; }
.cta-card__badges .num { font-family: var(--serif); font-size: 1.6rem; color: var(--ink); line-height: 1; }
@media (max-width: 899px) { .cta-card__right { justify-items: start; } .cta-card__badges { justify-content: flex-start; } }

/* Footer */
.footer { background: var(--bg); padding: clamp(48px, 6vw, 80px) 0 110px; border-top: 1px solid var(--line); }
@media (min-width: 1100px) { .footer { padding-bottom: 36px; } }
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; } }
.footer h5 { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 14px; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .88rem; }
.footer a:hover { color: var(--accent-ink); }
.footer .logo { color: var(--ink); margin-bottom: 12px; }
.footer p { font-size: .86rem; color: var(--ink-2); max-width: 36ch; }
.footer__contact { display: grid; gap: 10px; margin-top: 14px; font-size: .86rem; }
.footer__contact a, .footer__contact span { display: flex; align-items: center; gap: 10px; }
.footer__contact i { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; }
.footer__contact i svg { width: 12px; height: 12px; }
.person { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.person b { display: block; font-size: .9rem; } .person span { font-size: .76rem; color: var(--ink-3); }
.footer__bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--ink-3); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 16px; }
.footer__disclaimer { font-size: .7rem; color: var(--ink-3); margin-top: 26px; max-width: none; }
.social { display: flex; gap: 8px; }
.social a { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.social svg { width: 14px; height: 14px; }
.made { display: inline-flex; align-items: center; gap: 8px; }

/* Mobile-Bar, Consent, Modal, Toast */
.mobile-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 20px; background: rgba(12,14,18,.9); border: 1px solid var(--line-dark); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translateY(130%); transition: transform .5s var(--ease); }
.mobile-bar.is-visible { transform: none; }
@media (min-width: 1100px) { .mobile-bar { display: none; } }
.consent { position: fixed; left: 12px; bottom: 12px; z-index: 1100; width: min(calc(100% - 24px), 440px); background: #fff; color: var(--ink); border-radius: 20px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); border: 1px solid var(--line); transform: translateY(20px); opacity: 0; pointer-events: none; transition: all .5s var(--ease); }
.consent.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.consent__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.consent__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 20px; }
.consent h3 { font-size: 1.6rem; margin: 10px 0 6px; }
.consent p { font-size: .8rem; color: var(--ink-2); }
.consent .btn-row { margin-top: 14px; }
.consent__opts { display: none; gap: 8px; margin-top: 10px; }
.consent__opts.is-open { display: grid; }
.consent__opts label { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__box { width: min(100%, 460px); background: #fff; color: var(--ink); border-radius: 22px; padding: 28px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.8); transform: translateY(14px); transition: transform .4s var(--ease); position: relative; }
.modal.is-open .modal__box { transform: none; }
.modal__close { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 18px; z-index: 2; }
.modal h3 { font-size: 1.7rem; }
.modal--video .modal__box { width: min(100%, 900px); padding: 0; background: #000; overflow: hidden; aspect-ratio: 16/9; display: grid; place-items: center; color: #fff; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 12px; background: #15181d; color: #fff; z-index: 1300; transition: all .4s var(--ease); font-size: .88rem; max-width: calc(100% - 32px); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Page-Hero (Unterseiten) */
.page-hero { background: radial-gradient(900px 500px at 70% 20%, #141c26 0%, var(--dark) 60%); color: var(--on-dark); padding: calc(var(--nav-h) + 56px) 0 clamp(48px, 6vw, 80px); }
.page-hero h1 { color: #fff; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .74rem; color: var(--on-dark-3); margin-bottom: 20px; }
.breadcrumb ol { display: contents; margin: 0; padding: 0; } .breadcrumb li { list-style: none; } .breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.img-frame { border-radius: 20px; overflow: hidden; aspect-ratio: 3/2; background: var(--dark-3); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.img-frame--portrait { aspect-ratio: 4/5; }

/* Cards (Unterseiten) */
.card { background: #fff; border: 1px solid rgba(16,24,32,.06); border-radius: 20px; padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.5rem; } .card p { color: var(--ink-2); font-size: .92rem; margin-bottom: 0; }
.card ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: .88rem; color: var(--ink-2); }
.card ul li { padding-left: 18px; position: relative; } .card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-ink); font-weight: 700; }
.card .num { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; display: block; margin-bottom: 8px; }
.sec--dark .card, .sec--dark-2 .card { background: rgba(255,255,255,.04); border-color: var(--line-dark); color: var(--on-dark); box-shadow: none; }
.sec--dark .card p, .sec--dark .card ul, .sec--dark-2 .card p, .sec--dark-2 .card ul { color: var(--on-dark-2); } .sec--dark .card .num, .sec--dark .card ul li::before, .sec--dark-2 .card .num, .sec--dark-2 .card ul li::before { color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; padding: clamp(20px, 3vw, 30px); }
.stat b { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.02em; font-weight: 400; } .stat b span { font-size: inherit; }
.stat b sup { font-size: .45em; color: var(--accent-ink); }
.stat span { display: block; margin-top: 8px; font-size: .84rem; color: var(--ink-3); }
.timeline { position: relative; display: grid; gap: 26px; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; } .tl-item::before { content: ""; position: absolute; left: -34px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.tl-item.is-active::before { border-color: var(--accent-ink); box-shadow: 0 0 0 5px var(--accent-soft); }
.tl-item small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 4px; }
.tl-item h3 { font-size: 1.4rem; margin-bottom: 4px; } .tl-item p { color: var(--ink-2); font-size: .92rem; margin: 0; }
.prose { max-width: 760px; } .prose h2 { font-size: 1.7rem; margin-top: 1.8em; } .prose p, .prose li { color: var(--ink-2); } .prose a { color: var(--accent-ink); text-decoration: underline; }
.freigabe { background: rgba(226,164,0,.15); color: #8a6400; padding: 0 6px; border-radius: 4px; font-size: .72em; font-weight: 600; }
.sec--dark .freigabe, .page-hero .freigabe, .hero .freigabe { color: #ffd466; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .9rem; }
.cmp-table th, .cmp-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp-table thead th { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--bg); }
.cmp-table tbody tr:last-child td { border-bottom: 0; } .cmp-table .yes { color: var(--ok); font-weight: 600; } .cmp-table .no { color: var(--ink-3); } .cmp-table .hl { background: var(--accent-soft); }

/* Motion */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(2) { transition-delay: .08s } .stagger.is-in > *:nth-child(3) { transition-delay: .16s } .stagger.is-in > *:nth-child(4) { transition-delay: .24s } .stagger.is-in > *:nth-child(5) { transition-delay: .32s } .stagger.is-in > *:nth-child(6) { transition-delay: .4s }
.fade { opacity: 0; transform: translateY(14px); animation: fadeUp .9s var(--ease) forwards; }
.fade[data-d="1"] { animation-delay: .1s } .fade[data-d="2"] { animation-delay: .2s } .fade[data-d="3"] { animation-delay: .3s } .fade[data-d="4"] { animation-delay: .4s } .fade[data-d="5"] { animation-delay: .5s }
.counter { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .reveal, .stagger > *, .fade { opacity: 1; transform: none; }
  .review-col { animation: none; }
}

/* Mobile Header */
@media (max-width: 1099px) {
  .header__inner { padding: 6px 6px 6px 12px; gap: 6px; }
  .logo { font-size: .95rem; gap: 8px; }
  .logo svg, .logo img { width: 28px; height: 28px; flex: none; }
  .header__right .btn--cta { padding: 9px 12px; font-size: .78rem; }
  .header__right .btn--cta svg { display: none; }
}
@media (max-width: 420px) {
  .header__right .btn--cta { font-size: .74rem; padding: 9px 10px; }
  .logo span em { display: none; }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--nav-h) + 20px); }
  .hero__branch a { padding: 6px 11px; font-size: .74rem; }
  .hero .lead { font-size: .95rem; }
  .result-card { position: relative; margin-top: -40px; }
  .hero__visual { min-height: 0; }
  .hero__obj { position: relative; left: 0; top: 0; width: 100%; transform: none; animation: none; margin: -20px 0 -60px; }
}

/* Foto-Galerie (Marquee) */
.gallery { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gallery__track { display: flex; gap: 14px; width: max-content; animation: galleryMove var(--dur, 60s) linear infinite; }
.gallery:hover .gallery__track { animation-play-state: paused; }
.gallery__track img { height: clamp(180px, 24vw, 300px); width: auto; border-radius: 16px; object-fit: cover; box-shadow: 0 20px 40px -24px rgba(0,0,0,.5); }
@keyframes galleryMove { to { transform: translateX(-50%); } }
.gallery + .gallery { margin-top: 14px; }
.gallery--rev .gallery__track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .gallery__track { animation: none; } }

/* ==========================================================================
   MOTION PACK v2 – mehr als Bese
   ========================================================================== */
/* Scroll-Fortschritt + Header-Zustand */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), #fff); z-index: 1100; transition: width .12s linear; box-shadow: 0 0 10px var(--accent); }
.header { transition: transform .4s var(--ease), padding .3s; }
.header.is-hidden { transform: translateY(-110%); }
.header.is-scrolled { padding: 8px 0; }
.header.is-scrolled .header__inner { background: rgba(10, 12, 16, 0.94); }

/* Aurora-Hintergründe */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { width: 560px; height: 560px; left: 40%; top: -10%; background: radial-gradient(circle, rgba(156,196,238,.45), transparent 65%); animation: auroraA 18s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 460px; height: 460px; right: -8%; top: 30%; background: radial-gradient(circle, rgba(60,110,180,.4), transparent 65%); animation: auroraB 22s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 380px; height: 380px; left: -6%; bottom: -10%; background: radial-gradient(circle, rgba(156,196,238,.25), transparent 65%); animation: auroraC 26s ease-in-out infinite alternate; }
@keyframes auroraA { from { transform: translate(-10%, 0) scale(1) } to { transform: translate(14%, 12%) scale(1.15) } }
@keyframes auroraB { from { transform: translate(0, -6%) scale(1.1) } to { transform: translate(-16%, 10%) scale(.9) } }
@keyframes auroraC { from { transform: translate(0, 0) } to { transform: translate(18%, -14%) scale(1.2) } }
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 1; }

/* Hero-Parallax, Wort-Reveal, Partikel */
.hero__visual { perspective: 1200px; }
.hero__obj { transition: transform .12s linear; }
.hero__visual.is-parallax .hero__obj { animation: none; }
.hero__parts { position: absolute; inset: 0; pointer-events: none; }
.hero__parts i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0; animation: partUp var(--d, 9s) linear infinite; animation-delay: var(--dl, 0s); left: var(--x, 50%); bottom: 10%; box-shadow: 0 0 8px var(--accent); }
@keyframes partUp { 0% { transform: translateY(0) scale(.6); opacity: 0 } 15% { opacity: .9 } 100% { transform: translateY(-420px) scale(1.2); opacity: 0 } }
.words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.words .w > span { display: inline-block; transform: translateY(110%); animation: wordUp 1s var(--ease) forwards; animation-delay: var(--wd, 0s); }
@keyframes wordUp { to { transform: none } }
.result-card { transition: transform .15s linear; }
.result-card__kicker::before { animation: pulse 2.2s infinite; }
.ticker { display: inline-block; min-width: 1.2em; font-variant-numeric: tabular-nums; font-size: inherit !important; color: inherit; }

/* Button-Shine (wie Bese) + magnetisch */
.btn--accent, .btn--primary, .btn--cta { overflow: hidden; isolation: isolate; }
.btn--accent::after, .btn--primary::after, .btn--cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-130%); animation: btnShine 5s ease-in-out infinite; animation-delay: var(--sd, 1.5s); pointer-events: none; }
.btn--primary::after, .btn--cta::after { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); }
@keyframes btnShine { 0%, 70% { transform: translateX(-130%) } 100% { transform: translateX(130%) } }
.magnetic { transition: transform .25s var(--ease), box-shadow .3s, background .25s; will-change: transform; }

/* Headline-Zeilen-Reveal */
.lines { visibility: visible; }
.lines .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.lines .ln > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.lines.is-in .ln > span { transform: none; }
.lines.is-in .ln:nth-child(2) > span { transition-delay: .1s } .lines.is-in .ln:nth-child(3) > span { transition-delay: .2s }

/* Bild-Wipe + Parallax */
.wipe { position: relative; overflow: hidden; }
.wipe::after { content: ""; position: absolute; inset: 0; background: var(--bg); transform-origin: right; transition: transform 1.1s var(--ease) .1s; z-index: 2; }
.sec--dark .wipe::after, .goal--dark .wipe::after, .page-hero .wipe::after { background: var(--dark); }
.wipe.is-in::after { transform: scaleX(0); }
.wipe img { transform: scale(1.12); transition: transform 1.8s var(--ease); }
.wipe.is-in img { transform: scale(1); }
.plx img { will-change: transform; }

/* Tilt + Spotlight */
.tilt { transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .5s; }
.spot { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(156,196,238,.16), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 1; }
.spot:hover::before { opacity: 1; }

/* Sticky gestapelte Ziel-Karten */
.stack { display: grid; gap: 22px; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .stack { gap: 0; }
  .stack .goal { position: sticky; top: calc(var(--nav-h) + 24px); margin-bottom: 40vh; transform-origin: top center; will-change: transform; }
  .stack .goal:nth-child(1) { z-index: 1 } .stack .goal:nth-child(2) { z-index: 2 } .stack .goal:nth-child(3) { z-index: 3 } .stack .goal:nth-child(4) { z-index: 4 } .stack .goal:nth-child(5) { z-index: 5 }
  .stack .goal.is-behind { transform: scale(.96) translateY(-14px); opacity: .9; }
  .stack .goal { transition: transform .5s var(--ease); }
  .stack::after { content: ""; display: block; height: 4vh; }
  .stack .goal:last-child { margin-bottom: 0; }
}

/* Flow-Diagramm: fließende Pakete */
.flow-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.flow-scroll::-webkit-scrollbar { display: none; }
.flow-svg { width: 100%; min-width: 760px; height: auto; display: block; }
.flow-hint { display: none; text-align: center; font-size: .7rem; color: var(--on-dark-3); margin-top: 6px; }
@media (max-width: 800px) { .flow-hint { display: block; } }
.flow-svg .lane { fill: none; stroke: rgba(156,196,238,.22); stroke-width: 1.5; }
.flow-svg .pkt { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 260; stroke-dashoffset: 274; animation: pkt 3.2s linear infinite; animation-delay: var(--pd, 0s); filter: drop-shadow(0 0 4px var(--accent)); }
@keyframes pkt { to { stroke-dashoffset: 0 } }
.flow-svg .node { fill: #0f1216; stroke: rgba(156,196,238,.45); }
.flow-svg .node-ring { fill: none; stroke: var(--accent); opacity: 0; transform-origin: center; transform-box: fill-box; animation: nodeRing 3.2s ease-out infinite; }
@keyframes nodeRing { 0% { transform: scale(.6); opacity: .7 } 100% { transform: scale(1.8); opacity: 0 } }
.flow-svg text { fill: #fff; font-family: var(--sans); font-size: 12px; font-weight: 600; }
.flow-svg .sub { fill: rgba(255,255,255,.5); font-size: 10px; font-weight: 500; }
.flow-svg .src { fill: rgba(255,255,255,.7); font-size: 11px; font-weight: 500; }
.flow-svg .ico { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Phone-Mock mit Heatmap (Website, die anrufen lässt) */
.phone { position: relative; width: min(290px, 72%); margin: 44px auto 30px; aspect-ratio: 9/19.2; border-radius: 40px; background: #0b0d10; padding: 10px; box-shadow: 0 0 0 2px #2a2f38, 0 40px 80px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-4deg); transition: transform .8s var(--ease); }
.is-in .phone { transform: rotate(0) }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #fff; }
.phone__screen img { width: 100%; height: auto; display: block; will-change: transform; }
@keyframes phoneScroll { 0%, 20% { transform: translateY(0) } 45%, 60% { transform: translateY(-28%) } 85%, 100% { transform: translateY(0) } }
.phone__notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 36%; height: 22px; border-radius: 0 0 16px 16px; background: #0b0d10; z-index: 3; }
.heat { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, rgba(255,80,60,.55), rgba(255,160,0,.25) 45%, transparent 70%); mix-blend-mode: multiply; animation: heat 4s ease-in-out infinite; animation-delay: var(--hd, 0s); pointer-events: none; z-index: 2; }
@keyframes heat { 0%, 100% { transform: scale(.8); opacity: .5 } 50% { transform: scale(1.15); opacity: .95 } }
.tap { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.3); z-index: 4; opacity: 0; animation: tap 14s ease-out infinite; }
@keyframes tap { 0%, 60% { opacity: 0; transform: scale(.4) } 63% { opacity: 1; transform: scale(1) } 70% { opacity: 0; transform: scale(2.4) } 100% { opacity: 0 } }
.callpop { position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 5; padding: 10px 12px; border-radius: 14px; background: rgba(20,22,28,.92); color: #fff; display: flex; align-items: center; gap: 10px; font-size: 11px; transform: translateY(140%); animation: callpop 14s var(--ease) infinite; box-shadow: 0 10px 30px -10px rgba(0,0,0,.8); }
.callpop i { width: 30px; height: 30px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex: none; animation: ring .6s ease-in-out infinite alternate; }
.callpop i svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.2; }
.callpop b { display: block; font-size: 11.5px; } .callpop span { opacity: .7; font-size: 10px; }
@keyframes callpop { 0%, 64% { transform: translateY(140%) } 70%, 90% { transform: translateY(0) } 96%, 100% { transform: translateY(140%) } }
@keyframes ring { from { transform: rotate(-12deg) } to { transform: rotate(12deg) } }
.goal__media .mock-label { position: absolute; left: 14px; top: 12px; z-index: 3; }

/* Kapazitäts-Chart (Auftragsgewinnung) */
.capchart { position: absolute; inset: 0; padding: clamp(22px, 3.4vw, 40px); display: grid; grid-template-rows: auto 1fr auto; gap: 18px; background: radial-gradient(600px 300px at 80% 0%, rgba(156,196,238,.12), transparent 60%), #111318; }
.capchart__head { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--on-dark-2); }
.capchart__head b { color: #fff; font-family: var(--serif); font-size: 2.2rem; font-weight: 400; display: block; line-height: 1; margin-top: 4px; }
.capchart__head small { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
.capchart svg { width: 100%; height: 100%; overflow: visible; }
.capchart .grid-l { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.capchart .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.capchart .area { fill: url(#capGrad); opacity: 0; }
.capchart .dot { fill: #fff; stroke: var(--accent); stroke-width: 3; opacity: 0; }
.capchart .dot-ring { fill: none; stroke: var(--accent); opacity: 0; transform-origin: center; transform-box: fill-box; }
.capchart .lbl { fill: rgba(255,255,255,.5); font-size: 11px; font-family: var(--sans); font-weight: 500; }
.capchart .lbl-y { fill: rgba(255,255,255,.35); font-size: 10px; font-family: var(--sans); }
.capchart .line-b { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 2; stroke-dasharray: 5 6; }
.capchart .tag { opacity: 0; }
.capchart .tag rect { fill: #1b2a3c; stroke: rgba(156,196,238,.5); }
.capchart .tag text { fill: #fff; font-size: 11px; font-weight: 600; font-family: var(--sans); }
.is-in .capchart .line { animation: capDraw 2.2s var(--ease) .3s forwards; }
.is-in .capchart .area { animation: capArea 1s ease 1.6s forwards; }
.is-in .capchart .dot { animation: capIn .5s ease 2.2s forwards; }
.is-in .capchart .dot-ring { animation: nodeRing 2.4s ease-out 2.4s infinite; }
.is-in .capchart .tag { animation: capIn .6s var(--ease) 2.4s forwards; }
@keyframes capDraw { to { stroke-dashoffset: 0 } } @keyframes capArea { to { opacity: 1 } } @keyframes capIn { to { opacity: 1 } }
.capchart__foot { display: flex; gap: 18px; font-size: .72rem; color: var(--on-dark-2); flex-wrap: wrap; align-items: center; }
.capchart__foot span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--accent); vertical-align: middle; }
.capchart__foot span.b::before { background: rgba(255,255,255,.3); }
.capchart__foot .note { margin-left: auto; opacity: .55; font-size: .66rem; } .capchart__foot .note::before { display: none; }

/* Live-Dashboard (Laptop + Phone in HTML) */
.devices { position: relative; max-width: 980px; margin: 0 auto; padding-bottom: 40px; }
.laptop { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #2a2f38, #15181d); padding: 14px 14px 24px; box-shadow: 0 60px 120px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12); }
.laptop::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -14px; height: 16px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #30353f, #1a1d23); box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); }
.laptop__screen { width: 100%; height: 100%; border-radius: 10px; background: #0c0f14; overflow: hidden; display: grid; grid-template-columns: 56px 1fr; font-size: 11px; color: var(--on-dark); position: relative; }
.dash__side { background: #0a0d12; border-right: 1px solid var(--line-dark); display: grid; align-content: start; gap: 6px; padding: 12px 10px; }
.dash__side i { display: block; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); }
.dash__side i.on { background: rgba(156,196,238,.18); border-color: rgba(156,196,238,.5); }
.dash__main { padding: 14px 16px; display: grid; grid-template-rows: auto auto 1fr; gap: 12px; min-width: 0; }
.dash__top { display: flex; justify-content: space-between; align-items: center; }
.dash__top b { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-dark); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pulse 1.6s infinite; }
.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dkpi { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); }
.dkpi b { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1; }
.dkpi > span { font-size: 9px; color: var(--on-dark-3); display: block; margin-top: 3px; }
.dkpi i { font-style: normal; color: var(--ok); font-size: 9px; margin-left: 4px; }
.dash__body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; min-height: 0; padding-right: 15%; }
.dash__chart { border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line-dark); padding: 10px; display: grid; grid-template-rows: auto 1fr; gap: 6px; min-height: 0; }
.dash__chart svg { width: 100%; height: 100%; overflow: visible; }
.dash__chart .bar { fill: rgba(156,196,238,.25); transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease); transform-box: fill-box; }
.dash__chart .bar.hi { fill: var(--accent); }
.is-in .dash__chart .bar { transform: scaleY(1); }
.dash__feed { border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line-dark); padding: 10px; display: grid; align-content: start; gap: 6px; overflow: hidden; min-height: 0; }
.dash__feed small { font-size: 9px; color: var(--on-dark-3); letter-spacing: .1em; text-transform: uppercase; }
.fi { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); font-size: 10px; animation: fiIn .6s var(--ease); }
.fi i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; background: rgba(156,196,238,.15); color: var(--accent); }
.fi i svg { width: 11px; height: 11px; }
.fi b { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .fi span { color: var(--on-dark-3); font-size: 9px; }
.fi em { margin-left: auto; font-style: normal; font-size: 8.5px; padding: 2px 6px; border-radius: 5px; background: rgba(47,191,113,.18); color: var(--ok); }
.fi em.ki { background: rgba(156,196,238,.18); color: var(--accent); }
@keyframes fiIn { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
.phone-mini { position: absolute; right: -3%; bottom: -10px; width: 21%; min-width: 150px; aspect-ratio: 9/19; border-radius: 26px; background: #0b0d10; padding: 7px; box-shadow: 0 0 0 2px #2a2f38, 0 40px 80px -30px rgba(0,0,0,.9); animation: floatY 7s ease-in-out infinite; z-index: 2; }
.phone-mini__screen { width: 100%; height: 100%; border-radius: 20px; background: #0c0f14; padding: 26px 10px 10px; display: grid; align-content: start; gap: 7px; font-size: 9px; color: var(--on-dark); overflow: hidden; }
.phone-mini__screen .dkpi b { font-size: 1.1rem; }
.phone-mini__screen .live { font-size: 7.5px; padding: 2px 7px; }
.ring-wrap { display: grid; place-items: center; padding: 6px; }
.ring { width: 70px; height: 70px; position: relative; }
.ring svg { transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 7; }
.ring .bg { stroke: rgba(255,255,255,.08); } .ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 188; stroke-dashoffset: 188; transition: stroke-dashoffset 1.6s var(--ease) .4s; }
.is-in .ring .fg { stroke-dashoffset: 42; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
@media (max-width: 760px) { .dash__kpis { grid-template-columns: repeat(2, 1fr); } .dash__body { grid-template-columns: 1fr; } .dash__feed { display: none; } .phone-mini { display: none; } .laptop__screen { grid-template-columns: 1fr; } .dash__side { display: none; } }

/* Deutschland-Karte mit Standorten */
.map-wrap { position: relative; display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .map-wrap { grid-template-columns: 1fr 1fr; } }
.map { position: relative; max-width: 460px; margin: 0 auto; width: 100%; }
.map svg { width: 100%; height: auto; display: block; overflow: visible; }
.map .land { fill: rgba(255,255,255,.04); stroke: rgba(156,196,238,.35); stroke-width: 1.2; stroke-linejoin: round; }
.map .pin { cursor: pointer; }
.map .pin circle.c { fill: var(--accent); stroke: #0b0d10; stroke-width: 2; }
.map .pin circle.r { fill: none; stroke: var(--accent); opacity: 0; transform-origin: center; transform-box: fill-box; animation: nodeRing 2.6s ease-out infinite; animation-delay: var(--pd, 0s); }
.map .pin.partner circle.c { fill: #fff; opacity: .55; }
.map .pin.partner circle.r { stroke: #fff; opacity: .3; }
.map .link { fill: none; stroke: rgba(156,196,238,.35); stroke-width: 1; stroke-dasharray: 4 6; animation: dashMove 6s linear infinite; }
@keyframes dashMove { to { stroke-dashoffset: -100 } }
.map .pin.is-active circle.c { fill: #fff; r: 8; } .map .pin.is-active text { fill: var(--accent); }
.map .pin text { fill: #fff; font-family: var(--sans); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: #0b0d10; stroke-width: 4px; }
.map .pin.partner text { fill: rgba(255,255,255,.6); font-weight: 500; font-size: 10px; }
.map-legend { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 14px; font-size: .76rem; color: var(--on-dark-2); }
.map-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: middle; }
.map-legend span.p::before { background: rgba(255,255,255,.55); }
.map-cards { display: grid; gap: 10px; }
.map-card { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; transition: background .3s, border-color .3s, transform .4s var(--ease); cursor: pointer; }
.map-card:hover, .map-card.is-active { background: rgba(156,196,238,.1); border-color: rgba(156,196,238,.45); transform: translateX(6px); }
.map-card i { width: 34px; height: 34px; border-radius: 10px; background: rgba(156,196,238,.15); color: var(--accent); display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; }
.map-card b { display: block; font-size: .92rem; } .map-card span { font-size: .76rem; color: var(--on-dark-3); }
.map-card small { font-size: .68rem; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }

/* Rechner */
.calc-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .calc-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.calc-out { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.calc-out .kpi b { color: var(--accent-ink); font-size: 1.7rem; }
.calc-out .kpi.good b { color: var(--ok); }
.vs { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.vs::before, .vs::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Rückruf-Modal, WhatsApp, Nach-oben */
.fab { position: fixed; right: 12px; bottom: 84px; z-index: 890; display: grid; gap: 8px; }
@media (max-width: 1099px) { .fab .top { display: none; } .fab a, .fab button { width: 42px; height: 42px; } }
@media (min-width: 1100px) { .fab { bottom: 24px; } }
.fab a, .fab button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); transition: transform .3s var(--ease), opacity .3s; }
.fab a svg, .fab button svg { width: 20px; height: 20px; }
.fab .wa { background: #25d366; }
.fab .cb { background: var(--navy); position: relative; }
.fab .cb::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: nodeRing 2.4s ease-out infinite; }
.fab .top { background: #fff; color: var(--ink); border: 1px solid var(--line); opacity: 0; pointer-events: none; transform: translateY(10px); }
.fab .top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.fab a:hover, .fab button:hover { transform: translateY(-3px) scale(1.05); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--on-dark-2); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 1.8s infinite; }
.status.off::before { background: var(--warn); animation: none; }

/* FAQ sanft */
.faq__body { overflow: hidden; }
.faq details[open] .faq__body { animation: faqIn .45s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

/* Orbit auf KI-Karte */
.orbit { position: absolute; right: 18px; bottom: 14px; width: 120px; height: 120px; pointer-events: none; }
.orbit::before, .orbit::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(156,196,238,.35); animation: spin 14s linear infinite; }
.orbit::after { inset: 18px; animation-duration: 9s; animation-direction: reverse; border-style: solid; border-color: rgba(156,196,238,.2); }
.orbit i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); top: -5px; left: calc(50% - 5px); transform-origin: 5px 65px; animation: spin 14s linear infinite; box-shadow: 0 0 10px var(--accent); }
.orbit i:nth-child(2) { width: 6px; height: 6px; top: 15px; left: calc(50% - 3px); transform-origin: 3px 45px; animation-duration: 9s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg) } }

/* Zähler im Panel */
.panel-dark__head b .ticker { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .hero__parts i, .btn--accent::after, .btn--primary::after, .btn--cta::after, .phone__screen img, .heat, .tap, .callpop, .orbit::before, .orbit::after, .orbit i, .map .link, .map .pin circle.r, .flow-svg .pkt { animation: none !important; }
  .words .w > span, .lines .ln > span { transform: none; }
  .wipe::after { display: none; } .wipe img { transform: none; }
  .stack .goal { position: static; transform: none; filter: none; }
}

/* ==========================================================================
   v3 – Hero, KI-Module, Automatisierung, Persönlich
   ========================================================================== */
/* Hero v3 */
.hero { padding-top: calc(var(--nav-h) + 36px); }
.hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(156,196,238,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(156,196,238,.06) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000, transparent 75%); pointer-events: none; }
.hero__beam { position: absolute; left: 50%; top: -20%; width: 1px; height: 140%; background: linear-gradient(180deg, transparent, rgba(156,196,238,.5), transparent); transform: rotate(28deg); opacity: .35; animation: beam 9s ease-in-out infinite; pointer-events: none; }
@keyframes beam { 0%, 100% { transform: translateX(-20vw) rotate(28deg) } 50% { transform: translateX(20vw) rotate(28deg) } }
.rot { display: inline-grid; vertical-align: baseline; text-align: left; }
.rot > span { grid-area: 1/1; white-space: nowrap; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); font-style: italic; color: var(--accent); }
.rot > span.is-on { opacity: 1; transform: none; }
.rot > span.is-off { opacity: 0; transform: translateY(-14px); }
.hero__who { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); font-size: .8rem; color: var(--on-dark-2); }
.hero__who img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.hero__who b { color: #fff; font-weight: 600; }
.stage { position: relative; min-height: 700px; }
.stage__obj { position: absolute; left: 50%; top: 36%; width: 110%; max-width: none; transform: translate(-50%, -50%); opacity: .85; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 50%, transparent 80%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 50%, transparent 80%); pointer-events: none; }
.ncard { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(16,19,25,.86); border: 1px solid var(--line-dark); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); font-size: .78rem; color: var(--on-dark); animation: ncardFloat var(--fd, 7s) ease-in-out infinite; animation-delay: var(--fl, 0s); opacity: 0; }
.ncard.is-in { opacity: 1; }
.ncard i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(156,196,238,.16); color: var(--accent); flex: none; }
.ncard i svg { width: 15px; height: 15px; }
.ncard i.ok { background: rgba(47,191,113,.18); color: var(--ok); }
.ncard i.star { background: rgba(245,179,1,.18); color: #f5b301; }
.ncard b { display: block; font-size: .8rem; } .ncard span { color: var(--on-dark-3); font-size: .7rem; }
.ncard em { margin-left: 8px; font-style: normal; font-size: .62rem; padding: 2px 7px; border-radius: 6px; background: rgba(47,191,113,.18); color: var(--ok); white-space: nowrap; }
.ncard em.ki { background: rgba(156,196,238,.18); color: var(--accent); }
@keyframes ncardFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
.ncard--a { left: -4%; top: 0; --fd: 7s; }
.ncard--b { left: -4%; top: 60%; --fd: 8s; --fl: -2s; }
.ncard--c { left: -2%; top: 36%; --fd: 9s; --fl: -4s; }
.stage .result-card { bottom: 0; right: -2%; width: min(100%, 340px); padding: 14px; }
.stage .result-card__body { grid-template-columns: 80px 1fr; } .stage .result-card__img { width: 80px; height: 80px; } .stage .result-card b { font-size: 1.6rem; } .stage .result-card p { font-size: .76rem; }
@media (max-width: 1023px) { .stage { min-height: 0; padding-top: 10px; } .stage__obj { position: relative; left: 0; top: 0; width: 100%; transform: none; margin: -30px 0 -70px; } .ncard { position: relative; left: auto; right: auto; top: auto; margin-bottom: 8px; width: max-content; max-width: 100%; animation: none; } .ncard--b { margin-left: auto; } .stage .result-card { position: relative; margin-top: 8px; } }
.scroll-hint { display: none; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 22px; height: 36px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.3); }
.scroll-hint::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: var(--accent); transform: translateX(-50%); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translate(-50%, 0); opacity: 1 } 100% { transform: translate(-50%, 12px); opacity: 0 } }
@media (min-width: 1024px) { .scroll-hint { display: block; } }

/* Live-Ticker */
.ticker-bar { background: #0c0f14; border-block: 1px solid var(--line-dark); color: var(--on-dark); overflow: hidden; position: relative; }
.ticker-bar::before { content: "LIVE · Beispielwerte"; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: #0c0f14; font-size: .62rem; letter-spacing: .16em; font-weight: 700; color: var(--accent); box-shadow: 20px 0 30px #0c0f14; }
.ticker-bar__track { display: flex; gap: 0; width: max-content; animation: marquee 50s linear infinite; padding: 12px 0; }
.ticker-bar:hover .ticker-bar__track { animation-play-state: paused; }
.ticker-bar__track span { display: inline-flex; align-items: center; gap: 8px; padding: 0 28px; font-size: .8rem; color: var(--on-dark-2); border-right: 1px solid var(--line-dark); }
.ticker-bar__track span b { color: #fff; font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.ticker-bar__track span i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.ticker-bar__track span i.ki { background: var(--accent); } .ticker-bar__track span i.star { background: #f5b301; }
@keyframes marquee { to { transform: translateX(-50%) } }

/* KI-Betriebs-Check */
.scan-grid { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 760px) { .scan-grid { grid-template-columns: repeat(4, 1fr); } }
.scan { position: relative; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); overflow: hidden; min-height: 130px; display: grid; align-content: start; gap: 8px; transition: border-color .4s, background .4s; }
.scan__head { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 600; color: var(--on-dark-2); }
.scan__head i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(156,196,238,.14); color: var(--accent); }
.scan__head i svg { width: 13px; height: 13px; }
.scan__state { font-size: .68rem; color: var(--on-dark-3); display: flex; align-items: center; gap: 6px; }
.scan.is-scanning::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: scanLine 1.4s ease-in-out infinite; box-shadow: 0 0 12px var(--accent); }
@keyframes scanLine { 0% { top: 0 } 100% { top: 100% } }
.scan.is-scanning .scan__state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.scan.is-done { border-color: rgba(156,196,238,.4); background: rgba(156,196,238,.06); }
.scan__score { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: #fff; display: flex; align-items: baseline; gap: 6px; }
.scan__score small { font-family: var(--sans); font-size: .66rem; color: var(--on-dark-3); }
.scan__bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.scan__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 1.2s var(--ease); }
.scan.bad .scan__bar i { background: var(--bad); } .scan.warn .scan__bar i { background: var(--warn); } .scan.ok .scan__bar i { background: var(--ok); }
.scan__msg { font-size: .74rem; color: var(--on-dark-2); min-height: 2.4em; }
.findings { display: grid; gap: 8px; margin-top: 18px; }
@media (min-width: 900px) { .findings { grid-template-columns: 1fr 1fr; } }
.finding { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); font-size: .84rem; opacity: 0; transform: translateY(8px); animation: fadeUp .5s var(--ease) forwards; animation-delay: var(--d, 0s); }
.finding i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; background: var(--bad); }
.finding.warn i { background: var(--warn); } .finding.ok i { background: var(--ok); } .finding.win i { background: var(--accent-ink); }
.finding b { display: block; } .finding span { color: var(--on-dark-3); font-size: .78rem; }
.total { display: grid; gap: 18px; align-items: center; margin-top: 22px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(156,196,238,.12), rgba(255,255,255,.02)); border: 1px solid rgba(156,196,238,.3); }
@media (min-width: 640px) { .total { grid-template-columns: auto 1fr auto; } }
.total h3 { font-size: 1.4rem; margin: 0 0 4px; } .total p { margin: 0; font-size: .86rem; color: var(--on-dark-2); }
.typing::after { content: "▍"; animation: blink 1s infinite; color: var(--accent); }

/* Anruf-Demo */
.call-demo { border-radius: 20px; background: #0d1117; border: 1px solid var(--line-dark); padding: 20px; color: var(--on-dark); display: grid; gap: 14px; position: relative; overflow: hidden; }
.call-demo__top { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; color: var(--on-dark-2); }
.wave { display: flex; align-items: center; gap: 3px; height: 44px; }
.wave i { width: 3px; border-radius: 2px; background: var(--accent); height: 20%; animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -.07s); opacity: .9; }
.wave.is-idle i { animation-play-state: paused; height: 12% !important; opacity: .3; }
@keyframes wave { 0%, 100% { height: 18% } 50% { height: 90% } }
.transcript { min-height: 4.4em; font-size: .9rem; line-height: 1.55; color: var(--on-dark); padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); }
.transcript small { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 6px; }
.tags-out { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; }
.tag-k { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: .74rem; border: 1px solid var(--line-dark); background: rgba(255,255,255,.04); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.tag-k.is-in { opacity: 1; transform: none; }
.tag-k b { color: #fff; } .tag-k.ok { border-color: rgba(47,191,113,.5); color: var(--ok); } .tag-k.ki { border-color: rgba(156,196,238,.5); color: var(--accent); }
.verdict { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(47,191,113,.1); border: 1px solid rgba(47,191,113,.4); font-size: .84rem; opacity: 0; transform: translateY(6px); transition: all .5s var(--ease); }
.verdict.is-in { opacity: 1; transform: none; }
.verdict i { width: 30px; height: 30px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; }
.verdict b { display: block; } .verdict span { font-size: .76rem; color: var(--on-dark-2); }

/* Automations-Flow (Chat) */
.chat { border-radius: 20px; background: #0d1117; border: 1px solid var(--line-dark); padding: 16px; display: grid; gap: 10px; color: var(--on-dark); min-height: 360px; align-content: start; }
.chat__top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); font-size: .8rem; }
.chat__top img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.chat__top b { display: block; } .chat__top span { font-size: .7rem; color: var(--on-dark-3); }
.bub { max-width: 86%; padding: 10px 12px; border-radius: 14px; font-size: .82rem; line-height: 1.45; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .4s, transform .5s var(--ease); position: relative; }
.bub.is-in { opacity: 1; transform: none; }
.bub.sys { background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); align-self: start; color: var(--on-dark-2); font-size: .72rem; justify-self: center; text-align: center; max-width: 100%; }
.bub.out { background: #1f3a2d; justify-self: end; border-bottom-right-radius: 4px; }
.bub.in { background: #1a1f27; border: 1px solid var(--line-dark); border-bottom-left-radius: 4px; justify-self: start; }
.bub time { display: block; font-size: .62rem; color: var(--on-dark-3); margin-top: 4px; text-align: right; }
.bub .auto { display: inline-flex; align-items: center; gap: 5px; font-size: .62rem; padding: 2px 7px; border-radius: 6px; background: rgba(156,196,238,.18); color: var(--accent); margin-bottom: 6px; }
.bub .stars { color: #f5b301; letter-spacing: 2px; }
.chat .typing-dots { display: inline-flex; gap: 3px; } .chat .typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--on-dark-3); animation: blink 1s infinite; } .chat .typing-dots i:nth-child(2) { animation-delay: .2s } .chat .typing-dots i:nth-child(3) { animation-delay: .4s }

/* Nacht-Report */
.night { border-radius: 20px; background: linear-gradient(160deg, #141a26, #0b0e14); border: 1px solid var(--line-dark); padding: 20px; color: var(--on-dark); position: relative; overflow: hidden; }
.night::before { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(156,196,238,.25), transparent 65%); }
.night__head { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; color: var(--on-dark-2); margin-bottom: 14px; }
.night__head b { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: #fff; }
.night ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.night li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); font-size: .82rem; opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .5s var(--ease); }
.night li.is-in { opacity: 1; transform: none; }
.night li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(47,191,113,.18); color: var(--ok); font-size: 11px; font-weight: 800; }
.night li small { color: var(--on-dark-3); font-size: .7rem; }
.night__foot { margin-top: 14px; font-size: .72rem; color: var(--on-dark-3); }

/* Integrationen */
.integ { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.integ span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.04); font-size: .8rem; color: var(--on-dark-2); }
.integ span i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.integ span.soon { opacity: .55; }

/* Persönlich */
.letter { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .letter { grid-template-columns: .9fr 1.1fr; } }
.letter__photo { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow); max-width: 440px; }
.letter__photo img { width: 100%; height: 100%; object-fit: cover; }
.letter__photo .badge-abs { position: absolute; left: 14px; bottom: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(12,14,18,.85); color: #fff; font-size: .8rem; backdrop-filter: blur(10px); }
.letter__photo .badge-abs b { display: block; }
.letter__text { font-size: 1.02rem; line-height: 1.75; color: var(--ink-2); }
.letter__text p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.4em; float: left; line-height: .8; margin: 6px 10px 0 0; color: var(--accent-ink); }
.sign { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--ink); margin-top: 10px; display: block; }
.sign-note { font-size: .78rem; color: var(--ink-3); }
.quote-mark { font-family: var(--serif); font-size: 5rem; line-height: 0; color: var(--accent); opacity: .6; display: block; height: 1.6rem; }

@media (prefers-reduced-motion: reduce) { .hero__beam, .ncard, .ticker-bar__track, .wave i, .scan.is-scanning::after { animation: none !important; } .ncard { opacity: 1; } }

/* ==========================================================================
   v4 – Radar-Hero, Anruf-Weg, Cockpit, Karte, Referenzen, KI-Texter
   ========================================================================== */
/* Auftrags-Radar (Hero-Visual) */
.radar { position: absolute; left: 50%; top: 31%; width: min(440px, 92%); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.radar__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(156,196,238,.18); }
.radar__ring:nth-child(2) { inset: 16%; } .radar__ring:nth-child(3) { inset: 32%; } .radar__ring:nth-child(4) { inset: 46%; border-color: rgba(156,196,238,.35); }
.radar__cross { position: absolute; inset: 0; background: linear-gradient(rgba(156,196,238,.12), rgba(156,196,238,.12)) center/1px 100% no-repeat, linear-gradient(rgba(156,196,238,.12), rgba(156,196,238,.12)) center/100% 1px no-repeat; }
.radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(156,196,238,.0) 0deg, rgba(156,196,238,.35) 60deg, transparent 62deg); animation: sweep 6s linear infinite; -webkit-mask-image: radial-gradient(circle, #000 0 62%, transparent 63%); mask-image: radial-gradient(circle, #000 0 62%, transparent 63%); }
@keyframes sweep { to { transform: rotate(360deg) } }
.radar__core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #1b2a3c, #0b0f16); border: 1px solid rgba(156,196,238,.5); display: grid; place-items: center; text-align: center; box-shadow: 0 0 60px rgba(156,196,238,.25), inset 0 0 20px rgba(156,196,238,.15); }
.radar__core b { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: #fff; font-weight: 400; }
.radar__core small { font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.radar__core::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); animation: nodeRing 2.6s ease-out infinite; }
.blip { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; opacity: 0; animation: blipIn 6s linear infinite; animation-delay: var(--bd, 0s); }
.blip i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); position: relative; }
.blip i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--accent); animation: nodeRing 1.6s ease-out infinite; }
.blip span { font-size: .6rem; font-weight: 600; color: #fff; white-space: nowrap; padding: 3px 7px; border-radius: 6px; background: rgba(12,15,20,.8); border: 1px solid var(--line-dark); }
.blip.ok i { background: var(--ok); box-shadow: 0 0 12px var(--ok); } .blip.ok i::after { border-color: var(--ok); }
.blip.rej i { background: var(--bad); box-shadow: 0 0 10px var(--bad); } .blip.rej i::after { border-color: var(--bad); } .blip.rej span { text-decoration: line-through; opacity: .7; }
@keyframes blipIn { 0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(.6) } 12%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 85%, 100% { opacity: 0 } }
.radar__line { position: absolute; left: 50%; top: 50%; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0; animation: lineIn 6s linear infinite; animation-delay: var(--bd, 0s); width: var(--len); transform: rotate(var(--ang)); }
@keyframes lineIn { 0%, 10% { opacity: 0 } 14%, 68% { opacity: .55 } 80%, 100% { opacity: 0 } }
.radar__src { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(12,15,20,.7); white-space: nowrap; }
.radar__hud { position: absolute; display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(12,15,20,.82); border: 1px solid var(--line-dark); backdrop-filter: blur(10px); font-size: .66rem; color: var(--on-dark-2); }
.radar__hud b { font-family: var(--serif); font-size: 1.3rem; color: #fff; font-weight: 400; line-height: 1; }
.radar__hud--a { left: 0; top: 2%; } .radar__hud--b { right: 0; top: 10%; text-align: right; }
@media (max-width: 1023px) { .radar { position: relative; left: 0; top: 0; transform: none; width: 100%; margin: 10px auto 20px; } .stage .result-card { margin-top: 0; } }

/* Weg eines Anrufs (ersetzt Flussgrafik) */
.journey { position: relative; display: grid; gap: 0; }
.journey::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: var(--line-dark); }
.journey::after { content: ""; position: absolute; left: 27px; top: 10px; width: 2px; height: var(--jp, 0%); background: linear-gradient(var(--accent), var(--accent) 80%, transparent); box-shadow: 0 0 10px var(--accent); transition: height .25s linear; }
.jstep { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 14px 0; align-items: start; opacity: .45; transition: opacity .4s; }
.jstep.is-on { opacity: 1; }
.jstep__t { width: 56px; text-align: center; font-family: var(--serif); font-size: 1.1rem; color: #fff; position: relative; z-index: 1; }
.jstep__t i { display: block; width: 12px; height: 12px; margin: 6px auto 0; border-radius: 50%; background: #0c0f14; border: 2px solid var(--line-dark); }
.jstep.is-on .jstep__t i { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgba(156,196,238,.2); }
.jstep__c { padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); }
.jstep__c b { display: block; color: #fff; font-size: .92rem; } .jstep__c span { font-size: .82rem; color: var(--on-dark-2); }
.jstep__c em { display: inline-flex; margin-top: 6px; font-style: normal; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(156,196,238,.15); color: var(--accent); }
.jstep__c em.man { background: rgba(255,255,255,.08); color: var(--on-dark-2); }
.journey-wrap { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .journey-wrap { grid-template-columns: 1fr 1fr; } }
.jside { position: sticky; top: calc(var(--nav-h) + 30px); }
.jbig { font-family: var(--serif); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; color: #fff; }
.jbig small { font-family: var(--sans); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); display: block; margin-top: 6px; }
.jlegend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; font-size: .74rem; color: var(--on-dark-2); }
.jlegend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); margin-right: 6px; vertical-align: middle; } .jlegend span.m::before { background: rgba(255,255,255,.25); }

/* Cockpit (Laptop) Callouts */
.cockpit { display: grid; gap: 22px; align-items: center; }
@media (min-width: 1024px) { .cockpit { grid-template-columns: 220px 1fr 220px; } }
.callouts { display: grid; gap: 10px; }
.callout { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); font-size: .78rem; color: var(--on-dark-2); transition: border-color .3s, background .3s; }
.callout:hover { border-color: rgba(156,196,238,.5); background: rgba(156,196,238,.08); }
.callout i { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #0b0f16; font-weight: 800; font-size: .72rem; display: grid; place-items: center; }
.callout b { display: block; color: #fff; font-size: .8rem; }
.dash__tabs { display: flex; gap: 4px; font-size: 9px; }
.dash__tabs span { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--on-dark-3); } .dash__tabs span.on { background: rgba(156,196,238,.15); color: var(--accent); border-color: rgba(156,196,238,.4); }
.dash__side span { display: block; font-size: 7px; color: var(--on-dark-3); text-align: center; margin: -2px 0 4px; }
.dash__mark { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #0b0f16; font-weight: 800; font-size: 10px; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(156,196,238,.25); z-index: 3; }
.dash__mark::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); animation: nodeRing 2.2s ease-out infinite; }
.dash__title b small { font-family: var(--sans); font-size: 9px; color: var(--on-dark-3); margin-left: 8px; font-weight: 500; }

/* Wissen aus dem Betrieb */
.know { display: grid; gap: 14px; }
@media (min-width: 900px) { .know { grid-template-columns: repeat(6, 1fr); } .know > .k-2 { grid-column: span 2; } .know > .k-3 { grid-column: span 3; } .know > .k-4 { grid-column: span 4; } .know > .k-6 { grid-column: span 6; } }
.kcard { position: relative; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); color: var(--on-dark); overflow: hidden; min-height: 150px; }
.kcard .serif { font-style: italic; font-size: 1rem; color: var(--on-dark-2); margin-bottom: 4px; }
.kcard h4 { color: #fff; font-size: 1.02rem; margin-bottom: 8px; }
.kcard p { font-size: .86rem; color: var(--on-dark-2); margin: 0; }
.kcard .n { font-family: var(--serif); font-size: 3rem; line-height: 1; color: #fff; display: block; margin-bottom: 6px; }
.kcard .n sup { font-size: .4em; color: var(--accent); }
.kcloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kcloud span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-dark); font-size: .72rem; color: var(--on-dark-2); background: rgba(255,255,255,.03); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); transition-delay: var(--d, 0s); }
.is-in .kcloud span { opacity: 1; transform: none; }
.kcloud span.hl { border-color: rgba(156,196,238,.5); color: var(--accent); }
.kbar { display: grid; gap: 6px; margin-top: 10px; }
.kbar div { display: grid; grid-template-columns: 110px 1fr 40px; gap: 8px; align-items: center; font-size: .74rem; color: var(--on-dark-2); }
.kbar i { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; display: block; }
.kbar i::after { content: ""; display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 1.4s var(--ease); transition-delay: var(--d, 0s); }
.is-in .kbar i::after { width: var(--w); }
.kbar b { color: #fff; text-align: right; }

/* Karte v2 */
.map2 { position: relative; }
.map2 svg { width: 100%; height: auto; overflow: visible; }
.map2 .hex { fill: none; stroke: rgba(156,196,238,.07); stroke-width: .6; }
.map2 .land { fill: url(#landGrad); stroke: rgba(156,196,238,.5); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0 24px rgba(156,196,238,.15)); }
.map2 .arc { fill: none; stroke: rgba(156,196,238,.28); stroke-width: 1.2; }
.map2 .arc-glow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 400; animation: arcPkt 4s linear infinite; animation-delay: var(--ad, 0s); filter: drop-shadow(0 0 4px var(--accent)); }
@keyframes arcPkt { from { stroke-dashoffset: 410 } to { stroke-dashoffset: 0 } }
.map2 .pin circle.halo { fill: rgba(156,196,238,.12); }
.map2 .pin circle.c { fill: var(--accent); stroke: #0b0d10; stroke-width: 2.5; }
.map2 .pin circle.r { fill: none; stroke: var(--accent); opacity: 0; transform-origin: center; transform-box: fill-box; animation: nodeRing 2.8s ease-out infinite; animation-delay: var(--pd, 0s); }
.map2 .pin.hq circle.c { fill: #fff; } .map2 .pin.hq circle.halo { fill: rgba(156,196,238,.22); }
.map2 .pin text { fill: #fff; font-family: var(--sans); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: #0b0d10; stroke-width: 4px; }
.map2 .pin.partner circle.c { fill: #cfe0f4; opacity: .6; r: 3; } .map2 .pin.partner circle.r { stroke: #cfe0f4; } .map2 .pin.partner text { fill: rgba(255,255,255,.65); font-weight: 500; font-size: 9.5px; }
.map2 .pin.is-active circle.c { fill: #fff; r: 7; } .map2 .pin.is-active text { fill: var(--accent); }
.map2 .zone { fill: rgba(156,196,238,.07); stroke: rgba(156,196,238,.25); stroke-dasharray: 3 4; }
.map2__stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.map2__stats span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(12,15,20,.8); border: 1px solid var(--line-dark); font-size: .72rem; color: var(--on-dark-2); }
.map2__stats b { font-family: var(--serif); font-size: 1.1rem; color: #fff; font-weight: 400; }

/* Browser-Frames (Referenzen) */
.refs { display: grid; gap: 18px; }
@media (min-width: 760px) { .refs { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .refs { grid-template-columns: repeat(3, 1fr); } }
.browser { border-radius: 14px; overflow: hidden; background: #0f1216; border: 1px solid var(--line-dark); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); transition: transform .5s var(--ease), box-shadow .5s; }
.browser:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -30px rgba(0,0,0,.8); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #171b21; border-bottom: 1px solid var(--line-dark); font-size: .66rem; color: var(--on-dark-3); }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3f48; } .browser__bar i:nth-child(1) { background: #ff5f57 } .browser__bar i:nth-child(2) { background: #febc2e } .browser__bar i:nth-child(3) { background: #28c840 }
.browser__bar span { margin-left: 8px; padding: 3px 10px; border-radius: 6px; background: rgba(255,255,255,.05); flex: 1; font-family: var(--sans); }
.browser__view { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #fff; }
.browser__view img { width: 100%; height: auto; display: block; transition: transform 6s ease-in-out; }
.browser:hover .browser__view img { transform: translateY(calc(-100% + 100% * 10 / 16 * (16 / 10))); }
.browser__view img.scrolls { transform: translateY(0); }
.browser:hover .browser__view img.scrolls { transform: translateY(var(--sh, -60%)); }
.browser__cap { padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: .8rem; color: var(--on-dark-2); }
.browser__cap b { color: #fff; display: block; font-size: .84rem; }
.browser__cap a { font-size: .72rem; color: var(--accent); white-space: nowrap; }
.sec--white .browser, .sec:not(.sec--dark) .browser { background: #fff; border-color: var(--line); } .sec--white .browser__bar { background: var(--bg); color: var(--ink-3); border-color: var(--line); } .sec--white .browser__cap { color: var(--ink-2); } .sec--white .browser__cap b { color: var(--ink); } .sec--white .browser__cap a { color: var(--accent-ink); }
.ref-phone { width: min(220px, 60%); margin: 0 auto; aspect-ratio: 9/19; border-radius: 28px; background: #0b0d10; padding: 8px; box-shadow: 0 0 0 2px #2a2f38, 0 30px 60px -30px rgba(0,0,0,.8); }
.ref-phone div { width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: #fff; } .ref-phone img { width: 100%; height: auto; }
/* Anzeigen-Vorschau (SERP) */
.serp { background: #fff; color: #202124; border-radius: 14px; padding: 16px 18px; font-family: Arial, Helvetica, sans-serif; border: 1px solid var(--line); box-shadow: var(--shadow); }
.serp__ad { font-size: 11px; color: #202124; display: flex; gap: 8px; align-items: center; margin-bottom: 4px; } .serp__ad b { font-weight: 700; }
.serp__url { font-size: 12px; color: #202124; margin-bottom: 2px; } .serp__h { font-size: 18px; color: #1a0dab; line-height: 1.3; margin: 0 0 4px; } .serp__h:hover { text-decoration: underline; }
.serp__d { font-size: 13px; color: #4d5156; line-height: 1.5; margin: 0; }
.serp__ext { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: #1a0dab; }
.serp__call { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid #dadce0; font-size: 13px; color: #1a0dab; }
.sec--dark .serp { border-color: transparent; }
.ads-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .ads-grid { grid-template-columns: 1fr 1fr; } }
.ads-note { font-size: .72rem; color: var(--on-dark-3); margin-top: 8px; }

/* KI-Texter Tool */
.texter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.texter-tabs button { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-dark); font-size: .8rem; font-weight: 600; color: var(--on-dark-2); background: rgba(255,255,255,.04); }
.texter-tabs button.is-on { background: var(--accent); color: #0b0f16; border-color: var(--accent); }
.texter-out { display: grid; gap: 12px; margin-top: 16px; }
.tx-card { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); font-size: .9rem; position: relative; opacity: 0; transform: translateY(8px); animation: fadeUp .5s var(--ease) forwards; animation-delay: var(--d, 0s); }
.tx-card small { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.tx-card .copy { position: absolute; right: 10px; top: 10px; font-size: .66rem; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line-dark); color: var(--on-dark-2); }
.tx-card .copy:hover { color: #fff; border-color: #fff; }
.tx-card.warn { border-color: rgba(226,164,0,.4); }

/* Stats-Band (Über uns) */
.band { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 22px; overflow: hidden; }
@media (min-width: 760px) { .band { grid-template-columns: repeat(4, 1fr); } }
.band__i { position: relative; padding: clamp(22px, 3vw, 34px); background: linear-gradient(160deg, #141a24, #0c0f14); color: var(--on-dark); overflow: hidden; }
.band__i::before { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(156,196,238,.18), transparent 65%); }
.band__i svg { width: 22px; height: 22px; color: var(--accent); margin-bottom: 14px; }
.band__i b { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; font-family: var(--serif); font-size: clamp(2.6rem, 4.5vw, 3.6rem); line-height: 1; color: #fff; font-weight: 400; } .band__i b span { font-size: inherit; font-family: inherit; }
.band__i b sup { font-size: .4em; color: var(--accent); }
.band__i span { display: block; margin-top: 8px; font-size: .84rem; color: var(--on-dark-2); }
.band__i small { display: block; margin-top: 6px; font-size: .66rem; color: var(--on-dark-3); }

/* Timeline mit Fortschrittslinie */
.timeline { padding-left: 40px; }
.timeline::before { left: 10px; width: 2px; background: var(--line); }
.timeline::after { content: ""; position: absolute; left: 10px; top: 6px; width: 2px; height: var(--tl, 0%); background: linear-gradient(var(--accent-ink), var(--accent)); box-shadow: 0 0 10px rgba(47,93,153,.5); transition: height .2s linear; border-radius: 2px; }
.tl-item::before { left: -40px; width: 22px; height: 22px; }
.tl-item.is-active::before { background: var(--accent-ink); border-color: var(--accent-ink); box-shadow: 0 0 0 6px var(--accent-soft); }
.tl-item.is-active::after { content: "✓"; position: absolute; left: -35px; top: 6px; font-size: 11px; color: #fff; font-weight: 800; }
.tl-item { padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); transition: transform .5s var(--ease), border-color .3s; }
.tl-item.is-active { border-color: rgba(47,93,153,.3); transform: translateX(6px); }
.tl-item .yr { position: absolute; right: 16px; top: 14px; font-family: var(--serif); font-size: 1.4rem; color: rgba(16,24,32,.12); }

/* Team-Stimmen */
.voice { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: start; }
.voice img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.voice p { font-family: var(--serif); font-size: 1.1rem; line-height: 1.35; margin: 0 0 8px; color: var(--ink); }
.voice b { font-size: .84rem; display: block; } .voice span { font-size: .74rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) { .radar__sweep, .blip, .radar__line, .map2 .arc-glow, .browser__view img { animation: none !important; transition: none !important; } .blip { opacity: 1; } }

/* ==========================================================================
   v5 – HELLES KONZEPT (komplett hell, dunkel nur als Akzent)
   ========================================================================== */
:root { --bg: #f3f5f8; --bg-2: #e9edf2; --accent-ink: #2b5a97; --accent-soft: rgba(43,90,151,.1); }
/* Dunkle Sektionen → hell; Variablen umbiegen */
.sec--dark, .sec--dark-2, .sec--dark-3, .hero, .page-hero, .ticker-bar, .tool:not(.tool--light), .panel-dark, .call-demo, .chat, .night, .kcard, .bcard, .case, .faq details, .pstep, .scan, .finding, .total, .journey, .jside, .cockpit .callout, .map2, .map-card, .integ, .texter-tabs, .tx-card, .honest, .goal--dark, .result-card, .ncard, .radar, .band__i {
  --on-dark: var(--ink); --on-dark-2: var(--ink-2); --on-dark-3: var(--ink-3); --line-dark: rgba(16,24,32,.1); --accent: #2b5a97; color: var(--ink);
}
/* Geräte & echte Akzente bleiben dunkel */
.laptop, .phone-mini, .capchart, .mnav, .header__inner, .mobile-bar, .consent-dark, .vcard, .browser__bar, .wave { --on-dark: #f4f5f6; --on-dark-2: rgba(244,245,246,.72); --on-dark-3: rgba(244,245,246,.5); --line-dark: rgba(255,255,255,.1); --accent: #9cc4ee; }
.laptop, .phone-mini, .capchart, .vcard { color: var(--on-dark); }

.sec--dark { background: #fff; }
.sec--dark-2 { background: linear-gradient(180deg, #e8eef6 0%, #f3f5f8 60%); }
.sec--dark-3 { background: var(--bg-2); }
.sec--dark em, .sec--dark-2 em, .sec--dark-3 em, .page-hero em, .hero em, .goal--dark h3 em { color: var(--accent-ink); }
.sec--dark .lead, .sec--dark-2 .lead, .sec--dark-3 .lead, .page-hero .lead, .hero .lead { color: var(--ink-2); }
.sec--dark .kicker, .sec--dark-2 .kicker, .sec--dark-3 .kicker, .page-hero .kicker, .hero .kicker { border-color: var(--line); background: #fff; color: var(--ink-2); }
.sec--dark .kicker::before, .sec--dark-2 .kicker::before, .sec--dark-3 .kicker::before, .page-hero .kicker::before, .hero .kicker::before { background: var(--accent-ink); }
.sec--dark .link, .sec--dark-2 .link { color: var(--ink); text-decoration-color: rgba(16,24,32,.25); }
.sec--dark .card, .sec--dark-2 .card { background: #fff; border-color: rgba(16,24,32,.06); color: var(--ink); box-shadow: var(--shadow); }
.sec--dark .card p, .sec--dark .card ul, .sec--dark-2 .card p, .sec--dark-2 .card ul { color: var(--ink-2); }
.sec--dark .card .num, .sec--dark .card ul li::before, .sec--dark-2 .card .num, .sec--dark-2 .card ul li::before { color: var(--accent-ink); }
.sec--dark .checks li::before, .sec--dark-2 .checks li::before, .goal--dark .checks li::before { border-color: var(--line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b5a97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.sec--dark .checks li b, .sec--dark-2 .checks li b, .goal--dark .checks li b { color: var(--ink); }
.sec--dark .checks, .goal--dark .checks { border-color: var(--line); }
.sec--dark .freigabe, .page-hero .freigabe, .hero .freigabe { color: #8a6400; }
.btn--accent { background: var(--navy); color: #fff; } .btn--accent:hover { background: var(--navy-2); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); backdrop-filter: none; box-shadow: 0 10px 24px -16px rgba(10,20,30,.3); }
.btn--ghost:hover { background: #fff; border-color: rgba(16,24,32,.25); }
.mnav .btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.15); }
.ico-btn { border-color: rgba(255,255,255,.12); }
.pill { border-color: var(--line); background: #fff; color: var(--ink-2); }
.live { border-color: var(--line); color: var(--ink-2); background: #fff; }
.laptop .live, .phone-mini .live { border-color: rgba(255,255,255,.12); color: rgba(244,245,246,.72); background: transparent; }

/* Hero */
.hero { background: radial-gradient(1100px 600px at 70% 10%, #dfe9f5 0%, #f3f5f8 55%, #f7f8fa 100%); color: var(--ink); }
.hero::before { background-image: radial-gradient(rgba(43,90,151,.35) .6px, transparent .7px); opacity: .18; }
.hero::after { background-image: linear-gradient(rgba(43,90,151,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(43,90,151,.07) 1px, transparent 1px); }
.hero h1 { color: var(--ink); } .hero h1 em, .hero .rot > span { color: var(--accent-ink); }
.hero .lead strong { color: var(--ink); }
.hero__branch a { color: var(--ink-2); } .hero__branch a:hover { color: var(--ink); border-color: var(--line); } .hero__branch a.is-active { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 6px 18px -12px rgba(10,20,30,.3); }
.hero__list li { color: var(--ink-2); } .hero__list li::before { background-color: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b5a97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.hero__trust { color: var(--ink-2); } .hero__trust svg { color: var(--accent-ink); }
.hero__who { background: #fff; border-color: var(--line); color: var(--ink-2); box-shadow: 0 10px 24px -16px rgba(10,20,30,.3); } .hero__who b { color: var(--ink); }
.status { color: var(--ink-2); }
.hero__logos { border-color: var(--line); } .hero__logos p { color: var(--ink-3); }
.wordmark { color: var(--ink-2); } .wordmark small { color: var(--ink-3); }
.scroll-hint { border-color: rgba(16,24,32,.25); }
.aurora i:nth-child(1) { background: radial-gradient(circle, rgba(156,196,238,.6), transparent 65%); } .aurora i:nth-child(2) { background: radial-gradient(circle, rgba(43,90,151,.25), transparent 65%); } .aurora i:nth-child(3) { background: radial-gradient(circle, rgba(156,196,238,.4), transparent 65%); }
/* Radar hell */
.radar__ring { border-color: rgba(43,90,151,.16); } .radar__ring:nth-child(4) { border-color: rgba(43,90,151,.35); }
.radar__cross { background: linear-gradient(rgba(43,90,151,.12), rgba(43,90,151,.12)) center/1px 100% no-repeat, linear-gradient(rgba(43,90,151,.12), rgba(43,90,151,.12)) center/100% 1px no-repeat; }
.radar__sweep { background: conic-gradient(from 0deg, rgba(43,90,151,0) 0deg, rgba(43,90,151,.22) 60deg, transparent 62deg); }
.radar__core { background: #fff; border-color: rgba(43,90,151,.5); box-shadow: 0 20px 50px -20px rgba(43,90,151,.5), inset 0 0 20px rgba(156,196,238,.2); } .radar__core b { color: var(--ink); } .radar__core small { color: var(--ink-3); } .radar__core::after { border-color: var(--accent-ink); }
.blip i { background: var(--accent-ink); box-shadow: 0 0 10px rgba(43,90,151,.5); } .blip i::after { border-color: var(--accent-ink); }
.blip span { color: var(--ink); background: #fff; border-color: var(--line); box-shadow: 0 6px 16px -10px rgba(10,20,30,.3); }
.radar__line { background: linear-gradient(90deg, var(--accent-ink), transparent); }
.radar__src { color: var(--ink-3); border-color: var(--line); background: #fff; }
.ncard { background: #fff; border-color: var(--line); box-shadow: 0 24px 50px -24px rgba(10,20,30,.35); color: var(--ink); } .ncard b { color: var(--ink); } .ncard span { color: var(--ink-3); } .ncard i { background: var(--accent-soft); color: var(--accent-ink); }
.result-card { background: #fff; border-color: var(--line); box-shadow: 0 30px 60px -30px rgba(10,20,30,.4); backdrop-filter: none; } .result-card b { color: var(--ink); } .result-card p { color: var(--ink-2); } .result-card small { color: var(--ink-3); } .result-card__kicker { color: var(--ink-2); } .result-card__kicker::before { background: var(--accent-ink); } .result-card__row { border-color: var(--line); } .avatars img { border-color: #fff; }
.chip-play { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Ticker */
.ticker-bar { background: #fff; border-color: var(--line); color: var(--ink); } .ticker-bar::before { background: #fff; color: var(--accent-ink); box-shadow: 20px 0 30px #fff; } .ticker-bar__track span { color: var(--ink-2); border-color: var(--line); } .ticker-bar__track span b { color: var(--ink); } .ticker-bar__track span i.ki { background: var(--accent-ink); }
/* Panels & Tools */
.panel-dark { background: #fff; border-color: var(--line); box-shadow: var(--shadow); } .pstat { background: var(--bg); border-color: var(--line); } .pstat b { color: var(--ink); } .pstat b sup { color: var(--accent-ink); } .pstat span { color: var(--ink-2); }
.tool:not(.tool--light) { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.tool:not(.tool--light)::before { background: radial-gradient(700px circle at 100% 0%, rgba(156,196,238,.25), transparent 55%); }
.tool .field label { color: var(--ink-3); } .tool .input { background: var(--bg); border-color: var(--line); color: var(--ink); } .tool .input::placeholder { color: var(--ink-3); } .tool .input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.tool .check { color: var(--ink-2); } .tool .range-field header { color: var(--ink-2); }
.tool .check-row, .tool .kpi { border-color: var(--line); background: var(--bg); } .tool .ki-answer { background: var(--bg); }
input[type=range].range { background: linear-gradient(90deg, var(--accent-ink) var(--p, 50%), rgba(16,24,32,.12) var(--p, 50%)); }
.scan { background: var(--bg); border-color: var(--line); } .scan__head { color: var(--ink-2); } .scan__head i { background: var(--accent-soft); color: var(--accent-ink); } .scan__state { color: var(--ink-3); } .scan__score { color: var(--ink); } .scan__score small { color: var(--ink-3); } .scan__bar { background: rgba(16,24,32,.08); } .scan__bar i { background: var(--accent-ink); } .scan__msg { color: var(--ink-2); } .scan.is-done { border-color: rgba(43,90,151,.35); background: var(--accent-soft); } .scan.is-scanning::after { background: linear-gradient(90deg, transparent, var(--accent-ink), transparent); box-shadow: 0 0 12px rgba(43,90,151,.5); } .scan.is-scanning .scan__state::before { border-color: var(--accent-ink); border-top-color: transparent; }
.finding { background: var(--bg); border-color: var(--line); } .finding span { color: var(--ink-3); } .finding.win i { background: var(--accent-ink); }
.total { background: linear-gradient(135deg, rgba(156,196,238,.25), #fff); border-color: rgba(43,90,151,.25); } .total p { color: var(--ink-2); }
.score__ring .bgc { stroke: rgba(16,24,32,.1); }
.typing::after { color: var(--accent-ink); }
/* Journey */
.journey::before { background: var(--line); } .journey::after { background: linear-gradient(var(--accent-ink), var(--accent-ink) 80%, transparent); box-shadow: 0 0 10px rgba(43,90,151,.35); }
.jstep__t { color: var(--ink); } .jstep__t i { background: #fff; border-color: var(--line); } .jstep.is-on .jstep__t i { border-color: var(--accent-ink); background: var(--accent-ink); box-shadow: 0 0 0 5px var(--accent-soft); }
.jstep__c { background: #fff; border-color: var(--line); box-shadow: 0 10px 30px -22px rgba(10,20,30,.3); } .jstep__c b { color: var(--ink); } .jstep__c span { color: var(--ink-2); } .jstep__c em { background: var(--accent-soft); color: var(--accent-ink); } .jstep__c em.man { background: var(--bg-2); color: var(--ink-2); }
.jbig { color: var(--ink); } .jbig small { color: var(--ink-3); } .jlegend { color: var(--ink-2); } .jlegend span::before { background: var(--accent-ink); } .jlegend span.m::before { background: rgba(16,24,32,.2); }
/* Cockpit */
.callout { background: #fff; border-color: var(--line); color: var(--ink-2); box-shadow: 0 10px 30px -22px rgba(10,20,30,.3); } .callout:hover { border-color: rgba(43,90,151,.4); background: #fff; } .callout i { background: var(--navy); color: #fff; } .callout b { color: var(--ink); }
.feature-chips span { border-color: var(--line); background: #fff; color: var(--ink-2); } .feature-chips span b { color: var(--ink); }
/* Wissen / Bento */
.kcard, .bcard { background: #fff; border-color: rgba(16,24,32,.06); color: var(--ink); box-shadow: var(--shadow); } .kcard h4, .bcard h4, .kcard .n, .bcard .big b, .kbar b { color: var(--ink); } .kcard p, .bcard p, .kcard .serif, .bcard .serif { color: var(--ink-2); } .kcard .n sup, .bcard .big b sup { color: var(--accent-ink); } .bcard .big small { color: var(--ink-3); }
.kcloud span { border-color: var(--line); color: var(--ink-2); background: var(--bg); } .kcloud span.hl { border-color: rgba(43,90,151,.4); color: var(--accent-ink); background: var(--accent-soft); }
.kbar div { color: var(--ink-2); } .kbar i { background: rgba(16,24,32,.08); } .kbar i::after { background: var(--accent-ink); }
.bcard--cta { background: var(--navy) !important; color: #fff !important; } .bcard--cta h3, .bcard--cta p { color: #fff !important; } .bcard--cta h3 em { color: var(--accent) !important; color: #9cc4ee !important; } .bcard--cta .pill { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; } .bcard--cta .btn--accent { background: #fff; color: var(--navy); }
.orbit::before { border-color: rgba(43,90,151,.3); } .orbit::after { border-color: rgba(43,90,151,.18); } .orbit i { background: var(--accent-ink); box-shadow: 0 0 10px rgba(43,90,151,.4); }
.gauge .bgc { stroke: rgba(16,24,32,.08); } .gauge .fgc { stroke: var(--accent-ink); }
/* Automatisierung */
.call-demo, .chat, .night { background: #fff; border-color: rgba(16,24,32,.06); box-shadow: var(--shadow); color: var(--ink); }
.call-demo__top { color: var(--ink-2); } .call-demo__top b { color: var(--ink) !important; }
.wave { padding: 8px 10px; border-radius: 10px; background: var(--navy); } .wave i { background: #9cc4ee; }
.transcript { background: var(--bg); border-color: var(--line); color: var(--ink); } .transcript small { color: var(--ink-3); }
.tag-k { border-color: var(--line); background: var(--bg); color: var(--ink-2); } .tag-k b { color: var(--ink); } .tag-k.ki { border-color: rgba(43,90,151,.4); color: var(--accent-ink); }
.verdict { background: rgba(47,191,113,.08); } .verdict b { color: var(--ink); } .verdict span { color: var(--ink-2); }
.chat__top { border-color: var(--line); } .chat__top span { color: var(--ink-3); }
.bub.sys { background: var(--bg); border-color: var(--line); color: var(--ink-3); } .bub.out { background: #dcf3e6; color: var(--ink); } .bub.in { background: var(--bg); border-color: var(--line); color: var(--ink); } .bub time { color: var(--ink-3); } .bub .auto { background: var(--accent-soft); color: var(--accent-ink); }
.night { background: #fff; } .night::before { background: radial-gradient(circle, rgba(156,196,238,.4), transparent 65%); } .night__head { color: var(--ink-2); } .night__head b { color: var(--ink); }
.night li { background: var(--bg); border-color: var(--line); color: var(--ink); } .night li small { color: var(--ink-3); } .night__foot { color: var(--ink-3); }
.integ span { border-color: var(--line); background: #fff; color: var(--ink-2); } .integ span i { background: var(--accent-ink); }
/* Texter */
.texter-tabs button { border-color: var(--line); color: var(--ink-2); background: #fff; } .texter-tabs button.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tx-card { background: var(--bg); border-color: var(--line); color: var(--ink); } .tx-card small { color: var(--accent-ink); } .tx-card .copy { border-color: var(--line); color: var(--ink-2); background: #fff; } .tx-card .copy:hover { color: var(--ink); border-color: var(--ink); }
/* Karte */
.map2 .hex { stroke: rgba(43,90,151,.08); } .map2 .land { stroke: rgba(43,90,151,.5); filter: drop-shadow(0 10px 30px rgba(43,90,151,.18)); }
.map2 .arc { stroke: rgba(43,90,151,.22); } .map2 .arc-glow { stroke: var(--accent-ink); filter: drop-shadow(0 0 3px rgba(43,90,151,.4)); }
.map2 .pin circle.c { fill: var(--accent-ink); stroke: #fff; } .map2 .pin circle.halo { fill: rgba(43,90,151,.1); } .map2 .pin circle.r { stroke: var(--accent-ink); } .map2 .pin.hq circle.c { fill: var(--navy); } .map2 .pin.hq circle.halo { fill: rgba(43,90,151,.18); }
.map2 .pin text { fill: var(--ink); stroke: #fff; } .map2 .pin.partner circle.c { fill: var(--accent-ink); opacity: .5; } .map2 .pin.partner text { fill: var(--ink-3); } .map2 .pin.is-active circle.c { fill: var(--navy); } .map2 .pin.is-active text { fill: var(--accent-ink); }
.map2 .zone { fill: rgba(43,90,151,.06); stroke: rgba(43,90,151,.25); }
.map2__stats span { background: #fff; border-color: var(--line); color: var(--ink-2); } .map2__stats b { color: var(--ink); }
.map-legend { color: var(--ink-2); } .map-legend span::before { background: var(--accent-ink); } .map-legend span.p::before { background: rgba(43,90,151,.4); }
.map-card { background: #fff; border-color: var(--line); box-shadow: 0 10px 30px -22px rgba(10,20,30,.3); } .map-card:hover, .map-card.is-active { background: var(--accent-soft); border-color: rgba(43,90,151,.4); } .map-card i { background: var(--accent-soft); color: var(--accent-ink); } .map-card span { color: var(--ink-3); } .map-card small { color: var(--accent-ink); }
/* Cases, FAQ, Ablauf, Honest, Ziele */
.case { background: #fff; border-color: rgba(16,24,32,.06); color: var(--ink); box-shadow: var(--shadow); } .case__meta { color: var(--ink-3); } .case__meta i { color: var(--accent-ink); } .case__body h3 em { color: var(--accent-ink); } .tags span { background: var(--accent-soft); color: var(--accent-ink); } .case__box { background: var(--bg); border-color: var(--line); } .case__box small { color: var(--ink-3); } .case__box ul { color: var(--ink-2); } .case__box li::before { color: var(--accent-ink); }
.case-nav .ico-btn, .scroller-nav .ico-btn { border-color: var(--line); background: #fff; color: var(--ink); }
.faq details { background: #fff; color: var(--ink); border-color: rgba(16,24,32,.08); } .faq details[open] { border-color: rgba(43,90,151,.35); } .faq summary::after { border-color: var(--line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .faq__body { color: var(--ink-2); }
.pstep { background: #fff; border-color: rgba(16,24,32,.06); color: var(--ink); box-shadow: var(--shadow); } .pstep small { color: var(--accent-ink); } .pstep p { color: var(--ink-2); } .pstep::before { color: rgba(16,24,32,.07); }
.honest { background: var(--navy); color: #fff; } .honest li { color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); } .honest li::before { color: #9cc4ee; } .honest p { color: rgba(255,255,255,.75); } .honest .pill { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; } .honest .btn--accent { background: #fff; color: var(--navy); }
.goal--dark { background: #fff; color: var(--ink); border-color: rgba(16,24,32,.06); } .goal--dark .goal__body p { color: var(--ink-2); } .goal--dark .goal__kicker { color: var(--accent-ink); } .goal--dark .checks li { color: var(--ink-2); }
.goal__media { background: var(--bg-2); } .goal__media .mock-label { background: #fff; border-color: var(--line); color: var(--ink-2); }
.phone { box-shadow: 0 0 0 2px #2a2f38, 0 40px 80px -30px rgba(10,20,30,.5); }
.cta-card { box-shadow: 0 40px 80px -40px rgba(10,20,30,.35); border: 1px solid rgba(16,24,32,.06); }
.logo-wall .wordmark { color: var(--ink-2); }
.review-cols { -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
/* Band (Über uns) */
.band { background: var(--line); border-color: var(--line); } .band__i { background: #fff; color: var(--ink); } .band__i::before { background: radial-gradient(circle, rgba(156,196,238,.35), transparent 65%); } .band__i svg { color: var(--accent-ink); } .band__i b { color: var(--ink); } .band__i b sup { color: var(--accent-ink); } .band__i span { color: var(--ink-2); } .band__i small { color: var(--ink-3); }
/* Page-Hero */
.page-hero { background: radial-gradient(900px 500px at 70% 20%, #dfe9f5 0%, #f3f5f8 60%); color: var(--ink); } .page-hero h1 { color: var(--ink); } .breadcrumb { color: var(--ink-3); } .page-hero .card { background: #fff !important; border-color: var(--line) !important; color: var(--ink) !important; box-shadow: var(--shadow) !important; } .page-hero .person span { color: var(--ink-3) !important; } .page-hero .small { color: var(--ink-3) !important; }
.page-hero .panel-dark .pstep p { color: var(--ink-2); } .page-hero .pstep p b { color: var(--ink) !important; }
.img-frame { box-shadow: 0 30px 60px -30px rgba(10,20,30,.35); background: var(--bg-2); }
.hero__trust span.status::before { background: var(--ok); }
.modal__box .status { color: var(--ink-2); }
.refs .browser { background: #fff; border-color: var(--line); } .browser__bar { background: var(--bg); color: var(--ink-3); border-color: var(--line); } .browser__cap { color: var(--ink-2); } .browser__cap b { color: var(--ink); } .browser__cap a { color: var(--accent-ink); }
.ref-phone { box-shadow: 0 0 0 2px #2a2f38, 0 30px 60px -30px rgba(10,20,30,.4); }
.ads-note { color: var(--ink-3); }
.sec--dark .serp { border-color: var(--line); }
.voice { background: #fff; }
.stat { background: #fff; }
.ticker { color: inherit; }

/* Team persönlich */
.people { display: grid; gap: 16px; }
@media (min-width: 760px) { .people { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .people { grid-template-columns: repeat(4, 1fr); } }
.person-card { background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr; transition: transform .5s var(--ease), box-shadow .5s; }
.person-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(10,20,30,.4); }
.person-card__img { position: relative; aspect-ratio: 4/4.4; overflow: hidden; }
.person-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.4s var(--ease); }
.person-card:hover .person-card__img img { transform: scale(1.04); }
.person-card__img .tag { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.9); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.person-card__body { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.person-card__body b { font-size: 1.02rem; } .person-card__body .role { font-size: .76rem; color: var(--ink-3); margin-top: -6px; }
.person-card__body q { font-family: var(--serif); font-size: 1.08rem; line-height: 1.35; color: var(--ink); quotes: "„" "“"; }
.person-card__body .fact { display: flex; flex-wrap: wrap; gap: 6px; }
.person-card__body .fact span { padding: 4px 9px; border-radius: 999px; background: var(--bg); font-size: .68rem; color: var(--ink-2); }

/* Zwei Gewerke kompakt */
.gewerke { display: grid; gap: 14px; }
@media (min-width: 900px) { .gewerke { grid-template-columns: 1fr 1fr; } }
.gewerk { position: relative; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); display: grid; gap: 12px; overflow: hidden; }
.gewerk::before { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(156,196,238,.35), transparent 65%); }
.gewerk__head { display: flex; align-items: center; gap: 12px; }
.gewerk__head i { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; } .gewerk__head i svg { width: 20px; height: 20px; }
.gewerk__head b { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; display: block; line-height: 1; } .gewerk__head span { font-size: .74rem; color: var(--ink-3); }
.gewerk__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gewerk__facts div { padding: 10px; border-radius: 12px; background: var(--bg); text-align: center; } .gewerk__facts b { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; line-height: 1; } .gewerk__facts span { font-size: .66rem; color: var(--ink-3); }
.gewerk__list { display: flex; flex-wrap: wrap; gap: 5px; } .gewerk__list span { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: .7rem; color: var(--ink-2); }
.gewerk__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--ink-3); }

/* Dashboard premium */
.laptop { background: linear-gradient(180deg, #343a45, #171b21); border-radius: 20px 20px 8px 8px; }
.laptop__screen { background: linear-gradient(160deg, #10141b, #0a0d12); }
.dash__main { gap: 14px; }
.dkpi { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); position: relative; overflow: hidden; }
.dkpi::after { content: ""; position: absolute; right: -10px; bottom: -14px; width: 60px; height: 30px; background: radial-gradient(ellipse at bottom, rgba(156,196,238,.25), transparent 70%); }
.dkpi b { font-size: 1.55rem; letter-spacing: -.02em; }
.dkpi > span { letter-spacing: .04em; text-transform: uppercase; font-size: 8px; }
.dash__top b { font-size: 1.2rem; }
.dash__chart .bar { fill: rgba(156,196,238,.3); } .dash__chart .bar.hi { fill: url(#barGrad); }
.dash__side i.on { box-shadow: 0 0 0 1px rgba(156,196,238,.4), 0 0 14px rgba(156,196,238,.25); }
.fi { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.07); }
.devices::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 20px; height: 60px; border-radius: 50%; background: rgba(43,90,151,.25); filter: blur(30px); z-index: -1; }
.cockpit { position: relative; }

/* Foto-Karten (statt Video) */
.vcard { cursor: default; }
.vcard__top.chip-play { background: rgba(255,255,255,.92); color: var(--ink); border-color: transparent; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; }
.vcard__top.chip-play i { display: none; }

/* Mobile-Optimierung */
@media (max-width: 760px) {
  .sec { padding: 56px 0; } .sec--tight { padding: 36px 0; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); } h2 { font-size: clamp(1.75rem, 7.5vw, 2.3rem); } h3 { font-size: 1.3rem; }
  .lead { font-size: .95rem; }
  .hero { padding-top: calc(var(--nav-h) + 12px); } .hero h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .hero__branch { gap: 4px; margin-bottom: 18px; } .hero__branch a { padding: 6px 10px; font-size: .72rem; }
  .hero__list li { font-size: .86rem; } .hero__trust { font-size: .76rem; gap: 8px 14px; }
  .hero__who { font-size: .74rem; }
  .radar { width: 92%; margin: 0 auto 10px; } .blip span { font-size: .56rem; } .radar__src { font-size: .56rem; }
  .ncard { font-size: .72rem; padding: 8px 10px 8px 8px; } .ncard i { width: 28px; height: 28px; }
  .stage .result-card { width: 100%; padding: 12px; } .stage .result-card__body { grid-template-columns: 64px 1fr; } .stage .result-card__img { width: 64px; height: 64px; }
  .hero__logos { margin-top: 28px; } .logo-row { gap: 8px 18px; } .wordmark { font-size: 1rem; }
  .ticker-bar__track span { padding: 0 16px; font-size: .74rem; } .ticker-bar::before { display: none; }
  .scroller > * { flex-basis: 76%; }
  .panel-dark { padding: 16px; } .pstat { padding: 8px 10px; } .pstat b { font-size: 1.4rem; } .pstat span { font-size: .7rem; }
  .jstep { grid-template-columns: 48px 1fr; gap: 10px; padding: 10px 0; } .jstep__t { width: 48px; font-size: .9rem; } .journey::before, .journey::after { left: 23px; } .jbig { font-size: 2.6rem; }
  .goal__body { padding: 20px; } .goal__media { min-height: 240px; }
  .capchart { padding: 16px; gap: 10px; } .capchart__head b { font-size: 1.5rem; }
  .phone { width: min(230px, 70%); margin: 30px auto 20px; }
  .cockpit { gap: 14px; } .callouts { grid-template-columns: 1fr 1fr; gap: 8px; } .callout { font-size: .72rem; padding: 8px 10px; }
  .devices { padding-bottom: 10px; } .laptop { padding: 8px 8px 14px; border-radius: 12px 12px 4px 4px; } .dkpi b { font-size: 1.1rem; } .dash__main { padding: 10px; gap: 8px; }
  .kcard, .bcard { padding: 18px; min-height: 0; } .kcard .n { font-size: 2.4rem; }
  .gewerk__facts b { font-size: 1.2rem; }
  .map-wrap { gap: 14px; } .map2 .pin text { font-size: 10px; } .map2 .pin.partner text { display: none; } .map-card { padding: 10px 12px; }
  .call-demo, .chat, .night { padding: 14px; } .chat { min-height: 0; }
  .texter-tabs button { padding: 8px 11px; font-size: .74rem; }
  .tool { padding: 18px; border-radius: 18px; } .tool--light { padding: 18px; }
  .people { gap: 12px; } .person-card__body q { font-size: 1rem; }
  .band__i { padding: 18px; } .band__i b { font-size: 2.2rem; }
  .tl-item { padding: 12px 14px; } .tl-item .yr { display: none; }
  .refs { gap: 12px; }
  .cta-card { padding: 22px; } .cta-card__badges { gap: 12px; }
  .fab { right: 10px; bottom: 80px; } .fab a, .fab button { width: 40px; height: 40px; }
  .gallery__track img { height: 150px; border-radius: 12px; }
  .footer { padding-bottom: 100px; }
  .letter__text { font-size: .95rem; } .sign { font-size: 1.6rem; }
}
/* Rotator: Breite = aktives Wort */
.rot { display: inline-block; position: relative; vertical-align: baseline; }
.rot > span { position: absolute; left: 0; top: 0; }
.rot > span.is-on { position: static; }
@media (max-width: 760px) { .dash__kpis { grid-template-columns: repeat(2, 1fr); gap: 6px; } .dkpi { padding: 8px; } .dash__chart svg { max-height: 80px; } .laptop__screen { font-size: 10px; } }

/* ==========================================================================
   v6 – Einblicke ohne Text, Stack-Fix, App-Dashboard, Magazin, Branchen-Hero
   ========================================================================== */
/* 1 Einblicke: reine Fotos */
.vcard--plain::after { background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.35) 100%); }
.vcard--plain .vcard__bottom b, .vcard--plain .vcard__bottom p { display: none; }
.vcard--plain .vcard__bottom small { font-size: .7rem; letter-spacing: .06em; }
/* 2 Stack: nur sticky-Stapel ohne Scale/Opacity-Sprung, sauberer Übergang */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .stack .goal { margin-bottom: 28vh; box-shadow: 0 -20px 60px -30px rgba(10,20,30,.35), var(--shadow); }
  .stack .goal.is-behind { transform: scale(.965) translateY(-18px); opacity: 1; filter: none; }
  .stack .goal.is-behind::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(243,245,248,.55); pointer-events: none; transition: opacity .4s; }
  .stack .goal { transition: transform .55s var(--ease); }
}
/* 3 Cockpit: App-Look, alles verzahnt */
.cockpit { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .cockpit { grid-template-columns: 240px 1fr 240px; align-items: center; } }
.app { position: relative; }
.app__frame { position: relative; border-radius: 26px; background: linear-gradient(160deg, #141923, #0a0d13); padding: 10px; box-shadow: 0 60px 120px -50px rgba(10,20,30,.6), inset 0 1px 0 rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08); }
.app__screen { border-radius: 18px; background: #0c1016; overflow: hidden; display: grid; grid-template-columns: 200px 1fr; min-height: 520px; color: #f4f5f6; --on-dark: #f4f5f6; --on-dark-2: rgba(244,245,246,.72); --on-dark-3: rgba(244,245,246,.5); --line-dark: rgba(255,255,255,.08); --accent: #9cc4ee; }
.app__nav { background: #090c11; border-right: 1px solid var(--line-dark); padding: 16px 12px; display: grid; align-content: start; gap: 4px; font-size: 11px; }
.app__brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 14px; font-weight: 700; font-size: 12px; } .app__brand i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #bcd8f5, #6ea3dc); }
.app__nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--on-dark-2); } .app__nav a.on { background: rgba(156,196,238,.14); color: #fff; } .app__nav a i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; } .app__nav a em { margin-left: auto; font-style: normal; font-size: 9px; padding: 1px 6px; border-radius: 6px; background: rgba(47,191,113,.2); color: #2fbf71; }
.app__nav .sep { height: 1px; background: var(--line-dark); margin: 8px 0; }
.app__user { margin-top: auto; display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.04); } .app__user img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .app__user b { display: block; font-size: 10px; } .app__user span { font-size: 9px; color: var(--on-dark-3); }
.app__main { padding: 16px 18px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; min-width: 0; }
.app__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .app__top h4 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: #fff; } .app__top .live { margin-left: auto; }
.app__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.app__body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; min-height: 0; }
.app__map { position: relative; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line-dark); padding: 10px; display: grid; grid-template-rows: auto 1fr; gap: 6px; min-height: 180px; }
.app__map svg { width: 100%; height: 100%; } .app__map .z { fill: rgba(156,196,238,.08); stroke: rgba(156,196,238,.35); stroke-dasharray: 3 3; } .app__map .d { fill: #9cc4ee; } .app__map .d.hot { fill: #2fbf71; } .app__map .d.off { fill: #d94f5c; opacity: .7; } .app__map text { fill: rgba(255,255,255,.55); font-size: 8px; font-family: var(--sans); }
.app__foot { display: flex; gap: 8px; flex-wrap: wrap; } .app__foot span { font-size: 9px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--on-dark-2); } .app__foot span.on { background: rgba(156,196,238,.14); color: #fff; }
.app__phone { position: absolute; right: -3%; bottom: -24px; width: 190px; aspect-ratio: 9/19; border-radius: 26px; background: #0b0d10; padding: 7px; box-shadow: 0 0 0 2px #2a2f38, 0 40px 80px -30px rgba(0,0,0,.8); animation: floatY 7s ease-in-out infinite; z-index: 2; }
.app__phone > div { width: 100%; height: 100%; border-radius: 20px; background: #0c1016; padding: 24px 10px 10px; display: grid; align-content: start; gap: 7px; font-size: 9px; color: #f4f5f6; --on-dark-3: rgba(244,245,246,.5); --line-dark: rgba(255,255,255,.08); }
.app__push { padding: 8px 9px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); display: grid; grid-template-columns: 20px 1fr; gap: 7px; font-size: 8.5px; opacity: 0; transform: translateY(-6px); animation: fiIn .6s var(--ease) forwards; animation-delay: var(--d, 0s); } .app__push i { width: 20px; height: 20px; border-radius: 6px; background: rgba(156,196,238,.2); display: grid; place-items: center; color: #9cc4ee; } .app__push b { display: block; } .app__push span { color: var(--on-dark-3); }
.app__push i svg { width: 10px; height: 10px; }
@media (max-width: 1023px) { .app__screen { grid-template-columns: 1fr; min-height: 0; } .app__nav { display: none; } .app__phone { display: none; } .app__kpis { grid-template-columns: repeat(2, 1fr); } .app__body { grid-template-columns: 1fr; } }
/* 4 Magazin */
.mag { display: grid; gap: 14px; }
@media (min-width: 760px) { .mag { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .mag { grid-template-columns: repeat(3, 1fr); } }
.mag__feat { grid-column: 1 / -1; display: grid; gap: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); }
@media (min-width: 900px) { .mag__feat { grid-template-columns: 1.1fr 1fr; } }
.mag__feat img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.mag__feat div { padding: clamp(22px, 3.4vw, 40px); display: grid; align-content: center; gap: 10px; }
.mag__feat h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; }
.art { background: #fff; border-radius: 18px; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 8px; align-content: start; transition: transform .5s var(--ease), box-shadow .5s; position: relative; }
.art:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -40px rgba(10,20,30,.4); }
.art__meta { display: flex; gap: 8px; align-items: center; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .art__meta b { color: var(--accent-ink); }
.art h4 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 0; line-height: 1.15; }
.art p { font-size: .86rem; color: var(--ink-2); margin: 0; }
.art__num { position: absolute; right: 16px; top: 12px; font-family: var(--serif); font-size: 1.6rem; color: rgba(16,24,32,.1); }
.art .tag-row { display: flex; gap: 5px; flex-wrap: wrap; } .art .tag-row span { padding: 3px 8px; border-radius: 999px; background: var(--bg); font-size: .66rem; color: var(--ink-2); }
.art__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: .74rem; color: var(--ink-3); } .art__foot a { color: var(--accent-ink); font-weight: 600; }
.mag-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
.mag-tabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .82rem; font-weight: 600; color: var(--ink-2); } .mag-tabs button.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.mag [data-mag] { display: none; } .mag [data-mag].is-on { display: grid; }
/* 5 Branchen-Hero: Portrait + Fakten */
.bhero { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1024px) { .bhero { grid-template-columns: 1fr 1fr; } }
.bhero__vis { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; align-items: end; }
.bhero__vis .img-frame--portrait { aspect-ratio: 3/4; }
.bhero__vis .img-frame--sq { aspect-ratio: 1; }
.bhero__vis .col { display: grid; gap: 12px; }
.bhero__badge { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); display: grid; gap: 4px; }
.bhero__badge b { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; line-height: 1; } .bhero__badge span { font-size: .72rem; color: var(--ink-3); }
.bhero__float { position: absolute; left: -4%; bottom: 12%; z-index: 2; }
@media (max-width: 760px) { .bhero__vis { grid-template-columns: 1fr 1fr; } .bhero__float { display: none; } }
/* 6 Tool-Teaser-Reihe auf Branchenseiten */
.tools3 { display: grid; gap: 12px; }
@media (min-width: 760px) { .tools3 { grid-template-columns: repeat(3, 1fr); } }
.tool-teaser { position: relative; padding: 20px; border-radius: 18px; background: var(--navy); color: #fff; display: grid; gap: 8px; overflow: hidden; }
.tool-teaser::before { content: ""; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(156,196,238,.35), transparent 65%); }
.tool-teaser small { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #9cc4ee; } .tool-teaser b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; } .tool-teaser p { font-size: .82rem; color: rgba(255,255,255,.75); margin: 0; } .tool-teaser .btn { justify-self: start; background: #fff; color: var(--navy); margin-top: 6px; }

/* ==========================================================================
   v7 – Fixes + 3D + neue Seiten
   ========================================================================== */
/* 1 Rotator ohne Layout-Sprung */
.rot { display: inline-block; position: relative; vertical-align: baseline; min-width: var(--rw, auto); text-align: left; white-space: nowrap; }
.rot > span { position: absolute; left: 0; top: 0; } .rot > span.is-on { position: relative; }
/* 2 Vertrauens-Balken */
.kbar div { grid-template-columns: minmax(150px, 190px) 1fr 56px; gap: 12px; }
@media (max-width: 560px) { .kbar div { grid-template-columns: 1fr 48px; } .kbar div > span:first-child { grid-column: 1 / -1; margin-bottom: -4px; } }
.kbar div > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 3 Timeline: Punkte klar außerhalb */
.timeline { padding-left: 52px; } .timeline::before, .timeline::after { left: 14px; }
.tl-item::before { left: -52px; width: 30px; height: 30px; top: 10px; }
.tl-item.is-active::after { left: -42px; top: 15px; font-size: 13px; }
.tl-item.is-active { transform: none; }
.tl-item .yr { right: 14px; top: 10px; font-size: 1.1rem; padding: 2px 8px; border-radius: 8px; background: var(--bg); color: var(--ink-3); }
/* 4 Einblicke-Caption */
.vcard--plain .vcard__bottom small { font-family: var(--sans); font-size: .76rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* 5 3D */
.stage { perspective: 1200px; }
.radar3d { --spin: 0deg; --px: 0px; --py: 0px; --rx: 0deg; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) rotateX(calc(52deg + var(--rx))) rotateZ(calc(-12deg + var(--spin))); transform-style: preserve-3d; }
.radar3d .blip, .radar3d .radar__core, .radar3d .radar__src { transform: translate(-50%, -50%) rotateZ(calc(12deg - var(--spin))) rotateX(calc(-52deg - var(--rx))); transform-origin: center; }
.radar3d .radar__core { transform: translate(-50%, -50%) rotateZ(calc(12deg - var(--spin))) rotateX(calc(-52deg - var(--rx))) translateZ(30px); }
.radar3d .blip { animation-name: blipIn3d; }
@keyframes blipIn3d { 0%, 8% { opacity: 0; transform: translate(-50%, -50%) rotateZ(calc(12deg - var(--spin))) rotateX(calc(-52deg - var(--rx))) scale(.6) } 12%, 70% { opacity: 1; transform: translate(-50%, -50%) rotateZ(calc(12deg - var(--spin))) rotateX(calc(-52deg - var(--rx))) scale(1) } 85%, 100% { opacity: 0 } }
.radar3d .radar__ring:nth-child(1) { box-shadow: 0 0 0 1px rgba(43,90,151,.05), 0 30px 60px -20px rgba(43,90,151,.25); background: radial-gradient(circle, rgba(156,196,238,.12), transparent 70%); }

@media (max-width: 1023px) { .radar3d { transform: rotateX(calc(52deg + var(--rx))) rotateZ(calc(-12deg + var(--spin))) !important; margin: -40px auto -60px; width: 94%; } }
.app { perspective: 1600px; }
.app__frame { transform: rotateX(var(--ax, 6deg)) rotateY(var(--ay, -4deg)); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.app:hover .app__frame { transform: rotateX(0) rotateY(0); }
.app__phone { transform: translateZ(60px); }
@media (min-width: 1024px) { .app__note { margin-top: 110px !important; } }
.person-card, .kcard, .art, .gewerk { transform-style: preserve-3d; }
/* 6 Potenzial: Live-Feed */
.orders { position: relative; border-radius: 22px; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 10px; min-height: 380px; align-content: start; overflow: hidden; }
.orders::after { display: none; }
.orders__head { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--ink-2); padding-bottom: 10px; border-bottom: 1px solid var(--line); } .orders__head b { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--ink); }
.order { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-size: .86rem; animation: orderIn .6s var(--ease); }
.order i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); } .order i svg { width: 16px; height: 16px; }
.order b { display: block; } .order span { color: var(--ink-3); font-size: .76rem; }
.order em { font-style: normal; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); white-space: nowrap; } .order em small { font-family: var(--sans); font-size: .64rem; color: var(--ink-3); display: block; text-align: right; }
.order.new { border-color: rgba(43,90,151,.4); box-shadow: 0 10px 30px -20px rgba(43,90,151,.5); }
@keyframes orderIn { from { opacity: 0; transform: translateY(-14px) scale(.98) } to { opacity: 1; transform: none } }
.orders__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid rgba(16,24,32,.06); margin-top: 4px; } .orders__sum div { text-align: center; padding: 10px; border-radius: 12px; background: var(--bg); } .orders__sum b { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; } .orders__sum span { font-size: .66rem; color: var(--ink-3); }
/* 7 Neue Seiten: Bausteine */
.steps-h { display: grid; gap: 12px; counter-reset: sh; }
@media (min-width: 900px) { .steps-h { grid-template-columns: repeat(4, 1fr); } }
.steps-h div { position: relative; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); }
.steps-h div::before { counter-increment: sh; content: counter(sh); position: absolute; right: 14px; top: 10px; font-family: var(--serif); font-size: 2rem; color: rgba(16,24,32,.08); }
.steps-h b { display: block; margin-bottom: 6px; } .steps-h p { font-size: .86rem; color: var(--ink-2); margin: 0; }
.adcard { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); max-width: 380px; margin-inline: auto; font-size: .84rem; }
.adcard__top { display: flex; gap: 10px; align-items: center; padding: 12px 14px; } .adcard__top img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .adcard__top b { display: block; font-size: .84rem; } .adcard__top span { font-size: .7rem; color: var(--ink-3); }
.adcard__img { aspect-ratio: 4/3; overflow: hidden; } .adcard__img img { width: 100%; height: 100%; object-fit: cover; }
.adcard__body { padding: 12px 14px; display: grid; gap: 8px; } .adcard__body p { margin: 0; color: var(--ink-2); }
.adcard__cta { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--bg); font-size: .8rem; } .adcard__cta b { display: block; } .adcard__cta span { font-size: .7rem; color: var(--ink-3); } .adcard__cta a { padding: 7px 12px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 600; font-size: .76rem; }
.cmp2 { display: grid; gap: 14px; } @media (min-width: 760px) { .cmp2 { grid-template-columns: 1fr 1fr; } }
.cmp2 > div { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); }
.cmp2 > div.bad { background: var(--bg-2); box-shadow: none; } .cmp2 h4 { margin-bottom: 10px; } .cmp2 ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .88rem; color: var(--ink-2); } .cmp2 li { padding-left: 22px; position: relative; } .cmp2 li::before { position: absolute; left: 0; font-weight: 800; } .cmp2 .bad li::before { content: "✕"; color: var(--bad); } .cmp2 .good li::before { content: "✓"; color: var(--ok); }
.specs { display: grid; gap: 8px; } @media (min-width: 760px) { .specs { grid-template-columns: repeat(2, 1fr); } }
.specs > div { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(16,24,32,.06); font-size: .86rem; align-items: start; } .specs > div > div { display: block; } .specs i { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: .74rem; } .specs b { display: block; } .specs span { color: var(--ink-3); font-size: .78rem; }

/* v7.1 – Telefon in der Leiste, schmale Breiten */
.header__right .ico-btn { display: inline-flex; gap: 8px; }
.header__right .ico-btn b { display: none; font-weight: 700; font-size: .8rem; letter-spacing: .01em; }
.header__right .ico-btn b { white-space: nowrap; }
@media (min-width: 1300px) { .header__right .ico-btn { width: auto; height: 40px; padding: 0 14px 0 11px; border-radius: 999px; } .header__right .ico-btn b { display: inline; } }
.nav a { white-space: nowrap; }
.split > *, .grid > *, .bento > * { min-width: 0; }
.page-hero, .hero { overflow-x: clip; }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } .btn--lg { padding: 13px 18px; font-size: .9rem; } .modal__box { width: calc(100vw - 20px); } }
@media (max-width: 480px) { .header__right .btn--cta .cta-long { display: none; } .header__right .btn--cta { white-space: nowrap; } }

/* v8 – ein Hero-Bild, Feed überall, Scheibe, CTAs */
.bhero--one .bhero__vis { display: block; }
.bhero--one .img-frame--hero { aspect-ratio: 4/3; border-radius: 26px; }
.bhero--one .img-frame--hero img { object-fit: cover; width: 100%; height: 100%; }
.bhero--one .bhero__badge { position: absolute; left: -14px; bottom: 26px; z-index: 2; min-width: 150px; }
.bhero--one .bhero__badge + .bhero__badge { left: auto; right: -14px; bottom: auto; top: 26px; }
.bhero--one .bhero__float { left: auto; right: 6%; bottom: -18px; top: auto; }
@media (max-width: 760px) { .bhero--one .bhero__badge { left: 10px; bottom: 10px; padding: 10px 12px; } .bhero--one .bhero__badge + .bhero__badge { right: 10px; top: 10px; } .bhero--one .img-frame--hero { aspect-ratio: 5/4; } }
.radar3d .radar__ring, .radar3d .radar__cross { transition: none; }
.orders--dark { background: var(--navy); border-color: rgba(255,255,255,.08); color: #fff; }
.orders--dark .orders__head, .orders--dark .orders__head b { color: #fff; border-color: rgba(255,255,255,.1); } .orders--dark .orders__head span { color: rgba(255,255,255,.65); }
.orders--dark .order { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: #fff; } .orders--dark .order span { color: rgba(255,255,255,.6); } .orders--dark .order em { color: #fff; } .orders--dark .order em small { color: rgba(255,255,255,.55); }
.orders--dark .orders__sum { border-color: rgba(255,255,255,.1); } .orders--dark .orders__sum div { background: rgba(255,255,255,.06); } .orders--dark .orders__sum span { color: rgba(255,255,255,.6); }
.order .tag-ki { display: inline-block; font-family: var(--sans); padding: 2px 8px; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--ok-soft, #e3f5ea); color: var(--ok, #1f8f4e); }
.order .tag-ki.warn { background: #fff4df; color: #b36b00; } .order .tag-ki.bad { background: #fde8e8; color: #b42318; }
.orders--dark .order .tag-ki { background: rgba(31,143,78,.25); color: #8fe2b0; } .orders--dark .order .tag-ki.warn { background: rgba(214,137,16,.25); color: #ffd48a; } .orders--dark .order .tag-ki.bad { background: rgba(180,35,24,.3); color: #ffb4ad; }
/* CTA */
.btn--call { background: #fff; color: var(--ink); border: 1px solid var(--line); gap: 10px; padding-left: 14px; }
.btn--call i { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ok, #1f8f4e); color: #fff; }
.btn--call i svg { width: 14px; height: 14px; } .btn--call i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(31,143,78,.5); animation: ring 1.8s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.8); opacity: 1 } 100% { transform: scale(1.5); opacity: 0 } }
.btn--call b { display: block; font-size: .92rem; line-height: 1.1; } .btn--call small { display: block; font-size: .66rem; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.btn--accent { overflow: hidden; } .btn--accent::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); } .btn--accent:hover::after { left: 120%; }
.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(28px, 5vw, 56px); background: radial-gradient(120% 140% at 10% 0%, #2e4664, var(--navy) 60%); color: #fff; display: grid; gap: 22px; align-items: center; box-shadow: var(--shadow-lg, 0 40px 80px -40px rgba(0,0,0,.5)); }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.3fr 1fr; } }
.cta-band::before { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(156,196,238,.28), transparent 65%); pointer-events: none; animation: floatY 9s ease-in-out infinite; }
.cta-band h2 { color: #fff; margin: 6px 0 10px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); } .cta-band .kicker { background: rgba(255,255,255,.08); color: #9cc4ee; border-color: transparent; }
.cta-band p { color: rgba(255,255,255,.78); max-width: 52ch; }
.cta-band__side { display: grid; gap: 10px; }
.cta-band__side .btn--call { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.14); } .cta-band__side .btn--call small { color: rgba(255,255,255,.6); }
.cta-band__side .btn--light { background: #fff; color: var(--navy); }
.cta-band__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .74rem; color: rgba(255,255,255,.65); } .cta-band__meta span::before { content: "✓ "; color: #8fe2b0; }
/* Auftragsgewinnung */
.funnel { display: grid; gap: 10px; counter-reset: fn; }
@media (min-width: 900px) { .funnel { grid-template-columns: repeat(5, 1fr); align-items: stretch; } }
.funnel div { position: relative; padding: 18px 16px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.funnel div::before { counter-increment: fn; content: counter(fn); position: absolute; right: 12px; top: 10px; font-family: var(--serif); font-size: 1.6rem; color: rgba(16,24,32,.08); }
.funnel b { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 400; line-height: 1; margin-bottom: 6px; } .funnel small { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .funnel p { font-size: .8rem; color: var(--ink-2); margin: 0; }
.funnel div:last-child { background: var(--navy); color: #fff; border-color: transparent; } .funnel div:last-child p, .funnel div:last-child small { color: rgba(255,255,255,.7); } .funnel div:last-child::before { color: rgba(255,255,255,.12); }
.chan { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.chan i { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); } .chan i svg { width: 24px; height: 24px; }
.chan h3 { margin: 0 0 6px; font-size: 1.15rem; } .chan p { margin: 0 0 10px; font-size: .88rem; color: var(--ink-2); } .chan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .8rem; color: var(--ink-2); } .chan li::before { content: "→ "; color: var(--accent-ink); }
.chan .tech { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ledger { width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.ledger th, .ledger td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); } .ledger th { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--bg); font-weight: 700; }
.ledger td:last-child, .ledger th:last-child { text-align: right; font-variant-numeric: tabular-nums; } .ledger tr:last-child td { border-bottom: 0; } .ledger .sum td { font-weight: 700; background: var(--accent-soft); }
.ledger td b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.feed-note { font-size: .7rem; color: var(--ink-3); margin-top: 8px; text-align: center; }
.orders--dark .live { background: transparent; border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.72); }
.orders--dark .order i { background: rgba(156,196,238,.16); color: #9cc4ee; }
.ledger-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; }
@media (max-width: 760px) { .ledger { min-width: 480px; font-size: .8rem; } .ledger th, .ledger td { padding: 10px 12px; } .hero .btn--call { display: none; } }
.cta-band__side .btn--ghost { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.25) !important; } .cta-band__side .btn--ghost:hover { background: rgba(255,255,255,.08) !important; }
.cta-band__side .btn--call { justify-content: flex-start; text-align: left; }

/* v8.1 – Mobile kompakt: Wisch-Reihen statt Endlos-Stapel (unter 760 px) */
@media (max-width: 760px) {
  /* Wisch-Hinweis */
  .swipe-hint { display: block; text-align: center; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: -6px 0 10px; }
  .swipe-hint::before { content: "← "; } .swipe-hint::after { content: " →"; }
  /* Ziele-Karten */
  .goal { grid-template-rows: auto 1fr; } .goal__media { min-height: 0; aspect-ratio: 16/9; } .goal__body { padding: 16px 16px 18px; } .goal__body h3 { font-size: 1.35rem; } .goal__body .lead, .goal__body p { font-size: .9rem; } .goal__body ul li { font-size: .84rem; } .capchart { min-height: 0; }
  /* Team */
  .person-card__img { aspect-ratio: 4/3.6; } .person-card__body q { font-size: 1rem; }
  /* Hero */
  .hero .ncard--b, .hero .result-card__row { display: none !important; } .result-card__body p { font-size: .82rem; } .hero__list li { font-size: .88rem; } .hero__who { margin-top: 12px; } .radar3d { margin: -30px auto -70px; }
  /* Methode */
  .gewerk__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: -16px; } .gewerk__list::-webkit-scrollbar { display: none; } .gewerk__list span { white-space: nowrap; }
  .feature-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding-bottom: 8px; } .feature-chips::-webkit-scrollbar { display: none; } .feature-chips span { white-space: nowrap; }
  .kcard { padding: 16px; } .kbar div { grid-template-columns: 1fr auto; grid-template-areas: "l v" "b b"; row-gap: 4px; } .kbar div > span:first-child { grid-area: l; } .kbar i { grid-area: b; } .kbar b { grid-area: v; }
  /* Journey */
  .jstep { grid-template-columns: 44px 1fr; gap: 10px; padding: 8px 0; } .jstep__t { width: 44px; font-size: .95rem; } .jstep__c { padding: 10px 12px; } .jstep__c span { font-size: .78rem; } .journey::before, .journey::after { left: 21px; }
  /* Allgemein kompakter */
  .sec { padding: clamp(44px, 9vw, 64px) 0; } .sec-head { margin-bottom: 22px; } .lead { font-size: .98rem; } .btn-row { gap: 8px; } .btn-row .btn { width: 100%; justify-content: center; }
  .cta-band { padding: 24px 20px; } .cta-card { padding: 22px 18px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; } .stat b { font-size: 1.9rem; }
  .app__phone { display: none; } .app__note { margin-top: 12px !important; }
  .gallery-marquee, .marquee { --speed: 40s; }
}
.swipe-hint { display: none; }
@media (max-width: 760px) { .app .dash__feed { display: none; } .app__frame { transform: none; } .app__foot { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .goal__media:has(.capchart) { aspect-ratio: 4/3; } .capchart { padding: 16px; gap: 8px; } .capchart__foot { display: none; } .capchart__head b { font-size: 1.2rem; } }
@media (max-width: 760px) { .rot { min-width: 0; } }
@media (max-width: 760px) {

  .gewerk__list { max-height: 72px; overflow: hidden; flex-wrap: wrap; } .gewerk__facts { gap: 6px; } .gewerk__facts b { font-size: 1.2rem; }
  .kcard.k-6:has(.kbar) { flex-basis: 94%; max-width: 94%; } .kbar div { grid-template-columns: 1fr auto; } .kbar i { display: none; } .kbar { gap: 2px; } .kbar div { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: .78rem; }
  .callouts { display: none !important; } .app__note { display: none; }
}
@media (max-width: 760px) { .gewerk { overflow: hidden; } .gewerk__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .gewerk__facts > * { min-width: 0; padding: 10px 6px; } .gewerk__facts span { font-size: .66rem; } }

/* v8.2 – Mobile nach Bese-Vergleich: feste Blöcke, keine klebenden Panels, volle Bildbreite */
@media (max-width: 899px) {
  .jside { position: static; }
  .jside .lead { font-size: .92rem; margin-top: 10px !important; }
  .jbig { font-size: 2.6rem; }
  .jside .panel-dark__head { display: none; }
  .jlegend { margin-top: 10px; }
  .journey-wrap { gap: 12px; }
}
@media (max-width: 760px) {
  /* Hero: Reihenfolge wie Bese – Headline, Text, 3 Punkte, CTA, dann Visual */
  .hero__trust { display: none; }
  .hero__who { width: 100%; justify-content: flex-start; }
  .hero .btn-row .btn--ghost { display: none; }
  /* Einblicke: eine Bild-Reihe + knapper Text */
  #einblicke .lead { font-size: .92rem; }
  /* Karte: Deutschland schlanker, Standort-Karten als Reihe */
  .map2 svg { max-height: 360px; }
  /* Standorte-Scroller: Karten 86 % */
  .scroller > * { flex: 0 0 86%; max-width: 86%; }
  .case__media { min-height: 0; aspect-ratio: 16/10; }
  /* Rechner: Ergebnisse 2-spaltig bleiben, Slider enger */
  .range-field { gap: 4px; } .calc-grid { gap: 14px; }
  /* Brief von Elian: Porträt kleiner */
  #elian .img-frame { max-height: 300px; } #elian .img-frame img { object-position: top; }
  /* Bewertungs-Spalten: nur eine */
  .review-cols { max-height: 420px; } .review-cols > *:nth-child(n+2) { display: none; }
  /* Magazin: Teaser-Bild weg, Artikel-Reihe reicht */
  #magazin .img-frame { display: none; }
  /* Galerie-Marquee höher, läuft als Bildband */
  .gallery__track img { height: 150px; }
  /* Abschnittsköpfe linksbündig und kürzer */
  .sec-head--center { text-align: left; } .sec-head--center .kicker { margin-left: 0; }
  h2 { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
  /* Ablauf/CTA-Karten */
  .cta-card__right { width: 100%; } .cta-card__right .btn { width: 100%; }
}

/* v9 – Mobile-Überarbeitung nach Live-Analyse */
[hidden] { display: none !important; }
@media (max-width: 760px) {
  /* 1. Weniger festes Zeug: nur Header + eine Leiste unten, keine schwebenden Kreise */
  .fab { display: none !important; }
  .mobile-bar { left: 10px; right: 10px; bottom: 10px; padding: 6px; }
  .mobile-bar .btn { padding: 11px 10px; font-size: .86rem; }
  .header { padding: 8px 0; } .header__inner { padding: 5px 5px 5px 12px; } .header__right .btn--cta { padding: 8px 11px; } .header__right .ico-btn { width: 36px; height: 36px; } .burger { width: 36px; height: 36px; }
  body { padding-bottom: 72px; }
  /* 2. Cookie-Hinweis kompakt */
  .consent { padding: 14px 16px; left: 10px; bottom: 10px; width: calc(100% - 20px); } .consent h3 { font-size: 1.2rem; margin: 4px 0 2px; } .consent p { font-size: .72rem; line-height: 1.4; } .consent .btn-row { margin-top: 10px; gap: 6px; } .consent .btn { padding: 10px; font-size: .84rem; } .consent__icon, .consent svg { display: none; }
  /* 3. Wisch-Reihen: oben ausrichten, keine gestreckten Leerkarten, keine dunklen Wipe-Flächen */

  .wipe::after { display: none; } .wipe img { transform: none !important; }
  .art { height: auto !important; }
  /* 4. Hero: Marken-Zeile und Kästchen-Zeile kompakt */
  .hero__branch { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; margin-bottom: 14px; } .hero__branch::-webkit-scrollbar { display: none; } .hero__branch a { white-space: nowrap; padding: 7px 11px; font-size: .74rem; flex: none; }
  .hero__logos { display: none; }
  /* 5. Einblicke: Bilder als saubere Reihe, Hintergrund hell */
  #einblicke .vcards > *, #einblicke .rail > * { flex-basis: 78%; max-width: 78%; }
  /* 6. Wissen/Methode: Gewerk-Karten mit allem Inhalt, Tag-Wolken begrenzt */
  .gewerk__list { max-height: 64px; } .kcard .serif { font-size: .9rem; }
  /* 7. Elian-Brief: Foto quer, Badge klein, interne Marker aus */
  .letter__photo { aspect-ratio: 16/11; } .letter__photo img { object-position: center 20%; } .letter__photo .badge-abs { left: 10px; bottom: 10px; padding: 7px 10px; font-size: .72rem; } .letter__photo .badge-abs b { font-size: .84rem; }
  .freigabe { display: none !important; }
  /* 8. Automatisierung: nur die Anruf-Demo in voller Breite, Rest als schlanke Reihe */
  #automatisierung .grid-3 > * { flex-basis: 90%; max-width: 90%; }
  .call-demo, .chat, .night { min-height: 0; } .night { max-height: 420px; overflow: hidden; }
  /* 9. Betriebs-Check & Texter: Formulare eng, Hinweistexte klein */
  .tool .grid-3, .tool .grid-2 { gap: 8px; } .tool .small.muted { font-size: .7rem; } .field label { font-size: .68rem; } .field input, .field select, .field textarea { padding: 11px 12px; }
  .scan-grid > * { flex-basis: 64%; max-width: 64%; }
  /* 10. Standorte-Karten: Bild oben, Text kürzer */
  .case__body { padding: 16px; } .case__body h3 { font-size: 1.15rem; } .case__box { display: none; } .case__body p { font-size: .86rem; }
  /* 11. Karte: Standort-Kacheln als Reihe, Deutschland kompakt */
  .map2 svg { max-height: 300px; } .map-legend { font-size: .68rem; gap: 10px; }
  /* 12. Team-Karten kompakter */
  .person-card__img { aspect-ratio: 1; } .person-card__body { padding: 12px 14px 14px; gap: 6px; } .person-card__body q { font-size: .94rem; } .person-card__body .fact { display: none; }
  /* 13. Magazin: Karten kurz */
  .art { padding: 14px 16px; } .art p { font-size: .84rem; } .art .tag-row { display: none; }
  /* 14. Allgemein: enger, ruhiger */
  .sec { padding: 40px 0; } .sec--tight { padding: 24px 0; } .sec-head { margin-bottom: 18px; } .kicker { font-size: .62rem; padding: 6px 10px; }
  h2 { font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.08; } .lead { font-size: .94rem; line-height: 1.5; }
  .card { padding: 18px; } .card h3 { font-size: 1.1rem; } .card p { font-size: .86rem; }
  .cta-band h2 { font-size: 1.5rem; } .cta-band__meta { font-size: .68rem; gap: 8px; }
  .faq summary { padding: 14px 44px 14px 16px; font-size: .92rem; } .faq p { font-size: .86rem; }
  .ticker-bar { font-size: .72rem; }
  .stats { gap: 8px; } .stat { padding: 14px; } .stat b { font-size: 1.7rem; } .stat span { font-size: .72rem; }
}
@media (max-width: 760px) {
  /* Automatisierung: kein Wischen, drei kompakte Karten untereinander */
  #automatisierung .grid-3 { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; overflow: visible; padding: 0; margin: 0; }
  #automatisierung .grid-3 > * { flex: none; max-width: none; }
  #automatisierung .swipe-hint { display: none; }
  .call-demo { gap: 10px; } .tags-out { min-height: 0; } .transcript { min-height: 0; }
  .chat { min-height: 0; } .night { max-height: none; }
  .feature-chips { display: none; }
}
@media (max-width: 760px) { .night li, .bub { opacity: 1 !important; transform: none !important; } .night { padding: 16px; } .night ul { gap: 6px; } .night li { padding: 8px 10px; font-size: .82rem; } .night__foot { margin-top: 10px; font-size: .7rem; } }

/* v9.1 – Partnerbetriebe */
.logo-sep { width: 1px; height: 26px; background: var(--line); display: inline-block; margin: 0 6px; }
.plogo { display: inline-flex; align-items: center; opacity: .78; filter: grayscale(1) contrast(1.05); transition: opacity .3s, filter .3s, transform .3s; } .plogo:hover { opacity: 1; filter: none; transform: translateY(-2px); } .plogo img { height: 30px; width: auto; display: block; }
.partners { display: grid; gap: 16px; }
@media (min-width: 760px) { .partners { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .partners { grid-template-columns: repeat(4, 1fr); } }
.pcard { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; background: #fff; border-radius: 22px; border: 1px solid rgba(16,24,32,.06); box-shadow: var(--shadow); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(10,20,30,.4); }
.pcard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .pcard__head img { height: 28px; width: auto; max-width: 46%; object-fit: contain; }
.pcard__since { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.pcard__shot { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg); } .pcard__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 6s ease; } .pcard:hover .pcard__shot img { transform: translateY(calc(-100% + 100% * 10 / 16 * 1.6)); }
.pcard__shot::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -30px 30px -20px rgba(16,24,32,.12); pointer-events: none; }
.pcard__body { padding: 16px; display: grid; gap: 10px; align-content: start; } .pcard__body h3 { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; margin: 0; line-height: 1.25; } .pcard__body h3 small { display: block; font-weight: 500; font-size: .74rem; color: var(--ink-3); margin-top: 2px; } .pcard__body p { font-size: .84rem; color: var(--ink-2); margin: 0; }
.pcard__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .pcard__facts span { display: grid; gap: 2px; padding: 8px 6px; border-radius: 10px; background: var(--bg); font-size: .62rem; color: var(--ink-3); text-align: center; line-height: 1.2; } .pcard__facts b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); } .pcard__facts sup { font-size: .55em; color: var(--accent-ink); }
.pcard__did { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .76rem; color: var(--ink-2); } .pcard__did li::before { content: "✓ "; color: var(--ok, #1f8f4e); font-weight: 700; }
.pcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: .74rem; } .pcard__foot a { font-weight: 700; color: var(--accent-ink); text-decoration: none; } .pcard__foot a:hover { text-decoration: underline; } .pcard__verify { color: var(--ink-3); font-size: .64rem; } .pcard__verify::before { content: "🔍 "; }
.ptrust { display: grid; gap: 10px; margin-top: 26px; } @media (min-width: 760px) { .ptrust { grid-template-columns: repeat(4, 1fr); } }
.ptrust div { padding: 16px 18px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 4px; } .ptrust b { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1; } .ptrust span { font-size: .76rem; color: var(--ink-2); }

.pcard__foot a { white-space: nowrap; }
.pcard__word, .plogo--word { font-family: var(--sans); font-weight: 500; font-size: .95rem; letter-spacing: -.01em; color: #1a6fb5; white-space: nowrap; text-decoration: none; } .pcard__word b, .plogo--word b { font-weight: 800; color: #0b2a4a; } .plogo--word { opacity: .78; filter: grayscale(1); } .plogo--word:hover { opacity: 1; filter: none; }
@media (min-width: 1100px) { .partners { grid-template-columns: repeat(3, 1fr); } }
.pcard__word { font-size: 1.05rem; }

/* v9.2 – Mobile: zwingende Fixes */
.a-more-btn { display: none; }
@media (max-width: 760px) {
  .m-hide { display: none !important; }
  /* 1 Hero-Rotator: eigene Zeile, kein Überlappen */
  .hero h1 .rot { display: block; min-width: 0; } .hero h1 .rot > span { display: none; transition: none; } .hero h1 .rot > span.is-on { display: block; opacity: 1; transform: none; }
  .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.3rem); line-height: 1.08; }
  /* 2 CTA im ersten Screen */
  .hero .lead { font-size: .95rem; margin-bottom: 10px; } .hero__list { margin: 8px 0 12px; gap: 6px; } .hero__list li { font-size: .86rem; }
  .hero .btn-row { margin-top: 10px; gap: 8px; } .hero .btn-row .btn--ghost { display: none; } .hero .btn--call { display: inline-flex !important; width: 100%; justify-content: flex-start; padding: 9px 14px; } .hero .btn--call b { font-size: .95rem; }
  .hero__who { display: none; } .hero__branch { margin-bottom: 10px; }
  /* 3 Cookie-Banner schmal */
  .consent { padding: 12px 14px 12px; border-radius: 16px; } .consent__head { display: flex; justify-content: flex-end; margin: 0; } .consent__ico { display: none; } .consent h3 { font-size: 1rem; margin: 0 0 4px; } .consent h3 em { font-style: normal; } .consent p { font-size: .7rem; line-height: 1.35; margin: 0; } .consent .btn-row { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .consent .btn { padding: 10px; font-size: .84rem; } .consent__opts.is-open { margin-top: 8px; }
  /* 4 Mindestschrift 12 px */
  .pcard__facts span, .pcard__since, .pcard__verify, .pcard__foot, .case__meta, .tags span, .gewerk__list span, .kbar div, .kbar span, .jstep__c em, .jstep__c span, .order span, .order em small, .orders__sum span, .map2__stats span, .map-legend, .map-card, .map-card *, .capchart__head small, .stat span, .ptrust span, .art__meta, .art__foot, .funnel small, .funnel p, .chan li, .chan .tech, .specs span, .ledger, .feed-note, .small, .muted, .person-card__body .role, .cta-band__meta, .result-card small, .ncard span, .dkpi span, .pstat span { font-size: .76rem !important; }
  .ncard b, .result-card__kicker, .kicker { font-size: .7rem !important; }
  /* 5 Journey-Zeiten über die Karte */
  .journey::before, .journey::after { display: none; } .jstep { grid-template-columns: 1fr; gap: 4px; padding: 6px 0; } .jstep__t { width: auto; text-align: left; font-size: .8rem; color: var(--ink-3); display: flex; align-items: center; gap: 6px; } .jstep__t i { margin: 0; width: 8px; height: 8px; }
  /* 6 Betriebs-Check kompakt */
  #analyse .a-more { display: none; } #analyse.is-more .a-more { display: grid; } .a-more-btn { display: inline-block; margin: 2px 0 10px; font-size: .84rem; color: var(--accent-ink); background: none; border: 0; padding: 0; text-align: left; } #analyse.is-more .a-more-btn { display: none; }
  #analyse .grid-3 { grid-template-columns: 1fr !important; }
  /* 7 Länge: Sektionen mobil ausblenden */
  #texter, #rechner, #einblicke-galerie, #cta-2, #automatisierung .grid-3 > :nth-child(n+2) { display: none !important; }
  #automatisierung .grid-3 { grid-template-columns: 1fr !important; }
  /* 8 App-Mock: nur KPIs */
  .app__body, .app__foot, .app__phone { display: none !important; } .app__screen { min-height: 0; } .app__kpis { grid-template-columns: 1fr 1fr; }
  /* 11 Partner-Karten kompakter */
  .pcard__shot { aspect-ratio: 16/7; } .pcard__body { padding: 12px 14px; gap: 8px; } .pcard__body p { font-size: .84rem; } .pcard__facts { grid-template-columns: repeat(3, 1fr); } .pcard__facts span { padding: 6px 4px; } .pcard__facts b { font-size: 1rem; }
  /* 14 Tap-Ziele */
  .art__foot a, .faq summary, .mag-tabs button, .tags span, [data-mag-tab], .link, .pcard__foot a, .scroller-nav .ico-btn, .case-nav .ico-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .tags span, .gewerk__list span { padding: 10px 12px; }
}
@media (max-width: 760px) { .kicker, .goal__kicker, .mock-label, .cap { font-size: .66rem !important; letter-spacing: .08em; } .hero__branch a { min-height: 40px; display: inline-flex; align-items: center; } .btn--sm { min-height: 44px; } .btn--call small { font-size: .62rem !important; } }

/* v10 – Website-Check v3 */
.wc3-progress { margin-top: 18px; display: grid; gap: 12px; }
.wc3-steps { display: grid; gap: 6px; }
.wc3-steps > div { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); opacity: .45; transition: opacity .4s, background .4s; }
.wc3-steps > div b { font-size: .9rem; } .wc3-steps > div span { grid-column: 2; font-size: .74rem; color: var(--ink-3); }
.wc3-steps > div i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; grid-row: span 2; }
.wc3-steps > div.is-on { opacity: 1; background: #fff; box-shadow: var(--shadow); } .wc3-steps > div.is-on i { border-color: var(--accent-ink); border-top-color: transparent; animation: spin 1s linear infinite; }
.wc3-steps > div.is-done { opacity: 1; } .wc3-steps > div.is-done i { border-color: var(--ok, #1f8f4e); background: var(--ok, #1f8f4e); } .wc3-steps > div.is-done i::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 800; }
@keyframes spin { to { transform: rotate(360deg) } }
.wc3-term { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: var(--ink-2); background: var(--navy); color: #cfe3ff; padding: 10px 14px; border-radius: 10px; display: flex; gap: 10px; align-items: center; } .wc3-term__dot { width: 8px; height: 8px; border-radius: 50%; background: #8fe2b0; animation: pulse 1.4s infinite; }
/* Ergebnis */
.wc3 { display: grid; gap: 22px; margin-top: 22px; }
.wc3__top { display: grid; gap: 18px; align-items: center; padding: 22px; border-radius: 22px; background: linear-gradient(135deg, #f3f7fc, #fff); border: 1px solid var(--line); }
@media (min-width: 900px) { .wc3__top { grid-template-columns: 150px minmax(0, 1fr) 280px; } }
.wc3__top h3 { margin: 0 0 6px; font-size: 1.5rem; } .wc3__top p { margin: 0; color: var(--ink-2); }
.wc3__parts { display: grid; gap: 8px; margin-top: 12px; } .wc3__part { display: grid; grid-template-columns: 150px minmax(80px, 1fr) 44px; gap: 10px; align-items: center; font-size: .82rem; width: 100%; } .wc3__part i { height: 8px; border-radius: 999px; background: rgba(16,24,32,.08); overflow: hidden; display: block; font-style: normal; width: 100%; } .wc3__part i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 999px; transition: width 1.2s var(--ease); } .wc3__part b { text-align: right; font-variant-numeric: tabular-nums; }
.wc3__loss { padding: 14px 16px; border-radius: 14px; background: #fff4df; border: 1px solid #f3d9a6; color: #6b4300; font-size: .86rem; } .wc3__loss b { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; display: block; color: #b36b00; }
.wc3__quote { padding: 18px 22px; border-radius: 18px; background: var(--navy); color: #fff; font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; position: relative; } .wc3__quote small { display: block; font-family: var(--sans); font-size: .7rem; color: rgba(255,255,255,.6); margin-top: 8px; letter-spacing: .08em; text-transform: uppercase; }
.wc3__grid { display: grid; gap: 22px; } @media (min-width: 900px) { .wc3__grid { grid-template-columns: 300px 1fr; align-items: start; } }
.wc3__phone { position: sticky; top: 100px; } .wc3__phone .frame { position: relative; border-radius: 34px; background: #0a0a0a; padding: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); } .wc3__phone .frame img { width: 100%; border-radius: 26px; display: block; } .wc3__phone .cap { text-align: center; font-size: .72rem; color: var(--ink-3); margin-top: 8px; }
.wc3__phone .frame .mark { position: absolute; left: 10px; right: 10px; border: 2px dashed #ff6b35; border-radius: 10px; pointer-events: none; } .wc3__phone .frame .mark span { position: absolute; right: -2px; top: -22px; background: #ff6b35; color: #fff; font-size: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: .05em; }
.wc3__tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .wc3__tabs button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 .78rem var(--sans); cursor: pointer; } .wc3__tabs button.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.wc3__sec { display: grid; gap: 12px; } .wc3__sec h4 { margin: 0; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: baseline; } .wc3__sec h4 small { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; }
.wc3__comp { display: grid; gap: 8px; } .wc3__comp > div { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .84rem; } .wc3__comp > div i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .74rem; background: var(--bg); } .wc3__comp > div.me { border-color: var(--accent-ink); background: var(--accent-soft); } .wc3__comp > div.me i { background: var(--accent-ink); color: #fff; } .wc3__comp b { display: block; } .wc3__comp span { color: var(--ink-3); font-size: .76rem; }
.wc3__plan { display: grid; gap: 8px; counter-reset: pl; } .wc3__plan > div { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); } .wc3__plan > div::before { counter-increment: pl; content: counter(pl); width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; } .wc3__plan b { display: block; font-size: .95rem; } .wc3__plan p { margin: 2px 0 0; font-size: .82rem; color: var(--ink-2); } .wc3__plan em { font-style: normal; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 4px 8px; border-radius: 6px; background: var(--bg); white-space: nowrap; }
.wc3__txt { display: grid; gap: 8px; } .wc3__txt > div { padding: 10px 14px; border-radius: 12px; font-size: .84rem; border: 1px solid var(--line); background: #fff; } .wc3__txt > div.plus { border-left: 4px solid var(--ok, #1f8f4e); } .wc3__txt > div.minus { border-left: 4px solid var(--bad, #b42318); }
.wc3__share { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-3); }
@media (max-width: 760px) { .wc3__phone { position: static; max-width: 260px; margin: 0 auto; } .wc3__part { grid-template-columns: 110px 1fr 40px; font-size: .76rem; } .wc3__plan > div { grid-template-columns: 30px 1fr; } .wc3__plan em { grid-column: 2; justify-self: start; } }

/* v11 – Mobil-Aufbau nach klarem Rhythmus (Pill → Headline → 2 Sätze → ein Visual → 3 Haken) */
@media (max-width: 760px) {
  /* Rhythmus: gleiche Abstände, jede zweite Sektion leicht getönt */
  .sec { padding: 40px 0 !important; } .sec-head { margin-bottom: 16px; }
  main > .sec:nth-of-type(even):not(.sec--tight):not([id="partner"]) { background: #f3f6fa; }
  .kicker { font-size: .62rem !important; letter-spacing: .1em; padding: 6px 11px; border: 1px solid var(--line); background: #fff; }
  h2 { font-size: 1.72rem !important; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 8px; }
  .sec-head .lead, .lead { font-size: .94rem; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .hero .lead { -webkit-line-clamp: 3; }
  /* Hero: Trust-Zeile wie Bese (kompakt, zwei Spalten) */
  .hero__trust { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 12px; } .hero__trust span { font-size: .7rem; color: var(--ink-2); display: flex; align-items: center; gap: 6px; } .hero__trust svg { width: 12px; height: 12px; flex: none; }
  .hero__trust span:nth-child(3) { grid-column: span 2; }
  /* Wisch-Reihen: saubere Kante – Karten 86 %, rechte Kante weich, Punkte darunter */
  .swipe-hint { display: none !important; }
  .rail-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .rail-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(16,24,32,.15); transition: all .25s; } .rail-dots i.is-on { width: 18px; border-radius: 3px; background: var(--navy); }
  /* Fünf Ziele: vertikal, kompakt – Visual oben, Headline, 3 Haken */
  .goal { border-radius: 20px; } .goal__media { aspect-ratio: 16/9; min-height: 0; } .goal__body { padding: 16px 16px 18px; gap: 8px; } .goal__body h3 { font-size: 1.25rem; line-height: 1.15; } .goal__body > p { display: none; } .goal__body .checks li { font-size: .84rem; } .goal__body .btn-row { margin-top: 10px !important; } .goal__kicker { font-size: .62rem !important; }
  .goal__media:has(.capchart) { aspect-ratio: 16/10; } .capchart { padding: 14px; gap: 6px; } .capchart__head b { font-size: 1.05rem; } .capchart__head small { font-size: .62rem !important; }
  /* Methode: Callouts/Chips weg, Wissen-Karten als Reihe mit gleicher Höhe */
  .integ, .feature-chips, .callouts { display: none !important; }
  .gewerk { padding: 16px; } .gewerk__head h3 { font-size: 1.1rem; }
  /* App-Mock: ruhiger */
  .app__frame { border-radius: 18px; } .app__top h4 { font-size: 1rem; } .app__kpis { gap: 6px; } .dkpi { padding: 10px; } .dkpi b { font-size: 1.3rem; }
  /* Journey: 5 statt 8 Schritte */
  .jstep:nth-child(n+6) { display: none; } .jside .lead { -webkit-line-clamp: 3; }
  /* Partner/Standorte/Team: Karten ruhiger */
  .pcard__shot { aspect-ratio: 16/8; } .pcard__body { padding: 12px 14px; gap: 6px; } .pcard__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .case__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .case__meta { display: none; }
  .person-card__body q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .art p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Magazin: Buttons kompakt */
  #magazin .btn-row { display: grid; gap: 8px; } #magazin .btn-row .btn { width: 100%; }
  /* Brief: kürzer */
  #elian .letter__text p:nth-of-type(n+3) { display: none; }
  /* Bewertungen: 2 Karten */
  .review-cols { max-height: 360px; }
  /* CTA-Karten */
  .cta-card { padding: 20px 18px; border-radius: 20px; } .cta-card h2 { font-size: 1.5rem !important; }
  /* Mobile-Bar: kompakter, rundum */
  .mobile-bar { bottom: 8px; left: 8px; right: 8px; padding: 5px; border-radius: 999px; } .mobile-bar .btn { border-radius: 999px; padding: 11px 8px; font-size: .84rem; }
}
@media (max-width: 760px) {
  /* Website-Ziel: Handy-Mockup in die 16:9-Fläche einpassen */
  .goal__media:has(.phone) { aspect-ratio: 16/10; overflow: hidden; background: var(--navy); }
  .goal__media .phone { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: 150px; margin: 0; aspect-ratio: 9/19.2; border-radius: 22px; padding: 6px; }
  .goal__media .phone__screen { border-radius: 16px; } .goal__media .phone .callpop, .goal__media .phone__notch { display: none; } .goal__media .mock-label { display: none; }
  /* Gewerke (Rohr/Trocknung) nebeneinander wischen */

}

/* ===== v13 – Header: Telefon-Pill, Mobile-Menü neu ===== */
.hdr-tel { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; text-decoration: none; transition: background .2s, transform .2s; white-space: nowrap; }
.hdr-tel:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.hdr-tel__ico { width: 32px; height: 32px; border-radius: 50%; background: var(--ok, #1f8f4e); color: #fff; display: grid; place-items: center; flex: none; } .hdr-tel__ico svg { width: 14px; height: 14px; }
.hdr-tel__txt { display: none; line-height: 1.05; } .hdr-tel__txt b { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .01em; } .hdr-tel__txt small { display: block; font-size: .6rem; color: rgba(255,255,255,.6); letter-spacing: .04em; }
@media (min-width: 1300px) { .hdr-tel__txt { display: block; } }
@media (max-width: 1299px) { .hdr-tel { padding: 0; width: 40px; justify-content: center; border: 0; background: transparent; } .hdr-tel__ico { width: 40px; height: 40px; } }
@media (max-width: 760px) { .hdr-tel__ico { width: 36px; height: 36px; } .hdr-tel { width: 36px; } }
.header__right .ico-btn { display: none !important; }
/* Mobile-Menü */
.mnav { background: #0d1117; padding: calc(var(--nav-h) + 8px) 0 0; }
.mnav__inner { padding: 12px 18px 110px; display: grid; gap: 4px; }
.mnav__hero { padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(156,196,238,.14), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); margin-bottom: 10px; } .mnav__hero .kicker { background: rgba(255,255,255,.08); color: #9cc4ee; border-color: transparent; font-size: .6rem; } .mnav__hero p { margin: 8px 0 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: #fff; }
.mnav h5 { margin: 14px 0 6px; color: rgba(255,255,255,.45); }
.mnav__grid { display: grid; gap: 6px; } .mnav__grid--2 { grid-template-columns: 1fr 1fr; }
.mnav__grid a { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 12px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: #fff; text-decoration: none; min-height: 56px; }
.mnav__grid a:active { background: rgba(255,255,255,.1); }
.mnav__grid i { width: 38px; height: 38px; border-radius: 11px; background: rgba(156,196,238,.14); color: #9cc4ee; display: grid; place-items: center; } .mnav__grid i svg { width: 18px; height: 18px; }
.mnav__grid b { display: block; font-size: .95rem; font-weight: 700; line-height: 1.2; } .mnav__grid small { display: block; font-size: .72rem; color: rgba(255,255,255,.55); margin-top: 2px; line-height: 1.3; }
.mnav__grid--2 a { grid-template-columns: 1fr; gap: 8px; align-items: start; padding: 12px; } .mnav__grid--2 i { width: 32px; height: 32px; border-radius: 9px; } .mnav__grid--2 b { font-size: .88rem; }
.mnav__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 18px 0 6px; } .mnav__links a, .mnav__links button { font: 600 .9rem var(--sans); color: rgba(255,255,255,.75); text-decoration: none; background: none; border: 0; padding: 6px 0; cursor: pointer; }
.mnav__contact { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #0d1117 30%); display: grid; gap: 8px; }
.mnav__contact .m-call { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.mnav__contact .m-call i { width: 36px; height: 36px; border-radius: 50%; background: var(--ok, #1f8f4e); display: grid; place-items: center; flex: none; } .mnav__contact .m-call i svg { width: 16px; height: 16px; } .mnav__contact .m-call b { display: block; font-size: .98rem; } .mnav__contact .m-call small { display: block; font-size: .66rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .04em; }
.mnav__contact .btn { width: 100%; justify-content: center; }
body.mnav-open .mobile-bar, body.mnav-open .fab { display: none !important; }

/* ===== v13 – Farbsystem mobil vereinheitlichen + Leistungsseiten: Bild zuerst ===== */
@media (max-width: 760px) {
  /* Nur drei Flächen: Weiß, Hellblau-Ton, Navy. Alle „dunkel“-Reste auf Navy oder hell. */
  .sec--dark, .sec--white, .sec { background: #fff; }
  .sec--dark-2, .page-hero, .m-sec--tint { background: #f3f6fa !important; }
  .sec--dark-3, .cta-band, .m-sec--navy, .m-card--dark, .m-app, .app__frame, .laptop, .capchart, .goal--dark .goal__media, .pstep, .night, .call-demo, .chat, .orders--dark { background: var(--navy) !important; border-color: transparent !important; }
  .faq details, .kcard, .case, .scan, .finding, .tool, .panel-dark, .card { background: #fff !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
  .faq summary, .faq p { color: var(--ink) !important; } .faq summary::after { color: var(--accent-ink) !important; }
  main .kicker { background: #fff; border-color: var(--line); color: var(--accent-ink); }
  /* Akzent einheitlich: Grün nur für Telefon/OK-Haken, Blau für Links/Icons, Navy für Primär-Buttons */
  .btn--accent, .btn--primary { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
  .btn--light, .btn--ghost { background: #fff !important; color: var(--navy) !important; border: 1px solid var(--line) !important; }
  .m-sec--navy .btn--light, .cta-band .btn--light { background: #fff !important; }
  .live { border-color: var(--line) !important; color: var(--ink-2) !important; background: #fff !important; } .m-app .live, .orders--dark .live, .cta-band .live { border-color: rgba(255,255,255,.25) !important; color: rgba(255,255,255,.8) !important; background: transparent !important; }

  /* Leistungs-/Unterseiten-Hero: Bild zuerst, dann Pill, Headline, 2 Sätze, CTA */
  .page-hero { padding: calc(var(--nav-h) + 10px) 0 24px !important; }
  .page-hero .breadcrumb { display: none; }
  .bhero, .page-hero .split { display: flex !important; flex-direction: column; gap: 14px; }
  .bhero__vis, .page-hero .split > :last-child { order: -1; margin: 0 -18px; }
  .bhero--one .img-frame--hero, .page-hero .img-frame { border-radius: 0 0 24px 24px !important; aspect-ratio: 4/3 !important; }
  .bhero__badge { display: none; } .bhero__float { display: none !important; }
  .bhero--one .img-frame--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(243,246,250,.9)); pointer-events: none; }
  .page-hero h1 { font-size: 1.9rem !important; line-height: 1.08; margin: 4px 0 8px; }
  .page-hero .lead { font-size: .95rem; -webkit-line-clamp: 3; }
  .page-hero .hero__list { display: none; }
  .page-hero .btn-row { display: grid; gap: 8px; margin-top: 12px; } .page-hero .btn-row .btn, .page-hero .btn-row .link { width: 100%; justify-content: center; text-align: center; }
  .page-hero .orders { margin: 0 -18px; border-radius: 0 0 24px 24px !important; }
  /* Mobile-Bar farblich an Header angleichen */
  .mobile-bar { background: var(--navy); } .mobile-bar .btn--ghost { background: #fff !important; color: var(--navy) !important; } .mobile-bar .btn--accent { background: #9cc4ee !important; color: var(--navy) !important; border-color: transparent !important; }
}
@media (max-width: 760px) {
  /* Nur echte Foto-Heros tauschen; Seiten mit Feed/Formular im Hero bleiben Text-zuerst */
  .page-hero .split > :last-child:not(:has(.img-frame)) { order: 0; margin: 0; }
  .page-hero .split > :last-child:not(:has(.img-frame)) .orders { margin: 0; border-radius: 18px !important; }
}

/* ===================== v14 – MOBIL: KEINE WISCH-REIHEN AUF UNTERSEITEN. Alles untereinander, kompakt. ===================== */
@media (max-width: 760px) {
  /* Alle Reihen-Container zurück auf vertikales Grid */
  .sec .grid, .sec .grid-2, .sec .grid-3, .sec .grid-4, .stack, .people, .mag, .mag [data-mag], .process, .map-cards, .know, .scroller, .partners, .scan-grid, .findings, .steps-h, .funnel, .gewerke, .rail, .callouts, .specs, .cmp2, .chan-grid {
    display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; overflow: visible !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; scroll-snap-type: none !important;
  }
  .sec .grid > *, .sec .grid-2 > *, .sec .grid-3 > *, .sec .grid-4 > *, .stack > *, .people > *, .mag [data-mag] > *, .process > *, .map-cards > *, .know > *, .scroller > *, .partners > *, .scan-grid > *, .findings > *, .steps-h > *, .funnel > *, .gewerke > *, .rail > *, .specs > *, .cmp2 > * {
    flex: none !important; max-width: none !important; width: auto !important; min-width: 0 !important; scroll-snap-align: none !important;
  }
  .rail-dots, .swipe-hint, .scroller-nav, .case-nav { display: none !important; }
  .mag [data-mag]:not(.is-on) { display: none !important; } .mag [data-mag].is-on { display: grid !important; }
  /* Spezialfälle: 2-spaltig, wo es wirklich passt */
  .scan-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stats, .m-stats, .pcard__facts, .gewerk__facts, .calc-out, .app__kpis, .dash__kpis { grid-template-columns: 1fr 1fr !important; }
  /* Karten kompakt: Pill, Titel, 2–3 Zeilen */
  .card { padding: 16px !important; border-radius: 16px !important; } .card .num { font-size: .62rem !important; margin-bottom: 6px; } .card h3 { font-size: 1.08rem !important; margin: 0 0 6px !important; line-height: 1.25; } .card p { font-size: .88rem !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card ul { margin: 8px 0 0 !important; font-size: .84rem; } .card li { padding: 3px 0; }
  .card .btn-row { margin-top: 10px !important; }
  /* Fünf-Ziele / goal */
  .goal { grid-template-columns: 1fr !important; } .goal__media { aspect-ratio: 16/9 !important; min-height: 0 !important; }
  /* Pfad/Prozess */
  .pstep { padding: 14px 16px !important; } .pstep h3 { font-size: 1.05rem !important; } .pstep p { font-size: .86rem !important; }
  .steps-h > div, .funnel > div { padding: 14px 16px !important; } .funnel b { font-size: 1.5rem !important; } .funnel p { font-size: .84rem !important; }
  /* Personen/Partner/Cases */
  .person-card { display: grid !important; grid-template-columns: 84px 1fr !important; gap: 12px; align-items: start; padding: 12px !important; } .person-card__img { aspect-ratio: 1 !important; border-radius: 12px; overflow: hidden; } .person-card__img .tag { display: none; } .person-card__body { padding: 0 !important; gap: 4px !important; } .person-card__body b { font-size: .98rem; } .person-card__body q { font-size: .92rem !important; -webkit-line-clamp: 3; }
  .pcard { grid-template-rows: auto !important; } .pcard__shot { aspect-ratio: 16/7 !important; }
  .case { grid-template-columns: 1fr !important; } .case__media { aspect-ratio: 16/9 !important; min-height: 0 !important; } .case__body { padding: 14px 16px !important; } .case__body h3 { font-size: 1.1rem !important; }
  .art { padding: 14px 16px !important; } .art h3, .art h4 { font-size: 1rem !important; }
  .kcard { padding: 16px !important; } .gewerk { padding: 16px !important; }
  .chan { grid-template-columns: 44px 1fr !important; gap: 12px !important; padding: 14px !important; } .chan i { width: 44px !important; height: 44px !important; } .chan h3 { font-size: 1.02rem !important; } .chan p { font-size: .86rem !important; } .chan ul { font-size: .8rem !important; } .chan .tech { display: none; }
  .specs > div { grid-template-columns: 28px 1fr !important; }
  /* Split-Sektionen: Bild oben, Text unten, Bild 16:9 */
  .split { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; } .split .img-frame { aspect-ratio: 16/9 !important; order: -1; } .split .img-frame img { width: 100%; height: 100%; object-fit: cover; }
  /* Browser-Frames / Referenzen */
  .browser { border-radius: 14px !important; } .browser__view { aspect-ratio: 16/10 !important; }
  /* Tabellen */
  .ledger-wrap { margin: 0 -18px; padding: 0 18px; }
  /* Alle Container: nichts darf breiter als die Seite sein */
  .wrap { padding-left: 18px !important; padding-right: 18px !important; }
  .sec img, .sec svg, .sec video, .sec iframe { max-width: 100%; }
  .btn-row { display: grid !important; gap: 8px !important; } .btn-row .btn, .btn-row .link { width: 100% !important; justify-content: center; text-align: center; }
  /* Abschnittsköpfe kompakt, Lead 3 Zeilen */
  .sec-head { margin-bottom: 14px !important; } .sec-head .lead { -webkit-line-clamp: 3; }
  h2 { font-size: 1.65rem !important; }
  /* Labels, die zu lang sind */
  .field label .muted { display: none; }
}

@media (max-width: 760px) { .aurora { overflow: hidden; max-width: 100vw; } .aurora i { max-width: 100vw; } html { overflow-x: hidden; } body { overflow-x: clip; } }
@media (max-width: 760px) { .page-hero .split > * { margin-left: 0 !important; margin-right: 0 !important; } .page-hero .split > :has(.img-frame) { margin: 0 -18px !important; } }

/* ===== v14.1 – Unterseiten mobil straffen ===== */
@media (max-width: 760px) {
  /* Tool-Teaser nach dem Hero: eine schlanke Zeile statt drei dunkler Blöcke */
  .tools3 { grid-template-columns: 1fr !important; gap: 8px !important; }
  .tool-teaser { display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 14px !important; background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line); border-radius: 14px !important; }
  .tool-teaser::before { display: none; } .tool-teaser small { color: var(--ink-3) !important; grid-column: 1; } .tool-teaser b { font-size: 1.05rem !important; color: var(--ink) !important; grid-column: 1; } .tool-teaser p { display: none; } .tool-teaser .btn { grid-column: 2; grid-row: 1 / span 2; padding: 9px 12px !important; font-size: .8rem !important; width: auto !important; background: var(--navy) !important; color: #fff !important; }
  /* Stats als 2×2, kleiner */
  .stats .stat { padding: 12px !important; } .stats .stat b { font-size: 1.6rem !important; } .stats .stat span { font-size: .7rem !important; }
  /* Leere Panels/Platzhalter verstecken */
  .panel-dark:empty, .card:empty, .result:empty { display: none !important; }
  .gebiet-panel:has(.result:empty) .result { display: none; }
  /* Referenz-Browserfenster: 2 statt 5 */
  .refs { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } .refs > :nth-child(n+3) { display: none !important; }
  /* Anzeigen-Beispiele: nur eins */
  #anzeigen .grid > :nth-child(n+2) { display: none !important; }
  /* Footer kompakter */
  .footer__disclaimer { font-size: .7rem; color: var(--ink-3); } .footer__grid { gap: 18px !important; } .footer h5 { margin-top: 10px; }
  /* Sektionen: weniger Abstand, Kopf links */
  .sec { padding: 34px 0 !important; } .sec-head--center { text-align: left; }
  /* Karten-Listen in Karten auf 3 Punkte */
  .card ul li:nth-child(n+4) { display: none; }
}
@media (max-width: 760px) {
  /* Navy-Karten (inline-styled) bleiben navy; sonst weißer Text auf weiß */
  .card[style*="--navy"] { background: var(--navy) !important; border-color: transparent !important; color: #fff !important; }
  .card[style*="--navy"] h3, .card[style*="--navy"] p, .card[style*="--navy"] li { color: #fff !important; }
  /* Tag-Wolken mobil weg */
  .kcloud, .tag-cloud, .feature-chips, .integ { display: none !important; }
}

/* ===================== v15 – MOBILE-STARTSEITE nach Bese-Bauplan ===================== */
.m-home { display: none; }
@media (max-width: 760px) {
  body.has-mhome main > .hero, body.has-mhome main > .sec, body.has-mhome main > .ticker-bar, body.has-mhome main > .rail-dots { display: none !important; }
  .m-home, .m-home[hidden] { display: block !important; }
  .m-home { --mb-dark: #0c1012; --mb-dark2: #17191d; --mb-grey: #eaeaec; --mb-pad: 20px; font-size: 16px; color: var(--ink); }
  .mb { padding: 48px var(--mb-pad); }
  .mb--light { background: #fff; color: var(--ink); } .mb--grey { background: var(--mb-grey); color: var(--ink); }
  .mb--dark { background: var(--mb-dark); color: #fff; } .mb--dark2 { background: var(--mb-dark2); color: #fff; }
  .mb h1, .mb h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
  .mb h1 { font-size: 2.1rem; line-height: 1.08; margin: 0 0 12px; } .mb h2 { font-size: 2rem; line-height: 1.1; margin: 8px 0 10px; } .mb h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin: 6px 0 10px; }
  .mb h1 em, .mb h2 em, .mb h3 em { font-style: italic; color: var(--accent-ink); } .mb--dark em, .mb--dark2 em, .mb-goal--navy em { color: #9cc4ee !important; }
  .mb p { font-size: 1rem; line-height: 1.5; margin: 0 0 14px; color: var(--ink-2); } .mb--dark p, .mb--dark2 p { color: rgba(255,255,255,.75); }
  .mb-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); margin-bottom: 4px; } .mb-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .mb--dark .mb-kicker, .mb--dark2 .mb-kicker { color: #9cc4ee; } .mb-kicker--sm { font-size: .6rem; margin-top: 12px; }
  .mb-sub { margin-top: 28px !important; }
  .mb-fine { font-size: .74rem !important; color: var(--ink-3) !important; margin-top: 10px !important; } .mb-fine a { color: inherit; } .mb-fine--light { color: rgba(255,255,255,.5) !important; }
  /* Buttons */
  .mb-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 13px 20px; border-radius: 999px; font: 700 .95rem var(--sans); text-decoration: none; margin-top: 6px; transition: transform .2s; } .mb-btn:active { transform: scale(.98); }
  .mb-btn--primary { background: #fff; color: var(--mb-dark); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 30px -14px rgba(0,0,0,.4); } .mb--light .mb-btn--primary, .mb--grey .mb-btn--primary { background: var(--mb-dark); color: #fff; }
  .mb-btn--light { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.16); } .mb-goal--navy .mb-btn--light { background: #fff; color: var(--navy); }
  .mb-btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(16,24,32,.16); }
  .mb-link { display: inline-block; margin-top: 10px; font-weight: 700; font-size: .92rem; color: var(--accent-ink); text-decoration: none; } .mb-link--light, .mb--dark .mb-link, .mb--dark2 .mb-link { color: #9cc4ee; } .mb-goal .mb-link { margin-top: 12px; }
  /* Haken-Listen */
  .mb-checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; } .mb-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: .9rem; line-height: 1.4; color: rgba(255,255,255,.85); } .mb-checks li::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; background: rgba(156,196,238,.2); color: #9cc4ee; font-size: .62rem; font-weight: 800; display: grid; place-items: center; margin-top: 2px; } .mb-checks b { font-weight: 700; color: inherit; }
  .mb-checks--dark li { color: var(--ink-2); } .mb-checks--dark li::before { background: var(--accent-soft); color: var(--accent-ink); } .mb-checks--dark b { color: var(--ink); }
  .mb-checks--light li { color: rgba(255,255,255,.85); }
  /* HERO */
  .mb--hero { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 36px; background: radial-gradient(90% 50% at 100% 0%, rgba(156,196,238,.18), transparent 60%), var(--mb-dark); }
  .mb-pills { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; } .mb-pills::-webkit-scrollbar { display: none; } .mb-pills > * { flex: none; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); font: 700 .74rem var(--sans); text-decoration: none; cursor: pointer; } .mb-pills > .is-active { background: #fff; color: var(--mb-dark); border-color: #fff; }
  .mb-lead { font-size: .95rem !important; }
  .mb-trust { display: grid; grid-template-columns: 28px 1fr 28px 1fr; gap: 8px 8px; align-items: center; margin: 18px 0 22px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); } .mb-trust__ico { width: 28px; height: 28px; border-radius: 50%; background: rgba(156,196,238,.18); color: #9cc4ee; display: grid; place-items: center; font-size: .8rem; font-weight: 800; } .mb-trust b { display: block; font-size: .8rem; color: #fff; } .mb-trust small { display: block; font-size: .64rem; color: rgba(255,255,255,.55); line-height: 1.25; }
  .mb-hero-visual { background: #141a20 !important; border: 1px solid rgba(255,255,255,.08) !important; color: #fff !important; padding: 14px !important; min-height: 0 !important; border-radius: 18px !important; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8) !important; }
  .mb-hero-visual .orders__head b, .mb-hero-visual .order b, .mb-hero-visual .order em { color: #fff !important; } .mb-hero-visual .orders__head span, .mb-hero-visual .order span, .mb-hero-visual .order em small { color: rgba(255,255,255,.6) !important; } .mb-hero-visual .orders__head { border-color: rgba(255,255,255,.1) !important; } .mb-hero-visual .order { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; padding: 10px 12px !important; } .mb-hero-visual .order i { background: rgba(156,196,238,.16) !important; color: #9cc4ee !important; } .mb-hero-visual .live { border-color: rgba(255,255,255,.2) !important; color: rgba(255,255,255,.75) !important; background: transparent !important; }
  .mb-brands-label { text-align: center; font-size: .6rem !important; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4) !important; margin: 22px 0 8px !important; }
  .mb-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); margin: 0 calc(-1 * var(--mb-pad)); } .mb-marquee__track { display: flex; gap: 26px; align-items: center; width: max-content; animation: galleryMove 26s linear infinite; } .mb-marquee__track span { font-family: var(--serif); font-size: 1rem; color: rgba(255,255,255,.6); white-space: nowrap; } .mb-marquee__track img { height: 20px; width: auto; filter: brightness(0) invert(1); opacity: .6; }
  /* RAIL */
  .mb-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--mb-pad)); padding: 4px var(--mb-pad) 4px; } .mb-rail::-webkit-scrollbar { display: none; } .mb-rail > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
  .m-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .m-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(16,24,32,.15); transition: all .25s; } .m-dots i.is-on { width: 18px; border-radius: 3px; background: var(--mb-dark); } .mb--dark .m-dots i, .mb--dark2 .m-dots i { background: rgba(255,255,255,.2); } .mb--dark .m-dots i.is-on, .mb--dark2 .m-dots i.is-on { background: #fff; }
  /* Ergebnis-Karten (wie Bese Video-Karten: Bild + dunkler Textteil) */
  .mb-ecard { border-radius: 18px; overflow: hidden; background: var(--mb-dark2); color: #fff; box-shadow: 0 20px 40px -24px rgba(0,0,0,.5); } .mb-ecard img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; } .mb-ecard > div { padding: 14px 16px 16px; } .mb-ecard small { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 4px; } .mb-ecard b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.1; margin-bottom: 6px; } .mb-ecard span { display: block; font-size: .82rem; color: rgba(255,255,255,.7); line-height: 1.4; }
  /* Flow (90 Sek) */
  .mb-flow { margin-top: 18px; padding: 16px; border-radius: 18px; background: #141a20; border: 1px solid rgba(255,255,255,.08); } .mb-flow__head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; } .mb-flow__head b { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; color: #fff; line-height: 1; } .mb-flow__head span { font-size: .78rem; color: rgba(255,255,255,.6); }
  .mb-flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .mb-flow li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: start; } .mb-flow li em { font-style: normal; font-family: var(--serif); font-size: .9rem; color: #9cc4ee; padding-top: 2px; } .mb-flow li b { display: block; font-size: .92rem; color: #fff; } .mb-flow li span { display: block; font-size: .78rem; color: rgba(255,255,255,.6); margin-top: 2px; line-height: 1.35; }
  /* Fünf Ziele */
  .mb-goals { display: grid; gap: 28px; margin-top: 18px; }
  .mb-goal__vis { position: relative; border-radius: 18px; overflow: hidden; background: var(--mb-dark2); aspect-ratio: 16/11; box-shadow: 0 24px 50px -28px rgba(0,0,0,.5); } .mb-goal__vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mb-goal__tag { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(10,14,20,.75); color: #fff; font-size: .62rem; letter-spacing: .04em; backdrop-filter: blur(6px); }
  .mb-chart { position: absolute; inset: 0; padding: 16px; display: grid; grid-template-rows: auto auto 1fr; color: #fff; } .mb-chart small { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); } .mb-chart b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; } .mb-chart svg { width: 100%; height: 100%; margin-top: 8px; } .mb-chart .live { position: absolute; right: 14px; top: 14px; border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); background: transparent; }
  .mb-serp { position: absolute; inset: 14px; display: grid; gap: 8px; align-content: start; } .mb-serp__bar { padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-size: .76rem; } .mb-serp__ad { padding: 12px; border-radius: 12px; background: #fff; color: var(--ink); } .mb-serp__ad small { display: block; font-size: .6rem; color: var(--ink-3); } .mb-serp__ad b { display: block; font-size: .9rem; color: #1a0dab; margin: 2px 0; } .mb-serp__ad span { font-size: .72rem; color: var(--ink-2); } .mb-serp__ki { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(156,196,238,.14); color: #fff; font-size: .74rem; } .mb-serp__ki i { font-style: normal; color: #9cc4ee; }
  .mb-goal__vis--phone { display: grid; place-items: end center; background: linear-gradient(160deg, #1b2330, #0c1012); } .mb-phone { width: 46%; margin-top: 10%; border-radius: 22px 22px 0 0; background: #0a0a0a; padding: 6px 6px 0; box-shadow: 0 0 0 2px #2a2f38; overflow: hidden; } .mb-phone img { width: 100%; height: auto; border-radius: 16px 16px 0 0; display: block; max-height: 200px; object-fit: cover; object-position: top; }
  .mb-goal--navy { background: var(--navy); color: #fff; margin: 0 calc(-1 * var(--mb-pad)); padding: 20px var(--mb-pad) 24px; border-radius: 24px; } .mb-goal--navy .mb-kicker { color: #9cc4ee; }
  /* Kanäle */
  .mb-chan { display: grid; gap: 10px; margin: 16px 0; } .mb-chan > div { padding: 14px 16px; border-radius: 14px; background: #141a20; border: 1px solid rgba(255,255,255,.08); } .mb-chan b { display: block; font-size: .95rem; color: #fff; margin-bottom: 4px; } .mb-chan span { font-size: .84rem; color: rgba(255,255,255,.65); line-height: 1.4; }
  /* App */
  .mb-app { margin: 16px 0; padding: 14px; border-radius: 18px; background: #0b0e14; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); } .mb-app__bar { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 1rem; color: #fff; margin-bottom: 12px; } .mb-app .live { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); background: transparent; }
  .mb-app__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mb-app__kpis div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); } .mb-app__kpis b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: #fff; line-height: 1; } .mb-app__kpis span { display: block; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 4px; } .mb-app__kpis em { font-style: normal; font-size: .64rem; color: #8fe2b0; }
  .mb-app__bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 14px; } .mb-app__bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: rgba(156,196,238,.3); } .mb-app__bars i.hi { background: #9cc4ee; } .mb-app__foot { font-size: .6rem; color: rgba(255,255,255,.45); margin-top: 8px; text-align: center; letter-spacing: .06em; text-transform: uppercase; }
  .mb-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; } .mb-feat > div { padding: 12px; border-radius: 12px; background: #141a20; border: 1px solid rgba(255,255,255,.08); } .mb-feat i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(156,196,238,.16); color: #9cc4ee; font-style: normal; font-size: .9rem; margin-bottom: 8px; } .mb-feat i svg { width: 14px; height: 14px; } .mb-feat b { display: block; font-size: .84rem; color: #fff; } .mb-feat span { display: block; font-size: .7rem; color: rgba(255,255,255,.55); margin-top: 2px; line-height: 1.3; }
  .mb-quote { padding: 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(156,196,238,.14), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.1); margin: 14px 0 18px; } .mb-quote small { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #9cc4ee; } .mb-quote b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: #fff; margin: 4px 0 6px; } .mb-quote p { margin: 0; font-size: .86rem; }
  /* Check-Slot */
  #mCheckSlot .tool { padding: 14px !important; border-radius: 18px !important; background: var(--mb-dark) !important; color: #fff !important; border: 0 !important; } #mCheckSlot .tool .kicker, #mCheckSlot .tool h2, #mCheckSlot .tool h3, #mCheckSlot .tool .lead { display: none; } #mCheckSlot .field label { color: rgba(255,255,255,.6); } #mCheckSlot .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; } #mCheckSlot .grid-3 { grid-template-columns: 1fr !important; gap: 8px; } #mCheckSlot .btn--accent { background: #fff !important; color: var(--mb-dark) !important; } #mCheckSlot .small.muted { color: rgba(255,255,255,.5) !important; }
  #mCheckSlot .scan-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px; margin: 14px 0 0; } #mCheckSlot .scan { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: #fff !important; } #mCheckSlot .scan__head, #mCheckSlot .scan__state, #mCheckSlot .scan__msg { color: rgba(255,255,255,.7) !important; } #mCheckSlot .scan__score { color: #fff !important; }
  #mCheckSlot .total, #mCheckSlot .finding { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: #fff !important; } #mCheckSlot .total h3, #mCheckSlot .total p, #mCheckSlot .finding b, #mCheckSlot .finding span, #mCheckSlot #analyseResult h3 { color: #fff !important; } #mCheckSlot .findings { display: grid !important; grid-template-columns: 1fr; gap: 8px; }
  /* Partner */
  .mb-pcard { display: block; border-radius: 18px; overflow: hidden; background: #0f1216; border: 1px solid rgba(255,255,255,.08); text-decoration: none; color: #fff; } .mb-pcard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; display: block; } .mb-pcard > div { padding: 12px 14px 14px; } .mb-pcard small { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); } .mb-pcard b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 2px 0 4px; } .mb-pcard span { display: block; font-size: .78rem; color: rgba(255,255,255,.65); }
  .mb-logos { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .mb-logos img { height: 20px; width: auto; filter: brightness(0) invert(1); opacity: .6; } .mb-logos span { font-family: var(--serif); color: rgba(255,255,255,.6); font-size: .95rem; }
  /* Über uns */
  .mb-portrait { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; margin: 14px 0; box-shadow: 0 24px 50px -28px rgba(0,0,0,.4); } .mb-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .mb-portrait > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 16px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; } .mb-portrait small { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); } .mb-portrait b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
  .mb-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 14px; } .mb-team img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; border-radius: 12px; }
  /* Bewertungen */
  .mb-rating { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(16,24,32,.08); font-size: .84rem; margin-bottom: 14px; } .mb-rating .g { width: 22px; height: 22px; border-radius: 50%; background: #4285f4; color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .72rem; } .mb-rating b { font-size: 1rem; }
  .mb-review { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(16,24,32,.06); } .mb-review .stars { color: #f0a500; letter-spacing: 2px; font-size: .9rem; } .mb-review p { font-size: .9rem; margin: 8px 0 10px; color: var(--ink); } .mb-review b { display: block; font-size: .84rem; } .mb-review span { font-size: .7rem; color: var(--ink-3); }
  /* Fit */
  .mb-fit { padding: 16px; border-radius: 18px; background: var(--mb-dark); color: #fff; display: grid; gap: 10px; margin: 14px 0; } .mb-fit small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #9cc4ee; } .mb-fit > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); } .mb-fit i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: .95rem; } .mb-fit span { font-size: .86rem; color: rgba(255,255,255,.85); line-height: 1.35; }
  /* FAQ */
  .mb-ai { display: flex; gap: 8px; margin: 0 0 14px; } .mb-ai a { flex: 1; padding: 9px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(16,24,32,.1); font: 600 .78rem var(--sans); color: var(--ink); text-decoration: none; text-align: center; }
  .mb-faq details { background: #fff !important; border: 1px solid rgba(16,24,32,.08) !important; color: var(--ink) !important; border-radius: 14px !important; } .mb-faq summary { padding: 14px 44px 14px 16px !important; font-size: .9rem !important; font-weight: 600; color: var(--ink) !important; } .mb-faq p { font-size: .86rem !important; padding: 0 16px 14px !important; color: var(--ink-2) !important; }
  /* Ablauf */
  .mb-steps { display: grid; gap: 14px; margin-top: 18px; } .mb-steps > div { border-radius: 18px; overflow: hidden; background: #0f1216; border: 1px solid rgba(255,255,255,.08); } .mb-steps img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .mb-steps small { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #9cc4ee; padding: 14px 16px 0; } .mb-steps b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: #fff; padding: 4px 16px 0; } .mb-steps span { display: block; font-size: .84rem; color: rgba(255,255,255,.65); padding: 6px 16px 16px; line-height: 1.4; }
  /* Final */
  .mb--final { padding-bottom: 56px; } .mb-call { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; margin-top: 10px; } .mb-call i { width: 40px; height: 40px; border-radius: 50%; background: var(--ok, #1f8f4e); display: grid; place-items: center; flex: none; } .mb-call i svg { width: 16px; height: 16px; } .mb-call b { display: block; font-size: 1.02rem; } .mb-call small { display: block; font-size: .66rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .04em; }
  .mb-trust--final { margin-top: 22px; }
}

/* v15.1 – Mobile-Home Lesbarkeit */
@media (max-width: 760px) {
  .mb--hero h1, .mb--hero h1 .m-word { color: #fff; } .mb--hero h1 em { color: #9cc4ee; } .mb--hero h1 .m-word { font-style: normal; }
  .mb--hero .mb-lead { color: rgba(255,255,255,.75) !important; }
  .mb-checks li > span { display: block; min-width: 0; } .mb-checks li > span b { display: inline; }
  .mb--dark h2, .mb--dark2 h2, .mb--dark h3, .mb--dark2 h3, .mb-goal--navy h3 { color: #fff; }
  .mb--light h2, .mb--grey h2, .mb--light h3, .mb--grey h3 { color: var(--ink); }
}
@media (max-width: 760px) {
  .mb--light .mb-goal--navy h3, .mb--light .mb-goal--navy p { color: #fff; }
  #mCheckSlot .input { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; }
  #mCheckSlot .input::placeholder { color: rgba(255,255,255,.5) !important; }
  #mCheckSlot .input:focus { border-color: #9cc4ee !important; box-shadow: 0 0 0 4px rgba(156,196,238,.25) !important; }
  #mCheckSlot select.input option { color: #111; }
}
@media (max-width: 760px) {
  .ledger-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.ledger { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; font-size: .8rem; }
  .feed-note { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 760px) {
  .split > * { min-width: 0; max-width: 100%; }
  .orders { max-width: 100%; } .orders__sum { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .orders__sum b { font-size: 1rem; word-break: break-word; }
}

/* ===================== v16 – Mobile: Feed ohne Sprung, Karten, Animationen, Unterseiten ===================== */
@media (max-width: 760px) {
  /* Live-Feed: feste Zeilenhöhe, neue Einträge bewegen die Seite nicht */
  .orders { min-height: 0; gap: 8px; padding: 14px; contain: layout; }
  .order { height: 62px; padding: 0 12px; gap: 10px; grid-template-columns: 32px minmax(0, 1fr) auto; animation: orderInM .5s var(--ease); }
  .order i { width: 32px; height: 32px; border-radius: 9px; } .order i svg { width: 14px; height: 14px; }
  .order > div { min-width: 0; } .order b, .order span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .order b { font-size: .84rem; } .order span { font-size: .7rem !important; }
  .order em { font-size: .98rem; } .order em small { display: none; }
  .order .tag-ki { font-size: .56rem; padding: 2px 6px; }
  .orders__head { padding-bottom: 8px; } .orders__head b { font-size: 1.1rem; }
  .orders__sum { gap: 6px; } .orders__sum div { padding: 8px 4px; } .orders__sum b { font-size: .95rem; display: block; } .orders__sum span { font-size: .6rem !important; display: block; line-height: 1.25; }
  @keyframes orderInM { from { opacity: 0; transform: translateX(-8px) } to { opacity: 1; transform: none } }
  .mb-hero-visual .order { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; }

  /* Reveal-Animationen im Mobile-Block */
  .mb-rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .mb-rv.is-in { opacity: 1; transform: none; }
  .mb--hero .mb-rv { opacity: 1; transform: none; }

  /* Ergebnisse: Karten-Slider mit großer Zahl */
  .mb-rail--peek > * { flex: 0 0 82%; scroll-snap-align: start; }
  .mb-rail--peek > *:last-child { margin-right: var(--mb-pad); }
  .mb-ecard { display: grid; background: #fff; color: var(--ink); border: 1px solid rgba(16,24,32,.06); box-shadow: 0 18px 40px -26px rgba(16,24,32,.35); border-radius: 20px; overflow: hidden; }
  .mb-ecard__img { position: relative; aspect-ratio: 4/3; background: var(--mb-dark2); }
  .mb-ecard__img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; }
  .mb-ecard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,12,18,.78)); }
  .mb-ecard__num { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: #fff; display: grid; gap: 0; }
  .mb-ecard__num b { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; } .mb-ecard__num b i { font-style: normal; font-size: 1.4rem; color: #9cc4ee; margin-left: 2px; }
  .mb-ecard__num small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); font-weight: 600; }
  .mb-ecard__body { padding: 14px 16px 16px; display: grid; gap: 4px; } .mb-ecard__body small { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; }
  .mb-ecard__body b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.15; } .mb-ecard__body span { font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
  .mb-ecard > div:not(.mb-ecard__img):not(.mb-ecard__body) { padding: 0; }

  /* System: vier Bausteine, ein Telefon */
  .mb-sys { margin-top: 20px; display: grid; gap: 0; }
  .mb-sys__tile { background: #141a20; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px 14px 12px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 12px; align-items: center; margin-bottom: 8px; }
  .mb-sys__tile i { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .72rem; letter-spacing: .04em; background: rgba(156,196,238,.14); color: #9cc4ee; }
  .mb-sys__tile b { font-size: .98rem; color: #fff; } .mb-sys__tile span { font-size: .78rem; color: rgba(255,255,255,.62); line-height: 1.35; }
  .mb-sys__join { height: 34px; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin: 0 20%; }
  .mb-sys__join span { position: relative; } .mb-sys__join span::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: linear-gradient(180deg, rgba(156,196,238,.1), #9cc4ee); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease) calc(var(--i, 0) * 120ms); }
  .mb-rv.is-in .mb-sys__join span::before, .mb-sys.is-in .mb-sys__join span::before { transform: scaleY(1); }
  .mb-sys__phone { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--navy); border: 1px solid rgba(156,196,238,.3); box-shadow: 0 20px 50px -24px rgba(156,196,238,.45); }
  .mb-sys__phone i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ok, #1f8f4e); color: #fff; position: relative; } .mb-sys__phone i svg { width: 20px; height: 20px; }
  .mb-sys__phone i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(31,143,78,.6); animation: ringPulse 1.8s ease-out infinite; }
  @keyframes ringPulse { 0% { transform: scale(.8); opacity: 1 } 100% { transform: scale(1.4); opacity: 0 } }
  .mb-sys__phone b { display: block; color: #fff; font-size: .98rem; } .mb-sys__phone span:not(.live) { font-size: .76rem; color: rgba(255,255,255,.7); line-height: 1.35; }
  .mb-sys__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .mb-sys__stats div { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 10px; text-align: center; }
  .mb-sys__stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1; color: #fff; margin-bottom: 6px; } .mb-sys__stats small { font-size: .64rem; line-height: 1.3; color: rgba(255,255,255,.6); display: block; }

  /* Fünf Ziele: echte Karten mit Nummern-Chip */
  .mb-goals { gap: 18px; }
  .mb-goal { background: #fff; border: 1px solid rgba(16,24,32,.06); border-radius: 22px; overflow: hidden; box-shadow: 0 22px 48px -30px rgba(16,24,32,.35); }
  .mb-goal__vis { border-radius: 0; box-shadow: none; aspect-ratio: 16/10; }
  .mb-goal__body { padding: 16px 16px 18px; } .mb-goal__body h3 { margin: 8px 0 10px; font-size: 1.35rem; } .mb-goal__body .mb-checks { margin: 0 0 4px; } .mb-goal__body .mb-link { margin-top: 8px; }
  .mb-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); }
  .mb-chip i { font-style: normal; font-size: .62rem; padding: 3px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); letter-spacing: .04em; }
  .mb-goal--navy { margin: 0; padding: 0; border: 0; border-radius: 22px; background: var(--navy); }
  .mb-goal--navy .mb-chip { color: #9cc4ee; } .mb-goal--navy .mb-chip i { background: rgba(156,196,238,.16); color: #9cc4ee; }
  .mb-goal--navy .mb-btn--light { margin-top: 10px; }
  /* Chart-Karte */
  .mb-chart { position: absolute; inset: 0; padding: 14px 14px 12px; display: grid; grid-template-rows: auto 1fr; gap: 8px; color: #fff; background: linear-gradient(160deg, #1b2330, #0c1012); }
  .mb-chart__head small { display: block; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; }
  .mb-chart__head b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1; } .mb-chart__head b em { color: #9cc4ee; font-style: italic; }
  .mb-chart__plot { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 4px; min-height: 0; }
  .mb-chart__plot svg { width: 100%; height: 100%; overflow: visible; } .mb-chart__plot .grid line { stroke: rgba(255,255,255,.08); stroke-width: 1; }
  .mb-chart__plot .line { fill: none; stroke: #9cc4ee; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
  .mb-chart__plot .area { fill: url(#mbGrad), rgba(156,196,238,.12); opacity: 0; transition: opacity .8s var(--ease) 1s; }
  .mb-chart__plot .dot { fill: #fff; stroke: #9cc4ee; stroke-width: 3; opacity: 0; transition: opacity .3s var(--ease) 1.6s; }
  .is-in .mb-chart__plot .line { stroke-dashoffset: 0; } .is-in .mb-chart__plot .area { opacity: 1; } .is-in .mb-chart__plot .dot { opacity: 1; }
  .mb-chart__x { display: flex; justify-content: space-between; font-size: .56rem; color: rgba(255,255,255,.45); letter-spacing: .04em; }
  .mb-chart .live { position: absolute; right: 12px; top: 12px; }
  /* App-Balken wachsen beim Reinscrollen */
  .mb-app__bars i { transform: scaleY(.05); transform-origin: bottom; transition: transform .7s var(--ease) calc(var(--i, 0) * 60ms); }
  .is-in .mb-app__bars i { transform: scaleY(1); }
  /* Zähler */
  [data-mcount] { font-variant-numeric: tabular-nums; }

  /* Unterseiten: Textwände klappbar statt abgeschnitten */
  .lead, .sec-head .lead, .hero .lead, .page-hero .lead, .jside .lead { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .m-clamp:not(.is-open) { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .m-more { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 10px; padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: var(--accent-ink); cursor: pointer; }
  .m-more::after { content: "↓"; font-size: .7rem; transition: transform .3s; } .m-more.is-open::after { transform: rotate(180deg); }
  .sec--dark .m-more, .sec--dark-2 .m-more, .panel-dark .m-more { color: #9cc4ee; }
  /* Dunkle Ablauf-Schritte lesbar */
  .sec--dark .pstep p, .panel-dark .pstep p { color: rgba(255,255,255,.72); } .sec--dark .pstep small, .panel-dark .pstep small { color: #9cc4ee; }
  /* Websites-Hero: ein Foto statt zwei Rahmen */
  .bhero__vis .img-frame--portrait { display: none !important; }
  .bhero__vis .col { display: block !important; } .bhero__vis .col .img-frame--sq { aspect-ratio: 4/3 !important; border-radius: 0 0 24px 24px !important; position: relative; }
  .bhero__vis .col .img-frame--sq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(243,246,250,.9)); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-rv, .mb-chart__plot .line, .mb-chart__plot .area, .mb-chart__plot .dot, .mb-app__bars i, .mb-sys__join span::before { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .mb-sys__phone i::after { animation: none; }
}
@media (max-width: 760px) {
  .mb-ecard > .mb-ecard__img { padding: 0; } .mb-ecard > .mb-ecard__body { padding: 14px 16px 16px; }
  .mb-ecard__num b, .mb-ecard__num b span { display: inline; margin: 0; } .mb-ecard__num small { display: block; margin: 2px 0 0; }
}
@media (max-width: 760px) {
  .mb-ecard .mb-ecard__num b span { font-size: inherit; color: inherit; line-height: inherit; }
  .mb-serp { inset: 12px; gap: 6px; } .mb-serp__bar { padding: 7px 11px; font-size: .74rem; } .mb-serp__ad { padding: 10px 12px; } .mb-serp__ad small { font-size: .56rem; } .mb-serp__ad b { font-size: .86rem; } .mb-serp__ad span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .7rem; }
  .mb-serp__ki { padding: 8px 10px; font-size: .7rem; display: flex; gap: 6px; align-items: center; } .mb-serp__ki { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
}
@media (max-width: 760px) {
  .mb-serp > * { min-width: 0; }
  .bhero__vis { display: block !important; } .bhero__vis .col .img-frame--sq { width: 100%; }
  .card p, .pcard__body p, .case__body p { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .card .m-more { margin: 2px 0 6px; font-size: .76rem; }
}

/* ===================== v17 – Mobile: 3 Farben, mehr Luft, Elian-Karte, Kapitel-Labels ===================== */
@media (max-width: 760px) {
  /* C: nur noch Weiß · Hellgrau · Navy */
  .m-home { --mb-dark: var(--navy); --mb-dark2: var(--navy); --mb-grey: #f3f6fa; --mb-card-dark: rgba(255,255,255,.06); --mb-line-dark: rgba(255,255,255,.1); counter-reset: mbsec; }
  .mb--hero { background: radial-gradient(90% 50% at 100% 0%, rgba(156,196,238,.2), transparent 60%), var(--navy); }
  .mb-hero-visual, .mb-sys__tile, .mb-chan > div, .mb-app, .mb-quote, .mb-feat > div, .mb-pcard, .mb-steps > div, .mb-sys__stats div { background: var(--mb-card-dark) !important; border-color: var(--mb-line-dark) !important; }
  .mb-sys__phone { background: var(--navy-2); }
  .mb-chart, .mb-goal__vis--phone { background: linear-gradient(160deg, var(--navy-2), var(--navy)); }
  .mb-ecard__img, .mb-goal__vis { background: var(--navy); }
  #mCheckSlot .tool { background: var(--navy) !important; }
  .mb--light + .mb--light { padding-top: 0; }
  /* C: mehr Luft, kürzere Zeilen */
  .mb { padding: 64px var(--mb-pad); }
  .mb--hero { padding-bottom: 40px; }
  .mb h2 { font-size: 1.85rem; margin: 6px 0 10px; } .mb > p { font-size: .98rem; line-height: 1.5; max-width: 34ch; }
  .mb--dark > p, .mb--dark2 > p { color: rgba(255,255,255,.75); }
  .mb > .mb-kicker { display: none; }
  /* D: Kapitel-Label statt Kicker */
  .mb[data-title]::before { counter-increment: mbsec; content: counter(mbsec, decimal-leading-zero) "  —  " attr(data-title); display: block; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); margin-bottom: 10px; white-space: pre; }
  .mb--dark[data-title]::before, .mb--dark2[data-title]::before { color: #9cc4ee; }
  .mb--intro[data-title]::before { display: none; }
  .mb[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
  /* B: Elian-Karte direkt nach dem Hero */
  .mb--intro { padding: 0 var(--mb-pad) 56px; margin-top: -28px; position: relative; z-index: 2; }
  .mb--intro + .mb--light { padding-top: 0; }
  .mb-intro { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; background: #fff; border: 1px solid rgba(16,24,32,.06); border-radius: 22px; padding: 16px; box-shadow: 0 24px 50px -28px rgba(16,24,32,.4); }
  .mb-intro img { width: 96px; aspect-ratio: 4/5; object-fit: cover; object-position: top; border-radius: 16px; }
  .mb-intro p { margin: 0 0 10px; font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; color: var(--ink); }
  .mb-intro b { display: block; font-size: .9rem; } .mb-intro small { display: block; font-size: .72rem; color: var(--ink-3); margin-bottom: 4px; } .mb-intro .mb-link { margin-top: 4px; font-size: .86rem; }
  /* B: Zitat + Team mit Namen */
  .mb-say { margin: 16px 0 20px; padding: 0 0 0 16px; border-left: 3px solid var(--accent-ink); font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; color: var(--ink); }
  .mb-say footer { margin-top: 8px; font-family: var(--sans); font-size: .76rem; font-weight: 700; color: var(--ink-3); } .mb-say footer::before { content: "— "; }
  .mb-team--named { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
  .mb-team--named figure { margin: 0; } .mb-team--named figcaption { margin-top: 6px; text-align: center; } .mb-team--named figcaption b { display: block; font-size: .78rem; } .mb-team--named figcaption span { display: block; font-size: .62rem; color: var(--ink-3); }
  /* Hero etwas ruhiger */
  .mb--hero .mb-trust { margin-top: 18px; }
  .mb-brands-label { margin-top: 22px; }
}
/* Inhaltsleiste im Menü (nur Startseite mobil) */
.mnav__toc { display: none; }
@media (max-width: 760px) {
  body.has-mhome .mnav__toc { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .mnav__toc small { flex: 0 0 100%; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.5); margin-bottom: 2px; }
  .mnav__toc a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: .78rem; text-decoration: none; }
  .mnav__toc a i { font-style: normal; font-size: .62rem; color: #9cc4ee; font-weight: 700; }
}

/* ===================== v18 – Mobile: Story-Karte, Stapel-Karten, Bewertungen, Menü, Unterseiten-Optik ===================== */
@media (max-width: 760px) {
  /* mehr Luft in Karten */
  .mb-goal__body { padding: 20px 18px 22px; } .mb-ecard__body { padding: 18px 18px 20px; } .mb-sys__tile { padding: 16px; } .mb-chan > div, .mb-feat > div { padding: 18px; }
  .mb-checks li { line-height: 1.5; }

  /* Story-Karte (Ergebnisse) */
  .mb-story { position: relative; margin-top: 18px; }
  .mb-story__bars { display: flex; gap: 5px; margin-bottom: 10px; } .mb-story__bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(16,24,32,.1); position: relative; overflow: hidden; }
  .mb-story__bars i::after { content: ""; position: absolute; inset: 0; background: var(--accent-ink); transform: scaleX(0); transform-origin: left; }
  .mb-story__bars i.is-done::after { transform: scaleX(1); } .mb-story__bars i.is-on::after { animation: storyBar var(--story-dur, 4.5s) linear forwards; }
  @keyframes storyBar { from { transform: scaleX(0) } to { transform: scaleX(1) } }
  .mb-story__slides { display: grid; } .mb-story__slides > * { grid-area: 1 / 1; opacity: 0; transform: translateX(24px) scale(.98); transition: opacity .45s var(--ease), transform .5s var(--ease); pointer-events: none; }
  .mb-story__slides > .is-on { opacity: 1; transform: none; pointer-events: auto; }
  .mb-story__slides .mb-ecard { box-shadow: 0 26px 50px -30px rgba(16,24,32,.45); }
  .mb-story__nav { position: absolute; top: 20px; bottom: 0; width: 40%; background: none; border: 0; padding: 0; cursor: pointer; z-index: 2; } .mb-story__nav--prev { left: 0; } .mb-story__nav--next { right: 0; width: 60%; }
  .mb-story__hint { display: block; text-align: center; font-size: .7rem; color: var(--ink-3); margin-top: 10px; }
  .mb-story.is-paused .mb-story__bars i.is-on::after { animation-play-state: paused; }

  /* Stapel-Karten (Fünf Ziele) */
  .mb-stack { display: block; }
  .mb-stack .mb-goal { position: sticky; top: calc(var(--nav-h) + 10px + var(--k, 0) * 8px); margin-bottom: 18px; transform-origin: top center; transform: scale(calc(1 - var(--p, 0) * .05)); filter: brightness(calc(1 - var(--p, 0) * .25)); transition: transform .1s linear, filter .1s linear; will-change: transform; }
  .mb-stack .mb-goal:last-child { margin-bottom: 0; }
  .mb-stack .mb-goal__vis { aspect-ratio: 16/9; }
  .mb-stack .mb-goal h3 { font-size: 1.3rem; }

  /* Bewertungen */
  .mb-trustbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(16,24,32,.06); box-shadow: 0 16px 36px -26px rgba(16,24,32,.35); margin: 16px 0 14px; }
  .mb-trustbar__g { width: 44px; height: 44px; border-radius: 12px; background: #f3f6fa; display: grid; place-items: center; } .mb-trustbar__g svg { width: 24px; height: 24px; }
  .mb-trustbar b { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1; } .mb-trustbar .stars { color: #f5a623; font-size: .8rem; letter-spacing: .05em; }
  .mb-trustbar small { display: block; font-size: .7rem; color: var(--ink-3); margin-top: 3px; }
  .mb-trustbar a { font-size: .74rem; font-weight: 700; color: var(--accent-ink); text-decoration: none; padding: 7px 10px; border-radius: 999px; background: var(--accent-soft); white-space: nowrap; }
  .mb-rating { display: none; }
  .mb-rail--reviews > * { flex: 0 0 84%; }
  .mb-review { background: #fff; border-radius: 18px; padding: 16px 18px 18px; border: 1px solid rgba(16,24,32,.06); box-shadow: 0 14px 30px -24px rgba(16,24,32,.3); display: grid; gap: 8px; }
  .mb-review__head { display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 10px; align-items: center; }
  .mb-review__ava { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
  .mb-review__head b { display: block; font-size: .88rem; } .mb-review__head small { display: block; font-size: .66rem; color: var(--ink-3); }
  .mb-review__g svg { width: 18px; height: 18px; display: block; }
  .mb-review .stars { color: #f5a623; font-size: .82rem; letter-spacing: .06em; } .mb-review p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
  .mb-review > b, .mb-review > span { display: none; }

  /* Menü: rotierendes Wort + Kennzahlen + Kacheln */
  .mnav-rot { display: inline-grid; vertical-align: bottom; height: 1.2em; overflow: hidden; text-align: left; } .mnav-rot i { grid-area: 1 / 1; font-style: normal; color: #9cc4ee; animation: mnavRot 8s infinite; opacity: 0; transform: translateY(100%); }
  .mnav-rot i:nth-child(2) { animation-delay: 2s } .mnav-rot i:nth-child(3) { animation-delay: 4s } .mnav-rot i:nth-child(4) { animation-delay: 6s }
  @keyframes mnavRot { 0% { opacity: 0; transform: translateY(100%) } 5%, 22% { opacity: 1; transform: none } 27%, 100% { opacity: 0; transform: translateY(-100%) } }
  .mnav__hero p { font-size: .92rem; }
  .mnav__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; } .mnav__kpis span { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: .62rem; color: rgba(255,255,255,.6); } .mnav__kpis b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: #fff; line-height: 1; }
  .mnav__grid a i { background: linear-gradient(135deg, rgba(156,196,238,.28), rgba(156,196,238,.08)); color: #9cc4ee; border: 1px solid rgba(156,196,238,.2); }
  .mnav__grid a { position: relative; } .mnav__grid a::after { content: "→"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.35); font-size: .9rem; }

  /* Unterseiten: mehr Farbe und Form */
  .page-hero { background: linear-gradient(180deg, #e6eef9 0%, #f3f6fa 70%) !important; }
  .stats { background: var(--navy) !important; color: #fff; border-radius: 22px; padding: 6px !important; gap: 6px !important; border: 0 !important; box-shadow: 0 24px 50px -30px rgba(27,42,60,.6); }
  .stats > div { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; padding: 16px 12px !important; }
  .stats b, .stats .n, .stats strong { color: #fff !important; } .stats span, .stats small, .stats p { color: rgba(255,255,255,.65) !important; } .stats sup { color: #9cc4ee !important; }
  /* Kanal-Karten: Icon-Kachel oben rechts */
  .chan { position: relative; padding: 18px 18px 18px !important; border-radius: 20px !important; } .chan > i { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 12px; background: var(--navy); color: #9cc4ee; display: grid; place-items: center; margin: 0 !important; } .chan > i svg { width: 18px; height: 18px; }
  .chan > div { padding-right: 48px; } .chan h3 { font-size: 1.1rem !important; margin-bottom: 8px !important; } .chan ul li { font-size: .82rem; }
  /* Websites: Spezifikationen als 2-spaltige Kacheln */
  .specs { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .specs > div { grid-template-columns: 1fr !important; gap: 8px !important; padding: 14px 14px 16px !important; border-radius: 16px !important; }
  .specs > div > i { width: 30px; height: 30px; border-radius: 9px; background: var(--navy); color: #9cc4ee; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .78rem; }
  .specs > div b { display: block; font-size: .9rem; line-height: 1.25; margin-bottom: 4px; } .specs > div span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .74rem; line-height: 1.4; color: var(--ink-3); }
  /* Mitarbeiter: Vergleich nebeneinander */
  .cmp2 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; align-items: stretch; }
  .cmp2 > div { padding: 14px 12px 16px !important; border-radius: 16px !important; }
  .cmp2 h4 { font-size: .8rem; line-height: 1.25; margin-bottom: 10px !important; padding-bottom: 8px; border-bottom: 1px solid rgba(16,24,32,.08); }
  .cmp2 ul { font-size: .74rem !important; gap: 8px !important; line-height: 1.4; } .cmp2 li { padding-left: 16px; position: relative; } .cmp2 li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
  .cmp2 .bad li::before { content: "✕"; color: #b42318; } .cmp2 .good li::before { content: "✓"; color: var(--ok, #1f8f4e); }
  .cmp2 > div.good { background: var(--navy) !important; color: #fff; } .cmp2 .good h4 { color: #fff; border-color: rgba(255,255,255,.12); } .cmp2 .good ul { color: rgba(255,255,255,.8) !important; } .cmp2 .good li::before { color: #8fe2b0; }
  .cmp2 .bad h4 { color: var(--ink-2); }
  /* Karten allgemein: etwas weicher, mehr Luft */
  .card { padding: 20px 18px !important; border-radius: 20px !important; }
  .sec-head .kicker { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .62rem; }
  .sec--dark .sec-head .kicker, .sec--dark-2 .sec-head .kicker { background: rgba(156,196,238,.16); color: #9cc4ee; }
}
@media (prefers-reduced-motion: reduce) { .mnav-rot i { animation: none; opacity: 0; } .mnav-rot i:first-child { opacity: 1; transform: none; } .mb-stack .mb-goal { position: static; transform: none; filter: none; } }
@media (max-width: 760px) {
  .chan { display: block !important; } .chan > div { padding-right: 52px; }
  .mb-story__slides { overflow: hidden; margin: 0 calc(-1 * var(--mb-pad)); padding: 0 var(--mb-pad) 28px; } .mb-story__hint { margin-top: -14px; }
}

/* ===================== v19 – Mobile: Hero mit Foto + Einordnung, Abstände geweitet ===================== */
@media (max-width: 760px) {
  .mb--hero { padding-top: calc(var(--nav-h) + 22px); padding-bottom: 44px; }
  .mb--hero .mb-pills { margin-bottom: 26px; }
  .mb-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #9cc4ee; margin-bottom: 14px; line-height: 1.4; }
  .mb-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #1f8f4e); box-shadow: 0 0 0 4px rgba(31,143,78,.25); flex: 0 0 auto; }
  .mb--hero h1 { margin-bottom: 16px; }
  .mb--hero .mb-lead { margin-bottom: 22px; }
  .mb-hero-cta { display: grid; gap: 10px; margin-bottom: 26px; } .mb-hero-cta .mb-btn { margin: 0; }
  .mb-hero-photo { position: relative; margin: 0 0 22px; border-radius: 22px; overflow: hidden; aspect-ratio: 16/11; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
  .mb-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mb-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,42,60,0) 40%, rgba(27,42,60,.85) 100%); }
  .mb-hero-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; } .mb-hero-photo figcaption b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.1; } .mb-hero-photo figcaption span { display: block; font-size: .72rem; color: rgba(255,255,255,.8); margin-top: 3px; }
  .mb-hero-photo__badge { position: absolute; right: 12px; top: 12px; z-index: 1; display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.94); color: var(--ink); backdrop-filter: blur(6px); } .mb-hero-photo__badge b { font-size: .98rem; color: var(--ink); } .mb-hero-photo__badge small { font-size: .6rem; color: var(--ink-3); }
  .mb-chips { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .mb-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.9); font-size: .78rem; }
  .mb-chips li::before { content: "✓"; color: #8fe2b0; font-weight: 700; font-size: .72rem; }
  .mb--hero .mb-hero-visual { margin-top: 0; }
  /* Abstände überall weiter */
  .mb h2 { margin-bottom: 14px; } .mb > h2 + p { margin-bottom: 20px; }
  .mb > .mb-btn + .mb-link, .mb > .mb-sys__stats + .mb-link, .mb > .mb-story + .mb-link { margin-top: 18px; }
  .mb-goals, .mb-stack { margin-top: 24px; }
  .mb > p + .mb-rail, .mb > .mb-trustbar + .mb-rail { margin-top: 10px; }
  .mb-fine { margin-top: 16px; }
  .mb-story { margin-top: 22px; } .mb-sys { margin-top: 24px; }
  .mb--final .mb-btn + .mb-btn { margin-top: 10px; } .mb--final .mb-call { margin-top: 18px; }
  .mb-logos { margin-top: 20px; }
  .mb-chan, .mb-app, .mb-feat, .mb-fit, .mb-faq, .mb-steps, .mb-team--named, .mb-say { margin-top: 22px; }
  .mb--intro { margin-top: -22px; }
}
@media (max-width: 760px) {
  .mb > h2 + .mb-stack, .mb > h2 + .mb-goals { margin-top: 26px !important; }
  .mb > * + .mb-fine { margin-top: 18px !important; }
  .mb > p + .mb-rail, .mb > .mb-trustbar + .mb-rail { margin-top: 18px !important; }
  .mb > .mb-logos { margin-top: 22px; }
}

/* ===================== v21 – Mobile: Personalisierung, Micro-Check, Roter Faden, Kontext-Leiste, Rückkehrer ===================== */
@media (max-width: 760px) {
  /* B: Micro-Check */
  .mb-mc { margin: 0 0 22px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: grid; gap: 12px; }
  .mb-mc__head b { display: block; font-size: 1rem; color: #fff; } .mb-mc__head span { display: block; font-size: .76rem; color: rgba(255,255,255,.65); margin-top: 2px; }
  .mb-mc__field { display: grid; gap: 5px; } .mb-mc__field span, .mb-mc__lbl { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.6); }
  .mb-mc input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 16px; }
  .mb-mc input::placeholder { color: rgba(255,255,255,.45); } .mb-mc input:focus { outline: 0; border-color: #9cc4ee; box-shadow: 0 0 0 4px rgba(156,196,238,.25); }
  .mb-mc__seg { display: grid; gap: 6px; } .mb-mc__seg > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mb-mc__seg button { padding: 10px 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: .84rem; font-weight: 600; }
  .mb-mc__seg button.is-on { background: #fff; color: var(--navy); border-color: #fff; }
  .mb-mc .mb-btn { margin: 2px 0 0; }
  .mb-mc.is-shake { animation: mcShake .4s; } @keyframes mcShake { 0%, 100% { transform: none } 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }
  .mb-mc__result { margin: 0 0 22px; padding: 18px 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(156,196,238,.18), rgba(255,255,255,.05)); border: 1px solid rgba(156,196,238,.35); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .mb-mc__result.is-in { opacity: 1; transform: none; }
  .mb-mc__res-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .mb-mc__res-head .mb-chip { color: #9cc4ee; } .mb-mc__res-head .mb-chip i { background: rgba(156,196,238,.2); color: #9cc4ee; }
  .mb-mc__edit { background: none; border: 0; padding: 0; font: inherit; font-size: .76rem; color: rgba(255,255,255,.6); text-decoration: underline; }
  .mb-mc__result h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.15; color: #fff; margin: 0 0 12px; } .mb-mc__result h3 [data-ort], .mb-mc__result h3 [data-branch-word] { color: #9cc4ee; }
  .mb-mc__result .mb-checks { margin: 0 0 14px; } .mb-mc__result .mb-checks li { color: rgba(255,255,255,.85); } .mb-mc__result .mb-checks b { color: #fff; }
  .mb-mc__acts { display: grid; gap: 8px; } .mb-mc__acts .mb-btn { margin: 0; } .mb-mc__acts .mb-link { margin: 4px 0 0; }
  .mb--hero .mb-mc[hidden] ~ .mb-hero-cta { display: none; }
  /* C: Übergangs-Teaser */
  .mb-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px calc(-1 * var(--mb-pad)) -64px; padding: 16px var(--mb-pad) 18px; text-decoration: none; color: inherit; border-top: 1px solid rgba(16,24,32,.08); position: relative; z-index: 1; }
  .mb-next span { font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; color: var(--ink-2); } .mb-next i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; flex: 0 0 auto; animation: nextBob 2.4s ease-in-out infinite; }
  @keyframes nextBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(4px) } }
  .mb--dark .mb-next, .mb--dark2 .mb-next { border-color: rgba(255,255,255,.1); } .mb--dark .mb-next span, .mb--dark2 .mb-next span { color: rgba(255,255,255,.8); } .mb--dark .mb-next i, .mb--dark2 .mb-next i { background: #fff; color: var(--navy); }
  .mb { padding-bottom: 64px; } .mb:has(> .mb-next) { padding-bottom: 64px; }
  /* D: Kontext-Leiste */
  .mobile-bar .btn--accent { transition: opacity .16s, transform .16s; } .mobile-bar .btn--accent.is-swap { opacity: 0; transform: translateY(4px); }
  .mobile-bar.has-wa { grid-template-columns: 1fr 1fr 44px !important; } .mobile-bar .wa2 { width: 44px; height: 44px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; } .mobile-bar .wa2 svg { width: 22px; height: 22px; }
  /* F: Rückkehrer */
  .mb-resume { position: fixed; left: 12px; right: 12px; bottom: 86px; z-index: 950; display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 10px; align-items: center; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--navy); color: #fff; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .mb-resume.is-on { opacity: 1; transform: none; } .mb-resume span { font-size: .8rem; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mb-resume__go { padding: 9px 12px; border-radius: 999px; border: 0; background: #fff; color: var(--navy); font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; } .mb-resume__x { background: none; border: 0; color: rgba(255,255,255,.6); font-size: 1.3rem; line-height: 1; padding: 0; }
  body.mnav-open .mb-resume { display: none; }
}
@media (max-width: 760px) { .mb-btn__t { display: inline; white-space: normal; } .mb-btn__t [data-ort] { display: inline; } }

/* ===================== v22 – Mobile: heller, luftiger, Hero mit Bild, Stapel wie Desktop, Menü mittig ===================== */
@media (max-width: 760px) {
  .m-home { --mb-grey: #f4f7fb; --mb-tint: #e9f0fa; }
  /* HERO hell: Bild + Überschrift, sonst nichts Volles */
  .mb--hero { background: linear-gradient(180deg, #e9f0fa 0%, #f7f9fc 55%, #fff 100%) !important; color: var(--ink); padding-top: calc(var(--nav-h) + 20px); padding-bottom: 28px; }
  .mb--hero h1, .mb--hero .mb-h1, .mb--hero h1 .m-word, .mb--hero .mb-h1 .m-word { color: var(--ink) !important; } .mb--hero h1 em, .mb--hero .mb-h1 em { color: var(--accent-ink) !important; }
  .mb--hero .mb-lead { color: var(--ink-2) !important; margin-bottom: 20px; }
  .mb--hero .mb-pills > * { background: #fff; border-color: rgba(16,24,32,.1); color: var(--ink-2); } .mb--hero .mb-pills .is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
  .mb--hero .mb-eyebrow { color: var(--accent-ink); }
  .mb--hero .mb-hero-cta { margin-bottom: 22px; } .mb--hero .mb-btn--primary { background: var(--navy); color: #fff; border: 0; box-shadow: 0 14px 30px -16px rgba(27,42,60,.6); } .mb--hero .mb-btn--light { background: #fff; color: var(--navy); border: 1px solid rgba(16,24,32,.1); }
  .mb-hero-photo { margin-bottom: 20px; aspect-ratio: 4/3; }
  .mb--hero .mb-hero-visual { background: #fff !important; border: 1px solid rgba(16,24,32,.07) !important; color: var(--ink) !important; box-shadow: var(--shadow) !important; }
  .mb--hero .mb-hero-visual .orders__head b, .mb--hero .mb-hero-visual .order b, .mb--hero .mb-hero-visual .order em { color: var(--ink) !important; } .mb--hero .mb-hero-visual .orders__head span, .mb--hero .mb-hero-visual .order span { color: var(--ink-3) !important; } .mb--hero .mb-hero-visual .orders__head { border-color: var(--line) !important; }
  .mb--hero .mb-hero-visual .order { background: var(--mb-grey) !important; border-color: rgba(16,24,32,.06) !important; } .mb--hero .mb-hero-visual .order i { background: var(--accent-soft); color: var(--accent-ink); }
  .mb--hero .live { background: #e8f6ee; color: #1f8f4e; border-color: transparent; }
  .mb--intro { margin-top: 0; padding-top: 0; } .mb-intro { box-shadow: var(--shadow); }
  /* Micro-Check als eigene helle Sektion */
  .mb--micro .mb-mc { background: #fff; border: 1px solid rgba(16,24,32,.07); box-shadow: var(--shadow); margin: 0; }
  .mb--micro .mb-mc__head b { color: var(--ink); } .mb--micro .mb-mc__head span { color: var(--ink-3); } .mb--micro .mb-mc__field span, .mb--micro .mb-mc__lbl { color: var(--ink-3); }
  .mb--micro .mb-mc input { background: var(--mb-grey); border-color: rgba(16,24,32,.1); color: var(--ink); } .mb--micro .mb-mc input::placeholder { color: var(--ink-3); }
  .mb--micro .mb-mc__seg button { background: var(--mb-grey); border-color: rgba(16,24,32,.1); color: var(--ink); } .mb--micro .mb-mc__seg button.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
  .mb--micro .mb-mc__result { margin: 0; background: #fff; border: 1px solid rgba(43,90,151,.25); box-shadow: var(--shadow); }
  .mb--micro .mb-mc__result h3 { color: var(--ink); } .mb--micro .mb-mc__result h3 [data-ort], .mb--micro .mb-mc__result h3 [data-branch-word] { color: var(--accent-ink); }
  .mb--micro .mb-mc__result .mb-checks li { color: var(--ink-2); } .mb--micro .mb-mc__result .mb-checks b { color: var(--ink); } .mb--micro .mb-mc__edit { color: var(--ink-3); }
  .mb--micro .mb-mc__acts .mb-link { color: var(--accent-ink); } .mb--micro .mb-mc__res-head .mb-chip { color: var(--accent-ink); } .mb--micro .mb-mc__res-head .mb-chip i { background: var(--accent-soft); color: var(--accent-ink); }
  /* helle Varianten für ehemals dunkle Bausteine */
  .mb--light .mb-sys__tile, .mb--grey .mb-sys__tile { background: #fff !important; border-color: rgba(16,24,32,.07) !important; } .mb--light .mb-sys__tile b, .mb--grey .mb-sys__tile b { color: var(--ink); } .mb--light .mb-sys__tile span, .mb--grey .mb-sys__tile span { color: var(--ink-3); } .mb--light .mb-sys__tile i, .mb--grey .mb-sys__tile i { background: var(--accent-soft); color: var(--accent-ink); }
  .mb--grey .mb-sys__join span::before { background: linear-gradient(180deg, rgba(43,90,151,.1), var(--accent-ink)); }
  .mb--grey .mb-sys__phone { background: var(--navy); border-color: transparent; box-shadow: 0 20px 44px -22px rgba(27,42,60,.6); }
  .mb--grey .mb-sys__stats div { background: #fff !important; border-color: rgba(16,24,32,.07) !important; } .mb--grey .mb-sys__stats b { color: var(--ink); } .mb--grey .mb-sys__stats small { color: var(--ink-3); }
  .mb--light .mb-chan > div { background: var(--mb-grey) !important; border-color: rgba(16,24,32,.06) !important; } .mb--light .mb-chan b { color: var(--ink); } .mb--light .mb-chan span { color: var(--ink-2); }
  .mb--light .mb-btn--primary, .mb--grey .mb-btn--primary { background: var(--navy); color: #fff; border: 0; }
  .mb--grey .mb-pcard { background: #fff !important; color: var(--ink); border-color: rgba(16,24,32,.07) !important; } .mb--grey .mb-pcard b { color: var(--ink); } .mb--grey .mb-pcard small { color: var(--accent-ink); } .mb--grey .mb-pcard span { color: var(--ink-3); }
  .mb--grey .mb-logos { filter: none; opacity: 1; } .mb--grey .mb-logos img { filter: none; } .mb--grey .mb-logos span { color: var(--ink-2); }
  .mb--grey .mb-steps > div { background: #fff !important; border-color: rgba(16,24,32,.07) !important; } .mb--grey .mb-steps b { color: var(--ink); } .mb--grey .mb-steps small { color: var(--accent-ink); } .mb--grey .mb-steps span { color: var(--ink-2); }
  .mb-goal--navy { background: var(--mb-tint); color: var(--ink); } .mb--light .mb-goal--navy h3, .mb--light .mb-goal--navy p { color: var(--ink); } .mb-goal--navy em { color: var(--accent-ink) !important; } .mb-goal--navy .mb-chip, .mb-goal--navy .mb-kicker { color: var(--accent-ink); } .mb-goal--navy .mb-chip i { background: #fff; color: var(--accent-ink); }
  .mb-goal--navy .mb-checks--light li { color: var(--ink-2); } .mb-goal--navy .mb-checks--light b { color: var(--ink); } .mb-goal--navy .mb-checks--light li::before { background: var(--accent-ink); color: #fff; } .mb-goal--navy .mb-btn--light { background: var(--navy); color: #fff; border: 0; }
  .mb-fit { background: var(--mb-tint); color: var(--ink); } .mb-fit small { color: var(--accent-ink); } .mb-fit > div { background: #fff; border: 1px solid rgba(16,24,32,.06); } .mb-fit span { color: var(--ink-2); } .mb-fit i { background: var(--accent-soft); color: var(--accent-ink); }
  #mCheckSlot .tool { background: #fff !important; color: var(--ink) !important; border: 1px solid rgba(16,24,32,.07) !important; box-shadow: var(--shadow); }
  #mCheckSlot .field label { color: var(--ink-3) !important; } #mCheckSlot .input { background: var(--mb-grey) !important; border-color: rgba(16,24,32,.1) !important; color: var(--ink) !important; } #mCheckSlot .input::placeholder { color: var(--ink-3) !important; }
  #mCheckSlot .scan, #mCheckSlot .total, #mCheckSlot .finding { background: var(--mb-grey) !important; border-color: rgba(16,24,32,.06) !important; color: var(--ink) !important; } #mCheckSlot .scan__head, #mCheckSlot .scan__state, #mCheckSlot .scan__msg, #mCheckSlot .small.muted { color: var(--ink-3) !important; } #mCheckSlot .total h3, #mCheckSlot .total p, #mCheckSlot .finding b, #mCheckSlot .finding span, #mCheckSlot #analyseResult h3 { color: var(--ink) !important; }
  #mCheckSlot .btn--accent { background: var(--navy) !important; color: #fff !important; } #mCheckSlot .a-more-btn { color: var(--accent-ink) !important; }
  .mb--grey .mb-review, .mb--grey .mb-trustbar { border-color: rgba(16,24,32,.07); }
  /* Stapel-Karten wie Desktop: gleiche Oberkante, darunterliegende rücken zurück und bleiben sichtbar */
  .mb-stack { display: block; padding-bottom: 8px; }
  .mb-stack .mb-goal { position: sticky; top: calc(var(--nav-h) + 12px); margin-bottom: 26px; transform-origin: top center; transform: none; filter: none; transition: transform .45s var(--ease), opacity .45s var(--ease); }
  .mb-stack .mb-goal:nth-child(1) { z-index: 1 } .mb-stack .mb-goal:nth-child(2) { z-index: 2 } .mb-stack .mb-goal:nth-child(3) { z-index: 3 } .mb-stack .mb-goal:nth-child(4) { z-index: 4 } .mb-stack .mb-goal:nth-child(5) { z-index: 5 }
  .mb-stack .mb-goal.is-behind { transform: scale(.95) translateY(-12px); opacity: .92; } .mb-stack .mb-goal.is-behind.is-behind2 { transform: scale(.9) translateY(-24px); opacity: .8; }
  .mb-stack .mb-goal:last-child { margin-bottom: 0; }
  .mb-stack .mb-goal__vis { aspect-ratio: 16/9; }
  /* nichts abschneiden */
  .order { height: auto; min-height: 62px; padding: 9px 12px; } .order b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; } .order span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
  .orders { contain: none; }
  .mb-serp__ad span, .mb-serp__ki { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: block; } .mb-serp__ki { display: flex; gap: 6px; align-items: flex-start; } .mb-serp__ki i { flex: 0 0 auto; }
  .mb-goal__vis:has(.mb-serp) { aspect-ratio: auto; min-height: 200px; } .mb-serp { position: relative; inset: auto; padding: 14px; }
  .mb-resume span { white-space: normal; }
  /* Menü: rotierendes Wort und Pill mittig */
  .mnav__hero { text-align: center; } .mnav__hero .kicker { justify-content: center; width: 100%; display: inline-flex; flex-wrap: wrap; } .mnav__hero p { margin-inline: auto; }
  .mnav-rot { text-align: center; } .mnav-rot i { justify-self: center; text-align: center; }
  .mnav__kpis span { text-align: center; }
}
@media (max-width: 760px) {
  .mnav__hero .kicker { display: block; text-align: center; line-height: 1.5; }
  .mnav-rot { display: inline-grid; vertical-align: top; height: 1.5em; min-width: 9ch; overflow: hidden; } .mnav-rot i { grid-area: 1 / 1; text-align: center; white-space: nowrap; }
}
@media (max-width: 760px) { .mb--micro[data-title]::before { display: none; counter-increment: none; } }

/* ===================== v23 – Brauer-Gruppe / BEBRATEC ===================== */
.gruppe { display: grid; gap: 16px; } @media (min-width: 860px) { .gruppe { grid-template-columns: repeat(3, 1fr); } }
.gruppe__card { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid rgba(16,24,32,.06); border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.gruppe__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(16,24,32,.45); }
.gruppe__card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.gruppe__card--product img { object-fit: contain; background: linear-gradient(160deg, #e9f0fa, #f7f9fc); padding: 18px; }
.gruppe__card > div { padding: 18px 20px 22px; display: grid; gap: 6px; align-content: start; }
.gruppe__card small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); }
.gruppe__card b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.1; } .gruppe__card span { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
a.wordmark { text-decoration: none; color: inherit; }
@media (max-width: 760px) {
  .gruppe { gap: 12px; } .gruppe__card img { aspect-ratio: 16/9; } .gruppe__card > div { padding: 14px 16px 16px; }
  .mb-ecard__img--product img { object-fit: contain !important; padding: 16px 16px 40px; background: linear-gradient(160deg, #e9f0fa, #f7f9fc); }
  .mb-ecard__img--product::after { background: linear-gradient(180deg, transparent 55%, rgba(27,42,60,.78)) !important; }
}

/* ===================== v24 – Mobile-Menü: aufklappbare Kategorien ===================== */
.mnav__acc { display: grid; gap: 8px; margin-top: 14px; }
.mnav__cat { border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.mnav__cat summary { list-style: none; display: grid; grid-template-columns: 40px 1fr 28px; gap: 12px; align-items: center; padding: 14px 14px; cursor: pointer; }
.mnav__cat summary::-webkit-details-marker { display: none; }
.mnav__cat summary > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(156,196,238,.14); color: #9cc4ee; } .mnav__cat summary > i svg { width: 20px; height: 20px; }
.mnav__cat summary b { display: block; font-size: 1rem; color: #fff; } .mnav__cat summary small { display: block; font-size: .74rem; color: rgba(255,255,255,.55); margin-top: 2px; }
.mnav__cat summary em { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: grid; place-items: center; position: relative; transition: transform .3s var(--ease), background .3s; }
.mnav__cat summary em::before { content: ""; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); }
.mnav__cat[open] summary em { transform: rotate(180deg); background: rgba(255,255,255,.1); }
.mnav__cat[open] summary { border-bottom: 1px solid rgba(255,255,255,.08); }
.mnav__cat .mnav__grid { padding: 8px; gap: 4px; }
.mnav__cat .mnav__grid a { background: transparent; border-color: transparent; padding: 10px 10px; } .mnav__cat .mnav__grid a:active { background: rgba(255,255,255,.06); }
.mnav__cat .mnav__grid a i { width: 32px; height: 32px; border-radius: 9px; } .mnav__cat .mnav__grid a i svg { width: 15px; height: 15px; }
.mnav__cat .mnav__grid a b { font-size: .92rem; } .mnav__cat .mnav__grid a small { font-size: .72rem; }
.mnav__cat .mnav__grid { animation: mnavOpen .28s var(--ease); } @keyframes mnavOpen { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.mnav__links { margin-top: 16px; justify-content: center; }
@media (max-width: 760px) { .mnav__toc { display: none !important; } .mnav__grid a::after { content: none; } .mnav__cat .mnav__grid a i { background: rgba(156,196,238,.1); border: 0; } }

/* ===================== v25 – Mobile Stapel-Karten exakt wie Desktop .stack (sticky + 40vh Scrollweg + Einfahren) ===================== */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .mb-stack { display: block; padding-bottom: 0; }
  .mb-stack .mb-goal { position: sticky; top: calc(var(--nav-h) + 14px); margin-bottom: 40vh; transform-origin: top center; will-change: transform; transition: transform .5s var(--ease), opacity .5s var(--ease), filter .5s var(--ease); }
  .mb-stack .mb-goal:last-child { margin-bottom: 0; }
  .mb-stack::after { content: ""; display: block; height: 6vh; }
  .mb-stack .mb-goal.is-behind { transform: scale(.96) translateY(-14px); opacity: .9; }
  .mb-stack .mb-goal.is-behind.is-behind2 { transform: scale(.92) translateY(-28px); opacity: .6; filter: blur(1px); }
  .mb-stack .mb-goal.is-behind.is-behind3 { opacity: 0; }
  /* kommende Karte fährt von unten ein */
  .mb-stack .mb-goal.is-ahead { transform: translateY(40px) scale(.98); opacity: .85; }
  .mb-stack .mb-goal { max-height: calc(100vh - var(--nav-h) - 90px); overflow: hidden; }
  .mb-stack .mb-goal__vis { aspect-ratio: 16/9; }
  .mb-stack .mb-goal__body { padding-bottom: 18px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .mb-stack .mb-goal { position: static; transform: none; filter: none; opacity: 1; margin-bottom: 18px; } }
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .mb-stack .mb-goal { top: calc(var(--nav-h) + 8px); margin-bottom: 32vh; }
  .mb-stack .mb-goal.is-ahead { transform: translateY(56px) scale(.97); opacity: .7; }
  .mb-stack::after { height: 2vh; }
}

@media (max-width: 760px) { body { overflow-x: clip !important; overflow-y: visible !important; } }

/* ===================== v28 – Monatsreport-Demo statt App ===================== */
.report-demo { max-width: 980px; margin: 0 auto; background: #fff; border: 1px solid rgba(16,24,32,.06); border-radius: 24px; box-shadow: var(--shadow); padding: 24px; }
.report-demo__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.report-demo__head small { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .report-demo__head b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.report-demo__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.report-demo__kpis div { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-align: center; } .report-demo__kpis b { display: block; font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1; margin-bottom: 6px; } .report-demo__kpis span { font-size: .78rem; color: var(--ink-3); }
.report-demo .ledger td small { color: var(--ink-3); font-size: .74rem; }
@media (max-width: 760px) { .report-demo { padding: 16px; border-radius: 18px; } .report-demo__kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .report-demo__kpis b { font-size: 1.5rem; } }
@media (max-width: 760px) { .m-home .mb-h1 { font-family: var(--serif); font-weight: 400; font-size: 2.15rem; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 16px; color: var(--ink); } .m-home .mb-h1 em { font-style: italic; color: var(--accent-ink); } }