/*
 * Schule Spiegel – Layout wie die bisherige Webseite.
 * Masse von www.schulespiegel.ch übernommen (Stand Oktober 2026):
 * Inhalt 1200 px, Titelbild 600 px, Schrift Montserrat (lokal), Menü 12 px.
 */
@font-face { font-family: "SS Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "SS Montserrat"; font-weight: 300; font-style: italic; font-display: swap; src: url(../fonts/montserrat-latin-300-italic.woff2) format("woff2"); }
@font-face { font-family: "SS Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "SS Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "SS Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "SS Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "SS Josefin"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/josefin-sans-latin-400-normal.woff2) format("woff2"); }

body.ss-layout {
	--ss-text: #515151;
	--ss-schrift: "SS Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ss-akzent: #e20252;
	margin: 0;
	background: #fff;
	color: #000;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}
body.ss-layout .ss-seite { overflow-x: clip; }

/* ---------- Kopfzeile ---------- */
.ss-head { background: #fff; position: relative; z-index: 100; }
.ss-head__inner { max-width: 1200px; height: 80px; margin: 0 auto; padding: 20px 40px; box-sizing: content-box; display: flex; align-items: center; }
.ss-head__brand { display: block; flex: 0 0 auto; margin-right: 30px; line-height: 0; }
.ss-head .ss-logo { width: 270px; height: auto; max-width: none; display: block; }
.ss-head__name { font: 700 24px var(--ss-schrift); color: #000; }
.ss-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.ss-nav__item { position: relative; margin: 0; padding: 0; }
.ss-nav__link {
	display: block; position: relative; padding: 10px 20px;
	font: 500 12px/12px var(--ss-schrift); letter-spacing: .6px; text-transform: uppercase;
	color: #000 !important; text-decoration: none !important; transition: opacity .2s ease;
}
.ss-nav__link::after {
	content: ""; position: absolute; left: 15px; bottom: 5px; height: 1px; width: 0;
	background: rgba(0, 0, 0, .4); transition: width .28s ease-in-out;
}
.ss-nav__item.is-active > .ss-nav__link::after { width: calc(100% - 30px); transition-delay: .4s; }
.ss-nav__link:hover, .ss-nav__item:hover > .ss-nav__link, .ss-nav__link:focus-visible { opacity: .6; }
.ss-nav__sub {
	list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 100%; width: 200px;
	background: #fff; box-shadow: inset 0 0 0 1px #e1e4e6;
	opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.ss-nav__item--sub:hover > .ss-nav__sub, .ss-nav__item--sub:focus-within > .ss-nav__sub { opacity: 1; visibility: visible; transform: none; }
.ss-nav__sub li { margin: 0; padding: 0; }
.ss-nav__sub a {
	display: block; padding: 9px 15px 7px; font: 400 12px/14px "SS Josefin", sans-serif; letter-spacing: .6px; text-transform: uppercase;
	color: #000 !important; text-decoration: none !important; transition: opacity .2s ease;
}
.ss-nav__sub a:hover, .ss-nav__sub a:focus-visible { opacity: .6; }
.ss-head__toggle { display: none; }

/* ---------- Titelbild ---------- */
.ss-banner {
	position: relative; height: 600px; background: #2a2a2a center / cover no-repeat; background-attachment: fixed;
	display: flex; align-items: center; color: #fff;
}
.ss-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); }
.ss-banner__inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; box-sizing: content-box; }
.ss-banner__titel {
	margin: 15px 0; font: 700 90px/1.25 var(--ss-schrift); letter-spacing: 1px; color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .15); overflow-wrap: anywhere; hyphens: auto;
}
.ss-banner--home .ss-banner__titel { max-width: 960px; }

