/* inventic – Stylesheet
   Werte aus dem Brand Guide 1.0 (Farben, Radien, Typo). Keine Verläufe, keine Schatten außer bei schwebenden Elementen. */

[hidden] { display: none !important; }
html { scroll-padding-top: 88px; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/geist-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F; }

:root {
  --blue: #2F4BFF; --blue-dark: #2335C9; --blue-light: #6F83FF; --blue-soft: #9BAAFF;
  --coral: #FF6B4A; --coral-dark: #A83A1C; --coral-mid: #D2472A; --coral-soft: #FFB8A3;
  --ink: #141414; --ink-2: #1F1F1F; --cream: #FAF7F2; --white: #FFFFFF;
  --text: #5E5A54; --hint: #9A948A; --line: #E6DFD4; --line-soft: #F0EAE0;
  --tint-blue: #E6EAFF; --tint-coral: #FFE4D9; --tint-green: #E3F2E6; --tint-yellow: #FFF1CC;
  --green: #2E7A45; --yellow: #8A6400; --error: #C4321F;
  --r-field: 12px; --r-card: 18px; --r-panel: 20px; --r-surface: 28px;
  --gutter: clamp(20px, 5vw, 64px); --max: 1280px;
  --section: clamp(88px, 12vw, 136px);
  --mono: 'Geist Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'Geist', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: var(--white); }
input, select, textarea, button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; color: var(--white); }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section); }
.section-last { padding-bottom: var(--section); }
.stack { display: grid; gap: clamp(32px, 5vw, 48px); }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.head { display: grid; gap: 16px; max-width: 720px; }
.grid-4 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid-3 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid-2 { display: grid; gap: clamp(24px, 5vw, 64px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* Typografie */
.display { font-size: clamp(44px, 8.4vw, 104px); line-height: 1; letter-spacing: -0.05em; max-width: 15ch; text-wrap: balance; }
.h1 { font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.05em; text-wrap: balance; max-width: 18ch; }
.h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; }
.h3 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -0.04em; }
.h4 { font-size: 22px; line-height: 1.2; letter-spacing: -0.03em; }
.eyebrow { font-size: 15px; font-weight: 500; color: var(--blue); }
.lead { font-size: clamp(18px, 1.7vw, 20px); line-height: 1.55; color: var(--text); max-width: 52ch; }
.muted { color: var(--text); }
.small { font-size: 14px; }
.em-a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }
.em-b { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }
.em-coral { color: var(--coral-mid); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }

/* Buttons & Chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 15px 24px; border-radius: 999px; border: 0; font-size: 16px; font-weight: 500; line-height: 1.1; cursor: pointer; transition: background .2s, color .2s; text-align: center; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--ink); color: var(--white); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--blue); color: var(--white); }
.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--ink); color: var(--white); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); min-height: 44px; padding: 11px 18px; font-size: 14px; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.link { font-size: 16px; text-decoration: underline; text-decoration-color: #C9C1B5; text-underline-offset: 5px; }
.link:hover { text-decoration-color: var(--blue); }
.arrow-link { font-weight: 500; color: var(--blue); display: inline-flex; gap: 6px; align-items: center; }
.arrow-link:hover { color: var(--ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; line-height: 1.2; }
.chip-blue { background: var(--tint-blue); color: var(--blue-dark); }
.chip-coral { background: var(--tint-coral); color: var(--coral-dark); }
.chip-green { background: var(--tint-green); color: var(--green); }
.chip-yellow { background: var(--tint-yellow); color: var(--yellow); }
.chip-white { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.chip-line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(250, 247, 242, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-header .bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo svg { width: 24px; height: 24px; flex: none; }
.logo span { font-weight: 500; font-size: 20px; letter-spacing: -0.045em; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav a:not(.btn) { color: var(--text); }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .btn { min-height: 44px; padding: 11px 20px; font-size: 15px; }
.nav-item { position: relative; }
.nav-item > button { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.nav-item > button:hover, .nav-item.open > button { color: var(--ink); }
.nav-item > button::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.nav-item.open > button::after { transform: rotate(-135deg) translateY(-1px); }
.mega { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); width: min(880px, 92vw); background: var(--white); border-radius: var(--r-panel); padding: 24px; box-shadow: 0 24px 60px rgba(20, 20, 20, 0.12), 0 0 0 1px var(--line); display: none; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nav-item.open .mega { display: grid; }
.mega h3 { font-size: 13px; font-weight: 500; color: var(--hint); margin-bottom: 8px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; font-size: 14px; color: var(--ink) !important; }
.mega a:hover { background: var(--cream); }
.mega .all { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); padding-top: 14px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); cursor: pointer; place-items: center; }
.menu-btn span { display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s; }
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.menu-btn span::before { top: -5px; } .menu-btn span::after { top: 5px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-5px) rotate(-45deg); }
.mobile-nav { display: none; padding: 8px var(--gutter) 24px; font-size: 18px; max-height: calc(100vh - 76px); overflow-y: auto; }
.mobile-nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 16px; width: 100%; border: 0; color: var(--white); }
.mobile-nav details { border-bottom: 1px solid var(--line); }
.mobile-nav summary { padding: 14px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.mobile-nav summary::after { content: '+'; color: var(--blue); }
.mobile-nav details[open] summary::after { content: '−'; }
.mobile-nav details a { font-size: 16px; padding: 10px 0 10px 14px; border: 0; color: var(--text); }
@media (max-width: 1023px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .menu-open .mobile-nav { display: block; }
}

/* Hero */
.hero { padding-top: clamp(48px, 8vw, 96px); display: grid; gap: clamp(24px, 4vw, 36px); }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Flächen & Karten */
.surface { border-radius: var(--r-surface); padding: clamp(24px, 4vw, 48px); }
.surface-blue { background: var(--tint-blue); }
.surface-coral { background: var(--tint-coral); }
.surface-ink { background: var(--ink); color: var(--cream); }
.surface-primary { background: var(--blue); color: var(--white); }
.card { background: var(--white); border-radius: var(--r-card); padding: 24px; display: grid; gap: 10px; align-content: start; }
.card-lg { border-radius: var(--r-panel); padding: 28px; gap: 14px; }
.card-title { font-size: 19px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; }
.card-text { font-size: 15px; line-height: 1.55; color: var(--text); }
.gain { justify-self: start; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--blue-dark); text-decoration: underline; text-underline-offset: 4px; }
.icon-box { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 600; }
a.card { transition: box-shadow .2s; color: var(--ink); }
a.card:hover { box-shadow: inset 0 0 0 2px var(--blue); color: var(--ink); }
a.card .more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--blue); }

