/* =========================================================================
   ROTSTRICH — Zeichnungen | mykreativmoments
   Stylesheet für die gesamte Website. Keine Frameworks, kein Build.

   AUFBAU
   00 Schriften              01 Design-Tokens       02 Reset & Basis
   03 Papier & Textur        04 Typografie          05 Layout
   06 Kopf & Navigation      07 Gestaltungselemente 08 Links & Buttons
   09 Werke                  10 Startseite          11 Geschichten
   12 Dunkler Bereich        13 Fußbereich          14 Unterseiten
   15 Lightbox               16 Bewegung            17 Responsive
   18 Hinweisleiste

   FARBEN ODER ABSTÄNDE ÄNDERN: nur in Abschnitt 01 (:root).
   ========================================================================= */

/* ---------------------------------------------------------------- 00 */
/* Die drei Schriften liegen als Dateien in assets/fonts/ und werden von
   dort geladen, nicht von Google. Das spart beim Seitenaufruf den Umweg
   ueber einen fremden Server und ist datenschutzfreundlicher.

   Pro Schnitt gibt es zwei Dateien: "latin" fuer die normalen Zeichen,
   "latin-ext" fuer seltene Sonderzeichen. Der Browser laedt ueber
   unicode-range nur, was die Seite wirklich braucht. Die latin-Dateien
   sind auf einen deutschen Zeichenvorrat gekuerzt.

   HIER KEIN GEWICHT ERGAENZEN, ohne es zu brauchen. Die Schriften teilen
   sich die Bandbreite mit den Bildern; jedes zusaetzliche Gewicht macht
   die Startseite messbar langsamer. Caveat gibt es deshalb nur in 400.
   Das Vorgehen und die Messzahlen stehen in AGENTS.md, Abschnitt 4a.

   AN DIESEM ABSCHNITT MUSS SONST NICHTS GEAENDERT WERDEN. Wer die
   Schrift wechseln will, aendert --font-serif / --font-sans / --font-hand
   in Abschnitt 01 und legt die passenden .woff2-Dateien hier ab. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/caveat-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/caveat-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- 01 */
:root {
  /* Papier */
  --paper:            #f1ede4;
  --paper-alt:        #eeeae1;
  --paper-deep:       #e6e0d5;
  --paper-note:       #f6f2e8;

  /* Schrift & Graphit */
  --graphite:         #252321;
  --graphite-soft:    #55514b;
  --graphite-light:   #77716a;
  --graphite-line:    rgba(85, 81, 75, 0.28);

  /* Akzent */
  --accent-red:       #a32624;
  --accent-red-soft:  rgba(163, 38, 36, 0.16);

  /* Dunkel */
  --dark:             #22201e;
  --dark-text:        #e8e2d6;
  --dark-text-soft:   #a8a196;

  /* Klebeband */
  --tape:             rgba(206, 190, 160, 0.55);
  --tape-edge:        rgba(184, 168, 139, 0.35);

  /* Abstände */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.875rem;
  --space-sm:  1.5rem;
  --space-md:  2.75rem;
  --space-lg:  4.5rem;
  --space-xl:  7rem;
  --space-2xl: 10rem;

  /* Schriften */
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-hand:  "Caveat", "Segoe Script", "Bradley Hand", cursive;

  /* Maße */
  --wrap:       78rem;
  --wrap-wide:  92rem;
  --measure:    46rem;   /* max. Textbreite Lesetext ≈ 736px */
  --measure-sm: 34rem;

  /* Feinheiten */
  --rule: 1px solid var(--graphite-line);
  --shadow-art: 0 1px 1px rgba(37,35,33,.05), 0 10px 24px -12px rgba(37,35,33,.30), 0 30px 50px -34px rgba(37,35,33,.35);
  --shadow-note: 0 6px 14px -10px rgba(37,35,33,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--graphite);
  font-family: var(--font-sans);
  font-size: 1.0125rem;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0.002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; }

a { color: inherit; }

::selection { background: var(--accent-red-soft); color: var(--graphite); }

:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 4px;
  border-radius: 1px;
}

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

.skip-link {
  position: absolute; left: var(--space-sm); top: -4rem; z-index: 200;
  background: var(--graphite); color: var(--paper);
  padding: .7rem 1.2rem; font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--space-sm); }

