/* ==========================================================================
   joh — Illustration & Grafik · Jenny Ohst
   Umsetzung nach Screendesign (Stand 12.08.2026)

   Schriften im Original: Miller Banner Bold (Display) + Carbona Variable (Text).
   Hier ersetzt durch die nächstliegenden freien Entsprechungen:
   Playfair Display (Scotch Roman, wie Miller) und Figtree (geometrische Sans).
   Regel aus dem Screendesign: In der Serifenschrift wird alles kleingeschrieben.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Design Tokens — Farben pixelgenau aus Jennys Bilddateien ausgelesen
   -------------------------------------------------------------------------- */
:root {
  --gruen:        #284038;   /* Hauptfarbe: Fußzeile, Logo, Text */
  --gruen-bg:     #273D38;   /* Hintergrund Startseite — exakt die Randfarbe der Illustration */
  --gruen-tief:   #1B2C26;
  --gruen-licht:  #3A544A;   /* Lichtkreis im Opener */
  --salbei:       #A8B898;   /* Skills-Kreis */
  --salbei-hell:  #C6D2B9;
  --orange:       #EA7E54;   /* Akzent: Überschriften, Glühbirne */
  --orange-tief:  #D96438;
  --blau:         #B0C8E0;   /* Flächen, Formular, vita-Titel */
  --blau-hell:    #D2E0EE;
  --blau-tief:    #8FAFCE;
  --creme:        #F6F6F0;   /* Seitenhintergrund */
  --creme-warm:   #EFEEE4;
  --weiss:        #FFFFFF;

  /* Carbona Variable ist die Originalschrift aus Jennys Screendesign und kommt
     über ihr Adobe-Fonts-Kit. Figtree bleibt als lokale Rückfallebene dahinter,
     falls das Kit nicht lädt — der Browser holt dann nur die eine benötigte Datei.
     Für die Display-Serif liegt keine Lizenz vor: Miller Banner wird weiterhin
     durch Playfair Display vertreten (beide Scotch Roman). */
  --font-display: "Playfair Display", "Miller Banner", Georgia, serif;
  --font-sans: "carbona-variable", "Figtree", "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.9rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.22vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.8rem);
  --step-5:  clamp(3.4rem, 2rem + 6vw, 7.5rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 12px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-sm: 0 2px 12px rgba(27, 44, 38, 0.09);
  --shadow-md: 0 14px 38px rgba(27, 44, 38, 0.16);
  --shadow-lg: 0 30px 74px rgba(27, 44, 38, 0.26);
}

/* --------------------------------------------------------------------------
   2 · Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  /* Carbona hat neben der Strichstärke zwei weitere Achsen: MONO (dienstliche
     Monospace-Variante) und slnt (Neigung). Beide bleiben auf 0 — die Strichstärke
     selbst wird bewusst NICHT hier gesetzt, damit font-weight normal greift. */
  font-variation-settings: "MONO" 0, "slnt" 0;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--gruen);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.15; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange); }

::selection { background: var(--orange); color: var(--creme); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 999;
  background: var(--gruen); color: var(--creme);
  padding: 0.7rem 1.2rem; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 0; color: var(--creme); }

/* --------------------------------------------------------------------------
   3 · Typografie
   Die Serifenschrift wird konsequent kleingeschrieben (Vorgabe Screendesign).
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}

.headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: lowercase;
  color: var(--orange);
  font-size: var(--step-2);
  line-height: 1.2;
  margin: 0 0 1.4rem;
}

.lead { font-size: var(--step-0); line-height: 1.75; max-width: 62ch; }

.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4 · Buttons & Links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  background: var(--gruen); color: var(--creme);
  border: 2px solid var(--gruen); border-radius: 100px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), transform 0.35s var(--ease-back);
}
.btn:hover {
  background: var(--orange); border-color: var(--orange);
  color: var(--creme); transform: translateY(-2px);
}
.btn--ghost { background: transparent; color: var(--gruen); }
.btn--ghost:hover { background: var(--gruen); border-color: var(--gruen); color: var(--creme); }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Textlink mit auslaufender Linie */
.tlink {
  font-weight: 600; text-decoration: none;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
  padding-bottom: 2px;
}
.tlink:hover { background-size: 100% 1.5px; }

