:root {
  --red: #e52535;
  --red-dark: #b80f25;
  --blue: #1769e0;
  --blue-dark: #0a45a6;
  --ink: #111827;
  --ink-soft: #354052;
  --muted: #667085;
  --line: #dfe4ec;
  --surface: rgba(255, 255, 255, .96);
  --shadow: 0 24px 70px rgba(16, 24, 40, .14);
  --radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f4f6fa;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: linear-gradient(90deg, #fff6f7 0 49.95%, #f3f7ff 50.05% 100%); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -3; background: linear-gradient(120deg, transparent 44%, rgba(17, 24, 39, .035) 44.2%, transparent 44.5%); }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient { position: fixed; width: 44vw; height: 44vw; border-radius: 50%; filter: blur(100px); opacity: .1; pointer-events: none; z-index: -2; }
.ambient-red { background: var(--red); top: -25vw; left: -15vw; }
.ambient-blue { background: var(--blue); right: -18vw; bottom: -28vw; }

.site-header { width: min(1440px, calc(100% - 48px)); min-height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; text-decoration: none; }
.brand-mark { position: relative; width: 190px; aspect-ratio: 3.06 / 1; overflow: hidden; }
.brand-mark img { position: absolute; width: 133.22%; max-width: none; height: auto; left: -17.35%; top: -82.23%; transform: none; }
.main-nav { display: flex; align-items: center; gap: 8px; }
.main-nav > a, .nav-button { border: 0; background: transparent; text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 750; padding: 11px 14px; border-radius: 12px; cursor: pointer; transition: .2s ease; }
.main-nav > a:hover, .nav-button:hover { background: #fff; color: var(--blue); box-shadow: 0 8px 20px rgba(16, 24, 40, .08); }
.inline-form { display: inline; }
.user-chip { background: #121a2f; color: #fff; border-radius: 999px; padding: 10px 15px; font-size: 12px; font-weight: 800; }
.demo-chip { padding: 7px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,var(--red),var(--blue)); font-size: 9px; font-weight: 950; letter-spacing: .13em; }

.page-shell { width: min(1360px, calc(100% - 48px)); min-height: calc(100vh - 180px); margin: 25px auto 64px; }
.demo-banner { margin: 0 0 18px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid #d8deee; border-radius: 16px; color: #17213a; background: linear-gradient(100deg,#fff0f2,#edf4ff); box-shadow: 0 10px 30px rgba(16,24,40,.08); }
.demo-banner strong { flex: 0 0 auto; padding: 6px 9px; border-radius: 8px; color: #fff; background: #121a2f; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.demo-banner span { font-size: 12px; font-weight: 700; line-height: 1.5; }
.site-footer { width: min(1360px, calc(100% - 48px)); min-height: 64px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(16, 24, 40, .1); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.panel { background: var(--surface); border: 1px solid rgba(255, 255, 255, .82); border-radius: var(--radius); box-shadow: var(--shadow); }
.split-card { position: relative; overflow: hidden; border-radius: 34px; min-height: 620px; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 35px 100px rgba(15, 23, 42, .17); }
.split-card::before { content: ""; position: absolute; inset: 0 50% 0 0; background: linear-gradient(145deg, #fff 0%, #fff7f8 100%); }
.split-card::after { content: ""; position: absolute; inset: 0 0 0 50%; background: radial-gradient(circle at 55% 40%, rgba(52, 131, 255, .38), transparent 28%), linear-gradient(145deg, #082d72, #1769e0 56%, #093a92); }
.hero-copy, .hero-visual { position: relative; z-index: 1; }
.hero-copy { padding: 100px 9%; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { color: var(--ink-soft); display: inline-flex; align-items: center; font-size: 11px; font-weight: 900; letter-spacing: .19em; }
.eyebrow.center { justify-content: center; }
.hero h1, .page-heading h1, .auth-intro h1, .request-sidebar h1, .state-card h1 { letter-spacing: -.055em; line-height: .98; margin: 25px 0; }
.hero h1 { font-size: clamp(48px, 5.2vw, 82px); }
.hero h1 span, .auth-intro h1 span { color: var(--red); }
.hero-copy > p { color: var(--muted); font-size: 18px; line-height: 1.7; max-width: 560px; }
.button-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 25px; }
.button { min-height: 48px; border: 0; border-radius: 14px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; font-size: 13px; font-weight: 850; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(115deg, var(--red) 0 49.5%, var(--blue) 50.5% 100%); box-shadow: 0 12px 28px rgba(31, 80, 176, .24); }
.button-secondary { color: #fff; background: #121a2f; box-shadow: 0 10px 20px rgba(16, 24, 40, .18); }
.button-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.button-full { width: 100%; }
.trust-line { color: var(--muted); font-size: 12px; font-weight: 800; }
.hero-visual { display: grid; place-items: center; overflow: hidden; background: #eaf0f8; }
.hero-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,45,114,.3), rgba(23,105,224,.06) 34%, rgba(8,45,114,.18)), linear-gradient(180deg, rgba(255,255,255,.02), rgba(3,24,62,.28)); pointer-events: none; }
.hero-product-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; filter: saturate(1.06) contrast(1.03); }
.process-card { position: absolute; z-index: 2; min-width: 160px; padding: 15px 17px; border-radius: 17px; background: rgba(255,255,255,.93); backdrop-filter: blur(9px); display: flex; align-items: center; gap: 12px; box-shadow: 0 18px 40px rgba(4, 21, 56, .24); }
.process-card b { color: var(--red); font-size: 12px; }
.process-card span { font-size: 12px; font-weight: 800; }
.process-one { top: 19%; left: 10%; }.process-two { top: 19%; right: 5%; }.process-three { bottom: 16%; left: 8%; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.feature-card { position: relative; background: rgba(255,255,255,.86); border: 1px solid #fff; padding: 30px; border-radius: 22px; box-shadow: 0 16px 45px rgba(16,24,40,.08); overflow: hidden; }
.feature-card::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; }.red-edge::after { background: var(--red); }.blue-edge::after { background: var(--blue); }
.feature-icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: #f4f6fa; color: var(--blue); font-size: 22px; font-weight: 900; }
.feature-card h2 { font-size: 18px; margin: 20px 0 8px; }.feature-card p { color: var(--muted); line-height: 1.65; margin: 0; font-size: 14px; }

.flash-stack { position: fixed; top: 106px; right: 24px; z-index: 20; width: min(390px, calc(100% - 48px)); display: grid; gap: 10px; }
.flash { background: #fff; padding: 15px 18px; border-radius: 14px; border-left: 5px solid var(--blue); box-shadow: 0 18px 50px rgba(15,23,42,.2); font-size: 13px; font-weight: 700; }
.flash-error { border-color: var(--red); }.flash-success { border-color: #159455; }

.auth-layout { min-height: 670px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 8vw; padding: 3vw 7vw; border-radius: 34px; background: linear-gradient(110deg, #09152e 0 49.8%, #f8fafc 50.2% 100%); box-shadow: var(--shadow); overflow: hidden; }
.auth-intro { color: #fff; }.auth-intro .eyebrow { color: #b9c7e6; }.auth-intro h1 { font-size: clamp(48px, 6vw, 86px); }.auth-intro p { color: #aebbd6; font-size: 17px; }
.auth-card { padding: 42px; display: grid; gap: 20px; max-width: 500px; width: 100%; }
.auth-panel-stack { width: 100%; max-width: 540px; display: grid; gap: 16px; }
.demo-access { padding: 26px; display: grid; gap: 17px; }
.demo-access h2 { margin: 5px 0 4px; font-size: 22px; letter-spacing: -.03em; }
.demo-access > div > p { margin: 0; color: var(--muted); font-size: 12px; }
.demo-login-grid { display: grid; gap: 10px; }
.demo-login-button { width: 100%; min-height: 66px; padding: 10px 12px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; transition: .2s ease; }
.demo-login-button:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 12px 28px rgba(16,24,40,.12); }
.demo-login-button > span:nth-child(2) { display: grid; gap: 4px; }
.demo-login-button strong { font-size: 13px; }
.demo-login-button small { color: var(--muted); font-size: 10px; }
.demo-login-button b { color: var(--blue); font-size: 19px; }
.demo-login-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-size: 13px; font-weight: 950; }
.demo-login-customer .demo-login-icon { background: var(--blue); }
.demo-login-dealer .demo-login-icon { background: var(--red); }
.demo-privacy-note { margin: 0; padding: 11px 12px; border-radius: 11px; color: #72510d; background: #fff8e5; font-size: 10px; line-height: 1.5; }
.demo-form-note { padding: 14px 16px; display: grid; gap: 4px; border: 1px solid #d8deee; border-radius: 14px; background: linear-gradient(100deg,#fff0f2,#edf4ff); }
.demo-form-note strong { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.demo-form-note span { color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.panel-heading { margin-bottom: 6px; }.panel-heading h2 { margin: 5px 0; font-size: 32px; letter-spacing: -.04em; }.panel-heading p { margin: 8px 0; color: var(--muted); }
.panel-kicker { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
label { display: grid; gap: 8px; font-size: 12px; color: var(--ink-soft); font-weight: 800; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; color: var(--ink); background: #f9fafc; outline: none; transition: .2s ease; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(23,105,224,.11); background: #fff; }
textarea { resize: vertical; line-height: 1.55; }
.form-note { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 0; }

.narrow-wrap { max-width: 850px; margin: 40px auto; }.form-grid { padding: 36px; display: grid; gap: 18px; }
.account-password { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.account-password span { display: grid; gap: 4px; }.account-password small { color: var(--muted); font-weight: 600; }

.page-heading { margin: 35px 0 30px; }.page-heading h1 { font-size: clamp(42px, 6vw, 70px); margin-bottom: 12px; }.page-heading p { color: var(--muted); margin: 0; font-size: 15px; }
.heading-row { display: flex; justify-content: space-between; align-items: end; gap: 25px; }
.request-layout { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 750px; border-radius: 32px; overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.request-sidebar { position: relative; overflow: hidden; padding: 65px 12%; color: #fff; background: radial-gradient(circle at 10% 10%, rgba(229,37,53,.55), transparent 30%), linear-gradient(150deg, #0a1935, #0d3c8a); }
.request-sidebar::after { content: ""; position: absolute; width: 330px; height: 330px; border: 70px solid rgba(255,255,255,.055); border-radius: 50%; right: -190px; bottom: -150px; }
.request-sidebar .eyebrow { color: #d8e2f5; }.request-sidebar h1 { font-size: clamp(42px, 4.6vw, 67px); }.request-sidebar > p { color: #bdc9df; line-height: 1.7; font-size: 15px; }
.step-list { list-style: none; padding: 0; margin: 60px 0 0; display: grid; gap: 12px; }.step-list li { display: flex; align-items: center; gap: 15px; color: #8899ba; padding: 10px; }.step-list b { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #6d7f9e; display: grid; place-items: center; font-size: 12px; }.step-list span { display: grid; gap: 3px; }.step-list strong { font-size: 13px; }.step-list small { font-size: 10px; }.step-list .active { color: #fff; }.step-list .active b { border-color: transparent; background: linear-gradient(135deg, var(--red), var(--blue)); }
.request-form { border-radius: 0; box-shadow: none; border: 0; padding: 55px 8%; display: grid; gap: 24px; }
fieldset { border: 0; padding: 0; margin: 0; } legend { font-size: 12px; color: var(--ink-soft); font-weight: 800; margin-bottom: 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.choice-card { position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 15px; padding: 12px; cursor: pointer; transition: .18s ease; }.choice-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(16,24,40,.09); }.choice-card input { position: absolute; opacity: 0; pointer-events: none; }.choice-card:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,224,.1); }.choice-card > span:last-child { display: grid; gap: 3px; }.choice-card small { color: var(--muted); font-weight: 600; font-size: 9px; }
.choice-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 16px; }.choice-icon.red { background: var(--red); }.choice-icon.blue { background: var(--blue); }.choice-icon.mix { background: linear-gradient(135deg, var(--red) 48%, var(--blue) 52%); }
.upload-zone { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 15px; min-height: 105px; border: 1.5px dashed #b9c1cd; border-radius: 16px; padding: 18px; cursor: pointer; background: #fafbfc; overflow: hidden; }.upload-zone:hover { border-color: var(--blue); background: #f5f8ff; }.upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.upload-zone > span:nth-of-type(2) { display: grid; gap: 5px; }.upload-zone small { color: var(--muted); font-weight: 600; }.upload-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--blue); background: #eaf1ff; font-size: 24px; }.upload-zone img { grid-column: 1 / -1; width: 100%; max-height: 260px; object-fit: contain; border-radius: 12px; background: #edf0f5; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.optional { color: var(--muted); font-weight: 500; }.check-line { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 10px; line-height: 1.5; cursor: pointer; }.check-line input { width: 18px; height: 18px; padding: 0; accent-color: var(--blue); }

.state-card { max-width: 720px; margin: 90px auto; padding: 65px; text-align: center; }.state-card h1 { font-size: clamp(40px, 5vw, 62px); }.state-card > p { color: var(--muted); font-size: 16px; line-height: 1.65; }.success-orbit, .error-orbit { width: 105px; height: 105px; border-radius: 50%; margin: 0 auto 25px; display: grid; place-items: center; background: #e9f8ef; box-shadow: 0 0 0 14px #f3fbf6; }.success-orbit span { color: #138a4d; font-size: 44px; }.error-orbit { background: #fff0f1; box-shadow: 0 0 0 14px #fff7f7; }.error-orbit span { color: var(--red); font-size: 44px; }.reference-box { margin: 30px auto; padding: 18px; max-width: 390px; background: #f4f6fa; border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 6px; }.reference-box span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; font-weight: 900; }.reference-box strong { font-size: 25px; letter-spacing: .04em; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 0 0 22px; }.stat-card { position: relative; padding: 22px; border-radius: 19px; background: rgba(255,255,255,.9); border: 1px solid #fff; box-shadow: 0 12px 34px rgba(16,24,40,.08); display: grid; gap: 7px; overflow: hidden; }.stat-card span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; }.stat-card strong { font-size: 36px; }.stat-card i { position: absolute; right: 18px; bottom: 18px; width: 10px; height: 10px; border-radius: 50%; }.red-dot { background: var(--red); }.blue-dot { background: var(--blue); }.mix-dot { background: linear-gradient(135deg,var(--red) 50%,var(--blue) 50%); }.dark-dot { background: var(--ink); }
.orders-panel { padding: 10px 0 0; overflow: hidden; }.table-heading { min-height: 70px; padding: 20px 25px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }.table-heading h2 { margin: 0; font-size: 17px; }.table-heading span { color: var(--muted); font-size: 11px; font-weight: 700; }
.order-list { display: grid; }.order-row { display: grid; grid-template-columns: 45px minmax(220px, 1fr) 180px 180px 25px; gap: 16px; align-items: center; min-height: 82px; padding: 12px 25px; border-bottom: 1px solid #edf0f4; text-decoration: none; transition: .18s ease; }.order-row:last-child { border: 0; }.order-row:hover { background: #f8faff; transform: translateX(3px); }.order-kind { width: 40px; height: 40px; border-radius: 13px; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; }.kind-teil { background: var(--red); }.kind-schaden { background: var(--blue); }.kind-service { background: linear-gradient(135deg,var(--red),var(--blue)); }.order-main { display: grid; gap: 5px; }.order-main strong { font-size: 13px; letter-spacing: .02em; }.order-main small, .order-time { color: var(--muted); font-size: 11px; }.status { justify-self: start; display: inline-flex; border-radius: 999px; padding: 7px 11px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }.status-neu { background: #fff0f2; color: var(--red-dark); }.status-in_bearbeitung { background: #eaf2ff; color: var(--blue-dark); }.status-wartet { background: #fff7df; color: #8a5c00; }.status-erledigt { background: #e9f8ef; color: #117543; }.status-large { padding: 11px 16px; }.order-arrow { font-size: 18px; color: var(--blue); }.empty-state { text-align: center; padding: 70px 20px; }.empty-state span { color: var(--blue); font-size: 42px; }.empty-state h3 { margin: 12px 0 5px; }.empty-state p, .muted { color: var(--muted); }

.back-link { color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 800; }.back-link:hover { color: var(--blue); }.detail-heading { margin-top: 25px; }.detail-heading h1 { font-size: clamp(38px, 5vw, 58px); }.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; }.detail-main, .detail-sidebar { display: grid; gap: 22px; align-content: start; }.info-panel, .timeline-panel, .contact-card, .manage-card { padding-bottom: 28px; overflow: hidden; }.order-description { padding: 25px; margin: 0; white-space: pre-wrap; line-height: 1.7; color: var(--ink-soft); }.info-panel > .muted { padding: 20px 25px; }.request-image { position: relative; margin: 0 25px; border-radius: 18px; overflow: hidden; display: block; background: #eef1f5; }.request-image img { display: block; width: 100%; max-height: 560px; object-fit: contain; }.request-image span { position: absolute; right: 12px; bottom: 12px; background: rgba(9,21,46,.84); color: #fff; padding: 8px 10px; border-radius: 9px; font-size: 10px; font-weight: 800; }
.timeline { padding: 24px 26px 5px; display: grid; gap: 5px; }.timeline-item { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding-bottom: 22px; }.timeline-item::before { content: ""; position: absolute; width: 1px; background: var(--line); left: 6px; top: 12px; bottom: 0; }.timeline-item:last-child::before { display: none; }.timeline-dot { width: 13px; height: 13px; background: linear-gradient(135deg,var(--red),var(--blue)); border-radius: 50%; z-index: 1; }.timeline-item header { display: flex; justify-content: space-between; gap: 10px; }.timeline-item header strong { font-size: 12px; }.timeline-item header span, .timeline-item small { color: var(--muted); font-size: 9px; }.timeline-item p { color: var(--ink-soft); line-height: 1.55; white-space: pre-wrap; font-size: 13px; }.reply-form { padding: 20px 25px 0; border-top: 1px solid var(--line); }.reply-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }.reply-actions select { max-width: 210px; }
.contact-card, .manage-card { padding: 26px; }.contact-card h2, .manage-card h2 { margin: 6px 0 8px; }.phone-number { display: inline-block; font-size: 22px; font-weight: 850; text-decoration: none; margin: 8px 0 20px; }.phone-number:hover { color: var(--blue); }.button-stack { display: grid; gap: 10px; }.manage-card { display: grid; gap: 16px; }

.qr-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; align-items: stretch; }.qr-create, .qr-result, .qr-placeholder { padding: 34px; }.qr-create h2, .qr-result h2 { margin: 6px 0 20px; }.qr-explainer { display: flex; align-items: center; gap: 18px; margin: 35px 0; padding: 20px; border-radius: 16px; background: #f5f8ff; border: 1px solid #dae6fa; }.qr-explainer b { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg,var(--red),var(--blue)); font-size: 28px; }.qr-explainer span { display: grid; gap: 5px; }.qr-explainer small { color: var(--muted); line-height: 1.4; }.qr-result { text-align: center; }.qr-frame { width: min(330px, 100%); aspect-ratio: 1; margin: 10px auto; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 50px rgba(16,24,40,.12); }.qr-frame img { width: 100%; height: 100%; display: block; }.qr-url { max-width: 520px; margin: 15px auto; padding: 11px; color: var(--muted); font-size: 10px; background: #f4f6fa; border-radius: 10px; overflow-wrap: anywhere; }.qr-result .button-row { justify-content: center; }.qr-placeholder { display: grid; place-items: center; text-align: center; align-content: center; min-height: 450px; color: var(--muted); }.fake-qr { font-size: 100px; color: #c7d0dd; }.recent-panel { margin-top: 22px; overflow: hidden; }.token-list { display: grid; }.token-row { min-height: 60px; padding: 10px 25px; display: grid; grid-template-columns: 90px 1fr 120px; align-items: center; border-bottom: 1px solid var(--line); font-size: 12px; }.token-row:last-child { border: 0; }

.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.account-card { padding: 27px; }.account-card h2 { margin: 13px 0 4px; }.account-card > p { color: var(--muted); margin: 0 0 25px; }.account-card form { display: grid; gap: 14px; }.role-badge { display: inline-flex; padding: 6px 9px; border-radius: 8px; color: #fff; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; }.role-admin { background: var(--red); }.role-customer { background: var(--blue); }.role-supplier { background: linear-gradient(135deg,var(--red),var(--blue)); }

@media (max-width: 1000px) {
  .site-header { width: min(100% - 28px, 900px); padding: 10px 0; align-items: flex-start; }
  .main-nav { justify-content: flex-end; flex-wrap: wrap; }
  .main-nav > a, .nav-button { padding: 8px 9px; }
  .page-shell { width: min(100% - 28px, 900px); }
  .split-card { grid-template-columns: 1fr; }.split-card::before { inset: 0; }.split-card::after { display: none; }.hero-copy { min-height: 560px; }.hero-visual { min-height: 520px; }
  .feature-grid, .account-grid { grid-template-columns: 1fr; }
  .auth-layout { grid-template-columns: 1fr; background: linear-gradient(170deg,#09152e 0 38%,#f8fafc 38.3%); padding: 60px 7%; }.auth-intro { padding-bottom: 70px; }.auth-panel-stack { margin: 0 auto; }
  .request-layout { grid-template-columns: 1fr; }.request-sidebar { padding: 50px 8%; }.step-list { grid-template-columns: repeat(3,1fr); margin-top: 35px; }.request-form { padding: 45px 7%; }
  .stats-grid { grid-template-columns: 1fr 1fr; }.order-row { grid-template-columns: 45px 1fr 150px 25px; }.order-time { display: none; }
  .detail-grid { grid-template-columns: 1fr; }.detail-sidebar { grid-template-columns: 1fr 1fr; }
  .qr-layout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .site-header { min-height: 75px; align-items: center; }.brand-mark { width: 132px; }.main-nav > a:not(:last-of-type), .user-chip { display: none; }
  .page-shell { margin-top: 12px; }.site-footer { width: calc(100% - 28px); }
  .hero-copy { padding: 60px 8%; min-height: 520px; }.hero h1 { font-size: 48px; }.hero-visual { min-height: 460px; }.process-card { min-width: 135px; padding: 11px; }.process-one { left: 2%; }.process-two { right: 1%; }.process-three { left: 4%; }
  .feature-grid { gap: 12px; }.auth-layout { padding: 45px 20px; }.auth-intro h1 { font-size: 49px; }.auth-card { padding: 28px 20px; }.demo-access { padding: 22px 18px; }.demo-banner { align-items: flex-start; }
  .page-heading h1 { font-size: 42px; }.heading-row { display: grid; align-items: start; }.request-sidebar h1 { font-size: 45px; }.request-form { padding: 35px 20px; }.choice-grid, .two-columns { grid-template-columns: 1fr; }.step-list { display: none; }
  .state-card { padding: 45px 22px; margin: 40px auto; }.stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.stat-card { padding: 17px; }.stat-card strong { font-size: 28px; }
  .table-heading { padding: 17px; }.order-row { grid-template-columns: 40px 1fr 24px; padding: 12px 15px; gap: 10px; }.order-row .status { grid-column: 2; }.order-arrow { grid-column: 3; grid-row: 1 / 3; }.detail-sidebar { grid-template-columns: 1fr; }.reply-actions { display: grid; }.reply-actions select { max-width: none; }
  .qr-create, .qr-result, .qr-placeholder { padding: 24px 18px; }.token-row { grid-template-columns: 45px 1fr 76px; padding: 10px 14px; }.account-password { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; }.site-header, .site-footer, .page-heading, .qr-create, .recent-panel, .flash-stack, .qr-result .button-row, .ambient { display: none !important; }.page-shell { width: 100%; margin: 0; }.qr-layout { display: block; }.qr-result { box-shadow: none; border: 0; padding: 2cm; }.qr-frame { width: 14cm; box-shadow: none; }.qr-result::after { content: "KFZ Lüchow · Einmal scannen und Anfrage senden"; display: block; font-size: 22pt; font-weight: 850; margin-top: 1cm; }.qr-url { display: none; }
}

/* Auftragsfrist, Kontaktwahl und Admin-Archiv */
[hidden] { display: none !important; }
.choice-grid-two { grid-template-columns: repeat(2, 1fr); }
.stats-grid { grid-template-columns: repeat(5, 1fr); margin-bottom: 16px; }
.archive-dot { background: #7c3aed; }
.book-tabs { display: inline-flex; gap: 5px; padding: 5px; margin: 0 0 20px; border-radius: 14px; background: rgba(255,255,255,.85); border: 1px solid var(--line); }
.book-tabs a { padding: 9px 14px; border-radius: 10px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 850; }
.book-tabs a.active { background: #121a2f; color: #fff; }
.order-time { display: grid; gap: 4px; }
.order-time small { font-size: 9px; }
.timer { color: var(--blue-dark); font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: .04em; }
.timer-expired { color: var(--red-dark); }
.timer-done { color: #117543; }
.deadline-banner, .archive-banner { margin: -8px 0 22px; padding: 18px 22px; border-radius: 18px; display: flex; align-items: center; gap: 18px; box-shadow: 0 12px 34px rgba(16,24,40,.08); }
.deadline-banner { background: linear-gradient(100deg,#fff2f3,#edf4ff); border: 1px solid #f0dce1; }
.deadline-banner .deadline-label { font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.timer-large { font-size: 25px; margin-left: auto; }
.deadline-banner small { color: var(--muted); }
.archive-banner { background: #eaf8ef; border: 1px solid #c8ead5; }
.archive-banner > span { width: 38px; height: 38px; border-radius: 50%; background: #159455; color: #fff; display: grid; place-items: center; }
.archive-banner div { display: grid; gap: 4px; }
.archive-banner small { color: #3f7657; }
.customer-response-form { padding: 24px 25px; border-top: 1px solid var(--line); background: linear-gradient(110deg,#fff7f8,#f4f8ff); display: grid; gap: 14px; }
.reply-actions { justify-content: flex-end; flex-wrap: wrap; }
.contact-method { color: var(--muted); display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-top: 16px; }
.email-address { display: inline-block; color: var(--blue-dark); font-size: 16px; font-weight: 850; text-decoration: none; margin: 8px 0 20px; overflow-wrap: anywhere; }
.email-address:hover { color: var(--blue); }

@media screen and (max-width: 1000px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 680px) {
  .choice-grid-two { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .deadline-banner { display: grid; gap: 8px; }
  .timer-large { margin-left: 0; }
  .book-tabs { width: 100%; }
  .book-tabs a { flex: 1; text-align: center; padding: 9px 7px; }
}

/* Systemweite kompakte Bildschirm-Dichte: Übersicht zuerst, Details beim Scrollen */
@media screen and (min-width: 1001px) {
  :root { --radius: 18px; --shadow: 0 14px 42px rgba(16,24,40,.11); }
  .site-header { width: min(1600px, calc(100% - 32px)); min-height: 68px; gap: 20px; }
  .brand-mark { width: 210px; }
  .main-nav { gap: 4px; }
  .main-nav > a, .nav-button { padding: 8px 10px; border-radius: 9px; font-size: 12px; }
  .user-chip { padding: 8px 12px; font-size: 10px; }
  .demo-chip { padding: 6px 8px; font-size: 8px; }
  .page-shell { width: min(1600px, calc(100% - 32px)); min-height: calc(100svh - 118px); margin: 8px auto 24px; }
  .demo-banner { margin-bottom: 10px; padding: 8px 12px; gap: 10px; border-radius: 12px; }
  .demo-banner strong { padding: 5px 7px; font-size: 8px; }
  .demo-banner span { font-size: 10px; line-height: 1.35; }
  .site-footer { width: min(1600px, calc(100% - 32px)); min-height: 42px; font-size: 9px; }
  .panel { border-radius: 18px; }
  .eyebrow { font-size: 9px; }
  .hero h1, .page-heading h1, .auth-intro h1, .request-sidebar h1, .state-card h1 { margin: 14px 0; }
  .button-row { gap: 10px; margin-top: 14px; }
  .button { min-height: 40px; padding: 0 16px; border-radius: 11px; gap: 8px; font-size: 11px; }
  .flash-stack { top: 76px; right: 16px; }
  .flash { padding: 11px 14px; font-size: 11px; }
  label, legend { font-size: 10px; }
  input, textarea, select { padding: 10px 12px; border-radius: 10px; font-size: 12px; }
  textarea { line-height: 1.4; }
  .form-note { font-size: 9px; line-height: 1.4; }
  .panel-heading h2 { font-size: 24px; }
  .panel-heading p { margin: 5px 0; font-size: 11px; }
  .panel-kicker { font-size: 8px; }
  .page-heading { margin: 14px 0; }
  .page-heading h1 { font-size: clamp(32px, 3vw, 48px); margin-bottom: 7px; }
  .page-heading p { font-size: 12px; }
  .heading-row { gap: 16px; }

  .page-index .split-card { min-height: calc(100svh - 118px); max-height: 760px; border-radius: 24px; }
  .hero-copy { padding: 44px 6%; }
  .hero h1 { font-size: clamp(44px, 4.2vw, 64px); }
  .hero-copy > p { max-width: 500px; font-size: 14px; line-height: 1.55; }
  .process-card { min-width: 130px; padding: 10px 12px; border-radius: 12px; gap: 9px; }
  .process-card b, .process-card span { font-size: 10px; }
  .feature-grid { gap: 12px; margin-top: 14px; }
  .feature-card { padding: 18px; border-radius: 16px; }
  .feature-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 17px; }
  .feature-card h2 { margin: 12px 0 5px; font-size: 15px; }
  .feature-card p { font-size: 11px; line-height: 1.5; }

  .page-login .auth-layout { min-height: calc(100svh - 118px); padding: 18px 5%; gap: 5vw; border-radius: 24px; }
  .auth-intro h1 { font-size: clamp(44px, 4.7vw, 68px); }
  .auth-intro p { font-size: 13px; }
  .auth-panel-stack { max-width: 500px; gap: 10px; }
  .auth-card { max-width: 500px; padding: 20px; gap: 11px; }
  .demo-access { padding: 15px 18px; gap: 10px; }
  .demo-access h2 { font-size: 18px; }
  .demo-access > div > p { font-size: 10px; }
  .demo-login-grid { gap: 7px; }
  .demo-login-button { min-height: 50px; grid-template-columns: 34px 1fr auto; gap: 9px; padding: 7px 9px; border-radius: 11px; }
  .demo-login-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 11px; }
  .demo-login-button strong { font-size: 11px; }
  .demo-login-button small, .demo-privacy-note { font-size: 8px; }
  .demo-privacy-note { padding: 8px 9px; }

  .narrow-wrap { max-width: 720px; margin: 18px auto; }
  .form-grid { padding: 24px; gap: 13px; }
  .account-password { gap: 14px; padding-bottom: 12px; }

  .request-layout { min-height: calc(100svh - 118px); border-radius: 22px; }
  .request-sidebar { padding: 34px 8%; }
  .request-sidebar h1 { font-size: clamp(38px, 3.4vw, 50px); }
  .request-sidebar > p { font-size: 12px; line-height: 1.5; }
  .step-list { margin-top: 28px; gap: 7px; }
  .step-list li { gap: 10px; padding: 6px; }
  .step-list b { width: 29px; height: 29px; font-size: 10px; }
  .step-list strong { font-size: 11px; }
  .step-list small { font-size: 8px; }
  .request-form { padding: 26px 5%; gap: 13px; }
  .demo-form-note { padding: 9px 11px; }
  .choice-grid { gap: 7px; }
  .choice-card { gap: 8px; padding: 8px; border-radius: 11px; }
  .choice-icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 9px; font-size: 13px; }
  .upload-zone { min-height: 72px; gap: 10px; padding: 11px; border-radius: 12px; }
  .upload-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; }
  .upload-zone img { max-height: 210px; }
  .check-line { line-height: 1.35; }

  .state-card { max-width: 620px; margin: 24px auto; padding: 36px; }
  .state-card h1 { font-size: clamp(34px, 3.5vw, 48px); }
  .state-card > p { font-size: 13px; }
  .success-orbit, .error-orbit { width: 72px; height: 72px; margin-bottom: 16px; box-shadow: 0 0 0 9px #f3fbf6; }
  .success-orbit span, .error-orbit span { font-size: 32px; }
  .reference-box { margin: 18px auto; padding: 13px; }
  .reference-box strong { font-size: 20px; }

  .stats-grid { gap: 8px; margin-bottom: 10px; }
  .stat-card { padding: 11px 15px; border-radius: 13px; gap: 3px; }
  .stat-card span { font-size: 8px; }
  .stat-card strong { font-size: 25px; }
  .stat-card i { right: 12px; bottom: 12px; width: 8px; height: 8px; }
  .book-tabs { margin-bottom: 10px; padding: 4px; }
  .book-tabs a { padding: 7px 11px; font-size: 9px; }
  .orders-panel { padding-top: 4px; }
  .table-heading { min-height: 48px; padding: 11px 17px; }
  .table-heading h2 { font-size: 14px; }
  .table-heading span { font-size: 9px; }
  .order-row { min-height: 58px; padding: 8px 17px; gap: 11px; grid-template-columns: 36px minmax(220px,1fr) 150px 140px 18px; }
  .order-kind { width: 32px; height: 32px; border-radius: 9px; font-size: 10px; }
  .order-main { gap: 3px; }
  .order-main strong { font-size: 11px; }
  .order-main small, .order-time { font-size: 9px; }
  .status { padding: 6px 9px; font-size: 8px; }
  .empty-state { padding: 38px 16px; }
  .empty-state span { font-size: 32px; }

  .back-link { font-size: 10px; }
  .detail-heading { margin-top: 10px; }
  .detail-heading h1 { max-width: 100%; font-size: clamp(30px, 3vw, 44px); overflow-wrap: anywhere; }
  .detail-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 12px; }
  .detail-main, .detail-sidebar { gap: 12px; }
  .info-panel, .timeline-panel, .contact-card, .manage-card { padding-bottom: 14px; }
  .order-description { padding: 15px 17px; font-size: 12px; line-height: 1.5; }
  .info-panel > .muted { padding: 13px 17px; font-size: 11px; }
  .request-image { margin: 0 17px; border-radius: 12px; }
  .request-image img { max-height: 420px; }
  .timeline { padding: 15px 17px 3px; }
  .timeline-item { padding-bottom: 14px; }
  .timeline-item p { font-size: 11px; }
  .reply-form { padding: 13px 17px 0; }
  .reply-actions { gap: 8px; margin-top: 8px; }
  .contact-card, .manage-card { padding: 16px; }
  .contact-card h2, .manage-card h2 { margin: 4px 0 6px; font-size: 17px; }
  .contact-method { margin-top: 10px; font-size: 8px; }
  .phone-number { margin: 5px 0 12px; font-size: 17px; overflow-wrap: anywhere; }
  .email-address { margin: 5px 0 12px; font-size: 13px; }
  .button-stack, .manage-card { gap: 8px; }
  .deadline-banner, .archive-banner { margin: -2px 0 10px; padding: 10px 14px; border-radius: 12px; gap: 12px; }
  .deadline-banner .deadline-label { font-size: 8px; }
  .timer-large { font-size: 19px; }
  .deadline-banner small, .archive-banner small { font-size: 9px; }
  .archive-banner > span { width: 30px; height: 30px; }
  .customer-response-form { padding: 14px 17px; gap: 9px; }

  .qr-layout { gap: 12px; }
  .qr-create, .qr-result, .qr-placeholder { padding: 20px; }
  .qr-create h2, .qr-result h2 { margin: 5px 0 12px; font-size: 18px; }
  .qr-explainer { gap: 12px; margin: 16px 0; padding: 13px; border-radius: 11px; }
  .qr-explainer b { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; font-size: 21px; }
  .qr-frame { width: min(240px,100%); margin: 6px auto; padding: 10px; border-radius: 15px; }
  .qr-url { margin: 9px auto; padding: 8px; font-size: 8px; }
  .qr-result .button-row { margin-top: 8px; }
  .qr-placeholder { min-height: 330px; }
  .fake-qr { font-size: 72px; }
  .recent-panel { margin-top: 12px; }
  .token-row { min-height: 44px; padding: 7px 17px; font-size: 10px; }

  .account-grid { gap: 12px; }
  .account-card { padding: 18px; }
  .account-card h2 { margin: 9px 0 3px; font-size: 18px; }
  .account-card > p { margin-bottom: 15px; font-size: 11px; }
  .account-card form { gap: 9px; }
}

@media screen and (min-width: 1001px) and (max-height: 800px) {
  .site-header { min-height: 60px; }
  .page-shell { min-height: calc(100svh - 102px); margin-top: 5px; }
  .page-index .split-card, .page-login .auth-layout, .request-layout { min-height: calc(100svh - 102px); }
  .auth-intro h1 { font-size: 48px; }
  .auth-card { padding: 16px 18px; gap: 8px; }
  .demo-access { padding: 12px 16px; gap: 7px; }
  .demo-login-button { min-height: 45px; }
  .request-sidebar h1 { font-size: 40px; }
  .request-form { padding-top: 20px; padding-bottom: 20px; gap: 10px; }
  .qr-frame { width: min(205px,100%); }
  .qr-placeholder { min-height: 285px; }
}

@media screen and (min-width: 681px) and (max-width: 1000px) {
  .site-header { min-height: 70px; }
  .page-shell { margin: 12px auto 32px; }
  .page-heading { margin: 20px 0 16px; }
  .page-heading h1 { font-size: 38px; margin: 12px 0 7px; }
  .hero-copy { min-height: 440px; padding: 54px 8%; }
  .hero-visual { min-height: 410px; }
  .auth-layout { padding: 42px 7%; }
  .auth-intro { padding-bottom: 42px; }
  .auth-intro h1 { font-size: 58px; }
  .request-sidebar { padding: 38px 8%; }
  .request-sidebar h1 { font-size: 48px; }
  .request-form { padding: 36px 7%; gap: 18px; }
  .detail-main, .detail-sidebar { gap: 15px; }
  .detail-heading h1 { font-size: 40px; overflow-wrap: anywhere; }
}

@media screen and (max-width: 680px) {
  .site-header { min-height: 64px; }
  .main-nav { flex-wrap: nowrap; gap: 0; }
  .main-nav > a, .nav-button { padding: 7px 6px; font-size: 10px; }
  .demo-chip { display: none; }
  .brand-mark { width: 132px; }
  .page-shell { width: calc(100% - 20px); margin: 8px auto 28px; }
  .demo-banner { margin-bottom: 10px; padding: 10px 11px; gap: 9px; border-radius: 12px; }
  .demo-banner strong { padding: 5px 7px; font-size: 8px; }
  .demo-banner span { font-size: 10px; }
  .panel { border-radius: 17px; }
  .hero-copy { min-height: 430px; padding: 46px 8%; }
  .hero h1 { font-size: 42px; }
  .hero-copy > p { font-size: 15px; }
  .hero-visual { min-height: 390px; }
  .feature-card { padding: 22px; }
  .auth-layout { padding: 30px 14px; }
  .auth-intro { padding-bottom: 38px; }
  .auth-intro h1 { font-size: 42px; }
  .auth-card { padding: 23px 18px; }
  .demo-access { padding: 20px 16px; }
  .page-heading { margin: 20px 0 16px; }
  .page-heading h1 { margin: 12px 0 8px; font-size: 34px; overflow-wrap: anywhere; }
  .request-sidebar { padding: 34px 20px; }
  .request-sidebar h1 { font-size: 38px; }
  .request-form { padding: 28px 18px; gap: 18px; }
  input, textarea, select { min-height: 48px; padding: 12px 13px; }
  .state-card { margin: 24px auto; padding: 34px 20px; }
  .state-card h1 { font-size: 36px; }
  .stats-grid { gap: 7px; }
  .stat-card { padding: 13px; }
  .stat-card strong { font-size: 24px; }
  .detail-heading { margin-top: 14px; }
  .detail-heading h1 { font-size: 30px; }
  .deadline-banner, .archive-banner { margin-bottom: 14px; padding: 13px; }
  .order-description { padding: 17px; }
  .contact-card, .manage-card { padding: 20px; }
  .qr-create, .qr-result, .qr-placeholder { padding: 21px 16px; }
  .qr-frame { width: min(260px,100%); }
  .qr-placeholder { min-height: 300px; }
}