/* ARIS Voice Capture Demo – ERGO-nahes Rot als Akzent, Kassette dunkel. */
:root {
  --rot: #e3000f; --tinte: #1c1c1e; --papier: #f5f4f1; --karte: #ffffff;
  --rand: #d9d6d0; --gruen: #1e8e3e; --gelb: #f9ab00; --grau: #9aa0a6;
}
* { box-sizing: border-box; margin: 0; }
body { font: 15px/1.45 "Segoe UI", system-ui, sans-serif; background: var(--papier); color: var(--tinte); }
header { padding: 14px 22px 6px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.logo { font-size: 26px; font-weight: 800; letter-spacing: 2px; }
.logo-punkt { color: var(--rot); }
.untertitel { color: #666; font-size: 13px; }
main { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; padding: 10px 22px; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 14px 16px; }
.karte.breit { grid-column: 1 / -1; }
.karte.dunkel { background: #23252b; color: #eee; border-color: #111; }
h2 { font-size: 16px; } h2 small { font-weight: 400; color: #888; font-size: 12px; }

/* Profil */
.profil-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
#seiten-tabs button { border: 1px solid var(--rand); background: #fafafa; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
#seiten-tabs button.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; }
.bogen-kopf { margin: 10px 0; padding: 7px 10px; background: #111; color: #fff; border-radius: 6px; font-size: 13px; }
#feldliste { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; min-height: 330px; align-content: start; }
.feld { border: 1px solid var(--rand); border-left: 5px solid var(--grau); border-radius: 6px; padding: 6px 9px; background: #fafafa; transition: background .3s, border-color .3s; }
.feld .feld-label { display: block; font-size: 12px; color: #777; }
.feld .feld-wert { display: block; font-weight: 600; min-height: 1.3em; }
.feld.wert { border-left-color: var(--gruen); background: #eef8f0; }
.feld.nein { border-left-color: var(--grau); background: #f1f1f1; }
.feld.nein .feld-wert { color: #777; text-decoration: line-through; }
.feld.luecke { border-left-color: var(--gelb); background: #fff8e6; }
.feld.trigger { border-left-color: var(--rot); background: #fdecec; }
.feld.blitz { background: #d3f0d9; }
.legende { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.chip { padding: 2px 9px; border-radius: 20px; border: 1px solid var(--rand); }
.chip.wert { background: #eef8f0; } .chip.nein { background: #f1f1f1; }
.chip.luecke { background: #fff8e6; } .chip.trigger { background: #fdecec; }

/* Kassettenrekorder */
.kassette { background: linear-gradient(#3a3d45, #2b2d33); border: 1px solid #14151a; border-radius: 10px; padding: 12px; }
.kassette-label { background: #efe9dc; color: #333; font-size: 12px; padding: 3px 8px; border-radius: 4px 4px 0 0; text-align: center; }
.kassette-fenster { display: flex; align-items: center; justify-content: space-around; background: #17181c; padding: 14px 10px; }
.spule { width: 64px; height: 64px; border-radius: 50%; border: 6px dashed #cfcfcf; background: #55585f; position: relative; }
.spule-loch { position: absolute; inset: 22px; border-radius: 50%; background: #17181c; }
.laeuft .spule { animation: drehen 2.4s linear infinite; }
.pausiert .spule { animation-play-state: paused; }
@keyframes drehen { to { transform: rotate(360deg); } }
.band { flex: 1; height: 8px; margin: 0 8px; background: repeating-linear-gradient(90deg, #6b4f2a 0 12px, #5a4223 12px 24px); border-radius: 4px; }
.kassette-fuss { display: flex; justify-content: space-between; padding: 6px 4px 2px; font-family: "Cascadia Mono", monospace; font-size: 14px; color: #ffb3b3; }
.vu { height: 10px; background: #101114; border-radius: 6px; margin: 10px 0; overflow: hidden; }
#vu-balken { height: 100%; width: 0%; background: linear-gradient(90deg, #1e8e3e 60%, #f9ab00 85%, #e3000f); transition: width .12s; }
.tasten { display: flex; gap: 8px; }
.taste { flex: 1; padding: 11px 6px; font-size: 15px; font-weight: 700; border-radius: 8px; border: 1px solid #111; background: #3a3d45; color: #eee; cursor: pointer; }
.taste:disabled { opacity: .35; cursor: default; }
.taste.rec { background: var(--rot); border-color: #8c0009; }
.taste.aktiv { outline: 3px solid #ffd2d5; }
.quellen { margin-top: 12px; border: 1px solid #3a3d45; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.quellen label { display: block; padding: 3px 0; }
.quellen em { color: #9aa0a6; font-style: normal; font-size: 12px; }
#qr-bereich { margin-top: 10px; text-align: center; }
#qr-code svg { background: #fff; padding: 8px; border-radius: 8px; }
#qr-url { font-size: 12px; color: #9aa0a6; word-break: break-all; margin-top: 6px; }
#phone-status { margin-top: 6px; font-size: 13px; }

/* Transkript */
#transkript { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.transkript-leer { color: #999; font-style: italic; }
.zeile { max-width: 78%; padding: 7px 11px; border-radius: 10px; }
.zeile.b { align-self: flex-start; background: #eef1f6; }
.zeile.k { align-self: flex-end; background: #fdecec; }
.zeile.live { align-self: flex-start; background: #eef8f0; }
.zeile .wer { display: block; font-size: 11px; color: #888; }

/* Overlay */
#overlay { position: fixed; inset: 0; background: rgba(20,20,22,.72); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay-karte { background: #fff; border-radius: 12px; padding: 26px 30px; width: min(560px, 92vw); text-align: center; }
.lade-balken { height: 8px; background: #eee; border-radius: 5px; overflow: hidden; margin-bottom: 12px; }
.lade-balken div { height: 100%; width: 40%; background: var(--rot); animation: laden 1.1s ease-in-out infinite alternate; }
@keyframes laden { from { margin-left: 0 } to { margin-left: 60% } }
.score-ring { width: 130px; height: 130px; margin: 12px auto; border-radius: 50%; border: 10px solid var(--gruen); display: flex; align-items: baseline; justify-content: center; padding-top: 34px; }
#score-zahl { font-size: 44px; font-weight: 800; }
.score-produkt { font-size: 17px; font-weight: 700; margin: 6px 0 10px; }
#score-gruende { text-align: left; margin: 0 auto 12px; max-width: 440px; }
.score-fussnote { font-size: 12px; color: #888; margin-bottom: 12px; }
#overlay .taste { background: var(--rot); border: 0; padding: 10px 20px; flex: none; }
.versteckt { display: none !important; }
footer { padding: 10px 22px 18px; font-size: 12px; color: #888; }
@media (max-width: 980px) { main { grid-template-columns: 1fr; } }