/* Zeichenfabrik -- Startseite, sektionsspezifische Stile. Die seitenübergreifende Kurskachel
   (.kurs-karte* etc.) und das Bild-Platzhalter-Muster (.bild-platzhalter*) leben in basis.css --
   werden auch von der Kursübersicht und der Kursdetailseite genutzt. */

/* ---- Hero ---- */
.hero {
  padding: 48px 24px;
  display: grid;
  gap: 32px;
  border-bottom: 1px solid var(--farbe-rand);
}
.hero-absatz { margin-top: 26px; font-size: 19px; line-height: 1.55; color: #4A463F; max-width: 30em; }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.hero-bild-platzhalter {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--farbe-rand);
  padding: 16px;
}
.hero-bild-platzhalter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Der Bildwechsel (Crossfade) lebt seit Fall 250 in basis.css — Startseite und Kursseite. */
.hero-rahmen {
  position: absolute;
  top: 22px; left: 22px;
  width: calc(100% - 44px); height: calc(100% - 44px);
  fill: none;
  stroke: var(--farbe-terrakotta);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
/* .bild-caption (vertikale Bildunterschrift) lebt jetzt in basis.css -- seitenübergreifend
   genutzt (Hero-Bilder, Dozentenportraits), siehe Kommentar dort. */

@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 0; padding: 0; }
  .hero-text { padding: 72px 56px 64px; }
  .hero-bild-platzhalter { min-height: 520px; aspect-ratio: auto; border: none; border-left: 1px solid var(--farbe-rand); }
}

/* ---- Der Weg ---- */
.der-weg { padding: 48px 24px 56px; border-bottom: 1px solid var(--farbe-rand); }
/* Die Reihe .weg-schritte und die Spalten .nummern-spalte stehen in basis.css (Werkbank 375). */
@media (min-width: 1024px) {
  .der-weg { padding: 56px 56px 60px; }
}

/* ---- Featured Kurse ---- */
.featured-kurse, .featured-dozenten { padding: 48px 24px 56px; border-bottom: 1px solid var(--farbe-rand); }
.sektion-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.sektion-kopf h2 { margin: 0; }
/* Das Kachel-Raster der Kurse `.kurs-karten` und die Karte der Kursleitung `.dozenten-karten` stehen
   in basis.css (Werkbank 374 bzw. 411). */
@media (min-width: 1024px) {
  .featured-kurse, .featured-dozenten { padding: 56px 56px 64px; }
}
/* ---- Werkwand „Eigene Striche.“ (Werkbank 409, Design-Übergabe 22.10.2026, Variante A1 „Dunkle Wand“) ----
   Arbeiten aus den Kursen hängen wie im Atelier an einer dunklen Wand: weißes Papier, Klebestreifen in
   Terrakotta, Hellteal und Beige, Notiz in Caveat (Kurs + Monat), höchstens zwei Bleistiftnotizen.
   Neun feste Plätze am Desktop, sechs am Handy. Welche Arbeit an welchen Platz kommt, rechnet der
   Server (katalog/werkwand.py). Kicker, Tuschestrich und Fokusring kommen aus basis.css. */
.werkwand {
  background: var(--farbe-footer);
  position: relative;
  overflow: hidden;                  /* Blätter dürfen über den Rand laufen, gewollt */
  color: #EFE9DE;
}
.werkwand-text { position: relative; z-index: 6; padding: 64px 24px 0; }
.werkwand-text .kicker { margin-bottom: 12px; }
.werkwand-text h2 {
  color: var(--farbe-creme);
  font-size: 54px;
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0 0 28px;
}
.werkwand-text p:not(.kicker) { color: #C4BCAC; font-size: 17px; line-height: 1.6; margin: 0 0 24px; max-width: 26em; }
.werkwand .ww-weiter {
  color: var(--farbe-creme); font-weight: 600; font-size: 15px; text-decoration: none;
  display: inline-flex; align-items: center;
  border-bottom: 1px solid var(--farbe-footer-label); padding-bottom: 3px;
}
.werkwand .ww-weiter:hover { border-color: var(--farbe-creme); }
.werkwand .ww-weiter .pfeil-hand { margin-left: 8px; }

.werkwand-wand {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 36px auto 0;
  aspect-ratio: 390 / 960;           /* Handy-Komposition */
  container-type: size;              /* cqh: die Höhe der Wand für den Raum je Platz */
  --unterschrift: 90px;              /* drei Zeilen Kursname + Monat + Klebestreifen darunter */
}
.ww-blatt {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  transform: rotate(var(--r));
  display: block;
  color: inherit;
  text-decoration: none;
  z-index: 1;
}
.ww-blatt img {
  display: block; width: 100%; height: auto;   /* height:auto: die Maße am Bild nur fürs Verhältnis (CLS) */
  background: #fff; padding: 6px; box-sizing: border-box;
  box-shadow: 0 2px 2px rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.35);
}
/* Klebestreifen: der Baustein `.klebestreifen` (basis.css); die Farbe je Platz vergibt der Server
   (katalog/werkwand.py, PLATZ_STREIFEN), Neigung und Größe stehen hier als Maßangabe. */
