/* ==========================================================================
   KK Produktsuche – Kostümsuche auf der Startseite (25.09.2026)
   Nutzt die Tokens aus Snippet 695 (Beere/Rubin/Tinte/Papier, Plus Jakarta Sans)
   mit festen Rückfallwerten. Schriftgrößen in rem (wachsen mit der Grundschrift).
   Kontraste (gerechnet): Tinte #1E1B1D auf Weiß 16,9:1 · Muted #5A4042 auf Weiß 9,6:1 ·
   Weiß auf Beere #C81D4A 5,6:1 · Türkis #0F766E auf Weiß 5,5:1 · Feldrand #8E6F72 auf Weiß 4,6:1.
   ========================================================================== */
.kkps{
	--kkps-beere:var(--kk-berry,#C81D4A);
	--kkps-rubin:var(--kk-rubin,#9E1236);
	--kkps-tinte:var(--kk-tinte,#1E1B1D);
	--kkps-muted:var(--kk-muted,#5A4042);
	--kkps-rand:var(--kk-edge,#8E6F72);
	--kkps-linie:var(--kk-line,#EADADC);
	--kkps-papier:var(--kk-papier,#F6EEEC);
	--kkps-teal:var(--kk-teal,#0F766E);
	color:var(--kkps-tinte);
}
.kkps *,.kkps *::before,.kkps *::after{box-sizing:border-box;}
.kkps p{text-align:left !important;hyphens:manual;}
.kkps-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* --------------------------------------------------------------------------
   Startseiten-Kopf: ruhig, hell, viel Weißraum (ersetzt den Verlaufskasten
   nur dort, wo die Suche sitzt: .kk-hero--suche im Template).
   -------------------------------------------------------------------------- */
.kk-hero.kk-hero--suche{
	display:block;background:none;color:var(--kk-tinte,#1E1B1D);border-radius:0;
	padding:56px 0 8px;margin-top:0 !important;box-shadow:none;
}
.kk-hero--suche .kk-hero-text{max-width:46rem;}
.kk-hero--suche .kk-hero-h1{color:var(--kk-tinte,#1E1B1D) !important;}
.kk-hero--suche .kk-hero-lead{color:var(--kk-muted,#5A4042);max-width:40rem;}
.kk-hero--suche .kk-hero-note{color:var(--kk-muted,#5A4042);}
.kk-hero--suche .kk-hero-note span::before{background:var(--kk-gold,#F59E0B);}
.kk-hero--suche .kk-eyebrow{background:var(--kk-papier,#F6EEEC);color:var(--kk-rubin,#9E1236);}
.kk-hero.kk-hero--suche :focus-visible{outline-color:var(--kk-tinte,#1E1B1D) !important;}
.kk-hero--suche .kk-hero-suche{margin-top:28px;}
.kk-hero--suche .kk-hero-h1{margin-bottom:0 !important;}
/* Einleitung + Kennzahlen stehen im Template NACH dem Suchbereich: Überleitung zum Magazin. */
.kk-hero--suche > .kk-hero-lead{margin:48px 0 0 !important;}
.kk-hero--suche > .kk-hero-note{margin-top:12px !important;}

/* --------------------------------------------------------------------------
   Suchformular
   -------------------------------------------------------------------------- */
.kkps-form{
	background:#fff;border:1px solid var(--kkps-linie);border-radius:18px;
	padding:clamp(20px,3vw,36px);box-shadow:0 12px 32px -18px rgb(30 27 29 / .28);
}
.kkps-h{margin:0 !important;font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);font-weight:800;line-height:1.2;letter-spacing:-.015em;color:var(--kkps-tinte);}
.kkps-intro{margin:6px 0 0 !important;font-size:1rem;line-height:1.5;color:var(--kkps-muted);}
.kkps-felder{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:20px;}
.kkps-feld{display:flex;flex-direction:column;gap:6px;min-width:0;}
.kkps-feld label{font-size:.875rem;font-weight:700;color:var(--kkps-tinte);}
.kkps-feld--q{flex:1 1 20rem;}
.kkps-feld--b{flex:0 1 15rem;}
.kkps-q,.kkps-b{
	width:100%;min-height:56px;margin:0;border:2px solid var(--kkps-rand);border-radius:12px;background:#fff;
	color:var(--kkps-tinte);font:inherit;font-size:1.125rem;line-height:1.3;
}
.kkps-q{padding:0 16px;}
.kkps-q::placeholder{color:#735A5D;opacity:1;}
.kkps-b{padding:0 40px 0 14px;font-size:1rem;appearance:none;-webkit-appearance:none;
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B1D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat;}
.kkps-q:focus-visible,.kkps-b:focus-visible{outline:3px solid var(--kkps-tinte);outline-offset:2px;border-color:var(--kkps-tinte);}
.kkps-btn{
	flex:0 0 auto;min-height:56px;padding:0 32px;border:0;border-radius:12px;cursor:pointer;
	background:var(--kkps-beere);color:#fff;font:inherit;font-size:1.0625rem;font-weight:700;
}
.kkps-btn:hover{background:var(--kkps-rubin);}
.kkps-btn:focus-visible{outline:3px solid var(--kkps-tinte);outline-offset:2px;}
.kkps-btn:disabled{cursor:progress;opacity:.8;}
.kkps-anzeige{margin:16px 0 0 !important;font-size:.875rem;line-height:1.5;color:var(--kkps-muted);max-width:52rem;}
.kkps-anzeige a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.kkps-ad{
	display:inline-block;margin-right:6px;padding:1px 6px;border:1px solid var(--kkps-rand);border-radius:4px;
	font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;color:var(--kkps-muted);vertical-align:1px;
}

/* --------------------------------------------------------------------------
   Ergebnisse
   -------------------------------------------------------------------------- */
.kkps-ergebnis{margin-top:28px;scroll-margin-top:80px;}
.kkps-ergebnis[aria-busy="true"] .kkps-liste{opacity:.45;}
.kkps-rh{margin:0 !important;font-size:1.25rem;font-weight:800;line-height:1.3;scroll-margin-top:80px;}
.kkps-rh:focus:not(:focus-visible),.kkps-status:focus:not(:focus-visible){outline:none;}
.kkps-rh:focus-visible,.kkps-status:focus-visible{outline:3px solid var(--kkps-tinte);outline-offset:4px;border-radius:4px;}
.kkps-alle{margin:8px 0 0 !important;font-size:.9375rem;}
.kkps-alle a{color:var(--kkps-rubin);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.kkps-status{margin:4px 0 0 !important;font-size:.9375rem;line-height:1.5;color:var(--kkps-muted);}
.kkps-status--hinweis{margin-top:0 !important;padding:14px 18px;border-radius:12px;background:var(--kkps-papier);color:var(--kkps-tinte);font-size:1rem;}
.kkps-tipps{margin:12px 0 0;padding-left:1.2em;font-size:1rem;line-height:1.6;}
.kkps-tipps a,.kkps-vom a{color:var(--kkps-rubin);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.kkps-erneut{margin-top:12px;min-height:48px;padding:0 20px;border:2px solid var(--kkps-tinte);border-radius:10px;background:#fff;color:var(--kkps-tinte);font:inherit;font-weight:700;cursor:pointer;}

.kkps-liste{
	list-style:none;margin:20px 0 0 !important;padding:0 !important;
	display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:20px;
}
.kkps-karte{
	position:relative;display:flex;flex-direction:column;margin:0 !important;
	background:#fff;border:1px solid var(--kkps-linie);border-radius:14px;overflow:hidden;
	transition:box-shadow .15s ease,transform .15s ease;
}
.kkps-karte:hover{box-shadow:0 10px 24px -8px rgb(30 27 29 / .18);transform:translateY(-2px);}
.kkps-karte:focus-within{outline:3px solid var(--kkps-tinte);outline-offset:2px;}
.kkps-bild{aspect-ratio:4/5;background:#fff;display:flex;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid var(--kkps-linie);}
.kkps-bild img{width:100%;height:100%;object-fit:contain;display:block;}
.kkps-bild--leer span{font-size:.875rem;color:var(--kkps-muted);}
.kkps-text{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px;}
.kkps-kat{margin:0 !important;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--kkps-muted);}
.kkps-titel{margin:0 !important;font-size:1rem;font-weight:700;line-height:1.35;letter-spacing:0;overflow-wrap:anywhere;}
.kkps-titel a{color:var(--kkps-tinte);text-decoration:none;}
.kkps-titel a::after{content:"";position:absolute;inset:0;z-index:1;} /* ganze Karte klickbar, ein Tabstopp */
.kkps-titel a:focus{outline:none;}
.kkps-karte:hover .kkps-titel a{text-decoration:underline;text-underline-offset:3px;}
.kkps-beschr{
	margin:0 !important;font-size:.875rem;line-height:1.5;color:var(--kkps-muted);
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.kkps-info{margin:2px 0 0 !important;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.8125rem;line-height:1.4;color:var(--kkps-muted);}
.kkps-lager{font-weight:700;}
.kkps-lager.is-ja{color:var(--kkps-teal);}
.kkps-lager.is-ja::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:1px;}
.kkps-lager.is-nein{color:var(--kkps-muted);}
.kkps-fuss{margin:auto 0 0 !important;padding-top:10px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.kkps-anb{font-size:.8125rem;color:var(--kkps-muted);overflow-wrap:anywhere;}
.kkps-cta{flex-basis:100%;font-size:.875rem;font-weight:700;color:var(--kkps-rubin);}
.kkps-cta::after{content:" \2192";}
.kkps-karte.is-nicht-lager .kkps-bild img{opacity:.55;}

.kkps-weiter{margin:24px 0 0 !important;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.kkps-mehr,.kkps-seite{
	display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
	border:2px solid var(--kkps-tinte);border-radius:12px;background:#fff;color:var(--kkps-tinte);
	font-weight:700;text-decoration:none;
}
.kkps-mehr:hover,.kkps-seite:hover{background:var(--kkps-papier);}
.kkps-mehr:focus-visible,.kkps-seite:focus-visible{outline:3px solid var(--kkps-tinte);outline-offset:2px;}
.kkps-mehr[aria-disabled="true"]{opacity:.7;cursor:progress;}
.kkps-vom{margin:28px 0 0 !important;font-size:1rem;line-height:1.55;color:var(--kkps-muted);}
.kkps-meldung{margin:12px 0 0 !important;padding:14px 18px;border-radius:12px;background:var(--kkps-papier);font-size:1rem;}
.kkps--aus{padding:24px;border:1px solid var(--kkps-linie);border-radius:18px;background:#fff;}

@media (hover:none){
	.kkps-karte:hover{transform:none;box-shadow:none;}
	.kkps-karte:hover .kkps-titel a{text-decoration:none;}
}
@media (prefers-reduced-motion:reduce){
	.kkps-karte{transition:none;}
	.kkps-karte:hover{transform:none;}
}

/* Mobil */
@media (max-width:719px){
	.kk-hero.kk-hero--suche{padding:32px 0 4px;}
	.kk-hero--suche .kk-hero-suche{margin-top:20px;}
	.kk-hero--suche > .kk-hero-lead{margin-top:36px !important;}
	.kkps-feld--q,.kkps-feld--b{flex:1 1 100%;}
	.kkps-btn{flex:1 1 100%;}
	.kkps-liste{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:12px;}
	.kkps-text{padding:12px;}
	.kkps-beschr{-webkit-line-clamp:2;}
}