@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --weiss: #F8F7F4;
  --ink: #14180F;
  --grau: rgba(20,24,15,.5);
  --gruen: #1C3829;
  --moos: #2C4A36;
  --linie: rgba(20,24,15,.13);
  --rand: 34px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body { min-height: 100%; }
body {
  background: var(--weiss);
  color: var(--ink);
  font-family: 'Satoshi', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- weisses Filmkorn ---------- */
.korn {
  position: fixed; inset: -50px; z-index: 60; pointer-events: none;
  mix-blend-mode: screen; opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.9' intercept='-0.92'/%3E%3CfeFuncG type='linear' slope='1.9' intercept='-0.92'/%3E%3CfeFuncB type='linear' slope='1.9' intercept='-0.92'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23w)'/%3E%3C/svg%3E");
}
.korn::after {
  content: ''; position: absolute; inset: 0; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23d)'/%3E%3C/svg%3E");
}

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--rand);
}
.marke { display: flex; align-items: center; gap: 11px; }
.marke img, .mk-zeichen { width: 19px; height: 19px; display: block; }
.marke b { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.mininav { display: flex; gap: 34px; }
.mininav a {
  font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase; color: var(--grau);
  position: relative; padding-bottom: 3px; transition: color .35s;
}
.mininav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.mininav a:hover { color: var(--ink); }
.mininav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Platte: Strecke zum Scrollen, Bühne bleibt stehen ---------- */
.spann { height: 430svh; }
.haft {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 92px var(--rand) 104px;
}

/* nur für Vorleseprogramme */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- linke Seite: das Zeichen ---------- */
.linke { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.zeichenfeld { position: relative; }
.zeichenfeld canvas {
  display: block; width: min(52vw, 62vh); height: auto; aspect-ratio: 1;
  opacity: 0; transition: opacity 1.1s ease;
}
.zeichenfeld.da canvas { opacity: 1; }
.gross-w {
  width: min(46vw, 62vh); height: auto;
  filter: brightness(0) saturate(100%);
  clip-path: inset(0 100% 0 0);
}
/* das SVG hat transparente Ränder — das ® wird darum frei gesetzt */
.reg { position: absolute; right: 11%; top: 34%; font-size: 13px; color: var(--grau); opacity: 0; }
.wortzeile {
  margin-top: 14px;
  font-size: 11px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink); opacity: 0;
  transition: color .4s;
}
/* schlicht in derselben Schrift wie der Rest, keine Serif-Kursive */
.nachsatz {
  margin-top: min(14px, 1.8vh); opacity: 0;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; line-height: 2;
  color: var(--grau);
}
.unterzeile {
  margin-top: 11px; min-height: 1.4em;
  font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--grau); opacity: 0;
  text-align: center; max-width: 30ch;
}

/* ---------- Fuss ---------- */
.fuss {
  position: fixed; z-index: 20; left: var(--rand); right: var(--rand); bottom: 26px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px;
}
/* wie oben am Kopf: ein weicher Verlauf dahinter, damit der Inhalt
   nicht durch die feste Zeile hindurchsticht */
.fuss::before {
  content: ''; position: absolute; z-index: -1;
  left: calc(var(--rand) * -1); right: calc(var(--rand) * -1); bottom: -26px; top: -30px;
  background: linear-gradient(to top, var(--weiss) 46%, rgba(248,247,244,0));
  pointer-events: none;
}
.fu-link {
  justify-self: start;
  font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.fu-link span { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.fu-link:hover span { transform: rotate(90deg); }
.fu-mitte {
  justify-self: center; text-align: center;
  font-size: 9.5px; line-height: 1.7; letter-spacing: .17em; text-transform: uppercase; color: var(--grau);
}
.fu-rechts {
  justify-self: end;
  font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase; color: var(--grau);
}
.fuss > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .gross-w { clip-path: none !important; }
  .reg, .wortzeile, .kachel, .fuss > * { opacity: 1 !important; }
}

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  :root { --rand: 18px; }
  /* das Zeichen so gross wie das Burger-Symbol */
  .marke img { width: 22px; height: 22px; }
  html, body { height: auto; overflow: visible; }   /* overflow:auto würde sticky brechen */
  /* die Navigation bleibt erreichbar — nur das Wort neben dem Zeichen geht */
  .marke b { display: none; }
  .kopf { padding: 18px var(--rand); }
  .mininav { gap: 13px; }
  .mininav a { font-size: 9px; letter-spacing: .11em; }
  .spann { height: 400svh; }
  .haft { padding: 96px var(--rand) 56px; }
  .linke { gap: 20px; }
  .zeichenfeld canvas { width: 78vw; }
  .fuss { display: none; }
  .fu-mitte { text-align: left; margin: 16px 0; }
  .fu-link, .fu-rechts { justify-self: start; }
}



/* Hinweis, dass es weitergeht: Rad mit rollendem Punkt */
.wink {
  margin-top: 26px; opacity: 0;
  transition: opacity .7s ease;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  transition: opacity .5s;
}
.wink-wort {
  font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--grau);
}
.rad {
  display: block; width: 21px; height: 33px;
  border: 1px solid rgba(20,24,15,.32); border-radius: 11px;
  position: relative;
}
.rad i {
  position: absolute; left: 50%; top: 7px; margin-left: -1.5px;
  width: 3px; height: 6px; border-radius: 2px; background: var(--ink);
  animation: rollen 2.1s cubic-bezier(.4,0,.2,1) infinite;
}
.wink.da { opacity: 1; }
.wink.weg { opacity: 0; }

@keyframes rollen {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 1; }
  70%  { transform: translateY(12px); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rad i { animation: none; } }



/* ---------- Übergang: die Bühne tritt ab ---------- */
.haft { transform-origin: 50% 42%; will-change: transform, opacity; }

/* ---------- Vertrauen uns bereits ---------- */
.vertrauen {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4svh var(--rand) 13svh;
  text-align: center;
}
.vt-kopf {
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--grau);
  margin-bottom: 40px;
}

/* die Marken ziehen ruhig durch, an den Rändern ins Papier verlaufend */
.vt-lauf {
  width: 100%; overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.vt-reihe {
  display: flex; align-items: center;
  gap: clamp(40px, 5vw, 84px);
  width: max-content; will-change: transform;
}
.vt-marke {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; opacity: 0;
  transition: filter .45s, opacity .45s;
}
.vt-marke img {
  height: 30px; width: auto; max-width: 164px; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: opacity .45s, filter .45s;
}
.vt-marke:hover img { opacity: 1; }
.vt-wort {
  font-size: clamp(15px, 1.35vw, 19px); letter-spacing: -0.01em; color: rgba(20,24,15,.62);
  transition: color .45s;
}
.vt-wort:hover { color: var(--ink); }

.vt-strich {
  width: min(1240px, 100%); height: 1px; border: 0; margin: clamp(42px, 5.4vh, 64px) 0;
  background: var(--linie); opacity: 0;
}

.vt-partner-reihe {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(920px, 100%);
}
.vt-partner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  padding: 6px clamp(12px, 2vw, 26px);
}
/* feine Trennstriche statt Kästen */
.vt-partner + .vt-partner::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--linie);
}
.vt-zeichen {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--linie);
  display: grid; place-items: center;
  transition: border-color .45s, background .45s;
}
.vt-zeichen svg { width: 20px; height: 20px; color: var(--ink); }
.vt-partner:hover .vt-zeichen { border-color: rgba(20,24,15,.3); background: #F1EFE8; }
.vt-partner b {
  font-size: clamp(14px, 1.25vw, 17px); font-weight: 500; letter-spacing: -0.012em;
}
.vt-partner i {
  font-style: normal; font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--grau); text-align: center; margin-top: -5px;
}
.vt-satz {
  margin-top: clamp(34px, 4.5vh, 52px); max-width: 62ch;
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.65; color: var(--grau);
  opacity: 0;
}

