/* ============================================================
   ANZOROV Digital — gemeinsames Stylesheet aller Seiten
   Designsystem: EINE Schriftfamilie (Instrument Sans, variabel 400–600).
   Hierarchie über Gewicht/Größe, Labels als Versalien mit Laufweite.
   Reines Weiß, Hairlines, Index-Nummern, Editorial-Weißraum.
   ============================================================ */

/* Logo-Schrift — ausschließlich für das „AD" im Header-Siegel (Logo-Glyphe),
   NICHT für Fließtext/Labels. Bewusst hier statt in fonts.css: Cache-Busting (?v=). */
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin.woff2) format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #ffffff;
  --panel: #ffffff;          /* Karten bleiben rein weiß — sie heben sich von --bg-soft ab */
  --bg-soft: #f7f7f7;        /* Sektions-Rhythmus: rein neutrales Grau — NIE warme/beige Töne */
  --fg: #0a0a0a;
  --muted: #6e6e73;
  --faint: #5f5f66;          /* Label-Grau — AA mit Reserve, auch auf --bg-soft */
  --numeral: #dcdce0;        /* helle Editorial-Indexziffern */
  --line: rgba(10, 10, 10, 0.09);
  --line-strong: rgba(10, 10, 10, 0.16);
  --invert-bg: #0a0a0a;
  --invert-fg: #ffffff;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  /* Eine Stimme: Display und Labels laufen über dieselbe Familie */
  --font-display: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --container: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  letter-spacing: -0.012em;
  line-height: 1.65;
  overflow-x: hidden;
}
::selection { background: var(--fg); color: var(--bg); }
/* Variable Font endet bei 600 — kein synthetisches Fett */
b, strong { font-weight: 600; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
/* Dunkle Sektionen: heller Fokusring, sonst schwarz auf schwarz unsichtbar */
.cta-band :focus-visible { outline-color: var(--invert-fg); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--fg); color: var(--bg); font-size: 0.85rem; padding: 0.7rem 1rem; border-radius: 0 0 0.5rem 0; text-decoration: none; }
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .container { padding: 0 3rem; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Editorial-Sektionskopf (Index-System = Signatur) ---------- */
.sec-head { display: grid; gap: 1.25rem 2.5rem; margin-bottom: 3.5rem; }
@media (min-width: 860px) { .sec-head { grid-template-columns: 5.5rem 1fr; align-items: start; margin-bottom: 4.5rem; } }
.sec-no {
  font-family: var(--font-mono); font-weight: 500; line-height: 1;
  font-size: 0.78rem; color: var(--faint); letter-spacing: 0.12em; padding-top: 0.3rem;
}
.kicker {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem;
}
.kicker::before { content: ''; width: 1.5rem; height: 1px; background: var(--line-strong); }
.kicker b { color: var(--fg); font-weight: 500; }

/* Alle Headings in Instrument Sans — eine Familie, Hierarchie über Gewicht/Größe */
.section-title { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.15; letter-spacing: -0.02em; }
.section-title .muted { color: inherit; } /* Zweiton-Headlines abgeschafft: eine Stimme, Hierarchie über Größe/Raum */
.section-lead { color: var(--muted); font-size: 1.1rem; line-height: 1.7; max-width: 36rem; margin-top: 1.5rem; }

.section-pad { padding: clamp(5rem, 9vw, 9rem) 0; }
.section-line { border-top: 1px solid var(--line); }
/* Sektions-Rhythmus: jede zweite Inhaltssektion liegt auf dezentem Off-White */
.section-alt { background: var(--bg-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; line-height: 1;
  height: 3.25rem; padding: 0 1.7rem; cursor: pointer; border: 1px solid transparent;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn svg { flex-shrink: 0; transition: transform 0.3s var(--ease); }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-outline:hover { color: var(--bg); border-color: var(--fg); transform: translateY(-2px); }
.btn-outline:hover svg { transform: translateX(3px); }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: default; pointer-events: none; transform: none; box-shadow: none; }

.text-link { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; font-weight: 500; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 0.2rem; transition: opacity 0.25s var(--ease), gap 0.25s var(--ease); }
.text-link:hover { opacity: 0.65; gap: 0.7rem; }

/* ---------- Header (schrumpft zur schwebenden Pille) ---------- */
header.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.nav-shell { max-width: var(--container); margin: 0 auto; padding: 0.9rem 1.5rem 0; transition: max-width 0.55s var(--ease), padding 0.55s var(--ease); }
@media (min-width: 1024px) { .nav-shell { padding: 1.1rem 3rem 0; } }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  height: 4.25rem; padding: 0 0.4rem; border: 1px solid transparent;
  transition: height 0.55s var(--ease), padding 0.55s var(--ease), background 0.55s var(--ease), border-color 0.55s var(--ease), border-radius 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
header.site-header.scrolled .nav-shell { max-width: 60rem; padding-top: 0.6rem; }
header.site-header.scrolled .nav {
  height: 3.5rem; padding: 0 0.6rem 0 1.1rem;
  background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-color: var(--line); border-radius: 999px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.07);
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--fg); }
.brand-mark { width: 2rem; height: 2rem; flex-shrink: 0; transition: transform 0.5s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-8deg); }
.brand-name { font-family: var(--font-sans); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.13em; line-height: 1; transition: font-size 0.5s var(--ease); }
.brand-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; overflow: hidden; white-space: nowrap; transition: opacity 0.4s var(--ease), max-width 0.4s var(--ease); }
header.site-header.scrolled .brand-name { font-size: 0.94rem; }
header.site-header.scrolled .brand-tag { opacity: 0; max-width: 0; padding: 0; }

.nav-links { display: none; align-items: center; gap: 2.5rem; }
header.site-header.scrolled .nav-links { gap: 1.9rem; }
.nav-links a { font-size: 0.9rem; color: var(--muted); text-decoration: none; position: relative; white-space: nowrap; transition: color 0.25s var(--ease); }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--fg); transition: width 0.3s var(--ease); }
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--fg); }
.nav-links a[aria-current="page"]::after { width: 100%; }

.nav-actions { display: none; align-items: center; gap: 1rem; }

.menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: none; cursor: pointer; color: var(--fg); padding: 0.4rem; }
.mobile-menu { position: fixed; inset: 0; height: 100dvh; min-height: 100svh; background: var(--bg); z-index: 95; padding: calc(5.9rem + env(safe-area-inset-top)) 1.75rem max(2.25rem, calc(2rem + env(safe-area-inset-bottom))); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
html.menu-open, body.menu-open { overflow: hidden; }
body.menu-open header.site-header { background: var(--bg); }
.mobile-menu a.m-link { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(1.4rem, 5.5vw, 1.7rem); text-decoration: none; color: var(--fg); padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.mobile-menu a.m-link:hover { color: var(--muted); }
.mobile-menu a.m-link[aria-current="page"] { color: var(--fg); }
.mobile-menu a.m-link[aria-current="page"]::before { content: ''; display: inline-block; width: 1.1rem; height: 2px; background: var(--fg); vertical-align: middle; margin-right: 0.7rem; }
.mobile-foot { margin-top: auto; display: flex; flex-direction: column; gap: 1.25rem; padding-top: clamp(2.5rem, 12vh, 6rem); }
.mobile-foot .btn { width: 100%; }
.mobile-menu a.btn-primary.m-link { min-height: 3.45rem; justify-content: center; border-bottom: 0; border-radius: 999px; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; line-height: 1; color: var(--bg); padding: 0 1.4rem; }
.mobile-menu a.btn-primary.m-link:hover { color: var(--bg); }
@media (min-width: 960px) { .nav-links, .nav-actions { display: flex; } .menu-toggle { display: none; } }

/* ---------- Hero (Startseite) ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 8rem 0 4rem; overflow: hidden; }
.hero-inner { display: grid; gap: 3rem; align-items: center; width: 100%; position: relative; z-index: 1; }
@media (min-width: 960px) { .hero-inner { grid-template-columns: 1.12fr 0.88fr; gap: 4.5rem; } }
.hero-eyebrow { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.9rem; }
.hero-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 5.8vw, 4.6rem); line-height: 1.03; letter-spacing: -0.035em; margin-bottom: 1.9rem; }
.hero-title em { font-style: normal; color: inherit; }
.nowrap { white-space: nowrap; }
.hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 36rem; line-height: 1.65; margin-bottom: 2.4rem; }
.hero-loc { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: -1.2rem 0 2.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero-foot { position: absolute; bottom: 1.9rem; left: 0; right: 0; }
.hero-foot .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero-foot span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.hero-foot .rule { flex: 1; height: 1px; background: var(--line); }

.hero-frame { position: absolute; top: 5.6rem; left: 1.5rem; right: 1.5rem; bottom: 1.6rem; pointer-events: none; z-index: 0; }
@media (min-width: 1024px) { .hero-frame { top: 6.4rem; left: 2rem; right: 2rem; bottom: 1.9rem; } }
.hero-frame span { position: absolute; width: 12px; height: 12px; }
.hero-frame .tl { top: 0; left: 0; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.hero-frame .tr { top: 0; right: 0; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }
.hero-frame .bl { bottom: 0; left: 0; border-bottom: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.hero-frame .br { bottom: 0; right: 0; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }
.hero-rail { display: none; }
@media (min-width: 1024px) { .hero-rail { display: block; position: absolute; left: 1.7rem; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--faint); z-index: 2; } }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.page-hero { padding: clamp(9rem, 16vw, 12rem) 0 clamp(3rem, 6vw, 4.5rem); }
.page-hero .kicker { margin-bottom: 1.5rem; }
.page-title { font-family: var(--font-sans); font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.03em; max-width: 24ch; }
.page-title em { font-style: normal; color: inherit; }
.page-lead { color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.7; max-width: 38rem; margin-top: 1.75rem; }
.page-hero .hero-actions { margin-top: 2.4rem; }

.breadcrumbs { margin-bottom: 2.25rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 0.6rem; }
.breadcrumbs li + li::before { content: '/'; color: var(--numeral); }
.breadcrumbs a { text-decoration: none; color: var(--muted); transition: color 0.25s var(--ease); }
.breadcrumbs a:hover { color: var(--fg); }
.breadcrumbs [aria-current="page"] { color: var(--fg); }

/* ---------- Positionierung / Zweispalter ---------- */
.position-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .position-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.position-body { color: var(--muted); font-size: 1.1rem; line-height: 1.72; max-width: 34rem; }
.position-points { list-style: none; margin-top: 2.5rem; }
.position-points li { padding: 1.4rem 0; border-top: 1px solid var(--line-strong); display: grid; gap: 0.35rem; }
.position-points li:last-child { border-bottom: 1px solid var(--line-strong); }
.position-points strong { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.position-points span { color: var(--muted); font-size: 0.95rem; }

/* ---------- Editorial-Listen (Leistungen/Kategorien) ---------- */
.svc-list { border-top: 1px solid var(--line-strong); }
a.svc-row { text-decoration: none; }
.svc-row {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.25rem 1.25rem; align-items: baseline;
  padding: 2.25rem 0.5rem 2.25rem 0; border-bottom: 1px solid var(--line); color: inherit;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease);
}
@media (min-width: 780px) { .svc-row { grid-template-columns: 4rem 1fr 2.5rem; padding: 2.75rem 0.5rem; } }
a.svc-row:hover { background: linear-gradient(90deg, rgba(10,10,10,0.02), transparent 60%); padding-left: 1rem; }
.svc-row .n { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--faint); }
.svc-row .svc-main { max-width: 56ch; }
.svc-row h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.015em; margin-bottom: 0.5rem; transition: transform 0.4s var(--ease); }
a.svc-row:hover h3 { transform: translateX(6px); }
.svc-row p { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.svc-row .arrow { display: none; color: var(--faint); transition: transform 0.4s var(--ease), color 0.4s var(--ease); align-self: center; }
@media (min-width: 780px) { .svc-row .arrow { display: block; } }
a.svc-row:hover .arrow { transform: translateX(6px); color: var(--fg); }
.svc-row .svc-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-left: 0.7rem; vertical-align: middle; }
/* Kompakte Variante für Kategorie-Listen */
.svc-list.compact .svc-row { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.svc-list.compact .svc-row h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 0.35rem; }
.svc-list.compact .svc-row p { font-size: 0.95rem; }

