/* Das Geraet und seine Bedienflaechen. Lage und Groesse jedes Teils setzt
   js/radio.js in Prozent der Renderleinwand - hier steht nur das Aussehen.
   Schriftgroessen in cqw: 1cqw ist ein Hundertstel der Leinwandbreite,
   so wachsen Etiketten und Anzeige mit dem Bild.

   Zustand kommt als data-zustand an .geraet (aus | laedt | bereit | spielt |
   pause | puffert | fehler). --licht (0..1) ist die Helligkeit der
   Skalenbeleuchtung, --pegel die Lautheit der Wiedergabe. */

@property --licht { syntax: '<number>'; inherits: true; initial-value: 0; }
.geraet {
  --licht: 0;
  --pegel: 0;
  container-type: inline-size;
  transition: --licht 1.6s;
}
.geraet > * { position: absolute; }
.geraet:not([data-zustand="aus"]) { --licht: 1; }
.geraet[data-zustand="pause"], .geraet[data-zustand="bereit"] { --licht: .75; }
.geraet[data-zustand="fehler"] { --licht: .5; }

.koerper { width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* Der Tisch ist nass: die Front spiegelt sich, schwach und unscharf.
   Geklappt an der Unterkante der Front (transform-origin unten). */
.spiegel {
  overflow: hidden; pointer-events: none;
  transform-origin: 50% 100%; transform: scaleY(-1);
  opacity: .28; filter: blur(.12cqw) saturate(.8);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 32%);
  mask-image: linear-gradient(to top, #000, transparent 32%);
}
.spiegel img { position: absolute; height: auto; }
/* Wo das Geraet aufsteht, kommt kein Licht hin */
.kontakt { pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0 / .75), rgb(0 0 0 / .35) 60%, transparent); }

/* Warmes Licht aus Skala und Trommel auf die Frontplatte drumherum */
.radioschein {
  pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(28% 20% at 46% 26%, rgb(255 160 70 / calc(.2 * var(--licht))), transparent),
    radial-gradient(40% 34% at 46% 58%, rgb(255 140 50 / calc(.24 * var(--licht) + .1 * var(--pegel))), transparent);
}

/* ---------------------------------------------------- Skalenstreifen ---- */
/* Aus: unbeleuchtetes Glas, durch das die gedruckte Skala des Renders
   schwach durchscheint. An: dunkles Glas, Schrift und Welle leuchten. */
.streifen {
  overflow: hidden; cursor: pointer; touch-action: none;
  border-radius: .12cqw;
  background:
    radial-gradient(120% 160% at 50% 120%, rgb(255 150 50 / calc(.28 * var(--licht))), transparent 70%),
    rgb(16 8 3 / calc(.62 + .3 * var(--licht)));
  box-shadow: inset 0 .12cqw .3cqw rgb(0 0 0 / .9);
}
.streifen::after {
  /* Glas: Spiegelung oben, Staub */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(176deg, rgb(255 240 220 / .14), transparent 45%),
    linear-gradient(90deg, transparent 62%, rgb(255 255 255 / .06) 66%, transparent 70%);
}
#oszi { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(.15 + .85 * var(--licht)); }
.striche { position: absolute; inset: 0; pointer-events: none; opacity: calc(.25 + .75 * var(--licht)); }
.striche i { position: absolute; bottom: 0; width: .05cqw; height: 22%; background: rgb(var(--amber) / .55); }
.striche i.jetzt { height: 34%; background: rgb(var(--amber)); box-shadow: 0 0 .2cqw rgb(var(--amber)); }
.zeiger {
  position: absolute; top: 0; bottom: 0; width: .07cqw; margin-left: -.035cqw;
  background: #ff3a1a; box-shadow: 0 0 .25cqw rgb(255 60 20 / calc(.9 * var(--licht)));
  transition: left .3s cubic-bezier(.3, 1.4, .5, 1);
}
.streifen.zieht .zeiger { transition: none; }
.anzeige {
  position: absolute; inset: 0; margin: 0; padding: 0 .35cqw;
  display: flex; align-items: center; gap: .4cqw; pointer-events: none;
  font: .78cqw/1 'VT323', monospace; letter-spacing: .03em; white-space: nowrap;
  color: rgb(255 196 110); text-shadow: 0 0 .12cqw rgb(255 170 60), 0 0 .4cqw rgb(255 140 40 / .7);
  opacity: var(--licht);
}
.anzeige #anzZeit { margin-left: auto; }
.anzeige #anzDauer { opacity: .65; }
.geraet[data-zustand="laedt"] .anzeige, .geraet[data-zustand="puffert"] .anzeige { animation: blinken 1s steps(2) infinite; }
.geraet[data-zustand="fehler"] .anzeige { color: rgb(255 120 70); }
@keyframes blinken { 50% { opacity: .4; } }