/* ---------- Schlussblock (der feste Fuss tritt dafür ab) ---------- */
.schluss {
  margin-top: 0; padding-top: 8svh;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px;
  padding: 0 var(--rand) 42px;
}
.fuss.weg { opacity: 0; pointer-events: none; transition: opacity .5s; }
.fuss { transition: opacity .5s; }

@media (prefers-reduced-motion: reduce) {
  .vt-marke, .vt-partner, .vt-satz, .vt-strich { opacity: 1 !important; }
  .haft { transform: none !important; opacity: 1 !important; }
}

@media (max-width: 900px) {
  .vertrauen { margin-top: 0; padding: 2svh var(--rand) 6svh; }
  .vt-kopf { margin-bottom: 30px; }
  .vt-reihe { gap: 34px; }
  .vt-marke { height: 26px; }
  .vt-marke img { height: 23px; max-width: 112px; }
  .vt-wort { font-size: 14px; }
  .vt-partner-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .vt-partner { padding: 6px 10px; gap: 10px; }
  .vt-zeichen { width: 40px; height: 40px; }
  .vt-zeichen svg { width: 18px; height: 18px; }
  .vt-partner b { font-size: 14px; }
  .vt-partner i { font-size: 8.5px; }
  .vt-partner:nth-child(3)::before, .vt-partner:nth-child(2n+1)::before { display: none; }
  .vt-satz { font-size: 13.5px; }
  .schluss { display: block; padding: 0 var(--rand) 40px; }
  .schluss .fu-mitte { text-align: left; margin: 14px 0; }
}


/* ---------- Leistungen als Karussell ---------- */
/* liegt über dem Platz des Zeichens, die Zeile darunter bleibt frei */
.karussell {
  position: absolute; left: 0; right: 0;
  top: 78px; bottom: 196px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--rand);
  opacity: 0; pointer-events: none; z-index: 4;
  overflow: hidden;   /* die äusseren Karten werden am Rand beschnitten */
}
.karussell.da { pointer-events: auto; }

.kar-buehne {
  position: relative; transform: translateZ(0); width: 100%;
  height: min(452px, 56vh);
}
/* weicher Schein hinter der vordersten Karte */
.kar-buehne::before {
  content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(760px, 62vw); height: min(620px, 74vh);
  background: radial-gradient(closest-side, rgba(255,252,240,.95), rgba(255,250,235,0) 72%);
  pointer-events: none;
}
.kar-karte {
  position: absolute; top: 50%; left: 50%;
  width: min(344px, 25vw); min-height: min(424px, 54vh);
  margin: 0; padding: 32px;
  display: flex; flex-direction: column;
  background: #EFEDE6; border: 1px solid rgba(20,24,15,.10); border-radius: 18px;
  box-shadow: 0 14px 34px -26px rgba(20,24,15,.4);
  opacity: 0; cursor: pointer;
  transform: translate3d(-50%, -50%, 0);
  transition: background .5s ease, box-shadow .6s ease, border-color .5s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.kar-karte.mitte {
  background: #FCFBF8; border-color: rgba(20,24,15,.09);
  box-shadow: 0 26px 60px -28px rgba(20,24,15,.28), 0 4px 14px -8px rgba(20,24,15,.14);
  cursor: default;
}
.kk-nr {
  position: absolute; top: 26px; right: 28px;
  font-size: 11px; letter-spacing: .14em; color: var(--grau);
}
.kk-icon {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--linie);
  display: grid; place-items: center; color: var(--ink);
  margin-bottom: auto;
}
.kk-icon svg { width: 25px; height: 25px; }
.kar-karte.mitte .kk-icon { border-color: rgba(20,24,15,.22); }
.kk-tt {
  margin-top: 30px;
  font-size: 21px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2;
}
.kar-karte.mitte .kk-tt { font-size: 27px; }
.kk-text {
  margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(20,24,15,.56);
}
.kar-karte.mitte .kk-text { color: rgba(20,24,15,.72); font-size: 15px; }
/* Die Kachel ist als Ganzes die Schaltflaeche. Der Verweis legt sich
   unsichtbar darueber, das Pfeilzeichen darin entfaellt: es war eine
   zweite, kleinere Trefferflaeche fuer dasselbe Ziel. */
.kk-pfeil {
  position: absolute; inset: 0; margin: 0;
  width: auto; height: auto; border: 0; border-radius: 18px;
  font-size: 0; color: transparent;
}
.kk-pfeil > span { display: none; }
/* Die ganze Kachel ist die Schaltflaeche: der Verweis legt sich
   unsichtbar darueber, das Zeichen darin bleibt sichtbar. So trifft man
   sie mit dem Daumen ueberall, nicht nur auf dem kleinen Kreis. */
.kar-karte { position: absolute; }
.kar-karte:not(.mitte) .kk-pfeil { pointer-events: none; }

