/* ============================================================
   Huber Consulting — Wasser & Umwelt
   Neo-minimalism: generous space, hairline structure, one
   dominant colour (#00666D) and one accent (deep blue).
   Soft brand-tinted shadows carry depth instead of outlines.
   ============================================================ */

:root{
  /* ---- colour ---- */
  --brand:      #00666d;   /* dominant */
  --brand-deep: #00666d;   /* text-safe tint of the brand */
  --brand-soft: #E8F1EE;   /* quiet surface tint */
  --navy:       #16385A;   /* accent — markers, rules, small emphasis */

  /* Venn sets: Split-Komplementär auf der Marke (Farbton 184°). Die Marke
     behält die mittlere Menge, die beiden anderen liegen beiderseits ihrer
     Komplementärfarbe, bei 34° und 334°.

     Der Farbton allein trägt die Unterscheidung nie — die Helligkeit ist
     mitgestuft, damit die Mengen auch in Graustufen und für farbfehl-
     sichtige Leser auseinanderfallen. Grauwerte 140 / 72 / 42, also
     Abstände von 68 und 30. (Die frühere Fassung stand bei 123 / 72 / 66:
     Betrieb und International lagen 7 Stufen auseinander und fielen im
     Schwarzweißdruck zusammen.)

     Die Flächen liegen bei 50 % Deckkraft übereinander. Deshalb stehen die
     Beschriftungen in --ink und nicht in Weiß: Weiß erreicht auf der
     halbdeckenden Fläche nur 1,8:1 (Behörde) und 2,4:1 (Betrieb). */
  --venn-1:     #D67F0E;   /* hue  34° — warm, hellste */
  --venn-2:     #00666D;   /* die Marke selbst */
  --venn-3:     #4C182F;   /* hue 334° — rosé, dunkelste */

  /* Leistungs-Diagramm: sechs Felder als Ring.
     ANALOGE Harmonie um die Markenfarbe — sechs Farbtöne im Abstand von
     15°, von 139° (Grün) über 184° (die Marke selbst) bis 214° (Blau).
     Dazu eine gleichmäßige Helligkeitsrampe: Der Ring liest sich als
     ein Verlauf, nicht als sechs Einzelfarben.

     Bewusster Tausch gegenüber vorher: Das frühere Schema (sechs Töne
     im 60°-Abstand) war maximal unterscheidbar, aber laut — Magenta und
     Rot neben der Marke. Analoge Töne sind ruhig und gehören sichtbar
     zusammen; der Preis ist, dass die Grauwerte enger beieinander
     liegen (Abstand 8 statt 20+). Vertretbar, weil jeder Kreis seine
     eigene Beschriftung trägt und über die Position erkennbar bleibt. */
  --venn6-1:    #07872F;   /* 139° — Grundwasser, hellster */
  --venn6-2:    #2B7A57;   /* 154° — Klima */
  --venn6-3:    #207061;   /* 169° — Analysen */
  --venn6-4:    #00666D;   /* 184° — Projekte, die Markenfarbe */
  --venn6-5:    #035880;   /* 199° — Bildung */
  --venn6-6:    #0B4898;   /* 214° — International, dunkelster */

  /* Konturen: derselbe Farbton, nur dunkler (Helligkeit x0,66 mit
     Untergrenze). Die Untergrenze ist nötig, weil die letzten beiden
     Töne sonst wie Schwarz wirken — der Sinn ist ja, dass jeder Kreis
     seine eigene Farbe behält. */
  --venn6-1-li: #05591F;
  --venn6-2-li: #1C5139;
  --venn6-3-li: #154A40;
  --venn6-4-li: #00454A;
  --venn6-5-li: #023A54;
  --venn6-6-li: #073064;
  --ink:        #17211D;   /* headings and body */
  --muted:      #5A6A64;   /* secondary text — 5.4:1 on --paper */
  --paper:      #F7F9F8;
  --white:      #FFFFFF;   /* surfaces: cards, dialog, inputs */
  --on-dark:    #FFFFFF;   /* text on a dark fill — buttons, chips, skiplink */

  --line:      rgba(23,33,29,.10);
  --line-firm: rgba(23,33,29,.16);

  /* ---- type ----
     Drei Rollen, klar getrennt:
       --sans  Archivo        — Überschriften, Wortmarke, Schaltflächen
       --serif Source Serif 4 — Lede und Fließtext
       --mono  IBM Plex Mono  — ausschließlich echte Messwerte
     Alle drei liegen selbst gehostet unter assets/fonts/ (SIL OFL),
     es geht keine Anfrage an einen fremden Server. */
  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Modulare Skala, Quart (1,333) ab 1rem — nach oben gedeckelt,
     damit die Überschriften auf kleinen Schirmen nicht kippen. */
  --t-xs:  .78rem;
  --t-sm:  .9rem;
  --t-base: clamp(1rem, .96rem + .2vw, 1.075rem);
  --t-lede: clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
  --t-h3:  clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --t-h2:  clamp(2rem, 1.4rem + 2.4vw, 3.15rem);
  --t-h1:  clamp(2.9rem, 1.9rem + 4.4vw, 5.2rem);

  /* ---- form ---- */
  /* Gestaffelt, nicht ein Radius für alles: Flächen 10 px,
     Bedienelemente 4 px, echte Kapseln nur noch für die Sprachwahl. */
  --r: 10px;
  --r-sm: 6px;
  --r-xs: 4px;
  --r-pill: 999px;

  --sh: 0,102,109;                 /* --brand as rgb, tints every shadow */
  --shadow-sm: 0 2px 8px -2px    rgba(var(--sh),.20);
  --shadow:    0 10px 28px -10px rgba(var(--sh),.28);
  --shadow-lg: 0 22px 48px -16px rgba(var(--sh),.34);
  --ring:      0 0 0 3px rgba(var(--sh),.28);

  --rail: 88px;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-padding-top:6rem; -webkit-text-size-adjust:100%; }