/* --------------------------------------------------------------------------
   5 · Kopfzeile — schlichte Textnavigation wie im Screendesign
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  display: flex; justify-content: center;
  padding: clamp(1rem, 2.5vw, 1.75rem) var(--gutter);
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-nav { display: flex; gap: clamp(1.1rem, 3.5vw, 3rem); }
.site-nav a {
  position: relative;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--gruen);
  padding-bottom: 3px;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--orange);
  transition: right 0.35s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
.site-nav a[aria-current="page"] { font-weight: 700; }

/* --------------------------------------------------------------------------
   6 · Logo-Marke mit rotierendem Skills-Kreis
   „Das Hellgrüne soll sich um das joh langsam drehen." (Animationsvorgabe)
   -------------------------------------------------------------------------- */
.mark {
  position: relative;
  width: clamp(140px, 16vw, 210px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  margin-inline: auto;
}
.mark .ring {
  position: absolute; inset: 0;
  animation: spin 46s linear infinite;
  transform-origin: 50% 50%;
}
.mark .wordmark { position: relative; width: 46%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   7 · Fußzeile
   -------------------------------------------------------------------------- */
/* Die Fußzeile bildet ein Gesicht: die beiden Icons sind die Augen,
   der Schriftbogen darunter ist der lächelnde Mund (wie in fusszeile.png). */
.site-foot {
  background: var(--gruen);
  color: var(--creme);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  display: grid; gap: 0.9rem; justify-items: center;
  text-align: center;
}
.site-foot a { color: var(--creme); }
.site-foot a:hover { color: var(--orange); }

.foot-icons { display: flex; gap: clamp(2.5rem, 7vw, 4.5rem); }
.foot-icons a {
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease-back);
}
.foot-icons a:hover, .foot-icons a:focus-visible { transform: translateY(-5px) scale(1.14); }
/* Nicht einfärben: die Icons sind hellblaue Flächen mit ausgespartem Symbol —
   ein Weiß-Filter würde die Form zuschütten. Auf dem Dunkelgrün stehen sie
   ohnehin klar genug. */
.foot-icons img { width: clamp(30px, 3.2vw, 40px); }
.foot-claim { font-size: var(--step--1); opacity: 0.75; letter-spacing: 0.02em; }

/* Der Mund: Bogen mit den Enden nach oben */
.foot-arc { width: min(330px, 80vw); overflow: visible; margin-top: -0.6rem; }
.foot-arc text {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0.055em;
  fill: color-mix(in srgb, var(--creme) 82%, transparent);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; justify-content: center; font-size: var(--step--1); }
/* Genug Fläche zum Antippen — die Links wären sonst nur gut 20 px hoch. */
.foot-nav a { text-decoration: none; padding: 0.55rem 0.4rem; }

/* --------------------------------------------------------------------------
   8 · STARTSEITE — das Atelier als Navigation
   Jennys Illustration liegt bildfüllend, die Hotspots sitzen prozentual darauf.
   -------------------------------------------------------------------------- */
/* Die Startseite trägt den dunklen Grund bis zum Seitenrand — auch dann, wenn
   mobile Browser ihre Adressleiste ein- und ausblenden und dabei kurzzeitig
   mehr Fläche entsteht, als 100svh abdeckt. */
.seite-atelier { background: var(--gruen-bg); }

.atelier {
  position: relative;
  min-height: 100svh;
  background: var(--gruen-bg);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

/* Die Illustration bleibt immer vollständig sichtbar (Verhältnis 2251×1945 =
   1,1573) und skaliert mit dem Fenster: sie nimmt die Breite, solange die Höhe
   reicht, sonst begrenzt die Höhe. Nichts wird abgeschnitten — auch der Sessel
   unten nicht. Die Fläche ringsum trägt exakt die Randfarbe der Illustration
   (#273D38), deshalb ist keine Kante zu sehen. */
.stage-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;                                        /* Rückfall ohne Container Queries */
  width: min(100cqw, calc(100cqh * 1.1573));
  aspect-ratio: 2251 / 1945;
}
.stage-inner > img {
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Hotspots --- */
.spot {
  position: absolute;
  display: block;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.spot::after {
  /* dezenter Lichtschein beim Überfahren */
  content: "";
  position: absolute; inset: -8%;
  border-radius: 18px;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--orange) 30%, transparent), transparent 78%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.spot:hover::after, .spot:focus-visible::after, .spot.is-active::after { opacity: 1; }

.spot-label {
  position: absolute;
  left: 50%; bottom: -0.4rem;
  transform: translate(-50%, 0.6rem);
  padding: 0.3rem 0.85rem;
  background: var(--creme);
  color: var(--gruen);
  font-family: var(--font-display);
  text-transform: lowercase;
  font-weight: 700;
  font-size: clamp(0.72rem, 1.15vw, 1rem);
  line-height: 1.3;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-back);
}
.spot:hover .spot-label,
.spot:focus-visible .spot-label,
.spot.is-active .spot-label { opacity: 1; transform: translate(-50%, 1.4rem); }
.spot-label--above { bottom: auto; top: -0.4rem; transform: translate(-50%, -0.6rem); }
.spot:hover .spot-label--above,
.spot:focus-visible .spot-label--above,
.spot.is-active .spot-label--above { transform: translate(-50%, -1.4rem); }

/* Die beiden Wandbilder heben sich leicht an */
.spot--frame { transition: transform 0.5s var(--ease-back); }
.spot--frame:hover, .spot--frame:focus-visible { transform: translateY(-1.2%) rotate(-0.7deg); }
.spot--frame.spot--right:hover, .spot--frame.spot--right:focus-visible { transform: translateY(-1.2%) rotate(0.7deg); }

/* Die Lampe schwingt */
.spot--lamp { transform-origin: 50% -260%; animation: sway 8s ease-in-out infinite; }
.spot--lamp:hover, .spot--lamp:focus-visible { animation-duration: 2.6s; }
@keyframes sway {
  0%, 100% { transform: rotate(-0.7deg); }
  50%      { transform: rotate(0.7deg); }
}

/* Sessel/Kissen */
.spot--seat:hover, .spot--seat:focus-visible { transform: scale(1.015); }
.spot--seat { transition: transform 0.5s var(--ease-back); }

/* --- Aufpoppende Fotos (Vorgabe: „Foto von Lilo/mir poppt auf")
   Sie erscheinen links unterhalb des jeweiligen Rähmchens, in der freien
   dunklen Fläche neben dem Sessel. Über den Rähmchen lägen sie sonst genau
   auf den beiden Wandbildern und würden sie zudecken. --- */
.pop {
  position: absolute;
  right: 100%; left: auto;
  top: 100%; bottom: auto;
  margin-right: 0.4rem;
  width: clamp(120px, 15vw, 200px);
  transform: translate(10px, -10px) scale(0.85) rotate(-4deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.5s var(--ease-back);
  z-index: 5;
}
.spot:hover .pop, .spot:focus-visible .pop, .spot.is-active .pop {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(-4deg);
}
.pop img {
  width: 100%;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45));
}

