/* ===== FONTS ===== */
@font-face {
  font-family: 'Archivo Narrow';
  src: url('../Fonts/ArchivoNarrow-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('../Fonts/ArchivoNarrow-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Source Sans 3 — lokal gehostet (Site-Review T-P1/D2), Variable Font 400–800 */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../Fonts/SourceSans3-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../Fonts/SourceSans3-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../Fonts/SourceSans3-Italic-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../Fonts/SourceSans3-Italic-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== DESIGN TOKENS ===== */
:root {
  --ufo-blue:      #265ec5;
  --ufo-blue-deep: #1a3f86;
  --ufo-blue-soft: #eaf0fb;
  --ufo-ink:       #0d1b3a;
  --ufo-paper:     #ffffff;
  --ufo-paper-2:   #f6f7fa;
  --ufo-line:      #e1e5ec;
  --ufo-blue-line: #d6e0f2;       /* helle Blau-Kante (Badges, hl-Karten, Hover) */
  --ufo-blue-line-hover: #c4d3ee; /* Team-Card Hover-Rahmen */
  --ufo-live:      #44d68c;       /* Saison-läuft-Punkt */
  --ufo-muted:     #6b7280;
  --ufo-win:       #1c7c4f;
  --ufo-loss:      #b13434;
  --ufo-dark:      #212121;
}

/* ===== TYPOGRAPHY ===== */
body {
  font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  line-height: 1.2;
}

/* Archivo Narrow auf Zahlen-/Namen-Elementen der Karten und Listen
   (Design-Vorgabe, Site-Review D1 — Mock nutzt --font-heading auf diesen Elementen;
   .ig-handle ist bereits weiter unten abgedeckt) */
.result-card .badge-team, .rc-team, .rc-score,
.matchday .label, .matchday .date-big, .matchday .hall, .matchday .hd,
.matchday .pair .name, .matchday .time, .matchday .badge-team,
.team-card .tc-title, .team-card .tc-liga, .team-card .num,
.m-team .name, .m-date .m,
.filter-group .opt,
.sp-head .eyebrow,
.team-strip-badge {
  font-family: 'Archivo Narrow', system-ui, sans-serif;
}

/* ===== FOOTER (Site-Review D3; Mock: VSG_UFO_Startseite_offline_-neue Ergebnisse.html) ===== */
.site-footer {
  background: var(--ufo-dark);
  color: #cfcfcf;
  margin-top: 3rem;
  padding: 2.5rem 0 1.25rem;
}
.site-footer .brand img { height: 42px; }
.site-footer .brand img.ufo-invert { filter: brightness(0) invert(1); }
.site-footer .brand,
.site-footer .brand .brand-text strong { color: #fff; }
.site-footer .brand .brand-text small { color: rgba(255, 255, 255, .55); }
.site-footer .about { color: rgba(255, 255, 255, .55); font-size: .9rem; max-width: 36rem; }
.site-footer a { color: #e5e5e5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h6, .site-footer .h6 { color: #fff; letter-spacing: .12em; }
.site-footer .legal {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
}
.site-footer .socials { display: flex; gap: .5rem; }
.site-footer .socials a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}
.site-footer .socials a svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer .socials a:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.site-footer .socials a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ===== STICKY HEADER ===== */
.ufo-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--ufo-line);
  transition: box-shadow .25s;
}
.ufo-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 3px;
  background: var(--ufo-blue);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .25s;
  pointer-events: none;
}
.ufo-header.is-scrolled { box-shadow: 0 6px 18px -14px rgba(13,27,58,.4); }
.ufo-header.is-scrolled::after { transform: scaleY(1); }

/* Brand */
.ufo-brand, .brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: var(--ufo-ink);
}
.ufo-logo, .brand img { width: auto; height: 48px; max-height: 48px; display: block; }
.ufo-brand-text, .brand .brand-text { line-height: 1; }
.ufo-brand-text strong,
.brand .brand-text strong { font-family: 'Archivo Narrow', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: .01em; color: var(--ufo-ink); }
.ufo-brand-text small,
.brand .brand-text small { display: block; font-size: .72rem; color: var(--ufo-muted); margin-top: .25rem; text-transform: uppercase; letter-spacing: .14em; }

