/* =========================================================================
   floriankierski.de — Bewerbungsportfolio
   Zwei Darstellungen über [data-mode]: "pixel" (Standard) und "plain".
   Kein Framework, kein Build-Schritt.
   ========================================================================= */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face{font-family:'Pixelify';src:url('/assets/fonts/pixelify-latin.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Pixelify';src:url('/assets/fonts/pixelify-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F}
@font-face{font-family:'Silkscreen';src:url('/assets/fonts/silkscreen-latin.woff2') format('woff2');
  font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Silkscreen';src:url('/assets/fonts/silkscreen-latin-ext.woff2') format('woff2');
  font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F}
@font-face{font-family:'InterVar';src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'InterVar';src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F}

/* ---------- 'PixelMix': Pixelify + geliehene Zeichen aus Silkscreen ----------
   Pixelify Sans hat zwei Glyphen, die falsch gelesen werden:
     · die Ziffer 5 sieht aus wie ein S
     · das grosse C sieht aus wie ein O  ("Certbot" -> "Oertbot")
   Beides bleibt in jeder Schriftgroesse mehrdeutig, deshalb kommen Ziffern
   (U+0030-0039) und das grosse C (U+0043) aus Silkscreen. Diese Regel muss
   ZULETZT stehen: bei ueberlappenden unicode-range gewinnt die letzte. */
@font-face{font-family:'PixelMix';src:url('/assets/fonts/pixelify-latin.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'PixelMix';src:url('/assets/fonts/pixelify-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F}
@font-face{font-family:'PixelMix';src:url('/assets/fonts/silkscreen-latin.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0030-0039,U+0043}

/* ---------- Tokens: Pixel-Modus ----------
   Palette aus Florians Character: Rot, Gold, Lavendel, Glutorange.
   Alle Textpaarungen sind auf >= 4.5:1 geprüft. */
:root{
  --sky-1:#080614; --sky-2:#1a1036; --sky-3:#2e1840; --sky-4:#42234a;
  --aurora-1:#3ba58c; --aurora-2:#7a4fd0;

  /* Tageshimmel der Hero-Szene. Bewusst getrennt von --sky-*: die Seite
     unterhalb des Heros bleibt dunkel, nur die Landschaft oben ist Tag. */
  --day-1:#2f6cba; --day-2:#5b9ad9; --day-3:#9ccbec; --day-4:#dceff8;
  --hill-far:#a3c4cc; --hill-mid:#6f9c6a; --hill-near:#54844a;

  --bg:#191233; --bg-alt:#1f1740; --bg-deep:#0d0a1c;
  --panel:#f2e6cc; --panel-2:#e5d5b2; --panel-edge:#b58f3e; --panel-shade:#cdb787;

  --ink:#2c2216; --ink-2:#5d4a33; --ink-3:#6f5c3c;
  --wood:#6d4c2e; --wood-l:#8a6440; --wood-d:#3b2c58;

  --accent:#f0c860;             /* Gold — Akzent auf dunklem Grund, 11:1 */
  --accent-2:#e85a45;           /* Glutrot aus dem Umhang */
  --accent-ink:#2a1408;
  --accent-deep:#8e2a1e;        /* Akzent auf Pergament, 6.8:1 */
  --green:#2f7d6a; --green-l:#4ac4a8;

  --glow:#ffd98a;               /* Laternen- und Fensterlicht */

  --on-dark:#eae3f5; --on-dark-2:#b9aed6;

  --r:0px;                       /* Pixel = harte Kanten */
  --bw:4px;                      /* Rahmenstärke */
  --f-display:'PixelMix',ui-monospace,monospace;
  --f-ui:'PixelMix',ui-monospace,monospace;
  --f-num:'PixelMix',ui-monospace,monospace;
  --f-body:'InterVar',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ls-ui:.06em;
  --wrap:1180px;
  --shadow-hard:6px 6px 0 rgba(0,0,0,.35);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- Tokens: Klartext-Modus ---------- */
[data-mode="plain"]{
  --sky-1:#f4f6f7; --sky-2:#f4f6f7; --sky-3:#f4f6f7; --sky-4:#f4f6f7;

  --bg:#ffffff; --bg-alt:#f5f7f7; --bg-deep:#eef1f2;
  --panel:#ffffff; --panel-2:#f6f8f8; --panel-edge:#dde3e3; --panel-shade:#e7ecec;

  --ink:#16211e; --ink-2:#4a5754; --ink-3:#6d7a77;
  --wood:#dde3e3; --wood-l:#eef1f2; --wood-d:#c6d0cf;

  --accent:#12876a; --accent-2:#0f6f57; --accent-ink:#ffffff;
  --accent-deep:#0f6f57;
  --green:#12876a; --green-l:#2aa184;

  --on-dark:#16211e; --on-dark-2:#4a5754;

  --r:10px;
  --bw:1px;
  --f-display:'InterVar',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-ui:'InterVar',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-num:'InterVar',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ls-ui:.02em;
  --shadow-hard:0 1px 3px rgba(16,32,28,.08),0 8px 24px rgba(16,32,28,.06);
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Pixelify hat fi-/fl-Ligaturen, die als Fremdzeichen lesen. */
body{font-variant-ligatures:none;font-feature-settings:'liga' 0,'clig' 0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--on-dark);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.15;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
[data-mode="plain"] :focus-visible{outline-color:var(--accent);outline-width:2px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.muted{color:var(--ink-3);font-weight:400}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--accent-ink);padding:.75rem 1.25rem;font-family:var(--f-ui);font-size:1.01rem}
.skip:focus{left:.5rem;top:.5rem}

/* Pixel-Sprites immer scharf */
.prop,.cloud,.brand__mark{image-rendering:pixelated;image-rendering:crisp-edges}

/* Icons */
.ico{width:1em;height:1em;flex:none;vertical-align:-.125em;fill:currentColor}
.ico--lg{width:1.6em;height:1.6em}

/* =========================================================================
   Kopfzeile
   ========================================================================= */
.topbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg-deep) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:var(--bw) solid var(--wood-d);
}
[data-mode="plain"] .topbar{
  background:color-mix(in srgb,#fff 88%,transparent);
  border-bottom:1px solid var(--panel-edge);
}
.topbar__inner{display:flex;align-items:center;gap:1rem;min-height:64px}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.brand__mark{
  width:26px;height:26px;flex:none;
  background:url('/assets/img/px/mark.png') center/contain no-repeat;
  filter:drop-shadow(0 0 6px rgba(240,200,96,.45));
}
[data-mode="plain"] .brand__mark{filter:none}
.brand__text{
  font-family:var(--f-display);font-size:1.15rem;color:var(--on-dark);
  letter-spacing:.02em;
}
[data-mode="plain"] .brand__text{font-weight:700;font-size:1.05rem}

.nav{display:flex;gap:.25rem}
.nav a{
  text-decoration:none;font-family:var(--f-ui);font-size:0.907rem;
  letter-spacing:var(--ls-ui);color:var(--on-dark-2);
  padding:.55rem .7rem;border:var(--bw) solid transparent;
  transition:color .18s,border-color .18s,background .18s;
}
[data-mode="plain"] .nav a{font-size:.9rem;font-weight:500;border-radius:var(--r)}
.nav a:hover{color:var(--accent)}
.nav a.is-active{color:var(--accent);border-color:var(--panel-edge)}
[data-mode="plain"] .nav a:hover{color:var(--accent);background:var(--bg-alt)}
[data-mode="plain"] .nav a.is-active{color:var(--accent);border-color:transparent;background:var(--bg-alt)}

.topbar__actions{display:flex;align-items:center;gap:.6rem}

/* Moduswechsler */
.modeswitch{
  position:relative;display:flex;padding:3px;cursor:pointer;
  background:var(--bg);border:var(--bw) solid var(--wood);border-radius:var(--r);
}
[data-mode="plain"] .modeswitch{background:var(--bg-alt);border-color:var(--panel-edge)}
.modeswitch__opt{
  font-family:var(--f-ui);font-size:0.806rem;letter-spacing:var(--ls-ui);
  padding:.4rem .6rem;color:var(--on-dark-2);transition:color .18s;
}
[data-mode="plain"] .modeswitch__opt{font-size:.78rem;font-weight:600;padding:.35rem .7rem}
.modeswitch__opt[data-opt="pixel"]{color:var(--accent)}
[data-mode="plain"] .modeswitch__opt[data-opt="pixel"]{color:var(--on-dark-2)}
[data-mode="plain"] .modeswitch__opt[data-opt="plain"]{color:var(--accent)}

.burger{display:none;background:none;border:var(--bw) solid var(--wood);
  padding:.5rem .55rem;cursor:pointer;border-radius:var(--r)}
.burger span{display:block;width:18px;height:3px;background:var(--on-dark);margin:3px 0}
[data-mode="plain"] .burger{border-color:var(--panel-edge)}

/* =========================================================================
   Hero + Pixel-Szene
   ========================================================================= */
/* Die Hoehe kommt aus min-height, nicht aus dem Inhalt: der braucht nur rund
   690px. Vorher standen hier 94vh/860px — dadurch war der Hero auf gaengigen
   Bildschirmen hoeher als das Fenster, und unter der Erdkante folgte eine
   leere Flaeche, bevor ueberhaupt etwas kam. Die Seite sah damit zu Ende aus.
   Mit 82vh/780px schneidet die naechste Ueberschrift oben an und zeigt, dass
   es weitergeht. */
.hero{position:relative;min-height:min(82vh,780px);display:flex;align-items:center;
  padding:2.5rem 0 3rem;overflow:hidden}
/* Ohne Pixel-Szene braucht der Hero keine Bauhöhe für Wiese und Himmel. */
[data-mode="plain"] .hero{min-height:auto;padding:4.5rem 0 4rem}

/* Der Uebergang in den dunklen Abschnitt darunter. Bewusst nur 28 px hoch:
   die Erdkante ist das beste Stueck der Szene und darf nicht im Schatten
   verschwinden. Es reicht, ihre unterste Kante abzudunkeln — dann liest sie
   sich als Boeschung, die in den Schatten faellt, statt als abgeschnitten. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:28px;
  z-index:13;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(13,10,28,.42) 58%,var(--bg) 100%);
}
[data-mode="plain"] .hero::after{display:none}

.scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.scene__sky{position:absolute;inset:0;
  background:linear-gradient(180deg,var(--day-1) 0%,var(--day-2) 40%,var(--day-3) 70%,var(--day-4) 100%)}
[data-mode="plain"] .scene{display:none}



.scene__body{
  position:absolute;top:9%;right:8%;width:88px;height:88px;
  background:#fff3c4;border-radius:50%;
  box-shadow:0 0 0 10px rgba(255,243,196,.22),0 0 0 24px rgba(255,243,196,.10);
}
.scene__body.is-sun{background:#ffd873;
  box-shadow:0 0 0 12px rgba(255,216,115,.16),0 0 0 28px rgba(255,216,115,.07)}
.scene__body.is-moon::after,.scene__body.is-moon::before{
  content:"";position:absolute;border-radius:50%;background:rgba(214,202,166,.75)}
.scene__body.is-moon::before{width:18px;height:18px;top:22%;left:22%}
.scene__body.is-moon::after{width:12px;height:12px;bottom:24%;right:26%}

.scene__clouds{position:absolute;inset:0 0 40% 0}
.cloud{position:absolute;opacity:.95;image-rendering:pixelated}
.cloud--1{width:87px;top:18%;left:-20%;animation:drift 90s linear infinite}
.cloud--2{width:90px;top:32%;left:-30%;animation:drift 130s linear infinite 12s}
.cloud--3{width:87px;top:8%;left:-45%;animation:drift 160s linear infinite 40s;opacity:.6}
@keyframes drift{to{left:130%}}

/* ---------- Hintergrundebenen ----------
   Zwei gekachelte Streifen statt der frueheren CSS-Ellipsen. Die Ellipsen
   waren glatte Farbflaechen neben pixeliger Grafik — zwei Bildsprachen in
   einem Bild, und genau daran ist die Szene vorher auseinandergefallen.
   Beide Streifen sind mit PixelLab erzeugt, auf die Palette der Erdkante
   festgenagelt und in Seitenansicht, also derselbe Blickwinkel wie der Boden.
   Je 800 px Rapport (400 px Original plus gespiegelte Kopie, dadurch keine
   sichtbare Naht), dargestellt in doppelter Pixelgroesse. */
.scene__band{
  position:absolute;left:0;right:0;pointer-events:none;
  background-repeat:repeat-x;background-position:bottom left;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
/* Ferne Huegelkette — sitzt auf der Oberkante der Wiese auf */
.scene__band--hills{
  bottom:244px;height:144px;z-index:2;
  background-image:url('/assets/img/px/band-hills.png?v=1');
  background-size:1600px 144px;
}
/* Baumreihe — steht ein Stueck in der Wiese, das gibt der Flaeche Tiefe */
.scene__band--trees{
  bottom:188px;height:128px;z-index:3;
  background-image:url('/assets/img/px/band-trees.png?v=1');
  background-size:1600px 128px;
}

/* Boden aus Florians Wang-Tileset: Grasfläche plus Erdböschung an der
   Vorderkante (Kachel n03 — Gras oben, Erde, Wasser unten). Alles 2x. */
.scene__ground{
  position:absolute;left:0;right:0;bottom:0;height:280px;
  background:url('/assets/img/px/ground-grass-day.png?v=1') repeat;
  background-size:256px 256px;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
/* Ganz oben verliert sich die Wiese im Dunst — das nimmt der gekachelten
   Flaeche die Kante zur Baumreihe hin. Deutlich schwaecher als frueher, weil
   dort jetzt echte Ebenen stehen statt einer Farbflaeche. */
.scene__ground::before{
  content:"";position:absolute;inset:0 0 auto 0;height:70px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(122,168,92,.55) 0%,
             rgba(122,168,92,.22) 55%,transparent 100%);
}
/* unten die sichtbare Erdkante mit Wasser darunter */
.scene__ground::after{
  content:"";position:absolute;inset:auto 0 0 0;height:64px;pointer-events:none;z-index:12;
  background:url('/assets/img/px/ground-edge-day.png?v=1') repeat-x;
  background-size:512px 64px;
  image-rendering:pixelated;image-rendering:crisp-edges;
}

.scene__props{position:absolute;inset:0;z-index:5}
/* Requisiten auf der Wiese. Alles in doppelter Pixelgroesse und in
   Seitenansicht — dieselbe Regel wie fuer die Baender. */
.prop{position:absolute;image-rendering:pixelated;image-rendering:crisp-edges}
/* Zwischen den beiden Markierungen schreibt tools/szene-anwenden.py. Wer hier
   von Hand etwas eintraegt, verliert es beim naechsten Durchlauf. Alles, was
   bleiben soll — Medienabfragen etwa —, gehoert unterhalb der Endmarkierung. */
/* REQUISITEN ANFANG */
.prop--tree2-1{width:86px;left:74.3%;bottom:50.4%;z-index:51}
.prop--tower-1{width:99px;left:80.6%;bottom:38.3%;z-index:63}
.prop--tree-1{width:160px;left:85.8%;bottom:26.8%;z-index:74}
.prop--bush-1{width:128px;left:78.9%;bottom:13.6%;z-index:87}
.prop--bush-2{width:128px;left:2.5%;bottom:14.3%;z-index:87}
.prop--bush-3{width:64px;left:80.2%;bottom:38.9%;z-index:62}
.prop--tree2-2{width:86px;left:2.5%;bottom:57.1%;z-index:44}
.prop--flower1-1{width:23px;left:87.8%;bottom:37.5%;z-index:63}
.prop--flower1-2{width:23px;left:92.6%;bottom:37.5%;z-index:63}
.prop--flower1-3{width:23px;left:88.2%;bottom:23.9%;z-index:77}
.prop--flower1-4{width:23px;left:0.9%;bottom:53.6%;z-index:47}
.prop--flower1-5{width:23px;left:6.4%;bottom:60.7%;z-index:40}
.prop--flower1-6{width:23px;left:2.7%;bottom:54.6%;z-index:46}
.prop--bush-4{width:128px;left:82.8%;bottom:12.5%;z-index:89}
.prop--flower1-7{width:23px;left:49%;bottom:24%;z-index:77}
.prop--flower1-8{width:46px;left:42.1%;bottom:20%;z-index:81}
.prop--flower1-9{width:23px;left:37.5%;bottom:16.4%;z-index:85}
.prop--flower1-10{width:46px;left:52.8%;bottom:18.6%;z-index:82}
.prop--bush-5{width:128px;left:43.3%;bottom:11.8%;z-index:89}
.prop--bush-6{width:128px;left:37.3%;bottom:6.1%;z-index:95}
.prop--bush-7{width:192px;left:46%;bottom:5.7%;z-index:95}
/* REQUISITEN ENDE */

/* ---------- Huehner ----------
   Kein gewoehnliches Bild, sondern ein Streifen aus neun Einzelbildern, den
   CSS durchschaltet — dieselbe Technik wie beim Begleiter am unteren Rand.
   steps(9) springt von Bild zu Bild statt weich zu ueberblenden; alles andere
   waere bei Pixelgrafik falsch.

   Sie stehen ausserhalb der Markierungen, damit szene-anwenden.py sie nicht
   ueberschreibt. Die z-index-Werte folgen derselben Rechnung wie dort:
   100 minus bottom plus 1, also weiter unten = weiter vorn. */
.prop--chicken{
  background-image:url('/assets/img/px/chicken.png?v=2');
  background-repeat:no-repeat;
  image-rendering:pixelated;image-rendering:crisp-edges;
  animation-duration:1.4s;animation-timing-function:steps(9);
  animation-iteration-count:infinite;
}
/* Zwei Groessen, beide ganze Vielfache der nativen 40x36.
   Jede braucht ihre eigene Bildfolge: background-position in Prozent bezieht
   sich auf die Differenz zwischen Rahmen und Kachel, nicht auf die Bildbreite
   — bei 720px Streifen in 80px Rahmen liefe es dadurch in die falsche
   Richtung. Deshalb feste Pixelwerte, je 9 Bilder mal Rahmenbreite. */
.prop--chicken.is-gross{width:80px;height:72px;background-size:720px 72px;
  animation-name:huhn-gross}
.prop--chicken.is-klein{width:40px;height:36px;background-size:360px 36px;
  animation-name:huhn-klein}
@keyframes huhn-gross{from{background-position:0 0}to{background-position:-720px 0}}
@keyframes huhn-klein{from{background-position:0 0}to{background-position:-360px 0}}

/* Gespiegelt. transform kippt auch den Ursprung, deshalb steht die Regel
   NACH den Positionen — sonst kaempft sie mit left/right. */
.prop--chicken.is-west{transform:scaleX(-1)}

/* Eines vor dem Turm, drei links in der Wiese, wo vorher der Teich lag.
   Unterschiedliche Groessen und Blickrichtungen, und jedes pickt zu einem
   anderen Zeitpunkt — im Gleichtakt sieht eine Gruppe aufgezogen aus. */
.prop--chicken-1{left:79%;bottom:27%;z-index:74}
.prop--chicken-2{left:3.5%;bottom:25%;z-index:76;animation-delay:-.45s}
/* is-gross wird gerade von keinem Huhn benutzt, bleibt aber stehen — die
   Groesse ist ein sauberes Vielfaches und jederzeit wieder einsetzbar. */
.prop--chicken-3{left:9.5%;bottom:31%;z-index:70;animation-delay:-.9s}
.prop--chicken-4{left:1%;bottom:36%;z-index:65;animation-delay:-1.15s}

@media (max-width:1000px){.prop--chicken{display:none}}
/* Unter 1180 px wird es rechts eng, unter 1000 px steht der Baum hinter der
   Tafel — dann weicht er, wie der Begleiter auch. */
/* Nur naeher an den Rand ruecken, Breite unveraendert: 132px waeren 1.65x
   der nativen 80px und die Pixel wuerden ungleich breit. */
@media (max-width:1180px){.prop--tree{right:1%}}
@media (max-width:1000px){.prop--tree{display:none}}
@media (max-width:820px){.prop--bush-2{display:none}}

/* ---------- Tag ----------
   Die Sprites waren fuer die Nacht gezeichnet. Sie liegen jetzt zusaetzlich
   als *-day.png daneben, mit umgerechneter Palette statt CSS-Filter: ein
   Filter hebt Licht und Schatten gleichmaessig an und nimmt der Wiese die
   Tiefe. Erzeugt von raw/tag-palette.py, Nacht-Originale bleiben liegen.  */
.scene__props{filter:saturate(1.04)}

/* Randabdunklung — nur noch andeutungsweise und kuehl, damit der Blick
   nach innen faellt, ohne dass es nach Abend aussieht. */
.scene__vignette{
  position:absolute;inset:0;pointer-events:none;z-index:21;
  background:radial-gradient(128% 96% at 50% 38%, transparent 60%, rgba(28,52,86,.22) 100%);
}

/* Der Turm bleibt bewusst der dunkelste Punkt der Szene — so behaelt er
   seine Silhouette gegen die helle Wiese. Aufgehellt ist er in tower-day.png
   nur so weit, dass Balken und Fenster bei Tageslicht lesbar bleiben. */

/* Am Tag steigt kein Glutfunken auf — dieselbe Mechanik traegt jetzt
   Pollen, die im Gegenlicht ueber der Wiese haengen. */
.embers{position:absolute;inset:auto 0 0 0;height:60%;opacity:.7}
.ember{
  position:absolute;bottom:0;width:3px;height:3px;
  background:#fffbe4;box-shadow:0 0 5px 1px rgba(255,250,210,.55);
  animation:rise linear infinite;
}
.ember--big{width:4px;height:4px}
.ember--cool{background:#eafff4;box-shadow:0 0 5px 1px rgba(220,255,240,.5)}
@keyframes rise{
  0%  {transform:translate(0,0)      scale(.6);opacity:0}
  12% {opacity:.95}
  50% {transform:translate(14px,-46%) scale(1)}
  78% {opacity:.7}
  100%{transform:translate(-8px,-100%) scale(.5);opacity:0}
}

.hero__inner{
  position:relative;z-index:2;max-width:830px;padding:2rem 2.5rem;
  margin-inline:max(1.25rem,calc((100% - var(--wrap)) / 2)) auto;
}
[data-mode="plain"] .hero__inner{max-width:760px;padding:0;margin-inline:auto}
/* Tafel hinter dem Text. In der Nachtfassung stand hier ein weicher dunkler
   Schleier — über einem klaren Tageshimmel liest der sich als Fleck, egal wie
   sanft man ihn macht. Eine Tafel mit harter Kante liest sich dagegen als das,
   was sie ist, und passt zu den Pergamentkarten der übrigen Seite.

   Halbtransparent, damit Wiese und Himmel dahinter noch durchkommen. Selbst
   vor reinem Weiss läge der Fließtext noch bei 5.0:1, über dem tatsächlichen
   Himmel bei 7.7:1 — die Tafel trägt also unabhängig davon, was hinter ihr
   liegt. */
.hero__inner::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(38,30,22,.74);
  border:var(--bw) solid rgba(109,76,46,.85);
  box-shadow:var(--shadow-hard);
}
[data-mode="plain"] .hero__inner::before{display:none}
.hero__eyebrow{
  font-family:var(--f-ui);font-size:0.882rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
[data-mode="plain"] .hero__eyebrow{font-size:.8rem;font-weight:600;color:var(--accent)}
.hero__name{
  font-family:var(--f-display);font-size:clamp(2.8rem,9vw,5.6rem);line-height:1;
  color:#f7ecd3;text-shadow:5px 5px 0 rgba(10,7,20,.7);margin-bottom:.35rem;
}
[data-mode="plain"] .hero__name{
  color:var(--ink);text-shadow:none;font-size:clamp(2.4rem,6vw,3.8rem);letter-spacing:-.02em}
.hero__role{
  font-family:var(--f-display);font-size:clamp(1.2rem,3.4vw,1.9rem);
  color:var(--accent);text-shadow:3px 3px 0 rgba(10,7,20,.6);margin-bottom:1.5rem;
}
[data-mode="plain"] .hero__role{color:var(--accent);text-shadow:none;font-weight:600}

.paths{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.6rem}
.path{
  background:var(--panel);color:var(--ink);padding:.6rem .95rem;
  border:var(--bw) solid var(--panel-edge);border-radius:var(--r);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.10);
  display:flex;flex-direction:column;gap:.1rem;
}
[data-mode="plain"] .path{box-shadow:none;background:var(--bg-alt)}
.path--main{background:var(--accent);border-color:#a8801f}
[data-mode="plain"] .path--main{background:var(--accent);border-color:var(--accent)}
.path__tag{font-family:var(--f-ui);font-size:0.731rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.path--main .path__tag{color:#6b4a10}
.path__name{font-family:var(--f-display);font-size:1.05rem;font-weight:700;line-height:1.2}
[data-mode="plain"] .path__tag{font-size:.7rem;font-weight:600;color:var(--ink-3)}
[data-mode="plain"] .path--main .path__tag,[data-mode="plain"] .path--main .path__name{color:#fff}
[data-mode="plain"] .path__name{font-size:1rem}

.hero__pitch{max-width:56ch;color:#ded6ee;font-size:1.06rem;
  text-shadow:0 2px 6px rgba(10,8,16,.5);margin-bottom:2rem}
[data-mode="plain"] .hero__pitch{color:var(--ink-2);text-shadow:none}

.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;cursor:pointer;
  font-family:var(--f-ui);font-size:0.932rem;letter-spacing:var(--ls-ui);
  padding:.85rem 1.3rem;background:var(--panel);color:var(--ink);
  border:var(--bw) solid var(--panel-edge);border-radius:var(--r);
  box-shadow:var(--shadow-hard);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease),background .18s;
}
[data-mode="plain"] .btn{font-size:.92rem;font-weight:600;padding:.7rem 1.2rem;
  background:#fff;border-color:var(--panel-edge)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.35)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(0,0,0,.35)}
[data-mode="plain"] .btn:hover{transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(16,32,28,.12);background:var(--bg-alt)}
[data-mode="plain"] .btn:active{transform:none}
.btn--primary{background:var(--accent);border-color:#a8801f;color:var(--accent-ink)}
[data-mode="plain"] .btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
[data-mode="plain"] .btn--primary:hover{background:var(--accent-2)}
.btn--ghost{background:transparent;color:var(--on-dark);border-color:var(--wood);
  box-shadow:none;align-self:flex-start}
.btn--ghost:hover{background:rgba(255,255,255,.06);transform:none;box-shadow:none}
[data-mode="plain"] .btn--ghost{color:var(--accent);border-color:var(--panel-edge);background:#fff}

/* =========================================================================
   Abschnitte
   ========================================================================= */
.sec{position:relative;padding:6rem 0;background:var(--bg)}
.sec--warm{background:var(--bg-alt)}
.sec--dark{background:var(--bg-deep)}
.sec--contact{background:linear-gradient(180deg,var(--bg) 0%,var(--sky-1) 100%);padding-bottom:7rem}
[data-mode="plain"] .sec--contact{background:var(--bg-alt)}

/* Der erste Abschnitt rueckt dichter an den Hero. Sonst endet die Seite fuer
   den Betrachter optisch an der Unterkante des Bildes: darunter kommt nur eine
   leere Flaeche, und dass es weitergeht, sieht man erst nach dem Scrollen.
   So schneidet "Kapitel 1" oben an und macht neugierig. */
#ueber{padding-top:2rem}
[data-mode="plain"] #ueber{padding-top:3.5rem}

/* dezente Holz-/Rasterstruktur nur im Pixel-Modus */
.sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:8px 8px;
}
[data-mode="plain"] .sec::before{display:none}
.sec > .wrap{position:relative;z-index:1}

.sechead{max-width:56ch;margin-bottom:3rem}
.sechead--center{margin-inline:auto;text-align:center}
.sechead__kicker{
  font-family:var(--f-ui);font-size:0.832rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.7rem;
}
[data-mode="plain"] .sechead__kicker{font-size:.78rem;font-weight:700}
.sechead__title{
  font-family:var(--f-display);font-size:clamp(1.9rem,4.6vw,3rem);color:var(--on-dark);
  text-shadow:4px 4px 0 rgba(0,0,0,.28);
}
[data-mode="plain"] .sechead__title{text-shadow:none;letter-spacing:-.015em}
.sechead__sub{margin-top:.9rem;color:var(--on-dark-2);font-size:1.05rem}

/* Panel-Grundform (Pergament) */
.panel,.quest__card,.proj,.invbox,.contact__card,.gal__item figcaption,.stat{
  background:var(--panel);color:var(--ink);
  border:var(--bw) solid var(--panel-edge);border-radius:var(--r);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.09),var(--shadow-hard);
}
[data-mode="plain"] .panel,[data-mode="plain"] .quest__card,[data-mode="plain"] .proj,
[data-mode="plain"] .invbox,[data-mode="plain"] .contact__card,
[data-mode="plain"] .gal__item figcaption,[data-mode="plain"] .stat{
  box-shadow:var(--shadow-hard);
}

/* Goldene Eckbeschläge — machen aus dem Pergament ein verwunschenes Dokument */
.quest__card,.proj,.invbox,.contact__card{position:relative}
.quest__card::before,.quest__card::after,
.proj::before,.proj::after,
.invbox::before,.invbox::after,
.contact__card::before,.contact__card::after{
  content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  border:3px solid var(--panel-edge);opacity:.75;
}
.quest__card::before,.proj::before,.invbox::before,.contact__card::before{
  top:7px;left:7px;border-right:0;border-bottom:0;
}
.quest__card::after,.proj::after,.invbox::after,.contact__card::after{
  bottom:7px;right:7px;border-left:0;border-top:0;
}
[data-mode="plain"] .quest__card::before,[data-mode="plain"] .quest__card::after,
[data-mode="plain"] .proj::before,[data-mode="plain"] .proj::after,
[data-mode="plain"] .invbox::before,[data-mode="plain"] .invbox::after,
[data-mode="plain"] .contact__card::before,[data-mode="plain"] .contact__card::after{
  display:none;
}

/* Leuchtender Trenner am Anfang jedes Kapitels */
.sec::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(100% - 2.5rem,var(--wrap));height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--panel-edge) 22%,
             var(--accent) 50%,var(--panel-edge) 78%,transparent 100%);
  opacity:.5;box-shadow:0 0 14px rgba(240,200,96,.35);
}
[data-mode="plain"] .sec::after{display:none}

/* =========================================================================
   Über mich
   ========================================================================= */
.about{display:grid;grid-template-columns:1.55fr 1fr;gap:3rem;align-items:start}
.about__text{color:var(--on-dark-2);font-size:1.02rem}
.about__text strong{color:var(--on-dark)}
.lead{font-size:1.22rem;line-height:1.55;color:var(--on-dark)}
[data-mode="plain"] .about__text{color:var(--ink-2)}
[data-mode="plain"] .lead,[data-mode="plain"] .about__text strong{color:var(--ink)}
.note{
  margin-top:1.6rem;padding:1.1rem 1.25rem;border-left:var(--bw) solid var(--accent);
  background:rgba(232,150,60,.08);color:var(--on-dark);border-radius:var(--r);
}
[data-mode="plain"] .note{background:#f1f8f5;color:var(--ink-2);border-left-width:3px}

.stats{display:grid;gap:1rem}
.stat{padding:1.15rem 1.25rem;display:flex;align-items:baseline;gap:.9rem}
/* Ziffern in Silkscreen — Pixelify verwechselt 5 und S. */
.stat__num{font-family:var(--f-num);font-size:1.9rem;line-height:1;color:var(--accent-deep);
  flex:none;min-width:2.4ch;text-align:right}
[data-mode="plain"] .stat__num{color:var(--accent);font-weight:700;font-size:2rem}
.stat__label{font-size:.92rem;color:var(--ink-2);line-height:1.4}

/* =========================================================================
   Werdegang / Quests
   ========================================================================= */
.quests{position:relative;padding-left:2.6rem}
.quests::before{
  content:"";position:absolute;left:.75rem;top:.5rem;bottom:.5rem;width:var(--bw);
  background:repeating-linear-gradient(var(--wood) 0 8px,transparent 8px 16px);
}
[data-mode="plain"] .quests::before{background:var(--panel-edge);width:2px}

.quest{position:relative;margin-bottom:1.6rem}
.quest__marker{
  position:absolute;left:-2.6rem;top:1.4rem;width:22px;height:22px;
  background:var(--panel);border:var(--bw) solid var(--wood);border-radius:var(--r);
  transform:translateX(2px);
}
[data-mode="plain"] .quest__marker{border-radius:50%;background:#fff;border:2px solid var(--panel-edge);
  width:14px;height:14px;left:-2.35rem;top:1.6rem}
.quest--now .quest__marker{background:var(--accent);border-color:#a8801f}
[data-mode="plain"] .quest--now .quest__marker{background:var(--accent);border-color:var(--accent)}
.quest--now .quest__marker::after{
  content:"";position:absolute;inset:-10px;border:var(--bw) solid var(--accent);
  opacity:.35;animation:ping 2.6s ease-out infinite;border-radius:var(--r);
}
@keyframes ping{0%{transform:scale(.7);opacity:.5}100%{transform:scale(1.35);opacity:0}}

.quest__card{padding:1.5rem 1.7rem}
.quest__time{
  font-family:var(--f-ui);font-size:0.832rem;letter-spacing:var(--ls-ui);
  color:var(--ink-3);margin-bottom:.55rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
[data-mode="plain"] .quest__time{font-size:.82rem;font-weight:600;color:var(--accent)}
.badge{
  font-family:var(--f-ui);font-size:0.706rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.22rem .5rem;background:var(--green);color:#f0f7ec;border-radius:var(--r);
}
[data-mode="plain"] .badge{font-size:.68rem;font-weight:700;background:#e6f4ee;color:var(--accent)}
.quest__title{font-family:var(--f-display);font-size:1.4rem;color:var(--ink);margin-bottom:.2rem}
[data-mode="plain"] .quest__title{font-size:1.25rem;letter-spacing:-.01em}
.quest__org{font-size:.92rem;color:var(--ink-3);margin-bottom:.9rem}
.quest__list li{
  position:relative;padding-left:1.35rem;margin-bottom:.5rem;
  color:var(--ink-2);font-size:.97rem;line-height:1.55;
}
.quest__list li::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--accent-deep);
}
[data-mode="plain"] .quest__list li::before{border-radius:50%;width:5px;height:5px;top:.65em}
.quest__list strong{color:var(--ink)}

/* =========================================================================
   Projekte
   ========================================================================= */
.proj{padding:2rem;margin-bottom:2rem}
.proj__head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.proj__kicker{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-ui);font-size:0.806rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:.5rem;
}
[data-mode="plain"] .proj__kicker{font-size:.78rem;font-weight:700}
.proj__title{font-family:var(--f-display);font-size:clamp(1.7rem,3.6vw,2.4rem);color:var(--ink)}
[data-mode="plain"] .proj__title{letter-spacing:-.02em}
.proj__sub{margin-top:.5rem;color:var(--ink-2);max-width:52ch}
.proj p{color:var(--ink-2)}
.proj strong{color:var(--ink)}
.proj .btn--ghost{color:var(--ink);border-color:var(--panel-edge);background:var(--panel-2)}
.proj .btn--ghost:hover{background:var(--panel-shade)}

.proj__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.2rem;align-items:start}

.facts{margin-top:1.4rem;display:grid;gap:.7rem}
.facts > div{display:grid;grid-template-columns:8.5rem 1fr;gap:.8rem;align-items:baseline}
.facts dt{font-family:var(--f-ui);font-size:0.781rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
[data-mode="plain"] .facts dt{font-size:.76rem;font-weight:700}
.facts dd{margin:0;font-size:.95rem;color:var(--ink-2)}

.proj__shots{display:grid;gap:.7rem}
.shot{padding:0;border:var(--bw) solid var(--panel-edge);background:var(--panel-2);
  cursor:pointer;border-radius:var(--r);overflow:hidden;display:block;
  transition:transform .15s var(--ease),border-color .15s}
.shot:hover{transform:translateY(-3px);border-color:var(--accent-deep)}
.shot img{width:100%}
.shot__row{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}

.proj__pair{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.proj--sm{margin-bottom:0;display:flex;flex-direction:column}
.proj--sm .proj__title{margin-bottom:.8rem}
.proj--sm .btn{margin-top:auto;align-self:flex-start}

.taglist{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0}
.taglist li{
  font-family:var(--f-ui);font-size:0.756rem;letter-spacing:var(--ls-ui);
  padding:.35rem .6rem;background:var(--panel-2);color:var(--ink-2);
  border:2px solid var(--panel-edge);border-radius:var(--r);
}
[data-mode="plain"] .taglist li{font-size:.8rem;font-weight:500;border-width:1px;padding:.28rem .65rem}
.proj__foot{display:flex;align-items:center;gap:.55rem;margin-top:auto;padding-top:.8rem;
  font-size:.9rem;color:var(--ink-3);border-top:2px dashed var(--panel-edge)}

/* =========================================================================
   Design-Galerie
   ========================================================================= */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1.5rem}
.gal__item{margin:0;display:flex;flex-direction:column}
.gal__btn{
  position:relative;padding:0;cursor:pointer;display:block;overflow:hidden;
  border:var(--bw) solid var(--panel-edge);border-bottom:0;background:var(--panel-2);
  border-radius:var(--r) var(--r) 0 0;
  aspect-ratio:16/9;                 /* einheitliche Kacheln, Vollbild per Klick */
}
.gal__btn img{width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform .35s var(--ease)}
.gal__btn:hover img{transform:scale(1.04)}
.gal__play{
  position:absolute;right:.6rem;bottom:.6rem;
  font-family:var(--f-ui);font-size:0.731rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);padding:.3rem .55rem;border-radius:var(--r);
}
[data-mode="plain"] .gal__play{font-size:.7rem;font-weight:700;color:#fff}
.gal__item figcaption{
  padding:.85rem 1rem;font-size:.9rem;color:var(--ink-2);
  border-radius:0 0 var(--r) var(--r);box-shadow:none;flex:1;
}
.gal__item figcaption strong{color:var(--ink)}

/* =========================================================================
   Inventar / Skills
   ========================================================================= */
.inv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:1.5rem;
  align-items:start}
.invbox{padding:1.6rem}
.invbox__title{
  display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-size:1.25rem;
  color:var(--ink);padding-bottom:.9rem;margin-bottom:1.1rem;
  border-bottom:var(--bw) solid var(--panel-edge);
}
.invbox__title .ico{color:var(--accent-deep)}
[data-mode="plain"] .invbox__title{font-size:1.1rem;border-bottom-width:1px}

.slots{display:grid;gap:.55rem}
.slots--compact{grid-template-columns:1fr 1fr}
.slot{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:center;
  padding:.6rem .75rem;background:var(--panel-2);
  border:2px solid var(--panel-edge);border-radius:var(--r);
  transition:border-color .18s,background .18s;
}
.slot:hover{border-color:var(--accent-deep);background:var(--panel-shade)}
[data-mode="plain"] .slot{border-width:1px;background:var(--bg-alt)}
[data-mode="plain"] .slot:hover{background:#eef4f2}
.slot .ico{grid-row:span 2;color:var(--accent-deep);width:1.15em;height:1.15em}
.slot span{font-family:var(--f-display);font-size:1rem;font-weight:700;color:var(--ink);line-height:1.3}
[data-mode="plain"] .slot span{font-size:.95rem}
.slot em{font-style:normal;font-size:.82rem;color:var(--ink-3);line-height:1.35}
.slots--compact .slot{grid-template-columns:auto 1fr}
.slots--compact .slot .ico{grid-row:auto}
.slot--base{opacity:.82}

/* =========================================================================
   Kontakt
   ========================================================================= */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1.25rem}
.contact__card{padding:1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.contact__card .ico{color:var(--accent-deep);margin-bottom:.4rem}
.contact__label{font-family:var(--f-ui);font-size:0.756rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
[data-mode="plain"] .contact__label{font-size:.75rem;font-weight:700}
.contact__value{font-family:var(--f-display);font-size:1.02rem;font-weight:700;
  color:var(--ink);text-decoration:none;word-break:break-word;line-height:1.35}
a.contact__value:hover{color:var(--accent-deep);text-decoration:underline}
[data-mode="plain"] .contact__value{font-size:.98rem}
.contact__note{margin-top:2rem;text-align:center;color:var(--on-dark-2);font-size:.95rem}

/* =========================================================================
   Fußzeile
   ========================================================================= */
.foot{background:var(--bg-deep);border-top:var(--bw) solid var(--wood-d);padding:2.5rem 0}
[data-mode="plain"] .foot{border-top:1px solid var(--panel-edge);background:var(--bg)}
.foot__inner{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.85rem;color:var(--on-dark-2)}
.foot__made{max-width:46ch;margin:0}
.foot__meta{margin:0}
.linklike{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);
  text-decoration:underline;font-size:inherit}

/* =========================================================================
   Lightbox
   ========================================================================= */
.lb{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(12,10,18,.94);padding:clamp(1rem,4vw,3rem);
}
.lb[hidden]{display:none}
.lb__fig{margin:0;max-width:min(1500px,100%);max-height:100%;display:flex;
  flex-direction:column;gap:.9rem;align-items:center}
.lb__fig img{max-height:calc(100vh - 9rem);width:auto;object-fit:contain;
  border:var(--bw) solid var(--wood);border-radius:var(--r)}
.lb__fig figcaption{font-family:var(--f-ui);font-size:0.882rem;letter-spacing:var(--ls-ui);
  color:#d8cbb2;text-align:center;max-width:70ch}
[data-mode="plain"] .lb__fig figcaption{font-size:.88rem;font-family:var(--f-body)}
.lb__close,.lb__nav{
  position:absolute;background:rgba(255,255,255,.08);color:#f2e6cc;cursor:pointer;
  border:var(--bw) solid rgba(255,255,255,.22);border-radius:var(--r);
  width:48px;height:48px;font-size:1.6rem;line-height:1;display:grid;place-items:center;
}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.18)}
.lb__close{top:1rem;right:1rem;font-size:1.9rem}
.lb__nav{top:50%;transform:translateY(-50%);font-size:2.2rem}
.lb__nav--prev{left:1rem}
.lb__nav--next{right:1rem}
body.lb-open{overflow:hidden}

/* =========================================================================
   Begleiter — Florians Figur läuft am unteren Rand mit
   Einzelbild nativ 23x42, dargestellt in dreifacher Größe (69x126).
   ========================================================================= */
.buddy{
  position:fixed;left:0;bottom:6px;z-index:50;
  width:46px;height:84px;pointer-events:none;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background-repeat:no-repeat;
  background-image:url('/assets/img/px/hero-idle-east.png');
  background-size:46px 84px;
  filter:drop-shadow(0 2px 0 rgba(20,40,30,.35));
  will-change:transform;
}
.buddy::after{                       /* weicher Schatten am Boden */
  content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:26px;height:6px;border-radius:50%;
  background:radial-gradient(50% 50%,rgba(0,0,0,.45),transparent 70%);
}
.buddy.is-west{background-image:url('/assets/img/px/hero-idle-west.png')}

.buddy.is-walking{
  background-image:url('/assets/img/px/hero-walk-east.png');
  background-size:184px 84px;                     /* 4 Einzelbilder à 46px */
  animation:buddywalk .6s steps(4) infinite;
}
.buddy.is-walking.is-west{background-image:url('/assets/img/px/hero-walk-west.png')}
@keyframes buddywalk{from{background-position:0 0}to{background-position:-184px 0}}

/* Reine Dekoration: weg, sobald Platz knapp wird oder Bewegung stört */
@media (max-width:820px){.buddy{display:none}}
[data-mode="plain"] .buddy{display:none}

/* =========================================================================
   Funkenspur am Mauszeiger (nur Maus, nicht Touch)
   ========================================================================= */
.spark{
  position:fixed;width:5px;height:5px;border-radius:50%;pointer-events:none;z-index:90;
  background:var(--glow);box-shadow:0 0 8px 2px rgba(255,180,90,.6);
  animation:sparkfade .9s ease-out forwards;
}
@keyframes sparkfade{
  0%  {opacity:.9;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,calc(-50% + 22px)) scale(.2)}
}
[data-mode="plain"] .spark{display:none}

/* =========================================================================
   Einblend-Animation
   ========================================================================= */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================================
   Responsiv
   ========================================================================= */
@media (max-width:1000px){
  .about{grid-template-columns:1fr;gap:2rem}
  .proj__grid{grid-template-columns:1fr}
  .proj__pair{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}
/* Kopfzeile zuerst: Marke, sieben Navigationspunkte und der Umschalter passen
   ab etwa 940 px nicht mehr nebeneinander — vorher schob der Umschalter die
   Seite waagerecht aus dem Fenster. */
@media (max-width:940px){
  .burger{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--bg-deep);border-bottom:var(--bw) solid var(--wood-d);
    padding:.6rem;display:none;
  }
  [data-mode="plain"] .nav{background:#fff;border-bottom:1px solid var(--panel-edge);
    box-shadow:0 12px 24px rgba(16,32,28,.08)}
  .nav.is-open{display:flex}
  .nav a{padding:.85rem 1rem;font-size:.8rem}
}

@media (max-width:820px){
  body{font-size:16px}
  .sec{padding:4.5rem 0}
  .hero{min-height:auto;padding:3.5rem 0 7rem}
  .hero__inner{padding:1.5rem 1.35rem}
  /* Auf schmalen Displays kürzere Bodenzone und kleinerer Turm */
  .scene__ground{height:200px}
  .scene__ground::after{height:48px;background-size:384px 48px}
  .scene__band--hills{bottom:172px;height:108px;background-size:1200px 108px}
  .scene__band--trees{bottom:132px;height:96px;background-size:1200px 96px}
  /* 64px = glatt 1x. 96px waeren 1.5x und die Pixel wuerden ungleich breit. */
  .prop--bush-1{width:64px;left:4%;bottom:10%}
  .quests{padding-left:2rem}
  .quest__marker{left:-2rem;width:16px;height:16px}
  [data-mode="plain"] .quest__marker{left:-1.85rem}
  .quest__card{padding:1.2rem 1.25rem}
  .shot__row{grid-template-columns:repeat(3,1fr)}
  .facts > div{grid-template-columns:1fr;gap:.15rem}
  .lb__nav{width:40px;height:40px}
  .lb__nav--prev{left:.35rem}
  .lb__nav--next{right:.35rem}
}
@media (max-width:560px){
  /* Marke + Umschalter + Burger müssen in eine Zeile passen */
  .topbar__inner{gap:.5rem}
  .brand__text{font-size:1rem}
  .modeswitch__opt{padding:.35rem .45rem;font-size:.72rem}
  .burger{padding:.45rem .5rem}
  .stats{grid-template-columns:1fr}
  .slots--compact{grid-template-columns:1fr}
  .shot__row{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .foot__inner{flex-direction:column}
}
@media (max-width:420px){
  .brand__text{display:none}       /* nur noch die Truhe als Marke */
  .paths{gap:.5rem}
  .path{width:100%}
}

/* =========================================================================
   Bewegung reduzieren
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .cloud,.ember{animation:none}
  .prop--chicken{animation:none}
  .cloud--1{left:12%}.cloud--2{left:48%}.cloud--3{left:72%}
  .spark{display:none}
  .buddy{display:none}
}

/* =========================================================================
   Druck — immer die nüchterne Fassung
   ========================================================================= */
@media print{
  .topbar,.scene,.lb,.burger,.modeswitch,.gal__play,.foot__meta{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec{padding:1.2rem 0;background:#fff!important;break-inside:avoid}
  .sec::before{display:none}
  .hero{min-height:auto;padding:0 0 1rem}
  .hero__name,.hero__role,.sechead__title,.quest__title,.proj__title{
    color:#000!important;text-shadow:none!important}
  .hero__pitch,.sechead__sub,.about__text,.lead,.contact__note,.foot__made{color:#222!important}
  .panel,.quest__card,.proj,.invbox,.contact__card,.stat{
    box-shadow:none!important;border:1px solid #bbb!important;break-inside:avoid}
  .quests::before{background:#ccc}
  a{text-decoration:none;color:#000}
  .proj__shots,.gal{display:none}
}