/* ---------- Merkmal-Raster (Websites-Sektion, "Was Sie bekommen") ---------- */
.mini-points { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
@media (min-width: 720px) { .mini-points { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.mini-points li { padding: 1.3rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.3rem; }
.mini-points strong { font-size: 1.02rem; font-weight: 500; letter-spacing: -0.01em; }
.mini-points span { color: var(--muted); font-size: 0.93rem; line-height: 1.55; }

/* ---------- Startseite: Zwei-Wege-Panels (Websites | Software) ---------- */
.pillar-grid { display: grid; gap: 0 4rem; }
@media (min-width: 880px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
.pillar { display: flex; flex-direction: column; gap: 1.15rem; padding: 2.4rem 0 2.6rem; border-top: 1px solid var(--line-strong); color: inherit; text-decoration: none; }
.pillar-tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); }
.pillar h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.025em; transition: transform 0.4s var(--ease); }
.pillar:hover h3 { transform: translateX(8px); }
.pillar p { color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 42ch; }
.pillar-list { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pillar .proj-cta { margin-top: 0.4rem; transition: gap 0.3s var(--ease); }
.pillar:hover .proj-cta { gap: 0.75rem; text-decoration: underline; text-underline-offset: 4px; }
.pillar-shot { margin-top: 1rem; }
.pillar-note { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }

/* ---------- Projekt-Meta & Karten-CTA (werden von Case-Teasern & Projektseiten genutzt) ---------- */
.proj-meta { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.proj-cta { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 500; color: var(--fg); transition: gap 0.3s var(--ease); }

/* ---------- Software-Katalog: Produktkarten ---------- */
.soft-grid { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .soft-grid { grid-template-columns: repeat(2, 1fr); } }
/* Offene Einträge statt Karten: gerahmt ist nur der Screenshot */
.soft-card { display: flex; flex-direction: column; gap: 0.85rem; padding: 2rem 0 2.25rem; border-top: 1px solid var(--line-strong); }
.soft-thumb { display: block; margin: 0 0 0.6rem; border: 1px solid var(--line-strong); border-radius: 1rem; overflow: hidden; background: var(--bg-soft); box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.18); }
.soft-thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.soft-card h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; }
.soft-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.soft-actions { margin-top: auto; padding-top: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.3rem; }

/* ---------- Zusammenarbeit (Startseite): offene horizontale Abfolge ----------
   Bewusst ohne Abschnittsnummer, Schrittzahlen, Karten oder Spaltenlinien —
   drei Stationen, verbunden durch dezente Pfeile. */
.flow-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.2rem; }
.flow-strip { display: grid; gap: 2rem; margin-top: 3rem; }
.flow-station h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.flow-station p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; max-width: 22rem; }
.flow-arrow { display: none; color: var(--line-strong); }
@media (min-width: 900px) {
  .flow-strip { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 2.5rem; align-items: start; margin-top: 3.75rem; }
  .flow-arrow { display: block; margin-top: 0.45rem; }
}
.flow-note { margin-top: 3.25rem; padding-top: 1.6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; line-height: 1.6; max-width: 46rem; }

/* Kompakter Preis-Teaser (Startseite) */
.section-pad-s { padding: clamp(3.75rem, 6.5vw, 6rem) 0; }
.sec-head-tight { margin-bottom: 0 !important; }

/* ---------- Ablauf-Seite: vertikale Schrittfolge ---------- */
.flow { list-style: none; border-top: 1px solid var(--line-strong); counter-reset: flow; }
/* Mobil: 2 Spalten (Nummer|Titel), Text volle Breite darunter — sonst rutscht das <p> per Auto-Placement in die 3.5rem-Nummernspalte (Ein-Wort-Zeilen) */
.flow > li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.6rem 1.25rem; padding: 2.1rem 0; border-bottom: 1px solid var(--line); }
.flow > li p { grid-column: 1 / -1; }
@media (min-width: 780px) { .flow > li { grid-template-columns: 5.5rem 16rem 1fr; gap: 2rem; } .flow > li p { grid-column: auto; } }
.flow .flow-no { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; line-height: 1; color: var(--faint); padding-top: 0.35rem; }
.flow h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
@media (min-width: 780px) { .flow h3 { margin-bottom: 0; } }
.flow p { color: var(--muted); font-size: 0.98rem; line-height: 1.65; max-width: 52ch; }
.flow .optional { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.6rem; margin-left: 0.6rem; vertical-align: middle; }

/* ---------- Panels & Hinweise ---------- */
/* Offene Editorial-Liste: Label + Hairlines statt Rahmen */
.work-panel { border-top: 1px solid var(--line-strong); padding: 1.6rem 0 0; position: relative; }
.work-panel-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.work-panel p { margin-top: 1rem; font-size: 1.05rem; line-height: 1.6; }
.work-panel ul { list-style: none; margin-top: 1.75rem; display: grid; gap: 0; }
.work-panel li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; align-items: baseline; font-size: 0.98rem; color: var(--muted); padding: 0.95rem 0; border-top: 1px solid var(--line); }
.work-panel li b { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg); }
/* Editorial-Aside statt Kasten */
.note-box { border-top: 1px solid var(--line-strong); padding: 1.4rem 0 0; font-size: 0.95rem; color: var(--muted); line-height: 1.65; max-width: 44rem; }
.note-box b, .note-box strong { color: var(--fg); font-weight: 500; }

/* ---------- Fließtext (Unterseiten) ---------- */
.prose { max-width: 44rem; }
.prose p { color: #26262a; font-size: 1.02rem; line-height: 1.75; margin-bottom: 1.2rem; }
.prose p.muted { color: var(--muted); }
.prose h2 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.55rem); letter-spacing: -0.01em; margin: 3rem 0 1.1rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: none; margin: 1.4rem 0 1.8rem; }
.prose ul li { position: relative; padding: 0.5rem 0 0.5rem 1.6rem; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 0.85rem; height: 1px; background: var(--fg); }
.prose ul li strong { color: var(--fg); font-weight: 500; }
.prose a { color: var(--fg); text-underline-offset: 3px; }

