/* Fahrer-App (Handy) – „Kabine bei Nacht“: dunkel, große Ziffern, Signalfarben wie an der Rampe */
html, body { height: 100%; }
html { background: var(--asphalt); }
body.fahrer { background: var(--asphalt); overscroll-behavior-y: none; }
.f-app {
  min-height: 100%; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto;
  background: var(--asphalt); color: #EEF1F4;
  --muted: #A3AFBD; --line: #243241; --line-2: #1C2733; --surface: #121C27; --soft: #17222E; --field: #3A4858;
}
.f-app a { color: #EEF1F4; }
.f-app .leise { color: var(--muted); }
.f-app .ueber { color: var(--amber); }
.f-app h1 { font-size: 30px; }

/* Knöpfe auf dunklem Grund */
.f-app .knopf { background: var(--surface); color: #EEF1F4; border-color: #3A4858; }
.f-app .knopf:hover { background: var(--soft); color: #fff; }
.f-app .knopf.haupt { background: var(--amber); border-color: var(--amber); color: var(--ink); box-shadow: 0 6px 24px rgba(242, 169, 0, .25), inset 0 -3px 0 rgba(0, 0, 0, .15); }
.f-app .knopf.haupt:hover { background: #FFB81F; color: var(--ink); }
.f-app .knopf.dunkel { background: #EEF1F4; border-color: #EEF1F4; color: var(--ink); }
.f-app .knopf.still { background: transparent; border-color: transparent; color: var(--muted); }
.f-app .knopf.still:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.f-app .knopf.gross { min-height: 64px; font-size: 19px; border-radius: 16px; }
.f-app .knopf.haupt.gross:active { transform: translateY(2px) scale(.99); box-shadow: 0 2px 10px rgba(242, 169, 0, .2); }
.f-app input, .f-app select, .f-app textarea { background: #0E1620; color: #EEF1F4; border-color: #3A4858; }
.f-app label { color: #EEF1F4; }
.f-app .etikett { background: #1C2733; color: #D3D9E2; }
.f-app .etikett.amber { background: rgba(242, 169, 0, .16); color: #FFC845; }
.f-app .etikett.gruen { background: rgba(59, 224, 127, .14); color: #6BEA9F; }
.f-app .etikett.dunkel { background: #05080C; color: #D3D9E2; }
.f-app .fehler { color: #FF8A6B; }
.f-app .banner.warn { background: rgba(242, 169, 0, .14); color: #FFC845; }
.f-app .banner.rot { background: rgba(255, 74, 58, .14); color: #FF8A7D; }
.f-app .laden { color: var(--muted); }
.f-app .laden::before { border-color: #243241; border-top-color: var(--amber); }

/* Kopf */
.f-kopf { background: rgba(11, 18, 25, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #1B2633; color: var(--on-ink); padding: calc(12px + env(safe-area-inset-top)) 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; z-index: 20; }
.f-kopf .wer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.f-kopf .wer > div { display: flex; flex-direction: column; min-width: 0; }
.f-kopf .wer b { font-size: 17px; font-weight: 800; }
.f-kopf .wer span { font-size: 12px; color: var(--on-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-kopf-rechts { display: flex; align-items: center; gap: 6px; flex: none; }
.f-ton { width: 40px; height: 40px; border-radius: 99px; border: 1px solid #2A3542; background: transparent; color: var(--on-ink-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.f-ton[aria-pressed="true"] { color: var(--amber); border-color: rgba(242, 169, 0, .4); }
.f-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 99px; background: #1C2733; color: var(--on-ink); border: 1px solid #2A3542; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; font-family: var(--mono); }
.f-chip.warn { background: var(--amber); border-color: var(--amber); color: var(--ink); font-family: var(--font); }

.f-inhalt { flex: 1; padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.f-titel { display: flex; flex-direction: column; gap: 6px; }
.f-hinweis { font-size: 13px; color: var(--muted); text-align: center; }

/* Tour */
.f-stopp { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.f-stopp.naechster { border-color: rgba(242, 169, 0, .55); background: linear-gradient(180deg, rgba(242, 169, 0, .08), transparent 60%), var(--surface); }
.f-stopp.naechster::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber); box-shadow: 0 0 14px rgba(242, 169, 0, .6); }
.f-stopp.erledigt { opacity: .6; }
.f-stopp .oben { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.f-stopp .fenster { font-family: var(--mono); font-weight: 700; font-size: 15px; color: #FFC845; }
.f-stopp b { font-size: 19px; font-stretch: 110%; font-weight: 800; }
.f-stopp .adr { font-size: 14px; color: var(--muted); }
.f-stopp .notiz { font-size: 14px; background: rgba(242, 169, 0, .12); color: #FFC845; border-radius: 10px; padding: 8px 10px; }
.f-stopp .knopf { margin-top: 8px; }

/* Wartezeit-Uhr */
.f-uhr { background: linear-gradient(180deg, #131E2A, #0E1620); border: 1px solid #1E2A37; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: border-color .4s, box-shadow .4s; }
.f-uhr::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 50% at 50% 30%, rgba(255, 176, 0, .10), transparent 70%); transition: background .4s; }
.f-uhr.ueber { border-color: rgba(255, 74, 58, .5); box-shadow: 0 0 50px rgba(255, 74, 58, .12); }
.f-uhr.ueber::after { background: radial-gradient(80% 50% at 50% 30%, rgba(255, 74, 58, .14), transparent 70%); }
.f-uhr .kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; position: relative; z-index: 1; }
.f-led { padding: 14px 16px; border-radius: 14px; position: relative; z-index: 1; }
.f-uhr .sub { font-size: 13px; color: var(--on-ink-muted); position: relative; z-index: 1; }
.f-uhr > div { position: relative; z-index: 1; }
.f-uhr .geld { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 1px dashed #2A3542; padding-top: 12px; }
.f-uhr .geld b { font-family: var(--mono); font-size: 28px; white-space: nowrap; }
.f-uhr .geld span { color: var(--on-ink-muted); font-size: 14px; }
.f-uhr .geld span.an { color: var(--led-rot); font-weight: 700; }
.f-uhr.ueber .geld b { color: var(--led-rot); text-shadow: 0 0 18px rgba(255, 74, 58, .45); }
.f-uhr .balken { height: 10px; border-radius: 99px; background: #05080C; overflow: hidden; }
.f-uhr .balken i { display: block; height: 100%; border-radius: 99px; background: var(--led-gelb); box-shadow: 0 0 12px var(--led-gelb); transition: width .5s linear, background .4s; }
.f-uhr.ueber .balken i { background: var(--led-rot); box-shadow: 0 0 12px var(--led-rot); }
.f-uhr .balken-text { display: flex; justify-content: space-between; font-size: 12px; color: var(--on-ink-muted); margin-bottom: 6px; }
/* Ampel: oben Gelb (wartet), unten Rot (Standgeld) */
.f-signal { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; background: #05080C; }
.f-signal i { width: 10px; height: 10px; border-radius: 99px; background: #2B2310; }
.f-signal i:first-child { background: var(--led-gelb); box-shadow: 0 0 10px var(--led-gelb); animation: puls 1.4s ease-in-out infinite; }
.f-signal i:last-child { background: #2A1714; }
.f-signal.rot i:first-child { background: #2B2310; box-shadow: none; animation: none; }
.f-signal.rot i:last-child { background: var(--led-rot); box-shadow: 0 0 10px var(--led-rot); animation: puls 1.1s ease-in-out infinite; }

.f-karte { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.f-karte h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.f-check { display: flex; gap: 10px; align-items: flex-start; }
.f-check svg { flex: none; margin-top: 1px; }
.f-check div { display: flex; flex-direction: column; }
.f-check b { font-size: 15px; }
.f-check span { font-size: 13px; color: var(--muted); }
.f-check.ok svg { color: var(--led-gruen); filter: drop-shadow(0 0 6px rgba(59, 224, 127, .5)); }
.f-check.warn svg { color: var(--amber); }
.f-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.f-fotos .f-foto { aspect-ratio: 1; border-radius: 12px; background: #1C2733 center / cover no-repeat; position: relative; overflow: hidden; animation: foto-rein .45s cubic-bezier(.2, .8, .2, 1.2) both; }
.f-fotos .f-foto:not(:last-child) { animation: none; }
@keyframes foto-rein { from { transform: scale(.6) rotate(-4deg); opacity: 0 } to { transform: none; opacity: 1 } }
.f-fotos .f-foto span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(5, 8, 12, .75); color: #fff; font-size: 11px; padding: 3px 6px; font-family: var(--mono); }
.f-fotos .f-foto.wartet::after { content: 'wartet auf Netz'; position: absolute; top: 4px; left: 4px; font-size: 10px; background: var(--amber); color: var(--ink); padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.f-blitz { position: fixed; inset: 0; background: #fff; z-index: 300; pointer-events: none; animation: blitz .42s ease-out both; }
@keyframes blitz { from { opacity: .85 } to { opacity: 0 } }
.f-zeilen { display: flex; flex-direction: column; }
.f-zeilen > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.f-zeilen > div:last-child { border-bottom: 0; }
.f-zeilen span:first-child { color: var(--muted); }
.f-zeilen .mono { font-weight: 700; }

/* Unterschrift: bleibt weiß wie Papier */
.f-pad { position: relative; border: 2px dashed #B9B3A7; border-radius: 14px; background: #fff; height: 170px; touch-action: none; overflow: hidden; }
.f-pad canvas { width: 100%; height: 100%; display: block; }
.f-pad .leer-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5A6472; font-weight: 600; pointer-events: none; }
.f-pad .linie { position: absolute; left: 20px; right: 20px; bottom: 36px; border-bottom: 1px solid #DAD6CE; pointer-events: none; }
.f-pad button { position: absolute; top: 6px; right: 6px; }
.f-app .f-pad .knopf.still { color: #5A6472; }
.f-verweigert { background: rgba(255, 74, 58, .14); color: #FF8A7D; border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 14px; }

/* Fertig: Durchschlag mit Stempel */
.f-beleg { position: relative; margin: 8px 6px 4px; }
.f-durchschlag { position: absolute; inset: 0; background: #F2D3DB; border-radius: 6px; transform: rotate(-2.4deg) translate(-4px, 6px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.f-papier { position: relative; background: #FCFBF8; color: var(--ink); border-radius: 6px; padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); overflow: hidden; }
.f-papier::before { content: ''; position: absolute; inset: 0; background: var(--rauschen, none); opacity: .05; pointer-events: none; }
.f-papier-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #4A5A73; border-bottom: 1px solid #DAD6CE; padding-bottom: 10px; }
.f-papier-kopf > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.f-ort { font-size: 20px; font-stretch: 112%; font-weight: 820; line-height: 1.1; }
.f-papier-zeilen { display: flex; flex-direction: column; }
.f-papier-zeilen > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #DAD6CE; font-size: 15px; }
.f-papier-zeilen > div span { color: #5A6472; }
.f-papier-zeilen .summe { border-bottom: 0; padding-top: 10px; }
.f-papier-zeilen .summe b { font-size: 26px; }
.f-stempel { position: absolute; left: 30%; bottom: 52px; transform: rotate(-11deg); border: 3px solid #C8261B; color: #C8261B; border-radius: 8px; padding: 4px 12px 6px; display: flex; flex-direction: column; align-items: center; opacity: .88; mix-blend-mode: multiply; }
.f-stempel span { font-size: 24px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.f-stempel small { font-family: var(--mono); font-size: 10px; font-weight: 700; }
.f-beleg.frisch .f-papier { animation: papier-rein .55s cubic-bezier(.2, .8, .2, 1) both; }
.f-beleg.frisch .f-durchschlag { animation: papier-rein .55s .08s cubic-bezier(.2, .8, .2, 1) both; }
.f-beleg.frisch .f-stempel { animation: stempel .38s .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes papier-rein { from { transform: translateY(40px) rotate(3deg); opacity: 0 } }
@keyframes stempel { 0% { transform: rotate(-11deg) scale(2.6); opacity: 0 } 60% { opacity: .95 } 100% { transform: rotate(-11deg) scale(1); opacity: .88 } }

/* Netz-Hinweis, Start */
.f-netz { background: var(--amber); color: var(--ink); font-weight: 700; font-size: 13px; padding: 8px 16px; display: flex; align-items: center; gap: 8px; justify-content: center; }
.f-start { min-height: 100vh; background: radial-gradient(120% 60% at 50% 0%, #1A2430, var(--asphalt) 65%); color: var(--on-ink); display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 32px 22px; max-width: 560px; margin: 0 auto; }
.f-start h1 { font-size: 36px; font-stretch: 120%; line-height: 1; }
.f-start p { color: var(--on-ink-muted); font-size: 17px; }
.f-start input { background: #fff; text-transform: uppercase; font-family: var(--mono); letter-spacing: .05em; }
.f-start .fehler { color: var(--coral); }
.f-start .marke { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; }
.f-start-led { border: 5px solid #2A3542; border-radius: 14px; padding: 12px 14px; }
.f-liste-wahl { display: flex; flex-direction: column; gap: 8px; }
.f-liste-wahl button { min-height: 56px; text-align: left; justify-content: flex-start; }
.f-tipp { background: rgba(29, 78, 158, .22); color: #BFD3F5; border: 1px solid rgba(110, 150, 220, .3); border-radius: 14px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.f-tipp b { display: block; color: #fff; }
.f-tipp button { margin-left: auto; flex: none; }

.f-app .knopf.gross { white-space: normal; text-align: center; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; }
label.knopf { flex-direction: row; font-size: 15px; }