/* Campus Company Wohnheim-Infos – Frontend-Akkordeon
   Optik angelehnt an das Helpdesk-Redesign (Karten-Look).
   Akzentfarbe: #0094BD. Schrift wird vom Theme geerbt (font-family: inherit). */

.ccwi-wrap {
	--ccwi-paper: #edf3f2;
	--ccwi-surface: #ffffff;
	--ccwi-ink: #14272b;
	--ccwi-ink-soft: #4c6064;
	--ccwi-ink-faint: #7e9094;
	--ccwi-line: #d6e2e0;
	--ccwi-line-soft: #e5edec;
	--ccwi-teal: #0094bd;
	--ccwi-teal-deep: #00718f;
	--ccwi-teal-bright: #33afd0;
	--ccwi-teal-wash: #e4f2f8;
	--ccwi-amber: #d9791a;
	--ccwi-amber-deep: #a85a12;
	--ccwi-amber-wash: #fcefdd;
	--ccwi-shadow: 0 1px 2px rgba(20, 39, 43, 0.04), 0 8px 24px -12px rgba(20, 39, 43, 0.18);
	--ccwi-shadow-lg: 0 1px 2px rgba(20, 39, 43, 0.05), 0 24px 48px -20px rgba(20, 39, 43, 0.28);
	--ccwi-r: 14px;

	max-width: 1080px !important;
	margin: 0 auto;
	color: var(--ccwi-ink);
	font-family: inherit;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.ccwi-wrap *,
.ccwi-wrap *::before,
.ccwi-wrap *::after {
	box-sizing: border-box;
}

.ccwi-wrap ::selection {
	background: var(--ccwi-teal-bright);
	color: #fff;
}

/* ---------- Suche ---------- */
.ccwi-search {
	position: relative;
	max-width: 560px;
	margin: 0 auto 2.5rem;
}

.ccwi-search-ic {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	color: var(--ccwi-teal);
	pointer-events: none;
	display: grid;
	place-items: center;
}

/* Theme-Overrides (z. B. Astra) für Formularfelder aushebeln:
   höhere Spezifität + !important, und – wichtig für type="search" –
   die Browser-Default-appearance zurücksetzen, sonst wird border-radius ignoriert. */
.ccwi-wrap input.ccwi-search-input {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 62px !important;
	min-height: 62px;
	max-width: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	border: 1.5px solid var(--ccwi-line) !important;
	border-radius: 16px !important;
	background: var(--ccwi-surface) !important;
	padding: 0 20px 0 54px !important;
	font-family: inherit !important;
	font-size: 17px !important;
	line-height: normal !important;
	color: var(--ccwi-ink) !important;
	box-shadow: var(--ccwi-shadow);
	transition: border-color 0.18s, box-shadow 0.18s;
}

/* Suche als eigenständiger Shortcode: Chips direkt unter das Feld. */
.ccwi-wrap--search .ccwi-search {
	margin-bottom: 0;
}

/* ---------- Häufige Suchbegriffe (Chips) ---------- */
.ccwi-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 560px;
	margin: 16px auto 0;
}

.ccwi-chips-label {
	font-size: 13px;
	color: var(--ccwi-ink-soft);
	margin-right: 2px;
}

/* Chips sind echte Buttons – Theme-Button-Styles (z. B. Astra) zurücksetzen. */
.ccwi-wrap button.ccwi-chip {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border: 1px solid var(--ccwi-line);
	background: var(--ccwi-surface);
	border-radius: 999px;
	padding: 7px 14px;
	font: inherit;
	font-size: 14px;
	line-height: normal;
	color: var(--ccwi-ink-soft);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ccwi-wrap button.ccwi-chip:hover,
.ccwi-wrap button.ccwi-chip:focus-visible {
	background: var(--ccwi-teal-deep);
	color: #fff;
	border-color: var(--ccwi-teal-deep);
}

.ccwi-wrap button.ccwi-chip:focus-visible {
	outline: 2px solid var(--ccwi-teal-deep);
	outline-offset: 2px;
}

.ccwi-wrap input.ccwi-search-input::placeholder {
	color: var(--ccwi-ink-soft);
	opacity: 1;
}

.ccwi-wrap input.ccwi-search-input:focus {
	outline: none !important;
	border-color: var(--ccwi-teal) !important;
	box-shadow: 0 0 0 4px var(--ccwi-teal-wash) !important;
}

.ccwi-noresults {
	display: none;
	text-align: center;
	padding: 2.5rem 1.25rem;
	color: var(--ccwi-ink-soft);
}

.ccwi-noresults:not([hidden]) {
	display: block;
}

/* ---------- Soforthilfe-Karten ---------- */
.ccwi-wrap--sos {
	margin-bottom: 2.5rem;
}

.ccwi-sos-grid {
	display: grid;
	grid-template-columns: repeat(var(--ccwi-sos-cols, 3), 1fr);
	gap: 14px;
}

.ccwi-sos-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	text-decoration: none;
	color: var(--ccwi-ink);
	background: var(--ccwi-surface);
	border: 1px solid var(--ccwi-line);
	border-radius: var(--ccwi-r);
	padding: 18px;
	box-shadow: var(--ccwi-shadow);
	transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}

