/* Schriften selbst ausgeliefert — keine Anfrage an fonts.googleapis.com.
   Plus Jakarta Sans liegt NICHT hier, sondern kommt per nginx-Alias aus
   modvio/platform/shared-ui/fonts/ (die eine Quelle der vio-Familie).
   Wer den Look aendert, aendert ihn dort — nicht mit einer Kopie hier. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/vio-fonts/plus-jakarta-sans.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* BARZIK STUDIO V1 — gemeinsame Basis der drei Seiten.
   Aus den .dc.html zusammengeführt; die Canvas-Bindings ({{ studioGrid }},
   <sc-if notMobile> …) sind hier zu Klassen + Media-Query geworden.
   Breakpoint 880px = das alte `window.innerWidth < 880`. */

:root {
  --accent: #F26522;          /* Flächen + Grafik (braucht nur 3:1) */
  --accent-ink: #C2410C;      /* Akzent ALS Text — 5,2:1 auf Weiß. #F26522 wäre 3,14:1 = Verstoß. */
  --accent-cta: #C74E13;      /* Fläche, die weißen Text trägt — 4,64:1. --accent wäre 3,15:1. */
  --accent2: #2E5CE6;
  --ink: #16181a;
  --muted: #5b6068;
  --line: #e4e5e7;
  --play: running;
  --grain-o: 0.05;
  /* EINE Familie, wie modvio: Hierarchie kommt aus Gewicht und Sperrung, nicht aus
     einer zweiten Schrift. Frueher Fraunces plus Archivo — genau der Mischeindruck,
     den der Kunde am 06.08.2026 gemeldet hat. --mono ist hier kein Schreibmaschinen-
     schnitt mehr, sondern die Rolle "gesperrtes Kleinlabel" (modvio macht es genauso). */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --it: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --nav-h: 84px;
}
@media (prefers-reduced-motion: reduce) { :root { --play: paused; --grain-o: 0; } }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
/* Die Erklärung zur Barrierefreiheit verspricht, „Bewegung reduzieren" zu achten.
   Bis zum 06.08.2026 galt das nur für Grain und die Kontakt-Rail — der weiche
   Bildlauf und der Textmarker-Wisch liefen weiter. Eine Zusage, die im Code nicht
   steht, ist keine. Der Marker bleibt sichtbar, er baut sich nur nicht mehr auf. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #EFEFEF; color: var(--ink); font-family: var(--font, "Archivo"), "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Sprungmarke — erstes fokussierbares Element der Seite. Ohne sie muss sich
   jemand mit Tastatur durch Navileiste und Kontakt-Rail arbeiten, bevor er im
   Inhalt ankommt. Die Seite wirbt mit BFSG; dann muss das auch stimmen. */
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 60;
  background: var(--ink); color: #ffffff; border-radius: 10px;
  padding: 11px 18px; font-size: 14px; font-weight: 600;
  transition: top 0.18s ease;
}
.skip:focus { top: 12px; color: #ffffff; }

@keyframes drift1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(8vw,6vh) scale(1.15); } }
@keyframes glowPulse { 0% { opacity: 0.42; transform: translateY(0) scale(1); } 100% { opacity: 0.62; transform: translateY(-3vh) scale(1.06); } }
@keyframes grainShift { 0% { transform: translate(0,0); } 50% { transform: translate(-3%,2%); } 100% { transform: translate(2%,-3%); } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ============================================================
   Claim-Mural — füllt die GANZE Heroflaeche, damit die Linse
   überall etwas zu enthüllen hat (nicht nur oben).
   ============================================================ */
/* ⚠️ Die Flaeche startet unsichtbar und wird erst gezeigt, wenn das Skript sie
   aufgebaut UND um die Copy herum freigestellt hat. Vorher stand im HTML der
   Rohzustand: 17 Zeilen in Desktop-Groesse, ohne Maske, quer durch die
   Ueberschrift. Genau den hat der Kunde am 06.08.2026 auf dem iPhone
   fotografiert — „sieht erst anders aus und wird dann gerendert". Der Umbau
   passierte spaet (nach `document.fonts.ready`), also war der Rohzustand lange
   zu sehen und las sich als lange Ladezeit.
   Ohne JavaScript bleibt die Flaeche weg. Das ist vertretbar: sie ist
   `aria-hidden`, rein dekorativ, und der Claim steht ohne sie vollstaendig da. */
.mural { opacity: 0; }
.mural.is-ready { opacity: 1; transition: opacity 0.28s ease; }
.mural {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-auto-rows: 1fr; align-items: center;
  padding: var(--nav-h) 0 0;
  box-sizing: border-box; pointer-events: none; overflow: hidden;
  /* Rechts auslaufen lassen: die harte Kante schnitt Wörter mitten durch
     („…zurlinde.at", „Ein Ansprechp…") und das las sich wie ein Darstellungs-
     fehler, nicht wie Textur. Die Maske am Container ist unabhängig von den
     Zeilen-Masken der Freistellung — die sitzen auf den <i>, nicht hier. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 74%, transparent 97%);
  mask-image: linear-gradient(to right, #000 0, #000 74%, transparent 97%);
}
.mural i {
  font-style: normal; white-space: nowrap; padding-left: 3.5vw;
  font-size: clamp(1.05rem, 1.9vw, 1.95rem);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; color: #1a1c1f;
}
/* Groesse und Startpunkt variieren, damit die Flaeche Textur bekommt
   und die Zeilenanfaenge nicht untereinander stehen. */
.mural i:nth-child(3n+1) { font-size: clamp(1.3rem, 2.5vw, 2.5rem); }
.mural i:nth-child(4n)   { font-size: clamp(0.95rem, 1.5vw, 1.55rem); }
.mural i:nth-child(2n)   { margin-left: -13%; }
.mural i:nth-child(3n)   { margin-left: -6%; }
.mural i:nth-child(5n)   { margin-left: -22%; }
.mural i:nth-child(7n)   { margin-left: -31%; }
.mural i.d { color: rgba(26,28,31,0.34); }
.mural i em { font-style: normal; color: var(--accent); }
.mural i b { font-weight: 500; color: color-mix(in oklab, var(--accent2) 80%, #16181a); }
.mural i u.t { text-decoration: none; display: inline; }
.mural i s { text-decoration: none; color: var(--accent); opacity: 0.5; margin: 0 0.5em; }
/* auf niedrigen Fenstern ausduennen, sonst klebt alles aufeinander */
@media (max-height: 860px) { .mural i.x2 { display: none; } }
@media (max-height: 680px) { .mural i.x1 { display: none; } }

/* Lichtabfall nach unten, damit die Headline ueber der Textflaeche scharf bleibt */
.scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 10; pointer-events: none;
  background: linear-gradient(to top, rgba(240,239,236,0.94) 0%, rgba(240,239,236,0.74) 42%, rgba(240,239,236,0) 100%);
}

/* Die Linse: unscharfe Milchglas-Schicht mit ausgestanztem Kreis. */
.lens {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(241,240,238,0.44);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  -webkit-mask-image: radial-gradient(circle var(--lr,230px) at var(--mx,58%) var(--my,40%), transparent 0%, transparent 32%, rgba(0,0,0,0.55) 62%, #000 82%);
  mask-image: radial-gradient(circle var(--lr,230px) at var(--mx,58%) var(--my,40%), transparent 0%, transparent 32%, rgba(0,0,0,0.55) 62%, #000 82%);
}
/* Der mitlaufende Punkt auf der Terminseite (Kundenwunsch 06.08.2026):
   ein weicher oranger Fleck, der dem Zeiger nachlaeuft. Er liegt IM unscharfen
   Hintergrund, also unter allem Text. Bewusst zurueckhaltend gemischt — eine
   kraeftigere Fuellung senkt den gemessenen Kontrast der grauen Fliesstexte
   darueber unter 4,5:1; das Gate misst seit 06.08. den echten Bildpunkt. */
.gdot {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: clamp(300px, 38vw, 540px); aspect-ratio: 1;
  transform: translate3d(calc(var(--gx, 50vw) - 50%), calc(var(--gy, 45vh) - 50%), 0);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 42%, #ffffff) 0%, rgba(255,255,255,0) 72%);
  filter: blur(56px); opacity: 0.34; will-change: transform;
}

.grain {
  position: absolute; inset: -10%; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-o); animation: grainShift 1.6s steps(3) infinite; animation-play-state: var(--play);
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  transition: background 0.35s, box-shadow 0.35s, border-color 0.35s;
  background: transparent; border-bottom: 1px solid transparent;
}
.nav__cta {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: var(--ink); color: #ffffff; border-radius: 999px;
  padding: 7px 7px 7px 20px; font-size: 13px; font-weight: 500;
}
.nav__in {
  max-width: 1440px; margin: 0 auto; box-sizing: border-box;
  padding: 0 clamp(20px, 3.5vw, 48px);
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: height 0.35s cubic-bezier(0.25,0.1,0.25,1);
}
.nav.is-stuck { background: rgba(246,245,243,0.86); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: rgba(22,24,26,0.09); }
/* ⚠️ `backdrop-filter` auf einer `position:fixed`-Leiste ist auf dem Handy die
   teuerste Einzelentscheidung dieser Seite: der Browser muss den Ausschnitt HINTER
   der Leiste in jedem Bildlauf-Bild neu weichzeichnen, und die Leiste ist ueber die
   volle Breite sichtbar, solange gescrollt wird. Auf dem Schreibtisch faellt das
   nicht auf, auf iOS ist es die bekannteste Ruckelquelle ueberhaupt.
   Unter 880 px deshalb kein Weichzeichner, sondern eine nahezu deckende Flaeche.
   Optisch ist der Unterschied auf einem 6-Zoll-Schirm kaum zu sehen — durch 0,86
   Alpha plus 16 px Unschaerfe kam ohnehin nur Farbmatsch. Der Sattigungs-Kniff
   entfaellt mit, er hing am selben Filter. */
@media (max-width: 879px) {
  .nav.is-stuck { background: rgba(246,245,243,0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Dieselbe Rechnung fuer die Namenspille ueber dem Portrait: sie liegt auf einem
     Bild, das beim Scrollen wandert — also wird auch sie in jedem Bild neu
     weichgezeichnet. `!important`, weil der Filter inline im HTML steht. */
  .pill-glas { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255,255,255,0.97) !important; }
}
.nav.is-stuck .nav__in { height: 60px; }

.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand img { width: 26px; height: 26px; display: block; }
.brand span { font-size: 19px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.brand span i { font-style: normal; color: var(--accent-ink); }   /* --accent misst auf #EFEFEF nur 2,74:1 */

.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nav__links a {
  position: relative; display: flex; align-items: baseline; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--ink); transition: color 0.25s;
}
.nav__links a span { font-family: var(--mono); font-size: 10px; color: #4a4f57; transition: color 0.25s; }
/* Dunkler als die uebrigen Kleinlabels: die Leiste ist im Scroll halbdurchsichtig
   (0,86) und laeuft ueber den schwarzen Abschnitt — dort misst der Untergrund
   nur noch rgb(214,213,212) und #666b73 faellt auf 3,66:1. Mit #4a4f57 sind es 5,67:1. */
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 1.5px; background: var(--accent); transition: right 0.3s ease;
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; }
.nav__links a[aria-current="page"] span { color: var(--ink); }   /* nicht --accent: 2,74:1 auf #EFEFEF; die Seite markiert der Unterstrich */

.nav__right { display: flex; align-items: center; gap: 18px; }

/* WhatsApp direkt in der Leiste (Kundenwunsch 06.08.2026: „da muss man ja direkt
   den Kunden hinführen"). Nur unter 880px — darüber trägt die Seiten-Rail (.srail)
   den Kontaktweg, und der Knopf „Erstgespräch buchen" steht ohnehin daneben.
   Auf dem Handy ist er der EINZIGE Kontaktweg, der ohne Menü-Umweg erreichbar ist.
   ⚠️ Der Glyph bleibt WEISS auf CI-Fläche, statt ihn orange einzufärben: die
   WhatsApp-Markenrichtlinie erlaubt genau diese Variante (weiße Marke auf eigener
   Farbe), das Umfärben der Marke selbst nicht. Sieht wie gewünscht nach unserem
   Orange aus und bleibt trotzdem auf einen Blick als WhatsApp erkennbar.
   `--accent-cta` statt `--accent`, weil hier Weiß darauf sitzt (4,64:1 statt 3,15:1). */
.nav__wa { display: none; }
@media (max-width: 879px) {
  .nav__wa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
    background: var(--accent-cta); color: #ffffff;
    box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 26%, transparent);
    transition: transform 0.15s;
  }
  .nav__wa:active { transform: scale(0.94); }
  .nav__wa svg { width: 22px; height: 22px; display: block; }
  .nav__right { gap: 12px; }
}
.nav__mail { display: none; }   /* Userentscheid 05.08.: gehoert nicht in die Leiste */
.nav__mail { font-size: 13.5px; color: var(--muted); transition: color 0.25s; }
.nav__mail:hover { color: var(--ink); }

/* Auf dem Desktop fuehrt die Leiste, der Schalter erscheint erst mobil */
[data-nav] .nav__trigger { display: none; }
.nav__trigger {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: none; border: none; padding: 8px 0; font-family: inherit;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.nav__trigger b { font-weight: 500; }
.nav__trigger u { text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.nav__trigger u::before, .nav__trigger u::after {
  content: ""; display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.3s;
}
.nav__trigger[aria-expanded="true"] u::before { transform: translateY(2.75px) rotate(45deg); }
.nav__trigger[aria-expanded="true"] u::after { transform: translateY(-2.75px) rotate(-45deg); }

/* Vollflaechen-Overlay (Variante B + Mobil) */
.ovl {
  position: fixed; inset: 0; z-index: 39; background: #F1F0EE;
  display: grid; grid-template-rows: var(--nav-h) 1fr;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s;
}
/* ⚠️ 0,4 s waren gemessen 363 ms bis zur vollen Deckkraft — auf dem Handy ist das
   Menue der EINZIGE Weg durch die Seite, und dort las sich die Blende als Haenger
   („wenn ich auf Menue klicke, dauert es zu lange", Kunde 06.08.2026).
   0,2 s ist schnell genug, um als Reaktion durchzugehen, und lang genug,
   um nicht zu blitzen. */
.ovl.open { opacity: 1; visibility: visible; }
.ovl__in {
  max-width: 1440px; width: 100%; margin: 0 auto; box-sizing: border-box;
  padding: clamp(24px, 5vh, 64px) clamp(20px, 3.5vw, 48px) clamp(32px, 6vh, 72px);
  display: grid; gap: clamp(32px, 5vw, 80px); align-content: space-between;
}
.ovl__nav { display: flex; flex-direction: column; }
.ovl__nav a {
  display: flex; align-items: baseline; gap: 16px; padding: clamp(10px, 1.6vh, 18px) 0;
  border-top: 1px solid rgba(22,24,26,0.12);
  font-size: clamp(2rem, 6vw, 4.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  transition: color 0.25s, padding-left 0.35s cubic-bezier(0.25,0.1,0.25,1);
}
.ovl__nav a:last-child { border-bottom: 1px solid rgba(22,24,26,0.12); }
.ovl__nav a span { font-family: var(--mono); font-size: 11px; color: #666b73; }
.ovl__nav a:hover { color: var(--accent); padding-left: 14px; }
.ovl__foot { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: flex-end; justify-content: space-between; }
.ovl__foot p { font-size: 12px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #666b73; margin-bottom: 8px; }
.ovl__foot a { font-size: clamp(15px, 1.6vw, 18px); font-weight: 500; }
.ovl__foot a:hover { color: var(--accent); }

/* ============================================================
   Buttons
   ============================================================ */
.rbtn { transition: filter 0.3s, box-shadow 0.3s, transform 0.15s; }
.rbtn:active { transform: scale(0.97); }
.rbtn:hover .ri { transform: translateY(-50%); }
.rbtn:hover .ra { transform: rotate(-45deg); }
.abtn { box-shadow: 0 8px 22px color-mix(in oklab, var(--accent) 26%, transparent); }
.abtn:hover { filter: brightness(0.94); box-shadow: 0 12px 32px color-mix(in oklab, var(--accent) 38%, transparent); }
.dbtn { box-shadow: 0 4px 14px rgba(22,24,26,0.18); }
.dbtn:hover { box-shadow: 0 8px 22px rgba(22,24,26,0.26); }

.xicon { transform: rotate(-45deg); transition: transform 0.3s ease-in-out; }
.mcard:hover .xbtn { width: 150px; }
.mcard:hover .xlabel { opacity: 1; transition-delay: 0.1s; }
.mcard:hover .xicon { transform: rotate(0deg); }
.mcard .mimg { height: 122%; transform: translateY(-11.5%); transition: transform 0.6s cubic-bezier(0.25,0.1,0.25,1); }
.mcard:hover .mimg { transform: translateY(-11.5%) scale(1.03); }

.navlink { position: relative; }
.navlink:hover { color: var(--ink) !important; }
.navlink::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1.5px; background: var(--accent); transition: right 0.3s ease; }
.navlink:hover::after { right: 0; }
.flink:hover { color: #ffffff !important; }

.lrow { transition: background 0.25s; }
.lrow:hover { background: #fafafa; }

/* ============================================================
   Arbeiten-Index — Liste statt Kachelraster, gleiche Sprache
   wie das Leistungsverzeichnis (Nummer · Hairline · Mono-Meta).
   ============================================================ */
.wx { display: flex; flex-direction: column; }
.wx__cat { display: grid; grid-template-columns: minmax(72px,120px) 1fr; gap: 20px; border-top: 1px solid var(--ink); padding: 28px 0 4px; margin-top: 32px; }
.wx__cat:first-child { margin-top: 0; }
.wx__num { font-family: var(--mono); font-size: 13px; color: #666b73; }
.wx__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 6px; }
.wx__head h3 { font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: 500; letter-spacing: -0.02em; }
.wx__head p { font-size: 14px; color: var(--muted); }

.wx__row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: center;
  border-top: 1px solid #ececee; padding: 16px 0;
  transition: background 0.25s, padding-left 0.3s cubic-bezier(0.25,0.1,0.25,1);
}
.wx__row:hover { background: #fafafa; padding-left: 10px; }
.wx__row h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.wx__row h4 svg { opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.25s; color: var(--accent); }
.wx__row:hover h4 svg { opacity: 1; transform: translateX(0); }
.wx__meta { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.wx__tag {
  justify-self: end; white-space: nowrap; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
}
.wx__tag.live { color: var(--accent-ink); border-color: color-mix(in oklab, var(--accent) 40%, #ffffff); background: color-mix(in oklab, var(--accent) 7%, #ffffff); }
@media (max-width: 640px) {
  .wx__cat { grid-template-columns: 1fr; gap: 8px; }
  .wx__row { grid-template-columns: 1fr; }
  .wx__tag { justify-self: start; }
}

/* Kontakt-Zeilen (Termin) — Label links, Wert rechts, wie die Studio-Fakten */
.cx { display: flex; flex-direction: column; max-width: 420px; margin-top: 28px; }
.cx > a, .cx > p {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid #dddedf; padding: 13px 0; font-size: 15px; font-weight: 600;
  transition: color 0.25s;
}
.cx > *:last-child { border-bottom: 1px solid #dddedf; }
.cx > a:hover { color: var(--accent-ink); }
.cx b { font-size: 14px; font-weight: 400; color: var(--muted); }

/* ============================================================
   Formular
   ============================================================ */
.chip { border: 1px solid #e0e1e3; background: #ffffff; border-radius: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; font-family: inherit; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, #ffffff); color: var(--accent-ink); }
input.tin, textarea.tin, select.tin { width: 100%; box-sizing: border-box; border: 1px solid #e0e1e3; border-radius: 12px; background: #ffffff; padding: 12px 14px; font-family: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color 0.2s; }
input.tin:focus, textarea.tin:focus, select.tin:focus { border-color: var(--accent); }
/* Chrome faerbt automatisch ausgefuellte Felder blau (#E8F0FE) und ignoriert dabei
   `background` — die Buchungskarte hatte dadurch drei blaue Kaesten zwischen lauter
   weissen (Kundenscreenshot 06.08.2026). Nur ein sehr grosser Innenschatten
   ueberdeckt die Fuellung; `-webkit-text-fill-color` holt die Schriftfarbe zurueck. */
input.tin:-webkit-autofill,
input.tin:-webkit-autofill:hover,
input.tin:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px #ffffff inset;
  box-shadow: 0 0 0 40px #ffffff inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;   /* Chromes Einblendung aussitzen */
}
/* Ein Auswahlfeld ohne eigenen Pfeil sieht auf Safari/iOS wie ein Textfeld aus.
   `appearance:none` + eigener Pfeil macht es auf allen Systemen gleich. */
select.tin {
  -webkit-appearance: none; appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6068' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px 15px;
}

/* ============================================================
   ehemalige Canvas-Bindings
   ============================================================ */
.g-studio, .g-kontakt, .g-page { grid-template-columns: 1fr; }
/* Fusszeile mobil — Kundenmeldung 06.08.2026 („Footer ist gequetscht und haesslich").
   `1fr 1fr` heisst `minmax(auto, 1fr)`: die Mindestbreite des Inhalts fuehrt, nicht
   die Haelfte. Gemessen bei 390 px waren daraus 187,7 px und 130,3 px geworden —
   die Telefonnummer stand ueber DREI Zeilen, „WhatsApp ↗" und „LinkedIn ↗" ueber zwei.
   Also zwei GLEICHE Spalten (`minmax(0, …)` deckelt die Mindestbreite auf 0) mit
   dem Markenblock ueber die volle Breite — dann fuehrt die Haelfte und nicht der
   laengste Absatz. Die Grenze bei 360 px ist gemessen, nicht gewaehlt: ab dort
   passt jede Beschriftung in eine Zeile, bei 320 px bricht „Erstgespraech buchen"
   auf zwei. Darunter also eine Spalte. Ersparnis bei 390 px: 981 → 709 px Hoehe. */
.g-footer { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 360px) and (max-width: 879px) {
  .g-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-footer > :first-child { grid-column: 1 / -1; }
}
.only-desktop { display: none; }
@media (min-width: 880px) {
  .g-studio { grid-template-columns: 26% minmax(0,1fr) 42%; }
  .g-kontakt { grid-template-columns: minmax(0,1fr) 400px; }
  .g-page { grid-template-columns: minmax(0,1fr) 440px; }
  .g-footer { grid-template-columns: minmax(240px,1.4fr) 1fr 1fr 1fr; }
  .only-desktop { display: flex; }
  .ovl__in { grid-template-columns: minmax(0,1fr); }
}
/* unter 880px führt IMMER der Schalter — egal welche Variante.
   ⚠️ Die Selektoren brauchen [data-nav], sonst schlägt `[data-nav="a"] .nav__trigger`
   (0,2,0) diese Regel und Variante A hätte auf dem Handy KEINE Navigation. */
@media (max-width: 879px) {
  [data-nav] .nav__links, [data-nav] .nav__cta, [data-nav] .nav__mail { display: none; }
  [data-nav] .nav__trigger { display: flex; }
  :root { --nav-h: 68px; }

  /* ── Hero auf dem Handy ─────────────────────────────────────────────────────
     Drei Anlaeufe an einem Tag, und der dritte dreht die ersten beiden um.

     1. Urspruenglich: Mural, Linse und Scrim komplett aus, Hero auf `76vh`.
        Begruendung damals: „auf dem Handy hat das Mural keinen Platz, oben bleibt
        ein leeres Unschaerfefeld." Ergebnis: 286 px leere Verlaufsflaeche.
     2. Dann: Hoehe vom Inhalt bestimmen lassen, Abstandhalter raus. Die leere
        Flaeche war weg — aber der Hero bestand jetzt aus Verlauf, Zeile, Knopf.
        Kundenurteil: „optisch leer, keine Idee. Nichts davon repraesentiert eine
        Webdesign-Agentur."
     3. Jetzt: Der Fehler steckte in Schritt 1. Die Flaeche war nicht leer, WEIL
        der Hero zu hoch war — sie war leer, weil die Bildidee abgeschaltet wurde
        und nur ihr Platzhalter stehen blieb. Ein Hero ohne Idee wird nicht besser,
        wenn man ihn kuerzer macht; er wird nur schneller uninteressant.

     Also kommt die Textflaeche zurueck — die Idee der Seite ist, dass die eigene
     Arbeit als lesbare Textur hinter dem Claim liegt. Was NICHT zurueckkommt, ist
     die Linse: sie steht und faellt mit `backdrop-filter`, und genau der ist auf
     dem Handy die teuerste Einzelentscheidung (siehe `.nav.is-stuck`). Die
     Freistellung haelt den Text hinter der Copy weg — derselbe gemessene
     Mechanismus wie auf dem Desktop, kein zweiter Weg. */
  [data-lens] .lens { display: none; }

  /* Der Hero fuellt genau einen Geraeteschirm (Kundenwunsch 06.08.2026:
     „waere cooler wenn hero sich immer ans geraet anpassen wuerde").
     ⚠️ `svh`, nicht `vh` und nicht `dvh`:
     - `vh` rechnet auf iOS gegen das GROSSE Fenster (Leisten eingeklappt) — der
       Claim saesse hinter der Adresszeile, solange sie sichtbar ist, also genau
       beim Ankommen.
     - `dvh` waechst und schrumpft beim Scrollen mit den Leisten; der Hero wuerde
       waehrend der Bewegung seine Hoehe aendern und alles darunter mitziehen.
     - `svh` ist der kleinste garantierte Schirm: passt mit sichtbaren Leisten,
       bleibt beim Scrollen ruhig. Fallback fuer aeltere Browser eine Zeile davor. */
  [data-lens] { min-height: 100vh !important; }
  [data-lens] { min-height: 100svh !important; }
  .hero-gap { display: block; }

  /* ⚠️ Erster Versuch war zu laut: die Zeilen liefen in voller Schriftfarbe
     (#1a1c1f) und in Desktop-Groesse ueber die Flaeche und standen damit gleich-
     berechtigt neben dem Claim — und weil ganze Saetze auf 390 px nicht passen,
     wurden sie links UND rechts mitten im Wort angeschnitten („…Der ganze Betrie",
     „wort werktags unter 12 Stunden"). Das liest sich als Darstellungsfehler, nicht
     als Textur. Derselbe Fehler steht schon einmal im README, damals fuer die harte
     rechte Kante auf dem Desktop.

     Textur heisst: man erkennt, dass da Saetze stehen, ohne sie zu lesen.
     Also drei Dinge: Farbe stark zurueck, Versatz nach links raus (was links
     angeschnitten wird, wirkt wie ein Fehler — was rechts weich auslaeuft, wie
     Absicht), und die Maske faengt viel frueher an. */
  .mural i {
    font-size: clamp(0.88rem, 3.6vw, 1.1rem);
    padding-left: 6vw;
    color: rgba(26, 28, 31, 0.17);
  }
  .mural i:nth-child(3n+1) { font-size: clamp(1rem, 4.4vw, 1.3rem); }
  .mural i:nth-child(4n)   { font-size: clamp(0.82rem, 3.2vw, 1rem); }
  .mural i:nth-child(2n), .mural i:nth-child(3n),
  .mural i:nth-child(5n), .mural i:nth-child(7n) { margin-left: 0; }
  .mural i.d { color: rgba(26, 28, 31, 0.1); }
  /* Die Farbakzente sind auf dem Desktop die Wuerze der Flaeche. Auf 390 px sind
     sie Blickfaenger neben dem Claim — hier laeuft alles in derselben Tonlage. */
  .mural i em, .mural i b, .mural i s { color: inherit; opacity: 1; }
  .mural {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 52%, transparent 92%);
    mask-image: linear-gradient(to right, #000 0, #000 52%, transparent 92%);
  }
  /* Ohne Linse traegt der Scrim die Trennung allein — also hoeher und dichter,
     damit der Claim auf jeder Zeilenlage scharf steht. */
  .scrim { height: 58%; background: linear-gradient(to top, rgba(240,239,236,0.97) 0%, rgba(240,239,236,0.82) 46%, rgba(240,239,236,0) 100%); }
  /* ⚠️ Das obere Polster steht NICHT hier, sondern am Dateiende — siehe dort. */

  /* Dauerlast statt Ladezeit: die Startseite hat FUENF grossflaechige Verlaufs-
     schichten mit `filter: blur(50–90px)` (bis 223.752 px²) plus ein vollflaechiges
     Rauschen (360.228 px², `steps(3)` alle 1,6 s) — alle `infinite`. Auf dem Handy
     heisst das Neuzeichnen ohne Unterbrechung, solange die Seite offen ist.
     Angehalten statt geloescht: die Schichten stehen weiter, sie bewegen sich nur
     nicht mehr. Der Unterschied ist auf einem 6-Zoll-Schirm ohnehin nicht zu sehen. */
  :root { --play: paused; }
}


/* ============================================================
   Projekt-Kacheln — echte, abgegrenzte Einheiten (Screenshot +
   Name + Rolle), deshalb hier bewusst eine Karte. Hell, Archivo,
   Haarlinie statt schwarzem Block.
   ============================================================ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tiles.wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.tile {
  display: block; background: #ffffff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.25,0.1,0.25,1);
}
.tile:hover { border-color: rgba(22,24,26,0.22); box-shadow: 0 18px 44px rgba(0,0,0,0.10); transform: translateY(-3px); }
.tile__shot { display: block; position: relative; aspect-ratio: 16/11; overflow: hidden; background: #f2f2f1; border-bottom: 1px solid var(--line); }
.tile__shot img {
  position: absolute; top: 0; left: 0; width: 100%; display: block;
  transition: transform 0.7s cubic-bezier(0.25,0.1,0.25,1);
}
.tile:hover .tile__shot img { transform: scale(1.035); }
.tile__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 7px; }
.tile__body h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; }
.tile__body h3 svg { opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.25s; color: var(--accent-ink); }
.tile:hover h3 svg { opacity: 1; transform: translateX(0); }
.tile__body p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.tile__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; }

/* Abschluss-Zeile unter einer Sektion: Zahl links, Weiterweg rechts */
.moreline {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--ink); margin-top: clamp(28px, 3.5vw, 44px); padding-top: 20px;
}
.moreline p { font-size: 13.5px; color: var(--muted); }

/* ============================================================
   Cases als STORY (Kundenfeedback 06.08.2026: „screenshots hässlich,
   kacheln hässlich, wir beschreiben lange nicht alles").
   Kein Kachelraster mehr und keine gestauchten Ganzseiten-Screenshots:
   ein echtes Foto des Betriebs führt, danach Kennzahlen, Vorher/Umbau/Heute,
   die volle Modulliste, echte Systemansichten und das Zitat des Inhabers.
   Inhalt kommt aus den freigegebenen Erfolgsstories auf modvio.de/stories/.
   ⚠️ Kein akzentfarbener Kantenstreifen am Zitat (CLAUDE.md §8) — es
   differenziert über Haarlinien, Display-Kursive und die Zeile darunter.
   ============================================================ */
.story { border-top: 1px solid var(--ink); padding: clamp(40px, 7.5vw, 130px) 0 clamp(34px, 6vw, 100px); }
.story__head { max-width: 900px; }
.story__brow {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #666b73;
}
.story__brow span + span::before { content: "· "; color: var(--line); }
.story__claim {
  font-size: clamp(1.5rem, 3.4vw, 2.9rem); line-height: 1.14;
  letter-spacing: -0.035em; text-wrap: balance; margin-top: 20px;
}
.story__sub { font-size: 16.5px; line-height: 1.62; color: var(--muted); max-width: 620px; margin-top: 22px; }

.story figure { margin: 0; }
.story figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story figcaption {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #666b73; margin-top: 10px;
}
.story__hero {
  margin-top: clamp(38px, 5vw, 72px);
}
.story__hero img {
  aspect-ratio: 16 / 8; border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(0,0,0,0.09);
}

/* Kennzahlen: gross gesetzt, ohne Kachel drumherum */
.story__kpi { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: clamp(30px, 5.5vw, 84px); }
.story__kpi div { border-top: 1px solid #ececee; padding: 16px 0; }
/* Groesser als jede Ueberschrift daneben: die Kennzahl IST das Argument,
   vorher war sie das kleinste Element im Case. */
.story__kpi b {
  display: block; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.05;
}
.story__kpi span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-top: 6px; max-width: 30ch; }

.story__acts { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: clamp(26px, 4.5vw, 64px); }
.story__acts div { border-top: 1px solid #ececee; padding: 18px 0; }
.story__acts i {
  font-style: normal; display: block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #666b73; margin-bottom: 8px;
}
.story__acts p { font-size: 15.5px; line-height: 1.62; color: var(--muted); }

.story__built { margin-top: clamp(28px, 5vw, 72px); border-top: 1px solid #ececee; padding-top: 20px; }
.story__built ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.story__built li {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: #ffffff;
}

/* Das Zitat stand als schmale Spalte links, rechts blieb rund die halbe Seite leer
   (Kundenbefund 06.08.2026: „zu viel whitespace neben zitaten"). Jetzt trägt es die
   Breite: grösser gesetzt, weiteres Mass, und die Zuschreibung sitzt rechts daneben
   statt darunter — damit füllt die Zeile den Satzspiegel. */
.story__quote {
  margin: clamp(38px, 5vw, 72px) 0 0; padding: clamp(30px, 4vw, 52px) 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid #ececee;
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
.story__quote p {
  font-family: var(--it); font-style: italic; font-size: clamp(1.45rem, 3.1vw, 2.6rem);
  line-height: 1.26; letter-spacing: -0.012em; max-width: 30ch; text-wrap: balance;
}
.story__quote cite { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); }
.story__quote cite b { display: block; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
@media (min-width: 860px) {
  .story__quote { grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(32px, 4vw, 64px); align-items: end; }
  /* Kein ch-Mass mehr: das Zitat FUELLT seine Spalte, sonst klafft in der Mitte
     wieder die Luecke, die der Kunde gemeldet hat. Bei drei bis vier Zeilen ist
     das Mass fuer ein Display-Zitat noch in Ordnung. */
  .story__quote p { max-width: none; }
  .story__quote cite { padding-bottom: 0.5em; }
}

.story__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: clamp(28px, 3.5vw, 44px); }
.story__links a { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; transition: color 0.25s; }
.story__links a svg { transition: transform 0.3s; }
.story__links a:hover { color: var(--accent-ink); }
.story__links a:hover svg { transform: translateX(4px); }

@media (min-width: 760px) {
  .story__kpi { grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 3vw, 48px); }
  .story__acts { grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 3vw, 48px); }
  /* Kein max-width mehr hier: diese 760er-Regel steht SPAETER in der Datei als
     der 860er-Block und hat dessen "max-width: none" ueberschrieben — das Zitat
     blieb dadurch bei gemessenen 575 px stehen. */
}

/* ============================================================
   FAQ — bewusst OFFEN, nicht als zweites Akkordeon. Die Leistungen
   darüber sind schon eins; dieselbe Bedienidee zweimal untereinander
   liest als Vorlage. Offener Text rankt außerdem, geklappter kaum.
   ============================================================ */
.faq { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: clamp(22px, 3vw, 38px); }
.faq > div { border-top: 1px solid #ececee; padding: 22px 0; }
.faq h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.005em; }
.faq p { font-size: 15px; line-height: 1.62; color: var(--muted); margin-top: 7px; max-width: 54ch; }
@media (min-width: 860px) {
  .faq { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 90px); }
}

/* Zwei Kundenstimmen als schmaler Streifen — die Startseite hatte gemessen
   NULL Belege. Bewusst knapp: die ganzen Geschichten stehen auf /arbeiten
   und auf modvio.de, hier reicht der Beweis, dass es sie gibt. */
.voices { display: grid; grid-template-columns: 1fr; gap: 28px; }
.voices blockquote { margin: 0; border-top: 1px solid var(--ink); padding-top: 18px; }
.voices blockquote p {
  font-family: var(--it); font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.3; letter-spacing: -0.01em;
}
.voices cite { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 12px; }
.voices cite b { font-weight: 600; color: var(--ink); margin-right: 9px; }
@media (min-width: 860px) {
  .voices { grid-template-columns: 1fr 1fr auto; gap: clamp(32px, 4vw, 64px); align-items: start; }
}

/* ============================================================
   Direktkontakt-Rail — uebernommen vom Live-Stand barzik.studio
   (SocialRail.jsx + .srail in global.css), nach Vanilla portiert
   und auf drei Kanaele reduziert: WhatsApp, Anruf, LinkedIn.
   Der vorherige schwebende WhatsApp-Knopf war generisch; die Rail
   ist schon die Handschrift der Marke — kein zweites Muster bauen.
   Ruhezustand monochrom, beim Hover die Kanalfarbe + Beschriftung.
   Der Anruf nimmt bewusst NICHT die Telefon-Lila der Live-Seite,
   sondern --accent-cta: das ist hier die eigene Handlung.
   ============================================================ */
.srail {
  position: fixed; right: 8px; top: 50%; transform: translateY(-50%); z-index: 44;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0.6; transition: opacity 0.3s ease;
}
.srail:hover, .srail:focus-within { opacity: 1; }
.srail-item {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 11px;
  background: rgba(255,255,255,0.86); border: 1px solid var(--line); color: var(--ink);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  box-shadow: 0 2px 8px rgba(22,24,26,0.12);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), background 0.22s, color 0.22s, border-color 0.22s;
}
.srail-item svg { width: 16px; height: 16px; display: block; }
.srail-item:hover { transform: translateX(-2px) scale(1.06); }
.srail-item.sr-whatsapp:hover { background: #25D366; border-color: #25D366; color: #ffffff; }
.srail-item.sr-phone:hover    { background: var(--accent-cta); border-color: var(--accent-cta); color: #ffffff; }
.srail-item.sr-linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #ffffff; }
.srail-lbl {
  position: absolute; right: calc(100% + 10px); top: 50%; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  background: #ffffff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px;
  box-shadow: 0 6px 18px rgba(22,24,26,0.14);
  opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(6px);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.srail-item:hover .srail-lbl, .srail-item:focus-visible .srail-lbl { opacity: 1; transform: translateY(-50%) translateX(0); }
/* Wie live: unter 1081px uebernimmt die Fusszeile — dort stehen dieselben drei
   Kanaele. Eine schwebende Leiste auf dem Handy waere nur im Weg. */
@media (max-width: 1080px) { .srail { display: none; } }
@media (prefers-reduced-motion: reduce) { .srail, .srail-item, .srail-lbl { transition: none; } .srail-item:hover { transform: none; } }

/* ============================================================
   Typografie — zwei Stimmen statt einer.
   Fraunces (die Schrift der echten BARZIK-CI) traegt die Ueberschriften,
   Archivo bleibt fuer Fliesstext, Navigation und Bedienelemente. Ein
   Grotesk allein liest technisch; die Serif macht den Unterschied
   zwischen "Software-Startup" und "Studio".
   ============================================================ */
:root { --display: var(--font); }

h1, h2, .story__claim, .ovl__nav a { font-family: var(--display); font-weight: 700; }
h1, h2 { letter-spacing: -0.035em; }
.ovl__nav a { letter-spacing: -0.035em; }


/* Der Marken-Punkt hinter der Wortmarke und den Überschriften.
   Auf hellem Grund trägt ihn --accent-ink (4,50:1 auf #EFEFEF); --accent käme
   dort nur auf 2,74:1. Auf #131416 ist es genau andersherum: --accent misst
   5,87:1, --accent-ink nur 3,58:1. Deshalb zwei Klassen statt einer Farbe. */
.dot   { color: var(--accent-ink); }
.dot-d { color: var(--accent); }

/* Betonung ist seit 06.08.2026 ein oranger TEXTMARKER, kein Kursiv.
   Userentscheid: „dieses kursive was jeder jetzt mit ki nutzt" — die Display-
   Kursive ist inzwischen selbst ein Klischee. Der Strich ist eine SVG-Form mit
   unruhigen Kanten und leichter Schräglage: ein exaktes Rechteck liest wie ein
   CSS-Default, ein schiefer Wisch wie ein echter Marker. Die Farbe ist hier
   gebacken, weil ein data:-URI kein var() lesen kann — sie ist --accent (#F26522).
   `box-decoration-break: clone` gibt jeder Zeile eines Umbruchs ihren eigenen Strich.
   ⚠️ Kursiv bleibt ausschliesslich im Zitat (.story__quote) — dort ist es die
   Zitat-Geste und keine Dekoration. */
/* ⚠️ Seit 06.08.2026 liegt der Strich als HINTERGRUND am Wort, nicht mehr als
   ::after darüber. Grund: markiert werden jetzt ganze Halbsätze („läuft über einen
   Login."), und die brechen je nach Fensterbreite um. Ein absolut positioniertes
   Pseudo-Element deckt dann die Vereinigungsfläche beider Zeilen ab — also einen
   großen Block quer über den Absatz. `box-decoration-break: clone` gibt dagegen
   jeder Zeile ihren eigenen Strich.
   Nebeneffekt, der es besser macht: ein Hintergrund liegt von Natur aus HINTER der
   Schrift — der Blendmodus-Trick entfällt, die Schrift bleibt einfach obenauf.
   Die Schräglage ist deshalb in die SVG-Form gebacken (Oberkante steigt nach rechts),
   ein `rotate()` ginge auf einem Hintergrund nicht.
   Sitz weiterhin gemessen: 0,24 em bis 1,12 em, siehe README. */
.it {
  font-style: normal;
  margin-left: -0.1em; padding-left: 0.1em;   /* Überstand links, ohne den Text zu verschieben */
  background-repeat: no-repeat;
  background-size: 100% 0.88em;
  background-position: 0 0.24em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M2 22 C 48 12 98 20 148 12 C 198 4 248 12 296 3 L 298 74 C 250 86 200 78 150 86 C 100 94 48 84 4 92 Z' fill='%23F26522' fill-opacity='.5'/%3E%3Cpath d='M8 58 C 58 50 112 58 168 49 C 216 42 258 49 294 40 L 296 72 C 250 84 200 76 150 84 C 100 92 50 82 6 90 Z' fill='%23F26522' fill-opacity='.24'/%3E%3C/svg%3E");
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Auf #131416 würde multiply den Strich verschlucken (orange × schwarz = schwarz).
   screen hellt dort auf, die weiße Schrift bleibt weiß. */
/* Auf #131416 gar kein Marker (Userentscheid 06.08.2026: „bei lassen sie uns reden
   finds ich doof, da kanns weg"). Orange auf Schwarz kann nicht wie Marker auf Papier
   aussehen: multiply verschluckt den Strich, screen macht daraus einen braunen Fleck.
   Die weiße Schrift auf dem dunklen Grund trägt die Betonung dort ohne Hilfsmittel. */
.on-dark .it { background-image: none; }

/* Der Strich wischt beim Scrollen von links durch. Die Klasse setzt erst das
   Skript — ohne JS ist der Marker also einfach da statt unsichtbar.
   ⚠️ Die Schräglage muss in JEDER transform-Stufe mitgeschrieben werden, sonst
   wirft die Animation sie weg (transform ist eine Eigenschaft, keine Liste). */
.it--anim { background-size: 0% 0.88em; transition: background-size 0.66s cubic-bezier(0.22,0.61,0.36,1); }
.it--anim.is-on { background-size: 100% 0.88em; }

/* Gesperrte Versal-Labels: das zweite Signal fuer "gehoben" */
.kicker {
  display: block; font-family: var(--font, "Archivo"), sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: #666b73; margin-bottom: 18px;
}
/* Auf #131416 traegt #666b73 nur 3,0:1 — dort muss das Label heller werden. */
.kicker--d { color: #8d939b; }

/* ============================================================
   Roter Faden (Kundenfix 06.08.2026): ein KMU-Besucher soll die
   Seite von oben nach unten lesen koennen und danach wissen, was
   passiert. Dafuer zwei neue Etappen — der Beleg und der Ablauf —
   in derselben Sprache wie das Leistungsverzeichnis: Haarlinie,
   Mono-Ziffer, grosser Name. Keine Karten, keine Badges.
   ============================================================ */
.flow { display: flex; flex-direction: column; }
.flow__row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px; border-top: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 32px) 0;
}
.flow__row:last-child { border-bottom: 1px solid var(--line); }
.flow__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: #666b73; padding-top: 0.6em; }
.flow__main { display: grid; grid-template-columns: 1fr; gap: 8px; }
.flow__name { font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -0.032em; line-height: 1.12; }
.flow__desc { font-size: 15px; line-height: 1.6; color: var(--muted); }
.flow__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: #666b73; white-space: nowrap; }
@media (min-width: 900px) {
  .flow__main { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) 190px; gap: 40px; align-items: baseline; }
  .flow__meta { text-align: right; }
}



/* ============================================================
   Leistung + Beleg auf einer Seite: Angebot oben, die Arbeit,
   die es beweist, direkt darunter. Deshalb braucht es keine
   zweite Werkstattseite mehr.
   ============================================================ */
.sec { border-top: 1px solid var(--ink); padding: clamp(40px, 5.5vw, 84px) 0 clamp(32px, 4vw, 56px); }
.sec__head { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: clamp(22px, 3vw, 38px); }
.sec__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.12; }
.sec__lead { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 440px; }
@media (min-width: 900px) {
  .sec__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
}
.offer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 8px 32px; border-top: 1px solid #ececee; padding: 20px 0; transition: background 0.25s, padding-left 0.3s;
}
.offer:hover { background: #fafafa; padding-left: 10px; }
.offer:last-of-type { border-bottom: 1px solid #ececee; }
.offer h3 { font-family: var(--font, "Archivo"), sans-serif; font-size: 16.5px; font-weight: 600; letter-spacing: -0.005em; }
.offer p { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin-top: 5px; max-width: 620px; }
.offer__meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-top: 3px; }
.offer__badge {
  font-family: var(--mono); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, #ffffff);
  border-radius: 999px; padding: 3px 9px; vertical-align: 3px; margin-left: 10px;
}
/* Der Beleg sitzt IM Abschnitt, also leiser abgesetzt als ein eigener Block */
.proof-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  border-top: 1px solid #ececee; margin-top: 4px; padding: 20px 0 0;
  font-size: 14.5px; color: var(--muted);
}

/* ============================================================
   Leistungs-Index — nummerierte Liste mit grossen Namen statt
   sechs Bloecken mit je eigenem Absatz. Die Erklaerung gehoert
   ins Gespraech, nicht auf die Seite.
   ============================================================ */
.svc { display: flex; flex-direction: column; }
/* Aufklappbar seit 06.08.2026 (Kundenwunsch: „vielleicht aufklappbar mit
   Unterpositionen"). <details>/<summary> statt eigener Klapp-Logik — mit Tastatur
   bedienbar, ohne JS lesbar, und der Browser setzt aria-expanded selbst.
   Inhalt von <summary> muss Phrasing Content sein, deshalb Spans statt h3/p. */
.svc__row {
  border-top: 1px solid var(--line);
  transition: padding-left 0.35s cubic-bezier(0.25,0.1,0.25,1), background 0.3s;
}
.svc__row:last-child { border-bottom: 1px solid var(--line); }
.svc__row:hover { background: #fafafa; padding-left: 12px; }
.svc__row[open] { background: #fafafa; }
.svc__sum {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 24px; gap: 14px;
  padding: clamp(20px, 2.4vw, 34px) 0; cursor: pointer; list-style: none;
}
.svc__sum::-webkit-details-marker { display: none; }
.svc__sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.svc__chev { align-self: center; color: #666b73; transition: transform 0.3s cubic-bezier(0.25,0.1,0.25,1); }
.svc__row[open] .svc__chev { transform: rotate(180deg); }
.svc__more { padding: 0 0 clamp(18px, 2.2vw, 30px) 60px; }
.svc__more dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; max-width: 900px; }
.svc__more dt {
  font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: #666b73; border-top: 1px solid #ececee; padding-top: 14px;
}
.svc__more dd { margin: 4px 0 14px; font-size: 15px; line-height: 1.6; color: var(--muted); }
@media (min-width: 900px) {
  .svc__more dl { grid-template-columns: 210px minmax(0, 1fr); column-gap: 40px; }
  .svc__more dt { grid-column: 1; }
  .svc__more dd { grid-column: 2; margin: 0; border-top: 1px solid #ececee; padding-top: 14px; padding-bottom: 14px; }
  .svc__more dt { padding-bottom: 14px; }
}
@media (max-width: 640px) { .svc__more { padding-left: 0; } }
.svc__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: #666b73; padding-top: 0.7em; }
.svc__main { display: grid; grid-template-columns: 1fr; gap: 8px; }
.svc__name, .svc__desc, .svc__meta { display: block; }
.svc__name { font-family: var(--display); font-size: clamp(1.4rem, 2.7vw, 2.2rem); font-weight: 700; letter-spacing: -0.032em; line-height: 1.1; }
.svc__desc { font-size: 15px; line-height: 1.55; color: var(--muted); }
.svc__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (min-width: 900px) { .svc__meta { text-align: right; } }
@media (min-width: 900px) {
  .svc__main { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) 200px; gap: 40px; align-items: baseline; }
}


/* ── Textseiten: Recht, Docs, Erklärungen ─────────────────────────────────────
   Bis zum 06.08.2026 lagen Impressum, Datenschutz, AGB, AVV, Widerruf,
   Barrierefreiheit und Leichte Sprache noch im alten Astro-Build — der Footer
   verlinkte sie, und wer klickte, landete im alten CI. Diese Klassen holen sie
   in dieselbe Oberfläche wie die vier Hauptseiten.
   Bewusst KEINE Karten und kein farbiger Kantenstreifen an den Hinweiskästen
   (§8 CLAUDE.md) — die Gliederung trägt die Haarlinie, wie in .sec auch. */
.doc { padding: calc(var(--nav-h) + clamp(30px, 4vw, 58px)) 0 clamp(56px, 7vw, 104px); }
.doc__in { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 48px); box-sizing: border-box; }

.doc__hd { border-bottom: 1px solid var(--ink); padding-bottom: clamp(24px, 3.2vw, 42px); margin-bottom: clamp(28px, 3.6vw, 52px); }
.doc__eyebrow { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-ink); }
.doc__hd h1 { font-size: clamp(2rem, 5.2vw, 3.9rem); line-height: 1.04; margin-top: 13px; }
.doc__lead { font-size: clamp(16px, 1.4vw, 17.5px); line-height: 1.64; color: var(--muted); max-width: 58ch; margin-top: 17px; }
.doc__stand { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #666b73; margin-top: 20px; }

/* minmax(0, 1fr) statt 1fr, und min-width: 0 am Kind: Rasterspalten sind sonst
   mindestens so breit wie der schmalste unteilbare Inhalt. Eine dreispaltige
   Tabelle hat damit die Spalte auf 388 px aufgezogen, obwohl auf dem Handy nur
   350 px zur Verfügung standen — gemessen 06.08.2026: /datenschutz lief 18 px
   über, /avv sogar 131 px. Das overflow-x am Tabellenkasten allein half nicht,
   weil das Raster schon darüber entschieden hatte. */
.doc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.4vw, 56px); align-items: start; }
@media (min-width: 1080px) { .doc__grid { grid-template-columns: 216px minmax(0, 1fr); } }

/* Inhaltsverzeichnis. Ersetzt die alten „01 —"-Nummern vor jedem Abschnitt
   (Fixes_2.pdf: entnummerieren) — die Orientierung übernimmt die Leiste. */
.doc__toc { display: none; }
@media (min-width: 1080px) { .doc__toc { display: block; position: sticky; top: calc(var(--nav-h) + 24px); } }
.doc__toc p { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #666b73; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.doc__toc a { display: block; font-size: 13.5px; line-height: 1.4; color: #4a4f56; padding: 8px 0; border-bottom: 1px solid var(--line); transition: color 0.2s, padding-left 0.2s; }
.doc__toc a:hover { color: var(--accent-ink); padding-left: 5px; }

.doc__body { min-width: 0; max-width: 68ch; font-size: 16.5px; line-height: 1.75; color: #2a2e33; }
.doc__body h2 { font-size: clamp(1.28rem, 2.2vw, 1.72rem); line-height: 1.18; color: var(--ink); margin: clamp(38px, 4.4vw, 60px) 0 14px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.doc__body > h2:first-child { margin-top: 0; }
.doc__body h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 26px 0 8px; }
.doc__body p { margin: 0 0 15px; }
.doc__body p:last-child { margin-bottom: 0; }
/* :not(.dcard) ist nötig, nicht kosmetisch: die Guide-Liste besteht aus <a>, die
   IM Fliesstextbereich liegen. Ohne die Ausnahme erbt jede Kachel — Überschrift,
   Beschreibung, Lesezeit — die Unterstreichung der Textlinks und die ganze Liste
   sieht aus wie ein Fehler (am 06.08.2026 im Screenshot so gesehen). */
.doc__body a:not(.doc__btn):not(.dcard) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s; }
.doc__body a:not(.doc__btn):not(.dcard):hover { color: var(--ink); }
.doc__body strong, .doc__body b { font-weight: 700; color: var(--ink); }
.doc__body ul, .doc__body ol { margin: 0 0 16px; padding-left: 22px; }
.doc__body li { margin-bottom: 7px; }
.doc__body li::marker { color: var(--accent-ink); }
.doc__body hr { border: 0; border-top: 1px solid var(--line); margin: clamp(30px, 3.6vw, 46px) 0; }
.doc__body table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 0 0 18px; }
.doc__body th, .doc__body td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc__body th { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #666b73; }
.doc__scroll { overflow-x: auto; }

/* Hinweiskasten: gleichmäßige Haarlinie rundum + leichte Tönung. Kein Balken. */
.doc__note { background: #e7e8ea; border: 1px solid #d6d8db; border-radius: 14px; padding: clamp(18px, 2.2vw, 26px); margin: clamp(24px, 3vw, 36px) 0; font-size: 15.5px; line-height: 1.68; }
/* #666b73 trägt auf dem Seitenhintergrund #EFEFEF genau 4,50:1 — auf der Tönung
   des Kastens (#e7e8ea) fällt es auf 4,37:1 und reisst die Grenze für 11-px-Text.
   Ein Label darf nicht durchfallen, nur weil es in einem Kasten steht. #5f646b
   misst dort 4,83:1. Gemessen 06.08.2026 am gerenderten Bildpunkt. */
.doc__note-k { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #5f646b; display: block; margin-bottom: 9px; }
.doc__note p:last-child { margin-bottom: 0; }

.doc__btn { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: #ffffff; border-radius: 999px; padding: 13px 22px; font-size: 15px; font-weight: 600; margin-top: 6px; transition: background 0.25s, transform 0.25s; }
.doc__btn:hover { background: var(--accent-cta); color: #ffffff; transform: translateY(-2px); }

/* Fußleiste der Textseiten: die Geschwister direkt erreichbar, damit niemand
   über den Footer zurückmuss. */
.doc__sib { border-top: 1px solid var(--ink); margin-top: clamp(46px, 5.5vw, 78px); padding-top: clamp(20px, 2.6vw, 30px); display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; }
.doc__sib > p { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #666b73; }
.doc__sib a { font-size: 14.5px; color: #4a4f56; transition: color 0.2s; }
.doc__sib a:hover { color: var(--accent-ink); }
.doc__sib a[aria-current="page"] { color: var(--ink); font-weight: 700; }


/* ── „Bewegung reduzieren" — muss ans DATEIENDE ───────────────────────────────
   .it--anim setzt background-size auf 0 % und steht weiter oben; eine Regel mit
   gleicher Spezifität schlägt sie nur, wenn sie SPÄTER kommt. Ein früher notierter
   Block wäre wirkungslos gewesen und die Zusage in der Erklärung zur Barriere-
   freiheit damit unwahr geblieben. Der Marker verschwindet nicht — er ist sofort
   ganz da, statt beim Scrollen aufzuwischen. */
@media (prefers-reduced-motion: reduce) {
  .it--anim { transition: none; background-size: 100% 0.88em; }
  .doc__toc a, .doc__btn, .doc__sib a, .doc__body a { transition: none; }
  .doc__toc a:hover { padding-left: 0; }
  .doc__btn:hover { transform: none; }
}


/* ── Docs-Übersicht ───────────────────────────────────────────────────────────
   Drei Guides, also keine Kachel-Wand: eine Liste mit Haarlinien, die beim
   Überfahren nach rechts rückt. Karten wären hier der Reflex, nicht die
   Entscheidung — bei drei gleichwertigen Einträgen trägt die Zeile mehr Text
   und liest sich schneller. */
.doc__grid--voll { grid-template-columns: minmax(0, 1fr); }
.doc__body--weit { max-width: 860px; }

.dlist { border-top: 1px solid var(--ink); margin-bottom: clamp(34px, 4vw, 54px); }
.dcard {
  display: grid; grid-template-columns: 1fr; gap: 5px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dcard:hover { padding-left: 10px; }
.dcard__k { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.dcard__h { font-family: var(--display); font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-weight: 700; letter-spacing: -0.032em; line-height: 1.14; color: var(--ink); }
.dcard__d { font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 62ch; margin-top: 2px; }
.dcard__m { font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: #666b73; margin-top: 4px; }
/* Der Pfeil sitzt an der Überschrift, nicht als eigenes Element daneben —
   ein extra „→"-Kästchen rechts wäre genau der Karten-Reflex von oben. */
.dcard__h::after { content: " ↗"; color: var(--accent-ink); font-size: 0.7em; vertical-align: 0.15em; }
@media (min-width: 760px) { .dcard { grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "k h" ". d" ". m"; column-gap: 26px; }
  .dcard__k { grid-area: k; padding-top: 0.55em; } .dcard__h { grid-area: h; } .dcard__d { grid-area: d; } .dcard__m { grid-area: m; } }
@media (prefers-reduced-motion: reduce) { .dcard { transition: none; } .dcard:hover { padding-left: 0; } }


/* ── Kennzahlen-Reihe (Studienseite) ──────────────────────────────────────────
   Die vier Zahlen SIND der Inhalt der Seite — sie bekommen Größe, alles andere
   ordnet sich unter. Bewusst keine vier Karten mit Schatten: eine Reihe mit
   Trennlinien liest sich schneller und sieht nicht nach Vorlage aus. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 0 0 clamp(30px, 3.6vw, 46px); }
.stats > div { padding: clamp(18px, 2.2vw, 26px) 20px clamp(18px, 2.2vw, 26px) 0; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: 0; padding-right: 0; }
.stats b { display: block; font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -0.042em; line-height: 1; color: var(--ink); }
.stats span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 9px; }
.stats i { display: block; font-family: var(--mono); font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-ink); margin-top: 11px; }
@media (max-width: 620px) { .stats > div { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; } .stats > div:last-child { border-bottom: 0; } }


/* ── Touchziele: an `pointer: coarse`, NICHT an der Breite ────────────────────
   Ein iPad quer ist 1024 px breit und faellt durch jedes Breiten-Raster — dort
   stand die Hauptnavigation mit 18 px Zeilenhoehe zum Antippen bereit. Gemessen
   06.08.2026 ueber 17 Seiten × 11 Geraete; die Fundstellen waren immer dieselben:
   Wortmarke 26 px, Menue-Knopf 34 px, Sprungmarke 40 px, Navi-Links 18 px.
   Der Menue-Knopf ist auf dem Handy die EINZIGE Navigation — 34 px sind dort
   nicht „etwas klein", sondern der Hauptweg durch die Seite.
   Nur die Trefferflaeche waechst, die Optik bleibt: Hoehe + Innenabstand, keine
   groessere Schrift und keine anderen Farben. */
@media (pointer: coarse) {
  .brand { min-height: 44px; }
  .nav__trigger { min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
  .nav__links a { min-height: 44px; display: inline-flex; align-items: center; }
  .ovl__nav a, .ovl__foot a { min-height: 44px; display: flex; align-items: center; }
  .srail-item { min-height: 44px; }
  .doc__toc a, .doc__sib a, .flink { min-height: 44px; display: inline-flex; align-items: center; }
  .dcard { min-height: 44px; }
}
/* Die Sprungmarke erscheint nur bei Tastaturfokus, ist dann aber ein echtes Ziel.
   ⚠️ `box-sizing` ist hier Pflicht, nicht Kosmetik: ohne sie addiert sich der
   Innenabstand (2 × 11 px) auf die Mindesthoehe, die Marke wird 66 px hoch und
   ragt bei `top: -60px` mit 6 px sichtbar in die Seite. Genau das hat der Kunde
   am 06.08.2026 am iPhone gemeldet („oben links ist irgendein schwarzer Button").
   Der Versteckabstand ist zusaetzlich auf -80 px erhoeht — die Marke darf durch
   keine spaetere Groessenaenderung wieder hervorlugen. */
.skip { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }

@media (pointer: coarse) {
  /* Zweiter Durchgang, wieder gemessen statt geraten. Übrig waren drei Sorten:
     die Text-Handlungsaufrufe (.navlink, 19 px — „Arbeiten ansehen →", „Ganze
     Erfolgsstory", „modvio.de ↗"), die grossen Knöpfe (.rbtn, 40 px) und die
     Wortmarke in der FUSSLEISTE — die trägt keine .brand-Klasse, weshalb die
     Regel eine Etage höher sie nicht erwischt hat. */
  .navlink { min-height: 44px; display: inline-flex; align-items: center; }
  .rbtn { min-height: 44px; }
  footer a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Letzter Rest aus der Gerätemessung: die drei Belegverweise unter einer
   Erfolgsstory (gasthofzurlinde.at · fb-erdbau.de · Ganze Erfolgsstory). */
@media (pointer: coarse) { .story__links a { min-height: 44px; } }


/* ── Hero im Querformat ───────────────────────────────────────────────────────
   Der Hero ist eine Flex-Spalte mit `min-height: 100vh`, einem Abstandhalter
   (`flex: 1`) und der Copy darunter — die Copy steht also am unteren Rand.
   Auf einem liegenden Handy (852 × 393) ist die Copy höher als das Fenster: der
   Abstandhalter schrumpft auf 0, es gibt kein oberes Polster, und die Copy
   beginnt bei y = 0 — also UNTER der 69 px hohen Navileiste. Gemessen 06.08.2026
   bei 852 × 393 und 740 × 360: `elementFromPoint` auf der Eyebrow-Zeile traf
   `nav__in`, und die Wortmarke lag mitten auf der Überschrift.
   Ein Polster oben löst es, ohne das Hochformat anzufassen: dort frisst es der
   Abstandhalter. `box-sizing` muss mit, sonst wird der Hero 100vh PLUS Polster. */
#top, [data-gdot], .hero-col {
  box-sizing: border-box;
  padding-top: calc(var(--nav-h) + 12px);
}
/* Auf sehr flachen Fenstern darf der Hero über 100vh hinauswachsen, statt die
   Copy zu stauchen — lesbar schlägt bildschirmfüllend. */
@media (max-height: 520px) {
  #top, [data-gdot] { min-height: auto; }
}
/* Auf dem Handy trägt das Polster den Hero, seit der Abstandhalter dort weg ist
   (siehe „unter 880px führt IMMER der Schalter" weiter oben). 12 px reichen dann
   nicht: die Eyebrow klebte gemessen 12 px unter der 68 px hohen Leiste.
   ⚠️ Diese Regel MUSS hinter der Grundregel stehen. Beide wiegen (1,0,0) — über
   `#top` entscheidet allein die Reihenfolge, nicht die Media-Query. In den Block
   weiter oben geschrieben wäre sie wirkungslos gewesen (am 06.08.2026 gemessen:
   Eyebrow blieb bei 80 px statt der erwarteten 108). */
@media (max-width: 879px) {
  #top, [data-lens] { padding-top: calc(var(--nav-h) + 40px); }
}


/* ── Bewertungs-Helfer (/bewerten) ───────────────────────────────────────────── */
.rev { margin: clamp(22px, 2.8vw, 32px) 0; }
.rev__lbl { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #5f646b; margin-bottom: 9px; }
.rev__ta { resize: vertical; min-height: 120px; line-height: 1.6; font-size: 15.5px; }
.rev__hint { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 9px; }
.rev__akt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.rev__ghost { background: #ffffff; color: var(--ink); border: 1px solid #d6d8db; border-radius: 999px; padding: 12px 20px; font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.rev__ghost:hover { border-color: var(--ink); background: #f4f4f5; }
/* Die Rückmeldung belegt ihren Platz von Anfang an (`visibility`, nicht `display`),
   sonst springt der Abschnitt beim ersten Kopieren um eine Zeile nach unten. */
.rev__toast { min-height: 22px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent-ink); visibility: hidden; opacity: 0; transition: opacity 0.25s; }
.rev__toast.is-on { visibility: visible; opacity: 1; }
.rev__toast.is-bad { color: #a03024; }
@media (prefers-reduced-motion: reduce) { .rev__toast, .rev__ghost { transition: none; } }
@media (pointer: coarse) { .rev__ghost { min-height: 44px; } }

/* ── Zustandsblöcke (/newsletter) ────────────────────────────────────────────── */
.nlz[hidden] { display: none; }   /* sonst schlägt eine spätere display-Regel das UA-[hidden] */
.nlz { margin-bottom: clamp(26px, 3vw, 38px); }
.nlz > h2:first-child { margin-top: 0; }


/* ── App-Startfläche (/app) ───────────────────────────────────────────────────
   Eigene Oberfläche ohne Navileiste und Footer: wer vom Homescreen startet, will
   Kacheln, keine Website-Navigation. `dvh` statt `vh`, weil die iOS-Adressleiste
   die Höhe im Browser verändert; `env(safe-area-inset-*)` für Notch und Home-Balken. */
body.appbody { background: #EFEFEF; }
.appx {
  min-height: 100dvh; box-sizing: border-box;
  max-width: 620px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 18px)
           calc(env(safe-area-inset-bottom) + 26px) calc(env(safe-area-inset-left) + 18px);
  display: flex; flex-direction: column;
}
.appx__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.appx__logo { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.appx__net { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #5f646b; }
.appx__net i { width: 7px; height: 7px; border-radius: 999px; background: #1f9d55; flex-shrink: 0; }
.appx__net.is-off i { background: #a03024; }

.appx__hero { padding: clamp(30px, 7vh, 56px) 0 clamp(22px, 4vh, 34px); }
.appx__kick { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-ink); }
.appx__greet { font-size: clamp(2.1rem, 9vw, 2.9rem); line-height: 1.05; margin-top: 10px; }
.appx__sub { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-top: 12px; max-width: 40ch; }

.appx__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.appx__tile {
  display: flex; flex-direction: column; gap: 4px;
  background: #ffffff; border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 16px 18px; min-height: 118px;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s;
}
.appx__tile:active { transform: scale(0.975); }
.appx__tile:hover { border-color: #c9cbcf; }
.appx__tile--gross { grid-column: 1 / -1; min-height: auto; }
.appx__ic { width: 34px; height: 34px; border-radius: 11px; background: color-mix(in oklab, var(--accent) 13%, #ffffff); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.appx__ic svg { width: 18px; height: 18px; }
.appx__tile b { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.appx__tx { font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.appx__fuss { margin-top: auto; padding-top: clamp(26px, 5vh, 40px); font-size: 12.5px; color: #5f646b; text-align: center; }
.appx__fuss a { color: #5f646b; text-decoration: underline; text-underline-offset: 3px; }
.appx__fuss a:hover { color: var(--accent-ink); }
@media (pointer: coarse) { .appx__fuss a { min-height: 44px; display: inline-flex; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .appx__tile { transition: none; } .appx__tile:active { transform: none; } }