/*
Theme Name: SC Huldi + Stucki
Theme URI: https://www.sc-hustu.ch/
Author: BT AG
Author URI: https://www.bt-ag.ch/
Description: Block-Theme für den Firmenfussballverein SC Huldi + Stucki, Bern. Einseitige Startseite plus Unterseiten (Impressum, Datenschutz, Aktuelles/News, Galerie). Farbwelt aus dem Vereinslogo (Grün / Schwarz / Weiss), Schriften Saira Condensed und IBM Plex.
Version: 1.4.5
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sc-huldi-stucki
Tags: block-theme, one-page, sports, full-site-editing, custom-colors, custom-logo, custom-menu, sticky-post
*/

/* ============================================================
   HINWEIS FÜR DEN WEBMASTER
   Farbwelt direkt aus dem Vereinslogo:
     Grün     #007C32   (Akzent)
     Schwarz  #000000
     Weiss    #FFFFFF
   Alle Farben stehen als CSS-Variablen im :root-Block.
   Alle mit [ERGÄNZEN] markierten Stellen bitte ausfüllen.
   Personen- und Sponsorenangaben: Stand 2021, bitte prüfen.
   ============================================================ */

:root{
  --gruen:#007C32;         /* Vereinsgrün aus dem Logo */
  --gruen-hell:#12A94B;    /* Aufhellung für dunkle Flächen */
  --schwarz:#000000;
  --weiss:#FFFFFF;
  --grau:#F2F2F0;
  --hairline:#D9D9D6;
  --text-leise:#5F6360;
  --text-invers:#B4B8B5;

  --display:"Saira Condensed",Impact,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1140px;
  --pad:clamp(20px,5vw,48px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--weiss);
  color:var(--schwarz);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- Typo ---------- */
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;margin:0}
h1{font-size:clamp(46px,9.5vw,116px);letter-spacing:-.01em}
h2{font-size:clamp(30px,5vw,52px);letter-spacing:.01em}
h3{font-size:clamp(21px,2.6vw,28px);letter-spacing:.02em}

.eyebrow{
  font-family:var(--mono);
  font-size:clamp(14px,1.6vw,16px);
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 16px;
  color:var(--gruen);
}

/* Auf schwarzen Flächen die hellere Grünstufe verwenden */
.kennzahlen,.abschnitt.dunkel,.team-kopf,.funktionen,.fuss{--gruen:var(--gruen-hell)}
.abschnitt.dunkel .knopf.voll{color:#052B12}

/* ---------- Markierung (Signatur) ---------- */
.strasse{
  height:22px;
  background:var(--schwarz);
  background-image:repeating-linear-gradient(90deg,
    var(--weiss) 0 54px, transparent 54px 108px);
  background-size:100% 5px;
  background-repeat:no-repeat;
  background-position:center;
}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:var(--weiss);
  border-bottom:1px solid var(--hairline);
}
.kopf-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
.marke{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.marke span{color:var(--gruen)}
.marke img{height:34px;width:auto}
.hero-lockup{display:flex;align-items:center;gap:clamp(18px,4vw,40px);flex-wrap:wrap}
.hero-lockup img{width:clamp(96px,15vw,168px);height:auto;flex:none}
.nav{display:flex;gap:22px;flex-wrap:wrap}
.nav a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;color:var(--text-leise);
}
.nav a:hover,.nav a:focus-visible{color:var(--schwarz);border-bottom-color:var(--gruen)}

/* Hamburger: auf dem Desktop unsichtbar, nur auf Mobile aktiv.
   Reine CSS-Lösung über eine versteckte Checkbox (kein JavaScript). */
.nav-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-burger{display:none}

/* ---------- Hero ---------- */
.hero{
  /* Sehr helle, pfefferminzblasse Grünfläche mit dem Spielfeld als
     dezenter Textur darunter. Die Überlagerung ist fast deckend,
     damit die schwarze Headline gut lesbar bleibt. */
  /* Stärke der Grünfärbung: kleinere Werte in rgba(...) = kräftigeres,
     satteres Grün und mehr sichtbares Spielfeld; grössere Werte =
     blasser. Alpha am Ende (.80/.84) steuert die Deckung. */
  background:
    linear-gradient(rgba(188,222,196,.80), rgba(174,214,184,.84)),
    url(assets/hero-feld.jpg) center/cover no-repeat;
  padding-top:clamp(52px,9vw,100px);
  overflow:hidden;
}
.hero h1 em{font-style:normal;color:var(--gruen)}
/* Auf der blassgrünen Bannerfläche brauchen Vorzeile und Fliesstext
   mehr Kontrast: dunkleres Grün bzw. fast schwarzer Text. */
