/* -------------------------------------------------------------------------------------------------
   MANDL.DESIGN
   Mobile first, Klassen nach BEM. Breakpoints: 400px, 521px, 900px, 1024px; Obergrenzen auf .98px,
   mit Zoom gibt es Breiten wie 520,8px.
   Selektoren möglichst aus einer Klasse, dann entscheidet die Reihenfolge der Abschnitte.
   Eigenschaften in dieser Folge: Lage, Anzeige und Raster, Maße, Abstände, Rahmen, Grund und Bild,
   Schrift, Bewegung, Bedienung.
------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------
   SCHRIFTEN
------------------------------------------------------------------------------------------------- */

/* swap: Im ersten Bildschirm steht kein Text, bis dahin sind die Schriften geladen */
@font-face {
  font-family: "Basier Circle Mono";
  src: url("../font/basier-circle-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basier Circle Mono";
  src: url("../font/basier-circle-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* -------------------------------------------------------------------------------------------------
   TOKENS
------------------------------------------------------------------------------------------------- */

:root {
  /* Palette */
  --sand:   #D3CEBA;
  --braun:  #45260E;
  --oliv:   #5E583C;
  --schilf: #B6BC94;

  /* Farben nach Rolle, Ausgangszustand wie der Kopf (theme-color in head.php) */
  --color-bg:    var(--schilf);
  --color-text:  var(--braun);
  --color-brand: #FF2600;  /* nur Logo und Bildmarke */

  /* Schrift */
  --font-mono: "Basier Circle Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-s:  0.875rem;
  --text-m:  1rem;
  --text-xl: clamp(1.5rem, 0.9rem + 1.92vw, 3.55rem);  /* 24px bis 500px, 42px bei 1440px, 57px ab 2210px */
  --text-eyebrow: max(var(--text-m), var(--text-xl) * 16 / 42);  /* bis 1440px fest, dann mit --text-xl */
  --text-tag:     max(var(--text-s), var(--text-xl) * 14 / 42);

  /* Abstände: Stufe × 4px */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-7:  1.75rem;
  --space-16: 4rem;
  --space-64: 16rem;

  /* Maße */
  --gutter:          1.25rem;
  --logomark-size:   2.2rem;        /* Bildmarke in der Ecke */
  --measure:         34rem;
  --logo-width:      84vw;          /* auch Breite des Satzspiegels */
  --phone-ratio:     472.08 / 773;  /* Handy, siehe .phone__device */

  /* Raster: 12 Spalten, Module so hoch wie breit */
  --gap:    clamp(var(--space-2), 1vw, var(--space-4));
  --module: calc((var(--logo-width) - 11 * var(--gap)) / 12);

  /* Über der Bildwand: mit dem Abstand des Rasters 96px bis 1440px, 160px bei 2210px */
  --space-wall: clamp(4.25rem, 8.31vw - 3.23rem, 8.25rem);

  /* Bewegung */
  --duration-s: 0.2s;
  --duration-m: 0.5s;  /* für Bewegungen */
  --duration-l: 1s;    /* für Blenden */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);

  --footer-line-height: 1.6;
}

/* Display P3: derselbe Farbton, nur satter */
@media (color-gamut: p3) {
  :root {
    --color-brand: color(display-p3 0.957 0.158 0);
  }
}

/* Episodenpaare aus Grund und Schrift, Kontrast mindestens 4,5 : 1. Jedes neue Paar prüfen. */
[data-episode="oliv"]     { --color-bg: var(--oliv);   --color-text: var(--sand); }
[data-episode="petrol"]   { --color-bg: #375D5F;       --color-text: var(--sand); }
[data-episode="lehm"]     { --color-bg: #CBA993;       --color-text: var(--braun); }
[data-episode="glut"]     { --color-bg: #61251C;       --color-text: var(--sand); }
[data-episode="seladon"]  { --color-bg: #A4BFAC;       --color-text: var(--braun); }
[data-episode="schiefer"] { --color-bg: #43576D;       --color-text: var(--sand); }
[data-episode="tinte"]    { --color-bg: #46567C;       --color-text: var(--sand); }
[data-episode="schilf"]   { --color-bg: var(--schilf); --color-text: var(--braun); }
[data-episode="umbra"]    { --color-bg: var(--braun);  --color-text: var(--sand); }

/* Breakpoint wie beim Logo */
@media (min-width: 521px) {
  :root {
    --logo-width:    min(76vw, 1680px);
    --logomark-size: 2.75rem;
  }
}


/* -------------------------------------------------------------------------------------------------
   RESET
------------------------------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;  /* iOS vergrößert sonst die Schrift im Querformat */
}

body,
h1, h2, h3, h4,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

[hidden] {
  display: none !important;  /* auch gegen display aus Klassen */
}


/* -------------------------------------------------------------------------------------------------
   BASIS
------------------------------------------------------------------------------------------------- */

/* Kein scroll-behavior: smooth, sonst rollt Chrome auch beim Neuladen zur alten Stelle */
html {
  scrollbar-gutter: stable;
}

body {
  position: relative;  /* Bezug für .logomark-track */
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  /* ss01: einstöckiges a. Wer font-feature-settings oder font setzt, muss es wiederholen */
  font-feature-settings: "ss01";
  line-height: 1.5;
}

/* Weich erst, wenn der erste Zustand steht (Skript EPISODEN). Die Schrift nur außerhalb der Episoden. */
:root[data-color-ready] body {
  transition:
    background-color var(--duration-m) ease,
    color var(--duration-m) ease;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

address {
  font-style: normal;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

@media (hover: hover) {
  a:hover {
    text-decoration-thickness: 2px;  /* nicht die Logofarbe: Kontrast nur 2,41:1 */
  }
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 2px;
}


/* -------------------------------------------------------------------------------------------------
   LAYOUT
------------------------------------------------------------------------------------------------- */

.hero {
  display: grid;
  place-items: center;
  min-height: 100vh;   /* Rückfallebene */
  min-height: 100svh;
  padding-block: var(--gutter);
}

/* Mit der Zeile des Fußes genau ein Bildschirm: Am Ende steht das Logo wieder in der Mitte */
.outro {
  --footer-row: calc(2 * var(--gutter) + 2 * var(--space-1) + var(--text-xs) * var(--footer-line-height));
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--footer-row));   /* Rückfallebene */
  min-height: calc(100svh - var(--footer-row));
}

/* Der Auftritt des letzten Logos wartet, bis die Bildmarke landet (Skript BILDMARKE) */
.outro[data-reveal=""] :is(.logo__name, .logo__glyph, .logo__cursor) {
  animation-play-state: paused;
}

/* Satzspiegel, so breit wie das Logo */
.wrapper {
  width: var(--logo-width);
  margin-inline: auto;
}


/* -------------------------------------------------------------------------------------------------
   LOGO
------------------------------------------------------------------------------------------------- */

.logo {
  width: var(--logo-width);
  line-height: 0;  /* keine Leerzeile unter dem SVG */
  transition: opacity var(--duration-m) var(--ease-out);
}

/* opacity statt visibility: Der Name bleibt für Screenreader lesbar */
:root[data-logomark="corner"] .logo {
  opacity: 0;
}

.logo__image {
  width: 100%;
  height: auto;
  overflow: visible;  /* der Cursor endet außerhalb der viewBox */
  fill: var(--color-brand);
}

/* Die andere Fassung ohne Höhe statt display: none, sonst startet ihr Auftritt neu */
.logo__image--wide {
  height: 0;
  visibility: hidden;
}

@media (min-width: 521px) {
  .logo__image--stacked {
    height: 0;
    visibility: hidden;
  }

  .logo__image--wide {
    height: auto;
    visibility: visible;
  }
}

/* Auftritt: „mandl“ ab 0,1 s, „Design“ getippt ab 1 s */
.logo__name {
  animation: logo-appear 0.6s 0.1s var(--ease-out) both;
}

@keyframes logo-appear {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
}

/* nth-child ab 2, das erste Kind ist der Cursor */
.logo__glyph {
  animation: logo-type 1ms both;
}

.logo__glyph:nth-child(2) { animation-delay: 1s; }
.logo__glyph:nth-child(3) { animation-delay: 1.08s; }
.logo__glyph:nth-child(4) { animation-delay: 1.22s; }
.logo__glyph:nth-child(5) { animation-delay: 1.3s; }
.logo__glyph:nth-child(6) { animation-delay: 1.44s; }
.logo__glyph:nth-child(7) { animation-delay: 1.52s; }

@keyframes logo-type {
  from { opacity: 0; }
}

/* Raster: 21,6 Einheiten je Spalte, 42 je Zeile. 2 s ab 0,5 s, also 1 % = 20 ms. */
.logo__cursor {
  animation: logo-cursor 2s 0.5s step-end both;
}

@keyframes logo-cursor {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }                                /* 0,70 s  vor dem D */
  25%  { transform: translate(21.6px, 0); }           /* 1,00 s  vor dem e */
  29%  { transform: translate(0, 42px); }             /* 1,08 s  vor dem s */
  36%  { transform: translate(21.6px, 42px); }        /* 1,22 s  vor dem i */
  40%  { transform: translate(0, 84px); }             /* 1,30 s  vor dem g */
  47%  { transform: translate(21.6px, 84px); }        /* 1,44 s  vor dem n */
  51%  { transform: translate(43.2px, 84px); }        /* 1,52 s  fertig    */
  65%  { opacity: 0; }                                /* 1,80 s  blinkt …  */
  78%  { opacity: 1; }                                /* 2,06 s            */
  90%  { opacity: 0; }                                /* 2,30 s  … und weg */
  100% { opacity: 0; transform: translate(43.2px, 84px); }
}

/* Gestapelt: dieselben Zeiten, 20 Einheiten je Zeichen in einer Zeile */
.logo__cursor--stacked {
  animation-name: logo-cursor-stacked;
}

@keyframes logo-cursor-stacked {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  25%  { transform: translate(20px, 0); }
  29%  { transform: translate(40px, 0); }
  36%  { transform: translate(60px, 0); }
  40%  { transform: translate(80px, 0); }
  47%  { transform: translate(100px, 0); }
  51%  { transform: translate(120px, 0); }
  65%  { opacity: 0; }
  78%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; transform: translate(120px, 0); }
}


/* -------------------------------------------------------------------------------------------------
   BILDMARKE
------------------------------------------------------------------------------------------------- */

/* Lage und Breite setzt das Skript. Nie Anker fürs Scrollen: Chrome sucht beim Neuladen sonst die
   Bildmarke, und die steht bis zum Skript am Seitenende */
.logomark-track {
  position: absolute;
  bottom: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-anchor: none;
}

/* Mit JavaScript ersetzt die Bildmarke das m im Logo */
:root[data-logomark-ready] .logo__m {
  visibility: hidden;
}

:root[data-logomark-ready] .logomark-track {
  visibility: visible;
}

/* Am Pfad, nicht am SVG: Nur dort sind die 9px aus logo-appear SVG-Einheiten */
.logomark__glyph {
  animation: logo-appear 0.6s 0.1s var(--ease-out) both;
}

.logomark {
  position: sticky;
  top: var(--gutter);  /* das Skript liest --gutter, nicht top */
  width: 100%;
  height: auto;
  fill: var(--color-brand);
  transform-origin: 0 0;
  transition: transform var(--duration-m) var(--ease-out);
}

/* --logomark-corner setzt das Skript */
:root[data-logomark="corner"] .logomark {
  transform: var(--logomark-corner, none);
}

/* Im Ausklang liegt sie im m des letzten Logos und rollt mit der Seite, --logomark-end setzt das Skript */
:root[data-logomark="end"] .logomark {
  position: absolute;
  top: var(--logomark-end, 0px);
  left: 0;
}


/* -------------------------------------------------------------------------------------------------
   EPISODEN
------------------------------------------------------------------------------------------------- */

.episode {
  overflow-x: clip;  /* Bilder dürfen bis an den Fensterrand ragen, ohne Scrollbereich */
  padding-block: clamp(var(--space-16), 30svh, var(--space-64));
}

/* Nur der Grund blendet: Blendete die Schrift mit, fiele der Kontrast im Wechsel auf 1,2 : 1 */
[data-episode] {
  color: var(--color-text);
}

/* Ohne Skript trägt jede Episode ihren Grund selbst, mit harten Kanten */
:root:not([data-episode]) [data-episode] {
  background-color: var(--color-bg);
}

.episode__grid {
  display: grid;
  gap: var(--space-7);
}

.episode__grid > * {
  grid-column: 1 / -1;
}

/* Die 12 Spalten der Seite, die Bildwand übernimmt sie */
@media (min-width: 521px) {
  .episode__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}

/* data-fade-in und data-seen setzt das Skript EPISODEN */
:root[data-fade-in] .episode__grid {
  opacity: 0;
}

/* Übergang am Ziel: Nur das Zeigen blendet, Verstecken ist sofort */
:root[data-fade-in] .episode[data-seen] .episode__grid {
  opacity: 1;
  transition: opacity var(--duration-l) ease;  /* --ease-out wirkt bei Deckkraft zu abrupt */
}

/* data-wipe setzt das Skript MASKE. Ungleiche Stützstellen, linear bandet es. */
[data-wipe] {
  --wipe-band: clamp(5rem, 18vh, 10rem);
  --wipe-mask: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0)    var(--wipe),
    rgb(0 0 0 / 0.04) calc(var(--wipe) + 0.25 * var(--wipe-band)),
    rgb(0 0 0 / 0.25) calc(var(--wipe) + 0.5  * var(--wipe-band)),
    rgb(0 0 0 / 0.65) calc(var(--wipe) + 0.75 * var(--wipe-band)),
    rgb(0 0 0 / 1)    calc(var(--wipe) + var(--wipe-band))
  );
  -webkit-mask-image: var(--wipe-mask);
          mask-image: var(--wipe-mask);
}

.episode__eyebrow {
  justify-self: start;
  margin-right: -0.12em;  /* Sperrung nach dem letzten Zeichen */
  padding-bottom: var(--space-1);
  border-bottom: 2px solid currentColor;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.episode__text {
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Label über den Spalten 1 bis 3, so breit wie das m im Logo */
@media (min-width: 1024px) {
  .episode__grid {
    align-items: start;
  }

  .episode__eyebrow {
    grid-column: 1 / span 3;
    margin-top: calc(var(--text-xl) * 0.3);  /* auf die erste Textzeile */
  }
}


/* -------------------------------------------------------------------------------------------------
   ÜBER MICH
------------------------------------------------------------------------------------------------- */

/* Schmal steht das Porträt klein neben dem Namen, darunter der Satz */
.about__grid {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
}

.about__portrait {
  --clip: circle(50%);  /* Safari verliert border-radius am laufenden Video */
  grid-column: 1;
  width: 5.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 20%, transparent);  /* bis das erste Bild da ist */
}

/* Mager: fett bleibt den Projekten. Unten bündig, der Strich auf Höhe der Unterkante des Kreises. */
.about__name {
  grid-column: 2;
  align-self: end;
  font-weight: 400;
}

/* Ab 1024px: Porträt auf Spalte 1 und 2, Spalte 3 bleibt frei, Name und Satz ab Spalte 4 */
@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;  /* ist das Porträt höher als der Text, wächst nur die untere Zeile */
    column-gap: var(--gap);
    row-gap: calc(var(--text-xl) * 0.5);
  }

  .about__portrait {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    width: auto;
    /* Oberkante auf der ersten Textzeile: Name, Abstand, Strich, Oberlänge */
    margin-top: calc(var(--text-eyebrow) + var(--space-1) + 2px + var(--text-xl) * 0.875);
  }

  .about__name {
    grid-column: 4 / -1;
    align-self: start;
    margin-top: 0;
  }

  .about__text {
    grid-column: 4 / -1;
  }
}


/* -------------------------------------------------------------------------------------------------
   PROJEKT
------------------------------------------------------------------------------------------------- */

.project__intro {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .project__intro {
    grid-column: 4 / -1;
  }
}

/* role="list" am <ul>: Ohne list-style liest Safari es sonst nicht als Liste vor */
.project__services {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-tag);
  line-height: 1.3;
}

.project__services-label {
  flex: none;
}

.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.project__tag {
  --border: 1.5px;
  position: relative;  /* Bezug für die Füllung */
  padding: 0.3em 0.7em;
  border: var(--border) solid currentColor;
}

/* Auftritt, die Füllung setzt das Skript TAGS */
.project__tag-fill {
  position: absolute;
  inset: calc(-1 * var(--border));
  padding: inherit;
  border: var(--border) solid var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.project__tags[data-reveal="run"] .project__tag-fill {
  animation: tag-wipe 420ms cubic-bezier(0.65, 0, 0.35, 1) calc(250ms + var(--index) * 90ms) forwards;
}

@keyframes tag-wipe {
  from { clip-path: inset(0); }  /* ausgeschrieben, siehe uncover */
  to   { clip-path: inset(0 0 0 100%); }
}

/* Kontrastmodus: Die Farben setzt das System, die Füllung sähe aus wie der Tag selbst */
@media (forced-colors: active) {
  .project__tag-fill {
    display: none;
  }
}

/* Unter 400px nur die Tags, „Von mir:“ bleibt für Screenreader (wie .visually-hidden) */
@media (max-width: 399.98px) {
  .project__services-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.project__wall {
  margin-top: var(--space-wall);
}


/* -------------------------------------------------------------------------------------------------
   BILDWAND
------------------------------------------------------------------------------------------------- */

/* Figuren: offset-left/-right, solo-left/-right, trio. Formate an jeder Breite gleich */
.wall__item--landscape { --format: 527 / 373; }
.wall__item--portrait  { --format: 296 / 373; }
.wall__item--panorama  { --format: 912 / 373; }

.wall__caption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  overflow-wrap: break-word;
}

/* Kleine Tafel am Ende einer Bildwand, etwa für eine Ausstellung, gerahmt wie die Tags */
.wall__info {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1.5px solid currentColor;
  font-size: var(--text-xs);
  line-height: 1.4;
  text-wrap: pretty;
}

.wall__info-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wall__info-title {
  font-size: var(--text-tag);
  font-weight: 700;
  line-height: 1.25;
}

/* Band bis 520px. Abstand gleich Rand: Das vorige Bild endet beim Einrasten genau am Rand. */
@media (max-width: 520.98px) {
  .wall {
    --h-tall: 70vw;                        /* Hochformate */
    --h-wide: calc(var(--h-tall) * 0.8);   /* ein Querformat passt ganz in den Bildschirm */
    --edge: calc((100vw - var(--logo-width)) / 2);
    display: flex;
    align-items: flex-start;
    gap: var(--edge);
    overflow-x: auto;
    margin-inline: calc(-1 * var(--edge));
    padding-inline: var(--edge);
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--edge);
    scrollbar-width: none;
  }

  .wall::-webkit-scrollbar {
    display: none;
  }

  .wall__figure {
    display: contents;
  }

  /* Alle mittig auf einer Linie, die Breite folgt aus Höhe und Format */
  .wall__item {
    --h: var(--h-wide);
    flex: none;
    width: calc(var(--h) * var(--format));
    margin-top: calc((var(--h-tall) - var(--h)) / 2);
    scroll-snap-align: start;
  }

  .wall__item--portrait {
    --h: var(--h-tall);
  }

  /* Das ganze Browserfenster mittig: um die halbe Leiste tiefer, im Band ist sie immer 1.25rem hoch */
  .wall__item--browser {
    margin-top: calc((var(--h-tall) - var(--h)) / 2 + 1.25rem / 2);
  }

  .wall__item--panorama {
    --h: calc(var(--h-wide) * 527 / 912);  /* so breit wie ein Querformat */
  }

  .wall__item--phone {
    --h: calc(var(--h-tall) * 0.94);  /* sonst schnitte das Band den Schatten ab */
    --format: var(--phone-ratio);
  }

  .wall__media {
    height: var(--h);
  }

  /* So breit und mindestens so hoch wie ein Querformat, oben bündig mit dem davor */
  .wall__info {
    flex: none;
    align-content: center;
    width: calc(var(--h-wide) * 527 / 373);
    min-height: var(--h-wide);
    margin-top: calc((var(--h-tall) - var(--h-wide)) / 2);
    scroll-snap-align: start;
  }
}

/* Ab 521px auf den Spalten der Episode */
@media (min-width: 521px) {
  .wall {
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
  }

  .wall__item {
    grid-column: var(--column, 1) / span var(--span, 12);
  }

  .wall__media {
    aspect-ratio: var(--format);
  }
}

/* 521 bis 899px ohne Modulzeilen */
@media (min-width: 521px) and (max-width: 899.98px) {
  .wall {
    row-gap: var(--space-16);
  }

  .wall__figure {
    display: contents;
  }

  .wall__item--portrait {
    --span: 6;
  }

  .wall__figure--offset-left > .wall__item--portrait {
    --column: 7;
  }

  .wall__figure--solo-left > .wall__item,
  .wall__figure--solo-right > .wall__item {
    --span: 8;
  }

  .wall__figure--solo-right > .wall__item {
    --column: 5;
  }

  .wall__figure--trio > .wall__item {
    --span: 4;
  }

  .wall__figure--trio > :nth-child(2) { --column: 5; }
  .wall__figure--trio > :nth-child(3) { --column: 9; }

  .wall__info {
    grid-column: 5 / -1;
  }

  /* Paar: offset-left vor offset-right stellt die Hochformate nebeneinander, das rechte versetzt */
  .wall__figure--offset-left:has(+ .wall__figure--offset-right) > .wall__item--portrait {
    --column: 1;
  }

  .wall__figure--offset-left + .wall__figure--offset-right > .wall__item--portrait {
    --column: 7;
    margin-top: calc(25% * 373 / 296);  /* Prozent messen an der Breite */
    translate: calc(var(--module) + var(--gap) / 2);
  }
}

/* Ab 900px Modulzeilen: Ein Bild ist fünf Module hoch, die sechste Zeile trägt die Unterschrift */
@media (min-width: 900px) {
  .wall {
    row-gap: var(--gap);  /* die Luft kommt aus dem Versatz */
  }

  .wall__figure {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(var(--rows, 6), var(--module));
    row-gap: var(--gap);
  }

  .wall__figure--offset-left,
  .wall__figure--offset-right,
  .wall__figure--solo-right {
    --rows: 8;
  }

  .wall__item {
    grid-row: var(--row, 1) / span 6;
    display: grid;
    grid-template-rows: subgrid;
  }

  .wall__item--landscape { --span: 7; }
  .wall__item--portrait  { --span: 4; }

  .wall__figure--offset-left > :nth-child(2)  { --column: 9; --row: 3; }
  .wall__figure--offset-right > :nth-child(2) { --column: 6; --row: 3; }
  .wall__figure--solo-right > .wall__item     { --column: 6; --row: 3; }
  .wall__figure--trio > :nth-child(2)         { --column: 5; }
  .wall__figure--trio > :nth-child(3)         { --column: 9; }

  /* Nach einem Bild rechts unten eine Zeile mehr, sonst stieße die Unterschrift ans nächste Bild */
  :is(.wall__figure--offset-right, .wall__figure--solo-right) + .wall__figure {
    margin-top: calc(var(--module) + var(--gap));
  }

  /* Fest gerechnet statt height: 100%: Safari bezieht Prozent im Subgrid auf die ganze Figur */
  .wall__media {
    grid-row: 1 / 6;
    height: calc(5 * var(--module) + 4 * var(--gap));
    aspect-ratio: auto;
  }

  .wall__caption,
  .wall__item > .progress {
    grid-row: 6;
    margin-top: 0;
  }

  .wall__info {
    grid-column: 9 / span 4;
    grid-row: 1 / 6;
    align-self: end;
  }
}


/* -------------------------------------------------------------------------------------------------
   MEDIENFLÄCHE
------------------------------------------------------------------------------------------------- */

.media {
  position: relative;
}

.media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

.media__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  transition: opacity 300ms ease-out;
}

