/* ==========================================================================
   samirahobi.ch – gemeinsame Stile für alle Seiten
   Aufbau:
   1. Schriften
   2. Farben und Grundwerte (Variablen)
   3. Grundstile (hell/dunkel)
   4. Bausteine: Buttons, Sticker, Etiketten, Pfeil-Links
   5. Kopfzeile und Handy-Menü
   6. Cursor und Farbklecks
   7. Footer mit Unterschrift
   8. Startseite
   9. Unterseiten allgemein (Hero, Projekte, Abschluss-Box)
  10. Grafik
  11. Illustration
  12. Kunst (Salonhängung und Grossansicht)
  13. Über mich (Werdegang, Polaroids, Formular)
  14. Datenschutz, Impressum und Fehlerseite 404
  15. Weniger Bewegung (prefers-reduced-motion)
   ========================================================================== */


/* 1. SCHRIFTEN (lokal, nicht von Google) ---------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-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: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-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: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. FARBEN UND GRUNDWERTE ------------------------------------------------ */

:root {
  --preussisch: #10263b;   /* Grund dunkel, Text auf hell */
  --tiefsee: #17334d;      /* Flächen, Footer */
  --linie: #2d4a66;        /* Linien auf dunkel */
  --papier: #ebe5d8;       /* Text auf dunkel */
  --papier-hell: #f4f0e8;  /* Grund der hellen Seiten */
  --linie-hell: #d6cfc0;   /* Linien auf hell */
  --stein: #a7b2bd;        /* Nebentext auf dunkel */
  --grau: #4d5f70;         /* Nebentext auf hell */

  --korall: #ef6a54;       /* Grafik */
  --korall-text: #b23a26;  /* Korall als Text auf hell */
  --senf: #e6ae3c;         /* Illustration */
  --senf-text: #7a5200;
  --senf-akzent: #c98a00;
  --flieder: #b9a8e0;      /* Kunst */
  --flieder-text: #5b4a94;
  --verfuegbar: #8fd8a8;   /* Punkt «Verfügbar» auf dunkel */
  --verfuegbar-hell: #2f8f5b; /* Punkt «Verfügbar» auf hell */
  --verkauft: #9a8fb3;     /* Punkt «Verkauft» */
  --sand: #ebe4d6;         /* Zwischenfläche auf hellen Seiten */
  --sand-hell: #efe7d4;    /* Fläche Skizzenbuch */
  --blatt: #fbf8f1;        /* Papierblatt, Polaroid */

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --blob-form: 52% 48% 44% 56% / 55% 42% 58% 45%;
  --weich: cubic-bezier(.2, .7, .2, 1);
  --breite: 1360px;
}


/* 3. GRUNDSTILE ----------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Dunkle Seiten (Startseite, Über mich) */
body.dunkel { background: var(--preussisch); color: var(--papier); --hover: var(--korall); }
/* Helle Seiten (Grafik, Illustration, Kunst, Rechtliches) */
body.hell {
  background: var(--papier-hell); color: var(--preussisch); --hover: var(--korall-text);
  --btn-schatten: var(--preussisch);
}

/* Farbthema pro Seite: Akzentfarbe, Menü-Button, Handy-Menü */
body.seite-grafik {
  --akzent: var(--korall); --akzent-text: var(--korall-text); --hover: var(--korall-text);
  --menue-grund: var(--korall); --blob1: var(--papier-hell); --blob2: var(--senf);
}
body.seite-illu {
  --akzent: var(--senf); --akzent-text: var(--senf-text); --hover: var(--senf-text);
  --logo-punkt: var(--senf-akzent);
  --burger-grund: var(--senf); --menue-grund: var(--senf); --blob1: var(--papier-hell); --blob2: var(--korall);
}
body.seite-kunst {
  --akzent: var(--flieder); --akzent-text: var(--flieder-text); --hover: var(--flieder-text);
  --logo-punkt: var(--flieder-text);
  --burger-grund: var(--flieder); --menue-grund: var(--flieder); --blob1: var(--papier-hell); --blob2: var(--korall);
}
body.seite-ueber {
  --akzent: var(--korall);
  --burger-grund: var(--papier); --menue-grund: var(--papier); --blob1: var(--senf); --blob2: var(--flieder);
}
body.seite-recht {
  --akzent: var(--korall); --akzent-text: var(--korall-text);
  --burger-grund: var(--preussisch); --burger-text: var(--papier-hell);
  --menue-grund: var(--preussisch); --menue-text: var(--papier-hell); --menue-hover: var(--korall);
  --menue-zu-text: var(--preussisch);
  --menue-knopf: var(--korall); --menue-knopf-text: var(--preussisch);
  --blob1: var(--korall); --blob2: var(--flieder);
}

a { color: inherit; }
a:hover { color: var(--hover); }

img { max-width: 100%; }

/* Versteckte Elemente bleiben versteckt, auch wenn eine Klasse display setzt */
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--serif); }

:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

.inhalt { max-width: var(--breite); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Nur für Bildschirmleser sichtbar */
.nur-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.kursiv { font-style: italic; font-weight: 500; }


/* 4. BAUSTEINE ------------------------------------------------------------ */

/* Runde Buttons mit Versatz-Schatten beim Hover */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 99px;
  background: var(--btn-grund, var(--korall)); color: var(--btn-text, var(--preussisch));
  font-weight: 700; text-decoration: none;
  transition: transform .25s ease-out, box-shadow .25s ease-out;
}
.btn:hover {
  color: var(--btn-text, var(--preussisch));
  transform: translate(-3px, -3px) rotate(-1.5deg);
  box-shadow: 5px 5px 0 var(--btn-schatten, var(--papier));
}
.btn--klein { min-height: 44px; padding: 0 22px; }
.btn--gross { min-height: 56px; padding: 0 30px; }
.btn--rahmen { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.btn--rahmen:hover { color: inherit; box-shadow: 5px 5px 0 var(--korall); }
.btn--dunkel { --btn-grund: var(--preussisch); --btn-text: var(--papier-hell); }
button.btn { border: 0; font-family: inherit; font-size: inherit; cursor: pointer; }

/* Link mit Unterstrich und Pfeil, der beim Hover nach rechts rutscht */
.pfeil-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--farbe, var(--korall));
}
.pfeil-link .pfeil { display: inline-block; transition: transform .25s ease-out; }
.pfeil-link:hover .pfeil { transform: translateX(6px); }

/* Gedrehte Etikette, z. B. «01 · Grafik» */
.etikette {
  display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 99px;
  background: var(--farbe, var(--korall)); color: var(--preussisch);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transform: rotate(var(--dreh, -3deg));
}

/* Kleine Überschrift in Grossbuchstaben */
.oberzeile {
  margin: 0 0 16px; font-size: 14px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--farbe, inherit);
}

/* Sticker (gedrehtes Schildchen mit hartem Schatten) */
.sticker {
  margin: 0; padding: 10px 18px; border-radius: 12px;
  background: var(--papier); color: var(--preussisch);
  font-weight: 700; font-size: 14px;
  transform: rotate(var(--dreh, 4deg));
  box-shadow: 4px 4px 0 var(--schatten, var(--korall));
}
.sticker--wackeln { animation: wackeln 5s ease-in-out infinite; }
@keyframes wackeln { 50% { transform: rotate(var(--wackel, 9deg)) scale(1.06); } }