/* Lead-Strom */
.stream { display: grid; gap: 18px; }
.stream-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--blue-dark); }
.pulse { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.pulse::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(47, 75, 255, 0.2); }
.stream canvas { display: block; width: 100%; height: clamp(220px, 26vw, 340px); }
@media (max-width: 600px) { .stream canvas { height: 420px; } }

/* B2B/B2C-Umschalter */
.toggle { display: inline-flex; background: var(--white); border-radius: 999px; padding: 5px; gap: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.toggle button { border: 0; border-radius: 999px; padding: 11px 20px; font-size: 15px; font-weight: 500; cursor: pointer; min-height: 44px; background: transparent; color: var(--text); transition: background .2s, color .2s; }
.toggle button[aria-selected="true"][data-mode="b2b"] { background: var(--blue); color: var(--white); }
.toggle button[aria-selected="true"][data-mode="b2c"] { background: var(--coral); color: var(--ink); }
.mode-panel { display: grid; gap: clamp(24px, 4vw, 40px); transition: background .3s; }
.mode-panel[hidden] { display: none; }
.mode-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 4vw, 48px); align-items: end; }
.mode-panel.b2c .gain { color: var(--coral-dark); }

/* Digitales Team */
.agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; align-content: start; }
.agent { background: var(--white); border-radius: var(--r-card); padding: 22px; display: grid; gap: 10px; align-content: start; transition: box-shadow .3s; }
.agent.active { box-shadow: inset 0 0 0 2px var(--c); }
.agent-top { display: flex; align-items: center; justify-content: space-between; }
.badge { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 15px; background: var(--t); color: var(--c); }
.agent .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s; }
.agent.active .dot { background: var(--c); }
.log { background: var(--white); border-radius: var(--r-panel); padding: clamp(20px, 3vw, 28px); display: grid; gap: 14px; align-content: start; min-height: 380px; }
.log-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text); }
.live { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2E9A55; box-shadow: 0 0 0 4px rgba(46, 154, 85, 0.18); }
.log-row { display: grid; grid-template-columns: 44px 130px 1fr; gap: 6px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line-soft); animation: rowIn .5s ease both; }
.log-row time { font-family: var(--mono); font-size: 12px; color: var(--hint); padding-top: 2px; }
.log-row .who { justify-self: start; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 3px 10px; background: var(--t); color: var(--c); }
.log-row span:last-child { font-size: 14px; line-height: 1.5; }
@media (max-width: 519px) { .log-row { grid-template-columns: 44px 1fr; } .log-row span:last-child { grid-column: 1 / -1; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }

/* Zusammenarbeit (dunkel) */
.steps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.step { background: var(--ink-2); border-radius: var(--r-card); padding: 24px; display: grid; gap: 12px; align-content: start; }
.step-top { display: flex; justify-content: space-between; align-items: center; }
.step-n { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: var(--white); display: grid; place-items: center; font-size: 14px; font-weight: 500; }
.step-d { font-size: 13px; color: var(--hint); }
.surface-ink .eyebrow { color: var(--blue-soft); }
.surface-ink .muted, .surface-ink .card-text { color: #BDB6AB; }
.surface-ink .em-a { color: var(--blue-soft); }

/* Über uns */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo { aspect-ratio: 4 / 5; border-radius: 20px; display: grid; place-items: center; overflow: hidden; }
.photo:nth-child(2) { margin-top: 40px; }
.photo svg { width: 38%; opacity: .9; }
.quote { font-weight: 500; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.04em; }

/* FAQ */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 5vw, 64px); }
.faq-list { grid-column: span 2; min-width: min(100%, 560px); display: grid; gap: 8px; }
@media (max-width: 900px) { .faq-list { grid-column: auto; } }
.faq details { background: var(--white); border-radius: 16px; }
.faq summary { padding: 22px 24px; display: flex; justify-content: space-between; gap: 20px; cursor: pointer; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq summary::after { content: '+'; color: var(--blue); flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 24px 24px; font-size: 16px; line-height: 1.6; color: var(--text); max-width: 68ch; }

/* Kontakt / Buchung */
.cta-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(32px, 5vw, 64px); }
.cta-panel .h2 { font-size: clamp(36px, 5vw, 62px); line-height: 1; letter-spacing: -0.05em; }
.checks { display: grid; gap: 10px; padding-top: 8px; list-style: none; margin: 0; padding-left: 0; }
.checks li { display: flex; gap: 10px; font-size: 15px; }
.checks li::before { content: '✓'; color: var(--coral-soft); }
.surface-primary .em-b { text-decoration-color: var(--coral-soft); }
.on-blue-muted { color: #DCE1FF; }

.booker { background: var(--white); color: var(--ink); border-radius: var(--r-panel); padding: clamp(20px, 3vw, 32px); display: grid; gap: 20px; align-content: start; min-height: 420px; }
.booker-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.booker-steps { display: flex; gap: 6px; font-size: 13px; color: var(--hint); }
.booker-steps span { display: inline-flex; align-items: center; gap: 6px; }
.booker-steps span.on { color: var(--ink); font-weight: 500; }
.booker-steps span + span::before { content: '→'; color: var(--line); margin-right: 6px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; }
.cal-head strong { font-weight: 500; font-size: 17px; letter-spacing: -0.02em; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.cal-nav button:hover:not([disabled]) { border-color: var(--ink); }
.cal-nav button[disabled] { opacity: .35; cursor: default; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.day { border: 0; border-radius: 14px; background: var(--cream); padding: 10px 4px; cursor: pointer; display: grid; gap: 2px; justify-items: center; min-height: 64px; transition: background .15s, color .15s; }
.day small { font-size: 12px; color: var(--text); }
.day b { font-family: var(--mono); font-weight: 400; font-size: 17px; }
.day:hover:not([disabled]) { background: var(--tint-blue); }
.day[aria-pressed="true"] { background: var(--blue); color: var(--white); }
.day[aria-pressed="true"] small { color: #DCE1FF; }
.day[disabled] { background: transparent; color: var(--hint); cursor: default; box-shadow: inset 0 0 0 1px var(--line-soft); }
.day[disabled] small { color: var(--hint); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.slot { border: 1px solid var(--line); background: var(--white); border-radius: 999px; min-height: 44px; font-family: var(--mono); font-size: 14px; cursor: pointer; transition: all .15s; }
.slot:hover { border-color: var(--blue); color: var(--blue); }
.slot[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.slot:disabled { background: transparent; border-style: dashed; color: var(--muted, #9A948A); text-decoration: line-through; cursor: not-allowed; }
.slot:disabled:hover { border-color: var(--line); color: var(--muted, #9A948A); }
.booker-note { font-size: 13px; color: var(--text); }
.booker-empty { font-size: 14px; color: var(--text); background: var(--cream); border-radius: var(--r-field); padding: 16px; }
.picked { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--tint-blue); color: var(--blue-dark); border-radius: var(--r-field); padding: 12px 16px; font-size: 15px; font-weight: 500; }
.picked button { background: none; border: 0; color: var(--blue-dark); text-decoration: underline; cursor: pointer; font-size: 14px; }
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 14px; color: var(--text); }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--r-field); padding: 13px 14px; font-size: 15px; background: var(--cream); outline: none; min-height: 48px; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }
.field.invalid input, .field.invalid select { border-color: var(--error); }
.field .err { font-size: 12px; color: var(--error); min-height: 14px; }
.hp { position: absolute; left: -9999px; }
.form-foot { font-size: 12px; line-height: 1.5; color: var(--text); }
.form-foot a { text-decoration: underline; }
.alert { border-radius: var(--r-field); padding: 12px 16px; font-size: 14px; background: var(--tint-coral); color: var(--coral-dark); }
.done { display: grid; gap: 16px; align-content: center; }
.done .ok { font-size: 15px; font-weight: 500; color: var(--green); }
.done .big { font-size: 28px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.15; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: var(--cream); border-radius: 14px; min-height: 64px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* Leistungsseite: Ablauf-Schaubild */
.crumbs { font-size: 14px; color: var(--hint); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--text); }
.crumbs a:hover { color: var(--blue); }
.flow-wrap { display: grid; gap: 22px; }
.flow { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; position: relative; }
.flow-node { position: relative; display: flex; flex-direction: column; padding: 0 10px; z-index: 1; }
.flow-node:first-child { padding-left: 0; }
.flow-node:last-child { padding-right: 0; }
.node-card { background: var(--white); border-radius: var(--r-card); padding: 18px; display: grid; gap: 8px; align-content: start; flex: 1; }
.node-n { font-family: var(--mono); font-size: 12px; color: var(--hint); }
.node-t { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.node-s { font-size: 14px; line-height: 1.5; color: var(--text); }
.node-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.node-tools > span { font-size: 12px; font-weight: 500; border-radius: 999px; padding: 3px 9px; background: var(--tint-blue); color: var(--blue-dark); }
.flow-node.result .node-card { background: var(--ink); color: var(--cream); }
.flow-node.result .node-s { color: #BDB6AB; }
.flow-node.result .node-n { color: var(--coral-soft); }
.flow-node.result .node-tools > span { background: #2A2A2A; color: var(--coral-soft); }
.flow-track { position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: repeating-linear-gradient(90deg, rgba(35, 53, 201, .25) 0 6px, transparent 6px 12px); z-index: 0; }
.flow-dots { position: absolute; left: 0; right: 0; top: 29px; height: 12px; z-index: 2; pointer-events: none; overflow: hidden; }
.flow-dots i { position: absolute; top: 3px; left: -8px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .7; animation: travel var(--d, 7s) linear infinite; animation-delay: var(--delay, 0s); }
.flow-dots i.k { background: var(--coral); opacity: 1; width: 8px; height: 8px; top: 2px; animation-name: travelKunde; }
@keyframes travel { 0% { left: -8px; opacity: 0; } 5% { opacity: .7; } 70% { opacity: .5; } 85% { left: 85%; opacity: 0; } 100% { left: 85%; opacity: 0; } }
@keyframes travelKunde { 0% { left: -8px; background: var(--blue); } 60% { background: var(--blue); } 72% { background: var(--coral); } 97% { left: calc(100% - 20px); opacity: 1; } 100% { left: calc(100% - 20px); opacity: 0; } }
.flow-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--blue-dark); }
.flow-legend span { display: inline-flex; align-items: center; gap: 8px; }
.flow-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.flow-legend i.k { background: var(--coral); }
/* Karten sitzen unter der Linie */
.flow-node .node-card { margin-top: 64px; }
.flow-node::before { content: ''; position: absolute; top: 26px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--blue); z-index: 1; }
.flow-node:first-child::before { left: 9px; }
.flow-node:last-child::before { left: auto; right: -9px; background: var(--coral); box-shadow: 0 0 0 6px rgba(255, 107, 74, .22); }
.flow-node::after { content: ''; position: absolute; top: 44px; left: 50%; width: 1px; height: 20px; background: rgba(35, 53, 201, .25); }
.flow-node:first-child::after { left: 18px; }
.flow-node:last-child::after { left: auto; right: 0; }
@media (max-width: 899px) {
  .flow { grid-template-columns: 1fr; gap: 12px; padding-left: 34px; }
  .flow-node, .flow-node:first-child, .flow-node:last-child { padding: 0; }
  .flow-node .node-card { margin-top: 0; }
  .flow-track { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(35, 53, 201, .25) 0 6px, transparent 6px 12px); }
  .flow-dots { left: 4px; right: auto; top: 0; bottom: 0; width: 12px; height: auto; }
  .flow-dots i { left: 3px !important; top: -8px; animation-name: travelV; }
  .flow-dots i.k { left: 2px !important; animation-name: travelKundeV; }
  .flow-node::before, .flow-node:first-child::before, .flow-node:last-child::before { top: 20px; left: -34px; right: auto; margin-left: 0; }
  .flow-node::after, .flow-node:first-child::after, .flow-node:last-child::after { top: 28px; left: -16px; right: auto; width: 16px; height: 1px; }
}
@keyframes travelV { 0% { top: -8px; opacity: 0; } 5% { opacity: .7; } 85% { top: 85%; opacity: 0; } 100% { top: 85%; opacity: 0; } }
@keyframes travelKundeV { 0% { top: -8px; background: var(--blue); } 60% { background: var(--blue); } 72% { background: var(--coral); } 97% { top: calc(100% - 40px); opacity: 1; } 100% { top: calc(100% - 40px); opacity: 0; } }

.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.compare .card { padding: 28px; gap: 14px; }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.compare li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--text); }
.compare .before li::before { content: '–'; color: var(--hint); }
.compare .after { background: var(--tint-blue); }
.compare .after li { color: var(--ink); }
.compare .after li::before { content: '✓'; color: var(--blue); font-weight: 600; }
.tool-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.tool { background: var(--white); border-radius: var(--r-card); padding: 20px; display: grid; gap: 8px; align-content: start; }
.tool-top { display: flex; align-items: center; gap: 10px; }
.tool-mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; background: var(--tint-blue); color: var(--blue-dark); flex: none; }
.tool:nth-child(4n+2) .tool-mark { background: var(--tint-coral); color: var(--coral-dark); }
.tool:nth-child(4n+3) .tool-mark { background: var(--tint-green); color: var(--green); }
.tool:nth-child(4n+4) .tool-mark { background: var(--tint-yellow); color: var(--yellow); }
.tool b { font-weight: 500; font-size: 17px; letter-spacing: -0.02em; }
.tool p { font-size: 14px; line-height: 1.5; color: var(--text); }
.honest { border-radius: var(--r-panel); background: var(--tint-yellow); padding: clamp(20px, 3vw, 28px); display: grid; gap: 8px; }
.honest b { font-weight: 500; color: var(--yellow); font-size: 15px; }
.honest p { font-size: 16px; line-height: 1.6; }
.sticky-side { position: sticky; top: 100px; align-self: start; }

/* Leistungsübersicht */
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.svc-card .chips { margin-top: 4px; }
.svc-card .chips .chip { padding: 4px 10px; font-size: 12px; }

/* Blog */
.post-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.post-card { background: var(--white); border-radius: var(--r-panel); overflow: hidden; display: grid; grid-template-rows: auto 1fr; color: var(--ink); transition: box-shadow .2s; }
.post-card:hover { box-shadow: inset 0 0 0 2px var(--blue); color: var(--ink); }
.post-cover { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.post-cover svg { width: 100%; height: 100%; }
.post-body { padding: 24px; display: grid; gap: 10px; align-content: start; }
.post-meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--hint); flex-wrap: wrap; }
.post-meta .mono { font-size: 12px; }
.post-title { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; }
.post-card.featured { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); grid-template-rows: none; }
.post-card.featured .post-cover { aspect-ratio: auto; min-height: 280px; }
.post-card.featured .post-title { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.04em; }
.post-card.featured .post-body { padding: clamp(24px, 4vw, 44px); align-content: center; }

