/*
 * Schule Spiegel – Erscheinungsbild wie die bisherige Webseite:
 * weiss, Schrift Montserrat (lokal, keine Google Fonts), Menü in Grossbuchstaben,
 * Titelbild über die ganze Breite, Akzentfarbe aus dem Logo.
 * Abschaltbar unter Schule Spiegel → Einstellungen → Darstellung.
 */
@font-face { font-family: "Montserrat SS"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat SS"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/montserrat-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Montserrat SS"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat SS"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-latin-700-normal.woff2) format("woff2"); }

body.ss-site {
	--ss-akzent: #e20252;
	--ss-akzent-dunkel: #b10141;
	--ss-tinte: #1b181c;
	--wp--preset--color--accent-1: #e20252;
	--wp--preset--color--contrast: #1b181c;
	--wp--preset--font-family--manrope: "Montserrat SS", "Helvetica Neue", Arial, sans-serif;
	font-family: "Montserrat SS", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.85;
	color: #333;
	letter-spacing: .01em;
}
body.ss-site h1, body.ss-site h2, body.ss-site h3, body.ss-site h4,
body.ss-site .wp-block-heading, body.ss-site .wp-block-post-title {
	font-family: "Montserrat SS", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	color: var(--ss-tinte);
	letter-spacing: .02em;
	line-height: 1.25;
}
body.ss-site h1, body.ss-site .wp-block-post-title { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
body.ss-site h2 { font-size: 1.45rem; }
body.ss-site h3 { font-size: 1.1rem; }
body.ss-site a { color: var(--ss-tinte); text-decoration-color: var(--ss-akzent); text-underline-offset: .2em; }
body.ss-site a:hover { color: var(--ss-akzent); }
body.ss-site .wp-element-button, body.ss-site .wp-block-button__link {
	background: var(--ss-tinte); color: #fff; border-radius: 3px; padding: .7em 1.4em;
	text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 600;
}
body.ss-site .wp-element-button:hover, body.ss-site .wp-block-button__link:hover { background: var(--ss-akzent); color: #fff; }
body.ss-site .ss-button { border-radius: 3px; background: var(--ss-tinte); border-color: var(--ss-tinte); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
body.ss-site .ss-button:hover { background: var(--ss-akzent); border-color: var(--ss-akzent); }
body.ss-site .ss-button--hell { background: transparent; color: var(--ss-tinte) !important; }

/* Kopfzeile: Logo links, Menü in Grossbuchstaben */
body.ss-site header.wp-block-template-part { background: #fff; position: relative; z-index: 20; }
body.ss-site .ss-logo { display: block; width: auto; max-height: 46px; height: auto; }
body.ss-site .wp-block-site-tagline { display: none; }
body.ss-site .wp-block-navigation { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 400; }
body.ss-site .wp-block-navigation a { color: var(--ss-tinte); text-decoration: none; }
body.ss-site .wp-block-navigation .current-menu-item > a,
body.ss-site .wp-block-navigation a:hover { color: var(--ss-akzent); }
body.ss-site .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 0 !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: .5rem 0; min-width: 250px;
	text-transform: none; letter-spacing: .02em; font-size: 14px;
}
body.ss-site .wp-block-navigation .wp-block-navigation__submenu-container a { padding: .4rem 1.1rem; }

/* Startseite: Titelbild wie bisher */
body.ss-site .ss-hero { margin-top: 0 !important; padding: clamp(4rem, 12vw, 9rem) 1.5rem; background: #2a2a2a; color: #fff; }
body.ss-site .ss-hero h1 {
	color: #fff; font-size: clamp(2.4rem, 7vw, 5.6rem); font-weight: 700; line-height: 1.05;
	letter-spacing: .02em; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); max-width: 13em;
}
body.ss-site .ss-hero--bild .wp-block-cover__inner-container { max-width: 1200px; width: 100%; margin: 0 auto; }
body.ss-site .ss-hero + .wp-block-columns { margin-top: 3rem; }
body.ss-site .ss-agenda, body.ss-site .ss-intro { margin-top: 3.5rem; }
body.ss-site .ss-intro .ss-zahlen { margin-top: 2rem; background: var(--ss-tinte); }
body.ss-site .ss-galerie { margin-top: 2rem; }

/* Karten wie die Blog-Vorschau der alten Seite */
body.ss-site .ss-beitraege--karten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
body.ss-site .ss-beitraege--karten .ss-beitrag { border-radius: 2px; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); border: 0; }
body.ss-site .ss-beitrag__titel { font-weight: 700; font-size: 1rem; }
body.ss-site .ss-beitrag__titel a { color: var(--ss-tinte); }
body.ss-site .ss-kachel { border-radius: 2px; box-shadow: 0 1px 6px rgba(0, 0, 0, .1); border: 0; }
body.ss-site .ss-kachel__icon.dashicons { background: #fde6ee; color: var(--ss-akzent); }
body.ss-site .ss-termin__datum { background: var(--ss-tinte); border-radius: 3px; }
body.ss-site .ss-person { border-radius: 2px; }

/* Breite Bausteine */
body.ss-site .is-layout-constrained > .ss-kachelgruppen,
body.ss-site .is-layout-constrained > .ss-beitraege--karten,
body.ss-site .is-layout-constrained > .ss-personen-wrap,
body.ss-site .is-layout-constrained > .ss-personen {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

/* Fusszeile wie bisher: Adresse · Kontakt · Logo */
body.ss-site .ss-footer { background: #fff; color: #333; border-top: 1px solid #e6e6e6; font-size: 13px; line-height: 1.6; padding: 3rem 1.5rem 3rem; margin-top: 5rem; }
body.ss-site .ss-footer a { color: #333; text-decoration: underline; text-decoration-color: #bbb; }
body.ss-site .ss-footer a:hover { color: var(--ss-akzent); }
body.ss-site .ss-footer__inner { grid-template-columns: minmax(160px, 1fr) minmax(280px, 2.2fr) minmax(200px, 1.3fr); gap: 0; }
body.ss-site .ss-footer__col { padding: 0 1.75rem; border-left: 1px solid #e6e6e6; }
body.ss-site .ss-footer__col:first-child { border-left: 0; padding-left: 0; }
body.ss-site .ss-footer__titel { text-transform: none; letter-spacing: .02em; font-size: 15px; font-weight: 700; opacity: 1; color: var(--ss-tinte); }
body.ss-site .ss-footer__tabelle { border-collapse: collapse; width: 100%; }
body.ss-site .ss-footer__tabelle th, body.ss-site .ss-footer__tabelle td { border: 1px solid #e6e6e6; padding: .55rem .6rem; text-align: left; font-weight: 400; vertical-align: top; }
body.ss-site .ss-footer__mehr { margin-top: 1.5rem; }
body.ss-site .ss-footer__col--logo { text-align: center; }
body.ss-site .ss-footer__logo { max-width: 240px; height: auto; display: inline-block; }
body.ss-site .ss-footer__links { display: flex; justify-content: center; gap: 1rem 2.5rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
body.ss-site .ss-footer__partner { max-width: 180px; height: auto; display: inline-block; }
@media (max-width: 781px) {
	body.ss-site .ss-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
	body.ss-site .ss-footer__col { border-left: 0; padding: 0; }
	body.ss-site .ss-footer__tabelle, body.ss-site .ss-footer__tabelle tbody, body.ss-site .ss-footer__tabelle tr { display: block; }
	body.ss-site .ss-footer__tabelle tr { border: 1px solid #e6e6e6; margin-bottom: .5rem; padding: .4rem .6rem; }
	body.ss-site .ss-footer__tabelle th, body.ss-site .ss-footer__tabelle td { display: block; border: 0; padding: .1rem 0; white-space: nowrap; }
	body.ss-site .ss-footer__tabelle th { font-weight: 700; }
}

/* Startseite: Agenda, «Unsere Schule» und Galerie in voller Breite */
body.ss-site .ss-agenda.is-layout-constrained > *,
body.ss-site .ss-intro.is-layout-constrained > * { max-width: var(--wp--style--global--wide-size, 1200px); }
body.ss-site .ss-galerie.wp-block-gallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .75rem; }
body.ss-site .ss-galerie.wp-block-gallery > figure.wp-block-image { width: 100% !important; margin: 0 !important; }
body.ss-site .ss-galerie img { width: 100%; height: 100% !important; aspect-ratio: 1; object-fit: cover; }