/*
  letterista.css — "Vintage-Poster / Siebdruck"-Theme
  Angelehnt an das "Il Letterista"-Referenzbild und die in Claude Design
  ausgearbeiteten Screenshots: dunkles Navy, warmes Gold, cremefarbene
  Typografie, Stempel-/Ticker-Vokabular aus dem Siebdruck-/Kino-Vorspann.
  Überschreibt ausschließlich die in base.css definierten Variablen plus
  themen-eigene Flourishes — die Struktur/Mechanik bleibt in base.css.
*/

body[data-theme="letterista"] {
  --color-bg: #16233f;
  --color-bg-alt: #1e3158;
  --color-fg: #f3ead8;
  --color-accent: #d7a83f;
  /* Zweiter Akzentton (Terrakotta/Koralle) — eigene Theme-Variable, kein
     Teil des Basis-Vertrags in base.css, nur für Letterista-Flourishes
     (bunte Badges/Pills/Sunburst), inspiriert vom Opus-Max-Farbentwurf.
     Bewusst gedeckter/dunkler als der erste Versuch (#d9603f) — "knallte
     zu sehr raus" laut Feedback. */
  --color-accent-2: #c15a3f;
  /* Dritter Akzentton (gedecktes Beere/Rot) — Version 02: nach dem
     V2_HP_CLAUDE_DESIGN_OPUS_MAX-Vergleich zusätzlich eingeführt, damit
     Pills/Badges dieselbe Farbvielfalt (4–5 Töne statt 2) wie der Entwurf
     erreichen, ohne dass eine einzelne Farbe erneut "rausknallt". */
  --color-accent-3: #a6425a;
  --font-display: "Anton", "Oswald", sans-serif;
  --font-heading: "Oswald", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-script: "Caveat", cursive;
  --radius: 3px;
  --border-width: 2px;

  background-color: var(--color-bg);
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCUyM24pIiBvcGFjaXR5PSIwLjUiLz48L3N2Zz4="),
    radial-gradient(rgba(243, 234, 216, .1) 1.5px, transparent 1.5px),
    radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 100%);
  background-size: 180px 180px, 24px 24px, 100% 100%;
  background-blend-mode: overlay, normal, multiply;
}

/* ---------- Print-Passermarken ---------- */

body[data-theme="letterista"] .print-mark {
  color: var(--color-accent);
  opacity: .45;
}

/* ---------- Masthead ---------- */

body[data-theme="letterista"] .masthead {
  background: #0e1729;
  border-bottom: var(--border-width) solid var(--color-accent);
}
body[data-theme="letterista"] .masthead__tagline {
  border-bottom: 1px solid rgba(215, 168, 63, .35);
}
/* Redaktionelle Zeile statt Rummelplatz-Ticker: kursive Serife, gedeckt,
   ruhig — Reaktion auf "Scrolltext wirkt nicht elegant". */
body[data-theme="letterista"] .masthead__tagline span {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .02em;
  font-size: clamp(.72rem, 2.6vw, .95rem);
  color: var(--color-accent);
}
/* ---------- Individuelle Szenen-Hintergründe ---------- */
/* Übernimmt das Hintergrund-Vokabular der Claude-Design-Entwürfe
   (Design_LL_V01A/B): kräftige Strahlenkränze aus außermittigen
   Ankerpunkten plus Halbton-Punktraster, alles rein aus CSS, kein
   Bild-Asset nötig. Jede Szene bekommt eine eigene Kombination aus
   Ankerpunkt, Strahlendichte und Zweit-Textur, damit die fünf Szenen
   klar unterscheidbar bleiben. */

/* Gemeinsame Sunburst-Ebene für ALLE Szenen. Zwei Dinge sind hier
   entscheidend und waren in den ersten Versuchen falsch:
   1. Der Ankerpunkt sitzt per "at X% Y%" AUSSERMITTIG (im Entwurf laufen
      die Strahlen z. B. aus der unteren linken Ecke oder von oben mittig) —
      das erzeugt die Dynamik, ein zentrierter Kranz wirkt statisch.
   2. Die Strahlen laufen randlos bis an jede Kante durch, ohne weiche
      Maske. Die Maske hatte sie vorher nach außen wegradiert, dadurch
      blieb nur ein blasser Geist übrig ("viel zu dezent").
   Farbe: warmes Anthrazit statt Gold — genau wie im Entwurf. Ton-in-Ton
   wirkt wertig, Gold auf jeder Szene wäre Kirmes. */
