/* =====================================================================
   Kuchenkonzert — „Der Aushang"

   Bewusste Ausnahme vom System „Weiße Wand, bunte Menschen", gilt nur für
   diese eine Seite (Festlegung 18.09.2026). Die Seite ist nicht ein Plakat
   mit Bild, sondern der Aushang selbst: Blätter auf einer Wand, mit
   Klebestreifen und Reißzwecke befestigt, in der Hand geschrieben, unten
   die Abrisszettel zum Mitnehmen.

   Regeln dieser Welt:
   - Tiefe entsteht nur durch Überlappung. Keine Schatten, keine Verläufe.
   - Rot ist für genau eine Aufgabe reserviert: den Eintrittssatz.
   - Schieflagen höchstens 1,5 Grad.
   - Handschrift trägt Überschriften, Karla trägt jede Angabe.

   Alles hängt unter der Wurzelklasse .aushang, damit weder Astra noch
   Elementor hineinregieren.
   ===================================================================== */

/* ---------- Schriften ----------
   Beide Familien liegen lokal in fonts/. Kein Aufruf fremder Server.
   Caveat Brush 400 (die Hand) und Karla 400/700 (jede Angabe), SIL OFL. */

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

/* ---------- Tokens ---------- */

.aushang {
  --wand: #ded7c5;        /* die Wand, an der die Blätter hängen */
  --papier: #f7f4ec;      /* Kopierpapier */
  --tinte: #17161a;
  --tinte-leise: #55524c;
  --rot: #c2183c;         /* NUR der Eintrittssatz */
  --blau: #2b3f9e;        /* die Hand */
  --gelb: #f2dc2e;        /* Textmarker — trägt die Textauswahl */
  --klebe: rgba(178, 170, 146, 0.5);
  --linie: #c3bfb4;
  --bleistift: #a9a49a;

  --hand: 'Caveat Brush', 'Segoe Script', cursive;
  --sach: 'Karla', 'Helvetica Neue', Arial, sans-serif;

  --size-display: clamp(3rem, 1.6rem + 5.6vw, 6rem);
  --size-h2: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --size-eintritt: clamp(1.5rem, 1.05rem + 1.8vw, 2.375rem);
  --size-lead: clamp(1.125rem, 1.03rem + .45vw, 1.375rem);
  --size-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --size-small: 0.875rem;

  --mass-text: 68ch;
  --mass-lead: 52ch;

  --eng: 8px;
  --normal: 24px;
  --weit: 56px;
  --raum: 96px;

  --breite: 1080px;
  --rand: 24px;

  background: var(--wand);
  color: var(--tinte);
  font-family: var(--sach);
  font-size: var(--size-body);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Die durchgehende Bezugslinie: eine Bleistiftlinie, die über die ganze
   Seite läuft und alle Blätter auf dieselbe Kante bezieht. */
.aushang::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: max(var(--rand), calc(50% - var(--breite) / 2 + 40px));
  width: 1px;
  background: var(--bleistift);
  pointer-events: none;
}

/* ---------- Grundlagen ---------- */

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

.aushang p, .aushang h1, .aushang h2, .aushang h3,
.aushang ul, .aushang ol, .aushang figure { margin: 0; }

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

/* Auch was der Browser stellt, gehört zur Seite. */
.aushang ::selection { background: var(--gelb); color: var(--tinte); }
.aushang { caret-color: var(--rot); scrollbar-color: var(--bleistift) var(--wand); }

.aushang a {
  color: var(--blau);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color .15s ease;
}
.aushang a:hover { color: var(--rot); }
.aushang a:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 3px;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }

/* ---------- Das Blatt ----------
   Jeder Abschnitt ist ein Blatt Papier an der Wand. Tiefe entsteht durch
   Überlappung, nie durch Schatten. */