/* Sprungziel beim Ueberfahren des Streifens */
.vorschau {
  margin: 0; pointer-events: none; z-index: 2; white-space: nowrap;
  transform: translate(-50%, calc(-100% - .35cqw));
  padding: .14cqw .35cqw .1cqw; border-radius: .1cqw;
  font: 1.15cqw/1 'VT323', monospace; color: rgb(255 196 110);
  background: rgb(14 8 3 / .92); border: .05cqw solid rgb(var(--amber) / .35);
  box-shadow: 0 .15cqw .4cqw rgb(0 0 0 / .7);
  opacity: 0; transition: opacity .15s;
}
.vorschau.zeigen { opacity: 1; }

/* -------------------------------------------------- Skalentrommel ---- */
.trommel { pointer-events: none; overflow: visible; }
.trommel-skala { transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.trommel-skala line { stroke: #2a1406; stroke-width: 2; }
.trommel-skala line.lang { stroke-width: 3; }
.trommel-skala text { font: 600 26px 'Oswald', sans-serif; fill: #3a1606; text-anchor: middle; }
.trommel-skala text.jetzt { fill: #a01a06; }
.trommel .index { stroke: #c81e0a; stroke-width: 3.5; }
.trommel-dunkel { fill: #050302; opacity: calc(.82 - .82 * var(--licht)); }
.trommel-grund { filter: brightness(calc(.55 + .45 * var(--licht) + .12 * var(--pegel))); }

/* ---------------------------------------------------- Drehknoepfe ---- */
.knopf { border-radius: 50%; cursor: grab; touch-action: none; background-repeat: no-repeat; outline-offset: .2cqw; }
.knopf:active { cursor: grabbing; }
/* Zeigt, dass man anfassen kann - das Bild selbst verraet es nicht */
.knopf:hover, .knopf:focus-visible { filter: brightness(1.2); }

/* ------------------------------------------- Tasten, Schalter, Flaechen ---- */
.flaeche {
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  border-radius: .25cqw; transition: box-shadow .08s, background-color .08s;
}
.flaeche:hover { background: rgb(255 220 160 / .06); }
/* Gedrueckt: die Taste sitzt tiefer im Rahmen - oben faellt Schatten hinein */
.drucktaste { border-radius: .18cqw; }
.drucktaste:active, .drucktaste[aria-pressed="true"] {
  background: linear-gradient(180deg, rgb(0 0 0 / .38), rgb(0 0 0 / .12) 45%, transparent);
  box-shadow: inset 0 .14cqw .22cqw rgb(0 0 0 / .55);
}
.netzknopf { border-radius: 50%; }
/* Ausgeschaltet ruft der Knopf nach einer Weile leise nach Aufmerksamkeit */
.geraet[data-zustand="aus"] .netzknopf { animation: rufen 2.6s 4s ease-out infinite; }
@keyframes rufen {
  0% { box-shadow: 0 0 0 0 rgb(255 70 40 / .45); }
  70%, 100% { box-shadow: 0 0 0 1.1cqw rgb(255 70 40 / 0); }
}
/* Ausgeschaltet glimmt der Knopf nicht - das gerenderte Rot wird abgedunkelt. */
.netzknopf::before {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  background: rgb(10 2 0 / .6); transition: opacity .4s;
}
.netzknopf::after {
  /* Licht kommt von hinten durch die rote Kappe - kein Glanzpunkt obendrauf */
  content: ''; position: absolute; inset: 24%; border-radius: 50%; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(circle at 50% 55%, rgb(255 90 60 / .55), rgb(220 30 10 / .35) 55%, transparent 75%);
  box-shadow: 0 0 1cqw .15cqw rgb(255 30 10 / .3);
  transition: opacity .4s;
}
.netzknopf[aria-checked="true"]::before { opacity: 0; }
.netzknopf[aria-checked="true"]::after { opacity: 1; animation: netzlampe 7s infinite; }
@keyframes netzlampe { 0%, 100% { opacity: 1; } 31% { opacity: .82; } 33% { opacity: 1; } 70% { opacity: .9; } }

/* kHz/MHz-Schieber, umgewidmet fuer die Sprungweite */
/* Die Fenster der Tasten zeigten Reste alter Symbole - darueber sitzen
   jetzt abgegriffene Kappen mit eingepraegtem Zeichen. */
.kappe {
  position: absolute; inset: 7% 8% 9%; border-radius: .14cqw;
  display: flex; align-items: center; justify-content: center; gap: .1cqw;
  font: 600 .78cqw/1 'Oswald', sans-serif; color: #b8ad92; letter-spacing: -.02em;
  /* Abgegriffen: Mitte vom Daumen blank, Raender voller Dreck */
  background:
    radial-gradient(55% 45% at 50% 45%, rgb(255 240 210 / .06), transparent 70%),
    radial-gradient(80% 60% at 20% 90%, rgb(70 52 28 / .45), transparent 70%),
    radial-gradient(60% 40% at 90% 10%, rgb(60 44 24 / .35), transparent 70%),
    linear-gradient(180deg, #2e2b25, #1c1a16 50%, #12110e);
  box-shadow: inset 0 .05cqw 0 rgb(255 240 210 / .08), inset 0 -.1cqw .14cqw rgb(0 0 0 / .6), 0 .08cqw .12cqw rgb(0 0 0 / .75);
  text-shadow: 0 -.03cqw 0 rgb(0 0 0 / .9), 0 .03cqw 0 rgb(255 255 255 / .08);
  filter: brightness(.8) saturate(.8); transition: transform .06s, filter .06s;
}
.kappe b { font-weight: 600; font-size: .8em; }
.kappe.rot {
  color: #d9bfa6;
  background:
    radial-gradient(55% 45% at 50% 45%, rgb(255 200 170 / .08), transparent 70%),
    radial-gradient(80% 60% at 20% 90%, rgb(40 16 4 / .55), transparent 70%),
    linear-gradient(180deg, #6a2416, #44130a 50%, #2c0b05);
}
.drucktaste:hover .kappe { filter: brightness(1) saturate(.85); }
.drucktaste:active .kappe, .drucktaste[aria-pressed="true"] .kappe {
  transform: translateY(.07cqw); filter: brightness(.68) saturate(.8);
  box-shadow: inset 0 .1cqw .18cqw rgb(0 0 0 / .75);
}
.drucktaste:disabled { cursor: default; }
.drucktaste:disabled .kappe { filter: brightness(.55); }

.schalter .schieber {
  position: absolute; top: 18%; bottom: 18%; width: 38%; left: 8%;
  border-radius: .08cqw;
  background: linear-gradient(90deg, #2a2620, #8a8270 30%, #4a4436 70%, #1a1712);
  box-shadow: 0 .05cqw .12cqw rgb(0 0 0 / .8);
  transition: left .12s;
}
.schalter[data-stellung="1"] .schieber { left: 54%; }

.sprecher { pointer-events: none; transform-origin: 50% 100%; transform: scale(calc(1 + var(--pegel) * .008)); }
.sprecher-flaeche { border-radius: .3cqw; }

/* --------------------------------------------------- Praegeband ---- */
/* Jahrzehnte alt: die Schrift vergilbt, das Band stumpf, verschmutzt und
   vom Licht der Umgebung mit abgedunkelt - kein Aufkleber von gestern. */
.band {
  pointer-events: none; white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--kipp, 0deg));
  padding: .07cqw .26cqw .05cqw; border-radius: .05cqw;
  font: 600 .46cqw/1.15 'Oswald', sans-serif; letter-spacing: .16em;
  color: #cfc6ad;
  background:
    radial-gradient(60% 120% at 80% 60%, rgb(90 70 40 / .35), transparent 70%),
    linear-gradient(180deg, #2c2a26, #151412 50%, #0e0d0b);
  box-shadow: 0 .03cqw .06cqw rgb(0 0 0 / .8), inset 0 .02cqw 0 rgb(255 255 255 / .1);
  text-shadow: 0 .03cqw 0 rgb(0 0 0 / .9), 0 -.02cqw 0 rgb(255 255 255 / .18);
  opacity: .9; filter: brightness(.88);
}
.band b { font-weight: 600; }
.band.rot { background: linear-gradient(180deg, #8a2418, #5e1008 50%, #440a05); }

/* ------------------------------------------------- Zettel auf dem Tisch ---- */
.zettel {
  position: absolute; left: var(--zettel-x); top: var(--zettel-y); width: var(--zettel-b);
  font-size: var(--zettel-schrift);
  padding: 1.2em 1.3em 1.1em; transform: rotate(-7deg); transform-origin: 0 0;
  font-family: 'Special Elite', monospace; color: #2a1e10;
  /* Liegt unter der Reklame: oben rechts faellt Pink darauf, unten links
     wird es dunkel - sonst leuchtet das Papier heller als alles drumherum. */
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(var(--pink) / calc(.22 * var(--neon))), transparent 70%),
    radial-gradient(80% 70% at 0% 100%, rgb(20 10 4 / .45), transparent 70%),
    radial-gradient(70% 50% at 80% 90%, rgb(90 60 20 / .32), transparent 70%),
    radial-gradient(40% 30% at 15% 15%, rgb(120 80 30 / .22), transparent 70%),
    linear-gradient(170deg, #cdbb8f, #a99668);
  clip-path: polygon(0 2%, 97% 0, 100% 96%, 4% 100%);
  filter: drop-shadow(0 .5em .6em rgb(0 0 0 / .6)) brightness(.74) contrast(1.05);
  z-index: 6;
}
.zettel p { margin: 0; }
.einschalten {
  display: block; width: 100%; padding: .3em 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 2.1em/1.1 'Special Elite', monospace; color: #2a1e10;
}
.einschalten small { display: block; margin-top: .4em; font-size: .55em; opacity: .75; }
.zettel .eingelegt { display: none; }
.zettel.an .einschalten { display: none; }
.zettel.an .eingelegt { display: block; }
.z-kopf { font: 700 .9em 'Oswald', sans-serif; letter-spacing: .3em; opacity: .65; }
.z-titel { margin: .35em 0 .25em !important; font-size: 1.35em; line-height: 1.15; }
.z-zeile { font-size: .95em; line-height: 1.45; }
.z-zeile:empty { display: none; }
.z-kapitel { color: #6a140a; }
.z-stand { font-variant-numeric: tabular-nums; }
.z-knoepfe { display: flex; gap: .6em; flex-wrap: wrap; margin-top: .7em !important; }
.stempel {
  display: inline-block; padding: .25em .55em; border: .15em solid currentColor; border-radius: .25em;
  background: none; cursor: pointer; text-decoration: none;
  font: 700 .95em 'Oswald', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6a140a;
}
.stempel:nth-child(2) { transform: rotate(-2deg); }
.stempel:hover { background: rgb(106 20 10 / .1); }
.stempel[aria-disabled="true"] { color: #5a5040; pointer-events: none; text-decoration: line-through; opacity: .7; }
.z-klein { font-size: .8em; margin-top: .4em !important; opacity: .75; }

.tastenhilfe {
  position: absolute; left: 1rem; bottom: .8rem; margin: 0; z-index: 6;
  opacity: 0; transition: opacity .6s; pointer-events: none;
  font: .78rem 'Oswald', sans-serif; letter-spacing: .05em; color: #b8a880;
}
body.tastatur .tastenhilfe { opacity: .75; }
.tastenhilfe kbd {
  font: inherit; padding: .05rem .35rem; margin: 0 .1rem; border-radius: .2rem;
  background: rgb(20 16 10 / .8); border: 1px solid #4a4432; color: #d8cca4;
}

/* ----------------------------------------------------- Senderliste ---- */
.senderliste {
  padding: 0; border: 0; background: none; color: inherit;
  width: min(36rem, 94vw); max-height: 88svh; overflow: visible;
}
.senderliste::backdrop { background: rgb(5 4 3 / .72); backdrop-filter: blur(2px); }
.klemmbrett {
  position: relative; padding: 2.4rem 1rem 1rem; border-radius: .6rem;
  background: linear-gradient(135deg, #6a4a2a, #4a3018 60%, #3a2410);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / .8);
  transform: rotate(-.8deg);
}
.klemme {
  position: absolute; left: 50%; top: -.6rem; width: 9rem; height: 2.6rem; transform: translateX(-50%);
  border-radius: .5rem .5rem 1rem 1rem; background: linear-gradient(180deg, #d8d4c4, #7a766a 60%, #4a4638);
}
.papier {
  position: relative; max-height: calc(88svh - 4rem); overflow-y: auto; padding: 1.2rem 1.2rem 1.4rem;
  font-family: 'Special Elite', monospace; color: #2a1e10;
  background:
    radial-gradient(60% 40% at 90% 95%, rgb(110 70 20 / .3), transparent 70%),
    #dccca0;
}
.papier h2 { margin: 0; font: 700 1.5rem 'Oswald', sans-serif; letter-spacing: .25em; text-transform: uppercase; }
.sl-unter { margin: .2rem 0 1rem; font-size: .95rem; opacity: .75; }
.papier ol { list-style: none; margin: 0; padding: 0; }
.papier li button {
  width: 100%; display: grid; grid-template-columns: 2.4rem 1fr auto 1.6rem; gap: .5rem; align-items: baseline;
  padding: .45rem .3rem; border: 0; border-bottom: 1px dashed rgb(42 30 16 / .35); background: none; cursor: pointer;
  font: 1rem 'Special Elite', monospace; color: inherit; text-align: left;
}
.papier li button:hover { background: rgb(120 80 30 / .12); }
.papier li .nr { opacity: .65; }
.papier li .dauer { opacity: .75; font-variant-numeric: tabular-nums; }
.papier li .stand { text-align: center; }
.papier li.jetzt button { font-weight: bold; background: rgb(200 60 20 / .14); }
.papier li.gehoert .titel { text-decoration: line-through; text-decoration-color: rgb(42 30 16 / .5); }
.sl-zu {
  position: absolute; right: .6rem; top: .6rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%;
  background: none; font-size: 1.2rem; cursor: pointer; color: #2a1e10;
}

/* ---------------------------------------------- Telefon: Notbedienteil ---- */
.notbedienung { display: none; }
body.hochkant .tastenhilfe { display: none; }
body.hochkant .zettel {
  position: relative; left: auto; top: auto; width: auto; margin: 1rem; font-size: 1rem; transform: rotate(-1deg);
}
body.hochkant .notbedienung {
  display: grid; gap: .9rem; margin: 0 1rem 2rem; padding: 1rem;
  border-radius: .8rem;
  background: linear-gradient(180deg, #4a4732, #34321f);
  box-shadow: 0 0 0 3px #1e1c13, 0 .6rem 1.4rem rgb(0 0 0 / .7), inset 0 2px 1px rgb(255 240 200 / .15);
}
.nb-status { margin: 0; font: 1.2rem 'VT323', monospace; color: rgb(255 196 110); text-shadow: 0 0 .4rem rgb(255 150 50 / .7); min-height: 1.2em; }
.nb-zeile { display: flex; align-items: center; gap: .6rem; }
.nb-schieber span { font: 1.15rem 'VT323', monospace; color: rgb(255 196 110); min-width: 4.4rem; text-align: center; }
.nb-schieber input { flex: 1; }
.nb-knoepfe { justify-content: space-between; }
.nb-knoepfe button {
  width: 3.4rem; height: 3.4rem; border: 0; border-radius: .5rem; cursor: pointer;
  font: 1.35rem 'Oswald', sans-serif; color: #2a1c0e; display: flex; align-items: center; justify-content: center; gap: .1rem;
  background: linear-gradient(180deg, #efe2bc, #c4b07e); box-shadow: 0 .25rem 0 #6a5a3a, 0 .35rem .5rem rgb(0 0 0 / .5);
}
.nb-knoepfe button small { font-size: .7rem; }
.nb-knoepfe button:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 #6a5a3a; }
.nb-knoepfe .nb-spiel { width: 4.6rem; height: 4.2rem; background: linear-gradient(180deg, #c8402a, #8a2010); color: #f4e4c4; box-shadow: 0 .25rem 0 #3a0c06, 0 .35rem .5rem rgb(0 0 0 / .5); }
.nb-wahl { justify-content: space-between; flex-wrap: wrap; }
.nb-wahl label { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 10rem; font: 600 .8rem 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #d8cca4; }
.nb-wahl select {
  font: 1.1rem 'VT323', monospace; color: rgb(255 196 110); background: #140c06; border: 2px solid #1e1c13; border-radius: .3rem; padding: .3rem;
  max-width: 100%;
}
.notbedienung input[type="range"] { accent-color: #c8402a; min-height: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .geraet, .zeiger, .trommel-skala, .flaeche, .schieber { transition: none !important; }
  .geraet .anzeige, .netzknopf, .netzknopf::after { animation: none !important; }
  .sprecher { transform: none; }
}