/* Website-Pflege: gleiche Handschrift wie die Website (Plakatrot, dunkle Bühne, Source Sans 3) */
@font-face { font-family: 'Source Sans 3'; src: url(/fonts/source-sans-3-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'Source Sans 3'; src: url(/fonts/source-sans-3-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap }
@font-face { font-family: 'Source Sans 3'; src: url(/fonts/source-sans-3-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap }
@font-face { font-family: 'Source Sans 3'; src: url(/fonts/source-sans-3-latin-300-italic.woff2) format('woff2'); font-weight: 300; font-style: italic; font-display: swap }

:root {
  --rot: #b42a42; --rot-tief: #8e1c31; --rot-hell: #f6e7ea; --rot-text: #a3203a;
  --buehne: #151011; --buehne-2: #221a1c; --buehne-line: #3a2e31; --buehne-muted: #b9adb0;
  --papier: #faf7f6; --weiss: #fff; --ink: #1d1517; --muted: #5f5457; --line: #e6dcde;
  --ok: #2f7d4f;
  --font: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --papier: #161112; --weiss: #1e1719; --ink: #f1eaeb; --muted: #b3a7aa; --line: #33292c; --rot-hell: #2a1a1e; --rot-text: #ff8fa0; --ok: #6cc893; color-scheme: dark }
}
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--papier); color: var(--ink); font: 400 1.0625rem/1.55 var(--font) }
[hidden] { display: none !important }
button, input, textarea { font: inherit; color: inherit }
a { color: inherit }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.leise { color: var(--muted) }
.fehler { color: var(--rot-text); font-weight: 600 }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: .55em 1.1em; border: 2px solid transparent; border-radius: 0; font-weight: 600; cursor: pointer; text-decoration: none; background: none }
.knopf.rot { background: var(--rot); color: #fff }
.knopf.rot:hover { background: var(--rot-tief) }
.knopf.hell { border-color: var(--rot); color: var(--rot-text) }
.knopf.leise { color: var(--muted); border-color: var(--line) }
.knopf:disabled { opacity: .55; cursor: wait }
.knopf.breit { width: 100% }
.symbol { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 1.3rem }
.leise-link { background: none; border: 0; color: var(--buehne-muted); cursor: pointer; text-decoration: none; padding: .5rem; font-size: .95rem }
.leise-link:hover { color: #fff; text-decoration: underline }

/* Anmeldung */
.anmeldung { min-height: 100%; display: grid; place-items: center; padding: 1rem; background: var(--buehne) }
.karte { width: min(100%, 380px); background: var(--weiss); padding: 2rem; display: grid; gap: .5rem; border-top: 4px solid var(--rot) }
.karte h1 { margin: .5rem 0 0; font-size: 1.8rem; line-height: 1.1 }
.karte p { margin: 0 0 .75rem }
.karte label { font-weight: 600; font-size: .95rem; margin-top: .4rem }
.karte input { padding: .7rem .8rem; border: 1px solid var(--line); background: var(--papier) }
.karte .knopf { margin-top: 1rem }

/* Rahmen */
.app { height: 100%; display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) }
.kopf { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; padding: .5rem max(12px, env(safe-area-inset-right)) .5rem max(12px, env(safe-area-inset-left)); background: var(--buehne); color: #fff; border-bottom: 1px solid var(--buehne-line) }
.kopf img { outline: 1px solid rgba(255,255,255,.5) }
.marke { display: grid; line-height: 1.1; margin-right: auto }
.marke b { text-transform: uppercase; letter-spacing: .04em }
.marke span { color: var(--buehne-muted); font-size: .9rem }
.wer { color: var(--buehne-muted); font-size: .95rem }
#menueknopf { display: none; color: #fff }

.seite { background: var(--weiss); border-right: 1px solid var(--line); padding: 1rem; overflow-y: auto }
.seite h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--rot-text); margin: 1.5rem 0 .5rem }
.chatliste, .verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.chatliste button { width: 100%; text-align: left; background: none; border: 0; padding: .55rem .6rem; cursor: pointer; display: grid; line-height: 1.25 }
.chatliste button:hover, .chatliste button[aria-current='true'] { background: var(--rot-hell) }
.chatliste small, .verlauf small { color: var(--muted); font-size: .82rem }
.verlauf li { padding: .5rem .6rem; border-bottom: 1px solid var(--line); display: grid; gap: .15rem; font-size: .95rem }
.verlauf .zurueck { justify-self: start; background: none; border: 0; padding: 0; color: var(--rot-text); cursor: pointer; font-size: .85rem; text-decoration: underline }