.article-head { display: grid; gap: 24px; max-width: 900px; }
.article-cover { border-radius: var(--r-surface); overflow: hidden; aspect-ratio: 21 / 8; }
.article-cover svg { width: 100%; height: 100%; }
/* Handy: Illustrationen (16:10 gezeichnet) nicht beschneiden */
@media (max-width: 760px) {
  .article-cover { aspect-ratio: 16 / 10; }
  .post-card.featured .post-cover, .case-card.big .case-visual { aspect-ratio: 16 / 10; min-height: 0; }
}
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 1023px) { .article-layout { grid-template-columns: 1fr; } .toc { display: none; } }
.toc { position: sticky; top: 100px; display: grid; gap: 14px; font-size: 14px; }
.toc b { font-weight: 500; font-size: 13px; color: var(--hint); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text); line-height: 1.4; }
.toc a:hover, .toc a.on { color: var(--blue); border-left-color: var(--blue); }
.toc .card { margin-top: 12px; gap: 12px; }
.prose { font-size: 18px; line-height: 1.7; color: #33302C; max-width: 70ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.04em; color: var(--ink); margin-top: 2.2em; scroll-margin-top: 100px; }
.prose h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.025em; color: var(--ink); margin-top: 1.8em; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--blue); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose blockquote { margin-left: 0; margin-right: 0; border-left: 3px solid var(--coral); padding: 4px 0 4px 20px; font-size: 21px; line-height: 1.45; color: var(--ink); letter-spacing: -0.02em; }
.prose .box { background: var(--tint-blue); border-radius: var(--r-panel); padding: 22px 24px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.prose .box.coral { background: var(--tint-coral); }
.prose .box.yellow { background: var(--tint-yellow); }
.prose .box.green { background: var(--tint-green); }
.prose .box.green b { color: var(--green); }
.prose .box b { display: block; font-weight: 500; margin-bottom: 6px; color: var(--blue-dark); }
.prose .box.coral b { color: var(--coral-dark); }
.prose .box.yellow b { color: var(--yellow); }
.prose .box ul { margin: 8px 0 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; background: var(--white); border-radius: var(--r-card); overflow: hidden; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.prose th { font-weight: 500; color: var(--ink); background: #FDFBF8; white-space: nowrap; }
.prose code { font-family: var(--mono); font-size: .85em; background: var(--white); border-radius: 6px; padding: 2px 6px; }
.prose .lead-p { font-size: 21px; line-height: 1.55; color: var(--ink); letter-spacing: -0.01em; }

/* Rechtstexte */
.legal { max-width: 820px; display: grid; gap: 28px; }
.legal h2 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.2; margin-top: 12px; }
.legal p, .legal li { color: var(--text); line-height: 1.7; }
.legal a { color: var(--blue); text-decoration: underline; }
.legal dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; background: var(--white); border-radius: var(--r-panel); padding: 8px 24px; margin: 0; }
.legal dt, .legal dd { padding: 12px 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
.legal dt { color: var(--hint); font-size: 14px; }
.legal dt:last-of-type, .legal dd:last-of-type { border-bottom: 0; }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; } .legal dt { border: 0; padding-bottom: 0; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); margin-top: var(--section); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-top: 56px; padding-bottom: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
.footer-grid h2 { font-size: 13px; color: var(--hint); font-weight: 500; margin-bottom: 12px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.footer-grid ul a { color: var(--text); }
.footer-grid ul a:hover { color: var(--blue); }
.footer-claim { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; max-width: 18ch; margin-top: 18px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 20px; padding-bottom: 32px; font-size: 13px; color: var(--hint); }
.footer-bottom a { color: var(--hint); }
.footer-bottom nav { display: flex; gap: 20px; }

/* Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .flow-dots, .log-row { animation: none; }
  .flow-dots i { display: none; }
}

/* ── Referenzen / Case Studies ── */
.case-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.case-grid.three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.case-card { background: var(--white); border-radius: var(--r-panel); overflow: hidden; display: grid; grid-template-rows: auto 1fr; color: var(--ink); transition: box-shadow .2s; }
.case-card:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--blue); }
.case-visual { aspect-ratio: 16 / 10; overflow: hidden; }
.case-visual svg, .hero-visual svg, .svc-thumb svg { width: 100%; height: 100%; display: block; }
.case-body { padding: 24px; display: grid; gap: 10px; align-content: start; }
.case-stat { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--text); }
.case-stat b { font-weight: 400; font-size: 24px; color: var(--coral-mid); letter-spacing: -0.02em; white-space: nowrap; }
.case-card.big { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); grid-template-rows: none; }
.case-card.big .case-visual { aspect-ratio: auto; min-height: 300px; }
.case-card.big .case-body { padding: clamp(24px, 4vw, 44px); align-content: center; }
.case-card.big .post-title { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.04em; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.stat { background: var(--white); border-radius: var(--r-panel); padding: 28px; display: grid; gap: 8px; }
.stat b { font-family: var(--mono); font-weight: 400; font-size: clamp(36px, 4.4vw, 52px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.stat span { font-size: 15px; color: var(--text); line-height: 1.5; }
.stat.hot { background: var(--ink); }
.stat.hot b { color: var(--coral); }
.stat.hot span { color: #BDB6AB; }

/* ── Hero mit Visual ── */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 960px) { .hero-split { grid-template-columns: 1fr; } }
.hero-visual { border-radius: var(--r-surface); overflow: hidden; aspect-ratio: 16 / 10; }
.kw-title { font-size: 15px; font-weight: 500; color: var(--blue); letter-spacing: 0; line-height: 1.4; }
.hero-claim { font-size: clamp(34px, 4.6vw, 60px); max-width: 16ch; }

/* ── Leistungskarten mit Vorschaubild ── */
.svc-card.has-thumb { padding: 0 0 22px; overflow: hidden; gap: 0; display: flex; flex-direction: column; }
.svc-card.has-thumb > :not(.svc-thumb) { margin-left: 24px; margin-right: 24px; }
.svc-card.has-thumb .card-title { margin-top: 20px; }
.svc-card.has-thumb .card-text, .svc-card.has-thumb .chips, .svc-card.has-thumb .gain { margin-top: 10px; }
.svc-card.has-thumb .more { margin-bottom: 22px; margin-top: 12px; }
.svc-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.seo-block .prose p + p { margin-top: 1em; }

/* ── Tool-Icons ── */
.ti { display: inline-flex; width: 16px; height: 16px; flex: none; }
.ti svg { width: 100%; height: 100%; display: block; }
.chip .ti { width: 14px; height: 14px; margin-left: -2px; }
.node-tools > span { display: inline-flex; align-items: center; gap: 5px; }
.node-tools .ti { width: 12px; height: 12px; }
.flow-node.result .node-tools .ti svg path { fill: currentColor; }
.tool-logos { display: inline-flex; gap: 6px; flex: none; }
.tool-logos .ti { width: 32px; height: 32px; padding: 6px; border-radius: 10px; background: var(--cream); box-sizing: border-box; }
.tool-logos .ti svg rect { rx: 4; }
.logo-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.logo-tile { display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 14px; padding: 14px 16px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.logo-tile .ti { width: 22px; height: 22px; }

/* ── Einstieg nach Zielgruppe ── */
.entry-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.entry { background: var(--white); border-radius: var(--r-panel); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.entry-visual { aspect-ratio: 16 / 9; overflow: hidden; }
.entry-visual svg { width: 100%; height: 100%; display: block; }
.entry-body { padding: 24px; display: grid; gap: 12px; align-content: start; }
.entry-links { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; border-top: 1px solid var(--line-soft); }
.entry-links a { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.entry-links a::after { content: '→'; color: var(--blue); }

/* ── Team ── */
.photo { position: relative; margin: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo figcaption { position: absolute; left: 12px; bottom: 12px; background: var(--white); border-radius: 999px; padding: 7px 14px; font-size: 13px; display: flex; gap: 6px; }
.photo figcaption b { font-weight: 500; }
.photo figcaption span { color: var(--text); }
.avatars { display: inline-flex; flex: none; }
.avatars img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cream); }
.avatars img + img { margin-left: -10px; }
.talk-to { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.12); font-size: 15px; line-height: 1.45; }
.talk-to b { font-weight: 500; }
.talk-to .avatars img { box-shadow: 0 0 0 3px var(--blue); }
.byline { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); }
.byline b { font-weight: 500; color: var(--ink); }

/* ── Referenzen ohne Zahlen ── */
.case-built { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.case-built .chip { padding: 4px 10px; font-size: 12px; }
.built-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.built-list li { background: var(--white); border-radius: 16px; padding: 16px 20px 16px 52px; position: relative; font-size: 16px; line-height: 1.5; }
.built-list li::before { content: '✓'; position: absolute; left: 18px; top: 15px; width: 22px; height: 22px; border-radius: 50%; background: var(--tint-blue); color: var(--blue); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

/* ── Minimal-Überarbeitung ── */
.hero-min { gap: clamp(20px, 3vw, 28px); }
.hero-min .lead { max-width: 44ch; }
.stream { gap: 0; }
.entry-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
a.entry { display: grid; gap: 12px; align-content: start; background: var(--white); border-radius: var(--r-panel); padding: clamp(24px, 3vw, 32px); color: var(--ink); position: relative; transition: box-shadow .2s; grid-template-rows: none; overflow: visible; }
a.entry:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--blue); }
.entry-k { font-size: 13px; font-weight: 500; }
.entry-blue .entry-k { color: var(--blue); }
.entry-coral .entry-k { color: var(--coral-mid); }
.entry-green .entry-k { color: var(--green); }
.entry-t { font-size: clamp(22px, 2.2vw, 26px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.15; padding-right: 36px; }
.entry-ex { font-size: 13px; color: var(--hint); padding-top: 12px; border-top: 1px solid var(--line-soft); margin-top: 4px; }
.entry-go { position: absolute; top: clamp(24px, 3vw, 32px); right: clamp(24px, 3vw, 32px); width: 32px; height: 32px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; color: var(--blue); transition: background .2s, color .2s; }
a.entry:hover .entry-go { background: var(--blue); color: var(--white); }
.steps-min { display: grid; gap: clamp(20px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.step-min { display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--line); padding-top: 20px; }
.step-min .step-n { margin-bottom: 8px; }
.case-grid.four { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.case-card.compact .case-body { padding: 18px 20px 22px; gap: 6px; }
.case-t { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.mega-simple { width: min(420px, 92vw); grid-template-columns: 1fr; gap: 2px; padding: 10px; }
.mega-simple a { display: grid !important; gap: 2px; padding: 12px 14px !important; margin: 0 !important; }
.mega-simple a b { font-weight: 500; font-size: 15px; }
.mega-simple a span { font-size: 13px; color: var(--text); }
.mega-simple a.all { border-top: 1px solid var(--line-soft); border-radius: 0 0 10px 10px; margin-top: 6px !important; padding-top: 14px !important; color: var(--blue) !important; font-size: 14px; font-weight: 500; }
.nav-item.open .mega-simple { display: grid; }
.fit { background: var(--white); border-radius: var(--r-card); padding: 20px 24px; display: grid; gap: 10px; }
.fit b { font-weight: 500; font-size: 14px; color: var(--hint); }
.fit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fit li { padding-left: 24px; position: relative; font-size: 16px; }
.fit li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 600; }
.case-link { display: grid; gap: 4px; background: var(--tint-blue); border-radius: var(--r-card); padding: 20px 24px; color: var(--ink); }
.case-link:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--blue); }
.case-link b { font-weight: 500; font-size: 17px; letter-spacing: -0.02em; }
.link-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.link-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.link-list a::after { content: '→'; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--blue); }
.link-list a b { font-weight: 500; font-size: 17px; letter-spacing: -0.02em; }
.link-list a span { font-size: 14px; color: var(--text); }
.link-list a:hover b { color: var(--blue); }
.tool-row { display: flex; gap: 8px; margin-top: 6px; }
.svc-card.has-thumb .tool-row { margin-top: auto; padding-top: 16px; }
.tool-row .ti { width: 18px; height: 18px; }

/* ── Mobile-Korrekturen ── */
@media (min-width: 901px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer-grid > :first-child { grid-column: 1 / -1; } .footer-grid > :last-child { grid-column: 1 / -1; } }
.article-layout > *, .grid-2 > *, .hero-split > *, .cta-panel > * { min-width: 0; }
.prose { overflow-wrap: break-word; }
.prose table { max-width: 100%; }
.photos { max-width: 440px; width: 100%; }
@media (max-width: 960px) { .photos { max-width: 360px; } }
@media (max-width: 560px) {
  .surface { padding: 22px 18px; }
  .cta-panel.surface { padding: 26px 14px 14px; gap: 24px; }
  .cta-panel > div:first-child { padding: 0 6px; }
  .booker { padding: 18px 14px; gap: 16px; }
  .days { gap: 4px; }
  .day { min-height: 56px; border-radius: 12px; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot { min-height: 42px; font-size: 13px; }
  .talk-to { padding: 12px; font-size: 14px; }
  .flow-wrap.surface { padding: 20px 16px; }
  .compare .card { padding: 22px; }
  .entry-t { font-size: 22px; }
  .crumbs { font-size: 13px; }
  .hero-visual { border-radius: 20px; }
  .display { font-size: clamp(42px, 12vw, 56px); }
  .footer-claim { font-size: 19px; }
}

/* ── Bewegung (Startseite) ── */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); }
.site-header { transition: box-shadow .3s, background-color .3s; }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line); }

