/* Selbsthilfegruppen Manager – Frontend (passt zum Cloud-Design der Selbsthilfe Cottbus) */
.shc-gruppen-app {
	--shc-red: #C8102E;
	--shc-red-deep: #9A0B23;
	--shc-red-soft: #FDEEF0;
	--shc-bg: #FBF8F4;
	--shc-cream: #F4EEE5;
	--shc-ink: #1B1714;
	--shc-ink-2: #3A332E;
	--shc-ink-3: #6B6058;
	--shc-line: #E8DED1;
	--shc-radius: 22px;
	--shc-font-display: "Literata", "Source Serif 4", Georgia, serif;
	--shc-font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;

	font-family: var(--shc-font-body);
	color: var(--shc-ink);
	max-width: 1240px;
	margin: 0 auto;
}

/* ---------- Toolbar ---------- */
.shc-gruppen-app .shc-toolbar {
	display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
	margin-bottom: 24px;
}
.shc-gruppen-app .shc-search { flex: 1 1 280px; position: relative; }
.shc-gruppen-app .shc-search input {
	width: 100%; padding: 12px 18px 12px 44px;
	border: 1px solid var(--shc-line); border-radius: 999px;
	font: inherit; background: #fff; color: var(--shc-ink);
}
.shc-gruppen-app .shc-search input:focus { outline: 2px solid var(--shc-red); outline-offset: 1px; }
.shc-gruppen-app .shc-search::before {
	content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6058' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.shc-gruppen-app .shc-themen {
	display: flex; flex-wrap: wrap; gap: 8px;
}
.shc-gruppen-app .shc-thema-pill {
	padding: 8px 14px; border-radius: 999px;
	background: #fff; border: 1px solid var(--shc-line); color: var(--shc-ink-2);
	font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
	display: inline-flex; align-items: center; gap: 6px;
	transition: all .15s ease;
}
.shc-gruppen-app .shc-thema-pill:hover { border-color: var(--shc-ink); }
.shc-gruppen-app .shc-thema-pill.is-active {
	background: var(--shc-red-soft); border-color: var(--shc-red-soft); color: var(--shc-red-deep);
}
.shc-gruppen-app .shc-thema-count { background: #F1EADF; padding: 1px 7px; border-radius: 999px; font-size: 11px; }

/* ---------- A-Z ---------- */
.shc-gruppen-app .shc-letters {
	display: flex; flex-wrap: wrap; gap: 4px;
	padding: 12px 16px; margin-bottom: 24px;
	background: var(--shc-cream); border-radius: var(--shc-radius);
}
.shc-gruppen-app .shc-letter {
	display: inline-grid; place-items: center;
	width: 34px; height: 34px; border-radius: 8px;
	font-weight: 600; font-size: 14px; text-decoration: none;
	color: var(--shc-ink); transition: all .15s ease;
}
.shc-gruppen-app .shc-letter:hover { background: #fff; color: var(--shc-red); }
.shc-gruppen-app .shc-letter.is-empty { color: #C7BFB3; pointer-events: none; }

/* ---------- Letter-Section ---------- */
.shc-gruppen-app .shc-letter-section { margin: 28px 0 36px; }
.shc-gruppen-app .shc-letter-head {
	display: flex; align-items: baseline; gap: 24px; margin-bottom: 18px;
}
.shc-gruppen-app .shc-letter-big {
	font-family: var(--shc-font-display); font-style: italic; font-weight: 500;
	font-size: 56px; color: var(--shc-red); line-height: 1;
}
.shc-gruppen-app .shc-letter-line { flex: 1; height: 1px; background: var(--shc-line); }

/* ---------- Grid ---------- */
.shc-gruppen-app .shc-grid {
	display: grid; gap: 18px;
}
.shc-gruppen-app .shc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shc-gruppen-app .shc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shc-gruppen-app .shc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .shc-gruppen-app .shc-cols-3, .shc-gruppen-app .shc-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .shc-gruppen-app .shc-cols-2, .shc-gruppen-app .shc-cols-3, .shc-gruppen-app .shc-cols-4 { grid-template-columns: minmax(0, 1fr); } }
/* Karten dürfen nicht aus der Spalte herauswachsen — lange Titel müssen brechen */
.shc-gruppen-app .shc-card { min-width: 0; }
.shc-gruppen-app .shc-card * { min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }

/* ---------- Card ---------- */
.shc-gruppen-app .shc-card {
	background: #fff; border: 1px solid var(--shc-line); border-radius: var(--shc-radius);
	padding: 22px; display: flex; flex-direction: column; gap: 14px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.shc-gruppen-app .shc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,23,20,0.07); border-color: transparent; }
.shc-gruppen-app .shc-card.is-hidden { display: none; }

.shc-gruppen-app .shc-card-head { display: flex; gap: 14px; align-items: flex-start; }
.shc-gruppen-app .shc-card-logo {
	width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
	background: var(--shc-cream); border: 1px solid var(--shc-line);
}
.shc-gruppen-app .shc-card-logo-fallback {
	display: grid; place-items: center;
	background: var(--shc-red); color: #fff;
	font-family: var(--shc-font-display); font-style: italic; font-size: 22px;
}
.shc-gruppen-app .shc-card-titles { flex: 1; min-width: 0; }
.shc-gruppen-app .shc-card-title { font-family: var(--shc-font-display); font-weight: 500; font-size: 19px; margin: 0 0 6px; color: var(--shc-ink); }
.shc-gruppen-app .shc-card-themen { display: flex; flex-wrap: wrap; gap: 4px; }
.shc-gruppen-app .shc-tag {
	font-size: 11px; padding: 2px 8px; border-radius: 999px;
	background: var(--shc-cream); color: var(--shc-ink-2); font-weight: 600; letter-spacing: 0.2px;
}

.shc-gruppen-app .shc-badge {
	font-size: 10px; padding: 2px 8px; border-radius: 999px;
	font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
	white-space: nowrap; flex-shrink: 0;
}
.shc-gruppen-app .shc-badge.status-aktiv  { background: #E1F4DB; color: #2B6A1F; }
.shc-gruppen-app .shc-badge.status-new    { background: var(--shc-red-soft); color: var(--shc-red-deep); }
.shc-gruppen-app .shc-badge.status-pause  { background: #FFF3CD; color: #856404; }
.shc-gruppen-app .shc-badge.status-archiv { background: var(--shc-cream); color: var(--shc-ink-3); }
.shc-gruppen-app .shc-badge-mini { font-size: 10px; background: var(--shc-cream); color: var(--shc-ink-3); }

/* Kontakt-Liste */
.shc-gruppen-app .shc-card-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.shc-gruppen-app .shc-card-contact li { display: flex; align-items: center; gap: 8px; color: var(--shc-ink-2); }
.shc-gruppen-app .shc-card-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.shc-gruppen-app .shc-card-contact a:hover { color: var(--shc-red); border-bottom-color: var(--shc-red); }

/* Icons (Inline-SVG via Background) */
.shc-icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; }
.shc-icon-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.shc-icon-mail  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
.shc-icon-web   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.shc-icon-clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6058' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.shc-icon-user  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }

.shc-gruppen-app .shc-card-meet {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--shc-cream); padding: 8px 14px; border-radius: 999px;
	font-size: 13px; color: var(--shc-ink-2); align-self: flex-start;
}

.shc-gruppen-app .shc-card-desc {
	color: var(--shc-ink-3); margin: 0; font-size: 14px; line-height: 1.55;
}

.shc-gruppen-app .shc-card-foot {
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: auto;
	padding-top: 8px; border-top: 1px solid #F1EADF;
}
.shc-gruppen-app .shc-btn-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--shc-red);
	font: inherit;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.shc-gruppen-app .shc-btn-link:hover,