/* ⚠️ KEINE UNTERSCHRIFT WIRD ÜBERKLEBT (Inhaber 22.10.2026: „es ist ok, wenn Beschriftungen unten aus
   dem Band fallen, es ist aber nicht gut, wenn Beschriftungen überklebt werden“). Jeder Platz mit einem
   Blatt darunter kennt den Raum bis dorthin (--raum, in Prozent der Wandhöhe); ist ein Werk dafür zu
   hoch, wird das Blatt schmaler — im selben Verhältnis, mittig auf dem Platz, nie beschnitten. --v ist
   Breite : Höhe des Werks (vom Server). Plätze ohne Blatt darunter haben keinen Deckel. */
.ww-blatt figure {
  margin: 0 auto;
  width: min(100%, calc((var(--raum, 1000) * 1cqh - var(--unterschrift)) * var(--v, 1)));
}
.ww-blatt figcaption {
  font-family: var(--schrift-hand); font-size: 18px; line-height: 1.05;
  color: #EFE9DE; margin: 7px 0 0 3px;
}
/* Höchstens drei Zeilen Kursname — der Raum je Platz (--unterschrift) ist genau dafür bemessen. Live
   heißen Kurse bis zu fünf Zeilen lang („Tiefdruck für Neugierige Zeichnerisches Arbeiten mit Nadel &
   Säure“); lokal hatten die Probekurse kurze Namen, die erste Messung sah das nicht. */
.ww-titel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ww-blatt figcaption small {
  display: block; margin-top: 3px;
  font-family: var(--schrift-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--farbe-footer-label);
}

/* Bleistiftnotiz mit Pfeil (höchstens zwei je Wand). Standard: über dem Blatt, Pfeil nach unten;
   auf Platz 1 am Desktop links neben dem Blatt, Pfeil nach rechts. */
.ww-notiz {
  position: absolute; z-index: 8; display: none;
  bottom: 100%; left: 2%; margin-bottom: 22px; transform: rotate(-5deg);
  font-family: var(--schrift-hand); font-size: 22px; line-height: 1; white-space: nowrap;
  color: var(--farbe-terrakotta);
  pointer-events: none;
}
.ww-notiz svg { position: absolute; overflow: visible; }
.ww-notiz path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ww-notiz .ww-pfeil-unten  { display: none; left: 100%; top: 8px; width: 48px; height: 36px; margin-left: 4px; }
.ww-notiz .ww-pfeil-rechts { display: none; left: 100%; top: -12px; width: 140px; height: 50px; margin-left: 8px; }

/* Handy und Tablet (bis 1023): sechs Plätze */
.ww-platz-1 { --x: 6.15%;  --y: 2.08%;  --w: 50.26%; --r: -2.4deg; }
.ww-platz-2 { --x: 54.87%; --y: 7.71%;  --w: 44.1%;  --r: 2.2deg;  --band-r: -5deg; }
.ww-platz-3 { --x: 60.51%; --y: 31.25%; --w: 34.87%; --r: 3deg;   --band-r: -5deg; }
.ww-platz-4 { --x: 48.72%; --y: 59.9%;  --w: 48.72%; --r: 1.6deg;  --band-r: -5deg; }
.ww-platz-5 { --x: -3.59%; --y: 42.71%; --w: 51.28%; --r: -2deg; }
.ww-platz-6 { --x: 5.64%;  --y: 77.6%;  --w: 41.03%; --r: -1.6deg; }
.ww-platz-5 figcaption { margin-left: 22px; }   /* Platz 5 ragt links aus dem Bild */
/* Raum bis zum Blatt darunter (Abstand der oberen Kanten): 1 → 5, 2 → 3, 3 → 4, 5 → 6. */
.ww-platz-1 { --raum: 40.6; }
.ww-platz-2 { --raum: 23.5; }
.ww-platz-3 { --raum: 28.6; }
.ww-platz-5 { --raum: 34.9; }
.ww-platz-7, .ww-platz-8, .ww-platz-9 { display: none; }
.ww-platz-2 .ww-notiz { display: block; }        /* Notiz am Handy nur auf Platz 2 */
.werkwand-fuss { position: relative; z-index: 6; padding: 8px 24px 72px; }
.werkwand .ww-weiter--oben { display: none; }

