/*
Theme Name:   Arezuland
Theme URI:    https://arezuweitholz.de
Author:       Arezu Weitholz
Description:  Minimalistisches, flexibles Theme: Papier und Leinen, roter Faden, Collage, Leinen- und Linkgewebe, Begleitfiguren. Benötigt ACF Pro.
Version:      1.2.0
Requires at least: 6.4
Requires PHP: 8.0
License:      GPL-2.0-or-later
Text Domain:  arezuland
*/


/* =====================================================
   1. SCHRIFTEN (lokal, siehe /webfonts)
===================================================== */
/*
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("webfonts/sniglet-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("webfonts/sniglet-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("webfonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("webfonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("webfonts/inter-latin-600-normal.woff2") format("woff2"); }
*/
@font-face { font-family: "Open sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("webfonts/open-sans-v18-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Open sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("webfonts/open-sans-v18-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Open sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("webfonts/open-sans-v18-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Open sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("webfonts/open-sans-v18-latin-800.woff2") format("woff2"); }


/* =====================================================
   2. FARBEN UND GRUNDWERTE
   Akzent, Fadenfarbe und Hintergrund werden pro Seite
   von functions.php überschrieben (arezu_css_variablen).
===================================================== */

:root {
  --ink: #181714;
  --muted: #71695e;
  --paper: #f7f0e4;
  --paper-alt: #eee3d1;
  --tape: rgba(238, 219, 168, .75);
  --akzent: #B23A48;
  --faden: var(--akzent);
  --linie: rgba(24, 23, 20, .14);

  --header-height: 76px;
  --header-bg: transparent;
  --header-text: #181714;

  --schrift-text: "Open sans", Arial, sans-serif;
  --schrift-kopf: "Open sans", Arial, system-ui, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --breite-text: 720px;
  --breite-weit: 1180px;

  /* Seitenhintergrund (Papier ist Standard) */
  --bg-farbe: #efe9df;
  --bg-bild: url("images/papier.webp");
  --bg-groesse: cover;
  --bg-wdh: repeat;
  --bg-lauf: fixed;
  --bg-mischung: normal;
}

body.bg-leinen { --bg-bild: url("images/leinen.webp"); --bg-groesse: 747px auto; --bg-farbe: #d8d0bb; }
body.bg-farbe  { --bg-bild: none; }
body.bg-bild   { --bg-groesse: cover; }
body.bg-mitlaufend { --bg-lauf: scroll; }

/* Feste Hintergründe ruckeln auf Mobilgeräten: dort immer mitlaufen */
@media (hover: none), (max-width: 750px) {
  :root, body { --bg-lauf: scroll; }
  body.bg-papier { --bg-groesse: 1800px auto; }
}


/* =====================================================
   3. GRUNDLAGEN
===================================================== */

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

html {
  scroll-padding-top: calc(var(--header-height) + 10px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Alles, was den Seitenhintergrund tragen soll, bekommt .flaeche.
   Gepinnte Bühnen brauchen ihn selbst, damit nichts darunter wegrutscht. */
body,
.flaeche {
  background-color: var(--bg-farbe);
  background-image: var(--bg-bild);
  background-position: center top;
  background-size: var(--bg-groesse);
  background-repeat: var(--bg-wdh);
  background-attachment: var(--bg-lauf);
  background-blend-mode: var(--bg-mischung);
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; height: auto; }

a { color: inherit; }

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

.visually-hidden,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  left: 12px; top: -60px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

.haupt { display: block; }

.kicker {
  display: block;
  margin: 0 0 18px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}


/* =====================================================
   4. HEADER
===================================================== */

.site-header {
  position: fixed;
  left: 0; top: 0;
  z-index: 1000;
  width: 100%;
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(20px, 4vw, 60px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--header-text);
  view-transition-name: kopfzeile;
  transition: opacity .45s ease, transform .65s var(--ease), visibility .45s;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg);
}

/* Header erscheint erst, wenn der erste Abschnitt vorbei ist */
.header-spaet .site-header:not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px);
  pointer-events: none;
}

/* Kein Header: nur der Menüknopf schwebt oben rechts */
.header-aus .site-header { justify-content: flex-end; pointer-events: none; }
.header-aus .site-header::before,
.header-aus .site-header__name { display: none; }
.header-aus .menu-button {
  pointer-events: auto;
  color: var(--ink);
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(30, 24, 15, .18);
}
.header-aus.menu-open .menu-button { color: var(--ink); }

/* Ohne Header sitzt der Inhalt ganz oben; mit Header rückt er nach unten */
.header-immer .haupt { padding-top: var(--header-height); }
.header-immer .haupt > .modul:first-child.modul--vollbild { margin-top: calc(var(--header-height) * -1); }

.site-header__name {
  color: inherit;
  text-decoration: none;
  font-family: var(--schrift-kopf);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -.025em;
  text-transform: uppercase;
  font-weight: 600;
}
.site-header__name img { display: block; max-height: calc(var(--header-height) - 24px); width: auto; }


/* =====================================================
   5. HAMBURGER UND MENÜ
===================================================== */

.menu-button {
  position: relative;
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.menu-button span {
  position: absolute;
  left: 8px;
  width: 32px; height: 2px;
  background: currentColor;
  transition: transform .5s var(--ease), top .5s var(--ease);
}
.menu-button span:first-child { top: 18px; }
.menu-button span:last-child  { top: 28px; }
.menu-button.is-open span:first-child { top: 23px; transform: rotate(45deg); }
.menu-button.is-open span:last-child  { top: 23px; transform: rotate(-45deg); }

/* Über dem offenen Menü ist der Header-Hintergrund ausgeblendet, das Kreuz dunkel */
.menu-open .site-header { color: var(--ink); }
.menu-open .site-header::before { opacity: 0; }

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: calc(var(--header-height) + 30px) clamp(25px, 7vw, 90px) 50px;
  overflow-y: auto;
  background: #d7cdbc;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px);
  pointer-events: none;
  transition: opacity .45s ease, transform .65s var(--ease), visibility .45s;
}
.menu-panel.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.menu-panel__inner { width: min(100%, 950px); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel .sub-menu a { font-size: .5em; padding-left: 1em; }

.menu-panel a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid rgba(24, 23, 20, .18);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--schrift-kopf);
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: .95;
  letter-spacing: -.045em;
  transition: padding-left .4s var(--ease), color .3s;
}
.menu-panel a:hover,
.menu-panel a:focus-visible { padding-left: 16px; }
.menu-panel .current-menu-item > a { color: var(--akzent); }