/* Erst wenn es läuft: Sein erstes Bild ist das Standbild, der Wechsel fällt nicht auf */
.media__video[data-playing] {
  opacity: 1;
}

/* --clip formt jede Ebene, nie die Fläche: Browserleiste und Schatten ragen hinaus */
.media__image,
.media__video,
.mosaic {
  clip-path: var(--clip, none);
}


/* -------------------------------------------------------------------------------------------------
   MOSAIK
------------------------------------------------------------------------------------------------- */

.mosaic {
  position: absolute;
  inset: 0;
}

.mosaic__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  image-rendering: pixelated;
  transition: opacity 140ms linear;  /* die Felder bleiben hart, nur die Stufen blenden */
}

.mosaic__stage:first-child,
.mosaic[data-step="2"] > :nth-child(2),
.mosaic[data-step="3"] > *,
.mosaic[data-step="image"] > * {
  opacity: 1;
}

[data-mosaic] {
  position: relative;
  z-index: 1;
}

.mosaic + [data-mosaic] {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.mosaic[data-step="image"] + [data-mosaic] {
  opacity: 1;
}

/* Im Band ab dem zweiten Bild nur weich einblenden, ohne Stufen */
.mosaic[data-mode="fade"] > * {
  display: none;
}

.mosaic[data-mode="fade"] + [data-mosaic] {
  transition: opacity 700ms ease;
}

/* Blättern: harte Schnitte, nur die neue Seite blendet zum Schluss */
.mosaic[data-mode="flip"] > *,
.mosaic[data-mode="flip"]:not([data-step="image"]) + [data-mosaic] {
  transition: none;
}

.mosaic[data-mode="flip"] + [data-mosaic] {
  transition-duration: 180ms;
}


/* -------------------------------------------------------------------------------------------------
   BROWSER
------------------------------------------------------------------------------------------------- */

.browser {
  --bar: clamp(1.25rem, 4.2cqi, 2.25rem);  /* cqi misst am Rahmen, deshalb nur innen verwenden */
  --corner: calc(var(--bar) / 4);
  --clip: inset(0 round 0 0 var(--corner) var(--corner));  /* nicht border-radius: Safari macht Videos sonst eckig */
  isolation: isolate;  /* der Schatten bleibt hinter dem Rahmen */
  container-type: inline-size;
}

/* Eine weiche Ellipse, ihre Mitte auf der Unterkante */
.browser::after {
  content: "";
  position: absolute;
  top: 94%;
  right: 12%;
  left: 12%;
  z-index: -1;
  height: 12%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.25) 55%, transparent);
  pointer-events: none;
}