body[data-theme="letterista"] .scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* Hero: goldener Strahlenkranz, mittig hinter dem Namen — die einzige
   Szene mit Gold, sie ist der Auftakt und darf am kräftigsten sein.
   Schmale Speichen (2.5° gefüllt von 16° Takt = ~16% Flächenanteil) statt
   der ersten Fassung (50% Flächenanteil) — die war so dicht, dass der
   Text kaum noch lesbar war. */
body[data-theme="letterista"] section[data-scene="hero"]::before {
  background: repeating-conic-gradient(
    from 4deg at 50% 46%,
    rgba(215, 168, 63, .24) 0deg 2.5deg,
    transparent 2.5deg 16deg
  );
}

/* Über mich: Strahlen aus der unteren linken Ecke — 1:1 die Anordnung der
   "A LONG-FORM CRAFT"-Sektion aus dem Entwurf. */
body[data-theme="letterista"] section[data-scene="about"]::before {
  background: repeating-conic-gradient(
    from 272deg at 6% 96%,
    rgba(214, 206, 190, .15) 0deg 2.5deg,
    transparent 2.5deg 16deg
  );
}
/* …dazu das Halbton-Punktraster aus den Creme-Sektionen des Entwurfs. */
body[data-theme="letterista"] section[data-scene="about"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(215, 168, 63, .3) 2px, transparent 2px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: -1;
}

/* Arbeiten: breitere, ruhigere Strahlen von oben rechts … */
body[data-theme="letterista"] section[data-scene="work"]::before {
  background: repeating-conic-gradient(
    from 100deg at 94% 4%,
    rgba(214, 206, 190, .13) 0deg 3deg,
    transparent 3deg 18deg
  );
}
/* Version 02c: die Filmlochstreifen an den Rändern wirkten "billig" laut
   Feedback — ersetzt durch dasselbe Halbton-Punktraster-Vokabular wie bei
   Über mich, nur zweifarbig (Gold/Koralle) statt einfarbig, damit die
   Szene trotzdem ihre eigene Note gegenüber "Über mich" behält. */
body[data-theme="letterista"] section[data-scene="work"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(215, 168, 63, .28) 2px, transparent 2px),
    radial-gradient(rgba(193, 90, 63, .22) 1.5px, transparent 1.5px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
  pointer-events: none;
  z-index: -1;
}

/* Workshops/Auszeichnungen: Strahlen von oben mittig — exakt der Aufbau
   der AWARDS-Sektion im Entwurf. */
body[data-theme="letterista"] section[data-scene="workshops"]::before {
  background: repeating-conic-gradient(
    from 186deg at 50% 2%,
    rgba(214, 206, 190, .15) 0deg 2.5deg,
    transparent 2.5deg 16deg
  );
}
/* Konfetti-Punkte in Gold/Koralle, passend zum Preis-Thema. */
body[data-theme="letterista"] section[data-scene="workshops"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(215, 168, 63, .38) 3px, transparent 3px),
    radial-gradient(rgba(193, 90, 63, .32) 2.5px, transparent 2.5px);
  background-size: 54px 54px, 34px 34px;
  background-position: 0 0, 17px 17px;
  pointer-events: none;
  z-index: -1;
}

/* Kontakt: dichter Strahlenkranz aus der Mitte — 1:1 die "LET'S TALK"-
   Schlusssektion des Entwurfs, der lauteste Hintergrund der Seite. */
body[data-theme="letterista"] section[data-scene="contact"]::before {
  background: repeating-conic-gradient(
    from 2deg at 50% 44%,
    rgba(214, 206, 190, .17) 0deg 2.5deg,
    transparent 2.5deg 15deg
  );
}

