/* Flott Angebote: Farben und Schrift der Webseite flott-umzuege.de */
:root {
  --blau: #238dc7; --blau-dunkel: #077199; --blau-hell: #e9f4fb; --orange: #ef8100; --orange-dunkel: #c96c00;
  --bg: #f4f7fa; --karte: #fff; --text: #2b3440; --leise: #66717f; --linie: #dde4eb;
  --gelb: #fff6dc; --gelb-rand: #e8b93a; --fehler: #b3261e; --fehler-hell: #fdeceb; --gruen: #1d7a46; --gruen-hell: #e3f4ea;
  --radius: 10px; --schatten: 0 1px 2px rgba(16, 40, 64, .06), 0 4px 14px rgba(16, 40, 64, .05);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 16px/1.5 "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--blau-dunkel); }
h1 { font-size: 24px; margin: 2px 0 0; color: var(--blau-dunkel); }
h2 { font-size: 17px; margin: 0 0 6px; color: var(--text); }
h3 { font-size: 15px; margin: 14px 0 6px; }
small { display: block; color: var(--leise); font-size: 12.5px; margin-top: 2px; }
code { font-size: 12px; word-break: break-all; background: var(--bg); padding: 2px 4px; border-radius: 4px; }
:focus-visible { outline: 3px solid rgba(35, 141, 199, .45); outline-offset: 2px; }

/* ---------- Kopf ---------- */
.kopf { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: #fff; flex-wrap: wrap;
        border-bottom: 4px solid var(--blau); box-shadow: inset 0 -7px 0 -4px var(--orange); }
.kopf .marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--blau-dunkel); font-weight: 700; }
.kopf .marke img { height: 46px; width: auto; display: block; }
.kopf .marke span { font-size: 15px; border-left: 1px solid var(--linie); padding-left: 12px; }
.kopf nav { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kopf nav a, .kopf .link { color: var(--text); text-decoration: none; font-size: 15px; padding: 8px 12px; border-radius: 8px; }
.kopf nav a:hover, .kopf .link:hover { background: var(--blau-hell); color: var(--blau-dunkel); }
main { max-width: 1360px; margin: 0 auto; padding: 22px 20px 140px; }

/* ---------- Karten und Aufbau ---------- */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px;
         margin-bottom: 16px; box-shadow: var(--schatten); }
