/* medienwald.de — gebündeltes Stylesheet.
   Reihenfolge: Design-Tokens (Schrift, Farbe, Typografie, Abstände, Effekte, Basis),
   danach die Seitenstile. Fürs Feintuning hier ansetzen. */

/* ===== fonts.css ==== */
/* Schriften — lizenzpflichtig (Helvetica Neue LT Std, Monotype).
   Ausgeliefert werden ausschließlich die sechs tatsächlich genutzten Schnitte unter neutralen
   Dateinamen. woff2 steht bewusst an erster Stelle: sobald die subsettierten woff2-Dateien
   im selben Ordner liegen, lädt der Browser nur diese — die otf-Zeile kann dann entfallen.
   Siehe FONTS-LIZENZ.md für Subsetting und Server-Einstellungen. */
@font-face{font-family:"Helvetica Neue LT Std";src:url("../assets/fonts/mw-core-100.woff2") format("woff2"),url("../assets/fonts/mw-core-100.otf") format("opentype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue LT Std";src:url("../assets/fonts/mw-core-200.woff2") format("woff2"),url("../assets/fonts/mw-core-200.otf") format("opentype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue LT Std";src:url("../assets/fonts/mw-core-300.woff2") format("woff2"),url("../assets/fonts/mw-core-300.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
/* Kein Medium-Schnitt geliefert: 400–500 werden auf Light gemappt, damit die Zuordnung eindeutig bleibt. */
@font-face{font-family:"Helvetica Neue LT Std";src:url("../assets/fonts/mw-core-300.woff2") format("woff2"),url("../assets/fonts/mw-core-300.otf") format("opentype");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue LT Std";src:url("../assets/fonts/mw-core-700.woff2") format("woff2"),url("../assets/fonts/mw-core-700.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
/* Extended — die Display-Schrift. Eigene Familie, nie in den Fließtext mischen. */
@font-face{font-family:"Helvetica Neue LT Std Ext";src:url("../assets/fonts/mw-ext-100.woff2") format("woff2"),url("../assets/fonts/mw-ext-100.otf") format("opentype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue LT Std Ext";src:url("../assets/fonts/mw-ext-200.woff2") format("woff2"),url("../assets/fonts/mw-ext-200.otf") format("opentype");font-weight:200 300;font-style:normal;font-display:swap}

/* ===== colors.css ==== */
:root{
/* Brand green — sampled from the logo SVG gradient stops */
--green-100:#f2f4e6;
--green-200:#e2e6c9;
--green-300:#cbd196;
--green-400:#bbc173;
--green-500:#aab248;
--green-600:#a7af49;
--green-700:#858d4a;
--green-800:#6f7a2c;
--green-900:#4d5520;

/* Neutrals — German CD greys, no blue cast */
--grey-0:#ffffff;
--grey-50:#fafafa;
--grey-100:#f4f4f4;
--grey-200:#ededed;
--grey-300:#dadada;
--grey-400:#c6c6c6;
--grey-500:#9d9d9c;
--grey-600:#878787;
--grey-700:#575756;
--grey-800:#3c3c3b;
--grey-900:#1d1d1b;

/* Semantic */
--text-heading:var(--grey-700);
--text-body:var(--grey-700);
--text-muted:var(--grey-600);
--text-accent:var(--green-700);
--text-inverse:var(--grey-0);
--text-on-green:var(--grey-0);

--surface-page:var(--grey-0);
--surface-card:var(--grey-0);
--surface-subtle:var(--grey-100);
--surface-green:var(--green-500);
--surface-green-soft:var(--green-100);

--border-hairline:var(--grey-300);
--border-subtle:var(--grey-200);
--border-green:var(--green-400);

--focus-ring:#4a90d9;
--link:var(--green-700);
--link-hover:var(--green-500);

/* Gradients — the signature "Waldgradient" */
--gradient-forest:linear-gradient(0deg,#60643e 0%,#959f3a 100%); /* @kind color */
--gradient-forest-soft:linear-gradient(180deg,#959f3a 0%,#60643e 100%); /* @kind color */
--gradient-logo:linear-gradient(160deg,#bbc173 0%,#a7af49 55%,#858d4a 100%); /* @kind color */
/* Protection scrim behind the docked wordmark: white fading down, top strip only. */
--gradient-scrim-top:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.92) 48%,rgba(255,255,255,0) 100%); /* @kind color */
/* White "Lichtschein" fade laid OVER a photograph's edges so it dissolves into the page.
   Used on smaller/inset images; never as a background behind type. */
--gradient-photo-fade:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.65) 14%,rgba(255,255,255,0) 42%); /* @kind color */
/* Light wash retained for section backgrounds other than the hero */
--gradient-page-glow:radial-gradient(120% 90% at 8% 0%,#ffffff 0%,#f7f7f6 45%,#ededec 100%); /* @kind color */
}

/* ===== typography.css ==== */
:root{
--font-display:"Helvetica Neue LT Std Ext","Helvetica Neue",Helvetica,sans-serif;
--font-core:"Helvetica Neue LT Std","Helvetica Neue",Helvetica,sans-serif;

--weight-ultralight:100; /* display sizes only — see fonts.css */
--weight-thin:200;
--weight-light:300;
--weight-medium:500; /* Eyebrows/Labels. Kein echter Medium-Schnitt geliefert — auf den Light-Schnitt gemappt (fonts.css). */
--weight-bold:700;
--weight-black:900;

/* Fluid scale — every step is clamp(min, base + Xvh + Yvw, max), so type answers to both
   viewport axes. The vh term keeps headings from swamping short/landscape screens. */
--size-display-xl:clamp(30px, 22px + 2.60vh + 3.40vw, 118px);
--size-display-l:clamp(26px, 19px + 2.18vh + 2.86vw, 98px);
--size-display-m:clamp(24px, 17px + 1.70vh + 2.24vw, 76px);
--size-h1:clamp(24px, 19px + 2.18vh + 2.86vw, 98px);
--size-h2:clamp(22px, 15px + 1.45vh + 1.90vw, 64px);
--size-h3:clamp(19px, 14px + 0.85vh + 1.10vw, 40px);
--size-lead:clamp(17px, 15px + 0.36vh + 0.48vw, 25px);
--size-body:clamp(15px, 14px + 0.22vh + 0.30vw, 20px);
--size-body-s:clamp(14px, 13px + 0.18vh + 0.24vw, 17px);
--size-caption:clamp(12px, 12px + 0.10vh + 0.14vw, 15px);
--size-label:clamp(9px, 9px + 0.08vh + 0.11vw, 12px);

/* Column-scoped steps. The viewport steps above are correct for full-width type; inside a narrow
   column they overgrow it. These read cqw (percent of the CONTAINER inline size), so a column that
   is half the viewport gets half-scale type. Requires container-type: inline-size on the column. */
--size-col-h1:clamp(24px, 7.9cqw, 88px);
--size-col-h2:clamp(21px, 6.2cqw, 64px);
--size-col-h3:clamp(18px, 5.1cqw, 40px);
--size-col-lead:clamp(15px, 3.2cqw, 24px);
--size-col-body:clamp(14px, 2.6cqw, 19px);

--leading-tight:1.08;
--leading-display:1.16;
--leading-heading:1.28;
--leading-body:1.62;
--leading-loose:1.8;

--track-display:0.04rem;
--track-display-tight:-0.005em;
--track-body:0; /* @kind font */
--track-label:0.18em;
--track-label-tight:0.1em;
}

/* ===== spacing.css ==== */
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:128px;
--space-11:180px;

--gutter:24px;
--container-max:1360px;
--container-text:720px;
--section-y:var(--space-10);
--section-y-tight:var(--space-9);
}

/* ===== effects.css ==== */
:root{
--radius-none:0;
--radius-s:4px;
--radius-m:12px;
--radius-l:24px;
--radius-pill:999px;
--radius-circle:50%;

/* Photography sits on soft, wide, almost colourless shadows */
--shadow-card:0 2px 18px rgba(29,29,27,.07);
--shadow-raised:0 12px 40px rgba(29,29,27,.10);
--shadow-float:0 24px 70px rgba(29,29,27,.13);
--shadow-none:none;

--border-hair:1px solid var(--border-hairline); /* @kind other */
--rule-green:1px solid var(--green-400); /* @kind other */

--ease-standard:cubic-bezier(.25,.1,.25,1); /* @kind other */
--ease-out-soft:cubic-bezier(.16,.84,.44,1); /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:280ms; /* @kind other */
--dur-slow:600ms; /* @kind other */
--dur-reveal:900ms; /* @kind other */
}

/* ===== base.css ==== */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-body);line-height:var(--leading-body);text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--weight-thin);line-height:var(--leading-display);letter-spacing:var(--track-display);color:var(--text-heading)}
h1{font-size:var(--size-h1)}h2{font-size:var(--size-h2)}h3{font-size:var(--size-h3);font-weight:var(--weight-light)}
p{margin:0 0 var(--space-5);hyphens:manual}
/* German compounds are broken with ­ in the markup, never by the browser's hyphenator. */
body{hyphens:manual}
/* Phone numbers, e-mail addresses and URLs are single units — never break them, not even at spaces. */
a[href^="tel:"],a[href^="mailto:"],.mw-nowrap{white-space:nowrap}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--link-hover)}
img{display:block;max-width:100%}
::selection{background:var(--green-200);color:var(--grey-800)}
.mw-eyebrow{font-size:var(--size-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-accent);font-weight:var(--weight-medium)}
.mw-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-7)}