/* ---------- Flourish-Set (Stern/Zahnrad/Farbraster) ----------
   Version 02: direkt aus dem Element-Set von V2_HP_CLAUDE_DESIGN_OPUS_MAX
   übernommen (Sunburst-Medaillons, Zahnrad-Ringe, Foto-Raster) — jede
   Szene bekommt eine eigene Auswahl/Position/Größe, damit der "viel Dichte,
   viel Arrangement"-Eindruck des Entwurfs auch im Code entsteht, nicht nur
   ein wiederholtes Hintergrundmuster. Auf schmalen Screens ausgeblendet
   (siehe Media-Query unten) — Feintuning fürs Mobile-Layout ist Ausbaustufe 2. */

body[data-theme="letterista"] .flourish-wheel {
  background: repeating-conic-gradient(
    var(--color-accent) 0deg 22.5deg,
    var(--color-bg) 22.5deg 45deg
  );
  box-shadow: 0 0 0 3px var(--color-bg);
}
body[data-theme="letterista"] .flourish-star {
  background: var(--color-accent-2);
}

/* WICHTIG: Der "Umschnitt"-Button (oben rechts) und das Wunsch-Dock (unten
   links) sind persistente Chrome-Elemente, die auf JEDER Szene an derselben
   Stelle liegen (siehe base.css). Damit sich Flourishes nicht mit ihnen
   überlappen, sitzen alle Flourishes ausschließlich in den beiden FREIEN
   Ecken — oben links und unten rechts — nie oben rechts oder unten links. */

/* Alle "top"-Werte gehen von der Masthead-Unterkante aus, alle "bottom"-
   Werte von der Szenen-Nav-Oberkante — beide sind fixe, opake Leisten
   (z-index 20) über der Szene, ohne den Offset wird die Hälfte des
   Flourishes dahinter verschluckt (in der ersten Fassung passiert). */

/* Hero: Zahnrad oben links (+ kleiner Begleitstern), großer Stern unten
   rechts — rahmt den Namen, spürbar kräftiger als Version 02a. */
body[data-theme="letterista"] .flourish-wheel--hero {
  top: calc(var(--masthead-h) + 1.5rem);
  left: clamp(1.5rem, 6vw, 4rem);
  width: 6rem;
  height: 6rem;
}
body[data-theme="letterista"] .flourish-star--hero {
  bottom: calc(var(--nav-h) + 1.75rem);
  right: clamp(1.5rem, 6vw, 4rem);
  width: 4.25rem;
  height: 4.25rem;
  transform: rotate(-12deg);
}
body[data-theme="letterista"] .flourish-star--hero-2 {
  top: calc(var(--masthead-h) + 7rem);
  left: clamp(4.5rem, 13vw, 8.5rem);
  width: 2.25rem;
  height: 2.25rem;
  background: var(--color-accent);
  transform: rotate(16deg);
}

/* Über mich: Zahnrad oben links (neben Über-mich-Panel), Stern unten
   rechts (neben Werdegang-Panel) — nimmt Bezug auf die Panels. */
body[data-theme="letterista"] .flourish-wheel--about {
  top: calc(var(--masthead-h) + 1rem);
  left: 1.5rem;
  width: 4.75rem;
  height: 4.75rem;
}
body[data-theme="letterista"] .flourish-star--about {
  bottom: calc(var(--nav-h) + 1.5rem);
  right: 1.5rem;
  width: 4rem;
  height: 4rem;
  background: var(--color-accent);
  transform: rotate(8deg);
}

/* Arbeiten: 2×2-Farbraster oben links + Stern unten rechts — vorher hatte
   die Szene nur EIN Deko-Element, jetzt ein Duo wie die anderen Szenen. */
body[data-theme="letterista"] .flourish-grid--work {
  top: calc(var(--masthead-h) + 1rem);
  left: 5rem;
  width: 4.5rem;
  height: 4.5rem;
  border: 2px solid var(--color-bg);
  transform: rotate(-4deg);
}
body[data-theme="letterista"] .flourish-grid--work span:nth-child(1) { background: var(--color-accent); }
body[data-theme="letterista"] .flourish-grid--work span:nth-child(2) { background: var(--color-accent-2); }
body[data-theme="letterista"] .flourish-grid--work span:nth-child(3) { background: var(--color-accent-3); }
body[data-theme="letterista"] .flourish-grid--work span:nth-child(4) { background: var(--color-bg-alt); }
body[data-theme="letterista"] .flourish-star--work {
  bottom: calc(var(--nav-h) + 1.5rem);
  right: clamp(2.5rem, 8vw, 5rem);
  width: 3.5rem;
  height: 3.5rem;
  transform: rotate(9deg);
}