.hero .eyebrow{color:#0b3d1e;font-size:clamp(15px,1.8vw,17px)}
.hero-text{max-width:60ch;margin:30px 0 0;font-size:clamp(17px,2vw,20px);color:#1d211e;font-weight:500}
.hero-linie{margin:0}
.hero-fuss{display:flex;flex-wrap:wrap;gap:14px;padding-top:clamp(34px,6vw,56px);padding-bottom:clamp(34px,6vw,56px)}

.knopf{
  display:inline-block;
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:15px 26px;border:2px solid var(--gruen);
}
.knopf.voll{background:var(--gruen);color:var(--weiss);font-weight:500}
.knopf.voll:hover,.knopf.voll:focus-visible{background:var(--gruen-hell);border-color:var(--gruen-hell)}
.knopf.leer{color:var(--gruen)}
.knopf.leer:hover,.knopf.leer:focus-visible{background:var(--gruen);color:var(--weiss)}
.knopf.dezent{border-color:var(--schwarz);color:var(--schwarz)}
.knopf.dezent:hover,.knopf.dezent:focus-visible{background:var(--schwarz);color:var(--weiss)}

/* ---------- Kennzahlen ---------- */
.kennzahlen{
  background:linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.86)), url(assets/hero-feld.jpg);
  background-size:cover;
  background-position:center;
  color:var(--weiss);
}
.kennzahlen ul{
  list-style:none;margin:0;padding-top:34px;padding-bottom:34px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:26px 20px;
}
.kennzahlen b{display:block;font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--gruen)}
.kennzahlen small{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-invers)}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-top:clamp(58px,9vw,96px);padding-bottom:clamp(58px,9vw,96px)}
.abschnitt.hell{background:var(--weiss)}
.abschnitt.grau{background:var(--grau)}
.abschnitt.dunkel{background:var(--schwarz);color:var(--weiss)}
.abschnitt.dunkel p{color:var(--text-invers)}
.abschnitt p{max-width:66ch}
.kopfzeile{margin-bottom:38px}

/* ---------- Teams ---------- */
.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:34px}
.team{background:var(--weiss);border:2px solid var(--schwarz);display:flex;flex-direction:column}
.team-kopf{background:var(--schwarz);color:var(--weiss);padding:20px 24px}
.team-kopf p{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);margin:0 0 8px}
.team-liste{list-style:none;margin:0;padding:8px 24px 24px}
.team-liste li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--hairline);font-size:15.5px}
.team-liste li:last-child{border-bottom:0}
.team-liste span:first-child{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-leise);padding-top:3px}
.team-liste span:last-child{text-align:right;font-weight:500}

/* ---------- Bautafel (Signatur) ---------- */
.tafel{background:var(--gruen);color:var(--weiss);border:5px solid var(--schwarz);max-width:560px;margin-top:34px}
.tafel-kopf{border-bottom:5px solid var(--schwarz);padding:22px 34px 20px}
.tafel-kopf p{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 6px;color:var(--weiss)}
.tafel-kopf h3{font-size:clamp(22px,3vw,28px);letter-spacing:.01em;line-height:1;overflow-wrap:break-word}
.tafel dl{margin:0;padding:24px 30px 28px}
/* Nur die Zeilen der Definitionsliste als Flex-Zeilen – NICHT den Kopf.
   (Früher traf ".tafel div" auch .tafel-kopf und schob den Titel an den Rand.) */
.tafel dl div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.45)}
.tafel dl div:last-child{border-bottom:0}
.tafel dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;padding-top:3px}
.tafel dd{margin:0;text-align:right;font-weight:600}

/* Zweite Spalte begrenzen (statt "auto"), damit die Tafel eine feste
   Breite hat und der Titel "Jeden Montag" innerhalb des Randes umbricht,
   statt den Rand zu berühren. */
.mitmachen-grid{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:clamp(30px,5vw,64px);align-items:start}
.check{list-style:none;margin:26px 0 0;padding:0;max-width:60ch;color:var(--text-invers)}
.check li{position:relative;padding-left:30px;margin-bottom:13px}
.check li::before{content:"→";position:absolute;left:0;color:var(--gruen);font-weight:700}

