/* -----------------------------------------------------------------------------------------
   Eigene Ergaenzungen fuer Racing-Shop Schuller

   Diese Datei wird von css/general.css.php automatisch nach stylesheet.css
   geladen. Alles Eigene gehoert hierher und nicht in stylesheet.css: so
   bleibt nachvollziehbar, was von modified stammt und was wir ergaenzt
   haben, und ein Abgleich mit einer neuen Nova-Fassung bleibt lesbar.
   ---------------------------------------------------------------------------------------*/


/* -----------------------------------------------------------------------------------------
   Kategorien-Seitenleiste auf allen Seiten

   Nova zeigt die Kategorienspalte im Auslieferungszustand nur in der
   Kategorieuebersicht. Der alte Shop hatte sie ueberall; bei 34 Kategorien
   auf oberster Ebene ist die senkrechte Liste ausserdem uebersichtlicher
   als das waagerechte Menue im Kopf, das dafuer fuenf Zeilen braucht.

   Die Klassen entsprechen bewusst dem Vorbild flex_listing_* aus
   stylesheet.css, damit die Spalte auf allen Seiten gleich breit ist und
   an derselben Fenstergroesse verschwindet.
   ---------------------------------------------------------------------------------------*/

.flex_page_cols {
  display: flex;
}

.flex_page_sidebar {
  flex: 0 0 290px;
  width: 290px;
  padding: 0 20px 0 0;
  display: none;
}

/* min-width:0 verhindert, dass breite Inhalte wie Artikeltabellen die
   Spalte aufblaehen: ohne die Angabe waechst ein Flex-Element ueber die
   Zeilenbreite hinaus statt umzubrechen. */
.flex_page_main {
  flex: 1 1 auto;
  min-width: 0;
}

@media only screen and (min-width: 985px) {
  .flex_page_sidebar {
    display: block;
  }
}

/* Waagerechte Kategorienleiste im Kopf abschalten.

   Nova blendet die graue Leiste ab 985 Pixeln ein -- genau die Grenze, ab
   der oben auch die Seitenspalte erscheint. Beide zeigten dieselben 34
   Kategorien doppelt, die Leiste brauchte dafuer fuenf Zeilen und rund
   180 Pixel auf jeder Seite.

   Unterhalb von 985 Pixeln bleibt alles wie gehabt: dort versteckt Nova
   die Leiste ohnehin und fuehrt ueber das Menue im Kopf. Es entsteht also
   keine Fenstergroesse, in der weder Leiste noch Spalte da waere.

   Mit verschwindet der Eintrag "Hersteller". Der fuehrt nur auf MZ -- den
   einzigen echten Hersteller im Shop, der ohnehin fast das ganze
   Sortiment stellt. */
@media only screen and (min-width: 985px) {
  .layout_categories {
    display: none;
  }
}

/* Grauen Abschluss unter der Kopfzeile weglassen.

   Nova setzt unter den Kopf einen 10 Pixel hohen Rahmen in der Farbe der
   Kategorienleiste und nimmt ihn ab 985 Pixeln wieder weg -- dort schloss
   die Leiste selbst den Kopf ab. Da die Leiste nun ueberall entfaellt,
   blieb unterhalb von 985 Pixeln ein grauer Streifen ohne Bezug uebrig,
   waehrend breite Fenster gar keinen Abschluss hatten.

   Beides ist jetzt gleich: Kopf und Inhalt gehen ohne Trennung
   ineinander ueber, so wie es am Rechner schon war. Der Kopf des
   Bestellvorgangs fuehrt denselben Rahmen ohne Breitenbedingung und ist
   deshalb mit aufgenommen. */
.layout_header,
.layout_header_checkout {
  border-bottom: none;
}


/* Suche im Kopf: nur das Lupensymbol, es fuehrt auf die Detailsuche.

   Nova zeigte ab 920 Pixeln ein ausgeklapptes Suchfeld in der Kopfzeile
   und blendete dafuer das Symbol aus. Bei uns steht an jeder
   Fenstergroesse nur das Symbol, und es ist ein Verweis auf die
   Suchseite (siehe index.html, Abschnitt col_search).

   Zwei Werte muessen dafuer zurueckgesetzt werden, die Nova ab 920 Pixeln
   ueberschreibt: das Symbol war dort verborgen, und die Suchspalte dehnte
   sich ueber den freien Platz. Sie bekommt jetzt wieder ihre feste
   Breite.

   col_filler nimmt den frei gewordenen Platz auf. Ohne das Element
   ruecken Logo und Symbole zusammen an den linken Rand, weil sonst nichts
   mehr in der Kopfzeile dehnbar waere. */
@media only screen and (min-width: 920px) {
  .col_filler {
    display: block;
  }
  .col_search {
    width: 50px;
    flex: initial;
    padding: 0 0 0 10px;
  }
  #search_short {
    display: block;
  }
}