/* Workshops/Auszeichnungen: Stern oben links, Zahnrad unten rechts — als
   Medaillon-Duo, spielt auf die Award-Medaillons im Entwurf an. */
body[data-theme="letterista"] .flourish-star--workshops {
  top: calc(var(--masthead-h) + .75rem);
  left: clamp(1.5rem, 6vw, 3.5rem);
  width: 4.25rem;
  height: 4.25rem;
}
body[data-theme="letterista"] .flourish-wheel--workshops {
  bottom: calc(var(--nav-h) + 1.25rem);
  right: clamp(.5rem, 3vw, 1.5rem);
  width: 3.75rem;
  height: 3.75rem;
}

/* Kontakt: das dichteste Trio, analog zum "LET'S TALK"-Footer — bewusst
   die verspielteste Szene der Seite, als Schlusspunkt. */
body[data-theme="letterista"] .flourish-wheel--contact {
  top: calc(var(--masthead-h) + 1.25rem);
  left: clamp(1.5rem, 6vw, 4rem);
  width: 5.25rem;
  height: 5.25rem;
}
body[data-theme="letterista"] .flourish-star--contact {
  bottom: calc(var(--nav-h) + 2rem);
  right: clamp(1.5rem, 6vw, 4rem);
  width: 5rem;
  height: 5rem;
  transform: rotate(10deg);
}
body[data-theme="letterista"] .flourish-star--contact-2 {
  top: calc(var(--masthead-h) + 5.75rem);
  left: clamp(5rem, 13vw, 9rem);
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-accent);
  transform: rotate(-15deg);
}

/* Version 04: jede Szene hat jetzt ihre eigene Set-Szene (Hero: Filmcrew,
   Über mich: Wohnzimmer/Röhrenfernseher, Arbeiten: Kinosaal, Workshops:
   Unterrichtsraum, Kontakt: Schreibtisch/Telefon) statt überall
   Kamera/Filmrolle — dasselbe Bodenlinien-Prinzip, unterschiedliche
   Motive. Deckkraft von .22 auf .30 erhöht (Wunsch nach mehr Präsenz).
   Größe weiterhin ca. 60–65% der Szenenhöhe ("slice" = wie
   background-size:cover, beschneidet an den Rändern statt zu verschwinden
   beim Verkleinern des Fensters — deshalb bleibt die generische Mobile-
   Ausblendung unten bewusst ausgenommen). z-index -1 wie der Szenen-
   Hintergrund selbst, damit die Silhouette immer hinter Formular/Text
   liegt. */
body[data-theme="letterista"] .flourish-filmset {
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + .25rem);
  width: 100%;
  height: clamp(14rem, 58vh, 30rem);
  color: var(--color-fg);
  opacity: .3;
  z-index: -1;
}

@media (max-width: 64rem) {
  /* .flourish-filmset bleibt ausdrücklich ausgenommen: die XXL-Szene soll
     beim Verkleinern/auf schmalen Screens enger beschnitten werden statt
     zu verschwinden (siehe Kommentar oben bei .flourish-filmset). */
  body[data-theme="letterista"] .flourish:not(.flourish-filmset) { display: none; }
}

/* ---------- Blockige Schatten-Headlines (Anton statt Oswald) ----------
   1:1 die Titel-Machart aus dem Entwurf (STORIES / EXPERIENCE / LET'S
   TALK): fette Plakatschrift mit hartem Versatz-Schatten statt schlichter
   Großbuchstaben-Zeile. */
body[data-theme="letterista"] h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-weight: 400;
  font-size: clamp(1.85rem, 4.6vw, 2.75rem);
  line-height: 1.3;
  color: var(--color-accent);
  text-shadow: .045em .045em 0 var(--color-bg), .08em .08em 0 var(--color-accent-2);
  margin-bottom: .7em;
}
/* Arbeiten-Szene ist jetzt die inhaltsreichste (7 Karten + Auszeichnungen)
   — kompakterer Titelabstand, damit alles ohne internes Scrollen passt. */