/* Burger */
.btn-burger {
  color: var(--ufo-ink); border: 1px solid var(--ufo-line); background: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; padding: .55rem .9rem;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-burger i { font-size: 1.1rem; }
.btn-burger:hover, .btn-burger:focus { color: #fff; background: var(--ufo-blue); border-color: var(--ufo-blue); }
.btn-burger .lbl { display: none; font-size: .95rem; }
@media (min-width: 768px) { .btn-burger .lbl { display: inline; } }

/* ===== OFFCANVAS NAV ===== */
#navOffcanvas { max-width: 22rem; }
.ufo-offcanvas-header {
  background: var(--ufo-dark);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ufo-offcanvas-header .brand img.ufo-invert { filter: brightness(0) invert(1); }
.ufo-offcanvas-header .btn-close { filter: invert(1) grayscale(1); opacity: .9; }
.ufo-offcanvas-header .brand .brand-text strong,
.ufo-offcanvas-header .ufo-brand-text strong { color: #fff; }
.ufo-offcanvas-header .brand .brand-text small,
.ufo-offcanvas-header .ufo-brand-text small { color: rgba(255,255,255,.7); }
.ufo-nav-accordion .accordion-item { border: none; border-bottom: 1px solid var(--ufo-line); }
.ufo-nav-accordion .accordion-button {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600; font-size: 1.05rem;
  color: var(--ufo-ink); background: var(--ufo-paper);
  padding: 1rem 1.25rem;
}
.ufo-nav-accordion .accordion-button:not(.collapsed) {
  color: var(--ufo-blue-deep); background: #fff;
  box-shadow: inset 0 -1px 0 var(--ufo-line);
}
.ufo-nav-accordion .accordion-button:focus { box-shadow: none; }
/* Sichtbarer Fokus für Tastaturnutzung (Site-Review T-A2) */
.ufo-nav-accordion .accordion-button:focus-visible,
.filter-group .opt:focus-visible {
  outline: 2px solid var(--ufo-blue);
  outline-offset: -2px;
}
.accordion-inner .accordion-item { border: none; border-bottom: 1px solid var(--ufo-line); }
.accordion-inner .accordion-button {
  font-size: .95rem; font-weight: 500;
  color: var(--ufo-ink); background: var(--ufo-paper-2);
  padding: .75rem 1.25rem .75rem 2rem;
}
.accordion-inner .accordion-button:not(.collapsed) {
  background: var(--ufo-paper-2); color: var(--ufo-blue-deep); box-shadow: none;
}
.accordion-inner .accordion-body { background: var(--ufo-paper-2); padding: 0 0 .5rem; }
.nav-sublinks { margin: 0; padding: .25rem 0; list-style: none; }
.nav-sublinks li { margin: 0; }
.nav-sublink {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1.25rem .65rem 2.75rem;
  color: var(--ufo-ink); text-decoration: none; font-size: .95rem;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.nav-sublink:hover, .nav-sublink.active {
  background: var(--ufo-blue-soft); border-left-color: var(--ufo-blue); color: var(--ufo-blue-deep);
}
.nav-sublink i { width: 1.1rem; text-align: center; color: var(--ufo-blue); font-size: .85rem; }
.nav-flat-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  color: var(--ufo-ink); text-decoration: none;
  font-family: 'Archivo Narrow', sans-serif; font-weight: 600; font-size: 1.05rem;
  /* Match accordion buttons (1.2 via h2.accordion-header); body line-height 1.6
     would make these links visibly taller */
  line-height: 1.2;
  border-bottom: 1px solid var(--ufo-line);
  background: #fff;
  transition: background .15s, color .15s;
}
.nav-flat-link:hover, .nav-flat-link.active { background: var(--ufo-blue-soft); color: var(--ufo-blue-deep); }
.nav-flat-link i { color: var(--ufo-muted); font-size: .8rem; }
/* Level-2 links without children: look like inner accordion buttons (indented, grey) */
.accordion-inner > .nav-flat-link {
  background: var(--ufo-paper-2);
  font-size: .95rem;
  font-weight: 500;
  padding: .75rem 1.25rem .75rem 2rem;
}
.accordion-inner > .nav-flat-link:hover,
.accordion-inner > .nav-flat-link.active { background: var(--ufo-blue-soft); }
/* Dezente Info-Fußzeile am Menüende (Site-Review D5) — bewusst ohne eigene Linie,
   die Abgrenzung liefert bereits der border-bottom des letzten Menü-Items */
.nav-foot-note {
  padding: .85rem 1.25rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ufo-muted);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.nav-foot-note i {
  color: var(--ufo-blue);
  opacity: .65;
  font-size: .82rem;
  margin-top: .18rem;
  flex-shrink: 0;
}

/* ===== HERO (STARTSEITE) ===== */
.home-hero {
  background: #fff;
  border: 1px solid var(--ufo-line);
  border-radius: .75rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.home-hero .photo {
  position: relative;
  aspect-ratio: 16/4;
  min-height: 240px;
  overflow: hidden;
  background: var(--ufo-paper-2);
}
.home-hero .photo picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero .photo picture img,
.home-hero .photo > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%; display: block;
}
.home-hero .photo .meta-tl {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  background: rgba(13,27,58,.82); color: #fff; backdrop-filter: blur(6px);
  padding: .4rem .7rem; border-radius: 4px;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  display: inline-flex; align-items: center; gap: .45rem;
}
.home-hero .photo .meta-tl .dot {
  width: .45rem; height: .45rem; background: var(--ufo-live);
  border-radius: 50%; box-shadow: 0 0 0 3px rgba(68,214,140,.25); flex-shrink: 0;
}
.home-hero .photo .badge-tr {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  background: var(--ufo-blue); color: #fff;
  padding: .4rem .75rem; border-radius: 4px;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .4rem;
}
/* Mobile: flat band close to the editorial banner crop instead of 3/2, which
   cropped and upscaled the wide banner. Badges bottom left/right so they never
   overlap. Must come AFTER the badge base rules (top: 1rem). */
@media (max-width: 767.98px) {
  /* min-height: 0, see team hero: min-height + aspect-ratio would widen the box
     beyond the card and cut off right-anchored badges */
  .home-hero .photo { aspect-ratio: 16/5; min-height: 0; }
  /* Both badges at the bottom, like the team hero */
  .home-hero .photo .meta-tl { top: auto; bottom: .75rem; left: .75rem; font-size: .65rem; padding: .3rem .55rem; }
  .home-hero .photo .badge-tr {
    top: auto; bottom: .75rem; right: .75rem;
    font-size: .68rem; padding: .3rem .55rem;
    max-width: calc(100% - 1.5rem);
  }
}
.home-hero .info {
  padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
@media (min-width: 992px) {
  .home-hero .info { padding: 1.75rem 2rem; flex-direction: row; align-items: flex-end; gap: 2rem; }
}
.home-hero .info .copy { min-width: 0; flex: 1 1 auto; }
.home-hero .info h1 {
  font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  line-height: 1.05; margin: 0 0 .5rem; color: var(--ufo-ink); letter-spacing: -.01em;
}
.home-hero .info .lead { color: var(--ufo-muted); font-size: 1rem; margin: 0; max-width: 38em; line-height: 1.5; }
.home-hero .info .stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ufo-line); border-radius: .55rem; overflow: hidden;
  width: 100%; flex: 0 0 auto;
}
@media (min-width: 992px) { .home-hero .info .stat-strip { display: flex; width: auto; } }
.home-hero .info .stat-strip .cell {
  padding: .7rem .55rem;
  border-right: 1px solid var(--ufo-line);
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  background: var(--ufo-paper-2); min-width: 0;
}
@media (min-width: 992px) { .home-hero .info .stat-strip .cell { min-width: 92px; padding: .7rem 1.1rem; } }
.home-hero .info .stat-strip .cell:last-child { border-right: 0; }
.home-hero .info .stat-strip .cell .num {
  font-size: 1.25rem; font-weight: 800; color: var(--ufo-ink);
  line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.home-hero .info .stat-strip .cell .lbl {
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ufo-muted); margin-top: .4rem; font-weight: 600; text-align: center;
}

/* ===== SECTION TITLE ===== */
.section-title {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 2.25rem 0 1rem;
}
.section-title h2 {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; margin: 0; color: var(--ufo-ink);
  display: flex; align-items: center; gap: .6rem;
}
.section-title h2::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  background: var(--ufo-blue); transform: translateY(1px); flex-shrink: 0;
}
.section-title a { font-size: .85rem; color: var(--ufo-blue); text-decoration: none; font-weight: 500; white-space: nowrap; }
.section-title a:hover { color: var(--ufo-blue-deep); text-decoration: underline; }

/* ===== MATCHDAY ===== */
.matchday {
  background: #fff; border: 1px solid var(--ufo-line); border-radius: .75rem;
  overflow: hidden; display: grid; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .matchday { grid-template-columns: minmax(0, 280px) 1fr; } }
.matchday .md-side {
  background: linear-gradient(135deg, var(--ufo-blue) 0%, var(--ufo-blue-deep) 100%);
  color: #fff; padding: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem; justify-content: center;
  position: relative; overflow: hidden;
}
.matchday .md-side::after {
  content: ""; position: absolute; right: -30%; bottom: -30%;
  width: 75%; aspect-ratio: 1/1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.matchday .md-side .label {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.7);
}
.matchday .md-side .date-big {
  font-weight: 800; line-height: 1; margin-top: .25rem;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .6rem;
}
.matchday .md-side .date-big .d { font-size: 3.2rem; }
.matchday .md-side .date-big .my {
  display: flex; flex-direction: column; gap: .1rem;
  line-height: 1.1; font-size: 1rem; font-weight: 700;
}
.matchday .md-side .date-big .my .wd { font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.7); }
.matchday .md-side .hall {
  margin-top: .5rem; font-size: .92rem; font-weight: 600;
  display: flex; align-items: center; gap: .4rem;
}
.matchday .md-side .hall i { color: rgba(255,255,255,.7); }
.matchday .md-side .anfahrt {
  margin-top: .85rem; align-self: flex-start;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25);
  padding: .4rem .8rem; border-radius: .4rem; font-size: .85rem; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
  transition: background-color .2s ease;
}
.matchday .md-side .anfahrt:hover { background: rgba(255,255,255,.25); }
.matchday .md-list {
  padding: 1rem 1.25rem 1.25rem;
  display: flex; flex-direction: column; gap: .6rem; min-width: 0;
}
.matchday .md-list .hd {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ufo-muted); font-weight: 600; margin: .25rem 0 .15rem;
}
.matchday .game {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .8rem;
  padding: .65rem .8rem; border: 1px solid var(--ufo-line); border-radius: .5rem;
  background: var(--ufo-paper-2);
}
.matchday .game .badge-team {
  background: var(--ufo-blue-soft); color: var(--ufo-blue-deep);
  border: 1px solid var(--ufo-blue-line);
  font-weight: 700; font-size: .72rem; letter-spacing: .04em;
  padding: .3rem .5rem; border-radius: 4px;
  white-space: nowrap;
}
.matchday .game .pair { min-width: 0; font-size: .92rem; }
.matchday .game .pair .name { font-weight: 600; color: var(--ufo-ink); }
.matchday .game .pair .name.us { color: var(--ufo-blue-deep); font-weight: 800; }
.matchday .game .pair .vs { color: var(--ufo-line); margin: 0 .3rem; font-weight: 600; font-size: .85rem; }
.matchday .game .time {
  font-weight: 700; font-size: .95rem; color: var(--ufo-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ===== RESULT CARDS ===== */
.results-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 576px) { .results-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .results-grid { grid-template-columns: repeat(3, 1fr); } }
.result-card {
  background: #fff; border: 1px solid var(--ufo-line); border-radius: .6rem;
  padding: .85rem 1rem .95rem 1rem;
  position: relative; display: flex; flex-direction: column; gap: .5rem;
}
.result-card .rc-top {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .72rem;
}
.result-card .rc-top .badge-team {
  background: var(--ufo-blue-soft); color: var(--ufo-blue-deep);
  border: 1px solid var(--ufo-blue-line);
  font-weight: 700; padding: .2rem .45rem; border-radius: 3px; letter-spacing: .04em;
  white-space: nowrap;
}
.result-card .rc-top .date { color: var(--ufo-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
/* Spiele-Container: ein oder mehrere Spiele je Matchday */
.result-card .rc-games { display: flex; flex-direction: column; gap: .7rem; }
/* Jedes Spiel bekommt seine eigene farbige Akzentlinie links (3px, rundum 3px gerundet).
   Als Pseudo-Element statt border-left: border-radius würde die Border an den Enden
   nach innen verjüngen — das Pseudo-Element bleibt auf voller Höhe sauber gerundet. */
.result-card .rc-game {
  position: relative;
  display: flex; flex-direction: column; gap: .3rem;
  padding-left: calc(.8rem + 3px);
}
.result-card .rc-game::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 3px; background: var(--ufo-line);
}
.result-card .rc-game.win::before  { background: var(--ufo-win); }
.result-card .rc-game.loss::before { background: var(--ufo-loss); }
.result-card .rc-game.win  .rc-score { color: var(--ufo-win); }
.result-card .rc-game.loss .rc-score { color: var(--ufo-loss); }
.result-card .rc-body {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: .55rem;
}
.result-card .rc-team {
  font-weight: 600; color: var(--ufo-ink); font-size: .88rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}
.result-card .rc-team.us { color: var(--ufo-blue-deep); font-weight: 800; }
.result-card .rc-team.home { text-align: right; }
.result-card .rc-team.away { text-align: left; }
.result-card .rc-score {
  font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  text-align: center; min-width: 2.5rem; white-space: nowrap; color: var(--ufo-ink);
}
.result-card .rc-sets {
  font-size: .78rem; color: var(--ufo-muted);
  font-variant-numeric: tabular-nums; text-align: center;
}
.result-card .rc-score .rc-sep { color: var(--ufo-line); margin: 0 .12rem; font-size: .9rem; }

/* ===== TEAM CARDS ===== */
.teams-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; }
@media (min-width: 576px) { .teams-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .teams-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
  background: #fff; border: 1px solid var(--ufo-line); border-radius: .7rem;
  text-decoration: none; color: var(--ufo-ink);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.team-card:hover {
  border-color: var(--ufo-blue-line-hover);
  box-shadow: 0 10px 20px -16px rgba(38,94,197,.45);
  color: var(--ufo-ink); transform: translateY(-1px);
}
.team-card .tc-photo {
  position: relative; overflow: hidden; background: var(--ufo-blue-soft);
}
.team-card .tc-photo::before { content: ''; display: block; padding-top: 37.5%; /* 6/16 */ }
.team-card .tc-photo picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.team-card .tc-photo img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center 30%; display: block !important; }
.tc-badge {
  position: absolute; top: .6rem; left: .6rem; z-index: 1;
  background: rgba(13,27,58,.82); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .65rem; font-weight: 700; padding: .25rem .55rem; border-radius: 3px;
  letter-spacing: .12em; text-transform: uppercase;
}
.team-card .tc-body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex; flex-direction: column; gap: .55rem; flex: 1;
}
.team-card .tc-title { font-size: 1.1rem; font-weight: 800; color: var(--ufo-ink); line-height: 1.1; margin: 0; }
.team-card .tc-liga { font-size: .78rem; color: var(--ufo-muted); font-weight: 600; display: flex; align-items: center; gap: .3rem; }
.team-card .tc-liga i { color: var(--ufo-blue); font-size: .7rem; }
.team-card .tc-text { font-size: .82rem; color: var(--ufo-muted); line-height: 1.4; }
.team-card .tc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
  border-top: 1px solid var(--ufo-line); padding-top: .7rem; margin-top: .15rem;
}
.team-card .tc-cta {
  margin-top: auto; padding-top: .65rem;
  font-size: .85rem; font-weight: 600; color: var(--ufo-blue);
  display: flex; align-items: center; gap: .35rem;
}
.team-card:hover .tc-cta { color: var(--ufo-blue-deep); }
.team-card .tc-cta i { transition: transform .2s ease; }
.team-card:hover .tc-cta i { transform: translateX(2px); }

