/* ---------- Schrift, selbst ausgeliefert ----------
   Vorher kam Figtree von fonts.googleapis.com. Dabei wird die
   IP-Adresse jedes Besuchers an Google in die USA uebertragen,
   ohne Einwilligung. Das LG Muenchen hat dafuer 2022
   Schadenersatz zugesprochen (3 O 17493/20), seitdem wird das in
   Deutschland abgemahnt - und Sanjas Kunden sitzen dort.

   Figtree steht unter der SIL Open Font License, Selbsthosting
   ist also erlaubt. 10 Dateien, zusammen 150 KB. Dank
   unicode-range laedt ein Browser nur, was er wirklich braucht:
   fuer deutschen Text sind das die latin-Schnitte, latin-ext
   kommt nur bei Namen mit Sonderzeichen dazu.

   font-display:swap wie vorher: lieber sofort in der Ersatz-
   schrift lesen als auf unsichtbaren Text warten. */
@font-face{
  font-family:'Figtree';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/schrift/figtree-400-italic-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/schrift/figtree-400-italic-latin.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:'Figtree';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('assets/schrift/figtree-500-italic-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('assets/schrift/figtree-500-italic-latin.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:'Figtree';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/schrift/figtree-400-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/schrift/figtree-400-normal-latin.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:'Figtree';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/schrift/figtree-500-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/schrift/figtree-500-normal-latin.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:'Figtree';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/schrift/figtree-600-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/schrift/figtree-600-normal-latin.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;
}

/* ============================================================
   FASSUNG GLAS
   ------------------------------------------------------------
   Zweite Fassung von styles.css. Das Original bleibt unberuehrt.

   Was anders ist, in einem Satz: die Karten haben keine Linie
   mehr um sich, sondern Tiefe. Gezaehlt auf der alten Fassung:
   21 Karten mit 1-px-Haarlinie, 13 davon ganz ohne Schatten -
   sie waren also nur durch einen Strich definiert. Genau das
   laesst eine Seite technisch aussehen. Beide Vorlagen, die
   Sanja geschickt hat, definieren die Kante ueber Ton und
   weiche Tiefe und zeichnen nie einen Strich.

   Dazu: ein Radius statt vier (14/16/22/24), mehr Polster,
   leisere Schriftgewichte in den Labels.
   ============================================================ */

/* ============================================================
   Sanja Billhardt
   ------------------------------------------------------------
   Farbregel: kein reines Schwarz, kein neutrales Grau. Jeder
   dunkle Ton hat einen warmen Gruenstich. Dadurch bleibt die
   Seite auch dort leicht, wo sie dunkel wird.
   ============================================================ */

:root{
  --grund:      #f5f4f0;   /* Seitengrund, leicht warm */

  /* ---------- Glas ----------
     Eine Rezeptur, nicht vier. Gemessen vor dieser Aenderung:
     Weichzeichner 14 / 22 / 26 / 44 px, Saettigung 140 bis 200 %,
     Radius 16 / 20 / 22,4 / 24 px, Randdeckung 0 bis 0,75.
     Vier Werte fuer dasselbe Material - deshalb sah es nach
     vier Materialien aus.
     Flaechen und runde Knoepfe bleiben getrennt: ein 44 px
     breiter Knopf mit 26 px Unschaerfe zeigt nur Matsch. */
  --glas-rund:    1.75rem;   /* 28px statt 24 */
  --glas-blur:    blur(26px) saturate(165%);
  --glas-kante:   inset 0 1px 0 rgba(255,255,255,.75);
  --glas-schatten: 0 2.5rem 4.5rem -1.5rem rgba(52,45,38,.3),
                   0 .5rem 1.25rem -.75rem rgba(52,45,38,.14);
  --knopf-blur:   blur(12px) saturate(150%);

  /* Der runde Pfeil, einmal vermessen: er sitzt im Leistungs-
     Umschalter und im Hauptknopf. 1,65rem ist die groesste
     Groesse, bei der er in einen 47-px-Knopf passt, ohne ihn
     aufzublaehen - und damit bleiben beide Vorkommen gleich. */
  --pfeil-kreis: 1.65rem;

  /* ---------- Tiefe statt Linie ----------
     Drei Stufen, mehr braucht die Seite nicht. Alle sehr weit
     gestreut und sehr schwach - ein Schatten, den man als
     Schatten erkennt, ist schon zu stark. */
  --tiefe-1: 0 .5rem 1.5rem -.75rem rgba(45,51,40,.10),
             0 .1rem .4rem -.2rem rgba(45,51,40,.06);
  --tiefe-2: 0 1.25rem 2.75rem -1.25rem rgba(45,51,40,.16),
             0 .25rem .75rem -.4rem rgba(45,51,40,.07);
  --tiefe-3: 0 2.25rem 4.5rem -1.75rem rgba(45,51,40,.22),
             0 .5rem 1.25rem -.6rem rgba(45,51,40,.08);

  /* ---------- Schliff ----------
     Der Kristallschliff als EINE Definition. Vorher stand er
     zweimal in der Datei, mit verschiedenen Werten: die
     Facettenkante der Kontakt-Karte lag bei Deckung 0,372,
     die der Tafel bei 0,20 - 86 % Unterschied fuer dasselbe
     Material. Hier gilt der gedaempfte Wert der Tafel.
     Die Grundfarbe gehoert NICHT hierher: jede Flaeche hat
     ihren eigenen Ton, je nachdem worauf sie liegt. */
  /* ACHTUNG: --schliff und --schliff-lagen stehen NICHT hier.
     In :root wuerden ihre inneren var() sofort mit den
     Standardwerten aufgeloest - 50 % und 118 Grad. Die Werte,
     die script.js beim Darueberfahren auf .tafeln und
     .kontakt-karte schreibt, kaemen nie an, und der Schliff
     stuende still. Sie stehen deshalb direkt auf den
     Glasflaechen, siehe "Glasflaechen: Schliff" weiter unten. */
  /* Ein Regler fuer die ganze Staerke. 1 = wie gebaut,
     0.5 = halb so kraeftig, 0 = unsichtbar. Dadurch muss man
     nicht elf Deckungswerte einzeln nachziehen. */
  --schliff-staerke: .53;   /* zweimal 15 % ueber 0,4 */
  --schliff-groessen: 300% 300%, 260% 260%, 230% 230%;
  --tinte:      #2d3328;   /* dunkelstes Gruen - ersetzt Schwarz */
  --tief:       #29301f;   /* dunkle Schrift auf hellem Grund */
  /* Grosse dunkle Flaechen sind heller als die Schriftfarbe.
     Wieder aus der Glaskugel gemessen, diesmal aber aus den
     kuehlen Moospixeln statt den gelbstichigen: #4a602e war
     ein Olivton, dieser hier ist Waldgruen. Weiss darauf
     7,62:1 - eine ganze Stufe mehr als vorher. */
  --moos:       #3e5952;   /* grosse dunkle Flaechen */
  --typo-gross: #818b76;   /* die grosse Headline, salbeigruen */
  --text:       #43453b;
  --text-leise: #6d7064;
  --linie:      #dcdcd3;
  /* Direkt aus dem Sesselbild gemessen: die Wandflaeche ist an
     sechs Messpunkten #224ba0. Dadurch sind Knopf und Bild
     dieselbe Farbe, nicht zwei aehnliche.
     Kontrast weisser Text darauf 8.2:1, als Schrift auf dem
     Seitengrund 7.4:1 - beides deutlich ueber der Schwelle. */
  --akzent:     #224ba0;   /* CTA */
  --akzent-tief:#1a3b80;   /* gedrueckt und beim Darueberfahren */
  /* Dieselbe Farbe als Kanaele: nur so laesst sich die
     Akzentfarbe auch in rgba() mit Transparenz verwenden und
     an EINER Stelle wechseln. */
  --akzent-kanaele: 34, 75, 160;
  --signal:     #7f9a46;

  --rand: clamp(1.25rem, 5.5vw, 5.5rem);

  /* Keine zweite Schriftfamilie mehr. Die frueheren Serifen-Akzente
     mischten zwei Schriften INNERHALB einer Zeile und setzten die
     Kursive als Dekoration - beides sind die Gruende, warum es nicht
     zusammenpasste. Jetzt traegt eine Familie alles. */
  --serif:  "Figtree", system-ui, sans-serif;
  --script: "Figtree", system-ui, sans-serif;
}

/* ---------- Glasflaechen: Schliff ----------
   Eine Definition fuer alle vier. Sie steht auf den Elementen
   und nicht in :root, damit die Mauswerte (--schimmer-x/y,
   --silber-x/y, --schimmer-winkel) beim Aufloesen mitkommen.
   Die Staerke kommt weiter aus :root und wird vererbt. */
.karte,
.tafel,
.person-schild,
.kontakt-karte{
  --schliff:
    /* Facettenkante: die helle Linie, wo zwei Flaechen eines
       Kristalls aneinanderstossen. Schmal und hart. */
    linear-gradient(var(--schimmer-winkel, 118deg),
      rgba(255,255,255,0)   47.4%,
      rgba(255,253,248, calc(0.2   * var(--schliff-staerke, 1))) 47.2%,
      rgba(255,253,248, calc(0.2   * var(--schliff-staerke, 1))) 49.0%,
      rgba(206,196,182, calc(0.097 * var(--schliff-staerke, 1))) 49.2%,
      rgba(255,255,255,0)   49.6%),
    /* Zweiter Schliff quer zum ersten - erst zwei Richtungen
       sehen geschnitten aus statt gestreift. */
    linear-gradient(calc(var(--schimmer-winkel, 118deg) + 72deg),
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,0)   51.0%,
      rgba(248,242,232, calc(0.084 * var(--schliff-staerke, 1))) 51.3%,
      rgba(248,242,232, calc(0.084 * var(--schliff-staerke, 1))) 72.0%,
      rgba(255,255,255,0)   72.3%),
    /* Die Facetten: flache Felder, ein Ton, verschiedene
       Helligkeiten. So funktioniert Bergkristall. */
    linear-gradient(var(--schimmer-winkel, 118deg),
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,0)   14.0%,
      rgba(230,214,190, calc(0.11  * var(--schliff-staerke, 1))) 14.3%,
      rgba(230,214,190, calc(0.11  * var(--schliff-staerke, 1))) 36.0%,
      rgba(255,252,245, calc(0.129 * var(--schliff-staerke, 1))) 36.3%,
      rgba(255,252,245, calc(0.129 * var(--schliff-staerke, 1))) 55.0%,
      rgba(199,206,180, calc(0.084 * var(--schliff-staerke, 1))) 55.3%,
      rgba(199,206,180, calc(0.084 * var(--schliff-staerke, 1))) 65.0%,
      rgba(238,226,206, calc(0.097 * var(--schliff-staerke, 1))) 65.3%,
      rgba(238,226,206, calc(0.097 * var(--schliff-staerke, 1))) 86.0%,
      rgba(255,255,255,0)   86.3%);
  --schliff-lagen:
    var(--silber-x, 50%) var(--silber-y, 50%),
    var(--schimmer-x, 50%) var(--schimmer-y, 50%),
    var(--schimmer-x, 50%) var(--schimmer-y, 50%);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:"Figtree", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:clamp(1rem, .9rem + .3vw, 1.125rem);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.skip{ position:absolute; left:-9999px; background:#fff; padding:.75rem 1rem; z-index:99; }
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--akzent); outline-offset:3px; }

/* ---------- obere Leiste ---------------------------------- */

/* Der Ast ragt bewusst ueber den linken Rand hinaus.
   clip statt hidden: es entsteht kein Scrollbereich, und
   vertikal bleibt alles sichtbar. */
/* Der Ast ragt seitlich und nach unten hinaus. clip auf der
   Waagrechten verhindert Seitwaerts-Scrollen, senkrecht bleibt
   er sichtbar. Das z-index hebt ihn ueber den naechsten
   Abschnitt, damit er dort weiterlaufen kann. */
.kopf{
  position:relative;
  z-index:7;
  overflow-x:clip;
}

.leiste{
  /* Bleibt beim Scrollen oben. Ein Sprungmenue, das nur am
     Seitenanfang existiert, hilft niemandem - dort steht man
     ohnehin schon. Die Buehne darunter ist nicht mehr sticky,
     deshalb gibt es keinen Konflikt. */
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:clamp(1rem, 4vw, 3.5rem);
  padding:.6rem var(--rand);
  /* Keine Trennlinie mehr. Die Spur im Menue ist ein
     geschlossenes Bauteil und grenzt sich selbst ab - ein
     Strich darunter zoge eine zweite Kante um dieselbe Sache.
     Abgesetzt bleibt die Leiste durch das Milchglas: was
     darunter durchlaeuft, wird weich. */
  /* Milchglas wie die runden Knoepfe, nicht wie die Flaechen:
     26 px Unschaerfe auf einer 60 px hohen Leiste waere Matsch. */
  background:rgba(245,244,240,.82);
  -webkit-backdrop-filter:var(--knopf-blur);
          backdrop-filter:var(--knopf-blur);
}

/* Sprungziele muessen unter der Leiste landen, nicht darunter
   verschwinden. Die Leiste ist rund 3,5rem hoch. */
section[id], header[id]{ scroll-margin-top:5.5rem; }

.sprung{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:clamp(.9rem, 2vw, 1.8rem);
}
.sprung a{
  font-size:.9rem;
  color:var(--text-leise);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}
.sprung a:hover,
.sprung a:focus-visible{ color:var(--akzent); }

/* Als ".sprung-knopf" geschrieben verliert diese Regel gegen
   ".sprung a" - eine Klasse plus Typ schlaegt eine Klasse
   allein. Die Schrift blieb dadurch grau auf Vollton-Blau:
   1,61:1. Mit dem Elternteil davor gewinnt sie: 8,13:1. */
/* Der Knopf ist das letzte Segment der Spur, nicht ein eigenes
   Bauteil daneben. Gleiche Groesse, gleiche Form wie die
   Nachbarn - nur blau gefuellt. So bleibt es EIN Element:
   vier Ziele und eine Handlung in derselben Spur. */
.sprung a.sprung-knopf{
  gap:.5rem;
  /* rechts nur so viel, dass der Kreis Luft hat */
  padding:0 .2rem 0 1rem;
  border-radius:999px;
  background:var(--akzent);
  color:#fff;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.01em;
}
.sprung a.sprung-knopf .pfeil{
  flex:none;
  width:var(--pfeil-kreis); height:var(--pfeil-kreis);
  padding:.4rem;
  border-radius:50%;
  background:#fff;
  fill:none;
  stroke:var(--akzent);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:translate .2s ease;
}
.sprung a.sprung-knopf:hover .pfeil{ translate:.12rem 0; }
@media (prefers-reduced-motion:reduce){
  .sprung a.sprung-knopf .pfeil{ transition:none; }
  .sprung a.sprung-knopf:hover .pfeil{ translate:none; }
}
.sprung a.sprung-knopf:hover,
.sprung a.sprung-knopf:focus-visible{
  background:var(--akzent-tief);
  color:#fff;
}

/* Schmal: nur Marke und Knopf. Vier Ziele plus Name passen auf
   375 px nicht nebeneinander, und ein Klappmenue fuer drei
   Links waere mehr Bedienung als Nutzen. */
@media (max-width:720px){
  .sprung a:not(.sprung-knopf){ display:none; }
}

.marke{
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--akzent);
  text-decoration:none;
  white-space:nowrap;
}

.trenner{ color:var(--linie); }

/* ---------- Statuspunkt, leuchtet dezent ------------------- */

