/* Projekt Phantom Premium 0.9.0
   Wird nach site.css geladen und ersetzt dessen Darstellungsebene durch ein Token-/Komponentensystem.
   Richtung: warmes Porzellan, tiefes Ink, ein kontrolliertes Kobalt, Rasterlinien statt Schlagschatten.
   Keine externen Schriften, Assets oder Skripte. Funktions- und App-Shell-Verträge aus site.css/site.js bleiben unberührt.

   Gliederung
   0  Tokens
   1  Typografie und Grundelemente
   2  Header, Navigation, Footer
   3  Komponente „Premium-Grafik“ (.pp-*) inkl. Container-Varianten
   4  Startseite
   5  Leistungsseiten (Hero, Listen, Dossiers, Rollen, Phasen)
   6  Demos (Karten, Miniansichten, bedienbare Produktansicht)
   7  Kontakt, Rechtstexte
   8  Telefonmodus (gleiche Bedingung wie site.js/site.css)
   9  Bewegung (einmalig, endlich, Reduced Motion)

   Medienbedingungen
   DESK  = (min-width:1061px), (min-width:801px) and (min-height:481px)   (Komplement des Telefonmodus)
   PHONE = (max-width:800px), (max-width:1060px) and (max-height:480px)  (unverändert) */

/* ---------- 0 Tokens ---------- */
:root{
  /* Flächen und Linien */
  --bg:#f5f2ec;--surface:#fdfcf9;--soft:#ece7dd;--sand:#efe8da;
  --line:#ddd6c8;--line-strong:#c4bba8;--grid:rgba(13,21,32,.055);
  /* Schrift */
  --ink:#0d1520;--muted:#474f5d;--faint:#5a6270;
  /* Akzent: Kobalt; Bereichsakzent Rohstoffe sehr sparsam in gedecktem Petrol */
  --blue:#1f4fd1;--blue-dark:#1639a3;--blue-soft:#e6eaf6;--cyan:#6f8fe6;
  --teal:#2c6a63;--teal-soft:#e6eeea;
  /* Zustände (immer zusätzlich durch Form/Text, nie nur Farbe) */
  --amber:#d49a2a;--amber-soft:#f5ebd3;--amber-ink:#6b4408;
  --ok:#2f8a64;--ok-ink:#1f5a43;--ok-soft:#e3f0ea;
  /* Form */
  --radius:6px;--radius-s:3px;--shadow:0 28px 48px -36px rgba(13,21,32,.38);--max:1240px;
  /* Schrift-Stapel (lokal, keine Webfonts) */
  --font-sans:ui-sans-serif,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,"Helvetica Neue",Arial,system-ui,sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Noto Serif",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* Abstandsskala (4er-Raster) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
}

/* ---------- 1 Typografie und Grundelemente ---------- */
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);font-feature-settings:"kern","liga","calt";text-rendering:optimizeLegibility}
::selection{background:#c9d4f3;color:var(--ink)}
h1,h2{font-family:var(--font-serif);font-weight:500;letter-spacing:-.022em;line-height:1.06}
h3,h4{font-family:var(--font-sans);font-weight:650;letter-spacing:-.018em;line-height:1.22}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--blue)}
p{color:var(--muted)}
.eyebrow{color:var(--blue-dark);font-weight:650;letter-spacing:.15em}
.eyebrow-line{background:var(--blue)}
.title-period{color:var(--blue)}
.button,.text-link,.demo-card-link,.field-link{transition:background .2s ease,color .2s ease,border-color .2s ease}
.button{min-height:52px;border-radius:var(--radius-s);font-weight:620;letter-spacing:.005em}
.button-primary{background:var(--blue);color:#fff;box-shadow:none}
.button-primary:hover{background:var(--blue-dark);transform:none}
.button-dark{background:var(--ink)}
.button-dark:hover{background:var(--blue-dark);transform:none}
.button-light{background:var(--ink);color:#fff}
.button-light:hover{background:var(--blue-dark);transform:none}
.text-link{border-bottom-color:currentColor}
.inline-link{color:var(--blue-dark)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- 2 Header, Navigation, Footer ---------- */
.site-header{background:rgba(245,242,236,.9);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.3) blur(16px);-webkit-backdrop-filter:saturate(1.3) blur(16px)}
.brand-mark span{border-radius:1px}
.brand-mark span:nth-child(1){background:var(--ink)}
.brand-mark span:nth-child(2){background:var(--blue)}
.brand-mark span:nth-child(3){background:#9db1ee}
.brand-wordmark strong{font-weight:780}
.site-nav a{color:#27303d;font-weight:570;letter-spacing:.005em}
.site-nav a:hover{color:var(--blue)}
.site-nav a.is-current:not(.nav-cta){color:var(--ink)}
.site-nav a.is-current:not(.nav-cta)::after{height:1.5px;bottom:-9px;background:var(--blue)}
.site-nav .nav-cta{border-radius:var(--radius-s);background:var(--ink);color:#fff}
.site-nav .nav-cta:hover{background:var(--blue)}
.site-nav .lang-switch a{border-radius:var(--radius-s);border-color:var(--line-strong)}
.nav-toggle,.m-menu-btn,.m-menu-close{border-color:var(--line-strong);border-radius:var(--radius-s);background:var(--surface)}
@media(max-width:1060px){
  .site-nav{background:var(--surface);border-bottom:1px solid var(--line-strong);box-shadow:none}
}
.site-footer{background:var(--soft);color:var(--ink);border-top:1px solid var(--line-strong)}
.footer-top .eyebrow{color:var(--blue-dark)}
.footer-top h2{font-weight:500}
.footer-top h2 em{color:var(--blue)}
.footer-bottom{border-top:1px solid var(--line-strong)}
.footer-bottom p{color:var(--muted)}
.footer-bottom strong{letter-spacing:.12em}
.footer-links a{color:var(--ink)}
.footer-links a:hover{color:var(--blue-dark)}
.footer-note{border-top:1px solid var(--line);color:var(--faint)}
.contact-direct a,.footer-contact a{text-underline-offset:3px}

/* ---------- 3 Komponente „Premium-Grafik“ ---------- */
.pp-visual{container:ppv/inline-size;position:relative;isolation:isolate;margin:0;padding:clamp(16px,2.4vw,30px);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.pp-visual::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.2));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.2))}
.pp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 clamp(16px,2vw,24px);padding-bottom:12px;border-bottom:1px solid var(--line-strong);color:var(--ink);font-family:var(--mono);font-size:10.5px;font-weight:650;letter-spacing:.12em;line-height:1.35;text-transform:uppercase}
.pp-head-title{min-width:0}
.pp-chip{padding:3px 9px;border:1px solid var(--line-strong);border-radius:99px;background:var(--surface);color:var(--faint);letter-spacing:.06em}
.pp-label{display:block;margin:0 0 8px;color:var(--faint);font-family:var(--mono);font-size:10px;font-weight:650;letter-spacing:.12em;line-height:1.3;text-transform:uppercase}
.pp-tag{color:var(--blue-dark);font-family:var(--mono);font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}
.pp-pill{display:inline-flex;align-items:center;padding:6px 14px;border:1.5px solid var(--ink);border-radius:99px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:650;line-height:1.3}

