/* =========================================================
   Nachbau von fynnheitzer.com – Werte aus dem Cargo-Quelltext
   (rem = Basisgröße, die main.js wie Cargo aus dem Fenster berechnet)
   ========================================================= */

@property --blue { syntax: '<color>'; inherits: true; initial-value: #0000ff; }

:root {
  --blue: #0000ff;
  --bg: #fff;
  --ink: #000;
  --ink-85: rgba(0, 0, 0, 0.85);
  --ph: #ececec;
  --nav-bg: rgba(255, 255, 255, 0.62);
  --shadow: rgba(0, 0, 0, 0.25);
  color-scheme: light;
  --pad: 2rem;            /* .page-content { padding: 2rem } */
  --nav-h: 12rem;         /* wird von main.js gemessen */
  /* Fließtext = Monument Grotesk, Navigation/Überschrift = Diatype.
     Liegen die Originaldateien in fonts/, werden sie automatisch benutzt.
     Sonst greift der freie Ersatz (Hanken Grotesk / Inter). */
  --font-body: "Monument Grotesk Variable", "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Diatype Variable", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font: var(--font-body);
}

/* Originalschriften (nur wenn du eine eigene Lizenz hast und die Dateien in fonts/ legst) */
@font-face {
  font-family: "Monument Grotesk Variable";
  src: url("fonts/CargoMonumentGroteskPlusVariable.woff2") format("woff2-variations"), url("fonts/MonumentGrotesk.woff2") format("woff2-variations"), url("fonts/MonumentGrotesk.woff2") format("woff2");
  font-style: normal; font-weight: 200 1000; font-display: swap;
}
@font-face {
  font-family: "Monument Grotesk Variable";
  src: url("fonts/CargoMonumentGroteskItalicPlusVariable.woff2") format("woff2-variations"), url("fonts/MonumentGrotesk-Italic.woff2") format("woff2-variations"), url("fonts/MonumentGrotesk-Italic.woff2") format("woff2");
  font-style: italic; font-weight: 200 1000; font-display: swap;
}
@font-face {
  font-family: "Diatype Variable";
  src: url("fonts/Cargo-DiatypePlusVariable.woff2") format("woff2-variations"), url("fonts/Diatype.woff2") format("woff2-variations"), url("fonts/Diatype.woff2") format("woff2");
  font-style: normal; font-weight: 200 1000; font-display: swap;
}
@font-face {
  font-family: "Diatype Variable";
  src: url("fonts/Cargo-DiatypePlusVariable-Italic.woff2") format("woff2-variations");
  font-style: italic; font-weight: 200 1000; font-display: swap;
}

/* Dunkelmodus: gesetzt von main.js (data-theme), Blau wird heller, damit es auf Schwarz leuchtet */
html[data-theme="dark"] {
  --blue: #4d5dff;
  --bg: #0d0d0e;
  --ink: #f2f2f2;
  --ink-85: rgba(242, 242, 242, 0.88);
  --ph: #1c1c1e;
  --nav-bg: rgba(13, 13, 14, 0.62);
  --shadow: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

html {
  font-size: var(--base-size, 17.25px);
  touch-action: manipulation;
}

html.is-mobile { font-size: calc(var(--base-size, 17.25px) * 1.27); }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  transition: background-color 0.35s ease, color 0.35s ease;
  font-family: var(--font);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:active, .linked:active { opacity: 0.7; }

i, em { font-style: italic; }

/* ---------- Blauer Cursor-Punkt (nur mit Maus) ---------- */
@media (hover: hover) and (pointer: fine) {
  html, body, *, a, a:hover, button, [role="button"] { cursor: none !important; }
}

#blue-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 260px; height: 260px;
  pointer-events: none;
  z-index: 2147483647;
  display: none;
  filter: url(#goo-cursor);      /* verschmilzt Punkt und Tropfen zu einer Flüssigkeit */
  will-change: transform;
}
#blue-cursor > i {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  background: var(--blue-now, var(--blue));   /* Farbwechsel am Mauszeiger darf schnell sein */
  will-change: transform;
}

@media (hover: none), (pointer: coarse) {
  #blue-cursor { display: none !important; }
}

/* ---------- Seiten ---------- */
.page {
  background: var(--bg);
  transition: background-color 0.35s ease;
  min-height: var(--viewport-height, 100vh);
  padding-bottom: var(--nav-h);
}

.page-content {
  padding: var(--pad);
  padding-top: 4.2rem;     /* Platz für die Leiste oben */
  text-align: left;
}

/* ---------- Navigation unten (fest) ---------- */
.nav-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 398;
  background: var(--nav-bg);
  padding: var(--pad) var(--pad) 1.5rem;
  box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow);
  transition: background-color 0.35s ease;
}

.nav-bottom h1 {
  margin: 0;
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 410;
  font-size: calc(0.48 * 5.2rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink-85);
}

html.is-mobile .nav-bottom h1 { font-size: calc(0.62 * 3rem); }

.nav-bottom h1 a {
  color: var(--ink-85);
  text-decoration: none;
}

/* Hover: der Link wird von der Mitte aus nach links, rechts und oben größer.
   Die Grundlinie bleibt stehen, nichts im Umfeld verschiebt sich. */
.nav-bottom h1 a {
  display: inline-block;
  white-space: nowrap;
  transform-origin: 50% 86%;          /* waagerecht Mitte, senkrecht auf der Grundlinie */
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.15s ease;
  position: relative;
}
.nav-bottom h1 a:hover {
  color: var(--blue-now, var(--blue));   /* sofort in der neuen Projektfarbe, ohne den 0,6-s-Verlauf des restlichen UI */
  transform: scale(var(--nav-scale, 1.06));   /* 1.06 = 6 % größer wie vorher (5.5 / 5.2 rem); Wert steht in main.js (NAVPUSH.scale) */
  z-index: 1;
}

.nav-bottom h1 a.active { color: var(--cur-accent, var(--blue-now, var(--blue))); }   /* das gewählte Projekt bleibt in seiner Farbe, auch beim Hovern über andere */

/* ---------- Spalten (column-set) ---------- */
.cols {
  display: flex;
  gap: 2.4rem;            /* mehr Luft zwischen Lauftext und Textspalten */
  align-items: flex-start;
}
.cols > .col { flex: 1 1 0; min-width: 0; }
.cols.gutter-1 { gap: 1rem; }
.credits-row { margin-top: 2.4rem; }

html.is-mobile .cols { display: block; }
html.is-mobile .cols > .col + .col { margin-top: 1.2em; }
html.is-mobile .credits-row { margin-top: 1.2em; }
html.is-mobile .cols > .col:empty { display: none; }

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  height: 1.2em;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.marquee-track {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  white-space: nowrap;
  will-change: transform;
}
.marquee-item { flex: none; padding-right: 2rem; }

/* ---------- Startseite: freie Bildcollage ---------- */
.freeform {
  position: relative;
  width: 100%;
  container-type: inline-size;
  margin-top: 1.2em;
}

.ff-item {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1cqw);
  width: calc(var(--s) * 1%);
  z-index: var(--z);
  display: block;
  line-height: 0;
  /* media-item: --scroll-animation scrollTransitionColorIn-2, 1000ms */
  filter: saturate(0.25);
  transition: filter 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ff-item.in { filter: saturate(1); }

.ff-item img, .ff-item video {
  display: block;
  width: 100%;
  height: auto;
}

.ff-ph { background: var(--ph); width: 100%; aspect-ratio: 3 / 2; }

/* ---------- Diashow (Photography) ---------- */
.slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 8000 / 5300;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--fade, 4s) cubic-bezier(0.24, 0, 0.29, 1);
}
.slide.on { opacity: 1; z-index: 2; }
.slide img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---------- Text-Seiten ---------- */
.text p { margin: 0; }
.text p + p { margin-top: 1.2em; }
.credit + .credit { margin-top: 1.2em; }
.credit .label { font-style: italic; }
.tags { margin-top: 1.2em; }

.gallery { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.gallery img, .gallery video { display: block; width: 100%; height: auto; }
.gallery .ff-ph { aspect-ratio: 3 / 2; }

.pager { display: flex; justify-content: space-between; margin-top: 2rem; }

.info-block { margin-bottom: 1.2em; }
.info-block .date { margin: 0; }
.info-block p { margin: 0; }
.info h2 { font-size: 1.2rem; font-weight: 400; font-style: italic; line-height: 1.2; margin: 0 0 1.2em; }


/* ---------- Scroll-Anzeige (blau, flüssig) ---------- */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

#scrollbar {
  position: fixed;
  top: var(--sb-top, 0.9rem);
  right: 0;
  bottom: var(--nav-h);   /* endet über der Navigation */
  width: 1.6rem;
  z-index: 399;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;   /* langsames Ausblenden */
}
#scrollbar.on.active { opacity: 1; transition-duration: 0.15s; }   /* schnelles Einblenden beim Scrollen */
#scrollbar.goo { filter: url(#goo); }   /* verschmilzt Feld und Tropfen zu einer Flüssigkeit */

#scrollbar .thumb,
#scrollbar .drop {
  position: absolute;
  top: 0;
  right: 0.4rem;
  width: 0.8rem;
  background: var(--blue);
  border-radius: 999px;
  will-change: transform, height;
  transform-origin: 100% 50%;
}
#scrollbar .thumb { scale: var(--squeeze, 1) 1; }
#scrollbar .drop  { height: 0.8rem; scale: var(--squeeze, 1) 1; }

@media (hover: none), (pointer: coarse) {
  #scrollbar .thumb, #scrollbar .drop { width: 0.35rem; right: 0.3rem; }
  #scrollbar .drop { display: none; }
}


/* ---------- Text-Glow ---------- */
.w { white-space: nowrap; }
.ch { display: inline-block; transform-origin: 50% 75%; }
.ch.ty { visibility: hidden; }   /* noch nicht "getippt" (Schreib-Animation) */


/* ---------- Blaue Signaletik: Links, Auswahl, Fokus ---------- */
::selection { background: var(--blue); color: var(--on-accent, var(--bg)); }

.pager a, .info a {
  color: var(--blue);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pager a:hover, .info a:hover { background-size: 100% 1px; }

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

/* ---------- Bedienelemente oben rechts (Sprache + Hell/Dunkel) ---------- */
#controls {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 0.75rem var(--pad) 0.7rem;
  background: var(--nav-bg);                   /* transparent wie die Navigation */
  box-shadow: 0.4rem -0.4rem 1rem 0 var(--shadow);
  z-index: 397;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* gleiches Raster wie die Textspalten (3 Spalten, 2.4rem Abstand) */
  column-gap: 2.4rem;
  align-items: center;
  border-bottom: 1px solid var(--ink-15, rgba(128,128,128,0.28));
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1;
}
#controls button {
  font: inherit;
  color: var(--ink-85);
  background: transparent;
  border: 0; margin: 0; padding: 0;
}
/* Sprache: einfach DE und EN, die aktive in Projektfarbe */
#controls .seg { display: flex; gap: 0.7em; }
#controls { gap: 1.1rem; }
#controls .seg { gap: 1.1em; }
#controls .views { margin-right: 0.2rem; }
#controls .seg button { font-weight: 500; letter-spacing: 0.04em; opacity: 0.55; }
#controls .seg button.on { color: var(--blue-now, var(--blue)); opacity: 1; }
#controls .seg button:hover { opacity: 1; color: var(--blue-now, var(--blue)); }

