enthält die .thumbnails
========================================================= */
/* --- Hauptbild-Bereich: sauber skalierend --- */
#details_container .gallery .carousel{
width: 100%;
max-width: 100%;
box-sizing: border-box;
position: relative;
overflow: visible; /* NICHT hidden */
}
/* Desktop: maximale Bildhöhe relativ zum Viewport */
@media (min-width: 992px){
#details_container .gallery .carousel{
max-height: 72vh;
}
}
/* Bild muss sich IMMER einpassen */
#details_container .gallery .carousel img{
display: block;
width: auto;
height: 100%;
max-height: 72vh; /* gleiche Begrenzung wie Container */
object-fit: contain; /* wichtig */
}
/* Wenn das Theme dem Bild max-height gibt: neutralisieren */
#details_container .gallery .carousel img{
max-height: none !important;
}
/* ---------------------------------------------------------
Thumbnails UNTER dem Hauptbild (außerhalb der carousel)
--------------------------------------------------------- */
/* Thumbnails über volle Contentbreite */
#details_container .schazad-detail-thumbs{
width: 100vw;
max-width: 100vw;
/* aus der Spalte rausziehen */
position: relative;
left: 0;
padding-left: calc((100vw - 1620px) / 2);
padding-right: calc((100vw - 1620px) / 2);
box-sizing: border-box;
}
#details_container .gallery .schazad-detail-thumbs .thumbnails{
display: flex !important; /* nicht block */
flex-wrap: wrap !important; /* erlaubt 2. Zeile */
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
gap: 3px !important; /* 2–4px Wunsch */
row-gap: 3px !important;
column-gap: 3px !important;
width: 100%; /* volle Breite */
max-width: 100%;
box-sizing: border-box;
}
/* Bei euch sind die Thumbs LABELS -> dürfen NICHT 100% Breite haben */
#details_container .gallery .schazad-detail-thumbs .thumbnails label.thumb{
display: inline-flex !important;
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
cursor: pointer;
}
/* Falls in manchen Fällen .thumb ein anderes Element ist */
#details_container .gallery .schazad-detail-thumbs .thumbnails .thumb{
flex: 0 0 auto !important;
cursor: pointer;
}
/* Thumb-Bildgröße */
#details_container .gallery .schazad-detail-thumbs .thumbnails img{
display: block;
width: 86px;
height: 106px;
object-fit: cover;
border-radius: 10px;
}
/* Mobile: optional etwas kleinere Thumbs */
@media (max-width: 768px){
#details_container .gallery .schazad-detail-thumbs .thumbnails img{
width: 84px;
height: 104px;
}
}
#details_container .gallery .schazad-detail-thumbs .thumbnails label.thumb{
display: inline-flex !important;
width: auto !important;
flex: 0 0 auto !important;
}
/* FORCE: Thumbs wirklich als horizontale Flex-Zeile mit Wrap */
#details_container .gallery .schazad-detail-thumbs .thumbnails{
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
/* FORCE: jedes label darf niemals volle Breite/Flex=1 bekommen */
#details_container .gallery .schazad-detail-thumbs .thumbnails > label.thumb{
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
display: inline-flex !important;
}
/* falls irgendwo flex-basis:100% gesetzt wird */
#details_container .gallery .schazad-detail-thumbs .thumbnails > label.thumb{
flex-basis: auto !important;
}
/* falls ein Theme-rule so etwas wie "label { display:block; width:100% }" hat */
#details_container .gallery .schazad-detail-thumbs .thumbnails label{
width: auto !important;
}
#details_container .gallery .schazad-detail-thumbs .thumbnails label.thumb,
#details_container .gallery .schazad-detail-thumbs .thumbnails .thumb{
margin: 0 !important; /* falls Theme Margins setzt */
padding: 0 !important;
}
#details_container .gallery .schazad-detail-thumbs .thumbnails img{
margin: 0 !important; /* selten, aber sicher */
}
.gallery .thumbnails .thumb {
min-width: 86px !important;
height: 106px !important;
}
/* =========================================================
ZOOM POPUP – perfektes Fullscreen ohne Scroll
========================================================= */
#zoomModal .modal-dialog.modal-fullscreen{
margin: 0;
width: 100vw;
max-width: 100vw;
/* NICHT 100vh – minimal kleiner */
height: 98vh;
}
#zoomModal .modal-content{
height: 98vh;
overflow: hidden; /* verhindert rechten Scroll */
}
/* Carousel im Modal */
#zoomModal #carouselZoomPicturesIndicators.carousel,
#zoomModal #carouselZoomPicturesIndicators .carousel-inner,
#zoomModal #carouselZoomPicturesIndicators .carousel-item{
height: 100% !important;
max-height: 100% !important;
}
/* Bild perfekt einpassen */
#zoomModal #carouselZoomPicturesIndicators .carousel-item img{
height: 100% !important;
width: 100% !important;
object-fit: contain !important;
max-height: 100% !important;
}
/* =========================================================
MOBILE: Thumbnails müssen klickbar bleiben
(Tap wird sonst vom Bild/Zoom-Layer abgefangen)
========================================================= */
@media (max-width: 768px){
/* Thumbs ganz nach vorn */
#details_container .gallery .schazad-detail-thumbs{
position: relative;
z-index: 50;
}
#details_container .gallery .schazad-detail-thumbs .thumbnails,
#details_container .gallery .schazad-detail-thumbs .thumbnails label.thumb,
#details_container .gallery .schazad-detail-thumbs .thumbnails img{
pointer-events: auto !important;
position: relative;
z-index: 60;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Der störende Layer ist meist das große Bild/Zoom-Overlay:
Wir lassen das Bild weiterhin sichtbar, aber nehmen ihm die Pointer-Events,
damit die Thumbs darunter/ daneben wieder klickbar sind. */
#details_container .gallery .carousel,
#details_container .gallery .carousel *{
pointer-events: auto;
}
/* ... außer: das große Bild soll weiterhin klickbar bleiben, falls du Zoom per Klick willst.
Dann NUR das Bild wieder aktivieren. */
#details_container .gallery .carousel img{
pointer-events: auto;
}
}
/* =========================================================
FIX: Mobile thumbs schalten Radios wieder um
Ursache: gallery-helper inputs sind bei <768px display:none
Lösung: nicht display:none, sondern "visually hidden"
========================================================= */
#details_container .gallery .carousel input.gallery-helper{
display: block !important; /* WICHTIG: nicht none */
position: absolute !important;
opacity: 0 !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
pointer-events: none !important; /* Input selbst nicht anklicken */
}
@media (max-width: 768px){
/* =========================================================
FIX 2 : Produktdetail-Galerie per Radio-Input steuern
Struktur:
.carousel
input#image1..n.gallery-helper
.wrap
figure.zoom-container (1..n)
========================================================= */
#details_container .gallery .carousel .wrap{
position: relative;
}
/* Standard: alle Slides aus */
#details_container .gallery .carousel .wrap > figure{
display: none !important;
}
/* Der ausgewählte Slide an */
#details_container .gallery .carousel #image1:checked ~ .wrap > figure:nth-of-type(1),
#details_container .gallery .carousel #image2:checked ~ .wrap > figure:nth-of-type(2),
#details_container .gallery .carousel #image3:checked ~ .wrap > figure:nth-of-type(3),
#details_container .gallery .carousel #image4:checked ~ .wrap > figure:nth-of-type(4),
#details_container .gallery .carousel #image5:checked ~ .wrap > figure:nth-of-type(5),
#details_container .gallery .carousel #image6:checked ~ .wrap > figure:nth-of-type(6),
#details_container .gallery .carousel #image7:checked ~ .wrap > figure:nth-of-type(7),
#details_container .gallery .carousel #image8:checked ~ .wrap > figure:nth-of-type(8),
#details_container .gallery .carousel #image9:checked ~ .wrap > figure:nth-of-type(9),
#details_container .gallery .carousel #image10:checked ~ .wrap > figure:nth-of-type(10),
#details_container .gallery .carousel #image11:checked ~ .wrap > figure:nth-of-type(11),
#details_container .gallery .carousel #image12:checked ~ .wrap > figure:nth-of-type(12){
display: block !important;
}
}
.product-nav-float{
background-color:#fff;
display: flex;
justify-content: flex-end; /* schiebt die Box nach rechts */
}
.product-nav-float .container-xxl{
position: relative;
}
/* rechte Box */
.product-nav-float__inner{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border: 1px solid rgba(0,0,0,.12);
border-radius: 14px;
background: rgba(255,255,255,.96);
}
/* Buttons nur Icon */
.product-nav-float__btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
text-decoration: none;
border: 1px solid transparent;
}
.product-nav-float__btn:hover{
border-color: rgba(0,0,0,.12);
}
.product-nav-float__btn svg{
width: 18px;
height: 18px;
}
.product-nav-float__pos{
margin-left: 6px;
font-size: 12px;
opacity: .7;
white-space: nowrap;
}
/* Mobile: nicht absolut überlagern */
@media (max-width: 768px){
.product-nav-float__inner{
position: static;
margin: 10px 0 0 auto; /* rechts */
}
}
/* Parent ausrichten */
.product-nav-float .container-xxl{
display: flex;
justify-content: flex-end; /* rechts */
align-items: flex-start;
}
/* Damit das HR darunter wieder voll breit ist */
.product-nav-float .container-xxl{
display: flex;
justify-content: center; /* zentriert horizontal */
}
.product-nav-float__inner{
margin: 0 auto; /* zusätzliche Absicherung */
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border: 1px solid rgba(0,0,0,.12);
border-radius: 14px;
background: rgba(255,255,255,.96);
}
.product-nav-float hr{
flex: 0 0 100%;
}
/* Footer: linke Spalten links, rechte Spalte (Newsletter+Social) rechts */
.footer .row {
align-items: flex-start;
}
@media (min-width: 992px) { /* lg */
/* Newsletter-Spalte rechts ausrichten */
.footer .footer-newsletter,
.footer .social-links--under-newsletter {
text-align: center;
}
/* Buttons rechts anordnen */
.footer .social-links--under-newsletter .social-links__buttons {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Footer-Nav linksbündig erzwingen */
.footer nav[aria-labelledby="services-title"],
.footer nav[aria-labelledby="information-title"] {
text-align: center;
padding-bottom:3.5rem;
}
}
/* Social unter Newsletter: Abstand */
.footer .social-links--under-newsletter {
margin-top: 1rem;
}
.footer .social-links--under-newsletter .h4 {
margin-bottom: 0.5rem;
}
/* Desktop Layout */
@media (min-width: 992px) {
/* Footer Row als Flexcontainer nutzen */
.footer .row {
display: flex;
align-items: flex-start;
}
/* Newsletter-Spalte ganz nach rechts schieben */
.footer .footer-newsletter {
margin-left: auto;
}
/* Social darunter ebenfalls rechts ausrichten */
.footer .social-links--under-newsletter {
text-align: right;
}
.footer .social-links--under-newsletter .social-links__buttons {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
}
}
@media (min-width: 992px) {
.footer .row {
align-items: flex-start;
}
/* Ganze rechte Spalte nach rechts schieben */
.footer .footer-col-right {
margin-left: auto;
text-align: right;
}
.footer .footer-col-right .social-links__buttons {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
}
}
@media (min-width: 992px) {
.col-lg-3 {
flex: 0 0 auto;
width: 40%;
}
}
@media (min-width: 992px) {
.col-lg-2 {
flex: 0 0 auto;
width: 25%;
}
}
.form-floating textarea.form-control {
height: 9rem !important;
}
.cl-contact .col-lg-3 {
text-align:center;
margin-top:50px;
margin-bottom:50px;
}
/* Kontaktseite – Desktop Layout optimieren */
@media (min-width: 992px) {
/* Row als flex erzwingen */
.cl-contact .row {
display: flex;
align-items: flex-start;
}
/* Formular links – 60% */
.cl-contact .col-lg-9 {
flex: 0 0 60%;
max-width: 60%;
order: 1;
}
/* Adresse rechts – 40% */
.cl-contact .col-lg-3 {
flex: 0 0 40%;
max-width: 40%;
order: 2;
text-align:right;
}
}
/* Footer – Mobile Layout zentrieren */
@media (max-width: 992px) {
/* Parent-Row zentrieren */
footer .row {
justify-content: center;
text-align: center;
}
/* Nav-Spalten zentrieren */
footer nav[class*="col-"] {
display: flex;
flex-direction: column;
align-items: center;
}
/* Listen ebenfalls mittig */
footer nav ul {
padding-left: 0;
}
footer .footer-newsletter,
footer .newsletter,
footer [class*="newsletter"] {
max-width: 500px;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top:40px;
margin-bottom:0;
text-align:center;
}
footer .social-links--under-newsletter {
margin-top: 50px !important;
}
}
/* STARTSEITE */
@media (max-width:2568px){
.subpagebox1 {
width:540px;height:540px;position:relative;float:right;border:0px solid green;text-align:center;margin-left:0px;margin-bottom:0px;
}
.subpagebox2 {
width:48%;position:relative;float:left;border:0px solid green;text-align:left;margin-right:0px;margin-bottom:0px;
}
}
@media (max-width:1200px){
.subpagebox1 {
width:100%;height:540px;position:relative;border:0px;float:none;display:block;border:0px solid red;text-align:center;margin-left:0px;margin-bottom:30px;
}
.subpagebox2 {
width:100%;position:relative;float:none;border:0px solid green;text-align:left;margin-right:0px;margin-bottom:0px;
}
}
@media (max-width:2568px){
.flowstartblog1 {
width:32% !important;position:relative;float:left;border-right:1px solid silver;
}
.flowstartblogbox1 {
display:block; text-align:justify;padding:0 7% 0 0;
}
.flowstartblog2 {
width:36% !important;position:relative;float:left;border-right:1px solid silver;
}
.flowstartblogbox2 {
display:block; text-align:justify;padding:0 7% 0 7%;
}
.flowstartblog3 {
width:32% !important;position:relative;float:left;
}
.flowstartblogbox3 {
display:block; text-align:justify;padding:0 0 0 7%;
}
}
@media (max-width:658px){
.flowstartblog1 {
width:50% !important;position:relative;float:left;border-right:1px solid silver;margin-top:30px;
}
.flowstartblogbox1 {
display:block; text-align:justify;padding:0 7% 0 0;
}
.flowstartblog2 {
width:50% !important;position:relative;float:left;margin-top:30px;border:0px;
}
.flowstartblogbox2 {
display:block; text-align:justify;padding:0 0 0 7%;
}
.flowstartblog3 {
display:none;overflow:hidden;visibility:hidden;
}
.flowstartblogbox3 {
display:block; text-align:justify;padding:0 0 0 7%;
}
}
@media (max-width:2568px){
.flowstartref1 {
width:32% !important;position:relative;float:left;border-right:1px solid silver;margin-top:30px;
}
.flowstartrefbox1 {
display:block; text-align:justify;padding:0 7% 0 0;
}
.flowstartref2 {
width:36% !important;position:relative;float:left;border-right:1px solid silver;margin-top:30px;
}
.flowstartrefbox2 {
display:block; text-align:justify;padding:0 7% 0 7%;
}
.flowstartref3 {
width:32% !important;position:relative;float:left;margin-top:30px;
}
.flowstartrefbox3 {
display:block; text-align:justify;padding:0 0 0 7%;
}
.flowhead1 {
font-size:48px;
line-height:50px;
font-weight:300;
}
.flowhead2 {
font-size:28px;
line-height:30px;
font-weight:300;
}
.col-sm-3x {
width:25% !important;
}
.pic2home {
width:47%;
max-width:300px;
margin:0 auto;
}
.pic2homespace {
height:60px;
}
.pic2homehose {
margin-left:12px;
float:right;
}
.pic2homefarbe {
float:left;
}
.pic2homehose {
float:right;
}
.pic2hometxtspace {
height:40px;
}
.pic2homeunisex {
margin:0 6px 0 0 !important;
float:left !important;
}
}
@media (max-width:658px){
.flowstartref1 {
width:50% !important;position:relative;float:left;border-right:1px solid silver;margin-top:30px;
}
.flowstartrefbox1 {
display:block; text-align:justify;padding:0 7% 0 0;
}
.flowstartref2 {
width:50% !important;position:relative;float:left;margin-top:30px;border:0px;
}
.flowstartrefbox2 {
display:block; text-align:justify;padding:0 0 0 7%;
}
.flowstartref3 {
display:none;overflow:hidden;visibility:hidden;
}
.flowstartrefbox3 {
display:block; text-align:justify;padding:0 0 0 7%;
}
.col-sm-3x {
width:100% !important;
}
}
@media (max-width:820px){
.pic2home {
width:47% !important;
border:0px solid silver;
}
.pic2home h1 {
text-align:center;
}
.pic2homespace {
height:60px;
}
.pic2home img {
text-align:center !important;
display:block !important;
}
.pic2homehose {
margin-left:20px;
float:inherit;
}
.pic2homefarbe {
display:block;
}
.pic2home img {
margin: 0 auto 10px auto;
}
.pic2homeunisex {
margin:0 6px 0 0 !important;
float:left !important;
}
.pic2homefarbe {
float:none;
}
.pic2homehose {
float:none;
}
.pic2hometxtspace {
height:0px;
}
}
@media (max-width:620px){
.pic2home {
width:100% !important;
float:none !important;
display:block;
clear:both;
border:0px solid yellow;
}
.pic2home h1 {
text-align:left;
}
.pic2homespace {
height:0px;
}
.pic2homehose {
float:right;
margin:0;
}
.pic2homefarbe {
float:left;
}
.pic2hometxtspace {
height:40px;
}
}
/* =========================
SIEGEL SECTION
========================= */
.schazad-siegel-wrapper{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: center;
margin-top: 40px;
}
.schazad-siegel-item{
flex: 0 0 23%;
margin-bottom: 60px;
}
.schazad-siegel-item img{
max-width: 120px;
height: auto;
margin-bottom: 20px;
}
.schazad-siegel-item h3{
font-size: 22px;
letter-spacing: 1px;
margin-bottom: 15px;
}
.schazad-siegel-item p{
font-size: 15px;
line-height: 1.6;
max-width: 300px;
margin: 0 auto;
}
/* =========================
TABLET
========================= */
@media (max-width: 992px){
.schazad-siegel-item{
flex: 0 0 48%;
}
.schazad-footer-outro__inner{
padding: 18px 0 86px;
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 576px){
.schazad-siegel-item{
flex: 0 0 48%;
}
}
/* FOOTER */
.schazad-footer-outro{
background: #fff;
padding: 18px 0 26px;
border-top: 1px solid rgba(0,0,0,.06);
}
.schazad-footer-outro__inner{
text-align: center;
font-size: 13px;
padding: 18px 0 36px;
line-height: 1.6;
color: rgba(0,0,0,.70);
}
.schazad-footer-outro__inner div:first-child{
font-weight: 600;
letter-spacing: .04em;
}
.footer {
background-color: hsl(15, 2%, 35%);
color: hsl(42, 8%, 75%);
}
.footer .nav-link {
color: hsl(42, 8%, 75%);
}
.footer .nav-link:hover {
color: hsl(45, 14%, 89%);
text-decoration: none;
}
.btn-primary {
background-color: hsl(45, 4%, 20%);
border-color: hsl(45, 4%, 20%);
}
.btn-primary:hover,
.btn-primary:focus {
background-color: hsl(60, 3%, 6%);
border-color: hsl(60, 3%, 6%);
}
.footer-newsletter {
border-top: 0px;
}
@media (max-width: 992px){
.schazad-footer-outro__inner{
padding: 18px 0 86px;
}
}
/* Klaro Modal: unten Platz lassen wegen Mobile Bottom-Nav */
@media (max-width: 992px){
/* 1) dem gesamten Modal unten Luft geben */
.klaro .cookie-modal .cm-modal.cm-klaro{
padding-bottom: 80px !important;
}
/* 2) falls die Buttons trotzdem überlappt werden: Footer anheben */
.klaro .cookie-modal .cm-footer{
padding-bottom: 80px !important;
}
.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-modal .cm-footer{
padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
}
/* =========================================================
FOOTER – 3 Link-Spalten + Mobile Accordion (ab < 992px)
========================================================= */
/* Link-Columns: zentriert */
.footer .footer-links-col{
text-align: center;
}
.footer .footer-links-row{
row-gap: 1rem;
}
/* Accordion-Header (Mobile) */
.footer .footer-accordion__toggle{
width: 100%;
background: none;
border: 0;
padding: 0;
margin: 0;
text-align: center;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.footer .footer-accordion__toggle::after{
content: "▾";
display: inline-block;
transform: translateY(1px);
transition: transform .2s ease;
}
.footer .footer-accordion__toggle[aria-expanded="true"]::after{
transform: rotate(180deg) translateY(-1px);
}
/* Newsletter unten, zentriert und in der Breite begrenzt */
.footer .footer-newsletter-row{
margin-top: 1.25rem;
text-align: center;
}
.footer .footer-newsletter-wrap{
max-width: 560px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer .social-links--under-newsletter .social-links__buttons{
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Desktop (>= 992px): 3 Spalten nebeneinander + Collapse immer offen */
@media (min-width: 992px){
.footer .footer-links-row{
align-items: flex-start;
}
/* Collapse auf Desktop immer offen anzeigen */
.footer .footer-links-row .footer-accordion__collapse.collapse{
display: block !important;
height: auto !important;
visibility: visible !important;
}
/* Toggle-Optik auf Desktop neutralisieren */
.footer .footer-accordion__toggle{
cursor: default;
pointer-events: none; /* damit nichts "einklappbar" wirkt */
}
.footer .footer-accordion__toggle::after{
content: "";
}
}
/* Mobile/Tablet (< 992px): Accordion standardmäßig zu */
@media (max-width: 991.98px){
.footer .footer-links-row .footer-accordion__collapse{
margin-top: 0.5rem;
}
/* etwas Luft zwischen den Blöcken */
.footer .footer-links-col + .footer-links-col{
border-top: 1px solid rgba(0,0,0,.08);
padding-top:2rem;
}
}
/* ===== Footer Layout: 3 Links oben, Newsletter & Badges unten ===== */
.footer .footer-links-row {
padding-top: 12px;
padding-bottom: 10px;
}
/* Desktop: 3 Spalten zentriert */
@media (min-width: 992px) {
.footer .footer-links-col {
text-align: center;
}
.footer .footer-links-col .footer-content ul,
.footer .footer-links-col .footer-content ol {
list-style: none;
padding-left: 0;
margin: 0;
}
.footer .footer-links-col .footer-content li {
margin: 0 0 6px 0;
}
}
/* Mobile Accordion: klarer Look */
.footer .footer-accordion__item {
background: transparent;
border: 1px solid rgba(0,0,0,.12);
border-radius: 12px;
overflow: hidden;
margin-bottom: 10px;
}
.footer .footer-accordion__button {
background: rgba(255,255,255,.92);
border: 0;
box-shadow: none;
padding: 12px 14px;
font-weight: 600;
}
.footer .footer-accordion__body {
padding: 12px 14px;
}
/* Newsletter mittig & begrenzt */
.footer .footer-news-row {
padding-top: 14px;
}
.footer .footer-news-center {
max-width: 520px; /* bei Bedarf anpassen */
margin: 0 auto;
text-align: center;
}
.footer .social-links--under-newsletter .social-links__buttons {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 10px;
}
/* Payment + Trust ganz unten, mittig */
.footer .footer-bottom-row {
padding-top: 16px;
padding-bottom: 8px;
}
.footer .footer-bottom-center {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
/* =========================================================
FOOTER – 3 Link-Spalten oben, Newsletter darunter, Rest ganz unten
Desktop: 3×33% (col-lg-4), Mobile: automatisch untereinander
========================================================= */
/* Link-Columns: zentriert */
.footer .footer-links-col{ text-align:center; }
.footer .footer-links-row{ padding-top:12px; padding-bottom:0; row-gap:1rem; }
/* saubere Listen */
.footer .footer-links-col .footer-content ul,
.footer .footer-links-col .footer-content ol{ list-style:none; padding-left:0; margin:0; }
.footer .footer-links-col .footer-content li{ margin:0 0 6px 0; }
/* Newsletter: mittig & begrenzt */
.footer .footer-newsletter-row{ margin-top:0rem; padding-top:2rem; }
.footer .footer-newsletter-wrap{ max-width:560px; margin:0 auto; text-align:center;}
.footer .social-links--under-newsletter .social-links__buttons{
display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px;
}
/* Payment + Trust ganz unten, mittig */
.footer .footer-bottom-row{ padding-top:16px; padding-bottom:8px; }
.footer .footer-bottom-center{ max-width:720px; margin:0 auto; text-align:center; }
.footer-links-col {
text-align:center;padding-bottom:2rem; padding-top:2rem;
}
.footer {
padding: 0 0 50px 0;
}
.container-xxl h1 {
text-align:center;
}
/* Kategorie-Thumb-Liste: 2 Spalten (Desktop), 1 Spalte (Mobile) */
.cat-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 24px; /* optional, falls dein mb-4/pb-3 anders wirkt */
}
/* Desktop: 2 Blöcke pro Reihe = 50% */
.cat-list > .cat-list-item {
flex: 0 0 calc(50% - 12px); /* 24px gap -> je Seite 12px */
max-width: calc(50% - 12px);
text-align: center;
width: auto !important; /* überschreibt ggf. Theme-Fixbreiten */
}
/* Mobile: 1 Block pro Reihe = 100% */
@media (max-width: 991.98px) {
.cat-list > .cat-list-item {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Link als Block, damit die ganze Kachel klickbar ist */
.cat-list > .cat-list-item {
display: block;
text-decoration: none;
}
/* Bild groß ziehen (aber begrenzen, damit es nicht absurd wird) */
.cat-list > .cat-list-item img {
width: 100%;
max-width: 420px; /* stell hier deine Wunschgröße ein */
height: auto;
border-radius: 20px; /* rund wie bisher */
display: inline-block;
}
/* Optional: Label etwas kräftiger / spacing */
.cat-list > .cat-list-item .cat-list-item-name {
display: block;
margin-top: 10px;
}
/* ====== Stellschrauben ====== */
:root{
--model-gap: 24px;
--model-side-pad: 16px;
--model-bottom-pad: 40px;
--model-card-max: 200px; /* ← HIER deine gewünschte Maximalbreite */
--model-card-min: 160px; /* darf kleiner werden bevor umgebrochen wird */
}
/* ====== Container ====== */
.model-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--model-gap);
padding:0 var(--model-side-pad) var(--model-bottom-pad);
margin:30px auto 0;
box-sizing:border-box;
}
/* ====== Kachel ====== */
.model-grid > .pic2home{
box-sizing:border-box;
text-align:center;
float:none !important;
position:static !important;
width:auto !important;
flex:1 1 var(--model-card-max);
min-width:var(--model-card-min);
max-width:var(--model-card-max);
}
/* Bilder */
.model-grid .model-img{
width:100%;
height:auto;
display:block;
margin:0 auto 12px;
}
.model-grid .color-img{
display:block;
height:22px;
width:auto;
margin:8px auto 16px;
}
/* Typografie */
.model-grid .txtlink{
text-decoration:none;
color:#666;
}
.model-grid .txtlink:hover{
color:#000;
}
.model-grid .pic2home h2{
margin:0 0 14px;
font-size:18px;
font-weight:500;
}
/* Grid/List Umschalter komplett ausblenden */
.btn-group[role="group"]{
display:none !important;
}
body.cl-alist .cat-list{
display:none !important;
}
/* ====== Grundlayout ====== */
.size-intro{
max-width: 900px;
margin: 0 auto 24px;
line-height: 1.6;
}
.size-block{
margin: 26px auto;
max-width: 1100px;
}
.size-title{
margin: 0 0 10px;
font-size: 22px;
font-weight: 500;
}
/* ====== Responsive Table Wrapper ======
Mobile: horizontal scroll statt kaputtes Umbruch-Layout */
.table-wrap{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #e5e5e5;
border-radius: 10px;
}
/* ====== Tabelle ====== */
.size-table{
width: 100%;
border-collapse: collapse;
background: #fff;
}
.size-table th,
.size-table td{
padding: 12px 14px;
border-bottom: 1px solid #eee;
text-align: center;
white-space: nowrap;
}
.size-table thead th{
background: #9b9b9b;
color: #fff;
font-weight: 600;
border-bottom: 0;
}
.size-table thead th small{
font-weight: 400;
opacity: .9;
}
.size-table tbody tr:nth-child(even){
background: #fafafa;
}
/* Erste Spalte links etwas lesbarer */
.size-table td:first-child,
.size-table th:first-child{
text-align: left;
}
/* ====== Notes ====== */
.size-notes .size-notes-inner{
border-top: 1px solid #ddd;
padding-top: 18px;
color: #333;
line-height: 1.6;
font-size: 14px;
}
/* ====== Mobile: etwas kompakter ====== */
@media (max-width: 768px){
.size-title{ font-size: 20px; }
.size-table th, .size-table td{ padding: 10px 12px; }
.size-table{ }
}
/* FIX: Service-Menu im Header wieder anzeigen */
@media (min-width: 992px){
.header .menu-dropdowns.d-none.d-lg-block{
display: inline-flex !important; /* oder block */
}
}
@media (min-width: 768px) {
.locator .form-select {
max-width: 220px;
border: none;
padding-left: 0;
margin-bottom: 0;
}
}
:root{
--gap-title-top: .55rem;
--gap-top-main: .15rem;
--gap-main-next: .4rem;
--c-green: #138535;
--c-red: #dc3545;
--c-gray: #888;
}
/* Karte allgemein */
.product-card{ text-align:center; }
/* Meta: 3 Boxen untereinander */
.product-meta{
margin-top: .6rem;
}
/* 1) Titel */
.pm-title{
margin: 0 0 0 0;
line-height: 1.2;
font-size: 1.25rem; /* entspricht etwa h5, anpassen wenn nötig */
}
/* 2) Obere Preiszeile (alt oder nur) */
.pm-topprice{
margin: 0 0 var(--gap-top-main) 0;
font-size: .9rem;
line-height: 1.1;
opacity: .85;
}
.pm-oldprice{ color: var(--c-gray); }
.pm-only{ color: var(--c-green); text-transform: lowercase; }
/* 3) Hauptpreis */
.pm-mainprice{
margin: 0 0 var(--gap-main-next) 0;
font-size: clamp(1.35rem, 4.5vw, 1.75rem);
font-weight: 300;
line-height: 1.05;
white-space: nowrap;
}
.pm-mainprice.is-sale{ color: var(--c-red); }
.pm-mainprice.is-regular{ color: var(--c-green); }
/* Abstand zwischen Karten */
.row .col.mb-3{ margin-bottom: 2rem; }
.pm-title{
font-size: clamp(1rem, 2.5vw, 1.25rem);
}
@media (max-width: 750px){
.product-img-wrapper{
height: clamp(260px, 40vw, 420px);
overflow: hidden;
/* wichtig: echtes Zentrieren des Inhalts */
display: flex;
align-items: center;
justify-content: center;
}
.product-img-wrapper img{
display: block;
/* Bild passt in die Box, ohne Cropping */
width: 100%;
height: 100%;
object-fit: contain;
/* Zoom */
transform: scale(1.50);
transform: translateY(6%) scale(1.50);
transform-origin: center center;
}
}
/* Mobile Bottom-Bar: nicht mehr sticky unten, sondern normal im Header-Fluss */
@media (max-width: 992px) {
/* dein Element hat beide Klassen: fixed-bottom + mobile-nav */
.fixed-bottom.mobile-nav {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
width: 100%;
margin: 0;
box-shadow: none !important;
/* optisch "Header-like" */
border-top: 0 !important;
border-bottom: 1px solid rgba(0,0,0,.10);
background: #fff;
}
/* falls irgendwo Platz fürs fixed-bottom reserviert wird */
body {
padding-bottom: 0 !important;
}
/* optional: wenn euer Theme eine Variable für bottom-padding nutzt */
:root {
--model-bottom-pad: 0px;
}
}
.mobile-nav .btn {
flex-direction: column;
gap: .35rem;
}
.mobile-nav .btn svg {
padding: 10px;
border-radius: 999px;
background: rgba(0,0,0,.04);
width: 38px;
height: 38px;
transition: all .2s ease;
}
.mobile-nav .btn.active svg {
background: #138535;
color: #fff;
}
.mobile-nav span {
font-size: .65rem;
color: #666;
display: none;
}
.btn-text {
display: none !important;
}
/* Noticelist: 100x100-Attribute überschreiben, nicht stauchen */
#noticelistProductList img.card-img {
width: 100% !important;
height: 160px !important; /* anpassen: 140–200 */
object-fit: contain !important; /* oder cover, siehe unten */
object-position: center !important;
display: block;
}
/* damit der Link/Wrapper nicht auf 100px “klebt” */
#noticelistProductList a.d-block.text-center {
display: block;
}
/* =========================================================
Mobile Nav – Badges stabil (ohne Twig-Änderungen)
========================================================= */
@media (max-width: 991.98px){
/* 1) Nur im Mobile-Menü: Buttons als Anker */
.mobile-nav > a.btn,
.mobile-nav > button.btn,
.mobile-nav .btn-minibasket{
position: relative;
overflow: visible !important;
}
/* 2) Grundstil für alle Badges im Mobile-Menü (ohne Layout zu verschieben) */
.mobile-nav .badge{
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 5px;
border-radius: 999px;
font-size: 11px;
line-height: 16px;
font-weight: 500;
background: #3f6f73; /* oder #111 */
color: #fff;
pointer-events: none;
z-index: 2;
}
/* Icon als Anker (damit es bei breiten Screens nicht driftet) */
@media (max-width: 991.98px){
/* Favoriten: Badge relativ zum Icon positionieren */
.mobile-nav a.btn:has(.js-noticeListCnt) svg{
position: relative;
}
.mobile-nav .js-noticeListCnt{
position: absolute !important;
top: 2px;
left: calc(50% + 10px); /* klebt rechts am Icon */
}
/* Warenkorb: Badge relativ zum Icon positionieren */
.mobile-nav .btn-minibasket svg{
position: relative;
}
.mobile-nav .btn-minibasket > .badge{
position: absolute !important;
top: 2px;
left: calc(50% + 10px); /* klebt rechts am Icon */
}
}
/* 5) SVG stabil, aber ohne “Baseline-Gezappel” */
.mobile-nav svg{
display: inline-block;
vertical-align: middle;
}
}
.meta .dropdowns {
display: none !important;
}
@media (min-width: 992px) {
.header .usp-list .list-inline-item {
position: relative;
transform: initial;
animation: initial;
height: auto;
font-size: 12px;
line-height:14px;
padding: 0;
flex: 1 1 auto;
justify-content: flex-start;
}
}
/* Zahlungsarten sauberer Abstand */
.payment-option {
padding: 16px 0;
border-bottom: 1px solid #eee;
}
/* Radio Button Abstand */
.payment-option input[type="radio"] {
margin-right: 10px;
}
/* Text etwas luftiger */
.payment-option label {
font-size: 1rem;
line-height: 1.6;
}
/* PayPal Logos */
.payment-option img {
margin-top: 8px;
}
/* Pay-Info Box unter Zahlungsarten */
.payment-info-box{
margin-top: .5rem;
padding: .6rem .75rem;
background: rgba(0,0,0,.035); /* sehr leichtes Grau */
border: 1px solid rgba(0,0,0,.06);
border-radius: .5rem;
}
/* optional: kleine Überschrift */
.payment-info-title{
font-size: .85rem;
font-weight: 600;
margin-bottom: .25rem;
opacity: .85;
}
/* Text */
.payment-info-text{
font-size: .85rem; /* kleiner */
line-height: 1.35;
color: rgba(0,0,0,.70); /* leicht grau */
}
#PayPalPayButtonNextCart2 {
margin-top: 20px;
}
.paypal-button-wrapper {
margin-top: 14px;
}
.alert {
padding: 24px 16px;
}
/* ==============================
Account > Bestellhistorie
============================== */
/* Card insgesamt: leichter Rahmen + Luft */
.account-orderhistory .card,
.page-account-orderhistory .card,
body.cl-account_order .card {
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
/* Header als ruhiger Infobalken */
.account-orderhistory .card-header,
.page-account-orderhistory .card-header,
body.cl-account_order .card-header {
background: rgba(0,0,0,.025);
border-bottom: 1px solid rgba(0,0,0,.06);
padding: 14px 16px;
}
/* Header-Row: Spalten optisch trennen */
.account-orderhistory .card-header .row,
.page-account-orderhistory .card-header .row,
body.cl-account_order .card-header .row {
align-items: flex-start;
row-gap: 8px;
}
/* Spalten im Header etwas kompakter, bessere Lesbarkeit */
.account-orderhistory .card-header .col-3,
.page-account-orderhistory .card-header .col-3,
body.cl-account_order .card-header .col-3 {
font-size: .95rem;
line-height: 1.35;
}
/* Label (Datum/Status/Bestellnummer/Lieferung) */
.account-orderhistory .card-header strong,
.page-account-orderhistory .card-header strong,
body.cl-account_order .card-header strong {
display: inline-block;
font-size: .82rem;
letter-spacing: .02em;
text-transform: uppercase;
opacity: .65;
margin-right: .35rem;
}
/* Werte (der eigentliche Inhalt) */
.account-orderhistory .card-header span,
.page-account-orderhistory .card-header span,
body.cl-account_order .card-header span {
opacity: .95;
}
/* Body der Card: mehr Luft */
.account-orderhistory .card-body,
.page-account-orderhistory .card-body,
body.cl-account_order .card-body {
padding: 16px;
}
/* Trennlinie zwischen Header-Inhalten (nur Desktop) */
@media (min-width: 992px){
.account-orderhistory .card-header .col-3:not(:last-child),
.page-account-orderhistory .card-header .col-3:not(:last-child),
body.cl-account_order .card-header .col-3:not(:last-child){
border-right: 1px solid rgba(0,0,0,.06);
padding-right: 14px;
}
.account-orderhistory .card-header .col-3 + .col-3,
.page-account-orderhistory .card-header .col-3 + .col-3,
body.cl-account_order .card-header .col-3 + .col-3{
padding-left: 14px;
}
}
/* Status als Badge (dein
...) */
.account-orderhistory .note,
.page-account-orderhistory .note,
body.cl-account_order .note {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .35rem .6rem;
border-radius: 999px;
font-size: .9rem;
font-weight: 600;
background: rgba(19,133,53,.10);
border: 1px solid rgba(19,133,53,.18);
}
/* Status Varianten: storniert / vorbereitet / eingegangen */
.account-orderhistory .note.is-cancelled,
.page-account-orderhistory .note.is-cancelled,
body.cl-account_order .note.is-cancelled {
background: rgba(220,53,69,.10);
border-color: rgba(220,53,69,.18);
}
.account-orderhistory .note.is-prep,
.page-account-orderhistory .note.is-prep,
body.cl-account_order .note.is-prep {
background: rgba(13,110,253,.10);
border-color: rgba(13,110,253,.18);
}
.account-orderhistory .note.is-new,
.page-account-orderhistory .note.is-new,
body.cl-account_order .note.is-new {
background: rgba(0,0,0,.06);
border-color: rgba(0,0,0,.10);
}
/* Links/Tracking dezenter */
.account-orderhistory a,
.page-account-orderhistory a,
body.cl-account_order a {
text-underline-offset: 3px;
}
/* Mobile: Header sauber stapeln */
@media (max-width: 991.98px){
.account-orderhistory .card-header .col-3,
.page-account-orderhistory .card-header .col-3,
body.cl-account_order .card-header .col-3{
width: 100%;
flex: 0 0 100%;
}
}
/* ==============================
Bestellhistorie – ARCHIV Styling
============================== */
#archiv-container{
margin-top: 24px;
}
/* ARCHIV Überschrift */
#archiv-container h2,
#archiv-container h3,
#archiv-container .archiv-title{
margin: 0 0 10px 0;
font-size: 1.6rem;
letter-spacing: .04em;
}
/* Hinweistext unter ARCHIV */
#archiv-container > p,
#archiv-container .archiv-hint{
margin: 0 0 14px 0;
opacity: .75;
}
/* Jeder Archiv-Eintrag (du hast da ) */
#archiv-container > div[style*="border-bottom"]{
border: 1px solid rgba(0,0,0,.08) !important;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,.04);
margin: 0 0 12px 0;
background: #fff;
}
/* „Header“ des Eintrags: erstes
innerhalb */
#archiv-container > div[style*="border-bottom"] > div:first-child{
background: rgba(0,0,0,.025);
border-bottom: 1px solid rgba(0,0,0,.06);
padding: 12px 16px !important;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
/* Order-Nr. (#0 / #60283) */
#archiv-container > div[style*="border-bottom"] > div:first-child strong{
font-size: .95rem;
}
/* Datum rechts (dein
...) */
#archiv-container > div[style*="border-bottom"] > div:first-child span{
opacity: .7 !important;
font-size: .9rem;
white-space: nowrap;
}
/* Body (die ) */
#archiv-container > div[style*="border-bottom"] > ul{
list-style: none;
margin: 0;
padding: 12px 16px 14px 16px !important;
}
/* Listenelemente */
#archiv-container > div[style*="border-bottom"] > ul > li{
padding: 6px 0;
border-bottom: 1px dashed rgba(0,0,0,.10);
}
#archiv-container > div[style*="border-bottom"] > ul > li:last-child{
border-bottom: 0;
}
/* Links im Archiv */
#archiv-container a{
text-underline-offset: 3px;
}
/* Mobile etwas kompakter */
@media (max-width: 575.98px){
#archiv-container > div[style*="border-bottom"] > div:first-child{
flex-direction: column;
align-items: flex-start;
}
#archiv-container > div[style*="border-bottom"] > ul{
padding: 12px 14px 14px 14px !important;
}
}
/*!
* Pikaday
* Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
*/
.pika-single {
z-index: 9999;
display: block;
position: relative;
color: #333;
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #bbb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*
clear child float (pika-lendar), using the famous micro clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/
*/
.pika-single:before,
.pika-single:after {
content: " ";
display: table;
}
.pika-single:after { clear: both }
.pika-single.is-hidden {
display: none;
}
.pika-single.is-bound {
position: absolute;
box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
}
.pika-lendar {
float: left;
width: 240px;
margin: 8px;
}
.pika-title {
position: relative;
text-align: center;
}
.pika-label {
display: inline-block;
position: relative;
z-index: 9999;
overflow: hidden;
margin: 0;
padding: 5px 3px;
font-size: 14px;
line-height: 20px;
font-weight: bold;
background-color: #fff;
}
.pika-title select {
cursor: pointer;
position: absolute;
z-index: 9998;
margin: 0;
left: 0;
top: 5px;
opacity: 0;
}
.pika-prev,
.pika-next {
display: block;
cursor: pointer;
position: relative;
outline: none;
border: 0;
padding: 0;
width: 20px;
height: 30px;
/* hide text using text-indent trick, using width value (it's enough) */
text-indent: 20px;
white-space: nowrap;
overflow: hidden;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: 75% 75%;
opacity: .5;
}
.pika-prev:hover,
.pika-next:hover {
opacity: 1;
}
.pika-prev,
.is-rtl .pika-next {
float: left;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==);
}
.pika-next,
.is-rtl .pika-prev {
float: right;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=);
}
.pika-prev.is-disabled,
.pika-next.is-disabled {
cursor: default;
opacity: .2;
}
.pika-select {
display: inline-block;
}
.pika-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 0;
}
.pika-table th,
.pika-table td {
width: 14.285714285714286%;
padding: 0;
}
.pika-table th {
color: #999;
font-size: 12px;
line-height: 25px;
font-weight: bold;
text-align: center;
}
.pika-button {
cursor: pointer;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
border: 0;
margin: 0;
width: 100%;
padding: 5px;
color: #666;
font-size: 12px;
line-height: 15px;
text-align: right;
background: #f5f5f5;
height: initial;
}
.pika-week {
font-size: 11px;
color: #999;
}
.is-today .pika-button {
color: #33aaff;
font-weight: bold;
}
.is-selected .pika-button,
.has-event .pika-button {
color: #fff;
font-weight: bold;
background: #33aaff;
box-shadow: inset 0 1px 3px #178fe5;
border-radius: 3px;
}
.has-event .pika-button {
background: #005da9;
box-shadow: inset 0 1px 3px #0076c9;
}
.is-disabled .pika-button,
.is-inrange .pika-button {
background: #D5E9F7;
}
.is-startrange .pika-button {
color: #fff;
background: #6CB31D;
box-shadow: none;
border-radius: 3px;
}
.is-endrange .pika-button {
color: #fff;
background: #33aaff;
box-shadow: none;
border-radius: 3px;
}
.is-disabled .pika-button {
pointer-events: none;
cursor: default;
color: #999;
opacity: .3;
}
.is-outside-current-month .pika-button {
color: #999;
opacity: .3;
}
.is-selection-disabled {
pointer-events: none;
cursor: default;
}
.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button {
color: #fff;
background: #ff8000;
box-shadow: none;
border-radius: 3px;
}
/* styling for abbr */
.pika-table abbr {
border-bottom: none;
cursor: help;
}
/* Container */
.image-row {
display: flex;
gap: 2%; /* entspricht deinen alten 2% Abständen */
width: 100%;
margin-top: 3px;
}
/* Einzelne Bilder */
.image-item {
flex: 1;
}
.image-item img {
width: 100%;
display: block;
}
/* =========================
MOBILE VIEW
========================= */
@media (max-width: 768px) {
.image-row {
flex-direction: column;
gap: 10px; /* Abstand untereinander – anpassbar */
}
.image-item {
width: 100%;
}
/* OPTIONEN ZUM AUSBLENDEN */
.hide-mobile {
display: none !important;
}
/* Beispiel:
nur mittleres Bild anzeigen */
/*
.img-1,
.img-3 {
display: none;
}
*/
}