/* Fuß der Startseite */
.atelier-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 0.9rem var(--gutter) 1.2rem;
  color: color-mix(in srgb, var(--creme) 70%, transparent);
  font-size: var(--step--1);
}
.atelier-foot a { color: inherit; text-decoration: none; }
.atelier-foot a:hover { color: var(--orange); }
.atelier-foot .hint { display: inline-flex; align-items: center; gap: 0.5rem; }
.atelier-foot .links { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Textnavigation für Touch/kleine Screens */
.fallback-nav { display: none; padding: 0 var(--gutter) 1.5rem; }
.fallback-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr);
}
.fallback-nav a {
  display: block; padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--creme) 35%, transparent);
  border-radius: var(--radius);
  color: var(--creme); text-decoration: none;
  font-family: var(--font-display); text-transform: lowercase; font-weight: 700;
  text-align: center;
}

/* --------------------------------------------------------------------------
   9 · Seitengerüst der Unterseiten
   -------------------------------------------------------------------------- */
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }

/* Seitenmarke: Jennys Logo, je Seite mit passendem Motiv.
   Die Dateien sind hochformatig (139×171) — height:auto hält das Verhältnis,
   sonst staucht das Logo. Bewusst ohne Hover-Effekt: das Logo bleibt statisch. */
.page-mark {
  width: auto;
  height: clamp(96px, 12vw, 150px);
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}

