/*
 * Hammer Sport - gemeinsames Design-System fuer tracking.hammer.de
 * CI-Brandbook: Schwarz/Weiss/Rot, Roboto Condensed, 3px Radius, keine Schatten.
 * Uebernommen aus hammer/apps/b2b-portal/public/css/app.css (dort ausfuehrlicher
 * dokumentiert) - hier bewusst schlank auf das gehalten, was tracking braucht.
 * Werte 2026-09-21 gegen das Claude-Design-Projekt "HAMMER Website Design System"
 * abgeglichen: Fokus-Ring schwarz statt blau, --paper-dim exakt ci/grey-100,
 * Container 1280px, Link-Hover rot, Body-Zeilenhoehe fix 26px. Roboto Condensed Light
 * (300) bewusst weiterhin NICHT eingebunden, auch wenn das DS ihn als Foundation fuehrt.
 */

/* Roboto Condensed lokal statt fonts.googleapis.com: das uebertraegt sonst die
   IP jedes Besuchers an Google, ohne Einwilligung ein DSGVO-Problem (siehe
   b2b-portal, wo aus demselben Grund bereits umgestellt wurde). Dateien 1:1
   von dort uebernommen. */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-condensed-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-condensed-700.woff2') format('woff2');
}

:root {
    --ink: #181A1D;
    --paper: #FFFFFF;
    --paper-dim: #EEEEEE;
    --line: #DDDDDD;
    --line-strong: #B8B8BC;
    --slate: #5A5A5E;
    --red: #C81120;
    --red-dark: #A50E1A;
    --focus: var(--ink);
    --amber: #B8860B;
    --green: #1E7E34;
    --radius: 3px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 16px;
    line-height: 26px;
}

/* Textlinks (Fliesstext, Footer, Kontaktangaben): dunkel + Unterstreichung,
   Hover wird rot (Design-System: color/text/link-hover = ci/red-500). Navigation,
   Sidebar, Buttons und Tracking-Links haben weiter unten eigene Regeln. */
a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.4);
    text-underline-offset: 4px;
}

a:hover {
    color: var(--red);
    text-decoration-color: var(--red);
}

a:active {
    color: var(--ink);
}

img {
    max-width: 100%;
}

input:focus,
button:focus,
select:focus,
a:focus {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--ink);
    cursor: pointer;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Kopfzeile, ueberall gleich: Logo links, Nav/Meta rechts */
.hs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.hs-header__logo img {
    display: block;
    height: 30px;
}

.hs-header__nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hs-header__nav a {
    text-decoration: none;
    color: var(--slate);
}

.hs-header__nav a:hover {
    color: var(--ink);
    text-decoration: none;
}

.hs-header__nav a.active {
    color: var(--ink);
    border-bottom: 2px solid var(--red);
    padding-bottom: 4px;
}

.hs-header__divider {
    width: 1px;
    height: 16px;
    background: var(--line-strong);
}

/* Hero-/Suchbereich */
.hs-hero {
    background: var(--paper-dim);
    border-bottom: 1px solid var(--line);
    padding: 48px 24px;
}

.hs-hero__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.hs-hero h1 {
    margin: 0 0 10px;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hs-hero p {
    margin: 0 0 8px;
    color: var(--slate);
    font-size: 15px;
}

/* Formulare */
.hs-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.hs-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.hs-field label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
}

.hs-field input,
.hs-field select {
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 15px;
    background: var(--paper);
    color: var(--ink);
    min-width: 200px;
}

.hs-btn,
.hs-btn:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

.hs-btn--primary {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

.hs-btn--primary:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
}

.hs-btn--ghost {
    background: var(--paper);
    border-color: var(--ink);
    color: var(--ink);
}

.hs-btn--ghost:hover {
    background: var(--paper-dim);
}

/* Ergebnis-/Inhaltsbereich */
.hs-section {
    padding: 40px 24px;
}

.hs-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 28px;
}

.hs-card + .hs-card {
    margin-top: 16px;
}

.error-pane {
    border: 1px solid var(--red);
    background: rgba(200, 17, 32, 0.06);
    color: var(--red-dark);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 14px;
}

/* Ergebnis-Tabelle (Sendungsnummer/Artikel), wird von index.php/en.php per JS befuellt */
.result-item h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
}

.result-item .row {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
}

.result-item .row:first-child {
    border-top: 1px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--slate);
    padding: 8px 0;
}

.result-item .col {
    padding: 0 12px;
}