/* ---------------------------------------------------------------- 03 Papier & Textur */
/* Papier entsteht vollständig aus CSS: Grundton + weiche Wolken + feines Korn. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(90% 70% at 92% 8%,  rgba(214,205,188,.40), transparent 62%),
    radial-gradient(70% 60% at 30% 105%, rgba(206,196,177,.38), transparent 60%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .40; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.30'/></svg>");
  background-size: 220px 220px;
}
body > * { position: relative; z-index: 2; }

/* Papierfläche als Baustein */
.paper {
  position: relative;
  background-color: var(--paper-alt);
  background-image:
    radial-gradient(100% 100% at 20% 0%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(80% 90% at 90% 100%, rgba(205,195,176,.35), transparent 65%);
  box-shadow: var(--shadow-note);
}
.paper--deep { background-color: var(--paper-deep); }

/* Gerissene Papierkante ------------------------------------------------
   Die Kante ist eine Maske aus drei Lagen: oben ein Abriss, unten ein
   Abriss, dazwischen die volle Flaeche.

   Die Rissverlaeufe liegen als SVG in assets/textures/. Sie sind 2400 px
   breit, damit sich auf ueblichen Bildschirmen nichts sichtbar
   wiederholt, und haben oben und unten unterschiedliche Verlaeufe.
   Wer eine andere Kante moechte, ersetzt einfach diese vier Dateien -
   auch durch den Scan einer echten abgerissenen Papierkante.

   --tear bestimmt, wie tief das Papier einreisst. */
:root {
  --tear-top:    url("assets/textures/riss-oben.svg");
  --tear-bottom: url("assets/textures/riss-unten.svg");
  --tear-fill:   linear-gradient(#000, #000);
  --tear-tile:   2400px;
}

.torn-edge,
.dark-section,
.paper--torn-top,
.paper--torn-bottom,
.paper--torn-both {
  --tear: 26px;
  -webkit-mask-image: var(--tear-top), var(--tear-bottom), var(--tear-fill);
          mask-image: var(--tear-top), var(--tear-bottom), var(--tear-fill);
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
          mask-repeat: repeat-x, repeat-x, no-repeat;
  -webkit-mask-position: left top, left bottom, left var(--tear);
          mask-position: left top, left bottom, left var(--tear);
  -webkit-mask-size: var(--tear-tile) var(--tear), var(--tear-tile) var(--tear), 100% calc(100% - 2 * var(--tear));
          mask-size: var(--tear-tile) var(--tear), var(--tear-tile) var(--tear), 100% calc(100% - 2 * var(--tear));
}

/* nur oben eingerissen */
.paper--torn-top {
  -webkit-mask-image: var(--tear-top), var(--tear-fill);
          mask-image: var(--tear-top), var(--tear-fill);
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: left top, left var(--tear);
          mask-position: left top, left var(--tear);
  -webkit-mask-size: var(--tear-tile) var(--tear), 100% calc(100% - var(--tear));
          mask-size: var(--tear-tile) var(--tear), 100% calc(100% - var(--tear));
}

/* nur unten eingerissen */
.paper--torn-bottom {
  -webkit-mask-image: var(--tear-bottom), var(--tear-fill);
          mask-image: var(--tear-bottom), var(--tear-fill);
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: left bottom, left top;
          mask-position: left bottom, left top;
  -webkit-mask-size: var(--tear-tile) var(--tear), 100% calc(100% - var(--tear));
          mask-size: var(--tear-tile) var(--tear), 100% calc(100% - var(--tear));
}

/* ---------------------------------------------------------------- 04 Typografie */
.display,
.h1, .h2, .h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.008em; }

.display {
  font-size: clamp(2.9rem, 6.6vw, 5.3rem);
  line-height: .98;
  letter-spacing: -0.022em;
}
.h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.04; letter-spacing: -0.018em; }
.h2 { font-size: clamp(1.85rem, 3.3vw, 2.7rem);  line-height: 1.12; }
.h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem);   line-height: 1.25; }

.lead {
  font-size: clamp(1.03rem, 1.25vw, 1.16rem);
  line-height: 1.72;
  color: var(--graphite-soft);
  max-width: var(--measure-sm);
}

.meta,
.eyebrow {
  font-family: var(--font-sans);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--graphite-light);
  font-weight: 500;
}
.eyebrow { display: block; margin-bottom: var(--space-sm); }

.serif { font-family: var(--font-serif); }
.red   { color: var(--accent-red); }

/* Handschrift — nur für Randnotizen, Gedanken, kurze Zitate. */
.hand {
  font-family: var(--font-hand);
  font-size: clamp(1.22rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--graphite-soft);
  font-weight: 400;
}
.hand--sm { font-size: 1.12rem; }

.handwritten-note {
  font-family: var(--font-hand);
  font-size: clamp(1.2rem, 1.55vw, 1.46rem);
  line-height: 1.34;
  color: var(--graphite-soft);
  max-width: 20rem;
  transform: rotate(-1.6deg);
}
.handwritten-note--right { transform: rotate(1.4deg); }

/* ---------------------------------------------------------------- 05 Layout */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--wide   { width: min(100% - 2.5rem, var(--wrap-wide)); }
.wrap--narrow { width: min(100% - 2.5rem, var(--measure)); }

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.section--loose { padding-block: var(--space-2xl); }

.section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.section-intro__text { max-width: 34rem; }
.section-intro p { margin-top: .9rem; color: var(--graphite-soft); }

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md) var(--space-sm);
}

/* ---------------------------------------------------------------- 06 Kopf & Navigation */
.site-header {
  position: relative;
  z-index: 50;
  padding-block: var(--space-sm) var(--space-xs);
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.wordmark { text-decoration: none; display: inline-block; line-height: 1; }
.wordmark__name {
  display: block;
  font-family: var(--font-hand);
  font-size: 2.05rem;
  font-weight: 400;
  color: var(--graphite);
  letter-spacing: .01em;
}
.wordmark__sub {
  display: block;
  margin-top: .3rem;
  margin-left: .18rem;
  font-size: .6rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--graphite-light);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.1vw, 2.1rem);
  list-style: none;
  margin: .55rem 0 0;
}
.nav__link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: .715rem;
  letter-spacing: .175em;
  text-transform: uppercase;
  color: var(--graphite-soft);
  padding-bottom: .5rem;
  transition: color .25s var(--ease);
}
.nav__link:hover { color: var(--graphite); }

/* Aktive Seite: kleiner handgezeichneter roter Strich */
.nav__link[aria-current="page"] { color: var(--graphite); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute; left: -2px; right: -2px; bottom: 0; height: 6px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M1.5 5.4C16 2.6 33 6.2 49 3.9c15-2.2 33 2.4 49.4.4' fill='none' stroke='%23a32624' stroke-width='2.1' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

.nav__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-red);
  margin-top: -.5rem;
}

.nav__toggle {
  display: none;
  background: none; border: 0; padding: .4rem .2rem;
  font: inherit; font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--graphite-soft); cursor: pointer;
}

/* ---------------------------------------------------------------- 07 Gestaltungselemente */

