/* Folien-Technik Anfragen Rhein: Bühne 1600 x 900, skaliert aufs Fenster. Farben und Schriften aus dem Brand Kit. */
@import url("../marke/marke.css");
@font-face { font-family: "Figtree"; src: url("../marke/schriften/figtree-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 300 900; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Allura"; src: url("../marke/schriften/allura-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --sanft: cubic-bezier(.22, .61, .36, 1);
  --weich: cubic-bezier(.65, 0, .35, 1);
  --dauer: .9s;
  --linie-hell: rgba(241, 240, 236, .14);
  --linie-dunkel: rgba(20, 39, 62, .12);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--tief); overflow: hidden; }
body { font-family: var(--leib); color: var(--tinte); -webkit-font-smoothing: antialiased; }

/* Bühne */
.deck { position: fixed; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: 0 0; }
.folie { position: absolute; inset: 0; overflow: hidden; background: var(--papier); color: var(--tinte);
  opacity: 0; visibility: hidden; transform: translateY(70px) scale(.985);
  transition: opacity var(--dauer) var(--sanft), transform var(--dauer) var(--sanft), visibility 0s linear var(--dauer); }
.folie.dunkel { background: var(--schwedenblau); color: var(--hell); }
.folie.nacht { background: var(--nacht); color: var(--hell); }
.folie.aktiv { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; z-index: 2; }
.folie.vorbei { transform: translateY(-70px) scale(.985); }
.innen { position: absolute; inset: 0; padding: 88px 112px; }

/* Schritte innerhalb einer Folie */
[data-schritt] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--sanft), transform .8s var(--sanft); }
[data-schritt].an { opacity: 1; transform: none; }
[data-bei] { opacity: 0; transform: translateY(18px) scale(.98); pointer-events: none; transition: opacity .7s var(--sanft), transform .7s var(--sanft); }
[data-bei].jetzt { opacity: 1; transform: none; pointer-events: auto; transition-delay: .18s; }
.ohne-bewegung [data-schritt], .ohne-bewegung [data-bei] { transition: none; }

/* Typografie */
.dachzeile { font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-leise); margin: 0 0 22px; }
.dunkel .dachzeile, .nacht .dachzeile { color: var(--messing-hell); }
h1, h2, h3 { font-family: var(--kopf); font-weight: 900; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
h1 { font-size: 104px; line-height: .96; }
h2 { font-size: 72px; line-height: 1; }
h3 { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; }
.fliess { font-size: 25px; line-height: 1.5; color: var(--tinte-leise); max-width: 34em; margin: 28px 0 0; }
.dunkel .fliess, .nacht .fliess { color: var(--hell-leise); }
.rhein { font-family: var(--schrift); font-weight: 400; font-style: normal; letter-spacing: 0; color: var(--messing);
  font-size: 1.32em; line-height: .8; padding: 0 .14em 0 .04em; display: inline-block; }
.dunkel .rhein, .nacht .rhein { color: var(--messing-hell); }
.gold { color: var(--messing); }
.dunkel .gold, .nacht .gold { color: var(--messing-hell); }
.nr { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--messing); letter-spacing: .02em; }
.dunkel .nr, .nacht .nr { color: var(--messing-hell); }

/* Fuß jeder Folie: Logo und Nummer, automatisch */
.fuss { position: absolute; left: 112px; right: 112px; bottom: 38px; display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--tinte-leise); font-variant-numeric: tabular-nums; pointer-events: none; }
.dunkel .fuss, .nacht .fuss { color: var(--hell-leise); }
.fuss img { height: 34px; width: auto; opacity: .9; }
.fuss .fuss-nr b { color: var(--tinte); font-weight: 800; }
.dunkel .fuss .fuss-nr b, .nacht .fuss .fuss-nr b { color: var(--hell); }

/* Fortschritt */
.fortschritt { position: fixed; left: 0; bottom: 0; height: 3px; width: 100%; z-index: 20; pointer-events: none; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--messing); transition: width .9s var(--sanft); }

/* Sprechnotizen (Taste N) */
.notiz { display: none; }
.notiz-feld { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px); width: min(900px, 92vw); max-height: 34vh; overflow: auto;
  background: rgba(11, 23, 38, .94); color: var(--hell); border: 1px solid var(--linie-hell); border-radius: 16px; padding: 18px 22px;
  font: 16px/1.5 var(--leib); z-index: 30; opacity: 0; pointer-events: none; transition: opacity .4s var(--sanft), transform .4s var(--sanft); backdrop-filter: blur(10px); }
