/*
 * Magazine integration in the shop (feature/MagazineIntegration, 16.10.2026).
 *
 * Components chosen by the shop owner on 16.10.2026: mobile menu tab "Magazin",
 * dark teaser band on the start page, rubric tiles below category/brand listings,
 * magazine card in the footer. On 21.10.2026 the desktop menu item with mega
 * flyout gave way to the tabs SHOP | MAGAZIN above the header ("header tabs").
 * Every selector starts with .mag- or sits below a shop container the boxes
 * are placed in.
 *
 * Colours are the shop palette only (styleguide 25.08.2026): black/white as
 * main colours, #ff7300 strictly as accent, grey steps #eee/#e8e8e8/#ccc/#999/#666.
 * Text on orange is white like everywhere else in the shop (--mag-on-orange; shop
 * owner's decision of 20.10.2026 - it was black, 7.7:1; white reaches 2.73:1, below
 * WCAG AA, a shop-wide topic of its own). Buttons are the shop's .button where the
 * widgets offer one. Focus rings: black on light surfaces,
 * orange on dark ones - orange on white/#eee is only 2.73/2.35:1 (design audit B3).
 *
 * Shop link colours come from "a" (0,0,1) and "a:hover, a:focus" (0,1,1) in
 * stylesheet.css; the link rules here name their states, so they win by
 * specificity instead of !important (design audit M7).
 *
 * Breakpoints follow Bootstrap 5 as used by the shop: 576 / 768 / 992 / 1200 / 1400.
 */

:root {
	--mag-orange: #ff7300;
	--mag-black: #1d1d1b;
	--mag-ink: #000;
	--mag-white: #fff;
	--mag-on-orange: #fff;
	--mag-grey-100: #eee;
	--mag-grey-200: #e8e8e8;
	--mag-grey-300: #ccc;
	--mag-grey-500: #999;
	--mag-grey-700: #666;
	--mag-dark-card: #2a2a2a;
	--mag-dark-line: #565656;
	--mag-dark-muted: #b3b3b3;
	--mag-dark-image: #333;
	--mag-radius: 4px;
	--mag-gap: 16px;
	--mag-transition: 0.2s ease;
}

/* ===== shared building blocks ===== */

.mag-label {
	margin: 0 0 10px;
	line-height: 1;
}

.mag-label span {
	display: inline-block;
	padding: 6px 10px 5px;
	background: var(--mag-orange);
	color: var(--mag-on-orange);
	font: 700 12px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mag-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	color: var(--mag-grey-700);
	font: 700 11px/1.3 Arial, Helvetica, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mag-kicker::before {
	content: "";
	width: 14px;
	height: 3px;
	background: var(--mag-orange);
}

.mag-date {
	display: block;
	color: var(--mag-grey-700);
	font-size: 13px;
	line-height: 1.4;
}

.mag-lang-hint {
	margin: 4px 0 0;
	color: var(--mag-grey-700);
	font-size: 12px;
	font-style: italic;
}

.mag-picture {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mag-grey-100);
}

.mag-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mag-picture--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mag-grey-500);
	font-size: 32px;
}