/* Chat */
.haupt { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0 }
.nachrichten { overflow-y: auto; padding: 1.5rem max(16px, env(safe-area-inset-right)) 1rem max(16px, env(safe-area-inset-left)); display: grid; align-content: start; gap: 1.25rem }
.leer { max-width: 680px; margin: 2rem auto 0; display: grid; gap: 1rem }
.leer h1 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.1; letter-spacing: -.01em }
.leer p { margin: 0; color: var(--muted) }
.beispiele { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem }
.beispiel { border: 1px solid var(--line); background: var(--weiss); padding: .6rem .9rem; cursor: pointer; min-height: 44px }
.beispiel:hover { border-color: var(--rot); color: var(--rot-text) }

.nachricht { max-width: 760px; width: 100%; margin-inline: auto; display: grid; gap: .4rem }
.nachricht .wer-zeile { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted) }
.nachricht.nutzer .blase { background: var(--rot-hell); padding: .8rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere }
.nachricht.agent .blase { border-left: 4px solid var(--rot); padding: .1rem 0 .1rem 1rem; overflow-wrap: anywhere }
.blase p { margin: 0 0 .7rem } .blase p:last-child { margin-bottom: 0 }
.blase ul, .blase ol { margin: 0 0 .7rem; padding-left: 1.3rem }
.blase code { font-size: .9em; background: var(--rot-hell); padding: 0 .25em }
.dateiliste { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .9rem }
.dateiliste span { border: 1px solid var(--line); padding: .15rem .5rem; background: var(--weiss) }
.schritte { font-size: .92rem; color: var(--muted) }
.schritte summary { cursor: pointer; padding: .2rem 0 }
.schritte ol { margin: .3rem 0 0; padding-left: 1.3rem }
.arbeitet { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .95rem }
.arbeitet::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--rot); border-right-color: transparent; border-radius: 50%; animation: dreh .8s linear infinite }
@keyframes dreh { to { transform: rotate(360deg) } }
.kosten { font-size: .78rem; color: var(--muted) }

/* Offene Änderungen */
.offen { border-top: 1px solid var(--line); background: var(--weiss); padding: .75rem max(16px, env(safe-area-inset-right)) .75rem max(16px, env(safe-area-inset-left)); display: grid; gap: .6rem }
.offen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 760px; width: 100%; margin-inline: auto }
#offentext { margin-right: auto; font-weight: 600 }
.bestaetigung { max-width: 760px; width: 100%; margin-inline: auto; display: grid; gap: .5rem; padding: .75rem; background: var(--rot-hell) }
.bestaetigung p { margin: 0 }
.codehinweis { font-weight: 600; color: var(--rot-text) }
.bestaetigung input { padding: .6rem .7rem; border: 1px solid var(--line); background: var(--weiss) }
.zeile { display: flex; gap: .5rem; flex-wrap: wrap }
.meldung { max-width: 760px; width: 100%; margin: 0 auto; font-weight: 600 }
.meldung.gut { color: var(--ok) }
.meldung.schlecht { color: var(--rot-text) }

/* Eingabe */
.eingabe { border-top: 1px solid var(--line); background: var(--weiss); padding: .6rem max(12px, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) }
.eingabe-zeile { display: flex; align-items: flex-end; gap: .5rem; max-width: 760px; margin-inline: auto }
.eingabe textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); background: var(--papier); padding: .6rem .75rem; max-height: 40vh; line-height: 1.45; min-height: 44px }
.anhang { position: relative; flex-shrink: 0 }
.anhang input { position: absolute; inset: 0; opacity: 0; cursor: pointer }
.anhaenge { display: flex; flex-wrap: wrap; gap: .4rem; max-width: 760px; margin: 0 auto .4rem }
.anhaenge:empty { display: none }
.anhaenge span { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); padding: .2rem .2rem .2rem .55rem; font-size: .9rem; background: var(--papier) }
.anhaenge button { border: 0; background: none; cursor: pointer; width: 28px; height: 28px; color: var(--muted) }
.hinweis { max-width: 760px; margin: .3rem auto 0; font-size: .8rem; color: var(--muted) }
.ablegen { position: absolute; inset: 0; background: rgba(180, 42, 66, .12); border: 3px dashed var(--rot); display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; color: var(--rot-text); pointer-events: none }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr) }
  #menueknopf { display: inline-grid }
  .seite { position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 30; transform: translateX(-102%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.35); padding-top: max(1rem, env(safe-area-inset-top)) }
  .seite.offen-menue { transform: none }
  .wer, #livelink, .hinweis { display: none }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }