/* Freds Mikrofon: fünf eindeutige Zustände (Aufgabe #19, fred_zustand.js).
   Nur „hoert“ leuchtet (Schein, Pegelring, blinkender Punkt). Die anderen Zustände sind flach und haben je eigene
   Farbe und Symbol: aus grau/Mikrofon, überträgt gold/Pfeil, denkt blau/Punkte, spricht grün/Stopp. */
.fred-buehne { --z-aus: #7d6b76; --z-hoert: #c2105f; --z-uebertraegt: #a66f00; --z-denkt: #0055a3; --z-spricht: #3d7a12; --z: var(--z-aus); }
.fred-buehne[data-zustand="hoert"] { --z: var(--z-hoert); }
.fred-buehne[data-zustand="uebertraegt"] { --z: var(--z-uebertraegt); }
.fred-buehne[data-zustand="denkt"] { --z: var(--z-denkt); }
.fred-buehne[data-zustand="spricht"] { --z: var(--z-spricht); }

/* Statuszeile: Punkt, Text, Uhr */
.fred-status { display: flex; align-items: center; justify-content: center; gap: 8px; align-self: center; margin: 4px auto 0;
  padding: 7px 16px; border-radius: 999px; max-width: calc(100% - 32px); font-weight: 700; font-size: 1rem;
  font-variant-numeric: tabular-nums; color: var(--z); background: color-mix(in srgb, var(--z) 12%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--z) 35%, transparent); transition: color .2s, background .2s, border-color .2s; }
