/* Falzbein – ein Bogen Papier. Farben aus dem Theme „Papier · Kalk und Rose“ (Serie 15).
   Hell: Light-Fassung (ColorizationColor 0XC4679564), dunkel: Dark-Fassung (0XC4498053).
   Dunkel seit 12.11.2026 aus den Bildern der Dark-Fassung gemessen (spalt, schuppen, knick,
   bogen): tintiges Schiefer mit Violettstich (#1F212B, #2B2935), Mauve-Papier (#4B4352),
   dunkles Salbeigrün, dazu Kalk mit einem Hauch Rose als Schrift.
   Modus: ohne Wahl folgt die Seite dem System; data-theme="light|dark" auf <html>
   (gesetzt im <head>, Schalter oben) übersteuert prefers-color-scheme. */

:root {
  --tisch: #ECE4DF;
  --papier: #FBF8F5;
  --papier2: #F6EFEB;
  --tinte: #322922;
  --leise: #75695F;
  --linie: rgba(50, 41, 34, .14);
  --rose: #D9BCB5;
  --mauve: #A88B93;
  --gruen: #679564;
  --akzent: #4B7448;
  --schatten: rgba(70, 45, 40, .08);
  --kante: rgba(70, 45, 40, .20);
  --licht: rgba(255, 255, 255, .85);
  --falz-schatten: rgba(70, 45, 40, .06);
  --faser: .16;
  --rand: clamp(20px, 7vw, 96px);
  color-scheme: light dark;
}

/* Dunkel zweimal, inhaltsgleich: einmal für das System (wenn niemand gewählt hat),
   einmal für die Wahl im Schalter. Wer eines ändert, ändert beide. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tisch: #15141B;
    --papier: #1E1D26;
    --papier2: #2A2834;
    --tinte: #E5DEE0;
    --leise: #A99FAA;
    --linie: rgba(229, 222, 224, .13);
    --rose: #8E6B78;
    --mauve: #76627A;
    --gruen: #498053;
    --akzent: #8DBB93;
    --schatten: rgba(0, 0, 0, .36);
    --kante: rgba(0, 0, 0, .5);
    --licht: rgba(229, 222, 224, .045);
    --falz-schatten: rgba(0, 0, 0, .2);
    --faser: .10;
  }
}
:root[data-theme="dark"] {
  --tisch: #15141B;
  --papier: #1E1D26;
  --papier2: #2A2834;
  --tinte: #E5DEE0;
  --leise: #A99FAA;
  --linie: rgba(229, 222, 224, .13);
  --rose: #8E6B78;
  --mauve: #76627A;
  --gruen: #498053;
  --akzent: #8DBB93;
  --schatten: rgba(0, 0, 0, .36);
  --kante: rgba(0, 0, 0, .5);
  --licht: rgba(229, 222, 224, .045);
  --falz-schatten: rgba(0, 0, 0, .2);
  --faser: .10;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Sanfter Übergang nur beim Umschalten (Klasse kurz gesetzt von seite.js) */
html.farbwechsel, html.farbwechsel *, html.farbwechsel *::before, html.farbwechsel *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, opacity .45s ease !important;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--tisch);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .2  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color: var(--tinte);
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: clamp(18px, 1.05rem + .25vw, 21px);
  line-height: 1.62;
  overflow-x: hidden;
}

/* Der Bogen: Papier mit Faser (SVG-Rauschen, zweimal: Längsfaser und Korn),
   als eigene Schicht, damit hell und dunkel verschieden stark sein können */
.bogen {
  position: relative;
  isolation: isolate;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--rand);
  background-color: var(--papier);
  box-shadow: 0 1px 2px var(--schatten), 0 24px 60px -30px var(--schatten);
}
.bogen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--faser);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.02 .3' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .3  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .28  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
}

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }

/* Oben rechts: Sprachschalter, Hell/Dunkel und GitHub, im selben Stil (rechts seit 14.11.2026) */
.schalter {
  position: absolute; right: 18px; top: 18px; z-index: 3;
  display: flex; align-items: stretch; gap: 8px;
}
/* GitHub-Zeichen: unverändert, einfarbig, hell #1F2328, dunkel #FFFFFF */
.gh { display: inline-flex; align-items: center; padding: 0 .15rem; border-radius: 2px; }
.gh svg { display: block; width: 21px; height: 21px; fill: #1F2328; transition: opacity .2s; }
.gh:hover svg { opacity: .72; }
:root[data-theme="dark"] .gh svg { fill: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gh svg { fill: #FFFFFF; } }
/* Oben links: Andys Seiten, klein, mit ihren Signets (14.11.2026) */
.andy {
  position: absolute; left: 18px; top: 18px; z-index: 3; height: 1.75rem;
  display: flex; align-items: center; gap: 16px;
}
.andy a { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; line-height: 1; letter-spacing: .02em; color: var(--leise); text-decoration: none; }
.andy a:hover { color: var(--akzent); }
.andy img { display: block; width: 19px; height: 19px; }
@media (max-width: 860px) {
  .andy { gap: 12px; }
  .andy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 380px) { .andy { gap: 9px; left: 12px; } .schalter { right: 12px; gap: 6px; } }
.sprache, .farbe {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--tinte); border: 1px solid var(--linie); padding: .22rem .62rem; border-radius: 2px;
  background: var(--papier);
}
.sprache:hover, .farbe:hover { border-color: var(--akzent); color: var(--akzent); }
.farbe {
  display: none; align-items: center; justify-content: center;
  font-family: inherit; line-height: 1; padding: 0 .5rem; cursor: pointer;
}
.js .farbe { display: inline-flex; }
.farbe svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Gezeigt wird, wohin der Knopf führt: im Hellen der Mond, im Dunkeln die Sonne */
.farbe .sonne { display: none; }
:root[data-theme="dark"] .farbe .sonne { display: block; }
:root[data-theme="dark"] .farbe .mond { display: none; }

/* Bilder mit Dark-Fassung stecken in <picture>; es soll sich wie das <img> verhalten */
.karte picture, .galerie picture { display: block; }

/* Kopf */
.kopf { padding: clamp(84px, 12vw, 132px) 0 0; text-align: center; }
h1, h2, h3 { font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif; font-weight: 500; }
h1 { font-size: clamp(3.4rem, 11vw, 7.2rem); font-weight: 400; line-height: .95; margin: 0; letter-spacing: .01em; }
.unterzeile { margin: .9rem 0 0; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-style: italic; color: var(--leise); }
.unterzeile strong { font-weight: 400; }
.selbstbildnis { margin: clamp(36px, 6vw, 64px) calc(-1 * var(--rand)) 0; }
.selbstbildnis img { display: block; width: 100%; height: auto; }
.einleitung { text-align: left; max-width: 50rem; margin: clamp(32px, 5vw, 56px) auto 0; }

/* Der Falz: eine waagerechte Kante, oben etwas Schatten, unten etwas Licht */
.falz {
  height: clamp(56px, 9vw, 96px);
  margin: 0 calc(-1 * var(--rand));
  background:
    linear-gradient(to bottom,
      transparent 0%,
      var(--falz-schatten) 49.4%,
      var(--kante) 49.9%,
      var(--licht) 50.4%,
      transparent 100%);
}

/* Abschnitte */
section { max-width: 50rem; margin: 0 auto; padding: clamp(8px, 2vw, 20px) 0; }
section.breit { max-width: none; }
section.breit > h2, section.breit > p { max-width: 50rem; margin-left: auto; margin-right: auto; }
h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1.1; margin: 0 0 1.1rem; }
p { margin: 0 0 1.05em; hyphens: auto; }
strong { font-weight: 600; }
.kapitaelchen, .marke, .nr, footer .klein {
  font-variant-caps: all-small-caps; letter-spacing: .12em;
}

ul.leise-liste { list-style: none; padding: 0; margin: 0 0 1em; }
ul.leise-liste li { position: relative; padding-left: 1.4em; margin-bottom: .85em; }
ul.leise-liste li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: .7em; height: 1px; background: var(--mauve);
}