body[data-theme="letterista"] section[data-scene="work"] h2 {
  margin-bottom: .3em;
}

/* ---------- Hero ---------- */

/* Version 02: gefüllter Stempel statt dünnem Outline-Ring — kräftiger,
   plakativer, mit leichter Drehung wie ein aufgeklebtes Siegel statt
   einer sauberen geometrischen Linie. */
body[data-theme="letterista"] .stamp-badge {
  border: 2px solid var(--color-bg);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 6px rgba(215, 168, 63, .55);
  color: var(--color-bg);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  transform: rotate(-4deg);
}
body[data-theme="letterista"] .module--hero__name {
  color: var(--color-fg);
  text-shadow: .06em .06em 0 var(--color-accent);
}
body[data-theme="letterista"] .module--hero__tagline {
  color: var(--color-accent);
}
body[data-theme="letterista"] .module--hero__location {
  color: var(--color-fg);
}
body[data-theme="letterista"] .module--hero__clients {
  color: var(--color-accent);
  border-top-color: rgba(215, 168, 63, .5);
}

/* ---------- Überschriften & Stempel ---------- */

/* Jahre-Stempel in Koralle statt Gold — zwei unterschiedlich gefüllte
   Stempel im Bild statt zweimal derselben Farbe. */
body[data-theme="letterista"] .stamp-badge--years {
  background: var(--color-accent-2);
  color: var(--color-bg);
  border-color: var(--color-bg);
  transform: rotate(5deg);
}
body[data-theme="letterista"] .panel h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-accent);
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
/* Version 02: jede Panel-Überschrift bekommt ein kleines Zahnrad-Medaillon
   vorangestellt — macht aus der schlichten Label-Zeile ein wiederkehrendes,
   integriertes Icon-Motiv statt eines separaten Deko-Elements irgendwo in
   der Ecke. Erscheint 5× (Über mich/Kernkompetenzen/Werdegang/Workshops/
   Auszeichnungen), das allein bringt spürbar mehr "Arrangement" ins Bild. */
body[data-theme="letterista"] .panel h3::before {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--color-accent) 0deg 22.5deg, var(--color-bg-alt) 22.5deg 45deg);
  box-shadow: 0 0 0 2px var(--color-bg-alt);
}
/* Panels: asymmetrische Karten-Silhouette + minimal aufgehellter Fond
   (bg-alt statt bg) statt schlichtem Kasten — Gold/Koralle/Beere im
   3er-Rhythmus statt nur Gold/Koralle im Wechsel. */
body[data-theme="letterista"] .panel {
  background: var(--color-bg-alt);
  border-radius: 1.5em .5em 1.5em .5em;
}
body[data-theme="letterista"] .panel:nth-child(even) {
  box-shadow: .3rem .3rem 0 0 var(--color-accent-2);
  border-radius: .5em 1.5em .5em 1.5em;
}
body[data-theme="letterista"] .panel:nth-child(even) h3 {
  color: var(--color-accent-2);
}
body[data-theme="letterista"] .panel:nth-child(even) h3::before {
  background: repeating-conic-gradient(var(--color-accent-2) 0deg 22.5deg, var(--color-bg-alt) 22.5deg 45deg);
}
body[data-theme="letterista"] .panel:nth-child(3n) {
  box-shadow: .3rem .3rem 0 0 var(--color-accent-3);
}
body[data-theme="letterista"] .panel:nth-child(3n) h3 {
  color: var(--color-accent-3);
}
body[data-theme="letterista"] .panel:nth-child(3n) h3::before {
  background: repeating-conic-gradient(var(--color-accent-3) 0deg 22.5deg, var(--color-bg-alt) 22.5deg 45deg);
}

/* ---------- Kernkompetenzen / Werdegang / Arbeiten / Preise ---------- */

/* Kernkompetenzen als bunte Pill-Tags (Gold/Koralle im Wechsel) statt
   schlichter Kästchen — direkt vom Opus-Max-Farbentwurf übernommen. */