/* ===== NEWS CARDS ===== */
.news-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 991.98px) { .news-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .news-cards-grid { grid-template-columns: 1fr; } }
.news-card { position: relative; background: var(--ufo-paper); border-radius: .75rem; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.06); display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .15s ease; }
/* Ganze Karte klickbar: der Titel-Link wird per ::after über die Karte gestreckt (einziger Link pro Karte, a11y-freundlich) */
.news-card-link { color: inherit; text-decoration: none; }
.news-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.news-card:hover { box-shadow: 0 10px 20px -16px rgba(38,94,197,.45); transform: translateY(-1px); }
.news-card:hover .news-card-link { color: var(--ufo-blue); }
.news-card-link:focus-visible { outline: none; }
.news-card:has(.news-card-link:focus-visible) { outline: 2px solid var(--ufo-blue); outline-offset: 2px; }
/* Flat 8:3 image band instead of 4:3, for placeholders and real images */
.news-card-img { aspect-ratio: 8/3; overflow: hidden; background: var(--ufo-paper-2); }
.news-card-img img,
.news-card-img picture img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; max-width: none; }
.news-card-img-placeholder { width: 100%; height: 100%; background: var(--ufo-paper-2); display: flex; align-items: center; justify-content: center; color: var(--ufo-line); font-size: 1.5rem; }
.news-card-body { padding: 1rem 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.news-card-meta { display: flex; align-items: center; gap: .5rem; }
.cat-badge { font-size: .72rem; font-weight: 700; background: var(--ufo-blue-soft); color: var(--ufo-blue); padding: .2rem .55rem; border-radius: 2rem; }
.news-card-date { font-size: .75rem; color: var(--ufo-muted); }
.news-card-title { font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: .95rem; color: var(--ufo-ink); line-height: 1.3; }
.news-card-teaser { font-size: .85rem; color: var(--ufo-muted); flex: 1; }
.news-card-more { font-size: .85rem; color: var(--ufo-blue); text-decoration: underline; font-weight: 600; margin-top: auto; }
.news-card-more i { display: inline-block; transition: transform .2s ease; }
.news-card:hover .news-card-more { color: var(--ufo-blue-deep); }
.news-card:hover .news-card-more i { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .news-card, .news-card-more i { transition: none; }
  .news-card:hover { transform: none; }
}
/* News pagination: wrap and shrink on mobile so many page numbers don't break the layout */
.news-list-view .pagination { flex-wrap: wrap; gap: .25rem 0; margin: 0 0 1.25rem; }
/* Untere Pagination: Abstand zur letzten Karten-Reihe */
.news-list-view .news-cards-grid + .pagination { margin-top: 2rem; }
@media (max-width: 575.98px) {
  .news-list-view .page-link { padding: .3rem .6rem; font-size: .9rem; }
}

/* ===== NEWS DETAIL PAGE ===== */
/* Narrow reading column; header uses the sp-head style (eyebrow/H1/date) */
.news-article-body { max-width: 46rem; }
/* Clearfix: gallery floats right, related blocks must not slide up next to it */
.news-article-body::after { content: ""; display: table; clear: both; }
.news-article-body .lead {
  font-size: 1.1rem; color: var(--ufo-ink); font-weight: 500;
  margin-bottom: 1.25rem; line-height: 1.55;
}
.news-article-body .news-text-wrap p { margin-bottom: 1rem; }
/* Images floated top right, text wraps around; lightbox provides the large view */
.news-article-gallery {
  float: right;
  width: min(45%, 280px);
  margin: .25rem 0 1rem 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.news-article-gallery figure { margin: 0; }
.news-article-gallery img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--ufo-line); border-radius: .75rem;
}
.news-article-gallery figcaption { font-size: .82rem; color: var(--ufo-muted); margin-top: .45rem; }
@media (max-width: 575.98px) {
  .news-article-gallery { float: none; width: 100%; margin: 0 0 1.25rem; }
}