.mag-badge-new {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 5px 8px 4px;
	background: var(--mag-orange);
	color: var(--mag-on-orange);
	font: 700 11px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mag-article-list,
.mag-rubric-grid,
.mag-chips {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card links: one link per card (the title), stretched over the whole card. */
.mag-card,
.mag-article-row {
	position: relative;
}

.mag-card .stretched-link::after,
.mag-article-row .stretched-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.mag-card:hover .mag-picture img {
	transform: scale(1.04);
}

/* Focus: the link's own outline would frame only the title - frame the card instead. */
.mag-card .stretched-link:focus,
.mag-article-row .stretched-link:focus {
	outline: none;
}

/* Light surfaces: black ring (16.9:1 on #fff, 14.6:1 on #eee). */
.mag-article-row:focus-within {
	outline: 3px solid var(--mag-black);
	outline-offset: 3px;
}

/* Dark surfaces: orange ring (6.2:1 on #1d1d1b). Inset on the band cards, so the
   scroll track - which clips in both directions - cannot cut it off (design audit m1). */
.mag-card:focus-within {
	outline: 3px solid var(--mag-orange);
	outline-offset: -3px;
}

/* Keyboard only: :focus-within also fires after a mouse click and left an orange frame
   on the clicked card (shop owner's screenshot, 16.10.2026). Where :has() exists the
   ring follows :focus-visible; older browsers keep the :focus-within ring above. */
@supports selector(:has(*)) {
	.mag-article-row:focus-within,
	.mag-card:focus-within {
		outline: none;
	}

	.mag-article-row:has(:focus-visible) {
		outline: 3px solid var(--mag-black);
		outline-offset: 3px;
	}

	/* The positioned picture paints over an inset outline of the card, the ring showed
	   only around date and title (design audit round 2, m2) - draw it on a layer above. */
	.mag-card:has(:focus-visible) {
		outline: none;
	}

	.mag-card:has(:focus-visible)::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 4;
		border-radius: inherit;
		outline: 3px solid var(--mag-orange);
		outline-offset: -3px;
		pointer-events: none;
	}
}

.mag-mobile-panel a:focus-visible,
.mag-mobile-tab:focus-visible,
.mag-all-button:focus-visible {
	outline: 3px solid var(--mag-black);
	outline-offset: 2px;
}

.mag-band__track:focus-visible,
.mag-arrow:focus-visible,
.mag-chips--dark .mag-chip:focus-visible,
.mag-band .mag-all-button:focus-visible {
	outline: 3px solid var(--mag-orange);
	outline-offset: 2px;
}

.mag-rubric-tile:focus-visible {
	outline: 3px solid var(--mag-black);
	outline-offset: 3px;
}

/* "All articles": the shop's own .button.btn_big.icon-arrow-right (stylesheet.css) since
   20.10.2026 - shape, colours and hover come from there. Only the block variant (mobile
   menu) and the 44 px touch target are added here. */
.mag-all-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-align: center;
}

/* Centred in the 44 px (design audit 20.10.2026: 12 px above, 15 px below the text). */
.mag-all-button--block {
	display: flex;
	width: 100%;
}

/* Chips (rubrics in the teaser band) */
.mag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mag-chip,
.mag-chip:hover,
.mag-chip:focus {
	text-decoration: none;
}

.mag-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--mag-dark-line);
	border-radius: 999px;
	color: var(--mag-white);
	font: 700 14px/1.2 Arial, Helvetica, sans-serif;
	transition: background-color var(--mag-transition), color var(--mag-transition), border-color var(--mag-transition);
}

.mag-chip i {
	color: var(--mag-orange);
	transition: color var(--mag-transition);
}

.mag-chip:hover,
.mag-chip:focus-visible {
	border-color: var(--mag-orange);
	background: var(--mag-orange);
	color: var(--mag-on-orange);
}

.mag-chip:hover i,
.mag-chip:focus-visible i {
	color: var(--mag-on-orange);
}

/* Phones: one swipeable row instead of three wrapped rows of chips.
   Full bleed to the screen edge - the container gutter is 24px, the row ended 12px
   short of it (design audit 19.10.2026, M3). 2px top padding, offset by the -2px
   margin, keeps the focus ring unclipped (M4); scroll-padding keeps a chip that is
   scrolled into view clear of the edge (M2, see magazine-integration.js). */
@media (max-width: 575.98px) {
	.mag-band__bar .mag-chips {
		flex-wrap: nowrap;
		width: calc(100% + 48px);
		margin: -2px -24px 0;
		padding: 2px 24px 4px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: 24px;
		scrollbar-width: none;
	}

	.mag-band__bar .mag-chip {
		white-space: nowrap;
	}
}

/* ===== header tabs SHOP | MAGAZIN (desktop, 21.10.2026) ===== */