body[data-theme="letterista"] .skills-grid li,
body[data-theme="letterista"] .topic-tags li {
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-bg);
  box-shadow: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  text-align: center;
  padding: .65rem 1.15rem;
}
/* Version 02: 4er-Farbrhythmus statt Gold/Koralle im reinen Wechsel, dazu
   ein leichter Versatz/Drehwinkel je Position — direkt am bunten,
   collagenhaft gestaffelten Pill-Raster des Entwurfs orientiert. Volle
   Fläche bleibt bewusst auf Gold/Beere/Navy beschränkt, Koralle nur als
   Kontur (siehe Farb-Feedback "knallt zu sehr raus"). */
body[data-theme="letterista"] .skills-grid li:nth-child(4n+2),
body[data-theme="letterista"] .topic-tags li:nth-child(4n+2) {
  background: transparent;
  border: 2px solid var(--color-accent-2);
  color: var(--color-accent-2);
}
body[data-theme="letterista"] .skills-grid li:nth-child(4n+3),
body[data-theme="letterista"] .topic-tags li:nth-child(4n+3) {
  background: var(--color-bg);
  border: 2px solid var(--color-fg);
  color: var(--color-fg);
}
body[data-theme="letterista"] .skills-grid li:nth-child(4n+4),
body[data-theme="letterista"] .topic-tags li:nth-child(4n+4) {
  background: var(--color-accent-3);
  color: var(--color-fg);
}
body[data-theme="letterista"] .skills-grid li:nth-child(odd),
body[data-theme="letterista"] .topic-tags li:nth-child(odd) {
  transform: translateY(-.25rem) rotate(-.6deg);
}
body[data-theme="letterista"] .skills-grid li:nth-child(even),
body[data-theme="letterista"] .topic-tags li:nth-child(even) {
  transform: translateY(.2rem) rotate(.6deg);
}
/* Version 02: jede Werdegang-Station wird zur eigenen, asymmetrisch
   gerundeten Karte mit Schatten statt einer schlichten Liste mit
   Trennlinien — direkt an die nummerierten "01"-Karten aus dem Entwurf
   angelehnt, inkl. deutlich größerem Nummern-Stempel. */
