/*
 * Öffentlicher Bereich: Kopfzeile, Katalog, Artikeldetail, Anfragekorb.
 * Setzt base.css voraus.
 */

body.site {
    background: var(--white);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* -------------------------------------------------------------- Kopfzeile */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ink-200);
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: 72px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink-900);
    letter-spacing: -.015em;
}

.brand:hover { text-decoration: none; color: var(--brand-700); }

/*
 * Hinterlegtes Logo statt Namenskürzel.
 *
 * Ein Wort-Bild-Logo mit Slogan ist breit und flach (oft 2:1 bis 3:1) und
 * enthält meist eigenen Rand. Nur die Höhe zu begrenzen macht es deshalb
 * unleserlich klein – es bekommt hier so viel Höhe, wie die Kopfzeile
 * hergibt, und darf dafür breit werden. `object-fit` hält die Proportion,
 * egal welche Datei hochgeladen wird.
 */
.brand-logo {
    height: 52px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    object-position: left center;
}

/* Mit Logo darf die Kopfzeile etwas höher werden – sonst klebt es am Rand. */
.site-header:has(.brand-logo) .container { min-height: 84px; }

/*
 * Helle Logos brauchen einen dunklen Untergrund – auf der hellen Kopfzeile
 * wären sie sonst schlicht unsichtbar.
 */
.brand-on-dark {
    background: var(--brand-800);
    border-radius: var(--radius);
    padding: 4px var(--space-3);
}

.brand-on-dark:hover { background: var(--brand-900); }

/* Ohne Logo bleibt die Marke wie bisher: Kürzel plus Name. */
.brand:has(.brand-logo) { gap: 0; }

@media (max-width: 860px) {
    .brand-logo { height: 40px; max-width: 190px; }
    .site-header:has(.brand-logo) .container { min-height: 0; }
}

@media (max-width: 420px) {
    .brand-logo { height: 34px; max-width: 150px; }
}

.brand-mark {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .02em;
    flex: none;
    box-shadow: var(--shadow-xs);
}

.brand-sub {
    display: block;
    font-size: .6875rem;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-400);
    line-height: 1.2;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
    min-width: 0;
}

/*
 * Die Kategorien dürfen schrumpfen, der Anfrage-Knopf nie – er ist das Ziel
 * der ganzen Seite und darf auf keiner Breite verschwinden.
 */
.nav-categories {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    /*
     * **Kein `overflow: hidden`.** Ein Klappmenü liegt absolut positioniert
     * unter seinem Auslöser und damit außerhalb dieser Zeile – ein
     * beschneidender Container schnitte es ab, und zwar genau da, wo der
     * Inhalt anfängt. Dass die Zeile nicht umbricht, regelt die Zahl der
     * Punkte (`$inlineLimit`) und nicht das Wegschneiden.
     */
}

.nav-link {
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: .9375rem;
    font-weight: 520;
    color: var(--ink-600);
    white-space: nowrap;
}

.nav-link:hover { background: var(--ink-100); color: var(--ink-900); text-decoration: none; }

.nav-link.is-active {
    color: var(--brand-700);
    background: var(--brand-50);
    font-weight: 600;
}

/* ------------------------------------------------------- Kategoriemenü */

.nav-menu { position: relative; }

.nav-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: .9375rem;
    font-weight: 520;
    color: var(--ink-600);
    cursor: pointer;
    list-style: none;
    user-select: none;
    white-space: nowrap;
}

/* Das Standard-Dreieck weicht dem Chevron im Text. */
.nav-menu summary::-webkit-details-marker { display: none; }

.nav-menu summary:hover { background: var(--ink-100); color: var(--ink-900); }
.nav-menu summary.is-active { color: var(--brand-700); background: var(--brand-50); }
.nav-menu summary:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.nav-menu[open] summary { background: var(--ink-100); color: var(--ink-900); }
.nav-menu[open] summary svg { transform: rotate(180deg); }
.nav-menu summary svg { transition: transform .15s ease; }

.nav-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 220px;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-menu-panel a {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: .9375rem;
    color: var(--ink-700);
    white-space: nowrap;
}

.nav-menu-panel a:hover { background: var(--ink-100); color: var(--ink-900); text-decoration: none; }
.nav-menu-panel a.is-active { color: var(--brand-700); background: var(--brand-50); font-weight: 560; }