.shc-gruppen-app .shc-btn-link:focus-visible {
	background: var(--shc-red);
	color: #FFFFFF;
	border-color: var(--shc-red);
}
.shc-gruppen-app .shc-btn-link:active {
	background: var(--shc-red-deep);
	border-color: var(--shc-red-deep);
}

.shc-empty { color: var(--shc-ink-3); text-align: center; padding: 48px 0; }

/* ---------- Modal ---------- */
.shc-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.shc-modal.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.shc-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(27,23,20,0.55);
	backdrop-filter: blur(2px);
}
.shc-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: calc(100vh - 48px);
	background: #fff;
	border-radius: var(--shc-radius);
	padding: 32px 36px 32px;
	overflow: auto;
	box-shadow: 0 30px 60px rgba(27,23,20,0.3);
	margin: 0;
}
.shc-modal-close {
	position: absolute;
	top: 16px; right: 16px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--shc-red);
	color: #fff;
	border: 0;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 4px 12px rgba(154,11,35,0.25);
	transition: background .15s ease, transform .15s ease;
}
.shc-modal-close::before,
.shc-modal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2.5px;
	background: #fff;
	border-radius: 2px;
}
.shc-modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.shc-modal-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.shc-modal-close:hover { background: var(--shc-red-deep); transform: scale(1.06); }
.shc-modal-close:focus-visible { outline: 3px solid var(--shc-red-soft); outline-offset: 2px; }
@media (max-width: 560px) {
	.shc-modal.is-open { padding: 12px; }
	.shc-modal-dialog { padding: 26px 22px; }
	.shc-modal-close { top: 12px; right: 12px; }
}