/* Hell/Dunkel: ein einziges Symbol – beim Drücken wird die Sonne zum Mond (Strahlen ziehen sich ein, Scheibe wächst, Schatten schiebt sich davor) */
#theme-btn { display: block; width: 1.9em; height: 1.9em; color: var(--blue-now, var(--blue)) !important; }
#theme-btn svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform 0.8s cubic-bezier(0.34, 1.5, 0.64, 1); }
#theme-btn[data-mode="dark"] svg { transform: rotate(-135deg); }
#theme-btn:hover svg { scale: 1.15; }
#theme-btn:active svg { scale: 0.85; }
#theme-btn svg { transition: transform 0.8s cubic-bezier(0.34, 1.5, 0.64, 1), scale 0.2s ease; }
#theme-btn .core { transform-box: fill-box; transform-origin: center; transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1); }
#theme-btn .cut { transform: translate(14px, -14px); transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) 0.08s; }
#theme-btn .rays { transform-box: fill-box; transform-origin: center; transition: transform 0.5s ease, opacity 0.3s ease; }
#theme-btn[data-mode="dark"] .core { transform: scale(1.9); }
#theme-btn[data-mode="dark"] .cut { transform: translate(5px, -5px); }
#theme-btn[data-mode="dark"] .rays { transform: rotate(90deg) scale(0.2); opacity: 0; }
@media (prefers-reduced-motion: reduce) { #controls * { transition: none !important; animation: none !important; } }
html.is-mobile #controls { font-size: 0.8rem; padding: 0.55rem 1.1rem; }   /* Handy: Scroll-Anzeige ist dort schmaler */

/* ---------- Vorschau beim Hover über die Navigation ---------- */
#nav-preview {
  position: fixed;
  top: 0; left: 0;
  z-index: 400;               /* über Text und Navigation, unter dem Cursor */
  width: clamp(11rem, 22vw, 26rem);   /* mittelgross */
  pointer-events: none;
  opacity: 0;
  translate: -50% -100%;      /* sitzt über dem Mauszeiger, mittig */
  scale: 0.94;
  transition: opacity 0.22s ease, scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0.6rem 1.6rem var(--shadow);
  background: var(--ph);
  line-height: 0;
  will-change: transform;
}
#nav-preview.on { opacity: var(--preview-opacity, 0.72); scale: 1; }   /* Durchsichtigkeit: 1 = voll sichtbar */
#nav-preview img, #nav-preview video { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--nav-h, 8rem) - 2rem); object-fit: cover; }
#nav-preview:empty { display: none; }
@media (hover: none), (pointer: coarse) { #nav-preview { display: none; } }


/* ---------- YouTube-Video (Info-Seite) ---------- */
.yt { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 1.2em; background: var(--ph); overflow: hidden; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.yt .play { position: absolute; left: 50%; top: 50%; width: 3.6rem; height: 3.6rem; translate: -50% -50%; border-radius: 50%; background: var(--blue); }
.yt .play::after { content: ""; position: absolute; left: 53%; top: 50%; translate: -50% -50%; border-left: 1.1rem solid var(--bg); border-top: 0.7rem solid transparent; border-bottom: 0.7rem solid transparent; }
.yt-hit { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; display: block; }

/* Grosse Ansicht in der Bildschirmmitte */
#yt-lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.3s ease;
}
#yt-lightbox.on { opacity: 1; }
.yt-stage {
  width: min(92vw, calc(84vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  scale: 0.92; transition: scale 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#yt-lightbox.on .yt-stage { scale: 1; }
.yt-stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-close {
  position: absolute; top: 1rem; right: 1.1rem;
  font: inherit; font-family: var(--font-head); font-size: 0.85rem; line-height: 1;
  color: #fff; background: var(--blue); border: 1.5px solid var(--blue); border-radius: 999px;
  padding: 0.5em 1em;
}
.yt-close:hover { background: transparent; }
html.yt-open { overflow: hidden; }


/* ---------- Fokus auf die Navigation: Rest der Seite tritt zurück ---------- */
#app, #controls { transition: opacity 0.35s ease; }
html.nav-focus #app { opacity: var(--nav-focus-dim, 0.55); }   /* 1 = keine Wirkung, 0 = ganz weg */

/* YouTube-Link als Medium auf der Startseite (stumm, Schleife, nicht klickbar – der Link zum Projekt bleibt) */
.yt-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ph); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }


/* ---------- Medien-Blöcke der Projektseiten (aus pages.js) ---------- */
.blk-media { margin: 0; line-height: 0; }
.blk-media .mi, .blk-cols .mi { display: inline-block; width: var(--sc, 100%); vertical-align: bottom; max-width: 100%; line-height: 0; }
.blk-media img, .blk-media video, .blk-media .yt-embed, .blk-cols img, .blk-cols video, .blk-cols .yt-embed { display: block; width: 100%; height: auto; }
.mi.fit img, .mi.fit video { max-height: calc(var(--viewport-height, 100vh) - 2 * var(--pad)); width: auto; max-width: 100%; margin: 0 auto; }
.blk-space { height: 1.2em; }
.blk-cols { margin-top: 1.2em; line-height: 0; }
.page-content > .slideshow, .page-content > .blk-media, .page-content > .blk-cols { margin-top: 1.2em; }
.page-content > .blk-media:first-child { margin-top: 0; }

.blk-grid { display: grid; align-items: start; margin-top: 1.2em; line-height: 0; }
.blk-grid img, .blk-grid video { display: block; width: 100%; height: auto; }
.blk-colz { display: flex; align-items: flex-start; margin-top: 1.2em; line-height: 0; }
.blk-colz .colz { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.blk-colz .mi { width: 100%; }
.blk-colz img, .blk-colz video { display: block; width: 100%; height: auto; }
html.is-mobile .blk-colz { display: block; }
html.is-mobile .blk-colz .colz { margin-bottom: 1rem; }
.blk-ff { margin-top: 1.2em; }
.blk-ff .ff-item { filter: none; }
.col > .slideshow { margin-top: 0; }


/* ---------- Projektnummer im blauen Cursor (Hover über Projektname in der Navigation) ---------- */
#cursor-label {
  position: fixed; top: 0; left: 0;
  display: none;
  pointer-events: none;
  z-index: 2147483647;
  color: var(--on-accent, #fff);
  font-family: var(--font-head);
  font-size: calc(0.62 * 5.2rem);   /* = Schriftgrösse der Projektnamen in der Navigation */
  font-weight: 400; line-height: 1; letter-spacing: -0.02em; padding-bottom: 0.04em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.18s ease;
}
#cursor-label.on { opacity: 1; transition-delay: 0.08s; }
@media (hover: none), (pointer: coarse) { #cursor-label { display: none !important; } }

/* ---------- Navigationsfeld etwas durchsichtig, Seite tritt beim Hover weniger zurück ---------- */


/* ---------- Ladeverhalten: weiches Einblenden, kein Springen ---------- */
#app img { opacity: 0; transition: opacity .45s ease; background: var(--ph, transparent); }
#app img.ld { opacity: 1; }
#app video { background: var(--ph, transparent); }
.ff-item img, .ff-item video, .gallery img, .gallery video, .blk-grid img, .blk-grid video, .blk-colz img, .blk-colz video, .blk-media img, .blk-media video { height: auto; }

/* Abstand zwischen den Projektnamen in der Navigation */
.nav-bottom h1 .item { white-space: nowrap; margin-right: 0.22em; }   /* Abstand nach dem Schrägstrich; die Einträge sind mit <wbr> (Breite 0) verbunden, damit er überall genau gleich gross ist */

/* Platz für die Schalter in der ersten Zeile der Navigation */
.nav-bottom h1 .ctl-space { float: right; width: calc(var(--ctl-w, 7rem) + 1rem); height: 1.2em; }

/* ---------- Mengentext: Flattersatz, ein System ---------- */
.text { text-align: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; text-wrap: pretty; font-kerning: normal; font-feature-settings: "kern", "liga"; }
.text p { widows: 3; orphans: 3; }
.text p + p { margin-top: 1.2em; }   /* ein Zeilenabstand = Grundlinienraster */
.credit .label { text-wrap: balance; }
.info p { text-align: left; hyphens: auto; text-wrap: pretty; }

/* Schrägstriche zwischen den Projekten */
.nav-bottom h1 .slash { display: inline-block; margin-left: 0.22em; color: var(--ink-85); pointer-events: none; transition: translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }   /* inline-block, damit der Strich beim Hover mit ausweichen kann */

/* ---------- Handy: Navigation als ausklappbares Menü ---------- */
.nav-toggle { display: none; }
html.is-mobile .nav-bottom { padding: 0.95rem var(--pad) 1rem; }
html.is-mobile .nav-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-head); font-size: calc(0.62 * 3rem); line-height: 1; letter-spacing: -0.02em; text-align: left;
  color: var(--blue-now, var(--blue)); background: none; border: 0; padding: 0; margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.nt-ic { position: relative; flex: none; width: 1.05em; height: 1.05em; transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); }
.nt-ic::before, .nt-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 0.09em; background: currentColor; border-radius: 1em; translate: -50% -50%; }
.nt-ic::after { rotate: 90deg; }
html.nav-open .nt-ic { transform: rotate(135deg); }
html.is-mobile .nav-bottom h1 { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), padding-top 0.5s ease; }
html.is-mobile.nav-open .nav-bottom h1 { max-height: calc(var(--viewport-height, 100vh) - 6rem); overflow-y: auto; padding-top: 1rem; }
html.is-mobile .nav-bottom h1 .item { display: block; margin: 0; padding: 0.14em 0; }
html.is-mobile .nav-bottom h1 .slash { display: none; }
html.is-mobile .nav-bottom h1 a { display: inline-block; }
html.is-mobile .nav-bottom h1 a[data-n]::before {
  content: attr(data-n); display: inline-block; width: 1.9em; font-size: 0.5em; vertical-align: 0.45em; opacity: 0.55; letter-spacing: 0;
}
html.is-mobile.nav-open #app, html.is-mobile.nav-open #controls { opacity: 0.35; }
html.is-mobile.nav-open .nav-bottom { background: var(--bg); }   /* offenes Menü: deckend, damit die Liste lesbar bleibt */