html:not(.js){ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  /* Serife im Fließtext: mehr Zeilenabstand als eine Grotesk braucht. */
  font-family:var(--serif);
  font-size:var(--t-base);
  line-height:1.72;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--sans); font-weight:700;
  letter-spacing:-.032em; line-height:1.04; margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--t-h1); letter-spacing:-.042em; line-height:.96; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.02em; line-height:1.2; }

/* ── Die Grenze zwischen Prosa und Bedienung ────────────────
   Fließtext, Ledes und beschreibende Kleinlabels tragen die Serife.
   Alles, was man anklickt, tippt oder als Wegweiser liest, trägt die
   Grotesk. Ohne diese Regel erbt jedes `font-family:inherit` die
   Serife und die Oberfläche franst aus. */
.nav a, .btn, .cta-mini, .lang a, .burger,
.wordmark__name, .foot a, .foot__nav a,
.field input, .field select, .field textarea,
.form__note, .skiplink{
  font-family:var(--sans);
}

/* Beschreibende Kleinlabels — leise, kursiv, nie Versalien.
   Die Einwilligung ist davon ausgenommen: Das ist ein Satz, den man
   liest und dem man zustimmt, kein Feldname. */
.field:not(.check) label, .contact__list dt, .langs span, .track em{
  font-family:var(--serif); font-style:italic;
  font-size:var(--t-sm); color:var(--muted); letter-spacing:0;
}

/* Der Claim bleibt Prosa: kursive Serife neben der Grotesk-Wortmarke. */
.wordmark__sub{ font-family:var(--serif); font-style:italic; }

/* Messwerte — und wirklich nur die. */
.mono, .case__figs dd, .gauge__scale span{
  font-family:var(--mono); font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
p{ margin:0 0 1em; }
a{ color:inherit; }

::selection{ background:var(--brand-soft); color:var(--ink); }

:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:var(--r-sm); }
/* Scroll targets receive focus programmatically — no ring for that. */
[tabindex="-1"]:focus{ outline:none; }

.skiplink{
  position:fixed; top:.6rem; left:.6rem; z-index:100;
  padding:.7rem 1.1rem; background:var(--navy); color:var(--on-dark);
  border-radius:var(--r-pill);
  font-size:.8rem; font-weight:500; text-decoration:none;
  transform:translateY(-200%);
}
.skiplink:focus{ transform:none; }

/* ── Standortzeile im Hero — kein Rubriken-Etikett ──────────
   Die Abschnitts-Eyebrows sind entfallen: Wo die Überschrift schon
   „Ausgewählte Referenzen" sagt, trägt ein „PROJEKTE" darüber nichts
   bei. Geblieben ist die eine Zeile, die tatsächlich etwas mitteilt. */
.eyebrow{
  margin:0 0 1.6rem;
  font-family:var(--serif); font-style:italic;
  font-size:var(--t-sm); letter-spacing:0; color:var(--muted);
}

/* Der dritte Punkt der Zeile. Die internationale Arbeit ist eine der drei
   Mengen des Venn darunter — sie bekommt hier denselben Ton und sonst
   nichts: gleiche Schrift, gleiche Größe, nur nicht mehr grau. Ein Wort,
   das aufleuchtet, reicht; ein Abzeichen wäre zu laut. */
.eyebrow__intl{ color:var(--brand-deep); }
.band--dark .eyebrow__intl,
.cta .eyebrow__intl{ color:inherit; }

/* ============================================================
   Pegel — die Signatur der Seite
   Eine Pegellatte am linken Rand: Die Scrolltiefe wird als Wasserstand
   gelesen, 0,00 m oben, tiefer nach unten. Dezimeter-Striche wie an
   einer echten Latte, Meterzahlen in der Monospace — das ist die eine
   Stelle, an der die Seite laut sein darf. Alles andere bleibt ruhig.
   ============================================================ */
.gauge{
  position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:40;
  display:none; pointer-events:none;
  padding:8.6rem 0 3rem;
}

/* Die Latte: eine schmale Säule, in der das Wasser steht. */
.gauge__staff{
  position:absolute; left:26px; top:8.6rem; bottom:3rem; width:13px;
  background:var(--white);
  border:1px solid var(--line-firm);
  border-radius:2px;
  overflow:hidden;
}

/* Dezimeter-Teilung — alle 5 % ein Strich, jeder zweite länger. */
.gauge__staff::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to bottom,
      var(--line-firm) 0 1px, transparent 1px 5%);
  opacity:.7;
}

.gauge__level{
  position:absolute; inset:0 0 auto 0;
  height:var(--fill,0%);
  background:linear-gradient(to bottom,
    rgba(var(--sh),.10) 0%, rgba(var(--sh),.30) 100%);
  border-bottom:2px solid var(--brand);
  transition:height .12s linear;
}

/* Meter-Marken samt Ablesung, rechts neben der Latte. */
.gauge__marks{ list-style:none; margin:0; padding:0; height:100%; position:relative; }
.gauge__marks li{
  position:absolute; left:39px; width:11px; height:1px;
  background:var(--line-firm);
}
.gauge__marks li::after{
  content:attr(data-mark);
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:10px; font-weight:400;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  color:var(--muted); white-space:nowrap;
}
.gauge__marks li:nth-child(1){ top:0 }
.gauge__marks li:nth-child(2){ top:25% }
.gauge__marks li:nth-child(3){ top:50% }
.gauge__marks li:nth-child(4){ top:75% }
.gauge__marks li:nth-child(5){ top:100% }

/* Einheit, einmal am Kopf der Latte. */
.gauge__unit{
  position:absolute; left:26px; top:7.2rem;
  font-family:var(--mono); font-size:10px; color:var(--muted);
  letter-spacing:-.02em;
}