/* Die vier Ideenquellen */
.karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(18px, 3vw, 32px); margin: 1.6rem 0 .6rem;
}
.karte {
  background: var(--papier2); border: 1px solid var(--linie); padding: 0 0 1.1rem;
  box-shadow: 0 1px 1px var(--schatten), 0 10px 24px -18px var(--schatten);
  display: flex; flex-direction: column;
}
.karte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.karte .marke { margin: 1rem 1.2rem .2rem; color: var(--akzent); font-size: .95rem; font-weight: 600; }
.karte h3 { margin: 0 1.2rem .5rem; font-size: 1.6rem; line-height: 1.15; }
.karte p { margin: 0 1.2rem .7em; font-size: .97em; }

/* Lieblinge */
.galerie {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(22px, 3vw, 34px) clamp(16px, 2.4vw, 26px); margin: 1.6rem 0 .6rem; padding: 0; list-style: none;
}
.galerie figure { margin: 0; }
.galerie a.gross { display: block; overflow: hidden; background: var(--papier2); box-shadow: 0 1px 2px var(--schatten); }
.galerie img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.galerie a.gross:hover img { transform: scale(1.025); }
.galerie figcaption { font-size: .9em; line-height: 1.45; padding-top: .6rem; }
.galerie .nr { display: block; color: var(--leise); font-size: .9em; }
.galerie figcaption strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.22em; font-weight: 600; }

/* Bühne */
.buehne {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 1.2rem 0; margin: 1.4rem 0 .6rem;
}
.buehne .wohin { margin: 0; }
.buehne .wohin a { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.45rem; font-weight: 600; }
.plakate { display: flex; gap: 12px; }
.plakate a { display: block; width: 78px; transition: transform .25s ease; }
.plakate a:hover { transform: translateY(-3px) rotate(-1deg); }
.plakate img { display: block; width: 100%; height: auto; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
@media (max-width: 560px) { .buehne { grid-template-columns: 1fr; } .plakate a { width: 30%; max-width: 110px; } }

/* Der eingelegte Zettel */
.zettel {
  position: relative; margin: 1.2rem auto 1.4rem; max-width: 34em;
  background: var(--papier2);
  border: 1px solid var(--linie); padding: 2.2rem clamp(1.1rem, 4vw, 2.2rem) 1.4rem;
  transform: rotate(-.6deg);
  box-shadow: 0 2px 3px var(--schatten), 0 18px 32px -20px rgba(0, 0, 0, .35);
}
.zettel::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(1.5deg);
  background: var(--rose); opacity: .55;
}
.zettel h2 {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-weight: 500;
  font-size: clamp(1rem, .9rem + .5vw, 1.2rem); letter-spacing: .02em; margin-bottom: 1.1rem;
}
.zettel ol { padding-left: 1.6em; margin: 0 0 1em; }
.zettel ol li { margin-bottom: .55em; }
.zettel ol li::marker { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .85em; color: var(--akzent); }

/* Wer ich bin: der erste Satz groß, aber Fließtext (Garamond wie der Text, nicht Cormorant) */
.auftakt strong {
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.4rem); font-weight: 500;
  line-height: 1.15; letter-spacing: .005em; hyphens: manual;
}

