/* ============================================================
   Kuhrke Strickwaren — Design Layer v1.1
   Mobile-first hardening + Cookie-Notice
   ============================================================ */

/* --------------------- Tokens --------------------- */
:root {
	--ks-bg-cream:        #faf6ee;
	--ks-bg-ecru:         #f1ead9;
	--ks-bg-bone:         #e7dcc4;
	--ks-bg-clay-soft:    #e9d4c9;

	--ks-ink-deep:        #1f1815;
	--ks-ink-warm:        #3a2e26;
	--ks-ink-soft:        #6b5b50;
	--ks-ink-mute:        #97877b;

	--ks-accent:          #a8543e;
	--ks-accent-deep:     #854331;
	--ks-accent-shadow:   rgba(168,84,62,.18);
	--ks-gold:            #b8956a;
	--ks-forest:          #2d3a2c;

	--ks-font-display:    'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--ks-font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--ks-space-1:  .25rem;
	--ks-space-2:  .5rem;
	--ks-space-3:  .75rem;
	--ks-space-4:  1rem;
	--ks-space-6:  1.5rem;
	--ks-space-8:  2rem;
	--ks-space-12: 3rem;
	--ks-space-16: 4rem;
	--ks-space-20: 5rem;
	--ks-space-24: 6rem;
	--ks-space-32: 8rem;
	--ks-space-40: 10rem;

	--ks-w-narrow: 640px;
	--ks-w-prose:  720px;
	--ks-w-base:   1140px;
	--ks-w-wide:   1320px;

	--ks-radius-sm: 2px;
	--ks-radius-md: 4px;
	--ks-radius-lg: 8px;
	--ks-shadow-soft: 0 1px 3px rgba(31,24,21,.06), 0 8px 24px rgba(31,24,21,.04);
	--ks-shadow-card: 0 4px 12px rgba(31,24,21,.06), 0 24px 48px -12px rgba(31,24,21,.08);
	--ks-transition:  220ms cubic-bezier(.4,0,.2,1);

	/* Mobile-bedacht: TouchTarget min 44x44px */
	--ks-touch-min: 44px;
}

/* --------------------- Typografie-Reset --------------------- */
body,
.editor-styles-wrapper {
	font-family: var(--ks-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ks-ink-warm);
	background-color: var(--ks-bg-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
* { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
	font-family: var(--ks-font-display);
	font-weight: 400;
	letter-spacing: -.015em;
	color: var(--ks-ink-deep);
	line-height: 1.18;
	font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "ss01" 1;
}

p { margin: 0 0 1.1em; }

a {
	color: var(--ks-accent);
	text-decoration: none;
	transition: color var(--ks-transition);
	border-bottom: 1px solid var(--ks-accent-shadow);
	padding-bottom: 1px;
}
a:hover { color: var(--ks-accent-deep); border-bottom-color: var(--ks-accent-deep); }
a:focus-visible { outline: 2px solid var(--ks-accent); outline-offset: 3px; border-radius: var(--ks-radius-sm); }

::selection { background: var(--ks-accent); color: var(--ks-bg-cream); }

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

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------- Komponenten --------------------- */
.ks-eyebrow,
.is-style-ks-eyebrow {
	font-family: var(--ks-font-body);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ks-accent);
	margin: 0 0 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: .9rem;
}
.ks-eyebrow::before,
.is-style-ks-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--ks-accent);
	display: inline-block;
}

.ks-display-xl {
	font-size: clamp(2.4rem, 6vw, 5.4rem) !important;
	line-height: 1.05 !important;
	font-weight: 350 !important;
	letter-spacing: -.025em !important;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}
.ks-display-l {
	font-size: clamp(2rem, 4.5vw, 3.6rem) !important;
	line-height: 1.1 !important;
	font-weight: 400 !important;
	letter-spacing: -.018em !important;
	font-variation-settings: "opsz" 100;
}
.ks-display-m {
	font-size: clamp(1.55rem, 2.8vw, 2.2rem) !important;
	line-height: 1.2 !important;
	font-weight: 400 !important;
	font-variation-settings: "opsz" 48;
}

.ks-lead {
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.6;
	color: var(--ks-ink-soft);
	max-width: 36em;
	font-weight: 300;
}

.ks-prose {
	max-width: var(--ks-w-prose);
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--ks-ink-warm);
}
.ks-prose p + p { text-indent: 1.6em; margin-top: 0; }

