/* ── Custom Cookie Banner – Frontend ──────────────────────────────────────── */

:root {
	--ccb-font:     "Manrope", system-ui, sans-serif;
	--ccb-accent:   #2563eb;
	--ccb-accent-h: #1d4ed8;
	--ccb-radius:   12px;
	--ccb-shadow:   0 8px 40px rgba(0, 0, 0, 0.18);
	--ccb-z:        99999;
}

/* ── Banner ─────────────────────────────────────────────────────────────── */
.ccb-banner {
	position:      fixed;
	bottom:        24px;
	left:          50%;
	transform:     translateX(-50%);
	width:         min(680px, calc(100vw - 32px));
	background:    #fff;
	border-radius: var(--ccb-radius);
	box-shadow:    var(--ccb-shadow);
	padding:       20px 24px;
	z-index:       var(--ccb-z);
	font-family:   var(--ccb-font);
	animation:     ccb-slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ccb-slide-up {
	from { opacity: 0; transform: translateX(-50%) translateY(20px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ccb-banner-inner {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.ccb-banner-text strong {
	display:       block;
	font-size:     15px;
	font-weight:   700;
	margin-bottom: 4px;
	color:         #111;
}

.ccb-banner-text p {
	margin:      0;
	font-size:   13px;
	line-height: 1.5;
	color:       #555;
}

.ccb-banner-buttons {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   10px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ccb-btn {
	font-family:  var(--ccb-font);
	font-size:    13px;
	font-weight:  600;
	padding:      10px 16px;
	border-radius: 8px;
	border:       none;
	cursor:       pointer;
	text-align:   center;
	transition:   background 0.15s, filter 0.15s;
	line-height:  1;
	width:        100%;
}

/* "Alle akzeptieren" – immer grün, immer ganz rechts */
.ccb-btn-primary {
	background: #28a745 !important;
	color:      #fff;
}
.ccb-btn-primary:hover {
	background: #219537 !important;
}

/* "Einstellungen" + "Nur Essenzielles" – hellgrau mit dunklem Text */
.ccb-btn-secondary,
.ccb-btn-ghost {
	background: #e5e5e5 !important;
	color:      #333 !important;
}
.ccb-btn-secondary:hover,
.ccb-btn-ghost:hover {
	background: #d4d4d4 !important;
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.ccb-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(0, 0, 0, 0.5);
	z-index:         calc(var(--ccb-z) + 1);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         16px;
	font-family:     var(--ccb-font);
	animation:       ccb-fade-in 0.2s ease both;
}

@keyframes ccb-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.ccb-modal {
	background:     #fff;
	border-radius:  var(--ccb-radius);
	width:          min(680px, 100%);
	max-height:     min(680px, 90vh);
	display:        flex;
	flex-direction: column;
	box-shadow:     var(--ccb-shadow);
	animation:      ccb-modal-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
	overflow:       hidden;
}

@keyframes ccb-modal-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ccb-modal-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 24px 16px;
	border-bottom:   1px solid #e5e7eb;
	flex-shrink:     0;
}

.ccb-modal-title {
	margin:      0;
	font-size:   18px !important;
	font-weight: 700;
	color:       #111;
}

.ccb-close-btn {
	background:    transparent;
	border:        none;
	cursor:        pointer;
	padding:       6px;
	border-radius: 6px;
	color:         #6b7280;
	display:       flex;
	align-items:   center;
	transition:    background 0.15s;
}
.ccb-close-btn:hover { background: #f3f4f6; color: #111; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.ccb-tabs {
	display:     flex;
	gap:         0;
	border-bottom: 1px solid #e5e7eb;
	padding:     0 24px;
	flex-shrink: 0;
}

.ccb-tab {
	background:    transparent !important;
	border:        none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding:       12px 16px;
	font-family:   var(--ccb-font);
	font-size:     14px !important;
	font-weight:   600 !important;
	color:         #6b7280 !important;
	cursor:        pointer;
	transition:    color 0.15s, border-color 0.15s;
}
.ccb-tab:hover { color: #111; }
.ccb-tab.active {
	color:        var(--ccb-accent) !important;
	border-color: var(--ccb-accent) !important;
}

/* ── Tab-Panes ───────────────────────────────────────────────────────────── */
.ccb-tab-pane {
	display:    none;
	overflow-y: auto;
	flex:       1;
	padding:    16px 24px;
}
.ccb-tab-pane.active { display: block; }

/* ── Kategorie-Akkordion ─────────────────────────────────────────────────── */
.ccb-cat {
	border-bottom: 1px solid #e5e7eb;
}
.ccb-cat:last-child { border-bottom: none; }

.ccb-cat-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 0;
	gap:             12px;
}

.ccb-cat-toggle {
	background:  transparent !important;
	border:      none;
	cursor:      pointer;
	display:     flex;
	align-items: center;
	gap:         8px;
	font-family: var(--ccb-font);
	font-size:   14px !important;
	font-weight: 700 !important;
	color:       #111 !important;
	padding:     0;
	text-align:  left;
	flex:        1;
}
.ccb-cat-toggle:hover { color: var(--ccb-accent) !important; }

.ccb-cat-count { font-weight: 400; color: #6b7280; font-size: 13px; }

.ccb-chevron {
	flex-shrink: 0;
	color:       #9ca3af;
	transition:  transform 0.2s;
}
.ccb-cat-toggle[aria-expanded="true"] .ccb-chevron {
	transform: rotate(180deg);
}

.ccb-cat-body {
	padding-bottom: 14px;
}

.ccb-cat-desc {
	margin:      0 0 12px;
	font-size:   13px;
	color:       #6b7280;
	line-height: 1.5;
}

.ccb-cookie-item {
	padding:       10px 12px;
	background:    #f9fafb;
	border:        1px solid #e5e7eb;
	border-radius: 8px;
	margin-bottom: 8px;
}
.ccb-cookie-item:last-child { margin-bottom: 0; }

.ccb-cookie-item strong {
	display:     block;
	font-size:   13px;
	font-weight: 700;
	color:       #111;
	margin-bottom: 2px;
}
.ccb-cookie-item p {
	margin:      0;
	font-size:   12px;
	color:       #6b7280;
	line-height: 1.5;
}

/* ── Toggle-Switch ───────────────────────────────────────────────────────── */
.ccb-switch {
	display:     inline-flex;
	align-items: center;
	cursor:      pointer;
	flex-shrink: 0;
}
.ccb-switch input { display: none; }

.ccb-track {
	position:      relative;
	width:          44px;
	height:         24px;
	background:    #d1d5db;
	border-radius: 12px;
	transition:    background 0.25s;
	display:        block;
}
.ccb-switch input:checked ~ .ccb-track { background: var(--ccb-accent); }

.ccb-thumb {
	position:      absolute;
	top:           3px;
	left:          3px;
	width:         18px;
	height:        18px;
	background:    #fff;
	border-radius: 50%;
	box-shadow:    0 1px 3px rgba(0,0,0,0.2);
	transition:    transform 0.25s;
}
.ccb-switch input:checked ~ .ccb-track .ccb-thumb { transform: translateX(20px); }

.ccb-switch-locked { cursor: not-allowed; }
.ccb-switch-locked .ccb-track { background: #bfdbfe; }

/* ── Über-Cookies ────────────────────────────────────────────────────────── */
.ccb-about h3 {
	font-size:    15px !important;
	font-weight:  700 !important;
	margin:       16px 0 6px;
	color:        #111 !important;
}
.ccb-about h3:first-child { margin-top: 0; }
.ccb-about p {
	margin:      0 0 8px;
	font-size:   13px !important;
	color:       #555 !important;
	line-height: 1.6;
}

/* ── Modal-Footer ────────────────────────────────────────────────────────── */
.ccb-modal-footer {
	display:         flex;
	gap:             10px;
	padding:         16px 24px;
	border-top:      1px solid #e5e7eb;
	flex-shrink:     0;
	justify-content: flex-end;
}

/* ── Body scroll lock ────────────────────────────────────────────────────── */
body.ccb-no-scroll { overflow: hidden; }

/* ── Modal-Footer: Buttons nicht gestreckt, nur so breit wie nötig ───────── */
.ccb-modal-footer .ccb-btn {
	width: auto;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.ccb-banner {
		bottom:        0;
		left:          0;
		right:         0;
		width:         100%;
		transform:     none;
		border-radius: var(--ccb-radius) var(--ccb-radius) 0 0;
		padding:       16px;
	}

	.ccb-banner-buttons {
		grid-template-columns: 1fr;
	}

	.ccb-modal-footer             { flex-direction: column-reverse; }
	.ccb-modal-footer .ccb-btn    { width: 100%; }
}