/* ---------- Fakten-/Modul-Listen ---------- */
.product-lead { color: var(--muted); font-size: 1.1rem; line-height: 1.72; max-width: 34rem; }
.product-facts { list-style: none; margin-top: 2rem; }
.product-facts li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; align-items: baseline; padding: 0.85rem 0; border-top: 1px solid var(--line); font-size: 0.98rem; color: var(--muted); }
.product-facts li:last-child { border-bottom: 1px solid var(--line); }
.product-facts b { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg); font-weight: 500; }
.product-facts strong { color: var(--fg); font-weight: 500; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 2.4rem; }
.product-grid { display: grid; gap: 3.25rem; margin-top: 2.25rem; }
@media (min-width: 1000px) { .product-grid { grid-template-columns: 0.92fr 1.08fr; gap: 4.5rem; align-items: center; } }

/* ---------- App-Rahmen & Screenshot-Galerie ---------- */
.app-preview { position: relative; }
.app-frame { border: 1px solid var(--line-strong); border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 34px 90px -34px rgba(0, 0, 0, 0.28), 0 10px 34px -20px rgba(0, 0, 0, 0.14); }
.app-titlebar { display: flex; align-items: center; gap: 0.4rem; height: 2.3rem; padding: 0 0.9rem; border-bottom: 1px solid var(--line); }
.app-titlebar i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--numeral); }
.app-url { margin-left: 0.65rem; display: inline-flex; align-items: center; justify-content: center; height: 1.2rem; padding: 0 0.75rem; border-radius: 999px; background: rgba(10, 10, 10, 0.045); font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; color: var(--faint); }
.app-static img { display: block; width: 100%; height: auto; transition: transform 0.9s var(--ease); }
.app-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* ---------- FAQ (native details/summary) ---------- */
.faq-list { border-top: 1px solid var(--line-strong); max-width: 46rem; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0.25rem 1.5rem 0; font-size: 1.08rem; font-weight: 500; letter-spacing: -0.01em; transition: color 0.25s var(--ease); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--muted); }
.faq-list summary::after { content: '+'; font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--faint); flex-shrink: 0; transition: transform 0.3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-a { padding: 0 2.5rem 1.6rem 0; color: var(--muted); font-size: 0.98rem; line-height: 1.7; max-width: 60ch; }
.faq-list .faq-a a { color: var(--fg); }

/* ---------- Kontakt & Formular ---------- */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.contact-text .section-title { margin-bottom: 1.4rem; }
.contact-text p.lead { color: var(--muted); font-size: 1.1rem; line-height: 1.7; max-width: 30rem; margin-bottom: 1.9rem; }
.contact-email { display: inline-block; font-family: var(--font-mono); font-size: 0.95rem; text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 0.25rem; transition: opacity 0.25s; }
.contact-email:hover { opacity: 0.6; }
/* Founder offen statt als Karte: Hairline oben, Portrait + Text */
.founder { display: flex; align-items: center; gap: 1.15rem; margin-top: 2.4rem; padding: 1.6rem 0 0; border-top: 1px solid var(--line-strong); max-width: 27rem; }
/* Sehr schmale Geräte: Avatar über dem Text, sonst wird die Textspalte neben dem Avatar zu eng */
@media (max-width: 359px) { .founder { flex-direction: column; align-items: flex-start; gap: 0.9rem; } }
.founder-avatar-wrap { position: relative; flex-shrink: 0; }
.founder-avatar { width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover; object-position: center 15%; box-shadow: 0 0 0 1px var(--line); }
.founder-info .label { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.4rem; }
.founder-info p { font-size: 0.925rem; line-height: 1.55; color: var(--muted); }
.founder-info strong { color: var(--fg); font-weight: 500; }

