/* ------------------------------------------------------------------
   artifex24 Startseite - gesamtes Stylesheet.

   Bewusst EINE Datei statt CSS je Portlet: JTL laedt im OnPage Composer
   nur preview.css und im Frontend nur <Klasse>.css
   (JTL\OPC\PortletStyles::getCssFile) - nie beides. Portletspezifische
   Dateien waeren im Editor also unsichtbar und die Redaktion saehe ein
   voellig anderes Layout als der Kunde. Ueber getExtraCssFiles() greift
   diese Datei in beiden Modi.
   ------------------------------------------------------------------ */
.ax-sektion{
  --ax-tief:#2d5475;
  --ax-stahl:#2d5475;
  --ax-span:#f8bf00;
  --ax-grund:#eceef1;
  --ax-flaeche:#ffffff;
  --ax-linie:#d6dbe1;
  --ax-text:#17222e;
  --ax-leise:#5a6875;
  --ax-breite:1280px;

  padding:72px 0;
  color:var(--ax-text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
}
.ax-sektion--eng{padding:56px 0}

.ax-sektion h1,
.ax-sektion h2,
.ax-sektion h3{
  font-family:Archivo,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variation-settings:'wdth' 112;
  font-weight:700;
  letter-spacing:-.012em;
  line-height:1.12;
  margin:0;
}
.ax-sektion img{max-width:100%;display:block}
.ax-sektion a{color:inherit}
.ax-sektion :focus-visible{outline:3px solid var(--ax-span);outline-offset:2px}

.ax-wrap{max-width:var(--ax-breite);margin:0 auto;padding:0 24px}

/* gelber Akzentbalken vor Ueberschriften */
.ax-balken{display:block;width:56px;height:5px;background:var(--ax-span);margin-bottom:22px}

/* Kopfzeile: Ueberschrift + Trennstrich + optionaler Mehr-Link */
.ax-kopfzeile{display:flex;align-items:baseline;gap:20px;margin-bottom:32px}
.ax-kopfzeile h2{font-size:clamp(24px,2.6vw,34px);white-space:nowrap}
.ax-kopfzeile .ax-strich{flex:1;height:1px;background:var(--ax-linie)}
.ax-kopfzeile .ax-mehr{font-size:14px;font-weight:500;color:var(--ax-stahl);text-decoration:none;white-space:nowrap}
.ax-kopfzeile .ax-mehr:hover{text-decoration:underline}

@media (max-width:620px){
  .ax-sektion{padding:48px 0}
  .ax-kopfzeile{flex-wrap:wrap;gap:12px}
  .ax-kopfzeile h2{white-space:normal}
  .ax-kopfzeile .ax-strich{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ax-sektion *{transition:none!important}
}

/* ---------- ArtifexDauerbrenner ---------- */
.ax-brenner{
  text-decoration:none;background:var(--ax-flaeche,#fff);
  border:1px solid var(--ax-linie,#d6dbe1);border-radius:4px;
  padding:18px 14px 16px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  transition:border-color .18s ease, transform .18s ease;
}
.ax-brenner:hover{border-color:var(--ax-stahl,#2d5475);transform:translateY(-3px)}
.ax-brenner__bild{width:100%;aspect-ratio:1/1;display:grid;place-items:center}
.ax-brenner__bild img{max-width:100%;max-height:100%;width:auto;object-fit:contain}
.ax-brenner__titel{
  font-family:Archivo,Inter,sans-serif;font-variation-settings:'wdth' 100;
  font-size:14px;font-weight:600;line-height:1.35;color:var(--ax-text,#17222e);
}
.ax-brenner .ax-platzhalter{font-size:28px;color:#c3ccd6}

/* ---------- ArtifexFaqEintrag ---------- */
.ax-faq{border-bottom:1px solid var(--ax-linie,#d6dbe1)}
.ax-faq[open]{background:var(--ax-flaeche,#fff)}
.ax-faq > summary{
  list-style:none;cursor:pointer;padding:20px 46px 20px 20px;position:relative;
  font-family:Archivo,Inter,sans-serif;font-variation-settings:'wdth' 106;
  font-weight:600;font-size:17px;
}
.ax-faq > summary::-webkit-details-marker{display:none}
.ax-faq > summary::after{
  content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ax-stahl,#2d5475);
  border-bottom:2px solid var(--ax-stahl,#2d5475);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.ax-faq[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.ax-faq > summary:hover{color:var(--ax-stahl,#2d5475)}
.ax-faq__antwort{padding:0 20px 22px;color:#33414f;max-width:90ch}
.ax-faq__antwort a{color:var(--ax-stahl,#2d5475)}
.ax-faq__antwort p:last-child{margin-bottom:0}

/* ---------- ArtifexGitter ---------- */
.ax-gitter{display:grid;gap:20px}
.ax-gitter--kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
.ax-gitter--brenner{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ax-gitter--faq,
.ax-gitter--stream{display:block}

@media (max-width:1000px){
  .ax-gitter--kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ax-gitter--brenner{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .ax-gitter--kacheln{grid-template-columns:1fr}
  .ax-gitter--brenner{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- ArtifexIntro ---------- */
.ax-intro{padding:64px 0 8px;background:var(--ax-grund,#eceef1)}
.ax-intro .ax-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:start;
}
.ax-intro h1,.ax-intro h2{
  font-size:clamp(30px,4vw,52px);
  font-variation-settings:'wdth' 116;
  line-height:1.05;
}
.ax-intro__text p{margin:0 0 16px;font-size:17px;max-width:60ch;color:#2c3945}
.ax-intro__text p:last-child{margin-bottom:0}
.ax-intro__leise p{color:var(--ax-leise,#5a6875);font-size:16px}
.ax-intro .ax-leer{color:#9aa6b2}

@media (max-width:1000px){
  .ax-intro .ax-wrap{grid-template-columns:1fr;gap:26px}
}

/* ---------- ArtifexKachel ---------- */
.ax-kachel{
  position:relative;display:flex;flex-direction:column;
  background:var(--ax-flaeche,#fff);
  border:1px solid var(--ax-linie,#d6dbe1);border-radius:4px;
  overflow:hidden;text-decoration:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.ax-kachel:hover{border-color:var(--ax-stahl,#2d5475);box-shadow:0 8px 26px rgba(15,34,51,.10)}
.ax-kachel__bild{aspect-ratio:16/10;display:grid;place-items:center;padding:26px;background:#fff}
.ax-kachel__bild img{max-height:100%;width:auto;object-fit:contain;transition:transform .25s ease}
.ax-kachel:hover .ax-kachel__bild img{transform:scale(1.04)}
.ax-kachel__leiste{
  margin-top:auto;background:var(--ax-tief,#2d5475);color:#fff;padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  font-family:Archivo,Inter,sans-serif;font-variation-settings:'wdth' 108;
  font-weight:600;font-size:16px;line-height:1.3;

  /* Platz fuer zwei Zeilen reservieren. Ohne das ist die Kachel mit
     einzeiligem Namen niedriger als die mit zweizeiligem - im mobilen
     Slider stehen sie direkt nebeneinander und der Versatz faellt sofort
     auf. Das Bild hat ein festes Seitenverhaeltnis, also wird die
     Kachelhoehe damit vorhersagbar: Bild + feste Leiste. */
  min-height:calc(2 * 1.3em + 28px);
}
.ax-kachel__leiste::before{content:"";width:4px;align-self:stretch;background:var(--ax-span,#f8bf00);flex:0 0 4px}
.ax-kachel__pfeil{margin-left:auto;color:var(--ax-span,#f8bf00);font-size:18px;line-height:1}
.ax-kachel .ax-platzhalter{font-size:32px;color:#c3ccd6}

/* ---------- ArtifexMarken ---------- */
.ax-marken{
  background:var(--ax-flaeche,#fff);
  border-top:1px solid var(--ax-linie,#d6dbe1);
  border-bottom:1px solid var(--ax-linie,#d6dbe1);
}
.ax-marken .ax-wrap{padding-top:44px;padding-bottom:44px}
.ax-marken__gitter{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:28px 44px;align-items:center;
}
.ax-marken__gitter img{
  height:30px;width:auto;max-width:130px;object-fit:contain;opacity:.85;
  transition:opacity .2s ease, transform .2s ease;
}
.ax-marken__gitter a:hover img{opacity:1;transform:scale(1.06)}

/* ---------- ArtifexStory ---------- */
.ax-story{background:var(--ax-tief,#2d5475);color:#e5ecf2}
.ax-story .ax-wrap{padding-top:76px;padding-bottom:76px}
.ax-story h2{
  font-size:clamp(26px,3vw,40px);font-variation-settings:'wdth' 116;
  color:#fff;max-width:22ch;
}
.ax-story__kopf{margin-bottom:34px}
.ax-story__panorama{width:100%;aspect-ratio:951/239;object-fit:cover;border-radius:4px;display:block}
.ax-story__collage{
  display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:10px;
}
.ax-story__collage img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;display:block}
.ax-story__lead{font-size:18px;color:#fff;font-weight:600;margin:40px 0 20px;max-width:60ch}
.ax-story__text{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ax-story__text p{margin:0 0 12px;color:#bfced9}
.ax-story__text p:last-child{margin-bottom:0}

@media (max-width:1000px){
  .ax-story__collage{grid-template-columns:repeat(4,1fr)}
  .ax-story__text{grid-template-columns:1fr;gap:16px}
}
@media (max-width:620px){
  .ax-story__collage{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Nativer Product-Stream im artifex24-Look ----------
   Artikelauswahl und Markup kommen vom Core-Portlet "Product-Stream"
   (Darstellung: Galerie), hier wird nur das Aussehen angeglichen - streng auf
   .ax-gitter--stream begrenzt, damit Kategorieseiten und Suche unberuehrt
   bleiben.

   Das Bootstrap-Flexraster des Themes wird dabei durch CSS Grid ersetzt.
   Gruende, alle im Browser nachgemessen:
     - clear.css setzt .gallery{align-items:flex-start}; die Kacheln einer
       Reihe werden dadurch nie gleich hoch. Grid-Zeilen sind das von Haus aus.
     - Die Bootstrap-Gutter ergeben 32px zwischen den Kacheln, der Entwurf
       will 20px. Mit gap ist das exakt einstellbar.
     - Die Spaltenzahl haengt sonst an col-6/col-md-4/col-xl-3, die ich nur
       ueberstimmen koennte. Mit grid-template-columns ist sie direkt gesetzt.
   Der Verhaeltnis-Wrapper des Bildes wird weiterhin nicht angefasst - Padding
   oder Hoehe darauf zerreisst die ::before-Konstruktion des Themes. */
.ax-gitter--stream > .row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin:0;
  /* Zwingend: alle artifex2025-Themes (clear, midnight, blackline) setzen
     ".gallery, .list { align-items: flex-start }". Die OPC-Product-Stream-Row
     traegt die Klasse "gallery", die Regel greift also auch auf dem Grid -
     Items wuerden sich oben ausrichten statt zu strecken und die Kacheln
     blieben ungleich hoch. */
  align-items:stretch;
}
.ax-gitter--stream[data-spalten="2"] > .row{grid-template-columns:repeat(2,minmax(0,1fr))}
.ax-gitter--stream[data-spalten="4"] > .row{grid-template-columns:repeat(4,minmax(0,1fr))}
.ax-gitter--stream[data-spalten="5"] > .row{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Die Spalten sind jetzt Grid-Items: Bootstrap-Breiten und -Abstaende raus.
   height:auto mit !important ist hier nicht Faulheit, sondern noetig: das
   Theme gleicht Kachelhoehen per JavaScript an und schreibt das Ergebnis als
   Inline-Style auf die Spalte (gemessen auf artifex24.de:
   style="height: 598.805px"). Inline schlaegt jedes Stylesheet. Der Wert wird
   einmal berechnet und beim Verkleinern des Fensters nicht aktualisiert -
   daher mobil zu hohe Kacheln mit Leerraum, bzw. abgeschnittener Inhalt.
   Die Hoehen macht hier ohnehin das Grid (bzw. der Inhalt im Slider). */
.ax-gitter--stream .product-wrapper{
  flex:none;max-width:none;width:auto;
  padding:0;margin:0;
  display:flex;
  height:auto !important;
}
.ax-gitter--stream .product-wrapper > .productbox{width:100%}

@media (max-width:991.98px){
  .ax-gitter--stream > .row,
  .ax-gitter--stream[data-spalten="4"] > .row,
  .ax-gitter--stream[data-spalten="5"] > .row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575.98px){
  .ax-gitter--stream > .row,
  .ax-gitter--stream[data-spalten="2"] > .row,
  .ax-gitter--stream[data-spalten="4"] > .row,
  .ax-gitter--stream[data-spalten="5"] > .row{grid-template-columns:1fr}
}

.ax-gitter--stream .productbox{
  background:var(--ax-flaeche,#fff);
  border:1px solid var(--ax-linie,#d6dbe1);
  border-radius:4px;
  transition:border-color .18s ease, box-shadow .18s ease;

  /* Kein overflow:hidden auf dem Kasten und ausdruecklich height:auto.
     Das Theme setzt per JS Kachelhoehen; die veralten beim Verkleinern des
     Fensters, und mit overflow:hidden wird der Produktname dann mitten im
     Wort abgeschnitten (auf artifex24.de gemessen: Inhalt 608px in einer
     599px hohen Box). Die abgerundete Ecke uebernimmt der Bild-Wrapper. */
  height:auto;
  overflow:visible;
}
.ax-gitter--stream .productbox-image.square{
  overflow:hidden;
  border-radius:3px 3px 0 0;
}
.ax-gitter--stream .productbox:hover{
  border-color:var(--ax-stahl,#2d5475);
  box-shadow:0 8px 26px rgba(15,34,51,.10);
}

/* Bildflaeche: 4/3 statt des quadratischen Theme-Defaults. Das Verhaeltnis
   steckt im ::before des .square. Das Bild fuellt die Flaeche randlos aus -
   der Entwurf hatte hier 24px Innenabstand, gewuenscht ist volle Breite. */
.ax-gitter--stream .productbox-image.square::before{padding-bottom:75%}
.ax-gitter--stream .productbox-image .inner{padding:0}
.ax-gitter--stream .productbox-image .inner img{
  width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;
}

/* Der Produktkasten teilt sich in zwei Bootstrap-Spalten: erste = Bild,
   zweite = Text (im Browser geprueft). Das Bild soll randlos ueber die volle
   Kachelbreite laufen, der Text den Innenabstand des Entwurfs bekommen. */
.ax-gitter--stream .productbox-inner > .row{margin-left:0;margin-right:0}
/* Oben 18px, weil das Bild jetzt randlos anschliesst - im Entwurf sass der
   Abstand noch im Bild-Innenabstand. */
.ax-gitter--stream .productbox-inner > .row > .col{padding:18px 20px 20px}
.ax-gitter--stream .productbox-inner > .row > .col:first-child{padding:0}

.ax-gitter--stream .productbox-title{
  font-family:Archivo,Inter,sans-serif;font-variation-settings:'wdth' 104;
  font-size:16px;font-weight:600;line-height:1.35;margin-bottom:14px;
  /* Zwei Zeilen reservieren. Das Theme kuerzt den Namen ohnehin auf zwei
     Zeilen (text-clamp-2); ohne die Reserve ist die Kachel mit einzeiligem
     Namen niedriger und im Slider entsteht ein Treppenversatz. */
  min-height:calc(2 * 1.35em);
}
.ax-gitter--stream .productbox-title a{color:var(--ax-text,#17222e);text-decoration:none}
.ax-gitter--stream .productbox-title a:hover{color:var(--ax-stahl,#2d5475)}

/* Preis: .price und .productbox-price sitzen auf DEMSELBEN Element - ein
   Selektor ".productbox-price .price" trifft deshalb nichts. */
.ax-gitter--stream .productbox .price{
  font-family:Archivo,Inter,sans-serif;font-variation-settings:'wdth' 110;
  font-weight:700;font-size:26px;color:var(--ax-tief,#2d5475);
}
.ax-gitter--stream .productbox .price-note,
.ax-gitter--stream .productbox .otherPrice_wrapper,
.ax-gitter--stream .productbox .base-price{
  font-size:13px;font-weight:400;color:var(--ax-leise,#5a6875);
}
.ax-gitter--stream .productbox .old-price{color:var(--ax-leise,#5a6875)}

/* Der Entwurf zeigt in der Kachel nur Name und Preis. */
.ax-gitter--stream .productbox .info-essential{display:none}

/* Aktions-Ribbon in der Akzentfarbe des Entwurfs */
.ax-gitter--stream .productbox .ribbon,
.ax-gitter--stream .productbox .badge-ribbon{
  background:var(--ax-span,#f8bf00);color:var(--ax-tief,#2d5475);
  border-radius:2px;font-weight:600;letter-spacing:.02em;
}

/* Preisanzeige abschaltbar (Gitter-Property "Preise anzeigen").
   Der Preisblock im Produktkasten ist der [itemprop="offers"]-Container
   (templates/.../productlist/item_box.tpl) und enthaelt ausschliesslich die
   Preisausgabe - Warenkorb-Button und Schnellaktionen liegen ausserhalb und
   bleiben erhalten. */
/* Zwei Selektoren mit Absicht: das Microdata-Attribut itemprop="offers"
   steht zwar in der lokalen item_box.tpl, wird vom installierten
   artifex2025 aber nicht ausgegeben (auf artifex24.de nachgeprueft - dort
   ist es ein nacktes div). .price_wrapper kommt aus der theme-eigenen
   productdetails/price.tpl und ist in beiden Faellen da. Ausgeblendet
   werden damit Preis, Grundpreis, UVP und Steuerhinweis; Warenkorb-Button
   und Schnellaktionen liegen ausserhalb und bleiben. */
.ax-gitter--ohne-preise .productbox .price_wrapper,
.ax-gitter--ohne-preise .productbox [itemprop="offers"]{display:none}

/* Ohne Preise faellt auch die Bewertung weg: sie ist der letzte Block, der
   mal da ist und mal nicht, und liesse die Kacheln sonst unterschiedlich
   hoch stehen. Uebrig bleiben Bild und Name - beide mit fester Hoehe.
   .rating ist der Wrapper aus productdetails/rating.tpl (a oder span).
   Bewusst kein [class*="rating"]: das trifft auch Fremdklassen. */
.ax-gitter--ohne-preise .productbox .rating{display:none}

/* Einleitungstext unter der Kopfzeile. Die Kopfzeile bringt bereits
   margin-bottom:32px mit, deshalb hier nur der Abstand nach unten und ein
   negativer Ausgleich nach oben, damit Ueberschrift und Text zusammengehoeren. */
.ax-sektion__intro{
  margin:-18px 0 30px;
  max-width:80ch;
  color:#33414f;
}
.ax-sektion__intro p{margin:0 0 12px}
.ax-sektion__intro p:last-child{margin-bottom:0}
.ax-sektion__intro a{color:var(--ax-stahl,#2d5475)}

/* ---------- ArtifexKategorien ----------
   Nutzt dieselben .ax-kachel-Styles wie die handgesetzte Kategorie-Kachel,
   bringt aber eine eigene Spaltensteuerung mit. */
.ax-gitter--kat-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ax-gitter--kat-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ax-gitter--kat-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ax-leer-hinweis{
  grid-column:1/-1;padding:36px;text-align:center;color:#9aa6b2;
  border:1px dashed #c3ccd6;border-radius:4px;
}
@media (max-width:1000px){
  .ax-gitter--kat-3,
  .ax-gitter--kat-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .ax-gitter--kat-2,
  .ax-gitter--kat-3,
  .ax-gitter--kat-4{grid-template-columns:1fr}
}

/* ---------- Mobiler Slider ----------
   Statt untereinander gestapelter Kacheln auf kleinen Schirmen eine
   horizontale Wischleiste mit Einrastpunkten - ohne JavaScript, nur
   CSS scroll-snap. Die negativen Margins heben das Padding von .ax-wrap
   auf, damit die Leiste bis an den Bildschirmrand laeuft und die naechste
   Kachel angeschnitten sichtbar bleibt. Das ist der Hinweis, dass es
   weitergeht. */
@media (max-width:767.98px){
  .ax-gitter--stream > .row,
  .ax-gitter--kacheln,
  .ax-gitter--brenner,
  .ax-gitter[class*="ax-gitter--kat-"]{
    display:flex;
    flex-wrap:nowrap;
    /* Bewusst flex-start statt stretch: im Slider liegen ALLE Kacheln in
       einer einzigen Flex-Zeile. Mit stretch bekaeme jede die Hoehe der
       groessten, und bei ungleichem Inhalt (mal mit Sternen, mal ohne Preis,
       mal mit Technikzeile) stehen darunter dreistellige Leerraeume.
       Im mehrzeiligen Raster auf groesseren Schirmen bleibt stretch, dort
       teilen sich nur die Kacheln einer Zeile die Hoehe. */
    align-items:flex-start;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:0 -24px;
    padding:0 24px 12px;
    scrollbar-width:none;
  }
  .ax-gitter--stream > .row::-webkit-scrollbar,
  .ax-gitter--kacheln::-webkit-scrollbar,
  .ax-gitter--brenner::-webkit-scrollbar,
  .ax-gitter[class*="ax-gitter--kat-"]::-webkit-scrollbar{display:none}

  /* Angeschnittene Folgekachel: 78% Breite laesst rechts einen Rest stehen. */
  .ax-gitter--stream .product-wrapper,
  .ax-gitter--kacheln > *,
  .ax-gitter[class*="ax-gitter--kat-"] > *{
    flex:0 0 78%;
    scroll-snap-align:start;
  }

  /* Kategorie-Kacheln sind gleich aufgebaut (Bild mit festem Verhaeltnis +
     Namensleiste), deshalb hier stretch: ein Ausreisser mit drei Zeilen
     zieht die uebrigen mit, statt einen Treppenversatz zu erzeugen.
     Bei den Produktkacheln bleibt es bei flex-start - deren Inhalt ist zu
     unterschiedlich, dort entstuenden Leerraeume. */
  .ax-gitter--kacheln,
  .ax-gitter[class*="ax-gitter--kat-"],
  .ax-gitter--stream > .row{align-items:stretch}
  /* Dauerbrenner sind kleiner, davon passen mehr nebeneinander. */
  .ax-gitter--brenner > *{
    flex:0 0 46%;
    scroll-snap-align:start;
  }

  /* FAQ bleibt gestapelt - eine Wischleiste waere dort unsinnig. */
  .ax-gitter--faq{display:block}
}