/* Über der Kante, im Abstand darüber (höchstens 36px, er ist überall größer). Alles darin in em. */
.browser__bar {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  display: grid;
  place-items: center;
  height: var(--bar);
  border-radius: var(--corner) var(--corner) 0 0;
  background: #000;
  font-size: var(--bar);
}

/* Drei Punkte */
.browser__bar::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.13em);
  left: 0.42em;
  width: 0.26em;
  height: 0.26em;
  border-radius: 50%;
  box-shadow: 0.42em 0 #4A4A4A, 0.84em 0 #4A4A4A;
  background: #4A4A4A;
}

/* Mindestens 10px, dafür darf das Feld breiter werden als 40 % */
.browser__url {
  min-width: 40%;
  overflow: hidden;
  padding: 0.3em 1em;
  border-radius: 0.35em;
  background: #333;
  color: #D0D0D0;
  font-size: max(10px, 0.36em);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

/* Die Unterschrift liegt über dem Schatten */
.browser + .wall__caption {
  position: relative;
}


/* -------------------------------------------------------------------------------------------------
   ZÄHLER
------------------------------------------------------------------------------------------------- */

/* Wie object-fit: cover. Blendet schneller als das Bild, sonst schimmern dessen Ziffern durch */
.counters {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}

.mosaic[data-step="image"] ~ .counters {
  opacity: 1;
}

/* Zum Schluss die Ziffern des Screenshots: Ausblenden statt Wechsel, die Lage weicht 1px ab */
.mosaic ~ .counters[data-done] {
  opacity: 0;
  transition-duration: 300ms;
}


/* -------------------------------------------------------------------------------------------------
   UMFÄRBEN
------------------------------------------------------------------------------------------------- */

/* Die zweite reicht 2px über den Rand (--swap-edge), sonst schimmert die erste als Linie durch */
.swap {
  overflow: clip;
}

.swap__after {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 2px var(--swap-edge, transparent);
  object-fit: cover;
}

/* 8 s je Runde, jeder Wechsel 1,1 s; die Kurve gilt für jeden Abschnitt */
.swap[data-reveal] .swap__after {
  animation: swap-cycle 8s cubic-bezier(0.87, 0, 0.13, 1) 300ms infinite both paused;
}

.swap[data-reveal="run"]:not([data-paused]) .swap__after {
  animation-play-state: running;
}

@keyframes swap-cycle {
  0%           { clip-path: inset(100% -2px -2px -2px); }
  13.75%, 50%  { clip-path: inset(-2px); }
  63.75%, 100% { clip-path: inset(-2px -2px 100% -2px); }
}


/* -------------------------------------------------------------------------------------------------
   BILDSTIL
------------------------------------------------------------------------------------------------- */

/* Nur translate, nie clip-path: Damit rechnete der Browser den Filter in jedem Bild neu */
.swap--toned .swap__after {
  filter: url(#staerkeneffekt-tone);  /* in partials/episodes/staerkeneffekt.php */
}

/* 2px über den Rand wie beim Umfärben; das getönte Foto darin wird dafür 4px größer */
.swap__curtain {
  position: absolute;
  inset: -2px;
  z-index: 2;
  overflow: hidden;
}

/* Die Kante fährt vorneweg: 2px Weiß, außen je 1px Nachtblau, damit sie auch vor heller Wand steht */
.swap--toned::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to right, rgb(29 35 49 / 0.12) 0 1px, #FFF 1px 3px, rgb(29 35 49 / 0.12) 3px) right / 4px 100% no-repeat;
  translate: 4px;
  pointer-events: none;
}

/* Der Blitz aus der Prägung, in Effektgelb */
.swap__bolt {
  position: absolute;
  top: 15%;
  left: 77%;
  z-index: 4;
  height: 32%;
  aspect-ratio: 263.34 / 629.16;
  fill: #FADA00;
  transform-origin: 50% 55%;
  pointer-events: none;
}

/* Vorhang, Foto und Kante mit derselben Dauer und Kurve, sonst liefe die Kante neben dem Rand */
.swap--toned[data-reveal] .swap__curtain {
  animation: tone-curtain 2s cubic-bezier(0.65, 0, 0.35, 1) 300ms both paused;
}

.swap--toned[data-reveal] .swap__after {
  animation: tone-counter 2s cubic-bezier(0.65, 0, 0.35, 1) 300ms both paused;
}

.swap--toned[data-reveal]::after {
  animation: tone-curtain 2s cubic-bezier(0.65, 0, 0.35, 1) 300ms both paused;
}

/* 150ms nachdem der Ton steht, aus dem Nichts, über das Maß hinaus und zurück */
.swap--toned[data-reveal] .swap__bolt {
  animation: tone-bolt 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 2.45s both paused;
}

.swap--toned[data-reveal="run"] :is(.swap__curtain, .swap__after, .swap__bolt),
.swap--toned[data-reveal="run"]::after {
  animation-play-state: running;
}

@keyframes tone-curtain { from { translate: -100%; } }
@keyframes tone-counter { from { translate: 100%; } }

@keyframes tone-bolt {
  from { opacity: 0; scale: 0; rotate: -18deg; }
  30%  { opacity: 1; }
}


/* -------------------------------------------------------------------------------------------------
   INFOBOX
------------------------------------------------------------------------------------------------- */

/* Auftritt, sobald das Bild daneben steht (Skript AUFTRITTE): einblenden, dann kurz drehen */
.wall__info[data-reveal] {
  animation: info-reveal 700ms ease-in-out 150ms both paused;
}

.wall__info[data-reveal="run"] {
  animation-play-state: running;
}

@keyframes info-reveal {
  0%   { opacity: 0; animation-timing-function: ease-out; }
  25%  { opacity: 1; rotate: 0deg; }
  40%  { rotate: -3deg; }
  55%  { rotate: 2.5deg; }
  70%  { rotate: -1.5deg; }
  85%  { rotate: 0.75deg; }
  100% { opacity: 1; rotate: 0deg; }
}

/* Im Band steht sie gleich da, sonst fehlte sie neben dem Bild davor, solange sie nur hereinragt */
@media (max-width: 520.98px) {
  .wall__info[data-reveal] {
    animation-name: info-wiggle;
    animation-duration: 525ms;
  }
}

@keyframes info-wiggle {
  20% { rotate: -3deg; }
  40% { rotate: 2.5deg; }
  60% { rotate: -1.5deg; }
  80% { rotate: 0.75deg; }
}


/* -------------------------------------------------------------------------------------------------
   FORTSCHRITT
------------------------------------------------------------------------------------------------- */

.wall__caption--progress {
  display: flex;
  align-items: flex-start;
  column-gap: var(--space-4);
}

/* So hoch wie eine Zeile der Unterschrift, die Punkte stehen auf ihrer Mitte */
.progress {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5em;
  height: 1.5em;
  margin-left: auto;
}

.wall__item > .progress {
  justify-content: flex-end;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

.progress__dot {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  transition: opacity var(--duration-s) ease;
}

.progress__dot[data-active] {
  opacity: 1;
}


/* -------------------------------------------------------------------------------------------------
   KARTEN
------------------------------------------------------------------------------------------------- */

/* cq-Einheiten nur an Kindern, am Container selbst bezögen sie sich auf den nächsten darüber.
   Schriftzeile als Pfad: 0.8em über und 0.2em unter der Grundlinie. */
.outlined-text {
  display: block;
  width: auto;
  height: 1em;
  overflow: visible;
  fill: currentColor;
}

/* endet auf der Grundlinie */
.outlined-text--baseline {
  height: 0.8em;
}

/* Kontrastmodus: Die Farben der Karten sind ihr Inhalt wie bei einem Bild, ebenso die der Leiste */
.styleguide,
.logo-sizes,
.design-system,
.phone,
.browser__bar {
  forced-color-adjust: none;
}

/* 2px über die Box, die Karte schneidet ab, sonst schimmert die Farbe darunter; links nicht */
@keyframes uncover {
  from { clip-path: inset(100% -2px -2px 0); }
  to   { clip-path: inset(-2px -2px -2px 0); }  /* ausgeschrieben, von inset zu none spränge es */
}


/* -------------------------------------------------------------------------------------------------
   KARTE: STYLEGUIDE
------------------------------------------------------------------------------------------------- */

/* Farben von Thann aus dem Logo, CMYK laut Farbblatt */
.styleguide,
.logo-sizes {
  --donaublau: #17405C;  /* C100 M72 Y32 K19 */
  --fuchsrot:  #C75742;  /* C11 M77 Y81 K2 */
  --pergament: #F9F7F3;  /* C2 M2 Y3 K0 */
}

/* Zeile 3 trägt die Grundlinie der beiden Aa, die freien Zeilen 2 und 4 halten sie in der Mitte */
.styleguide {
  isolation: isolate;  /* Stapel für das Feld mit z-index: -1 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto 1fr auto;
  container-type: size;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--donaublau);
  color: var(--pergament);
  line-height: 1.2;
}

.styleguide [data-column="1"] { grid-column: 1; }
.styleguide [data-column="2"] { grid-column: 2; }

/* Unter der Schrift, auch während es aufgedeckt wird */
.styleguide__field {
  z-index: -1;
  grid-row: 1 / -1;
  box-shadow: 0 2px var(--fuchsrot), 0 -2px var(--fuchsrot), 2px 0 var(--fuchsrot);  /* siehe uncover */
  background: var(--fuchsrot);
}

.styleguide__label {
  grid-row: 1;
  width: max-content;
  margin: 4.7cqh 4.7cqh 0;
  font-size: max(11px, 2.6cqh);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Beide Aa auf einer Grundlinie: Ihre Pfade enden auf ihr, das Raster nimmt dort die Unterkante */
.styleguide__sample {
  grid-row: 3;
  align-self: last baseline;
  overflow: clip;
  margin: 0 4.7cqh;
  font-size: 23.5cqh;
}

.styleguide__color {
  grid-row: 5;
  display: grid;
  gap: 1.2cqh;
  margin: 0 4.7cqh 4.7cqh;
}

.styleguide__name {
  font-size: max(12px, 3.75cqh);
}

.styleguide__values {
  font-size: max(11px, 2.6cqh);
  line-height: 1.4;
}

.styleguide__value {
  display: block;
  width: max-content;
}

/* Kleine Karte, etwa im Band: CMYK bricht um, sonst ragte es aus der Spalte */
@container (max-height: 340px) {
  .styleguide__value {
    width: auto;
  }
}

/* Auftritt (Skript AUFTRITTE): Fuchsrot von unten, Expo in-out */
.styleguide[data-reveal] .styleguide__field {
  animation: uncover 1100ms cubic-bezier(0.87, 0, 0.13, 1) 300ms both paused;
}

.styleguide[data-reveal="run"] .styleguide__field {
  animation-play-state: running;
}


/* -------------------------------------------------------------------------------------------------
   KARTE: LOGOGRÖSSEN
------------------------------------------------------------------------------------------------- */

.logo-sizes {
  position: relative;
  display: flex;
  align-items: center;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  background: #EBE7E4;
  color: var(--donaublau);
}

.logo-sizes__sheet {
  position: relative;
  width: 100%;
  aspect-ratio: 1824 / 746;
}

.logo-sizes__stage {
  width: 100%;
  height: 100%;
}

.logo-sizes__ink {
  fill: var(--donaublau);
}

.logo-sizes__mark,
.logo-sizes__accent {
  fill: var(--fuchsrot);
}

/* Mittig unter jedem Logo (left im Markup), ein Drittel der Stempelhöhe unter dem größten */
.logo-sizes__label {
  position: absolute;
  top: 84.67%;
  font-size: max(11px, 1.9cqi);
  line-height: 1;
  white-space: nowrap;
  translate: -50%;
}


/* -------------------------------------------------------------------------------------------------
   KARTE: DESIGNSYSTEM
------------------------------------------------------------------------------------------------- */

/* Farben aus den Tokens der Website von StärkenEffekt */
.design-system,
.phone {
  --effektgelb: #FADA00;
  --nachtblau:  #1D2331;
  --papier:     #FAF9F7;
  --leinwand:   #F2F0ED;
}

.design-system {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  container-type: size;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--papier);
  color: var(--nachtblau);
  line-height: 1.2;
}

.design-system__half {
  position: relative;
  grid-row: 1;
}

.design-system__half--mono {
  grid-column: 2;
  background: var(--leinwand);  /* bis das Nachtblau aufgedeckt ist */
}

.design-system__night {
  box-shadow: 0 2px var(--nachtblau), 0 -2px var(--nachtblau), 2px 0 var(--nachtblau);  /* siehe uncover */
  background: var(--nachtblau);
  color: var(--papier);
}

/* Jede Zeile steht mit ihrer Grundlinie auf --line, die Pfade reichen 0.8em darüber */
.design-system__half > .outlined-text,
.design-system__sample {
  position: absolute;
  top: calc(var(--line) - 0.8em);
  left: 4.7cqh;
}

/* Nicht unter 11 und 9px, außer die Zeile passte dann nicht mehr */
.design-system__name  { --line: 8.1cqh;   font-size: clamp(3.75cqh, 11px, 5.2cqh); }
.design-system__value { --line: 12.84cqh; font-size: clamp(2.6cqh, 9px, 4.6cqh); }

.design-system__name--bottom  { --line: 87.11cqh; }
.design-system__value--bottom { --line: 91.84cqh; }

/* Versalien in JetBrains, nach Auge so groß wie die Namen in Europa */
.design-system__half--mono .design-system__name {
  font-size: clamp(3.2cqh, 9.4px, 5.1cqh);
}

.design-system__sample {
  --line: 91.84cqh;
  right: 4.7cqh;
  left: auto;
  font-size: 28cqh;
}

.design-system__half--mono .design-system__sample {
  font-size: 26cqh;
}

/* Das Aa liegt über dem Marker */
.design-system__sample .outlined-text {
  position: relative;
}

/* Marker nach Maß unter dem Aa, leicht schräg wie in der Auswertung */
.design-system__marker {
  position: absolute;
  top: 0.38em;
  right: -0.048em;
  left: -0.054em;
  height: 0.53em;
  background: var(--effektgelb);
  rotate: -1.2deg;
}

/* Auftritt wie beim Styleguide, danach zieht der Marker einmal unter dem Aa durch */
.design-system[data-reveal] .design-system__night {
  animation: uncover 1100ms cubic-bezier(0.87, 0, 0.13, 1) 300ms both paused;
}

.design-system[data-reveal] .design-system__marker {
  animation: marker 600ms cubic-bezier(0.65, 0, 0.35, 1) 1500ms both paused;
}

.design-system[data-reveal="run"] .design-system__night,
.design-system[data-reveal="run"] .design-system__marker {
  animation-play-state: running;
}

@keyframes marker {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0); }  /* ausgeschrieben, siehe uncover */
}


/* -------------------------------------------------------------------------------------------------
   KARTE: HANDY
------------------------------------------------------------------------------------------------- */

.phone {
  height: 100%;
}

/* Weniger hoch als im Mockup (472,08 × 916,6), damit es breiter steht */
.phone__device {
  position: relative;
  container-type: inline-size;
  height: 100%;
  aspect-ratio: var(--phone-ratio);
}

/* Mosaik so groß und rund wie das Gerät (Radius wie .phone__body), der Platz ist breiter */
.wall__item--phone .mosaic {
  --clip: inset(0 round 18.3% / calc(18.3% * var(--phone-ratio)));
  right: auto;
  width: auto;
  aspect-ratio: var(--phone-ratio);
}

.phone__button {
  position: absolute;
  left: -0.66cqw;
  width: 0.66cqw;
  height: 15.67cqw;
  border-radius: 0.44cqw 0 0 0.44cqw;
  background: var(--nachtblau);
}

.phone__button--action      { top: 39.72cqw; left: -1.02cqw; width: 1.02cqw; height: 7.73cqw; }
.phone__button--volume-up   { top: 54.6cqw; }
.phone__button--volume-down { top: 74.49cqw; }
.phone__button--side        { top: 65.45cqw; right: -0.66cqw; left: auto; height: 24.71cqw; border-radius: 0 0.44cqw 0.44cqw 0; }

.phone__body {
  position: absolute;
  inset: 0;
  border-radius: 18.3cqw;
  box-shadow: 1.04cqw 1.04cqw 4.17cqw rgb(0 0 0 / 0.5);
  background: var(--nachtblau);
}

/* Lautsprecher oben im Rahmen */
.phone__body::after {
  content: "";
  position: absolute;
  top: 1.09cqw;
  left: calc(50% - 10.86cqw);
  width: 21.71cqw;
  height: 0.88cqw;
  border-radius: 0 0 0.44cqw 0.44cqw;
  background: #0E121B;
}

.phone__screen {
  position: absolute;
  inset: 2.786cqw;
  overflow: hidden;
  border-radius: 15.51cqw;
  background: #FFF;
  color: var(--nachtblau);
}

/* Dynamic Island, rechts darin die Kamera */
.phone__screen::before,
.phone__screen::after {
  content: "";
  position: absolute;
  z-index: 1;
}

.phone__screen::before {
  top: 4.06cqw;
  left: calc(50% - 14.46cqw);
  width: 28.93cqw;
  height: 8.38cqw;
  border-radius: 4.19cqw;
  background: var(--nachtblau);
}

.phone__screen::after {
  top: 5.52cqw;
  left: calc(50% + 7.69cqw);
  width: 5.47cqw;
  height: 5.47cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, #141A28 60%, #2A3142 61%);
}

/* Die Zeichen aller Zeilen, je einmal */
.phone__glyphs {
  position: absolute;
  width: 0;
  height: 0;
}

.phone__screen svg {
  overflow: visible;
  fill: currentColor;
}

.phone__kicker {
  position: absolute;
  top: 32.32cqw;
  left: 50%;
  height: 1em;
  opacity: 0;
  color: #A9A9B0;
  font-size: 2.82cqw;
  translate: -50%;
  transition: opacity 0.3s ease;
}

.phone[data-running] .phone__kicker[data-visible] {
  opacity: 1;
}

.phone__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 47.94cqw;
  opacity: 0;
}

