@CHARSET "UTF-8";

/* ==========================================================================
   Volleyball-Service – Design "Blau & Weiß"

   Gestaltungsziele:
   - Clean und ruhig: weiße Karten auf hellblauem Grund, klare Kanten,
     zurückhaltende Schatten statt Verläufen und Streifen.
   - Mobile-first: alle Bedien-Elemente mindestens 44px hoch, keine
     horizontalen Überläufe, volle Breite für Karten auf kleinen Geräten.
   - Sportlich-professionell: kräftige, gut lesbare Überschriften, ein
     durchgehender Blau-Akzent (Balken, Unterstriche, Kopfzeilen), damit die
     Seite bis in die Regionalliga hinein seriös wirkt.

   Aufbau:
     1. Design-Tokens        5. Navigation
     2. Basis / Reset        6. Utility-Klassen (Bestand)
     3. Typografie           7. PrimeFaces-Anpassungen
     4. Layout               8. Fremd-Bibliotheken
                             9. Media-Anpassungen
   ========================================================================== */


/* ==========================================================================
   1. Design-Tokens
   ========================================================================== */

:root {
  /* Vereinsblau als durchgängige Skala – alle Blautöne der Seite leiten sich
     hiervon ab, damit Akzente untereinander harmonieren. */
  --blau-900: #06304e;
  --blau-800: #08507f;
  --blau-700: #0B72B5; /* Marken-Blau */
  --blau-600: #007ad9;
  --blau-500: #2b95e8;
  --blau-200: #b9dcf7;
  --blau-100: #dcedfb;
  --blau-50: #eef6fd;

  /* PrimeFaces greift an einigen Stellen selbst auf --primary-color zu. */
  --primary-color: #007ad9 !important;

  /* Akzentfarbe, sehr sparsam eingesetzt (Hover-Kanten, Hervorhebungen). */
  --akzent: #e02365;

  /* Neutrale Töne. */
  --text: #16242f;
  --text-leise: #5b6b7a;
  --text-still: #8a97a3;
  --linie: #dde6ee;
  --linie-zart: #eef2f6;
  --flaeche: #f4f8fb;
  --karte: #ffffff;

  /* Höhe der Navigations-Zeile. Bewusst in rem, damit sie nicht an der (je
     Media-Format unterschiedlichen) Schriftgröße hängt und die Leiste in allen
     Formaten gleich hoch bleibt – auch wenn mobil statt der Menüpunkte nur
     Brand und Hamburger sichtbar sind. */
  --navRowHeight: 2.75rem;
  --navPadY: .5rem;
  --navH: calc(var(--navRowHeight) + 2 * var(--navPadY));

  /* Maximale Inhaltsbreite und seitlicher Rand der Karten. */
  --maxBreite: 1700px;
  --seitenRand: 1.5rem;

  /* Schriftgroesse der Seitenueberschrift. Der Einzug der Liga-Zeile leitet
     sich daraus ab: fester Icon-Kasten (1.25em) + dessen Abstand (.5em)
     = 1.75em. Dadurch stimmt die Ausrichtung in jedem Media-Format von selbst
     -- es genuegt, --titelSchrift zu aendern. */
  --titelSchrift: 1.85rem;
  --titelEinzug: calc(var(--titelSchrift) * 1.75);

  /* Radien, Schatten, Übergänge. */
  --radius-s: .4rem;
  --radius-m: .75rem;
  --radius-l: 1.25rem;
  --schatten-s: 0 1px 2px rgba(6, 48, 78, .06), 0 1px 3px rgba(6, 48, 78, .08);
  --schatten-m: 0 2px 4px rgba(6, 48, 78, .05), 0 6px 16px rgba(6, 48, 78, .09);
  --schatten-l: 0 4px 8px rgba(6, 48, 78, .05), 0 14px 34px rgba(6, 48, 78, .12);
  --tempo: .18s ease;
}


/* ==========================================================================
   2. Basis / Reset
   ========================================================================== */

/* Globaler border-box-Reset (kam früher über Bootstrap/BootsFaces; PrimeFlex
   setzt box-sizing nur auf .p-col). Stellt die kompakten Höhen von Tabellen,
   Panels usw. wieder her. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Basis-Schriftgröße bewusst auf der rem-Basis (Browser-Default, i.d.R. 16px):
   Das Saga-Theme bemisst Abstände in rem (z.B. Tabellenzellen mit padding: 1rem),
   die sich durch einen kleineren body-Wert nicht mitverkleinern. Ein px-Wert < 1rem
   ließ die Schrift daher in zu hohen Tabellenzeilen "schwimmen". */