/* ---------- Navigation ziehen ---------- */
.nav-grip {
  position: absolute; left: 0; right: 0; top: 0; height: 1.5rem;
  display: flex; align-items: flex-start; justify-content: center;
  cursor: ns-resize; touch-action: none; z-index: 2;
}
.nav-grip i { display: block; width: 3.2rem; height: 0.24rem; margin-top: 0.5rem; border-radius: 1em; background: var(--blue-now, var(--blue)); opacity: 0.55; transition: opacity 0.2s ease, width 0.3s ease; }
.nav-grip:hover i, .nav-grip:focus-visible i, html.nav-dragging .nav-grip i { opacity: 1; width: 4.4rem; }
html.is-mobile .nav-grip { display: none; }
html.nav-dragging, html.nav-dragging * { cursor: ns-resize !important; user-select: none; -webkit-user-select: none; }
.nav-bottom.sized { overflow: hidden; }
html.nav-dragging .nav-bottom { transition: none; }

/* ---------- 3D-Ansicht ---------- */
.nav-bottom h1 .nav-3d {
  font: inherit; letter-spacing: inherit; color: var(--ink-85); background: none; border: 0; padding: 0; margin: 0;
  transition: color 0.15s ease;
}
.nav-bottom h1 .nav-3d:hover, .nav-bottom h1 .nav-3d[aria-pressed="true"] { color: var(--blue-now, var(--blue)); }

#space {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  --cw: 300px; --ch: 385px;
}
#space.show { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }
html.space-on { overflow: hidden; }
html.space-on #app { visibility: hidden; }
html.space-on #scrollbar { display: none; }

.sp-stage { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 36%; }
.sp-world { position: absolute; left: 50%; top: var(--cy, 46%); width: 0; height: 0; transform-style: preserve-3d; }
.sp-card {
  position: absolute; left: calc(var(--cw) / -2); top: calc(var(--ch) / -2);
  width: var(--cw); height: var(--ch);
  display: block; transform-style: preserve-3d; backface-visibility: visible;
  color: var(--ink); will-change: transform;
}
#space.morph .sp-card { transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease; }
.sp-img {
  position: absolute; inset: 0; display: block; overflow: hidden;
  background: var(--c); color: var(--on);
  box-shadow: 0 0.6rem 2.2rem -0.6rem var(--shadow);
  transform: translateZ(0.5px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sp-card::before { content: ""; position: absolute; inset: 0; background: var(--ph); box-shadow: inset 0 0 0 1px var(--ph), 0 0.6rem 2.2rem -0.6rem var(--shadow); transform: rotateY(180deg); backface-visibility: hidden; }
.sp-img, .sp-cap { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sp-cap { transform: translateZ(0.5px); transition: color 0.15s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sp-img em {
  position: absolute; left: 0.7rem; top: 0.6rem; font-style: normal; font-family: var(--font-head);
  font-size: 0.78rem; padding: 0.22em 0.6em; border-radius: 999px; background: var(--c); color: var(--on);
}
.sp-img:not(:has(img)) em { left: auto; right: 0.5rem; top: auto; bottom: -0.12em; background: none; padding: 0; font-size: calc(var(--cw) * 0.5); line-height: 1; letter-spacing: -0.04em; }
.sp-cap {
  position: absolute; left: 0; top: calc(100% + 0.5rem); white-space: nowrap;
  font-family: var(--font-head); font-size: 0.95rem; letter-spacing: -0.01em; color: var(--ink-85);
  transition: color 0.15s ease;
}
.sp-card:hover .sp-img { transform: translateZ(60px) scale(1.02); }
.sp-card:hover .sp-cap, .sp-card.hl .sp-cap { color: var(--blue-now, var(--blue)); transform: translateZ(60px) translateY(calc(var(--ch, 0px) * 0.024)); }   /* Titel wandert mit dem grösser werdenden Bild nach vorn und nach unten, sonst verschwindet er dahinter */
#space[data-mode="ring"] .sp-card.bk:hover .sp-bk .sp-cap { transform: translateZ(0.5px); }
#space.dragging .sp-card { pointer-events: none !important; }

/* Raster */
#space[data-mode="flat"] { overflow-y: auto; touch-action: pan-y; }
#space[data-mode="flat"] .sp-stage { position: static; perspective: none; padding: 2rem 2rem calc(var(--nav-h, 8rem) + 2.5rem); }
#space[data-mode="flat"] .sp-world {
  position: static; width: auto; height: auto; transform: none !important;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--cw) * 0.78), 1fr)); gap: 3.2rem 1.6rem;
}
#space[data-mode="flat"] .sp-card { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 0.78; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
#space[data-mode="flat"] .sp-card:hover .sp-img { transform: scale(1.02); }
#space[data-mode="flat"] .sp-img, #space[data-mode="flat"] .sp-cap { transform: none; }

/* Schalter Stapel / Ring / Raster + Hinweis */
.sp-modes { position: absolute; right: 1.65rem; bottom: calc(var(--nav-h, 8rem) + 1rem); display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; z-index: 5; }
.sp-modes button {
  font-family: var(--font-head); font-size: 0.82rem; line-height: 1; color: var(--ink-85);
  background: var(--bg); border: 1.5px solid currentColor; border-radius: 999px; padding: 0.5em 1em; margin: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.sp-modes button:hover { color: var(--blue-now, var(--blue)); }
.sp-modes button.on { background: var(--blue-now, var(--blue)); border-color: var(--blue-now, var(--blue)); color: var(--on-accent, var(--bg)); }
.sp-hint { position: absolute; left: var(--pad); bottom: calc(var(--nav-h, 8rem) + 1rem); font-family: var(--font-head); font-size: 0.82rem; color: var(--ink-85); opacity: 0.55; }
html.is-mobile .sp-cap { font-size: 0.8rem; }
html.is-mobile .sp-modes { right: 1.1rem; flex-direction: row; }
@media (prefers-reduced-motion: reduce) { #space.morph .sp-card { transition: none; } }

/* ---------- Navigation ausblenden (X) / wieder einblenden ---------- */
.nav-close { z-index: 3; position: absolute; top: 0.75rem; right: 1.65rem; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; background: none; color: var(--blue-now, var(--blue)); opacity: 0.55; cursor: none; transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); }
.nav-close svg { display: block; width: 100%; height: 100%; }
.nav-close:hover, .nav-close:focus-visible { opacity: 1; transform: rotate(90deg); }
html.is-mobile .nav-close, html.is-mobile #nav-show { display: none; }
html.nav-hidden #nav { display: none; }
#nav-show { display: inline-block; font-weight: 500; letter-spacing: 0.04em; opacity: 0.55; margin-right: 0.2rem; }
#nav-show:hover { opacity: 1; color: var(--blue-now, var(--blue)); }
html:not(.nav-hidden) #nav-show { color: var(--blue-now, var(--blue)); opacity: 1; }

/* ---------- Stack: halbtransparent wie Glas ---------- */
#space[data-mode="stack"] .sp-img {
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 0.4rem 1.6rem -0.8rem var(--shadow);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease;
}
#space[data-mode="stack"] .sp-img img { opacity: 1; mix-blend-mode: normal; }
#space[data-mode="stack"] .sp-img::after {   /* Glanz wie auf einer Glasscheibe */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  display: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.14) 100%);
}
#space[data-mode="stack"] .sp-card:hover .sp-img { background: var(--c); }
#space[data-mode="stack"] .sp-card:hover .sp-img img { opacity: 1; }
:root[data-theme="dark"] #space[data-mode="stack"] .sp-img { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0.4rem 1.6rem -0.8rem var(--shadow); }

/* ---------- Ring: die Karten sind doppelseitig (Rückseite mit Bild und Titel, nicht gespiegelt; Umschalten per Klasse .bk) ---------- */
.sp-bk { display: none; }
#space[data-mode="ring"] .sp-card::before { display: none; }
#space[data-mode="ring"] .sp-card > .sp-img, #space[data-mode="ring"] .sp-card > .sp-cap, #space[data-mode="ring"] .sp-bk, #space[data-mode="ring"] .sp-bk .sp-img, #space[data-mode="ring"] .sp-bk .sp-cap { backface-visibility: visible; -webkit-backface-visibility: visible; }
#space[data-mode="ring"] .sp-card.bk > .sp-img, #space[data-mode="ring"] .sp-card.bk > .sp-cap { display: none; }
#space[data-mode="ring"] .sp-card.bk .sp-bk { display: block; position: absolute; inset: 0; transform: rotateY(180deg); transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
#space[data-mode="ring"] .sp-bk .sp-img { transform: none; }
#space[data-mode="ring"] .sp-card.bk:hover .sp-bk { transform: rotateY(180deg) translateZ(60px); }
#space[data-mode="ring"] .sp-card.bk:hover .sp-bk .sp-img { transform: scale(1.02); }
#space[data-mode="ring"] .sp-card.bk:hover .sp-bk .sp-cap { color: var(--blue-now, var(--blue)); }

/* ---------- Obere Leiste: alle Schalter gleichmässig über die ganze Breite verteilt ---------- */
#controls { display: flex; align-items: center; justify-content: space-between; gap: 0; border-bottom: 0; }
#controls .c-col { display: contents; }
#controls .views { display: contents; }   /* Stack, Ring, Flat sind einzelne, gleichmässig verteilte Punkte */
#controls .seg.lang { gap: 0.7em; }
#controls .seg.lang .sl { display: none; }
#nav-show { margin-right: 0; }
html.is-mobile #controls { padding: 0.55rem 1.1rem; font-size: 0.8rem; }
html.is-mobile #controls #nav-show { display: none; }
#controls .seg.lang button:not(.on) { display: none; }   /* nur die aktuelle Sprache zeigen, Klick wechselt */

/* Hover über die Navigation unten markiert die Karte wie ein Hover direkt darauf */
.sp-card.hl .sp-img { transform: translateZ(60px) scale(1.02); }
.sp-card.hl .sp-cap { color: var(--blue-now, var(--blue)); }
#space[data-mode="flat"] .sp-card.hl .sp-img { transform: scale(1.02); }
#space[data-mode="stack"] .sp-card.hl .sp-img { background: var(--c); }
#space[data-mode="stack"] .sp-card.hl .sp-img img { opacity: 1; }
#space[data-mode="ring"] .sp-card.bk.hl .sp-bk { transform: rotateY(180deg) translateZ(60px); }
#space[data-mode="ring"] .sp-card.bk.hl .sp-bk .sp-img { transform: scale(1.02); }
#space[data-mode="ring"] .sp-card.bk.hl .sp-bk .sp-cap { color: var(--blue-now, var(--blue)); }
#controls .seg.lang button.on { display: none; }   /* Sprachtaste zeigt die Sprache, zu der man wechselt */
#controls .seg.lang button:not(.on) { display: inline-block; opacity: 1; }

