/* Das Blatt des Kits — die Form jeder Kundenwebseite.
 *
 * **Es nennt keine einzige Farbe.** Jede Farbe hier ist ein Token des Mandanten, gesetzt von
 * `SiteBrandStyles` aus seinen Einstellungen in ConsPro. Eine Farbe in diesem Blatt wäre eine zweite
 * Markenverwaltung: sie sähe bei dem einen Kunden richtig aus und bei jedem anderen falsch, und niemand
 * wüsste, wo sie herkommt.
 *
 * Dasselbe gilt für Abstände und Radien: `--space-*` und `--radius-*` sind Token, und ein Mandant, der
 * seine Oberfläche luftiger stellt, bekommt eine luftigere Webseite.
 *
 * Ausgeliefert als statisches Beiwerk unter `_content/ConsPro.Sites.Kit/conspro-sites.css`. Eine
 * Kundenseite, die etwas anderes will, gibt `StyleSheet` an der Hülle an und erbt dann nichts, was sie
 * nicht gewählt hat. */

/* ── die Seite ──────────────────────────────────────────────────────────────────────────────────── */

.site {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    line-height: 1.6;
}

.site__header,
.site__footer {
    padding: var(--space-md) var(--space-lg);
}

.site__footer {
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-muted);
}

/* Der Inhalt läuft nicht über die ganze Breite: eine Textzeile, die über 1400 Pixel geht, verliert beim
 * Zeilensprung den Anschluss. Die Begrenzung sitzt am Inhalt und nicht an jedem Abschnitt, damit ein
 * Abschnitt mit eigenem Grund trotzdem von Rand zu Rand gehen kann. */
.site__main > * {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

/* ── Hero ───────────────────────────────────────────────────────────────────────────────────────── */

.hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-block: var(--space-xl, 3rem);
}

@media (min-width: 48rem) {
    .hero--with-image {
        flex-direction: row;
        align-items: center;
    }

    .hero--with-image > * {
        flex: 1 1 0;
        min-width: 0;
    }
}

.hero__title {
    margin: 0 0 var(--space-sm);
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.15;
}

.hero__lead {
    margin: 0 0 var(--space-md);
    color: var(--color-muted);
    font-size: 1.125rem;
}

.hero__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg, var(--radius-md));
}

/* ── Knopf ──────────────────────────────────────────────────────────────────────────────────────── */

.button {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
}

.button--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* ── Raster und Karte ───────────────────────────────────────────────────────────────────────────── */

.grid {
    padding-block: var(--space-lg);
}

.grid__title {
    margin: 0 0 var(--space-md);
}

.grid__empty {
    color: var(--color-muted);
}

/* `auto-fill` und eine Mindestbreite: die Spaltenzahl folgt dem Platz, ohne dass irgendwo eine Liste von
 * Bildschirmbreiten gepflegt werden muss. */
.grid__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-md);
}

.card {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card__link {
    color: inherit;
    text-decoration: none;
    display: block;
}

/* Feste Höhe und `object-fit`: ohne das bestimmt das erste Bild die Zeilenhöhe, und ein hochkant
 * fotografierter Artikel zieht die ganze Reihe auseinander. */
.card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.card__name {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
}

.card__extra {
    padding: 0 var(--space-md) var(--space-sm);
    margin-top: auto;
}

/* ── Preis ──────────────────────────────────────────────────────────────────────────────────────── */

.price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    flex-wrap: wrap;
}

.price__from,
.price__tax {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.price__was {
    color: var(--color-muted);
}

.price__now {
    font-weight: 600;
}

/* ── Produktseite ───────────────────────────────────────────────────────────────────────────────── */

.detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
}

@media (min-width: 56rem) {
    .detail {
        flex-direction: row;
        align-items: flex-start;
    }

    .detail > * {
        flex: 1 1 0;
        min-width: 0;
    }
}

.detail__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.detail__more {
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: 0;
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.detail__thumb {
    width: 5rem;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm, var(--radius-md));
}

.detail__name {
    margin: 0 0 var(--space-sm);
}

.detail__sku {
    margin: 0 0 var(--space-md);
    color: var(--color-muted);
}

/* Die Beschreibung kommt als TEXT (siehe `SiteProductDetail`), also müssen die Zeilenumbrüche hier
 * überleben — das ist der ganze Grund für diese Zeile. */
.detail__description {
    white-space: pre-line;
    margin: 0 0 var(--space-md);
}

/* ── Text und Kontakt ───────────────────────────────────────────────────────────────────────────── */

.text,
.contact {
    padding-block: var(--space-lg);
}

.text--quiet,
.contact--quiet {
    background: var(--color-tray);
}

.text__title,
.contact__title {
    margin: 0 0 var(--space-md);
}

/* Die Lesebreite, und sie sitzt am Textkörper und nicht am Abschnitt: ein ruhiger Grund soll von Rand zu
 * Rand gehen, der Text darin nicht. */
.text__body {
    max-width: 42rem;
}

.contact__block {
    font-style: normal;
}

.contact__lines,
.contact__email,
.contact__phone {
    margin: 0 0 0.25rem;
}

/* ── Fuss ───────────────────────────────────────────────────────────────────────────────────────── */

.footer__legal,
.footer__note {
    margin: 0;
    font-size: 0.875rem;
}

.footer__sep {
    margin-inline: 0.5em;
}

/* ── Kontaktformular ───────────────────────────────────────────────────────── */

.enquiry {
    padding-block: var(--space-lg);
}

.enquiry--quiet {
    background: var(--color-tray);
}

.enquiry__title {
    margin: 0 0 var(--space-md);
}

/* Die Lesebreite, wie beim Textkörper: ein Eingabefeld, das 1400 Pixel breit ist, sieht aus wie ein
 * Fehler, und ein Formular liest man wie einen Text. */