.page-intro {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.page-intro .headline { font-size: var(--step-2); }
.page-intro .lead { margin-inline: auto; }

.outro {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.outro p { font-size: var(--step-1); font-family: var(--font-display); text-transform: lowercase; }

.reveal { opacity: 1; }
.js-reveal .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   10 · GALERIE ILLUSTRATION — nach rechts, mit Verlauf am Rand
   „geht beim scrollen nach links auch in einen Verlauf"
   -------------------------------------------------------------------------- */
.rail-outer { position: relative; }
.rail-outer::before,
.rail-outer::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: clamp(40px, 9vw, 150px);
  pointer-events: none; z-index: 3;
  transition: opacity 0.4s var(--ease);
}
.rail-outer::before { left: 0;  background: linear-gradient(90deg, var(--creme), transparent); }
.rail-outer::after  { right: 0; background: linear-gradient(270deg, var(--creme), transparent); }
.rail-outer[data-at="start"]::before { opacity: 0; }
.rail-outer[data-at="end"]::after { opacity: 0; }

.rail {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--blau) transparent;
  cursor: grab;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: var(--blau); border-radius: 100px; }

.rail-inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-inline: var(--gutter);
  width: max-content;
}

/* Werk mit handgezeichnetem Rahmen (wie im Screendesign) */
.piece {
  flex: none;
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  position: relative;
}
.frame {
  position: relative;
  background: var(--creme);
  padding: clamp(10px, 1.4vw, 20px);
  transition: transform 0.5s var(--ease-back);
}
/* Der Rahmen: doppelte, leicht schiefe Linie — wirkt gezeichnet */
.frame::before {
  content: "";
  position: absolute; inset: 0;
  border: 3px solid var(--gruen);
  border-radius: 255px 12px 225px 15px / 15px 225px 15px 255px;
  pointer-events: none;
}
.frame::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1.5px solid var(--gruen);
  border-radius: 225px 15px 255px 12px / 12px 255px 12px 225px;
  opacity: 0.5;
  pointer-events: none;
}
.piece:nth-child(even) .frame::before { border-radius: 12px 255px 15px 225px / 225px 15px 255px 15px; }
.piece:hover .frame, .piece:focus-visible .frame { transform: translateY(-8px) rotate(-0.6deg); }
.piece:nth-child(even):hover .frame { transform: translateY(-8px) rotate(0.6deg); }

.frame .art { position: relative; overflow: hidden; background: var(--blau-hell); }
.frame .art img, .frame .art svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.piece[data-size="portrait"]  .art { height: min(58svh, 480px); aspect-ratio: 3 / 4; }
.piece[data-size="landscape"] .art { height: min(46svh, 380px); aspect-ratio: 4 / 3; }
.piece[data-size="square"]    .art { height: min(52svh, 430px); aspect-ratio: 1; }
.piece[data-size="wide"]      .art { height: min(40svh, 330px); aspect-ratio: 16 / 9; }
.piece[data-size="tall"]      .art { height: min(62svh, 520px); aspect-ratio: 2 / 3; }

.caption {
  margin-top: 0.8rem;
  font-family: var(--font-display); text-transform: lowercase; font-weight: 700;
  font-size: var(--step-0); color: var(--gruen);
}
.caption span {
  display: block;
  font-family: var(--font-sans); text-transform: none; font-weight: 400;
  font-size: var(--step--1); color: color-mix(in srgb, var(--gruen) 68%, transparent);
}

.ph-note {
  position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gruen);
  background: color-mix(in srgb, var(--creme) 82%, transparent);
  padding: 0.22rem 0.65rem; border-radius: 100px; white-space: nowrap;
  pointer-events: none;
}

/* Bedienleiste */
.rail-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--gutter);
  max-width: 1120px; margin: 0.5rem auto 0;
  font-size: var(--step--1);
}
.rail-bar .progress {
  flex: 1; height: 2px; background: color-mix(in srgb, var(--gruen) 16%, transparent);
  border-radius: 100px; overflow: hidden;
}
.rail-bar .progress i { display: block; height: 100%; width: 8%; background: var(--orange); transition: width 0.15s linear; }
.rail-nav { display: flex; gap: 0.4rem; }
.rail-nav button {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--gruen);
  background: transparent; color: var(--gruen); cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease-back);
}
.rail-nav button:hover:not(:disabled) { background: var(--gruen); color: var(--creme); transform: scale(1.08); }
.rail-nav button:disabled { opacity: 0.25; cursor: default; }
.rail-hint { display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap; }