/* Anker zu den Abschnitten der Seite und Hauptmenü getrennt */
.menu-panel__anker + .menu-panel__haupt { margin-top: 40px; }
.menu-panel__anker a { font-size: clamp(1.8rem, 4.2vw, 3.6rem); }


/* =====================================================
   6. KOPFBEREICH VON INHALTSSEITEN (wie Störfall)
===================================================== */

.kopf {
  width: min(var(--breite-weit), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(40px, 7vw, 90px) 0 clamp(30px, 5vw, 60px);
}

.kopf--mit-bild {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
  min-height: calc(100vh - var(--header-height) - 60px);
  padding-bottom: clamp(50px, 8vw, 110px);
}

.kopf h1 {
  margin: 0 0 28px;
  font-family: var(--schrift-kopf);
  font-weight: 600 !important;
  font-size: clamp(3.2rem, 8vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.kopf:not(.kopf--mit-bild) h1 { max-width: 14ch; }

.kopf .lead {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--muted);
}

/* Foto: weißer Rand, leicht schräg, Klebestreifen */
.kopf__bild { position: relative; margin: 0; }
.kopf__bild--foto {
  transform: rotate(3deg);
  border: 12px solid rgba(255, 255, 255, .75);
  box-shadow: 0 30px 70px rgba(35, 28, 18, .25);
  background: var(--paper);
}
.kopf__bild--foto::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%; top: -22px;
  width: 110px; height: 30px;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--tape);
}
.kopf__bild--foto img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.kopf__bild--illustration img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }

.termin-daten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 24px 0 0;
  font-family: var(--schrift-kopf);
  font-size: 1.25rem;
}
.termin-daten a { color: var(--akzent); }


/* =====================================================
   7. FLIESSTEXT AUS GUTENBERG
===================================================== */

.inhalt {
  width: min(var(--breite-text), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(20px, 4vw, 50px) 0 clamp(80px, 10vw, 140px);
}

.inhalt > * { margin-top: 0; margin-bottom: 1.1em; }
.inhalt > .alignwide { width: min(var(--breite-weit), calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.inhalt > .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.inhalt p,
.inhalt li { font-size: 1.1rem; line-height: 1.7; max-width: 62ch; }

.inhalt h2,
.inhalt h3,
.inhalt h4 {
  font-family: var(--schrift-kopf);
  font-weight: normal;
  letter-spacing: -.03em;
  line-height: .95;
}
.inhalt h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: clamp(60px, 8vw, 100px) 0 22px; }
.inhalt h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 2em 0 .6em; }
.inhalt h4 { font-size: 1.3rem; margin: 2em 0 .5em; }
.inhalt > h2:first-child { margin-top: 0; }

.inhalt a { color: var(--akzent); text-underline-offset: 3px; }
.inhalt a:hover { text-decoration-thickness: 2px; }

.inhalt figure { margin-left: 0; margin-right: 0; }
.inhalt figcaption { font-size: .85rem; color: var(--muted); margin-top: 8px; }
.inhalt img { display: block; }

.inhalt hr { border: 0; border-top: 2px dashed color-mix(in srgb, var(--akzent) 55%, transparent); margin: 3em 0; }

.inhalt blockquote { margin: 2em 0; padding-left: 1.2em; border-left: 2px solid var(--akzent); }
.inhalt blockquote p { font-family: var(--schrift-kopf); font-size: 1.4rem; line-height: 1.25; }
.inhalt cite { font-style: normal; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.wp-block-button__link,
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  font-family: var(--schrift-kopf);
  font-size: 1.15rem;
  transition: transform .3s var(--ease);
}
.inhalt .wp-block-button__link { color: #fff; }
.wp-block-button__link:hover,
.knopf:hover { transform: rotate(-2deg) scale(1.03); }
.is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 2px solid currentColor; }

/* --- Blockstil: Zettel (Zitat und Gruppe) --- */
.is-style-zettel,
.zettel {
  position: relative;
  margin: clamp(50px, 7vw, 80px) 0;
  padding: clamp(28px, 4vw, 45px);
  background: var(--paper);
  color: #181714;
  box-shadow: 0 25px 60px rgba(30, 24, 15, .18);
  transform: rotate(var(--drehung, -1.5deg));
  border: 0;
}
.is-style-zettel::before,
.zettel::before {
  content: "";
  position: absolute;
  left: 50%; top: -12px;
  width: 90px; height: 27px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape);
}
.inhalt blockquote.is-style-zettel { padding-left: clamp(28px, 4vw, 45px); border-left: 0; }
.is-style-zettel p,
.zettel blockquote { margin: 0; font-family: var(--schrift-kopf); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; max-width: none; }
.is-style-zettel cite,
.zettel figcaption {
  display: block;
  margin-top: 16px;
  font-family: var(--schrift-text);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.wp-block-group.is-style-zettel p { font-family: var(--schrift-text); font-size: 1.05rem; line-height: 1.65; }
.wp-block-group.is-style-zettel:nth-of-type(even) { --drehung: 1.2deg; }

/* --- Blockstil: aufgeklebtes Bild --- */
.is-style-aufgeklebt {
  position: relative;
  display: table;
  margin: 2.5em auto;
  transform: rotate(var(--drehung, 2deg));
}
.is-style-aufgeklebt img {
  border: 10px solid rgba(255, 255, 255, .7);
  box-shadow: 0 25px 60px rgba(35, 28, 18, .22);
}
.is-style-aufgeklebt::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%; top: -14px;
  width: 96px; height: 28px;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--tape);
}
.inhalt > .is-style-aufgeklebt:nth-of-type(even) { --drehung: -2.5deg; }

