/* ==========================================================================
   WOLTERS Partnerportal – Responsive
   Desktop-First: Desktop-UX hat Priorität. Tabellen werden mobil zu Karten.
   ========================================================================== */

/* Zusatzbereich im Menü (Konto, Sprache, Abmelden) gibt es nur mobil. */
.wo-header__nav-extra,
.wo-header__subtoggle { display: none; }

@media (max-width: 1100px) {
	.wo-dash__layout { grid-template-columns: 1fr; }
	.wo-shop-layout { grid-template-columns: 220px 1fr; }
	.wo-footer__grid { grid-template-columns: 1fr 1fr; }
	.wo-login { grid-template-columns: 1fr; }
	.wo-login__media { min-height: 220px; }
}

@media (max-width: 860px) {
	.wo-header__nav {
		display: none;
		position: absolute;
		top: var(--header-height);
		left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		background-color: var(--color-bg);
		border-bottom: 1px solid var(--color-line);
		padding: 0.75rem var(--gutter) 1rem;
		box-shadow: var(--shadow-soft);
	}
	.wo-header__nav.is-open { display: flex; }
	.wo-header__nav a { padding: 0.75rem 0.6rem; }
	.wo-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.6rem; height: 2.6rem;
		min-height: 0;
		padding: 0;
		border: 1px solid var(--color-line-strong);
		border-radius: var(--radius-input);
		background: var(--color-bg);
		color: var(--color-text); /* globale button-Regel setzt sonst Weiß */
		cursor: pointer;
	}
	.wo-header__toggle:hover,
	.wo-header__toggle:focus-visible,
	.wo-header__toggle[aria-expanded="true"] {
		border-color: var(--color-accent);
		background: var(--color-accent);
		color: var(--color-white);
	}

	/* Kopfzeile: Logo links, Suche + Warenkorb rechts, Menü-Button ganz außen */
	.wo-header__inner { gap: 0.75rem; }
	.wo-header__brand { min-width: 0; }
	.wo-header__brand img { max-height: 30px; }
	.wo-header__actions { margin-left: auto; gap: 0.4rem; }
	.wo-header__toggle { order: 3; flex: 0 0 auto; }
	.wo-header__actions .wo-lang,
	.wo-header__account,
	.wo-header__logout { display: none; }
	.wo-header__cart { min-width: 2.6rem; min-height: 2.6rem; justify-content: center; }
	.wo-header__search-toggle { width: 2.6rem; height: 2.6rem; }

	/* Aufgeklapptes Menü: scrollbar, große Tippflächen, Trennlinien */
	.wo-header__nav {
		top: calc(100% + 5px); /* unterhalb des roten Streifens */
		max-height: calc(100vh - var(--header-height) - 5px);
		max-height: calc(100dvh - var(--header-height) - 5px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-top: 0.25rem;
		background-color: var(--color-header-bg); /* führt den Header fort */
		border-bottom: 5px solid var(--color-accent);
	}
	/* Trennlinien kräftiger als --color-line, das auf Beige kaum sichtbar ist */
	.wo-header__nav li + li,
	.wo-header__nav .sub-menu > li { border-top: 1px solid rgba(146, 133, 124, 0.45); }
	.wo-header__nav a {
		min-height: 2.9rem;
		font-size: var(--fs-base);
		white-space: normal;
	}
	.wo-header__nav > ul > li > a,
	.wo-header__nav .menu > li > a { font-weight: 700; color: var(--color-text); }

	/* Verschachteltes Menü: Unterpunkte erst per Pfeil-Button aufklappen
	   (Button wird in portal.js → initMobileNav eingefügt) */
	.wo-header__nav .menu-item-has-children > a { padding-right: 3.5rem; }
	.wo-header__nav .menu-item-has-children > a::after { display: none; }
	.wo-header__nav .sub-menu,
	.wo-header__nav .sub-menu .sub-menu {
		display: none;
		padding: 0;
		background-color: var(--color-bg);
	}
	.wo-header__nav .is-sub-open > .sub-menu { display: block; }
	.wo-header__nav .sub-menu a {
		padding-left: 1.25rem;
		font-size: var(--fs-sm);
	}
	.wo-header__nav .sub-menu .sub-menu { background-color: var(--color-primary-soft); }
	.wo-header__nav .sub-menu .sub-menu a { padding-left: 2.1rem; }

	.wo-header__subtoggle {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.9rem;
		height: 2.9rem;
		padding: 0;
		border: 0;
		border-left: 1px solid rgba(146, 133, 124, 0.45);
		background: none;
		color: var(--color-text);
		cursor: pointer;
	}
	.wo-header__subtoggle::before {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-0.15rem) rotate(45deg);
		transition: transform var(--transition);
	}
	.wo-header__subtoggle {
		min-height: 0;
		border-top: 0;
		border-right: 0;
		border-bottom: 0;
		border-radius: 0;
	}
	.wo-header__subtoggle:hover,
	.wo-header__subtoggle:focus-visible {
		border-color: rgba(146, 133, 124, 0.45);
		background: none;
		color: var(--color-accent);
	}
	.wo-header__subtoggle[aria-expanded="true"] { color: var(--color-accent); }
	.wo-header__subtoggle[aria-expanded="true"]::before { transform: translateY(0.15rem) rotate(-135deg); }

	.wo-header__nav-extra {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1rem;
		margin-top: 0.5rem;
		padding-top: 0.75rem;
		border-top: 1px solid rgba(146, 133, 124, 0.45);
	}
	.wo-header__nav .wo-header__nav-account {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		justify-content: flex-start;
		color: var(--color-text);
	}
	.wo-header__nav-account span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.wo-header__nav-extra .wo-lang { margin-left: auto; font-size: var(--fs-base); }
	.wo-header__nav .wo-lang__link {
		width: auto;
		min-height: 2.6rem;
		padding: 0.5rem 0.75rem;
	}
	.wo-header__nav .wo-lang__link.is-active { color: var(--color-text); }
	.wo-header__nav .wo-header__nav-logout {
		flex: 1 1 100%;
		justify-content: center;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-button);
		color: var(--color-primary-dark);
		font-size: var(--fs-sm);
	}

	.wo-shop-layout { grid-template-columns: 1fr; }
	.wo-filters {
		position: static;
		margin-bottom: 1rem;
	}

	/* Tabellen -> Karten (Produkt-/Schnellbestelltabelle) */
	.wo-table--responsive thead { display: none; }
	.wo-table--responsive,
	.wo-table--responsive tbody,
	.wo-table--responsive tr,
	.wo-table--responsive td { display: block; width: 100%; }
	.wo-table--responsive tr {
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		margin-bottom: 1rem;
		padding: 0.75rem 1rem;
		background-color: var(--color-bg);
	}
	.wo-table--responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.4rem 0;
		border: 0;
		text-align: right;
	}
	.wo-table--responsive td::before {
		content: attr(data-label);
		font-size: var(--fs-xs);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--color-muted);
		text-align: left;
	}
	.wo-table--responsive .wo-table__num { text-align: right; }
}

@media (max-width: 560px) {
	:root { --gutter: 16px; }
	h1 { font-size: var(--fs-h1-mobile); }
	/* Header: Zusatz „B2B Onlineshop“ weglassen, damit das Logo Platz hat */
	.wo-header .wo-header__brand-badge { display: none; }

	/* Footer: Markenblock über die volle Breite, Linklisten zweispaltig */
	.wo-footer { margin-top: 3rem; }
	.wo-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 1.25rem;
		padding-block: 2.5rem 2rem;
	}
	.wo-footer__grid > :first-child { grid-column: 1 / -1; }
	.wo-footer__grid h4 { margin-bottom: 0.6rem; }
	.wo-footer__grid li { margin-bottom: 0; }
	.wo-footer__grid li a { display: inline-block; padding-block: 0.3rem; }
	.wo-footer__bottom { flex-direction: column; gap: 0.35rem; }
	.wo-shortcuts { grid-template-columns: repeat(2, 1fr); }
	.wo-login__panel { padding: 1.75rem 1.4rem; }
	.wo-shop-toolbar { align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}