@media (min-width:1180px){
  .gauge{ display:block; }
  body:has(.gauge){ padding-left:var(--rail); }

  /* Full-bleed sections break back out of the rail gutter; the extra
     left padding puts their inner content back on the page grid. */
  body:has(.gauge) .masthead,
  body:has(.gauge) .band--dark,
  body:has(.gauge) .cta,
  body:has(.gauge) .foot{
    margin-left:calc(var(--rail) * -1);
    padding-left:calc(var(--pad) + var(--rail));
  }
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem var(--pad);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}

.wordmark{ text-decoration:none; display:flex; align-items:center; gap:.6rem; flex:none;
           padding:.55rem 0; }   /* auf 44 px Tap-Höhe gebracht */

/* Die Bildmarke ist ein Quadrat — feste Höhe, damit die Kopfzeile beim
   Laden nicht springt. */
.wordmark__mark{ width:2.15rem; height:2.15rem; flex:none; border-radius:5px; }
@media (max-width:380px){ .wordmark__mark{ width:1.9rem; height:1.9rem; } }

/* 4,5rem: groß genug, dass „consulting" und „Einfach Wasser" lesbar
   bleiben (unter ~64 px werden sie zu Grafik), klein genug, dass die
   Fußzeile nicht zur Bildfläche wird. */
.foot__mark{
  width:4.5rem; height:4.5rem; flex:none; border-radius:9px;
  margin-bottom:.8rem;
}
.wordmark__name{
  font-weight:700; font-size:1.12rem; letter-spacing:-.035em; color:var(--ink);
  white-space:nowrap;
}
.wordmark__rule{ width:1.25rem; height:1px; background:var(--brand); align-self:center; }
.wordmark__sub{
  font-size:.82rem; font-weight:500; letter-spacing:-.01em;
  color:var(--brand-deep);
}

.nav{ display:flex; gap:2rem; margin-left:auto; }
.nav a{
  font-weight:500; font-size:.88rem; text-decoration:none; color:var(--muted);
  padding:.25rem 0; position:relative;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="true"]{ color:var(--ink); }
.nav a[aria-current="true"]::after, .nav a:hover::after{ transform:scaleX(1); }

.masthead__tools{ display:flex; align-items:center; gap:1rem; }

.lang{ display:flex; gap:.15rem; }
.lang a{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  font-size:var(--t-xs); font-weight:500; letter-spacing:.02em;
  padding:.5rem .6rem; min-height:2rem; color:var(--muted); border-radius:var(--r-xs);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.lang a[aria-current="true"]{ color:var(--on-dark); background:var(--navy); }
.lang a:hover:not([aria-current="true"]){ color:var(--ink); background:var(--brand-soft); }

.cta-mini{
  display:none;
  font-size:.8rem; font-weight:500; text-decoration:none;
  color:var(--on-dark); background:var(--brand-deep);
  padding:.5rem 1.05rem; border-radius:var(--r-xs);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cta-mini:hover{ background:var(--ink); }
@media (min-width:900px){ .cta-mini{ display:inline-block; } }

.burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3rem,6vw,6rem) var(--pad) 0;
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  align-items:center;
}
@media (min-width:1080px){
  .hero{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
}
.hero__text{ max-width:100%; min-width:0; }

/* Größe kommt aus --t-h1; hier nur Farbe und Abstand. */
h1{ color:var(--ink); margin:0 0 1.5rem; }

.standfirst{
  font-size:var(--t-lede);
  line-height:1.6; max-width:42ch; color:var(--muted);
  margin-bottom:2.2rem;
}

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin:0; }

.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-weight:500; font-size:var(--t-sm); letter-spacing:-.005em;
  padding:.8rem 1.6rem;
  border:1px solid transparent; border-radius:var(--r-xs);
  transition:background .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease);
}
.btn--solid{ background:var(--brand-deep); color:var(--on-dark); }
.btn--solid:hover{ background:var(--ink); }
.btn--ghost{ background:none; color:var(--ink); border-color:var(--line-firm); }
.btn--ghost:hover{ border-color:var(--brand-deep); background:var(--white); }

/* ── Venn ─────────────────────────────────────────────────
   Three brand-tinted sets over white. Nothing is blended: the
   overlaps darken purely by stacked alpha, so one set reads light,
   two mid, and the shared centre darkest — which is the argument. */
/* Kein schwebendes Kärtchen: Das Diagramm gehört zur Seite, nicht auf
   eine eigene Fläche darüber. Struktur trägt hier eine Haarlinie. */
.venn{
  margin:0; min-width:0;
  padding:0 0 1.4rem;
}
.venn svg{ display:block; width:100%; height:auto; overflow:visible; }
.venn__img{ display:block; width:100%; height:auto; }

.venn__c{ fill-opacity:.30; stroke-width:1.25; stroke-opacity:.5; }
.venn__c--1{ fill:var(--venn-1); stroke:var(--venn-1); }
.venn__c--2{ fill:var(--venn-2); stroke:var(--venn-2); }
.venn__c--3{ fill:var(--venn-3); stroke:var(--venn-3); }
.venn__c--r1{ fill:var(--venn6-1); stroke:var(--venn6-1-li); }
.venn__c--r2{ fill:var(--venn6-2); stroke:var(--venn6-2-li); }
.venn__c--r3{ fill:var(--venn6-3); stroke:var(--venn6-3-li); }
.venn__c--r4{ fill:var(--venn6-4); stroke:var(--venn6-4-li); }
.venn__c--r5{ fill:var(--venn6-5); stroke:var(--venn6-5-li); }
.venn__c--r6{ fill:var(--venn6-6); stroke:var(--venn6-6-li); }

