/* Logether Touren-Portal - Farben laut Bauanweisung (BeamMyCar-Farben) */
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; }
.logo i { width: 32px; height: 32px; border-radius: 9px; display: inline-block;
  background: linear-gradient(135deg, #1FAE8C 0%, #1C8CA8 55%, #5B4FCF 100%); }
.btn { border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; }
.btn.klein { padding: 4px 10px; font-size: 13px; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.meldung { border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.leer { opacity: .7; padding: 18px 0; }
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rechts { margin-left: auto; }
.mono { font-variant-numeric: tabular-nums; }
.klein-text { font-size: 13px; opacity: .8; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
  border-radius: 8px; padding: 8px 10px; border: 1px solid; min-width: 0; }

/* ===================== Dispo (hell) ===================== */
body.dispo { background: #F5F7F8; color: #1B2B33; }
.dispo header { background: #fff; border-bottom: 1px solid #E2E8EB; }
.dispo header .wrap { display: flex; align-items: center; gap: 22px; padding: 12px 16px; }
.dispo nav a { text-decoration: none; padding: 6px 10px; border-radius: 6px; color: #42545C; font-weight: 600; }
.dispo nav a.aktiv, .dispo nav a:hover { background: #E6F2F4; color: #0B7285; }
.dispo .btn { background: #0B7285; color: #fff; }
.dispo .btn:hover { background: #095E6E; }
.dispo .btn.zweit { background: #E6F2F4; color: #0B7285; }
.dispo .btn.zweit:hover { background: #D3E9ED; }
.dispo .btn.warn { background: #fff; color: #B42318; border: 1px solid #F1C0BA; }
.dispo .btn.ok { background: #15803D; }
.dispo input, .dispo select, .dispo textarea { border-color: #CBD5DA; background: #fff; color: inherit; }
.dispo .karte { background: #fff; border: 1px solid #E2E8EB; border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.dispo h2 { font-size: 17px; margin: 22px 0 6px; }
.dispo h2 .badge { background: #E6F2F4; color: #0B7285; }
.dispo table { width: 100%; border-collapse: collapse; }
.dispo th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #6B7C84; padding: 6px 8px; border-bottom: 1px solid #E2E8EB; }
.dispo td { padding: 7px 8px; border-bottom: 1px solid #EEF2F4; vertical-align: top; }
.dispo tr.anfrage td { background: #FDF1F7; }
.badge.anfrage { background: #FDF1F7; color: #A71D66; border: 1px solid #F3C6DD; }
.badge.kombi { background: #EEEBFB; color: #5B4FCF; }
.badge.festpreis { background: #FFF4DB; color: #8A5A00; }
.badge.einzel { background: #E6F2F4; color: #0B7285; }
.badge.grau { background: #EEF2F4; color: #42545C; }
.badge.rot { background: #FDECEA; color: #B42318; }
.badge.gruen { background: #E7F6EC; color: #15803D; }
.marge-plus { color: #15803D; font-weight: 700; }
.marge-minus { color: #B42318; font-weight: 700; }
.dispo .meldung.ok { background: #E7F6EC; color: #14532D; }
.dispo .meldung.err { background: #FDECEA; color: #7A1A12; }
.dispo .status { font-size: 13px; color: #6B7C84; }
.freigabe { position: sticky; bottom: 0; background: #fff; border-top: 2px solid #0B7285; box-shadow: 0 -6px 18px rgba(0,0,0,.06); padding: 12px 16px; margin: 0 -16px; }
.freigabe fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.freigabe .hinweis { color: #A71D66; font-size: 13px; }
.gebot-zeile { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px dashed #E2E8EB; }
.gebot-zeile:first-child { border-top: 0; }
.route { font-weight: 600; }
.teil { padding: 2px 0; }
details summary { cursor: pointer; font-weight: 600; }

/* ===================== Fahrer (dunkel) ===================== */
body.fahrer { background: #0B455B; color: #E6F4F6; }
.fahrer header { background: #083548; }
.fahrer header .wrap { display: flex; align-items: center; gap: 12px; padding: 12px 16px; max-width: 720px; }
.fahrer .wrap { max-width: 720px; }
.fahrer .btn { background: #10A3AE; color: #04222D; }
.fahrer .btn:hover { filter: brightness(1.08); }
.fahrer .btn.zweit { background: transparent; color: #CDE9EC; border: 1px solid rgba(255,255,255,.25); }
.fahrer .btn.ablehnen { background: rgba(220,38,38,.16); color: #FCA5A5; }
.fahrer input, .fahrer select { background: #083548; border-color: rgba(255,255,255,.2); color: #E6F4F6; }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin: 6px 0 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.tabs a { padding: 10px 12px; text-decoration: none; color: #A9CDD3; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.aktiv { color: #4FD1C8; border-bottom-color: #4FD1C8; }
.tabs .zahl { background: rgba(79,209,200,.18); color: #4FD1C8; border-radius: 999px; padding: 0 7px; font-size: 12px; margin-left: 4px; }
.fahrer .karte { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.fahrer .karte.neu { border-color: rgba(74,222,128,.55); }
.badge.neu { background: rgba(33,197,94,.16); color: #4ADE80; }
.fahrer .badge.anfrage { background: rgba(167,29,102,.22); color: #F9A8D4; border: 0; }
.fahrer .badge.kombi { background: rgba(91,79,207,.3); color: #C7C2FF; }
.fahrer .badge.einzel { background: rgba(79,209,200,.16); color: #4FD1C8; }
.fahrer .badge.grau { background: rgba(255,255,255,.1); color: #CDE9EC; }
.fahrer .badge.rot { background: rgba(220,38,38,.16); color: #FCA5A5; }
.fahrer .badge.gruen { background: rgba(33,197,94,.16); color: #4ADE80; }
.sicherheit { background: rgba(227,181,5,.13); color: #F3D878; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 10px 0; }
.fahrer .meldung.ok { background: rgba(33,197,94,.16); color: #4ADE80; }
.fahrer .meldung.err { background: rgba(220,38,38,.16); color: #FCA5A5; }
.fahrer .info { color: #A9CDD3; font-size: 14px; }
.preis { font-size: 22px; font-weight: 800; color: #4FD1C8; }
.gebot-form { display: flex; gap: 8px; margin-top: 10px; }
.gebot-form input { width: 140px; }
.login-box { max-width: 400px; margin: 8vh auto; background: #083548; border-radius: 16px; padding: 26px; }
.login-box h1 { font-size: 20px; margin: 14px 0; }
.login-box label { display: block; margin: 10px 0 4px; font-size: 14px; color: #A9CDD3; }
.login-box input { width: 100%; }
.login-box .btn { width: 100%; margin-top: 14px; padding: 11px; }
.trenner { text-align: center; color: #A9CDD3; margin: 18px 0 4px; font-size: 13px; }
@media (max-width: 600px) { .wrap { padding: 12px; } .gebot-form input { width: 110px; } }