body[data-theme="letterista"] .timeline {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
body[data-theme="letterista"] .timeline__item {
  border: none;
  background: var(--color-bg);
  border-radius: .4em 1.4em .4em 1.4em;
  box-shadow: .25rem .25rem 0 0 var(--color-accent);
}
body[data-theme="letterista"] .timeline__item:last-child {
  border-bottom: none;
}
body[data-theme="letterista"] .timeline__item:nth-child(even) {
  border-radius: 1.4em .4em 1.4em .4em;
  box-shadow: .25rem .25rem 0 0 var(--color-accent-2);
}
body[data-theme="letterista"] .timeline__item:nth-child(3n) {
  box-shadow: .25rem .25rem 0 0 var(--color-accent-3);
}
body[data-theme="letterista"] .timeline summary {
  padding: .85rem 1rem .85rem 3.6rem;
}
body[data-theme="letterista"] .timeline details p {
  padding: 0 1rem 1rem 3.6rem;
  margin: 0;
}
body[data-theme="letterista"] .timeline__period {
  color: var(--color-accent);
  font-family: var(--font-heading);
}
/* Deutlich größerer, kräftig gefüllter Nummern-Stempel statt kleinem
   dünnem Kreis — Gold/Koralle/Beere im 3er-Rhythmus. */
body[data-theme="letterista"] .timeline summary::before {
  left: .85rem;
  top: .7rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: .85rem;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
  box-shadow: 0 0 0 3px var(--color-bg);
}
body[data-theme="letterista"] .timeline__item:nth-child(even) summary::before {
  background: var(--color-accent-2);
  border-color: var(--color-accent-2);
}
body[data-theme="letterista"] .timeline__item:nth-child(3n) summary::before {
  background: var(--color-accent-3);
  border-color: var(--color-accent-3);
}
/* CV-Stempel-Button: Koralle statt Gold, damit er sich klar vom
   "Umschnitt gefällig?"-Button oben rechts unterscheidet, obwohl beide
   dieselbe runde Stempel-Form teilen. */
body[data-theme="letterista"] .career-cv-btn {
  font-family: var(--font-heading);
  text-transform: uppercase;
  background: var(--color-accent-2);
  color: var(--color-bg);
  border-color: var(--color-accent-2);
  box-shadow: 0 0 0 3px var(--color-bg), .2rem .2rem 0 0 rgba(0, 0, 0, .3);
}
body[data-theme="letterista"] .career-cv-btn:hover,
body[data-theme="letterista"] .career-cv-btn:focus-visible {
  background: var(--color-bg);
  color: var(--color-accent-2);
}
/* Deckende Kartenfläche, damit die Titel über dem jetzt kräftigen
   Szenen-Hintergrund (Strahlen + Filmlochstreifen) klar lesbar bleiben. */
body[data-theme="letterista"] .work-card {
  border-color: rgba(215, 168, 63, .45);
  background: var(--color-bg);
  box-shadow: .3rem .3rem 0 0 var(--color-accent);
  /* Asymmetrische Ecke statt gleichmäßigem Radius — Karten-Silhouette des
     Entwurfs statt Standard-Kasten. */
  border-radius: 1.6em .4em 1.6em .4em;
}
body[data-theme="letterista"] .work-card:nth-child(even) {
  border-color: rgba(217, 96, 63, .5);
  box-shadow: .3rem .3rem 0 0 var(--color-accent-2);
  border-radius: .4em 1.6em .4em 1.6em;
}
body[data-theme="letterista"] .work-card:nth-child(3n) {
  border-color: rgba(166, 66, 90, .55);
  box-shadow: .3rem .3rem 0 0 var(--color-accent-3);
}
body[data-theme="letterista"] .work-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
/* Version 02: jede Karte bekommt ihr eigenes kleines Stern-Medaillon oben
   rechts, statt dass nur EIN Deko-Element für die ganze Szene zuständig
   ist — pro Karte im Wechsel Gold/Koralle/Beere, leicht schräg wie
   aufgeklebt. */
body[data-theme="letterista"] .work-card {
  position: relative;
  overflow: visible;
}
body[data-theme="letterista"] .work-card::after {
  content: "";
  position: absolute;
  top: -.6rem;
  right: -.6rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color-accent);
  clip-path: polygon(
    50.0% 0.0%, 61.2% 14.6%, 79.4% 10.6%, 79.9% 29.1%, 96.6% 37.5%, 87.9% 54.1%,
    97.6% 69.1%, 79.9% 74.9%, 76.9% 93.1%, 59.2% 87.3%, 50.0% 100.0%, 40.8% 87.3%,
    23.1% 93.1%, 20.1% 74.9%, 2.4% 69.1%, 12.1% 54.1%, 3.4% 37.5%, 20.1% 29.1%,
    20.6% 10.6%, 38.8% 14.6%
  );
  transform: rotate(-8deg);
}
body[data-theme="letterista"] .work-card:nth-child(even)::after {
  background: var(--color-accent-2);
  transform: rotate(10deg);
}
body[data-theme="letterista"] .work-card:nth-child(3n)::after {
  background: var(--color-accent-3);
  transform: rotate(-14deg);
}
/* Auszeichnungen-Trenner unterhalb der Arbeiten-Karten (Version 02b: von
   Workshops hierher gewandert, gehört inhaltlich zu den Arbeiten). */
body[data-theme="letterista"] .work-awards {
  border-top-color: rgba(215, 168, 63, .35);
}
body[data-theme="letterista"] .work-awards h3 {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-accent);
  font-weight: 700;
}
body[data-theme="letterista"] .work-awards h3::before {
  content: "";
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--color-accent) 0deg 22.5deg, var(--color-bg) 22.5deg 45deg);
  box-shadow: 0 0 0 2px var(--color-bg);
}
/* Auszeichnungen als bunte Stempel-Pills mit Sunburst-Stern statt
   schlichter Outline-Chips. */
body[data-theme="letterista"] .awards-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none;
  max-width: 30rem;
}
/* Echtes CSS-Sternmedaillon statt Unicode-Glyphe — wirkt wie ein
   aufgestempeltes Siegel statt einem Schriftzeichen. */
