/* ============================================================
   MAWU Software GmbH — Designsystem
   Freigegeben 09/2026. Schwarz-Weiß, Schibsted Grotesk,
   JetBrains Mono für Etiketten. Keine Farbe, keine Schatten.
   ============================================================ */

/* ---------- Schriften (lokal, keine Anfrage an Google) ----------
   Schibsted Grotesk und JetBrains Mono, SIL Open Font License 1.1.
   Teilmengen latin und latin-ext wie bei Google Fonts. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-ext-400-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:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-400-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:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-ext-500-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:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-500-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:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-ext-600-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:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-600-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-ext-400-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-ext-500-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-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}


:root{
  --ink:#0b0b0c;
  --ink-68:rgba(11,11,12,.68);
  --ink-62:rgba(11,11,12,.62);
  --ink-60:rgba(11,11,12,.60);
  --ink-50:rgba(11,11,12,.50);
  --ink-45:rgba(11,11,12,.45);
  --ink-42:rgba(11,11,12,.42);
  --ink-30:rgba(11,11,12,.30);
  --line:rgba(11,11,12,.14);
  --line-soft:rgba(11,11,12,.12);
  --paper:#ffffff;
  --plate:#f2f2f0;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --pad:72px;
  --max:1440px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.028em;line-height:1.12;text-wrap:balance}
p{margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{color:rgba(11,11,12,.55)}
img{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}}

.shell{max-width:var(--max);margin:0 auto}
.pad{padding-left:var(--pad);padding-right:var(--pad)}
.edge{margin-left:var(--pad);margin-right:var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.measure{max-width:62ch}

/* ---------- Schaltflächen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  border-radius:999px;padding:14px 28px;font-size:14.5px;font-weight:500;
  border:1px solid transparent;transition:background .18s,border-color .18s,color .18s}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:rgba(11,11,12,.78);color:#fff}
.btn-out{border-color:var(--ink-30);color:var(--ink)}
.btn-out:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{padding:11px 24px;font-size:13.5px}

/* ---------- Kopf ---------- */
.head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line-soft)}
.head .logo svg{height:34px;width:auto;fill:var(--ink)}
.head nav{display:flex;gap:30px;font-size:14.5px}
.head nav a[aria-current]{color:var(--ink-45)}
@media(max-width:1000px){.head nav{display:none}}

/* ---------- Menü für Handy und Tablet ----------
   Knopf und Menüfeld baut assets/js/mawu.js aus der vorhandenen
   Navigation, damit keine Seite zwei Linklisten pflegen muss.
   Das Feld liegt am body, nicht im Kopf: backdrop-filter am Kopf
   würde position:fixed sonst auf den Kopf begrenzen. */
.menu-knopf{display:none;position:relative;flex:none;width:44px;height:44px;margin-right:-10px;
  padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.menu-knopf span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;
  transition:top .25s ease,transform .25s ease}
.menu-knopf span:nth-child(1){top:17px}
.menu-knopf span:nth-child(2){top:26px}
.menu-knopf[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-knopf[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}
.menu-feld{position:fixed;left:0;right:0;bottom:0;top:var(--kopf-h,79px);z-index:90;
  background:var(--paper);display:flex;flex-direction:column;overflow-y:auto;
  padding-top:12px;padding-bottom:40px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.menu-feld.is-offen{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu-feld nav{display:flex;flex-direction:column}
.menu-feld nav a{display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line);font-size:26px;letter-spacing:-.02em}
.menu-feld nav a::after{content:"→";font-size:18px;color:var(--ink-42)}
.menu-feld nav a[aria-current]{color:var(--ink-45)}
.menu-feld .btn{margin-top:32px;align-self:stretch;padding:17px 28px;font-size:15px}
body.menu-offen{overflow:hidden}
body.menu-offen .head{z-index:95;background:var(--paper)}
@media(max-width:1000px){
  .menu-knopf{display:block}
  .head{gap:14px}
  .head > .btn{margin-left:auto}
}
@media(max-width:420px){.head > .btn{display:none}}
@media(min-width:1001px){.menu-feld{display:none}}

/* ---------- Bildfeld ---------- */
.plate{background:repeating-linear-gradient(135deg,rgba(11,11,12,.09) 0 2px,transparent 2px 11px),var(--plate);
  display:flex;align-items:flex-end;padding:26px}
.plate span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-45)}
.plate-hero{height:520px}
.plate-wide{height:400px}
.plate-work{aspect-ratio:16/10;align-items:center;justify-content:center;padding:0}
/* Breite Bildbaender folgen dem Seitenverhaeltnis des Bildes, damit nichts weggeschnitten wird */
.plate-hero.has-img,.plate-wide.has-img{height:auto;aspect-ratio:8/3}
.plate-work span{letter-spacing:.14em;font-size:11.5px}
.plate-square{aspect-ratio:1/1;align-items:center;justify-content:center;padding:0}
.plate-portrait{aspect-ratio:4/5;align-items:center;justify-content:center;padding:0}

