/* ═══════════════════════════════════════════════════════════════════
   /marke — Brand-Identity-Styleguide (Phase 1, ueberarbeitet)
   Nur auf dieser Route geladen. Format nach dem Markenstrategie-Auszug:
   Optionen und Situationen zeigen, Haarlinien statt Farbfelder, keine
   Animationen. Alles auf Token; Inline-Werte im Markup sind var()-
   Verweise und schematische Prozentbreiten (PRINCIPLES §3).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopf ── */
.mk-head{padding-block:var(--s-8) var(--section-y)}
.mk-head__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:var(--s-16);align-items:center}
/* Giebel-Echo: die vermessene Kontur in den Leiter-Stufen — butt/miter
   wie die Vorlage, Strichgewicht steigt zur Mitte. */
.mk-head__art{width:min(22rem,100%);height:auto;justify-self:end;
  stroke-linecap:butt;stroke-linejoin:miter}
.mk-head__echo{fill:none}
.mk-head__echo--1{stroke:var(--red-100);stroke-width:2}
.mk-head__echo--2{stroke:var(--red-200);stroke-width:2.4}
.mk-head__echo--3{stroke:var(--red-400);stroke-width:2.8}
.mk-head__echo--4{stroke:var(--c-signal);stroke-width:3.2}
.mk-head__title{max-width:14ch}
.mk-lead{margin-top:var(--s-6);max-width:62ch;color:var(--c-muted);
  font-size:var(--t-md)}
.mk-lead strong{color:var(--c-ink)}
.mk-note{margin-top:var(--s-6);max-width:62ch;font-size:var(--t-sm);
  color:var(--c-muted)}
.mk-note .tag--demo{margin-right:var(--s-2)}

/* ── Sektionsgeruest: Weiss + Haarlinien, scanbar ── */
.mk-sec{padding-block:var(--section-y);border-top:1px solid var(--c-line)}
.mk-foot-note{margin-top:var(--s-8);max-width:68ch;font-size:var(--t-sm);
  color:var(--c-muted)}
.mk-foot-note code{font-weight:var(--fw-strong);letter-spacing:.02em}
.mk-link{color:var(--c-signal);font-weight:var(--fw-strong);
  border-bottom:1px solid var(--c-signal);
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.mk-link:hover{color:var(--c-signal-d);border-color:var(--c-signal-d)}

/* ── 01 · Wofuer stehen wir — Ein-Satz-Schalter (JS) ── */
.mk-vmw[hidden]{display:none}
.mk-vmw__tabs{display:flex;gap:var(--s-8);border-bottom:1px solid var(--c-line)}
.mk-vmw__tab{position:relative;padding:.4rem 0 var(--s-4);
  font-size:var(--t-lg);font-weight:var(--fw-title);letter-spacing:-.02em;
  color:var(--c-muted);transition:color var(--dur-ui)}
.mk-vmw__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--c-signal);transform:scaleX(0);
  transform-origin:left;transition:transform var(--dur-ui) var(--ease)}
.mk-vmw__tab:hover{color:var(--c-ink)}
.mk-vmw__tab.is-active{color:var(--c-ink)}
.mk-vmw__tab.is-active::after{transform:scaleX(1)}
.mk-vmw__panel[hidden]{display:none}
.mk-vmw__q{margin-top:var(--s-8);font-size:var(--t-sm);color:var(--c-muted)}
.mk-vmw__stmt{display:none}
.mk-vmw__stmt.is-active{display:block;animation:mk-swap .18s var(--ease)}
@keyframes mk-swap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mk-vmw__text{margin-top:var(--s-5);font-size:var(--t-2xl);
  font-weight:var(--fw-display);letter-spacing:-.025em;line-height:1.12;
  max-width:26ch}
.mk-vmw__words{margin-top:var(--s-5);font-size:var(--t-2xl);
  font-weight:var(--fw-display);letter-spacing:-.02em;line-height:1.2;
  color:var(--c-signal)}