body[data-theme="letterista"] .awards-list li::before {
  content: "";
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--color-bg);
  opacity: .85;
  clip-path: polygon(
    50.0% 0.0%, 57.0% 23.9%, 75.0% 6.7%, 69.1% 30.9%, 93.3% 25.0%, 76.1% 43.0%,
    100.0% 50.0%, 76.1% 57.0%, 93.3% 75.0%, 69.1% 69.1%, 75.0% 93.3%, 57.0% 76.1%,
    50.0% 100.0%, 43.0% 76.1%, 25.0% 93.3%, 30.9% 69.1%, 6.7% 75.0%, 23.9% 57.0%,
    0.0% 50.0%, 23.9% 43.0%, 6.7% 25.0%, 30.9% 30.9%, 25.0% 6.7%, 43.0% 23.9%
  );
}
body[data-theme="letterista"] .awards-list li:nth-child(even) {
  background: var(--color-accent-2);
}
body[data-theme="letterista"] .awards-list li:nth-child(3n) {
  background: var(--color-accent-3);
}
body[data-theme="letterista"] .awards-list li:nth-child(odd) {
  transform: rotate(-1deg);
}
body[data-theme="letterista"] .awards-list li:nth-child(even) {
  transform: rotate(1.2deg);
}

/* ---------- Formulare ---------- */

body[data-theme="letterista"] .contact-form input,
body[data-theme="letterista"] .contact-form textarea {
  border-color: rgba(215, 168, 63, .5);
}
body[data-theme="letterista"] .contact-form input::placeholder,
body[data-theme="letterista"] .contact-form textarea::placeholder {
  color: rgba(243, 234, 216, .5);
}

body[data-theme="letterista"] .contact-form button {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

/* Wunsch-Generator-Dock: bewusst als "Fremdkörper" im Gerät-Look gehalten,
   wie ein altes Terminal, das man auf das Siebdruck-Poster geklebt hat. */
body[data-theme="letterista"] .wish-dock {
  background: #0a0f0a;
  border-color: var(--color-accent);
  color: #4fe86a;
  box-shadow: .3rem .3rem 0 0 var(--color-accent);
  font-size: 1.15rem;
}
body[data-theme="letterista"] .wish-dock__label {
  color: var(--color-accent);
  font-size: 1.2rem;
  text-shadow: none;
}
body[data-theme="letterista"] .wish-dock__row {
  font-family: "VT323", var(--font-mono);
}
body[data-theme="letterista"] .wish-dock input {
  font-family: "VT323", var(--font-mono);
  font-size: 1.15rem;
  text-shadow: 0 0 6px rgba(79, 232, 106, .6);
}
body[data-theme="letterista"] .wish-dock input::placeholder {
  color: rgba(79, 232, 106, .45);
}
body[data-theme="letterista"] .wish-modal__panel {
  border-color: var(--color-accent);
}
body[data-theme="letterista"] .wish-modal__close {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
body[data-theme="letterista"] .wish-modal__close:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ---------- Szenen-Navigation ---------- */

body[data-theme="letterista"] .scene-nav {
  background: #0e1729;
  border-top: var(--border-width) solid var(--color-accent);
}
body[data-theme="letterista"] .scene-nav__counter {
  color: var(--color-accent);
  font-family: var(--font-heading);
}
body[data-theme="letterista"] .scene-nav__item {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-fg);
  border-color: transparent;
}
body[data-theme="letterista"] .scene-nav__item:hover {
  border-color: rgba(215, 168, 63, .5);
}
body[data-theme="letterista"] .scene-nav__item.is-active {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
}
body[data-theme="letterista"] .scene-nav__arrow {
  border-color: rgba(215, 168, 63, .6);
  color: var(--color-accent);
}
body[data-theme="letterista"] .scene-nav__arrow:hover:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-bg);
}
body[data-theme="letterista"] .scene-nav__arrow:disabled {
  opacity: .35;
  cursor: default;
}
body[data-theme="letterista"] .theme-random-btn {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px rgba(215, 168, 63, .55), .25rem .25rem 0 0 rgba(0, 0, 0, .35);
}
body[data-theme="letterista"] .theme-random-btn:hover {
  background: var(--color-bg);
  color: var(--color-accent);
}