/* ---------- Startseiten-Hero ---------- */
.hero{padding-top:60px;padding-bottom:88px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:88px;align-items:end}
.hero .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-50);margin-bottom:26px}
.hero h1{font-size:clamp(46px,6vw,86px);line-height:1.02;letter-spacing:-.042em}
.hero .side{padding-bottom:12px}
.hero .side p{margin-bottom:30px;font-size:17px;line-height:1.6;color:var(--ink-68)}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Unterseiten-Kopf ---------- */
.crumb{padding-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45)}
.crumb a{color:var(--ink-45)}
.crumb a:hover{color:var(--ink)}
.phero{padding-top:40px;padding-bottom:80px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:88px;align-items:end}
.phero h1{font-size:clamp(38px,5vw,68px);line-height:1.04;letter-spacing:-.038em}
.phero .side{padding-bottom:12px}
.phero .side p{margin-bottom:30px;font-size:17px;line-height:1.6;color:var(--ink-68)}
.phero .acts{display:flex;flex-wrap:wrap;gap:12px}
.phero .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-50);margin-bottom:30px}

/* ---------- Vertrauensleiste als Laufband ---------- */
.trust{margin-top:64px;padding-top:34px;padding-bottom:34px;display:flex;flex-wrap:wrap;
  align-items:center;gap:20px 40px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.trust > .mono{flex:none}
.trust .marquee{flex:1 1 320px;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 93%,transparent 100%)}
.trust .marquee-track{display:flex;align-items:center;gap:56px;width:max-content;
  animation:mawu-lauf 52s linear infinite}
.trust .marquee:hover .marquee-track,
.trust .marquee:focus-within .marquee-track{animation-play-state:paused}
.trust .marquee-track span{font-size:19px;letter-spacing:.03em;font-weight:500;opacity:.6;
  white-space:nowrap;transition:opacity .2s}
.trust .marquee-track span:hover{opacity:1}
.trust .marquee-track img{height:19px;width:auto;filter:grayscale(1);opacity:.55;transition:opacity .2s}
.trust .marquee-track img:hover{opacity:.9}
/* kompakte Bildmarken brauchen mehr Hoehe als die breiten Schriftzuege.
   Hoehe und Deckkraft je Marke, damit alle optisch gleich schwer wirken. */
.trust .marquee-track img.mark-tall{height:30px}
.trust .marquee-track img.m-woi{height:38px;opacity:.85}
.trust .marquee-track img.m-homehero{height:31px;opacity:.95}
.trust .marquee-track img.m-woi:hover,
.trust .marquee-track img.m-homehero:hover{opacity:1}
/* Marken ohne fertigen Schriftzug: Bildzeichen links neben den Namen */
.trust .marquee-track span.real{display:inline-flex;align-items:center;gap:9px}
.trust .marquee-track img.wm-icon{height:21px;opacity:1}
@keyframes mawu-lauf{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 28px))}}

/* ---------- Zweispaltige Sektion ---------- */
.split{padding-top:104px;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:88px;scroll-margin-top:80px}
.split h2{font-size:clamp(30px,3.2vw,38px)}
.split .intro p{margin-top:20px;font-size:15.5px;line-height:1.65;color:var(--ink-60)}
.split .intro .more{display:inline-block;margin-top:24px;font-size:15px;color:var(--ink-60)}

/* Rasterkarten mit Haarlinienkreuz */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line)}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards:not(.three) article:last-child:nth-child(odd){grid-column:1/-1}
.cards article,.cards a.article{background:var(--paper);padding:34px 34px 42px;display:block}
.cards a.article{background:#fff}
.cards a.article:hover{color:var(--ink)}
.cards .n{font-family:var(--mono);font-size:11px;color:var(--ink-42);margin-bottom:20px}
.cards h3{font-size:22px;letter-spacing:-.012em;margin-bottom:10px}
.cards p{font-size:15px;line-height:1.6;color:var(--ink-62)}
.cards .go{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.cards article:hover .go{color:var(--ink)}

/* Schlichte Listenspalten */
.plainlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;
  border-top:0}
.plainlist .it{padding:20px 0;border-bottom:1px solid var(--line)}
.plainlist h3{font-size:17px;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.plainlist p{font-size:14.5px;line-height:1.6;color:var(--ink-62)}

/* ---------- Arbeiten ---------- */
.works{padding-top:104px;scroll-margin-top:80px}
.works-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:38px}
.works-head h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.032em}
.works-head a{font-size:15px;color:var(--ink-60)}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px}
.work .meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.work h3{font-size:20px;letter-spacing:-.014em;font-weight:500}
.work .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);flex:none}
.work .effect{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-60)}

/* ---------- Bild im Bildfeld ---------- */
.plate.has-img{padding:0;overflow:hidden}
.plate.has-img img{width:100%;height:100%;object-fit:cover}
.plate.has-img span{display:none}

/* ---------- Kundenlogos ---------- */
.trust .marks img{height:19px;width:auto;filter:grayscale(1);opacity:.5;
  transition:opacity .18s}
.trust .marks img:hover{opacity:.85}

/* ---------- Dreispaltiges Arbeitenraster ---------- */
.works-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.works-grid.three .work h3{font-size:17.5px;letter-spacing:-.012em}
.works-grid.three .work .meta{margin-top:16px;padding-top:14px}
.works-grid.three .work .effect{font-size:11px}
@media(max-width:1180px){.works-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.works-grid.three{grid-template-columns:minmax(0,1fr)}}