/* Roter Strich — handgezeichnete Unterstreichung hinter einem Wort */
.red-stroke {
  position: relative;
  display: inline-block;
  color: var(--accent-red);
}
.red-stroke::after {
  content: "";
  position: absolute; left: -.06em; right: -.06em; bottom: -.04em; height: .17em;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M3 8.2C33 3.4 68 9.6 101 5.8c28-3.2 62 3.4 96 .6' fill='none' stroke='%23a32624' stroke-width='3.2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}
.red-stroke--dark { color: #cf4b46; }
.red-stroke--dark::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M3 8.2C33 3.4 68 9.6 101 5.8c28-3.2 62 3.4 96 .6' fill='none' stroke='%23bd4440' stroke-width='3.2' stroke-linecap='round'/></svg>");
}

/* Freistehende rote Markierung */
.red-mark {
  display: block; width: 88px; height: 9px; border: 0; margin: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'><path d='M2 6.5C24 2.8 48 8 72 4.2c14-2.2 30 2.4 46 .8' fill='none' stroke='%23a32624' stroke-width='2.6' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}
.red-mark--wide   { width: 150px; }
.red-mark--center { margin-inline: auto; }

.red-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-red); display: inline-block; }

/* Bleistiftlinie als Trenner */
.sketch-line {
  display: block; width: 100%; height: 10px; border: 0; margin: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'><path d='M2 6C90 2.4 180 7.6 268 4.6 360 1.4 470 8 598 4.2' fill='none' stroke='%2355514b' stroke-opacity='.5' stroke-width='1.3' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  opacity: .8;
}

/* Bleistift-Pfeil */
.sketch-arrow {
  width: 74px; height: 26px; flex: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 26'><path d='M2 16C14 7 30 4 46 6c7 .9 13 3.6 18 7.4' fill='none' stroke='%2355514b' stroke-opacity='.6' stroke-width='1.4' stroke-linecap='round'/><path d='M55 4.6c3.6 3 6.9 6.3 9.6 9.9-4.4.6-8.6 2-12.5 4' fill='none' stroke='%2355514b' stroke-opacity='.6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* Klebeband */
.tape {
  position: absolute; z-index: 3;
  width: 112px; height: 30px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%),
    repeating-linear-gradient(90deg, var(--tape) 0 5px, rgba(197,180,150,.52) 5px 7px),
    var(--tape);
  border-left: 1px solid var(--tape-edge);
  border-right: 1px solid var(--tape-edge);
  box-shadow: 0 1px 3px rgba(37,35,33,.12);
  clip-path: polygon(0 6%, 4% 0, 96% 4%, 100% 0, 100% 94%, 95% 100%, 5% 96%, 0 100%);
  opacity: .92;
  pointer-events: none;
}
.tape--tl  { top: -14px; left: -18px;  transform: rotate(-24deg); }
.tape--tr  { top: -13px; right: -16px; transform: rotate(19deg); }
.tape--bl  { bottom: -13px; left: -14px;  transform: rotate(14deg); }
.tape--br  { bottom: -14px; right: -18px; transform: rotate(-17deg); }
.tape--top { top: -13px; left: 50%; transform: translateX(-50%) rotate(-2.4deg); }
.tape--sm  { width: 78px; height: 24px; }

/* Kleines aufgeklebtes Notizpapier */
.paper-note {
  position: relative;
  background-color: var(--paper-note);
  background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,.02));
  padding: 1.35rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-note);
  transform: rotate(-1.1deg);
  max-width: 24rem;
}
.paper-note--lined {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,.02)),
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(85,81,75,.14) 30px 31px);
}
.paper-note--right { transform: rotate(1.3deg); }

/* Handgeschriebene Liste auf einem liniierten Zettel: jede Zeile
   sitzt auf einer Linie (Linienabstand 31px, siehe .paper-note--lined). */
.note-list { list-style: none; margin: 0; }
.note-list li { line-height: 31px; }
.note-list li::before { content: "\2013\00a0"; color: var(--graphite-light); }

/* Tintenspritzer */
.ink-splatter {
  position: absolute; pointer-events: none; z-index: 1;
  width: 58px; height: 58px; opacity: .7;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g fill='%23a32624'><ellipse cx='20' cy='22' rx='5.4' ry='4.6'/><circle cx='34' cy='14' r='2.1'/><circle cx='41' cy='30' r='3'/><circle cx='26' cy='38' r='1.5'/><circle cx='13' cy='35' r='1.1'/><circle cx='46' cy='19' r='1.2'/></g></svg>") no-repeat center / contain;
}

/* ---------------------------------------------------------------- 08 Links & Buttons */

/* Textlink mit rotem, handgezeichnetem Unterstrich */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  font-size: .715rem;
  letter-spacing: .175em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-bottom: .55rem;
  transition: gap .28s var(--ease);
}
.link-arrow::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 8' preserveAspectRatio='none'><path d='M2 5.6C28 2.4 58 7.4 88 4.4c22-2.2 46 2.6 70 .8' fill='none' stroke='%23a32624' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat left center / 100% 100%;
  transform: scaleX(.32);
  transform-origin: left center;
  transition: transform .42s var(--ease);
}
.link-arrow:hover { gap: 1.05rem; }
.link-arrow:hover::before,
.link-arrow:focus-visible::before { transform: scaleX(1); }
.link-arrow__tip { transition: transform .28s var(--ease); }
.link-arrow:hover .link-arrow__tip { transform: translateX(3px); }