.mk-vmw__note{margin-top:var(--s-5);font-size:var(--t-sm);color:var(--c-muted)}
.mk-vmw__chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-8)}
.mk-vmw__chip{border:1px solid var(--c-line);border-radius:var(--r-pill);
  padding:.5em 1.1em;font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.mk-vmw__chip:hover{color:var(--c-signal)}
.mk-vmw__chip.is-active{border-color:var(--c-signal);color:var(--c-signal)}
.mk-matrix[hidden]{display:none}

/* ── 01 · Fallback ohne JS — Drei-Richtungen-Matrix ── */
.mk-matrix{border-top:1px solid var(--c-line)}
.mk-matrix__row{display:grid;grid-template-columns:11rem repeat(3,1fr);
  gap:var(--s-8);padding-block:var(--s-8);
  border-bottom:1px solid var(--c-line)}
.mk-matrix__title{font-size:var(--t-lg);font-weight:var(--fw-title);
  letter-spacing:-.02em}
.mk-matrix__sub{margin-top:var(--s-2);font-size:var(--t-xs);
  color:var(--c-muted)}
.mk-matrix__kicker{font-size:var(--t-xs);font-weight:var(--fw-strong);
  color:var(--c-signal);letter-spacing:.08em;text-transform:uppercase}
.mk-matrix__text{margin-top:var(--s-3);font-size:var(--t-md);
  font-weight:var(--fw-title);letter-spacing:-.01em;line-height:1.45}
.mk-matrix__words{margin-top:var(--s-3);font-size:var(--t-md);
  font-weight:var(--fw-title);line-height:1.55;color:var(--c-signal)}
.mk-matrix__note{margin-top:var(--s-3);font-size:var(--t-xs);
  color:var(--c-muted)}

/* ── 02 · Markenarchitektur — vier Varianten ── */
.mk-arch{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.mk-var{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-6)}
.mk-var__badge{display:inline-block;background:var(--c-signal);color:#fff;
  border-radius:var(--r-sm);padding:.3em .8em;font-size:var(--t-xs);
  font-weight:var(--fw-strong);letter-spacing:.06em;text-transform:uppercase}
.mk-var__title{margin-top:var(--s-4);font-size:var(--t-sm);font-weight:var(--fw-strong);
  line-height:1.35;min-height:2.6em}
.mk-var__mode{font-size:var(--t-xs);color:var(--c-muted)}
.mk-var__list{margin-top:var(--s-5)}
.mk-lock{display:flex;align-items:center;gap:var(--s-3);min-height:3.6rem;
  border-top:1px solid var(--c-line);padding-block:var(--s-3)}

/* V1: bestehende Marke — rote Platte mit Giebel + Kuerzel.
   Bewusst OHNE Radius: die echte Logoplatte ist eckig. */
.mk-lock__tile{flex:none;display:inline-flex;align-items:center;gap:.3rem;
  background:var(--c-signal);padding:.3rem .45rem;color:#fff}
.mk-lock__tile svg{width:.85rem;height:.85rem;stroke:#fff;stroke-width:9;
  stroke-linecap:butt;stroke-linejoin:miter}
/* 800 ist die dokumentierte EINZIGE Ausnahme von „500 ist das Maximum"
   (tokens.css, DESIGN §3): diese Kachel bildet die bestehende Logoplatte
   nach. Sie zeigt die Wortmarke als Zeichen — sie setzt keinen Text.
   Wer hier auf Tokengewicht umstellt, faelscht das Logo. */
.mk-lock__tile span{font-size:.62rem;font-weight:800;letter-spacing:.04em}
.mk-lock__body{display:grid;gap:.15rem;min-width:0}
.mk-lock__body--div{border-left:1px solid var(--c-line);
  padding-left:var(--s-3)}
.mk-lock__name{font-size:.62rem;font-weight:var(--fw-strong);line-height:1.3;
  letter-spacing:.02em}
.mk-lock__line{font-size:.58rem;color:var(--c-muted)}
.mk-lock__line em{font-style:normal;font-weight:var(--fw-strong);color:var(--c-signal)}

/* V2–V4: HIG-Wortmarke + Zuordnung.
   800 wie oben: die Wortmarke selbst, nicht gesetzter Text. */
.mk-lock__hig{flex:none;font-size:var(--t-md);font-weight:800;
  letter-spacing:-.02em;line-height:.95;color:var(--c-signal);
  min-width:3.1rem}
.mk-lock__hig em{display:block;font-style:normal;font-size:.58rem;
  font-weight:var(--fw-strong);letter-spacing:.02em;color:var(--c-muted)}
.mk-lock__code{font-size:var(--t-sm);font-weight:var(--fw-strong);letter-spacing:.02em;
  line-height:1.2}
.mk-lock__desc{font-size:.58rem;color:var(--c-muted);letter-spacing:.03em;
  line-height:1.35}

/* ── 03 · Das Zeichen — sechs Situationen + Regeln ── */
.mk-zgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:var(--s-5);align-items:start}
.mk-zs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.mk-z{display:grid;gap:var(--s-3)}
.mk-z__stage{aspect-ratio:16/10;display:grid;place-items:center;
  border-radius:var(--r-sm);border:1px solid var(--c-line);
  background:var(--c-white);overflow:hidden}
.mk-z__stage > img{width:52%;height:auto}
.mk-z--creme .mk-z__stage{background:var(--c-cream)}
.mk-z--dunkel .mk-z__stage{background:var(--c-deep);border-color:transparent}
.mk-z--bild .mk-z__stage{border-color:transparent;
  background:url("../../img/projects/froeschlhaus-hall-480.jpg") center/cover}
.mk-z--rot .mk-z__stage{background:var(--c-signal);border-color:transparent}
.mk-z__field{width:58%;background:var(--c-white);border-radius:var(--r-sm);
  padding:5% 7%;display:grid;place-items:center}
.mk-z__field img{width:100%;height:auto}
.mk-z__zone{position:relative;display:grid;place-items:center;
  padding:1.15rem 1.5rem;border:1px dashed var(--c-signal)}
.mk-z__zone img{width:7rem;height:auto}
.mk-z__x{position:absolute;font-style:normal;font-size:.62rem;
  font-weight:var(--fw-strong);color:var(--c-signal);line-height:1}
.mk-z__x--top{top:.2rem;left:50%;transform:translateX(-50%)}
.mk-z__x--left{left:.35rem;top:50%;transform:translateY(-50%)}
.mk-z__cap{font-size:var(--t-xs);color:var(--c-muted);line-height:1.45}
.mk-z__cap strong{color:var(--c-ink);font-weight:var(--fw-strong)}

.mk-zrules{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-6);
  display:grid;gap:var(--s-4);align-content:start}