/* ===== INSTAGRAM SECTION ===== */
.ig-section { padding: 3rem 0; background: var(--ufo-paper-2); }
.ig-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ig-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(from 180deg at 50% 50%, #f58529, #dd2a7b, #8134af, #515bd4, #f58529);
  padding: 3px; display: flex; align-items: center; justify-content: center;
}
.ig-avatar-inner, .ig-avatar > div {
  width: 100%; height: 100%; border-radius: 50%; background: var(--ufo-paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo Narrow', sans-serif; font-weight: 800; font-size: .85rem;
  color: var(--ufo-blue-deep);
}
.ig-meta { flex: 1; }
.ig-handle { font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: .95rem; color: var(--ufo-ink); }
.ig-label { font-size: .8rem; color: var(--ufo-muted); }
.ig-follow-btn { flex-shrink: 0; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
@media (max-width: 991.98px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
.ig-tile { aspect-ratio: 1; overflow: hidden; background: var(--ufo-paper-2); border-radius: .3rem; display: block; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ig-tile:hover img { transform: scale(1.05); }

/* ===== SPIELPLAN PAGE HEAD ===== */
.sp-head { border-bottom: 1px solid var(--ufo-line); padding: .5rem 0 1.25rem; margin-bottom: 1.5rem; }
.sp-head .row-1 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.sp-head .row-1 .left { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.sp-head .eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ufo-blue-deep); font-weight: 700;
}
.sp-head .eyebrow i { color: var(--ufo-blue); }
.sp-head h1, .sp-head h2 { font-weight: 800; font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -.01em; margin: 0; line-height: 1.05; color: var(--ufo-ink); }
.sp-head .sub { color: var(--ufo-muted); font-size: .95rem; margin: 0; }

/* ===== STAT BAR ===== */
.stat-bar {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
  margin-bottom: 1.25rem; margin-top: 1rem;
}
@media (min-width: 576px) { .stat-bar { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .stat-bar { grid-template-columns: repeat(7, 1fr); gap: .6rem; } }
.stat-bar .sb {
  background: var(--ufo-paper-2); border: 1px solid var(--ufo-line); border-radius: .5rem;
  padding: .65rem .75rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0;
}
.stat-bar .sb .lbl { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ufo-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-bar .sb .val { font-family: 'Archivo Narrow', sans-serif; font-size: .98rem; font-weight: 800; color: var(--ufo-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-bar .sb .val .sub { color: var(--ufo-muted); font-weight: 600; font-size: .82rem; margin-left: .15rem; }
.stat-bar .sb.hl { background: #fff; border-color: var(--ufo-blue-line); box-shadow: 0 4px 12px -8px rgba(38,94,197,.4); }
.stat-bar .sb.hl .val { color: var(--ufo-blue); }

/* ===== FILTER BAR (Spielplan) ===== */
.filterbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 0 0 1.25rem; padding: .75rem;
  background: var(--ufo-paper-2); border: 1px solid var(--ufo-line); border-radius: .6rem;
}
.filterbar .lbl { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ufo-muted); font-weight: 600; margin-right: .25rem; white-space: nowrap; }
.filterbar .right { margin-left: auto; font-size: .8rem; color: var(--ufo-muted); }
.filterbar .right i { color: var(--ufo-blue); }
.filterbar .right a { color: var(--ufo-blue); text-decoration: none; }
.filterbar .right a:hover { text-decoration: underline; }
.filter-group {
  display: inline-flex; gap: 0;
  border: 1px solid var(--ufo-line); border-radius: 6px; overflow: hidden; background: #fff;
}
.filter-group .opt {
  background: #fff; border: 0; color: var(--ufo-ink); padding: .45rem .85rem; font-size: .85rem;
  font-weight: 600; cursor: pointer; border-right: 1px solid var(--ufo-line);
  display: inline-flex; align-items: center; gap: .35rem; transition: background .12s, color .12s;
}
.filter-group .opt:last-child { border-right: 0; }
.filter-group .opt:hover { background: var(--ufo-blue-soft); color: var(--ufo-blue-deep); }
.filter-group .opt.active { background: var(--ufo-blue); color: #fff; }
.filter-group .opt.active:hover { background: var(--ufo-blue-deep); }
.filter-group .opt .count {
  font-size: .7rem; padding: .05rem .35rem; border-radius: 999px;
  background: rgba(0,0,0,.08); color: inherit; font-variant-numeric: tabular-nums; font-weight: 700;
}
.filter-group .opt.active .count { background: rgba(255,255,255,.25); }

/* ===== MATCH LIST (Spielplan) ===== */
.month-block { margin-bottom: 1.5rem; }
.month-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 1.5rem 0 .65rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--ufo-line);
}
.month-head h2 {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: .85rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 800; margin: 0; color: var(--ufo-ink);
  display: inline-flex; align-items: center; gap: .55rem;
}
.month-head h2::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--ufo-blue); flex-shrink: 0;
}
.month-head .count { font-size: .78rem; color: var(--ufo-muted); font-variant-numeric: tabular-nums; }
.matchlist { display: flex; flex-direction: column; gap: .55rem; }
.match {
  background: #fff; border: 1px solid var(--ufo-line); border-radius: .6rem;
  padding: .85rem 1rem .85rem 1.1rem;
  display: grid; gap: 1rem;
  grid-template-columns: auto 1fr;
  position: relative; align-items: center;
  transition: box-shadow .15s;
}
.match::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ufo-line);
  border-top-left-radius: .6rem; border-bottom-left-radius: .6rem;
}
.match:hover { box-shadow: 0 3px 10px rgba(0,0,0,.09); }
.match.win::before  { background: var(--ufo-win); }
.match.loss::before { background: var(--ufo-loss); }
.match.upcoming::before { background: var(--ufo-blue); }
.m-date {
  background: var(--ufo-blue-soft); color: var(--ufo-blue-deep);
  padding: .4rem .55rem; border-radius: .4rem; text-align: center; min-width: 3.4rem;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.m-date .d  { font-family: 'Archivo Narrow', sans-serif; font-weight: 800; font-size: 1.1rem; display: block; }
.m-date .m  { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .25rem; display: block; color: var(--ufo-blue); }
.m-date .wd { font-size: .6rem; color: var(--ufo-muted); display: block; margin-top: .2rem; letter-spacing: .05em; }
.m-main { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.m-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: .85rem;
}
.m-team {
  display: inline-flex; align-items: center; gap: .4rem; min-width: 0;
  font-size: .95rem; font-weight: 600; color: var(--ufo-ink); line-height: 1.25;
}
.m-team.home { justify-content: flex-end; text-align: right; }
.m-team.away { justify-content: flex-start; text-align: left; }
.m-team .home-icon { color: var(--ufo-blue); font-size: .9rem; flex: none; }
.m-team .name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m-team .name.us { color: var(--ufo-blue-deep); font-weight: 800; }
.m-score {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  font-variant-numeric: tabular-nums; text-align: center; min-width: 4rem; padding: 0 .25rem;
}
.m-score .sets {
  font-family: 'Archivo Narrow', sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--ufo-ink);
  white-space: nowrap; line-height: 1;
}
.m-score .sets .sep { color: var(--ufo-line); margin: 0 .15rem; font-size: 1.05rem; font-weight: 700; }
.m-score .breakdown {
  font-size: .72rem; color: var(--ufo-muted); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1;
}
.m-score.win-tone  .sets { color: var(--ufo-win); }
.m-score.loss-tone .sets { color: var(--ufo-loss); }
.m-score.upcoming-tone { display: block; }
.m-score.upcoming-tone .sets { color: var(--ufo-muted); font-weight: 600; font-size: .95rem; letter-spacing: .04em; }
.m-meta {
  font-size: .82rem; color: var(--ufo-muted);
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline;
}
.m-meta .it { display: inline-flex; align-items: baseline; gap: .3rem; }
.m-meta .it .fas, .m-meta .it .far { color: var(--ufo-blue); }
.m-meta a.it { color: var(--ufo-muted); text-decoration: none; }
.m-meta a.it:hover { color: var(--ufo-blue-deep); text-decoration: underline; }
.m-meta .anfahrt { color: var(--ufo-blue); text-decoration: none; font-weight: 600; display: inline-flex; align-items: baseline; gap: .3rem; }
.m-meta .anfahrt:hover { text-decoration: underline; color: var(--ufo-blue-deep); }
.m-meta .anfahrt .fa-up-right-from-square { font-size: .72rem; opacity: .65; align-self: center; }
@media (max-width: 575.98px) {
  .match { padding: .8rem .9rem .85rem 1rem; gap: .75rem; }
  .m-line { grid-template-columns: 1fr; gap: .15rem; text-align: center; padding: .15rem 0 .3rem; }
  .m-team.home, .m-team.away { justify-content: center; text-align: center; }
  .m-score { padding: .25rem 0; min-width: 0; }
  .m-score .sets { font-size: 1.6rem; }
  .m-score .breakdown { font-size: .78rem; }
  .m-score.upcoming-tone .sets { font-size: 1.05rem; }
  .m-meta { justify-content: center; }
}
.match.is-hidden { display: none !important; }
.month-block.is-hidden { display: none; }

/* ===== TEAM STRIP ===== */
.team-strip {
  position: relative; aspect-ratio: 16/3; min-height: 130px; overflow: hidden;
  background: var(--ufo-paper-2);
  border: 1px solid var(--ufo-line); border-radius: .75rem;
}
.team-strip picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.team-strip img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center 28%; display: block !important; }
@media (max-width: 767.98px) {
  /* min-height: 0: min-height + aspect-ratio would widen the box beyond the
     container (transferred size) and overflow on the right */
  .team-strip { aspect-ratio: 16/5; min-height: 0; }
  .team-strip img { object-position: center 32%; }
}
.team-strip-badge {
  position: absolute; bottom: .85rem; left: 1rem; z-index: 1;
  background: rgba(13,27,58,.78); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 4px;
}