/* Look and colours are the shop's own tab rules (stylesheet.css, "utility bar":
   .tabs, .single-tab, .single-tab.selected - white on #565656 is 7.3:1, orange on
   white the shop's accent). Added here: a list instead of divs, and the padding
   moves from the tab to its link, so the whole tab is the click area and not only
   the word. "ul > li { margin-top: 4px }" of the shop is reset. */
.desktop-header .utility-bar .mag-tabs__list {
	display: flex;
	align-items: flex-end;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.desktop-header .utility-bar .mag-tabs .single-tab {
	margin: 0;
	padding: 0;
}

.desktop-header .utility-bar .mag-tabs .single-tab a {
	display: block;
	padding: 8px 12px 4px;
}

.desktop-header .utility-bar .mag-tabs .single-tab:not(.selected) a:hover {
	text-decoration: underline;
}

/* Focus ring inside the tab, as in the magazine (theme.css .site-tabs__tab): white on
   the grey tab (7.3:1), black on the white one. */
.desktop-header .utility-bar .mag-tabs .single-tab a:focus-visible {
	outline: 3px solid var(--mag-white);
	outline-offset: -3px;
}

.desktop-header .utility-bar .mag-tabs .single-tab.selected a:focus-visible {
	outline-color: var(--mag-black);
}

/* ===== mobile navigation: tab "Magazin" ===== */

/* Inside the mobile navigation two shop rules win over single classes (measured 16.10.2026):
   ".mobile-navigation li { display: block }" and ".mobile-header i { font-size: 22px; color: #262626 }"
   - the second made the symbols invisible on the black rubric tiles. */
.mobile-header [class*="mag-"] i {
	color: inherit;
	font-size: inherit;
}

/* The shop's tab is a div; ours is a button for keyboard access - neutralise the button look. */
.mobile-navigation .nav-tabs .mag-mobile-tab {
	border: 0;
	border-radius: 0;
	background-color: transparent;
	font-family: inherit;
	line-height: inherit;
}

.mobile-navigation .nav-tabs .mag-mobile-tab.selected {
	background-color: var(--mag-white);
}

.mobile-navigation .nav-tabs .mag-mobile-tab i {
	color: var(--mag-orange);
}

.mag-mobile-panel {
	padding: 20px 24px 32px;
}

.mag-mobile-panel__home {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border-radius: var(--mag-radius);
	background: var(--mag-black);
}

.mag-mobile-panel__brand {
	color: var(--mag-white);
	font: 900 22px/1.1 'Arial Black', 'Arial Bold', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

.mag-mobile-panel__cta {
	color: var(--mag-orange);
	font-size: 15px;
	font-weight: 700;
}

.mag-mobile-panel__title {
	margin: 24px 0 8px;
	color: var(--mag-ink);
	font: 900 15px/1.2 'Arial Black', 'Arial Bold', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

.mag-mobile-panel .mag-all-button--block {
	margin-top: 20px;
}

/* The shop styles every p in the mobile navigation (14 px, #262626); keep the hint
   as small and grey as everywhere else (design audit round 2, m7). */
.mobile-navigation .mag-mobile-panel .mag-lang-hint {
	color: var(--mag-grey-700);
	font-size: 12px;
}

/* ".mobile-navigation a { color: unset }" (0,1,1) beats single classes - without this
   rule the tiles would inherit the dark text colour on their black surface. (The shop
   button sets its white with !important itself.) */
.mobile-navigation .mag-mobile-panel .mag-rubric-tile {
	color: var(--mag-white);
}

/* Orange on hover/focus: white text like the shop (see the colour note at the top). */
.mobile-navigation .mag-mobile-panel .mag-rubric-tile:hover,
.mobile-navigation .mag-mobile-panel .mag-rubric-tile:focus-visible {
	color: var(--mag-on-orange);
}

.mobile-navigation .mag-mobile-panel .mag-article-row__link {
	color: var(--mag-ink);
}

.mag-article-list > li.mag-article-row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid var(--mag-grey-200);
}

.mag-article-list > li.mag-article-row:last-child {
	border-bottom: 0;
}

.mag-article-row__link {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin-bottom: 2px;
	color: var(--mag-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

/* ===== start page: dark teaser band ===== */

.mag-band {
	background: var(--mag-black);
	color: var(--mag-white);
}

/* Section headline: the shop's .startpage-headline (stylesheet.css) in its colours for dark
   surfaces (.bg-darkgrey .startpage-headline) - .bg-darkgrey itself would repaint the band. */
.mag-band .mag-band__section {
	color: #ccc;
	border-color: #767676;
}

.mag-band__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.mag-band__title,
.mag-promo__title {
	margin: 0;
	font: 900 clamp(22px, 2.6vw, 30px)/1.15 'Arial Black', 'Arial Bold', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

.mag-band__title {
	color: var(--mag-white);
}

.mag-band .mag-lang-hint {
	color: var(--mag-dark-muted);
}

.mag-band__controls {
	display: none;
	gap: 8px;
}

@media (min-width: 992px) {
	.mag-js .mag-band__controls {
		display: flex;
	}
}

/* Set by magazine-integration.js when the band has nothing to scroll. */
.mag-js .mag-band__controls[hidden] {
	display: none;
}

.mag-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--mag-dark-line);
	border-radius: 50%;
	background: transparent;
	color: var(--mag-white);
	font-size: 16px;
	cursor: pointer;
	transition: background-color var(--mag-transition), color var(--mag-transition), border-color var(--mag-transition);
}

.mag-arrow:hover:not([aria-disabled="true"]) {
	border-color: var(--mag-orange);
	background: var(--mag-orange);
	color: var(--mag-on-orange);
}

/* aria-disabled, not disabled: a disabled button drops the keyboard focus (design audit M5). */
.mag-arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.mag-band__track {
	display: grid;
	grid-auto-columns: 78%;
	grid-auto-flow: column;
	gap: var(--mag-gap);
	margin: 24px 0 0;
	padding: 0 0 14px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-color: var(--mag-dark-line) transparent;
	scrollbar-width: thin;
}

@media (min-width: 576px) {
	.mag-band__track {
		grid-auto-columns: calc((100% - var(--mag-gap)) / 2.2);
	}
}

@media (min-width: 992px) {
	.mag-band__track {
		grid-auto-columns: calc((100% - 3 * var(--mag-gap)) / 4);
	}
}

.mag-band__item {
	scroll-snap-align: start;
}

/* Mouse drag (magazine-integration.js): snap off while the pointer moves the track
   and while it glides to the nearest card afterwards; no text selection, grab cursor. */
.mag-band__track.mag-is-dragging,
.mag-band__track.mag-is-gliding {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.mag-band__track.mag-is-dragging,
.mag-band__track.mag-is-dragging *,
.mag-chips.mag-is-dragging,
.mag-chips.mag-is-dragging * {
	cursor: grabbing;
	user-select: none;
}

.mag-card {
	height: 100%;
	overflow: hidden;
	border-radius: var(--mag-radius);
	background: var(--mag-dark-card);
}

.mag-card__media {
	position: relative;
}

.mag-card__media .mag-picture {
	background: var(--mag-dark-image);
}

.mag-card__rubric {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	padding: 6px 10px 5px;
	background: var(--mag-orange);
	color: var(--mag-on-orange);
	font: 700 11px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mag-card__body {
	padding: 14px 16px 18px;
}

.mag-card .mag-date {
	margin-bottom: 6px;
	color: var(--mag-dark-muted);
}

.mag-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font: 700 17px/1.3 Arial, Helvetica, sans-serif;
}

.mag-card__title a,
.mag-card__title a:hover,
.mag-card__title a:focus {
	color: var(--mag-white);
	text-decoration: none;
}

.mag-card:hover .mag-card__title a {
	text-decoration: underline;
}

/* Rubric chips + "all articles" between the headline and the cards (client wish 19.10.2026). */
.mag-band__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
}

@media (max-width: 575.98px) {
	.mag-band__bar .mag-all-button {
		width: 100%;
	}
}

/* ===== rubric tiles below category and brand listings ===== */

.mag-promo__head {
	margin-bottom: 24px;
	text-align: center;
}

.mag-promo__title {
	color: var(--mag-black);
}

.mag-promo__text {
	max-width: 52ch;
	margin: 10px auto 0;
	color: var(--mag-grey-700);
	font-size: 16px;
	line-height: 1.55;
}

.mag-rubric-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.mag-rubric-grid > li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Listing tiles: flex with a centred last row - with 2-4 rubrics (MAGAZINE_RUBRICS)
   the tiles sat left in a 5-column grid under a centred heading, and 5 tiles left an
   empty cell at 768-1199 px (design audit 16.10.2026, M1). */
.mag-rubric-grid:not(.mag-rubric-grid--compact) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.mag-rubric-grid:not(.mag-rubric-grid--compact) > li {
	flex: 0 0 calc((100% - 12px) / 2);
}

.mag-rubric-grid:not(.mag-rubric-grid--compact) > li:last-child:nth-child(odd) {
	flex-basis: 100%;
}

@media (min-width: 768px) {
	.mag-rubric-grid:not(.mag-rubric-grid--compact) > li,
	.mag-rubric-grid:not(.mag-rubric-grid--compact) > li:last-child:nth-child(odd) {
		flex-basis: calc((100% - 2 * 12px) / 3);
	}
}

@media (min-width: 1200px) {
	.mag-rubric-grid:not(.mag-rubric-grid--compact) > li,
	.mag-rubric-grid:not(.mag-rubric-grid--compact) > li:last-child:nth-child(odd) {
		flex-basis: calc((100% - 4 * 12px) / 5);
	}
}

.mag-rubric-tile,
.mag-rubric-tile:hover,
.mag-rubric-tile:focus {
	text-decoration: none;
}

.mag-rubric-tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	min-height: 150px;
	padding: 22px 20px;
	border-radius: var(--mag-radius);
	background: var(--mag-black);
	color: var(--mag-white);
	transition: background-color var(--mag-transition), color var(--mag-transition);
}

@media (max-width: 575.98px) {
	.mag-rubric-grid:not(.mag-rubric-grid--compact) .mag-rubric-tile {
		min-height: 120px;
		padding: 16px;
	}
}

.mag-rubric-tile__icon {
	color: var(--mag-orange);
	font-size: 30px;
	line-height: 1;
	transition: color var(--mag-transition), transform var(--mag-transition);
}

.mag-rubric-tile__label {
	min-width: 0; /* lets the flex item of the compact tile shrink and wrap */
	margin-top: auto;
	font: 900 16px/1.2 'Arial Black', 'Arial Bold', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	/* Long single words (ru "Мотоновости", nl "Toertochten", en "Motorcycle") were cut
	   off at 320 px (WCAG 1.4.10, design audit 16.10.2026, B2). <html lang> drives hyphens. */
	overflow-wrap: anywhere;
	hyphens: auto;
}

@media (max-width: 575.98px) {
	.mag-rubric-grid:not(.mag-rubric-grid--compact) .mag-rubric-tile__label {
		font-size: 14px;
	}
}

.mag-rubric-tile__text {
	color: var(--mag-dark-muted);
	font-size: 13px;
	line-height: 1.4;
	transition: color var(--mag-transition);
}

.mag-rubric-tile:hover,
.mag-rubric-tile:focus-visible {
	background: var(--mag-orange);
	color: var(--mag-on-orange);
}

.mag-rubric-tile:hover .mag-rubric-tile__icon,
.mag-rubric-tile:focus-visible .mag-rubric-tile__icon {
	color: var(--mag-on-orange);
	transform: translateY(-2px);
}

.mag-rubric-tile:hover .mag-rubric-tile__text,
.mag-rubric-tile:focus-visible .mag-rubric-tile__text {
	color: var(--mag-on-orange);
}

.mag-rubric-grid--compact .mag-rubric-tile {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-height: 0;
	padding: 14px;
}

.mag-rubric-grid--compact .mag-rubric-tile__icon {
	font-size: 20px;
}

.mag-rubric-grid--compact .mag-rubric-tile__label {
	margin-top: 0;
	font-size: 13px;
}

/* Tiles with the picture of the rubric's latest article (shop owner 16.10.2026:
   the plain black tiles looked "too simple"). The picture fills the tile, a dark
   gradient carries the white text. Measured 16.10.2026 on a pure white photo
   (design audit): >= 10:1 from 375 px; at 320 px the label starts at about half
   the height and drops to 6:1 (still AA). The symbol becomes an orange badge.
   Hover keeps the dark ground - the orange fill of the plain tile would put black
   text on the photo - and zooms the picture and slides in an orange bottom bar.
   The label stays white: orange on the gradient measured 2.01:1 at 320 px
   (design audit B1, WCAG 1.4.3). */
.mag-rubric-tile--image {
	position: relative;
	z-index: 0;
	min-height: 300px;
	justify-content: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.mag-rubric-tile__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mag-rubric-tile__media .mag-picture {
	height: 100%;
	aspect-ratio: auto;
	background: var(--mag-black);
}

.mag-rubric-tile--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.9) 100%);
}