.ks-quote {
	font-family: var(--ks-font-display);
	font-size: clamp(1.3rem, 2.2vw, 1.85rem);
	line-height: 1.4;
	font-style: italic;
	color: var(--ks-ink-deep);
	border-left: 2px solid var(--ks-accent);
	padding-left: 1.5rem;
	margin: 2.5rem 0;
	font-variation-settings: "opsz" 100, "SOFT" 100;
}

.ks-dropcap::first-letter {
	font-family: var(--ks-font-display);
	font-size: 4.2em;
	float: left;
	line-height: .85;
	padding: .12em .12em 0 0;
	color: var(--ks-accent);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
}

.ks-num {
	font-family: var(--ks-font-display);
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--ks-accent);
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-variation-settings: "opsz" 48;
}

.ks-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 3rem auto;
	color: var(--ks-gold);
	padding-inline: 1.5rem;
}
.ks-divider::before,
.ks-divider::after {
	content: "";
	flex: 1;
	max-width: 80px;
	height: 1px;
	background: currentColor;
	opacity: .35;
}
.ks-divider-glyph {
	font-family: var(--ks-font-display);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--ks-gold);
}

/* --------------------- Buttons --------------------- */
.wp-element-button,
.wp-block-button__link {
	font-family: var(--ks-font-body) !important;
	font-size: .95rem !important;
	font-weight: 500 !important;
	letter-spacing: .03em !important;
	padding: .95rem 1.85rem !important;
	border-radius: var(--ks-radius-sm) !important;
	transition: all var(--ks-transition) !important;
	border: 1px solid transparent !important;
	text-decoration: none !important;
	min-height: var(--ks-touch-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
}
.wp-block-button__link:not(.has-background) { background: var(--ks-ink-deep) !important; color: var(--ks-bg-cream) !important; }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: var(--ks-shadow-soft); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; border-color: currentColor !important; }
.wp-block-cover .wp-block-button__link:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); }

/* --------------------- Image --------------------- */
.wp-block-image figure,
.wp-block-image img { border-radius: 0; }
.wp-block-image figcaption {
	font-family: var(--ks-font-display);
	font-style: italic;
	font-size: .88rem;
	color: var(--ks-ink-soft);
	margin-top: .8rem;
	text-align: center;
	font-variation-settings: "opsz" 24;
}