/* Morphender Blob */
.morph { animation: morph 9s ease-in-out infinite; }
@keyframes morph {
  0%, 100% { border-radius: 52% 48% 44% 56% / 55% 42% 58% 45%; }
  33% { border-radius: 40% 60% 58% 42% / 46% 58% 42% 54%; }
  66% { border-radius: 58% 42% 40% 60% / 60% 40% 60% 40%; }
}


/* 5. KOPFZEILE UND HANDY-MENÜ -------------------------------------------- */

.kopfzeile {
  max-width: var(--breite); margin: 0 auto; padding: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.logo {
  font-family: var(--serif); font-weight: 800; font-size: 26px; letter-spacing: -.02em;
  text-decoration: none;
}
.logo span { color: var(--logo-punkt, var(--korall)); }

.hauptnav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px;
  font-weight: 500; font-size: 16px;
}
.hauptnav a:not(.btn) {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none;
}
/* Aktuelle Seite als farbige Pille */
.hauptnav a[aria-current="page"] {
  padding: 0 14px; border-radius: 99px; background: var(--farbe, var(--papier));
  color: var(--preussisch); font-weight: 700;
}
.hauptnav a[aria-current="page"] .punkt { background: var(--preussisch); }

.punkt { width: 10px; height: 10px; border-radius: 99px; background: var(--farbe); flex: none; }

.burger {
  display: none; width: 52px; height: 52px; border-radius: 99px; border: 0;
  background: var(--burger-grund, var(--korall)); color: var(--burger-text, var(--preussisch));
  align-items: center; justify-content: center; cursor: pointer;
  transition: transform .25s ease-out;
}
.burger:hover { transform: rotate(-6deg); }

@media (max-width: 860px) {
  .hauptnav { display: none; }
  .burger { display: inline-flex; }
}

/* Vollflächiges Handy-Menü, öffnet als Kreis aus dem Button */
.handymenue {
  position: fixed; inset: 0; z-index: 50; overflow: auto;
  display: flex; flex-direction: column;
  background: var(--menue-grund, var(--korall)); color: var(--menue-text, var(--preussisch));
  animation: menue-auf .7s var(--weich) both;
}
@keyframes menue-auf {
  from { clip-path: circle(0% at calc(100% - 46px) 46px); }
  to { clip-path: circle(150% at calc(100% - 46px) 46px); }
}
body.menue-offen { overflow: hidden; }

.handymenue__blob1 {
  position: absolute; top: -90px; right: -110px; width: 320px; height: 320px;
  border-radius: var(--blob-form); background: var(--blob1, var(--senf)); transform: rotate(18deg);
}
.handymenue__blob2 {
  position: absolute; bottom: 90px; left: -70px; width: 200px; height: 200px;
  border-radius: 99px; background: var(--blob2, var(--flieder));
}
.handymenue__blob3 {
  position: absolute; bottom: 220px; right: -40px; width: 120px; height: 120px;
  border-radius: 99px; background: var(--korall);
}
.handymenue__welle { position: absolute; right: 24px; bottom: 210px; width: 150px; height: 45px; }
.handymenue__kopf {
  position: relative; display: flex; align-items: center; justify-content: space-between; padding: 24px;
}
.handymenue__kopf .logo span { color: var(--papier); }
.handymenue__zu {
  width: 52px; height: 52px; border-radius: 99px; border: 0;
  background: var(--menue-text, var(--preussisch)); color: var(--menue-zu-text, var(--papier));
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.handymenue nav {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 6px; padding: 16px 28px;
}
.handymenue nav a {
  color: var(--menue-text, var(--preussisch)); text-decoration: none;
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--serif); font-weight: 800; font-size: 60px; line-height: 1.05; letter-spacing: -.03em;
}
.handymenue nav a:hover { color: var(--menue-hover, var(--papier)); }
.handymenue nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px;
}
.handymenue nav .nr {
  font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .1em;
}
.handymenue nav a.handymenue__klein {
  font-weight: 500; font-size: 40px; line-height: 1.2; letter-spacing: -.02em; margin-top: 12px;
}
.handymenue__fuss {
  position: relative; padding: 24px 28px 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.handymenue__fuss .btn {
  --btn-grund: var(--menue-knopf, var(--preussisch)); --btn-text: var(--menue-knopf-text, var(--papier));
}
.handymenue__hoi {
  display: inline-block; padding: 8px 14px; border-radius: 12px;
  background: var(--papier); color: var(--preussisch);
  font-weight: 700; font-size: 14px; transform: rotate(-4deg);
}
/* Einträge fliegen nacheinander herein */
.einfliegen { animation: einfliegen .55s var(--weich) both; animation-delay: var(--v, 0s); }
@keyframes einfliegen { from { opacity: 0; transform: translateY(28px); } }


/* 6. CURSOR UND FARBKLECKS (Elemente erzeugt js/main.js) ------------------ */

.cursor-ebene {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden;
  font-family: var(--sans); color: var(--preussisch);
}
.cursor-blob {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  border-radius: var(--blob-form); background: var(--korall); opacity: 0;
  display: flex; align-items: center; justify-content: center; will-change: transform;
  transition: width .3s var(--weich), height .3s var(--weich), background-color .3s, opacity .3s;
}
.cursor-label {
  font-size: 14px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  opacity: 0; transition: opacity .2s;
}
.klecks { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }
.klecks span { position: absolute; background: currentColor; border-radius: 99px; }
.klecks span:nth-child(1) { left: -46px; top: -40px; width: 92px; height: 80px; border-radius: var(--blob-form); }
.klecks span:nth-child(2) { left: 48px; top: -54px; width: 18px; height: 18px; }
.klecks span:nth-child(3) { left: -70px; top: 22px; width: 14px; height: 14px; }
.klecks span:nth-child(4) { left: 30px; top: 46px; width: 10px; height: 10px; }


/* 7. FOOTER MIT UNTERSCHRIFT --------------------------------------------- */

.fusszeile { background: var(--tiefsee); color: var(--papier); }
.fusszeile a { color: var(--papier); }
.fusszeile__oben {
  padding-top: 56px; padding-bottom: 28px;
  display: flex; flex-wrap: wrap; gap: 36px 64px; align-items: flex-start;
}
.fusszeile__marke { flex: 999 1 280px; min-width: 0; display: flex; align-items: center; gap: 16px; }
.fusszeile__marke .logo { font-size: 24px; }
.fusszeile__spalte { flex: 1 1 140px; min-width: 0; }
.fusszeile__spalte--seiten { flex-basis: 160px; }
.fusszeile__titel {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stein);
}
.fusszeile ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; font-size: 15px;
}
.fusszeile ul a {
  display: inline-block; min-height: 28px;
  text-decoration: none; border-bottom: 1.5px solid transparent;
}
.fusszeile ul a:hover { color: var(--papier); border-bottom-color: currentColor; }
.fusszeile ul a[aria-current="page"] { font-weight: 700; }
/* Handy: Footer-Links mindestens 44 px hoch, damit man sie gut trifft */
@media (max-width: 860px) {
  .fusszeile ul { gap: 0; font-size: 16px; }
  .fusszeile ul a { display: inline-flex; align-items: center; min-height: 44px; }
}
.fusszeile__unten { padding-bottom: 32px; }
.fusszeile__unten p {
  margin: 0; padding-top: 18px; border-top: 1.5px solid var(--stein);
  font-size: 13px; color: var(--stein);
}
.fusszeile__unten a { color: inherit; }

