/* KIKOM Consent – Desktop-Variante.
   Echte Texte/Buttons liegen via Container-Query-Einheiten (cqw) lagegenau
   über dem bereinigten Hintergrundbild. Responsive (mobil) folgt separat. */

@font-face{font-family:"KKC Quicksand";font-weight:400;font-display:swap;src:url(fonts/quicksand-400.woff2) format("woff2")}
@font-face{font-family:"KKC Quicksand";font-weight:500;font-display:swap;src:url(fonts/quicksand-500.woff2) format("woff2")}
@font-face{font-family:"KKC Quicksand";font-weight:700;font-display:swap;src:url(fonts/quicksand-700.woff2) format("woff2")}

/* Container-Query-Kontext liegt auf dem äußeren Wrapper, damit @container
   auch .kkc-stage selbst umstylen kann (eine Query kann ihren eigenen
   Container nicht stylen). cqw bezieht sich auf die Wrapper-Breite. */
.kikom-consent{width:100%;max-width:100%;container-type:inline-size}
.kikom-consent *{box-sizing:border-box}

/* ---------- Platzhalter ---------- */
.kkc-stage{position:relative;line-height:0;overflow:hidden}
.kkc-stage>.kkc-bg{display:block;width:100%;height:auto}

.kkc-overlay{position:absolute;inset:0;z-index:2;line-height:1.4}
.kkc-head{position:absolute;margin:0;font-family:"KKC Quicksand",sans-serif;font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:.005em}
.kkc-text{position:absolute;margin:0;font-family:"KKC Quicksand",sans-serif;font-weight:500;color:#eef4f3}
.kkc-btns{position:absolute;display:flex}

.kikom-consent .kkc-btn{font-family:"KKC Quicksand",sans-serif;font-weight:700;border-radius:999px;cursor:pointer;
	border:0.16cqw solid #ffe500;display:inline-flex;align-items:center;justify-content:center;
	white-space:nowrap;line-height:1;text-decoration:none;transition:background .14s,color .14s;
	/* Reset gegen Theme-/UA-Regeln (Höhe, Ausrichtung, Link-Metrik) */
	box-sizing:border-box;margin:0;min-height:0;height:auto;vertical-align:middle;letter-spacing:normal;
	-webkit-appearance:none;appearance:none}
/* Primary (button) */
.kikom-consent .kkc-btn-primary{background:#ffe500;color:#264f52}
.kikom-consent .kkc-btn-primary:hover{background:#ffed4d;color:#264f52}
/* Ghost (a) – Farbe in ALLEN Link-Zuständen erzwingen, sonst greift a:visited{color:#800080} aus dem Theme */
.kikom-consent a.kkc-btn-ghost,
.kikom-consent a.kkc-btn-ghost:link,
.kikom-consent a.kkc-btn-ghost:visited,
.kikom-consent a.kkc-btn-ghost:hover,
.kikom-consent a.kkc-btn-ghost:focus,
.kikom-consent a.kkc-btn-ghost:active{background:transparent;color:#ffe500;text-decoration:none}
.kikom-consent a.kkc-btn-ghost:hover{background:rgba(255,229,0,.12)}

/* klickbare Play-Fläche (Play-Icon ist im Bild) */
.kkc-play{position:absolute;z-index:3;cursor:pointer;border-radius:50%}

/* --- Video 16:9 --- */
.kkc-video .kkc-head{left:3.44%;top:30.3%;max-width:31.5%;font-size:2.34cqw;line-height:1.167}
.kkc-video .kkc-text{left:3.44%;top:46.2%;max-width:35%;font-size:1.17cqw;line-height:1.43}
.kkc-video .kkc-btns{left:3.44%;top:84.7%;gap:1.9%;align-items:center}
.kkc-video .kkc-btn{padding:.9em .85em;font-size:1.1cqw}
.kkc-video .kkc-play{left:45%;top:41%;width:11.3%;height:20%}

/* --- Spotify-Banner --- */
.kkc-podcast .kkc-head{left:2.64%;top:6.4%;max-width:56%;font-size:2.76cqw;line-height:1.16}
.kkc-podcast .kkc-text{left:2.5%;top:31.5%;max-width:50%;font-size:1.94cqw;line-height:1.43}
.kkc-podcast .kkc-btns{right:2.9%;top:8%;flex-direction:column;gap:.55cqw;align-items:flex-end}
.kkc-podcast .kkc-btn{font-size:2.2cqw;padding:.6em 1em}

/* ---------- aktivierter Zustand ---------- */
.kkc-active{width:100%}
/* Video: 16:9, iframe füllt den Rahmen */
.kkc-video .kkc-frame{position:relative;width:100%;background:#000;overflow:hidden;aspect-ratio:16/9}
.kkc-video .kkc-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Podcast: Player in nativer Größe (kein Strecken -> kein schwarzer Bereich/Scrolling) */
.kkc-podcast .kkc-frame{width:auto;max-width:100%;overflow:hidden;line-height:0;background:transparent}
.kkc-podcast .kkc-frame iframe{display:block;border:0;max-width:100%}

.kkc-bar{display:flex;align-items:center;gap:12px;background:#1d3d40;color:#cfe0df;
	padding:9px 14px;font-family:"KKC Quicksand",sans-serif;font-size:14px;font-weight:500;line-height:1.4}
.kkc-bar b{color:#fff;font-weight:700}
.kkc-bar .kkc-spacer{margin-left:auto}

.kkc-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.kkc-switch input{position:absolute;opacity:0;width:0;height:0}
.kkc-track{width:42px;height:23px;border-radius:999px;background:#ffe500;position:relative;transition:.18s;flex:0 0 auto}
.kkc-knob{position:absolute;top:2px;left:21px;width:19px;height:19px;border-radius:50%;background:#264f52;transition:.18s}
.kkc-switch input:not(:checked)+.kkc-track{background:#5b7574}
.kkc-switch input:not(:checked)+.kkc-track .kkc-knob{left:2px;background:#cfe0df}

/* ============================================================
   Responsive: schmale Container -> Karte statt Bild-Overlay.
   Das Desktop-Overlay ist skalierungs-invariant (cqw/%), würde aber
   bei kleiner Breite unlesbar. Unter dem Breakpoint daher: Bild aus,
   Inhalte im normalen Fluss, lesbare px-Größen, Vögel als Eck-Deko.
   Breakpoint bezieht sich auf die ELEMENTBREITE (Container-Query).
   ============================================================ */
@container (max-width: 767px) {
	/* alle Card-Regeln mit .kikom-consent-Präfix -> Spezifität (0,2,0),
	   damit sie die Desktop-Regeln (.kkc-video/.kkc-podcast .x) per Quellreihenfolge schlagen */
	.kikom-consent .kkc-stage{
		line-height:1.4;
		background:#264f52;
		background-image:url(img/birds.svg);
		background-repeat:no-repeat;
		background-position:right -18px bottom -14px;
		background-size:42% auto;
		padding:26px 22px;
		border-radius:6px;
	}
	.kikom-consent .kkc-bg{display:none}
	.kikom-consent .kkc-play{display:none}

	.kikom-consent .kkc-overlay{position:static;inset:auto;display:block}
	.kikom-consent .kkc-head,
	.kikom-consent .kkc-text,
	.kikom-consent .kkc-btns{position:static;inset:auto;left:auto;right:auto;top:auto;max-width:none}
	.kikom-consent .kkc-head{font-size:clamp(17px,5.3cqw,24px);line-height:1.2;margin:0 0 .7em}
	.kikom-consent .kkc-text{font-size:15px;line-height:1.5;margin:0 0 1.1em;max-width:34em}
	.kikom-consent .kkc-btns{flex-direction:column;align-items:stretch;gap:10px;max-width:360px}
	.kikom-consent .kkc-btn{font-size:15px;padding:13px 18px;border-width:2px}

	/* aktivierter Spotify-Player: auf Containerbreite statt fixe 400px */
	.kikom-consent .kkc-podcast .kkc-frame,
	.kikom-consent.kkc-podcast .kkc-frame{width:100%}
	.kikom-consent .kkc-podcast .kkc-frame iframe,
	.kikom-consent.kkc-podcast .kkc-frame iframe{width:100% !important}
}