/* --- Blockstil: Überschrift mit Naht. Der rote Faden läuft hier vorbei. --- */
.is-style-naht { position: relative; }
.is-style-naht::after {
  content: "";
  display: block;
  width: min(220px, 40%);
  margin-top: 14px;
  border-top: 2px dashed var(--faden);
}

/* --- Videos erst nach Klick laden --- */
.zwei-klick {
  display: grid;
  place-items: center;
  gap: 12px;
  aspect-ratio: 16 / 9;
  padding: 24px;
  background: var(--paper-alt);
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}
.zwei-klick p { margin: 0; max-width: 40ch; }
.zwei-klick button { font: inherit; border: 0; cursor: pointer; }


/* =====================================================
   8. MODULE: GEMEINSAM
===================================================== */

.modul { position: relative; }
.modul--vollbild { z-index: 5; }

.abschnitt {
  width: min(var(--breite-weit), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(64px, 9vw, 110px) 0;
}

.abschnitt h2,
.modul-titel {
  margin: 0 0 22px;
  max-width: 18ch;
  font-family: var(--schrift-kopf);
  font-weight: normal;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: .95;
  letter-spacing: -.035em;
}

.abschnitt .lead {
  max-width: 52ch;
  margin: 0 0 28px;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
}

.text-spalten { display: grid; gap: 12px 56px; }
.text-spalten--zwei { grid-template-columns: 1fr 1fr; align-items: start; }
.text-spalten p { max-width: 62ch; margin: 0 0 1em; font-size: 1.05rem; line-height: 1.7; }
.text-spalten a { color: var(--akzent); }

.scroll-hinweis {
  position: absolute;
  left: 50%; bottom: 22px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  transform: translateX(-50%);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(24, 23, 20, .55);
  text-decoration: none;
  transition: color .3s ease, opacity .3s ease;
}
.scroll-hinweis span:last-child { font-size: 1.05rem; transition: transform .3s ease; }
.scroll-hinweis:hover,
.scroll-hinweis:focus-visible { color: rgba(24, 23, 20, .9); }
.scroll-hinweis:hover span:last-child { transform: translateY(3px); }


/* =====================================================
   9. MODUL: INTRO
===================================================== */

.opening {
  --intro-wechsel: #5faeb2;
  --intro-text-1: #181714;
  --intro-text-2: #f4eadb;
  position: relative;
  height: 340vh;
}
.opening.hat-startfarbe,
.opening.hat-startfarbe .opening__sticky { background: var(--intro-start); }

.opening__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.opening__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--intro-wechsel);
  opacity: 0;
  will-change: opacity;
}