/* Obere Leiste: alle Tasten schwarz (im Dunkelmodus weiss), nur Hover und aktive Ansicht in Projektfarbe */
#controls button { color: var(--ink); }
#controls .seg button, #nav-show, html:not(.nav-hidden) #nav-show { color: var(--ink); opacity: 1; }
#controls .seg button.on { color: var(--blue-now, var(--blue)); }
#controls .seg button:hover, #nav-show:hover { color: var(--blue-now, var(--blue)); }
#theme-btn { color: var(--ink) !important; }
#theme-btn:hover { color: var(--blue-now, var(--blue)) !important; }

/* Schwarze Linie zeigt, wo obere Leiste und Navigation beginnen */
#controls { border-bottom: 1px solid var(--ink); }
.nav-bottom { border-top: 1px solid var(--ink); }

/* Ansichts-Tasten als Symbole */
#controls [data-view] { display: block; line-height: 0; padding: 0.15rem 0; }
#controls [data-view] svg { display: block; width: 2.7rem; height: auto; overflow: visible; }

/* Navigation als Symbol, Sprache als runde Marke (wie der Mauszeiger) */
#nav-show { display: block; line-height: 0; padding: 0.15rem 0; }
#nav-show svg { display: block; width: 2.1rem; height: auto; overflow: visible; }
#controls .seg.lang button:not(.on) {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1;
  padding: 0.38em 0.7em 0.34em; border: 1.5px solid currentColor; border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#controls .seg.lang button:not(.on):hover { background: var(--blue-now, var(--blue)); border-color: var(--blue-now, var(--blue)); color: var(--on-accent, #fff); }

/* Einheitliche Liniendicke: Symbole, Marke und die Linien oben/unten */
:root { --line: 1.5px; }
#controls svg [stroke], #controls svg g, #controls svg path, #controls svg ellipse, #controls svg rect { stroke-width: var(--line); vector-effect: non-scaling-stroke; }
#controls { border-bottom: var(--line) solid var(--ink); }
.nav-bottom { border-top: var(--line) solid var(--ink); }
#controls .seg.lang button:not(.on) { border-width: var(--line); }

/* Sprach-Marke: gleiche Linie und Grösse wie die Symbole */
#controls .seg.lang button:not(.on) {
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em;
  min-width: 3rem; height: 1.75rem; padding: 0 0.7em; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; box-shadow: inset 0 0 0 var(--line) currentColor;   /* Linie wie bei den SVG-Symbolen */
}
#controls .seg.lang button:not(.on):hover { box-shadow: inset 0 0 0 var(--line) var(--blue-now, var(--blue)); }

/* Hell / Dunkel: Kreis nur als Linie (hell), ausgefüllt (dunkel) */
#theme-btn { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; }
#theme-btn svg { width: 100%; height: 100%; transform: none !important; scale: 1; transition: scale 0.2s ease; }
#theme-btn[data-mode="dark"] svg { transform: none !important; }
#theme-btn .disc { fill: transparent; stroke: currentColor; stroke-width: var(--line); vector-effect: non-scaling-stroke; transition: fill 0.35s ease; }
#theme-btn[data-mode="dark"] .disc { fill: currentColor; }
#theme-btn:hover svg { scale: 1.12; }

/* Hell / Dunkel: der Kreis pulsiert beim Hover und füllt sich halb */
@keyframes ic-disc { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }
#theme-btn:hover .disc { animation: ic-disc 0.5s ease-in-out both; }
#theme-btn:not([data-mode="dark"]):hover .disc { fill: color-mix(in srgb, currentColor 22%, transparent); }
/* Sprachmarke: federt beim Hover */
@keyframes ic-badge { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.1); } }
#controls .seg.lang button:hover { animation: ic-badge 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) both; }
#controls .seg.lang button:active { animation: none; transform: scale(0.9); }
@media (prefers-reduced-motion: reduce) { #controls svg *, #controls .seg.lang button { animation: none !important; } }

/* Schwarze Linien oben/unten wieder entfernt */
#controls { border-bottom: 0; }
.nav-bottom { border-top: 0; }

/* Schatten der Leisten entfernt */
#controls, .nav-bottom { box-shadow: none; }

/* Kein durchgehender Balken oben: jede Taste hat ihre eigene halbtransparente Fläche */
#controls { background: transparent; pointer-events: none; }
#controls button { pointer-events: auto; background: var(--nav-bg); border-radius: 999px; }
#controls [data-view], #nav-show { padding: 0.4rem 0.95rem; }
#theme-btn { box-sizing: content-box; width: 1.75rem; height: 1.75rem; padding: 0.4rem; }
#controls .seg.lang button:not(.on) { background: var(--nav-bg); }
#controls .seg.lang button:not(.on):hover { background: var(--blue-now, var(--blue)); }
html.is-mobile #controls [data-view], html.is-mobile #nav-show { padding: 0.3rem 0.7rem; }

/* ---------- Desktop: die Tasten sitzen in einer Seitenleiste links (Handy behält die Leiste oben) ---------- */
html:not(.is-mobile) #controls {
  top: 50%; bottom: auto; left: 0.9rem; right: auto; width: auto; padding: 0;
  transform: translateY(-50%);
  flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
}
html:not(.is-mobile) #controls .c-col, html:not(.is-mobile) #controls .views { display: contents; }
html:not(.is-mobile) #controls button { width: 3.7rem; min-width: 0; height: 2.7rem; padding: 0; display: flex; align-items: center; justify-content: center; }
html:not(.is-mobile) #controls .seg.lang button:not(.on) { width: 3.7rem; height: 2.7rem; min-width: 0; padding: 0; background: var(--nav-bg); box-shadow: none; }
html:not(.is-mobile) #controls .seg.lang button:not(.on) span { display: contents; }
html:not(.is-mobile) #theme-btn { box-sizing: border-box; width: 3.7rem; height: 2.7rem; padding: 0; }
html:not(.is-mobile) #theme-btn svg { width: 1.6rem; height: 1.6rem; }
html:not(.is-mobile) #controls [data-view] svg, html:not(.is-mobile) #nav-show svg { width: 2.2rem; }
html:not(.is-mobile) #scrollbar { top: 0.9rem !important; }
html:not(.is-mobile) .page-content { padding-top: 2.8rem; padding-left: calc(var(--pad) + 4.9rem); }   /* Platz für die Seitenleiste */
html:not(.is-mobile) .nav-bottom { padding-left: calc(var(--pad) + 4.9rem); }   /* gleiche linke Kante wie der Inhalt */

/* Seitenleiste liegt auf der Seite (verschiebt nichts): ein halbtransparentes Feld um alle Tasten */
html:not(.is-mobile) .page-content { padding-left: var(--pad); }
html:not(.is-mobile) .nav-bottom { padding-left: var(--pad); }
html:not(.is-mobile) #controls { background: var(--nav-bg); border-radius: 1.4rem; padding: 0.5rem; left: 0.9rem; pointer-events: auto; gap: 0.3rem; }
html:not(.is-mobile) #controls button, html:not(.is-mobile) #controls .seg.lang button:not(.on) { background: transparent; }
html:not(.is-mobile) #controls .seg.lang button:not(.on):hover { background: var(--blue-now, var(--blue)); }
html:not(.is-mobile) #controls button { width: 3.2rem; height: 2.6rem; }
html:not(.is-mobile) #controls .seg.lang button:not(.on) { width: 3.2rem; height: 2.6rem; }
html:not(.is-mobile) #theme-btn { width: 3.2rem; height: 2.6rem; }

/* Seitenleiste links oben */
html:not(.is-mobile) #controls { top: 0.9rem; transform: none; }


/* ---------- Symbole im Stil kräftiger, flächiger Geometrie-Zeichen ---------- */
#controls svg { overflow: visible; }
#controls svg * { transform-box: fill-box; transform-origin: center; }
#controls svg .bold { fill: none; stroke: currentColor; stroke-width: 3px; vector-effect: non-scaling-stroke; }
#controls svg .solid { fill: currentColor; stroke: none; }
#controls button svg { transition: scale 0.2s cubic-bezier(0.34, 1.5, 0.64, 1); }
#controls button:active svg { scale: 0.86; }
#controls [data-view] svg, #nav-show svg { width: 1.9rem; height: 1.9rem; }
@keyframes ic-lines { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(0.4); } }
@keyframes ic-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.14); } }
@keyframes ic-spin { to { transform: rotate(180deg); } }
@keyframes ic-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.65); } }
#nav-show svg rect { transform-origin: left center; }
#nav-show:hover svg rect { animation: ic-lines 0.55s cubic-bezier(0.4, 0, 0.2, 1) both; }
#nav-show:hover svg rect:nth-child(2) { animation-delay: 0.07s; }
#nav-show:hover svg rect:nth-child(3) { animation-delay: 0.14s; }
#controls [data-view="stack"] svg rect { transform-origin: center bottom; }
#controls [data-view="stack"]:hover svg rect { animation: ic-grow 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
#controls [data-view="stack"]:hover svg rect:nth-child(2) { animation-delay: 0.07s; }
#controls [data-view="stack"]:hover svg rect:nth-child(3) { animation-delay: 0.14s; }
@keyframes ic-grow { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(1.35); } }
#controls [data-view="ring"]:hover svg ellipse { animation: ic-spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) both; transform-box: view-box; transform-origin: 12px 12px; }
#controls [data-view="flat"]:hover svg > * { animation: ic-pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
#controls [data-view="flat"]:hover svg > *:nth-child(2) { animation-delay: 0.07s; }
#controls [data-view="flat"]:hover svg > *:nth-child(4) { animation-delay: 0.14s; }
#controls [data-view="flat"]:hover svg > *:nth-child(3) { animation-delay: 0.21s; }
#theme-btn .disc { stroke-width: 3px; }
/* Sprachmarke: ausgefüllte Kapsel */
#controls .seg.lang button:not(.on) { background: var(--ink); color: var(--bg); box-shadow: none; font-weight: 700; letter-spacing: 0.05em; }
#controls .seg.lang button:not(.on):hover { background: var(--blue-now, var(--blue)); color: var(--on-accent, #fff); }
html:not(.is-mobile) #controls .seg.lang button:not(.on) { background: var(--ink); width: 2.7rem; height: 1.7rem; margin: 0.45rem 0; }
html:not(.is-mobile) #controls .seg.lang button:not(.on):hover { background: var(--blue-now, var(--blue)); }
@media (prefers-reduced-motion: reduce) { #controls svg *, #controls .seg.lang button { animation: none !important; } }

/* ---------- Alle Tasten sind Kreise in der Grösse des Maus-Zeigers (25 px) ---------- */
:root { --dot: 25px; }
#controls button, html:not(.is-mobile) #controls button, html:not(.is-mobile) #controls .seg.lang button:not(.on), html:not(.is-mobile) #theme-btn, #theme-btn {
  width: var(--dot) !important; height: var(--dot) !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  border-radius: 50% !important; box-shadow: none !important; box-sizing: border-box !important;
  background: var(--ink) !important; color: var(--bg) !important;
  display: flex !important; align-items: center; justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#controls button:hover, html:not(.is-mobile) #controls .seg.lang button:not(.on):hover, #theme-btn:hover {
  background: var(--blue-now, var(--blue)) !important; color: var(--on-accent, #fff) !important;
}
#controls .seg button.on { color: var(--bg) !important; }
#controls [data-view] svg, #nav-show svg, html:not(.is-mobile) #controls [data-view] svg, html:not(.is-mobile) #nav-show svg { width: 15px !important; height: 15px !important; }
#theme-btn svg, html:not(.is-mobile) #theme-btn svg { width: 15px !important; height: 15px !important; }
#controls .seg.lang button:not(.on) { font-size: 0.62rem !important; font-weight: 700; letter-spacing: 0; line-height: 1; }
#controls [data-view].on { background: var(--blue-now, var(--blue)) !important; color: var(--on-accent, #fff) !important; }   /* aktive Ansicht */
html:not(.is-mobile) #controls { gap: 0.55rem; padding: 0.55rem; border-radius: 999px; }
html.is-mobile #controls { padding: 0.5rem 1.1rem; }
#controls .seg.lang button.on { display: none !important; }   /* nur die Sprache zeigen, zu der man wechselt */
html.is-mobile #nav-show { display: none !important; }

/* ---------- Tasten in der Farbe des gewählten Projekts ---------- */
#controls button, html:not(.is-mobile) #controls button, html:not(.is-mobile) #controls .seg.lang button:not(.on), html:not(.is-mobile) #theme-btn, #theme-btn {
  background: var(--blue-now, var(--blue)) !important; color: var(--on-accent, #fff) !important;
}
#controls button:hover, html:not(.is-mobile) #controls .seg.lang button:not(.on):hover, #theme-btn:hover, #controls [data-view].on {
  background: var(--ink) !important; color: var(--bg) !important;
}

