/* BARZIK STUDIO — Relaunch v4, gemeinsames Stylesheet (ausgelagert aus v4-index.html, damit die Seiten ab Seite 2 nicht auseinanderlaufen) */
/* Instrument Sans - selbst gehostet. Google Fonts ist raus: die nginx-CSP der Vorschau erlaubt nur
   font-src 'self', der CDN-Aufruf waere blockiert und die Seite liefe in Arial. Zweiter Grund: ein
   Nachladen von fonts.gstatic.com ist auf einer deutschen Agenturseite eine Datenschutz-Baustelle.
   Variable Schnitte 400-700, Subsets latin und latin-ext wie bei Google. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/instrument-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/instrument-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/instrument-sans-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/instrument-sans-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Azeret Mono — selbst gehostet, variabel 400-500. Loest IBM Plex Mono ab: das war die
   Hausschrift von IBM und der Default halber Tech-Seiten, also eine Voreinstellung statt einer
   Entscheidung. */
@font-face{font-family:"Azeret Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/azeret-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Azeret Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/azeret-mono-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{--ink:#16171A;--body:#45484E;--muted:#5E6167;--paper:#F2EFE7;--paper2:#EAE6DB;--card:#FFFFFF;--accent:#F26522;--accent-cta:#C74E13;--rule:rgba(22,23,26,.14);--rule-strong:rgba(22,23,26,.3);--font:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;--mono:"Azeret Mono",ui-monospace,monospace;--pad:clamp(20px,4.4vw,64px);--nav-h:84px;--w:1440px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
/* ⚠️ Formularelemente erben `font-family` NICHT — der Browser setzt seine eigene Oberflaechen-
   schrift, und keine Regel weiter unten faellt darauf zurueck. Gemessen 28.08.2026 mit
   `CSS.getPlatformFontsForNode` auf der LIVE-Seite: die Namen unter den Zitaten (`.qtab b`)
   wurden in ARIAL gerendert, 13,33 px, nicht in Instrument Sans — ebenso jeder <button> auf
   allen 31 Seiten und die Felder auf Termin, Newsletter und Bewerten. Genau das war gemeint mit
   „die Schriftart bei den Zitaten sieht sehr generisch aus": es WAR die generische Systemschrift.
   `font:inherit` und nicht nur `font-family`, sonst bleibt die Groesse bei den 13,33 px der
   Browser-Voreinstellung haengen. `color` bleibt bewusst aussen vor — den setzen die Elemente
   selbst, und ein pauschales `inherit` wuerde zum Beispiel die Kalendertage umfaerben. */
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}
h1,h2{margin:0;letter-spacing:-.035em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent-cta)}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent-cta);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;font-size:14px}
.skip:focus{left:8px;top:8px}
/* ── Navbar: Marke links, Links mittig, Ecken-CTA randbündig — alles eckig ── */
/* EINE Kante fuer alles (Userentscheid 28.08.2026: „waers nicht schlauer, wenn die Kanten
   generell mit der Kante von ‚Starte ein Projekt' buendig sind"). Vorher war die Leiste
   vollflaechig und der Inhalt eine zentrierte Spalte — bei 1920 px gemessen: Wortmarke bei 64,
   Inhalt aber erst bei 240, und der CTA-Block lief bis 1920, waehrend der Inhalt bei 1680 endete.
   Die Leiste sitzt jetzt in DERSELBEN Spalte: `max()` haelt unter 1440 px den normalen Seitenrand
   und rueckt darueber genau so weit ein wie der Inhalt. Die Flaeche der Leiste (is-solid) bleibt
   randlos, nur ihr Inhalt zieht mit. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:stretch;transition:background .3s,box-shadow .3s;padding:0 max(var(--pad),calc((100% - var(--w)) / 2))}
/* Leiste wechselt die Fläche je nach Untergrund: hell über Beige, weiß & satt über dunklen Akten */
.nav.is-solid{background:rgba(242,239,231,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--rule)}
.nav.is-contrast{background:#FFFFFF;backdrop-filter:none;box-shadow:0 1px 0 rgba(22,23,26,.12)}
.nav__in{flex:1;display:flex;align-items:center;gap:clamp(24px,4vw,64px);min-width:0}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.03em;flex-shrink:0}
.brand i{font-style:normal;color:var(--accent)}
.nav__links{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--body);padding:8px 0;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1.5px;background:var(--accent-cta);transition:right .25s}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__cta{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:0 clamp(20px,2.6vw,34px);font-size:15px;font-weight:600;letter-spacing:-.01em;flex-shrink:0;transition:background .25s}
.nav__cta:hover{background:var(--accent-cta);color:#fff}
.nav__cta svg{width:17px;height:17px;transition:transform .25s}
.nav__cta:hover svg{transform:translateX(5px)}
.burger{display:none;background:none;border:0;padding:0 18px;cursor:pointer;align-self:stretch}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s,opacity .25s}
.nav.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m{display:none}
/* ── Hero: hell, Verlauf + feines Kreuzraster ── */
/* Der Hero fuellt den Bildschirm GANZ (Userentscheid 28.08.2026). Vorher stand hier
   `calc(100svh - clamp(120px,18vh,190px))`, damit der naechste Abschnitt unten hereinragt —
   sichtbar war davon aber nur ein weisser Streifen an der Fensterkante, und der las sich wie
   ein Fehler statt wie eine Andeutung. `svh` und nicht `vh`: auf dem Handy ist das die Hoehe
   OHNE eingeklappte Browserleiste, sonst reicht der Hero beim ersten Blick unter den Rand.
   `min-height` bleibt (nicht `height`): im Querformat ist die Copy hoeher als das Fenster,
   der Hero muss dann mitwachsen statt zu ueberlaufen. */