.phone__card > * {
  flex: none;
}

/* Ohne Skript steht das Ergebnis */
.phone__card--result {
  padding-top: 32.32cqw;
  opacity: 1;
}

.phone__question {
  height: calc(var(--lines) * 1.45em);
  font-size: 5.05cqw;
}

.phone__scale {
  position: relative;
  width: 63cqw;
  height: 1.54cqw;
  margin-top: 8.96cqw;
  border-radius: 0.77cqw;
  background: #DFDCDC;
}

/* Lage aus --level, 0 bis 6 wie die Striche, das Skript setzt sie */
.phone__thumb {
  position: absolute;
  top: 0.77cqw;
  left: calc(31.5cqw + (var(--level, 3) - 3) * 9.32cqw);
  width: 6.3cqw;
  height: 6.3cqw;
  margin: -3.15cqw 0 0 -3.15cqw;
  border-radius: 50%;
  box-shadow: 0 0 0 0.55cqw #FFF, 0 0.4cqw 1.2cqw rgb(29 35 49 / 0.28);
  background: #DFDCDC;
  transition:
    left 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease,
    scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.phone__thumb[data-active] {
  background: var(--effektgelb);
}

.phone__thumb[data-grabbed] {
  scale: 1.14;
}

.phone__ticks {
  display: flex;
  justify-content: space-between;
  width: 63cqw;
  margin-top: 4.03cqw;
  padding-inline: 3.4cqw;
}

.phone__ticks > span {
  width: max(1px, 0.2cqw);
  height: 1.85cqw;
  background: #C2C2C6;
}

.phone__scale-labels {
  position: relative;
  width: 63cqw;
  height: 5.9cqw;
  margin-top: 4cqw;
  color: #86868C;
  font-size: 2.1cqw;
}

.phone__scale-label {
  position: absolute;
  top: 0;
  height: 2.9em;  /* zwei Zeilen zu 1.45 */
  translate: -50%;
}

.phone__scale-label--left   { left: 3.4cqw; }
.phone__scale-label--center { left: 31.5cqw; }
.phone__scale-label--right  { left: 59.3cqw; }

.phone__action {
  display: flex;
  align-items: center;
  height: 10.2cqw;
  margin-top: 12.2cqw;
  padding-inline: 5.6cqw;
  border-radius: 5.1cqw;
  background: var(--nachtblau);
  color: #FFF;
  font-size: 3.5cqw;
  transition: scale 0.36s cubic-bezier(0.34, 1.45, 0.5, 1);
}

.phone__action[data-pressed] {
  scale: 0.952;
  transition: scale 0.085s cubic-bezier(0.4, 0, 1, 1);
}

.phone__action-label {
  height: 1.309em;  /* line-height: normal der Europa */
}

.phone__back {
  height: 1em;
  margin-top: 7.95cqw;
  color: #9B9BA2;
  font-size: 3.1cqw;
}

/* Das echte Logo statt der Nachbildung im Mockup, Versalhöhe und Grundlinie wie dort */
.phone__logo {
  width: 30.2cqw;
  margin-top: -0.42cqw;
}

.phone__title {
  height: 2.82em;  /* zwei Zeilen zu 1.41 */
  margin-top: 9.7cqw;
  font-size: 7.7cqw;
}

.phone__list {
  display: grid;
  gap: 7.3cqw;
  width: 100%;
  margin-top: 16.2cqw;
  padding: 0 9.6cqw 0 7.6cqw;
}

.phone__row {
  display: grid;
  grid-template-columns: 7.6cqw 30cqw 1fr 5.7cqw;
  align-items: center;
  height: 8cqw;
  font-size: 5.65cqw;
}

.phone__row > svg {
  justify-self: start;
  height: 1em;
}

.phone__bar {
  width: calc(var(--width) * 1cqw);
  height: 3cqw;
  border-radius: 1.5cqw;
  background: var(--effektgelb);
  transform-origin: left;
}

.phone__plus {
  position: relative;
  justify-self: end;
  width: 5.7cqw;
  height: 5.7cqw;
  border: 0.46cqw solid;
  border-radius: 50%;
}

.phone__plus::before,
.phone__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6cqw;
  height: 0.46cqw;
  margin: -0.23cqw 0 0 -1.3cqw;
  background: currentColor;
}

