/* willi’s Schilder: Oberfläche für Sascha. Dunkel wie die Werkstatt, grosse Knöpfe, Orange aus dem Logo. */
:root {
  --orange: #F47B20;
  --orange-hell: #ff9a4d;
  --bg: #1c1c1c;
  --flaeche: #262626;
  --flaeche2: #303030;
  --rand: #444;
  --text: #f5f5f5;
  --leise: #b9b9b9;
  --rot: #ff8a80;
  --gelb: #ffd479;
  --gruen: #9be29b;
  --radius: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column;
}
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h2 { font-size: 19px; margin: 18px 0 8px; }

/* ---------- Knöpfe ---------- */
.haupt-knopf, .knopf, .leise-knopf {
  appearance: none; border-radius: 10px; cursor: pointer; font-weight: 650; line-height: 1.2; white-space: nowrap;
}
.haupt-knopf { background: var(--orange); border: 1px solid var(--orange); color: #1a1a1a; padding: 11px 18px; font-size: 17px; }
.haupt-knopf:hover:not(:disabled) { background: var(--orange-hell); }
.knopf { background: var(--flaeche2); border: 1px solid var(--rand); padding: 9px 14px; }
.knopf:hover:not(:disabled) { border-color: #777; }
.leise-knopf { background: transparent; border: 1px solid transparent; color: var(--leise); padding: 7px 10px; }
.leise-knopf:hover { color: var(--text); border-color: var(--rand); }
button:disabled { opacity: .45; cursor: not-allowed; }
.leise-text { color: var(--leise); font-size: 14px; }

/* ---------- Kopf ---------- */
.kopf {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: #111; border-bottom: 1px solid #000; flex: none;
}
.kopf-logo { width: 38px; height: 38px; }
.kopf-titel { font-weight: 800; font-size: 18px; margin-right: 8px; white-space: nowrap; }
.reiter { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.reiter button {
  appearance: none; background: transparent; border: 0; border-radius: 9px; padding: 8px 14px;
  color: var(--leise); font-weight: 650; cursor: pointer; white-space: nowrap;
}
.reiter button.aktiv { background: var(--flaeche2); color: var(--text); }
.reiter .zahl { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: var(--orange); color: #1a1a1a; font-size: 13px; }
.kopf-rechts { display: flex; align-items: center; gap: 8px; color: var(--leise); font-size: 14px; white-space: nowrap; }
.nur-handy { display: none; }

/* ---------- Aufteilung: links Chat/Liste, rechts das Schild ---------- */
.haupt { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(360px, 34%) 1fr; }
.links { min-height: 0; border-right: 1px solid #000; display: flex; flex-direction: column; background: var(--flaeche); }
.ansicht { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#ansicht-schilder, #ansicht-wuensche { overflow-y: auto; padding: 12px 14px 40px; display: block; }
.rechts { min-height: 0; display: flex; flex-direction: column; }

/* ---------- Chat ---------- */
.chat-leiste { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #1a1a1a; }
.nachrichten { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 12px; }
.blase { max-width: 92%; padding: 10px 13px; border-radius: 14px; overflow-wrap: anywhere; }
.blase p { margin: 0 0 8px; } .blase p:last-child { margin-bottom: 0; }
.blase ul, .blase ol { margin: 4px 0 8px; padding-left: 22px; }
.blase.von-mir { align-self: flex-end; background: #3b2a1c; border: 1px solid #5a3b22; border-bottom-right-radius: 4px; }
.blase.vom-chat { align-self: flex-start; background: var(--flaeche2); border: 1px solid var(--rand); border-bottom-left-radius: 4px; }
.blase.fehler { border-color: var(--rot); }
.blase .fotos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.blase .fotos img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; display: block; }
.ereignis {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 10px;
  background: #1f1f1f; border: 1px solid var(--rand); font-size: 14px; cursor: pointer; text-align: left; width: 100%;
}
.ereignis:hover { border-color: var(--orange); }
.ereignis img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.ereignis .marke { font-weight: 700; color: var(--orange); white-space: nowrap; flex: none; }
.ereignis.gruen .marke { color: var(--gruen); }
.tippt { align-self: flex-start; color: var(--leise); font-size: 14px; padding: 4px 6px; }
.tippt::after { content: "…"; animation: punkte 1.2s infinite steps(4); display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes punkte { from { width: 0; } to { width: 1.2em; } }
.eingabe { border-top: 1px solid #1a1a1a; padding: 10px 12px 12px; background: var(--flaeche); }
.eingabe-zeile { display: flex; gap: 8px; align-items: flex-end; }
.eingabe textarea {
  flex: 1; resize: none; min-height: 48px; max-height: 180px; padding: 11px 12px; border-radius: 12px;
  background: #161616; border: 1px solid var(--rand); line-height: 1.35;
}
.eingabe textarea:focus { outline: none; border-color: var(--orange); }
.foto-knopf { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--flaeche2); border: 1px solid var(--rand); cursor: pointer; color: var(--leise); flex: none; }
.foto-knopf:hover { color: var(--text); border-color: #777; }
.anhaenge { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.anhaenge:empty { display: none; }
.anhang { position: relative; width: 84px; height: 64px; border-radius: 8px; overflow: hidden; background: #111; border: 1px solid var(--rand); }
.anhang img { width: 100%; height: 100%; object-fit: cover; }
.anhang.laedt img { opacity: .4; }
.anhang .weg { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; line-height: 22px; padding: 0; }

/* ---------- Liste der Schilder ---------- */
.liste-leiste { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.schalter { display: inline-flex; align-items: center; gap: 6px; color: var(--leise); font-size: 14px; cursor: pointer; }
.gruppe { margin-bottom: 18px; }
.gruppe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 8px; }
.gruppe-kopf h3 { margin: 0; font-size: 17px; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.karte {
  appearance: none; text-align: left; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--flaeche2); border: 1px solid var(--rand); display: flex; flex-direction: column;
}
.karte:hover, .karte.offen { border-color: var(--orange); }
.karte.archiv { opacity: .6; }
.karte .bild { aspect-ratio: 297 / 210; background: #111 center / cover no-repeat; }
.karte .bild.hoch { aspect-ratio: 210 / 297; background-size: contain; }
.karte .text { padding: 7px 9px 9px; font-size: 13px; }
.karte .name { font-weight: 700; font-size: 14px; line-height: 1.25; }
.karte .klein { color: var(--leise); margin-top: 2px; }

/* ---------- Rechts: Schild mit Vorschau ---------- */
.flaeche-leer { flex: 1; display: grid; place-content: center; text-align: center; color: var(--leise); padding: 20px; }
.flaeche-leer img { width: 120px; margin: 0 auto 14px; opacity: .5; }
.flaeche { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 16px; gap: 10px; overflow-y: auto; }
.vorschau-reiter { display: flex; gap: 6px; flex-wrap: wrap; }
.vorschau-reiter button { appearance: none; border: 1px solid var(--rand); background: var(--flaeche2); border-radius: 9px; padding: 6px 10px; cursor: pointer; font-size: 14px; }
.vorschau-reiter button.aktiv { border-color: var(--orange); }
.vorschau-reiter button.erledigt { color: var(--gruen); }
.flaeche-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flaeche-titel { font-size: 20px; font-weight: 800; line-height: 1.2; }
.flaeche-status { color: var(--leise); font-size: 14px; margin-top: 3px; }
.flaeche-status.offen { color: var(--gelb); }
.groessen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.groessen .leise-text { margin-right: 2px; }
.groesse {
  appearance: none; border: 1px solid var(--rand); background: transparent; border-radius: 9px; padding: 6px 11px; cursor: pointer;
  color: var(--leise); font-weight: 700;
}
.groesse.an { background: var(--orange); border-color: var(--orange); color: #1a1a1a; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knoepfe .trenner { flex: 1; }
#vorlage { flex: 1; min-height: 420px; width: 100%; border: 1px solid #111; border-radius: var(--radius); background: #232323; }
.felder, .verlauf { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 14px; }
.felder summary, .verlauf summary { cursor: pointer; font-weight: 650; }
.feld { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: center; margin: 8px 0; }
.feld input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rand); background: #161616; }
.feld input:focus { outline: none; border-color: var(--orange); }
.block { border: 1px solid var(--rand); border-radius: 10px; padding: 6px 10px; margin: 10px 0; background: #202020; }
.block-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 700; font-size: 14px; color: var(--leise); }
.block-kopf .knopf { padding: 4px 9px; font-size: 13px; }
.meldung { padding: 8px 12px; border-radius: 10px; background: var(--flaeche2); border-left: 5px solid var(--rand); margin: 6px 0; font-size: 14px; }
.meldung.fehler { border-left-color: var(--rot); }
.meldung.hinweis { border-left-color: var(--gelb); }
.verlauf-liste { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.verlauf-liste li { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; background: #202020; font-size: 14px; cursor: pointer; }
.verlauf-liste li:hover, .verlauf-liste li.offen { outline: 1px solid var(--orange); }
.verlauf-liste .nr { font-weight: 800; min-width: 28px; }
.verlauf-liste .wann { color: var(--leise); white-space: nowrap; }

/* ---------- Wünsche ---------- */
.wunsch { background: var(--flaeche2); border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; }
.wunsch.erledigt { opacity: .65; }
.wunsch .kopfzeile { display: flex; justify-content: space-between; gap: 8px; color: var(--leise); font-size: 13px; margin-bottom: 4px; }
.wunsch .fotos { display: flex; gap: 6px; margin-top: 6px; }
.wunsch .fotos img { width: 90px; height: 68px; object-fit: cover; border-radius: 6px; }
.wunsch textarea { width: 100%; min-height: 60px; margin-top: 8px; padding: 8px; border-radius: 8px; background: #161616; border: 1px solid var(--rand); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle td, .tabelle th { padding: 5px 6px; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }

/* ---------- Hinweis unten ---------- */
.hinweis-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50;
  background: #111; border: 1px solid var(--orange); border-radius: 12px; padding: 10px 16px; max-width: min(92vw, 520px);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.hinweis-toast.fehler { border-color: var(--rot); }

/* ---------- Anmelden ---------- */
.anmelden-seite { display: grid; place-items: center; min-height: 100%; padding: 20px; }
.anmelden { width: min(380px, 100%); background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 26px 22px; text-align: center; }
.anmelden-logo { width: 96px; }
.anmelden h1 { margin: 8px 0 18px; font-size: 26px; }
.anmelden form { display: grid; gap: 12px; text-align: left; }
.anmelden label { display: grid; gap: 4px; color: var(--leise); font-size: 14px; }
.anmelden input { padding: 12px; border-radius: 10px; border: 1px solid var(--rand); background: #161616; font-size: 17px; color: var(--text); }
.anmelden input:focus { outline: none; border-color: var(--orange); }

/* ---------- Handy: eine Spalte, Reiter oben ---------- */
@media (max-width: 860px) {
  .nur-handy { display: inline-block; }
  .kopf { flex-wrap: wrap; }
  .kopf-titel { display: none; }
  .reiter { order: 3; flex-basis: 100%; }
  .haupt { grid-template-columns: 1fr; }
  .links { border-right: 0; }
  .haupt[data-ansicht="schild"] .links { display: none; }
  .haupt:not([data-ansicht="schild"]) .rechts { display: none; }
  #vorlage { min-height: 70vh; }
  .feld { grid-template-columns: 1fr; gap: 2px; }
}