/*
 * Der Weg zur Oberkategorie selbst. Ein `<summary>` ist kein Link, also stünde
 * „Zelte" sonst nur noch als Beschriftung da – die Seite gäbe es, nur käme
 * niemand mehr hin. Die Linie darunter trennt das Ganze von seinen Teilen.
 */
.nav-menu-all {
    font-weight: 560;
    color: var(--ink-900) !important;
    border-bottom: 1px solid var(--ink-100);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom: 2px;
    padding-bottom: 10px !important;
}

/* Das Menü fährt kurz aus, statt zu erscheinen – der Weg zeigt, woher es kommt. */
.nav-menu[open] .nav-menu-panel { animation: nav-menu-in .16s ease-out; }

@keyframes nav-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/*
 * Auf schmalen Geräten passen Marke, Kategorien und Anfrage-Knopf nicht mehr
 * nebeneinander. Statt Einträge wegzulassen, wandert die Kategoriezeile unter
 * den Kopf und scrollt dort waagerecht – so bleibt jede Kategorie erreichbar.
 */
@media (max-width: 860px) {
    .site-header .container {
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-4);
        padding-block: var(--space-3);
    }

    .site-nav { margin-left: auto; gap: var(--space-2); }

    .nav-categories {
        order: 3;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
        margin-inline: calc(-1 * var(--space-5));
        padding-inline: var(--space-5);
    }

    .nav-categories::-webkit-scrollbar { display: none; }

    .site-nav {
        display: contents;
    }

    .basket-link { order: 2; }
    .brand-sub { display: none; }

    /*
     * Auf schmalen Geräten scrollt die Kategoriezeile waagerecht – und ein
     * scrollender Container beschneidet, was aus ihm herausragt. `fixed` hängt
     * am Anzeigefenster statt am Container und entkommt dem: Das Menü legt sich
     * über die volle Breite unter die Zeile, statt in ihr zu verschwinden.
     * `top: auto` behält dabei die Stelle, an der es ohnehin stünde.
     */
    .nav-menu-panel {
        position: fixed;
        top: auto;
        left: var(--space-4);
        right: var(--space-4);
        min-width: 0;
        max-height: 60vh;
        overflow-y: auto;
    }
}

@media (max-width: 420px) {
    .basket-link span:not(.basket-count) { display: none; }
}

.basket-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px 16px !important;
    border-radius: var(--radius);
    background: var(--brand-700);
    color: var(--white) !important;
    font-weight: 560;
}

.basket-link:hover { background: var(--brand-800) !important; }

.basket-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    /*
     * Weiß auf Dunkel, nicht schwarz: Der Zähler sitzt auf dem dunklen
     * Auftragsknopf in der Kopfzeile. Ein schwarzer Punkt darauf wäre kein
     * Hinweis mehr, sondern ein Loch.
     */
    background: var(--white);
    color: var(--ink-900);
    font-size: .6875rem;
    font-weight: 700;
}

/*
 * Der Kontolink ist bewusst zurückhaltend: Er steht neben dem Anfrageknopf,
 * darf ihm aber nicht die Aufmerksamkeit nehmen.
 */
.account-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px !important;
    border-radius: var(--radius);
    color: var(--ink-600) !important;
    font-weight: 520;
    white-space: nowrap;
}

.account-link:hover { background: var(--ink-50); color: var(--brand-700) !important; text-decoration: none; }

/*
 * Auf schmalen Geräten die kurze Beschriftung.
 *
 * Nur das Symbol stehen zu lassen wäre bequemer, hilft aber niemandem: Neben
 * der Einkaufstasche ist ein Personen-Symbol nicht als Konto erkennbar, und
 * ein Einstieg, den noch niemand sucht, muss beschriftet sein. Der
 * Auftragsknopf bleibt trotzdem der auffälligere – er ist gefüllt, das Konto
 * nicht.
 */
.account-link-short { display: none; }

@media (max-width: 640px) {
    .account-link-text { display: none; }
    .account-link-short { display: inline; }
    .account-link { padding: 9px 10px !important; }
}

/* ------------------------------------------------------------------- Hero */