/* Tasten so gross wie der Maus-Zeiger über der Navigation */
:root { --dot: 46px; }
#controls [data-view] svg, #nav-show svg, html:not(.is-mobile) #controls [data-view] svg, html:not(.is-mobile) #nav-show svg, #theme-btn svg, html:not(.is-mobile) #theme-btn svg { width: 26px !important; height: 26px !important; }
#controls .seg.lang button:not(.on) { font-size: 1rem !important; }
html:not(.is-mobile) #controls { gap: 0.6rem; padding: 0.6rem; }
html.is-mobile { --dot: 38px; }
html.is-mobile #controls [data-view] svg, html.is-mobile #nav-show svg, html.is-mobile #theme-btn svg { width: 22px !important; height: 22px !important; }
html.is-mobile #controls .seg.lang button:not(.on) { font-size: 0.85rem !important; }

/* ---------- Kleine Fenster am Desktop: Tasten werden kleiner, bei sehr geringer Höhe liegen sie als Reihe oben ---------- */
@media (max-height: 760px) {
  html:not(.is-mobile) { --dot: 38px; }
  html:not(.is-mobile) #controls [data-view] svg, html:not(.is-mobile) #nav-show svg, html:not(.is-mobile) #theme-btn svg { width: 22px !important; height: 22px !important; }
  html:not(.is-mobile) #controls .seg.lang button:not(.on) { font-size: 0.85rem !important; }
  html:not(.is-mobile) #controls { gap: 0.45rem; padding: 0.45rem; }
}
@media (max-height: 580px) {
  html:not(.is-mobile) { --dot: 34px; }
  html:not(.is-mobile) #controls { flex-direction: row; left: 50%; transform: translateX(-50%); top: 0.6rem; padding: 0.4rem 0.6rem; }
  html:not(.is-mobile) .page-content { padding-top: 4.4rem; }
}
@media (max-width: 1000px) and (min-height: 581px) {
  html:not(.is-mobile) #controls { padding: 0.4rem; }
}

/* Schatten der Navigation unten wieder da */
.nav-bottom { box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow); }

/* ---------- Tasten: schwarze Kreislinie, nicht gefüllt (wenig Kontrast) ---------- */
#controls button, html:not(.is-mobile) #controls button, html:not(.is-mobile) #controls .seg.lang button:not(.on), html:not(.is-mobile) #theme-btn, #theme-btn {
  background: transparent !important; color: var(--ink) !important;
  box-shadow: inset 0 0 0 var(--line) var(--ink) !important;
}
#controls button:hover, html:not(.is-mobile) #controls .seg.lang button:not(.on):hover, #theme-btn:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent) !important; color: var(--ink) !important;
}
#controls #view-btn.on, #controls [data-view].on { background: color-mix(in srgb, var(--ink) 14%, transparent) !important; color: var(--ink) !important; }

/* ---------- Tasten ohne Kontur: nur kräftige Symbole ---------- */
#controls button, html:not(.is-mobile) #controls button, html:not(.is-mobile) #controls .seg.lang button:not(.on), html:not(.is-mobile) #theme-btn, #theme-btn,
#controls button:hover, html:not(.is-mobile) #controls .seg.lang button:not(.on):hover, #theme-btn:hover, #controls #view-btn.on, #controls [data-view].on {
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important; color: var(--ink) !important;
}
#controls #view-btn.on, #controls [data-view].on { background: transparent !important; }
#controls [data-view] svg, #nav-show svg, #theme-btn svg, html:not(.is-mobile) #controls [data-view] svg, html:not(.is-mobile) #nav-show svg, html:not(.is-mobile) #theme-btn svg { width: 30px !important; height: 30px !important; }
#controls .seg.lang button:not(.on) { font-size: 1.15rem !important; font-weight: 700; letter-spacing: 0; }
#theme-btn .disc { stroke-width: 4.2px; }
#controls button svg *, #controls button svg { animation: none !important; }
#controls button { transition: transform 0.25s cubic-bezier(0.34, 1.5, 0.64, 1); }
#controls button:hover { transform: scale(1.18) rotate(-4deg); }
#controls button:active { transform: scale(0.88); }
html.is-mobile #controls [data-view] svg, html.is-mobile #nav-show svg, html.is-mobile #theme-btn svg { width: 24px !important; height: 24px !important; }
html:not(.is-mobile) #controls { gap: 0.5rem; padding: 0.5rem 0.4rem; }
@media (max-height: 760px) {
  html:not(.is-mobile) #controls [data-view] svg, html:not(.is-mobile) #nav-show svg, html:not(.is-mobile) #theme-btn svg { width: 24px !important; height: 24px !important; }
}
#controls .seg.lang { order: 10; }   /* Spracheinstellung ganz unten bzw. ganz rechts */

/* X zum Ausblenden der Navigation: grösser und dicker */
.nav-close { width: 2.6rem; height: 2.6rem; top: 0.9rem; right: 1.4rem; opacity: 0.85; color: var(--ink); }
.nav-close svg path { stroke-width: 3.4; }
.nav-close:hover, .nav-close:focus-visible { opacity: 1; color: var(--blue-now, var(--blue)); }

/* ---------- Kurztext rechts in den 3D-Ansichten ---------- */
#sp-sum {
  position: fixed; right: 2.2rem; top: 1.6rem; z-index: 350; width: min(19rem, 28vw);
  padding: 0; background: none; border-radius: 0;
  font-family: var(--font-body, inherit); color: var(--ink); text-align: right; hyphens: auto; -webkit-hyphens: auto;
  opacity: 0; translate: 0 -0.5rem; pointer-events: none; transition: opacity 0.25s ease, translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#sp-sum.on { opacity: 1; translate: 0 0; }
#sp-sum b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
#sp-sum span { display: block; font-family: var(--font-head); font-size: 1.3rem; line-height: 1.12; letter-spacing: -0.01em; }
html.m-stack:not(.is-mobile) #sp-sum { top: var(--card-top, 11vh); width: min(32rem, 33vw); }   /* Stack: rechts, Oberkante auf Höhe des gewählten Projekts */
html.m-stack:not(.is-mobile) #sp-sum b { font-size: 2rem; margin-bottom: 0.35rem; }
html.m-stack:not(.is-mobile) #sp-sum span { font-size: 1.75rem; line-height: 1.04; letter-spacing: -0.005em; }
html:not(.space-on) #sp-sum { display: none; }
html.is-mobile #sp-sum { right: 1rem; left: 1rem; width: auto; top: auto; bottom: calc(var(--nav-h, 4rem) + 0.8rem); }
html.is-mobile #sp-sum { text-align: left; }
html.is-mobile #sp-sum span { font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.01em; font-family: var(--font-head); }

/* Ring: auch Karten mit Bild bekommen die grosse farbige Nummer unten rechts */
#space[data-mode="ring"] .sp-img em { left: auto; right: 0.5rem; top: auto; bottom: -0.12em; background: none; padding: 0; font-size: calc(var(--cw) * 0.5); line-height: 1; letter-spacing: -0.04em; color: var(--c); text-shadow: 0 0 0.12em rgba(255,255,255,.35); }
#space[data-mode="ring"] .sp-img:not(:has(img)) em { color: var(--on); text-shadow: none; }