/* Textueller Button — Rahmen aus Bleistiftlinie, keine Pille */
.btn-textual {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.7rem;
  text-decoration: none;
  font-size: .715rem;
  letter-spacing: .175em;
  text-transform: uppercase;
  color: var(--graphite);
  border: 1px solid rgba(85,81,75,.42);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.btn-textual:hover {
  background-color: rgba(37,35,33,.045);
  border-color: rgba(85,81,75,.7);
  gap: 1.2rem;
}
.btn-textual--dark {
  color: var(--dark-text);
  border-color: rgba(232,226,214,.34);
}
.btn-textual--dark:hover {
  background-color: rgba(232,226,214,.07);
  border-color: rgba(232,226,214,.6);
}

/* ---------------------------------------------------------------- 09 Werke */

/* Ein Werk: Papierblatt mit Schatten, leicht gedreht, optional Klebeband */
.artwork {
  position: relative;
  margin: 0;
  display: block;
}
.artwork__frame {
  position: relative;
  display: block;
  background: #f7f4ec;
  padding: 10px;
  box-shadow: var(--shadow-art);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  transform: rotate(var(--tilt, 0deg));
}
.artwork__frame img {
  width: 100%;
  display: block;
  filter: saturate(.94);
}
a.artwork__frame,
button.artwork__frame { border: 0; cursor: pointer; width: 100%; font: inherit; }

.artwork:hover .artwork__frame,
.artwork__frame:focus-visible {
  transform: rotate(calc(var(--tilt, 0deg) * .25)) translateY(-4px);
  box-shadow: 0 1px 1px rgba(37,35,33,.05), 0 16px 30px -14px rgba(37,35,33,.36), 0 40px 60px -38px rgba(37,35,33,.4);
}

.artwork-meta {
  margin-top: 1.05rem;
  padding-left: .1rem;
}
.artwork-meta__title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  line-height: 1.25;
  font-weight: 500;
  margin: 0 0 .3rem;
}
.artwork-meta__detail {
  display: block;
  font-size: .715rem;
  letter-spacing: .1em;
  color: var(--graphite-light);
  text-transform: none;
}

/* Platzhalter, solange kein Werk vorhanden ist */
.artwork--placeholder .artwork__frame {
  background: var(--paper-note);
  aspect-ratio: 3 / 4;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px dashed rgba(85,81,75,.3);
  box-shadow: none;
}
.artwork--placeholder .hand { color: var(--graphite-light); }

/* Werkgruppe: bewusst unterschiedlich große, versetzte Blätter */
.works-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md) var(--space-sm);
  align-items: start;
}
.works-row > *:nth-child(1) { grid-column: 1 / span 3; margin-top: 2.4rem; }
.works-row > *:nth-child(2) { grid-column: 4 / span 3; }
.works-row > *:nth-child(3) { grid-column: 7 / span 3; margin-top: 3.6rem; }
.works-row > *:nth-child(4) { grid-column: 10 / span 3; margin-top: .8rem; }

/* Galerie-Raster (werke.html) — flexibel, nicht gleichförmig */
.works-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg) var(--space-md);
  align-items: start;
}
.works-gallery > * { grid-column: span 4; }
.works-gallery > *:nth-child(6n+1) { grid-column: span 5; }
.works-gallery > *:nth-child(6n+2) { grid-column: span 4; margin-top: 3.2rem; }
.works-gallery > *:nth-child(6n+3) { grid-column: span 3; margin-top: 1.2rem; }
.works-gallery > *:nth-child(6n+4) { grid-column: span 4; margin-top: 2.4rem; }
.works-gallery > *:nth-child(6n+5) { grid-column: span 3; }
.works-gallery > *:nth-child(6n+6) { grid-column: span 5; margin-top: 2rem; }
.works-gallery > [hidden] { display: none; }

/* Filter */
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.6rem;
  margin-bottom: var(--space-md);
  padding-top: var(--space-xs);
}
.filter__btn {
  position: relative;
  background: none; border: 0; padding: .35rem 0 .6rem; margin: 0;
  font-family: var(--font-sans);
  font-size: .7rem; letter-spacing: .175em; text-transform: uppercase;
  color: var(--graphite-light);
  cursor: pointer;
  transition: color .25s var(--ease);
}
.filter__btn:hover { color: var(--graphite); }
.filter__btn[aria-pressed="true"] { color: var(--graphite); }
.filter__btn[aria-pressed="true"]::after {
  content: "";
  position: absolute; left: -3px; right: -3px; bottom: 0; height: 6px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M1.5 5.4C16 2.6 33 6.2 49 3.9c15-2.2 33 2.4 49.4.4' fill='none' stroke='%23a32624' stroke-width='2.1' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

/* ---------------------------------------------------------------- 10 Startseite */
.hero {
  position: relative;
  padding-block: var(--space-sm) var(--space-xl);
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md) var(--space-sm);
  align-items: center;
}
.hero__text  { grid-column: 1 / span 5; grid-row: 1; position: relative; z-index: 4; }
/* Die Hoehe des Clowns richtet sich nach dem Fenster, damit er auf dem
   Desktop ganz sichtbar ist, ohne zu scrollen (8rem = Kopf + Abstaende). */
.hero__stage {
  grid-column: 5 / -1; grid-row: 1; position: relative;
  justify-self: end;
  width: min(100%, max(22rem, (100svh - 8rem) * 1060 / 1500));
}
.hero__side  { grid-column: 6 / span 3; grid-row: 1; align-self: flex-start; padding-top: 3rem; position: relative; z-index: 4; }

.hero__title { margin-bottom: var(--space-sm); }
.hero__lead  { margin-bottom: var(--space-md); }

/* Der ausgeschnittene Clown: kein Blatt, kein Klebeband, keine Drehung.
   Die Maske schneidet ihn entlang seines Umrisses aus, der Schatten
   folgt dem Umriss und hebt ihn leicht vom Papier ab. */