/* ---------- Fallstudie ---------- */
.case{padding-top:104px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;align-items:start;scroll-margin-top:80px}
.case .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.case .tags span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-45);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.case h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.026em;margin-bottom:26px}
.psl{border-top:0}
.psl .r{display:grid;grid-template-columns:110px minmax(0,1fr);gap:24px;padding:18px 0;
  border-bottom:1px solid var(--line)}
.psl dt{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);padding-top:4px}
.psl dd{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-62)}
.psl dd strong{font-weight:500;color:var(--ink)}
/* Stationen einer Fallstudie: Beschriftung dunkel, davor ein Kästchen,
   das sich von Problem bis Ergebnis füllt (leer, halb, drei Viertel, voll). */
.psl dt[class^="k-"]{color:var(--ink);display:flex;align-items:center;align-self:start;gap:9px}
.psl dt[class^="k-"]::before{content:"";flex:none;width:8px;height:8px;
  border:1.5px solid var(--ink);box-sizing:border-box}
.psl dt.k-loesung::before{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.psl dt.k-knackpunkt::before{background:conic-gradient(transparent 0 25%,var(--ink) 25% 100%)}
.psl dt.k-ergebnis::before{background:var(--ink)}
.psl .r:has(.k-ergebnis) dd{color:var(--ink)}
.modules{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.modules span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-60);border:1px solid var(--line);padding:6px 12px}

/* ---------- Ablauf ---------- */
.steps{border-top:0}
.steps .s{display:grid;grid-template-columns:80px minmax(0,300px) minmax(0,1fr);
  gap:24px 40px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.steps .n{font-family:var(--mono);font-size:11px;color:var(--ink-42)}
.steps h3{font-size:19px;letter-spacing:-.014em}
.steps p{font-size:15px;line-height:1.62;color:var(--ink-62)}

/* ---------- Ablauf als Raster ---------- */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow .s{background:var(--paper);padding:30px 30px 32px;display:flex;flex-direction:column}
.flow .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-42);margin-bottom:18px}
.flow h3{font-size:19px;letter-spacing:-.014em;margin-bottom:6px}
.flow .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:14px}
.flow p{font-size:15px;line-height:1.62;color:var(--ink-62)}
.flow .out{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60)}
.flow .out b{color:var(--ink);font-weight:500}
@media(max-width:1180px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.flow{grid-template-columns:minmax(0,1fr)}}

/* ---------- Kennwerte ---------- */
.facts{border-top:0}
.facts .f{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:17px 0;border-bottom:1px solid var(--line)}
.facts dt{margin:0;font-size:15px;color:var(--ink-60)}
.facts dd{margin:0;font-size:15px;font-weight:500;text-align:right}

/* ---------- Haltung ---------- */
.stance{padding-top:104px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:88px;align-items:start;scroll-margin-top:80px}
.stance h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.032em;line-height:1.08}
.stance p{margin-top:24px;font-size:16.5px;line-height:1.65;color:var(--ink-62);max-width:46ch}

/* ---------- Zitat ---------- */
.quote{padding-top:104px;padding-bottom:0;display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:88px;align-items:start}
.quote blockquote{margin:0;font-size:clamp(21px,2.4vw,28px);line-height:1.36;
  letter-spacing:-.02em;font-weight:500;max-width:24ch}
.quote .who{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline}
.quote .who b{font-size:15px;font-weight:500}
.quote .who span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45)}

/* Zitatgitter */
.voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line);margin-top:38px}
.voices figure{margin:0;background:var(--paper);padding:32px 32px 36px;display:flex;
  flex-direction:column;justify-content:space-between;gap:26px}
.voices blockquote{margin:0;font-size:16.5px;line-height:1.55;letter-spacing:-.008em}
.voices figcaption{display:flex;flex-direction:column;gap:4px}
.voices figcaption b{font-size:14.5px;font-weight:500}
.voices figcaption span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45)}

/* ---------- Fragen ---------- */
.faq{border-top:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;
  align-items:baseline;justify-content:space-between;gap:24px;
  font-size:18px;font-weight:500;letter-spacing:-.016em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:16px;color:var(--ink-45);flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--ink-60)}
.faq .a{padding:0 0 24px;max-width:64ch;font-size:15.5px;line-height:1.68;color:var(--ink-62)}

/* ---------- Filter ---------- */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filter button{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:none;border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  color:var(--ink-60);cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.filter button:hover{border-color:var(--ink-30)}
.filter button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Projektliste */
.index{border-top:1px solid var(--line)}
.index .p{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) 120px;
  gap:24px 40px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.index .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45)}
.index h3{font-size:18px;letter-spacing:-.014em;font-weight:500}
.index p{font-size:14.8px;line-height:1.6;color:var(--ink-62)}
.index .go{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);text-align:right}
.index .p:hover .go{color:var(--ink)}

/* ---------- Kontakt ---------- */
.contact{margin-top:120px;padding-top:104px;padding-bottom:104px;
  border-top:1px solid var(--line);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:88px;align-items:end;scroll-margin-top:80px}