.enquiry__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 36rem;
}

.enquiry__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.enquiry__label {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.enquiry__field input,
.enquiry__field textarea {
    padding: var(--space-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);

    /* Ohne das erbt ein Eingabefeld die Schrift des Browsers und nicht die der Seite - und ein Formular,
     * das aus einer anderen Zeit zu stammen scheint, ist ein Formular, dem man weniger anvertraut. */
    font: inherit;
}

.enquiry__field textarea {
    resize: vertical;
}

.enquiry__privacy {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.enquiry__send {
    align-self: flex-start;
    padding: var(--space-sm) var(--space-lg);
    border: var(--border-width) solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font: inherit;
    cursor: pointer;
}

.enquiry__notice {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    max-width: 36rem;
}

.enquiry__notice--good {
    background: var(--color-tray);
}

.enquiry__notice--bad {
    background: var(--color-tray);
    border-inline-start: 3px solid var(--color-primary);
}

/* Der Honigtopf. **Nicht `display:none`**, denn ein Sender, der nur sichtbare Felder ausfüllt, würde ein
 * verstecktes überspringen - und dann fängt die Falle niemanden. Aus dem Sichtfeld geschoben heißt: im
 * Dokument da, im Bild nicht. Zusammen mit `tabindex="-1"` und `aria-hidden` kann kein Mensch
 * hineinschreiben, weder mit der Maus noch mit der Tastatur noch mit einem Vorleseprogramm. */
.enquiry__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Die zweite Zahl der Preiszeile (W9): kleiner, ruhiger, in einer eigenen Zeile. Sie ist eine Angabe und
 * keine zweite Behauptung - wer sie so gross setzt wie die erste, hat eine Preiszeile, bei der niemand
 * weiss, was der Preis ist. */
.price__other {
    display: block;
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* ── Produktwelten (E4) ─────────────────────────────────────────────────────────────────────────── */

.worlds {
    padding-block: var(--space-lg);
}

.worlds__title {
    margin: 0 0 var(--space-md);
}

.worlds__empty {
    color: var(--color-muted);
}

.worlds__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-md);
}

.world {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}

.world__link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Dieselbe feste Höhe wie die Karte eines Artikels, aus demselben Grund. */
.world__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Das Symbol, wenn es kein Bild gibt: auf einer ruhigen Fläche in der Höhe eines Bildes, damit eine Reihe
 * aus Welten mit und ohne Bild nicht springt. */
.world__symbol {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: var(--color-tray);
}

.world__name {
    margin: 0;
    padding: var(--space-sm) var(--space-md) 0;
    font-size: 1rem;
}

.world__text {
    margin: 0;
    padding: var(--space-xs, 0.25rem) var(--space-md) var(--space-sm);
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* ── Konfigurator (E4) ──────────────────────────────────────────────────────────────────────────── */

.configurator {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 36rem;
}

.configurator__group {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.configurator__legend {
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.configurator__measures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-sm);
    width: 100%;
}

.configurator__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.configurator__label,
.configurator__hint {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.configurator__hint {
    margin: 0;
    width: 100%;
}

.configurator__input {
    padding: var(--space-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
}

/* Eine Wahl: Knopf, Farbfläche, Name in einer Zeile, umrandet wie ein Feld. */
.configurator__choice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.configurator__swatch {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: var(--border-width) solid var(--color-border);
}

.configurator__submit {
    align-self: flex-start;
    padding: var(--space-sm) var(--space-lg);
    border: var(--border-width) solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font: inherit;
    cursor: pointer;
}

/* ── der Warenkorb (Hoffmeister E5) ─────────────────────────────────────────────────────────────────── */

/* „In den Warenkorb" unter dem Konfigurator: Menge und Knopf in einer Zeile, auf dem Telefon untereinander. */
.add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.add-to-cart__quantity {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.add-to-cart__label {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.add-to-cart__input {
    width: 6rem;
    padding: var(--space-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
}

.add-to-cart__submit {
    padding: var(--space-sm) var(--space-lg);
    border: var(--border-width) solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font: inherit;
    cursor: pointer;
}

/* Die Positionen: was, wie viele, was es kostet, und der Weg hinaus — vier Spalten, die auf dem Telefon
 * untereinander rutschen statt die Seite zu verbreitern. Ein Raster für alle Zeilen (`subgrid`), sonst
 * spränge „Menge" von Zeile zu Zeile; wer `subgrid` nicht kennt, behält das eigene Raster der Zeile. */
.cart__lines {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    column-gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart__line {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-columns: subgrid;
    align-items: start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: var(--border-width) solid var(--color-border);
}

/* Eine Position, die so nicht mehr geht: gedämpft, aber da. */
.cart__line--gone {
    opacity: 0.7;
}

.cart__what {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cart__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cart__chosen,
.cart__unit,
.cart__on-request {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.cart__gone {
    font-size: 0.875rem;
    color: var(--color-danger);
}

.cart__quantity {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cart__price {
    text-align: right;
}

.cart__remove {
    margin: 0;
}

.cart__remove-button {
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-fg);
    font: inherit;
    cursor: pointer;
}

.cart__total {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--space-md);
    padding-top: var(--space-md);
}

.cart__total-label {
    font-weight: 600;
}

.cart__empty {
    color: var(--color-muted);
}

@media (max-width: 40rem) {
    .cart__lines,
    .cart__line {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cart__line {
        grid-template-columns: subgrid;
    }

    .cart__price {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* Der Weg zum Warenkorb im Kopf, mit der Zahl als kleinem Kreis. */
.cart-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.cart-link__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* „Montage gewünscht": eine Ankreuzbox mit ihrem Satz in einer Zeile. */
.enquiry__check {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}