/* ---------- Inhalt ---------- */
.ss-main { padding: 60px 40px; }
.ss-main__inner { max-width: 1200px; margin: 0 auto; }
.ss-main__inner, .ss-main__inner p, .ss-main__inner li, .ss-main__inner td, .ss-main__inner th, .ss-main__inner figcaption, .ss-main__inner summary {
	font-family: var(--ss-schrift); font-weight: 300; font-size: 16px; line-height: 30px; letter-spacing: .32px; color: var(--ss-text);
}
.ss-main__inner p { margin: 0 0 30px; }
.ss-main__inner strong, .ss-main__inner b { font-weight: 700; }
.ss-main__inner a { color: var(--ss-text); text-decoration: underline; text-decoration-color: rgba(81, 81, 81, .45); text-underline-offset: 3px; }
.ss-main__inner a:hover { color: #000; text-decoration-color: #000; }
.ss-main__inner h2, .ss-main__inner .wp-block-heading:where(h2) {
	font: 700 24px/1.15 var(--ss-schrift); letter-spacing: normal; color: var(--ss-text); margin: 0 0 20px;
}
.ss-main__inner * + h2 { margin-top: 10px; }
.ss-main__inner h3 { font: 700 16px/30px var(--ss-schrift); letter-spacing: .32px; color: var(--ss-text); margin: 0; }
.ss-main__inner h3 + p, .ss-main__inner h3 + ul { margin-top: 0; }
.ss-main__inner ul, .ss-main__inner ol { margin: 0 0 30px; padding-left: 1.5em; }
.ss-main__inner figure { margin: 0 0 30px; }
.ss-main__inner img { max-width: 100%; height: auto; }

/* Theme-Breiten ausser Kraft setzen: Inhalt nutzt die vollen 1200 px */
.ss-main__inner .is-layout-constrained > *, .ss-main__inner > * { max-width: none !important; margin-left: 0; margin-right: 0; }
.ss-main__inner .wp-block-group.ss-import { margin: 0; padding: 0; }
.ss-main__inner .wp-block-columns { gap: 30px; margin: 0 0 10px; }
.ss-main__inner .wp-block-column > :last-child { margin-bottom: 30px; }

/* ---------- Reiter (wie bisher) ---------- */
.ss-tabs__leiste { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 15px; }
.ss-tabs__knopf {
	margin: 7px 3.5px; padding: 20px 25px; border: 1px solid #444; background: #9e9e9e; color: #fff;
	font: 400 14px/14px var(--ss-schrift); cursor: pointer; transition: background .2s ease;
}
.ss-tabs__knopf:hover { background: #8a8a8a; }
.ss-tabs__knopf[aria-selected="true"] { background: #444; }
.ss-tabs.is-bereit > .ss-tab > .ss-tab__titel { display: none; }
.ss-tabs.is-bereit > .ss-tab:not(.is-aktiv) { display: none; }
.ss-tab { animation: ss-fade .35s ease; }
@keyframes ss-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Karussell (Neuigkeiten / Mirror News auf der Startseite) ---------- */
.ss-karussell { position: relative; }
.ss-karussell__pfeile { display: flex; justify-content: flex-end; gap: 6px; margin: -6px 0 14px; }
.ss-karussell__pfeil {
	width: 28px; height: 28px; border: 0; border-radius: 3px; background: #333; color: #fff; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; font-size: 0; transition: background .2s;
}
.ss-karussell__pfeil::before { content: ""; width: 7px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(135deg); margin-left: 3px; }
.ss-karussell__pfeil--weiter::before { transform: rotate(-45deg); margin: 0 3px 0 0; }
.ss-karussell__pfeil:hover { background: #000; }
.ss-karussell__pfeil:disabled { opacity: .35; cursor: default; }
.ss-karussell__bahn { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 10px); gap: 20px; overflow: hidden; scroll-behavior: smooth; padding: 4px 2px 10px; }
.ss-karussell .ss-beitrag { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); border: 0; border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; }
.ss-karussell .ss-beitrag__bild { aspect-ratio: 1.68; width: 100%; object-fit: cover; display: block; }
.ss-karussell .ss-beitrag__text { padding: 12px 14px 14px; }
.ss-karussell .ss-beitrag__datum { display: none; }
.ss-karussell .ss-beitrag__titel { font: 700 16px/20px var(--ss-schrift) !important; margin: 0 0 8px; color: #333; }
.ss-karussell .ss-beitrag__titel a { color: #333 !important; text-decoration: none !important; }
.ss-karussell .ss-beitrag__auszug {
	font: 300 14px/24px var(--ss-schrift) !important; color: #515151 !important; margin: 0 !important;
	display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.ss-main__inner .ss-beitraege .ss-beitrag__titel { font-weight: 700; }

/* ---------- Diashow (Bildergalerie «Unsere Schule») ---------- */
.ss-diashow { max-width: 780px; margin: 30px auto; }
.ss-diashow__buehne { position: relative; aspect-ratio: 780 / 617; background: #f2f2f2; overflow: hidden; }
.ss-diashow__buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; margin: 0; }
.ss-diashow__buehne img.is-aktiv { opacity: 1; }
.ss-diashow__daumen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ss-diashow__daumen button { width: 70px; height: 70px; padding: 0; border: 0; cursor: pointer; opacity: .6; transition: opacity .2s; background: none; }
.ss-diashow__daumen button.is-aktiv, .ss-diashow__daumen button:hover { opacity: 1; }
.ss-diashow__daumen img { width: 70px; height: 70px; object-fit: cover; display: block; }

/* ---------- Nach oben ---------- */
.ss-nachoben {
	position: fixed; right: 16px; top: 55%; width: 36px; height: 52px; border-radius: 12px; background: #555;
	display: flex; align-items: center; justify-content: center; z-index: 90; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.ss-nachoben.is-sichtbar { opacity: .9; visibility: visible; }
.ss-nachoben:hover { opacity: 1; }
.ss-nachoben span, .ss-nachoben span::after { display: block; width: 8px; height: 8px; border: solid #fff; border-width: 2px 0 0 2px; transform: rotate(45deg); }
.ss-nachoben span { margin-top: 2px; position: relative; }
.ss-nachoben span::after { content: ""; position: absolute; left: 4px; top: 4px; transform: none; }

/* ---------- Beiträge ---------- */
.ss-artikel__titel { margin-bottom: 4px !important; }
.ss-artikel__datum { font-size: 13px !important; color: #888 !important; margin-bottom: 20px !important; }

/* ---------- Fusszeile wie bisher ---------- */
body.ss-layout .ss-footer { background: #fff; border-top: 1px solid #e1e4e6; margin: 0; padding: 60px 40px 50px; color: #000; font: 300 13px/1.55 var(--ss-schrift); }
body.ss-layout .ss-footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 145px minmax(0, 1fr) 300px; gap: 0; }
body.ss-layout .ss-footer__col { padding: 0 25px; border-left: 1px solid #e1e4e6; }
body.ss-layout .ss-footer__col:first-child { border-left: 0; padding-left: 0; }
body.ss-layout .ss-footer__titel { font: 700 15px var(--ss-schrift); color: var(--ss-text); margin: 0 0 22px; text-transform: none; letter-spacing: 0; opacity: 1; }
body.ss-layout .ss-footer p { margin: 0 0 14px; font: 300 12px/1.45 var(--ss-schrift); color: #000; }
body.ss-layout .ss-footer a { color: #000; text-decoration: underline; text-decoration-color: #999; }
body.ss-layout .ss-footer__tabelle { width: 100%; border-collapse: collapse; box-shadow: inset 0 0 0 1px #d8dcde; }
body.ss-layout .ss-footer__tabelle th, body.ss-layout .ss-footer__tabelle td { border: 1px solid #d8dcde; padding: 12px 8px; font: 300 12px/1.35 var(--ss-schrift); color: #000; text-align: left; vertical-align: middle; }
body.ss-layout .ss-footer__mehr { margin-top: 40px !important; }
body.ss-layout .ss-footer__col--logo { text-align: center; }
body.ss-layout .ss-footer__logo { width: 245px; height: auto; }
body.ss-layout .ss-footer__links { display: flex; justify-content: space-around; margin: 10px 0 30px; }
body.ss-layout .ss-footer__partner { width: 195px; height: auto; }

/* ---------- Tablet / Handy ---------- */
@media (max-width: 992px) {
	.ss-head__inner { height: 60px; padding: 15px 20px; justify-content: space-between; }
	.ss-head .ss-logo { width: 200px; }
	.ss-head__toggle {
		display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0;
	}
	.ss-head__toggle span:first-child, .ss-head__toggle span:first-child::before, .ss-head__toggle span:first-child::after {
		display: block; width: 24px; height: 2px; background: #000; position: relative; transition: transform .25s, background .25s;
	}
	.ss-head__toggle span:first-child::before, .ss-head__toggle span:first-child::after { content: ""; position: absolute; left: 0; }
	.ss-head__toggle span:first-child::before { top: -7px; }
	.ss-head__toggle span:first-child::after { top: 7px; }
	.ss-head__toggle[aria-expanded="true"] span:first-child { background: transparent; }
	.ss-head__toggle[aria-expanded="true"] span:first-child::before { transform: translateY(7px) rotate(45deg); }
	.ss-head__toggle[aria-expanded="true"] span:first-child::after { transform: translateY(-7px) rotate(-45deg); }
	.ss-nav { position: fixed; inset: 90px 0 0 0; background: #fff; overflow-y: auto; padding: 10px 20px 40px; transform: translateX(100%); transition: transform .3s ease; }
	.admin-bar .ss-nav { top: 136px; }
	.ss-nav.is-offen { transform: none; }
	.ss-nav__list { display: block; }
	.ss-nav__link { padding: 16px 0; font-size: 14px; border-bottom: 1px solid #eee; }
	.ss-nav__link::after { display: none; }
	.ss-nav__sub { position: static; width: auto; box-shadow: none; opacity: 1; visibility: visible; transform: none; padding: 4px 0 8px 14px; }
	.ss-nav__sub a { font-size: 13px; padding: 10px 0; }
	.ss-banner { height: 380px; background-attachment: scroll; }
	.ss-banner__inner { padding: 0 20px; }
	.ss-banner__titel { font-size: clamp(36px, 8vw, 64px); }
	.ss-main { padding: 40px 20px; }
	.ss-karussell__bahn { grid-auto-columns: calc(50% - 10px); }
	body.ss-layout .ss-footer { padding: 40px 20px; }
	body.ss-layout .ss-footer__inner { grid-template-columns: 1fr; gap: 30px; }
	body.ss-layout .ss-footer__col { border: 0; padding: 0; }
}
@media (max-width: 600px) {
	.ss-banner { height: 300px; }
	.ss-karussell__bahn { grid-auto-columns: 85%; }
	.ss-main__inner .wp-block-columns { flex-wrap: wrap; }
	.ss-tabs__knopf { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.ss-banner { background-attachment: scroll; }
	.ss-nav__link::after, .ss-diashow__buehne img, .ss-nav { transition: none; }
}

/* Korrekturen nach Vergleich mit der alten Seite */
.ss-main__inner > .ss-diashow, .ss-main__inner .ss-diashow { max-width: 780px !important; margin: 30px auto !important; }
.ss-main__inner .ss-person { padding: 14px; gap: 14px; border-color: #e1e4e6; border-radius: 0; }
.ss-main__inner .ss-person p { font-size: 14px; line-height: 1.55; margin: 0 0 4px; }
.ss-main__inner .ss-person .ss-person__name { font-weight: 700; color: #333; }
.ss-main__inner .ss-person__kontakt { margin-top: 6px !important; }
.ss-main__inner .ss-personen-gruppe__info p { margin-bottom: 14px; }
.ss-main__inner .ss-termin__titel { font-weight: 600; }
.ss-main__inner .ss-termine__monat { font-size: 13px; letter-spacing: .05em; }
.ss-main__inner .ss-leer { font-style: normal; }
.ss-main__inner .wp-block-details { border-radius: 0; }