/* 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. Grundgerüst 1:1 von vogelscheuche.de übernommen
   (identisches Shopware-Template), Farb-/Feinschliff-Wünsche kommen
   noch, falls gewünscht. */

/* Suchfenster (Pagefind) - Skalierungs-Regler, passt Groesse insgesamt an. */
.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. */
#searchcontainer,
#searchcontainer.grid_20,
.inner_searchcontainer {
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 12px;
}
#searchcontainer {
  display: flex !important;
  align-items: center;
  padding-top: 12px;
  background-color: #d6eaf8 !important;
}
.inner_searchcontainer {
  width: 100%;
}

/* Sortierungs-Dropdown auf den Kategorieseiten */
select.js-sort {
  font-size: 1.2em;
  padding: 0.35em 0.5em;
  height: auto;
}

/* .listing_actions (grauer Hintergrund-Balken um Sortierung) hat aus 2013
   eine feste Pixel-Hoehe fuer das winzige Original-Dropdown. .sort-filter
   ist float:left, ein Container zieht seine Hoehe nicht automatisch aus
   schwebenden Kindern - display:flow-root zwingt ihn dazu (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: 1:1 von vogelscheuche.de
   uebernommen (orange, gross, volle Breite, zweizeilig zentriert).
   .actions-detail a wird seit dem Entfernen von Merkzettel/Weiterempfehlen
   nur noch fuer diesen einen Button verwendet. */
.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 - gleiches Muster. #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 {
  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-Widget im Header - Position/Groesse 1:1 von
   vogelscheuche.de uebernommen. */
#shopnavi .newbasket {
  position: absolute;
  top: 20px;
  right: 20px;
  width: auto !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;
}

/* Galerie-Seiten (aus dem Web-Archiv rekonstruiert): Grid aus den
   original 180x180-Thumbnails, mehr ist im Archiv leider nicht
   erhalten. Bewusst ohne Klick-Verlinkung auf die Bilddatei (kein
   SEO-Vorteil, da .galerie-item selbst kein <a> mehr ist, sondern
   nur ein <div> - rein statische Grid-Ansicht). */
.galerie-archiv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.galerie-archiv-grid .galerie-item {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
  line-height: 0;
}
.praxis-teaser {
  margin-top: 24px;
}
.praxis-teaser-link {
  text-align: center;
  margin-top: 14px;
}
.galerie-archiv-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   MOBILE-PILOT (nur in dieser Klon-Kopie, noch nicht auf der Live-Testseite)
   Das alte Shopware-Template von 2013 hat eine feste .container_20-Breite
   (1000px) und ein reines Float-Grid-System (.grid_1 .. .grid_20 mit festen
   Pixel-Breiten). Ohne <meta viewport> und ohne diese Regeln wird die Seite
   auf dem Handy einfach als 1000px breite Desktop-Seite verkleinert
   dargestellt. Unten: ein Breakpoint, der den Grid-Container fluessig macht
   und alle Spalten stapelt, statt das alte CSS anzufassen.
   ========================================================================== */
@media (max-width: 768px) {

  /* Grid-Container fluessig statt fest 1000px */
  .container_20 {
    width: 100% !important;
    max-width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
  }

  /* Alle .grid_1 .. .grid_20 Spalten stapeln statt nebeneinander schweben.
     Deckt Header (Logo/Warenkorb/Nav), Sidebar, Produktbild+Infobox,
     Footer-Spalten etc. ab, da diese alle ueber grid_N-Klassen laufen. */
  .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 ist der eigentliche Zeilen-Wrapper direkt unter dem
     Grid-Container - hat selbst KEINE grid_-Klasse, sondern eine eigene
     feste width:1000px (style.css). Ohne diesen Fix rechnen alle Kinder
     ihre 100%-Breite von diesen 1000px statt vom echten Bildschirm aus -
     der Inhalt wird dann nicht umgebrochen, sondern durch das
     overflow:hidden des Wrappers still abgeschnitten. */
  #content .inner {
    width: 100% !important;
  }

  /* Sicherheitsnetz: das alte Template hat noch mehrere verschachtelte
     Wrapper mit eigener fester Pixelbreite ohne grid_-Klasse (u.a.
     #tabs, .inner_tabs, #description im jQuery-UI-Tabs-Widget der
     Produktseite - 765px, 763px, 475px, alle einzeln in style.css
     hartcodiert). Statt jeden einzeln zu jagen: kein Nachfahre von
     #content .inner darf breiter sein als sein Container. max-width
     (statt width) aendert nichts an eigentlich schon passenden
     Elementen, kappt aber jede versteckte feste Breite. */
  #content .inner * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #detail #detailinfo .ui-tabs-panel {
    float: none !important;
  }

  /* #buybox (Bestellbox auf der Produktseite) hat keine grid_-Klasse,
     sondern eine feste 250px-Breite direkt im Original-CSS. */
  #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;
  }

  /* Bilder duerfen ihren Container nie sprengen */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Header: Logo + Warenkorb-Button untereinander statt nebeneinander/absolut.
     #logo a ist ein 624x113px Hintergrundbild mit fester Pixelbreite (aus
     green.css) - ohne Override wird es auf schmalen Screens einfach
     abgeschnitten statt zu skalieren. */
  #logo {
    text-align: center;
  }
  #header #logo a {
    width: 100% !important;
    max-width: 240px;
    height: auto !important;
    aspect-ratio: 624 / 113;
    background-size: contain !important;
    background-position: center !important;
    margin: 10px auto !important;
  }
  #shopnavi .newbasket {
    position: static !important;
    margin: 10px 0 !important;
    text-align: center;
  }

  /* Hauptnavigation + Kategorie-Sidebar: einspaltige Liste statt breiter Leiste */
  #mainNavigation ul li,
  #left ul.categories.level0 li {
    display: block;
    width: 100%;
  }

  /* Technische-Daten-Tabellen (reines <table><tr><td>-Markup ohne eigene
     Responsive-Klassen) auf der Produktseite: horizontal scrollbar statt
     die Seite in die Breite zu sprengen. */
  #center table,
  #detail table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Einzelne Zellen koennen trotz overflow-x:auto am Rahmen unnoetig zum
     Scrollen zwingen, wenn der Inhalt ein einziges langes Wort ohne
     Leerzeichen ist (z.B. "++++...++++"-Trennzeilen im alten CMS-Content).
     word-break erlaubt hartes Umbrechen genau in diesem Fall. */
  #center table td,
  #detail table td {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Galerie-Grid: 2 statt 3 Spalten auf schmalen Bildschirmen */
  .galerie-archiv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* "Frage stellen" / Kontaktformular-Buttons haben schon width:100%,
     brauchen hier keine Anpassung. */

  /* 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. 1:1 identischer Fund/Fix wie beim
     vogelscheuche.de-Pendant (2026-08-24), hier nachgezogen. */
  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 schmalen Bildschirmen rechts heraus. */
  body .cookieInfo.cookieInfoStyle2 .closeButton {
    left: auto !important;
    right: 8px !important;
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   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;
}