/* Eigene, kleine Anpassungen oben auf dem Original-Design.
   Bewusst als separate Datei, statt die alten Shopware-Templates
   direkt zu editieren, damit Ursprung und eigene Änderungen sauber
   getrennt bleiben. */

/* Suchfenster (Pagefind) ca. 1,5x groesser - offizieller Skalierungs-Regler,
   skaliert Eingabefeld, Schrift und Ergebnisliste proportional mit. */
.pagefind-search {
  --pagefind-ui-scale: 0.75;
}

/* Der alte Shopware-Such-Container (#searchcontainer / .inner_searchcontainer)
   hat aus 2013 eine feste Pixel-Hoehe fuer das winzige Original-Suchfeld.
   Das groessere Pagefind-Feld sprengt diese feste Hoehe und ueberlagert
   dadurch optisch den Inhalt darunter - deshalb hier auf "auto" umgestellt,
   damit der Container mit dem Suchfeld mitwaechst. !important noetig, weil
   die alten Regeln ueber ID-Selektoren eine hohe Spezifitaet haben. */
#searchcontainer,
#searchcontainer.grid_20,
.inner_searchcontainer {
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 12px;
}
/* Suchleiste vertikal im gruenen Feld zentrieren, statt oben klebend */
#searchcontainer {
  display: flex !important;
  align-items: center;
  padding-top: 12px;
}
.inner_searchcontainer {
  width: 100%;
}

/* Sortierungs-Dropdown auf den Kategorieseiten ebenfalls ca. 1,5x groesser */
select.js-sort {
  font-size: 1.4em;
  padding: 0.35em 0.5em;
  height: auto;
}

/* Derselbe Effekt wie beim Suchfeld: .listing_actions (grauer Hintergrund-
   Balken um Sortierung/Darstellung) hat aus 2013 eine feste Pixel-Hoehe
   fuer das winzige Original-Dropdown. "auto" allein reicht hier aber nicht:
   .sort-filter (Label+Dropdown) ist float:left, und ein Container zieht
   seine Hoehe nicht automatisch aus schwebenden Kindern - er blieb bei
   seiner alten Innenhoehe, waehrend das groessere Dropdown unten heraushing.
   display:flow-root zwingt den Container, seine Hoehe korrekt aus den
   Float-Kindern zu berechnen (moderner, robusterer Ersatz fuer die alte
   "Clearfix"-Technik). */
.listing_actions,
.listing_actions.normal,
.listing_actions .top,
.listing_actions .bottom {
  height: auto !important;
  display: flow-root !important;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* "Frage stellen"-Button auf den Produktseiten: groesser + orange, als klare
   zweite Handlung neben "In den Warenkorb". #ff6600 ist bereits an anderer
   Stelle im Original als Akzentfarbe im Einsatz (z.B. Preis-Hinweistexte),
   daher hier wiederverwendet statt ein neues Orange einzufuehren.
   .actions-detail a wird seit dem Entfernen von Merkzettel/Weiterempfehlen
   nur noch fuer diesen einen Button verwendet - risikofrei aenderbar. */
.actions-detail {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.actions-detail a {
  height: auto !important;
  min-height: 44px;
  line-height: normal !important;
  padding: 8px 5px !important;
  font-size: 16px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ff6600 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-weight: bold;
  text-align: center;
  width: 100% !important;
  box-sizing: border-box !important;
}
.actions-detail a:hover {
  background-color: #e05c00 !important;
}
.actions-detail a span {
  color: #fff;
}
.actions-detail a .link-hint {
  font-size: 11px;
  font-weight: normal;
  opacity: 0.9;
  margin-top: 2px;
}

/* Footer-Kontaktformular-Button (auf jeder Seite) - gleiches Muster wie
   "Frage stellen": orange, zweizeilig zentriert, direkter externer Link
   ohne Zwischenseite. #contact-button-foot .button-large ist ausschliesslich
   fuer diesen einen Button im Einsatz. */
#contact-button-foot {
  display: flex;
  justify-content: center;
  padding: 0 40px !important;
  box-sizing: border-box;
}
/* .footer-special-wrap hatte im Original einen eigenen grauen Hintergrund
   + Rand oben/unten - frueher komplett vom randlosen, volle-Breite-Button
   verdeckt. Seit der Button schmaler ist, wurde das sichtbar - hier
   neutralisiert, damit nur noch der orange Button zu sehen ist. */
.footer-special-wrap {
  background: transparent !important;
  border: none !important;
  margin: 20px 0 !important;
}
#contact-button-foot .button-large {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto !important;
  min-height: 44px;
  line-height: normal !important;
  padding: 8px 16px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  background-color: #ff6600 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
#contact-button-foot .button-large:hover {
  background-color: #e05c00 !important;
}
#contact-button-foot .button-large .link-hint {
  font-size: 11px;
  font-weight: normal;
  opacity: 0.9;
  margin-top: 2px;
}