.phone__plus::after {
  rotate: 90deg;
}

.phone__dots {
  display: flex;
  gap: 1.15cqw;
  margin-top: 14.9cqw;
}

.phone__dots > span {
  width: 1.32cqw;
  height: 1.32cqw;
  border-radius: 50%;
  background: currentColor;
}

/* data-state in, out (nach „weiter“), back (vor dem Neubeginn); ohne ist die Karte zurückgesetzt */
.phone[data-running] .phone__card {
  opacity: 0;
  filter: blur(0.3cqw);
  transform: translateY(1.2cqw) scale(0.994);
}

.phone[data-running] .phone__card:not([data-state]) * {
  transition: none;
}

.phone[data-running] .phone__card[data-state="in"] {
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity 0.26s cubic-bezier(0.2, 0, 0.2, 1),
    transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.28s ease;
}

.phone[data-running] .phone__card[data-state="out"] {
  filter: blur(0.28cqw);
  transform: translateY(-0.85cqw) scale(0.997);
  transition:
    opacity 0.17s cubic-bezier(0.4, 0, 1, 1),
    transform 0.22s cubic-bezier(0.4, 0, 1, 1),
    filter 0.2s ease;
}

.phone[data-running] .phone__card[data-state="back"] {
  filter: blur(0.55cqw);
  transform: scale(0.984);
  transition:
    opacity 0.42s cubic-bezier(0.4, 0, 0.6, 1),
    transform 0.52s cubic-bezier(0.4, 0, 0.6, 1),
    filter 0.42s ease;
}