/* ---------- Sponsoren ---------- */
.logo-slot{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--weiss);border:1px solid var(--hairline);
  min-height:96px;padding:16px;
}
/* Platzhalter-Beschriftung standardmässig ausgeblendet (alle Logos sind
   vorhanden). Erscheint nur, falls eine Logo-Datei fehlt – siehe onerror. */
.logo-slot span{
  display:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#A9A6A2;text-align:center;line-height:1.5;
}
.logo-slot img{position:absolute;inset:16px;margin:auto;max-width:calc(100% - 32px);max-height:78px;width:auto;object-fit:contain}

/* Hauptsponsor – schwarze Karte */
.sponsor-haupt{
  background:var(--schwarz);color:var(--weiss);border-left:8px solid var(--gruen-hell);
  display:grid;grid-template-columns:210px 1fr;gap:clamp(20px,3vw,38px);
  padding:28px 30px;margin-bottom:34px;align-items:center;
}
.sponsor-haupt .logo-slot{min-height:130px;border:0;background:transparent}
.sponsor-haupt .logo-slot img{max-height:110px}
.sponsor-haupt h3{color:var(--weiss);margin-bottom:4px}
.sponsor-haupt .label{color:var(--gruen-hell)}
.sponsor-haupt .sponsor-text{color:#E4E5E2}
.sponsor-haupt .meta{color:var(--text-invers)}
.sponsor-haupt .meta a{color:var(--gruen-hell)}

.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gruen);margin:0 0 10px}
.sponsor-text{font-size:15.5px;line-height:1.55;margin:12px 0 0;max-width:60ch}
.meta{font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--text-leise);margin:14px 0 0}
.meta a{color:var(--gruen);text-decoration:none}
.meta a:hover{text-decoration:underline}

.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:26px}
.sponsor{background:var(--weiss);border:1px solid var(--hairline);display:flex;flex-direction:column}
.sponsor .logo-slot{border:0;border-bottom:1px solid var(--hairline)}
.sponsor-body{padding:22px 24px 24px}
.sponsor-body h3{font-size:21px;margin-bottom:4px}
.sponsor-body .branche{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);margin:0 0 12px}
.sponsor-body p{font-size:15px;line-height:1.55;margin:0}

/* Freie Fläche als Einladung */
.frei{
  border:2px dashed var(--gruen);background:transparent;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:34px 26px;min-height:100%;
}
.frei h3{color:var(--gruen);margin-bottom:12px}
.frei p{font-size:15px;max-width:32ch;margin:0 0 20px;color:var(--text-leise)}

@media (max-width:620px){
  .sponsor-haupt{grid-template-columns:1fr}
}

/* ---------- Kontakt ---------- */
.funktionen{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--schwarz)}
/* Belegte Zellen bekommen eine feine Trennlinie per Schatten; leere
   Rasterfelder bleiben so schwarz wie der Rest (statt grau). */
.funktionen li{background:var(--schwarz);padding:18px 20px;box-shadow:0 0 0 1px #26292d}
.funktionen span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen);margin-bottom:5px}

/* ---------- Fuss ---------- */
.fuss{background:var(--schwarz);color:var(--text-invers);padding-top:34px;padding-bottom:34px;font-family:var(--mono);font-size:12.5px}
.fuss-inner{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.fuss a{color:var(--text-invers)}

:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}

@media (max-width:820px){
  .kopf-inner{flex-wrap:wrap;gap:12px 16px}

  /* Burger-Knopf einblenden, rechts ausrichten */
  .nav-burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;margin-left:auto;flex:none;
    border:2px solid var(--schwarz);background:var(--weiss);cursor:pointer;
  }
  .nav-burger span{position:relative;display:block;width:22px;height:2px;background:var(--schwarz);transition:background .15s}
  .nav-burger span::before,
  .nav-burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--schwarz);transition:transform .15s,top .15s}
  .nav-burger span::before{top:-7px}
  .nav-burger span::after{top:7px}

  /* Menü als aufklappbares Panel unter der Kopfzeile */
  .nav{
    display:none;order:3;flex-basis:100%;width:100%;
    flex-direction:column;gap:0;padding-bottom:6px;
  }
  .nav-toggle:checked ~ .nav{display:flex}
  .nav a{padding:14px 2px;border-bottom:1px solid var(--hairline);font-size:14px}
  .nav a:last-child{border-bottom:0}

  /* Burger wird beim Öffnen zum X */
  .nav-toggle:checked ~ .nav-burger span{background:transparent}
  .nav-toggle:checked ~ .nav-burger span::before{top:0;transform:rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span::after{top:0;transform:rotate(-45deg)}

  .mitmachen-grid{grid-template-columns:1fr}
}