/* Unterschrift «HOBI» schreibt sich Strich für Strich (10 s Schleife).
   Jeder Pfad hat seine Länge in --l und seine Reihenfolge in --i. */
.unterschrift { flex: none; width: 64px; height: 70px; display: block; }
.unterschrift path {
  stroke-dasharray: var(--l); stroke-dashoffset: 0;
  animation: schreiben 10s ease-in-out infinite; animation-delay: calc(var(--i) * .3s);
}
@keyframes schreiben {
  0% { stroke-dashoffset: var(--l); }
  16%, 84% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: var(--l); }
}


/* 8. STARTSEITE ------------------------------------------------------------ */

/* Hero */
.hero {
  padding-top: 40px; padding-bottom: 96px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
}
.hero__text { flex: 999 1 520px; min-width: 0; }
.hero h1 {
  margin: 0; font-weight: 800; font-size: clamp(56px, 9.5vw, 148px);
  line-height: .92; letter-spacing: -.035em;
}
.mit-linie { position: relative; display: inline-block; }
.mit-linie svg { position: absolute; left: 0; bottom: -.12em; width: 100%; height: .22em; }
.hero__gestalte {
  margin: 40px 0 0; max-width: 30ch; font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; font-weight: 400;
}
.hero__knoepfe { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__seo { margin: 32px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--stein); }

/* Wechselnde Wörter unter «Ich gestalte» */
.wechsel { display: inline-grid; font-style: italic; font-weight: 500; font-size: 1.5em; line-height: 1.15; }
.wechsel span {
  grid-area: 1 / 1; color: var(--farbe);
  opacity: 0; transform: translateY(.45em) rotate(5deg);
  transition: opacity .5s var(--weich), transform .5s var(--weich);
}
.wechsel span.ist-weg { transform: translateY(-.45em) rotate(-5deg); }
.wechsel span.ist-aktiv { opacity: 1; transform: none; }

/* Lebendiges Porträt: Blob morpht, Ebenen verschieben sich mit der Maus */
.portrait {
  flex: 1 1 380px; min-width: 0; position: relative; display: flex; justify-content: center;
  padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: inherit;
  --blob: var(--korall);
}
button.portrait { cursor: pointer; }
.portrait:focus-visible { outline: 3px solid var(--papier); outline-offset: 8px; border-radius: 40px; }
.portrait__blob {
  position: absolute; inset: 6% -4% -4% 8%;
  border-radius: var(--blob-form); transform: rotate(-6deg);
  background-color: var(--blob);
  translate: calc(var(--mx, 0) * -36px) calc(var(--my, 0) * -36px);
  transition: translate .5s var(--weich), background-color .5s;
}
.portrait:hover .portrait__blob { filter: saturate(1.15); }
.portrait__bild {
  position: relative; display: block; width: 100%; max-width: 480px; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; border: 3px solid var(--papier);
  translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 10px);
  transition: translate .5s var(--weich);
}
.portrait .sticker {
  position: absolute; bottom: 6%; right: 0;
  translate: calc(var(--mx, 0) * 30px) calc(var(--my, 0) * 30px);
  transition: translate .4s var(--weich);
}

/* Laufband */
.laufband {
  border-block: 1.5px solid var(--linie); padding: 18px 0; white-space: nowrap; overflow: hidden;
}
.laufband__spur {
  display: inline-block; font-family: var(--serif); font-weight: 600; font-size: 36px; letter-spacing: -.01em;
  animation: laufband 28s linear infinite;
}
.laufband i { font-style: normal; color: var(--farbe); }
@keyframes laufband { to { transform: translateX(-50%); } }

/* Drei Tische */
.tische { padding-top: 120px; padding-bottom: 40px; scroll-margin-top: -96px; }
.abschnitt-kopf {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 72px;
}
.abschnitt-kopf h2 {
  margin: 0; font-weight: 800; font-size: clamp(44px, 6vw, 88px); line-height: .95; letter-spacing: -.03em;
}
.abschnitt-kopf h2 .kursiv { color: var(--stein); }
.abschnitt-kopf p { margin: 0; max-width: 34ch; color: var(--stein); }

.tisch { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-bottom: 120px; }
.tisch--umgekehrt { flex-wrap: wrap-reverse; }
.tisch__bild {
  flex: 999 1 560px; min-width: 0; display: block; position: relative; overflow: hidden;
  background: var(--farbe); text-decoration: none;
}
.tisch__text { flex: 1 1 340px; min-width: 0; }
.tisch h3 {
  margin: 0 0 16px; font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.02em;
}
.tisch__text > p:not(.etikette) { margin: 0 0 28px; color: var(--stein); max-width: 38ch; }

/* Leichtes Kippen beim Hover */
.karte-hover { transition: transform .5s var(--weich); }
.karte-hover:hover { transform: scale(1.015) rotate(-.4deg); }

/* Grafik-Tisch: Bild füllt die ganze Karte */
.tisch__bild--grafik { aspect-ratio: 16 / 10; border-radius: 28px; }
.tisch__bild--grafik img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Illustrations-Tisch */
.tisch__bild--illu { aspect-ratio: 6 / 5; border-radius: 44% 56% 40% 60% / 18% 22% 18% 22%; }
.tisch__bild--illu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kunst-Tisch */
.tisch--kunst {
  gap: 64px; padding: 96px 48px; background: var(--tiefsee); border-radius: 36px;
}
.tisch__rahmen { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.tisch__rahmen a {
  display: block; width: 100%; max-width: 440px; aspect-ratio: 1 / 1;
  background: var(--flieder); padding: 22px; box-shadow: 0 30px 60px rgba(5, 15, 25, .5);
}
.tisch__rahmen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.werkdaten {
  margin: 0 0 32px; display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; font-size: 16px;
}
.werkdaten dt { color: var(--stein); }
.werkdaten dd { margin: 0; }
.status { display: inline-flex; align-items: center; gap: 8px; }
.status::before { content: ''; width: 9px; height: 9px; border-radius: 99px; background: var(--verfuegbar); }
.tisch__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.tisch__knoepfe .btn { min-height: 48px; padding: 0 24px; }

/* Kundenliste */
.kunden {
  margin-top: 72px; padding-top: 32px; border-top: 1.5px solid var(--linie);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px;
}
.kunden__titel {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stein);
}
.kunden__liste {
  margin: 0; flex: 1 1 480px; font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.4;
}
.stern { color: var(--farbe); }
.kunden__liste a { text-decoration: none; border-bottom: 1.5px solid var(--linie); }
.kunden__liste a:hover { color: inherit; border-bottom-color: currentColor; }

