/* bernhardebner.de – Werkbank
   Aufbau: Kopf mit geschmiedetem Titel, dann eine Bühne in zwei Szenen: der Tisch von oben (Projekte als Abzüge)
   und ein kleines Kino (Workflix). Mit Scrollytelling fährt die Kamera vom Tisch durch den Laptop in den Saal.
   Farbwelt F14 Nachtschicht. Ein Look, bewusst nur dunkel. Jeder Abzug trägt Farben und Schrift seines Projekts. */

@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-standard.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
/* Projektschriften, nur mit den Zeichen der Kacheln */
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-italic-hub.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Fredericka the Great";src:url(../fonts/fredericka-hub.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kalam";src:url(../fonts/kalam-hub.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:dark;
  /* F14 Nachtschicht: Grund trägt, Charakter prägt, Akzent zeigt */
  --grund:#141416;        /* Kohle */
  --flaeche:#26272B;      /* Graphit */
  --text:#ECE9E2;         /* Knochenweiß */
  --charakter:#6E7681;    /* Stahlgrau */
  --akzent:#F5D90A;       /* Signalgelb */
  --bernstein:#FFB000;    /* Erweiterung, warmes Licht */
  --leise:#A3A9B2;        /* Nebentext, aus Stahlgrau aufgehellt (7,9 : 1 auf Kohle) */
  /* Gegenstände auf dem Tisch */
  --papier:#f3ecdf; --zettel:#efe3c8;
  /* alte Namen für die Statistik-Seite */
  --nacht:var(--grund); --russ:var(--flaeche); --staub:var(--leise); --messing:var(--akzent); --eiche:var(--bernstein);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"Cascadia Mono",Menlo,monospace;
  --hand:Kalam,"Segoe Print","Comic Sans MS",cursive;
  --dauer-kurz:160ms; --dauer-mittel:320ms; --dauer-lang:700ms; --dauer-signatur:1100ms;
  --kurve-rein:cubic-bezier(.16,.8,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--grund)}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--display);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
button{font:inherit;color:inherit}
.rand{padding-inline:clamp(16px,4vw,56px)}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}

/* Kopf */
.kopf{padding-block:clamp(28px,5vw,64px) clamp(20px,3vw,36px);display:flex;flex-wrap:wrap;gap:16px 48px;align-items:flex-end;justify-content:space-between;max-width:1600px;margin-inline:auto}
.kopf-titel{min-width:0}
.marke{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.marke b{color:var(--akzent);font-weight:500}
h1{margin:.15em 0 0;font-size:clamp(3.2rem,11vw,9.5rem);font-weight:800;font-stretch:100%;line-height:.86;letter-spacing:-.02em;font-variation-settings:"opsz" 96;white-space:nowrap}
h1 span{display:inline-block;transition:font-weight 260ms var(--kurve-rein),font-stretch 260ms var(--kurve-rein),color 260ms}
.lead{max-width:34ch;margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:300;text-wrap:balance;min-width:0}

/* Szenen: jede ist eine 16:9-Fläche, alle Maße darin in cqw (Prozent der Breite) */
.szene{position:relative;container-type:inline-size;width:100%;aspect-ratio:16/9;overflow:hidden;background-color:var(--flaeche);background-repeat:no-repeat;background-position:center;background-size:cover}
.fahrt{display:none}

/* Szene 1: der Tisch, randlos über die ganze Breite */
.tisch{--bild:image-set(url(../img/werkbank-2560.webp) type("image/webp"),url(../img/werkbank-1920.jpg) type("image/jpeg"));background-image:url(../img/werkbank-1920.jpg);background-image:var(--bild)}
@media (max-width:1400px){.tisch{--bild:image-set(url(../img/werkbank-1600.webp) type("image/webp"),url(../img/werkbank-1920.jpg) type("image/jpeg"))}}
@media (min-width:2200px){.tisch{--bild:image-set(url(../img/werkbank-3840.webp) type("image/webp"),url(../img/werkbank-1920.jpg) type("image/jpeg"))}}
.tisch::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--grund),transparent 14%,transparent 88%,var(--grund));pointer-events:none}
.dunkel{position:absolute;inset:0;background:var(--grund);opacity:0;pointer-events:none}
.licht{position:absolute;left:0;top:0;width:70cqw;height:70cqw;margin:-35cqw 0 0 -35cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,150,.22),transparent);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity var(--dauer-lang) ease-out;will-change:transform}
.tisch.zeigt .licht{opacity:1}