body {
  font-family: 'Muli', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: var(--text);
  background: var(--flaeche);
  /* Die Navigations-Leiste ist fixiert – der Inhalt startet darunter. */
  margin: 0 !important;
  padding-top: var(--navH);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body .ui-widget:not(.pi), body .ui-widget .ui-widget:not(.pi) {
  font-family: 'Muli', sans-serif !important;
}

.ui-widget, .ui-widget .ui-widget {
  font-size: 1em !important;
  line-height: normal !important;
}

/* Sichtbarer Tastatur-Fokus in Vereinsblau – wichtig für Bedienbarkeit. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.navItem:focus-visible,
.navHamburger:focus-visible,
.ui-button:focus-visible {
  outline: 3px solid var(--blau-500);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Animationen zurücknehmen, wenn der Nutzer das so eingestellt hat. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   3. Typografie
   ========================================================================== */

p {
  line-height: 1.6 !important;
}

/* Vereinsname im Kopfbereich. Bewusst kein <h1>: die einzige H1 je Seite ist
   der contentTitle (Regionale SEO). */
.brandTitle {
  font-size: 2.9rem !important;
  line-height: 1.05;
  color: var(--blau-900);
  font-weight: 800 !important;
  font-variation-settings: 'wght' 800;
  letter-spacing: -.02em;
  margin: 0 !important;
}

.subTitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15em;
  text-align: left;
  font-size: 1.05rem !important;
  color: var(--text-leise);
  margin: .5rem 0 0 0 !important;
  text-shadow: none !important;
  font-variation-settings: 'wght' 500 !important;
}

/* Die einzige H1 der Seite. Der blaue Balken links gibt ihr Gewicht, ohne
   dass die Schrift größer werden müsste. */
h2, .contentTitle {
  font-size: var(--titelSchrift) !important;
  font-weight: 700 !important;
  font-variation-settings: 'wght' 700;
  color: var(--blau-900);
  letter-spacing: -.015em;
  line-height: 1.25;
}

.contentTitle {
  margin: .1em 0 .2em 0 !important;
}

/* Jede Seite stellt der Ueberschrift ein Font-Awesome-Icon voran, deren Glyphen
   aber unterschiedlich breit sind (fa-users breit, fa-key schmal). Ein fester
   Kasten -- nach dem Prinzip von fa-fw -- macht den Textanfang auf allen Seiten
   gleich und ist die Grundlage fuer den Einzug der Liga-Zeile darunter. */
.contentTitle > .fas,
.contentTitle > .far,
.contentTitle > .fab {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}

h3 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  font-variation-settings: 'wght' 650;
  color: var(--blau-800);
}

h4 {
  font-size: 1.1rem;
  font-variation-settings: 'wght' 700;
  color: var(--blau-900);
  margin: 0 0 .4em 0;
}