.kar-steuer {
  display: flex; align-items: center; gap: 28px;
  margin-top: 26px;
}
.kar-pfeil {
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: 1px solid var(--linie); color: var(--ink);
  font-size: 15px; cursor: pointer;
  transition: background .35s, border-color .35s, color .35s;
}
.kar-pfeil:hover { background: var(--ink); border-color: var(--ink); color: var(--weiss); }
.kar-fortschritt { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kf-bahn {
  display: block; width: min(216px, 34vw); height: 1px;
  background: rgba(20,24,15,.16); position: relative; overflow: hidden;
}
.kf-fuellung {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: 16%; background: var(--ink);
}
.kf-zahl {
  font-size: 10px; letter-spacing: .22em; color: var(--grau);
  font-variant-numeric: tabular-nums;
}

/* das Zeichen tritt ab, während die Karten auffächern */
.zeichenfeld { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .kar-karte, .kar-steuer { transition: none; }
}

@media (max-width: 900px) {
  /* am Handy läuft das Karussell mit dem Scrollen mit, wie am Rechner.
     Zeichen und Karten liegen übereinander in der oberen Hälfte, die Zeile
     darunter — dadurch sitzt die Gruppe immer mittig, egal was gerade zu
     sehen ist. */
  /* Zeichen und Karten teilen sich denselben Bereich oben, die Zeile
     steht darunter im Fluss — so bleibt nichts verschoben. */
  /* Am Handy teilt ein Raster die Bühne: oben Zeichen und Karten im
     selben Feld, darunter die Zeile. Vorher standen beide mit svh
     gerechnet übereinander, und weil Safari die Adresszeile ein- und
     ausblendet, stimmte die Rechnung auf dem echten Gerät nicht: die
     Karten liefen in die Zeile hinein. Im Raster kann das nicht mehr
     passieren, egal wie hoch das Fenster gerade ist. */
  .haft {
    display: grid;
    /* eine Spalte ueber die volle Breite: ohne die Angabe richtet sich
       die Spalte nach dem breitesten Text und die Buehne wird zu schmal */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto;
    justify-items: center; align-items: center;
    padding: 78px var(--rand) 5svh;
  }
  .zeichenfeld, .karussell {
    grid-row: 1; grid-column: 1;
    position: relative; inset: auto; width: 100%; height: 100%;
    /* justify-items: center am Raster liess beide auf Inhaltsbreite
       schrumpfen, dadurch war die Buehne schmaler als die Karte und
       schnitt sie seitlich an */
    justify-self: stretch; align-self: stretch;
    padding: 0;
  }
  .zeichenfeld { display: grid; place-items: center; }
  /* Der Beschnitt sass bisher am ganzen Karussellfeld. Bei kleineren
     Fenstern ragte die Pfeilzeile darueber hinaus und wurde abgeschnitten.
     Jetzt blendet nur noch die Buehne seitlich aus, die Pfeile stehen
     frei darunter und koennen nicht mehr verschwinden. */
  .karussell {
    overflow: visible;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .kar-buehne {
    /* align-items: center liess die Buehne auf Inhaltsbreite schrumpfen,
       dadurch war sie schmaler als die Karte und schnitt sie seitlich an */
    flex: 0 1 auto; min-height: 0; width: 100%; align-self: stretch;
    /* Der Beschnitt sitzt jetzt hier statt am ganzen Feld: die
       aufgefaecherten Nachbarkarten ragen seitlich weit hinaus und
       schoben die Seite sonst waagrecht auf. Die Pfeile stehen
       ausserhalb und bleiben unbeschnitten. */
    overflow: hidden;
    /* Der Auslauf war in Prozent gerechnet und reichte damit fast bis an
       die vorderste Karte heran, die 80 Prozent der Breite einnimmt.
       Jetzt in Pixeln und schmal: er greift nur noch die Nachbarkarten
       am Rand, die vordere bleibt unangetastet. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .kar-steuer { flex: 0 0 auto; }
  .zeichenfeld canvas { width: min(74vw, 40vh); }
  /* jede Zeile in ihre eigene Reihe, sonst liegen sie uebereinander */
  .wortzeile { grid-row: 2; grid-column: 1; }
  .unterzeile { grid-row: 3; grid-column: 1; }
  .nachsatz { grid-row: 4; grid-column: 1; }
  .wink { grid-row: 5; grid-column: 1; margin-top: 12px; }
  /* die Bühne braucht eine feste Höhe, sonst richtet sie sich nach
     der Rasterzelle und die Karte wird oben abgeschnitten */
  .kar-buehne { height: min(392px, 50vh); }
  .kar-karte { width: min(320px, 80vw); padding: 22px; min-height: min(330px, 40vh); }
  @media (max-height: 700px) {
    .kar-karte { padding: 18px; min-height: min(286px, 41vh); }
    .kar-karte.mitte .kk-tt { font-size: 20px; }
    .kk-text, .kar-karte.mitte .kk-text { font-size: 14px; line-height: 1.5; }
    .kk-icon { width: 40px; height: 40px; }
  }
  @media (max-height: 640px) {
    /* Safari mit eingeblendeter Adresszeile auf kleineren Telefonen */
    .haft { padding-top: 68px; }
    .kar-buehne { height: 54vh; }
    .kar-karte { padding: 16px; min-height: min(240px, 40vh); }
    .kar-karte.mitte .kk-tt { font-size: 18px; }
    .kk-text, .kar-karte.mitte .kk-text { font-size: 13px; }
    .kar-steuer { margin-top: 12px; }
  }
  .kar-karte.mitte .kk-tt { font-size: 22px; }
  .kar-steuer { margin-top: 18px; gap: 18px; }
}


/* ---------- Ausgewählte Arbeiten (Stile in uebersicht.css) ---------- */
/* Die Bühne blendet ab 94 % ihrer Strecke aus (LAUF_BIS in weiss.js).
   .spann ist 430svh hoch, die Bühne 100svh -> 330svh Weg; der Abtritt
   beginnt bei 310svh. Genau dort muss dieser Abschnitt anfangen, sonst
   steht ein leerer Bildschirm dazwischen: 430 - 310 = 120svh. */
.arbeiten {
  position: relative; z-index: 2;
  width: 100%; margin: -95svh auto 0;
  padding: 10svh var(--rand) 8svh;
  /* Bühne und Abschnitt blenden ineinander über, gesteuert in weiss.js
     aus demselben Scrollwert. Keine Fläche, die sich darüberschiebt. */
  will-change: opacity, transform;
}
.arbeiten > * { width: min(1340px, 100%); margin-inline: auto; }
.arbeiten .ue-kopf { align-items: start; }
.arbeiten .ue-titel { font-size: min(clamp(30px, 3.8vw, 54px), 6.6vh); }

@media (max-width: 900px) {
  .arbeiten { margin-top: -84svh; padding: 8svh var(--rand) 5svh; }
  .arbeiten .ue-titel { font-size: clamp(28px, 8.6vw, 40px); }
}

/* ---------- Vertrauen uns bereits ---------- */
.vertrauen {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4svh var(--rand) 13svh;
  text-align: center;
}
.vt-kopf {
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--grau);
  margin-bottom: 40px;
}

/* die Marken ziehen ruhig durch, an den Rändern ins Papier verlaufend */
.vt-lauf {
  width: 100%; overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.vt-reihe {
  display: flex; align-items: center;
  gap: clamp(40px, 5vw, 84px);
  width: max-content; will-change: transform;
}
.vt-marke {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; opacity: 0;
  transition: filter .45s, opacity .45s;
}
.vt-marke img {
  height: 30px; width: auto; max-width: 164px; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: opacity .45s, filter .45s;
}
.vt-marke:hover img { opacity: 1; }
.vt-wort {
  font-size: clamp(15px, 1.35vw, 19px); letter-spacing: -0.01em; color: rgba(20,24,15,.62);
  transition: color .45s;
}
.vt-wort:hover { color: var(--ink); }

.vt-strich {
  width: min(1240px, 100%); height: 1px; border: 0; margin: clamp(42px, 5.4vh, 64px) 0;
  background: var(--linie); opacity: 0;
}

.vt-partner-reihe {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(920px, 100%);
}
.vt-partner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  padding: 6px clamp(12px, 2vw, 26px);
}
/* feine Trennstriche statt Kästen */
.vt-partner + .vt-partner::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--linie);
}
.vt-zeichen {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--linie);
  display: grid; place-items: center;
  transition: border-color .45s, background .45s;
}
.vt-zeichen svg { width: 20px; height: 20px; color: var(--ink); }
.vt-partner:hover .vt-zeichen { border-color: rgba(20,24,15,.3); background: #F1EFE8; }
.vt-partner b {
  font-size: clamp(14px, 1.25vw, 17px); font-weight: 500; letter-spacing: -0.012em;
}
.vt-partner i {
  font-style: normal; font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--grau); text-align: center; margin-top: -5px;
}
.vt-satz {
  margin-top: clamp(34px, 4.5vh, 52px); max-width: 62ch;
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.65; color: var(--grau);
  opacity: 0;
}

/* ---------- Schlussblock (der feste Fuss tritt dafür ab) ---------- */
.schluss {
  margin-top: 0; padding-top: 8svh;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px;
  padding: 0 var(--rand) 42px;
}
.fuss.weg { opacity: 0; pointer-events: none; transition: opacity .5s; }
.fuss { transition: opacity .5s; }

@media (prefers-reduced-motion: reduce) {
  .vt-marke, .vt-partner, .vt-satz, .vt-strich { opacity: 1 !important; }
  .haft { transform: none !important; opacity: 1 !important; }
}

@media (max-width: 900px) {
  .vertrauen { margin-top: 0; padding: 2svh var(--rand) 6svh; }
  .vt-kopf { margin-bottom: 30px; }
  .vt-reihe { gap: 34px; }
  .vt-marke { height: 26px; }
  .vt-marke img { height: 23px; max-width: 112px; }
  .vt-wort { font-size: 14px; }
  .vt-partner-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .vt-partner { padding: 6px 10px; gap: 10px; }
  .vt-zeichen { width: 40px; height: 40px; }
  .vt-zeichen svg { width: 18px; height: 18px; }
  .vt-partner b { font-size: 14px; }
  .vt-partner i { font-size: 8.5px; }
  .vt-partner:nth-child(3)::before, .vt-partner:nth-child(2n+1)::before { display: none; }
  .vt-satz { font-size: 13.5px; }
  .schluss { display: block; padding: 0 var(--rand) 40px; }
  .schluss .fu-mitte { text-align: left; margin: 14px 0; }
}