/* Aufbau des Ergebnisses: Logo, Titel, drei Zeilen im Abstand von 200 ms, zuletzt die Punkte */
.phone[data-running] :is(.phone__logo, .phone__dots) {
  opacity: 0;
}

.phone[data-running] .phone__title {
  opacity: 0;
  transform: translateY(1.6cqw);
}

.phone[data-running] .phone__row {
  opacity: 0;
  transform: translateX(-1.6cqw);
}

.phone[data-running] .phone__bar {
  transform: scaleX(0);
}

.phone[data-running] :is([data-state="in"], [data-state="back"]) :is(.phone__logo, .phone__title, .phone__row, .phone__dots, .phone__bar) {
  opacity: 1;
  transform: none;
}

.phone[data-running] [data-state="in"] .phone__logo {
  transition: opacity 0.5s ease 217ms;
}

.phone[data-running] [data-state="in"] .phone__title {
  transition: opacity 0.6s ease 483ms, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 483ms;
}

.phone[data-running] [data-state="in"] .phone__dots {
  transition: opacity 0.5s ease 1983ms;
}

.phone[data-running] [data-state="in"] .phone__row {
  --delay: calc(917ms + var(--rank) * 200ms);
  transition: opacity 0.5s ease var(--delay), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--delay);
}

.phone[data-running] [data-state="in"] .phone__bar {
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay);
}