/* ===== site.css =============================================== */
html{scroll-behavior:smooth}
/* One fixed outer gutter for every section, image and grid on the page. */
/* Zwei Kanten: --page-x = Außenkante (Bilder, Karten, ca. 90% Inhaltsbreite),
   --text-x = Schriftkante (Hero-Headline und alle linksbündigen Texte). */
/* Die Schriftkante wird aus dem 12er-Raster abgeleitet: genau eine Spalte + ein Gutter.
   Damit sitzen Hero, Kontakt, Leistungen, Captions und Insets auf Rasterlinie 2. */
:root{--page-x:clamp(20px,3.6vw,92px);--sbw:0px;--col:calc((100vw - var(--sbw) - 2*var(--page-x) - 11*var(--grid-gap))/12);--indent:calc(var(--col) + var(--grid-gap));--text-x:calc(var(--page-x) + var(--indent));--grid-max:2100px}
@media (max-width:900px){:root{--page-x:20px;--indent:0px;--text-x:20px}}
section:not(#start){padding-left:var(--page-x)!important;padding-right:var(--page-x)!important}
/* Type: the design system's fluid ramp runs very large on wide screens — the caps and the
   vw coefficients are pulled back here so headlines stay in scale on big displays. */
:root{
--size-display-xl:clamp(30px,22px + 1.7vh + 2.1vw,82px);
--size-display-l:clamp(26px,19px + 1.4vh + 1.8vw,70px);
--size-display-m:clamp(24px,17px + 1.1vh + 1.5vw,56px);
--size-h1:clamp(24px,19px + 1.4vh + 1.8vw,70px);
--size-h2:clamp(22px,15px + 0.95vh + 1.25vw,46px);
--size-h3:clamp(19px,14px + 0.6vh + 0.8vw,31px);
--size-lead:clamp(17px,15px + 0.26vh + 0.34vw,21px);
--size-body:clamp(15px,14px + 0.16vh + 0.22vw,18px);
--size-col-h1:clamp(24px,6.4cqw,64px);
--size-col-h2:clamp(21px,5.1cqw,46px);
--size-col-h3:clamp(18px,4.2cqw,31px);
--size-col-lead:clamp(15px,2.7cqw,21px);
--size-col-body:clamp(14px,2.3cqw,18px);
}
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-core);font-weight:var(--weight-light);margin:0;overflow-x:hidden}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast,160ms) cubic-bezier(.25,.1,.25,1)}
a:hover{color:var(--link-hover)}
.mw-reveal{opacity:0;transform:translateY(4px);transition:opacity var(--dur-reveal,900ms) cubic-bezier(.16,.84,.44,1),transform var(--dur-reveal,900ms) cubic-bezier(.16,.84,.44,1)}
.mw-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mw-reveal{opacity:1!important;transform:none!important;transition:none}}
footer{line-height:1.3}
footer li,footer p,footer span,footer a,footer div{line-height:1.3}
.mw-services{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:1200px) and (min-width:901px){.mw-services{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mw-services>*{display:grid}
.sv-card{height:100%;display:flex;flex-direction:column;background:var(--surface-card);box-shadow:var(--shadow-card);transition:box-shadow var(--dur-base,280ms) cubic-bezier(.25,.1,.25,1),transform var(--dur-base,280ms) cubic-bezier(.16,.84,.44,1)}
.sv-card:hover{box-shadow:var(--shadow-raised);transform:translateY(-4px)}
.sv-media{flex:0 0 auto;aspect-ratio:4 / 3;overflow:hidden;background:var(--surface-subtle)}
.sv-media .mw-slot{width:100%;height:100%}
.sv-body{flex:1 1 auto;display:flex;flex-direction:column;text-decoration:none;padding:clamp(14px,1.4vw,22px) clamp(14px,1.4vw,22px) clamp(18px,1.8vw,26px)}
.sv-title{font-family:var(--font-core);font-weight:var(--weight-thin);color:var(--text-heading);font-size:clamp(14px,1.15vw,22px);line-height:1.28;min-height:2.56em}
.sv-meta{margin-top:auto;padding-top:12px;font-size:clamp(10px,.62vw,13px);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-accent)}
@media (max-width:900px){
.mw-services{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;padding-bottom:8px;scrollbar-width:none;margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
.mw-services::-webkit-scrollbar{display:none}
.mw-services>*{flex:0 0 76%;scroll-snap-align:center}
.mw-services{cursor:grab}
.sv-title{font-size:17px!important;min-height:0}
}
.mw-nav:not(.is-open){transform:translateY(-120%);visibility:hidden;transition:opacity var(--dur-base,280ms) var(--ease-out-soft),transform 0s linear var(--dur-base,280ms),visibility 0s linear var(--dur-base,280ms)!important}
.mw-nav.is-open{transform:none;visibility:visible;transition:opacity var(--dur-base,280ms) var(--ease-out-soft)!important}
.mw-nav,.mw-nav a,.mw-nav div,.mw-nav nav a{font-family:var(--font-display)!important;font-weight:var(--weight-thin)!important;letter-spacing:var(--track-display)}
.wm-dialog,.wm-dialog input,.wm-dialog textarea,.wm-dialog button,.wm-dialog a,.wm-dialog div,.wm-dialog p,.wm-dialog span{font-family:var(--font-display)!important;font-weight:var(--weight-thin)!important;letter-spacing:var(--track-display)}
/* Raster-Overlay zum Prüfen — nur über den Tweak sichtbar, nie im Livebetrieb. */
.mw-gridlines{position:fixed;top:0;bottom:0;left:0;right:0;z-index:0;pointer-events:none;padding-inline:var(--page-x);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.mw-gridlines span{background:rgba(133,141,74,.05);box-shadow:inset 1px 0 0 rgba(87,87,86,.14),inset -1px 0 0 rgba(87,87,86,.14)}
.mw-gridlines::before,.mw-gridlines::after{content:"";position:fixed;top:0;bottom:0;width:1px;background:rgba(87,87,86,.28)}
/* Die Seite selbst liegt darüber, der Body wird transparent, damit das Raster durchscheint. */
body.has-grid{background:var(--surface-page)}
/* Ebenen: Rasterlinien 0 < Stift-Badge 70 < Inhalt/Sticky-Leiste 75 < dockendes Logo 78 < Menü 140.
   main ist ein eigener Stacking Context — sein z-index entscheidet gegen Badge und Logo. */
body.has-grid main{position:relative;z-index:75}
body.has-grid footer{position:relative;z-index:2}
body.has-grid main section:not(.rg-band),body.has-grid footer{background:transparent!important}
.mw-gridlines.is-front{z-index:200;background:none}
.mw-gridlines.is-front span{background:none;box-shadow:inset 1px 0 0 rgba(87,87,86,.22),inset -1px 0 0 rgba(87,87,86,.22)}
/* Dauerhaft sichtbare Rasterlinien (alle Seiten): linke Kante jeder Spalte ab Spalte 2,
   feine Haarlinie, hinter dem Inhalt. */
.mw-gridlines.is-hair{z-index:0}
.mw-gridlines.is-hair span{background:none;box-shadow:none}
/* Seitenkopf auf Leistungen und Kontakt: gleiche Schriftkante wie Hero und Arbeiten,
   dabei breiterer Satz. Die Breitenbegrenzung sitzt auf den Textblöcken, nicht auf dem
   Container — sonst verlieren vollflächige Kinder (Karte, Formularband) ihre Kanten. */
.pg-intro{padding-left:var(--indent)}
.pg-intro h1{max-width:28ch!important}
.pg-intro .pg-intro-body,.pg-intro .kt-intro{max-width:calc(9*var(--col) + 8*var(--grid-gap))!important}
@media (max-width:900px){.pg-intro{padding-left:0}.pg-intro .pg-intro-body,.pg-intro .kt-intro{max-width:none!important}}
/* Der zweite Kontaktblock erbt die Schriftkante; Karte und Formularband ziehen ihre Kanten
   in kontaktseite.css selbst zurück — hier keine zusätzliche Verschiebung. */
.pg-intro .kt-form{margin-left:auto}
/* Schutzstreifen oben: nur so hoch wie die Wortmarke (Unterkante ≈ 87px) — deckend bis 64px,
   danach auf 0. Ab 96px beginnt der Seiteninhalt und bleibt unverdeckt. */
.mw-scrim-top{height:96px!important;background:linear-gradient(#fff 0,#fff 64px,rgba(255,255,255,0) 100%)!important}
/* Wortmarke: Breite wächst mit dem Fenster — nie kleiner als die Mobilgröße.
   Position kommt aus der Komponente: auf der Startseite ruht sie unten rechts und dockt beim
   Scrollen oben an (top 40px) — genau die Position, die sie auf den Unterseiten dauerhaft hat. */
.mw-dock-logo,.mw-dock-logo.is-scrolled{width:clamp(140px,15vw,236px)!important;width:round(clamp(140px,15vw,236px),1px)!important}
/* Scharf auf Nicht-Retina: Wortmarke auf ganze Pixel setzen (Breite und Position), kein Subpixel-Versatz. */
.mw-dock-logo img{display:block;width:100%;height:auto;image-rendering:auto;backface-visibility:hidden}
/* Desktop: Wortmarke rechts oben (fixiert), Burger links oben. Mobil umgekehrt (siehe unten).
   Der weiche Verlauf oben liegt dauerhaft hinter beiden. */
@media (min-width:901px){
.mw-dock-logo,.mw-dock-logo.is-scrolled{position:fixed!important;right:var(--page-x)!important;right:round(var(--page-x),1px)!important;left:auto!important;top:16px!important;bottom:auto!important}
/* Burger und X auf der Mittelachse der Wortmarke. */
.mw-burger{right:auto!important;left:var(--page-x)!important;top:28px!important}
.mw-scrim-top{opacity:1!important}
/* Sonderfall Startseite (nur Desktop): Wortmarke steht unten rechts und scrollt normal mit
   dem Inhalt nach oben; an der Andockposition (16px) bleibt sie stehen.
   --sy = Scrollposition (per JS), Höhe der Marke = Breite × 0,3345. */
.mw-dock-logo{transition:none!important}
.mw-dock-logo.is-hero{top:max(16px,round(calc(100vh - 40px - .3345 * clamp(140px,15vw,236px) - var(--sy,0px)),1px))!important}
html:not(.logo-docked) body:has(.mw-dock-logo.is-hero) .mw-scrim-top{opacity:0!important}
}
/* Rasterlinien ausgeblendet — zum Prüfen der Ausrichtung einfach diese Regel entfernen
   (sichtbar wären dann die Linien 3, 7 und 11). */
.mw-gridlines.is-hair{display:none}
.mw-gridlines.is-hair span:nth-child(3),.mw-gridlines.is-hair span:nth-child(7),.mw-gridlines.is-hair span:nth-child(11){box-shadow:inset 1px 0 0 rgba(87,87,86,.07)}
.mw-gridlines.is-hair::before,.mw-gridlines.is-hair::after{display:none}
@media (max-width:900px){.mw-gridlines.is-hair{display:none}}
.mw-gridlines::before{left:var(--text-x)}
.mw-gridlines::after{right:var(--page-x)}
/* 12-Spalten-Raster (Bootstrap-Logik) — läuft innerhalb der Section, also zwischen den
   --page-x-Kanten. .mw-col-<n> setzt den Startpunkt, der Block läuft bis Spalte 12. */
:root{--grid-gap:clamp(16px,2.4vw,48px)}
.mw-grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.mw-col-1{grid-column:1/-1}.mw-col-2{grid-column:2/-1}.mw-col-3{grid-column:3/-1}.mw-col-4{grid-column:4/-1}
.mw-col-5{grid-column:5/-1}.mw-col-6{grid-column:6/-1}.mw-col-7{grid-column:7/-1}
@media (max-width:900px){.mw-grid12>*{grid-column:1/-1!important}}
/* Markenwand — Drop-Felder für die Kundenlogos, drei Spalten wie in der Vorlage. */
.mk-wall{margin-top:clamp(56px,9vh,110px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:clamp(40px,7vh,96px)}
.mk-cell{grid-column:span 4}
.mk-cell{display:grid;place-items:center;min-height:clamp(90px,11vh,150px)}
.mk-cell .mw-slot{width:100%;height:clamp(90px,11vh,150px);background:transparent;--slot-frame-bg:transparent;filter:grayscale(1);opacity:.72;transition:opacity var(--dur-base,280ms) cubic-bezier(.25,.1,.25,1)}
.mk-cell .mw-slot:hover{opacity:1}
@media (max-width:900px){.mk-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.mk-cell{grid-column:auto!important}}
/* Project showcase (Projekte) */
.pj-list{margin-top:clamp(64px,10vh,128px);display:grid;gap:clamp(88px,14vh,180px)}
.pj-stage{position:relative}
.pj-big{width:100%;margin:0}
.pj-item.is-flip .pj-big{margin:0}
.pj-inset{position:absolute;left:var(--indent);bottom:-18%;width:22%;min-width:180px;will-change:transform}
.pj-item.is-flip .pj-inset{left:auto;right:var(--indent)}
/* Captions sitzen immer links auf Spalte 5 des 12er-Rasters — auch bei gespiegelten Projekten. */
.pj-caption{display:grid;justify-items:start;gap:16px;box-sizing:border-box;width:100%;margin:clamp(28px,4vh,60px) 0 0;grid-column:5/12}
.pj-item.is-flip .pj-caption{grid-column:2/9;margin-left:0}
.pj-item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.pj-item>.pj-stage{grid-column:1/-1}

.pj-text{margin:0;max-width:58ch;font-style:italic;font-size:var(--size-lead);line-height:1.5;color:var(--grey-600);text-wrap:pretty}
.pj-rule{display:block;width:64px;height:1px;background:var(--green-700)}
.pj-client{font-size:var(--size-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--green-700)}
@media (max-width:900px){
.ft-top>*,.ft-social>*,.rg-block>*,.kt-block>*{grid-column:1/-1!important}

.pj-inset{display:none}
.pj-big,.pj-item.is-flip .pj-big{width:100%;margin:0}
.pj-caption,.pj-item.is-flip .pj-caption{width:100%;margin:28px 0 0!important;grid-column:1/-1!important}
.pj-list{gap:clamp(56px,9vh,96px)}
}
.wm-scrim{position:fixed;inset:0;z-index:120;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);display:grid;place-items:start center;overflow:auto;padding:clamp(24px,6vh,72px) 24px;animation:wm-in var(--dur-base,280ms) cubic-bezier(.25,.1,.25,1)}
@keyframes wm-in{from{opacity:0}to{opacity:1}}
.wm-dialog{position:relative;box-sizing:border-box;width:min(560px,94vw);background:var(--grey-0);border:1px solid var(--border-subtle);box-shadow:var(--shadow-float);padding:clamp(32px,4vw,52px);display:grid;gap:28px}
.wm-close{position:absolute;top:22px;right:22px;width:26px;height:26px;background:none;border:0;padding:0;cursor:pointer}
.wm-close span{position:absolute;left:0;top:12px;width:26px;height:1px;background:var(--green-700)}
.wm-close span:first-child{transform:rotate(45deg)}
.wm-close span:last-child{transform:rotate(-45deg)}
.wm-head{display:grid;justify-items:center;text-align:center;gap:18px}
.wm-head>div{display:grid;justify-items:center;gap:10px}
.wm-portrait{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center 18%}
.wm-name{font-family:var(--font-display);font-weight:var(--weight-thin);letter-spacing:var(--track-display);font-size:var(--size-h3);color:var(--text-heading);line-height:1.2;margin:0}
.wm-form{display:grid;gap:16px}
.wm-textarea,.wm-field{width:100%;box-sizing:border-box;font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-body-s);color:var(--text-body);background:var(--grey-0);border:1px solid var(--border-hairline);border-radius:var(--radius-pill,999px);padding:16px 22px;outline:none;transition:border-color var(--dur-fast,160ms) cubic-bezier(.25,.1,.25,1)}
.wm-textarea{border-radius:22px;resize:vertical;line-height:1.5;min-height:84px}
.wm-textarea:focus,.wm-field:focus{border-color:var(--green-500);box-shadow:0 0 0 2px rgba(74,144,217,.28)}
.wm-textarea::placeholder,.wm-field::placeholder{color:var(--grey-500)}
.wm-submit{width:100%;border:0;border-radius:var(--radius-pill,999px);background:var(--green-700);color:var(--text-on-green);font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-body-s);letter-spacing:.06em;padding:17px 24px;cursor:pointer;transition:background var(--dur-fast,160ms) cubic-bezier(.25,.1,.25,1)}
.wm-submit:hover{background:var(--green-800)}
.wm-thanks{margin:0;font-size:var(--size-lead);font-weight:var(--weight-light);color:var(--green-700);line-height:1.5}
.wm-or{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
.wm-or::before,.wm-or::after{content:"";height:1px;background:var(--border-subtle)}
.wm-or span{font-size:var(--size-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--green-700)}
.wm-direct{display:grid;grid-template-columns:1fr auto;gap:14px}
.wm-pill{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--green-400);border-radius:var(--radius-pill,999px);padding:14px 24px;text-decoration:none;color:var(--green-700);transition:background var(--dur-fast,160ms) cubic-bezier(.25,.1,.25,1),color var(--dur-fast,160ms) cubic-bezier(.25,.1,.25,1)}
.wm-pill:hover{background:var(--green-100);color:var(--green-700)}
.wm-pill-wide{width:100%;box-sizing:border-box}
.wm-pill svg{flex:0 0 auto}
.wm-pill-label{font-size:var(--size-label);text-transform:uppercase;letter-spacing:var(--track-label)}
.wm-pill-value{font-size:var(--size-body-s)}
@media (max-width:560px){.wm-direct{grid-template-columns:1fr}}
/* Mobil: kompakter Dialog, damit Formular und Direktwege ohne Scrollen sichtbar bleiben. */
@media (max-width:700px){
.wm-scrim{padding:14px 12px;place-items:start center}
.wm-dialog{padding:22px 18px;gap:14px;width:100%}
.wm-head{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:14px;align-items:center}
.wm-head>div{justify-items:start;gap:4px}
.wm-portrait{width:56px;height:56px}
.wm-name{font-size:var(--size-lead)}
.wm-textarea{min-height:64px;padding-top:12px;padding-bottom:12px}
.wm-or{margin:2px 0}
}
/* Buttons and pill actions: optically centred label, vertically and horizontally, everywhere. */
button,.mw-btn,a.mw-btn,.wm-submit,.wm-pill,.lp-chip{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;box-sizing:border-box}
/* Alle Buttons einer Reihe gleich hoch, Label exakt in der Mitte. */
.lp-chip,.mw-btn,a.mw-btn{height:48px;min-height:48px;padding-top:0!important;padding-bottom:0!important}
.wm-submit,.wm-pill{display:flex;min-height:52px;padding-top:0!important;padding-bottom:0!important}
.lp-chip{min-height:48px;padding:0 26px;border:1px solid var(--green-400);border-radius:var(--radius-pill,999px);background:var(--grey-0);color:var(--green-700);font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-body-s);letter-spacing:var(--track-label-tight);text-decoration:none;transition:background var(--dur-fast,160ms) cubic-bezier(.25,.1,.25,1),color var(--dur-fast,160ms) cubic-bezier(.25,.1,.25,1),border-color var(--dur-fast,160ms) cubic-bezier(.25,.1,.25,1)}
.lp-chip:hover{background:var(--green-700);border-color:var(--green-700);color:var(--text-on-green)}
.mw-writeme{position:fixed;left:16px;right:auto;transform:none;bottom:28px;top:auto;z-index:145;background:none;border:0;border-radius:0;padding:0;line-height:0;cursor:pointer;opacity:.9;transition:opacity var(--dur-base,280ms) cubic-bezier(.25,.1,.25,1)}
.mw-writeme:hover{opacity:1}
.mw-writeme img{display:block;width:56px;height:auto}
/* Keep body copy clear of the fixed badge until the centred container leaves room by itself. */
@media (max-width:900px){
.mw-nav{padding-inline:var(--page-x)!important;grid-template-columns:1fr!important;align-content:start!important;row-gap:32px!important;overflow-y:auto}
/* Mobil strikt untereinander: Navigation, dann Adresse/Mobil, dann Social. */
.mw-nav>nav{order:1!important}
.mw-nav>div:nth-of-type(1){order:2!important}
.mw-nav>div:last-child{order:3!important}
.mw-nav nav a{font-size:32px!important;line-height:1.22!important;font-weight:var(--weight-ultralight)!important}
.mw-nav>button{left:auto!important;right:20px!important;top:24px!important}
.mw-nav>div:nth-of-type(1){display:grid!important;grid-template-columns:1fr!important;align-content:start!important;justify-items:start!important;text-align:left!important;gap:22px!important}
.mw-nav>div:nth-of-type(1)>div{display:grid!important;grid-template-columns:1fr!important;justify-items:start!important;text-align:left!important;gap:6px!important}
.mw-nav>div:nth-of-type(1) div{font-size:14px!important}
.mw-nav a[href^="tel"],.mw-nav>div:nth-of-type(1)>div:last-child>div{font-size:20px!important;line-height:1.35!important}
.mw-nav>div:last-child{grid-column:1!important;margin-top:12px!important}
.mw-nav>div:last-child a{width:40px!important;height:40px!important;border-radius:50%!important;flex:0 0 auto!important}
.mw-writeme{left:14px!important;right:auto!important;transform:none!important;bottom:18px!important;top:auto!important;padding:0!important}
.mw-writeme img{width:44px!important}
#start{grid-template-columns:1fr!important;min-height:100vh!important;position:relative}
#start>div:nth-child(3){position:absolute!important;inset:0;z-index:0;opacity:.28;min-height:0}
#start>div:nth-child(2){position:relative;z-index:1;padding-top:clamp(120px,18vh,200px)!important;padding-bottom:clamp(96px,14vh,160px)!important}
#leistungen [data-detail],.mw-detail,#arbeiten article,.rf-item{grid-template-columns:1fr!important}
#arbeiten article>div,.rf-item>*{grid-column:1!important;grid-row:auto!important}
#start>div:nth-child(2){padding-left:var(--page-x)!important;padding-right:var(--page-x)!important}
/* Burger to the top RIGHT, wordmark to the LEFT on small screens. */
.mw-burger{left:auto!important;right:20px!important;top:24px!important}
/* Mobil: Wortmarke links oben, nicht fixiert — der Kopf scrollt mit. */
.mw-dock-logo,.mw-dock-logo.is-scrolled{position:absolute!important;left:var(--page-x)!important;right:auto!important;top:20px!important;width:140px!important}
.mw-dock-logo.is-scrolled{display:none!important}
.mw-scrim-top{display:none!important}
}

/* Leistungen-Akkordeon: Haarlinien-Zeilen, quadratisch, kein Rahmen, kein Schatten. */
/* Labels sitzen unter der Linie: Beschriftung und Feld in umgekehrter Reihenfolge. */
#root label:has(>select),#root label:has(>textarea),#root label:has(>input:not([type="checkbox"])){display:flex!important;flex-direction:column-reverse;align-items:stretch;gap:8px}
/* Auswahlfeld erkennbar machen: kleine grüne Pfeilspitze am Label — das <select> selbst
   trägt ein Inline-background, deshalb sitzt der Pfeil am umgebenden Label. */
#root label:has(>select){position:relative}
#root label:has(>select)::before{content:"\25BE";position:absolute;right:2px;top:0;height:var(--select-line,42px);display:flex;align-items:center;font-size:12px;line-height:1;color:var(--green-700);pointer-events:none}
#root select{padding-right:22px!important}
/* Auswahlfeld darf seine Rasterspalte nicht überschreiten (längste Option zwingt sonst die Breite). */
#kontakt label,#kontakt select,#kontakt input,#kontakt textarea{max-width:100%;min-width:0;width:100%;box-sizing:border-box}
.ac-headline{grid-column:3/11;font-family:var(--font-display);font-weight:var(--weight-thin);font-size:var(--size-h2);letter-spacing:var(--track-display);line-height:1.28;color:var(--text-heading);margin:0 0 clamp(32px,5vh,64px);text-align:center}
.ac-list{grid-column:3/11;display:grid;width:auto;margin:0}
.ac-row{border-top:1px solid var(--border-subtle)}
.ac-row:last-child{border-bottom:1px solid var(--border-subtle)}
.ac-head{position:relative;width:100%;background:none;border:0;padding:clamp(28px,4.2vh,52px) 0;display:block;cursor:pointer;text-align:center;color:inherit}
.ac-title{font-family:var(--font-display);font-weight:var(--weight-thin);font-size:var(--size-h3);letter-spacing:var(--track-display);line-height:1.28;color:var(--text-heading);margin:0;transition:color var(--dur-fast,160ms) var(--ease-out,cubic-bezier(.25,.1,.25,1))}
.ac-head:hover .ac-title,.ac-row.is-open .ac-title{color:var(--green-700)}
.ac-sign{position:absolute;right:0;left:auto;top:50%;transform:translateY(-50%);width:28px;height:28px;opacity:0;transition:opacity var(--dur-fast,160ms) linear}
.ac-head:hover .ac-sign,.ac-head:focus-visible .ac-sign,.ac-row.is-open .ac-sign{opacity:1}
@media (hover:none){.ac-sign{opacity:1}}
.ac-sign i{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--green-700);transition:transform var(--dur-base,280ms) var(--ease-out-soft,cubic-bezier(.16,.84,.44,1))}
.ac-sign i:last-child{transform:rotate(90deg)}
.ac-row.is-open .ac-sign i:last-child{transform:rotate(90deg) scaleX(0)}
.ac-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base,280ms) var(--ease-out-soft,cubic-bezier(.16,.84,.44,1)),opacity var(--dur-base,280ms) linear;opacity:0}
.ac-row.is-open .ac-panel{grid-template-rows:1fr;opacity:1}
.ac-panel-inner{overflow:hidden;display:grid;gap:22px;justify-items:center;text-align:center}
.ac-row.is-open .ac-panel-inner{padding-bottom:clamp(32px,4.6vh,56px)}
.ac-text{margin:0 auto;max-width:640px;font-size:var(--size-body);line-height:1.62;color:var(--text-muted)}
.ac-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.ac-tags li{font-size:var(--size-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--green-700)}
@media (max-width:900px){.ac-list,.ac-headline{grid-column:1/-1!important}.ac-head{padding:24px 0}.ac-sign{width:24px;height:24px;opacity:1}}