/* ---------- Leistungen als Karussell ---------- */
/* liegt über dem Platz des Zeichens, die Zeile darunter bleibt frei */
.karussell {
  position: absolute; left: 0; right: 0;
  top: 78px; bottom: 196px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--rand);
  opacity: 0; pointer-events: none; z-index: 4;
  overflow: hidden;   /* die äusseren Karten werden am Rand beschnitten */
}
.karussell.da { pointer-events: auto; }

.kar-buehne {
  position: relative; transform: translateZ(0); width: 100%;
  height: min(452px, 56vh);
}
/* weicher Schein hinter der vordersten Karte */
.kar-buehne::before {
  content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(760px, 62vw); height: min(620px, 74vh);
  background: radial-gradient(closest-side, rgba(255,252,240,.95), rgba(255,250,235,0) 72%);
  pointer-events: none;
}
.kar-karte {
  position: absolute; top: 50%; left: 50%;
  width: min(344px, 25vw); min-height: min(424px, 54vh);
  margin: 0; padding: 32px;
  display: flex; flex-direction: column;
  background: #EFEDE6; border: 1px solid rgba(20,24,15,.10); border-radius: 18px;
  box-shadow: 0 14px 34px -26px rgba(20,24,15,.4);
  opacity: 0; cursor: pointer;
  transform: translate3d(-50%, -50%, 0);
  transition: background .5s ease, box-shadow .6s ease, border-color .5s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.kar-karte.mitte {
  background: #FCFBF8; border-color: rgba(20,24,15,.09);
  box-shadow: 0 26px 60px -28px rgba(20,24,15,.28), 0 4px 14px -8px rgba(20,24,15,.14);
  cursor: default;
}
.kk-nr {
  position: absolute; top: 26px; right: 28px;
  font-size: 11px; letter-spacing: .14em; color: var(--grau);
}
.kk-icon {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--linie);
  display: grid; place-items: center; color: var(--ink);
  margin-bottom: auto;
}
.kk-icon svg { width: 25px; height: 25px; }
.kar-karte.mitte .kk-icon { border-color: rgba(20,24,15,.22); }
.kk-tt {
  margin-top: 30px;
  font-size: 21px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2;
}
.kar-karte.mitte .kk-tt { font-size: 27px; }
.kk-text {
  margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(20,24,15,.56);
}
.kar-karte.mitte .kk-text { color: rgba(20,24,15,.72); font-size: 15px; }
/* Die Kachel ist als Ganzes die Schaltflaeche. Der Verweis legt sich
   unsichtbar darueber, das Pfeilzeichen darin entfaellt: es war eine
   zweite, kleinere Trefferflaeche fuer dasselbe Ziel. */
.kk-pfeil {
  position: absolute; inset: 0; margin: 0;
  width: auto; height: auto; border: 0; border-radius: 18px;
  font-size: 0; color: transparent;
}
.kk-pfeil > span { display: none; }
/* Die ganze Kachel ist die Schaltflaeche: der Verweis legt sich
   unsichtbar darueber, das Zeichen darin bleibt sichtbar. So trifft man
   sie mit dem Daumen ueberall, nicht nur auf dem kleinen Kreis. */
.kar-karte { position: absolute; }
.kar-karte:not(.mitte) .kk-pfeil { pointer-events: none; }

.kar-steuer {
  display: flex; align-items: center; gap: 28px;
  margin-top: 26px;
}
.kar-pfeil {
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: 1px solid var(--linie); color: var(--ink);
  font-size: 15px; cursor: pointer;
  transition: background .35s, border-color .35s, color .35s;
}
.kar-pfeil:hover { background: var(--ink); border-color: var(--ink); color: var(--weiss); }
.kar-fortschritt { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kf-bahn {
  display: block; width: min(216px, 34vw); height: 1px;
  background: rgba(20,24,15,.16); position: relative; overflow: hidden;
}
.kf-fuellung {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: 16%; background: var(--ink);
}
.kf-zahl {
  font-size: 10px; letter-spacing: .22em; color: var(--grau);
  font-variant-numeric: tabular-nums;
}

/* das Zeichen tritt ab, während die Karten auffächern */
.zeichenfeld { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .kar-karte, .kar-steuer { transition: none; }
}

@media (max-width: 900px) {
  /* am Handy läuft das Karussell mit dem Scrollen mit, wie am Rechner.
     Zeichen und Karten liegen übereinander in der oberen Hälfte, die Zeile
     darunter — dadurch sitzt die Gruppe immer mittig, egal was gerade zu
     sehen ist. */
  /* Zeichen und Karten teilen sich denselben Bereich oben, die Zeile
     steht darunter im Fluss — so bleibt nichts verschoben. */
  /* Am Handy teilt ein Raster die Bühne: oben Zeichen und Karten im
     selben Feld, darunter die Zeile. Vorher standen beide mit svh
     gerechnet übereinander, und weil Safari die Adresszeile ein- und
     ausblendet, stimmte die Rechnung auf dem echten Gerät nicht: die
     Karten liefen in die Zeile hinein. Im Raster kann das nicht mehr
     passieren, egal wie hoch das Fenster gerade ist. */
  .haft {
    display: grid;
    /* eine Spalte ueber die volle Breite: ohne die Angabe richtet sich
       die Spalte nach dem breitesten Text und die Buehne wird zu schmal */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto;
    justify-items: center; align-items: center;
    padding: 78px var(--rand) 5svh;
  }
  .zeichenfeld, .karussell {
    grid-row: 1; grid-column: 1;
    position: relative; inset: auto; width: 100%; height: 100%;
    /* justify-items: center am Raster liess beide auf Inhaltsbreite
       schrumpfen, dadurch war die Buehne schmaler als die Karte und
       schnitt sie seitlich an */
    justify-self: stretch; align-self: stretch;
    padding: 0;
  }
  .zeichenfeld { display: grid; place-items: center; }
  /* Der Beschnitt sass bisher am ganzen Karussellfeld. Bei kleineren
     Fenstern ragte die Pfeilzeile darueber hinaus und wurde abgeschnitten.
     Jetzt blendet nur noch die Buehne seitlich aus, die Pfeile stehen
     frei darunter und koennen nicht mehr verschwinden. */
  .karussell {
    overflow: visible;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .kar-buehne {
    /* align-items: center liess die Buehne auf Inhaltsbreite schrumpfen,
       dadurch war sie schmaler als die Karte und schnitt sie seitlich an */
    flex: 0 1 auto; min-height: 0; width: 100%; align-self: stretch;
    /* Der Beschnitt sitzt jetzt hier statt am ganzen Feld: die
       aufgefaecherten Nachbarkarten ragen seitlich weit hinaus und
       schoben die Seite sonst waagrecht auf. Die Pfeile stehen
       ausserhalb und bleiben unbeschnitten. */
    overflow: hidden;
    /* Der Auslauf war in Prozent gerechnet und reichte damit fast bis an
       die vorderste Karte heran, die 80 Prozent der Breite einnimmt.
       Jetzt in Pixeln und schmal: er greift nur noch die Nachbarkarten
       am Rand, die vordere bleibt unangetastet. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .kar-steuer { flex: 0 0 auto; }
  .zeichenfeld canvas { width: min(74vw, 40vh); }
  /* jede Zeile in ihre eigene Reihe, sonst liegen sie uebereinander */
  .wortzeile { grid-row: 2; grid-column: 1; }
  .unterzeile { grid-row: 3; grid-column: 1; }
  .nachsatz { grid-row: 4; grid-column: 1; }
  .wink { grid-row: 5; grid-column: 1; margin-top: 12px; }
  /* die Bühne braucht eine feste Höhe, sonst richtet sie sich nach
     der Rasterzelle und die Karte wird oben abgeschnitten */
  .kar-buehne { height: min(392px, 50vh); }
  .kar-karte { width: min(320px, 80vw); padding: 22px; min-height: min(330px, 40vh); }
  @media (max-height: 700px) {
    .kar-karte { padding: 18px; min-height: min(286px, 41vh); }
    .kar-karte.mitte .kk-tt { font-size: 20px; }
    .kk-text, .kar-karte.mitte .kk-text { font-size: 14px; line-height: 1.5; }
    .kk-icon { width: 40px; height: 40px; }
  }
  @media (max-height: 640px) {
    /* Safari mit eingeblendeter Adresszeile auf kleineren Telefonen */
    .haft { padding-top: 68px; }
    .kar-buehne { height: 54vh; }
    .kar-karte { padding: 16px; min-height: min(240px, 40vh); }
    .kar-karte.mitte .kk-tt { font-size: 18px; }
    .kk-text, .kar-karte.mitte .kk-text { font-size: 13px; }
    .kar-steuer { margin-top: 12px; }
  }
  .kar-karte.mitte .kk-tt { font-size: 22px; }
  .kar-steuer { margin-top: 18px; gap: 18px; }
}


/* ---------- Ausgewählte Arbeiten: Bildband, das beim Scrollen durchzieht ---------- */
.ab-haft {
  position: sticky; top: 0; height: 100svh; width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  overflow: clip;   /* clip statt hidden: die Bühne bleibt klebrig */
}
.ab-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 0 var(--rand); margin-bottom: min(34px, 4vh);
}
.ar-kopf { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--grau); }
.ar-alle {
  padding-bottom: 5px;
  font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--linie);
}
.ar-alle span { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ar-alle:hover { border-bottom-color: var(--ink); }
.ar-alle:hover span { transform: translateX(5px); }

.ab-band {
  display: flex; gap: clamp(18px, 2vw, 34px); align-items: center;
  padding: 0 var(--rand);
  width: max-content; will-change: transform;
}
.ab-karte { flex: 0 0 auto; width: min(440px, 33vw); }
.ab-karte figure {
  margin: 0; overflow: hidden; border-radius: 8px; background: #EFEDE6;
  border: 1px solid var(--linie);
  aspect-ratio: 4 / 3;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s;
}
.ab-karte img { width: 100%; height: 100%; object-fit: cover; }
.ab-karte.vorn figure { transform: scale(1.04); box-shadow: 0 30px 60px -36px rgba(20,24,15,.4); }
.ab-zeile {
  display: block; margin-top: min(16px, 2vh);
  opacity: .42; transition: opacity .55s;
}
.ab-oben { display: flex; align-items: baseline; gap: 12px; }
.ab-karte.vorn .ab-zeile { opacity: 1; }
.ab-nr { font-size: 10px; letter-spacing: .16em; color: var(--grau); }
.ab-zeile b { font-size: min(clamp(16px, 1.5vw, 21px), 2.7vh); font-weight: 500; letter-spacing: -0.018em; }
.ab-zeile i {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--grau);
}
.ab-pfeil {
  margin-left: auto; font-size: 14px; color: var(--grau);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), color .4s;
}
.ab-karte:hover .ab-pfeil { transform: translate(4px, -4px); color: var(--ink); }

@media (max-width: 900px) {
  /* das Band läuft auch am Handy mit dem Scrollen mit */
  .ab-haft { position: sticky; top: 0; height: 100svh; padding: 0; overflow: clip; }
  .ab-kopf { margin-bottom: 20px; }
  .ab-band { gap: 14px; }
  .ab-karte { width: 74vw; }
  .ab-zeile { margin-top: 12px; }
  .ab-zeile b { font-size: 17px; }
}

/* ---------- Vertrauen uns bereits ---------- */
.vertrauen {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4svh var(--rand) 13svh;
  text-align: center;
}
.vt-kopf {
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--grau);
  margin-bottom: 40px;
}

/* die Marken ziehen ruhig durch, an den Rändern ins Papier verlaufend */
.vt-lauf {
  width: 100%; overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.vt-reihe {
  display: flex; align-items: center;
  gap: clamp(40px, 5vw, 84px);
  width: max-content; will-change: transform;
}
.vt-marke {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; opacity: 0;
  transition: filter .45s, opacity .45s;
}
.vt-marke img {
  height: 30px; width: auto; max-width: 164px; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: opacity .45s, filter .45s;
}
.vt-marke:hover img { opacity: 1; }
.vt-wort {
  font-size: clamp(15px, 1.35vw, 19px); letter-spacing: -0.01em; color: rgba(20,24,15,.62);
  transition: color .45s;
}
.vt-wort:hover { color: var(--ink); }

.vt-strich {
  width: min(1240px, 100%); height: 1px; border: 0; margin: clamp(42px, 5.4vh, 64px) 0;
  background: var(--linie); opacity: 0;
}

.vt-satz {
  margin-top: clamp(34px, 4.5vh, 52px); max-width: 62ch;
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.65; color: var(--grau);
  opacity: 0;
}

/* ---------- Schlussblock (der feste Fuss tritt dafür ab) ---------- */
.schluss {
  margin-top: 0; padding-top: 8svh;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px;
  padding: 0 var(--rand) 42px;
}
.fuss.weg { opacity: 0; pointer-events: none; transition: opacity .5s; }
.fuss { transition: opacity .5s; }

@media (prefers-reduced-motion: reduce) {
  .vt-marke, .vt-partner, .vt-satz, .vt-strich { opacity: 1 !important; }
  .haft { transform: none !important; opacity: 1 !important; }
}

@media (max-width: 900px) {
  .vertrauen { margin-top: 0; padding: 2svh var(--rand) 6svh; }
  .vt-kopf { margin-bottom: 30px; }
  .vt-reihe { gap: 34px; }
  .vt-marke { height: 26px; }
  .vt-marke img { height: 23px; max-width: 112px; }
  .vt-wort { font-size: 14px; }
  .vt-partner-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .vt-partner { padding: 6px 10px; gap: 10px; }
  .vt-zeichen { width: 40px; height: 40px; }
  .vt-zeichen svg { width: 18px; height: 18px; }
  .vt-partner b { font-size: 14px; }
  .vt-partner i { font-size: 8.5px; }
  .vt-partner:nth-child(3)::before, .vt-partner:nth-child(2n+1)::before { display: none; }
  .vt-satz { font-size: 13.5px; }
  .schluss { display: block; padding: 0 var(--rand) 40px; }
  .schluss .fu-mitte { text-align: left; margin: 14px 0; }
}


/* ---------- Leistungen als Karussell ---------- */
/* liegt über dem Platz des Zeichens, die Zeile darunter bleibt frei */
.karussell {
  position: absolute; left: 0; right: 0;
  top: 78px; bottom: 196px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--rand);
  opacity: 0; pointer-events: none; z-index: 4;
  overflow: hidden;   /* die äusseren Karten werden am Rand beschnitten */
}
.karussell.da { pointer-events: auto; }