.hero__art .artwork__frame {
  --tilt: 0deg;
  padding: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(37,35,33,.10)) drop-shadow(0 18px 22px rgba(37,35,33,.20));
}
.hero__art:hover .artwork__frame,
.hero__art .artwork__frame:focus-visible { box-shadow: none; }
.hero__art .artwork__frame img {
  -webkit-mask: url("assets/textures/der-clown-startseite-umriss.png") no-repeat center / 100% 100%;
          mask: url("assets/textures/der-clown-startseite-umriss.png") no-repeat center / 100% 100%;
}

/* Der Button steht unter der Hand des Clowns. Die Werte beziehen sich
   auf das Bild: die Fingerspitzen enden bei etwa 68 % der Hoehe und
   liegen um 12 % der Breite. */
.hero__cta {
  position: absolute;
  top: 69%; left: 12%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  white-space: nowrap;
}
.hero__cta .btn-textual { background-color: var(--paper-note); box-shadow: var(--shadow-art); }
.hero__cta .btn-textual:hover { background-color: var(--paper); }

.hero__note {
  max-width: 13rem;
  margin-left: 0;
}

.hero__mark {
  position: absolute;
  left: -2.6rem; top: 38%;
  transform: rotate(-90deg);
  transform-origin: left center;
}

/* Kleine Auszeichnung links im Hero (Randnotiz) */
.hero__aside {
  margin-top: var(--space-md);
  max-width: 13rem;
  transform: rotate(-2.2deg);
}

/* Drei Wege (Werke / Geschichten / Über mich) */
.paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  padding-top: var(--space-md);
}
.path { position: relative; padding-right: var(--space-sm); }
.path__icon { width: 30px; height: 34px; margin-bottom: 1.15rem; opacity: .75; }
.path__title {
  font-size: .72rem; letter-spacing: .19em; text-transform: uppercase;
  margin-bottom: .7rem;
}
.path p { color: var(--graphite-soft); font-size: .95rem; margin-bottom: 1.1rem; }
.path + .path { border-left: var(--rule); padding-left: var(--space-md); }

/* Über die Künstlerin (Startseite) */
.about-teaser { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md) var(--space-sm); align-items: center; }
.about-teaser__media { grid-column: 1 / span 5; position: relative; }
.about-teaser__text  { grid-column: 7 / span 5; }
.about-teaser__media .artwork__frame { --tilt: 1.6deg; }
.about-teaser__note { position: absolute; right: -2.5rem; bottom: -2.2rem; z-index: 5; max-width: 13rem; }

/* Instagram-Einladung (Startseite).
   Kein Logo, kein Bildraster, kein farbiger Knopf - die Einladung sieht
   aus wie ein angehefteter Zettel neben dem Text. */
.follow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md) var(--space-sm);
  align-items: center;
  padding-top: var(--space-md);
}
.follow__text { grid-column: 1 / span 6; }
.follow__icon { width: 30px; height: 34px; margin-bottom: 1.15rem; opacity: .75; }
.follow__title { margin-bottom: var(--space-2xs); }
.follow__lead {
  color: var(--graphite-soft);
  max-width: 32rem;
  margin-bottom: var(--space-sm);
}
.follow__handle {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.55rem;
  color: var(--graphite);
  margin-bottom: .4rem;
}
/* Der Zettel nimmt die rechte Haelfte ein, damit die Flaeche nicht
   auseinanderfaellt. Er ist bewusst groesser als die Randnotizen
   anderswo - hier traegt er die halbe Breite. */
.follow__card {
  grid-column: 8 / span 5;
  position: relative;
  justify-self: end;
  transform: rotate(1.4deg);
  max-width: 30rem;
  padding: 2rem 2.2rem 2.2rem;
}
.follow__card .hand {
  margin-bottom: 0;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
}

/* ---------------------------------------------------------------- 11 Geschichten */
.story-preview { position: relative; }
.story-preview__media { position: relative; margin-bottom: 1.3rem; }
.story-preview__media .artwork__frame { --tilt: -1.1deg; }
.story-preview:nth-child(even) .artwork__frame { --tilt: 1.2deg; }
.story-preview__date {
  display: block;
  font-size: .7rem; letter-spacing: .16em;
  color: var(--graphite-light);
  margin-bottom: .7rem;
}
.story-preview__title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: .75rem;
}
.story-preview__title a { text-decoration: none; }
.story-preview__title a:hover { color: var(--accent-red); }
.story-preview__excerpt { color: var(--graphite-soft); font-size: .96rem; margin-bottom: 1.25rem; }

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
  align-items: start;
}
.stories-grid > *:nth-child(2) { margin-top: 2.8rem; }
.stories-grid > *:nth-child(3) { margin-top: 1.1rem; }

/* Featured Story */
.story-feature {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md) var(--space-md);
  align-items: center;
}
.story-feature__media { grid-column: 1 / span 5; position: relative; }
.story-feature__media .artwork__frame { --tilt: -1.4deg; padding: 13px; }
.story-feature__body  { grid-column: 7 / span 6; }
.story-feature__title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.1vw, 2.6rem);
  line-height: 1.1;
  font-weight: 500;
  margin: .9rem 0 1.1rem;
}
.story-feature__excerpt { color: var(--graphite-soft); max-width: 32rem; margin-bottom: var(--space-sm); }

/* Leseseite */
.article { padding-block: var(--space-md) var(--space-xl); }
.article__head { margin-bottom: var(--space-md); }
.article__back { margin-bottom: var(--space-md); display: inline-flex; }
.article__title { margin: 1rem 0 1.2rem; }
.article__hero { margin: var(--space-md) auto var(--space-lg); }
.article__hero .artwork__frame { --tilt: -.8deg; padding: 14px; }
.article__hero figcaption {
  margin-top: 1rem;
  font-size: .715rem; letter-spacing: .1em;
  color: var(--graphite-light);
  text-align: center;
}