.mag-rubric-tile--image::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: var(--mag-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--mag-transition);
}

.mag-rubric-tile--image .mag-rubric-tile__icon,
.mag-promo--rubrics .mag-rubric-tile:not(.mag-rubric-tile--image) .mag-rubric-tile__icon {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--mag-radius);
	background: var(--mag-orange);
	color: var(--mag-on-orange);
	font-size: 22px;
}

/* A tile without picture next to picture tiles: same badge, same height, same
   label position (design audit 16.10.2026: bare 30 px glyph looked like another tile). */
.mag-promo--rubrics .mag-rubric-tile:not(.mag-rubric-tile--image) {
	position: relative;
	min-height: 300px;
	justify-content: flex-end;
}

/* The plain tile turns orange on hover - invert the badge so it stays visible. */
.mag-promo--rubrics .mag-rubric-tile:not(.mag-rubric-tile--image):hover .mag-rubric-tile__icon,
.mag-promo--rubrics .mag-rubric-tile:not(.mag-rubric-tile--image):focus-visible .mag-rubric-tile__icon {
	background: var(--mag-black);
	color: var(--mag-orange);
	transform: none;
}

.mag-rubric-tile--image .mag-rubric-tile__label {
	margin-top: 0;
}

.mag-rubric-tile--image .mag-rubric-tile__text {
	color: rgba(255, 255, 255, 0.85);
}

