:root {
  --petrol: #0c1f27; --petrol-2: #123b46; --petrol-3: #0d2f38; --rosa: #e86b81; --rosa-2: #e0506b;
  --gold: #c79c64; --hell: #e8f1f5; --grau: #8fb0bf; --gruen: #36c5a8;
  --sicher-oben: env(safe-area-inset-top, 0px); --sicher-unten: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--petrol); color: var(--hell);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
}
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--sicher-oben)) 16px 10px; background: var(--petrol-3);
  border-bottom: 1px solid #ffffff12; position: sticky; top: 0; z-index: 2;
}
.marke { display: flex; align-items: baseline; gap: 8px; font-size: 18px; }
.marke .unter { color: var(--grau); font-size: 13px; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); align-self: center;
  box-shadow: 0 0 0 3px #36c5a833; }
button {
  font: inherit; border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer;
  background: var(--rosa); color: #fff; font-weight: 600; transition: transform .08s, background .2s;
}
button:active { transform: scale(.97); }
button:disabled { opacity: .5; }
button.leise { background: transparent; color: var(--grau); font-weight: 500; padding: 8px 10px; }
input, textarea {
  font: inherit; color: var(--hell); background: var(--petrol-2); border: 1px solid #ffffff1f;
  border-radius: 12px; padding: 12px 14px; width: 100%; outline: none;
}
input:focus, textarea:focus { border-color: var(--rosa); }

.karte { margin: auto; width: min(420px, calc(100% - 32px)); padding: 28px 22px; background: var(--petrol-3);
  border-radius: 20px; border: 1px solid #ffffff12; }
.karte h1 { margin: 0 0 6px; font-size: 26px; }
.karte p { color: var(--grau); margin: 0 0 18px; }
.karte form { display: grid; gap: 10px; }
.info { min-height: 1.4em; margin-top: 12px !important; }
.info.fehler { color: var(--rosa); }

#chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#verlauf { flex: 1; overflow-y: auto; padding: 16px 12px 8px; display: flex; flex-direction: column; gap: 10px;
  overscroll-behavior: contain; }
.blase { max-width: min(88%, 680px); padding: 10px 14px; border-radius: 18px; word-wrap: break-word;
  animation: rein .18s ease-out; }
@keyframes rein { from { opacity: 0; transform: translateY(6px); } }
.ich { align-self: flex-end; background: var(--rosa-2); color: #fff; border-bottom-right-radius: 6px;
  white-space: pre-wrap; }
.jack { align-self: flex-start; background: var(--petrol-2); border-bottom-left-radius: 6px; }
.jack.fehler { border: 1px solid var(--rosa); }
.zeit { display: block; font-size: 11px; opacity: .6; margin-top: 4px; text-align: right; }
.jack p { margin: 0 0 8px; } .jack p:last-child { margin-bottom: 0; }
.jack ul, .jack ol { margin: 4px 0 8px; padding-left: 20px; }
.jack h2, .jack h3 { font-size: 16px; margin: 10px 0 6px; color: var(--gold); }
.jack a { color: var(--rosa); }
.jack code { background: #00000033; padding: 1px 5px; border-radius: 6px; font-size: 14px; }
.tabelle { overflow-x: auto; margin: 6px 0; }
.jack table { border-collapse: collapse; font-size: 14px; }
.jack th, .jack td { border: 1px solid #ffffff22; padding: 5px 8px; text-align: left; vertical-align: top; }
.jack th { background: #ffffff10; }
.pdf { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 12px; border-radius: 12px;
  background: var(--petrol); color: var(--hell); text-decoration: none; border: 1px solid #ffffff22; }
.tippt { color: var(--grau); }
.tippt span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--grau);
  animation: hops 1.2s infinite; }
.tippt span:nth-child(2) { animation-delay: .15s; } .tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes hops { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.leer { margin: auto; text-align: center; color: var(--grau); max-width: 320px; }
.leer strong { color: var(--hell); display: block; font-size: 20px; margin-bottom: 6px; }

.schnell { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 8px; }
.schnell:empty { display: none; }
.schnell button { flex: none; background: var(--petrol-2); color: var(--hell); border: 1px solid #ffffff2a;
  border-radius: 999px; padding: 8px 14px; font-weight: 500; font-size: 15px; }
.schnell button.haupt { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.eingabe { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px calc(10px + var(--sicher-unten));
  background: var(--petrol-3); border-top: 1px solid #ffffff12; }
.eingabe textarea { resize: none; max-height: 160px; border-radius: 22px; padding: 11px 16px; }
.eingabe button { width: 46px; height: 46px; padding: 0; border-radius: 50%; flex: none; font-size: 18px; }