/* Hermann-App — Cupertino hell (Design-Linie SM 30.08.2026). Die Seite ist der Wirt;
   das Panel selbst stylt hermann-widget.js (Bühnen-Modus über #hermann-buehne). */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--schrift, system-ui, sans-serif);
  background: linear-gradient(180deg, #fbfdff 0%, #eef4fa 100%) fixed;
  color: var(--text, #16232c); display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; }
.versteckt { display: none !important; }

header { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.9rem; background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #e2e9f0; position: sticky; top: 0; z-index: 5; }
.zurueck { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; display: flex;
  align-items: center; justify-content: center; border-radius: 50%;
  background: #eef3f7; color: var(--hk-blau, #1275bb); font-size: 1.4rem;
  font-weight: 700; text-decoration: none; line-height: 1; }
.hermann-logo { width: 1.7rem; height: 1.7rem; }
.titel { flex: 1 1 auto; min-width: 0; font-size: 0.98rem; color: var(--text-gedimmt, #64737e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titel b { color: var(--text, #16232c); }
.wer { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  background: #e2eff9; color: #004e70; display: flex; align-items: center;
  justify-content: center; font-size: 0.72rem; font-weight: 700; }
.wer:empty { display: none; }

main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  width: 100%; max-width: 760px; margin: 0 auto; }
#hermann-buehne { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#hermann-buehne > * { flex: 1 1 auto; min-height: 0; }

/* Auf der großen Bühne braucht der Kopf des Widgets keine zweite Titelzeile —
   die App hat ihre eigene. Verläufe (☰) und Neu (＋) wandern optisch nach rechts oben. */
#hermann-buehne .hw-kopf { background: none; color: var(--text, #16232c);
  border-bottom: 1px solid #e2e9f0; padding: 0.45rem 0.7rem; }
#hermann-buehne .hw-kopf img { display: none; }
#hermann-buehne .hw-kopf b { display: none; }
/* 11.09.2026: Die Statuszeile („bereit" / „liest den Auftrag …") bleibt auch auf der Bühne —
   sie ist die einzige Zeile des Widget-Kopfs, die die App nicht selbst hat. */
#hermann-buehne .hw-kopf .hw-status { color: var(--text-gedimmt, #64737e); font-size: .8rem; margin-top: 0; }
#hermann-buehne .hw-kopf-knoepfe button { color: var(--hk-blau, #1275bb); font-size: 1.15rem; }

/* Anmeldung — freundlich, mittig, eine Karte. */
.anmeldung { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.7rem; padding: 1.4rem; text-align: center; }
.gross-logo { width: 76px; height: 76px; filter: drop-shadow(0 10px 24px rgba(18, 117, 187, 0.35)); }
.anmeldung h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.anmeldung p { margin: 0; max-width: 30rem; color: var(--text-gedimmt, #64737e);
  font-size: 0.95rem; line-height: 1.5; }
#login-form { display: flex; flex-direction: column; gap: 0.6rem; width: min(20rem, 100%);
  margin-top: 0.6rem; }
#login-form input { padding: 0.8rem 0.9rem; font-size: 1.05rem; text-align: center;
  border: 1px solid #e2e9f0; border-radius: 12px; background: #fff;
  color: var(--text, #16232c); font-family: inherit; }
#login-form input:focus { outline: none; border-color: var(--hk-blau, #1275bb);
  box-shadow: 0 0 0 3px rgba(18, 117, 187, 0.15); }
#login-kuerzel { text-transform: uppercase; }
#login-form button { padding: 0.85rem; font-size: 1.05rem; font-weight: 700; border: none;
  border-radius: 12px; background: var(--hk-blau, #1275bb); color: #fff; cursor: pointer;
  box-shadow: 0 3px 12px -2px rgba(18, 117, 187, 0.45); font-family: inherit; }
.fehler { color: var(--rot, #c0392b); font-size: 0.9rem; min-height: 1.2em; margin: 0; }