.opening__text { position: relative; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

.opening__illustration-wrap {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 3;
  width: min(52vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.opening__illustration { width: 100%; height: 100%; object-fit: contain; }

.opening__phrase {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5vw;
  font-family: var(--schrift-kopf);
  font-size: clamp(4.5rem, 13vw, 13rem);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.02em;
  text-transform: lowercase;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.opening__phrase span { display: block; }
.opening__phrase--one { color: var(--intro-text-1); }
.opening__phrase--two { color: var(--intro-text-2); }



/* =====================================================
   9b. MODUL: GRAFIK (groß und mittig, ohne Animation)
===================================================== */

.grafik {
  --grafik-breite: min(80vw, 980px);
  --grafik-max-h: none;
  display: grid;
  place-items: center;
  padding: clamp(40px, 6vw, 80px) 24px;
}
.grafik--mittel { --grafik-breite: min(60vw, 680px); }
.grafik--klein  { --grafik-breite: min(40vw, 400px); }
.grafik--voll   { --grafik-breite: 100%; padding-left: 0; padding-right: 0; }

/* Füllt den Bildschirm: Grafik passt immer ganz hinein */
.grafik--bildschirm {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + 30px);
  padding-bottom: 90px;
  --grafik-max-h: calc(100svh - var(--header-height) - 140px);
}
.header-aus .grafik--bildschirm,
.header-spaet .haupt > .grafik--bildschirm:first-child { padding-top: 50px; --grafik-max-h: calc(100svh - 160px); }

.grafik__figur {
  position: relative;
  display: inline-block;
  margin: 0;
  max-width: 100%;
  text-align: center;
  transform: rotate(var(--grafik-drehung, 0deg));
}
.grafik__figur a { display: block; }
.grafik__bild {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--grafik-breite);
  max-height: var(--grafik-max-h);
  margin: 0 auto;
}
.grafik--voll .grafik__bild { width: 100%; max-width: 100%; }
.grafik__figur figcaption { margin-top: 14px; font-size: .85rem; color: var(--muted); }

/* Als aufgeklebtes Foto */
.grafik--foto .grafik__bild {
  border: 12px solid rgba(255, 255, 255, .75);
  box-shadow: 0 30px 70px rgba(35, 28, 18, .25);
  background: var(--paper);
}
.grafik--foto .grafik__figur::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%; top: -18px;
  width: 110px; height: 30px;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--tape);
}
.grafik--foto figcaption { margin-top: 20px; }

/* =====================================================
   10. MODUL: COLLAGE
===================================================== */

.scroll-story {
  --schichten: 3;
  position: relative;
  height: calc(100vh + var(--schichten) * 110vh);
}

.stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.stage.hat-eigenes-bild {
  background-image: var(--collage-bild);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0, rgba(0,0,0,.012) 1px, transparent 1px, transparent 4px);
}

.piece {
  position: absolute;
  margin: 0;
  opacity: 0;
  transform:
    translate(var(--start-x, 0), var(--start-y, 60px))
    rotate(calc(var(--rotation, 0deg) + var(--start-rotation, 0deg)))
    scale(.91);
  transition:
    opacity .7s ease var(--delay, 0ms),
    transform 1.2s var(--ease) var(--delay, 0ms);
  will-change: transform, opacity;
}
.piece.is-visible { opacity: 1; transform: translate(0, 0) rotate(var(--rotation, 0deg)) scale(1); }

.photo {
  overflow: hidden;
  border: 10px solid rgba(255, 255, 255, .62);
  box-shadow: 0 30px 70px rgba(35, 28, 18, .25);
}
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.7s var(--ease); }
.photo.is-visible img { transform: scale(1); }

.paper {

  padding: clamp(25px, 4vw, 55px);
  background: var(--paper);
  color: #181714;

  box-shadow: 0 25px 60px rgba(30, 24, 15, .20); 

}
.paper::before {
  content: "";
  position: absolute;
  left: 50%; top: 20px;
  width: 90px; height: 27px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape);
}
.paper small { display: block; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; color: var(--muted); }
.paper h2 { margin: 0 0 25px; font-family: var(--schrift-kopf); font-size: clamp(2rem, 4vw, 4.8rem); font-weight: normal; line-height: .95; letter-spacing: -.03em; }
.paper p { margin: 0; max-width: 430px; line-height: 1.65; color: var(--muted); }
.paper__bild { display: block; margin-top: 18px; max-height: 26vh; width: auto; max-width: 100%; }
.paper a { text-decoration: none; }
.paper a:hover h2 { color: var(--akzent); }

/* .illustration img { display: block; width: var(--ill-breite, 160px); max-width: 30vw; height: auto; } */
.illustration img {
  display: block;
  width: var(--ill-breite, 160px);
  max-width: 30vw;
  height: auto;
  filter: drop-shadow(0 12px 16px rgba(35, 28, 18, .28));
}

/* Drei Anordnungen, die sich bei mehr Schichten wiederholen */
.photo-1 { z-index: 10; width: min(53vw, 730px); height: min(66vh, 620px); left: 5%; top: 10%; --rotation: -6deg; --start-x: -250px; --start-y: 30px; --start-rotation: -7deg; }
.paper-1 { z-index: 11; width: min(33vw, 430px); right: 7%; top: 18%; --rotation: 4deg; --start-x: 180px; --start-y: 70px; --start-rotation: 7deg; --delay: 180ms; }
.ill-1   { z-index: 12; left: 48%; bottom: 5%; --rotation: 10deg; --start-y: 140px; --delay: 350ms; }

.photo-2 { z-index: 20; width: min(42vw, 570px); height: min(57vh, 520px); right: 5%; bottom: 5%; --rotation: 7deg; --start-x: 260px; --start-y: 50px; --start-rotation: 5deg; }
.paper-2 { z-index: 21; width: min(31vw, 400px); left: 8%; bottom: 7%; background: var(--paper-alt); --rotation: -5deg; --start-x: -200px; --start-y: 100px; --start-rotation: -6deg; --delay: 160ms; }
.ill-2   { z-index: 22; right: 36%; top: 5%; --rotation: 10deg; --start-y: -100px; --delay: 330ms; }

.photo-3 { z-index: 30; width: min(38vw, 500px); height: min(49vh, 460px); left: 31%; top: 9%; --rotation: -9deg; --start-y: -180px; --start-rotation: -8deg; }
.paper-3 { z-index: 31; width: min(28vw, 380px); right: 8%; top: 13%; --rotation: 8deg; --start-x: 220px; --start-y: -20px; --start-rotation: 6deg; --delay: 180ms; }
.ill-3   { z-index: 32; left: 7%; top: 4%; --rotation: 15deg; --start-x: -140px; --delay: 340ms; }