/* ===== TEAM CARD STAT CELLS ===== */
.team-card .tc-stats .s {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: var(--ufo-paper-2); border: 1px solid var(--ufo-line); border-radius: .4rem;
  padding: .45rem .35rem;
}
.team-card .tc-stats .s.hl { background: #fff; border-color: var(--ufo-blue-line); box-shadow: 0 2px 8px -4px rgba(38,94,197,.3); }
.team-card .tc-stats .s .num {
  font-family: 'Archivo Narrow', sans-serif; font-weight: 800; font-size: .95rem;
  color: var(--ufo-ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.team-card .tc-stats .s.hl .num { color: var(--ufo-blue); }
.team-card .tc-stats .s .lbl {
  font-size: .55rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ufo-muted); font-weight: 600; text-align: center;
}

/* ===== INTRO CARD ===== */
.intro-card { background: #fff; border: 1px solid var(--ufo-line); border-radius: .75rem; overflow: hidden; }
div.intro-card { padding: 1.5rem; }
/* BP frame_class = intro-card: BP adds padding-top/bottom via --frame-spacing (up to 2.6rem).
   Override to 0 on the outer .frame; move card styling down to .frame-container (BP's bootstrap container). */
.frame.frame-intro-card {
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 1.5rem;
}
.frame + .frame.frame-intro-card { margin-top: .75rem; }
.frame.frame-intro-card .frame-container { background: transparent; border: none; padding: 0; }
.frame.frame-intro-card .frame-header {
  margin: 0 0 .75rem;
  padding: 0;
  border: none;
  background: transparent;
}
.frame.frame-intro-card .frame-header h2.element-header {
  font-size: 1.05rem; letter-spacing: .14em; margin: 0;
}
.frame.frame-intro-card .frame-header h2.element-header::before { width: 14px; height: 14px; }
.frame.frame-intro-card .frame-inner {
  background: #fff;
  border: 1px solid var(--ufo-line);
  border-radius: .75rem;
  overflow: hidden;
  padding: 1.25rem 1.5rem;
}
.frame.frame-intro-card .frame-inner p { margin: 0 0 .85rem; line-height: 1.6; }
.frame.frame-intro-card .frame-inner p:last-child { margin-bottom: 0; }
.frame.frame-intro-card .frame-inner a { color: var(--ufo-blue); text-decoration: none; font-weight: 500; }
.frame.frame-intro-card .frame-inner a:hover { color: var(--ufo-blue-deep); text-decoration: underline; }
.intro-card p { margin: 0 0 .85rem; line-height: 1.6; }
.intro-card p:last-child { margin-bottom: 0; }
.intro-card a { color: var(--ufo-blue); text-decoration: none; font-weight: 500; }
.intro-card a:hover { color: var(--ufo-blue-deep); text-decoration: underline; }

/* ===== BP OVERRIDES ===== */
/* BP sets --bs-gutter-x: 40px on all .frame-container, making content 40px narrower than header.
   Reset padding so content aligns flush with header containers. */
.bp-page-content .frame-container { padding-left: 0; padding-right: 0; }

/* Reduce BP's default frame-spacing (1.75–2.625rem across breakpoints) to ~1.25rem site-wide.
   This removes the excessive 42px gap between content elements on subpages. */
.bp-page-content .frame { --frame-spacing: 1.25rem; }

/* First frame in a flush container starts immediately below the hero (Startseite). */
.ufo-content-flush > .frame:first-child { padding-top: 0; }
/* First frame after team hero gets breathing room (~2.5rem gap). */
.ufo-content-team > .frame:first-child { padding-top: 2.5rem; }

/* ===== CONTENT ELEMENT HEADERS ===== */
/* BP v16 renders CE headers as .frame-header > h2.element-header > span */
.bp-page-content .frame-header h2.element-header {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: var(--ufo-ink); margin: 0;
  display: flex; align-items: center; gap: .6rem;
}
.bp-page-content .frame-header h2.element-header::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  background: var(--ufo-blue); transform: translateY(1px); flex-shrink: 0;
}

/* ===== PAGE BREADCRUMB ===== */
.page-breadcrumb { padding: .2rem 0 .15rem; margin-bottom: 1rem; }
.page-breadcrumb .breadcrumb { margin: 0; font-size: .8rem; background: none; padding: 0; }
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ufo-line); }
.page-breadcrumb .breadcrumb-item a { color: var(--ufo-muted); text-decoration: none; }
.page-breadcrumb .breadcrumb-item a:hover { color: var(--ufo-blue-deep); text-decoration: underline; }
.page-breadcrumb .breadcrumb-item.active { color: var(--ufo-ink); font-weight: 600; }

/* ===== TEAM HERO (Team page) ===== */
.team-hero {
  background: #fff; border: 1px solid var(--ufo-line);
  border-radius: .75rem; overflow: hidden; margin-bottom: 1rem;
}
.team-hero .photo {
  position: relative; aspect-ratio: 16/5; min-height: 220px;
  background: var(--ufo-paper-2); overflow: hidden;
}
.team-hero .photo picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.team-hero .photo picture img,
.team-hero .photo > img {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover !important; object-position: center 26%; display: block !important;
}
.team-hero .photo .meta-tl {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  background: rgba(13,27,58,.82); color: #fff; backdrop-filter: blur(6px);
  padding: .4rem .7rem; border-radius: 4px;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  display: inline-flex; align-items: center; gap: .45rem;
}
.team-hero .photo .meta-tl .dot {
  width: .45rem; height: .45rem; background: var(--ufo-live);
  border-radius: 50%; box-shadow: 0 0 0 3px rgba(68,214,140,.25); flex-shrink: 0;
}
.team-hero .photo .badge-tr {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  background: var(--ufo-blue); color: #fff;
  padding: .4rem .75rem; border-radius: 4px;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .4rem;
}
/* Mobile: keep the editorial banner crop (16/5); 3/2 cropped and upscaled the
   wide banner. Badges bottom left/right so season and league badge never
   overlap. Must come AFTER the badge base rules (top: 1rem). */
@media (max-width: 767.98px) {
  /* No min-height on mobile: min-height + aspect-ratio transfers the forced
     height to the WIDTH, so the photo outgrows the card and right-anchored
     badges get cut off */
  .team-hero .photo { aspect-ratio: 16/5; min-height: 0; }
  /* Both badges at the bottom; at the top the season badge would cover the players' heads */
  .team-hero .photo .meta-tl { top: auto; bottom: .75rem; left: .75rem; font-size: .65rem; padding: .3rem .55rem; }
  .team-hero .photo .badge-tr {
    top: auto; bottom: .75rem; right: .75rem;
    font-size: .68rem; padding: .3rem .55rem;
    max-width: calc(100% - 1.5rem);
  }
}
.team-hero .info {
  padding: 1.25rem 1.25rem 1.25rem;
  display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: end;
}
@media (min-width: 992px) {
  .team-hero .info { padding: 1.5rem 2rem 1.5rem; grid-template-columns: minmax(0, 1.4fr) auto; gap: 1.5rem; }
}
.team-hero .info h1 {
  font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  line-height: 1; margin: 0 0 .45rem; color: var(--ufo-ink); letter-spacing: -.01em;
}
.team-hero .info .lead { color: var(--ufo-muted); font-size: .9rem; margin: 0; line-height: 1.5; }
.team-hero .info .stat-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--ufo-line); border-radius: .55rem; overflow: hidden; width: 100%;
}
@media (min-width: 992px) { .team-hero .info .stat-strip { display: flex; width: auto; } }
.team-hero .info .stat-strip .cell {
  padding: .7rem .55rem; border-right: 1px solid var(--ufo-line);
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  background: var(--ufo-paper-2); min-width: 0;
}
@media (min-width: 992px) { .team-hero .info .stat-strip .cell { min-width: 82px; padding: .65rem 1rem; } }
.team-hero .info .stat-strip .cell:last-child { border-right: 0; }
.team-hero .info .stat-strip .cell .num {
  font-size: 1.25rem; font-weight: 800; color: var(--ufo-ink);
  line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.team-hero .info .stat-strip .cell .lbl {
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ufo-muted); margin-top: .35rem; font-weight: 600; text-align: center;
}
.team-hero .info .stat-strip .cell.hl .num { color: var(--ufo-blue); }

