/* ==== main.css ==== */
/* ==========================================================================
   ELVIS CHAMPAGNE: Designsystem „The Olive Edition“ (Master V13, 03.11.2026)
   --------------------------------------------------------------------------
   Grundlage ist das Brand Book V13: Farbvariante B „Warm Olive“ und Typografie B „Modern Fashion Editorial“.
   Schwarz ist die Bühne (#080808), Olive die Signatur, Espresso die Atmosphäre, Cream die Klarheit.
   Kein Gold, kein Bordeaux, kein Orange, kein Reinweiß.
   Eine Schriftfamilie: Mona Sans (GitHub, SIL Open Font License 1.1), variabel mit Breite 75 bis 125 und Gewicht
   200 bis 900, lokal als WOFF2. Expanded (125 %) für Headlines und Wortmarke, Normal (100 %) für Text,
   SemiExpanded (112,5 %) für Labels.
   Dieser :root-Block ist der einzige Ort für Farb-, Schrift-, Button- und Textur-Tokens (--ec-*). Die kurzen
   Rollennamen der Seitenteile (--bg, --fg, --line, --paper …) sind Aliasse darauf.
   Bewegung wie bisher: nur transform/opacity/clip-path, Hover nur auf Geräten mit Maus.
   ========================================================================== */

@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url("../fonts/mona-sans-latin-wdth-normal.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:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url("../fonts/mona-sans-latin-ext-wdth-normal.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:"Mona Sans";font-style:italic;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url("../fonts/mona-sans-latin-wdth-italic.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:"Mona Sans";font-style:italic;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url("../fonts/mona-sans-latin-ext-wdth-italic.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}

/* ===== Tokens: The Olive Edition (Brand Book V13, Kapitel 16 „Implementation Handoff“) ===== */
:root{
  /* Farbe · Basis */
  --ec-black:#080808; --ec-black-raised:#0E0E0D;
  --ec-cream:#F0EEE5; --ec-cream-70:#C4BFAE; --ec-cream-50:#8F8B7C;          /* Cream 50: dritte Textstufe, 5,9 : 1 auf Black */
  --ec-espresso-900:#1E1612; --ec-espresso-700:#34271F; --ec-espresso-light:#6B5444; --ec-espresso-glow:#8A6A52;   /* Light und Glow nur als Licht */
  /* Farbe · Olive, Variante B Warm Olive */
  --ec-olive-900:#1C1B13; --ec-olive-800:#2A291D; --ec-olive-700:#4A4934; --ec-olive-500:#6E6C4C; --ec-olive-300:#ADA986;
  --ec-olive-cta:#67654A;   /* dunklere CTA-Stufe aus dem Brand Book: Cream darauf 5,1 : 1 statt 4,6 : 1, gegen Black 3,4 : 1 */
  /* Rollen */
  --ec-bg:var(--ec-black); --ec-surface:var(--ec-black-raised); --ec-surface-2:#181813; --ec-surface-3:var(--ec-olive-900);
  --ec-text:var(--ec-cream); --ec-text-muted:var(--ec-cream-70); --ec-text-quiet:var(--ec-cream-50);
  --ec-rule:rgba(240,238,229,.1); --ec-rule-strong:rgba(240,238,229,.22); --ec-tint:rgba(240,238,229,.06);
  --ec-accent:var(--ec-olive-300); --ec-accent-line:rgba(173,169,134,.55); --ec-accent-soft:rgba(173,169,134,.12);
  --ec-olive-soft:rgba(110,108,76,.18);
  --ec-quote:var(--ec-olive-300);   /* Zitatlinie und Aufzählungspunkte; auf Papier Olive 700 */
  --ec-cta-bg:var(--ec-olive-cta); --ec-cta-text:var(--ec-cream);
  --ec-cta-hover-bg:var(--ec-olive-300); --ec-cta-hover-text:var(--ec-olive-900);
  --ec-cta-on-olive-bg:var(--ec-cream); --ec-cta-on-olive-text:var(--ec-olive-900);   /* Terminbutton auf Olive-Fläche: invertiert */
  --ec-focus:var(--ec-cream);
  --ec-section-olive:var(--ec-olive-700);
  --ec-paper:var(--ec-cream); --ec-paper-2:#E3E0D4; --ec-paper-raised:#F6F5EF;
  --ec-ink:var(--ec-black); --ec-ink-2:#33322A; --ec-ink-3:#5C5A48;             /* Tinte auf Papier: 17 / 11 / 6 : 1 */
  /* Typografie · System B */
  --ec-font-head:"Mona Sans","Helvetica Neue",Arial,sans-serif;
  --ec-font-body:"Mona Sans","Helvetica Neue",Arial,sans-serif;
  --ec-font-label:"Mona Sans","Helvetica Neue",Arial,sans-serif;
  --ec-head-weight:500; --ec-head-stretch:125%; --ec-head-stretch-mid:112.5%; --ec-head-stretch-long:100%;
  --ec-head-tracking:.02em; --ec-head-leading:1.02;
  --ec-sub-weight:500; --ec-sub-stretch:112.5%;
  /* Größenfaktoren: Mona Sans Expanded läuft rund 1,5-mal so breit wie die bisherige Archivo Condensed. Damit Zeilen
     ähnlich umbrechen, werden Headline-Größen der Seitenteile mit diesen Faktoren gerechnet. */
  --ec-hs:.68; --ec-hs-mid:.7; --ec-hs-long:.72; --ec-hs-num:.62; --ec-hs-sub:.86;
  --ec-label-weight:600; --ec-label-stretch:112.5%; --ec-label-tracking:.22em;
  --ec-label:var(--ec-label-weight) semi-expanded .7rem/1.4 var(--ec-font-label);   /* semi-expanded = 112,5 % */
  --ec-body-size:1.125rem; --ec-body-leading:1.6;
  --ec-btn-weight:600; --ec-btn-tracking:.02em; --ec-btn-radius:2px;
  /* Textur (Brand Book Kapitel 10): Korn statisch, Kachel 220 px */
  --ec-grain-size:220px; --ec-grain-black:.07; --ec-grain-color:.06; --ec-grain-paper:.05;
  --ec-grain-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .93 0 0 0 0 .9 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --ec-grain-paper-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .11 0 0 0 0 .07 0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
  --ec-scan:repeating-linear-gradient(0deg,rgba(240,238,229,.014) 0 1px,rgba(0,0,0,0) 1px 3px);
  --ec-light-blur:150px;

  /* Rollen-Aliasse der Seitenteile */
  --bg:var(--ec-bg); --bg-2:var(--ec-surface); --bg-3:var(--ec-surface-2); --card:var(--ec-surface);
  --chip:var(--ec-olive-900); --chip-hover:var(--ec-olive-800);
  --paper:var(--ec-paper); --paper-2:var(--ec-paper-2); --ink:var(--ec-ink); --ink-2:var(--ec-ink-2); --ink-3:var(--ec-ink-3);
  --fg:var(--ec-text); --fg-2:var(--ec-text-muted); --fg-3:var(--ec-text-quiet);
  --line:var(--ec-rule); --line-2:var(--ec-rule-strong);
  --accent-text:var(--ec-text);

  /* Größen (Headline-Stufen mit Faktor, siehe oben) */
  --fs-mega:calc(clamp(4.2rem,1rem + 15vw,17rem) * var(--ec-hs));
  --fs-hero:calc(clamp(3rem,1.2rem + 6.6vw,7.6rem) * var(--ec-hs));
  --fs-h1:calc(clamp(2.7rem,1.3rem + 5vw,6.2rem) * var(--ec-hs));
  --fs-h2:calc(clamp(2.3rem,1.3rem + 3.8vw,5rem) * var(--ec-hs));
  --fs-h3:calc(clamp(1.25rem,1.1rem + .6vw,1.6rem) * var(--ec-hs-sub));
  --fs-lead:clamp(1.08rem,1rem + .45vw,1.3rem);
  --fs-body:var(--ec-body-size); --fs-small:.9375rem; --fs-label:.7rem;
  --maxw:1380px; --maxw-narrow:920px; --maxw-text:68ch;
  --gutter:clamp(1rem,.5rem + 2.4vw,3.25rem);
  --sec-y:clamp(4.5rem,2.6rem + 7vw,10rem);
  --r-sm:2px; --r-md:3px; --r-lg:4px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-film:cubic-bezier(.65,0,.15,1);
  --d-press:140ms; --d-hover:220ms; --d-ui:260ms; --d-modal:400ms; --d-reveal:900ms;
  --header-h:76px;
  --shadow:0 30px 70px -30px rgba(0,0,0,.8);
}

/* ===== Reset / Basis ===== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--fg-2);font-family:var(--ec-font-body);font-size:var(--fs-body);line-height:var(--ec-body-leading);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--fg);margin:0 0 .5em;text-wrap:balance}
h1,h2,.display{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);text-transform:uppercase}
h3,h4{font-family:var(--ec-font-head);font-stretch:var(--ec-sub-stretch);font-weight:var(--ec-sub-weight);line-height:1.12;letter-spacing:0}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:calc(1.2rem * var(--ec-hs-sub));line-height:1.25}
h1 em,h2 em,.display em{font-style:normal;color:var(--accent-text)}   /* keine Schriftmischung in Headlines (Brand Book: eine Familie) */
h3 em{font-style:normal;color:var(--accent-text)}
p{margin:0 0 1em;max-width:var(--maxw-text)}
a{color:inherit;text-decoration:none;transition:color var(--d-hover) ease}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
a,button,[role="button"],label,summary{touch-action:manipulation}
button,.btn,.burger,summary,.choice{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
::selection{background:var(--ec-olive-cta);color:var(--ec-cream)}
:focus-visible{outline:2px solid var(--ec-focus);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:.75rem 1.25rem;z-index:400}
.skip:focus{left:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Layout ===== */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--maxw-narrow)}
.wrap--text{max-width:calc(var(--maxw-text) + 2 * var(--gutter))}
.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(2.5rem,1.6rem + 3.6vw,5rem)}
.section--flush{padding-top:0}
.section--line{border-top:1px solid var(--line)}
.section--paper{background:var(--paper);color:var(--ink-2);--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--line:rgba(8,8,8,.12);--line-2:rgba(8,8,8,.26);--card:var(--ec-paper-raised);--bg:var(--paper);--bg-2:var(--ec-paper-raised);--bg-3:var(--paper-2);--accent-text:var(--ec-olive-700);--ec-tint:rgba(74,73,52,.07)}
.section--paper h1,.section--paper h2,.section--paper h3,.section--paper h4{color:var(--ink)}
.section--tone{background:var(--bg-2)}
.grid{display:grid;gap:clamp(1rem,.6rem + 1.6vw,2rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.split--top{align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.stack>*+*{margin-top:1rem}
.center{text-align:center}
.center .lead,.center p{margin-inline:auto}
.sec-head{max-width:980px;margin-bottom:clamp(2.2rem,1.2rem + 3vw,4.5rem)}
.sec-head.center{margin-inline:auto}
.sec-head .lead{margin-top:1.2rem}

/* ===== Typografie ===== */
.eyebrow{display:flex;align-items:center;gap:.75rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin:0 0 1.3rem}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-accent);flex:none}
.eyebrow--plain::before{display:none}
.eyebrow--red{color:var(--fg-2)}
.center .eyebrow{justify-content:center}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--fg-2);max-width:56ch;text-wrap:pretty}
.small{font-size:var(--fs-small)}
.muted{color:var(--fg-3)}
.mono{font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase}
.serif{font-family:var(--ec-font-body);font-weight:400}
.display{font-size:var(--fs-hero);color:var(--fg)}
.strong{color:var(--fg);font-weight:500}
.ts{font:var(--ec-label);letter-spacing:.12em;color:var(--fg-3)}
.textlink{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;color:var(--fg);font-weight:500;position:relative;transition:color var(--d-hover) ease}
.textlink::after{content:"";position:absolute;left:0;right:0;bottom:.6rem;height:1px;background:var(--line-2);transform-origin:left;transition:transform var(--d-ui) var(--ease-out),background-color var(--d-hover) ease}
.textlink .arrow{transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .textlink:hover::after{background:var(--fg)}
  .textlink:hover .arrow{transform:translateX(4px)}
}
/* Platzhalter für Angaben, die Elvis noch liefert (tools/check_site.py meldet jeden) */
.todo{display:inline;font:var(--ec-label);font-size:.78em;letter-spacing:.06em;color:#C4BFAE;background:rgba(110,108,76,.22);border:1px dashed rgba(196,191,174,.5);padding:.1em .45em;border-radius:2px;text-transform:none}

/* ===== Buttons =====
   Terminbutton (primär) nach Brand Book: auf Black Olive mit Cream, Hover Olive 300 mit Olive 900, Focus Cream-Ring
   2 px mit 4 px Abstand. Nahezu eckig, kein Schatten, kein Glow. Der Hover-Wechsel läuft wie bisher von links durch
   (nur transform). Auf Olive-Flächen invertiert (siehe .finale). */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:54px;padding:.95rem 1.7rem;border-radius:var(--ec-btn-radius);border:1px solid transparent;font-family:var(--ec-font-body);font-size:.95rem;font-weight:var(--ec-btn-weight);letter-spacing:var(--ec-btn-tracking);line-height:1.1;cursor:pointer;white-space:nowrap;box-shadow:none;transition:transform var(--d-press) var(--ease-out),color var(--d-hover) ease,border-color var(--d-hover) ease,background-color var(--d-hover) ease}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--ec-cta-hover-bg);transform:scaleX(0);transform-origin:right;transition:transform 520ms var(--ease-film)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--ec-focus);outline-offset:4px}
.btn--primary,a.btn.btn--primary,button.btn.btn--primary,.btn--champ,a.btn.btn--champ{background:var(--ec-cta-bg);color:var(--ec-cta-text);border-color:var(--ec-cta-bg)}
.btn--ghost,a.btn.btn--ghost,button.btn.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn--ghost::before{background:var(--ec-olive-900)}
.btn--sm{min-height:44px;padding:.6rem 1.15rem;font-size:.88rem}
.btn--xl{min-height:60px;padding:1.1rem 2rem;font-size:1rem}
.btn .arrow{flex:none;transition:transform var(--d-hover) var(--ease-out)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.center .btn-row{justify-content:center}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:scaleX(1);transform-origin:left}
  .btn--primary:hover,a.btn.btn--primary:hover,.btn--champ:hover{color:var(--ec-cta-hover-text);border-color:var(--ec-cta-hover-bg)}
  .btn--ghost:hover,a.btn.btn--ghost:hover{color:var(--fg);border-color:var(--ec-accent)}
  .btn:hover .arrow{transform:translateX(4px)}
}
.section--paper .btn--ghost,.section--paper a.btn.btn--ghost{color:var(--ink);border-color:rgba(8,8,8,.3)}
.section--paper .btn--ghost::before{background:var(--paper-2)}
.section--paper .btn:focus-visible{outline-color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .section--paper .btn--ghost:hover,.section--paper a.btn.btn--ghost:hover{color:var(--ink);border-color:var(--ec-olive-500)}
}
.cta-s{display:none}
@media (max-width:520px){.header__cta .cta-l{display:none}.header__cta .cta-s{display:inline}}

/* ===== Header ===== */
.header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;transition:background-color var(--d-ui) ease,border-color var(--d-ui) ease,transform var(--d-ui) var(--ease-out)}
.header__inner{display:flex;align-items:center;gap:2rem;height:var(--header-h)}
.header.is-stuck{background:rgba(8,8,8,.84);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);border-bottom-color:var(--line)}
.brand{display:flex;align-items:baseline;gap:0;flex:none;color:var(--fg)}
/* Wortmarke (Brand Book Kapitel 09): Mona Sans Expanded 500, Versalien; der Markenpunkt ist ein echter Punkt in Olive 300,
   auf Olive-Flächen Cream. Mindestbreite 140 px. */
.brand__word,.brand__dot{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:1rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;white-space:nowrap}
.brand__dot{flex:none;color:var(--ec-accent);letter-spacing:0}
.brand__dot::before{content:"."}
.finale .brand__dot,.section--olive .brand__dot{color:var(--ec-cream)}
.section--paper .brand__dot{color:var(--ec-olive-500)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:2.1rem}
.nav a{display:inline-block;padding:.4rem 0;font-size:.92rem;font-weight:500;color:var(--fg-2);position:relative;transition:color var(--d-hover) ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:right;transition:transform var(--d-ui) var(--ease-out)}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--ec-accent)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--fg)}.nav a:hover::after{transform:scaleX(1);transform-origin:left}}
.header__cta{flex:none}
.burger{display:none;flex:none;width:46px;height:46px;margin-left:auto;border:1px solid var(--line-2);border-radius:2px;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:transform var(--d-press) var(--ease-out)}
.burger:active{transform:scale(.95)}
.burger span{display:block;width:18px;height:1.5px;background:var(--fg);transition:transform var(--d-ui) var(--ease-out)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
@media (max-width:1000px){
  :root{--header-h:66px}
  .nav{display:none}
  .header__cta{margin-left:auto}
  .header__cta .btn{min-height:42px;padding:.5rem 1rem;font-size:.84rem}
  .header__cta .arrow{display:none}
  .burger{display:flex;margin-left:.5rem}
  .brand__word,.brand__dot{font-size:.94rem}
  .header__inner{gap:.75rem}
}
.mnav{position:fixed;inset:var(--header-h) 0 0;z-index:99;background:var(--bg);padding:1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out),visibility var(--d-ui)}
.mnav.is-open{opacity:1;visibility:visible;transform:none}
.mnav__links{display:flex;flex-direction:column}
.mnav__links a{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2.6rem,1.5rem + 7vw,4rem) * var(--ec-hs));line-height:1;color:var(--fg);padding:.9rem 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out)}
.mnav.is-open .mnav__links a{opacity:1;transform:none}
.mnav.is-open .mnav__links a:nth-child(2){transition-delay:30ms}
.mnav.is-open .mnav__links a:nth-child(3){transition-delay:60ms}
.mnav.is-open .mnav__links a:nth-child(4){transition-delay:90ms}
.mnav__links a[aria-current="page"]{color:var(--fg-3)}
.mnav .btn{margin-top:1.75rem;width:100%}
body.nav-open{overflow:hidden}

/* ===== Hero (Unterseiten) ===== */
.hero{padding-top:calc(var(--header-h) + clamp(2.5rem,1.5rem + 4.5vw,7rem));padding-bottom:clamp(3rem,2rem + 4vw,6.5rem);position:relative;overflow:clip}
.hero>*{position:relative}
.hero h1{font-size:var(--fs-hero);max-width:14ch;margin-bottom:0}
.hero .lead{margin-top:1.6rem;max-width:54ch}
.hero .btn-row{margin-top:2.4rem}
.hero--sub h1{font-size:var(--fs-h1);max-width:16ch}
.hero--center{text-align:center}
.hero--center h1,.hero--center .lead,.hero--center .eyebrow{margin-inline:auto}
.hero--center .eyebrow{justify-content:center}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
@media (max-width:960px){.hero__grid{grid-template-columns:1fr}.hero__visual{max-width:520px}}
.hero__trust{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;gap:.9rem;align-items:flex-start;font-size:var(--fs-small);color:var(--fg-3);max-width:60ch}
.hero__trust::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ec-accent);margin-top:.55rem}
.hero__trust strong{color:var(--fg-2);font-weight:500}
.hero__src{display:block;font:var(--ec-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-top:.35rem}

/* Film-Rahmen (Hero-Visual) */
.frame{position:relative;aspect-ratio:4/5;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--bg-3);box-shadow:var(--shadow)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.04)}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,0) 55%,rgba(8,8,8,.55) 100%);pointer-events:none}
.frame__corner{position:absolute;width:14px;height:14px;border-color:var(--fg);border-style:solid;border-width:0;opacity:.9;z-index:2}
.frame__corner--tl{left:10px;top:10px;border-left-width:1px;border-top-width:1px}
.frame__corner--tr{right:10px;top:10px;border-right-width:1px;border-top-width:1px}
.frame__corner--bl{left:10px;bottom:10px;border-left-width:1px;border-bottom-width:1px}
.frame__corner--br{right:10px;bottom:10px;border-right-width:1px;border-bottom-width:1px}
.frame__tc{position:absolute;left:1.1rem;top:1rem;z-index:2;font:var(--ec-label);letter-spacing:.12em;color:var(--fg);display:flex;align-items:center;gap:.5rem;background:rgba(8,8,8,.35);padding:.25rem .5rem;border-radius:3px;backdrop-filter:blur(4px)}
.frame__tc i{width:7px;height:7px;border-radius:50%;background:var(--ec-accent);box-shadow:none;animation:rec 1.6s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.25}}
.frame__cap{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.frame__name{font-family:var(--ec-font-head);font-size:calc(1.3rem * var(--ec-hs));color:var(--fg);line-height:1.1}
.frame__role{font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-top:.3rem}
.frame__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(240,238,229,.18);z-index:2}
.frame__bar i{display:block;height:100%;background:var(--fg);transform:scaleX(0);transform-origin:left}
.is-in .frame__bar i,.frame.is-in .frame__bar i{transform:scaleX(1);transition:transform 14s linear}

/* Kapitel-Timeline (YouTube-Kapitel als Leistungsübersicht) */
.tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,.5rem + 2vw,2.5rem)}
@media (max-width:720px){.tl{grid-template-columns:1fr}}
.tl__ch{position:relative;padding-top:1.25rem;display:block;color:inherit}
.tl__ch::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.tl__ch::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform 1.1s linear}
.tl__ch.is-in::after{transform:scaleX(1)}
.tl__ch:nth-child(2).is-in::after{transition-delay:.9s}
.tl__ch:nth-child(3).is-in::after{transition-delay:1.8s}
.tl__time{font:var(--ec-label);letter-spacing:.14em;color:var(--accent-text);display:flex;justify-content:space-between;max-width:none}
.tl__name{font-family:var(--ec-font-head);font-size:calc(1.55rem * var(--ec-hs));color:var(--fg);margin:.6rem 0 .35rem;line-height:1.15}
.tl__text{font-size:var(--fs-small);color:var(--fg-3);margin:0;max-width:34ch}
.tl__share{font:var(--ec-label);color:var(--fg-3)}
@media (hover:hover) and (pointer:fine){
  a.tl__ch:hover .tl__name{color:var(--accent-text)}
}

/* ===== Vertrauenslinie / Logos ===== */
.trustline{display:flex;flex-wrap:wrap;gap:.6rem 2rem;padding:1.4rem 0;border-block:1px solid var(--line);font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.trustline li{display:flex;align-items:center;gap:.7rem}
.trustline li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--fg)}
.logos{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:center}
.logos img{height:32px;width:auto;max-width:150px;object-fit:contain;opacity:.7;filter:grayscale(1) brightness(1.4)}

/* ===== Karten ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,1rem + 1.6vw,2.4rem);position:relative;transition:border-color var(--d-hover) ease,transform var(--d-ui) var(--ease-out)}
.card h3{margin-bottom:.6rem}
.card p:last-child{margin-bottom:0}
.card__nr{font:var(--ec-label);letter-spacing:.16em;color:var(--accent-text);display:block;margin-bottom:1.1rem}
.card--link{display:block;color:inherit}
@media (hover:hover) and (pointer:fine){
  .card--link:hover{border-color:var(--line-2);transform:translateY(-3px)}
}
.card__arrow{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;color:var(--fg);font-weight:500}
.card--link .arrow{transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card--link:hover .arrow{transform:translateX(3px)}}

/* ===== Referenzen ===== */
.ref-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,.6rem + 1.6vw,2rem)}
@media (max-width:980px){.ref-grid{grid-template-columns:1fr}}
@media (min-width:621px) and (max-width:980px){.refcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.refcard__media{aspect-ratio:auto;height:100%;min-height:220px}}
.refcard{display:flex;flex-direction:column;color:inherit;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);transition:border-color var(--d-hover) ease,transform var(--d-ui) var(--ease-out)}
.refcard__media{position:relative;display:block;aspect-ratio:16/9;background:var(--bg-3);overflow:hidden}
.refcard__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) brightness(.86);transition:transform .7s var(--ease-out),filter var(--d-modal) ease}
.refcard__play,.vcard__play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:rgba(8,8,8,.38);border:1px solid rgba(240,238,229,.55);display:grid;place-items:center;color:var(--fg);transform:scale(.96);transition:transform var(--d-hover) var(--ease-out),background-color var(--d-hover) ease,color var(--d-hover) ease}
.refcard__play .play-icon,.vcard__play .play-icon{margin-left:3px}
.refcard__bar,.vcard__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(240,238,229,.2)}
.refcard__bar i,.vcard__bar i{display:block;height:100%;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform var(--d-hover) ease}
.refcard__body{padding:1.4rem clamp(1.1rem,1rem + 1vw,1.7rem) 1.6rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.refcard__body .eyebrow{margin-bottom:.4rem}
.refcard__title{font-family:var(--ec-font-head);font-size:calc(1.6rem * var(--ec-hs));color:var(--fg);line-height:1.1}
.refcard__sub{font-size:var(--fs-small);color:var(--fg-3);line-height:1.5}
.refcard__facts{font:var(--ec-label);letter-spacing:.08em;color:var(--fg-3);margin-top:.35rem}
.refcard__link{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.1rem;color:var(--fg);font-weight:500;font-size:.95rem}
.refcard__link .arrow{transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .refcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .refcard:hover .refcard__media img{transform:scale(1.04);filter:none}
  .refcard:hover .refcard__play{transform:scale(1);background:var(--ec-olive-500);color:var(--fg);border-color:var(--ec-olive-500)}
  .refcard:hover .refcard__bar i{transform:scaleX(1);transition:transform 2.6s linear}
  .refcard:hover .refcard__link .arrow{transform:translateX(3px)}
}

/* Druck-Feedback auf Touch und Maus */
.refcard:active,.card--link:active,.cat-card:active{transform:scale(.98)}
.vcard__thumb{transition:transform var(--d-press) var(--ease-out)}
.vcard:active .vcard__thumb{transform:scale(.98)}
.refcard:active .refcard__play,.vcard:active .vcard__play{transform:scale(1);background:var(--ec-olive-500);color:var(--fg);border-color:var(--ec-olive-500)}

/* ===== Video-Karten (YouTube) ===== */
.vgrid{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.75rem)}
.vgrid--m{grid-template-columns:repeat(3,minmax(0,1fr))}
.vgrid--s{grid-template-columns:repeat(4,minmax(0,1fr))}
.vgrid--l{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.vgrid--m,.vgrid--s{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.vgrid--m,.vgrid--s,.vgrid--l{grid-template-columns:1fr}}
.vcard{display:block;color:inherit}
.vcard__thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--bg-3);border:1px solid var(--line)}
.vcard__thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) brightness(.86);transition:transform .7s var(--ease-out),filter var(--d-modal) ease}
.vcard__dur{position:absolute;right:8px;bottom:9px;font:var(--ec-label);letter-spacing:.04em;background:rgba(0,0,0,.82);color:#F0EEE5;padding:3px 6px;border-radius:3px}
.vcard__body{display:block;padding:.85rem .1rem 0}
.vcard__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;line-height:1.35;color:var(--fg);transition:color var(--d-hover) ease}
.vcard__meta{display:block;font-size:.85rem;color:var(--fg-3);margin-top:.35rem}
.vcard--l .vcard__title{font-family:var(--ec-font-head);font-size:calc(1.45rem * var(--ec-hs));font-weight:400;line-height:1.2}
.vcard--s .vcard__title{font-size:.95rem}
@media (hover:hover) and (pointer:fine){
  .vcard:hover .vcard__thumb img{transform:scale(1.04);filter:none}
  .vcard:hover .vcard__play{transform:scale(1);background:var(--ec-olive-500);color:var(--fg);border-color:var(--ec-olive-500)}
  .vcard:hover .vcard__bar i{transform:scaleX(1);transition:transform 2.4s linear}
  .vcard:hover .vcard__title{color:var(--accent-text)}
}

/* YouTube-Fassade: lädt erst nach Klick und Einwilligung */
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3);border:1px solid var(--line)}
.yt__btn{position:absolute;inset:0;width:100%;height:100%;display:block}
.yt__btn img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) brightness(.8)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82));pointer-events:none}
.yt.is-playing::after{display:none}
.yt__note{position:absolute;left:1rem;right:1rem;bottom:.75rem;z-index:1;margin:0;font-size:.78rem;color:var(--fg-2);text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none}
.yt__note a{pointer-events:auto;text-decoration:underline}
.yt__ask{position:absolute;inset:0;display:grid;place-content:center;gap:1rem;text-align:center;padding:2rem;background:rgba(8,8,8,.86);backdrop-filter:blur(6px)}
.yt__ask p{margin:0;max-width:40ch;font-size:var(--fs-small);color:var(--fg-2)}
.yt.is-playing .yt__btn,.yt.is-playing .yt__note{display:none}

/* ===== Kennzahlen ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.stat{background:var(--bg);padding:1.4rem 1.25rem;display:flex;flex-direction:column;gap:.3rem}
.section--paper .stat{background:var(--ec-paper-raised)}
.stat__value{font-family:var(--ec-font-head);font-size:calc(clamp(2rem,1.5rem + 1.6vw,2.9rem) * var(--ec-hs-num));line-height:1;color:var(--fg);letter-spacing:var(--ec-head-tracking)}
.stat__label{font:var(--ec-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.stat__note{font-size:.8rem;color:var(--fg-3)}
.stats__source{font-size:.82rem;color:var(--fg-3);margin:.8rem 0 0;max-width:70ch}

/* ===== Schritte, Listen, Kapitel ===== */
.steps{display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:72px 1fr;gap:1.25rem;padding:1.6rem 0;border-top:1px solid var(--line);align-items:start}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps__nr{font:var(--ec-label);font-size:.8rem;letter-spacing:.14em;color:var(--accent-text);padding-top:.45rem}
.steps h3{margin-bottom:.35rem;font-size:1.35rem}
.steps p{margin:0;font-size:var(--fs-small);max-width:60ch}
@media (max-width:560px){.steps li{grid-template-columns:1fr;gap:.35rem}}
.checks li{display:flex;gap:.8rem;align-items:flex-start;padding:.5rem 0;font-size:var(--fs-small);color:var(--fg-2)}
.checks li::before{content:"";flex:none;width:16px;height:16px;margin-top:.3rem;border-radius:50%;border:1px solid var(--fg);background:radial-gradient(circle,var(--fg) 0 2.5px,transparent 3px)}
.chapters{border-top:1px solid var(--line)}
.chapters li{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.chapters__tc{font:var(--ec-label);letter-spacing:.1em;color:var(--accent-text);min-width:5ch}
.chapters h3{font-size:1.25rem;margin:0 0 .25rem}
.chapters p{margin:0;font-size:var(--fs-small);color:var(--fg-3)}
.chapters strong{color:var(--fg);font-weight:500}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pills li,.pill{font:var(--ec-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--line-2);border-radius:999px;padding:.45rem .8rem}

/* ===== Zitat, Kundenstimme ===== */
.quote{max-width:960px;margin:0;position:relative;padding-left:clamp(1.5rem,1rem + 2vw,3rem)}
.quote::before{content:"„";position:absolute;left:0;top:-.1em;font-family:var(--ec-font-body);font-size:3.2rem;line-height:1;color:var(--fg)}
.quote blockquote{margin:0;font-family:var(--ec-font-body);font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem);line-height:1.25;color:var(--fg);letter-spacing:-.01em;text-wrap:balance}
.quote figcaption{margin-top:1.4rem;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.tstm-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tstm{margin:0;padding:1.75rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.tstm blockquote{margin:0;font-family:var(--ec-font-body);font-size:1.35rem;line-height:1.35;color:var(--fg)}
.tstm figcaption{margin-top:1rem;font-size:var(--fs-small);color:var(--fg-3)}

/* ===== FAQ (schlichtes Akkordeon, links die Überschrift) ===== */
.faq__wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,1rem + 4vw,6rem);align-items:start}
.faq__wrap .sec-head{position:sticky;top:calc(var(--header-h) + 2rem);margin-bottom:0;container-type:inline-size}
.faq__wrap .sec-head h2{font-size:min(var(--fs-h2),12cqi)}
.faq{border-top:1px solid var(--line-2)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2.8rem minmax(0,1fr) 26px;gap:1rem;align-items:center;padding:1.35rem 0;color:var(--fg);transition:color var(--d-hover) ease}
.faq__item summary::-webkit-details-marker{display:none}
.faq__nr{font:var(--ec-label);letter-spacing:.14em;color:var(--fg-3)}
.faq__q{font-family:var(--ec-font-head);font-stretch:var(--ec-sub-stretch);font-weight:var(--ec-sub-weight);font-size:calc(clamp(1.1rem,1rem + .45vw,1.35rem) * var(--ec-hs-sub));line-height:1.3;letter-spacing:0}
.faq__icon{flex:none;width:26px;height:26px;position:relative;border:1px solid var(--line-2);border-radius:50%;transition:background-color var(--d-hover) ease,border-color var(--d-hover) ease}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--fg);transform:translate(-50%,-50%);transition:transform var(--d-ui) var(--ease-out)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__icon{background:var(--ec-olive-500);border-color:var(--ec-olive-500)}
.faq__item[open] .faq__icon::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{padding:0 2.6rem 1.6rem 3.8rem}
.faq__a p{max-width:62ch;margin:0}
@media (hover:hover) and (pointer:fine){.faq__item summary:hover .faq__icon{border-color:var(--fg)}}
@media (max-width:860px){.faq__wrap{grid-template-columns:1fr}.faq__wrap .sec-head{position:static;margin-bottom:1rem}.faq__a{padding:0 0 1.5rem 3.8rem}}
@media (max-width:480px){.faq__item summary{grid-template-columns:2rem minmax(0,1fr) 26px;gap:.7rem}.faq__a{padding-left:2.7rem}}

/* ===== Zwischen-CTA (nach Fallstudie, Referenzen, Leistungen) ===== */
.inline-cta{display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;align-items:center;justify-content:space-between;margin-top:clamp(2.5rem,1.6rem + 3vw,4.5rem);padding:1.6rem 0;border-block:1px solid var(--line)}
.inline-cta p{margin:0;max-width:34ch;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.4rem,1.1rem + 1vw,2.05rem);line-height:1.18;color:var(--fg)}
.inline-cta .btn-row{gap:1.2rem 1.6rem}

/* ===== Abschluss: Strategiegespräch buchen (alle Seiten) ===== */
.finale{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(5rem,3rem + 8vw,11rem) clamp(6rem,4rem + 9vw,13rem);background:var(--ec-section-olive);color:var(--ec-cream-70);
  --fg:var(--ec-cream);--fg-2:#E2DFD2;--fg-3:var(--ec-cream-70);--line:rgba(240,238,229,.15);--line-2:rgba(240,238,229,.3)}
.finale::before{content:"";position:absolute;inset:0;z-index:-2}   /* Oberfläche (Licht, Tiefe, Korn): z11-olive.css */
.finale__mega{position:absolute;left:0;bottom:-.14em;z-index:-1;display:flex;width:max-content;white-space:nowrap;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(6rem,2rem + 15vw,19rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:rgba(240,238,229,.06);animation:fin-run 60s linear infinite;pointer-events:none;user-select:none}
.finale__mega span{padding-right:.35em}
@keyframes fin-run{to{transform:translateX(-50%)}}
.finale__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2rem,1rem + 5vw,7rem);align-items:end}
.finale h2{font-size:calc(clamp(2.3rem,1.2rem + 3.4vw,4.9rem) * var(--ec-hs-long));max-width:21ch;font-stretch:var(--ec-head-stretch-long)}
.finale .btn-row .btn{min-height:60px}
.finale .lead{margin-top:1.3rem;color:var(--fg-2)}
.finale .btn-row{margin-top:2.3rem}
/* Buttons auf Olive: Terminbutton invertiert (Cream mit Olive 900), Hover Olive 300 mit Olive 900 */
.finale .btn--primary,.finale a.btn.btn--primary{background:var(--ec-cta-on-olive-bg);color:var(--ec-cta-on-olive-text);border-color:var(--ec-cta-on-olive-bg)}
.finale .btn--ghost,.finale a.btn.btn--ghost{color:var(--ec-cream);border-color:var(--line-2)}
.finale .btn--ghost::before{background:var(--ec-olive-900)}
@media (hover:hover) and (pointer:fine){
  .finale .btn--primary:hover,.finale a.btn.btn--primary:hover{color:var(--ec-cta-hover-text);border-color:var(--ec-cta-hover-bg)}
  .finale .btn--ghost:hover,.finale a.btn.btn--ghost:hover{color:var(--ec-cream);border-color:var(--ec-cream)}
}
.finale__note{margin:1.3rem 0 0;font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.finale .eyebrow{color:var(--fg-2)}
.finale .eyebrow::before{background:var(--fg)}
.finale__steps{border-top:1px solid var(--line-2)}
.finale__steps li{display:grid;grid-template-columns:2.8rem minmax(0,1fr);gap:.15rem 1rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.finale__nr{grid-row:1/span 2;padding-top:.2rem;font:var(--ec-label);letter-spacing:.14em;color:var(--fg-3)}
.finale__steps strong{color:var(--fg);font-weight:600}
.finale__steps li>span:last-child{font-size:.9rem;line-height:1.5;color:var(--fg-2)}
@media (max-width:900px){.finale__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.finale__mega{animation:none}}
/* bisherige Klassen des Abschluss-Kastens (Unterseiten, Blog) */
.cta-box__note{margin:1.25rem 0 0;font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}

/* ===== Brotkrumen ===== */
.crumbs{font:var(--ec-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:1.5rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem .6rem}
.crumbs li:not(:last-child)::after{content:"/";margin-left:.6rem;opacity:.5}
.crumbs a{transition:color var(--d-hover) ease}
.crumbs li[aria-current="page"]{color:var(--fg-2)}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--accent-text)}}

/* ===== Medien ===== */
.media{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--bg-3);border:1px solid var(--line)}
.media img{width:100%;height:100%;object-fit:cover}
.media--portrait{aspect-ratio:4/5}
.media--wide{aspect-ratio:16/9}
.media--square{aspect-ratio:1}
.media--mark{display:grid;place-items:center;aspect-ratio:4/5}
.media-mark__mono{width:clamp(6rem,4rem + 6vw,9rem);aspect-ratio:1;border-radius:50%;border:1px solid var(--fg);display:grid;place-items:center;font-family:var(--ec-font-body);font-size:clamp(2rem,1.4rem + 2.2vw,3rem);color:var(--fg);letter-spacing:.04em}
.media__cap{position:absolute;left:1rem;bottom:.9rem;right:1rem;font:var(--ec-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.js .reveal-clip{clip-path:inset(0 0 100% 0)}
.js .reveal-clip img{transform:scale(1.06)}
.reveal-clip.is-in{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-out)}
.reveal-clip.is-in img{transform:none;transition:transform 1.2s var(--ease-out)}

/* ===== Formular ===== */
.form{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,1rem + 2vw,2.75rem);max-width:800px}
.form__progress{margin-bottom:2rem}
.form__steps{display:flex;gap:.4rem;margin-bottom:.85rem}
.form__steps i{flex:1;height:2px;background:var(--line);overflow:hidden;position:relative}
.form__steps i::after{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform var(--d-modal) var(--ease-out)}
.form__steps i.is-done::after{transform:scaleX(1)}
.form__stepno{font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset[hidden]{display:none}
legend{font-family:var(--ec-font-head);font-size:calc(1.7rem * var(--ec-hs));color:var(--fg);margin-bottom:.35rem;padding:0}
.field{margin-top:1.15rem}
.field>label,.field>.lbl{display:block;font-size:.9rem;font-weight:500;color:var(--fg);margin-bottom:.45rem}
.req{color:var(--fg)}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:16px;padding:.85rem 1rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--fg);min-height:52px;transition:border-color var(--d-hover) ease,box-shadow var(--d-hover) ease}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23B9B1A5' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px var(--ec-tint)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#C8534A}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.hint{font-size:.84rem;color:var(--fg-3);margin:.4rem 0 0}
.err{font-size:.85rem;color:#E5786F;margin:.4rem 0 0;display:none}
.err.is-shown{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.choices{display:grid;gap:.6rem;margin-top:.55rem}
@media (min-width:620px){.choices{grid-template-columns:1fr 1fr}}
.choice{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:var(--bg);font-size:.94rem;color:var(--fg-2);min-height:56px;transition:border-color var(--d-hover) ease,background-color var(--d-hover) ease,transform var(--d-press) var(--ease-out)}
.choice:active{transform:scale(.985)}
.choice input{width:auto;min-height:0;margin:.25rem 0 0;accent-color:var(--fg);flex:none}
.choice:has(input:checked){border-color:var(--fg);background:var(--ec-tint);color:var(--fg)}
@media (hover:hover) and (pointer:fine){.choice:hover{border-color:var(--line-2)}}
.consent{display:flex;flex-wrap:wrap;row-gap:.1rem;gap:.75rem;align-items:flex-start;margin-top:1.5rem;font-size:.88rem;color:var(--fg-2)}
.consent label{flex:1 1 0;min-width:0}
.consent .err{flex:1 1 100%;padding-left:calc(20px + .75rem)}
.consent input{width:20px;height:20px;min-height:0;margin-top:.1rem;accent-color:var(--fg);color-scheme:dark;flex:none}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form__nav{display:flex;gap:.75rem;margin-top:2rem;flex-wrap:wrap}
.form__nav .btn{flex:1 1 auto;min-width:150px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{margin-top:1.25rem;padding:1rem 1.15rem;border-radius:var(--r-sm);font-size:.92rem;display:none}
.form__status.is-error{display:block;background:rgba(200,83,74,.12);border:1px solid rgba(200,83,74,.4);color:#F0A49D}
.form__status.is-loading{display:block;background:var(--ec-tint);border:1px solid var(--line);color:var(--fg-2)}

/* ===== Hinweis ===== */
.notice{border-left:2px solid var(--fg);background:var(--ec-tint);padding:1rem 1.25rem;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--fs-small);color:var(--fg-2)}
.notice p:last-child{margin-bottom:0}
.notice--config{border-left-color:var(--ec-accent);background:rgba(110,108,76,.16)}
.notice strong{color:var(--fg)}

/* ===== Footer: Abschlusszeile, Spalten, großes Namens-Signet ===== */
.footer{border-top:1px solid var(--line);padding-block:clamp(3.5rem,2rem + 4vw,6rem) 1.6rem;color:var(--fg-3);font-size:var(--fs-small);overflow:hidden}
.footer__lead{display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:flex-end;justify-content:space-between;padding-bottom:clamp(2.5rem,1.6rem + 3vw,4.5rem);border-bottom:1px solid var(--line)}
.footer__claim{margin:0;max-width:24ch;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2rem,1.2rem + 3vw,3.8rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);color:var(--fg)}
.footer__claim em{font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:none;font-size:1.06em}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-top:clamp(2rem,1.4rem + 2vw,3.2rem)}
@media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}
@media (max-width:520px){.footer__top{grid-template-columns:1fr}}
.footer__brand p{max-width:38ch;margin:0}
.footer__h{font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);margin:0 0 .9rem}
.footer li a,.footer__btn{display:inline-flex;align-items:center;min-height:40px}
.footer a,.footer__btn{color:var(--fg-3);transition:color var(--d-hover) ease}
.footer__btn{font:inherit;font-size:var(--fs-small)}
@media (hover:hover) and (pointer:fine){.footer a:hover,.footer__btn:hover{color:var(--fg)}}
.footer__mega{margin:clamp(2.5rem,1.5rem + 4vw,5rem) 0 0;max-width:none;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc((min(100vw,var(--maxw)) - 2 * var(--gutter)) / 10.9);line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg);white-space:nowrap;display:flex;justify-content:space-between;gap:.18em;user-select:none}
.footer__mega span:last-child{color:rgba(240,238,229,.3)}   /* Brand Book: Wortmarke nie als Kontur; zweites Wort in gedämpftem Cream */
.footer__bottom{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-size:.85rem}
.footer__tags{font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:620px){.footer__mega{flex-direction:column;gap:.04em;font-size:calc((100vw - 2 * var(--gutter)) / 7.55)}}

/* ===== Mobiler Sticky-CTA ===== */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px));background:rgba(8,8,8,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform var(--d-modal) var(--ease-out)}
.mcta.is-visible{transform:none}
.mcta .btn{width:100%;max-width:440px;margin-inline:auto;display:flex}
@media (max-width:1000px){.mcta{display:block}body:has(.mcta) .footer{padding-bottom:calc(2rem + 76px + env(safe-area-inset-bottom,0px))}}
body.consent-open .mcta,body.consent-modal-open .mcta{display:none}

/* ===== Scroll-Reveal ===== */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
.js .rv.is-in{opacity:1;transform:none}
/* Hero: nie unsichtbar (größtes Element = LCP), nur ein leichtes Einschweben */
.js .hero .rv{opacity:1;transform:translateY(10px);transition:transform var(--d-reveal) var(--ease-out)}
.js .hero .rv.is-in{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .hero .rv{transform:none;transition:none}
  .mcta,.consent-bar,.mnav,.post-card__media img,.card,.refcard,.vcard__thumb{transition:none}
  .mnav{transform:none}
  .card--link:hover,.refcard:hover,.post-card:hover .post-card__media img{transform:none}
  .js .reveal-clip{clip-path:none}
  .js .reveal-clip img{transform:none}
  .frame__tc i{animation:none}
  .tl__ch::after,.frame__bar i{transition:none}
  .mnav__links a{transition:opacity var(--d-ui) ease}
  .refcard,.vcard__thumb img,.refcard__media img{transition:none}
}

/* ===== Prosa (Blog, Rechtstexte) ===== */
.prose{max-width:36rem;font-size:1.1rem;line-height:1.72}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:calc(clamp(1.7rem,1.3rem + 1.4vw,2.4rem) * var(--ec-hs-long));margin-top:2.2em;margin-bottom:.4em;font-stretch:var(--ec-head-stretch-long)}
.prose h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);margin-top:1.8em;margin-bottom:.35em}
.prose h4{margin-top:1.5em}
.prose p{max-width:none}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul,.prose ol{padding-left:1.3rem;margin-bottom:1em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.45rem;padding-left:.2rem}
.prose li::marker{color:var(--accent-text)}
.prose blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.4rem;border-left:2px solid var(--fg);font-family:var(--ec-font-body);font-size:1.45rem;line-height:1.35;color:var(--fg)}
.prose blockquote p{margin:0}
.prose img{border-radius:var(--r-md);border:1px solid var(--line)}
.prose figure{margin:1.8em 0}
.prose figcaption{font-size:.85rem;color:var(--fg-3);margin-top:.6rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
.prose code{font-family:var(--ec-font-label);font-size:.9em;background:var(--bg-3);padding:.1em .4em;border-radius:3px}
.prose strong{color:var(--fg);font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:var(--ec-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.prose .lead{font-size:var(--fs-lead);color:var(--fg-2)}
.prose .yt{margin:1.8em 0}
.prose .blog-cta{margin:2.4em 0}
@media (max-width:560px){.prose{font-size:1.04rem;overflow-wrap:break-word}}

/* Blog-CTA innerhalb von Artikeln */
.blog-cta{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(1.5rem,1rem + 2vw,2.5rem);background:linear-gradient(135deg,var(--bg-2),var(--bg) 70%);position:relative;overflow:hidden}
.blog-cta::before{content:"";position:absolute;right:-30%;top:-80%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(173,169,134,.14),transparent 65%);pointer-events:none}
.blog-cta>*{position:relative}
.blog-cta .eyebrow{margin-bottom:.7rem}
.blog-cta h3{font-size:1.7rem;margin-bottom:.5rem}
.blog-cta p:not(.eyebrow){font-size:var(--fs-small);color:var(--fg-2);max-width:56ch}
.blog-cta .btn-row{margin-top:1.25rem}

/* Blog-Listen */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,.8rem + 1.8vw,2.5rem)}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.post-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;color:inherit}
.post-card__media{position:relative;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:var(--bg-3);border:1px solid var(--line)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.post-card__media--empty{display:grid;place-items:center;background:linear-gradient(135deg,var(--bg-3),var(--bg-2))}
.post-card__media--empty span{font-family:var(--ec-font-body);font-size:2.4rem;color:var(--fg);opacity:.7}
.post-card__body{padding:1rem .1rem 0}
.post-card .eyebrow{margin-bottom:.5rem}
.post-card__title{font-family:var(--ec-font-head);font-size:calc(1.5rem * var(--ec-hs));line-height:1.15;color:var(--fg);margin:0 0 .5rem;transition:color var(--d-hover) ease}
.post-card__excerpt{font-size:var(--fs-small);color:var(--fg-3);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card__meta{font:var(--ec-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:.8rem}
.post-card--featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:center}
.post-card--featured .post-card__title{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem)}
.post-card--featured .post-card__excerpt{-webkit-line-clamp:4;font-size:var(--fs-body)}
@media (max-width:860px){.post-card--featured{grid-template-columns:1fr}}
@media (hover:hover) and (pointer:fine){
  .post-card:hover .post-card__media img{transform:scale(1.04)}
  .post-card:hover .post-card__title{color:var(--accent-text)}
}
.cat-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,1rem + 2vw,3rem)}
.cat-nav a{font:var(--ec-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--line-2);border-radius:999px;padding:.55rem .95rem;transition:border-color var(--d-hover) ease,color var(--d-hover) ease,background-color var(--d-hover) ease,transform var(--d-press) var(--ease-out)}
.cat-nav a:active{transform:scale(.97)}
.cat-nav a[aria-current="page"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media (hover:hover) and (pointer:fine){.cat-nav a:hover{border-color:var(--fg);color:var(--fg)}}
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:3rem;font:var(--ec-label);letter-spacing:.1em}
.pagination a,.pagination span{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--fg-2)}
.pagination [aria-current="page"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* Artikel */
.article__head{max-width:var(--maxw-narrow);padding-top:calc(var(--header-h) + clamp(2rem,1.5rem + 3vw,5rem))}
.article__head h1{font-size:var(--fs-h1);max-width:20ch}
.article__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font:var(--ec-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:1.5rem}
.article__meta a{color:var(--fg-2)}
.article__cover{margin:clamp(2rem,1.5rem + 2vw,3.5rem) 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;background:var(--bg-3)}
.article__cover img{width:100%;height:100%;object-fit:cover}
.article__layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
@media (max-width:1000px){.article__layout{grid-template-columns:1fr}}
.toc{position:sticky;top:calc(var(--header-h) + 1.5rem);border-left:1px solid var(--line);padding-left:1.25rem;font-size:.9rem}
.toc h2{font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.8rem}
.toc li+li{margin-top:.5rem}
.toc a{color:var(--fg-2);display:block;line-height:1.4}
.toc a.is-active{color:var(--accent-text)}
@media (max-width:1000px){.toc{position:static;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1rem;margin-bottom:2rem}}
.author-box{display:grid;grid-template-columns:96px 1fr;gap:1.5rem;align-items:center;margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.author-box img{width:96px;height:96px;object-fit:cover;border-radius:50%;border:1px solid var(--fg)}
.author-box h2{font-size:calc(1.5rem * var(--ec-hs-long));margin-bottom:.3rem;font-stretch:var(--ec-head-stretch-long)}
.author-box p:not(.eyebrow){font-size:var(--fs-small);margin:0 0 .6rem}
@media (max-width:480px){.author-box{grid-template-columns:1fr}}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.tags li{font:var(--ec-label);letter-spacing:.08em;color:var(--fg-3);border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem}

/* ===== Einwilligung (Banner und Einstellungen) ===== */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--bg-2);border-top:1px solid var(--line-2);padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform var(--d-modal) var(--ease-out)}
.consent-bar.is-in{transform:none}
.consent-bar__inner{max-width:var(--maxw);margin-inline:auto;display:flex;gap:1.25rem 2rem;align-items:center;justify-content:space-between}
.consent-bar__title{font-weight:500;color:var(--fg);margin:0 0 .25rem;font-size:.95rem}
.consent-bar__text{margin:0;font-size:.85rem;color:var(--fg-2);max-width:72ch;line-height:1.55}
.consent-bar a,.consent-modal a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.consent-bar__actions{display:flex;gap:.6rem;flex:none}
.consent-bar__settings{order:-1}
@media (max-width:860px){.consent-bar__inner{flex-direction:column;align-items:stretch}.consent-bar__actions{display:grid;grid-template-columns:1fr 1fr}.consent-bar__settings{order:0;grid-column:1/-1}}
.consent-modal{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;transition:opacity var(--d-ui) ease}
.consent-modal.is-in{opacity:1}
.consent-modal__box{position:relative;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);width:100%;max-width:560px;max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.25rem,1rem + 2vw,2rem);transform:scale(.97);transition:transform var(--d-ui) var(--ease-out)}
.consent-modal.is-in .consent-modal__box{transform:none}
.consent-modal__x{position:absolute;right:.75rem;top:.75rem;width:44px;height:44px;font-size:1.6rem;line-height:1;color:var(--fg-3)}
.consent-modal__title{font-size:1.7rem;margin:0 2.5rem .5rem 0}
.consent-modal__text,.consent-modal__note{font-size:.9rem}
.consent-modal__note{background:var(--ec-tint);padding:.8rem 1rem;border-radius:var(--r-sm)}
.consent-cat{border-top:1px solid var(--line);padding:.9rem 0}
.consent-cat p{margin:.35rem 0 0;font-size:.86rem;line-height:1.5}
.consent-cat__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:32px}
.consent-cat__name{font-weight:500;color:var(--fg);cursor:pointer}
.consent-cat__always{font:var(--ec-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.consent-cat__svc{display:block;color:var(--fg-3);font-size:.8rem;margin-top:.2rem}
.consent-switch{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:999px;background:var(--line-2);position:relative;cursor:pointer;flex:none;margin:0;transition:background-color var(--d-hover) ease}
.consent-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#F0EEE5;transition:transform var(--d-hover) var(--ease-out)}
.consent-switch:checked{background:var(--fg)}
.consent-switch:checked::after{transform:translateX(20px)}
.consent-modal__actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}
.consent-modal__actions [data-c="save"],.consent-modal__actions [data-c="close"]{grid-column:1/-1}
.consent-modal__links{font-size:.82rem;margin:1rem 0 0;text-align:center}

/* ===== Handy-Feinschliff ===== */
@media (max-width:380px){.btn{white-space:normal;text-align:center}}
@media (max-width:560px){
  .btn-row>.btn{flex:1 1 100%}
  .hero .btn-row{margin-top:1.75rem}
  .stats{grid-template-columns:1fr 1fr}
  .cta-box{padding:1.75rem 1.4rem}
}

/* Touch-Geräte: Thumbnails in voller Farbe (kein Hover, der sie aufhellt) */
@media (hover:none){.refcard__media img,.vcard__thumb img{filter:saturate(.85)}}

/* ===== Feinschliff ===== */
.stat__value,.rf-claim__value,.nf__code{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);letter-spacing:var(--ec-head-tracking)}
@media (max-width:400px){
  .brand__word,.brand__dot{font-size:.86rem}
  .header__inner{gap:.6rem}
  .header__cta .btn{padding:.5rem .8rem;font-size:.8rem}
}
@media (max-width:340px){
  .brand__dot{display:none}
  .brand__word{font-size:.8rem}
  .header__cta .btn{padding:.45rem .65rem;font-size:.76rem}
  .burger{width:42px;height:42px;margin-left:.3rem}
}


/* ==== blog.css ==== */
/* ==========================================================================
   Blog „Editorial Noir“ (PHP-Renderer unter /blog/, Redesign 27.10.2026)
   Übersicht wie das Inhaltsverzeichnis einer Zeitschrift: Titelgeschichte, danach redaktionelle Zeilen
   statt Kartenraster. Artikel auf einem Dreispalten-Raster: Randspalte (Kopfdaten, Inhalt), Textspalte
   (rund 68 Zeichen je Zeile), freier Rand. Abschluss wie auf allen Seiten (.finale aus main.css).
   Komponenten aus main.css (.prose, .toc, .author-box, .tags, .blog-cta, .cat-nav …) werden hier nur
   für den Blog überschrieben (body.page-blog bzw. Blog-eigene Klassen).
   Bewegung: nur transform/opacity, Hover nur mit Maus, eigener Reduced-Motion-Block am Ende.
   ========================================================================== */

.page-blog{
  --a-col:minmax(11rem,15rem);           /* Randspalte */
  --a-text:minmax(0,37rem);              /* Textspalte: bei 1,19rem rund 68 Zeichen je Zeile */
  --a-gap:clamp(2.5rem,.5rem + 4vw,6.5rem);
  --prose-ink:#D4D1C4;                   /* Fließtext: etwas heller als --fg-2, ruhiger als --fg */
}

/* ---------------------------------------------------------------- Kopf: Übersicht, Kategorie, 404 */
.blog-hero{padding-bottom:clamp(2.5rem,1.6rem + 3vw,5rem)}
.blog-list{padding-bottom:clamp(4rem,2.6rem + 5vw,8rem)}
.blog-hero__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-bottom:clamp(1.2rem,1rem + .8vw,1.8rem)}
.blog-hero__top .eyebrow{margin:0}
.blog-hero__count{margin:0;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);font-variant-numeric:tabular-nums}
.blog-hero h1{font-size:min(calc(clamp(3.1rem,.7rem + 8.6vw,10rem) * var(--ec-hs)),calc((min(100vw,var(--maxw)) - 2 * var(--gutter)) / 9.8));line-height:var(--ec-head-leading);max-width:14ch;margin:0}
.blog-hero__foot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:2rem clamp(2rem,1rem + 5vw,7rem);align-items:end;margin-top:clamp(2rem,1.4rem + 2.6vw,3.8rem);padding-top:clamp(1.4rem,1rem + 1vw,2rem);border-top:1px solid var(--line-2)}
.blog-hero__foot .lead{margin:0;max-width:56ch}
.blog-hero__side{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem}
.blog-hero__note{margin:0;max-width:26ch;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem);line-height:1.2;color:var(--fg);text-wrap:balance}
.blog-hero .btn-row{margin:0}
.blog-hero__side .btn-row{max-width:100%}
.blog-hero__side .btn{max-width:100%;white-space:normal;text-align:left}   /* V13: breitere Schrift, der Button bricht in der schmalen Spalte um statt überzustehen */
@media (max-width:860px){.blog-hero__foot{grid-template-columns:1fr;align-items:start}}

/* Kategorien: Rubrikenzeile statt Pillen */
.page-blog .cat-nav{display:flex;flex-wrap:wrap;gap:0 clamp(1.4rem,1rem + 1.6vw,2.6rem);margin:0 0 clamp(2.2rem,1.6rem + 2.4vw,4rem);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.page-blog .cat-nav a{position:relative;display:inline-flex;align-items:flex-start;gap:.4rem;min-height:44px;padding:1.05rem 0 1rem;border:0;border-radius:0;background:none;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:700;font-size:calc(1.08rem * var(--ec-hs));line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--fg-3);transition:color var(--d-hover) ease}
.page-blog .cat-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fg);transform:scaleX(0);transform-origin:right;transition:transform var(--d-ui) var(--ease-out)}
.page-blog .cat-nav a[aria-current="page"]{background:none;color:var(--fg)}
.page-blog .cat-nav a[aria-current="page"]::after{background:var(--ec-accent);transform:scaleX(1)}
.cat-nav__n{font:var(--ec-label);font-size:.6rem;letter-spacing:.06em;color:var(--fg-3);transform:translateY(-.1em);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .page-blog .cat-nav a:hover{color:var(--fg);border-color:transparent}
  .page-blog .cat-nav a:hover::after{transform:scaleX(1);transform-origin:left}
}
@media (max-width:620px){
  .page-blog .cat-nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .page-blog .cat-nav::-webkit-scrollbar{display:none}
  .page-blog .cat-nav a{flex:none}
}

/* ---------------------------------------------------------------- Titelgeschichte (neuester Artikel) */
.lead-story{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,1rem + 2vw,3rem);padding:clamp(1.8rem,1.4rem + 1.6vw,3rem) 0 clamp(2.4rem,1.6rem + 3vw,4.5rem);border-top:2px solid var(--fg)}
.lead-story--media{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end}
.lead-story__kicker{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0 0 clamp(1.2rem,1rem + 1vw,2rem);font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.lead-story__kicker span:first-child{display:inline-flex;align-items:center;gap:.65rem;color:var(--fg)}
.lead-story__kicker span:first-child::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-accent)}
.lead-story__title{margin:0;max-width:16ch;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(2.5rem,1rem + 5.4vw,6.6rem) * var(--ec-hs));line-height:var(--ec-head-leading)}
.lead-story__t,.blog-row__t{display:block}
.lead-story__t{transition:transform .7s var(--ease-out)}
.lead-story--media .lead-story__title{font-size:clamp(2.4rem,1rem + 4.2vw,5.4rem)}
.lead-story__title a{color:inherit}
.lead-story__title a::after{content:"";position:absolute;inset:0;z-index:1}
.lead-story__title a:focus-visible{outline:0}
.lead-story__title a:focus-visible::after{outline:2px solid var(--fg);outline-offset:4px}
.lead-story__deck,.article__deck,.blog-row__deck{display:block;font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:none;letter-spacing:-.01em;text-wrap:balance}
.lead-story__deck{max-width:24ch;margin-top:.2em;font-size:.5em;line-height:1.04;color:var(--fg)}
.lead-story__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.1rem 3rem;align-items:end;margin-top:clamp(1.5rem,1rem + 2vw,2.8rem)}
.lead-story__excerpt{margin:0;max-width:54ch;font-size:var(--fs-lead);line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.lead-story__meta{grid-column:1;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:0;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.lead-story__meta time{color:var(--fg-2)}
.lead-story__go{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-weight:500;color:var(--fg);position:relative}
.lead-story__go::after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;background:var(--line-2);transition:background-color var(--d-hover) ease}
.lead-story__go .arrow{transition:transform var(--d-hover) var(--ease-out)}
.lead-story__media{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-3)}
.lead-story__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.04);transition:transform 1.1s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .lead-story:hover .lead-story__t{transform:translateX(10px)}
  .lead-story:hover .lead-story__go::after{background:var(--fg)}
  .lead-story:hover .lead-story__go .arrow{transform:translateX(4px)}
  .lead-story:hover .lead-story__media img{transform:scale(1.03)}
}
@media (max-width:860px){
  .lead-story--media{grid-template-columns:1fr}
  .lead-story--media .lead-story__media{grid-row:1}
  .lead-story__foot{grid-template-columns:1fr}
  .lead-story__go{grid-column:1;grid-row:auto}
}

/* ---------------------------------------------------------------- Redaktionelle Zeilen (Liste, Weiterlesen) */
.blog-rows{border-top:1px solid var(--line-2)}
.blog-rows>li{border-bottom:1px solid var(--line)}
.blog-feed .lead-story+.blog-rows{border-top-color:var(--line)}
.blog-row{position:relative;isolation:isolate;display:grid;grid-template-columns:9rem minmax(0,1.2fr) minmax(0,.8fr) 46px;grid-template-areas:"meta main excerpt go";gap:1rem clamp(1.2rem,.4rem + 2.6vw,3.5rem);align-items:start;padding:clamp(1.6rem,1rem + 1.7vw,2.7rem) 0}
.blog-row--media{grid-template-columns:9rem minmax(0,1fr) minmax(0,clamp(170px,19vw,290px)) 46px;grid-template-rows:auto 1fr;grid-template-areas:"meta main media go" "meta excerpt media go"}
.blog-row::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;background:var(--bg-2);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease-film)}
.blog-row__main{grid-area:main;min-width:0}
.blog-row__kicker{margin:0 0 .8rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.blog-row__title{margin:0;max-width:21ch;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(1.65rem,1rem + 2.1vw,3.05rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);text-transform:uppercase;color:var(--fg);text-wrap:balance}
.blog-row__t{transition:transform .6s var(--ease-out)}
h3.blog-row__title{font-size:clamp(1.55rem,1rem + 1.7vw,2.6rem)}
.blog-row__title a{color:inherit}
.blog-row__title a::after{content:"";position:absolute;inset:0;z-index:1}
.blog-row__title a:focus-visible{outline:0}
.blog-row__title a:focus-visible::after{outline:2px solid var(--fg);outline-offset:-2px}
.blog-row__deck{max-width:30ch;margin-top:.28em;font-size:.62em;line-height:1.08;color:var(--fg-2)}
.blog-row__excerpt{grid-area:excerpt;margin:0;padding-top:1.85rem;max-width:46ch;font-size:.98rem;line-height:1.55;color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.blog-row--media .blog-row__excerpt{padding-top:0;max-width:60ch;-webkit-line-clamp:3}
.blog-row__meta{grid-area:meta;display:flex;flex-direction:column;gap:.4rem;margin:0;padding-top:.15rem;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-variant-numeric:tabular-nums}
.blog-row__meta time{color:var(--fg-2)}
.blog-row__media{grid-area:media;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-3)}
.blog-row__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) brightness(.74) contrast(1.06);transition:filter .7s ease,transform 1.1s var(--ease-out)}
.blog-row__go{grid-area:go;justify-self:end;width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--fg);transition:background-color var(--d-hover) ease,border-color var(--d-hover) ease}
.blog-row:active{transform:scale(.996)}
@media (hover:hover) and (pointer:fine){
  .blog-row:hover::before{transform:scaleY(1)}
  .blog-row:hover .blog-row__t{transform:translateX(10px)}
  .blog-row:hover .blog-row__go{background:var(--ec-olive-500);border-color:var(--ec-olive-500)}
  .blog-row:hover .blog-row__media img{filter:none;transform:scale(1.04)}
}
@media (hover:none){.blog-row__media img{filter:grayscale(.3) brightness(.85)}}
@media (max-width:1100px){
  .blog-row,.blog-row--media{grid-template-columns:8rem minmax(0,1fr) 46px;grid-template-rows:auto 1fr;grid-template-areas:"meta main go" "meta excerpt go"}
  .blog-row--media{grid-template-columns:8rem minmax(0,1fr) minmax(0,clamp(150px,22vw,240px)) 46px;grid-template-areas:"meta main media go" "meta excerpt media go"}
  .blog-row__excerpt{padding-top:0;max-width:60ch;-webkit-line-clamp:3}
}
@media (max-width:760px){
  .blog-row,.blog-row--media{grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:none;grid-template-areas:"main go" "excerpt excerpt" "meta meta";row-gap:.9rem}
  .blog-row--media{grid-template-areas:"media media" "main go" "excerpt excerpt" "meta meta"}
  .blog-row__meta{flex-direction:row;flex-wrap:wrap;gap:.3rem 1.2rem;padding:0}
  .blog-row__go{width:40px;height:40px}
}

/* Seitenzahlen */
.page-blog .pagination{justify-content:flex-start;align-items:center;gap:.2rem;margin-top:clamp(2rem,1.5rem + 2vw,3rem);font:var(--ec-label);letter-spacing:.12em}
.page-blog .pagination::before{content:"Seite";content:"Seite" / "";margin-right:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.page-blog .pagination a,.page-blog .pagination span{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color var(--d-hover) ease,border-color var(--d-hover) ease}
.page-blog .pagination [aria-current="page"]{background:none;color:var(--fg);border-color:var(--ec-accent)}
@media (hover:hover) and (pointer:fine){.page-blog .pagination a:hover{color:var(--fg);border-color:var(--line-2)}}

/* ---------------------------------------------------------------- Leerer Zustand und Kategorie ohne Artikel */
.blog-empty__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.4rem clamp(2rem,1rem + 5vw,7rem);align-items:end;margin-bottom:clamp(2rem,1.4rem + 3vw,4rem)}
.blog-empty__head .eyebrow{grid-column:1/-1;margin:0}
.blog-empty__head h2{margin:0;font-size:var(--fs-h2);max-width:none}
.blog-empty__head .lead{margin:0}
@media (max-width:860px){.blog-empty__head{grid-template-columns:1fr}}
.blog-topics{border-top:1px solid var(--line-2)}
.blog-topic{display:grid;grid-template-columns:4rem minmax(0,1.1fr) minmax(0,1fr);gap:.8rem clamp(1rem,.5rem + 2.4vw,3.5rem);align-items:baseline;padding:clamp(1.5rem,1rem + 1.6vw,2.6rem) 0;border-bottom:1px solid var(--line)}
.blog-topic__nr{font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3)}
.blog-topic__name{margin:0;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.9rem,1rem + 2.9vw,4.1rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking)}
.blog-topic__intro{margin:0;max-width:46ch;font-size:.98rem;color:var(--fg-2)}
@media (max-width:860px){.blog-topic{grid-template-columns:2.6rem minmax(0,1fr)}.blog-topic__intro{grid-column:2}}

.blog-none{padding:clamp(1.8rem,1.4rem + 1.6vw,2.8rem) 0;border-top:2px solid var(--fg);border-bottom:1px solid var(--line)}
.blog-none__title{margin:0 0 .8rem;max-width:26ch;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.65rem,1.2rem + 1.5vw,2.7rem);line-height:1.12;color:var(--fg);text-wrap:balance}
.blog-none p:not(.blog-none__title){margin:0 0 .6rem;color:var(--fg-2)}

/* Passende Leistung (Kategorie) */
.blog-service{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) auto;gap:1rem clamp(1.5rem,1rem + 3vw,4.5rem);align-items:center;margin-top:clamp(3rem,2rem + 3vw,5.5rem);padding:clamp(1.5rem,1.1rem + 1.4vw,2.4rem) 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.blog-service__k{display:flex;align-items:center;gap:.65rem;margin:0;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.blog-service__k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-accent);flex:none}
.blog-service__title{margin:0 0 .45rem;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.6rem,1.1rem + 1.6vw,2.6rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);color:var(--fg)}
.blog-service__main p:not(.blog-service__title){margin:0;font-size:var(--fs-small);color:var(--fg-2)}
@media (max-width:860px){.blog-service{grid-template-columns:1fr;align-items:start}}

/* 404 */
.blog-404__label{margin:2.8rem 0 0;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.blog-404 .cat-nav{margin-top:1rem}
.blog-404 h1{max-width:16ch;font-size:var(--fs-h1)}
.blog-404 .lead{margin-top:1.6rem}
.blog-404 .btn-row{margin-top:2rem}

/* ---------------------------------------------------------------- Abschluss (.finale) mit Weiter-Links */
.blog-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(3rem,2rem + 3vw,5.5rem);border-top:1px solid var(--line-2)}
.blog-next__link{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) auto;gap:.4rem 1.2rem;align-items:center;min-height:44px;padding:1.3rem 0;color:var(--fg);border-bottom:1px solid var(--line)}
.blog-next__link+.blog-next__link{padding-left:clamp(1rem,.5rem + 2vw,2.5rem);border-left:1px solid var(--line)}
.blog-next__k{font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.blog-next__t{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.25rem,1rem + .8vw,1.7rem) * var(--ec-hs-long));line-height:var(--ec-head-leading)}
.blog-next__link .arrow{transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.blog-next__link:hover .arrow{transform:translateX(5px)}}
@media (max-width:700px){
  .blog-next{grid-template-columns:1fr}
  .blog-next__link+.blog-next__link{padding-left:0;border-left:0}
  .blog-next__link{grid-template-columns:minmax(0,1fr) auto}
  .blog-next__k{grid-column:1}
  .blog-next__t{grid-column:1}
  .blog-next__link .arrow{grid-column:2;grid-row:1/span 2}
}

/* ---------------------------------------------------------------- Artikel: Kopf */
.page-blog .article__head{max-width:var(--maxw);padding-top:calc(var(--header-h) + clamp(2rem,1.4rem + 3vw,5rem));padding-bottom:0}
.page-blog .article__head .crumbs li[aria-current="page"]{min-width:0;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-blog .article__title{margin:0;max-width:none;font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);font-size:calc(clamp(2.6rem,1rem + 6vw,7.4rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking)}
.article__deck{max-width:30ch;margin-top:.24em;font-size:calc(.52em / var(--ec-hs-long));line-height:1.03;color:var(--fg)}
.page-blog .article__lead{margin:0;max-width:34ch;font-family:var(--ec-font-body);font-size:clamp(1.45rem,1.1rem + 1vw,2rem);line-height:1.28;letter-spacing:-.005em;color:var(--fg);text-wrap:pretty}
/* Kopfdaten (dl): am Desktop gestapelt in der Randspalte, sonst als Zeile */
.page-blog .article__meta{display:flex;flex-direction:column;gap:0;margin:0;font:inherit;letter-spacing:normal;text-transform:none;color:var(--fg)}
.article__meta>div{padding:.7rem 0 .75rem;border-top:1px solid var(--line)}
.article__meta dt{margin-bottom:.3rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.article__meta dd{margin:0;font-size:.94rem;line-height:1.35;color:var(--fg)}
.page-blog .article__meta dd a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;text-decoration-thickness:1px}
.page-blog .article__meta .article__author{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.article__author img{width:34px;height:34px;object-fit:cover;border-radius:var(--r-sm);filter:grayscale(.55) contrast(1.05)}
@media (hover:hover) and (pointer:fine){.page-blog .article__meta dd a:hover{text-decoration-color:var(--fg)}}
.page-blog .article__cover{margin:clamp(2.5rem,1.8rem + 2.4vw,4.5rem) 0 0;border:0;border-radius:var(--r-sm);aspect-ratio:16/8;background:var(--bg-3)}
.page-blog .article__cover img{display:block;width:100%;height:100%;object-fit:cover}

@media (min-width:1001px){
  .page-blog .article__head{display:grid;grid-template-columns:var(--a-col) var(--a-text) minmax(0,1fr);column-gap:var(--a-gap);grid-auto-flow:row dense;align-items:start}
  .page-blog .article__head>*{grid-column:1/-1}
  .page-blog .article__head>.crumbs{margin-bottom:clamp(1.6rem,1rem + 1.6vw,2.6rem)}
  .page-blog .article__head>.article__lead{grid-column:2/4;margin-top:clamp(2.4rem,1.6rem + 2.4vw,4rem)}
  .page-blog .article__head>.article__meta{grid-column:1;margin-top:clamp(2.4rem,1.6rem + 2.4vw,4rem)}
  .article__meta>div:last-child{border-bottom:1px solid var(--line)}
}
@media (max-width:620px){.article__deck{font-size:calc(.64em / var(--ec-hs-long))}.page-blog .article__lead{font-size:1.35rem}}
@media (max-width:1000px){
  .page-blog .article__head .crumbs{margin-bottom:1.4rem}
  .page-blog .article__lead{margin-top:1.6rem}
  .page-blog .article__meta{flex-direction:row;flex-wrap:wrap;gap:.9rem 1.8rem;margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--line)}
  .article__meta>div{padding:0;border:0}
  .page-blog .article__head .crumbs li[aria-current="page"]{max-width:22ch}
}

/* ---------------------------------------------------------------- Artikel: Raster, Randspalte, Inhaltsverzeichnis */
.page-blog .article__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start;padding-top:clamp(2.5rem,1.6rem + 3vw,5rem);padding-bottom:clamp(4rem,2.5rem + 5vw,8rem)}
.article__main{min-width:0}
@media (min-width:1001px){
  .page-blog .article__layout{grid-template-columns:var(--a-col) var(--a-text) minmax(0,1fr);column-gap:var(--a-gap)}
  /* Randspalte klebt; ist das Inhaltsverzeichnis höher als der Bildschirm, scrollt nur die Liste, die Randnotiz bleibt sichtbar */
  .page-blog .article__layout>.article__aside{grid-column:1;grid-row:1;position:sticky;top:calc(var(--header-h) + 1.75rem);display:flex;flex-direction:column;max-height:calc(100vh - var(--header-h) - 2.5rem)}
  .page-blog .article__aside .toc-wrap{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;padding:2px 8px 2px 2px;margin:-2px -8px -2px -2px}
  .page-blog .article__aside .aside-cta{flex:none}
  .page-blog .article__layout>.article__main{grid-column:2;grid-row:1}
  .page-blog .article__aside .toc{position:static}
}
.page-blog .toc{position:static;border:0;padding:0;font-size:.86rem}
.page-blog .toc h2{margin:0 0 .4rem;padding-bottom:.8rem;border-bottom:1px solid var(--line);font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.page-blog .toc ol{counter-reset:toc}
.page-blog .toc li{counter-increment:toc;display:grid;grid-template-columns:2.3em minmax(0,1fr);border-bottom:1px solid var(--line)}
.page-blog .toc li+li{margin-top:0}
.page-blog .toc li::before{content:counter(toc,decimal-leading-zero);padding-top:.6rem;font:var(--ec-label);color:var(--fg-3);transition:color var(--d-hover) ease}
.page-blog .toc a{display:block;padding:.5rem 0 .55rem;line-height:1.32;color:var(--fg-3);transition:color var(--d-hover) ease}
.page-blog .toc a.is-active{color:var(--fg)}
.page-blog .toc li:has(>a.is-active)::before{color:var(--ec-accent)}
@media (hover:hover) and (pointer:fine){.page-blog .toc a:hover{color:var(--fg)}}
/* Inhaltsverzeichnis: am Desktop immer offen (Summary ausgeblendet), auf dem Handy aufklappbar.
   site.js schließt [data-toc] auf schmalen Bildschirmen beim Laden; ohne JS bleibt es offen. */
.toc-wrap>summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;cursor:pointer;list-style:none;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.toc-wrap>summary::-webkit-details-marker{display:none}
.toc-wrap>summary::after{content:"+";font-size:1.15rem;line-height:1;letter-spacing:0;color:var(--fg)}
.toc-wrap[open]>summary::after{content:"\2212"}
.toc-wrap>summary:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media (min-width:1001px){.toc-wrap>summary{display:none}}
@media (max-width:1000px){
  .toc-wrap{margin-bottom:2.2rem;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
  .page-blog .toc-wrap .toc{margin:0;padding:0 0 .6rem}
  .page-blog .toc-wrap .toc h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .page-blog .toc-wrap .toc li:last-child{border-bottom:0}
}
/* Randnotiz unter dem Inhaltsverzeichnis */
.aside-cta{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid var(--line-2)}
.article__layout--single .aside-cta{margin-top:0}
.aside-cta__k{display:flex;align-items:center;gap:.6rem;margin:0 0 .7rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.aside-cta__k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ec-accent);flex:none}
.aside-cta__q{margin:0 0 .35rem;font-family:var(--ec-font-body);font-style:italic;font-size:1.3rem;line-height:1.18;color:var(--fg)}
.aside-cta .textlink{font-size:.9rem}
@media (max-width:1000px){.aside-cta,.article__layout--single .article__aside{display:none}}
@media (min-width:1001px) and (max-height:860px){.aside-cta__q{display:none}.aside-cta{margin-top:1.6rem}}

/* ---------------------------------------------------------------- Artikel: Fließtext */
.page-blog .prose{max-width:none;font-size:clamp(1.0625rem,.98rem + .25vw,1.1875rem);line-height:1.72;color:var(--prose-ink);counter-reset:sec;hanging-punctuation:first}
.page-blog .prose>*+*{margin-top:1.15em}
.page-blog .prose p{max-width:none}
/* Initiale am ersten Absatz */
.page-blog .prose>p:first-child::first-letter{float:left;margin:.07em .12em 0 -.03em;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(4.35em * var(--ec-hs));line-height:var(--ec-head-leading);text-transform:uppercase;color:var(--fg)}
.page-blog .prose h2{counter-increment:sec;margin-top:2.5em;margin-bottom:.6em;padding-top:1.15rem;border-top:1px solid var(--line-2);font-size:calc(clamp(1.85rem,1.25rem + 1.7vw,2.8rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);font-stretch:var(--ec-head-stretch-long)}
.page-blog .prose h2::before{content:counter(sec,decimal-leading-zero);content:counter(sec,decimal-leading-zero) / "";display:block;margin-bottom:1rem;font:var(--ec-label);letter-spacing:.2em;color:var(--ec-accent)}
.page-blog .prose h3{margin-top:2em;margin-bottom:.45em;font-size:clamp(1.3rem,1.15rem + .55vw,1.62rem);line-height:1.18}
.page-blog .prose h2+h3{margin-top:1.1em}
.page-blog .prose h4{margin-top:1.6em;margin-bottom:.4em}
.page-blog .prose h2,.page-blog .prose h3,.page-blog .prose h4{scroll-margin-top:calc(var(--header-h) + 1.5rem)}
.page-blog .prose a:not([class]){color:var(--fg);text-decoration:underline;text-decoration-color:rgba(173,169,134,.7);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color var(--d-hover) ease,color var(--d-hover) ease}
@media (hover:hover) and (pointer:fine){.page-blog .prose a:not([class]):hover{text-decoration-color:var(--fg)}}
.page-blog .prose strong{color:var(--fg);font-weight:600}
.page-blog .prose em{font-style:italic}
/* Listen: Olive-Quadrat und Label-Ziffern */
.page-blog .prose ul,.page-blog .prose ol{list-style:none;padding-left:0;margin-bottom:0}
.page-blog .prose li{position:relative;margin-bottom:.55em;padding-left:1.6em}
.page-blog .prose li::marker{content:none}
.page-blog .prose ul>li::before{content:"";position:absolute;left:.15em;top:.68em;width:6px;height:6px;background:var(--ec-quote)}
.page-blog .prose ol{counter-reset:li}
.page-blog .prose ol>li{counter-increment:li;padding-left:2.3em}
.page-blog .prose ol>li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.42em;font:var(--ec-label);font-size:.74rem;letter-spacing:.1em;color:var(--fg-3)}
.page-blog .prose ul ul,.page-blog .prose ol ol,.page-blog .prose ul ol,.page-blog .prose ol ul{margin-top:.55em;margin-bottom:.2em}
.page-blog .prose ul ul>li::before{background:transparent;border:1px solid var(--fg-3)}
.page-blog .prose li>p{margin:0 0 .5em}
/* Zitat */
.page-blog .prose blockquote{margin:2.2em 0;padding:.15em 0 .15em clamp(1.2rem,.8rem + 1.2vw,1.8rem);border-left:2px solid var(--ec-quote);font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.45rem,1.15rem + .9vw,1.9rem);line-height:1.28;letter-spacing:-.005em;color:var(--fg);text-wrap:pretty}
.page-blog .prose blockquote p{margin:0}
.page-blog .prose blockquote p+p{margin-top:.6em}
.page-blog .prose blockquote strong{font-weight:400}
/* Bilder, Linien, Code */
.page-blog .prose img{border:0;border-radius:var(--r-sm)}
.page-blog .prose figure{margin:2.2em 0}
.page-blog .prose figure img{width:100%;height:auto}
.page-blog .prose figcaption{margin-top:.7rem;font-size:.84rem;line-height:1.5;color:var(--fg-3)}
.page-blog .prose hr{margin:3em 0;border:0;border-top:1px solid var(--line-2)}
.page-blog .prose code{font-family:var(--ec-font-label);font-size:.86em;background:var(--bg-3);padding:.12em .4em;border-radius:var(--r-sm)}
.page-blog .prose pre{overflow-x:auto;padding:1rem 1.15rem;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);font-size:.86rem;line-height:1.6}
.page-blog .prose pre code{background:none;padding:0}
.page-blog .prose del{color:var(--fg-3)}
/* Tabellen: Linien statt Kästen; am Desktop dürfen sie in den freien Rand laufen */
.page-blog .prose .table-wrap{margin-block:2em;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--fg)}
.page-blog .prose table{width:100%;border-collapse:collapse;font-size:.93rem;line-height:1.45}
.page-blog .prose .table-wrap table{min-width:540px}
.page-blog .prose th,.page-blog .prose td{text-align:left;padding:.85rem 1.1rem .85rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.page-blog .prose th{padding-block:.8rem .7rem;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);border-bottom-color:var(--line-2)}
.page-blog .prose td{color:var(--fg-2)}
.page-blog .prose td:first-child{color:var(--fg);font-weight:500}
.page-blog .prose th.ta-c,.page-blog .prose td.ta-c{text-align:center}
.page-blog .prose th.ta-r,.page-blog .prose td.ta-r{text-align:right}
@media (min-width:1200px){
  .page-blog .prose .table-wrap{width:max(100%,min(62rem,calc(min(100vw,var(--maxw)) - 2 * var(--gutter) - 15rem - var(--a-gap) - 1.5rem)))}
}
/* Überschriften-Anker */
.page-blog .prose .h-anchor{display:inline-block;margin-left:.2em;font-family:var(--ec-font-label);font-size:.5em;font-weight:400;vertical-align:.35em;color:var(--fg-3);text-decoration:none;opacity:0;transition:opacity var(--d-hover) ease}
.page-blog .prose h2:focus-within .h-anchor,.page-blog .prose h3:focus-within .h-anchor,.page-blog .prose .h-anchor:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){.page-blog .prose h2:hover .h-anchor,.page-blog .prose h3:hover .h-anchor,.page-blog .prose h4:hover .h-anchor{opacity:1}}
/* Inhaltsverzeichnis im Text ([[toc]]) */
.page-blog .prose .toc--inline{margin-block:2em;padding:1.1rem 0 .4rem;border-top:2px solid var(--fg);border-bottom:1px solid var(--line)}
.page-blog .prose .toc--inline .toc__title{margin:0 0 .5rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.page-blog .prose .toc--inline ol{margin:0}
.page-blog .prose .toc--inline li{padding-left:0;margin:0}
.page-blog .prose .toc--inline li::before{position:static;padding-top:.62rem;font-size:.7rem}
.page-blog .prose .toc--inline li:last-child{border-bottom:0}
.page-blog .prose .toc--inline a:not([class]){text-decoration:none;color:var(--fg-2)}
@media (hover:hover) and (pointer:fine){.page-blog .prose .toc--inline a:not([class]):hover{color:var(--fg)}}
@media (max-width:560px){.page-blog .prose{font-size:1.06rem;line-height:1.7;overflow-wrap:break-word}.page-blog .prose>p:first-child::first-letter{font-size:4.1em}}

/* Bausteine innerhalb des Textes: keine Unterstreichung */
.page-blog .prose .btn,.page-blog .prose .textlink,.page-blog .prose .refcard,.page-blog .prose .yt a.textlink,.page-blog .prose .blog-cta a{text-decoration:none}
.page-blog .prose .refcard{color:inherit}

/* Hinweis auf das Strategiegespräch im Text ([[cta]]): Einschub mit Linien statt Kasten */
.page-blog .blog-cta{position:relative;margin-block:2.6em;padding:1.5rem 0 1.7rem;border:0;border-top:2px solid var(--fg);border-bottom:1px solid var(--line-2);border-radius:0;background:none;overflow:visible}
.page-blog .blog-cta::before{display:none}
.page-blog .blog-cta .eyebrow{margin-bottom:1rem;font:var(--ec-label);letter-spacing:.2em}
.page-blog .blog-cta .blog-cta__title{margin:0 0 .75rem;max-width:20ch;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.65rem,1.2rem + 1.4vw,2.45rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);color:var(--fg);text-wrap:balance}
.page-blog .blog-cta p:not([class]){max-width:54ch;font-size:.98rem;line-height:1.6;color:var(--fg-2)}
.page-blog .blog-cta .btn-row{margin-top:1.3rem;gap:.6rem 1.6rem}
.page-blog .blog-cta .textlink{color:var(--fg);font-size:.95rem}
.page-blog .blog-cta .blog-cta__note{margin:1rem 0 0;font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}

/* Referenzkachel im Artikel */
.blog-ref{margin:2.4em 0}
.blog-ref .refcard{max-width:560px}
.blog-ref figcaption{max-width:560px;margin-top:.7rem;font-size:.82rem;line-height:1.5;color:var(--fg-3)}

/* YouTube-Fassade ohne Vorschaubild */
.page-blog .yt{border-radius:var(--r-sm);margin-block:2.2em}
.yt--ph .yt__btn{background:radial-gradient(110% 90% at 88% 10%,rgba(110,108,76,.35),transparent 60%),linear-gradient(160deg,var(--bg-3),var(--bg))}
.yt__ph{position:absolute;left:clamp(1rem,.6rem + 2vw,1.75rem);top:clamp(1rem,.6rem + 2vw,1.5rem);right:clamp(1rem,.6rem + 2vw,1.75rem);display:flex;flex-direction:column;gap:.55rem;text-align:left}
.yt__ph-label{display:flex;align-items:center;gap:.6rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.yt__ph-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ec-accent)}
.yt__ph-title{max-width:22ch;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.4rem,1rem + 1.6vw,2.4rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt--ph .yt__btn:active .vcard__play{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){.yt--ph .yt__btn:hover .vcard__play{transform:scale(1);background:var(--ec-olive-500);color:var(--fg);border-color:var(--ec-olive-500)}}
.yt__fallback{position:absolute;left:1rem;bottom:2.4rem;margin:0}
@media (max-width:560px){.yt__ph-title{-webkit-line-clamp:1}.yt__note{font-size:.7rem}}

/* ---------------------------------------------------------------- Artikel: Schlagwörter, Quellen, Autor */
.article__tags{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.4rem;margin-top:clamp(3rem,2.2rem + 2vw,4.2rem);padding-top:1.1rem;border-top:1px solid var(--line-2)}
.article__tags-k{margin:0;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.page-blog .tags{display:flex;flex-wrap:wrap;gap:.3rem 0;margin:0}
.page-blog .tags li{padding:0;border:0;border-radius:0;font:var(--ec-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.page-blog .tags li+li::before{content:"/";content:"/" / "";margin:0 .7rem;color:var(--fg-3)}

.article__sources{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.article__sources h2{margin:0 0 1rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.sources{counter-reset:src;font-size:var(--fs-small);line-height:1.5;color:var(--fg-2)}
.sources li{counter-increment:src;position:relative;margin-bottom:.6rem;padding-left:2.3em;overflow-wrap:anywhere}
.sources li::before{content:counter(src,decimal-leading-zero);position:absolute;left:0;top:.2em;font:var(--ec-label);color:var(--fg-3)}
.sources a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
@media (hover:hover) and (pointer:fine){.sources a:hover{text-decoration-color:var(--fg)}}
.sources__date{color:var(--fg-3)}

.page-blog .author-box{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:clamp(1.2rem,1rem + 1vw,2rem);align-items:start;margin-top:clamp(3rem,2.2rem + 2vw,4.5rem);padding-top:1.6rem;border-top:2px solid var(--fg)}
.page-blog .author-box .author-box__img{width:7.5rem;height:auto;aspect-ratio:1;object-fit:cover;border:0;border-radius:var(--r-sm);filter:grayscale(.85) contrast(1.06)}
.page-blog .author-box .eyebrow{margin-bottom:.8rem;font:var(--ec-label);letter-spacing:.2em}
.page-blog .author-box h2{margin:0 0 .7rem;font-size:calc(clamp(1.9rem,1.3rem + 1.6vw,2.9rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);font-stretch:var(--ec-head-stretch-long)}
.page-blog .author-box p{margin:0 0 .8rem;max-width:54ch;font-size:.98rem;color:var(--fg-2)}
.page-blog .author-box .author-box__links{display:flex;flex-wrap:wrap;gap:0 1.6rem;margin:0}
@media (max-width:480px){.page-blog .author-box{grid-template-columns:5rem minmax(0,1fr)}.page-blog .author-box .author-box__img{width:5rem}}

/* Weiterlesen */
.blog-related{border-top:1px solid var(--line)}
.blog-related__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;margin-bottom:clamp(1.6rem,1.2rem + 2vw,3rem)}
.blog-related__head .eyebrow{flex:1 0 100%;max-width:none;margin:0}
.blog-related__head h2{margin:0}

/* ---------------------------------------------------------------- Vorschau im CMS */
.preview-bar{display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:baseline;margin:0 0 1.75rem;padding:.8rem 1rem;border:1px solid rgba(173,169,134,.45);border-left:3px solid var(--ec-accent);border-radius:var(--r-sm);background:rgba(173,169,134,.09);font-size:var(--fs-small);color:var(--fg-2)}
.page-blog .article__head>.preview-bar{grid-column:1/-1}
.preview-bar strong{font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:#C4BFAE}
.link-pending{text-decoration:underline dotted rgba(173,169,134,.85);text-underline-offset:3px;cursor:help}
.md-unknown{font-size:var(--fs-small);color:#C4BFAE}

/* ---------------------------------------------------------------- Ruhige Bewegung */
@media (prefers-reduced-motion:reduce){
  .blog-row::before,.blog-row__t,.blog-row__media img,.blog-row__go,.lead-story__t,.lead-story__media img,.lead-story__go .arrow,
  .page-blog .cat-nav a::after,.page-blog .prose .h-anchor,.blog-next__link .arrow,.page-blog .toc a{transition:none}
  .blog-row:hover .blog-row__t,.lead-story:hover .lead-story__t,.blog-row:active{transform:none}
  .blog-row:hover .blog-row__media img,.lead-story:hover .lead-story__media img{transform:none}
}


/* ==== core-pages.css ==== */
/* =====================================================================
   Kern-Seiten im Stil „Editorial Noir“: Buchung (/strategiegespraech/), Bestätigung, Kontakt, Danke,
   Rechtliches, 404. Dazu oben ein paar globale Teile (.scrub, .latest, .h3).
   Bewegungsregeln wie in main.css: transform/opacity, Hover nur mit Maus, reduced motion beachtet.
   ===================================================================== */

/* ---------- Scroll-Fortschritt im Header, nur wo CSS-Scroll-Timelines laufen (global) ---------- */
.scrub{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.scrub i{display:block;height:100%;background:var(--ec-accent);transform:scaleX(0);transform-origin:left}
@supports (animation-timeline: scroll()){
  .scrub i{animation:scrub linear both;animation-timeline:scroll(root block)}
  @keyframes scrub{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){.scrub{display:none}}

/* ---------- Kleine globale Helfer ---------- */
.latest{margin-bottom:2.5rem}
.h3{font-size:var(--fs-h3);line-height:1.18}

/* =====================================================================
   Ruhige Formularfelder (Buchung und Kontakt). Basis in main.css (.field, .consent), hier nur verfeinert.
   ===================================================================== */
:is(.booking,.contact-form) .field{margin-top:1.35rem}
:is(.booking,.contact-form) .field>label{margin-bottom:.55rem;font-size:.9rem;font-weight:500;color:var(--fg)}
:is(.booking,.contact-form) .req{color:var(--ec-accent)}
:is(.booking,.contact-form) .field>label .muted{font-weight:400;font-size:.84rem}
:is(.booking,.contact-form) .field :is(input:not([type="checkbox"]),textarea,select){min-height:54px;padding:.9rem 1rem;border:1px solid rgba(240,238,229,.2);border-radius:var(--r-sm);background-color:#080808;color:var(--fg);transition:border-color var(--d-hover) ease,background-color var(--d-hover) ease,box-shadow var(--d-hover) ease}
:is(.booking,.contact-form) .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23B9B1A5' stroke-width='1.4'/%3E%3C/svg%3E")}
:is(.booking,.contact-form) .field textarea{min-height:120px}
:is(.booking,.contact-form) .field :is(input:not([type="checkbox"]),textarea,select):focus{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg);background-color:#0E0E0D}
:is(.booking,.contact-form) .field :is(input:not([type="checkbox"]),textarea,select)[aria-invalid="true"]{border-color:var(--ec-accent);box-shadow:0 0 0 1px var(--ec-accent)}
:is(.booking,.contact-form) .err{color:#C4BFAE}
:is(.booking,.contact-form) .consent{margin-top:1.6rem;padding-top:1.35rem;border-top:1px solid var(--line);font-size:.86rem;line-height:1.55;color:var(--fg-2)}
:is(.booking,.contact-form) .consent{flex-wrap:wrap;row-gap:.1rem}
:is(.booking,.contact-form) .consent label{flex:1 1 0;min-width:0}
:is(.booking,.contact-form) .consent .err{flex:1 1 100%;margin-top:.15rem;padding-left:calc(20px + .75rem)}
:is(.booking,.contact-form) .consent input{appearance:none;-webkit-appearance:none;display:grid;place-content:center;flex:none;width:20px;height:20px;min-height:0;padding:0;margin:.1rem 0 0;border:1px solid rgba(240,238,229,.42);border-radius:var(--r-sm);background:#080808;cursor:pointer;transition:background-color var(--d-hover) ease,border-color var(--d-hover) ease}
:is(.booking,.contact-form) .consent input::before{content:"";width:10px;height:5px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform 140ms var(--ease-out)}
:is(.booking,.contact-form) .consent input:checked{background:var(--fg);border-color:var(--fg)}
:is(.booking,.contact-form) .consent input:checked::before{transform:translateY(-1px) rotate(-45deg) scale(1)}
:is(.booking,.contact-form) .consent input:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
:is(.booking,.contact-form) .consent input[aria-invalid="true"]{border-color:var(--ec-accent)}
:is(.booking,.contact-form) .consent label{cursor:pointer}
:is(.booking,.contact-form) .consent a{color:var(--fg);text-decoration-color:var(--line-2)}
:is(.booking,.contact-form) .hint{font-size:.82rem;color:var(--fg-3)}
@media (hover:hover) and (pointer:fine){
  :is(.booking,.contact-form) .field :is(input:not([type="checkbox"]),textarea,select):not(:focus):hover{border-color:rgba(240,238,229,.36)}
}

/* =====================================================================
   Buchungsseite
   ===================================================================== */
.hero--booking{overflow:visible;padding-top:calc(var(--header-h) + clamp(1.5rem,1rem + 2.4vw,3.5rem));padding-bottom:clamp(3.5rem,2rem + 4vw,6.5rem)}
.hero--booking .crumbs{margin-bottom:clamp(1.5rem,1rem + 2vw,2.75rem)}
.booking-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,1rem + 4.6vw,6.5rem);align-items:start}
.booking-hero h1{margin:0;max-width:none;font-size:clamp(2.4rem,1rem + 3.3vw,4.4rem);line-height:.9}
.booking-hero .lead{margin-top:clamp(1.2rem,1rem + .8vw,1.8rem);max-width:44ch;font-size:clamp(1.02rem,.96rem + .3vw,1.18rem)}
.booking-hero .hero__trust{margin-top:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);max-width:46ch}
.booking-hero .hero__trust strong{color:var(--fg)}
@media (min-width:981px){
  .booking-hero__jump{display:none}
  .booking-hero__copy{position:sticky;top:calc(var(--header-h) + 2rem)}
}

/* Das Gespräch in Kürze: drei Felder wie auf einer Klappe */
.booking-slate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(1.8rem,1.2rem + 1.6vw,2.8rem) 0 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.booking-slate>div{padding:.95rem 1rem 1rem 0;min-width:0}
.booking-slate>div+div{padding-left:1.1rem;border-left:1px solid var(--line)}
.booking-slate dt{font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.booking-slate dd{margin:.45rem 0 0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.25rem,1rem + .7vw,1.65rem) * var(--ec-hs));line-height:1;color:var(--fg)}
@media (max-width:980px){
  .booking-hero{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .booking-slate{display:none}
}

/* Formular-Panel */
.booking-wrap{position:relative}
.booking{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.3rem,1rem + 1.8vw,2.7rem);scroll-margin-top:calc(var(--header-h) + 1rem)}
@media (max-width:560px){.booking,.contact-form{padding:1.35rem 1.1rem 1.6rem}}
.booking__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:0 0 clamp(1.7rem,1.3rem + 1.2vw,2.4rem)}
.booking__steps li{padding-top:.85rem;border-top:1px solid var(--line-2);font:var(--ec-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);transition:color var(--d-ui) ease,border-color var(--d-ui) ease,box-shadow var(--d-ui) ease}
.booking__stepnr{display:block;margin-bottom:.35rem;color:var(--fg-3);letter-spacing:.16em}
.booking__steps li.is-active{color:var(--fg);border-top-color:var(--fg);box-shadow:inset 0 1px 0 var(--fg)}
.booking__steps li.is-active .booking__stepnr{color:var(--ec-accent)}
.booking__steps li.is-done{color:var(--fg-2);border-top-color:var(--fg-3)}
.booking h2{margin-bottom:.55rem;font-size:calc(clamp(1.9rem,1.4rem + 1.3vw,2.6rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);font-stretch:var(--ec-head-stretch-long)}
.booking__intro{margin-bottom:1.4rem;max-width:52ch;font-size:var(--fs-small);color:var(--fg-2)}
.booking .notice--config{margin:0 0 .3rem;padding:1rem 1.2rem;border-left:2px solid var(--ec-accent);border-radius:0 var(--r-sm) var(--r-sm) 0;background:rgba(110,108,76,.16);font-size:.88rem;line-height:1.55;color:var(--fg-2)}
.booking__actions{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;margin-top:1.9rem}
.booking__actions .btn{flex:1 1 100%;min-height:60px;font-size:1rem}
.booking__skip{display:inline-flex;align-items:center;min-height:44px;font-size:.88rem;color:var(--fg-3);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.booking__skip:hover{color:var(--fg)}}
.booking__form>.hint{margin-top:1rem}
.booking__gate{display:grid;gap:1rem;padding:1.5rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg)}
.booking__gate p{margin:0;font-size:var(--fs-small)}
.booking__gate a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.booking__remember{display:flex;gap:.6rem;align-items:center;font-size:.86rem;color:var(--fg-3)}
.booking__remember input{accent-color:var(--fg);width:18px;height:18px}
.booking__widget{min-height:700px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg)}
.booking__widget .calendly-inline-widget,.booking__widget iframe{min-height:700px;width:100%}
.booking__loading{padding:2rem;color:var(--fg-3);font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase}
.booking__back{display:inline-flex;align-items:center;min-height:44px;margin-top:.75rem;font-size:.88rem;color:var(--fg-3)}
.booking__done{text-align:left}
.booking__done:focus{outline:none}
.booking__done h2{font-size:calc(clamp(1.9rem,1.4rem + 1.5vw,2.7rem) * var(--ec-hs-long));font-stretch:var(--ec-head-stretch-long)}
.booking__done .btn-row{margin-top:1.8rem;gap:.9rem 1.6rem}
.booking__check{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--fg);margin-bottom:1.4rem}
.booking__check svg{width:22px;height:22px}

/* Abhak-Listen auf Buchung und Bestätigung: Zeilen mit Linie, Haken bzw. Kreuz als feine Zeichen */
:is(.binfo,.booking__done,.confirm) .checks li{gap:.95rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.97rem;line-height:1.5;color:var(--fg)}
:is(.binfo,.booking__done,.confirm) .checks li::before{width:11px;height:6px;margin-top:.5rem;border:0;border-left:1.5px solid var(--fg);border-bottom:1.5px solid var(--fg);border-radius:0;background:none;transform:rotate(-45deg)}
.binfo .checks--no li{color:var(--fg-2)}
.binfo .checks--no li::before{width:11px;height:11px;margin-top:.4rem;border:0;transform:none;background:linear-gradient(45deg,transparent 44%,var(--fg-3) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--fg-3) 44% 56%,transparent 56%)}

/* Info-Bereich unter dem Formular: Zeilen mit Nummer, Überschrift links, Inhalt rechts */
.booking-info{border-bottom:1px solid var(--line-2)}
.binfo{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:1.5rem clamp(2rem,1rem + 4.6vw,6.5rem);padding:clamp(2.2rem,1.5rem + 2.2vw,3.8rem) 0;border-top:1px solid var(--line-2)}
.binfo__head{display:flex;flex-direction:column;gap:1rem;align-self:start}
.binfo__nr{font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3)}
.binfo h2{margin:0;max-width:14ch;font-size:clamp(1.9rem,1.1rem + 2.2vw,3.5rem)}
.binfo__body{min-width:0}
@media (min-width:861px){.binfo__head{position:sticky;top:calc(var(--header-h) + 2rem)}}
@media (max-width:860px){.binfo{grid-template-columns:minmax(0,1fr)}}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem clamp(1.5rem,1rem + 2vw,3rem)}
@media (max-width:620px){.fit{grid-template-columns:1fr}}
.fit h3{margin:0;padding-bottom:.85rem;border-bottom:1px solid var(--line-2);font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.agenda li{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.agenda li:first-child{padding-top:0}
.agenda__tc{font:var(--ec-label);letter-spacing:.14em;color:var(--fg-3);font-variant-numeric:tabular-nums}
.agenda li:first-child .agenda__tc{color:var(--ec-accent)}
.agenda strong{display:block;margin-bottom:.3rem;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.2rem,1rem + .6vw,1.5rem) * var(--ec-hs));line-height:1;color:var(--fg)}
.agenda__t{font-size:var(--fs-small);color:var(--fg-2)}
.topics{display:flex;flex-wrap:wrap;gap:.35rem 1.05em;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.35rem,1rem + 1.2vw,2.15rem) * var(--ec-hs));line-height:1.12;color:var(--fg)}
.topics li{display:inline-flex;align-items:center;gap:.42em}
.topics li::before{content:"";flex:none;width:.2em;height:.2em;border-radius:50%;background:var(--fg-3)}
.topics li:first-child::before{background:var(--ec-accent)}

/* Fragen auf der Buchungsseite: langes Wort „Strategiegespräch.“ muss in die schmale Kopfspalte passen */
.page-booking .faqsec{padding-top:clamp(3.5rem,2rem + 5vw,7rem)}
.page-booking .faq__wrap .sec-head{container-type:inline-size}
.page-booking .faq__wrap .sec-head h2{font-size:min(var(--fs-h2),12cqi)}
.binfo__list li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line);color:var(--fg);align-items:baseline}
.binfo__list li:first-child{padding-top:0}
.binfo__li-nr{font:var(--ec-label);letter-spacing:.14em;color:var(--fg-3)}
.binfo .small{margin-bottom:1.1rem;color:var(--fg-2)}
.direct{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;margin:0;max-width:none}
.direct a,.direct-list a{display:inline-block;padding:.3rem 0;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.3rem);line-height:1.25;color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:.16em;transition:text-decoration-color var(--d-hover) ease}
@media (hover:hover) and (pointer:fine){.direct a:hover,.direct-list a:hover{text-decoration-color:var(--fg)}}

/* =====================================================================
   Bestätigung und Danke
   ===================================================================== */
.confirm-hero{min-height:min(88svh,920px);display:flex;align-items:center;padding-top:calc(var(--header-h) + clamp(2rem,1.4rem + 3vw,4.5rem))}
.confirm{max-width:var(--maxw)}
.confirm h1{margin:0;max-width:11em;font-size:calc(clamp(2.6rem,1rem + 5.4vw,7.2rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);font-stretch:var(--ec-head-stretch-mid)}
.confirm .lead{margin-top:clamp(1.3rem,1rem + 1vw,2rem);max-width:50ch}
.confirm__when{margin:1.4rem 0 0;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.6rem,1.2rem + 1.5vw,2.7rem);line-height:1.15;color:var(--fg)}
.confirm__when:empty{display:none}
.confirm h2.h3{max-width:640px;margin:clamp(2.2rem,1.8rem + 1.4vw,3.2rem) 0 .4rem;padding-bottom:.85rem;border-bottom:1px solid var(--line-2);font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.confirm .checks{max-width:640px}
.confirm .btn-row{margin-top:clamp(1.8rem,1.4rem + 1.2vw,2.6rem);gap:.9rem 1.8rem}

/* =====================================================================
   Kontakt
   ===================================================================== */
.contact-hero{padding-top:calc(var(--header-h) + clamp(1.5rem,1rem + 2.4vw,3.5rem));padding-bottom:clamp(3rem,2rem + 3.6vw,6rem)}
.contact-hero .crumbs{margin-bottom:clamp(1.5rem,1rem + 2vw,2.75rem)}
.contact-hero h1{margin:0;max-width:9.6em;font-size:calc(clamp(2.7rem,1rem + 5.4vw,7.2rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);font-stretch:var(--ec-head-stretch-mid)}
.contact-hero .lead{margin-top:clamp(1.3rem,1rem + 1vw,2rem);max-width:50ch}
.contact-hero .btn-row{margin-top:clamp(1.6rem,1.2rem + 1.2vw,2.4rem)}
/* Desktop: Überschrift über die volle Breite, darunter Text links und Knöpfe rechts */
@media (min-width:901px){
  .contact-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(2rem,1rem + 4vw,6rem);align-items:end}
  .contact-hero .wrap>*{grid-column:1/-1}
  .contact-hero .wrap>.lead{grid-column:1}
  .contact-hero .wrap>.btn-row{grid-column:2;justify-content:flex-end}
}
.contact-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,1rem + 5vw,7rem);align-items:start}
@media (max-width:900px){.contact-layout{grid-template-columns:minmax(0,1fr)}}
.contact-aside{display:grid}
@media (min-width:901px){.contact-aside{position:sticky;top:calc(var(--header-h) + 2rem)}}
.contact-block{padding:1.6rem 0 1.9rem;border-top:1px solid var(--line-2)}
.contact-block .eyebrow{margin-bottom:1.1rem}
.contact-block .h3{margin:0 0 .8rem;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-mid);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.7rem,1.2rem + 1.4vw,2.6rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking)}
.contact-block .small{max-width:40ch;color:var(--fg-2)}
.contact-block .btn-row{margin-top:1.4rem}
.direct-list li+li{margin-top:.35rem}
.contact-form{max-width:none;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.3rem,1rem + 1.8vw,2.7rem)}
.contact-form>.hp+.row2 .field{margin-top:0}
.contact-form .form__nav{margin-top:1.9rem}
.contact-form .form__nav .btn{flex:1 1 100%;min-height:60px;font-size:1rem}
.contact-form>.hint{margin-top:1rem}

/* =====================================================================
   Rechtliches: ruhige Lesespalte, Inhaltsverzeichnis links (Datenschutz)
   ===================================================================== */
.legal-hero{padding-top:calc(var(--header-h) + clamp(2rem,1.4rem + 3vw,4.5rem));padding-bottom:clamp(2.2rem,1.6rem + 2.4vw,4rem);border-bottom:1px solid var(--line)}
.legal-hero h1{margin:0;max-width:none;font-size:calc(clamp(2.6rem,1.1rem + 4.4vw,5.8rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);overflow-wrap:break-word;hyphens:auto;font-stretch:var(--ec-head-stretch-mid)}
.legal{padding-top:clamp(2.5rem,1.6rem + 3vw,4.5rem)}
.legal__grid{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,40rem);gap:clamp(2rem,1rem + 5vw,7rem);justify-content:start}
.legal__side{min-width:0}
.legal-toc{position:sticky;top:calc(var(--header-h) + 2rem);max-height:calc(100svh - var(--header-h) - 4rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.legal-toc__h{margin:0 0 .6rem;padding-bottom:.8rem;border-bottom:1px solid var(--line-2);font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.legal-toc a,.legal-toc-m a{display:grid;grid-template-columns:2.1rem minmax(0,1fr);gap:.3rem;padding:.4rem 0;font-size:.84rem;line-height:1.4;color:var(--fg-3);transition:color var(--d-hover) ease}
.legal-toc__nr{font:var(--ec-label);letter-spacing:.1em;padding-top:.12rem}
@media (hover:hover) and (pointer:fine){.legal-toc a:hover,.legal-toc-m a:hover{color:var(--fg)}}
.legal-toc-m{display:none}
.legal__prose{max-width:40rem;font-size:1.02rem;line-height:1.75;color:var(--fg-2)}
.legal__prose h2{margin-top:2.8em;padding-top:1.5rem;border-top:1px solid var(--line);font-size:calc(clamp(1.55rem,1.2rem + 1vw,2.15rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);scroll-margin-top:calc(var(--header-h) + 1.5rem);font-stretch:var(--ec-head-stretch-long)}
.legal__prose>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__prose h3{margin-top:1.8em;font-size:1.2rem}
.legal__nr{display:block;margin-bottom:.75rem;font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3)}
.legal__prose a{color:var(--fg);text-decoration-color:var(--line-2)}
.legal__prose ul{padding-left:1.15rem}
.legal__prose li{margin-bottom:.3rem}
.legal__prose li::marker{color:var(--fg-3)}
.legal__prose .btn{text-decoration:none}
@media (max-width:960px){
  .legal__grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .legal__side:empty{display:none}
  .legal-toc{display:none}
  .legal-toc-m{display:block;border-block:1px solid var(--line-2)}
  .legal-toc-m summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:54px;cursor:pointer;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
  .legal-toc-m summary::-webkit-details-marker{display:none}
  .legal-toc-m summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:1.5px solid var(--fg-2);border-bottom:1.5px solid var(--fg-2);transform:translateY(-2px) rotate(45deg);transition:transform var(--d-ui) var(--ease-out)}
  .legal-toc-m[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .legal-toc-m__n{margin-left:auto;color:var(--fg-3);letter-spacing:.12em}
  .legal-toc-m ol{padding:0 0 1rem}
  .legal-toc-m a{min-height:40px;align-items:center;font-size:.92rem;color:var(--fg-2)}
}

/* =====================================================================
   404
   ===================================================================== */
.nf{min-height:min(100svh,980px);display:flex;align-items:center;padding-top:calc(var(--header-h) + 2rem)}
.nf__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,1rem + 4vw,6rem);align-items:end}
.nf__code{margin:0;max-width:none;display:flex;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(9rem,3rem + 23vw,25rem) * var(--ec-hs-num));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg);user-select:none}
.nf__code span:nth-child(2){color:transparent;-webkit-text-stroke:1px rgba(240,238,229,.42)}
.nf__text{padding-bottom:.4rem}
.nf__text h1{margin:0;max-width:none;font-size:calc(clamp(2.2rem,1.2rem + 2.8vw,4.2rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);font-stretch:var(--ec-head-stretch-mid)}
.nf .lead{margin-top:1.2rem}
.nf .btn-row{margin-top:1.8rem}
@media (max-width:860px){.nf__grid{grid-template-columns:minmax(0,1fr)}.nf__code{font-size:calc(clamp(8rem,2rem + 40vw,16rem) * var(--ec-hs-num))}}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .booking__steps li,:is(.booking,.contact-form) .field :is(input:not([type="checkbox"]),textarea,select),:is(.booking,.contact-form) .consent input::before,.legal-toc-m summary::after{transition:none}
}


/* ==== home.css ==== */
/* =====================================================================
   Startseite „Editorial Noir“ (Redesign 27.10.2026, Master V6 28.10.2026)
   Hero: Porträt fast vollflächig, Name riesig im unteren Bilddrittel, Kernbotschaft und CTA im ersten
   Bildschirm. Eröffnung „The Light Reveal“ (reveal.js): Dunkelheit, Licht auf dem Gesicht, die Augen werden
   sichtbar, dann steigt der Name auf. home.js setzt nur --sp (Scrollfortschritt im Hero).
   Neue Abschnitte von V6 (Video, Referenzleiste, 3D, Composition, Color Grade): parts/v6.css.
   ===================================================================== */

/* ---------- Hero: Raster ---------- */
/* Schriftgröße des Namens: „CHAMPAGNE“ ist in Mona Sans Expanded --name-w Geviert breit und muss zwischen die Ränder passen */
.eh{--name-w:7.62;--name-max:calc((100vw - 2 * var(--gutter)) / var(--name-w));--name-fs:min(var(--name-max),22.5svh);position:relative;display:grid;grid-template-rows:var(--header-h) 1fr auto;min-height:max(100svh,640px);overflow:hidden;background:var(--bg);isolation:isolate}
.eh__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.eh__backdrop{position:absolute;inset:0;background:
  radial-gradient(ellipse 30% 46% at 57% 36%,rgba(107,84,68,.5) 0%,rgba(42,41,31,.38) 40%,rgba(8,8,8,0) 74%),
  radial-gradient(ellipse 42% 38% at 4% 96%,rgba(110,108,76,.26),rgba(110,108,76,0) 72%),
  linear-gradient(180deg,#0E0E0D 0%,#080808 100%)}

/* Porträt: Gesichtsmitte (--fx, Prozent der Bildbreite) steht bei 57 % der Breite */
.eh__cam{position:absolute;left:57%;bottom:0;height:97%;aspect-ratio:var(--ar,1333/1620);transform-origin:0 34%;
  transform:translate3d(0,calc(var(--sp,0) * -3%),0) scale(calc(1 + var(--sp,0) * .12));will-change:transform}
.eh__photo{position:absolute;inset:0;display:block;transform:translateX(calc(var(--fx,50%) * -1))}
.eh__photo img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:saturate(.74) contrast(1.12) brightness(.92) sepia(.05);
  -webkit-mask-image:linear-gradient(102deg,#000 40%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.16) 92%),linear-gradient(180deg,#000 56%,rgba(0,0,0,0) 97%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(102deg,#000 40%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.16) 92%),linear-gradient(180deg,#000 56%,rgba(0,0,0,0) 97%);mask-composite:intersect}
/* normales Foto oder Video: füllt die ganze Fläche */
.eh__cam--fill{inset:0;left:0;height:auto;aspect-ratio:auto;transform-origin:50% 35%}
.eh__cam--fill .eh__photo{transform:none}
.eh__cam--fill .eh__photo img,.eh__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 30%;-webkit-mask-image:none;mask-image:none}
.eh__video{filter:saturate(.8) contrast(1.06) brightness(.82)}

/* Bild und Analyse-Ebene in einer Linse: die Kamerafahrt bewegt beide gleich */
.eh__lens{position:absolute;inset:0;transform-origin:50% 38%}
.eh__lens picture{position:absolute;inset:0;display:block}
.eh__cam--over{pointer-events:none}
/* Attrappe, solange kein Porträt eingetragen ist (gleicher Platz und Ausschnitt wie ein späteres Foto) */
.eh__ph-label{position:absolute;left:50%;top:47%;transform:translateX(-50%);font:var(--ec-label);font-size:clamp(.56rem,.5rem + .25vw,.72rem);letter-spacing:.26em;text-transform:uppercase;color:rgba(240,238,229,.66);white-space:nowrap}

/* THE LIGHT REVEAL (V6): zwei Lichtfassungen desselben Porträts. .eh__dark (Augen im Schatten) liegt unten,
   .eh__lit (Gesicht ausgeleuchtet) darüber. Während der Eröffnung öffnet reveal.js die helle Fassung mit einer
   weichen Lichtmaske ab der Augenpartie (--ex, --ey); .eh__light ist ein warmer, weicher Lichtakzent.
   Endzustand ohne Maske: das ausgeleuchtete Porträt. Kein Blitz, kein Scanner. */
.eh__dark,.eh__lit{position:absolute;inset:0;display:block}
.eh__lit{--lr:220%;-webkit-mask-image:radial-gradient(ellipse calc(var(--lr) * .8) var(--lr) at var(--ex,50%) var(--ey,30%),#000 34%,rgba(0,0,0,0) 72%);
  mask-image:radial-gradient(ellipse calc(var(--lr) * .8) var(--lr) at var(--ex,50%) var(--ey,30%),#000 34%,rgba(0,0,0,0) 72%)}
html:not(.reveal) .eh__lit{-webkit-mask-image:none;mask-image:none}
.eh__shot,.eh__shot img{position:absolute;inset:0;width:100%;height:100%;display:block}
.eh__shot img{object-fit:contain;object-position:50% 100%}
img.eh__shot{object-fit:contain;object-position:50% 100%}
/* Dunkle Fassung aus der hellen ableiten, solange es keine eigene Aufnahme gibt */
.eh__shot--derived img{filter:brightness(.34) contrast(1.18) saturate(.55)!important}
.eh__eyeshade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 22% 9% at var(--ex,50%) var(--ey,30%),rgba(5,5,5,.92) 0%,rgba(5,5,5,.6) 55%,rgba(5,5,5,0) 100%),
             linear-gradient(180deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,.35) calc(var(--ey,30%) + 6%),rgba(5,5,5,0) calc(var(--ey,30%) + 16%))}
.eh__light{position:absolute;left:calc(var(--ex,50%) - 34%);top:calc(var(--ey,30%) - 26%);width:68%;height:62%;pointer-events:none;opacity:.28;mix-blend-mode:screen;
  background:radial-gradient(ellipse 50% 50% at 46% 44%,rgba(240,238,229,.34) 0%,rgba(240,238,229,.12) 46%,rgba(240,238,229,0) 72%)}
.eh__dim{position:absolute;inset:0;background:#080808;opacity:0;pointer-events:none}

/* Name aus einzelnen Buchstaben (jeder steigt durch seinen eigenen Ausschnitt) */
.eh__ch{display:inline-block}

/* Licht und Schatten: unten dunkel für den Namen, links für den Text, rechts fällt das Gesicht ins Dunkel */
.eh__shade{position:absolute;inset:0;background:
  linear-gradient(0deg,rgba(8,8,8,.97) 0%,rgba(8,8,8,.7) 17%,rgba(8,8,8,0) 44%),
  linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.6) 22%,rgba(8,8,8,0) 44%),
  linear-gradient(270deg,rgba(8,8,8,.8) 0%,rgba(8,8,8,0) 26%),
  linear-gradient(180deg,rgba(8,8,8,.72) 0%,rgba(8,8,8,0) 17%);
  opacity:calc(1 + var(--sp,0) * .5)}
.eh__grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Sucher: zwei Ecken und REC-Timecode unter dem Header */
.eh__hud{position:absolute;left:calc(var(--gutter) - 1.1rem);right:calc(var(--gutter) - 1.1rem);top:calc(var(--header-h) + .8rem);height:0;z-index:2;pointer-events:none}
.eh__corner{position:absolute;top:0;width:16px;height:16px;border:0 solid rgba(240,238,229,.4)}
.eh__corner--l{left:0;border-left-width:1px;border-top-width:1px}
.eh__corner--r{right:0;border-right-width:1px;border-top-width:1px}
.eh__rec{position:absolute;right:1.8rem;top:-.15rem;display:flex;align-items:center;gap:.55rem;font:var(--ec-label);letter-spacing:.16em;color:var(--fg-2);font-variant-numeric:tabular-nums}
.eh__rec i{width:7px;height:7px;border-radius:50%;background:var(--ec-accent);animation:rec 1.6s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.25}}

/* Text oben: Positionierung links, Fallstudie rechts */
.eh__top{grid-row:2;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,29.5rem) 1fr minmax(0,16rem);gap:2rem;align-items:center;
  padding-block:clamp(1.6rem,5svh,3.5rem) clamp(1rem,3svh,2rem);opacity:calc(1 - var(--sp,0) * 1.7)}
.eh__copy .eh__eyebrow{display:flex;margin-bottom:1.1rem;font-family:var(--ec-font-label);font-stretch:normal;line-height:1.4}
.eh__copy h1{margin:0;max-width:none;font-size:calc(clamp(2.2rem,1.1rem + 2.1vw,3.7rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);font-stretch:var(--ec-head-stretch-mid);color:var(--fg)}
.eh__h{display:block}
.eh__text{margin:1.1rem 0 0;max-width:40ch;font-size:clamp(.98rem,.9rem + .25vw,1.12rem);line-height:1.55;color:var(--fg-2)}
.eh__copy .btn-row{margin-top:1.9rem;gap:.9rem 1.3rem}
.eh__link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--fg);position:relative}
.eh__link::after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;background:var(--line-2);transition:background-color var(--d-hover) ease}
@media (hover:hover) and (pointer:fine){.eh__link:hover::after{background:var(--fg)}}

.eh__proof{grid-column:3;justify-self:end;align-self:end;display:flex;flex-direction:column;gap:.4rem;max-width:16rem;padding-top:1rem;border-top:1px solid var(--line-2);color:inherit}
.eh__proof-k{font:var(--ec-label);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:.6rem}
.eh__proof-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-accent)}
.eh__proof-v{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(2.6rem,1.5rem + 2.3vw,4.1rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg);letter-spacing:var(--ec-head-tracking)}
.eh__proof-l{font-size:.86rem;line-height:1.45;color:var(--fg-2)}
.eh__proof-a{display:inline-flex;align-items:center;gap:.5rem;margin-top:.35rem;font-size:.86rem;font-weight:500;color:var(--fg)}
.eh__proof-a .arrow{transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.eh__proof:hover .arrow{transform:translateX(4px)}}

/* Der Name: zwei Zeilen, links und rechts gesetzt, das Gesicht bleibt frei */
.eh__name{grid-row:3;position:relative;z-index:1;margin:0;max-width:none;padding:0 var(--gutter) clamp(.5rem,1.6svh,1.4rem);
  display:flex;flex-direction:column;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-name-weight,600);text-transform:uppercase;
  font-size:var(--name-fs);line-height:.9;letter-spacing:var(--ec-head-tracking);color:var(--fg);pointer-events:none;user-select:none;
  transform:translate3d(0,calc(var(--sp,0) * 22%),0)}
.eh__line{position:relative;display:block;overflow:hidden;padding-top:.06em;margin-top:-.06em}
.eh__line>span{display:block;white-space:nowrap}
.eh__line--1{align-self:flex-start}
.eh__line--2{align-self:flex-end}

/* Video-Knopf (nur mit Video) */
.eh__vbtn{position:absolute;right:var(--gutter);top:calc(var(--header-h) + 2.6rem);z-index:3;display:inline-flex;align-items:center;gap:.55rem;min-height:40px;padding:.4rem .85rem;border:1px solid var(--line-2);border-radius:2px;background:rgba(8,8,8,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.eh__vbtn-i{width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.eh__vbtn.is-paused .eh__vbtn-i{border:0;border-left:10px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;width:0;height:0}

@media (prefers-reduced-motion:reduce){
  .eh__rec i{display:none}
  .eh__cam,.eh__name,.eh__top{transform:none;opacity:1}
}

/* ---------- Hero: niedrige Fenster ---------- */
@media (min-width:901px) and (max-height:820px){
  .eh{--name-fs:min(var(--name-max),21svh)}
  .eh__copy h1{font-size:calc(clamp(2rem,1rem + 1.8vw,3.1rem) * var(--ec-hs-mid))}
  .eh__text{margin-top:.8rem}
  .eh__copy .btn-row{margin-top:1.3rem}
}


/* ---------- Hero: Tablet hoch und Handy ---------- */
@media (max-width:900px){
  .eh{--name-fs:var(--name-max);grid-template-rows:var(--header-h) minmax(34svh,1fr) auto auto;min-height:100svh}
  .eh__cam{left:50%;bottom:auto;top:calc(var(--header-h) - 1svh);height:min(76svh,150vw);transform-origin:0 30%}
  .eh__cam--fill{top:0;height:auto}
  .eh__backdrop{background:radial-gradient(ellipse 60% 34% at 50% 26%,rgba(107,84,68,.5) 0%,rgba(42,41,31,.35) 45%,rgba(8,8,8,0) 76%),linear-gradient(180deg,#0E0E0D,#080808)}
  .eh__shade{background:linear-gradient(0deg,#080808 0%,#080808 30%,rgba(8,8,8,.7) 44%,rgba(8,8,8,0) 62%),linear-gradient(180deg,rgba(8,8,8,.7) 0%,rgba(8,8,8,0) 16%)}
  .eh__hud{display:none}
  .eh__ph-label{top:22%}
  .eh__name{grid-row:3;padding-bottom:0;margin-top:-.1em}
  .eh__line--2{align-self:flex-start}
  .eh__top{grid-row:4;grid-template-columns:1fr;gap:1.2rem;padding-block:1.1rem calc(1.4rem + env(safe-area-inset-bottom,0px))}
  .eh__copy .eh__eyebrow{margin-bottom:.6rem}
  .eh__copy h1{font-size:calc(clamp(1.85rem,1.2rem + 3vw,2.6rem) * var(--ec-hs-mid))}
  .eh__text{margin-top:.6rem;font-size:.95rem}
  .eh__copy .btn-row{margin-top:1.15rem}
  .eh__proof{grid-column:1;justify-self:stretch;align-self:auto;max-width:none;display:grid;grid-template-columns:auto 1fr;gap:.15rem 1rem;align-items:center;padding-top:.9rem}
  .eh__proof-k{display:none}
  .eh__proof-v{grid-row:1/span 2;font-size:calc(2.3rem * var(--ec-hs))}
  .eh__proof-l{font-size:.8rem}
  .eh__proof-a{margin:0;font-size:.8rem}
  .eh__vbtn{top:auto;bottom:auto;right:var(--gutter);top:calc(var(--header-h) + .8rem)}
}
/* niedrige Handys: Porträt kleiner, damit Gesicht und Name sich nicht überlagern */
@media (max-width:900px) and (max-height:760px){.eh__cam{top:calc(var(--header-h) - 2svh);height:min(64svh,150vw)}}
/* sehr niedrige Handys (z. B. 375 x 667): der CTA muss im ersten Bildschirm ganz sichtbar sein */
@media (max-width:900px) and (max-height:700px){
  .eh__cam{height:min(58svh,140vw)}
  .eh__copy .eh__eyebrow{margin-bottom:.35rem}
  .eh__copy h1{font-size:calc(1.6rem * var(--ec-hs-mid))}
  .eh__text{margin-top:.4rem;font-size:.86rem;line-height:1.45}
  .eh__copy .btn-row{margin-top:.8rem}
  .eh__top{padding-top:.7rem}
}
@media (max-width:560px){.eh__copy .btn-row .btn{flex:1 1 100%}.eh__link{display:none}}

/* ---------- Fallstudie ---------- */
.cs{border-top:1px solid var(--line)}
.cs__top{margin-bottom:clamp(2.5rem,1.5rem + 4vw,5.5rem)}
.cs__when{display:inline-flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.cs__when::before{content:"·"}
.cs__number{margin:0;max-width:none;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(5.2rem,1rem + 19.5vw,23rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg);white-space:nowrap;font-variant-numeric:lining-nums proportional-nums}
.cs__mask{display:block;overflow:hidden;padding-top:.06em;margin-top:-.06em}
.cs__mask>span{display:block}
.js .cs__number[data-reveal]:not(.is-in) .cs__mask>span{transform:translateY(104%)}
.js .cs__number.is-in .cs__mask>span{transition:transform 1.3s var(--ease-film)}
.cs__label{margin:1.3rem 0 0;max-width:30ch;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.45rem,1rem + 1.5vw,2.4rem);line-height:1.15;color:var(--fg)}
.cs__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,1rem + 4vw,6rem);align-items:end}
.cs__grid--intro h2{margin:0;font-size:clamp(2.1rem,1.2rem + 2.7vw,4rem)}
.cs__grid--intro .lead{margin:0;max-width:52ch}
@media (max-width:980px){.cs__grid{grid-template-columns:1fr}}

/* ---------- Referenzen als redaktionelle Zeilen ---------- */
.refs__head{max-width:900px;margin-bottom:clamp(2rem,1.4rem + 3vw,4.2rem)}
.refs__list{border-top:1px solid var(--line-2)}
.ref-row{border-bottom:1px solid var(--line)}
.ref-row__link{position:relative;display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,clamp(260px,33vw,480px));grid-template-rows:1fr auto;gap:.6rem clamp(1rem,.5rem + 2.4vw,3.5rem);padding:clamp(1.6rem,1rem + 1.8vw,2.8rem) 0;color:inherit}
.ref-row__nr{grid-row:1/span 2;padding-top:.7rem;font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3)}
.ref-row__main{display:flex;flex-direction:column;gap:.55rem;align-self:center}
.ref-row__kicker{font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.ref-row__title{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2.4rem,1.1rem + 4.4vw,5.8rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg);text-wrap:balance;transition:transform .6s var(--ease-out)}
.ref-row__sub{max-width:46ch;color:var(--fg-2)}
.ref-row__facts{font:var(--ec-label);letter-spacing:.1em;color:var(--fg-3)}
.ref-row__media{grid-column:3;grid-row:1/span 2;position:relative;align-self:center;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)}
.ref-row__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) brightness(.72) contrast(1.06);transition:filter .7s ease,transform 1.1s var(--ease-out)}
.ref-row__play{position:absolute;left:1rem;bottom:1rem;width:48px;height:48px;border-radius:50%;border:1px solid rgba(240,238,229,.55);background:rgba(8,8,8,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--fg);transition:background-color var(--d-hover) ease,border-color var(--d-hover) ease,transform var(--d-ui) var(--ease-out)}
.ref-row__play .play-icon{width:14px;margin-left:3px}
.ref-row__dur{position:absolute;right:.8rem;bottom:.9rem;font:var(--ec-label);letter-spacing:.08em;color:var(--fg);background:rgba(8,8,8,.7);padding:.2rem .45rem}
.ref-row__go{grid-column:2;grid-row:2;display:inline-flex;align-items:center;gap:.55rem;font-weight:500;color:var(--fg);font-size:.95rem}
.ref-row__go .arrow{transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ref-row__link:hover .ref-row__media img{filter:none;transform:scale(1.04)}
  .ref-row__link:hover .ref-row__title{transform:translateX(10px)}
  .ref-row__link:hover .ref-row__play{background:var(--ec-olive-500);border-color:var(--ec-olive-500);transform:scale(1.06)}
  .ref-row__link:hover .ref-row__go .arrow{transform:translateX(4px)}
}
.ref-row__link:active .ref-row__media{transform:scale(.99)}
@media (hover:none){.ref-row__media img{filter:grayscale(.3) brightness(.85)}}
@media (max-width:900px){
  .ref-row__link{grid-template-columns:1fr;grid-template-rows:none}
  .ref-row__nr{grid-row:auto;padding:0}
  .ref-row__media{grid-column:1;grid-row:auto;margin-top:.6rem}
  .ref-row__go{grid-column:1;grid-row:auto}
}

/* ---------- System: Schnitt-Timeline ---------- */
.sys{background:var(--bg-2);border-block:1px solid var(--line)}
.sys__head{max-width:940px;margin-bottom:clamp(2rem,1.4rem + 3vw,4rem)}
.nle{border:1px solid var(--line-2);border-radius:4px;background:#0A0A09;overflow:hidden;font:var(--ec-label);box-shadow:var(--shadow)}
.nle__bar{display:flex;align-items:center;gap:1rem;padding:.65rem 1rem;border-bottom:1px solid var(--line);letter-spacing:.08em;color:var(--fg-3)}
.nle__dots{display:flex;gap:6px}
.nle__dots i{width:9px;height:9px;border-radius:50%;background:var(--chip-hover)}
.nle__file{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nle__tc{color:var(--fg);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.nle__body{display:grid;grid-template-columns:2.8rem 1fr}
.nle__labels{display:grid;grid-template-rows:28px repeat(3,54px);border-right:1px solid var(--line)}
.nle__labels span{display:grid;place-items:center;color:var(--fg-3);border-bottom:1px solid var(--line)}
.nle__labels span:last-child,.nle__lane:last-of-type{border-bottom:0}
.nle__area{position:relative;display:grid;grid-template-rows:28px repeat(3,54px);overflow:hidden}
.nle__ruler{position:relative;border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,rgba(240,238,229,.22) 0 1px,transparent 1px 2.5%) 0 100%/100% 7px no-repeat}
.nle__ruler span{position:absolute;top:5px;padding-left:5px;font-size:.6rem;color:var(--fg-3)}
.nle__lane{position:relative;border-bottom:1px solid var(--line)}
.nle__clip{position:absolute;top:8px;bottom:8px;display:flex;align-items:center;padding:0 .6rem;border-radius:3px;border:1px solid rgba(240,238,229,.12);background:#2A291F;color:var(--fg);font-size:.68rem;letter-spacing:.06em;white-space:nowrap;overflow:hidden;opacity:.4;transition:opacity .5s ease,background-color .5s ease}
.nle__clip b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.nle__clip--1{background:#373629}
.nle__clip--2{background:#2E2D23}
.nle__clip--3{background:#28271F}
.nle__clip--4{background:var(--ec-olive-500);border-color:rgba(240,238,229,.2)}
.nle__clip--s{top:11px;bottom:11px;background:#1F1E19;color:var(--fg-2);font-size:.6rem}
.nle__clip.is-on{opacity:1}
.nle__lane--a svg{position:absolute;inset:9px 0;width:100%;height:calc(100% - 18px);color:rgba(240,238,229,.34)}
.nle__headtrack{position:absolute;inset:0;pointer-events:none;transform:translateX(calc(var(--ph,0) * 100%))}
.nle__head{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--ec-accent);box-shadow:0 0 12px rgba(173,169,134,.6)}
.nle__head i{position:absolute;top:0;left:-6px;width:13px;height:15px;background:var(--ec-accent);clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
.sys__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,.5rem + 2vw,2.6rem);margin-top:clamp(2rem,1.2rem + 2.4vw,3.4rem)}
.sys__step{padding-top:1.1rem;border-top:1px solid var(--line-2);transition:opacity .6s ease}
.js .sys__step{opacity:.36}
.js .sys__step.is-on{opacity:1}
.sys__tc{font:var(--ec-label);letter-spacing:.14em;color:var(--fg-3);transition:color .4s ease}
.sys__step.is-on .sys__tc{color:var(--ec-accent)}
.sys__step h3{margin:.75rem 0 .55rem;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.4rem,1.1rem + .9vw,2rem) * var(--ec-hs));line-height:var(--ec-head-leading)}
.sys__step p{margin:0;font-size:.95rem}
@media (max-width:900px){.sys__steps{grid-template-columns:1fr 1fr;gap:1.6rem}}
@media (max-width:560px){
  .sys__steps{grid-template-columns:1fr}
  .nle__labels,.nle__area{grid-template-rows:24px repeat(3,44px)}
  .nle__clip--s b{display:none}
  .nle__clip{padding:0 .4rem;font-size:.58rem}
}

/* ---------- Gründerstory ---------- */
.story__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,.58fr);gap:clamp(1.5rem,1rem + 2.6vw,4.5rem);align-items:start}
.story__fig{position:relative;margin:0;overflow:hidden;background:var(--bg-3)}
.story__fig img{width:100%;height:100%;object-fit:cover}
.story__fig--a{aspect-ratio:4/5}
.story__fig--a img{filter:saturate(.8) contrast(1.05)}
.story__fig--b{aspect-ratio:2/3;margin-top:clamp(5rem,3rem + 12vw,18rem)}
.story__fig--b img{filter:grayscale(1) contrast(1.1) brightness(.88)}
.story__fig figcaption{position:absolute;left:1rem;bottom:.9rem}
.story__fig figcaption .ts{color:var(--fg);text-shadow:0 1px 8px rgba(0,0,0,.7);text-transform:uppercase;letter-spacing:.18em}
.story__text{padding-top:clamp(.5rem,.2rem + 2.4vw,3.5rem)}
.story__text h2{font-size:clamp(2.2rem,1.2rem + 3vw,4.4rem)}
.story__text p{max-width:46ch}
.story__quote{margin:2rem 0 1.4rem;padding-left:1.3rem;border-left:1px solid var(--ec-accent)}
.story__quote p{margin:0;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.28;color:var(--fg)}
.miles{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.6rem;margin-top:clamp(3.5rem,2rem + 5vw,7rem);border-top:1px solid var(--line-2)}
.miles__item{position:relative;padding-top:1.4rem}
.miles__item::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--fg-3)}
.miles__item:last-child::before{background:var(--ec-accent);box-shadow:0 0 0 5px var(--ec-olive-soft)}
.miles__when{font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.miles__item strong{display:block;margin:.55rem 0 .4rem;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(1.3rem * var(--ec-hs));line-height:1;color:var(--fg)}
.miles__item p{margin:0;font-size:.88rem;line-height:1.5;color:var(--fg-3)}
@media (max-width:1100px){
  .story__grid{grid-template-columns:1fr 1fr}
  .story__text{grid-column:1/-1;grid-row:1}
  .story__fig--b{margin-top:clamp(3rem,2rem + 8vw,8rem)}
  .miles{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.4rem}
}
@media (max-width:560px){.story__grid{gap:.9rem}.miles{grid-template-columns:1fr 1fr;gap:2rem 1.2rem}}

/* ---------- Leistungen als Liste ---------- */
.svc__head{max-width:920px;margin-bottom:clamp(2rem,1.4rem + 3vw,4rem)}
.svc__list{border-top:1px solid var(--line-2)}
.svc__list>li{border-bottom:1px solid var(--line)}
.svc-row{position:relative;isolation:isolate;display:grid;grid-template-columns:4rem minmax(0,1.35fr) minmax(0,1fr) 11rem 3rem;gap:clamp(1rem,.5rem + 2vw,2.6rem);align-items:center;padding:clamp(1.6rem,1rem + 1.8vw,2.9rem) 0;color:inherit}
.svc-row::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;background:var(--bg-2);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease-film)}
.svc-row__nr{font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3)}
.svc-row__title{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.9rem,1rem + 2.9vw,4.1rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg);text-wrap:balance;transition:transform .6s var(--ease-out)}
.svc-row__claim{max-width:36ch;font-size:.98rem;color:var(--fg-2)}
.svc-row__role{display:flex;align-items:center;gap:.55rem;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.svc-row--main .svc-row__role{color:var(--fg)}
.svc-row--main .svc-row__role::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-accent);flex:none}
.svc-row__go{justify-self:end;width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--fg);transition:background-color var(--d-hover) ease,border-color var(--d-hover) ease}
@media (hover:hover) and (pointer:fine){
  .svc-row:hover::before{transform:scaleY(1)}
  .svc-row:hover .svc-row__title{transform:translateX(12px)}
  .svc-row:hover .svc-row__go{background:var(--ec-olive-500);border-color:var(--ec-olive-500)}
}
.svc-row:active{transform:scale(.995)}
@media (max-width:1000px){
  .svc-row{grid-template-columns:3rem minmax(0,1fr) 46px;row-gap:.7rem}
  .svc-row__title{grid-column:2}
  .svc-row__go{grid-column:3;grid-row:1}
  .svc-row__claim,.svc-row__role{grid-column:2/-1}
  .svc-row__nr{grid-row:1;align-self:start;padding-top:.5rem}
}

/* ---------- Blog-Teaser ---------- */
.journal{border-top:1px solid var(--line)}
.journal__head{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(2rem,1.4rem + 3vw,4rem)}
.journal__head h2{margin:0}
.journal .latest{margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}
.journal__cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.journal__cats li+li .jr-cat{border-left:1px solid var(--line)}
.jr-cat{position:relative;display:flex;flex-direction:column;gap:1.6rem;min-height:12.5rem;height:100%;padding:1.3rem 1.3rem 1.5rem;color:inherit;isolation:isolate}
.journal__cats li:first-child .jr-cat{padding-left:0}
.jr-cat::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg-2);opacity:0;transition:opacity var(--d-ui) ease}
.jr-cat__name{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.6rem,1.1rem + 1.4vw,2.5rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg)}
.jr-cat .arrow{margin-top:auto;color:var(--fg);transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.jr-cat:hover::before{opacity:1}.jr-cat:hover .arrow{transform:translateX(5px)}}
@media (max-width:900px){
  .journal__cats{grid-template-columns:1fr 1fr}
  .journal__cats li:nth-child(3) .jr-cat{border-left:0;padding-left:0}
  .journal__cats li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:480px){.jr-cat{min-height:9.5rem}}


/* =====================================================================
   HIDDEN IDENTITY REVEAL (V6, Verhalten: assets/js/identity.js)
   .eh__qs liegt deckungsgleich unter den Buchstaben und trägt die drei fest positionierten Fragen. Eine unsichtbare
   Kreismaske an der Cursorposition (--mx, --my, --r) macht die weißen Buchstaben darin durchsichtig (.eh__front)
   und zeigt nur das Fragment der Frage dahinter (.eh__qs). Kein Kreis, keine Fläche, kein Rand, kein Tooltip.
   ===================================================================== */
.eh__front{display:flex;flex-direction:column;--r:0px;--mx:-999px;--my:-999px}
.eh__name.is-mask .eh__front{-webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),rgba(0,0,0,0) calc(var(--r) - 1.5px),#000 var(--r));
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),rgba(0,0,0,0) calc(var(--r) - 1.5px),#000 var(--r))}
.eh__qs{position:absolute;inset:0;display:flex;flex-direction:column;padding:inherit;pointer-events:none;visibility:hidden;--r:0px;--mx:-999px;--my:-999px;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 calc(var(--r) - 1.5px),rgba(0,0,0,0) var(--r));
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 calc(var(--r) - 1.5px),rgba(0,0,0,0) var(--r))}
.eh__name.is-mask .eh__qs{visibility:visible}
.eh__qs .eh__word{visibility:hidden}
.eh__q{position:absolute;top:50%;transform:translateY(-46%);white-space:nowrap;font-size:.3em;line-height:.9;font-weight:800;letter-spacing:.01em;color:#ADA986}
.eh__q--1{left:4%}
.eh__q--2{left:3%}
.eh__q--3{right:3%}
.eh__zone{position:absolute;top:0;bottom:0;z-index:2;pointer-events:auto;-webkit-tap-highlight-color:transparent;cursor:default}
.eh__zone--full{left:0;right:0}
.eh__zone--l{left:0;width:50%}
.eh__zone--r{right:0;width:50%}
.eh__zone:focus-visible{outline:1px solid rgba(173,169,134,.6);outline-offset:-1px}
@media (max-width:900px){.eh__q{font-size:.31em}}

/* Drei Fragen als Auftakt der Gründerstory */
.idq{margin-bottom:clamp(4rem,2.5rem + 5vw,8rem)}
.idq__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
.idq__item{position:relative;padding:1.6rem 1.6rem 1.9rem 0;border-right:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 2rem);outline:none}
.idq__item+.idq__item{padding-left:1.6rem}
.idq__item:last-child{border-right:0}
.idq__item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#BEBB9B;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-film)}
.idq__item:target::before,.idq__item.is-hit::before{transform:scaleX(1)}
.idq__nr{font:var(--ec-label);letter-spacing:.18em;color:#BEBB9B}
.idq__q{margin:.9rem 0 .45rem;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2rem,1.2rem + 2.6vw,3.6rem) * var(--ec-hs));line-height:var(--ec-head-leading)}
.idq__s{margin:0 0 1.1rem;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.15rem,1rem + .5vw,1.45rem);color:var(--fg)}
.idq__a{margin:0;font-size:.95rem;color:var(--fg-2)}
@media (max-width:900px){
  .idq__list{grid-template-columns:1fr}
  .idq__item,.idq__item+.idq__item{padding:1.4rem 0 1.6rem;border-right:0;border-bottom:1px solid var(--line)}
}



/* ==== leistungen.css ==== */
/* ==========================================================================
   Leistungen (/leistungen/ und die drei Leistungsseiten), „Editorial Noir“
   Präfix lp-. Redaktionelle Zeilen und dünne Linien statt Karten, Timecodes und
   Fortschrittslinien als leise Videodetails. Gewichtung über Größe und Raum:
   Personal Branding ist der Kern, YouTube die zentrale Content-Kompetenz,
   Kurse und Funnels ergänzen. Nur transform/opacity/clip-path animiert, Hover
   nur mit Maus, eigener Block für prefers-reduced-motion am Ende.
   ========================================================================== */

/* ----- Hero: riesige Zeile, darunter Linie, Text und Index (Leistungsseiten) bzw. Porträt (Übersicht) ----- */
.lp-hero .crumbs{margin-bottom:clamp(1.6rem,1rem + 2.4vw,3rem)}
.lp-hero .eyebrow{max-width:none}
.lp-hero h1{max-width:23ch;margin:0;font-size:clamp(2.9rem,1.1rem + 6.4vw,8.2rem);line-height:.88}
.lp-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);column-gap:clamp(2rem,1rem + 5vw,7.5rem);
  grid-template-areas:"title title" "rule rule" "foot side"}
.lp-hero__grid::before{content:"";grid-area:rule;height:1px;margin-top:clamp(2.2rem,1.4rem + 3vw,4.4rem);background:var(--line-2);transform-origin:0 50%;animation:lp-rule 1.4s var(--ease-film) .2s both}
@keyframes lp-rule{from{transform:scaleX(0)}to{transform:none}}
.lp-hero__title{grid-area:title;min-width:0}
.lp-hero__foot{grid-area:foot;padding-top:clamp(1.6rem,1.2rem + 1.4vw,2.6rem)}
.lp-hero .lp-hero__foot .lead{margin-top:0}
.lp-hero .lp-hero__foot .btn-row{margin-top:clamp(1.5rem,1.2rem + 1vw,2.2rem)}

/* Übersicht: Porträt rechts neben der Zeile, Text und Knöpfe in einer Reihe darunter */
.lp-hero--overview .lp-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,21rem);grid-template-areas:"title fig" "rule rule" "foot foot";align-items:end}
.lp-hero--overview h1{max-width:15ch;font-size:clamp(2.9rem,1.1rem + 5.4vw,6.7rem)}
.lp-hero--overview .lp-hero__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem 3rem}
.lp-hero--overview .lp-hero__foot .lead{max-width:52ch}
.lp-hero--overview .lp-hero__foot .btn-row{margin-top:0}

.lp-hero__fig{grid-area:fig;position:relative;margin:0;min-width:0}
.lp-hero__img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-3)}
.lp-hero__img img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;filter:saturate(.76) contrast(1.06) brightness(.92)}
.lp-hero__img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,8,.42) 0%,rgba(8,8,8,0) 20%,rgba(8,8,8,0) 72%,rgba(8,8,8,.45) 100%)}
/* Sucherecken als Hintergrund-Verläufe, ohne zusätzliches Markup */
.lp-hero__img::before{--c:rgba(240,238,229,.5);content:"";position:absolute;inset:10px;z-index:1;pointer-events:none;background:
  linear-gradient(var(--c),var(--c)) 0 0/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px 14px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 0/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1px 14px no-repeat,
  linear-gradient(var(--c),var(--c)) 0 100%/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1px 14px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 100%/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1px 14px no-repeat}
.lp-hero__rec{position:absolute;left:1.6rem;top:1.15rem;z-index:2;display:flex;align-items:center;gap:.55rem;font:var(--ec-label);letter-spacing:.16em;color:var(--fg)}
.lp-hero__rec i{width:7px;height:7px;border-radius:50%;background:var(--ec-accent);animation:rec 1.6s ease-in-out infinite}
.lp-hero__bar{position:absolute;left:0;right:0;bottom:0;z-index:2;height:1px;background:rgba(240,238,229,.2)}
.lp-hero__bar i{display:block;height:100%;background:var(--fg);transform:scaleX(0);transform-origin:left}
.lp-hero__fig.is-in .lp-hero__bar i{transform:scaleX(1);transition:transform 14s linear}
.lp-hero__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;margin-top:.85rem;font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.lp-hero__cap span:first-child{color:var(--fg-2)}

/* Index der drei Leistungen (ersetzt die frühere Kapitel-Box) */
.lp-index{grid-area:side;min-width:0;padding-top:clamp(1.6rem,1.2rem + 1.4vw,2.6rem)}
.lp-index__head{display:flex;justify-content:space-between;gap:1rem;max-width:none;margin:0 0 .75rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.lp-index ol{border-top:1px solid var(--line-2)}
.lp-index li{border-bottom:1px solid var(--line)}
.lp-index__link{position:relative;display:grid;grid-template-columns:4.2rem minmax(0,1fr);grid-template-areas:"tc name" "tc fn";gap:.35rem .5rem;padding:1rem 0 1.05rem;color:var(--fg-3);transition:color var(--d-hover) ease}
.lp-index__tc{grid-area:tc;display:flex;align-items:center;gap:.45rem;align-self:start;padding-top:.3rem;font:var(--ec-label);letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--fg-3)}
.lp-index__name{grid-area:name;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.45rem,1.2rem + .7vw,1.9rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:inherit;transition:transform .5s var(--ease-out)}
.lp-index__fn{grid-area:fn;font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.lp-index__bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden}
.lp-index__bar i{display:block;height:100%;background:var(--fg);transform:scaleX(0);transform-origin:left}
.lp-index a[aria-current="page"]{color:var(--fg)}
.lp-index a[aria-current="page"] .lp-index__tc{color:var(--fg)}
.lp-index a[aria-current="page"] .lp-index__tc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ec-accent);flex:none}
.lp-index.is-in a[aria-current="page"] .lp-index__bar i{transform:scaleX(1);transition:transform 1.8s var(--ease-out) .5s}
.lp-index__all{margin-top:.5rem;font-size:.92rem}
.lp-index__link:active .lp-index__name{transform:translateX(4px)}
@media (hover:hover) and (pointer:fine){
  .lp-index__link:hover{color:var(--fg)}
  .lp-index__link:hover .lp-index__name{transform:translateX(8px)}
}

@media (max-width:900px){
  .lp-hero__grid,.lp-hero--overview .lp-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "rule" "foot" "side"}
  .lp-hero--overview .lp-hero__grid{grid-template-areas:"title" "rule" "foot" "fig"}
  .lp-hero__fig{width:100%;max-width:26rem;margin-top:clamp(2.4rem,1.6rem + 3vw,3.5rem)}
  .lp-index{margin-top:clamp(1.6rem,1rem + 2vw,2.4rem)}
  .lp-hero--overview .lp-hero__foot{display:block}
  .lp-hero--overview .lp-hero__foot .btn-row{margin-top:clamp(1.5rem,1.2rem + 1vw,2.2rem)}
}
@media (max-width:560px){.lp-hero h1,.lp-hero--overview h1{max-width:none}}

/* ----- Gewichtungslinie (Segmentbreite = Anteil) ----- */
.lp-scale{display:flex;gap:6px;margin:0 0 clamp(1.6rem,1rem + 2vw,3rem)}
.lp-scale__seg{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.3rem;padding-top:1.05rem}
.lp-scale__seg::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2)}
.lp-scale__seg::after{content:"";position:absolute;left:0;top:-4px;width:1px;height:9px;background:var(--fg-3)}
.lp-scale__seg:first-child::after{background:var(--ec-accent)}
.lp-scale__seg>i{position:absolute;left:0;right:0;top:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left}
.lp-scale.is-in .lp-scale__seg>i{transform:scaleX(1);transition:transform 1.1s linear}
.lp-scale.is-in .lp-scale__seg:nth-child(2)>i{transition-delay:1.1s;transition-duration:.6s}
.lp-scale.is-in .lp-scale__seg:nth-child(3)>i{transition-delay:1.7s;transition-duration:.4s}
.lp-scale__tc{font:var(--ec-label);letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--fg-2)}
.lp-scale__name{font:var(--ec-label);line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
@media (max-width:760px){.lp-scale__name{display:none}}

/* ----- Drei Bausteine als redaktionelle Zeilen ----- */
.lp-svc{border-top:1px solid var(--line-2)}
.lp-svc__row{display:grid;grid-template-columns:8rem minmax(0,1.3fr) minmax(0,1fr);gap:1.4rem clamp(1.5rem,1rem + 2.6vw,4.5rem);align-items:start;padding:clamp(2rem,1.3rem + 2.4vw,3.8rem) 0;border-bottom:1px solid var(--line)}
.lp-svc__row--1{padding-block:clamp(2.4rem,1.4rem + 3.4vw,5.2rem)}
.lp-svc__meta{display:flex;flex-direction:column;gap:.5rem;margin:0;padding-top:.45rem;font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.lp-svc__tc{letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--fg)}
.lp-svc__fn{display:flex;align-items:center;gap:.5rem}
.lp-svc__row--1 .lp-svc__fn{color:var(--fg)}
.lp-svc__row--1 .lp-svc__fn::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-accent);flex:none}
.lp-svc__title{margin:0;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);overflow-wrap:break-word;font-size:calc(clamp(1.8rem,1rem + 2.2vw,3.3rem) * var(--ec-hs))}
.lp-svc__row--1 .lp-svc__title{font-size:clamp(2.6rem,1.1rem + 4.7vw,6.6rem)}
.lp-svc__row--2 .lp-svc__title{font-size:clamp(2.15rem,1.05rem + 3.2vw,4.6rem)}
.lp-svc__title a{display:inline-block;color:var(--fg);transition:transform .6s var(--ease-out),color var(--d-hover) ease}
.lp-claim{margin:1.1rem 0 0;max-width:30ch;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.22rem,1.05rem + .6vw,1.55rem);line-height:1.22;color:var(--fg);text-wrap:pretty}
.lp-svc__row--1 .lp-claim{max-width:28ch;font-size:clamp(1.4rem,1.1rem + 1vw,2.1rem)}
.lp-svc__body{padding-top:.45rem}
.lp-svc__text{margin:0 0 1.4rem;max-width:46ch;color:var(--fg-2)}
.lp-svc__row--1 .lp-svc__text{color:var(--fg)}
.lp-svc__list{margin-bottom:.8rem;border-top:1px solid var(--line)}
.lp-svc__list li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.5rem;padding:.72rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-small);line-height:1.45;color:var(--fg)}
.lp-svc__list .ts{padding-top:.18rem}
.lp-svc__row--3 .lp-svc__list li{padding-block:.55rem}
@media (hover:hover) and (pointer:fine){.lp-svc__title a:hover{transform:translateX(10px)}}
@media (max-width:1000px){
  .lp-svc__row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .lp-svc__meta{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:.4rem 1.4rem;padding-top:0}
}
@media (max-width:700px){
  .lp-svc__row{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .lp-svc__body{padding-top:.2rem}
}

/* ----- Zwischen-CTA (Vokabular .inline-cta) ----- */
.lp-mid-wrap{padding-block:clamp(1rem,.6rem + 1.6vw,2.5rem)}
.lp-mid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem 3rem;padding:clamp(1.6rem,1.2rem + 1.4vw,2.6rem) 0;border-block:1px solid var(--line)}
.lp-mid__text{margin:0;max-width:40ch;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.4rem,1.1rem + 1vw,2.05rem);line-height:1.2;color:var(--fg);text-wrap:pretty}
.lp-mid__act{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;flex:none}
.lp-mid__note{font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
@media (max-width:760px){.lp-mid__act{width:100%;align-items:stretch}.lp-mid__act .btn{width:100%}}

/* ----- Worum es geht: Text und Definition ----- */
@media (min-width:861px){.lp-problem .sec-head{position:sticky;top:calc(var(--header-h) + 2rem)}}
.lp-problem h2{font-size:clamp(2.2rem,1.2rem + 3.1vw,4.4rem)}
@media (max-width:860px){.lp-problem .sec-head,.lp-fit-split .sec-head{margin-bottom:0}}
.lp-prose p{color:var(--fg-2)}
.lp-prose p:first-child{font-size:var(--fs-lead);line-height:1.55;color:var(--fg)}
.lp-prose .lp-def{margin:2.6rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line-2);font-family:var(--ec-font-body);font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);line-height:1.26;letter-spacing:-.005em;color:var(--fg);text-wrap:pretty}
.lp-def strong{font-weight:400;font-style:italic;color:var(--fg)}
.lp-inline{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color var(--d-hover) ease}
@media (hover:hover) and (pointer:fine){.lp-inline:hover{text-decoration-color:var(--fg)}}
.lp-problem h2,.lp-case h2,.lp-process h2{overflow-wrap:break-word}

/* ----- Was du bekommst: nummerierte Zeilen statt Karten ----- */
.lp-dl{border-top:1px solid var(--line-2)}
.lp-dl__row{display:grid;grid-template-columns:5rem minmax(0,1.1fr) minmax(0,1fr);gap:.7rem clamp(1.5rem,1rem + 2.6vw,4.5rem);align-items:baseline;padding:clamp(1.6rem,1.1rem + 1.8vw,2.8rem) 0;border-bottom:1px solid var(--line)}
.lp-dl__nr{font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3)}
.lp-dl__t{margin:0;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.7rem,1.1rem + 2vw,3.1rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);overflow-wrap:break-word}
.lp-dl__x{margin:0;max-width:48ch;color:var(--fg-2)}
@media (max-width:860px){
  .lp-dl__row{grid-template-columns:2.4rem minmax(0,1fr);column-gap:.9rem}
  .lp-dl__x{grid-column:2}
}

/* ----- Ablauf: Überschrift bleibt stehen, Schritte als Zeilen mit Timecode ----- */
@media (min-width:861px){.lp-sticky{position:sticky;top:calc(var(--header-h) + 2rem)}}
.lp-process .sec-head{margin-bottom:1.5rem}
.lp-process .steps li:first-child,.lp-chapters{border-top-color:var(--line-2)}
.lp-process .steps li,.lp-process .chapters li{padding:clamp(1.3rem,1rem + 1vw,2rem) 0}
.lp-process .chapters li{grid-template-columns:5rem minmax(0,1fr);gap:1rem}
.lp-process .steps h3,.lp-process .chapters h3{margin:0 0 .55rem;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.45rem,1.15rem + .9vw,2.05rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking)}
.lp-process .steps p,.lp-process .chapters p{font-size:.98rem;color:var(--fg-2);max-width:56ch}
.lp-process .steps__nr,.lp-process .chapters__tc{color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color .4s ease}
.lp-process li:first-child .steps__nr,.lp-process li:first-child .chapters__tc{color:var(--ec-accent)}
@media (max-width:560px){.lp-process .chapters li{grid-template-columns:1fr;gap:.4rem}}

/* ----- Für wen: Listen mit feinen Linien statt Kästen ----- */
.lp-fit{gap:clamp(2.4rem,1rem + 4vw,5.5rem)}
.lp-fit__col h3{margin:0 0 1.1rem;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.7rem,1.2rem + 1.4vw,2.6rem) * var(--ec-hs));line-height:var(--ec-head-leading)}
.lp-fit__col--neg h3{color:var(--fg-2)}
.lp-checks{border-top:1px solid var(--line-2)}
.lp-checks li{display:grid;grid-template-columns:1.9rem minmax(0,1fr);gap:.4rem;padding:1rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-body);line-height:1.55;color:var(--fg)}
.lp-checks li::before{content:"";width:12px;height:6px;margin-top:.5rem;border:0;border-left:1.5px solid var(--fg);border-bottom:1.5px solid var(--fg);border-radius:0;background:none;transform:rotate(-45deg)}
.lp-checks--neg li{color:var(--fg-3)}
.lp-checks--neg li::before{width:12px;height:0;margin-top:.8rem;border:0;border-top:1.5px solid var(--fg-3);transform:none}
.lp-fit__note{margin:1.4rem 0 0;font-size:var(--fs-small);color:var(--fg-3)}

/* ----- Referenzen als redaktionelle Zeilen (wie Startseite) ----- */
.lp-refs{border-top:1px solid var(--line-2)}
.lp-ref{border-bottom:1px solid var(--line)}
.lp-ref__link{position:relative;display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,clamp(260px,33vw,480px));grid-template-rows:1fr auto;gap:.6rem clamp(1rem,.5rem + 2.4vw,3.5rem);padding:clamp(1.6rem,1rem + 1.8vw,2.8rem) 0;color:inherit}
.lp-ref__nr{grid-row:1/span 2;padding-top:.7rem;font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3)}
.lp-ref__main{display:flex;flex-direction:column;gap:.55rem;align-self:center;min-width:0}
.lp-ref__kicker{font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.lp-ref__title{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2.3rem,1.1rem + 4vw,5.4rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg);text-wrap:balance;overflow-wrap:break-word;transition:transform .6s var(--ease-out)}
.lp-ref__sub{max-width:46ch;color:var(--fg-2)}
.lp-ref__facts{font:var(--ec-label);letter-spacing:.1em;color:var(--fg-3)}
.lp-ref__media{grid-column:3;grid-row:1/span 2;position:relative;align-self:center;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)}
.lp-ref__link .lp-ref__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) brightness(.72) contrast(1.06);transition:filter .7s ease,transform 1.1s var(--ease-out)}
.lp-ref__play{position:absolute;left:1rem;bottom:1rem;width:48px;height:48px;border-radius:50%;border:1px solid rgba(240,238,229,.55);background:rgba(8,8,8,.45);display:grid;place-items:center;color:var(--fg);transition:background-color var(--d-hover) ease,border-color var(--d-hover) ease,transform var(--d-ui) var(--ease-out)}
.lp-ref__play .play-icon{width:14px;height:auto;margin-left:3px}
.lp-ref__dur{position:absolute;right:.8rem;bottom:.9rem;font:var(--ec-label);letter-spacing:.08em;color:var(--fg);background:rgba(8,8,8,.72);padding:.2rem .45rem}
.lp-ref__go{grid-column:2;grid-row:2;display:inline-flex;align-items:center;gap:.55rem;font-weight:500;font-size:.95rem;color:var(--fg)}
.lp-ref__go .arrow{transition:transform var(--d-hover) var(--ease-out)}
.lp-ref__link:active .lp-ref__media{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .lp-ref__link:hover .lp-ref__media img{filter:none;transform:scale(1.04)}
  .lp-ref__link:hover .lp-ref__title{transform:translateX(10px)}
  .lp-ref__link:hover .lp-ref__play{background:var(--ec-olive-500);border-color:var(--ec-olive-500);transform:scale(1.06)}
  .lp-ref__link:hover .lp-ref__go .arrow{transform:translateX(4px)}
}
@media (hover:none){.lp-ref__link .lp-ref__media img{filter:grayscale(.3) brightness(.85)}}
@media (max-width:900px){
  .lp-ref__link{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .lp-ref__nr{grid-row:auto;padding:0}
  .lp-ref__media{grid-column:1;grid-row:auto;margin-top:.6rem}
  .lp-ref__go{grid-column:1;grid-row:auto}
}
/* eine Referenz neben Text (Personal Branding): Bild oben, Text darunter */
.lp-refs--single{border-top:0}
.lp-refs--single .lp-ref__link{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding-top:0}
.lp-refs--single .lp-ref__nr{display:none}
.lp-refs--single .lp-ref__media{grid-column:1;grid-row:1;margin:0 0 .9rem}
.lp-refs--single .lp-ref__main{grid-row:2}
.lp-refs--single .lp-ref__go{grid-column:1;grid-row:3}
.lp-refs--single .lp-ref__title{font-size:clamp(2.1rem,1.2rem + 2.6vw,3.8rem)}
.lp-source{margin-top:1.25rem}
.lp-more{margin:1rem 0 0}

/* Personal Branding: Praxisbeispiel */
.lp-case{align-items:start}
.lp-case h2{font-size:clamp(2.1rem,1.2rem + 2.7vw,4rem)}
.lp-case__text p:not(.eyebrow){max-width:52ch}
.lp-case__text h2+p{margin-top:1.4rem}

/* ----- Kurse: Kette der drei Bausteine ----- */
.lp-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,.6rem + 2.4vw,3.2rem)}
.lp-chain__step{position:relative;padding-top:1.3rem}
.lp-chain__step::before,.lp-chain__step::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2)}
.lp-chain__step::after{background:var(--fg);transform:scaleX(0);transform-origin:left}
.lp-chain__step.is-in::after{transform:scaleX(1);transition:transform 1.1s linear}
.lp-chain__step:nth-child(2).is-in::after{transition-delay:.9s}
.lp-chain__step:nth-child(3).is-in::after{transition-delay:1.8s}
.lp-chain__time{display:flex;justify-content:space-between;gap:1rem;max-width:none;margin:0 0 1rem;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.lp-chain__time span:first-child{display:flex;align-items:center;gap:.5rem;color:var(--fg-2)}
.lp-chain__step--cur .lp-chain__time span:first-child{color:var(--fg)}
.lp-chain__step--cur .lp-chain__time span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ec-accent);flex:none}
.lp-chain__name{margin:0 0 .7rem;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.8rem,1.2rem + 1.6vw,2.8rem) * var(--ec-hs));line-height:var(--ec-head-leading)}
.lp-chain__text{margin:0 0 .6rem;max-width:36ch;font-size:var(--fs-small);color:var(--fg-2)}
@media (max-width:760px){.lp-chain{grid-template-columns:1fr;gap:2.4rem}}

/* ----- Weiterlesen: drei Spalten mit feinen Trennlinien ----- */
.lp-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.lp-next li+li .lp-next__item{border-left:1px solid var(--line)}
.lp-next__item{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:.85rem;height:100%;padding:1.5rem clamp(1.1rem,.8rem + 1.2vw,2rem) 1.7rem;color:inherit}
.lp-next li:first-child .lp-next__item{padding-left:0}
.lp-next__item::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg-2);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease-film)}
.lp-next__k{font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.lp-next__t{margin:0;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.6rem,1.15rem + 1.3vw,2.4rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg)}
.lp-next__x{margin:0;max-width:38ch;font-size:var(--fs-small);color:var(--fg-2)}
.lp-next__go{display:inline-flex;align-items:center;gap:.55rem;margin-top:auto;padding-top:.7rem;font-weight:500;color:var(--fg)}
.lp-next__go .arrow{transition:transform var(--d-hover) var(--ease-out)}
.lp-next__item:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .lp-next__item:hover::before{transform:scaleY(1)}
  .lp-next__item:hover .lp-next__go .arrow{transform:translateX(5px)}
}
@media (max-width:900px){
  .lp-next{grid-template-columns:1fr}
  .lp-next li+li .lp-next__item{border-left:0;border-top:1px solid var(--line)}
  .lp-next__item{padding-inline:0}
}

/* ----- Reduzierte Bewegung ----- */
@media (prefers-reduced-motion:reduce){
  .lp-hero__grid::before,.lp-hero__rec i{animation:none}
  .lp-scale__seg>i,.lp-index__bar i,.lp-hero__bar i,.lp-chain__step::after{transition:none!important}
  .lp-scale .lp-scale__seg>i,.lp-index a[aria-current="page"] .lp-index__bar i,.lp-chain__step::after{transform:scaleX(1)}
  .lp-svc__title a,.lp-ref__title,.lp-index__name,.lp-next__item::before,.lp-ref__link .lp-ref__media img{transition:none}
  .lp-index__link:active .lp-index__name,.lp-ref__link:active .lp-ref__media,.lp-next__item:active{transform:none}
}


/* ==== referenzen.css ==== */
/* ==========================================================================
   Referenzen: Übersicht und Case Studies (ec/pages/referenzen.py)
   „Editorial Noir“ (27.10.2026): dünne Linien und redaktionelle Zeilen statt Karten,
   Seit V13 Mona Sans: Expanded in Versalien für Titel, Normal für Aussagen, SemiExpanded für
   Nummern, Laufzeiten und Quellen. Thumbnails entsättigt, Farbe erst beim Hover (Maus).
   Alle Klassen mit Präfix rf-; gemeinsame Bausteine aus main.css (.stats, .yt, .notice,
   .checks, .steps) nur über body.page-ref überschrieben. Bewegung nur über transform,
   opacity, clip-path und filter (Thumbnails); eigener Block für prefers-reduced-motion.
   ========================================================================== */

/* ---------- Gemeinsam ---------- */
.rf-hero::before,.rf-cs-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 38% 55% at 84% 18%,rgba(107,84,68,.2),rgba(8,8,8,0) 72%),
             radial-gradient(ellipse 42% 46% at 0% 100%,rgba(110,108,76,.2),rgba(110,108,76,0) 72%)}
.rf-caption{margin:1.75rem 0 0;font-size:.85rem;line-height:1.6;color:var(--fg-3);max-width:72ch}
.rf-inline{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;text-decoration-thickness:1px;transition:color var(--d-hover) ease,text-decoration-color var(--d-hover) ease}
@media (hover:hover) and (pointer:fine){.rf-inline:hover{text-decoration-color:currentColor}}
/* Play-Knopf: feiner Ring, beim Hover Olive */
.rf-case__play,.rf-reel__play,.rf-more__play{position:absolute;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(240,238,229,.55);background:rgba(8,8,8,.38);color:var(--fg);transition:background-color var(--d-hover) ease,border-color var(--d-hover) ease,transform var(--d-ui) var(--ease-out)}
.rf-case__play .play-icon,.rf-reel__play .play-icon,.rf-more__play .play-icon{margin-left:3px}
/* Thumbnails: entsättigt, Farbe beim Hover */
.rf-case__media img,.rf-reel__thumb img,.rf-more__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) brightness(.72) contrast(1.06);transition:filter .7s ease,transform 1.1s var(--ease-out)}
@media (hover:none){.rf-case__media img,.rf-reel__thumb img,.rf-more__media img{filter:grayscale(.3) brightness(.85)}}
/* dünne Fortschrittslinie im Bild */
.rf-case__bar,.rf-reel__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(240,238,229,.14)}
.rf-case__bar i,.rf-reel__bar i{display:block;height:100%;background:var(--ec-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--d-ui) ease}

/* ---------- Übersicht: Hero ---------- */
.rf-hero{padding-bottom:clamp(3.5rem,2rem + 5vw,7.5rem)}
.rf-hero h1{font-size:var(--fs-hero);max-width:19ch;word-spacing:.04em}
.rf-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:2.5rem clamp(2rem,1rem + 6vw,8rem);align-items:end;margin-top:clamp(1.8rem,1rem + 2.6vw,3.2rem)}
.rf-hero__copy{align-self:start}
.rf-hero .lead{margin-top:0}
.rf-hero .btn-row{margin-top:2rem}
.rf-index{border-top:1px solid var(--line-2)}
.rf-index li{border-bottom:1px solid var(--line)}
.rf-index a{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;column-gap:.9rem;align-items:center;min-height:44px;padding:1rem 0;color:inherit}
.rf-index__nr{grid-row:1/span 2;align-self:start;padding-top:.3rem;font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3);transition:color var(--d-hover) ease}
.rf-index__name{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.55rem,1.2rem + 1vw,2.2rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg);transition:transform .6s var(--ease-out)}
.rf-index__k{grid-column:2;margin-top:.45rem;font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.rf-index .arrow{grid-column:3;grid-row:1/span 2;color:var(--fg-2);transition:transform var(--d-hover) var(--ease-out),color var(--d-hover) ease}
.rf-index a:active .rf-index__name{transform:translateX(4px)}
@media (hover:hover) and (pointer:fine){
  .rf-index a:hover .rf-index__name{transform:translateX(8px)}
  .rf-index a:hover .rf-index__nr{color:var(--ec-accent)}
  .rf-index a:hover .arrow{transform:translateX(4px);color:var(--fg)}
}
@media (max-width:900px){.rf-hero__grid{grid-template-columns:1fr}.rf-index{max-width:34rem}}

/* ---------- Übersicht: Case Studies als große redaktionelle Einträge ---------- */
.rf-work .sec-head{margin-bottom:clamp(2rem,1.4rem + 3vw,4.2rem)}
.rf-cases{border-top:1px solid var(--line-2)}
.rf-case{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"meta meta" "title title" "media body";column-gap:clamp(1.5rem,1rem + 3.4vw,5rem);padding:clamp(1.4rem,1rem + 1.2vw,2.2rem) 0 clamp(3rem,2rem + 4vw,6.5rem);border-bottom:1px solid var(--line)}
.rf-case:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"meta meta" "title title" "body media"}
.rf-case__meta{grid-area:meta;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin:0 0 clamp(1.6rem,1rem + 2vw,3rem);max-width:none;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.rf-case__nr{display:inline-flex;align-items:center;gap:.65rem;color:var(--fg-2)}
.rf-case__nr::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-accent)}
.rf-case__title{grid-area:title;margin:0 0 clamp(1.5rem,1rem + 1.8vw,2.8rem);font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(3.1rem,1rem + 7.2vw,8.4rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);word-spacing:.08em;color:var(--fg);text-wrap:balance;transition:transform .7s var(--ease-out)}
.rf-case__media{grid-area:media;position:relative;align-self:start;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3);border-radius:var(--r-sm)}
.rf-case__play{left:clamp(.9rem,.6rem + .8vw,1.4rem);bottom:clamp(.9rem,.6rem + .8vw,1.4rem);width:58px;height:58px}
.rf-case__play .play-icon{width:15px;height:17px}
.rf-case__dur{position:absolute;right:clamp(.9rem,.6rem + .8vw,1.4rem);bottom:clamp(1.15rem,.85rem + .8vw,1.75rem);font:var(--ec-label);letter-spacing:.12em;color:var(--fg);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.rf-case__body{grid-area:body;align-self:end;display:flex;flex-direction:column;min-width:0}
.rf-case__sub{margin:0 0 1.7rem;max-width:30ch;font-family:var(--ec-font-body);font-size:clamp(1.4rem,1.1rem + 1vw,2rem);line-height:1.2;letter-spacing:-.005em;color:var(--fg);text-wrap:pretty}
.rf-case__facts{margin:0 0 1.2rem;border-top:1px solid var(--line-2)}
.rf-case__facts div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.rf-case__facts dt{padding-top:.18rem;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.rf-case__facts dd{margin:0;font-size:.95rem;line-height:1.5;color:var(--fg)}
.rf-case__link{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-weight:500;color:var(--fg)}
.rf-case__link::before{content:"";position:absolute;inset:0;z-index:3}
.rf-case__link .arrow{transition:transform var(--d-hover) var(--ease-out)}
.rf-case__link:focus-visible{outline:none}
.rf-case:has(.rf-case__link:focus-visible) .rf-case__media{outline:2px solid var(--fg);outline-offset:4px}
.rf-case:active .rf-case__media{transform:scale(.99)}
.rf-case__media{transition:transform var(--d-press) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .rf-case:hover .rf-case__media img{filter:none;transform:scale(1.03)}
  .rf-case:hover .rf-case__title{transform:translateX(12px)}
  .rf-case:hover .rf-case__play{background:var(--ec-olive-500);border-color:var(--ec-olive-500);transform:scale(1.06)}
  .rf-case:hover .rf-case__bar i{transform:scaleX(1);transition:transform 2.6s linear}
  .rf-case:hover .rf-case__link .arrow{transform:translateX(4px)}
}
@media (max-width:860px){
  .rf-case,.rf-case:nth-child(even){grid-template-columns:minmax(0,1fr);grid-template-areas:"meta" "title" "media" "body"}
  .rf-case__body{margin-top:1.6rem}
  .rf-case__sub{max-width:34ch}
}
@media (max-width:480px){
  .rf-case__meta{flex-direction:column}
  .rf-case__play{width:48px;height:48px}
  .rf-case__facts div{grid-template-columns:6.2rem minmax(0,1fr);gap:.8rem}
}
.rf-cases__note{margin-top:clamp(1.8rem,1.4rem + 1.4vw,2.6rem)}

/* ---------- Übersicht: Einordnung ---------- */
.rf-intro .sec-head{margin-bottom:0}
.rf-prose{padding-top:.4rem}
.rf-prose p{font-size:1.06rem;line-height:1.72;color:var(--fg-2)}
.rf-prose p:first-child{margin-bottom:1.5rem;max-width:30ch;font-family:var(--ec-font-body);font-size:clamp(1.5rem,1.15rem + 1.2vw,2.2rem);line-height:1.2;letter-spacing:-.005em;color:var(--fg)}

/* ---------- Übersicht: Zwischen-CTA ---------- */
.rf-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem 3rem;padding:clamp(1.8rem,1.2rem + 2vw,2.8rem) 0;border-block:1px solid var(--line-2)}
.rf-band>div{flex:1 1 28rem;min-width:0}
.rf-band__title{margin:0 0 .55rem;max-width:30ch;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.5rem);line-height:1.12;color:var(--fg)}
.rf-band__text{margin:0;font-size:var(--fs-small);color:var(--fg-3);max-width:56ch}

/* ---------- Übersicht: Wie ich Zahlen zeige ---------- */
.rf-rules__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2rem clamp(2rem,1rem + 5vw,7rem);align-items:start}
.rf-rules .sec-head{margin:0}
@media (min-width:901px){.rf-rules .sec-head{position:sticky;top:calc(var(--header-h) + 2rem)}}
.rf-rules .steps{border-top:1px solid var(--line-2)}
.rf-rules .steps li{grid-template-columns:3.4rem minmax(0,1fr);gap:1rem;padding:clamp(1.4rem,1.1rem + 1vw,2rem) 0;border-top:0;border-bottom:1px solid var(--line)}
.rf-rules .steps__nr{padding-top:.3rem;color:var(--fg-3)}
.rf-rules .steps h3{margin-bottom:.65rem;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.55rem,1.2rem + 1vw,2.3rem) * var(--ec-hs));line-height:var(--ec-head-leading)}
.rf-rules .steps p{font-size:.98rem;color:var(--fg-2)}
@media (max-width:900px){.rf-rules__grid{grid-template-columns:1fr}}
@media (max-width:560px){.rf-rules .steps li{grid-template-columns:1fr;gap:.6rem}}

/* ---------- Case Study: Hero ---------- */
.rf-cs-hero{padding-bottom:clamp(3rem,2rem + 4vw,6.5rem)}
.rf-cs-hero h1{max-width:17ch;font-size:calc(clamp(2.6rem,1.2rem + 4.3vw,5.6rem) * var(--ec-hs-long));font-stretch:var(--ec-head-stretch-long)}
/* große Case-Nummer als Kontur, rein dekorativ */
.hero .rf-cs-hero__nr{position:absolute;right:var(--gutter);top:calc(var(--header-h) + clamp(1.5rem,1rem + 2vw,3rem));font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(8rem,2rem + 15vw,18rem) * var(--ec-hs-num));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:transparent;-webkit-text-stroke:1px rgba(240,238,229,.17);pointer-events:none;user-select:none;font-variant-numeric:lining-nums proportional-nums}
.js .rf-cs-hero__nr{clip-path:inset(0 0 100% 0);animation:rf-nr 1.4s var(--ease-film) .15s forwards}
@keyframes rf-nr{to{clip-path:inset(0 0 0 0)}}
.rf-cs-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:2.5rem clamp(2rem,1rem + 6vw,8rem);align-items:end}
.rf-cs-hero .lead{margin-top:1.5rem}
.rf-cs-hero .btn-row{margin-top:2rem}
@media (max-width:960px){.rf-cs-hero__grid{grid-template-columns:1fr}.rf-chan{max-width:34rem}}
@media (max-width:700px){.hero .rf-cs-hero__nr{display:none}}

/* Steckbrief des Kanals: dünne Linien statt Karte */
.rf-chan{padding-top:1.1rem;border-top:1px solid var(--line-2)}
.rf-chan__k{display:flex;align-items:center;gap:.65rem;margin:0 0 .9rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.rf-chan__k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-accent)}
.rf-chan__name{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-mid);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.7rem,1.3rem + 1vw,2.3rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);color:var(--fg)}
.rf-chan__handle{margin:.5rem 0 0;font:var(--ec-label);letter-spacing:.08em;color:var(--fg-3);overflow-wrap:anywhere}
.rf-chan__facts{margin:1.2rem 0 .6rem;border-top:1px solid var(--line)}
.rf-chan__facts div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.rf-chan__facts dt{flex:none;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.rf-chan__facts dd{margin:0;color:var(--fg);text-align:right}
.rf-chan__link{position:relative;display:inline-flex;align-items:center;gap:.55rem;min-height:44px;font-weight:500;color:var(--fg)}
.rf-chan__link::after{content:"";position:absolute;left:0;right:0;bottom:.6rem;height:1px;background:var(--line-2);transition:background-color var(--d-hover) ease}
.rf-chan__link .arrow{transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.rf-chan__link:hover::after{background:var(--fg)}.rf-chan__link:hover .arrow{transform:translate(2px,-2px)}}
.rf-chan__note{margin:.2rem 0 0;font:var(--ec-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- Case Study: Kapitel-Index ---------- */
.rf-toc{border-block:1px solid var(--line)}
.rf-toc ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.rf-toc li+li a{padding-left:1rem;border-left:1px solid var(--line)}
.rf-toc a{position:relative;display:flex;flex-direction:column;gap:.35rem;min-height:44px;padding:1.05rem .6rem 1.1rem 0;font-size:.92rem;line-height:1.3;color:var(--fg-2);transition:color var(--d-hover) ease}
.rf-toc a span{font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3);transition:color var(--d-hover) ease}
.rf-toc a::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ec-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--d-ui) var(--ease-out)}
.rf-toc a:active{color:var(--fg)}
@media (hover:hover) and (pointer:fine){
  .rf-toc a:hover{color:var(--fg)}
  .rf-toc a:hover span{color:var(--ec-accent)}
  .rf-toc a:hover::after{transform:scaleX(1)}
}
@media (max-width:1000px){
  .rf-toc ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rf-toc li:nth-child(n+4) a{border-top:1px solid var(--line)}
  .rf-toc li+li a{padding-left:.7rem}
  .rf-toc li:nth-child(3n+1) a{padding-left:0;border-left:0}
  .rf-toc a{padding:.85rem .3rem .9rem 0;font-size:.8rem;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
}

/* ---------- Case Study: Kapitel ---------- */
.rf-ch__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.6rem clamp(2rem,1rem + 5vw,7rem);align-items:start}
.rf-ch__head h2{margin:0;font-size:calc(clamp(2rem,1.1rem + 2.3vw,3.4rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);font-stretch:var(--ec-head-stretch-long)}
@media (min-width:961px){.rf-ch__grid .rf-ch__head{position:sticky;top:calc(var(--header-h) + 1.75rem)}}
@media (max-width:960px){.rf-ch__grid{grid-template-columns:1fr}}
.rf-ch__body>p{font-size:1.06rem;line-height:1.72;color:var(--fg-2);max-width:60ch}
.rf-ch__body>p:first-child{margin-bottom:1.5rem;max-width:30ch;font-family:var(--ec-font-body);font-size:clamp(1.5rem,1.15rem + 1.2vw,2.2rem);line-height:1.2;letter-spacing:-.005em;color:var(--fg)}
.rf-ch__body>p.stats__source{margin:1rem 0 0;font-size:.82rem;line-height:1.6;color:var(--fg-3)}
/* Einordnung: Notiz am Rand statt Kasten */
.page-ref .rf-scope{margin:2rem 0;padding:.15rem 0 .15rem 1.3rem;background:none;border-left:1px solid var(--ec-accent);border-radius:0;font-size:.98rem;color:var(--fg-2)}
.page-ref .rf-scope strong{display:block;margin-bottom:.5rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.rf-ch__body>p.rf-take,.rf-take{margin:0 0 1.1rem;padding-top:1.6rem;max-width:34ch;border-top:1px solid var(--line-2);font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem);line-height:1.22;color:var(--fg)}
/* Leistungen: nummerierte Liste mit Linien */
.page-ref .rf-services{counter-reset:svc;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.4rem;margin:1.8rem 0 0;border-top:1px solid var(--line-2)}
.page-ref .rf-services li{counter-increment:svc;display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:baseline;gap:0;padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.45;color:var(--fg)}
.page-ref .rf-services li::before{content:counter(svc,decimal-leading-zero);width:auto;height:auto;margin:0;border:0;border-radius:0;background:none;font:var(--ec-label);letter-spacing:.14em;color:var(--fg-3)}
@media (max-width:560px){.page-ref .rf-services{grid-template-columns:1fr}}
.rf-ch__body>p.rf-label,.rf-label{margin:1.1rem 0 0;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- Case Study: Videos ---------- */
.rf-ch__head--wide{max-width:900px;margin-bottom:clamp(2rem,1.2rem + 2.6vw,3.6rem)}
.rf-ch__head--wide h2{max-width:none;font-size:calc(clamp(2.6rem,1.3rem + 4vw,5.6rem) * var(--ec-hs))}
.rf-ch__head--wide .lead{margin-top:1.2rem}
/* großes Video (Fassade aus main.css, nur optisch angepasst) */
.rf-lead{margin:0 0 clamp(3rem,2rem + 3.4vw,5.5rem)}
.page-ref .rf-lead .yt{border:0;border-radius:var(--r-sm);box-shadow:var(--shadow)}
.page-ref .rf-lead .yt__btn img{filter:grayscale(.7) brightness(.72) contrast(1.05);transition:filter .7s ease,transform 1.1s var(--ease-out)}
.page-ref .rf-lead .vcard__play{width:clamp(64px,3rem + 3vw,96px);height:clamp(64px,3rem + 3vw,96px);background:rgba(8,8,8,.3);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid rgba(240,238,229,.6);transform:none}
.page-ref .rf-lead .vcard__play .play-icon{width:22px;height:24px}
.rf-lead__dur{position:absolute;top:clamp(.8rem,.6rem + .6vw,1.3rem);right:clamp(.9rem,.6rem + .8vw,1.4rem);z-index:1;display:flex;align-items:center;gap:.55rem;font:var(--ec-label);letter-spacing:.14em;color:var(--fg);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.rf-lead__dur::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ec-accent)}
.page-ref .rf-lead .yt__btn:active .vcard__play{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .page-ref .rf-lead .yt__btn:hover img{filter:none;transform:scale(1.02)}
  .page-ref .rf-lead .yt__btn:hover .vcard__play{background:var(--ec-olive-500);border-color:var(--ec-olive-500);color:var(--fg);transform:scale(1.05)}
}
@media (hover:none){.page-ref .rf-lead .yt__btn img{filter:grayscale(.3) brightness(.82)}}
.rf-lead__cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.7rem 2.5rem;align-items:baseline;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.rf-lead__title{max-width:44ch;font-family:var(--ec-font-body);font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);line-height:1.2;color:var(--fg)}
.rf-lead__meta{font:var(--ec-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);text-align:right}
@media (max-width:760px){.rf-lead__cap{grid-template-columns:1fr}.rf-lead__meta{text-align:left}}
/* weitere Videos: Liste mit Laufzeit als Timecode */
.rf-reel{border-top:1px solid var(--line-2)}
.rf-reel__item{border-bottom:1px solid var(--line)}
.rf-reel__link{display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,clamp(220px,25vw,360px));column-gap:clamp(1rem,.5rem + 2vw,3rem);align-items:start;padding:clamp(1.1rem,.8rem + 1vw,1.8rem) 0;color:inherit}
.rf-reel__tc{padding-top:.4rem;font:var(--ec-label);letter-spacing:.12em;color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color var(--d-hover) ease}
.rf-reel__main{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;min-width:0}
.rf-reel__title{max-width:40ch;font-family:var(--ec-font-head);font-stretch:var(--ec-sub-stretch);font-weight:var(--ec-sub-weight);font-size:calc(clamp(1.15rem,1rem + .6vw,1.6rem) * var(--ec-hs-sub));line-height:1.2;letter-spacing:0;color:var(--fg);text-wrap:pretty;transition:transform .6s var(--ease-out)}
.rf-reel__meta{font:var(--ec-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.rf-reel__go{display:inline-flex;align-items:center;gap:.5rem;margin-top:.2rem;font-size:.88rem;font-weight:500;color:var(--fg-2);transition:color var(--d-hover) ease}
.rf-reel__go .arrow{transition:transform var(--d-hover) var(--ease-out)}
.rf-reel__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3);border-radius:var(--r-sm);transition:transform var(--d-press) var(--ease-out)}
.rf-reel__play{left:.75rem;bottom:.75rem;width:40px;height:40px}
.rf-reel__play .play-icon{width:11px;height:12px}
.rf-reel__link:active .rf-reel__thumb{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .rf-reel__link:hover .rf-reel__thumb img{filter:none;transform:scale(1.04)}
  .rf-reel__link:hover .rf-reel__title{transform:translateX(8px)}
  .rf-reel__link:hover .rf-reel__tc{color:var(--ec-accent)}
  .rf-reel__link:hover .rf-reel__go{color:var(--fg)}
  .rf-reel__link:hover .rf-reel__go .arrow{transform:translate(2px,-2px)}
  .rf-reel__link:hover .rf-reel__play{background:var(--ec-olive-500);border-color:var(--ec-olive-500)}
  .rf-reel__link:hover .rf-reel__bar i{transform:scaleX(1);transition:transform 2.4s linear}
}
@media (max-width:700px){
  .rf-reel__link{grid-template-columns:minmax(0,1fr) 42%;grid-template-areas:"tc thumb" "main thumb";column-gap:1rem;row-gap:.45rem;align-items:start}
  .rf-reel__tc{grid-area:tc;padding-top:0}
  .rf-reel__main{grid-area:main;gap:.45rem}
  .rf-reel__thumb{grid-area:thumb}
  .rf-reel__title{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:calc(1rem * var(--ec-hs-sub));line-height:1.25}
  .rf-reel__go{display:none}
  .rf-reel__play{width:32px;height:32px;left:.5rem;bottom:.5rem}
  .rf-reel__play .play-icon{width:9px;height:10px;margin-left:2px}
}

/* ---------- Case Study: Kanalzahlen und eigene Angabe ---------- */
.page-ref .rf-ch__body .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.25rem,.8rem + 2vw,3rem);margin-top:1.8rem;background:none;border:0;border-radius:0;overflow:visible}
.page-ref .rf-ch__body .stat{gap:.5rem;padding:1.15rem 0 1.6rem;background:none;border-top:1px solid var(--line-2)}
.page-ref .rf-ch__body .stat__value{font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(2.5rem,1.4rem + 3.6vw,4.6rem) * var(--ec-hs-num));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);white-space:nowrap}
.page-ref .rf-ch__body .stat__label{letter-spacing:.16em}
.rf-claim{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem 1.6rem;align-items:center;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line-2)}
.rf-claim p{margin:0}
.rf-claim__value{grid-row:span 2;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(3rem,1.8rem + 3.8vw,5.2rem) * var(--ec-hs-num));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg)}
.rf-claim__text{font-family:var(--ec-font-body);font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem);line-height:1.25;color:var(--fg)}
.rf-claim__tag{display:flex;align-items:center;gap:.6rem;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.rf-claim__tag::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ec-accent)}

/* ---------- Case Study: weitere Case Studies ---------- */
.rf-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3rem,2rem + 3vw,4.5rem) clamp(1.5rem,1rem + 2.6vw,4rem);padding-top:clamp(1.6rem,1rem + 1.6vw,2.6rem);border-top:1px solid var(--line-2)}
.rf-more__item{display:flex;flex-direction:column;align-items:flex-start;color:inherit}
.rf-more__media{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3);border-radius:var(--r-sm);margin-bottom:1.4rem;transition:transform var(--d-press) var(--ease-out)}
.rf-more__play{left:1rem;bottom:1rem;width:50px;height:50px}
.rf-more__play .play-icon{width:13px;height:15px}
.rf-more__k{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.rf-more__nr{color:var(--fg-2)}
.rf-more__title{margin:.8rem 0 .9rem;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-mid);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2.6rem,1.3rem + 3.6vw,5.2rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);word-spacing:.08em;color:var(--fg);text-wrap:balance;transition:transform .6s var(--ease-out)}
.rf-more__sub{max-width:44ch;font-size:.98rem;line-height:1.55;color:var(--fg-2)}
.rf-more__facts{margin-top:.6rem;font:var(--ec-label);letter-spacing:.1em;color:var(--fg-3)}
.rf-more__go{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;margin-top:.8rem;font-weight:500;color:var(--fg)}
.rf-more__go .arrow{transition:transform var(--d-hover) var(--ease-out)}
.rf-more__item:active .rf-more__media{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .rf-more__item:hover .rf-more__media img{filter:none;transform:scale(1.03)}
  .rf-more__item:hover .rf-more__title{transform:translateX(10px)}
  .rf-more__item:hover .rf-more__play{background:var(--ec-olive-500);border-color:var(--ec-olive-500);transform:scale(1.06)}
  .rf-more__item:hover .rf-more__go .arrow{transform:translateX(4px)}
}
@media (max-width:760px){.rf-more{grid-template-columns:1fr}}
.rf-back{margin:2rem 0 0}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .js .rf-cs-hero__nr{animation:none;clip-path:none}
  .rf-case__media,.rf-case__media img,.rf-case__title,.rf-reel__thumb,.rf-reel__thumb img,.rf-reel__title,.rf-more__media,.rf-more__media img,.rf-more__title,.rf-index__name,.rf-toc a::after,.page-ref .rf-lead .yt__btn img,.rf-case__bar i,.rf-reel__bar i{transition:none}
  .rf-case:hover .rf-case__title,.rf-reel__link:hover .rf-reel__title,.rf-more__item:hover .rf-more__title,.rf-index a:hover .rf-index__name,.rf-index a:active .rf-index__name{transform:none}
  .rf-case:hover .rf-case__media img,.rf-reel__link:hover .rf-reel__thumb img,.rf-more__item:hover .rf-more__media img,.page-ref .rf-lead .yt__btn:hover img{transform:none}
  .rf-case:active .rf-case__media,.rf-reel__link:active .rf-reel__thumb,.rf-more__item:active .rf-more__media{transform:none}
}


/* ==== ueber.css ==== */
/* ==========================================================================
   Über Elvis (ec/pages/ueber.py) im Stil „Editorial Noir“. Nur Ergänzungen zu main.css, Präfix .ueber-
   Großes Porträt im Film-Rahmen, redaktionelle Zeilen statt Karten, dünne Linien, Mono-Labels.
   Bewegung: transform/opacity/clip-path, ease-out, Hover nur mit Maus, reduced motion unten.
   ========================================================================== */

/* ---- Hero ---- */
.ueber-hero{padding-top:calc(var(--header-h) + clamp(1.5rem,1rem + 2.4vw,3.5rem));padding-bottom:clamp(3.5rem,2rem + 5vw,7.5rem)}
.ueber-hero .crumbs{margin-bottom:clamp(1.75rem,1rem + 2.6vw,3.25rem)}
.ueber-hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,1rem + 4.4vw,6.5rem);align-items:start}
.ueber-hero__text{display:flex;flex-direction:column;min-width:0}
.ueber-hero .eyebrow{margin-bottom:clamp(1.1rem,.8rem + 1vw,1.8rem)}
.ueber-hero .ueber-hero__h1{margin:0;max-width:none;font-size:calc(clamp(2.7rem,1rem + 3.9vw,5.1rem) * var(--ec-hs));font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking)}
.ueber-hero .ueber-hero__h1 em{font-size:1.04em}
.ueber-hero__copy{margin-top:clamp(1.8rem,1.2rem + 2vw,3rem);max-width:44rem}
.ueber-hero .lead{margin:0;max-width:38ch;color:var(--fg);font-size:clamp(1.12rem,1rem + .5vw,1.4rem);line-height:1.45}
.ueber-hero__p{margin:1rem 0 0;max-width:50ch;color:var(--fg-2)}
.ueber-hero .btn-row{margin-top:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);gap:.9rem 1.8rem}
.ueber-hero__trust{margin-top:clamp(2rem,1.4rem + 2vw,3.2rem);max-width:44rem}

/* Porträt im Film-Rahmen: groß, ohne Kasten, Ecken und REC-Zeile wie im Sucher */
.ueber-hero__visual{justify-self:end;width:100%;max-width:560px}
.ueber-frame{margin:0;aspect-ratio:4/5;border:0;border-radius:var(--r-sm);box-shadow:none;background:var(--bg-3)}
.ueber-frame img{filter:saturate(.78) contrast(1.08) brightness(.95) sepia(.04)}
.ueber-frame::after{background:linear-gradient(180deg,rgba(8,8,8,.42) 0%,rgba(8,8,8,0) 20%,rgba(8,8,8,0) 56%,rgba(8,8,8,.82) 100%)}
.ueber-frame .frame__corner{width:18px;height:18px;border-color:rgba(240,238,229,.6);opacity:1}
.ueber-frame .frame__corner--tl{left:14px;top:14px}
.ueber-frame .frame__corner--tr{right:14px;top:14px}
.ueber-frame .frame__corner--bl{left:14px;bottom:14px}
.ueber-frame .frame__corner--br{right:14px;bottom:14px}
.ueber-frame .frame__tc{left:2.2rem;top:1.15rem;padding:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;letter-spacing:.16em;color:var(--fg);font-variant-numeric:tabular-nums}
.ueber-frame .frame__tc i{background:var(--ec-accent);box-shadow:none}
.ueber-frame .frame__cap{left:2.2rem;right:2.2rem;bottom:2rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.ueber-frame .frame__name{display:block;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.7rem,1.2rem + 1.2vw,2.6rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking)}
.ueber-frame .frame__role{display:block;margin:0;color:var(--fg-2);letter-spacing:.2em}
.ueber-frame .frame__bar{left:2.2rem;right:2.2rem;bottom:1.15rem;height:1px;background:rgba(240,238,229,.18)}
.ueber-frame .frame__bar i{background:var(--fg)}

@media (max-width:960px){
  .ueber-hero__grid{grid-template-columns:minmax(0,1fr)}
  .ueber-hero__visual{justify-self:start;max-width:520px}
}
@media (max-width:560px){
  .ueber-hero__visual{max-width:none}
  .ueber-frame{aspect-ratio:4/4.6}
  .ueber-frame .frame__tc{left:1.9rem}
  .ueber-frame .frame__cap{left:1.6rem;right:1.6rem;bottom:1.7rem}
  .ueber-frame .frame__bar{left:1.6rem;right:1.6rem}
}

/* Einstieg beim Laden: kurz, ease-out, gestaffelt. Bewusst ohne opacity 0: Hält ein Hintergrund-Tab,
   ein Screenshot oder ein Renderer die Animation an, bleibt der Hero sichtbar (H1 und Porträt sind LCP-Kandidaten). */
@keyframes ueber-in{from{transform:translateY(12px)}to{transform:none}}
@keyframes ueber-frame-in{from{clip-path:inset(6% 4% 6% 4%);transform:scale(.985)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes ueber-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ueber-in{animation:ueber-in .8s var(--ease-out) both}
.ueber-hero__text>.ueber-in:nth-child(2){animation-delay:60ms}
.ueber-hero__copy .ueber-in:nth-child(1){animation-delay:120ms}
.ueber-hero__copy .ueber-in:nth-child(2){animation-delay:160ms}
.ueber-hero__copy .ueber-in:nth-child(3){animation-delay:200ms}
.ueber-hero__text>.ueber-in:last-child{animation-delay:240ms}
.ueber-frame{animation:ueber-frame-in 1.2s var(--ease-film) .1s both}
.ueber-frame .frame__bar i{animation:ueber-bar 14s linear .8s both}

/* ---- Gemeinsame Abschnittsteile ---- */
@media (min-width:861px){
  .ueber-sec .split{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,1rem + 4.5vw,7rem)}
  .ueber-sticky{position:sticky;top:calc(var(--header-h) + 2rem)}
}
.ueber-head{max-width:1040px}
.ueber-ref__label,.ueber-kit__label{font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}

/* ---- Woher ich komme ---- */
.ueber-story__body{max-width:62ch}
.ueber-story__body p{margin-bottom:1.15em}
.ueber-story__first{margin-bottom:1.3em!important;max-width:28ch;font-family:var(--ec-font-body);font-size:clamp(1.65rem,1.1rem + 1.6vw,2.65rem);line-height:1.14;letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.ueber-story__turn{margin-top:2rem;padding-left:1.3rem;border-left:1px solid var(--ec-accent);font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.3rem,1.05rem + .8vw,1.75rem);line-height:1.28;color:var(--fg)}
/* Handwerk als Abspann: nummerierte Zeilen statt Chips */
.ueber-kit__label{margin:clamp(2.5rem,2rem + 1.6vw,3.5rem) 0 0!important;max-width:none;padding-bottom:.9rem;border-bottom:1px solid var(--line-2)}
.ueber-kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.25rem,1rem + 1.5vw,2.5rem)}
.ueber-kit li{display:flex;align-items:baseline;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.12rem,.98rem + .55vw,1.5rem) * var(--ec-hs));line-height:1;color:var(--fg)}
.ueber-kit__nr{flex:none;font:var(--ec-label);letter-spacing:.14em;color:var(--fg-3)}
@media (max-width:520px){.ueber-kit{grid-template-columns:1fr}.ueber-kit li{padding:.75rem 0}}

/* ---- Woran ich arbeite: Projekte als Zeilen ---- */
.ueber-projs{border-top:1px solid var(--line-2)}
.ueber-proj{display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,clamp(300px,40vw,580px));grid-template-areas:"nr head media" "nr role media";column-gap:clamp(1rem,.5rem + 2.4vw,3.5rem);row-gap:clamp(1.5rem,1rem + 1vw,2.2rem);padding:clamp(2rem,1.2rem + 2.6vw,3.8rem) 0;border-bottom:1px solid var(--line)}
.ueber-proj__nr{grid-area:nr;padding-top:.15rem;font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3)}
.ueber-proj__head{grid-area:head;min-width:0}
.ueber-proj__kicker{margin:0 0 .85rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.ueber-proj__title{margin:0;max-width:none;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2.4rem,1.1rem + 4vw,5.4rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);word-spacing:.06em;color:var(--fg);text-wrap:balance}
.ueber-proj__sub{margin:1.1rem 0 .55rem;max-width:44ch;color:var(--fg-2)}
.ueber-proj__facts{margin:0;font:var(--ec-label);letter-spacing:.1em;color:var(--fg-3)}
.ueber-proj__media{grid-area:media;position:relative;display:block;align-self:start;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3);border-radius:var(--r-sm)}
.ueber-proj__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) brightness(.72) contrast(1.06);transition:filter .7s ease,transform 1.1s var(--ease-out)}
.ueber-proj__role{grid-area:role;min-width:0;max-width:54ch;padding-top:1.4rem;border-top:1px solid var(--line)}
.ueber-proj__role .ueber-ref__label{margin:0 0 .7rem}
.ueber-proj__role h3{margin:0 0 .6rem;font-size:clamp(1.2rem,1.08rem + .45vw,1.5rem)}
.ueber-proj__role>p:not(.ueber-ref__label){margin-bottom:1rem;font-size:var(--fs-small);color:var(--fg-2)}
.ueber-proj__role .textlink{margin-top:.6rem}
.ueber-ref__tags{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem}
.ueber-ref__tags li{display:flex;align-items:center;gap:.6rem;font:var(--ec-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.ueber-ref__tags li::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:var(--fg-3)}
@media (hover:hover) and (pointer:fine){
  .ueber-proj:hover .ueber-proj__media img{filter:none;transform:scale(1.03)}
}
@media (hover:none){.ueber-proj__media img{filter:grayscale(.3) brightness(.86)}}
@media (max-width:900px){
  .ueber-proj{grid-template-columns:2.6rem minmax(0,1fr);grid-template-areas:"nr head" "media media" "role role";column-gap:.5rem}
  .ueber-proj__nr{padding-top:0}
}

/* YouTube-Links und Quellenhinweis */
.ueber-refs__foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.75rem clamp(2rem,1rem + 5vw,6rem);margin-top:clamp(2.5rem,1.8rem + 2vw,4rem);align-items:start}
@media (max-width:860px){.ueber-refs__foot{grid-template-columns:1fr}}
.ueber-yt .ueber-ref__label{margin:0 0 .9rem}
.ueber-yt ul{border-top:1px solid var(--line-2)}
.ueber-yt li{border-bottom:1px solid var(--line)}
.ueber-yt a{display:flex;align-items:center;gap:1rem;min-height:56px;padding-right:.3rem;color:var(--fg);font-weight:500}
.ueber-yt__name{min-width:0}
.ueber-yt__handle{margin-left:auto;font:var(--ec-label);letter-spacing:.06em;color:var(--fg-3);font-weight:400;white-space:nowrap}
.ueber-yt .arrow{flex:none;transform:rotate(-45deg);transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ueber-yt a:hover .arrow{transform:rotate(-45deg) translateX(3px)}
  .ueber-yt a:hover .ueber-yt__handle{color:var(--fg-2)}
}
@media (max-width:560px){.ueber-yt__handle{display:none}.ueber-yt a{justify-content:space-between}}
.ueber-refs__note{margin:0;max-width:56ch;font-size:.86rem;color:var(--fg-3)}
@media (min-width:861px){.ueber-refs__note{padding-top:2.15rem}}

/* ---- CTA in der Mitte: Zeile zwischen zwei Linien ---- */
.ueber-break{margin-top:clamp(3rem,2rem + 3vw,5rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;padding:clamp(1.6rem,1.1rem + 1.6vw,2.6rem) 0;border-block:1px solid var(--line-2)}
.ueber-break__h{margin:0 0 .5rem;max-width:32ch;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.5rem,1.1rem + 1.3vw,2.4rem);line-height:1.14;color:var(--fg);text-wrap:balance}
.ueber-break__p{margin:0;font-size:var(--fs-small);color:var(--fg-3)}
.ueber-break .btn{flex:none}
@media (max-width:760px){
  .ueber-break{flex-direction:column;align-items:stretch}
  .ueber-break .btn{width:100%}
}

/* ---- Wie ich arbeite: fünf Regeln als große Zeilen ---- */
.ueber-steps{border-top:1px solid var(--line-2)}
.ueber-steps li{grid-template-columns:4rem minmax(0,1fr);padding:clamp(1.4rem,1.1rem + 1vw,2.1rem) 0;border-top:0;border-bottom:1px solid var(--line)}
.ueber-steps li:last-child{border-bottom:1px solid var(--line)}
.ueber-steps .steps__nr{padding-top:.4rem;font-size:.72rem;color:var(--fg-3)}
.ueber-steps h3{margin-bottom:.65rem;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.55rem,1.15rem + 1.25vw,2.5rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking)}
.ueber-steps p{max-width:54ch;font-size:var(--fs-body);color:var(--fg-2)}
@media (max-width:560px){.ueber-steps li{grid-template-columns:1fr;gap:.6rem}.ueber-steps .steps__nr{padding-top:0}}

/* ---- Leistungen als Liste ---- */
.ueber-svc{border-top:1px solid var(--line-2)}
.ueber-svc>li{border-bottom:1px solid var(--line)}
.ueber-svc-row{position:relative;isolation:isolate;display:grid;grid-template-columns:4rem minmax(0,1.3fr) minmax(0,1fr) auto;gap:clamp(1rem,.5rem + 2vw,2.6rem);align-items:center;padding:clamp(1.5rem,1rem + 1.7vw,2.7rem) 0;color:inherit}
.ueber-svc-row::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;background:var(--bg-2);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease-film)}
.ueber-svc-row__nr{font:var(--ec-label);letter-spacing:.16em;color:var(--fg-3)}
.ueber-svc-row__main{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.ueber-svc-row__kurz{display:flex;align-items:center;gap:.55rem;font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.ueber-svc-row--main .ueber-svc-row__kurz{color:var(--fg)}
.ueber-svc-row--main .ueber-svc-row__kurz::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ec-accent)}
.ueber-svc-row__title{margin:0;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.75rem,1rem + 2.6vw,3.7rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);text-wrap:balance;transition:transform .6s var(--ease-out)}
.ueber-svc-row__claim{max-width:36ch;font-size:.98rem;color:var(--fg-2)}
.ueber-svc-row__go{display:flex;align-items:center;gap:1rem;justify-self:end}
.ueber-svc-row__golabel{font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.ueber-svc-row__circle{flex:none;width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--fg);transition:background-color var(--d-hover) ease,border-color var(--d-hover) ease}
.ueber-svc-row:active{transform:scale(.995);transition:transform var(--d-press) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ueber-svc-row:hover::before{transform:scaleY(1)}
  .ueber-svc-row:hover .ueber-svc-row__title{transform:translateX(10px)}
  .ueber-svc-row:hover .ueber-svc-row__circle{background:var(--ec-olive-500);border-color:var(--ec-olive-500)}
}
@media (max-width:1000px){
  .ueber-svc-row{grid-template-columns:2.6rem minmax(0,1fr) 46px;row-gap:.8rem}
  .ueber-svc-row__nr{grid-row:1;align-self:start;padding-top:.15rem}
  .ueber-svc-row__go{grid-column:3;grid-row:1;align-self:start}
  .ueber-svc-row__golabel{display:none}
  .ueber-svc-row__claim{grid-column:2/-1}
}
.ueber-svc__more{margin:1.5rem 0 0}

/* ---- Kurz gesagt: Datenblatt ---- */
.ueber-facts{margin:0;border-top:1px solid var(--line-2)}
.ueber-facts__row{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1.5rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.ueber-facts dt{padding-top:.3rem;font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.ueber-facts dd{margin:0;max-width:60ch;color:var(--fg)}
.ueber-facts a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color var(--d-hover) ease}
@media (hover:hover) and (pointer:fine){.ueber-facts a:hover{text-decoration-color:var(--fg)}}
@media (max-width:560px){.ueber-facts__row{grid-template-columns:1fr;gap:.35rem}}
.ueber-facts__stand{margin:1.1rem 0 0;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

/* ---- Weniger Bewegung ---- */
@media (prefers-reduced-motion:reduce){
  .ueber-in,.ueber-frame{animation:none}
  .ueber-frame .frame__bar i{animation:none;transform:scaleX(.4)}
  .ueber-proj__media img,.ueber-svc-row__title,.ueber-svc-row::before{transition:none}
  .ueber-svc-row:active{transform:none}
}


/* ==== v6.css ==== */
/* =====================================================================
   Master V6 (28.10.2026): neue Abschnitte der Startseite und die Fallstudie.
   02 Willkommensvideo (.iv), 03 Referenzleiste (.proof), 04 Fallstudie (.cs, ergänzt home.css),
   05 3D-Kamerafahrt (.lx), 06 Referenzen als Composition (.aec), 07 Razor-Tool (.nle, ergänzt home.css),
   08 Color Grade (.grade), 09 Focus Pull (.story, ergänzt home.css), 10 Leistungen (Zusatzzeile).
   Akzent der Teile ist seit V13 Olive 300 (--ec-accent).
   ===================================================================== */

/* ---------- 02 Willkommensvideo ---------- */
.iv{padding-top:clamp(4rem,2.5rem + 5vw,8rem)}
.iv__head{max-width:1100px;margin-bottom:clamp(1.8rem,1.2rem + 2.4vw,3.4rem)}
.iv__title{margin:0;font-size:calc(clamp(2rem,1.1rem + 3.2vw,4.8rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);text-wrap:balance;font-stretch:var(--ec-head-stretch-long)}
.iv__player{position:relative}
.iv__frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050505;border:1px solid var(--line);isolation:isolate}
.iv__video,.iv__still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050505}
.iv__still{object-fit:cover;object-position:50% 34%;filter:grayscale(1) contrast(1.12) brightness(.5) sepia(.16)}
.iv__still{pointer-events:none;transition:opacity .4s ease}
.iv__player.is-started .iv__still{opacity:0}
.iv__play-l{white-space:nowrap}
.iv__grade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 70% at 50% 45%,rgba(8,8,8,0) 40%,rgba(8,8,8,.72) 100%),linear-gradient(180deg,rgba(8,8,8,.35),rgba(8,8,8,0) 30%,rgba(8,8,8,0) 62%,rgba(8,8,8,.75))}
.iv__player.is-playing .iv__grade,.iv__player.is-playing .iv__tc,.iv__player.is-playing .iv__play{opacity:0;pointer-events:none}
.iv__tc{position:absolute;left:clamp(1rem,.6rem + 1.4vw,2rem);top:clamp(.9rem,.5rem + 1.2vw,1.6rem);display:flex;align-items:center;gap:.6rem;font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);transition:opacity .4s ease}
.iv__tc i{width:7px;height:7px;border-radius:50%;background:var(--ec-accent)}
.iv__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:1rem;padding:.6rem 1.4rem .6rem .6rem;border:1px solid rgba(240,238,229,.38);border-radius:999px;background:rgba(8,8,8,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--fg);font:500 .95rem/1 var(--ec-font-body);cursor:pointer;transition:opacity .4s ease,background-color var(--d-hover) ease,border-color var(--d-hover) ease,transform var(--d-press) var(--ease-out)}
.iv__play-i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--fg);color:var(--ink)}
.iv__play-i .play-icon{width:16px;margin-left:3px}
.iv__dur{font:var(--ec-label);letter-spacing:.12em;color:var(--fg-2)}
.iv__play:disabled{cursor:default;opacity:.92}
.iv__play:disabled .iv__play-i{background:transparent;color:var(--fg-2);border:1px solid rgba(240,238,229,.35)}
@media (hover:hover) and (pointer:fine){.iv__play:not(:disabled):hover{background:rgba(8,8,8,.6);border-color:var(--fg)}}
.iv__play:not(:disabled):active{transform:translate(-50%,-50%) scale(.97)}
.iv__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:linear-gradient(0deg,rgba(5,5,5,.82),rgba(5,5,5,0));opacity:0;transition:opacity .3s ease}
.iv__player.is-started .iv__bar{opacity:1}
.iv__player.is-playing.is-idle .iv__bar{opacity:0}
.iv__bar[hidden]{display:none}
.iv__btn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:2px;background:transparent;color:var(--fg);cursor:pointer}
.iv__btn svg{width:20px;height:20px}
.iv__btn[aria-pressed="false"][data-iv-cc]{opacity:.5}
.iv__btn .i-pause{display:none}
.iv__player.is-playing .iv__btn[data-iv-toggle] .i-play{display:none}
.iv__player.is-playing .iv__btn[data-iv-toggle] .i-pause{display:block}
.iv__time{font:var(--ec-label);letter-spacing:.06em;color:var(--fg-2);font-variant-numeric:tabular-nums;min-width:3.2em}
.iv__seek{flex:1;min-width:60px;height:24px;margin:0;background:transparent;accent-color:var(--ec-accent);cursor:pointer}
.iv__note{margin:.9rem 0 0;font-size:.88rem;color:var(--fg-3)}
.iv__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:clamp(1.6rem,1rem + 1.6vw,2.6rem)}
.iv__video::cue{font-family:var(--ec-font-body);font-size:1.05em;background:rgba(8,8,8,.72);color:#F0EEE5}
/* Hochkant-Video auf dem Handy: ganzes Bild, nichts wird beschnitten */
@media (max-width:700px){
  .iv__player.is-portrait .iv__frame{aspect-ratio:9/16;max-height:78svh;margin-inline:auto}
  .iv__play{padding:.45rem 1.1rem .45rem .45rem;font-size:.88rem}
  .iv__play-i{width:48px;height:48px}
  .iv__time--d,.iv__btn[data-iv-mute]{display:none}
  .iv__cta .btn{flex:1 1 100%}
}

/* ---------- 03 Referenzleiste ---------- */
.proof{border-block:1px solid var(--line);background:var(--bg)}
.proof__wrap{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:1rem clamp(1.5rem,1rem + 3vw,4rem);align-items:center;padding-block:clamp(1.4rem,1rem + 1.4vw,2.2rem)}
.proof__k{margin:0;font:var(--ec-label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);font-weight:500;line-height:1.5}
.proof__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.proof__list li+li .proof__item{border-left:1px solid var(--line)}
.proof__item{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;align-items:baseline;padding:.4rem clamp(.8rem,.5rem + 1.2vw,1.8rem);color:inherit}
.proof__list li:first-child .proof__item{padding-left:0}
.proof__nr{grid-row:1/span 2;font:var(--ec-label);color:var(--ec-accent);letter-spacing:.14em}
.proof__name{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.35rem,1rem + 1vw,2rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg);transition:transform .5s var(--ease-out)}
.proof__fact{font:var(--ec-label);letter-spacing:.08em;color:var(--fg-2)}
.proof__src{grid-column:2;margin:0;font-size:.74rem;color:var(--fg-3)}
@media (hover:hover) and (pointer:fine){.proof__item:hover .proof__name{transform:translateX(6px)}}
@media (max-width:900px){
  .proof__wrap{grid-template-columns:1fr}
  .proof__list{grid-template-columns:1fr}
  .proof__list li+li .proof__item{border-left:0;border-top:1px solid var(--line)}
  .proof__item{padding:.85rem 0}
  .proof__src{grid-column:1}
}

/* ---------- 04 Fallstudie: Aufschlüsselung als Rechnung, echtes Bild ---------- */
.cs__label span{color:var(--fg-2)}
.cs__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.cs__copy h2{margin:0 0 1.2rem;font-size:clamp(2.1rem,1.2rem + 2.7vw,4rem)}
.cs__copy .lead{margin:0}
.cs__rows{margin:clamp(1.8rem,1.2rem + 1.6vw,2.8rem) 0 0;border-top:1px solid var(--line-2)}
.cs__row{display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:.4rem 1.4rem;align-items:baseline;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.cs__area{font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ec-accent)}
.cs__calc{color:var(--fg)}
.cs__unit{color:var(--fg-2)}
.cs__sum{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(1.8rem,1.2rem + 1.5vw,2.8rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg);font-variant-numeric:lining-nums proportional-nums;text-align:right}
.cs__row--total{border-bottom:0}
.cs__row--total .cs__calc{color:var(--fg-2);font-size:.9rem}
.cs__row--total .cs__sum{color:var(--ec-accent)}
.cs__note{margin:1.2rem 0 0;max-width:62ch;font-size:.84rem;line-height:1.55;color:var(--fg-3)}
.cs__media{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.cs__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) contrast(1.08) brightness(.8) sepia(.12)}
.cs__media figcaption{position:absolute;left:1rem;bottom:.8rem}
.cs__media .ts{color:var(--fg-2);text-shadow:0 1px 8px rgba(0,0,0,.8)}
@media (max-width:980px){.cs__grid{grid-template-columns:1fr}.cs__media{order:-1}}
@media (max-width:560px){.cs__row{grid-template-columns:1fr auto}.cs__area{grid-column:1/-1}}

/* ---------- Leistungsseiten (V6.3): Standbild aus der 3D-Szene, Ergänzungen, Zeitleiste mit fünf Bereichen ---------- */
.lp-still-sec{padding-top:0}
.lp-still{margin:0;border:1px solid var(--line);background:#080808}
.lp-still picture{display:block;aspect-ratio:21/9;overflow:hidden}
.lp-still img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.32)}
.lp-still figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1.4rem;padding:.9rem 1.1rem;border-top:1px solid var(--line)}
.lp-still .ts{color:var(--fg-3)}
.lp-extra{list-style:none;margin:clamp(1.6rem,1rem + 2vw,3rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.lp-extra__row{display:flex;flex-direction:column;gap:.55rem;padding:clamp(1.2rem,1rem + 1vw,2rem);background:var(--bg)}
.lp-extra__k{font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ec-accent)}
.lp-extra__t{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.5rem,1rem + 1.4vw,2.4rem) * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg)}
.lp-extra__t:hover{color:var(--ec-accent)}
.lp-extra__x{color:var(--fg-2);max-width:46ch}
.lp-svc__row--1 .lp-svc__title{font-size:clamp(2.4rem,1.1rem + 3.4vw,5rem)}   /* fünf Bereiche: erste Zeile betont, aber ohne in die Textspalte zu laufen */
.lp-svc__title{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.lp-scale.is-in .lp-scale__seg:nth-child(4)>i{transition-delay:2.1s;transition-duration:.4s}
.lp-scale.is-in .lp-scale__seg:nth-child(5)>i{transition-delay:2.5s;transition-duration:.4s}
@media (max-width:760px){.lp-extra{grid-template-columns:1fr}.lp-still picture{aspect-ratio:4/5}.lp-still img{transform:scale(1.08)}}

/* ---------- 10 Leistungen (V6.3): lange Bereichsnamen auf dem Handy automatisch trennen statt in den Pfeil laufen lassen ---------- */
@media (max-width:700px){.svc-row__title{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}}

/* ---------- 05 3D: Die Linse (V7: kurz, ein Brand-Profil) ---------- */
.lx{position:relative;height:220svh;background:#080808}
.lx__stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.lx__visual{position:absolute;inset:0}
.lx__poster,.lx__canvas,.lx__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lx__canvas{opacity:0;transition:opacity .8s ease}
.lx.is-3d .lx__canvas{opacity:1}
.lx.is-3d .lx__poster{opacity:0;transition:opacity .8s ease}
.lx__vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 75% at 50% 50%,rgba(8,8,8,0) 55%,rgba(8,8,8,.7) 100%),linear-gradient(180deg,rgba(8,8,8,.55) 0%,rgba(8,8,8,0) 16%,rgba(8,8,8,0) 72%,rgba(8,8,8,.8) 100%)}
.lx__grain{position:absolute;inset:-50%;opacity:.06;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lx__still{display:none}
/* Statisch: ohne WebGL, ohne JavaScript, bei „Bewegung reduzieren“ oder wenn das Modell nicht lädt */
.lx.is-static{height:auto}
.lx.is-static .lx__stage{position:relative;height:auto;overflow:visible}
.lx.is-static .lx__visual{display:none}
.lx.is-static .lx__still{display:block;aspect-ratio:16/9;max-height:90svh;overflow:hidden}
.lx.is-static .lx__still img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  .lx{height:190svh}
  .lx.is-static .lx__still{aspect-ratio:4/5}
}

/* ---------- 06 Referenzen als Composition ---------- */
.aec{position:relative;padding-top:clamp(4rem,2.5rem + 5vw,8rem);border-top:1px solid var(--line)}
.aec__head{max-width:980px;margin-bottom:clamp(1.5rem,1rem + 2vw,3rem)}
.aec__head .lead{margin-bottom:0}
.aec__track{position:relative}
.aec__stage{position:relative}
.aec__comp{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);gap:clamp(1.5rem,1rem + 2.6vw,4rem);align-items:center}
.aec__viewer{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050505;border:1px solid var(--line)}
.aec__view{position:absolute;inset:0;margin:0}
.aec__view img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.04)}
.aec__tc{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:.7rem .9rem;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);background:linear-gradient(0deg,rgba(5,5,5,.7),rgba(5,5,5,0))}
.aec__corners{position:absolute;inset:.8rem;pointer-events:none;background:
  linear-gradient(var(--ec-accent-line),var(--ec-accent-line)) 0 0/18px 1px no-repeat,linear-gradient(var(--ec-accent-line),var(--ec-accent-line)) 0 0/1px 18px no-repeat,
  linear-gradient(var(--ec-accent-line),var(--ec-accent-line)) 100% 0/18px 1px no-repeat,linear-gradient(var(--ec-accent-line),var(--ec-accent-line)) 100% 0/1px 18px no-repeat}
.aec__metas{position:relative}
.aec__meta+.aec__meta{margin-top:2.6rem}
.aec__kicker{display:flex;gap:.8rem;margin:0 0 .8rem;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.aec__kicker span{color:var(--ec-accent)}
.aec__title{margin:0 0 .7rem;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2.2rem,1.2rem + 2.8vw,4.4rem) * var(--ec-hs));line-height:var(--ec-head-leading)}
.aec__sub{margin:0 0 1rem;max-width:40ch;color:var(--fg-2)}
.aec__facts{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0 0 .6rem;font:var(--ec-label);letter-spacing:.08em;color:var(--fg-3)}
.aec__facts b{color:var(--fg);font-weight:500}
.aec__tlwrap{margin-top:clamp(1rem,.6rem + 1.4vw,2rem)}
.aec__tl{position:relative;overflow:hidden;border:1px solid var(--line-2);background:#0A0A09;font:var(--ec-label)}
.aec__ruler{position:relative;height:22px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,rgba(240,238,229,.2) 0 1px,transparent 1px 2.5%) 0 100%/100% 6px no-repeat}
.aec__ruler span{position:absolute;top:4px;padding-left:5px;font-size:.58rem;color:var(--fg-3)}
.aec__layer{position:relative;height:30px;border-bottom:1px solid var(--line)}
.aec__layer:last-child{border-bottom:0}
.aec__lname{position:absolute;left:calc(var(--s) + .6rem);top:50%;transform:translateY(-50%);z-index:1;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);white-space:nowrap;pointer-events:none}
.aec__bar{position:absolute;left:var(--s);right:0;top:5px;bottom:5px;border-radius:2px;overflow:hidden}
.aec__bar i{display:block;height:100%;background:#2C2B21;border:1px solid rgba(173,169,134,.28);border-radius:2px;transform-origin:0 50%}
.aec__layer.is-active .aec__bar i{background:#4A4934;border-color:var(--ec-accent)}
.aec__head-track{position:absolute;inset:0;pointer-events:none;transform:translateX(calc(var(--ph,0) * 100%))}
.aec__playhead{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--ec-accent)}
.aec__playhead i{position:absolute;top:0;left:-6px;width:13px;height:15px;background:var(--ec-accent);clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
/* Composition-Modus (refscomp.js): feste Bühne, eine Ebene nach der anderen */
.aec.is-comp .aec__track{height:260svh}
.aec.is-comp .aec__stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--header-h)}
.aec.is-comp .aec__view{opacity:0;clip-path:inset(0 0 0 100%);transition:clip-path .8s var(--ease-film),opacity .01s linear .8s}
.aec.is-comp .aec__view.is-on{opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease-film),opacity 0s}
.aec.is-comp .aec__view.is-under{opacity:1;clip-path:inset(0 0 0 0);transition:none}
.aec.is-comp .aec__metas{display:grid}
.aec.is-comp .aec__meta{grid-area:1/1;margin:0;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .6s var(--ease-out);pointer-events:none}
.aec.is-comp .aec__meta.is-on{opacity:1;transform:none;pointer-events:auto}
.aec.is-comp .aec__bar i{transform:scaleX(0);transition:transform .7s var(--ease-film)}
.aec.is-comp .aec__layer.is-in .aec__bar i{transform:scaleX(1)}
.aec.is-comp .aec__lname{opacity:0;transition:opacity .4s ease .2s}
.aec.is-comp .aec__layer.is-in .aec__lname{opacity:1}
.aec:not(.is-comp) .aec__view{position:relative}
.aec:not(.is-comp) .aec__viewer{aspect-ratio:auto;display:grid;gap:1px;background:var(--line);border:0}
.aec:not(.is-comp) .aec__view img{aspect-ratio:16/9}
.aec:not(.is-comp) .aec__tlwrap{display:none}
@media (max-width:900px){
  .aec__comp{grid-template-columns:1fr;gap:1rem}
  .aec.is-comp .aec__track{height:230svh}
  .aec.is-comp .aec__stage{justify-content:flex-start;padding-top:calc(var(--header-h) + 1rem)}
  .aec__title{font-size:calc(clamp(2rem,1.2rem + 5vw,2.8rem) * var(--ec-hs));margin-bottom:.4rem}
  .aec__sub{font-size:.92rem;margin-bottom:.6rem}
  .aec__kicker{margin-bottom:.5rem}
  .aec__layer{height:26px}
  .aec__tc span:last-child{display:none}
}
@media (max-width:900px) and (max-height:700px){.aec__sub{display:none}}

/* ---------- 07 Razor-Tool in der Schnitt-Timeline ---------- */
.nle__tool{display:none;align-items:center;gap:.45rem;color:var(--fg-2)}
.nle__tool i{width:6px;height:6px;border-radius:50%;background:var(--ec-accent)}
.nle__razor{position:absolute;top:28px;bottom:0;left:0;width:1px;background:var(--ec-accent);opacity:0;pointer-events:none;transform:translateX(var(--rx,0px));box-shadow:0 0 10px rgba(173,169,134,.55)}
.nle__razor::before{content:"";position:absolute;top:-4px;left:-4px;width:9px;height:9px;border:1px solid var(--ec-accent);border-radius:50%;background:#0A0A09}
.sys__hint{display:none;margin:1rem 0 0;font-size:.86rem;color:var(--fg-3)}
@media (hover:hover) and (pointer:fine){
  .nle__tool{display:inline-flex}
  .sys__hint{display:block}
  .nle__area.is-razor{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23F4F2EE' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M6 22l9.5-9.5M15.5 12.5l6-6 2 2-6 6z'/%3E%3Ccircle cx='5' cy='23' r='2.4'/%3E%3C/g%3E%3C/svg%3E") 5 23,crosshair}
  .nle__area.is-razor .nle__razor{opacity:1}
}
.nle__clip.is-cut{overflow:visible;background:transparent!important;border-color:transparent!important}
.nle__half{position:absolute;top:-1px;bottom:-1px;border-radius:3px;border:1px solid rgba(240,238,229,.2);background:inherit;display:flex;align-items:center;padding:0 .6rem;overflow:hidden;transition:transform .45s var(--ease-out)}
.nle__half--l{left:-1px;transform:translateX(-3px)}
.nle__half--r{right:-1px;justify-content:flex-end;transform:translateX(3px)}
.nle__clip.is-joined .nle__half{transform:none}
.nle__clip.is-pick{box-shadow:0 0 0 1px var(--ec-accent),0 0 18px rgba(173,169,134,.35);opacity:1}
.sys__step.is-pick{opacity:1!important}
.sys__step.is-pick h3{color:var(--ec-accent)}
.sys__step.is-pick{border-top-color:var(--ec-accent)}

/* ---------- 08 Color Grade ---------- */
.grade{border-top:1px solid var(--line)}
.grade__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,1rem + 4vw,6rem);align-items:center}
.grade__copy h2{font-size:clamp(2.4rem,1.2rem + 3.4vw,5rem)}
.grade__looks{display:inline-flex;margin-top:1.4rem;border:1px solid var(--line-2);border-radius:999px;padding:4px}
.grade__look{min-height:44px;padding:.55rem 1.3rem;border:0;border-radius:999px;background:transparent;color:var(--fg-2);font:var(--ec-label-weight) semi-expanded .72rem/1 var(--ec-font-label);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.grade__look[aria-checked="true"]{background:var(--fg);color:var(--ink)}
.grade__desc{margin:1.1rem 0 0;min-height:3em;max-width:40ch;color:var(--fg-2)}
.grade__wheels{display:grid;gap:.7rem;margin-top:1.4rem;max-width:26rem}
.grade__wheels[hidden]{display:none}
.grade__wheels label{display:grid;grid-template-columns:5rem 1fr;align-items:center;gap:1rem;font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.grade__wheels input{width:100%;accent-color:var(--ec-accent);height:28px}
.grade__view{position:relative;margin:0;aspect-ratio:4/5;max-height:82svh;overflow:hidden;background:#050505;justify-self:center;width:100%}
.grade__view img,.grade__view canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.grade__view canvas{opacity:0;transition:opacity .4s ease}
.grade__view.is-live canvas{opacity:1}
.grade__hud{position:absolute;left:1rem;right:1rem;bottom:.9rem;display:flex;justify-content:space-between;font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);text-shadow:0 1px 6px rgba(0,0,0,.7)}
@media (max-width:900px){
  .grade__grid{grid-template-columns:1fr}
  .grade__view{aspect-ratio:4/5;max-height:70svh}
  .grade__looks{display:flex;width:100%}
  .grade__look{flex:1;padding-inline:.4rem}
}

/* ---------- 09 Gründerstory: Focus Pull ---------- */
.story__lead{margin-bottom:clamp(2rem,1.2rem + 3vw,4.5rem)}
.story__h{margin:0;max-width:18ch;font-size:clamp(2.6rem,1.2rem + 4.6vw,6.8rem);line-height:.88}
.story__sub{margin:0 0 1rem;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);line-height:1.15;color:var(--fg)}
.story__q{margin-top:clamp(4rem,2.5rem + 5vw,8rem)}
.story__q .idq{margin-bottom:0}
.story__fig[data-focus] img{filter:blur(calc(var(--fp,0) * 14px)) saturate(.8) contrast(1.05);transform:scale(calc(1.03 + var(--fp,0) * .04));will-change:filter}
.story__fig--b[data-focus] img{filter:blur(calc(var(--fp,0) * 14px)) grayscale(1) contrast(1.1) brightness(.88)}
@media (prefers-reduced-motion:reduce){.story__fig[data-focus] img{filter:none;transform:none}}

/* ---------- 10 Leistungen: Zusatzzeile ---------- */
.svc__extra{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:1.2rem 0 0;font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.svc__extra .textlink{font:500 .95rem/1.2 var(--ec-font-body);letter-spacing:0;text-transform:none}

@media (prefers-reduced-motion:reduce){
  .aec.is-comp .aec__view,.aec.is-comp .aec__meta,.aec.is-comp .aec__bar i{transition:none}
}

/* ---------- Fallstudie (eigene Seite) ---------- */
.fs-hero__h{font-size:clamp(2.4rem,1.2rem + 3.6vw,5.2rem);max-width:20ch}
.fs-hero__num{display:block;font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(1.9em * var(--ec-hs-num));line-height:var(--ec-head-leading);color:var(--fg)}
.fs-grid{align-items:center}
.fs-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,1rem + 3vw,4rem)}
.fs-part{padding-top:1.2rem;border-top:1px solid var(--line-2)}
.fs-part__k{margin:0;font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ec-accent)}
.fs-part__sum{margin:.8rem 0 .3rem;font-size:calc(clamp(3rem,1.6rem + 4vw,5.6rem) * var(--ec-hs-sub));line-height:.86}
.fs-part__calc{margin:0 0 1.4rem;color:var(--fg-2)}
.fs-part__dl{display:grid;grid-template-columns:8rem 1fr;gap:.6rem 1.2rem;margin:0;font-size:.95rem}
.fs-part__dl dt{font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);padding-top:.2em}
.fs-part__dl dd{margin:0;color:var(--fg)}
.fs-part__dl ul{margin:0;padding:0;list-style:none;display:grid;gap:.25rem}
.fs-sum{margin-top:clamp(2rem,1.4rem + 2vw,3rem)}
@media (max-width:900px){.fs-parts{grid-template-columns:1fr}.fs-part__dl{grid-template-columns:1fr}}


/* ==== v7.css ==== */
/* ==========================================================================
   Master V7 „Conversion First“ (28.10.2026): kürzere Startseite.
   Fallstudie mit konkretem Beitrag, Einwandvorwegnahme, kompakte Gründerstory mit Color Grade als kleinem
   Element, Referenzen auf dem Handy als Liste, kurze Linsenanimation. Lädt nach v6.css.
   ========================================================================== */

/* ---------- Fallstudie: konkreter Beitrag ---------- */
.cs__contrib{display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:baseline;margin:1.4rem 0 0;max-width:60ch;color:var(--fg)}
.cs__contrib span{font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ec-accent)}

/* ---------- Referenzen: Link statt zweitem CTA ---------- */
.aec__all{margin:1.2rem 0 0}

/* ---------- Einwandvorwegnahme ---------- */
.obj{border-top:1px solid var(--line)}
.obj__k{margin-bottom:clamp(1.6rem,1rem + 2vw,3rem)}
.obj__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,1rem + 4vw,6rem)}
.obj__item{position:relative;padding-top:clamp(1.2rem,1rem + .8vw,1.8rem)}
.obj__item::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2)}
.obj__item::after{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--ec-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease-out) .15s}
.obj__item.is-in::after{transform:scaleX(1)}
.obj__nr{display:block;margin-bottom:1rem;font:var(--ec-label);letter-spacing:.2em;color:var(--ec-accent)}
.obj__h{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2.2rem,1.1rem + 3.1vw,4.6rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg);text-wrap:balance}
.obj__h em{font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:none;letter-spacing:-.01em;color:var(--ec-accent)}
.obj__x{margin:1.1rem 0 0;max-width:40ch;font-size:clamp(1.05rem,.95rem + .35vw,1.3rem);line-height:1.45;color:var(--fg-2)}
@media (prefers-reduced-motion:reduce){.obj__item::after{transform:none;transition:none}}
@media (max-width:900px){.obj__list{grid-template-columns:1fr}}

/* ---------- Gründerstory kompakt (Color Grade als kleines Element) ---------- */
.story--v7{border-top:1px solid var(--line)}
.story7{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:1fr auto;column-gap:clamp(2rem,1rem + 4vw,6rem);row-gap:2rem;align-items:start}
.story7__main{grid-row:1/span 2;max-height:86svh}
.story7__main img,.story7__main canvas{filter:blur(calc(var(--fp,0) * 10px));transform:scale(calc(1.02 + var(--fp,0) * .03));will-change:filter}
.story7__cap{position:absolute;left:1rem;right:1rem;bottom:.9rem;display:flex;justify-content:space-between;gap:1rem;color:var(--fg);text-shadow:0 1px 6px rgba(0,0,0,.75)}
.story7__cap .ts{color:var(--fg)}
.story7__text{align-self:end}
.story7 .story__h{max-width:16ch;font-size:clamp(2.4rem,1.2rem + 3.4vw,5.2rem)}
.story7__line{margin:1.2rem 0 0;max-width:36ch;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);line-height:1.18;color:var(--fg)}
.story7__line--b{margin-top:.8rem;font-family:var(--ec-font-body);font-style:normal;font-size:clamp(1rem,.95rem + .3vw,1.2rem);line-height:1.5;color:var(--fg-2)}
.story7__grade{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:1.6rem 0 1.4rem}
.story7__grade .grade__looks{margin-top:0}
.story7__gk{font:var(--ec-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.story7__side{position:relative;margin:0;justify-self:end;align-self:end;width:min(100%,15rem);aspect-ratio:4/5;overflow:hidden;background:#050505}
.story7__side img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08) brightness(.9) blur(calc(var(--fp,0) * 10px))}
.story7__side figcaption{position:absolute;left:.9rem;bottom:.8rem;text-shadow:0 1px 6px rgba(0,0,0,.75)}
.story7__side .ts{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.story7__main img,.story7__main canvas,.story7__side img{filter:none;transform:none}.story7__side img{filter:grayscale(1)}}
@media (max-width:900px){
  .story7{grid-template-columns:1fr;grid-template-rows:auto}
  .story7__main{grid-row:auto;aspect-ratio:4/5;max-height:none}
  .story7__text{align-self:start}
  .story7__side{display:none}
}

/* ---------- Referenzen: Liste auf dem Handy und bei „Bewegung reduzieren“ (V7, Abschnitt 6) ----------
   Bild und Text jedes Projekts stehen zusammen (Bild, Name, Beschreibung, Kennzahlen, Case-Study-Link), alle drei
   Projekte immer sichtbar. Die Container werden aufgelöst (display: contents) und per order verschränkt. */
.aec:not(.is-comp) .aec__comp{display:flex;flex-direction:column;gap:0}
.aec:not(.is-comp) .aec__viewer,.aec:not(.is-comp) .aec__metas{display:contents}
.aec:not(.is-comp) .aec__corners{display:none}
.aec:not(.is-comp) .aec__view{position:relative;border:1px solid var(--line);background:#050505}
.aec:not(.is-comp) .aec__view img{display:block;aspect-ratio:16/9;height:auto}
.aec:not(.is-comp) .aec__view:nth-child(1){order:1}
.aec:not(.is-comp) .aec__meta:nth-child(1){order:2}
.aec:not(.is-comp) .aec__view:nth-child(2){order:3}
.aec:not(.is-comp) .aec__meta:nth-child(2){order:4}
.aec:not(.is-comp) .aec__view:nth-child(3){order:5}
.aec:not(.is-comp) .aec__meta:nth-child(3){order:6}
.aec:not(.is-comp) .aec__meta{margin:1.1rem 0 clamp(2.6rem,2rem + 3vw,4.5rem)}
.aec:not(.is-comp) .aec__meta+.aec__meta{margin-top:1.1rem}
.aec:not(.is-comp) .aec__meta:nth-child(3){margin-bottom:0}
.aec:not(.is-comp) .aec__link{display:inline-flex;min-height:44px;align-items:center}
/* Desktop: Composition mit kürzerer Scrollstrecke (V7) */
.aec.is-comp .aec__track{height:220svh}

/* ---------- Kompaktere Startseite (V7, Abschnitt 3): weniger Leerraum ohne gestalterischen Zweck ----------
   Gilt nur für Abschnitte mit .section auf der Startseite; der Abschluss (.finale) ist nicht betroffen. */
.page-home main > .section{padding-block:clamp(3.5rem,2.2rem + 4.2vw,7rem)}
.page-home .iv{padding-top:clamp(3rem,2rem + 3.4vw,6rem)}
.page-home .iv__frame{max-width:1080px;margin-inline:auto}
.page-home .aec{padding-top:clamp(3.5rem,2.2rem + 4.2vw,7rem)}
.aec.is-comp .aec__track{height:180svh}
.page-home .svc-row{padding:clamp(1.05rem,.8rem + .9vw,1.7rem) 0}
.page-home .svc-row__title{font-size:clamp(1.7rem,1rem + 1.9vw,3.1rem)}
.page-home .svc__head{margin-bottom:clamp(1.2rem,.8rem + 1.6vw,2.4rem)}
.page-home .inline-cta{margin-top:clamp(1.6rem,1rem + 2vw,3rem)}
.story7__main{max-height:74svh}
@media (max-width:900px){.story7__main{max-height:70svh;aspect-ratio:auto;height:70svh}}
.lx{height:200svh}
@media (max-width:900px){
  .lx{height:175svh}
  .page-home .svc-row__role{display:none}
  .page-home .svc-row__claim{font-size:.95rem}
  .story7__main{max-height:58svh;height:58svh}
}


/* ==== v8.css ==== */
/* ==========================================================================
   MASTER V8 „High-End Visual Brand Experience“ (28.10.2026)
   Lädt nach v7.css. Weniger Text, mehr Bild: Buchungsseite mit direktem Kalender, Startseite mit Bildflächen,
   neue Linsen-Komposition (drei Medienebenen). Der Abschluss (.finale) wird hier nicht angefasst.
   ========================================================================== */

/* ---------------------------------------------------------------- Buchung -- */
.bk8{padding:calc(var(--header-h) + clamp(1.2rem,.8rem + 2vw,3rem)) 0 clamp(3.5rem,2rem + 5vw,7rem)}
.bk8__wrap{max-width:1180px}
.bk8 .crumbs{margin-bottom:clamp(1.4rem,1rem + 1.6vw,2.4rem)}
.bk8__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:.9rem clamp(2rem,1rem + 4vw,5rem);align-items:end;margin-bottom:clamp(1.6rem,1.1rem + 1.8vw,2.8rem)}
.bk8__head .eyebrow{grid-column:1/-1;margin:0}
/* V13: „Strategiegespräch“ ist ein langes Einzelwort (11,6 Geviert in normaler Breite); die Größe passt es in seine Spalte ein */
.bk8 h1{margin:0;font-stretch:var(--ec-head-stretch-long);font-size:min(calc(clamp(2.9rem,1.2rem + 6vw,6.6rem) * var(--ec-hs-long)),calc((min(100vw,1180px) - 2 * var(--gutter)) * .52 / 11.8));line-height:var(--ec-head-leading);max-width:none}
.bk8__lead{margin:0;max-width:40ch;font-size:var(--fs-lead);line-height:1.45;color:var(--fg-2)}
.bk8__meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem 0;margin:.4rem 0 0;padding:0;list-style:none;font:var(--ec-label);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
.bk8__meta li+li::before{content:"·";margin:0 .85em;color:var(--fg-3)}
@media (max-width:860px){
  .bk8__head{grid-template-columns:minmax(0,1fr)}
  .bk8 h1{font-size:min(calc(min(10.6vw,4.6rem) * var(--ec-hs-long)),calc((100vw - 2 * var(--gutter)) / 11.8))}
  .bk8__meta{font-size:.68rem;letter-spacing:.1em}
  .bk8__meta li+li::before{margin:0 .55em}
}
.bk8__cal.booking{padding:0;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-2)}
.bk8__gate{position:relative;display:grid;justify-items:center;align-content:center;gap:1.1rem;min-height:min(560px,70svh);padding:clamp(2rem,1.4rem + 3vw,4rem) clamp(1.2rem,1rem + 2vw,3rem);border:0;border-radius:0;background:
  radial-gradient(120% 90% at 50% 0%,rgba(240,238,229,.06),transparent 60%),
  repeating-linear-gradient(90deg,transparent 0 calc(100%/7 - 1px),rgba(240,238,229,.035) calc(100%/7 - 1px) calc(100%/7)),
  var(--bg-2);text-align:center}
.bk8__gate-i{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--line-2);border-radius:50%;color:var(--fg)}
.bk8__gate-i svg{width:30px;height:30px}
.bk8__gate-k{margin:0;font:var(--ec-label);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3)}
.bk8__gate .btn{min-height:64px;padding-inline:2rem}
.bk8__gate-p{max-width:52ch;margin:0;font-size:.86rem;line-height:1.55;color:var(--fg-3)}
.bk8__gate-p a,.bk8__direct{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.bk8__direct{display:inline-flex;align-items:center;min-height:44px;font-size:.88rem}
@media (hover:hover) and (pointer:fine){.bk8__direct:hover,.bk8__gate-p a:hover{color:var(--fg)}}
.bk8__gate .booking__remember{justify-content:center}
.bk8__frame{position:relative;background:var(--bg-2)}
.bk8__frame.is-loading{min-height:720px}
.bk8__frame .booking__loading{position:absolute;inset:0 0 auto;margin:0;text-align:center;padding:3rem 1rem}
.bk8__frame:not(.is-loading) .booking__loading{display:none}
.bk8__widget iframe{display:block;border:0}
.bk8__setup{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.5rem clamp(2rem,1rem + 4vw,5rem);padding:clamp(1.5rem,1rem + 2.4vw,3.2rem)}
.bk8__setup-k{display:flex;gap:.7rem;align-items:center;margin:0;font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
.bk8__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ec-accent);box-shadow:0 0 0 4px rgba(173,169,134,.18)}
.bk8__setup-p{margin:.9rem 0 0;max-width:38ch;font-size:var(--fs-small);line-height:1.55;color:var(--fg-2)}
.bk8__setup-p a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.bk8__setup .booking__form .field:first-child{margin-top:0}
.bk8__setup .booking__actions .btn{flex:0 1 auto;min-height:58px}
@media (max-width:860px){.bk8__setup{grid-template-columns:minmax(0,1fr)}}
.bk8__cal .booking__done{padding:clamp(1.8rem,1.2rem + 3vw,4rem)}
.bk8__alt{margin:1.2rem 0 0;font-size:var(--fs-small);color:var(--fg-3)}
.bk8__alt .textlink{margin-left:.35rem}
@media (max-width:560px){
  .bk8__gate{min-height:0;padding:2.2rem 1.1rem}
  .bk8__gate .btn{width:100%}
  .bk8__frame.is-loading{min-height:560px}
  .bk8__setup{padding:1.4rem 1.1rem 1.6rem}
  .bk8__setup .booking__actions .btn{flex:1 1 100%}
}

/* ======================================================== Startseite V8 == */
.page-home8 main > .section{padding-block:clamp(3rem,2rem + 3.6vw,6.2rem)}
.page-home8 :is(.cs8,.ob8,.sv8,.bf8){border-top:1px solid var(--line)}

/* ---------- 02 Video: groß, fast randlos ---------- */
.page-home8 .iv8{padding-top:clamp(2.6rem,1.8rem + 3vw,5rem)}
.iv8 .iv__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 2rem;max-width:none;margin-bottom:clamp(1.1rem,.8rem + 1.2vw,2rem)}
.iv8 .iv__head .eyebrow{order:2;margin:0}
.iv8 .iv__title{font-size:calc(clamp(2.1rem,1.2rem + 3.4vw,5.2rem) * var(--ec-hs-long));font-stretch:var(--ec-head-stretch-long)}
.page-home8 .iv8 .iv__frame{max-width:none}
.iv8 .iv__still{filter:grayscale(.35) contrast(1.08) brightness(.62) sepia(.1)}

/* ---------- 03 Fallstudie ---------- */
.cs8__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,1rem + 4vw,5.5rem);align-items:center}
.cs8__copy{container-type:inline-size;min-width:0}
.cs8__copy .eyebrow{margin-bottom:.4rem}
.cs8__number.cs__number{font-size:min(29cqi,13.5rem)}
.cs8__label{margin:.6rem 0 0;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.35rem,1.1rem + .9vw,2rem);line-height:1.1;color:var(--fg)}
.cs8__h{margin:clamp(1.4rem,1rem + 1.4vw,2.4rem) 0 0;max-width:15ch;font-size:clamp(1.9rem,1.2rem + 2vw,3.2rem);line-height:.92}
.cs8__rows{list-style:none;margin:clamp(1.2rem,1rem + .8vw,1.8rem) 0 0;padding:0;border-top:1px solid var(--line-2)}
.cs8__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--fg)}
.cs8__calc span{color:var(--fg-3)}
.cs8__sum{font:var(--ec-label);font-size:.8rem;letter-spacing:.08em;color:var(--fg);white-space:nowrap}
.cs8__contrib{margin:1.1rem 0 0;max-width:52ch;font-size:.95rem;line-height:1.5;color:var(--fg)}
.cs8__contrib span{display:block;margin-bottom:.3rem;font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ec-accent)}
.cs8__note{margin:.6rem 0 1.2rem;font-size:.82rem;color:var(--fg-3)}
.cs8__media{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:#050505;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.cs8__media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.04)}
.cs8__media figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:1rem;padding:2.4rem 1rem .8rem;background:linear-gradient(0deg,rgba(5,5,5,.85),rgba(5,5,5,0))}
.cs8__media .ts{color:var(--fg)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:901px){
    .cs8__grid{perspective:1600px}
    .cs8__media{animation:cs8tilt linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    @keyframes cs8tilt{from{transform:rotateY(-14deg) rotateX(6deg) translateZ(-60px);opacity:.4}to{transform:none;opacity:1}}
  }
}
@media (max-width:900px){
  .cs8__grid{grid-template-columns:minmax(0,1fr)}
  .cs8__media{order:-1;aspect-ratio:16/11}
}

/* ---------- 04 Linse V8: Überschrift als echtes HTML über der 3D-Bühne ---------- */
.lx--v8 .lx__copy{position:absolute;left:0;right:0;bottom:clamp(2rem,1.2rem + 3vw,4.5rem);z-index:3;pointer-events:none}
.lx__h{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(3rem,1rem + 6.6vw,8.6rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg);text-shadow:0 10px 50px rgba(0,0,0,.65)}
.lx__h em{font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:none;letter-spacing:-.015em;color:var(--fg)}
.lx__ln{display:block;overflow:hidden;padding-bottom:.06em}
.lx__ln>span{display:inline-block;transform:translateY(calc((1 - var(--lxr,1)) * 108%));will-change:transform}
.lx__ln+.lx__ln>span{transform:translateY(calc((1 - var(--lxr2,var(--lxr,1))) * 108%))}
.lx__sub{margin:clamp(.8rem,.6rem + .6vw,1.3rem) 0 0;overflow:hidden;font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);color:var(--fg-2);text-shadow:0 4px 24px rgba(0,0,0,.8)}
.lx__sub>span{display:inline-block;opacity:var(--lxs,1);transform:translateY(calc((1 - var(--lxs,1)) * 40%))}
.lx--v8 .lx__vignette{background:radial-gradient(ellipse 85% 80% at 55% 42%,rgba(8,8,8,0) 55%,rgba(8,8,8,.7) 100%),linear-gradient(180deg,rgba(8,8,8,.5) 0%,rgba(8,8,8,0) 14%,rgba(8,8,8,0) 58%,rgba(8,8,8,.86) 100%)}
.lx--v8.is-static .lx__stage{display:grid}
.lx--v8.is-static .lx__still,.lx--v8.is-static .lx__copy{grid-area:1/1}
.lx--v8.is-static .lx__copy{position:relative;align-self:end;bottom:auto;padding-bottom:clamp(1.6rem,1rem + 2.4vw,3.6rem)}
.lx--v8.is-static .lx__still{position:relative}
.lx--v8.is-static .lx__still::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,0) 50%,rgba(8,8,8,.85) 100%)}
@media (max-width:900px){
  .lx--v8 .lx__copy{bottom:calc(5.6rem + env(safe-area-inset-bottom,0px))}
  .lx__h{font-size:calc(min(15.4vw,5.4rem) * var(--ec-hs))}
  .lx--v8.is-static .lx__still{aspect-ratio:9/14}
}

/* ---------- 05 Referenzen: größere Thumbnails, weniger Text ---------- */
.aec8 .aec__head{margin-bottom:clamp(1rem,.8rem + 1vw,2rem)}
.aec8 .aec__head h2{margin:0}
.aec8 .aec__comp{grid-template-columns:minmax(0,2fr) minmax(0,.72fr);max-width:1600px}
.aec8 .aec__tlwrap{max-width:1600px}
.aec8 .aec__title{font-size:clamp(2rem,1.1rem + 2.4vw,3.8rem)}
.aec8 .aec__facts{font-size:.8rem;gap:.4rem 1.2rem;margin-bottom:.9rem}
.aec8__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 2rem;margin-top:clamp(1rem,.8rem + 1vw,2rem)}
.aec8__foot .stats__source{margin:0}
.aec8__foot .aec__all{margin:0}
.aec8:not(.is-comp) .aec__comp{align-items:stretch}
.aec8:not(.is-comp) .aec__view{width:100%;border:0;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.aec8:not(.is-comp) .aec__view img{width:100%}
.aec8:not(.is-comp) .aec__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:end}
.aec8:not(.is-comp) .aec__kicker,.aec8:not(.is-comp) .aec__title,.aec8:not(.is-comp) .aec__facts{grid-column:1}
.aec8:not(.is-comp) .aec__link{grid-column:2;grid-row:1/span 3;align-self:end}
@media (max-width:900px){
  .page-home8 .aec8{padding-left:0;padding-right:0}
  .aec8:not(.is-comp) .aec__comp{padding-inline:0}
  .aec8:not(.is-comp) .aec__meta{padding-inline:var(--gutter)}
}

/* ---------- 06 Einwandvorwegnahme: riesige Editorial-Typografie ---------- */
.ob8__k{margin-bottom:clamp(1.4rem,1rem + 1.6vw,2.6rem)}
.ob8__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.4rem,1.6rem + 3.4vw,5.5rem)}
.ob8__h{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(3rem,1rem + 6.6vw,9.2rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg);text-wrap:balance}
.ob8__h em{font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:none;letter-spacing:-.02em;color:var(--ec-accent)}
.ob8__x{display:flex;gap:1rem;align-items:baseline;margin:clamp(.9rem,.7rem + .6vw,1.4rem) 0 0;font-size:clamp(1.05rem,.95rem + .4vw,1.35rem);color:var(--fg-2)}
.ob8__nr{font:var(--ec-label);letter-spacing:.2em;color:var(--ec-accent)}
@media (min-width:901px){
  .ob8__item:nth-child(2){text-align:right}
  .ob8__item:nth-child(2) .ob8__h{margin-left:auto;max-width:19ch}
  .ob8__item:nth-child(2) .ob8__x{justify-content:flex-end}
}
@media (max-width:900px){.ob8__h{font-size:calc(min(13.6vw,5.6rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-long)}}

/* ---------- 07 Leistungen als fünf Bildelemente ---------- */
.sv8__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-bottom:clamp(1.4rem,1rem + 1.6vw,2.6rem)}
.sv8__head .eyebrow{order:2;margin:0}
.sv8__head h2{margin:0}
.sv8__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.8rem,.5rem + 1vw,1.4rem)}
.sv8__card{display:grid;grid-template-rows:auto auto auto 1fr;gap:.35rem;height:100%;color:var(--fg);text-decoration:none}
.sv8__art{position:relative;display:block;aspect-ratio:4/5;margin-bottom:.7rem;overflow:hidden;background:#0B0B0A;border:1px solid var(--line);isolation:isolate}
.sv8__art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.sv8__nr{font:var(--ec-label);letter-spacing:.2em;color:var(--ec-accent)}
.sv8__name{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.2rem,.9rem + .65vw,1.6rem) * var(--ec-hs));line-height:var(--ec-head-leading);hyphens:manual;overflow-wrap:break-word}
.sv8__line{font-size:.9rem;line-height:1.45;color:var(--fg-2)}
@media (hover:hover) and (pointer:fine){
  .sv8__card:hover .sv8__art>img,.sv8__card:hover .sv8__f img,.sv8__card:hover .sv8__phone img{transform:scale(1.05)}
  .sv8__card:hover .sv8__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
}
.sv8__card:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.sv8__art--photo img{filter:grayscale(.2) contrast(1.06) brightness(.92)}
/* 01 Plattformen: drei echte Formate in leichter Perspektive */
.sv8__art--plat{perspective:900px;background:radial-gradient(90% 70% at 70% 20%,rgba(173,169,134,.12),transparent 60%),#0B0B0A}
.sv8__f{position:absolute;display:block;overflow:hidden;border:1px solid rgba(240,238,229,.18);background:#050505;box-shadow:0 24px 40px -20px rgba(0,0,0,.95);transition:transform .9s var(--ease-out)}
.sv8__f i{position:absolute;left:.4rem;bottom:.35rem;font:var(--ec-label);font-size:.55rem;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);text-shadow:0 1px 4px rgba(0,0,0,.9)}
.sv8__f--wide{left:8%;top:9%;width:78%;aspect-ratio:16/9;transform:rotateY(14deg) rotateX(4deg)}
.sv8__f--tall{right:7%;top:36%;width:34%;aspect-ratio:9/16;z-index:2;transform:rotateY(-12deg)}
.sv8__f--sq{left:12%;bottom:8%;width:44%;aspect-ratio:1;z-index:1;transform:rotateY(10deg) rotateX(-4deg)}
@media (hover:hover) and (pointer:fine){.sv8__card:hover .sv8__f{transform:none}}
/* 03 Editing: Standbild mit Schnittspuren und Playhead */
.sv8__art--edit img{filter:contrast(1.05) brightness(.82)}
.sv8__tl{position:absolute;left:8%;right:8%;bottom:7%;height:22%;display:block;border:1px solid rgba(240,238,229,.2);background:rgba(8,8,8,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sv8__tl i{position:absolute;left:var(--a);width:calc(var(--b) - var(--a));height:26%;border:1px solid rgba(173,169,134,.5);background:rgba(74,73,52,.75);border-radius:2px}
.sv8__tl i:nth-child(1){top:16%}
.sv8__tl i:nth-child(2){top:48%;background:rgba(44,43,33,.9);border-color:rgba(240,238,229,.25)}
.sv8__tl i:nth-child(3){top:16%}
.sv8__tl b{position:absolute;top:-8%;bottom:-8%;left:58%;width:1px;background:var(--ec-accent);box-shadow:0 0 8px rgba(173,169,134,.8)}
@media (prefers-reduced-motion:no-preference){.sv8__item.is-in .sv8__tl b{animation:sv8play 4.8s cubic-bezier(.45,0,.2,1) infinite alternate}}
@keyframes sv8play{from{left:8%}to{left:90%}}
/* 04 Planung: Wochenraster mit echten Thumbnails */
.sv8__art--plan{display:grid;place-items:center;background:radial-gradient(80% 60% at 30% 10%,rgba(173,169,134,.1),transparent 60%),#0B0B0A}
.sv8__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:82%;transform:perspective(900px) rotateX(18deg) rotateZ(-4deg)}
.sv8__day{position:relative;display:block;aspect-ratio:1;overflow:hidden;border:1px solid rgba(240,238,229,.12);background:rgba(240,238,229,.03)}
.sv8__day.is-on{border-color:rgba(173,169,134,.6);box-shadow:0 10px 24px -12px rgba(0,0,0,.9)}
.sv8__day img{position:absolute;inset:0}
/* 05 Landingpage: echte Buchungsseite im Telefon */
.sv8__art--phone{display:grid;place-items:center;background:radial-gradient(70% 50% at 50% 30%,rgba(110,108,76,.22),transparent 70%),#0B0B0A}
.sv8__phone{display:block;width:52%;aspect-ratio:9/18.5;overflow:hidden;border:5px solid #1D1C16;border-radius:18px;background:#050505;box-shadow:0 30px 50px -20px rgba(0,0,0,.95),0 0 0 1px rgba(240,238,229,.12);transform:rotate(-4deg)}
.sv8__phone img{object-position:50% 0}
.sv8__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:clamp(1.8rem,1.2rem + 2vw,3rem)}
@media (max-width:1100px){.sv8__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .sv8__list{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .sv8__card{grid-template-columns:34% minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:1rem;row-gap:.3rem;align-items:start}
  .sv8__art{grid-row:1/span 3;margin:0}
  .sv8__nr{padding-top:.3rem}
  .sv8__name{font-size:calc(1.35rem * var(--ec-hs))}
  .sv8__cta .btn{width:100%}
}

/* ---------- 08 Story: ein großes Bild ---------- */
.st8{position:relative;border-top:1px solid var(--line);background:#050505}
.st8__media{position:relative;margin:0;height:min(92svh,62vw);min-height:520px;overflow:hidden}
.st8__media img{width:100%;height:100%;object-fit:cover;object-position:35% 40%;display:block;filter:contrast(1.04) saturate(.9)}
.st8__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,0) 35%,rgba(5,5,5,.78) 78%),linear-gradient(0deg,rgba(5,5,5,.7),rgba(5,5,5,0) 40%)}
.st8__media figcaption{position:absolute;left:var(--gutter);bottom:1rem;z-index:1;color:var(--fg)}
.st8__copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;pointer-events:none}
.st8__copy>*{width:min(100%,34rem);pointer-events:auto}
.st8__copy h2{margin:0;font-size:clamp(2.4rem,1.2rem + 3.6vw,5.4rem);line-height:.9}
.st8__line{margin:1.1rem 0 1.3rem;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.3rem,1.05rem + .8vw,1.85rem);line-height:1.2;color:var(--fg)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .st8__media img{animation:st8push linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes st8push{from{transform:scale(1.12) translateY(-3%)}to{transform:scale(1) translateY(3%)}}
  }
}
@media (max-width:900px){
  .st8__media{height:auto;min-height:0;aspect-ratio:4/5}
  .st8__media img{object-position:28% 50%}
  .st8__media::after{background:linear-gradient(0deg,rgba(5,5,5,1),rgba(5,5,5,0) 45%)}
  .st8__media figcaption{top:1rem;bottom:auto}
  .st8__copy{position:relative;inset:auto;display:block;margin-top:-5.5rem;padding-bottom:clamp(3rem,2rem + 4vw,5rem)}
  .st8__copy>*{width:auto}
  .st8__copy h2{font-size:min(12.6vw,3.6rem)}
}

/* ---------- 09 Fragen (seit 28.10.2026 ohne Blog-Spalte) ---------- */
.bf8__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.4rem clamp(2.4rem,1.4rem + 4vw,6rem);align-items:start}
.bf8 h2{margin:0;font-size:calc(clamp(2.2rem,1.2rem + 2.6vw,4rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-mid)}
.bf8 .faq{margin-top:0}
@media (min-width:901px){.bf8__head{position:sticky;top:calc(var(--header-h) + 2rem)}}
@media (max-width:900px){.bf8__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Kürzere Scrollstrecke (V8): Referenz-Composition und Abstände ---------- */
.aec8.is-comp .aec__track{height:150svh}
.page-home8 .iv8 .iv__frame{max-width:1240px;margin-inline:auto}
.page-home8 .iv8 .iv__head{max-width:1240px;margin-inline:auto}
.page-home8 .ob8{padding-block:clamp(2.6rem,1.8rem + 3vw,5rem)}
.ob8__list{gap:clamp(1.8rem,1.2rem + 2.6vw,4rem)}
.page-home8 .aec8{padding-top:clamp(2.6rem,1.8rem + 3vw,5rem)}


/* ==== v81.css ==== */
/* ==========================================================================
   MASTER UPDATE V8.1 „High-End Motion Design · Stronger Social Proof“ (28.10.2026)
   Lädt nach v8.css. Fallstudie als Auftragsvolumen mit Ziffernrolle, Sales-Cycle-Animation, fünf eigene
   Leistungsanimationen (inkl. Cash-Akzent). Der Abschluss (.finale) wird hier nicht angefasst.
   ========================================================================== */

/* ---------------------------------------------------------- 03 Fallstudie -- */
.cs81{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cs81__top{position:relative;margin-bottom:clamp(1.6rem,1rem + 2vw,3rem)}
.cs81__top .eyebrow{margin-bottom:.2rem}
.cs81__num{position:relative;display:flex;align-items:flex-start;margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);
  font-size:calc(min(19vw,17.5rem) * var(--ec-hs-num));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);font-variant-numeric:lining-nums proportional-nums;isolation:isolate;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.75))}
.od__p{--i:3}
/* Filmisches Licht: warmer Spot hinter der Zahl, feine Olive-Linie darunter */
.cs81__top::before{content:"";position:absolute;left:-10%;top:-30%;width:90%;height:150%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 45% at 42% 55%,rgba(173,169,134,.13),rgba(173,169,134,0) 70%)}
.cs81__digits{display:flex}
.od__d{display:inline-block;height:.86em;overflow:hidden}
.od__s{display:flex;flex-direction:column;transform:translateY(0);will-change:transform}
/* Glyphen: warmes Licht von oben (Verlauf je Zeile) plus ein helles Lichtband, das nach dem Einrollen Ziffer für
   Ziffer von links nach rechts durchläuft (nur in den Ziffern, per background-clip: text) */
.od__s::before,.od__p::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";display:block;white-space:pre;line-height:.86em;
  background:linear-gradient(100deg,rgba(240,238,229,0) 35%,rgba(240,238,229,.95) 50%,rgba(240,238,229,0) 65%) no-repeat,linear-gradient(180deg,#F4F2EA 0%,#F0EEE5 42%,#C4BFAE 78%,#ADA986 100%);
  background-size:320% 100%,100% .86em;background-position:160% 0,0 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.cs81__top.is-in .od__s::before,.cs81__top.is-in .od__p::before{animation:odsweep 1s cubic-bezier(.45,0,.2,1) calc(1.9s + var(--i,3) * 90ms) both}
@keyframes odsweep{from{background-position:160% 0,0 0}to{background-position:-60% 0,0 0}}
.od__p{display:inline-block;height:.86em}
.od__p::before{content:attr(data-l)}
.cs81__top.is-in .od__s{transform:translateY(calc(var(--d) * -.86em));transition:transform 1.9s cubic-bezier(.16,1,.3,1) calc(var(--i) * 85ms)}
.cs81__eur::before{content:attr(data-l)}
.cs81__eur{margin-left:.12em;font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;font-size:.5em;line-height:1.1;color:var(--ec-accent);
  opacity:0;transform:translateY(.25em);transition:opacity .9s ease .9s,transform 1.2s var(--ease-out) .9s}
.cs81__top.is-in .cs81__eur{opacity:1;transform:none}
.cs81__label{display:flex;align-items:center;gap:1rem;margin:clamp(.8rem,.6rem + .6vw,1.3rem) 0 0;font:var(--ec-label);font-size:clamp(.8rem,.7rem + .3vw,1rem);letter-spacing:.42em;text-transform:uppercase;color:var(--fg)}
.cs81__label::before{content:"";width:clamp(2.5rem,1.5rem + 3vw,5rem);height:1px;background:linear-gradient(90deg,var(--ec-accent),rgba(173,169,134,.2));box-shadow:0 0 12px rgba(173,169,134,.6)}
.cs81__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,1rem + 4vw,5.5rem);align-items:center}
/* ohne Bild: Überschrift links, Rechnung, Einordnung, Beitrag und Link rechts */
.cs81__grid--solo{align-items:start}
.cs81__grid--solo .cs81__rows{margin-top:0}
.cs81__h{margin:0;max-width:15ch;font-size:clamp(1.8rem,1.2rem + 1.7vw,3rem);line-height:.92}
.cs81__rows{list-style:none;margin:clamp(1.1rem,.9rem + .7vw,1.6rem) 0 0;padding:0;border-top:1px solid var(--line-2)}
.cs81__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.93rem;color:var(--fg)}
.cs81__calc span{color:var(--fg-3)}
.cs81__sum{font:var(--ec-label);font-size:.8rem;letter-spacing:.08em;white-space:nowrap}
.cs81__row--total{border-bottom-color:rgba(173,169,134,.45)}
.cs81__row--total .cs81__calc{color:var(--fg-2)}
.cs81__row--total .cs81__sum{color:var(--ec-accent)}
.cs81__note{margin:.75rem 0 0;font-size:.82rem;color:var(--fg-3)}
.cs81__contrib{margin:1rem 0 1.1rem;max-width:54ch;font-size:.92rem;line-height:1.5;color:var(--fg-2)}
.cs81__contrib span{display:block;margin-bottom:.3rem;font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ec-accent)}
/* Logo des Kunden auf einer dunklen Fläche: Espresso-Licht, feine Kante, leichte Tiefe (keine Fotos von 3H's) */
.cs81__film{position:relative;margin:0 0 clamp(1rem,.6rem + 1vw,2rem);perspective:1600px}
.cs81__stage{position:relative;display:block;transform-style:preserve-3d}
.cs81__plate{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 70% at 50% 38%,rgba(196,191,174,.16),rgba(196,191,174,0) 70%),linear-gradient(160deg,#1A1914 0%,#0A0A09 55%,#070707 100%);
  border:1px solid rgba(173,169,134,.28);box-shadow:inset 0 1px 0 rgba(240,238,229,.08),0 50px 90px -40px rgba(0,0,0,.95)}
.cs81__plate::before{content:"";position:absolute;inset:7%;border:1px solid rgba(240,238,229,.07);pointer-events:none}
.cs81__plate::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(110deg,rgba(196,191,174,0) 38%,rgba(196,191,174,.16) 50%,rgba(196,191,174,0) 62%) no-repeat;background-size:60% 100%;background-position:-80% 0}
.cs81__logo{display:block;width:44%;height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(196,191,174,.18))}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cs81__stage{animation:cs81tilt linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    .cs81__plate::after{animation:cs81plate linear both;animation-timeline:view();animation-range:entry 10% cover 60%}
    .cs81__logo{animation:cs81logo linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    @keyframes cs81tilt{from{transform:rotateY(-14deg) rotateX(6deg)}to{transform:none}}
    @keyframes cs81plate{from{background-position:-80% 0}to{background-position:180% 0}}
    @keyframes cs81logo{from{transform:translateY(8%) scale(.94);opacity:.4}to{transform:none;opacity:1}}
  }
}
.fs-media--logo{margin:0}
.fs-media--logo .cs81__plate{aspect-ratio:4/3}
@media (prefers-reduced-motion:reduce){
  .od__s{transform:translateY(calc(var(--d) * -.86em))!important;transition:none!important}
  .cs81__eur{opacity:1;transform:none;transition:none}
  .cs81__top.is-in .od__s::before,.cs81__top.is-in .od__p::before{animation:none}
}
@media (max-width:900px){
  .cs81__num{font-size:calc(min(25vw,9rem) * var(--ec-hs-num))}
  .cs81__grid{grid-template-columns:minmax(0,1fr)}
  .cs81__film{order:-1;margin:0 0 1.4rem}
  .cs81__plate{aspect-ratio:16/9}
}

/* ---------------------------------------------------------- 04 Linse V8.1: kürzer ---------- */
.lx--v8{height:160svh}
@media (max-width:900px){.lx--v8{height:150svh}}
.aec8.is-comp .aec__track{height:140svh}

/* ---------------------------------------------------- 06 Einwandvorwegnahme ---------- */
/* --p (0 bis 1) setzt assets/js/motion81.js aus dem Scrollfortschritt; ohne JavaScript: Endzustand */
.ob81__list{gap:clamp(2.2rem,1.4rem + 3vw,4.4rem)}
.ob81__h{font-size:calc(clamp(2.7rem,1rem + 5.4vw,7.6rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-long)}
.ob81__line{display:block;white-space:nowrap}
/* V13: Mona Sans reicht nur von 75 bis 125 %; das lange Wort wird von Expanded auf die Breite der Headline schmaler,
   dazu zieht sich die Laufweite zusammen, damit „lang → kurz“ so deutlich bleibt wie vorher */
.ob81__long{display:inline-block;font-stretch:calc(var(--w0,125%) - (var(--w0,125%) - var(--w1,100%)) * var(--p,1));letter-spacing:calc(var(--ls0,.14em) - (var(--ls0,.14em) - var(--ec-head-tracking)) * var(--p,1))}
/* Sales-Timeline: sechs Stationen, die mittleren rücken zusammen, die Linie wird kürzer */
.sc81{position:relative;height:clamp(4.6rem,3.6rem + 2vw,5.6rem);margin-top:clamp(1rem,.8rem + .8vw,1.6rem)}
.sc81__rail{position:absolute;left:0;top:10px;height:1px;width:calc((100 - 56 * var(--p,1)) * 1%);background:linear-gradient(90deg,rgba(240,238,229,.5),rgba(240,238,229,.18))}
.sc81__run{position:absolute;left:0;top:9px;height:3px;width:calc((44 + 56 * (1 - var(--p,1))) * var(--p,1) * 1%);background:linear-gradient(90deg,var(--ec-accent),#C4BFAE);box-shadow:0 0 14px rgba(173,169,134,.55)}
.sc81__st{position:absolute;top:0;left:calc((var(--x0) + (var(--x1) - var(--x0)) * var(--p,1)) * 1%);transform:translateX(-50%)}
.sc81__st--a{transform:none}
.sc81__st--z{transform:translateX(-100%)}
.sc81__st i{display:block;width:13px;height:13px;margin:4px auto 0;border-radius:50%;background:#080808;border:1.5px solid var(--fg)}
.sc81__st--a i{margin-left:0}
.sc81__st--z i{margin-right:0;border-color:var(--ec-accent);background:var(--ec-accent);box-shadow:0 0 0 calc(var(--p,1) * 6px) rgba(173,169,134,.18)}
.sc81__st b{position:absolute;top:26px;left:50%;transform:translateX(-50%);font:var(--ec-label);font-size:.66rem;font-weight:500;font-stretch:100%;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--fg-2)}
.sc81__st--a b{left:0;transform:none}
.sc81__st--z b{left:auto;right:0;transform:none;color:var(--fg)}
.sc81__st--c i{transform:scale(calc(1 - .45 * var(--p,1)));border-color:rgba(240,238,229,.6)}
.sc81__st--c b{opacity:calc(1 - var(--p,1) * 1.6)}
.sc81__prep{position:absolute;top:26px;left:15%;transform:translateX(-50%);font:var(--ec-label);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--ec-accent);opacity:calc((var(--p,1) - .55) * 2.4)}
/* Preise: Vergleichslinien laufen zu einer klaren Linie zusammen */
.ob81__item--pr{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:end}
.ob81__item--pr .ob81__h{text-align:right;margin-left:auto;max-width:19ch}
.pr81{position:relative;height:clamp(5rem,4rem + 2.6vw,7rem);margin-bottom:.6em}
.pr81 i{position:absolute;left:0;height:1px;width:calc((var(--l) + (100 - var(--l)) * var(--p,1)) * 1%);top:calc((var(--y) * (1 - var(--p,1))) * 1%);
  background:rgba(242,237,228,calc(.42 - .3 * var(--p,1)))}
.pr81 b{position:absolute;left:0;top:0;height:2px;width:calc(var(--p,1) * 100%);background:linear-gradient(90deg,rgba(173,169,134,.3),var(--ec-accent));box-shadow:0 0 14px rgba(173,169,134,.55)}
.pr81 b::after{content:"";position:absolute;right:-5px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--ec-accent);opacity:var(--p,1)}
@media (max-width:900px){
  .ob81{--w0:115%;--ls0:.1em}
  .ob81__h{font-size:calc(min(13vw,5.2rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-long)}
  .ob81__item--pr{grid-template-columns:minmax(0,1fr)}
  .ob81__item--pr .ob81__h{order:-1;text-align:left;margin-left:0}
  .pr81{height:4.2rem;margin:1rem 0 0}
  .sc81__st b{font-size:.56rem;letter-spacing:.04em}
  .sc81__st--c b,.sc81__st--o b{display:none}
  .sc81__prep{top:46px;left:0;transform:none;font-size:.56rem;letter-spacing:.08em}
}
.ob81{overflow-x:clip}

/* ---------------------------------------------------------- 07 Leistungen ---------- */
/* Seit V8.2 (01.11.2026) ein zusammenhängendes System: assets/css/parts/v82.css. Hier bleibt nur die Beschriftung
   der Sales-Timeline (data-l, per CSS, nicht im Seitentext). */
.sc81 [data-l]::before,.sc81__prep::before{content:attr(data-l)}

/* ---------- CTA „Kostenloses Strategiegespräch buchen“ (28.10.2026): auf schmalen Bildschirmen darf der längere Text
   umbrechen, statt über den Rand zu laufen. Farben, Schrift und Abstände der Buttons bleiben unverändert. ---------- */
@media (max-width:560px){
  .btn{max-width:100%;white-space:normal;text-align:center;text-wrap:balance}
}


/* ==== v83.css ==== */
/* ==========================================================================
   V8.3 „High-End Motion Design Fix“ (01.11.2026): „Was ich für dich aufbaue.“ als EIN System aus fünf klar
   erkennbaren Szenen, verbunden durch Olive-Linien:
   01 Markenidentität + YouTube, Instagram, LinkedIn · 02 Roadmap der 1:1-Betreuung, die den ganzen Ablauf begleitet ·
   03 Rohvideo → Reel, YouTube-Video, Social Clip · 04 Content-Kalender, Videos werden geplant · 05 Landingpage mit
   Angebot, Social Proof und Terminbutton → neue Anfrage (Cash-Akzent unverändert aus V8.1).
   Desktop: feste Bühne über eine kurze Scrollphase (160 svh). Die Leinwand ist 100 × 40 em groß und skaliert als Ganzes
   (1 em = 1 % der Inhaltsbreite, höchstens so groß, dass alles auf einen Bildschirm passt).
   Jede Szene und jedes Objekt darin ist ein eigener Container: Maße innen in cqw, deshalb bleibt jede Szene in jeder
   Größe gleich scharf und gleich aufgebaut. Handy: dieselben Objekte, vertikal angeordnet, ohne Anpinnen.
   Ablauf: assets/js/system83.js (GSAP ScrollTrigger, scrub). Ohne JavaScript und bei „Bewegung reduzieren“ steht der
   fertige Zustand. Der Abschluss (.finale) wird hier nicht angefasst.
   ========================================================================== */

.sy83{--paper-hi:#F2F0E8;--sc-accent:var(--ec-olive-500);--glass:linear-gradient(160deg,#24231A 0%,#13130F 55%,#0E0E0D 100%);position:relative;border-top:1px solid var(--line);background:var(--bg)}
.sy83__track{position:relative;height:160svh}
.sy83__stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(.8rem,.2rem + 1.8vh,1.8rem);padding:calc(var(--header-h) + .6vh) 0 1.4vh;overflow:hidden;
  background:radial-gradient(60% 48% at 52% 56%,rgba(196,191,174,.075),transparent 72%),radial-gradient(90% 40% at 50% 100%,rgba(196,191,174,.04),transparent 70%)}
.sy83__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 2rem}
.sy83__head .eyebrow{order:2;margin:0}
.sy83__head h2{margin:0;font-size:calc(clamp(2rem,.9rem + 2.6vw,4rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-mid)}
.sy83__wrap{container-type:inline-size}
.sy83__cv{--chrome:clamp(270px,22vh + 110px,330px);position:relative;width:100em;height:40em;margin:0 auto;font-size:min(1cqw,calc((100svh - var(--chrome)) / 40));transform:perspective(2600px) rotateX(5deg);transform-origin:50% 100%}
.sy83__list{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.sy83__s{position:absolute;top:0;display:flex;flex-direction:column;gap:.6em}
.sy83__s--1{left:0;width:18em}
.sy83__s--3{left:21em;width:29em}
.sy83__s--4{left:53em;width:20em}
.sy83__s--5{left:76em;width:24em}
.sy83__s--2{left:0;top:32em;width:100em;height:8em}
.sy83 [data-l]::before{content:attr(data-l)}
.sy83 i,.sy83 b,.sy83 em,.sy83 small{font-style:normal;font-weight:inherit}

/* Überschrift je Station: eine Zeile Nummer + Name, Link zur Leistungsseite */
.sy83__h{position:relative;z-index:6;display:flex;align-items:flex-end;min-height:3.6em;color:var(--fg);text-decoration:none;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:max(calc(1.3em * .86),13px);line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);overflow-wrap:break-word}
.sy83__h .sy83__nr{flex:none;margin-right:.55em;font:var(--ec-label-weight) semi-expanded max(.6em,10px)/1 var(--ec-font-label);letter-spacing:.16em;color:var(--ec-accent);transform:translateY(-.15em)}
.sy83__s--2 .sy83__h{position:absolute;left:0;top:2.7em;min-height:0}
@media (hover:hover) and (pointer:fine){.sy83__h:hover .sy83__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}}
.sy83__h:focus-visible{outline:2px solid var(--fg);outline-offset:4px}

/* Szene: eigener Container, weicher Boden-Schatten und warmes Licht darunter */
.sy83__sc{position:relative;display:block;width:100%;container-type:inline-size}
.sy83__art{position:absolute;inset:0;display:block}
.sy83__sc::before{content:"";position:absolute;left:4%;right:4%;bottom:-4%;height:9%;background:radial-gradient(closest-side,rgba(196,191,174,.10),transparent);pointer-events:none}
.sc1{aspect-ratio:18/27}.sc3{aspect-ratio:29/27}.sc4{aspect-ratio:20/27}.sc5{aspect-ratio:24/27}
.sy83 img{display:block;width:100%;height:100%;object-fit:cover}
.sy83__glint{position:absolute;inset:-2%;z-index:9;display:block;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(240,238,229,.22) 48%,rgba(240,238,229,.05) 54%,transparent 62%);transform:translateX(-120%);opacity:0}

/* Verbindungslinien (Desktop): Olive-Haarlinien von Szene zu Szene, Abzweige zur Roadmap */
.sy83__links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.sy83__ln path{fill:none;stroke:url(#sy83g);stroke-width:1.3;stroke-linecap:round}
.sy83__ln path.sy83__dr{stroke:rgba(173,169,134,.55);stroke-width:.9;stroke-dasharray:2 4}

/* Marke (01, wieder in 05) */
.mk{position:absolute;display:block;aspect-ratio:1}
.mk__ring{position:absolute;inset:0;border:solid currentColor;border-width:max(1px,.075em);border-radius:50%}
.mk__axis{position:absolute;left:-16%;right:-16%;top:50%;height:max(1px,.03em);background:var(--ec-accent)}
.mk__dia{position:absolute;left:50%;top:50%;width:31%;aspect-ratio:1;margin:-15.5% 0 0 -15.5%;background:currentColor;transform:rotate(45deg)}

/* ---------- 01 Positionierung & Plattformstrategie ---------- */
.b1__card{position:absolute;left:3%;top:1.5%;width:94%;aspect-ratio:94/86;display:block;overflow:hidden;container-type:inline-size;color:var(--ink);border-radius:2.2cqw;
  background:linear-gradient(158deg,var(--paper-hi) 0%,#E9E7DC 58%,#DBD8CB 100%);
  box-shadow:0 0 0 1px rgba(240,238,229,.08),inset 0 1px 0 rgba(240,238,229,.9),0 6cqw 9cqw -4cqw rgba(0,0,0,.9),0 1.5cqw 3cqw -1cqw rgba(0,0,0,.6)}
.b1__mark{left:7cqw;top:7cqw;width:25cqw;font-size:25cqw;color:var(--ink)}
.b1__mark .mk__axis{background:var(--sc-accent)}
.b1__wm{position:absolute;left:38cqw;top:9.5cqw;right:5cqw;display:grid;gap:1.6cqw}
.b1__wm b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(10.5cqw * var(--ec-hs));line-height:var(--ec-head-leading);text-transform:uppercase;letter-spacing:var(--ec-head-tracking)}
.b1__wm em{font-family:var(--ec-font-body);font-style:italic;font-size:5.6cqw;line-height:1;color:var(--sc-accent)}
.b1__type{position:absolute;left:7cqw;top:39cqw;display:flex;gap:7cqw}
.b1__aa{display:grid;gap:.6cqw}
.b1__aa b{font-size:16cqw;line-height:.85}
.b1__aa--d b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight)}
.b1__aa--s b{font-family:var(--ec-font-body);font-style:italic;color:var(--sc-accent)}
.b1__aa small,.b1__pos small{font:var(--ec-label-weight) semi-expanded 2.9cqw/1 var(--ec-font-label);letter-spacing:.14em;text-transform:uppercase;color:#5C5A48}
.b1__sw{position:absolute;left:56cqw;top:42cqw;display:grid;grid-template-columns:repeat(2,13cqw);gap:2.4cqw}
.b1__sw i{display:block;height:8.5cqw;border-radius:1.4cqw;box-shadow:inset 0 0 0 1px rgba(8,8,8,.14)}
.b1__sw i:nth-child(1){background:#080808}.b1__sw i:nth-child(2){background:var(--paper-hi)}
.b1__sw i:nth-child(3){background:linear-gradient(135deg,#BEBB9B,#9E9A78)}.b1__sw i:nth-child(4){background:#6E6C4C}
.b1__pos{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:grid;gap:1.6cqw;padding-top:3.6cqw;border-top:1px solid rgba(8,8,8,.16)}
.b1__pos em{font-family:var(--ec-font-body);font-style:italic;font-size:7.4cqw;line-height:1}
.b1__bus{position:absolute;inset:0;display:block;pointer-events:none}
.b1__stem{position:absolute;left:50%;top:58.6%;height:7.4%;width:1px;background:var(--ec-accent);box-shadow:0 0 8px rgba(196,191,174,.6);transform-origin:50% 0}
.b1__rail{position:absolute;left:17.5%;right:17.5%;top:66%;height:1px;background:var(--ec-accent);box-shadow:0 0 8px rgba(196,191,174,.6)}
.b1__plats{position:absolute;left:3%;right:3%;top:70%;display:flex;justify-content:space-between;container-type:inline-size}
.b1__p{--sel:1;position:relative;display:grid;justify-items:center;gap:3cqw;width:29cqw;color:var(--fg)}
.b1__p::before{content:"";position:absolute;left:50%;top:-4.4cqw;height:4.4cqw;width:1px;background:var(--ec-accent)}
.b1__p>svg{box-sizing:border-box;width:29cqw;height:29cqw;padding:7.5cqw;border-radius:8cqw;background:var(--glass);
  box-shadow:inset 0 1px 0 rgba(240,238,229,.16),0 0 0 1px rgba(240,238,229,.12),0 5cqw 8cqw -4cqw rgba(0,0,0,.95)}
.b1__p::after{content:"";position:absolute;left:0;top:0;width:29cqw;height:29cqw;border-radius:8cqw;box-shadow:0 0 0 1.5px var(--ec-accent),0 0 22px rgba(173,169,134,.45);opacity:var(--sel)}
.b1__ok{position:absolute;right:-2cqw;top:-2.6cqw;z-index:2;display:grid;place-items:center;width:9.5cqw;height:9.5cqw;border-radius:50%;background:var(--ec-accent);color:var(--ink);box-shadow:0 0 14px rgba(173,169,134,.55);opacity:var(--sel);transform:scale(calc(.4 + .6 * var(--sel)))}
.b1__ok svg{width:62%;height:62%}
.b1__pl{font:var(--ec-label-weight) semi-expanded 4.6cqw/1 var(--ec-font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}

/* ---------- 03 Nie wieder selbst schneiden & posten ---------- */
.sc3 .sy83__art>span{position:absolute;display:block;container-type:inline-size}
.c3__raw{left:0;top:0;width:58%;aspect-ratio:16/9;overflow:hidden;border-radius:1.2cqw;box-shadow:0 0 0 1px rgba(240,238,229,.16),0 5cqw 8cqw -4cqw rgba(0,0,0,.95)}
.c3__raw .c3__img{filter:grayscale(1) contrast(.8) brightness(.95)}
.c3__flat{position:absolute;inset:0;background:rgba(122,119,104,.16);mix-blend-mode:screen}
.c3__tag{position:absolute;left:3.5cqw;top:3.5cqw;padding:1cqw 2cqw;border:1px solid rgba(240,238,229,.5);font:var(--ec-label-weight) semi-expanded 3.8cqw/1 var(--ec-font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.c3__rec{position:absolute;right:3.5cqw;top:3.8cqw;display:flex;align-items:center;gap:1.4cqw;font:var(--ec-label-weight) semi-expanded 3.8cqw/1 var(--ec-font-label);letter-spacing:.12em;color:var(--fg)}
.c3__rec i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--ec-accent);box-shadow:0 0 8px rgba(173,169,134,.8)}
.c3__tl{left:0;top:37.5%;width:58%;aspect-ratio:58/10;border-radius:1cqw;background:#10100E;box-shadow:inset 0 0 0 1px rgba(240,238,229,.1);overflow:hidden}
.c3__wave{position:absolute;left:2%;right:21%;top:12%;height:38%;display:flex;align-items:center;gap:1.2%}
.c3__wave i{flex:1;height:30%;border-radius:2px;background:rgba(240,238,229,.38)}
.c3__wave i:nth-child(3n){height:70%}.c3__wave i:nth-child(4n+1){height:48%}.c3__wave i:nth-child(5n+2){height:92%}.c3__wave i:nth-child(7n){height:20%}
.c3__clips{position:absolute;left:2%;right:2%;bottom:14%;height:26%;display:flex;gap:1%}
.c3__k{flex:3;border-radius:1px;background:linear-gradient(180deg,#4A4934,#3C3B2B);box-shadow:inset 0 1px 0 rgba(240,238,229,.25)}
.c3__k--x{flex:1.4;background:repeating-linear-gradient(135deg,rgba(240,238,229,.18) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px rgba(240,238,229,.25)}
.c3__cut{position:absolute;top:6%;bottom:6%;width:2px;background:var(--fg);box-shadow:0 0 6px rgba(240,238,229,.8)}
.c3__cut:nth-of-type(1){left:37%}.c3__cut:nth-of-type(2){left:72.5%}
.c3__ph{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ec-accent);box-shadow:0 0 10px var(--ec-accent)}
.c3__tlb{position:absolute;right:2.5cqw;top:6%;font:var(--ec-label-weight) semi-expanded 3.6cqw/1 var(--ec-font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.c3__scr{position:absolute;inset:0;display:block;overflow:hidden}
.c3__fmt{position:absolute;left:3cqw;top:3cqw;z-index:3;padding:1cqw 2cqw;border-radius:99px;background:rgba(8,8,8,.7);box-shadow:inset 0 0 0 1px rgba(173,169,134,.7);font:var(--ec-label-weight) semi-expanded 4.2cqw/1 var(--ec-font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ec-accent);white-space:nowrap}
.c3__bar{position:absolute;left:5%;right:5%;bottom:5%;height:1.6%;min-height:2px;background:rgba(240,238,229,.25);border-radius:2px}
.c3__bar i{position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--ec-accent);border-radius:2px}
.c3__yt{left:0;top:53%;width:56%;aspect-ratio:16/9;border-radius:1.4cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(240,238,229,.2),0 6cqw 9cqw -4cqw rgba(0,0,0,.95)}
.c3__yt .c3__fmt{font-size:4cqw}
.c3__ttl{position:absolute;left:5cqw;bottom:13cqw;display:grid;line-height:.86;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.c3__ttl b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(11cqw * var(--ec-hs));text-transform:uppercase;color:var(--fg)}
.c3__ttl em{font-family:var(--ec-font-body);font-style:italic;font-size:12cqw;color:var(--ec-accent)}
.c3__play{position:absolute;right:7cqw;bottom:13cqw;display:grid;place-items:center;width:14cqw;height:10cqw;border-radius:2.6cqw;background:rgba(240,238,229,.94);color:var(--ink);box-shadow:0 4px 18px rgba(0,0,0,.5)}
.c3__play svg{width:52%;height:52%}
.c3__reel{left:64%;top:0;width:34%;aspect-ratio:9/16.6;border-radius:6.5cqw;padding:2.2cqw;background:linear-gradient(150deg,#373629,#151410 40%,#2A291E);
  box-shadow:inset 0 0 0 1px rgba(196,191,174,.35),inset 0 1px 0 rgba(240,238,229,.4),0 8cqw 12cqw -5cqw rgba(0,0,0,.95);overflow:hidden}
.c3__reel>.c3__scr{inset:2.2cqw;border-radius:5cqw}
.c3__reel .c3__fmt{left:12cqw;top:10cqw;font-size:7.4cqw}
.c3__cap{position:absolute;left:0;right:0;bottom:22%;display:grid;justify-items:center;line-height:.9;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.c3__cap b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(16cqw * var(--ec-hs));text-transform:uppercase;color:var(--fg)}
.c3__cap em{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(16cqw * var(--ec-hs));text-transform:uppercase;color:var(--ink);background:var(--ec-accent);padding:0 2cqw;margin-top:1.4cqw}
.c3__ui{position:absolute;right:5cqw;bottom:34%;display:grid;gap:5cqw;color:rgba(240,238,229,.9)}
.c3__ui i{display:block;width:9cqw;height:9cqw}
.c3__ui svg{width:100%;height:100%}
.c3__sq{left:64%;top:70%;width:26%;aspect-ratio:1;border-radius:1.6cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(240,238,229,.2),0 6cqw 9cqw -4cqw rgba(0,0,0,.95)}
.c3__sq .c3__fmt{font-size:8.6cqw;left:7cqw;top:7cqw}
.c3__cap--s{bottom:9%}
.c3__cap--s b{font-size:calc(20cqw * var(--ec-hs))}

/* ---------- 04 Contentplanung & Veröffentlichung ---------- */
.k4__cal{position:absolute;left:0;top:0;width:100%;aspect-ratio:100/84;display:block;overflow:hidden;container-type:inline-size;border-radius:2.4cqw;background:var(--glass);
  box-shadow:inset 0 1px 0 rgba(240,238,229,.14),0 0 0 1px rgba(240,238,229,.12),0 7cqw 10cqw -5cqw rgba(0,0,0,.95)}
.k4__hd{position:absolute;left:5cqw;right:5cqw;top:5cqw;display:flex;align-items:baseline;gap:3cqw;color:var(--fg)}
.k4__hd b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(9cqw * var(--ec-hs));line-height:var(--ec-head-leading);text-transform:uppercase}
.k4__hd small{font:var(--ec-label-weight) semi-expanded 3.4cqw/1 var(--ec-font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-accent)}
.k4__hd svg{margin-left:auto;width:7cqw;height:7cqw;color:var(--fg-2);align-self:center}
.k4__days,.k4__grid{position:absolute;left:3.5cqw;right:3.5cqw;display:grid;grid-template-columns:repeat(7,1fr);gap:1.3cqw}
.k4__days{top:19cqw}
.k4__days b{font:var(--ec-label-weight) semi-expanded 3.2cqw/1 var(--ec-font-label);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--fg-3)}
.k4__grid{top:25cqw}
.k4__c{position:relative;aspect-ratio:1/1.08;border-radius:1.2cqw;background:rgba(240,238,229,.035);box-shadow:inset 0 0 0 1px rgba(240,238,229,.08)}
.k4__c small{position:absolute;left:1.3cqw;top:1.2cqw;font:var(--ec-label-weight) semi-expanded 2.6cqw/1 var(--ec-font-label);color:var(--fg-3)}
.k4__c.is-on{box-shadow:inset 0 0 0 1px rgba(173,169,134,.6)}
.k4__th{position:absolute;inset:6%;z-index:2;display:block;border-radius:1cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(240,238,229,.3),0 2cqw 3cqw -1cqw rgba(0,0,0,.9)}
.k4__pf{position:absolute;left:5%;bottom:5%;width:42%;aspect-ratio:1;padding:5%;border-radius:22%;background:rgba(8,8,8,.72);color:var(--fg)}
.k4__pf svg,.k4__ok svg{display:block;width:100%;height:100%}
.k4__ok{position:absolute;right:-1%;top:-1%;width:44%;aspect-ratio:1;padding:6%;border-radius:50%;background:var(--ec-accent);color:var(--ink);box-shadow:0 0 10px rgba(173,169,134,.6)}
.k4__q{position:absolute;left:0;top:65.4%;width:100%;display:grid;gap:1.6cqw;container-type:inline-size}
.k4__r{position:relative;display:grid;grid-template-columns:18cqw minmax(0,1fr) auto;align-items:center;gap:3cqw;padding:1.4cqw 2.4cqw 1.4cqw 1.4cqw;border-radius:2cqw;background:rgba(240,238,229,.035);box-shadow:inset 0 0 0 1px rgba(240,238,229,.09)}
.k4__rt{display:block;aspect-ratio:16/9;border-radius:1cqw;overflow:hidden}
.k4__rn{display:flex;align-items:center;gap:2cqw;min-width:0;color:var(--fg);font:500 4cqw/1 var(--ec-font-body);white-space:nowrap}
.k4__rn svg{flex:none;width:6cqw;height:6cqw;color:var(--fg-2)}
.k4__st{display:inline-flex;align-items:center;gap:1.2cqw;padding:1.4cqw 2.4cqw;border-radius:99px;background:rgba(173,169,134,.14);box-shadow:inset 0 0 0 1px rgba(173,169,134,.55);font:var(--ec-label-weight) semi-expanded 3.4cqw/1 var(--ec-font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ec-accent)}
.k4__st::after{content:"";width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--ec-accent);box-shadow:0 0 6px var(--ec-accent)}

/* ---------- 05 Conversion Landingpage ---------- */
.sc5{perspective:1200px}
.l5__win{position:absolute;left:0;top:7%;width:100%;aspect-ratio:1/1;z-index:2;display:block;overflow:hidden;container-type:inline-size;border-radius:2cqw;background:#1A1914;
  box-shadow:0 0 0 1px rgba(240,238,229,.2),inset 0 1px 0 rgba(240,238,229,.14),0 9cqw 13cqw -6cqw rgba(0,0,0,.95);transform:rotateY(-7deg);transform-origin:0 50%}
.l5__bar{position:absolute;left:0;right:0;top:0;height:6.5cqw;display:flex;align-items:center;gap:1.3cqw;padding:0 3cqw}
.l5__bar>i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:#3B3A2D}
.l5__url{position:absolute;left:30%;right:30%;top:1.5cqw;height:3.5cqw;display:grid;place-items:center;border-radius:99px;background:#24231B;font:var(--ec-label-weight) semi-expanded 2.2cqw/1 var(--ec-font-label);letter-spacing:.06em;color:var(--fg-3)}
.l5__pg{position:absolute;left:0;right:0;top:6.5cqw;bottom:0;display:block;overflow:hidden;color:var(--ink);background:linear-gradient(180deg,var(--paper-hi),#EAE8DD)}
.l5__nav{position:absolute;left:5cqw;right:5cqw;top:3.6cqw;height:6cqw;display:flex;align-items:center;gap:2.4cqw}
.l5__mark{position:relative;width:5.4cqw;font-size:5.4cqw;color:var(--ink)}
.l5__mark .mk__axis{background:var(--sc-accent)}
.l5__wm{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(3.6cqw * var(--ec-hs));text-transform:uppercase;letter-spacing:.02em}
.l5__menu{margin-left:auto;display:flex;gap:3cqw}
.l5__menu i{display:block;width:7cqw;height:.9cqw;border-radius:2px;background:rgba(8,8,8,.28)}
.l5__nb{padding:1.4cqw 2.6cqw;border-radius:99px;background:var(--ink);color:var(--paper-hi);font:600 2.3cqw/1 var(--ec-font-body)}
.l5__hero{position:absolute;left:5cqw;right:5cqw;top:15cqw;display:grid;grid-template-columns:1fr 43cqw;gap:4cqw;align-items:center}
.l5__copy{display:grid;justify-items:start;gap:1.8cqw}
.l5__copy small{font:var(--ec-label-weight) semi-expanded 2.2cqw/1 var(--ec-font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--sc-accent)}
.l5__hl{display:grid;line-height:.86}
.l5__hl b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(8cqw * var(--ec-hs));text-transform:uppercase}
.l5__hl em{font-family:var(--ec-font-body);font-style:italic;font-size:7.2cqw;color:var(--sc-accent)}
.l5__sub{font:500 2.7cqw/1.25 var(--ec-font-body);color:#464537}
.l5__cta{position:relative;margin-top:1.2cqw;padding:2.2cqw 3.6cqw;border-radius:.8cqw;background:var(--ink);color:var(--paper-hi);font:600 2.8cqw/1 var(--ec-font-body);box-shadow:0 1.6cqw 3cqw -1cqw rgba(8,8,8,.5)}
.l5__cta::after{content:"";position:absolute;inset:-1.2cqw;border-radius:1.6cqw;box-shadow:0 0 0 1px var(--ec-accent),0 0 18px rgba(173,169,134,.7);opacity:var(--hit,0)}
.l5__vid{position:relative;display:block;aspect-ratio:1;border-radius:1.4cqw;overflow:hidden;box-shadow:0 2.4cqw 5cqw -1.6cqw rgba(8,8,8,.55)}
.l5__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:10cqw;height:10cqw;margin:-5cqw 0 0 -5cqw;border-radius:50%;background:rgba(242,240,232,.92);color:var(--ink)}
.l5__play svg{width:46%;height:46%;margin-left:6%}
.l5__off{position:absolute;left:5cqw;right:5cqw;top:62cqw;display:flex;align-items:center;gap:3.2cqw;padding-top:3cqw;border-top:1px solid rgba(8,8,8,.12)}
.l5__off small{font:var(--ec-label-weight) semi-expanded 2.2cqw/1 var(--ec-font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--sc-accent);margin-right:auto}
.l5__ck{display:flex;align-items:center;gap:1.2cqw;font:600 2.6cqw/1 var(--ec-font-body)}
.l5__ck i{display:grid;place-items:center;width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--ec-accent);color:var(--ink)}
.l5__ck svg{width:70%;height:70%}
.l5__proof{position:absolute;left:5cqw;right:5cqw;top:72cqw;display:grid;grid-template-columns:auto repeat(3,17cqw);justify-content:space-between;align-items:center;column-gap:3cqw}
.l5__proof small{font:var(--ec-label-weight) 2.2cqw/1.3 var(--ec-font-label);letter-spacing:.06em;text-transform:uppercase;color:var(--sc-accent);max-width:16cqw}
.l5__tv{position:relative;display:block;aspect-ratio:16/10;border-radius:1cqw;overflow:hidden;box-shadow:0 1.4cqw 2.6cqw -1cqw rgba(8,8,8,.45)}
.l5__tv i{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:5.4cqw;height:5.4cqw;margin:-2.7cqw 0 0 -2.7cqw;border-radius:50%;background:rgba(242,240,232,.92);color:var(--ink)}
.l5__tv svg{width:48%;height:48%;margin-left:6%}
.l5__cur{position:absolute;left:22%;top:55%;z-index:5;width:6.2cqw;height:6.2cqw;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.l5__cur svg{width:100%;height:100%}
.l5__toast{position:absolute;right:-3%;top:0;z-index:4;display:flex;align-items:center;gap:3cqw;width:64%;padding:3.4cqw 3.6cqw;container-type:inline-size;border-radius:3.6cqw;background:linear-gradient(160deg,#28271D,#151410);
  box-shadow:inset 0 1px 0 rgba(240,238,229,.2),0 0 0 1px rgba(173,169,134,.55),0 0 24px rgba(173,169,134,.25),0 10px 30px -8px rgba(0,0,0,.9)}
.l5__ti{flex:none;display:grid;place-items:center;width:13cqw;height:13cqw;border-radius:3cqw;background:rgba(173,169,134,.16);color:var(--ec-accent)}
.l5__ti svg{width:60%;height:60%}
.l5__toast>span{display:grid;gap:1.6cqw;min-width:0}
.l5__toast b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(8.6cqw * var(--ec-hs));line-height:var(--ec-head-leading);text-transform:uppercase;color:var(--fg)}
.l5__toast small{font:500 5.6cqw/1 var(--ec-font-body);color:var(--fg-2)}
.l5__tk{flex:none;margin-left:auto;display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:50%;background:var(--ec-accent);color:var(--ink)}
.l5__tk svg{width:62%;height:62%}
/* Cash-Akzent (Datei und Wirkung unverändert aus V8.1): hinten unscharf, vorne nur außerhalb der Landingpage und der
   Anfrage; er bleibt in der Komposition von 05 und läuft nie über Text oder Buttons anderer Szenen (Überschriften liegen darüber) */
.g5__cash{position:absolute;z-index:3;display:block;pointer-events:none;opacity:0;transition:opacity .25s ease;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.g5__cash img{display:block;width:100%;height:100%;object-fit:cover}
.g5__cash--far{z-index:1;left:-8%;right:-22%;top:-14%;bottom:-6%;filter:blur(1.5px) brightness(.95)}
.g5__cash--near{left:-6%;right:-20%;top:-4%;bottom:-4%;
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,4.8% 10.2%,35.7% 10.2%,35.7% 3.7%,86.5% 3.7%,86.5% 17.6%,84.1% 17.6%,84.1% 92.6%,4.8% 92.6%,4.8% 10.2%)}
.sc5.is-cash .g5__cash{opacity:1}
.sc5.is-cash .g5__cash--far{opacity:.85}
.sc5.is-cashed .g5__cash{opacity:0;transition:opacity .5s ease}
.g5__still{opacity:.4}
.sc5 .g5__cash--far:has(.g5__still){opacity:1}

/* ---------- 02 Persönliche 1:1-Betreuung: Roadmap unter dem ganzen Ablauf ---------- */
.r2{position:absolute;inset:0;display:block;pointer-events:none}
.r2__line{position:absolute;left:9em;right:0;top:1.5em;height:1px;background:linear-gradient(90deg,var(--ec-accent),rgba(196,191,174,.9) 80%,rgba(173,169,134,.25));box-shadow:0 0 10px rgba(173,169,134,.55);transform-origin:0 50%}
.r2__dot{position:absolute;left:9em;top:1.5em;width:.8em;height:.8em;margin:-.4em 0 0 -.4em;border-radius:50%;background:var(--ec-accent)}
.r2__ec{position:absolute;left:9em;top:1.5em;z-index:3;display:grid;place-items:center;width:5.2em;height:2.2em;margin:-1.1em 0 0 -2.6em;border-radius:99px;background:var(--fg);color:var(--ink);font:800 max(1em,12px)/1 var(--ec-font-head);font-stretch:var(--ec-head-stretch);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 0 0 .3em rgba(173,169,134,.25),0 0 18px rgba(173,169,134,.5)}
.r2m{position:absolute;left:50%;top:33.5em;z-index:4;display:block;width:0;height:0}
.r2m__dot{position:absolute;left:-.8em;top:-.8em;display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--ec-accent);box-shadow:inset 0 0 0 1px var(--ec-accent),0 0 12px rgba(173,169,134,.45);color:var(--ink)}
.r2m__dot svg{width:70%;height:70%}
.r2m__l{position:absolute;left:0;top:1.5em;transform:translateX(-50%);font:var(--ec-label-weight) semi-expanded max(.82em,11px)/1 var(--ec-font-label);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--ec-accent)}
.r2__fb{position:absolute;left:2.4em;top:2.6em;display:flex;align-items:center;gap:.5em;padding:.5em .6em .5em 1em;border-radius:99px;background:#161611;box-shadow:inset 0 0 0 1px rgba(240,238,229,.2),0 8px 18px -8px rgba(0,0,0,.9);white-space:nowrap}
.r2__fb>b{font:800 max(.95em,12px)/1 var(--ec-font-head);font-stretch:var(--ec-head-stretch);letter-spacing:.04em;text-transform:uppercase;color:var(--ec-accent)}
.r2__fb>em{font:400 max(1.05em,12px)/1 var(--ec-font-body);font-style:italic;color:var(--fg);margin-right:.3em}
.r2__re,.r2__ok{display:inline-flex;align-items:center;gap:.4em;padding:.3em .6em;border-radius:99px;background:rgba(173,169,134,.16);box-shadow:inset 0 0 0 1px rgba(173,169,134,.6);font:var(--ec-label-weight) semi-expanded max(.66em,10px)/1 var(--ec-font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ec-accent)}
.r2__re i,.r2__ok i{display:block;width:1.1em;height:1.1em}
.r2__re svg,.r2__ok svg{width:100%;height:100%}
.r2__ok{position:absolute;left:-3.5em;top:3.2em;white-space:nowrap}

/* Bis GSAP bereit ist, bleiben die Szenen leer (kein Aufblitzen des Endzustands); ohne JavaScript, bei „Bewegung
   reduzieren“ oder wenn GSAP nicht lädt, steht der fertige Zustand (data-sys-state="static"). */
.js .sy83:not([data-sys-state]) :is(.sy83__art,.sy83__links,.r2,.r2m){opacity:0}

/* Schluss: Aussage links, Termin-Button rechts */
.sy83__end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.sy83__claim{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.5rem,.6rem + 1.9vw,2.9rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg)}
.sy83__claim span{display:block}
.sy83__claim em{font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:none;color:var(--ec-accent)}
.sy83__end .btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin:0}

/* Kurze Bildschirme: keine feste Bühne, der Ablauf folgt trotzdem dem Scrollen */
@media (min-width:901px) and (max-height:599px){
  .sy83__track{height:auto}
  .sy83__stage{position:relative;height:auto;padding:clamp(3rem,2rem + 3vw,5rem) 0}
  .sy83__cv{font-size:1cqw}
}

/* ---------- Handy und Tablet (9:16): dieselben Objekte, untereinander; die Roadmap läuft links mit ---------- */
@media (max-width:900px){
  .sy83__track{height:auto}
  .sy83__stage{position:relative;height:auto;padding:clamp(2.2rem,1.6rem + 3vw,3.4rem) 0 clamp(2.4rem,1.8rem + 3vw,3.6rem);gap:1.3rem;overflow:visible;overflow-x:clip}
  .g5__cash--far{left:-6%;right:-6%;top:-20%;bottom:-4%}
  .g5__cash--near{left:-6%;right:-6%;top:-18%;bottom:-2%;clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,5.4% 17.5%,95.5% 17.5%,95.5% 96.3%,5.4% 96.3%,5.4% 17.5%)}
  .r2__ok{z-index:7}
  .sy83__head h2{font-size:calc(clamp(2rem,1.2rem + 4vw,3rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-mid)}
  .sy83__cv{width:auto;height:auto;font-size:16px;padding-left:1.5rem;transform:none}
  .sy83__links{display:none}
  .sy83__list{position:relative;inset:auto;display:grid;gap:1rem}
  .sy83__s{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto;gap:.55rem}
  .sy83__h{min-height:0;font-size:calc(1.02rem * .86)}
  .sy83__h .sy83__nr{font-size:.66rem}
  .sy83__s--2 .sy83__h{position:relative;top:auto;font-size:calc(1.02rem * .86);padding-left:2.4rem}
  /* Roadmap: senkrechte Linie links, von 02 bis zur Landingpage */
  .sy83__s:not(.sy83__s--1)::after{content:"";position:absolute;left:-1.05rem;top:0;bottom:-1rem;width:1px;background:linear-gradient(180deg,var(--ec-accent),rgba(173,169,134,.5));transform-origin:50% 0;transform:scaleY(var(--lane,1))}
  .sy83__s--2::after{top:.55rem}
  .sy83__s--5::after{bottom:.5rem}
  .r2{position:absolute;inset:0}
  .r2__line,.r2__dot{display:none}
  .r2__ec{left:-1.05rem;top:.55rem;width:3.2rem;height:1.45rem;margin:-.72rem 0 0 -1.05rem;font-size:.7rem}
  .r2m{position:static;width:auto;height:auto}
  .r2m__dot{left:calc(-1.05rem - .5rem);top:.1rem;width:1rem;height:1rem}
  .r2m__l{display:none}
  .sy83__s--4 .r2m__l{display:inline-flex;left:auto;right:.6rem;top:auto;bottom:.6rem;transform:none;padding:.35em .6em;border-radius:99px;background:rgba(8,8,8,.8);box-shadow:inset 0 0 0 1px rgba(173,169,134,.6);font-size:.6rem}
  .r2__fb{position:relative;left:auto;top:auto;display:inline-flex;font-size:13px;padding:.35em .7em .35em .35em}
  .r2__ok{left:auto;right:0;top:.1rem;font-size:13px;font-stretch:100%;letter-spacing:.06em}
  /* 01: Markenkarte links, Plattformen rechts untereinander */
  .sc1{aspect-ratio:16/9}
  .b1__card{left:0;top:2%;width:56%}
  .b1__stem{left:56%;top:50%;width:6%;height:1px;transform-origin:0 50%}
  .b1__rail{left:62%;right:auto;top:16%;bottom:16%;width:1px;height:auto}
  .b1__plats{left:68%;right:auto;top:0;bottom:0;width:20%;flex-direction:column;justify-content:space-between;align-items:flex-start}
  .b1__p{width:auto;gap:0}
  .b1__p::before{left:-30cqw;top:50%;height:1px;width:30cqw}
  .b1__p>svg,.b1__p::after{width:80cqw;height:80cqw;padding:20cqw;border-radius:22cqw}
  .b1__ok{width:26cqw;height:26cqw;right:-6cqw;top:-6cqw}
  .b1__pl{display:none}
  /* 03: Rohvideo und Schnitt links, Reel und Clip rechts, YouTube unten links */
  .sc3{aspect-ratio:16/11}
  .c3__raw{width:52%}
  .c3__tl{top:43%;width:52%}
  .c3__yt{top:58%;width:47%}
  .c3__reel{left:56%;width:23.5%}
  .c3__sq{left:56%;top:67%;width:22%}
  /* 04: Kalender links, Veröffentlichungsliste rechts */
  .sc4{aspect-ratio:16/9}
  .k4__cal{width:58%}
  .k4__q{left:62%;top:3%;width:38%;gap:4cqw}
  .k4__r{grid-template-columns:1fr;gap:3cqw;padding:3cqw;border-radius:4cqw}
  .k4__rt{border-radius:2.4cqw}
  .k4__rn{display:none}
  .k4__st{position:absolute;right:5cqw;bottom:5cqw;font-size:7.4cqw;padding:2.4cqw 4cqw;background:rgba(8,8,8,.8)}
  .k4__st::after{width:4cqw;height:4cqw}
  .k4__r:nth-child(n+3){display:none}
  /* 05: Landingpage groß, Anfrage oben rechts */
  .sc5{aspect-ratio:100/93}
  .l5__win{top:3%;aspect-ratio:100/88;transform:none}
  .l5__hero{grid-template-columns:1fr 36cqw}
  .l5__off{top:55cqw}
  .l5__proof{top:65cqw}
  .l5__toast{right:-1%;top:5%;width:62%}
  .sy83__claim{font-size:calc(min(8.4vw,2.4rem) * var(--ec-hs-long))}
  .sy83__end{display:grid;gap:1.1rem}
  .sy83__end .btn{width:100%}
}
/* Tablet (601 bis 900 px): zwei Spalten, 01 und 03 oben, darunter die Roadmap der 1:1-Betreuung als Linie, dann 04 und 05 */
@media (min-width:601px) and (max-width:900px){
  .sy83__cv{padding-left:0}
  .sy83__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.2rem,3vw,2rem);row-gap:1.4rem;align-items:start}
  .sy83__s--1{grid-area:1/1}.sy83__s--3{grid-area:1/2}.sy83__s--2{grid-area:2/1/3/3;padding:.2rem 0 .9rem 2.4rem}.sy83__s--4{grid-area:3/1}.sy83__s--5{grid-area:3/2}
  .sy83__s::after{display:none}
  .r2__line{display:block;left:2.4rem;right:0;top:auto;bottom:0}
  .r2__ec{left:0;top:.75rem;margin-left:0}
  .sy83__s--2 .sy83__h{padding-left:4rem}
  .r2m__dot{display:none}
}
@media (prefers-reduced-motion:reduce){.sy83 *{transition:none!important}}


/* ==== v9.css ==== */
/* ==========================================================================
   Master V9 „Conversion First“ (02.11.2026)
   1. Startseite 04 „Customer Journey“ (ersetzt die 3D-Linse): Content → Vertrauen → Anfrage als EINE Komposition.
      Desktop: Leinwand 100 × 42 em, skaliert als Ganzes, feste Bühne über eine kurze Scrollphase (150 svh).
      Handy: eigene Hochkantfassung ohne Anpinnen. Ablauf: assets/js/journey9.js (GSAP ScrollTrigger, scrub).
      Fertiger Zustand ist der CSS-Standard (ohne JavaScript, „Bewegung reduzieren“, GSAP lädt nicht).
   2. Einwandvorwegnahme: je ein kurzer Erklärsatz (Briefing V9).
   Der Abschluss (.finale) wird hier nicht angefasst.
   ========================================================================== */

/* ---------- 04 Customer Journey ---------- */
.jy{--glass:linear-gradient(158deg,#24231A 0%,#151410 52%,#0E0E0D 100%);--hair:rgba(173,169,134,.22);position:relative;border-top:1px solid var(--line);background:var(--bg)}
.jy [data-l]::before{content:attr(data-l)}
.jy i,.jy b,.jy em,.jy small{font-style:normal;font-weight:inherit}
.jy__track{position:relative;height:150svh}
.jy__stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(.8rem,.2rem + 1.8vh,1.8rem);padding:calc(var(--header-h) + .6vh) 0 1.6vh;overflow:hidden;
  background:radial-gradient(46% 52% at 40% 52%,rgba(173,169,134,.085),transparent 70%),radial-gradient(40% 46% at 84% 54%,rgba(110,108,76,.10),transparent 72%),radial-gradient(90% 36% at 50% 100%,rgba(173,169,134,.04),transparent 70%)}
.jy__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 2rem}
.jy__head .eyebrow{order:2;margin:0}
.jy__head h2{margin:0;font-size:clamp(1.9rem,.7rem + 2.3vw,3.5rem);line-height:.95}
.jy__hl{display:block}
.jy__wrap{container-type:inline-size}
.jy__cv{--chrome:clamp(230px,16vh + 110px,290px);position:relative;width:100em;height:42em;margin:0 auto;font-size:min(1cqw,calc((100svh - var(--chrome)) / 42))}
.jy__col{position:static}

/* Stationen: Linie mit drei Punkten unter der Komposition */
.jy__rail{position:absolute;left:0;right:0;top:38.2em;height:1px;background:rgba(240,238,229,.12)}
.jy__fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--ec-accent),#ADA986);transform-origin:0 50%;transform:scaleX(var(--rail,1))}
.jy__lab{position:absolute;top:38.2em;margin:0;padding-top:1.1em;font-size:1em}
.jy__lab-t{display:block;font:var(--ec-label-weight) semi-expanded max(.82em,11px)/1.2 var(--ec-font-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
.jy__lab-t span{color:var(--ec-accent);margin-right:.6em}
.jy__lab::before{content:"";position:absolute;left:0;top:-.42em;width:.84em;height:.84em;border-radius:50%;background:var(--bg);border:1px solid var(--ec-accent);box-shadow:0 0 0 .3em var(--bg)}
.jy__col--1 .jy__lab{left:0}
.jy__col--2 .jy__lab{left:38em}
.jy__col--3 .jy__lab{left:68em}
.jy__col.is-on .jy__lab::before,.jy:not([data-jy-state]) .jy__lab::before{background:var(--ec-accent)}

/* Verbindungslinien */
.jy__links{position:absolute;left:0;top:0;width:100%;height:42em;overflow:visible;pointer-events:none;z-index:1}
.jy__ln path{fill:none;stroke:url(#jyg);stroke-width:1.4;stroke-linecap:round}

/* 01 Video-Frame: groß in der Mitte, tritt beim Scrollen zurück (--p 0 → 1) */
.jy__vid{position:absolute;left:18em;top:0;width:64em;margin:0;z-index:2;transform-origin:0 0;
  transform:perspective(150em) translate(calc(var(--p,1) * -18em),calc(var(--p,1) * 8em)) rotateY(calc(var(--p,1) * 13deg)) scale(calc(1 - var(--p,1) * .46875));
  filter:brightness(calc(1 - var(--p,1) * .2))}
.jy__scr{position:relative;display:block;aspect-ratio:16/9;container-type:inline-size;border-radius:1.1cqw;overflow:hidden;background:#0E0E0D;border:1px solid var(--hair);
  box-shadow:0 2.6cqw 7cqw rgba(0,0,0,.62),0 .6cqw 1.4cqw rgba(0,0,0,.4),inset 0 1px 0 rgba(240,238,229,.08)}
.jy__scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.jy__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.86) 0%,rgba(8,8,8,.5) 34%,rgba(8,8,8,0) 62%),linear-gradient(0deg,rgba(8,8,8,.82) 0%,rgba(8,8,8,0) 30%)}
.jy__ch{position:absolute;left:4cqw;top:3.6cqw;display:flex;align-items:center;gap:1.2cqw;font:var(--ec-label-weight) semi-expanded max(1.35cqw,9px)/1 var(--ec-font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg)}
.jy__chm{position:relative;width:2.9cqw;color:var(--fg);font-size:2.9cqw}
.jy__ttl{position:absolute;left:4cqw;top:34%;display:flex;flex-direction:column;gap:.6cqw}
.jy__ttl b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(7cqw * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg)}
.jy__ttl em{font-family:var(--ec-font-body);font-style:italic;font-size:5.8cqw;line-height:.95;color:var(--ec-accent)}
.jy__play{position:absolute;left:61%;top:47%;width:9cqw;aspect-ratio:1;margin:-4.5cqw 0 0 -4.5cqw;display:grid;place-items:center;border-radius:50%;
  background:rgba(8,8,8,.42);border:1px solid rgba(240,238,229,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--fg)}
.jy__play svg{width:38%;margin-left:8%}
.jy__bar{position:absolute;left:4cqw;right:4cqw;bottom:3.4cqw;height:.55cqw;min-height:2px;border-radius:1cqw;background:rgba(240,238,229,.18)}
.jy__buf,.jy__prog{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;transform-origin:0 50%}
.jy__buf{width:100%;background:rgba(240,238,229,.22);transform:scaleX(.74)}
.jy__prog{width:100%;background:var(--ec-accent);transform:scaleX(var(--prog,.6))}
.jy__mk{position:absolute;top:0;bottom:0;left:var(--m);width:.35cqw;background:#0E0E0D}
.jy__glint{position:absolute;inset:-2%;z-index:5;display:block;pointer-events:none;background:linear-gradient(105deg,transparent 36%,rgba(240,238,229,.2) 47%,rgba(240,238,229,.05) 54%,transparent 63%);opacity:0}
.jy__refl{position:absolute;left:3%;right:3%;top:100%;height:14%;margin-top:.8em;background:radial-gradient(closest-side,rgba(173,169,134,.12),transparent);filter:blur(.4em);pointer-events:none}

/* 02 Vertrauen: drei Signale in Raumtiefe */
.jy__trust{list-style:none;margin:0;padding:0;position:absolute;left:38em;top:0;width:26em;height:36.5em;z-index:3}
.jy__sig{position:absolute;left:0;width:100%;height:11.4em;display:flex;flex-direction:column;gap:.85em;padding:1.35em 1.6em;border-radius:.8em;background:var(--glass);border:1px solid var(--hair);
  box-shadow:0 1.6em 3.4em rgba(0,0,0,.55),inset 0 1px 0 rgba(240,238,229,.08);overflow:hidden}
.jy__sig::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(240,238,229,.06),transparent 40%);pointer-events:none}
.jy__sig--pos{top:0}.jy__sig--off{top:12.5em}.jy__sig--ref{top:25em}
.jy__sig-t{position:relative;z-index:1;display:block;padding-right:2.6em;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(max(1.6em,14px) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg)}
.jy__sig-v{position:relative;display:block;flex:1}
.jy__ck{position:absolute;right:1.3em;top:1.25em;width:1.9em;height:1.9em;display:grid;place-items:center;border-radius:50%;background:var(--ec-accent);color:#080808}
.jy__sig .jy__ck{top:-2.35em;right:-.2em}
.jy__ck svg{width:62%}
.jy__pf{display:flex;align-items:center;gap:.9em}
.jy__pfm{position:relative;flex:none;width:2.6em;color:var(--fg);font-size:1em}
.jy__pfn{display:flex;flex-direction:column;gap:.25em;min-width:0}
.jy__pfn b{font:600 .95em/1.1 var(--ec-font-body);color:var(--fg)}
.jy__pfn em{font:italic 1.2em/1.1 var(--ec-font-body);color:var(--ec-accent);white-space:nowrap}
.jy__tags{display:flex;gap:.5em;margin-top:.95em}
.jy__tags b{padding:.38em .7em;border:1px solid var(--hair);border-radius:2em;font:var(--ec-label-weight) semi-expanded .68em/1 var(--ec-font-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.jy__rows{display:flex;flex-direction:column}
.jy__row{display:flex;align-items:center;gap:.8em;padding:.42em 0;border-top:1px solid rgba(240,238,229,.08);font:500 .95em/1.15 var(--ec-font-body);color:var(--fg-2)}
.jy__row:first-child{border-top:0;padding-top:0}
.jy__row>i{flex:none;width:1.35em;height:1.35em;display:grid;place-items:center;border-radius:50%;border:1px solid var(--ec-accent);color:var(--ec-accent)}
.jy__row>i svg{width:64%}
.jy__row>i.jy__th{width:2.5em;height:1.5em;border-radius:.25em;border:1px solid var(--hair);background:linear-gradient(135deg,#373629,#13130F);color:var(--fg)}
.jy__row>i.jy__th svg{width:38%}

/* 03 Buchungsansicht mit echtem Button */
.jy__book{position:absolute;left:68em;top:2.5em;width:32em;height:31em;z-index:4;display:flex;flex-direction:column;align-items:flex-start;padding:0 2.3em 2.3em;border-radius:1em;
  background:radial-gradient(80% 60% at 30% 30%,rgba(173,169,134,.10),transparent 70%),var(--glass);border:1px solid rgba(173,169,134,.34);
  box-shadow:0 2.4em 5em rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3),inset 0 1px 0 rgba(240,238,229,.1);overflow:hidden}
.jy__bk-bar{align-self:stretch;display:flex;align-items:center;gap:.45em;height:2.7em;margin:0 -2.3em;padding:0 1.2em;border-bottom:1px solid rgba(240,238,229,.08);font:var(--ec-label-weight) semi-expanded .72em/1 var(--ec-font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.jy__bk-bar i{width:.62em;height:.62em;border-radius:50%;background:rgba(240,238,229,.18)}
.jy__bk-bar b{margin-left:.9em}
.jy__bk-ic{display:block;width:4.4em;margin:auto 0 1.2em;color:var(--ec-accent);filter:drop-shadow(0 0 1.2em rgba(173,169,134,.35))}
.jy__bk-ic svg{width:100%;height:auto;display:block}
.jy__bk-k{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(max(3.4em,26px) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg)}
.jy__bk-m{margin:.9em 0 1.6em;font:var(--ec-label-weight) semi-expanded max(.82em,11px)/1.3 var(--ec-font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.jy .jy__btn{position:relative;z-index:6;width:100%;justify-content:center;font-size:max(.98em,13px);padding:1.15em 1.3em;white-space:normal;text-align:center}
.jy__book .jy__glint{border-radius:inherit}

/* Vor dem Start der Animation (nur mit JavaScript): Startzustand, damit nichts springt */
.js .jy:not([data-jy-state]) .jy__vid{--p:0}
.js .jy:not([data-jy-state]) :is(.jy__sig,.jy__book,.jy__ln){opacity:0}
.js .jy:not([data-jy-state]) .jy__fill{--rail:0}

/* Kurze Desktop-Bildschirme: keine feste Bühne */
@media (min-width:901px) and (max-height:599px){
  .jy__track{height:auto}
  .jy__stage{position:relative;height:auto;padding:var(--sec-y) 0}
  .jy__cv{font-size:1cqw}
}

/* ---------- Handy und Tablet: eigene Hochkantfassung ---------- */
@media (max-width:900px){
  .jy__track{height:auto}
  .jy__stage{position:relative;height:auto;padding:clamp(3.2rem,2.4rem + 4vw,5rem) 0;overflow-x:clip;gap:1.4rem;
    background:radial-gradient(80% 30% at 50% 28%,rgba(173,169,134,.08),transparent 72%),radial-gradient(70% 24% at 60% 88%,rgba(110,108,76,.12),transparent 72%)}
  .jy__head h2{font-size:min(9.4vw,2.8rem)}
  .jy__cv{width:auto;height:auto;max-width:34rem;font-size:min(calc(100cqw / 27),17px);display:flex;flex-direction:column;gap:1.8em;padding-left:2.3em}
  .jy__links{display:none}
  .jy__rail{left:.42em;right:auto;top:.5em;bottom:2em;width:1px;height:auto}
  .jy__fill{transform-origin:50% 0;transform:scaleY(var(--rail,1))}
  .jy__col{position:relative;display:flex;flex-direction:column;gap:.9em}
  .jy__lab{position:relative;top:auto;left:auto!important;padding:0}
  .jy__lab::before{left:-2.3em;top:.15em}
  .jy__vid{position:relative;left:auto;top:auto;width:100%;transform:none;filter:none}
  .jy__ttl b{font-size:calc(8cqw * var(--ec-hs))}.jy__ttl em{font-size:6.6cqw}
  .jy__refl{display:none}
  .jy__trust{position:relative;left:auto;top:auto;width:auto;height:auto;display:flex;flex-direction:column;gap:.8em}
  .jy__sig{position:relative;top:auto!important;width:auto;height:auto;gap:.75em;padding:1.15em 1.25em}
  .jy__sig--off{margin-left:.9em}.jy__sig--ref{margin-left:1.8em}
  .jy__sig-t{font-size:max(calc(1.5em * var(--ec-hs)),15px)}
  .jy__rows{flex-direction:row;flex-wrap:wrap;gap:.45em .5em}
  .jy__row{padding:.36em .7em .36em .45em;border:1px solid rgba(240,238,229,.1);border-radius:2em;font-size:.86em}
  .jy__row:first-child{padding-top:.36em;border-top:1px solid rgba(240,238,229,.1)}
  .jy__row>i{width:1.25em;height:1.25em}
  .jy__row>i.jy__th{width:1.9em;height:1.2em}
  .jy__pfn em{white-space:normal}
  .jy__tags{margin-top:.75em;flex-wrap:wrap}
  .jy__book{position:relative;left:auto;top:auto;width:100%;height:auto;padding:0 1.5em 1.5em}
  .jy__bk-bar{margin:0 -1.5em}
  .jy__bk-ic{width:3.4em;margin:1.4em 0 .9em}
  .jy__bk-k{font-size:2.5em}
  .jy__bk-m{margin:.7em 0 1.3em}
  .jy .jy__btn{font-size:max(.95em,15px)}
  .js .jy:not([data-jy-state]) .jy__vid{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .jy__track{height:auto}
  .jy__stage{position:relative;height:auto;padding:var(--sec-y) 0}
  .jy *{transition:none!important}
}

/* ---------- Einwandvorwegnahme: kurzer Erklärsatz unter jeder Aussage ---------- */
.ob9__p{max-width:34ch;margin:clamp(.9rem,.6rem + .8vw,1.5rem) 0 0;font-size:clamp(1.05rem,.95rem + .45vw,1.4rem);line-height:1.4;color:var(--fg-2)}
.ob81__item--pr .ob9__txt{text-align:right}
.ob81__item--pr .ob9__p{margin-left:auto}
@media (max-width:900px){
  .ob81__item--pr .ob9__txt{order:-1;text-align:left}
  .ob81__item--pr .ob9__p{margin-left:0}
}

/* ==========================================================================
   Personal Brand Blueprint (/blueprint/, /blueprint/danke/, PHP-Seiten für Bestätigung und Abmeldung)
   Die Seite hat genau ein Ziel (Lead): ohne Termin-Button im Kopf, ohne Sticky-CTA.
   ========================================================================== */
.page-blueprint:not(.page-bpx) .header__cta{display:none}
.bp-hero{position:relative;overflow:hidden;padding:calc(var(--header-h) + clamp(1.5rem,1rem + 3vw,4rem)) 0 clamp(3rem,2rem + 4vw,6rem);
  background:radial-gradient(42% 46% at 76% 34%,rgba(173,169,134,.12),transparent 70%),radial-gradient(50% 40% at 70% 92%,rgba(110,108,76,.10),transparent 70%)}
.bp-hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy visual" "form visual";column-gap:clamp(2rem,1rem + 4vw,6rem);row-gap:clamp(1.6rem,1rem + 1.6vw,2.6rem);align-items:start}
.bp-hero__copy{grid-area:copy}
.bp-hero__visual{grid-area:visual;align-self:center;position:sticky;top:calc(var(--header-h) + 2rem)}
.bp-hero__form{grid-area:form}
.bp-hero__k{margin:0 0 1.2rem;color:var(--ec-accent)}
.bp-hero__h{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(3.1rem,1rem + 6.2vw,7.4rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking)}
.bp-hero__h span{display:block}
.bp-hero__h em{display:block;margin-top:.12em;font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:uppercase;letter-spacing:-.01em;font-size:.86em;color:var(--ec-accent)}
.bp-hero__lead{max-width:36ch;margin:clamp(1.1rem,.8rem + 1vw,1.7rem) 0 0;font-size:clamp(1.1rem,1rem + .45vw,1.4rem);line-height:1.45;color:var(--fg-2)}
.bp-hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.3rem 0 0;padding:0;font:var(--ec-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.bp-hero__facts li{display:flex;align-items:center;gap:.6rem}
.bp-hero__facts li::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--ec-accent)}

/* Formular: eine ruhige Karte, ein Button */
.bp-form{position:relative;padding:clamp(1.2rem,.9rem + 1.2vw,2rem);border:1px solid rgba(173,169,134,.22);border-radius:4px;background:linear-gradient(160deg,#161611,#0E0E0D 70%);box-shadow:0 2rem 4rem rgba(0,0,0,.4)}
.bp-form .row2+.row2 .field{margin-top:1rem}
.bp-form .field:first-child,.bp-form .hp+.row2 .field{margin-top:0}
.bp-form__nl{margin-top:1.3rem}
.bp-form__nl input{flex:none;width:20px;height:20px;margin-top:.15rem;accent-color:var(--ec-accent)}
.bp-form__btn{width:100%;justify-content:center;margin-top:1.4rem}
.bp-form__legal{margin:.9rem 0 0;font-size:.82rem;line-height:1.5;color:var(--fg-3)}
.bp-form__legal a,.bp-form__nl a{color:var(--fg-2)}

/* 3D-Mockup des echten Workbooks */
.bp-book{position:relative;width:min(100%,32rem);margin-inline:auto;aspect-ratio:1/1.12;perspective:1700px}
.bp-book__obj{position:absolute;left:18%;top:4%;width:62%;aspect-ratio:1200/1698;transform-style:preserve-3d;transform:rotateY(-26deg) rotateX(7deg) rotateZ(-1.2deg);transition:transform .9s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.bp-book:hover .bp-book__obj{transform:rotateY(-16deg) rotateX(4deg) rotateZ(-.6deg)}}
.bp-book__pg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px;box-shadow:0 1.4rem 3rem rgba(0,0,0,.55);filter:brightness(.72)}
.bp-book__pg--2{transform:translate3d(-30%,-4%,-70px) rotateZ(-10deg)}
.bp-book__pg--1{transform:translate3d(-16%,-1%,-36px) rotateZ(-5deg);filter:brightness(.84)}
.bp-book__body{position:absolute;inset:0;transform-style:preserve-3d}
.bp-book__edge{position:absolute;top:.8%;bottom:.8%;right:-2.6%;width:3.2%;border-radius:0 3px 3px 0;transform:translateZ(-3px);
  background:repeating-linear-gradient(90deg,#E9E7DC 0 1px,#C4BFAE 1px 2px);box-shadow:inset -3px 0 6px rgba(0,0,0,.35)}
.bp-book__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px 4px 4px 2px;
  box-shadow:0 2.6rem 4.6rem rgba(0,0,0,.66),0 .5rem 1.2rem rgba(0,0,0,.45),inset 0 0 0 1px rgba(173,169,134,.18)}
.bp-book__gloss{position:absolute;inset:0;border-radius:2px 4px 4px 2px;pointer-events:none;
  background:linear-gradient(112deg,rgba(240,238,229,.16) 0%,rgba(240,238,229,.04) 26%,transparent 42%,transparent 70%,rgba(240,238,229,.07) 100%),
    linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 3.5%,rgba(240,238,229,.08) 4.5%,rgba(0,0,0,0) 6%)}
.bp-book__floor{position:absolute;left:14%;right:8%;bottom:2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(6px)}
.bp-book__floor::after{content:"";position:absolute;inset:-60% 10%;background:radial-gradient(closest-side,rgba(173,169,134,.10),transparent);filter:blur(10px)}
.bp-book--small{width:min(100%,24rem)}

/* Was drin ist */
.bp-inside{border-top:1px solid var(--line)}
.bp-inside__head{max-width:46rem}
.bp-inside__head h2{margin:0}
.bp-inside__p{margin:1rem 0 0;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);color:var(--fg-2);max-width:44ch}
.bp-kap{list-style:none;margin:clamp(2rem,1.4rem + 2vw,3.4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.2rem,.8rem + 2vw,3rem);border-top:1px solid var(--line)}
.bp-kap li{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;padding:1rem 0 1.05rem;border-bottom:1px solid var(--line)}
.bp-kap__nr{grid-row:span 2;font:var(--ec-label);letter-spacing:.14em;color:var(--ec-accent);padding-top:.2rem}
.bp-kap__t{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(1.15rem * var(--ec-hs));line-height:1.05}
.bp-kap__s{margin-top:.3rem;font-family:var(--ec-font-body);font-style:italic;font-size:1.05rem;color:var(--fg-2)}
.bp-prev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.7rem,.4rem + 1vw,1.4rem);margin-top:clamp(2rem,1.4rem + 2vw,3.4rem)}
.bp-prev img{width:100%;height:auto;display:block;border-radius:2px;border:1px solid var(--line);box-shadow:0 1.2rem 2.4rem rgba(0,0,0,.45)}
.bp-inside__cta{margin:clamp(2rem,1.4rem + 2vw,3rem) 0 0}

/* Danke-Seite und PHP-Seiten (Bestätigen, Abmelden, abgelaufener Link) */
.bpx{position:relative;padding:calc(var(--header-h) + clamp(2rem,1.4rem + 3vw,5rem)) 0 clamp(3rem,2rem + 4vw,6rem);
  background:radial-gradient(40% 50% at 78% 40%,rgba(173,169,134,.10),transparent 70%)}
.bpx__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.bpx__wrap{max-width:52rem}
.bpx__h{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-mid);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2.8rem,1rem + 5.4vw,6.4rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading)}
.bpx__h em{font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;color:var(--ec-accent)}
.bpx__p{max-width:40ch;margin:1.2rem 0 0}
.bpx .btn-row{margin-top:1.6rem}
.bpx form{margin-top:1.6rem}
.bpx__note{max-width:46ch;margin:1.3rem 0 0;padding:.9rem 1.1rem;border-left:2px solid var(--ec-accent);background:rgba(173,169,134,.06);color:var(--fg)}
.bpx__note--warn{border-left-color:var(--ec-accent);background:rgba(173,169,134,.08)}
.bpx__small{margin:1.1rem 0 0;font-size:.88rem;color:var(--fg-3)}
.bpx-next{border-top:1px solid var(--line);padding:clamp(2.6rem,2rem + 2.4vw,4.4rem) 0;background:linear-gradient(180deg,rgba(110,108,76,.10),transparent)}
.bpx-next__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem 2rem}
.bpx-next__h{margin:0;max-width:24ch;font-size:calc(clamp(1.6rem,1rem + 2vw,2.8rem) * var(--ec-hs-long));font-stretch:var(--ec-head-stretch-long)}

@media (max-width:999px){
  .bp-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "visual" "form"}
  .bp-hero__visual{position:relative;top:auto}
  .bp-book{width:min(88%,26rem)}
  .bp-kap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bpx__grid{grid-template-columns:minmax(0,1fr)}
  .bpx__visual{max-width:20rem}
}
@media (max-width:600px){
  .bp-hero__h{font-size:calc(min(15.5vw,4.4rem) * var(--ec-hs-long))}
  .bp-book{width:min(92%,22rem);aspect-ratio:1/1.05}
  .bp-form .row2{grid-template-columns:minmax(0,1fr);gap:0}
  .bp-form .row2 .field+.field,.bp-form .row2+.row2 .field{margin-top:1rem}
  .bp-kap{grid-template-columns:minmax(0,1fr)}
  .bp-prev{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bpx__h{font-size:calc(min(14vw,4rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-mid)}
  .bpx-next .btn{width:100%;justify-content:center}
  .bpx .btn-row .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.bp-book__obj{transition:none}}

/* ==========================================================================
   Blog als Editorial Magazine (V9): Titelgeschichte groß, darunter ein Raster mit Covern. Keine Kartenboxen,
   keine Schatten, keine Animationen, die das Lesen stören (nur das ruhige .rv-Einblenden der Website).
   ========================================================================== */
.blog-hero h1{max-width:12ch}
.blog-hero__bp{display:flex;align-items:center;gap:.9rem;max-width:22rem;padding:.7rem .9rem .7rem .7rem;border:1px solid var(--line);border-radius:3px;color:var(--fg);text-decoration:none;transition:border-color var(--d-hover) ease}
.blog-hero__bp img{flex:none;width:2.6rem;height:auto;border-radius:1px;box-shadow:0 .4rem .9rem rgba(0,0,0,.5)}
.blog-hero__bp span{display:flex;flex-direction:column;gap:.15rem;font-size:.86rem;color:var(--fg-2)}
.blog-hero__bp b{font:var(--ec-label-weight) semi-expanded .68rem/1.3 var(--ec-font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ec-accent)}
.blog-hero__bp .arrow{display:inline;vertical-align:-2px;margin-left:.35rem}
@media (hover:hover) and (pointer:fine){.blog-hero__bp:hover{border-color:var(--line-2)}}

.mag{display:grid;gap:clamp(2.6rem,1.8rem + 3vw,5rem)}
.mag-kicker{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:0;font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ec-accent)}
.mag-kicker__dot{display:inline-flex;align-items:center;gap:.6rem;color:var(--fg)}
.mag-kicker__dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-accent)}
.mag-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:0;font:var(--ec-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.mag-meta time{color:var(--fg-2)}

/* Titelgeschichte */
.mag-lead{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.6rem,1rem + 3vw,4.4rem);align-items:center;padding-bottom:clamp(2.4rem,1.8rem + 2vw,4rem);border-bottom:1px solid var(--line-2)}
.mag-lead__media{margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:var(--bg-3)}
.mag-lead__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease-out)}
.mag-lead__text{display:flex;flex-direction:column;gap:clamp(1rem,.8rem + .8vw,1.6rem)}
.mag-lead__title{margin:0;font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);font-size:calc(clamp(2.4rem,1rem + 4.4vw,5.6rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);text-wrap:balance}
.mag-lead__title a{color:inherit;text-decoration:none}
.mag-lead__title a::after{content:"";position:absolute;inset:0;z-index:1}
.mag-lead__title a:focus-visible{outline:0}
.mag-lead__title a:focus-visible::after{outline:2px solid var(--fg);outline-offset:4px}
.mag-lead__deck,.mag-card__deck{display:block;margin-top:.22em;font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:none;letter-spacing:-.01em;font-size:calc(.52em / var(--ec-hs-long));line-height:1.05;color:var(--ec-accent)}
.mag-lead__t,.mag-card__t{display:block}
.mag-lead__excerpt{margin:0;max-width:46ch;font-size:var(--fs-lead);line-height:1.5;color:var(--fg-2)}
.mag-lead__go{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;color:var(--fg)}

/* Raster */
.mag-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.4rem,1.6rem + 2.4vw,4rem) clamp(1.4rem,1rem + 1.8vw,2.8rem)}
.mag-card,.mag-topic{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:.85rem}
.mag-card__media{margin:0 0 .35rem;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:var(--bg-3)}
.mag-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease-out)}
.mag-card__title{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.45rem,1.1rem + .9vw,1.95rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);text-wrap:balance}
.mag-card__title a{color:inherit;text-decoration:none}
.mag-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.mag-card__title a:focus-visible{outline:0}
.mag-card__title a:focus-visible::after{outline:2px solid var(--fg);outline-offset:4px}
.mag-card__excerpt{margin:0;color:var(--fg-2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .mag-lead:hover .mag-lead__media img,.mag-card:hover .mag-card__media img{transform:scale(1.03)}
  .mag-lead:hover .mag-lead__go,.mag-card:hover .mag-card__t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
}

/* Typografisches Cover (ohne Titelbild): Rubrik groß, Nummer, feiner Ring */
.tcov{position:relative;display:block;width:100%;height:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;
  background:radial-gradient(70% 90% at 82% 18%,rgba(173,169,134,.14),transparent 62%),linear-gradient(160deg,#1C1B15,#0E0E0D 70%)}
.mag-lead__media .tcov{aspect-ratio:16/9}
.tcov__ring{position:absolute;right:-12%;top:-30%;width:62%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(173,169,134,.5);box-shadow:0 0 0 7cqw rgba(173,169,134,.04),0 0 0 14cqw rgba(173,169,134,.025)}
.tcov__k{position:absolute;left:6cqw;top:6cqw;font:var(--ec-label-weight) semi-expanded max(2.1cqw,9px)/1 var(--ec-font-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.tcov__c{position:absolute;left:6cqw;right:6cqw;bottom:6cqw;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(10.5cqw * var(--ec-hs));line-height:var(--ec-head-leading);color:var(--fg);overflow-wrap:break-word;hyphens:auto}
.tcov__n{position:absolute;right:6cqw;top:6cqw;font:italic 5cqw/1 var(--ec-font-body);color:var(--ec-accent)}
.mag-topic .tcov{margin-bottom:.35rem}

/* Blueprint-Einladung (Artikel, leerer Blog) */
.bp-teaser{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem 1.4rem;align-items:center;margin:2.4rem 0;padding:1.3rem 1.4rem;border:1px solid rgba(173,169,134,.24);border-left:2px solid var(--ec-accent);background:linear-gradient(120deg,rgba(173,169,134,.06),transparent 60%)}
.bp-teaser__img{width:4.6rem;height:auto;border-radius:2px;box-shadow:0 .8rem 1.6rem rgba(0,0,0,.5);transform:rotate(-3deg)}
.bp-teaser__body{display:flex;flex-direction:column;gap:.5rem}
.bp-teaser .eyebrow{margin:0;color:var(--ec-accent)}
.bp-teaser__t{margin:0;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem);line-height:1.25;color:var(--fg)}
.prose .bp-teaser p{margin:0}
.prose .bp-teaser a{text-decoration:none}
.blog-empty .bp-teaser{margin-top:clamp(2.4rem,1.6rem + 2vw,4rem);max-width:46rem}

@media (max-width:999px){
  .mag-lead{grid-template-columns:minmax(0,1fr)}
  .mag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .mag-grid{grid-template-columns:minmax(0,1fr)}
  .bp-teaser{grid-template-columns:minmax(0,1fr)}
  .bp-teaser__img{width:3.6rem}
}

/* ==========================================================================
   Meine Meinung (/meinung/): Premium Editorial. Große Typografie, kurze Aussagen, echte Bilder.
   ========================================================================== */
.mn-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(16rem,28vw,30rem));align-items:end;gap:0;
  padding-top:calc(var(--header-h) + clamp(1.4rem,1rem + 2vw,3rem));border-bottom:1px solid var(--line);overflow:hidden}
.mn-hero>.wrap{width:100%;max-width:none;padding-bottom:clamp(2.4rem,1.6rem + 3vw,5rem)}
.mn-hero__k{margin:1.4rem 0 1rem;color:var(--ec-accent)}
.mn-hero__h{margin:0;hyphens:manual;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(4rem,1rem + 11vw,13rem) * var(--ec-hs));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking)}
.mn-hero__h em{font-family:var(--ec-font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:none;letter-spacing:-.02em;color:var(--ec-accent)}
.mn-hero__lead{max-width:30ch;margin:clamp(1.2rem,.9rem + 1vw,2rem) 0 0;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.5rem,1.1rem + 1.3vw,2.4rem);line-height:1.15;color:var(--fg)}
.mn-index{list-style:none;margin:clamp(2rem,1.4rem + 2vw,3.2rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0 1.6rem;border-top:1px solid var(--line)}
.mn-index a{display:flex;gap:.8rem;padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--fg-2);text-decoration:none;font-size:.92rem;line-height:1.3}
.mn-index span{font:var(--ec-label);letter-spacing:.14em;color:var(--ec-accent)}
@media (hover:hover) and (pointer:fine){.mn-index a:hover{color:var(--fg)}}
.mn-hero__media{position:relative;margin:0;align-self:stretch;min-height:100%}
.mn-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(.15) contrast(1.05) brightness(.86)}
.mn-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(8,8,8,0) 35%),linear-gradient(0deg,rgba(8,8,8,.5),transparent 40%)}

.mn-body{padding:clamp(1rem,.6rem + 2vw,3rem) 0 clamp(3rem,2rem + 4vw,6rem)}
.mn-list{list-style:none;margin:0;padding:0}
.mn-pt{position:relative;display:grid;grid-template-columns:clamp(3rem,2rem + 4vw,7rem) minmax(0,1fr);column-gap:clamp(1rem,.5rem + 2vw,3rem);padding:clamp(2.6rem,1.8rem + 3.4vw,5.6rem) 0;border-bottom:1px solid var(--line)}
.mn-pt__nr{grid-row:span 3;font:italic calc(clamp(2.4rem,1.6rem + 3vw,5rem) * var(--ec-hs-num))/1 var(--ec-font-body);color:var(--ec-accent)}
.mn-pt__h{grid-column:2;margin:0;max-width:17ch;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-mid);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(2.4rem,1rem + 4.6vw,6rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
.mn-pt__kern{grid-column:2;max-width:32ch;margin:clamp(1.2rem,.9rem + 1vw,2rem) 0 0;font-family:var(--ec-font-body);font-style:italic;font-size:clamp(1.4rem,1.1rem + 1vw,2.2rem);line-height:1.18;color:var(--fg)}
.mn-pt__tief{grid-column:2;max-width:56ch;margin:clamp(1rem,.8rem + .6vw,1.5rem) 0 0;font-size:clamp(1.02rem,.96rem + .25vw,1.15rem);line-height:1.65;color:var(--fg-2)}
@media (min-width:901px){
  .mn-pt--r{grid-template-columns:minmax(0,1fr) clamp(3rem,2rem + 4vw,7rem);text-align:right}
  .mn-pt--r .mn-pt__nr{grid-column:2;grid-row:1/span 3}
  .mn-pt--r .mn-pt__h,.mn-pt--r .mn-pt__kern,.mn-pt--r .mn-pt__tief{grid-column:1;justify-self:end}
}
.mn-img{margin:clamp(1rem,.6rem + 2vw,3rem) calc(50% - 50vw);aspect-ratio:21/9;overflow:hidden}
.mn-img picture,.mn-img img{display:block;width:100%;height:100%}
.mn-img img{object-fit:cover;object-position:50% 40%;filter:contrast(1.04) brightness(.9)}

.mn-end{border-top:1px solid var(--line);padding:clamp(3.4rem,2.4rem + 4vw,7rem) 0;background:radial-gradient(50% 80% at 20% 0%,rgba(173,169,134,.07),transparent 70%)}
.mn-end__h{margin:0 0 clamp(1.4rem,1rem + 1.4vw,2.4rem);max-width:20ch;font-size:calc(clamp(2.2rem,1rem + 3.6vw,4.6rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);font-stretch:var(--ec-head-stretch-long)}

@media (max-width:900px){
  .mn-hero{grid-template-columns:minmax(0,1fr)}
  .mn-hero__media{order:-1;min-height:0;aspect-ratio:4/3;margin-top:-.5rem}
  .mn-hero__media img{object-position:50% 22%}
  .mn-hero__media::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(8,8,8,0) 45%)}
  .mn-hero{padding-top:var(--header-h)}
  .mn-hero__h{font-size:calc(min(20vw,6.4rem) * var(--ec-hs))}
  .mn-pt{grid-template-columns:minmax(0,1fr)}
  .mn-pt__nr{grid-row:auto;margin-bottom:.8rem;font-size:calc(2.6rem * var(--ec-hs-num))}
  .mn-pt__h,.mn-pt__kern,.mn-pt__tief{grid-column:1}
  .mn-pt__h{font-size:calc(min(10.5vw,3.6rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-mid)}
  .mn-img{aspect-ratio:4/3}
  .mn-end .btn-row .btn{width:100%;justify-content:center}
}

/* Über Elvis: Verweis auf „Meine Meinung“ */
.ueber-mn__h{margin:.6rem 0 0;font-size:clamp(2.6rem,1rem + 5vw,6rem);line-height:.86}
.ueber-mn__h a{color:inherit;text-decoration:none}
.ueber-mn__p{margin:1rem 0 1.2rem;max-width:40ch;font-size:var(--fs-lead);color:var(--fg-2)}


/* ==== z10-cinematic.css ==== */
/* ==========================================================================
   Master V10 „Cinematic Black“ (03.11.2026), seit Master V13 „The Olive Edition“ auf die zentralen Tokens umgestellt.
   Lädt nach den übrigen Teilen (Name beginnt mit z). Farben, Schrift und Textur kommen nur noch aus den --ec-* Tokens
   in main.css; hier stehen keine eigenen Paletten mehr.
   Hintergrund nach Brand Book Kapitel 10 „Cinematic Black“: Espresso-Licht, feine Zeilen alle 3 px, Vignette ab 55 %
   und statisches Filmkorn (7 %, Kachel 220 px). Akzente in Überschriften erben die Schrift der Überschrift.
   ========================================================================== */

/* ---------- Hintergrund: Cinematic Black ---------- */
html{background:var(--ec-black)}
body{background:transparent}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{
  background:
    radial-gradient(70% 55% at 12% 0%,rgba(52,39,31,.55),rgba(52,39,31,0) 70%),
    radial-gradient(60% 50% at 92% 100%,rgba(52,39,31,.42),rgba(52,39,31,0) 72%),
    radial-gradient(46% 38% at 86% 6%,rgba(74,73,52,.14),rgba(74,73,52,0) 72%),
    radial-gradient(120% 90% at 50% 50%,rgba(8,8,8,0) 55%,rgba(0,0,0,.55) 100%),
    var(--ec-scan),
    var(--ec-black)}
/* Filmkorn: statische SVG-Rauschkachel (Brand Book: immer statisch, nie animiert) */
body::after{opacity:var(--ec-grain-black);background-image:var(--ec-grain-img);background-size:var(--ec-grain-size) var(--ec-grain-size)}

/* ---------- Typografie: eine Schriftfamilie, keine Schriftmischung in Überschriften ---------- */
/* :not(.ec-erbt em) passt auf jedes em und hält die Spezifität der früheren Regel (0,1,2), damit sie Bausteinregeln wie .ob8__h em schlägt */
:where(h1,h2,h3,h4,.display,p,span,a,li,b,strong,small,figcaption,dt,dd,blockquote,q,summary,label,button) em:not(.ec-erbt em){
  font-family:inherit;font-style:normal;font-weight:inherit;font-stretch:inherit;font-size:inherit;letter-spacing:inherit;
  line-height:inherit;text-transform:inherit;color:inherit}
:where(body) *{font-synthesis-style:none}
.prose em,.prose i{font-style:italic;font-synthesis-style:auto}
blockquote,.quote{font-style:normal}

/* ---------- Bausteine ---------- */
.textlink{text-decoration-color:var(--ec-accent)}

/* ---------- Header: kurz, ruhig; Termin-Button erscheint erst nach dem Haupt-CTA ---------- */
.header.is-stuck{background:rgba(8,8,8,.82);border-bottom-color:rgba(240,238,229,.08)}
.scrub i{background:var(--ec-accent)!important}
.nav a.is-active{color:var(--fg)}
.nav a.is-active::after{transform:scaleX(1);background:var(--ec-accent)}
.nav a[aria-current="page"]::after{background:var(--ec-accent)}
.js .header__cta{opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility .35s}
.js .header__cta.is-visible{opacity:1;visibility:visible;transform:none}
.header__cta .arrow{display:none}
@media (max-width:1000px){.header__cta{display:none}.burger{margin-left:auto}}

/* Handy: Termin-Button unten, Safe Area beachtet, erst nach dem Haupt-CTA */
.mcta{background:linear-gradient(180deg,rgba(8,8,8,0),rgba(8,8,8,.9) 38%);backdrop-filter:none;-webkit-backdrop-filter:none;border-top:0;
  padding:.9rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .38s var(--ease-out)}
.mcta.is-visible{transform:none}
.mcta .btn{min-height:52px;max-width:420px}

/* ---------- 01 Hero: The Statement Reveal ---------- */
.eh__backdrop{background:
  radial-gradient(ellipse 30% 46% at 57% 36%,rgba(107,84,68,.42) 0%,rgba(52,39,31,.34) 40%,rgba(8,8,8,0) 74%),
  radial-gradient(ellipse 42% 38% at 4% 96%,rgba(52,39,31,.5),rgba(52,39,31,0) 72%),
  linear-gradient(180deg,rgba(10,10,9,.6) 0%,rgba(8,8,8,0) 100%)}
.eh__dim{background:#080808}
.eh__rec i{background:var(--ec-accent)}
.eh__name{isolation:isolate}
.eh__word{position:relative}
.eh__st{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;
  mix-blend-mode:multiply;opacity:0;--r:0px;--mx:-999px;--my:-999px;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,#000 calc(var(--r) * .55),rgba(0,0,0,0) var(--r));
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,#000 calc(var(--r) * .55),rgba(0,0,0,0) var(--r))}
.eh__name.is-st .eh__st{opacity:1}
.eh__st-t{font-family:var(--ec-font-head);font-stretch:var(--ec-st-stretch,100%);font-weight:var(--ec-st-weight,700);text-transform:uppercase;font-size:var(--ec-st-size,.62em);line-height:1;
  letter-spacing:.01em;white-space:nowrap;color:var(--ec-st-color,var(--ec-olive-500))}   /* Olive 500: 3,7 : 1 auf Black, in den Buchstaben (multiply) dunkler */

/* ---------- 03 Beweise & Referenzen ---------- */
.pr10{border-top:1px solid var(--line)}
.pr10__case{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,1rem + 4vw,6rem);align-items:end;
  padding-bottom:clamp(2.6rem,1.8rem + 3vw,4.6rem);border-bottom:1px solid var(--line)}
.pr10 .cs81__num{margin:.2rem 0 0}
.pr10__label{margin:.6rem 0 0;font:var(--ec-label);letter-spacing:.3em;text-transform:uppercase;color:var(--fg-2)}
.pr10__rows{border-top:1px solid var(--line-2)}
.pr10__rows li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line);color:var(--fg)}
.pr10__rows small{color:var(--fg-3);font-size:.88rem}
.pr10__rows b{font:var(--ec-label);font-size:.82rem;letter-spacing:.08em;white-space:nowrap}
.pr10__note{margin:1rem 0 1.2rem;font-size:.92rem;line-height:1.55;color:var(--fg-3)}
.pr10__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 2rem;margin:clamp(2.6rem,1.8rem + 3vw,4.4rem) 0 clamp(1.4rem,1rem + 1.4vw,2.4rem)}
.pr10__head h2{margin:0}
.pr10__src{margin:0;font:var(--ec-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.pr10__refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,1rem + 1.6vw,2.6rem)}
.pr10__ref{display:flex;flex-direction:column}
.pr10__media{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:var(--bg-3)}
.pr10__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03);transition:transform 1.1s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pr10__ref:hover .pr10__media img{transform:scale(1.035)}}
.pr10__k{display:flex;gap:.8rem;margin:1.1rem 0 .5rem;font:var(--ec-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.pr10__k span{color:var(--fg-2)}
.pr10__t{margin:0;font-size:calc(clamp(1.6rem,1.2rem + 1.2vw,2.4rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-mid);font-weight:var(--ec-head-weight);text-transform:uppercase;line-height:var(--ec-head-leading)}
.pr10__facts{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;margin:.7rem 0 1rem;color:var(--fg-3);font-size:.92rem}
.pr10__facts b{color:var(--fg);font-weight:600}
.pr10__cs{margin-top:auto;display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;padding:.15rem 0;border-bottom:1px solid var(--ec-accent);
  font:var(--ec-label);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
@media (hover:hover) and (pointer:fine){.pr10__cs:hover{border-bottom-color:var(--ec-cream)}.pr10__cs:hover .arrow{transform:translateX(4px)}}
.pr10__cs .arrow{transition:transform var(--d-hover) var(--ease-out)}

/* ---------- 04 Leistungen (V8.3-System im neuen CI) ---------- */
.sy83{border-top:1px solid var(--line);background:transparent;--glass:linear-gradient(160deg,#241C17 0%,#1E1612 55%,#0C0A09 100%)}
.sy83__stage{background:radial-gradient(60% 48% at 52% 56%,rgba(107,84,68,.08),transparent 72%)}
.sy83__h{color:var(--fg)}
.sy83__links path{stroke:var(--ec-accent)!important}
.sy10__desc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem clamp(1rem,.6rem + 1.2vw,2rem);margin:0 0 1.1rem;padding:0;list-style:none}
.sy10__desc li{display:flex;flex-direction:column;gap:.3rem;padding-top:.7rem;border-top:1px solid var(--line-2);font-size:.86rem;line-height:1.4;color:var(--fg-2)}
.sy10__desc span{font:var(--ec-label);letter-spacing:.14em;color:var(--fg-3)}
.sy83__end .btn-row{margin:0}

/* ---------- 06 Über mich ---------- */
.ab10{position:relative;border-top:1px solid var(--line);padding-bottom:var(--sec-y)}
.ab10__media{margin:0;height:clamp(18rem,52vh,34rem);overflow:hidden}
.ab10__media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:contrast(1.04) brightness(.86) saturate(.9)}
.ab10__media::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(18rem,52vh,34rem);background:linear-gradient(180deg,rgba(8,8,8,0) 50%,#080808 100%);pointer-events:none}
.ab10__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,1rem + 4vw,6rem);align-items:end;margin-top:clamp(-6rem,-4vw,-2rem)}
.ab10 h2{margin:0;max-width:16ch}
.ab10__p{margin:1.2rem 0 1.4rem;max-width:46ch;font-size:var(--fs-lead);line-height:1.5;color:var(--fg-2)}
.ab10__work{border-top:1px solid var(--line-2)}
.ab10__work a{display:flex;flex-direction:column;gap:.2rem;padding:.95rem 0;border-bottom:1px solid var(--line);color:var(--fg-2);font-size:.92rem}
.ab10__work b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(1.2rem * .8);color:var(--fg)}
@media (hover:hover) and (pointer:fine){.ab10__work a:hover b{text-decoration:underline;text-decoration-color:var(--ec-accent);text-underline-offset:.15em}}

/* ---------- 05 Vorteil, Video, Fragen: kompakter ---------- */
.ob81 .sc81__run,.ob81 .pr81 b{background:var(--ec-cream)}
.bf8{padding-block:clamp(3rem,2rem + 3vw,5.5rem)}

@media (max-width:1000px){
  .pr10__case{grid-template-columns:minmax(0,1fr);align-items:start}
  .pr10__refs{grid-template-columns:minmax(0,1fr)}
  .sy10__desc{grid-template-columns:minmax(0,1fr)}
  .ab10__grid{grid-template-columns:minmax(0,1fr);margin-top:-2rem}
}
@media (min-width:601px) and (max-width:1000px){.pr10__refs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Kürzer (V10: Ziel 8 bis 9 Bildschirmhöhen auf dem Desktop) ---------- */
.pr10__num.cs81__top{margin-bottom:0}
@media (min-width:901px){
  .iv8 .iv__player{max-width:min(100%,calc((100svh - 19rem) * 16 / 9));margin-inline:auto}
  .iv8 .iv__head{max-width:min(100%,calc((100svh - 19rem) * 16 / 9));margin-inline:auto}
  .sy83__track{height:140svh}
  .ob81 .ob81__h{font-size:calc(clamp(2.6rem,1rem + 4.4vw,6.2rem) * var(--ec-hs-mid));font-stretch:var(--ec-head-stretch-long)}
  .ob81__list{gap:clamp(1.6rem,1rem + 2vw,3rem)}
  .ab10__media{height:clamp(16rem,42vh,28rem)}
  .ab10__media::after{height:clamp(16rem,42vh,28rem)}
}
.footer__claim{font-size:calc(clamp(1.8rem,1rem + 2.4vw,3.4rem) * var(--ec-hs-long))!important;font-stretch:var(--ec-head-stretch-long)}

/* ---------- Blog (V10): clean Editorial Magazine, ohne Rahmen in Akzentfarbe ---------- */
.tcov{background:radial-gradient(70% 90% at 82% 18%,rgba(52,39,31,.8),transparent 62%),linear-gradient(160deg,#1E1612,#080808 70%)}
.tcov__ring{border-color:rgba(107,84,68,.55);box-shadow:0 0 0 7cqw rgba(107,84,68,.05),0 0 0 14cqw rgba(107,84,68,.03)}
.tcov__n{font-style:normal;font-family:var(--ec-font-head);font-weight:var(--ec-head-weight);color:var(--fg-3)}
.mag-kicker{color:var(--fg-3)}
.mag-kicker__dot::before{background:var(--ec-accent)}
.mag-lead__deck,.mag-card__deck,.article__deck{font-family:var(--ec-font-body)!important;font-style:normal!important;font-weight:500;text-transform:none;letter-spacing:-.005em;color:var(--fg-2)}
.mag-card__deck{font-size:calc(.62em / var(--ec-hs-long))}   /* Untertitel in normaler Textgröße, nicht mit der Headline verkleinert */
.mag-grid{gap:clamp(2.6rem,1.8rem + 2.4vw,4.2rem) clamp(1.4rem,1rem + 1.8vw,2.8rem)}
.mag-card{gap:.7rem}
.bp-teaser{border:1px solid var(--line-2);border-left:1px solid var(--line-2);background:rgba(52,39,31,.28)}
.bp-teaser .eyebrow{color:var(--fg-3)}
.bp-teaser__t{font-family:var(--ec-font-body);font-style:normal;font-weight:500;color:var(--fg)}
.blog-hero__bp b{color:var(--fg-3)}
.blog-hero h1{font-weight:var(--ec-head-weight)}
.article__title{font-weight:var(--ec-head-weight)}
.author-box{border-color:var(--line)}
.lead-story__kicker span:first-child::before{background:var(--ec-accent)}

/* ---------- Blueprint (V10): Headline, ein Satz, großes Mockup, direktes Formular ---------- */
.bp-hero{background:radial-gradient(46% 52% at 76% 38%,rgba(52,39,31,.62),transparent 70%)}
.bp-hero__k{color:var(--fg-3)}
.bp-hero__h span{display:block}
.bp-hero__h span+span{color:var(--ec-accent)}
.bp-hero__facts li::before{background:var(--ec-accent)}
.bp-form{border-color:var(--line-2);background:linear-gradient(160deg,#1E1612,#080808 70%)}
.bp-form__btn{background:var(--ec-cream)}
.bp-book{width:min(100%,38rem)}
.bp-book__obj{left:14%;top:2%;width:68%}
.bp-book__floor::after{background:radial-gradient(closest-side,rgba(107,84,68,.18),transparent)}
.bpx{background:radial-gradient(40% 50% at 78% 40%,rgba(52,39,31,.6),transparent 70%)}
.bpx__note{border-left-color:var(--ec-accent);background:rgba(52,39,31,.35)}
.bpx-next{background:linear-gradient(180deg,rgba(52,39,31,.35),transparent)}

/* ---------- Meine Meinung (V10): große Aussagen, wenig Text ---------- */
.mn-hero__k{color:var(--fg-3)}
.mn-hero__lead{font-family:var(--ec-font-body);font-style:normal;font-weight:500;font-size:clamp(1.15rem,1rem + .6vw,1.6rem);line-height:1.35;color:var(--fg-2);max-width:34ch}
.mn-pt__nr{font-family:var(--ec-font-head);font-style:normal;font-weight:var(--ec-head-weight);font-stretch:var(--ec-head-stretch);color:var(--ec-accent)}
.mn-pt__kern{font-family:var(--ec-font-body);font-style:normal;font-weight:500;font-size:clamp(1.12rem,1rem + .55vw,1.5rem);line-height:1.4;color:var(--fg-2)}
.mn-end{background:radial-gradient(50% 80% at 20% 0%,rgba(52,39,31,.5),transparent 70%)}

/* ---------- Case Studies und weitere Seiten ---------- */
.hero__trust strong,.rf-case__k{color:var(--fg)}

/* Kursiv nur noch im Fließtext der Artikel (echte Hervorhebung), sonst überall aufrecht */
body *:not(.ec-erbt *):not(.prose *){font-style:normal}   /* gleiche Spezifität wie vor V13 */

/* Startseite: ruhigere, kürzere Abstände zwischen den Abschnitten (der Abschluss behält seine Abstände) */
body.page-home{--sec-y:clamp(3.5rem,2rem + 4.6vw,7rem)}
body.page-home .finale{--sec-y:clamp(4.5rem,2.6rem + 7vw,10rem)}

/* Footer etwas kompakter (der große Schriftzug bleibt) */
.footer{padding-top:clamp(2.6rem,1.6rem + 3vw,4.4rem)}
.footer__lead{padding-bottom:clamp(1.8rem,1.2rem + 2vw,3rem)}
.footer__mega{margin-top:clamp(1.8rem,1rem + 3vw,3.4rem)}

/* Fallstudie: Zahl so groß, dass das €-Zeichen nie in die Aufschlüsselung ragt */
.pr10 .cs81__num{font-size:calc(clamp(4.6rem,1.6rem + 8.4vw,10.5rem) * var(--ec-hs-num))}
.pr10__num{min-width:0;overflow:hidden;padding-right:.2em}


/* ==== z11-olive.css ==== */
/* ==========================================================================
   Master V13 „The Olive Edition“ (03.11.2026), Nachfolger von z11-bordeaux.css (V11). Lädt nach z10-cinematic.css.
   - Terminbuttons (.btn--cta: Sticky im Header und mobil unten): Olive mit Cream, Hover Olive 300 mit Olive 900,
     Verhalten und Einblendung unverändert (site.js).
   - Großer Abschluss (.finale): Fläche Olive 700 statt Bordeaux. Oberfläche nach Brand Book Kapitel 10 B „Olive“:
     warmes Espresso-Licht, Olive-Licht, Tiefe unten mit Olive 900, Vignette und statisches Filmkorn (6 %), keine
     Zeilen, keine Stofftextur. Lichtabfälle als 11 Stopps auf einer Smoothstep-Kurve. Texte, Spalten, Schritte und
     Abstände bleiben wie sie sind.
   - Statement Reveal: Maske und Radius aus V11 unverändert, nur die Farbe des Satzes ist Olive.
   - Fallstudie 750.000 €: Startseite (.pr11) und /fallstudie/ (.fs11) im neuen Schriftsystem.
   ========================================================================== */

/* ---------- Terminbutton (Sticky): Olive, Cream-Schrift, kein Glow ---------- */
.btn--cta,a.btn.btn--cta{background:var(--ec-cta-bg);color:var(--ec-cta-text);border-color:var(--ec-cta-bg);font-weight:var(--ec-btn-weight);box-shadow:none}
.btn.btn--cta::before{background:var(--ec-cta-hover-bg)}
@media (hover:hover) and (pointer:fine){
  .btn--cta:hover,a.btn.btn--cta:hover{color:var(--ec-cta-hover-text);border-color:var(--ec-cta-hover-bg)}
  .btn--cta:hover .arrow{transform:translateX(3px)}
}

/* ---------- Großer Abschluss: Olive-Oberfläche ----------
   ::before: Vignette mit Olive 900, warmes Licht (#6B5444 bei 35 %) oben rechts, Olive-Licht oben links, Tiefe unten.
   ::after: Filmkorn, statisch. Beides liegt unter dem Inhalt (isolation in main.css). */
.finale::before{background:
  radial-gradient(130% 115% at 50% 42%,rgba(28,27,19,0) 52%,rgba(28,27,19,.55) 100%),
  radial-gradient(ellipse 62% 76% at 88% 0%,rgba(107,84,68,0.35) 0%,rgba(107,84,68,0.34) 7%,rgba(107,84,68,0.314) 14%,rgba(107,84,68,0.274) 21%,rgba(107,84,68,0.227) 28%,rgba(107,84,68,0.175) 35%,rgba(107,84,68,0.123) 42%,rgba(107,84,68,0.076) 49%,rgba(107,84,68,0.036) 56%,rgba(107,84,68,0.01) 63%,rgba(107,84,68,0) 70%),
  radial-gradient(ellipse 48% 60% at 14% 14%,rgba(110,108,76,0.38) 0%,rgba(110,108,76,0.369) 7%,rgba(110,108,76,0.34) 14%,rgba(110,108,76,0.298) 21%,rgba(110,108,76,0.246) 28%,rgba(110,108,76,0.19) 35%,rgba(110,108,76,0.134) 42%,rgba(110,108,76,0.082) 49%,rgba(110,108,76,0.04) 56%,rgba(110,108,76,0.011) 63%,rgba(110,108,76,0) 70%),
  radial-gradient(ellipse 85% 58% at 58% 112%,rgba(28,27,19,0.8) 0%,rgba(28,27,19,0.778) 7%,rgba(28,27,19,0.717) 14%,rgba(28,27,19,0.627) 21%,rgba(28,27,19,0.518) 28%,rgba(28,27,19,0.4) 35%,rgba(28,27,19,0.282) 42%,rgba(28,27,19,0.173) 49%,rgba(28,27,19,0.083) 56%,rgba(28,27,19,0.022) 63%,rgba(28,27,19,0) 70%)}
.finale::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--ec-grain-color);
  background-image:var(--ec-grain-img);background-size:var(--ec-grain-size) var(--ec-grain-size)}
.finale__mega{color:rgba(240,238,229,.06)}

/* ---------- Statement Reveal: Maske aus V11 (doppelter Radius, weicher Auslauf), unverändert ---------- */
.eh__st{
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,#000 calc(var(--r) * .36),rgba(0,0,0,.8) calc(var(--r) * .56),rgba(0,0,0,.38) calc(var(--r) * .76),rgba(0,0,0,.1) calc(var(--r) * .9),rgba(0,0,0,0) var(--r));
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,#000 calc(var(--r) * .36),rgba(0,0,0,.8) calc(var(--r) * .56),rgba(0,0,0,.38) calc(var(--r) * .76),rgba(0,0,0,.1) calc(var(--r) * .9),rgba(0,0,0,0) var(--r))}

/* ---------- Große Zahlen: Ziffern in Cream mit Olive-Tiefe, Licht in Espresso ---------- */
.od__s::before,.od__p::before{
  background:linear-gradient(100deg,rgba(244,242,234,0) 35%,rgba(244,242,234,.9) 50%,rgba(244,242,234,0) 65%) no-repeat,linear-gradient(180deg,#F0EEE5 0%,#F0EEE5 46%,#C4BFAE 80%,#ADA986 100%);
  background-size:320% 100%,100% .86em;background-position:160% 0,0 0;-webkit-background-clip:text;background-clip:text}
.cs81__top::before{background:radial-gradient(50% 45% at 42% 55%,rgba(107,84,68,.16),rgba(107,84,68,0) 70%)}
.cs81__eur{color:var(--ec-accent)}

/* ---------- 03 Fallstudie auf der Startseite (V11) ---------- */
.pr11{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:0 clamp(2rem,1rem + 4vw,6rem);align-items:end;
  padding-bottom:clamp(2.4rem,1.6rem + 3vw,4.4rem);border-bottom:1px solid var(--line)}
.pr11__top{margin:0;min-width:0}
.pr11__h{margin:0;font-size:inherit;line-height:1}
.pr11 .cs81__num{font-size:calc(clamp(4.6rem,1.6rem + 8.4vw,10.5rem) * var(--ec-hs-num));margin:.2rem 0 0;overflow:hidden;padding-right:.2em}
.pr11__hl{display:block;margin-top:.1em;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;
  font-size:min(calc(clamp(2.2rem,1rem + 3.9vw,5.6rem) * var(--ec-hs)),calc((min(100vw,var(--maxw)) - 2 * var(--gutter)) / 12.3));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg)}
.pr11__side{padding-bottom:.4rem}
.pr11__sub{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;
  font-size:calc(clamp(1.35rem,1rem + 1.1vw,2.1rem) * var(--ec-hs-long));line-height:1;color:var(--fg)}
.pr11__text{margin:1rem 0 0;max-width:40ch;font-size:var(--fs-lead);line-height:1.45;color:var(--fg-2)}
.pr11__res{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:clamp(2rem,1.4rem + 2vw,3.4rem) 0 0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.pr11__res li{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:1.2rem clamp(1rem,.6rem + 1.4vw,2.2rem) 0 0}
.pr11__res li+li{padding-left:clamp(1rem,.6rem + 1.4vw,2.2rem);border-left:1px solid var(--line)}
.pr11__res b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(2.4rem,1.2rem + 3.2vw,4.8rem) * var(--ec-hs-num));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg-2);white-space:nowrap}
.pr11__res span{max-width:28ch;font-size:.92rem;line-height:1.45;color:var(--fg-3)}
.pr11__res .pr11__total b{color:var(--fg)}
.pr11__res .pr11__total span{color:var(--fg-2)}
.pr11__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.8rem 2rem;margin-top:clamp(1.6rem,1.2rem + 1.4vw,2.6rem)}
.pr11__work{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:0;padding:0;list-style:none}
.pr11__work li{padding:.35rem .7rem;border:1px solid var(--line-2);border-radius:2px;font:var(--ec-label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.pr11__work li:first-child{padding-left:0;border-color:transparent;color:var(--fg-3)}
@media (max-width:1000px){
  .pr11{grid-template-columns:minmax(0,1fr);align-items:start}
  .pr11__side{margin-top:1.4rem;padding:0}
}
@media (max-width:700px){
  .pr11__res{grid-template-columns:minmax(0,1fr)}
  .pr11__res li{padding:1rem 0;border-bottom:1px solid var(--line)}
  .pr11__res li+li{padding-left:0;border-left:0}
}

/* ---------- /fallstudie/ (V11): Präsentation eines Ergebnisses, kein Rechenschaftsbericht ---------- */
.fs11-hero{padding-bottom:clamp(2.6rem,1.6rem + 3vw,5rem)}
.fs11-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(44% 56% at 22% 46%,rgba(52,39,31,.62),rgba(52,39,31,0) 72%),radial-gradient(40% 50% at 92% 8%,rgba(52,39,31,.4),rgba(52,39,31,0) 70%)}
.fs11-hero{position:relative;isolation:isolate}
.fs11__top{margin:clamp(.6rem,.4rem + .6vw,1.2rem) 0 0}
.fs11-hero h1.fs11__h{max-width:none;margin:0;font-size:inherit;line-height:1}
.fs11__h .cs81__num{font-size:calc(clamp(5rem,1.4rem + 11vw,15rem) * var(--ec-hs-num));overflow:hidden;padding-right:.2em}
.fs11__hl{display:block;margin-top:.08em;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;
  font-size:min(calc(clamp(2.6rem,1rem + 5.4vw,8rem) * var(--ec-hs)),calc((min(100vw,var(--maxw)) - 2 * var(--gutter)) / 12.3));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg)}   /* „Auftragsvolumen.“ passt immer in die Breite */
.fs11__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem clamp(2rem,1rem + 4vw,6rem);align-items:end;margin-top:clamp(1.8rem,1.2rem + 2vw,3.2rem)}
.fs11__sub{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.6rem,1.1rem + 1.6vw,2.8rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);color:var(--fg)}
.fs11__lead{margin:0;max-width:42ch;font-size:var(--fs-lead);line-height:1.45;color:var(--fg-2)}
.fs11-hero .btn-row{margin-top:clamp(1.6rem,1.2rem + 1.2vw,2.4rem)}

.fs11-res{padding-top:0}
.fs11-res__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.fs11-res__list li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:.6rem clamp(2rem,1rem + 4vw,6rem);align-items:end;padding:clamp(1.4rem,1rem + 1.4vw,2.4rem) 0;border-bottom:1px solid var(--line)}
.fs11-res__list b{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);font-size:calc(clamp(3.4rem,1.6rem + 6.4vw,9.5rem) * var(--ec-hs-num));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);color:var(--fg-2);white-space:nowrap}
.fs11-res__list span{max-width:30ch;padding-bottom:.5em;font-size:clamp(1rem,.92rem + .35vw,1.25rem);line-height:1.4;color:var(--fg-2)}
.fs11-res__list .fs11__total{border-bottom:0}
.fs11-res__list .fs11__total b{color:var(--fg)}
.fs11-res__list .fs11__total span{color:var(--fg)}

.fs11-story{border-top:1px solid var(--line);background:radial-gradient(50% 70% at 82% 30%,rgba(52,39,31,.5),rgba(52,39,31,0) 72%)}
.fs11-story__h{margin:0;max-width:15ch;font-size:calc(clamp(2.8rem,1.2rem + 5.6vw,8.2rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);text-transform:uppercase;font-stretch:var(--ec-head-stretch-long)}
.fs11-story__p{margin:clamp(1.4rem,1rem + 1.2vw,2.2rem) 0 0;max-width:44ch;font-size:clamp(1.15rem,1rem + .6vw,1.6rem);line-height:1.4;color:var(--fg-2)}

.fs11-work{border-top:1px solid var(--line)}
.fs11-work .fs-parts{margin-top:clamp(1.2rem,1rem + 1vw,2rem)}
.fs11-work .fs-part__k{color:var(--fg-3)}
.fs11-work .fs-part__sum{margin:.7rem 0 1.2rem;font-size:calc(clamp(2.2rem,1.2rem + 2.8vw,4rem) * var(--ec-hs-sub));line-height:.9;text-transform:uppercase}
.fs11-work .fs-part__dl ul{display:flex;flex-wrap:wrap;gap:.4rem}
.fs11-work .fs-part__dl ul li{padding:.3rem .65rem;border:1px solid var(--line-2);border-radius:2px;font:var(--ec-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.fs11-work__back{margin:clamp(2rem,1.4rem + 2vw,3.2rem) 0 0}
@media (max-width:900px){
  .fs11__row{grid-template-columns:minmax(0,1fr);align-items:start}
  .fs11-res__list li{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .fs11-res__list span{padding-bottom:0}
  .fs11__h .cs81__num{font-size:calc(min(24vw,9rem) * var(--ec-hs-num))}
}


/* ==== z12-journal.css ==== */
/* ==========================================================================
   Master V12 „The Editorial Book“ (03.11.2026): die Blogübersicht /blog/ als aufgeschlagenes Buch.
   Markup: php/blog/lib/journal.php. Blättern: assets/js/journal.js (eigener Code, keine Bibliothek, kein WebGL).
   Desktop (ab 860 px) zwei Papierseiten (4:5) mit Mittelnaht, darunter eine Papierseite (3:4). Ohne JavaScript (html ohne .js)
   oder wenn journal.js nicht lädt (.jb--list): alle Beiträge als einfache Liste.
   Seit V13 (Olive Edition): Papier Warm Cream (--ec-paper) mit Korn, Tinte Black und Olive (--ec-ink*), Bindung und
   Schatten in warmem Olive-Neutral, außen Cinematic Black mit Olive- und Espresso-Licht; darunter der Olive-Terminbutton.
   ========================================================================== */

/* ---------- Kopf: kleine Editorial-Headline, danach sofort das Buch ---------- */
.jr-hero{padding-top:calc(var(--header-h) + clamp(1.2rem,.8rem + 1.6vw,2.6rem));padding-bottom:clamp(1.1rem,.8rem + 1vw,1.9rem)}
.jr-hero .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 2.4rem}
.jr-hero .crumbs{flex:1 0 100%;margin-bottom:.4rem}
.jr-hero .jr-hero__h{margin:0;max-width:none;font-size:calc(clamp(2rem,1rem + 2.6vw,3.6rem) * var(--ec-hs-mid));line-height:var(--ec-head-leading);text-transform:uppercase;font-stretch:var(--ec-head-stretch-mid)}
.jr-hero__s{margin:0;max-width:40ch;font-size:clamp(1rem,.94rem + .3vw,1.2rem);line-height:1.4;color:var(--fg-2)}

/* ---------- Das Buch ---------- */
.jr-book{padding-bottom:clamp(2.6rem,1.8rem + 3vw,4.6rem);
  background:radial-gradient(42% 46% at 50% 44%,rgba(74,73,52,.2),rgba(74,73,52,.1) 40%,rgba(74,73,52,0) 72%),radial-gradient(36% 40% at 16% 82%,rgba(52,39,31,.32),rgba(52,39,31,0) 70%)}
.jb{position:relative;margin-inline:auto;
  --pw:min(600px,calc((100vh - 18.5rem) * .8),calc((100vw - 2 * var(--gutter) - 11rem) / 2));
  --paper:var(--ec-paper); --ink-p:var(--ec-ink); --ink-p2:var(--ec-ink-2); --ink-p3:var(--ec-ink-3);
  --jp-grain:var(--ec-grain-paper-img);
  --gut-l:linear-gradient(270deg,rgba(28,27,19,.24) 0,rgba(28,27,19,.09) 2.6%,rgba(28,27,19,.03) 7%,rgba(28,27,19,0) 13%);
  --gut-r:linear-gradient(90deg,rgba(28,27,19,.24) 0,rgba(28,27,19,.09) 2.6%,rgba(28,27,19,.03) 7%,rgba(28,27,19,0) 13%);
  width:calc(var(--pw) * 2)}
@supports (height:100svh){.jb{--pw:min(600px,calc((100svh - 18.5rem) * .8),calc((100vw - 2 * var(--gutter) - 11rem) / 2))}}
.jb__book{position:relative;height:calc(var(--pw) * 5 / 4);touch-action:pan-y pinch-zoom}
/* Schatten des Buchs auf dem schwarzen Grund und ein Hauch Kantenstapel (Seiten darunter) */
.jb__book::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:2px;
  box-shadow:0 46px 70px -34px rgba(0,0,0,.9),0 14px 34px rgba(0,0,0,.45),-3px 2px 0 -1px #CDCABD,3px 2px 0 -1px #CDCABD,-5px 4px 0 -2px #A39F8E,5px 4px 0 -2px #A39F8E}
.jb__pages{position:relative;z-index:1;height:100%;margin:0;padding:0;list-style:none}
.jb__page{container-type:inline-size;--jp-gut:var(--gut-r)}
.jb__page:nth-child(odd){--jp-gut:var(--gut-l)}
.js .jb:not(.jb--list) .jb__page{position:absolute;top:0;display:none;width:var(--pw);height:100%}
@media (min-width:860px){
  .js .jb:not(.jb--list) .jb__page.is-l{display:block;left:0}
  .js .jb:not(.jb--list) .jb__page.is-r{display:block;left:var(--pw)}
}
/* Mittelnaht: feine Linie, weiche Bindung */
.jb__spine{position:absolute;top:0;bottom:0;left:calc(var(--pw) - 1px);z-index:2;width:2px;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,27,19,.2),rgba(28,27,19,.42) 10%,rgba(28,27,19,.42) 90%,rgba(28,27,19,.2));box-shadow:0 0 14px 4px rgba(28,27,19,.1)}

/* ---------- Papierseite ---------- */
.jp{position:relative;display:flex;flex-direction:column;gap:3.2cqw;height:100%;padding:8cqw 8.5cqw 10.5cqw;overflow:hidden;
  background-color:var(--paper);background-image:var(--jp-gut),var(--jp-grain);background-size:100% 100%,160px 160px;color:var(--ink-p)}
.jp__k{display:flex;justify-content:space-between;gap:1rem;margin:0;font:var(--ec-label);font-size:max(.64rem,1.95cqw);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-p2)}
.jp__no{color:var(--ink-p3)}
.jp__t{margin:0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(max(1.55rem,8.6cqw) * var(--ec-hs-long));line-height:var(--ec-head-leading);letter-spacing:var(--ec-head-tracking);
  color:var(--ink-p);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.jp__a{color:inherit;text-decoration:none}
.jp__a::after{content:"";position:absolute;inset:0;z-index:1}
.jp__a:focus-visible{outline:none}
.jp:has(.jp__a:focus-visible){outline:2px solid var(--ec-olive-500);outline-offset:-7px}
.jp__deck{display:block;margin-top:.45em;font-family:var(--ec-font-body);font-stretch:100%;font-weight:500;text-transform:none;font-size:calc(.4em / var(--ec-hs-long));line-height:1.28;letter-spacing:0;color:var(--ink-p2)}
.jp__media{position:relative;flex:0 1 auto;aspect-ratio:16/9;min-height:20cqw;margin:0;overflow:hidden;border-radius:1px;background:#D6D3C6}
.jp__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.jp__media picture{display:contents}
.jp__media .tcov{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.jp__x{margin:auto 0 0;font-size:max(.9rem,2.95cqw);line-height:1.42;color:var(--ink-p2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jp__meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:auto 0 0;padding-top:2.6cqw;border-top:1px solid rgba(8,8,8,.16);
  font:var(--ec-label);font-size:max(.64rem,1.95cqw);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-p3)}
.jp__x+.jp__meta{margin-top:0}
.jp__go{display:inline-flex;align-items:center;gap:.6em;font-weight:600;color:var(--ink-p)}
.jp__go .arrow{transition:transform var(--d-hover) var(--ease-out)}
.jp__pn{position:absolute;bottom:3.7cqw;right:8.5cqw;margin:0;font:var(--ec-label);font-size:max(.6rem,1.7cqw);letter-spacing:.22em;color:var(--ink-p3)}
.jb__page:nth-child(odd) .jp__pn,.jb__face--l .jp__pn{right:auto;left:8.5cqw}
@media (hover:hover) and (pointer:fine){
  .jp:hover .jp__media img{transform:scale(1.03)}
  .jp:hover .jp__go{text-decoration:underline;text-underline-offset:.3em}
  .jp:hover .jp__go .arrow{transform:translateX(4px)}
}
/* Leere rechte Seite am Ende und Titelseite ohne Artikel */
.jp--end{justify-content:flex-start}
.jp-end__t{margin:auto 0 0;font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-mid);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(max(1.8rem,9cqw) * var(--ec-hs-mid));line-height:var(--ec-head-leading);color:var(--ink-p)}
.jp-end__s{margin:0 0 auto;max-width:26ch;font-size:max(.9rem,2.95cqw);line-height:1.42;color:var(--ink-p2)}
.jp-topics{margin:auto 0;padding:0;list-style:none;border-top:1px solid rgba(8,8,8,.16)}
.jp-topics li{padding:2.2cqw 0;border-bottom:1px solid rgba(8,8,8,.12);font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(max(1.1rem,5cqw) * var(--ec-hs));line-height:1}

/* Einmaliger Hinweis: die rechte Seitenecke hebt sich kurz (Eselsohr), danach Ruhe */
.jp::before{content:"";position:absolute;right:0;bottom:0;z-index:2;width:11cqw;height:11cqw;pointer-events:none;transform:scale(0);transform-origin:100% 100%;
  background:linear-gradient(315deg,#080808 0 50%,#CDCABD 50%,#F2F0E8 72%,#DBD8CC 100%);box-shadow:-3px -3px 9px rgba(0,0,0,.14)}
@keyframes jb-hint{0%,100%{transform:scale(0)}35%,65%{transform:scale(1)}}
@media (min-width:860px){.jb.is-hint .jb__page.is-r .jp::before{animation:jb-hint 1.7s cubic-bezier(.45,.05,.25,1) 1}}
@media (max-width:859.98px){.jb.is-hint .jb__page.is-m .jp::before{animation:jb-hint 1.7s cubic-bezier(.45,.05,.25,1) 1}}

/* ---------- Blättern: Ränder, Pfeile, Seitenanzeige ---------- */
.jb__edge{position:absolute;top:0;bottom:0;z-index:5;width:calc(var(--pw) * .075);padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--d-hover) ease}
.jb__edge--prev{left:0}
.jb__edge--next{right:0}
.jb__edge[disabled]{display:none}
@media (hover:hover) and (pointer:fine){
  .jb__edge--prev:hover{background:linear-gradient(90deg,rgba(28,27,19,.14),rgba(28,27,19,0))}
  .jb__edge--next:hover{background:linear-gradient(270deg,rgba(28,27,19,.14),rgba(28,27,19,0))}
}
.jb__ctl{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,.8rem + 1vw,1.8rem);margin-top:clamp(1rem,.8rem + .8vw,1.5rem)}
.jb__btn{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:rgba(240,238,229,.03);color:var(--fg);cursor:pointer;
  transition:border-color var(--d-hover) ease,background var(--d-hover) ease,opacity var(--d-hover) ease}
.jb__btn .arrow{width:17px;height:17px}
.jb__btn[disabled]{opacity:.25;cursor:default}
.jb__btn:focus-visible{outline:2px solid var(--ec-cream);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.jb__btn:not([disabled]):hover{border-color:var(--ec-cream);background:rgba(240,238,229,.08)}}
.jb__count{min-width:7.2em;margin:0;text-align:center;font:var(--ec-label);font-size:.78rem;letter-spacing:.2em;color:var(--fg-2);font-variant-numeric:tabular-nums}
@media (min-width:1100px){
  .jb__btn{position:absolute;top:calc(var(--pw) * 5 / 8);transform:translateY(-50%)}
  .jb__btn--prev{left:-5.4rem}
  .jb__btn--next{right:-5.4rem}
}

/* Umschlagendes Blatt (nur während der Bewegung vorhanden; journal.js) */
.jb__fx{position:absolute;inset:0;z-index:4;pointer-events:none;perspective:3200px}
.jb__leaf{position:absolute;top:0;width:var(--pw);height:100%;transform-style:preserve-3d;will-change:transform}
.jb__leaf--r{left:var(--pw);transform-origin:0 50%}
.jb__leaf--l{left:0;transform-origin:100% 50%}
.jb__leaf--m{left:0;transform-origin:0 50%}
.jb__face{position:absolute;inset:0;container-type:inline-size;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;--jp-gut:var(--gut-r)}
.jb__face--l{--jp-gut:var(--gut-l)}
.jb__face--back{transform:rotateY(180deg)}
.jb__face--blank{background-color:var(--paper);background-image:var(--jp-gut),var(--jp-grain);background-size:100% 100%,160px 160px}
.jb__shade{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,19,13,.55),rgba(20,19,13,.12))}
.jb__face--l .jb__shade{background:linear-gradient(270deg,rgba(20,19,13,.55),rgba(20,19,13,.12))}
.jb__cast{position:absolute;top:0;height:100%;width:var(--pw);opacity:0}
.jb__cast--r{left:var(--pw);background:linear-gradient(90deg,rgba(8,8,8,.5),rgba(8,8,8,.14) 38%,rgba(8,8,8,0) 78%)}
.jb__cast--l{left:0;background:linear-gradient(270deg,rgba(8,8,8,.5),rgba(8,8,8,.14) 38%,rgba(8,8,8,0) 78%)}

/* ---------- Handy und schmale Tablets: eine Papierseite, Bindung links ---------- */
@media (max-width:859.98px){
  .jb{--pw:min(500px,calc(100vw - 2 * var(--gutter)),calc((100vh - 12.5rem) * .75));width:var(--pw)}
  @supports (height:100svh){.jb{--pw:min(500px,calc(100vw - 2 * var(--gutter)),calc((100svh - 12.5rem) * .75))}}
  .jb__book{height:calc(var(--pw) * 4 / 3)}
  .jb__book::before{box-shadow:0 34px 54px -28px rgba(0,0,0,.9),0 10px 26px rgba(0,0,0,.45),3px 2px 0 -1px #CDCABD,5px 4px 0 -2px #A39F8E}
  .jb__page,.jb__page:nth-child(odd){--jp-gut:var(--gut-r)}
  .jb__page:nth-child(odd) .jp__pn{left:auto;right:8.5cqw}
  .js .jb:not(.jb--list) .jb__page.is-m{display:block;left:0}
  .jb__spine{left:0;width:3px;background:linear-gradient(90deg,rgba(28,27,19,.45),rgba(28,27,19,0));box-shadow:none}
  .jb__fx{overflow:hidden}
  .jb__edge{width:calc(var(--pw) * .08)}
  .jp{padding:8.5cqw 8.5cqw 11cqw;gap:3.6cqw}
  .jp__t{-webkit-line-clamp:4}
}

/* ---------- Ohne JavaScript (oder wenn journal.js nicht lädt): einfache Liste aller Beiträge ---------- */
html:not(.js) .jb,.jb.jb--list{width:auto;max-width:44rem}
html:not(.js) .jb__book,.jb--list .jb__book{height:auto}
html:not(.js) .jb__book::before,.jb--list .jb__book::before,
html:not(.js) .jb__spine,.jb--list .jb__spine,html:not(.js) .jb__edge,.jb--list .jb__edge,
html:not(.js) .jb__ctl,.jb--list .jb__ctl,html:not(.js) .jb__page--end,.jb--list .jb__page--end{display:none}
html:not(.js) .jb__pages,.jb--list .jb__pages{display:grid;gap:1.2rem}
html:not(.js) .jb__page,.jb--list .jb__page{--jp-gut:linear-gradient(transparent,transparent)}
html:not(.js) .jp,.jb--list .jp{height:auto;gap:1rem;padding:1.6rem 1.6rem 2.2rem}
html:not(.js) .jp__media,.jb--list .jp__media{flex:none;aspect-ratio:16/9}
html:not(.js) .jp__t,.jb--list .jp__t{font-size:calc(clamp(1.6rem,1.2rem + 1.6vw,2.4rem) * var(--ec-hs-long))}
html:not(.js) .jp__pn,.jb--list .jp__pn{display:none}

@media (prefers-reduced-motion:reduce){.jp__media img{transition:none}.jb.is-hint .jp::before{animation:none}}

/* ---------- Kurzer Abschluss unter dem Buch: Text und Buttons links, das Workbook rechts (Handy: darunter) ---------- */
.jb-end{border-top:1px solid var(--line);padding-block:clamp(3rem,2rem + 3.4vw,5.6rem)}
.jb-end__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:1.6rem clamp(2rem,1rem + 4vw,6rem)}
.jb-end__h{margin:0;max-width:20ch;font-size:calc(clamp(2rem,1.2rem + 2.6vw,3.8rem) * var(--ec-hs-long));line-height:var(--ec-head-leading);text-transform:uppercase;font-stretch:var(--ec-head-stretch-long)}
.jb-end .btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.8rem;margin:clamp(1.4rem,1rem + 1.2vw,2.2rem) 0 0}
.jb-end__book{display:block;justify-self:center;width:min(100%,24rem)}
.jb-end .bp-book--journal{width:100%;margin:0}
@media (hover:hover) and (pointer:fine){.jb-end__book:hover .bp-book__obj{transform:rotateY(-16deg) rotateX(4deg) rotateZ(-.6deg)}}
@media (max-width:859.98px){
  .jb-end__in{grid-template-columns:minmax(0,1fr)}
  .jb-end__book{width:min(78%,19rem);margin-top:.4rem}
  .jb-end .bp-book--journal{aspect-ratio:1/1.05}
}

/* ---------- Artikelende: zurück zum Journal, nächster Artikel ---------- */
.art-end{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.2rem clamp(1.6rem,1rem + 3vw,4rem);align-items:stretch;
  margin-block:clamp(2.6rem,1.8rem + 2.6vw,4.4rem) clamp(3rem,2rem + 3vw,5rem);padding-top:clamp(1.4rem,1rem + 1vw,2rem);border-top:1px solid var(--line-2)}
.art-end__back{display:inline-flex;align-items:center;gap:.7rem;align-self:start;min-height:44px;font:var(--ec-label);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
.art-end__back .arrow{transition:transform var(--d-hover) var(--ease-out)}
.art-end__next{display:flex;flex-direction:column;gap:.55rem;padding:1.4rem 1.5rem 1.3rem;border-radius:2px;background-color:var(--ec-paper);background-image:var(--ec-grain-paper-img);color:#080808}
.art-end__k{font:var(--ec-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ec-ink-3)}
.art-end__t{font-family:var(--ec-font-head);font-stretch:var(--ec-head-stretch-long);font-weight:var(--ec-head-weight);text-transform:uppercase;font-size:calc(clamp(1.4rem,1.1rem + 1vw,2.1rem) * var(--ec-hs-long));line-height:var(--ec-head-leading)}
.art-end__go{display:inline-flex;align-items:center;gap:.6rem;margin-top:.3rem;font:var(--ec-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ec-ink)}
.art-end__go .arrow{transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .art-end__back:hover .arrow{transform:translateX(-4px)}
  .art-end__next:hover .art-end__go .arrow{transform:translateX(4px)}
  .art-end__next:hover .art-end__t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
}
@media (max-width:760px){.art-end{grid-template-columns:minmax(0,1fr)}}

/* ---------- Artikel: Lesebereich als cremefarbenes Blatt (V12, Wunsch von Elvis) ----------
   Kopf, Titelbild und Abschluss bleiben Cinematic Black; Text, Inhaltsverzeichnis, Schlagwörter, Quellen und Autorenbox
   liegen auf Papier. Umgestellt werden nur die Farb-Tokens, alle Bausteine im Text passen sich dadurch an.
   Videos und Referenzkacheln bleiben dunkle Flächen auf dem Blatt. */
.page-blog .art-sheet{margin-top:clamp(2rem,1.4rem + 2vw,3.6rem)}
.page-blog .art-paper{--sheet-pad:clamp(1.25rem,.4rem + 3.6vw,4.6rem);
  --fg:var(--ec-ink); --fg-2:var(--ec-ink-2); --fg-3:var(--ec-ink-3); --prose-ink:var(--ec-olive-900);
  --line:rgba(8,8,8,.12); --line-2:rgba(8,8,8,.24);
  --bg:var(--ec-paper); --bg-2:#E6E4DA; --bg-3:#DEDBCF; --card:#E6E4DA; --chip:#DEDBCF;
  --ink:var(--ec-paper); --ec-accent:var(--ec-olive-500); --ec-quote:var(--ec-olive-700);
  position:relative;padding-inline:var(--sheet-pad);border-radius:2px;color:var(--prose-ink);
  background-color:var(--ec-paper);
  background-image:var(--ec-grain-paper-img);
  box-shadow:0 50px 90px -46px rgba(0,0,0,.9),0 16px 40px rgba(0,0,0,.4)}
.page-blog .art-paper ::selection{background:var(--ec-olive-700);color:var(--ec-cream)}
.page-blog .art-paper .prose a:not([class]){text-decoration-color:rgba(74,73,52,.6)}
@media (hover:hover) and (pointer:fine){.page-blog .art-paper .prose a:not([class]):hover{text-decoration-color:var(--fg)}}
.page-blog .art-paper .author-box .author-box__img{filter:grayscale(.6) contrast(1.04)}
/* Termin im Text ([[cta]]): Olive wie alle Terminbuttons (Regeln aus main.css, die Papier-Tokens ändern daran nichts) */
.page-blog .art-paper .bp-teaser{background:rgba(74,73,52,.07)}
/* Link der Blueprint-Box: „.prose a“ (--accent-text, Creme) war auf dem Blatt unsichtbar; Tinte wie der Text der Box */
.page-blog .art-paper .prose .bp-teaser .textlink{color:var(--fg)}
/* Dunkle Flächen auf dem Blatt: Video-Fassade und Referenzkachel behalten die Werte der schwarzen Seite */
.page-blog .art-paper :is(.yt,.refcard){--fg:var(--ec-text); --fg-2:var(--ec-text-muted); --fg-3:var(--ec-text-quiet); --line:var(--ec-rule); --line-2:rgba(240,238,229,.2);
  --bg:var(--ec-bg); --bg-2:var(--ec-surface); --bg-3:var(--ec-surface-2); --card:var(--ec-surface); --ink:var(--ec-ink); --ec-accent:var(--ec-olive-300); color:var(--fg)}
@media (min-width:1200px){
  .page-blog .art-paper .prose .table-wrap{width:max(100%,min(62rem,calc(min(100vw,var(--maxw)) - 2 * var(--gutter) - 2 * var(--sheet-pad) - 15rem - var(--a-gap) - 1.5rem)))}
}
@media (max-width:1000px){
  .page-blog .art-paper{margin-inline:min(0px,calc(8px - var(--gutter)));--sheet-pad:clamp(1rem,.6rem + 2vw,2rem)}
}