.blatt {
  position: relative;
  background: var(--papier);
  padding: var(--weit) clamp(20px, 4vw, 56px) calc(var(--weit) + 8px);
  border: 1px solid var(--linie);
}
.blatt + .blatt { margin-top: var(--raum); }

.kippe-l { transform: rotate(-0.5deg); }
.kippe-r { transform: rotate(0.4deg); }

/* Der eine gestaltete Moment: beim Laden hängen sich die Blätter einmal ein
   und pendeln in ihre Schieflage. Nur Drehung, nie Deckkraft — ohne
   Animation steht sofort alles da, und auf dem Handy sieht man es genauso
   wie am Rechner. */
@keyframes einhaengen-l {
  from { transform: rotate(-2.1deg) translateY(-7px); }
  to   { transform: rotate(-0.5deg) translateY(0); }
}
@keyframes einhaengen-r {
  from { transform: rotate(1.9deg) translateY(-7px); }
  to   { transform: rotate(0.4deg) translateY(0); }
}
@keyframes einhaengen-plakat {
  from { transform: rotate(-2.6deg) translateY(-9px); }
  to   { transform: rotate(-1.1deg) translateY(0); }
}

.kippe-l { animation: einhaengen-l .62s cubic-bezier(.16, 1, .3, 1) both; }
.kippe-r { animation: einhaengen-r .62s cubic-bezier(.16, 1, .3, 1) both; }
.plakat-blatt { animation: einhaengen-plakat .62s cubic-bezier(.16, 1, .3, 1) both; }

/* Der Anschlag ist section Nummer 1, die fünf Blätter sind 2 bis 6. */
.anschlag .kippe-r { animation-delay: .10s; }
main > section:nth-of-type(2) { animation-delay: .18s; }
main > section:nth-of-type(3) { animation-delay: .24s; }
main > section:nth-of-type(4) { animation-delay: .30s; }
main > section:nth-of-type(5) { animation-delay: .36s; }
main > section:nth-of-type(6) { animation-delay: .42s; }

/* Kein gleichbreiter Stapel: die Blätter hängen unterschiedlich weit
   heraus, wie von verschiedenen Händen angeschlagen. */
.blatt-eng-r { margin-right: clamp(0px, 7vw, 104px); }
.blatt-eng-l { margin-left: clamp(0px, 9vw, 132px); }

/* Und sie überlappen einander: die Tiefe dieser Welt kommt allein daraus. */
.blatt + .blatt.blatt-drueber { position: relative; z-index: 2; margin-top: -22px; }

/* Ein Rest Klebeband von einem älteren Aushang — die leere Hälfte der
   Wand ist mitgestaltet, nicht bloß leer. */
.rest {
  position: absolute;
  top: 54px; left: -64px;
  width: 58px; height: 22px;
  background: var(--klebe);
  border-left: 1px solid rgba(140, 132, 110, .3);
  border-right: 1px solid rgba(140, 132, 110, .3);
  transform: rotate(-38deg);
  pointer-events: none;
}

/* Klebestreifen. Liegt über der Blattkante, halb daneben. */
.klebe {
  position: absolute;
  width: clamp(72px, 9vw, 104px);
  height: 26px;
  background: var(--klebe);
  border-left: 1px solid rgba(140, 132, 110, .35);
  border-right: 1px solid rgba(140, 132, 110, .35);
  pointer-events: none;
}
.klebe-ol { top: -13px; left: 26px; transform: rotate(-4deg); }
.klebe-or { top: -13px; right: 26px; transform: rotate(3.5deg); }
.klebe-ul { bottom: -13px; left: 40px; transform: rotate(2.5deg); }

/* Reißzwecke, gezeichnet — nicht als Zeichen missbraucht. */
.zwecke { position: absolute; top: -11px; left: 50%; margin-left: -11px; width: 22px; height: 22px; }

/* ---------- Kopf ---------- */

.kopf {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px var(--normal);
  padding-block: var(--normal);
}
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte); }
.marke img { width: 54px; height: auto; }
.kopf nav a { font-size: var(--size-small); }