/* Über-mich-Teaser */
.teaser {
  padding-top: 120px; padding-bottom: 120px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 64px;
}
.teaser__bild { flex: 1 1 420px; min-width: 0; position: relative; }
.teaser__bild img {
  width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 30%;
  border-radius: 44% 56% 40% 60% / 18% 22% 18% 22%; display: block;
}
.teaser__bild .sticker {
  position: absolute; bottom: 6%; right: 4%; padding: 10px 16px;
  background: var(--korall); --dreh: -6deg; --schatten: var(--preussisch);
}
.teaser__text { flex: 999 1 480px; min-width: 0; }
.teaser h2 {
  margin: 0 0 28px; font-weight: 600; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.02em;
}
.teaser h2 em { color: var(--korall); font-weight: 600; }
.teaser__text > p:not(.oberzeile) { margin: 0 0 32px; color: var(--stein); max-width: 52ch; }

/* FAQ */
.faq { padding-bottom: 120px; display: flex; flex-wrap: wrap; gap: 48px 64px; }
.faq__kopf { flex: 1 1 300px; min-width: 0; }
.faq__kopf h2 {
  margin: 0; font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: .95; letter-spacing: -.03em;
}
.faq__kopf h2 .kursiv { color: var(--stein); }
.faq__liste {
  flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; border-top: 1.5px solid var(--linie);
}
.faq details { border-bottom: 1.5px solid var(--linie); padding: 6px 0; }
.faq summary {
  cursor: pointer; min-height: 56px; display: flex; align-items: center;
  font-family: var(--serif); font-size: 24px; font-weight: 600;
}
.faq details p { margin: 0 0 24px; max-width: 60ch; color: var(--stein); }

/* Kontakt */
.kontakt { padding-bottom: 96px; scroll-margin-top: 24px; }
.kontakt__box {
  background: var(--korall); color: var(--preussisch); border-radius: 36px;
  padding: clamp(48px, 7vw, 104px) clamp(28px, 6vw, 88px); position: relative; overflow: hidden;
}
.kontakt__blob1 {
  position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  border-radius: var(--blob-form); background: var(--senf);
}
.kontakt__blob2 {
  position: absolute; right: 140px; bottom: -60px; width: 160px; height: 160px;
  border-radius: 99px; background: var(--flieder);
}
.kontakt h2 {
  position: relative; margin: 0 0 24px; font-weight: 800;
  font-size: clamp(48px, 7.5vw, 116px); line-height: .92; letter-spacing: -.035em;
}
.kontakt__box > p { position: relative; margin: 0 0 40px; max-width: 40ch; font-size: 19px; }
.kontakt__knoepfe { position: relative; display: flex; flex-wrap: wrap; gap: 14px; }


/* 9. UNTERSEITEN ALLGEMEIN ------------------------------------------------ */

/* Hero mit Farbblob hinter dem grossen Titel */
.seitenhero {
  padding-top: 48px; padding-bottom: 96px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px 64px;
}
.seitenhero__titel { flex: 999 1 560px; min-width: 0; position: relative; }
.seitenhero__blob {
  position: absolute; left: -24px; top: 4px; width: min(560px, 90%); aspect-ratio: 2 / 1;
  border-radius: var(--blob-form); background: var(--akzent); transform: rotate(-4deg);
}
.seitenhero h1 {
  position: relative; margin: 0; font-weight: 800;
  font-size: clamp(80px, 15vw, 220px); line-height: .85; letter-spacing: -.045em;
}
.seitenhero__satz {
  position: relative; margin: 36px 0 0; max-width: 28ch; font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25;
}
.seitenhero__satz .kursiv { color: var(--akzent-text); }
.seitenhero__seite { flex: 1 1 300px; min-width: 0; position: relative; }

.oberzeile--akzent { color: var(--akzent-text); }

/* Leistungs-Pillen */
.pillen { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.pillen li { padding: 8px 16px; border-radius: 99px; border: 1.5px solid currentColor; font-weight: 700; font-size: 15px; }

/* Projekt-Kopf: grosser Titel und Projektdaten */
.projekt { padding-bottom: 140px; }
.projekt__kopf { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; margin-bottom: 48px; }
.projekttitel {
  margin: 0; font-weight: 800; font-size: clamp(56px, 8vw, 120px); line-height: .88; letter-spacing: -.04em;
}
.projekt__kopf .projekttitel { flex: 999 1 520px; min-width: 0; }
.daten { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; font-size: 16px; }
.projekt__kopf .daten { flex: 1 1 320px; min-width: 0; }
.daten dt { color: var(--grau); }
.daten dd { margin: 0; }

/* Link zu Kund:innen */
.kunde-link { text-decoration: none; border-bottom: 2px solid var(--akzent); font-weight: 700; }

/* Zwei Textspalten unter den Bildern, zweite in Grau */
.texte { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 24px 72px; }
.texte p { flex: 1 1 380px; min-width: 0; margin: 0; }
.texte p + p { color: var(--grau); }

/* Abschnittskopf mit Linie oben (Illustration, Kunst, Über mich) */
.trennkopf {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-top: 28px; border-top: 1.5px solid var(--linie-hell); margin-bottom: 56px;
}
.trennkopf h2 {
  margin: 0; font-weight: 800; font-size: clamp(44px, 6vw, 88px); line-height: .95; letter-spacing: -.03em;
}
.trennkopf > p:not(.oberzeile) { margin: 0; max-width: 40ch; color: var(--grau); }
.trennkopf .oberzeile { margin-bottom: 12px; }
.logofolio .trennkopf, .skizzen .trennkopf { border-top: 0; padding-top: 0; }

/* Innerer Rahmen für farbige Flächen über die ganze Breite */
.innen { max-width: var(--breite); margin: 0 auto; }

/* Bilder: leichter Zoom beim Hover */
.bild-hover { transition: transform .6s var(--weich); }
.bild-hover:hover { transform: scale(1.015); }

/* Produktfoto auf weissem Grund: Weiss wird zur Papierfarbe */
.produkt {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--papier-hell); border-radius: 24px; padding: 6%;
}
.produkt img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }


/* Abschluss-Box mit Button */
.abschluss { padding-bottom: 96px; }
.abschluss--abstand { padding-top: 96px; }
.abschluss__box {
  background: var(--box-grund, var(--preussisch)); color: var(--box-text, var(--papier-hell));
  border-radius: 36px; padding: clamp(48px, 7vw, 96px) clamp(28px, 6vw, 88px);
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.abschluss__blob {
  position: absolute; right: -70px; top: -90px; width: 300px; height: 300px;
  border-radius: var(--blob-form); background: var(--box-blob, var(--akzent)); opacity: var(--box-blob-deckkraft, 1);
}
.abschluss__text { position: relative; flex: 999 1 480px; min-width: 0; }
.abschluss h2 {
  margin: 0 0 20px; font-weight: 800; font-size: clamp(44px, 6.5vw, 96px); line-height: .92; letter-spacing: -.035em;
}
.abschluss h2 .kursiv { color: var(--box-kursiv, inherit); }
.abschluss__text p { margin: 0; max-width: 42ch; font-size: 19px; }
.abschluss .btn { position: relative; }

@media (max-width: 640px) {
  .abschluss__blob { top: auto; bottom: -100px; right: -90px; width: 170px; height: 170px; }
}


/* 10. GRAFIK -------------------------------------------------------------- */

/* Projektliste mit Sprunglinks */
.projektliste { padding-bottom: 96px; }
.projektliste ol { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--linie-hell); }
.projektliste li { border-bottom: 1.5px solid var(--linie-hell); }
.projektliste a {
  text-decoration: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 24px; padding: 16px 0; min-height: 44px;
}
.projektliste__name { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3vw, 40px); }
.projektliste__nr { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--akzent-text); margin-right: 16px; }
.projektliste__info { font-size: 15px; color: var(--grau); }