/* Jennys Pfeile sind jetzt selbst die Schaltflächen — deutlich größer
   und mit Wirkung: nach rechts scrollen bzw. zur Galerie springen. */
.pfeil {
  border: 0; background: none; padding: 0.3rem; margin: 0; cursor: pointer;
  display: inline-grid; place-items: center;
  transition: transform 0.4s var(--ease-back), opacity 0.3s var(--ease);
}
.pfeil img { width: clamp(54px, 6vw, 82px); opacity: 0.85; }
.pfeil:hover img, .pfeil:focus-visible img { opacity: 1; }
.pfeil--rechts { animation: nudgeX 2.4s ease-in-out infinite; }
.pfeil--rechts:hover { animation: none; transform: translateX(8px) scale(1.08); }
.pfeil--unten { animation: nudgeY 2.4s ease-in-out infinite; }
.pfeil--unten:hover { animation: none; transform: translateY(8px) scale(1.08); }
.pfeil:disabled { opacity: 0.3; cursor: default; animation: none; }

@keyframes nudgeX { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

/* --------------------------------------------------------------------------
   11 · GALERIE GRAFIKDESIGN — nach unten, Raster mit Verlauf
   „geht beim scrollen nach oben auch in einen Verlauf"
   -------------------------------------------------------------------------- */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.grid-gallery .piece { width: 100%; }
.grid-gallery .frame .art { height: auto; width: 100%; }
.tile-a .art { aspect-ratio: 4 / 5; }
.tile-b .art { aspect-ratio: 1; }
.tile-c .art { aspect-ratio: 4 / 3; }
.tile-d .art { aspect-ratio: 3 / 4; }

.scroll-hint-down {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); color: color-mix(in srgb, var(--gruen) 70%, transparent);
}
@keyframes nudgeY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* --------------------------------------------------------------------------
   12 · ÜBER MICH
   -------------------------------------------------------------------------- */
.about-top {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* Die Porträt-PNGs sind bereits als gerahmte Kreise angelegt — sie werden
   unverändert eingebunden, ohne zusätzlichen Rahmen oder Beschnitt.
   „Beim ersten Klick schwenkt mein Bild leicht hin und her." */
.portrait {
  position: relative;
  width: min(100%, 320px);
  margin-inline: auto;
  overflow: visible;              /* damit der Sticker überstehen darf */
}
.portrait img.photo { width: 100%; height: auto; display: block; }
/* Ohne Schlagschatten: die Sticker-PNGs haben einen weißen Rand, der Schatten
   ließ diese Fläche als grauen Rahmen sichtbar werden. */
.portrait .sticker {
  position: absolute;
  width: 40%;
  right: -9%; bottom: -4%;
}
.portrait.is-waving { animation: wave 1.5s var(--ease); }
@keyframes wave {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-3.5deg); }
  40% { transform: rotate(2.8deg); }
  65% { transform: rotate(-1.8deg); }
  85% { transform: rotate(0.9deg); }
}

.portrait-pair { display: grid; gap: 1.4rem; justify-items: center; }
.portrait-small {
  position: relative;
  width: min(62%, 190px);
  overflow: visible;
}
.portrait-small img.photo { width: 100%; height: auto; display: block; }
.portrait-small .name {
  text-align: center; margin-top: 0.5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1);
  color: var(--salbei);
}

.about-name {
  font-family: var(--font-display); text-transform: lowercase; font-weight: 700;
  color: var(--orange); font-size: var(--step-3); margin: 0 0 0.5rem;
}
/* Bereiche und Leistungen sollen deutlich größer stehen */
.bereiche { width: min(100%, 520px); margin: 2.2rem 0 1.4rem; }
.skill-list {
  list-style: none; margin: 0; padding: 0;
  font-size: var(--step-1);
  line-height: 1.6;
  color: color-mix(in srgb, var(--gruen) 85%, transparent);
}
.skill-list li { display: inline; }
.skill-list li::after { content: " • "; color: var(--blau-tief); }
.skill-list li:last-child::after { content: ""; }