.mk-zrules__head{font-size:var(--t-sm);font-weight:var(--fw-strong);
  letter-spacing:-.01em}
.mk-zrules__list{display:grid;gap:var(--s-4)}
.mk-zrules__list li{position:relative;padding-left:1.7rem;
  font-size:var(--t-sm);color:var(--c-muted);line-height:1.5}
.mk-zrules__list li::before{position:absolute;left:0;top:0;
  font-weight:var(--fw-strong)}
.mk-zrules__list li.is-no::before{content:"✕";color:var(--c-muted)}
.mk-zrules__list li.is-yes::before{content:"✓";color:var(--c-signal)}

.mk-jub{margin-top:var(--s-12)}
.mk-jub__head{font-size:var(--t-sm);font-weight:var(--fw-strong);
  margin-bottom:var(--s-5)}
.mk-jub__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.mk-jub__item{margin:0}
.mk-jub__item img{width:100%;height:auto;border-radius:var(--r-img);
  border:1px solid var(--c-line)}
.mk-jub__item figcaption{margin-top:var(--s-2);font-size:var(--t-xs);
  color:var(--c-muted)}

/* ── 04 · Farbe — Kreise, Mischungen, Leiter ── */
.mk-circles{display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:var(--s-10);row-gap:var(--s-8)}
.mk-circle{display:grid;justify-items:start;align-content:end}
.mk-circle__dot{display:block;border-radius:var(--r-pill)}
.mk-circle__dot.has-line{border:1px solid var(--c-line)}
.mk-circle__name{margin-top:var(--s-4);font-size:var(--t-sm);
  font-weight:var(--fw-strong)}
.mk-circle__hex{font-size:var(--t-xs);color:var(--c-muted);
  font-variant-numeric:tabular-nums}
.mk-circle__role{font-size:var(--t-xs);color:var(--c-muted)}

.mk-mixes{margin-top:var(--s-16)}
.mk-mixes__head{font-size:var(--t-sm);font-weight:var(--fw-strong);
  margin-bottom:var(--s-5)}
.mk-mixes__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s-5)}
.mk-mix__bar{display:flex;height:2.6rem;border-radius:var(--r-sm);
  overflow:hidden;border:1px solid var(--c-line)}