.kar-buehne {
  position: relative; transform: translateZ(0); width: 100%;
  height: min(452px, 56vh);
}
/* weicher Schein hinter der vordersten Karte */
.kar-buehne::before {
  content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(760px, 62vw); height: min(620px, 74vh);
  background: radial-gradient(closest-side, rgba(255,252,240,.95), rgba(255,250,235,0) 72%);
  pointer-events: none;
}
.kar-karte {
  position: absolute; top: 50%; left: 50%;
  width: min(344px, 25vw); min-height: min(424px, 54vh);
  margin: 0; padding: 32px;
  display: flex; flex-direction: column;
  background: #EFEDE6; border: 1px solid rgba(20,24,15,.10); border-radius: 18px;
  box-shadow: 0 14px 34px -26px rgba(20,24,15,.4);
  opacity: 0; cursor: pointer;
  transform: translate3d(-50%, -50%, 0);
  transition: background .5s ease, box-shadow .6s ease, border-color .5s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.kar-karte.mitte {
  background: #FCFBF8; border-color: rgba(20,24,15,.09);
  box-shadow: 0 26px 60px -28px rgba(20,24,15,.28), 0 4px 14px -8px rgba(20,24,15,.14);
  cursor: default;
}
.kk-nr {
  position: absolute; top: 26px; right: 28px;
  font-size: 11px; letter-spacing: .14em; color: var(--grau);
}
.kk-icon {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--linie);
  display: grid; place-items: center; color: var(--ink);
  margin-bottom: auto;
}
.kk-icon svg { width: 25px; height: 25px; }
.kar-karte.mitte .kk-icon { border-color: rgba(20,24,15,.22); }
.kk-tt {
  margin-top: 30px;
  font-size: 21px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2;
}
.kar-karte.mitte .kk-tt { font-size: 27px; }
.kk-text {
  margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(20,24,15,.56);
}
.kar-karte.mitte .kk-text { color: rgba(20,24,15,.72); font-size: 15px; }
/* Die Kachel ist als Ganzes die Schaltflaeche. Der Verweis legt sich
   unsichtbar darueber, das Pfeilzeichen darin entfaellt: es war eine
   zweite, kleinere Trefferflaeche fuer dasselbe Ziel. */
.kk-pfeil {
  position: absolute; inset: 0; margin: 0;
  width: auto; height: auto; border: 0; border-radius: 18px;
  font-size: 0; color: transparent;
}
.kk-pfeil > span { display: none; }
/* Die ganze Kachel ist die Schaltflaeche: der Verweis legt sich
   unsichtbar darueber, das Zeichen darin bleibt sichtbar. So trifft man
   sie mit dem Daumen ueberall, nicht nur auf dem kleinen Kreis. */
.kar-karte { position: absolute; }
.kar-karte:not(.mitte) .kk-pfeil { pointer-events: none; }

.kar-steuer {
  display: flex; align-items: center; gap: 28px;
  margin-top: 26px;
}
.kar-pfeil {
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: 1px solid var(--linie); color: var(--ink);
  font-size: 15px; cursor: pointer;
  transition: background .35s, border-color .35s, color .35s;
}
.kar-pfeil:hover { background: var(--ink); border-color: var(--ink); color: var(--weiss); }
.kar-fortschritt { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kf-bahn {
  display: block; width: min(216px, 34vw); height: 1px;
  background: rgba(20,24,15,.16); position: relative; overflow: hidden;
}
.kf-fuellung {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: 16%; background: var(--ink);
}
.kf-zahl {
  font-size: 10px; letter-spacing: .22em; color: var(--grau);
  font-variant-numeric: tabular-nums;
}

/* das Zeichen tritt ab, während die Karten auffächern */
.zeichenfeld { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .kar-karte, .kar-steuer { transition: none; }
}

@media (max-width: 900px) {
  /* am Handy läuft das Karussell mit dem Scrollen mit, wie am Rechner.
     Zeichen und Karten liegen übereinander in der oberen Hälfte, die Zeile
     darunter — dadurch sitzt die Gruppe immer mittig, egal was gerade zu
     sehen ist. */
  /* Zeichen und Karten teilen sich denselben Bereich oben, die Zeile
     steht darunter im Fluss — so bleibt nichts verschoben. */
  /* Am Handy teilt ein Raster die Bühne: oben Zeichen und Karten im
     selben Feld, darunter die Zeile. Vorher standen beide mit svh
     gerechnet übereinander, und weil Safari die Adresszeile ein- und
     ausblendet, stimmte die Rechnung auf dem echten Gerät nicht: die
     Karten liefen in die Zeile hinein. Im Raster kann das nicht mehr
     passieren, egal wie hoch das Fenster gerade ist. */
  .haft {
    display: grid;
    /* eine Spalte ueber die volle Breite: ohne die Angabe richtet sich
       die Spalte nach dem breitesten Text und die Buehne wird zu schmal */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto;
    justify-items: center; align-items: center;
    padding: 78px var(--rand) 5svh;
  }
  .zeichenfeld, .karussell {
    grid-row: 1; grid-column: 1;
    position: relative; inset: auto; width: 100%; height: 100%;
    /* justify-items: center am Raster liess beide auf Inhaltsbreite
       schrumpfen, dadurch war die Buehne schmaler als die Karte und
       schnitt sie seitlich an */
    justify-self: stretch; align-self: stretch;
    padding: 0;
  }
  .zeichenfeld { display: grid; place-items: center; }
  /* Der Beschnitt sass bisher am ganzen Karussellfeld. Bei kleineren
     Fenstern ragte die Pfeilzeile darueber hinaus und wurde abgeschnitten.
     Jetzt blendet nur noch die Buehne seitlich aus, die Pfeile stehen
     frei darunter und koennen nicht mehr verschwinden. */
  .karussell {
    overflow: visible;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .kar-buehne {
    /* align-items: center liess die Buehne auf Inhaltsbreite schrumpfen,
       dadurch war sie schmaler als die Karte und schnitt sie seitlich an */
    flex: 0 1 auto; min-height: 0; width: 100%; align-self: stretch;
    /* Der Beschnitt sitzt jetzt hier statt am ganzen Feld: die
       aufgefaecherten Nachbarkarten ragen seitlich weit hinaus und
       schoben die Seite sonst waagrecht auf. Die Pfeile stehen
       ausserhalb und bleiben unbeschnitten. */
    overflow: hidden;
    /* Der Auslauf war in Prozent gerechnet und reichte damit fast bis an
       die vorderste Karte heran, die 80 Prozent der Breite einnimmt.
       Jetzt in Pixeln und schmal: er greift nur noch die Nachbarkarten
       am Rand, die vordere bleibt unangetastet. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .kar-steuer { flex: 0 0 auto; }
  .zeichenfeld canvas { width: min(74vw, 40vh); }
  /* jede Zeile in ihre eigene Reihe, sonst liegen sie uebereinander */
  .wortzeile { grid-row: 2; grid-column: 1; }
  .unterzeile { grid-row: 3; grid-column: 1; }
  .nachsatz { grid-row: 4; grid-column: 1; }
  .wink { grid-row: 5; grid-column: 1; margin-top: 12px; }
  /* die Bühne braucht eine feste Höhe, sonst richtet sie sich nach
     der Rasterzelle und die Karte wird oben abgeschnitten */
  .kar-buehne { height: min(392px, 50vh); }
  .kar-karte { width: min(320px, 80vw); padding: 22px; min-height: min(330px, 40vh); }
  @media (max-height: 700px) {
    .kar-karte { padding: 18px; min-height: min(286px, 41vh); }
    .kar-karte.mitte .kk-tt { font-size: 20px; }
    .kk-text, .kar-karte.mitte .kk-text { font-size: 14px; line-height: 1.5; }
    .kk-icon { width: 40px; height: 40px; }
  }
  @media (max-height: 640px) {
    /* Safari mit eingeblendeter Adresszeile auf kleineren Telefonen */
    .haft { padding-top: 68px; }
    .kar-buehne { height: 54vh; }
    .kar-karte { padding: 16px; min-height: min(240px, 40vh); }
    .kar-karte.mitte .kk-tt { font-size: 18px; }
    .kk-text, .kar-karte.mitte .kk-text { font-size: 13px; }
    .kar-steuer { margin-top: 12px; }
  }
  .kar-karte.mitte .kk-tt { font-size: 22px; }
  .kar-steuer { margin-top: 18px; gap: 18px; }
}


/* ---------- Ausgewählte Arbeiten ---------- */
.ar-kopf {
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--grau);
  margin-bottom: 34px;
}
.ar-liste { width: min(1160px, 100%); border-top: 1px solid var(--linie); }

.ar-zeile {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.25fr) minmax(0, 1fr) 26px;
  grid-template-areas:
    "nr name art pfeil"
    "nr satz art pfeil";
  align-items: start; column-gap: 26px;
  padding: 30px 6px; border-bottom: 1px solid var(--linie);
  position: relative;
  transition: padding-left .55s cubic-bezier(.2,.8,.2,1), color .4s;
}
.ar-zeile:hover { padding-left: 22px; }
.ar-nr { grid-area: nr; font-size: 11px; letter-spacing: .16em; color: var(--grau); padding-top: .5em; }
.ar-name {
  grid-area: name;
  font-size: clamp(21px, 2.5vw, 34px); font-weight: 500; letter-spacing: -0.022em; line-height: 1.05;
}
.ar-art {
  grid-area: art; justify-self: end; text-align: right; padding-top: .7em;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grau);
}
.ar-satz {
  grid-area: satz;
  margin-top: 9px; font-size: 13.5px; line-height: 1.55; color: var(--grau); max-width: 54ch;
}
.ar-pfeil {
  grid-area: pfeil; align-self: center; justify-self: end;
  font-size: 17px; color: var(--grau);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), color .4s;
}
.ar-zeile:hover .ar-pfeil { transform: translate(4px, -4px); color: var(--ink); }