.contact h2{font-size:clamp(34px,4.6vw,60px);letter-spacing:-.036em;line-height:1.04}
.contact .side p{font-size:17px;line-height:1.6;color:var(--ink-68);margin-bottom:30px}
.contact .acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.contact .acts a.mail{font-size:15px;color:var(--ink-60)}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line-soft);padding-top:34px;padding-bottom:44px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px}
.foot .left{display:flex;align-items:center;gap:16px}
.foot .left svg{height:24px;width:auto;fill:var(--ink);opacity:.8}
.foot nav{display:flex;flex-wrap:wrap;gap:28px;font-size:14px;color:var(--ink-60)}
.foot .legal{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45)}

/* ---------- Rechtstext ---------- */
.prose{padding-top:24px;padding-bottom:104px;max-width:74ch}
.prose h2{font-size:24px;letter-spacing:-.02em;margin:56px 0 16px}
.prose h3{font-size:18px;letter-spacing:-.014em;margin:32px 0 12px}
.prose h4{font-size:16px;font-weight:500;margin:24px 0 10px}
.prose p{margin-bottom:16px;font-size:15.5px;line-height:1.75;color:var(--ink-68)}
.prose ul{margin:0 0 18px;padding-left:20px;list-style:disc}
.prose ol{margin:0 0 18px;padding-left:20px;list-style:decimal}
.prose li{margin-bottom:8px;font-size:15.5px;line-height:1.7;color:var(--ink-68)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{font-weight:500;color:var(--ink)}
.prose table{border-collapse:collapse;width:100%;margin-bottom:20px}
.prose td,.prose th{border-bottom:1px solid var(--line);padding:10px 12px 10px 0;
  text-align:left;font-size:15px;vertical-align:top}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* ---------- Schmalere Ansichten ---------- */
@media (max-width:1180px){
  :root{--pad:36px}
  .hero,.phero,.split,.stance,.contact,.case,.quote{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero{padding-top:40px;padding-bottom:56px}
  .phero{padding-bottom:56px}
  .split,.works,.stance,.case,.quote{padding-top:72px}
  .contact{margin-top:80px;padding-top:72px;padding-bottom:72px}
  .plate-hero{height:360px}
  .plate-wide{height:300px}
  .plate-hero.has-img,.plate-wide.has-img{height:auto;aspect-ratio:8/3}
  .voices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps .s{grid-template-columns:60px minmax(0,1fr);gap:16px}
  .steps .s p{grid-column:2}
  .index .p{grid-template-columns:120px minmax(0,1fr);gap:8px 24px}
  .index .p p{grid-column:2}
  .index .go{grid-column:2;text-align:left}
}
@media (max-width:760px){
  :root{--pad:20px}
  .cards article,.cards a.article{padding:24px 22px 28px}
  .flow .s{padding:24px 22px 26px}
  .voices figure{padding:24px 22px 28px}
  .cards,.cards.three,.works-grid,.voices,.plainlist{grid-template-columns:minmax(0,1fr)}
  .trust .marks{gap:28px}
  .trust .marks span{font-size:17px}
  .index .p{grid-template-columns:minmax(0,1fr)}
  .index .p p,.index .go{grid-column:1}
  .steps .s{grid-template-columns:minmax(0,1fr)}
  .steps .s p{grid-column:1}
}

/* ---------- Offene Punkte im Entwurf ---------- */
.todo{display:inline-block;border:1px dashed var(--ink-30);color:var(--ink-45);
  padding:3px 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;margin-right:10px;vertical-align:2px}

/* ---------- Grundsatzzeilen ---------- */
.tenets{border-top:0}
.tenets .t{display:grid;grid-template-columns:80px minmax(0,320px) minmax(0,1fr);
  gap:24px 40px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tenets .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-42)}
.tenets h3{font-size:19px;letter-spacing:-.014em}
.tenets p{font-size:15px;line-height:1.62;color:var(--ink-62)}
@media(max-width:1180px){.tenets .t{grid-template-columns:60px minmax(0,1fr);gap:12px 24px}
  .tenets .t p{grid-column:2}}
@media(max-width:760px){.tenets .t{grid-template-columns:minmax(0,1fr)}
  .tenets .t p{grid-column:1}}

/* ---------- Phase mit Übergabe ---------- */
.steps .hand{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45)}
.steps .hand b{color:var(--ink);font-weight:500}

/* ---------- Große Kundenstimmen ---------- */
.testis{border-top:0}
.testis .testi:last-child{border-bottom:0}
.testi{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px 56px;
  padding:44px 0;border-bottom:1px solid var(--line);align-items:start}
.testi .who b{display:block;font-size:17px;font-weight:500;letter-spacing:-.012em}
.testi .who span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);margin-top:8px}
.testi blockquote{margin:0;font-size:clamp(19px,2.1vw,25px);line-height:1.42;
  letter-spacing:-.018em;font-weight:500;max-width:34ch}