/* Wort-Masken */
.js [data-split]:not(.is-split) { visibility: hidden; animation: failsafe 0s 2.5s forwards; }
@keyframes failsafe { to { visibility: visible; } }
.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin: 0 -.02em -.1em; }
.is-split .w > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1.05s var(--ease) var(--d, 0ms); }
.is-split.in .w > span { transform: none; }
.is-split .em-a, .is-split .em-b { text-decoration: none; }
.is-split .w.u > span { background-image: linear-gradient(var(--ul), var(--ul)); background-repeat: no-repeat; background-position: 0 94%; background-size: 0% .075em; transition: transform 1.05s var(--ease) var(--d, 0ms), background-size .8s var(--ease-io) calc(var(--d, 0ms) + 650ms); }
.is-split .w.ua { --ul: var(--blue); }
.is-split .w.ub { --ul: var(--coral); }
.is-split.in .w.u > span { background-size: 100% .075em; }

/* Hero-Intro */
.js [data-intro] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(450ms + var(--i, 0) * 120ms); animation: failsafe-o 0s 2.5s forwards; }
.js .loaded [data-intro], .loaded [data-intro] { opacity: 1; transform: none; animation: none; }
.js .stream[data-intro] { transform: translate3d(0, 28px, 0) scale(.985); transform-origin: 50% 0; }
@keyframes failsafe-o { to { opacity: 1; transform: none; } }