/* ---------- Anschlag ---------- */

.anschlag {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: var(--normal);
}

.aushang h1 {
  font-family: var(--hand);
  font-size: var(--size-display);
  font-weight: 400;
  line-height: 0.92;
  color: var(--blau);
  margin-bottom: var(--normal);
  text-wrap: balance;
}

.vorspann {
  font-size: var(--size-lead);
  line-height: 1.5;
  max-width: var(--mass-lead);
}

/* Das einzige laute Element der Seite. */
.eintritt {
  display: block;
  margin-top: var(--normal);
  font-family: var(--hand);
  font-size: var(--size-eintritt);
  line-height: 1.1;
  color: var(--rot);
  max-width: 20ch;
}
/* Kürzer und schräger als der Satz darüber, damit der Strich als
   Filzstiftstrich unter dem Satz liest und nicht als Unterstreichung des
   Knopfes darunter. */
.eintritt .strich {
  display: block;
  width: min(186px, 62%);
  height: 5px;
  margin-top: 12px;
  background: var(--rot);
  transform: rotate(-1.6deg);
}

/* ---------- Das Plakat ---------- */

.plakat-blatt { position: relative; transform: rotate(-1.1deg); background: var(--papier); border: 1px solid var(--linie); padding: 14px 14px 0; }
.plakat-blatt img { width: 100%; }
.plakat-blatt figcaption {
  padding: 14px 2px 18px;
  font-size: var(--size-small);
  line-height: 1.45;
  color: var(--tinte-leise);
}

/* ---------- Überschriften und Text ---------- */

.aushang h2 {
  font-family: var(--hand);
  font-size: var(--size-h2);
  font-weight: 400;
  line-height: 1.02;
  color: var(--blau);
  max-width: 22ch;
  text-wrap: balance;
}
.aushang h3 {
  font-family: var(--hand);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--tinte);
}

.text { max-width: var(--mass-text); text-wrap: pretty; }
.h2-abstand { margin-bottom: var(--normal); }

/* ---------- Die fünf Schritte ---------- */

.schritte { list-style: none; padding: 0; margin-top: var(--normal); counter-reset: schritt; max-width: var(--mass-text); }
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 16px 0 16px 62px;
  border-bottom: 1px solid var(--linie);
}
.schritte li:first-child { border-top: 1px solid var(--linie); }
.schritte li::before {
  content: counter(schritt);
  position: absolute; left: 6px; top: 10px;
  font-family: var(--hand);
  font-size: 2rem;
  line-height: 1;
  color: var(--blau);
}

/* ---------- Zwei Spalten: Text und ein Bild ---------- */

.paar {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* ---------- Fotos ----------
   Ein Foto hängt wie ein Abzug an der Wand: weißer Rand, Klebestreifen,
   leicht schief. Kein Schatten. */

.abzug { position: relative; background: var(--papier); border: 1px solid var(--linie); padding: 12px 12px 0; }
.abzug img { width: 100%; }
.abzug figcaption {
  padding: 12px 2px 16px;
  font-size: var(--size-small);
  line-height: 1.45;
  color: var(--tinte-leise);
}
.abzug-1 { transform: rotate(-0.9deg); }
.abzug-2 { transform: rotate(0.7deg); }
.abzug-3 { transform: rotate(-0.4deg); }

.abzuege {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin-top: var(--weit);
}

/* ---------- Die Angaben ---------- */

.angaben { list-style: none; padding: 0; margin-top: var(--normal); max-width: 56ch; }
.angaben li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--normal);
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
}
.angaben li:first-child { border-top: 1px solid var(--linie); }
.angaben b {
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--blau);
}

/* ---------- Der Zettel-Knopf ---------- */

