/* Das Taxi in Bonn – Design Tokens (white-label: nur diese Variablen tauschen) */
:root{
  --c-bg:#111214; --c-surface:#1C1E22; --c-surface-2:#26292E; --c-border:#34383F; --c-border-strong:#6B717B;
  --c-text:#F5F5F2; --c-muted:#A8ADB5; --c-accent:#FFC20E; --c-accent-hover:#FFD54A;
  --c-on-accent:#111214; --c-success:#3DDC84; --c-danger:#FF6B6B; --c-focus:#FFD54A;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-h1:clamp(2.25rem,7vw + .5rem,4rem); --fs-h2:clamp(1.5rem,3vw + .5rem,2.25rem);
  --fs-h3:1.125rem; --fs-body:1rem; --fs-small:.875rem; --fs-price:2.5rem;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --tap:48px; --shadow:0 8px 32px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font);font-size:var(--fs-body);line-height:1.5}
h1,h2,h3{line-height:1.1;margin:0;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:56px;padding:0 var(--s-5);border-radius:var(--r-md);font:700 1.0625rem/1 var(--font);text-decoration:none;border:0;cursor:pointer;width:100%}
.btn-primary{background:var(--c-accent);color:var(--c-on-accent)}
.btn-primary:hover{background:var(--c-accent-hover)}
.btn-secondary{background:transparent;color:var(--c-text);border:2px solid var(--c-accent)}
.btn-ghost{background:var(--c-surface-2);color:var(--c-text)}
.field{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);padding:0 var(--s-4);background:var(--c-surface-2);border:1px solid var(--c-border-strong);border-radius:var(--r-sm);color:var(--c-text)}
.field input,.field select{flex:1;min-width:0;background:transparent;border:0;color:inherit;font:inherit;font-size:1rem;outline:none;padding:12px 0}
.field input::placeholder{color:var(--c-muted)}
.label{display:block;font-size:var(--fs-small);font-weight:600;color:var(--c-muted);margin:0 0 var(--s-2)}
.seg{display:flex;flex-wrap:wrap;gap:var(--s-1);padding:4px;background:var(--c-surface-2);border-radius:var(--r-sm);border:1px solid var(--c-border)}
.seg button{flex:1;min-height:40px;border:0;border-radius:6px;background:transparent;color:var(--c-muted);font:600 .9375rem var(--font)}
.seg button[aria-pressed=true]{background:var(--c-accent);color:var(--c-on-accent)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--c-border);background:var(--c-surface-2);color:var(--c-text);font:500 .875rem var(--font)}
.chip[aria-pressed=true]{border-color:var(--c-accent);color:var(--c-accent)}
.muted{color:var(--c-muted)}
.price-box{background:var(--c-bg);border:1px solid var(--c-accent);border-radius:var(--r-md);padding:var(--s-4)}
.price{font-size:var(--fs-price);font-weight:800;color:var(--c-accent);letter-spacing:-.03em;line-height:1}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-success)}
.checker{height:8px;background:repeating-linear-gradient(90deg,var(--c-accent) 0 8px,var(--c-bg) 8px 16px)}