.testi .ctx{margin-top:18px;font-size:14.8px;line-height:1.6;color:var(--ink-62);max-width:52ch}
@media(max-width:1180px){.testi{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ---------- Bewertungsverteilung ---------- */
.score{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.score b{font-size:clamp(44px,6vw,72px);font-weight:500;letter-spacing:-.04em;line-height:1}
.score span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45)}
.dist{border-top:0}
.dist .d{display:grid;grid-template-columns:78px minmax(0,1fr) 52px;gap:16px;
  align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.dist .lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45)}
.dist .tr{height:6px;background:var(--plate)}
.dist .tr i{display:block;height:100%;background:var(--ink)}
.dist .pc{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--ink-60)}

/* ---------- Themenmarke ---------- */
.theme{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-45);padding:34px 0 6px;border-top:1px solid var(--ink);margin-top:0}

/* ============================================================
   Mikroanimationen
   Zurückhaltend gehalten: nichts blinkt, nichts springt.
   Alles hört auf prefers-reduced-motion (siehe oben).
   ============================================================ */

/* Abschnitte blenden beim Scrollen ein */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:.06s}
.reveal-d2{transition-delay:.12s}
.reveal-d3{transition-delay:.18s}

/* Schaltflächen heben leicht an */
.btn{transition:background .18s,border-color .18s,color .18s,transform .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* Pfeillinks schieben den Pfeil nach rechts */
.go,.more,.works-head a,.split .intro a{transition:color .18s}
.cards .go{position:relative;display:inline-block}
.cards article:hover .go{transform:translateX(3px)}
.cards .go{transition:color .18s,transform .22s}
.more{display:inline-block;transition:color .18s,transform .22s}
.more:hover{transform:translateX(3px)}
.works-head a{display:inline-block;transition:color .18s,transform .22s}
.works-head a:hover{transform:translateX(3px)}

/* Rasterkarten: Fläche reagiert */
.cards article{transition:background .25s}
.cards a.article:hover{background:#fafaf9}

/* Projektkacheln: Bild zoomt minimal, Linie wandert */
.work .plate{overflow:hidden}
.work .plate img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.work:hover .plate img{transform:scale(1.03)}
.work .meta{transition:border-color .25s}
.work:hover .meta{border-color:var(--ink-30)}

/* Zeilen in Listen und Tabellen */
.facts .f,.psl .r,.index .p,.steps .s,.tenets .t{transition:background .2s}
.facts .f:hover,.psl .r:hover,.tenets .t:hover{background:#fafaf9}

/* Fragen: das Plus dreht sich zum Minus */
.faq summary::after{content:"+";font-family:var(--mono);font-size:16px;color:var(--ink-45);
  flex:none;transition:transform .25s cubic-bezier(.22,.61,.36,1),color .2s}
.faq details[open] summary::after{content:"+";transform:rotate(45deg);color:var(--ink)}
.faq summary{transition:color .18s}

/* Kopfzeile: Haarlinie erscheint erst beim Scrollen */
.head{transition:border-color .3s,box-shadow .3s}
.head:not(.is-scrolled){border-bottom-color:transparent}

/* Navigation: Unterstrich wächst */
.head nav a{position:relative}
.head nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.head nav a:hover::after,.head nav a[aria-current]::after{transform:scaleX(1)}

/* Filterknöpfe */
.filter button{transition:background .16s,color .16s,border-color .16s,transform .16s}
.filter button:hover{transform:translateY(-1px)}

/* Laufband der Vertrauensleiste steht still, wenn niemand scrollt: nein, es läuft.
   Beim Überfahren hält es an, damit man einen Namen lesen kann. */

/* ============================================================
   Mikroanimationen, zweite Stufe
   Die Haarlinie ist das Grundelement dieses Designs.
   Also zeichnet sie sich, statt einfach da zu sein.
   ============================================================ */

/* Haarlinie oben zeichnet sich von links nach rechts */
.facts,.psl,.steps,.tenets,.faq,.testis,.dist,.plainlist,.theme{position:relative}
.facts::before,.psl::before,.steps::before,.tenets::before,.faq::before,
.testis::before,.dist::before,.plainlist::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);
  transform-origin:left;transform:scaleX(1)}
.reveal .facts::before,.reveal .psl::before,.reveal .steps::before,.reveal .tenets::before,
.reveal .faq::before,.reveal .testis::before,.reveal .dist::before,.reveal .plainlist::before{
  transform:scaleX(0);transition:transform .95s cubic-bezier(.22,.61,.36,1) .12s}
.reveal.is-in .facts::before,.reveal.is-in .psl::before,.reveal.is-in .steps::before,
.reveal.is-in .tenets::before,.reveal.is-in .faq::before,.reveal.is-in .testis::before,
.reveal.is-in .dist::before,.reveal.is-in .plainlist::before{transform:scaleX(1)}

/* Zeilen laufen versetzt ein */
.reveal .facts .f,.reveal .psl .r,.reveal .steps .s,.reveal .tenets .t,
.reveal .plainlist .it,.reveal .faq details{
  opacity:0;transform:translateY(8px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in .facts .f,.reveal.is-in .psl .r,.reveal.is-in .steps .s,.reveal.is-in .tenets .t,
.reveal.is-in .plainlist .it,.reveal.is-in .faq details{opacity:1;transform:none}
.reveal.is-in .f:nth-child(1),.reveal.is-in .r:nth-child(1),.reveal.is-in .s:nth-child(1),
.reveal.is-in .t:nth-child(1),.reveal.is-in .it:nth-child(1){transition-delay:.10s}
.reveal.is-in .f:nth-child(2),.reveal.is-in .r:nth-child(2),.reveal.is-in .s:nth-child(2),
.reveal.is-in .t:nth-child(2),.reveal.is-in .it:nth-child(2){transition-delay:.16s}
.reveal.is-in .f:nth-child(3),.reveal.is-in .r:nth-child(3),.reveal.is-in .s:nth-child(3),
.reveal.is-in .t:nth-child(3),.reveal.is-in .it:nth-child(3){transition-delay:.22s}
.reveal.is-in .f:nth-child(4),.reveal.is-in .r:nth-child(4),.reveal.is-in .t:nth-child(4),
.reveal.is-in .it:nth-child(4){transition-delay:.28s}
.reveal.is-in .f:nth-child(n+5),.reveal.is-in .it:nth-child(n+5){transition-delay:.34s}
.reveal.is-in .faq details:nth-child(2){transition-delay:.08s}
.reveal.is-in .faq details:nth-child(3){transition-delay:.14s}
.reveal.is-in .faq details:nth-child(n+4){transition-delay:.20s}

/* Bildfeld: kein eigener Wisch-Effekt mehr (Pascal, 23.09.2026: wirkte
   ruckelig, als wäre die Seite langsam). Bilder blenden mit ihrem
   Abschnitt ein. */

/* Mono-Etiketten: die Sperrung fällt auf ihren Wert zurück */
.reveal .mono,.reveal .eyebrow,.reveal .tag,.reveal .k,.reveal .n,.reveal .theme{
  letter-spacing:.3em;transition:letter-spacing .8s cubic-bezier(.22,.61,.36,1) .1s}
.reveal.is-in .mono,.reveal.is-in .theme{letter-spacing:.16em}
.reveal.is-in .eyebrow{letter-spacing:.18em}
.reveal.is-in .tag,.reveal.is-in .k{letter-spacing:.16em}
.reveal.is-in .n{letter-spacing:.16em}

/* Konturknopf: die Fläche läuft von links ein */
.btn-out{background-image:linear-gradient(90deg,var(--ink),var(--ink));
  background-size:0% 100%;background-repeat:no-repeat;background-position:left center;
  transition:background-size .4s cubic-bezier(.22,.61,.36,1),color .3s .05s,border-color .3s,transform .18s}
.btn-out:hover{background-size:100% 100%;color:#fff;border-color:var(--ink)}

/* Kundenstimme: der Balken der Verteilung wächst */
.reveal .dist .tr i{transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .2s}
.reveal.is-in .dist .tr i{transform:scaleX(1)}

/* Fallstudien-Etiketten laufen nacheinander ein */
.reveal .tags span{opacity:0;transform:translateY(6px);
  transition:opacity .45s,transform .45s}
.reveal.is-in .tags span{opacity:1;transform:none}
.reveal.is-in .tags span:nth-child(2){transition-delay:.07s}
.reveal.is-in .tags span:nth-child(3){transition-delay:.14s}
.reveal .modules span{opacity:0;transition:opacity .5s}
.reveal.is-in .modules span{opacity:1}
.reveal.is-in .modules span:nth-child(2){transition-delay:.05s}
.reveal.is-in .modules span:nth-child(3){transition-delay:.10s}
.reveal.is-in .modules span:nth-child(4){transition-delay:.15s}
.reveal.is-in .modules span:nth-child(n+5){transition-delay:.20s}

/* Startbild: Überschrift und Beiwerk staffeln sich beim Laden */
@keyframes mawu-auf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:mawu-auf .7s cubic-bezier(.22,.61,.36,1) both .05s}
/* Die Überschrift bleibt bewusst ohne Animation: sie ist das Erste, was gelesen wird. */
.hero .side p{animation:mawu-auf .7s cubic-bezier(.22,.61,.36,1) both .18s}
.hero .acts{animation:mawu-auf .7s cubic-bezier(.22,.61,.36,1) both .28s}
.phero .eyebrow{animation:mawu-auf .7s cubic-bezier(.22,.61,.36,1) both .05s}

.phero .side{animation:mawu-auf .7s cubic-bezier(.22,.61,.36,1) both .18s}
.crumb{animation:mawu-auf .6s cubic-bezier(.22,.61,.36,1) both}

/* Sanfter Übergang zwischen den Seiten, wo der Browser es kann */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mawu-aus .22s ease both}
::view-transition-new(root){animation:mawu-ein .32s ease both}
@keyframes mawu-aus{to{opacity:0}}
@keyframes mawu-ein{from{opacity:0}}

/* ============================================================
   Schwarzer Einstieg, der beim Scrollen zum Kreis zusammenlaeuft
   Eine bildschirmfuellende Blende kehrt die Seite um: aus Weiss
   wird Schwarz, aus schwarzer Schrift weisse. Beim Scrollen
   schrumpft sie zu einem Kreis in der Mitte und verschwindet,
   alles ausserhalb ist wieder die normale weisse Seite.
   Den Radius --r setzt das Skript; 70.8% deckt genau die Ecken.
   ============================================================ */
html{background:var(--paper)}
.blende{position:fixed;inset:0;z-index:60;pointer-events:none;
  background:#ffffff;mix-blend-mode:difference;
  clip-path:circle(var(--r,70.8%) at 50% 50%);will-change:clip-path}
.blende.aus{visibility:hidden}

/* Das Bildband liegt ueber der Blende, damit das Foto nicht
   umgekehrt wird. Die Kopfleiste dagegen liegt darunter und wird
   mit umgekehrt: dadurch hat sie im Schwarzen keinen sichtbaren
   Hintergrund mehr und im Weissen ihre normale helle Leiste.
   Sobald der Kreis die Kopfleiste nicht mehr beruehrt, wandert sie
   ueber die Blende, damit das Bildband nicht darueber laeuft. */
body.kreis .plate-hero.has-img{position:relative;z-index:70}
body.kreis .plate-hero{background:transparent}
/* Im Umkehrbereich deckt die Leiste voll, damit kein Schatten der
   Ueberschrift durchscheint. Umgekehrt ergibt das reines Schwarz. */
body.kreis:not(.kopf-hell) .head{background:#ffffff}
body.kreis.kopf-hell .head{z-index:80}


/* ============================================================
   Bildband: sechs Programme gegen eines
   Beide Seiten sind als Fenster gezeichnet, damit man sieht,
   dass es Programme sind. Links sechs kleine Fenster, die sich
   einzeln melden. Rechts ein Fenster mit Seitenleiste, in dem
   ein Bereich nach dem anderen aufgerufen wird.
   ============================================================ */
.plate-hero.ablauf{height:auto;aspect-ratio:auto;padding:0;overflow:visible;
  background:none;display:block;position:relative}
.ablauf-buehne{width:100%;padding:0}

.verg{display:flex;align-items:stretch;gap:clamp(18px,3%,48px);width:100%}
.seite{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.pfeil{flex:none;align-self:center;font-size:clamp(20px,2vw,30px);line-height:1;color:var(--ink-45)}

.skopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:clamp(16px,1.9vw,26px)}
.ablauf .skopf .mono{font-family:var(--mono);font-size:clamp(10px,.86vw,12px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60)}
.ablauf .skopf .mark{font-size:clamp(17px,1.5vw,23px);line-height:1;color:var(--ink)}

/* die Fensterleiste mit den drei Punkten */
.ablauf .bar{position:absolute;left:0;right:0;top:0;height:clamp(16px,1.7vw,22px);
  border-bottom:1px solid var(--ink-30);display:flex;align-items:center}
.ablauf .bar::before{content:"";position:absolute;left:8px;top:50%;margin-top:-2px;
  width:3.5px;height:3.5px;border-radius:50%;background:var(--ink-30);
  box-shadow:6px 0 0 var(--ink-30),12px 0 0 var(--ink-30)}
.ablauf .titel{position:absolute;left:32px;font-style:normal;font-family:var(--mono);
  font-size:clamp(8.5px,.72vw,10px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60)}

/* links: sechs einzelne Programme */
.progs{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,.9vw,14px)}
.ablauf .prog{position:relative;border:1.5px solid var(--ink-30);border-radius:7px;
  background:var(--paper);display:flex;align-items:center;justify-content:center;
  min-height:clamp(64px,6.4vw,92px);padding:clamp(16px,1.7vw,22px) 6px 0}
.ablauf .prog em{font-style:normal;font-family:var(--sans);font-weight:500;
  letter-spacing:-.012em;font-size:clamp(10.5px,.95vw,14px);color:var(--ink-45);
  text-align:center}

/* rechts: ein Programm mit Seitenleiste und Inhalt */
.fenster{position:relative;flex:1 1 auto;border:1.5px solid var(--ink);border-radius:9px;
  background:var(--paper);padding-top:clamp(16px,1.7vw,22px);overflow:hidden}
.fenster .ui{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);height:100%}
.fenster .nav{border-right:1px solid var(--line);padding:clamp(9px,1vw,14px) 0}
/* die Bereiche sind echte Schaltflaechen, der Browser bringt
   dafuer Grundwerte mit, die hier weg muessen */
.ablauf .nav-p{display:block;width:100%;text-align:left;border:0;background:none;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding:clamp(4px,.5vw,7px) clamp(10px,1.1vw,16px);
  font-family:var(--sans);font-size:clamp(10px,.88vw,13px);letter-spacing:-.01em;
  color:var(--ink-45);transition:color .18s}
.ablauf .nav-p:hover{color:var(--ink)}
.ablauf .nav-p[aria-selected="true"]{color:var(--ink);font-weight:500}
.ablauf .panel[hidden]{display:none}
.fenster .flaeche{position:relative;padding:clamp(12px,1.3vw,18px) clamp(12px,1.3vw,18px) 0}
.ablauf .kunde{display:block;font-style:normal;font-family:var(--sans);font-weight:500;
  font-size:clamp(12px,1.05vw,16px);letter-spacing:-.015em;color:var(--ink)}
.ablauf .stand{display:block;margin-top:4px;font-style:normal;font-family:var(--mono);
  font-size:clamp(8.5px,.72vw,10px);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-45)}
