/* TZ2 Livefassung /seo-agentur-basel (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, /leistungen-hero.css, /google-ads-hero.css, /google-ads.css, /lehrbuch.css, /seo-hero.css, /seo.css, /tracking.css, /seo-luzern-hero.css, /seo-luzern.css, /seo-zug-hero.css, /seo-stadt-hero.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; }
.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; }
.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; } }

/* /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-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; }

/* /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; } }

/* /seo-hero.css */
/* TZ2 /seo-agentur: drei Hero-Varianten (05.11.2026, Desktop). Baut auf google-ads-hero.css auf (gha, ghc).
   A Search Console im Split, B Zahlenkarte im Split. Echte Daten von thezone.ch. */

/* ---------- A: Search-Console-Ausschnitt rechts, gerahmt von der ruhigen Fläche ---------- */
.sha .gha__grid, .shb .gha__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sha .gha__h, .shb .gha__h { font-size: clamp(44px, 4vw, 58px); }
.sha__fig { margin: 0; }
.sha__panel { display: block; height: auto; padding: 36px; }
.sha__shot { display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 30px 70px rgba(2,10,24,.16), 0 0 0 1px rgba(2,10,24,.06); }
.sha__src { margin-top: 12px; font-size: .8125rem; line-height: 1.5; color: var(--mut); }

