/* Oberfläche der Angebote-App (nicht Teil des PDFs) */

:root { --orange: #ff6a00; --zoom: 1; }
body.app { margin: 0; }
body.app:not(.bearbeiten) { font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif; color: #111; }
body.app:not(.bearbeiten) * { box-sizing: border-box; }
body.app a { color: inherit; text-decoration: none; }
body.app .liste { margin: 0; padding: 0; }

.app-leiste, .app-hilfe { font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif; }

/* ---------- Übersicht ---------- */

body.app:not(.bearbeiten) { background: #f4f4f2; padding: 0; }
.app-kopf { display: flex; align-items: center; justify-content: space-between; padding: 22px 40px; background: #fff; border-bottom: 1px solid #e6e6e6; }
.app-kopf .marke { font-weight: 600; font-size: 20px; }
.app-kopf .marke span { font-weight: 300; color: var(--orange); margin-left: 6px; }
.uebersicht { max-width: 1100px; margin: 0 auto; padding: 40px; }
.uebersicht h2 { font-size: 22px; font-weight: 600; margin: 0 0 16px; }
.uebersicht section + section { margin-top: 44px; }
.uebersicht .hinweis { color: #777; font-size: 14px; margin-top: 10px; }
.uebersicht form { display: flex; gap: 10px; }
.uebersicht select { flex: 1; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid #d6d6d6; border-radius: 8px; background: #fff; }
.liste { list-style: none; background: #fff; border-radius: 12px; border: 1px solid #e6e6e6; }
.liste li { display: grid; grid-template-columns: 1fr 260px 140px 70px; gap: 20px; align-items: center; padding: 16px 22px; }
.liste li + li { border-top: 1px solid #efefef; }
.liste .titel { display: flex; flex-direction: column; gap: 3px; }
.liste .titel strong { font-size: 16px; }
.liste .titel span, .liste .ort, .liste .zeit { font-size: 13px; color: #777; }
.liste .titel:hover strong { color: var(--orange); }
.uebersicht .fehler { white-space: pre-wrap; color: #b42318; background: #fff; padding: 20px; border-radius: 8px; }

.app button { font: inherit; font-size: 14px; cursor: pointer; border-radius: 8px; padding: 9px 16px; border: 1px solid #d6d6d6; background: #fff; color: #111; }
.app button:hover { border-color: #aaa; }
.app button.haupt, .app form button { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }
.app button.haupt:hover, .app form button:hover { background: #e85f00; }
.app button.leise { border-color: transparent; background: transparent; color: #555; }
.app button.leise:hover { background: #f0f0f0; }
.app button:disabled { opacity: .5; cursor: wait; }

/* ---------- Bearbeiten ---------- */

body.bearbeiten { background: #d9d9d9; padding: 120px 0 60px; }
.bearbeiten .seite, .bearbeiten .quelle { zoom: var(--zoom); }

.app-leiste {
  position: fixed; inset: 0 0 auto 0; z-index: 10; height: 64px;
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: #fff; border-bottom: 1px solid #e3e3e3; font-size: 14px;
}
.app-leiste .zurueck { font-size: 22px; padding: 4px 10px; border-radius: 8px; color: #333; }
.app-leiste .zurueck:hover { background: #f0f0f0; }
.app-leiste .titel { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-leiste .titel span { color: #777; }
.app-leiste .werkzeuge { display: flex; gap: 6px; margin-left: 16px; padding-left: 16px; border-left: 1px solid #e6e6e6; }
.app-leiste .status { margin-left: auto; color: #777; white-space: nowrap; }
.app-leiste .status.ok { color: #1a7f37; }
.app-leiste .status.fehler { color: #b42318; }
.app-leiste .status.hinweis { color: var(--orange); }
.app-hilfe {
  position: fixed; top: 64px; inset-inline: 0; z-index: 9; padding: 8px 20px;
  background: #fafafa; border-bottom: 1px solid #e8e8e8; font-size: 13px; color: #666;
}
.app-hilfe b { color: #222; font-weight: 600; }

.bearbeiten [contenteditable] { outline: none; border-radius: 4px; transition: box-shadow .12s; cursor: text; }
.bearbeiten [contenteditable]:hover { box-shadow: 0 0 0 6px rgba(255, 106, 0, .08); }
.bearbeiten [contenteditable]:focus { box-shadow: 0 0 0 6px rgba(255, 106, 0, .14), 0 0 0 8px rgba(255, 106, 0, .55); }
.bearbeiten .quelle { color: #888; }

/* ---------- Server-App: Kopf, Login, Formulare, Panel ---------- */

.app-kopf .marke { color: #111; }
.app-kopf nav { display: flex; gap: 22px; font-size: 14px; }
.app-kopf nav a { color: #555; }
.app-kopf nav a:hover { color: var(--orange); }
.uebersicht.schmal { max-width: 760px; }
.uebersicht p { line-height: 1.5; margin: 0 0 12px; font-size: 15px; }
.uebersicht input, .app input, .app select { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid #d6d6d6; border-radius: 8px; background: #fff; }
.uebersicht form { display: flex; gap: 10px; }
.uebersicht form input { flex: 1; }
.zeile-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.zeile-kopf h2 { margin: 0 !important; }
.suche input { width: 260px; }
.liste li { grid-template-columns: 1fr 120px 140px 60px; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: #f0f0f0; color: #555; justify-self: start; }
.chip.s-praesentiert { background: #fff1e6; color: #c04f00; }
.chip.s-gewaehlt { background: #e7f6ec; color: #1a7f37; }
.chip.s-verloren { background: #f6e8e8; color: #9b2c2c; }
.zeit small { color: #999; }
.knopf { display: inline-block; font-size: 14px; padding: 8px 12px; border-radius: 8px; color: #555; }
.knopf:hover { background: #f0f0f0; }
.kasten { background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; padding: 14px 16px; margin: 10px 0; word-break: break-all; font-size: 13px; }
.meldung { padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.meldung.ok { background: #e7f6ec; color: #1a7f37; }
.meldung.fehler { background: #fdecea; color: #b42318; }
.uebersicht section { margin-bottom: 44px; }

body.app:not(.bearbeiten) .login { width: min(380px, calc(100vw - 32px)); margin: 14vh auto 0; background: #fff; border-radius: 12px; padding: 32px; border: 1px solid #e6e6e6; display: flex; flex-direction: column; gap: 14px; }
.login .marke { font-weight: 600; font-size: 20px; margin-bottom: 8px; }
.login .marke span { font-weight: 300; color: var(--orange); margin-left: 4px; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #555; }

.app-leiste select { padding: 7px 10px; font-size: 14px; }
.ansicht .app-leiste { gap: 12px; }

.panel {
  position: fixed; top: 64px; right: 0; bottom: 0; width: 420px; z-index: 11;
  background: #fff; border-left: 1px solid #e3e3e3; box-shadow: -10px 0 40px rgba(0,0,0,.08);
  display: flex; flex-direction: column; font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif; font-size: 14px; color: #111;
}
.panel[hidden] { display: none; }
.panel-kopf { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #eee; }
.panel-kopf h3 { font-size: 16px; font-weight: 600; margin: 0; }
#panel-inhalt { overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
#panel-inhalt label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #555; }
#panel-inhalt .eintrag { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
#panel-inhalt .eintrag small { color: #888; display: block; }
#panel-inhalt .bild { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
#panel-inhalt .bild img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; background: #f3f3f3; }
#panel-inhalt code { font-size: 12px; background: #f5f5f5; padding: 2px 6px; border-radius: 4px; cursor: copy; }
#panel-inhalt .treffer { max-height: 260px; overflow: auto; border: 1px solid #eee; border-radius: 8px; }
#panel-inhalt .treffer button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f2f2f2; border-radius: 0; background: #fff; padding: 8px 10px; }
#panel-inhalt .treffer button:hover { background: #fff6ef; }
#panel-inhalt .hinweis { color: #777; font-size: 13px; }
.ablage { border: 2px dashed #ddd; border-radius: 10px; padding: 22px; text-align: center; color: #777; }
.ablage.drueber { border-color: var(--orange); background: #fff6ef; }
body.bearbeiten.panel-offen { padding-right: 420px; }