/* Einleitungstext auf der Startseite – gut lesbar, ruhig, mit klarem Kontrast. */
.seoLead {
  color: var(--text-leise);
  font-size: 1.03rem;
  line-height: 1.65;
  margin: 0 0 1.5em 0;
  padding: 1rem 1.15rem;
  background: var(--blau-50);
  border-left: 4px solid var(--blau-500);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.seoLead strong {
  color: var(--blau-800);
  font-variation-settings: 'wght' 700;
}

.impressum-header {
  text-decoration: none;
  color: var(--blau-700) !important;
  font-variation-settings: 'wght' 700;
  border-bottom: 2px solid var(--blau-200);
}

/* Liga-Zeile: beginnt exakt unter dem Text der Ueberschrift, also hinter dem
   Icon -- nicht unter dem Icon. */
.ligaSubTitle {
  display: inline-block;
  margin-left: var(--titelEinzug);
  font-size: 1.02rem;
  font-variation-settings: 'wght' 600;
}


/* ==========================================================================
   4. Layout: Kopfbereich, Inhaltskarte, Fußzeile
   ========================================================================== */

/* Kopfbereich (Logo + Vereinsname) als eigenes, vollflächiges Band.
   Achtung: h:panelGroup ohne layout="block" rendert ein <span> – ohne das
   display:block bliebe das Band ein Inline-Element und der Hintergrund würde
   in Zeilenkästchen zerfallen. */
.fixedtop {
  display: block;
  width: 100%;
  margin: 0 0 0 0;
  padding: 1.6rem var(--seitenRand) 1.4rem;
  background:
      radial-gradient(120% 140% at 0% 0%, var(--blau-100) 0%, rgba(220, 237, 251, 0) 60%),
      linear-gradient(180deg, #ffffff 0%, var(--blau-50) 100%);
  border-bottom: 1px solid var(--linie);
}

/* h:panelGrid rendert eine Tabelle. Sie bekommt dieselbe Maximalbreite wie die
   Inhaltskarte, damit Logo und Vereinsname bündig darüber stehen. */
.title {
  width: min(var(--maxBreite), 100%);
  margin: 0 auto !important;
  border-collapse: collapse;
}

.title td {
  vertical-align: middle;
  padding: 0;
  border: 0;
}

/* Die Logo-Zelle auf ihre Inhaltsbreite schrumpfen, damit die überschüssige
   Breite komplett an die Textzelle geht und der Vereinsname direkt neben dem
   Logo steht (Tabellen verteilen Restbreite sonst auf beide Zellen). */
.title td:first-child {
  width: 1px;
  white-space: nowrap;
}

img.logoImg {
  width: 6.5rem;
  height: auto;
  margin-right: 1.5rem;
  filter: drop-shadow(0 3px 6px rgba(6, 48, 78, .18));
}

/* Weiße Inhaltskarte, mittig, mit ruhigem Schatten. */
.contentpanel {
  max-width: min(var(--maxBreite), calc(100% - 2 * var(--seitenRand)));
  z-index: 0;
  padding: 1.5rem 1.75rem 1.25rem;
  background: var(--karte);
  margin: 1.75rem auto 2.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-m);
}

.contentInfo {
  font-size: .82rem;
  color: var(--text-still);
  margin: 0 .5em;
}

/* Fußzeile als dunkelblaues Abschluss-Band – gibt der Seite einen sauberen,
   professionellen Fuß und trennt sie deutlich vom Inhalt. */
.footerContent {
  max-width: none;
  color: rgba(255, 255, 255, .82);
  font-size: .92rem;
  line-height: 1.7;
  padding: 2.5rem var(--seitenRand) 3rem;
  margin: 0;
  background: linear-gradient(160deg, var(--blau-900) 0%, #04263e 100%);
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.footerContent > .p-grid {
  max-width: var(--maxBreite);
  margin-left: auto;
  margin-right: auto;
}

.footerHeader {
  display: inline-block;
  font-size: 1rem;
  color: #ffffff;
  text-decoration: none;
  font-variant-caps: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variation-settings: 'wght' 700;
  margin-bottom: .35em;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--blau-500);
}

/* Alle Links in der Fußzeile hell – schlägt die globalen Blau-Regeln. */
.footerContent a,
.footerContent .ui-link,
.footerContent .ui-link:link,
.footerContent .ui-link:visited,
.footerContent a.link {
  color: var(--blau-200) !important;
  text-decoration: none !important;
  transition: color var(--tempo);
}

.footerContent a:hover,
.footerContent .ui-link:hover,
.footerContent a.link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.footerContent .ui-widget,
.footerContent .ui-panelgrid,
.footerContent td {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
}

/* Ausgleich für Sprungmarken, damit sie nicht unter der fixierten Leiste landen. */
.jump:before {
  content: "";
  display: block;
  padding-top: calc(var(--navH) + 1rem);
  margin-top: calc(-1 * var(--navH));
}


/* ==========================================================================
   5. Navigation
   ========================================================================== */

.topMenu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1500 !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--navPadY) var(--seitenRand);
  /* Bewusst deckend statt halbtransparent: mobil klappt das ganze Menü in
     dieser Leiste auf und muss den Seiteninhalt sicher verdecken – auf
     backdrop-filter ist dabei kein Verlass. */
  background-color: #ffffff;
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 1px 12px rgba(6, 48, 78, .07);
  font-size: 1rem;
  font-variation-settings: 'wght' 500;
}

/* Brand und Hamburger geben der Kopfzeile ihre Höhe: Sie sind in jedem Format
   sichtbar, die Menüpunkte dagegen nicht. */
.navBrand {
  display: inline-flex;
  align-items: center;
  min-height: var(--navRowHeight);
  color: var(--blau-900) !important;
  font-weight: 800;
  font-variation-settings: 'wght' 800;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  text-decoration: none !important;
  margin-right: 1.25rem;
  padding-right: 1.25rem;
  border-right: 1px solid var(--linie);
  white-space: nowrap;
}

.navBrand:hover {
  color: var(--blau-700) !important;
}

/* Hamburger – nur mobil sichtbar (siehe Media-Query). */
.navToggle {
  display: none;
}

.navHamburger {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--navRowHeight);
  min-width: var(--navRowHeight);
  cursor: pointer;
  font-size: 1.35rem;
  border-radius: var(--radius-s);
  margin-left: auto;
  color: var(--blau-700);
  transition: background-color var(--tempo), color var(--tempo);
}

.navHamburger:hover,
.navToggle:checked ~ .navHamburger {
  background-color: var(--blau-50);
  color: var(--blau-800);
}

.navMenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.navMenu > li {
  position: relative;
}

.navItem {
  display: inline-flex;
  align-items: center;
  padding: .5em .8em;
  color: var(--text) !important;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--tempo), background-color var(--tempo);
}

/* Top-Level-Einträge auf die Zeilenhöhe statt auf ein schriftabhängiges Padding
   festlegen, damit die Leiste nicht an den Font-Metriken hängt (die Einträge in
   den Dropdowns behalten ihr .5em-Padding). */
.navMenu > li > .navItem {
  position: relative;
  min-height: var(--navRowHeight);
  padding-top: 0;
  padding-bottom: 0;
  border-radius: var(--radius-s);
}

/* Blauer Unterstrich als Hover-/Fokus-Signal – ruhiger als ein Farbwechsel
   der ganzen Fläche und passt zum Akzent der Überschriften. */
.navMenu > li > .navItem::after {
  content: "";
  position: absolute;
  left: .8em;
  right: .8em;
  bottom: .15rem;
  height: 3px;
  border-radius: 2px;
  background: var(--blau-600);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--tempo);
}

.navMenu > li:hover > .navItem::after,
.navMenu > li:focus-within > .navItem::after {
  transform: scaleX(1);
}

.navItem:hover,
.hasDrop:hover > .navItem,
.hasDrop:focus-within > .navItem {
  color: var(--blau-700) !important;
  background-color: var(--blau-50);
}

.navIcon {
  width: 1.5em;
  text-align: center;
  margin-right: .4em;
  color: var(--blau-600);
}

.dropCaret {
  width: auto;
  margin-left: .35em;
  font-size: .8em;
  color: var(--text-still);
}

/* Aufklappbares Panel. */
.drop {
  list-style: none;
  margin: 0;
  padding: .4rem;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-l);
  display: none;
  z-index: 1600;
}

.hasDrop:hover > .drop,
.hasDrop:focus-within > .drop {
  display: block;
}

.drop > li {
  position: relative;
}

.dropItem {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.35rem;
  line-height: 1.4;
  padding: .35em .7em;
  border-radius: var(--radius-s);
  white-space: nowrap;
  font-variation-settings: 'wght' 500;
  transition: background-color var(--tempo), color var(--tempo);
}

.dropItem:hover {
  background-color: var(--blau-50);
  color: var(--blau-800) !important;
}

/* Liga-Badge im Menü: auf Textgröße verkleinert und am rechten Rand in einer
   Linie ausgerichtet (das float:right der Composite greift im Flex-Kontext nicht). */
.drop .ligaPic {
  width: auto !important;
  height: auto !important;
  min-width: 3em;
  padding: .05em .5em !important;
  margin-left: auto !important;
  line-height: 1.3 !important;
  text-align: center;
}

/* Trennlinie zwischen Menüpunkten. */
.sep {
  height: 0;
  margin: .35rem .5rem;
  border-top: 1px solid var(--linie-zart);
}

/* Verschachteltes Untermenü (Staffeln) klappt seitlich auf. */
.dropNested {
  top: 0;
  left: 100%;
}

/* Logout rechtsbündig. */
.navRight {
  margin-left: auto;
}

.logout .navItem,
.logout {
  color: #b00020 !important;
}

.logout:hover {
  color: #e0002a !important;
}

.logout .navIcon {
  color: inherit;
}


/* ==========================================================================
   6. Utility-Klassen (Bestand)
   ========================================================================== */

.fixedWidthMedium {
  width: 1.5em;
}

.marginRight {
  margin-right: .5em;
}

.marginLeft {
  margin-left: .5em;
}

.marginTop {
  margin-top: .5em;
}

.marginBottom {
  margin-bottom: .5em;
}

.marginBottomLg {
  margin-bottom: 1em;
}

.marginLeftLg {
  margin-left: 1em;
}

.teamImage {
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-m);
}

.photoDeciderBig {
  display: none !important;
}

.photoDeciderThumb {
  display: inherit !important;
}

.left {
  text-align: left;
}

.red {
  color: red;
}

.bold {
  font-weight: bold;
  font-variation-settings: 'wght' 700;
}

.right {
  text-align: right;
}

.spacingMarginRight {
  margin-right: .3em !important;
}

.spacingMarginBottom {
  margin-bottom: .3em !important;
}

.alignBaseline {
  vertical-align: baseline;
}

/* Inline-Element (z.B. der Maps-Button im Kasten "Naechster Spieltag") neben
   mehrzeiligem Fliesstext: Ohne Zutun sitzt es auf der Grundlinie und ragt nach
   oben ueber die Zeile hinaus. vertical-align setzt es an den Zeilenanfang, der
   Abstand schiebt es um den halben Durchschuss plus Ascender-Ueberhang nach
   unten -- damit liegt die Oberkante auf Hoehe der Grossbuchstaben (gemessen
   bei line-height 1.6). */