/* Zeichen für Zustände: Form + Text, nicht nur Farbe */
.pp-glyph{position:relative;flex:none;display:inline-block;width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;background:var(--surface)}
.pp-glyph--open{border-style:dashed}
.pp-glyph--review{background:linear-gradient(90deg,var(--ink) 50%,var(--surface) 50%)}
.pp-glyph--done{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.3 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat}
.pp-glyph--diff{width:13px;height:13px;border-color:var(--amber-ink);border-radius:2px;background:var(--amber-soft);transform:rotate(45deg)}

/* Verbindungslinien (dekoratives SVG) */
.pp-w{display:block;width:100%;height:auto;color:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round}
.pp-w path{stroke-linejoin:round}
.pp-merge{margin:0}

/* Zellen (Quellen / verstreute Wege) */
.pp-cells{display:grid;margin:0;padding:0;list-style:none}
.pp-cells--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp-cells--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pp-cells>li{display:flex;min-width:0;padding-inline:4px}
.pp-ist>li>span{display:flex;flex:1;align-items:center;justify-content:center;min-height:54px;padding:8px 10px;border:1px dashed var(--line-strong);background:var(--surface);font-size:12.5px;font-weight:620;line-height:1.3;text-align:center;overflow-wrap:break-word}
.pp-docs>li>.pp-doc{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0;padding:10px 12px;border:1px solid var(--line-strong);background:var(--surface)}
.pp-doc b{color:var(--blue-dark);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em}
.pp-doc>span{font-size:12.5px;font-weight:620;line-height:1.3;overflow-wrap:break-word}
.pp-bars{display:grid;gap:4px;margin-top:2px}
.pp-bars s{display:block;height:4px;background:var(--soft);text-decoration:none}
.pp-bars s:nth-child(2){width:72%}
.pp-bars s:nth-child(3){width:46%}