.form { border: 1px solid var(--line); border-radius: 1.25rem; padding: 2rem; background: var(--bg); }
@media (min-width: 600px) { .form { padding: 2.5rem; } }
.form-row { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.55rem; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.field input, .field select, .field textarea { width: 100%; padding: 0.9rem 1rem; border: 1px solid var(--line-strong); border-radius: 0.7rem; background: var(--bg); font-family: var(--font-sans); font-size: 0.95rem; color: var(--fg); outline: none; transition: border-color 0.25s, box-shadow 0.25s; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.field textarea { min-height: 120px; resize: vertical; }
.form-privacy { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: 0.25rem 0 1.25rem; }
.form-privacy a { color: var(--fg); }
.form-success { display: none; margin-top: 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 0.7rem; background: var(--panel); font-size: 0.9rem; line-height: 1.5; }
.form-success.show { display: block; }

/* ---------- CTA-Band (Seitenabschluss, dunkel) ---------- */
.cta-band { background: var(--invert-bg); color: var(--invert-fg); padding: clamp(4.5rem, 8vw, 7rem) 0; }
.cta-band-inner { display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 900px) { .cta-band-inner { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; } }
.cta-band h2 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.7rem, 3.1vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; }
.cta-band h2 em { font-style: normal; color: inherit; }
.cta-band p { color: rgba(255,255,255,0.55); font-size: 1.02rem; line-height: 1.65; margin-top: 1.1rem; max-width: 34rem; }
/* Button + E-Mail als fester Stapel: E-Mail mittig unterm Button, ab 900px als Einheit rechts verankert (kein unkontrollierter flex-wrap-Versatz) */
.cta-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; }
@media (min-width: 900px) { .cta-band-actions { align-items: center; justify-self: end; } }
.cta-band .btn-primary { background: #fff; color: var(--fg); }
.cta-band .btn-primary:hover { box-shadow: 0 12px 30px rgba(255, 255, 255, 0.16); }
.cta-band .contact-email { color: #fff; border-bottom-color: rgba(255,255,255,0.35); }

/* ---------- Footer ---------- */
footer.site-footer { border-top: 1px solid var(--line); padding: 4rem 0 2.5rem; }
.footer-grid { display: grid; gap: 2.75rem; padding-bottom: 3rem; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.5fr 1fr 0.9fr 0.7fr; gap: 3rem; } }
.footer-brand { font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.13em; text-transform: uppercase; }
.footer-about p { color: var(--muted); font-size: 0.92rem; line-height: 1.65; max-width: 24rem; margin: 1rem 0 1.4rem; }
.footer-head { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.1rem; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col a { position: relative; font-size: 0.9rem; color: var(--muted); text-decoration: none; padding: 0.32rem 0; transition: color 0.25s; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.footer-copy { font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); }

/* ---------- Kleine Bildschirme / Detailanpassungen ---------- */
@media (max-height: 640px) {
  .hero-foot { display: none; }
  .mobile-menu { padding-top: 4rem; padding-bottom: 0.75rem; }
  .mobile-menu a.m-link { font-size: 1.48rem; padding: 0.18rem 0; }
  .mobile-foot { gap: 0.7rem; padding-top: 0.85rem; }
  .mobile-menu a.btn-primary.m-link { min-height: 3.1rem; }
}
@media (max-width: 420px) {
  /* Schmale Geräte: Caption-Zeilen dürfen umbrechen, sonst 320-px-Overflow */
  .app-caption .nowrap { white-space: normal; }
  /* Lange Komposita (z. B. „Reinigungsbetriebe") sauber trennen statt überlaufen */
  .page-title, .section-title, .hero-title { hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 380px) {
  .nav-shell { padding-left: 1rem; padding-right: 1rem; }
  .brand-name { font-size: 1.2rem; }
  .brand-tag { display: none; }
  .mobile-menu { padding-left: 1.25rem; padding-right: 1.25rem; }
  .mobile-menu a.m-link { font-size: clamp(1.9rem, 12vw, 2.4rem); }
  .mobile-menu a.btn-primary.m-link { font-size: 0.9rem; }
}

/* ---------- Legal-Seiten (Impressum/Datenschutz) — ruhig, funktional, lesbar ---------- */
.legal-head { padding: clamp(7.5rem, 13vw, 10rem) 0 0; }
.legal-head .kicker { margin-bottom: 1rem; }
.legal-title { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; }
.legal-sub { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-top: 0.9rem; }
.legal-body { max-width: 50rem; padding: 2.25rem 0 5.5rem; }
.legal-body h2 { font-family: var(--font-sans); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; margin: 2.4rem 0 0.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.legal-body h2:first-child { margin-top: 0.75rem; border-top: none; padding-top: 0; }
.legal-body p { color: #26262a; font-size: 1rem; line-height: 1.75; margin-bottom: 0.9rem; max-width: 46rem; }
.legal-body a { color: var(--fg); text-underline-offset: 3px; }
.legal-body .stand { color: var(--muted); font-size: 0.85rem; margin-top: 2.5rem; }

/* ============================================================
   Premium-Motion-Layer: Tiefe, Staffelung, Signaturen
   (alles transform/opacity — vom Reduced-Motion-Killswitch erfasst)
   ============================================================ */

/* Hero: Filmkorn */
.hero::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Buttons: edlere Hover-Zustände */
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16), 0 0 0 3px rgba(10, 10, 10, 0.05); }
.btn-outline { background-image: linear-gradient(var(--fg), var(--fg)); background-size: 0% 100%; background-repeat: no-repeat; background-position: left center; transition: background-size 0.45s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.btn-outline:hover { background-size: 100% 100%; }

/* Blur-in auf Titeln bewusst entfernt (Nutzer-Feedback: unangenehm beim Seitenwechsel) — Titel nutzen den normalen Reveal */

/* Gestaffeltes Erscheinen von Listenkindern */
.mini-points.reveal li, .position-points.reveal li, .product-facts.reveal li, .faq-list.reveal details, .chain.reveal > *, .flow-strip.reveal > * {
  opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.mini-points.reveal.visible li, .position-points.reveal.visible li, .product-facts.reveal.visible li, .faq-list.reveal.visible details, .chain.reveal.visible > *, .flow-strip.reveal.visible > * {
  opacity: 1; transform: none;
}
.mini-points.reveal.visible li:nth-child(2), .position-points.reveal.visible li:nth-child(2), .product-facts.reveal.visible li:nth-child(2), .faq-list.reveal.visible details:nth-child(2) { transition-delay: 0.08s; }
.mini-points.reveal.visible li:nth-child(3), .position-points.reveal.visible li:nth-child(3), .product-facts.reveal.visible li:nth-child(3), .faq-list.reveal.visible details:nth-child(3) { transition-delay: 0.16s; }
.mini-points.reveal.visible li:nth-child(4), .product-facts.reveal.visible li:nth-child(4), .faq-list.reveal.visible details:nth-child(4) { transition-delay: 0.24s; }
.mini-points.reveal.visible li:nth-child(5), .product-facts.reveal.visible li:nth-child(5) { transition-delay: 0.32s; }
.mini-points.reveal.visible li:nth-child(6), .product-facts.reveal.visible li:nth-child(6) { transition-delay: 0.4s; }
.mini-points.reveal.visible li:nth-child(7), .product-facts.reveal.visible li:nth-child(7) { transition-delay: 0.48s; }
.product-facts.reveal.visible li:nth-child(8) { transition-delay: 0.56s; }
.chain.reveal.visible > *:nth-child(2), .flow-strip.reveal.visible > *:nth-child(2) { transition-delay: 0.07s; }
.chain.reveal.visible > *:nth-child(3), .flow-strip.reveal.visible > *:nth-child(3) { transition-delay: 0.14s; }
.chain.reveal.visible > *:nth-child(4), .flow-strip.reveal.visible > *:nth-child(4) { transition-delay: 0.21s; }
.chain.reveal.visible > *:nth-child(5), .flow-strip.reveal.visible > *:nth-child(5) { transition-delay: 0.28s; }
.chain.reveal.visible > *:nth-child(6) { transition-delay: 0.35s; }
.chain.reveal.visible > *:nth-child(7) { transition-delay: 0.42s; }
.chain.reveal.visible > *:nth-child(8) { transition-delay: 0.49s; }
.chain.reveal.visible > *:nth-child(9) { transition-delay: 0.56s; }
.pillar.reveal:nth-child(2), .case-card.reveal:nth-child(2) { transition-delay: 0.12s; }
.case-card.reveal:nth-child(3) { transition-delay: 0.24s; }

/* Ablauf-Kette (Signatur für CRM & Portale): Begriff → Begriff → Begriff */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.55rem; margin: 0.5rem 0 2.75rem; }
.chain span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.55rem 0.95rem; background: var(--bg); white-space: nowrap; }
.chain i { flex: 0 0 1.3rem; height: 1px; background: var(--line-strong); position: relative; }
.chain i::after { content: ''; position: absolute; right: -1px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); opacity: 0.4; }

/* Tiefen-Stapel + dezenter 3D-Tilt (Signatur für Dashboards) */
.depth-stack { position: relative; }
.depth-stack::before, .depth-stack::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 1rem; background: var(--bg); z-index: -1; }
.depth-stack::before { transform: translate(10px, 10px); opacity: 0.75; }
.depth-stack::after { transform: translate(20px, 20px); opacity: 0.4; }
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform 0.35s var(--ease); }