.alignTextTop {
  vertical-align: top;
  margin-top: .4em;
}

/* Bewusst ohne eigene Farbe: Die Klasse ist eine reine Groessen-/Gewichts-
   Auszeichnung und wird ausschliesslich in der blauen Kopfzeile der Archiv-
   Tabellen verwendet (die Liste der eigenen Teams unter dem Staffelnamen).
   Dort muss sie die helle Schriftfarbe der Kopfzeile erben - eine graue Farbe
   stuende hier grau auf blau und waere kaum zu lesen. */
.lightFont {
  font-weight: 300 !important;
  font-size: .8em !important;
}

.resultEntry {
  width: 4em;
}

.lightShadow {
  box-shadow: var(--schatten-s);
}

.lightGreen {
  color: #7cc47c;
}

.lightRed {
  color: #f0a0a0;
}

.boxed-symbol {
  width: .7em;
  text-align: center;
}

/* Eigene Teams in Tabellen deutlich, aber ruhig hervorheben: getönte Zellen … */
.observedTeam {
  background-color: var(--blau-50) !important;
}

/* … plus ein blauer Balken an der Team-Zelle.
   Achtung, zwei Auszeichnungs-Muster im Markup:
   - Spielplan-Tabellen (Heimspiele, Spieltage, Staffel-/Team-Detail) markieren
     nur die Heim- bzw. Gast-Spalte – dort ist das genau eine Zelle.
   - Tabellenstände (Team-Detail, Archiv) markieren jede Spalte der Zeile, damit
     die ganze Zeile getönt ist. Ohne Gegenmaßnahme stünde der Balken dort an
     allen sieben Zellen; er gehört aber einmal an die Team-Spalte – dieselbe
     Zelle, die auch die blauen Herzchen trägt. Team ist dort die zweite Spalte. */
td.observedTeam {
  box-shadow: inset 4px 0 0 0 var(--blau-600);
}

td.observedTeam + td.observedTeam {
  box-shadow: none;
}

tr:has(> td.observedTeam + td.observedTeam) > td.observedTeam:first-child {
  box-shadow: none;
}

tr:has(> td.observedTeam + td.observedTeam) > td.observedTeam:nth-child(2) {
  box-shadow: inset 4px 0 0 0 var(--blau-600);
}

.dunkles-grau {
  color: var(--text) !important;
}

.blau {
  color: var(--blau-700) !important;
}

.grau {
  color: var(--text-still) !important;
}

.hellgrau {
  color: #d7dee5 !important;
}

.gruen {
  color: #2f9e44 !important;
}

.rot {
  color: #e03131 !important;
}

.orange {
  color: #f08c00 !important;
}

.magenta {
  color: var(--akzent) !important;
}

.rotate20uzs {
  transform: rotate(30deg);
}

.rotate20guzs {
  transform: rotate(-30deg);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.homeInfo {
  float: right;
  font-size: .6em;
  position: relative;
  right: -.3em;
  top: -.1em;
}

.defektInfo {
  float: right;
  position: relative;
  top: .2em;
}

.zentriertInTabelle {
  text-align: center;
}

.onSmallDevices {
  display: none;
}

.flex-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tabViewContent {
  border-right: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  padding: 1rem;
}

/* Links. */
div.ui-widget-content span a,
div.ui-widget-content span a:hover,
a.link,
a.link:hover,
body .ui-commandlink,
body .ui-commandlink:hover,
body .ui-link,
body .ui-link:hover {
  color: var(--blau-700) !important;
}

a.link {
  text-decoration: none !important;
}

a.link:hover {
  text-decoration: underline !important;
}

a.teamLink {
  font-variant: small-caps;
  color: #37485a !important;
  font-variation-settings: 'wght' 700;
  line-height: normal !important;
  text-decoration: none !important;
  transition: color var(--tempo);
}

a.teamLink:hover {
  color: var(--blau-700) !important;
  line-height: normal !important;
}

/* Badges / Tags. */
.badge-blau {
  background-color: var(--blau-600) !important;
  color: #fff !important;
}

.badge-hellblau {
  color: var(--blau-700) !important;
  background-color: var(--blau-50) !important;
}

.badge-gruen {
  background-color: #2f9e44 !important;
  color: #fff !important;
}

.badge-grau {
  background-color: #93a2b0 !important;
  color: #fff !important;
}

.ligaPic {
  width: 4em;
  background-color: var(--blau-50) !important;
  border: 1px solid var(--blau-200) !important;
}

.tag-style {
  height: 1.5rem !important;
  border-radius: 999px !important;
  font-weight: normal !important;
  letter-spacing: .02em;
}

.ligaPicFloat {
  float: right;
  position: relative;
  right: -.5em;
}

/* Animationen. */
.animateBlauWeiss {
  animation-name: blauWeissAnimate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes blauWeissAnimate {
  0% {
    color: #b6c2ce
  }
  100% {
    color: var(--blau-700)
  }
}

.animateRotate:hover {
  animation: doRotate 1s linear infinite;
  transform: rotate(0);
}

@keyframes doRotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1turn);
  }
}