/* -------------------------------------------------------------------------------------------------
   FUSSZEILE
------------------------------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--gutter);
  font-size: var(--text-xs);
  line-height: var(--footer-line-height);
}

.accordion__toggles {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-7);
  scroll-margin-top: 50svh;
}

.accordion__toggle,
.motion-toggle {
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Winkel als Form, nicht als Zeichen, damit Screenreader ihn nicht vorlesen */
.accordion__toggle::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.6em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.18em) rotate(45deg);
  transition: transform var(--duration-s) ease;
}

.accordion__toggle[aria-expanded="true"]::after {
  transform: translateY(0.1em) rotate(-135deg);
}

/* Pause als zwei Striche, angehalten ein Dreieck zum Fortsetzen */
.motion-toggle::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.5em;
  margin-left: 0.6em;
  border-inline: 1.5px solid currentColor;
}

:root[data-motion="paused"] .motion-toggle::after {
  width: 0;
  border-width: 0.25em 0 0.25em 0.4em;
  border-style: solid;
  border-color: transparent transparent transparent currentColor;
}

/* Oben wie ein Sprunglink, erst mit Fokus zu sehen; rechts, links ist die Bildmarke */
.motion-toggle {
  position: fixed;
  top: var(--gutter);
  right: var(--gutter);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  font-size: var(--text-xs);
}