.fenster .zeile{display:block;height:1px;background:var(--line);margin-top:clamp(9px,1vw,13px)}
.fenster .zeile:nth-of-type(2){width:72%}
.fenster .zeile:nth-of-type(3){width:54%}

/* die Bilanz unter den Fenstern traegt die Aussage, deshalb
   gross genug zum Lesen und nicht als kleines Etikett */
.summe{margin-top:clamp(16px,1.9vw,26px);font-family:var(--sans);
  font-size:clamp(14px,1.25vw,19px);line-height:1.4;letter-spacing:-.015em;
  color:var(--ink-60)}
.ablauf .summe b{font-weight:500;color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  /* jedes Programm meldet sich einzeln, keines weiss vom anderen */
  .p1{animation:meldet 12s ease infinite}
  .p2{animation:meldet 12s ease infinite;animation-delay:1.6s}
  .p3{animation:meldet 12s ease infinite;animation-delay:3.2s}
  .p4{animation:meldet 12s ease infinite;animation-delay:4.8s}
  .p5{animation:meldet 12s ease infinite;animation-delay:6.4s}
  .p6{animation:meldet 12s ease infinite;animation-delay:8s}
}
@keyframes meldet{0%{border-color:var(--ink-30)}
  2%{border-color:var(--ink)}
  9%,100%{border-color:var(--ink-30)}}