/* ==========================================================================
   7. PrimeFaces-Anpassungen
   ========================================================================== */

/* --- Panel --- */
.ui-panel {
  border: 1px solid var(--linie) !important;
  border-radius: var(--radius-m) !important;
  overflow: hidden;
  box-shadow: var(--schatten-s);
}

.ui-panel-titlebar {
  background: linear-gradient(135deg, var(--blau-700) 0%, var(--blau-800) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-variation-settings: 'wght' 700;
  letter-spacing: .01em;
}

.ui-panel .ui-panel-content {
  flex: auto;
  border: 0 !important;
}

/* --- TabView --- */
body .ui-tabs {
  border: 0 !important;
  background: transparent !important;
}

body .ui-tabs .ui-tabs-nav {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--linie) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: var(--radius-s) var(--radius-s) 0 0 !important;
  margin: 0 !important;
  transition: background-color var(--tempo), border-color var(--tempo);
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header a {
  color: var(--text-leise) !important;
  font-variation-settings: 'wght' 600;
  padding: .7rem 1.1rem !important;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-hover {
  background: var(--blau-50) !important;
  border-bottom-color: var(--blau-200) !important;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active,
body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-active {
  background: var(--blau-50) !important;
  border-bottom-color: var(--blau-600) !important;
  color: var(--blau-700);
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a {
  color: var(--blau-800) !important;
  font-variation-settings: 'wght' 800;
}

body .ui-tabs .ui-tabs-panels {
  background: transparent !important;
  border: 0 !important;
  padding: 1.1rem 0 0 0 !important;
}

/* --- DataTable --- */
body .ui-datatable .ui-datatable-header {
  background: linear-gradient(135deg, var(--blau-700) 0%, var(--blau-800) 100%) !important;
  color: #fff !important;
  text-align: center;
  border: 0 !important;
  border-radius: var(--radius-m) var(--radius-m) 0 0 !important;
  font-variation-settings: 'wght' 700;
  letter-spacing: .01em;
}

body .ui-datatable table {
  border-collapse: separate;
  border-spacing: 0;
}

body .ui-datatable thead th {
  background: var(--blau-50) !important;
  color: var(--blau-900) !important;
  border-color: var(--linie) !important;
  font-variation-settings: 'wght' 700;
  text-transform: none;
  letter-spacing: .01em;
}

body .ui-datatable .ui-datatable-data > tr {
  transition: background-color var(--tempo);
}

body .ui-datatable .ui-datatable-data > tr > td {
  border-color: var(--linie-zart) !important;
}

/* Dezente Zebra-Streifen für lange Tabellen und Spielpläne. */
body .ui-datatable .ui-datatable-data > tr.ui-datatable-even {
  background-color: #fbfdfe !important;
}

body .ui-datatable .ui-datatable-data > tr:hover {
  background-color: var(--blau-50) !important;
}

/* --- Formular-Elemente --- */
body .ui-inputfield {
  font-size: 1rem !important; /* >= 16px: verhindert Auto-Zoom auf iOS */
  border-radius: var(--radius-s) !important;
}

body .ui-inputfield:focus {
  border-color: var(--blau-600) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 217, .18) !important;
}

body .ui-slider .ui-slider-handle {
  border-color: var(--blau-600) !important;
}

body .ui-slider .ui-slider-range {
  background: var(--blau-600) !important;
}

body .ui-chkbox .ui-chkbox-box {
  width: 1.5em !important;
  height: 1.5em !important;
}

body .ui-selectbooleanbutton.ui-state-active,
body .ui-selectonebutton > .ui-button.ui-state-active,
body .ui-selectmanybutton > .ui-button.ui-state-active,
body .ui-chkbox .ui-chkbox-box.ui-state-active {
  border-color: var(--blau-600) !important;
  background: var(--blau-600) !important;
}

/* --- Buttons --- */
body .ui-button {
  background-color: var(--blau-600);
  border-color: var(--blau-600);
  border-radius: var(--radius-s);
  min-height: 2.75rem; /* komfortable Tap-Fläche */
  font-variation-settings: 'wght' 650;
  transition: background-color var(--tempo), box-shadow var(--tempo), transform var(--tempo);
}

/* Buttons ohne Beschriftung: Das Theme gibt ihnen nur 2.357rem Breite, unsere
   Mindesthoehe aber 2.75rem - das ergibt ein schmales Rechteck. Quadratisch
   sieht der Icon-Button richtig aus und ist zugleich eine volle Tap-Flaeche
   (z.B. der Maps-Button im Kasten "Naechster Spieltag"). */
body .ui-button.ui-button-icon-only {
  width: 2.75rem;
}

/* Das Theme setzt "body .ui-button { margin: 0 }" und ist damit spezifischer
   als die Abstands-Utilities -- fuer Buttons muessen sie deshalb hier noch
   einmal mit passender Spezifitaet stehen. */
body .ui-button.marginLeftLg {
  margin-left: 1em;
}

body .ui-button.alignTextTop {
  margin-top: .4em;
}

body .ui-button:enabled:hover {
  background-color: var(--blau-700);
  border-color: var(--blau-700);
  box-shadow: var(--schatten-s);
}

body .ui-button:enabled:active {
  transform: translateY(1px);
}

/* --- Separator / Messages --- */
body .ui-separator {
  border-color: var(--linie) !important;
}

/* Meldungen auf dieselbe Breite wie die Inhaltskarte bringen – der body hat
   keine seitlichen Ränder mehr, sonst klebten sie am Bildschirmrand.
   :not(:empty) sorgt dafür, dass der Abstand nur entsteht, wenn wirklich eine
   Meldung gerendert wurde (p:messages rendert auch leer ein div). */
body .ui-messages {
  max-width: min(var(--maxBreite), calc(100% - 2 * var(--seitenRand)));
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-m) !important;
}

body .ui-messages:not(:empty) {
  margin-top: 1.5rem;
}

/*body .ui-datatable .ui-datatable-data > tr > td {*/
/*  padding: .4em !important;*/
/*}*/


/* ==========================================================================
   8. Fremd-Bibliotheken
   ========================================================================== */

/* SmartPhoto. */
.smartphoto {
  z-index: 1550 !important;
}

/* JPlot. */
table.jqplot-table-legend, table.jqplot-cursor-legend {
  font-size: .9em !important;
  border: 0 !important;
}

.jqplot-data-label {
  font-size: .75em !important;
}

div.jqplot-table-legend-swatch-outline {
  border: 0 !important;
  margin-right: .2em !important;
}


/* ==========================================================================
   9. Media-Anpassungen
   ========================================================================== */

/* --- Tablet und Smartphone: Hamburger-Navigation --- */
@media screen and (max-width: 991px) {
  :root {
    --seitenRand: 1rem;
    --titelSchrift: 1.55rem;
    /* Größere Zeilenhöhe: mobil sind Brand und Hamburger die einzigen
       Bedienelemente der Leiste und brauchen eine komfortable Tap-Fläche. */
    --navRowHeight: 2.75rem;
  }

  body {
    font-size: 1rem !important;
  }

  .fixedtop {
    padding: 1.2rem var(--seitenRand) 1.1rem;
  }

  .brandTitle {
    font-size: 2rem !important;
  }

  .subTitle {
    font-size: .95rem !important;
  }

  .ligaSubTitle {
    font-size: .95rem;
  }

  .topMenu {
    font-size: 1rem;
    padding: var(--navPadY) var(--seitenRand);
    /* Kräftigerer Schatten, damit die aufgeklappte Menü-Fläche sich klar vom
       darunter liegenden Inhalt abhebt. */
    box-shadow: 0 6px 18px rgba(6, 48, 78, .13);
  }

  .navBrand {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
  }

  .navHamburger {
    display: inline-flex;
  }

  .navMenu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    width: 100%;
    margin-top: var(--navPadY);
    padding-top: .35rem;
    border-top: 1px solid var(--linie);
    /* Bei vielen Teams wird das Menü länger als der Bildschirm. */
    max-height: calc(100vh - var(--navH) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .navToggle:checked ~ .navMenu {
    display: flex;
  }

  /* Volle Zeilenbreite und komfortable Tap-Höhe statt Hover-Optik. */
  .navMenu > li > .navItem {
    width: 100%;
    min-height: 3rem;
    padding-left: .25rem;
    border-radius: var(--radius-s);
  }

  .navMenu > li > .navItem::after {
    display: none;
  }

  .navMenu > li + li {
    border-top: 1px solid var(--linie-zart);
  }

  .hasDrop > .navItem .dropCaret {
    margin-left: auto;
  }

  /* Dropdowns auf Mobilgeräten inline statt schwebend. */
  .drop {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--blau-100);
    border-radius: 0;
    min-width: 0;
    padding: .15rem 0 .35rem 0;
    margin-left: 1.1rem;
  }

  .dropItem {
    min-height: 2.75rem;
    white-space: normal;
  }

  .dropNested {
    left: 0;
  }

  .navRight {
    margin-left: 0;
  }

  img.logoImg {
    width: 4.6rem;
    margin-right: 1rem;
  }

  .ui-panel .ui-panel-content {
    padding: .75rem !important;
  }

  /* Karten randlos über die volle Breite – mehr Platz für Tabellen. */
  .contentpanel {
    max-width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 1rem var(--seitenRand) .75rem;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: var(--schatten-s);
  }

  .seoLead {
    padding: .85rem 1rem;
    font-size: 1rem;
  }

  .footerContent {
    padding: 2rem var(--seitenRand) 2.5rem;
  }

  body .ui-tabs .ui-tabs-nav li.ui-tabs-header a {
    padding: .6rem .8rem !important;
  }

  .resultEntry {
    width: auto;
  }

  .photoDeciderBig {
    display: inherit !important;
  }

  .photoDeciderThumb {
    display: none !important;
  }
}

/* --- Smartphone --- */
@media screen and (max-width: 640px) {
  :root {
    --titelSchrift: 1.3rem;
  }

  /* Reflow-Tabellen: PrimeFaces stapelt die Zellen untereinander. Damit auf
     dem Smartphone erkennbar bleibt, wo ein Spiel aufhört und das nächste
     anfängt, wird jede Zeile zu einer eigenen Karte. */
  body .ui-datatable-reflow .ui-datatable-data > tr.ui-widget-content {
    display: block;
    overflow: hidden; /* umschließt die gefloateten Zellen */
    margin: 0 0 .6rem 0;
    background: var(--karte) !important;
    border: 1px solid var(--linie) !important;
    border-radius: var(--radius-m);
  }

  /* Karte einer eigenen Mannschaft einfärben. Die Markierung sitzt im Markup an
     den Zellen, nicht an der Zeile – daher über :has() auf die Zeile hoch. */
  body .ui-datatable-reflow .ui-datatable-data > tr:has(> td.observedTeam) {
    background: var(--blau-50) !important;
    border-color: var(--blau-200) !important;
  }

  body .ui-datatable-reflow .ui-datatable-data > tr > td {
    padding: .4em .6em !important;
  }

  body .ui-datatable-reflow .ui-column-title {
    color: var(--text-leise);
    font-variation-settings: 'wght' 600;
  }

  /* Etwas Luft zwischen Tabellen-Kopf und der ersten Karte. */
  body .ui-datatable-reflow .ui-datatable-header {
    margin-bottom: .6rem;
  }

  .brandTitle {
    font-size: 1.6rem !important;
    letter-spacing: -.015em;
  }

  .subTitle {
    font-size: .85rem !important;
    margin-top: .3rem !important;
  }

  .ligaSubTitle {
    font-size: .85rem;
  }

  .onSmallDevices {
    display: block;
  }

  img.logoImg {
    width: 3.6rem;
    margin-right: .75rem;
  }

  .ligaPicFloat {
    float: right;
    position: relative;
    right: -.2em;
  }

  .homeInfo {
    float: right;
    font-size: .6em;
    position: relative;
    right: 0.5em;
    top: -.1em;
  }

  .defektInfo {
    float: right;
    position: relative;
    right: .3em;
    top: .2em;
  }

  /* Tabs auf schmalen Geräten horizontal scrollbar statt umbrechend – sonst
     rutschen sie untereinander und die Tab-Leiste wird unnötig hoch.
     Das !important ist nötig, um sich gegen die Umbruch-Regel des Themes
     durchzusetzen. */
  body .ui-tabs .ui-tabs-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
    flex: 0 0 auto;
  }

  /** SelectOneButton-Fixes **/
  body .ui-selectonebutton > div.ui-button:not(:last-child),
  body .ui-selectmanybutton > div.ui-button:not(:last-child) {
    border-right-width: 0;
    border-bottom-width: 1px;
  }

  body .ui-selectonebutton > div.ui-button:first-child,
  body .ui-selectmanybutton > div.ui-button:first-child {
    border-radius: 4px 0 0 4px;
  }

  body .ui-selectonebutton > div.ui-button,
  body .ui-selectmanybutton > div.ui-button {
    border-radius: 0;
  }

  body .ui-selectonebutton > div.ui-button:last-child,
  body .ui-selectmanybutton > div.ui-button:last-child {
    border-radius: 0 4px 4px 0;
  }
}