/*
    Hersteller-Landingpage (templates/common/hersteller_landingpage.tpl).

    JEDER SELEKTOR BEGINNT MIT #hst-seite. Dieselbe Regel wie #opc-checkout
    im Checkout und #wk im Warenkorb, und aus demselben Grund: das Shop-CSS
    reicht mit globalen Regeln tief in den Inhalt (styles.css hat auf
    mehreren Shops zweimal ein * { margin:0; padding:0; transition:all },
    dazu .content { display:flex } und .content p { margin:1% 0 }).
    Die ID (Spezifitaet 1,0,0) schlaegt das nach innen, und nach ausserhalb
    kann keine Regel hier die Shop-Seite beruehren.

    Schriftart, Schriftfarbe und Hintergrund erbt die Seite ABSICHTLICH vom
    Shop - deshalb steht hier keine font-family und keine Grundfarbe. Was
    hier steht, ist Struktur: Abstaende, Raster, Rahmen. Farben kommen aus
    currentColor bzw. aus halbtransparentem Schwarz, damit sie auf jedem
    Shop passen, ohne eine Palette zu erfinden.

    Die Kacheln bekommen bewusst KEIN eigenes Raster, wenn der Shop ein
    item_small.tpl hat: dessen Klassen (.subdir_artikel, .artikel_box)
    bringen ihr Layout selbst mit. Das Raster unten greift nur dort, wo der
    Shop dazu nichts sagt (display:grid gewinnt gegen ein float-Layout des
    Shops nicht - deshalb steht es an .hst_kacheln nur als Rueckfall ueber
    :not-Bedingung nicht, sondern schlicht gar nicht; stattdessen ordnet
    sich der Inhalt wie im Shop).

    Ausgeliefert wird die Datei ueber den /source/-Symlink
    (/source/styles/hersteller_landingpage.css) - kein Einpflegen im
    Template-Repo, dieselbe Mechanik wie styles/search_v2.css.
*/

#hst-seite
{
    box-sizing: border-box;
    width: 100%;
}

#hst-seite *,
#hst-seite *::before,
#hst-seite *::after
{
    box-sizing: inherit;
}

/* ── Brotkrume ───────────────────────────────────────────────────────────── */

#hst-seite .hst_krume
{
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0.85;
}

#hst-seite .hst_krume a
{
    text-decoration: none;
}

#hst-seite .hst_krume a:hover,
#hst-seite .hst_krume a:focus
{
    text-decoration: underline;
}

#hst-seite .hst_krume_trenner
{
    margin: 0 0.4rem;
    opacity: 0.6;
}

#hst-seite .hst_krume_hier
{
    font-weight: 600;
}

/* ── Kopf ────────────────────────────────────────────────────────────────── */

#hst-seite .hst_kopf
{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 0 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba( 0, 0, 0, 0.12 );
}

#hst-seite .hst_logo
{
    flex: 0 0 auto;
    max-width: 14rem;
}

/* Das Logo wird NICHT hochskaliert. Herstellerlogos liegen in sehr
   verschiedenen Groessen vor (gemessen auf dem Zielshop: von 120 bis ueber
   900 px Breite); eine feste Breite macht aus dem kleinsten einen
   Pixelbrei. Begrenzt wird nur nach oben. */
#hst-seite .hst_logo img
{
    display: block;
    max-width: 100%;
    max-height: 6rem;
    width: auto;
    height: auto;
}

#hst-seite .hst_kopf_text
{
    flex: 1 1 18rem;
    min-width: 0;
}

#hst-seite .hst_kopf_text h1
{
    margin: 0;
    line-height: 1.2;
}

#hst-seite .hst_untertitel
{
    margin: 0.35rem 0 0;
    font-size: 1.0625rem;
    opacity: 0.85;
}

#hst-seite .hst_zahlen
{
    margin: 0.6rem 0 0;
    font-size: 0.9375rem;
    opacity: 0.9;
}

/* Die Artikelzahl hinter der Produktzahl - eine Nebenangabe, also
   zurueckgenommen. Kein eigener Farbwert: die Deckkraft wirkt auf jeder
   Palette, eine erfundene Grauabstufung nicht. */
#hst-seite .hst_varianten
{
    opacity: 0.75;
}

/* ── Textbloecke ─────────────────────────────────────────────────────────────
   Der Inhalt kommt aus dem TinyMCE des Backends und bringt eigene
   Absaetze, Listen und Ueberschriften mit. Hier steht deshalb nur die
   Lesebreite und der Abstand - die Gestaltung der Elemente gehoert dem
   Shop. */

#hst-seite .hst_text
{
    margin: 0 0 1.75rem;
    max-width: 70ch;
    line-height: 1.6;
}

#hst-seite .hst_text > *:first-child
{
    margin-top: 0;
}

#hst-seite .hst_text > *:last-child
{
    margin-bottom: 0;
}

/* ── Bloecke mit Ueberschrift ────────────────────────────────────────────── */

#hst-seite .hst_block
{
    margin: 0 0 2rem;
}