/* Vita-Block: „vi ta da" oben links (das PNG läuft schräg von rechts oben nach
   links unten), die Marke oben rechts, der Lebenslauf mittig-rechts darunter
   und der Strudel links daneben. */
.vita {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  grid-template-areas:
    "wort  mark"
    "wort  liste";
  gap: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* „vi ta da" läuft über beide Zeilen und steht damit neben dem Lebenslauf */
.vita-word {
  grid-area: wort;
  width: min(100%, 300px);
  justify-self: center;
  align-self: start;
  position: sticky;
  top: 6rem;
}
.vita .mark { grid-area: mark; }
.vita .timeline { grid-area: liste; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); }
.timeline .period {
  font-family: var(--font-display); text-transform: lowercase; font-weight: 700;
  color: var(--orange); font-size: var(--step-1);
  display: block; margin-bottom: 0.15rem;
}
.timeline h3 { font-size: var(--step-0); font-weight: 700; margin: 0 0 0.1rem; }
.timeline p { margin: 0; color: color-mix(in srgb, var(--gruen) 75%, transparent); font-size: var(--step-0); }
.timeline ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.timeline ul li {
  position: relative; padding-left: 1.1rem;
  color: color-mix(in srgb, var(--gruen) 70%, transparent);
  font-size: var(--step--1);
}
.timeline ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blau-tief);
}

/* --------------------------------------------------------------------------
   13 · Der Strudel — „lass uns um die ecke … denken"
   Nachbau von Jennys Screendesign-Grafik: kein runder Strudel, sondern ein
   eckiger, aus verschachtelten Rechtecken gewickelter Pfad (Ulam-Spirale),
   mit Zittern und rund geglätteten Ecken für die handgezeichnete Anmutung.
   Ablauf: zuerst steht „lass uns um die ecke" in der Mitte, dann wickelt sich
   der Strudel von innen nach außen ab, ganz zum Schluss erscheint „denken".
   Die Geometrie wird in main.js gebaut (buildSquareSpiral in drawSwirl).

   Ausnahme von der sonstigen Regel „Serifenschrift immer klein": Diese Grafik
   ist Jennys eigene Handschrift-Vorlage und dort durchgehend in Versalien —
   hier bewusst nachgebildet statt der Website-Konvention gefolgt.
   -------------------------------------------------------------------------- */
.denken { display: grid; place-items: center; padding-block: clamp(2rem, 5vw, 3.5rem); }
.denken svg { width: min(100%, 340px); overflow: visible; }

.denken .swirl {
  stroke: var(--blau);
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 2400);
  stroke-dashoffset: var(--len, 2400);
}
.denken.is-in .swirl { animation: draw 3.4s cubic-bezier(0.45, 0, 0.25, 1) 0.7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Der Text in der Mitte kommt zuerst */
.denken .core {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 20px;
  fill: var(--gruen);
  opacity: 0;
}
.denken .core--big {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0;
}
.denken.is-in .core { animation: fadeUp 0.7s var(--ease) forwards; }

/* „denken" sitzt am äußeren Ende und erscheint zuletzt */
.denken .word {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 34px;
  fill: var(--gruen);
  opacity: 0;
}
.denken.is-in .word { animation: fadeUp 0.8s var(--ease-back) 3.9s forwards; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14 · KONTAKT
   -------------------------------------------------------------------------- */
/* Kontaktdaten zentriert — das Formular ist entfallen, Anfragen laufen per Mail. */
.contact-plain {
  text-align: center;
  padding-block: clamp(1rem, 3vw, 2rem);
}

/* „icons poppen etwas auf bei Mouseover" — ohne Rahmen: die Icons bringen
   ihre eigene gerundete Form schon mit, ein Kasten drumherum wäre doppelt. */
.contact-icons { display: flex; gap: 1.4rem; justify-content: center; margin-bottom: 2.5rem; }
.contact-icons a {
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease-back);
}
.contact-icons a:hover, .contact-icons a:focus-visible { transform: translateY(-6px) scale(1.12); }
.contact-icons img { width: clamp(40px, 4vw, 52px); }

.contact-block { font-size: var(--step-0); line-height: 1.9; }
.contact-block strong { font-weight: 700; }
.contact-block + .contact-block { margin-top: 1.8rem; }

/* Die Formular-Stile (.form-card, .field, .form-note) sind entfallen, seit
   Anfragen direkt per Mail laufen. Bei Bedarf aus der Versionsgeschichte holen. */

/* --------------------------------------------------------------------------
   15 · Werk-Detail
   -------------------------------------------------------------------------- */
.sheet {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in srgb, var(--gruen-tief) 78%, transparent);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet-card {
  background: var(--creme); border-radius: 18px;
  max-width: 680px; width: 100%; max-height: 84svh; overflow-y: auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.45s var(--ease-back);
}
.sheet.is-open .sheet-card { transform: none; }
.sheet-close {
  float: right; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--gruen); background: transparent; color: var(--gruen);
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease-back);
}
.sheet-close:hover { background: var(--orange); border-color: var(--orange); color: var(--creme); transform: rotate(90deg); }
.sheet-card h2 {
  font-family: var(--font-display); text-transform: lowercase; font-weight: 700;
  color: var(--orange); font-size: var(--step-2);
}