/* Gestaffelt einblenden */
.js [data-stagger] > * { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-stagger].in > * { opacity: 1; transform: none; }

/* Linien der drei Schritte zeichnen sich */
.step-min { border-top: 0; position: relative; }
.step-min::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.js .steps-min .step-min::before { transform: scaleX(0); transition: transform 1.2s var(--ease-io) calc(var(--i, 0) * 150ms + 150ms); }
.js .steps-min.in .step-min::before { transform: scaleX(1); }
.step-min .step-n { transition: transform .5s var(--ease); }
.step-min:hover .step-n { transform: scale(1.12); }

/* Karten: ruhige Hover-Zustände */
a.entry { transition: box-shadow .3s, transform .5s var(--ease), opacity .8s var(--ease); }
a.entry:hover { transform: translate3d(0, -4px, 0); }
.entry-go { transition: background .25s, color .25s, transform .4s var(--ease); }
a.entry:hover .entry-go { transform: translateX(3px); }
.case-visual svg, .post-cover svg, .svc-thumb svg { transition: transform 1.1s var(--ease); }
.case-card:hover .case-visual svg, .post-card:hover .post-cover svg, .svc-card:hover .svc-thumb svg { transform: scale(1.045); }
.btn-arrow span { display: inline-block; transition: transform .35s var(--ease); }
.btn-arrow:hover span { transform: translateX(4px); }
[data-magnetic] { transition: background .2s, color .2s, transform .45s var(--ease); }
.photo { transition: transform .1s linear; will-change: transform; }
.photo img { transition: transform 1.2s var(--ease); }
.photo:hover img { transform: scale(1.03); }
.quote .sw { transition: opacity .25s linear; }
.faq details { transition: box-shadow .3s; }
.faq details:hover { box-shadow: inset 0 0 0 1px var(--line); }

@media (prefers-reduced-motion: reduce) {
  [data-split], [data-intro], [data-stagger] > *, .is-split .w > span { visibility: visible !important; opacity: 1 !important; transform: none !important; animation: none !important; }
  .is-split .w.u > span { background-size: 100% .075em !important; }
}
.loaded .stream[data-intro] { transform: none; }
[data-stagger].settled > * { transition-delay: 0ms !important; }
.js [data-stagger].in > a.entry:hover, .js [data-stagger].in > .case-card:hover { transform: translate3d(0, -4px, 0); }
.case-card { transition: box-shadow .3s, transform .5s var(--ease), opacity .8s var(--ease); }