/*
 * Der Lichtschein oben rechts ist eine **Hintergrundebene** und kein
 * positioniertes Pseudo-Element. Als Pseudo-Element ragte er über den Hero
 * hinaus und brauchte dafür `overflow: hidden` – und das schnitt dann auch die
 * Suchvorschläge ab, sobald mehr als zwei Treffer kamen. Ein Hintergrund
 * verlässt sein Element nie, also entfällt das Beschneiden und die Liste darf
 * über den Hero hinauswachsen.
 */
.hero {
    /*
     * Der Lichtfleck oben rechts war bernsteinfarben und ist jetzt ein heller
     * Schleier: Schwarz auf dunklem Petrol wäre kein Akzent, sondern nur ein
     * dunkler Fleck. Was den Verlauf lebendig macht, ist der Helligkeits-
     * unterschied – der Farbton war nie der Punkt.
     */
    background:
        radial-gradient(circle 320px at calc(100% - 80px) 120px,
            rgba(255, 255, 255, .10) 0%, transparent 65%),
        radial-gradient(circle 420px at 12% 115%,
            rgba(0, 0, 0, .35) 0%, transparent 70%),
        linear-gradient(160deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
    color: var(--white);
    padding: var(--space-8) 0 var(--space-8);
    position: relative;
}

.hero h1 { color: var(--white); max-width: 22ch; }
.hero p { color: rgba(255, 255, 255, .82); max-width: 58ch; font-size: 1.0625rem; }

.hero-inner { position: relative; z-index: 1; }

/* ----------------------------------------------------------- Suchleiste */

.search-panel {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    margin-top: var(--space-6);
    color: var(--ink-800);
}

/* Das Suchfeld ist der Einstieg – entsprechend groß. */

.search-main { margin-bottom: var(--space-5); }

.search-main > label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-800);
    margin-bottom: var(--space-3);
}

.search-main-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 6px 6px var(--space-4);
    border: 2px solid var(--ink-200);
    border-radius: var(--radius-lg);
    background: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.search-main-row:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px var(--brand-100);
}

.search-main-icon { width: 22px; height: 22px; flex: none; color: var(--ink-400); }

.search-main-row input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: var(--space-3) 0;
    font-size: 1.125rem;
    background: none;
    box-shadow: none;
}

.search-main-row input[type="search"]:focus { outline: none; box-shadow: none; }
.search-main-row input[type="search"]::placeholder { color: var(--ink-400); }
.search-main-row .btn { flex: none; }

@media (max-width: 560px) {
    .search-main-row { flex-wrap: wrap; padding: var(--space-3); }
    .search-main-row input[type="search"] { font-size: 1rem; }
    .search-main-row .btn { width: 100%; }
    .search-main-icon { display: none; }
}

.search-panel .field { margin-bottom: 0; }

/* ------------------------------------------------------- Katalog-Raster */

/*
 * `.section` setzt **nur** den senkrechten Abstand – deshalb `padding-block`
 * und nicht die Kurzform `padding: … 0`.
 *
 * Kundenkonto, Auftragskorb und Portal tragen beide Klassen auf demselben
 * Element (`class="container section"`). Die Kurzform hat dort das
 * `padding-inline` des Containers überschrieben: gleiche Spezifität, später in
 * der Datei, und schon klebte der ganze Inhalt am Bildrand. Auf dem Schreibtisch
 * fiel das nicht auf, weil die Seite ohnehin mittig steht; auf dem Handy ist der
 * Container die ganze Breite.
 */
.section { padding-block: var(--space-7); }
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.section-head p { margin: 0; }

/* ------------------------------------------- Zeitraum in der Trefferzeile */

.result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

.period-edit { position: relative; }

/*
 * Der Aufklapp-Pfeil des Browsers gehört hier nicht hin – die Fläche ist als
 * Knopf gestaltet, und ein Dreieck daneben sähe nach zwei Bedienelementen aus.
 */
.period-edit > summary { list-style: none; cursor: pointer; }
.period-edit > summary::-webkit-details-marker { display: none; }
.period-edit[open] > summary { border-color: var(--ink-400); background: var(--ink-50); }

.period-edit-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    width: min(320px, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-4);
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--ink-800);
}

/*
 * Auf schmalen Geräten wird der Knopf als Anker aufgegeben: Wo genau er nach
 * dem Umbruch der Zeile landet, steht nicht fest, und ein daran ausgerichtetes
 * Feld ragte je nach Textlänge links oder rechts aus dem Bild. Bezugspunkt ist
 * dort deshalb die ganze Zeile – das Feld nimmt ihre Breite ein und liegt damit
 * immer sichtbar.
 */