.prose {
  width: min(100% - 2.5rem, var(--measure));
  margin-inline: auto;
  font-size: 1.09rem;
  line-height: 1.85;
  color: #322f2c;
}
.prose p { margin-bottom: 1.5em; }
.prose p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.5em;
  line-height: .8;
  float: left;
  margin: .08em .09em 0 0;
  color: var(--graphite);
}
.prose h2 {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 2.6rem 0 1rem;
  font-weight: 500;
}
.prose blockquote {
  margin: 2.6rem 0;
  padding: 0 0 0 1.6rem;
  border-left: 2px solid var(--accent-red-soft);
  font-family: var(--font-serif);
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--graphite);
}
.prose .handwritten-note { margin: 2.4rem 0 2.4rem 2rem; }

.article__aside {
  width: min(100% - 2.5rem, var(--measure));
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: var(--rule);
}
.article__nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-sm); flex-wrap: wrap;
  width: min(100% - 2.5rem, var(--measure));
  margin: var(--space-lg) auto 0;
}

/* ---------------------------------------------------------------- 12 Dunkler Bereich */
.dark-section {
  --tear: 30px;
  position: relative;
  background: var(--dark);
  color: var(--dark-text);
  padding-block: calc(var(--space-xl) + var(--tear));
  margin-block: var(--space-lg);
}
.dark-section::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .5; mix-blend-mode: screen; pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23d)' opacity='.14'/></svg>");
}
/* Papierdicke: heller Faserstreifen direkt hinter der Risskante.
   Die zweite Rissline liegt etwas tiefer als die aeussere, dadurch
   schwankt die Breite des Streifens - wie bei echtem Papier. */
.dark-section::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #3b3630;
  -webkit-mask-image: url("assets/textures/riss-faser-oben.svg"), url("assets/textures/riss-faser-unten.svg");
          mask-image: url("assets/textures/riss-faser-oben.svg"), url("assets/textures/riss-faser-unten.svg");
  -webkit-mask-repeat: repeat-x, repeat-x;
          mask-repeat: repeat-x, repeat-x;
  -webkit-mask-position: left top, left bottom;
          mask-position: left top, left bottom;
  -webkit-mask-size: var(--tear-tile) calc(var(--tear) * 1.5), var(--tear-tile) calc(var(--tear) * 1.5);
          mask-size: var(--tear-tile) calc(var(--tear) * 1.5), var(--tear-tile) calc(var(--tear) * 1.5);
}

.dark-section > * { position: relative; z-index: 2; }
.dark-section .meta,
.dark-section .eyebrow { color: var(--dark-text-soft); }

.quote-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md) var(--space-sm);
  align-items: center;
}
.quote-block__mark { grid-column: 1 / span 2; }
.quote-block__text { grid-column: 3 / span 8; }
.quote-block blockquote { margin: 0; }
.quote-block__q {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.1vw, 3.5rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.quote-block cite {
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dark-text-soft);
}
.quote-block__sketch { grid-column: 11 / span 2; opacity: .55; }

/* ---------------------------------------------------------------- 13 Fußbereich */
.site-footer {
  position: relative;
  padding-block: var(--space-lg) var(--space-md);
  border-top: var(--rule);
  margin-top: var(--space-xl);
}
.site-footer__top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-md); flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.site-footer__note { font-family: var(--font-hand); font-size: 1.4rem; color: var(--accent-red); transform: rotate(-1.4deg); }
/* Zwei Wege nebeneinander: Kontakt und Instagram. */
.site-footer__actions {
  display: flex; align-items: flex-end;
  gap: var(--space-sm) var(--space-md); flex-wrap: wrap;
}
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-sm) var(--space-md); flex-wrap: wrap;
  padding-top: var(--space-sm);
  border-top: var(--rule);
}
.footer-links { display: flex; gap: var(--space-sm) var(--space-md); flex-wrap: wrap; list-style: none; }
.footer-links a {
  text-decoration: none;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--graphite-light);
  transition: color .25s var(--ease);
}
.footer-links a:hover { color: var(--accent-red); }
.site-footer__copy { font-size: .68rem; letter-spacing: .1em; color: var(--graphite-light); }

/* ---------------------------------------------------------------- 14 Unterseiten */
.page-head { padding-block: var(--space-md) var(--space-lg); position: relative; }
.page-head__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md) var(--space-sm); align-items: end; }
.page-head__text { grid-column: 1 / span 6; }
.page-head__side { grid-column: 8 / span 5; }
.page-head .h1 { margin-bottom: 1.1rem; }
.page-head .red-mark { margin-bottom: var(--space-sm); }

/* Essay-Layout (Über mich) */
.essay { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-md); align-items: start; }
.essay__aside { grid-column: 1 / span 4; position: relative; }
.essay__body  { grid-column: 6 / span 6; }
.essay__body p { color: #322f2c; font-size: 1.05rem; line-height: 1.82; }
.essay__body h2 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; margin: 2.4rem 0 .9rem; }
.essay--flip .essay__aside { grid-column: 8 / span 5; grid-row: 1; }
.essay--flip .essay__body  { grid-column: 1 / span 6; grid-row: 1; }

p.pull-quote,
.pull-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  line-height: 1.18;
  margin: var(--space-md) 0;
  max-width: 30rem;
}

/* Vita */
.vita-block { padding-block: var(--space-md); border-top: var(--rule); }
.vita-block:first-of-type { border-top: 0; }
.vita-block__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-sm) var(--space-md); }
.vita-block__title { grid-column: 1 / span 3; }
.vita-block__title h2 { font-size: .72rem; letter-spacing: .19em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 500; color: var(--graphite-light); }
.vita-block__body  { grid-column: 5 / span 8; }

