/* TZ2 Livefassung blog-artikel (livefassung.py), Quellen in work/tz2-redesign-2026-11-04/site; Reihenfolge: /tz2.css, /heroes.css, /screens.css, /styles3.css, /v5.css, /home.css, /leistungen.css, /google-ads-hero.css, /leistungen-hero.css, /google-ads.css, /lehrbuch.css, /blog.css, /blog-hero.css, /blog-mobil.css, /blog-figuren.css, /mobil.css, /mobil-seiten.css */
/* --tz-Variablen aus css/site.css des Pakets (Datenschutz-Hinweis, Zone-Check-Hinweis, Zone-Check) */
:root {
  --tz-navy: #020A18;
  --tz-orange: #FC4C01;
  --tz-orange-action: #D64000;
  --tz-orange-ink: #C23A01;
  --tz-paper: #FFFFFF;
  --tz-stone: #F5F4F1;
  --tz-muted: #596270;
  --tz-line: #DDE2E9;
  --tz-blue: #315F9D;
  --tz-blue-surface: #F1F6FC;
  --tz-blue-line: #C5D6E9;
  --tz-peach-surface: #FFF0E8;
  --tz-peach-line: #F0C2AF;
  --tz-green: #0A7A54;

  /* auf Navy-Flächen */
  --tz-stage-ink: #E9E9E9;
  --tz-stage-ink-muted: #A9ADB5;
  --tz-stage-line: rgb(233 233 233 / 18%);
  --tz-stage-fill: rgb(233 233 233 / 6%);
  /* Audit 10/2026 D74: halbtransparente Linien und Flächen als Tokens statt Rohwerte */
  --tz-line-ink: rgb(2 10 24 / 10%);     /* Trennlinie auf getönter heller Fläche */
  --tz-stage-veil: rgb(2 10 24 / 55%);   /* dunkle Fläche auf Navy */

  /* Verläufe 1 und 4, nur als Hintergrund */
  --tz-g1-orange: #FC4C01;
  --tz-g1-light: #EBDAD2;
  --tz-g4-light: #FF9D6E;
  --tz-gradient-peach-glow: linear-gradient(135deg, #FFF0E8, #FFFFFF 80%);
  --tz-grid: linear-gradient(rgb(252 76 1 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(252 76 1 / 7%) 1px, transparent 1px);

  --tz-shadow-blue: 0 18px 48px rgb(37 73 120 / 8%);
  --tz-shadow-peach: 0 18px 48px rgb(82 47 30 / 7%);
  --tz-shadow-compact: 0 8px 24px rgb(21 37 57 / 4%);
  --tz-shadow-orange: 0 12px 28px rgb(252 76 1 / 28%);

  --tz-radius-pill: 999px;
  --tz-radius-compact: 14px;
  --tz-radius-panel: 24px;
  --tz-radius-surface: 32px;

  --tz-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --tz-font-body: 'Nunito', ui-sans-serif, system-ui, sans-serif;

  --tz-container: 1280px;
  --tz-gutter: clamp(20px, 5vw, 80px);
  --tz-inset: clamp(8px, 1.1vw, 16px);          /* Randabstand der runden Grossflächen */
  --tz-section: clamp(72px, 8.4vw, 120px);
  --tz-section-tight: clamp(48px, 5.6vw, 80px);

  --tz-h2: clamp(32px, 3.6vw, 52px);
  /* Audit 10/2026 D13: H2 der Schluss-Panels (Abschluss und Konversionsblock), 56 / 36 px */
  --tz-h2-final: clamp(36px, 4vw, 56px);

  /* Hero-Oberkante (Audit B1): alle Heros starten mit --tz-hero-top unter der
     Nav. Eine Brotkrume sitzt höher (--tz-hero-top-crumbs), danach folgt die
     Eyebrow mit --tz-crumbs-gap. Ergebnis bei 1440: Eyebrow 166 px ohne,
     208 px mit Brotkrume; bei 390: 106 und 150 px. */
  --tz-hero-top: clamp(48px, 5.6vw, 80px);
  --tz-hero-top-crumbs: clamp(36px, 4.6vw, 64px);
  --tz-crumbs-gap: 14px;

  /* H1 in zwei Stufen (Audit B4): Display für Heros, Text für Lesespalten */
  --tz-h1-display: clamp(38px, 5vw, 72px);
  --tz-h1-text: clamp(32px, 3.9vw, 56px);

  /* Funktionsfarben ausserhalb der Markenpalette (Audit C3) */
  --tz-green-dot: #22C08A;          /* Live-Punkt */
  --tz-error: #B42318;              /* Formularfehler: Text */
  --tz-error-surface: #FEF3F2;      /* Formularfehler: Fläche */
  --tz-error-line: #F3AEAA;         /* Formularfehler: Linie */
  --tz-duotone-shadow: #1B1919;     /* Grund hinter Duotone-Fotos */
  /* Audit 10/2026 D20: Warnfarbe für Statusangaben (KI-Check-Bericht) */
  --tz-warning: #854D0E;            /* Warnung: Text, 6.85:1 auf Weiss */
  --tz-warning-surface: #FFFBEB;    /* Warnung: Fläche */
  --tz-green-surface: #ECFDF3;      /* Erfolg: Fläche (Audit 10/2026 RB-10, Text --tz-green) */

  --tz-ease: cubic-bezier(.2, .6, .2, 1);
  --tz-ease-out: cubic-bezier(.16, 1, .3, 1);
  --tz-dur-fast: 180ms;
  --tz-dur-base: 300ms;
  --tz-dur-slow: 600ms;
}
/* /tz2.css */
/* TZ2, Neugestaltung Startseite thezone.ch. Hell, Menschen zuerst. Tokens aus brand.md §10. */

@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url("/assets/fonts/space-grotesk-500.woff2") format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url("/assets/fonts/space-grotesk-700.woff2") format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url("/assets/fonts/nunito-400.woff2") format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url("/assets/fonts/nunito-700.woff2") format('woff2'); }

:root {
  --orange: #FC4C01; --orange-ink: #C23A01; --orange-light: #FF9D6E;
  --black: #020A18; --white: #E9E9E9;
  --grey-ink: #6B6C6E; --gray-medium: #D9D9D6;
  --surface: #F4F4F5; --peach: #FFF0E8; --line: #E6E6E8;

  --f-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Nunito', ui-sans-serif, system-ui, sans-serif;

  --container: 1280px; --margin: 48px;
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 100px;
  --shadow-card: 0 10px 30px rgba(2,10,24,.06);
  --shadow-lift: 0 18px 44px rgba(2,10,24,.14);
  --shadow-orange: 0 12px 28px rgba(252,76,1,.28);
  --ease: cubic-bezier(.2,.6,.2,1); --fast: 180ms; --base: 300ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: #fff; color: var(--black); font: 400 1rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--orange); color: var(--black); padding: 10px 16px; border-radius: var(--r-pill); font: 700 14px var(--f-display); }
.skip:focus { left: 16px; }
main:focus { outline: none; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--margin); }

/* Type */
.display { font: 700 4.5rem/1.05 var(--f-display); letter-spacing: -0.03em; }
.h1 { font: 700 3.5rem/1.1 var(--f-display); letter-spacing: -0.02em; }
.h2 { font: 700 2rem/1.15 var(--f-display); letter-spacing: -0.01em; }
.eyebrow { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 16px; }
.hl { color: var(--orange); }
.lead { font: 400 1.125rem/1.7 var(--f-body); color: var(--grey-ink); max-width: 46ch; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 32px; border-radius: var(--r-pill); font: 700 1rem/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--base) var(--ease); }
.btn--sm { padding: 13px 20px; font-size: .8125rem; }
.btn--orange { background: var(--orange); color: var(--black); }
.btn--orange:hover { background: var(--black); color: #fff; box-shadow: var(--shadow-orange); }
.btn--line { color: var(--black); box-shadow: inset 0 0 0 1.5px var(--black); }
.btn--line:hover { background: var(--black); color: #fff; }
.link { display: inline-flex; align-items: center; gap: 8px; font: 700 .875rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding-bottom: 6px; border-bottom: 1.5px solid var(--orange); transition: color var(--fast) var(--ease); }
.link span { transition: transform var(--base) var(--ease); }
.link:hover { color: var(--orange-ink); }
.link:hover span { transform: translateX(4px); }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); transition: box-shadow var(--base) var(--ease); }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav__bar { display: flex; align-items: center; gap: 28px; height: 80px; }
.nav__logo img { width: 132px; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a { font: 500 .875rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: 10px 12px; border-radius: var(--r-pill); transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.nav__links a:hover, .nav__links a.is-active { color: var(--orange-ink); background: var(--surface); }
.nav__tel { font: 500 .875rem/1 var(--f-display); letter-spacing: .04em; text-decoration: none; color: var(--grey-ink); }
.nav__tel:hover { color: var(--black); }
.nav__toggle { display: none; }
.nav__mobile { padding: 8px var(--margin) 20px; border-top: 1px solid var(--line); background: #fff; }
.nav__mobile a { display: block; padding: 14px 0; font: 500 1.0625rem/1 var(--f-display); text-decoration: none; border-bottom: 1px solid var(--line); }

/* Hero */
.hero { padding: 48px 0 0; position: relative; overflow-x: clip; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto auto; width: 58vw; height: 620px; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, rgba(255,157,110,.28), rgba(255,157,110,0)); transform: translate(18%, -28%); }
.hero__top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
.hero__top .eyebrow { padding-top: 22px; }
.hero__main h1 { max-width: 13ch; }
.hero__row { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-top: 40px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }

/* People cards */
.people { margin-top: 56px; }
.people__track { max-width: calc(var(--container) + 0px); margin: 0 auto; padding: 0 var(--margin); display: grid; grid-template-columns: 1fr 1fr 1.55fr 1fr; gap: 16px; }
.pcard { position: relative; height: 420px; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.pcard--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pcard--photo:hover img { transform: scale(1.03); }
.pcard--photo figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; border-radius: var(--r-md); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .875rem; line-height: 1.45; color: var(--grey-ink); }
.pcard--photo figcaption strong { display: block; color: var(--black); font: 700 1rem/1.3 var(--f-display); margin-bottom: 2px; }
.pcard--quote { background: var(--surface); padding: 28px; }
.pcard--peach { background: var(--surface); }
a.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pcard__mark { font: 700 4.5rem/.7 var(--f-display); color: var(--orange); height: 40px; }
.pcard__q { font: 500 1.25rem/1.3 var(--f-display); letter-spacing: -0.01em; margin-top: 12px; }
.pcard__metric { margin-top: auto; margin-bottom: 20px; font: 500 .875rem/1.4 var(--f-display); color: var(--grey-ink); }
.pcard__metric b { display: block; font: 700 1.375rem/1.2 var(--f-display); color: var(--orange-ink); letter-spacing: -0.01em; }
.pcard__who { display: flex; gap: 12px; align-items: center; padding-top: 18px; border-top: 1px solid rgba(2,10,24,.1); font-size: .8125rem; line-height: 1.4; color: var(--grey-ink); }
.pcard__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.pcard__who strong { display: block; color: var(--black); font: 700 .9375rem/1.3 var(--f-display); }

/* Proof row */
.proofrow { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.proof { display: flex; gap: 36px; flex-wrap: wrap; }
.proof a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.proof li { display: flex; align-items: center; gap: 12px; font-size: .9375rem; color: var(--grey-ink); }
.proof strong { color: var(--black); font-family: var(--f-display); font-weight: 700; margin-right: 4px; }
.proof img { width: 28px; height: 28px; }

/* Logos */
.logos { padding: 56px 0 8px; }
.logos__in { display: flex; align-items: center; gap: 48px; }
.logos__label { flex: none; font-size: .9375rem; color: var(--grey-ink); max-width: 12ch; line-height: 1.4; }
.logos__row { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.logos__row img { height: 26px; width: auto; filter: grayscale(1) brightness(0); opacity: .45; transition: opacity var(--fast) var(--ease); }
.logos__row .sq img { height: 38px; }
.logos__row img:hover { opacity: .9; }

/* Sections */
.sec { padding: 120px 0; }
.sec--surface { background: var(--surface); }
.sec--peach { background: var(--surface); }
.head { margin-bottom: 56px; }
.head .h1 { max-width: 18ch; }
.head--split { display: flex; justify-content: space-between; align-items: end; gap: 48px; }
.head--split > div { min-width: 0; }
.head__lead { font: 400 1.125rem/1.7 var(--f-body); color: var(--grey-ink); max-width: 44ch; }

/* Problem */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pains li { background: var(--surface); border-radius: var(--r-lg); padding: 32px; }
.pains__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--orange-ink); font: 700 .875rem/1 var(--f-display); margin-bottom: 40px; }
.pains h3 { font: 500 1.5rem/1.2 var(--f-display); margin-bottom: 10px; }
.pains p { color: var(--grey-ink); line-height: 1.7; }

/* Services */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc__card { background: #fff; border-radius: var(--r-lg); padding: 12px 12px 32px; text-decoration: none; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.svc__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.svc__card > :not(.dev) { margin-left: 16px; margin-right: 16px; }
.svc__k { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); margin-top: 28px; margin-bottom: 10px; }
.svc__card h3 { font: 500 1.5rem/1.2 var(--f-display); margin-bottom: 10px; }
.svc__card > p:not(.svc__k) { color: var(--grey-ink); line-height: 1.7; }
.svc__more { margin-top: auto; padding-top: 24px; font: 700 .875rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; display: inline-flex; gap: 8px; }
.svc__card:hover .svc__more { color: var(--orange-ink); }

/* Realistische Handy-Ansichten */
.dev { height: 340px; border-radius: var(--r-md); background: var(--surface); overflow: hidden; display: flex; justify-content: center; padding-top: 28px; position: relative; }
.dev::after { content: ""; position: absolute; inset: auto 0 0; height: 48px; background: linear-gradient(rgba(244,244,245,0), rgba(244,244,245,.9)); pointer-events: none; }
.phone { position: relative; width: 252px; height: 470px; flex: none; border-radius: 40px; background: #fff; overflow: hidden; color: #0d0d0d;
  box-shadow: 0 0 0 7px #111114, 0 0 0 8px #3b3b40, 0 26px 50px rgba(2,10,24,.22);
  font: 400 11px/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  transition: transform .5s var(--ease); }
.svc__card:hover .phone { transform: translateY(-8px); }
.phone::before { content: ""; position: absolute; z-index: 3; top: 9px; left: 50%; width: 76px; height: 22px; border-radius: 14px; background: #111114; transform: translateX(-50%); }
.sb { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 4px 22px 0 28px; font-weight: 600; font-size: 12px; }
.sb__i { display: flex; align-items: center; gap: 4px; }
.sb__i svg { fill: currentColor; }
.bat { display: inline-block; width: 20px; height: 10px; border-radius: 3px; border: 1px solid rgba(0,0,0,.4); padding: 1px; position: relative; }
.bat b { display: block; height: 100%; width: 78%; border-radius: 1.5px; background: currentColor; }
.bar { display: inline-block; height: 7px; width: 70%; border-radius: 4px; background: #ececec; vertical-align: middle; }
.bar.s { width: 46%; }

/* Google */
.phone--g { font-family: Roboto, Arial, sans-serif; }
.g__top { text-align: center; padding: 4px 0 8px; }
.g__logo { font: 500 22px/1 'Product Sans', Arial, sans-serif; letter-spacing: -0.5px; }
.g__logo b { font-weight: 500; }
.g__box { margin: 0 12px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 20px; box-shadow: 0 1px 5px rgba(32,33,36,.26); font-size: 12px; color: #202124; }
.g__tabs { display: flex; gap: 14px; padding: 10px 16px 0; border-bottom: 1px solid #ebebeb; color: #5f6368; font-size: 10.5px; }
.g__tabs span { padding-bottom: 7px; }
.g__tabs .on { color: #1a73e8; border-bottom: 2px solid #1a73e8; font-weight: 500; }
.g__ad { padding: 12px 16px 10px; }
.g__spons { font-weight: 700; font-size: 10.5px; color: #202124; margin-bottom: 6px; }
.g__site { display: flex; gap: 8px; align-items: center; }
.g__fav { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FFF0E8; color: var(--orange-ink); font: 700 8px/1 Arial, sans-serif; font-style: normal; border: 1px solid #ececec; }
.g__site b { display: block; font-weight: 400; font-size: 11px; color: #202124; }
.g__site small { display: block; font-size: 9.5px; color: #4d5156; }
.g__title { margin-top: 6px; font-size: 14px; line-height: 1.3; color: #1a0dab; }
.g__desc { margin-top: 4px; font-size: 10.5px; line-height: 1.45; color: #4d5156; }
.g__links { display: flex; gap: 6px; margin-top: 8px; }
.g__links span { padding: 5px 10px; border-radius: 14px; border: 1px solid #dadce0; font-size: 10px; color: #1a0dab; }
.g__org { padding: 12px 16px; border-top: 6px solid #f1f3f4; display: grid; gap: 6px; }
.g__org i { display: block; height: 7px; border-radius: 4px; background: #ececec; }
.g__org i.s { width: 60%; }

/* Google Maps */
.phone--m { font-family: Roboto, Arial, sans-serif; background: #E8EEF2; }
.phone--m .sb { background: transparent; }
.m__map { position: absolute; inset: 0 0 auto; height: 210px; }
.m__map svg { width: 100%; height: 100%; display: block; }
.m__search { position: absolute; top: 44px; left: 12px; right: 12px; padding: 9px 14px; border-radius: 22px; background: #fff; box-shadow: 0 1px 5px rgba(32,33,36,.3); font-size: 11.5px; color: #202124; }
.m__pin { position: absolute; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: #EA4335; transform: rotate(-45deg); box-shadow: 0 2px 3px rgba(0,0,0,.25); }
.m__pin::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(0,0,0,.25); }
.m__pin--me { width: 22px; height: 22px; background: var(--orange); }
.m__pin--me::after { inset: 7px; background: #fff; }
.m__sheet { position: absolute; top: 172px; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -2px 8px rgba(0,0,0,.12); padding: 6px 16px; }
.m__grab { display: block; width: 32px; height: 4px; border-radius: 2px; background: #dadce0; margin: 0 auto 10px; }
.m__item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid #ebebeb; }
.m__item b { font-size: 14px; font-weight: 500; color: #202124; }
.m__rate { font-size: 11px; color: #70757a; }
.m__rate i { color: #FBBC04; font-style: normal; letter-spacing: .5px; }
.m__meta { font-size: 11px; color: #70757a; }
.m__open { font-size: 11px; color: #70757a; }
.m__open em { color: #188038; font-style: normal; }
.m__btns { display: flex; gap: 6px; margin-top: 8px; }
.m__btns span { padding: 6px 11px; border-radius: 16px; border: 1px solid #dadce0; color: #1a73e8; font-size: 10.5px; font-weight: 500; }
.m__btns .pri { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.m__item--dim { padding-top: 12px; gap: 6px; border: 0; }

/* ChatGPT */
.c__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; }
.c__menu { display: grid; gap: 3px; }
.c__menu i { display: block; width: 14px; height: 1.6px; background: #0d0d0d; border-radius: 1px; }
.c__menu i:last-child { width: 9px; }
.c__title { font-size: 13px; font-weight: 600; }
.c__title small { font-size: 10px; color: #8e8e8e; }
.c__body { padding: 4px 14px; }
.c__user { margin-left: auto; width: fit-content; max-width: 80%; padding: 8px 12px; border-radius: 16px; background: #f1f1f1; font-size: 11.5px; line-height: 1.35; }
.c__ans { margin-top: 14px; font-size: 11.5px; line-height: 1.5; display: grid; gap: 8px; }
.c__ans b { font-weight: 600; }
.c__src { display: flex; gap: 5px; }
.c__src span { padding: 2px 8px; border-radius: 10px; background: #f1f1f1; font-size: 9.5px; color: #5d5d5d; }
.c__comp { position: absolute; left: 10px; right: 10px; bottom: 26px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 22px; box-shadow: 0 0 0 1px #e3e3e3, 0 2px 8px rgba(0,0,0,.06); font-size: 11.5px; color: #8e8e8e; background: #fff; }
.c__plus { font-size: 15px; color: #0d0d0d; line-height: 1; }
.c__ph { flex: 1; }
.c__mic { width: 22px; height: 22px; border-radius: 50%; background: #0d0d0d; }

/* Cases */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.case { background: #fff; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.case img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case__body { padding: 28px 28px 32px; }
.case__num { font: 700 3rem/1 var(--f-display); letter-spacing: -0.03em; color: var(--orange); }
.case__unit { font: 500 1rem/1.4 var(--f-display); margin-top: 8px; }
.case__who { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--grey-ink); font-size: .9375rem; line-height: 1.6; }
.case__who strong { display: block; color: var(--black); font-family: var(--f-display); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps li { background: #fff; border-radius: var(--r-lg); padding: 28px; }
.steps__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--black); font: 700 1.125rem/1 var(--f-display); margin-bottom: 32px; }
.steps h3 { font: 500 1.375rem/1.2 var(--f-display); margin-bottom: 10px; }
.steps p { color: var(--grey-ink); line-height: 1.7; font-size: .9375rem; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 36px 32px 32px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.plan:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); }
.plan--hot { background: #fff; box-shadow: inset 0 0 0 2px var(--orange); }
.plan--hot:hover { box-shadow: inset 0 0 0 2px var(--orange), var(--shadow-lift); }
.plan__badge { position: absolute; top: 32px; right: 28px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--orange); color: var(--black); font: 500 .6875rem/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.plan__name { font: 700 1.125rem/1.3 var(--f-display); margin-bottom: 28px; }
.plan__price { font: 700 2.75rem/1 var(--f-display); letter-spacing: -0.03em; }
.plan__price small { display: block; margin-top: 10px; font: 400 .9375rem/1 var(--f-body); letter-spacing: 0; color: var(--grey-ink); }
.plan__desc { color: var(--grey-ink); line-height: 1.6; margin: 24px 0 32px; flex: 1; }
.plan .btn { width: 100%; }
.incl { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; }
.incl li { position: relative; padding-left: 26px; font-size: .9375rem; color: var(--grey-ink); }
.incl li::before { content: "✓"; position: absolute; left: 0; color: var(--orange-ink); font-weight: 700; }
.klar { margin-top: 56px; padding: 40px 48px; border-radius: var(--r-lg); background: var(--surface); display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.klar .h2 { margin-bottom: 12px; }
.klar p:last-child { color: var(--grey-ink); line-height: 1.7; max-width: 62ch; }

/* Team */
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 80px; align-items: center; }
.team .h1 { margin-bottom: 20px; }
.team .head__lead { margin-bottom: 32px; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.principles li { background: #fff; border-radius: var(--r-md); padding: 24px; }
.principles h3 { font: 500 1.125rem/1.3 var(--f-display); margin-bottom: 6px; }
.principles p { color: var(--grey-ink); font-size: .9375rem; line-height: 1.6; }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
.faq .h1 { max-width: 12ch; }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 500 1.25rem/1.35 var(--f-display); transition: color var(--fast) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font: 400 1.5rem/1 var(--f-body); transition: transform var(--base) var(--ease), background var(--fast) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--orange); }
.faq summary:hover { color: var(--orange-ink); }
.faq details p { padding: 0 64px 26px 0; color: var(--grey-ink); line-height: 1.7; }

/* CTA */
.cta-sec { padding: 0 0 120px; }
.cta { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: center; padding: 24px 64px 24px 24px; border-radius: var(--r-lg); background: var(--surface); position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; right: -120px; top: -160px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(closest-side, rgba(252,76,1,.22), rgba(252,76,1,0)); pointer-events: none; }
.cta__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); }
.cta__copy { position: relative; z-index: 1; padding: 32px 0; }
.cta__copy > p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.7; color: var(--grey-ink); max-width: 46ch; margin-top: 16px; }
.cta__row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 32px; }

/* Footer */
.foot { background: var(--surface); padding: 72px 0 32px; font-size: .9375rem; color: var(--grey-ink); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 48px; }
.foot__grid img { width: 160px; }
.foot__claim { margin-top: 20px; font: 500 1.125rem/1.3 var(--f-display); color: var(--black); }
.foot__h { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--black); margin-bottom: 14px; }
.foot__grid a { display: block; padding: 4px 0; text-decoration: none; transition: color var(--fast) var(--ease); }
.foot__grid a:hover, .foot__base a:hover { color: var(--orange-ink); }
.foot__grid p:not(.foot__h):not(.foot__claim) { margin-bottom: 10px; line-height: 1.6; }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--gray-medium); font-size: .8125rem; }
.foot__base a { text-decoration: none; }

/* KI-Check */
.kicheck { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 14px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); text-decoration: none; transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.kicheck:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); }
.kicheck__logos { display: flex; }
.kicheck__logos img { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px #fff; }
.kicheck__logos img + img { margin-left: -8px; }
.kicheck__txt { display: flex; flex-direction: column; line-height: 1.3; }
.kicheck__txt small { font: 500 .6875rem/1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); }
.kicheck__txt b { font: 700 .9375rem/1.3 var(--f-display); }
.kicheck__go { padding: 10px 16px; border-radius: var(--r-pill); background: var(--black); color: #fff; font: 700 .8125rem/1 var(--f-display); letter-spacing: .02em; white-space: nowrap; }

/* Logowand */
.logos .eyebrow { color: var(--grey-ink); }
.logos__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logos__grid li > * { position: relative; display: grid; place-items: center; height: 112px; padding: 0 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; transition: background var(--fast) var(--ease); }
.logos__grid img { height: 26px; width: auto; max-width: 100%; filter: grayscale(1) brightness(0); opacity: .5; transition: opacity var(--fast) var(--ease); }
.logos__grid .sq img { height: 40px; }
.logos__grid a:hover { background: var(--surface); }
.logos__grid a:hover img { opacity: 1; }
.logos__case { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface); font: 500 .6875rem/1.5 var(--f-display); color: var(--grey-ink); }
.logos__grid a:hover .logos__case { background: var(--orange); color: var(--black); }

/* Problem: Schlusssatz */
.turn { margin-top: 48px; display: flex; align-items: center; gap: 14px; font: 500 1.25rem/1.35 var(--f-display); }
.turn::before { content: ""; width: 40px; height: 2px; background: var(--orange); flex: none; }

/* Leistungen */
.svc__card { position: relative; }
.svc__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.svc__card .svc__more { position: relative; z-index: 2; text-decoration: none; }
.svc__card h3 { margin-bottom: 4px; }
.svc__tag { font: 500 1.0625rem/1.4 var(--f-display); color: var(--black) !important; margin-bottom: 10px; }
.wide-link { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 28px; border-radius: var(--r-lg); background: #fff; text-decoration: none; box-shadow: var(--shadow-card); font-size: 1.0625rem; color: var(--grey-ink); transition: box-shadow var(--base) var(--ease); }
.wide-link b { color: var(--black); font-family: var(--f-display); margin-right: 6px; }
.wide-link__go { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--black); font-weight: 700; transition: transform var(--base) var(--ease); }
.wide-link:hover { box-shadow: var(--shadow-lift); }
.wide-link:hover .wide-link__go { transform: translateX(4px); }

/* Cases: Zusatzangaben */
.case__tag { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 14px; }
.case__desc { margin-top: 14px; color: var(--grey-ink); font-size: .9375rem; line-height: 1.6; }
.case__when { margin-top: 10px; font-size: .8125rem; line-height: 1.5; color: var(--grey-ink); }
.case__who { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.case__who span { font: 700 .8125rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--black); }
.case { display: flex; flex-direction: column; }
.case__body { flex: 1; display: flex; flex-direction: column; }
.case__who { margin-top: auto; }
.case__when { margin-bottom: 20px; }
.bigquote { margin: 72px auto 0; max-width: 960px; text-align: center; }
.bigquote blockquote { margin: 0; font: 500 1.75rem/1.4 var(--f-display); letter-spacing: -0.01em; }
.bigquote figcaption { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; font-size: .9375rem; color: var(--grey-ink); text-align: left; }
.bigquote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.bigquote figcaption strong { display: block; color: var(--black); font-family: var(--f-display); }
.bigquote .link { margin-left: 20px; }

/* System */
.steps__n { align-self: flex-start; width: auto; height: auto; padding: 6px 12px; border-radius: var(--r-pill); font-size: .8125rem; margin-bottom: 24px; }
.steps__k { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink) !important; margin-bottom: 8px; font-size: .75rem !important; }
.steps li { display: flex; flex-direction: column; }
.steps__tags { margin-top: auto; padding-top: 20px; font: 500 .75rem/1.5 var(--f-display); color: var(--grey-ink); }
.ledger { margin-top: 16px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding: 40px; border-radius: var(--r-lg); background: #fff; }
.ledger__copy > p:not(.eyebrow) { color: var(--grey-ink); line-height: 1.7; margin-top: 14px; }
.ledger__note { color: var(--black) !important; font-weight: 700; }
.ledger__links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.win { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(2,10,24,.08), 0 24px 50px rgba(2,10,24,.12); background: #fff; }
.win__bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #F1F1F3; border-bottom: 1px solid #E3E3E6; }
.win__dots { display: flex; gap: 7px; }
.win__dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.win__dots i:nth-child(2) { background: #FEBC2E; }
.win__dots i:nth-child(3) { background: #28C840; }
.win__url { flex: 1; max-width: 360px; margin: 0 auto; text-align: center; padding: 5px 12px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #E3E3E6; font: 400 .75rem/1.3 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color: #5f6368; }
.sheet { font: 400 .8125rem/1.3 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color: #202124; }
.sheet__row { display: grid; grid-template-columns: 38px .6fr 1fr 1.5fr 1.9fr; }  /* Spalten nach Inhalt (06.11.: "soweit technisch erkennbar" wurde mit "…" abgeschnitten) */
.sheet__row > span { padding: 9px 10px; border-right: 1px solid #E2E3E3; border-bottom: 1px solid #E2E3E3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__row > span:first-child { background: #F8F9FA; color: #5f6368; text-align: center; font-size: .6875rem; }
.sheet__row--letters > span { background: #F8F9FA; color: #5f6368; text-align: center; font-size: .6875rem; padding: 5px; }
.sheet__row--head > span:not(:first-child) { font-weight: 700; background: #FFF6F1; }
.sheet__row--empty > span { height: 34px; }
.sheet .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }
.dot--ads { background: var(--orange); }
.dot--seo { background: #34A853; }
.dot--ai { background: #AB92E1; }
.sheet .ok { color: var(--green); }
.sheet .soft { color: #5f6368; font-style: italic; }

/* Team */
.team__k { display: inline-block; margin-bottom: 18px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); font: 500 .8125rem/1.4 var(--f-display); }
.team__intro .head__lead { margin-bottom: 28px; }
#team .principles li { background: var(--surface); }

/* Einstieg */
.entry { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.entry__card { display: flex; flex-direction: column; padding: 36px; border-radius: var(--r-lg); background: #fff; }
.entry__card--hot { box-shadow: inset 0 0 0 2px var(--orange); }
.entry__k { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 14px; }
.entry__card h3 { font: 500 1.625rem/1.2 var(--f-display); letter-spacing: -0.01em; margin-bottom: 12px; }
.entry__card > p:not(.entry__k):not(.entry__price):not(.entry__list-h) { color: var(--grey-ink); line-height: 1.7; }
.entry__list-h { margin-top: 24px; font: 700 .875rem/1.4 var(--f-display); }
.entry__price { margin-top: 24px; font: 700 2.5rem/1 var(--f-display); letter-spacing: -0.03em; }
.entry__price small { display: block; margin-top: 10px; font: 400 .9375rem/1.3 var(--f-body); letter-spacing: 0; color: var(--grey-ink); }
.ticks { margin: 14px 0 28px; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 26px; line-height: 1.5; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--orange-ink); font-weight: 700; }
.entry__card .btn { margin-top: auto; align-self: flex-start; }
.entry__note { margin-top: 20px; color: var(--grey-ink); font-size: .9375rem; }
.facts { margin: 40px 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.facts li { padding: 22px 24px; border-radius: var(--r-md); background: #fff; display: flex; flex-direction: column; gap: 4px; }
.facts b { font: 700 1.25rem/1.2 var(--f-display); }
.facts span { color: var(--grey-ink); font-size: .875rem; line-height: 1.5; }

/* Werkzeuge */
.sec--tight { padding: 88px 0; }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tools a { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); text-decoration: none; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), background var(--fast) var(--ease); }
.tools a:hover { transform: translateY(-4px); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); }
.tools__ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; margin-bottom: 14px; font: 700 1.125rem/1 var(--f-display); color: var(--orange-ink); }
.tools b { font: 700 1.25rem/1.25 var(--f-display); }
.tools span:last-child { font: 500 .9375rem/1.3 var(--f-display); color: var(--grey-ink); }

/* FAQ */
.faq details p + p { margin-top: -12px; }
.faq details a { color: var(--black); text-decoration-color: var(--orange); text-underline-offset: 3px; }
#fragen .faq summary::after { background: #fff; }

/* Footer, erweitert */
.foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
.foot__about { margin-top: 18px; max-width: 34ch; line-height: 1.6; }
.coords { display: flex; justify-content: space-between; gap: 32px; max-width: 300px; margin-top: 20px; padding: 12px 20px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--gray-medium); font: 500 .6875rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--black); }
.coords__r { text-align: right; }
.foot__badges { display: grid; gap: 8px; margin-top: 20px; max-width: 300px; }
.foot__badges a { display: flex !important; align-items: center; gap: 12px; padding: 10px 14px !important; border-radius: var(--r-md); background: #fff; font-size: .8125rem; line-height: 1.35; }
.foot__badges b { display: block; color: var(--black); font-family: var(--f-display); }
.foot__labels { display: flex; gap: 10px; margin-top: 16px; }
.foot__labels img { height: 30px; width: auto; }
.foot__h--gap { margin-top: 28px; }
.foot__big { font: 700 1.375rem/1.3 var(--f-display) !important; color: var(--black); }
.foot__hours { margin-top: 6px; font-size: .875rem; }
.foot__hours b { color: var(--black); }
.foot__social { display: flex; gap: 18px; }
.foot__social a { display: inline !important; }
.foot__claim { margin: 0 !important; font: 500 1rem/1.3 var(--f-display) !important; color: var(--black) !important; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1180px) {
  .hero__top { grid-template-columns: 1fr; gap: 0; }
  .hero__top .eyebrow { padding: 0; }
  .hero__top .eyebrow br { display: none; }
  .hero__row { flex-direction: column; align-items: start; gap: 28px; }
  .people { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .people::-webkit-scrollbar { display: none; }
  .people__track { grid-template-columns: 300px 300px 440px 300px; width: max-content; }
  .pcard { scroll-snap-align: start; }
  .nav__tel { display: none; }
}
@media (max-width: 1023px) {
  :root { --margin: 32px; }
  .nav__links { display: none; }
  .nav__bar > .btn { margin-left: auto; }
  .nav__toggle { display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); cursor: pointer; }
  .nav__toggle span { display: block; width: 18px; height: 2px; background: var(--black); transition: transform var(--base) var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .h1 { font-size: 2.75rem; }
  .sec { padding: 88px 0; }
  .head--split { flex-direction: column; align-items: start; gap: 20px; }
  .logos__in { flex-direction: column; align-items: start; gap: 24px; }
  .logos__label { max-width: none; }
  .pains, .svc, .cases, .plans { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .klar { flex-direction: column; align-items: start; padding: 32px; }
  .team, .faq { grid-template-columns: 1fr; gap: 40px; }
  .cta { grid-template-columns: 1fr; padding: 16px 16px 32px; gap: 8px; }
  .cta__img { aspect-ratio: 16 / 10; object-position: center 25%; }
  .cta__copy { padding: 16px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  :root { --margin: 20px; }
  .nav__bar { height: 68px; gap: 12px; }
  .nav__logo img { width: 108px; }
  .nav__bar > .btn { padding: 11px 14px; font-size: .6875rem; }
  .hero { padding-top: 40px; }
  .hero__main h1 { font-size: min(3rem, calc((100vw - 40px) / 8)); }
  .h1 { font-size: min(2.5rem, calc((100vw - 40px) / 8.4)); }
  .h2 { font-size: 1.5rem; }
  .lead { font-size: 1.0625rem; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { width: 100%; }
  .people { margin-top: 48px; }
  .people__track { grid-template-columns: 78vw 78vw 88vw 78vw; gap: 12px; }
  .pcard { height: 400px; }
  .proof { flex-direction: column; gap: 14px; }
  .logos__row { justify-content: flex-start; gap: 20px 28px; }
  .logos__row img { height: 22px; }
  .sec { padding: 72px 0; }
  .head { margin-bottom: 36px; }
  .pains li, .steps li { padding: 24px; }
  .pains__n { margin-bottom: 24px; }
  .steps { grid-template-columns: 1fr; }
  .steps__n { margin-bottom: 20px; }
  .principles { grid-template-columns: 1fr; }
  .faq summary { font-size: 1.0625rem; padding: 22px 0; }
  .faq details p { padding-right: 0; }
  .cta-sec { padding-bottom: 72px; }
  .cta .btn { width: 100%; }
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 1180px) {
  .ledger { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .tools { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023px) {
  .logos__grid { grid-template-columns: repeat(3, 1fr); }
  .entry { grid-template-columns: 1fr; }
  .proofrow { flex-direction: column; align-items: start; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .proof { flex-direction: column; gap: 14px; }
  .kicheck { flex-wrap: wrap; border-radius: var(--r-md); }
  .kicheck__go { width: 100%; text-align: center; }
  .logos__grid { grid-template-columns: 1fr 1fr; }
  .logos__grid li > * { height: 92px; }
  .logos__grid img { height: 20px; }
  .wide-link { padding: 18px 20px; font-size: .9375rem; }
  .bigquote { margin-top: 48px; text-align: left; }
  .bigquote blockquote { font-size: 1.25rem; }
  .bigquote figcaption { justify-content: flex-start; }
  .bigquote .link { margin-left: 0; }
  .ledger { padding: 24px 16px; }
  .sheet__row { grid-template-columns: 26px .8fr 1fr 1.3fr; }
  .sheet__row > span:nth-child(5) { display: none; }
  .entry__card { padding: 26px 22px; }
  .facts, .tools { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}
.foot__badges img { width: 18px !important; height: 18px; flex: none; }
.foot__labels img { width: auto !important; }
@media (max-width: 767px) {
  .sheet__row { grid-template-columns: 30px .8fr 1fr 1.3fr; }
  .sheet__row > span { padding: 9px 7px; }
  .sheet__row > span:first-child { padding-inline: 2px; }
}

/* /heroes.css */
/* TZ2 Hero-Varianten A, B, C. Baut auf tz2.css auf (Nav, Knöpfe, Handy-Ansichten). */

.vbar { position: fixed; z-index: 60; left: 50%; bottom: 18px; translate: -50% 0; display: flex; gap: 6px; padding: 6px; border-radius: 100px; background: rgba(2,10,24,.88); backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(2,10,24,.25); }
.vbar a { padding: 9px 16px; border-radius: 100px; color: #fff; text-decoration: none; font: 500 .8125rem/1 var(--f-display); letter-spacing: .04em; }
.vbar a[aria-current] { background: var(--orange); color: var(--black); }

/* gemeinsame Bausteine */
.blob { position: absolute; z-index: -1; pointer-events: none; background: linear-gradient(135deg, #FF9D6E, #FC4C01); animation: morph 14s ease-in-out infinite alternate; }
@keyframes morph {
  0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg) scale(1); }
  50% { border-radius: 60% 40% 38% 62% / 55% 61% 39% 45%; transform: rotate(18deg) scale(1.06); }
  100% { border-radius: 38% 62% 54% 46% / 62% 38% 62% 38%; transform: rotate(-8deg) scale(.97); }
}
.phone--xl { transform: scale(1.32); transform-origin: top center; }
.note { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 34px rgba(2,10,24,.16), 0 0 0 1px rgba(2,10,24,.05); font: 400 12.5px/1.3 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color: #0d0d0d; white-space: nowrap; opacity: 0; transform: translateY(14px) scale(.92); }
.note b { display: block; font-weight: 600; font-size: 13px; }
.note small { color: #6e6e73; font-size: 11.5px; }
.note__ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--orange); color: var(--black); font: 700 15px/1 var(--f-display); }
.note__ic img { width: 20px; height: 20px; }
.note__ic--w { background: #fff; box-shadow: inset 0 0 0 1px #e6e6e8; }
.is-in .note { animation: pop .7s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes pop { to { opacity: 1; transform: none; } }
.hero-proof { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; font-size: .9375rem; color: var(--grey-ink); }
.hero-proof strong { color: var(--black); font-family: var(--f-display); margin-right: 4px; }
.hero-proof img { width: 22px; height: 22px; vertical-align: -5px; margin-right: 8px; }
.demo-tag { display: inline-block; padding: 5px 12px; border-radius: 100px; background: var(--surface); font: 500 .6875rem/1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--grey-ink); }
.rise { opacity: 0; transform: translateY(26px); }
.is-in .rise { animation: rise .9s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- A: Riesentype ---------- */
.ha { position: relative; overflow: clip; padding: 40px 0 72px; text-align: center; }
.ha__h { margin: 0; font: 700 clamp(56px, 12.2vw, 196px)/.88 var(--f-display); letter-spacing: -0.055em; }
.ha__h span { display: block; }
.ha__h .hl { color: var(--orange); }
.ha__stage { position: relative; height: 560px; margin-top: -84px; display: flex; justify-content: center; }
.ha__stage .blob { width: 520px; height: 440px; top: 120px; left: 50%; margin-left: -260px; opacity: .9; filter: blur(2px); }
.ha__phone { position: relative; z-index: 2; width: 252px; height: 470px; }
.ha__phone .phone { box-shadow: 0 0 0 7px #111114, 0 0 0 8px #3b3b40, 0 40px 80px rgba(2,10,24,.3); }
.ha .note--1 { left: calc(50% - 420px); top: 150px; animation-delay: 1.2s !important; }
.ha .note--2 { left: calc(50% + 200px); top: 250px; animation-delay: 2s !important; }
.ha .note--3 { left: calc(50% - 380px); top: 360px; animation-delay: 2.8s !important; }
.ha__copy { position: relative; z-index: 3; max-width: 680px; margin: 0 auto; }
.ha__copy .lead { margin: 0 auto; max-width: 56ch; }
.ha__ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 28px 0 36px; }
.is-in .ha__phone { animation: phoneUp 1.1s var(--ease) both; }
@keyframes phoneUp { from { opacity: 0; transform: translateY(120px) rotate(-4deg); } to { opacity: 1; transform: none; } }

/* ---------- B: Geräte-Fächer ---------- */
.hb { position: relative; overflow: clip; padding: 64px 0 0; text-align: center; }
.hb__h { margin: 0 auto; max-width: 15ch; font: 700 clamp(48px, 6.4vw, 96px)/1.02 var(--f-display); letter-spacing: -0.04em; }
.hb__h .hl { color: var(--orange); }
.cap { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; width: 1.7em; height: .92em; margin: 0 .12em; border-radius: 100px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; position: relative; top: -.06em; }
.cap__reel { display: flex; flex-direction: column; animation: reel 7.5s cubic-bezier(.7,0,.2,1) infinite; }
.cap__reel span { height: .92em; display: grid; place-items: center; }
.cap__reel img { width: .5em; height: .5em; }
@keyframes reel {
  0%, 18% { transform: translateY(0); }
  25%, 43% { transform: translateY(-.92em); }
  50%, 68% { transform: translateY(-1.84em); }
  75%, 93% { transform: translateY(-2.76em); }
  100% { transform: translateY(-3.68em); }
}
.hb .lead { margin: 24px auto 0; max-width: 58ch; }
.hb__ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hb__fan { position: relative; height: 560px; margin-top: 56px; display: flex; justify-content: center; align-items: flex-start; perspective: 1400px; }
.hb__sun { position: absolute; z-index: -1; left: 50%; top: 30px; width: 1100px; height: 1100px; margin-left: -550px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #FF9D6E 0%, #FC4C01 46%, rgba(252,76,1,0) 70%); opacity: .0; }
.is-in .hb__sun { animation: sunrise 1.6s var(--ease) .2s forwards; }
@keyframes sunrise { from { opacity: 0; transform: translateY(120px) scale(.9); } to { opacity: .85; transform: none; } }
.hb__dot { position: absolute; z-index: -1; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, #AB92E1, #4A24AA); right: calc(50% - 520px); top: 60px; animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-18px); } }
.hb__dev { position: relative; transition: transform .6s var(--ease); }
.hb__dev .phone { box-shadow: 0 0 0 7px #111114, 0 0 0 8px #3b3b40, 0 40px 80px rgba(2,10,24,.28); }
.hb__dev--l { margin-right: -40px; margin-top: 70px; }
.hb__dev--r { margin-left: -40px; margin-top: 70px; }
.hb__dev--c { z-index: 2; }
.hb__dev--l .phone { transform: rotate(-9deg); }
.hb__dev--r .phone { transform: rotate(9deg); }
.hb__dev { opacity: 0; }
.is-in .hb__dev { animation: fanUp 1.1s var(--ease) forwards; }
.is-in .hb__dev--l { animation-delay: .25s; }
.is-in .hb__dev--r { animation-delay: .4s; }
@keyframes fanUp { from { opacity: 0; translate: 0 140px; } to { opacity: 1; translate: 0 0; } }
.hb .note--1 { left: calc(50% - 470px); top: 300px; animation-delay: 1.6s !important; }
.hb .note--2 { left: calc(50% + 250px); top: 380px; animation-delay: 2.3s !important; }
.hb__proof { position: relative; z-index: 3; margin-top: -40px; padding: 26px 0 30px; background: #fff; border-top: 1px solid var(--line); }

/* ---------- C: Der Weg zur Anfrage ---------- */
.hc { position: relative; overflow: clip; padding: 56px 0 72px; }
.hc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hc__h { margin: 16px 0 0; font: 700 clamp(44px, 4.8vw, 72px)/1.04 var(--f-display); letter-spacing: -0.035em; }
.hc__h .hl { color: var(--orange); }
.hc .lead { margin-top: 24px; max-width: 48ch; }
.hc__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hc__proof { margin-top: 40px; justify-content: flex-start; }
.track { position: relative; aspect-ratio: 700 / 620; width: 100%; }
.track svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.track__bed { fill: none; stroke: #E2E2E7; stroke-width: 76; stroke-linecap: round; }
.track__lip { fill: none; stroke: #F6F6F8; stroke-width: 58; stroke-linecap: round; filter: drop-shadow(0 12px 16px rgba(2,10,24,.12)); }
.track__line { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 16; opacity: .7; }
.is-in .track__lip, .is-in .track__bed { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.tile { position: absolute; z-index: 2; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 26px; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 0 #fff inset, 0 16px 30px rgba(2,10,24,.14), 0 0 0 1px rgba(2,10,24,.05); transform: rotate(var(--r, 0deg)); opacity: 0; }
.is-in .tile { animation: tileIn .8s cubic-bezier(.2,1.3,.4,1) forwards; }
.tile img { width: 40px; height: 40px; }
.tile small { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; white-space: nowrap; font: 500 .75rem/1 var(--f-display); letter-spacing: .06em; color: var(--grey-ink); }
.tile--end { width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 32px; background: linear-gradient(135deg, #FF9D6E, #FC4C01); color: var(--black); font: 700 2.25rem/1 var(--f-display); }
.tile--end small { color: var(--black); font-weight: 700; }
.is-in .tile--end { animation: tileIn .8s cubic-bezier(.2,1.3,.4,1) 1.5s forwards, beat 2.6s ease-in-out 3s infinite; }
@keyframes tileIn { from { opacity: 0; transform: rotate(var(--r, 0deg)) translateY(20px) scale(.6); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
@keyframes beat { 50% { box-shadow: 0 0 0 14px rgba(252,76,1,.14), 0 16px 30px rgba(2,10,24,.14); } }
.ball { fill: url(#ballGrad); filter: drop-shadow(0 6px 8px rgba(252,76,1,.45)); }
.hc .note--1 { right: 0; top: 4%; animation-delay: 2.2s !important; }
.hc .blob { display: none; }

/* ---------- Mobil ---------- */
@media (max-width: 1023px) {
  .ha .note--1, .ha .note--3 { left: 4%; }
  .ha .note--2 { left: auto; right: 4%; }
  .hb__dev--l, .hb__dev--r { display: none; }
  .hb .note--1 { left: 4%; }
  .hb .note--2 { left: auto; right: 4%; }
  .hc__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ha__stage { height: 440px; margin-top: -60px; }
  .ha__stage .blob { width: 320px; height: 300px; margin-left: -160px; }
  .ha .note { font-size: 11px; padding: 8px 10px 8px 8px; }
  .ha .note--1 { top: 60px; left: 2%; }
  .ha .note--2 { top: 190px; right: 2%; }
  .ha .note--3 { display: none; }
  .ha__copy { margin-top: -40px; }
  .ha__ctas .btn, .hb__ctas .btn, .hc__ctas .btn { width: 100%; }
  .hb__fan { height: 500px; margin-top: 40px; }
  .hb__sun { width: 700px; height: 700px; margin-left: -350px; }
  .hb .note { display: none; }
  .tile { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 18px; }
  .tile img { width: 28px; height: 28px; }
  .tile--end { width: 80px; height: 80px; margin: -40px 0 0 -40px; font-size: 1.5rem; }
  .tile small { font-size: .625rem; }
  .hc .note { display: none; }
  .hero-proof { flex-direction: column; gap: 10px; align-items: center; }
  .hc__proof { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .note, .rise, .hb__dev, .tile { opacity: 1 !important; transform: none !important; }
  .hb__sun { opacity: .85; }
}
.vbar a { white-space: nowrap; }
@media (max-width: 767px) { .vbar a { padding: 9px 12px; font-size: .75rem; } }
@media (max-width: 767px) {
  .ha__h, .hb__h, .hc__h { font-size: calc((100vw - 40px) / 8.1); letter-spacing: -0.04em; }
  .ha__stage { height: 540px; margin-top: 28px; }
  .ha__copy { margin-top: 0; }
  .hb__h .cap { display: none; }
}

/* B: Vertrauensleiste mit Google Partner, KI-Check und swiss made software */
.trustbar { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.tb { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px 0 12px; border-radius: 100px; background: #fff; text-decoration: none; text-align: left; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.tb:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); }
.tb img { width: 34px; height: 34px; object-fit: contain; }  /* 176x180 nicht verzerren (Case-Sitzung 09.11.2026) */
.tb b { display: block; font: 700 .9375rem/1.25 var(--f-display); }
.tb small { display: block; font-size: .75rem; color: var(--grey-ink); }
/* swiss made software: gleiche Pille wie Google Partner (Entscheid 04.11.) */
.trustbar .kicheck { height: 58px; }
@media (max-width: 767px) {
  .trustbar { flex-direction: column; align-items: stretch; }
  .tb { justify-content: center; }
  .trustbar .kicheck { height: auto; }
}

/* ---------- B-Drafts mit echten Screens ---------- */
.hb--real .hb__fan { height: 600px; align-items: flex-start; }
.hb--real .hb__dev--l .iph { transform: rotate(-8deg); }
.hb--real .hb__dev--r .iph { transform: rotate(8deg); }
.hb--real .hb__dev--l { margin-right: -36px; margin-top: 64px; }
.hb--real .hb__dev--r { margin-left: -36px; margin-top: 64px; }
.mock-note { margin-top: 10px; text-align: center; font-size: .75rem; color: var(--grey-ink); }
.hb--real .hb__proof { margin-top: -60px; }

/* B3: ein Gerät, Bildschirme wechseln */
.cyc { position: relative; display: flex; justify-content: center; align-items: center; gap: 64px; margin-top: 56px; height: 700px; }
.cyc .hb__sun { top: 80px; }
.cyc__dev { position: relative; width: calc(375px * .78); height: calc(812px * .78); align-self: flex-start; }
.cyc__s { position: absolute; inset: 0; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cyc__s.on { opacity: 1; transform: none; z-index: 2; }
.cyc__s.on .ios-notif { animation: notifIn .8s cubic-bezier(.2,1.2,.3,1) .9s forwards; }
.cyc__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 300px; order: 2; text-align: left; }
.cyc__step { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.cyc__step b { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font: 700 .9375rem/1 var(--f-display); transition: background .3s var(--ease); }
.cyc__step strong { display: block; font: 700 1.125rem/1.25 var(--f-display); }
.cyc__step span { font-size: .875rem; color: var(--grey-ink); line-height: 1.4; }
.cyc__step.on { box-shadow: inset 0 0 0 2px var(--orange), var(--shadow-lift); transform: translateX(6px); }
.cyc__step.on b { background: var(--orange); }
.hb--cycle .hb__proof { margin-top: 0; }
@media (max-width: 1023px) {
  .hb--real .hb__fan .iph { --s: .62 !important; }
  .cyc { flex-direction: column; height: auto; gap: 28px; }
  .cyc__steps { order: 0; width: 100%; max-width: 420px; grid-template-columns: 1fr; }
  .cyc__step.on { transform: none; }
}
@media (max-width: 767px) {
  .hb--real .hb__fan { height: 520px; }
  .cyc__steps { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cyc__step { flex-direction: column; text-align: center; padding: 12px 8px; gap: 6px; }
  .cyc__step span span, .cyc__step span { font-size: .75rem; }
  .cyc__step strong { font-size: .9375rem; }
  .cyc__dev { width: calc(375px * .72); height: calc(812px * .72); }
  .cyc__dev .iph { --s: .72 !important; }
}

/* /screens.css */
/* Realistische iPhone-Screens, gebaut in Originalgrösse 375 x 812 und skaliert.
   Vorlagen: Google-Suche mobil live (google.ch, 04.11.2026), ChatGPT, Google Maps und Gmail iOS (Mobbin). */

.iph { --s: .68; position: relative; flex: none; width: calc(375px * var(--s)); height: calc(812px * var(--s)); border-radius: calc(58px * var(--s)); background: #fff; overflow: hidden;
  box-shadow: 0 0 0 calc(11px * var(--s)) #121215, 0 0 0 calc(12.5px * var(--s)) #44444a, 0 40px 80px rgba(2,10,24,.28); }
.iph__scr { position: absolute; left: 0; top: 0; width: 375px; height: 812px; transform: scale(var(--s)); transform-origin: 0 0; overflow: hidden; background: #fff; color: #1f1f1f;
  font: 400 16px/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-align: left; }
.iph__island { position: absolute; z-index: 20; top: 11px; left: 50%; width: 125px; height: 37px; margin-left: -62.5px; border-radius: 20px; background: #000; }
.iph__home { position: absolute; z-index: 20; bottom: 8px; left: 50%; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: #000; }
.ios-sb { position: relative; z-index: 15; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 40px; font: 600 17px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; color: #000; }
.ios-sb__r { display: flex; align-items: center; gap: 6px; }
.ios-sb__r svg { fill: #000; display: block; }
.ios-bat { position: relative; width: 27px; height: 13px; border-radius: 4px; border: 1px solid rgba(0,0,0,.35); padding: 1.5px; }
.ios-bat::after { content: ""; position: absolute; right: -4px; top: 4px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(0,0,0,.4); }
.ios-bat b { display: block; height: 100%; width: 82%; border-radius: 2px; background: #000; }

/* iOS-Mitteilung */
.ios-notif { position: absolute; z-index: 18; left: 9px; right: 9px; top: 56px; display: flex; gap: 11px; align-items: center; padding: 13px 14px; border-radius: 24px; background: rgba(245,245,247,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0,0,0,.18); transform: translateY(-140%); opacity: 0; }
.ios-notif__ic { width: 38px; height: 38px; flex: none; border-radius: 9px; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1); }
.ios-notif__b { flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
.ios-notif__b b { display: flex; justify-content: space-between; font-weight: 600; }
.ios-notif__b b small { font-weight: 400; color: #6e6e73; font-size: 14px; }
.ios-notif__b span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-in .ios-notif { animation: notifIn .8s cubic-bezier(.2,1.2,.3,1) forwards; animation-delay: var(--d, 2s); }
@keyframes notifIn { to { transform: none; opacity: 1; } }

/* Firmenlogo im Mockup (fiktive Musterfirma) */
.mlogo { display: grid; place-items: center; border-radius: 50%; background: #10336B; }
.mlogo svg { display: block; }

/* ---------- Google-Suche (Safari) ---------- */
.g2 { font-family: Roboto, Arial, sans-serif; }
.g2__hdr { position: relative; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 18px; }
.g2__hdr .ham { width: 24px; height: 24px; fill: #444746; }
.g2__logo { position: absolute; left: 50%; top: 12px; margin-left: -46px; }
.g2__login { padding: 10px 16px; border-radius: 100px; background: #0B57D0; color: #fff; font: 500 14px/20px 'Google Sans', Roboto, Arial, sans-serif; }
.g2__box { margin: 3px 16px 0; height: 44px; border-radius: 25px; box-shadow: 0 2px 8px rgba(60,64,67,.25); display: flex; align-items: center; padding: 0 14px 0 12px; gap: 16px; }
.g2__box svg { width: 24px; height: 24px; fill: #5f6368; flex: none; }
.g2__box .q { flex: 1; font-size: 16px; color: #1f1f1f; }
.g2__box .sep { width: 1px; height: 28px; background: #dadce0; margin: 0 -2px; }
.g2__box .mic { fill: #444746; }
.g2__tabs { display: flex; gap: 25px; padding: 14px 16px 0; height: 48px; border-bottom: 1px solid #dadce0; white-space: nowrap; font: 400 14px/20px 'Google Sans', Roboto, Arial, sans-serif; color: #4d5156; overflow: hidden; }
.g2__tabs .on { color: #16171a; font-weight: 500; position: relative; }
.g2__tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 3px; border-radius: 3px 3px 0 0; background: #16171a; }
.g2__loc { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 12px 0 16px; font: 400 14px/20px 'Google Sans', Roboto, Arial, sans-serif; color: #4e5059; }
.g2__loc svg { width: 20px; height: 20px; fill: #4e5059; }
.g2__loc b { font-weight: 700; }
.g2__loc a { color: #1558D6; }
.g2__loc .dots { margin-left: auto; width: 18px; height: 18px; fill: #4e5059; }
.g2__gap { height: 8px; background: #f1f3f4; }
.g2__sec { padding: 16px 16px 6px; }
.g2__sech { display: flex; justify-content: space-between; align-items: center; font: 500 18px/26px 'Google Sans', Roboto, Arial, sans-serif; color: #202124; padding-bottom: 14px; border-bottom: 3px solid #ecedef; border-radius: 0 0 2px 2px; }
.g2__sech svg { width: 18px; height: 18px; fill: #4e5059; }
.g2__ad { padding: 18px 0 10px; }
.g2__site { display: flex; align-items: center; gap: 12px; }
.g2__fav { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px #ecedef; overflow: hidden; }
.g2__site > span:not(.g2__fav) { flex: 1; min-width: 0; }
.g2__fav .mlogo { width: 28px !important; height: 28px !important; }
.g2__site b { display: block; font: 400 14px/20px 'Google Sans', Roboto, Arial, sans-serif; color: #16171a; }
.g2__site small { display: block; font: 400 12px/16px Roboto, Arial, sans-serif; color: #3c4043; }
.g2__site svg { width: 18px; height: 18px; fill: #4e5059; }
.g2__title { margin-top: 14px; font: 400 22px/28px 'Google Sans', Roboto, Arial, sans-serif; color: #1558D6; }
.g2__desc { margin-top: 8px; font: 400 14px/20px Roboto, Arial, sans-serif; color: #474747; }
.g2__desc b { color: #1f1f1f; font-weight: 400; }
.g2__sl { margin-top: 12px; border-top: 1px solid #ecedef; }
.g2__sl div { display: flex; justify-content: space-between; align-items: center; height: 48px; border-bottom: 1px solid #ecedef; font: 400 16px/24px 'Google Sans', Roboto, Arial, sans-serif; color: #1558D6; }
.g2__sl svg { width: 20px; height: 20px; fill: #1f1f1f; }
.safari { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; height: 104px; padding: 18px 14px 0; background: linear-gradient(rgba(255,255,255,0), #fff 40%); }
.safari__bar { height: 50px; border-radius: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: rgba(250,250,252,.92); box-shadow: 0 6px 20px rgba(0,0,0,.12), inset 0 0 0 .5px rgba(0,0,0,.08); font: 400 16px/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color: #000; }
.safari__bar .aa { font-size: 15px; font-weight: 500; }
.safari__bar .u { display: flex; align-items: center; gap: 6px; }
.safari__bar svg { fill: #000; }

/* ---------- Google Maps ---------- */
.mp { font-family: Roboto, Arial, sans-serif; background: #F2EFE9; }
.mp__map { position: absolute; inset: 0 0 auto 0; height: 470px; }
.mp__map > svg { width: 100%; height: 100%; display: block; }
.mp__lbl { position: absolute; font: 500 12px/1 Roboto, Arial, sans-serif; color: #5f6368; text-shadow: 0 0 3px #fff, 0 0 3px #fff; letter-spacing: .02em; }
.mp__lbl--city { font-size: 15px; color: #3c4043; }
.mp__lbl--water { color: #1A73E8; font-style: italic; font-weight: 400; }
.mp__search { position: absolute; z-index: 5; top: 60px; left: 12px; right: 12px; height: 50px; border-radius: 25px; background: #fff; box-shadow: 0 2px 6px rgba(60,64,67,.3); display: flex; align-items: center; gap: 14px; padding: 0 16px; font-size: 16px; color: #1f1f1f; }
.mp__search svg { width: 22px; height: 22px; fill: #444746; flex: none; }
.mp__search .q { flex: 1; }
.mp__chips { position: absolute; z-index: 5; top: 122px; left: 12px; display: flex; gap: 8px; }
.mp__chips span { padding: 7px 14px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.3); font: 500 14px/20px 'Google Sans', Roboto, Arial, sans-serif; color: #444746; white-space: nowrap; }
.mp__pin { position: absolute; z-index: 4; width: 26px; height: 37px; margin: -37px 0 0 -13px; }
.mp__pin--hl { width: 40px; height: 56px; margin: -56px 0 0 -20px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.mp__pinlbl { position: absolute; z-index: 4; font: 500 13px/1.2 Roboto, Arial, sans-serif; color: #C5221F; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; white-space: nowrap; }
.mp__sheet { position: absolute; z-index: 6; left: 0; right: 0; top: 430px; bottom: 0; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -1px 6px rgba(60,64,67,.2); padding: 10px 16px 0; }
.mp__grab { width: 36px; height: 4px; border-radius: 2px; background: #dadce0; margin: 0 auto 14px; }
.mp__name { font: 400 22px/28px 'Google Sans', Roboto, Arial, sans-serif; color: #1f1f1f; }
.mp__rate { margin-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #474747; }
.mp__rate i { font-style: normal; color: #FBBC04; letter-spacing: 1px; font-size: 13px; }
.mp__meta { margin-top: 2px; font-size: 14px; color: #474747; }
.mp__open { margin-top: 2px; font-size: 14px; color: #474747; }
.mp__open em { font-style: normal; color: #188038; }
.mp__btns { display: flex; gap: 8px; margin-top: 14px; }
.mp__btns span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; background: #E8F0FE; color: #0B57D0; font: 500 14px/1 'Google Sans', Roboto, Arial, sans-serif; white-space: nowrap; }
.mp__btns span.pri { background: #0B57D0; color: #fff; }
.mp__btns svg { width: 18px; height: 18px; fill: currentColor; }
.mp__photos { display: flex; gap: 6px; margin-top: 16px; }
.mp__photos i { flex: none; width: 120px; height: 90px; border-radius: 10px; background: linear-gradient(135deg, #dfe6ee, #c9d3de); }
.mp__photos i:nth-child(2) { background: linear-gradient(135deg, #e8e1d6, #d3c7b6); }
.mp__photos i:nth-child(3) { background: linear-gradient(135deg, #dde9df, #c4d6c7); }

/* ---------- ChatGPT ---------- */
.cg__hdr { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 0; height: 56px; }
.cg__btn { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 12px rgba(0,0,0,.08), inset 0 0 0 .5px rgba(0,0,0,.06); }
.cg__body { padding: 18px 16px 0; }
.cg__user { margin-left: auto; width: fit-content; max-width: 78%; padding: 10px 16px; border-radius: 22px; background: #E8F1FC; color: #1B5FC1; font-size: 17px; line-height: 1.35; }
.cg__ans { margin-top: 22px; font-size: 17px; line-height: 1.5; color: #0d0d0d; }
.cg__ans p { margin: 0 0 12px; }
.cg__ans b { font-weight: 600; }
.cg__src { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin-left: 4px; border-radius: 11px; background: #F1F1F1; color: #5d5d5d; font-size: 12px; font-weight: 500; vertical-align: 2px; }
.cg__fade { color: #b4b4b4; }
.cg__acts { display: flex; gap: 18px; margin-top: 4px; }
.cg__acts svg { width: 18px; height: 18px; stroke: #6e6e6e; fill: none; stroke-width: 1.8; }
.cg__comp { position: absolute; z-index: 12; left: 14px; right: 14px; bottom: 30px; height: 52px; border-radius: 26px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.1), inset 0 0 0 .5px rgba(0,0,0,.08); display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; font-size: 17px; color: #8e8e93; }
.cg__comp .plus { font-size: 26px; font-weight: 300; color: #000; line-height: 1; }
.cg__comp .ph { flex: 1; }
.cg__comp .send { width: 38px; height: 38px; border-radius: 50%; background: #2F80ED; display: grid; place-items: center; }

/* ---------- Gmail ---------- */
.gm { font-family: Roboto, Arial, sans-serif; }
.gm__search { margin: 4px 12px 0; height: 48px; border-radius: 24px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); display: flex; align-items: center; gap: 18px; padding: 0 8px 0 16px; font-size: 16px; color: #5f6368; }
.gm__search .ham { width: 24px; height: 24px; fill: #444746; }
.gm__search .q { flex: 1; }
.gm__av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #1A73E8; color: #fff; font: 500 15px/1 Roboto, Arial, sans-serif; }
.gm__lbl { padding: 18px 16px 6px; font-size: 13px; color: #5f6368; }
.gm__row { display: flex; gap: 14px; padding: 10px 16px 10px; }
.gm__row .av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 500 18px/1 Roboto, Arial, sans-serif; }
.gm__row .c { flex: 1; min-width: 0; }
.gm__row .t b { font-weight: 400; }
.gm__row .t { display: flex; justify-content: space-between; font-size: 16px; color: #1f1f1f; }
.gm__row .t small { font-size: 12px; color: #5f6368; }
.gm__row .s, .gm__row .p { display: block; font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #5f6368; }
.gm__row .s { color: #1f1f1f; }
.gm__row.un .t b, .gm__row.un .s { font-weight: 700; }
.gm__row.un .t small { color: #1f1f1f; font-weight: 700; }
.gm__row .star { width: 22px; height: 22px; fill: none; stroke: #5f6368; stroke-width: 1.6; flex: none; align-self: flex-end; }
.gm__row--hl { background: #FDF3EE; animation: rowGlow 2.8s ease-in-out 2.6s infinite; }
@keyframes rowGlow { 50% { background: #fff; } }
.gm__fab { position: absolute; z-index: 12; right: 16px; bottom: 112px; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; border-radius: 18px; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.2); color: #C5221F; font: 500 15px/1 Roboto, Arial, sans-serif; }
.gm__fab svg { width: 22px; height: 22px; fill: #C5221F; }
.gm__tab { position: absolute; z-index: 11; left: 0; right: 0; bottom: 0; height: 84px; background: #F8F9FC; border-top: 1px solid #ececec; display: flex; justify-content: space-around; padding-top: 14px; }
.gm__tab svg { width: 24px; height: 24px; fill: #444746; }
.gm__tab .on { position: relative; }
.gm__tab .on svg { fill: #C5221F; }
.gm__tab .on b { position: absolute; top: -8px; left: 14px; padding: 1px 6px; border-radius: 9px; background: #C5221F; color: #fff; font: 700 11px/16px Roboto, Arial, sans-serif; }

/* /styles3.css */
/* TZ2 Hero-Stile 2 (Split) und 3 (Bento) sowie die Leistungskarten mit echten Screens. */

/* Gemeinsam: grosse iOS-Mitteilung ausserhalb des Geräts */
.ban { position: absolute; z-index: 6; width: 330px; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 26px; background: rgba(250,250,252,.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 44px rgba(2,10,24,.16), inset 0 0 0 .5px rgba(0,0,0,.08); font: 400 14px/1.3 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color: #000; text-align: left; opacity: 0; transform: translateY(-16px) scale(.96); }
.ban__ic { width: 40px; height: 40px; flex: none; border-radius: 10px; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1); }
.ban__b { flex: 1; min-width: 0; }
.ban__app { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: #6e6e73; }
.ban__app small { text-transform: none; font-size: 12px; }
.ban b { display: block; font-weight: 600; font-size: 15px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ban__b > span:last-child { display: block; color: #3a3a3c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-in .ban { animation: banIn .8s cubic-bezier(.2,1.25,.35,1) forwards; }
@keyframes banIn { to { opacity: 1; transform: none; } }
.trustbar--left { justify-content: flex-start; }

/* ---------- Stil 2: Split ---------- */
.s2 { position: relative; overflow: clip; padding: 56px 0 40px; }
.s2__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.s2__h { margin: 14px 0 0; font: 700 clamp(48px, 5.6vw, 88px)/1.02 var(--f-display); letter-spacing: -0.04em; }
.s2__h .hl { color: var(--orange); }
.s2 .lead { margin-top: 24px; max-width: 50ch; }
.s2__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.s2__stage { position: relative; height: 660px; display: flex; justify-content: center; align-items: center; }
.s2__blob { width: 460px; height: 460px; left: 50%; top: 50%; margin: -230px 0 0 -200px; }
.s2__ring { position: absolute; z-index: -1; width: 600px; height: 600px; left: 50%; top: 50%; margin: -300px 0 0 -270px; border-radius: 50%; border: 1.5px dashed rgba(252,76,1,.35); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.s2__phone { position: relative; z-index: 3; transform: rotate(4deg); margin-left: 90px; }
.is-in .s2__phone { animation: s2in 1.1s var(--ease) both; }
@keyframes s2in { from { opacity: 0; transform: rotate(10deg) translateY(80px); } to { opacity: 1; transform: rotate(4deg); } }
.s2 .ban--1 { left: -10px; top: 120px; animation-delay: 1.1s; }
.s2 .ban--2 { left: 30px; top: 250px; animation-delay: 1.8s; }
.s2 .ban--3 { left: -30px; top: 380px; animation-delay: 2.5s; }
.s2__proof { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.s2__proof .hero-proof { justify-content: flex-start; }
.s2__proof .mock-note { text-align: left; }

/* ---------- Stil 3: Bento ---------- */
.s3 { padding: 56px 0 40px; }
.s3__top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: end; }
.s3__h { margin: 14px 0 0; font: 700 clamp(48px, 6vw, 96px)/1 var(--f-display); letter-spacing: -0.045em; }
.s3__h .hl { color: var(--orange); }
.s3__side .lead { max-width: 46ch; }
.s3__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.s3 .trustbar { margin-top: 32px; }
.bento { margin-top: 40px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 300px 300px; gap: 16px; }
.bt { position: relative; overflow: hidden; border-radius: 28px; background: var(--surface); opacity: 0; transform: translateY(24px); }
.is-in .bt { animation: rise .9s var(--ease) forwards; }
.bt__k { position: absolute; z-index: 3; top: 18px; left: 20px; padding: 5px 12px; border-radius: 100px; background: rgba(255,255,255,.9); font: 500 .6875rem/1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--grey-ink); }
.frag { position: absolute; left: 22px; top: 62px; width: 375px; transform: scale(var(--s)); transform-origin: 0 0; background: #fff; border-radius: 22px; padding: 14px 0 6px; box-shadow: 0 18px 40px rgba(2,10,24,.10); color: #1f1f1f; font: 400 16px/1.4 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; text-align: left; }
.bt--ad { grid-column: 1 / 6; grid-row: 1 / 3; }
.bt--ad .frag { left: 50%; margin-left: calc(-375px * var(--s) / 2); top: 70px; }
.bt--ad .g2__box { margin-top: 0; }
.bt--chat { grid-column: 6 / 10; grid-row: 1; }
.bt--chat .frag { padding: 0 0 6px; }
.bt--chat .cg__body { padding-top: 16px; }
.bt--stat { grid-column: 10 / 13; grid-row: 1; background: var(--orange); color: var(--black); padding: 64px 24px 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.bt--stat .bt__k { background: rgba(2,10,24,.08); color: var(--black); }
.grid-ink::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(2,10,24,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(2,10,24,.07) 1px, transparent 1px); background-size: 40px 40px; }
.bt__num { position: relative; font: 700 4rem/1 var(--f-display); letter-spacing: -0.04em; }
.bt__unit { position: relative; margin-top: 8px; font: 500 1rem/1.35 var(--f-display); }
.bt--photo { grid-column: 6 / 9; grid-row: 2; }
.bt--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt__cap { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); font-size: .8125rem; line-height: 1.35; color: var(--grey-ink); }
.bt__cap b { display: block; color: var(--black); font-family: var(--f-display); font-size: .9375rem; }
.bt--maps { grid-column: 9 / 13; grid-row: 2; }
.bt--maps .frag { top: 96px; padding: 0; overflow: hidden; }
.mp__sheet--flat { position: static !important; box-shadow: none !important; border-radius: 0 !important; padding: 16px 18px 16px !important; }
.bt--maps .ban--bento { top: 52px; left: auto; right: 14px; width: 300px; animation-delay: 2s; }
.bento > .bt:nth-child(2) { animation-delay: .1s; }
.bento > .bt:nth-child(3) { animation-delay: .2s; }
.bento > .bt:nth-child(4) { animation-delay: .3s; }
.bento > .bt:nth-child(5) { animation-delay: .4s; }
.type p { opacity: 0; }
.is-in .type p { animation: rise .6s var(--ease) forwards; }
.is-in .type p:nth-child(1) { animation-delay: .9s; }
.is-in .type p:nth-child(2) { animation-delay: 1.5s; }
.s3__proof { margin-top: 28px; }
.s3__proof .hero-proof { justify-content: flex-start; }
.s3__proof .mock-note { text-align: left; }

/* ---------- Leistungskarten mit echten Screens ---------- */
.dev2 { position: relative; height: 330px; border-radius: 20px; background: var(--surface); overflow: hidden; display: flex; justify-content: center; padding-top: 30px; }
.dev2::after { content: ""; position: absolute; inset: auto 0 0; height: 60px; background: linear-gradient(rgba(244,244,245,0), rgba(244,244,245,.95)); pointer-events: none; z-index: 2; }
.dev2 .iph { transition: transform .6s var(--ease); box-shadow: 0 0 0 calc(11px * var(--s)) #121215, 0 0 0 calc(12.5px * var(--s)) #44444a, 0 24px 50px rgba(2,10,24,.18); }
.svc__card:hover .dev2 .iph { transform: translateY(-10px); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .s2__grid, .s3__top { grid-template-columns: 1fr; }
  .s2__stage { height: 640px; }
  .s2__phone { margin-left: 0; }
  .bento { grid-template-columns: repeat(6, 1fr); grid-template-rows: 560px 300px 300px; }
  .bt--ad { grid-column: 1 / 7; grid-row: 1; }
  .bt--chat { grid-column: 1 / 5; grid-row: 2; }
  .bt--stat { grid-column: 5 / 7; grid-row: 2; }
  .bt--photo { grid-column: 1 / 3; grid-row: 3; }
  .bt--maps { grid-column: 3 / 7; grid-row: 3; }
}
@media (max-width: 767px) {
  .s2__h, .s3__h { font-size: calc((100vw - 40px) / 8.1); }
  .s2__ctas .btn, .s3__ctas .btn { width: 100%; }
  .s2__stage { height: 560px; }
  .s2__phone .iph { --s: .66 !important; }
  .ban { width: 270px; padding: 10px 12px; }
  .s2 .ban--1 { left: 0; top: 40px; }
  .s2 .ban--2 { left: auto; right: 0; top: 200px; }
  .s2 .ban--3 { display: none; }
  .bento { display: flex; flex-direction: column; }
  .bt { min-height: 300px; }
  .bt--ad { min-height: 520px; }
  .bt--ad .frag { --s: .86 !important; }
  .bt--chat .frag, .bt--maps .frag { --s: .78 !important; }
  .bt--stat { min-height: 200px; }
  .bt--photo { min-height: 360px; }
  .bt--maps .ban--bento { width: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .ban, .bt, .type p { opacity: 1 !important; transform: none !important; }
}

/* Stil 2: Vertrauensleiste kompakt, Mitteilungen mit Abstand zur Headline */
.s2 .trustbar { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 10px; }
.s2 .trustbar .kicheck { grid-column: 1 / -1; order: -1; justify-self: start; }
.s2 .ban--1 { left: 30px; }
.s2 .ban--2 { left: 70px; }
.s2 .ban--3 { left: 20px; }
@media (max-width: 767px) {
  .s2 .trustbar { grid-template-columns: 1fr; }
  .s2 .ban--1 { left: 0; }
  .s2 .ban--2 { left: auto; }
}

/* /v5.css */
/* TZ2 Versionen hell, dunkel, Mischung: Grain-Verläufe, Laufschrift, Scroll-Text, Kreislauf, Case-Stapel. */

:root { --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.t-hell { --pg: #FFFFFF; --ink: #020A18; --mut: #6B6C6E; --card: #F4F4F5; --card2: #FFFFFF; --line: #E6E6E8; --ghost: #D9D9D6; --sec: #F4F4F5; }
.t-dunkel { --pg: #05070C; --ink: #F2F2F2; --mut: #A9ADB5; --card: #0E131C; --card2: #121926; --line: rgba(233,233,233,.12); --ghost: #2A303A; --sec: #080B12; }
.t-mix { --pg: #FFFFFF; --ink: #020A18; --mut: #6B6C6E; --card: #F4F4F5; --card2: #FFFFFF; --line: #E6E6E8; --ghost: #D9D9D6; --sec: #F4F4F5; }

body.v5 { background: var(--pg); color: var(--ink); }
.v5 .head__lead, .v5 .lead { color: var(--mut); }
.v5 .h1, .v5 h2, .v5 h3 { color: var(--ink); }

/* Korn über ganze dunkle Seite */
.t-dunkel::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; background-image: var(--grain); opacity: .09; mix-blend-mode: overlay; }

/* Navigation dunkel */
.t-dunkel .nav, .t-mix .nav { background: rgba(5,7,12,.72); }
.t-dunkel .nav.is-scrolled, .t-mix .nav.is-scrolled { box-shadow: 0 1px 0 rgba(233,233,233,.1); }
.t-dunkel .nav__links a, .t-mix .nav__links a { color: #F2F2F2; }
.t-dunkel .nav__links a:hover, .t-mix .nav__links a:hover { background: rgba(233,233,233,.08); color: var(--orange); }
.t-dunkel .nav__tel, .t-mix .nav__tel { color: #A9ADB5; }
.t-dunkel .nav__toggle, .t-mix .nav__toggle { background: rgba(233,233,233,.1); }
.t-dunkel .nav__toggle span, .t-mix .nav__toggle span { background: #F2F2F2; }
.t-dunkel .nav__mobile, .t-mix .nav__mobile { background: #05070C; border-color: rgba(233,233,233,.1); }
.t-dunkel .nav__mobile a, .t-mix .nav__mobile a { color: #F2F2F2; border-color: rgba(233,233,233,.1); }

/* ---------- Bühne mit Korn und Verlauf ---------- */
.stage { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; margin: 0 16px; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--grain); opacity: .22; mix-blend-mode: overlay; }
.stage--warm { background: #120A08;
  background-image:
    radial-gradient(60% 70% at 15% 10%, #FFB347 0%, rgba(255,179,71,0) 60%),
    radial-gradient(70% 80% at 50% 30%, #FC4C01 0%, rgba(252,76,1,0) 65%),
    radial-gradient(60% 70% at 90% 20%, #DB4405 0%, rgba(219,68,5,0) 60%),
    radial-gradient(80% 60% at 85% 100%, #4A24AA 0%, rgba(74,36,170,0) 60%),
    radial-gradient(70% 60% at 10% 100%, #201547 0%, rgba(32,21,71,0) 70%); }
.stage--light { background: #FFFFFF;
  background-image:
    radial-gradient(42% 55% at 18% 82%, rgba(255,157,110,.55) 0%, rgba(255,157,110,0) 70%),
    radial-gradient(40% 50% at 86% 70%, rgba(252,76,1,.42) 0%, rgba(252,76,1,0) 70%),
    radial-gradient(30% 40% at 60% 0%, rgba(171,146,225,.30) 0%, rgba(171,146,225,0) 70%); }
.stage--light::after { opacity: .28; mix-blend-mode: multiply; }
.stage--warm .eyebrow { color: #FFE2D3; }
.stage--warm .vh__h { color: #FFFFFF; }
.stage--warm .vh__h .hl { color: #020A18; }
.stage--warm .lead { color: rgba(255,255,255,.86); }
.stage--warm .btn--line { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.stage--warm .btn--line:hover { background: #fff; color: #020A18; }
.stage--warm .btn--orange { background: #020A18; color: #fff; }
.stage--warm .btn--orange:hover { background: #fff; color: #020A18; }

/* ---------- Hero ---------- */
.vh { padding-top: 8px; }
.vh .stage { padding: 72px 0 0; }
.vh__copy { position: relative; z-index: 3; text-align: center; }
.vh__h { margin: 14px auto 0; max-width: 14ch; font: 700 clamp(48px, 6.4vw, 96px)/1.0 var(--f-display); letter-spacing: -0.045em; color: var(--ink); }
.vh__h .hl { color: var(--orange); }
.vh .lead { margin: 22px auto 0; max-width: 58ch; }
.vh .hb__ctas { justify-content: center; }
.vh__show { position: relative; height: 600px; margin-top: 48px; }
.mq { position: absolute; z-index: 2; left: 0; right: 0; top: 170px; overflow: hidden; white-space: nowrap; pointer-events: none; }
.mq__in { display: inline-flex; animation: mq 38s linear infinite; }
.mq__in span { padding-right: .4em; font: 700 clamp(110px, 15vw, 230px)/1 var(--f-display); letter-spacing: -0.05em; color: #FFFFFF; }
.stage--light .mq__in span { color: var(--orange); }
@keyframes mq { to { transform: translateX(-50%); } }
.vh__fan { position: absolute; z-index: 4; inset: 0; display: flex; justify-content: center; align-items: flex-start; }
.vh__fan .hb__dev { opacity: 0; }
.is-in .vh__fan .hb__dev { animation: fanUp 1.1s var(--ease) forwards; }
.is-in .vh__fan .hb__dev--l { animation-delay: .25s; }
.is-in .vh__fan .hb__dev--r { animation-delay: .4s; }
.vh__fan .hb__dev--l .iph { transform: rotate(-8deg); }
.vh__fan .hb__dev--r .iph { transform: rotate(8deg); }
.vh__fan .hb__dev--l { margin-right: -34px; margin-top: 70px; }
.vh__fan .hb__dev--r { margin-left: -34px; margin-top: 70px; }
.vh__fan .hb__dev--c { z-index: 2; }
.vh__proof { padding: 22px 0 0; }
.vh__proof .hero-proof { color: var(--mut); }
.vh__proof .hero-proof strong { color: var(--ink); }

/* ---------- Scroll-Text ---------- */
.vs { padding: 140px 0 120px; }
.vs__p { max-width: 1120px; font: 500 clamp(30px, 3.6vw, 56px)/1.18 var(--f-display); letter-spacing: -0.02em; }
.vs__p .w { color: var(--ghost); transition: color .35s var(--ease); }
.vs__p .w.on { color: var(--ink); }
.vs__p .w.hl.on { color: var(--orange); }

/* ---------- Leistungen ---------- */
.v5 .sec--surface { background: var(--sec); }
.v5 .svc__card { background: var(--card2); box-shadow: none; }
.t-dunkel .svc__card { box-shadow: inset 0 0 0 1px var(--line); }
.v5 .svc__card > p:not(.svc__k), .v5 .svc__card .svc__tag { color: var(--mut) !important; }
.v5 .svc__card .svc__tag { color: var(--ink) !important; }
.v5 .svc__card h3, .v5 .svc__more { color: var(--ink); }
.v5 .dev2 { background: var(--card); }
.t-dunkel .dev2 { background: #151B26; }
.t-dunkel .dev2::after { background: linear-gradient(rgba(21,27,38,0), rgba(21,27,38,.95)); }
.v5 .dev2 .stage-mini { position: absolute; inset: 0; }
.t-dunkel .wide-link { background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); color: var(--mut); }
.t-dunkel .wide-link b { color: var(--ink); }

/* ---------- Kreislauf (Lehrbuch-Stil) ---------- */
.cyc5 { padding: 120px 0; }
.cyc5__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px; align-items: center; }
.cyc5__fig { position: relative; aspect-ratio: 1 / 1; max-width: 640px; width: 100%; margin: 0 auto; }
.cyc5__fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seg { fill: none; stroke-width: 58; stroke-dasharray: var(--len) var(--c); stroke-dashoffset: var(--len); }
.is-in .seg { animation: segIn 1s var(--ease) forwards; }
.is-in .seg:nth-of-type(2) { animation-delay: .25s; }
.is-in .seg:nth-of-type(3) { animation-delay: .5s; }
.is-in .seg:nth-of-type(4) { animation-delay: .75s; }
@keyframes segIn { to { stroke-dashoffset: 0; } }
.cyc5__node { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.is-in .cyc5__node { animation: nodeIn .7s cubic-bezier(.2,1.4,.4,1) forwards; }
.is-in g:nth-of-type(2) > .cyc5__node { animation-delay: .35s; }
.is-in g:nth-of-type(3) > .cyc5__node { animation-delay: .6s; }
.is-in g:nth-of-type(4) > .cyc5__node { animation-delay: .85s; }
@keyframes nodeIn { to { transform: scale(1); } }
.cyc5__center { font: 700 26px/1.1 var(--f-display); fill: var(--ink); letter-spacing: -0.02em; }
.cyc5__lbl { position: absolute; width: 168px; font-size: .9375rem; line-height: 1.45; color: var(--mut); }
.cyc5__lbl b { display: block; font: 700 1.0625rem/1.3 var(--f-display); color: var(--ink); margin-bottom: 4px; }
.cyc5__lbl--1 { left: 50%; top: -2%; transform: translate(-50%, -100%); text-align: center; }
.cyc5__lbl--2 { left: 100%; top: 50%; transform: translate(4%, -50%); }
.cyc5__lbl--3 { left: 50%; top: 102%; transform: translateX(-50%); text-align: center; }
.cyc5__lbl--4 { right: 100%; top: 50%; transform: translate(-4%, -50%); text-align: right; }
.cyc5__wrap { padding: 96px 175px; }
.cyc5__dot { fill: var(--orange); filter: drop-shadow(0 0 8px rgba(252,76,1,.7)); }

/* ---------- Cases als Stapel mit Zahlen-Laufband ---------- */
.cs5 { padding: 120px 0 80px; }
.cs5__stack { display: grid; gap: 28px; }
.cs5__card { position: sticky; top: 104px; display: block; height: 560px; border-radius: 28px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; box-shadow: 0 30px 60px rgba(2,10,24,.22); }
.cs5__card:nth-child(2) { top: 124px; }
.cs5__card:nth-child(3) { top: 144px; }
.cs5__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.cs5__card:hover img { transform: scale(1.06); }
.cs5__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2,10,24,.78) 0%, rgba(2,10,24,.35) 55%, rgba(2,10,24,.1) 100%); }
.cs5__card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); opacity: .18; mix-blend-mode: overlay; }
.cs5__top { position: absolute; z-index: 2; left: 40px; right: 40px; top: 34px; display: flex; justify-content: space-between; gap: 24px; font: 500 1.0625rem/1.4 var(--f-display); }
.cs5__top span:first-child { max-width: 34ch; }
.cs5__body { position: absolute; z-index: 2; left: 40px; bottom: 120px; }
.cs5__num { font: 700 clamp(64px, 8vw, 120px)/1 var(--f-display); letter-spacing: -0.045em; }
.cs5__unit { margin-top: 8px; font: 500 1.25rem/1.3 var(--f-display); color: #FFD9C7; }
.cs5__go { display: inline-flex; margin-top: 22px; padding: 12px 20px; border-radius: 100px; background: #fff; color: #020A18; font: 700 .875rem/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.cs5__tick { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 74px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; background: rgba(2,10,24,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.14); }
.cs5__tick > div { display: inline-flex; animation: mq 26s linear infinite; }
.cs5__tick span { padding: 0 28px; font: 500 1.125rem/1 var(--f-display); color: #fff; }
.cs5__tick span b { color: var(--orange); margin-right: 8px; }

/* ---------- Abschluss ---------- */
.end5 { padding: 40px 0 120px; }
.end5 .stage { padding: 110px 24px; text-align: center; }
.end5 h2 { color: #fff; font: 700 clamp(44px, 5.6vw, 88px)/1.02 var(--f-display); letter-spacing: -0.04em; }
.end5 .stage--light h2 { color: var(--ink); }
.end5 p { margin: 18px auto 0; max-width: 52ch; color: rgba(255,255,255,.86); font-size: 1.125rem; }
.end5 .stage--light p { color: var(--mut); }
.end5 .hb__ctas { justify-content: center; margin-top: 30px; }

/* Mischung: einzelne Bereiche dunkel */
.t-mix .cyc5, .t-mix .cs5 { background: #05070C; color: #F2F2F2; --ink: #F2F2F2; --mut: #A9ADB5; --ghost: #2A303A; --line: rgba(233,233,233,.12); }
.t-mix .cyc5 { position: relative; }
.t-mix .cyc5::after, .t-mix .cs5::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .08; mix-blend-mode: overlay; }
.t-mix .cs5 { position: relative; }
.t-dunkel .seg-a { stroke: #2A303A; } .t-dunkel .seg-b { stroke: #343B47; } .t-dunkel .seg-c { stroke: #3F4754; } .t-dunkel .seg-d { stroke: #4B5462; }
.t-mix .cyc5 .seg-a { stroke: #2A303A; } .t-mix .cyc5 .seg-b { stroke: #343B47; } .t-mix .cyc5 .seg-c { stroke: #3F4754; } .t-mix .cyc5 .seg-d { stroke: #4B5462; }
.seg-a { stroke: #E9E9E9; } .seg-b { stroke: #D9D9D6; } .seg-c { stroke: #BDBEBF; } .seg-d { stroke: #97999B; }
.t-dunkel .eyebrow, .t-mix .cyc5 .eyebrow, .t-mix .cs5 .eyebrow { color: var(--orange); }
.t-dunkel .link, .t-mix .cs5 .link { color: var(--ink); }

/* ---------- Mobil ---------- */
@media (max-width: 1023px) {
  .vh__fan .hb__dev--l, .vh__fan .hb__dev--r { display: none; }
  .cyc5__grid { grid-template-columns: 1fr; }
  .cyc5__wrap { padding: 80px 0; }
  .cyc5__lbl { width: 150px; font-size: .8125rem; }
  .cyc5__lbl--2 { left: auto; right: 0; transform: translate(0, -50%); }
  .cyc5__lbl--4 { right: auto; left: 0; transform: translate(0, -50%); text-align: left; }
}
@media (max-width: 767px) {
  .stage { margin: 0 8px; border-radius: 24px; }
  .vh .stage { padding-top: 40px; }
  .vh__h { font-size: calc((100vw - 56px) / 8.1); }
  .vh__show { height: 500px; }
  .mq { top: 130px; }
  .vs { padding: 90px 0 70px; }
  .cyc5 { padding: 80px 0; }
  .cyc5__wrap { padding: 70px 0 90px; }
  .cyc5__lbl { width: 120px; }
  .cyc5__lbl--2, .cyc5__lbl--4 { top: 112%; }
  .cs5__card { height: 520px; top: 84px; }
  .cs5__card:nth-child(2) { top: 96px; } .cs5__card:nth-child(3) { top: 108px; }
  .cs5__top { left: 22px; right: 22px; top: 22px; flex-direction: column; gap: 6px; font-size: .9375rem; }
  .cs5__body { left: 22px; bottom: 100px; }
  .end5 .stage { padding: 72px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq__in, .cs5__tick > div { animation: none; }
  .seg { stroke-dashoffset: 0; } .cyc5__node { transform: none; }
  .vh__fan .hb__dev { opacity: 1; }
}

/* Pillen der Vertrauensleiste immer dunkle Schrift */
.v5 .tb, .v5 .kicheck { color: #020A18; }
.v5 .tb b, .v5 .kicheck__txt b { color: #020A18; }
.v5 .tb small { color: #6B6C6E; }
.cyc5__center { font-size: 30px; }
/* Feinschliff 04.11.: heller Hero ohne Beige-Stich, Kreislauf-Titel kleiner */
.stage--light { background-image:
    radial-gradient(40% 52% at 16% 86%, rgba(252,76,1,.30) 0%, rgba(252,76,1,0) 70%),
    radial-gradient(38% 48% at 88% 72%, rgba(252,76,1,.38) 0%, rgba(252,76,1,0) 70%),
    radial-gradient(28% 36% at 58% 0%, rgba(171,146,225,.26) 0%, rgba(171,146,225,0) 70%); }
.stage--light::after { opacity: .14; mix-blend-mode: soft-light; }
.cyc5 .h1 { font-size: clamp(36px, 3.4vw, 50px); }

/* /home.css */
/* TZ2 Startseite komplett (04.11.2026): übrige Live-Inhalte im hellen v5-Stil. Baut auf tz2.css, heroes.css und v5.css auf. */

/* ---------- Vertrauensleiste: swiss made software gleich wie Google Partner ---------- */
.home .trustbar .tb { min-width: 0; }

/* ---------- Hero kompakt: ohne Handy-Fächer und Zahlenzeile (04.11. spät) ---------- */
.vh--kompakt .stage { padding: 96px 0 104px; }
.vh--kompakt .lead { max-width: 52ch; text-wrap: balance; }

/* ---------- Kunden als Laufband ---------- */
.lg6 { padding: 64px 0 40px; }
.lg6__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.lg6__head .eyebrow { margin: 0; color: var(--mut); }
.lg6__meta { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--mut); font-size: .9375rem; }
.lg6__meta b { color: var(--ink); font: 700 .9375rem/1 var(--f-display); }
.lg6__meta i { width: 4px; height: 4px; margin: 0 8px; border-radius: 50%; background: var(--ghost); }
.lg6__mq { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.lg6__row { flex: none; display: flex; gap: 14px; padding: 6px 14px 10px 0; animation: lg6 56s linear infinite; }
.lg6__mq:hover .lg6__row, .lg6__mq:focus-within .lg6__row { animation-play-state: paused; }
@keyframes lg6 { to { transform: translateX(-100%); } }
.lg6__row li > * { position: relative; display: grid; place-items: center; width: 212px; height: 104px; border-radius: 22px; background: var(--card); text-decoration: none; transition: background var(--base) var(--ease), box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.lg6__row img { width: auto; height: 26px; max-width: 136px; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .5; transition: filter var(--base) var(--ease), opacity var(--base) var(--ease); }
.lg6__row .sq img { height: 42px; }
.lg6__row a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); transform: translateY(-3px); }
.lg6__row a:hover img { filter: none; opacity: 1; }
.lg6__case { position: absolute; top: 10px; right: 10px; padding: 5px 9px; border-radius: 100px; background: #fff; font: 700 .625rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); transition: background var(--base) var(--ease), color var(--base) var(--ease); }
.lg6__row a:hover .lg6__case { background: var(--orange); color: var(--black); }

/* ---------- Problem ---------- */
.pb6 { padding: 112px 0 24px; }
.pb6__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pb6__list li { position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 32px; border-radius: 28px; background: var(--card); overflow: hidden; transition: background var(--base) var(--ease), box-shadow var(--base) var(--ease), transform var(--base) var(--ease), opacity .7s var(--ease); }
.pb6__n { position: absolute; top: 10px; right: 22px; font: 700 128px/1 var(--f-display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--ghost); transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease); }
.pb6__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--ink); }
.pb6__ic svg { width: 24px; height: 24px; }
.pb6__list h3 { margin-top: 92px; font: 500 1.75rem/1.2 var(--f-display); }
.pb6__list p { margin-top: 12px; color: var(--mut); line-height: 1.6; max-width: 32ch; }
.pb6__list li:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); transform: translateY(-4px); }
.pb6__list li:hover .pb6__n { color: var(--orange); -webkit-text-stroke-color: var(--orange); }
.pb6__list li:hover .pb6__ic { background: var(--orange); }
.pb6__turn { margin: 72px auto 0; max-width: 24ch; text-align: center; font: 700 clamp(30px, 3.4vw, 52px)/1.12 var(--f-display); letter-spacing: -0.03em; }
.pb6__turn::before { content: ""; display: block; width: 2px; height: 80px; margin: 0 auto 32px; border-radius: 2px; background: linear-gradient(var(--line), var(--orange)); transform-origin: top; transition: transform 1.1s var(--ease) .15s; }
.js .pb6__turn::before { transform: scaleY(0); }
.js .pb6__turn.is-in::before { transform: none; }
.pb6 + .vs { padding-top: 104px; }

/* ---------- Leistungen: Website als Fundament ---------- */
.fd6 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; margin-top: 16px; padding: 44px 44px 44px 48px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card); }
.fd6__copy .svc__k { margin-top: 0; }
.fd6__copy h3 { margin-bottom: 4px; font: 500 1.75rem/1.2 var(--f-display); }
.fd6__copy > p:not(.svc__k):not(.svc__tag) { max-width: 46ch; color: var(--mut); line-height: 1.7; }
.fd6__copy .svc__more { margin-top: 0; padding-top: 22px; text-decoration: none; color: var(--ink); }
.fd6__copy .svc__more:hover { color: var(--orange-ink); }
.fd6__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fd6__list li { display: grid; align-content: start; gap: 6px; padding: 22px; border-radius: 20px; background: var(--card); }
.fd6__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: #fff; color: var(--orange-ink); }
.fd6__ic svg { width: 22px; height: 22px; }
.fd6__list b { font: 700 1.0625rem/1.3 var(--f-display); }
.fd6__list li > span:last-child { color: var(--mut); font-size: .9375rem; line-height: 1.5; }

/* ---------- Ledger: Anfragen erhalten ihre Quelle ---------- */
.ld6 { padding: 0 0 24px; }
.ld6__panel.stage { margin: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: 64px; background-color: var(--card);
  background-image: radial-gradient(55% 70% at 0% 100%, rgba(252,76,1,.24) 0%, rgba(252,76,1,0) 70%), radial-gradient(45% 60% at 100% 0%, rgba(171,146,225,.26) 0%, rgba(171,146,225,0) 70%); }
.ld6__panel > * { position: relative; z-index: 2; }
.ld6__copy .h2 { margin-bottom: 16px; font: 500 2.5rem/1.15 var(--f-display); letter-spacing: -0.01em; }
.ld6__copy > p:not(.eyebrow) { color: var(--mut); line-height: 1.65; max-width: 44ch; }
.ld6__copy > .ld6__note { margin-top: 14px; color: var(--ink); font-weight: 700; }
.ld6__links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.ld6__win { box-shadow: 0 30px 70px rgba(2,10,24,.16); rotate: 1.2deg; transition: rotate .8s var(--ease); }
.ld6__panel:hover .ld6__win { rotate: 0deg; }
.js .ld6__win .sheet__row:not(.sheet__row--letters):not(.sheet__row--head) { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .ld6__panel.is-in .ld6__win .sheet__row { opacity: 1; transform: none; }
.ld6__panel.is-in .sheet__row:nth-child(3) { transition-delay: .55s; }
.ld6__panel.is-in .sheet__row:nth-child(4) { transition-delay: 1s; }
.ld6__panel.is-in .sheet__row:nth-child(5) { transition-delay: 1.45s; }
.ld6__panel.is-in .sheet__row:nth-child(6) { transition-delay: 1.7s; }
.ld6__panel.is-in .sheet__row:nth-child(7) { transition-delay: 1.8s; }

.cyc5:has(+ .ld6) { padding-bottom: 40px; }
.cs5:has(+ .qt6) { padding-bottom: 72px; }  /* 05.11.: etwas mehr Luft zwischen ECHOJAZZ-Case und Zitat */

/* ---------- Kundenstimme ---------- */
.qt6 { padding: 0 0 120px; }
.qt6__card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 32px; margin: 0; padding: 64px 72px; border-radius: 32px; background: var(--card); }
.qt6__mark { width: 72px; height: 72px; color: var(--orange); }
.qt6__card blockquote { margin: 0; }
.qt6__card blockquote p { font: 500 clamp(22px, 2.3vw, 34px)/1.32 var(--f-display); letter-spacing: -0.015em; color: var(--ink); max-width: 42ch; }
.qt6__card figcaption { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 18px; margin-top: 32px; }
.qt6__card figcaption img { width: 56px; height: 56px; border-radius: 50%; }
.qt6__card figcaption span { font-size: .9375rem; color: var(--mut); line-height: 1.4; }
.qt6__card figcaption b { display: block; font: 700 1.0625rem/1.3 var(--f-display); color: var(--ink); }
.qt6__card .link { margin-left: auto; }

/* ---------- Team ---------- */
.tm6 { padding: 120px 0; }
.tm6__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.tm6__intro .h1 { margin-bottom: 20px; }
.tm6__intro .head__lead { margin-bottom: 24px; }
.tm6__k { display: flex; align-items: center; gap: 14px; max-width: 440px; margin-bottom: 28px; padding: 10px 20px 10px 10px; border-radius: 100px; background: var(--card); font: 500 .9375rem/1.35 var(--f-display); }
.tm6__k img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.tm6__photos { position: relative; padding-bottom: 80px; }
.tm6__ph { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px rgba(2,10,24,.16); }
.tm6__ph img { width: 100%; height: auto; }
.tm6__ph--a { width: 84%; }
.tm6__ph--b { position: absolute; right: 0; bottom: 0; width: 36%; border: 8px solid #fff; border-radius: 26px; rotate: 3deg; }
.tm6__tag { position: absolute; left: 5%; bottom: 22px; z-index: 2; padding: 14px 22px; border-radius: 100px; background: var(--orange); color: var(--black); font: 700 1rem/1 var(--f-display); letter-spacing: .02em; rotate: -4deg; box-shadow: var(--shadow-orange); }
.tm6__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 72px; }
.tm6__list li { padding: 28px; border-radius: 24px; background: var(--card); transition: background var(--base) var(--ease), box-shadow var(--base) var(--ease), opacity .7s var(--ease), transform .7s var(--ease); }
.tm6__list li:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.tm6__list span { display: block; margin-bottom: 40px; font: 700 .8125rem/1 var(--f-display); letter-spacing: .12em; color: var(--orange-ink); }
.tm6__list h3 { margin-bottom: 8px; font: 500 1.25rem/1.25 var(--f-display); }
.tm6__list p { color: var(--mut); font-size: .9375rem; line-height: 1.55; }

/* ---------- Einstieg ---------- */
.en6 { padding: 120px 0; background: var(--sec); }
.en6__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 16px; }
.en6__card { display: flex; flex-direction: column; padding: 44px; border-radius: 32px; background-color: #fff; }
.en6__card.stage { margin: 0; }
.en6__card > * { position: relative; z-index: 2; }
.en6__k { margin-bottom: 14px; font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.en6__card h3 { max-width: 24ch; font: 500 1.75rem/1.2 var(--f-display); }
.en6__card > p:not([class]) { margin-top: 14px; color: var(--mut); line-height: 1.6; max-width: 46ch; }
.en6__who { display: flex; align-items: center; gap: 16px; max-width: 500px; margin-top: 22px; padding: 12px 20px 12px 12px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); line-height: 1.5; }
.en6__who img { width: 60px; height: 60px; border-radius: 50%; flex: none; }
.en6__lh { margin-top: 26px; font: 700 .9375rem/1.3 var(--f-display); }
.en6__card .ticks { margin: 12px 0 32px; }
.en6__card .btn { margin-top: auto; align-self: flex-start; }
.en6__price { margin-top: 26px; font: 700 clamp(48px, 4.6vw, 68px)/1 var(--f-display); letter-spacing: -0.04em; }
.en6__price small { display: block; margin-top: 10px; font: 400 .875rem/1.4 var(--f-body); letter-spacing: 0; color: var(--mut); }
.en6__price small:first-child { margin: 0 0 8px; font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.en6__note { margin-top: 22px; text-align: center; color: var(--mut); font-size: .9375rem; }
.en6__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 64px 0 0; border-radius: 28px; background: #fff; }
.en6__facts li { padding: 28px 28px 26px; border-left: 1px solid var(--line); }
.en6__facts li:first-child { border-left: 0; }
.en6__facts b { display: block; margin-bottom: 8px; font: 700 clamp(22px, 2.1vw, 30px)/1.1 var(--f-display); letter-spacing: -0.02em; }
.en6__facts span { color: var(--mut); font-size: .875rem; line-height: 1.45; }
.en6__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.en6__plan { display: flex; flex-direction: column; padding: 32px; border-radius: 28px; background: #fff; transition: box-shadow var(--base) var(--ease), opacity .7s var(--ease), transform .7s var(--ease); }
.en6__plan:hover { box-shadow: var(--shadow-lift); }
.en6__plan--hot { box-shadow: inset 0 0 0 2px var(--orange); }
.en6__plan--hot:hover { box-shadow: inset 0 0 0 2px var(--orange), var(--shadow-lift); }
.en6__pk { margin-bottom: 10px; font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.en6__plan--hot .en6__pk { color: var(--orange-ink); }
.en6__pn { font: 700 1.25rem/1.3 var(--f-display); }
.en6__pp { margin: 18px 0 14px; font: 700 2.75rem/1 var(--f-display); letter-spacing: -0.03em; }
.en6__pp small { display: block; margin-top: 8px; font: 400 .875rem/1.4 var(--f-body); letter-spacing: 0; color: var(--mut); }
.en6__pd { margin-bottom: 26px; color: var(--mut); line-height: 1.55; }
.en6__plan .link { margin-top: auto; align-self: flex-start; }

/* ---------- Werkzeuge ---------- */
.tl6 { padding: 104px 0; }
.tl6 .head { margin-bottom: 36px; }
.tl6__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tl6__grid a { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 220px; padding: 26px; border-radius: 26px; background: var(--card); text-decoration: none; transition: transform var(--base) var(--ease); }
.tl6__grid a::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s var(--ease);
  background: radial-gradient(80% 90% at 100% 100%, rgba(252,76,1,.5) 0%, rgba(252,76,1,0) 70%), radial-gradient(60% 70% at 0% 0%, rgba(171,146,225,.32) 0%, rgba(171,146,225,0) 70%), #fff; }
.tl6__grid a:hover { transform: translateY(-4px); }
.tl6__grid a:hover::before { opacity: 1; }
.tl6__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.tl6__ic img, .tl6__ic svg { width: 24px; height: 24px; }
.tl6__grid b { margin-top: auto; padding-top: 32px; font: 700 1.375rem/1.2 var(--f-display); letter-spacing: -0.01em; }
.tl6__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 700 .8125rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-ink); }
.tl6__go i { font-style: normal; transition: transform var(--base) var(--ease); }
.tl6__grid a:hover .tl6__go { color: var(--black); }
.tl6__grid a:hover .tl6__go i { transform: translateX(5px); }

/* ---------- Fragen ---------- */
.fq6 { padding: 120px 0; background: var(--sec); }
.fq6__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
.fq6__side { position: sticky; top: 112px; }
.fq6__side .h1 { font-size: 3.5rem; }
.fq6__direct { max-width: 30ch; margin-top: 24px; color: var(--mut); line-height: 1.6; }
.fq6__direct a { color: var(--ink); font-weight: 700; text-decoration-color: var(--orange); text-underline-offset: 3px; white-space: nowrap; }
.fq6__th { margin-top: 40px; margin-bottom: 12px; font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.fq6__tools { display: grid; gap: 8px; max-width: 360px; }
.fq6__tools a { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 100px; background: #fff; text-decoration: none; transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.fq6__tools a:hover { box-shadow: var(--shadow-card); transform: translateX(3px); }
.fq6__tools .tl6__ic { width: 40px; height: 40px; flex: none; }
.fq6__tools .tl6__ic img, .fq6__tools .tl6__ic svg { width: 20px; height: 20px; }
.fq6__tools b { font: 700 .9375rem/1.2 var(--f-display); }
.fq6__tools .tl6__go { margin: 0 0 0 auto; font-size: .6875rem; }
.fq6__list { display: grid; gap: 10px; }
.fq6__list details { border-radius: 24px; background: #fff; transition: box-shadow var(--base) var(--ease); }
.fq6__list details[open] { box-shadow: var(--shadow-card); }
.fq6__list summary { position: relative; list-style: none; cursor: pointer; padding: 24px 80px 24px 28px; font: 500 1.1875rem/1.35 var(--f-display); letter-spacing: -0.005em; transition: color var(--fast) var(--ease); }
.fq6__list summary::-webkit-details-marker { display: none; }
.fq6__list summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; transition: transform var(--base) var(--ease), background-color var(--base) var(--ease);
  background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M7 1v12M1 7h12' stroke='%23020A18' stroke-width='2' stroke-linecap='round'/></svg>") center / 14px no-repeat; }
.fq6__list details[open] summary::after { transform: rotate(45deg); background-color: var(--orange); }
.fq6__list summary:hover { color: var(--orange-ink); }
.fq6__list details p { padding: 0 72px 0 28px; color: var(--mut); line-height: 1.7; }
.fq6__list details p:last-child { padding-bottom: 26px; }
.fq6__list details p + p { margin-top: 12px; }
.fq6__list details a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.fq6__list details[open] p { animation: fq6 .45s var(--ease); }
@keyframes fq6 { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Abschluss mit Team ---------- */
.end6 { padding: 24px 0 0; }
.end6__stage { padding: 104px 24px 0; text-align: center; }
.end6__copy { position: relative; z-index: 3; }
.end6 h2 { font: 700 clamp(44px, 5.6vw, 88px)/1.02 var(--f-display); letter-spacing: -0.04em; color: var(--ink); }
.end6__copy > p:not(.eyebrow) { max-width: 52ch; margin: 18px auto 0; color: var(--mut); font-size: 1.125rem; }
.end6 .hb__ctas { justify-content: center; align-items: center; gap: 28px; margin-top: 30px; }
.end6__team { position: relative; z-index: 2; display: block; width: min(1000px, 100%); height: auto; margin: 48px auto 0; }

/* ---------- Footer (schlank, 05.11.) ---------- */
.ft6 { position: relative; isolation: isolate; overflow: hidden; margin: 16px; padding: 80px 0 28px; border-radius: 32px; background: var(--card); color: var(--mut); font-size: .9375rem; }
.ft6::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(48% 58% at 50% 118%, rgba(252,76,1,.26) 0%, rgba(252,76,1,0) 70%); }
.ft6__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 40px; }
.ft6__h--gap { margin-top: 28px; }
.ft6__logo { width: 160px; height: auto; }
.ft6__about { max-width: 34ch; margin-top: 18px; line-height: 1.6; }
.ft6__trust { display: grid; gap: 8px; max-width: 260px; margin-top: 26px; }
.ft6__pill { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px 0 10px; border-radius: 100px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 700 .875rem/1 var(--f-display); color: var(--ink); text-decoration: none; transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.ft6__pill img { flex: none; width: 28px; height: 28px; }
.ft6__pill:hover { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); transform: translateX(3px); }
.ft6__h { margin-bottom: 16px; font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.ft6__col ul { display: grid; gap: 10px; }
.ft6__col a { color: var(--mut); text-decoration: none; line-height: 1.5; transition: color var(--fast) var(--ease); }
.ft6__col a:hover { color: var(--orange-ink); }
.ft6__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ft6__contact .ft6__h { margin-bottom: 6px; }
.ft6__contact .ft6__tel { font: 700 1.375rem/1.2 var(--f-display); color: var(--ink); }
.ft6__hours { margin-top: 4px; font-size: .875rem; line-height: 1.5; }
.ft6__hours b { color: var(--ink); }
.ft6__social { display: flex; gap: 18px; margin-top: 4px; }
.ft6__claim { margin: 80px 0 0; padding: 0 24px; text-align: center; white-space: nowrap; font: 700 clamp(40px, 8.2vw, 136px)/.95 var(--f-display); letter-spacing: -0.05em; color: var(--ink); }
.ft6__claim em { font-style: normal; color: var(--orange); }
.ft6__base { position: relative; display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; font-size: .8125rem; }
.ft6__base::before { content: ""; position: absolute; top: 0; left: var(--margin); right: var(--margin); border-top: 1px solid var(--ghost); }
.ft6__base a { color: inherit; text-decoration: none; }
.ft6__base a:hover { color: var(--orange-ink); }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .fd6 { grid-template-columns: 1fr; }
  .pb6__list { grid-template-columns: 1fr; }
  .pb6__list li { min-height: 0; }
  .ld6__panel.stage { grid-template-columns: 1fr; gap: 40px; padding: 44px; }
  .qt6__card { grid-template-columns: 1fr; padding: 48px; }
  .qt6__card figcaption { grid-column: 1; }
  .tm6__grid { grid-template-columns: 1fr; gap: 48px; }
  .tm6__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .en6__grid { grid-template-columns: 1fr; }
  .en6__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .en6__facts li:nth-child(3) { border-left: 0; }
  .en6__facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .en6__plans { grid-template-columns: 1fr; }
  .tl6__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fq6__grid { grid-template-columns: 1fr; gap: 36px; }
  .fq6__side { position: static; }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .lg6 { padding: 40px 0 24px; }
  .lg6__row li > * { width: 156px; height: 84px; border-radius: 18px; }
  .lg6__row img { height: 22px; max-width: 108px; }
  .lg6__row .sq img { height: 36px; }
  .pb6 { padding: 72px 0 16px; }
  .pb6__list li { min-height: 0; padding: 26px; border-radius: 24px; }
  .pb6__list h3 { margin-top: 64px; }
  .pb6__n { font-size: 96px; }
  .pb6__turn { margin-top: 48px; }
  .pb6__turn::before { height: 56px; margin-bottom: 24px; }
  .pb6 + .vs { padding-top: 72px; }
  .ld6__panel.stage { padding: 30px 18px 24px; gap: 32px; }
  .ld6__win { rotate: 0deg; }
  .qt6 { padding: 24px 0 80px; }
  .qt6__card { padding: 32px 24px; border-radius: 24px; }
  .qt6__mark { width: 48px; height: 48px; }
  .qt6__card .link { margin-left: 0; }
  .tm6 { padding: 80px 0; }
  .tm6__photos { padding-bottom: 60px; }
  .tm6__ph { border-radius: 20px; }
  .tm6__ph--b { border-width: 5px; border-radius: 18px; }
  .tm6__tag { bottom: 14px; padding: 10px 16px; font-size: .8125rem; }
  .tm6__k { border-radius: 22px; }
  .tm6__list { grid-template-columns: 1fr; margin-top: 48px; }
  .tm6__list { gap: 10px; }
  .tm6__list li { padding: 22px; border-radius: 20px; }
  .tm6__list span { margin-bottom: 14px; }
  .en6 { padding: 80px 0; }
  .en6__card { padding: 28px 22px; border-radius: 24px; }
  .en6__card .btn { align-self: stretch; text-align: center; }
  .en6__who { padding: 10px 14px 10px 10px; font-size: .9375rem; }
  .en6__who img { width: 48px; height: 48px; }
  .en6__facts { grid-template-columns: 1fr; margin-top: 40px; }
  .en6__facts li { padding: 20px 22px; border-left: 0; border-top: 1px solid var(--line); }
  .en6__facts li:first-child { border-top: 0; }
  .en6__plan { padding: 26px 22px; border-radius: 24px; }
  .tl6 { padding: 72px 0; }
  .tl6__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tl6__grid a { min-height: 170px; padding: 18px; border-radius: 20px; }
  .tl6__ic { width: 44px; height: 44px; }
  .tl6__grid b { padding-top: 24px; font-size: 1.0625rem; }
  .tl6__go { font-size: .6875rem; }
  .fq6 { padding: 80px 0; }
  .fq6__list summary { padding: 20px 64px 20px 20px; font-size: 1.0625rem; }
  .fq6__list summary::after { right: 16px; }
  .fq6__list details p { padding: 0 20px; }
  .end6__stage { padding: 72px 18px 0; }
  .end6 .hb__ctas { flex-direction: column; gap: 18px; }
  .end6 .hb__ctas .btn { width: 100%; }
  .end6__team { margin-top: 36px; }
  .ft6 { margin: 8px; padding: 56px 0 24px; border-radius: 24px; }
  .ft6__grid { grid-template-columns: 1fr; gap: 32px; }
  .ft6__claim { margin-top: 48px; padding: 0 12px; white-space: normal; font-size: calc((100vw - 40px) / 6.9); line-height: .98; }
  .ft6__claim span { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .lg6__row { animation: none; }
  .js .ld6__win .sheet__row:not(.sheet__row--letters):not(.sheet__row--head) { opacity: 1; transform: none; }
  .js .pb6__turn::before { transform: none; }
}

/* ---------- Hero: vier Logo-Kacheln in der Headline (wie Live-Seite, 05.11.) ---------- */
.vh--kompakt .vh__h { max-width: none; }
.vh__l1 { display: block; white-space: nowrap; }
/* Vorzeile im H1 mit dem Suchbegriff, Muster .kc7__pre (KI-Check, Jeremy 10.11.2026); Startseite, Klarheitsplan und seo_snippets.py */
.h1__pre { display: block; margin-bottom: 12px; font: 500 1.375rem/1.3 var(--f-display); letter-spacing: -.01em; color: var(--mut); white-space: normal; }
.vh--kompakt .vh__h .hl { display: block; }
.sys6 { display: inline-flex; margin-left: .16em; vertical-align: .06em; }
.sys6__p { display: grid; place-items: center; width: .6em; height: .6em; margin-left: -.05em; border-radius: .155em; background: #fff; box-shadow: 0 1px 2px rgba(2,10,24,.06), 0 8px 20px rgba(37,73,120,.12); rotate: var(--r); }
.sys6__p img { width: .33em; height: .33em; }
.js .sys6__p { scale: 0; }
.is-in .sys6__p { animation: sys6 .7s cubic-bezier(.2,1.4,.4,1) var(--d) forwards; }
@keyframes sys6 { to { scale: 1; } }
.sys6__p:hover { translate: 0 -4px; transition: translate var(--base) var(--ease); }

/* ---------- Screen Google Maps (iOS, echter Kartenausschnitt) ---------- */
.mp6 { font-family: Roboto, Arial, sans-serif; background: #f8f9fa; color: #1f1f1f; }
.mp6__map { position: absolute; left: 0; top: -56px; width: 375px; height: auto; }
.mp6__search { position: absolute; z-index: 5; top: 56px; left: 12px; right: 12px; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 20px; border-radius: 24px; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15); font: 400 16px/1 Roboto, Arial, sans-serif; }
.mp6__search .q { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp6__search svg { flex: none; width: 22px; height: 22px; fill: #444746; }
.mp6__sheet { position: absolute; z-index: 6; left: 0; right: 0; top: 284px; bottom: 0; padding: 8px 16px 0; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -1px 5px rgba(60,64,67,.18); }
.mp6__grab { display: block; width: 32px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: #c4c7c5; }
.mp6__top { display: flex; align-items: flex-start; gap: 12px; }
.mp6__name { flex: 1; font: 400 22px/28px 'Google Sans', Roboto, Arial, sans-serif; }
.mp6__share { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f0f4f9; }
.mp6__share svg { width: 18px; height: 18px; }
.mp6__rate { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 14px; line-height: 20px; color: #474747; }
.mp6__stars { position: relative; display: inline-block; font-size: 13px; letter-spacing: .5px; line-height: 1; color: #dadce0; }
.mp6__stars i { font-style: normal; }
.mp6__stars i + i { position: absolute; left: 0; top: 0; width: var(--v); overflow: hidden; white-space: nowrap; color: #fbbc04; }
.mp6__meta { margin-top: 2px; font-size: 14px; line-height: 20px; color: #474747; }
.mp6 em { font-style: normal; color: #188038; }
.mp6__btns { display: flex; gap: 8px; margin: 14px -16px 0 0; overflow: hidden; }
.mp6__btns span { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border-radius: 20px; background: #d3e3fd; color: #0842a0; font: 500 14px/1 'Google Sans', Roboto, Arial, sans-serif; }
.mp6__btns span.pri { background: #0b57d0; color: #fff; }
.mp6__btns svg { width: 18px; height: 18px; fill: currentColor; }
.mp6__tabs { display: flex; gap: 30px; margin: 16px -16px 0; padding: 0 16px; border-bottom: 1px solid #e3e3e3; font: 500 14px/1 'Google Sans', Roboto, Arial, sans-serif; color: #444746; }
.mp6__tabs span { padding: 13px 0; }
.mp6__tabs .on { color: #0b57d0; box-shadow: inset 0 -3px 0 #0b57d0; }
.mp6__row { display: flex; align-items: center; gap: 22px; padding: 14px 0; border-bottom: 1px solid #f1f3f4; font-size: 15px; line-height: 20px; }
.mp6__row svg { flex: none; width: 22px; height: 22px; fill: #0b57d0; }

/* ---------- Screen ChatGPT (iOS, gescrollte echte Antwort) ---------- */
.cg6 { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; color: #0d0d0d; background: #fff; }
.iph__scr.cg6::before { content: ""; position: absolute; z-index: 9; inset: 0 0 auto; height: 128px; pointer-events: none; background: linear-gradient(#fff 54px, rgba(255,255,255,.9) 84px, rgba(255,255,255,0)); }
.cg6 .ios-sb { z-index: 15; }
.cg6__hdr { position: absolute; z-index: 12; top: 58px; left: 16px; right: 16px; display: flex; justify-content: space-between; }
.cg6__btn, .cg6__pill { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 22px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.07); }
.cg6__btn { width: 44px; }
.cg6__pill { gap: 18px; padding: 0 14px; }
.cg6__btn svg, .cg6__pill svg { width: 22px; height: 22px; }
.cg6__body { position: absolute; left: 16px; right: 0; top: 14px; font-size: 17px; line-height: 1.45; }
.cg6__body > p, .cg6__body > h4, .cg6__body > h5, .cg6__body > hr { margin-right: 16px; }
.cg6__body p { margin: 0 0 14px; }
.cg6__body b { font-weight: 600; }
.cg6__prev { color: #0d0d0d; }
.cg6__body hr { height: 1px; margin-top: 18px; margin-bottom: 18px; border: 0; background: #e5e5e5; }
.cg6__body h4 { margin: 0 0 10px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.cg6__body h5 { margin: 22px 0 0; font-size: 19px; line-height: 1.3; font-weight: 600; }
.cg6__tw { overflow: hidden; margin-top: 4px; }
.cg6__tw table { width: 520px; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
.cg6__tw th, .cg6__tw td { padding: 9px 16px 9px 0; text-align: left; vertical-align: top; border-bottom: 1px solid #ececec; }
.cg6__tw th { font-weight: 600; border-bottom-color: #d9d9d9; }
.cg6__tw th:first-child, .cg6__tw td:first-child { width: 110px; }
.cg6__tw th:nth-child(2), .cg6__tw td:nth-child(2) { width: 222px; }
.cg6__tw u { text-decoration-color: #b4b4b4; text-underline-offset: 3px; }
.iph__scr.cg6::after { content: ""; position: absolute; z-index: 9; inset: auto 0 0; height: 150px; pointer-events: none; background: linear-gradient(rgba(255,255,255,0), #fff 60%); }
.cg6__comp { position: absolute; z-index: 12; left: 16px; right: 16px; bottom: 34px; height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 9px 0 16px; border-radius: 27px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.1); font-size: 17px; }
.cg6__comp .plus { font-size: 28px; font-weight: 300; line-height: 1; }
.cg6__comp .ph { flex: 1; color: #8f8f8f; }
.cg6__comp > svg { width: 22px; height: 22px; }
.cg6__comp .voice { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0d0d0d; }
.cg6__comp .voice svg { width: 20px; height: 20px; }

/* Handy-Karten in den Leistungen: mehr vom Screen zeigen, Rand weicher (05.11.) */
.home .dev2 { padding-top: 22px; }
.home .dev2::after { height: 28px; }

/* Design-Durchsicht 05.11.: Titelgrössen nach brand.md (Abschnitt 56 px, Karte 28 px Medium) */
.home .svc__card h3 { font: 500 1.75rem/1.2 var(--f-display); }
.home .cyc5 .h1 { font-size: 3.5rem; }
.cyc6 .head { margin-bottom: 8px; }
.cyc6__side { max-width: 44ch; }
.cyc6__more { margin-top: 20px; }
.cyc6 .cyc5__wrap { max-width: 800px; margin: 0 auto; padding: 104px 200px 120px; }
.cyc6 .cyc5__lbl { width: 176px; }

/* ---------- Navigation als schwebende Pille wie auf der Live-Seite (Desktop, 05.11.) ---------- */
@media (min-width: 1024px) {
  .home .nav { padding-top: 14px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; pointer-events: none; }
  .home .nav__bar { pointer-events: auto; width: min(1240px, calc(100% - 40px)); max-width: none; height: 66px; margin: 0 auto; padding: 0 10px 0 28px; gap: 24px; border-radius: 999px;
    background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(2,10,24,.06), 0 8px 24px rgba(21,37,57,.06); transition: box-shadow var(--base) var(--ease); }
  .home .nav.is-scrolled .nav__bar { box-shadow: inset 0 0 0 1px rgba(2,10,24,.06), 0 12px 32px rgba(21,37,57,.12); }
  .home .nav__links { margin: 0 auto; }
  .home .nav__tel { display: none; }
  .home .nav::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -18px; pointer-events: none; opacity: 0; background: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,0)); transition: opacity var(--base) var(--ease); }
  .home .nav.is-scrolled::before { opacity: 1; }
  .home main { margin-top: -80px; }
  .home .vh--kompakt .stage { padding-top: 176px; }
}
.mp6__glogo { position: absolute; z-index: 5; left: 12px; top: 250px; width: 58px; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.mp6__glogo svg { position: static; display: block; width: 100%; height: auto; margin: 0; }
/* Zuschreibung der Kartendaten wie in Google Maps (Google Geo Guidelines: Logo allein genügt nicht) */
.mp6__attr { position: absolute; z-index: 5; right: 6px; top: 254px; padding: 2px 4px; border-radius: 2px; background: rgba(255,255,255,.8); font: 400 9px/1 Roboto, Arial, sans-serif; color: #3c4043; }

/* Handy-Screens als Bilder (SEO 05.11.: kein Fremdtext im Seitentext, keine Google-Schrift, gleich auf jedem Gerät) */
.iph__scr--img { background: #fff; }
.iph__scr--img img { display: block; width: 375px; height: 812px; max-width: none; }

/* ---------- Navigation A: drei Hebel mit Untermenü, KI-Check als Pille mit den drei Logos (Jeremy 05.11.2026, Desktop) ----------
   Markup aus navigation.final_nav(), getauscht in startseite.tz2_links(); aktuelle Seite per aria-current. Varianten B bis D: nav.css */
@media (min-width: 1024px) {
  .nav__bar { position: relative; }
  .nv { align-items: center; }
  .nv-item { position: relative; display: flex; }
  .nav__links .nv-top { display: inline-flex; align-items: center; gap: 6px; }
  .nv-car { opacity: .65; transition: transform var(--fast) var(--ease); }
  .nv-has:hover .nv-car, .nv-has:focus-within .nv-car { transform: rotate(180deg); }
  .nv-panel { position: absolute; z-index: 60; top: calc(100% + 26px); left: 50%; min-width: 330px; padding: 10px; border-radius: 24px; background: #fff;
    box-shadow: 0 0 0 1px rgba(2,10,24,.06), 0 24px 60px rgba(2,10,24,.14); opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
  .nv-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
  .nv-has:hover .nv-panel, .nv-has:focus-within .nv-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .nav__links .nv-panel a { display: block; padding: 0; border-radius: 0; background: none; font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .nv-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .nav__links .nv-list a { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; }
  .nav__links .nv-list a:hover, .nav__links .nv-list a[aria-current] { background: var(--card); }
  .nav__links .nv-list a[aria-current] b { color: var(--orange-ink); }
  .nv-list b { display: flex; align-items: center; gap: 10px; font: 500 .9375rem/1.25 var(--f-display); color: var(--ink); }
  .nv-list a > span { font: 400 .8125rem/1.4 var(--f-body); color: var(--mut); }
  .nv-k { margin: 0; padding: 10px 14px 4px; font: 500 .6875rem/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
  .nv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .nv-panel--wide { min-width: 620px; }
  .nav__links .nv-panel .nv-all { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 16px 14px 10px; border-top: 1px solid var(--line);
    font: 500 .8125rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--orange-ink); }
  .nv-kilogos { display: inline-flex; flex: none; }
  .nv-kilogos span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(2,10,24,.2); }
  .nv-kilogos span + span { margin-left: -6px; }
  .nv-kilogos img { width: 13px; height: 13px; }
  .nv-kic { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 7px; border-radius: 100px; background: var(--card);
    font: 500 .8125rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; transition: color var(--fast) var(--ease); }
  .nv-kic:hover { color: var(--orange-ink); }
}
@media (max-width: 1023px) { .nv-kic { display: none; } }

/* ---------- Sitemap 06.11.2026 (Jeremy: "Drei Hebel, gegliedert"): Untermenüs mit Spalten wie bei ZUMO, Footer mit der ganzen
   Sitemap. Markup aus navigation.final_nav() und navigation.footer_cols(); Einträge nur für Seiten, die live oder auf TZ2 stehen. */
@media (min-width: 1024px) {
  /* Panel unter der ganzen Leiste zentriert (nav__bar ist positioniert), damit drei Spalten neben jedem Hebel Platz haben */
  .nv-item--cols { position: static; }
  .nv-panel--cols { top: calc(100% + 14px); width: calc(var(--n, 3) * 264px + 20px); min-width: 0; }
  .nv-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 4px; }
  .nv-cols > div { min-width: 0; }
  .nv-cols .nv-list + .nv-k { margin-top: 6px; }
  /* Footer: Marke als Zeile oben, darunter fünf Spalten */
  .ft6__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px 32px; }
  .ft6__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 48px;
    padding-bottom: 40px; border-bottom: 1px solid var(--line); }
  .ft6__brand .ft6__about { max-width: 52ch; margin-top: 0; }
  .ft6__brand .ft6__trust { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: none; margin-top: 0; }
}

/* ---------- Menü und Footer: drei Änderungen (06.11.2026, Jeremy: "Ja, alle drei") ----------
   Menü: unter jedem Untermenü die Zeile "Für alle drei" (navigation.FUER_ALLE_DREI, Klasse nv-foot), Optik wie die frühere
   Fassung in nav.css. Footer: Regionen und Branche als kurze Zeile unter den Spalten (navigation.FUSS_ZEILE, footer_zeile()):
   nav.ft6__zeile mit je einem details.ft6__reg, am Desktop offen, wie eine Spaltenüberschrift und nicht klickbar.
   Unter 1280 px gestaltet die Mobil-Sitzung die Zeile in mobil.css (aufklappbar); hier nur das Nötigste für alle Breiten. */
.ft6__zeile { grid-column: 1 / -1; }
.ft6__reg > summary { list-style: none; cursor: default; }
.ft6__reg > summary::-webkit-details-marker { display: none; }
.ft6__reg ul { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.ft6__reg li { display: inline-flex; align-items: center; }
.ft6__reg li:not(:last-child)::after { content: ""; flex: none; width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.ft6__reg a { color: var(--mut); text-decoration: none; line-height: 1.5; transition: color var(--fast) var(--ease); }
.ft6__reg a:hover { color: var(--orange-ink); }
@media (min-width: 1024px) {
  .nv-foot { display: flex; align-items: center; gap: 24px; margin-top: 6px; padding: 16px 14px 10px; border-top: 1px solid var(--line); }
  .nv-foot .nv-k { padding: 0; }
  .nav__links .nv-panel .nv-foot a { font: 500 .875rem/1 var(--f-display); }
  .nav__links .nv-panel .nv-foot a:hover, .nav__links .nv-panel .nv-foot a[aria-current] { color: var(--orange-ink); }
  .nav__links .nv-panel .nv-foot .nv-all { margin: 0 0 0 auto; padding: 0; border: 0; font-size: .8125rem; color: var(--orange-ink); }
  /* Regionen-Zeile: Überschrift links in einer festen Spalte, die Links in einer Zeile (alle neun passen ab 1280 px) */
  .ft6__zeile { display: grid; gap: 10px; padding-top: 40px; border-top: 1px solid var(--line); }
  .ft6__reg { position: relative; padding-left: 104px; }
  .ft6__reg > summary { position: absolute; left: 0; top: 2px; margin: 0; }
  .ft6__reg ul { font-size: .875rem; }
}
@media (min-width: 1280px) {
  .ft6__reg > summary { pointer-events: none; }
  /* Footer kompakt (Jeremy 06.11.: "zu lang, vor allem im Desktop", Variante "Claim kleiner"): alle Links und die drei Pillen
     bleiben; engere Abstände, Leistungen zweispaltig mit der Übersicht über beiden Spalten, Claim halb so gross. Nur ab 1280 px,
     darunter gelten home.css und mobil.css unverändert. Spalten nach Textbreite, damit bei 1280 px nichts umbricht. */
  .ft6 { padding: 56px 0 24px; }
  .ft6__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px 24px; }
  .ft6__brand { padding-bottom: 28px; }
  .ft6__h { margin-bottom: 12px; }
  .ft6__col ul, .ft6__contact { gap: 6px; }
  /* Spaltensatz statt Raster: Abstand per Innenabstand, damit beide Spalten bündig beginnen (Ränder würden am Spaltenumbruch gekappt) */
  .ft6__col[aria-label="Leistungen"] ul { display: block; columns: 2; column-gap: 24px; margin-block: -3px; }
  .ft6__col[aria-label="Leistungen"] li { break-inside: avoid; padding-block: 3px; }
  .ft6__col[aria-label="Leistungen"] li:first-child { column-span: all; }
  .ft6__zeile { gap: 6px; padding-top: 24px; }
  .ft6__claim { margin-top: 40px; font-size: clamp(56px, 4.2vw, 64px); }
  .ft6__base { margin-top: 28px; padding-top: 16px; }
}

/* /leistungen.css */
/* TZ2 Seite /leistungen, Fassung 2 (05.11.2026, Desktop zuerst). Schlicht nach Hero B: offen nur Name, Preis und ein
   Satz, der Rest klappt auf. Baut auf tz2.css, v5.css und home.css auf; Tokens und Radien nach DESIGNSYSTEM.md §2. */

/* ---------- Abschnitte ---------- */
.lx6 { padding: 120px 0; }
.lx6--grey { background: var(--sec); }
.lx6__note { max-width: 80ch; margin-top: 24px; color: var(--mut); font-size: .9375rem; line-height: 1.6; }
.lpage .head__lead b { color: var(--ink); font-weight: 700; }
/* Kopf mit Lead und Link: beide in der rechten Spalte, der Link unter dem Lead */
.head__side { display: grid; justify-items: start; gap: 20px; }
.lk6__k { margin-bottom: 10px; font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.lk6__reg { margin-top: 14px; color: var(--mut); font-size: .875rem; line-height: 1.5; }
.lk6__reg a, .lx7__body p a, .lx7__body li a, .lp7__body p a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* ---------- Karten: Kicker, Name, Preis, ein Satz, Link, aufklappbarer Rahmen (Teile per Subgrid bündig) ---------- */
.lb7__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.lb7 { grid-column: span 2; grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 32px 32px 12px; border-radius: 28px; background: var(--card); scroll-margin-top: 120px;
  transition: box-shadow var(--base) var(--ease), opacity .7s var(--ease), transform .7s var(--ease); }
.lb7--half { grid-column: span 3; }
.lb7--white { background: #fff; }
.lb7:hover { box-shadow: var(--shadow-card); }
.lb7 h3 { font: 500 1.75rem/1.2 var(--f-display); color: var(--ink); }
.lb7__price { margin-top: 18px; font: 700 2.25rem/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }
.lb7__price small { display: block; margin-top: 8px; font: 400 .875rem/1.4 var(--f-body); letter-spacing: 0; color: var(--mut); }
.lb7__lead { margin-top: 16px; color: var(--mut); line-height: 1.6; }
.lb7__foot { align-self: start; display: grid; margin-top: 24px; }
.lb7__foot > .link { justify-self: start; margin-bottom: 20px; }

/* ---------- Aufklappbare Blöcke ---------- */
.lx7 > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); list-style: none; cursor: pointer;
  font: 500 .9375rem/1.35 var(--f-display); color: var(--ink); transition: color var(--fast) var(--ease); }
.lx7 > summary::-webkit-details-marker { display: none; }
.lx7 > summary::after, .lp7__row > summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; transition: transform var(--base) var(--ease), background-color var(--base) var(--ease);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M7 1v12M1 7h12' stroke='%23020A18' stroke-width='2' stroke-linecap='round'/></svg>") center / 12px no-repeat; }
.lb7--white .lx7 > summary::after, .lx6--grey .lx7--bar > summary::after, .lp7__row > summary::after, .lx7--table > summary::after { background-color: var(--card); }
.lx7[open] > summary::after, .lp7__row[open] > summary::after { transform: rotate(45deg); background-color: var(--orange); }
.lx7 > summary:hover { color: var(--orange-ink); }
.lx7__body { padding: 2px 0 20px; }
.lx7[open] > .lx7__body { animation: fq6 .45s var(--ease); }
.lx7__body > p:not([class]) { margin-bottom: 14px; color: var(--mut); font-size: .9375rem; line-height: 1.6; }
.lx7__body .ticks { margin: 0; }
.lx7__body .ticks li { font-size: .9375rem; color: var(--ink); }
.lx7__lead { max-width: 80ch; margin-bottom: 24px; color: var(--mut); line-height: 1.65; }
.lx7__note { max-width: 90ch; margin-top: 20px; color: var(--mut); font-size: .9375rem; line-height: 1.6; }
.lx7__note b { color: var(--ink); }
.lx7__more { margin-top: 20px; }

/* Breite Leisten unter den Karten: Kicker und Titel links, Plus rechts, Innenabstand wie die Karten (32 px) */
.lx7__row { display: grid; gap: 16px; margin-top: 16px; }
.lx7--bar { border-radius: 24px; background: var(--card); scroll-margin-top: 120px; transition: box-shadow var(--base) var(--ease); }
.lx6--grey .lx7--bar { background: #fff; }
.lx7--bar[open] { box-shadow: var(--shadow-card); }
.lx7--bar > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 22px 32px; border-top: 0; }
.lx7--bar > summary > .lk6__k { grid-column: 1; margin: 0; }
.lx7--bar > summary > .lx7__t { grid-column: 1; }
.lx7--bar > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.lx7__t { font: 500 1.1875rem/1.35 var(--f-display); letter-spacing: -0.005em; color: inherit; }
.lx7--bar > .lx7__body { padding: 4px 32px 32px; }

/* "Alle Kriterien anzeigen" und "Wie die Werte entstehen": mittig unter Tabelle oder Karten */
.lx7--table { margin-top: 4px; }
.lx7--table > summary { justify-content: center; gap: 14px; padding: 18px 0; border-top: 0; font: 700 .875rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.lx7--table > .lx7__body { padding: 0; }
.lx7--center { margin-top: 12px; }
.lx7--center > .lx7__body { display: flex; justify-content: center; }
.lx7--center .lx7__note { margin-top: 0; text-align: center; }

/* ---------- Ergänzungen ---------- */
.lb7__erg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.lb7__erg li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.lb7__erg b { font: 700 1.0625rem/1.45 var(--f-display); white-space: nowrap; }
.lb7__erg span { color: var(--mut); font-size: .9375rem; line-height: 1.55; }

/* ---------- Tabellen ---------- */
.lt6 { overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.lx6:not(.lx6--grey) .lt6 { box-shadow: 0 0 0 1px var(--line), var(--shadow-card); }
.lt6 table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9375rem; line-height: 1.5; }
.lt6 col.lt6__c1 { width: 17%; }
.lt6 caption { caption-side: bottom; padding: 16px 20px 20px; text-align: left; color: var(--mut); font-size: .8125rem; line-height: 1.5; border-top: 1px solid var(--line); }
.lt6 th, .lt6 td { padding: 18px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.lt6 thead th { padding-top: 24px; padding-bottom: 22px; border-top: 0; background: var(--card); }
.lt6__crit { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.lt6__n { display: block; font: 700 1.0625rem/1.3 var(--f-display); color: var(--ink); }
.lt6__p { display: block; margin-top: 10px; font: 700 1.75rem/1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.lt6__s { display: block; margin-top: 6px; font: 400 .8125rem/1.35 var(--f-body); color: var(--mut); }
.lt6 tbody th { font: 500 .9375rem/1.4 var(--f-display); color: var(--ink); }
.lt6 td { color: var(--mut); }
.lt6 td a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.lt6 td .link { color: var(--ink); text-decoration: none; white-space: nowrap; }
.lt6 tbody tr:hover td, .lt6 tbody tr:hover th { background: #fafafa; }
/* Zweite Vergleichstabelle: Spaltenköpfe nur für Screenreader, die Spalten stehen unter der ersten Tabelle */
.lt6 .lt6__hide th { padding: 0; height: 0; border: 0; background: none; font-size: 0; line-height: 0; }
.lt6 .lt6__hide th span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lt6--more tbody tr:first-child > * { border-top: 0; }

/* ---------- Fakten ---------- */
.lf6 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; border-radius: 28px; background: var(--card); }
.lf6 li { padding: 26px 28px; border-left: 1px solid var(--line); }
.lf6 li:first-child { border-left: 0; }
.lf6 b { display: block; margin-bottom: 6px; font: 700 1.375rem/1.2 var(--f-display); letter-spacing: -0.01em; }
.lf6 span { color: var(--mut); font-size: .875rem; line-height: 1.45; }

/* ---------- Website als Fundament ---------- */
.lw6 { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 48px; align-items: center; padding: 40px; border-radius: 28px; background: #fff;
  background-image: radial-gradient(60% 120% at 100% 100%, rgba(252,76,1,.14) 0%, rgba(252,76,1,0) 70%); }
.lw6 h3 { font: 500 1.75rem/1.2 var(--f-display); }
.lw6__copy > p:not(.lk6__k) { max-width: 64ch; margin-top: 12px; color: var(--mut); line-height: 1.6; }
.lw6__side { display: grid; gap: 18px; justify-items: start; }
.lw6__cond { font: 500 1rem/1.45 var(--f-display); color: var(--ink); }

/* ---------- Preisliste Einrichtungen: zwei feste Spalten, Name als H3, darunter die Abrechnung über die ganze Breite ---------- */
.lp7 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 16px; padding: 10px 40px; border-radius: 28px; background: #fff; }
.lp7__col { display: grid; align-content: start; }
.lp7__row { scroll-margin-top: 120px; }
.lp7__row + .lp7__row, .lp7__row--wide { border-top: 1px solid var(--line); }
.lp7__row--wide { grid-column: 1 / -1; }
.lp7__row > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; grid-template-areas: "n p i"; align-items: center; gap: 0 20px; padding: 20px 0; list-style: none; cursor: pointer; }
.lp7__row > summary::-webkit-details-marker { display: none; }
.lp7__row > summary::after { grid-area: i; }
.lp7__row h3 { grid-area: n; font: 500 1.0625rem/1.35 var(--f-display); color: var(--ink); transition: color var(--fast) var(--ease); }
.lp7__row > summary:hover h3 { color: var(--orange-ink); }
.lp7__p { grid-area: p; font: 700 1.25rem/1 var(--f-display); letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.lp7__body { padding: 0 52px 22px 0; }
.lp7__row[open] > .lp7__body { animation: fq6 .45s var(--ease); }
.lp7__body p { color: var(--mut); font-size: .9375rem; line-height: 1.6; }
.lp7__body .link { margin-top: 14px; }

/* ---------- Passung ---------- */
.lp6__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp6 { padding: 36px; border-radius: 28px; background: #fff; }
.lp6 h3 { margin-bottom: 6px; font: 500 1.75rem/1.2 var(--f-display); }
.lp6 .ticks { margin-bottom: 0; }
.lp6 .ticks li { font-size: 1rem; color: var(--ink); }
.lp6__x { display: grid; gap: 8px; margin: 14px 0 0; }
.lp6__x li { position: relative; padding-left: 26px; line-height: 1.5; color: var(--ink); }
.lp6__x li::before { content: "×"; position: absolute; left: 2px; top: -1px; color: var(--mut); font-weight: 700; font-size: 1.125rem; }

/* ---------- Cases (Subgrid: Zahl, Einheit und Text stehen in allen drei Karten auf einer Linie) ---------- */
.lc6__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(132px, 1fr) repeat(5, auto); gap: 0 16px; }
.lc6 { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-row: span 7; grid-template-rows: subgrid; padding: 28px; border-radius: 28px; color: #fff; text-decoration: none; box-shadow: 0 24px 50px rgba(2,10,24,.18); transition: transform var(--base) var(--ease), opacity .7s var(--ease); }
.lc6__k { grid-row: 1; } .lc6__num { grid-row: 3; } .lc6__unit { grid-row: 4; } .lc6__d { grid-row: 5; } .lc6__m { grid-row: 6; } .lc6__go { grid-row: 7; }
.lc6 img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; transition: transform 1.2s var(--ease); }
/* Querformat-Bilder in Hochformat-Karten: linker Ausschnitt, damit kein Firmenlogo hinter der Kennzahl steht */
#beleg-1 img { scale: 1.12; transform-origin: 0 50%; }
.lc6::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2,10,24,.45) 0%, rgba(2,10,24,.9) 44%, rgba(2,10,24,.96) 100%); }
.lc6:hover { transform: translateY(-4px); }
.lc6:hover img { transform: scale(1.05); }
.lc6__k { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #FFD9C7; }
.lc6__num { align-self: end; font: 700 3rem/1 var(--f-display); letter-spacing: -0.04em; white-space: nowrap; }
.lc6__unit { margin-top: 6px; font: 500 1.0625rem/1.3 var(--f-display); color: #FFD9C7; }
.lc6__d { margin-top: 14px; color: rgba(255,255,255,.86); font-size: .9375rem; line-height: 1.5; }
.lc6__m { margin-top: 10px; color: rgba(255,255,255,.62); font-size: .8125rem; }
.lc6__go { justify-self: start; margin-top: 18px; padding: 12px 20px; border-radius: 100px; background: #fff; color: #020A18; font: 700 .875rem/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.lr6 { margin-top: 36px; }
.lr6 .lk6__k { margin: 0 0 12px; color: var(--mut); }
.lr6__links { display: flex; flex-wrap: wrap; gap: 10px; }
.lr6__links a { padding: 10px 16px; border-radius: 100px; background: var(--card); color: var(--ink); text-decoration: none; font: 500 .9375rem/1.2 var(--f-display); transition: background var(--base) var(--ease); }
.lr6__links a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }

/* ---------- Abschluss mit Jeremy ---------- */
.le6__stage { padding-bottom: 104px; }
.le6__card { display: inline-flex; align-items: center; gap: 14px; margin-top: 36px; padding: 10px 22px 10px 10px; border-radius: 100px; background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); text-align: left; }
.le6__card img { width: 52px; height: 52px; border-radius: 50%; }
.le6__card span { font-size: .875rem; color: var(--mut); line-height: 1.35; }
.le6__card b { display: block; font: 700 1rem/1.3 var(--f-display); color: var(--ink); }
.le6__card i { margin-left: 10px; font: 700 .75rem/1 var(--f-display); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--orange-ink); }

.lpage .fq6__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lpage .wide-link { margin-top: 16px; padding: 22px 24px 22px 32px; }
.lpage .lx6:not(.lx6--grey) .wide-link { background: var(--card); box-shadow: none; }
.lpage .lx6:not(.lx6--grey) .wide-link:hover { box-shadow: var(--shadow-card); }

/* ---------- Kleinere Bildschirme (noch nicht abgestimmt, nur damit nichts bricht) ---------- */
@media (max-width: 1023px) {
  .lb7__grid, .lp7, .lp6__grid, .lc6__grid, .lw6, .lb7__erg { grid-template-columns: 1fr; }
  .lb7, .lb7--half { grid-column: auto; }
  .lf6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt6 { overflow-x: auto; }
  .lt6 table { min-width: 860px; }
}

/* Google-Partner-Block (gp7, Jeremy 05.11.: Feld von live /google-ads-agentur, für weitere Seiten): Abzeichen leicht
   gedreht als Link aufs Verzeichnis, daneben Unterabschnitt-Titel und Einordnung, Linien oben und unten wie live */
.gp7 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: center; margin-top: 56px; padding: 52px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gp7__badge { justify-self: center; display: grid; justify-items: center; gap: 14px; width: 200px; padding: 28px 24px 24px; border-radius: 24px;
  background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); transform: rotate(-2deg); transition: transform var(--base) var(--ease); }
.gp7__badge:hover { transform: rotate(0) translateY(-3px); }
.gp7__badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.gp7__icon { width: 84px; height: auto; }
.gp7__word { width: 132px; height: auto; }
.gp7__t { font: 700 2.5rem/1.12 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.gp7__copy p { max-width: 58ch; margin-top: 18px; color: var(--mut); font-size: 1.125rem; line-height: 1.7; }
@media (max-width: 1023px) { .gp7 { grid-template-columns: 1fr; } }

/* /google-ads-hero.css */
/* TZ2 /google-ads-agentur: drei Hero-Varianten (05.11.2026, Desktop). A Anzeige im Split, B Drei echte Anzeigen, C Bühne wie Startseite. */

.gha__stage, .ghb__stage, .ghc__stage { padding: 96px 0 104px; }
@media (min-width: 1024px) { .gpage .gha__stage, .gpage .ghb__stage, .gpage .ghc__stage { padding-top: 176px; } }
.gha__h, .ghb__h, .ghc__h { margin-top: 4px; font: 700 clamp(44px, 4.8vw, 72px)/1.03 var(--f-display); letter-spacing: -0.035em; color: var(--ink); }
.gha__h .hl, .ghb__h .hl, .ghc__h .hl { color: var(--orange); }
.ghb__h .l1, .ghc__h .l1 { display: block; }
.ghb .lead, .ghc .lead { max-width: 60ch; margin: 22px auto 0; text-wrap: balance; }
.ghb .hb__ctas, .ghc .hb__ctas { justify-content: center; margin-top: 30px; }
.gpage .iph { box-shadow: 0 0 0 calc(11px * var(--s)) #121215, 0 0 0 calc(12.5px * var(--s)) #44444a, 0 30px 70px rgba(2,10,24,.18); }

/* ---------- A: Anzeige im Split (Fläche wie incident.io, Handy vom unteren Rand angeschnitten) ---------- */
.gha__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: 56px; align-items: center; }
.gha__h { font-size: clamp(44px, 4.4vw, 64px); }
.gha .lead { max-width: 46ch; margin-top: 22px; text-wrap: pretty; }
.gha .hb__ctas { justify-content: flex-start; margin-top: 32px; }
.gha__panel { position: relative; display: flex; justify-content: center; height: 480px; padding-top: 40px; overflow: hidden; border-radius: 32px;
  background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(2,10,24,.06); }
.gha__trust { position: relative; z-index: 3; margin-top: 48px; }
.gha__trust .trustbar { margin-top: 0; }

/* ---------- B: Drei echte Anzeigen (Kacheln wie Leistungen-Hero B) ---------- */
.ghb__copy { position: relative; z-index: 3; text-align: center; }
.ghb__h { margin: 4px auto 0; }
.ghb__trust { position: relative; z-index: 3; }
.ghb__tiles { margin-top: 40px; }
.ghb__shot { height: 330px; }
.ghb__card .lhb__p small { display: block; margin: 8px 0 0; }

/* ---------- C: Bühne wie Startseite, Handy vom unteren Rand angeschnitten ---------- */
.ghc__stage { padding-bottom: 0; overflow: hidden; }
.ghc__copy { position: relative; z-index: 3; text-align: center; }
.ghc__h { margin: 4px auto 0; }
.ghc__visual { position: relative; z-index: 3; display: flex; justify-content: center; height: 430px; margin-top: 56px; overflow: hidden; }

/* /leistungen-hero.css */
/* TZ2 /leistungen: drei Hero-Varianten (05.11.2026, Desktop). A Preis-Kreis, B Drei Hebel mit echten Screens, C Mit Jeremy. */

.lha__stage, .lhb__stage, .lhc__stage { padding: 96px 0 104px; }
@media (min-width: 1024px) { .lpage .lha__stage, .lpage .lhb__stage, .lpage .lhc__stage { padding-top: 176px; } }
.lha__h, .lhb__h, .lhc__h { max-width: 15ch; margin-top: 4px; font: 700 clamp(44px, 4.8vw, 72px)/1.03 var(--f-display); letter-spacing: -0.035em; color: var(--ink); }
.lha .lead, .lhc .lead { max-width: 46ch; margin-top: 22px; }
.lha .hb__ctas, .lhc .hb__ctas { justify-content: flex-start; align-items: center; gap: 28px; margin-top: 32px; }

/* ---------- A: Preis-Kreis ---------- */
.lha__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: center; }
.lha__visual { position: relative; height: 500px; }
.lha__ring { position: absolute; left: 50%; top: 50%; width: 390px; height: 390px; margin: -195px 0 0 -195px; display: grid; place-content: center; border-radius: 50%; text-align: center;
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1.5px rgba(252,76,1,.32), 0 30px 80px rgba(252,76,1,.16); }
.lha__from { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.lha__ring b { display: block; margin: 10px 0 12px; font: 700 5.75rem/1 var(--f-display); letter-spacing: -0.05em; color: var(--ink); }
.lha__sub { color: var(--mut); font-size: .9375rem; }
.lha__chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 100px; background: #fff; color: var(--ink); text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(2,10,24,.10), inset 0 0 0 1px var(--line); font: 500 .9375rem/1 var(--f-display); animation: lhaFloat 6s ease-in-out infinite; transition: box-shadow var(--base) var(--ease); }
.lha__chip i { padding: 6px 10px; border-radius: 100px; background: var(--card); font: 700 .6875rem/1 var(--f-display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-ink); }
.lha__chip b { font: 700 1rem/1 var(--f-display); }
.lha__chip:hover { box-shadow: 0 16px 36px rgba(2,10,24,.16), inset 0 0 0 1px var(--line); }
.lha__chip--1 { left: 2%; top: 46px; rotate: -4deg; }
.lha__chip--2 { right: -2%; top: 118px; rotate: 3deg; animation-delay: -1.5s; }
.lha__chip--3 { left: -4%; bottom: 96px; rotate: 2deg; animation-delay: -3s; }
.lha__chip--4 { right: 2%; bottom: 34px; rotate: -3deg; animation-delay: -4.5s; }
@keyframes lhaFloat { 50% { translate: 0 -7px; } }

/* ---------- B: Drei Hebel mit echten Screens ---------- */
.lhb__copy { position: relative; z-index: 3; text-align: center; }
.lhb__h { margin: 4px auto 0; max-width: 21ch; }
.lhb .lead { max-width: 52ch; margin: 22px auto 0; }
.lhb .hb__ctas { justify-content: center; align-items: center; gap: 28px; margin-top: 30px; }
.lhb__levers { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.lhb__card { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 20px 50px rgba(2,10,24,.10); transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), opacity .9s var(--ease); }
.lhb__card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(2,10,24,.16); }
.lhb__shot { position: relative; display: flex; justify-content: center; height: 290px; overflow: hidden; padding-top: 22px; background: var(--card); }
.lhb__shot::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(rgba(244,244,245,0), rgba(244,244,245,.96)); }
.lhb__shot .iph { box-shadow: 0 0 0 calc(11px * var(--s)) #121215, 0 0 0 calc(12.5px * var(--s)) #44444a, 0 20px 40px rgba(2,10,24,.18); transition: transform .6s var(--ease); }
.lhb__card:hover .iph { transform: translateY(-8px); }
.lhb__meta { position: relative; display: grid; gap: 4px; padding: 20px 72px 22px 24px; text-align: left; }
.lhb__k { font: 500 .6875rem/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }
.lhb__meta b { font: 700 1.25rem/1.25 var(--f-display); }
.lhb__p { margin-top: 6px; font: 700 1.75rem/1 var(--f-display); letter-spacing: -0.02em; }
.lhb__p small { margin-left: 6px; font: 400 .875rem/1 var(--f-body); letter-spacing: 0; color: var(--mut); }
.lhb__go { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: var(--black); font-weight: 700; transition: transform var(--base) var(--ease); }
.lhb__card:hover .lhb__go { transform: translateX(3px); }
.lhb__note { position: relative; z-index: 3; margin-top: 24px; text-align: center; color: var(--mut); font-size: .875rem; }

/* ---------- C: Mit Jeremy ---------- */
.lhc__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.lhc__who { max-width: 46ch; margin-top: 30px; padding-left: 16px; border-left: 3px solid var(--orange); color: var(--mut); line-height: 1.55; }
.lhc__who b { color: var(--ink); }
.lhc__visual { position: relative; padding: 24px 36px 48px 24px; }
.lhc__photo { width: 100%; max-width: 430px; margin: 0 auto; overflow: hidden; border-radius: 32px; box-shadow: 0 30px 70px rgba(2,10,24,.18); rotate: 2deg; }
.lhc__photo img { display: block; width: 100%; height: auto; }
.lhc__tag { position: absolute; display: grid; gap: 3px; padding: 16px 20px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(2,10,24,.14), inset 0 0 0 1px var(--line); }
.lhc__tag span { font: 500 .6875rem/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }
.lhc__tag b { font: 700 1.75rem/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.lhc__tag small { max-width: 24ch; color: var(--mut); font-size: .8125rem; line-height: 1.4; }
.lhc__tag--1 { left: -6px; bottom: 24px; rotate: -3deg; }
.lhc__tag--2 { right: -6px; top: 36px; rotate: 3deg; }

@media (prefers-reduced-motion: reduce) { .lha__chip { animation: none; } }

/* /google-ads.css */
/* TZ2 Seite /google-ads-agentur (05.11.2026, Desktop zuerst). Hero A aus google-ads-hero.css, Belege mit den Kacheln aus
   Hero B (leistungen-hero.css), übrige Bausteine aus leistungen.css und home.css; Tokens nach DESIGNSYSTEM.md §2. */

/* ---------- Belege ---------- */
.ga7__tiles { margin-top: 0; }
/* Weisser Abschnitt, graue Karten (DESIGNSYSTEM §2) */
.ga7__tiles .lhb__card { background: var(--card); box-shadow: none; scroll-margin-top: 120px; }
.ga7__tiles .lhb__card:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.ga7__tiles .lhb__shot { background: transparent; }
.ga7__tiles .lhb__card:hover .lhb__shot::after { background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.96)); }
.ga7__how { margin-top: 12px; }
.ga7__how > .lx7__body { display: block; max-width: 920px; margin: 0 auto; }
.ga7__werte { display: grid; gap: 10px; margin: 4px 0 0; }
.ga7__werte li { color: var(--mut); font-size: .9375rem; line-height: 1.6; }
.ga7__werte b { margin-right: 6px; color: var(--ink); font-family: var(--f-display); font-weight: 700; }
.ga7__how .lx7__note { margin-top: 14px; text-align: left; }
#belege .lx7__row { margin-top: 24px; }

/* ---------- Agentur für KMU: vier Punkte ---------- */
.ga7__why { margin: 56px 0 0; }
.ga7__list { margin-top: 12px; }
/* Vier Punkte und Tracking-Bausteine: Nummer, Titel und Text per Subgrid bündig */
.ga7__list > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.ga7__whygrid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 16px; margin-top: 12px; }
.ga7__team { margin: 0; overflow: hidden; border-radius: 28px; }
.ga7__team img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ga7__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.ga7__list--2 li span { margin-bottom: 28px; }
.lx6--grey .tm6__list li { background: #fff; }
.lx6--grey .tm6__list li:hover { box-shadow: var(--shadow-card); }
#google-ads-agentur-kmu .lx7__row { margin-top: 40px; }
.lt6--facts col.lt6__c1 { width: 22%; }
.lt6--facts tbody tr:first-child > * { border-top: 0; }
.ga7__krit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 4px 0 0; }
.ga7__krit--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ga7__krit li { padding: 24px; border-radius: 24px; background: var(--card); }
.lx6--grey .lx7--bar .ga7__krit li { background: var(--card); }
/* Auf weissen Abschnitten ist die Leiste grau, die Karten darin weiss (Prüf-Flotte /seo-agentur-luzern 06.11.) */
.lx6:not(.lx6--grey) .lx7--bar .ga7__krit li { background: #fff; }
.ga7__krit h3 { margin-bottom: 8px; font: 500 1.125rem/1.3 var(--f-display); }
.ga7__krit p { color: var(--mut); font-size: .9375rem; line-height: 1.55; }
.ga7__links { display: flex; flex-wrap: wrap; gap: 12px 32px; }

/* ---------- Satz beim Scrollen, Messung zuerst ---------- */
.gpage .ga7__vs { padding: 120px 0 0; }
h2.vs__p { margin: 14px 0 0; }
.gpage .head__lead a, .gpage .lb7__lead a, .ga7__left .lx7__body a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }
/* Aufklappblock linksbündig unter einem linksbündigen Text */
.ga7__left { margin-top: 20px; }
.ga7__left > summary { justify-content: flex-start; }
.ga7__left > .lx7__body { max-width: 72ch; margin: 0; }
.ga7__left > .lx7__body p { color: var(--mut); font-size: 1.0625rem; line-height: 1.7; }
.ga7__track { padding-top: 96px; }
.ga7__track .lx6__note { max-width: 80ch; }

/* ---------- Leistungsumfang: Karten ohne Preis ---------- */
.lb7--np { grid-row: span 4; }
.lb7--np .lb7__lead { margin-top: 12px; }
.ga7__focus { margin-top: 32px; font: 500 1.375rem/1.4 var(--f-display); color: var(--mut); }
.ga7__focus b { color: var(--ink); font-weight: 700; }
#leistungsumfang .lx7__row { margin-top: 24px; }

/* ---------- Ablauf ---------- */
.ga7__ablauf .pb6__list li { min-height: 300px; }
.ga7__ablauf .pb6__list p { max-width: 34ch; }

/* ---------- Konditionen ---------- */
#konditionen .wide-link { margin-top: 16px; }
.ga7__once { margin: 48px 0 0; }
#konditionen .lp7 { margin-top: 12px; }
.ga7__cta { justify-content: flex-start; margin-top: 32px; }

/* ---------- Passung und Werkzeuge ---------- */
.lx6:not(.lx6--grey) .lp6 { background: var(--card); }
.ga7__tools { display: grid; gap: 8px; margin-top: 36px; }
.ga7__tools .lk6__k { margin: 0 0 4px; color: var(--mut); }
.ga7__tool { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 24px; background: #fff; color: var(--ink); text-decoration: none;
  transition: box-shadow var(--base) var(--ease); }
.ga7__tool:hover { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.ga7__tool h3 { font: 500 1rem/1.35 var(--f-display); }
.ga7__tool span { flex: none; font: 700 .75rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--orange-ink); }
/* Titel der Werkzeug-Karte ohne Überschrift unter der FAQ-H2 (Prüf-Flotte 06.11.), gleich gestaltet wie das frühere h3 */
.ga7__tool .ga7__tool-t { flex: 1; font: 500 1rem/1.35 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* Kleine Aufklappzeile unter den Werkzeugen */
.ga7__toolmore { margin-top: 4px; }
.ga7__toolmore > summary { padding: 12px 4px; border-top: 0; font-size: .875rem; color: var(--mut); }
.ga7__toolmore .ga7__werte li { font-size: .875rem; }
/* Live-H3 im Übernahme-Block */
.lp7__body h4 { margin-bottom: 6px; font: 700 1rem/1.35 var(--f-display); color: var(--ink); }
/* Titel ohne einzelnes Wort auf der letzten Zeile */
.gpage .h1, .gpage .end6 h2, .gpage .tm6__list h3, .gpage .lb7 h3 { text-wrap: balance; }

@media (max-width: 1023px) {
  .ga7__whygrid, .ga7__list--2 { grid-template-columns: 1fr; }
  .ga7__krit, .ga7__krit--3 { grid-template-columns: 1fr; }
}

/* /lehrbuch.css */
/* TZ2 Lehrbuch-Grafik im Compendio-Stil (Standard für Leistungsseiten seit 05.11.2026, Desktop zuerst).
   Bildsprache wie der Kreislauf der Startseite (v5.css .cyc5): orange Knoten mit weissem Symbol und Ring in Flächenfarbe,
   Graustufen #E9E9E9, #D9D9D6, #BDBEBF, #97999B für die Strecke, nummerierte Beschriftung. Generator: lehrbuch.py. */

.lg7__fig { margin: 0; }
.lg7__row { --node: 76px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr) 36px) minmax(0, 1.12fr); align-items: start; margin: 0; padding: 0; list-style: none; }

/* Strecke von Knoten zu Knoten: je Faktor ein Stück in den Graustufen der Ringsegmente, zeichnet sich der Reihe nach */
.lg7__step:not(.lg7__step--res)::after { content: ""; position: absolute; z-index: -1; left: calc(var(--node) / 2); top: calc(var(--node) / 2 - 7px);
  width: calc(100% + 36px); height: 14px; background: var(--seg); transform: scaleX(0); transform-origin: left center; }
.lg7__step:nth-child(1) { --seg: #E9E9E9; } .lg7__step:nth-child(3) { --seg: #D9D9D6; } .lg7__step:nth-child(5) { --seg: #BDBEBF; } .lg7__step:nth-child(7) { --seg: #97999B; }
.lg7__fig.is-in .lg7__step::after { animation: lg7Line .6s var(--ease) forwards; animation-delay: calc(var(--i) * .22s); }
@keyframes lg7Line { to { transform: scaleX(1); } }

.lg7__step { position: relative; z-index: 1; display: grid; justify-items: start; align-content: start; padding-right: 12px; }
/* Symbol, Titel, Satz und Hebel stehen in allen Stufen auf denselben Zeilen (Prüf-Flotte SEO 05.11.: Hebel sprangen bei kürzeren Sätzen hoch) */
@media (min-width: 1024px) { .lg7__step { grid-row: 1 / span 4; grid-template-rows: subgrid; } .lg7__op { grid-row: 1; } }
.lg7__ic { display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 6px var(--sec), 0 14px 30px rgba(252,76,1,.28); transform: scale(0); }
.lx6:not(.lx6--grey) .lg7__ic { box-shadow: 0 0 0 6px var(--pg), 0 14px 30px rgba(252,76,1,.28); }
.lg7__ic svg { width: 46%; height: 46%; overflow: visible; }
.lg7__ic--res { background: var(--ink); box-shadow: 0 0 0 6px var(--sec), 0 14px 30px rgba(2,10,24,.25); }
.lg7__fig.is-in .lg7__ic { animation: nodeIn .7s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(var(--i) * .22s); }
.lg7__t { margin-top: 26px; font: 700 1.1875rem/1.3 var(--f-display); letter-spacing: -0.005em; color: var(--ink); }
.lg7__d { margin-top: 6px; max-width: 20ch; color: var(--mut); font-size: .9375rem; line-height: 1.5; }
/* Hebel als Randnotiz wie im Lehrbuch: orange Linie, Text in Tinte */
.lg7__lever { margin-top: 18px; padding: 2px 0 2px 12px; border-left: 2px solid var(--orange); font: 500 .875rem/1.4 var(--f-display); color: var(--ink); }
.lg7__step--res .lg7__t { font-size: 1.5rem; letter-spacing: -0.02em; }

/* Rechenzeichen sitzen auf der Strecke */
.lg7__op { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin-top: calc(var(--node) / 2 - 18px); border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 700 1.125rem/1 var(--f-display); color: var(--ink); opacity: 0; }
.lg7__fig.is-in .lg7__op { animation: lg7Fade .4s var(--ease) forwards; animation-delay: calc(var(--i) * .22s + .25s); }
@keyframes lg7Fade { to { opacity: 1; } }

/* Folgerung als Formel wie im Lehrbuch */
.lg7__rule { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 48px; margin-top: 56px; padding: 32px 40px; border-radius: 28px; background: #fff; }
.lx6:not(.lx6--grey) .lg7__rule { background: var(--card); }
.lg7__eq { display: flex; align-items: center; gap: 12px; white-space: nowrap; font: 500 1.375rem/1.2 var(--f-display); color: var(--ink); }
.lg7__eq span { padding: 10px 16px; border-radius: 14px; background: var(--card); }
.lg7__eq span:first-child { background: var(--orange); color: var(--black); font-weight: 700; }
.lx6:not(.lx6--grey) .lg7__eq span { background: #fff; }
.lx6:not(.lx6--grey) .lg7__eq span:first-child { background: var(--orange); }
.lg7__eq i { font-style: normal; font-weight: 700; color: var(--mut); }
.lg7__why { max-width: 62ch; color: var(--mut); line-height: 1.6; }

/* ---------- T-Profil (lt7, Jeremy 05.11. nach der Vorlage "T-Shaped Google Ads Specialist"): Breite oben in sechs
   nummerierten Feldern, Kern in Orange, darunter die Tiefe als Säule; Achsen "Breite" und "Tiefe" wie im Lehrbuch ---------- */
.lt7 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.32fr) repeat(3, minmax(0, 1fr)); column-gap: 10px; margin: 0; }
.lt7__axis { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.lt7__axis--x { position: relative; grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding-right: 2px; }
.lt7__axis--x::after { content: ""; flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--ghost), var(--mut)); }
.lt7__axis--x::before { content: ""; position: absolute; right: 0; top: 50%; margin-top: -5px; border-left: 8px solid var(--mut); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.lt7__bar { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: subgrid; margin: 0; padding: 0; list-style: none; }
.lt7__item { display: grid; align-content: start; gap: 4px; padding: 18px 16px 20px; border-radius: 20px; background: #fff; }
.lx6:not(.lx6--grey) .lt7__item { background: var(--card); }
.lt7__n { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--orange);
  font: 700 .75rem/1 var(--f-display); color: var(--orange-ink); }
.lt7__item b { font: 700 .9375rem/1.3 var(--f-display); color: var(--ink); hyphens: auto; }
/* Feldname reserviert zwei Zeilen, damit die Zeile darunter in allen Feldern bündig steht (Prüf-Flotte GEO 05.11.: "Wirtschaftlichkeit" trennt) */
.lt7__bar .lt7__item b { min-height: 2.6em; }
.lt7__item > b + span { color: var(--mut); font-size: .8125rem; line-height: 1.4; }
.lt7__core { display: grid; justify-items: center; align-content: center; gap: 10px; padding: 18px 12px; border-radius: 20px 20px 0 0; background: var(--orange); text-align: center; }
.lt7__core b { font: 700 1.125rem/1.2 var(--f-display); color: var(--black); }
.lt7__logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(2,10,24,.12); }
.lt7__stemwrap { position: relative; grid-column: 4; grid-row: 3; }
.lt7__stem { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: 0 0 20px 20px; }
.lt7__stem li { padding: 10px 10px; background: #FFE9DD; text-align: center; font: 500 .8125rem/1.35 var(--f-display); color: var(--ink); }
.lt7__stem li + li { border-top: 1px solid rgba(252,76,1,.16); }
.lt7__stem li:nth-child(even) { background: #FFF1E9; }
/* Achse "Tiefe" links der Säule */
.lt7__stemwrap::before { content: ""; position: absolute; left: -18px; top: 10px; bottom: 14px; width: 1.5px; background: linear-gradient(var(--ghost), var(--mut)); }
.lt7__stemwrap::after { content: ""; position: absolute; left: -22.25px; bottom: 6px; border-top: 8px solid var(--mut); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.lt7__axis--y { position: absolute; left: -44px; top: 8px; margin: 0; writing-mode: vertical-rl; }
.lt7__note { grid-row: 3; align-self: center; max-width: 30ch; margin: 0; color: var(--mut); line-height: 1.6; }
.lt7__note b { color: var(--ink); font-family: var(--f-display); }
.lt7__note--l { grid-column: 1 / 4; justify-self: end; padding-right: 64px; text-align: right; }
.lt7__note--r { grid-column: 5 / 8; justify-self: start; padding-left: 28px; }
/* Einblenden: Breite von links nach rechts, dann die Säule von oben nach unten */
.lt7__item, .lt7__core { opacity: 0; transform: translateY(10px); }
.lt7__stem li { opacity: 0; transform: translateY(-6px); }
.lt7.is-in .lt7__core { animation: lt7In .5s var(--ease) forwards; }
.lt7.is-in .lt7__item { animation: lt7In .5s var(--ease) forwards; animation-delay: calc(.15s + var(--i) * .08s); }
.lt7.is-in .lt7__stem li { animation: lt7In .45s var(--ease) forwards; animation-delay: calc(.6s + var(--i) * .07s); }
@keyframes lt7In { to { opacity: 1; transform: none; } }

/* ---------- Zone-Profil als Kamm (lk7, Konzept roter Faden 05.11.): vier feste Felder der Breite, drei Stämme der Tiefe ---------- */
.lt7--kamm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.lk7__stem { grid-row: 3; }
.lk7__stem:not(.lk7__stem--first)::before, .lk7__stem:not(.lk7__stem--first)::after { content: none; }
.lt7__core small { font: 400 .8125rem/1.3 var(--f-body); color: rgba(2,10,24,.72); }
.lk7__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; }
.lk7__chips > span:first-child { width: 100%; text-align: center; font: 500 .6875rem/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.lk7__chip { padding: 5px 10px; border-radius: 100px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 .75rem/1.2 var(--f-display); color: var(--ink); }
.lx6:not(.lx6--grey) .lk7__chip { background: var(--card); box-shadow: none; }
.lk7__cap { grid-column: 1 / -1; grid-row: 4; margin-top: 32px; text-align: center; color: var(--mut); line-height: 1.6; }
.lk7__cap b { color: var(--ink); font-family: var(--f-display); }
/* Mandatsprofil: nur die Felder des Mandats in Farbe (filter statt opacity, damit die Einblendung es nicht überschreibt) */
.lt7--profil .is-off { filter: grayscale(1) opacity(.3); }
.lt7--profil .lt7__core.is-off { background: var(--ghost); }

@media (prefers-reduced-motion: reduce) {
  .lg7__step::after, .lg7__ic, .lg7__op, .lt7__item, .lt7__core, .lt7__stem li { animation: none !important; transform: none; opacity: 1; }
}
@media (max-width: 1023px) {
  .lg7__row { grid-template-columns: 1fr; gap: 28px; }
  .lg7__step::after, .lg7__op { display: none; }
  .lg7__rule { grid-template-columns: 1fr; }
  .lt7 { grid-template-columns: 1fr; row-gap: 10px; }
  .lt7__bar { grid-template-columns: 1fr; gap: 10px; }
  .lt7__stemwrap, .lt7__note--l, .lt7__note--r { grid-column: 1; grid-row: auto; justify-self: stretch; padding: 0; text-align: left; }
  .lg7__eq { flex-wrap: wrap; white-space: normal; }
}

/* Felder und Stämme des Zone-Profils verlinken auf ihre Seite (unsichtbare Fläche, Hover wie Karten) */
.lt7__item, .lt7__core { position: relative; }
.lt7__hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.lt7__item:has(.lt7__hit), .lt7__core:has(.lt7__hit) { transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.lt7__item:has(.lt7__hit):hover { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.lt7__core:has(.lt7__hit):hover { box-shadow: 0 14px 30px rgba(252,76,1,.28); }
.lt7__hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Rücklauf über der Kette (GEO 05.11.): vom Ergebnis zurück zu einer Stufe, gestrichelt in den Graustufen der Strecke,
   Pfeil nach unten in den Knoten, Beschriftung auf der Linie (formel(..., back=(Stufe, Text))) */
.lg7__fig--back { padding-top: 76px; }
.lg7__back { position: absolute; grid-row: 1; top: -52px; left: calc(var(--node) / 2); right: calc(var(--node) / -2); height: 44px;
  border: 2px dashed #BDBEBF; border-bottom: 0; border-radius: 22px 22px 0 0; opacity: 0; }
.lg7__back::after { content: ""; position: absolute; left: -7px; bottom: -6px; border-top: 9px solid #97999B; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.lg7__back span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 4px 14px; background: var(--sec);
  font: 500 .8125rem/1.3 var(--f-display); color: var(--ink); white-space: nowrap; }
.lx6:not(.lx6--grey) .lg7__back span { background: var(--pg); }
.lg7__fig.is-in .lg7__back { animation: lg7Fade .5s var(--ease) forwards; animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) { .lg7__back { animation: none !important; opacity: 1; } }
@media (max-width: 1023px) { .lg7__back { display: none; } .lg7__fig--back { padding-top: 0; } }

/* /blog.css */
/* TZ2 Blog (ab 09.11.2026, Sitzung "Blog im TZ2-Design", Generator _tools/site-tools/blog_artikel.py und blog.py, Plan
   research/blog-2026-11-09.md). Das Live-Markup der Artikel und der Übersicht bleibt wörtlich (Klassen article-*, hub-*, konv-*),
   hier bekommt es die TZ2-Gestalt. Nur Tokens aus DESIGNSYSTEM §2; Artikel-Typografie wie /studie (Stand studie.css 09.11. abends:
   Text 17 px/1.75, Zwischentitel und Kastentitel 28 px/500, Fragen 19 px, graue Kästen auf Weiss, Seitenspalte mit Inhaltsverzeichnis),
   Karten wie die TZ2-Karten (Radius 28, kleine 24, Bild 20 eingerückt, Abstand 16, Reihen per Subgrid bündig). Hero in
   blog-hero.css, alles unter 1280 px in blog-mobil.css. */

.bl7-seite .nb { white-space: nowrap; }
.bl7-seite .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bl7-seite [hidden] { display: none !important; }

/* Text-Link wie TZ2 .link (tz2.css): Grossbuchstaben 14 px, Zeilenhöhe 1, oranger Strich 1.5 px mit 6 px Abstand, Pfeil rückt beim
   Hover. Live-Markup: Text <span class="nb">letztes Wort<span class="arrow">→</span></span>; inline-block statt inline-flex, damit
   lange Links umbrechen und die Wörter nicht auseinanderrücken. */
.bl7-seite .tlink { position: relative; display: inline-block; padding-bottom: 6px; border-bottom: 1.5px solid var(--orange); font: 700 .875rem/1.25 var(--f-display);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color var(--fast) var(--ease); }
.bl7-seite .tlink:hover { color: var(--orange-ink); }
.bl7-seite .tlink .arrow { display: inline-block; margin-left: 8px; transition: transform var(--base) var(--ease); }
.bl7-seite .tlink:hover .arrow { transform: translateX(4px); }
.bl7-seite .btn-primary { background: var(--orange); color: var(--black); }
.bl7-seite .btn-primary:hover { background: var(--black); color: #fff; box-shadow: var(--shadow-orange); }
.bl7-seite .article-side-h { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }

/* ---------- Artikel: Text links, Seitenspalte rechts ---------- */
/* Dokumentraster wie /studie (280 px Seitenspalte, 72 px Abstand); Lesespalte 96 px unter der Bühne (DESIGNSYSTEM Regel 13) */
.bl7__layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 72px; row-gap: 0; align-items: start; padding-top: 96px; padding-bottom: 120px; }
.bl7 .article-body { min-width: 0; max-width: 720px; }
.bl7 .article-toc-m { display: none; }
.bl7 .article-body > h2, .bl7 .article-h2 { margin-top: 56px; font: 500 1.75rem/1.25 var(--f-display); letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 112px; text-wrap: balance; }
.bl7 .article-body > h3 { margin-top: 40px; font: 500 1.375rem/1.3 var(--f-display); color: var(--ink); scroll-margin-top: 112px; }
.bl7 .article-body > p { margin-top: 18px; font-size: 1.0625rem; line-height: 1.75; color: #3c3d3f; }
.bl7 .article-body > h2 + p, .bl7 .article-body > h3 + p { margin-top: 20px; }
.bl7 .article-body > :first-child, .bl7 .article-body > .article-toc-m:first-child + * { margin-top: 0; }  /* Inhaltsverzeichnis ist am Desktop versteckt */
.bl7 .article-body a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange);
  text-underline-offset: 3px; transition: color var(--fast) var(--ease); }
.bl7 .article-body a:not([class]):hover { color: var(--orange-ink); }
.bl7 .article-body strong { color: var(--ink); font-weight: 700; }
/* Listen: Punkte orange wie /studie, nummerierte Listen behalten ihre Nummer (Schritte, Prüflisten) */
.bl7 .article-list { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; }
.bl7 .article-list li { position: relative; padding-left: 26px; font-size: 1.0625rem; line-height: 1.75; color: #3c3d3f; }
.bl7 ul.article-list > li::before { content: ""; position: absolute; left: 2px; top: calc(.875em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.bl7 ol.article-list { counter-reset: n; }
.bl7 ol.article-list > li { counter-increment: n; padding-left: 30px; }
.bl7 ol.article-list > li::before { content: counter(n) "."; position: absolute; left: 0; top: 0; font: 700 1rem/1.85 var(--f-display); color: var(--orange-ink); }

/* Kästen grau auf Weiss (§2, wie /studie: kein Pfirsich); Aufklapper wie die TZ2-Fragen */
.bl7 .article-box { margin-top: 40px; padding: 32px 36px; border-radius: 28px; background: var(--card); }
.bl7 .article-box > .article-h2 { margin-top: 0; }
.bl7 .article-box:not(.article-box--keys) .article-list li { font-size: 1rem; }  /* Kurzüberblick 17 px wie /studie */
.bl7 .article-box-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.bl7 .article-box-label { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.bl7 .article-box-head strong { font: 500 .9375rem/1.4 var(--f-display); }
.bl7 .article-box > p { margin-top: 14px; font-size: 1rem; line-height: 1.7; color: #3c3d3f; }
.bl7 .article-box details { margin-top: 18px; border-top: 1px solid var(--line); }
.bl7 .article-box summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding-top: 12px; cursor: pointer;
  list-style: none; font: 500 1rem/1.4 var(--f-display); color: var(--ink); }
.bl7 .article-box summary::-webkit-details-marker { display: none; }
.bl7 .article-box summary::after { content: "+"; flex: none; font: 500 1.375rem/1 var(--f-display); color: var(--orange-ink); transition: transform var(--base) var(--ease); }
.bl7 .article-box details[open] summary::after { transform: rotate(45deg); }
.bl7 .article-box details > p { margin-top: 10px; font-size: .9375rem; line-height: 1.65; color: var(--mut); }
.bl7 .article-box-link { margin-top: 20px; }

/* Nächster Schritt im Text (KI-Check, Praxisguide) als graue Karte mit Knopf, Titel kompakt 22 px */
.bl7 .article-cta { margin-top: 48px; padding: 32px 36px; border-radius: 28px; background: var(--card); }
.bl7 .article-cta-title { font: 500 1.375rem/1.3 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.bl7 .article-cta-text { max-width: 58ch; margin-top: 10px; font-size: 1rem; line-height: 1.65; color: var(--mut); }
.bl7 .article-cta-actions { margin-top: 22px; }
.bl7 .konv-inline { margin-top: 32px; padding: 22px 26px; border-radius: 24px; background: var(--card); }
.bl7 .konv-inline p { font-size: 1rem; line-height: 1.7; color: #3c3d3f; }
.bl7 .konv-inline .tlink { margin-left: 4px; }

/* Zitat mit oranger Linie wie die Randnotizen der Lehrbuch-Grafik */
.bl7 .article-quote { margin: 40px 0 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--orange); }
.bl7 .article-quote p { font: 500 1.375rem/1.45 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }

/* Tabellen wie lt6 (Radius 28, 1-px-Linie, Kopf 12 px in Grossbuchstaben grau auf grau, Zellen 15 px mit 18/20 Polsterung; breite
   Tabellen behalten die Schrift und scrollen seitlich, Harmonie-Prüfung 10.11.). Der Live-Hinweis "Tabelle seitlich wischbar." erscheint nur, wenn die
   Tabelle wirklich seitlich scrollt (Klasse is-scroll aus dem Skript der Seite, blog_artikel.TABELLEN_JS); ohne Skript unter 1024 px. */
.bl7 .article-table-hint { display: none; margin-top: 24px; font-size: .875rem; line-height: 1.4; color: var(--mut); }
.bl7 .article-table-hint.is-scroll { display: block; }
.bl7 .article-table { margin-top: 28px; overflow-x: auto; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.bl7 .article-table-hint.is-scroll + .article-table { margin-top: 8px; }
.bl7 .article-table + p { margin-top: 28px; }  /* nach der gerahmten Tabelle derselbe Abstand wie davor */
.bl7 .article-table table { width: 100%; min-width: 30em; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.bl7 .article-table caption { padding: 20px 20px 14px; text-align: left; font: 500 1rem/1.4 var(--f-display); color: var(--ink); }
.bl7 .article-table th, .bl7 .article-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.bl7 .article-table thead th { padding-top: 24px; padding-bottom: 22px; background: var(--card); font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mut); }
.bl7 .article-table table:not(:has(caption)) thead th { border-top: 0; }
.bl7 .article-table tbody th { font: 500 .9375rem/1.4 var(--f-display); color: var(--ink); }
.bl7 .article-table td { color: var(--mut); }
.bl7 .article-table td a:not([class]), .bl7 .article-table th a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.bl7 .article-table .num { text-align: right; white-space: nowrap; }
.bl7 .article-table .is-empty { color: var(--mut); }
/* breite Tabellen (vier bis sechs Spalten): Kopfzellen mit Zahlen dürfen umbrechen */
.bl7 .article-table--wide thead th.num { white-space: normal; }

/* Fragen im fq6-Muster (DESIGNSYSTEM Regel 13): graue Fläche (Radius 28, Polsterung 24), darin weisse Fragen-Karten (Radius 24,
   24/28); das Markup bleibt offen und wortgleich wie live, darum ohne Plus-Kreis */
.bl7 .article-faq { display: grid; gap: 10px; margin-top: 24px; padding: 24px; border-radius: 28px; background: var(--sec); }
.bl7 .article-faq-item { padding: 24px 28px; border-radius: 24px; background: #fff; }
.bl7 .article-faq-item h3 { font: 500 1.1875rem/1.35 var(--f-display); color: var(--ink); }
.bl7 .article-faq-item p { margin-top: 8px; font-size: 1.0625rem; line-height: 1.75; color: #3c3d3f; }

/* Passende Leistung als breite Leisten mit orangem Pfeil (wie wide-link: Radius 28, Pfeil 44 px) */
.bl7 .article-links { display: grid; gap: 16px; margin-top: 48px; }
.bl7 .article-links .article-side-h { margin-bottom: -4px; }
.bl7 .article-links .tlink { position: relative; display: block; padding: 22px 80px 22px 28px; border: 0; border-radius: 28px; background: var(--card);
  font: 500 1.0625rem/1.4 var(--f-display); letter-spacing: 0; text-transform: none; transition: background var(--fast) var(--ease); }
.bl7 .article-links .tlink:hover { background: var(--line); color: var(--ink); }
.bl7 .article-links .tlink .arrow { position: absolute; top: 50%; right: 20px; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0;
  border-radius: 50%; background: var(--orange); color: var(--black); font: 700 1.125rem/1 var(--f-display); }
.bl7 .article-links .tlink:hover .arrow { transform: translateX(3px); }

/* Werkzeuge vor der Agenturwahl, Kennzahlen, Agenturvergleich (kleine Karten 24, Abstand 16, Titel kompakt 22 px) */
.bl7 .article-tools { display: grid; gap: 16px; margin-top: 40px; }
.bl7 .article-tool { display: grid; justify-items: start; gap: 8px; padding: 26px 28px 28px; border-radius: 24px; background: var(--card); }
.bl7 .article-tool-label { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.bl7 .article-tool strong { font: 500 1.375rem/1.3 var(--f-display); color: var(--ink); }
.bl7 .article-tool p { font-size: .9375rem; line-height: 1.65; color: #3c3d3f; }
.bl7 .article-tool .tlink { margin-top: 10px; }
.bl7 .article-stats { margin-top: 40px; }
.bl7 .article-stats-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.bl7 .article-stats-grid > div { padding: 22px 22px 0; }
.bl7 .article-stats-grid > div:first-child { padding-left: 0; }
.bl7 .article-stats-grid > div + div { border-left: 1px solid var(--line); }
.bl7 .article-stats strong { display: block; font: 700 2.5rem/1.05 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }
.bl7 .article-stats span { display: block; margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: var(--mut); }
.bl7 .article-stats > p { margin-top: 18px; font-size: .8125rem; line-height: 1.55; color: var(--mut); }
.bl7 .article-agencies { display: grid; gap: 16px; margin-top: 28px; }
.bl7 .article-agency { padding: 26px 28px 28px; border-radius: 24px; background: var(--card); }
.bl7 .article-agency.is-own { box-shadow: inset 0 0 0 1.5px var(--orange); }  /* eigener Eintrag: Linie statt Fläche (Kicker "Eigener Eintrag" wie live) */
.bl7 .article-agency-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.bl7 .article-agency-head h3 { font: 500 1.375rem/1.3 var(--f-display); color: var(--ink); }
.bl7 .article-agency-head em { font: 500 .75rem/1.5 var(--f-display); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.bl7 .article-agency > p { margin-top: 10px; font-size: .9375rem; line-height: 1.65; color: #3c3d3f; }
.bl7 .article-agency > p.article-agency-signal { font-size: .8125rem; line-height: 1.55; color: var(--mut); }
.bl7 .article-agency > p.article-agency-link { margin-top: 16px; }
.bl7 .article-agency > ul, .bl7 .article-agency > ol { display: grid; gap: 6px; margin-top: 10px; padding-left: 20px; list-style: disc; font-size: .9375rem; line-height: 1.6; color: #3c3d3f; }

/* Quellen, Autorbox, Zitierbox */
.bl7 .article-sources { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.bl7 .article-sources-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.bl7 .article-sources-head small { font-size: .8125rem; color: var(--mut); }
.bl7 .article-sources .article-h2 { margin-top: 12px; }
.bl7 .article-sources > p { margin-top: 10px; font-size: .9375rem; line-height: 1.65; color: var(--mut); }
.bl7 .article-sources ul { display: grid; gap: 10px; margin-top: 18px; }
.bl7 .article-sources li { font-size: .9375rem; line-height: 1.55; }
.bl7 .article-sources li a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.bl7 .article-sources li a:hover { color: var(--orange-ink); }
.bl7 .article-sources li a > span[aria-hidden] { margin-left: 4px; color: var(--orange-ink); }
.bl7 .article-authorbox { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px 18px; margin-top: 48px; padding: 26px 28px 28px;
  border-radius: 28px; background: var(--card); }
.bl7 .article-authorbox > img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.bl7 .article-authorbox-name { font: 500 1.125rem/1.3 var(--f-display); color: var(--ink); text-decoration: none; }
.bl7 .article-authorbox-name:hover { color: var(--orange-ink); }
.bl7 .article-authorbox-role { margin-top: 2px; font-size: .875rem; line-height: 1.5; color: var(--mut); }
.bl7 .article-authorbox-links { margin-top: 4px; }
.bl7 .article-authorbox-links a { font: 500 .8125rem/1.4 var(--f-display); color: var(--orange-ink); text-decoration: none; }
.bl7 .article-authorbox > p { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.7; color: #3c3d3f; }
.bl7 .article-authorbox > p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.bl7 .article-cite { margin-top: 16px; padding: 22px 26px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.bl7 .article-cite dl { display: grid; gap: 14px; margin: 14px 0 0; }
.bl7 .article-cite dt { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.bl7 .article-cite dd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 4px 0 0; font-size: .9375rem; line-height: 1.6; color: #3c3d3f; }
.bl7 .article-cite-copy { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--card); font: 700 .75rem/1 var(--f-display);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.bl7 .article-cite-copy:hover { background: var(--ink); color: #fff; }

/* Seitenspalte: läuft mit und passt in den Bildschirm (Prüf-Flotte 09.11.: bei 1440 x 900 war "Weiterlesen" abgeschnitten); ein langes
   Inhaltsverzeichnis scrollt in seiner Karte, Weiterlesen bleibt darunter sichtbar. Inhalt mit Nummern wie /studie. */
.bl7 .article-side { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 24px; max-height: calc(100vh - 128px); }
.bl7 .article-toc { flex: 0 1 auto; min-height: 160px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 24px 26px; border-radius: 24px; background-color: var(--card);
  /* Schatten am unteren Rand nur, solange die Liste weitergeht (Hintergrund lokal und fest): zeigt bei niedrigen Bildschirmen, dass
     das Inhaltsverzeichnis in sich scrollt (Prüf-Flotte Runde 2, 1280 x 720) */
  background-image: linear-gradient(rgba(244, 244, 245, 0), var(--card) 70%), radial-gradient(farthest-side at 50% 100%, rgba(2, 10, 24, .16), rgba(2, 10, 24, 0));
  background-position: center bottom, center bottom; background-size: 100% 40px, 100% 14px; background-repeat: no-repeat; background-attachment: local, scroll; }
.bl7 .article-side-more { flex: none; }
.bl7 .article-toc ol { display: grid; gap: 10px; margin-top: 14px; counter-reset: t; }
.bl7 .article-toc li { counter-increment: t; display: grid; grid-template-columns: 26px minmax(0, 1fr); font-size: .9375rem; line-height: 1.4; }
.bl7 .article-toc li::before { content: counter(t, decimal-leading-zero); font: 500 .75rem/1.9 var(--f-display); color: var(--orange-ink); }
.bl7 .article-toc a { color: var(--ink); text-decoration: none; }
.bl7 .article-toc a:hover { color: var(--orange-ink); }
.bl7 .article-side-more { padding: 0 6px; }
.bl7 .article-side-more ul { display: grid; gap: 14px; margin-top: 12px; }
.bl7 .article-side-more a { display: grid; gap: 4px; text-decoration: none; }
.bl7 .article-side-more strong { font: 500 .9375rem/1.4 var(--f-display); color: var(--ink); transition: color var(--fast) var(--ease); }
.bl7 .article-side-more a:hover strong { color: var(--orange-ink); }
.bl7 .article-side-more span { font-size: .8125rem; color: var(--mut); }
@media (min-width: 1280px) and (max-height: 820px) {  /* niedrige Bildschirme: Weiterlesen kompakter, mehr Platz für das Inhaltsverzeichnis */
  .bl7 .article-side { gap: 16px; }
  .bl7 .article-side-more ul { gap: 10px; margin-top: 8px; }
  .bl7 .article-side-more a { gap: 2px; }
}

/* Kennzahlen (drei Artikel) als Faktenliste am Anfang der Artikelspalte wie /studie A (.ks7__fakten, .ks7__stats--liste): Zahl 36 px
   links, Satz rechts, oben eine Linie in Tinte, Quellzeile darunter; die Seitenspalte läuft neben Faktenliste und Text mit */
.bl7__layout--fakten > .bl7__fakten { grid-column: 1; grid-row: 1; max-width: 720px; margin-bottom: 56px; }
.bl7__layout--fakten > .article-body { grid-column: 1; grid-row: 2; }
.bl7__layout--fakten > .article-side { grid-column: 2; grid-row: 1 / span 2; }
.bl7__fakten .article-stats { margin: 0; }
.bl7__fakten .article-stats-grid { display: block; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
.bl7__fakten .article-stats-grid > div, .bl7__fakten .article-stats-grid > div:first-child { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 6px 28px;
  align-items: baseline; padding: 18px 0; border-left: 0; }
.bl7__fakten .article-stats-grid > div + div { border-top: 1px solid var(--line); border-left: 0; }
.bl7__fakten .article-stats strong { font: 700 2.25rem/1.05 var(--f-display); letter-spacing: -0.03em; }
.bl7__fakten .article-stats span { max-width: 46ch; margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--mut); }
.bl7__fakten .article-stats > p { margin-top: 14px; font-size: .8125rem; line-height: 1.5; color: var(--mut); }

/* ---------- Passende Artikel (grau, weisse Karten, Reihen per Subgrid bündig: Bild, Kicker, Titel, Text, Datum) ---------- */
.bl7-seite .article-more { padding: 120px 0; background: var(--sec); }
.bl7-seite .article-more .h2 { font: 700 3.5rem/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }  /* wie .h1 (tz2.css) */
.bl7-seite .article-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; margin-top: 56px; }
.bl7-seite .article-cards > li { display: grid; grid-row: span 5; grid-template-rows: subgrid; margin-bottom: 16px; }
.bl7-seite .article-card { position: relative; display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; padding: 12px; border-radius: 28px; background: #fff;
  transition: box-shadow var(--base) var(--ease); }
.bl7-seite .article-card:hover { box-shadow: var(--shadow-card); }
.bl7-seite .article-card-img img { width: 100%; height: auto; aspect-ratio: 1536 / 760; object-fit: cover; border-radius: 20px; }
.bl7-seite .article-card-body { display: grid; grid-row: 2 / -1; grid-template-rows: subgrid; padding: 20px 14px 12px; }
.bl7-seite .article-card-cat { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.bl7-seite .article-card h3 { margin-top: 10px; font: 500 1.375rem/1.3 var(--f-display); color: var(--ink); }
.bl7-seite .article-card-link { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); }
.bl7-seite .article-card-link::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.bl7-seite .article-card:hover .article-card-link { color: var(--orange-ink); }
.bl7-seite .article-card-text { margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: var(--mut); }
.bl7-seite .article-card-date { align-self: end; padding-top: 16px; font-size: .8125rem; color: var(--mut); }
.bl7-seite .article-card--all { grid-template-rows: none; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px; }
.bl7-seite .article-card--all h3 { margin: 0; font: 500 1.75rem/1.25 var(--f-display); letter-spacing: -0.01em; }
.bl7-seite .article-card--all .arrow { align-self: flex-end; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--orange);
  color: var(--black); font: 700 1.5rem/1 var(--f-display); transition: transform var(--base) var(--ease); }
.bl7-seite .article-card--all:hover .arrow { transform: translateX(4px); }

/* ---------- Abschluss: Konversionspfad als Bühne wie end6 der Startseite ---------- */
.bl7__end .konv-panel { position: relative; z-index: 3; }
.bl7__end .h2 .accent { color: var(--orange); }
.bl7__end .konv-text { max-width: 56ch; margin: 18px auto 0; font-size: 1.125rem; line-height: 1.6; color: var(--mut); }
.bl7__end .konv-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; margin-top: 30px; }
.bl7__end .konv-note { max-width: 64ch; margin: 24px auto 0; font-size: .9375rem; line-height: 1.6; color: var(--mut); }
.bl7__end .konv-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.bl7__end .konv-note a:hover { color: var(--orange-ink); }

/* ---------- Übersicht /blog: graue Fläche mit weissen Karten wie lx6--grey (/ressourcen, /google-ads-guide), weil vor dem Abschluss
   immer eine graue Fläche steht (DESIGNSYSTEM Regel 13); 120 px oben und unten. Raster wörtlich aus live, Reihen per Subgrid bündig
   (Bild, Kicker und Datum, Titel, Text); die Featured-Karte über die ganze Breite mit eigenem Aufbau ---------- */
.blo .hub-section { padding: 120px 0; background: var(--sec); }
.blo .hub-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.blo .hub-cards > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; min-width: 0; margin-bottom: 16px; }
.blo .hub-card { position: relative; display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; padding: 12px; border-radius: 28px; background: #fff;
  transition: box-shadow var(--base) var(--ease); }
.blo .hub-card:hover { box-shadow: var(--shadow-card); }
.blo .hub-card-media img { width: 100%; height: auto; aspect-ratio: 1536 / 760; object-fit: cover; border-radius: 20px; }
.blo .hub-card-body { display: grid; grid-row: 2 / -1; grid-template-rows: subgrid; padding: 20px 14px 12px; }
.blo .hub-card-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.blo .hub-card-kicker { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.blo .hub-card-date { font-size: .8125rem; color: var(--mut); }
.blo .hub-card-title { margin-top: 10px; font: 500 1.375rem/1.3 var(--f-display); color: var(--ink); text-wrap: pretty; }
.blo .hub-card-title a { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); }
.blo .hub-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.blo .hub-card:hover .hub-card-title a { color: var(--orange-ink); }
.blo .hub-card-text { margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: var(--mut); }
.blo .hub-card-byline { display: flex; align-items: center; gap: 10px; padding-top: 18px; font: 500 .875rem/1.4 var(--f-display); color: var(--ink); }
.blo .hub-card-byline img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
/* Featured über die ganze Breite: Bild links, Text rechts (wie live ab 900 px Kartenbreite), Titel 28 px wie Karten-Titel */
.blo .hub-cards > div:has(> .hub-card--feature) { grid-column: 1 / -1; display: block; }
/* Bild füllt die Kartenhöhe, rundum 12 px eingerückt (Prüf-Flotte Runde 2) */
.blo .hub-card--feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: none; align-items: stretch; gap: 8px; }
.blo .hub-card--feature .hub-card-media { display: grid; grid-column: 1; grid-row: 1; }
.blo .hub-card--feature .hub-card-media img { aspect-ratio: auto; height: 100%; min-height: 340px; }
.blo .hub-card--feature .hub-card-body { display: block; align-self: center; grid-column: 2; grid-row: 1; padding: 28px 36px 28px 40px; }
.blo .hub-card--feature .hub-card-title { font: 500 1.75rem/1.25 var(--f-display); letter-spacing: -0.01em; }
.blo .hub-card--feature .hub-card-text { max-width: 34em; font-size: 1rem; }
.blo .hub-card--feature .hub-card-byline { padding-top: 24px; }

/* Abschluss /blog wie die Einzelseiten (end6 mit Karte von Jeremy); Text-Link wie .link der Startseite ("Oder direkt: 041 ...") */
.blo .final .final-panel { position: relative; z-index: 3; }
.blo .final .final-copy .h2 .accent { color: var(--orange); }
.blo .final .final-text { max-width: 52ch; margin: 18px auto 0; font-size: 1.125rem; line-height: 1.6; color: var(--mut); }
.blo .final .final-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; margin-top: 30px; }
/* Personen-Pille wie le6__card (leistungen.css): Name und Rolle links, "Profil ansehen" rechts in derselben Zeile, 72 px hoch,
   Weiss 85 % mit Linie, kein Schatten; Bühne unten 104 px. Live-Markup bleibt (span mit strong, small, em). */
.blo .final .end6__stage { padding-bottom: 104px; }
.blo .hub-owner { display: inline-flex; align-items: center; gap: 14px; margin: 36px auto 0; padding: 10px 22px 10px 10px; border-radius: 100px;
  background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; text-align: left; }
.blo .hub-owner img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.blo .hub-owner span { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 24px; }  /* 14 Lücke + 10 Rand wie le6__card i */
.blo .hub-owner strong { grid-column: 1; font: 700 1rem/1.3 var(--f-display); color: var(--ink); }
.blo .hub-owner small { grid-column: 1; font-size: .875rem; line-height: 1.35; color: var(--mut); }
.blo .hub-owner em { grid-column: 2; grid-row: 1 / span 2; font: 700 .75rem/1 var(--f-display); font-style: normal; letter-spacing: .04em; text-transform: uppercase;
  color: var(--orange-ink); }

/* /blog-hero.css */
/* TZ2 Blog: Heros (ab 09.11.2026, Desktop; unter 1280 px blog-mobil.css). Artikelkopf in drei Varianten (Schalter BLOG_HERO in
   blog_artikel.py, Register research/blog-2026-11-09.md): A Titelbild im Split, B Lesekarte im Split, C Lesekopf ohne Bühne.
   Übersicht /blog in drei Varianten (BLOGUEBERSICHT_HERO in blog.py): A Themen im Split, B Featured im Split, C Neueste Titelbilder.
   Alle Teile im Kopf sind Live-Markup (Brotkrumen, Eyebrow, H1, Lead, Autor und Daten, KI-Zeile, Titelbild); kein zusätzlicher
   Text im Artikel, weil blog-extras.mjs die Lesezeit aus allen Wörtern im äusseren <article> rechnet. */

/* ---------- Artikelkopf, gemeinsam ---------- */
/* Harmonie-Prüfung 10.11.2026 (DESIGNSYSTEM Regel 13): Bühne oben 176 wie .gha__stage, Raster 56, Eyebrow bis H1 16, H1 bis Lead 22,
   H1 1.03 und -0.035em; der Hero bleibt bei 1440 x 900 im ersten Bildschirm (blog_browser.mjs misst die Bühnen-Unterkante). */
.bl7h__stage { padding: 176px 0 64px; }
.bl7h__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: 56px; align-items: center; }
.bl7h .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font: 500 .8125rem/1.5 var(--f-display); color: var(--mut); }
.bl7h .crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.bl7h .crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--ghost); }
.bl7h .crumbs a { color: var(--mut); text-decoration: none; transition: color var(--fast) var(--ease); }
.bl7h .crumbs a:hover { color: var(--orange-ink); }
.bl7h .crumbs [aria-current] { color: var(--ink); }
.bl7h .eyebrow { margin: 18px 0 16px; }
.bl7h .article-title { font: 700 clamp(38px, 3.5vw, 52px)/1.03 var(--f-display); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.bl7h .article-title .hl { color: var(--orange); }
.bl7h .article-lead { max-width: 60ch; margin-top: 22px; font: 400 1.125rem/1.7 var(--f-body); color: var(--mut); text-wrap: pretty; }  /* Lead 18 px (§2) */
.bl7h .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 24px; }
.bl7h .article-author { display: inline-flex; align-items: center; gap: 10px; font: 500 1rem/1.3 var(--f-display); color: var(--ink); text-decoration: none;
  transition: color var(--fast) var(--ease); }
.bl7h .article-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.bl7h .article-author:hover { color: var(--orange-ink); }
.bl7h .article-dates { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .875rem; line-height: 1.5; color: var(--mut); }
.bl7h .article-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.bl7h .article-ai-label { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.bl7h .article-ai ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bl7h .article-ai a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 13px; border-radius: var(--r-pill); background: #fff;
  box-shadow: inset 0 0 0 1px var(--line); font: 500 .8125rem/1 var(--f-display); color: var(--ink); text-decoration: none;
  transition: box-shadow var(--fast) var(--ease), color var(--fast) var(--ease); }
.bl7h .article-ai a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.bl7h .article-ai a > span[aria-hidden] { color: var(--orange-ink); font-size: .75rem; }
.bl7h .article-figure { margin: 0; }
.bl7h .article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1536 / 760; object-fit: cover; border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(2, 10, 24, .05), 0 24px 60px rgba(2, 10, 24, .12); }

/* ---------- A: Titelbild im Split, auf ruhiger Fläche wie .ks7a__panel der Studie (gha__panel: Radius 32, Weiss 62 %, Linie;
   28 px Polsterung, Bildradius 12) ---------- */
.bl7h--a .bl7h__bild { align-self: center; }
.bl7h__panel { display: grid; place-items: center; height: auto; margin: 0; padding: 28px; }
.bl7h__panel .article-figure { width: 100%; }
.bl7h__panel .article-figure img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(2, 10, 24, .06), 0 12px 28px rgba(2, 10, 24, .10); }

/* ---------- B: Lesekarte im Split (Titelbild, Autor, Daten, KI-Zeile als Karte rechts) ---------- */
.bl7h--b .bl7h__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.bl7h--b .article-title { font-size: clamp(40px, 3.8vw, 56px); }
.bl7h--b .article-lead { font-size: 1.125rem; }
.bl7h__karte { padding: 14px; border-radius: 32px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(2, 10, 24, .06); }  /* flach wie gha__panel */
.bl7h__karte .article-figure img { border-radius: 12px; box-shadow: none; }
.bl7h__lese { padding: 20px 14px 10px; }
.bl7h__lese .article-meta { margin-top: 0; }
.bl7h__lese .article-ai { padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- C: Lesekopf ohne Bühne (weiss, Linie zum Text) ---------- */
.bl7h--c { padding: 152px 0 0; }
.bl7h--c .bl7h__grid { padding-bottom: 56px; }
.bl7h--c .bl7h__grid::after { content: ""; position: absolute; right: var(--margin); bottom: 0; left: var(--margin); border-bottom: 1px solid var(--line); }
.bl7h--c .article-figure img { box-shadow: 0 0 0 1px rgba(2, 10, 24, .05); }
.bl7h--c + .bl7__layout { padding-top: 72px; }

/* ---------- Übersicht /blog, gemeinsam ---------- */
.blo .hub-hero .gha__stage { padding: 176px 0 40px; }  /* oben 176 wie .gha__stage (Regel 13); unter 1024 px blog-mobil.css */
.blo .hub-hero .gha__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.blo .hub-crumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font: 500 .8125rem/1.5 var(--f-display); color: var(--mut); }
.blo .hub-crumb li + li::before { content: "/"; margin: 0 10px; color: var(--ghost); }
.blo .hub-crumb a { color: var(--mut); text-decoration: none; }
.blo .hub-crumb a:hover { color: var(--orange-ink); }
.blo .hub-crumb [aria-current] { color: var(--ink); }
.blo .hub-hero .eyebrow { margin: 18px 0 16px; }
.blo .hub-hero h1 { font: 700 clamp(44px, 4.4vw, 64px)/1.03 var(--f-display); letter-spacing: -0.035em; color: var(--ink); }  /* wie /cases (.csx__h) */
.blo .hub-hero h1 .accent { color: var(--orange); }
.blo .hub-hero .lead { max-width: 48ch; margin-top: 22px; text-wrap: pretty; }
.blo .hub-filter { display: none; }
.js .blo .hub-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.blo .hub-filter-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: #fff;
  box-shadow: inset 0 0 0 1px var(--line); font: 500 .875rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.blo .hub-filter-btn::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.blo .hub-filter-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.blo .hub-filter-btn[aria-pressed="true"] { background: var(--ink); box-shadow: none; color: #fff; }
.blo .hub-hero .gha__trust { margin-top: 40px; }

/* Themen-Karte (A) und Themen-Leiste (B, C): Live-Liste .hx-themen, je Thema das neueste Titelbild und die Zahl der Artikel */
.blo__themen { padding: 26px 28px 18px; border-radius: 32px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(2, 10, 24, .06); }  /* flach wie gha__panel */
.blo__themen .hx-hub-label { font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.blo .hx-themen { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.blo .hx-tile { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 18px;
  padding: 14px 0; border-top: 1px solid var(--line); }
.blo .hx-tile:first-child { border-top: 0; }
.blo .blo__thumb { grid-row: 1 / 3; width: 96px; height: 48px; object-fit: cover; border-radius: 10px; }
.blo .hx-topic-name { align-self: end; font: 500 1.25rem/1.3 var(--f-display); color: var(--ink); text-decoration: none; transition: color var(--fast) var(--ease); }
.blo .hx-topic-name::after { content: ""; position: absolute; inset: 0; }
.blo .hx-tile:hover .hx-topic-name { color: var(--orange-ink); }
.blo .hx-topic-text { grid-column: 2; align-self: start; font-size: .875rem; line-height: 1.5; color: var(--mut); }
.blo .blo__n { grid-column: 3; grid-row: 1; align-self: end; font: 500 .8125rem/1.3 var(--f-display); color: var(--mut); white-space: nowrap; }
.blo .hx-go { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; display: grid; place-items: center; width: 32px; height: 32px; margin-top: 2px;
  border-radius: 50%; background: var(--orange); color: var(--black); font: 700 .9375rem/1 var(--f-display); transition: transform var(--base) var(--ease); }
.blo .hx-tile:hover .hx-go { transform: translateX(3px); }

/* ---------- B: Featured im Split, Themen als Leiste unter dem Hero ---------- */
.blo--b .hub-hero .gha__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }  /* Filter auf einer Zeile */
.blo__feature { padding: 12px; border-radius: 32px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(2, 10, 24, .06); }
.blo__feature .hub-card, .blo__feature .hub-card--feature { display: flex; flex-direction: column; gap: 0; padding: 0; background: transparent; }
.blo__feature .hub-card:hover { background: transparent; box-shadow: none; }
.blo__feature .hub-card--feature .hub-card-media img { height: auto; min-height: 0; aspect-ratio: 1536 / 760; }
.blo__feature .hub-card--feature .hub-card-body { padding: 20px 18px 14px; }
.blo__feature .hub-card--feature .hub-card-title { font: 700 1.75rem/1.15 var(--f-display); letter-spacing: -0.02em; }
.blo__feature .hub-card--feature .hub-card-text { font-size: .9375rem; }
.blo__feature .hub-card--feature .hub-card-byline { padding-top: 16px; }
.blo__leiste { padding: 56px 0 0; }
.blo__leiste .blo__themen { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.blo__leiste .hx-hub-label { display: block; margin-bottom: 4px; }
.blo__leiste .hx-themen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.blo__leiste .hx-tile { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; row-gap: 6px; padding: 12px 12px 18px; border: 0; border-radius: 24px; background: var(--card); }
.blo__leiste .blo__thumb { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 1536 / 760; border-radius: 16px; margin-bottom: 8px; }
.blo__leiste .hx-topic-name { grid-column: 1; grid-row: 2; padding-left: 6px; }
.blo__leiste .hx-topic-text { grid-column: 1; grid-row: 3; padding-left: 6px; }
.blo__leiste .blo__n { grid-column: 2; grid-row: 2; padding-right: 6px; }
.blo__leiste .hx-go { grid-column: 2; grid-row: 3; margin-right: 6px; }

/* ---------- C: Neueste Titelbilder (2 x 2), Themen als Leiste ---------- */
.blo__neu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; border-radius: 32px; background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 0 0 1px rgba(2, 10, 24, .06); }
.blo__neu a { position: relative; display: grid; gap: 10px; padding: 0 0 12px; color: var(--ink); text-decoration: none; }
.blo__neu img { width: 100%; height: auto; aspect-ratio: 1536 / 760; object-fit: cover; border-radius: 20px; }
.blo__neu b { padding: 0 8px; font: 500 .9375rem/1.35 var(--f-display); transition: color var(--fast) var(--ease); }
.blo__neu a:hover b { color: var(--orange-ink); }

/* /blog-mobil.css */
/* TZ2 Blog mobil (ab 09.11.2026, Sitzung "Blog im TZ2-Design"): nur Regeln unter 1280 px, ab 1280 px bleibt der Desktop
   unverändert (DESIGNSYSTEM §4 Regel 9, Stufen 1279, 1023, 767, 389). Geprüft bei 375, 390, 768 und 1024 px. Gemeinsame Teile
   (Navigation, Handy-Menü, Footer, end6, Vertrauensleiste) kommen aus mobil.css und mobil-seiten.css der Mobil-Sitzung, die nach
   dieser Datei geladen werden (Reihenfolge, die livefassung.py verlangt); Regeln hier darum mit .bl7-seite davor. Tippflächen
   mindestens 44 px bis 1279 px (Regel 9 prüft auch "768 hoch" und "1024 quer", Prüf-Flotte Runden 1 und 2). Artikel-Typografie und
   mobiles Inhaltsverzeichnis wie /studie (studie.css). Harmonie-Prüfung 10.11.2026 (DESIGNSYSTEM Regel 13, MOBIL.md Regeln 4, 7, 8):
   Bühne oben 112 (Handy) und 96 px (Tablet), H1 40 und 52 px über den Abschnittstiteln 36 und 44 px, Abschnitte 72 und 120 px,
   Brotkrumen und Quellen mit 44-px-Flächen. */

@media (max-width: 1279px) {
  .bl7-seite .bl7h__grid { gap: 40px; }
  .bl7-seite .bl7__layout { grid-template-columns: minmax(0, 1fr) 248px; column-gap: 48px; }
  .bl7-seite .blo .hub-hero .gha__grid { gap: 40px; }
  /* Tippflächen 44 px: Brotkrumen, KI-Zeile, Autor, Text-Links (Trefferfläche per ::after, ohne die Zeilen zu verschieben),
     Autorname, Quellen und Links in Tabellenzellen, Weiterlesen */
  .bl7-seite .bl7h .crumbs li { min-height: 44px; }
  .bl7-seite .bl7h .crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 4px; margin-inline: -4px; }
  .bl7-seite .bl7h .article-ai a { min-height: 44px; padding: 0 14px; }
  .bl7-seite .bl7h .article-author { min-height: 44px; }
  .bl7-seite .bl7 .article-authorbox-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .bl7-seite .bl7 .article-authorbox-name { position: relative; }
  .bl7-seite .bl7 .article-authorbox-name::after { content: ""; position: absolute; inset: -11px -4px; }
  .bl7-seite .tlink::after { content: ""; position: absolute; inset: -13px -6px; }
  .bl7-seite .bl7 .article-links .tlink::after { content: none; }  /* die Leisten sind selbst hoch genug, sonst überlappen die Flächen */
  .bl7-seite .bl7 .article-sources ul { gap: 2px; }
  .bl7-seite .bl7 .article-sources li a { display: block; min-height: 44px; padding-block: 10px; }  /* eigene Fläche je Quelle, keine Überlappung */
  .bl7-seite .bl7 .article-table :is(th, td) a:not([class]) { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .bl7-seite .bl7 .article-side-more a { min-height: 44px; }
  .bl7-seite .blo .hub-crumb li { display: inline-flex; align-items: center; }
  .bl7-seite .blo .hub-crumb a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 4px; margin-inline: -4px; }
  /* Featured-Karte auf /blog gestapelt (zwischen 1024 und 1279 px wäre das Bild nebeneinander zu stark beschnitten) */
  .bl7-seite .blo .hub-card--feature { grid-template-columns: minmax(0, 1fr); }
  .bl7-seite .blo .hub-card--feature .hub-card-media img { min-height: 0; height: auto; aspect-ratio: 1536 / 760; }
  .bl7-seite .blo .hub-card--feature .hub-card-body { grid-column: 1; grid-row: 2; padding: 20px 14px 12px; }
  .bl7-seite .blo .hub-card--feature .hub-card-title { font-size: 1.5rem; }
  /* Faktenliste: Zahlenspalte schmaler */
  .bl7-seite .bl7__fakten .article-stats-grid > div, .bl7-seite .bl7__fakten .article-stats-grid > div:first-child { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Inhaltsverzeichnis in der Seitenspalte: jede Zeile eine Tippfläche von 44 px (1024 quer ist ein Tablet, wie /studie) */
  .bl7-seite .bl7 .article-toc ol { gap: 0; margin-top: 8px; }
  .bl7-seite .bl7 .article-toc li { align-items: baseline; }
  .bl7-seite .bl7 .article-toc a { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 1023px) {
  /* Artikelkopf einspaltig, Titelbild unter dem Text */
  .bl7-seite .bl7h__stage { padding: 96px 0 48px; }
  .bl7-seite .bl7h__grid, .bl7-seite .bl7h--b .bl7h__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bl7-seite .bl7h .article-title { font-size: 3.25rem; line-height: 1.05; }  /* 52 px wie .gha__h am Tablet (mobil.css) */
  .bl7-seite .bl7h--c { padding-top: 120px; }
  .bl7-seite .bl7h--c .bl7h__grid { padding-bottom: 40px; }
  /* Artikel einspaltig: Faktenliste, Inhaltsverzeichnis als Aufklapper (live .article-toc-m), Text, Weiterlesen */
  .bl7-seite .bl7__layout { grid-template-columns: minmax(0, 1fr); row-gap: 48px; padding-top: 96px; padding-bottom: 120px; }  /* Lesespalte wie /studie */
  .bl7-seite .bl7__layout--fakten > .bl7__fakten, .bl7-seite .bl7__layout--fakten > .article-body,
  .bl7-seite .bl7__layout--fakten > .article-side { grid-column: auto; grid-row: auto; }
  .bl7-seite .bl7__layout--fakten > .bl7__fakten { max-width: none; margin-bottom: -8px; }
  .bl7-seite .bl7 .article-body { max-width: none; }
  .bl7-seite .bl7 .article-side { position: static; max-height: none; }
  .bl7-seite .bl7 .article-side .article-toc { display: none; }
  .bl7-seite .bl7 .article-side-more { padding: 28px 0 0; border-top: 1px solid var(--line); }
  /* Inhaltsverzeichnis als Aufklapper wie /studie: Kopf als Eyebrow mit Winkel, nummerierte Zeilen von 48 px */
  .bl7-seite .bl7 .article-toc-m { display: block; margin: 0 0 40px; border-radius: 24px; background: var(--card); }
  .bl7-seite .bl7 .article-toc-m summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 22px;
    font: 500 .75rem/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); cursor: pointer; list-style: none;
    -webkit-tap-highlight-color: transparent; }
  .bl7-seite .bl7 .article-toc-m summary::-webkit-details-marker { display: none; }
  .bl7-seite .bl7 .article-toc-m summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink); transform: translateY(-2px) rotate(45deg); transition: transform var(--fast) var(--ease); }
  .bl7-seite .bl7 .article-toc-m[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .bl7-seite .bl7 .article-toc-m ol { display: grid; margin: 0; padding: 0 22px 10px; list-style: none; counter-reset: t; }
  .bl7-seite .bl7 .article-toc-m li { counter-increment: t; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; border-top: 1px solid var(--line); }
  .bl7-seite .bl7 .article-toc-m li::before { content: counter(t, decimal-leading-zero); font: 500 .75rem/1 var(--f-display); color: var(--orange-ink); }
  .bl7-seite .bl7 .article-toc-m a { display: flex; align-items: center; min-height: 48px; padding: 8px 0; font: 500 .9375rem/1.35 var(--f-display);
    color: var(--ink); text-decoration: none; }
  .bl7-seite .bl7 .article-toc-m + * { margin-top: 0; }
  .bl7-seite .bl7 .konv-inline + .article-toc-m { margin-top: 16px; }  /* fünf Artikel beginnen mit dem Hinweis: Kartenabstand 16 px */
  html:not(.js) .bl7-seite .bl7 .article-table-hint { display: block; }  /* ohne Skript wie live: Hinweis unter 1024 px */
  html:not(.js) .bl7-seite .bl7 .article-table-hint + .article-table { margin-top: 8px; }
  /* breite Tabellen: Schrift bleibt 15 px, innen 12 statt 20 px seitlich, damit sie am Tablet nicht um wenige Pixel scrollen (ohne
     Hinweis, der erst ab 12 px Überstand erscheint); aussen 20 px wie lt6 */
  .bl7-seite .bl7 .article-table--wide :is(th, td) { padding-inline: 12px; }
  .bl7-seite .bl7 .article-table--wide :is(th, td):first-child { padding-left: 20px; }
  .bl7-seite .bl7 .article-table--wide :is(th, td):last-child { padding-right: 20px; }
  /* Karten zweispaltig */
  .bl7-seite .article-more { padding: 120px 0; }
  .bl7-seite .article-more .h2 { font-size: 2.75rem; }  /* 44 px, unter der H1 von 52 px */
  .bl7-seite .article-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .bl7-seite .blo .hub-hero .gha__grid { grid-template-columns: minmax(0, 1fr); }
  .bl7-seite .blo .hub-hero .gha__stage { padding-top: 96px; }
  .bl7-seite .blo .hub-hero h1 { font-size: 3.25rem; line-height: 1.05; }
  .bl7-seite .blo .hub-section { padding: 120px 0; }
  .bl7-seite .blo .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl7-seite .blo__leiste .hx-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .bl7-seite .bl7h__stage { padding: 112px 0 40px; }
  .bl7-seite .bl7h .article-title { font-size: 40px; line-height: 1.05; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  .bl7-seite .bl7__layout { padding-top: 48px; padding-bottom: 72px; }  /* wie /studie am Handy */
  .bl7-seite .bl7h .article-lead, .bl7-seite .bl7h--b .article-lead { font-size: 1.0625rem; }  /* 17 px wie /studie */
  .bl7-seite .bl7h .article-figure img { border-radius: 20px; }
  .bl7-seite .bl7h__karte { padding: 10px; border-radius: 26px; }
  .bl7-seite .bl7h__lese { padding: 16px 8px 6px; }
  .bl7-seite .bl7h .eyebrow { margin-top: 6px; }
  .bl7-seite .bl7h--c { padding-top: 104px; }
  /* Faktenliste: Zahl über dem Satz, 32 px wie /studie */
  .bl7-seite .bl7__fakten .article-stats-grid > div, .bl7-seite .bl7__fakten .article-stats-grid > div:first-child { grid-template-columns: minmax(0, 1fr); padding: 16px 0; }
  .bl7-seite .bl7__fakten .article-stats strong { font-size: 2rem; }
  .bl7-seite .bl7 .article-toc-m { margin-bottom: 32px; }
  /* Zwischentitel 24 px wie /studie am Handy; Lesetext bleibt 17 px/1.75 wie /studie */
  .bl7-seite .bl7 .article-body > h2, .bl7-seite .bl7 .article-h2 { margin-top: 48px; font-size: 1.5rem; line-height: 1.22; }
  .bl7-seite .bl7 .article-box > .article-h2 { margin-top: 0; }
  .bl7-seite .bl7 .article-sources .article-h2 { margin-top: 12px; }
  .bl7-seite .bl7 .article-body > h3 { font-size: 1.25rem; }
  .bl7-seite .bl7 .article-box, .bl7-seite .bl7 .article-cta { padding: 24px 20px; border-radius: 24px; }
  .bl7-seite .bl7 .article-cta-title { font-size: 1.25rem; }
  .bl7-seite .bl7 .article-cta .btn { width: 100%; }
  .bl7-seite .bl7 .article-quote { padding-left: 20px; }
  .bl7-seite .bl7 .article-quote p { font-size: 1.1875rem; }
  .bl7-seite .bl7 .article-table { border-radius: 24px; }
  .bl7-seite .bl7 .article-faq { padding: 12px; border-radius: 24px; }  /* Fläche schmaler, damit die Fragen-Karten Platz haben */
  .bl7-seite .bl7 .article-faq-item, .bl7-seite .bl7 .article-tool, .bl7-seite .bl7 .article-agency { padding: 20px; border-radius: 20px; }
  .bl7-seite .bl7 .article-faq-item h3 { font-size: 1.125rem; }
  .bl7-seite .bl7 .article-links .tlink { padding: 18px 72px 18px 20px; border-radius: 24px; font-size: 1rem; }
  .bl7-seite .bl7 .article-stats-grid { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .bl7-seite .bl7 .article-stats-grid > div, .bl7-seite .bl7 .article-stats-grid > div:first-child { padding: 16px 0; }
  .bl7-seite .bl7 .article-stats-grid > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .bl7-seite .bl7 .article-authorbox { grid-template-columns: 56px minmax(0, 1fr); padding: 22px 20px 24px; }
  .bl7-seite .bl7 .article-authorbox > img { width: 56px; height: 56px; }
  .bl7-seite .bl7 .article-cite dd { flex-direction: column; gap: 10px; }
  .bl7-seite .bl7 .article-sources li a, .bl7-seite .bl7 .article-toc-m a { overflow-wrap: anywhere; }
  .bl7-seite .article-more { padding: 72px 0; }
  .bl7-seite .article-more .h2 { font-size: 2.25rem; }  /* 36 px, unter der H1 von 40 px */
  .bl7-seite .article-cards { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .bl7-seite .article-card--all { min-height: 160px; }
  .bl7-seite .bl7__end .konv-text { font-size: 1rem; }
  .bl7-seite .bl7__end .konv-actions .btn { width: 100%; }
  .bl7-seite .blo .hub-hero .gha__stage { padding-top: 112px; }
  .bl7-seite .blo .hub-hero h1 { font-size: 40px; line-height: 1.05; }
  .bl7-seite .blo .hub-section { padding: 72px 0; }
  .bl7-seite .blo .hub-cards { grid-template-columns: minmax(0, 1fr); }
  .bl7-seite .blo .hub-card--feature .hub-card-title { font-size: 1.375rem; }
  .bl7-seite .blo__themen { padding: 18px 18px 8px; border-radius: 26px; }
  .bl7-seite .blo .hx-tile { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 14px; }
  .bl7-seite .blo .blo__thumb { width: 72px; height: 36px; }
  .bl7-seite .blo__leiste .hx-themen { grid-template-columns: minmax(0, 1fr); }
  .bl7-seite .blo__leiste .hx-tile { grid-template-columns: minmax(0, 1fr) auto; }
  .bl7-seite .blo__leiste .blo__thumb { width: 100%; height: auto; }
  .bl7-seite .blo__neu { gap: 8px; padding: 8px; border-radius: 26px; }
  .bl7-seite .blo .final .final-actions .btn { width: 100%; }
}

@media (max-width: 389px) {
  .bl7-seite .bl7 .article-box, .bl7-seite .bl7 .article-cta { padding: 22px 18px; }
  .bl7-seite .bl7__fakten .article-stats strong { font-size: 1.875rem; }
}

@media (max-width: 359px) {
  /* MOBIL.md Regel 7: eine Titelstufe kleiner (36 px wie .gha__h); Personen-Pille zweizeilig wie le6__card */
  .bl7-seite .bl7h .article-title, .bl7-seite .blo .hub-hero h1 { font-size: 36px; }
  .bl7-seite .blo .hub-owner { flex-wrap: wrap; row-gap: 4px; border-radius: 28px; }
  .bl7-seite .blo .hub-owner span { grid-template-columns: auto; }
  .bl7-seite .blo .hub-owner em { grid-column: 1; grid-row: auto; margin-top: 4px; }
}

/* /blog-figuren.css */
/* TZ2 Blog: Figuren in den Artikeln (blog_figuren.py, ab 10.11.2026, DESIGNSYSTEM Regel 14). Aus dem Prototyp am Benchmark, den Jeremy
   freigegeben hat ("Ja, so auf alle ausrollen"). Geladen nach blog-mobil.css. Alle Figuren stehen im Artikel als <figure> (zählt nicht
   zur Lesezeit), der Artikeltext bleibt wortgleich. Flächen im Wechsel: Grafiken grau, Rechnungen weiss mit Linie, Screens auf der
   Bühne, Belege wie /google-ads-agentur. Marken nach dataviz: Balken bis 16 px mit 4 px runder Kante, Linien 2 px, Punkte 10 px mit
   2 px Ring in der Flächenfarbe, Werte in Textfarbe, Raster und Achsen leise. */

/* ---------- Flächen ---------- */
.bl7-seite .bp7__fig { margin: 40px 0; padding: 32px; border-radius: 28px; background: var(--card); --flaeche: var(--card); }
.bl7-seite .bp7__fig--weiss { background: #fff; box-shadow: inset 0 0 0 1px var(--line); --flaeche: #fff; }
.bl7-seite .bp7__fig--buehne { position: relative; overflow: hidden; background: #fff; --flaeche: #fff;
  background-image:
    radial-gradient(42% 55% at 18% 82%, rgba(255, 157, 110, .55) 0%, rgba(255, 157, 110, 0) 70%),
    radial-gradient(40% 50% at 86% 70%, rgba(252, 76, 1, .42) 0%, rgba(252, 76, 1, 0) 70%),
    radial-gradient(30% 40% at 60% 0%, rgba(171, 146, 225, .30) 0%, rgba(171, 146, 225, 0) 70%); }
.bl7-seite .bp7__fk { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 22px; }
.bl7-seite .bp7__fk b { font: 500 1.1875rem/1.35 var(--f-display); color: var(--ink); }
.bl7-seite .bp7__fk > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .875rem; line-height: 1.4; color: var(--mut); }
.bl7-seite .bp7__fuss { margin-top: 18px; font-size: .8125rem; line-height: 1.5; color: var(--mut); }
.bl7-seite .bp7__fig--buehne .bp7__fuss { position: relative; color: #3c3d3f; }
.bl7-seite .bp7__k { display: inline-block; flex: none; }
.bl7-seite .bp7__lg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bl7-seite .bp7__lg + .bp7__lg { margin-left: 8px; }
.bl7-seite .bp7__k--pkt, .bl7-seite .bp7__k--klick { width: 10px; height: 10px; border-radius: 50%; background: #97999B; }
.bl7-seite .bp7__k--umzug, .bl7-seite .bp7__k--anfrage { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.bl7-seite .bp7__k--klick { background: #D9D9D6; }
.bl7-seite .bp7__k--bar { width: 16px; height: 10px; border-radius: 0 3px 3px 0; background: var(--orange); }
.bl7-seite .bp7__k--spanne { position: relative; width: 22px; height: 2px; margin: 0 4px; background: #97999B; }
.bl7-seite .bp7__k--spanne::before, .bl7-seite .bp7__k--spanne::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #97999B; }
.bl7-seite .bp7__k--spanne::before { left: -4px; }
.bl7-seite .bp7__k--spanne::after { right: -4px; }

/* ---------- 1 Datenblatt: Punkte aller Klickpreise, darunter die drei Kennzahlen als Karten ---------- */
.bl7-seite .bl7__fakten.bp7__daten { padding: 32px; border-radius: 28px; background: var(--card); --flaeche: var(--card); }
.bl7-seite .bp7__streu { margin: 0; }
.bl7-seite .bp7__feld { position: relative; height: calc(var(--lanes) * 13px + 40px); margin: 0 6px; border-bottom: 1px solid #D9D9D6; }
.bl7-seite .bp7__pkt { position: absolute; bottom: calc(6px + var(--l) * 13px); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: #97999B; box-shadow: 0 0 0 2px var(--flaeche); }
.bl7-seite .bp7__pkt.is-umzug { background: var(--orange); }
.bl7-seite .bp7__med { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.bl7-seite .bp7__med b { position: absolute; top: -2px; left: 8px; white-space: nowrap; font: 500 .8125rem/1.2 var(--f-display); color: var(--ink); }
.bl7-seite .bp7__max { position: absolute; bottom: 22px; transform: translateX(calc(-100% + 6px)); white-space: nowrap; font-size: .75rem; line-height: 1.2; color: var(--mut); }
.bl7-seite .bp7__achse { position: relative; height: 38px; margin: 6px 6px 0; font-size: .75rem; line-height: 1.2; color: var(--mut); font-variant-numeric: tabular-nums; }
.bl7-seite .bp7__achse span { position: absolute; top: 0; transform: translateX(-50%); }
.bl7-seite .bp7__achse em { position: absolute; top: 20px; right: 0; font-style: normal; }
.bl7-seite .bp7__daten .article-stats { margin-top: 8px; }
.bl7-seite .bp7__daten .article-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 0; }
.bl7-seite .bp7__daten .article-stats-grid > div, .bl7-seite .bp7__daten .article-stats-grid > div:first-child, .bl7-seite .bp7__daten .article-stats-grid > div + div {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; border: 0; border-radius: 20px; background: #fff; }
.bl7-seite .bp7__daten .article-stats strong { font: 700 2.25rem/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }
.bl7-seite .bp7__daten:has(.bp7__streu) .article-stats-grid > div:nth-child(2) strong { color: var(--orange); }  /* nur Benchmark: Orange = Umzug */
.bl7-seite .bp7__daten .article-stats span { max-width: none; font-size: .875rem; line-height: 1.45; color: var(--mut); }
.bl7-seite .bp7__daten .article-stats > p { margin-top: 16px; }

/* ---------- 2 und 6 und 7: Rechnung als Gleichung (wie lg7__eq der Lehrbuch-Grafik) ---------- */
.bl7-seite .bp7__gl { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; }
.bl7-seite .bp7__gl span { display: grid; align-content: center; gap: 4px; padding: 12px 16px; border-radius: 14px; background: #fff; }
.bl7-seite .bp7__fig--weiss .bp7__gl span { background: var(--card); }
.bl7-seite .bp7__gl span.is-res { background: var(--orange); }
.bl7-seite .bp7__gl b { font: 500 1.25rem/1.2 var(--f-display); color: var(--ink); }
.bl7-seite .bp7__gl .is-res b { font-weight: 700; color: var(--black); }
.bl7-seite .bp7__gl small { font-size: .8125rem; line-height: 1.3; color: var(--mut); }
.bl7-seite .bp7__gl .is-res small { color: rgba(2, 10, 24, .72); }
.bl7-seite .bp7__gl > i { align-self: center; font: 700 1.25rem/1 var(--f-display); font-style: normal; color: var(--mut); }

/* Rechnung im Methodenteil: jeder zehnte und jeder zwanzigste Klick */
.bl7-seite .bp7__reihe { display: grid; grid-template-columns: 214px minmax(0, 1fr); align-items: center; gap: 12px 28px; margin-top: 26px; padding-top: 24px;
  border-top: 1px solid var(--line); }
.bl7-seite .bp7__dots { display: grid; grid-template-columns: repeat(10, 16px); gap: 6px; }
.bl7-seite .bp7__klick { width: 16px; height: 16px; border-radius: 50%; background: #D9D9D6; }
.bl7-seite .bp7__klick.is-anfrage { background: var(--orange); box-shadow: 0 0 0 3px rgba(252, 76, 1, .18); }
.bl7-seite .bp7__reihe p { margin: 0; }
.bl7-seite .bp7__reihe p b { display: block; font: 500 1rem/1.35 var(--f-display); color: var(--ink); }
.bl7-seite .bp7__reihe p span { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.45; color: var(--mut); }
.bl7-seite .bp7__quote .bp7__fuss { display: flex; align-items: center; gap: 8px; }

/* ---------- 3 Übersicht: Median-Balken, Spanne als Linie, Median aller Begriffe als Bezug ---------- */
.bl7-seite .bp7__rang { --lab: 176px; }
/* --res (aus dem Generator, je Diagramm): Platz rechts für die Beschriftung am Balkenende; der Plot wird um so viel schmaler,
   wie die Beschriftung des längsten Balkens sonst über die Fläche hinausragt (10.11.2026, Überlauf bei 360 und 390 px) */
.bl7-seite .bp7__rangfeld { position: relative; padding-right: var(--res, 0px); }
.bl7-seite .bp7__rows { position: relative; z-index: 1; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bl7-seite .bp7__rows li { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; min-height: 40px; }
.bl7-seite .bp7__name { padding-right: 12px; font: 500 .9375rem/1.3 var(--f-display); color: var(--ink); }
.bl7-seite .bp7__plot { position: relative; height: 34px; }
.bl7-seite .bp7__bar { position: absolute; top: 4px; left: 0; width: var(--m); height: 16px; border-radius: 0 4px 4px 0; background: var(--orange); }
.bl7-seite .bp7__wert { position: absolute; top: 3px; left: calc(var(--m) + 8px); padding: 0 4px; border-radius: 4px; background: var(--flaeche);
  font: 500 .875rem/18px var(--f-display); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bl7-seite .bp7__span { position: absolute; top: 27px; left: var(--lo); width: calc(var(--hi) - var(--lo)); height: 2px; background: #97999B; }
.bl7-seite .bp7__span::before, .bl7-seite .bp7__span::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: #97999B; box-shadow: 0 0 0 2px var(--flaeche); }
.bl7-seite .bp7__span::before { left: -4px; }
.bl7-seite .bp7__span::after { right: -4px; }
.bl7-seite .bp7__bezug { position: absolute; z-index: 0; top: -26px; bottom: 44px; left: calc(var(--lab) + (100% - var(--lab) - var(--res, 0px)) * var(--medf)); width: 0;
  border-left: 1.5px solid rgba(2, 10, 24, .4); }
.bl7-seite .bp7__bezug b { position: absolute; top: 0; left: 8px; white-space: nowrap; font: 500 .75rem/1.2 var(--f-display); color: var(--ink); }
.bl7-seite .bp7__achse--rang { margin-left: var(--lab); border-top: 1px solid #D9D9D6; padding-top: 6px; height: 44px; }
.bl7-seite .bp7__achse--rang span { top: 6px; }
.bl7-seite .bp7__achse--rang em { top: 26px; }

/* ---------- 4 Screen: Keyword-Planer auf der Bühne ---------- */
.bl7-seite .bp7__fenster { position: relative; overflow: hidden; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(2, 10, 24, .08), 0 24px 60px rgba(2, 10, 24, .14); }
.bl7-seite .bp7__fenster img { display: block; width: 100%; height: auto; }

/* ---------- 5 Belege: Karten aus leistungen-hero.css und google-ads.css (wie /google-ads-agentur), Kundenfotos darunter ---------- */
.bl7-seite .bp7__fig--frei { padding: 0; border-radius: 0; background: none; --flaeche: #fff; }
.bl7-seite .bp7__tiles { gap: 12px; }
/* in der Artikelspalte (drei Karten auf 832 px statt 1184) eine Stufe kleiner, damit Name und Wert auf einer Zeile stehen */
.bl7-seite .bp7__tiles .lhb__meta { padding: 18px 62px 20px 22px; }
.bl7-seite .bp7__tiles .lhb__meta b { font-size: 1.125rem; }
.bl7-seite .bp7__tiles .lhb__p { font-size: 1.5rem; }
.bl7-seite .bp7__tiles .lhb__go { right: 18px; bottom: 18px; }
.bl7-seite .bp7__leute { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.bl7-seite .bp7__leute > span { flex: 1 1 100%; }
.bl7-seite .bp7__person { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--ink); text-decoration: none; text-align: left; }
.bl7-seite .bp7__person img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.bl7-seite .bp7__person b { display: block; font: 700 .875rem/1.3 var(--f-display); color: var(--ink); }
.bl7-seite .bp7__person small { display: block; font-size: .75rem; line-height: 1.35; color: var(--mut); }
.bl7-seite .bp7__person:hover b { color: var(--orange-ink); }

/* ---------- 6 Local Services Ads: verbundene Anrufe als Balken (Spur in derselben Farbe, heller) ---------- */
.bl7-seite .bp7__meter { margin-top: 26px; }
.bl7-seite .bp7__meter p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 10px; }
.bl7-seite .bp7__meter b { font: 500 1rem/1.35 var(--f-display); color: var(--ink); }
.bl7-seite .bp7__meter p span { font-size: .875rem; color: var(--mut); font-variant-numeric: tabular-nums; }
.bl7-seite .bp7__track { display: block; height: 12px; overflow: hidden; border-radius: 99px; background: rgba(252, 76, 1, .16); }
.bl7-seite .bp7__track span { display: block; height: 100%; border-radius: 99px; background: var(--orange); }

/* ---------- 7 Budget: Gleichung, darunter drei Balken ---------- */
.bl7-seite .bp7__rows--budget { --lab: 200px; margin-top: 24px; padding-top: 20px; padding-right: var(--res, 0px); border-top: 1px solid var(--line); }
.bl7-seite .bp7__rows--budget .bp7__bar { width: var(--w); }
.bl7-seite .bp7__rows--budget .bp7__wert { left: calc(var(--w) + 8px); }
.bl7-seite .bp7__rows--budget .bp7__plot { height: 26px; }

/* ---------- Ergänzungen für alle Artikel (10.11.2026) ---------- */
/* Markierung je Balken (z.B. hohes Gebot oben) als Punkt in Tinte */
.bl7-seite .bp7__k--mk { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.bl7-seite .bp7__mk { position: absolute; top: 23px; left: var(--mk); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 2px var(--flaeche); }
/* nur Spannen (z.B. Stundensatz von bis) */
.bl7-seite .bp7__rang--spanne .bp7__span { top: 16px; }
.bl7-seite .bp7__rang--spanne .bp7__mk { top: 12px; }  /* Median-Punkt auf der Spanne, nicht darunter (Agenturkosten 10.11.2026) */
.bl7-seite .bp7__name small { display: block; margin-top: 2px; font: 400 .8125rem/1.3 var(--f-body); color: var(--mut); }
/* Anteile 0 bis 100 Prozent als Meter-Liste: Name, Balken mit heller Spur, Wert */
.bl7-seite .bp7__mlist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bl7-seite .bp7__mlist li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 6px 20px; }
.bl7-seite .bp7__mtr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.bl7-seite .bp7__mtr b { min-width: 96px; font: 500 .875rem/1.3 var(--f-display); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bl7-seite .bp7__anteile .bp7__name { padding-right: 0; line-height: 1.35; }
.bl7-seite .bp7__mlist .bp7__track { height: 14px; background: rgba(252, 76, 1, .14); border-radius: 0 4px 4px 0; }
.bl7-seite .bp7__mlist .bp7__track span { border-radius: 0 4px 4px 0; }
/* Gleichungen über mehrere Zeilen */
.bl7-seite .bp7__gleichung .bp7__gl + .bp7__gl { margin-top: 10px; }
/* Echte Handy-Screens im iPhone, eins bis drei nebeneinander */
.bl7-seite .bp7__phonereihe { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; }
.bl7-seite .bp7__phones--1 .bp7__phonereihe { --n: 1; max-width: 300px; margin-inline: auto; }
.bl7-seite .bp7__phones--2 .bp7__phonereihe { --n: 2; max-width: 560px; margin-inline: auto; }
.bl7-seite .bp7__case { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 12px 20px; border-radius: 24px;
  background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(2, 10, 24, .06); color: var(--ink); text-decoration: none;
  transition: background var(--base) var(--ease), box-shadow var(--base) var(--ease); }
a.bp7__case:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(2, 10, 24, .06), var(--shadow-card); }
.bl7-seite .bp7__iph { box-shadow: 0 0 0 calc(11px * var(--s)) #121215, 0 0 0 calc(12.5px * var(--s)) #44444a, 0 18px 40px rgba(2, 10, 24, .2); }
.bl7-seite .bp7__casetext { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.bl7-seite .bp7__casetext > b { font: 500 1.0625rem/1.3 var(--f-display); color: var(--ink); }
.bl7-seite .bp7__casetext > small { font-size: .8125rem; line-height: 1.4; color: var(--mut); }
.bl7-seite .bp7__casetext .bp7__mehr { margin-top: auto; padding-top: 8px; font: 700 .75rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--orange-ink); }
/* Fenster nie grösser als der Screen selbst (2x-Bild, CSS-Breite im style), mittig */
.bl7-seite .bp7__fenster { margin-inline: auto; }
.bl7-seite .bp7__screen .bp7__fuss { text-align: center; }
/* Lehrbuch-Kette in der Artikelspalte: Knoten kleiner als auf den Leistungsseiten */
.bl7-seite .bp7__kette .lg7__row { --node: 60px; }
.bl7-seite .bp7__kette .lg7__t { font-size: 1rem; }
.bl7-seite .bp7__kette .lg7__step--res .lg7__t { font-size: 1.125rem; }
.bl7-seite .bp7__kette .lg7__d { font-size: .875rem; line-height: 1.45; }

/* Ab 1280 px ist die Artikelspalte 832 px breit, der Text 720: Grafiken, Screens und Belege nutzen die ganze Spalte (mehr Präsenz
   als der Lesetext, ohne die Seitenspalte zu berühren); darunter bleiben sie in der Textbreite. */
@media (min-width: 1280px) {
  .bl7-seite .bp7__fig, .bl7-seite .bl7__layout--fakten > .bl7__fakten.bp7__daten { width: 832px; max-width: none; }
}

@media (max-width: 1023px) {
  .bl7-seite .bp7__fig, .bl7-seite .bl7__fakten.bp7__daten { padding: 28px; }
  .bl7-seite .bp7__fig--frei { padding: 0; }
}

@media (max-width: 767px) {
  .bl7-seite .bp7__fig, .bl7-seite .bl7__fakten.bp7__daten { margin: 32px 0; padding: 20px; border-radius: 24px; }
  .bl7-seite .bp7__fig--frei { padding: 0; border-radius: 0; }
  .bl7-seite .bl7__fakten.bp7__daten { margin: 0 0 32px; }
  .bl7-seite .bp7__daten .article-stats-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bl7-seite .bp7__daten .article-stats-grid > div, .bl7-seite .bp7__daten .article-stats-grid > div:first-child, .bl7-seite .bp7__daten .article-stats-grid > div + div {
    padding: 16px 18px; }
  .bl7-seite .bp7__daten .article-stats strong { font-size: 2rem; }
  .bl7-seite .bp7__max { display: none; }  /* der Wert steht in den Kennzahlen und in der Tabelle; am Handy fehlt der Platz */
  .bl7-seite .bp7__gl b { font-size: 1.0625rem; }
  .bl7-seite .bp7__gl span { padding: 10px 12px; }
  .bl7-seite .bp7__reihe { grid-template-columns: minmax(0, 1fr); }
  .bl7-seite .bp7__rang, .bl7-seite .bp7__rows--budget { --lab: 0px; }  /* Namen über dem Balken; --res rechnet mit der ganzen Breite */
  .bl7-seite .bp7__rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-top: 6px; }
  .bl7-seite .bp7__name { position: relative; z-index: 1; background: var(--flaeche); }  /* Bezugslinie läuft nicht durch die Namen */
  .bl7-seite .bp7__achse--rang { height: 50px; }
  .bl7-seite .bp7__pkt { width: 8px; height: 8px; margin-left: -4px; }
  .bl7-seite .bp7__bezug { top: -22px; }
}

@media (max-width: 767px) {
  .bl7-seite .bp7__mlist li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bl7-seite .bp7__mtr b { min-width: 0; }
  /* mehrere Handys seitlich wischbar, eines mittig */
  .bl7-seite .bp7__phones--2 .bp7__phonereihe, .bl7-seite .bp7__phones--3 .bp7__phonereihe { display: flex; gap: 12px; max-width: none; margin: 0 -20px;
    padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bl7-seite .bp7__phonereihe::-webkit-scrollbar { display: none; }
  .bl7-seite .bp7__phones--2 .bp7__case, .bl7-seite .bp7__phones--3 .bp7__case { flex: none; width: 236px; scroll-snap-align: start; }
}

/* ---------- /blog: Belege aus den Datenartikeln (graues Band vor dem Raster, Karten weiss wie das Raster) ---------- */
.bl7-seite .blo__daten { padding: 120px 0 0; background: var(--sec); }
/* Reihen per Subgrid bündig: Grafik und Text jeder Karte auf gleicher Höhe */
.bl7-seite .blo__datengrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 16px; margin-top: 20px; }
.bl7-seite .blo__dk { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 6px; padding: 12px; border-radius: 28px; background: #fff; color: var(--ink);
  text-decoration: none; transition: box-shadow var(--base) var(--ease); }
.bl7-seite .blo__dk:hover { box-shadow: var(--shadow-card); }
.bl7-seite .blo__dmini { display: block; padding: 18px 18px 14px; border-radius: 20px; background: var(--card); }
.bl7-seite .blo__dmini ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bl7-seite .blo__dmini li { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 10px; }
.bl7-seite .blo__dmini li span { overflow: hidden; font: 500 .75rem/1.2 var(--f-display); color: var(--mut); white-space: nowrap; text-overflow: ellipsis; }
.bl7-seite .blo__dbar { display: block; width: var(--w); height: 8px; border-radius: 0 3px 3px 0; background: #BDBEBF; }
.bl7-seite .blo__dbar.is-hl { background: var(--orange); }
.bl7-seite .blo__dmeta { position: relative; display: grid; gap: 4px; padding: 18px 62px 12px 12px; }
.bl7-seite .blo__dt { font: 500 1.0625rem/1.3 var(--f-display); color: var(--ink); text-wrap: pretty; }
.bl7-seite .blo__dk:hover .blo__dt { color: var(--orange-ink); }
.bl7-seite .blo__dz { margin-top: 8px; font: 700 1.75rem/1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.bl7-seite .blo__dz small { display: block; margin-top: 8px; font: 400 .875rem/1.4 var(--f-body); letter-spacing: 0; color: var(--mut); }
.bl7-seite .blo__dmeta .lhb__go { right: 8px; bottom: 10px; }
@media (max-width: 1023px) {
  .bl7-seite .blo__datengrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; max-width: 560px; }
  .bl7-seite .blo__dk { display: flex; flex-direction: column; grid-row: auto; }
}
@media (max-width: 767px) {
  .bl7-seite .blo__daten { padding-top: 72px; }
  .bl7-seite .blo__datengrid { max-width: none; }
}

/* Livefassung: Knopf "Datenschutz-Einstellungen" im Footer wie live (Entscheid Jeremy 14.10.2026), Optik wie .ft6__base a */
.ft6__base .ft6__ds { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.ft6__base .ft6__ds:hover { color: var(--orange-ink); }
@media (max-width: 1279px) { .ft6__base .ft6__ds { display: inline-flex; align-items: center; min-height: 44px; } }

/* /mobil.css */
/* TZ2 Mobil, gemeinsame Bausteine (06.11.2026). Zuerst für /seo-agentur-luzern von der Top-Sitzung ("Ja, Luzern zuerst"), seit
   der Übergabe bei der Mobil-Sitzung: Navigation, Footer, Tippflächen, Tablet und 1024 quer für alle 13 TZ2-Seiten.
   Nur Regeln unter 1280 px, der Desktop ab 1280 px bleibt pixelgleich (einzige Ausnahme: min-width 1280 hält das versteckte
   Menü versteckt, am Desktop ohne Wirkung). Seitenbausteine stehen in mobil-seiten.css, die nach dieser Datei geladen wird.
   Eine Seite bindet beide ein, sobald sie in _tools/site-tools/mobil_seiten.txt steht. Geprüft bei 360, 390, 768 und 1024 px. */

@media (max-width: 1023px) {
  /* Hero im Split: Text oben, Screen darunter; .gha .gha__grid schlägt jede Variante mit eigenem Raster (.sha, .msa, .gua ...) */
  .gha__grid, .gha .gha__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .gha .lead { max-width: 60ch; }
  .gha__trust { margin-top: 40px; }

  /* Fragen in einer Spalte (leistungen.css setzt zwei Spalten ohne Media Query) */
  .lpage .fq6__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }

  /* T-Profil: der senkrechte Pfeil der Achse lag links ausserhalb; "Tiefe" steht als Zeile über dem Stamm wie "Breite" über den Feldern */
  .lt7__stemwrap::before, .lt7__stemwrap::after { display: none; }
  .lt7__axis--y { position: static; display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; writing-mode: horizontal-tb; }
  .lt7__axis--y::after { content: ""; flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--ghost), var(--mut)); }

  /* Ablauf-Karten ohne die Desktop-Mindesthöhe und ohne die für Spalten reservierte zweite Titelzeile */
  .lz7__ablauf .pb6__list li, .tr7__ablauf .pb6__list li { min-height: 0; }
  .tr7__ablauf .pb6__list h3 { min-height: 0; }

  /* Aufklapper-Leisten: nie breiter als der Bildschirm, auch wenn eine Tabelle darin breit ist */
  .lx7__row { grid-template-columns: minmax(0, 1fr); }
  .lx7__row > * { min-width: 0; }
  /* Zweispaltige Fakten-Tabelle braucht die 860 px der Vergleichstabellen nicht */
  .lt6--facts table { min-width: 0; }

  /* Lehrbuch-Kette untereinander: Knoten links, Text rechts (auch auf dem Tablet, sonst blieb rechts drei Viertel leer) */
  .lg7__row { --node: 56px; gap: 24px; }
  .lg7__step { grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 16px; padding-right: 0; }
  .lg7__step > .lg7__ic { grid-row: 1 / span 3; }
  .lg7__step > :not(.lg7__ic) { grid-column: 2; }
  .lg7__step .lg7__t { margin-top: 2px; }
  .lg7__step .lg7__d { max-width: none; }
  /* Rechenzeichen und Pfeile bleiben sichtbar: als kleiner Kreis unter dem Knoten (x, +, = gehören zur Formel) */
  .lg7__op { display: grid; width: 32px; height: 32px; margin: -14px 0 -14px calc(var(--node) / 2 - 16px); opacity: 1; animation: none; }
  /* Rücklauf als Zeile unter der Kette statt als Bogen darüber */
  .lg7__back { display: block; grid-column: 1 / -1 !important; grid-row: auto; position: relative; top: auto; left: auto; right: auto; height: auto;
    margin-top: 4px; padding: 12px 16px; border: 2px dashed #BDBEBF; border-radius: 16px; opacity: 1; animation: none; }
  .lg7__back::after { display: none; }
  .lg7__back span { position: static; display: block; padding: 0; background: none; transform: none; white-space: normal; }
  .lg7__fig.is-in .lg7__op, .lg7__fig.is-in .lg7__back { animation: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Fragen-Titel auf der Tablet-Stufe der übrigen Abschnittstitel (44 px statt 56) */
  .fq6__side .h1, .home .cyc5 .h1 { font-size: 2.75rem; line-height: 1.08; }
  /* Hero eine Stufe über den Abschnittstiteln (44 px), wie am Handy (40 über 36) und am Desktop */
  .gha .gha__h { font-size: 3.25rem; line-height: 1.05; }
}

/* ---------- T-Profil auf dem Tablet (768 bis 1279 px): Breite in drei Spalten, Leistung und Tiefe darunter am Stück ----------
   (unter 1024 sonst eine lange Liste mit sechs 704 px breiten Feldern, bei 1024 quer das Desktop-T mit 87 px schmalen Feldern) */
@media (min-width: 768px) and (max-width: 1279px) {
  .lt7 { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .lt7__bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .lt7__core { grid-column: 1 / -1; order: 1; }
  .lt7__stemwrap, .lt7__note--l, .lt7__note--r { grid-column: 1; grid-row: auto; justify-self: stretch; padding: 0; text-align: left; }
  .lt7__stemwrap { order: 1; margin-top: -10px; }
  .lt7__note--l, .lt7__note--r { order: 2; max-width: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .lt7__stemwrap::before, .lt7__stemwrap::after { display: none; }
  .lt7__axis--y { position: static; display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; writing-mode: horizontal-tb; }
  .lt7__axis--y::after { content: ""; flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--ghost), var(--mut)); }
}

@media (max-width: 767px) {
  /* Hero: Titel kleiner, Knöpfe untereinander über die ganze Breite (Selektor .gha .gha__h schlägt die Varianten sha, gea, tha ...) */
  .gha__stage { padding: 112px 0 48px; }
  .gha .gha__h { font-size: 40px; line-height: 1.05; }
  .gha .lead { margin-top: 18px; font-size: 1.0625rem; }
  .gha .hb__ctas { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 28px; }
  .gha .hb__ctas .btn { width: 100%; min-height: 52px; justify-content: center; white-space: normal; text-align: center; padding: 14px 20px; letter-spacing: 0; line-height: 1.2; }
  /* Fläche im Hero nie runder als die Bühne (24 px) */
  .gha__panel { border-radius: 20px; }

  /* Werkzeug-Link unter den Fragen: Text und Pfeil umbrechen statt überlaufen */
  .ga7__tool { flex-wrap: wrap; gap: 8px 16px; }
  .ga7__tool .ga7__tool-t { flex: 1 1 100%; }

  /* Rhythmus: Abschnitte 72 statt 120 px, Abschnittstitel 36 statt 40 bis 56 px, Unterabschnitt 28 px darunter */
  .lpage .lx6 { padding: 72px 0; }
  .lpage .vs { padding: 72px 0; }
  .lpage .fq6 { padding: 72px 0; }
  .lpage .head .h1, .lpage .lg7 .h1, .lpage .fq6__side .h1, .lpage .tm6__intro .h1, .lpage .kc7__pcopy .h1, .lpage .kt7__ocopy .h1 { font-size: 2.25rem; line-height: 1.08; }
  .lpage .tm6 { padding: 72px 0; }
  .lpage .head + .lk6__k { margin-top: 0; }
  .lpage .vs__p { font-size: 1.875rem; line-height: 1.2; }
  .lpage .gp7__t { font-size: 1.75rem; line-height: 1.15; }

  /* T-Profil: Breite in zwei Spalten, darunter der Stamm (Leistung und Tiefe) am Stück */
  .lt7__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lt7__core { grid-column: 1 / -1; order: 1; }
  .lt7__stemwrap { order: 1; margin-top: -10px; }
  .lt7__note--l, .lt7__note--r { order: 2; max-width: none; }
  .lt7__item { padding: 14px 14px 16px; }

  /* Fakten-Tabelle: Bezeichnung über dem Wert statt zwei schmaler Spalten */
  .lt6--facts colgroup { display: none; }
  .lt6--facts tbody, .lt6--facts tr, .lt6--facts th, .lt6--facts td { display: block; width: auto; }
  .lt6--facts table { display: flex; flex-direction: column; }
  .lt6--facts caption { display: block; order: 2; }
  .lt6--facts tbody th { padding: 16px 18px 4px; border-top: 1px solid var(--line); }
  .lt6--facts tbody tr:first-child > th { border-top: 0; }
  .lt6--facts tbody td { padding: 0 18px 16px; border-top: 0; }

  /* Footer: Linkspalten zu zweit, Marke und Kontakt über die ganze Breite (Telefonnummer auf einer Zeile) */
  .ft6__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .ft6__brand, .ft6__contact { grid-column: 1 / -1; }
  /* Fusszeile: Copyright, darunter Impressum, Datenschutz (live auch Datenschutz-Einstellungen) als umbrechende Zeile statt einer
     schmalen Spalte rechts (bei 320 px auf drei Zeilen verteilt) */
  .ft6__base { flex-direction: column; gap: 4px; }
  .ft6__base > span:last-child { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
  .ft6__contact .ft6__tel { white-space: nowrap; }

  /* Case-Karten (tr7): "CHF 25 bis 40" sprengte bei 360 px die Karte um 3 px */
  .tr7__cases { grid-template-columns: minmax(0, 1fr); }
  .tr7__case { padding: 24px 22px; }
  .tr7__num { font-size: 2.5rem; }
}

/* ---------- Navigation bis 1279 px: Pille mit Menü-Knopf, Menü als Karte darunter (Muster der Live-Seite) ----------
   Markup: navigation.mobile_nav() ersetzt die alte Liste #mnav; tz2.js schaltet hidden. Ab 1280 px bleibt das Desktop-Menü. */
@media (max-width: 1279px) {
  .nav__links, .nav__bar > .nv-kic, .nav__tel { display: none; }
  .nav__bar > .btn { margin-left: auto; }
  .nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .nav__toggle { display: inline-grid; flex: none; place-content: center; gap: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--surface); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nav__toggle:active { background: var(--line); }
  .nav__toggle span { display: block; width: 18px; height: 2px; background: var(--black); transition: transform var(--base) var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .nav__mobile.mnv { position: absolute; z-index: 61; top: calc(100% + 8px); left: 8px; right: 8px; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
    overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 18px; border: 0; border-radius: 24px; background: #fff; pointer-events: auto;
    box-shadow: 0 0 0 1px rgba(2,10,24,.06), 0 24px 60px rgba(2,10,24,.16); }
  html:has(#mnav:not([hidden])) { overflow: hidden; }
  /* Rücksetzung für alle Links im Menü; die eigenen Stile unten tragen deshalb "a." im Selektor (gleiche Stärke, später) */
  .nav__mobile.mnv a:not(.btn) { display: block; padding: 0; border: 0; font: inherit; text-decoration: none; color: var(--ink); }
  .nav__mobile.mnv a, .mnv__g summary { -webkit-tap-highlight-color: transparent; }
  .mnv__in { display: grid; }

  /* Die drei Hebel als Aufklapper, immer nur einer offen */
  .mnv__g { border-bottom: 1px solid var(--line); }
  .mnv__g summary, .nav__mobile.mnv .mnv__more a { display: flex; align-items: center; justify-content: space-between; min-height: 56px;
    font: 500 .9375rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); cursor: pointer; list-style: none; }
  .mnv__g summary::-webkit-details-marker { display: none; }
  .mnv__g summary:active, .nav__mobile.mnv .mnv__more a:active { color: var(--orange-ink); }
  .mnv__g summary .nv-car { width: 12px; height: 12px; opacity: .65; transition: transform var(--fast) var(--ease); }
  .mnv__g[open] summary .nv-car { transform: rotate(180deg); }
  .mnv__p { padding: 0 0 14px; }
  .mnv__k { margin: 0; padding: 12px 12px 4px; font: 500 .6875rem/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
  .mnv__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .nav__mobile.mnv .mnv__list a { display: grid; gap: 3px; min-height: 44px; padding: 10px 12px; border-radius: 16px; }
  .nav__mobile.mnv .mnv__list a[aria-current], .nav__mobile.mnv .mnv__list a:active { background: var(--card); }
  .mnv__list b { font: 500 .9375rem/1.25 var(--f-display); color: var(--ink); }
  .mnv__list a[aria-current] b { color: var(--orange-ink); }
  .mnv__list span { font: 400 .8125rem/1.4 var(--f-body); color: var(--mut); }
  .nav__mobile.mnv a.mnv__all { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 6px; padding: 10px 12px 0;
    border-top: 1px solid var(--line); font: 500 .875rem/1.3 var(--f-display); }
  /* Zeile "Für alle drei" unter den drei Hebeln (navigation.FUER_ALLE_DREI, am Desktop nv-foot in jedem Untermenü) */
  .mnv__fa { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; min-height: 56px; border-bottom: 1px solid var(--line); }
  .mnv__fa .mnv__k { padding: 0; }
  .nav__mobile.mnv .mnv__fa a { display: inline-flex; align-items: center; min-height: 44px; font: 500 .9375rem/1.25 var(--f-display); }
  .nav__mobile.mnv .mnv__fa a[aria-current], .nav__mobile.mnv .mnv__fa a:active { color: var(--orange-ink); }

  /* Cases, Über uns, Blog wie die Hebel; danach KI-Check, Kontakt und Telefon */
  .nav__mobile.mnv .mnv__more a { border-bottom: 1px solid var(--line); }
  .nav__mobile.mnv .mnv__more a[aria-current], .nav__mobile.mnv .mnv__kic[aria-current], .nav__mobile.mnv a.mnv__all[aria-current] { color: var(--orange-ink); }
  .nav__mobile.mnv a.mnv__kic { display: inline-flex; align-items: center; justify-self: start; gap: 10px; min-height: 44px; margin-top: 16px; padding: 0 18px 0 8px;
    border-radius: 100px; background: var(--card); font: 500 .875rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
  .mnv__kic .nv-kilogos { display: inline-flex; flex: none; }
  .mnv__kic .nv-kilogos span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(2,10,24,.2); }
  .mnv__kic .nv-kilogos span + span { margin-left: -6px; }
  .mnv__kic .nv-kilogos img { width: 14px; height: 14px; }
  .mnv__cta { display: grid; gap: 6px; margin-top: 16px; }
  .nav__mobile.mnv .mnv__cta .btn { width: 100%; min-height: 52px; white-space: normal; text-align: center; }
  .nav__mobile.mnv a.mnv__tel { display: flex; align-items: center; justify-content: center; min-height: 44px; font: 700 1.125rem/1 var(--f-display); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* Tablet: Menü als Karte unter dem Knopf statt über die ganze Breite */
  .nav__mobile.mnv { left: auto; right: 8px; width: 420px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__mobile.mnv { right: max(20px, calc((100% - 1240px) / 2)); }
}
@media (max-width: 1023px) {
  /* Schwebende Pille wie am Desktop statt der weissen Leiste */
  .home .nav { padding-top: 8px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; pointer-events: none; }
  .home .nav__bar { pointer-events: auto; width: calc(100% - 16px); max-width: none; height: 60px; margin: 0 auto; padding: 0 8px 0 18px; gap: 10px; border-radius: 999px;
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(2,10,24,.06), 0 8px 24px rgba(21,37,57,.08); }
  .home .nav__bar > .btn { min-height: 44px; padding: 0 16px; font-size: .75rem; }
}
@media (min-width: 1280px) {
  /* Falls das Menü offen war und das Fenster breiter wird: nur der versteckte Zustand, am Desktop ohne Wirkung */
  .nav__mobile.mnv { display: none !important; }
}

/* ---------- Sprunglink "Zum Inhalt" (tz2.css, nur bei Fokus sichtbar): mittig in der Leiste, 44 px hoch ---------- */
@media (max-width: 1279px) {
  .skip { display: inline-flex; align-items: center; min-height: 44px; top: 25px; }
}
@media (max-width: 1023px) {
  .skip { top: 16px; }  /* Pille: oben 8 px, 60 px hoch */
}

/* ---------- Footer auf Tablet und quer: Marke als Zeile, Links in drei Spalten (vorher fünf bis sechs gequetschte Spalten) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .ft6__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
  .ft6__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px 40px;
    padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  .ft6__brand .ft6__about { max-width: 52ch; margin-top: 0; }
  .ft6__brand .ft6__trust { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin-top: 0; }
}

/* ---------- Footer, Regionen und Branche (navigation.footer_zeile(), details.ft6__reg): unter 1280 px aufklappbar ----------
   Am Desktop offen und nicht klickbar (home.css). Hier eine Zeile pro Gruppe mit Pfeil; auf dem Handy startet sie zu
   (tz2.js), auf dem Tablet offen. Der Pfeil bleibt auch dort, damit die Zeile nach dem Drehen wieder aufgeht. */
@media (max-width: 1279px) {
  .ft6__zeile { display: grid; gap: 0; padding-top: 0; border-top: 1px solid var(--line); }
  .ft6__reg { position: static; padding: 0; border-bottom: 1px solid var(--line); }
  .ft6__reg > summary { position: static; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ft6__reg > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; opacity: .65; transform: translateY(-2px) rotate(45deg); transition: transform var(--fast) var(--ease); }
  .ft6__reg[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .ft6__reg > summary:active { color: var(--orange-ink); }
  .ft6__reg ul { row-gap: 0; margin: 0; padding: 0 0 12px; list-style: none; font-size: .875rem; }
  .ft6__reg a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767px) {
  /* Handy: Links in zwei Spalten wie die übrigen Footer-Spalten, ohne Trennpunkte */
  .ft6__reg ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; font-size: .9375rem; }
  .ft6__reg li:not(:last-child)::after { display: none; }
  .ft6__reg a { padding-block: 10px; line-height: 1.35; }
}

/* ---------- 1024 quer (bis 1279 px): Desktop-Raster mit weniger Breite ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Footer: drei Label-Pillen auf eine eigene Zeile, sonst blieb dem Satz eine Wortbreite */
  .ft6__brand { grid-template-columns: auto minmax(0, 1fr); gap: 20px 48px; }
  .ft6__brand .ft6__trust { grid-column: 1 / -1; justify-content: flex-start; }
  .ft6__social { flex-wrap: wrap; gap: 0 18px; }
  /* Lehrbuch: lange Formeln umbrechen (Luzern, Webagentur Luzern: 962 px Formel in 848 px), Satz unter der Formel (KI-Check: 50 px Spalte) */
  .lg7__eq { flex-wrap: wrap; row-gap: 10px; white-space: normal; }
  .lg7__rule { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* Kopf im Split und Fragen-Titel 44 px wie auf dem Tablet hoch: lange Wörter ("Dienstleistungen.", "Standortbestimmung",
     "Kleingedrucktes.", "Sammelkampagne.") stiessen bei 48 und 56 px in den Lead oder über die Spalte */
  .lpage .head--split .h1, .fq6__side .h1 { font-size: 2.75rem; line-height: 1.08; -webkit-hyphens: auto; hyphens: auto; }
  /* Ablauf-Karten (vier und fünf Schritte): Titel wie "Abgleichen", "Klarheitsplan" passen in die Karte; lange Wörter trennen */
  .pb6__list h3 { font-size: 1.375rem; }
  .pb6__list h3, .ga7__krit h3, .pb6__list p, .sa7__punkte h3 { -webkit-hyphens: auto; hyphens: auto; }
  /* Teamfoto bei "Warum wir": ganzes Bild statt eines hohen Ausschnitts, in dem die Personen am Rand fehlten */
  .ga7__team { align-self: start; }
  .ga7__team img { height: auto; aspect-ratio: 1425 / 1044; }
}

/* ---------- Tippflächen bis 1279 px mindestens 44 px (auch 1024 quer ist ein Tablet mit Finger) ---------- */
@media (max-width: 1279px) {
  /* Text-Links mit Pfeil: unsichtbare Fläche um den Link, Unterstrich und Abstände bleiben wie sie sind */
  .link { position: relative; }
  .link::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  .btn--sm { min-height: 44px; }
  /* Footer: jede Zeile eine Tippfläche; Polster statt nur Mindesthöhe, damit zweizeilige Einträge getrennt bleiben */
  .ft6__col ul { gap: 0; }
  .ft6__col li a, .ft6__contact > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 10px; line-height: 1.35; }
  .ft6__social a, .ft6__base a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .ft6__social { gap: 0 20px; margin-top: 0; }
  .ft6__contact { gap: 0; }
  .ft6__contact .ft6__h { margin-bottom: 4px; }
  /* Weiterlesen-Pillen (Leistungsseiten) */
  .lr6__links a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Kleinigkeiten aus der Prüf-Flotte: Abzeichen "Case" 11 statt 10 px, Google-Partner-Symbol unverzerrt */
  .lg6__case { font-size: .6875rem; }
  .tb img, .ft6__pill img { object-fit: contain; }
}

/* ---------- Schmale Handys (bis 389 px): lange Wörter in Abschnittstiteln trennen ("Standortbestimmung" ist bei 36 px 361 px breit) ---------- */
@media (max-width: 389px) {
  .lpage .head .h1, .lpage .lg7 .h1, .lpage .fq6__side .h1, .lpage .tm6__intro .h1, .lpage .kc7__pcopy .h1, .lpage .kt7__ocopy .h1, .cg7__sub, .contact-panel-title { -webkit-hyphens: auto; hyphens: auto; }
}

/* ---------- Kleine Handys (320 px, iPhone SE der ersten Generation) ---------- */
@media (max-width: 359px) {
  /* Abschnittstitel eine Stufe kleiner, damit lange Wörter ("Kampagnenlogik") nicht über den Rand laufen */
  .lpage .head .h1, .lpage .lg7 .h1, .lpage .fq6__side .h1, .lpage .tm6__intro .h1, .lpage .kc7__pcopy .h1, .lpage .kt7__ocopy .h1 { font-size: 2rem; }
  .contact-panel-title { font-size: 1.5rem; }
  /* Knöpfe: 12 statt 32 px Polster, damit "30-Minuten-Fit-Call buchen" im Polster bleibt (vorher 13 bis 19 px darüber) */
  .btn:not(.btn--sm) { padding-inline: 12px; }
  .gha .gha__h { font-size: 36px; }
  /* Pille oben: Logo und Kontakt-Knopf etwas schmaler, damit der Menü-Knopf im Bild bleibt */
  .home .nav__bar { padding: 0 6px 0 14px; gap: 8px; }
  .nav__logo img { width: 92px; }
  .home .nav__bar > .btn { padding: 0 12px; font-size: .6875rem; }
}

/* /mobil-seiten.css */
/* TZ2 Mobil, Seitenbausteine (Mobil-Sitzung, 06.11.2026). Ergänzt mobil.css um die Bausteine, die /seo-agentur-luzern nicht
   hat: Startseite, Leistungen, Google Ads, die Heros mit eigenem Raster und die Eigenheiten von Webdesign, ChatGPT Ads und KI-Check.
   Nur Regeln unter 1280 px; ab 1280 px bleibt der Desktop pixelgleich. Geladen nach mobil.css.
   Breiten: Handy 360 und 390, Tablet 768 hoch und 1024 quer. Prüf-Flotte vom 06.11. eingearbeitet. */

/* ---------- Startseite ---------- */
@media (max-width: 1279px) {
  /* Tippflächen: Link unter den Leistungskarten mindestens 44 px hoch */
  .svc__more, .fd6__copy .svc__more { min-height: 44px; }
  /* Ledger: Zellen brechen um statt mit Auslassungspunkten zu enden (1024 quer: "Kontak...", "soweit technis...") */
  .ld6__win .sheet__row > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; hyphens: auto; }
}
@media (max-width: 1023px) {
  /* Kreislauf: home.css setzt 200 px Polsterung ohne Media Query, dadurch lagen die Beschriftungen 2 und 4 auf dem Ring */
  .cyc6 .cyc5__wrap { max-width: 720px; padding: 92px 176px 112px; }
  .cyc6 .cyc5__lbl { width: 164px; font-size: .875rem; }
  .cyc6 .cyc5__lbl--2 { left: 100%; right: auto; transform: translate(8%, -50%); text-align: left; }
  .cyc6 .cyc5__lbl--4 { right: 100%; left: auto; transform: translate(-8%, -50%); text-align: right; }

  /* Case-Stapel: Bildausschnitt von links, damit das Kundenlogo rechts neben der Zahl steht und nicht dahinter */
  .cs5__card img { object-position: 0% 50%; }

  /* Einstieg: Kartenraster nie breiter als der Bildschirm (1fr gibt langen Knöpfen sonst Mindestbreite) */
  .en6__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  /* Titel des Kreislaufs und der Fragen wie die übrigen Startseiten-Titel (tz2.css: höchstens 40 px, fliessend) */
  .home:not(.lpage) .cyc5 .h1, .home:not(.lpage) .fq6__side .h1 { font-size: min(2.5rem, calc((100vw - 40px) / 8.4)); line-height: 1.08; }

  /* Kreislauf: Ring oben, die vier Schritte darunter in zwei Spalten */
  .cyc6 .cyc5__wrap { max-width: none; padding: 8px 0 0; }
  .cyc6 .cyc5__fig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; aspect-ratio: auto; max-width: none; }
  .cyc6 .cyc5__fig svg { position: relative; inset: auto; grid-column: 1 / -1; justify-self: center; width: min(300px, 86%); height: auto; aspect-ratio: 1 / 1; }
  .cyc6 .cyc5__lbl, .cyc6 .cyc5__lbl--1, .cyc6 .cyc5__lbl--2, .cyc6 .cyc5__lbl--3, .cyc6 .cyc5__lbl--4 { position: static; width: auto; transform: none; text-align: left; }

  /* Karte Fundament: die vier Punkte untereinander, Symbol links neben Titel und Satz */
  .fd6 { gap: 28px; padding: 28px 22px; }
  .fd6__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fd6__list li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 18px; }
  .fd6__ic { grid-row: span 2; margin-bottom: 0; }

  /* Ledger: alle fünf Spalten sichtbar (vorher fehlte die Spalte Zuordnung), Text bricht in der Zelle um */
  .ld6__win .sheet__row { grid-template-columns: 24px .7fr .95fr 1.1fr 1.25fr; }
  .ld6__win .sheet__row > span:nth-child(5) { display: block; }
  .ld6__win .sheet__row > span { padding: 8px 6px; font-size: .75rem; }
  .ld6__win .sheet__row > span:first-child { padding-inline: 2px; }

  /* Case-Stapel: Foto ganz oben (mit Logo), Text darunter auf dunkler Fläche statt über dem Foto; Abstand wie der Rest der Startseite */
  .cs5 { padding-top: 80px; }
  .cs5__card { display: flex; flex-direction: column; height: auto; background: #020A18; }
  .cs5__card::before { display: none; }
  .cs5__card img { position: relative; inset: auto; z-index: 0; width: 100%; height: auto; aspect-ratio: 1080 / 589; object-position: 50% 50%; transform: none; }
  .cs5__top { position: static; padding: 20px 22px 0; }
  .cs5__body { position: static; padding: 18px 22px 26px; }
  .cs5__num { font-size: 3.5rem; }
  .cs5__tick { position: relative; flex: none; height: 64px; }

  /* Lange Knöpfe in den Einstiegs-Karten brechen um statt die Karte zu sprengen (360 px); einzeilig weiter 52 px hoch */
  .en6__card .btn { min-height: 52px; white-space: normal; line-height: 1.2; padding-block: 16px; }
}

/* ---------- Leistungen und Google Ads: drei Kacheln mit Screen (lhb) ---------- */
@media (max-width: 767px) {
  /* Untereinander, Screen oben gross genug zum Erkennen (172 px statt 95 px in drei Spalten), darunter Name und Preis */
  .lhb__levers { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .lhb__card { border-radius: 24px; }
  .lhb__shot, .ghb__shot { height: 212px; padding-top: 18px; }
  .lhb__shot .iph { --s: .46 !important; }
  .lhb__meta { padding: 16px 64px 18px 20px; }
  .lhb__p { font-size: 1.5rem; }
}

/* ---------- Leistungen ---------- */
@media (max-width: 1023px) {
  /* Wisch-Tabellen: positioniert, damit die versteckten Spaltenköpfe (lt6__hide, absolut) im Behälter bleiben (vorher 631 px breit) */
  .lt6:not(.lt6--facts) { position: relative; }
}
@media (max-width: 767px) {
  /* Fakten unter der Vergleichstabelle in einer Spalte (vorher zwei Spalten mit 103 px Text) */
  .lf6 { grid-template-columns: minmax(0, 1fr); }
  .lf6 li, .lf6 li:first-child { border-left: 0; }
  .lf6 li + li { border-top: 1px solid var(--line); }

  /* Preisliste (Leistungen, Google Ads, ChatGPT Ads): Preis unter dem Namen ("Mediabudget" lief sonst in "ab CHF 20 pro Tag") */
  .lp7__row > summary { grid-template-columns: minmax(0, 1fr) 32px; grid-template-areas: "n i" "p i"; row-gap: 6px; }
}
@media (max-width: 389px) {
  /* "direkt an Microsoft", "ab CHF 20 pro Tag" liefen bei 320 px unter das Plus */
  .lp7__row > summary { grid-template-areas: "n i" "p p"; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Case-Karten bei 1024 quer: "CHF 25 bis 40" braucht bei 48 px 287 px und wurde in der Karte abgeschnitten */
  .lc6__num { font-size: 2.375rem; }
  /* Link in der Kanaltabelle ("ChatGPT Ads Agentur") bricht um statt am Zellenrand abgeschnitten zu werden */
  .lt6 td .link { white-space: normal; }
}

/* ---------- Vergleichstabellen (Leistungen, LSA, GEO, Webdesign, Cases, Microsoft Ads) ---------- */
@media (max-width: 1023px) {
  /* Waagrecht wischen, erste Spalte bleibt stehen (auch auf dem Tablet sind die Tabellen breiter als die Spalte) */
  .lt6:not(.lt6--facts) tr > :first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--line); }
  .lt6:not(.lt6--facts) thead tr > :first-child { background: var(--card); }
  /* Lange Wörter der ersten Spalte trennen statt in die nächste Spalte zu laufen ("Monatsbericht", "Verfügbarkeit") */
  .lt6:not(.lt6--facts) tbody tr > :first-child, .lt6 tbody th { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: erste Spalte breiter, damit Bezeichnungen wie "Marktanteil Suche Schweiz" oder "Voraussetzung" nicht dreizeilig werden */
  .lt6:not(.lt6--facts) col.lt6__c1 { width: 184px; }
  .lt6--facts col.lt6__c1 { width: 168px; }
}
@media (max-width: 767px) {
  /* Die nächste Spalte schaut an, damit das Wischen erkennbar ist */
  .lt6:not(.lt6--facts) table { min-width: 760px; font-size: .875rem; }
  .lt6:not(.lt6--facts) col.lt6__c1 { width: 104px; }
  .lt6:not(.lt6--facts) th, .lt6:not(.lt6--facts) td { padding: 14px 14px; }
  .lt6:not(.lt6--facts) .lt6__p { font-size: 1.375rem; }
  /* Lange Suchbegriffe in den Fakten-Tabellen ("suchmaschinenoptimierung luzern", 190 px in 180 px) trennen */
  .lt6--facts td { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}

/* ---------- Webdesign und Webagentur Luzern: Kennzahlen-Reihe ---------- */
@media (max-width: 767px) {
  /* Eine Kennzahl pro Zeile, Trennlinie oben statt links ("194 bis 304 KB" passt nicht in eine halbe Spalte) */
  .wd7__werte { grid-template-columns: minmax(0, 1fr); }
  .wd7__werte li, .wd7__werte li + li, .wd7__werte li:nth-child(3) { padding: 20px 0 22px; border-left: 0; }
  .wd7__werte li + li { border-top: 1px solid var(--line); }
  .wd7__werte b { font-size: 2rem; white-space: normal; }
  .wd7__werte span { max-width: none; }
}

/* ---------- ChatGPT Ads ---------- */
@media (max-width: 1023px) {
  /* Ablauf in vier Spalten ohne Media Query: Titel abgeschnitten, Text in 16 px Spalte; Tablet zwei Spalten, Handy eine */
  .cg7__ablauf .pb6__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg7__ablauf .pb6__list li { min-height: 0; }
}
@media (max-width: 767px) {
  .cg7__ablauf .pb6__list { grid-template-columns: minmax(0, 1fr); }
  /* Unterabschnitt unter dem Abschnittstitel (36 px): 28 px wie die Karten-Titel */
  .cg7__sub { margin-bottom: 28px; font-size: 1.75rem; }
}

/* ---------- KI-Check ---------- */
@media (max-width: 1023px) {
  /* ki-sichtbarkeit.css setzt drei Spalten ohne Media Query; wie ga7__krit eine Spalte unter 1024 px */
  .kc7__sofort { grid-template-columns: minmax(0, 1fr); }
  /* Ansprechpartner (06.11. nachgetragen, Session Zone-Check Gemini): Porträt über dem Text, höchstens 560 px breit */
  .kc7__pgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kc7__foto { max-width: 560px; }
}
@media (max-width: 767px) {
  /* Scroll-Satz ohne Pain Points: unten 72 px wie die übrigen Abschnitte statt 120 */
  .gpage .ga7__vs.kc7__vs { padding-bottom: 72px; }
  .kc7__karte { left: 12px; right: 12px; bottom: 12px; padding: 12px 16px; }
}

/* ---------- Heros mit gerahmtem Screen (SEO, Webdesign, Tracking, LSA, ChatGPT Ads, Microsoft Ads, SEO Audit, Cases) ----------
   Das Raster stapelt mobil.css für alle Varianten (.gha .gha__grid); hier nur das Polster um den Screen. */
@media (max-width: 1023px) {
  /* Gleiches Polster um den Screen auf dem Tablet (vorher 36 und 32 px gemischt) */
  .sha__panel, .tha__panel, .lsb__panel, .cga__panel, .msa__panel, .saa__panel, .csa__panel, .kpa__panel, .gec__panel, .auc__panel { padding: 28px; }
}
@media (max-width: 767px) {
  /* Screen über die ganze Breite, damit die Schrift im Bild so gross wie möglich bleibt */
  .sha__panel, .tha__panel, .lsb__panel, .cga__panel, .msa__panel, .saa__panel, .csa__panel, .kpa__panel, .gec__panel, .auc__panel { padding: 14px; }
}

/* ---------- Audits, Klarheitsplan, Über uns, Kontakt, Cases (Seiten vom 06.11. früh und nachts) ---------- */
@media (max-width: 1279px) {
  /* Tippflächen: Telefon und E-Mail in Karten und Adressen, Case-Namen in der Tabelle */
  .khb__rows a, .kh__ways a, .uu7__addr a, .cs7__tab tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 1023px) {
  /* Prüfpunkte und Befund-Karten der Audits in zwei Spalten (vorher vier ohne Media Query) */
  .au7__krit, .sa7__punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  /* Kontakt: Anfrage und nächste Schritte untereinander, die drei Schritte und vier Punkte nicht mehr in Spalten gequetscht */
  .kt7__agrid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .kt7__fit .kt7__steps { grid-template-columns: minmax(0, 1fr); }
  .kt7__klar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .au7__krit, .sa7__punkte { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .au7__krit > li { grid-row: auto; grid-template-rows: none; }
  /* Klarheitsplan: Garantie-Kicker über dem Text statt in einer 220 px Spalte (vorher 442 px breit) */
  .kp7__garantie { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 20px; }
  /* Über uns: Gründe in einer Spalte */
  .uu7__grund { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
  .uu7__grund li { grid-row: auto; grid-template-rows: none; }
  /* Kontakt: Felder untereinander, Senden-Knopf über dem Datenschutz-Satz, vier Punkte in einer Spalte */
  .contact-form-row { grid-template-columns: minmax(0, 1fr); }
  .contact-actions { grid-template-columns: minmax(0, 1fr); }
  .kt7__klar { grid-template-columns: minmax(0, 1fr); }
  .kt7__steps li { padding-left: 72px; }
  .kt7__fit .kt7__steps li { padding-left: 72px; }
  /* Kontakt, Adresse: Text über der Karte statt in einer schmalen Spalte daneben */
  .kt7__ogrid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Bewertungen: Person und Sterne über dem Zitat statt in einer Spalte daneben (überlappten sich bei 390 px) */
  .bw7__row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 32px 0; }
  .bw7__av, .bw7__init { width: 52px; height: 52px; }
  .bw7__row blockquote p { font-size: 1.0625rem; }
  /* Über uns, vier Fakten: zwei Spalten bleiben, mit weniger Polster und Trennung langer Wörter ("Partnerverzeichnis") */
  .uu7__f { padding: 20px 18px; }
  .uu7__f dt { height: 44px; font-size: 2.5rem; }
  .uu7__f strong { margin-top: 20px; font-size: 1.125rem; -webkit-hyphens: auto; hyphens: auto; }
  .uu7__f dd > span { font-size: .875rem; -webkit-hyphens: auto; hyphens: auto; }
  /* Über uns, Team: eine Karte pro Zeile, Foto klein neben Name und Rolle, Text in voller Breite darunter
     (in zwei Spalten blieben dem Text 125 px, rund 16 Zeichen pro Zeile) */
  .uu7__members { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
  .uu7__m { grid-row: auto; grid-template-rows: auto auto; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; padding: 12px 12px 22px; }
  .uu7__ph { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 1; }
  .uu7__m h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 1.25rem; }
  .uu7__role { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; }
  .uu7__txt, .uu7__links { grid-column: 1 / -1; margin: 16px 8px 0; }
  .uu7__m > span:empty { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Cases bei 1024 quer: die zwei Karten der zweiten Reihe je halbe Breite statt zwei Sechstel (Kicker und Zahl wurden abgeschnitten) */
  .cs7__grid--2 > .cs7__case { grid-column: span 3; }
  .cs7__grid--2 > .cs7__case:first-child { grid-column: 1 / span 3; }
}
@media (max-width: 1279px) {
  /* Case-Zahl wie lc6 eine Stufe kleiner, damit "CHF 25 bis 40" in die Karte passt */
  .cs7__num { font-size: 2.375rem; }
}
@media (max-width: 1023px) {
  /* Kontakt, Konditionen: vier Spalten (Laufzeit, Kündigung ...) in zwei, auf dem Handy in einer */
  .kt7__terms { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .kt7__terms > div { grid-row: auto; grid-template-rows: none; }
  .kt7__terms > div:nth-child(odd) { border-left: 0; }
  .kt7__terms > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 767px) {
  .kt7__terms { grid-template-columns: minmax(0, 1fr); }
  .kt7__terms > div { border-left: 0; padding: 22px 22px 20px; }
  .kt7__terms > div + div { border-top: 1px solid var(--line); }
  /* Handwerk: Zitatkarte im Hero innerhalb des Fotos statt 300 px fest */
  .mha__card { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (max-width: 359px) {
  /* Kleine Handys: Case-Zahlen, Bewertungskarte (Über uns) und Kontaktkarte (Kontakt) passen in die schmale Fläche */
  .lc6__num, .cs7__num { font-size: 2.125rem; white-space: normal; }
  .uua__card { left: 12px; right: 12px; bottom: 12px; gap: 12px; padding: 14px 16px 12px 14px; }
  .uua__txt { min-width: 0; }
  .khb__card { left: 12px; right: 12px; bottom: 12px; }
  .khb__rows a { overflow-wrap: anywhere; }
  /* KI-Check: Feld und Knopf untereinander (bei 320 px blieb dem Feld 37 px) */
  .kca__field { flex-wrap: wrap; padding: 6px; border-radius: 26px; }
  .kca__field input { flex: 1 1 100%; padding: 0 16px; }
  .kca__field .btn { flex: 1 1 100%; }
  /* Kontakt: Hinweistext im Freitextfeld braucht bei 320 px drei Zeilen ("Bisherige Agentur, laufendes Budget, Region.") */
  .kha .contact-textarea { min-height: 96px; }
  /* KI-Check, Ansprechpartner: "30-Minuten-Fit-Call buchen" ist mit 32 px Polster 306 px breit, die Spalte 280 px */
  .kc7__pcta .btn { width: 100%; padding-inline: 16px; white-space: normal; }
}

/* ---------- Befunde der Prüf-Flotte 2 (06.11. mittags): Text über die eigene Box, Tippflächen, Polster ---------- */
@media (max-width: 1279px) {
  /* Tippflächen: Regional-Links (Leistungen), Google Partner (KI-Check), Faktenlinks (Über uns) standen allein, ohne Mindesthöhe */
  .lk6__reg a, .kc7__fakten a, .uu7__f dd a { display: inline-flex; align-items: center; min-height: 44px; }
  .kc7__fakten { align-items: center; row-gap: 0; }  /* übrige Punkte auf der Höhe des Links */
  /* Kartenhinweis der Stadt-Karten (Zürich, Basel, Bern) umbrechen statt mit Auslassungspunkten kürzen */
  .zgs .lzc__attr { height: auto; min-height: 26px; padding-block: 4px; line-height: 1.3; white-space: normal; }
}
@media (max-width: 1023px) {
  /* GEO Luzern, Hero: Werte neben dem Namen, Balken darunter (geo-luzern-hero.css schlägt sonst die Mobilregel aus geo.css) */
  .glc__wide li { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 767px) {
  /* Über uns, Belege: Polster und Zahl wie die übrigen Case-Karten (tr7) */
  .uu7__case { padding: 24px 22px; }
  .uu7__num { font-size: 2.5rem; }
}
@media (max-width: 359px) {
  /* Klarheitsplan, Hero-Karte: Etikett über dem Text (dem Text blieben 52 px), Karte mit weniger Polster */
  .kpa__card { padding: 20px 18px 16px; }
  .kpa__n { font-size: 1.75rem; -webkit-hyphens: auto; hyphens: auto; }
  .kpa__rows li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .kpa__s { grid-row: auto; }
  /* Leistungen, Ergänzungen: Preis über der Beschreibung (dem Text blieben 96 px) */
  .lb7__erg li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* Über uns, vier Fakten: eine Spalte (Text vorher 96 px mit vielen Trennungen) */
  .uu7__proof { grid-template-columns: minmax(0, 1fr); }
  /* Abschluss, Personenkarte: "Profil ansehen" unter Name und Rolle statt in einer 68 px Spalte */
  .le6__card { flex-wrap: wrap; row-gap: 4px; border-radius: 28px; }
  .le6__card i { flex-basis: 100%; margin-left: 66px; }
}

/* ---------- Kontakt (Desktop-Umbau der Top-Sitzung 06.11. mittags: Hero A mit Formular, Bewertungen darunter) ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Datenschutz-Satz unter dem Senden-Knopf statt in einer 118 px Spalte daneben */
  .contact-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* Formular: weniger Polster, damit Felder und Auswahl mehr Breite haben (bei 320 px vorher 200 px) */
  .contact-panel { padding: 22px 18px 18px; border-radius: 24px; }
  /* Bewertungen: Bewertung, Quelle und Link untereinander, die zwei Karten untereinander (vorher nebeneinander, Seite zu breit) */
  .kt7__btop { gap: 8px 20px; margin-bottom: 28px; }
  .kt7__brate { flex-wrap: wrap; row-gap: 4px; }
  .kt7__btop .link { margin-left: 0; }
  .kt7__bl > [aria-hidden="true"] { display: none; }  /* Trennpunkt am Zeilenanfang, wenn "18 Google-Bewertungen" umbricht */
  .kt7__bgrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
  .kt7__bq { grid-row: auto; grid-template-rows: none; padding: 24px 22px; border-radius: 24px; }
  .kt7__bq .bw7__src { flex-wrap: wrap; row-gap: 2px; }
  .kt7__bq blockquote { margin: 12px 0 20px; }
  .kt7__bq blockquote p { font-size: 1.0625rem; }
}

/* ---------- Google Ads Audit und SEO Audit (Desktop-Umbau der Fork-Session 06.11. mittags; Google Ads Audit mit Hero C) ---------- */
@media (max-width: 767px) {
  /* Hero C, Zahlenkarte: weniger Polster, Zahl eine Stufe kleiner (dem Text blieben bei 390 px 110 px, bei 320 px 40 px) */
  .auc__card { padding: 24px 22px 20px; }
  .auc__n { font-size: 2.25rem; }
  /* SEO Audit: nach dem Kopf 36 px wie überall (vor den Prüfpunkten und dem Preis-Untertitel standen 72 px) */
  .lpage .head + .sa7__pruef, .lpage .head + .sa7__sub { margin-top: 0; }
}
@media (max-width: 359px) {
  .auc__rows li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* ---------- Kontakt und Bewertungen: Google-Maps-Karte und Kundenfotos (Top-Sitzung 06.11. nachmittags) ---------- */
@media (max-width: 767px) {
  /* Bewertungen: Kundenfoto höchstens 240 px wie auf den Case-Seiten (vorher die ganze Spalte, 350 px bei 390 px) */
  .bw7__who--foto .bw7__foto { max-width: 240px; }
  /* Kontakt, Karte: 340 statt 460 px hoch (bei 320 px nahm der Rahmen 81 Prozent der Bildschirmhöhe ein); Wischen scrollt die Seite */
  .kt7__map { height: 340px; }
}
@media (max-width: 359px) {
  .kt7__map { height: 300px; }
  /* Kontakt, Bewertungsblock: Foto 96 statt 120 px, damit Name und Rolle daneben Platz haben */
  .kt7__bq .bw7__foto { width: 96px; }
}