/* Landeposition der Sprunglinks: 24 px unter dem oberen Rand */
#lockandload { scroll-margin-top: 24px; }
#koor, #logos { scroll-margin-top: -96px; }
#onit, #nightline { scroll-margin-top: -116px; }

/* Lock and Load: Flyer als Fächer wie Karten in der Hand.
   Pro Flyer im HTML: --w Winkel, --y Absenkung, --z Ebene. --k ist die Breite eines Flyers. */
.flyerreihe {
  --k: clamp(110px, 13vw, 200px);
  display: flex; justify-content: center; padding: 24px 0 140px;
}
.flyerreihe img {
  position: relative; z-index: var(--z, 1);
  display: block; flex: none; width: var(--k); height: auto; aspect-ratio: 1 / 1.414; object-fit: cover;
  margin-left: calc(var(--k) * -.42); border-radius: 6px;
  box-shadow: 0 22px 40px -18px rgba(16, 38, 59, .5);
  transform-origin: 50% 130%;
  transform: translateY(var(--y, 0)) rotate(var(--w, 0deg));
  transition: transform .45s var(--weich), box-shadow .45s;
}
.flyerreihe img:first-child { margin-left: 0; }
.flyerreihe img:hover {
  z-index: 10;
  transform: translateY(calc(var(--y, 0px) - 40px)) rotate(0deg) scale(1.06);
  box-shadow: 0 34px 50px -16px rgba(16, 38, 59, .55);
}
.flyerreihe + .texte { margin-top: 24px; }

/* KOOR auf Korall-Fläche */
.flaeche { background: var(--akzent); padding: 120px 24px 140px; }
.flaeche .daten dt { color: inherit; }
.flaeche .kunde-link { border-bottom-color: var(--preussisch); }
.flaeche .kunde-link:hover { color: var(--papier-hell); border-bottom-color: var(--papier-hell); }
.flaeche .texte p + p { color: inherit; }
.koor-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.koor-raster .produkt { aspect-ratio: 1 / 1; }
.koor-raster .produkt--gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; position: relative; }
.koor-raster .produkt--gross img { position: absolute; inset: 6%; width: 88%; height: 88%; }