.hero{position:relative;min-height:100svh;padding:0 var(--pad);display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(168deg,#F7F5EF 0%,var(--paper) 42%,var(--paper2) 100%)}
.hero__bg::before{content:"";position:absolute;left:-16%;bottom:-36%;width:72vw;height:72vh;background:radial-gradient(closest-side,rgba(242,101,34,.2),rgba(242,101,34,0) 72%);filter:blur(70px)}
.hero__bg::after{content:"";position:absolute;right:-14%;top:-26%;width:56vw;height:60vh;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);filter:blur(50px)}
/* Kleines Muster: Kreuzraster, zum Rand hin ausgeblendet */
/* Kreuzraster nur im Hero-Kopf, nicht hinter dem Panel */
.hero__pat{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 20v8M20 24h8' stroke='%2316171A' stroke-opacity='0.16' stroke-width='1'/%3E%3C/svg%3E");mask-image:radial-gradient(90% 80% at 60% 30%,#000 0%,transparent 78%)}
.hero__grid{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,3vw,48px);max-width:var(--w);width:100%;margin:0 auto;padding:calc(var(--nav-h) + clamp(48px,9vh,110px)) 0 clamp(32px,5vh,56px)}
/* Gemessen 28.08.2026: der Abstand zwischen Textoberkante des Seitentexts und der Ueberschrift
   war hero 27, stmt 20, cases 12, quotes 9 px — die Streuung kommt aus der halben Zeilenhoehe der
   jeweiligen Ueberschrift und waechst mit deren Groesse. Die Polster gleichen sie aus, damit alle
   vier Seitentexte auf derselben Linie beginnen. Werte sind gemessen, nicht geschaetzt. */
.hero__aside{font-size:13px;color:var(--muted);padding-top:0}
.hero__copy{max-width:1000px}
.hero h1{font-size:clamp(2.7rem,7.2vw,6.4rem);line-height:.98;font-weight:700;letter-spacing:-.045em;color:var(--ink);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--accent-cta)}
.hero__lead{margin-top:clamp(24px,3.4vw,42px);font-size:clamp(17px,1.9vw,25px);line-height:1.5;font-weight:400;color:var(--body);max-width:44ch;letter-spacing:-.015em}
/* Zwei gleichwertige Wege aus dem Hero: buchen oder schreiben. Der WhatsApp-Knopf ist bewusst
   die zweite Wahl (Kontur statt Flaeche), damit der Termin der Hauptweg bleibt. Sein Polster ist
   um die Randbreite gekuerzt, sonst waere er 3 px hoeher als der gefuellte daneben. */