/* PayPal-Warenkorb-Button (View Cart) im Header nach ganz rechts oben
   verschoben, statt direkt neben dem Logo. #header hat bereits
   position:relative (Original-CSS), daher ankert absolute Positionierung
   korrekt an der Header-Box. TEST-Stand, noch nur auf der Turbine-Seite. */
#shopnavi .newbasket {
  position: absolute;
  top: 20px;
  right: 20px;
  width: auto !important;
}

/* PayPal-Warenkorb-Button ca. 1,5x groesser. Kein Shadow-DOM, daher normal
   von aussen ueberschreibbar - braucht aber !important, da PayPal die
   Groesse per Inline-style="..." direkt am <button> setzt (hoechste
   CSS-Spezifitaet ausser !important). */
#cart-btn {
  height: 3.9rem !important;
  font-size: 1.3rem !important;
  padding: 1rem 2.2rem !important;
  border-radius: 0.4rem !important;
}
#cart-btn_icon {
  width: 1.97rem !important;
  height: 1.97rem !important;
}

/* ==========================================================================
   MOBILE-PILOT (nur in dieser Klon-Kopie, noch nicht auf der Live-Testseite)
   1:1 uebertragen vom riesenball.de-Mobile-Pilot - identisches Shopware-
   Template darunter (gleiche Zeilennummern in style.css fuer .container_20,
   #content .inner, #tabs/.inner_tabs/#description, #buybox), nur die
   Logo-Masse unterscheiden sich (571x90 statt 624x113). Details siehe
   Kommentare im riesenball.de-Pendant.
   ========================================================================== */
@media (max-width: 768px) {

  .container_20 {
    width: 100% !important;
    max-width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
  }

  .container_20 [class*="grid_"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  #content .inner {
    width: 100% !important;
  }

  /* Sicherheitsnetz gegen die mehrfach verschachtelten Fixed-Width-Wrapper
     im jQuery-UI-Tabs-Widget der Produktseite (#tabs 765px, .inner_tabs
     763px, #description 475px - alle ohne eigene grid_-Klasse). */
  #content .inner * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #detail #detailinfo .ui-tabs-panel {
    float: none !important;
  }

  #buybox {
    width: 100% !important;
    margin: 16px 0 0 0 !important;
    float: none !important;
  }
  #buybox select,
  #buybox label,
  #buybox input {
    max-width: 100%;
    box-sizing: border-box;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Header: Logo + PayPal-Warenkorb-Button untereinander statt nebeneinander/
     absolut. #logo a ist eine 571x90px Hintergrundbild-Datei mit fester
     Pixelbreite (green.css) - wird sonst auf schmalen Screens abgeschnitten. */
  #logo {
    text-align: center;
  }
  #header #logo a {
    width: 100% !important;
    max-width: 240px;
    height: auto !important;
    aspect-ratio: 571 / 90;
    background-size: contain !important;
    background-position: center !important;
    margin: 10px auto !important;
  }
  #shopnavi .newbasket {
    position: static !important;
    margin: 10px 0 !important;
    text-align: center;
  }

  #mainNavigation ul li,
  #left ul.categories.level0 li {
    display: block;
    width: 100%;
  }

  #center table,
  #detail table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   MOBILE-PILOT-KENNZEICHNUNG (nur in dieser Klon-Kopie)
   Nicht-anklickbares "M" oben rechts in der Hauptnavigationsleiste, damit
   auf einen Blick erkennbar ist: das ist die Mobile-Pilot-Version, nicht
   das Original. Reines CSS (::after-Pseudo-Element auf #mainNavigation,
   das auf jeder Seite vorkommt) statt 211 HTML-Dateien einzeln anzufassen.
   #mainNavigation hat bereits position:relative im Original-CSS - daher
   reicht ein einfaches position:absolute hier.
   ========================================================================== */
#mainNavigation::after {
  content: "M";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-weight: bold;
  font-size: 1.15em;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 5;
}

/* Duplikat fuer 2. listing-3col-Vorkommen pro Seite (Zubehoer +
   Aehnliche Artikel), damit beide Boxen eindeutige IDs haben -
   identische Regeln wie Original, nur mit -b Suffix, Original-
   Template-CSS bleibt unangetastet. */
/*	3 COL LISTING
	------------------------ */