.punkt{
  width:.55rem; height:.55rem;
  border-radius:50%;
  background:var(--signal);
  flex:none;
  animation:puls 3.2s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes puls{
  0%   { box-shadow:0 0 0 0 rgba(127,154,70,.45); }
  60%  { box-shadow:0 0 0 .5rem rgba(127,154,70,0); }
  100% { box-shadow:0 0 0 0 rgba(127,154,70,0); }
}

/* ---------- Bahn und Buehne --------------------------------
   Frueher wurde die Buehne beim Scrollen festgehalten, damit
   die Schrift Zeit hatte, hinter dem Portraet hervorzusteigen.
   Das ist raus: es kostete zwei Drittel einer Bildschirmhoehe
   zusaetzliches Scrollen fuer einen kleinen Effekt. Geblieben
   ist eine leichte Versetzung der Typo beim Wegscrollen.
   ----------------------------------------------------------- */

.bahn{ height:auto; }

.buehne{
  position:relative;
  min-height:clamp(32rem, 88vh, 54rem);
  /* unten mehr Polster als oben: das schafft das freie Band
     fuer den Ast, ohne dass Text darauf zu liegen kommt */
  padding:clamp(2rem, 6vw, 5rem) var(--rand) clamp(8rem, 24vh, 15rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* Frueher overflow:hidden. Noetig ist davon nur die
     waagrechte Haelfte: sie faengt das Portrait ab, das rechts
     ueber den Satzspiegel laeuft. Senkrecht hat es aber auch
     den Schatten der Verfuegbar-Karte abgeschnitten - und die
     soll ueber die Abschnittsgrenze haengen duerfen. Die Seite
     ist ein Blatt, keine gestapelten Kaesten.
     clip statt hidden, weil clip keinen Scrollbehaelter
     aufmacht und darum overflow-y:visible erlaubt. */
  overflow:hidden;
  isolation:isolate;
  /* KEIN eigener Hintergrund: der Grund kommt vom body. Mit
     einem eigenen wuerde die Buehne den Ast uebermalen, der
     vor ihr gezeichnet wird - genau das ergab die harte
     waagrechte Kante an der Buehnenunterkante. */
}

/* Alle beweglichen Ebenen bekommen eine eigene Compositor-Schicht,
   damit das Scrollen fluessig bleibt. */
[data-tiefe]{
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* ---------- Ast als Band ----------------------------------
   Laeuft ueber die volle Breite am Fuss des Kopfs - und
   bewusst darueber hinaus in den naechsten Abschnitt. Oben und
   unten weich ausgeblendet: so endet er nirgends mit einer
   Kante, und die Abschnittsgrenze verschwindet.
   ----------------------------------------------------------- */

.ast{
  position:absolute;
  z-index:0;
  left:0; right:0;
  /* Das Band muss auf BEIDEN Seiten der Abschnittsgrenze
     deutlich sichtbar sein, sonst liegt es nur auf der Kante
     statt darueber. Darum hoch genug und weit genug nach
     unten versetzt. */
  bottom:clamp(-14rem, -12vw, -6rem);
  height:clamp(15rem, 44vh, 28rem);
  overflow:hidden;
  pointer-events:none;

  /* an beiden Enden auslaufen lassen, nie abschneiden */
  /* voll deckend genau ueber der Grenze, zu beiden Enden
     hin auslaufend - es endet nirgends mit einer Kante */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 38%, #000 62%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 38%, #000 62%, transparent);
}

.ast img{
  position:absolute;
  /* ACHTUNG BILDGROESSE: das Band wird mit 118% der
     Fensterbreite angezeigt. Bei doppelter Pixeldichte und
     1440px Fenster sind das 3400 echte Pixel. Die aktuelle
     Datei hat 1000 - deshalb ist sie weich. Beim naechsten
     Export: mindestens 2400px, besser 3400px breit. */
  left:-9%;
  top:50%;
  translate:0 -50%;
  width:118%;
  max-width:none;
  height:auto;
  opacity:.66;
  animation:ast-treiben 24s ease-in-out infinite;
}

@keyframes ast-treiben{
  0%,100%{ translate:0 -50%; }
  50%    { translate:-1.2% -52%; }
}


/* Zweite Fassung: Band oben ueber dem Kopf statt unten.
   Umschalten mit class="kopf ast-oben" am <header>. */
.ast-oben .ast{
  top:0; bottom:auto;
  height:clamp(7rem, 22vh, 14rem);
  -webkit-mask-image:linear-gradient(to bottom, #000 42%, rgba(0,0,0,.4) 74%, transparent);
          mask-image:linear-gradient(to bottom, #000 42%, rgba(0,0,0,.4) 74%, transparent);
}
.ast-oben .vertrauen{ background:var(--grund); }
.ast-oben .buehne{
  padding-top:clamp(5rem, 16vh, 10rem);
  padding-bottom:clamp(2rem, 6vw, 5rem);
}


/* ---------- Ebene 1: Typo ---------------------------------- */

.titel{
  position:relative;
  z-index:1;
  margin:0 0 clamp(1.5rem, 3.5vw, 3rem);
  /* Stärke 500 statt 800: Versalien in 800 waren das Lauteste, was
     Typografie kann - genau das wirkte zu schwer. Der Kontrast kommt
     jetzt aus der Groesse. Grad so gewaehlt, dass "Kunden" lesbar
     bleibt und nur der Schlusspunkt hinter dem Portraet liegt. */
  font-weight:500;
  /* Kleiner als zuvor, weil die Zeile jetzt laenger ist: bei
     7,8vw war "Ohne grosses Marketing-Team." 1460px breit, frei
     sind bis zum Portraet aber nur 949px - der Rest lief dahinter
     und wurde abgeschnitten. Drei Zeilen statt zwei, dazu dieses
     Mass: die laengste Zeile passt, die Groesse bleibt. */
  font-size:clamp(2.1rem, 6.2vw, 7.5rem);
  line-height:.95;
  letter-spacing:-.035em;
  color:var(--typo-gross);
  white-space:nowrap;
}
.titel span{ display:block; }

/* ---------- Ebene 2: Portraet ------------------------------ */

.portraet{
  position:absolute;
  z-index:2;
  /* Auf breiten Schirmen beginnt das Portraet am goldenen
     Schnitt (61,8 %), statt am rechten Rand zu kleben.
     Gemessen bei 1900px lag seine linke Kante vorher bei
     78,6 %, seine Mitte bei 89,8 %. Die Ankerung ueber "left"
     statt "right" rechnet sich bei jeder Breite von allein -
     unabhaengig davon, wie breit das Bild gerade ist. */
  left:61.8%;
  right:auto;
  bottom:0;
  height:min(96%, 46rem);
  width:auto;
  max-width:none;
  object-fit:contain;
  object-position:bottom right;
  pointer-events:none;

  /* Die PNG-Datei endet unten mit einer geraden Kante quer
     durch das Kleid. Ein kurzer Verlauf loest sie auf, damit
     der Abschnitt nicht abgeschnitten wirkt.
     Der Verlauf begann bei 86% und lief bis ganz unten durch -
     ueber 14% der Hoehe, das sah nach halb durchsichtig aus.
     Jetzt setzt er erst bei 94% an und endet bei 99,5%: eine
     schmale Kante statt einer langen Blende. */
  -webkit-mask-image:linear-gradient(to bottom,
    #000 94%, rgba(0,0,0,.55) 97.5%, transparent 99.5%);
          mask-image:linear-gradient(to bottom,
    #000 94%, rgba(0,0,0,.55) 97.5%, transparent 99.5%);
}

/* ---------- Ebene 3: Claim und CTA ------------------------- */

.einstieg{
  position:relative;
  z-index:3;
  max-width:33rem;
}

.claim{
  margin:0 0 clamp(1.4rem, 2.5vw, 1.9rem);
  text-wrap:balance;
  /* bewusst klein: die Headline traegt, der Claim stuetzt nur */
  font-size:clamp(.98rem, .94rem + .22vw, 1.12rem);
  line-height:1.55;
  color:var(--text-leise);
}

/* Schlicht, mit Absicht. Hier lag kurz derselbe Schimmer wie
   auf dem Glas - er ist wieder raus. Ein Knopf ist kein Glas,
   und die Regel der Seite lautet: Holo liegt auf Glas, sonst
   nirgends. Dazu kam, dass das Blau die einzige Farbe ist, die
   "hier klicken" bedeutet; alles, was sie verduennt, kostet
   Anfragen. */
.btn{
  display:inline-block;
  /* Schlanker als vorher: .95em/1.9em bei Gewicht 800 ergab
     einen 52 px hohen Vollton-Klotz. Das liest sich laut, nicht
     teuer. Jetzt 44 px hoch, Gewicht 600, eine Spur Laufweite -
     dieselbe Aufforderung, nur ohne Stimme erheben.
     Der Kontrast bleibt gleich: Weiss auf Akzentblau, 8,13:1. */
  padding:.8em 1.7em;
  border-radius:999px;
  background:var(--akzent);
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .18s ease, background-color .18s ease;
}
.btn:hover{ background:var(--akzent-tief); }

/* Leiser zweiter Weg. Kein zweiter Vollton-Knopf: zwei gleich
   laute Aufforderungen heben sich gegenseitig auf. */
.btn-leise{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  /* 1 px Rand oben und unten dazu - ohne Abzug stuende der
     leise Knopf 2 px hoeher als der volle. Nebeneinander
     sieht man das sofort. */
  padding:calc(.8em - 1px) calc(1.45em - 1px);
  border-radius:999px;
  /* --linie waere auf dem Seitengrund nur 1,25:1 - die
     Knopfform waere praktisch unsichtbar. Dieser Ton misst
     3,04:1 und damit genau die Schwelle fuer Bedienelemente.
     Weniger geht hier nicht, ohne die Form zu verlieren. */
  border:1px solid color-mix(in srgb, var(--tinte) 55%, transparent);
  background:transparent;
  font:inherit;
  font-size:.95rem;
  font-weight:500;
  color:var(--tinte);
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
.btn-leise:hover{
  border-color:var(--tinte);
  background:rgba(45,51,40,.04);
}
.btn-leise svg{
  width:1.05em; height:1.05em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
  transition:translate .2s ease;
}
.btn-leise:hover svg{ translate:.2rem 0; }

.einstieg-wege{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.8rem;
}

/* Der Akzent in der H1. Gleiche Behandlung wie .schwungvoll
   in den Abschnittstiteln, damit es als ein System liest. */
.titel em{
  font-style:italic;
  color:var(--akzent);
}
.btn:active{ transform:translateY(1px); }

/* Drei kurze Versprechen direkt unter dem Knopf: sie nehmen
   dem Klick das Risiko, ohne vom Knopf abzulenken. */
.usp{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1.6rem;
  /* Die Aufzaehlung steht jetzt zwischen Claim und Knoepfen.
     Darum unten Luft statt oben: sie gehoert zum Text, nicht
     zu den Knoepfen. */
  margin:1.5rem 0 1.9rem;
  padding:0;
  list-style:none;
  /* Vorher .82rem - das war fuer drei tragende Aussagen zu
     klein, sie lasen sich wie Kleingedrucktes. */
  font-size:.975rem;
  color:var(--text);
}
.usp li{
  position:relative;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding-left:0;
}

/* Runder Kreis mit Haken statt des funkelnden Sterns. Drei
   blinkende Sterne nebeneinander zogen den Blick staendig vom
   Knopf weg - ein Haken sagt dasselbe und steht still. Der
   Haken ist eine Maske, damit Form und Farbe frei bleiben. */
.usp li::before{
  content:"";
  flex:none;
  width:1.35rem; height:1.35rem;
  border-radius:50%;
  background:color-mix(in srgb, var(--akzent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--akzent) 26%, transparent);
}
.usp li::after{
  content:"";
  position:absolute;
  left:.34rem; top:50%;
  translate:0 -50%;
  width:.67rem; height:.67rem;
  background:var(--akzent);

  --haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8 9.3 17.6 19.5 7.2' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask:var(--haken) center/contain no-repeat;
          mask:var(--haken) center/contain no-repeat;
}
.usp li:nth-child(2)::before{ animation-delay:-1.4s; }
.usp li:nth-child(3)::before{ animation-delay:-2.8s; }

@keyframes funkeln{
  0%, 100%{ opacity:.45; scale:.78; }
  50%     { opacity:1;   scale:1.12; }
}


/* ---------- Ebene 4: Glaskarte -----------------------------
   Liegt zur Haelfte auf dem Portraet, zur Haelfte auf dem
   Grund. Nur so hat das Glas ueberhaupt etwas zu brechen.
   ----------------------------------------------------------- */

.karte{
  position:absolute;
  z-index:4;
  /* Die Karte haengt am Portraet, nicht am Seitenrand. Seit das
     Portraet auf dem goldenen Schnitt sitzt, stand sie sonst
     212px rechts daneben in der Leere, statt darauf zu liegen.
     38,2% ist die Gegenseite des goldenen Schnitts - dadurch
     endet die Karte dort, wo auch das Portraet endet. */
  /* Korrektur: 38,2 % war die Gegenseite des goldenen
     Schnitts und stimmte, solange das Portraet weiter links
     stand. Danach lag die Karte nur noch zu 29 % auf dem Bild
     und zu 71 % im leeren Band zwischen Textspalte und
     Portrait - sie hatte nichts, worauf sie aufliegt, und
     stiess oben auf 2 px an die Knopfzeile. Jetzt haengt sie
     am selben rechten Rand wie die Navigation darueber und
     sitzt tief in der Ecke, auf dem Moos. Erst dadurch hat das
     Glas ueberhaupt etwas zu brechen.
     3,5rem ist die Untergrenze: tiefer wird die Karte auf
     einem 900 px hohen Fenster unten angeschnitten. */
  right:var(--rand);
  /* --karte-unten wird gemessen (siehe Skript in index.html):
     so tief wie moeglich, ohne unter die Falz zu rutschen.
     Der Festwert hier ist der Rueckfall ohne JS. */
  bottom:var(--karte-unten, 3.5rem);
  width:min(21rem, 70vw);
  padding:1.4rem 1.5rem 1.5rem;
  border-radius:var(--glas-rund);

  /* Dasselbe Glas wie die Leistungs-Tafeln, Werte 1:1 aus
     .tafel. Die Karte hatte vorher einen eigenen, aermeren
     Aufbau: zwei statt drei Stufen im Verlauf, rein weiss
     statt am Ende leicht gruen, nur die obere Lichtkante und
     keine untere. Einzeln faellt das nicht auf, auf einem
     Blatt mit den Tafeln schon - es ist dasselbe Material,
     also dieselbe Rezeptur. */
  background:
    var(--schliff),
    linear-gradient(152deg,
      rgba(255,255,255,.86) 0%,
      rgba(253,253,250,.70) 46%,
      rgba(248,250,243,.56) 100%);
  background-size:var(--schliff-groessen), auto;
  background-position:var(--schliff-lagen), 0 0;
  -webkit-backdrop-filter:var(--glas-blur);
          backdrop-filter:var(--glas-blur);
  box-shadow:
    0 2.5rem 5rem -1.75rem rgba(45,51,40,.34),
    0 .5rem 1.25rem -.75rem rgba(45,51,40,.12),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35);
  /* Neigt sich zur Maus wie die Leistungs-Tafel und die
     Kontakt-Karte. Das Skript legt --rx/--ry auf alle vier
     Glasflaechen, aber ohne transform-Regel blieb das hier
     wirkungslos: die Karte bekam den wandernden Schimmer und
     sonst nichts. Begruendet war das damit, dass eine Karte am
     Seitenrand sich nicht auch noch kippen soll - seit sie auf
     dem Portrait liegt, gilt das nicht mehr.
     Neigung und Perspektive in EINER transform-Eigenschaft,
     zwei Regeln wuerden sich gegenseitig loeschen. */
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .45s ease,
             background-position .5s ease;

  /* Kein Schweben mehr. Die Unruhe kam nicht in erster Linie
     von der Bewegung, sondern davon, dass die Karte nirgends
     auflag - aber beides zusammen war zu viel. Die Keyframes
     bleiben stehen, falls das Schweben zurueck soll. */
}

/* Solange die Maus darauf liegt, folgt die Neigung sofort
   statt nachzuziehen - identisch zu .tafeln.greift. */
.karte.greift{
  transition:transform .12s linear, box-shadow .45s ease,
             background-position .1s linear;
}

@supports (overflow:clip){
  .buehne{ overflow-x:clip; overflow-y:visible; }
}

/* leichtes Schweben, damit die Karte nicht klebt */
@keyframes schweben{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -.55rem; }
}

.karte .punkt{ width:.45rem; height:.45rem; }

.karte-status{
  margin:0 0 .55rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-leise);
}

.karte-titel{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:1.2rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--tinte);
}

.karte-zusatz{
  margin:0;
  font-size:.78rem;
  line-height:1.4;
  color:var(--text-leise);
}

.karte-linie{
  height:0;
  margin:.85rem 0;
  border:0;
  border-top:1px solid rgba(70,62,54,.16);
}

/* ============================================================
   SECTION 02 — VERTRAUEN (Bento)
   ============================================================ */

.vertrauen{
  position:relative;
  z-index:6;
  /* oben mehr Luft als sonst: der Ast laeuft hier herein und
     darf keinen Text kreuzen */
  padding:clamp(6rem, 14vw, 12rem) var(--rand) clamp(5rem, 10vw, 9rem);
  /* kein eigener Hintergrund: der Grund kommt vom body, und der
     Ast aus dem Kopf darf hier hineinlaufen */
}

/* ---------- Abschnittskopf -------------------------------- */

.abschnitt-kopf{
  text-align:center;
  margin:0 auto clamp(2.5rem, 5vw, 4rem);
  max-width:60rem;
}

/* Kleine, weit gesperrte Versalien als Beschriftung - der
   editoriale Ton aus den Referenzen. Bewusst nicht winzig:
   .78rem bleibt lesbar, darunter wird es Dekoration. */
.kennzeichen{
  margin:0 0 1.35rem;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--text-leise);
}
.kennzeichen span{ color:var(--akzent); margin-right:.2rem; }

.abschnitt-titel{
  margin:0;
  font-weight:500;
  font-size:clamp(2.1rem, 5.5vw, 4.25rem);
  line-height:1.05;
  letter-spacing:-.025em;
  color:var(--tinte);

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 .32em;
}

/* Jedes Wort sitzt in einer Blende und faehrt von unten herein */
.wort{
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
}
.wort > span{
  display:block;
  transform:translateY(110%);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.sichtbar .wort > span{ transform:translateY(0); }

.wort:nth-child(1) > span{ transition-delay:.05s; }
.wort:nth-child(2) > span{ transition-delay:.13s; }
.wort:nth-child(3) > span{ transition-delay:.21s; }
.wort:nth-child(4) > span{ transition-delay:.29s; }
.wort:nth-child(5) > span{ transition-delay:.37s; }
.wort:nth-child(6) > span{ transition-delay:.45s; }

/* Akzentwort: Farbe plus Kursive - aber beides aus DERSELBEN Familie.
   Der frühere Fehler war die fremde Serife mitten in der Zeile, nicht
   die Kursive an sich. Ein Schnitt derselben Schrift bleibt ruhig. */
.schwungvoll > span{
  color:var(--akzent);
  font-style:italic;
}

/* ---------- Raster ----------------------------------------- */

.bento{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:minmax(0, auto);
  gap:.75rem;
}

.kachel{
  --px:1.9rem;              /* seitliches Polster, auch fuer Ausbrecher */
  position:relative;
  overflow:hidden;
  border-radius:var(--glas-rund);
  padding:1.75rem var(--px);
  background:#fff;
  border:0;
  box-shadow:var(--tiefe-1);

  /* Eintritt */
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1);
}
.sichtbar .kachel{ opacity:1; transform:none; }

.kachel:nth-child(1){ transition-delay:.00s; }
.kachel:nth-child(2){ transition-delay:.09s; }
.kachel:nth-child(3){ transition-delay:.18s; }
.kachel:nth-child(4){ transition-delay:.27s; }
.kachel:nth-child(5){ transition-delay:.36s; }
.kachel:nth-child(6){ transition-delay:.45s; }

.kachel-projekte { grid-column:span 4; grid-row:1; min-height:21rem; }
.kachel-kreis    { grid-column:span 4; grid-row:1; }
.kachel-dunkel   { grid-column:span 4; grid-row:1 / span 2; }
/* Werkzeuge laenglich: sie fuellen die Breite, die vorher die
   Bluete-Kachel hatte. Damit stehen die Systeme in einer Reihe
   statt in einer schmalen Spalte zu stapeln. */
.kachel-werkzeug { grid-column:span 6; grid-row:2; min-height:15rem; }
.kachel-jahre    { grid-column:span 2; grid-row:2; }

.kachel-titel{
  margin:0 0 .6rem;
  font-weight:500;
  font-size:1.5rem;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--tinte);
}
.kachel-titel.klein{ font-size:1.25rem; }
.kachel-titel.gross{ font-size:1.65rem; margin-bottom:1.5rem; }

.kachel-text{
  margin:0;
  font-size:.95rem;
  line-height:1.5;
  color:var(--text-leise);
  max-width:28rem;
  /* nur als Notfall: bricht ein Wort erst, wenn es sonst aus der
     Kachel laufen wuerde. Kein hyphens:auto - das trennt auch
     dort, wo es nicht noetig ist, und wirkt unruhig. */
  overflow-wrap:break-word;
}

.zahl{
  color:var(--akzent);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.zahl.gross{
  display:block;
  margin:0 0 .35rem;
  font-size:clamp(3rem, 5vw, 4.25rem);
  line-height:1;
  letter-spacing:-.04em;
}

/* ---------- Kachel: laufende Projektliste -----------------
   Die Liste laeuft langsam nach oben und blendet oben und
   unten aus. script.js verdoppelt den Inhalt und setzt dann
   .bereit - erst dann laeuft sie. Ohne JavaScript steht die
   Liste still, statt mit einer Luecke zu springen.
   ----------------------------------------------------------- */

.laufband{
  position:absolute;
  left:0; right:0; bottom:0;
  height:10.5rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 74%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 74%, transparent);
}

.laufliste{
  margin:0;
  padding:0 1.9rem;
  list-style:none;
}
.laufband.bereit .laufspur{
  animation:laufen 26s linear infinite;
}

/* beim Darueberfahren anhalten, damit man in Ruhe lesen kann */
.kachel-projekte:hover .laufspur{ animation-play-state:paused; }

.laufliste li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.62rem 0;
  border-bottom:1px solid rgba(60,54,46,.09);
  font-size:.9rem;
}
.laufliste span{ color:var(--tinte); font-weight:500; }
.laufliste em{
  font-style:normal;
  color:var(--text-leise);
  font-size:.82rem;
  text-align:right;
}

/* Inhalt ist verdoppelt, darum genau die halbe Hoehe */
@keyframes laufen{
  from{ translate:0 0; }
  to  { translate:0 -50%; }
}

/* ---------- Kachel: Ringe und Koepfe ----------------------- */

.kachel-kreis{ display:flex; flex-direction:column; }

.kachel-oben{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.sterne{ margin:0; font-size:.9rem; color:var(--text-leise); }
.sterne span{ display:block; color:#d8b23f; letter-spacing:.1em; font-size:1rem; }
.sterne strong{ color:var(--tinte); }

.note{ margin:0; font-size:1.5rem; font-weight:500; color:var(--tinte); white-space:nowrap; }
.note span{ font-size:.85rem; color:var(--text-leise); }

.ringfeld{
  position:relative;
  flex:1;
  min-height:12.5rem;
  margin-top:1rem;
}

.ring{
  position:absolute;
  left:50%; bottom:-6rem;
  translate:-50% 0;
  border-radius:50%;
  border:1px solid rgba(60,54,46,.12);
}
.ring-a{ width:13rem;  height:13rem; }
.ring-b{ width:19rem;  height:19rem; border-color:rgba(60,54,46,.08); }
.ring-c{ width:25rem;  height:25rem; border-color:rgba(60,54,46,.05); }

.kopfbild{
  position:absolute;
  width:3rem; height:3rem;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.04em;
  color:#fff;
  box-shadow:0 .6rem 1.4rem -.5rem rgba(40,35,30,.45);
  animation:gleiten 7s ease-in-out infinite;
}
/* Mit Foto fuellt das Bild den Kreis, die Initialen darunter
   sind dann nicht mehr sichtbar. */
.kopfbild img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Die vier Kreise trugen frueher vier kraeftige Farben. Das
   las sich wie eine Farbpalette, nicht wie Menschen. Wo ein
   Foto da ist, traegt das Foto; wo noch keins ist, steht ein
   ruhiger Grauton mit Initialen, der nicht um Aufmerksamkeit
   bittet. */
.k1{ left:6%;  top:34%; background:#8d9184; animation-delay:0s;    }
.k2{ left:34%; top:8%;  background:#8d9184; animation-delay:-1.7s; }
.k3{ right:8%; top:26%; background:#8d9184; animation-delay:-3.4s; }
.k4{ left:8%;  bottom:4%;  background:#8d9184; animation-delay:-5.1s; }

@keyframes gleiten{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -.7rem; }
}



/* ---------- Kachel: dunkel --------------------------------- */

.kachel-dunkel{
  /* Der Felsen darf ueber die Kante hinausragen - nur so liegt
     er auf der Kachel, statt darin eingesperrt zu sein. Diese
     Kachel hat sonst nichts, was beschnitten werden muesste. */
  overflow:visible;
  z-index:2;
  display:flex;
  flex-direction:column;
  background:var(--moos);
  border-color:rgba(255,255,255,.07);
  color:#e8ebe1;
  padding:2.1rem 2.1rem 1.9rem;
}
.kachel-dunkel .kachel-titel{ color:#fff; max-width:18ch; }

/* Glaskugel statt Dekokreise. Sie sitzt unten rechts und laeuft
   ueber die Kachelkante hinaus, damit sie als Objekt wirkt und
   nicht als Bildchen. Gedaempft, weil die Haken lesbar bleiben. */
.fels{
  position:absolute;
  /* Haengt ueber die untere rechte Ecke hinaus. Volle Deckkraft,
     weil er zur Haelfte auf dem Seitengrund liegt - dort wuerde
     Transparenz wie ein Fehler aussehen.
     Die Werte sind gerechnet, nicht geschaetzt: die letzte
     Hakenzeile endet bei 385px, der Felsen beginnt jetzt bei
     400px. Vorher sass sein oberer Rand bei 257px, also
     mitten in zwei Zeilen. */
  right:-.5rem; bottom:-7.5rem;
  width:clamp(10rem, 15vw, 13rem);
  height:auto;
  filter:drop-shadow(0 1.6rem 1.6rem rgba(24,34,28,.38));
  pointer-events:none;
  animation:kugel-treiben 32s ease-in-out infinite;
}
@keyframes kugel-treiben{
  0%  { translate:0 0;       scale:1; }
  28% { translate:-5% -6%;   scale:1.04; }
  52% { translate:-2% -10%;  scale:1.01; }
  76% { translate:3% -4%;    scale:1.05; }
  100%{ translate:0 0;       scale:1; }
}
@keyframes kreisen{
  from{ rotate:0deg; } to{ rotate:360deg; }
}

.haken{
  margin:0 0 auto;
  padding:0;
  list-style:none;
  display:grid;
  gap:1.05rem;
  position:relative;
}
.haken li{
  position:relative;
  padding-left:1.6rem;
  font-size:.98rem;
  line-height:1.4;
  /* Richtig weiss. Gebrochenes Weiss sah auf dem Gruen aus,
     als waere die Schrift leicht verwaschen. */
  color:#fff;
}
.haken li::before{
  content:"✦";
  position:absolute;
  left:0; top:0;
  color:#cfdfa8;
}

.btn-hell{
  position:relative;
  align-self:flex-start;
  margin-top:2rem;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.85em 1.1em .85em 1.5em;
  background:#fff;
  color:var(--tief);
}
.btn-hell:hover{ background:#e8ebe1; }
.btn-hell svg{
  width:1.4rem; height:1.4rem;
  fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
  transition:translate .2s ease;
}
.btn-hell:hover svg{ translate:.2rem 0; }

.dunkel-fuss{
  position:relative;
  margin:1.6rem 0 0;
  font-size:.85rem;
  /* heller: auf dem dunklen Grund war #848b7c zu nah am Hintergrund,
     Kontrast lag unter dem Lesbaren */
  color:#d6dccb;
}

/* ---------- Kachel: Werkzeuge ------------------------------ */

/* Alle sieben in einer Reihe. Die frueheren drei Spalten und die
   Breitenbegrenzung stammten aus der schmalen Kachel - seit sie
   ueber sechs Rasterspalten laeuft, bremsen beide nur noch. */
.marken{
  margin:1.4rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:1.1rem .5rem;
  font-size:.72rem;
  color:var(--text-leise);
}

/* Schmal reicht die Breite fuer sieben nicht - dann vier und drei. */
@media (max-width:900px){
  .marken{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
.marken li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  text-align:center;
}
.marke-feld{
  width:2.9rem; height:2.9rem;
  border-radius:.85rem;
  display:grid;
  place-items:center;
  background:#f1efec;
  border:1px solid rgba(60,54,46,.07);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), background-color .25s ease;
}
.marken li:hover .marke-feld{ transform:translateY(-.3rem); background:#e7e4df; }
.marke-feld svg{
  width:1.45rem; height:1.45rem;
  fill:none; stroke:#474a3f; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}


/* ---------- Kachel: Jahre ---------------------------------- */

.kachel-jahre{ display:flex; flex-direction:column; justify-content:center; }

/* ---------- Raster schmaler ------------------------------- */

@media (max-width:1100px){
  .kachel-projekte { grid-column:span 6; grid-row:1; }
  .kachel-kreis    { grid-column:span 6; grid-row:1; }
  .kachel-dunkel   { grid-column:span 12; grid-row:2; }
  .kachel-werkzeug { grid-column:span 8; grid-row:3; }
  .kachel-jahre    { grid-column:span 4; grid-row:3; }
  .dunkel-ring{ right:-12rem; }
}

/* ---------- schmal ----------------------------------------
   Kein Sticky, kein Parallax. Auf dem Telefon kostet das
   nur Scrollweg und bringt nichts.
   ----------------------------------------------------------- */

@media (max-width:860px){

  /* Die Leiste bleibt auch schmal eine Zeile: Wortmarke links,
     Knopf rechts. Als Spalte (so war es, als hier "Online"
     stand) haengt der Knopf unter dem Namen und die Leiste
     wird 100 px hoch - auf einem Telefon ein Achtel des
     Bildschirms, bevor irgendetwas zu sehen ist. */
  .leiste{ gap:.75rem; padding:.5rem var(--rand); }

  .bahn{ height:auto; }

  .buehne{
    position:static;
    height:auto;
    overflow:visible;
    padding-top:2.5rem;
    padding-bottom:0;
  }

  /* Reihenfolge: Typo, Text, CTA, Bild, Karte darueber */
  .titel   { order:1; }
  .einstieg{ order:2; max-width:none; }
  .portraet{ order:3; }
  .karte   { order:4; }

  .titel{
    /* Auf die laengere Headline abgestimmt: beide Zeilen muessen
       einzeilig bleiben, sonst werden aus zwei Zeilen vier. */
    font-size:clamp(1.85rem, 9vw, 5.5rem);
    white-space:normal;
    margin-bottom:1.5rem;
  }

  /* schmal hat der Ast keinen freien Platz mehr neben dem Text */
  .ast{
    /* Schmal darf das Band kraeftiger sein - es ist hier die einzige
       Naturflaeche im Kopf, neben dem Text hat es keinen Platz mehr. */
    height:clamp(9rem, 26vh, 15rem);
    /* Schmal liegt der Ast nicht mehr am Fuss des Abschnitts, sondern
       auf Schulterhoehe des Portraets - dort hat er freie Flaeche
       neben dem Koerper und wirkt als Band hinter der Figur.
       Prozent statt Pixel, damit es mit der Abschnittshoehe mitgeht.
       Der Wert ist auf die groessere Bandhoehe abgestimmt: das Band
       waechst nach oben, also muss der Haltepunkt tiefer liegen. */
    bottom:10%;
  }
  .ast img{ left:-14%; width:128%; opacity:.5; }

  .portraet{
    position:relative;
    right:auto; bottom:auto;
    height:auto;
    width:min(100%, 19rem);
    /* Hoeher und nach rechts geschoben: oben ruecke ich es an den
       Text heran, rechts laeuft es knapp ueber den Satzspiegel
       hinaus. Das Hinauslaufen faengt .kopf mit overflow-x:clip ab,
       es entsteht also kein Seitwaerts-Scrollen. */
    /* Hochgezogen, damit das Gesicht neben den Knoepfen steht und
       nicht erst darunter. Der Text liegt davor (z-index), die
       Knoepfe bleiben also antippbar. */
    margin:-4.75rem -6rem 0 auto;
    z-index:0;
  }
  .einstieg{ position:relative; z-index:2; }

  /* Die Karte lag mit 15rem Breite als schmaler Zettel unter
     dem Portrait - genau auf der Hoehe, wo der Ast beginnt,
     und als einziges Element der Seite nicht in der Spalte.
     Jetzt volle Spaltenbreite wie jede andere Karte, und so
     weit herauf, dass sie auf Hals und Schulter liegt: das
     Gesicht bleibt frei, die Karte hat etwas, worauf sie
     aufliegt. */
  .karte{
    position:relative;
    z-index:3;
    right:auto; bottom:auto;
    width:100%;
    margin:-13rem auto 0;
  }

  /* Transform-Reste aus dem Parallax neutralisieren */
  [data-tiefe]{ transform:none !important; will-change:auto; }

  /* Bento: alles untereinander */
  .bento{ gap:.65rem; }
  .kachel{ --px:1.4rem; padding:1.5rem var(--px); }
  .kachel-projekte,
  .kachel-kreis,
  .kachel-dunkel,
  .kachel-werkzeug,
  .kachel-jahre{ grid-column:1 / -1; grid-row:auto; }

  /* Das Laufband hing absolut am unteren Rand, waehrend die
     Karte eine feste Hoehe hatte. Der Text darueber brach
     schmal auf drei Zeilen und lief hinein - gemessen sieben
     Ueberlappungen. Mit statischer Lage waechst die Karte mit
     dem Text, egal wie schmal das Geraet ist. Die negativen
     Raender holen die Randlosigkeit zurueck, die vorher
     left:0/right:0 gemacht hat. */
  .kachel-projekte{ min-height:0; }
  .kachel-projekte .laufband{
    position:static;
    margin:1.1rem calc(var(--px) * -1) 0;
  }
  .ringfeld{ min-height:11rem; }
  .ring-c{ display:none; }
  /* auf schmalen Kacheln kaeme der vierte Kopf dem Schriftzug zu nah */
  .k4{ left:6%; bottom:16%; }
  .abschnitt-titel{ gap:0 .28em; }
}

/* ---------- weniger Bewegung ------------------------------- */

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation:none !important; }
  .ast{ animation:none; }
  .buehne{ min-height:85vh; }
  [data-tiefe]{ transform:none !important; }

  /* Eintritt nicht abwarten, sondern direkt zeigen */
  .kachel{ opacity:1 !important; transform:none !important; }
  .wort > span{ transform:none !important; }
  .laufband{ -webkit-mask-image:none; mask-image:none; }
}

/* ============================================================
   SECTION 03 — ABLAUF
   ============================================================ */

.ablauf{
  position:relative;
  z-index:6;
  padding:clamp(4rem, 8vw, 7rem) var(--rand) clamp(5rem, 10vw, 9rem);
  background:var(--grund);
}

.kennzeichen.mittig{ text-align:center; margin-bottom:clamp(2rem, 4vw, 3.5rem); }

/* nur fuer Vorlesesoftware, optisch nicht vorhanden */
.nur-vorlesen{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Drei Spalten: Wort, Karten, Wort.
   Die beiden Wortspalten bleiben stehen, die Karten laufen durch. */
.ablauf-raster{
  display:grid;
  grid-template-columns:1fr min(27rem, 44vw) 1fr;
  gap:clamp(1.5rem, 4vw, 4rem);
  align-items:start;
}

.ablauf-wort{
  position:sticky;
  top:50%;
  translate:0 -50%;
  margin:0;
  font-weight:500;
  font-size:clamp(1.9rem, 4.2vw, 4rem);
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--tinte);
}
.ablauf-wort.links { text-align:right; }
.ablauf-wort.rechts{ text-align:left;  }

.ablauf-wort span{
  display:block;
  /* ruhend zurueckgenommen, der aktive Schritt holt die Zeile vor */
  color:#b7bcae;
  transition:color .5s ease, translate .5s cubic-bezier(.22,.61,.36,1);
}
.ablauf-wort.links  span{ translate:-.4rem 0; }
.ablauf-wort.rechts span{ translate:.4rem 0;  }

.ablauf-wort span.an{ color:var(--tinte); translate:0 0; }
.ablauf-wort.rechts span.an{ color:var(--akzent); }

/* ---------- die Karten ------------------------------------ */

.schritte{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:clamp(2.5rem, 5vw, 5rem);
}

.schritt{
  position:relative;
  padding:1.9rem 1.9rem 2.1rem;
  border-radius:1.25rem;
  background:#fff;
  border:0;
  box-shadow:0 1.5rem 3rem -1.5rem rgba(40,35,30,.16);

  opacity:0;
  translate:0 28px;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             translate .7s cubic-bezier(.22,.61,.36,1);
}
.schritt.gesehen{ opacity:1; translate:0 0; }

.schritt-kopf{
  margin:0 0 1.5rem;
  display:flex;
  align-items:baseline;
  gap:.7rem;
  font-size:1.35rem;
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--tinte);
}
.schritt-nr{
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--akzent);
}

.schritt-text{
  margin:1.6rem 0 0;
  font-size:.97rem;
  line-height:1.55;
  color:var(--text-leise);
  overflow-wrap:break-word;
}

.bild{
  position:relative;
  border-radius:.9rem;
  background:#f7f5f3;
  border:0;
  box-shadow:var(--tiefe-1);
  padding:1.3rem;
}

/* ---------- 01 Trichter -----------------------------------
   Die Balken fahren von links auf ihre Breite. Der letzte ist
   der Punkt, um den es geht.
   ----------------------------------------------------------- */

.trichter{ display:grid; gap:.65rem; }

/* feste Spur fuer den Balken, sonst wird der 100%-Balken vom
   Beschriftungstext zusammengedrueckt und die Anteile stimmen nicht */
.stufe{
  display:grid;
  grid-template-columns:1fr 5.4rem;
  align-items:center;
  gap:.7rem;
}
.stufe i{
  display:block;
  height:1.05rem;
  border-radius:.25rem;
  background:rgba(var(--akzent-kanaele), .18);
  width:var(--breit);
  scale:0 1;
  transform-origin:left center;
  transition:scale .8s cubic-bezier(.22,.61,.36,1);
}
.stufe em{
  font-style:normal;
  font-size:.72rem;
  color:var(--text-leise);
  white-space:nowrap;
}
.stufe.verlust i{ background:var(--akzent); }
.stufe.verlust em{ color:var(--akzent); font-weight:800; }

.schritt.gesehen .stufe:nth-child(1) i{ scale:1 1; transition-delay:.10s; }
.schritt.gesehen .stufe:nth-child(2) i{ scale:1 1; transition-delay:.22s; }
.schritt.gesehen .stufe:nth-child(3) i{ scale:1 1; transition-delay:.34s; }
.schritt.gesehen .stufe:nth-child(4) i{ scale:1 1; transition-delay:.46s; }

/* ---------- 02 Umbau --------------------------------------
   Der Laptop ist freigestellt und sein Bildschirm ist eine
   transparente Flaeche im PNG. Darunter liegt .schirm mit den
   vier Teilen - dadurch laeuft die Umsortierung sichtbar im
   Geraet ab, nicht daneben.
   ----------------------------------------------------------- */

.umbau{
  position:relative;
  display:grid;
  place-items:center;
  /* kein Kasten: das Objekt soll frei auf der Karte liegen */
  padding:0;
  background:none;
  border:0;
}

/* Huelle exakt in Bildgroesse: nur so stimmen die Prozentwerte
   des Bildschirms. Am Kartenrahmen ausgerichtet wuerde die
   Flaeche verrutschen, sobald das Bild schmaler ist. */
.geraet{
  position:relative;
  display:block;
  width:min(100%, 20rem);
  line-height:0;
}

.laptop{
  position:relative;
  z-index:2;
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 1.2rem 1.6rem rgba(50,46,38,.18));
}

.schirm{
  position:absolute;
  z-index:1;
  /* gemessen am PNG: transparente Bildschirmflaeche */
  left:22.28%;
  top:19.27%;
  width:55.43%;
  height:26.80%;
  overflow:hidden;
  background:linear-gradient(170deg, #fbfaf9, #eeebe7);
}

.teil{
  position:absolute;
  border-radius:.18rem;
  background:rgba(60,54,46,.16);
  transition:left .8s cubic-bezier(.22,.61,.36,1),
             top .8s cubic-bezier(.22,.61,.36,1),
             width .8s cubic-bezier(.22,.61,.36,1),
             height .8s cubic-bezier(.22,.61,.36,1),
             background-color .8s ease;
}
/* vorher: durcheinander */
.teil.a{ left:4%;  top:26%; width:44%; height:13%; }
.teil.b{ left:54%; top:6%;  width:42%; height:13%; }
.teil.c{ left:14%; top:62%; width:46%; height:13%; }
.teil.d{ left:64%; top:44%; width:30%; height:13%; }

/* nachher: eine klare Seite */
.schritt.aktiv .teil.a{ left:6%; top:8%;  width:88%; height:12%; background:rgba(60,54,46,.22); }
.schritt.aktiv .teil.b{ left:6%; top:26%; width:88%; height:38%; background:rgba(var(--akzent-kanaele), .22); }
.schritt.aktiv .teil.c{ left:6%; top:70%; width:42%; height:20%; }
.schritt.aktiv .teil.d{ left:52%; top:70%; width:42%; height:20%; }


/* ---------- 03 Kurve --------------------------------------
   Die Linie zeichnet sich selbst, sobald die Karte dran ist.
   ----------------------------------------------------------- */

.kurve{ padding:1.3rem 1.3rem 1.1rem; }
.kurve svg{ display:block; width:100%; height:7.4rem; }

.kurve .gitter{
  fill:none;
  stroke:rgba(60,54,46,.1);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.kurve .linie{
  fill:none;
  stroke:var(--akzent);
  stroke-width:1.25;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;

  /* pathLength="1" steht am Pfad im HTML, darum ist der
     Offset hier schlicht ein Anteil von 0 bis 1 */
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s cubic-bezier(.33,.75,.35,1) .15s;
}
.schritt.gesehen .kurve .linie{ stroke-dashoffset:0; }

/* Hiess bis eben auch .marke - genau wie die Wortmarke in der
   Kopfleiste. Diese Regel steht spaeter in der Datei und hat
   die Wortmarke deshalb ueberschrieben: weiss, opacity 0, nach
   rechts geschoben. Sie war unsichtbar, und niemandem fiel es
   auf, weil daneben "Online" stand. Zwei Bauteile duerfen nicht
   denselben Klassennamen tragen. */
.schritt-marke{
  position:absolute;
  right:1.3rem; top:1rem;
  padding:.25em .6em;
  border-radius:999px;
  background:var(--akzent);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
  opacity:0;
  translate:0 .4rem;
  transition:opacity .5s ease 1.2s, translate .5s cubic-bezier(.22,.61,.36,1) 1.2s;
}
.schritt.gesehen .schritt-marke{ opacity:1; translate:0 0; }

/* ---------- schmal ---------------------------------------- */

@media (max-width:900px){
  .ablauf-raster{
    grid-template-columns:1fr;
    gap:2rem;
  }

  /* Die geteilte Headline funktioniert nur neben den Karten.
     Schmal zeigen wir stattdessen den ganzen Satz. */
  .ablauf-wort{ display:none; }

  /* Gilt nur fuer die Vorlesehilfe-Headline in diesem Abschnitt.
     Unscoped hat die Regel jedes .nur-vorlesen auf der Seite
     sichtbar gemacht - unter anderem den Hinweis "(oeffnet in
     einem neuen Tab)" am Projektlink. */
  .ablauf .nur-vorlesen{
    position:static;
    width:auto; height:auto;
    margin:0 0 2rem;
    overflow:visible;
    clip-path:none;
    white-space:normal;

    font-weight:500;
    font-size:clamp(1.9rem, 8vw, 3rem);
    line-height:1.12;
    letter-spacing:-.03em;
    color:var(--tinte);
  }

  /* ---- Die drei Karten wischen uebereinander ----------------
     Schmal steht nebeneinander nichts mehr, also bekommen die
     Karten die Bewegung: jede bleibt kurz oben stehen, die
     naechste schiebt sich darueber. Der wachsende Haltepunkt
     laesst von jeder darunterliegenden ein Stueck stehen - so
     sieht man, dass es drei sind.
     Reines CSS, kein Skript noetig.
     ----------------------------------------------------------- */
  .schritte{
    gap:1rem;
    /* Auslauf, damit die letzte Karte ihren Halt zu Ende gehen
       kann, bevor der naechste Abschnitt schiebt. */
    padding-bottom:2.5rem;
  }

  .schritt{
    position:sticky;
    top:var(--halt);
    /* Das Hochschieben beim Einblenden wuerde die Sticky-Lage
       verziehen - schmal bleibt nur das Aufblenden. */
    translate:none;
  }
  .schritt:nth-child(1){ --halt:4.5rem; }
  .schritt:nth-child(2){ --halt:5.6rem; }
  .schritt:nth-child(3){ --halt:6.7rem; }
}

@media (prefers-reduced-motion:reduce){
  .schritt{ opacity:1 !important; translate:none !important; }
  /* Der Stapel ist Bewegung - bei reduzierter Bewegung stehen
     die Karten einfach untereinander. */
  .schritt{ position:static !important; }
  .schritte{ gap:2rem !important; }
  .stufe i{ scale:1 1 !important; }
  .kurve .linie{ stroke-dashoffset:0 !important; }
  .marke{ opacity:1 !important; translate:none !important; }
  .ablauf-wort span{ color:var(--tinte) !important; translate:none !important; }
}

/* ============================================================
   SECTION 05 — KONTAKT
   ============================================================ */

.kontakt{
  position:relative;
  z-index:6;
  padding:clamp(4rem, 8vw, 7rem) var(--rand) clamp(4.5rem, 9vw, 8rem);
  /* dieselbe Flaeche wie die FAQ darueber - der Uebergang soll
     unsichtbar sein, darum oben kein eigenes Polster */
  background:var(--akzent);
  color:#e8edf7;
  overflow:clip;
  isolation:isolate;
  /* Ein Pixel hoch: FAQ endet bei 8997, Kontakt begann bei 8996.
     Diese Halbpixel-Naht rendert als helle Haarlinie quer ueber
     die Seite. */
  margin-top:-1px;
  /* Das Foto steht als Band am Fuss, nicht hinter dem Text.
     Hoehe hier einmal gesetzt - das Polster leitet sich daraus ab,
     damit der Abstand zwischen Text und Bild immer gleich ist. */
  --bildband:clamp(19rem, 37vw, 42rem);
  /* Der obere Bandrand ist durchsichtiger Himmel, darum braucht
     es kaum Abstand - nur so viel, dass der Gipfel (30% Bildhoehe)
     nicht an die letzte Textzeile stoesst. */
  padding-bottom:calc(var(--bildband) + 1rem);
}

/* Text auf dem Blaufeld. Die Glaskarte bleibt hell und behaelt
   darum ihre dunklen Schriftfarben - nur was direkt auf dem Blau
   liegt, wird aufgehellt. */
.kontakt .kennzeichen{ color:#b8cdee; }
.kontakt .kennzeichen span{ color:#dce6f7; }
.kontakt-titel{ color:#fff !important; }
.kontakt-lead{ color:#c6d3ec !important; }
.kontakt-mail{ color:#fff !important; text-decoration-color:rgba(255,255,255,.45) !important; }
.kontakt-mail:hover{ color:#bcd0f0 !important; }
.kontakt-hinweis{ color:#b8cdee !important; }
/* stand als Grau auf Blau und war damit praktisch unlesbar */
/* Die Passungsspalten stehen auf dem blauen Grund - eigene
   Farben, siehe .passung weiter unten. */

/* ---------- Hintergrundfoto im Kontakt ---------- */
/* Das Foto hat einen transparenten Himmel (PNG Farbtyp 6, Alpha 0
   oberhalb der Gratlinie bei 30-40% Bildhoehe). Deshalb braucht
   es hier weder Schleier noch weichen Bandrand: wo im Foto Himmel
   waere, steht einfach die Abschnittsfarbe. Gemessen wurde auch
   kein Blaurand an der Freistellkante (0,0% der Kantenpixel).
   Das Band darf den Text sogar leicht ueberlappen - der obere Teil
   ist ja durchsichtig. */
.kontakt-bild{
  position:absolute;
  left:0; right:0; bottom:0; top:auto;
  height:var(--bildband);
  z-index:-1;
  pointer-events:none;
}
.kontakt-bild img{
  width:100%; height:100%;
  object-fit:cover;
  /* 70% zeigt ueber alle Breiten rund Bild 21-91%: ein Stueck
     Himmel, den ganzen Bergkamm mit Gipfel (30%), die Blumenwiese
     und das Sofa (66-82%) mit etwas Wiese darunter. */
  object-position:50% 70%;
}

.kontakt-raster{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
  max-width:68rem;
  margin:0 auto;
}

.kontakt-titel{
  margin:0 0 1.5rem;
  font-weight:500;
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--tinte);
}

.kontakt-lead{
  margin:0 0 2rem;
  max-width:44ch;
  font-size:clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height:1.6;
  color:var(--text-leise);
}

.kontakt-wahl{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.75rem;
  margin-bottom:2rem;
}

.kontakt-mail{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-weight:500;
  color:var(--text);
  text-underline-offset:.3em;
  text-decoration-color:var(--linie);
  transition:color .2s ease;
}
.kontakt-mail:hover{ color:var(--akzent); }
.kontakt-mail svg{
  width:1.15rem; height:1.15rem;
  fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Sanfte Vorauswahl: filtert, ohne jemanden vor den Kopf zu stossen */
/* ---------- Passt / Passt nicht ---------- */
/* Kein Regler, keine Interaktion: zwei Spalten, die der Besucher
   in zwei Sekunden auf sich selbst anwendet. Das filtert genauso
   hart wie ein Fragebogen, klingt aber souveraen statt abweisend
   - und wer Budget hat, fuellt ohnehin keinen Konfigurator aus,
   um sprechen zu duerfen. */
.passung{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
  gap:1.5rem 2.25rem;
  margin:0;
  padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.passung-kopf{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 .7rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
}
.passung-zeichen{
  display:grid;
  place-items:center;
  width:1.3rem; height:1.3rem;
  border-radius:50%;
  flex:none;
}
.passung-zeichen svg{
  width:.72rem; height:.72rem;
  fill:none; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}
.passung-spalte.ja .passung-zeichen{ background:rgba(173,214,160,.22); }
.passung-spalte.ja .passung-zeichen svg{ stroke:#b9e0a8; }
.passung-spalte.nein .passung-zeichen{ background:rgba(255,255,255,.12); }
.passung-spalte.nein .passung-zeichen svg{ stroke:#c7d3e8; }

.passung ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.passung li{
  position:relative;
  padding-left:.95rem;
  font-size:.9rem;
  line-height:1.5;
}
.passung li::before{
  content:"";
  position:absolute;
  left:0; top:.6em;
  width:.3rem; height:.3rem;
  border-radius:50%;
  background:currentColor;
  opacity:.55;
}
/* Die Ja-Spalte traegt mehr Gewicht: dort soll der richtige
   Besucher haengenbleiben. */
.passung-spalte.ja li{ color:#eef3fb; }
.passung-spalte.nein li{ color:#b8cdee; }

/* ---------- Karte: wie das Gespraech laeuft ----------------
   Nimmt die Glaskarte aus dem Kopf wieder auf, damit die Seite
   vorn und hinten dieselbe Sprache spricht. Hier ohne Glas:
   es liegt kein Bild dahinter, das etwas zu brechen gaebe.
   ----------------------------------------------------------- */

/* Glas statt Weiss. Das funktioniert hier erst, seit das Sesselfoto
   dahinter liegt - vorher haette der Blur nur leere Flaeche
   unscharf gemacht. Deckkraft so gewaehlt, dass man das Motiv ahnt
   und die Schrift trotzdem vollen Kontrast behaelt. */
.kontakt-karte{
  padding:1.75rem 1.9rem 1.6rem;
  border-radius:var(--glas-rund);
  /* Durchsichtiger als vorher. Damit das lesbar bleibt, sind die
     Schriftfarben in der Karte gleichzeitig dunkler gesetzt -
     sonst waere der Kontrast unter die Schwelle gefallen. */
  /* Derselbe Stein wie auf der Leistungen-Tafel - das ist die
     Regel der Seite: Mineralglas auf Glas, sonst nirgends.
     Die Mischung ist hier gruener und kuehler, weil die Karte
     auf dem blauen Bild liegt: Moos fuehrt, Bernstein tritt
     zurueck, dazu ein Hauch des eigenen Blaus. */
  background:
    var(--schliff),

    color-mix(in srgb, #fff 52%, transparent);
  background-size:var(--schliff-groessen), auto;
  background-position:var(--schliff-lagen), 0 0;
  -webkit-backdrop-filter:var(--glas-blur);
  backdrop-filter:var(--glas-blur);
  /* Neigung und Hochfliegen in EINER Eigenschaft - zwei
     transform-Regeln wuerden sich gegenseitig loeschen. */
  transform:
    perspective(820px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .45s ease,
             background-position .5s ease;
  box-shadow:
    0 1.5rem 3rem -1.5rem rgba(10,24,60,.34),
    inset 0 1px 0 rgba(255,255,255,.8);
}
/* nur waehrend die Maus darauf liegt: schneller folgen und
   deutlicher abheben */
.kontakt-karte.greift{
  transition:transform .12s linear, box-shadow .45s ease,
             background-position .1s linear;
  box-shadow:
    0 2.4rem 4.5rem -1.6rem rgba(10,24,60,.46),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Schrift in der Karte dunkler, weil das Glas durchsichtiger ist */
/* "Verfuegbar" stand bei 2,13:1 auf dem hellen Glas - bei
   10px voellig unlesbar. Gleicher Ton wie die Schritte. */
.kontakt-karte .karte-status{ color:#2f3a28 !important; }
.kontakt-karte .karte-titel{ color:#1b2a16 !important; }
.kontakt-schritte li{ color:#2f3a28 !important; }
.kontakt-schritte span{ color:#131c0f !important; }
.kontakt-frist{ color:#2f3a28 !important; }

.kontakt-schritte{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:1.1rem;
  counter-reset:schritt;
}
.kontakt-schritte li{
  font-size:.92rem;
  line-height:1.5;
  color:var(--text-leise);
}
.kontakt-schritte span{
  display:block;
  margin-bottom:.15rem;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinte);
}

.kontakt-gesicht{
  width:3.25rem; height:3.25rem;
  border-radius:50%;
  object-fit:cover;
  flex:none;
  /* Heller Ring, damit der weisse Studiohintergrund auf dem
     blassblauen Glas nicht als Fleck ohne Kante steht. */
  box-shadow:0 0 0 1px rgba(255,255,255,.85),
             0 .35rem .9rem -.35rem rgba(10,24,60,.35);
}

.kontakt-frist{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:1.5rem 0 0;
  padding-top:1.1rem;
  border-top:1px solid rgba(70,62,54,.12);
  font-size:.88rem;
  color:var(--text-leise);
}

/* ---------- Fusszeile -------------------------------------- */

.fuss{
  position:relative;
  z-index:6;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.6rem 2rem;
  padding:2rem var(--rand) 2.5rem;
  background:var(--grund);
  border-top:1px solid var(--linie);
  font-size:.88rem;
  color:var(--text-leise);
}
.fuss p{ margin:0; }
.fuss-marke{
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--akzent);
}
/* Offenlegung zur Bildwelt. Steht in der Fusszeile, nicht bei den
   Projekten: die KI-Motive sind ueber die ganze Seite verteilt
   (Ast, Glaskugel, Holzskulptur, Bergsofa). Im Projektabschnitt
   wuerde derselbe Satz heissen "meine Kundenarbeiten sind
   KI-generiert" - das Gegenteil dessen, was dort gezeigt wird. */
.fuss-hinweis{
  margin:.5rem 0 0;
  font-size:.8125rem;
  /* keine zusaetzliche Deckkraft: mit opacity .85 kam der Hinweis
     auf 3,46:1 und damit unter die Lesbarkeitsschwelle. Ein
     Offenlegungssatz, den man kaum lesen kann, ist keiner. */
  color:var(--text-leise);
}

.fuss-ort{ flex:1 1 20rem; }
.fuss-nav{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.fuss-nav a{ text-underline-offset:.25em; }
.fuss-nav a:hover{ color:var(--akzent); }

/* ---------- schmal ----------------------------------------- */

@media (max-width:820px){
  .kontakt-raster{ grid-template-columns:1fr; gap:2.25rem; }
  .kontakt-wahl{ gap:1rem 1.25rem; }
  .kontakt-wahl .btn{ flex:1 1 auto; text-align:center; }

}

/* ============================================================
   SECTION 07 — ARBEITEN
   ============================================================ */

.arbeiten{
  position:relative;
  z-index:6;
  padding:clamp(4rem, 8vw, 7rem) var(--rand) clamp(4.5rem, 9vw, 8rem);
  background:var(--grund);
  /* Die Nachbarkarten des Stapels ragen weit ueber den Rand -
     gemessen 1459px. Ohne das laesst sich die ganze Seite
     seitwaerts schieben. */
  overflow:clip;
}

/* Sechs Spalten statt drei: so gehen beide Zeilen ohne Luecke
   auf - oben zwei Kacheln zu drei Spalten, unten drei zu zwei.
   Bei fuenf Projekten in einem Dreierraster bliebe sonst ein
   leeres Feld stehen. */
/* EINE TAFEL, NICHT SECHS KARTEN.
   Vorher lagen zwischen den Kacheln 32-52px Abstand - dadurch
   las sich das Raster als mehrere einzelne Dinge, die zufaellig
   nebeneinander liegen. Jetzt sitzen sie ohne Luecke auf einem
   gemeinsamen Grund, getrennt nur durch Haarlinien, mit einem
   Rahmen aussen. Weiche Ecken statt harter Kanten, damit es
   zur uebrigen Seite passt. */
.arbeit-raster{
  list-style:none;
  margin:clamp(2.5rem, 5vw, 4rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:0;
  background:#fff;
  /* Derselbe Rand wie bei den Bento-Kacheln - kaum sichtbar,
     er setzt nur die Kante gegen den Seitengrund ab. Zwischen
     den Zellen liegt bewusst keine Linie mehr: ein Strich ist
     das einzige harte Element, das es auf dieser Seite sonst
     nirgends gibt. Getrennt wird durch Abstand, nicht durch
     Kante - so wie bei allem anderen hier auch. */
  border:1px solid rgba(60,54,46,.07);
  border-radius:1.5rem;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(45,51,40,.03),
             0 22px 48px -28px rgba(45,51,40,.18);
}
.arbeit{ grid-column:span 2; }

/* Gleiche Zeilen ueber die ganze Raster-Reihe hinweg.
   Problem: Kacheln mit Umschalter schoben ihren Namen eine
   Zeile tiefer als die Nachbarn - EMCEL gegen I.S.A., terraBlu
   gegen Cosmotura. Mit subgrid teilen sich alle Kacheln einer
   Reihe dieselben drei Zeilen: Bild, Umschalter, Text. Eine
   Reihe, in der niemand einen Umschalter hat, laesst die
   mittlere Zeile von allein auf null zusammenfallen. */
@supports (grid-template-rows: subgrid){
  .arbeit-raster{ grid-auto-rows:auto; }
  .arbeit{
    grid-row:span 3;
    display:grid;
    grid-template-rows:subgrid;
    align-content:start;
    /* Der Reihenabstand des Rasters wuerde sonst auch zwischen
       Bild, Umschalter und Text wirken - also dreimal in jeder
       Kachel. Innen fuehren die Abstaende der Teile selbst. */
    row-gap:0;
  }
  /* Bild in Zeile 1, Umschalter in Zeile 2, Text in Zeile 3 -
     auch dann, wenn die mittlere Zeile leer bleibt. */
  .arbeit > .fall,
  .arbeit > .arbeit-bild,
  .arbeit > .arbeit-rahmen,
  .arbeit > figure{ grid-row:1; }
  .arbeit > .fall-wahl{ grid-row:2; }
  .arbeit > .arbeit-text{ grid-row:3; }

  /* WICHTIG: display zu setzen macht das hidden-Attribut
     wirkungslos - die eingeklappten Kacheln blieben sichtbar.
     Gleicher Fehler wie frueher bei .schau und .mehr-knopf. */
  .arbeit[hidden]{ display:none; }
}
.arbeit.gross{ grid-column:span 3; }

/* Gestaffeltes Einsteigen wie bei den Bento-Kacheln, damit der
   Abschnitt sich wie der Rest der Seite verhaelt. */
.arbeit{
  /* Das Polster sitzt in der Zelle, nicht als Abstand
     dazwischen - so beruehren sich die Trennlinien. Es muss
     grosszuegig sein: ohne Luft nach aussen wirkt eine
     geschlossene Tafel schnell gedraengt. Gemessen waren 22px
     zu wenig, jetzt sind es 40. */
  padding:clamp(1.5rem, 3.2vw, 2.75rem);
  opacity:0;
  translate:0 1.25rem;
  transition:opacity .7s ease, translate .7s cubic-bezier(.22,.61,.36,1);
}
.sichtbar .arbeit{ opacity:1; translate:0 0; }
.sichtbar .arbeit:nth-child(2){ transition-delay:.08s; }
.sichtbar .arbeit:nth-child(3){ transition-delay:.16s; }
.sichtbar .arbeit:nth-child(4){ transition-delay:.22s; }
.sichtbar .arbeit:nth-child(5){ transition-delay:.28s; }

/* Browser-Rahmen wie im Vorbild: schmale Leiste mit drei Punkten,
   darunter die Flaeche fuer den Screenshot. */
/* Das Verhaeltnis sitzt am Rahmen, nicht an der Buehne: sonst ist
   eine Vergleichskachel um die Hoehe der Browser-Leiste groesser
   als eine Kachel ohne Leiste, und zwei Kacheln derselben Reihe
   stehen unterschiedlich hoch. */
.arbeit-rahmen{
  display:flex;
  flex-direction:column;
  aspect-ratio:var(--kachel-bild, 16/10);
  border-radius:.7rem;
  overflow:hidden;
  background:#fff;
  /* Kein eigener Rahmen und kein Schatten mehr: die Zelle hat
     schon einen. Zwei Rahmen ineinander waren der Grund, warum
     es unruhig aussah. Nur eine feine Linie bleibt, damit das
     Fenster sich vom weissen Grund abhebt. */
  border:1px solid color-mix(in srgb, var(--linie) 70%, transparent);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),
             box-shadow .5s ease;
}
.arbeit:hover .arbeit-rahmen,
.arbeit:focus-within .arbeit-rahmen{
  transform:translateY(-5px);
  box-shadow:0 1px 2px rgba(45,51,40,.05),
             0 26px 50px -18px rgba(45,51,40,.32);
}

.rahmen-leiste{
  flex:none;
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.62rem .85rem;
  background:#fbfbf8;
  border-bottom:1px solid var(--linie);
}
.rahmen-leiste i{
  width:.46rem;
  height:.46rem;
  border-radius:50%;
  background:var(--linie);
}

.rahmen-flaeche{
  /* Hochformatiger als die grossen Kacheln: kleine Kacheln
     zeigen sonst nur einen Streifen der Seite. */
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
  background:linear-gradient(142deg, #eceae2, #f6f5f1 55%, #e6e8e1);
}
.arbeit.gross .rahmen-flaeche{ aspect-ratio:16/9; }

.rahmen-flaeche img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0;   /* Screenshots zeigen oben das Wichtige */
  transition:scale .6s cubic-bezier(.22,.61,.36,1);
}
.arbeit:hover .rahmen-flaeche img{ scale:1.03; }
/* Sichtbare Markierung, damit die Platzhalter nicht
   versehentlich live gehen. Faellt mit den echten Screenshots weg. */
.rahmen-hinweis{
  position:absolute;
  top:.7rem; left:.7rem;
  margin:0;
  padding:.32rem .6rem;
  border-radius:.3rem;
  background:var(--tinte);
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#f3f2ec;
}

/* ---------- Lange Entwuerfe in der Kachel durchscrollen ---------- */
/* Fuer Figma-Seiten und Landingpages: der Rahmen bleibt so gross
   wie die anderen Kacheln, aber das Bild faehrt beim Darueberfahren
   von oben nach unten durch. So sieht man die ganze Seite, ohne
   dass die Kachel seitenhoch wird.
   100cqh ist die Hoehe des Rahmens - dadurch stimmt der Weg bei
   jeder Bildlaenge von allein, ohne Rechnen im Skript. */
/* Im Rahmen muss die lange Flaeche die Resthoehe fuellen -
   sonst richtet sie sich nach ihrem eigenen Seitenverhaeltnis
   und der Rahmen bekommt unten Luft. */
.arbeit-rahmen > .arbeit-bild.lang{
  flex:1;
  min-height:0;
  aspect-ratio:auto;
  border-radius:0;
}
.arbeit-bild.lang{ container-type:size; }
.arbeit-bild.lang img{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:auto;          /* volle Laenge statt Beschnitt */
  object-fit:fill;
  translate:0 0;
  /* Laufzeit kommt aus dem Skript: 7s fest waren fuer 270px Weg
     gedacht. Bei einem 2684px langen Entwurf waere das ein
     Vorbeirauschen. */
  transition:translate var(--lauf, 7s) linear;
}
.arbeit:hover .arbeit-bild.lang img,
.arbeit:focus-within .arbeit-bild.lang img,
.arbeit-bild.lang.laeuft img,
.nl-seite.laeuft img{
  translate:0 calc(100cqh - 100%);
}
/* das Heranziehen der normalen Kacheln stoert hier nur */
.arbeit:hover .arbeit-bild.lang img{ scale:1; }


@media (prefers-reduced-motion:reduce){
  .arbeit-bild.lang img{ transition:none; }
  .arbeit:hover .arbeit-bild.lang img,
  .arbeit:focus-within .arbeit-bild.lang img,
  .arbeit-bild.lang.laeuft img{ translate:0 0; }
}

.arbeit-text{ padding:1.3rem 0 0; }
/* Vier Zeilen unter dem Bild brauchen ein Gefaelle, sonst liest
   sich alles als ein grauer Block. Von oben nach unten: Name
   fuehrt, Branche und Leistung tragen, die Credits treten
   zurueck, der Link hebt sich als einziger ab. */
.arbeit-wer{
  margin:0;
  font-size:clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.25;
  color:var(--tinte);
}
/* Zweite Stufe. Vorher hatte sie denselben Kontrast wie die
   Credits darunter (beide 5,06) und war nur 2px groesser -
   dadurch lasen sich vier Zeilen als ein grauer Block. Jetzt
   8,86:1, also klar vor den Credits und klar hinter dem Namen. */
.arbeit-was{
  margin:.55rem 0 0;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--text);
}
/* Der Trenner stand in der Linienfarbe und kam damit auf 1,25:1
   Kontrast - unsichtbar, die Angaben liefen zu einem Brei
   zusammen. Jetzt 2,7:1: sichtbar, aber leiser als die Schrift. */
.arbeit-was span{
  margin:0 .5em;
  color:color-mix(in srgb, var(--text-leise) 70%, var(--grund));
}

/* ---------- Vorher-Nachher-Schieber ---------- */
/* Zwei Bilder uebereinander, das obere per clip-path beschnitten.
   clip-path statt Breite: bei einer Breitenaenderung wuerde das
   Bild gestaucht, beschnitten bleibt es massstabsgetreu. */

.vergleich-buehne{
  position:relative;
  flex:1;                  /* fuellt, was die Leiste uebriglaesst */
  min-height:0;
  overflow:hidden;
  background:#eceae2;
  /* senkrecht scrollen bleibt moeglich, waagrecht zieht der Regler */
  touch-action:pan-y;
}
.vergleich-buehne img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0;
}
.v-vorher{
  position:absolute;
  inset:0;
  clip-path:inset(0 calc(100% - var(--schnitt, 50%)) 0 0);
}

/* Die Marken liegen in der jeweiligen Bildhaelfte und werden
   deshalb mitbeschnitten. Vorher standen sie frei auf der Buehne:
   bei 4% Vorhang sass "Vorher" bei x 11-79, der Vorher-Streifen war
   aber nur 25px breit - das Etikett stand also ueber dem falschen
   Bild und behauptete das Gegenteil von dem, was zu sehen war. */
.v-nachher-feld{
  position:absolute;
  inset:0;
  clip-path:inset(0 0 0 var(--schnitt, 50%));
  pointer-events:none;
}

/* Feiner als vorher: 1px statt 2px, und die Kante traegt einen
   weichen Schatten nach rechts. Dadurch wirkt die obere Haelfte
   leicht angehoben statt wie mit dem Lineal getrennt. */
.v-linie{
  position:absolute;
  top:0; bottom:0;
  left:var(--schnitt, 50%);
  width:1px;
  margin-left:-.5px;
  background:rgba(255,255,255,.75);
  box-shadow:1px 0 6px rgba(20,24,16,.3), -1px 0 6px rgba(20,24,16,.18);
  pointer-events:none;
  transition:background .25s ease;
}
.vergleich-buehne:hover .v-linie{ background:rgba(255,255,255,.95); }
/* Griff aus mattiertem Glas statt weisser Scheibe: der Inhalt
   darunter bleibt erahnbar, der Griff liegt auf dem Bild statt
   es zu verdecken. Der dunkle Kern haelt die Pfeile lesbar,
   egal ob darunter ein heller oder dunkler Screenshot liegt. */
.v-linie i{
  position:absolute;
  top:50%; left:50%;
  translate:-50% -50%;
  width:2.5rem; height:2.5rem;
  border-radius:50%;
  /* Dunkles Glas: dieselbe Familie wie die Stapelpfeile, nur
     fuer Bilder statt fuer Papier. Die Pfeile darin kommen
     damit auch auf hellen Screenshots auf 4,7:1. */
  background:rgba(28,32,22,.62);
  -webkit-backdrop-filter:var(--knopf-blur);
          backdrop-filter:var(--knopf-blur);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 4px 18px rgba(20,24,16,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transition:scale .25s cubic-bezier(.22,.61,.36,1), background .25s ease;
}
.vergleich-buehne:hover .v-linie i{ background:rgba(28,32,22,.74); }
.vergleich-buehne:hover .v-linie i{ scale:1.12; }
/* zwei kleine Pfeile im Griff, damit man sieht, dass man ziehen kann */
.v-linie i::before,
.v-linie i::after{
  content:"";
  position:absolute;
  top:50%;
  width:.42rem; height:.42rem;
  border:1.5px solid #fff;
  border-bottom:0;
  border-right:0;
}
.v-linie i::before{ left:.62rem;  translate:0 -50%; rotate:-45deg; }
.v-linie i::after{  right:.62rem; translate:0 -50%; rotate:135deg; }

/* Deckend, nicht durchscheinend. Vorher lagen die Marken auf
   rgba(45,51,40,.62): ueber einem hellen Screenshot mischt das zu
   rund rgb(125,128,122), der Text darauf erreicht nur ~3:1 - und
   die Navigation des Kunden flimmerte durch.
   Dazu zwei Farben statt einer: das Alte neutral, das Neue im
   Akzent. So sagt die Farbe schon, welche Haelfte welche ist. */
.v-marke{
  position:absolute;
  top:.7rem;
  padding:.32rem .6rem;
  border-radius:.3rem;
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  pointer-events:none;
}
.v-marke{ transition:opacity .2s ease; }
.vergleich-buehne.eng-links  .v-marke.links{  opacity:0; }
.vergleich-buehne.eng-rechts .v-marke.rechts{ opacity:0; }
.v-marke.links{
  background:var(--tinte);          /* 11,6:1 mit dem hellen Text */
  color:#f3f2ec;
}
.v-marke.rechts{
  background:var(--akzent);         /* 8,1:1 mit Weiss */
  color:#fff;
}
.v-marke.links{  left:.7rem; }
.v-marke.rechts{ right:.7rem; }
.vergleich-buehne .rahmen-hinweis{ top:auto; bottom:.7rem; left:.7rem; }

/* Der Regler liegt unsichtbar ueber der ganzen Buehne: dadurch
   springt der Schnitt auf jeden Klick und laesst sich von ueberall
   ziehen - und Tastatur und Vorlesesoftware bekommen trotzdem ein
   echtes Bedienelement. */
.v-regler{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
}
.v-regler::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:3rem; height:100%;
}
.v-regler::-moz-range-thumb{
  width:3rem; height:100%;
  border:0; background:transparent;
}
/* Fokus muss sichtbar sein, obwohl der Regler selbst unsichtbar ist */
.vergleich-buehne:has(.v-regler:focus-visible){
  outline:2px solid var(--akzent);
  outline-offset:3px;
}

/* ---------- Kachel ohne Bildmaterial ---------- */
/* Bewusst leer statt mit einem fremden Foto gefuellt: ein
   Stimmungsbild als Projektbeleg waere eine Behauptung, die
   das Projekt nicht deckt. Die Flaeche haelt nur den Platz. */
.arbeit-bild.leer{
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--tinte) 5%, transparent);
  border:1px dashed color-mix(in srgb, var(--tinte) 22%, transparent);
}
.leer-wort{
  font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
  color:color-mix(in srgb, var(--tinte) 52%, transparent);
}

/* ---------- Knopf zum Aufklappen ---------- */
/* Auch hier: display setzen macht das hidden-Attribut
   wirkungslos, siehe .schau weiter unten. */
.mehr-knopf[hidden]{ display:none; }
.mehr-knopf{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:fit-content;
  margin:clamp(2rem, 3.5vw, 3rem) auto 0;
  padding:.85rem 1.6rem;
  border:1px solid var(--linie);
  border-radius:2rem;
  background:transparent;
  font:inherit;
  font-size:.9375rem;
  color:var(--tinte);
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease;
}
.mehr-knopf:hover{
  border-color:var(--tinte);
  background:rgba(45,51,40,.04);
}
.mehr-knopf svg{
  width:1.05em; height:1.05em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
  transition:rotate .25s ease;
}
.mehr-knopf[aria-expanded="true"] svg{ rotate:180deg; }


/* Link zur echten Seite - der staerkste Beleg ueberhaupt.
   Er sitzt in der Bildunterschrift, nicht ueber dem Bild: beim
   Schieber liegt dort der Regler, ein Link daneben wuerde das
   Ziehen abfangen. */
/* Der Link ist das einzige Anklickbare hier und muss sich von den
   drei Angabezeilen darueber absetzen: Farbe, mehr Gewicht, und
   ein Unterstrich, den man auch sieht. Bei 35% wirkte er wie
   normaler Text. */
.arbeit-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:1.05rem;
  font-size:.875rem;
  font-weight:500;
  color:var(--akzent);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:.3em;
  text-decoration-color:rgba(var(--akzent-kanaele), .75);
  transition:text-decoration-color .3s ease, gap .3s ease;
}
.arbeit-link:hover{
  text-decoration-color:rgba(var(--akzent-kanaele), 1);
  gap:.55rem;
}
.arbeit-link svg{
  width:.85em; height:.85em;
  fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
}

/* Steht anstelle des Links, wenn eine Seite noch nicht oeffentlich
   ist. Kein <a>, weil es nichts zu klicken gibt - ein toter Link
   waere schlechter als gar keiner. */
/* Statuszeilen zum Projekt: wann es online geht, mit wem
   zusammengearbeitet wurde. Beides sind Angaben, keine
   Aktionen - darum kein Link-Blau, sondern gedaempft. */
.arbeit-sperre{
  display:flex;
  align-items:center;
  gap:.42rem;
  width:fit-content;
  margin:.45rem 0 0;
  font-size:.8125rem;
  line-height:1.45;
  color:var(--text-leise);
}

/* Nur die Credits stapeln - beim Schloss stand das Zeichen sonst
   ueber dem Text statt daneben, weil beide dieselbe Regel teilten. */
.arbeit-team{
  /* flex statt inline-flex: zwei Statuszeilen hintereinander
     liefen sonst auf derselben Zeile weiter, und bei EMCEL
     klebte "Seite ansehen" direkt dahinter. */
  display:flex;
  flex-direction:column;   /* zwei Rollen, zwei Zeilen */
  align-items:flex-start;
  gap:.38rem;
  width:fit-content;
  /* Mehr Luft darueber: die Credits sind eine eigene Gruppe,
     keine weitere Zeile der Beschreibung. */
  margin:1.1rem 0 0;
  font-size:.78rem;
  line-height:1.5;
  color:var(--text-leise);
}

/* Eine Zeile je Rolle, jede mit eigenem Zeichen. Vorher trug die
   ganze Zeile ein Symbol fuer zwei Beitraege - das las sich, als
   haette eine Partei alles gemacht. */
.rolle{
  display:flex;
  align-items:center;
  gap:.42rem;
}
.arbeit-sperre svg,
.rolle svg{
  width:.95em; height:.95em;
  fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Cover-Kacheln ---------- */
/* Kein Browser-Rahmen mehr auf der Kachel: dort liegt ein Cover,
   kein Screenshot. Der Rahmen mit den drei Punkten gehoert zum
   Vergleich im Schaukasten - dort ist er wahr. */
.arbeit-schau{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.arbeit-bild{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:.85rem;
  /* Dasselbe Verhaeltnis wie die Vergleichsbuehne, sonst stehen
     zwei Kacheln derselben Reihe unterschiedlich hoch - ein
     Durchscroll-Rahmen bei 3/2 neben einem Vergleich bei 1,84. */
  aspect-ratio:var(--kachel-bild, 16/10);
  background:#eceae2;
  box-shadow:0 1px 2px rgba(45,51,40,.04),
             0 14px 30px -16px rgba(45,51,40,.24);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),
             box-shadow .5s ease;
}
.arbeit-bild img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:scale .6s cubic-bezier(.22,.61,.36,1);
}
.arbeit:hover .arbeit-bild,
.arbeit-schau:focus-visible .arbeit-bild{
  transform:translateY(-5px);
  box-shadow:0 1px 2px rgba(45,51,40,.05),
             0 26px 50px -18px rgba(45,51,40,.32);
}
.arbeit:hover .arbeit-bild img{ scale:1.04; }
.arbeit-schau:focus-visible .arbeit-bild{
  outline:2px solid var(--akzent);
  outline-offset:3px;
}

/* Sagt, dass in der Kachel ein Vergleich steckt. Ohne diese Marke
   klickt niemand - und der Beleg bliebe ungesehen. */
.arbeit-marke{
  position:absolute;
  left:.8rem; bottom:.8rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .7rem;
  border-radius:2rem;
  background:var(--akzent);
  color:#fff;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.06em;
  transition:gap .3s ease;
}
.arbeit-marke svg{
  width:.95em; height:.95em;
  fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
}
.arbeit:hover .arbeit-marke{ gap:.6rem; }

/* ---------- Zwei Newsletter nebeneinander ---------- */
/* Ein Regler taugt hier nicht: zwei E-Mails sind schmal und
   unterschiedlich lang, der Vorhang zeigte fast nur Rand.
   Nebeneinander sieht man beide Anfaenge gleichzeitig - und
   genau der erste Bildschirm entscheidet, ob eine Mail
   gelesen wird. */
.nl-paar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  aspect-ratio:3/2;
  padding:.5rem;
  border-radius:.85rem;
  background:#e7e5dd;
  box-shadow:0 1px 2px rgba(45,51,40,.04),
             0 14px 30px -16px rgba(45,51,40,.24);
}
.nl-seite{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:.5rem;
  background:#fff;
}
/* Wie bei den langen Entwuerfen: beim Darueberfahren laeuft die
   Mail durch. Ein Newsletter ist ein langes Dokument, der
   Kopfbereich allein zeigt nur den halben Eindruck. */
.nl-seite{ container-type:size; }
.nl-seite img{
  position:absolute;
  top:0; left:0;
  display:block;
  width:100%;
  height:auto;              /* volle Laenge statt Beschnitt */
  object-fit:fill;
  translate:0 0;
  transition:translate var(--lauf, 8s) linear;
}
.nl-marke{
  position:absolute;
  top:.45rem; left:.45rem;
  padding:.26rem .5rem;
  border-radius:.3rem;
  background:var(--tinte);
  color:#f3f2ec;
  font-size:.5625rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nl-marke.nachher{ background:var(--akzent); color:#fff; }
.nl-seite .rahmen-hinweis{
  top:auto; bottom:.45rem; left:.45rem;
  font-size:.5625rem;
  padding:.26rem .5rem;
}

/* ---------- Karussell fuer Mengen ---------- */
/* Fuer Instagram-Beitraege, App-Screens, Bildstrecken - also alles,
   wo nicht EIN Dokument gezeigt wird, sondern mehrere Stuecke.
   Ohne Bibliothek: eine Scroll-Schiene mit scroll-snap wischt am
   Telefon von allein, laesst sich mit dem Rad schieben und ist
   mit der Tastatur erreichbar. */
.arbeit-bild.karussell{ background:#e7e5dd; }

.kar-schiene{
  display:flex;
  gap:.4rem;
  height:100%;
  padding:.45rem;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.kar-schiene::-webkit-scrollbar{ display:none; }
.kar-schiene:focus-visible{
  outline:2px solid var(--akzent);
  outline-offset:-2px;
  border-radius:.85rem;
}

/* Quadrate wie ein Instagram-Beitrag. Die Hoehe gibt das Mass vor,
   dadurch passt sich die Zahl der sichtbaren Blaetter der Kachel an. */
.kar-schiene img{
  position:static;          /* hebt die Regel der normalen Kacheln auf */
  flex:0 0 auto;
  width:auto;
  height:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:.5rem;
  scroll-snap-align:center;
  transition:none;
}
.arbeit:hover .arbeit-bild.karussell img{ scale:1; }

.kar-knopf{
  position:absolute;
  top:50%;
  translate:0 -50%;
  display:grid;
  place-items:center;
  width:2rem; height:2rem;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(28,32,22,.62);
  -webkit-backdrop-filter:var(--knopf-blur);
          backdrop-filter:var(--knopf-blur);
  color:#fff;
  box-shadow:0 4px 18px rgba(20,24,16,.35);
  cursor:pointer;
  opacity:0;
  transition:opacity .25s ease, background .25s ease;
}
.kar-knopf.zurueck{ left:.55rem; }
.kar-knopf.vor{ right:.55rem; }
.kar-knopf svg{
  width:1rem; height:1rem;
  fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
}
.karussell:hover .kar-knopf,
.kar-knopf:focus-visible{ opacity:1; }
.kar-knopf[disabled]{ opacity:0 !important; pointer-events:none; }

/* Am Telefon gibt es kein Darueberfahren - dort wird gewischt,
   die Pfeile waeren nur im Weg. */
@media (hover: none){
  .kar-knopf{ display:none; }
}

.kar-zaehler{
  position:absolute;
  right:.7rem; bottom:.7rem;
  padding:.3rem .55rem;
  border-radius:.3rem;
  background:var(--tinte);
  color:#f3f2ec;
  font-size:.625rem;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* ---------- Fallansicht mit mehreren Gewerken ---------- */
.fall{ margin:0; position:relative; }

/* Die Umschaltung liegt im Bild, oben links - im selben Glas
   wie der Reglergriff. Sie darf dort nur liegen, weil in den
   Ansichten mit Umschalter keine Marke mehr an derselben Stelle
   sitzt: die Platzhalter-Marken sind dort entfernt, und die
   "Vorher"-Marke rutscht darunter (siehe weiter unten). */
.fall{ position:relative; }
/* Der Umschalter lag frueher als dunkle Pille im Bild. Gemessen
   war er 259px breit auf einer 288px breiten Buehne - er deckte
   neun Zehntel der Bildbreite ab, lag ueber der Nachher-Marke
   und ueber der Browserleiste. Jetzt steht er unter dem Bild,
   ueber dem Projektnamen: das Bild bleibt frei, die Hoehe der
   Kachel aendert sich nicht (das Seitenverhaeltnis sitzt am
   Rahmen, nicht an der Bildunterschrift). */
.fall-wahl{
  display:flex;
  gap:0;
  width:fit-content;
  margin:1.15rem 0 0;
  padding:0;
  border:0;
  border-radius:999px;
  background:color-mix(in srgb, var(--tinte) 8%, transparent);
}
.fall-wahl button{
  padding:.34rem .78rem;
  border:0;
  border-radius:999px;
  background:transparent;
  font:inherit;
  font-size:.8125rem;
  letter-spacing:.01em;
  /* --text-leise waere auf dem hellen Pillengrund nur 4,15:1.
     Dieser Ton misst 5,14:1 und bleibt trotzdem klar hinter
     dem ausgewaehlten Reiter zurueck. */
  color:#5e6156;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.fall-wahl button:hover{ color:var(--tinte); }
.fall-wahl button[aria-selected="true"]{
  background:#fff;
  color:var(--tief);
}
.fall-wahl button:focus-visible{
  outline:2px solid var(--akzent);
  outline-offset:2px;
}

/* Die "Vorher"-Marke sitzt sonst genau unter der Umschaltung -
   gemessen lagen Leiste und Marke bei 745/835 und 748/866
   uebereinander. In Kacheln mit Umschalter rutscht sie darunter. */

.fall-wahl button[aria-selected="true"]{
  background:#fff;
  color:var(--tief);
}
.fall-wahl button:focus-visible{
  outline:2px solid var(--akzent);
  outline-offset:2px;
}

/* Das lange Layout scrollt der Besucher selbst - im Schaukasten
   ist Platz dafuer, und selbst scrollen schlaegt zusehen. */
.fall-rolle{
  max-height:min(68vh, 40rem);
  overflow-y:auto;
  overscroll-behavior-y:contain;
  border-radius:.85rem;
  border:1px solid var(--linie);
  background:#fff;
}
.fall-rolle img{
  display:block;
  width:100%;
  height:auto;
}
.fall-rolle:focus-visible{
  outline:2px solid var(--akzent);
  outline-offset:2px;
}

/* Karussell im Schaukasten: flacher und breiter als in der Kachel,
   dadurch stehen zweieinhalb Beitraege nebeneinander. */
.karussell.im-kasten{
  aspect-ratio:5/2;
  border-radius:.85rem;
}

/* Der Oeffnen-Knopf sieht aus wie der Link daneben, nicht wie
   eine Marke im Bild. Die Marke im Bild wurde fuer ein Etikett
   gehalten - niemand hat darauf geklickt. */
.arbeit-oeffnen{
  border:0;
  padding:0;
  background:none;
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:.28em;
  text-decoration-color:rgba(var(--akzent-kanaele), .38);
}
.arbeit-oeffnen:hover{ text-decoration-color:rgba(var(--akzent-kanaele), .9); }

/* Vergleich direkt in der Kachel: der Rahmen traegt schon Schatten
   und Anheben, die Figur selbst braucht keinen eigenen Abstand. */
.vergleich.in-kachel{ margin:0; }

/* ---------- Schaukasten ---------- */
/* ACHTUNG: display hier setzen macht das hidden-Attribut
   wirkungslos - die eingebaute Regel [hidden]{display:none} hat
   dieselbe Spezifitaet und wird von dieser Regel ueberschrieben.
   Folge war ein unsichtbarer Vorhang ueber der GANZEN Seite, der
   jeden Klick geschluckt hat. Darum die Regel darunter. */
.schau{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:clamp(1rem, 4vw, 3rem);
  background:rgba(29,33,25,.72);
  opacity:0;
  transition:opacity .3s ease;
}
.schau[hidden]{ display:none; }
.schau.offen{ opacity:1; }
.schau-flaeche{
  width:min(72rem, 100%);
  max-height:100%;
  overflow:auto;
  background:var(--grund);
  border-radius:1rem;
  padding:clamp(1rem, 2.4vw, 1.75rem);
  translate:0 1rem;
  transition:translate .35s cubic-bezier(.22,.61,.36,1);
}
.schau.offen .schau-flaeche{ translate:0 0; }
.schau-kopf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.9rem;
}
.schau-titel{
  margin:0;
  font-size:.9375rem;
  font-weight:500;
  color:var(--tinte);
}
.schau-zu{
  flex:none;
  display:grid;
  place-items:center;
  width:2.25rem; height:2.25rem;
  border:1px solid var(--linie);
  border-radius:50%;
  background:transparent;
  color:var(--tinte);
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease;
}
.schau-zu:hover{ border-color:var(--tinte); background:rgba(45,51,40,.05); }
.schau-zu svg{
  width:1rem; height:1rem;
  fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round;
}
.schau-inhalt .vergleich{ margin:0; }

/* Am Telefon randlos. Gemessen war der Kasten dort 343px breit und
   der Vergleich darin 309px - also schmaler als die Kachel, aus der
   er geoeffnet wurde. Ein Schaukasten, der kleiner zeigt als die
   Vorschau, ist sinnlos. Randlos sind es 375px, und die Hoehe
   bekommt den ganzen Bildschirm. */
@media (max-width:640px){
  .schau{ padding:0; }
  .schau-flaeche{
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
    padding:1rem .9rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .schau-kopf{ margin-bottom:1.1rem; }
  .schau-titel{ font-size:.875rem; }

  /* Hochformat statt Querformat. Ein 1,84-Bild ist auf 375px nur
     204px hoch - zu flach, um etwas zu erkennen. Beschnitten auf
     3/4 wird derselbe Ausschnitt gut doppelt so gross gezeigt.
     Beide Haelften werden gleich beschnitten, der Vergleich
     bleibt also fair. 50% 0 haelt die Ueberschrift im Bild. */
  .vergleich-buehne{ aspect-ratio:3/4; }
  .vergleich-buehne img{ object-position:50% 0; }

  /* Hier standen Sonderregeln fuer echte Handy-Aufnahmen von
     I.S.A. tec: die Buehne bekam deren Hochformat 786/1268. In
     der Deck-Karte, die nur 168 px hoch ist, blieb davon ein
     Streifen von 13 Prozent des Bildes uebrig. Auf dem Telefon
     wird jetzt dasselbe gezeigt wie auf dem Laptop. */
  /* picture darf das Bild nicht vom Fuellen abhalten */
  .vergleich-buehne picture{ position:absolute; inset:0; display:block; }
}
/* picture verhaelt sich sonst wie ein inline-Element und bricht
   die absolute Lage der beiden Bildhaelften. */
.vergleich-buehne picture{ position:absolute; inset:0; display:block; }

@media (prefers-reduced-motion:reduce){
  .schau, .schau-flaeche{ transition:none; }
  .arbeit-bild, .arbeit-bild img{ transition:none; }
  .arbeit:hover .arbeit-bild{ transform:none; }
  .arbeit:hover .arbeit-bild img{ scale:1; }
}

/* ---------- Zwischenaufforderung nach den Projekten ---------- */
/* Dunkelgruen statt Blau: der Kontaktabschnitt am Seitenende ist
   blau. Dieselbe Farbe hier wuerde ihn vorwegnehmen und die
   Wirkung am Schluss schwaechen. */
.anstoss{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1.25rem, 3vw, 2.5rem);
  margin:clamp(2.5rem, 4.5vw, 3.75rem) 0 0;
  padding:clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.75rem);
  border-radius:1rem;
  background:var(--moos);
  color:#f3f2ec;
}
.anstoss-wort{ max-width:36rem; }
.anstoss-frage{
  margin:0 0 .4rem;
  font-size:clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight:500;
  letter-spacing:-.01em;
  color:#fff;
}
.anstoss-satz{
  margin:0;
  font-size:.9375rem;
  line-height:1.6;
  color:#dde0d2;
}
/* Der Akzentknopf traegt auf dieser Flaeche nicht: Blau auf
   Dunkelgruen kommt nur auf 1,68:1 Flaechenkontrast, der Knopf
   wuerde mit dem Grund verschwimmen. Darum der helle. */
.anstoss-knopf{
  align-self:center;
  margin-top:0;
  flex:none;
}
.anstoss-knopf svg{
  width:1em; height:1em;
  fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
}

@media (max-width:640px){
  .anstoss{ flex-direction:column; align-items:flex-start; }
  .anstoss-knopf{ align-self:stretch; justify-content:center; }
}

/* ---------- Kleine Kachel aufklappen ---------- */
/* Die drei unteren Kacheln sind 406px breit. Fuer eine Cover-Kachel
   reicht das, fuer terraBlus Newsletter-Vergleich nicht - zwei
   Spalten zu 191px sind nicht lesbar. Auf Wunsch belegt die Kachel
   die ganze Rasterbreite und zeigt alles in 1282px. */
.arbeit.weit{ grid-column:span 6; }

.arbeit-mehr{
  display:flex;
  align-items:center;
  gap:.42rem;
  margin-top:1.05rem;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:.875rem;
  font-weight:500;
  color:var(--akzent);
  cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:.3em;
  text-decoration-color:rgba(var(--akzent-kanaele), .75);
  transition:text-decoration-color .3s ease, gap .3s ease;
}
.arbeit-mehr:hover{
  text-decoration-color:rgba(var(--akzent-kanaele), 1);
  gap:.55rem;
}
.arbeit-mehr svg{
  width:.95em; height:.95em;
  fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
  transition:rotate .3s ease;
}
.arbeit.weit .arbeit-mehr svg{ rotate:180deg; }

.arbeit-fuss{
  margin:clamp(2.5rem, 4.5vw, 3.75rem) 0 0;
  font-size:.9375rem;
  color:var(--text-leise);
}
.arbeit-fuss a{
  margin-left:.6rem;
  color:var(--akzent);
  text-decoration:underline;
  text-underline-offset:.28em;
  text-decoration-color:rgba(var(--akzent-kanaele), .38);
}
.arbeit-fuss a:hover{ text-decoration-color:rgba(var(--akzent-kanaele), .9); }

@media (max-width:900px){
  .arbeit{ grid-column:span 3; }
  .arbeit.gross{ grid-column:span 6; }
}
@media (max-width:620px){
  .arbeit, .arbeit.gross{ grid-column:span 6; }
  .rahmen-flaeche, .arbeit.gross .rahmen-flaeche{ aspect-ratio:16/10; }
}
@media (prefers-reduced-motion:reduce){
  .arbeit-rahmen, .rahmen-flaeche img{ transition:none; }
  .arbeit{ opacity:1 !important; translate:none !important; transition:none; }
  .arbeit:hover .rahmen-flaeche img{ scale:1; }
  .arbeit:hover .arbeit-rahmen,
  .arbeit:focus-within .arbeit-rahmen{ transform:none; }
}

/* ============================================================
   SECTION 06 — PAKETE
   ============================================================ */

.pakete{
  position:relative;
  z-index:6;
  /* Unten mehr Luft: der Ast der naechsten Section ragt bis
     hierher herauf. */
  padding:clamp(4rem, 8vw, 7rem) var(--rand) clamp(7rem, 13vw, 11rem);
  background:var(--grund);
}

.stufen{
  display:grid;
  /* Zwei Karten statt drei. Die Breite muss mit: bei 72rem
     waere jede Karte 36rem breit - eine Textspalte, die
     niemand mehr ueberfliegt. */
  grid-template-columns:repeat(2, 1fr);
  gap:.9rem;
  margin:0;
  padding:0;
  list-style:none;
  max-width:56rem;
  margin-inline:auto;
}

.stufe-karte{
  display:flex;
  flex-direction:column;
  padding:1.75rem 1.75rem 1.6rem;
  border-radius:var(--glas-rund);
  background:#fff;
  border:0;
  box-shadow:var(--tiefe-2);

  opacity:0;
  translate:0 24px;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             translate .7s cubic-bezier(.22,.61,.36,1);
}
.sichtbar .stufe-karte{ opacity:1; translate:0 0; }
.sichtbar .stufe-karte:nth-child(2){ transition-delay:.1s; }
.sichtbar .stufe-karte:nth-child(3){ transition-delay:.2s; }

/* Fuellstand zeigt die Stufe, ohne dass es jemand lesen muss */
/* Der Fortschrittsbalken ist entfallen: er zeigte 33/66/100%
   einer Leiter. Jetzt stehen drei gleichwertige Angebote
   nebeneinander, da gibt es kein "weiter oben". */


/* Fruehere Stufennummer, jetzt ein Etikett: "Projekt" oder
   "Monatlich". Es traegt die Zweiteilung des Angebots - zwei
   Karten sagen Projekt, eine sagt Monatlich. Deshalb als
   Pille, nicht als blosse Zeile: so sieht man die Sorte, ohne
   zu lesen. */
.stufe-art{
  display:inline-block;
  /* Die Karte ist ein Flex-Stapel, und der streckt seine
     Kinder auf volle Breite - inline-block allein genuegt
     dort nicht. Ohne das war die Pille ein Balken ueber die
     ganze Karte. */
  align-self:start;
  margin:0 0 .8rem;
  padding:.28rem .7rem;
  border-radius:999px;
  background:rgba(var(--akzent-kanaele), .09);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--akzent);
}
.stufe-name{
  margin:0 0 .5rem;
  font-weight:500;
  font-size:1.6rem;
  letter-spacing:-.02em;
  color:var(--tinte);
}
.stufe-zweck{
  margin:0 0 1.4rem;
  font-size:.98rem;
  line-height:1.5;
  color:var(--text-leise);
}

.stufe-liste{
  margin:0 0 1.75rem;
  padding:0;
  list-style:none;
  display:grid;
  gap:.7rem;
}
.stufe-liste li{
  position:relative;
  padding-left:1.4rem;
  font-size:.92rem;
  line-height:1.45;
  color:var(--text);
}
.stufe-liste li::before{
  content:"";
  position:absolute;
  left:0; top:.52em;
  width:0.35rem; height:0.35rem;
  border-radius:50%;
  background:var(--akzent);
}

.stufe-preis{
  margin:auto 0 .8rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(60,54,46,.1);
  font-size:1.05rem;
  color:var(--tinte);
}
.stufe-preis em{
  font-style:normal;
  /* Gleiche Groesse wie die Listenpunkte darueber. Vorher .9rem
     und damit 2 % kleiner - ein Unterschied, den man nicht als
     Hierarchie liest, sondern als Unfall. Die Abstufung nach
     unten macht .leiser, und zwar mit 11 % deutlich genug. */
  font-size:.92rem;
  color:var(--text-leise);
}

/* dritte Stufe dunkel: sie ist das Ziel, nicht eine Option */
.stufe-karte.dunkel{
  background:var(--moos);
  border-color:rgba(255,255,255,.07);
}
.stufe-karte.dunkel .stufe-name{ color:#fff; }
.stufe-karte.dunkel .stufe-art,
.stufe-karte.dunkel .stufe-zweck,
/* #9ea497 war auf dem Moosgruen bei 2,98:1 - zu wenig, und
   seit die Preisspanne dort steht, traegt dieser Ton Text,
   den man lesen muss. #c6cdbe ist derselbe kuehle Grauton,
   nur hell genug: gemessen 4,67:1. */
.stufe-karte.dunkel .stufe-preis em{ color:#c6cdbe; }
.stufe-karte.dunkel .stufe-liste li{ color:#dae0d0; }
/* Auf der dunklen Karte stand bisher nur ein Platzhalter im
   leisen Ton. Sobald dort eine echte Zahl steht, braucht sie
   Weiss - var(--tinte) auf Moosgruen waere unlesbar. */
.stufe-karte.dunkel .stufe-preis{
  color:#fff;
  border-top-color:rgba(255,255,255,.16);
}
.stufe-preis strong{ font-weight:600; }
.stufe-preis em{ display:block; margin-top:.15rem; }
/* Der Einstiegspreis steht unter der Spanne, nicht daneben:
   eine Stufe kleiner, damit er informiert statt zu ankern. */
.stufe-preis em.leiser{ font-size:.82rem; margin-top:.3rem; }
.stufe-karte.dunkel .stufe-liste li::before{ background:#cfdfa8; }
.stufe-karte.dunkel .stufe-art{
  background:rgba(255,255,255,.14);
  /* #dfe8d6 kam auf der aufgehellten Pille nur auf 4,20:1 -
     bei 11,5px Versalien zu wenig. Weiss misst 5,32:1. */
  color:#fff;
}
.stufe-karte.dunkel .stufe-preis{ border-top-color:rgba(255,255,255,.14); color:#fff; }

.pakete-fuss{
  max-width:46rem;
  margin:clamp(2rem, 3.5vw, 3rem) auto 0;
  text-align:center;
  font-size:.95rem;
  line-height:1.55;
  color:var(--text-leise);
}

/* ============================================================
   SECTION 07 — FRAGEN
   ============================================================ */

/* ---------- Blaufeld: FAQ und Kontakt teilen sich eine Flaeche ----
   Beide Abschnitte stehen auf derselben Farbe wie die Wand im
   Sesselbild. Dadurch laeuft das Feld durch und das Foto beginnt
   nicht als Bild, sondern als Fortsetzung der Flaeche.
   Unten steht kein Polster mehr zwischen ihnen.
   ------------------------------------------------------------- */
.fragen{
  position:relative;
  z-index:6;
  /* Oben mehr Luft: der Ast liegt auf der Kante und ragt in
     diese Section hinein. Ohne Platz stuende die Headline im
     Geaest. */
  padding:clamp(8rem, 15vw, 13rem) var(--rand) clamp(4rem, 8vw, 7rem);
  background:var(--akzent);
  color:#e8edf7;
}

/* Die Kante selbst aufloesen. Vorher begann das Blau mit einer
   geraden Linie quer durchs Bild - der Ast lag auf einem
   Balken. Jetzt laeuft der Seitengrund von oben ins Blau
   hinein und verliert sich: eine Nebelbank statt einer Kante.
   Erst dadurch sieht es aus, als waere der Ast dort gewachsen
   und nicht daraufgelegt. */
.fragen::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  /* Deutlich laenger und flacher als vorher (9-15rem, Stops bei
     22/48/74%). Ein kurzer Verlauf liest sich noch als Kante,
     nur eine sehr lange Strecke wird zu Dunst. Die Stops
     liegen jetzt hinten dichter, damit das Blau erst spaet
     und dann langsam durchkommt. */
  height:clamp(16rem, 30vw, 26rem);
  background:linear-gradient(to bottom,
    var(--grund) 0%,
    rgba(245,244,240,.97) 14%,
    rgba(245,244,240,.88) 30%,
    rgba(245,244,240,.68) 48%,
    rgba(245,244,240,.42) 66%,
    rgba(245,244,240,.18) 83%,
    rgba(245,244,240,0) 100%);
  z-index:1;
  pointer-events:none;
}
.fragen > *:not(.kante-ast){ position:relative; z-index:2; }

/* Unter 1180px ist fuer den goldenen Schnitt kein Platz - dort
   wuerde das Portraet rechts hinauslaufen. Da bleibt es wie
   bisher an der Kante. */
@media (max-width:1180px){
  /* Unter 1180px ist fuer den goldenen Schnitt kein Platz.
     Gemessen bei 880px begann das Portraet bei 52,6% und lag
     damit 113px ueber der Textspalte - der Pfeil des zweiten
     Knopfes sass auf dem Mund. Drei Aenderungen zusammen:
     weiter nach rechts hinaus, etwas kleiner, und dadurch
     automatisch tiefer, weil die Unterkante stehen bleibt. */
  .portraet{
    left:auto;
    right:clamp(-9rem, -14vw, -1rem);
    height:min(82%, 40rem);
  }
  /* Die Karte haengt am Portraet - also zurueck an den Rand,
     sobald das Portraet dort ist. Gemessen bei 1150px lag
     ihre linke Kante sonst bei 471px, die USP-Zeilen enden
     bei 591px: sie waere ueber dem Text gelegen.
     Nur solange sie absolut liegt: unter 860px steht sie im
     Textfluss, und dort verschob dieses right sie als
     relative Verrueckung um einen Seitenrand nach links -
     sie war das einzige Element der Seite neben der Spalte.
     Diese Regel steht nach dem Mobil-Block, hat also dessen
     right:auto ueberschrieben. */
  .karte{ right:var(--rand); }
  @media (max-width:860px){
    .karte{ right:auto; }
  }
}

/* ---------- Ast auf der Sectionkante ---------- */
/* Gemessen am Entwurf: die Grenze zwischen hell und blau liegt
   bei 51% der Bildhoehe. Genau so weit ragt er nach oben
   heraus - dann waechst das Moos auf der hellen Seite und der
   Stamm taucht ins Blaue. */
.kante-ast{
  position:absolute;
  left:0; right:0;
  top:0;
  width:100%;
  height:auto;
  max-width:none;
  translate:0 -51%;
  z-index:3;
  pointer-events:none;
  /* Keine Maske am Ast selbst: seine Unterkante ist die
     Silhouette, dort endet nichts hart. Eine Blende haette ihn
     nur durchsichtig gemacht, statt ihn ins Blau tauchen zu
     lassen. Der Dunst liegt in der Section, nicht im Ast. */
}
.fragen .kennzeichen{ color:#b8cdee; }
.fragen .kennzeichen span{ color:#dce6f7; }
.fragen-titel{ color:#fff !important; }
.fragen-rest{ color:#bccbe8 !important; }
.fragen-rest a{ color:#fff !important; }

.fragen-liste details{ border-bottom-color:rgba(255,255,255,.22) !important; }
.fragen-liste details:first-child{ border-top-color:rgba(255,255,255,.22) !important; }
.fragen-liste summary{ color:#fff !important; }
.fragen-liste summary:hover{ color:#bcd0f0 !important; }
.fragen-liste details p{ color:#c6d3ec !important; }

.fragen-raster{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
  max-width:68rem;
  margin:0 auto;
}

.fragen-kopf{ position:sticky; top:2.5rem; }
.fragen-titel{
  margin:0 0 1.25rem;
  font-weight:500;
  font-size:clamp(1.8rem, 3.6vw, 2.75rem);
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--tinte);
}
.fragen-rest{ margin:0; font-size:.95rem; line-height:1.55; color:var(--text-leise); }
.fragen-rest a{ color:var(--akzent); font-weight:500; text-underline-offset:.25em; }

.fragen-liste details{
  border-bottom:1px solid var(--linie);
}
.fragen-liste details:first-child{ border-top:1px solid var(--linie); }

.fragen-liste summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.15rem 0;
  cursor:pointer;
  font-size:1.05rem;
  font-weight:500;
  line-height:1.4;
  color:var(--tinte);
  list-style:none;
  transition:color .2s ease;
}
.fragen-liste summary::-webkit-details-marker{ display:none; }
.fragen-liste summary:hover{ color:var(--akzent); }

/* Plus, das beim Aufklappen zum Minus wird */
.fragen-liste summary::after{
  content:"";
  flex:none;
  width:1rem; height:1rem;
  margin-top:.3rem;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transition:rotate .3s cubic-bezier(.22,.61,.36,1);
}
/* Aufgeklappt bleibt nur der waagrechte Strich. Die halbe
   Drehung ist reine Bewegung - 180 Grad sehen am Ende gleich
   aus, 90 Grad haetten den Strich senkrecht gestellt. */
.fragen-liste details[open] summary::after{
  rotate:180deg;
  background:linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat;
}

.fragen-liste details p{
  margin:0;
  padding:0 2.5rem 1.4rem 0;
  font-size:.98rem;
  line-height:1.6;
  color:var(--text-leise);
}

/* ---------- schmal ----------------------------------------- */

@media (max-width:900px){
  .stufen{ grid-template-columns:1fr; gap:.75rem; }
  .fragen-raster{ grid-template-columns:1fr; gap:2rem; }
  .fragen-kopf{ position:static; }
}

@media (prefers-reduced-motion:reduce){
  .stufe-karte{ opacity:1 !important; translate:none !important; }
}

/* ============================================================
   SECTION — UEBER MICH
   ------------------------------------------------------------
   Die einzige Stelle ohne Karte und ohne Raster. Das Bild
   bricht links aus dem Textmass aus, die Form ist weich. Beides
   mit Absicht: eine Seite, die nur aus Rechtecken besteht,
   wirkt statisch, egal wie gut die Inhalte sind.
   ============================================================ */

.ueber{
  position:relative;
  z-index:6;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  align-items:center;
  gap:clamp(2rem, 6vw, 6rem);
  /* Die Sektion bleibt randlos, damit Hintergrund und overflow:clip
     weiter ueber die ganze Breite greifen. Der INHALT wird ueber das
     Polster auf 60rem zentriert - dieselbe Breite wie die
     Abschnittskoepfe von "Meine Kundenprojekte" darueber und
     "Dauerhaft begleiten" darunter. Vorher lief das Raster bis an
     den aeusseren Rand: bei 1440 px begann das Bild bei 79 px, die
     Ueberschriften darueber und darunter aber erst bei 240. */
  padding-block:clamp(4rem, 9vw, 8rem);
  padding-inline:max(var(--rand), calc((100% - 60rem) / 2));
  background:var(--grund);
  /* die weiche Form ragt bewusst ueber ihr Feld hinaus -
     ohne das hier scrollt die Seite waagrecht */
  overflow:clip;
}

/* ---------- Bildseite: zwei versetzte Karten -----------------
   Aufbau aus dem Canva-Entwurf: Portraet oben links, zweites Bild
   nach rechts unten versetzt dahinter, davor eine schwebende
   Beschriftung. Die Versetzung erzeugt die Tiefe.
   ------------------------------------------------------------- */
/* Links eine einzige Bildkarte mit Namensschild. Vorher lagen
   hier zwei versetzte Bilder und eine schwebende Karte mit der
   Ueberschrift "Monitoring" - die gehoert zu den Leistungen,
   nicht zu einer Vorstellung. */
.ueber-bild{
  position:relative;
  /* Nicht mehr strecken. Vorher wuchs die Fotokarte auf die
     volle Hoehe der Textspalte mit - sie war damit so gross
     wie der Text daneben und dominierte die Section. Jetzt
     bestimmt das Bild seine eigene Groesse und steht mittig
     in seiner Spalte. */
  align-self:center;
  display:flex;
  /* Linksbuendig, nicht mittig: so steht die Fotokante auf
     derselben Linie wie jede andere Section der Seite. Mittig
     waere sie um den halben Spaltenrest eingerueckt und
     braeche die senkrechte Kante des Layouts. */
  justify-content:flex-start;
}
.ueber-bild figure{ margin:0; width:min(100%, 29rem); }

.person{
  position:relative;
  border-radius:1.6rem;
  overflow:hidden;
  box-shadow:0 2rem 4rem -1.75rem rgba(45,51,40,.3);
}
/* 4:5 statt "so hoch wie der Text daneben". Das ist ein
   Portraetformat, das Bild verliert dadurch weniger an den
   Seiten - und die Datei muss nicht mehr hochgerechnet werden. */
.person{ aspect-ratio:4/5; }
.person img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
}

/* Das Schild liegt im Bild, nicht darunter - so bleibt der
   Name beim Gesicht, statt zu einer Bildunterschrift zu
   werden. Eigener dunkler Grund, damit er auf jedem Foto
   lesbar ist und nicht vom Motiv abhaengt. */
.person-schild{
  position:absolute;
  left:1rem; right:1rem; bottom:1rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding:.85rem 1.1rem;
  border-radius:var(--glas-rund);
  /* Dunkles Glas: der Schliff liegt ueber dem dunklen Ton,
     darum als Verlauf statt als background-color - sonst waere
     der Ton eine eigene Ebene unter allen Hintergrundbildern. */
  background:
    var(--schliff),
    linear-gradient(rgba(26,32,24,.72), rgba(26,32,24,.72));
  background-size:var(--schliff-groessen), auto;
  background-position:var(--schliff-lagen), 0 0;
  -webkit-backdrop-filter:var(--glas-blur);
          backdrop-filter:var(--glas-blur);
  box-shadow:var(--glas-kante);
}
.person-name{
  font-size:1.02rem;
  font-weight:600;
  color:#fff;
}
.person-rolle{
  font-size:.82rem;
  color:#dfe3d8;
}

/* Drei Karten statt drei Absaetze. Dieselben Saetze, nur so
   gesetzt, dass man sie ueberfliegen kann. */
.ueber-karten{
  display:grid;
  gap:.7rem;
  margin:1.75rem 0 0;
  padding:0;
  list-style:none;
}
.ueber-karte{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.3rem .9rem;
  padding:1rem 1.15rem;
  border-radius:1.25rem;
  background:#fff;
  border:0;
  box-shadow:var(--tiefe-1);
}
.karte-zeichen{
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:2.1rem; height:2.1rem;
  border-radius:.65rem;
  background:rgba(var(--akzent-kanaele), .08);
}
.karte-zeichen svg{
  width:1.1rem; height:1.1rem;
  fill:none; stroke:var(--akzent); stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}
.ueber-karte h3{
  margin:0;
  align-self:center;
  font-size:1rem;
  font-weight:600;
  color:var(--tinte);
}
.ueber-karte p{
  margin:.1rem 0 0;
  font-size:.9rem;
  line-height:1.55;
  color:var(--text);
}

.ueber-akt{ margin:1.75rem 0 0; }

.ueber-marken{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:1.6rem 0 1.75rem;
  padding:0; list-style:none;
}
.ueber-marken li{
  padding:.4rem .9rem;
  border-radius:999px;
  background:#d9ddc8;
  font-size:.82rem; font-weight:500;
  color:#43502f;
}

/* sehr langsames Wandern der Form - organisch, aber nichts,
   das beim Lesen stoert */
@keyframes atmen{
  0%,100%{ border-radius:46% 54% 62% 38% / 52% 44% 56% 48%; }
  50%    { border-radius:58% 42% 44% 56% / 44% 58% 42% 56%; }
}

.ueber-wort{ max-width:36rem; }

.ueber-titel{
  margin:0 0 1.5rem;
  font-weight:500;
  font-size:clamp(1.75rem, 3.2vw, 2.5rem);
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--tinte);
}

.ueber-absatz{
  margin:0 0 1.15rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--text-leise);
}
.ueber-absatz.gross{
  font-size:clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height:1.6;
  color:var(--text);
}
.ueber-absatz em{ font-style:italic; color:var(--text); }

.ueber-fakten{
  margin:1.9rem 0 0;
  font-size:.88rem;
  letter-spacing:.02em;
  color:var(--text-leise);
}
.ueber-fakten span{ color:var(--linie); margin:0 .35rem; }

.ueber-signatur{
  margin:1.1rem 0 0;
  font-weight:500;
  font-size:1.9rem;
  line-height:1.2;
  color:var(--tinte);
}

@media (max-width:860px){
  .ueber{
    grid-template-columns:1fr;
    gap:2.5rem;
    padding-top:clamp(3rem, 8vw, 5rem);
  }
  /* Querformat statt Hochformat. Im Hochformat (4:5) war die
     Fotokarte auf dem Telefon 334 x 417 und damit fast ein
     halber Bildschirm, bevor ueberhaupt ein Wort kam. Quer
     zeigt sie dasselbe Gesicht auf halber Hoehe. */
  .person{ aspect-ratio:3/2; }
  .person img{ object-position:center 18%; }

  .ueber-bild{
    margin-left:0;
    max-width:22rem;
    /* Kein eigenes Seitenverhaeltnis mehr: das setzt jetzt die
       Karte selbst (4:5). Stand es hier, streckte der Flex-
       Container die Karte auf 1:1,15 und das Format sprang
       zwischen Telefon und Rechner. */
  }
  .ueber-wort{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  .blase, .ueber-bild img{ animation:none; }
}


/* ============================================================
   SECTION — LEISTUNGEN
   Liste links, Tafel rechts. Die Tafeln liegen im selben
   Rasterfeld uebereinander: dadurch richtet sich die Hoehe
   nach der groessten und nichts springt beim Wechseln.
   ============================================================ */

.leistungen{
  position:relative;
  z-index:6;
  overflow:clip;
  isolation:isolate;
  padding:clamp(5rem, 10vw, 8.5rem) var(--rand);
  /* Unter der Tafel braucht die Steinplatte Platz, sonst
     schneidet der Rand der Section sie weg und die Tafel
     schwebt vor einem Splitter statt auf einem Sockel. */
  padding-bottom:clamp(12rem, 22vw, 20rem);
}

/* ---------- Grund: Steinsockel ----------
   Die Tafel liegt mit ihrer unteren Haelfte ueber der Platte,
   die Vorderkante und der Schatten des Steins bleiben darunter
   sichtbar - dadurch scheint die Tafel auf dem Stein zu
   schweben, statt auf einer Flaeche zu kleben. */

.stein{
  position:absolute;
  z-index:-2;
  /* Gerechnet, nicht geschaetzt: die Platte nimmt 45% der
     Bildbreite ein und sitzt bei 69,5% davon. Damit sie breiter
     ist als die Tafel - nur dann kommen Vorderkante und
     Schatten unter der Tafel hervor - muss das Bild etwa 143%
     der Sectionbreite haben und rechts hinauslaufen. */
  width:143%;
  height:auto;
  right:-13.5%;
  /* tief genug, dass die Tafel mit ihrer Unterkante ueber der
     Platte endet und nicht mitten darin steckt - erst dann
     schwebt sie darauf, statt davor zu haengen */
  bottom:-5%;
  max-width:none;
  /* Das Bild hat einen eigenen beigen Grund. Ohne Maske stuende
     dort ein Rechteck im Seitengrund. */
  -webkit-mask-image:radial-gradient(58% 70% at 69% 74%,
    #000 40%, rgba(0,0,0,.6) 68%, transparent 92%);
          mask-image:radial-gradient(58% 70% at 69% 74%,
    #000 40%, rgba(0,0,0,.6) 68%, transparent 92%);
  pointer-events:none;
}

/* Links muss Text stehen koennen. Kein flaechiger Schleier,
   sondern ein Verlauf: links deckt der Seitengrund, nach rechts
   gibt er den Stein frei. */
.leistungen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    /* weiche Unterkante: sonst schneidet der Rand der Section
       den Stein als harte Linie ab */
    linear-gradient(to top,
      var(--grund) 0%, rgba(245,244,240,0) 14%),
    linear-gradient(to right,
      var(--grund) 0%, rgba(245,244,240,.88) 24%,
      rgba(245,244,240,.42) 46%, rgba(245,244,240,0) 64%);
  pointer-events:none;
}

/* Drei Zeilen statt zweier Spalten mit Inhalt: Kopf, Liste und
   Knopf links, die Tafel rechts ab Zeile zwei. Dadurch beginnt
   die Tafel automatisch auf Hoehe der ersten Listenzeile - bei
   jeder Fensterbreite, ohne gesetzten Abstand. */
.leistungen-raster{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows:auto auto auto;
  column-gap:clamp(2rem, 5vw, 5rem);
  row-gap:0;
  align-items:start;
  max-width:72rem;
  margin:0 auto;
}

.leistungen-kopf{ grid-column:1; grid-row:1; }
.leistungen-raster > .wahl{ grid-column:1; grid-row:2; }
.leistungen-raster > .btn{ grid-column:1; grid-row:3; justify-self:start; }
/* Optische statt mathematischer Ausrichtung: die Karte hat
   2.4rem Innenabstand, die Listenzeile nur 1.1rem. Lagen die
   Kanten gleich auf, begann der Inhalt der Karte sichtbar
   tiefer. Der negative Abstand gleicht genau diese Differenz
   aus - dann liegen Symbol und erste Listenzeile auf einer
   Linie, bei jeder Fensterbreite. */
.tafeln{
  grid-column:2;
  grid-row:2 / span 2;
  margin-top:calc(-1 * (clamp(1.6rem, 3vw, 2.4rem) - 1.1rem));
}

.leistungen-titel{
  margin:0 0 clamp(2rem, 4vw, 3rem);
  font-weight:500;
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--tinte);
}
.leistungen-titel em{
  font-style:italic;
  color:var(--akzent);
}


/* ---------- die Auswahl links ----------------------------- */

.wahl{ margin:0 0 2.25rem; padding:0; list-style:none; }
.wahl li + li{ border-top:1px solid var(--linie); }
.wahl li:first-child{ border-top:1px solid var(--linie); }
.wahl li:last-child{ border-bottom:1px solid var(--linie); }

.wahl button{
  display:flex;
  align-items:center;
  gap:.9rem;
  width:100%;
  padding:1.1rem 0;
  border:0;
  background:none;
  font:inherit;
  text-align:left;
  cursor:pointer;
  color:var(--text-leise);
  transition:color .25s ease;
}
.wahl button:hover{ color:var(--tinte); }

.wahl .nr{
  font-weight:400;
  font-size:1.05rem;
  font-variant-numeric:tabular-nums;
  line-height:1;
  color:var(--linie);
  flex:none;
  transition:color .25s ease;
}
/* Zweck statt nur Name: die Liste sagt sonst, WAS ich tue, aber
   nie, WOFUER. Die Zeilen zusammen ergeben den Weg - verstehen,
   finden, kaufen, wiederkommen. */
.wahl .wofuer{
  display:block;
  margin-top:.25rem;
  font-size:.875rem;
  font-weight:400;
  letter-spacing:0;
  line-height:1.35;
  color:var(--text-leise);
}
.wahl button[aria-selected="true"] .wofuer{ color:var(--text); }

.wahl .was{
  flex:1;
  font-size:clamp(1.05rem, 1rem + .35vw, 1.35rem);
  font-weight:500;
  letter-spacing:-.015em;
}

.wahl .pfeil{
  flex:none;
  width:var(--pfeil-kreis); height:var(--pfeil-kreis);
  padding:.4rem;
  border-radius:50%;
  background:var(--akzent);
  fill:none;
  stroke:#fff;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  scale:.7;
  transition:opacity .25s ease, scale .25s cubic-bezier(.22,.61,.36,1);
}

/* gewaehlter Eintrag */
.wahl [aria-selected="true"]{ color:var(--tinte); }
.wahl [aria-selected="true"] .nr{ color:var(--akzent); }
.wahl [aria-selected="true"] .pfeil{ opacity:1; scale:1; }


/* ---------- die Tafeln rechts ------------------------------ */

/* Die Tafel neigt sich zur Maus wie die Karte im Kontakt.
   Die Neigung sitzt am Behaelter, nicht an den einzelnen
   Tafeln: die liegen uebereinander im selben Rasterfeld, und
   drei eigene Perspektiven wuerden beim Wechseln springen. */
.tafeln{
  display:grid;
  position:relative;
  /* Die Hoehe setzt das Inline-Script auf die sichtbare Tafel.
     Ohne Uebergang wuerde die Karte beim Umschalten springen. */
  transition:height .38s cubic-bezier(.22,.61,.36,1),
             transform .45s cubic-bezier(.22,.61,.36,1);
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
}
.tafeln.greift{ transition:height .38s cubic-bezier(.22,.61,.36,1), transform .12s linear; }

.tafel{
  position:relative;
  grid-area:1/1;
  padding:clamp(1.6rem, 3vw, 2.4rem);
  border-radius:var(--glas-rund);

  /* Glas wie in der Vorlage: sehr starke Unschaerfe, hohe
     Saettigung. Dadurch schmilzt das Holz dahinter zu weichen
     Farbfeldern, statt nur milchig zu werden - genau das
     unterscheidet Glas von Milchplastik.
     Der Verlauf ist oben links dichter (dort beginnt der Text)
     und unten rechts offener (dort liegt die Skulptur). */
  background:
    var(--schliff),

    linear-gradient(152deg,
      rgba(255,255,255,.86) 0%,
      rgba(253,253,250,.70) 46%,
      rgba(248,250,243,.56) 100%);
  background-size:var(--schliff-groessen), auto;
  background-position:var(--schliff-lagen), 0 0;
  -webkit-backdrop-filter:var(--glas-blur);
          backdrop-filter:var(--glas-blur);
  box-shadow:
    0 2.5rem 5rem -1.75rem rgba(45,51,40,.34),
    0 .5rem 1.25rem -.75rem rgba(45,51,40,.12),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35);
  transition:box-shadow .45s ease, background-position .5s ease;
}
/* Beim Darueberfahren folgt der Schimmer der Maus direkt -
   mit der langen Kurve wuerde er hinterherhinken. */
.tafeln.greift .tafel{ transition:box-shadow .45s ease, background-position .1s linear; }
/* Beim Darueberfahren hebt sie weiter ab - der Schatten faellt
   tiefer auf den Stein. */
.tafeln.greift .tafel{
  box-shadow:
    0 3.4rem 6rem -1.75rem rgba(45,51,40,.46),
    0 .75rem 1.5rem -.75rem rgba(45,51,40,.16),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35);
}

/* Lichtkante: oben links hell, unten rechts matt. Ein normaler
   border kann das nicht, darum ein Rahmen aus Verlauf, aus dem
   die Mitte ausgestanzt wird.

   Das ist die Kante ALLER Glasflaechen, nicht nur der Tafel.
   Vorher hatte jede ihre eigene: Tafel diesen Verlauf, Hero-
   Karte eine weisse Linie mit 0,75, Kontakt-Karte 0,6,
   Namensschild 0,14. Vier Kanten fuer ein Material. Echtes
   Glas hat eine helle und eine matte Seite - eine gleichmaessig
   helle Linie ringsum sieht nach Kunststoff aus. */
.tafel::after,
.karte::after,
.kontakt-karte::after,
.person-schild::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg,
    rgba(255,255,255,.95), rgba(255,255,255,.3) 40%,
    rgba(90,80,70,.12) 66%, rgba(255,255,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
/* Auf dunklem Glas muss dieselbe Kante schwaecher laufen,
   sonst leuchtet sie wie eine Leuchtstoffroehre auf dem Foto. */
.person-schild::after{ opacity:.55; }
/* ACHTUNG: hier stand einmal
     .karte, .kontakt-karte, .person-schild{ position:relative; }
   um einen Bezugsrahmen fuer inset:0 zu schaffen. Das war
   falsch und hat Hero-Karte und Namensschild aus ihrer
   absoluten Lage geworfen - beide waren danach im Textfluss.
   Noetig ist die Zeile ohnehin nicht: absolute positioniert
   genauso einen Bezugsrahmen wie relative, und die
   Kontakt-Karte hat durch ihr transform schon einen. */
/* ausgeblendete Tafeln bleiben im Raster stehen, damit die
   Hoehe nicht springt - sie sind nur unsichtbar und nicht
   bedienbar */
/* Versteckte Tafeln lagen weiter im Raster und haben die Zeile
   auf die hoechste aufgeblaeht - E-Mail-Marketing hatte dadurch
   308 px Luft unten, gemessen. Absolut gesetzt zaehlen sie bei
   der Hoehe nicht mehr mit, bleiben aber genau uebereinander, der
   Uebergang sieht also unveraendert aus. */
.tafel[hidden]{
  display:block;
  visibility:hidden;
  pointer-events:none;
  position:absolute;
  inset:0;
}
.tafel.an{ animation:tafel-ein .45s cubic-bezier(.22,.61,.36,1); }

@keyframes tafel-ein{
  from{ opacity:0; translate:0 .6rem; }
}

.tafel-zeichen{
  display:grid;
  place-items:center;
  width:2.9rem; height:2.9rem;
  margin-bottom:1.4rem;
  border-radius:.9rem;
  background:rgba(var(--akzent-kanaele), .08);
}
.tafel-zeichen svg{
  width:1.5rem; height:1.5rem;
  fill:none;
  stroke:var(--akzent);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tafel-text{
  margin:0 0 1.5rem;
  max-width:42ch;
  font-size:1.02rem;
  line-height:1.6;
  color:var(--text);
}

.tafel-liste{
  margin:0;
  padding:0;
  list-style:none;
  /* Mehrspaltensatz statt Grid. Ein Grid richtet Zeilen aus -
     jede Zeile wird so hoch wie ihr laengster Eintrag. Bei
     einer Liste, in der nichts paarweise zusammengehoert,
     sind das nur Loecher: gemessen 10 bis 29 Prozent der
     Listenhoehe, beim E-Mail-Marketing 91 von 316 px.
     Mehrspaltensatz laesst die Eintraege fliessen und
     dicht packen. Reihenfolge wird dadurch spaltenweise
     statt zeilenweise - fuer eine Liste die natuerlichere
     Lesart, und die Vorlesereihenfolge aendert sich nicht.
     Die Spaltenbreite uebernimmt, was vorher auto-fit tat:
     unter 11rem bleibt eine Spalte. */
  columns:11rem 2;
  column-gap:1.5rem;
}
.tafel-liste li{
  position:relative;
  /* Ein Eintrag darf nicht ueber den Spaltenumbruch zerreissen */
  break-inside:avoid;
  margin-bottom:.65rem;
  padding-left:1rem;
  font-size:.94rem;
  /* Nicht --text-leise: auf dem Glas ueber dem Stein misst das
     nur 3,67:1. Seit die Facetten schwaecher sind, scheint der
     Stein staerker durch - dieser Ton haelt 4,83:1. */
  color:#595c51;
}
.tafel-liste li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:0.20rem; height:0.20rem;
  border-radius:50%;
  background:var(--akzent);
}

.tafel-einzeln{
  margin:1.4rem 0 0;
  padding:.6rem .9rem;
  border-radius:.7rem;
  background:rgba(var(--akzent-kanaele), .07);
  font-size:.88rem;
  color:var(--akzent);
}

.tafel-dauer{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:1.5rem 0 0;
  padding-top:1.2rem;
  border-top:1px solid rgba(60,54,46,.1);
  font-size:.88rem;
  color:#595c51;      /* siehe .tafel-liste li */
}
.tafel-dauer svg{
  width:1.05rem; height:1.05rem;
  fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}


/* ---------- schmal ----------------------------------------- */

@media (max-width:900px){
  /* Schmal steht die Tafel unter der Liste, nicht daneben.
     Also wandern die Farbfelder nach unten und der ruhige
     Grund legt sich oben ueber die Liste statt links. */
  /* Schmal steht die Tafel unter der Liste. Der Stein wandert
     mit nach unten, der ruhige Grund legt sich oben ueber die
     Liste statt links daneben. */
  .stein{ width:240%; right:-23%; bottom:1%; }
  .leistungen::after{
    background:
      linear-gradient(to top,
        var(--grund) 0%, rgba(245,244,240,0) 10%),
      linear-gradient(to bottom,
        var(--grund) 0%, rgba(245,244,240,.88) 30%,
        rgba(245,244,240,.30) 52%, rgba(245,244,240,0) 66%);
  }

  .leistungen-raster{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    row-gap:1.75rem;
  }
  /* schmal wieder einfach untereinander */
  .leistungen-kopf,
  .leistungen-raster > .wahl,
  .leistungen-raster > .btn,
  .tafeln{ grid-column:1; grid-row:auto; }
  .leistungen-wort .btn{ display:none; }   /* der Weg zu den Paketen folgt ohnehin gleich */
  .wahl{ margin-bottom:1.5rem; }
  .wahl button{ padding:.95rem 0; }
}

@media (prefers-reduced-motion:reduce){
  .tafel.an{ animation:none; }
  .wahl .pfeil{ transition:none; }
}


/* ============================================================
   SCHMAL: DER MOOSFELSEN MUSS SICH ZURUECKNEHMEN
   Breit haengt er ueber die Ecke der Kachel. Schmal ist dafuer
   kein Platz: gemessen ragte er 23px ueber den Bildschirmrand
   und lag ueber zwei Hakenzeilen und dem Knopf. Also kleiner,
   kein Ueberhang nach rechts, und die Kachel bekommt unten
   Luft, damit er neben dem Knopf steht statt darauf.
   ============================================================ */

/* Unter 900px laeuft die dunkle Kachel ueber die ganze Breite.
   Dann steht rechts neben dem Text viel Platz leer - gemessen
   endet die laengste Hakenzeile bei 433px auf 863px Breite.
   Der Felsen rueckt dorthin, also nach links ueber die Kachel
   "Jahre Erfahrung", statt rechts hinauszuhaengen. */
@media (max-width:900px){
  .fels{
    right:4.75rem;
    bottom:-8.5rem;
    width:clamp(9rem, 17vw, 11rem);
  }
}

@media (max-width:620px){
  .kachel-dunkel{ padding-bottom:7rem; }
  .fels{
    right:-.5rem;
    bottom:-1rem;
    width:7.5rem;
  }
}


/* ============================================================
   EINSPALTIG: RASTERZEILEN WIEDER AUFLOESEN
   Nebeneinander sorgt subgrid dafuer, dass die Projektnamen
   einer Reihe auf gleicher Hoehe stehen - auch wenn nur eine
   Kachel einen Umschalter hat. Untereinander gibt es nichts
   auszurichten: dort waere die leere Umschalter-Zeile nur eine
   Luecke von 49px zwischen Bild und Name.
   ============================================================ */

@media (max-width:620px){
  .arbeit{ display:block; }
}


/* ============================================================
   TESTABSCHNITT — PROJEKTSTAPEL
   Eine Karte vorn, die anderen gestaffelt dahinter. Die Lage
   jeder Karte kommt aus --v: 0 ist vorn, -1 und +1 liegen
   daneben, alles weiter weg wird ausgeblendet. Dadurch braucht
   das Skript nur eine Zahl zu setzen, den Rest rechnet das
   Stylesheet - so bleibt die Bewegung in einer Hand.
   ============================================================ */

.probe{
  position:relative;
  z-index:6;
  padding:clamp(3rem, 6vw, 5rem) var(--rand) clamp(4rem, 8vw, 7rem);
  background:var(--grund);
  text-align:center;
  /* Die Nachbarkarten liegen bei 56% Versatz und ragten
     gemessen 797px ueber den Seitenrand - ohne das liesse
     sich die Seite seitwaerts schieben. */
  overflow:clip;
}
.probe-hinweis{
  margin:0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-leise);
}

.deck{
  position:relative;
  margin:0 auto;
  max-width:66rem;
}
/* Alle Karten liegen im selben Rasterfeld uebereinander. Dadurch
   bestimmt die hoechste Karte die Hoehe des Stapels - keine
   feste Hoehe, die das Bild beschneiden koennte. */
.deck-liste{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}

.deck-karte{
  grid-area:1/1;
  margin:0 auto;
  width:100%;
  /* Bild oben ueber die volle Breite, Text darunter. Nebeneinander
     war die Bildzelle 0,87:1 - bei Screenshots von 1,84:1 fielen
     gemessen 53% weg. Website-Aufnahmen sind quer, sie brauchen
     die ganze Breite. */
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto;
  overflow:hidden;
  border-radius:var(--glas-rund);
  background:#fff;
  border:0;
  text-align:left;

  /* Abstand nach aussen, Verkleinerung und Deckkraft haengen
     alle an derselben Zahl. */
  --weg:calc(var(--v) * 62%);
  --klein:calc(1 - (var(--v) * var(--v)) * .07);
  translate:var(--weg) 0;
  scale:var(--klein);
  z-index:calc(10 - max(var(--v), calc(0 - var(--v))));
  opacity:1;
  box-shadow:0 2rem 4rem -1.75rem rgba(45,51,40,.26);
  transition:translate .55s cubic-bezier(.22,.61,.36,1),
             scale .55s cubic-bezier(.22,.61,.36,1),
             opacity .45s ease;
}
/* Alles jenseits der direkten Nachbarn verschwindet - sonst
   staffeln sich sechs Karten zu einem Faecher. */
.deck-karte[data-fern]{ opacity:0; pointer-events:none; }
.deck-karte[data-neben]{ opacity:.55; }
.deck-karte[data-neben] .deck-wort{ opacity:.4; }

/* 16:9. Deine Aufnahmen liegen zwischen 1,79 und 1,88 - bei
   diesem Rahmen fallen hoechstens 5,3% weg statt 53%. */
.deck-bild{
  overflow:hidden;
  background:#f3f2ec;
  aspect-ratio:16/9;
}
.deck-bild img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
}
.deck-wort{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:clamp(1.5rem, 3vw, 2.5rem);
  transition:opacity .45s ease;
}
.deck-branche{
  margin:0;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-leise);
}
.deck-name{
  margin:0;
  font-size:clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--tinte);
}
.deck-was{
  margin:.2rem 0 0;
  font-size:.95rem;
  line-height:1.55;
  color:var(--text);
}

/* ---- Steuerung unter der Karte ---- */
/* Pfeile und Fortschritt in einer Zeile. Im Bild sassen die
   Pfeile auf 416px, die Bildmitte liegt bei 297 und der
   Reglergriff bei 319 - sie waren also weder auf dem Bild
   zentriert noch frei vom Regler. */
.deck-steuerung{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  margin-top:clamp(1.5rem, 2.5vw, 2.25rem);
}

.deck-pfeil{
  display:grid;
  place-items:center;
  flex:none;
  /* Eine Familie, zwei Toene: helles Glas auf Papier, dunkles
     Glas auf Bildern. Blau gefuellt war zwar zusammenhaengend,
     las sich aber technisch - Glas passt zum Stein, zum Moos
     und zu den Tafeln. */
  width:2.6rem; height:2.6rem;
  border-radius:50%;
  border:1px solid rgba(45,51,40,.12);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:var(--knopf-blur);
          backdrop-filter:var(--knopf-blur);
  box-shadow:0 .6rem 1.4rem -.6rem rgba(45,51,40,.26);
  cursor:pointer;
  transition:background .2s ease, scale .2s ease;
}
.deck-pfeil:hover{
  background:rgba(255,255,255,.95);
  scale:1.07;
}
.deck-pfeil svg{
  width:1rem; height:1rem;
  fill:none; stroke:var(--tinte); stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Eine durchgehende Linie statt einzelner Punkte oder Striche.
   Darauf wandert ein heller Balken - dadurch sieht man die
   Stelle im Ganzen, nicht nur die Nummer. Zahlen braucht es
   dafuer keine: die Lage des Balkens sagt dasselbe. */
.deck-linie{
  position:relative;
  display:flex;
  width:min(24rem, 52vw);
  height:1px;
  background:color-mix(in srgb, var(--tinte) 16%, transparent);
}
.deck-lauf{
  position:absolute;
  left:0; top:50%;
  width:calc(100% / var(--anzahl, 6));
  height:2px;
  translate:calc(var(--i) * 100%) -50%;
  background:var(--akzent);
  transition:translate .55s cubic-bezier(.22,.61,.36,1);
}
/* Unsichtbare Trefferflaechen ueber der Linie - anklickbar,
   mit der Tastatur erreichbar, aber nichts zu sehen. */
.deck-linie button{
  position:relative;
  flex:1;
  height:1.6rem;
  margin-top:-.8rem;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.deck-linie button:focus-visible{
  outline:2px solid var(--akzent);
  outline-offset:2px;
}

.deck-knopf{ margin-top:clamp(4.5rem, 7vw, 5.5rem); }

@media (max-width:760px){
  /* Frueher wurde das Deck hier aufgeloest: sechs Karten
     untereinander, Steuerung aus. Das waren gemessen 2774 px
     statt 610, also 3,8 Bildschirme fuer eine Section.

     Der Stapel bleibt jetzt auch schmal ein Stapel. Wischen ist
     auf dem Telefon die natuerlichere Geste als auf dem Laptop,
     die Nachbarkarten lugen links und rechts hervor und zeigen,
     dass es weitergeht, und die Lauflinie sagt, wo man ist. */
  .deck{ height:auto; }
  .deck-bild{ aspect-ratio:16/9; }  /* wie auf dem Laptop */

  /* Fingerkuppen brauchen 44 px. Gemessen waren die Pfeile
     42 und die Sprungmarken auf der Linie 33 x 26. */
  .deck-pfeil{ min-width:44px; min-height:44px; }
  .deck-linie button{ min-height:44px; }
}


/* ---- Echte Projektinhalte in den Stapelkarten ----
   Die Medien kommen unveraendert aus dem Raster. Hier nur,
   was sich im Stapel anders verhalten muss: der Rahmen fuellt
   die Zelle statt sein Seitenverhaeltnis zu behalten, und er
   bringt keinen eigenen Rand mit - die Karte hat schon einen. */
/* ACHTUNG: .deck-bild selbst darf hier NICHT stehen - es traegt
   das Seitenverhaeltnis 16:9. Mit height:100% in einer Zeile
   mit automatischer Hoehe kollabiert es auf wenige Pixel. */
.deck-bild .arbeit-rahmen,
.deck-bild .fall,
.deck-bild .fall-ansicht,
.deck-bild .arbeit-bild,
.deck-bild figure{
  height:100%;
  margin:0;
  aspect-ratio:auto;
  border-radius:0;
  border:0;
  box-shadow:none;
}
.deck-bild .arbeit-rahmen{ display:flex; flex-direction:column; }
.deck-bild .vergleich-buehne{ flex:1; min-height:0; }
.deck-bild .arbeit-bild.lang{ flex:1; min-height:0; }
.deck-bild .karussell{ height:100%; }

/* Der Umschalter sitzt jetzt im Textteil, nicht im Bild. */
.deck-wort .fall-wahl{ margin:1.1rem 0 0; }

/* Nur die vorderste Karte darf bedient werden - sonst zieht
   ein Regler in einer halb sichtbaren Karte die Maus an.
   Die Grenze bei 761 px ist weg, seit das Deck auch schmal ein
   Stapel ist: dort gibt es ebenfalls nur eine vorderste Karte,
   und ein Vorher-Nachher-Regler in einer halb sichtbaren
   Nachbarkarte wuerde die Wischgeste abfangen. */
.deck-karte[data-neben] .arbeit-rahmen,
.deck-karte[data-fern] .arbeit-rahmen,
.deck-karte[data-neben] .fall,
.deck-karte[data-fern] .fall{ pointer-events:none; }


/* ---- Instagram im Stapel: Kacheln, keine Vollbilder ----
   Im 16:9-Rahmen fuellte ein quadratischer Post die ganze
   Hoehe - 593px hoch, also passten nur 1,8 nebeneinander. Das
   sah aus wie ein grosses Bild, nicht wie ein Feed. Instagram
   zeigt Kacheln in Reihen, also hier auch: drei nebeneinander,
   der vierte lugt hervor und sagt, dass es weitergeht. */
.deck-bild .kar-schiene{
  align-items:center;
  padding:0;
  gap:.6rem;
  /* Kein Einrasten in diesem Streifen. Gemessen: mit Einrasten
     springt der angeschnittene Anfang sofort auf 0 zurueck -
     auch mit "proximity", weil bei 3,1 sichtbaren Kacheln der
     naechste Rastpunkt der Anfang ist. Ein Kachelstreifen
     braucht kein Einrasten; freies Schieben ist hier richtig. */
  scroll-snap-type:none;
}
.deck-bild .kar-schiene img{
  height:auto;
  width:31%;
  flex:0 0 31%;
  border-radius:.65rem;
}

/* ---- Newsletter im Stapel ----
   Ein Newsletter ist schmal und lang. In einem 16:9-Rahmen auf
   volle Breite gezogen wird er unleserlich. Also in seiner
   echten Proportion, mittig, mit dem Rahmengrund daneben. */
/* Zwei Ausgaben nebeneinander, gleich breit. In ihrer echten
   Proportion waere die laengere nur 84 px breit - unlesbar. Mit
   fester Spaltenbreite ist jede so breit wie eine Mail im
   Postfach, und die Ueberlaenge laeuft wie bei den langen
   Entwuerfen durch. */
.deck-bild .nl-paar{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:clamp(.6rem, 2vw, 1.4rem);
  padding:0 clamp(.6rem, 2vw, 1.4rem);
  height:100%;
  background:#f3f2ec;
}
.deck-bild .nl-paar > .arbeit-bild{
  flex:0 1 clamp(140px, 34%, 300px);
  height:100%;
  border-radius:.4rem;
  overflow:hidden;
}
.deck-bild .nl-einzeln .arbeit-bild.lang{
  width:min(38%, 22rem);
  flex:0 0 auto;
  height:100%;
}


/* ============================================================
   ZIERLICH
   ------------------------------------------------------------
   Nur in dieser Fassung. Gezaehlt auf dem Original: acht
   verschiedene Strichstaerken in den Icons (1 bis 2,6 px),
   neun gefuellte Pillen, zwei Trennlinien auf der ganzen
   Seite. Beide Vorlagen machen es umgekehrt: ein Strich-
   gewicht, keine gefuellten Pillen, dafuer feine Linien
   UNTER Ueberschriften statt Kaesten um Inhalte.
   ============================================================ */

/* Sortenangabe ohne Pille: gesperrte Versalien und eine feine
   Linie darunter. Eine gefuellte Kapsel ist ein Kasten - genau
   das, was die Vorlagen vermeiden. */
.stufe-art{
  align-self:stretch;
  margin:0 0 1.1rem;
  padding:0 0 .7rem;
  border-radius:0;
  background:none;
  border-bottom:1px solid rgba(60,54,46,.14);
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--text-leise);
}
.stufe-karte.dunkel .stufe-art{
  background:none;
  border-bottom-color:rgba(255,255,255,.18);
  color:#c6cdbe;
}

/* Feine Linie unter dem Kartennamen - dieselbe Geste wie
   "Booking Details" in der Vorlage. */
.stufe-name{
  padding-bottom:.65rem;
  border-bottom:1px solid rgba(60,54,46,.09);
}
.stufe-karte.dunkel .stufe-name{ border-bottom-color:rgba(255,255,255,.13); }

/* Preisband: 1 px Spur, drei Punkte. Links der Einstieg,
   rechts die Spanne, in der die meisten liegen. Macht aus
   drei Zahlen ein Bild, ohne ein Diagramm zu behaupten. */
.preis-band{ display:block; width:100%; height:14px; margin:0 0 .7rem; overflow:visible; }
.preis-band .spur{ stroke:rgba(255,255,255,.3); stroke-width:1; }
.preis-band .spanne{ stroke:#fff; stroke-width:1.5; stroke-linecap:round; }
.preis-band .marke-klein{ fill:rgba(255,255,255,.55); }
.preis-band .marke-gross{ fill:#fff; }

/* Mehr Leere in den Karten - die Vorlagen sind zu einem
   Drittel leer. */
.stufe-karte{ padding:2rem 1.9rem 1.8rem; }
.ueber-karte{ padding:1.2rem 1.35rem; }


/* ---------- Zierlich, Teil 2: der Rest der Seite ---------- */

/* Gleicher Knopf, nur auf dunklem Grund: muss auch gleich hoch
   sein. Gemessen waren es 49 gegen 47 px, weil btn-hell eigene
   Polsterwerte mitbrachte. */
.btn-hell{
  padding:.8em 1.7em;
  font-size:.95rem;
  font-weight:600;
}

/* Der Hinweis in der Leistungs-Tafel war ein gefuellter blauer
   Kasten - ein Element im Element. Jetzt eine Notiz mit feiner
   Linie darueber, wie in beiden Vorlagen. */
.tafel-einzeln{
  margin-top:1.1rem;
  padding:.85rem 0 0;
  border-radius:0;
  border-top:1px solid rgba(60,54,46,.12);
  background:none;
  font-size:.85rem;
  color:var(--text-leise);
}

/* Die Systemzeichen sassen in gefuellten Kreisen mit Rand.
   Ein Ring aus einer Linie reicht - das Zeichen darin traegt
   die Information, nicht die Flaeche darum. */
.marke-feld{
  background:none;
  border:1px solid rgba(60,54,46,.16);
}


/* Branche ueber dem Projektnamen: gesperrte Versalien statt
   gewoehnlicher Kleinschrift - dieselbe Geste wie bei den
   Sortenangaben in den Paketen. */
.deck-branche{
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-leise);
}

/* Feine Linie unter den Kartenueberschriften. Dieselbe Geste
   wie "Booking Details" und "Payment Details" in der Vorlage:
   die Linie steht UNTER der Ueberschrift und gliedert, statt
   einen Kasten um den Inhalt zu ziehen. */
.kachel-titel:not(.gross):not(.klein),
.deck-name{
  padding-bottom:.6rem;
  border-bottom:1px solid rgba(60,54,46,.09);
}
.kachel-dunkel .kachel-titel{ border-bottom-color:rgba(255,255,255,.14); }


/* ---------- Das Menue ist derselbe Umschalter ----------
   Sanjas Beobachtung: der Reiterstreifen im Projektdeck
   (Wasserstoff / Elektrifizierung / CO2) ist ein fertiges
   Bauteil - das Menue kann dasselbe sein, dann gibt es ein
   Element weniger auf der Seite.
   Es wird dadurch sogar ehrlicher: ein Umschalter zeigt an,
   welche Position gerade gilt. Auf einer einzelnen Seite ist
   das immer der Abschnitt, in dem man steht. Ein kleines
   Skript in variante-glas.html setzt aria-current darauf. */
.sprung{
  position:relative;
  gap:0;
  /* Kein Polster und kein Rand: in der Vorlage fuellt das
     aktive Segment die Spur bis an die Kante. Ein Innenabstand
     erzeugt einen zweiten, unsichtbaren Rahmen - genau das,
     was Sanja gesehen hat. */
  padding:0;
  border:0;
  border-radius:999px;
  background:color-mix(in srgb, var(--tinte) 8%, transparent);
}

/* Die wandernde Pille. EINE Flaeche, die zum aktiven Segment
   faehrt - statt dass an fuenf Stellen ein Hintergrund an- und
   ausgeht. Das Springen war genau das: fuenf Flaechen, von
   denen immer eine sichtbar war.
   Die Kurve hat einen leichten Ueberschwung (0,34 / 1,28), und
   waehrend der Fahrt wird die Pille kurz laenger und flacher -
   so verhaelt sich etwas Fluessiges, wenn es beschleunigt. */
.sprung-pille{
  position:absolute;
  left:0; top:0;
  height:100%;
  width:var(--w, 0px);
  border-radius:999px;
  background:#fff;
  box-shadow:0 .15rem .5rem -.2rem rgba(45,51,40,.18);
  translate:var(--x, 0) 0;
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:translate .46s cubic-bezier(.34,1.28,.42,1),
             width     .46s cubic-bezier(.34,1.28,.42,1),
             scale     .46s cubic-bezier(.34,1.28,.42,1),
             opacity   .25s ease;
}
.sprung-pille.da{ opacity:1; }
.sprung-pille.wandert{ scale:1.05 .9; }

/* Die Beschriftungen liegen ueber der Pille */
.sprung a{ position:relative; z-index:1; }

/* Der aktive Eintrag bekommt keinen eigenen Hintergrund mehr -
   den liefert die Pille. Nur die Schriftfarbe bleibt. */
.sprung a[aria-current="true"]{ background:none; color:var(--tief); }

@media (prefers-reduced-motion:reduce){
  .sprung-pille{ transition:opacity .2s ease; }
  .sprung-pille.wandert{ scale:1; }
}
/* Alle Segmente auf eine feste Hoehe: der Kreis im blauen
   Segment ist 26 px und wuerde es sonst 2 px hoeher machen
   als seine Nachbarn - in einer Spur sieht man das sofort. */
.sprung a{
  display:inline-flex;
  align-items:center;
  height:2.3rem;
}
.sprung a:not(.sprung-knopf){
  padding:0 1rem;
  border-radius:999px;
  font-size:.8125rem;
  letter-spacing:.01em;
  /* derselbe Ton wie im Projektdeck: 5,14:1 auf dem hellen
     Pillengrund, und trotzdem klar hinter dem aktiven zurueck */
  color:#5e6156;
  transition:background .25s ease, color .25s ease;
}
.sprung a[aria-current="true"]{
  background:#fff;
  color:var(--tief);
}

/* Schmal faellt die Spur weg und der Knopf steht allein -
   vier Ziele plus Name passen auf 375 px nicht nebeneinander. */
@media (max-width:720px){
  .sprung{ background:none; border:0; padding:0; }
  .sprung a:not(.sprung-knopf){ display:none; }
  .sprung a.sprung-knopf{ height:2.25rem; padding:0 .22rem 0 1rem; font-size:.85rem; }
}


/* ---------- Der runde Pfeil ----------
   Er steckt im Leistungs-Umschalter und im Menue-Knopf: ein
   Kreis mit Pfeil, 26 px, Strichstaerke 1,25, aus einem Token.
   In den GROSSEN Knoepfen ist er bewusst nicht. Dort traegt
   schon die Vollton-Flaeche die Aufforderung - ein Kreis
   obendrauf ist eine zweite Betonung derselben Sache.
   Die Regel: der Kreis gehoert in kompakte Bedienelemente,
   nicht in vollformatige Knoepfe. */


/* Derselbe Umschalter im Projektdeck bekommt dieselbe Pille. */
.fall-wahl{ position:relative; }
.fall-wahl button{ height:2.1rem; padding:0 .95rem; }
.fall-wahl button{ position:relative; z-index:1; }
.fall-wahl button[aria-selected="true"]{ background:none; }
.fall-pille{
  position:absolute;
  left:0; top:0;
  height:100%;
  width:var(--w, 0px);
  border-radius:999px;
  background:#fff;
  box-shadow:0 .15rem .5rem -.2rem rgba(45,51,40,.18);
  translate:var(--x, 0) 0;
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:translate .46s cubic-bezier(.34,1.28,.42,1),
             width     .46s cubic-bezier(.34,1.28,.42,1),
             scale     .46s cubic-bezier(.34,1.28,.42,1),
             opacity   .25s ease;
}
.fall-pille.da{ opacity:1; }
.fall-pille.wandert{ scale:1.05 .9; }
@media (prefers-reduced-motion:reduce){
  .fall-pille{ transition:opacity .2s ease; }
  .fall-pille.wandert{ scale:1; }
}


/* Gruppenueberschrift ueber den Werkzeugen: gesperrte
   Versalien, wie die Sortenangaben in den Paketen. Kein
   eigenes Bauteil, nur dieselbe Geste. */
.marken-gruppe{
  margin:1.1rem 0 .55rem;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-leise);
}
.marken-gruppe:first-of-type{ margin-top:1.3rem; }


/* ---------- Der Weg als Zeichnung ----------
   Statt 01/02/03 sitzt an jedem Schritt ein Zeichen in einer
   1-px-Pille, verbunden durch eine 1-px-Linie. Das ist dieselbe
   Sprache wie der Pfeil im Menue und die Pille am Umschalter,
   nur kleiner.

   Die Linie ist nicht ein langer Strich, sondern zwei Stuecke
   zwischen den Knoten - sonst laeuft sie unter dem dritten
   weiter, und der Weg sieht aus, als ginge er nach dem Start
   noch irgendwohin. So endet er dort, wo er endet.

   Die Zahlen sind weg, die Reihenfolge traegt jetzt die Linie.
   Das <ol> bleibt eine geordnete Liste, Vorlesesoftware zaehlt
   also weiter mit. */
.kontakt-schritte{
  position:relative;
  padding-left:2.1rem;
}
.kontakt-schritte li{ position:relative; }

/* Der Knoten: 1-px-Kontur, Zeichen drin. Die Regel muss
   .kontakt-schritte span schlagen (zwei Klassen gegen Klasse
   plus Typ), sonst macht die den Knoten zu einem fetten
   Grossbuchstaben-Block. */
.kontakt-schritte .schritt-knoten{
  position:absolute;
  left:-2.1rem; top:.02rem;
  width:1.5rem; height:1.5rem;
  margin:0; padding:0;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(34,75,160,.5);
  background:rgba(255,255,255,.45);
  opacity:0; scale:.75;
  transition:opacity .3s ease, scale .4s cubic-bezier(.34,1.35,.42,1);
}
.kontakt-schritte .schritt-ikon{ width:.85rem; height:.85rem; display:block; }

/* Die Zeichen zeichnen sich selbst: jede Linie ist per
   pathLength auf 1 normiert, dann laeuft der Strich von 1 auf
   0. Ohne pathLength muesste man jede Pfadlaenge messen. */
.kontakt-schritte .schritt-ikon *{
  fill:none; stroke:#224b9f; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .75s cubic-bezier(.3,.72,.3,1);
}

/* Die Verbindung. Der letzte Schritt bekommt keine. */
.kontakt-schritte li::after{
  content:"";
  position:absolute;
  left:-1.35rem; margin-left:-.5px;
  top:1.75rem; bottom:-1rem;
  width:1px;
  background:rgba(34,75,160,.45);
  transform-origin:top center;
  scale:1 0;
  transition:scale .45s cubic-bezier(.33,.75,.4,1);
}
.kontakt-schritte li:last-child::after{ content:none; }

/* Gezeichnet wird der Reihe nach: Pille, Zeichen, Linie,
   naechste Pille. Rund 2 Sekunden fuer alle drei. */
.kontakt-karte.gesehen .kontakt-schritte .schritt-knoten{ opacity:1; scale:1; }
.kontakt-karte.gesehen .kontakt-schritte .schritt-ikon *{ stroke-dashoffset:0; }
.kontakt-karte.gesehen .kontakt-schritte li::after{ scale:1 1; }

.kontakt-karte.gesehen .kontakt-schritte li:nth-child(1) .schritt-knoten{ transition-delay:0.15s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(1) .schritt-ikon *{ transition-delay:0.3s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(1)::after{ transition-delay:0.55s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(2) .schritt-knoten{ transition-delay:0.67s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(2) .schritt-ikon *{ transition-delay:0.82s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(2)::after{ transition-delay:1.07s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(3) .schritt-knoten{ transition-delay:1.19s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(3) .schritt-ikon *{ transition-delay:1.34s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(3)::after{ transition-delay:1.59s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(4) .schritt-knoten{ transition-delay:1.71s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(4) .schritt-ikon *{ transition-delay:1.86s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(4)::after{ transition-delay:2.11s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(5) .schritt-knoten{ transition-delay:2.23s; }
.kontakt-karte.gesehen .kontakt-schritte li:nth-child(5) .schritt-ikon *{ transition-delay:2.38s; }

@media (prefers-reduced-motion:reduce){
  .kontakt-schritte .schritt-knoten,
  .kontakt-schritte li::after{ opacity:1; scale:1; transition:none; transition-delay:0s; }
  .kontakt-schritte .schritt-ikon *{ stroke-dashoffset:0; transition:none; transition-delay:0s; }
}


/* ---------- Leistungen schmal: Pillenbahn statt Liste ----------
   Vorher lag die Liste senkrecht und die Tafel darunter. Gemessen
   waren das 459 px zwischen dem Knopf, den man antippt, und der
   Tafel, die daraufhin erscheint: antippen, runterscrollen, lesen,
   wieder hochscrollen. Sechsmal.

   Jetzt dieselbe Pillenbahn wie beim Projektumschalter. Die Tafel
   wechselt direkt darunter, nichts bewegt sich. */
.tafel-zweck{ display:none; }
.tafel-nr{ display:none; }
.wahl .kurz{ display:none; }
.wahl-pille{ display:none; }

@media (max-width:860px){
  /* Dritte Fassung: senkrecht wie auf dem Laptop, aber kurz genug,
     dass alle sechs UND der Anfang der Tafel zugleich im Bild
     stehen. Dann braucht es keinen Sprung, weil die Liste beim
     Antippen gar nicht erst verschwindet.

     Dafuer faellt die Zweckzeile aus der Liste und steht oben in
     der Tafel. Die Liste wird dadurch von 501 auf rund 340 px
     kurz - der Unterschied zwischen "passt nicht" und "passt". */
  .wahl{
    display:block;
    margin:0 0 1.2rem;
    padding:0;
    border:0;
    background:none;
    border-radius:0;
    position:relative;
  }
  .wahl li{ flex:none; }

  .wahl button{
    display:flex;
    align-items:baseline;
    gap:.7rem;
    width:100%;
    padding:.72rem 0;
    border-radius:0;
    text-align:left;
    color:var(--text-leise);
  }
  .wahl .nr{ display:block; font-size:.8125rem; letter-spacing:.04em; color:var(--linie); }
  .wahl .was{ flex:1; font-size:1rem; font-weight:500; letter-spacing:-.01em; }
  .wahl .lang{ display:inline; }
  .wahl .kurz{ display:none; }

  /* Der Zweck steht jetzt oben in der Tafel, wo man gerade liest.
     display:none nimmt ihn hier auch aus der Vorlesereihenfolge. */
  .wahl .wofuer{ display:none; }

  /* Der Pfeil zeigt weiter auf die Tafel, nur liegt die jetzt
     darunter statt daneben. */
  .wahl .pfeil{ display:grid; rotate:90deg; }

  .wahl button[aria-selected="true"]{ color:var(--tinte); }
  .wahl button[aria-selected="true"] .nr{ color:var(--akzent); }

  .wahl-pille{ display:none; }

  /* Reihenfolge: Kopf, Bahn, Tafel, dann erst der Knopf. Stand er
     wie im Laptop-Raster zwischen Bahn und Tafel, riss er genau
     die beiden auseinander, die zusammengehoeren. order wirkt im
     Grid genauso wie im Flex, das Raster bleibt also ein Grid. */
  .leistungen-kopf{ order:0; }
  .leistungen-raster > .wahl{ order:1; }
  .tafeln{ order:2; }
  .leistungen-raster > .btn{ order:3; margin-top:1.75rem; }



  .tafel-zweck{
    display:block;
    margin:0 0 .5rem;
    font-size:.8125rem;
    line-height:1.4;
    color:var(--akzent);
  }
}

@media (prefers-reduced-motion:reduce){
  .wahl-pille.wandert{ transition:none; }
}


/* ---------- Ein Kontaktknopf statt zweier ---------- */
.kontakt-knopf{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  /* .btn bringt flex:1 1 auto mit - in dieser Reihe zog sich die
     Pille dadurch auf 520 px, und der Kopierlink stand abgetrennt
     weit rechts. Hier soll sie nur so breit sein wie ihr Inhalt. */
  flex:0 0 auto;
  max-width:100%;
}
.kontakt-knopf svg{
  width:1.1rem; height:1.1rem; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Die Notiz erscheint nur nach dem Klick und verschwindet von
   selbst. Sie traegt role="status", Vorlesesoftware sagt sie also
   an, ohne dass der Fokus springt. rgb(198,211,236) misst auf dem
   blauen Grund 5,39:1. */
.kontakt-notiz{
  flex-basis:100%;
  margin:.3rem 0 0;
  font-size:.875rem;
  line-height:1.4;
  color:rgb(198,211,236);
  opacity:0;
  translate:0 -.25rem;
  transition:opacity .3s ease, translate .3s ease;
}
.kontakt-notiz.da{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion:reduce){
  .kontakt-notiz{ transition:none; }
}


/* ---------- Rechtstexte ----------
   Eigene, sehr ruhige Seiten. Kein Glas, keine Bewegung, keine
   Bilder: hier will niemand etwas erleben, hier will jemand etwas
   nachlesen. Eine Spalte, grosse Zeilenhoehe, klare Zwischen-
   ueberschriften. */
.recht{
  max-width:44rem;
  margin:0 auto;
  padding:clamp(5rem,9vw,7rem) var(--rand) clamp(4rem,7vw,6rem);
}
.recht-zurueck{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-bottom:clamp(2rem,4vw,3rem);
  font-size:.9rem; color:var(--text-leise); text-decoration:none;
}
.recht-zurueck:hover{ color:var(--tinte); }
.recht-zurueck svg{
  width:1rem; height:1rem; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.recht h1{
  margin:0 0 .6rem;
  font-size:clamp(2rem,4.4vw,3rem);
  font-weight:500; line-height:1.1; letter-spacing:-.03em;
  color:var(--tinte);
}
.recht-stand{ margin:0 0 clamp(2.5rem,5vw,3.5rem); font-size:.875rem; color:var(--text-leise); }
.recht h2{
  margin:clamp(2.2rem,4vw,3rem) 0 .7rem;
  font-size:1.1rem; font-weight:500; color:var(--tinte);
}
.recht p, .recht li{ font-size:1rem; line-height:1.7; color:var(--text); }
.recht p{ margin:0 0 1rem; }
.recht ul{ margin:0 0 1rem; padding-left:1.2rem; }
.recht li{ margin-bottom:.4rem; }
.recht a{ color:var(--akzent); }
.recht address{ font-style:normal; }
/* Was Sanja noch eintragen muss, faellt so sofort ins Auge und
   kann vor dem Start gesucht werden. */
.recht mark{
  background:rgba(var(--akzent-kanaele), .12);
  color:var(--tinte);
  padding:.1em .35em;
  border-radius:.3rem;
}


/* Fusszeile der Rechtsseiten: nur die drei Wege, die man von hier
   aus braucht. Die grosse Fusszeile der Startseite waere hier
   Ballast, sie wiederholt Angaben, die zwei Zeilen weiter oben
   ohnehin vollstaendig stehen. */
.recht-fuss{
  max-width:44rem;
  margin:0 auto;
  padding:0 var(--rand) clamp(3rem,6vw,5rem);
}
.recht-fuss nav{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--linie);
}
.recht-fuss a{ font-size:.875rem; color:var(--text-leise); text-decoration:none; }
.recht-fuss a:hover{ color:var(--tinte); }


/* Der Selbstlauf war mit 258 px/s zu schnell zum Lesen. script.js
   setzt --lauf inline auf dem Feld, deshalb hier mit !important
   ueberschrieben.

   Wichtig: NICHT transition-duration !important setzen. Das hat
   auch die Laufzeit beim Tippen und Wischen auf 36 s festgenagelt.
   Ueber --lauf bleibt der Weg frei: ein inline gesetztes
   transition am Bild schlaegt die Stylesheet-Regel. */
.arbeit-bild.lang{ --lauf:36s !important; }
.arbeit-bild.lang{ touch-action:pan-x; }


/* ---------- Hinweis: hier darfst du selbst scrollen ----------
   Erscheint unten rechts im Bildrahmen, genau wenn der Lauf
   anhaelt, und geht nach zwei Sekunden wieder. Unten rechts,
   weil dort bei einer Seitenaufnahme nie der Anfang steht - oben
   sitzt immer der Kopfbereich, den man lesen will.

   Kein Text: das Zeichen muss in der englischen Fassung genauso
   funktionieren. pointer-events:none, sonst faengt es das Rad
   und den Finger ab. */
.lauf-tipp{
  position:absolute;
  right:.6rem; bottom:.6rem;
  z-index:3;
  display:grid;
  place-items:center;
  width:1.9rem; height:1.9rem;
  border-radius:50%;
  background:rgba(20,24,18,.62);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
  opacity:0;
  scale:.86;
  pointer-events:none;
  transition:opacity .28s ease, scale .28s cubic-bezier(.34,1.3,.42,1);
}
.lauf-tipp.da{ opacity:1; scale:1; }
.lauf-tipp svg{
  width:.95rem; height:.95rem;
  fill:none; stroke:#fff; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (prefers-reduced-motion:reduce){
  .lauf-tipp{ transition:none; }
}