/* Der Verweis fuellt den runden Knopf aus, den Nova fuer das Symbol
   gestaltet. Die Groesse des Zeichens steckt bereits in Novas Regel
   #search_short .fa-solid, hier fehlt nur noch der Blockfluss und die
   Farbe des Elternelements statt der Verweisfarbe. */
#search_short > div > a {
  display: block;
  color: inherit;
  text-decoration: none;
}


/* Menuesymbol auf breiten Fenstern ausblenden.

   Nova bindet das Symbol an keine Fenstergroesse, es war also von Anfang
   an ueberall sichtbar. Dahinter faehrt eine Tafel von der Seite ein, die
   dieselben 34 Kategorien fuehrt wie die Seitenleiste -- auf breiten
   Fenstern ein zweiter Weg zum selben Ziel.

   Die Grenze ist dieselbe wie bei der Seitenleiste: ab 985 Pixeln
   uebernimmt die Spalte, darunter bleibt das Symbol die einzige
   Navigation und wird gebraucht.

   Das Element ist ab 600 Pixeln ein fester Kasten von 50 Pixeln
   (Sammelregel mit Warenkorb und Kundenkonto in stylesheet.css). Es
   dehnt sich dort also nicht, das Ausblenden verschiebt nichts -- den
   frei werdenden Platz nimmt col_filler auf. */
@media only screen and (min-width: 985px) {
  .col_menu {
    display: none;
  }
}


/* Lesebreite fuer Textseiten.

   Nova rahmte Warenkorb, Anmeldung, Kundenkonto und die Inhaltsseiten in
   content_small (1140 px), Startseite und Kategorien dagegen in
   content_big (1440 px). Beide Rahmen sind mittig gesetzt, die
   Seitenleiste waere deshalb beim Blaettern zwischen den Seitentypen hin
   und her gesprungen.

   Jetzt rahmt content_big alle Seiten, der linke Rand liegt also fest.
   Damit Formulare und Fliesstext nicht unnoetig in die Breite laufen,
   bekommt die Hauptspalte dieser Seiten hier wieder ihre alte Breite:
   1140 minus 290 fuer die Leiste minus 20 fuer den Abstand. */
.flex_page_main_lesebreite {
  max-width: 830px;
}

/* Inhaltsseiten (Impressum, AGB, Widerruf) fuehren rechts bereits eine
   Spalte mit weiterfuehrenden Verweisen. Drei Spalten nebeneinander
   brauchen mehr Platz, sonst wird der Lesetext zu schmal. */
@media only screen and (max-width: 1199px) {
  .dm_content .flex_page_sidebar {
    display: none;
  }
}


/* -----------------------------------------------------------------------------------------
   Heikos Schriftzug im Kopf

   Nova rechnet mit einem Logo im Verhaeltnis 3,5:1 und schreibt Breite
   und Hoehe fest ins CSS (200 x 57). Heikos Schriftzug ist nach dem
   Beschneiden 496 x 45, also 11:1 -- in den Nova-Rahmen gezwaengt wuerde
   er zusammengestaucht. Die Masse hier folgen deshalb seinem Verhaeltnis.

   Die Vorlage bindet img/logo_head.png ein; die Datei wurde ersetzt. Das
   urspruengliche Nova-Logo liegt daneben als logo_head_nova.png.

   Die Vorlage ist ein Zwischenstand: die Quelle ist ein GIF von 2011 mit
   16 Farben und harten Kanten. Fuer ein sauberes Ergebnis braucht es eine
   hochaufloesende Fassung von Heiko, am besten als SVG.
   ---------------------------------------------------------------------------------------*/

.col_logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.col_logo img {
  width: 260px;
  height: 24px;
}

@media only screen and (min-width: 600px) {
  .col_logo {
    width: 340px;
    justify-content: flex-start;
  }
  .col_logo img {
    width: 340px;
    height: 31px;
  }
}

/* Ab 920 Pixeln zieht sich die Suche auf ihr Symbol zusammen (siehe oben).
   Der frei gewordene Platz geht an den Schriftzug. Die Hoehe folgt dem
   Seitenverhaeltnis 11:1 der Vorlage, damit nichts verzerrt. */
@media only screen and (min-width: 920px) {
  .col_logo {
    width: 480px;
    height: auto;
  }
  .col_logo img {
    width: 480px;
    height: 44px;
  }
}

/* Im Bestellvorgang steht das Logo allein im Kopf. Dort gibt Nova nur die
   Breite vor und laesst die Hoehe mitlaufen -- das passt bereits, nur der
   Rahmen war auf das kompaktere Nova-Logo zugeschnitten. */
.col_logo_checkout {
  width: 240px;
  height: auto;
}