.mk-mix__bar i{display:block;height:100%}
.mk-mix__title{margin-top:var(--s-3);font-size:var(--t-sm);font-weight:var(--fw-strong)}
.mk-mix__note{margin-top:var(--s-1);font-size:var(--t-xs);
  color:var(--c-muted);line-height:1.5}

.mk-ladder-row{margin-top:var(--s-16)}
.mk-ladder-row__head{font-size:var(--t-sm);color:var(--c-muted);
  margin-bottom:var(--s-4)}
.mk-ladder{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--s-2)}
.mk-swatch{display:grid;align-content:end;gap:.1rem;min-height:4.6rem;
  border-radius:var(--r-sm);padding:var(--s-3);color:var(--c-ink)}
.mk-swatch.is-dark{color:#fff}
.mk-swatch__step{font-size:var(--t-xs);font-weight:var(--fw-strong);opacity:.75}
.mk-swatch__hex{font-size:var(--t-xs);font-weight:var(--fw-strong);
  font-variant-numeric:tabular-nums}
.mk-ticks{margin-top:var(--s-6);display:grid;gap:var(--s-3);
  max-width:52rem}

/* ── 05 · Schrift — Specimen ── */
.mk-spec{border-top:1px solid var(--c-line)}
.mk-spec__row{display:grid;grid-template-columns:11rem minmax(0,1fr) auto;
  gap:var(--s-8);align-items:baseline;padding-block:var(--s-6);
  border-bottom:1px solid var(--c-line)}
.mk-spec__role{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted)}
.mk-spec__meta{font-size:var(--t-xs);color:var(--c-muted);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mk-spec__sample{overflow-wrap:break-word}
.mk-spec__sample--titel{font-size:var(--t-2xl);
  font-weight:var(--fw-display);letter-spacing:-.025em;line-height:1.1}
.mk-spec__sample--abschnitt{font-size:var(--t-lg);
  font-weight:var(--fw-title);letter-spacing:-.02em}
.mk-spec__sample--text{font-size:var(--t-base);color:var(--c-muted)}
.mk-spec__sample--num{font-size:var(--t-lg);font-weight:var(--fw-title);
  font-variant-numeric:tabular-nums}
.mk-spec__sample--label{font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-signal)}

/* ── Lockup-Kachel (Anwendungen) ── */
.mk-tile{flex:none;display:grid;place-items:center;width:3.5rem;height:3.5rem;
  background:var(--c-signal);border-radius:var(--r-sm)}
/* gable.svg laeuft im 100er-Raster — der globale 1.8er-Strich aus base.css
   waere hier ein Haar. Strich und Ecken folgen der vermessenen Vorlage. */
.mk-tile svg{width:62%;height:62%;stroke:#fff;stroke-width:7.6;
  stroke-linecap:butt;stroke-linejoin:miter}
.mk-tile--sm{width:2.75rem;height:2.75rem}

/* ── 06 · Icons ── */
.mk-icons-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--s-5);align-items:stretch}
.mk-sig{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-8);display:grid;
  align-content:center;gap:var(--s-5)}
.mk-sig__gable{width:5.5rem;height:5.5rem;stroke:var(--c-signal);
  stroke-width:7.6;stroke-linecap:butt;stroke-linejoin:miter}
.mk-sig__title{font-size:var(--t-lg);font-weight:var(--fw-title);
  letter-spacing:-.02em}
.mk-sig__text{font-size:var(--t-sm);line-height:1.6;color:var(--c-muted)}

.mk-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));
  gap:var(--s-4)}
.mk-icon{display:grid;gap:var(--s-3);justify-items:center;text-align:center;
  background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-sm);padding:var(--s-5) var(--s-3)}
.mk-icon__box{display:grid;place-items:center;width:3.25rem;height:3.25rem;
  border-radius:var(--r-sm);background:var(--c-white);
  border:1px solid var(--c-line);color:var(--c-signal);padding:.7rem;
  transition:background var(--dur-ui),color var(--dur-ui),
  border-color var(--dur-ui)}
.mk-icon:hover .mk-icon__box{background:var(--c-signal);color:#fff;
  border-color:transparent}
.mk-icon__label{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted);
  line-height:1.3}

/* ── 07 · Formsprache ── */
.mk-forms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.mk-form{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-6);display:grid;
  gap:var(--s-4);align-content:start}
