/* ==========================================================================
   Misiewicz Marketing – main.css
   Aufbau: 1 Fonts · 2 Tokens · 3 Basis · 4 Layout · 5 Komponenten
           6 Header/Navigation · 7 Footer · 8 Startseite · 9 Responsive
   ========================================================================== */

/* 1 · Fonts (lokal gehostet, DSGVO-konform) ------------------------------- */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* 2 · Design-Tokens -------------------------------------------------------- */
:root {
  --navy-950: #050f22;
  --navy-900: #0a1a33;
  --navy-800: #0f2446;
  --navy-700: #16335f;
  --blue: #168fd1;
  --blue-300: #5cc0f2;
  --yellow: #f3d21c;
  --orange: #f39421;
  --gradient: linear-gradient(105deg, var(--yellow) 0%, var(--orange) 100%);

  --ink: #0c1830;
  --muted: #5a6780;
  --line: #e2e7f0;
  --surface: #f4f6fa;
  --white: #fff;
  --on-dark: #eef2f9;
  --on-dark-muted: #a9b6cc;
  --line-dark: rgb(255 255 255 / 10%);

  --font-head: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgb(12 24 48 / 6%), 0 8px 24px rgb(12 24 48 / 8%);
  --shadow-lg: 0 24px 60px rgb(5 15 34 / 35%);
  --header-h: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 3 · Basis ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--on-dark);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
h2 { font-size: clamp(28px, 3.2vw, 42px); }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
::selection { color: var(--navy-950); background: var(--yellow); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }

.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--flip { transform: scaleX(-1); }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 700; color: var(--navy-950); background: var(--yellow); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 4 · Layout ---------------------------------------------------------------- */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(72px, 9vw, 120px); }
.section--light { color: var(--ink); background: var(--surface); }
.section__head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.section__head > p:not(.eyebrow) { margin-top: 18px; font-size: 18px; color: var(--on-dark-muted); }
.section--light .section__head > p:not(.eyebrow), .section--light .section__head--split > p { color: var(--muted); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--split { max-width: none; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 64px; align-items: end; }
.section__head--split > p { margin: 0; font-size: 18px; color: var(--on-dark-muted); }
.section__more { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.section--light .eyebrow { color: var(--blue); }
.text-gradient { background: linear-gradient(100deg, var(--blue-300), var(--blue) 45%, var(--yellow) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 5 · Komponenten ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 24px;
  border: 1.5px solid transparent; border-radius: 10px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn .icon { transition: transform .2s var(--ease); }
.btn:hover .icon:last-child { transform: translateX(3px); }
.btn--primary { color: var(--navy-950); background: var(--gradient); box-shadow: 0 6px 20px rgb(243 148 33 / 28%); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(243 148 33 / 38%); }
.btn--ghost { color: inherit; border-color: currentColor; background: transparent; }
.btn--ghost:hover { color: var(--yellow); }
.section--light .btn--ghost:hover { color: var(--blue); }
.btn--dark { color: #fff; background: var(--navy-900); }
.btn--dark:hover { background: var(--navy-700); transform: translateY(-2px); }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: 15px; }
.btn--lg { min-height: 58px; padding: 14px 28px; font-size: 17px; }
.btn--block { width: 100%; }

.stars { display: inline-flex; gap: 2px; margin: 0; color: #fbbc05; }
.stars .icon { width: 16px; height: 16px; }

.checklist { display: grid; gap: 10px; margin: 20px 0 0; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .icon { width: 20px; height: 20px; margin-top: 2px; padding: 3px; border-radius: 50%; color: var(--navy-950); background: var(--yellow); stroke-width: 3; }
.checklist--lg { gap: 12px; margin-block: 24px; font-size: 17px; font-weight: 500; }

.icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--line-dark); border-radius: 50%; background: rgb(255 255 255 / 4%); cursor: pointer; transition: background-color .2s, border-color .2s; }
.icon-btn:hover { border-color: var(--yellow); background: rgb(243 210 28 / 10%); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line-dark); border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; background: rgb(255 255 255 / 4%); transition: border-color .2s, background-color .2s, color .2s; }
.chip .icon { width: 15px; height: 15px; color: var(--blue-300); }
.chip:hover { color: var(--navy-950); border-color: var(--yellow); background: var(--yellow); }
.chip:hover .icon { color: inherit; }

/* Formular */
.form { position: relative; padding: clamp(24px, 4vw, 40px); border-radius: 20px; color: var(--ink); background: var(--white); box-shadow: var(--shadow-lg); }
.form__title { margin-bottom: 20px; font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.form__row { display: grid; grid-template-columns: 1fr; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field label small { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgb(22 143 209 / 14%); }
.field [aria-invalid="true"] { border-color: #d93a3a; background: #fff6f6; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 22px; font-size: 14px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.checkbox input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.checkbox a { color: var(--blue); }
.form__hint { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.form__alert { margin: 0 0 18px; padding: 14px 16px; border-radius: 10px; font-size: 15px; font-weight: 500; }
.form__alert--ok { color: #0d5b33; background: #e3f7ec; }
.form__alert--error { color: #8a1c1c; background: #fdeaea; }
.form.is-sending button[type="submit"] { opacity: .7; pointer-events: none; }

/* Akkordeon */
.accordion { display: grid; gap: 12px; }
.accordion__item { border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgb(255 255 255 / 3%); transition: background-color .2s, border-color .2s; }
.accordion__item[open] { border-color: rgb(243 210 28 / 40%); background: rgb(255 255 255 / 6%); }
.accordion__item summary { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 22px; font-family: var(--font-head); font-size: 17px; font-weight: 700; list-style: none; cursor: pointer; }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: var(--navy-950); background: var(--yellow); transition: transform .25s var(--ease); }
.accordion__item[open] .accordion__icon { transform: rotate(45deg); }
.accordion__body { padding: 0 22px 22px; color: var(--on-dark-muted); }
.accordion__body a { color: var(--blue-300); }

/* Lightbox */
.lightbox { max-width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius); background: transparent; }
.lightbox::backdrop { background: rgb(5 15 34 / 88%); backdrop-filter: blur(4px); }
.lightbox img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__close { position: fixed; top: 16px; right: 16px; color: #fff; background: rgb(5 15 34 / 60%); }

/* Einblend-Animation (nur mit JS aktiv) */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* 6 · Header & Navigation ---------------------------------------------------- */
.topbar { font-size: 14px; color: var(--on-dark-muted); background: var(--navy-950); }
.topbar__inner { display: flex; align-items: center; justify-content: center; gap: 12px 32px; min-height: 44px; flex-wrap: wrap; }
.topbar a, .topbar__location { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.topbar a:hover { color: #fff; }
.topbar .icon { color: var(--yellow); }
.topbar__rating { margin-left: auto; }
.topbar__rating .stars .icon { width: 13px; height: 13px; color: #fbbc05; }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line-dark); transition: box-shadow .3s; }
/* Blur auf Pseudo-Element: backdrop-filter direkt am Header würde das fixierte Mobilmenü einsperren. */
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(15 36 70 / 92%); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgb(5 15 34 / 35%); }
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand img { width: 172px; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 8px; font-size: 16px; font-weight: 500; text-decoration: none; background: none; cursor: pointer; transition: color .2s, background-color .2s; }
.nav__link:hover, .nav__link[aria-expanded="true"] { color: #fff; background: rgb(255 255 255 / 7%); }
.nav__link[aria-current="page"] { color: var(--yellow); }
.nav__chevron { width: 16px; height: 16px; transition: transform .2s; }
.nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
.nav__mobile-contact { display: none; }
.menu-toggle { display: none; }

.mega { position: absolute; left: 0; right: 0; top: 100%; padding-block: 32px 36px; color: var(--ink); background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px rgb(5 15 34 / 30%); }
.mega[hidden] { display: none; }
.mega__inner { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; }
.mega__title { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mega__title a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--blue); }
.mega__services { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__services a { display: flex; gap: 14px; padding: 12px; border-radius: 10px; text-decoration: none; transition: background-color .2s; }
.mega__services a:hover, .mega__services a[aria-current="page"] { background: var(--surface); }
.mega__services strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.mega__services small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.mega__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; color: var(--blue); background: rgb(22 143 209 / 10%); }
.mega__links { display: grid; gap: 2px; }
.mega__links--cols { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.mega__links a { display: block; padding: 6px 8px; margin-inline: -8px; border-radius: 6px; font-size: 15px; text-decoration: none; transition: color .2s, background-color .2s; }
.mega__links a:hover { color: var(--blue); background: var(--surface); }

/* 7 · Footer ------------------------------------------------------------------ */
.site-footer { padding-top: clamp(56px, 7vw, 88px); font-size: 15px; color: var(--on-dark-muted); background: var(--navy-950); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; }
.site-footer__brand .brand img { width: 170px; margin-bottom: 18px; }
.site-footer__contact { display: grid; gap: 8px; margin-top: 20px; }
.site-footer__contact strong { color: #fff; }
.site-footer__contact a, .site-footer__contact span { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; }
.site-footer__contact .icon { color: var(--yellow); }
.site-footer__title { margin: 0 0 14px; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff; }
.site-footer__title a { text-decoration: none; }
.site-footer__col ul { display: grid; gap: 7px; }
.site-footer__col ul + .site-footer__title { margin-top: 28px; }
.site-footer__cols { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.site-footer a { text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--yellow); }
.site-footer__seal { width: 90px; margin-top: 28px; }
.social { display: flex; gap: 10px; margin-top: 22px; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-dark); border-radius: 50%; }
.social a:hover { border-color: var(--yellow); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 56px; padding-block: 24px; border-top: 1px solid var(--line-dark); font-size: 14px; }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom ul { display: flex; gap: 24px; }

.action-bar { display: none; }

/* 8 · Startseite -------------------------------------------------------------- */

/* Hero */
.hero { position: relative; padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 110px); overflow: hidden; background:
  radial-gradient(900px 500px at 85% 20%, rgb(22 143 209 / 22%), transparent 60%),
  radial-gradient(700px 400px at 5% 90%, rgb(243 210 28 / 8%), transparent 60%),
  var(--navy-900); }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.hero h1 { font-size: clamp(36px, 4.6vw, 62px); letter-spacing: -.035em; line-height: 1.08; }
.hero__lead { max-width: 640px; margin: 24px 0 0; font-size: clamp(17px, 1.4vw, 19px); color: var(--on-dark-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; font-size: 15px; color: var(--on-dark-muted); }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust strong { color: #fff; }
.hero__trust > li > .icon { color: var(--yellow); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3ddc84; animation: pulse 2s infinite; }
@keyframes pulse { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }

.hero__visual { position: relative; justify-self: end; width: min(100%, 480px); }
.portrait { position: relative; isolation: isolate; aspect-ratio: 740 / 800; border-radius: 22px; background: #857a7c; }
.portrait::before { content: ''; position: absolute; z-index: -1; inset: 18px -18px -18px 18px; border: 1.5px solid rgb(92 192 242 / 45%); border-radius: 22px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
/* Outline-Wörter: Kontur per SVG-Filter (#text-outline in index.php), beim Hover füllt sich der Text von links */
.outline-word { position: absolute; z-index: 2; font-family: var(--font-head); font-weight: 800; line-height: 1; letter-spacing: .1em; white-space: nowrap; cursor: default; pointer-events: auto; }
.outline-word__line { display: block; color: var(--line-color, rgb(255 255 255 / 90%)); filter: url(#text-outline); }
.outline-word::after { content: attr(data-text); position: absolute; inset: 0; color: var(--fill); clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease); }
.outline-word:hover::after { clip-path: inset(0 0 0 0); }
.outline-word__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.outline-word--seo { --fill: var(--blue-300); top: -52px; left: -44px; font-size: clamp(56px, 7vw, 104px); }
.outline-word--geo { --line-color: var(--yellow); --fill: var(--yellow); top: 44%; right: calc(-1 * min(84px, max(0px, (100vw - var(--container)) / 2 - 16px) + 12px)); font-size: clamp(50px, 6.2vw, 92px); }
.outline-word--local { --fill: var(--blue-300); top: 19%; left: -46px; font-size: clamp(26px, 2.8vw, 40px); letter-spacing: .14em; writing-mode: vertical-rl; transform: rotate(180deg); }
.outline-word--local::after { clip-path: inset(0 0 100% 0); }
.outline-word--local:hover::after { clip-path: inset(0 0 0 0); }
.float-card { position: absolute; z-index: 3; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 14px; color: var(--ink); background: rgb(255 255 255 / 96%); box-shadow: var(--shadow-lg); animation: float 6s ease-in-out infinite; }
.float-card strong { display: block; font-family: var(--font-head); font-size: 20px; line-height: 1.1; }
.float-card small { display: block; font-size: 13px; color: var(--muted); }
.float-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: #fff; background: var(--blue); }
.float-card__icon--gold { color: var(--navy-950); background: var(--gradient); }
.float-card--calls { bottom: 12%; left: -48px; }
.float-card--maps { bottom: -26px; right: 24px; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-8px); } }

/* Kunden-Laufband */
.clients { padding-block: 36px; background: var(--navy-800); border-block: 1px solid var(--line-dark); }
.clients__inner { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; }
.clients__label { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--on-dark-muted); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: 20px; padding-right: 20px; }
.marquee__group li { display: grid; place-items: center; width: 170px; height: 86px; padding: 12px 22px; border-radius: 12px; background: #fff; }
.marquee__group img { max-height: 58px; max-width: 100%; width: auto; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Ergebnisse */
.results { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); }
.results__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.results__copy > p:not(.eyebrow) { color: var(--on-dark-muted); font-size: 18px; margin-top: 18px; }
.results__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 24px 0 0; font-size: 14px; }
.results__meta div { display: flex; gap: 6px; }
.results__meta dt { color: var(--on-dark-muted); }
.results__meta dt::after { content: ':'; }
.results__meta dd { margin: 0; font-weight: 600; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.stat { display: grid; gap: 4px; padding: 20px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgb(255 255 255 / 4%); }
.stat .icon { width: 22px; height: 22px; margin-bottom: 6px; color: var(--yellow); }
.stat strong { font-family: var(--font-head); font-size: clamp(28px, 3vw, 38px); font-weight: 800; line-height: 1; color: #fff; }
.stat span { font-size: 15px; color: var(--on-dark-muted); }
.results__note { margin-top: 24px; font-size: 16px !important; }
.results__figure { margin: 0; padding: 12px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-lg); }
.results__figure img { border-radius: 12px; }
.results__figure figcaption { padding: 12px 6px 2px; font-size: 13px; color: var(--muted); }

/* Leistungen */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 28px 24px 24px; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; background: var(--white); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.service-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 40px rgb(12 24 48 / 12%); }
.service-card__num { position: absolute; top: 22px; right: 22px; font-family: var(--font-head); font-size: 13px; font-weight: 700; color: #b5bfd0; }
.service-card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 14px; color: var(--blue); background: rgb(22 143 209 / 10%); transition: color .3s, background-color .3s; }
.service-card__icon .icon { width: 24px; height: 24px; }
.service-card:hover .service-card__icon { color: var(--navy-950); background: var(--yellow); }
.service-card h3 { margin-bottom: 10px; }
.service-card p { flex: 1; font-size: 15px; color: var(--muted); }
.service-card__more { display: inline-flex; gap: 6px; align-items: center; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--blue); }
.service-card:hover .service-card__more .icon { transform: translateX(3px); }
.service-card__more .icon { transition: transform .2s; }
.service-card--cta { color: #fff; border: 0; background: linear-gradient(145deg, var(--navy-800), var(--navy-950)); }
.service-card--cta p { color: var(--on-dark-muted); }
.service-card--cta .service-card__icon { color: var(--navy-950); background: var(--yellow); }
.service-card--cta .service-card__more { color: var(--yellow); }
.service-grid__wide { grid-column: 1 / -1; }
.service-grid__wide .service-card { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 22px; align-items: center; padding: 24px 28px; }
.service-grid__wide .service-card__icon { grid-row: span 2; margin: 0; }
.service-grid__wide .service-card h3 { margin: 0; }
.service-grid__wide .service-card__more { grid-column: 3; grid-row: 1 / span 2; margin: 0; }

/* KI-Automatisierung */
.automation { background: radial-gradient(800px 400px at 0% 0%, rgb(22 143 209 / 18%), transparent 60%), var(--navy-900); }
.automation__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.automation__grid > div > p:not(.eyebrow) { color: var(--on-dark-muted); font-size: 18px; margin-top: 18px; }
.automation__highlight { display: flex; gap: 14px; align-items: center; margin: 28px 0 32px !important; padding: 16px 20px; border-left: 3px solid var(--yellow); border-radius: 0 12px 12px 0; color: var(--on-dark) !important; background: rgb(243 210 28 / 8%); font-size: 16px !important; }
.automation__highlight .icon { width: 26px; height: 26px; color: var(--yellow); }
.feature-list { display: grid; gap: 16px; }
.feature-list li { display: flex; gap: 20px; padding: 26px; border: 1px solid var(--line-dark); border-radius: 18px; background: rgb(255 255 255 / 4%); transition: border-color .3s, background-color .3s; }
.feature-list li:hover { border-color: rgb(92 192 242 / 40%); background: rgb(255 255 255 / 6%); }
.feature-list__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--blue), #0d5f94); }
.feature-list__icon .icon { width: 24px; height: 24px; }
.feature-list h3 { margin-bottom: 6px; }
.feature-list p { font-size: 15px; color: var(--on-dark-muted); }

/* Case Studies */
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.case-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgb(12 24 48 / 12%); }
.case-card img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: #eef1f6; }
.case-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 26px; }
.case-card__tag { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.case-card h3 { margin-bottom: 10px; font-size: 21px; }
.case-card p { font-size: 15px; color: var(--muted); }
.case-card .checklist { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 500; }
.case-card .checklist .icon { width: 18px; height: 18px; }

/* KI-Sichtbarkeit */
.ai-proof { overflow: hidden; background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); }
.carousel__track { display: flex; gap: 20px; padding: 4px max(var(--gutter), (100vw - var(--container)) / 2) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), (100vw - var(--container)) / 2); scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { position: relative; flex: 0 0 min(620px, 84vw); scroll-snap-align: start; }
.carousel__item a { display: block; overflow: hidden; border-radius: 16px; border: 1px solid var(--line-dark); background: #fff; cursor: zoom-in; }
.carousel__item img { width: 100%; transition: transform .5s var(--ease); }
.carousel__item a:hover img { transform: scale(1.02); }
.carousel__label { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgb(5 15 34 / 80%); backdrop-filter: blur(6px); pointer-events: none; }
.carousel__controls { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.ai-proof__cta { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; margin-top: 40px; padding: 28px 32px; border: 1px solid var(--line-dark); border-radius: 18px; background: rgb(255 255 255 / 4%); }
.ai-proof__cta p { max-width: 680px; margin: 0; color: var(--on-dark-muted); }
.ai-proof__cta strong { color: #fff; }

/* Über mich */
.about__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.about__media { position: sticky; top: calc(var(--header-h) + 32px); }
.about__media img { border-radius: 22px; }
.about__quote { position: relative; margin: -60px 24px 0; padding: 22px 24px; border-radius: 16px; font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.45; color: #fff; background: var(--navy-900); box-shadow: var(--shadow-lg); }
.about__quote::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gradient); }
.about__copy h2 { margin-bottom: 22px; }
.about__copy > p:not(.eyebrow) { color: var(--muted); }
.about__creds { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 36px 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); }
.about__creds h3 { margin-bottom: 16px; font-size: 16px; }
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.certs a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; cursor: zoom-in; transition: box-shadow .25s, transform .25s var(--ease); }
.certs a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.certs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.certs span { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }

.about__creds--single { grid-template-columns: 1fr; }

/* Tools */
.tools-section { background: var(--navy-800); border-bottom: 1px solid var(--line-dark); }
.tool-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tool-card { padding: 20px 20px 24px; border: 1px solid var(--line-dark); border-radius: 18px; background: rgb(255 255 255 / 4%); transition: transform .3s var(--ease), border-color .3s; }
.tool-card:hover { transform: translateY(-3px); border-color: rgb(243 210 28 / 40%); }
.tool-card__logo { display: grid; place-items: center; height: 110px; margin-bottom: 20px; padding: 16px; border-radius: 12px; background: #fff; }
.tool-card__logo img { max-height: 72px; max-width: 78%; width: auto; object-fit: contain; }
.tool-card h3 { margin-bottom: 8px; font-size: 17px; }
.tool-card p { font-size: 15px; color: var(--on-dark-muted); }

/* Warum ich */
.reasons { background: var(--navy-900); }
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line-dark); border-radius: 20px; background: var(--line-dark); }
.reason { padding: clamp(24px, 3vw, 36px); background: var(--navy-900); transition: background-color .3s; }
.reason:hover { background: var(--navy-800); }
.reason__icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 14px; color: var(--yellow); background: rgb(243 210 28 / 10%); }
.reason__icon .icon { width: 24px; height: 24px; }
.reason h3 { margin-bottom: 10px; }
.reason p { font-size: 15px; color: var(--on-dark-muted); }

/* Bewertungen */
.rating-badge { display: flex; gap: 16px; align-items: center; justify-self: end; padding: 16px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.rating-badge__g { width: 40px; height: 40px; }
.rating-badge p { margin: 0; }
.rating-badge__score { display: flex; gap: 10px; align-items: center; }
.rating-badge__score strong { font-family: var(--font-head); font-size: 28px; line-height: 1; }
.rating-badge__count { font-size: 14px; color: var(--muted); }
.review-grid { columns: 3 320px; column-gap: 20px; }
.review { break-inside: avoid; margin-bottom: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); }
.review__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.review__head strong { display: block; font-size: 16px; line-height: 1.3; }
.review__head small { font-size: 13px; color: var(--muted); }
.review__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; font-family: var(--font-head); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--blue), var(--navy-700)); }
.review__g { width: 20px; height: 20px; margin-left: auto; }
.review blockquote { margin: 12px 0 0; font-size: 15px; color: #37425a; }
.review blockquote p + p { margin-top: 10px; }
.review-cta { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 12px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.review-cta__g { flex: none; width: 44px; height: 44px; }
.review-cta > div { flex: 1 1 320px; }
.review-cta p { margin: 0; font-size: 15px; color: var(--muted); }
.review-cta .review-cta__title { margin-bottom: 4px; font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); }
.review-cta .btn .icon { color: var(--navy-950); }
.review__avatar--logo { object-fit: contain; padding: 4px; border: 1px solid var(--line); background: #fff; }
.review--company { border-color: rgb(243 210 28 / 60%); box-shadow: 0 10px 30px rgb(243 148 33 / 12%); }

/* Branchen & Städte */
.reach { background: radial-gradient(700px 400px at 100% 100%, rgb(22 143 209 / 16%), transparent 60%), var(--navy-900); }
.reach__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 88px); }
.reach h2 { margin-bottom: 28px; font-size: clamp(26px, 2.6vw, 34px); }

/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgb(12 24 48 / 12%); }
.post-card img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.post-card__body { padding: 22px 24px 26px; }
.post-card__meta { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.post-card__meta span { padding: 4px 10px; border-radius: 999px; font-weight: 600; color: var(--blue); background: rgb(22 143 209 / 10%); }
.post-card h3 { font-size: 18px; line-height: 1.35; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a::after { content: ''; position: absolute; inset: 0; }
.post-card:hover h3 a { color: var(--blue); }

/* FAQ */
.faq { background: var(--navy-950); }
.faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--header-h) + 32px); }
.faq__intro p:not(.eyebrow) { margin: 18px 0 28px; color: var(--on-dark-muted); }

/* Kontakt */
.contact { background: radial-gradient(900px 500px at 10% 10%, rgb(22 143 209 / 25%), transparent 60%), linear-gradient(160deg, var(--navy-800), var(--navy-950)); }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.contact__copy > p:not(.eyebrow) { margin-top: 18px; font-size: 18px; color: var(--on-dark-muted); }
.contact__copy strong { color: #fff; }
.contact__person { display: flex; gap: 18px; align-items: center; margin-top: 32px; padding: 18px; border: 1px solid var(--line-dark); border-radius: 18px; background: rgb(255 255 255 / 5%); }
.contact__person img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.contact__person div { display: grid; gap: 4px; }
.contact__person a { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--on-dark-muted); }
.contact__person a:hover { color: var(--yellow); }
.contact__person .icon { color: var(--yellow); }

/* 9 · Unterseiten --------------------------------------------------------------- */

/* Seiten-Hero */
.page-hero { position: relative; padding-block: clamp(32px, 4vw, 48px) clamp(64px, 8vw, 104px); overflow: hidden; background:
  radial-gradient(800px 480px at 90% 30%, rgb(22 143 209 / 22%), transparent 60%),
  radial-gradient(600px 360px at 0% 100%, rgb(243 210 28 / 7%), transparent 60%),
  var(--navy-900); }
.page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 75% 40%, #000 15%, transparent 65%); pointer-events: none; }
.page-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.page-hero h1 { font-size: clamp(34px, 4.2vw, 56px); letter-spacing: -.035em; line-height: 1.08; }
.page-hero .checklist--inline { margin-top: 28px; }
.page-hero .hero__actions { margin-top: 32px; }

.breadcrumbs { margin-bottom: clamp(28px, 4vw, 44px); font-size: 14px; color: var(--on-dark-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; opacity: .5; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--yellow); }
.breadcrumbs [aria-current] { color: #fff; }

.checklist--inline { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; font-weight: 500; }

.nav__toggle.is-active { color: var(--yellow); }

/* Illustration: Google Local Pack */
.local-pack { position: relative; justify-self: end; width: min(100%, 440px); padding: 14px; border-radius: 22px; color: #202124; background: #fff; box-shadow: var(--shadow-lg); font-family: Arial, var(--font-body); }
.local-pack::before { content: ''; position: absolute; z-index: -1; inset: 18px -18px -18px 18px; border: 1.5px solid rgb(92 192 242 / 45%); border-radius: 22px; }
.local-pack__search { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border: 1px solid #dfe1e5; border-radius: 999px; font-size: 14px; box-shadow: 0 1px 6px rgb(32 33 36 / 12%); }
.local-pack__search .icon { width: 18px; height: 18px; }
.local-pack__map { position: relative; height: 150px; margin: 12px 0 6px; border-radius: 12px; overflow: hidden; background:
  linear-gradient(115deg, transparent 46%, #fff 46%, #fff 49%, transparent 49%),
  linear-gradient(25deg, transparent 58%, #fde293 58%, #fde293 61%, transparent 61%),
  linear-gradient(160deg, transparent 30%, #fff 30%, #fff 32%, transparent 32%),
  radial-gradient(circle at 80% 20%, #c8e6c9 0 18%, transparent 19%),
  radial-gradient(circle at 15% 85%, #aadaff 0 16%, transparent 17%),
  #e8eaed; }
.local-pack__pin { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; background: #9aa0a6; box-shadow: 0 2px 6px rgb(0 0 0 / 25%); }
.local-pack__pin::after { content: ''; position: absolute; top: 100%; left: 50%; translate: -50% -1px; border: 6px solid transparent; border-top-color: #fff; }
.local-pack__pin--1 { left: 44%; top: 30%; width: 38px; height: 38px; font-size: 15px; background: #ea4335; animation: pin-drop 2.4s var(--ease) infinite; }
.local-pack__pin--2 { left: 18%; top: 22%; }
.local-pack__pin--3 { left: 72%; top: 55%; }
@keyframes pin-drop { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -6px; } }
.local-pack__list { margin: 0; padding: 0; list-style: none; }
.local-pack__list li { position: relative; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 10px; border-top: 1px solid #ebebeb; }
.local-pack__list li:first-child { border-top: 0; }
.local-pack__list strong { display: block; font-size: 15px; color: #1a0dab; }
.local-pack__list small { display: block; font-size: 12px; color: #70757a; }
.local-pack__rating { display: flex; gap: 4px; align-items: center; font-size: 13px; color: #70757a; }
.local-pack__rating .stars .icon { width: 12px; height: 12px; }
.stars--muted { color: #dadce0; }
.stars--muted .icon:not(:last-child) { color: #fbbc05; }
.local-pack__btn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid #dadce0; border-radius: 50%; color: #1a73e8; }
.local-pack__btn .icon { width: 16px; height: 16px; }
.local-pack__list li.is-you { margin: 0 -4px; padding-inline: 14px; border-radius: 12px; background: #e8f0fe; outline: 2px solid var(--yellow); }
.local-pack__badge { position: absolute; top: -10px; right: 54px; padding: 3px 10px; border-radius: 999px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--navy-950); background: var(--gradient); }
.float-card--pack { right: -36px; top: 96px; }

/* Zweispaltiges Layout mit Text */
.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.split--center { grid-template-columns: 1fr 1.1fr; align-items: center; }
.prose h2 { margin-bottom: 22px; }
.prose p { color: var(--muted); }
.prose .lead { font-size: 19px; line-height: 1.6; color: var(--ink); }
.prose strong { color: var(--ink); }

.pillars { position: sticky; top: calc(var(--header-h) + 32px); padding: 28px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); box-shadow: var(--shadow-lg); }
.pillars__title { margin-bottom: 20px; font-family: var(--font-head); font-size: 18px; font-weight: 700; }
.pillars ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pillars li { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--line-dark); border-radius: 14px; background: rgb(255 255 255 / 4%); }
.pillars__num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; font-family: var(--font-head); font-weight: 800; color: var(--navy-950); background: var(--gradient); }
.pillars strong { display: block; margin-bottom: 2px; }
.pillars li span:not(.pillars__num) { font-size: 14px; color: var(--on-dark-muted); }

/* Leistungsumfang */
.deliverables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.deliverable { padding: 26px 22px; border: 1px solid var(--line-dark); border-radius: 18px; background: rgb(255 255 255 / 4%); transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.deliverable:hover { transform: translateY(-3px); border-color: rgb(243 210 28 / 40%); background: rgb(255 255 255 / 6%); }
.deliverable__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; color: var(--yellow); background: rgb(243 210 28 / 10%); }
.deliverable__icon .icon { width: 22px; height: 22px; }
.deliverable h3 { margin-bottom: 8px; font-size: 17px; }
.deliverable p { font-size: 15px; color: var(--on-dark-muted); }

/* Ablauf */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: 28px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); }
.step:not(:last-child)::after { content: ''; position: absolute; top: 50px; right: -21px; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 8px); }
.step__num { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%; font-family: var(--font-head); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue), var(--navy-700)); }
.step:first-child .step__num { color: var(--navy-950); background: var(--gradient); }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--muted); }

/* Vorteile */
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.benefit { display: flex; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); }
.benefit__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; color: var(--blue); background: rgb(22 143 209 / 10%); }
.benefit__icon .icon { width: 22px; height: 22px; }
.benefit h3 { margin-bottom: 6px; }
.benefit p { font-size: 15px; color: var(--muted); }
.note-box { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; margin-top: 24px; padding: 28px 32px; border-radius: 18px; background: linear-gradient(100deg, rgb(243 210 28 / 18%), rgb(243 148 33 / 12%)); border: 1px solid rgb(243 148 33 / 30%); }
.note-box > div { flex: 1 1 480px; }
.note-box h3 { margin-bottom: 8px; }
.note-box p { color: #3d475c; }

/* Local SEO + GEO */
.geo-link { background: radial-gradient(700px 400px at 0% 50%, rgb(22 143 209 / 16%), transparent 60%), var(--navy-900); }
.geo-link__media { margin: 0; padding: 10px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-lg); }
.geo-link__media img { border-radius: 14px; }
.geo-link h2 { margin-bottom: 18px; }
.geo-link p:not(.eyebrow) { color: var(--on-dark-muted); }

.service-grid--3 { grid-template-columns: repeat(3, 1fr); }
.section:not(.section--light) .service-card { color: var(--ink); }

.prose a { color: var(--blue); }
.pillars__note { margin: 18px 0 0; font-size: 14px; color: var(--on-dark-muted); }

/* Illustration: Google Unternehmensprofil */
.gbp-card { position: relative; justify-self: end; width: min(100%, 420px); border-radius: 22px; overflow: visible; color: #202124; background: #fff; box-shadow: var(--shadow-lg); font-family: Arial, var(--font-body); }
.gbp-card::before { content: ''; position: absolute; z-index: -1; inset: 18px -18px -18px 18px; border: 1.5px solid rgb(92 192 242 / 45%); border-radius: 22px; }
.gbp-card__cover { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3px; height: 110px; overflow: hidden; border-radius: 22px 22px 0 0; }
.gbp-card__cover span:nth-child(1) { background: linear-gradient(135deg, #16335f, #168fd1); }
.gbp-card__cover span:nth-child(2) { background: linear-gradient(160deg, #f3d21c, #f39421); }
.gbp-card__cover span:nth-child(3) { background: linear-gradient(115deg, transparent 45%, #fff 45%, #fff 50%, transparent 50%), linear-gradient(20deg, transparent 55%, #fde293 55%, #fde293 60%, transparent 60%), #e8eaed; }
.gbp-card__body { padding: 18px 20px 20px; }
.gbp-card__name { margin: 0; font-size: 22px; line-height: 1.2; }
.gbp-card__rating { display: flex; gap: 6px; align-items: center; margin: 6px 0 2px; font-size: 14px; color: #70757a; }
.gbp-card__rating .stars .icon { width: 13px; height: 13px; }
.gbp-card__link { color: #1a73e8; }
.gbp-card__cat { margin: 0 0 14px; font-size: 14px; color: #70757a; }
.gbp-card__actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-bottom: 14px; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #1a73e8; text-align: center; }
.gbp-card__actions li { display: grid; justify-items: center; gap: 4px; }
.gbp-card__actions span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #dadce0; border-radius: 50%; }
.gbp-card__actions .icon { width: 16px; height: 16px; }
.gbp-card__actions .is-primary span { color: #fff; background: #1a73e8; border-color: #1a73e8; animation: ring 2.6s ease-in-out infinite; }
@keyframes ring { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgb(26 115 232 / 45%); } 35% { box-shadow: 0 0 0 8px rgb(26 115 232 / 0%); } }
.gbp-card__info { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid #ebebeb; font-size: 13px; color: #3c4043; }
.gbp-card__info li { display: flex; gap: 10px; align-items: center; }
.gbp-card__info .icon { width: 16px; height: 16px; color: #1a73e8; }
.gbp-card__info b { color: #188038; }
.gbp-card__perf { padding-top: 14px; }
.gbp-card__perf > p { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #70757a; }
.gbp-card__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gbp-card__kpis div { padding: 10px; border: 1px solid #e8eaed; border-radius: 10px; }
.gbp-card__kpis small { display: block; font-size: 11px; color: #70757a; }
.gbp-card__kpis strong { font-size: 18px; }
.gbp-card__kpis em { margin-left: 4px; font-size: 12px; font-style: normal; font-weight: 700; color: #188038; }
.float-card--gbp { left: -44px; top: 22px; }

/* Aufgabenliste */
.task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.task { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--line-dark); border-radius: 14px; font-weight: 500; background: rgb(255 255 255 / 4%); transition: border-color .3s, background-color .3s; }
.task:hover { border-color: rgb(243 210 28 / 40%); background: rgb(255 255 255 / 6%); }
.task__num { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--yellow); background: rgb(243 210 28 / 10%); }

/* Wirkung */
.effect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.effect { display: grid; gap: 4px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); }
.effect__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 12px; color: var(--blue); background: rgb(22 143 209 / 10%); }
.effect__icon .icon { width: 22px; height: 22px; }
.effect strong { font-family: var(--font-head); font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.1; color: var(--ink); }
.effect > span:last-child { color: var(--muted); }

/* Preise */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.price-card h3 { font-size: 22px; }
.price-card__text { margin: 8px 0 20px; font-size: 15px; color: var(--muted); }
.price-card__price { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin: 0 0 4px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.price-card__price strong { font-family: var(--font-head); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.price-card__price span { color: var(--muted); }
.price-card .checklist { flex: 1; align-content: start; margin-bottom: 28px; font-size: 15px; }
.price-card .checklist .icon { width: 18px; height: 18px; }
.price-card--featured { color: #fff; border: 0; background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); box-shadow: var(--shadow-lg); transform: translateY(-12px); }
.price-card--featured .price-card__text, .price-card--featured .price-card__price span { color: var(--on-dark-muted); }
.price-card--featured .price-card__price { border-color: var(--line-dark); }
.price-card--featured .price-card__price strong { color: #fff; }
.price-card__badge { position: absolute; top: -14px; left: 28px; display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--navy-950); background: var(--gradient); }
.price-card__badge .icon { width: 14px; height: 14px; }
.pricing__note { margin: 32px 0 0; text-align: center; color: var(--muted); }
.pricing__note a { color: var(--blue); }

/* Branchen-Hero mit Foto */
.photo-hero { position: relative; justify-self: end; width: min(100%, 460px); }
.photo-hero::before { content: ''; position: absolute; z-index: 0; inset: 18px -18px -18px 18px; border: 1.5px solid rgb(92 192 242 / 45%); border-radius: 22px; }
.photo-hero img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-lg); }
.call-toast { position: absolute; z-index: 3; left: -48px; top: 28px; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 16px; color: var(--ink); background: rgb(255 255 255 / 96%); box-shadow: var(--shadow-lg); animation: toast-in 5s var(--ease) infinite; }
.call-toast small { display: block; font-size: 12px; color: var(--muted); }
.call-toast strong { display: block; font-size: 15px; }
.call-toast__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #188038; animation: ring 1.6s ease-in-out infinite; box-shadow: 0 0 0 0 rgb(24 128 56 / 45%); }
@keyframes toast-in { 0% { opacity: 0; translate: 0 -10px; } 8%, 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -10px; } }
.float-card--photo { right: -28px; bottom: 40px; }

/* Suchanfragen */
.benefit-grid--3 { grid-template-columns: repeat(3, 1fr); }
.queries { margin-top: 28px; padding: 28px; border-radius: 20px; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); }
.queries__title { margin-bottom: 16px; font-family: var(--font-head); font-weight: 700; color: #fff; }
.queries ul { display: flex; flex-wrap: wrap; gap: 12px; }
.queries li { display: inline-flex; gap: 10px; align-items: center; padding: 10px 18px 10px 14px; border-radius: 999px; font-size: 15px; color: #202124; background: #fff; box-shadow: 0 1px 6px rgb(0 0 0 / 20%); }
.queries li .icon { width: 16px; height: 16px; }

/* Praxisbeispiel als Ablauf */
.case-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.case-flow__step { position: relative; padding: 28px; border: 1px solid var(--line-dark); border-radius: 20px; background: rgb(255 255 255 / 4%); }
.case-flow__step:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -24px; width: 20px; height: 20px; border-top: 2px solid var(--yellow); border-right: 2px solid var(--yellow); transform: translateY(-50%) rotate(45deg) scale(.6); }
.case-flow__label { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); background: rgb(255 255 255 / 7%); }
.case-flow h3 { margin-bottom: 14px; }
.case-flow__list { display: grid; gap: 8px; font-size: 15px; color: var(--on-dark-muted); }
.case-flow__list li { position: relative; padding-left: 18px; }
.case-flow__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-300); }
.case-flow__step--result { border-color: rgb(243 210 28 / 45%); background: linear-gradient(150deg, rgb(243 210 28 / 12%), rgb(243 148 33 / 6%)); }
.case-flow__step--result .case-flow__label { color: var(--navy-950); background: var(--gradient); }
.case-flow__step--result .case-flow__list { color: var(--on-dark); }
.case-flow__step--result .case-flow__list li::before { background: var(--yellow); }

/* Leistungen für Branchen */
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.offer { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); }
.offer .benefit__icon { margin-bottom: 18px; }
.offer h3 { margin-bottom: 8px; }
.offer > p { font-size: 15px; color: var(--muted); }
.offer .checklist { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.offer .checklist .icon { width: 18px; height: 18px; }
.trades { margin-top: 28px; padding: 28px; border: 1px dashed #c9d2e0; border-radius: 20px; }
.trades__title { margin-bottom: 14px; font-family: var(--font-head); font-weight: 700; }
.chips + .trades__title { margin-top: 26px; }
.chips--light .chip { color: var(--ink); border-color: var(--line); background: #fff; }
.chips--light .chip:hover { color: var(--ink); border-color: var(--line); background: #fff; }
.trades__more { margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.trades__more a { color: var(--blue); }

/* Ratgeber mit Seitenkarte */
.article-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.prose h3 { margin: 32px 0 10px; font-size: 21px; color: var(--ink); }
.side-card { position: sticky; top: calc(var(--header-h) + 32px); padding: 28px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); box-shadow: var(--shadow-lg); }
.side-card__title { margin-bottom: 8px; font-family: var(--font-head); font-size: 20px; font-weight: 700; }
.side-card > p:not(.side-card__title) { font-size: 15px; color: var(--on-dark-muted); }
.side-card__list { display: grid; gap: 12px; margin: 20px 0 24px; }
.side-card__list li { display: flex; gap: 14px; align-items: flex-start; }
.side-card__list .icon { width: 38px; height: 38px; padding: 9px; border-radius: 10px; color: var(--yellow); background: rgb(243 210 28 / 10%); }
.side-card__list strong { display: block; }
.side-card__list span { font-size: 14px; color: var(--on-dark-muted); }
.side-card__phone { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; font-weight: 600; text-decoration: none; }
.side-card__phone:hover { color: var(--yellow); }

/* Stadtseiten */
.muted { color: var(--muted); }
.muted-dark { color: var(--on-dark-muted); }
.link-light { color: var(--blue-300); }
.split > div > h2 { margin-bottom: 18px; }
.split__img { width: 100%; max-width: 520px; justify-self: center; }
.benefit-grid--spaced { margin-top: clamp(40px, 5vw, 64px); }
.chips--sm { gap: 8px; margin-top: 24px; }
.chips--sm .chip { padding: 7px 12px; font-size: 14px; }
.chips--sm .chip .icon { width: 13px; height: 13px; color: var(--blue); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }

/* Nachgestellte ChatGPT-Antwort */
.ai-chat { position: relative; justify-self: end; width: min(100%, 480px); margin: 0; }
.ai-chat::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; border: 1.5px solid rgb(92 192 242 / 45%); border-radius: 22px; }
.ai-chat__window { position: relative; padding: 22px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 22px; color: #ececec; background: #212121; box-shadow: var(--shadow-lg); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.55; }
.ai-chat__q { width: fit-content; max-width: 85%; margin: 0 0 18px auto; padding: 10px 16px; border-radius: 18px; background: #303030; }
.ai-chat__a { display: flex; gap: 12px; }
.ai-chat__a p { margin-bottom: 12px; }
.ai-chat__logo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid #444; border-radius: 50%; }
.ai-chat__logo .icon { width: 15px; height: 15px; }
.ai-chat__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: ai; }
.ai-chat__list li { position: relative; display: grid; gap: 6px; padding: 10px 12px 10px 38px; border-radius: 10px; background: #2a2a2a; counter-increment: ai; }
.ai-chat__list li::before { content: counter(ai); position: absolute; left: 12px; top: 10px; font-weight: 700; color: #8e8e8e; }
.ai-chat__list i { display: block; height: 8px; border-radius: 4px; background: #3d3d3d; }
.ai-chat__list li.is-you { background: rgb(243 210 28 / 12%); outline: 1.5px solid var(--yellow); }
.ai-chat__list li.is-you::before { color: var(--yellow); }
.ai-chat__list strong { color: #fff; }
.ai-chat__list span { font-size: 12px; color: #b4b4b4; }
.ai-chat figcaption { position: absolute; z-index: 2; left: -40px; bottom: -30px; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 14px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); }
.ai-chat figcaption strong { display: block; font-family: var(--font-head); font-size: 17px; line-height: 1.2; }
.ai-chat figcaption a { font-size: 13px; color: var(--blue); }

/* Geo-Grid-Ranking */
.geo-grid { justify-self: center; width: min(100%, 480px); margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.geo-grid__map { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(6px, 1.2vw, 12px); padding: clamp(14px, 2vw, 22px); border-radius: 14px; background:
  linear-gradient(115deg, transparent 46%, #fff 46%, #fff 48.5%, transparent 48.5%),
  linear-gradient(20deg, transparent 58%, #fde293 58%, #fde293 60.5%, transparent 60.5%),
  linear-gradient(160deg, transparent 30%, #fff 30%, #fff 32%, transparent 32%),
  radial-gradient(ellipse 40% 12% at 30% 72%, #aadaff 0 98%, transparent 100%),
  radial-gradient(circle at 85% 18%, #c8e6c9 0 14%, transparent 15%),
  #e8eaed; }
.geo-grid__dot { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; font-size: clamp(11px, 1.1vw, 14px); font-weight: 700; color: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 18%); }
.geo-grid__dot--top, .geo-grid__key--top { background: #188038; }
.geo-grid__dot--mid, .geo-grid__key--mid { background: #f29900; }
.geo-grid__dot--low, .geo-grid__key--low { background: #d93025; }
.geo-grid figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 14px; font-size: 13px; color: var(--muted); }
.geo-grid figcaption span { display: inline-flex; gap: 6px; align-items: center; }
.geo-grid figcaption small { flex-basis: 100%; }
.geo-grid__key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }

/* Branchen-Kacheln */
.industry-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.industry-card { display: flex; gap: 12px; align-items: center; justify-content: space-between; height: 100%; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.3; text-decoration: none; background: #fff; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.industry-card small { display: block; margin-bottom: 2px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--muted); }
.industry-card .icon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: var(--blue); background: rgb(22 143 209 / 10%); transition: color .25s, background-color .25s; }
.industry-card:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 16px 32px rgb(12 24 48 / 12%); }
.industry-card:hover .icon { color: var(--navy-950); background: var(--yellow); }

/* Leistungsübersicht: Schnellnavigation im Hero */
.quicknav { position: relative; justify-self: end; width: min(100%, 420px); padding: 22px; border: 1px solid var(--line-dark); border-radius: 22px; background: rgb(255 255 255 / 5%); backdrop-filter: blur(6px); box-shadow: var(--shadow-lg); }
.quicknav__title { margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.quicknav ul { display: grid; gap: 6px; }
.quicknav a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; }
.quicknav a:hover { color: var(--navy-950); background: var(--yellow); }
.quicknav__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: var(--blue-300); background: rgb(92 192 242 / 12%); transition: color .2s, background-color .2s; }
.quicknav a:hover .quicknav__icon { color: var(--navy-950); background: rgb(255 255 255 / 45%); }
.quicknav__arrow { margin-left: auto; opacity: .5; transition: transform .2s, opacity .2s; }
.quicknav a:hover .quicknav__arrow { opacity: 1; transform: translateX(3px); }

/* Leistungsübersicht: Zeilen */
.service-list { display: grid; gap: 16px; }
.service-row { display: grid; grid-template-columns: 90px minmax(0, 1.3fr) minmax(0, 1fr) 210px; gap: 28px; align-items: center; padding: 28px 32px; border: 1px solid var(--line); border-radius: 20px; background: #fff; scroll-margin-top: calc(var(--header-h) + 24px); transition: box-shadow .3s var(--ease), border-color .3s; }
.service-row:hover, .service-row:target { border-color: transparent; box-shadow: 0 20px 40px rgb(12 24 48 / 10%); }
.service-row:target { outline: 2px solid var(--yellow); }
.service-row__head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.service-row__head .service-card__icon { margin: 0; }
.service-row__num { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: #b5bfd0; }
.service-row__badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--navy-950); background: var(--gradient); }
.service-row h3 { margin-bottom: 8px; font-size: 22px; }
.service-row__body p { font-size: 15px; color: var(--muted); }
.service-row__points { margin: 0; font-size: 14px; font-weight: 500; }
.service-row__points .icon { width: 18px; height: 18px; }
.service-row__cta { width: 100%; }

/* Welche Leistung passt? */
.side-intro { position: sticky; top: calc(var(--header-h) + 32px); }
.side-intro h2 { margin-bottom: 18px; }
.side-intro .btn { margin-top: 12px; }
.side-intro__phone { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-weight: 600; text-decoration: none; }
.side-intro__phone:hover { color: var(--yellow); }
.fit-list { display: grid; gap: 12px; }
.fit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: 18px 20px 18px 24px; border: 1px solid var(--line-dark); border-radius: 16px; text-decoration: none; background: rgb(255 255 255 / 4%); transition: border-color .25s, background-color .25s; }
.fit:hover { border-color: rgb(243 210 28 / 45%); background: rgb(255 255 255 / 7%); }
.fit__situation { font-size: 16px; font-style: italic; color: var(--on-dark); }
.fit__answer { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 700; color: var(--yellow); white-space: nowrap; }
.fit__answer > .icon:last-child { transition: transform .2s; }
.fit:hover .fit__answer > .icon:last-child { transform: translateX(3px); }
.fit__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--navy-950); background: var(--yellow); }
.fit__icon .icon { width: 16px; height: 16px; }

/* Über mich */
.facts { background: var(--navy-800); border-block: 1px solid var(--line-dark); }
.facts__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts__list li { display: grid; gap: 4px; padding: 28px 24px; text-align: center; }
.facts__list li + li { border-left: 1px solid var(--line-dark); }
.facts__list strong { font-family: var(--font-head); font-size: clamp(28px, 3vw, 38px); font-weight: 800; line-height: 1.1; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.facts__list span { font-size: 14px; color: var(--on-dark-muted); }
.social--hero { margin-top: 28px; }
.social--hero a:hover { color: var(--yellow); }
.about-photo { max-width: 520px; justify-self: center; }
.about-photo img { border-radius: 22px; }
.deliverables--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.certs--large { gap: 20px; }

/* Blog */
.page-hero--compact { padding-bottom: clamp(56px, 7vw, 88px); }
.blog-hero { display: flex; gap: 32px; align-items: flex-end; justify-content: space-between; }
.blog-hero > div { max-width: 820px; }
.blog-hero__count { display: grid; flex: none; justify-items: center; margin: 0; padding: 18px 26px; border: 1px solid var(--line-dark); border-radius: 18px; background: rgb(255 255 255 / 5%); }
.blog-hero__count strong { font-family: var(--font-head); font-size: 40px; line-height: 1; color: var(--yellow); }
.blog-hero__count span { font-size: 14px; color: var(--on-dark-muted); }
.featured-post { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: 16px; border: 1px solid var(--line-dark); border-radius: 24px; background: rgb(255 255 255 / 4%); }
.featured-post__media { display: block; overflow: hidden; border-radius: 16px; }
.featured-post__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s var(--ease); }
.featured-post:hover .featured-post__media img { transform: scale(1.03); }
.featured-post__body { padding: 8px 16px 8px 0; }
.featured-post__body .post-card__meta { color: var(--on-dark-muted); }
.featured-post__body .post-card__meta span { color: var(--navy-950); background: var(--yellow); }
.featured-post h2 { margin: 6px 0 14px; font-size: clamp(24px, 2.4vw, 32px); }
.featured-post h2 a { text-decoration: none; }
.featured-post h2 a:hover { color: var(--yellow); }
.featured-post__body > p:not(.post-card__meta) { margin-bottom: 24px; color: var(--on-dark-muted); }

.blog-toolbar { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter__btn { display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.filter__btn span { padding: 1px 8px; border-radius: 999px; font-size: 12px; color: var(--muted); background: var(--surface); }
.filter__btn:hover { border-color: var(--blue); }
.filter__btn.is-active { color: #fff; border-color: var(--navy-900); background: var(--navy-900); }
.filter__btn.is-active span { color: var(--navy-950); background: var(--yellow); }
.filter__empty { margin: 0; padding: 32px; border: 1px dashed #c9d2e0; border-radius: 16px; text-align: center; color: var(--muted); }
.post-grid--blog .post-card { display: flex; flex-direction: column; }
.post-grid--blog .post-card[hidden] { display: none; }
.post-card__excerpt { margin: 10px 0 0; font-size: 15px; color: var(--muted); }

/* Kontaktseite */
.contact-hero .contact__grid { align-items: start; }
.contact-hero .contact__copy h1 { font-size: clamp(34px, 4.2vw, 54px); letter-spacing: -.035em; line-height: 1.08; }
.contact-hero .form { margin-top: clamp(0px, 4vw, 56px); }
.contact-cards { display: grid; gap: 12px; margin-top: 32px; }
.contact-card { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line-dark); border-radius: 16px; text-decoration: none; background: rgb(255 255 255 / 4%); transition: border-color .2s, background-color .2s; }
.contact-card:hover { border-color: rgb(243 210 28 / 50%); background: rgb(255 255 255 / 7%); }
.contact-card__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; color: var(--navy-950); background: var(--gradient); }
.contact-card__icon .icon { width: 22px; height: 22px; }
.contact-card small { display: block; font-size: 13px; color: var(--on-dark-muted); }
.contact-card strong { display: block; font-size: 17px; line-height: 1.35; word-break: break-word; }
.contact__rating { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--on-dark-muted); }
.contact__rating .stars .icon { width: 14px; height: 14px; }
.map-address { display: grid; gap: 2px; margin: 20px 0; padding-left: 16px; border-left: 3px solid var(--yellow); font-size: 17px; }
.map-address strong { color: #fff; }
.map { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-dark); border-radius: 22px; background:
  linear-gradient(115deg, transparent 46%, #fff 46%, #fff 48%, transparent 48%),
  linear-gradient(25deg, transparent 58%, #fde293 58%, #fde293 60.5%, transparent 60.5%),
  linear-gradient(160deg, transparent 30%, #fff 30%, #fff 32%, transparent 32%),
  radial-gradient(ellipse 45% 10% at 40% 78%, #aadaff 0 98%, transparent 100%),
  radial-gradient(circle at 82% 20%, #c8e6c9 0 14%, transparent 15%),
  #e8eaed; box-shadow: var(--shadow-lg); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; color: var(--ink); background: rgb(255 255 255 / 55%); backdrop-filter: blur(1px); }
.map__placeholder p { max-width: 360px; margin: 0; font-size: 14px; color: #3d475c; }
.map__placeholder strong { display: block; margin-bottom: 4px; font-family: var(--font-head); font-size: 18px; color: var(--ink); }
.map__placeholder a { color: var(--blue); }
.map__pin { display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #ea4335; box-shadow: 0 6px 16px rgb(0 0 0 / 25%); }
.map__pin .icon { width: 26px; height: 26px; }

/* Case Studies */
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; justify-self: end; width: min(100%, 460px); }
.hero-stats li { display: grid; gap: 4px; padding: 22px; border: 1px solid var(--line-dark); border-radius: 18px; background: rgb(255 255 255 / 5%); }
.hero-stats__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 10px; color: var(--navy-950); background: var(--gradient); }
.hero-stats strong { font-family: var(--font-head); font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.05; color: #fff; }
.hero-stats li > span:last-child { font-size: 14px; color: var(--on-dark-muted); }
.case-list { display: grid; gap: 24px; }
.case-row { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: #fff; scroll-margin-top: calc(var(--header-h) + 24px); transition: box-shadow .3s var(--ease); }
.case-row:hover { box-shadow: 0 20px 40px rgb(12 24 48 / 10%); }
.case-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) 360px; }
.case-row:nth-child(even) img { order: 2; }
.case-row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #eef1f6; }
.case-row__body { padding: 8px 16px; }
.case-row h3 { margin-bottom: 12px; font-size: clamp(24px, 2.4vw, 30px); }
.case-row__body > p:not(.case-card__tag) { color: var(--muted); }
.case-row__services { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.case-row__services li { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--blue); background: rgb(22 143 209 / 10%); }
.case-row__result { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px !important; padding: 14px 16px; border-left: 3px solid var(--yellow); border-radius: 0 12px 12px 0; color: var(--ink) !important; background: rgb(243 210 28 / 12%); }
.case-row__result .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #b8860b; }
.city-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.city-result { padding: 20px; border: 1px solid var(--line-dark); border-radius: 16px; background: rgb(255 255 255 / 4%); }
.city-result__name { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #fff; }
.city-result__name .icon { color: var(--yellow); }
.city-result dl { display: grid; gap: 8px; margin: 0; }
.city-result dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.city-result dt { color: var(--on-dark-muted); }
.city-result dd { margin: 0; font-weight: 700; color: #3ddc84; }
.results__copy .btn { margin-top: 8px; }
.site-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.site-gallery a { display: block; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #fff, #e9edf4); cursor: zoom-in; transition: transform .3s var(--ease); }
.site-gallery a:hover { transform: translateY(-4px); }
.site-gallery img { width: 100%; }
.site-gallery span { display: block; margin-top: 10px; font-weight: 600; text-align: center; color: var(--on-dark-muted); }

/* Case-Study-Detailseite */
.case-row__services--dark { margin-top: 24px; }
.case-row__services--dark li { color: var(--blue-300); background: rgb(92 192 242 / 12%); }
.case-hero__media { justify-self: end; width: min(100%, 480px); margin: 0; }
.case-hero__device { position: relative; justify-self: end; width: min(100%, 580px); margin: 0; padding: 0 56px 34px 0; }
.case-hero__device .device-shot__browser { box-shadow: var(--shadow-lg); }
.case-hero__device .device-shot__phone { width: 28%; max-width: 160px; }
.case-hero__media a { display: block; overflow: hidden; border-radius: 22px; box-shadow: var(--shadow-lg); cursor: zoom-in; }
.tree { display: grid; gap: 14px; margin: 0; padding: 28px; border-radius: 22px; list-style: none; color: #fff; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); box-shadow: var(--shadow-lg); }
.tree > li { position: relative; }
.tree > li + li::before { content: ''; position: absolute; left: 28px; top: -14px; height: 14px; border-left: 2px dashed rgb(92 192 242 / 50%); }
.tree__root, .tree__level li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 14px 16px; border: 1px solid var(--line-dark); border-radius: 14px; font-weight: 700; background: rgb(255 255 255 / 5%); }
.tree__root { color: var(--navy-950); border: 0; background: var(--gradient); }
.tree .icon { flex: none; width: 20px; height: 20px; color: var(--yellow); }
.tree__root .icon { color: var(--navy-950); }
.tree small { flex-basis: 100%; padding-left: 30px; font-size: 13px; font-weight: 400; color: var(--on-dark-muted); }
.tree__level { display: grid; gap: 10px; margin: 0; padding: 0 0 0 28px; list-style: none; }
.tree__level--leaf li { border-color: rgb(243 210 28 / 45%); background: rgb(243 210 28 / 8%); }
.link-arrow { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; text-decoration: none; color: var(--blue); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow .icon { transition: transform .2s; }
.case-card .link-arrow { margin-top: 16px; }

/* SEO-Kosten-Rechner */
.calc-hero__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.calc-hero__copy h1 { font-size: clamp(32px, 3.8vw, 50px); letter-spacing: -.035em; line-height: 1.1; }
.calc-hero__copy .checklist { margin-top: 28px; }
.calc-hero__person { display: flex; gap: 14px; align-items: center; margin-top: 32px; padding: 14px; border: 1px solid var(--line-dark); border-radius: 16px; background: rgb(255 255 255 / 4%); }
.calc-hero__person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.calc-hero__person p { margin: 0; font-size: 14px; color: var(--on-dark-muted); }
.calc-hero__person strong { display: block; color: #fff; }
.calc { position: relative; padding: clamp(20px, 3vw, 32px); border-radius: 22px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); scroll-margin-top: calc(var(--header-h) + 16px); }
.calc__progress { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 24px; font-size: 14px; font-weight: 600; }
.calc__progress p { margin: 0; }
.calc__progress em { font-style: normal; font-weight: 400; color: var(--muted); }
.calc__progress p:nth-child(2) { color: var(--blue); }
.calc__bar { flex-basis: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface); }
.calc__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gradient); transition: width .4s var(--ease); }
.calc__panel { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
.calc__panel.is-active { display: block; animation: calc-in .35s var(--ease); }
@keyframes calc-in { from { opacity: 0; transform: translateX(12px); } }
.calc__panel legend { display: block; margin-bottom: 6px; padding: 0; font-family: var(--font-head); font-size: clamp(20px, 2vw, 24px); font-weight: 800; line-height: 1.25; outline: none; }
.calc__hint { margin-bottom: 20px; font-size: 15px; color: var(--muted); }
.calc__options { display: grid; gap: 10px; }
.calc__options--grid { grid-template-columns: 1fr 1fr; }
.calc__opt { position: relative; display: flex; gap: 12px; align-items: center; padding: 14px 44px 14px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.calc__opt:hover { border-color: var(--blue); background: #fff; }
.calc__opt input { position: absolute; opacity: 0; pointer-events: none; }
.calc__opt:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.calc__opt:has(input:checked) { border-color: var(--orange); background: #fff; box-shadow: 0 6px 18px rgb(243 148 33 / 18%); }
.calc__opt-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; color: var(--blue); background: rgb(22 143 209 / 10%); }
.calc__opt:has(input:checked) .calc__opt-icon { color: var(--navy-950); background: var(--gradient); }
.calc__opt-text strong { display: block; font-size: 15px; line-height: 1.3; }
.calc__opt-text small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.calc__check { position: absolute; right: 14px; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #c9d2e0; border-radius: 50%; transform: translateY(-50%); }
.calc__check .icon { width: 13px; height: 13px; stroke-width: 3; opacity: 0; }
.calc__opt:has(input:checked) .calc__check { border-color: var(--orange); background: var(--orange); color: #fff; }
.calc__opt:has(input:checked) .calc__check .icon { opacity: 1; }
.calc__msg { min-height: 1.4em; margin: 16px 0 0; font-size: 14px; font-weight: 600; color: #c0392b; }
.calc__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.calc__nav .btn--ghost { color: var(--ink); border-color: var(--line); }
.calc__nav .btn--ghost:hover { color: var(--blue); }
.calc__nav [data-calc-next] { margin-left: auto; }
.calc__nav [hidden] { display: none; }
.calc__badge { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--blue); background: rgb(22 143 209 / 10%); }
.calc__result-title { margin-bottom: 18px; font-family: var(--font-head); font-size: 24px; font-weight: 800; outline: none; }
.calc__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc__prices div { display: grid; gap: 2px; padding: 18px; border-radius: 16px; background: var(--surface); }
.calc__prices div:first-child { color: #fff; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); }
.calc__prices small { font-size: 13px; color: var(--muted); }
.calc__prices div:first-child small, .calc__prices div:first-child span { color: var(--on-dark-muted); }
.calc__prices strong { font-family: var(--font-head); font-size: clamp(28px, 3vw, 36px); font-weight: 800; line-height: 1.1; }
.calc__prices div:first-child strong { color: var(--yellow); }
.calc__prices span { font-size: 13px; color: var(--muted); }
.calc__notes { display: grid; gap: 10px; margin-top: 18px; }
.calc__note { display: flex; gap: 12px; padding: 14px; border-left: 3px solid var(--yellow); border-radius: 0 12px 12px 0; background: rgb(243 210 28 / 10%); }
.calc__note .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #b8860b; }
.calc__note p { margin: 0; font-size: 14px; color: #3d475c; }
.calc__note strong { display: block; color: var(--ink); }
.calc__included-title { margin: 22px 0 0; font-weight: 700; }
.calc__included { grid-template-columns: 1fr 1fr; margin-top: 12px; font-size: 14px; }
.calc__included .icon { width: 18px; height: 18px; }
.calc__sent { margin: 18px 0 0; font-size: 14px; font-weight: 600; color: #188038; }
.calc__disclaimer { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.calc__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.calc__cta .btn--ghost { color: var(--ink); border-color: var(--line); }

/* Website erstellen */
.device-hero { position: relative; justify-self: end; width: min(100%, 520px); }
.device-hero img { width: 100%; filter: drop-shadow(0 30px 50px rgb(5 15 34 / 45%)); }
.float-card--speed { left: -20px; top: 18%; }
.price-card__time { display: flex; gap: 8px; align-items: center; margin: -12px 0 18px; font-size: 14px; font-weight: 600; color: var(--muted); }
.price-card--featured .price-card__time { color: var(--on-dark-muted); }
.price-card__time .icon { color: var(--blue); }
.combo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px 32px; align-items: center; margin-top: 28px; padding: 28px 32px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, var(--navy-800), var(--navy-950)); box-shadow: var(--shadow-lg); }
.combo__label { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.combo h3 { margin-bottom: 8px; font-size: 22px; }
.combo p:not(.combo__label):not(.combo__price) { margin: 0; font-size: 15px; color: var(--on-dark-muted); }
.combo__price { display: grid; margin: 0; text-align: right; }
.combo__price small { font-size: 14px; color: var(--on-dark-muted); }
.combo__price strong { font-family: var(--font-head); font-size: 40px; line-height: 1; color: var(--yellow); }
.steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--6 .step:nth-child(3n)::after { display: none; }
.ref-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ref { display: flex; flex-direction: column; padding: 14px 14px 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.ref:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgb(12 24 48 / 10%); }
.ref__media { display: block; overflow: hidden; margin-bottom: 16px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff, #e9edf4); cursor: zoom-in; }
.ref__media img { width: 100%; }
.ref h3 { margin: 0 8px 6px; }
.ref p { margin: 0 8px; font-size: 15px; color: var(--muted); }

/* GEO Optimierung */
.phone-fan { position: relative; justify-self: end; width: min(100%, 500px); height: 520px; }
.phone-fan__item { position: absolute; top: 20px; width: 230px; margin: 0; padding: 8px; border-radius: 30px; background: #111827; box-shadow: var(--shadow-lg); }
.phone-fan__item img { width: 100%; height: 420px; object-fit: cover; object-position: top; border-radius: 22px; }
.phone-fan__item figcaption { position: absolute; left: 50%; bottom: -14px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--navy-950); background: var(--gradient); transform: translateX(-50%); }
.phone-fan__item--1 { left: 0; transform: rotate(-8deg) translateY(30px); }
.phone-fan__item--2 { left: 50%; z-index: 2; transform: translateX(-50%); }
.phone-fan__item--3 { right: 0; transform: rotate(8deg) translateY(30px); }
.shot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.shot-grid a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; cursor: zoom-in; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.shot-grid a:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgb(12 24 48 / 12%); }
.shot-grid img { width: 100%; height: 520px; object-fit: cover; object-position: top; }
.shot-grid span { display: block; margin-top: 12px; font-weight: 700; text-align: center; color: var(--ink); }
.deliverables--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* SEO Beratung */
.audit-card { justify-self: end; width: min(100%, 440px); padding: 24px; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); }
.audit-card__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.audit-card__head small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.audit-card__head strong { font-family: var(--font-head); font-size: 19px; }
.audit-card__score { display: grid; place-content: center; width: 74px; height: 74px; border-radius: 50%; text-align: center; background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(var(--orange) calc(var(--p) * 1%), var(--line) 0); }
.audit-card__score span { font-family: var(--font-head); font-size: 22px; font-weight: 800; line-height: 1; }
.audit-card__score small { font-size: 11px; color: var(--muted); }
.audit-card__list { display: grid; gap: 10px; margin: 18px 0; font-size: 14px; font-weight: 500; }
.audit-card__list li { display: flex; gap: 10px; align-items: center; }
.audit-card__list li > span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 800; color: #fff; }
.audit-card__list .icon { width: 13px; height: 13px; stroke-width: 3; }
.audit-card__list .is-bad > span { background: #d93025; }
.audit-card__list .is-warn > span { background: #f29900; }
.audit-card__list .is-ok > span { background: #188038; }
.audit-card__plan { padding: 16px; border-radius: 14px; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); color: #fff; }
.audit-card__plan p { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-weight: 700; }
.audit-card__plan .icon { color: var(--yellow); }
.audit-card__plan ol { margin: 0; padding-left: 20px; font-size: 14px; color: var(--on-dark-muted); }
.market { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 48px; align-items: center; margin-top: 28px; padding: 28px 32px; border: 1px dashed #c9d2e0; border-radius: 20px; }
.market h3 { margin-bottom: 8px; }
.market p { margin: 0; font-size: 15px; color: var(--muted); }
.market dl { display: grid; gap: 10px; margin: 0; }
.market dl div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 15px; }
.market dl div:last-child { padding-bottom: 0; border-bottom: 0; }
.market dt { color: var(--muted); }
.market dd { margin: 0; font-weight: 700; text-align: right; }
.side-card--static { position: static; }
.split__img--round { border-radius: 22px; }

/* SEO Betreuung */
.report-card { justify-self: end; width: min(100%, 440px); padding: 24px; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); }
.report-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.report-card__head small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.report-card__head strong { font-family: var(--font-head); font-size: 20px; }
.report-card__badge { display: inline-flex; gap: 4px; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #188038; background: #e6f4ea; }
.report-card__badge .icon { width: 14px; height: 14px; }
.report-card__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.report-card__kpis div { padding: 12px; border-radius: 12px; background: var(--surface); }
.report-card__kpis small { display: block; font-size: 12px; color: var(--muted); }
.report-card__kpis strong { font-family: var(--font-head); font-size: 20px; color: #188038; }
.report-card__chart { display: flex; gap: 6px; align-items: flex-end; height: 90px; padding: 10px 12px 0; border-bottom: 2px solid var(--line); }
.report-card__chart span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--blue-300), var(--blue)); }
.report-card__chart span:last-child { background: var(--gradient); }
.report-card__rows { display: grid; gap: 8px; margin-top: 16px; font-size: 13px; }
.report-card__rows li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--surface); }
.report-card__rows span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.report-card__rows .up { color: #188038; }
.report-card__rows em { font-style: normal; font-weight: 700; }
.step__num--wide { width: auto; padding: 0 16px; border-radius: 999px; font-size: 14px; }
.audience-list { display: grid; gap: 14px; margin-top: 24px; }
.audience-list li { display: flex; gap: 16px; padding: 18px; border: 1px solid var(--line-dark); border-radius: 16px; background: rgb(255 255 255 / 4%); }
.audience-list__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--navy-950); background: var(--gradient); }
.audience-list h3 { margin-bottom: 4px; font-size: 17px; }
.audience-list p { margin: 0; font-size: 15px; color: var(--on-dark-muted); }
.price-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.price-hero__main { padding: clamp(28px, 4vw, 48px); }
.price-hero__main h2 { margin-bottom: 14px; }
.price-hero__main > p:not(.eyebrow):not(.price-hero__price) { color: var(--muted); }
.price-hero__price { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 24px 0 !important; }
.price-hero__price small { font-size: 18px; color: var(--muted); }
.price-hero__price strong { font-family: var(--font-head); font-size: clamp(48px, 5vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.price-hero__price span { font-size: 18px; color: var(--muted); }
.price-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.price-hero__side { padding: clamp(28px, 4vw, 48px); color: #fff; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); }
.price-hero__title { margin-bottom: 8px; font-family: var(--font-head); font-size: 20px; font-weight: 700; }
.combo-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.combo-links a, .combo-links__inner { display: flex; gap: 14px; align-items: center; height: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; background: #fff; transition: border-color .2s, box-shadow .2s; }
.combo-links a:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.combo-links strong { display: block; }
.combo-links small { display: block; font-size: 13px; color: var(--muted); }
.combo-links a > .icon { margin-left: auto; color: var(--blue); }
.combo-links .is-current .combo-links__inner { border: 2px solid var(--orange); }

/* KI-Automatisierung: Workflow-Karte */
.flow-card { justify-self: end; width: min(100%, 440px); padding: 24px; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); }
.flow-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.flow-card__head small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.flow-card__head strong { font-family: var(--font-head); font-size: 20px; }
.flow-card__badge { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #188038; background: #e6f4ea; }
.flow-card__badge i { width: 8px; height: 8px; border-radius: 50%; background: #34a853; box-shadow: 0 0 0 3px rgb(52 168 83 / 25%); }
.flow-card__nodes { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.flow-card__nodes li { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.flow-card__nodes li:not(:last-child)::after { content: ''; position: absolute; left: 31px; bottom: -15px; width: 2px; height: 14px; background: repeating-linear-gradient(180deg, var(--blue) 0 3px, transparent 3px 6px); }
.flow-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--blue); background: rgb(22 143 209 / 12%); }
.flow-card__icon .icon { width: 20px; height: 20px; }
.flow-card__nodes div { min-width: 0; }
.flow-card__nodes strong { display: block; font-size: 15px; }
.flow-card__nodes small { display: block; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.flow-card__nodes em { font-size: 12px; font-style: normal; font-weight: 600; color: var(--muted); }
.flow-card__nodes .is-ai { border-color: rgb(243 148 33 / 45%); background: #fff8ec; }
.flow-card__nodes .is-ai .flow-card__icon { color: var(--navy-950); background: var(--gradient); }
.flow-card__nodes .is-done .flow-card__icon { color: #fff; background: #34a853; }
.flow-card__foot { display: flex; gap: 8px; align-items: center; margin: 18px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.flow-card__foot .icon { flex: none; width: 16px; height: 16px; color: var(--blue); }

/* Technologie-Leiste */
.tool-strip { padding-block: 28px; background: var(--navy-800); border-block: 1px solid var(--line-dark); }
.tool-strip__inner { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; }
.tool-strip__label { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--on-dark-muted); }
.tool-strip__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tool-strip__list li { padding: 9px 16px; border: 1px solid var(--line-dark); border-radius: 999px; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: #fff; background: rgb(255 255 255 / 5%); }
.tool-strip__list li:first-child { color: var(--navy-950); border-color: transparent; background: var(--gradient); }

/* Zeitfresser */
.pain-list { display: grid; gap: 12px; margin: 8px 0 24px; padding: 0; list-style: none; }
.pain-list li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.pain-list .icon { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: #d93025; background: #fce8e6; stroke-width: 3; }

/* Anwendungsbeispiele */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.usecase { display: flex; flex-direction: column; padding: 28px 24px; border-radius: 18px; color: var(--ink); background: #fff; }
.usecase .benefit__icon { margin-bottom: 18px; }
.usecase h3 { margin-bottom: 8px; }
.usecase > p:not(.flow-chain) { margin-bottom: 20px; font-size: 15px; color: var(--muted); }
.flow-chain { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.flow-chain span { padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--navy-700); background: var(--surface); }
.flow-chain span.is-ai { color: var(--navy-950); background: var(--gradient); }
.flow-chain i { display: inline-flex; color: var(--blue); }
.flow-chain i .icon { width: 14px; height: 14px; }

/* KI-Termin-Agent */
.lead-muted { margin-bottom: 28px; font-size: 18px; color: var(--muted); }
.agent-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.agent-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.agent-steps h3 { margin-bottom: 4px; font-size: 18px; }
.agent-steps p { font-size: 15px; color: var(--muted); }
.mail-demo { justify-self: end; width: min(100%, 480px); padding: 20px; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: 0 30px 70px rgb(12 24 48 / 18%); }
.mail-demo__bar { display: flex; gap: 6px; align-items: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mail-demo__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mail-demo__bar strong { margin-left: 8px; font-size: 14px; }
.mail-demo__msg { margin-bottom: 12px; padding: 16px; border-radius: 16px; font-size: 15px; background: var(--surface); }
.mail-demo__msg--ai { margin-left: 28px; border: 1px solid rgb(243 148 33 / 40%); background: #fff8ec; }
.mail-demo__from { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.mail-demo__from b { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--blue), var(--navy-700)); }
.mail-demo__msg--ai .mail-demo__from b { color: var(--navy-950); background: var(--gradient); }
.mail-demo__from b .icon { width: 18px; height: 18px; }
.mail-demo__from strong { display: block; font-size: 14px; }
.mail-demo__from small { display: block; font-size: 12px; color: var(--muted); }
.mail-demo__slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mail-demo__slots span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 700; background: #fff; }
.mail-demo__slots .is-picked { color: #fff; border-color: #34a853; background: #34a853; }
.mail-demo__done { display: flex; gap: 10px; align-items: center; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #188038; background: #e6f4ea; }
.mail-demo__done .icon { flex: none; width: 18px; height: 18px; }

/* Branchenseite Bau: Suchanfragen-Stapel, Nutzenliste, Praxis-Karte */
.query-stack { display: grid; gap: 10px; margin: 18px 0 24px; }
.query-stack li { display: flex; gap: 10px; align-items: center; padding: 11px 16px; border-radius: 999px; font-size: 15px; color: #202124; background: #fff; }
.query-stack .icon { flex: none; width: 16px; height: 16px; }
.feature-list--plain { margin-top: 28px; }
.feature-list--plain li { padding: 20px; }
.proof-card { justify-self: end; width: min(100%, 500px); margin: 0; overflow: hidden; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); }
.proof-card > img { width: 100%; height: 260px; object-fit: cover; }
.proof-card figcaption { padding: 24px 26px 26px; }
.proof-card__tag { margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.proof-card blockquote { margin: 0 0 18px; font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 1.45; }
.proof-card__author { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.proof-card__author img { width: 40px; height: 40px; padding: 4px; border: 1px solid var(--line); border-radius: 50%; background: #fff; }
.proof-card__author strong { display: block; font-size: 15px; }
.proof-card__author small { display: block; font-size: 13px; color: var(--muted); }
.proof-card__link { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; text-decoration: none; color: var(--blue); }
.proof-card__link .icon { width: 16px; height: 16px; transition: transform .2s; }
.proof-card__link:hover .icon { transform: translateX(3px); }

/* Branchenseite Makler: Suchergebnis-Karte und Zielgruppen */
.serp-card { justify-self: end; width: min(100%, 460px); padding: 22px; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: #fff; box-shadow: 0 30px 70px rgb(12 24 48 / 14%); }
.serp-card__search { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; box-shadow: 0 1px 6px rgb(32 33 36 / 10%); }
.serp-card__search .icon { flex: none; width: 18px; height: 18px; }
.serp-card__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.serp-card__list li, .serp-card__you { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface); }
.serp-card__list div, .serp-card__you div { min-width: 0; }
.serp-card small { display: block; font-size: 12px; color: #4d5156; }
.serp-card strong { display: block; overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: #1a0dab; }
.serp-card__pos { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-family: var(--font-head); font-size: 14px; font-weight: 800; color: #fff; background: #188038; }
.serp-card__divider { display: flex; gap: 10px; align-items: center; margin: 16px 0; font-size: 13px; color: var(--muted); }
.serp-card__divider::after { content: ''; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px); }
.serp-card__divider span { padding: 3px 10px; border-radius: 999px; font-weight: 700; color: var(--ink); background: var(--surface); }
.serp-card__you { opacity: .55; border: 1px dashed #d93025; background: #fff; }
.serp-card__you .serp-card__pos { background: #d93025; }

.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; }
.offer--highlight { border-color: var(--yellow); box-shadow: 0 0 0 3px rgb(243 210 28 / 35%); }
.query-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.query-chips li { display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: #202124; background: #fff; }
.query-chips .icon { width: 14px; height: 14px; }

/* SEO Freelancer: freigestelltes Porträt, Links in Leistungskarten */
.portrait--cutout { aspect-ratio: 700 / 868; overflow: hidden; background: radial-gradient(120% 80% at 50% 100%, rgb(243 210 28 / 28%), transparent 60%), linear-gradient(160deg, var(--navy-700), var(--navy-900)); }
.portrait--cutout img { object-fit: contain; object-position: bottom; }
.offer__link { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--blue); }
.offer__link .icon { width: 16px; height: 16px; transition: transform .2s; }
.offer__link:hover .icon { transform: translateX(3px); }
.price-hero__note { margin: 22px 0 0; font-size: 14px; color: var(--on-dark-muted); }
.price-hero__note a { color: var(--blue-300); }

/* Rechtliche Seiten (Impressum, Datenschutz) */
.page-hero--legal h1 { margin-top: 8px; overflow-wrap: break-word; }
.page-hero--legal .hero__lead { margin: 12px 0 0; }
.legal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.page-hero--legal .container, .legal__grid { width: min(960px, 100% - 2 * var(--gutter)); }
.legal__card { padding: 28px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: #fff; }
.legal__card--wide { grid-column: 1 / -1; }
.legal__card h2 { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; font-size: 19px; }
.legal__card h2 .icon { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; color: var(--blue); background: rgb(22 143 209 / 10%); }
.legal__card p { color: #3d475c; line-height: 1.75; }
.legal__card a, .legal__more a { color: var(--blue); }
.legal__more { grid-column: 1 / -1; margin: 8px 0 0; color: var(--muted); }

/* Blogartikel */
.article-hero { padding-bottom: clamp(140px, 16vw, 220px); }
.article-hero__inner { width: min(1080px, 100% - 2 * var(--gutter)); }
.article-hero__inner > h1, .article-hero__lead { max-width: 860px; }
.article-hero__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 16px; }
.article-hero__cats span { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--navy-950); background: var(--yellow); }
.article-hero h1 { font-size: clamp(30px, 3.8vw, 50px); }
.article-hero__lead { margin: 18px 0 0; font-size: 19px; line-height: 1.6; color: var(--on-dark-muted); }
.article-meta { display: flex; gap: 14px; align-items: center; margin-top: 28px; font-size: 14px; color: var(--on-dark-muted); }
.article-meta img { width: 48px; height: 48px; border: 2px solid var(--yellow); border-radius: 50%; object-fit: cover; object-position: top; background: #857a7c; }
.article-meta__author { display: block; font-weight: 700; text-decoration: none; color: #fff; }
.article-meta__author:hover { color: var(--yellow); }
.article { display: flow-root; padding-top: 0; }
.article-cover { width: min(1080px, 100%); margin: clamp(-200px, -14vw, -120px) auto clamp(40px, 5vw, 64px); }
.article-cover img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--shadow-lg); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 5vw, 72px); align-items: start; width: min(1080px, 100%); margin-inline: auto; }
.article__body { font-size: 17px; }
.article__body > * + * { margin-top: 18px; }
.article__body h2 { margin: 48px 0 16px; font-size: clamp(24px, 2.4vw, 30px); scroll-margin-top: calc(var(--header-h) + 24px); }
.article__body p { line-height: 1.8; }
.article__body ul:not(.checklist), .article__body ol:not(.setting-list) { padding-left: 22px; color: var(--muted); }
.article__body li { margin-top: 8px; line-height: 1.7; }
.article__body figure { margin: 32px 0; }
.article__body figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 16px; }
.article__body figcaption { margin-top: 10px; font-size: 14px; text-align: center; color: var(--muted); }
.checklist--article { gap: 12px; margin: 22px 0; font-size: 16px; }
.checklist--article li { align-items: flex-start; }
.setting-list { display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none; counter-reset: setting; }
.setting-list li { position: relative; display: grid; gap: 4px; padding: 18px 20px 18px 66px; border: 1px solid var(--line); border-radius: 16px; background: #fff; counter-increment: setting; }
.setting-list li::before { content: counter(setting); position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-family: var(--font-head); font-weight: 800; color: var(--navy-950); background: var(--gradient); }
.setting-list strong { font-family: var(--font-head); font-size: 17px; }
.setting-list span { font-size: 15px; line-height: 1.7; color: var(--muted); }
.callout { margin: 28px 0; padding: 20px 22px; border-left: 4px solid var(--blue); border-radius: 0 14px 14px 0; background: rgb(22 143 209 / 8%); }
.callout p { margin: 0; color: #3d475c; }
.callout--warn { border-color: var(--orange); background: rgb(243 148 33 / 10%); }
.article-faq { margin-top: 56px; }
.article-faq h2 { margin-bottom: 18px; font-size: clamp(24px, 2.4vw, 30px); scroll-margin-top: calc(var(--header-h) + 24px); }
.article-faq details { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.article-faq details + details { margin-top: 10px; }
.article-faq summary { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 18px 20px; font-family: var(--font-head); font-weight: 700; cursor: pointer; list-style: none; }
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary .icon { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; color: var(--navy-950); background: var(--yellow); transition: transform .2s; }
.article-faq details[open] summary .icon { transform: rotate(45deg); }
.article-faq details p { margin: 0; padding: 0 20px 20px; line-height: 1.75; color: var(--muted); }
.author-box { display: flex; gap: 22px; align-items: flex-start; margin-top: 48px; padding: 26px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); }
.author-box img { flex: none; width: 96px; height: 96px; border: 3px solid var(--yellow); border-radius: 50%; object-fit: cover; object-position: top; background: #857a7c; }
.author-box__label { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.author-box__name { margin: 0 0 8px; font-family: var(--font-head); font-size: 20px; font-weight: 700; }
.author-box p:not([class]) { font-size: 15px; color: var(--on-dark-muted); }
.author-box a { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-weight: 700; text-decoration: none; color: var(--yellow); }
.author-box a .icon { width: 16px; height: 16px; }
.article-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
.toc { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.toc__title { margin-bottom: 12px; font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.toc ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; line-height: 1.4; text-decoration: none; color: var(--muted); transition: background-color .2s, color .2s; }
.toc a::before { content: counter(toc); flex: none; font-weight: 700; color: var(--blue); }
.toc a:hover, .toc a.is-active { color: var(--ink); background: var(--surface); }

/* Stadtseiten: Gründe als Raster, Case-Karte links */
.feature-list--grid { grid-template-columns: 1fr 1fr; gap: 20px; }
.proof-card--left { justify-self: start; }

/* CTA-Banner */
.cta-section:not(.cta-section--spaced) { padding-top: 0; }
.cta-section--spaced + .section--light { padding-top: 0; }
.cta-banner { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 36px; align-items: center; overflow: hidden; padding: 40px 48px 40px 36px; border-radius: 26px; color: #fff; background: radial-gradient(600px 300px at 100% 0%, rgb(243 210 28 / 20%), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgb(22 143 209 / 25%), transparent 60%), linear-gradient(135deg, var(--navy-800), var(--navy-950)); box-shadow: var(--shadow-lg); }
.cta-banner::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.cta-banner > * { position: relative; }
.cta-banner__photo { align-self: end; margin: 0 0 -40px; }
.cta-banner__photo img { width: 170px; height: auto; filter: drop-shadow(0 12px 30px rgb(0 0 0 / 35%)); }
.cta-banner .eyebrow { margin-bottom: 10px; color: var(--yellow); }
.cta-banner h2 { margin-bottom: 10px; font-size: clamp(26px, 2.6vw, 34px); }
.cta-banner__copy > p:not(.eyebrow) { max-width: 560px; color: var(--on-dark-muted); }
.cta-banner__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; }
.cta-banner__trust li { display: inline-flex; gap: 8px; align-items: center; }
.cta-banner__trust .icon { width: 16px; height: 16px; color: var(--yellow); }
.cta-banner__actions { display: grid; gap: 12px; }

/* Case Study: Belege (Screenshots) und Kundenstimme */
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.evidence { display: flex; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.evidence > a { display: block; overflow: hidden; background: #202124; }
.evidence img { width: 100%; height: auto; transition: transform .5s var(--ease); }
.evidence > a:hover img { transform: scale(1.02); }
.evidence figcaption { display: grid; gap: 6px; padding: 20px 22px 24px; font-size: 15px; color: var(--muted); }
.evidence figcaption strong { font-family: var(--font-head); font-size: 17px; color: var(--ink); }
.evidence__tag { display: inline-flex; gap: 6px; align-items: center; justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--navy-950); background: var(--gradient); }
.evidence__tag .icon { width: 13px; height: 13px; }
.evidence--dark > a { background: #f1f3f8; }
.section:not(.section--light) .case-card { color: var(--ink); }
.client-quote { display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; align-items: start; max-width: 920px; margin: 0 auto; padding: 36px 40px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.client-quote img { grid-row: span 2; width: 80px; height: 80px; padding: 8px; border: 1px solid var(--line); border-radius: 50%; object-fit: contain; }
.client-quote blockquote { margin: 0; font-family: var(--font-head); font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; line-height: 1.5; color: var(--ink); }
.client-quote figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 15px; }
.client-quote figcaption span { display: inline-flex; gap: 2px; align-items: center; color: var(--muted); }
.client-quote figcaption .icon { width: 15px; height: 15px; color: #fbbc04; fill: currentColor; }

/* Case Study FensterFix */
.offer-grid--3 { grid-template-columns: repeat(3, 1fr); }
.site-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.evidence--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border-color: rgb(243 148 33 / 45%); box-shadow: 0 0 0 3px rgb(243 210 28 / 25%), var(--shadow); }
.evidence--wide figcaption { align-content: center; gap: 10px; padding: 28px 30px; }
.evidence--wide figcaption strong { font-size: 20px; }
.evidence--wide figcaption b { color: var(--ink); }
.feature-list--3 { grid-template-columns: repeat(3, 1fr); }
.feature-list--3 li { flex-direction: column; }
.city-result dt small { font-size: 12px; opacity: .75; }

/* Geräte-Mockups (Desktop-Browser + Smartphone) */
.device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 40px; margin: 0; padding: 0; list-style: none; }
.device-shot { position: relative; padding-right: 64px; padding-bottom: 28px; }
.device-shot--solo { padding-right: 0; padding-bottom: 0; }
.device-shot__browser { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 24px 50px rgb(12 24 48 / 14%); transition: transform .3s var(--ease); }
.device-shot__browser:hover { transform: translateY(-3px); }
.device-shot__bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #f1f3f8; }
.device-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5dbe6; }
.device-shot__bar i:first-child { background: #ff6159; }
.device-shot__bar i:nth-child(2) { background: #ffbd2e; }
.device-shot__bar i:nth-child(3) { background: #28c941; }
.device-shot__bar span { flex: 1; margin-left: 10px; padding: 3px 12px; border-radius: 999px; font-size: 12px; color: var(--muted); background: #fff; }
.device-shot__browser img { display: block; width: 100%; height: auto; }
.device-shot__phone { position: absolute; right: 0; bottom: 0; width: 26%; max-width: 150px; overflow: hidden; padding: 6px; border-radius: 26px; background: #0c1830; box-shadow: 0 20px 40px rgb(12 24 48 / 35%); transition: transform .3s var(--ease); }
.device-shot__phone:hover { transform: translateY(-3px); }
.device-shot__phone img { display: block; width: 100%; height: auto; border-radius: 20px; }
.device-shot__caption { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 18px 0 0; }
.device-shot__caption strong { font-family: var(--font-head); font-size: 18px; color: var(--ink); }
.device-shot__caption a { display: inline-flex; gap: 4px; align-items: center; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--blue); }
.device-shot__caption .icon { width: 14px; height: 14px; }
.device-shot__text { max-width: 74%; margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.device-shot__caption { max-width: 76%; }
.device-shot__text a { color: var(--blue); }
.section:not(.section--light) .device-shot__caption strong { color: #fff; }
.section:not(.section--light) .device-shot__caption a { color: var(--blue-300); }
.section:not(.section--light) .device-shot__text { color: var(--on-dark-muted); }
.section:not(.section--light) .device-shot__browser { border-color: var(--line-dark); }
.case-card__device { position: relative; padding: 18px 34px 22px 16px; background: linear-gradient(160deg, #eef2f9, #dfe6f2); }
.case-card__browser { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgb(12 24 48 / 16%); }
.case-card__browser .device-shot__bar { padding: 5px 8px; gap: 4px; }
.case-card__browser .device-shot__bar i { width: 6px; height: 6px; }
.case-card__browser .device-shot__bar span { margin-left: 6px; padding: 1px 8px; font-size: 9px; }
.case-card__device img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; background: none; }
.case-card__phone { position: absolute; right: 10px; bottom: 10px; width: 27%; overflow: hidden; padding: 3px; border-radius: 12px; background: #0c1830; box-shadow: 0 10px 20px rgb(12 24 48 / 35%); }
.case-card__phone img { border-radius: 9px; }
.case-card__more { margin-top: 16px; }
.case-row > .case-card__device { align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-radius: 14px; }
.case-row:nth-child(even) > .case-card__device { order: 2; }
.case-row .case-card__device img { aspect-ratio: auto; object-fit: initial; border-radius: 0; background: none; }
.case-row .case-card__phone img { border-radius: 9px; }
.proof-card > .case-card__device { padding: 22px 40px 26px 20px; }
.results__figure > .case-card__device { border-radius: 12px; }
.results__figure .case-card__device img { border-radius: 0; }
.results__figure .case-card__phone img { border-radius: 9px; }

/* Einwilligungs-Banner (unten links) */
.consent { position: fixed; z-index: 80; left: 20px; bottom: 20px; width: min(440px, calc(100vw - 32px)); }
.consent[hidden], .consent-fab[hidden] { display: none; }
.consent__box { max-height: calc(100vh - 40px); overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 24px 60px rgb(5 15 34 / 35%); }
.consent__eyebrow { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.consent__eyebrow .icon { width: 16px; height: 16px; }
.consent__title { margin: 0 0 8px; font-size: 20px; }
.consent__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.consent__details { display: grid; gap: 10px; margin-top: 16px; }
.consent__row { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.consent__row div { display: grid; gap: 2px; }
.consent__row strong { font-size: 14px; }
.consent__row span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.consent__always { flex: none; font-size: 12px !important; font-weight: 700; color: #188038 !important; }
.consent__switch { position: relative; flex: none; width: 44px; height: 24px; }
.consent__switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.consent__switch i { position: absolute; inset: 0; border-radius: 999px; background: #c9d2e0; transition: background-color .2s; }
.consent__switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform .2s; }
.consent__switch input:checked + i { background: var(--blue); }
.consent__switch input:checked + i::after { transform: translateX(20px); }
.consent__switch input:focus-visible + i { outline: 3px solid var(--yellow); outline-offset: 2px; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.consent__actions .btn { justify-content: center; min-height: 46px; padding: 10px 14px; font-size: 14px; }
.consent__more { grid-column: 1 / -1; padding: 8px; border: 0; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; color: var(--ink); background: none; cursor: pointer; }
.consent__actions [data-consent-save] { grid-column: 1 / -1; }
.consent__links { display: flex; gap: 16px; justify-content: center; margin: 12px 0 0; font-size: 12px; }
.consent__links a { color: var(--muted); }
.consent-fab { position: fixed; z-index: 79; left: 16px; bottom: 16px; display: inline-flex; gap: 8px; align-items: center; height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--line-dark); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--navy-800); box-shadow: 0 8px 20px rgb(5 15 34 / 30%); cursor: pointer; transition: transform .2s; }
.consent-fab:hover { transform: translateY(-2px); }
.consent-fab .icon { width: 18px; height: 18px; color: var(--yellow); }
.site-footer__consent { padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.site-footer__consent:hover { text-decoration: underline; }

/* Datenschutzerklärung */
.legal__doc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; width: min(1080px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.legal__toc { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.legal__toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal__toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 1.4; text-decoration: none; color: var(--muted); }
.legal__toc a:hover { color: var(--ink); background: var(--surface); }
.legal__toc .btn { gap: 8px; font-size: 14px; }
.legal__toc .btn .icon { width: 16px; height: 16px; }
.legal__text { max-width: 760px; font-size: 16px; }
.legal__text h2 { margin: 48px 0 14px; padding-top: 8px; font-size: clamp(22px, 2.2vw, 27px); scroll-margin-top: calc(var(--header-h) + 24px); }
.legal__text h2:first-child { margin-top: 0; }
.legal__text h3 { margin: 26px 0 8px; font-size: 18px; }
.legal__text p, .legal__text li { line-height: 1.75; }
.legal__text ul { display: grid; gap: 6px; padding-left: 22px; color: var(--muted); }
.legal__text code { padding: 2px 6px; border-radius: 6px; font-size: 13px; background: var(--surface); }
.legal__text .btn .icon { width: 18px; height: 18px; }
.legal__address { padding: 18px 20px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: #fff; }
.legal__table { display: grid; margin: 18px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: 14px; }
.legal__tr { display: grid; grid-template-columns: 130px 1fr 190px; gap: 16px; padding: 14px 16px; }
.legal__tr + .legal__tr { border-top: 1px solid var(--line); }
.legal__tr span { color: var(--muted); line-height: 1.55; }
.legal__tr--head { font-weight: 700; background: var(--surface); }
.legal__tr--head span { color: var(--ink); }

/* Vergleichstabelle in Blogartikeln */
.article__main { min-width: 0; }
.table-wrap { max-width: 100%; margin: 24px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.table-wrap th, .table-wrap td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--muted); }
.table-wrap th { font-family: var(--font-head); font-size: 14px; color: var(--ink); background: var(--surface); }
.table-wrap td:first-child { font-weight: 600; color: var(--ink); }
.table-wrap tr:last-child td { border-bottom: 0; }

/* Kurzantwort-Box (AEO): direkte Antwort für Google-Snippets und KI-Suchen */
.answer-box { margin-bottom: clamp(48px, 6vw, 80px); padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-left: 5px solid var(--yellow); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.answer-box .eyebrow { margin-bottom: 10px; color: var(--blue); }
.answer-box h2 { margin-bottom: 14px; font-size: clamp(22px, 2.6vw, 30px); }
.answer-box__text { margin: 0 0 22px; font-size: 18px; line-height: 1.65; color: var(--ink); }
.answer-box__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.answer-box__facts div { padding: 14px 16px; border-radius: 12px; background: var(--surface); }
.answer-box__facts dt { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.answer-box__facts dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }

/* Website mit KI: Illustration im Hero (Beschreibung wird zur Website) */
.ki-mock { position: relative; justify-self: end; width: min(100%, 520px); padding: 0 0 24px 28px; }
.ki-mock::before { content: ''; position: absolute; inset: 70px -22px 0 50px; z-index: -1; border: 1.5px solid rgb(92 192 242 / 40%); border-radius: 22px; }
.ki-mock__prompt { position: relative; z-index: 2; display: flex; gap: 12px; align-items: flex-start; width: 86%; margin: 0 0 -12px -28px; padding: 16px 18px; border-radius: 18px 18px 18px 6px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); animation: float 7s ease-in-out infinite; }
.ki-mock__prompt p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ki-mock__prompt strong { color: var(--ink); }
.ki-mock__avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--navy-950); background: var(--gradient); }
.ki-mock__avatar .icon { width: 20px; height: 20px; }
.ki-mock__browser { overflow: hidden; border: 1px solid var(--line-dark); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); }
.ki-mock__bar { display: flex; gap: 6px; align-items: center; padding: 12px 14px; background: #eef1f6; }
.ki-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ki-mock__bar i:nth-child(2) { background: #febc2e; }
.ki-mock__bar i:nth-child(3) { background: #28c840; }
.ki-mock__bar span { margin-left: 10px; padding: 4px 12px; border-radius: 999px; font-size: 12px; color: var(--muted); background: #fff; }
.ki-mock__page { padding: 50px 22px 24px; }
.ki-mock__nav { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.ki-mock__nav b { width: 70px; height: 12px; margin-right: auto; border-radius: 6px; background: var(--navy-700); }
.ki-mock__nav span { width: 38px; height: 8px; border-radius: 4px; background: var(--line); }
.ki-mock__hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; margin-bottom: 20px; }
.ki-mock__hero strong { display: block; margin-bottom: 8px; font-family: var(--font-head); font-size: 20px; line-height: 1.2; color: var(--ink); }
.ki-mock__hero small { display: block; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.ki-mock__hero em { display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-style: normal; font-weight: 700; color: var(--navy-950); background: var(--gradient); }
.ki-mock__img { aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(135deg, #cfe6f5, #f6e7b8); }
.ki-mock__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ki-mock__cards span { height: 54px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ki-mock__check { right: -18px; top: 46%; }
.ki-mock__price { left: -6px; bottom: -4px; animation-delay: -3s; }

/* Danke-Popup nach dem Absenden */
.thanks { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); text-align: center; }
.thanks[open] { display: block; padding: 40px 32px 28px; animation: thanks-in .35s var(--ease); }
.thanks::backdrop { background: rgb(5 15 34 / 72%); backdrop-filter: blur(4px); }
.thanks::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--gradient); }
.thanks__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface); cursor: pointer; transition: background .2s, color .2s; }
.thanks__close:hover { color: var(--ink); background: var(--line); }
.thanks__close .icon { width: 18px; height: 18px; }
.thanks__badge { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; color: var(--navy-900); background: var(--gradient); box-shadow: 0 0 0 10px rgb(243 210 28 / 18%); animation: thanks-pop .5s .15s var(--ease) both; }
.thanks__badge .icon { width: 34px; height: 34px; stroke-width: 2.5; }
.thanks .eyebrow { justify-content: center; margin-bottom: 8px; color: var(--blue); }
.thanks__title { margin: 0 0 12px; font-size: clamp(24px, 5vw, 30px); line-height: 1.15; }
.thanks__text { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.thanks__text strong { color: var(--ink); }
.thanks__mail { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; text-align: left; color: var(--ink); background: #eaf5fc; }
.thanks__mail .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--blue); }
.thanks__mail strong { overflow-wrap: anywhere; }
.thanks__person { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 0 0 22px; padding-top: 18px; border-top: 1px solid var(--line); text-align: left; }
.thanks__person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.thanks__person strong { display: block; font-family: var(--font-head); font-size: 16px; }
.thanks__person span { font-size: 14px; color: var(--muted); }
.thanks__actions { display: grid; gap: 14px; }
.thanks__phone { display: inline-flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.thanks__phone:hover { color: var(--blue); }
.thanks__phone .icon { width: 16px; height: 16px; }
@keyframes thanks-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes thanks-pop { from { opacity: 0; transform: scale(.5); } }

/* Branchen auf dunklem Hintergrund */
.industries--dark { background: radial-gradient(700px 400px at 100% 100%, rgb(22 143 209 / 16%), transparent 60%), var(--navy-900); }
.industries--dark .industry-card { color: var(--ink); border-color: transparent; }

/* Städte-Chips auf hellem Hintergrund */
.chips--on-light .chip { color: var(--ink); border-color: var(--line); background: #fff; }
.chips--on-light .chip .icon { color: var(--blue); }
.chips--on-light .chip:hover { color: var(--navy-950); border-color: var(--yellow); background: var(--yellow); }
.chips--on-light .chip:hover .icon { color: inherit; }

/* Blog auf dunklem Hintergrund */
.blog-teaser--dark { background: linear-gradient(180deg, var(--navy-900), var(--navy-800)); }
.blog-teaser--dark .post-card { border-color: transparent; color: var(--ink); }

/* Vergleichstabelle */
.compare { overflow: hidden; border: 1px solid var(--line-dark); border-radius: 20px; background: rgb(255 255 255 / 3%); }
.compare__row { display: grid; grid-template-columns: .8fr 1.2fr 1fr; }
.compare__row > span { display: flex; gap: 8px; align-items: flex-start; padding: 14px 16px; border-top: 1px solid var(--line-dark); font-size: 15px; color: var(--on-dark-muted); }
.compare__row > span:first-child { font-weight: 600; color: #fff; }
.compare__row--head > span { border-top: 0; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: #fff; }
.compare__me { color: #fff !important; background: rgb(243 210 28 / 8%); }
.compare__row--head .compare__me { color: var(--navy-950) !important; background: var(--gradient); }
.compare__me .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; padding: 3px; border-radius: 50%; color: var(--navy-950); background: var(--yellow); stroke-width: 3; }

/* Ablauf auf dunklem Hintergrund */
.steps--dark .step { color: #fff; border-color: var(--line-dark); background: rgb(255 255 255 / 4%); }
.steps--dark .step p { color: var(--on-dark-muted); }

/* 10 · Responsive -------------------------------------------------------------- */
@media (max-width: 1180px) {
  .service-grid, .case-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .nav__link { padding-inline: 10px; }
  .deliverables, .steps, .task-grid, .effect-grid, .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__list li:nth-child(3) { border-left: 0; }
  .facts__list li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-row, .case-row:nth-child(even) { grid-template-columns: 260px minmax(0, 1fr); }
  .case-row:nth-child(even) img, .case-row:nth-child(even) > .case-card__device { order: 0; }
  .service-row { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); }
  .service-row__cta { grid-column: 2 / -1; justify-self: start; }
  .step::after { display: none; }
}

@media (max-width: 1080px) {
  :root { --header-h: 72px; }
  .topbar .topbar__rating { display: none; }
  .brand img { width: 150px; }
  .site-header__cta { margin-left: auto; }
  .menu-toggle { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line-dark); border-radius: 10px; background: rgb(255 255 255 / 5%); cursor: pointer; }
  .menu-toggle .icon { width: 22px; height: 22px; }
  .menu-toggle__close, .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

  .nav { position: fixed; inset: var(--nav-top, var(--header-h)) 0 0; z-index: 49; display: flex; flex-direction: column; margin: 0; padding: 16px var(--gutter) 32px; overflow-y: auto; overscroll-behavior: contain; background: var(--navy-900); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s var(--ease); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line-dark); }
  .nav__link { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 18px; border-radius: 0; }
  .nav__link:hover, .nav__link[aria-expanded="true"] { background: none; }
  .mega { position: static; padding: 0 0 16px; color: inherit; background: none; border: 0; box-shadow: none; }
  .mega .container { width: 100%; }
  .mega__inner { grid-template-columns: 1fr; gap: 24px; }
  .mega__title { color: var(--on-dark-muted); }
  .mega__title a { color: var(--yellow); }
  .mega__services { grid-template-columns: 1fr; }
  .mega__services a { padding: 10px 4px; }
  .mega__services a:hover { background: rgb(255 255 255 / 5%); }
  .mega__services small { display: none; }
  .mega__icon { width: 34px; height: 34px; color: var(--blue-300); background: rgb(92 192 242 / 10%); }
  .mega__links a:hover { background: none; color: var(--yellow); }
  .nav__mobile-contact { display: grid; gap: 12px; margin-top: 28px; }
  body.nav-open { overflow: hidden; }

  .hero__grid, .results__grid, .automation__grid, .about__grid, .faq__grid, .contact__grid, .reach__grid { grid-template-columns: 1fr; }
  .hero__visual { justify-self: center; width: min(100%, 440px); margin-top: 24px; }
  .about__media, .faq__intro { position: static; }
  .about__media { max-width: 560px; }
  .section__head--split { grid-template-columns: 1fr; }
  .rating-badge { justify-self: start; }
  .reason-grid { grid-template-columns: 1fr 1fr; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post-grid > :last-child { display: none; }
  .clients__inner { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .page-hero__grid, .split, .split--center { grid-template-columns: 1fr; }
  .local-pack, .gbp-card, .photo-hero, .ai-chat, .quicknav, .hero-stats, .case-hero__media, .device-hero { justify-self: center; margin-top: 16px; }
  .combo { grid-template-columns: 1fr; }
  .phone-fan { justify-self: center; margin-top: 24px; }
  .audit-card, .report-card, .flow-card, .mail-demo, .proof-card, .serp-card, .case-hero__device { justify-self: center; margin-top: 16px; }
  .article-layout, .evidence-grid, .evidence--wide, .legal__doc { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
  .legal__tr { grid-template-columns: 1fr; gap: 4px; }
  .legal__tr--head { display: none; }
  .cta-banner { grid-template-columns: 1fr; padding: 36px 28px; text-align: left; }
  .cta-banner__photo { display: none; }
  .cta-banner__actions { grid-auto-flow: column; justify-content: start; }
  .article-side { position: static; }
  .duo-grid, .legal__grid, .feature-list--grid, .offer-grid--3, .device-grid { grid-template-columns: 1fr; }
  .device-shot { padding-right: 40px; }
  .device-shot--solo { padding-right: 0; }
  .device-shot__phone { width: 30%; border-radius: 18px; padding: 4px; }
  .device-shot__phone img { border-radius: 14px; }
  .client-quote { grid-template-columns: 1fr; padding: 26px 22px; }
  .client-quote img { grid-row: auto; width: 64px; height: 64px; }
  .cta-banner { padding: 28px 20px; }
  .cta-banner__actions { grid-auto-flow: row; }
  .cta-banner__actions .btn { width: 100%; }
  .author-box { flex-direction: column; }
  .setting-list li { padding-left: 20px; padding-top: 60px; }
  .article__body { font-size: 16px; }
  .tool-strip__inner { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .tool-strip__list { justify-content: center; }
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .price-hero, .combo-links { grid-template-columns: 1fr; }
  .market { grid-template-columns: 1fr; }
  .shot-grid img { height: 420px; }
  .deliverables--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combo__price { text-align: left; }
  .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-hero__grid { grid-template-columns: 1fr; }
  .calc-hero__person { display: none; }
  .side-intro { position: static; }
  .steps--3 { grid-template-columns: 1fr; }
  .article-grid, .case-flow, .benefit-grid--3 { grid-template-columns: 1fr; }
  .case-flow__step:not(:last-child)::after { top: auto; bottom: -22px; right: 50%; transform: translateX(50%) rotate(135deg) scale(.6); }
  .side-card { position: static; }
  .pricing { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 28px; }
  .price-card--featured { transform: none; }
  .pillars { position: static; }
  .service-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 16px; padding-bottom: 68px; }
  .topbar__inner { justify-content: space-between; gap: 8px 16px; }
  .topbar__location, .topbar a[href^="mailto"] { display: none; }
  .site-header__cta { display: none; }
  .menu-toggle { margin-left: auto; }
  .nav { inset-block-end: 0; }
  .hero__actions .btn { width: 100%; }
  .hero__trust { gap: 10px 20px; font-size: 14px; }
  .outline-word--seo { left: -6px; }
  .outline-word--geo { right: -6px; }
  .outline-word--local { left: -8px; }
  .float-card--calls { left: -8px; }
  .float-card--maps { right: 8px; }
  .float-card { padding: 10px 14px 10px 10px; }
  .float-card strong { font-size: 17px; }
  .stats, .service-grid, .service-grid--3, .case-grid, .reason-grid, .post-grid, .about__creds, .deliverables, .steps, .benefit-grid { grid-template-columns: 1fr; }
  .answer-box__facts { grid-template-columns: 1fr; }
  .service-grid__wide .service-card { display: flex; padding: 28px 24px 24px; }
  .service-grid__wide .service-card__icon { margin-bottom: 22px; }
  .service-grid__wide .service-card h3 { margin-bottom: 10px; }
  .service-grid__wide .service-card__more { margin-top: 18px; }
  .ki-mock { justify-self: center; padding-left: 16px; }
  .ki-mock__prompt { width: 92%; margin-left: -10px; }
  .ki-mock__check { right: -6px; }
  .ki-mock__hero strong { font-size: 16px; }
  .float-card--pack { right: -6px; top: 84px; }
  .float-card--gbp { left: -6px; top: 18px; }
  .gbp-card::before { inset: 12px -10px -12px 12px; }
  .task-grid, .effect-grid, .offer-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .deliverables--2, .certs--large { grid-template-columns: 1fr; }
  .blog-hero { flex-direction: column; align-items: flex-start; }
  .blog-hero__count { display: none; }
  .featured-post { grid-template-columns: 1fr; padding: 10px; }
  .featured-post__body { padding: 8px 8px 12px; }
  .featured-post .btn { width: 100%; }
  .filter { flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; }
  .filter__btn { flex: none; }
  .facts__list li { padding: 20px 12px; }
  .tool-grid { gap: 10px; }
  .ref-grid, .steps--6, .deliverables--3 { grid-template-columns: 1fr; }
  .phone-fan { height: 400px; }
  .market { padding: 20px; }
  .usecase-grid { grid-template-columns: 1fr; }
  .proof-card > img { height: 200px; }
  .proof-card figcaption { padding: 20px; }
  .flow-card, .mail-demo { padding: 16px; }
  .flow-card__nodes em { display: none; }
  .mail-demo__msg--ai { margin-left: 12px; }
  .report-card { padding: 18px; }
  .report-card__kpis strong { font-size: 17px; }
  .price-hero__cta .btn { width: 100%; }
  .market dl div { flex-direction: column; gap: 2px; }
  .market dd { text-align: left; }
  .phone-fan__item { width: 170px; padding: 6px; border-radius: 24px; }
  .phone-fan__item img { height: 320px; border-radius: 18px; }
  .phone-fan__item figcaption { font-size: 11px; }
  .shot-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .combo { padding: 22px; }
  .combo .btn { width: 100%; }
  .float-card--speed { left: -6px; }
  .calc__options--grid, .calc__prices, .calc__included { grid-template-columns: 1fr; }
  .calc__cta .btn { width: 100%; }
  .case-row, .case-row:nth-child(even) { grid-template-columns: 1fr; padding: 10px; }
  .case-row__body { padding: 4px 8px 12px; }
  .case-row .btn { width: 100%; }
  .city-results { grid-template-columns: 1fr; }
  .site-gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
  .site-gallery span { font-size: 13px; }
  .hero-stats li { padding: 16px; }
  .review-cta { padding: 20px; }
  .review-cta .btn { width: 100%; }
  .service-row { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .service-row__head { flex-direction: row; align-items: center; }
  .service-row__cta { grid-column: auto; width: 100%; white-space: normal; }
  .fit { grid-template-columns: 1fr; padding: 16px 18px; }
  .fit__answer { white-space: normal; }
  .tool-card { padding: 12px 12px 16px; }
  .tool-card__logo { height: 80px; margin-bottom: 14px; padding: 10px; }
  .tool-card__logo img { max-height: 52px; }
  .tool-card h3 { font-size: 15px; }
  .tool-card p { font-size: 13px; }
  .industry-card { padding: 14px; font-size: 14px; }
  .industry-card .icon { width: 28px; height: 28px; padding: 6px; }
  .call-toast { left: -6px; top: 16px; }
  .float-card--photo { right: -6px; bottom: 24px; }
  .photo-hero::before { inset: 12px -10px -12px 12px; }
  .queries, .trades { padding: 20px; }
  .ai-chat::before { inset: 12px -10px -12px 12px; }
  .ai-chat figcaption { left: -6px; bottom: -34px; }
  .ai-chat__window { padding: 16px; font-size: 13px; }
  .geo-grid { padding: 12px; }
  .compare__row { grid-template-columns: 1fr 1fr; }
  .compare__row > span:first-child { grid-column: 1 / -1; padding-bottom: 0; border-top: 1px solid var(--line-dark); }
  .compare__row > span:not(:first-child) { border-top: 0; font-size: 14px; }
  .compare__row--head > span:first-child { display: none; }
  .local-pack::before { inset: 12px -10px -12px 12px; }
  .note-box { padding: 22px; }
  .note-box .btn { width: 100%; }
  .post-grid > :last-child { display: block; }
  .ai-proof__cta { padding: 22px; }
  .ai-proof__cta .btn { width: 100%; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .accordion__item summary { padding: 18px; font-size: 16px; }
  .accordion__body { padding: 0 18px 18px; }

  .consent { left: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
  .consent__box { max-height: calc(100vh - 110px); padding: 20px; }
  .consent-fab { left: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); width: 44px; padding: 0; justify-content: center; }
  .consent-fab span { display: none; }
  .action-bar { position: fixed; z-index: 45; inset: auto 0 0; display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgb(5 15 34 / 94%); backdrop-filter: blur(10px); border-top: 1px solid var(--line-dark); }
  .action-bar a { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 50px; border-radius: 10px; font-weight: 600; text-decoration: none; border: 1px solid var(--line-dark); }
  .action-bar__primary { color: var(--navy-950); background: var(--gradient); border: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee__group[aria-hidden] { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .topbar, .site-header, .action-bar, .carousel__controls, .form { display: none; }
  body { color: #000; background: #fff; }
}