/* (1) Vorgang / Übergabe: Zeitleiste mit Schienen */
.pp-steps{position:relative;display:grid;margin:0;padding:0;list-style:none;counter-reset:pp}
.pp-steps{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.pp-steps::before{content:"";position:absolute;left:calc(50% / var(--n,4));right:calc(50% / var(--n,4));top:5px;height:1.5px;background:var(--blue);transform-origin:left center}
.pp-steps>li{position:relative;counter-increment:pp;padding:24px 6px 0;text-align:center;min-width:0}
.pp-steps>li::before{content:"";position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-5.5px;border:2px solid var(--blue);border-radius:50%;background:var(--surface)}
.pp-steps>li:last-child::before{background:var(--blue)}
.pp-steps strong{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.pp-steps strong::before{content:counter(pp,decimal-leading-zero);display:block;margin-bottom:3px;color:var(--blue-dark);font-family:var(--mono);font-size:10.5px;font-weight:650;letter-spacing:.1em}
.pp-steps span{display:block;margin-top:3px;color:var(--muted);font-size:12.5px;line-height:1.4}
.pp-states{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none}
.pp-states li{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border:1px solid var(--line-strong);border-radius:99px;background:var(--surface);font-size:12px;font-weight:620;line-height:1.3}

/* (2) Quellenabgleich / Dossier */
.pp-compare{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;width:min(100%,380px);margin:0 auto;padding:10px 16px;border:1.5px solid var(--blue);background:var(--blue-soft);text-align:center}
.pp-compare strong{font-size:14px;font-weight:650}
.pp-split{width:calc(100% - 32px);margin-inline:16px}
.pp-sheet{position:relative;padding:14px 16px 6px;border:1px solid var(--ink);background:#fff}
.pp-sheet::after{content:"";position:absolute;top:-1px;right:-1px;width:18px;height:18px;border-bottom:1px solid var(--ink);border-left:1px solid var(--ink);background:linear-gradient(225deg,var(--surface) 50%,var(--soft) 50%)}
.pp-sheet-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-right:18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pp-sheet-head strong{font-size:14px;font-weight:700}
.pp-date{display:inline-flex;align-items:center;gap:8px;color:var(--faint);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.pp-date i{display:inline-block;width:52px;height:5px;background:var(--soft)}
.pp-verdicts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.pp-verdicts li{display:flex;align-items:flex-start;gap:9px;padding:12px 10px 12px 12px;font-size:12.5px;font-weight:620;line-height:1.35}
.pp-verdicts li+li{border-left:1px solid var(--line)}
.pp-verdicts .pp-glyph{margin-top:1px}

/* (3) Anfrageprofil → Unterlagen → Kontakt */
.pp-origin{margin:0 0 14px}
.pp-stages{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:0;padding:0;list-style:none;counter-reset:pp}
.pp-stage{position:relative;counter-increment:pp;min-width:0;padding:14px 14px 16px;border:1px solid var(--line-strong);background:var(--surface)}
.pp-stage:not(:last-child)::after{content:"";position:absolute;top:26px;right:-29px;width:22px;height:1.5px;background:var(--blue)}
.pp-stage:not(:last-child)::before{content:"";position:absolute;top:22.25px;right:-30px;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;border-left:7px solid var(--blue)}
.pp-stage--end{border-color:var(--ink)}
.pp-stage-title{display:block;margin-bottom:12px;font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.pp-stage-title::before{content:counter(pp,decimal-leading-zero);margin-right:8px;color:var(--blue-dark);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em}
.pp-fields{display:grid;gap:10px;margin:0}
.pp-fields dt{color:var(--muted);font-size:11.5px;font-weight:600;line-height:1.3}
.pp-fields dd{margin:5px 0 0}
.pp-fields s{display:block;width:62%;height:5px;background:var(--soft);text-decoration:none}
.pp-fields div:nth-child(2) s{width:44%}
.pp-fields div:nth-child(3) s{width:56%}
.pp-checks{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pp-checks li{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:620;line-height:1.35}
.pp-checks .pp-glyph{margin-top:1px}
.pp-parties{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:6px}
.pp-parties span{display:grid;place-items:center;min-height:38px;padding:4px 3px;border:1px solid var(--line-strong);background:var(--surface);font-size:11.5px;font-weight:650;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.pp-parties .is-mid{border-color:var(--teal);background:var(--teal-soft);color:var(--ink)}
.pp-parties em{grid-column:1/-1;margin-top:2px;color:var(--muted);font-size:11.5px;font-style:normal;text-align:center}

/* Startgrafik: eine Anfrage, drei Wege */
.pp-visual--home .pp-body{display:grid;align-items:center}
.pp-visual--home .pp-origin,.pp-request{margin:0;align-self:center}
.pp-visual--home .pp-body{grid-template-columns:auto 44px minmax(0,1fr)}
.pp-branch{height:288px;color:var(--faint)}
.pp-lanes{display:grid;gap:12px}
/* Lane: Titelzeile oben, darunter drei volle Spalten – Wörter wie „Gegenüberstellung“ bleiben ungeteilt lesbar */
.pp-lane{--lane:var(--blue);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:stretch;min-height:88px;border:1px solid var(--line-strong);border-top:3px solid var(--lane);background:var(--surface)}
.pp-lane--check{--lane:var(--ink)}
.pp-lane--trade{--lane:var(--teal)}
.pp-lane-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0;padding:8px 14px 7px;border-bottom:1px solid var(--line)}
.pp-lane-title b{color:var(--ink);font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pp-lane-title span{color:var(--faint);font-size:12px;line-height:1.3}
.pp-lane-title:hover b{color:var(--lane);text-decoration:underline;text-underline-offset:3px}
.pp-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;margin:0;padding:0;list-style:none}
.pp-nodes>li{position:relative;display:flex;align-items:center;min-width:0;padding:8px 18px 8px 12px;border-left:1px solid var(--line);font-size:12.5px;font-weight:620;line-height:1.3;overflow-wrap:normal;word-break:normal;hyphens:manual}
.pp-nodes>li:first-child{border-left:0}
.pp-nodes>li:last-child{font-weight:700}
.pp-nodes>li:not(:last-child)::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;border-top:1.5px solid var(--lane);border-right:1.5px solid var(--lane);transform:translateY(-50%) rotate(45deg)}

/* Container-Varianten: schmale Bühnen (Telefon, Spalten) stapeln vertikal */
@container ppv (max-width:600px){
  .pp-cells--4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
  .pp-cells--3{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .pp-merge{display:none}
  .pp-ist,.pp-docs{position:relative;margin-bottom:12px;padding-bottom:26px}
  .pp-ist::after,.pp-docs::after{content:"";position:absolute;left:50%;bottom:0;width:1.5px;height:24px;background:var(--blue)}
  .pp-steps:not(.pp-steps--row){grid-template-columns:minmax(0,1fr)}
  .pp-steps:not(.pp-steps--row)::before{left:5px;right:auto;top:6px;bottom:18px;width:1.5px;height:auto;transform-origin:center top}
  .pp-steps:not(.pp-steps--row)>li{padding:0 0 16px 30px;text-align:left}
  .pp-steps:not(.pp-steps--row)>li::before{left:0;margin-left:0}
  .pp-compare{width:100%}
  .pp-compare+.pp-split+.pp-sheet{margin-top:0}
  .pp-sheet{margin-top:14px}
  .pp-verdicts{grid-template-columns:minmax(0,1fr)}
  .pp-verdicts li+li{border-top:1px solid var(--line);border-left:0}
  .pp-stages{grid-template-columns:minmax(0,1fr);gap:26px}
  .pp-stage:not(:last-child)::after{top:auto;right:auto;bottom:-25px;left:22px;width:1.5px;height:20px}
  .pp-stage:not(:last-child)::before{top:auto;right:auto;bottom:-27px;left:17.75px;border-top:7px solid var(--blue);border-right:4.5px solid transparent;border-bottom:0;border-left:4.5px solid transparent}
  .pp-visual--home .pp-body{display:block}
  .pp-request{margin-bottom:0;padding-bottom:22px;position:relative}
  .pp-request::after{content:"";position:absolute;left:24px;bottom:0;width:1.5px;height:20px;background:var(--faint)}
  .pp-branch{display:none}
  .pp-lane{grid-template-columns:minmax(0,1fr);height:auto}
  .pp-lane-title{padding:10px 12px 6px}
  .pp-nodes{display:flex;flex-wrap:wrap;padding:0 4px 8px 12px}
  .pp-nodes>li{padding:4px 22px 4px 0;border-left:0}
  .pp-nodes>li:not(:last-child)::after{right:8px}
}

/* ---------- 4 Startseite ---------- */
.hero-stage,.m-visual{min-width:0}
.outcome-card{border:0;border-top:1.5px solid var(--ink);border-radius:0;background:none;box-shadow:none}
.outcome-list b{color:var(--blue-dark)}
.outcome-list li{border-top-color:var(--line-strong)}
.pillars-section{padding-top:24px}
.field-card{border:0;border-top:2px solid var(--blue);border-radius:0;background:none;box-shadow:none;transition:border-color .2s ease}
.field-card::before{display:none}
.field-card:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.field-card-check{background:none;border-top-color:var(--ink)}
.field-card-trade{background:none;border-top-color:var(--teal)}
.field-card-check .eyebrow,.field-card-check .field-link{color:var(--ink)}
.field-card-trade .eyebrow,.field-card-trade .field-link{color:var(--teal)}
.field-card h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.015em}
.field-list li{border-color:var(--line-strong);border-radius:var(--radius-s);background:transparent}
.pillar-result{border-left-color:var(--blue)}
.field-link{text-decoration:underline;text-underline-offset:4px}

.flow-scene{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);box-shadow:none}
.flow-scene::before{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)}
.flow-chip{border:1px solid var(--line-strong);border-radius:99px;background:var(--surface);color:var(--faint)}
.lane .lane-title{border-left:3px solid var(--lane-c);border-radius:0;background:transparent;color:var(--ink);padding:4px 12px}
.lane .lane-title:hover{filter:none}
.lane-title span{opacity:1;color:var(--faint)}
.lane-digital .lane-title{background:transparent}
.lane-check .lane-title,.lane-trade .lane-title{background:transparent}
.step{border-radius:var(--radius-s);border-color:var(--line-strong);box-shadow:none}
.mini-path span{border-color:#b6c3e6;border-radius:2px}
.mini-ui li{border-radius:2px;background:var(--bg)}
.mini-parties span{border-radius:2px}
.flow-explain strong{color:var(--blue-dark)}

.capability-panel{padding:var(--s7) 0 0;border-top:1.5px solid var(--ink);border-radius:0;background:transparent}
.capability-list>div{border-bottom-color:var(--line-strong)}
.capability-list p{color:var(--muted)}
.material-teaser{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--soft)}
.material-copy .eyebrow{color:var(--blue-dark)}
.material-copy h2{color:var(--ink)}
.material-copy h2 em{color:var(--blue)}
.material-copy p{color:var(--muted)}
.mini-route li{border-color:var(--line-strong);color:var(--ink);background:var(--surface);border-radius:var(--radius-s)}
.mini-route li+li::before{background:var(--blue)}
.material-copy .button{background:var(--ink);color:#fff}
.material-copy .button:hover{background:var(--blue-dark)}
.material-image figcaption,.material-page-image figcaption{border-radius:2px;background:var(--surface)}
.material-page-image{border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:none}

.track>li{border-top:1.5px solid var(--ink);border-radius:0;background:transparent}
.track>li::before{border-color:var(--ink);background:var(--bg)}
.track>li:not(:last-child)::after{display:none}
.track-k{color:var(--blue-dark);letter-spacing:.12em}
.track-cards>li{border:0;border-top:1.5px solid var(--ink);border-radius:0;background:transparent}
.track h3,.track h2{font-family:var(--font-serif);font-weight:500;letter-spacing:-.012em}

.video-slot{border-color:var(--line-strong);border-radius:var(--radius);background:var(--surface)}
.sb-wrap{border-radius:2px;background-color:var(--soft);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)}
.slot-badge{border-radius:2px}
.sb-caps li::before{color:var(--blue-dark)}

/* ---------- 5 Leistungsseiten ---------- */
.page-hero{border-bottom-color:var(--line-strong)}
.service-note{padding-left:16px;border:0;border-left:2px solid var(--ink);border-radius:0;background:none;box-shadow:none}
.check-hero .service-note{border-left-color:var(--ink)}
.service-note b{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--mono);font-weight:650;color:var(--ink)}
.service-stage,.material-stage{min-width:0}

.section-heading h2{font-weight:500}
.group-grid{gap:var(--s7) var(--s6)}
.group-card{padding:var(--s4) 0 0;border:0;border-top:1.5px solid var(--ink);border-radius:0;background:transparent}
.group-card h3{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.4rem,1.9vw,1.75rem);letter-spacing:-.012em}
.group-tag{border:1px solid var(--line-strong);border-radius:2px;background:var(--amber-soft)}
.group-card dt{color:var(--faint)}
.inquiry-grid{gap:var(--s6)}
.inquiry-grid article{padding:var(--s4) 0 0;border:0;border-top:1.5px solid var(--ink);border-radius:0;background:transparent}
.inquiry-grid h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.012em}
.inquiry-k{color:var(--blue-dark)}
.inquiry-note,.check-tech-note,.material-legal-note{border-left-color:var(--blue);background:var(--blue-soft);color:#233a63}
.motif-collage img{border-radius:var(--radius);border-color:var(--line-strong)}

.principle-col,.role-col,.role-mid,.ist,.soll,.stage-block,.phase{border-color:var(--line-strong);border-radius:var(--radius-s)}
.principle-col{background:var(--surface)}
.principle-mid{border-color:var(--blue);background:var(--blue-soft)}
.principle-arrow span,.ist-soll-arrow span,.role-link span{background:var(--bg)}
.principle figcaption,.dossier-sheet figcaption,.ist-soll figcaption,.roles figcaption{border-radius:0}
.ist{border-color:var(--line-strong);background:var(--surface)}
.ist li{border-color:var(--line-strong);border-radius:2px}
.soll{border-color:var(--blue);background:var(--blue-soft)}
.soll li{border-color:#b6c3e6;border-radius:2px}
.station-list{gap:0;border-top:1.5px solid var(--ink)}
.station-list>li{padding:var(--s5) 0;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent}
.station-list h3{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.35rem,1.8vw,1.7rem);letter-spacing:-.012em}
.station-out{border-left-color:var(--blue);background:transparent;padding-left:14px}
.energy-box{border:0;border-top:1.5px solid var(--ink);border-left:0;border-radius:0;background:transparent;padding-inline:0}
.energy-box h2{font-weight:500}
.limit-list li::before{border-radius:0;background:var(--blue)}
.role-mid{border-color:var(--teal);background:var(--teal-soft);box-shadow:none}
.role-badge{border-radius:2px;background:var(--teal)}
.roles figcaption{border-left-color:var(--teal);background:var(--teal-soft);color:#214a46}
.phase header{border-radius:0}
.phase-a header{background:var(--blue-dark)}
.phase-b header{background:var(--teal)}
.phase-c header{background:var(--ink)}
.phase-steps li{border-radius:2px}
.phase-loop{border-radius:var(--radius-s);border-color:var(--teal);background:var(--surface)}
.stage-list li{border-radius:2px;background:var(--surface)}
.stage-list li:nth-child(3){background:var(--teal-soft)}
.case-section{border-top-color:var(--line-strong)}
.case-grid article{border-color:var(--line-strong);border-radius:var(--radius-s);background:var(--surface)}
.open-points li{border-radius:2px}
.material-cta{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--soft)}
.material-cta p{color:var(--muted)}
.material-cta h2{font-weight:500}

/* Dossier als Papierblatt */
.dossier-sheet{border:1px solid var(--ink);border-radius:2px;background:#fff;box-shadow:none}
.dossier-head{background:var(--soft);border-bottom-color:var(--ink)}
.dossier-head strong{font-family:var(--font-serif);font-size:17px;font-weight:600}
.dossier-badge{border:1px solid var(--line-strong);border-radius:2px;background:var(--amber-soft)}
.dossier-rows>div{border-bottom-color:var(--line)}
.dossier-rows dt b{color:var(--blue-dark)}
.dossier-sheet figcaption{background:var(--blue-soft)}
.dossier-sheet-tech{margin-top:var(--s6)}

@media(min-width:961px){
  .service-hero{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:var(--s7) clamp(32px,5vw,80px);align-items:center}
  .service-hero>div:first-child>p{max-width:520px}
}

/* ---------- 6 Demos ---------- */
.demo-section{background:var(--soft);border-block:1px solid var(--line-strong)}
.demo-card{border-color:var(--line-strong);border-radius:var(--radius);background:var(--surface);transition:border-color .2s ease}
.demo-card:hover{transform:none;border-color:var(--ink);box-shadow:none}
.demo-preview{border-bottom-color:var(--line-strong);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
.demo-badge{border:1px solid var(--line-strong);border-radius:2px;background:var(--surface)}
.demo-card-body h2,.demo-card-body h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.012em}
.demo-card-link{border-radius:var(--radius-s)}
.demo-teal .demo-preview,.demo-teal{--tint:var(--teal-soft);--accent:var(--teal);--accent-ink:var(--teal)}
.demo-sand .demo-preview,.demo-sand{--tint:var(--sand);--accent:#9a6a1a;--accent-ink:var(--amber-ink)}
.dp-win{border-color:var(--line-strong);border-radius:5px;box-shadow:0 .8em 2em -1.2em rgba(13,21,32,.4)}
.dp-tags span{border-radius:2px}
.dp-node{border-radius:3px;border-color:var(--line-strong);box-shadow:none}
.demo-story h2,.next-demo h2{font-weight:500}
.next-demo-links a{border-color:var(--line-strong);border-radius:var(--radius-s);background:var(--surface)}
.next-demo-links a:hover{border-color:var(--ink)}
.demo-preview-lg{border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:none}

/* Bedienbare Produktansicht: Fensterrahmen, Seitenleiste, Fachflächen mit Haarlinien */
.demo-app{border:1px solid var(--ink);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.demo-app-sidebar{border-right:1px solid var(--line-strong);border-top:0;background:var(--soft);box-shadow:inset 0 3px 0 var(--accent)}
.demo-app--team .demo-app-sidebar,.demo-app--wissen .demo-app-sidebar{background:var(--soft)}
.mini-mark{border-radius:3px}
.demo-app-kicker{letter-spacing:.14em}
.demo-tab{position:relative;border-radius:0;border:0;color:#2d3644}
.demo-tab:hover{background:rgba(253,252,249,.7)}
.demo-tab.is-active,.demo-tab[aria-selected="true"]{border:0;background:var(--surface);box-shadow:inset 3px 0 0 var(--accent);color:var(--ink)}
.demo-app-main{background:var(--surface)}
.demo-app-top{border-bottom-color:var(--line-strong);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.status-pill{border:1px solid #b7d6c8;border-radius:2px;font-family:var(--mono);letter-spacing:.08em}
.demo-panel h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.015em}
.mock-card,.doc-card,.decision-card,.facts,.site-plan,.stage-block{border-color:var(--line-strong);border-radius:var(--radius-s);box-shadow:none}
.mock-card,.doc-card{background:var(--surface)}
.mock-board>div{border-color:var(--line-strong);border-radius:var(--radius-s);background:var(--bg)}
.mock-board strong{font-family:var(--mono);font-weight:600;letter-spacing:-.04em}
.mock-board .active{border-color:var(--blue);background:var(--blue-soft)}
.mock-tags span,.warning-tag{border-radius:2px}
.report-list li{border-color:var(--line-strong);border-radius:var(--radius-s);background:var(--surface)}
.report-list .is-selected{border-color:var(--blue);background:var(--blue-soft)}
.site-plan{background:var(--bg)}
.site-plan-grid i{border-radius:2px;border-color:var(--line-strong);background:var(--surface)}
.week-table tr.is-flag{background:var(--amber-soft)}
.approval li{border-radius:var(--radius-s);background:var(--bg);border-color:var(--line-strong)}
.ctx-node{border-radius:var(--radius-s);box-shadow:none;border-color:var(--line-strong)}
.dp-track,.dp-track i{border-radius:1px}

/* ---------- 7 Kontakt, Rechtstexte ---------- */
.contact-form-wrap{border:1px solid var(--line-strong);border-top:2px solid var(--ink);border-radius:0 0 var(--radius) var(--radius);background:var(--surface);box-shadow:none}
.contact-form input:not([type="checkbox"]),.contact-form select,.contact-form textarea{border:1px solid #857f70;border-radius:var(--radius-s);background:#fff}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,79,209,.18)}
.contact-form label{letter-spacing:.005em}
.contact-hints div{border-left-color:var(--blue);background:transparent;padding-inline:14px}
.contact-hints div:last-child{border-color:var(--teal)}
.hint-check{border-color:var(--ink)!important}
.contact-small-card{border-color:var(--line-strong);border-radius:var(--radius-s);background:var(--surface)}
.pulse-dot{background:var(--blue);box-shadow:0 0 0 4px rgba(31,79,209,.12)}
.contact-aside h2{font-weight:500}
.form-message{border-radius:var(--radius-s)}
.next-steps{border-top-color:var(--line-strong)}
.next-steps li::before{background:var(--blue-soft);color:var(--blue-dark)}
.legal-page h1{font-size:clamp(2.4rem,4.6vw,4rem)}
.legal-page h2{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line-strong);font-size:clamp(1.4rem,2vw,1.75rem);font-weight:500}
.legal-page p,.legal-page li{max-width:68ch;font-size:16px;line-height:1.7}
.legal-page a{color:var(--blue-dark);text-underline-offset:3px}

/* ---------- Desktop: großzügige, redaktionelle Komposition ---------- */
@media (min-width:1061px), (min-width:801px) and (min-height:481px){
  h1{font-size:clamp(2.7rem,4.7vw,4.9rem)}
  h2{font-size:clamp(2.1rem,3.4vw,3.45rem)}
  .page-hero{padding-top:104px;padding-bottom:68px}
  .page-hero h1{font-size:clamp(2.8rem,5vw,5rem);line-height:1.04}
  .page-hero>p{font-size:19px;line-height:1.6}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "stage" "outcome";gap:var(--s7);padding-top:72px;padding-bottom:var(--s8)}
  .hero-copy{grid-area:copy}
  .hero-stage{grid-area:stage}
  .outcome-card{grid-area:outcome;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);gap:var(--s6) var(--s7);padding:var(--s5) 0 0}
  .outcome-card .eyebrow{grid-column:1}
  .outcome-card h2{grid-column:1;margin:var(--s3) 0 0;font-size:clamp(1.6rem,2.2vw,2.1rem)}
  .outcome-list{grid-column:2;grid-row:1/span 2;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
  .outcome-list li{grid-template-columns:1fr;gap:var(--s2);padding:var(--s3) 0 0;border-top:1px solid var(--line-strong)}
  .hero-copy h1{font-size:clamp(2.6rem,4.3vw,4.6rem);line-height:1.04;max-width:none}
  .hero-copy>p{font-size:clamp(18px,1.4vw,20px)}
  .section-heading h2{font-size:clamp(2.1rem,3.6vw,3.6rem)}
  .section-heading.split{align-items:end}
  .pillar-grid{gap:var(--s7)}
  .pillar-grid .field-card{padding:var(--s5) 0 0}
  .service-note{margin-top:var(--s6);max-width:520px}
  .service-hero h1{font-size:clamp(2.5rem,4.1vw,4.2rem);line-height:1.05}
  .material-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s7) clamp(32px,5vw,72px)}
  .material-hero h1{font-size:clamp(2.5rem,4.4vw,4.5rem);line-height:1.05}
  .material-stage{grid-column:1/-1}
  .material-intro h2{font-size:clamp(2.1rem,3.6vw,3.4rem)}
  .contact-section{gap:var(--s8)}
  .demo-hero-copy h1{font-size:clamp(2.6rem,4.6vw,4.4rem)}
  .interactive-section>.section-heading h2{font-size:clamp(2rem,3.4vw,3.2rem)}
}
@media (min-width:1181px){
  .hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"copy stage" "outcome outcome";gap:var(--s7) clamp(32px,4.5vw,72px);align-items:center}
}

/* ---------- 8 Telefonmodus (Bedingung unverändert) ---------- */
@media(max-width:800px), (max-width:1060px) and (max-height:480px){
  .site-header{background:rgba(245,242,236,.94)}
  .m-tabbar{background:rgba(253,252,249,.96);border-top-color:var(--line-strong)}
  .m-tab.is-current{color:var(--ink)}
  .m-tab.is-current::before{background:var(--blue)}
  .m-context{color:var(--faint)}
  .m-head-cta{border-radius:var(--radius-s)}
  .m-head-cta.is-current{background:var(--blue-dark)}
  .m-menu{background:var(--bg)}
  .m-menu-head,.m-lang{background:var(--surface);border-bottom-color:var(--line-strong)}
  .m-menu-head h2{font-family:var(--font-serif);font-weight:500}
  .m-lang a,.m-link{border-color:var(--line-strong);border-radius:var(--radius-s);background:var(--surface)}
  .m-link.is-current{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-dark)}
  .m-list-quiet .m-link{background:transparent}
  .m-card{border:1px solid var(--line-strong);border-left:3px solid var(--blue);border-radius:var(--radius-s);background:var(--surface);box-shadow:none}
  .m-card-check{border-left-color:var(--ink);background:var(--surface)}
  .m-card-trade{border-left-color:var(--teal);background:var(--surface)}
  .m-card strong{font-family:var(--font-serif);font-weight:500;font-size:20px}
  .m-demo-link{border-color:var(--line-strong);border-left-width:3px;border-radius:var(--radius-s)}
  .m-more,.m-steps li{border-color:var(--line-strong);border-radius:var(--radius-s)}
  .m-secnav{background:rgba(245,242,236,.97);border-bottom-color:var(--line-strong)}
  .m-secnav a{border-color:var(--line-strong);border-radius:var(--radius-s)}
  .m-section-picker select{border-color:#857f70;border-radius:var(--radius-s);background:var(--surface)}
  .m-toc a{border-color:var(--line-strong);border-radius:var(--radius-s)}
  .hero-copy h1{font-weight:500}
  .page-hero h1,.material-hero h1,.demo-hero-copy h1,.service-hero h1{font-weight:500;line-height:1.08}
  .service-note{padding:2px 0 2px 12px}
  .service-stage,.material-stage{margin-top:var(--s3)}
  .m-visual{margin-top:var(--s5)}
  .pp-visual{padding:14px;box-shadow:none}
  .pp-head{margin-bottom:14px;font-size:10px}
  .group-card{padding-top:var(--s3)}
  .contact-form-wrap{padding:20px 16px}
  .capability-panel{padding-top:var(--s5)}
  .site-footer{background:var(--soft)}
}

/* ---------- 8b Mobile Komposition (eigenständig, nicht verkleinerter Desktop) ----------
   Prinzipien: klare System-Sans, große Touchziele (>= 44 px, Hauptaktionen 54 px), eine Aktion je Zeile,
   Auswahl als gruppierte Liste statt dreier gleicher Kästen, Bereichsnavigation dauerhaft im Dock.
   Kein Nachbau nativer Oberflächen, keine Konformitätsbehauptung. */
@media(max-width:800px), (max-width:1060px) and (max-height:480px){
  h1,h2,h3,h4,.dossier-head strong,.m-menu-head h2,.track h2,.track h3,.group-card h3,.inquiry-grid h3,.station-list h3,.demo-card-body h2,.demo-card-body h3,.demo-panel h3,.field-card h3,.m-card strong,.footer-top h2,.capability-panel h2{font-family:var(--font-sans)}
  h1 em,h2 em{font-style:normal;font-weight:inherit}
  .hero-copy h1,.page-hero h1,.material-hero h1,.demo-hero-copy h1,.service-hero h1{font-weight:740;letter-spacing:-.032em}
  .section-heading h2,.m-panel .section-heading h2,.m-hub-head h2{font-weight:720;letter-spacing:-.028em}
  .button{border-radius:14px;font-size:16px}
  .m-head-cta{border-radius:12px;font-size:14px}

  /* Dock: fünf Ziele, Aktivzustand durch Farbe + Gewicht + kräftigeres Symbol (nicht nur Farbe) */
  .m-tabbar{background:rgba(253,252,249,.9)}
  .m-tab{font-size:11px;font-weight:650}
  .m-tab.is-current::before{display:none}
  .m-tab.is-current{color:var(--blue)}
  .m-tab.is-current span{font-weight:800}
  .m-tab.is-current .m-ico{stroke-width:2.4}
  .m-tab .m-ico{width:26px;height:26px}

  /* Startseite: Kernaussage, gruppierte Auswahlliste, kurze Wegegrafik */
  .hero .eyebrow{display:none}
  .hero-copy h1{margin:6px 0 10px;font-size:clamp(1.9rem,8.8vw,2.4rem);line-height:1.08}
  .hero-copy>p.m-hub-intro{color:var(--muted);font-size:16px;line-height:1.5}
  .m-cards{gap:0;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);overflow:hidden}
  .m-cards>li+li{border-top:1px solid var(--line)}
  .m-card,.m-card-check,.m-card-trade{min-height:78px;gap:14px;padding:12px 16px;border:0;border-radius:0;background:transparent;box-shadow:none}
  .m-card:active{background:var(--soft)}
  .m-card-ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;background:var(--blue-soft);color:var(--blue-dark)}
  .m-card-check .m-card-ico{background:#e6e4de;color:var(--ink)}
  .m-card-trade .m-card-ico{background:var(--teal-soft);color:var(--teal)}
  .m-card .eyebrow{display:none}
  .m-card strong{font-size:17px;font-weight:680;letter-spacing:-.015em}
  .m-card-desc{font-size:13.5px;line-height:1.35}
  .m-card>.m-ico,.m-card-check>.m-ico,.m-card-trade>.m-ico{width:18px;height:18px;color:var(--faint)}
  .m-visual{margin-top:var(--s4)}
  .m-hub-head h2{font-size:1.2rem}
  .m-demo-link strong{font-weight:650}

  /* Mobile Grafiken: kurz, Sans-Beschriftung, senkrechte bzw. dreiteilige Schiene */
  .pp-visual--mhome,.pp-visual--mflow{padding:14px 16px 12px;border-radius:16px;box-shadow:none}
  .pp-visual--mhome::before,.pp-visual--mflow::before{display:none}
  .pp-visual--mhome .pp-head,.pp-visual--mflow .pp-head{margin-bottom:12px;padding-bottom:0;border-bottom:0;font-family:var(--font-sans);font-size:13px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--muted)}
  .pp-visual--mhome .pp-steps>li{padding-top:22px}
  .pp-visual--mhome .pp-steps strong{font-size:14px;font-weight:700}
  .pp-visual--mhome .pp-steps>li:last-child::before{border-color:var(--ok);background:var(--ok)}
  .pp-visual--mflow .pp-steps strong{font-size:16px;font-weight:680}
  .pp-visual--mflow .pp-steps span{font-size:13.5px}
  .m-stage{padding-block:4px 8px}

  /* Leistungsseiten: Kernzeile + Aktion zuerst, Langtext in <details> (vollständig erhalten) */
  .service-hero .eyebrow,.material-hero .eyebrow{display:none}
  .page-hero.check-hero,.page-hero.process-hero{padding-bottom:14px}
  .m-kern{margin:0 0 14px;color:var(--ink);font-size:17px;font-weight:500;line-height:1.45}
  .service-hero .button-row,.material-hero .button-row{flex-direction:column;align-items:stretch;gap:2px;margin-top:2px}
  .service-hero .button-row .button,.material-hero .button-row .button{width:100%;min-height:54px}
  .button-row .text-link{align-self:center;min-height:48px;border-bottom:0;color:var(--blue-dark);font-weight:650}
  .m-hero-more{margin-top:8px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
  .m-hero-more summary{display:flex;align-items:center;justify-content:space-between;min-height:50px;color:var(--blue-dark);font-size:15px;font-weight:650;list-style:none;cursor:pointer}
  .m-hero-more summary::-webkit-details-marker{display:none}
  .m-hero-more summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  .m-hero-more[open] summary::after{transform:rotate(-135deg)}
  .m-hero-more p{margin:0 0 12px;font-size:15px;line-height:1.55}
  .m-hero-note b{color:var(--ink)}

  /* Telefon-Querformat 961–1060 px: die Desktopbühne ist hier m-hide, daher keine zweite (leere) Spalte */
  .service-hero{grid-template-columns:minmax(0,1fr)}

  /* Inhaltswähler */
  .m-sections-ready .m-section-picker{padding:10px 16px}
  .m-section-picker>span{color:var(--ink);font-weight:700}
  .m-section-picker select{min-height:48px;font-weight:650}
}

/* ---------- 9 Bewegung: einmalig, endlich (< 4,5 s), Information bleibt statisch vollständig ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes ppRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes ppWipeY{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes ppWipeX{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes ppGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes ppGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes ppFade{from{opacity:0}to{opacity:1}}

  .pp-a{animation:ppRise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0)*1s)}
  .pp-w{animation:ppWipeY .7s ease-out both;animation-delay:calc(var(--wd,.6)*1s)}
  .pp-visual--handover .pp-merge{--wd:.7}
  .pp-visual--dossier .pp-merge{--wd:.65}
  .pp-visual--dossier .pp-split{--wd:1.5}
  .pp-visual--home .pp-branch{animation-name:ppWipeX;--wd:.45;animation-duration:.8s}
  .pp-steps::before{animation:ppGrowX 1.1s ease-out 1.35s both}
  .pp-stage:nth-child(1)::before,.pp-stage:nth-child(1)::after{animation:ppFade .4s ease-out 1s both}
  .pp-stage:nth-child(2)::before,.pp-stage:nth-child(2)::after{animation:ppFade .4s ease-out 1.9s both}
  .pp-visual--mflow .pp-steps::before,.pp-visual--mhome .pp-steps::before{animation:ppGrowX 1.1s ease-out .3s both}
  .pp-visual--mhome .pp-steps::before{animation-duration:1s}
  @container ppv (max-width:600px){
    .pp-steps:not(.pp-steps--row)::before,.pp-visual--mflow .pp-steps:not(.pp-steps--row)::before{animation-name:ppGrowY}
  }

  /* Ruhende Darstellung bis die Grafik in Sicht kommt (nur mit IntersectionObserver-Klassen aus site.js); ohne JS laufen die Animationen direkt */
  .has-motion .pp-visual:not(.is-visible) *,
  .has-motion .pp-visual:not(.is-visible) *::before,
  .has-motion .pp-visual:not(.is-visible) *::after{animation-play-state:paused}

  .button,.demo-card,.field-card{transition-duration:.2s}
}
/* Fokus-Bypass: sobald ein Element in der Grafik den Fokus hat, ist die ganze Grafik sofort statisch vollständig sichtbar
   (kein unsichtbares Tabziel, keine halb eingeblendeten Elternelemente). Greift gegenüber .has-motion .reveal und
   .has-motion .pp-visual:not(.is-visible) *. Keine Endlosanimation, kein JS. */
.has-motion .pp-visual.reveal:focus-within{opacity:1!important;transform:none!important;transition:none!important}
.pp-visual:focus-within *,
.pp-visual:focus-within *::before,
.pp-visual:focus-within *::after{animation:none!important;clip-path:none!important}
@media (prefers-reduced-motion:reduce){
  .pp-a,.pp-w,.pp-steps::before,.pp-stage::before,.pp-stage::after{animation:none!important}
  .has-motion .reveal{opacity:1!important;transform:none!important}
}