/* Spätere Schichten liegen immer oben: z-index setzt modules/collage.php */


/* =====================================================
   11. MODULE: LEINENGEWEBE UND LINKGEWEBE
===================================================== */

.gewebe {
  --warp: #33467A; --weft: #42578E; --hi: rgba(255,255,255,.32); --shade: rgba(12,20,45,.35);
  --linen: #efe3dc; --gap: #C9CFD6; --patch: #F3F5F7;
  position: relative;
  z-index: 5;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.gewebe--ganz { background: var(--gap); }
.gewebe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --- Buch auf dem Stoff --- */
.gewebe__book {
  --book-w: min(28vw, 320px, calc((100svh - 230px) * .66));
  --open-ease: cubic-bezier(.2, .8, .2, 1);
  position: absolute;
  left: 50%; top: calc(50% - 18px);
  z-index: 2;
  display: block;
  width: var(--book-w);
  min-width: 150px;
  color: inherit;
  text-decoration: none;
  transform: translate(-50%, -50%) rotate(-5deg);
  transition: transform .9s var(--open-ease);
  -webkit-tap-highlight-color: transparent;
}
.gewebe__book:focus { outline: none; }
.gewebe__book:focus-visible .book__page { outline: 2px solid var(--akzent); outline-offset: 6px; }

.book__cover {
  position: relative;
  z-index: 2;
  display: block;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: perspective(1800px) rotateY(0deg);
  transition: transform .9s var(--open-ease);
}
.book__front, .book__back { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.book__front img {
  display: block;
  width: 100%; height: auto;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 3px rgba(30,20,10,.30)) drop-shadow(0 18px 28px rgba(30,20,10,.32));
}
.book__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  border-radius: 2px 0 0 2px;
  background: linear-gradient(to left, rgba(0,0,0,.18), rgba(0,0,0,0) 14%), #e9dcc6;
  box-shadow: 0 18px 28px rgba(30,20,10,.25);
}
.book__page {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6em;
  padding: 12% 11%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(to right, rgba(0,0,0,.14), rgba(0,0,0,0) 12%), #f7f0e4;
  box-shadow: 0 18px 28px rgba(30,20,10,.28);
  font-family: var(--schrift-kopf);
  color: #181714;
  text-align: center;
  opacity: 0;
  transition: opacity .3s ease .15s;
}
.book__page small { font-family: var(--schrift-text); font-size: clamp(.55rem, .9vw, .7rem); letter-spacing: .18em; text-transform: uppercase; color: #71695e; }
.book__page strong { font-weight: normal; font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 1; }
.book__page em { font-style: normal; font-family: var(--schrift-text); font-size: clamp(.7rem, 1.1vw, .9rem); line-height: 1.45; color: #71695e; }
.book__more { margin-top: .6em; font-size: clamp(.85rem, 1.4vw, 1.1rem); color: var(--akzent); }

@media (hover: hover) {
  .gewebe__book:hover { transform: translate(0, -50%) rotate(-2deg); }
  .gewebe__book:hover .book__cover { transform: perspective(1800px) rotateY(-162deg); }
  .gewebe__book:hover .book__page { opacity: 1; transition-delay: 0s; }
  .gewebe__book:hover .book__more { text-decoration: underline; text-underline-offset: 3px; }
}
.gewebe__book.is-open,
.gewebe__book:focus-visible { transform: translate(0, -50%) rotate(-2deg); }
.gewebe__book.is-open .book__cover,
.gewebe__book:focus-visible .book__cover { transform: perspective(1800px) rotateY(-162deg); }
.gewebe__book.is-open .book__page,
.gewebe__book:focus-visible .book__page { opacity: 1; transition-delay: 0s; }

/* --- Knöpfe des Linkgewebes ---
   Ohne JavaScript (und in der vereinfachten Mobilansicht) stehen sie als Liste da.
   Sobald das Gewebe läuft (.is-aktiv), sitzen sie auf den Fadenkreuzungen. */
.gewebe__links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 34px;
  padding: 160px 24px 100px;
  justify-content: center;
}
.gewebe.is-aktiv .gewebe__links { position: absolute; inset: 0; display: block; padding: 0; pointer-events: none; }

.node { position: relative; display: block; width: 44px; height: 44px; color: #1D2540; text-decoration: none; }
.gewebe.is-aktiv .node { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; }
.node--bild { width: var(--knopf-groesse, 76px); height: var(--knopf-groesse, 76px); }

.disc {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--patch);
  box-shadow: 0 2px 6px var(--shade);
  transition: transform .2s ease, color .2s;
}
.disc::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed var(--akzent); opacity: .55; }
.node--bild .disc { overflow: hidden; }
.node--bild img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; user-select: none; }
.node--bild .disc::after { inset: 5px; border-color: var(--patch); opacity: .9; }
.node--eckig .disc { border-radius: 10px; }
.node--eckig .disc::after { border-radius: 6px; }
.node svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.node:hover .disc,
.node:focus-visible .disc { transform: scale(1.15); color: var(--akzent); }
.node--bild:hover .disc,
.node--bild:focus-visible .disc { transform: scale(1.08); }
.node:focus-visible { outline: none; }
.node:focus-visible .disc { outline: 2px solid var(--akzent); outline-offset: 4px; }

