/**
 * responsive.css — Globale Responsive-Anpassungen
 *
 * Breakpoints:
 *   - Mobile:   bis 768px
 *   - Tablet:   769px – 1024px
 *   - Desktop:  ab 1025px
 *
 * Alle Module werden konsistent an diesen Breakpoints optimiert.
 * @package Lauffen_WooCommerce
 */

/* ============================================================
   GLOBALE BASIS-REGELN (alle Viewports)
   ============================================================ */

img,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

/* Mindest-Touch-Target (44x44px) nur fuer echte Buttons und Steuerungen. */
button,
input[type="submit"],
input[type="button"],
.lauffen-tab-btn,
.lauffen-mobile-toggle,
.submenu-toggle,
.hero-prev,
.hero-next {
	min-width: 44px;
	min-height: 44px;
}

.hero-dot {
	min-width: 1.5rem;
	min-height: 1.5rem;
}

a {
	min-width: auto;
	min-height: auto;
}

/* ============================================================
   MOBILE: bis 768px
   ============================================================ */
@media (max-width: 767px) {

	/* ---- Container / Basis ---- */
	.lauffen-container {
		padding: 0 1rem;
	}

	/* ---- Header ---- */
	.lauffen-header-inner {
		flex-wrap: wrap;
		gap: 0.8rem;
		padding: 0.8rem 0;
	}

	.lauffen-header-logo {
		order: 1;
		flex: 1 1 auto;
	}

	.lauffen-header-logo img {
		width: 170px;
	}

	.lauffen-header-actions {
		order: 2;
		flex-shrink: 0;
		gap: 1rem;
	}

	.lauffen-header-search {
		order: 3;
		flex-basis: 100%;
		max-width: 100%;
	}

	/* ---- Navigation: Off-Canvas ---- */
	.lauffen-nav-desktop {
		display: none;
	}

	.lauffen-mobile-toggle {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 0;
		background: none;
		border: none;
		font-family: var(--font-heading);
		font-size: 1.4rem;
		cursor: pointer;
	}

	.lauffen-nav-mobile {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 85vw;
		max-width: 320px;
		height: 100vh;
		background: var(--white-color, #fff);
		z-index: 1001;
		overflow-y: auto;
		padding: 2rem 1.5rem;
		box-shadow: 2px 0 12px rgba(0,0,0,0.2);
	}

	.lauffen-nav-mobile.is-open {
		display: block;
	}

	.lauffen-nav-mobile .lauffen-nav-menu {
		flex-direction: column;
		width: 100%;
	}

	.lauffen-nav-mobile .lauffen-nav-menu > li {
		width: 100%;
		border-bottom: 1px solid var(--border-color, #d1d1d1);
	}

	.lauffen-nav-mobile .lauffen-nav-menu > li > a {
		padding: 1.2rem 0.5rem;
		width: 100%;
		font-size: 1.4rem;
	}

	.lauffen-nav-mobile .sub-menu {
		display: none;
		position: static;
		box-shadow: none;
		border: none;
		border-top: 1px solid var(--border-color, #d1d1d1);
		background-color: #fafafa;
		padding: 0;
		min-width: auto;
		max-width: none;
	}

	.lauffen-nav-mobile .sub-menu.is-open {
		display: block;
	}

	.lauffen-nav-mobile .sub-menu a {
		padding: 0.8rem 1.5rem;
		font-size: 1.3rem;
		white-space: normal;
	}

	/* ---- Hero-Slider ---- */
	.hero-slide {
		flex-direction: column-reverse;
		min-height: auto;
		padding: 1rem;
	}

	.hero-slide-content {
		max-width: 100%;
		padding: 1rem 0;
		text-align: center;
	}

	.hero-title {
		font-size: 1.8rem;
	}

	.hero-slide-image {
		max-width: 100%;
	}

	.hero-slide-image img {
		max-height: 260px;
	}

	.hero-dots {
		left: 50%;
		transform: translateX(-50%);
		bottom: 1rem;
	}

	.hero-prev,
	.hero-next {
		display: none;
	}

	/* ---- Promo-Grid ---- */
	.promo-row-2,
	.promo-row-4 {
		flex-wrap: wrap;
	}

	.promo-row-2 .promo-box,
	.promo-row-4 .promo-box {
		flex: 1 1 100%;
		min-height: 180px;
	}

	/* ---- Versprechen ---- */
	.versprechen-grid {
		flex-direction: column;
		align-items: center;
	}

	.versprechen-item {
		flex: 1 1 100%;
		max-width: 100%;
		width: 100%;
		margin-bottom: 1.5rem;
	}

	/* ---- Newsletter ---- */
	.newsletter-content {
		max-width: 100%;
		margin: 0 auto;
	}

	.newsletter-form-placeholder {
		gap: 0.8rem;
	}

	/* ---- Kategorieseite ---- */
	.lauffen-shop-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.lauffen-shop-sidebar {
		order: -1;
	}

	/* Produktgrid auf 1 Spalte */
	.shop-content .products {
		grid-template-columns: 1fr !important;
	}

	/* ---- Produktdetail ---- */
	.lauffen-product-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.lauffen-product-gallery {
		max-width: 100%;
	}

	/* Tabs als Accordion */
	.lauffen-tabs-header {
		flex-direction: column;
		border-bottom: none;
	}

	.lauffen-tab-btn {
		border-right: none;
		border-bottom: 1px solid var(--border-color, #d1d1d1);
		text-align: left;
		position: relative;
		width: 100%;
	}

	.lauffen-tab-btn::after {
		content: '+';
		position: absolute;
		right: 1.5rem;
		top: 50%;
		transform: translateY(-50%);
		font-size: 1.8rem;
		color: var(--secondary-text, #575757);
	}

	.lauffen-tab-btn.active::after {
		content: '−';
	}

	.lauffen-tab-panel {
		display: none;
		padding: 1rem 0;
	}

	.lauffen-tab-panel.active {
		display: block;
	}

	/* Thumbnails als Dots (klein) */
	.lauffen-product-gallery .flex-control-thumbs li {
		width: 44px;
		height: 44px;
	}

	/* ---- Warenkorb ---- */
	.lauffen-cart-columns {
		flex-direction: column;
	}

	.lauffen-cart-right {
		flex: 1 1 100%;
		min-width: auto;
		margin-top: 1.5rem;
	}

	/* Tabelle als gestapelte Karten */
	.woocommerce-cart-form .shop_table thead {
		display: none;
	}

	.woocommerce-cart-form .shop_table tbody td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
		padding: 0.5rem 0;
		border: none;
	}

	.woocommerce-cart-form .shop_table tbody td::before {
		content: attr(data-title) ': ';
		font-weight: 500;
		font-family: var(--font-heading);
		font-size: 0.85rem;
		text-transform: uppercase;
	}

	.woocommerce-cart-form .shop_table tbody tr {
		border-bottom: 1px solid var(--border-color, #d1d1d1);
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		display: block;
	}

	/* ---- Checkout ---- */
	.lauffen-checkout-columns {
		flex-direction: column;
	}

	.lauffen-checkout-right {
		flex: 1 1 100%;
		min-width: auto;
		margin-top: 1.5rem;
	}

	.opc-progress-bar {
		gap: 1.5rem;
	}

	.lauffen-btn-next,
	#place_order,
	.lauffen-btn-place-order {
		width: 100%;
		float: none;
	}

	/* ---- Kontaktseite ---- */
	.kontakt-layout {
		flex-direction: column;
		gap: 1.5rem;
	}

	.kontakt-col-form,
	.kontakt-col-address {
		flex: 1 1 100%;
	}

	/* ---- Login / Mein Konto ---- */
	.lauffen-login-columns {
		flex-direction: column;
	}

	/* ---- Footer ---- */
	.lauffen-prefooter-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 1rem;
	}

	.prefooter-empty {
		display: none;
	}

	.lauffen-mainfooter-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-partners {
		gap: 1.5rem;
	}
}

/* ============================================================
   TABLET: 769px – 1024px
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

	/* ---- Header: reduzierte Abstaende ---- */
	.lauffen-header-inner {
		padding: 0.8rem 0;
		gap: 1.2rem;
	}

	.lauffen-header-logo img {
		width: 240px;
	}

	.lauffen-header-search {
		max-width: 380px;
	}

	/* ---- Navigation: reduzierte Schrift ---- */
	.lauffen-nav-menu > li > a {
		padding: 1rem 1.2rem;
		font-size: 1.4rem;
	}

	/* ---- Promo-Grid: 2 Spalten ---- */
	.promo-row-4 .promo-box {
		flex: 1 1 48%;
		min-height: 200px;
	}

	.promo-row-2 .promo-box {
		flex: 1 1 48%;
	}

	/* ---- Versprechen: 2 Spalten ---- */
	.versprechen-item {
		flex: 1 1 45%;
		max-width: 48%;
	}

	/* ---- Kategorieseite: 2 Spalten ---- */
	.shop-content .products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* ---- Produktdetail: Galerie oben ---- */
	.lauffen-product-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.lauffen-product-gallery {
		max-width: 600px;
		margin: 0 auto;
	}

	/* ---- Warenkorb: volle Breite ---- */
	.lauffen-cart-columns {
		flex-direction: column;
	}

	.lauffen-cart-right {
		flex: 1 1 100%;
		min-width: auto;
		margin-top: 1.5rem;
	}

	/* ---- Checkout: volle Breite ---- */
	.lauffen-checkout-columns {
		flex-direction: column;
	}

	.lauffen-checkout-right {
		flex: 1 1 100%;
		min-width: auto;
		margin-top: 1.5rem;
	}

	/* ---- Kontaktseite: 2 Spalten ---- */
	.kontakt-layout {
		flex-wrap: wrap;
	}

	.kontakt-col-form {
		flex: 1 1 100%;
	}

	.kontakt-col-address {
		flex: 1 1 45%;
	}

	/* ---- Login: volle Breite ---- */
	.lauffen-login-columns {
		flex-direction: column;
	}

	/* ---- Footer: 2-spaltig ---- */
	.lauffen-prefooter-inner {
		grid-template-columns: 1fr 1fr;
	}

	.prefooter-empty {
		display: none;
	}

	.lauffen-mainfooter-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}

/* ============================================================
   DESKTOP: ab 1025px (Originale Layouts beibehalten)
   ============================================================ */
@media (min-width: 1025px) {
	/* Keine Override — Desktop-Layouts aus den Modul-CSS beibehalten. */
}