/* Jeder Kreis trägt seine eigene Kontur in einer dunkleren Fassung seiner
   Füllfarbe (Token `--venn6-N-li`). Hier bleibt nur, was für alle gilt.

   Die Kontur ist auf 0,25 pt festgelegt — als Haarlinie, wie die übrigen
   Strukturlinien der Seite (`--line`). `vector-effect:non-scaling-stroke`
   ist dabei die eigentliche Zusage: Ohne die Angabe rechnet das SVG die
   Strichstärke in Nutzereinheiten der viewBox und skaliert sie mit dem
   Bild — die Linie würde auf dem Handy dünner als auf dem Desktop. Mit
   ihr bleibt 0,25 pt überall 0,25 pt, unabhängig von der Anzeigegröße. */
.venn--ring .venn__c{
  stroke-width:.25pt;
  vector-effect:non-scaling-stroke;
  stroke-opacity:1;
}

/* ── Der Ring als Bedienelement ────────────────────────────
   Beim Zeigen tritt ein Feld hervor und die übrigen treten zurück.
   Das ist keine Zierde: Der Ring erschließt die sechs Karten und die
   Bildunterschrift wird zur Anzeige. Deshalb wird die Deckkraft der
   FÜLLUNG geändert (`fill-opacity`) und nicht `opacity` — letzteres
   gehört der Einblend-Animation und würde mit ihr kollidieren. */
.venn--ring .venn__c{
  cursor:pointer;
  transition:fill-opacity .28s var(--ease), stroke-width .28s var(--ease);
}
.venn--ring .venn__labels text{ transition:fill-opacity .28s var(--ease); }

.venn--ring.is-probing .venn__c{ fill-opacity:.10; }
.venn--ring.is-probing .venn__c.is-active{ fill-opacity:.62; stroke-width:1pt; }
.venn--ring.is-probing .venn__labels text{ fill-opacity:.30; }
.venn--ring.is-probing .venn__labels text.is-active{ fill-opacity:1; }
.venn--ring.is-probing .venn__core text{ fill-opacity:.25; }

/* Die Bildunterschrift trägt im Ruhezustand den Satz zum Diagramm und
   beim Zeigen die Angaben zum Feld. Die feste Mindesthöhe verhindert,
   dass der Text darunter springt. */
.venn--ring figcaption{ min-height:8.5em; }
.venn__read b{ display:block; font-family:var(--sans); font-weight:700;
                font-size:var(--t-sm); color:var(--ink); margin-bottom:.3rem; }

/* Die zugehörige Karte weiter unten quittiert mit. */
.card.is-linked{ background:var(--white); box-shadow:inset 3px 0 0 var(--brand-deep); }

@media (prefers-reduced-motion:reduce){
  .venn--ring .venn__c,
  .venn--ring .venn__labels text{ transition:none; }
}

/* ── Das Arbeitsfeld-Diagramm (Hero) ───────────────────────
   Drei gleich große Felder, halbdeckend übereinandergelegt. Die
   Schnittmengen sind nicht gezeichnet — sie entstehen von selbst aus
   der Überlagerung. Genau das ist der Grund für das Inline-SVG: In der
   Bilddatei waren sie eingebacken, hier folgen sie den Farbtoken. */
.venn--work .venn__c{ fill-opacity:.5; stroke:none; }
.venn--work .venn__labels text{ font-size:60px; }
.venn--work .venn__core text{ font-size:100px; fill:var(--white); letter-spacing:-.02em; }

.venn__chip{
  fill:var(--ink); fill-opacity:.55;
  stroke:var(--ink); stroke-width:1.5pt; vector-effect:non-scaling-stroke;
}
.venn__drop--fill{ fill:var(--white); }
.venn__drop--line{
  fill:none; stroke:var(--brand);
  stroke-width:1pt; vector-effect:non-scaling-stroke;
}

/* Die Tropfen und das Mittelfeld kommen nach den drei Flächen — erst
   steht das Argument, dann die Zuspitzung. */
.js .venn--work .venn__chip{
  opacity:0; transform:scale(.86);
  transform-box:fill-box; transform-origin:center;
}
.js .venn--work .venn__drops use{ opacity:0; }
.js .venn--work.is-in .venn__chip{ animation:pop .7s .41s var(--ease) forwards; }
.js .venn--work.is-in .venn__drops use{ animation:fade .6s .62s ease forwards; }

.venn__labels text{
  font-family:var(--sans); font-size:19px; font-weight:500;
  fill:var(--ink); text-anchor:middle; letter-spacing:-.01em;
}
.venn__core text{
  font-family:var(--sans); font-size:20px; font-weight:700;
  fill:var(--navy); text-anchor:middle; letter-spacing:.02em;
}

.venn figcaption{
  margin-top:1.6rem; padding-top:1.3rem;
  border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.65; color:var(--muted);
}

/* Sets fade in one after another, then the lettering arrives. */
.js .venn__c{
  opacity:0; transform:scale(.86);
  transform-box:fill-box; transform-origin:center;
}
.js .venn__labels text, .js .venn__core text{ opacity:0; }
.js .venn.is-in .venn__c{ animation:pop .7s var(--ease) forwards; }
.js .venn.is-in .venn__c--1{ animation-delay:.05s; }
.js .venn.is-in .venn__c--2{ animation-delay:.17s; }
.js .venn.is-in .venn__c--3{ animation-delay:.29s; }
.js .venn.is-in .venn__c--r1{ animation-delay:0.05s; }
.js .venn.is-in .venn__c--r2{ animation-delay:0.12s; }
.js .venn.is-in .venn__c--r3{ animation-delay:0.19s; }
.js .venn.is-in .venn__c--r4{ animation-delay:0.26s; }
.js .venn.is-in .venn__c--r5{ animation-delay:0.33s; }
.js .venn.is-in .venn__c--r6{ animation-delay:0.40s; }
.js .venn.is-in .venn__labels text{ animation:fade .5s .58s ease forwards; }
.js .venn.is-in .venn__core text{ animation:fade .5s .78s ease forwards; }