.vita-list { list-style: none; }
.vita-list li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-sm);
  padding: .95rem 0;
  border-bottom: 1px solid rgba(85,81,75,.16);
}
.vita-list li:last-child { border-bottom: 0; }
.vita-list__year { font-size: .72rem; letter-spacing: .1em; color: var(--graphite-light); padding-top: .3rem; }
.vita-list__what strong { font-weight: 500; display: block; margin-bottom: .15rem; }
.vita-list__what span { color: var(--graphite-soft); font-size: .93rem; }
.vita-empty { color: var(--graphite-light); font-size: .95rem; font-style: italic; }

/* Kontakt */
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-md); align-items: start; }
.contact-grid__main { grid-column: 1 / span 5; }
.contact-grid__side { grid-column: 7 / span 5; position: relative; }
.contact-list { list-style: none; margin-top: var(--space-md); }
.contact-list li { padding: 1.15rem 0; border-top: var(--rule); }
.contact-list li:last-child { border-bottom: var(--rule); }
.contact-list__label { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--graphite-light); margin-bottom: .3rem; }
.contact-list__value { font-family: var(--font-serif); font-size: 1.35rem; text-decoration: none; }
.contact-list__value:hover { color: var(--accent-red); }

.form-field { margin-bottom: var(--space-sm); }
.form-field label {
  display: block; margin-bottom: .5rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite-light);
}
.form-field input,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: .98rem;
  color: var(--graphite);
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(85,81,75,.3);
  padding: .8rem .9rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus { background: rgba(255,255,255,.75); border-color: rgba(85,81,75,.65); }
.form-field textarea { min-height: 9rem; resize: vertical; }

/* ---------------------------------------------------------------- 15 Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  margin: 0; border: 0;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(34,32,30,.94);
  color: var(--dark-text);
}
.lightbox::backdrop { background: rgba(34,32,30,.9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__inner { display: grid; gap: 1.2rem; justify-items: center; max-height: 100%; }
.lightbox__img {
  max-height: min(78vh, 900px);
  width: auto;
  background: #f7f4ec;
  padding: 10px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.lightbox__caption { text-align: center; color: var(--dark-text-soft); font-size: .72rem; letter-spacing: .12em; }
.lightbox__caption strong { display: block; font-family: var(--font-serif); font-size: 1.25rem; letter-spacing: 0; color: var(--dark-text); margin-bottom: .35rem; font-weight: 500; }
.lightbox__close {
  position: absolute; top: 1.2rem; right: 1.4rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dark-text-soft); padding: .6rem;
}
.lightbox__close:hover { color: var(--dark-text); }

/* ---------------------------------------------------------------- 16 Bewegung */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .artwork:hover .artwork__frame { transform: rotate(var(--tilt, 0deg)); }
}

/* ---------------------------------------------------------------- 17 Responsive */

/* — Tablet — Collage wird ruhiger, Überlagerungen nehmen ab. */
@media (max-width: 1080px) {
  :root { --space-xl: 5.5rem; --space-2xl: 7rem; }

  /* Die Abrisskachel schrumpft mit, sonst sieht man auf schmalen
     Bildschirmen nur einen ruhigen Ausschnitt der Risskante. */
  .torn-edge, .dark-section,
  .paper--torn-top, .paper--torn-bottom, .paper--torn-both { --tear-tile: 1500px; }

  .hero__grid { gap: var(--space-md); }
  .hero__text  { grid-column: 1 / span 12; }
  .hero__stage { grid-column: 3 / -1; grid-row: 2; margin-top: -8rem; justify-self: stretch; width: auto; }
  .hero__side  { grid-column: 1 / span 12; grid-row: 3; padding-top: var(--space-sm); }
  .hero__note { margin: 0; max-width: 24rem; }
  .hero__aside { margin-top: var(--space-sm); }
  .hero__mark { display: none; }

  .works-row > * { grid-column: span 6 !important; margin-top: 0 !important; }
  .works-gallery > * { grid-column: span 6 !important; margin-top: 0 !important; }

  .story-feature__media { grid-column: 1 / span 6; }
  .story-feature__body  { grid-column: 7 / span 6; }

  .about-teaser__media { grid-column: 1 / span 6; }
  .about-teaser__text  { grid-column: 7 / span 6; }
  .about-teaser__note  { position: static; margin-top: var(--space-sm); max-width: 100%; }

  .essay__aside, .essay--flip .essay__aside { grid-column: 1 / span 12; grid-row: auto; max-width: 26rem; }
  .essay__body,  .essay--flip .essay__body  { grid-column: 1 / span 12; grid-row: auto; }

  .page-head__text { grid-column: 1 / span 12; }
  .page-head__side { grid-column: 1 / span 12; }

  .quote-block__mark  { display: none; }
  .quote-block__text  { grid-column: 1 / span 10; }
  .quote-block__sketch { grid-column: 11 / span 2; }

  .vita-block__title { grid-column: 1 / span 12; margin-bottom: .4rem; }
  .vita-block__body  { grid-column: 1 / span 12; }

  .contact-grid__main { grid-column: 1 / span 12; }
  .contact-grid__side { grid-column: 1 / span 12; }

  .stories-grid { grid-template-columns: repeat(2, 1fr); }
  .stories-grid > * { margin-top: 0; }
}