/* ---------- Unterseiten (Impressum, Datenschutz, Galerie …) ---------- */
.seiten-main .wrap{max-width:var(--wrap)}
.seiten-titel{
  font-size:clamp(34px,6vw,60px);
  margin:0 0 30px;
}
.seiten-inhalt{max-width:72ch}
.seiten-inhalt h2{font-size:clamp(26px,4vw,40px);margin:44px 0 16px}
.seiten-inhalt h3{margin:32px 0 12px}
.seiten-inhalt p{margin:0 0 18px}
.seiten-inhalt ul,.seiten-inhalt ol{margin:0 0 18px;padding-left:22px}
.seiten-inhalt li{margin-bottom:8px}
.seiten-inhalt a{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}
.seiten-inhalt a:hover,.seiten-inhalt a:focus-visible{color:var(--gruen-hell)}
.beitrag-datum{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gruen);margin:0 0 10px;
}
.beitrag-zurueck{margin-top:40px}

/* ---------- Beitragsliste (Aktuelles / News) ---------- */
.beitrag-liste .wp-block-post-template{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;
}
.beitrag-liste .wp-block-post-template li{
  background:var(--weiss);border:2px solid var(--schwarz);
  padding:24px 26px;display:flex;flex-direction:column;
}
.beitrag-liste .wp-block-post-date{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gruen);margin:0 0 10px;
}
.beitrag-liste .wp-block-post-title{
  font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.98;
  font-size:clamp(21px,2.6vw,26px);margin:0 0 12px;letter-spacing:.02em;
}
.beitrag-liste .wp-block-post-title a{text-decoration:none}
.beitrag-liste .wp-block-post-title a:hover{color:var(--gruen)}
.beitrag-liste .wp-block-post-excerpt{color:var(--text-leise);font-size:15.5px}
.beitrag-liste .wp-block-post-excerpt__more-link{
  display:inline-block;margin-top:10px;color:var(--gruen);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.wp-block-query-pagination{margin-top:40px;font-family:var(--mono);font-size:13px;letter-spacing:.08em}
.wp-block-query-pagination a{text-decoration:none;color:var(--gruen)}
.wp-block-query-pagination .current{font-weight:700}

/* ---------- Galerie ---------- */
.wp-block-gallery{margin-top:34px}
.wp-block-image img{border:2px solid var(--schwarz)}

/* ---------- Suche ---------- */
.wp-block-search__button{
  background:var(--gruen);color:var(--weiss);border:2px solid var(--gruen);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:10px 20px;
}
.wp-block-search__input{border:2px solid var(--schwarz);padding:11px 14px;font-family:var(--body)}

/* ---------- Fuss-Navigation ---------- */
.fuss-nav{display:flex;flex-wrap:wrap;gap:18px}
.fuss-nav a{text-decoration:none;border-bottom:2px solid transparent}
.fuss-nav a:hover,.fuss-nav a:focus-visible{color:var(--weiss);border-bottom-color:var(--gruen)}

/* ---------- WordPress-Feinschliff ----------
   Neutralisiert Standard-Abstände des Block-Editors, damit die
   Abschnitte bündig sitzen wie im Original-Entwurf. */
.wp-site-blocks{margin:0}
main.wp-block-group{margin:0}
.seiten-main{margin:0}

/* Der Wrapper der Vorlagenteile (Kopf/Fuss) darf kein eigenes
   Layout bilden – sonst kann der sticky Kopf nicht mitscrollen.
   display:contents blendet den Wrapper aus dem Layout aus, der
   Kopf wird damit relativ zur ganzen Seite klebend. */
.wp-block-template-part{display:contents}

/* Kein Standard-Block-Abstand zwischen Kopf, Inhalt und Fuss –
   entfernt den weissen Streifen zwischen Navigation und Banner. */
.wp-site-blocks > *{margin-block-start:0;margin-block-end:0}