@media (max-width: 640px) {
    .result-meta { position: relative; }
    .period-edit { position: static; }
    .period-edit-panel { left: 0; right: 0; width: auto; }
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--ink-200);
    background: var(--white);
    font-size: .875rem;
    font-weight: 520;
    color: var(--ink-600);
    transition: all var(--transition);
}

.chip:hover {
    border-color: var(--brand-500);
    color: var(--brand-700);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.chip.is-active { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }

.item-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.item-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.item-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--ink-300);
}

.item-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ink-100);
    overflow: hidden;
}

/* Der Link füllt die Kachelfläche – klickbar ist das ganze Bild, nicht nur ein
   Teil davon. */
.item-thumb-link {
    display: block;
    width: 100%; height: 100%;
}

.item-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}

.item-card:hover .item-thumb img { transform: scale(1.04); }

.item-thumb .placeholder {
    width: 100%; height: 100%;
    display: grid;
    place-items: center;
    color: var(--ink-300);
    background: linear-gradient(135deg, var(--ink-100), var(--ink-50));
}

.item-thumb .placeholder svg { width: 48px; height: 48px; }

.item-thumb .item-flag {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-xs);
}

/*
 * Das Aktionsschild sitzt rechts oben und damit gegenüber dem
 * Verfügbarkeits-Badge: Beide hängen am Bild, und übereinander verdeckte eines
 * das andere.
 */
.item-thumb .item-promo {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    box-shadow: var(--shadow-xs);
}

.item-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.item-body .eyebrow {
    font-size: .6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--brand-600);
}

.item-body h3 { margin: 0; font-size: 1.0625rem; }
.item-body h3 a { color: var(--ink-900); }
.item-body h3 a:hover { color: var(--brand-700); text-decoration: none; }

.item-body .desc {
    font-size: .875rem;
    color: var(--ink-500);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-meta {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--ink-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.price {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}

.price small { display: block; font-size: .6875rem; font-weight: 500; color: var(--ink-400); }

.item-actions { padding: 0 var(--space-4) var(--space-4); display: flex; gap: var(--space-2); }
.item-actions .btn { flex: 1; }

/* --------------------------------------------------------- Artikeldetail */

.detail {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
    align-items: start;
    padding: var(--space-6) 0 var(--space-8);
}

/*
 * `minmax(0, 1fr)` statt `1fr`: eine Grid-Spalte schrumpft sonst nie unter die
 * Mindestbreite ihres Inhalts. Eine breite Positionstabelle schöbe damit die
 * ganze Seite waagerecht auf, statt in ihrem eigenen `.table-wrap` zu scrollen.
 */
@media (max-width: 960px) {
    .detail { grid-template-columns: minmax(0, 1fr); }
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: .8125rem;
    color: var(--ink-400);
    padding: var(--space-4) 0 0;
}

.breadcrumb a { color: var(--ink-500); }
.breadcrumb span { color: var(--ink-300); }

.gallery-main {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink-100);
    border: 1px solid var(--ink-200);
}

.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-main .placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: var(--ink-300);
}
.gallery-main .placeholder svg { width: 72px; height: 72px; }

.gallery-thumbs {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.gallery-thumbs button {
    width: 78px; height: 60px;
    padding: 0;
    border: 2px solid var(--ink-200);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-100);
    cursor: pointer;
    transition: border-color var(--transition);
}

.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button:hover { border-color: var(--ink-400); }
.gallery-thumbs button[aria-current="true"] { border-color: var(--brand-600); }

.spec-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.spec-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 10px 0;
    border-bottom: 1px solid var(--ink-100);
    font-size: .9375rem;
}

.spec-list div:last-child { border-bottom: 0; }
.spec-list dt { color: var(--ink-500); margin: 0; }
.spec-list dd { margin: 0; font-weight: 550; color: var(--ink-800); text-align: right; }

/* Inhalt eines Sets */

/*
 * Die Menge steht in einer eigenen, rechtsbündigen Spalte fester Breite:
 * „1 ×" und „12 ×" untereinander sollen an derselben Kante enden, sonst
 * franst die Liste aus und lässt sich nicht mehr überfliegen.
 */