.mag-rubric-tile.mag-rubric-tile--image:hover,
.mag-rubric-tile.mag-rubric-tile--image:focus-visible {
	background: var(--mag-black);
	color: var(--mag-white);
}

.mag-rubric-tile--image:hover .mag-picture img,
.mag-rubric-tile--image:focus-visible .mag-picture img {
	transform: scale(1.06);
}

.mag-rubric-tile--image:hover::after,
.mag-rubric-tile--image:focus-visible::after {
	transform: scaleX(1);
}

.mag-rubric-tile.mag-rubric-tile--image:hover .mag-rubric-tile__icon,
.mag-rubric-tile.mag-rubric-tile--image:focus-visible .mag-rubric-tile__icon {
	color: var(--mag-on-orange);
}

.mag-rubric-tile.mag-rubric-tile--image:hover .mag-rubric-tile__text,
.mag-rubric-tile.mag-rubric-tile--image:focus-visible .mag-rubric-tile__text {
	color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.mag-rubric-tile--image,
	.mag-promo--rubrics .mag-rubric-tile:not(.mag-rubric-tile--image) {
		min-height: 260px;
	}
}

@media (max-width: 575.98px) {
	.mag-rubric-grid:not(.mag-rubric-grid--compact) .mag-rubric-tile--image,
	.mag-promo--rubrics .mag-rubric-grid .mag-rubric-tile:not(.mag-rubric-tile--image) {
		min-height: 200px;
	}

	.mag-rubric-tile--image .mag-rubric-tile__icon,
	.mag-promo--rubrics .mag-rubric-tile:not(.mag-rubric-tile--image) .mag-rubric-tile__icon {
		top: 12px;
		left: 12px;
		width: 36px;
		height: 36px;
		font-size: 18px;
	}
}