.zettel {
  display: inline-block;
  margin-top: var(--weit);
  padding: 13px 22px;
  background: var(--papier);
  border: 1.5px solid var(--tinte);
  color: var(--tinte);
  font-family: var(--sach);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  transform: rotate(-0.6deg);
  transition: background-color .15s ease, color .15s ease;
}
/* Die allgemeine Link-Regel färbt beim Überfahren rot; auf dem dunklen
   Knopfgrund wäre das 3,6:1. Hier gilt sie darum ausdrücklich nicht. */
.aushang .zettel:hover { background: var(--tinte); color: var(--papier); }

/* Der zweite, leisere Zettel: derselbe Bau, nur ohne feste Kontur. */
.zettel-leise { border-style: dashed; transform: rotate(0.7deg); }

/* Wurzelklasse davor, sonst gewinnt der Reset `.aushang p { margin: 0 }` —
   dann klebt der Knopf direkt unter dem roten Strich und der Strich liest
   sich als seine Unterstreichung. */
.aushang .knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: calc(var(--weit) + 18px); }
.knopfreihe .zettel { margin-top: 0; }

/* ---------- Der Aufruf ---------- */

.aufruf h2 { max-width: 26ch; }
.aufruf .ruf {
  font-family: var(--hand);
  font-size: var(--size-eintritt);
  line-height: 1.1;
  color: var(--tinte);
  margin-top: var(--normal);
}

/* ---------- Fuß ---------- */

.fuss {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px var(--normal);
  margin-top: var(--raum);
  padding-block: var(--weit);
  border-top: 1px solid var(--bleistift);
  font-size: var(--size-small);
  color: var(--tinte-leise);
}
.fuss-marke { display: flex; align-items: center; gap: 12px; }
.fuss-marke img { width: 36px; height: auto; }
.fuss nav { display: flex; flex-wrap: wrap; gap: var(--normal); }
.fuss a { color: var(--tinte-leise); }

/* ---------- Schmale Geräte ---------- */

@media (max-width: 900px) {
  .aushang { --raum: 64px; --weit: 36px; }
  .anschlag,
  .paar { grid-template-columns: minmax(0, 1fr); }
  .aushang h2 { max-width: none; }
  .abzuege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blatt-eng-r, .blatt-eng-l { margin-inline: 0; }
  /* Neben dem Blatt ist keine Wand mehr frei, also hängt der Klebeband-Rest
     in die Lücke darüber — die leere Fläche bleibt auch hier mitgestaltet. */
  .rest { top: -44px; left: auto; right: 26px; }
  /* Das Plakat darf den Schirm nicht allein füllen — der Eintrittssatz
     muss über der Falz stehen. */
  .plakat-blatt img { max-height: 55vh; width: auto; margin-inline: auto; }
}

@media (max-width: 560px) {
  .aushang { --rand: 18px; }
  .abzuege { grid-template-columns: minmax(0, 1fr); }
  .angaben li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .blatt { padding-inline: 18px; }
  /* Die Schieflagen bleiben auch auf dem Handy. Die der Blätter regelt die
     Einhäng-Bewegung, die Abzüge behalten hier ihre eigene, kleinere. */
  .abzug-1 { transform: rotate(-0.5deg); }
  .abzug-2 { transform: rotate(0.45deg); }
  .abzug-3 { transform: rotate(-0.25deg); }
  .blatt-drueber { margin-top: -14px; }
  /* Das Plakat weiter deckeln, damit der Eintrittssatz über die Falz kommt. */
  .plakat-blatt img { max-height: 32vh; }
  .kopf { padding-block: 14px; }
  .marke img { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .aushang *, .aushang *::before, .aushang *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}

/* ---------- Druck ---------- */

@media print {
  .aushang { --raum: 28px; --weit: 18px; background: #fff; }
  .aushang::before, .klebe, .zwecke { display: none; }
  .blatt, .abzug, .plakat-blatt { border-color: #999; transform: none; }
  .aushang a { color: var(--tinte); text-decoration: none; }
}