/* ===== SUBPAGE NAV ROW ===== */
.subpage-nav { display: flex; align-items: center; justify-content: flex-end; padding: .5rem 0 1rem; }

/* ===== SEASON NOTE (off-season / season not yet started) ===== */
.season-note {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
  padding: .75rem 1rem; border-radius: .5rem;
  background: var(--ufo-paper-2); border: 1px solid var(--ufo-line);
  color: var(--ufo-muted); font-size: .9rem;
}
.season-note i { color: var(--ufo-blue); flex-shrink: 0; }

/* ===== SHARED TABLE SHELL (.standings) ===== */
.standings {
  background: #fff; border: 1px solid var(--ufo-line);
  border-radius: .75rem; overflow: hidden;
}

/* ===== RANKING TABLE ===== */
.ranking-table-wrap { overflow-x: auto; }
.ranking-table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
}
.ranking-table thead th {
  background: var(--ufo-paper-2); border-bottom: 1px solid var(--ufo-line);
  padding: .55rem .75rem; font-weight: 600; color: var(--ufo-muted);
  text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; text-align: center;
}
.ranking-table thead th.col-team { text-align: left; }
.ranking-table tbody td {
  padding: .6rem .75rem; border-bottom: 1px solid var(--ufo-line);
  text-align: center; color: var(--ufo-ink);
}
.ranking-table tbody td.col-team { text-align: left; font-weight: 600; }
.ranking-table tbody td.col-pts { font-weight: 800; }
.ranking-table tbody td.col-pos { color: var(--ufo-muted); font-size: .85rem; }
.ranking-table tbody tr:last-child td { border-bottom: 0; }
.ranking-table tbody tr.us { background: var(--ufo-blue-soft); }
.ranking-table tbody tr.us td { color: var(--ufo-blue-deep); font-weight: 700; }
.ranking-table tbody tr.us td.col-pts { color: var(--ufo-blue-deep); }
.ranking-table tbody tr.us td.col-pos { color: var(--ufo-blue); }
.standings .legend {
  padding: .6rem .9rem; font-size: .78rem; color: var(--ufo-muted);
  background: var(--ufo-paper-2); border-top: 1px solid var(--ufo-line);
}

/* Zurück-zur-Teamseite-Button (Mock .page-head .btn-back, Site-Review D22) */
.btn-back {
  background: #fff; border: 1px solid var(--ufo-line); color: var(--ufo-ink);
  padding: .5rem .9rem; font-weight: 600; font-size: .88rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem; border-radius: .4rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-back:hover { background: var(--ufo-blue-soft); border-color: var(--ufo-blue-line); color: var(--ufo-blue-deep); }
.btn-back i { color: var(--ufo-blue); }

/* ===== SP-HEAD SUBPAGE VARIANT ===== */
.sp-head--subpage { margin-bottom: 1.5rem; }
.sp-head--subpage .row-1 {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.sp-head--subpage .right { display: flex; align-items: center; padding-top: .25rem; }

/* ===== TRAINING TIMES TABLE ===== */
/* Table shell: overflow-x auto so wide tables (e.g. 4-column youth training
   times) can scroll horizontally on mobile */
.frame-type-table .table-responsive {
  background: #fff; border: 1px solid var(--ufo-line);
  border-radius: .75rem; overflow-x: auto; overflow-y: hidden;
}
/* Mobile: no cell wrapping, the table scrolls instead */
@media (max-width: 767.98px) {
  .training-card .frame-type-table .table td { white-space: nowrap; }
}
.frame-type-table .table {
  width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0;
}
/* BP renders header row in tbody (no thead) — first row = header */
.frame-type-table .table tbody tr:first-child td {
  background: var(--ufo-paper-2); border-bottom: 2px solid var(--ufo-line);
  padding: .55rem .85rem; font-weight: 700; color: var(--ufo-muted);
  text-transform: uppercase; font-size: .72rem; letter-spacing: .04em;
}
.frame-type-table .table tbody td {
  padding: .7rem .85rem; border-bottom: 1px solid var(--ufo-line);
  color: var(--ufo-ink); vertical-align: middle;
}
.frame-type-table .table tbody tr:last-child td { border-bottom: 0; }
.frame-type-table .table tbody tr:not(:first-child) td:first-child { font-weight: 700; }
/* Halle-Spalte (letzte): blaue Farbe + Standort-Icon. Nur in Trainingskarten,
   damit die letzte Spalte beliebiger anderer Tabellen nicht ungewollt gestylt wird.
   Halle steht sowohl bei 3-spaltigen Team- als auch 4-spaltigen Jugend-Tabellen zuletzt. */
.training-card .frame-type-table .table tbody tr:not(:first-child) td:last-child { color: var(--ufo-blue); }
.training-card .frame-type-table .table tbody tr:not(:first-child) td:last-child::before {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", sans-serif;
  font-weight: 900; content: "\f3c5"; margin-right: .35rem; font-size: .85em;
}
/* Halle-Zelle als echter Google-Maps-Link (per ufo.js angereichert) */
.training-card .frame-type-table .table tbody td:last-child a { color: inherit; text-decoration: none; }
.training-card .frame-type-table .table tbody td:last-child a:hover { text-decoration: underline; }

/* =============================================
   Team Hub: Trainer, Training, CTA
   ============================================= */

/* Trainer-Karte (für künftiges Coach-Content-Element) */
.coach-card {
    background: #fff;
    border: 1px solid var(--ufo-line);
    border-radius: .75rem;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}
.coach-avatar {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--ufo-blue-line);
    background: var(--ufo-blue-soft);
    color: var(--ufo-blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
}
.coach-meta .role {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ufo-muted);
    font-weight: 600;
}
.coach-meta .name {
    font-weight: 700;
    font-size: 1.05rem;
    margin: .1rem 0 .15rem;
    color: var(--ufo-ink);
}
.coach-meta .contact a {
    font-size: .85rem;
    color: var(--ufo-blue);
}
.coach-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Trainer-Sektion (volle Breite): Coach-Cards im 2-Spalten-Grid.
   Einzelne Card belegt genau eine Zelle = max. 50 % Breite. */
.coach-row { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .coach-row { grid-template-columns: 1fr 1fr; gap: 1rem; } }
/* BP-Frame-Wrapper neutralisieren, damit die Coach-Cards bündig im Grid sitzen */
.coach-row .frame { padding: 0; margin: 0; }
.coach-row .frame-container,
.coach-row .frame-inner { padding: 0; }
.coach-row .frame-group-container,
.coach-row .frame-group-inner { margin: 0; }

/* BP-Frame-Header (h2 Name / h3 Rolle) doppelt die Karten-Inhalte — für Coach Cards überall ausblenden */
.frame-type-ufo_coach_card .frame-header { display: none; }

/* Große Coach-Card (Kontaktseiten, layout=1) */
.coach-card--lg {
    padding: 1.25rem;
    gap: 1.25rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
.coach-card--lg .coach-avatar {
    width: 120px;
    height: 150px;
    border-radius: .75rem;
    font-size: 2rem;
}
@media (min-width: 768px) {
    .coach-card--lg .coach-avatar { width: 160px; height: 200px; }
}
.coach-card--lg .coach-meta .role { font-size: .85rem; }
.coach-card--lg .coach-meta .name { font-size: 1.35rem; }
.coach-card--lg .coach-meta .contact { margin-top: .5rem; }
.coach-card--lg .coach-meta .contact a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .95rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border: 1px solid var(--ufo-line);
    border-radius: .5rem;
}

/* Trainingszeiten-Karte */
.training-card {
    background: #fff;
    border: 1px solid var(--ufo-line);
    border-radius: .75rem;
    overflow: hidden;
}
.training-card table {
    margin: 0;
}
.training-card thead th {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ufo-muted);
    font-weight: 600;
    background: var(--ufo-paper-2);
    border-bottom: 1px solid var(--ufo-line);
}
.training-card td {
    vertical-align: middle;
    font-size: .92rem;
    padding: .6rem .75rem;
    border-color: var(--ufo-line);
}
/* BP-Frame-Header innerhalb der Karte und Trainer-Sektion ausblenden */
.training-card .frame-header,
.coach-row .frame-header { display: none; }
/* BP setzt padding-top/bottom: var(--frame-spacing) auf .frame — innerhalb der Karte auf 0 */
.training-card .frame { padding: 0; }
/* BP-Frame-Wrapper-Padding neutralisieren damit die Tabelle flush in der Karte sitzt */
.training-card .frame-group-container,
.training-card .frame-group-inner { margin: 0; }
.training-card .frame-container,
.training-card .frame-inner { padding: 0; }