#listing-3col-b .artbox{width: 200px}
#listing-3col-b .artbox .inner{height: 325px;width: 180px;}
#listing-3col-b .artbox .actions{position: absolute;bottom: 27px;}
#listing-3col-b .artbox .artbox_thumb{height: 145px;margin-top:0}
#listing-3col-b .artbox a.compare_add_article, #listing-3col-b .artbox a.more, #listing-3col-b .artbox .buynow{width:179px;}
#listing-3col-b .artbox a.compare_add_article, #listing-3col-b .artbox a.more{width:82px;position: absolute;}
#listing-3col-b .artbox a.more{left: 97px;}
#listing-3col-b .artbox div.ico_esd{right: 8px;top:24px;}
#listing-3col-b .artbox p.price{bottom:40px;}
#listing-3col-b .artbox p.pseudoprice{bottom: 52px;}
#listing-3col-b .artbox p.desc{ margin: 0 0 .8em }
#listing-3col-b .artbox p.price{
    bottom:73px;
    line-height:1.5em;
}
#listing-3col-b .artbox .artbox_thumb.full-box-link{
    display:block;
    height:100px;
    padding:10px;
    padding-top:215px;
    font-weight: bold;
font-size: 13px;
color:black;
}
#listing-3col-b .artbox .artbox_thumb.full-box-link:hover{
    -moz-box-shadow: 1px 1px 4px #777;
    -webkit-box-shadow: 1px 1px 4px #777;
    box-shadow: 1px 1px 4px #777;
    text-decoration:none;
}
#listing-3col-b .artbox .inner{
    padding:0px;
    width:200px !important;
}
#listing-3col-b .artbox p.price, #listing-3col-b .artbox p.pseudoprice{
    bottom:14px;
    right:10px;
    text-align:right;
}
#listing-3col-b .artbox p.pseudoprice{
	bottom: 25px;
}
#listing-3col-b .artbox .account{
	position: absolute;
	bottom: 5px;
	left: 10px;
	margin-left: 0;
	width: 180px;
}

/* ==========================================================================
   MOBILE-PILOT — OVERFLOW-FIXES RUNDE 2 (2026-08-24)
   Per Headless-Screenshot bei 390px auf Startseite + TURBINE-Seite gefunden:
   trotz Runde-1-Fixes lief der Inhalt an 3 Stellen rechts aus dem Viewport.
   ========================================================================== */
@media (max-width: 768px) {

  /* #left ul li.active hatte aus 2013 eine feste width:178px (style.css
     Zeile 172, ID+Klassen-Kombination = hohe Spezifitaet), die die neue,
     unspezifischere Mobile-Regel "#left ul.categories.level0 li{width:100%}"
     aussticht - lief dadurch als einzige Kategorie-Zeile (die aktuell
     aktive, hier "Fasane verschrecken") rechts aus dem Viewport.
     Gleiches Prinzip fuer die 3 weiteren #left-Fixbreiten (.info/.basket/
     select), die auf anderen Seitentypen (Suche/Warenkorb) denselben
     Effekt haetten. */
  #content #left ul li.active,
  #content #left.info,
  #content #left.basket {
    width: 100% !important;
  }
  #content #left select {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Cookie-Consent-Banner (StcomCookieInfo-Plugin) hat eine feste
     width:400px direkt im Plugin-eigenen CSS (ci.css) - breiter als jedes
     Handy-Display, lief rechts heraus. */
  body .cookieInfo.cookieInfoStyle2 .cookieMsgBox {
    width: 90% !important;
    max-width: 400px;
    box-sizing: border-box;
  }
  /* Schliessen-Button (X) des Banners ist im Original per left:50% +
     margin-left:180px positioniert (fuer die alte feste 400px-Box
     berechnet) - ragt dadurch bei 390px Breite ca. 17-19px rechts heraus.
     Feste rechtsbuendige Position statt der 50%+180px-Berechnung. */
  body .cookieInfo.cookieInfoStyle2 .closeButton {
    left: auto !important;
    right: 8px !important;
    margin-left: 0 !important;
  }

  /* Werbebanner-Grafik "Besuchen Sie unsere neue Webseite" (button2.png,
     581x241) traegt width/height als HTML-Attribute statt nur per CSS -
     das generische "img{max-width:100%}" greift zwar grundsaetzlich,
     hier zur Sicherheit nochmal explizit mit !important direkt am
     Attribut-Selektor, falls die HTML-Attribute anderswo hoehere
     Prioritaet bekommen. */
  img[width] {
    max-width: 100% !important;
    height: auto !important;
  }
}