/* ---------- Detail ---------- */
.shc-detail-head { display: flex; gap: 18px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--shc-line); margin-bottom: 20px; }
.shc-detail-logo img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; border: 1px solid var(--shc-line); }
.shc-detail-head h2 { font-family: var(--shc-font-display); font-weight: 500; font-size: 26px; margin: 0 0 8px; color: var(--shc-ink); }
.shc-detail-themen { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.shc-detail-section { padding: 18px 0; border-top: 1px solid var(--shc-line); }
.shc-detail-section:first-of-type { border-top: 0; padding-top: 0; }
.shc-detail-section h3 {
	font-family: var(--shc-font-body); font-weight: 700; font-size: 12px;
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--shc-red);
	margin: 0 0 10px;
}

.shc-detail-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.shc-detail-contact li { display: flex; align-items: center; gap: 10px; }
.shc-detail-contact a { color: var(--shc-ink); text-decoration: none; border-bottom: 1px solid #F8E0E3; }
.shc-detail-contact a:hover { color: var(--shc-red); border-bottom-color: var(--shc-red); }

.shc-detail-desc { color: var(--shc-ink-2); line-height: 1.65; }
.shc-detail-desc p { margin: 0 0 10px; }

.shc-detail-address { font-style: normal; line-height: 1.55; color: var(--shc-ink-2); }

.shc-map-wrapper { margin-top: 14px; }
.shc-map-placeholder {
	background: var(--shc-cream); border-radius: 14px; padding: 32px; text-align: center;
}
.shc-map-load {
	background: var(--shc-red); color: #fff; border: 0; padding: 12px 22px; border-radius: 999px;
	font: inherit; font-weight: 600; cursor: pointer;
}
.shc-map-load:hover { background: var(--shc-red-deep); }
.shc-map { height: 320px; border-radius: 14px; overflow: hidden; }

.shc-detail-foot {
	display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--shc-line);
	flex-wrap: wrap;
}
.shc-btn-ghost {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 18px; border-radius: 999px;
	background: transparent; color: var(--shc-ink); border: 1px solid var(--shc-line);
	text-decoration: none; font: inherit; font-weight: 600; font-size: 14px;
}
.shc-btn-ghost:hover { background: var(--shc-cream); }