/* Auf der Kategorieuebersicht sass die Spalte bisher unter der
   Brotkrumenleiste und bekam ihren Abstand von der Ueberschrift
   (Klasse mt_40 in boxes/box_sub_categories.html). In den uebrigen
   Zweigen steht sie neben der Brotkrumenleiste, dort faellt derselbe
   Abstand zu gross aus. */
.flex_page_sidebar .box_sub_categories .subline.mt_40 {
  margin-top: 0;
}

/* Kategoriebild ueber der Artikelliste. Nova sieht dort ein Banner vor
   (fester Rahmen 300 px hoch, Bild auf volle Breite gezogen und beschnitten).
   Heikos Bilder sind Explosionszeichnungen mit 250-300 px Breite; im alten
   Shop standen sie als kleines Symbol (57x40) neben der Ueberschrift. Hier
   in natuerlicher Groesse, nicht vergroessert, nicht beschnitten, auf 200 px
   Hoehe begrenzt. Zum Ausblenden: display: none auf .cat_description_image. */
.cat_description_image {
  height: auto;
  margin: 0 0 25px 0;
}
.cat_description_image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}


/* =========================================================================
   Gestaltung: Markenfarbe und Anlehnung an den alten Shop
   Die Farben selbst stehen in css/themes/schuller.css (Nova-Farbvariablen,
   gewaehlt ueber THEME_COLOR). Hier steht, was ueber Variablen nicht geht.
   ========================================================================= */

/* Kopfzeile: hellgrauer Grund (--header_bg im Schema, wie der alte Shop) mit
   grauer Haarlinie als Abschluss. Ein rotes Band (3 und 8 px) war probiert
   und Christian zu schwer; das Rot bleibt Schriftzug, Symbolen, Preisen und
   Knoepfen. Ersetzt den grauen 10-Pixel-Rahmen von Nova (oben abgeschaltet). */
.layout_header,
.layout_header_checkout {
  border-bottom: 1px solid #ddd;
}

/* Kategorienkasten: Ueberschrift als dunkler Block wie im alten Shop
   (dort dunkelgrau mit weisser Schrift). */
.box_sub_categories .subline {
  background: #2b2b2b;
  color: #fff;
  padding: 10px 12px;
  margin: 0;
  border-bottom: none;
}
.box_sub_categories .subcats_menu_box,
.box_sub_categories .subcats_menu_hover_box {
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
}
ul.subcats_menu li > a,
ul.subcats_menu_hover > li > a {
  padding-left: 12px;
}
ul.subcats_menu ul li > a {
  padding-left: 27px;
}
ul.subcats_menu ul li > a::before {
  left: 12px;
}
/* aktiver Eintrag: roter Balken am linken Rand */
ul.subcats_menu li.Selected > a {
  box-shadow: inset 4px 0 0 #8e0709;
}

/* Artikelkacheln: Preis kraeftig in der Markenfarbe (Farbe aus dem Schema),
   beim Ueberfahren ein roter Rahmen innerhalb der Kachel. */
.lb_price .item_price {
  font-weight: 700;
}
.listingbox .lb_inner {
  transition: box-shadow 0.2s ease-in-out;
}
.listingbox:hover .lb_inner {
  box-shadow: inset 0 0 0 2px #8e0709;
}

/* Bild-Nr. (Position in der Explosionszeichnung) unter dem Artikelnamen,
   in Kachel- und Listenansicht. Wird per Smarty-Modifier "bildnummer" aus der
   Artikelbeschreibung gezogen (templates/tpl_schuller/smarty/). */
.lb_bildnr,
.lr_bildnr {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-align: left;
  color: #8e0709;
}
.lb_bildnr {
  margin: 4px 0 0 0;
}
.lr_bildnr {
  margin: -10px 0 12px 0;
}

/* Startseitentext: einspaltig statt in zwei Spalten (Nova setzt ab 920 px
   column-count: 2, dadurch standen Ueberschrift und Hinweis auseinander).
   Lesebreite begrenzt. */
.greeting_text {
  column-count: 1;
  max-width: 780px;
}
.box_greeting {
  margin: 40px 0 30px 0;
}

/* Hinweiskasten fuer den Content Manager (<div class="hinweis">...</div>):
   duenner roter Rahmen, kraeftiger Balken links, leicht getoenter Grund.
   Wird auch im Editor so angezeigt (tpl_custom.css ist dort eingebunden). */
.hinweis {
  border: 1px solid #8e0709;
  border-left-width: 4px;
  background: #fbf4f4;
  padding: 12px 16px;
  margin: 0 0 20px 0;
  border-radius: 3px;
}
.hinweis p {
  margin: 0 0 8px 0;
}
.hinweis p:last-child {
  margin-bottom: 0;
}

/* Fussbereich (Anthrazit, Farben im Schema): Zahlungslogos brauchen auf dem
   dunklen Grund einen hellen Kasten und duerfen nicht ausgegraut sein. */
.content_box_payment > span img {
  opacity: 1;
  filter: none;
}