@keyframes pop{ to{ opacity:1; transform:scale(1); } }
@keyframes fade{ to{ opacity:1 } }

/* ============================================================
   BANDS
   ============================================================ */
.band{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(5rem,10vw,9rem) var(--pad);
}
.band__head{ max-width:44ch; margin-bottom:clamp(3rem,6vw,4.5rem); }
.band__head h2{ font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem); margin-bottom:1.1rem; }
.band__lede{ font-size:1.02rem; margin:0; max-width:50ch; color:var(--muted); }

.band__split{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center; margin-bottom:clamp(3rem,6vw,4.5rem);
}
.band__split .band__head{ margin-bottom:0; }
@media (min-width:900px){
  .band__split{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
}
.venn--sm{ max-width:25rem; justify-self:center; width:100%; }
.venn--ring{ max-width:27rem; }

/* The one saturated field on the page */
.band--dark{
  max-width:none; background:var(--brand); color:var(--on-dark);
  margin-block:0;
  --sh: 22,56,90;   /* a --brand shadow is invisible on a --brand field */
}
.band--dark > *{ max-width:var(--maxw); margin-inline:auto; }

/* Zentrierter Abschnittskopf. Muss nach `.band--dark > *` stehen — beide
   haben dieselbe Spezifität, also entscheidet die Reihenfolge, sonst
   überschreibt die Bandregel die Breite wieder auf --maxw und das
   `margin-inline:auto` hätte nichts zu zentrieren. */
.band__head--center{
  max-width:56ch; margin-inline:auto; text-align:center;
}
.band__head--center .band__lede{ margin-inline:auto; }
.band--dark .eyebrow{ color:var(--on-dark); }
.band--dark .eyebrow::before{ background:var(--on-dark); }
.band--dark .band__lede{ color:var(--on-dark); opacity:.85; }

/* ── Service cards ────────────────────────────────────────── */
.cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border-block:1px solid var(--line);
}
@media (min-width:720px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.card{
  position:relative;
  padding:2.5rem 2.2rem 2.4rem;
  background:var(--paper);
  transition:background .3s var(--ease);
}
.card:hover{ background:var(--white); }
.card__tick{ display:none; }
.card h3{ font-size:var(--t-h3); margin:0 0 .7rem; }
.card p{ font-size:.96rem; color:var(--muted); margin-bottom:1.5rem; }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; }
/* Schlagworte als Text mit Trennpunkt — Kapseln machten aus drei
   Stichwörtern drei Bedienelemente, die keine sind. */
.tags li{
  font-family:var(--serif); font-style:italic;
  font-size:var(--t-sm); color:var(--muted);
}
.tags li + li::before{ content:"·"; margin-right:.55rem; color:var(--line-firm); }

/* A real button for assistive tech; ::after stretches the hit area over the
   whole card, so the visible affordance and the click target agree. */
.card__more{
  display:inline-flex; align-items:center;
  margin-top:1.6rem; padding:0;
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:var(--t-sm); font-weight:500;
  color:var(--brand-deep);
  border-bottom:1px solid var(--line-firm);
}
.card:hover .card__more{ border-bottom-color:var(--brand-deep); }
.card__more svg{ display:none; }
.card__more::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.card__more svg{
  width:1rem; height:1rem; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
.card__more:focus-visible{ outline:none; }
.card:has(.card__more:focus-visible){ outline:2px solid var(--navy); outline-offset:-2px; }

/* ── Case rows ────────────────────────────────────────────── */
/* `margin-inline:auto` statt `margin:0` — sonst überschreibt diese Regel
   das Zentrieren aus `.band--dark > *` und die Zeilen kleben links, während
   der Abschnittskopf mittig sitzt. */
.cases{ list-style:none; margin:0 auto; padding:0; display:grid; gap:0; }
.case{
  display:grid; gap:1.25rem 2.5rem;
  grid-template-columns:10rem minmax(0,1fr) 12rem;
  align-items:start;
  color:var(--on-dark);
  border-top:1px solid rgba(255,255,255,.22);
  padding:2rem 2.2rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.case:last-child{ border-bottom:1px solid rgba(255,255,255,.22); }
.case__meta{ display:flex; flex-direction:column; gap:.4rem; }
.case__year{ font-family:var(--mono); font-size:var(--t-xs); font-weight:500; color:var(--on-dark); opacity:.85; }
.case__place{
  font-family:var(--serif); font-style:italic; font-size:var(--t-sm);
  font-weight:400; color:var(--on-dark); opacity:.7;
}
.case__body h3{ font-size:1.2rem; margin-bottom:.7rem; }
.case__body p{ margin:0; font-size:var(--t-sm); color:var(--on-dark); opacity:.8; }
.case__figs{ margin:0; display:flex; gap:2rem; }
.case__figs dt{
  font-family:var(--serif); font-style:italic; font-size:var(--t-xs);
  color:var(--on-dark); opacity:.7; margin-bottom:.4rem;
}
.case__figs dd{
  margin:0; font-size:1.5rem; color:var(--on-dark);
}

/* Bündig mit der linken Kante der Zeilenspalte: Rückt die Spalte durch
   `margin-inline:auto` ein, muss der Hinweis mitkommen. Unterhalb von
   --maxw wird der Wert 0 und er sitzt wieder am Rand. */
.disclaimer{
  margin:2rem 0 0 max(0px, calc((100% - var(--maxw)) / 2));
  font-size:.76rem; line-height:1.7;
  color:var(--on-dark); opacity:.85;
  border-left:1px solid var(--on-dark); padding-left:1.1rem; max-width:76ch;
}

/* ── Profile ──────────────────────────────────────────────── */
.profile{ display:grid; gap:clamp(2.5rem,6vw,5rem); grid-template-columns:minmax(0,16rem) minmax(0,1fr); }

.profile__portrait{ margin:0; }
.portrait{
  display:block; width:100%; height:auto;
  aspect-ratio:4/5;
  /* The source is a taller 3/4-length shot, so the crop is anchored high —
     otherwise a centred crop cuts the head off. */
  object-fit:cover; object-position:50% 12%;
  background:var(--brand-soft);
  border-radius:var(--r);
}
.profile__portrait figcaption{ display:flex; flex-direction:column; gap:.35rem; margin-top:1.3rem; }
.profile__portrait b{ font-weight:700; font-size:1.05rem; letter-spacing:-.03em; }
.profile__portrait span{ font-size:.74rem; font-weight:400; color:var(--muted); line-height:1.5; }

.profile__text .lead{
  font-size:clamp(1.1rem,1rem + .55vw,1.4rem); line-height:1.5; font-weight:400;
  letter-spacing:-.02em; color:var(--ink); margin-bottom:1.4rem;
}
.profile__text > p{ max-width:62ch; color:var(--muted); }

.subhead{
  display:block; margin:3rem 0 1.2rem;
  font-size:.66rem; font-weight:500; letter-spacing:0; color:var(--navy);
}

.track{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.profile__text .track{ margin:0; }
.track li{
  display:grid; grid-template-columns:8rem minmax(0,1fr); gap:.25rem 1.5rem;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
}
.track__yr{ grid-row:span 2; font-size:.76rem; color:var(--muted); padding-top:.2rem; }
.track b{ font-weight:500; font-size:1rem; letter-spacing:-.015em; }
.track em{ font-style:normal; font-size:.88rem; color:var(--muted); }

.langs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:2.5rem; }
.langs li{ display:flex; flex-direction:column; gap:.25rem; }
.langs b{ font-weight:500; font-size:.98rem; }
.langs span{ font-size:.7rem; color:var(--muted); letter-spacing:.02em; }

.profile__more{ margin:2.5rem 0 0; font-size:.82rem; }
.profile__more a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:.15rem; }
.profile__more a:hover, .profile__more a:focus-visible{ color:var(--navy); border-bottom-color:currentColor; }

/* ── Contact ──────────────────────────────────────────────── */
.band--contact{ border-top:1px solid var(--line); }
.contact{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:minmax(0,.85fr) minmax(0,1fr); align-items:start; }
.contact__pitch h2{ font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem); margin-bottom:1.1rem; }

