/* =========================================================
   BRG14 STANDARDSEITEN
   ---------------------------------------------------------
   Standard-Hero für normale Inhaltsseiten

   Zuständig für:
   - Standardseiten-Hero
   - linke Farblinie
   - Kategorienbadge
   - Seitentitel
   - Hero-Unterzeile
   - Farbvarianten für Seitengruppen
   - Standardseparator unter Inhaltsüberschriften

   NICHT zuständig für:
   - Startseite
   - Sonderseitenlayouts
   - globale Typografie
   - globale Kicker/Subtitles
   - globale Karten
   - globale Grids
   ========================================================= */


/* =========================================================
   FARBSYSTEM
   ---------------------------------------------------------
   Der Standardseiten-Hero arbeitet mit CSS-Variablen.
   Die Klasse am Hero-Wrapper bestimmt die Farbwelt.

   Varianten:
   - .brg14-schule
   - .brg14-team
   - .brg14-angebote
   - .brg14-service
   - .brg14-rechtlich

   Fallback:
   Ohne Variantenklasse wird das rechtliche Blau verwendet.
   ========================================================= */

:root {
  --brg14-hero-line: #071E42;
  --brg14-hero-badge-text: #071E42;
  --brg14-hero-badge-bg: #E7ECF3;
}


/* =========================================================
   Farbvariante: Rechtlich
   ---------------------------------------------------------
   Verwendung:
   - Impressum
   - Datenschutz
   - Barrierefreiheit
   ========================================================= */

.brg14-rechtlich,
.brg14-rechtliches {
  --brg14-hero-line: #071E42;
  --brg14-hero-badge-text: #071E42;
  --brg14-hero-badge-bg: #E7ECF3;
}


/* =========================================================
   Farbvariante: Unsere Schule
   ---------------------------------------------------------
   Verwendung:
   - News
   - Schule
   - Team
   - Leitbild
   - Unterricht
   ========================================================= */

.brg14-schule {
  --brg14-hero-line: #9E4A2B;
  --brg14-hero-badge-text: #9E4A2B;
  --brg14-hero-badge-bg: #F5ECE8;
}


/* =========================================================
   Farbvariante: Team
   ---------------------------------------------------------
   Verwendung:
   - Team
   - Lehrer:innen
   - Verwaltung
   ========================================================= */

.brg14-team {
  --brg14-hero-line: #9E4A2B;
  --brg14-hero-badge-text: #9E4A2B;
  --brg14-hero-badge-bg: #F5ECE8;
}


/* =========================================================
   Farbvariante: Angebote
   ---------------------------------------------------------
   Verwendung:
   - Downloads
   - Angebote
   - Schwerpunkte
   ========================================================= */

.brg14-angebote {
  --brg14-hero-line: #9E4A2B;
  --brg14-hero-badge-text: #9E4A2B;
  --brg14-hero-badge-bg: #F5ECE8;
}


/* =========================================================
   Farbvariante: Service
   ---------------------------------------------------------
   Verwendung:
   - Kontakt
   - Kalender
   - Quicklinks
   ========================================================= */

.brg14-service {
  --brg14-hero-line: #9E4A2B;
  --brg14-hero-badge-text: #9E4A2B;
  --brg14-hero-badge-bg: #F5ECE8;
}


/* =========================================================
   STANDARDSEITEN-HERO
   ---------------------------------------------------------
   Grundstruktur:

   <div class="brg14-standard-hero brg14-schule">
     <div class="brg14-standard-hero-bar"></div>
     <div class="brg14-standard-hero-content">
       <div class="brg14-standard-hero-kicker">...</div>
       <h1 class="brg14-standard-hero-title">...</h1>
       <p class="brg14-standard-hero-subtitle">...</p>
     </div>
   </div>
   ========================================================= */

.brg14-standard-hero {
  display: flex;
  align-items: stretch;

  margin-bottom: 48px;
}


/* =========================================================
   Linke Farblinie
   ========================================================= */

.brg14-standard-hero-bar {
  width: 5px;

  flex-shrink: 0;

  background: var(--brg14-hero-line);
}


/* =========================================================
   Hero-Inhalt
   ========================================================= */

.brg14-standard-hero-content {
  flex: 1;

  padding: 20px 24px 16px;
}


/* =========================================================
   Kategorienbadge
   ---------------------------------------------------------
   Bewusst KEIN Alias zu .brg14-kicker:
   Dieses Element ist ein farbiges Badge mit Hintergrund und
   gehört ausschließlich zum Standardseiten-Hero.
   ========================================================= */

.brg14-standard-hero-kicker {
  display: inline-block;

  margin-bottom: 10px;
  padding: 4px 11px;

  border-radius: 999px;

  background: var(--brg14-hero-badge-bg);
  color: var(--brg14-hero-badge-text);


}


/* =========================================================
   Seitentitel im Standardseiten-Hero
   ---------------------------------------------------------
   !important bleibt bewusst, weil Kadence/Block-Styles
   H1-Regeln teilweise stärker setzen.
   ========================================================= */

.brg14-standard-hero-title {
  display: block;

  margin: 0 !important;

  color: #071E42 !important;

}


/* =========================================================
   Unterzeile im Standardseiten-Hero
   ---------------------------------------------------------
   Bewusst eigenständig:
   Nicht mit .brg14-subtitle zusammengelegt, weil dieser Text
   direkt zum Hero-System gehört.
   ========================================================= */

.brg14-standard-hero-subtitle {
  display: block;

  margin-top: 8px;
  margin-bottom: 0;

  color: var(--brg14-muted);

}


/* =========================================================
   Standardseparator unter Inhaltsüberschriften
   ---------------------------------------------------------
   Globaler Standard für breite WordPress-Separatoren.
   Kann pro Seite bei Bedarf lokal überschrieben werden.
   ========================================================= */

.wp-block-separator,
hr.wp-block-separator,
.wp-block-separator.is-style-wide {
  height: 0;

  border: 0 !important;
  border-top: 1px solid var(--brg14-border) !important;

  background: transparent !important;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640px) {

  .brg14-standard-hero {
    margin-bottom: 40px;
  }

  .brg14-standard-hero-content {
    padding: 18px 18px 14px;
  }
}