.hero__cta{margin-top:clamp(28px,4vh,48px);display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.hero__wa{display:inline-flex;align-items:center;gap:10px;padding:14.5px 28.5px;border:1.5px solid var(--rule-strong);color:var(--ink);font-size:15.5px;font-weight:600;transition:background .25s,border-color .25s,color .25s}
.hero__wa:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.hero__wa svg{width:19px;height:19px;flex:0 0 auto}
.hero__cta + .rating{margin-top:18px}
.hero__btn{display:inline-flex;align-items:center;gap:12px;background:var(--accent-cta);color:#fff;padding:16px 30px;font-size:15.5px;font-weight:600;transition:background .25s}
.hero__btn:hover{background:#A83F0D;color:#fff}
.hero__btn svg{width:16px;height:16px}
/* Google-Bewertung: die Zahl kommt zur LAUFZEIT von /api/google-rating, sie steht nirgends im
   Markup. Eine eingebackene Zahl wird still falsch, sobald eine Bewertung dazukommt — genau das
   war hier der Fall (im Entwurf stand 8, die Schnittstelle liefert 9). Faellt die Antwort aus,
   bleibt der Platz LEER: kein Beleg ist besser als ein erfundener.  haelt die Hoehe,
   damit die Zeile beim Nachladen nicht springt. */
.rating{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);min-height:18px}
.rating__platz{display:block;height:18px}
.rating a{display:inline-flex;align-items:center;gap:9px;color:var(--muted)}
.rating a:hover{color:var(--ink)}
.rating b{color:var(--ink);font-weight:700}
/* Zwei Sternreihen uebereinander: unten fuenf graue, darueber dieselben fuenf in Orange, deren
   Behaelter auf den Prozentwert beschnitten wird. So laesst sich auch 4,3 von 5 ehrlich zeigen.
   ⚠️ Die obere Reihe braucht ihr EIGENES `display:flex`. Sie ist absolut positioniert und erbt
   das Flex des Elternteils nicht — mit den `display:block`-SVGs stapelten sich die vier oberen
   Sterne senkrecht unter den ersten (am 28.08.2026 live so gewesen). `flex-shrink:0`, damit die
   Sterne beim Beschneiden nicht gestaucht statt abgeschnitten werden. */
.rating .stars{display:inline-flex;position:relative;color:rgba(22,23,26,.22)}
.rating .stars i{position:absolute;left:0;top:0;display:flex;overflow:hidden;color:var(--accent-cta)}
.rating .stars svg{width:14px;height:14px;flex:0 0 auto;fill:currentColor;display:block}
.hero__foot{position:relative;z-index:1;max-width:var(--w);width:100%;margin:0 auto;padding:0 0 clamp(20px,3.2vh,34px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
/* KURZE, BREITE FENSTER (Laptop 1280x720, Desktop 1440x900, iPad quer 1180x820).
   Seit der Hero den Bildschirm ganz fuellt, entscheidet die Fensterkante darueber, ob die
   Zwischenueberschrift am Fuss ganz zu sehen ist. Gemessen bei 1440x900: der Hero war mit den
   Standardabstaenden 952 px hoch, also 52 px zu viel — „Fuer Betriebe, die nicht stehenbleiben."
   wurde von der Kante halbiert. Das liest sich schlechter als der weisse Streifen davor.
   Gekuerzt wird deshalb NUR Weissraum, nie die Typo: die Schriftgroessen sind die Gestaltung.
   Nach der Aenderung gemessen: 1440x900 → 871 px, 1280x720 → 716 px, 1180x820 → 773 px.
   Die Breitenschranke haelt das Handy-Querformat draussen (852 px), dort ist die Copy
   zwangslaeufig hoeher als das Fenster und der Hero waechst richtigerweise mit. */
@media (min-width:961px) and (max-height:960px){
  .hero__grid{padding-top:calc(var(--nav-h) + clamp(20px,4vh,56px));padding-bottom:clamp(18px,2.4vh,32px)}
  .hero__cta{margin-top:clamp(20px,2.6vh,34px)}
}
.hero__foot h2{font-size:clamp(1.15rem,2.2vw,1.7rem);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
/* Werk-Vorschau: eckig, ragt unten an */
.peek{position:relative;z-index:1;max-width:var(--w);width:100%;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.peek>div{overflow:hidden;background:var(--card);border:1px solid var(--rule-strong);border-bottom:0;height:clamp(90px,15vh,150px);box-shadow:0 -14px 34px -22px rgba(22,23,26,.28)}
.peek img{width:100%;height:100%;object-fit:cover;object-position:top}
/* ── Leistungen: weißes Inset-Panel direkt nach dem Hero, 3 Spalten ──
   DREI FARBEN NACH FARBLEHRE, GERECHNET STATT GESCHAETZT (28.08.2026).

   ⚠️ Der Kommentar, der hier stand, war an zwei Stellen falsch, und beides sah man:
   (1) Er setzte das Marken-Orange auf Hue 55°. Gemessen liegt `--accent` #F26522 bei
       **oklch(67,6% 0,189 42,0)**, also bei 42°. Die ganze Ableitung stand auf dem falschen Anker.
   (2) Er behauptete "identisches Chroma 0.09". Bei L 87 % ist 0.09 fuer 265° NICHT in sRGB —
       Chrome kappt still. Zwei der drei Flaechen waren also blasser als die dritte, obwohl im
       Code dieselbe Zahl stand. Genau daher kam der matte, ungleiche Eindruck.
   Dazu waren die Winkel ungleich: 55/205/265 heisst 150°/60°/150°. Die beiden hinteren lagen
   60° auseinander und lasen sich als "zwei Blautoene", nicht als zwei eigene Bereiche.

   Jetzt eine echte TRIADE auf dem gemessenen Marken-Hue: 42° / 162° / 282°, exakt 120° Abstand.
   Chroma 0.079 ist der groesste Wert, der bei L 85 % fuer ALLE DREI Hues noch in sRGB passt
   (binaer gesucht, Maxima 0.089 / 0.190 / 0.079) — damit sind sie wirklich gleich bunt und
   nicht nur laut Quelltext. Gemessen: Text auf der Flaeche 11,0 bis 11,7:1, gegen das weisse
   Panel 1,54 bis 1,62:1. Hex-Werte als Fallback fuer Browser ohne oklch. */
.svc{padding:0 var(--pad) clamp(48px,6vw,96px)}
.svc__panel{max-width:var(--w);margin:0 auto;background:#FFFFFF;box-shadow:0 30px 80px -40px rgba(22,23,26,.35);padding:clamp(24px,3.2vw,56px) clamp(24px,3.2vw,56px) clamp(36px,4.4vw,72px)}
/* ⚠️ Drei GLEICHE Spalten. Vorher 1,5fr : 1fr : 1fr — solange in den Kaesten nur Schraffur lag,
   war das eine Betonung; mit Bildern darin sind es drei verschiedene Formate (gemessen 1,51 und
   1,01 bei 1440 px), und `object-fit: cover` schneidet dann bei Karte 1 oben und unten weg,
   bei 2 und 3 links und rechts — inklusive des Merkers in der Ecke. Gleiche Spalten, ein Format,
   nichts faellt weg. */
.svc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.2vw,56px);align-items:stretch}
/* Umbruch bei 1080 statt 960: bei 1000 px Fenster standen sonst drei Kacheln zu je 261 px
   nebeneinander — Massstab 0,52, der Text im Mockup kam mit 8 px an. Einspaltig ist die Kachel
   dort rund 900 px breit. */
@media (max-width:1080px){.svc__grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;height:100%}
/* Platzhalter: feine Schrägstreifen + Mono-Hinweis, was hier hingehört — alle gleich hoch */
.card__shot{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}
.card h3{font-size:clamp(1.5rem,2.1vw,1.9rem);font-weight:700;letter-spacing:-.03em;margin-top:clamp(16px,1.8vw,24px)}
.card__desc{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--body);max-width:46ch}
.card ul{margin-top:14px;display:grid;gap:6px;padding-bottom:clamp(20px,2.2vw,30px)}
.card li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.card li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.card__btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:space-between;gap:38px;padding:17px 20px;font-size:15px;font-weight:600;color:var(--ink);min-width:min(100%,260px);transition:background .25s,color .25s}
.card__btn svg{width:17px;height:17px;transition:transform .25s}
.card__btn:hover{background:var(--ink);color:#fff}
.card__btn:hover svg{transform:translateX(5px)}
.card--1 .card__btn{background:#fbbda6;background:oklch(85% 0.079 42)}
.card--2 .card__btn{background:#9fdebe;background:oklch(85% 0.079 162)}
.card--3 .card__btn{background:#c5c8ff;background:oklch(85% 0.079 282)}
/* ── Statement: dunkler Vollflächen-Akt nach dem Panel ── */
/* ⚠️ SEITENRAND GEHOERT AN DEN ABSCHNITT, NICHT IN DIE GEDECKELTE SPALTE. Hero und Statement
   hatten  UND  am selben Kasten — der Kasten ist dann
   1440 breit, aber 64 px davon sind Polster, der Inhalt beginnt also 64 px weiter innen als bei
   Faellen und Zitaten. Unter 1440 faellt das nicht auf, darueber schon: bei 1920 gemessen 304
   gegen 240. Beide bauen jetzt wie die anderen — Polster am Abschnitt, Deckel an der Spalte. */
.stmt{background:var(--ink);color:#fff;padding:clamp(88px,14vh,180px) var(--pad)}
.stmt__grid{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,3vw,48px)}
.stmt__aside{font-size:13px;color:rgba(255,255,255,.5);padding-top:4px;max-width:24ch}
.stmt h2{font-size:clamp(2.2rem,5.6vw,4.8rem);line-height:1.02;font-weight:700;letter-spacing:-.045em;color:#fff;max-width:18ch}
.stmt h2 em{font-style:normal;color:var(--accent)}
.stmt__lead{margin-top:clamp(22px,3vw,36px);font-size:clamp(16px,1.7vw,23px);line-height:1.55;color:rgba(255,255,255,.78);max-width:46ch;letter-spacing:-.012em}
/* ── Cases: weißes Panel im dunklen Akt, große Kennmarken links ── */
.cases{background:var(--ink);padding:0 var(--pad) clamp(72px,10vh,140px)}
.cases__grid{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,3vw,48px)}
/* Die Ueberschrift steht IM Panel und wird von dessen Polster nach unten geschoben; der
   Seitentext daneben nicht. Dasselbe Polster plus die 12 px der anderen Seitentexte bringt beide
   auf eine Linie — kein geratener Wert, sondern derselbe Ausdruck wie am Panel. */
.cases__aside{font-size:13px;color:rgba(255,255,255,.5);padding-top:calc(clamp(24px,3.2vw,56px) + 12px);max-width:20ch}
.cases__panel{background:#FFFFFF;color:var(--ink);padding:clamp(24px,3.2vw,56px)}
.cases__panel h2{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:700;letter-spacing:-.035em}
.crow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:center;padding:clamp(28px,3.6vw,52px) 0}
.crow+.crow{border-top:1px solid var(--rule)}
.crow:first-of-type{margin-top:clamp(16px,2vw,28px)}
/* Echte Bildschirmfotos der Kundenseiten statt Schraffur-Platzhalter (Userentscheid 28.08.2026).
   "object-position: top" zeigt den Kopf der Seite — dort steht die Aussage, und dort ist jede der
   drei Seiten auf den ersten Blick erkennbar. Breite und Hoehe stehen im Markup, damit der Platz
   schon vor dem Laden reserviert ist und die Zeile beim Nachladen nicht springt. */
.crow__shot{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;border:1px solid var(--rule);background:var(--paper2)}
.crow__text{font-size:clamp(15.5px,1.5vw,20px);line-height:1.5;color:var(--body);max-width:44ch;letter-spacing:-.01em}
.crow__text a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.crow__text a:hover{color:var(--accent-cta)}
/* ── Studio-Manifest: dunkler Akt mit Riesenzeile ── */
.about{background:var(--ink);color:#fff;padding:clamp(72px,10vh,140px) var(--pad)}
.about__in{max-width:var(--w);margin:0 auto}
/* Der Platzhalter neben der Ueberschrift ist raus (28.08.2026); ohne ihn braucht der Kopf keine
   zweite Spalte mehr — sonst stuende die Ueberschrift 300 px eingerueckt vor einer leeren Spur. */
.about__top{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,72px);align-items:start}
.about h2{font-size:clamp(3rem,9.4vw,8.6rem);line-height:.96;font-weight:700;letter-spacing:-.05em;color:#fff}
.about h2 em{font-style:normal;color:var(--accent)}
.about__rule{border:0;border-top:1px solid rgba(255,255,255,.2);margin:clamp(40px,6vw,84px) 0 clamp(26px,3.6vw,48px)}
.about__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px)}
.about__cols p{font-size:clamp(16.5px,1.8vw,24px);font-weight:600;line-height:1.4;letter-spacing:-.018em;max-width:26em}
/* ⚠️ MITTEN IM SATZ WIRD NICHT MEHR GEDIMMT. Der Entwurf setzte die zweite Satzhaelfte auf 45 %
   Weiss. Seit die Woerter beim Scrollen ankommen, sind das ZWEI Graustufen mit verschiedener
   Bedeutung — "noch nicht dran" und "absichtlich leiser" — und man kann sie nicht
   auseinanderhalten. Der Effekt sah dadurch aus, als bliebe er stecken (Usermeldung 28.08.2026:
   "bin fast durch und Text immer noch nicht weiss"). Der Endzustand ist jetzt einheitlich hell;
   die Betonung macht die Bewegung. Block-Ebene bleibt: der zweite Absatz (Kurzbio) ist weiter
   leiser als der erste — das ist eine Hierarchie ueber ganze Absaetze, keine mitten im Satz.
   Im About-Block bleibt es deshalb bei EINER Helligkeit; der Akzent ist dem Zitat vorbehalten,
   damit er dort etwas bedeutet und nicht ueberall gleichzeitig leuchtet. */
.about__cols p:last-child{color:rgba(255,255,255,.45)}
/* ── Auf-Scroll-Hervorhebung (dunkle Abschnitte) ─────────────────────────────────────────────
   Die Woerter kommen an, waehrend der Abschnitt durchs Fenster laeuft. Zwei Entscheidungen:
   1. Der ENDzustand ist `inherit` und damit exakt die Gestaltung von vorher — das Weiss der
      ersten Haelfte, das Grau von `.g` und der letzten Spalte. Eine eigene Zielfarbe wuerde die
      Zweitonigkeit plattmachen, die der Entwurf bewusst hat.
   2. Die Klasse `lit` setzt erst das SKRIPT. Ohne JS (oder wenn es scheitert) bleibt der Text
      vollstaendig hell — ein Ausfall darf nie unlesbaren Text hinterlassen.
   Gedimmt wird ueber die Farbe, nicht ueber `opacity`: Opazitaet auf Text verdirbt den Kontrast
   auch im Endzustand und ist genau die Falle aus `opacity-text-kills-wcag-contrast`. */
.lit .w{color:rgba(255,255,255,.16);transition:color .35s ease}
.lit .w.on{color:inherit}
@media (prefers-reduced-motion:reduce){.lit .w{color:inherit;transition:none}}
/* ── Kundenstimmen: dunkler Akt, Zitate als Slideshow ── */
.quotes{background:var(--ink);color:#fff;padding:clamp(72px,10vh,140px) var(--pad)}
.quotes__grid{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,3vw,48px)}
.quotes__aside{font-size:13px;color:rgba(255,255,255,.5);padding-top:13px;max-width:20ch}
/* Alle Slides teilen sich eine Grid-Zelle — der Akt ist so hoch wie das längste Zitat, nicht wie alle zusammen */
.quotes__stage{display:grid}
/* DIE ZUSCHREIBUNG STEHT IMMER AN DERSELBEN STELLE (Userentscheid 28.08.2026: „damit beim
   Wechsel das Auge nicht mitarbeiten muss"). Vorher hing sie direkt unter dem Zitat und sprang
   deshalb mit dessen Zeilenzahl — zwei Zeilen gegen drei sind gut 60 px Versatz.
   Der Trick steckt schon im Aufbau: alle Zitate liegen im SELBEN Rasterfeld (`grid-area:1/1`),
   die Feldhoehe ist also die des laengsten und aendert sich beim Wechsel nie. Als Spalte mit
   `flex:1` am Zitat wird die Zuschreibung an die Unterkante dieses Feldes gedrueckt — und die
   ist konstant. Kein `min-height` noetig, keine Zahl, die beim naechsten Zitat wieder falsch ist. */
.quote{grid-area:1/1;margin:0;display:flex;flex-direction:column;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.quote.on{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.quote{transition:none;transform:none}}
.quote blockquote{flex:1;margin:0;font-size:clamp(1.4rem,3.2vw,2.7rem);font-weight:700;line-height:1.28;letter-spacing:-.03em;color:#fff;max-width:26em;text-wrap:pretty}
/* DIE POINTE WIRD BETONT, NICHT ABGEDUNKELT. Im Entwurf lag  auf der zweiten Satzhaelfte —
   also auf genau dem Teil, der den Beweis traegt ("Heute steht die Rechnung, waehrend der Bagger
   noch laeuft") — und dimmte ihn auf 45 % Weiss. Rhetorisch war das verkehrt herum.
   Jetzt der Marken-Akzent, den der Entwurf ohnehin fuer dunkle Flaechen vorsieht. Bewusst KEIN
   zweites Grau: waehrend der Scroll-Effekt laeuft, muss "noch nicht dran" die einzige gedaempfte
   Stufe bleiben, sonst sieht der Effekt wieder aus, als haenge er. */
.quote blockquote em{font-style:normal;color:var(--accent)}
/* Der Portraet-Platzhalter ist raus (Userentscheid 28.08.2026). Ohne ihn braucht die Zuschreibung
   kein Flex mehr — Name und Rolle stehen als zwei Zeilen untereinander. */
.quote figcaption{margin-top:clamp(24px,3vw,40px)}
.quote figcaption b{display:block;font-size:16.5px;font-weight:700}
.quote figcaption p{font-size:13.5px;color:rgba(255,255,255,.5);margin-top:3px}
/* Slider-Steuerung: Namens-Tabs mit laufendem Füllbalken statt generischer Pfeile */
/* Die Zahl der Zitate steht nicht mehr im CSS. Vorher repeat(2, ...) — beim dritten Zitat waere
   es lautlos in eine zweite Reihe gerutscht. Als Flex-Zeile traegt die Leiste jede Anzahl, und
   auf schmalen Fenstern brechen die Reiter um, statt zu zerquetschen. */
.qtabs{margin-top:clamp(32px,4.4vw,60px);display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,28px)}
.qtab{flex:1 1 190px;max-width:260px}
.qtab{position:relative;text-align:left;background:none;border:0;padding:16px 0 0;cursor:pointer;color:rgba(255,255,255,.45);transition:color .3s}
.qtab::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.18)}
.qtab .bar{position:absolute;top:0;left:0;height:2px;width:0;background:var(--accent)}
.qtab.on{color:#fff}
.qtab:hover{color:#fff}
.qtab i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;margin-bottom:8px}
.qtab b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.qtab span{display:block;font-size:12.5px;margin-top:3px;color:rgba(255,255,255,.4)}
.qtab.on span{color:rgba(255,255,255,.6)}
/* ── Schluss-CTA: knalliger Orange-Block mit Portrait ── */
.cta{background:var(--paper);padding:clamp(56px,8vh,110px) var(--pad)}
.cta__block{max-width:var(--w);margin:0 auto;background:var(--accent-cta);color:#fff;display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1.4fr) minmax(220px,300px);align-items:center;gap:clamp(24px,3.4vw,56px)}
.cta__foto{margin:0;align-self:stretch;min-height:340px;position:relative;overflow:hidden}
.cta__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.cta__mitte{padding:clamp(32px,4.4vw,64px) 0}
.cta h2{font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.05;font-weight:700;letter-spacing:-.035em;color:#fff;max-width:18ch}
.cta__lead{margin-top:16px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.85);max-width:44ch}
.cta__zeile{margin-top:clamp(24px,3vh,36px);display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.cta__btn{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink);padding:16px 26px;font-size:15.5px;font-weight:600;transition:background .2s,color .2s}
.cta__btn:hover{background:var(--ink);color:#fff}
.cta__btn svg{width:16px;height:16px;transition:transform .25s}
.cta__btn:hover svg{transform:translateX(5px)}
/* WhatsApp-Knopf im Kontaktblock, direkt neben dem Termin-Knopf — bewusst KEINE schwebende Blase:
   diese Seite hat auf dem Handy keine untere Leiste, eine Blase wuerde dort Inhalt verdecken.
   Zweite Wahl statt erster: heller Rahmen auf dem Orange-Block, damit der Termin-Knopf der
   Hauptweg bleibt und WhatsApp der bequeme daneben. */
.cta__wa{display:inline-flex;align-items:center;gap:10px;padding:14.5px 24.5px;border:1.5px solid rgba(255,255,255,.55);color:#fff;font-size:15px;font-weight:600;transition:background .25s,border-color .25s}
.cta__wa:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.cta__wa svg{width:19px;height:19px;flex:0 0 auto}
@media (max-width:560px){.cta__zeile{flex-direction:column}.cta__btn,.cta__wa{width:100%;justify-content:center}}
.cta__zusage{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.8)}
.cta__k{padding:clamp(32px,4.4vw,64px) clamp(24px,3.4vw,56px) clamp(32px,4.4vw,64px) 0;display:grid}
.cta__k>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid rgba(255,255,255,.35);padding:14px 0}
.cta__k>div:last-child{border-bottom:1px solid rgba(255,255,255,.35)}
.cta__k dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.cta__k dd{font-size:14.5px;font-weight:600;text-align:right}
.cta__k a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cta__k a:hover{color:var(--ink)}
/* ── Footer: dunkel, gestapelt, Platz für viele Links ── */
.foot{background:var(--ink);color:#fff}
.foot__in{max-width:var(--w);margin:0 auto;padding:clamp(56px,8vh,100px) var(--pad) 0}
.foot__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:clamp(28px,3.6vw,56px)}
.foot__brand .brand{font-size:24px;color:#fff}
.foot__brand>p{margin-top:16px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.55);max-width:30ch}
.foot h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 16px}
.foot__col ul{display:grid;gap:10px}
.foot__col a{font-size:14.5px;color:rgba(255,255,255,.78)}
.foot__col a:hover{color:var(--accent)}
.foot__col a span{font-family:var(--mono);font-size:10.5px;color:rgba(255,255,255,.4);margin-left:6px}
.foot__bar{margin-top:clamp(48px,7vh,80px);border-top:1px solid rgba(255,255,255,.14);padding:20px 0 26px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;font-size:13px;color:rgba(255,255,255,.5)}
.foot__bar>:last-child{justify-self:end}
.foot__bar a{color:rgba(255,255,255,.5)}
.foot__bar a:hover{color:#fff}
.foot__bar .zeit{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em}
.foot__top a.mail{font-size:16px;font-weight:600;color:#fff}
.foot__top a.mail:hover{color:var(--accent)}
@media (max-width:960px){
.nav__links{display:none}
.burger{display:block}
.nav.is-open .m{position:fixed;inset:var(--nav-h) 0 auto 0;background:rgba(242,239,231,.97);backdrop-filter:blur(10px);display:grid;padding:8px var(--pad) 24px;border-bottom:1px solid var(--rule)}
.m a{padding:15px 0;border-top:1px solid var(--rule);font-size:18px;font-weight:600}
.hero__grid{grid-template-columns:1fr;padding-top:calc(var(--nav-h) + clamp(36px,7vh,72px))}
.hero__aside{padding-top:0}


.stmt__grid{grid-template-columns:1fr}
.stmt__aside{padding-top:0}
.cases__grid{grid-template-columns:1fr}
.cases__aside{padding-top:0}
.crow{grid-template-columns:1fr;gap:14px}
.about__top{grid-template-columns:1fr}
.about__cols{grid-template-columns:1fr}
.quotes__grid{grid-template-columns:1fr}
.quotes__aside{padding-top:0}
.foot__top{grid-template-columns:1fr 1fr}
.foot__brand{grid-column:1/-1}
.cta__block{grid-template-columns:1fr}
.cta__foto{min-height:300px}
.cta__mitte{padding:0 clamp(24px,4vw,40px)}
.cta__k{padding:0 clamp(24px,4vw,40px) clamp(28px,4vw,40px)}
}
@media (max-width:560px){.foot__top{grid-template-columns:1fr}
.foot__bar{grid-template-columns:1fr;justify-items:center;text-align:center}
.foot__bar>:last-child{justify-self:center}}
/* aktive Seite in der Navigation */
.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a[aria-current="page"]::after{right:0}
/* Footer-Leiste: Social als Icon-Kacheln statt Textzeile */
.foot__soc{display:flex;gap:8px;justify-content:center}
/* Die Zeichen tragen den Marken-Akzent; modvio behaelt seine eigenen Farben, weil es ein
   fremdes Produkt ist und nicht Teil dieser Marke.
   ⚠️ Hier stand einmal , um das modvio-Zeichen zu
   faerben. Die Regel traf aber JEDES Rechteck — auch den Rahmen des Instagram-Zeichens, das
   dadurch ein massiver Block statt einer Kontur war. Das modvio-Zeichen faerbt sich ueber sein
   eigenes fill-Attribut, es braucht hier gar nichts. */
.foot__soc a{width:42px;height:42px;display:grid;place-items:center;color:var(--accent);box-shadow:inset 0 0 0 1px rgba(242,101,34,.45);transition:background .22s,color .22s,box-shadow .22s}
.foot__soc a:hover{background:var(--accent);color:#16171A;box-shadow:none}
.foot__soc svg{width:18px;height:18px}