.contact__list{ margin:2.5rem 0 0; }
/* Die 6,5rem-Spalte plus die unumbrechbare E-Mail-Adresse ergaben bei
   320 px zusammen 338 px — das war der Überlauf auf kleinen Geräten.
   `minmax(0,…)` erlaubt der Wertspalte zu schrumpfen, `anywhere` erlaubt
   der Adresse zu brechen, und unter 520 px stapeln Label und Wert. */
.contact__list > div{
  padding:1.1rem 0; display:grid;
  grid-template-columns:6.5rem minmax(0,1fr); gap:1rem;
  border-top:1px solid var(--line);
}
.contact__list dd, .contact__list a{ overflow-wrap:anywhere; }
@media (max-width:520px){
  .contact__list > div{ grid-template-columns:1fr; gap:.2rem; }
  .contact__list dt{ padding-top:0; }
}
.contact__list dt{
  font-weight:400; color:var(--muted); padding-top:.3rem;
}
.contact__list dd{ margin:0; font-size:.98rem; line-height:1.6; }
.contact__list a{ text-decoration:none; color:var(--navy); border-bottom:1px solid var(--line-firm); }
.contact__list a:hover{ border-bottom-color:var(--navy); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field--wide{ grid-column:1/-1; }
.field label{ font-size:.64rem; font-weight:500; letter-spacing:0; color:var(--muted); }
.field input, .field select, .field textarea{
  font-size:1rem; color:var(--ink);
  background:var(--white);
  border:1px solid var(--line-firm); border-radius:var(--r-sm);
  padding:.8rem .9rem; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; }
.field select{ font-size:.94rem; padding-right:2rem; text-overflow:ellipsis; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:var(--ring);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color:#B3341B; box-shadow:0 0 0 3px rgba(179,52,27,.16);
}
.field--wide .btn{ align-self:flex-start; }

.check{ flex-direction:row; align-items:flex-start; gap:.75rem; }
/* 1,5rem statt 1,1rem: Ein Kontrollkästchen, das man auf dem Handy
   verfehlt, verhindert das Absenden — das ist kein Detail. */
.check input{ width:1.5rem; height:1.5rem; flex:none; margin-top:.1rem; accent-color:var(--brand-deep); }
.check label{
  font-size:.86rem; font-weight:400; letter-spacing:0; text-transform:none;
  line-height:1.6; color:var(--muted);
}
.check label a{ color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line-firm); }