.mag-promo__foot {
	margin: 24px 0 0;
	text-align: center;
}

/* The shop's own button (.button.btn_big) has no visible keyboard focus of its own. */
.mag-promo__foot .button:focus-visible {
	outline: 3px solid var(--mag-black);
	outline-offset: 2px;
}

/* ===== footer: magazine column ===== */

/* Heading and the latest articles as plain links like Service / Über uns
   (boxes/magazine/footer_column.html, shop owner 22.10.2026, instead of the card
   with picture and rubric buttons of 16.10.2026). The footer's own rules for
   h4, ul and a style them; only the width is ours: article titles are far
   longer than "Versand" - one line each, cut with "…" (shop owner's screenshot,
   22.10.2026: about 180 px from the column's left edge). The full title stays in
   the link text for screen readers and in its title attribute for the mouse. */
.mag-footer-column > span {
	min-width: 0;
	max-width: 100%;
}

/* #footer-links: must outrank the footer's own "#footer-links li > a"
   (stylesheet.css, inline-block for the 24 px target) - the ellipsis needs a block. */
#footer-links .mag-footer-column li a {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (min-width: 768px) {
	.mag-footer-column > span {
		width: 180px;
	}
}

/* Space above the column only where it wraps below the link columns.
   Below md the shop's columns 3/4 carry no bottom margin: the column gets its own margin.
   From md on the container is fluid - the column sits beside the others on wide
   screens and wraps below them underneath. row-gap applies only between wrapped flex
   lines, so it spaces exactly the wrapped case; on the row's own id, so no :has() is
   needed (design audit round 3, 16.10.2026). */