.ar-alle {
  margin-top: 40px; padding-bottom: 5px;
  font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--linie);
}
.ar-alle span { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ar-alle:hover { border-bottom-color: var(--ink); }
.ar-alle:hover span { transform: translateX(5px); }

/* die Vorschau folgt dem Zeiger */
.ar-schau {
  position: fixed; top: 0; left: 0; z-index: 25; margin: 0;
  width: 290px; height: 200px; pointer-events: none;
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.92);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  overflow: hidden; border-radius: 12px;
  box-shadow: 0 30px 60px -34px rgba(20,24,15,.5);
}
.ar-schau.da { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.ar-schau img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (hover: none), (max-width: 900px) {
  .ar-schau { display: none; }
  .ar-zeile {
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    grid-template-areas:
      "nr name pfeil"
      "nr art  pfeil"
      "nr satz pfeil";
    column-gap: 14px; padding: 22px 0;
  }
  .ar-zeile:hover { padding-left: 0; }
  .ar-name { font-size: 20px; }
  .ar-art { justify-self: start; text-align: left; margin-top: 7px; padding-top: 0; }
  .ar-satz { font-size: 13px; margin-top: 7px; }
  .ar-pfeil { align-self: start; padding-top: .3em; }
}


/* ---------- Gut zu wissen ---------- */
.fragen { position: relative; z-index: 2; margin-top: -6svh; padding: 6svh var(--rand) 7svh; }
@media (max-width: 900px) { .fragen { margin-top: -12svh; padding: 4svh var(--rand) 5svh; } }
.fq-innen {
  width: min(1240px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.25fr);
  gap: clamp(30px, 5vw, 80px); align-items: start;
}
.fq-titel {
  margin-top: 14px;
  font-size: clamp(26px, 3vw, 40px); font-weight: 500; line-height: 1.12; letter-spacing: -0.028em;
}
.fq-text { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: var(--grau); max-width: 34ch; }
.fq-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding-bottom: 5px;
  font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase;
  border-bottom: 1px solid var(--linie);
}
.fq-link:hover { border-bottom-color: var(--ink); }


.fg-ort { font-size: 13px; color: var(--grau); margin-top: 4px; }

.fg-unten {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--linie); padding-top: 22px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--grau);
}

@media (max-width: 900px) {
  .fragen { margin-top: 0; padding: 5svh var(--rand) 5svh; }
  .fq-innen { grid-template-columns: 1fr; gap: 30px; }
  .fq-punkt summary { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 18px 0; font-size: 15px; }
  .fq-punkt p { padding: 0 0 20px 42px; font-size: 13px; }
  /* Am Handy ist der Fuss eine aufgeräumte Tafel: Marke, Satz, dann vier
     Blöcke mit feiner Linie darüber, unten die Zeile in Ruhe. */
  .fuss-gross { padding: 40px var(--rand) 30px; }
  .fg-oben {
    grid-template-columns: 1fr; gap: 12px;
    padding-bottom: 26px;
  }
  .fg-marke img { width: 20px; height: 20px; }
  .fg-marke b { font-size: 15px; }
  .fg-satz { font-size: 14px; line-height: 1.55; max-width: 30ch; }

  .fg-spalten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px; padding-bottom: 26px;
  }
  .fg-spalten > * {
    border-top: 1px solid var(--linie); padding-top: 14px;
  }
  .fg-kopf { font-size: 9px; letter-spacing: .2em; margin-bottom: 6px; }
  .fg-spalten a { margin-bottom: 0; color: var(--ink); }
  .fg-spalten div:nth-child(3) a { word-break: break-word; }
  .fg-ort { font-size: 13px; margin-top: 2px; }

  .fg-unten {
    flex-direction: column; align-items: flex-start; gap: 6px;
    padding-top: 18px; font-size: 9px; letter-spacing: .14em; line-height: 1.8;
  }
}

/* ---------- Über uns: die Schrift, die für uns spricht ---------- */
.rede { height: 150svh; }
.rede-haft {
  position: sticky; top: 0; height: 100svh; margin-top: -10svh;
  display: flex; align-items: center;
  padding: 92px var(--rand) 60px;
}
.rede-innen { width: min(1340px, 100%); margin: 0 auto; text-align: center; }

.rede-augen {
  display: inline-block; padding-bottom: min(16px, 2vh); min-width: 84px;
  margin: 0 auto;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--grau);
  border-bottom: 1px solid var(--linie);
  transition: color .35s, border-color .35s;
}
.rede-augen:hover { color: var(--ink); border-bottom-color: var(--ink); }

.rede-satz {
  margin: min(30px, 3.6vh) auto 0; max-width: 21ch;
  font-size: min(clamp(28px, 3.8vw, 56px), 6.6vh);
  font-weight: 500; line-height: 1.14; letter-spacing: -0.032em;
}
/* die Farbe setzt die Schleife in malRede — kein CSS-Nachlauf */
.rede-satz .rw { display: inline-block; color: rgba(20,24,15,.26); transition: color .05s linear; }

.rede-boden {
  text-align: left;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) auto;
  gap: clamp(24px, 4vw, 70px); align-items: start;
  margin-top: min(46px, 5.4vh); padding-top: min(22px, 2.6vh);
  border-top: 1px solid var(--linie);
}
.rede-weg {
  display: flex; align-items: center; gap: 16px; opacity: 0;
  font-size: 9.5px; letter-spacing: .19em; text-transform: uppercase; line-height: 1.7; color: var(--grau);
  transition: color .35s;
}
.rede-weg:hover { color: var(--ink); }
.rede-kreis {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--linie); display: grid; place-items: center;
  font-size: 14px; color: var(--ink);
  transition: background .4s, color .4s, transform .4s cubic-bezier(.2,.8,.2,1);
}
.rede-weg:hover .rede-kreis { background: var(--ink); color: var(--weiss); transform: translateY(3px); }

.rede-text {
  font-size: min(12.5px, 1.7vh); line-height: 1.65; color: var(--grau); max-width: 44ch; opacity: 0;
}
.rede-haus { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--linie); opacity: 0; text-align: left; }
.rede-kopf {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--grau); margin-bottom: 10px;
}
.rede-haus p:not(.rede-kopf) {
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase; line-height: 2; color: var(--grau);
}

@media (prefers-reduced-motion: reduce) {
  .rede-satz .rw { color: var(--ink); }
  .rede-weg, .rede-text, .rede-haus { opacity: 1; }
}