.form__note{
  margin:1rem 0 0; font-size:.8rem; line-height:1.5; color:var(--muted); min-height:1.2em;
}
.form__note[data-state="ok"]{ color:var(--brand-deep); }
.form__note[data-state="err"]{ color:#B3341B; }

/* ============================================================
   SERVICE DIALOG
   ============================================================ */
.modal{
  padding:0; border:0; background:none;
  max-width:min(36rem,calc(100vw - 2rem));
  max-height:calc(100dvh - 3rem);
  border-radius:var(--r);
  overflow:visible;
  color:var(--ink);
}
.modal::backdrop{
  background:rgba(23,33,29,.42);
  backdrop-filter:blur(3px);
}
.modal__box{
  background:var(--white);
  border-radius:var(--r);
  box-shadow:0 32px 64px -24px rgba(23,33,29,.35);
  padding:2.6rem 2.4rem 2.2rem;
  max-height:calc(100dvh - 3rem);
  overflow-y:auto;
}

.modal__close{
  position:absolute; top:1rem; right:1rem;
  width:2.2rem; height:2.2rem; display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r-pill); cursor:pointer;
  color:var(--muted);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.modal__close svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.modal__close:hover{ background:var(--brand-soft); color:var(--ink); }

.modal h2{ font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem); margin:0 0 1rem; padding-right:2rem; }
.modal__lede{ font-size:1.02rem; line-height:1.6; margin:0 0 1rem; }
.modal .subhead{ margin:2rem 0 .9rem; }

.modal__list{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.modal__list li{
  position:relative; padding-left:1.5rem;
  font-size:.94rem; line-height:1.5;
}
.modal__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.6rem; height:1px; background:var(--brand);
}

.modal__foot{
  margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
}
.modal__hint{ margin:0; font-size:.78rem; line-height:1.5; color:var(--muted); }

/* The form inside the write dialog reuses .form wholesale */
.modal .form{ margin-top:1.8rem; }
.modal .form .form__note{ margin-top:.8rem; }
.modal--write .modal__box{ padding-bottom:2.4rem; }

/* The language reminder — the one tinted panel inside the dialog */
.talk__langs{
  margin:2rem 0 0;
  background:var(--brand-soft);
  border-radius:var(--r-sm);
  padding:1.2rem 1.3rem;
}
.talk__langs-label{
  margin:0 0 .7rem;
  font-size:.62rem; font-weight:500; letter-spacing:0; color:var(--brand-deep);
}
.talk__flags{
  list-style:none; margin:0 0 .8rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.talk__flags li{
  font-size:.78rem; font-weight:500; color:var(--brand-deep);
  background:var(--white); border-radius:var(--r-pill);
  padding:.3rem .8rem;
}
.talk__langs p{ margin:0; font-size:.86rem; line-height:1.6; color:var(--brand-deep); }

/* Compact variant for the write panel: pills and one line, no heading */
.talk__langs--compact{
  margin:1.6rem 0 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem;
  padding:.85rem 1rem;
}
.talk__langs--compact .talk__flags{ margin:0; }
.talk__langs--compact p{ font-size:.82rem; }

/* Closing reassurance — deliberately quiet, it is not a selling line */
.talk__soft{
  margin:.4rem 0 0; font-size:.78rem; line-height:1.6; color:var(--muted);
  max-width:46ch;
}
.modal--talk .modal__foot{ gap:.7rem; }

/* Entrance */
@media (prefers-reduced-motion:no-preference){
  .modal[open]{ animation:modalIn .32s var(--ease); }
  .modal[open]::backdrop{ animation:fade .32s ease; }
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(12px) scale(.985); } }

/* Fields the dialog just wrote into, flagged briefly so the change is seen */
.field.is-filled input,
.field.is-filled select,
.field.is-filled textarea{ animation:filled 2.2s var(--ease); }
@keyframes filled{
  0%, 55%{ border-color:var(--brand); box-shadow:var(--ring); }
  100%{ border-color:var(--line-firm); box-shadow:none; }
}

/* ============================================================
   CALL TO ACTION
   The only centred block on the page, so it reads as a break in
   the flow rather than another section of running text.
   ============================================================ */
.cta{
  --sh: 47,97,86;
  background:var(--brand-soft);
  border-block:1px solid var(--line);
  padding:clamp(4.5rem,9vw,7.5rem) var(--pad);
}
.cta__inner{
  max-width:56ch; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.cta .eyebrow{ color:var(--brand-deep); }
.cta .eyebrow::before{ background:var(--brand-deep); }
.cta h2{
  font-size:clamp(1.9rem,1.2rem + 2.3vw,3rem);
  margin-bottom:1.2rem; text-wrap:balance;
}
.cta__lede{
  font-size:1.05rem; line-height:1.7; color:var(--muted);
  max-width:48ch; margin:0 0 2.4rem;
}
.cta__actions{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.cta__alt{ margin:0; font-size:.86rem; color:var(--muted); }
.cta__alt a{
  color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--line-firm); margin-left:.35rem;
}
.cta__alt a:hover{ border-bottom-color:var(--navy); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top:1px solid var(--line);
  padding:2.5rem var(--pad);
  max-width:var(--maxw); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.25rem 2.5rem;
}
.foot__brand{ display:flex; flex-direction:column; align-items:flex-start; }
.foot__brand > div{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.foot__brand span:last-child{ font-size:.82rem; font-weight:500; letter-spacing:-.01em; color:var(--brand-deep); }
.foot__nav{ display:flex; gap:1.75rem; }
.foot__nav a{
  font-size:var(--t-xs); font-weight:500;
  text-decoration:none; color:var(--muted);
  padding:.4rem 0;                 /* größeres Tap-Ziel */
}
.foot__nav a:hover{ color:var(--navy); }
.foot__note{ margin:0 0 0 auto; font-size:var(--t-xs); color:var(--muted); }

/* ============================================================
   Einwilligungs-Leiste
   Unten angedockt statt bildschirmfüllend: Sie soll fragen, nicht
   erpressen. Beide Schaltflächen sind gleich groß und gleich gut
   erreichbar — ein Banner, das das Ablehnen versteckt, ist unwirksam.
   ============================================================ */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  padding:1.1rem clamp(1rem,4vw,2.5rem);
  background:var(--white);
  border-top:1px solid var(--line-firm);
  box-shadow:0 -12px 32px -18px rgba(var(--sh),.45);
}
.consent__text{
  margin:0; flex:1 1 28ch; min-width:0;
  font-size:var(--t-sm); line-height:1.6; color:var(--muted);
}
.consent__text a{ color:var(--brand-deep); }
.consent__actions{ display:flex; gap:.6rem; flex:none; }
.consent .btn{ padding:.65rem 1.2rem; }
@media (max-width:520px){
  .consent__actions{ width:100%; }
  .consent .btn{ flex:1; text-align:center; }
}

/* ============================================================
   REVEAL
   ============================================================ */
.js [data-reveal]{ opacity:0; transform:translateY(16px); }
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .case{ grid-template-columns:8rem minmax(0,1fr); }
  .case__figs{ grid-column:2; }
  .contact{ grid-template-columns:1fr; }
  .profile{ grid-template-columns:1fr; }
  .profile__portrait{ max-width:14rem; }
}