@media (max-width: 767.98px) {
	.mag-footer-column {
		margin-top: 24px;
	}
}

@media (min-width: 768px) {
	#footer-links {
		row-gap: 24px;
	}
}

.mag-footer-column .mag-lang-hint {
	color: var(--mag-dark-muted);
}

/* ===== motion ===== */

/* ===== article tile in the start page highlights (MagazineHighlight, 20.10.2026) =====
   Same height as the graphics next to it (.startpage-news, swiperjs-styling.css);
   picture on top, dark panel below like the magazine band. One link for the whole tile. */
.mag-highlight__link,
.mag-highlight__link:hover,
.mag-highlight__link:focus {
	color: var(--mag-white);
	text-decoration: none;
}

.mag-highlight__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--mag-black);
}

/* The positioned picture is painted above the link's own outline, so an inset outline
   only framed the dark panel (design audit 20.10.2026, M2). The frame is drawn on top of
   everything; the transparent outline keeps a visible ring in forced-colors mode. */
.mag-highlight__link:focus-visible {
	outline: 3px solid transparent;
	outline-offset: -3px;
}

.mag-highlight__link:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border: 3px solid var(--mag-orange);
	box-shadow: inset 0 0 0 2px var(--mag-black);
	pointer-events: none;
}

.mag-highlight__media {
	position: relative;
	display: block;
	/* 48 %: a three-line title + three-line teaser + button still fit a 540 px tile. */
	flex: 0 0 48%;
	min-height: 0;
	overflow: hidden;
}

.mag-highlight__media .mag-picture {
	height: 100%;
	aspect-ratio: auto;
	background: var(--mag-dark-image);
}