/* --------------------------------------------------------------------------
   15b · Cookie-Monster — Wortlaut wie auf der bisherigen Website.
   Die Seite setzt keine Cookies und lädt nichts von fremden Servern
   (Schriften liegen lokal), der Hinweis merkt sich nur die Antwort.
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  left: var(--gutter); right: var(--gutter); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 300;
  max-width: 620px; margin-inline: auto;
  background: var(--gruen);
  color: var(--creme);
  border-radius: 16px;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.2rem, 3.5vw, 2rem);
  box-shadow: var(--shadow-lg);
  display: grid; gap: 0.9rem;
  transform: translateY(140%);
  transition: transform 0.6s var(--ease-back), opacity 0.4s var(--ease);
}
.cookie.is-in { transform: none; }
.cookie[hidden] { display: none; }
.cookie p {
  margin: 0;
  font-family: var(--font-display);
  text-transform: lowercase;
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.3;
}
.cookie-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie button {
  font: inherit; font-size: var(--step--1); font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 100px;
  border: 1.5px solid color-mix(in srgb, var(--creme) 55%, transparent);
  background: transparent; color: var(--creme);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.35s var(--ease-back);
}
.cookie button:hover {
  background: var(--orange); border-color: var(--orange); color: var(--creme);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   16 · Vorschau-Hinweis
   -------------------------------------------------------------------------- */
.preview-flag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.85rem; border-radius: 100px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.75;
}
.preview-flag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --------------------------------------------------------------------------
   17 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  .about-top { grid-template-columns: 1fr; }
  .vita {
    grid-template-columns: 1fr;
    grid-template-areas: "wort" "mark" "liste";
  }
  .vita-word { margin-inline: auto; position: static; }
}

@media (max-width: 780px) {
  /* min-height bleibt: sonst endet die dunkelgrüne Fläche direkt unter dem
     Inhalt und darunter scheint der helle Seitenhintergrund durch. */
  .atelier { min-height: 100svh; }
  .stage { container-type: normal; overflow: visible; }
  .stage-inner { position: static; transform: none; width: 100%; }
  .spot-label { display: none; }
  .pop { display: none; }
  .fallback-nav { display: block; }
  .atelier-foot .hint { display: none; }
  .grid-gallery { grid-template-columns: 1fr; }
  .piece[data-size] .art { height: auto; width: min(76vw, 420px); }
}

/* Sehr schmale Geräte: Der Bedienhinweis der Galerie ist auf einer Zeile
   gesetzt und würde die Leiste über den Bildschirmrand schieben. Der Pfeil
   allein sagt dasselbe. */
@media (max-width: 560px) {
  .rail-hint { font-size: 0; gap: 0; }
  .rail-bar { gap: 0.7rem; }
}

@media (hover: none) {
  .spot-label { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .denken .swirl { stroke-dashoffset: 0; }
  .denken .core, .denken .word { opacity: 1; }
}

@media print {
  .site-head, .site-foot, .preview-flag, .rail-bar { display: none; }
  body { background: #fff; }
}