.mk-form__demo{display:flex;align-items:center;justify-content:center;
  gap:var(--s-3);min-height:9.5rem;border-radius:var(--r-sm);
  background:var(--c-white);border:1px solid var(--c-line);
  padding:var(--s-5);overflow:hidden}
.mk-form__title{font-size:var(--t-md);font-weight:var(--fw-title);
  letter-spacing:-.02em}
.mk-form__text{font-size:var(--t-sm);color:var(--c-muted);line-height:1.6}

.mk-r{display:grid;place-items:center;width:3.6rem;height:3.6rem;
  background:var(--c-white);border:1px solid var(--c-line);
  font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted)}
.mk-r--card{border-radius:var(--r-card)}
.mk-r--img{border-radius:var(--r-img)}
.mk-r--sm{border-radius:var(--r-sm)}
.mk-r--pill{border-radius:var(--r-pill);width:auto;padding-inline:var(--s-4)}

.mk-form__demo--glass{position:relative;border-color:transparent;
  background:url("../../img/projects/bildungszentrum-gerlos-960.jpg") center/cover}
.mk-glass{position:relative;display:grid;place-items:center;
  padding:var(--s-5) var(--s-6);border-radius:var(--r-sm);color:#fff;
  font-size:var(--t-sm);font-weight:var(--fw-strong);background:var(--c-signal);
  border:1px solid transparent}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mk-glass{background:var(--glass-signal);
    -webkit-backdrop-filter:var(--glass-backdrop);
    backdrop-filter:var(--glass-backdrop);
    border-color:var(--glass-edge);box-shadow:var(--sh-glass)}
}
.mk-motion{font-size:var(--t-md);font-weight:var(--fw-strong);color:var(--c-signal)}

/* ── 08 · Anwendungen ── */
.mk-apps{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-5);
  align-items:start;margin-bottom:var(--s-12)}
.mk-app{margin:0;display:grid;gap:var(--s-3)}
.mk-app figcaption,.mk-mock figcaption{font-size:var(--t-xs);
  color:var(--c-muted);display:flex;align-items:center;gap:var(--s-2);
  flex-wrap:wrap}
.mk-app--vk-front,.mk-app--vk-back{grid-column:span 6}
.mk-app--brief{grid-column:span 5;grid-row:span 2}
.mk-app--sig{grid-column:span 7}

/* Visitenkarte 85,6 × 54 */
.mk-vk{aspect-ratio:856/540;border-radius:var(--r-sm);padding:var(--s-6);
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--sh-card)}
.mk-vk--front{background:var(--c-signal);color:#fff}
.mk-vk__logo{width:34%;height:auto}
.mk-vk__brand{font-size:var(--t-md);font-weight:var(--fw-strong);letter-spacing:.14em;
  text-transform:uppercase}
.mk-vk__claim{margin-top:var(--s-1);font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.08em;color:rgba(255,255,255,.85)}
.mk-vk__services{font-size:var(--t-xs);letter-spacing:.06em;
  color:rgba(255,255,255,.8)}
.mk-vk--back{background:var(--c-white);border:1px solid var(--c-line);
  flex-direction:row;justify-content:space-between;align-items:center;
  gap:var(--s-5)}
.mk-vk__name{font-size:var(--t-md);font-weight:var(--fw-strong);letter-spacing:.02em;
  text-transform:uppercase}
.mk-vk__role{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal);
  letter-spacing:.08em;text-transform:uppercase}
.mk-vk__rule{display:block;width:2.5rem;height:2px;background:var(--c-signal);
  margin-block:var(--s-4)}
.mk-vk__row{display:flex;gap:var(--s-3);align-items:baseline;
  font-size:var(--t-xs);color:var(--c-muted);margin-top:var(--s-2)}
.mk-vk__key{font-weight:var(--fw-strong);color:var(--c-signal);width:1em}

/* Briefkopf A4 */
.mk-brief{aspect-ratio:210/297;background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:9% 8%;display:flex;flex-direction:column;box-shadow:var(--sh-card)}
.mk-brief__head{display:flex;justify-content:space-between;gap:var(--s-4);
  align-items:flex-start}
.mk-brief__head img{width:26%;height:auto}
.mk-brief__addr{font-size:var(--t-xs);color:var(--c-muted);text-align:right;
  line-height:1.5}