/* onit: Verpackungen versetzt */
.onit { padding-top: 140px; padding-bottom: 140px; }
.onit__aufbau { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: center; }
.onit__text { flex: 1 1 340px; min-width: 0; }
.onit__text .projekttitel { margin-bottom: 28px; }
.onit__text .daten { margin-bottom: 28px; }
.onit__text > p { margin: 0 0 16px; }
.onit__text > p:last-child { margin: 0; color: var(--grau); }
.onit-raster { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.onit-raster .produkt { aspect-ratio: 3 / 4; border-radius: 16px; padding: 0; background: var(--sand); }
.onit-raster .produkt:nth-child(even) { transform: translateY(32px); }

/* Logofolio */
.logofolio { background: var(--sand); padding: 120px 24px 140px; }
.logos {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
.logos li {
  background: var(--papier-hell); border-radius: 24px; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .35s var(--weich);
}
.logos li:hover { transform: rotate(-2deg) scale(1.03); }
.logos .produkt { aspect-ratio: 1 / 1; border-radius: 14px; background: transparent; padding: 0; }
.logos li > p { margin: 0; font-size: 15px; }
.logos li > p span { color: var(--grau); }

/* Nightline Wien */
.nightline { padding-top: 140px; padding-bottom: 120px; }
.nightline__aufbau { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: center; }
.nightline__bilder { flex: 999 1 600px; min-width: 0; }
.nightline__gross { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.nightline__klein { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nightline__klein img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
.nightline__text { flex: 1 1 340px; min-width: 0; }
.nightline__text h2 {
  margin: 0 0 28px; font-weight: 800; font-size: clamp(48px, 6vw, 88px); line-height: .9; letter-spacing: -.04em;
}
.nightline__text .etikette { margin-bottom: 20px; }
.nightline__text .daten { margin-bottom: 28px; }
.nightline__text > p { margin: 0 0 16px; }
.nightline__text > p:last-child { margin: 0; color: var(--grau); }

/* Handy: kein Fächer, sondern 2 Spalten mit leichter Drehung */
@media (max-width: 760px) {
  .flyerreihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding: 0; }
  .flyerreihe img { width: 100%; margin-left: 0; transform: rotate(calc(var(--w, 0deg) / 8)); }
  .flyerreihe img:hover { transform: rotate(calc(var(--w, 0deg) / 8)); box-shadow: 0 22px 40px -18px rgba(16, 38, 59, .5); }
  .flyerreihe + .texte { margin-top: 40px; }
}
@media (max-width: 640px) {
  .projektliste a { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
  .projekt, .onit, .nightline { font-size: 16px; }
  .koor-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .koor-raster .produkt--gross { grid-row: auto; aspect-ratio: 4 / 3; }
  .onit-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .onit-raster .produkt:nth-child(even) { transform: none; }
  .onit-raster .produkt:nth-child(3n+2) { transform: translateY(20px); }
  .nightline__text { order: -1; }
  .nightline__klein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .logos li { padding: 12px; border-radius: 18px; gap: 10px; }
  .logos li > p { font-size: 14px; }
}


/* 11. ILLUSTRATION -------------------------------------------------------- */

.seitenhero--illu .seitenhero__blob {
  left: -30px; top: 0; width: min(640px, 95%);
  border-radius: 44% 56% 40% 60% / 50% 46% 54% 50%; transform: rotate(3deg);
}
.seitenhero--illu h1 { font-size: clamp(64px, 12vw, 180px); line-height: .88; }
.seitenhero__welle { position: relative; display: block; width: min(420px, 70%); height: 26px; margin-top: 12px; }
.seitenhero--illu .seitenhero__satz { margin-top: 28px; }

/* cognitio */
.trennkopf--zeile { align-items: baseline; margin-bottom: 48px; }
.trennkopf--zeile p { margin: 0; font-size: 14px; max-width: none; }
.cognitio__aufbau { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.cognitio__text { flex: 1 1 340px; min-width: 0; }
.cognitio__text .projekttitel { margin-bottom: 24px; font-size: clamp(56px, 7vw, 104px); line-height: .9; }
.cognitio__text .daten { margin-bottom: 28px; }
.cognitio__text > p { margin: 0 0 18px; }
.punkte { color: var(--senf-akzent); }
.zitat {
  margin: 32px 0 0; padding: 20px 24px; background: var(--senf); border-radius: 20px;
  font-family: var(--serif); font-size: 22px; line-height: 1.3; font-style: italic; transform: rotate(-1deg);
}
.zitat footer { margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: 14px; font-weight: 700; }
.cognitio__bild { flex: 999 1 600px; min-width: 0; margin: 0; }
.cognitio__bild img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; border-radius: 28px; }
.bildtext { margin-top: 10px; font-size: 14px; color: var(--grau); }
.cognitio-raster {
  margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
@media (max-width: 640px) { .cognitio-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.cognitio-raster figure { margin: 0; }
.cognitio-raster img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  object-position: var(--fokus, center); border-radius: 20px;
}
.cognitio-raster figcaption { margin-top: 8px; font-size: 14px; font-weight: 700; }

/* Flyerfolio */
.flyerfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px 32px; }
.flyer { display: flex; flex-direction: column; gap: 16px; transition: transform .5s var(--weich); }
.flyer:hover { transform: translateY(-6px) rotate(-.5deg); }
.flyer img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.414; object-fit: cover; border-radius: 6px;
  box-shadow: 0 22px 40px -22px rgba(16, 38, 59, .45); transform: rotate(var(--dreh, 0deg));
}
.flyer h3 { margin: 0 0 6px; font-weight: 800; font-size: 26px; line-height: 1.1; }
.flyer p { margin: 0 0 10px; font-size: 15px; }
.flyer p:last-child { margin: 0; color: var(--grau); }
.projektart {
  display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--flieder);
  font-size: 13px; font-weight: 700;
}

/* Skizzenbuch: schräge Seiten mit Klebeband */
.skizzen { background: var(--sand-hell); padding: 120px 24px 140px; }
.skizzen .trennkopf { margin-bottom: 64px; }
.seiten { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 48px 36px; }
.seite {
  position: relative; width: var(--b, 280px); max-width: 100%; margin: 0; background: var(--blatt); padding: 8px;
  box-shadow: 0 18px 30px -16px rgba(16, 38, 59, .4); transform: rotate(var(--dreh, 0deg)) translateY(var(--y, 0));
  transition: transform .4s var(--weich);
}
.seite:hover { transform: rotate(0deg) scale(1.04); z-index: 2; }
.seite img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.klebeband {
  position: absolute; top: -12px; left: var(--x, 50%); width: 80px; height: 24px; margin-left: -40px;
  background: var(--band, rgba(230, 174, 60, .7)); transform: rotate(var(--band-dreh, -3deg));
}


/* 12. KUNST --------------------------------------------------------------- */

.seitenhero--kunst { padding-bottom: 72px; }
.seitenhero--kunst .seitenhero__blob {
  left: -40px; top: -10px; aspect-ratio: 5 / 3; transform: rotate(-5deg);
}
.seitenhero--kunst .seitenhero__satz { margin-top: 32px; max-width: 26ch; }
.schritte { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.schritte li { display: flex; gap: 14px; align-items: baseline; }
.schritte span { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--akzent-text); }

/* Filter und Massstab */
.galerie-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 1.5px solid var(--linie-hell); padding-top: 28px;
}
.filter { display: flex; flex-wrap: wrap; gap: 10px; }
.filter button, .umschalter button, .themen button {
  min-height: 44px; padding: 0 18px; border-radius: 99px; cursor: pointer;
  font: 700 15px/1 var(--sans); color: var(--preussisch);
  border: 1.5px solid #c9c0ae; background: transparent;
}
.filter button[aria-pressed="true"] { border-color: var(--flieder); background: var(--flieder); }
.massstab { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--grau); }
.massstab__balken { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.massstab__balken span:first-child {
  display: block; width: calc(var(--cm) * 50); height: 10px; border: 2px solid var(--preussisch); border-top: 0;
}
.massstab__balken span:last-child { font-weight: 700; color: var(--preussisch); font-size: 13px; }

/* Salonhängung: Breite der Bilder in echtem Verhältnis (--cm = Pixel pro Zentimeter) */
.galerie { --cm: clamp(2.1px, .25vw, 3.4px); }
.werke {
  list-style: none; margin: 0; padding: 72px 0 120px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 72px;
}
.werke li { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 100%; animation: auftauchen .45s ease-out both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(18px); } }
.werk-knopf {
  padding: 0; border: 0; background: none; cursor: zoom-in; display: block; max-width: 100%;
}
.werk-knopf:focus-visible { outline: 3px solid var(--flieder-text); outline-offset: 8px; border-radius: 4px; }
.werk {
  position: relative; display: block; max-width: 100%; width: calc(var(--cm) * var(--b));
  box-shadow: 0 22px 40px -20px rgba(16, 38, 59, .4);
  transition: transform .5s var(--weich), box-shadow .5s;
}
.werk img { display: block; width: 100%; height: auto; }
.werk-knopf:hover .werk { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 34px 50px -18px rgba(16, 38, 59, .45); }
.verkauft-sticker {
  position: absolute; top: -12px; right: -14px; padding: 5px 12px; border-radius: 99px;
  background: var(--preussisch); color: var(--papier-hell);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transform: rotate(6deg);
}
.werk-info { line-height: 1.35; }
.werk-info h2 { margin: 0; font-weight: 600; font-size: 21px; }
.werk-info p { margin: 2px 0 0; font-size: 14px; color: var(--grau); }
.werk-info .werk-status { margin-top: 6px; font-weight: 700; color: inherit; }
.werk-status { display: flex; align-items: center; gap: 8px; }
.werk-status::before {
  content: ''; width: 9px; height: 9px; border-radius: 99px; flex: none; background: var(--verfuegbar-hell);
}
.werk-status.ist-verkauft::before { background: var(--verkauft); }

/* Handy: grösserer Massstab, damit kleine Bilder nicht winzig werden */
@media (max-width: 640px) {
  .galerie { --cm: 2.9px; }
  .werke { gap: 48px 24px; padding-top: 48px; }
}

