/* Börse – Version 2. Seitenleiste links, Kopfleiste oben, Tabellen am Rechner, Karten am Handy.
   Farben: dunkles Petrol für die Leiste, Petrol als Hauptfarbe, Grün für Hauptaktionen, Orange für Sofort und Warnungen. */
:root {
  color-scheme: light;
  --leiste: #112d33; --leiste-hell: #1b414a; --leiste-text: #c9dfe0;
  --haupt: #0e7c86; --haupt-dunkel: #0a5f67; --haupt-hell: #e3f3f4; --haupt-zart: #f2f9fa; --haupt-rand: #b7d3d6; --akzent: #3fc1c9;
  --gruen: #23955a; --gruen-dunkel: #1b7646; --gruen-hell: #e3f4ea;
  --orange: #d9730d; --orange-hell: #fdf0e1; --rot: #b42e22; --rot-hell: #fbe7e5; --gelb-hell: #fdf3d9;
  --text: #1a2426; --leise: #5c6a6d; --rand: #dbe2e3; --rand-zart: #edf1f1; --grund: #f3f5f6; --seite: #e3e8ea; --weiss: #fff;
  --schatten: 0 1px 2px rgba(17, 45, 51, .07), 0 2px 10px rgba(17, 45, 51, .07);
  --schatten-gross: 0 10px 40px rgba(17, 45, 51, .22);
  --leiste-breite: 236px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--seite); }
a { color: var(--haupt); }
h1 { font-size: 1.45rem; margin: .2rem 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.08rem; margin: 0 0 .7rem; }
h3 { font-size: .98rem; margin: 1.1rem 0 .5rem; }
hr { border: 0; border-top: 1px solid var(--rand); margin: 14px 0; }
.icon { flex: none; vertical-align: middle; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(14, 124, 134, .45); outline-offset: 2px; }
.leise { color: var(--leise); font-size: .88rem; font-weight: 400; }
.mitte { text-align: center; }
.rechtsbuendig { text-align: right; }
.rot { color: var(--rot); }
.gruen { color: var(--gruen); }

/* ---------- Seitenrahmen ---------- */
.leiste { position: fixed; inset: 0 auto 0 0; width: var(--leiste-breite); background: var(--leiste); color: var(--leiste-text); display: flex; flex-direction: column; z-index: 40; overflow-y: auto; }
.leiste .marke { display: flex; align-items: center; gap: 8px; padding: 18px 20px 16px; color: #fff; font-weight: 800; font-size: 1.2rem; text-decoration: none; letter-spacing: -.01em; }
.leiste nav { display: flex; flex-direction: column; padding: 4px 10px; gap: 2px; flex: 1; }
.leiste nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--leiste-text); text-decoration: none; font-size: .93rem; position: relative; }
.leiste nav a:hover { background: var(--leiste-hell); color: #fff; }
.leiste nav a.aktiv { background: var(--leiste-hell); color: #fff; font-weight: 600; }
.leiste nav a.aktiv::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--akzent); }
.leiste nav a.unter { padding: 6px 12px 6px 44px; font-size: .86rem; }
.leiste nav a .zahl { margin-left: auto; background: var(--orange); color: #fff; font-size: .72rem; border-radius: 10px; padding: 1px 7px; font-weight: 700; }
.leiste-fuss { padding: 14px 20px; font-size: .75rem; opacity: .6; }
.test { background: var(--akzent); color: var(--leiste); font-size: .62rem; padding: 2px 6px; border-radius: 5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.leiste-schatten { display: none; }

.haupt { margin-left: var(--leiste-breite); min-height: 100vh; display: flex; flex-direction: column; }
.oben { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 20px; background: var(--weiss); border-bottom: 1px solid var(--rand); }
.oben .marke { font-weight: 800; color: var(--leiste); text-decoration: none; font-size: 1.1rem; }
.oben-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.oben.einfach { background: var(--leiste); border: 0; }
.oben.einfach .marke { color: #fff; display: flex; gap: 8px; align-items: center; }
.inhalt { width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 24px 40px; flex: 1; }
.inhalt.breit { max-width: none; }
.schmal-seite { max-width: 560px; }
.fuss { text-align: center; color: var(--leise); font-size: .78rem; padding: 18px; }
.nur-handy { display: none !important; }

.symbolknopf { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--leise); cursor: pointer; padding: 0; }
.symbolknopf:hover { background: var(--grund); color: var(--text); }
.punkt { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--orange); color: #fff; font-size: .64rem; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #fff; box-sizing: border-box; }
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--haupt); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; margin-left: 4px; }
.aufklapp { position: relative; }
.aufklapp-feld { position: absolute; right: 0; top: 48px; width: 380px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; background: var(--weiss); border: 1px solid var(--rand); border-radius: 12px; box-shadow: var(--schatten-gross); z-index: 60; }
.aufklapp-feld.klein { width: 260px; }
.aufklapp-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--rand); flex-wrap: wrap; }
.aufklapp-kopf .leise { width: 100%; }
.aufklapp-mehr { display: block; text-align: center; padding: 10px; font-weight: 600; text-decoration: none; border-top: 1px solid var(--rand); }

.meldung-zeile { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; border-bottom: 1px solid var(--rand-zart); color: var(--text); text-decoration: none; position: relative; }
.meldung-zeile:hover { background: var(--haupt-zart); }
.meldung-zeile span { color: var(--leise); font-size: .88rem; }
.meldung-zeile small { color: var(--leise); font-size: .76rem; }
.meldung-zeile.neu { background: var(--haupt-zart); }
.meldung-zeile.neu::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--haupt); border-radius: 0 3px 3px 0; }
.liste-karte { padding: 0; overflow: hidden; }
.liste-karte h3 { margin: 0; padding: 12px 14px 4px; }
.liste-karte > p { padding: 16px; margin: 0; }

/* Seitenfenster (Fracht-Details) und Messenger */
.seitenfenster { position: fixed; top: 58px; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--weiss); box-shadow: var(--schatten-gross); z-index: 70; display: flex; flex-direction: column; animation: herein .18s ease-out; }
.seitenfenster.messenger { width: min(430px, 100vw); }
.seitenfenster-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--rand); min-height: 52px; }
.seitenfenster-kopf .textknopf { margin-left: auto; }
.seitenfenster iframe { border: 0; width: 100%; flex: 1; }
@keyframes herein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
body.im-panel { background: var(--weiss); }
.panel-inhalt { padding: 14px 18px 30px; max-width: none; }
.im-panel .karte { box-shadow: none; }

/* ---------- Bausteine ---------- */
.karte { background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px; padding: 18px; margin: 0 0 16px; box-shadow: var(--schatten); }
.karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.karte-kopf h2 { margin: 0; }
details.karte > summary { font-weight: 700; cursor: pointer; }
details.karte[open] > summary { margin-bottom: 10px; }
.leer-hinweis { text-align: center; color: var(--leise); padding: 40px 20px; }
.leer-hinweis strong { color: var(--text); font-size: 1.05rem; }
.begruessung { margin: -6px 0 16px; color: var(--leise); }