/* ---------- B: ruhige Zahlenkarte mit Tageslinie ---------- */
.shb__panel { display: flex; align-items: center; justify-content: center; height: 456px; padding: 40px; }
.shb__card { width: 100%; max-width: 460px; padding: 32px 32px 26px; border-radius: 24px; background: #fff; box-shadow: 0 30px 70px rgba(2,10,24,.12); }
.shb__k { font: 500 .75rem/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.shb__n { margin-top: 14px; font: 700 4rem/1 var(--f-display); letter-spacing: -0.035em; color: var(--ink); }
.shb__l { margin-top: 10px; font: 500 1.0625rem/1.4 var(--f-display); color: var(--ink); }
.shb__d { margin-top: 4px; color: var(--mut); }
.shb__chart { position: relative; height: 120px; margin-top: 26px; padding-bottom: 22px; }
.shb__spark { display: block; width: 100%; height: 100%; overflow: visible; }
.shb__m { position: absolute; bottom: 0; font-size: .75rem; color: var(--mut); }
.shb__now { position: absolute; top: -18px; transform: translateX(6px); font: 500 .6875rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.shb__src { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .75rem; line-height: 1.5; color: var(--mut); }

/* /seo.css */
/* TZ2 /seo-agentur (05.11.2026, Desktop). Baut auf google-ads.css, leistungen.css und lehrbuch.css auf, hier nur Eigenes. */

/* Belege: drei offene Karten mit Symbol (Google Search, Google Maps, Seitenstruktur) */
.se7__belege li { position: relative; padding: 28px; }
.se7__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: #fff; color: var(--orange-ink); }
.se7__ic svg, .se7__ic img { width: 22px; height: 22px; }
.se7__belege h3 { margin-top: 2px; font-size: 1.375rem; }
.se7__belege + .lx7__row { margin-top: 16px; }

/* Belege auf grauer Fläche: Karten weiss, Symbolkreis grau */
.lx6--grey .se7__belege li { background: #fff; }
.lx6--grey .se7__belege .se7__ic { background: var(--card); }

/* Werkzeug-Hinweis unter der Leiste in den Fragen */
.se7__toolnote { margin-top: 10px; color: var(--mut); font-size: .9375rem; line-height: 1.55; }

/* Lehrbuch-Grafik: die Formel hat vier Glieder, darum Formel und Erklärung untereinander */
#gefunden .lg7__rule { grid-template-columns: 1fr; gap: 14px; }
#gefunden .lg7__why { max-width: 72ch; }

/* Pain Points unter dem Satz (Blackbox-Thema, Jeremy 05.11.): ruhige Liste mit Linie, damit sie sich von den Ablauf-Karten abhebt */
.gpage .se7__pain { padding-bottom: 120px; }
.se7__pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; }
.se7__pains li { padding-top: 22px; border-top: 1.5px solid var(--line); }
/* Titel und Sätze bündig, auch wenn ein Titel umbricht (Subgrid, Hinweis aus der Prüf-Flotte /tracking-agentur 05.11.) */
.se7__pains { grid-template-rows: auto auto auto; row-gap: 0; }
.se7__pains li { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.se7__n { display: block; margin-bottom: 14px; font: 500 .75rem/1 var(--f-display); letter-spacing: .16em; color: var(--orange-ink); }
.se7__pains h3 { font: 500 1.375rem/1.3 var(--f-display); color: var(--ink); }
.se7__pains p { max-width: 34ch; margin-top: 8px; color: var(--mut); line-height: 1.6; }
@media (max-width: 1023px) { .se7__pains { grid-template-columns: 1fr; } }

/* /tracking.css */
/* TZ2 /tracking-agentur (05.11.2026, Desktop). Baut auf google-ads.css, leistungen.css, lehrbuch.css und seo.css auf, hier nur Eigenes. */

/* Belege: drei helle Case-Karten mit Logo und Zahl, Teile per Subgrid auf gleichen Zeilen (wie lc6, ohne Foto) */
.tr7__cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 0 16px; }
.tr7__case { display: grid; grid-row: span 7; grid-template-rows: subgrid; padding: 28px; border-radius: 28px; background: var(--card);
  color: var(--ink); text-decoration: none; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), opacity .7s var(--ease); }
.tr7__case:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tr7__logo { align-self: start; width: auto; height: 22px; }
.tr7__k { margin-top: 18px; font: 500 .75rem/1.5 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.tr7__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tr7__num { align-self: end; margin-top: 22px; font: 700 3rem/1 var(--f-display); letter-spacing: -0.04em; white-space: nowrap; }
.tr7__case .tr7__unit { margin: 8px 0 0; font: 500 1.0625rem/1.3 var(--f-display); letter-spacing: 0; color: var(--ink); }
.tr7__d { margin-top: 14px; color: var(--mut); font-size: .9375rem; line-height: 1.55; }
.tr7__m { margin-top: 12px; color: var(--mut); font-size: .8125rem; line-height: 1.5; }
.tr7__go { justify-self: start; margin-top: 20px; padding-bottom: 6px; border-bottom: 1.5px solid var(--orange); font: 700 .875rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }

/* Leistungsumfang: Kicker, Titel und Text per Subgrid auf gleichen Zeilen, auch wenn ein Kicker umbricht */
.tr7__umfang { grid-template-rows: auto auto 1fr; }
.tr7__umfang li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.tr7__umfang h3 { margin-top: 6px; font-size: 1.375rem; }

/* Pain Points: Nummer, Titel und Satz per Subgrid bündig, auch wenn ein Titel umbricht (Prüf-Flotte; Kandidat für seo.css) */
.se7__pain .se7__pains { grid-template-rows: auto auto auto; row-gap: 0; }
.se7__pain .se7__pains li { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

/* Weiterlesen: zwei Linkgruppen nebeneinander */
.tr7__lesegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tr7__lk { margin: 0 0 6px; }

/* Lehrbuch-Grafik: vier Glieder, Formel und Erklärung untereinander (wie SEO) */
#messweg .lg7__rule { grid-template-columns: 1fr; gap: 14px; }
#messweg .lg7__why { max-width: 72ch; }

/* Ablauf: fünf Live-Schritte in einer Reihe, kompakte Titel (DESIGNSYSTEM §4 Regel 3) */
.tr7__ablauf .pb6__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tr7__ablauf .pb6__list li { min-height: 300px; padding: 28px 26px; }
.tr7__ablauf .pb6__list h3 { min-height: 2.5em; font-size: 1.75rem; line-height: 1.2; }
.tr7__ablauf .pb6__n { top: 14px; right: 16px; font-size: 80px; }
.tr7__ablauf .pb6__list p { max-width: none; font-size: .9375rem; }

@media (max-width: 1023px) {
  .tr7__cases, .tr7__lesegrid, .tr7__ablauf .pb6__list { grid-template-columns: 1fr; }
  .tr7__case { grid-row: auto; grid-template-rows: none; }
}

/* /seo-luzern-hero.css */
/* TZ2 /seo-agentur-luzern, Hero-Varianten (06.11.2026, Desktop). Baut auf google-ads-hero.css (gha), seo-hero.css (shb)
   und website-hero.css (wsb) auf, hier nur Eigenes. Daten: research/daten/google-profil-thezone-2026-11-06.json. */

/* Sterne wie im Ortsblatt, grösser */
.lza__stars { position: relative; display: inline-block; font-size: 1.125rem; letter-spacing: 2px; line-height: 1; color: #dadce0; }
.lza__stars i { font-style: normal; }
.lza__stars i + i { position: absolute; left: 0; top: 0; width: var(--v); overflow: hidden; white-space: nowrap; color: #fbbc04; }

/* A: Ortsblatt im iPhone (unten angeschnitten wie die Screens der übrigen Heros), daneben die Rezensionen */
.lza__panel { justify-content: flex-start; padding: 44px 0 0 40px; }
.lza__phone { box-shadow: 0 30px 70px rgba(2, 10, 24, .16); }
/* Die Karte liegt unter der Kartenzuschreibung von Google im Screen, damit diese sichtbar bleibt (Prüf-Flotte 06.11.) */
.lza__card { position: absolute; z-index: 2; right: 22px; bottom: 22px; width: 196px; padding: 16px 18px 12px; border-radius: 24px; background: #fff;
  box-shadow: 0 30px 70px rgba(2, 10, 24, .14); }
.lza__card .shb__src { margin-top: 10px; padding-top: 8px; }
.lza__n { margin: 6px 0 2px; font: 700 2.25rem/1 var(--f-display); letter-spacing: -0.035em; color: var(--ink); }
.lza__l { margin-top: 2px; font: 500 .9375rem/1.4 var(--f-display); color: var(--ink); }
.lza__bars { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.lza__bars li { display: grid; grid-template-columns: 10px 1fr 18px; align-items: center; gap: 8px; font-size: .8125rem; line-height: 1; color: var(--mut); }
.lza__bars i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #fbbc04 var(--v), #eceff1 var(--v)); }
.lza__bars b { font-weight: 500; text-align: right; color: var(--ink); }

/* C: echte Karte als Fläche, Google-Logo unten links und Zuschreibung unten rechts wie auf der Karte, Ortskarte oben links */
.lzc__panel { padding: 0; }
.lzc__map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lzc__glogo { position: absolute; left: 14px; bottom: 10px; width: 64px; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.lzc__glogo svg { position: static; display: block; width: 100%; height: auto; margin: 0; }
.lzc__attr { position: absolute; right: 10px; bottom: 10px; padding: 2px 5px; border-radius: 2px; background: rgba(255, 255, 255, .8);
  font: 400 .6875rem/1.2 Roboto, Arial, sans-serif; color: #3c4043; }
.lzc__card { position: absolute; left: 24px; top: 24px; width: 292px; padding: 20px 22px 16px; border-radius: 24px; background: #fff;
  box-shadow: 0 30px 70px rgba(2, 10, 24, .16); }
.lzc__name { font: 500 1.25rem/1.3 var(--f-display); color: var(--ink); }
.lzc__rate { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.lzc__rate b { font: 700 1.125rem/1 var(--f-display); color: var(--ink); }
.lzc__rate > span:last-child { color: var(--mut); font-size: .875rem; }
.lzc__row { margin-top: 6px; color: var(--mut); font-size: .875rem; line-height: 1.5; }

/* /seo-luzern.css */
/* TZ2 /seo-agentur-luzern (06.11.2026, Desktop). Baut auf google-ads.css, leistungen.css, lehrbuch.css, seo.css und
   tracking.css (tr7__case) auf, hier nur Eigenes. */

/* Der Unterschied: zwei Wege nebeneinander, der Link darunter */
.lz7__wege { margin-top: 0; }
.lz7__more { margin-top: 28px; }

/* Ablauf mit den vier Live-Schritten */
.lz7__ablauf .pb6__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lz7__ablauf .pb6__list li { min-height: 300px; }
.lz7__ablauf .pb6__list p { max-width: none; }

/* Branchen in der Leiste: Kicker, Titel und Satz bündig, auch wenn ein Kicker umbricht */
.lz7__branchen .ga7__krit { grid-template-rows: auto auto 1fr; }
.lz7__branchen .ga7__krit li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }

/* Lehrbuch mit vier Gliedern: Formel über die ganze Breite, der Satz darunter (Befund der Webdesign-Luzern-Session 06.11.:
   daneben war er 94 px schmal und 307 px hoch) */
#drei-flaechen .lg7__rule { grid-template-columns: minmax(0, 1fr); }
#drei-flaechen .lg7__why { max-width: 72ch; }

@media (max-width: 1023px) {
  .lz7__ablauf .pb6__list { grid-template-columns: 1fr; }
}

/* /seo-zug-hero.css */
/* TZ2 /seo-agentur-zug, Hero-Varianten (06.11.2026, Desktop). Baut auf seo-luzern-hero.css (lza, lzc) auf, hier nur Eigenes.
   Route: Google Maps, Obergrundstrasse 44 bis Bahnhofplatz Zug, Abfahrt Mo 9.11.2026 10:00, Abruf 6.11.2026. */

/* B: Profilkarte schmaler, damit die Fahrzeit-Marke von Google rechts daneben frei bleibt */
.zgb .lzc__card { left: 20px; top: 20px; width: 248px; padding: 16px 18px 12px; }
.zgb .lzc__name { font-size: 1.0625rem; }
.zgb .lzc__row { margin-top: 4px; font-size: .8125rem; }
.zgb .lzc__card .shb__src { margin-top: 8px; padding-top: 8px; }

/* /seo-stadt-hero.css */
/* TZ2 /seo-agentur-zuerich, -basel, -bern, Hero (06.11.2026, Desktop). Baut auf seo-luzern-hero.css (lzc) und seo-zug-hero.css
   (zgb) auf. Bei Basel läuft die Route nach Nordwesten, darum steht die Profilkarte oben rechts. */
.zgb--rechts .lzc__card { left: auto; right: 20px; }

/* Zuschreibung wie in eingebetteten Google-Karten mit allen Datenlieferanten (die Ausschnitte zeigen deutsches Gebiet, darum
   GeoBasis-DE/BKG wie im Rohbild; Prüf-Flotte 06.11.). Als Leiste am unteren Rand mit dem Logo darin, damit kein Ortsname halb
   unter einer Box liegt (DESIGNSYSTEM §4 Regel 5). */
.zgs .lzc__attr { left: 0; right: 0; bottom: 0; height: 26px; padding: 0 18px 0 72px; border-radius: 0; background: rgba(255, 255, 255, .9);
  line-height: 26px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* eine Zeile, links Platz fürs Logo */
.zgs .lzc__glogo { left: 16px; bottom: 5px; z-index: 1; width: 44px; filter: 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; }
}