/*
    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 ────────────────────────────────────────────────────────────────── */

/* ── DER KOPFBEREICH IST WEISS HINTERLEGT ──────────────────────────────────
   Vorgabe M. Niewerth 09.09.2026 ("weiss hinterlegt, mit den ueblichen
   runden Ecken"). Umkreist waren Kopf UND Filterleiste, deshalb umschliesst
   der Kasten beide.

   **Farbe und Radius sind beim Shop GEERNTET, nicht erfunden** - genau die
   Werte, mit denen die Kacheln daneben stehen (styles.css: .artikel_box
   { background: var(--sw-color-01) } und .subdir_artikel .artikel_box
   { border-radius: var(--border_radius_1) }). Auf diesem Shop sind das
   #FFFAF7 und 10px; der Kopf sieht damit aus wie die Kacheln darunter und
   nicht wie ein Fremdkoerper.

   **Die Rueckfallkette ist Pflicht, nicht Vorsicht:** --sw-color-01 ist eine
   Variable DIESES Shops, und dieses Stylesheet gilt zentral fuer alle. Ohne
   sie greift --white (die Variable haben die webanOS-Shops laut
   checkout.css durchgaengig), und ohne beide bleibt der Kasten
   TRANSPARENT - also genau so, wie die Seite vorher aussah. Ein fest
   gesetztes Weiss waere auf einem dunkel gestalteten Shop weisse Schrift
   auf weissem Grund; die Schriftfarbe erbt diese Seite absichtlich vom
   Shop und wird hier nicht angefasst.

   Beide Radius-Schreibweisen werden abgefragt: das Buendel dieses Shops
   definiert --border_radius_1 (Unterstrich) UND --border-radius_1
   (Bindestrich). */
#hst-seite .hst_kopfbereich
{
    background: var( --sw-color-01, var( --white, transparent ) );
    border-radius: var( --border_radius_1, var( --border-radius_1, 0.625rem ) );
    padding: 1.25rem;
    margin: 0 0 1.5rem;
}

/* Der Kopf traegt die Trennlinie zur Filterleiste weiter, aber im Kasten
   ist sein Aussenabstand nach unten kleiner - sonst stuende die Linie zu
   weit von der Leiste weg. */
#hst-seite .hst_kopfbereich .hst_kopf
{
    margin-bottom: 1.25rem;
}

/* Die Filterleiste im Kasten braucht keinen eigenen Abstand nach unten -
   den hat der Kasten. */
#hst-seite .hst_kopfbereich .hst_kategorien
{
    margin-bottom: 0;
}

/* Die vier position-Werte sind ein RUECKBAU, keine Gestaltung: auf
   schornsteinwelt-grosshandel.de stellt styles.css:6190 jedes <header> auf
   "position: fixed; top: 0; left: 0; width: 100%; z-index: 99999" - der
   Kopf dieser Seite lag damit oben im Fenster ueber der Infoleiste und der
   Navigation des Shops. Der Kasten ist deshalb ein <div>; die Regeln hier
   sind das Netz fuer einen Shop, der denselben Griff ueber einen
   Nachbarselektor tut. static macht top/left/z-index wirkungslos, sie
   stehen der Vollstaendigkeit halber dabei. */
#hst-seite .hst_kopf
{
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    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 der
   Abstand - die Gestaltung der Elemente gehoert dem Shop.

   KEINE max-width (Vorgabe M. Niewerth 09.09.2026: "Den Text brichst du
   aktuell um. Auf dem Desktop sollte der durchgehen."). Hier stand
   "max-width: 70ch" als Lesebreite; gemessen brach der Einleitungstext
   damit auf einem 1600 px breiten Fenster bei etwa 750 px um, waehrend
   der weisse Kasten bis 1500 px reicht - die rechte Haelfte blieb leer.
   Die Zeilenlaenge begrenzt jetzt der Kasten bzw. der Inhaltsbereich der
   Seite, also dieselbe Kante wie bei allem anderen auf dieser Seite.
   Am Telefon aendert das nichts: dort war die Spalte immer schmaler als
   70 Zeichen, die Regel hat da nie gegriffen. */

#hst-seite .hst_text
{
    margin: 0 0 1.75rem;
    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 );
}

/* Die AKTIVE Kachel ist ein <span>, kein Link (kein Link auf die Seite, auf
   der man steht). Sie muss trotzdem dieselbe Form haben, sonst springt die
   Leiste beim Filtern - deshalb dieselbe Regel wie fuer den Link, nur mit
   staerkerem Rahmen und fetter Schrift statt einer erfundenen Farbe. */
#hst-seite .hst_kat_liste .hst_kat_aktiv
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid currentColor;
    border-radius: 0.25rem;
    font-weight: 600;
}

/* Der Weg in die echte Kategorieseite unter der Leiste. */
#hst-seite .hst_kat_hinweis
{
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
}

#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%;
    }
}