/* — Navigation wird zum Menü — */
@media (max-width: 860px) {
  .site-header__inner { align-items: center; }
  .nav__toggle { display: inline-block; }
  .nav__list {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 60;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: var(--space-sm) 1.25rem var(--space-md);
    background: var(--paper-note);
    border-top: var(--rule);
    border-bottom: 1px solid rgba(85,81,75,.45);
    box-shadow: 0 20px 34px -20px rgba(37,35,33,.55);
  }
  .nav[data-open="true"] .nav__list { display: flex; }
  .nav { position: static; }
  .site-header { position: relative; }
  .nav__link { font-size: .8rem; padding: .85rem 0; width: 100%; }
  .nav__dot { display: none; }
}

/* — Smartphone — einspaltig, Kunst im Mittelpunkt — */
@media (max-width: 720px) {
  :root {
    --space-md: 2rem;
    --space-lg: 3.25rem;
    --space-xl: 4.25rem;
    --space-2xl: 5rem;
  }

  body { font-size: 1rem; }
  .wrap, .wrap--wide, .wrap--narrow { width: min(100% - 2rem, var(--wrap)); }

  /* Bewusst ruhig: keine Drehungen, keine Überlagerungen auf kleinen Displays */
  .artwork__frame { --tilt: 0deg !important; padding: 8px; }
  .paper-note, .handwritten-note, .follow__card { transform: none; }
  .ink-splatter { display: none; }

  /* flacherer Abriss, damit auf schmalen Displays kein Text angeschnitten wird */
  .torn-edge, .paper--torn-top, .paper--torn-bottom, .paper--torn-both {
    --tear: 15px;
    --tear-tile: 820px;
  }
  .dark-section { --tear: 19px; --tear-tile: 820px; }
  .tape--tl, .tape--bl { left: -8px; }
  .tape--tr, .tape--br { right: -8px; }
  .tape { width: 84px; height: 24px; }

  .hero { padding-block: var(--space-sm) var(--space-lg); }
  .hero__stage { grid-column: 1 / span 12; margin-top: 0; }
  /* Auf dem Handy steht der Button unter dem Bild statt ueber der Zeichnung. */
  .hero__cta { position: static; transform: none; margin-top: var(--space-sm); }

  .works-row > *, .works-gallery > * { grid-column: span 12 !important; }
  .works-gallery { gap: var(--space-md); }

  .story-feature__media, .story-feature__body { grid-column: 1 / span 12; }
  .about-teaser__media, .about-teaser__text   { grid-column: 1 / span 12; }
  .stories-grid { grid-template-columns: 1fr; gap: var(--space-lg); }

  .paths { grid-template-columns: 1fr; gap: var(--space-sm); }
  .path + .path { border-left: 0; border-top: var(--rule); padding-left: 0; padding-top: var(--space-sm); }
  .path { padding-right: 0; }

  .follow__text, .follow__card { grid-column: 1 / span 12; }
  .follow__card { justify-self: start; max-width: 24rem; }

  .quote-block__text   { grid-column: 1 / span 12; }
  .quote-block__sketch { display: none; }

  .prose { font-size: 1.04rem; }
  .prose p:first-of-type::first-letter { font-size: 3.1em; }
  .prose .handwritten-note { margin-left: 0; }

  .vita-list li { grid-template-columns: 1fr; gap: .2rem; }
  .vita-list__year { padding-top: 0; }

  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .lightbox__img { max-height: 70vh; }
}

/* ---------------------------------------------------------------- 18 Hinweisleiste */
/* Der Cookie-Hinweis. Er liegt unten auf der Seite wie ein angeklebter
   Zettel, nicht als dunkler Kasten ueber dem ganzen Bildschirm.

   Er blockiert die Seite bewusst nicht: es gibt nichts zu entscheiden,
   nur etwas zu wissen. Deshalb kein abgedunkelter Hintergrund und keine
   Sperre der Bedienung. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-sm) var(--space-sm);
  pointer-events: none;
}
.consent[hidden] { display: none; }

.consent__inner {
  position: relative;
  pointer-events: auto;
  max-width: 46rem;
  padding: 1.5rem 1.7rem 1.6rem;
  background-color: var(--paper-note);
  background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,.02));
  box-shadow: var(--shadow-note);
  transform: rotate(-.5deg);
}

.consent__title {
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--graphite);
}
.consent__text {
  margin: 0;
  max-width: 44rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--graphite-soft);
}
.consent__text a { color: var(--graphite); }

/* Zustimmen und Ablehnen sehen absichtlich GLEICH aus und stehen
   nebeneinander. Ein hervorgehobener Zustimmen-Knopf waere ein
   Dark Pattern und macht die Einwilligung angreifbar. */
.consent__actions {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.consent__meta {
  margin: .9rem 0 0;
  font-size: .74rem;
  color: var(--graphite-light);
}

/* Kein farbiger Knopf - dieselbe zurueckhaltende Form wie .btn-textual,
   nur kompakter, damit die Leiste flach bleibt. */
.consent__btn {
  flex: 0 0 auto;
  padding: .8rem 1.5rem;
  border: var(--rule);
  background: transparent;
  font: inherit;
  font-size: .715rem;
  letter-spacing: .175em;
  text-transform: uppercase;
  color: var(--graphite);
  cursor: pointer;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.consent__btn:hover { background-color: rgba(85, 81, 75, .07); }

@media (max-width: 720px) {
  .consent { padding: 0 var(--space-2xs) var(--space-2xs); }
  .consent__inner { transform: none; padding: 1.1rem 1.2rem 1.2rem; }
  .consent__btn { width: 100%; }
}

/* Widerruf im Fussbereich. Sieht aus wie die Links daneben, ist aber ein
   Button - er oeffnet den Dialog erneut, statt irgendwohin zu fuehren.
   Bleibt versteckt, solange es nichts zu widerrufen gibt. */
.footer-links__btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: from-font;
  cursor: pointer;
}
.footer-links__btn:hover { color: var(--graphite); }