/* Footer-Links: wachsende Unterstreichung wie in der Hauptnavigation */
.footer-col a { width: fit-content; }
.footer-col a::after { content: ''; display: block; width: 0; height: 1px; background: var(--fg); transition: width 0.3s var(--ease); }
.footer-col a:hover::after { width: 100%; }

/* Kontakt: scanbare Meta-Zeile */
.contact-meta { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1.6rem; max-width: 27rem; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  /* Auch die gestaffelten Kind-Elemente (li/details) einblenden — sie sind
     einzeln ausgeblendet, nicht der .reveal-Container selbst. */
  .reveal, .mini-points.reveal li, .position-points.reveal li, .product-facts.reveal li,
  .faq-list.reveal details, .chain.reveal > *, .flow-strip.reveal > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Preise: Modelle & Pakete ---------- */

.pkg-grid { display: grid; gap: 1.5rem; margin-top: 3.5rem; }
@media (min-width: 980px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.pkg-card { border: 1px solid var(--line-strong); border-radius: 1.25rem; padding: 2.4rem 2.2rem; background: var(--panel); box-shadow: 0 1px 3px rgba(10, 10, 10, 0.04); display: flex; flex-direction: column; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); }
a.pkg-card { text-decoration: none; color: inherit; }
.pkg-card:hover { transform: translateY(-4px); border-color: var(--fg); box-shadow: 0 18px 44px rgba(10, 10, 10, 0.08); }
.pkg-card.featured { border-color: var(--fg); position: relative; }
/* Schwebender Empfehlungs-Badge mittig auf der Oberkante der hervorgehobenen Karte */
.pkg-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--fg); color: var(--bg); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.45rem 1rem; border-radius: 999px; white-space: nowrap; }
.pkg-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); }
.pkg-card h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.65rem; letter-spacing: -0.015em; margin-top: 0.7rem; }
.pkg-for { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin-top: 0.45rem; }
.pkg-price { display: block; margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--line); font-family: var(--font-sans); font-weight: 600; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; }
/* Zentrierter Preisblock: Monatspreis = größtes Element der Karte */
.pkg-price-block { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 1.5rem; padding: 1.5rem 0 1.6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pkg-price-block .pkg-price { margin: 0; padding: 0; border: none; font-size: 3.1rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.pkg-per { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); }
.pkg-setup-block { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; margin-top: 1.35rem; }
.pkg-setup-label { font-size: 0.78rem; color: var(--muted); }
.pkg-setup-price { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
/* Einrichtungsgebühr: sekundäres Badge */

/* Top-Leistungen: Häkchen-Kurzlabels (Detailliste behält Gedankenstriche) */
.pkg-list.pkg-top { margin-top: 1.4rem; }
.pkg-list.pkg-top li { padding: 0.34rem 0 0.34rem 1.5rem; color: var(--fg); font-size: 0.95rem; }
.pkg-list.pkg-top li::before { content: '✓'; color: var(--fg); font-weight: 600; }
/* Einklappbare Zusatz-Leistungen */
.pkg-more { margin-top: 0.75rem; }
.pkg-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 500; color: var(--muted); padding: 0.35rem 0; transition: color 0.25s var(--ease); }
.pkg-more summary::-webkit-details-marker { display: none; }
.pkg-more summary::after { content: '+'; font-size: 1rem; line-height: 1; }
.pkg-more[open] summary::after { content: '−'; }
.pkg-more summary:hover { color: var(--fg); }
.pkg-more .pkg-list { margin-top: 0.5rem; }
.pkg-price .per { font-family: var(--font-sans); font-size: 0.88rem; color: var(--muted); letter-spacing: 0; }
.pkg-price-note { display: block; font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0; color: var(--faint); margin-top: 0.5rem; }
.pkg-list { list-style: none; margin-top: 0.4rem; }
.pkg-list li { font-size: 0.92rem; color: var(--muted); line-height: 1.5; padding: 0.3rem 0 0.3rem 1.15rem; position: relative; }
.pkg-list li::before { content: '—'; position: absolute; left: 0; color: var(--numeral); }
.pkg-cta { margin-top: auto; padding-top: 1.7rem; }
.pkg-cta .btn { width: 100%; }
/* Kompakte Paket-Teaser (Startseite): Karte ohne Preis/Listen */
.pkg-card .proj-cta { margin-top: 1.4rem; }

/* ---------- Preisliste: Einmalprojekte (klare Zeilen, Preis rechts) ---------- */
/* Offene Zeilen statt Kasten */
.price-list { border-top: 1px solid var(--line-strong); }
.price-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.5rem; padding: 1.7rem 0.5rem 1.7rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background 0.25s var(--ease), padding 0.25s var(--ease); }
a.price-row:hover { background: linear-gradient(90deg, rgba(10, 10, 10, 0.02), transparent 60%); padding-left: 1rem; }
.price-main h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; }
.price-main p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin-top: 0.25rem; max-width: 52ch; }
.price-row .price { font-family: var(--font-sans); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.015em; white-space: nowrap; }
.price-row .arrow { color: var(--faint); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
a.price-row:hover .arrow { transform: translateX(4px); color: var(--fg); }
@media (max-width: 640px) { .price-row { grid-template-columns: 1fr auto; } .price-row .arrow { display: none; } .price-row .price { font-size: 1.2rem; } }

/* ---------- Typo-Rebalance: kompakte Komponenten-Titel ---------- */
.pkg-card h3 { font-size: 1.28rem; }
.svc-row h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.svc-list.compact .svc-row h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
.flow h3 { font-size: 1.1rem; }

/* ============================================================
   Showcase-Bausteine: zeigen statt erklären
   Phone-Frame, Geräte-Duo, Case-Teaser, Zickzack, Beweis-CTA
   (gleiche Hairlines, Radien und Schatten wie App-Frame/Karten)
   ============================================================ */

/* ---------- Phone-Frame (Ergänzung zum Browser-/App-Frame) ---------- */
.phone-frame { position: relative; border: 1px solid var(--line-strong); border-radius: 1.7rem; background: #fff; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.30), 0 8px 26px -18px rgba(0, 0, 0, 0.16); }
.phone-frame::before { content: ''; position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%); width: 32%; height: 4px; border-radius: 999px; background: rgba(10, 10, 10, 0.12); z-index: 2; }
.phone-frame img { display: block; width: 100%; height: auto; }

/* ---------- Geräte-Duo: Browser-Frame + schwebendes Phone ---------- */
.device-duo { position: relative; }
.device-duo .app-frame { position: relative; z-index: 1; }
.device-duo .phone-frame { position: absolute; z-index: 2; width: clamp(6.5rem, 22%, 9rem); right: -0.75rem; bottom: -2rem; }
.device-duo.duo-pad { padding-bottom: 2.75rem; padding-right: 0.75rem; }
@media (max-width: 479px) { .device-duo .phone-frame { width: 6rem; right: -0.25rem; } }

/* Hero-Showcase: ersetzt die Monogramm-Spalte, gleiche Grid-Position */
.hero-visual { width: 100%; }
@media (min-width: 960px) { .hero-visual { justify-self: end; } }
.hero-visual .app-caption { margin-top: 1.7rem; }
/* Grid-Blowout-Schutz: intrinsisch breite Screenshots dürfen Spuren nicht aufblasen */
.hero-inner > *, .case-grid > *, .product-grid > *, .pillar-grid > *, .contact-grid > *, .position-grid > * { min-width: 0; }

/* ---------- Projekt-Showcases: großformatige Referenz-Präsentation ----------
   Bühne mit steuerbarem Ton (--stage): trägt helle, dunkle und farbige
   Kundenprojekte gleichermaßen. Geräte stehen bodenbündig auf der Bühne. */
.showcase { display: block; color: inherit; text-decoration: none; }
.showcase + .showcase { margin-top: clamp(4rem, 8vw, 6.5rem); }
.showcase-stage { --stage: var(--bg-soft); position: relative; background: var(--stage); border-radius: 1.5rem; padding: clamp(2.5rem, 6vw, 4.75rem) clamp(1.25rem, 6vw, 5rem) clamp(2rem, 5vw, 3.75rem); overflow: hidden; }
/* Bühnenton als Klasse statt style-Attribut — die CSP verbietet Inline-Styles (style-src-attr 'none') */
.showcase-stage.stage-white { --stage: #ffffff; }

/* ---------- Geräte-Mockups: iMac · MacBook · Tablet · genau ein Smartphone ----------
   Eigene, reduzierte Silhouetten (keine Foto-Mockups): dunkle Bezels, damit helle,
   dunkle und farbige Projekt-Screens gleichermaßen wirken. Alle Geräte stehen auf
   einer gemeinsamen Grundlinie; alle zeigen dasselbe Projekt. */
.dev { position: relative; }
.dev .screen { position: relative; overflow: hidden; background: #fff; }
.dev .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* iMac / Monitor: Display + Kinn + Standfuß */
.dev-imac .head { background: #131316; border-radius: 0.8rem 0.8rem 0 0; padding: 1.6%; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.35); }
.dev-imac .screen { aspect-ratio: 16 / 9; border-radius: 0.35rem; }
.dev-imac .chin { height: clamp(1.4rem, 4vw, 2.4rem); background: linear-gradient(#f2f2f4, #e2e2e6); border-radius: 0 0 0.55rem 0.55rem; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.35); }
.dev-imac .stand { width: 11%; height: clamp(1.2rem, 3.2vw, 2rem); margin: 0 auto; background: linear-gradient(#e2e2e6, #c8c8cf); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.dev-imac .base { width: 24%; height: 0.4rem; margin: 0 auto; background: #cfcfd5; border-radius: 0.35rem 0.35rem 0 0; }

/* MacBook: Deckel + Tastatur-Basis */
.dev-macbook .lid { background: #131316; border-radius: 0.65rem 0.65rem 0 0; padding: 2.4% 2.4% 0; box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.35); }
.dev-macbook .screen { aspect-ratio: 16 / 10; border-radius: 0.3rem 0.3rem 0 0; }
.dev-macbook .deck { position: relative; width: 112%; margin-left: -6%; height: clamp(0.55rem, 1.6vw, 0.95rem); background: linear-gradient(#ececef, #cdcdd4); border-radius: 0 0 0.9rem 0.9rem; }
.dev-macbook .deck::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 13%; height: 46%; background: #c2c2c9; border-radius: 0 0 0.5rem 0.5rem; }

/* Tablet — Querformat, deutlich breiter als das Smartphone */
.dev-tablet .frame { background: #131316; border-radius: clamp(0.9rem, 2vw, 1.3rem); padding: 3.2%; box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.32); }
.dev-tablet .screen { aspect-ratio: 4 / 3; border-radius: 0.35rem; }

/* Smartphone */
.dev-phone .frame { position: relative; background: #131316; border-radius: clamp(1.1rem, 2.4vw, 1.6rem); padding: 4.5% 4%; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.38); }
.dev-phone .frame::before { content: ''; position: absolute; top: 2.4%; left: 50%; transform: translateX(-50%); width: 32%; height: 1.4%; min-height: 3px; background: #2c2c31; border-radius: 999px; z-index: 2; }
.dev-phone .screen { aspect-ratio: 9 / 19; border-radius: clamp(0.65rem, 1.6vw, 1.05rem); }

/* Szene — EIN Standard für alle vollständigen Showcases (§ Referenzen):
   iMac zentral im Hintergrund · MacBook vorne rechts · Tablet quer vorne links ·
   genau ein Smartphone vor dem Tablet. Pro Projekt ändern sich nur Display-Inhalte
   und Bühnenton (--stage). Einzige Ausnahme: der reduzierte Hero (.scene-hero). */
.device-scene { position: relative; max-width: 52rem; margin: 0 auto; }
.device-scene .dev-imac { position: relative; z-index: 1; width: min(100%, 33rem); margin: 0 auto; }
.device-scene .dev-macbook { position: absolute; z-index: 3; right: -2%; bottom: 0; width: 45%; }
.device-scene .dev-tablet { position: absolute; z-index: 2; left: -2%; bottom: 0; width: 33%; }
.device-scene .dev-phone { position: absolute; z-index: 4; left: 23%; bottom: 0; width: 10.5%; min-width: 4.2rem; }
/* Hero-Anordnung: MacBook als Hauptgerät + genau ein Smartphone */
.device-scene.scene-hero .dev-macbook { position: relative; z-index: 1; right: auto; bottom: auto; width: min(100%, 30rem); margin: 0 auto; }
.device-scene.scene-hero .dev-phone { left: auto; right: -2%; width: 17%; }
/* Mobile: bewusst reduziert — Hauptgerät + genau ein Smartphone */
@media (max-width: 640px) {
  .device-scene .dev-tablet, .device-scene .dev-macbook { display: none; }
  .device-scene .dev-phone { width: 24%; left: auto; right: 0; }
  .device-scene.scene-hero .dev-macbook { display: block; }
}
a.showcase .device-scene { transition: transform 0.7s var(--ease); }
a.showcase:hover .device-scene { transform: translateY(-4px); }

/* Capture-Modus (?capture=1): erzeugt Screenshot-Assets ohne Geräte-in-Geräten.
   Nur für die interne Asset-Erstellung — die öffentliche Seite bleibt unverändert. */
html.capture .hero-visual, html.capture .showcase, html.capture .hero-foot { display: none !important; }
html.capture .hero-inner { grid-template-columns: 1fr; }
.case-status { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 3; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.4rem 0.85rem; backdrop-filter: blur(6px); }
.showcase-body { display: grid; gap: 1rem 3.5rem; margin-top: 2.1rem; padding: 0 0.25rem; }
@media (min-width: 900px) { .showcase-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.showcase-body > * { min-width: 0; }
.case-tags { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.7rem; }
.showcase-body h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.1; }
.showcase-body p { color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 52ch; }
.showcase-body .proj-cta { margin-top: 1.1rem; }
a.showcase:hover .proj-cta { gap: 0.75rem; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Struktur-Skizze: ehrlicher Platzhalter für Projekte in Arbeit ---------- */
.wire { position: relative; aspect-ratio: 16 / 10; background: #fff; padding: clamp(1.4rem, 7%, 2.4rem) clamp(1.6rem, 9%, 2.9rem); display: grid; grid-template-rows: auto 1fr auto; row-gap: clamp(0.9rem, 6%, 1.6rem); }
.wire i, .wire b { display: block; }
.wire .w-nav { display: flex; align-items: center; gap: 4%; }
.wire .w-nav i { width: 12%; height: 0.4rem; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); }
.wire .w-nav i:first-child { width: 8%; height: 0.8rem; border-radius: 4px; background: var(--numeral); border: none; }
.wire .w-nav i:last-child { margin-left: auto; width: 16%; height: 0.9rem; border-radius: 999px; background: var(--fg); border: none; }
.wire .w-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 7%; align-items: center; }
.wire .w-copy { display: flex; flex-direction: column; gap: 0.5rem; }
.wire .w-copy i { height: 0.65rem; width: 90%; border-radius: 4px; background: var(--bg-soft); border: 1px solid var(--line); }
.wire .w-copy i:nth-child(2) { width: 64%; }
.wire .w-copy i:nth-child(3) { margin-top: 0.4rem; width: 42%; height: 1.15rem; border-radius: 999px; background: var(--fg); border: none; }
.wire .w-hero > b { align-self: stretch; min-height: 3.5rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-soft); }
.wire .w-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7%; }
.wire .w-row i { height: clamp(1.8rem, 4vw, 2.6rem); border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-soft); }

/* ---------- Link-Zeile: kompakte Detail-Verweise unter einer Sektion ---------- */
.link-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.65rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.link-row a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 0.15rem; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.link-row a:hover { color: var(--fg); border-color: var(--fg); }
.link-row .sep { color: var(--numeral); }

/* ---------- Zickzack: alternierender Text/Bild-Zweispalter ---------- */
@media (min-width: 1000px) { .product-grid.rev > :first-child { order: 2; } }

/* ---------- Beweis-CTA: Handlung direkt nach dem Höhepunkt ---------- */
.proof-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 2.5rem; padding-top: 1.9rem; border-top: 1px solid var(--line); }
.proof-cta p { color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 40rem; }
.proof-cta p strong { color: var(--fg); font-weight: 500; }

/* ---------- Modul-Gruppen: Zwischentitel + zentriertes Phone ---------- */
.module-title { font-family: var(--font-sans); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.015em; margin-bottom: 1rem; }
.phone-center { display: flex; justify-content: center; }
.phone-center .phone-frame { width: min(62vw, 15rem); }

/* ---------- Fakten-Zeile: wenige harte, prüfbare Werte ---------- */
.fact-row { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; margin-top: 2.75rem; padding-top: 1.9rem; border-top: 1px solid var(--line-strong); }
.fact-row .fact b { display: block; font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.025em; line-height: 1; }
.fact-row .fact span { display: block; margin-top: 0.55rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); }

/* ---------- A11y: 3:1-Kontrast für interaktive Grenzen (WCAG 1.4.11) ---------- */
.field input, .field select, .field textarea { border-color: rgba(10, 10, 10, 0.45); }
.btn-outline { border-color: rgba(10, 10, 10, 0.45); }
.shot-dots button::before { background: #8a8a8f; }

/* ---------- Utilities (bewusst am Dateiende: gewinnen bei gleicher Spezifität gegen Komponentenregeln) ---------- */
.u-minh-70 { min-height: 70svh; }
.u-pb-0 { padding-bottom: 0; }
.u-pt-0 { padding-top: 0; }
.u-pt-15 { padding-top: 1.5rem; }
.u-mt-15 { margin-top: 1.5rem; }
.u-mt-20 { margin-top: 2rem; }
.u-mt-24 { margin-top: 2.4rem; }
.u-mt-25 { margin-top: 2.5rem; }
.u-mt-275 { margin-top: 2.75rem; }
.u-mt-35 { margin-top: 3.5rem; }
.u-mb-15 { margin-bottom: 1.5rem; }
.u-border-0 { border: 0; }
.u-border-top-0 { border-top: 0; }
.u-p-0 { padding: 0; }
.u-maxw-none { max-width: none; }
.u-maxw-44 { max-width: 44rem; }
.u-maxw-46 { max-width: 46rem; }
.u-w-full { width: 100%; }
.u-meta-note { color: var(--muted); font-size: .85rem; margin-top: 2.5rem; }