.set-contents {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.set-contents li {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: var(--space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--ink-100);
    font-size: .9375rem;
}

.set-contents li:last-child { border-bottom: 0; }

.set-contents .set-qty {
    text-align: right;
    font-weight: 650;
    color: var(--ink-800);
    font-variant-numeric: tabular-nums;
}

.set-contents .set-name { display: grid; gap: 2px; }
.set-contents .set-name small { font-size: .8125rem; }

/* Einzeiler „Enthält: …" in Kachel, Korb und Formular */
.set-lines { font-size: .8125rem; color: var(--ink-500); }
.set-lines .set-lines-label { font-weight: 600; color: var(--ink-600); }

/* Buchungs-Panel rechts */
.booking-panel {
    position: sticky;
    top: 96px;
}

.booking-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.booking-price .amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: -.02em;
}

.booking-price .per { color: var(--ink-500); font-size: .875rem; }

.quantity-input { max-width: 110px; }

/* ------------------------------------------------------------ Anfragekorb */

.basket-lines { display: flex; flex-direction: column; }

.basket-line {
    display: grid;
    grid-template-columns: 88px 1fr auto auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--ink-100);
}

.basket-line:last-child { border-bottom: 0; }

@media (max-width: 640px) {
    .basket-line {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "thumb info"
            "qty   actions";
    }
    .basket-line .bl-thumb { grid-area: thumb; }
    .basket-line .bl-info { grid-area: info; }
    .basket-line .bl-qty { grid-area: qty; }
    .basket-line .bl-actions { grid-area: actions; justify-self: end; }
}

.bl-thumb {
    width: 88px; height: 66px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-100);
    flex: none;
}

/* Der Link füllt die Vorschau, damit das ganze Bild klickbar ist. */
.bl-thumb a { display: block; width: 100%; height: 100%; }

.bl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bl-info h4 { margin: 0 0 2px; font-size: .9688rem; }
.bl-info h4 a { color: var(--ink-900); }
.bl-qty input { width: 84px; text-align: center; }

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 8px 0;
    font-size: .9375rem;
}

.summary-row.total {
    border-top: 1px solid var(--ink-200);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink-900);
}

/*
 * Der Gesamtpreis setzt sich von der Staffeltabelle ab: Die Tabelle nennt
 * Tagespreise, hier steht, was der gewählte Zeitraum tatsächlich kostet. Ohne
 * die Trennung liest sich beides als eine einzige Aufstellung.
 */
.price-total {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
}

/* --------------------------------------------------------- Anfrageformular */

.inquiry-layout {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr);
    align-items: start;
    padding: var(--space-6) 0 var(--space-8);
}

@media (max-width: 900px) {
    .inquiry-layout { grid-template-columns: minmax(0, 1fr); }
}

.inquiry-summary { position: sticky; top: 96px; }

.thanks {
    max-width: 640px;
    margin: var(--space-8) auto;
    text-align: center;
}

.thanks .check {
    width: 72px; height: 72px;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    background: var(--ok-100);
    color: var(--ok-500);
    display: grid;
    place-items: center;
}

.thanks .check svg { width: 36px; height: 36px; }

.reference-box {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius);
    background: var(--ink-50);
    border: 1px dashed var(--ink-300);
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brand-700);
    letter-spacing: .04em;
}

/* ------------------------------------------------------------- Übergabe */

.handover-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.handover {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    background: var(--white);
}

.handover svg { width: 20px; height: 20px; flex: none; color: var(--brand-600); margin-top: 2px; }
.handover strong { display: block; font-size: .9375rem; margin-bottom: 3px; }
.handover span { display: block; font-size: .8125rem; line-height: 1.5; color: var(--ink-700); }
.handover span.muted { color: var(--ink-500); }

/*
 * Mehrere Lager untereinander brauchen eine sichtbare Grenze – sonst liest sich
 * die zweite Adresse als Fortsetzung der ersten.
 */
.handover-sep {
    display: block;
    height: 1px;
    margin: var(--space-2) 0;
    background: var(--ink-200);
}

.handover .handover-site {
    font-size: .8125rem;
    margin-bottom: 1px;
    color: var(--ink-800);
}

/* Abholort zur Auswahl: die ganze Zeile ist anklickbar. */
.pickup-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    cursor: pointer;
}

.pickup-option input { margin-top: 4px; flex: none; }
.pickup-option + .pickup-option { border-top: 1px solid var(--ink-200); }