.notiz-feld.an { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.notiz-feld b { color: var(--messing-hell); display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.notiz-feld p { margin: 0 0 8px; }

/* Übersicht (Taste Ü oder O) */
.uebersicht .deck { transform: none !important; position: static; width: auto; height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; padding: 40px; }
html.uebersicht, html.uebersicht body { overflow: auto; height: auto; }
.uebersicht .folie { position: relative; inset: auto; width: 1600px; height: 900px; zoom: .2; opacity: 1; visibility: visible; transform: none; cursor: pointer; border-radius: 40px;
  outline: 0 solid var(--messing); transition: outline-width .2s; }
.uebersicht .folie:hover { outline-width: 14px; }
.uebersicht .folie [data-schritt], .uebersicht .folie [data-bei] { opacity: 1; transform: none; }
.uebersicht .folie [data-bei]:not(.erste) { display: none; }
.uebersicht .folie.ziehen { opacity: .4; }
.uebersicht .folie::after { content: attr(data-nummer) "  " attr(data-titel); position: absolute; left: 50px; top: 40px; font: 800 60px/1 var(--kopf);
  color: var(--messing); background: rgba(11, 23, 38, .85); padding: 18px 30px; border-radius: 24px; z-index: 50; }
.uebersicht .fortschritt, .uebersicht .notiz-feld { display: none; }

/* Bearbeiten (Taste E) */
.bearbeiten [data-text] { outline: 1.5px dashed rgba(196, 162, 101, .55); outline-offset: 6px; border-radius: 4px; cursor: text; }
.bearbeiten [data-text]:focus { outline: 2px solid var(--messing); background: rgba(196, 162, 101, .08); }
.leiste { position: fixed; top: 16px; right: 16px; z-index: 40; display: none; gap: 8px; align-items: center; background: rgba(11, 23, 38, .94);
  color: var(--hell); padding: 8px 8px 8px 16px; border-radius: 999px; font: 600 14px var(--leib); border: 1px solid var(--linie-hell); }
.bearbeiten .leiste { display: flex; }
.leiste button { font: 700 14px var(--leib); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; background: var(--messing); color: var(--tief); }
.leiste button.leise { background: transparent; color: var(--hell); border: 1px solid var(--linie-hell); }
.leiste span { color: var(--hell-leise); min-width: 140px; }

/* Hinweis unten links beim Start */
.tasten { position: fixed; left: 18px; bottom: 14px; z-index: 25; font: 500 12px var(--leib); color: var(--hell-leise); opacity: 0; transition: opacity .6s; pointer-events: none; }
.tasten.an { opacity: .8; }
.tasten kbd { font: 700 11px var(--leib); border: 1px solid var(--linie-hell); border-radius: 5px; padding: 1px 6px; margin: 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .folie, [data-schritt], [data-bei] { transition-duration: .01s !important; transform: none !important; }
}

/* Folienwechsel: Vorhang in Schwedenblau mit Messing-Welle (wie der Seitenübergang der Website) */
.vorhang { position: fixed; left: 0; right: 0; top: -120px; height: calc(100vh + 240px); z-index: 200; pointer-events: none; display: flex; flex-direction: column;
  visibility: hidden; transform: translate3d(0, -100%, 0); will-change: transform; backface-visibility: hidden; }
.vorhang .vh-koerper { flex: 1; background: #14273e; margin: -1px 0; }
.vorhang .vh-welle { display: block; width: 100%; height: 120px; flex: none; }
.vorhang .vh-flaeche { fill: #14273e; }
.vorhang .vh-linie { fill: none; stroke: #c4a265; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.vorhang.von-oben { visibility: visible; transform: translate3d(0, -100%, 0); }
.vorhang.von-oben.rein { transform: translate3d(0, 0, 0); transition: transform .5s cubic-bezier(.6,0,.9,.6); }
.vorhang.deckt { visibility: visible; transform: translate3d(0, 0, 0); }
.vorhang.raus { visibility: visible; transform: translate3d(0, 100%, 0); transition: transform .7s cubic-bezier(.1,.45,.3,1); }
@media (prefers-reduced-motion: reduce) { .vorhang { display: none; } }
html.hart .folie { transition: none !important; }