/* Verfügbar für Aufträge */
.avail { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.2rem; padding: 0.55rem 1rem 0.55rem 0.85rem; border: var(--line) solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; font-family: var(--font-head); font-size: 0.95rem; line-height: 1; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.avail .dot { position: relative; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #1fd15f; flex: none; }
.avail .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: avail-ping 1.9s ease-out infinite; }
.avail .s { opacity: 0.55; transition: opacity 0.2s ease, translate 0.25s ease; }
.avail:hover { background: var(--blue-now, var(--blue)); border-color: var(--blue-now, var(--blue)); color: var(--on-accent, #fff); }
.avail:hover .s { opacity: 1; translate: 0.25rem 0; }
@keyframes avail-ping { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .avail .dot::after { animation: none; } }

.page-content .avail { color: var(--ink); font-size: 0.95rem; }
.page-content .avail .s { color: inherit; font-size: inherit; }
.page-content .avail:hover { color: var(--on-accent, #fff); }
html:not(.is-mobile) .info .col:first-child > .info-block:first-child, html:not(.is-mobile) .info .avail { margin-left: 56px; }

/* Pfeil unten: Navigation wieder hochholen (nur sichtbar, wenn sie ausgeblendet ist) */
#nav-up { position: fixed; left: 50%; bottom: 0; z-index: 399; translate: -50% 100%; width: 4.6rem; height: 2.3rem; padding: 0; border: 0; border-radius: 1.2rem 1.2rem 0 0; background: var(--nav-bg); color: var(--ink); box-shadow: 0 -0.2rem 0.9rem 0 var(--shadow); display: flex; align-items: center; justify-content: center; cursor: none; opacity: 0; pointer-events: none; transition: translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, color 0.15s ease; }
#nav-up svg { width: 1.7rem; height: 1.7rem; animation: nav-up-bob 2.2s ease-in-out infinite; }
html.nav-hidden #nav-up { translate: -50% 0; opacity: 1; pointer-events: auto; }
#nav-up:hover, #nav-up:focus-visible { color: var(--blue-now, var(--blue)); }
html.is-mobile #nav-up, html:not(.nav-hidden) #nav-up { pointer-events: none; }
html.is-mobile #nav-up { display: none; }
@keyframes nav-up-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.2rem); } }
@media (prefers-reduced-motion: reduce) { #nav-up svg { animation: none; } }

/* Sprachknopf beim Fliesstext */
.txt-lang { display: inline-block; margin: 0 0 0.9rem; padding: 0.32rem 0.7rem 0.28rem; border: var(--line) solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1; cursor: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, scale 0.2s ease; }
.txt-lang:hover, .txt-lang:focus-visible { background: var(--blue-now, var(--blue)); border-color: var(--blue-now, var(--blue)); color: var(--on-accent, #fff); }
.txt-lang:active { scale: 0.94; }

/* Sprachwechsel am Text: alter Text blendet kurz aus, danach schreibt sich der neue */
.page-content .cols:not(.blk-cols) .col.text, .page-content.info .col > :not(.yt):not(.txt-lang) { transition: opacity 0.17s ease; }
html.txt-swap .page-content .cols:not(.blk-cols) .col.text, html.txt-swap .page-content .cols:not(.blk-cols) .marquee, html.txt-swap .page-content.info .col > :not(.yt) { opacity: 0; }
.txt-lang { margin-top: 0.8rem; }
.info .txt-lang { margin-top: 0; }
html:not(.is-mobile) .info .txt-lang { margin-left: 56px; }

/* Diashow «Dip» (Wound of Nature): ohne Bewegung, das Bild geht ins Dunkle, das nächste kommt hell aus dem Dunkel */
.slideshow[data-fx="dip"] { background: #000; }
.slideshow[data-fx="dip"] .slide { transition: none; }
.slideshow[data-fx="dip"] .slide.out { opacity: 1; z-index: 3; }
.slideshow[data-fx="dip"] .slide.out img { animation: fx-dark 0.32s ease-in both; }
.slideshow[data-fx="dip"] .slide.on img { animation: fx-bright 0.55s ease-out 0.28s both; }
@keyframes fx-dark { to { filter: brightness(0); } }
@keyframes fx-bright { from { filter: brightness(0); } to { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .slideshow[data-fx="dip"] .slide img { animation: none !important; } }
.txt-lang-gap { visibility: hidden !important; pointer-events: none; }
.txt-lang-gap .ch { visibility: hidden !important; }
.info .txt-lang { margin-right: 0.6rem; margin-bottom: 1.2rem; }
.col .credits { padding-top: 2.4em; }   /* zwei Zeilen */
.col.text.fill > p:nth-of-type(2) { margin-top: calc(1.2em + var(--fill, 0px)); }
.col.text.fill > .credits { margin-top: var(--fill, 0px); }
.col .credits .credit + .credit { margin-top: 1.2rem; }
.col.nob .credits { padding-top: 0; }

/* Sprachknopf auf dem Grundlinienraster: Knopf = 1 Zeile, Abstand oben/unten je eine halbe Zeile, zusammen 2 Zeilen */
.txt-lang { box-sizing: border-box; display: inline-flex; align-items: center; height: 1.44rem; padding-top: 0; padding-bottom: 0; line-height: 1; margin: 0.72rem 0 0.72rem; vertical-align: top; }
.info .txt-lang { margin: 0 0.6rem 1.44rem 0; }

/* Vorschaukarte mit Video */
.sp-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sp-img:not(:has(img)):has(video) em { left: 0.7rem; right: auto; top: 0.6rem; bottom: auto; background: var(--c); padding: 0.22em 0.6em; font-size: 0.78rem; line-height: normal; letter-spacing: normal; }
#space[data-mode="stack"] .sp-img video { opacity: 1; }

/* Ton-Schalter (unter Hell/Dunkel), gleiche Grösse und Farbe */
#snd-btn { display: block; color: var(--blue-now, var(--blue)) !important; }
#snd-btn svg { width: 1.45rem; height: 1.45rem; display: block; overflow: visible; margin: 0 auto; }
#snd-btn svg .solid { fill: currentColor; stroke: none; }
#snd-btn[data-snd="off"] { opacity: 0.55; }
#snd-btn:hover { opacity: 1; }
html:not(.is-mobile) #snd-btn { width: 3.2rem; height: 2.6rem; display: flex; align-items: center; justify-content: center; }
html.is-mobile #snd-btn { width: 1.9em; height: 1.9em; }
html:not(.is-mobile) #snd-btn svg, html.is-mobile #snd-btn svg { width: 1.9rem !important; height: 1.9rem !important; }
html.is-mobile #snd-btn svg { width: 1.5rem !important; height: 1.5rem !important; }

/* Foto auf der Info-Seite: oben in der ersten Spalte, volle Spaltenbreite, Abstand in ganzen Zeilen */
.info-photo { margin: 0 0 1.2em; }
.info-photo img { display: block; width: 100%; height: auto; }

/* Handy (iPhone 17: 402 × 874): schmalere Ränder, Inhalte breiter */
html.is-mobile { --pad: 1.3rem; }
html.is-mobile #controls { padding-left: calc(var(--pad) - 0.7rem); padding-right: calc(var(--pad) - 0.7rem); }

/* Licht und Schatten auf den Karten der 3D-Ansichten: Glanz oben links, Abdunkeln nach unten rechts und je nach Tiefe/Drehung */
.sp-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, var(--hi, 0)) 0%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, var(--lo, 0)) 100%),
    linear-gradient(rgba(0, 0, 0, var(--sh, 0)), rgba(0, 0, 0, var(--sh, 0)));
}

/* Farbmodus (dritter Druck auf den Hell/Dunkel-Schalter): Symbol halb gefüllt; Hintergrund und Flächen nehmen die Projektfarbe an (Variablen setzt main.js) */
#theme-btn .half { fill: none; transition: fill 0.35s ease; }
#theme-btn[data-mode="color"] .half { fill: currentColor; }
html[data-theme="color"] #space .sp-img { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 38%, transparent), 0 0.6rem 2.2rem -0.6rem var(--shadow); }

/* Farbmodus: ganz feine, leichte Körnung wie Papier – nur hier, in allen Projekten gleich zart */
html[data-theme="color"] body, html[data-theme="color"] #space, html[data-theme="color"] #app, html[data-theme="color"] .page {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .24 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  background-repeat: repeat;
}

/* ---------- Wilder Modus: bunte Verlaufs-Spalten (siehe src/69-wild.js) ---------- */
@property --wa { syntax: '<color>'; inherits: true; initial-value: #0000ff; }
@property --wb { syntax: '<color>'; inherits: true; initial-value: #6a6aff; }
#wild { display: none; }
html[data-theme="wild"] { background: #fff; transition: --wa 0.7s ease, --wb 0.7s ease; }
html[data-theme="wild"] #wild { display: flex; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#wild i { display: block; width: 100%; height: 220%; will-change: transform; background: linear-gradient(180deg, var(--wa) 0%, var(--wa) 22%, var(--wb) 62%, var(--wa) 100%); animation: wildflow 26s ease-in-out infinite alternate; }
@keyframes wildflow { from { transform: translateY(0); } to { transform: translateY(-54%); } }
@media (prefers-reduced-motion: reduce) { #wild i { animation: none; } }
html[data-theme="wild"] body, html[data-theme="wild"] #app, html[data-theme="wild"] .page, html[data-theme="wild"] #space { background: transparent !important; background-image: none !important; }
/* Schrift steht wie auf dem Plakat auf weissen Kästchen, damit sie auf den Verläufen lesbar bleibt */
html[data-theme="wild"] .cols > .col, html[data-theme="wild"] .credits-row, html[data-theme="wild"] .info-block, html[data-theme="wild"] .marquee,
html[data-theme="wild"] #space .sp-cap, html[data-theme="wild"] #sp-sum span, html[data-theme="wild"] .txt-lang { background: rgba(255, 255, 255, 0.9); }
html[data-theme="wild"] .cols > .col:not(:empty), html[data-theme="wild"] .info-block { padding: 0.45rem 0.7rem; }
html[data-theme="wild"] #space .sp-cap { padding: 0.1em 0.45em; width: max-content; }
html[data-theme="wild"] #sp-sum span { display: inline; padding: 0.15em 0.4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
html[data-theme="wild"] #sp-sum { color: #000 !important; }
html[data-theme="wild"] #space .sp-img { box-shadow: 0 0.6rem 2.2rem -0.6rem rgba(0,0,0,0.4); }
#theme-btn .qm { opacity: 0; transition: opacity 0.35s ease; }
#theme-btn[data-mode="wild"] .qm { opacity: 1; }
#theme-btn[data-mode="wild"] .disc { opacity: 0; }

/* Vorlesen-Knopf (Lautsprecher) neben dem DE/EN-Knopf */
.txt-speak { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; vertical-align: top; height: 1.44rem; margin: 0.72rem 0 0.72rem 0.4rem; padding: 0 0.7rem; border: var(--line) solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); line-height: 1; cursor: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, scale 0.2s ease; }
.txt-speak svg { width: 1rem; height: 0.9rem; display: block; overflow: visible; }
.txt-speak .sp-cone { fill: currentColor; }
.txt-speak:hover, .txt-speak:focus-visible, .txt-speak.speaking { background: var(--blue-now, var(--blue)); border-color: var(--blue-now, var(--blue)); color: var(--on-accent, #fff); }
.txt-speak:active { scale: 0.94; }
@keyframes spk-wave { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.txt-speak.speaking .sp-wave { animation: spk-wave 0.9s ease-in-out infinite; }
.info .txt-speak { margin: 0 0 1.44rem 0; }
html[data-theme="wild"] .txt-speak { background: rgba(255,255,255,0.9); }
html[data-theme="wild"] .txt-speak:hover, html[data-theme="wild"] .txt-speak.speaking { background: var(--blue-now, var(--blue)); }

/* Ton-Knopf auf Videos mit Tonspur */
.vsound { position: absolute; z-index: 40; box-sizing: border-box; width: 2.1rem; height: 2.1rem; padding: 0; display: flex; align-items: center; justify-content: center; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--bg); color: var(--ink); cursor: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, scale 0.2s ease; }
.vsound[hidden] { display: none; }
.vsound svg { width: 1.3rem; height: 1.3rem; display: block; overflow: visible; }
.vsound:hover, .vsound:focus-visible, .vsound.on { background: var(--blue-now, var(--blue)); border-color: var(--blue-now, var(--blue)); color: var(--on-accent, #fff); }
.vsound:active { scale: 0.92; }

.vsound:not(.on) { opacity: 0.45; }
.vsound:not(.on):hover, .vsound:not(.on):focus-visible { opacity: 1; }

/* ---------- Info-Seite: aufgeräumt ---------- */
.info h2 { font-size: 0.78rem; font-style: normal; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.2; margin: 0 0 0.2rem; padding-top: 0.7rem; border-top: var(--line) solid var(--ink); }
.info .col > h2:not(:first-child) { margin-top: 2.6rem; }
.info .info-block.entry { margin: 0; padding: 0.7rem 0 0.75rem; border-top: 1px solid var(--ink-15, rgba(128,128,128,0.28)); }
.info .info-block.entry:first-of-type, .info h2 + .info-block.entry { border-top: 0; }
.info .info-block.entry .date { font-size: 0.8rem; opacity: 0.55; margin-bottom: 0.2rem; font-variant-numeric: tabular-nums; }
.info .info-name { margin: 0 0 0.9rem; }
.info .info-name p { font-size: 1.2rem; line-height: 1.2; }
.info .info-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.info .info-tools .txt-lang, .info .info-tools .txt-speak { margin: 0; }
.info .avail { margin: 0 0 1.6rem; }
.info .info-contact { margin: 0 0 1.6rem; border-top: var(--line) solid var(--ink); }
.info .info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0 0.6rem; border-bottom: 1px solid var(--ink-15, rgba(128,128,128,0.28)); }
.info .info-row > span { font-size: 0.8rem; opacity: 0.55; }
.info .info-row a { text-align: right; }
.info .info-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.7rem; }
.info .info-tags > span { display: inline-block; padding: 0.3rem 0.75rem 0.28rem; border: var(--line) solid var(--ink); border-radius: 999px; font-size: 0.8rem; line-height: 1.2; white-space: nowrap; }
html:not(.is-mobile) .info.has-photo .txt-lang, html:not(.is-mobile) .info.has-photo .avail, html:not(.is-mobile) .info.has-photo .col:first-child > .info-block:first-child { margin-left: 0; }
html[data-theme="wild"] .info .info-tags > span, html[data-theme="wild"] .info .info-row { background: rgba(255,255,255,0.9); }
html:not(.is-mobile) .info .info-reel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; }
html:not(.is-mobile) .info .info-reel-row .col.reel { grid-column: 2 / 4; }
html.is-mobile .info .info-reel-row { margin-top: 2.6rem; }
.info .reel .yt { margin: 0.7rem 0 0; }

/* ---------- Wilder Modus: fliegende Navigation, wackelnde Inhalte, Formen, Konfetti ---------- */
#fly { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.fly-btn { position: absolute; left: 0; top: 0; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; border: 2px solid #000; border-radius: 999px; padding: 0.42em 0.95em 0.4em; font-family: var(--font-head); line-height: 1.1; white-space: nowrap; cursor: none; box-shadow: 3px 4px 0 rgba(0,0,0,0.9); will-change: transform; transition: box-shadow 0.12s ease; -webkit-tap-highlight-color: transparent; }
.fly-btn:hover { box-shadow: 5px 7px 0 rgba(0,0,0,0.9); }
.fly-btn.held { box-shadow: 7px 10px 0 rgba(0,0,0,0.9); z-index: 5; }
.fly-btn.cur { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 3px 4px 0 rgba(0,0,0,0.9), 0 0 0 6px #000; }
html[data-theme="wild"] #nav-up, html[data-theme="wild"] #nav { display: none !important; }
#wild-fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
#wild-fx i { position: absolute; display: block; }
.wild-shapes { position: absolute; inset: 0; overflow: hidden; }
.ws { position: absolute; width: var(--sz); height: var(--sz); opacity: 0.85; animation: wsfloat var(--du) ease-in-out var(--de) infinite alternate; }
.ws.circle { background: var(--c); border-radius: 50%; }
.ws.ring { border: calc(var(--sz) * 0.16) solid var(--c); border-radius: 50%; box-sizing: border-box; }
.ws.sq { background: var(--c); border-radius: 12%; }
.ws.tri { background: var(--c); clip-path: polygon(50% 5%, 96% 92%, 4% 92%); }
.ws.star { background: var(--c); clip-path: polygon(50% 0, 61% 36%, 98% 36%, 68% 58%, 79% 94%, 50% 72%, 21% 94%, 32% 58%, 2% 36%, 39% 36%); }
.ws.squig { height: calc(var(--sz) * 0.3); background: repeating-linear-gradient(90deg, var(--c) 0 12%, transparent 12% 24%); border-radius: 99px; clip-path: polygon(0 40%, 12% 0, 25% 40%, 37% 0, 50% 40%, 62% 0, 75% 40%, 87% 0, 100% 40%, 100% 100%, 87% 60%, 75% 100%, 62% 60%, 50% 100%, 37% 60%, 25% 100%, 12% 60%, 0 100%); }
@keyframes wsfloat { from { translate: 0 0; rotate: 0deg; scale: 1; } 50% { scale: 1.25; } to { translate: var(--dx) var(--dy); rotate: var(--rt); scale: 0.85; } }
@keyframes wwob { from { rotate: -1.2deg; scale: 1; } 50% { scale: 1.012; } to { rotate: 1.4deg; scale: 0.992; } }
html[data-theme="wild"] :is(#app img, #app video, #app .yt, #app .col.text, #app .info-block, #app .info-contact, #app .info-tags, #app .marquee) { animation: wwob 5.5s ease-in-out infinite alternate; }
html[data-theme="wild"] :is(#app img, #app video, #app .yt, #app .col.text, #app .info-block):nth-child(2n) { animation-duration: 7.3s; animation-direction: alternate-reverse; }
html[data-theme="wild"] :is(#app img, #app video, #app .yt, #app .col.text, #app .info-block):nth-child(3n) { animation-duration: 4.4s; animation-delay: -1.3s; }
html[data-theme="wild"] :is(#app img, #app video, #app .yt, #app .col.text, #app .info-block, #app .info-contact, #app .info-tags, #app .marquee) { cursor: none; }
html[data-theme="wild"] .w-held { animation-play-state: paused; scale: 1.04; filter: drop-shadow(8px 12px 0 rgba(0,0,0,0.25)); }
@media (prefers-reduced-motion: reduce) { html[data-theme="wild"] :is(#app img, #app video, #app .yt, #app .col.text, #app .info-block, #app .info-contact, #app .info-tags, #app .marquee), .ws { animation: none; } }
#fly-cards { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.fly-card { position: absolute; left: 0; top: 0; display: block; pointer-events: auto; overflow: hidden; border-radius: 14px; background: var(--c, #fff); border: 3px solid #000; box-shadow: 6px 8px 0 rgba(0,0,0,0.85); cursor: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; will-change: translate, rotate; }
.fly-card img, .fly-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fly-card em { position: absolute; left: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); padding: 0.2em 0.65em; border-radius: 999px; background: #fff; color: #000; border: 2px solid #000; font-style: normal; font-size: 0.85rem; line-height: 1.2; font-family: var(--font-head); }

/* Ring-Ansicht: Abspiel-Knopf unter dem Ton-Schalter */
#ring-play { display: block; color: var(--blue-now, var(--blue)) !important; }
#ring-play[hidden] { display: none !important; }
#ring-play svg { display: block; overflow: visible; margin: 0 auto; width: 1.9rem; height: 1.9rem; }
#ring-play svg .solid { fill: currentColor; stroke: none; }
html:not(.is-mobile) #ring-play { position: fixed; left: 1.5rem; bottom: calc(var(--nav-h) + 1rem); z-index: 360; width: 4.6rem; height: 4.6rem; display: flex; align-items: center; justify-content: center; }
html:not(.is-mobile) #ring-play svg { width: 3.4rem; height: 3.4rem; }
html:not(.is-mobile) #ring-play[hidden] { display: none !important; }
html.is-mobile #ring-play { width: 1.9em; height: 1.9em; }
html.is-mobile #ring-play svg { width: 1.5rem !important; height: 1.5rem !important; }
#ring-play[aria-pressed="false"] { opacity: 0.75; }
#ring-play:hover { opacity: 1; }


#space[data-mode="flat"] .sp-card:hover .sp-cap, #space[data-mode="flat"] .sp-card.hl .sp-cap { transform: translateY(calc(var(--ch, 0px) * 0.012)); }

/* ---------- Info-Seite: Aufbau wie im Quellcode der Cargo-Seite ---------- */
.src-info .info-title { margin: 0 0 1.2em; }
.src-info .info-entry { margin: 0 0 1.2em; line-height: 1.2; }
.src-info .info-exp { line-height: 1.2; }
.src-info .info-cap { display: block; margin-top: 0.5em; }
.src-info .info-photo { margin: 0 0 1.4em; max-width: 30rem; }
.src-info .info-links { line-height: 1.2; }
.src-info .info-links a { text-decoration: none; background-image: none; color: var(--ink); }
.src-info .info-links a:hover { color: var(--blue-now, var(--blue)); }
.src-info .info-tools { margin-top: 1.2rem; }
.src-info .info-lists { margin-top: 3.4rem; }
html:not(.is-mobile) .src-info .cols { gap: 2rem; }
html:not(.is-mobile) .src-info .info-lists { gap: 1rem; }
html:not(.is-mobile) .src-info .info-reel-row { margin-top: 1.2rem; }

/* wie im Quellcode der Cargo-Seite: Achsen der Variabel-Schriften auf Normalschnitt */
body, .nav-bottom h1 { font-variation-settings: "slnt" 0, "MONO" 0; }
/* Info (Desktop): die erste Zeile beginnt rechts neben der Tastenleiste links, damit nichts überlappt */
html:not(.is-mobile) .src-info .cols:first-child > .col:first-child { margin-left: 56px; }
html:not(.is-mobile) .src-info .info-tools .txt-lang { margin-left: 0; }

/* Handy: leichtere 3D-Karten (weniger Schatten = weniger Zeichenarbeit pro Bild) */
html.is-mobile #space .sp-img, html.is-mobile #space .sp-card::before { box-shadow: none; }
html.is-mobile #space[data-mode="stack"] .sp-img { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); }
/* Handy, Ring-Ansicht: der Kurztext darf unter dem Bild mehr Platz nehmen und ist grösser */
html.is-mobile.m-ring #sp-sum span { font-size: 2.15rem; line-height: 1.07; letter-spacing: -0.015em; }

/* ======================================================
   DJ-Ansicht: Ring in der Mitte, unten das DJ-Pult (Deck · Mixer · Synth), dahinter Spektrum und Wellenform
   ====================================================== */
html.m-dj .nav-bottom, html.m-dj #nav, html.m-dj #nav-up { display: none !important; }
html.m-dj:not(.is-mobile) #sp-sum { right: 2rem; top: 5.2rem; width: min(15.5rem, 17vw); text-align: right; will-change: transform, filter; }
html.m-dj #sp-sum b { font-size: 1.5rem; margin-bottom: 0.3rem; font-weight: 500; letter-spacing: -0.01em; }
html.m-dj #sp-sum span { font-size: 1.12rem; line-height: 1.1; font-weight: var(--dj-w, 400); letter-spacing: var(--dj-ls, -0.01em); }
html.m-dj #space { background: transparent; }
#dj-vis { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 299; pointer-events: none; display: none; }
#dj-vis.on { display: block; }
#dj { position: fixed; left: 0; right: 0; bottom: 0; z-index: 350; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr); gap: 1.6rem; padding: 1rem 1.6rem 1.1rem; height: clamp(230px, 34vh, 320px); background: var(--bg); border-top: 1px solid var(--ink-15, rgba(128, 128, 128, 0.3)); color: var(--ink); font-family: var(--font-head); user-select: none; -webkit-user-select: none; touch-action: none; }
#dj[hidden], html:not(.m-dj) #dj { display: none !important; }
#dj .dj-sec { min-width: 0; min-height: 0; display: flex; }
#dj .dj-lab { display: block; margin-top: 0.3rem; font-size: 0.66rem; letter-spacing: 0.08em; line-height: 1; text-align: center; color: var(--ink); opacity: 0.7; }
#dj .dj-val { font-style: normal; opacity: 0.8; margin-left: 0.2em; }
/* Deck */
#dj .dj-deck { gap: 1rem; align-items: center; }
#dj .dj-jog { flex: 0 1 auto; height: 100%; aspect-ratio: 1; max-width: 100%; cursor: grab; touch-action: none; border-radius: 50%; }
#dj .dj-jog.held { cursor: grabbing; }
#dj .jog-disc { display: block; width: 100%; height: 100%; color: var(--ink); will-change: transform; }
#dj .jog-disc .rim { fill: none; stroke: currentColor; stroke-width: 3; }
#dj .jog-disc .gr { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.35; }
#dj .jog-disc .lbl { fill: var(--blue-now, var(--blue)); }
#dj .jog-disc .hole { fill: var(--bg); }
#dj .jog-disc .mark { stroke: var(--blue-now, var(--blue)); stroke-width: 6; stroke-linecap: round; }
#dj .dj-tr { display: flex; flex-direction: column; gap: 0.6rem; flex: 1 1 auto; min-width: 0; }
#dj .dj-btn { box-sizing: border-box; min-height: 2rem; padding: 0.35rem 0.8rem 0.3rem; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
#dj .dj-btn:hover { border-color: var(--blue-now, var(--blue)); color: var(--blue-now, var(--blue)); }
#dj .dj-btn.on { background: var(--blue-now, var(--blue)); border-color: var(--blue-now, var(--blue)); color: #fff; }
#dj .dj-play { min-height: 2.8rem; }
#dj .dj-play svg { width: 1.3rem; height: 1.3rem; }
/* Mixer */
#dj .dj-mix { gap: 1.4rem; align-items: stretch; }
#dj .dj-knobs { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 1.1rem 0.6rem; align-content: center; justify-items: center; min-width: 0; }
#dj .dj-knob { display: flex; flex-direction: column; align-items: center; cursor: ns-resize; outline: none; touch-action: none; }
#dj .dj-knob svg { width: clamp(2.6rem, 5.6vh, 3.4rem); height: auto; aspect-ratio: 1; overflow: visible; color: var(--ink); }
#dj .dj-knob .kb { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.28; }
#dj .dj-knob .ka { fill: none; stroke: var(--blue-now, var(--blue)); stroke-width: 4.5; stroke-linecap: butt; stroke-dasharray: 0 200; }
#dj .dj-knob .kt line { stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
#dj .dj-knob:focus-visible .kb, #dj .dj-knob.drag .kb { opacity: 0.8; stroke: var(--blue-now, var(--blue)); }
#dj .dj-faders { flex: 0 0 auto; display: flex; gap: 0.9rem; align-items: stretch; }
#dj .dj-fader { display: flex; flex-direction: column; align-items: center; min-width: 2.4rem; cursor: ns-resize; outline: none; touch-action: none; }
#dj .dj-fader .ft { position: relative; flex: 1 1 auto; width: 2.2rem; min-height: 4rem; }
#dj .dj-fader .ft::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; background: var(--ink); opacity: 0.35; }
#dj .dj-fader .fh { position: absolute; left: 50%; bottom: calc(var(--p, 0.5) * (100% - 1.1rem)); width: 1.7rem; height: 1.1rem; translate: -50% 0; border-radius: 0.3rem; background: var(--blue-now, var(--blue)); box-shadow: 0 0 0 2px var(--bg); }
#dj .dj-fader:focus-visible .fh, #dj .dj-fader.drag .fh { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
/* Synth */
#dj .dj-syn { flex-direction: column; gap: 0.6rem; }
#dj .dj-opts { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
#dj .dj-waves, #dj .dj-oct { display: flex; gap: 0.4rem; align-items: center; }
#dj .dj-waves .dj-btn { min-height: 1.7rem; padding: 0.3rem 0.6rem 0.26rem; font-size: 0.64rem; }
#dj .dj-oct .dj-btn { min-height: 1.7rem; min-width: 1.7rem; padding: 0.2rem 0.5rem; font-size: 0.9rem; }
#dj .dj-oct span { font-size: 0.64rem; letter-spacing: 0.08em; min-width: 3.2em; text-align: center; opacity: 0.75; }
#dj .dj-pads { flex: 2 1 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0.5rem; min-height: 0; }
#dj .dj-drums { flex: 1 1 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; min-height: 0; }
#dj .dj-pad { position: relative; box-sizing: border-box; min-height: 0; padding: 0; border: 1.5px solid var(--ink); border-radius: 0.6rem; background: transparent; color: var(--ink); font-family: var(--font-head); touch-action: none; transition: background-color 0.08s ease, color 0.08s ease, border-color 0.08s ease, transform 0.08s ease; }
#dj .dj-pad b { position: absolute; right: 0.5rem; bottom: 0.35rem; font-size: 0.66rem; font-weight: 400; letter-spacing: 0.06em; opacity: 0.6; }
#dj .dj-pad span { position: absolute; left: 0.5rem; top: 0.4rem; font-size: 0.6rem; letter-spacing: 0.08em; opacity: 0.85; }
#dj .dj-pad:hover { border-color: var(--blue-now, var(--blue)); }
#dj .dj-pad.on { background: var(--blue-now, var(--blue)); border-color: var(--blue-now, var(--blue)); color: #fff; transform: scale(0.96); }
#dj .dj-drum { border-style: dashed; }
#dj .dj-drum.on { border-style: solid; }
/* Handy: das Pult nimmt die untere Hälfte, alles kompakter und ohne Jog-Rad */
html.is-mobile #dj { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0.55rem; padding: 0.6rem 0.75rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); height: auto; max-height: 56vh; overflow: hidden; }
html.is-mobile #dj .dj-deck { order: 1; gap: 0.5rem; }
html.is-mobile #dj .dj-jog { display: none; }
html.is-mobile #dj .dj-tr { flex-direction: row; gap: 0.5rem; }
html.is-mobile #dj .dj-tr .dj-btn { flex: 1 1 0; min-height: 2.4rem; }
html.is-mobile #dj .dj-mix { order: 2; flex-direction: column; gap: 0.5rem; }
html.is-mobile #dj .dj-knobs { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; gap: 0.2rem; }
html.is-mobile #dj .dj-knob svg { width: 2.5rem; }
html.is-mobile #dj .dj-lab { font-size: 0.56rem; margin-top: 0.15rem; }
html.is-mobile #dj .dj-faders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
html.is-mobile #dj .dj-fader { flex-direction: column-reverse; min-width: 0; cursor: ew-resize; }
html.is-mobile #dj .dj-fader .ft { width: 100%; min-height: 1.5rem; height: 1.5rem; flex: none; }
html.is-mobile #dj .dj-fader .ft::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; translate: 0 -50%; }
html.is-mobile #dj .dj-fader .fh { left: calc(var(--p, 0.5) * (100% - 1.7rem)); bottom: auto; top: 50%; translate: 0 -50%; width: 1.7rem; height: 1.1rem; }
html.is-mobile #dj .dj-fader .dj-lab { margin: 0 0 0.2rem; }
html.is-mobile #dj .dj-syn { order: 3; gap: 0.45rem; }
html.is-mobile #dj .dj-opts { gap: 0.4rem; }
html.is-mobile #dj .dj-pads { flex: none; grid-template-rows: repeat(2, 2.7rem); gap: 0.4rem; }
html.is-mobile #dj .dj-drums { flex: none; grid-auto-rows: 2.5rem; gap: 0.4rem; }
html.is-mobile #dj .dj-pad b { display: none; }
@media (hover: none) { #dj .dj-pad:hover, #dj .dj-btn:hover { border-color: var(--ink); color: var(--ink); } #dj .dj-btn.on:hover { color: #fff; border-color: var(--blue-now, var(--blue)); } }

/* DJ: Wörter einzeln beweglich */
#sp-sum .dj-wd { display: inline-block; padding: 0 0.04em; font-style: normal; transform-origin: 50% 80%; will-change: transform; }
html.m-dj #sp-sum span { line-height: 1.3; }

/* Schalter oben: alles etwas grösser */
#controls [data-view] svg, #nav-show svg, #theme-btn svg, html:not(.is-mobile) #controls [data-view] svg, html:not(.is-mobile) #nav-show svg, html:not(.is-mobile) #theme-btn svg { width: 40px !important; height: 40px !important; }
#controls .seg.lang button:not(.on) { font-size: 1.5rem !important; }
html:not(.is-mobile) #snd-btn { width: 3.8rem; height: 3.2rem; }
html:not(.is-mobile) #snd-btn svg { width: 2.5rem !important; height: 2.5rem !important; }
html.is-mobile #controls [data-view] svg, html.is-mobile #nav-show svg, html.is-mobile #theme-btn svg { width: 31px !important; height: 31px !important; }
html.is-mobile #controls .seg.lang button:not(.on) { font-size: 1.1rem !important; }
html.is-mobile #snd-btn svg { width: 1.95rem !important; height: 1.95rem !important; }

/* Für Suchmaschinen und Screenreader: Überschrift und Text vorhanden, aber nicht sichtbar */
.seo-h1, .seo-static { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Desktop: die Schalter oben in der Mitte (in einer Reihe) statt links oben */
html:not(.is-mobile) #controls { flex-direction: row; left: 50%; right: auto; transform: translateX(-50%); width: auto; }