/* Grossansicht */
.grossansicht { position: fixed; inset: 0; z-index: 50; background: var(--papier-hell); overflow: auto; }
.grossansicht__innen { max-width: var(--breite); margin: 0 auto; padding: 20px 24px 48px; }
.grossansicht__knoepfe { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 20px; }
.rund-knopf {
  width: 48px; height: 48px; border-radius: 99px; border: 1.5px solid var(--preussisch);
  background: none; color: var(--preussisch); cursor: pointer; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rund-knopf--voll { border: 0; background: var(--preussisch); color: var(--papier-hell); }
.grossansicht__aufbau { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; }
.grossansicht__bildteil { flex: 999 1 520px; min-width: 0; }
.ansicht-bild { min-height: 64vh; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.ansicht-bild img {
  display: block; max-width: 100%; max-height: 64vh; width: auto; height: auto;
  box-shadow: 0 40px 70px -30px rgba(16, 38, 59, .55);
}
/* «An der Wand»: Wand 300 × 260 cm, Sofa 200 cm breit */
.wand {
  position: relative; width: 100%; max-width: calc(72vh * 300 / 260); margin: 0 auto;
  aspect-ratio: 300 / 260; background: #e9e3d7; border-radius: 24px; overflow: hidden;
}
.wand__boden { position: absolute; left: 0; right: 0; bottom: 0; height: 3%; background: #d4cab7; }
.wand__bild {
  position: absolute; box-shadow: 0 18px 30px -14px rgba(16, 38, 59, .5);
  transition: all .5s var(--weich);
}
.wand__bild img { display: block; width: 100%; height: auto; }
.sofa { position: absolute; left: 16.67%; width: 66.67%; bottom: 3%; height: 31%; }
.sofa span { position: absolute; }
.sofa span:nth-child(1) { left: 4%; right: 4%; top: 0; height: 58%; background: #5b4a94; border-radius: 22px 22px 6px 6px; }
.sofa span:nth-child(2) { left: 0; right: 0; top: 40%; height: 42%; background: #6d5ca8; border-radius: 18px; }
.sofa span:nth-child(3) { left: 0; width: 7%; top: 30%; height: 52%; background: #4a3c7d; border-radius: 16px; }
.sofa span:nth-child(4) { right: 0; width: 7%; top: 30%; height: 52%; background: #4a3c7d; border-radius: 16px; }
.sofa span:nth-child(5) { left: 8%; bottom: 0; width: 2%; height: 18%; background: var(--preussisch); }
.sofa span:nth-child(6) { right: 8%; bottom: 0; width: 2%; height: 18%; background: var(--preussisch); }
.wand__hinweis {
  position: absolute; left: 16px; bottom: 5%; margin: 0; padding: 4px 10px; border-radius: 8px;
  background: var(--papier-hell); font-size: 12px; font-weight: 700; color: var(--grau);
}
.grossansicht__info { flex: 1 1 320px; min-width: 0; }
.umschalter {
  display: inline-flex; margin-bottom: 28px; padding: 5px; border-radius: 99px;
  background: #e6dff0; box-shadow: 4px 4px 0 var(--preussisch);
}
.umschalter button { border: 0; padding: 0 20px; }
.umschalter button[aria-pressed="true"] { background: var(--flieder); }
.grossansicht__info .etikette { display: table; margin-bottom: 12px; --dreh: -2deg; }
.grossansicht__info h2 {
  margin: 0 0 24px; font-weight: 800; font-size: clamp(40px, 4.5vw, 64px); line-height: .95; letter-spacing: -.03em;
}
.grossansicht__info .daten { margin-bottom: 32px; gap: 10px 28px; }
.grossansicht__info .daten .werk-status { display: inline-flex; }
.kleingedruckt { margin: 16px 0 0; font-size: 14px; color: var(--grau); max-width: 36ch; }
.grossansicht__druck { margin-top: 24px; }

/* Kunstdrucke (vorerst «In Arbeit») */
.drucke { padding-bottom: 48px; scroll-margin-top: 24px; }
.drucke__box {
  background: var(--sand); border-radius: 36px; padding: clamp(36px, 5vw, 64px) clamp(28px, 6vw, 88px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.drucke__text { flex: 999 1 480px; min-width: 0; }
.drucke h2 { margin: 0 0 20px; font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: .95; letter-spacing: -.03em; }
.drucke h2 .kursiv { color: var(--akzent-text); }
.drucke__text > p:last-child { margin: 0; max-width: 46ch; }
.drucke__sticker {
  display: inline-block; margin-left: 10px; padding: 4px 12px; border-radius: 99px;
  background: var(--flieder); color: var(--preussisch); letter-spacing: .08em; transform: rotate(-4deg);
}
.grossansicht__info .btn { min-height: 56px; padding: 0 30px; }


/* 13. ÜBER MICH ----------------------------------------------------------- */

.ueber-hero {
  padding-top: 40px; padding-bottom: 120px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px 72px;
}
.ueber-hero__text { flex: 999 1 520px; min-width: 0; }
.ueber-hero__text .oberzeile { margin-bottom: 20px; color: var(--stein); }
.ueber-hero h1 {
  margin: 0; font-weight: 800; font-size: clamp(56px, 9vw, 140px); line-height: .9; letter-spacing: -.04em;
}
.ueber-hero__einleitung { margin: 36px 0 0; max-width: 46ch; font-size: 19px; color: #c9d0d6; }
.portrait--ueber { flex: 1 1 380px; display: block; --blob: var(--flieder); }
.portrait--ueber .portrait__blob { inset: 8% -6% -6% 6%; transform: rotate(5deg); }
.portrait--ueber .portrait__bild {
  max-width: none; object-position: 50% 30%; border-radius: 48% 52% 46% 54% / 40% 44% 56% 60%;
}
.portrait--ueber .sticker {
  bottom: 4%; left: -4%; right: auto; padding: 10px 16px;
  background: var(--korall); --dreh: -6deg; --wackel: -9deg; --schatten: var(--preussisch);
}

/* Was mich ausmacht */
.dunkel .trennkopf { border-top-color: var(--linie); }
.dunkel .trennkopf > p { color: var(--stein); }
.dunkel .trennkopf h2 { font-size: clamp(40px, 5.5vw, 80px); }
.dunkel .trennkopf h2 .kursiv { color: var(--stein); }
.eigenschaften {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
.eigenschaften li {
  background: var(--tiefsee); border-radius: 28px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.eigenschaften .nr {
  width: 56px; height: 56px; border-radius: 99px; background: var(--farbe); color: var(--preussisch);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 800; font-size: 24px;
}
.eigenschaften h3 { margin: 0; font-weight: 800; font-size: 28px; line-height: 1.1; }
.eigenschaften p { margin: 0; color: var(--stein); font-size: 16px; }

/* Werdegang als Zeitstrahl */
.werdegang { background: var(--tiefsee); padding: 120px 24px 140px; }
.werdegang__aufbau { max-width: var(--breite); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px 96px; }
.werdegang__kopf { flex: 1 1 320px; min-width: 0; }
.werdegang__kopf h2 {
  margin: 0 0 24px; font-weight: 800; font-size: clamp(40px, 5.5vw, 80px); line-height: .95; letter-spacing: -.03em;
}
.werdegang__kopf h2 .kursiv { color: var(--senf); }
.werdegang__kopf > p:last-child { margin: 0; max-width: 36ch; color: var(--stein); }
.zeitstrahl {
  flex: 999 1 560px; min-width: 0; margin: 0; padding: 0 0 0 36px; list-style: none; position: relative;
  display: flex; flex-direction: column; gap: 44px;
}
.zeitstrahl::before {
  content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--linie);
}
.zeitstrahl li { position: relative; }
.zeitstrahl li::before {
  content: ''; position: absolute; left: -36px; top: 4px; width: 25px; height: 25px; border-radius: 99px;
  background: var(--farbe); border: 4px solid var(--tiefsee);
}
.zeitstrahl li.heute::before { background: var(--preussisch); border: 3px solid var(--papier); }
.zeitstrahl__zeit { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--farbe); }
.zeitstrahl h3 { margin: 0 0 6px; font-weight: 600; font-size: 28px; line-height: 1.15; }
.zeitstrahl h3 .kursiv { color: var(--korall); }
.zeitstrahl li > p:not(.zeitstrahl__zeit) { margin: 0; color: var(--stein); font-size: 16px; }
.zeitstrahl li > p.praktikum {
  margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--korall); border-radius: 0 12px 12px 0;
  background: var(--preussisch); font-size: 15px; color: var(--papier);
}
.praktikum span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--korall); }

/* Genossenschaft omnium (in Gründung) */
.omnium { padding-top: 120px; }
.omnium__box {
  background: var(--flieder); color: var(--preussisch); border-radius: 36px;
  padding: clamp(40px, 6vw, 80px) clamp(28px, 6vw, 88px);
}
.omnium__box h2 {
  margin: 0 0 24px; font-weight: 800; font-size: clamp(40px, 5.5vw, 80px); line-height: .95; letter-spacing: -.03em;
}
.omnium__box > p:not(.oberzeile) { margin: 0; max-width: 52ch; font-size: 19px; }
.omnium__knopf { margin-top: 32px; }.omnium__name { text-transform: none; letter-spacing: .02em; font-size: 16px; }
.omnium__sticker {
  display: inline-block; margin-left: 10px; padding: 4px 12px; border-radius: 99px;
  background: var(--preussisch); color: var(--papier); letter-spacing: .08em; transform: rotate(-4deg);
}

/* Polaroids */
.privat { padding-top: 140px; padding-bottom: 140px; }
.privat__kopf { text-align: center; margin-bottom: 72px; }
.privat__kopf h2 {
  margin: 0; font-weight: 800; font-size: clamp(40px, 5.5vw, 80px); line-height: .95; letter-spacing: -.03em;
}
.privat__kopf h2 .kursiv { color: var(--flieder); }
.polaroids {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 48px 40px;
}
.polaroid {
  position: relative; width: 290px; max-width: 100%; background: var(--papier-hell); color: var(--preussisch);
  padding: 16px 16px 22px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6);
  transform: rotate(var(--dreh, 0deg)) translateY(var(--y, 0)); transition: transform .45s var(--weich);
}
.polaroid:hover { transform: rotate(0deg) scale(1.04); z-index: 2; }
.polaroid .klebeband { width: 90px; height: 26px; top: -14px; margin-left: -45px; }
.polaroid__bild { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.polaroid__titel { margin: 14px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.2; }
.polaroid__text { margin: 4px 0 0; font-size: 14px; color: var(--grau); }

/* Kundenliste nach Bereichen */
.kundenliste { padding-bottom: 140px; }
.kundenliste__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 48px; }
.kundenliste__titel {
  margin: 0 0 16px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--farbe);
}
.kundenliste__titel::before { content: ''; width: 12px; height: 12px; border-radius: 99px; background: var(--farbe); }
.kundenliste ul { margin: 0; padding: 0; list-style: none; font-family: var(--serif); font-size: 24px; line-height: 1.6; }
.kundenliste ul a { text-decoration: none; border-bottom: 1.5px solid var(--linie); }
.kundenliste ul a:hover { border-color: currentColor; }

/* Kontakt mit Formular */
.kontakt--formular .kontakt__box { padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 80px); display: flex; flex-wrap: wrap; gap: 48px 72px; }
.kontakt--formular .kontakt__blob1 { left: -90px; right: auto; top: auto; bottom: -110px; width: 280px; height: 280px; }
.kontakt__links { position: relative; flex: 1 1 320px; min-width: 0; }
.kontakt--formular h2 { font-size: clamp(48px, 6.5vw, 100px); }
.kontakt__links p { margin: 0 0 28px; max-width: 34ch; font-size: 19px; }
.kontakt__links p.klein { margin: 0 0 16px; font-size: 16px; }
.kontakt__links a { color: var(--preussisch); font-weight: 700; }
.formular-karte {
  position: relative; flex: 999 1 480px; min-width: 0; background: var(--papier-hell); border-radius: 28px;
  padding: clamp(24px, 4vw, 40px); box-shadow: 8px 8px 0 var(--preussisch);
}
.formular { display: flex; flex-direction: column; gap: 20px; }
.formular fieldset { margin: 0; padding: 0; border: 0; }
.formular legend, .formular label.feldname { display: block; padding: 0; margin-bottom: 10px; font-weight: 700; font-size: 15px; }
.formular label.feldname { margin-bottom: 6px; }
.themen { display: flex; flex-wrap: wrap; gap: 8px; }
.themen button { border-color: #bdb5a4; }
.themen button[aria-pressed="true"] { border-color: var(--farbe); background: var(--farbe); color: var(--farbe-text, var(--preussisch)); }
.formular__zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.feld {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid #bdb5a4;
  background: var(--papier-hell); color: var(--preussisch); font: 400 16px/1.5 var(--sans);
}
.feld:focus { outline: 3px solid var(--korall); outline-offset: 1px; border-color: var(--preussisch); }
.einverstanden { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--grau); }
.einverstanden input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--preussisch); flex: none; }
.einverstanden a { color: var(--preussisch); }
.formular .btn { align-self: flex-start; }
.formular__hinweis { margin: -8px 0 0; font-size: 14px; color: var(--grau); }
.formular__status { margin: 0; font-size: 15px; font-weight: 700; }


/* 14. DATENSCHUTZ, IMPRESSUM UND FEHLERSEITE 404 ------------------------ */

.recht { padding-top: 48px; padding-bottom: 96px; line-height: 1.65; }
.recht .oberzeile { color: var(--grau); }
.recht h1 {
  margin: 0 0 28px; font-weight: 800; font-size: clamp(52px, 8vw, 112px); line-height: .92; letter-spacing: -.04em;
}
.recht h1 span { color: var(--korall); }
.recht__aufbau { display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: flex-start; }
.recht__seite { flex: 1 1 280px; min-width: 0; }
.recht__box { background: var(--sand); border-radius: 24px; padding: 24px 26px; margin-bottom: 28px; }
.recht__box--korall { background: var(--korall); }
.recht__box p:first-child { margin: 0 0 10px; font-family: var(--serif); font-weight: 800; font-size: 22px; }
.recht__box p { margin: 0; font-size: 16px; }
.recht__box ul { margin: 0; padding-left: 20px; font-size: 16px; }
.inhaltsverzeichnis { font-size: 15px; }
.inhaltsverzeichnis p {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grau);
}
.inhaltsverzeichnis ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.inhaltsverzeichnis a { text-decoration: none; border-bottom: 1.5px solid var(--linie-hell); }
.inhaltsverzeichnis a:hover { border-bottom-color: var(--preussisch); }
.recht__text { flex: 999 1 560px; min-width: 0; max-width: 720px; }
.recht__einleitung { margin: 0 0 32px; font-size: 19px; }
.recht__text section { padding: 36px 0; border-top: 1.5px solid var(--linie-hell); }
.recht__text h2 {
  margin: 0 0 14px; font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.01em;
}
.recht__text section { scroll-margin-top: 24px; }
.recht__text p, .recht__text ul { margin: 0 0 14px; }
.recht__text ul { padding-left: 20px; }
.recht__text li { margin-bottom: 4px; }
.recht__stand { color: var(--grau); }


/* Fehlerseite 404 */
.fehlerseite { padding-top: 64px; padding-bottom: 140px; min-height: 60vh; }
.fehlerseite .sticker { display: inline-block; margin-bottom: 28px; --dreh: -4deg; }
.fehlerseite h1 {
  margin: 0; font-weight: 800; font-size: clamp(48px, 8vw, 120px); line-height: .92; letter-spacing: -.035em;
}
.fehlerseite h1 .kursiv { color: var(--korall); }
.fehlerseite__text { margin: 32px 0 0; max-width: 40ch; font-size: 19px; color: var(--stein); }
.fehlerseite__knoepfe { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }


/* 15. WENIGER BEWEGUNG --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .morph, .sticker--wackeln, .laufband__spur, .unterschrift path,
  .handymenue, .einfliegen, .werke li { animation: none; }
  .btn, .karte-hover, .pfeil-link .pfeil, .wechsel span, .bild-hover, .logos li,
  .flyer, .seite, .werk, .wand__bild, .polaroid, .flyerreihe img { transition: none; }
  .portrait__blob, .portrait__bild, .portrait .sticker { transition: none; translate: none; }
}