@media (max-width:820px){
  .verg{flex-direction:column;align-items:stretch;gap:12px}
  .pfeil{align-self:center;transform:rotate(90deg);margin:2px 0}
  .skopf{margin-bottom:14px}
  .progs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ablauf .prog{min-height:60px;padding-top:18px}
  .ablauf .prog em{font-size:12px}
  .fenster{padding-top:20px}
  .fenster .ui{grid-template-columns:minmax(0,40%) minmax(0,1fr)}
  .ablauf .nav-p{font-size:11px;padding:4px 10px}
  .summe{font-size:14px;margin-top:14px}
}

/* ---------- Knopf unter dem Projektraster ----------
   Schaltflaechen sind auf der Seite sonst Links, ein echter
   Knopf braucht deshalb die Grundwerte des Browsers abgeraeumt. */
.mehr{display:flex;justify-content:center;margin-top:clamp(34px,4vw,56px)}
.mehr[hidden],.mehr button[hidden]{display:none}
button.btn{font-family:var(--sans);font-size:14.5px;font-weight:500;line-height:1;
  background-color:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;
  padding:16px 34px;gap:12px}
button.btn:hover{color:#fff}
#mehr-laden::after{content:"";width:7px;height:7px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .22s ease}
#mehr-laden:hover::after{transform:rotate(45deg) translate(2px,2px)}

/* Projekte ohne Bild: Kachel zeigt nur Text, Fallstudie wird einspaltig */
.case-ohne-bild{grid-template-columns:minmax(0,1fr)}
.case-ohne-bild > div{max-width:74ch}
.work:not(:has(.plate)) .meta{border-top:1px solid var(--line);padding-top:18px}

/* ---------- Projektband (Vorgehen) ----------
   Drei Arbeiten nebeneinander, Haarlinien statt Rahmen. Beim Eintreten
   wischen die Bilder nacheinander von unten herein, die Beschriftung folgt. */
.band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-tile{margin:0;background:var(--paper);overflow:hidden}
.band-img{aspect-ratio:16/10;overflow:hidden;background:var(--plate)}
.band-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.band-tile:hover .band-img img{transform:scale(1.03)}
.band-tile figcaption{display:flex;flex-direction:column;gap:6px;padding:18px 22px 22px;font-size:15px;line-height:1.4}
.band-tile figcaption .mono{font-size:10.5px}
.band.reveal{opacity:1;transform:none}
.band.reveal .band-img{clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.65,0,.35,1)}
.band.reveal .band-img img{transform:scale(1.08);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.band.reveal figcaption{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.band.reveal.is-in .band-img{clip-path:inset(0 0 0 0)}
.band.reveal.is-in .band-img img{transform:none}
.band.reveal.is-in figcaption{opacity:1;transform:none}
.band.reveal.is-in .band-tile:nth-child(2) .band-img,.band.reveal.is-in .band-tile:nth-child(2) .band-img img{transition-delay:.14s}
.band.reveal.is-in .band-tile:nth-child(3) .band-img,.band.reveal.is-in .band-tile:nth-child(3) .band-img img{transition-delay:.28s}
.band.reveal.is-in .band-tile:nth-child(1) figcaption{transition-delay:.55s}
.band.reveal.is-in .band-tile:nth-child(2) figcaption{transition-delay:.69s}
.band.reveal.is-in .band-tile:nth-child(3) figcaption{transition-delay:.83s}
.band.reveal.is-in .band-tile:hover .band-img img{transform:scale(1.03);transition-delay:0s}
@media (max-width:760px){
  .band{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .band::-webkit-scrollbar{display:none}
  .band-tile{scroll-snap-align:start}
}