/* Fuß */
footer { max-width: 50rem; margin: 0 auto; padding: .4rem 0 clamp(48px, 8vw, 80px); color: var(--leise); font-size: .92em; line-height: 1.7; text-align: center; }
footer p { margin: 0 0 .4rem; }
footer .fuss-hinweis { max-width: 40rem; margin: .8rem auto 0; font-size: .86em; line-height: 1.55; }
footer .foundry { margin-top: 1.4rem; font-size: .86em; }
/* Das Haus: die Signets aller Teile im Fuss */
footer .haus { margin: .4rem auto 1.6rem; }
.haus-titel { display: block; margin-bottom: .7rem; font-variant-caps: all-small-caps; letter-spacing: .14em; }
.haus ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.haus li { margin: 0; }
.haus a { display: block; border-radius: 50%; opacity: .82; box-shadow: 0 1px 2px var(--schatten), 0 6px 14px -8px var(--kante); transition: opacity .2s, transform .2s; }
.haus a:hover, .haus a:focus-visible { opacity: 1; transform: translateY(-3px); }
.haus a[aria-current="page"] { opacity: 1; outline: 2px solid var(--akzent); outline-offset: 3px; }
.haus a:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; }
.haus img { display: block; width: 64px; height: 64px; margin: 0; border-radius: 50%; }
@media (max-width: 480px) { .haus ul { gap: 12px; max-width: 200px; } .haus img { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .haus a { transition: none; } .haus a:hover, .haus a:focus-visible { transform: none; } }
.galerie-hinweis { font-size: .9em; font-style: italic; color: var(--leise); }

/* Bewegung: Abschnitte falten sich beim Hereinscrollen leicht auf */
.js .falte {
  transform-origin: 50% 0;
  transform: perspective(1400px) rotateX(-9deg);
  opacity: 0;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .75s ease;
}
.js .falte.offen { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .falte { transform: none; opacity: 1; transition: none; }
  .galerie img, .plakate a { transition: none; }
  html.farbwechsel, html.farbwechsel *, html.farbwechsel *::before, html.farbwechsel *::after { transition: none !important; }
}

/* Lupe (Lightbox) */
dialog.lupe {
  border: 0; padding: 0; max-width: min(96vw, 1600px); width: 100%; background: transparent; color: #F4EEE9;
}
dialog.lupe::backdrop { background: rgba(26, 22, 20, .86); }
dialog.lupe figure { margin: 0; }
dialog.lupe img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
dialog.lupe figcaption { padding: .7rem .2rem 0; font-size: 1rem; line-height: 1.45; text-align: center; }
dialog.lupe figcaption .nr { display: none; }
dialog.lupe .knopf {
  position: absolute; background: rgba(26, 22, 20, .55); color: #F4EEE9; border: 1px solid rgba(244, 238, 233, .35);
  font: inherit; font-size: 1.3rem; line-height: 1; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
}
dialog.lupe .zu { top: 8px; right: 8px; }
dialog.lupe .vor { top: 40%; right: 8px; }
dialog.lupe .zurueck { top: 40%; left: 8px; }

/* Neuigkeiten (13.11.2026) */
.neuigkeiten { list-style: none; padding: 0; margin: .6rem 0 0; }
.neuigkeiten li { padding: .9rem 0; border-top: 1px solid var(--linie); }
.neuigkeiten li:first-child { border-top: 0; padding-top: .2rem; }
.neuigkeiten time { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .78em; color: var(--leise); letter-spacing: .02em; }
.neuigkeiten strong { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25em; font-weight: 600; margin: .1rem 0 .15rem; }
.neuigkeiten p { margin: 0; }
.neuigkeiten .weiter { display: inline-block; margin-top: .3rem; color: var(--akzent); }

/* Suche nach der Kreativitaet */
.galerie.einzeln { display: block; list-style: none; padding: 0; margin: 0 0 .9rem; }
.suche .werk { margin: 2.2rem 0 2.6rem; }
.suche .werk > p { margin: .4rem 0 0; }
.galerie figcaption .beschreibung { display: block; margin-top: .35rem; font-style: italic; opacity: .82; }
.galerie figcaption .beschreibung .wort { font-style: normal; letter-spacing: .04em; text-transform: uppercase; font-size: .78em; opacity: .8; }