.result-item .col-sm-3 {
    flex: 0 0 30%;
    max-width: 30%;
}

.result-item .col-sm-9 {
    flex: 0 0 70%;
    max-width: 70%;
}

.result-item table {
    border-collapse: collapse;
    width: 100%;
}

.result-item table td {
    padding: 2px 0;
    font-size: 14px;
    text-align: left;
}

/* Mengenspalte fest schmal halten - sonst verteilt der Browser die Breite
   proportional zum Inhalt der zweiten Spalte, wodurch der Abstand je nach
   Artikelname-Laenge unterschiedlich breit wirkt. */
.result-item table td:first-child {
    width: 32px;
    white-space: nowrap;
    padding-right: 8px;
}

.tracking-link,
.tracking-link:hover {
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
}

.tracking-link:hover {
    text-decoration: underline;
}

/* Timeline (falls genutzt) */
.hs-timeline {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.hs-timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 140px;
    text-align: center;
}

.hs-timeline__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink);
}

.hs-timeline__dot--pending {
    background: var(--paper);
    border: 2px solid var(--line-strong);
}

.hs-timeline__connector {
    flex-grow: 1;
    height: 2px;
    background: var(--ink);
}

.hs-timeline__connector--pending {
    background: var(--line-strong);
}

/* Tabellen (intern) */
.hs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.hs-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--slate);
    border-bottom: 2px solid var(--ink);
}

.hs-table td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.hs-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
}

.hs-badge--red {
    background: rgba(200, 17, 32, 0.1);
    color: var(--red);
}

.hs-badge--green {
    background: rgba(30, 126, 52, 0.1);
    color: var(--green);
}

.hs-badge--amber {
    background: rgba(184, 134, 11, 0.12);
    color: var(--amber);
}

.hs-badge--neutral {
    background: var(--paper-dim);
    color: var(--slate);
}

/* Layout: Sidebar + Main (intern) */
.hs-shell {
    display: flex;
    min-height: calc(100vh - 73px);
}

.hs-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--paper-dim);
    border-right: 1px solid var(--line);
    padding: 24px 0;
}

.hs-sidebar a,
.hs-sidebar a:hover {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--slate);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.hs-sidebar a:hover {
    color: var(--ink);
}

.hs-sidebar a.active {
    color: var(--ink);
    font-weight: 700;
    border-left-color: var(--red);
    background: var(--paper);
}

.hs-main {
    flex-grow: 1;
    padding: 28px 32px;
}

/* Karten-Grid (Service) */
.hs-grid-2 {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.hs-grid-2 > * {
    flex: 1 1 320px;
}

.hs-dropzone {
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--line-strong);
    font-size: 13px;
}

/* Footer */
.hs-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--slate);
}

.hs-footer a,
.hs-footer a:hover {
    color: var(--slate);
    text-decoration: none;
}

.hs-footer a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.4);
    text-underline-offset: 4px;
}

.hs-footer__links {
    display: flex;
    gap: 20px;
}

/* JS in intern/assets/js/scripts.js schreibt direkt in diese Klassen (Suche,
   Ersatzteil-Service, QR-Scan) - Namen bewusst unveraendert gelassen, nur neu
   gestylt, damit das Skript unangetastet bleibt. */
.card-body.result {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 20px;
}

.result-item p {
    margin: 0 0 6px;
    font-size: 14px;
}

.result-item p:last-child {
    margin-bottom: 0;
}

.result-item .created-at {
    font-size: 12px;
    color: var(--slate);
    margin: 0 0 6px;
}

.result-item .agent {
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--slate);
    margin-bottom: 10px;
}

.result-item .packages {
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 4px;
}

.result-item .packages a,
.result-item .packages a:hover {
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
}

.result-item .packages a:hover {
    text-decoration: underline;
}

.result-item .package-lines {
    margin: 4px 0 12px 0;
}

.result-item .package-lines p {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--slate);
}

.result-item.service p {
    display: flex;
    gap: 8px;
}

.result-item.service p strong {
    min-width: 130px;
    color: var(--slate);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .hs-shell {
        flex-direction: column;
    }
    .hs-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--line);
        display: flex;
        overflow-x: auto;
        padding: 8px;
    }
    .hs-sidebar a {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }
    .hs-sidebar a.active {
        border-bottom-color: var(--red);
    }
    .hs-grid-2 {
        flex-direction: column;
    }
    .result-item .col-sm-3,
    .result-item .col-sm-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}