.label {
  position: absolute;
  top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--patch);
  color: #1D2540;
  box-shadow: 0 2px 6px var(--shade);
  pointer-events: none;
}
.gewebe.is-aktiv .label { opacity: 0; transition: opacity .2s; }
.gewebe.is-aktiv .node:hover .label,
.gewebe.is-aktiv .node:focus-visible .label { opacity: 1; }

/* Schild oben links */
.tag {
  position: absolute;
  top: calc(var(--header-height) + 20px); left: 20px;
  z-index: 3;
  max-width: min(320px, calc(100% - 40px));
  background: var(--patch);
  color: #1D2540;
  padding: 14px 18px 14px 22px;
  border-radius: 4px;
  box-shadow: 0 3px 10px var(--shade);
}
.header-aus .tag,
.header-spaet .modul:first-child .tag { top: 20px; }
.tag::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; border-left: 1.5px dashed var(--akzent); opacity: .6; }
.tag h2 { margin: 0; font-family: var(--schrift-kopf); font-weight: normal; font-size: 26px; letter-spacing: -.01em; line-height: 1.1; }
.tag p { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: #4D5878; }
.nur-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .nur-maus { display: none; } .nur-touch { display: block; } }
.gewebe:not(.is-aktiv) .tag p { display: none; }


/* =====================================================
   12. MODULE: KARTEN, ZETTEL, ABSCHLUSS, TERMINE
===================================================== */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(30px, 4vw, 48px);
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.karte {
  position: relative;
  padding: 28px 26px 26px;
  background: var(--paper);
  color: #181714;
  box-shadow: 0 18px 40px rgba(30, 24, 15, .14);
  transform: rotate(var(--drehung, -1deg));
  transition: transform .4s var(--ease);
}
.karte:nth-child(3n+2) { --drehung: 1.2deg; background: var(--paper-alt); }
.karte:nth-child(3n)   { --drehung: -.4deg; }
.karte::before {
  content: "";
  position: absolute;
  left: 50%; top: -11px;
  width: 80px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape);
}
.karte:has(a:hover) { transform: rotate(0deg) translateY(-4px); }
.karte__bild { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; }
.karte h3 { margin: 0 0 8px; font-family: var(--schrift-kopf); font-weight: normal; font-size: 1.6rem; line-height: 1; }
.karte p { margin: 0; color: var(--muted); }
.karte a { text-decoration: none; }
.karte a::after { content: ""; position: absolute; inset: 0; }

.modul--zettel .zettel { width: min(var(--breite-text), calc(100% - 48px)); margin: clamp(60px, 9vw, 110px) auto; }

.outro {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: clamp(60px, 9vw, 110px) clamp(24px, 7vw, 90px);
}
.outro--dunkel { background: #1b1a18; color: #fff; }
.outro--dunkel .kicker { color: rgba(255, 255, 255, .55); }
.outro h2 { max-width: 12ch; margin: 0; font-family: var(--schrift-kopf); font-weight: normal; font-size: clamp(3rem, 7vw, 7rem); line-height: .95; letter-spacing: -.04em; }
.outro p { max-width: 46ch; margin: 22px 0 0; font-size: 1.15rem; }
.outro .knopf { margin-top: 30px; }

.termine { list-style: none; margin: 30px 0 0; padding: 0; max-width: 900px; }
.termin {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 4px 28px;
  padding: 22px 0;
  border-top: 2px dashed color-mix(in srgb, var(--akzent) 45%, transparent);
}
.termin:last-child { border-bottom: 2px dashed color-mix(in srgb, var(--akzent) 45%, transparent); }
.termin__datum { font-family: var(--schrift-kopf); font-size: 1.35rem; line-height: 1.1; }
.termin__datum small { display: block; font-family: var(--schrift-text); font-size: .8rem; color: var(--muted); margin-top: 4px; }
.termin__titel { margin: 0; font-family: var(--schrift-kopf); font-weight: normal; font-size: 1.6rem; line-height: 1.05; }
.termin__titel a { text-decoration: none; }
.termin__titel a:hover { color: var(--akzent); }
.termin__ort { margin: 4px 0 0; color: var(--muted); }
.termine-leer { color: var(--muted); font-size: 1.1rem; }


/* =====================================================
   13. ÜBERSICHTEN, BLÄTTERN, 404
===================================================== */

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 6vw, 70px); }
.liste__eintrag { max-width: 62ch; }
.liste__eintrag h2 { margin: 0 0 10px; font-family: var(--schrift-kopf); font-weight: normal; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; }
.liste__eintrag h2 a { text-decoration: none; }
.liste__eintrag h2 a:hover { color: var(--akzent); }
.liste__eintrag time { font-size: .85rem; color: var(--muted); }
.liste__eintrag p { margin: 10px 0 0; }

.blaettern { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 60px; font-family: var(--schrift-kopf); font-size: 1.2rem; }
.blaettern a { color: var(--ink); text-decoration: none; border-bottom: 2px solid currentColor; }
.nav-links { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--schrift-kopf); font-size: 1.2rem; }
.nav-links a, .nav-links span { text-decoration: none; padding: 4px 8px; }
.nav-links .current { color: var(--akzent); }