.mk-brief__line{display:block;height:2px;width:100%;background:var(--c-signal);
  margin-block:8% 10%}
.mk-brief__body{flex:1;display:grid;align-content:start;gap:6%}
.mk-brief__body span{display:block;height:.45rem;border-radius:var(--r-pill);
  background:var(--c-stone-2)}
.mk-brief__foot{padding-top:var(--s-4);border-top:1px solid var(--c-line);
  font-size:var(--t-xs);color:var(--c-muted)}

/* E-Mail-Signatur */
.mk-sigmail{display:flex;gap:var(--s-5);align-items:center;
  background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-sm);padding:var(--s-6);box-shadow:var(--sh-card)}
.mk-sigmail__name{font-size:var(--t-md);font-weight:var(--fw-title)}
.mk-sigmail__name span{font-weight:var(--fw-strong);color:var(--c-signal);
  font-size:var(--t-sm)}
.mk-sigmail__co{font-size:var(--t-xs);color:var(--c-muted);
  margin-top:var(--s-1)}
.mk-sigmail__meta{margin-top:var(--s-3);font-size:var(--t-xs);
  color:var(--c-muted);line-height:1.6;font-variant-numeric:tabular-nums}

.mk-mocks{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.mk-mock{margin:0;display:grid;gap:var(--s-3)}
.mk-mock img{width:100%;height:auto;border-radius:var(--r-img);
  border:1px solid var(--c-line)}

/* ── 09 · Ausblick ── */
.mk-outro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:var(--s-16);align-items:center}
.mk-outro__list{margin-top:var(--s-8);display:grid;gap:var(--s-3)}
.mk-outro__cta{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-10);display:grid;
  gap:var(--s-6);justify-items:start}
.mk-outro__kicker{font-size:var(--t-md);font-weight:var(--fw-title);
  letter-spacing:-.02em;max-width:16ch}

/* ── Responsive ── */
@media (max-width:1140px){
  .mk-matrix__row{grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
  .mk-matrix__label{grid-column:1 / -1}
  .mk-arch{grid-template-columns:1fr 1fr}
  .mk-zgrid{grid-template-columns:1fr}
  .mk-spec__row{grid-template-columns:9rem minmax(0,1fr)}
  .mk-spec__meta{grid-column:2;text-align:left}
  .mk-icons-grid{grid-template-columns:1fr}
  .mk-forms{grid-template-columns:1fr}
  .mk-apps{grid-template-columns:1fr 1fr}
  .mk-app--vk-front,.mk-app--vk-back{grid-column:span 1}
  .mk-app--brief{grid-column:span 1;grid-row:auto}
  .mk-app--sig{grid-column:span 1}
  .mk-outro{grid-template-columns:1fr;gap:var(--s-10)}
  .mk-ladder{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:900px){
  .mk-head__grid{grid-template-columns:1fr}
  .mk-head__art{display:none}
}
@media (max-width:760px){
  .mk-matrix__row{grid-template-columns:1fr}
  .mk-vmw__tabs{gap:var(--s-5)}
  .mk-vmw__tab{font-size:var(--t-md)}
  .mk-arch{grid-template-columns:1fr}
  .mk-var__title{min-height:0}
  .mk-zs{grid-template-columns:1fr 1fr}
  .mk-jub__grid{grid-template-columns:1fr}
  .mk-circles{gap:var(--s-8)}
  .mk-mixes__grid{grid-template-columns:1fr}
  .mk-spec__row{grid-template-columns:1fr;gap:var(--s-2)}
  .mk-spec__meta{grid-column:1}
  .mk-apps,.mk-mocks{grid-template-columns:1fr}
  .mk-vk--back{flex-direction:column;align-items:flex-start;
    justify-content:space-between}
}
@media (max-width:440px){
  .mk-zs{grid-template-columns:1fr}
  .mk-ladder{grid-template-columns:repeat(2,1fr)}
  .mk-swatch{min-height:4rem}
}

/* /marke ist bewusst animationsfrei (2026-08-14, Simon) — auch geteilte
   Bausteine wie das Footer-CTA-Band blenden hier nicht ein. Die Datei
   laedt nur auf dieser Route, der globale Selektor ist also seitenlokal. */
.js [data-anim]{opacity:1;transform:none;transition:none}