/* Probetraining-Hinweis */
.probetraining-note {
    margin-top: .75rem;
    padding: .65rem .9rem;
    background: var(--ufo-blue-soft);
    border-left: 3px solid var(--ufo-blue);
    border-radius: .375rem .5rem .5rem .375rem;
    font-size: .88rem;
    color: var(--ufo-blue-deep);
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.probetraining-note i {
    margin-top: .15rem;
    flex-shrink: 0;
}

/* CTA-Box */
.team-cta-wrap {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
.cta-box {
    background: linear-gradient(135deg, var(--ufo-blue) 0%, var(--ufo-blue-deep) 100%);
    color: #fff;
    border-radius: .75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
@media (min-width: 768px) {
    .cta-box {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding: 1.75rem 2rem;
    }
    .cta-box .txt { flex: 1; }
}
.cta-box h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}
.cta-box p {
    margin: 0;
    color: rgba(255,255,255,.85);
    font-size: .92rem;
}
.btn-light-pop {
    background: #fff;
    color: var(--ufo-blue-deep);
    border: 0;
    font-weight: 600;
    padding: .55rem 1.1rem;
    align-self: flex-start;
    white-space: nowrap;
}
.btn-light-pop:hover {
    background: var(--ufo-blue-soft);
    color: var(--ufo-blue-deep);
}

/* ===== TEAM: NÄCHSTE SPIELE (Liste) ===== */
/* BP-Frame-Wrapper neutralisieren, damit die "Letzte/Nächste Spiele"-Überschrift
   exakt auf Höhe der "Trainingszeiten"-Überschrift der linken Spalte sitzt
   (das Plugin wird via lib.dynamicContent in einen .frame mit frame-spacing gewickelt). */
.team-games-col .frame { padding: 0; margin: 0; }
.team-games-col .frame-container,
.team-games-col .frame-inner { padding: 0; }
.team-games-col .frame-group-container,
.team-games-col .frame-group-inner { margin: 0; }
.team-games-col .frame-header { display: none; }

.team-next-games .upcoming { display: flex; flex-direction: column; gap: .6rem; }
.team-next-games .up-item {
    background: #fff; border: 1px solid var(--ufo-line); border-radius: .6rem;
    padding: .75rem .9rem;
    display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center;
}
.team-next-games .up-date {
    background: var(--ufo-blue-soft); color: var(--ufo-blue-deep);
    padding: .35rem .55rem; border-radius: .4rem; text-align: center; min-width: 3.25rem;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.team-next-games .up-date .d { font-weight: 800; font-size: 1.05rem; }
.team-next-games .up-date .m {
    font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
    margin-top: .2rem; display: block; color: var(--ufo-blue);
}
.team-next-games .who { font-weight: 600; color: var(--ufo-ink); font-size: .94rem; }
.team-next-games .up-main .meta { font-size: .78rem; color: var(--ufo-muted); margin-top: .15rem; }
.team-next-games .up-meta { text-align: right; font-size: .78rem; color: var(--ufo-muted); }
.team-next-games .up-meta .time {
    font-weight: 700; color: var(--ufo-ink); font-size: .95rem;
    font-variant-numeric: tabular-nums; display: block;
}

/* =============================================
   Team-Kontaktseite (team_contact)
   ============================================= */

/* Hinweisbox über dem Formular */
.contact-note {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: var(--ufo-blue-soft);
    border-left: 3px solid var(--ufo-blue);
    border-radius: .375rem .5rem .5rem .375rem;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .92rem;
    color: var(--ufo-blue-deep);
}
.contact-note i { margin-top: .2rem; flex-shrink: 0; }
.contact-note p { margin: 0; }
.contact-note a { color: var(--ufo-blue-deep); font-weight: 600; }

/* Sidebar: Coach-Card vertikal & zentriert; BP-Frame-Wrapper neutralisieren */
.contact-aside .frame { padding: 0; margin: 0 0 1rem; }
.contact-aside .frame-container,
.contact-aside .frame-inner { padding: 0; }
.contact-aside .frame-group-container,
.contact-aside .frame-group-inner { margin: 0; }
/* Scope bewusst .coach-card (nicht nur .coach-card--lg): Die vertikale, zentrierte
   Darstellung mit großem Avatar gilt in der Sidebar unabhängig vom layout-Feld. */
.contact-aside .coach-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem;
    gap: 1.25rem;
    margin-bottom: 0;
}
.contact-aside .coach-card .coach-avatar {
    margin: 0 auto;
    width: min(100%, 240px);
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: .75rem;
    font-size: 2rem;
}
.contact-aside .coach-card .coach-meta .role { font-size: .85rem; }
.contact-aside .coach-card .coach-meta .name { font-size: 1.35rem; }
.contact-aside .coach-card .coach-meta .contact { margin-top: .5rem; }
.contact-aside .coach-card .coach-meta .contact a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .95rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border: 1px solid var(--ufo-line);
    border-radius: .5rem;
}

/* Probetraining-Karte (Farbverlauf links→rechts) */
.probetraining-card {
    background: linear-gradient(90deg, var(--ufo-blue) 0%, var(--ufo-blue-deep) 100%);
    color: #fff;
    border-radius: .75rem;
    padding: 1.1rem 1.2rem;
}
.probetraining-card h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 .6rem;
    color: #fff;
}
/* Trainingszeiten kompakt (Wochentag + Uhrzeit, via lib.parentTrainingTimes) */
.probetraining-card .probe-times {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
    font-size: .9rem;
}
.probetraining-card .probe-times li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
}
.probetraining-card .probe-times li + li {
    border-top: 1px solid rgba(255, 255, 255, .25);
}
.probetraining-card .probe-times .day {
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}
.probetraining-card .probe-times .time {
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.probetraining-card .note {
    margin: 0;
    font-size: .88rem;
    color: rgba(255, 255, 255, .88);
}

/* Formular-Karte: Rahmen content-unabhängig ans Form-CE binden (greift bei
   jedem frame_class — auf H1 überschreibt das die identische intro-card-Optik,
   es entsteht kein Doppelrahmen, weil beide Regeln dasselbe .frame-inner stylen). */
.contact-main .frame-type-form_formframework {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}
.contact-main .frame-type-form_formframework .frame-group-container,
.contact-main .frame-type-form_formframework .frame-group-inner { margin: 0; }
.contact-main .frame-type-form_formframework .frame-container {
    background: transparent;
    border: none;
    padding: 0;
}
.contact-main .frame-type-form_formframework .frame-inner {
    background: #fff;
    border: 1px solid var(--ufo-line);
    border-radius: .75rem;
    overflow: hidden;
    padding: 1.25rem;
}
@media (min-width: 768px) {
    .contact-main .frame-type-form_formframework .frame-inner { padding: 1.75rem 2rem; }
}
.contact-main .frame-type-form_formframework .frame-header {
    margin: 0 0 1rem;
    padding: 0;
    border: none;
    background: transparent;
}
.contact-main .frame-type-form_formframework .frame-header h2.element-header {
    font-size: 1.05rem;
    letter-spacing: .14em;
    margin: 0;
}

/* Formular-Optik auf den Team-Kontaktseiten */
.contact-main .form-group { margin-bottom: 1rem; }
/* Labels wie im Kontakt-Mock (.form-card .form-label, Site-Review D28) */
.contact-main .form-label {
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .3rem;
    color: var(--ufo-muted);
}
.contact-main .form-control,
.contact-main .form-select {
    border-radius: .5rem;
    border-color: var(--ufo-line);
    padding: .65rem .85rem;
    font-size: .95rem;
}
.contact-main .form-control:focus,
.contact-main .form-select:focus {
    border-color: var(--ufo-blue);
    box-shadow: 0 0 0 .2rem rgba(38, 94, 197, .15);
}
/* Datenschutz-Checkbox (Core-Partial: .form-check-wrapping-label) */
.contact-main .form-check-wrapping-label {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
}
.contact-main .form-check-wrapping-label .form-check-input {
    margin-top: .25rem;
    flex-shrink: 0;
}
/* FriendlyCaptcha an die Feldoptik angleichen */
.contact-main .frc-captcha {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--ufo-line);
    border-radius: .5rem;
    margin: 0 0 1rem;
}
/* Submit-Button mit Papierflieger-Icon (Label „Absenden" bleibt aus der YAML) */
.contact-main form button[type="submit"] {
    background: var(--ufo-blue);
    border-color: var(--ufo-blue);
    font-weight: 600;
    padding: .6rem 1.5rem;
    border-radius: .5rem;
}
.contact-main form button[type="submit"]:hover,
.contact-main form button[type="submit"]:focus {
    background: var(--ufo-blue-deep);
    border-color: var(--ufo-blue-deep);
}
.contact-main form button[type="submit"]::before {
    content: "\f1d8" / "";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: .5rem;
}