.fehlerseite { min-height: 70vh; display: grid; align-content: center; }


/* =====================================================
   14. FUSS
===================================================== */

.site-footer {
  position: relative;
  z-index: 6;
  padding: 34px clamp(20px, 4vw, 60px) calc(34px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linie);
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 30px;
  flex-wrap: wrap;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 22px; flex-wrap: wrap; }
/* .site-footer a { color: var(--ink); text-underline-offset: 3px; font-weight: 600; border: 1px solid red; } */
.site-footer a:hover { color: var(--ink); }
.site-footer a, .site-footer__name { font-family: var(--schrift-kopf); font-size: 1.15rem; color: var(--ink); }
.footer-schlicht .site-footer { justify-content: center; }


/* =====================================================
   15. ROTER FADEN
   Liegt unter allem Inhalt (z-index: -1). Flächen wie Intro,
   Collage und Gewebe decken ihn ab: Er taucht darunter durch.
===================================================== */

.faden {
  position: absolute;
  left: 0; top: 0;
  z-index: -1;
  width: 100%;
  pointer-events: none;
  overflow: visible;
}
.faden path { fill: none; }
.faden__stich { stroke: var(--faden); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 11 9; }
.faden__ende { stroke: var(--faden); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity .6s ease; }
.faden.ist-fertig .faden__ende { opacity: 1; }

/* Gepinnte Bühnen sind durchsichtig: Darunter liegt ohnehin derselbe Seitenhintergrund.
   So läuft der Faden über das Papier und taucht nur unter Fotos, Zetteln und dem Stoff durch. */
.opening__sticky.flaeche,
.stage.flaeche,
.gewebe.flaeche { background: none; }

/* Die Nadel liegt immer obenauf (unter Menü und Header) und näht vorneweg */
.faden__nadel {
  position: absolute;
  left: 0; top: 0;
  z-index: 850;
  width: 60px; height: 16px;
  pointer-events: none;
  transform-origin: 6px 8px;
  filter: drop-shadow(0 2px 2px rgba(30, 24, 15, .3));
  transition: opacity .5s ease;
}
.faden__nadel.ist-weg { opacity: 0; }


/* =====================================================
   16. BEGLEITFIGUREN (fallen, fahren, schweben, schwimmen)
===================================================== */