@media (max-width: 900px) {
  /* weniger Wucht: kleinere Schrift, engere Zeile, kein Nachlauf ins Leere */
  .rede { height: 126svh; }
  .rede-haft { height: 100svh; padding: 72px var(--rand) 24px; margin-top: -8svh; }
  .rede-satz {
    max-width: 17ch; margin-top: 20px;
    font-size: clamp(22px, 6.4vw, 30px); line-height: 1.22; letter-spacing: -0.026em;
  }
  .rede-boden { grid-template-columns: 1fr; gap: 18px; margin-top: 26px; padding-top: 18px; }
  .rede-haus { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); padding-top: 16px; }
}



/* ---------- Fuss ----------
   Am Rechner vier Spalten mit Zeichen und feinen Trennlinien, am Handy
   vier Zeilen zum Aufklappen. Die Bloecke stehen im HTML offen, damit
   ohne Skript nichts fehlt; erst das Skript klappt sie am Handy zu. */
.fuss-gross {
  position: relative; z-index: 2;
  width: min(1240px, 100%); margin: 0 auto;
  padding: 6svh var(--rand) 4svh;
  border-top: 1px solid var(--linie);
}

.fg-oben {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 30px); align-items: center;
  padding-bottom: clamp(30px, 4.4vh, 52px);
}
.fg-marke { display: block; }
.fg-marke img { width: clamp(34px, 3vw, 44px); height: auto; display: block; }
.fg-worte { border-left: 1px solid var(--linie); padding-left: clamp(18px, 1.8vw, 28px); }
.fg-name {
  font-size: clamp(16px, 1.35vw, 20px); font-weight: 500;
  letter-spacing: -0.012em; line-height: 1.2; color: var(--ink);
}
.fg-satz {
  margin-top: 6px; font-size: clamp(13px, 1vw, 15px); line-height: 1.6; color: var(--grau);
}

.fg-spalten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  padding-bottom: clamp(30px, 4.4vh, 52px);
}
.fg-block { border: 0; }
.fg-block + .fg-block {
  border-left: 1px solid var(--linie); padding-left: clamp(20px, 2.6vw, 44px);
}
.fg-block > summary {
  display: flex; align-items: center; gap: 12px; list-style: none; cursor: default;
}
.fg-block > summary::-webkit-details-marker { display: none; }
.fg-zeichen { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink); }
.fg-zeichen svg { width: 23px; height: 23px; }
.fg-winkel { display: none; }
.fg-block .fg-kopf {
  margin: 0; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
}
.fg-inhalt { display: flex; flex-direction: column; padding-top: clamp(14px, 1.8vh, 22px); }
.fg-inhalt a {
  padding: 5px 0; font-size: 14px; color: rgba(20,24,15,.72); transition: color .35s;
}
.fg-inhalt a:hover { color: var(--ink); }
.fg-karte { display: none; }

@media (max-width: 900px) {
  /* Zeichen und Name in einer Zeile, der Satz darunter über die volle Breite */
  .fg-oben { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding-bottom: 26px; }
  .fg-worte { display: contents; border-left: 0; padding-left: 0; }
  .fg-marke img { width: 30px; }
  .fg-name { grid-column: 2; grid-row: 1; font-size: 19px; }
  .fg-satz { grid-column: 1 / -1; grid-row: 2; margin-top: 12px; font-size: 15px; }

  .fg-spalten { grid-template-columns: 1fr; gap: 0; padding-bottom: 22px; }
  .fg-spalten > * { border-top: 0; padding-top: 0; }
  .fg-block + .fg-block { border-left: 0; padding-left: 0; }

  /* Vier Zeilen zum Aufklappen, mit Zeichen links und Winkel rechts. */
  .fg-spalten { grid-template-columns: 1fr; gap: 0; padding-bottom: 22px; }
  .fg-block { border-bottom: 1px solid var(--linie); background: none; border-radius: 0; padding: 0; }
  .fg-block:first-of-type { border-top: 1px solid var(--linie); }
  .fg-block > summary {
    display: flex; align-items: center; gap: 14px;
    min-height: 56px; cursor: pointer; list-style: none; pointer-events: auto;
    color: var(--ink);
  }
  .fg-block > summary::-webkit-details-marker { display: none; }
  .fg-zeichen { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; color: var(--ink); }
  .fg-zeichen svg { width: 20px; height: 20px; }
  .fg-block .fg-kopf {
    margin: 0; flex: 1 1 auto;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  }
  .fg-winkel {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 20px; height: 20px; color: var(--grau);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .fg-winkel svg { width: 18px; height: 18px; }
  .fg-block[open] .fg-winkel { transform: rotate(180deg); }
  .fg-inhalt { padding: 2px 0 16px 36px; display: flex; flex-direction: column; }
  .fg-inhalt a {
    font-size: 15px; color: rgba(20,24,15,.72);
    min-height: 44px; display: flex; align-items: center; overflow-wrap: anywhere;
  }

  /* die Karte mit dem kurzen Weg zu uns */
  .fg-karte {
    display: flex; align-items: center; gap: 16px;
    margin: 4px 0 24px; padding: 16px 18px;
    background: #F1EFE8; border-radius: 12px;
  }
  .fg-karte-zeichen {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    background: var(--weiss); display: grid; place-items: center;
  }
  .fg-karte-zeichen img { width: 22px; height: 22px; }
  .fg-karte-text b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
  .fg-karte-text i { display: block; margin-top: 3px; font-style: normal; font-size: 13px; color: var(--grau); }
}


/* ---------- Gut zu wissen ----------
   Kein Aufklappen: links die Frage waehlen, rechts steht die Antwort
   gross da. Damit unterscheidet sich der Abschnitt vom Fuss, wo es
   Zeilen zum Aufklappen gibt, und man sieht alle Fragen auf einmal. */
.fq-rechts { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 34px); min-width: 0; }
.fq-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.fq-frage {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 100px;
  background: none; border: 1px solid var(--linie); color: var(--grau);
  font: inherit; font-size: 13px; letter-spacing: -0.008em; text-align: left;
  cursor: pointer; transition: color .35s, border-color .35s, background .35s;
}
.fq-frage i {
  font-style: normal; font-size: 9px; letter-spacing: .16em; color: var(--grau);
  transition: color .35s;
}
.fq-frage:hover { color: var(--ink); border-color: rgba(20,24,15,.28); }
.fq-frage.da {
  background: var(--ink); border-color: var(--ink); color: var(--weiss);
}
.fq-frage.da i { color: rgba(248,247,244,.55); }

.fq-tafel { position: relative; min-height: min(240px, 30vh); }
.fq-antwort {
  border-top: 1px solid var(--linie); padding-top: min(26px, 3vh);
}
/* erst wenn das Skript laeuft, wird umgeschaltet: ohne Skript stehen
   alle Antworten untereinander und nichts fehlt */
#fqrechts.bereit .fq-antwort { display: none; }
#fqrechts.bereit .fq-antwort.da { display: block; }
.fq-antwort p {
  font-size: min(clamp(17px, 1.7vw, 24px), 3.2vh); line-height: 1.55;
  letter-spacing: -0.018em; color: var(--ink); max-width: 46ch;
}
.fq-antwort.wechselt p { opacity: 0; transform: translateY(8px); }
.fq-antwort p {
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}

@media (max-width: 900px) {
  /* die Fragen laufen seitwaerts, die Antwort steht darunter */
  .fq-wahl {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand) 2px;
    scroll-snap-type: x proximity;
  }
  .fq-wahl::-webkit-scrollbar { display: none; }
  .fq-frage { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; font-size: 13.5px; }
  .fq-tafel { min-height: 200px; }
  .fq-antwort p { font-size: 17px; line-height: 1.6; }
}