.karte.schmal { max-width: 440px; margin: 48px auto; }
.karte.leer { text-align: center; color: var(--leise); padding: 48px; }
.erklaerung { color: var(--leise); font-size: 14px; margin: 0 0 12px; }
.werkzeug { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.zurueck-link { font-size: 14px; text-decoration: none; }
.nummer { color: var(--orange); font-weight: 700; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knoepfe.senkrecht { flex-direction: column; align-items: stretch; margin-bottom: 12px; }
.inline { display: inline; margin: 0; }
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.status-wahl label { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.status-wahl select { width: auto; min-width: 170px; }

/* ---------- Bedienelemente ---------- */
button, select, input, textarea { font: inherit; color: var(--text); }
button { border: 1px solid var(--linie); background: #fff; border-radius: 8px; padding: 10px 16px; cursor: pointer;
         min-height: 44px; font-weight: 600; font-size: 15px; transition: background .15s, border-color .15s; }
button:hover { border-color: var(--blau); color: var(--blau-dunkel); }
button.haupt { background: var(--orange); border-color: var(--orange); color: #fff; }
button.haupt:hover { background: var(--orange-dunkel); border-color: var(--orange-dunkel); color: #fff; }
button.zweit { background: #fff; color: var(--blau-dunkel); border-color: #b9d8ea; }
button.gefahr { color: var(--fehler); border-color: #f0c4c0; width: 100%; }
button.klein { padding: 6px 12px; font-size: 13px; min-height: 34px; }
button.link { background: none; border: none; padding: 8px 12px; min-height: 0; font-weight: 400; }
button:disabled { opacity: .45; cursor: not-allowed; }

label { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; color: var(--text); gap: 4px; min-width: 0; }
input, select, textarea { border: 1px solid #c9d3dd; border-radius: 8px; padding: 10px 12px; background: #fff; width: 100%;
                          font-size: 15.5px; font-weight: 400; min-height: 44px; }
textarea { resize: vertical; min-height: 60px; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(35, 141, 199, .2); }
input::placeholder, textarea::placeholder { color: #a0aab5; }
.pflicht { color: var(--fehler); }
.feld-fehlt { border-color: var(--fehler) !important; background: #fffafa; }
label.haken { flex-direction: row; align-items: center; gap: 9px; font-weight: 400; font-size: 15px; padding: 6px 0; cursor: pointer; }
label.haken input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--orange); flex: none; }
label.breit { margin-top: 12px; }
.karte.schmal label { margin-bottom: 12px; }
.euro-feld { display: flex; align-items: center; gap: 6px; }
.euro-feld span { color: var(--leise); font-weight: 600; }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; margin-bottom: 6px; align-items: start; }
.raster.eng { grid-template-columns: 1fr; gap: 10px; }
.raster .doppelt { grid-column: span 2; }
.raster .gross input { font-size: 20px; font-weight: 700; color: var(--blau-dunkel); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
fieldset { border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px 14px; margin: 0; min-width: 0; }
legend { font-weight: 700; color: var(--blau-dunkel); padding: 0 6px; }
.plz-zeile { display: flex; gap: 8px; align-items: flex-end; }
.plz-zeile label { flex: 1; }
.plz-zeile button { flex: none; margin-bottom: 4px; }
.gruppe { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.gruppe:last-of-type { border-bottom: none; }
.gruppe-titel { width: 110px; font-size: 13px; font-weight: 700; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.gruppe label.klein { width: 130px; }
details.mehr { margin-top: 8px; }
details summary { cursor: pointer; color: var(--blau-dunkel); font-weight: 600; padding: 6px 0; list-style-position: inside; }
details summary .inline-h2 { display: inline; }

/* ---------- Schritte ---------- */
.schritte { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.schritt { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #fff; border: 2px solid var(--linie);
           border-radius: 12px; text-align: left; min-height: 64px; flex: 1; max-width: 360px; font-weight: 400; }
.schritt b { display: block; font-size: 16px; }
.schritt small { margin: 0; }
.schritt .kreis { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                  background: var(--linie); color: var(--leise); font-weight: 700; flex: none; }
.schritt[aria-selected="true"] { border-color: var(--blau); background: var(--blau-hell); }
.schritt[aria-selected="true"] .kreis { background: var(--blau); color: #fff; }
.schritt-linie { flex: 0 0 40px; height: 2px; background: var(--linie); }

/* ---------- Spalten, Tabellen ---------- */
.spalten { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.hauptspalte, .seitenspalte { min-width: 0; }
.seitenspalte { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; }
pre.mail { white-space: pre-wrap; font: 12.5px/1.5 Consolas, monospace; max-height: 420px; overflow-y: auto; margin: 8px 0 0;
           background: var(--bg); padding: 10px; border-radius: 6px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13px; color: var(--leise); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--linie); }
td { padding: 6px 8px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.positionen input.menge { width: 90px; }
.positionen input.betrag { width: 120px; }
.positionen tfoot td { font-weight: 700; border-bottom: none; padding-top: 10px; }
.karte:has(.positionen) { overflow-x: auto; }
input.betrag { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--schatten); }
.tabelle td, .tabelle th { padding: 12px 14px; }
.tabelle tbody tr { cursor: pointer; }
.tabelle tbody tr:hover { background: var(--blau-hell); }
.tabelle td a { font-weight: 600; text-decoration: none; }

.filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.filter a { text-decoration: none; color: var(--text); background: #fff; border: 1px solid var(--linie); border-radius: 20px;
            padding: 6px 14px; font-size: 14px; }
.filter a.aktiv { background: var(--blau); color: #fff; border-color: var(--blau); }
.status { font-size: 13px; padding: 3px 10px; border-radius: 12px; background: var(--linie); white-space: nowrap; font-weight: 600; }
.status.neu { background: #fff0dc; color: var(--orange-dunkel); }
.status.in_arbeit { background: var(--gelb); color: #7a5a00; }
.status.angebot { background: var(--blau-hell); color: var(--blau-dunkel); }
.status.angenommen, .status.erledigt { background: var(--gruen-hell); color: var(--gruen); }

/* ---------- Meldungen ---------- */
.meldung { max-width: 1360px; margin: 14px auto 0; padding: 12px 18px; background: var(--blau-hell); border-left: 4px solid var(--blau); border-radius: 6px; }
.meldung.gruen { background: var(--gruen-hell); border-left-color: var(--gruen); }
main .meldung { margin: 0 0 14px; }
.pruefen { padding: 12px 16px; }
.pruefen:has(.ok:only-child) { padding: 10px 16px; }
.fehlt, .hinweis, .info, .ok { padding: 7px 12px; border-radius: 6px; margin: 3px 0; font-size: 14.5px; }
.fehlt { background: var(--fehler-hell); color: var(--fehler); font-weight: 600; }
.hinweis { background: var(--gelb); border-left: 3px solid var(--gelb-rand); }
.info { background: var(--blau-hell); border-left: 3px solid var(--blau); }
.ok { color: var(--gruen); font-weight: 600; }

/* ---------- Seitenspalte ---------- */
.vorschlag { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 16px; margin: 0 0 6px; }
.vorschlag b { color: var(--blau-dunkel); font-size: 20px; }
.herleitung { list-style: none; padding: 0; margin: 0 0 10px; font-size: 14px; }
.herleitung li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.herleitung li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.verlauf { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--linie); font-size: 14px; }
.verlauf li { position: relative; padding: 0 0 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.verlauf li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
                      background: #fff; border: 2px solid var(--blau); }
.verlauf .zeit { color: var(--leise); font-size: 12.5px; }
.datei-knoepfe { display: flex; gap: 12px; }
.datei-knoepfe a { font-weight: 600; }
.uebersicht { margin: 0; }
.uebersicht div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.uebersicht dt { color: var(--leise); }
.uebersicht dd { margin: 0; font-variant-numeric: tabular-nums; }
.uebersicht .gesamt { font-size: 18px; color: var(--orange-dunkel); border-bottom: none; }

/* ---------- Untere Leiste ---------- */
.leiste { position: sticky; bottom: 10px; background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 12px 16px;
          display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; z-index: 5;
          box-shadow: 0 6px 24px rgba(16, 40, 64, .16); }
.summen { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; font-size: 15px; }
.summen b { font-variant-numeric: tabular-nums; }
.summen .gesamt { font-size: 20px; color: var(--blau-dunkel); }
.speicherstand { font-size: 13px; color: var(--leise); }
.speicherstand.gut { color: var(--gruen); }
.speicherstand.fehler { color: var(--fehler); font-weight: 600; }

@media (max-width: 1050px) {
  .spalten { grid-template-columns: minmax(0, 1fr); }
  .seitenspalte { position: static; max-height: none; }
}
@media (max-width: 640px) {
  main { padding: 14px 16px 150px; }
  .kopf { padding: 8px 16px; }
  .kopf .marke img { height: 36px; }
  .kopf .marke span { display: none; }
  .zwei { grid-template-columns: 1fr; }
  .raster { grid-template-columns: 1fr; }
  .raster .doppelt { grid-column: auto; }
  .schritt { padding: 10px 12px; }
  .schritt small, .schritt-linie { display: none; }
  .gruppe-titel { width: 100%; }
  .leiste { bottom: 0; border-radius: 12px 12px 0 0; margin: 0 -16px; }
  .leiste .knoepfe { width: 100%; }
  .leiste .knoepfe button { flex: 1; }
  .speicherstand { width: 100%; }
  .positionen thead { display: none; }
  .positionen tbody tr { display: grid; grid-template-columns: 80px 1fr auto; gap: 6px 8px; align-items: center;
                         padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .positionen tbody td { border: none; padding: 0; }
  .positionen tbody td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .positionen input.menge, .positionen input.betrag { width: 100%; }
  .positionen tfoot tr { display: flex; justify-content: space-between; }
  .positionen tfoot td { padding: 10px 0 0; }
  .karte:has(.positionen) { overflow-x: visible; }
  .tabelle th:nth-child(1), .tabelle td:nth-child(1), .tabelle th:nth-child(4), .tabelle td:nth-child(4) { display: none; }
}

/* Weitere Positionen */
.zeile-plus td { border-bottom: none; padding-top: 12px; }
.entfernen { min-height: 30px; padding: 0 10px; margin-left: 8px; font-size: 18px; line-height: 1; color: var(--fehler); border-color: #f0c4c0; }
[data-zusatz-zeile] td:first-child input { min-width: 180px; }
@media (max-width: 640px) { .zeile-plus { display: block !important; } }