/*
Theme Name: Elternteams Wettingen – Schulhaus-Vorlage
Theme URI: https://www.elternteams-wettingen.ch
Author: Elternteams Wettingen (Netzwerk-Administration)
Description: Gemeinsame Multisite-Vorlage fuer die Schulhaus-Websites der Elternteams Wettingen (Altenburg, Dorf, Margelaecker, Zehntenhof, HPS). Trennt das zentrale Design-System (Header, Footer, Komponenten, Barrierefreiheit) von schulspezifischen Inhalten (Name, Akzentfarbe, Hero-Bild, Aktuelles, Veranstaltungen, Galerie, Kontakt). Auf allen Netzwerk-Sites aktiv – nur ueber das Netzwerk-Dashboard aktivierbar/aktualisierbar.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: etw-schulhaus
*/

/* ==========================================================================
   GLOBALES DESIGN-SYSTEM
   Diese Datei wird netzwerkweit von der Super-Admin-Ebene gepflegt.
   School Admins und Editoren haben KEINEN Zugriff auf diese Datei
   (siehe README.md, Abschnitt "Rollen").

   Die einzige Stelle, an der sich Schulhaus-Websites optisch unterscheiden,
   ist die CSS-Variable --color-accent. Sie wird pro Site ueber den
   Customizer gesetzt (inc/customizer.php) und als Inline-Style
   nachgeladen – siehe etw_enqueue_school_accent_color() in functions.php.
   ========================================================================== */

:root{
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --color-network-ink: #16302B;
  --color-network-primary: #1F5F52;
  --color-network-primary-dark: #123B32;
  --color-network-tint: #EAF2EF;

  --color-bg: #FAF8F4;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F3F0E9;
  --color-text: #1C1C1C;
  --color-text-muted: #5B6560;
  --color-border: #E4E0D8;
  --color-focus: #123B32;

  --color-status-ok: #2E6F40;
  --color-status-warn: #B5720B;
  --color-status-full: #A13333;

  /* Fallback, falls kein schulspezifischer Wert im Customizer gesetzt ist */
  --color-accent: #1F5F52;
  --color-accent-tint: #EAF2EF;
  --color-accent-dark: #123B32;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(22,48,43,0.06), 0 1px 1px rgba(22,48,43,0.04);
  --shadow-md: 0 8px 24px rgba(22,48,43,0.10);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --max-width: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{ margin:0; font-family: var(--font-base); color: var(--color-text); background: var(--color-bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--color-network-primary-dark); }
h1,h2,h3,h4{ line-height:1.2; margin:0 0 1rem; font-weight:700; letter-spacing:-0.01em; }
h2{ font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); }
p{ margin:0 0 1rem; }
.container{ max-width: var(--max-width); margin-inline:auto; padding-inline: var(--space-3); }
section{ padding-block: var(--space-5); }

.eyebrow{ display:inline-flex; align-items:center; gap:.4em; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--color-network-primary-dark); }
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--color-network-primary); display:inline-block; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px;
}
.skip-link{ position:absolute; left:-999px; top:auto; background: var(--color-network-primary-dark); color:#fff; padding:.9em 1.3em; z-index:200; border-radius: 0 0 var(--radius-sm) 0; font-weight:600; }
.skip-link:focus{ left:0; top:0; }
.screen-reader-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-weight:600; font-size:.95rem; text-decoration:none; cursor:pointer; padding:.85em 1.4em; border-radius:999px; border:2px solid transparent; min-height:44px; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--color-accent); color:#fff; }
.btn-primary:hover{ background: var(--color-accent-dark); }
.btn-secondary{ background: transparent; color: var(--color-network-primary-dark); border-color: var(--color-network-primary-dark); }
.btn-secondary:hover{ background: var(--color-network-tint); }
.btn-ghost{ background:transparent; color:inherit; border-color: var(--color-border); }
.btn-ghost:hover{ background: var(--color-surface-alt); }
.btn-block{ width:100%; }

.badge{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:.35em .8em; border-radius:999px; background: var(--color-network-tint); color: var(--color-network-primary-dark); }
.badge-accent{ background: var(--color-accent-tint); color: var(--color-accent-dark); }
.badge-status-ok{ background:#E8F3E9; color: var(--color-status-ok); }
.badge-status-warn{ background:#FBF0DD; color: var(--color-status-warn); }
.badge-status-full{ background:#F6E4E4; color: var(--color-status-full); }

.card{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow:hidden; }

/* Header */
.network-bar{ background: var(--color-network-ink); color:#EFEFEA; font-size:.82rem; }
.network-bar .container{ display:flex; align-items:center; justify-content:space-between; padding-block:.5em; gap:1em; flex-wrap:wrap; }
.network-bar-id{ display:flex; align-items:center; gap:.5em; opacity:.95; }
.network-bar-id .dot{ width:8px; height:8px; border-radius:50%; background:#7FD8B8; flex:none; }
.network-bar a{ color:#EFEFEA; text-decoration:underline; text-underline-offset:2px; }
.network-bar a:hover{ color:#fff; }

.site-header{ position: sticky; top:0; z-index:100; background: var(--color-surface); border-bottom:1px solid var(--color-border); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); padding-block: .9em; }
.school-identity{ display:flex; align-items:center; gap:.7em; text-decoration:none; color:inherit; }
.school-mark{ width:42px; height:42px; border-radius: var(--radius-sm); background: var(--color-accent-tint); color: var(--color-accent-dark); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.05rem; flex:none; overflow:hidden; }
.school-mark img{ width:100%; height:100%; object-fit:cover; }
.school-identity-text .eyebrow-small{ display:block; font-size:.72rem; color: var(--color-text-muted); font-weight:600; }
.school-identity-text strong{ display:block; font-size:1.08rem; }

.main-nav{ display:flex; align-items:center; gap: var(--space-3); }
.main-nav ul{ list-style:none; display:flex; gap: 1.6em; margin:0; padding:0; }
.main-nav a{ text-decoration:none; color: var(--color-text); font-weight:600; font-size:.95rem; padding:.4em .1em; border-bottom:2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ border-color: var(--color-accent); color: var(--color-accent-dark); }
.header-actions{ display:flex; align-items:center; gap:.7em; }
.menu-toggle{ display:none; background:none; border:1px solid var(--color-border); border-radius: var(--radius-sm); width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{ content:""; display:block; width:20px; height:2px; background: var(--color-text); position:relative; }
.menu-toggle span::before{ position:absolute; top:-6px; }
.menu-toggle span::after{ position:absolute; top:6px; }
.cta-mobile{ display:none; }

@media (max-width: 860px){
  .main-nav ul{ position:fixed; inset:0 0 0 auto; width:min(320px,86vw); height:100vh; background: var(--color-surface); flex-direction:column; gap:0; padding: 5.5em var(--space-3) var(--space-3); transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--shadow-md); overflow-y:auto; }
  .main-nav[data-open="true"] ul{ transform: translateX(0); }
  .main-nav ul li{ border-bottom:1px solid var(--color-border); }
  .main-nav ul a{ display:block; padding: 1em .2em; font-size:1.05rem; }
  .cta-desktop{ display:none; }
  .cta-mobile{ display:block; margin-top:1em; }
  .menu-toggle{ display:flex; }
  .nav-scrim{ display:none; position:fixed; inset:0; background:rgba(22,48,43,.4); z-index:90; }
  .nav-scrim[data-visible="true"]{ display:block; }
}

/* Hero */
.hero{ position:relative; color:#fff; padding-block: var(--space-5); background-size:cover; background-position:center; }
.hero .container{ max-width:780px; }
.hero .eyebrow{ color:#DDEFE9; }
.hero .eyebrow::before{ background:#7FD8B8; }
.hero h1{ font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); margin-top:.3em; color:#fff; }
.hero .subheadline{ font-size:1.15rem; font-weight:600; color:#EAF2EF; }
.hero .intro{ color:#DDE7E3; max-width:56ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9em; margin-block: var(--space-3); }
.hero-back{ display:inline-flex; align-items:center; gap:.4em; color:#EAF2EF; text-decoration:none; font-size:.9rem; font-weight:600; }
.hero-back:hover{ text-decoration:underline; }

/* Quick links */
.quick-links{ padding-block: var(--space-4); background: var(--color-surface); }
.quick-links .container{ padding-block:0; }
.quick-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-2); margin-top: calc(var(--space-5) * -1.55); position:relative; z-index:5; }
@media (max-width:860px){ .quick-grid{ grid-template-columns: repeat(2,1fr); margin-top:-3.2rem; } }
.quick-card{ background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2); text-decoration:none; color: var(--color-text); display:flex; flex-direction:column; gap:.5em; border:1px solid var(--color-border); }
.quick-card:hover{ border-color: var(--color-accent); }
.quick-icon{ width:38px; height:38px; border-radius:10px; background: var(--color-accent-tint); color: var(--color-accent-dark); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.quick-card span{ font-size:.86rem; color: var(--color-text-muted); }

/* About */
.about-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-4); align-items:start; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.about-activities{ list-style:none; margin: var(--space-2) 0 0; padding:0; display:grid; gap:.6em; }
.about-activities li{ display:flex; gap:.7em; align-items:flex-start; font-size:.95rem; }
.about-activities li::before{ content:"\2713"; color: var(--color-network-primary); font-weight:800; }
.about-photo{ aspect-ratio:4/3; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-network-tint), var(--color-accent-tint)); overflow:hidden; border:1px solid var(--color-border); }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-note{ font-size:.85rem; color: var(--color-text-muted); margin-top:.8em; }
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-2); margin-top: var(--space-2); }
@media (max-width:640px){ .team-grid{ grid-template-columns: 1fr 1fr; } }
.team-member{ text-align:center; font-size:.9rem; }
.team-photo{ aspect-ratio:1; border-radius:50%; background: var(--color-surface-alt); margin-bottom:.5em; overflow:hidden; }
.team-photo img{ width:100%; height:100%; object-fit:cover; }

/* Noticeboard / news */
.noticeboard{ background: var(--color-surface-alt); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1em; flex-wrap:wrap; margin-bottom: var(--space-3); }
.notice-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-2); }
@media (max-width:960px){ .notice-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .notice-grid{ grid-template-columns:1fr; } }
.notice-card{ display:flex; flex-direction:column; }
.notice-thumb{ aspect-ratio:16/9; background: var(--color-network-tint); overflow:hidden; }
.notice-thumb img{ width:100%; height:100%; object-fit:cover; }
.notice-body{ padding: var(--space-2); display:flex; flex-direction:column; gap:.5em; flex:1; }
.notice-meta{ display:flex; align-items:center; gap:.6em; font-size:.78rem; color: var(--color-text-muted); }
.notice-body p{ color: var(--color-text-muted); font-size:.92rem; margin:0; flex:1; }
.notice-link{ font-weight:700; font-size:.9rem; text-decoration:none; color: var(--color-accent-dark); }
.notice-link:hover{ text-decoration:underline; }

/* Events */
.events-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-2); }
@media (max-width:960px){ .events-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .events-grid{ grid-template-columns:1fr; } }
.event-card{ display:flex; flex-direction:column; }
.event-thumb{ aspect-ratio:16/9; background: linear-gradient(135deg, var(--color-accent-tint), var(--color-network-tint)); overflow:hidden; }
.event-thumb img{ width:100%; height:100%; object-fit:cover; }
.event-body{ padding: var(--space-2); display:flex; flex-direction:column; gap:.5em; flex:1; }
.event-type{ font-size:.78rem; font-weight:700; color: var(--color-accent-dark); }
.event-facts{ list-style:none; margin:0; padding:0; display:grid; gap:.3em; font-size:.86rem; color: var(--color-text-muted); }
.event-desc{ font-size:.9rem; color: var(--color-text-muted); flex:1; }
.event-footer{ display:flex; align-items:center; justify-content:space-between; gap:.6em; margin-top:.4em; flex-wrap:wrap; }

/* Events-Portal bridge */
.portal-bridge{ background: var(--color-network-primary-dark); color:#fff; border-radius: var(--radius-lg); padding: var(--space-4); display:grid; grid-template-columns: 1.3fr auto; gap: var(--space-3); align-items:center; }
@media (max-width:760px){ .portal-bridge{ grid-template-columns:1fr; } }
.portal-bridge h2{ color:#fff; }
.portal-bridge p{ color:#DDE7E3; max-width:56ch; margin:0; }
.portal-bridge .btn-primary{ background:#fff; color: var(--color-network-primary-dark); }
.portal-bridge .btn-primary:hover{ background:#EAF2EF; }

/* Participation */
.participation-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items:center; }
@media (max-width:860px){ .participation-grid{ grid-template-columns:1fr; } }
.participation-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.6em; }
@media (max-width:480px){ .participation-list{ grid-template-columns:1fr; } }
.participation-list li{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-sm); padding:.7em .9em; font-size:.9rem; }
.participation-note{ background: var(--color-accent-tint); color: var(--color-accent-dark); border-radius: var(--radius-sm); padding:.9em 1.1em; font-weight:600; font-size:.92rem; }

/* Gallery */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.5em; margin-bottom: var(--space-2); }
.filter-btn{ border:1px solid var(--color-border); background: var(--color-surface); border-radius:999px; padding:.5em 1em; font-size:.85rem; font-weight:600; cursor:pointer; min-height:40px; }
.filter-btn[aria-pressed="true"]{ background: var(--color-network-primary-dark); color:#fff; border-color: var(--color-network-primary-dark); }
.gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:.8em; }
@media (max-width:860px){ .gallery-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
.gallery-item{ aspect-ratio:1; border-radius: var(--radius-sm); border:0; padding:0; cursor:pointer; overflow:hidden; background: var(--color-surface-alt); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-note{ font-size:.82rem; color: var(--color-text-muted); margin-top: var(--space-2); }

/* Resources */
.resources{ background: var(--color-surface-alt); }
.resources-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3,1fr); gap:.7em; }
@media (max-width:760px){ .resources-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .resources-list{ grid-template-columns:1fr; } }
.resources-list a{ display:flex; align-items:center; gap:.6em; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-sm); padding:.9em 1em; text-decoration:none; color: var(--color-text); font-weight:600; font-size:.92rem; min-height:44px; }
.resources-list a:hover{ border-color: var(--color-accent); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-4); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-2); }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4em; margin-bottom: var(--space-2); }
.field label{ font-weight:600; font-size:.9rem; }
.field .opt{ font-weight:400; color: var(--color-text-muted); font-size:.82rem; }
.field input, .field select, .field textarea{ border:1px solid var(--color-border); border-radius: var(--radius-sm); padding:.8em .9em; font-family:inherit; font-size:.95rem; background: var(--color-surface); color: var(--color-text); min-height:44px; }
.field textarea{ min-height:120px; resize:vertical; }
.consent{ display:flex; gap:.7em; align-items:flex-start; font-size:.85rem; color: var(--color-text-muted); }
.consent input{ margin-top:.3em; width:18px; height:18px; flex:none; }
.privacy-note{ font-size:.8rem; color: var(--color-text-muted); background: var(--color-surface-alt); border-radius: var(--radius-sm); padding:.8em 1em; }
.contact-info-card{ background: var(--color-network-primary-dark); color:#fff; border-radius: var(--radius-md); padding: var(--space-3); }
.contact-info-card h3{ color:#fff; }
.contact-info-card dl{ margin:0; }
.contact-info-card dt{ font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:#B9D2CA; margin-top:1em; }
.contact-info-card dd{ margin:0; font-size:.95rem; }
.social-row{ display:flex; gap:.6em; margin-top:1em; }
.social-row a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; }

/* FAQ */
.faq-list{ display:grid; gap:.6em; max-width:820px; }
.faq-item{ border:1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.faq-item summary{ padding:1em 1.2em; font-weight:600; cursor:pointer; min-height:44px; display:flex; align-items:center; }
.faq-item div{ padding:0 1.2em 1.2em; color: var(--color-text-muted); }

/* Footer */
.site-footer{ background: var(--color-network-ink); color:#D8E3DE; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-3); padding-block: var(--space-4); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55em; }
.site-footer a{ color:#D8E3DE; text-decoration:none; font-size:.92rem; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-brand strong{ display:block; color:#fff; font-size:1.1rem; }
.footer-brand span{ font-size:.85rem; color:#9FB6AE; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block: var(--space-2); font-size:.8rem; color:#9FB6AE; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6em; }
.footer-bottom a{ color:#9FB6AE; }

main:focus{ outline:none; }