.sg-kontakt, .sg-kontakt * { margin: 0; padding: 0; box-sizing: border-box; }
.sg-kontakt {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--sg-bg-light, #f5f8fa);
color: var(--sg-text, #3a3a3a);
line-height: 1.6;
}
/* ── Suche ── */
.search-bar {
position: relative;
margin-bottom: 28px;
}
.search-bar input {
width: 100%;
padding: 12px 16px 12px 44px;
border: 1px solid #ddd;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
background: var(--sg-flaeche, #fff);
transition: border-color 0.2s;
}
.search-bar input:focus {
outline: none;
border-color: var(--sg-petrol, #004058);
box-shadow: 0 0 0 3px rgba(0, 64, 88, 0.1);
}
.search-bar svg {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--sg-meta, #999);
}
/* ── Filter-Chips ── */
.filter-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.chip {
padding: 7px 16px;
border: 1px solid #ddd;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
background: var(--sg-flaeche, #fff);
color: var(--sg-text-light, #555);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.chip:hover { border-color: var(--sg-petrol, #004058); color: var(--sg-petrol, #004058); }
.chip.active { background: var(--sg-petrol-flaeche, #004058); color: #fff !important; border-color: var(--sg-petrol, #004058); }
/* ── Section-Header ── */
.section-title {
font-size: 18px;
font-weight: 600;
color: var(--sg-petrol, #004058);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid rgba(0, 64, 88, 0.12);
display: flex;
align-items: center;
gap: 10px;
}
.section-title svg { flex-shrink: 0; opacity: 0.6; }
.section-group { margin-bottom: 36px; }
/* ── Schulleitung – prominente Karten ── */
.leadership-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
margin-bottom: 36px;
}
.leader-card {
background: var(--sg-flaeche, #fff);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border-left: 4px solid #d4a017;
transition: box-shadow 0.3s, transform 0.3s;
}
.leader-card:hover {
box-shadow: 0 8px 24px rgba(0,64,88,0.12);
transform: translateY(-2px);
}
.leader-card.blue { border-left-color: var(--sg-petrol, #004058); }
.leader-card .role {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--sg-gold-text, #d4a017);
margin-bottom: 4px;
}
.leader-card.blue .role { color: var(--sg-petrol, #004058); }
.leader-card .name {
font-size: 17px;
font-weight: 600;
color: var(--sg-text, #1a1a1a);
margin-bottom: 2px;
}
.leader-card .dept {
font-size: 13px;
color: var(--sg-meta, #777);
margin-bottom: 10px;
}
.leader-card .email-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--sg-petrol, #004058);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.leader-card .email-link:hover { color: var(--sg-gold-text, #d4a017); }
/* ── Fach-Karten ── */
.subject-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.subject-card {
background: var(--sg-flaeche, #fff);
border-radius: 10px;
padding: 16px 18px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
transition: box-shadow 0.3s, transform 0.3s;
}
.subject-card:hover {
box-shadow: 0 6px 20px rgba(0,64,88,0.10);
transform: translateY(-1px);
}
.subject-card .subject-name {
font-size: 13px;
font-weight: 600;
color: var(--sg-petrol, #004058);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.subject-card .subject-name .icon {
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(0, 64, 88, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.person-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
border-top: 1px solid #f0f0f0;
}
.person-row:first-of-type { border-top: none; }
.person-row .pname {
font-size: 14px;
color: #333;
}
.person-row .pemail {
font-size: 12px;
color: var(--sg-petrol, #004058);
text-decoration: none;
font-weight: 500;
opacity: 0.8;
transition: opacity 0.2s;
overflow-wrap: break-word;
word-break: break-all;
text-align: right;
}
.person-row .pemail:hover { opacity: 1; text-decoration: underline; }
/* ── Sonderfunktionen ── */
.function-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.function-card {
background: var(--sg-flaeche, #fff);
border-radius: 10px;
padding: 14px 18px;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
transition: box-shadow 0.2s;
}
.function-card:hover { box-shadow: 0 4px 14px rgba(0,64,88,0.08); }
.function-card .fn-label {
font-size: 13px;
font-weight: 600;
color: var(--sg-petrol, #004058);
margin-bottom: 2px;
}
.function-card .fn-person {
font-size: 13px;
color: var(--sg-text-light, #555);
}
.function-card .fn-email {
font-size: 12px;
color: var(--sg-petrol, #004058);
text-decoration: none;
font-weight: 500;
opacity: 0.75;
overflow-wrap: break-word;
word-break: break-all;
min-width: 0;
}
.function-card .fn-email:hover { opacity: 1; text-decoration: underline; }
/* ── Responsive ── */
@media (max-width: 600px) {
.leadership-grid { grid-template-columns: 1fr; }
.subject-grid { grid-template-columns: 1fr; }
.function-grid { grid-template-columns: 1fr; }
}
/* ── Suchfilter-Logik (JS) ── */
.hidden { display: none !important; }
/* Funktionskarten: Person-Rows fuer individuelle Emails */
.function-card .fn-person-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; border-top:1px solid #f0f0f0; gap:8px; }
.function-card .fn-person-row:first-of-type { border-top:none; }
.function-card .fn-pname { font-size:13px; color:var(--sg-text-light, #555); white-space:nowrap; }
.function-card .fn-pemail { font-size:11px; color:var(--sg-petrol, #004058); text-decoration:none; font-weight:500; opacity:0.75; overflow-wrap:break-word; word-break:break-all; text-align:right; }
.function-card .fn-pemail:hover { opacity:1; text-decoration:underline; }
Alle
Schulleitung
Fächer
Funktionen
Fachverantwortliche
📖 Deutsch / Lit. & Theater
Ansprechpartnerinnen und Ansprechpartner für besondere Aufgaben
Studien- und Berufsorientierung
Verbindungslehrerinnen und -lehrer
VKL-Schülerinnen und -Schüler (Vorbereitungsklasse)
// Suchfilter
const searchInput = document.getElementById('searchInput');
const allCards = document.querySelectorAll('[data-search]');
const sectionGroups = document.querySelectorAll('.section-group');
const chips = document.querySelectorAll('.chip');
searchInput.addEventListener('input', () => {
const q = searchInput.value.toLowerCase().trim();
// Reset chip filter to "Alle" when searching
chips.forEach(c => c.classList.remove('active'));
chips[0].classList.add('active');
sectionGroups.forEach(g => g.classList.remove('hidden'));
if (!q) {
allCards.forEach(c => c.classList.remove('hidden'));
updateSectionVisibility();
return;
}
allCards.forEach(card => {
const text = card.getAttribute('data-search') + ' ' + card.textContent.toLowerCase();
card.classList.toggle('hidden', !text.includes(q));
});
updateSectionVisibility();
});
// Chip-Filter
chips.forEach(chip => {
chip.addEventListener('click', () => {
chips.forEach(c => c.classList.remove('active'));
chip.classList.add('active');
const filter = chip.getAttribute('data-filter');
if (filter === 'all') {
sectionGroups.forEach(g => g.classList.remove('hidden'));
allCards.forEach(c => c.classList.remove('hidden'));
} else {
sectionGroups.forEach(g => {
g.classList.toggle('hidden', g.getAttribute('data-category') !== filter);
});
}
});
});
function updateSectionVisibility() {
sectionGroups.forEach(group => {
const cards = group.querySelectorAll('[data-search]');
const anyVisible = Array.from(cards).some(c => !c.classList.contains('hidden'));
// Don't hide groups based on search if chip filter is active
if (!anyVisible && searchInput.value.trim()) {
group.style.opacity = '0.3';
} else {
group.style.opacity = '1';
}
});
}
Stand: September 2026