.fred-status-punkt { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--z); opacity: .45; }
.fred-status-zeit { font-weight: 600; opacity: .85; }
.fred-status-zeit:empty { display: none; }
.fred-buehne[data-zustand="hoert"] .fred-status { background: var(--z-hoert); color: #fff; border-color: var(--z-hoert); }
.fred-buehne[data-zustand="hoert"] .fred-status-punkt { background: #fff; opacity: 1; animation: fred-blinken 1s ease-in-out infinite; }
@keyframes fred-blinken { 50% { opacity: .25; } }

/* Pegelbalken: nur beim Zuhören sichtbar; grün-magenta, sobald Sprache ankommt; gestreift, wenn das Gerät keinen Pegel liefert */
.fred-pegel { width: min(260px, 70%); height: 8px; margin: 8px auto 0; border-radius: 4px; background: var(--fl2); overflow: hidden; visibility: hidden; }
.fred-buehne[data-zustand="hoert"] .fred-pegel { visibility: visible; }
.fred-pegel span { display: block; height: 100%; width: calc(var(--pegel, 0) * 100%); background: #b9a9b2; transition: width .06s linear; }
.fred-pegel.sprache span { background: var(--z-hoert); }
.fred-pegel.stumm span { width: 100%; background: repeating-linear-gradient(90deg, #b9a9b2 0 8px, transparent 8px 14px); }

/* Der große Knopf: mindestens 64 px, unten in Daumenreichweite */
.fred-bedienung { gap: 24px; padding: 10px 20px 2px; }
/* .fred-buehne davor: schlägt „button:hover“ aus style.css (auf dem iPhone bleibt :hover nach dem Tippen hängen) */
.fred-buehne .fred-mikro, .fred-buehne .fred-mikro:hover { position: relative; width: 84px; height: 84px; flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--z);
  box-shadow: 0 4px 12px rgba(40,20,30,.18); transition: background .2s, box-shadow .08s linear, transform .15s;
  -webkit-tap-highlight-color: transparent; }
.fred-mikro:active { transform: scale(.96); }
.fred-buehne[data-zustand="aus"] .fred-mikro { background: var(--fl); color: var(--z-aus); box-shadow: inset 0 0 0 3px var(--z-aus), 0 4px 12px rgba(40,20,30,.12); }
.fred-buehne[data-zustand="hoert"] .fred-mikro { background: radial-gradient(circle at 35% 30%, #ef3d8a, var(--z-hoert) 58%, #8a0a45);
  box-shadow: 0 0 26px 6px rgba(194,16,95,.55), 0 0 0 calc(6px + var(--pegel, 0) * 20px) rgba(194,16,95,.22);
  animation: fred-lauschen 2.2s ease-in-out infinite; }
@keyframes fred-lauschen { 50% { transform: scale(1.04); } }
.fred-buehne[data-zustand="uebertraegt"] .fred-mikro, .fred-buehne[data-zustand="denkt"] .fred-mikro { cursor: progress; }
.fred-mikro .sym { display: none; }
.fred-mikro svg.sym { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fred-buehne[data-zustand="aus"] .sym-mikro, .fred-buehne[data-zustand="hoert"] .sym-mikro { display: block; }
.fred-buehne[data-zustand="uebertraegt"] .sym-hoch { display: block; animation: fred-hoch-pfeil 1s ease-in-out infinite; }
@keyframes fred-hoch-pfeil { 50% { transform: translateY(-4px); } }
.fred-buehne[data-zustand="denkt"] .sym-punkte { display: flex; gap: 6px; }
.sym-punkte i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: fred-punkt 1.2s ease-in-out infinite; }
.sym-punkte i:nth-child(2) { animation-delay: .2s; } .sym-punkte i:nth-child(3) { animation-delay: .4s; }
@keyframes fred-punkt { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-4px); } }
.fred-buehne[data-zustand="spricht"] .sym-stopp { display: block; width: 26px; height: 26px; border-radius: 6px; background: #fff; }

/* Was ein Tipp bewirkt, steht direkt unter dem Knopf */
.fred-knopf-text { text-align: center; font-weight: 650; font-size: .98rem; color: var(--z); padding: 6px 20px 0; min-height: 1.5em; }
.fred-hinweis { font-size: .9rem; color: var(--tx2); padding: 4px 20px 14px; min-height: 2.6em; line-height: 1.35; }

/* Nicht angekommen: Aufnahme oder Frage liegt auf dem Gerät */
.fred-liegt { margin: 6px 16px 0; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--warn) 14%, var(--fl));
  border: 1.5px solid color-mix(in srgb, var(--warn) 45%, transparent); color: var(--tx); font-size: .93rem; }
.fred-liegt[hidden] { display: none; }
.fred-liegt p { margin: 0 0 8px; }
.fred-liegt-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.fred-liegt-knoepfe button { min-height: 44px; padding: 0 16px; border-radius: 22px; }

@media (prefers-color-scheme: dark) {
  .fred-buehne { --z-aus: #b3a3ad; --z-hoert: #ff3d8f; --z-uebertraegt: #f0b84a; --z-denkt: #6aa8ff; --z-spricht: #8fd14f; }
  .fred-buehne[data-zustand="uebertraegt"] .fred-mikro, .fred-buehne[data-zustand="denkt"] .fred-mikro,
  .fred-buehne[data-zustand="spricht"] .fred-mikro { color: #17121a; }
  .fred-buehne[data-zustand="denkt"] .sym-punkte i, .fred-buehne[data-zustand="spricht"] .sym-stopp { background: #17121a; }
}
@media (max-width: 760px) {
  .fred-portrait { width: 132px; height: 132px; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fred-mikro, .fred-status-punkt, .sym-punkte i, .sym-hoch { animation: none !important; }
}

/* fred.nicolehuber.de: Bühne als ganze Seite, ohne Schließen und Schleier (Aufgabe #29) */
body[data-bereich="fred"] { padding-bottom: 0; }
body.fred-ganz .fred-buehne { inset: 0; width: auto; height: auto; max-height: none; border-radius: 0; animation: none;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body.fred-ganz .fred-schleier, body.fred-ganz .fred-zu { display: none; }
.fred-passkey { position: fixed; z-index: 60; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 12px);
  max-width: 480px; margin: 0 auto; box-shadow: 0 12px 40px rgba(60, 0, 30, .3); }