/* Desktop (ab 1024): neun Plätze, Text links in der Komposition 1440 : 1000 */
@media (min-width: 1024px) {
  .werkwand-buehne {
    position: relative;
    width: 100%; max-width: 1600px; margin: 0 auto;
    aspect-ratio: 1440 / 1000;
  }
  .werkwand-text { position: absolute; left: 3.9%; top: 11%; width: 25%; padding: 0; }
  .werkwand-text h2 { font-size: clamp(52px, 5.56vw, 88px); margin-bottom: 30px; }
  .werkwand .ww-weiter--oben { display: inline-flex; }
  .werkwand-fuss { display: none; }
  .werkwand-wand { position: absolute; inset: 0; max-width: none; margin: 0; aspect-ratio: auto; --unterschrift: 118px; }
  .ww-blatt img { padding: 10px; }
  .ww-blatt { --band-breite: 64px; --band-hoehe: 20px; }
  .ww-blatt figcaption { font-size: 24px; margin: 10px 0 0 6px; }
  .ww-blatt figcaption small { font-size: 10.5px; }
  .ww-notiz { font-size: 30px; }
  .ww-notiz .ww-pfeil-unten { display: block; }
  .ww-platz-1 { --x: 32.64%; --y: 9.6%;  --w: 25%;    --r: -2.2deg; }
  .ww-platz-1 { --band-breite: 84px; --band-hoehe: 24px; }
  .ww-platz-2 { --x: 61.11%; --y: -4%;   --w: 26.39%; --r: 1.6deg; }
  .ww-platz-3 { --x: 89.58%; --y: 7%;    --w: 17.36%; --r: 3deg; }
  .ww-platz-4 { --x: 59.72%; --y: 42%;   --w: 20.83%; --r: -1.4deg; --band-r: 4deg; }
  .ww-platz-5 { --x: 83.33%; --y: 46%;   --w: 14.58%; --r: 2.4deg; }
  .ww-platz-6 { --x: 34.72%; --y: 69%;   --w: 18.75%; --r: 1.8deg; }
  .ww-platz-7 { --x: 4.44%;  --y: 64%;   --w: 17.36%; --r: -2.6deg; --band-r: 4deg; display: block; }
  .ww-platz-8 { --x: 79.86%; --y: 79%;   --w: 20.14%; --r: -1.2deg; --band-r: 4deg; display: block; }
  .ww-platz-9 { --x: 54.86%; --y: 80%;   --w: 18.06%; --r: 2deg; display: block; }
  .ww-platz-8 figcaption, .ww-platz-9 figcaption { display: none; }   /* laufen unten aus dem Bild */
  /* Raum bis zum Blatt darunter: 1 → 6, 2 → 4, 3 → 5, 4 → 8, 5 → 8; 6–9 stehen unten. */
  .ww-platz-1 { --raum: 59.4; }
  .ww-platz-2 { --raum: 46; }
  .ww-platz-3 { --raum: 39; }
  .ww-platz-4 { --raum: 37; }
  .ww-platz-5 { --raum: 33; }
  .ww-platz-2 .ww-notiz { display: none; }
  .ww-platz-1 .ww-notiz, .ww-platz-4 .ww-notiz, .ww-platz-6 .ww-notiz, .ww-platz-7 .ww-notiz { display: block; }
  .ww-platz-1 .ww-notiz {
    bottom: auto; left: auto; right: 100%; top: 86%;
    margin: 0 160px 0 0; transform: rotate(-4deg);
    color: var(--farbe-teal-hell);
  }
  .ww-platz-1 .ww-notiz .ww-pfeil-unten  { display: none; }
  .ww-platz-1 .ww-notiz .ww-pfeil-rechts { display: block; }
}