.hinweis { padding: 11px 14px; border-radius: 8px; margin: 0 0 14px; background: var(--haupt-hell); border-left: 4px solid var(--haupt); }
.hinweis.ok { background: var(--gruen-hell); border-color: var(--gruen); }
.hinweis.fehler { background: var(--rot-hell); border-color: var(--rot); color: #6d1a12; }
.hinweis.warn { background: var(--gelb-hell); border-color: #d9a300; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--haupt); color: #fff; border: 1px solid var(--haupt); border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 40px; white-space: nowrap; }
.knopf:hover { background: var(--haupt-dunkel); border-color: var(--haupt-dunkel); }
.knopf.leer { background: var(--weiss); color: var(--haupt); border-color: var(--haupt-rand); }
.knopf.leer:hover { background: var(--haupt-hell); }
.knopf.gruen, .knopf.hinzufuegen { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.knopf.gruen:hover, .knopf.hinzufuegen:hover { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
.knopf.rot, .knopf.warnknopf { color: var(--rot); border-color: #e3b3ae; background: var(--weiss); }
.knopf.rot:hover, .knopf.warnknopf:hover { background: var(--rot-hell); }
.knopf.sofort { background: var(--orange); border-color: var(--orange); color: #fff; }
.knopf.sofort:hover { background: #b85f08; }
.knopf.hilfe { background: var(--orange-hell); color: #8a4500; border-color: #f0c99c; }
.knopf.klein { padding: 5px 11px; min-height: 32px; font-size: .86rem; }
.knopf.gross { width: 100%; padding: 12px; font-size: 1.02rem; min-height: 48px; }
.knopf.suchen { min-width: 110px; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.textknopf { background: none; border: 0; padding: 4px 2px; color: var(--haupt); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; font-size: .9rem; }
.textknopf:hover { text-decoration: underline; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.knopfreihe.rechts { justify-content: flex-end; margin: 0; }
form.inline { display: inline; }
form.inline.rechts { margin-left: auto; }

/* Formularfelder */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font: inherit; color: var(--text); background: var(--weiss); border: 1px solid #c3cdcf; border-radius: 7px; padding: 8px 10px; min-height: 40px; }
input:focus, select:focus, textarea:focus { border-color: var(--haupt); outline: 2px solid rgba(14, 124, 134, .18); outline-offset: 0; }
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--haupt); }
.formular label, .karte > label, .fracht-formular label:not(.haken):not(.kachel-wahl):not(.ziel-wahl), .dialog label:not(.haken):not(.kachel-wahl) { display: block; margin: 0 0 12px; font-weight: 600; font-size: .88rem; }
.formular input:not([type=checkbox]):not([type=radio]):not([type=file]), .formular select, .formular textarea,
.karte > label input:not([type=checkbox]):not([type=radio]), .karte > label select, .karte > label textarea,
.fracht-formular label input:not([type=checkbox]):not([type=radio]), .fracht-formular label select, .fracht-formular label textarea, .fracht-formular textarea,
.dialog label input:not([type=checkbox]):not([type=radio]), .dialog label select, .dialog label textarea { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
label.haken { display: inline-flex; gap: 8px; align-items: flex-start; font-weight: 400 !important; font-size: .93rem !important; margin: 0 14px 6px 0 !important; cursor: pointer; }
label.haken input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.reihe3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; align-items: end; }
.reihe3 > .knopf { margin-bottom: 12px; }
.reihe-form { display: flex; gap: 8px; align-items: flex-end; } .reihe-form label { flex: 1; margin: 0 !important; }
.schmal { max-width: 460px; margin-left: auto; margin-right: auto; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.karte { border: 1px solid var(--rand); padding: 18px; }
legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.feldname { display: block; font-weight: 600; font-size: .88rem; margin: 0 0 4px; }
.radio-reihe legend { font-size: .88rem; font-weight: 600; margin-bottom: 8px; }
.gross-schrift { text-transform: uppercase; }
.schritt { display: flex; align-items: center; gap: 10px; margin: 1.2rem 0 .6rem; }
.schritt span { background: var(--haupt); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.kacheln.zwei { grid-template-columns: 1fr 1fr; }
.kachel { background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px; padding: 16px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 4px; min-height: 90px; }
.kachel:hover { border-color: var(--haupt); }
.kachel strong { font-size: 1.4rem; color: var(--haupt); }
.kachel.betont { background: var(--haupt); color: #fff; } .kachel.betont strong { color: #fff; }
.kachel-wahl { position: relative; border: 1.5px solid var(--rand); border-radius: 9px; padding: 10px 12px; background: var(--weiss); display: flex !important; flex-direction: column; gap: 1px; cursor: pointer; margin: 0 !important; font-size: .9rem; }
.kachel-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.kachel-wahl span { font-weight: 400; color: var(--leise); font-size: .8rem; }
.kachel-wahl:hover { border-color: #9fc6ca; }
.kachel-wahl:has(input:checked) { border-color: var(--haupt); background: var(--haupt-hell); box-shadow: inset 0 0 0 1px var(--haupt); }
.kachel-wahl.gesperrt { opacity: .4; cursor: not-allowed; }
.kachel-wahl:has(input:focus-visible) { outline: 3px solid rgba(14, 124, 134, .45); }
.kacheln.klassen, .kacheln.haken-kacheln { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip { border: 1px solid var(--haupt-rand); background: var(--weiss); color: var(--haupt); border-radius: 16px; padding: 4px 12px; font: inherit; font-size: .84rem; cursor: pointer; min-height: 30px; }
.chip:hover { background: var(--haupt-hell); }
.chip.ruhig { border-color: var(--rand); color: var(--text); background: var(--grund); cursor: default; }
.chip.ruhig b { color: var(--haupt); margin-left: 4px; }

.schild { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #eceff0; color: #46504a; white-space: nowrap; }
.s-offen, .s-neu, .s-aktiv { background: var(--haupt-hell); color: var(--haupt-dunkel); }
.s-vergeben, .s-unterwegs, .s-rueckfrage { background: var(--gelb-hell); color: #7a4a00; }
.s-zugestellt, .s-frei, .s-angenommen { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.s-abgelaufen { background: #fff1db; color: #9a5b00; }
.s-storniert, .s-abgelehnt, .s-gesperrt, .s-zurueckgezogen { background: var(--rot-hell); color: var(--rot); }
.s-direkt { background: #ece8fb; color: #4b3a9e; }
.s-veraltet, .s-geaendert { background: var(--orange-hell); color: #8a4500; }
.s-erledigt { background: #eceff0; color: var(--leise); }
.sterne { color: #c27c00; font-weight: 700; white-space: nowrap; }
.sterne .aus { color: #d6dadb; }
.land { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em; background: var(--leiste); color: #fff; border-radius: 3px; padding: 1px 4px; vertical-align: 1px; }
.online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34b46a; margin-right: 6px; vertical-align: 1px; }
.warnung { color: #9a4d00; font-weight: 600; font-size: .86rem; }

/* Reiter */
.reiter { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 16px; border-bottom: 1px solid var(--rand); }
.reiter a, .reiter > span { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; color: var(--leise); text-decoration: none; font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter a:hover { color: var(--text); }
.reiter a.aktiv, .reiter > span.aktiv { color: var(--haupt); border-bottom-color: var(--haupt); }
.reiter-mit-x { padding: 0 !important; }
.reiter-mit-x a { padding-right: 4px; border-bottom: 0 !important; margin: 0; }
.reiter-mit-x.aktiv a { color: var(--haupt); }
.reiter-mit-x .x { background: none; border: 0; color: var(--leise); cursor: pointer; font-size: 1.05rem; padding: 0 10px 0 2px; }
.reiter-mit-x .x:hover { color: var(--rot); }
.seiten-werkzeug { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; border-bottom: 1px solid var(--rand); }
.seiten-werkzeug .reiter { border: 0; margin: 0; }
.seiten-werkzeug > .knopf, .seiten-werkzeug > .knopfreihe, .seiten-werkzeug > button { margin-bottom: 8px; }
.rolle-wahl { display: flex; flex-wrap: wrap; gap: 18px; margin: -4px 0 12px; }
.rolle-wahl a { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; font-size: .92rem; }
.rolle-wahl .radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #9aa9ac; display: inline-block; }
.rolle-wahl a.aktiv .radio { border: 5px solid var(--haupt); }
.suchzeile { display: flex; gap: 8px; margin: 0 0 14px; max-width: 560px; }
.suchzeile input { flex: 1; min-width: 0; }
.einl-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 6px; }
.einl-filter .suchzeile { margin: 0; flex: 1 1 340px; }
.einl-wahl { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: var(--leise); font-weight: 600; }
.einl-wahl select { min-width: 150px; }
.einl-treffer { margin: 4px 0 10px; }
.frachttabelle th a.sortier { color: inherit; text-decoration: none; white-space: nowrap; }
.frachttabelle th a.sortier span { opacity: .45; font-size: .9em; }
.frachttabelle th a.sortier:hover, .frachttabelle th a.sortier.aktiv { color: var(--haupt); }
.frachttabelle th a.sortier.aktiv span { opacity: 1; }
.einl-land { white-space: nowrap; }
.stilwahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stilkarte { position: relative; display: flex; flex-direction: column; border: 2px solid var(--rand); border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--weiss); }
.stilkarte input { position: absolute; opacity: 0; }
.stilkarte:has(input:checked) { border-color: var(--haupt); box-shadow: 0 0 0 3px var(--haupt-hell); }
.stilkarte:has(input:focus-visible) { outline: 2px solid var(--haupt); outline-offset: 2px; }
.stilbild { display: block; height: 170px; overflow: hidden; position: relative; background: #f3f5f6; pointer-events: none; }
.stilbild iframe { width: 640px; height: 520px; border: 0; transform: scale(.4); transform-origin: 0 0; position: absolute; top: 0; left: 0; }
.stilname { display: flex; flex-direction: column; padding: 8px 12px; border-top: 1px solid var(--rand-zart); }
.stilname small { color: var(--leise); }
.stilkarte:has(input:checked) .stilname strong::before { content: "✓ "; color: var(--haupt); }
.mailstil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.mailstil-vorschau { position: sticky; top: 72px; }
.mailstil-vorschau iframe { width: 100%; height: 620px; border: 1px solid var(--rand); border-radius: 10px; background: #f3f5f6; }
.farbwahl { display: block; } .farbwahl input[type=color] { width: 64px; height: 40px; padding: 2px; border-radius: 8px; cursor: pointer; }
@media (max-width: 900px) { .mailstil { grid-template-columns: 1fr; } .mailstil-vorschau iframe { height: 520px; } }
.blaettern { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 14px 0 6px; }

/* Filterleiste */
.filterleiste { padding: 14px 16px; }
.filter-haupt { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter-haupt > label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .82rem; color: var(--leise); }
.filter-haupt > label input { width: 100px; }
.filter-haupt > label select { max-width: 170px; }
.filter-ort legend { font-size: .82rem; color: var(--leise); margin-bottom: 4px; font-weight: 600; }
.filter-ort { display: flex; gap: 0; }
.filter-ort > select, .filter-ort > input { border-radius: 0; margin-left: -1px; }
.filter-ort > :first-of-type { border-radius: 7px 0 0 7px; margin-left: 0; max-width: 135px; }
.filter-ort > select:last-child { max-width: 120px; }
.filter-ort > :last-child { border-radius: 0 7px 7px 0; }
.filter-ort input { width: 90px; }
.symbolknopf.tausch { border: 1px solid var(--rand); border-radius: 8px; margin-bottom: 0; }
details.weitere { margin-top: 12px; border-top: 1px solid var(--rand-zart); padding-top: 10px; }
details.weitere > summary { cursor: pointer; font-weight: 600; color: var(--haupt); font-size: .9rem; }
.filter-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 20px; margin-top: 12px; }
.filter-raster label { display: block; font-weight: 600; font-size: .84rem; margin: 0 0 10px; }
.filter-raster label input, .filter-raster label select { display: block; width: 100%; margin-top: 3px; }
.von-bis { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.von-bis input { flex: 1; min-width: 0; }
.haken-liste { display: flex; flex-direction: column; }
.listen-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.chips-aktiv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zaehler { font-size: .92rem; margin-right: 6px; }
.chip-x { display: inline-flex; align-items: center; gap: 6px; background: var(--haupt-hell); color: var(--haupt-dunkel); border-radius: 14px; padding: 3px 10px; font-size: .82rem; text-decoration: none; font-weight: 600; }
.chip-x:hover { background: #cfeaec; }
.chip-x span { font-size: 1rem; line-height: 1; }
.listen-werkzeug { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-speichern { display: flex; gap: 6px; }
.filter-speichern input { width: 150px; min-height: 32px !important; padding: 4px 8px !important; }

/* Frachttabelle */
.tabelle-rahmen { background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px; overflow-x: auto; box-shadow: var(--schatten); margin: 0 0 16px; }
.frachttabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.frachttabelle th { text-align: left; font-weight: 600; font-size: .76rem; color: var(--leise); text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid var(--rand); background: #fafbfb; white-space: nowrap; }
.frachttabelle td { padding: 10px 12px; border-bottom: 1px solid var(--rand-zart); vertical-align: top; }
.frachttabelle tbody tr:last-child td { border-bottom: 0; }
.frachttabelle tr[data-fahrt] { cursor: pointer; }
.frachttabelle tbody tr:hover { background: var(--haupt-zart); }
.frachttabelle tr.gewaehlt { background: var(--haupt-hell) !important; box-shadow: inset 3px 0 0 var(--haupt); }
/* 2.78 (Sascha 05.11.: „die Touren müssen sauberer voneinander getrennt sein“ → Vorschlag B): am PC jede zweite Fracht leicht grau + deutlicherer Strich; am Handy bleiben es Karten */
@media (min-width: 761px) {
  .frachttabelle tbody td { border-bottom-color: #d5dde0; padding-top: 12px; padding-bottom: 12px; }
  .frachttabelle tbody tr:nth-child(even) > td { background: #f2f5f6; }
  /* 2.78 (Sascha 10:44: „wo der Mauszeiger steht, muss eine andere Farbe haben“): Zeile unter der Maus deutlich in der Börsenfarbe + Balken links */
  .frachttabelle tbody tr:hover > td { background: #d3eaec; background: color-mix(in srgb, var(--haupt) 17%, #fff); }
  .frachttabelle tbody tr:hover > td:first-child { box-shadow: inset 4px 0 0 var(--haupt); }
  .frachttabelle tbody tr.gewaehlt > td { background: var(--haupt-hell); }
  body.kompakt .frachttabelle tbody td { padding-top: 6px; padding-bottom: 6px; }
}
.frachttabelle td small { display: block; color: var(--leise); font-size: .8rem; margin-top: 1px; }
.frachttabelle td.ort { white-space: nowrap; }
.frachttabelle .zeilenlink { color: inherit; text-decoration: none; }
.frachttabelle .abstand { color: var(--haupt) !important; font-weight: 600; }
.frachttabelle .direkt { color: #4b3a9e !important; font-weight: 600; }
.frachttabelle td.fahrzeug { min-width: 200px; max-width: 320px; }
.frachttabelle td.preis strong { font-size: .98rem; white-space: nowrap; }
.frachttabelle td.firma { min-width: 170px; }
.frachttabelle td.firma a { color: inherit; text-decoration: none; }
.frachttabelle .person { color: var(--text) !important; padding: 0; border: 0; }
.karte .karte.leer-hinweis { border: 0; box-shadow: none; padding: 24px 10px; margin: 0; }
.sofort { color: var(--orange); }
.frachttabelle td.merken { width: 44px; padding-left: 0; }
.stern { background: none; border: 0; padding: 4px; cursor: pointer; color: #b8c2c4; border-radius: 6px; }
.stern:hover { color: #c27c00; background: var(--gelb-hell); }
.stern.an { color: #e0a100; } .stern.an svg { fill: currentColor; }
body.kompakt .frachttabelle td { padding-top: 5px; padding-bottom: 5px; }
body.kompakt .frachttabelle td small:not(.abstand) { display: none; }
body.kompakt .frachttabelle td .leise { display: none; }
.tabelle-box { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tabelle th, table.tabelle td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rand-zart); }
table.daten { width: 100%; border-collapse: collapse; margin: 8px 0; }
table.daten th { text-align: left; width: 34%; color: var(--leise); font-weight: 600; padding: 6px 8px 6px 0; vertical-align: top; font-size: .9rem; }
table.daten td { padding: 6px 0; border-bottom: 1px solid var(--rand-zart); }

/* Fracht einstellen */
.fracht-formular { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.fracht-rechts { position: sticky; top: 74px; }
.stellen { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 14px; align-items: start; }
.stellen .tausch { margin-top: 28px; }
fieldset.stelle legend { font-size: 1rem; }
.karte.schnell { background: linear-gradient(180deg, var(--haupt-zart), var(--weiss)); border-color: #c7e2e5; }
.karte.schnell textarea { width: 100%; }
.ziel-wahl { display: flex !important; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 9px; margin: 0 0 10px; cursor: pointer; }
.ziel-wahl input { width: 18px; height: 18px; margin-top: 2px; }
.ziel-wahl span { display: flex; flex-direction: column; }
.ziel-wahl small { color: var(--leise); font-size: .8rem; }
.ziel-wahl.gross { border: 0; padding: 4px 0; cursor: default; }
.ziel-wahl:has(input:checked) { border-color: var(--haupt); background: var(--haupt-zart); }
.partner-wahl { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; padding: 4px 0; }
.partner-wahl label.haken { margin: 0 0 8px !important; }

/* Fracht ansehen */
.fracht-kopf { padding: 14px 18px; }
.stellen-kurz { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.stellen-kurz > div { display: flex; flex-direction: column; }
.stellen-kurz strong { font-size: 1.08rem; }
.stellen-kurz small { color: var(--leise); }
.pfeil { color: var(--haupt); font-size: 1.4rem; }
.kopf-zeile { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 10px 0 0; }
.fracht-reiter { position: sticky; top: 58px; background: var(--seite); z-index: 5; }
.im-panel .fracht-reiter { top: 0; background: var(--weiss); }
.blatt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
dl.werte { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 6px 12px; margin: 0 0 10px; font-size: .9rem; }
dl.werte dt { color: var(--leise); }
dl.werte dd { margin: 0; }
.beschreibung { background: var(--grund); padding: 10px 12px; border-radius: 8px; }
.route-linie { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; font-weight: 600; }
.route-linie .strich { flex: 1; min-width: 30px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--haupt) 0 8px, transparent 8px) 0 0 / 14px 3px repeat-x; position: relative; }
.route-linie .strich::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 8px solid var(--haupt); }
.angebot { border: 1px solid var(--rand); border-radius: 9px; padding: 10px 12px; margin: 0 0 8px; }
.angebot-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.angebot.gewinner { border-color: var(--gruen); background: var(--gruen-hell); }
.angebot.durch { opacity: .55; } .angebot.durch .preis { text-decoration: line-through; }
.preis { font-size: 1.1rem; }
.sofort-form { margin-bottom: 6px; }
.liste { padding-left: 18px; } .liste li { margin: 0 0 6px; }
.liste-schlicht { list-style: none; padding: 0; margin: 0 0 10px; font-size: .9rem; } .liste-schlicht li { margin: 0 0 4px; }
.verlauf { padding-left: 18px; font-size: .9rem; }
.zeitleiste { list-style: none; padding: 0 0 0 14px; margin: 0; border-left: 2px solid var(--rand); font-size: .9rem; }
.zeitleiste li { position: relative; padding: 0 0 10px 10px; }
.zeitleiste li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--haupt); }
.status-kacheln { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.kriterien { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; }
.unterschrift-feld { border: 2px dashed #9aa8aa; border-radius: 9px; background: #fff; touch-action: none; }
.unterschrift-feld canvas { width: 100%; height: 200px; display: block; }
.sterne-wahl { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin: 0 0 10px; }
.sterne-wahl input { position: absolute; opacity: 0; }
.sterne-wahl label { font-size: 2.1rem; color: #d3d8d9; cursor: pointer; margin: 0 !important; }
.sterne-wahl input:checked ~ label, .sterne-wahl label:hover, .sterne-wahl label:hover ~ label { color: #e0a100; }

/* Firmenblatt und Bewertungen */
.firmenblatt-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.firmenblatt-kopf a { color: var(--text); text-decoration: none; font-size: 1.05rem; }
.logo-platz { width: 52px; height: 52px; border-radius: 10px; background: var(--haupt-hell); color: var(--haupt-dunkel); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex: none; }
.zahlstatus { list-style: none; padding: 0; margin: 0 0 10px; font-size: .9rem; }
.zahlstatus li { padding-left: 18px; position: relative; margin: 0 0 4px; }
.zahlstatus li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; }
.zahlstatus .gut::before { background: #34b46a; } .zahlstatus .mittel::before { background: #e0a100; } .zahlstatus .schlecht::before { background: var(--rot); }
.person { padding: 10px 0; border-bottom: 1px solid var(--rand-zart); }
.person .knopfreihe { margin: 6px 0 0; }
.gross-wert { font-size: 1.6rem; font-weight: 800; margin: 0 0 10px; }
.gross-wert .leise { font-size: .9rem; font-weight: 400; }
.balken-liste { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; max-width: 520px; }
.balken-zeile { display: grid; grid-template-columns: 170px 1fr minmax(48px, auto); gap: 10px; align-items: center; font-size: .88rem; }
.balken { height: 8px; background: var(--rand-zart); border-radius: 4px; overflow: hidden; }
.balken span { display: block; height: 100%; background: var(--haupt); border-radius: 4px; }
.bewertung { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rand-zart); }
.bewertung p { margin: 4px 0 0; }

/* Nachrichten */
.verlauf-nachrichten, .chat { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.nachricht { background: #eef1f2; border-radius: 12px 12px 12px 4px; padding: 8px 12px; max-width: 85%; align-self: flex-start; }
.nachricht.eigen { background: var(--haupt-hell); align-self: flex-end; border-radius: 12px 12px 4px 12px; }
.nachricht .leise { font-size: .75rem; }
.chat-kopf { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rand); }
.chat-kopf .textknopf { align-self: flex-start; padding: 0; }
.chat { min-height: 160px; }
.chat-eingabe { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; background: var(--weiss); padding: 10px 0; border-top: 1px solid var(--rand); }
.chat-eingabe textarea { flex: 1; min-height: 44px; }
.chat-werkzeug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.chat-werkzeug .suchzeile { margin: 0; flex: 1; min-width: 200px; }

/* Dashboard */
.zahl-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0 0 18px; }
.zahl-kachel { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px; padding: 14px; text-decoration: none; color: var(--text); box-shadow: var(--schatten); }
.zahl-kachel:hover { border-color: var(--haupt); }
.zahl-kachel .icon { grid-row: span 2; color: var(--leise); width: 26px; height: 26px; }
.zahl-kachel strong { font-size: 1.5rem; line-height: 1.1; color: var(--leise); }
.zahl-kachel span { font-size: .82rem; color: var(--leise); }
.zahl-kachel.hat .icon, .zahl-kachel.hat strong { color: var(--haupt); }
.dash-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
.dash-breit { grid-column: 1 / -1; }
.dash-breit .tabelle-rahmen { box-shadow: none; margin: 0; }
.rechner input { max-width: 200px; }
dl.kurse { grid-template-columns: 60px 1fr; max-width: 260px; }
dl.kurse dt { font-weight: 700; color: var(--text); }
dl.kurse dd { text-align: right; font-variant-numeric: tabular-nums; }

/* Admin (unverändert aus Version 1) */
.ampel { list-style: none; padding: 0; } .ampel li { padding: 6px 0 6px 26px; position: relative; }
.ampel li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #ccc; }
.ampel li.gruen::before { background: #2e8b4f; } .ampel li.rot::before { background: #c0392b; } .ampel li.gelb::before { background: #e0a100; }
.ampel li.gruen { color: inherit; }
.nachweis-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rand-zart); }
.nachweis-zeile label { display: flex; gap: 6px; align-items: center; font-size: .9rem; margin: 0 !important; }
details.mail pre { white-space: pre-wrap; background: #f6f7f7; padding: 8px; border-radius: 8px; font-size: .85rem; }

/* Dialog „Fahrzeug hinzufügen“ */
dialog.dialog { border: 0; border-radius: 12px; padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 40px); box-shadow: var(--schatten-gross); }
dialog.dialog::backdrop { background: rgba(17, 45, 51, .45); }
dialog.dialog > form { padding: 0 22px 22px; }
.dialog-kopf { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--weiss); padding: 16px 0 8px; z-index: 1; }
.dialog-kopf h2 { margin: 0; }
dialog.dialog h3 { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rand-zart); }
dialog.dialog details { margin: 0 0 12px; }
dialog.dialog summary { cursor: pointer; font-weight: 600; color: var(--haupt); margin-bottom: 8px; }
dialog.dialog select[multiple] { min-height: 110px; }


/* ---------- Version 2.1: Suchspalte (wie courier.net) ---------- */
.such-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 18px; align-items: start; }
.suchspalte { background: var(--haupt-zart); border: 1px solid #c7e2e5; border-radius: 10px; box-shadow: var(--schatten); position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; }
.suchspalte > summary { list-style: none; display: flex; align-items: center; gap: 8px; background: var(--haupt); color: #fff; font-weight: 700; padding: 10px 14px; border-radius: 9px 9px 0 0; cursor: pointer; position: sticky; top: 0; z-index: 2; }
.suchspalte > summary::-webkit-details-marker { display: none; }
.suchspalte:not([open]) > summary { border-radius: 9px; }
.zahl-punkt { background: var(--orange); color: #fff; border-radius: 9px; font-size: .72rem; padding: 1px 7px; }
.suchspalte form { padding: 6px 12px 12px; }
.such-block { margin: 8px 0 4px; }
.such-block legend { color: var(--haupt-dunkel); font-size: .92rem; margin-bottom: 6px; }
.land-plz { display: grid; grid-template-columns: 62px repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 6px; }
.land-plz > * { border-radius: 0 !important; margin-left: -1px; min-width: 0; padding-left: 6px !important; padding-right: 4px !important; }
.land-plz > :first-child { border-radius: 7px 0 0 7px !important; margin-left: 0; }
.land-plz > :last-child { border-radius: 0 7px 7px 0 !important; }
.zeile-label { display: grid !important; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; font-weight: 600; font-size: .82rem; color: var(--leise); margin: 0 0 6px !important; }
.zeile-label input, .zeile-label select { width: 100%; min-width: 0; }
.suchspalte select, .suchspalte input:not([type=checkbox]) { min-height: 36px; padding: 6px 8px; font-size: .9rem; }
.suchspalte .such-block > select { width: 100%; }
.suchspalte .von-bis input { font-size: .85rem; padding: 6px 4px; }
.suchspalte .haken-liste { margin: 8px 0 2px; }
.suchspalte label.haken { margin: 0 0 5px !important; font-size: .9rem !important; }
.klein-text { display: block; font-size: .76rem; margin: 2px 0 4px; }
.tausch-zeile { display: flex; align-items: center; gap: 6px; margin: 2px auto; background: none; border: 1px dashed #9fc6ca; color: var(--haupt); border-radius: 8px; padding: 3px 10px; font: inherit; font-size: .82rem; cursor: pointer; }
.tausch-zeile .icon { transform: rotate(90deg); width: 16px; height: 16px; }
.such-knoepfe { display: flex; gap: 8px; margin: 10px 0 6px; }
.such-knoepfe .knopf.suchen { flex: 1; }
.suchspalte details.weitere { border-top: 1px solid #c7e2e5; }
.suchspalte details.weitere label { display: block; font-weight: 600; font-size: .84rem; margin: 0 0 8px; }
.suchspalte details.weitere label input, .suchspalte details.weitere label select { display: block; width: 100%; margin-top: 3px; }
.ergebnis { min-width: 0; }
a.tel { color: var(--haupt-dunkel) !important; text-decoration: none; font-weight: 600; white-space: nowrap; }
a.tel:hover { text-decoration: underline; }

/* ---------- Version 2.1: schnelle Fracht-Eingabe ---------- */
.schnell-leiste { padding: 10px 14px; background: linear-gradient(180deg, var(--haupt-zart), var(--weiss)); border-color: #c7e2e5; }
.schnell-knoepfe { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
details.schnell { flex: 1; min-width: 260px; }
details.schnell > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
details.schnell textarea { width: 100%; margin-top: 6px; }
.vorlage-wahl { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; font-size: .88rem; }
.vorlage-wahl select { max-width: 260px; }
.ort-zeile { display: grid; grid-template-columns: minmax(0, 1.2fr) 92px minmax(0, 1.6fr); gap: 0 8px; }
.datum-zeile { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.datum-zeile label { margin: 0 !important; flex: 0 0 170px; }
.datum-zeile .chips { margin: 0 0 4px; }
.zeit-zeile { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: .9rem; }
.warte-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 10px; font-size: .86rem; }
.warte-zeile .feldname { margin-right: 4px; }
.warte-wahl { margin: 0 !important; display: inline-flex !important; cursor: pointer; }
.warte-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.warte-wahl span { border: 1px solid var(--haupt-rand); background: var(--weiss); color: var(--haupt); border-radius: 14px; padding: 3px 10px; white-space: nowrap; }
.warte-wahl input:checked + span { background: var(--haupt); border-color: var(--haupt); color: #fff; font-weight: 600; }
.warte-wahl input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 1px; }
.zeit-zeile .feldname { margin: 0; }
.zeit-zeile input { width: 112px; }
details.mehr { margin: 4px 0 6px; }
details.mehr > summary { cursor: pointer; color: var(--haupt); font-weight: 600; font-size: .86rem; margin-bottom: 8px; }
.stopps { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
.stopp-zeile { display: grid; grid-template-columns: 170px 110px 110px minmax(0, 1fr) 32px; gap: 6px; align-items: center; background: var(--haupt-zart); padding: 8px; border-radius: 8px; }
.stopp-zeile > :nth-child(4) { grid-column: 4 / span 2; }
.stopp-zeile > .rund-knopf { grid-column: 5; }
.stopp-zeile > * { min-width: 0; }
/* 2.32: Vorschläge „PLZ Ort“ unter PLZ/Ort */
.ort-halter { position: relative; }
.ort-vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: 2px 0 0; padding: 4px; list-style: none; background: var(--weiss); border: 1px solid var(--haupt-rand); border-radius: 8px; box-shadow: var(--schatten-gross); max-height: 290px; overflow-y: auto; }
.ort-vorschlaege li { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 6px; cursor: pointer; line-height: 1.3; }
.ort-vorschlaege li strong { flex: none; min-width: 3.4em; font-variant-numeric: tabular-nums; }
.ort-vorschlaege li strong:empty { display: none; }
.ort-vorschlaege li .leise { flex: none; }
.ort-vorschlaege li.aktiv { background: var(--haupt-hell); }
.rund-knopf { width: 30px; height: 30px; border-radius: 50%; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; color: #fff; background: var(--gruen); }
.rund-knopf.weg { background: var(--rot); }
.klassen-knoepfe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 12px; }
.wahl-knopf { position: relative; cursor: pointer; margin: 0 !important; }
.wahl-knopf input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-knopf span { display: flex; flex-direction: column; border: 1.5px solid var(--rand); border-radius: 8px; padding: 7px 10px; background: var(--weiss); font-size: .88rem; }
.wahl-knopf small { color: var(--leise); font-size: .76rem; }
.wahl-knopf:hover span { border-color: #9fc6ca; }
.wahl-knopf input:checked + span { border-color: var(--haupt); background: var(--haupt-hell); box-shadow: inset 0 0 0 1px var(--haupt); }
.wahl-knopf input:focus-visible + span { outline: 3px solid rgba(14, 124, 134, .45); }
.haken-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px; margin: 0 0 12px; }
.haken-raster label.haken { margin: 0 0 6px !important; }
.haken-raster label.haken.gesperrt { opacity: .4; }
.sendung-zeile { display: grid; grid-template-columns: 100px 120px minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
details.packstuecke { background: var(--haupt-zart); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
details.packstuecke > summary { cursor: pointer; font-weight: 600; color: var(--haupt-dunkel); }
.ps-kopf, .ps-zeile { display: grid; grid-template-columns: 70px 76px 76px 76px 130px minmax(0, 1fr) 32px; gap: 6px; align-items: center; }
.ps-kopf { font-size: .74rem; color: var(--leise); font-weight: 600; margin: 8px 0 4px; }
.ps-zeile { margin-bottom: 6px; }
.ps-zeile > * { min-width: 0; }
.ps-feld { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.ps-feld .ps-name { display: none; }
.ps-feld input, .ps-feld select { width: 100%; }
.fracht-formular .ps-zeile label.ps-feld { margin: 0 !important; font-weight: 400 !important; }
.fracht-formular .ps-zeile label.ps-feld input:not([type=checkbox]):not([type=radio]), .fracht-formular .ps-zeile label.ps-feld select:not([multiple]) { margin-top: 0; }
.radio-reihe.inline { display: inline-flex; gap: 4px; }
.feldname.inline { display: inline; margin: 0 4px 0 8px; }
.bemerkung-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; }
.bemerkung-zeile textarea { width: 100%; }
.bemerkung-vorlagen label { display: block; font-weight: 600; font-size: .84rem; }
.bemerkung-vorlagen select { width: 100%; margin-top: 4px; }
.vorlage-speichern { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.vorlage-speichern input { width: 100%; min-height: 32px !important; padding: 4px 8px !important; }
.knopf.radar { width: 100%; }
.vorlagen-liste { padding: 12px 16px; }
.vorlagen-liste > summary { cursor: pointer; font-weight: 700; }
.vorlage-eintrag { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rand-zart); font-size: .9rem; }
.textknopf.rot { color: var(--rot); }

@media (max-width: 1099px) {
  .such-layout { grid-template-columns: 1fr; }
  .suchspalte { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .ort-zeile { grid-template-columns: 1fr 90px; }
  .ort-zeile .ort-feld { grid-column: 1 / -1; }
  .stopp-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stopp-zeile > :nth-child(4) { grid-column: auto; }
  .stopp-zeile > .rund-knopf { grid-column: 2; justify-self: end; }
  .sendung-zeile { grid-template-columns: 1fr 1fr; }
  .ps-kopf { display: none; }
  .ps-zeile { grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--weiss); padding: 6px; border-radius: 6px; align-items: end; }
  .ps-feld .ps-name { display: block; font-size: .74rem; font-weight: 400; color: var(--leise); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps-feld.ps-gewicht { grid-column: span 2; }
  .ps-zeile > .rund-knopf { justify-self: end; align-self: end; margin-bottom: 4px; }
  .bemerkung-zeile { grid-template-columns: 1fr; }
  .zeit-zeile input { width: auto; flex: 1; min-width: 0; }
}


/* ---------- Karte ---------- */
.landkarte { height: 280px; border-radius: 8px; border: 1px solid var(--rand); margin: 6px 0; background: #e8eef0; z-index: 0; }
.routen-karte .karte-kopf { align-items: center; }
#routen-info strong { color: var(--haupt-dunkel); }
.leaflet-container { font: inherit; }

/* ---------- Weitere Termine ---------- */
details.termine { margin: 10px 0 0; background: var(--haupt-zart); border-radius: 8px; padding: 8px 12px; }
details.termine > summary { cursor: pointer; font-weight: 600; color: var(--haupt-dunkel); }
.termin-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.termin-zeile { display: inline-flex; align-items: center; gap: 4px; }
.termin-zeile input { width: 160px; }

/* ---------- Mail-Versand ---------- */
.mailweg .wahl-knopf span { padding: 8px 12px; }
.mailweg .wahl-knopf small { font-size: .78rem; }
.mailweg:has(input[value=webserver]:checked) .smtp-felder { display: none; }

/* ---------- Einladungen ---------- */
.platzhalter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.aktionsleiste { position: sticky; top: 58px; background: var(--weiss); z-index: 3; padding: 6px 0; }

/* ---------- Auswertung ---------- */
.klein-kacheln { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.klein-kacheln .zahl-kachel { grid-template-columns: 1fr; box-shadow: none; padding: 10px; }

/* ---------- Ablehnen / Zurücknehmen mit Grund ---------- */
details.grund-wahl { margin: 8px 0 0; }
details.grund-wahl > summary { cursor: pointer; color: var(--rot); font-weight: 600; font-size: .88rem; display: inline-block; }
details.grund-wahl[open] { background: var(--rot-hell); border-radius: 8px; padding: 8px 10px; }
details.grund-wahl form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
details.grund-wahl input[name=hinweis] { width: 100%; }
details.grund-wahl .knopf { align-self: flex-start; }
.grund-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.grund-knoepfe .wahl-knopf span { padding: 6px 12px; font-size: .86rem; }
.grund-knoepfe .wahl-knopf input:checked + span { border-color: var(--rot); background: var(--weiss); box-shadow: inset 0 0 0 1px var(--rot); color: var(--rot); }
.rot-rand { margin-top: 10px; }

/* ---------- Update im Browser ---------- */
.update-karte { max-width: 720px; }
.update-stand { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; }
.update-stand strong { font-size: 1.3rem; }
.ablage { position: relative; display: block !important; border: 2px dashed #9fc6ca; border-radius: 12px; background: var(--haupt-zart); padding: 26px 16px; text-align: center; cursor: pointer; margin: 0 0 14px !important; }
.ablage:hover, .ablage.drueber { border-color: var(--haupt); background: var(--haupt-hell); }
.ablage input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ablage-text { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--haupt-dunkel); }
.ablage-text .icon { width: 30px; height: 30px; }
.ablage-text small { color: var(--leise); font-weight: 400; }
.ablage-datei { display: block; margin-top: 10px; font-weight: 700; color: var(--gruen-dunkel); }
.sicherung-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rand-zart); }
.sicherung-zeile span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.sicherung-zeile input { min-height: 32px !important; padding: 4px 8px !important; }
@media (max-width: 600px) { .sicherung-zeile { grid-template-columns: 1fr; } }

/* ---------- Handy und Tablet ---------- */
@media (max-width: 999px) {
  .nur-handy { display: inline-flex !important; }
  .leiste { transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  #menue-auf:checked ~ .leiste { transform: none; box-shadow: var(--schatten-gross); }
  #menue-auf:checked ~ .leiste-schatten { display: block; position: fixed; inset: 0; background: rgba(17, 45, 51, .4); z-index: 35; }
  .haupt { margin-left: 0; }
  .oben { padding: 0 8px; height: 54px; }
  .knopf.hinzufuegen span { display: none; }
  /* Glocke und eigenes Menü am Handy über die ganze Breite statt nach links aus dem Bild */
  .aufklapp-feld, .aufklapp-feld.klein { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; max-width: none; max-height: calc(100vh - 80px); }
  .knopf.hinzufuegen { padding: 8px 10px; }
  .inhalt { padding: 16px 14px 32px; }
  .fracht-formular { grid-template-columns: 1fr; }
  .fracht-rechts { position: static; }
  .dash-raster { grid-template-columns: 1fr; }
  .fracht-reiter { top: 54px; }
  .seitenfenster { top: 0; }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  h1 { font-size: 1.3rem; }
  .karte { padding: 14px; border-radius: 9px; }
  .reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .reiter::-webkit-scrollbar { display: none; }
  .reiter a, .reiter > span { white-space: nowrap; padding: 10px 11px; }
  .stellen { grid-template-columns: 1fr; }
  .stellen .tausch { margin: 0 auto 10px; transform: rotate(90deg); }
  .blatt-raster { grid-template-columns: 1fr; }
  .reihe3 { grid-template-columns: 1fr 1fr; }
  .filter-haupt { flex-direction: column; align-items: stretch; }
  .filter-ort { width: 100%; }
  .filter-ort > * { min-width: 0; width: 0; }
  .filter-ort > :first-of-type { max-width: none; flex: 1.4 1 0; }
  .filter-ort input { flex: 1 1 0; }
  .filter-ort > select:last-child { flex: 1.2 1 0; max-width: none; }
  .filter-ort legend { width: auto; }
  .filter-haupt > label input, .filter-haupt > label select { width: 100%; }
  .symbolknopf.tausch { align-self: center; transform: rotate(90deg); }
  .balken-zeile { grid-template-columns: 1fr 80px 40px; }
  /* Tabellen werden zu Karten */
  .tabelle-rahmen { background: none; border: 0; box-shadow: none; overflow: visible; }
  .frachttabelle, .frachttabelle tbody { display: block; }
  .frachttabelle thead { display: none; }
  .frachttabelle tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; position: relative; box-shadow: var(--schatten); }
  .frachttabelle td { display: block; padding: 0; border: 0; min-width: 0 !important; max-width: none !important; }
  .frachttabelle td.ort { white-space: normal; }
  .frachttabelle td:empty { display: none; }
  .frachttabelle td.fahrzeug, .frachttabelle td.firma { grid-column: 1 / -1; }
  .frachttabelle td.merken { position: absolute; top: 6px; right: 6px; width: auto; }
  .frachttabelle td.preis { text-align: left; }
  .knopfreihe.rechts { justify-content: flex-start; grid-column: 1 / -1; }
  .seitenfenster { width: 100vw; top: 0; }
  .suchzeile { max-width: none; }
  .einl-filter .suchzeile { flex: 1 1 100%; }
  .einl-filter .suchzeile input { min-width: 0; width: 100%; }
  .einl-wahl { flex: 1 1 40%; }
  .einl-wahl select { min-width: 0; width: 100%; }
  .seiten-werkzeug { border: 0; }
  .seiten-werkzeug .reiter { border-bottom: 1px solid var(--rand); width: 100%; }
  .bewertung { flex-direction: column; gap: 4px; }
  .bewertung .rechtsbuendig { text-align: left; }
}
@media (max-width: 420px) { .reihe, .reihe3 { grid-template-columns: 1fr; } .kacheln.zwei { grid-template-columns: 1fr; } .zahl-kacheln { grid-template-columns: 1fr 1fr; } }
@media print { .leiste, .oben, .fuss, .reiter, .seitenfenster { display: none !important; } .haupt { margin: 0; } }

/* Admin: Fahrzeugklassen */
.klassen-tabelle { display: grid; gap: 6px; margin: 8px 0 14px; }
.klassen-kopf, .klassen-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; }
.klassen-kopf { font-size: .8rem; font-weight: 600; color: var(--leise); padding: 0 10px; }
.klassen-zeile { padding: 8px 10px; border: 1px solid var(--rand); border-radius: 10px; background: var(--weiss); }
.klassen-zeile.geaendert { border-color: #e0b55a; background: #fffaf0; }
.klassen-zeile label { margin: 0; }
.klassen-zeile input { width: 100%; min-width: 0; }
.feld-einheit { position: relative; display: block; }
.feld-einheit em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--leise); pointer-events: none; }
.formular .feld-einheit input, .feld-einheit input { padding-right: 42px !important; text-align: right; }
@media (max-width: 700px) {
  .klassen-kopf { display: none; }
  .klassen-zeile { grid-template-columns: 1fr; gap: 6px; }
}

/* Länder umfahren */
.umfahren-block { margin-top: 12px; }
.feld-titel { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.umfahren-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.wahl-knopf.klein span { padding: 8px 14px; }
.umfahr-wahl { position: relative; min-width: 220px; flex: 1 1 220px; }
.umfahren-reihe:has(input[name=umfahren_an][value="0"]:checked) .umfahr-wahl { display: none; }
.umfahr-wahl > summary { list-style: none; cursor: pointer; height: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--weiss); }
.umfahr-wahl > summary::-webkit-details-marker { display: none; }
.umfahr-wahl > summary::after { content: '▾'; color: var(--leise); }
.umfahr-wahl[open] > summary { border-color: var(--haupt, #0e7c86); }
.umfahr-liste { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow: auto; background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; }
.umfahr-liste label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.umfahr-liste label:hover { background: var(--grund); }
.route-warnung { display: block; color: #9a5b00; margin-top: 2px; }
.stationen { margin: 2px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--leise); }
.stationen li::before { content: '↳ '; }
.stationen li.zurueck::before { content: '↩ '; }
.schritte { margin: 6px 0 12px; padding-left: 22px; }
.schritte li { margin: 4px 0; }
.stationen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; font-size: .9rem; }
/* Frachtalarm im Profil */
.alarm-liste { display: grid; gap: 8px; margin: 10px 0 16px; }
.alarm-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--weiss); }
.alarm-zeile small { display: block; margin-top: 2px; }
.alarm-zeile.aus { opacity: .65; background: var(--grund); }
.alarm-seiten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alarm-seite { border: 1px solid var(--rand); border-radius: 12px; padding: 10px 14px 6px; margin: 0; min-width: 0; }
.alarm-seite legend { font-weight: 700; padding: 0 6px; display: flex; align-items: center; gap: 6px; }
.alarm-seite legend::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #23955a; }
.alarm-seite.ziel legend::before { background: #b42e22; }
.alarm-plz { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; align-items: end; }
.alarm-plz input { min-width: 0; width: 100%; }
.alarm-form .knopf .icon, .filter-speichern .knopf svg { width: 16px; height: 16px; vertical-align: -3px; }
@media (max-width: 700px) { .alarm-seiten { grid-template-columns: 1fr; } }
.alarm-seiten { margin-bottom: 12px; }
.alarm-hinweis { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.alarm-zeile.gewaehlt { border-color: var(--haupt); box-shadow: 0 0 0 2px var(--haupt-hell); }

.benutzer-liste { display: grid; gap: 8px; margin: 10px 0 14px; }
.benutzer-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--weiss); }
.benutzer-zeile small { display: block; margin-top: 2px; color: var(--leise); }
.protokoll-tabelle td { padding: 6px 8px; vertical-align: top; }
.protokoll-tabelle td:first-child { white-space: nowrap; }
.protokoll-tabelle td:nth-child(2) { white-space: nowrap; } .protokoll-tabelle td:last-child { width: 100%; }
/* Abgelaufene Frachten */
.ablauf-liste { display: grid; gap: 12px; }
.ablauf-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; border: 1px solid var(--rand); border-left: 4px solid #e8a33d; border-radius: 12px; padding: 14px 16px; background: var(--weiss); }
.ablauf-karte .strecke { font-weight: 700; font-size: 1.02rem; }
.ablauf-karte .leise { display: block; }
.ablauf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ablauf-aktionen form { display: flex; gap: 6px; flex-wrap: wrap; }
.ablauf-aktionen input[name=vorlage_name] { min-width: 210px; }
@media (max-width: 760px) { .ablauf-karte { grid-template-columns: 1fr; } .ablauf-aktionen { justify-content: flex-start; } .ablauf-aktionen input[name=vorlage_name] { min-width: 0; flex: 1; } }
.ablauf-hinweis { background: #fff6e8; border-color: #f0c37a; }
.ablauf-aktionen.links { justify-content: flex-start; margin-top: 10px; }
@media (max-width: 760px) { .suchzeile { flex-wrap: wrap; } .suchzeile > input { flex: 1 1 55%; } .suchzeile > .rechts { flex: 1 1 100%; justify-content: center; } }
/* Bewertung positiv / negativ */
.daumen { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; white-space: nowrap; font-size: .9rem; }
.daumen.gut { color: var(--gruen-dunkel); } .daumen.schlecht { color: var(--rot); }
.daumen.gross { font-size: 1.05rem; margin-right: 10px; }
.urteile .daumen + .daumen { margin-left: 6px; }
.urteil-kopf { margin: 0 0 10px; }
.urteil-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; margin: 4px 0 12px; }
.urteil-knopf { position: relative; cursor: pointer; margin: 0 !important; }
.urteil-knopf input { position: absolute; opacity: 0; }
.urteil-knopf > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px; border: 2px solid var(--rand); border-radius: 14px; font-size: 2rem; background: var(--weiss); transition: border-color .15s, background .15s; }
.urteil-knopf strong { font-size: 1rem; } .urteil-knopf small { font-size: .78rem; color: var(--leise); font-weight: 400; }
.urteil-knopf.gut input:checked + span { border-color: var(--gruen); background: var(--gruen-hell); }
.urteil-knopf.schlecht input:checked + span { border-color: var(--rot); background: var(--rot-hell); }
.urteil-knopf input:focus-visible + span { outline: 2px solid var(--haupt); outline-offset: 2px; }
.bewertung-form .neg-text { display: none; }
.bewertung-form:has(input[value=negativ]:checked) .neg-text { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.pruef-bewertung { border: 1px solid var(--rand); border-left: 4px solid var(--rot); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.pruef-bewertung blockquote { margin: 8px 0 10px; padding: 8px 12px; background: var(--grund); border-radius: 8px; }
.pb-ab { display: flex; gap: 6px; flex-wrap: wrap; } .pb-ab input { min-width: 240px; }
@media (max-width: 760px) { .pb-ab input { min-width: 0; flex: 1 1 100%; } }
/* Admin-Ticker (Vorbild TMonline) */
.admin-ticker { position: sticky; top: 58px; z-index: 29; display: flex; align-items: center; gap: 10px; background: #1f3d5c; color: #fff; padding: 7px 14px; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.2); overflow: hidden; }
.admin-ticker[hidden] { display: none; }
.admin-ticker .rufzeichen { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #b4472a; display: flex; align-items: center; justify-content: center; font-weight: 800; animation: ticker-blinken 1s steps(2, start) infinite; }
@keyframes ticker-blinken { to { visibility: hidden; } }
.admin-ticker .laufband { flex: 1; overflow: hidden; white-space: nowrap; }
.admin-ticker .laufband span { display: inline-block; padding-left: 100%; animation: ticker-lauf 22s linear infinite; font-weight: 600; }
@keyframes ticker-lauf { to { transform: translateX(-100%); } }
.admin-ticker .zaehler { flex: none; font-size: .78rem; background: rgba(255,255,255,.16); padding: 2px 8px; border-radius: 4px; }
.admin-ticker:hover { background: #26496d; }
@media (prefers-reduced-motion: reduce) { .admin-ticker .laufband span { animation: none; padding-left: 0; } .admin-ticker .rufzeichen { animation: none; } }
/* Transportunternehmer suchen */
.firmen-filter .umkreis-zeile { display: flex; gap: 6px; } .firmen-filter .umkreis-zeile input { width: 90px; flex: none; } .firmen-filter .umkreis-zeile select { flex: 1; min-width: 0; }
.firmen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.firmen-karte { background: var(--weiss); border: 1px solid var(--rand); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fk-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.fk-bew { text-align: right; font-size: .9rem; }
.firmen-karte .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.firmen-karte .chip svg { width: 14px; height: 14px; vertical-align: -2px; }
.chip.gruen-chip { border-color: #bfe3cc; background: var(--gruen-hell); color: var(--gruen-dunkel); cursor: default; }
@media (max-width: 760px) { .firmen-liste { grid-template-columns: 1fr; } }
/* Farbe der Börse */
.farbwahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 6px 0 12px; }
.farbkarte { position: relative; cursor: pointer; border: 2px solid var(--rand); border-radius: 12px; overflow: hidden; margin: 0 !important; background: var(--weiss); }
.farbkarte input { position: absolute; opacity: 0; }
.farbkarte:has(input:checked) { border-color: var(--haupt); box-shadow: 0 0 0 3px var(--haupt-hell); }
.farbkarte:has(input:focus-visible) { outline: 2px solid var(--haupt); outline-offset: 2px; }
.farbmuster { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 12px 18px; position: relative; min-height: 96px; }
.fm-strich { position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 3px 3px 0; }
.fm-knopf { align-self: flex-start; color: #fff; font-weight: 700; font-size: .85rem; padding: 6px 14px; border-radius: 8px; }
.fm-link { align-self: flex-start; font-weight: 600; font-size: .8rem; padding: 4px 10px; border-radius: 6px; text-decoration: underline; }
.farbname { display: block; padding: 8px 12px; font-weight: 700; border-top: 1px solid var(--rand-zart); }
.farbkarte:has(input:checked) .farbname::before { content: "✓ "; color: var(--haupt); }

/* 2.22 Melde-Link-Kasten in der Abwicklung */
.melde-link-kasten { background: var(--haupt-zart); border: 1px solid var(--haupt-rand); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: .92rem; }
.melde-link-kasten .knopfreihe { margin-top: 8px; flex-wrap: nowrap; }
.melde-link-kasten input { flex: 1; min-width: 0; font-size: .82rem; padding: 6px 8px; border: 1px solid var(--rand); border-radius: 8px; }

/* 2.22 Filter am Handy als Seitenbereich: Wisch von links nach rechts öffnet, von rechts nach links schließt (Filter bleiben stehen) */
.such-griff, .such-schleier, .such-knopf-handy, .such-zu { display: none; }
@media (max-width: 1099px) {
  .suchspalte { position: fixed !important; top: 0; bottom: 0; left: 0; z-index: 70; width: min(88vw, 380px); max-height: none !important; border-radius: 0 14px 14px 0; border-left: 0;
                transform: translateX(-102%); transition: transform .25s ease; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--schatten-gross); }
  body.such-offen .suchspalte { transform: none; }
  .suchspalte > summary { border-radius: 0 13px 0 0 !important; padding: 14px 16px; }
  .such-zu { display: inline; margin-left: auto; font-weight: 600; font-size: .85rem; opacity: .85; }
  .such-schleier { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(10, 25, 30, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.such-offen .such-schleier { opacity: 1; pointer-events: auto; }
  body.such-zieht .such-schleier { pointer-events: auto; }
  body.such-offen { overflow: hidden; }
  .such-griff { display: flex; flex-direction: column; align-items: center; gap: 4px; position: fixed; left: 0; top: 42%; z-index: 30; padding: 12px 6px 12px 4px; border: 0;
                border-radius: 0 12px 12px 0; background: var(--haupt); color: #fff; font: inherit; font-size: .72rem; font-weight: 700; box-shadow: var(--schatten-gross); cursor: pointer; }
  .such-griff span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }
  .such-griff b { background: #fff; color: var(--haupt); border-radius: 9px; min-width: 18px; padding: 0 4px; font-size: .72rem; }
  .such-griff .icon { width: 16px; height: 16px; }
  .such-knopf-handy { display: inline-flex; align-items: center; gap: 6px; }
}

/* 2.22 Transportversicherung im Gebot + Dokument-Ansicht */
.vers-zeile { margin: 6px 0 4px; padding: 7px 10px; border-radius: 8px; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vers-zeile.ok { background: var(--gruen-hell); color: #145a35; }
.vers-zeile.bald { background: var(--gelb-hell); color: #6b4e00; }
.vers-zeile.warn { background: var(--rot-hell); color: var(--rot); font-weight: 600; }
.vers-zeile.offen { background: var(--grund); color: var(--leise); }
.vers-knopf { display: inline-block; padding: 3px 10px; border-radius: 14px; border: 1px solid currentColor; text-decoration: none; font-weight: 700; font-size: .82rem; color: inherit; background: #fff; }
.dok-ansicht { display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 140px); }
.dok-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; }
.dok-rahmen { width: 100%; flex: 1; min-height: 70vh; border: 1px solid var(--rand); border-radius: 10px; background: #fff; }
.dok-bild { max-width: 100%; border: 1px solid var(--rand); border-radius: 10px; background: #fff; }
.dok-handy { text-align: center; background: var(--weiss); border: 1px solid var(--rand); border-radius: 12px; padding: 24px 16px; display: flex; flex-direction: column; gap: 10px; }
.dok-symbol { font-size: 3rem; }
.nur-schmal { display: none; }
@media (max-width: 760px) { .nur-breit { display: none; } .nur-schmal { display: flex; } }
.seitenfenster.ansicht { width: min(860px, 100vw); }

/* 2.22 eigene Fahrzeugklassen im Admin */
.eigene-klassen { display: grid; gap: 10px; margin: 0 0 12px; }
.eigene-klasse { display: grid; grid-template-columns: 1.3fr 1.2fr .8fr 1.6fr auto; gap: 10px; align-items: end; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--weiss); }
.eigene-klasse.neu { border-style: dashed; background: var(--haupt-zart); }
.eigene-klasse label { font-size: .84rem; font-weight: 600; margin: 0; }
.eigene-klasse label input:not([type=checkbox]) { display: block; width: 100%; margin-top: 3px; }
.eigene-haken { display: flex; flex-direction: column; gap: 2px; font-size: .84rem; }
.eigene-haken .haken { font-weight: 400 !important; }
@media (max-width: 900px) { .eigene-klasse { grid-template-columns: 1fr 1fr; } .eigene-haken, .eigene-klasse > button { grid-column: 1 / -1; } }
/* 2.22 Firma an der Lade-/Entladestelle */
.stelle .firma-feld { display: block; margin: 8px 0; font-weight: 600; font-size: .9rem; }
.stelle .firma-feld input { display: block; width: 100%; margin-top: 3px; }
.stopp-zeile > .stopp-firma { grid-column: 1 / -1; }
/* 2.23 Profil: gesperrte Firmendaten */
.gesperrte-daten .schloss { font-size: .8rem; opacity: .7; margin-left: 4px; }
.aenderung-anfragen { margin-top: 10px; } .aenderung-anfragen > summary { cursor: pointer; font-weight: 600; color: var(--haupt); }
.admin-firmendaten { margin: 10px 0; padding: 8px 12px; border: 1px dashed var(--rand); border-radius: 10px; } .admin-firmendaten > summary { cursor: pointer; font-weight: 600; }
/* 2.23 Zahlungsziele je Benutzer */
.ziel-felder { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ziel-felder .feld-einheit { width: 110px; }
.ziel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ziel-chips .chip.leer { text-decoration: none; opacity: .8; }
/* 2.23 AGB-Knopf */
.agb-knopf { display: inline-block; padding: 2px 10px; border-radius: 14px; border: 1px solid var(--haupt-rand); background: var(--haupt-zart); color: var(--haupt-dunkel); text-decoration: none; font-weight: 600; font-size: .85rem; }
/* 2.23 Warnung Zahlungsschwierigkeiten */
.schild.zahlungswarnung { background: var(--rot-hell); color: var(--rot); border: 1px solid #e8b4ae; font-weight: 700; white-space: normal; }
.zahlungswarnung-melden > summary { cursor: pointer; font-weight: 700; color: var(--rot); }
/* 2.24 Schutz gegen Auslesen, Benutzer sperren */
.falle { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
pre.beweis { white-space: pre-wrap; font-size: .8rem; background: var(--grund); border-radius: 8px; padding: 8px 10px; max-height: 220px; overflow: auto; }
.pruef-bewertung.erledigt { opacity: .65; }
tr.gesperrt-zeile td { background: var(--rot-hell); }
.mensch-knopf { white-space: normal !important; width: 100%; line-height: 1.3; height: auto; }
/* 2.25 Schnittstelle */
.api-neu input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .85rem; padding: 6px 8px; border: 1px solid var(--rand); border-radius: 8px; }
.api-neu .knopfreihe { flex-wrap: nowrap; margin-top: 8px; }
.api-form { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rand); }
.api-hilfe pre { background: var(--leiste); color: #e6f1f2; padding: 12px 14px; border-radius: 10px; overflow-x: auto; font-size: .82rem; line-height: 1.45; }
.api-hilfe code { font-size: .88em; }
.api-hilfe table td, .api-hilfe table th { vertical-align: top; }

/* 2.26: Sprachumschalter DE | EN */
.sprach-wahl { display: inline-flex; gap: 2px; margin-left: auto; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.35); }
.sprach-wahl a { padding: 4px 10px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; opacity: .75; }
.sprach-wahl a.an { background: rgba(255,255,255,.22); opacity: 1; }
.sprach-wahl.hell { border-color: var(--haupt-rand, #b7d3d6); }
.sprach-wahl.hell a { color: var(--haupt-dunkel, #0a5f67); }
.sprach-wahl.hell a.an { background: var(--haupt-hell, #e3f3f4); }
.oben.einfach { display: flex; align-items: center; }
.klassen-namen { display: flex; flex-direction: column; gap: 4px; }
.klassen-namen .name-en { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--leise, #667); }
.klassen-namen .name-en span { white-space: nowrap; }
.klassen-namen .name-en input { flex: 1; padding: 4px 8px; font-size: 13px; }

/* ---------- 2.27: Abo und Rechnungen ---------- */
table.tabelle th.rechts, table.tabelle td.rechts { text-align: right; white-space: nowrap; }
table.tabelle tr.summe td { border-top: 2px solid var(--rand); border-bottom: 0; }
.kacheln.drei { grid-template-columns: repeat(3, 1fr); }
.abo-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border: 1.5px solid var(--rand); border-radius: 12px; background: var(--weiss); cursor: pointer; text-align: left; font: inherit; color: var(--text); min-height: 118px; }
.abo-kachel:hover:not(:disabled) { border-color: var(--haupt-rand); background: var(--haupt-zart); }
.abo-kachel.gewaehlt { border-color: var(--haupt); background: var(--haupt-hell); box-shadow: inset 0 0 0 1px var(--haupt); }
.abo-kachel:disabled { cursor: default; }
.abo-kachel .abo-name { font-weight: 700; color: var(--haupt-dunkel); }
.abo-kachel .abo-preis { font-size: 1.45rem; color: var(--text); margin-top: 4px; }
.abo-kachel span { font-size: .84rem; }
.mandat-text { background: var(--haupt-zart); border: 1px solid var(--haupt-rand); border-radius: 8px; padding: 10px 12px; font-size: .85rem; margin: 6px 0 12px; }
.mandat-form > summary, .klein-details > summary { cursor: pointer; font-weight: 600; color: var(--haupt); margin: 6px 0; }
.rechnung-mail { margin-top: 14px; border-top: 1px solid var(--rand-zart); padding-top: 12px; }
.abo-vorbereiten { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.abo-vorbereiten h2 { margin-bottom: 4px; }
.schritte-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; font-size: .86rem; }
.schritte-leiste .schritt { background: var(--weiss); border: 1px solid var(--rand); border-radius: 18px; padding: 4px 12px 4px 4px; display: inline-flex; gap: 6px; align-items: center; }
.schritte-leiste .schritt b { background: var(--haupt); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }
.schritte-leiste .pfeil { color: var(--leise); }
.filter-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.filter-knoepfe .zahl-klein { opacity: .75; font-weight: 400; margin-left: 2px; }
.filter-knoepfe .such-klein { margin-left: auto; display: flex; gap: 6px; }
.filter-knoepfe .such-klein input { width: 180px; }
.pos-editor { display: grid; gap: 6px; margin: 0 0 12px; }
.pos-kopf, .pos-zeile { display: grid; grid-template-columns: 1fr 80px 110px 130px; gap: 8px; }
.pos-kopf { font-size: .8rem; font-weight: 700; color: var(--leise); }
.pos-zeile textarea { min-height: 42px; }
tr.gesperrt-zeile td { opacity: .55; }
.link-feld { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }
.konto-zeile { align-items: end; }
.konto-zeile > span { align-self: center; font-size: .9rem; }
.preis-tabelle input { width: 100px; }
input.kurz { width: 64px; }
.frei-form { display: flex; gap: 4px; }
.frei-form input { width: 140px; }
details.lauf { border-top: 1px solid var(--rand-zart); padding: 8px 0; }
details.lauf > summary { cursor: pointer; }
@media (max-width: 760px) {
  .kacheln.drei { grid-template-columns: 1fr; }
  .abo-kachel { min-height: 0; }
  .pos-kopf { display: none; }
  .pos-zeile { grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--rand-zart); padding-bottom: 8px; }
  .pos-zeile textarea { grid-column: 1 / -1; }
  .filter-knoepfe .such-klein { margin-left: 0; width: 100%; }
  .filter-knoepfe .such-klein input { flex: 1; width: auto; }
}
.monat-waehler { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.monat-waehler strong { min-width: 140px; text-align: center; }
.konto-nr { font-variant-numeric: tabular-nums; font-weight: 600; }
table.journal td { vertical-align: top; }
.kacheln.ausgabe-arten { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kacheln.steuer-wahl { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.beleg-feld { border: 2px dashed var(--haupt-rand); border-radius: 10px; padding: 14px; background: var(--haupt-zart); }
.jahr-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--rand-zart); }
.ust-tabelle td:first-child { width: 60%; }
.ampel-karte { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ampel-karte > div { flex: 1; min-width: 240px; }
.ampel-punkt { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.5); }
.ampel-gruen .ampel-punkt { background: var(--gruen); } .ampel-gelb .ampel-punkt { background: #d9a300; } .ampel-rot .ampel-punkt { background: var(--rot); }
code.kennwort { font-size: 1.05rem; padding: 4px 8px; background: var(--haupt-zart); border-radius: 6px; user-select: all; }
.umsatz { border-top: 1px solid var(--rand-zart); padding: 12px 0; display: grid; gap: 8px; }
.umsatz-kopf { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.umsatz-kopf .leise { flex-basis: 100%; }
.zahl-gross { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 110px; }
.klein-kacheln { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
.klein-kacheln .kachel-wahl { padding: 6px 9px; }
/* 2.30: Live-Standort des Fahrers */
.live-ortung { margin: 14px 0 18px; }
.live-ortung h3 { margin: 0 0 6px; }
.live-karte { height: 320px; }
.live-karte.gross { height: 420px; }
.ortung-pin span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); font-size: 17px; line-height: 1; }
.ortung-kurz { color: var(--haupt); font-weight: 600; text-decoration: none; }

/* 2.33: Preisvorschlag für Bieter */
.preis-rechner { border: 1px solid var(--haupt-rand); background: var(--haupt-zart); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.pr-kopf { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; }
.pr-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pr-kachel { background: var(--weiss); border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.pr-kachel > span { font-size: .85rem; color: var(--leise); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pr-kachel strong { font-size: 1.5rem; color: var(--haupt-dunkel); font-variant-numeric: tabular-nums; line-height: 1.2; }
.pr-kachel small { color: var(--leise); font-size: .82rem; }
.pr-kachel .knopf { margin-top: 6px; }
.pr-kachel.aus strong { color: var(--leise); }
.pr-details { margin-top: 10px; }
.pr-details summary { cursor: pointer; color: var(--haupt); font-weight: 600; font-size: .9rem; }
.pr-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0 6px; }
.pr-felder label { margin: 0; font-size: .84rem; }
.pr-rechnung { margin: 6px 0; padding-left: 18px; font-size: .88rem; font-variant-numeric: tabular-nums; }

/* 2.33: Kostensätze (Admin und Profil) */
.kosten-tabelle { display: grid; gap: 6px; margin: 10px 0 12px; }
.kosten-kopf, .kosten-zeile { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(90px, 1fr)); gap: 8px; align-items: center; }
.kosten-kopf { font-size: .82rem; color: var(--leise); font-weight: 600; }
.kosten-zeile label { margin: 0; }
.kosten-zeile input::placeholder { color: #9aa7a9; }
@media (max-width: 720px) {
  .kosten-kopf { display: none; }
  .kosten-zeile { grid-template-columns: 1fr 1fr 1fr; padding: 8px; background: var(--grund); border-radius: 8px; }
  .kosten-zeile strong { grid-column: 1 / -1; }
}
.pr-felder label { min-width: 0; }
.pr-felder input { width: 100%; min-width: 0; box-sizing: border-box; }
.kosten-zeile input { width: 100%; min-width: 0; }

/* 2.34: Auftrag am PC bestätigen + eigene Fahrzeuge als Knöpfe */
.bestaetigen-kasten { border: 1px solid var(--haupt-rand); border-radius: 14px; padding: 14px 16px; margin: 12px 0; background: #fff; }
.bestaetigen-kasten.offen { border: 2px solid #e08a00; background: #fff8ec; }
.bestaetigen-kasten h3 { margin: 0 0 4px; }
.bestaetigen-kasten .reihe3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.bestaetigen-kasten .reihe3 label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.bestaetigen-kasten input.gross { text-transform: uppercase; font-weight: 700; }
@media (max-width: 700px) { .bestaetigen-kasten .reihe3 { grid-template-columns: 1fr; } }
.fz-wahl { margin: 8px 0; }
.fz-titel { display: block; font-size: .85rem; color: #5b6b70; margin-bottom: 6px; }
.fz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.fz-knopf { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; min-width: 150px; padding: 8px 12px; border: 1px solid var(--haupt-rand); border-radius: 12px; background: var(--haupt-zart); color: inherit; font: inherit; cursor: pointer; }
.fz-knopf strong { font-size: .98rem; }
.fz-knopf small { font-size: .78rem; color: #5b6b70; }
.fz-knopf:hover { border-color: var(--haupt); }
.fz-knopf.an { border: 2px solid var(--haupt); background: var(--haupt-hell); box-shadow: 0 0 0 2px var(--haupt-hell); }
.fz-knopf.fz-anders { background: #fff; border-style: dashed; }
.fz-zeile .fz-aendern { display: inline-block; }
.fz-zeile .fz-aendern[open] { display: block; margin: 8px 0; }
.fz-zeile .fz-aendern summary { list-style: none; display: inline-block; }
.fz-zeile .fz-aendern summary::-webkit-details-marker { display: none; }

/* 2.35: Börse in der eigenen App – Leiste unten wie in einer App, Fuß ausgeblendet */
.app-leiste { display: none; }
body.in-app .app-leiste { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid #dde5e7; padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(17,45,51,.06); }
body.in-app .app-leiste a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; color: #5b6b70; text-decoration: none; font-size: .72rem; font-weight: 600; }
body.in-app .app-leiste a svg { width: 24px; height: 24px; }
body.in-app .app-leiste a.aktiv { color: var(--haupt); }
body.in-app .app-leiste a .zahl { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: #e05a00; color: #fff; font-size: .68rem; line-height: 18px; text-align: center; padding: 0 4px; }
body.in-app .haupt { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
body.in-app .leiste { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }   /* 2.69: Menü-Ende nicht hinter der App-Leiste (Sascha 04.11. mit Bild: „Update einspielen“ abgeschnitten) */
body.in-app .fuss { display: none; }
body.in-app .oben { padding-top: env(safe-area-inset-top); }
@media (min-width: 900px) { body.in-app .app-leiste { display: none; } body.in-app .haupt { padding-bottom: 0; } body.in-app .leiste { padding-bottom: 0; } body.in-app .fuss { display: block; } }
.haken-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.haken-zeile input { width: auto; }
.geraete { margin-top: 18px; }
.knopf.app-fahrer-knopf { white-space: normal; display: block; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; }
.melde-link-kasten .knopfreihe { flex-wrap: wrap; }
.melde-link-kasten .knopfreihe input { min-width: 0; flex: 1 1 160px; }

/* 2.36: Reiter der Fracht-Seite – am Handy Kacheln mit Bild (kein seitliches Wischen), am PC und im Seitenfenster wie bisher */
.kachel-reiter .r-sym, .kachel-reiter .r-kurz, .kachel-reiter .r-zahl { display: none; }
@media (max-width: 760px) {
  body:not(.im-panel) .kachel-reiter { position: static; display: grid !important; grid-template-columns: repeat(var(--r-spalten, 4), minmax(0, 1fr)); gap: 6px; overflow: visible; border: 0; margin: 0 0 14px; background: none; }
  body:not(.im-panel) .kachel-reiter a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; padding: 8px 2px !important; margin: 0; border: 1px solid var(--rand); border-radius: 12px; background: #fff; color: var(--text); font-size: .74rem; line-height: 1.15; text-align: center; white-space: normal !important; }
  body:not(.im-panel) .kachel-reiter .r-sym { display: block; font-size: 1.35rem; line-height: 1; }
  body:not(.im-panel) .kachel-reiter .r-kurz { display: block; overflow-wrap: anywhere; }
  body:not(.im-panel) .kachel-reiter .r-lang { display: none; }
  body:not(.im-panel) .kachel-reiter .r-zahl { display: block; position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: #e05a00; color: #fff; font-size: .68rem; line-height: 18px; padding: 0 4px; }
  body:not(.im-panel) .kachel-reiter a.aktiv { background: var(--haupt); border-color: var(--haupt); color: #fff; }
  body:not(.im-panel) .kachel-reiter a:active { transform: translateY(1px); }
}
@media (max-width: 760px) {
  body:not(.im-panel) .kachel-reiter .r-kurz { overflow-wrap: normal; word-break: keep-all; }
  body:not(.im-panel) .kachel-reiter[style*="spalten: 5"] a { font-size: .66rem; padding-left: 1px !important; padding-right: 1px !important; }
  body:not(.im-panel) .kachel-reiter[style*="spalten: 5"] .r-sym { font-size: 1.25rem; }
}
/* 2.37: Kacheln für alle Reiter; Zahl-Punkt bei Zählern ruhig grau statt orange; gespeicherte Suchen umbrechen statt wischen */
.kachel-reiter .r-zahl-ruhig { background: #5b6b70 !important; }
@media (max-width: 760px) {
  body:not(.im-panel) .kachel-reiter a.aktiv .r-zahl-ruhig { background: rgba(255,255,255,.3) !important; }
  body:not(.im-panel) .reiter-filter { flex-wrap: wrap !important; overflow: visible; gap: 6px; border: 0; }
  body:not(.im-panel) .reiter-filter > a, body:not(.im-panel) .reiter-filter > span { border: 1px solid var(--rand); border-radius: 999px; background: #fff; padding: 6px 12px !important; margin: 0; }
  body:not(.im-panel) .reiter-filter > .aktiv, body:not(.im-panel) .reiter-filter > a.aktiv { background: var(--haupt); color: #fff; border-color: var(--haupt); }
  body:not(.im-panel) .reiter-filter .reiter-mit-x a { color: inherit; padding: 0 !important; }
  body:not(.im-panel) .seiten-werkzeug .kachel-reiter { width: 100%; }
}
/* 2.37: neue Nachricht kurz hervorheben; in der App „nach unten ziehen zum Aktualisieren“ */
.nachricht.neu-da { box-shadow: 0 0 0 3px var(--haupt-hell); transition: box-shadow .6s; }
.zieh-anzeige { position: fixed; top: -46px; left: 50%; transform: translateX(-50%); z-index: 100; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.2); display: grid; place-items: center; color: var(--leise); font-size: 1.3rem; font-weight: 700; pointer-events: none; }
.zieh-anzeige.bereit { color: var(--haupt); }
.zieh-anzeige.laedt span { display: inline-block; animation: zieh-dreh .8s linear infinite; }
@keyframes zieh-dreh { to { transform: rotate(360deg); } }

/* 2.38: Frachtvergleich */
.vergleich-knopf { border: 1px solid var(--rand); background: #fff; color: var(--leise); border-radius: 10px; width: 34px; height: 34px; font-size: 1.05rem; cursor: pointer; margin-top: 6px; }
.vergleich-knopf.mit-text { width: auto; height: auto; padding: 6px 12px; font-size: .9rem; margin: 0; }
.vergleich-knopf.an { background: var(--haupt); border-color: var(--haupt); color: #fff; }
.vergleich-knopf.wackeln { animation: wackeln .5s; }
@keyframes wackeln { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.vergleich-zeile { margin: 0 0 10px; }
.vergleich-leiste { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 70; display: flex; align-items: center; gap: 4px; background: var(--leiste, #112d33); color: #fff; border-radius: 999px; padding: 4px 4px 4px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: calc(100vw - 24px); }
.vergleich-leiste .vl-los { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .95rem; }
.vergleich-leiste .vl-los span { opacity: .75; }
.vergleich-leiste .vl-los b { background: var(--akzent, #3fc1c9); color: #062a2e; border-radius: 999px; padding: 8px 14px; }
.vergleich-leiste .vl-weg { background: none; border: 0; color: #fff; opacity: .7; font-size: 1.1rem; padding: 8px 10px; cursor: pointer; }
.vergleich-leiste.voll { animation: wackeln .5s; }
body.in-app .vergleich-leiste { bottom: calc(76px + env(safe-area-inset-bottom)); }
/* 2.46: Vergleichs-Leiste mittig über dem Inhalt (nicht über dem Menü) und über der Fensterleiste des Admins; Platz unten, damit nichts verdeckt wird */
@media (min-width: 1000px) { .vergleich-leiste { left: calc(50% + var(--leiste-breite) / 2); } }
body.fenster-an .vergleich-leiste { bottom: 58px; }
body.mit-vergleich .haupt { padding-bottom: 72px; }
body.mit-vergleich.fenster-an .haupt { padding-bottom: 112px; }
@media (max-width: 760px) { body.fenster-an .vergleich-leiste { bottom: 18px; } body.mit-vergleich.fenster-an .haupt { padding-bottom: 72px; } }
@media (max-width: 899px) { body.in-app.mit-vergleich .haupt { padding-bottom: calc(132px + env(safe-area-inset-bottom)); } }
.vergleich-start h2 { margin-top: 0; }
.start-knoepfe { flex-wrap: wrap; gap: 8px; }
.start-knopf { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--rand); border-radius: 12px; background: #fff; color: var(--text); text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; }
.start-knopf span { font-size: 1.15rem; }
.start-knopf.an { background: var(--haupt); border-color: var(--haupt); color: #fff; }
.start-knopf.laedt { opacity: .6; }
.start-plz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 6px; }
.start-plz label { color: var(--leise); }
.start-plz .plz-feld { width: 110px; }
.start-plz select { width: auto; }
.vergleich-raster { display: grid; grid-template-columns: repeat(var(--v-spalten, 3), minmax(0, 1fr)); gap: 14px; align-items: start; margin: 14px 0; }
.vergleich-karte { position: relative; margin: 0; border: 2px solid transparent; }
.vergleich-karte.beste { border-color: var(--gruen, #23955a); }
.beste-schild { position: absolute; top: -13px; left: 14px; background: var(--gruen, #23955a); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: .82rem; font-weight: 700; }
.v-strecke > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 3px 0; }
.v-strecke small { color: var(--leise); }
.pf-hoch, .pf-runter { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: .62rem; background: var(--haupt); }
.pf-runter { background: #d9730d; }
.v-gewinn { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--haupt-zart); display: flex; flex-direction: column; gap: 2px; }
.v-gewinn small { color: var(--leise); font-weight: 600; }
.v-gewinn strong { font-size: 1.6rem; line-height: 1.1; }
.v-gewinn.plus { background: #e3f4ea; } .v-gewinn.plus strong { color: #145a35; }
.v-gewinn.minus { background: #fbe7e5; } .v-gewinn.minus strong { color: #b42e22; }
.v-gewinn.leer strong { font-size: 1.1rem; }
.v-werte { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 12px; font-size: .92rem; }
.v-werte dt { color: var(--leise); } .v-werte dd { margin: 0; text-align: right; }
.v-knoepfe { display: grid; gap: 8px; }
@media (max-width: 900px) { .vergleich-raster { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 520px) {
  .vergleich-leiste { padding-left: 12px; left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .vergleich-leiste .vl-los { font-size: .85rem; gap: 6px; min-width: 0; }
  .vergleich-leiste .vl-los b { padding: 7px 11px; }
  .vergleich-leiste .vl-weg { padding: 6px 8px; flex: none; }
}
/* 2.39: Bankdaten des Kunden */
.bank-ampel { font-size: 1.05rem; cursor: help; }
.bank-kasten { border-radius: 12px; padding: 10px 14px; margin: 10px 0; background: var(--haupt-zart); border: 1px solid var(--rand); }
.bank-kasten.b-warn { background: #fff8ec; border-color: #e8b15a; } .bank-kasten.b-fehler { background: #fbe7e5; border-color: #e2a39c; } .bank-kasten.b-ok { background: #e3f4ea; border-color: #a9d8bb; }
.bank-pruefung { list-style: none; margin: 6px 0 0; padding: 0; }
.bank-pruefung li { display: flex; gap: 8px; padding: 3px 0; }
.bank-ok { font-weight: 600; }
/* 2.39: Gültigkeit der Gebote, Zahl der Gebote */
.gueltig-feld { border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px 12px; margin: 10px 0; }
.gueltig-feld legend { font-weight: 600; padding: 0 6px; }
.gueltig-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wahl-mini { border: 1px solid var(--rand); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--text); }
.wahl-mini.an { background: var(--haupt); color: #fff; border-color: var(--haupt); }
.wahl-mini.leer { color: var(--leise); }
.gueltig-feld input[type=datetime-local] { max-width: 260px; }
.gueltig-feld small { display: block; margin-top: 6px; }
.gueltig-schild { display: inline-block; background: #fff4e0; color: #8a4a08; border-radius: 999px; padding: 2px 10px; font-size: .82rem; font-weight: 600; }
.gueltig-schild.vorbei { background: #eef1f2; color: var(--leise); }
.angebot-zahl.schild { background: var(--haupt-zart); color: var(--haupt-dunkel); }
.angebot-zeilen { display: flex !important; flex-direction: column; gap: 1px; margin-top: 3px; color: var(--text); }
.angebot-zeilen b { font-weight: 700; }
.frachttabelle td .angebot-zeilen, .frachttabelle td .angebot-zeilen b { color: var(--text) !important; }
/* 2.40: Admin, Buchhaltung, Rechnungen – Kacheln mit Bild auch am PC (Sascha „Version B“) */
@media (min-width: 761px) {
  .kachel-reiter.pc-kacheln { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; border: 0; margin: 0 0 16px; }
  .kachel-reiter.pc-kacheln a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 70px; padding: 10px 4px !important; margin: 0; border: 1px solid var(--rand); border-radius: 12px; background: #fff; color: var(--text); font-size: .8rem; line-height: 1.15; text-align: center; white-space: normal; }
  .kachel-reiter.pc-kacheln a:hover { border-color: var(--haupt); }
  .kachel-reiter.pc-kacheln .r-sym { display: block; font-size: 1.45rem; line-height: 1; }
  .kachel-reiter.pc-kacheln .r-kurz { display: block; }
  .kachel-reiter.pc-kacheln .r-lang { display: none; }
  .kachel-reiter.pc-kacheln .r-zahl { display: block; position: absolute; top: 5px; right: 7px; min-width: 18px; height: 18px; border-radius: 9px; background: #e05a00; color: #fff; font-size: .68rem; line-height: 18px; padding: 0 4px; }
  .kachel-reiter.pc-kacheln .r-zahl-ruhig { background: #5b6b70 !important; }
  .kachel-reiter.pc-kacheln a.aktiv { background: var(--haupt); border-color: var(--haupt); color: #fff; }
}
@media (min-width: 761px) {
  .kachel-reiter.pc-kacheln { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
  .kachel-reiter.pc-kacheln a { font-size: .76rem; padding: 9px 2px !important; min-height: 66px; }
  .kachel-reiter.pc-kacheln .r-sym { font-size: 1.35rem; }
}
/* 2.41 USt-IdNr.-Kontrolle */
.ustid-liste { display: grid; gap: 8px; }
.ustid-zeile { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 12px; background: var(--weiss); }
.ustid-zeile.ustid-g-abweichung { border-color: #e8b15a; background: #fffaf1; } .ustid-zeile.ustid-g-ungueltig, .ustid-zeile.ustid-g-ohne_nummer { border-color: #e2a39c; background: #fdf3f2; }
.ustid-ampel { font-size: 1.4rem; line-height: 1.2; text-align: center; }
.ustid-mitte code { font-size: .92rem; }
.ustid-felder { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.uf { font-size: .76rem; padding: 1px 8px; border-radius: 10px; background: #eceff0; color: #46504a; }
.uf-ok { background: var(--gruen-hell); color: var(--gruen-dunkel); } .uf-falsch { background: var(--rot-hell); color: var(--rot); font-weight: 700; }
.ustid-aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 360px; }
.ustid-anschreiben > summary { list-style: none; } .ustid-anschreiben > summary::-webkit-details-marker { display: none; }
.ustid-anschreiben[open] { flex-basis: 100%; }
.ustid-mail-vorschau { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--grund); text-align: left; }
.ustid-mail-vorschau pre { white-space: pre-wrap; font: .85rem/1.45 inherit; font-family: inherit; margin: 0 0 8px; }
.ustid-gruppen .chip { text-decoration: none; } .ustid-gruppen .chip.an { background: var(--haupt); color: #fff; border-color: var(--haupt); }
.ustid-lauf { flex: 1; min-width: 260px; display: grid; gap: 4px; }
.ustid-lauf .balken { height: 10px; border-radius: 6px; background: var(--grund); overflow: hidden; } .ustid-lauf .balken span { display: block; height: 100%; background: var(--haupt); transition: width .4s; }
.ustid-antwort { border-top: 1px solid var(--rand); padding-top: 10px; margin-top: 10px; }
.ustid-vergleich tr.geaendert td { background: #fff8ec; }
.ustid-seite .formular .markiert { border: 2px solid var(--rot); background: #fff8f6; }
.ustid-seite .hinweis-rot { color: var(--rot); font-size: .82rem; }
@media (max-width: 760px) { .ustid-zeile { grid-template-columns: 30px 1fr; } .ustid-aktionen { grid-column: 1 / -1; justify-content: flex-start; max-width: none; } }
.ustid-aktionen:has(details[open]) { grid-column: 1 / -1; max-width: none; justify-content: flex-start; }
.ustid-mail-vorschau { max-width: 760px; }
/* 2.42 Fensterbetrieb im Admin (schwebende Fenster, nur PC) */
html.im-fenster .leiste, html.im-fenster .leiste-schatten, html.im-fenster .oben, html.im-fenster .admin-ticker, html.im-fenster .fuss, html.im-fenster #fensterleiste { display: none !important; }
html.im-fenster .haupt { margin-left: 0; min-height: 0; }
html.im-fenster .inhalt { padding-top: 12px; }
html.im-fenster .inhalt > h1 { font-size: 1.3rem; margin-top: 0; }
.tm-fenster .fenster-rahmen { width: 100%; height: 100%; border: 0; display: block; background: var(--grund); }
.tm-fenster .tm-fenster-kopf button { opacity: .9; } .tm-fenster .tm-fenster-kopf button:hover { opacity: 1; }
.fensterleiste { position: fixed; left: var(--leiste-breite); right: 0; bottom: 0; z-index: 1500; display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--leiste); color: var(--leiste-text); box-shadow: 0 -2px 8px rgba(0,0,0,.18); font-size: .84rem; }
.fensterleiste button { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; border-radius: 8px; padding: 5px 10px; font: inherit; cursor: pointer; white-space: nowrap; }
.fensterleiste button:hover { background: rgba(255,255,255,.18); }
.fensterleiste .fl-knoepfe { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.fensterleiste .fl-fenster { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
.fensterleiste .fl-fenster .fl-titel { overflow: hidden; text-overflow: ellipsis; }
.fensterleiste .fl-fenster .fl-nr { font-size: .7rem; opacity: .7; }
.fensterleiste .fl-fenster.vorn { background: var(--haupt); border-color: var(--haupt); color: #fff; font-weight: 700; }
.fensterleiste .fl-fenster.klein { opacity: .7; font-style: italic; }
.fensterleiste .fl-zahl { opacity: .75; white-space: nowrap; }
.fensterleiste .fl-hinweis { background: #fff3cd; color: #6b4b00; border-radius: 8px; padding: 4px 10px; }
.fensterleiste.aus { left: auto; right: 12px; bottom: 12px; background: transparent; box-shadow: none; padding: 0; }
.fensterleiste.aus button { background: var(--leiste); }
body.fenster-an .haupt { padding-bottom: 44px; }
@media (max-width: 760px) { .fensterleiste { display: none; } body.fenster-an .haupt { padding-bottom: 0; } }
html.im-fenster .nicht-im-fenster { display: none !important; }
/* 2.42b: roter Punkt (ungespeicherte Eingaben), gelöstes Fenster, Entwurf, Nachfrage beim Schließen */
.tm-fenster.geaendert .tm-fenster-titel::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 2px #fff; margin-right: 8px; vertical-align: 1px; }
.fensterleiste .fl-punkt { width: 9px; height: 9px; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 2px rgba(255,255,255,.85); flex: 0 0 9px; }
.fensterleiste .fl-fenster.geloest { border-style: dashed; }
.fensterleiste .fl-fenster.geloest .fl-nr { font-size: .9rem; opacity: 1; }
.entwurf-balken { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff3c4; color: #5a4500; border: 1px solid #e6c200; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; font-size: .9rem; }
.entwurf-balken button { font: inherit; font-size: .85rem; padding: 4px 10px; border: 1px solid #b08a00; border-radius: 6px; background: #fff; color: #5a4500; cursor: pointer; }
.entwurf-balken [data-entwurf-zu] { border: 0; background: transparent; font-size: 1.1rem; }
.fenster-frage-schleier { position: fixed; inset: 0; z-index: 2000; background: rgba(10,20,25,.35); display: flex; align-items: center; justify-content: center; }
.fenster-frage { background: #fff; border-radius: 14px; padding: 18px 20px; max-width: 440px; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.fenster-frage p { margin: 0 0 14px; font-size: 1rem; }
.knopf.rot { background: var(--rot); border-color: var(--rot); color: #fff; }
/* 2.44 Status als Zeitleiste (Fracht-Seite → Abwicklung) */
.status-zeitleiste { list-style: none; margin: 4px 0 16px; padding: 0; }
.status-zeitleiste .zl-tag { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise, #5b6669); margin: 12px 0 6px; }
.status-zeitleiste .zl-tag:first-child { margin-top: 0; }
.status-zeitleiste .zl-eintrag { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 0 0 12px; }
.status-zeitleiste .zl-eintrag::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; height: auto; border: 0; border-radius: 0; background: var(--rand); }
.status-zeitleiste .zl-eintrag:last-child::before, .status-zeitleiste .zl-eintrag:has(+ .zl-tag)::before { display: none; }
.status-zeitleiste .zl-symbol { width: 36px; height: 36px; border-radius: 50%; background: var(--grund); border: 1px solid var(--rand); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; z-index: 1; }
.status-zeitleiste .zl-inhalt { background: var(--weiss); border: 1px solid var(--rand); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.status-zeitleiste .zl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.status-zeitleiste .zl-kopf time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-leise, #5b6669); font-size: .9rem; }
.status-zeitleiste .zl-text { margin-top: 3px; }
.status-zeitleiste .zl-von { margin-top: 3px; font-size: .8rem; color: var(--text-leise, #5b6669); }
.status-zeitleiste .zl-neu .zl-inhalt { border-color: var(--haupt); box-shadow: 0 0 0 2px var(--haupt-hell, #d7eff1); }
.status-zeitleiste .zl-neu .zl-symbol { background: var(--haupt); border-color: var(--haupt); }
.status-zeitleiste .zl-zugestellt .zl-symbol { background: var(--gruen-hell, #e3f4ea); border-color: #a9d8bb; }
.status-zeitleiste .zl-zugestellt.zl-neu .zl-inhalt { border-color: #4caf50; box-shadow: 0 0 0 2px var(--gruen-hell, #e3f4ea); }
.status-zeitleiste .zl-problem .zl-symbol, .status-zeitleiste .zl-problem .zl-inhalt { border-color: #e2a39c; } .status-zeitleiste .zl-problem .zl-inhalt { background: #fdf3f2; }
.status-zeitleiste .zl-verzoegerung .zl-inhalt { border-color: #e8b15a; background: #fffaf1; }
.status-zeitleiste .zl-ortung_an .zl-inhalt, .status-zeitleiste .zl-ortung_aus .zl-inhalt { background: var(--grund); }
/* 2.45 Angaben kompakt untereinander („Bezeichnung  Wert“) */
.daten-zeilen { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1px 12px; margin: 6px 0 0; font-size: .88rem; line-height: 1.35; }
.daten-zeilen dt { color: var(--text-leise, #5b6669); white-space: nowrap; }
.daten-zeilen dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ablauf-karte { padding: 12px 14px; }
.ablauf-aktionen .vorlage-auf { display: contents; }
.ablauf-aktionen .vorlage-auf > summary { list-style: none; } .ablauf-aktionen .vorlage-auf > summary::-webkit-details-marker { display: none; }
.ablauf-aktionen .vorlage-auf[open] > form { flex-basis: 100%; }
/* 2.45 Aufträge → Bewertungen */
.bew-filter .chip, .rolle-chips .chip { text-decoration: none; } .bew-filter .chip.an, .rolle-chips .chip.an { background: var(--haupt); color: #fff; border-color: var(--haupt); }
.bew-werkzeug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.bew-werkzeug .rolle-chips { margin: 0; } .bew-werkzeug .bew-sort select { min-width: 200px; } .bew-werkzeug > input[name=suche] { flex: 1 1 180px; min-width: 0; }
.bew-liste { display: grid; gap: 8px; }
.bew-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; background: var(--weiss); border: 1px solid var(--rand); border-left: 4px solid var(--rand); border-radius: 12px; padding: 10px 14px; }
.bew-karte.bew-offen { border-left-color: #e8a33d; } .bew-karte.bew-bewertet { border-left-color: #4caf50; } .bew-karte.bew-unterwegs { border-left-color: var(--haupt); }
.bew-kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.bew-kopf .strecke { font-size: 1rem; }
.bew-daten { margin: 0; }
.bew-aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: flex-start; max-width: 320px; }
.bew-aktionen .bew-negativ > summary { list-style: none; } .bew-aktionen .bew-negativ > summary::-webkit-details-marker { display: none; }
.bew-aktionen .bew-negativ[open] { flex-basis: 100%; }
.bew-aktionen:has(.bew-negativ[open]) { max-width: none; grid-column: 1 / -1; justify-content: flex-start; }
@media (max-width: 760px) { .bew-karte { grid-template-columns: 1fr; } .bew-aktionen { justify-content: flex-start; max-width: none; } .bew-werkzeug .bew-sort, .bew-werkzeug .bew-sort select { flex: 1 1 100%; width: 100%; } }
/* 2.46: Melden – Grund als Knöpfe, Melden-Knopf an Nachrichten, entfernte Nachricht, Spanien-Hinweis */
.melden-was { margin: 0 0 10px; font-size: 1.05rem; }
.melden-zitat { margin: 0 0 14px; padding: 10px 12px; background: var(--grau-hell, #f3f5f6); border-left: 4px solid var(--rand, #d5dcdf); border-radius: 6px; white-space: normal; }
.melde-gruende { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.melde-gruende legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.melde-grund { display: block; margin: 0; cursor: pointer; }
.melde-grund input { position: absolute; opacity: 0; pointer-events: none; }
.melde-grund span { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--rand, #d5dcdf); border-radius: 10px; background: #fff; font-weight: 500; }
.melde-grund span b { font-size: 1.2rem; width: 1.6em; text-align: center; }
.melde-grund input:checked + span { border-color: var(--rot, #c62828); background: var(--rot-hell, #fdecea); box-shadow: 0 0 0 1px var(--rot, #c62828) inset; }
.melde-grund input:focus-visible + span { outline: 2px solid var(--haupt); outline-offset: 2px; }
.melden-knopf { white-space: nowrap; }
.nachricht .nachricht-melden { margin-left: 8px; color: var(--leise); text-decoration: none; font-size: .85rem; opacity: .7; }
.nachricht .nachricht-melden:hover { color: var(--rot, #c62828); opacity: 1; }
.nachricht.entfernt > div { color: var(--leise); }
.melden-fuss { margin: 6px 0 0; text-align: right; }
.melden-fuss .melden-knopf { color: var(--leise); font-size: .85rem; text-decoration: none; }
.melden-fuss .melden-knopf:hover { color: var(--rot, #c62828); }
.deca-hinweis { border-left-color: #c60b1e; background: #fff6e0; }
.schild.s-deca { background: #fff1c2; color: #7a4b00; }
.meldung-pruefen .mp-bild { white-space: pre-line; }
.meldung-pruefen .mp-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.meldung-pruefen .mp-knoepfe input[name="antwort"] { flex: 1 1 220px; min-width: 0; }
/* 2.48: Frachtvergleich – Fahrzeug wählen, Kosten neben „Rechnen“; Kosten am Fahrzeug im Profil */
.vergleich-start h2.v-zweite { margin-top: 18px; }
.start-plz .sp-gruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.start-plz .sp-kosten { padding-left: 10px; border-left: 1px solid var(--rand); }
.start-plz .feld-einheit { display: inline-block; width: 118px; }
.start-plz .kosten-feld { width: 100%; padding-right: 56px !important; }
.v-kosten-zeile { margin: 2px 0 8px; }
.v-speichern { margin: 0 0 10px; display: block; }
.fz-kosten { font-size: .9rem; }
.fz-kosten-felder { border: 1px dashed var(--rand); border-radius: 10px; padding: 10px 12px 4px; margin: 6px 0 12px; }
.fz-kosten-felder legend { font-weight: 600; padding: 0 6px; }
@media (max-width: 600px) {
  .start-plz { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .start-plz .sp-gruppe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .start-plz .sp-gruppe > label { grid-column: 1 / -1; margin: 0; }
  .start-plz .sp-gruppe select, .start-plz .plz-feld, .start-plz .feld-einheit { width: 100%; }
  .start-plz .sp-kosten { padding-left: 0; border-left: 0; }
  .start-plz > .knopf { width: 100%; }
  .v-speichern .knopf { white-space: normal; text-align: left; width: 100%; }
}
/* 2.49: Länderhinweise – rotes ❗ zum Antippen (a: Kreis, Sprechblase · b: Schild mit Stichwort, Fenster von unten · c: Balken auf der Fracht) */
.lh-zeichen { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin-left: 4px; }
.lh-knopf { font: inherit; cursor: pointer; border: 0; }
.lh-knopf.lh-a { width: 22px; height: 22px; border-radius: 50%; background: #d32f2f; color: #fff; font-weight: 800; font-size: .85rem; line-height: 22px; padding: 0; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3); }
.lh-knopf.lh-b { background: #fdecea; color: #b71c1c; border: 1.5px solid #d32f2f; border-radius: 999px; padding: 2px 9px 2px 3px; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lh-knopf.lh-b b { background: #d32f2f; color: #fff; width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.lh-knopf:hover { filter: brightness(1.1); }
.lh-zeile { display: block; margin-top: 4px; }
.lh-info { position: absolute; z-index: 2000; background: #fff; color: var(--text); border: 2px solid #d32f2f; border-radius: 12px; padding: 14px 16px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: .9rem; line-height: 1.45; }
.lh-info ul { margin: 8px 0 6px; padding-left: 18px; } .lh-info li { margin-bottom: 6px; }
.lh-info .lh-titel { color: #b71c1c; display: block; padding-right: 28px; }
.lh-info .lh-zu { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--leise); padding: 6px; }
.lh-info.lh-unten { position: fixed; left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; border-width: 2px 0 0; max-height: 70vh; overflow-y: auto; padding: 18px 18px calc(16px + env(safe-area-inset-bottom)); animation: lh-hoch .2s ease-out; }
@media (min-width: 900px) { .lh-info.lh-unten { left: 50%; right: auto; width: 560px; transform: translateX(-50%); bottom: 24px; border-radius: 14px; border-width: 2px; } }
@keyframes lh-hoch { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 900px) { @keyframes lh-hoch { from { opacity: 0; } } }
.lh-balken { margin: 12px 0 0; border: 2px solid #d32f2f; border-radius: 10px; background: #fdecea; }
.lh-balken summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: #b71c1c; list-style: none; display: flex; align-items: center; gap: 8px; }
.lh-balken summary::-webkit-details-marker { display: none; }
.lh-balken summary::after { content: '▾'; margin-left: auto; }
.lh-balken[open] summary::after { content: '▴'; }
.lh-balken summary b { background: #d32f2f; color: #fff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.lh-balken .lh-teil { background: #fff; margin: 0 8px 8px; padding: 10px 14px; border-radius: 8px; font-size: .9rem; }
.lh-balken .lh-teil ul { margin: 6px 0; padding-left: 18px; }
.lh-box { border-left-color: #d32f2f; background: #fdecea; }
.lh-box .lh-titel { color: #b71c1c; } .lh-box ul { margin: 6px 0; padding-left: 18px; }
.lh-balken .lh-teil:only-of-type .lh-titel { display: none; }
/* 2.50: Abo – vier Zahlweisen, Vertragsregeln */
.kacheln.vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .kacheln.vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kacheln.vier { grid-template-columns: 1fr; } }
.abo-regeln { background: var(--grund); border-radius: 8px; padding: 10px 12px; font-size: .9rem; }
.zw-tabelle input[name^="zw_name"] { min-width: 140px; }
/* 2.50: Admin arbeitet als Mitglied */
.admin-als-balken { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; background: #e65100; color: #fff; padding: 9px 14px; border-radius: 10px; margin: 0 0 14px; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.admin-als-balken .knopf { background: #fff; color: #e65100; border-color: #fff; }
.benutzer-admin { border-top: 1px dashed var(--rand); padding-top: 10px; margin-top: 10px; }
.als-knopf { margin: 4px 6px 8px 0; }
/* 2.51: Sendungsverfolgung, UIT/EKAER */
.tracking-form, .amtlich-form { margin-top: 8px; }
.tracking-zeile, .amtlich-zeile { margin: 6px 0; }
.amtlich-form label, .amtlich-zeile { color: #b71c1c; }
.amtlich-zeile strong { color: var(--text); }
/* 2.52: Admin-Knöpfe im Firmenprofil */
.admin-firma-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border-left-color: #e65100; background: #fff3e0; }
.admin-firma-knoepfe .leise { flex-basis: 100%; font-size: .85rem; }
/* 2.52: Mitgliederliste – Aktionen in festen Spalten */
.mg-aktionen { white-space: nowrap; }
.mg-aktionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-width: 460px; align-items: stretch; }
.mg-aktionen > form, .mg-aktionen > a, .mg-aktionen > span { display: block; margin: 0; }
.mg-aktionen .knopf { width: 100%; justify-content: center; white-space: nowrap; }
.mg-aktionen .knopf.mg-an { background: var(--gelb-hell); border-color: #d9a300; color: #6b4b00; }
@media (max-width: 760px) { .mg-aktionen { grid-template-columns: 1fr 1fr; min-width: 0; } }
/* 2.53: Mautrechner */
.maut-mini { display: grid; gap: 8px; }
.maut-mini-zeile { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 6px; align-items: center; }
.maut-mini-zeile select, .maut-mini-zeile input { min-width: 0; width: 100%; }
.maut-mini-zeile .knopf { white-space: nowrap; }
.maut-ort { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.maut-form select[multiple] { height: auto; }
.maut-tab td, .maut-tab th { vertical-align: top; }
.maut-tab tr.summe td { border-top: 2px solid var(--rand); background: var(--grund); }
.maut-ergebnis .landkarte { height: 320px; margin-top: 12px; border-radius: 10px; }
.maut-tabelle td.maut-zelle { min-width: 260px; }
.maut-tabelle .maut-name { width: 150px; }
.maut-tabelle .maut-km, .maut-tabelle .maut-vig, .maut-tabelle .maut-tag { display: none; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.maut-tabelle .maut-km .feld-einheit, .maut-tabelle .maut-vig .feld-einheit, .maut-tabelle .maut-tag .feld-einheit { width: 110px; display: inline-block; }
.maut-tabelle td[data-art="km"] .maut-km, .maut-tabelle td[data-art="vignette"] .maut-vig, .maut-tabelle td[data-art="tag"] .maut-tag { display: flex; }
.maut-tabelle .feld-einheit input { padding-right: 52px !important; }
@media (max-width: 600px) { .maut-mini-zeile { grid-template-columns: 1fr; } .maut-ort { grid-template-columns: 1fr; } }
.maut-tab th, .maut-tab td { white-space: nowrap; }
.maut-tab td:first-child, .maut-tab th:first-child { white-space: normal; min-width: 120px; }
/* 2.54: BWA / EÜR */
.auswertung tr.summe td { border-top: 2px solid var(--rand); background: var(--grund); }
.auswertung tr.ergebnis td { border-top: 3px double var(--text); font-size: 1.05rem; }
.auswertung td.gruen { color: var(--gruen); } .auswertung td.rot { color: var(--rot); }
.euer-tab th { background: var(--grund); }
@media print { .nicht-drucken, .kachel-reiter, .admin-ticker, .fensterleiste, .leiste, .oben, .fuss, #fensterleiste { display: none !important; } .haupt { margin: 0; } .auswertung { box-shadow: none; border: 0; } }
/* 2.55: PLZ + Ort im Mautrechner */
.maut-ort.drei { grid-template-columns: 1fr 90px 1.3fr; position: relative; }
.maut-mini-zeile.vier { grid-template-columns: 70px 1fr 80px 1.2fr; position: relative; }
@media (max-width: 600px) { .maut-ort.drei { grid-template-columns: 1fr 1fr; } .maut-ort.drei select { grid-column: 1 / -1; } .maut-mini-zeile.vier { grid-template-columns: 1fr 1fr; } .maut-mini-zeile.vier .leise { grid-column: 1 / -1; } }
/* 2.55: Mautrechner kompakt */
.maut-eingabe { max-width: 820px; }
.maut-form { display: grid; gap: 8px; }
.maut-zeile { display: grid; grid-template-columns: 80px 170px 100px 1fr; gap: 8px; align-items: center; }
.maut-zeile.ort-zeile { position: relative; }
.maut-titel { color: var(--leise); font-weight: 600; }
.maut-zeile .maut-fahrzeug { grid-column: 2 / 4; }
.maut-zeile .maut-rueck { margin: 0; white-space: nowrap; }
.maut-zeile .maut-umfahren { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.maut-zeile .wahl-knopf.klein span { padding: 4px 10px; font-size: .85rem; }
.maut-zeile > .knopf { grid-column: 2 / 4; }
@media (max-width: 640px) { .maut-zeile { grid-template-columns: 1fr 1fr; } .maut-titel { grid-column: 1 / -1; } .maut-zeile .maut-fahrzeug, .maut-zeile .maut-umfahren, .maut-zeile > .knopf { grid-column: 1 / -1; } .maut-zeile.ort-zeile select { grid-column: 1 / -1; } }
.maut-gruppe { border: 2px solid var(--haupt); border-radius: 12px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 8px; }
.maut-gruppe legend { font-weight: 700; padding: 0 8px; color: var(--haupt); }
.maut-ergebnis { border: 2px solid var(--haupt); }
.maut-ergebnis h2 { border-bottom: 2px solid var(--rand); padding-bottom: 8px; }

/* 2.56: Bereich frisch geholt (Nachrichten-Seite) */
#chat.neu-da .nachricht:last-child, #gespraeche.neu-da .meldung-zeile:first-child { box-shadow: 0 0 0 3px var(--haupt-hell); transition: box-shadow .6s; }

/* 2.57: Schadensaufnahme auf der Fracht-Seite */
.schaden-protokoll { border: 2px solid var(--rand); border-radius: 10px; padding: 10px 14px; margin: 8px 0 12px; background: #fff; }
.schaden-protokoll.mit-schaden { border-color: #e39b1a; background: #fffaf2; }
.schaden-protokoll .sp-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 6px; }
.sp-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.sp-fotos a { display: block; width: 140px; text-decoration: none; }
.sp-fotos img { width: 140px; height: 105px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rand); display: block; }
.sp-fotos span { font-size: .75rem; color: var(--leise); }
.sp-unterschriften { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; }
.sp-unterschriften figure { margin: 0; border: 1px solid var(--rand); border-radius: 8px; padding: 6px; background: #fff; }
.sp-unterschriften img { width: 220px; height: 74px; object-fit: contain; display: block; }
.sp-unterschriften figcaption { font-size: .8rem; color: var(--leise); margin-top: 2px; }
.sp-knoepfe { align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-knoepfe .inline-form { display: inline; }
.schaden-aufnahme { margin: 6px 0 14px; }
.schaden-aufnahme summary { cursor: pointer; font-weight: 600; }
.haken-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.haken-reihe .haken { border: 1px solid var(--rand); border-radius: 20px; padding: 4px 12px; font-size: .9rem; cursor: pointer; }
.haken-reihe .haken:has(input:checked) { border-color: var(--haupt); background: var(--haupt-hell); font-weight: 600; }
.unterschrift-box { margin: 8px 0; }
.unterschrift-box canvas { width: 100%; max-width: 420px; height: 140px; touch-action: none; display: block; }
@media (max-width: 600px) { .sp-fotos a, .sp-fotos img { width: 46%; } .sp-fotos img { height: 110px; } }

/* 2.58: Rückladung finden */
.rl-form .rl-bis { text-align: center; }
.rl-form .rl-schnell { align-items: center; }
.rl-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; }
.rl-sortierung { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rl-tabelle td, .rl-tabelle th { vertical-align: top; }
.rl-tabelle tr.rl-minus td { background: #fff7f5; }
.rl-gewinn.gut strong { color: #23955a; }
.rl-gewinn.schlecht strong { color: #b42e22; }
.rl-kette { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px 14px; align-items: center; border: 2px solid var(--haupt); border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.rl-kette-nr { width: 36px; height: 36px; border-radius: 50%; background: var(--haupt); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.rl-kette-teile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rl-kette-fracht { display: inline-flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--rand); border-radius: 10px; padding: 6px 10px; background: #fff; }
.rl-kette-fracht:hover { border-color: var(--haupt); }
.rl-kette-fracht .rl-pfeil { color: var(--haupt); font-weight: 700; }
.rl-kette-fracht small { color: var(--leise); }
.rl-zahlen { display: grid; grid-template-columns: repeat(5, auto); gap: 4px 14px; margin: 0; }
.rl-zahlen dt { font-size: .75rem; color: var(--leise); }
.rl-zahlen dd { margin: 0; white-space: nowrap; }
@media (max-width: 800px) { .rl-kette { grid-template-columns: 36px 1fr; } .rl-zahlen { grid-column: 1 / -1; grid-template-columns: repeat(3, auto); } }

/* 2.59: Datensicherung – zurückspielen */
.sich-aktionen { white-space: nowrap; }
.sich-aktionen .inline { display: inline; margin-left: 4px; }
.zurueck-form .gross-schrift { max-width: 320px; letter-spacing: .08em; }

/* 2.60: freie Fahrzeuge in der Nähe (Fracht-Seite, Angebote) */
.nahe-fahrzeuge { border: 2px solid var(--haupt); border-radius: 12px; padding: 8px 14px; margin: 0 0 12px; }
.nahe-fahrzeuge h3 { margin: 4px 0 6px; }
.nahe-fz { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rand); }
.nahe-fz:first-of-type { border-top: 0; }

/* 2.61: Bedienungsanleitung */
.hilfe-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: flex-start; margin-bottom: 10px; }
.hilfe-titel { margin: 0 0 4px; }
.hilfe-werkzeuge { display: flex; gap: 8px; align-items: center; }
.hilfe-werkzeuge input { min-width: 240px; }
.hilfe-seite { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.hilfe-inhalt { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; }
.hilfe-inhalt strong { margin-bottom: 6px; }
.hilfe-inhalt a { padding: 5px 8px; border-radius: 8px; text-decoration: none; color: inherit; font-size: .92rem; }
.hilfe-inhalt a:hover, .hilfe-inhalt a.aktiv { background: var(--haupt-hell); }
.hilfe-abschnitt { border-left: 5px solid var(--haupt); scroll-margin-top: 70px; }
.hilfe-abschnitt.admin { border-left-color: #d9730d; }
.hilfe-abschnitt h2 { margin-top: 0; }
.hilfe-absatz h3 { margin: 10px 0 2px; font-size: 1rem; }
.hilfe-absatz p { margin: 0 0 6px; line-height: 1.5; }
.knopf-wort { display: inline-block; font-family: inherit; font-size: .9em; font-weight: 600; padding: 1px 8px; border: 1px solid var(--haupt); border-radius: 14px; color: var(--haupt); background: #fff; white-space: nowrap; }
.menue-wort { font-weight: 600; }
@media (max-width: 900px) { .hilfe-seite { grid-template-columns: 1fr; } .hilfe-inhalt { position: static; } }
@media print { .leiste, .oben, .fuss, .hilfe-werkzeuge, .hilfe-inhalt, #fensterleiste { display: none !important; } .hilfe-seite { grid-template-columns: 1fr; } .karte { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } }

/* 2.65: Factoring (Weg A) */
.factoring-kasten { border: 2px solid var(--haupt-rand, var(--rand)); border-radius: 12px; padding: 12px 16px; margin: 14px 0; background: #fff; }
.factoring-kasten h3 { margin-top: 0; }
.factoring-schritte { margin: 6px 0 10px 1.2em; padding: 0; }
.factoring-schritte li { margin: 3px 0; }
.factoring-einwilligung { display: flex; gap: 8px; align-items: flex-start; font-size: .92em; line-height: 1.45; }
.factoring-einwilligung input { margin-top: 4px; flex: 0 0 auto; }
.factoring-stand { border: 1px solid var(--rand); border-left: 5px solid #e39b1a; border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: #fffaf2; }
.factoring-stand.fs-ausgezahlt { border-left-color: #2e8b57; background: #f2fbf5; }
.factoring-stand.fs-abgelehnt { border-left-color: #c0392b; background: #fdf3f2; }
.factoring-stand.fs-zurueckgezogen { border-left-color: #999; background: #f6f6f6; }
.factoring-stand .fs-kopf { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 4px; }
.factoring-stand .fs-symbol { font-size: 1.2em; }
.fac-brutto { display: block; padding: 8px 0; font-weight: 700; }
.factoring-kasten .widerruf { margin-top: 8px; }
.factoring-admin { border-top: 1px solid var(--rand); padding: 10px 0; }
.factoring-admin .fa-kopf { margin-bottom: 4px; }
.factoring-zeilen li { padding: 3px 0; }
a.kachel-wahl, a.kachel-wahl:hover { text-decoration: none; color: inherit; }
a.kachel-wahl.gewaehlt { border-color: var(--haupt); background: var(--haupt-hell, #eef7f7); }
/* 2.66: Blätter in Admin → Einstellungen */
.blatt-reiter { margin-bottom: 14px; }
/* 2.77: Admin → Einstellungen – Kacheln in vier Gruppen (Vorschlag B) */
.einst-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; }
.eg-gruppe { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 10px; }
.eg-gruppe h3 { margin: 0 0 8px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); }
.eg-k { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--rand); border-radius: 9px; background: #fff; color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; line-height: 1.2; }
.eg-k:last-child { margin-bottom: 0; }
.eg-k:hover { border-color: var(--haupt); text-decoration: none; }
.eg-k .eg-s { font-size: 1.15rem; line-height: 1; flex: none; }
.eg-k .eg-t { flex: 1 1 0; min-width: 7em; overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }
.eg-k .eg-x { margin-left: auto; flex: none; max-width: 100%; font-size: .66rem; font-weight: 700; background: #e9eef0; color: #56656a; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.eg-k.aktiv { background: var(--haupt); border-color: var(--haupt); color: #fff; }
.eg-k.aktiv .eg-x { background: rgba(255,255,255,.25); color: #fff; }
@media (max-width: 760px) {
  .einst-gruppen { grid-template-columns: 1fr 1fr; gap: 8px; }
  .eg-gruppe { padding: 8px; }
  .eg-k { padding: 8px; gap: 4px 7px; font-size: .78rem; }
  .eg-k .eg-x { font-size: .6rem; padding: 1px 4px; }
}
section.blatt[hidden] { display: none; }
/* 2.68: QR-Code im Melde-Link-Kasten */
.melde-qr { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.melde-qr img { flex: 0 0 auto; width: 132px; height: 132px; border: 1px solid var(--rand); border-radius: 6px; background: #fff; image-rendering: pixelated; }
@media (max-width: 760px) { .melde-qr img { width: 110px; height: 110px; } }
/* 2.68: Bilder der Homepage im Admin */
.hp-bilder-admin { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 14px; }
.hp-bild-wahl { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--rand); border-radius: 10px; padding: 10px; }
.hp-bild-wahl img { width: 100%; max-height: 220px; object-fit: contain; background: var(--grund); border-radius: 6px; }
@media (max-width: 760px) { .hp-bilder-admin { grid-template-columns: 1fr; } }
/* 2.68: eFTI-Kasten und Feld „Ware“ */
.efti-kasten { border: 1px solid var(--rand); border-left: 5px solid var(--orange); border-radius: 8px; padding: 10px 14px; margin: 12px 0; background: var(--orange-hell); }
.efti-kasten.ok { border-left-color: var(--gruen); background: var(--gruen-hell); }
.efti-kasten h3 { margin: 0 0 6px; }
.efti-luecken { margin: 4px 0 8px 1.1em; padding: 0; }
.efti-luecken li.meins { font-weight: 600; }
.ware-feld { display: block; margin-bottom: 12px; }
.ware-feld input { width: 100%; }

/* 2.70: Kärtchen am Handy kompakt – Frachtliste und Aufträge als Zeilen „Bezeichnung  Wert“ (wie Meine Frachten → Abgelaufen) */
@media (max-width: 760px) {
  .frachttabelle.kk tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; padding: 10px 12px; }
  .frachttabelle.kk td { flex: 1 1 100%; font-size: .88rem; line-height: 1.4; }
  .frachttabelle.kk td[data-k] { position: relative; padding-left: 86px; }
  .frachttabelle.kk td[data-k]::before { content: attr(data-k); position: absolute; left: 0; top: 0; width: 82px; color: var(--leise); font-size: .76rem; line-height: 1.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .frachttabelle.kk td small { display: inline; margin: 0; font-size: .82rem; }
  .frachttabelle.kk td > small::before { content: " · "; color: var(--leise); }
  .frachttabelle.kk td > small.angebot-zeilen { display: inline !important; }
  .frachttabelle.kk td > small.angebot-zeilen b + b::before { content: " · "; font-weight: 400; }
  .frachttabelle.kk td strong { font-size: .92rem; }
  .frachttabelle.kk td.preis strong { font-size: .95rem; }
  .frachttabelle.kk td.preis br { display: none; }
  .frachttabelle.kk td.preis .schild { margin-right: 6px; }
  .frachttabelle.kk td .stationen { margin: 2px 0 0; }
  .frachttabelle.kk td.ort:first-child { padding-right: 84px; }
  .frachttabelle.kk td.merken { display: flex; gap: 4px; top: 4px; right: 4px; padding-left: 0; }
  .frachttabelle.kk td.merken .stern, .frachttabelle.kk td.merken .vergleich-knopf { margin: 0; }
  /* Aufträge: Kopfzeile Status + Nummer, dann die Angaben in sinnvoller Reihenfolge */
  .frachttabelle.auftr-kk td.kk-kopf { flex: 0 1 auto; }
  .frachttabelle.auftr-kk td.kk-kopf strong { font-size: .98rem; }
  .frachttabelle.auftr-kk td.kk-kopf + td.kk-kopf { flex: 1 1 0; min-width: 0; }
  .frachttabelle.auftr-kk .kk-o1 { order: 1; } .frachttabelle.auftr-kk .kk-o2 { order: 2; } .frachttabelle.auftr-kk .kk-o3 { order: 3; }
  .frachttabelle.auftr-kk .kk-o4 { order: 4; } .frachttabelle.auftr-kk .kk-o5 { order: 5; } .frachttabelle.auftr-kk .kk-o6 { order: 6; }
  .frachttabelle.auftr-kk .kk-o7 { order: 7; } .frachttabelle.auftr-kk .kk-o8 { order: 8; }
  .frachttabelle.auftr-kk td.kk-leer { display: none; }
  .frachttabelle.auftr-kk td.kk-o7 > small::before { content: none; }
  .frachttabelle.auftr-kk tr > td:first-child + td > small::before { content: " · "; }
}

/* 2.71: «Weitere laden» unter langen Listen */
.mehr-laden { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 14px 0 6px; text-align: center; }
.mehr-laden .knopf { min-width: 220px; }
.mehr-laden.laedt .knopf { opacity: .55; pointer-events: none; }
.mehr-laden.laedt .knopf::after { content: ' …'; }
@media (max-width: 760px) { .mehr-laden .knopf { width: 100%; } }

/* 2.72: Länder- und Städtehinweise – Quellen, „gilt für“, Admin-Blatt */
.lh-gilt { display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 700; color: #b71c1c; background: #fff; border: 1px solid #f0b4ae; border-radius: 999px; padding: 1px 8px; }
.lh-quellen { margin: 4px 0; font-size: .82rem; }
.lh-zeichen .lh-knopf + .lh-knopf { margin-left: 4px; }
.lh-muster { pointer-events: none; display: inline-flex; vertical-align: middle; }
.lh-balken-muster { display: inline-block; background: #fdecea; border: 2px solid #d32f2f; color: #b71c1c; border-radius: 8px; padding: 2px 8px; font-size: .8rem; }
.lh-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.lh-land { border: 1px solid var(--rand); border-radius: 10px; margin: 0 0 8px; background: var(--weiss); }
.lh-land > summary { cursor: pointer; padding: 10px 14px; list-style: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lh-land > summary::-webkit-details-marker, .lh-eintrag > summary::-webkit-details-marker, .lh-bearbeiten > summary::-webkit-details-marker, .lh-neu > summary::-webkit-details-marker { display: none; }
.lh-land > summary::after { content: '▾'; margin-left: auto; color: var(--leise); }
.lh-land[open] > summary::after { content: '▴'; }
.lh-flagge { font-size: 1.3rem; line-height: 1; }
.lh-eintrag { border-top: 1px solid var(--rand-zart); padding: 0 14px; }
.lh-eintrag > summary { cursor: pointer; padding: 10px 0; list-style: none; line-height: 1.5; }
.lh-eintrag.lh-aus > summary strong { color: var(--leise); text-decoration: line-through; }
.lh-eintrag[open] { background: var(--haupt-zart); }
.lh-vorschau ul { margin: 0 0 6px; padding-left: 18px; } .lh-vorschau li { margin-bottom: 4px; }
.lh-fehlt { color: #b26a00; }
.lh-bearbeiten { margin: 6px 0 12px; } .lh-bearbeiten > summary, .lh-neu > summary { list-style: none; display: inline-flex; cursor: pointer; }
.lh-formular { margin-top: 10px; background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; }
.lh-wahl-zeile { margin: 6px 0 10px; } .lh-wahl-titel { display: block; font-weight: 600; margin-bottom: 4px; }
.lh-mehr { margin: 4px 0 10px; } .lh-mehr > summary { cursor: pointer; color: var(--haupt-dunkel); font-weight: 600; }
.lh-vorschlag { border: 1px solid var(--rand); border-left: 4px solid #d9a300; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.meldung-am-ziel { margin: 0 0 10px; }
.lh-muster.lh-a { align-items: center; justify-content: center; }
.lh-balken-muster { white-space: nowrap; font-weight: 700; }
/* 2.75: Netzsuche */
.lh-suchformular { border-color: var(--haupt-rand); background: var(--haupt-zart); }
.lh-selbst { margin-top: 10px; } .lh-selbst > summary { list-style: none; display: inline-flex; cursor: pointer; } .lh-selbst > summary::-webkit-details-marker { display: none; }
.lh-fund { margin: 6px 0 8px; } .lh-fund > summary { cursor: pointer; color: var(--haupt-dunkel); font-weight: 600; }
.lh-fund ol { margin: 6px 0; padding-left: 20px; } .lh-fund li { margin-bottom: 8px; font-size: .88rem; line-height: 1.45; }
.lh-fund q { font-style: italic; } .lh-fund .chip { font-size: .72rem; padding: 1px 7px; margin-left: 4px; }
/* 2.80: Factoring akzeptiert (Liste, Firmenblatt) und Sofortzuschlag beim Einstellen */
.fac-ok { color: #1f7a3d; font-weight: 600; }
.frachttabelle td small.fac-ok { color: #1f7a3d; }
.fac-zeile { margin: 6px 0 0; }
.gross-haken { font-size: 1rem; }
.sofort-haken { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: #fff; cursor: pointer; margin: 4px 0 8px; }
.sofort-haken:has(input:checked) { border-color: #c27c00; background: #fff8e6; box-shadow: inset 0 0 0 1px #c27c00; }
.sofort-haken input { width: auto; }
.sofort-info { background: #fff8e6; border-left-color: #c27c00; font-size: .88rem; }

/* 2.82: befristetes Gebot läuft bald ab – Verlängern mit einem Klick */
.gebot-ablauf { display: flex; flex-direction: column; gap: 8px; }
.gebot-verlaengern { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.gebot-verlaengern span { font-weight: 600; margin-right: 4px; }
@media (max-width: 760px) { .gebot-verlaengern span { flex-basis: 100%; } }

/* 2.83: iPhone (Safari) vergrößert die Seite beim Antippen eines Feldes, wenn die Schrift kleiner als 16 px ist – dann ist rechts etwas abgeschnitten.
   Nur auf iPhone/iPad: Felder mit 16 px, damit die Seite beim Tippen nicht springt. */
@supports (-webkit-touch-callout: none) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }
}

/* 2.85: Profil → Schnittstelle: Rückruf-Adresse je Schlüssel */
.api-rueckruf-zeile td { background: var(--haupt-zart); }
.api-rueckruf label { display: block; font-weight: 600; font-size: .88rem; margin: 0 0 6px; }
.api-rueckruf label input { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
.api-rueckruf .knopfreihe { margin: 6px 0; }
@media (max-width: 760px) {
  /* 2.85: Schlüssel-Liste am Handy als Kärtchen untereinander (kein seitliches Verschieben) */
  #api table.api-schluessel, #api table.api-schluessel tbody, #api table.api-schluessel tr, #api table.api-schluessel td { display: block; width: auto; }
  #api table.api-schluessel tr:has(th) { display: none; }
  #api table.api-schluessel tr { border-bottom: 1px solid var(--rand); padding: 8px 0; }
  #api table.api-schluessel td { border: 0; padding: 2px 0; }
  #api table.api-schluessel tr.api-rueckruf-zeile td { padding: 8px; border-radius: 8px; }
}

/* 2.86: Meine Angebote – Karten mit allen Funktionen */
.angebot-liste { display: flex; flex-direction: column; gap: 12px; }
.angebot-karte { background: var(--weiss); border: 1px solid var(--rand); border-left: 5px solid var(--haupt); border-radius: 10px; padding: 14px 16px; box-shadow: var(--schatten); }
.angebot-karte.ak-veraltet, .angebot-karte.ak-abgelaufen, .angebot-karte.ak-knapp { border-left-color: #e0a100; }
.angebot-karte.ak-angenommen { border-left-color: var(--gruen); }
.angebot-karte.ak-abgelehnt, .angebot-karte.ak-storniert, .angebot-karte.ak-zurueckgezogen { border-left-color: #c9cfd1; }
.ak-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ak-strecke { color: var(--text); text-decoration: none; font-size: 1.02rem; }
.ak-strecke:hover { text-decoration: underline; }
.ak-daten { display: flex; gap: 20px; align-items: flex-start; }
.ak-preis { display: flex; flex-direction: column; min-width: 120px; }
.ak-preis strong { font-size: 1.5rem; line-height: 1.2; }
.ak-liste { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: .92rem; flex: 1; }
.ak-liste dt { color: var(--leise); }
.ak-liste dd { margin: 0; }
.ak-hinweis { margin: 10px 0 0; padding: 8px 10px; background: #fff7e0; border-radius: 6px; font-size: .9rem; }
.ak-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rand); }
.ak-aktionen form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ak-form { margin-top: 12px; padding: 12px; background: var(--grund); border-radius: 8px; }
.ak-suche { margin-bottom: 10px; }
@media (max-width: 760px) {
  .ak-daten { flex-direction: column; gap: 8px; }
  .ak-preis { flex-direction: row; align-items: baseline; gap: 8px; }
  .ak-aktionen .ak-verlaengern { flex-basis: 100%; }
}

/* 2.86: Fracht-Details – Bezeichnungen fett, jede Angabe sauber mit Linie getrennt, beide Spalten als eigener Rahmen (Sascha 06.11. 16:07) */
#details .blatt-raster { align-items: start; }
#details dl.werte { gap: 0; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; font-size: .92rem; margin-bottom: 14px; }
#details dl.werte dt, #details dl.werte dd { padding: 8px 12px; border-bottom: 1px solid var(--rand); }
#details dl.werte dt { font-weight: 700; color: var(--text); background: var(--grund); }
#details dl.werte > dt:last-of-type, #details dl.werte > dd:last-of-type { border-bottom: 0; }
#details .packstueck-tabelle, #details table.tabelle { border: 1px solid var(--rand); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
#details table.tabelle th { background: var(--grund); }
/* 2.87: zugeklappter Kasten (z. B. Netzsuche im Admin) */
details.lh-einklapp > summary { cursor: pointer; padding: 2px 0; }
details.lh-einklapp[open] > summary { margin-bottom: 10px; }
/* 2.87: Meine Angebote – Bezeichnungen fett und mit feinen Linien getrennt, wie bei den Fracht-Details (Sascha 06.11. 16:15) */
.ak-liste { gap: 0 14px; }
.ak-liste dt { font-weight: 700; color: var(--text); }
.ak-liste dt, .ak-liste dd { padding: 4px 0; border-bottom: 1px solid var(--rand); }
.ak-liste > dt:last-of-type, .ak-liste > dd:last-of-type { border-bottom: 0; }
.ak-preis > span.leise { font-weight: 700; color: var(--text); }
/* 2.87: Meine Angebote nicht über die ganze Bildschirmbreite ziehen (Sascha 06.11. 16:17: „das ist zu breit“) */
.angebot-liste, .angebot-liste + .mehr-laden { max-width: 980px; }
.ak-suche, .ak-suche + p.leise { max-width: 980px; }
.ak-liste { flex: 0 1 auto; min-width: 0; width: 100%; max-width: 640px; }
/* 2.90: „Fracht hinzufügen“ oben in der linken Menüleiste */
.leiste .leiste-neu { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 12px 12px; padding: 10px 12px; font-weight: 700; }
.leiste .leiste-neu span { display: inline !important; }

/* 2.91: Eingabefelder heben sich von den weißen Karten ab (Sascha 06.11. 16:30: „bei den weißen Bereichen zu den Eingabefeldern etwas Kontrast, sonst ist alles weiß“)
   – leicht graue Füllung und kräftigerer Rand; beim Hineintippen wieder weiß. Auswahl-Kacheln und Zeit-Knöpfe mit deutlicherem Rand. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), select, textarea { background-color: #f4f7f8; border-color: #aab6b9; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, select:focus, textarea:focus { background-color: var(--weiss); }
input:disabled, select:disabled, textarea:disabled { background-color: #e9edee; }
.kachel-wahl { border-color: #c3cdcf; }
.wahl-mini, .warte-wahl span { border-color: #c3cdcf; }

/* 2.92: Dashboard-Kacheln mit Farbe (Sascha 06.11. 16:38: „etwas Farbe ins Spiel bringen, muss aber zum Design passen“)
   Jede Kachel hat ihre eigene Farbe aus der Palette: farbiger Streifen links, Symbol im getönten Kreis, Zahl farbig, wenn etwas da ist. */
.zahl-kachel { --zk: var(--haupt); --zk-hell: var(--haupt-hell); border-left: 4px solid var(--zk); }
.zahl-kachel .icon { width: 42px; height: 42px; padding: 9px; border-radius: 50%; background: var(--zk-hell); color: var(--zk); box-sizing: border-box; }
.zahl-kachel.hat .icon, .zahl-kachel.hat strong { color: var(--zk); }
.zahl-kachel:hover { border-color: var(--zk); border-left-color: var(--zk); }
.zk-admin   { --zk: #7a4fb5; --zk-hell: #f1ebf9; }
.zk-liste   { --zk: #0e7c86; --zk-hell: #e3f3f4; }
.zk-zu      { --zk: #d9730d; --zk-hell: #fdf0e1; }
.zk-stern   { --zk: #b07d00; --zk-hell: #fdf3d9; }
.zk-suche   { --zk: #2f6fb3; --zk-hell: #e6eff9; }
.zk-laufend { --zk: #23955a; --zk-hell: #e3f4ea; }
.zk-partner { --zk: #b0457a; --zk-hell: #f9e8f1; }
.zk-chat    { --zk: #1f9fa8; --zk-hell: #e0f6f7; }

/* 2.92 (Sascha 06.11. 16:43): Dashboard-Kästen in der App/am Handy auf- und zuklappbar, anfangs zu */
.dash-klapp.klappbar h2 { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; margin: 0; -webkit-tap-highlight-color: transparent; }
.dash-klapp.klappbar h2::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--haupt); border-bottom: 2px solid var(--haupt); transform: rotate(45deg); margin: 0 4px 4px auto; transition: transform .15s; }
.dash-klapp.klappbar.zu h2::after { transform: rotate(-45deg); margin: 0 6px 0 auto; }
.dash-klapp.klappbar > h2, .dash-klapp.klappbar > .karte-kopf { margin-bottom: 10px; }
.dash-klapp.klappbar .karte-kopf h2 { flex: 1 1 100%; }   /* Pfeil immer ganz rechts, Link rutscht darunter */
.dash-klapp.klappbar.zu { padding-top: 14px; padding-bottom: 14px; }
.dash-klapp.klappbar.zu > :not(h2):not(.karte-kopf), .dash-klapp.klappbar.zu .karte-kopf .textknopf { display: none; }
.dash-klapp.klappbar.zu > h2, .dash-klapp.klappbar.zu > .karte-kopf { margin-bottom: 0; }

/* 2.92 (Sascha 06.11. 16:41): Seitenbreite je Benutzer – „feste Breite, mittig“ begrenzt auch die breiten Seiten (Dashboard, Listen) */
body.breite-fest .inhalt.breit { max-width: 1400px; }
.breite-wahl { display: flex; gap: 14px; flex-wrap: wrap; }
.breite-wahl button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 190px; padding: 12px; border: 2px solid var(--rand); border-radius: 10px; background: var(--weiss); cursor: pointer; font: inherit; color: var(--text); }
.breite-wahl button[aria-pressed="true"] { border-color: var(--haupt); background: var(--haupt-hell); font-weight: 700; }
.breite-wahl .bw-bild { display: flex; width: 150px; height: 78px; border: 1px solid #aab6b9; border-radius: 6px; background: var(--seite); overflow: hidden; }
.breite-wahl .bw-bild i { width: 22px; background: var(--haupt); opacity: .85; }
.breite-wahl .bw-bild b { flex: 1; display: flex; justify-content: center; padding: 8px 6px; }
.breite-wahl .bw-bild b span { display: block; width: 100%; background: repeating-linear-gradient(#fff 0 12px, transparent 12px 17px); }
.breite-wahl .bw-fest .bw-bild b span { width: 64%; }
.breite-wahl small { color: var(--leise, #5b6b70); font-weight: 400; text-align: center; }

/* 2.93: Firmenprofil (auch im Seitenfenster einer Fracht) wie die Fracht-Details – Stammdaten mit fetten Bezeichnungen auf grauem Grund, Zahlung, Nachweise und Fahrzeuge gerahmt (Sascha 06.11. 16:57, Vorschau Variante B 17:02 „B“) */
.firmenblatt .blatt-raster { align-items: start; }
.firmenblatt dl.werte { gap: 0; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; font-size: .92rem; margin-bottom: 14px; }
.firmenblatt dl.werte dt, .firmenblatt dl.werte dd { padding: 8px 12px; border-bottom: 1px solid var(--rand); }
.firmenblatt dl.werte dt { font-weight: 700; color: var(--text); background: var(--grund); }
.firmenblatt dl.werte > dt:last-of-type, .firmenblatt dl.werte > dd:last-of-type { border-bottom: 0; }
.firmenblatt .zahlstatus, .firmenblatt .liste-schlicht { border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; font-size: .92rem; margin-bottom: 14px; }
.firmenblatt .zahlstatus li, .firmenblatt .liste-schlicht li { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--rand); }
.firmenblatt .zahlstatus li:last-child, .firmenblatt .liste-schlicht li:last-child { border-bottom: 0; }
.firmenblatt .zahlstatus li { padding-left: 32px; font-weight: 700; }
.firmenblatt .zahlstatus li::before { left: 12px; top: 13px; }
.firmenblatt .zahlstatus .gut { background: #eef8f2; } .firmenblatt .zahlstatus .mittel { background: #fdf6e3; } .firmenblatt .zahlstatus .schlecht { background: #fbeeee; }
.firmenblatt .liste-schlicht li { background: var(--grund); font-weight: 700; }
.firmenblatt table.tabelle { border: 1px solid var(--rand); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.firmenblatt table.tabelle th { background: var(--grund); }

/* 2.95: weitere Listen am Handy als Kärtchen (Sascha 06.11. 17:10 Vorschau, 17:27 „passt“) – Tabellen mit data-kk, Bezeichnungen setzt js/app.js aus der Kopfzeile */
@media (max-width: 760px) {
  .frachttabelle.kk.kk-mit td[data-k] { padding-left: 112px; }
  .frachttabelle.kk.kk-mit td[data-k]::before { width: 106px; }
  .frachttabelle.kk.kk-mit td small.kk-weg { display: none !important; }
  .frachttabelle.kk.kk-mit td > small.kk-erst::before { content: none; }
  .frachttabelle.kk.kk-mit td > small.kk-erst { color: var(--text); }
  .tabelle-box:has(table.kk-auto) { overflow: visible; background: transparent; box-shadow: none; border: 0; padding: 0; }
  table.kk-auto, table.kk-auto tbody { display: block; width: 100%; min-width: 0; }
  table.kk-auto tr.kk-kopfzeile, table.kk-auto thead { display: none; }
  table.kk-auto tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; box-shadow: var(--schatten); }
  table.kk-auto td { display: block; flex: 1 1 100%; border: 0 !important; padding: 0 0 0 96px !important; position: relative; font-size: .88rem; line-height: 1.45; text-align: left !important; background: none !important; }
  table.kk-auto td[data-k]::before { content: attr(data-k); position: absolute; left: 0; top: 0; width: 90px; color: var(--leise); font-size: .76rem; line-height: 1.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.kk-auto td.kk-titel { flex: 1 1 0; min-width: 0; padding-left: 0 !important; font-size: 1rem; font-weight: 700; padding-bottom: 4px !important; }
  table.kk-auto td.kk-haken { flex: 0 0 auto; order: -1; padding: 0 !important; }
  table.kk-auto td.kk-leer { display: none; }
  table.kk-auto td.kk-knoepfe { padding: 8px 0 0 !important; margin-top: 6px; border-top: 1px solid var(--rand) !important; display: flex; flex-wrap: wrap; gap: 6px; }
  table.kk-auto td.kk-knoepfe > * { flex: 0 0 auto; width: auto; margin: 0; }
  table.kk-auto tr.summe { background: var(--grund); font-weight: 700; }
  table.kk-auto tr.summe td:empty { display: none; }
}
/* 2.95: Haken „Aufgeklappte Kästen merken“ im Profil */
.klapp-haken span { display: flex; flex-direction: column; gap: 2px; } .klapp-haken small { color: var(--leise); }

/* 2.96: Transportunternehmer suchen – Bezeichnung immer über dem Feld (vorher teils daneben, Sascha 06.11. 17:33 „das ist was verschoben“), Umschalter Karten/Liste */
.firmen-filter .reihe3 { align-items: start; gap: 0 20px; }
.firmen-filter .reihe3 > label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .86rem; margin: 0 0 12px; }
.firmen-filter .reihe3 > label > input, .firmen-filter .reihe3 > label > select, .firmen-filter .umkreis-zeile { width: 100%; margin: 0; }
.firmen-filter .reihe3 > label input, .firmen-filter .reihe3 > label select { font-weight: 400; }
.firmen-filter .knopfreihe { align-items: center; }
.ansicht-wahl { display: inline-flex; margin-left: auto; border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; background: var(--weiss); }
.ansicht-wahl .aw-k { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .88rem; }
.ansicht-wahl .aw-k + .aw-k { border-left: 1px solid var(--rand); }
.ansicht-wahl .aw-k.an { background: var(--haupt); color: #fff; }
.aw-bild { display: inline-grid; gap: 2px; width: 16px; height: 14px; }
.aw-bild-k { grid-template-columns: 1fr 1fr; } .aw-bild-l { grid-template-rows: repeat(3, 1fr); }
.aw-bild i { background: currentColor; border-radius: 1px; opacity: .85; }
.firmen-tabelle td { vertical-align: top; }
.firmen-tabelle .fl-nachweise { font-size: .84rem; line-height: 1.5; }
.firmen-tabelle .fl-knoepfe { white-space: nowrap; text-align: right; }
.firmen-tabelle .fl-knoepfe .knopf { margin: 0 0 4px 4px; }
@media (max-width: 760px) {
  .ansicht-wahl { margin-left: 0; width: 100%; } .ansicht-wahl .aw-k { flex: 1; justify-content: center; }
  .firmen-tabelle .fl-knoepfe { white-space: normal; text-align: left; padding-left: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--rand); padding-top: 8px !important; margin-top: 4px; }
  .firmen-tabelle .fl-knoepfe::before { content: none !important; }
  .firmen-tabelle .fl-knoepfe .knopf { margin: 0; }
}

/* 2.96: Dashboard – Umkreis 20…200 km direkt neben der Überschrift (Sascha 06.11. 17:34) */
.umkreis-kopf { justify-content: flex-start; gap: 10px 16px; flex-wrap: wrap; }
.umkreis-kopf .textknopf { margin-left: auto; }
.umkreis-wahl { display: inline-flex; align-items: center; border: 1px solid var(--rand); border-radius: 999px; overflow: hidden; background: var(--weiss); }
.umkreis-wahl a { padding: 5px 11px; font-weight: 700; font-size: .86rem; color: var(--text); text-decoration: none; border-right: 1px solid var(--rand); }
.umkreis-wahl a:hover { background: var(--haupt-hell, #e3f3f4); }
.umkreis-wahl a.an { background: var(--haupt); color: #fff; }
.umkreis-wahl .uw-km { padding: 5px 11px 5px 9px; font-size: .84rem; color: var(--leise); background: var(--grund); }
@media (max-width: 760px) { .umkreis-wahl { order: 3; width: 100%; } .umkreis-wahl a { flex: 1; text-align: center; padding: 7px 0; } .umkreis-kopf .textknopf { margin-left: 0; } }

/* 2.97: Fahrzeugbörse – Suchleiste ordentlich: Bezeichnung über dem Feld, Felder in festen Spalten mit Abstand, Schrift wie überall (Sascha 06.11. 17:36 „auch hier ist es verschoben“) */
.filterleiste .filter-haupt { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px 20px; align-items: end; }
.filterleiste .filter-ort { display: grid; grid-template-columns: minmax(0, 1.3fr) 96px minmax(0, 1.2fr); gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.filterleiste .filter-ort legend { margin: 0 0 4px; padding: 0; font-weight: 600; font-size: .86rem; color: var(--text); }
.filterleiste .filter-ort > select, .filterleiste .filter-ort > input { border-radius: 7px !important; margin: 0 !important; max-width: none !important; width: 100%; }
.filterleiste .filter-haupt > label { font-weight: 600; font-size: .86rem; color: var(--text); margin: 0; }
.filterleiste .filter-haupt > label select { max-width: none; width: 100%; font-weight: 400; font-size: inherit; }
.filterleiste .filter-haupt select, .filterleiste .filter-haupt input { font-size: .95rem; font-weight: 400; }
.filterleiste .filter-haupt .knopf.suchen { min-width: 140px; justify-content: center; }
@media (max-width: 900px) and (min-width: 761px) { .filterleiste .filter-haupt { grid-template-columns: 1fr 1fr; } .filterleiste .filter-ort { grid-column: 1 / -1; } }
@media (max-width: 760px) { .filterleiste .filter-haupt { grid-template-columns: 1fr; } .filterleiste .filter-ort { grid-template-columns: minmax(0, 1.3fr) 84px minmax(0, 1.2fr); } .filterleiste .filter-haupt .knopf.suchen { width: 100%; } }

/* 2.98: Frachtlage – Wärmebild von/nach (Sascha 06.11. 17:40 „so etwas auch bauen, nur besser und innovativer“) */
.fl-einleitung { margin: -6px 0 12px; max-width: 900px; }
.fl-filter { display: flex; flex-direction: column; gap: 14px; }
.fl-art { margin: 0; align-self: flex-start; }
.fl-filter-reihe { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; }
.fl-feld { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .86rem; }
.fl-feld select { font-weight: 400; min-width: 200px; }
.fl-zeit, .fl-haken { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 400; }
.fl-zeit label, .fl-haken label { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--rand); border-radius: 999px; cursor: pointer; font-size: .86rem; background: var(--weiss); user-select: none; }
.fl-zeit label.an, .fl-haken label.an { background: var(--haupt); border-color: var(--haupt); color: #fff; font-weight: 600; }
.fl-zeit input, .fl-haken input { position: absolute; opacity: 0; pointer-events: none; }
.fl-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.fl-zahlen > div { background: var(--weiss); border-radius: 12px; box-shadow: var(--schatten); padding: 12px 16px; border-left: 4px solid var(--haupt); }
.fl-zahlen b { display: block; font-size: 1.45rem; color: var(--haupt-dunkel, #0a5f67); }
.fl-zahlen span { font-size: .84rem; color: var(--leise); }
.fl-raster { display: flex; flex-wrap: wrap; gap: 16px 0; align-items: flex-start; }
.fl-matrix-box { overflow-x: auto; max-width: 100%; }
.fl-raster > * { min-width: 0; max-width: 100%; }
.fl-matrix { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 760px; font-size: .9rem; table-layout: fixed; }
.fl-matrix thead th:first-child, .fl-matrix tbody th { width: 128px; }
.fl-matrix th.fl-summe, .fl-matrix td.fl-summe { width: 52px; }
.fl-matrix thead th small { white-space: normal !important; min-height: 2.4em; }
.fl-matrix tbody th small { white-space: normal !important; }
.fl-matrix th { font-weight: 600; color: var(--text); padding: 6px 4px; text-align: center; vertical-align: middle; line-height: 1.2; }
.fl-matrix thead th small, .fl-matrix tbody th small { display: block; font-weight: 400; font-size: .7rem; color: var(--leise); white-space: nowrap; }
.fl-matrix tbody th { text-align: left; padding-right: 10px; white-space: nowrap; position: sticky; left: 0; background: var(--weiss); z-index: 1; }
.fl-zone { display: inline-block; min-width: 26px; padding: 2px 6px; border-radius: 6px; background: var(--leiste, #112d33); color: #fff; font-size: .82rem; text-align: center; }
.fl-ecke { font-size: .72rem !important; color: var(--leise) !important; font-weight: 400 !important; text-align: left !important; }
.fl-ecke span { display: block; }
.fl-matrix td { height: 52px; min-width: 52px; border-radius: 8px; text-align: center; padding: 0; position: relative; }
.fl-matrix td.fl-leer { background: var(--grund); }
.fl-matrix td a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 52px; color: inherit; text-decoration: none; border-radius: 8px; transition: transform .12s, box-shadow .12s; }
.fl-matrix td a:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.18); position: relative; z-index: 2; }
.fl-matrix td b { font-size: 1.05rem; line-height: 1.1; }
.fl-matrix td small { font-size: .66rem; opacity: .85; }
.fl-matrix .s1, .fl-skala .s1 { background: color-mix(in srgb, var(--haupt) 14%, #fff); color: var(--text); }
.fl-matrix .s2, .fl-skala .s2 { background: color-mix(in srgb, var(--haupt) 30%, #fff); color: var(--text); }
.fl-matrix .s3, .fl-skala .s3 { background: color-mix(in srgb, var(--haupt) 52%, #fff); color: #fff; }
.fl-matrix .s4, .fl-skala .s4 { background: color-mix(in srgb, var(--haupt) 76%, #fff); color: #fff; }
.fl-matrix .s5, .fl-skala .s5 { background: var(--haupt-dunkel, #0a5f67); color: #fff; }
.fl-rund { position: absolute; top: 2px; left: 4px; font-style: normal; font-size: .7rem; opacity: .9; }
.fl-neu { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #34b46a; box-shadow: 0 0 0 2px #fff; }
.fl-neu-legende { position: static; display: inline-block; vertical-align: middle; }
.fl-summe { font-weight: 700; color: var(--leise); background: transparent !important; font-size: .86rem; }
.fl-gesamt { color: var(--text); }
.fl-mein { color: var(--haupt) !important; }
.fl-mein .fl-zone { background: var(--haupt); }
.fl-sie { display: block; font-style: normal; font-size: .66rem; font-weight: 700; color: var(--haupt); text-transform: uppercase; letter-spacing: .04em; }
.fl-mein-zeile td.fl-leer { background: color-mix(in srgb, var(--haupt) 6%, var(--grund)); }
.fl-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: .8rem; color: var(--leise); }
.fl-skala { display: inline-flex; gap: 2px; } .fl-skala i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }
.fl-seite { display: flex; flex-direction: column; gap: 16px; }
.fl-seite .karte { margin: 0; }
.fl-seite h2 { font-size: 1rem; margin: 0 0 10px; }
.fl-strecken { list-style: none; padding: 0; margin: 0; counter-reset: fl; }
.fl-strecken li { border-bottom: 1px solid var(--rand); padding: 8px 0; }
.fl-strecken li:last-child { border-bottom: 0; }
.fl-strecken a { display: flex; justify-content: space-between; align-items: center; color: var(--text); text-decoration: none; font-weight: 600; }
.fl-strecken a b { background: var(--haupt); color: #fff; border-radius: 999px; padding: 1px 10px; font-size: .86rem; }
.fl-strecken small { display: block; color: var(--leise); font-size: .76rem; margin-top: 2px; }
.fl-gesucht ul { list-style: none; padding: 0; margin: 0; } .fl-gesucht li { padding: 6px 0; display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.fl-gesucht .fl-plus { margin-left: auto; color: #b65f00; font-weight: 700; }

@media (max-width: 760px) {
  .fl-zahlen { grid-template-columns: 1fr 1fr; }
  .fl-art { align-self: stretch; } .fl-art .aw-k { flex: 1; justify-content: center; font-size: .8rem; padding: 8px 6px; }
  .fl-feld select { min-width: 0; width: 100%; } .fl-feld { width: 100%; }
  .fl-matrix { min-width: 520px; border-spacing: 3px; } .fl-matrix td { height: 44px; } .fl-matrix td a { min-height: 44px; }
  .fl-matrix thead th:first-child, .fl-matrix tbody th { width: 64px; } .fl-matrix th.fl-summe, .fl-matrix td.fl-summe { width: 40px; }
  .fl-matrix td small, .fl-matrix th small, .fl-rund { display: none !important; } .fl-sie { font-size: .58rem; }
  .fl-matrix-box { margin: 0 -6px; padding-bottom: 6px; } .fl-matrix-karte::after { content: '← wischen →'; display: block; text-align: center; font-size: .75rem; color: var(--leise); margin-top: 4px; }
}

/* 2.98: Dashboard „Frachten im Umkreis“ – höchstens 5 Zeilen sichtbar, Rest im Kasten scrollen; Kopfzeile bleibt stehen */
.umkreis-liste.umkreis-scroll { overflow-y: auto; border: 1px solid var(--rand); border-radius: 10px; }
.umkreis-liste.umkreis-scroll .tabelle-rahmen { border: 0; border-radius: 0; overflow: visible; }
.umkreis-liste.umkreis-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--weiss); box-shadow: 0 1px 0 var(--rand); }
.umkreis-mehr { margin: 8px 0 0; font-size: .8rem; text-align: right; }
#umkreis-kasten.laedt .umkreis-liste { opacity: .45; transition: opacity .15s; }
@media (max-width: 760px) { .umkreis-liste.umkreis-scroll { border: 0; } }
#umkreis-kasten, #umkreis-kasten * { overflow-anchor: none; }

/* 2.99: Frachtlage – Klick auf ein Feld: Übersicht rutscht nach links, rechts erscheinen die Frachten (Sascha 06.11. 17:59) */
.fl-raster > .fl-matrix-karte { flex: 1 1 0; min-width: 0; margin: 0; transition: flex-basis .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.fl-raster > .fl-seite { flex: 0 0 280px; margin-left: 16px; overflow: hidden; transition: flex-basis .45s ease, margin .45s ease, opacity .3s ease; }
.fl-raster > .fl-frachten { flex: 0 0 0; width: 0; min-width: 0; margin: 0; padding: 0; opacity: 0; overflow: hidden; transform: translateX(60px); border: 0;
  position: sticky; top: 72px; max-height: calc(100vh - 90px); display: flex; flex-direction: column;
  transition: flex-basis .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease .12s, margin .5s ease, padding .5s ease; }
.fl-raster.fl-offen > .fl-seite { flex-basis: 0; margin-left: 0; opacity: 0; }
.fl-raster.fl-offen > .fl-frachten { flex-basis: 42%; margin-left: 16px; padding: 16px 18px; opacity: 1; transform: none; border-left: 4px solid var(--haupt); }
.fl-raster.fl-offen > .fl-matrix-karte { transform: translateX(-4px); }
/* geöffnet: Übersicht kompakter, damit sie auch bei fester Breite ohne Wischen neben die Frachten passt */
.fl-raster.fl-offen .fl-matrix { min-width: 0; border-spacing: 3px; }
.fl-raster.fl-offen .fl-matrix td small, .fl-raster.fl-offen .fl-matrix thead th small, .fl-raster.fl-offen .fl-rund { display: none; }
.fl-raster.fl-offen .fl-matrix thead th:first-child, .fl-raster.fl-offen .fl-matrix tbody th { width: 92px; }
.fl-raster.fl-offen .fl-matrix tbody th small { font-size: .64rem; }
.fl-raster.fl-offen .fl-matrix th.fl-summe, .fl-raster.fl-offen .fl-matrix td.fl-summe { width: 38px; }
.fl-raster.fl-offen .fl-matrix td, .fl-raster.fl-offen .fl-matrix td a { height: 44px; min-height: 44px; }
.fl-matrix td a.fl-gewaehlt { outline: 3px solid var(--akzent, #3fc1c9); outline-offset: 1px; transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.2); position: relative; z-index: 3; }
.fl-raster.fl-offen .fl-matrix td a:not(.fl-gewaehlt) { opacity: .78; } .fl-raster.fl-offen .fl-matrix td a:hover { opacity: 1; }
.flf-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rand); flex: none; }
.flf-titel { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.flf-titel .flf-zahl { background: var(--haupt); color: #fff; border-radius: 999px; padding: 1px 10px; font-size: .86rem; margin-left: 4px; }
.flf-kopf small { color: var(--leise); font-size: .8rem; }
.flf-zu { border: 1px solid var(--rand); background: var(--weiss); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; flex: none; }
.flf-zu:hover { background: var(--grund); }
.flf-liste { overflow-y: auto; flex: 1 1 auto; margin: 10px -6px 10px 0; padding-right: 6px; display: flex; flex-direction: column; gap: 8px; }
.flf-karte { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; color: var(--text); text-decoration: none; background: var(--weiss);
  animation: flf-rein .4s cubic-bezier(.2,.8,.2,1) both; }
.flf-karte:hover { border-color: var(--haupt); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.flf-karte:nth-child(2) { animation-delay: .04s; } .flf-karte:nth-child(3) { animation-delay: .08s; } .flf-karte:nth-child(4) { animation-delay: .12s; } .flf-karte:nth-child(5) { animation-delay: .16s; } .flf-karte:nth-child(n+6) { animation-delay: .2s; }
@keyframes flf-rein { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.flf-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; font-size: .9rem; }
.flf-route small { display: block; color: var(--leise); font-size: .76rem; margin-top: 1px; }
.flf-pfeil { color: var(--haupt); font-weight: 700; }
.flf-unten { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .84rem; }
.flf-fz { color: var(--text); }
.flf-preis { font-weight: 700; font-size: 1rem; white-space: nowrap; } .flf-preis small { font-weight: 400; color: var(--leise); font-size: .76rem; }
.flf-ag { font-size: .78rem; color: var(--leise); }
.flf-neu { background: #e3f6ea; color: #1e7a45; border-radius: 999px; padding: 0 7px; font-weight: 700; font-size: .7rem; }
.flf-suche { flex: none; align-self: flex-start; }
.fl-frachten.wechsel .flf-liste, .fl-frachten.wechsel .flf-kopf { opacity: .35; transition: opacity .15s; }
/* Aufteilung nach der Breite des Inhalts (auch bei „Feste Breite, mittig“ – Sascha 06.11. 18:01), nicht nach dem Bildschirm */
.fl-huelle { container: flraster / inline-size; }
@container flraster (max-width: 1250px) { .fl-raster > .fl-seite { flex: 1 1 100%; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fl-raster.fl-offen > .fl-seite { display: none; } }
@container flraster (max-width: 940px) {
  .fl-raster.fl-offen > .fl-frachten { flex-basis: 100%; margin-left: 0; position: static; max-height: none; transform: none; border-left: 0; border-top: 4px solid var(--haupt); }
  .fl-raster > .fl-frachten { transform: translateY(30px); } .fl-raster.fl-offen > .fl-matrix-karte { transform: none; }
  .flf-liste { overflow: visible; }
}
@media (max-width: 760px) { .fl-raster > .fl-seite { display: flex; flex-direction: column; } .flf-route { grid-template-columns: 1fr; } .flf-route .flf-pfeil { display: none; } }

/* 3.00: Rückladung finden und Mautrechner am Handy – Felder bleiben im Kasten (Sascha 08.11. 20:22 „Anzeige-Formatierungsfehler“: Felder ragten rechts hinaus, Seite breiter als der Bildschirm) */
.maut-gruppe { min-width: 0; }
.maut-zeile > * { min-width: 0; }
.maut-zeile select, .maut-zeile input:not([type=radio]):not([type=checkbox]) { max-width: 100%; }
@media (max-width: 640px) {
  .maut-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .maut-zeile select, .maut-zeile input:not([type=radio]):not([type=checkbox]) { width: 100%; }
  .maut-zeile.ort-zeile { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); }
  .maut-zeile:has(.rl-bis) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .maut-zeile:has(.rl-bis) .rl-bis { padding: 0 2px; }
  .maut-gruppe { padding: 8px 10px 10px; }
  .maut-zeile .maut-umfahren { gap: 6px; }
  .maut-zeile .wahl-knopf.klein span { padding: 6px 10px; }
}
/* 3.00 (Sascha 08.11. 20:23 „Stadt/Ort rechts neben die PLZ“): am Handy überall Land über die ganze Breite, darunter PLZ (schmal) und Ort direkt rechts daneben */
@media (max-width: 760px) {
  .maut-zeile.ort-zeile, .maut-mini-zeile.vier, .ort-zeile { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) !important; gap: 8px; }
  .maut-zeile.ort-zeile > .maut-titel, .maut-mini-zeile.vier > .leise, .maut-zeile.ort-zeile > select, .maut-mini-zeile.vier > select, .ort-zeile > select { grid-column: 1 / -1 !important; }
  .maut-zeile.ort-zeile > input, .maut-mini-zeile.vier > input, .ort-zeile > input, .ort-zeile .ort-feld { grid-column: auto !important; width: 100%; min-width: 0; }
}

/* 3.01: Einladungen – dritter Knopf „Einzeln von Hand“ zeigt das Formular für eine einzelne Einladung (Sascha 09.11. 07:51) */
.einl-hand { display: none; }
section:has(input[name=quelle][value=hand]:checked) .einl-liste-teil { display: none; }
section:has(input[name=quelle][value=hand]:checked) .einl-hand { display: flex; flex-direction: column; gap: 12px; }
.einl-hand .pflicht { color: #c0392b; }
.einl-ort { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 110px) minmax(0, 1.6fr); gap: 8px; }
.einl-sprache { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.einl-sprache > span { font-weight: 600; font-size: .9rem; margin-right: 4px; flex: 1 1 100%; }
.einl-sprache small { color: var(--leise); font-weight: 400; }
.einl-hand .knopfreihe { gap: 10px; }
@media (max-width: 760px) { .einl-hand .reihe { grid-template-columns: 1fr; } .einl-hand .knopfreihe .knopf { flex: 1 1 100%; justify-content: center; } }
/* 3.01: Einladungen – Volltextsuche oben und in der Liste, Treffer markiert (Sascha 09.11. 07:56) */
.einl-schnellsuche { display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin: 0 0 16px; }
.einl-schnellsuche input { flex: 1 1 auto; min-width: 0; font-size: 1rem; padding: 11px 14px; }
.einl-suche input { font-size: .98rem; }
.einl-tabelle mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 1px; }
@media (max-width: 760px) { .einl-schnellsuche { flex-wrap: wrap; } .einl-schnellsuche .knopf { flex: 1 1 100%; justify-content: center; } }

/* 3.02: Frachtkärtchen am Handy neu geordnet (Sascha 09.11. 12:15, Vorschau B mit einem Klapp-Block, 12:25 „ok“):
   oben Laden (Datum darunter), Entladen (Datum darunter), Sendung, Preis – darunter EIN Block „Details“ zum Aufklappen
   (km, Bemerkung, eingestellt, Angebote untereinander, dann Auftraggeber, ganz unten der rote Länder-/Städtehinweis); anfangs zu */
.frachttabelle .kk-klapp, .frachttabelle .kk-lh { display: none; }
@media (max-width: 760px) {
  .frachttabelle.kk td.ort { order: 1; }
  .frachttabelle.kk td.ort + td.ort { order: 2; }
  .frachttabelle.kk td.ort > small:not(.lh-zeile) { display: block; }
  .frachttabelle.kk td.ort > small:not(.lh-zeile)::before { content: none; }
  .frachttabelle.kk td.ort > small.lh-zeile { display: none; }
  .frachttabelle.kk td.fahrzeug { display: contents; }
  .frachttabelle.kk td.fahrzeug::before { content: none; display: none; }
  .frachttabelle.kk td.fahrzeug > strong { order: 3; flex: 1 1 100%; display: block; position: relative; padding-left: 86px; }
  .frachttabelle.kk td.fahrzeug > strong::before { content: attr(data-k); position: absolute; left: 0; top: 0; width: 82px; color: var(--leise); font-size: .76rem; font-weight: 400; line-height: 1.65; }
  .frachttabelle.kk td.preis { order: 4; }
  .frachttabelle.kk td.fahrzeug > .kk-klapp { order: 5; flex: 1 1 100%; display: block; position: relative; width: 100%; margin: 4px 0 0; padding: 7px 26px 2px 86px; border: 0; border-top: 1px solid #e3e8ea; background: none; text-align: left; font: inherit; font-size: .84rem; color: var(--leise); cursor: pointer; border-radius: 0; box-shadow: none; min-height: 0; }
  .frachttabelle.kk td.fahrzeug > .kk-klapp::before { content: attr(data-k); position: absolute; left: 0; top: 7px; width: 82px; font-size: .76rem; line-height: 1.65; color: var(--leise); }
  .frachttabelle.kk td.fahrzeug > .kk-klapp::after { content: '▾'; position: absolute; right: 2px; top: 6px; font-size: .9rem; transition: transform .2s; }
  .frachttabelle.kk tr.kk-auf td.fahrzeug > .kk-klapp::after { transform: rotate(180deg); }
  .frachttabelle.kk tr.kk-auf td.fahrzeug > .kk-klapp .kk-kurz { display: none; }
  .frachttabelle.kk tr.kk-auf td.fahrzeug > .kk-klapp { min-height: 0; padding-bottom: 0; }
  .frachttabelle.kk .kk-lh-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%; background: #c62828; color: #fff; font-weight: 700; font-size: .75rem; vertical-align: 1px; }
  .frachttabelle.kk tr.kk-auf .kk-lh-mark { display: none; }
  /* Inhalt des Klapp-Blocks */
  .frachttabelle.kk td.fahrzeug > small, .frachttabelle.kk td.fahrzeug > .angebot-zeilen { order: 6; flex: 1 1 100%; display: none !important; padding-left: 86px; margin: 0; }
  .frachttabelle.kk tr.kk-auf td.fahrzeug > small { display: block !important; }
  .frachttabelle.kk tr.kk-auf td.fahrzeug > small:empty { display: none !important; }
  .frachttabelle.kk tr.kk-auf td.fahrzeug > .angebot-zeilen { display: flex !important; flex-direction: column; }
  .frachttabelle.kk td.fahrzeug > small::before, .frachttabelle.kk td.fahrzeug > .angebot-zeilen b + b::before { content: none !important; }
  .frachttabelle.kk td.fahrzeug .kk-sep { display: none; }
  .frachttabelle.kk td.fahrzeug .kk-z { display: block; }
  .frachttabelle.kk td.firma { order: 7; display: none; }
  .frachttabelle.kk tr.kk-auf td.firma { display: block; }
  .frachttabelle.kk tr.kk-auf td.firma::before { position: static; display: block; width: auto; margin: 6px 0 2px; padding-top: 6px; border-top: 1px dashed #d5dde0; }
  .frachttabelle.kk tr.kk-auf td.firma > small { display: block; }
  .frachttabelle.kk tr.kk-auf td.firma > small::before { content: none; }
  .frachttabelle.kk td.firma > .kk-lh { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d5dde0; }
  .frachttabelle.kk td.firma > .kk-lh::before { content: none; }
}

/* 3.02: Grund-Knöpfe + Textfeld (Ablehnen, Fracht zurücknehmen) – „Sonstiger Grund“ und Feld sichtbar zusammengehörig (Sascha 09.11., Variante A) */
details.grund-wahl .gt-feld { display: flex; flex-direction: column; gap: 4px; }
details.grund-wahl .gt-titel { font-size: .82rem; color: var(--leise); }
details.grund-wahl.gt-sonst .gt-feld { border: 2px solid var(--rot); border-radius: 10px; background: var(--weiss); padding: 8px 10px; }
details.grund-wahl.gt-sonst .gt-titel { color: var(--rot); font-weight: 700; }
details.grund-wahl.gt-sonst .gt-feld input { border-color: var(--rot); }
details.grund-wahl.gt-sonst .grund-knoepfe .wahl-knopf input[value=sonst]:checked + span { background: var(--rot); color: var(--weiss); border-color: var(--rot); }