/* Same zoom and pace as the graphics next to it (swiperjs-styling.css: 1.05, 0.2 s). */
.mag-highlight .mag-picture img {
	transition-duration: 0.2s;
}

.mag-highlight__link:hover .mag-picture img,
.mag-highlight__link:focus-visible .mag-picture img {
	transform: scale(1.05);
}

.mag-highlight__label {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	padding: 6px 10px 5px;
	background: var(--mag-orange);
	color: var(--mag-on-orange);
	font: 700 11px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mag-highlight__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
	padding: 18px 24px 24px;
}

.mag-highlight .mag-date {
	color: var(--mag-dark-muted);
}

.mag-highlight__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
	color: var(--mag-white);
	font: 700 20px/1.25 Arial, Helvetica, sans-serif;
}

.mag-highlight__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: var(--mag-dark-muted);
	font: 400 15px/1.45 Arial, Helvetica, sans-serif;
}

/* German compounds are longer than a compact tile line (design audit 20.10.2026, M4:
   a 295 px word in a 218 px line at 320 px, cut off without ellipsis). */
.mag-highlight__title,
.mag-highlight__excerpt {
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* The shop button, as part of the tile's link: pushed to the bottom, hover follows the tile.
   White on orange like every shop button - shop owner's decision of 20.10.2026 against the
   design audit's B1 (2.73:1, below WCAG AA 4.5:1; a shop-wide topic, not this tile's). */
.mag-highlight__button {
	align-self: flex-start;
	margin-top: auto;
}

/* The shop's own hover colour of .button (stylesheet.css). */
.mag-highlight__link:hover .mag-highlight__button,
.mag-highlight__link:focus-visible .mag-highlight__button {
	background: #be4e00;
}

/* No text block may be squeezed: a shrunk title or teaser showed half a line
   (measured 20.10.2026 at 390 px: tile 429 px high, title 39 of 50 px visible). */
.mag-highlight__body > * {
	flex-shrink: 0;
}

/* The tile height is fixed by .startpage-news (vw per size class, swiperjs-styling.css),
   so the tile itself decides (design audit 20.10.2026, M3 - a viewport query left holes of
   up to 173 px): compact only where the full layout does not fit, 48 % picture + ~265 px
   text column = ~511 px. Measured: without compact the button stuck out 9 px at 800 and
   35 px at 1024 px. Size containment is safe here: swiper sets the slide width inline,
   .startpage-news its height. */
.mag-highlight {
	container: mag-highlight / size;
}

/* Very tall tiles (one tile per row, 576-767 px): more picture instead of an empty panel. */
@container mag-highlight (min-height: 640px) {
	.mag-highlight__media {
		flex-basis: 56%;
	}
}

@container mag-highlight (max-height: 519.98px) {
	.mag-highlight__media {
		flex-basis: 45%;
	}

	.mag-highlight__body {
		gap: 6px;
		padding: 14px 18px 18px;
	}

	.mag-highlight__title {
		-webkit-line-clamp: 2;
		font-size: 17px;
	}

	.mag-highlight__excerpt {
		-webkit-line-clamp: 2;
		font-size: 14px;
		line-height: 1.4;
	}
}

@media (max-width: 359.98px) {
	.mag-highlight__excerpt {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mag-picture img,
	.mag-chip,
	.mag-arrow,
	.mag-rubric-tile,
	.mag-rubric-tile__icon,
	.mag-rubric-tile__label,
	.mag-rubric-tile__text,
	.mag-rubric-tile--image::after {
		transition: none;
	}

	.mag-card:hover .mag-picture img,
	.mag-rubric-tile--image:hover .mag-picture img,
	.mag-rubric-tile--image:focus-visible .mag-picture img,
	.mag-highlight__link:hover .mag-picture img,
	.mag-highlight__link:focus-visible .mag-picture img,
	.mag-rubric-tile:hover .mag-rubric-tile__icon {
		transform: none;
	}

	.mag-band__track {
		scroll-behavior: auto;
	}
}