a.ccwi-sos-card:hover,
a.ccwi-sos-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--ccwi-shadow-lg);
	border-color: var(--ccwi-teal);
}

a.ccwi-sos-card:focus-visible {
	outline: 2px solid var(--ccwi-teal-deep);
	outline-offset: 2px;
}

.ccwi-sos-img {
	width: 54px;
	height: 54px;
	border-radius: 13px;
	overflow: hidden;
	flex: none;
	background: var(--ccwi-teal-wash);
	box-shadow: inset 0 0 0 1px var(--ccwi-line-soft);
	display: grid;
	place-items: center;
}

.ccwi-sos-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccwi-sos-body {
	min-width: 0;
}

.ccwi-sos-ttl {
	margin: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0;
	color: var(--ccwi-ink);
}

.ccwi-sos-text {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ccwi-ink-soft);
}

.ccwi-sos-arrow {
	margin-left: auto;
	align-self: center;
	color: var(--ccwi-ink-faint);
	display: grid;
	place-items: center;
	transition: transform 0.16s, color 0.16s;
}

a.ccwi-sos-card:hover .ccwi-sos-arrow {
	transform: translateX(3px);
	color: var(--ccwi-teal);
}

.ccwi-sos-card.is-urgent {
	background: linear-gradient(180deg, #fff, var(--ccwi-amber-wash));
	border-color: #f0cf9e;
}

.ccwi-sos-card.is-urgent .ccwi-sos-img {
	background: var(--ccwi-amber-wash);
}

a.ccwi-sos-card.is-urgent:hover {
	border-color: var(--ccwi-amber);
}

a.ccwi-sos-card.is-urgent:hover .ccwi-sos-arrow {
	color: var(--ccwi-amber-deep);
}

@media (max-width: 860px) {
	.ccwi-sos-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Kategorie-Gruppen ---------- */
.ccwi-group {
	margin-top: 2.75rem;
}

.ccwi-group:first-of-type {
	margin-top: 0;
}

.ccwi-group-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 1.25rem;
}

.ccwi-group-title {
	flex: 1;
	margin: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(26px, 3.6vw, 36px);
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--ccwi-ink);
	border: 0;
	padding: 0;
}

.ccwi-group-title .ccwi-ul {
	display: block;
	width: min(240px, 100%);
	height: 0.3em;
	margin-top: -0.04em;
}

.ccwi-count {
	flex: none;
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--ccwi-ink-soft);
	white-space: nowrap;
}

/* ---------- Akkordeon-Einträge ---------- */
.ccwi-accordion {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.ccwi-item {
	background: var(--ccwi-surface);
	border: 1px solid var(--ccwi-line);
	border-radius: var(--ccwi-r);
	box-shadow: var(--ccwi-shadow);
	overflow: hidden;
	transition: border-color 0.16s, box-shadow 0.16s;
}

.ccwi-item[open] {
	border-color: var(--ccwi-teal);
	box-shadow: var(--ccwi-shadow-lg);
}

.ccwi-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	user-select: none;
}

.ccwi-summary::-webkit-details-marker {
	display: none;
}

.ccwi-summary:focus-visible {
	outline: 2px solid var(--ccwi-teal);
	outline-offset: -2px;
	border-radius: var(--ccwi-r);
}

.ccwi-s-ttl {
	flex: 1;
	font-family: inherit;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0;
	color: var(--ccwi-ink);
}

.ccwi-chev {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--ccwi-ink-faint);
	transition: transform 0.22s ease, color 0.16s;
}

.ccwi-item[open] .ccwi-chev {
	transform: rotate(180deg);
	color: var(--ccwi-teal);
}

.ccwi-summary:hover .ccwi-s-ttl,
.ccwi-summary:focus-visible .ccwi-s-ttl {
	color: var(--ccwi-teal-deep);
}

.ccwi-content {
	padding: 0 20px 20px;
	color: var(--ccwi-ink-soft);
	font-size: 15.5px;
}

.ccwi-content > *:first-child {
	margin-top: 0;
}

.ccwi-content > *:last-child {
	margin-bottom: 0;
}

.ccwi-content strong {
	color: var(--ccwi-ink);
}

.ccwi-content a {
	color: var(--ccwi-teal-deep);
	font-weight: 600;
	text-underline-offset: 2px;
}

/* Responsive Videos / Bilder */
.ccwi-content iframe {
	max-width: 100%;
}

.ccwi-content img {
	max-width: 100%;
	height: auto;
}

/* Suchtreffer-Hervorhebung */
.ccwi-item.ccwi-hidden,
.ccwi-group.ccwi-hidden {
	display: none;
}

@media (max-width: 600px) {
	.ccwi-wrap {
		font-size: 16px;
	}

	.ccwi-group-head {
		gap: 12px;
	}

	.ccwi-content iframe {
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ccwi-wrap *,
	.ccwi-wrap *::before,
	.ccwi-wrap *::after {
		transition: none !important;
	}
}