/* --------------------- CSS-Only Texture-Placeholder --------------------- */
.ks-tile {
	aspect-ratio: 4 / 5;
	position: relative;
	overflow: hidden;
	border-radius: var(--ks-radius-sm);
	background: var(--ks-bg-bone);
}
.ks-tile::after {
	content: attr(data-label);
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	color: var(--ks-ink-soft);
	font-family: var(--ks-font-display);
	font-style: italic;
	font-size: .82rem;
	font-variation-settings: "opsz" 24;
	letter-spacing: .02em;
}
.ks-tile--a { background: radial-gradient(circle at 25% 20%, rgba(168,84,62,.14) 0%, transparent 45%), radial-gradient(circle at 75% 80%, rgba(184,149,106,.18) 0%, transparent 50%), linear-gradient(135deg, #ede2ca 0%, #d8c5a3 100%); }
.ks-tile--b { background: radial-gradient(circle at 70% 30%, rgba(45,58,44,.12) 0%, transparent 50%), radial-gradient(circle at 20% 70%, rgba(168,84,62,.16) 0%, transparent 45%), linear-gradient(160deg, #f0e5cf 0%, #cfb893 100%); }
.ks-tile--c { background: radial-gradient(ellipse at center, rgba(184,149,106,.22) 0%, transparent 60%), linear-gradient(120deg, #e4d4b3 0%, #c4a778 100%); }
.ks-tile--d { background: radial-gradient(circle at 40% 60%, rgba(168,84,62,.2) 0%, transparent 55%), linear-gradient(45deg, #ead8b9 0%, #d4b888 100%); }
.ks-tile--e { background: radial-gradient(circle at 80% 20%, rgba(45,58,44,.14) 0%, transparent 50%), linear-gradient(200deg, #e6d6b7 0%, #b8956a 100%); color: var(--ks-bg-cream); }
.ks-tile--f { background: repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(168,84,62,.04) 12px, rgba(168,84,62,.04) 13px), linear-gradient(180deg, #f4ead2 0%, #d9c39a 100%); }
.ks-tile--g { background: radial-gradient(circle at 30% 70%, rgba(45,58,44,.16) 0%, transparent 40%), radial-gradient(circle at 70% 30%, rgba(184,149,106,.2) 0%, transparent 40%), linear-gradient(135deg, #e0cda5 0%, #b89e72 100%); }
.ks-tile--h { background: radial-gradient(ellipse at top, rgba(31,24,21,.12) 0%, transparent 50%), linear-gradient(160deg, #f1e6cb 0%, #c4ab7e 100%); }

.ks-tile--portrait  { aspect-ratio: 3 / 4; }
.ks-tile--landscape { aspect-ratio: 4 / 3; }
.ks-tile--square    { aspect-ratio: 1; }
.ks-tile--wide      { aspect-ratio: 16 / 10; }

/* --------------------- Editorial Sections --------------------- */
.ks-section { padding: clamp(4rem, 9vw, var(--ks-space-32)) 0; }
.ks-section--cream { background: var(--ks-bg-cream); }
.ks-section--ecru  { background: var(--ks-bg-ecru); }
.ks-section--bone  { background: var(--ks-bg-bone); }
.ks-section--ink   { background: var(--ks-ink-deep); color: var(--ks-bg-cream); }
.ks-section--ink h1, .ks-section--ink h2, .ks-section--ink h3 { color: var(--ks-bg-cream); }
.ks-section--ink .ks-eyebrow, .ks-section--ink .is-style-ks-eyebrow { color: var(--ks-gold); }
.ks-section--ink .ks-eyebrow::before, .ks-section--ink .is-style-ks-eyebrow::before { background: var(--ks-gold); }

.ks-manifest {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	max-width: var(--ks-w-base);
	margin: 0 auto;
}
.ks-manifest__item {
	border-top: 1px solid var(--ks-bg-bone);
	padding-top: 1.8rem;
}
.ks-manifest__num {
	font-family: var(--ks-font-display);
	font-size: 1rem;
	font-weight: 500;
	color: var(--ks-accent);
	margin-bottom: 1rem;
	letter-spacing: .04em;
}
.ks-manifest__title {
	font-family: var(--ks-font-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--ks-ink-deep);
	margin: 0 0 .8rem;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.ks-manifest__body { font-size: 1rem; line-height: 1.65; color: var(--ks-ink-soft); margin: 0; }

.ks-mosaic {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 1.4rem;
	max-width: var(--ks-w-wide);
	margin: 3rem auto 0;
}
.ks-mosaic > :nth-child(1) { grid-row: span 2; }

.ks-collection-card {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--ks-bg-ecru);
	color: var(--ks-ink-deep);
	border: none;
	border-bottom: none;
	padding: 0;
	transition: transform var(--ks-transition);
}
.ks-collection-card:hover { transform: translateY(-2px); border-bottom: none; }
.ks-collection-card__media {
	width: 100%;
	height: 100%;
	min-height: 280px;
	transition: transform 480ms cubic-bezier(.4,0,.2,1);
}
.ks-collection-card:hover .ks-collection-card__media { transform: scale(1.03); }
.ks-collection-card__caption {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 1rem;
	color: var(--ks-bg-cream);
	mix-blend-mode: difference;
}
.ks-collection-card__title {
	font-family: var(--ks-font-display);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
	letter-spacing: -.005em;
}
.ks-collection-card__arrow {
	font-family: var(--ks-font-display);
	font-size: 1.2rem;
	line-height: 1;
	transition: transform var(--ks-transition);
}
.ks-collection-card:hover .ks-collection-card__arrow { transform: translateX(4px); }

.ks-editorial {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
	max-width: var(--ks-w-base);
	margin: 0 auto;
}
.ks-editorial--reverse { grid-template-columns: 7fr 5fr; }
.ks-editorial--reverse > :first-child { order: 2; }

.ks-product-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	grid-template-rows: 1fr 1fr;
	gap: 1.2rem;
	max-width: var(--ks-w-base);
	margin: 2.5rem auto 0;
}
.ks-product-grid > :first-child { grid-row: span 2; }
.ks-product-grid > :not(:first-child) { aspect-ratio: 4/3; }

.ks-wrap-narrow { max-width: var(--ks-w-narrow); margin-left: auto; margin-right: auto; padding-inline: 1.5rem; }
.ks-wrap-prose  { max-width: var(--ks-w-prose);  margin-left: auto; margin-right: auto; padding-inline: 1.5rem; }
.ks-wrap-base   { max-width: var(--ks-w-base);   margin-left: auto; margin-right: auto; padding-inline: 1.5rem; }
.ks-wrap-wide   { max-width: var(--ks-w-wide);   margin-left: auto; margin-right: auto; padding-inline: 1.5rem; }

/* --------------------- Blocksy Header/Footer-Polish --------------------- */
.ct-site-title a,
.site-title a,
.wp-block-site-title a {
	font-family: var(--ks-font-display) !important;
	font-weight: 400 !important;
	letter-spacing: -.01em !important;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem) !important;
	color: var(--ks-ink-deep) !important;
	border-bottom: none !important;
	font-variation-settings: "opsz" 48;
}

.ct-header [data-id="menu"] .menu > li > a {
	font-family: var(--ks-font-body) !important;
	font-size: .92rem !important;
	font-weight: 400 !important;
	letter-spacing: .04em !important;
	text-transform: none !important;
	color: var(--ks-ink-warm) !important;
	border-bottom: none !important;
	padding-bottom: 4px !important;
	position: relative;
	min-height: var(--ks-touch-min);
	display: inline-flex;
	align-items: center;
}
.ct-header [data-id="menu"] .menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: var(--ks-accent);
	transition: all var(--ks-transition);
	transform: translateX(-50%);
}
.ct-header [data-id="menu"] .menu > li:hover > a::after,
.ct-header [data-id="menu"] .menu > li.current-menu-item > a::after { width: 28px; }

.ct-header [data-row="middle"] { padding-block: 1.4rem !important; }

/* Mobile-Menu Trigger (Hamburger) */
.ct-header-trigger,
.ct-mobile-menu-trigger {
	min-width: var(--ks-touch-min) !important;
	min-height: var(--ks-touch-min) !important;
	color: var(--ks-ink-deep) !important;
}

/* Mobile-Drawer */
.ct-panel.active,
.ct-panel-inner {
	background: var(--ks-bg-cream) !important;
}
.ct-panel .menu li a {
	font-family: var(--ks-font-display) !important;
	font-size: 1.5rem !important;
	font-weight: 400 !important;
	color: var(--ks-ink-deep) !important;
	border-bottom: none !important;
	padding: 1rem 0 !important;
	min-height: var(--ks-touch-min);
}
.ct-panel .menu li a:hover { color: var(--ks-accent) !important; }

.ct-footer {
	background: var(--ks-bg-cream) !important;
	border-top: 1px solid var(--ks-bg-bone);
	color: var(--ks-ink-soft);
}
.ct-footer .menu li a {
	font-size: .9rem !important;
	color: var(--ks-ink-soft) !important;
	border-bottom: none !important;
	min-height: var(--ks-touch-min);
	display: inline-flex;
	align-items: center;
}

/* --------------------- CF7 Form --------------------- */
.wpcf7 { font-family: var(--ks-font-body); }
.wpcf7 p {
	margin-bottom: 1.5rem;
	font-size: .92rem;
	color: var(--ks-ink-soft);
	font-weight: 500;
	letter-spacing: .02em;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	font-family: var(--ks-font-body);
	font-size: 1rem;
	padding: .8rem 1rem;
	background: var(--ks-bg-cream);
	border: 1px solid var(--ks-bg-bone);
	border-radius: var(--ks-radius-sm);
	color: var(--ks-ink-deep);
	transition: border-color var(--ks-transition), box-shadow var(--ks-transition);
	min-height: var(--ks-touch-min);
	margin-top: .35rem;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--ks-accent);
	box-shadow: 0 0 0 3px var(--ks-accent-shadow);
}
.wpcf7 textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: .88rem;
	line-height: 1.55;
	cursor: pointer;
	color: var(--ks-ink-soft);
	min-height: var(--ks-touch-min);
}
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	margin-top: .3rem;
	accent-color: var(--ks-accent);
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.wpcf7 input[type="submit"] {
	width: 100%;
	font-family: var(--ks-font-body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .03em;
	padding: 1rem 2rem;
	background: var(--ks-ink-deep);
	color: var(--ks-bg-cream);
	border: 1px solid var(--ks-ink-deep);
	border-radius: var(--ks-radius-sm);
	cursor: pointer;
	transition: all var(--ks-transition);
	min-height: var(--ks-touch-min);
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	background: var(--ks-accent);
	border-color: var(--ks-accent);
	transform: translateY(-1px);
	box-shadow: var(--ks-shadow-soft);
	outline: none;
}
.wpcf7-response-output {
	font-family: var(--ks-font-body) !important;
	font-size: .95rem !important;
	padding: 1rem 1.2rem !important;
	border-radius: var(--ks-radius-sm) !important;
	margin-top: 1.5rem !important;
}
.wpcf7-mail-sent-ok { background: rgba(45,58,44,.08) !important; border-color: var(--ks-forest) !important; color: var(--ks-forest) !important; }
.wpcf7-validation-errors { background: rgba(168,84,62,.08) !important; border-color: var(--ks-accent) !important; color: var(--ks-accent-deep) !important; }
.wpcf7-not-valid-tip { color: var(--ks-accent) !important; font-size: .82rem !important; font-style: italic; }

/* --------------------- COOKIE-NOTICE --------------------- */
.ks-notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--ks-ink-deep);
	color: var(--ks-bg-cream);
	transform: translateY(100%);
	transition: transform 360ms cubic-bezier(.4,0,.2,1);
	box-shadow: 0 -8px 24px rgba(31,24,21,.18);
}
.ks-notice.is-visible { transform: translateY(0); }
.ks-notice__inner {
	max-width: var(--ks-w-base);
	margin: 0 auto;
	padding: 1.1rem 1.5rem;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.5rem;
	align-items: center;
}
.ks-notice__text {
	font-family: var(--ks-font-body);
	font-size: .92rem;
	line-height: 1.55;
	margin: 0;
	color: var(--ks-bg-bone);
}
.ks-notice__text strong { color: var(--ks-bg-cream); font-weight: 500; }
.ks-notice__text a { color: var(--ks-gold); border-bottom-color: rgba(184,149,106,.4); }
.ks-notice__text a:hover { color: var(--ks-bg-cream); border-bottom-color: var(--ks-bg-cream); }
.ks-notice__btn {
	font-family: var(--ks-font-body);
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: .04em;
	padding: .75rem 1.6rem;
	background: var(--ks-accent);
	color: var(--ks-bg-cream);
	border: 1px solid var(--ks-accent);
	border-radius: var(--ks-radius-sm);
	cursor: pointer;
	transition: all var(--ks-transition);
	white-space: nowrap;
	min-height: var(--ks-touch-min);
}
.ks-notice__btn:hover { background: var(--ks-accent-deep); border-color: var(--ks-accent-deep); }
.ks-notice__btn:focus-visible { outline: 2px solid var(--ks-bg-cream); outline-offset: 2px; }

body { background: var(--ks-bg-cream); }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-cover.alignfull { margin-block: 0 !important; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — Mobile-First Hardening
   ════════════════════════════════════════════════════════════ */

/* === Tablet/Desktop-Übergang — 1024px === */
@media (max-width: 1024px) {
	.ks-mosaic {
		grid-template-columns: 1fr 1fr;
	}
	.ks-mosaic > :nth-child(1) {
		grid-column: span 2;
		grid-row: span 1;
		aspect-ratio: 16 / 9;
	}
	.ks-mosaic > :nth-child(1) .ks-collection-card__media {
		min-height: 380px;
	}
}

/* === Tablet — 768px === */
@media (max-width: 768px) {
	body { font-size: 16px; }
	.ks-section { padding: clamp(2.5rem, 8vw, 4.5rem) 0; }

	.ks-editorial,
	.ks-editorial--reverse {
		grid-template-columns: 1fr;
		gap: 2.2rem;
	}
	.ks-editorial--reverse > :first-child { order: 0; }

	.ks-product-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}
	.ks-product-grid > :first-child {
		grid-row: span 1;
		grid-column: span 2;
		aspect-ratio: 16/10;
	}

	/* Anfrage: aside springt unter Form, kein Border-Left mehr */
	.ks-page-anfrage aside,
	aside[style*="border-left"] {
		border-left: none !important;
		border-top: 1px solid var(--ks-bg-bone);
		padding-left: 0 !important;
		padding-top: 2.5rem !important;
		margin-top: 1rem;
	}

	.ks-mosaic { gap: 1rem; }
	.ks-manifest {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.ks-manifest__item { padding-top: 1.4rem; }

	/* Mehrere "Editorial"-Layouts in Anfrage benutzen grid-template-columns:7fr 5fr inline — overriden */
	.ks-editorial[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}
}

/* === Phone Landscape / Tablet Portrait — 600px === */
@media (max-width: 600px) {
	.is-style-ks-hero { min-height: 72vh !important; }

	/* Drop-Cap auf engen Screens deaktivieren */
	.ks-dropcap::first-letter {
		font-size: 1em;
		float: none;
		padding: 0;
		color: inherit;
		font-weight: inherit;
		font-family: inherit;
	}

	/* Mosaic-Captions: Difference-Blend hat auf Mobile-Browsern Kontrast-Lücken,
	   ersetze durch dunklen Gradient für stabile Lesbarkeit */
	.ks-collection-card__caption {
		mix-blend-mode: normal;
		background: linear-gradient(to top, rgba(31,24,21,.85) 0%, rgba(31,24,21,.35) 65%, transparent 100%);
		padding: 3rem 1.2rem 1rem;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: flex-end;
	}
	.ks-collection-card__caption,
	.ks-collection-card__title { color: var(--ks-bg-cream) !important; }
	.ks-collection-card:hover { transform: none; }

	.ks-quote { padding-left: 1rem; margin: 2rem 0; }
	.ks-eyebrow::before,
	.is-style-ks-eyebrow::before { width: 18px; }
}

/* === Phone — 480px === */
@media (max-width: 480px) {
	.ks-mosaic { grid-template-columns: 1fr; }
	.ks-mosaic > :nth-child(1) {
		grid-column: span 1;
		aspect-ratio: 4 / 3;
	}

	.ks-product-grid {
		grid-template-columns: 1fr;
	}
	.ks-product-grid > :first-child { grid-column: span 1; aspect-ratio: 4 / 3; }
	.ks-product-grid > :not(:first-child) { aspect-ratio: 4 / 3; }

	.ks-section { padding: 2.5rem 0 !important; }

	/* iOS-Form-Zoom verhindern: input mindestens 16px */
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 select,
	.wpcf7 textarea {
		font-size: 16px;
		padding: .9rem 1rem;
	}
	.wpcf7 input[type="submit"] {
		padding: 1.1rem 1.5rem;
		font-size: 1rem;
	}

	/* Cookie-Notice mobile — Stack statt Grid */
	.ks-notice__inner {
		grid-template-columns: 1fr;
		gap: .8rem;
		padding: 1rem 1.2rem;
	}
	.ks-notice__btn { width: 100%; }

	/* Wrap-Inline-Padding etwas enger */
	.ks-wrap-narrow,
	.ks-wrap-prose,
	.ks-wrap-base,
	.ks-wrap-wide { padding-inline: 1.2rem; }
}

/* === Tiny — 360px === */
@media (max-width: 360px) {
	.ks-display-xl { font-size: 2.1rem !important; }
	.ks-display-l  { font-size: 1.7rem !important; }
	.ks-display-m  { font-size: 1.35rem !important; }
	.ks-section { padding: 2rem 0 !important; }
	.ks-wrap-narrow,
	.ks-wrap-prose,
	.ks-wrap-base,
	.ks-wrap-wide { padding-inline: 1rem; }
}

/* === Landscape-Phone: Hero kleiner, sonst Brüller === */
@media (max-height: 500px) and (orientation: landscape) {
	.is-style-ks-hero { min-height: 100vh !important; padding-block: 3rem !important; }
}

/* ============================================================
   v1.2 — Tile mit echtem Foto (Sortiment + Mosaic)
   ============================================================ */
.ks-tile > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Foto-Tile: Caption mit Dark-Gradient für stabilen Kontrast */
.ks-tile:has(> img)::after {
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2.5rem 1.2rem 1rem;
	color: var(--ks-bg-cream);
	background: linear-gradient(to top, rgba(31,24,21,.78) 0%, rgba(31,24,21,.35) 50%, transparent 100%);
	z-index: 1;
}

/* Fallback für Browser ohne :has() — wenn Klasse explizit gesetzt */
.ks-tile.ks-tile--photo::after {
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2.5rem 1.2rem 1rem;
	color: var(--ks-bg-cream);
	background: linear-gradient(to top, rgba(31,24,21,.78) 0%, rgba(31,24,21,.35) 50%, transparent 100%);
	z-index: 1;
}