/* ---- Zitatband (Werkbank 407, Design-Übergabe 22.10.2026, vom Inhaber freigegeben) ----
   Ersetzt den Spartenkasten mit Porträt. Aufbau wie die Stimmen-Karte (.testimonial-karte):
   Kicker, das Caveat-„ absolut oben links halb hinter dem Kicker, die Person mit Terrakotta-
   Strich. Bewusst anders: das Zeichen in Creme (auf Hellteal wäre Hellteal unsichtbar), 150 px
   statt 74 (gleiches Verhältnis zur Zitatgröße). Kicker und Fokus kommen aus basis.css (eine
   Quelle) -- hier nur, wo sie sitzen. */
.zitatband {
  background: var(--farbe-teal-hell);
  padding: 64px 24px 60px;
  position: relative;
}
/* Alle Zitate liegen übereinander in EINER Rasterzelle: Das Band ist so hoch wie das längste
   Zitat der Auswahl und springt beim Wechsel nie. Unsichtbare Folien behalten ihr Layout
   (visibility, nicht display) -- so misst tusche.js auch ihre Striche. */
.zitatband-buehne { display: grid; }
.zitatband-folie {
  grid-area: 1 / 1;
  align-self: center;   /* vertikal mittig (Werkbank 409): kurze Folien stehen nicht mehr oben */
  margin: 0;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.zitatband-folie.ist-aktiv {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease .25s, visibility 0s;
}
/* Das Zeichen kommt aus dem Stilblatt, nicht aus dem Text (Werkbank 412): Schmuck, kein Inhalt — als
   Text zählte es für den Kontrast (1,6 : 1) und stand im Seitentext. */
.zitatband-zeichen::before { content: "„"; }
.zitatband-zeichen {
  position: absolute;
  top: -34px;
  left: -14px;
  font-family: var(--schrift-hand);
  font-size: 110px;
  line-height: .4;
  color: var(--farbe-creme);
  pointer-events: none;
  user-select: none;
}
/* Der Kicker liegt über dem Zeichen, wie .testimonial-label. */
.zitatband .kicker { position: relative; margin: 0 0 18px; }
.zitatband blockquote {
  position: relative;
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: #152B2A;
  letter-spacing: -.02em;
  max-width: 20em;
  /* pretty statt balance (Inhaber-Befund 22.10.2026): Mit einer Markierung als unteilbarem Block
     rechnete balance in manchen Browsern schief — „Zeichnen“ stand allein in der ersten Zeile. */
  text-wrap: pretty;
}
.zitatband figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-top: 26px;
}
.zitatband-autor {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--schrift-hand);
  font-size: 28px;
  color: #22403F;
}
.zitatband-strich { width: 28px; height: 2px; background: var(--farbe-terrakotta); flex: 0 0 auto; }
.zitatband-link {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: #22403F;
  display: inline-flex;
  align-items: center;
}
.zitatband-link:hover { color: #152B2A; }
/* ---- Der Kunstfakt — Spielart derselben Folie (Werkbank 409, Entwurf der Recherche, freigegeben
   22.10.2026): „Gewusst?“ in Handschrift statt „, Text halbfett und kleiner, die Quelle in Mono
   statt der Person. Das „Gewusst?“ in Terrakotta dunkel — das helle Terrakotta hatte auf Hellteal nur
   2,4 : 1 Kontrast, unter den 3 : 1 für große Schrift (Inhaber 23.10.2026, nach dem Befund der Recherche). */
.zitatband-gewusst {
  margin: 0 0 4px;
  font-family: var(--schrift-hand); font-size: 34px; line-height: 1;
  color: var(--farbe-terrakotta-dunkel);
  transform: rotate(-3deg); transform-origin: left center;
}
.zitatband-folie--fakt .kicker { margin-bottom: 16px; }
.zitatband-folie--fakt .zitatband-text {
  font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: 0; max-width: 26em;
}
/* Die Quelle des Fakts: ausführlich (Herausgeber, „Titel“, Medium, Jahr), ohne Strich und ohne Link
   (Inhaber 23.10.2026) — am Telefon unter dem Text, ab 701 px rechts in der Unterzeile, höchstens
   halb so breit wie die Folie, damit links die Blätter-Knöpfe Platz haben. */
.zitatband-quelle {
  display: block; max-width: 46em;
  font-family: var(--schrift-mono); font-size: 12px; line-height: 1.55; letter-spacing: .03em;
  color: #22403F; text-wrap: pretty;
}
.zitatband-folie--fakt figcaption { align-items: flex-start; }
/* Die Blätter-Knöpfe (Baustein, --teal): EINMAL an fester Stelle (Inhaber 22.10.2026) — am Telefon
   unter dem Text, ab 1024 px unten links in der Höhe der Unterzeile; Blättern startet die Standzeit
   neu (zitatband.js). Bis 1023 px unter dem Text — sonst stießen sie an eine lange Quellenzeile. Ohne
   Skript bleiben sie verborgen. */
.zitatband-blaettern { margin-top: 18px; }
/* Pfeil: gemeinsamer Baustein _pfeil.html (.pfeil-hand, basis.css) */
.zitatband-link .pfeil-hand { margin-left: 8px; }
/* Anhalten (WCAG 2.2.2): für Tastatur und Bildschirmleser, unsichtbar bis zum Fokus. Der
   Fokusring kommt aus basis.css wie überall. */
.zitatband-halt {
  position: absolute; left: 24px; bottom: 16px;
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--farbe-creme); color: #22403F; border: 1px solid #22403F; padding: 6px 10px; cursor: pointer;
  opacity: 0; pointer-events: none;
}
.zitatband-halt:focus-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 701px) {
  .zitatband figcaption { flex-direction: row; justify-content: flex-end; align-items: center; gap: 36px; margin-top: 44px; }
  .zitatband-gewusst { font-size: 40px; margin-bottom: 6px; }
  .zitatband-folie--fakt .kicker { margin-bottom: 22px; }
  .zitatband-folie--fakt .zitatband-text { font-size: 30px; line-height: 1.3; letter-spacing: -.01em; }
  .zitatband-folie--fakt figcaption { justify-content: flex-end; }
  .zitatband-quelle { max-width: 50%; }
  .zitatband-autor { font-size: 34px; }
  .zitatband blockquote { font-size: 44px; }
  .zitatband-zeichen { top: -40px; left: -18px; font-size: 130px; }
}
@media (min-width: 1024px) {
  .zitatband { padding: 104px 56px 96px; }
  .zitatband-zeichen { top: -46px; left: -22px; font-size: 150px; }
  .zitatband blockquote { font-size: 58px; }
  .zitatband-halt { left: 56px; }
  .zitatband-blaettern { position: absolute; left: 56px; bottom: 96px; margin: 0; }
  .zitatband-gewusst { font-size: 44px; }
  .zitatband-folie--fakt .zitatband-text { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .zitatband-folie, .zitatband-folie.ist-aktiv { transition: none; }
}

/* ---- Mit uns arbeiten: Teamevents · Gestaltungsaufträge (Werkbank 409) ----
   Zwei Wegtafeln (Baustein in basis.css) nebeneinander, darunter die Logo-Leiste. Bis 22.10.2026
   zwei leere Rahmen (.teaser-karte) ohne Bild. */
.fuer-unternehmen { padding: 52px 20px 44px; }
.fuer-unternehmen .sektion-kopf { margin-bottom: 30px; }
.wegtafeln { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
@media (min-width: 768px) {
  .wegtafeln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (min-width: 1024px) {
  .fuer-unternehmen { padding: 80px 56px 64px; }
  .fuer-unternehmen .sektion-kopf { margin-bottom: 40px; }
  .wegtafeln { gap: 48px; }
}

/* ---- Werkwand: Weiterblättern (Werkbank 409, Inhaber 22.10.2026) ----
   Die Blätter-Knöpfe ‹ › des Hauses (Baustein in basis.css, wie bei den Stimmen), hier nur ihre
   Lage: rechts in der senkrechten Mitte des Bandes, auf allen Breiten. Keine Zählung. */
.ww-blaettern { position: absolute; z-index: 9; right: 16px; top: 50%; transform: translateY(-50%); }
.ww-kommt-von-rechts { animation: ww-von-rechts .45s ease both; }
.ww-kommt-von-links { animation: ww-von-links .45s ease both; }
@keyframes ww-von-rechts { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes ww-von-links { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
  .ww-blaettern { right: 28px; }
}