.pickup-locations {
    padding: var(--space-3);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    background: var(--ink-50);
    font-size: .875rem;
}

.pickup-locations .label { display: block; margin-bottom: var(--space-2); }
.pickup-locations p + p { margin-top: var(--space-2); }

.handover.is-off { background: var(--ink-50); border-style: dashed; }
.handover.is-off svg { color: var(--ink-400); }
.handover.is-off strong { color: var(--ink-500); }

/* --------------------------------------------------------- Kundenportal */

.portal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--ink-200);
}

.portal-head h1 { margin: 4px 0 6px; }

.portal .eyebrow {
    font-size: .6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--brand-600);
}

/*
 * Zwei Zeitfelder nebeneinander – auf dem Handy untereinander, sonst wird die
 * Uhrzeit im Feld abgeschnitten.
 */
.time-pair {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 420px) {
    .time-pair { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Kundenkonto */

.account-narrow { max-width: 520px; margin: 0 auto; }
.account-narrow .eyebrow,
.account .eyebrow {
    font-size: .6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--brand-600);
}

.account-narrow h1 { margin: var(--space-2) 0 var(--space-3); }
.account-narrow .lead { color: var(--ink-600); margin-bottom: var(--space-5); font-size: 1rem; }

.account-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Der Code wird abgetippt oder eingefügt – große Ziffern mit viel Abstand
   lassen sich dabei am besten kontrollieren. */
.code-input {
    font-family: var(--font-mono, consolas, monospace);
    font-size: 1.75rem;
    letter-spacing: .35em;
    text-align: center;
    padding-inline: var(--space-3);
}

.order-card {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: var(--space-5);
}

.order-card + .order-card { margin-top: var(--space-4); }

.order-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.order-card-head h2 { font-size: 1.125rem; }

.order-lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; font-size: .9375rem; }
.order-lines li { padding: 6px 0; border-bottom: 1px solid var(--ink-100); }
.order-lines li:last-child { border-bottom: 0; }

.order-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid var(--ink-200);
}

/* ------------------------------------------------------------ 404-Seite */

.not-found {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-7) 0;
}

.not-found .eyebrow {
    font-size: .6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--brand-600);
}

.not-found h1 { margin: var(--space-2) 0 var(--space-3); }
.not-found .lead { color: var(--ink-600); margin-bottom: var(--space-6); }

/*
 * Das Suchfeld steht hier auf hellem Grund, nicht wie im Hero auf dunklem –
 * die Beschriftung darüber wäre sonst weiß auf weiß.
 */
.not-found-search .search-field label { color: var(--ink-700); }
.not-found-search .field { margin-bottom: 0; }

.not-found-categories { margin-top: var(--space-6); }
.not-found-categories .label { display: block; margin-bottom: var(--space-3); }
.not-found-categories .category-chips { justify-content: center; margin-bottom: 0; }

/* ------------------------------------------------------------ Empfehlungen */

.featured-section {
    background: var(--brand-50);
    border-block: 1px solid var(--brand-100);
    padding: var(--space-7) 0;
}

/* Kennzeichnung "Nur Abholung" / Standort auf Kacheln */
.item-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

/* -------------------------------------------------------------- Fußzeile */

.site-footer {
    margin-top: auto;
    background: var(--brand-900);
    color: rgba(255, 255, 255, .7);
    padding: var(--space-7) 0 var(--space-5);
    font-size: .9375rem;
}

.site-footer h4 {
    color: var(--white);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: var(--space-3);
}

.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: var(--white); }
.site-footer .muted { color: rgba(255, 255, 255, .45); }

.footer-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.footer-bottom {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .5);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ------------------------------------------------------------- Unterlagen */

.document {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: var(--space-4);
    background: var(--white);
}

.document + .document { margin-top: var(--space-3); }

.document-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.signature-form { margin-top: var(--space-4); }

.signature-pad {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: var(--space-3);
    background: var(--ink-50);
    margin-bottom: var(--space-3);
}

.signature-pad-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

/*
 * `touch-action: none` ist hier zwingend: ohne die Angabe scrollt die Seite,
 * sobald jemand auf dem Handy mit dem Finger unterschreibt.
 */
.signature-pad canvas {
    display: block;
    width: 100%;
    height: 160px;
    background: var(--white);
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-sm);
    touch-action: none;
    cursor: crosshair;
    margin-bottom: var(--space-2);
}