.motion-toggle:not(:focus) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 0fr bis 1fr lässt sich animieren, height: auto nicht. Ohne JavaScript bleibt es offen. */
.accordion__panel {
  display: grid;
  grid-template-rows: 1fr;
}

[data-enhanced] .accordion__panel {
  grid-template-rows: 0fr;
  visibility: hidden;  /* raus aus Tabfolge und Vorlesen */
}

/* Nur Zuklappen animiert, beim Aufklappen bewegt schon das Scrollen */
[data-animated] .accordion__panel {
  transition:
    grid-template-rows var(--duration-m) ease,
    visibility var(--duration-m);
}

[data-animated] .accordion__panel[data-open] {
  transition: none;
}

/* Beim Wechsel geht der alte Text ohne Animation, sonst rutscht der neue nach */
.accordion:has(.accordion__panel[data-open]) .accordion__panel:not([data-open]) {
  transition: none;
}

[data-enhanced] .accordion__panel[data-open] {
  grid-template-rows: 1fr;
  visibility: visible;
}

.accordion__inner {
  max-width: var(--measure);
  overflow: hidden;  /* sonst greift 0fr nicht */
  font-size: var(--text-s);
  line-height: 1.7;
}

/* margin statt padding: padding bliebe zugeklappt stehen */
.accordion__inner > :first-child {
  margin-top: var(--space-7);
}

.accordion__inner > :last-child {
  margin-bottom: var(--space-16);
}

.accordion__inner > * + * {
  margin-top: var(--space-4);
}

.accordion__title {
  font-size: var(--text-m);
  font-weight: 700;
}

.accordion__title + * {
  margin-top: var(--space-3);
}

.accordion__inner h3 {
  margin-top: var(--space-7);
  font-size: inherit;
  font-weight: 700;
}

.accordion__inner h3 + * {
  margin-top: 0;
}


/* -------------------------------------------------------------------------------------------------
   HILFSKLASSEN
------------------------------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* SVG nur mit Definitionen, etwa einem Filter. Nie display: none, sonst greifen sie nicht. */
.defs {
  position: absolute;
}


/* -------------------------------------------------------------------------------------------------
   RASTER
------------------------------------------------------------------------------------------------- */

:root[data-grid]::after {
  content: attr(data-grid) "px";
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--color-brand);
  color: #FFF;
  font: 700 var(--text-xs) / 1 var(--font-mono);
  font-feature-settings: "ss01";
  pointer-events: none;
}

@media (min-width: 521px) {
  :root[data-grid]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    width: var(--logo-width);
    margin-inline: auto;
    background: repeating-linear-gradient(to right,
      rgb(255 38 0 / 0.08) 0 var(--module), transparent 0 calc(var(--module) + var(--gap)));
    pointer-events: none;
  }
}

@media (min-width: 900px) {
  :root[data-grid] .wall__figure {
    background: repeating-linear-gradient(to bottom,
      rgb(255 38 0 / 0.08) 0 var(--module), transparent 0 calc(var(--module) + var(--gap)));
  }
}


/* -------------------------------------------------------------------------------------------------
   DRUCK
------------------------------------------------------------------------------------------------- */

/* Jeder Text sichtbar, ohne Maske und Blende, Bilder und Karten im Endzustand */
@media print {
  :root[data-fade-in] .episode__grid {
    opacity: 1;
    transition: none;
  }

  [data-wipe] {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .mosaic {
    display: none;
  }

  .mosaic + [data-mosaic] {
    opacity: 1;
    transition: none;
  }

  [data-reveal],
  [data-reveal] * {
    animation: none !important;
  }
}


/* -------------------------------------------------------------------------------------------------
   REDUZIERTE BEWEGUNG
------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  /* Farbe ist keine Bewegung: Der Wechsel bleibt weich */
  body {
    transition-duration: var(--duration-m) !important;
  }

  /* Text sofort und ohne Maske. Das Logo blendet weiter aus, sonst stünde „andl Design“ da. */
  :root[data-fade-in] .episode__grid {
    opacity: 1;
  }

  [data-wipe] {
    -webkit-mask-image: none;
            mask-image: none;
  }
}