.figur {
  position: fixed;
  left: 0; top: 0;
  z-index: 800;                      /* unter Menü (900) und Header (1000) */
  width: var(--figur-groesse, 80px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 180ms ease;
  will-change: transform, opacity;
}
.figur.ist-bereit { opacity: 1; }
.figur.is-resetting { opacity: 0; }

.figur--y.figur--lage-anfang { left: clamp(14px, 3vw, 48px); }
.figur--y.figur--lage-mitte  { left: calc(50% - var(--figur-groesse, 80px) / 2); }
.figur--y.figur--lage-ende   { left: auto; right: clamp(14px, 3vw, 48px); }
.figur--x.figur--lage-anfang { top: calc(var(--header-height) + 16px); }
.figur--x.figur--lage-mitte  { top: 50%; }
.figur--x.figur--lage-ende   { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }


/* =====================================================
   17. MOBIL
===================================================== */

@media (max-width: 750px) {

  :root { --header-height: 66px; }

  .site-header { padding-left: 20px; padding-right: 14px; }
  .menu-panel { padding-left: 24px; padding-right: 24px; }
  .menu-panel a { font-size: clamp(2.4rem, 13vw, 4.4rem); }
  .menu-panel__anker a { font-size: clamp(1.6rem, 8vw, 2.6rem); }

  .kopf--mit-bild { grid-template-columns: 1fr; min-height: 0; }
  .kopf__bild--foto { order: -1; transform: rotate(2deg); border-width: 8px; }
  .kopf__bild--illustration { order: -1; }

  .text-spalten--zwei { grid-template-columns: 1fr; }

  .grafik { --grafik-breite: 92vw; padding-left: 16px; padding-right: 16px; }
  .grafik--mittel { --grafik-breite: 80vw; }
  .grafik--klein  { --grafik-breite: 60vw; }
  .grafik--voll   { --grafik-breite: 100%; padding-left: 0; padding-right: 0; }

  .termin { grid-template-columns: 1fr; }

  /* Platz für eine Figur am linken Rand */
  .hat-figur-links .kopf,
  .hat-figur-links .inhalt { padding-left: 44px; }
  .figur--y.figur--lage-anfang { left: 6px; }
  .figur { width: min(var(--figur-groesse, 80px), 46px); }
  .figur--x { width: min(var(--figur-groesse, 80px) * 1.6, 34vw); }

  .opening { height: 240vh; }
  .opening__illustration-wrap { width: min(78vw, 520px); }
  .opening__phrase { padding: 20px; font-size: clamp(4rem, 18vw, 8rem); line-height: .82; }

  .scroll-story { height: calc(100vh + var(--schichten) * 125vh); }
  .photo-1 { width: 82vw; height: 43vh; left: 4%; top: 8%; }
  .paper-1 { width: 74vw; right: 4%; top: 45%; }
  .photo-2 { width: 72vw; height: 38vh; right: 3%; bottom: 7%; }
  .paper-2 { width: 70vw; left: 5%; bottom: 35%; }
  .photo-3 { width: 72vw; height: 38vh; left: 10%; top: 10%; }
  .paper-3 { width: 72vw; right: 4%; top: 50%; }
  .paper h2 { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  /*
  .ill-1   { left: 5%; bottom: 5%; }
  .ill-2   { right: 7%; top: 9%; }
  .ill-3   { left: 3%; top: 8%; }
  */
    .ill-1,
  .ill-2,
  .ill-3   { left: 0; right: 0; width: fit-content; margin-inline: auto; }
  .ill-1   { bottom: 4%; }
  .ill-2   { top: 9%; }
  .ill-3   { top: 6%; }
  .illustration img { max-width: 60vw; }

  .gewebe__book { --book-w: min(46vw, 240px, calc((100svh - 230px) * .66)); }
  .gewebe__book.is-open,
  .gewebe__book:focus-visible { transform: translate(0, -50%) rotate(-2deg) scale(.9); }

  /* --- Ausblenden auf dem Handy --- */
  .modul--mobil-aus,
  .figur--mobil-aus { display: none !important; }

  /* --- Vereinfachte Mobilansichten --- */
  .modul--mobil-einfach .opening,
  .modul--mobil-einfach.opening { height: auto; }
  .modul--mobil-einfach .opening__sticky { position: static; height: auto; padding: 110px 20px 70px; display: grid; gap: 30px; justify-items: center; }
  .modul--mobil-einfach .opening__background,
  .modul--mobil-einfach .scroll-hinweis { display: none; }
  .modul--mobil-einfach .opening__text { display: contents; }
  .modul--mobil-einfach .opening__illustration-wrap,
  .modul--mobil-einfach .opening__phrase { position: static; transform: none !important; opacity: 1 !important; }
  .modul--mobil-einfach .opening__phrase--two { color: var(--intro-text-1); font-size: clamp(2.6rem, 12vw, 4rem); }

  .modul--mobil-einfach.scroll-story { height: auto; }
  .modul--mobil-einfach .stage { position: static; height: auto; display: grid; gap: 46px; padding: 90px 20px 70px; overflow: visible; }
  .modul--mobil-einfach .piece { position: relative; inset: auto; width: 100% !important; height: auto !important; opacity: 1; transform: rotate(var(--rotation, 0deg)); transition: none; }
  .modul--mobil-einfach .photo img { aspect-ratio: 4 / 3; transform: none; }
  .modul--mobil-einfach .illustration { justify-self: center; width: auto !important; }

  .modul--mobil-einfach.gewebe { height: auto; min-height: 0; padding: 70px 0 90px; }
  .modul--mobil-einfach.gewebe canvas { display: none; }
  .modul--mobil-einfach .gewebe__book { position: relative; left: auto; top: auto; margin: 0 auto; transform: rotate(-3deg); }
  .modul--mobil-einfach .tag { position: relative; top: auto; left: auto; margin: 30px 20px 0; }
  .modul--mobil-einfach .gewebe__links { padding: 30px 20px 10px; }
  .modul--mobil-einfach .scroll-hinweis { display: none; }
}


/* =====================================================
   18. WENIGER BEWEGUNG
===================================================== */

@media (prefers-reduced-motion: reduce) {
  .site-header, .menu-panel, .menu-button span, .piece, .photo img,
  .gewebe__book, .book__cover, .book__page, .disc, .label, .karte, .knopf, .wp-block-button__link { transition: none; }
  .figur { display: none; }
}


/* =====================================================
   19. DUNKLES FARBSCHEMA (nur bei „Farbschema: automatisch“)
   Zettel, Karten und Buchseiten bleiben helles Papier.
===================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ece6da;
    --muted: #a9a391;
    --bg-farbe: #26231f;
    --bg-mischung: multiply;
    --linie: rgba(236, 230, 218, .16);
    --header-bg: #0f0e0d;
  }
  :root:not([data-theme="light"]) .menu-panel { background: #3a352e; }
  :root:not([data-theme="light"]) .menu-panel a { color: var(--ink); border-color: var(--linie); }
  :root:not([data-theme="light"]) .menu-open .site-header { color: var(--ink); }
  :root:not([data-theme="light"]) .scroll-hinweis { color: rgba(236, 230, 218, .6); }
  :root:not([data-theme="light"]) .gewebe {
    --warp: #CFC6B4; --weft: #BDB29C; --hi: rgba(255,255,255,.38); --shade: rgba(0,0,0,.6); --gap: #0E131D;
  }
  :root:not([data-theme="light"]) .paper p,
  :root:not([data-theme="light"]) .karte p,
  :root:not([data-theme="light"]) .zettel figcaption,
  :root:not([data-theme="light"]) .is-style-zettel cite { color: #71695e; }
}


/* =====================================================
   20. SEITENWECHSEL
   Moderne Browser blenden beim Wechsel sanft über,
   der Header bleibt dabei stehen.
===================================================== */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }





/* PROVISORISCH: Collage-Zettel ohne Papier */
.paper { background: none !important; box-shadow: none; padding: 0; }
.paper::before { display: none; }
.photo { border: 0; box-shadow: none; }
.paper__bild { filter: drop-shadow(0 12px 16px rgba(35, 28, 18, .28)); }
.photo { overflow: visible; }
.photo img { filter: drop-shadow(0 12px 16px rgba(35, 28, 18, .28)); }
.photo img { transform: none; }

.illustration[aria-hidden="true"] { pointer-events: none; }