/* Auslage: bis drei Abzüge liegen rechts neben Schokolade und Spule */
.auslage{--breite:16cqw;position:absolute;left:46%;right:19%;top:24%;bottom:6%;display:flex;gap:3cqw;align-items:center;justify-content:center;list-style:none;margin:0;padding:0}
.auslage:has(> li:nth-child(3)){--breite:12cqw;left:45%;right:18%;gap:2cqw}
.auslage > li{min-width:0}
.auslage > li:nth-child(even) .abzug{margin-top:5cqw}

.abzug{--r:-4deg;position:relative;display:block;width:var(--breite);font-size:calc(var(--breite) * .056);padding:.55em .55em 0;background:var(--papier);color:#17120c;text-decoration:none;border-radius:2px;transform:rotate(var(--r));transition:transform var(--dauer-mittel) var(--kurve-rein);box-shadow:.2em .3em .5em rgba(0,0,0,.45),.9em 1.4em 2em rgba(0,0,0,.4)}
.abzug::after{content:"";position:absolute;inset:0;border-radius:2px;box-shadow:1.6em 2.6em 3.4em rgba(0,0,0,.6);opacity:0;transition:opacity var(--dauer-mittel) ease-out;pointer-events:none}
.abzug:hover,.abzug:focus-visible{transform:rotate(0deg) translateY(-.5em) scale(1.04)}
.abzug:hover::after,.abzug:focus-visible::after{opacity:1}
.abzug:active{transform:rotate(0deg) translateY(-.15em) scale(1.01);transition-duration:var(--dauer-kurz)}
.abzug:focus-visible{outline-offset:4px}
.flaeche{aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between;padding:1.1em 1em;overflow:hidden}
.zettel{display:flex;justify-content:space-between;gap:.6em;align-items:baseline;padding:.6em .15em .7em;font-family:var(--mono);font-size:.68em;letter-spacing:.04em}
.zettel span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zettel span:last-child{white-space:nowrap}
.kennung{font-family:var(--mono);font-size:.62em;letter-spacing:.16em;text-transform:uppercase}
.abzug h2{margin:0;line-height:.95;font-weight:500}
.abzug p{margin:.5em 0 0;font-size:.82em;line-height:1.3}

/* Abzug After Wiesn: Nacht, Himmel, Mais */
.abzug.wiesn{--r:-4deg}
.wiesn .flaeche{background:linear-gradient(170deg,#0c1730 55%,#1c3a66);color:#f4ecd8}
.wiesn .kennung{color:#9fd0ee}
.wiesn h2{font-family:"Bodoni Moda","Bodoni MT",Didot,serif;font-style:italic;font-size:2.7em;color:#f2c230}
.wiesn hr{border:0;border-top:1px solid #9fd0ee;width:2.2em;margin:.9em 0 0}

/* Abzug Karusa: Sonnengelb, Rot, Schwarz, Karo */
.abzug.karusa{--r:3deg}
.karusa .flaeche{background:#f6c21c;color:#17120c;padding-top:0}
.karo{height:2.4em;margin:0 -1em;background:repeating-linear-gradient(90deg,rgba(200,40,30,.55) 0 .6em,transparent .6em 1.2em),repeating-linear-gradient(0deg,rgba(200,40,30,.55) 0 .6em,transparent .6em 1.2em),#fff8ea}
.karusa .kennung{color:#a51f17;margin-top:1em;display:block}
.karusa h2{font-family:"Fredericka the Great",Rockwell,Georgia,serif;font-size:2.9em}
.karusa p{font-family:var(--hand);font-size:.95em}

/* Die Filmspule auf dem Tisch führt ins Kino. Mitte 30,32 % / 78,8 %, Radius 9,75 % der Breite */
.spule{position:absolute;left:20.57cqw;top:34.58cqw;width:19.5cqw;height:19.5cqw;border-radius:50%;background:var(--flaeche) url(../img/werkbank-1920.jpg) no-repeat;background-image:var(--bild);background-size:100cqw auto;background-position:-20.57cqw -34.58cqw;transition:transform 1.6s var(--kurve-rein),filter var(--dauer-mittel);display:block;text-decoration:none;color:inherit}
.spule:hover,.spule:focus-visible{transform:rotate(-200deg);filter:brightness(1.12)}
.spule:focus-visible{outline-offset:6px;outline-style:dashed}
.etikett{position:absolute;left:37cqw;top:47.5cqw;transform:rotate(-6deg);font-family:var(--hand);font-size:clamp(11px,1.35cqw,22px);line-height:1;color:#2a1f12;background:var(--zettel);padding:.45em .7em .4em;box-shadow:.2em .4em .8em rgba(0,0,0,.5);text-decoration:none;white-space:nowrap;transition:transform var(--dauer-mittel) var(--kurve-rein)}
.etikett b{font-family:var(--display);font-weight:800;font-stretch:75%;letter-spacing:.02em;font-size:1.15em}
.spule:hover + .etikett,.etikett:hover{transform:rotate(-2deg) translateY(-.2em)}

.notiz{position:absolute;right:3cqw;bottom:3cqw;transform:rotate(-7deg);font-family:var(--hand);font-size:clamp(11px,1.25cqw,19px);line-height:1.2;color:#2a1f12;background:var(--zettel);padding:.5em .8em;box-shadow:.2em .4em .8em rgba(0,0,0,.5);max-width:11em}

/* Szene 2: das Kino. Leinwand: links 37,65 %, oben 20 %, Breite 38,04 %, Höhe 38,1 % */
.kino{--kbild:image-set(url(../img/kino-2560.webp) type("image/webp"),url(../img/kino-1920.jpg) type("image/jpeg"));background-image:url(../img/kino-1920.jpg);background-image:var(--kbild)}
@media (max-width:1400px){.kino{--kbild:image-set(url(../img/kino-1600.webp) type("image/webp"),url(../img/kino-1920.jpg) type("image/jpeg"))}}
.kino::after{content:"";position:absolute;inset:auto 0 0;height:8cqw;background:linear-gradient(transparent,var(--grund));pointer-events:none}
.wf-kopf{position:absolute;left:4cqw;top:12cqw;width:29cqw}
.wf-kopf h2{margin:0;font-size:7.2cqw;line-height:.85;font-weight:800;font-stretch:75%;letter-spacing:-.01em;color:var(--akzent);font-variation-settings:"opsz" 96}
.wf-kopf p{margin:1.1cqw 0 0;font-size:clamp(13px,1.15cqw,20px);font-weight:300;max-width:22ch;color:var(--text)}

.leinwand{position:absolute;left:37.65cqw;top:11.23cqw;width:38.04cqw;height:21.4cqw;overflow:hidden;background:#000;box-shadow:0 0 6cqw rgba(255,232,190,.12)}
.leinwand video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.abspielen{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;gap:1.1em;padding:1.1em 1.3em;border:0;cursor:pointer;text-align:left;font-size:clamp(11px,1.05cqw,18px);background:linear-gradient(transparent,rgba(20,20,22,.88) 45%);color:var(--text)}
.abspielen b{display:block;font-size:1.5em;font-weight:800;font-stretch:85%;line-height:1}
.abspielen small{display:block;font-family:var(--mono);font-size:.78em;letter-spacing:.08em;color:var(--leise);margin-top:.35em}
.dreieck{flex:none;width:2.6em;height:2.6em;border-radius:50%;background:var(--akzent);position:relative;transition:transform var(--dauer-kurz) var(--kurve-rein)}
.dreieck::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:.55em 0 .55em .9em;border-color:transparent transparent transparent var(--grund)}
.abspielen:hover .dreieck,.abspielen:focus-visible .dreieck{transform:scale(1.12)}

/* Kinokarten: Graphit, Abriss in Signalgelb, wenn gewählt */
.karten{position:absolute;left:12cqw;right:12cqw;top:36.5cqw;display:flex;gap:2cqw;justify-content:center;align-items:flex-start}
.karte{--r:-2deg;width:21cqw;font-size:calc(21cqw * .05);display:flex;align-items:stretch;padding:0;border:0;cursor:pointer;text-align:left;background:var(--flaeche);color:var(--text);border-radius:.35em;transform:rotate(var(--r));box-shadow:.3em .5em 1.4em rgba(0,0,0,.55);transition:transform var(--dauer-mittel) var(--kurve-rein),background var(--dauer-kurz)}
.karte:nth-child(2){--r:1.5deg;margin-top:1.2cqw}
.karte:nth-child(3){--r:-1deg}
.karte:hover,.karte:focus-visible{transform:rotate(0deg) translateY(-.5em)}
.abriss{flex:none;width:3.4em;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;font-size:1em;letter-spacing:.05em;writing-mode:vertical-rl;color:var(--leise);border-right:2px dashed var(--grund);background:#1d1e21;border-radius:.35em 0 0 .35em;transition:background var(--dauer-kurz),color var(--dauer-kurz)}
.karte-text{display:flex;flex-direction:column;gap:.3em;padding:1em 1.1em 1em;min-width:0}
.karte .kennung{font-size:.72em;color:var(--leise)}
.karte b{font-size:1.75em;font-weight:800;font-stretch:85%;line-height:1}
.karte-text > span:not(.kennung):not(.lauf){font-size:.9em;font-weight:300;line-height:1.3}
.lauf{font-family:var(--mono);font-size:.72em;letter-spacing:.06em;color:var(--leise);margin-top:.2em}
.karte[aria-checked="true"] .abriss{background:var(--akzent);color:var(--grund)}
.karte[aria-checked="true"]{background:#2e2f34}

/* Großer Saal: Film mit Ton */
.saal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,20,22,.94)}
.saal-rahmen{width:min(100%,1280px);display:flex;flex-direction:column;gap:12px}
.saal-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.saal-kopf b{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:800;font-stretch:80%;color:var(--akzent);line-height:1}
.schliessen{background:none;border:1px solid var(--charakter);border-radius:99px;padding:.45em 1em;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;cursor:pointer}
.schliessen:hover{border-color:var(--akzent);color:var(--akzent)}
.saal video{width:100%;aspect-ratio:16/9;background:#000;display:block}

/* Fuß */
.fuss{max-width:1600px;margin-inline:auto;padding-block:clamp(28px,4vw,56px) 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px 56px;align-items:end}
.fuss p{margin:0;max-width:60ch;font-weight:300;min-width:0}
.absender{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--leise);line-height:1.7;display:flex;flex-direction:column;gap:14px;min-width:0}
.absender b{color:var(--text);font-weight:500}
.absender nav{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
.absender a{text-decoration:none;border-bottom:1px solid transparent;transition:color var(--dauer-kurz),border-color var(--dauer-kurz)}
.absender a:hover{color:var(--akzent);border-color:var(--akzent)}
.absender .stat{margin-left:auto;display:inline-flex;opacity:.55;border:0}
.absender .stat:hover{opacity:1}

/* Nach oben */
.hoch{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:20;width:48px;height:48px;border-radius:50%;background:var(--flaeche);border:1px solid var(--charakter);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity var(--dauer-mittel),transform var(--dauer-mittel),background var(--dauer-kurz),color var(--dauer-kurz)}
.hoch.da{opacity:1;transform:none;pointer-events:auto}
.hoch:hover{background:var(--akzent);border-color:var(--akzent);color:var(--grund)}
.hoch svg{width:20px;height:20px}

/* Unterseiten: Impressum, Datenschutz */
.text{max-width:1600px;margin-inline:auto;padding-block:0 64px}
.text .spalte{max-width:66ch;display:flex;flex-direction:column;gap:16px;font-weight:300}
.text h2{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin:0 0 8px}
.text p{margin:0}
.text b{font-weight:600;color:var(--akzent)}
.zurueck{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--leise);text-decoration:none}
.zurueck:hover{color:var(--akzent)}

/* Scrollytelling (setzt das Skript nur auf großen Bildschirmen mit erlaubter Bewegung):
   Die Bühne bleibt stehen, beim Scrollen geht der Tisch über die Kamerafahrt in das Kino über. */
.buehne.scrolly{height:440vh;position:relative}
.scrolly .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--grund)}
.scrolly .szene,.scrolly .fahrt{position:absolute;left:0;top:50%;width:100%;aspect-ratio:16/9;translate:0 -50%}
.scrolly .fahrt{display:block;opacity:var(--b,0);pointer-events:none}
.scrolly .tisch{opacity:var(--a,1);visibility:var(--av,visible)}
.scrolly .kino{opacity:var(--c,0);visibility:var(--cv,hidden)}
.scrolly .tisch::before{display:none}
.scrolly .auslage{translate:0 calc(var(--weg,0) * -6cqw)}
.scrolly .kino .karten{translate:0 calc((1 - var(--c,0)) * 4cqw)}
.scrolly .kino .wf-kopf{translate:calc((1 - var(--c,0)) * -3cqw) 0}

/* Schwung: Titel wird geschmiedet, Lampe geht an, Abzüge werden hingelegt. Nur wenn Bewegung erlaubt ist. */
@media (prefers-reduced-motion:no-preference){
  .dunkel{animation:lampe var(--dauer-signatur) ease-out both}
  .abzug,.notiz,.etikett{animation:hinlegen var(--dauer-lang) var(--kurve-rein) backwards}
  .auslage > li:nth-child(1) .abzug{animation-delay:1050ms}
  .auslage > li:nth-child(2) .abzug{animation-delay:1200ms}
  .auslage > li:nth-child(3) .abzug{animation-delay:1350ms}
  .etikett{--r:-6deg;animation-delay:1450ms}
  .notiz{--r:-7deg;animation-delay:1600ms}
  h1 span{animation:schmieden 620ms cubic-bezier(.2,.9,.3,1.25) backwards}
  h1 span:nth-child(2){animation-delay:85ms} h1 span:nth-child(3){animation-delay:170ms} h1 span:nth-child(4){animation-delay:255ms}
  h1 span:nth-child(5){animation-delay:340ms} h1 span:nth-child(6){animation-delay:425ms} h1 span:nth-child(7){animation-delay:510ms} h1 span:nth-child(8){animation-delay:595ms}
}
@keyframes lampe{0%{opacity:.82}18%{opacity:.5}26%{opacity:.74}40%{opacity:.3}100%{opacity:0}}
@keyframes hinlegen{from{opacity:0;transform:translateY(-2.2em) rotate(calc(var(--r,-7deg) + 5deg)) scale(1.08)}}
@keyframes schmieden{
  0%{opacity:0;font-weight:200;font-stretch:75%;transform:translateY(-.35em)}
  55%{opacity:1;font-weight:800;font-stretch:100%;transform:translateY(.03em) scale(1.06,.9)}
  78%{transform:translateY(0) scale(.98,1.04)}
  100%{transform:none}
}

/* Handy und schmale Fenster: Szenen untereinander, ohne Kamerafahrt */
@media (max-width:760px){
  .tisch{aspect-ratio:auto;background-size:auto 100%;background-position:42% center;--bild:image-set(url(../img/werkbank-1600.webp) type("image/webp"),url(../img/werkbank-1920.jpg) type("image/jpeg"))}
  .auslage,.auslage:has(> li:nth-child(3)){position:relative;inset:auto;flex-direction:column;gap:28px;padding:72px 16px 110px}
  .abzug{width:min(100%,270px);font-size:14px}
  .auslage > li:nth-child(even) .abzug{margin-top:0}
  .notiz{right:16px;bottom:24px;font-size:14px}
  .licht,.spule{display:none}
  .etikett{position:absolute;left:16px;top:22px;font-size:15px}
  .kino{aspect-ratio:auto;background-size:100% auto;background-position:top center;padding:46vw 16px 40px;display:flex;flex-direction:column;gap:20px}
  .kino::after{display:none}
  .wf-kopf,.leinwand,.karten{position:relative;left:auto;right:auto;top:auto;width:auto}
  .wf-kopf h2{font-size:clamp(3rem,16vw,4.4rem)}
  .wf-kopf p{font-size:16px;margin-top:8px}
  .leinwand{width:100%;height:auto;aspect-ratio:16/9}
  .abspielen{font-size:14px}
  .karten{flex-direction:column;gap:14px;align-items:stretch}
  .karte,.karte:nth-child(2){width:100%;font-size:15px;margin-top:0}
  .hoch{right:16px;width:44px;height:44px}
}