/* =============================================
   Unterseiten-Teaser (Icon-Kacheln, ufo_subpage_teaser)
   ============================================= */
.subpages-grid {
    display: grid; grid-template-columns: 1fr; gap: .8rem;
}
@media (min-width: 560px) { .subpages-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .subpages-grid { grid-template-columns: repeat(3, 1fr); } }
.subpage-card {
    display: flex; align-items: center; gap: .95rem;
    background: #fff; border: 1px solid var(--ufo-line); border-radius: .6rem;
    padding: 1rem 1.1rem; text-decoration: none; color: var(--ufo-ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.subpage-card:hover {
    border-color: var(--ufo-blue);
    box-shadow: 0 4px 14px rgba(38, 94, 197, .10);
    transform: translateY(-1px);
    color: var(--ufo-ink);
}
.subpage-card .ico {
    flex: none; width: 46px; height: 46px; border-radius: .55rem;
    background: var(--ufo-blue-soft); color: var(--ufo-blue-deep);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    transition: background .15s ease, color .15s ease;
}
.subpage-card:hover .ico { background: var(--ufo-blue); color: #fff; }
.subpage-card .txt { flex: 1 1 auto; min-width: 0; }
.subpage-card .txt .t {
    display: block;
    font-family: var(--font-heading); font-weight: 700;
    font-size: 1.02rem; line-height: 1.1; color: var(--ufo-ink);
}
.subpage-card .txt .d {
    display: block;
    font-size: .82rem; color: var(--ufo-muted); margin-top: .15rem; line-height: 1.35;
}
.subpage-card .arr {
    flex: none; color: var(--ufo-line); font-size: 1.1rem;
    transition: color .15s ease, transform .15s ease;
}
.subpage-card:hover .arr { color: var(--ufo-blue); transform: translateX(2px); }

/* ===== Kontaktseite (allgemein, page 6) ===== */
/* Sektionstitel wie CE-Header (.element-header): Archivo Narrow, uppercase, blaues Kästchen davor */
.contact-section-title {
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 1.05rem; text-transform: uppercase; letter-spacing: .14em;
    font-weight: 700; color: var(--ufo-ink);
    display: flex; align-items: center; gap: .6rem;
    margin: 2rem 0 1rem;
}
.contact-section-title::before {
    content: ""; display: inline-block; width: 14px; height: 14px;
    background: var(--ufo-blue); flex-shrink: 0;
}

.contact-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 767.98px) { .contact-tiles { grid-template-columns: 1fr; } }
.contact-tile {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.1rem; border: 1px solid var(--ufo-line); border-radius: 14px;
    background: #fff; text-decoration: none; color: var(--ufo-ink); transition: border-color .15s, box-shadow .15s;
}
.contact-tile:hover { border-color: var(--ufo-blue-line); box-shadow: 0 4px 14px rgba(38,94,197,.08); }
.contact-tile-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px;
    display: grid; place-items: center; background: var(--ufo-blue-soft); color: var(--ufo-blue); font-size: 1.15rem;
}
.contact-tile-icon svg { width: 20px; height: 20px; fill: currentColor; }
.contact-tile-body { display: flex; flex-direction: column; min-width: 0; }
.contact-tile-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ufo-muted); font-weight: 700; }
.contact-tile-value { font-weight: 700; overflow-wrap: anywhere; }
.contact-tile-hint { font-size: .8rem; color: var(--ufo-muted); }

.contact-people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 991.98px) { .contact-people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .contact-people-grid { grid-template-columns: 1fr; } }
/* Coach-Card kompakt (Standard-Optik, nicht die große Sidebar-Variante der Teamseiten).
   BP-Frame-Wrapper neutralisieren, damit die 3 Karten bündig auf einer Linie im Grid sitzen. */
.contact-people-grid .frame,
.contact-people-grid .frame-container,
.contact-people-grid .frame-inner { padding: 0; margin: 0; height: 100%; }
.contact-people-grid .frame-group-container,
.contact-people-grid .frame-group-inner { margin: 0; height: 100%; }
.contact-people-grid .coach-card { height: 100%; }

.hall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 991.98px) { .hall-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .hall-grid { grid-template-columns: 1fr; } }
.hall-card { padding: 1.25rem; border: 1px solid var(--ufo-line); border-radius: 14px; background: #fff; display: flex; flex-direction: column; }
.hall-name { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.05rem; color: var(--ufo-ink); margin: 0 0 .4rem; }
.hall-name i { color: var(--ufo-blue); font-size: .95em; }
.hall-addr { color: var(--ufo-muted); margin: 0; line-height: 1.4; }
/* Sichtbar gestrichelte Trennlinie (blau getönt, wie in der Vorlage) — var(--ufo-line) war zu dezent. */
.hall-sep { border: 0; border-top: 1px dashed #b3c6ec; margin: 1rem 0; }
.hall-route {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--ufo-blue); color: #fff; font-weight: 600;
    padding: .5rem 1rem; border-radius: .5rem; text-decoration: none;
}
.hall-route:hover, .hall-route:focus { background: var(--ufo-blue-deep); color: #fff; text-decoration: none; }
.hall-route i { font-size: .9em; }

/* Vereinsdaten: Überschrift außerhalb, zwei separate graue Boxen (kein blauer Rahmen).
   Abstand nach oben liefert der .contact-section-title (wie bei den übrigen Sektionen). */
.clubdata-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 575.98px) { .clubdata-grid { grid-template-columns: 1fr; } }
.clubdata-block { padding: 1.5rem; border: 1px solid var(--ufo-line); border-radius: 14px; background: var(--ufo-paper-2); }
.clubdata-block h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ufo-muted); font-weight: 700; margin: 0 0 .4rem; }
.clubdata-block p { margin: 0; color: var(--ufo-ink); line-height: 1.5; }

/* Kontaktformular: Name + E-Mail nebeneinander, übrige Felder volle Breite.
   EXT:form rendert vor den sichtbaren .form-group-Feldern einen zusätzlichen,
   klassenlosen div-Wrapper für Hidden-State-Felder (__state/__trustedProperties).
   Dadurch sind "Name" und "E-Mail" das 2./3. div-Kind von <form>, nicht das 1./2.
   :nth-of-type-Index entsprechend angepasst (verifiziert gegen echtes Markup).
   grid-row:1 fixiert beide Felder zusätzlich in Zeile 1, damit das CSS-Grid-
   Auto-Placement den unsichtbaren State-Wrapper nicht dazwischenschiebt. */
.contact-form .frame-type-form_formframework form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.contact-form .frame-type-form_formframework form > * { grid-column: 1 / -1; } /* alles volle Breite, außer Name/E-Mail */
.contact-form .frame-type-form_formframework .form-group:nth-of-type(2) { grid-column: 1 / 2; grid-row: 1; } /* Name */
.contact-form .frame-type-form_formframework .form-group:nth-of-type(3) { grid-column: 2 / 3; grid-row: 1; } /* E-Mail */
@media (max-width: 575.98px) {
    .contact-form .frame-type-form_formframework form { grid-template-columns: 1fr; }
    .contact-form .frame-type-form_formframework form > *,
    .contact-form .frame-type-form_formframework .form-group:nth-of-type(2),
    .contact-form .frame-type-form_formframework .form-group:nth-of-type(3) { grid-column: 1 / -1; grid-row: auto; }
}