#hst-seite .hst_block > h2
{
    margin: 0 0 0.9rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

#hst-seite .hst_zeitraum
{
    font-size: 0.8125rem;
    font-weight: 400;
    opacity: 0.7;
    white-space: nowrap;
}

/* ── Kategorien ──────────────────────────────────────────────────────────────
   Der Ersatz fuer die ?kat=-Textwand (244 Zeilen auf dem groessten
   Hersteller). Zwei bis vier Spalten, jede Zeile eine echte
   Kategorieseite. */

#hst-seite .hst_kat_liste
{
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#hst-seite .hst_kat_liste li
{
    margin: 0;
    padding: 0;
    list-style: none;
}

#hst-seite .hst_kat_liste a
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    /* Tippflaeche: mindestens 2.75rem hoch, damit die Liste am Telefon
       bedienbar bleibt (dieselbe Grenze wie in der Abholort-Liste des
       Checkouts). */
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba( 0, 0, 0, 0.12 );
    border-radius: 0.25rem;
    text-decoration: none;
}

#hst-seite .hst_kat_liste a:hover,
#hst-seite .hst_kat_liste a:focus
{
    border-color: rgba( 0, 0, 0, 0.35 );
}

#hst-seite .hst_kat_name
{
    min-width: 0;
    overflow-wrap: break-word;
}

#hst-seite .hst_kat_anzahl
{
    flex: 0 0 auto;
    font-size: 0.8125rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* ── Sortierung ──────────────────────────────────────────────────────────────
   Links statt <select> mit JavaScript: die Seite bleibt ohne JS
   vollstaendig bedienbar, und jede Sortierung hat eine eigene Adresse. */

#hst-seite .hst_sortierung
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

#hst-seite .hst_sort_label
{
    opacity: 0.7;
}

#hst-seite .hst_sortierung a
{
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba( 0, 0, 0, 0.12 );
    border-radius: 0.25rem;
    text-decoration: none;
}

#hst-seite .hst_sortierung a.hst_sort_aktiv
{
    border-color: currentColor;
    font-weight: 600;
}

/* ── Kacheln ─────────────────────────────────────────────────────────────────
   Bei vorhandenem item_small.tpl bringt der Shop sein Layout mit; die
   Klasse .subdir_artikel am Behaelter steht genau dafuer im Template.
   Die Regeln hier betreffen ausschliesslich die Rueckfall-Kachel. */

#hst-seite .hst_kachel
{
    display: inline-block;
    vertical-align: top;
    width: 12rem;
    margin: 0 0.75rem 1.25rem 0;
}

#hst-seite .hst_kachel_link
{
    display: block;
    text-decoration: none;
}

#hst-seite .hst_kachel_bild
{
    display: block;
    margin-bottom: 0.5rem;
}

#hst-seite .hst_kachel_bild img
{
    display: block;
    max-width: 100%;
    height: auto;
}

#hst-seite .hst_kachel_name
{
    display: block;
    line-height: 1.35;
}

#hst-seite .hst_kachel_preis
{
    display: block;
    margin-top: 0.35rem;
    font-weight: 600;
}

/* ── Blaettern ───────────────────────────────────────────────────────────── */

#hst-seite .hst_blaettern
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 1.25rem 0 0.5rem;
}

#hst-seite .hst_blatt
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.6rem;
    border: 1px solid rgba( 0, 0, 0, 0.12 );
    border-radius: 0.25rem;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

#hst-seite a.hst_blatt:hover,
#hst-seite a.hst_blatt:focus
{
    border-color: rgba( 0, 0, 0, 0.35 );
}

#hst-seite .hst_blatt_aktiv
{
    border-color: currentColor;
    font-weight: 700;
}

#hst-seite .hst_blatt_luecke
{
    padding: 0 0.25rem;
    opacity: 0.6;
}

#hst-seite .hst_zaehler
{
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.75;
}

/* ── Schreibvarianten und leere Seite ────────────────────────────────────── */

#hst-seite .hst_aliase
{
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba( 0, 0, 0, 0.12 );
    font-size: 0.875rem;
    opacity: 0.8;
}

#hst-seite .hst_leer
{
    padding: 1.25rem;
    border: 1px solid rgba( 0, 0, 0, 0.12 );
    border-radius: 0.25rem;
}

#hst-seite .hst_leer p:first-child
{
    margin-top: 0;
}

/* ── Telefon ─────────────────────────────────────────────────────────────────
   Ein eigener Umschaltpunkt statt des shopseitigen: der liegt je Shop
   anders (1100 px auf schornsteinwelt, 970 auf perlglanz) und ist von
   einem zentralen Stylesheet aus nicht zu wissen. 40rem trifft den
   Uebergang vom Telefon zum Tablet und ist von der Shop-Breite
   unabhaengig. */

@media ( max-width: 40rem )
{
    #hst-seite .hst_kopf
    {
        gap: 1rem;
    }

    #hst-seite .hst_logo
    {
        max-width: 9rem;
    }

    #hst-seite .hst_logo img
    {
        max-height: 4rem;
    }

    #hst-seite .hst_kat_liste
    {
        grid-template-columns: 1fr;
    }

    #hst-seite .hst_kachel
    {
        width: 46%;
        margin-right: 4%;
    }
}