@media (max-width:760px){
  .burger{
    display:grid; place-content:center; gap:5px;
    width:2.4rem; height:2.4rem; padding:0; cursor:pointer;
    background:none; border:1px solid var(--line-firm); border-radius:var(--r-sm);
  }
  .burger span{ display:block; width:15px; height:1.5px; background:var(--ink);
                transition:transform .3s var(--ease); }
  .burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

  /* Explicit sides, not the `inset` shorthand: setting bottom:0 alongside
     height:auto over-constrains the fixed box and collapses the panel. */
  .nav{
    position:fixed; left:0; right:0; top:4.1rem; bottom:auto;
    flex-direction:column; gap:0; margin:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 34px -16px rgba(var(--sh),.4);
    padding:.5rem var(--pad) 1.5rem;
    max-height:calc(100vh - 4.1rem);
    max-height:calc(100dvh - 4.1rem);
    overflow-y:auto;
    transform:translateY(-102%); opacity:0; pointer-events:none;
    transition:transform .32s var(--ease), opacity .22s;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ font-size:1.2rem; padding:.9rem 0; border-bottom:1px solid var(--line); color:var(--ink); }
  .nav a::after{ display:none; }

  .wordmark__sub{ display:none; }

  .case{ grid-template-columns:1fr; gap:1rem; padding:1.6rem 1.5rem; }
  .case__figs{ grid-column:1; gap:2.5rem; }
  .case__meta{ flex-direction:row; align-items:baseline; gap:1rem; }
  .track li{ grid-template-columns:1fr; }
  .track__yr{ grid-row:auto; }
  .form{ grid-template-columns:1fr; }
  .foot__note{ margin-left:0; }
  .card{ padding:2rem 1.6rem; }

  /* SVG text is sized in user units, so it shrinks with the diagram.
     Scale it back up so a narrow screen stays readable. */
  .modal{ max-width:calc(100vw - 1.5rem); }
  .modal__box{ padding:2.2rem 1.5rem 1.8rem; }

  .venn{ padding:1.5rem 1.2rem 1.2rem; }
  .venn__labels text{ font-size:22px; }
  .venn__core text{ font-size:22px; }
  .venn__c{ stroke-width:1.75; }
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */
/* ── Sehr schmale Geräte (bis 380 px) ──────────────────────
   Bei 320 px ragten Wortmarke und Werkzeuge zusammen 38 px über den
   Rand. Hier wird beides geschnürt, statt den Inhalt umzubrechen. */
@media (max-width:380px){
  :root{ --pad:1rem; }
  .masthead__inner{ gap:.4rem; }
  .wordmark__name{ font-size:1rem; }
  .wordmark__rule{ display:none; }
  .lang{ gap:0; }
  .lang a{ padding:.5rem .4rem; }
  .burger{ width:2.2rem; height:2.2rem; }
  .case{ padding:1.4rem 0; }
  .card{ padding:1.75rem 1.25rem; }
}

@media (prefers-reduced-motion:reduce){
  html, html:not(.js){ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
  .js .venn__c{ opacity:1; transform:none; }
  .js .venn--work .venn__chip{ opacity:1; transform:none; }
  .js .venn--work .venn__drops use{ opacity:1; }
  .js .venn__labels text, .js .venn__core text{ opacity:1; }
}

@media print{
  .gauge,.masthead__tools,.burger,.actions,.form{ display:none; }
  body{ padding-left:0; background:#fff; }
  .band--dark,.foot{ background:#fff; }
  .card,.case,.venn{ box-shadow:none; }
}

/* ============================================================
   LEGAL PAGES (impressum.html, datenschutz.html)
   ============================================================ */
.legal{ max-width:min(70ch,100%); margin-inline:auto; padding:clamp(3.5rem,8vw,6rem) var(--pad) 5rem; }
.legal h1{ font-size:clamp(2.2rem,1.5rem + 2.4vw,3rem); margin-bottom:1.8rem; }
.legal h2{ font-size:1.2rem; margin:3rem 0 .9rem; }
.legal h3{ font-size:.7rem; font-weight:500; letter-spacing:0;
           color:var(--navy); margin:2rem 0 .5rem; }
.legal p, .legal li{ font-size:.97rem; color:var(--muted); }
.legal ul{ padding-left:1.2rem; margin:0 0 1em; }
.legal li{ margin-bottom:.45rem; }
.legal a{ color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line-firm); }
.legal address{ font-style:normal; line-height:2; color:var(--muted); }
.legal .back{
  display:inline-block; margin-bottom:3rem; text-decoration:none; border:0;
  font-size:.7rem; font-weight:500; letter-spacing:0;
  color:var(--muted);
}
.legal .back:hover{ color:var(--navy); }
.notice{
  background:var(--brand-soft); border-radius:var(--r-sm);
  padding:1.1rem 1.3rem; margin:0 0 3rem;
  font-size:.84rem; line-height:1.7; color:var(--brand-deep);
}
.todo{ color:var(--navy); font-weight:500; border-bottom:1px solid var(--navy); }