/* Menü liegt über allem — auch über dem Burger, dessen Ecke im Overlay zum X wird. */
.mw-nav{z-index:140!important}
.mw-burger{z-index:100!important}
/* Zweispaltige Inhaltszeilen brechen erst unter 680px um — zwischen 681 und 900px
   bleibt das Raster stehen (nur Menü und Chrome sind schon im Mobilmodus). */
@media (min-width:681px) and (max-width:900px){
.rf-item{grid-template-columns:repeat(12,minmax(0,1fr))!important}
.rf-media{grid-column:1/8!important;grid-row:1!important}
.rf-item.is-flip .rf-media{grid-column:6/-1!important}
.rf-text{grid-column:8/-1!important;grid-row:1!important}
.rf-item.is-flip .rf-text{grid-column:1/6!important}
.kt-trio{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.kt-form{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:none!important}
}
@media (min-width:901px){
/* Close-Button: auf der Rasterkante, gleiche Höhe wie der Burger. */
.mw-nav>button{right:auto!important;left:var(--page-x)!important;top:28px!important;width:34px!important;height:34px!important}
/* Overlay-Inhalt aufs Raster: Innenabstand = Seitenkante, rechte Spalte beginnt auf Linie 7. */
.mw-nav{padding-inline:var(--page-x)!important;grid-template-columns:calc(6*var(--col) + 5*var(--grid-gap)) minmax(0,1fr)!important;column-gap:var(--grid-gap)!important}
/* Menütypografie auf Desktop deutlich größer. */
.mw-nav nav a{font-size:clamp(34px,5.6vw,86px)!important;line-height:1.12!important;font-weight:var(--weight-ultralight)!important}
}
/* Buttons: Inhalt horizontal und vertikal mittig, immer gerundet. */
#root button:not(.ac-head):not(.mw-burger):not(.mw-writeme),#root a.lp-chip,#root a.mw-btn,#root a[role="button"]{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;border-radius:var(--radius-pill,999px)!important;min-height:48px;line-height:1!important;padding-top:7px!important;padding-bottom:0!important}
#root .wm-pill,#root a.mw-nav-termin{padding-top:5px!important}
.mw-nav>button,.wm-dialog button[aria-label]{min-height:0!important;border-radius:0!important}
/* Arbeiten: größere Typo, Projektname als H2 über den Texten. */
/* Projektzeilen auf dem 12er-Raster: Bild 1–7, Text 8–12; gespiegelt Text 1–5, Bild 6–12. */
.rf-item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:end}
.rf-media{grid-column:1/8;grid-row:1;position:relative}
.rf-item.is-flip .rf-media{grid-column:6/-1}
.rf-text{grid-column:8/-1;grid-row:1;display:grid;align-content:end;container-type:inline-size;padding-bottom:6px}
.rf-text-inner{display:grid;gap:14px;will-change:transform}
.rf-item.is-flip .rf-text{grid-column:1/6}
.rf-name{font-family:var(--font-display);font-weight:var(--weight-thin);font-size:var(--size-h3);letter-spacing:var(--track-display);line-height:1.22;color:var(--text-heading);margin:0}
.rf-meta{margin:0;font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-body-s);line-height:1.5;color:var(--green-700);letter-spacing:.01em}
.rf-body{margin:0;font-size:var(--size-body);line-height:1.62;color:var(--text-muted)}
.rf-link{font-size:var(--size-body-s);text-decoration:none;border-bottom:1px solid var(--green-400);justify-self:start;padding-bottom:3px}
.rf-inset{position:absolute;right:7%;bottom:-14%;width:27%;min-width:150px;will-change:transform}
.rf-inset.is-flip{right:auto;left:7%}
/* Weitere Arbeiten auf dem 12er-Raster. */
.rf-more-h{font-family:var(--font-display);font-weight:var(--weight-thin);font-size:var(--size-h3);letter-spacing:var(--track-display);color:var(--green-700);margin:clamp(96px,16vh,200px) 0 8px}
.rf-more{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.rf-more{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:stretch}
/* Name oben, Beschreibung stets auf gleicher Höhe — zwei feste Zeilen für den Namen. */
.rf-more-item{grid-column:span 4;border-top:1px solid var(--border-subtle);padding:28px 0;display:grid;grid-template-rows:auto 1fr;gap:8px}
.rf-more-name{min-height:calc(2 * 1.5em)}
/* Titelbild der Seite Arbeiten — Spaltenaufbau wie der Hero der Startseite:
   Schriftkante, Textspalte, Bild rechts über den Rand hinaus auf der untersten Ebene. */
.ab-intro{position:relative;display:grid;grid-template-columns:var(--indent) minmax(0,1fr) minmax(0,44%);column-gap:0;align-items:stretch}
.ab-intro::before{content:""}
.ab-intro-text{min-width:0;container-type:inline-size;position:relative;z-index:1;display:block;padding:0 clamp(24px,3vw,56px) 104px 0}
@media (max-width:680px){.ab-intro-text{padding:0 0 96px}}
.ab-intro-photo{position:relative;z-index:0;margin:calc(-1 * clamp(140px, 19vh, 240px)) calc(-1 * var(--page-x)) 0 calc(-1 * clamp(48px, 7vw, 140px));min-height:80vh;overflow:hidden}
.ab-intro-fade{position:absolute;inset:0;background:var(--gradient-photo-fade),linear-gradient(to top,#fff 0%,rgba(255,255,255,0) 34%);pointer-events:none}
@media (max-width:900px){.ab-intro{grid-template-columns:1fr}.ab-intro::before{display:none}.ab-intro-photo{display:none}}
/* Socialmedia-Abschluss: eine Textzeile auf dem Raster. */.rf-social{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);border-top:1px solid var(--border-subtle);padding-top:28px;margin-top:8px}
.rf-social-text{grid-column:1/9;margin:0;font-size:var(--size-body);line-height:1.62;color:var(--text-muted);text-wrap:pretty}
@media (max-width:680px){.rf-social-text{grid-column:1/-1}}
.rf-more-name{font-size:var(--size-body-s);color:var(--text-heading);font-weight:var(--weight-light);line-height:1.5}
.rf-more-text{margin:0;font-size:var(--size-body-s);line-height:1.62;color:var(--text-muted)}
@media (max-width:900px){.rf-inset,.rf-inset.is-flip{position:relative;right:auto;left:auto;bottom:auto;width:56%;min-width:0;margin-top:20px}.rf-more-item{grid-column:1/-1}}

/* Globale Regel: alle kleinen Versalien-Labels in Regular/Medium — Light war zu schwach. */
.mw-eyebrow,.lp-disc,.rf-meta,.pj-client,.ac-tags li,.lp-kicker,.kt-card h2,.wm-or span,.wm-pill-label,.lp-chip,.mw-btn{font-weight:450!important}
.mw-nav>div:nth-of-type(1),.mw-nav>div:nth-of-type(1) a:not(.mw-nav-termin),.lg-adr,.ft-top .mw-adr{font-weight:400!important}
/* Termin-Button im Menü: eigene Zeile, kompakt. */
/* Termin-Button im Menü: eigene Zeile, Pill mit filigranem Kalender. */
.mw-nav a.mw-nav-termin{display:inline-flex!important;align-items:center;gap:10px;margin-top:20px;height:44px;padding:0 24px;border:1px solid var(--green-400);border-radius:var(--radius-pill,999px);color:var(--green-700)!important;font-family:var(--font-core)!important;font-size:13px!important;font-weight:var(--weight-bold)!important;letter-spacing:var(--track-label)!important;text-transform:uppercase;text-decoration:none;transition:background var(--dur-fast,160ms) linear,color var(--dur-fast,160ms) linear}
.mw-nav a.mw-nav-termin:hover{background:var(--green-700);border-color:var(--green-700);color:var(--grey-0)!important}
.mw-nav-termin svg{flex:0 0 auto}
/* Menü: Links dünner, Versalien-Labels kräftiger. */
.mw-nav nav a{font-weight:var(--weight-ultralight)!important}
.mw-nav .mw-eyebrow,.mw-nav>div:nth-of-type(1)>div>div:first-child{font-family:var(--font-core)!important;font-weight:450!important;font-size:var(--size-label)!important;text-transform:uppercase;color:var(--green-700)!important}
/* Menüschriften vereinheitlicht: Adresse/Mobil in der Core-Schrift, gleiche Größe. */
.mw-nav>div:nth-of-type(1) div,.mw-nav>div:nth-of-type(1) a{font-family:var(--font-core)!important;letter-spacing:normal}
.mw-nav .mw-eyebrow,.mw-nav>div:nth-of-type(1)>div>div:first-child{letter-spacing:var(--track-label)!important}
/* Adressblock im Menü einheitlich grau — auch die verlinkten Zeilen. */
.mw-nav>div:nth-of-type(1) div:not(.mw-eyebrow),.mw-nav>div:nth-of-type(1) a:not(.mw-nav-termin){color:var(--text-muted)!important;font-size:var(--size-body-s)!important;line-height:1.7!important}
.mw-nav>div:nth-of-type(1)>div>div:first-child{line-height:1.7!important}
/* Kalendericon sitzt optisch etwas hoch im Button. */
.mw-nav-termin svg{position:relative;top:-1.5px}

/* === TYPOGRAFIE — zentrale Bausteine, hier fürs Finetuning ansetzen ==================
   pg-h1  Seitenkopf (UltraLight, Extended)      pg-lead  Einleitungstext
   pg-h2  Sektionskopf (Thin)                    pg-body  Fließtext
   pg-h3  Block-, Projekt- und Dialogkopf        pg-accent  olive Teilzeile in einer Headline
   Die Komponentenklassen (.wm-name, .ac-title, .rf-name, .rf-more-h, .ac-headline)
   hängen absichtlich an denselben Regeln — eine Änderung hier gilt überall. */
.pg-h1,.pg-h2,.pg-h3,.wm-name,.ac-headline,.ac-title,.rf-name,.rf-more-h{font-family:var(--font-display);letter-spacing:var(--track-display);margin:0;text-wrap:pretty}
.pg-h1{font-weight:var(--weight-ultralight);font-size:var(--size-h1);line-height:1.14;color:var(--grey-700)}
.pg-h2,.ac-headline{font-weight:var(--weight-thin);font-size:var(--size-h2);line-height:1.28;color:var(--text-heading)}
.pg-h3,.wm-name,.ac-title,.rf-name,.rf-more-h{font-weight:var(--weight-thin);font-size:var(--size-h3);line-height:1.24;color:var(--text-heading)}
.pg-accent{color:var(--green-700)}
:root{--head-gap-eyebrow:20px;--head-gap-body:clamp(32px,5vh,56px)}
.pg-lead{margin:0;font-size:var(--size-lead);font-weight:var(--weight-light);line-height:1.62;color:var(--text-body)}
.pg-body{margin:0;font-size:var(--size-body);line-height:1.62;color:var(--text-muted)}
/* Seitenkopf: Eyebrow, Headline, Textblock — gleicher Rhythmus auf allen Seiten.
   Beide Abstände stehen als Tokens in :root und gelten für jede Seite. */
.pg-head{display:block!important;gap:0!important}
.pg-head .mw-eyebrow{display:block;margin:0 0 var(--head-gap-eyebrow)}
.pg-head .pg-h1+*{margin-top:var(--head-gap-body)}
/* Abweichende Außenabstände der Komponenten bleiben erhalten. */
.ac-headline{margin:0 0 clamp(32px,5vh,64px)}
.rf-more-h{margin:clamp(96px,16vh,200px) 0 8px}
.wm-name{line-height:1.2}
@media (max-width:700px){.wm-name{font-size:var(--size-lead)}}

/* Startseite, letzter Block vor dem Footer: Waldverlauf, Texte in Weiß. */
.rg-band{background:var(--gradient-forest);color:var(--text-on-green,#fff);padding:clamp(72px,12vh,140px) var(--page-x);position:relative;z-index:1}
.rg-band h2,.rg-band p,.rg-band .rg-accent{color:var(--text-on-green,#fff)}
.rg-band .rg-accent{font-weight:inherit}
.rg-band a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ===== consent.css ============================================ */
/* Cookie-Hinweis: weißes Band unten, Haarlinie oben, quadratische Flächen — kein Overlay,
   damit die Seite lesbar bleibt. Ebene über Inhalt, unter dem Menü. */
.ck-bar{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--grey-0);border-top:1px solid var(--border-subtle);box-shadow:var(--shadow-card)}
.ck-inner{max-width:var(--grid-max);margin:0 auto;padding:20px var(--page-x);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 48px}
.ck-text{display:grid;gap:8px;min-width:0}
.ck-text p{margin:0;max-width:76ch;font-size:var(--size-body-s);line-height:1.6;color:var(--text-muted);text-wrap:pretty}
.ck-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.ck-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:2px 22px 0;border:1px solid var(--green-700);background:var(--green-700);color:var(--text-on-green);font-family:var(--font-core);font-size:12px;font-weight:450;letter-spacing:var(--track-label);text-transform:uppercase;cursor:pointer;transition:background var(--dur-fast,160ms) linear,color var(--dur-fast,160ms) linear}
.ck-btn:hover{background:var(--green-500);border-color:var(--green-500)}
.ck-btn.is-ghost{background:none;color:var(--green-700);border-color:var(--green-400)}
.ck-btn.is-ghost:hover{background:var(--green-100);color:var(--green-700)}
/* Kartenplatzhalter vor der Zustimmung. */
.ck-map-block{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;text-align:center;gap:12px;padding:32px;background:var(--grey-50)}
.ck-map-block p{margin:0;max-width:46ch;font-size:var(--size-body-s);line-height:1.6;color:var(--text-muted)}
.ck-map-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 24px;margin-top:4px}
.ck-link{font-size:var(--size-body-s)}
@media (max-width:760px){.ck-inner{grid-template-columns:1fr;padding:16px var(--page-x)}.ck-actions{justify-content:flex-start}}

/* ===== leistungen.css ========================================= */
/* .lp-chip wird zentral in site.css definiert — hier bewusst keine Überschreibung. */
/* Leistungspaket: Text zwei Drittel, freigestelltes Bild rahmenlos dahinter, mit weißem Verlauf verdeckt. */
.lp-block{position:relative;scroll-margin-top:clamp(140px,20vh,220px);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);isolation:isolate}
.lp-block.is-flip{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
/* Bleed: das Bild läuft über die Container- und Viewportkante hinaus, geclippt am Abschnitt. */
.lp-sections{overflow-x:clip}
.lp-bg{position:absolute;z-index:0;top:clamp(-40px,-4vh,-16px);bottom:clamp(-40px,-4vh,-16px);right:calc(50% - 50vw - 32px);width:82%;display:flex;align-items:center;justify-content:flex-end}
.lp-block.is-flip .lp-bg{right:auto;left:calc(50% - 50vw - 32px);justify-content:flex-start}
.lp-bg .mw-slot{width:100%;height:100%;border-radius:0;background:transparent;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.lp-bg::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,.92) 26%,rgba(255,255,255,.62) 54%,rgba(255,255,255,.42) 100%),linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,#fff 100%)}
.lp-block.is-flip .lp-bg::after{background:linear-gradient(to left,#fff 0%,rgba(255,255,255,.92) 26%,rgba(255,255,255,.62) 54%,rgba(255,255,255,.42) 100%),linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,#fff 100%)}
.lp-text{position:relative;z-index:1;grid-column:1;container-type:inline-size;display:grid;gap:clamp(14px,2vh,22px);align-content:start}
.lp-block.is-flip .lp-text{grid-column:2}
.lp-h{font-family:var(--font-display);font-weight:var(--weight-thin);font-size:var(--size-col-h2);letter-spacing:var(--track-display);line-height:1.2;color:var(--text-heading);margin:14px 0 12px}
.lp-h .lp-accent{color:var(--green-700)}
.lp-disc{display:block}
.lp-lead{margin:0;font-size:var(--size-col-lead);line-height:1.55;color:var(--text-body)}
.lp-body{margin:0;font-size:clamp(13.5px,2.4cqw,15px);line-height:1.62;color:var(--text-body)}
.lp-umfang{border-top:1px solid var(--border-subtle);padding-top:16px;margin-top:6px}
.lp-umfang ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4cqw,56px)}
.lp-umfang li{display:flex;align-items:center;min-height:32px;font-size:clamp(13.5px,2.4cqw,15px);line-height:1.3;color:var(--text-body);padding:4px 0;border-bottom:1px solid var(--border-subtle);text-wrap:pretty}
.lp-umfang li:nth-last-child(-n+3){border-bottom:0}
@media (max-width:1180px){.lp-umfang ul{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-umfang li:nth-last-child(-n+3){border-bottom:1px solid var(--border-subtle)}.lp-umfang li:nth-last-child(-n+2){border-bottom:0}}
/* Hochkant-Tablet und kleiner: die Umfangslisten entfallen. */
@media (max-width:968px){.lp-umfang{display:none}}
@media (max-width:900px){
.lp-block,.lp-block.is-flip{grid-template-columns:1fr}
.lp-text,.lp-block.is-flip .lp-text{grid-column:1}
.lp-bg,.lp-block.is-flip .lp-bg{left:calc(50% - 50vw - 24px);right:calc(50% - 50vw - 24px);width:auto;top:-4%;bottom:-4%}
.lp-bg::after,.lp-block.is-flip .lp-bg::after{background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.78) 70%,#fff 100%)}
}


/* Sticky Unternavigation der Leistungspakete. */
/* Ebenen: Stift-Badge 70 < Sticky-Leiste 76 < dockendes Logo 78 < Menü 140.
   Eine Chipreihe, horizontal scrollbar; rechts bleibt Platz für das dockende Logo. */
.lp-subnav{position:sticky;top:0;z-index:76;background:linear-gradient(#fff 0,#fff 72%,rgba(255,255,255,0) 100%);padding:clamp(56px,7vh,84px) var(--page-x) 24px;margin-top:clamp(40px,6vh,72px)}
.lp-subnav-inner{max-width:var(--grid-max);margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 12px;overflow-x:visible;padding-left:var(--indent);padding-right:clamp(0px,20vw,200px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lp-subnav-inner::-webkit-scrollbar{display:none}
/* Ankernavigation: deutlich kleinere Schrift, flachere Pillen, Kante auf der Headline. */
.lp-subnav-inner .lp-chip{flex:0 0 auto;height:32px!important;min-height:0!important;padding:0 15px;font-size:11px!important;letter-spacing:.12em}
@media (max-width:900px){
.lp-subnav{padding:52px var(--page-x) 8px;margin-top:28px}
.lp-subnav-inner{flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-left:0;padding-right:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain}
.lp-subnav-inner::-webkit-scrollbar{display:none}
.lp-subnav-inner .lp-chip{flex:0 0 auto;height:30px!important;min-height:0!important;padding:0 13px;font-size:10.5px!important;white-space:nowrap}
/* Mobil: das Bild als randloser Kasten ÜBER der Headline, die leicht darüber ragt. */
.lp-bg,.lp-block.is-flip .lp-bg{display:block!important;position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:clamp(190px,30vh,280px);margin:0 calc(-1 * var(--page-x)) 0}
.lp-bg .mw-slot{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 100%)!important}
.lp-bg::after,.lp-block.is-flip .lp-bg::after{background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.15) 55%,#fff 100%)!important}
.lp-text{position:relative;z-index:1;margin-top:-40px}
.lp-block{row-gap:0}
.lp-sections>div{gap:clamp(88px,13vh,132px)!important}
.lp-text{gap:18px!important}
}

/* Beim Überfahren treten Verlauf und Maske zurück, damit Bild und Edit-/Replace-Overlay
   des Bildfelds vollständig sichtbar und bedienbar sind. */
.lp-bg::after{transition:opacity var(--dur-base,280ms) linear}
.lp-bg:hover::after{opacity:0}
.lp-bg .mw-slot{transition:-webkit-mask-image var(--dur-base,280ms) linear,mask-image var(--dur-base,280ms) linear}
.lp-bg:hover .mw-slot{-webkit-mask-image:none;mask-image:none}

/* Die klebende Unternavigation ist selbst weiß und schützt die Wortmarke — der Scrim
   würde sonst über ihr liegen (Scrim 77 > main 75). */
.mw-scrim-top{display:none!important}
/* Chipreihe auf der Headline-Kante (Rasterlinie 2), einzeilige Pillen. */
.lp-subnav-inner{padding-left:var(--indent)}
#root .lp-subnav-inner .lp-chip{white-space:nowrap;min-height:0!important;padding:2px 15px 0!important;line-height:1!important}
@media (max-width:900px){.lp-subnav-inner{padding-left:0}}

/* ===== kontaktseite.css ======================================= */
/* Kontaktseite: Info-Trio mit Haarlinien, Karte in Graustufen, Porträt neben dem Formular. */
.kt-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.kt-intro{grid-column:1/9;display:grid;gap:var(--head-gap-body)}
.kt-trio{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:56px;margin-top:clamp(72px,11vh,140px)}
.kt-card{display:grid;gap:0;align-content:start}
/* Kartenkopf nutzt das zentrale Label-System (Größe, Tracking, Farbe aus den Tokens);
   hier nur noch Abstand und Haarlinie. */
.kt-card h2{font-family:var(--font-core);font-weight:450;font-size:var(--size-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-700);margin:0 0 20px;padding-bottom:20px;border-bottom:1px solid var(--border-subtle)}
.kt-rows{display:grid;gap:10px}
/* Alle drei Karten tragen dieselbe Schrift: Label über dem Wert, damit Nummern und
   E-Mail (nowrap) immer die volle Kartenbreite haben. */
.kt-row,.kt-line{font-family:var(--font-core);font-size:var(--size-body-s);line-height:1.7;color:var(--text-body);margin:0}
.kt-row{display:grid;grid-template-columns:minmax(0,1fr)}
.kt-row span:first-child{color:var(--text-muted)}
.kt-row span:last-child{min-width:0;overflow-wrap:anywhere}
/* Vollflächig per Kantenmathematik: der Container ist eingerückt (--indent) und die Section
   hat 48px Polsterung — beide Kanten werden genau darum zurückgezogen, Breite bleibt auto. */
.kt-map{grid-column:1/-1;margin:0 calc(-1 * var(--page-x)) 0 calc(-1 * (var(--indent) + var(--page-x)));width:auto;max-width:none;position:relative;height:clamp(280px,42vh,460px);overflow:hidden;background:var(--grey-50)}
.kt-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.04)}
/* Formularband: getönte Fläche über die volle Fensterbreite, Felder mittig im Raster. */
.kt-form-block{grid-column:1/-1;margin:clamp(80px,12vh,150px) calc(-1 * var(--page-x)) 0 calc(-1 * (var(--indent) + var(--page-x)));width:auto;max-width:none;background:color-mix(in oklab, var(--green-800) 9%, var(--grey-0));padding:clamp(56px,8vh,110px) var(--page-x);display:grid;box-sizing:border-box;align-items:start}
.kt-portrait{grid-column:1/5;display:grid;gap:20px}
.kt-portrait-frame{width:100%;height:clamp(280px,40vh,440px);overflow:hidden;--slot-frame-bg:transparent}
.kt-form{grid-column:1/-1;width:calc(8*var(--col) + 7*var(--grid-gap));max-width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:32px;box-sizing:border-box}
.kt-form>.kt-full{grid-column:1/-1}
.kt-note{font-size:var(--size-body-s);line-height:1.6;color:var(--text-muted);margin:0}
@media (max-width:900px){
.kt-intro,.kt-trio,.kt-portrait,.kt-form{grid-column:1/-1;max-width:none}
.kt-trio{grid-template-columns:1fr;row-gap:44px;margin-top:56px}
.kt-form{grid-template-columns:1fr;width:100%}
.kt-form-block{padding:40px var(--page-x)}
.kt-portrait-frame{height:clamp(220px,34vh,300px)}
}
/* Honeypot: für Menschen unsichtbar, für Bots ein Köder — kein display:none (wird erkannt). */
.kt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Termin-Button linksbündig; das Stift-Badge bleibt wie überall unten links. */
.kt-cta{padding-left:0}

.kt-form textarea{min-height:72px;height:72px}

/* ===== legal.css ============================================== */
/* Rechtstexte: eine Textspalte auf dem 12er-Raster, Haarlinien als Gliederung. */
.lg-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.lg-body{grid-column:3/9;display:grid;gap:clamp(28px,4vh,48px)}
.lg-aside{grid-column:10/-1;display:grid;gap:14px;align-content:start;font-size:var(--size-body-s);line-height:1.7;color:var(--text-muted)}
.lg-block{display:grid;gap:14px;border-top:1px solid var(--border-subtle);padding-top:clamp(20px,3vh,32px)}
.lg-block:first-child{border-top:0;padding-top:0}
.lg-h2{font-family:var(--font-display);font-weight:var(--weight-thin);font-size:var(--size-h3);letter-spacing:var(--track-display);line-height:1.3;color:var(--text-heading);margin:0}
.lg-h3{font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-lead);line-height:1.4;color:var(--green-700);margin:14px 0 0}
.lg-p{margin:0;font-size:var(--size-body-s);line-height:1.72;color:var(--text-muted);max-width:58ch;text-wrap:pretty}
.lg-p strong{font-weight:var(--weight-light);color:var(--text-body)}
.lg-adr{margin:0;font-size:var(--size-body-s);line-height:1.7;color:var(--text-body)}
.lg-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.lg-list li{font-size:var(--size-body-s);line-height:1.6;color:var(--text-muted);padding-left:18px;position:relative;max-width:58ch}
.lg-list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--green-500)}
@media (max-width:900px){.lg-body,.lg-aside{grid-column:1/-1}.lg-aside{margin-top:40px}}
.lg-intro{grid-column:3/10}
@media (max-width:900px){.lg-intro{grid-column:1/-1}}

/* ===== Export-Ergänzungen =====================================
   Ohne JavaScript bleibt jeder Inhalt sichtbar; erst das Laufzeitskript
   schaltet das Einblenden ein. */
.mw-reveal{opacity:1;transform:none}
html.mw-js .mw-reveal:not(.is-in){opacity:0;transform:translateY(4px)}
.ck-bar[hidden],.wm-scrim[hidden]{display:none!important}
.kt-thanks{border-top:1px solid var(--green-400);padding-top:32px;font-size:var(--size-lead);font-weight:300;color:var(--green-700)}
/* Bildplatz: verhält sich wie der Bildplatz der Vorschau (füllt seinen Rahmen).
   Das Bild darin trägt den eingestellten Ausschnitt als left/top/width/height in %. */
.mw-slot{display:block;position:relative;overflow:hidden;width:100%;height:100%;aspect-ratio:3/2}
.mw-slot>img{position:absolute;display:block;max-width:none;transform:translate(-50%,-50%)}
.mw-slot>img.is-cover,.mw-slot>img.is-contain{left:50%;top:50%;width:100%;height:100%;object-fit:cover}
.mw-slot>img.is-contain{object-fit:contain}