/* TC Vorst 1973 e.V. - Cassiopeia user.css */

:root {
  --tc-green: #11863f;
  --tc-green-dark: #0b6f33;
  --tc-blue: #0056c7;
  --tc-ink: #172033;
  --tc-muted: #4b5563;
  --tc-line: rgba(23, 32, 51, 0.12);
  --tc-panel: rgba(255, 255, 255, 0.92);
  --tc-panel-strong: rgba(255, 255, 255, 0.96);
  --tc-header: rgba(190, 211, 224, 0.96);
  --tc-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  --tc-radius: 8px;
}

body.site {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
    url("/images/design/hintergrund.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--tc-ink);
}

.site-grid,
.com-content-article,
.com-content-article__body {
  background: transparent;
}

.grid-child.container-component {
  max-width: 1360px;
  padding: 72px 24px;
}

.page-header,
.com-content-article__info {
  display: none;
}

a {
  color: var(--tc-blue);
}

img {
  max-width: 100%;
  height: auto;
}

/* Kopfbereich */
.container-header {
  position: relative;
  z-index: 50;
  background: transparent !important;
  box-shadow: none;
}

.container-header .navbar-brand {
  display: none !important;
}

.container-header .container-topbar {
  width: 100%;
  max-width: none;
  padding: 0;
}

.tc-site-top {
  width: min(1360px, calc(100% - 48px));
  min-height: 96px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 8px 0;
}

.tc-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tc-social-link {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.tc-social-link:hover {
  background: var(--tc-green);
}

.tc-logo-link {
  display: inline-flex;
}

.tc-header-logo {
  width: 500px;
  height: 500px;
  object-fit: contain;
  display: block;
}

.tc-header-contact {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 600;
}

.tc-header-contact a {
  color: #fff !important;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.container-header .container-nav {
  width: 100%;
  max-width: none;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--tc-header);
  padding: 0 24px;
}

.container-header .mod-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  display: block;
  padding: 20px 0;
  color: #1f2937 !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li > a:hover {
  color: var(--tc-blue) !important;
}

.container-header .navbar-toggler {
  border: 0;
  color: #111827;
  margin-left: 18px;
}

.container-header .navbar-toggler:focus {
  box-shadow: none;
}

/* Allgemeine Bausteine */
.tc-page {
  max-width: 1180px;
  margin: 0 auto;
}

.tc-hero,
.board-intro,
.teams-hero,
.training-hero,
.clubhouse-hero,
.sponsors-hero,
.sponsor-offer-hero,
.tc-contact-hero,
.tc-legal-hero {
  margin: 0 auto 32px;
  padding: 34px 38px;
  background: var(--tc-panel);
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow);
}

.tc-hero.center,
.board-intro,
.teams-hero,
.clubhouse-hero {
  text-align: center;
}

.tc-kicker,
.board-kicker,
.training-kicker,
.sponsors-kicker,
.sponsor-offer-kicker,
.tc-contact-kicker,
.tc-legal-kicker {
  margin: 0 0 10px;
  color: var(--tc-green);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.tc-hero h1,
.tc-hero h2,
.board-intro h2,
.teams-hero h1,
.training-hero h1,
.clubhouse-hero h1,
.sponsors-hero h1,
.sponsor-offer-hero h1,
.tc-contact-hero h1,
.tc-legal-hero h1 {
  margin: 0 0 14px;
  color: var(--tc-ink);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
}

.tc-hero p,
.board-intro p,
.teams-hero p,
.training-hero p,
.clubhouse-hero p,
.sponsors-hero p,
.sponsor-offer-hero p,
.tc-contact-hero p,
.tc-legal-hero p {
  margin: 0;
  color: var(--tc-muted);
  font-size: 17px;
  line-height: 1.75;
}

.tc-button,
.home-button {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 6px;
  background: var(--tc-green);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  border: 0;
}

.tc-button:hover,
.home-button:hover {
  background: var(--tc-green-dark);
  color: #fff !important;
}

.tc-button.secondary,
.home-button.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.72);
}

/* Startseite */
.tc-home,
.home-page {
  max-width: 1180px;
  margin: 0 auto;
}

.tc-home-hero,
.home-hero {
  max-width: 760px;
  padding: 56px 64px;
  background: rgba(18, 28, 43, 0.74);
  color: #fff;
  border-radius: var(--tc-radius);
}

.tc-home-kicker,
.home-kicker {
  margin: 0 0 12px;
  color: #d9f7df;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.tc-home-hero h1,
.home-hero h1 {
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.05;
}

.tc-home-hero p,
.home-hero p {
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
}

.tc-home-actions,
.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.tc-home-section,
.home-section,
.home-about,
.home-highlight {
  margin-top: 34px;
  padding: 32px;
  background: var(--tc-panel);
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow);
}

/* Karten allgemein */
.board-grid,
.trainer-grid,
.teams-grid,
.sponsors-grid,
.sponsor-packages,
.clubhouse-doc-grid,
.membership-docs,
.tc-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.board-card,
.trainer-card,
.team-card,
.sponsor-card,
.sponsor-package-card,
.clubhouse-doc-card,
.membership-doc,
.tc-contact-card,
.tc-legal-card {
  background: var(--tc-panel-strong);
  border-radius: var(--tc-radius);
  overflow: hidden;
  box-shadow: var(--tc-shadow);
}

.board-card img,
.trainer-card img,
.sponsor-logo img {
  width: 100%;
  height: 355px;
  object-fit: cover;
  display: block;
}

.board-card-content,
.trainer-card-content,
.team-card,
.sponsor-content,
.sponsor-package-card,
.clubhouse-doc-card,
.membership-doc,
.tc-contact-card,
.tc-legal-card {
  padding: 26px;
}

.board-position,
.trainer-role,
.team-league,
.sponsor-package-label {
  margin: 0 0 10px;
  color: var(--tc-green);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.board-card h3,
.trainer-card h3,
.team-card h3,
.sponsor-card h3,
.sponsor-package-card h3 {
  margin: 0 0 14px;
  color: var(--tc-ink);
  font-size: 24px;
  line-height: 1.2;
}

.board-card p,
.trainer-card p,
.team-card p,
.sponsor-card p,
.sponsor-package-card p,
.membership-doc p,
.clubhouse-doc-card p {
  color: var(--tc-muted);
  line-height: 1.7;
}

/* Training */
.training-layout,
.clubhouse-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 32px;
  align-items: start;
}

.training-days-section,
.clubhouse-info,
.clubhouse-documents,
.sponsor-map-section,
.tc-legal-page {
  margin-top: 32px;
  padding: 32px;
  background: var(--tc-panel);
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow);
}

.training-days-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.training-day-card {
  padding: 22px;
  background: #fff;
  border-radius: var(--tc-radius);
  border: 1px solid var(--tc-line);
}

.training-day-badge {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--tc-green);
  color: #fff;
  font-weight: 800;
}

.youth-contact-widget,
.clubhouse-contact-widget {
  background: var(--tc-panel-strong);
  border-radius: var(--tc-radius);
  overflow: hidden;
  box-shadow: var(--tc-shadow);
}

.youth-contact-widget img,
.clubhouse-contact-widget img {
  width: 100%;
  height: 510px;
  object-fit: cover;
  display: block;
}

.youth-contact-content,
.clubhouse-contact-content {
  padding: 26px;
}

.youth-contact-role,
.clubhouse-contact-role {
  margin: 0 0 8px;
  color: var(--tc-green);
  font-weight: 800;
  text-transform: uppercase;
}

/* Dokumente */
.membership-doc,
.clubhouse-doc-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.doc-icon,
.pdf-icon {
  min-width: 54px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--tc-green);
  color: #fff;
  font-weight: 800;
}

.membership-note,
.clubhouse-contact-box,
.teams-note,
.sponsor-offer-note {
  margin-top: 32px;
  padding: 28px;
  background: #eefaf2;
  border-left: 5px solid var(--tc-green);
  border-radius: var(--tc-radius);
}

/* Clubhaus Slideshow */
.clubhouse-slider {
  margin: 32px 0;
  border-radius: var(--tc-radius);
  overflow: hidden;
  background: #eef1f5;
  box-shadow: var(--tc-shadow);
}

.clubhouse-slider img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* Termine */
.event-auto-list,
.event-list-widget {
  padding: 24px;
  background: var(--tc-panel-strong);
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow);
}

.event-auto-list h3,
.event-list-widget h3 {
  margin: 0 0 18px;
  color: var(--tc-green);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.event-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tc-line);
}

.event-item:last-child {
  border-bottom: 0;
}

.event-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #8bd30f;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.event-title {
  margin: 0;
  color: var(--tc-ink);
  font-weight: 800;
}

.event-date,
.event-text {
  margin: 0;
  color: var(--tc-muted);
  font-size: 14px;
}

/* Sponsoren */
.sponsor-logo {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #fff;
  border-bottom: 1px solid var(--tc-line);
}

.sponsor-logo img {
  width: auto;
  max-height: 110px;
  object-fit: contain;
}

.sponsor-link-card {
  display: block;
  margin-top: 32px;
  padding: 32px;
  background: rgba(17, 134, 63, 0.94);
  color: #fff !important;
  border-radius: var(--tc-radius);
  text-decoration: none;
  box-shadow: var(--tc-shadow);
}

.sponsor-package-featured {
  border: 3px solid var(--tc-green);
}

.sponsor-package-price {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--tc-line);
  color: var(--tc-green);
  font-size: 28px;
  font-weight: 800;
}

/* Werbeflaechen Karte */
.ad-space-section {
  margin-top: 32px;
  padding: 32px;
  background: var(--tc-panel);
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow);
}

.ad-space-map-four {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: var(--tc-radius);
  background: #3f8258;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.clubhouse-marker {
  position: absolute;
  right: 4%;
  bottom: 5%;
  padding: 14px 18px;
  border-radius: 7px;
  background: #334155;
  color: #fff;
  font-weight: 800;
}

.court-row {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 18%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.mini-court {
  aspect-ratio: 1.5;
  background: #c94912;
  border: 4px solid #f3d2b5;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.ad-zone {
  position: absolute;
  z-index: 3;
  min-width: 74px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #24c765;
  border: 2px solid #fff;
  color: #172033;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  cursor: help;
}

.ad-zone.requested {
  background: #ffcf26;
}

.ad-zone.occupied {
  background: #6b7280;
  color: #fff;
}

.ad-left-1 { left: 3%; top: 20%; }
.ad-left-2 { left: 3%; top: 36%; }
.ad-left-3 { left: 3%; top: 52%; }
.ad-right-1 { right: 3%; top: 24%; }
.ad-right-2 { right: 3%; top: 44%; }
.ad-bottom-1 { left: 12%; bottom: 17%; }
.ad-bottom-2 { left: 27%; bottom: 17%; }
.ad-bottom-3 { left: 42%; bottom: 17%; }
.ad-bottom-4 { left: 57%; bottom: 17%; }
.ad-bottom-5 { left: 72%; bottom: 17%; }

.ad-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 210px;
  padding: 12px;
  transform: translateX(-50%);
  background: #fff;
  color: var(--tc-ink);
  border-radius: 7px;
  box-shadow: var(--tc-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.ad-zone:hover .ad-tooltip {
  opacity: 1;
}

.ad-space-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 18px 0 0;
  font-weight: 700;
}

.status-dot {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: -2px;
}

.status-free { background: #24c765; }
.status-requested { background: #ffcf26; }
.status-occupied { background: #6b7280; }

/* Kontakt */
.tc-contact-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
}

.tc-contact-list {
  display: grid;
  gap: 12px;
  margin: 20px 0 28px;
}

.tc-contact-list a,
.tc-contact-list span {
  color: var(--tc-ink);
  text-decoration: none;
}

.tc-contact-form {
  display: grid;
  gap: 14px;
}

.tc-contact-form label {
  color: var(--tc-ink);
  font-weight: 800;
}

.tc-contact-form input,
.tc-contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  background: #fff;
  color: var(--tc-ink);
}

.tc-contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.tc-contact-map iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: var(--tc-radius);
}

/* Impressum und Datenschutz */
.tc-legal-page {
  max-width: 980px;
  margin: 0 auto;
}

.tc-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}

.tc-legal-nav a {
  padding: 10px 14px;
  border-radius: 6px;
  background: #eefaf2;
  color: var(--tc-green);
  font-weight: 800;
  text-decoration: none;
}

.tc-legal-card {
  margin-bottom: 22px;
}

.tc-legal-card h2,
.tc-legal-card h3 {
  color: var(--tc-ink);
}

.tc-legal-card p,
.tc-legal-card li {
  color: var(--tc-muted);
  line-height: 1.75;
}

/* Footer */
.container-footer {
  background: rgba(18, 28, 43, 0.92);
  color: #fff;
}

.container-footer a {
  color: #fff;
}

/* Responsive */
@media (max-width: 1000px) {
  .board-grid,
  .trainer-grid,
  .teams-grid,
  .sponsors-grid,
  .sponsor-packages,
  .clubhouse-doc-grid,
  .membership-docs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-layout,
  .clubhouse-layout,
  .tc-contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .tc-site-top {
    width: calc(100% - 32px);
    grid-template-columns: 1fr auto;
    min-height: 84px;
  }

  .tc-socials {
    display: none;
  }

  .tc-header-logo {
    width: 78px;
    height: 78px;
  }

  .tc-header-contact {
    font-size: 13px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .container-header .container-nav {
    justify-content: flex-end;
  }

  .container-header .mod-menu {
    gap: 14px;
  }
}

@media (max-width: 700px) {
  .grid-child.container-component {
    padding: 38px 16px;
  }

  .tc-header-contact {
    display: none;
  }

  .tc-site-top {
    display: flex;
    justify-content: center;
  }

  .tc-home-hero,
  .home-hero,
  .tc-hero,
  .board-intro,
  .teams-hero,
  .training-hero,
  .clubhouse-hero,
  .sponsors-hero,
  .sponsor-offer-hero,
  .tc-contact-hero,
  .tc-legal-hero {
    padding: 28px 22px;
  }

  .board-grid,
  .trainer-grid,
  .teams-grid,
  .sponsors-grid,
  .sponsor-packages,
  .clubhouse-doc-grid,
  .membership-docs,
  .training-days-grid {
    grid-template-columns: 1fr;
  }

  .board-card img,
  .trainer-card img {
    height: 330px;
  }

  .ad-space-map-four {
    min-height: 680px;
  }

  .court-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    top: 18%;
  }

  .ad-zone {
    min-width: 56px;
    padding: 8px 10px;
    font-size: 13px;
  }
}

.container-sidebar-right {
  padding-top: 72px;
}

.container-sidebar-right .sidebar-right {
  display: grid;
  gap: 24px;
}

.container-sidebar-right .moduletable {
  background: transparent;
}

/* Kopfbereich nachjustieren */
.tc-site-top {
  width: min(1420px, calc(100% - 60px));
  min-height: 112px;
  padding: 10px 0 12px;
}

.tc-header-logo {
  width: 122px;
  height: 122px;
  object-fit: contain;
}

.tc-social-link {
  position: relative;
  width: 34px;
  height: 34px;
  font-size: 0;
}

.tc-social-link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tc-social-link::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: #ffffff;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.tc-social-link.is-facebook::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8h3V4h-3c-3.3 0-5 2-5 5v2H6v4h3v7h4v-7h3.2l.8-4h-4V9c0-.7.3-1 1-1z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8h3V4h-3c-3.3 0-5 2-5 5v2H6v4h3v7h4v-7h3.2l.8-4h-4V9c0-.7.3-1 1-1z'/%3E%3C/svg%3E");
}

.tc-social-link.is-instagram::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10c3 0 5 2 5 5v10c0 3-2 5-5 5H7c-3 0-5-2-5-5V7c0-3 2-5 5-5zm5 5a5 5 0 100 10 5 5 0 000-10zm0 2.2a2.8 2.8 0 110 5.6 2.8 2.8 0 010-5.6zM17.5 6a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10c3 0 5 2 5 5v10c0 3-2 5-5 5H7c-3 0-5-2-5-5V7c0-3 2-5 5-5zm5 5a5 5 0 100 10 5 5 0 000-10zm0 2.2a2.8 2.8 0 110 5.6 2.8 2.8 0 010-5.6zM17.5 6a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z'/%3E%3C/svg%3E");
}

.tc-social-link.is-whatsapp::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a9.8 9.8 0 00-8.5 14.7L2 22l5.4-1.4A9.9 9.9 0 1012 2zm0 2a7.9 7.9 0 017.9 7.9A7.9 7.9 0 018 18.8l-.4-.2-3 .8.8-2.9-.2-.5A7.9 7.9 0 0112 4zm-3.1 4.2c-.2 0-.5.1-.7.4-.2.3-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.7 2.8 4.3 3.8 2.1.8 2.6.5 3.1.4.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.2-.2-.5-.3l-1.7-.8c-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.3-.1-1.1-.4-2-1.2-.7-.7-1.2-1.5-1.4-1.8-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5.1-.2.1-.4 0-.5l-.8-1.8c-.2-.4-.4-.4-.6-.4h-.5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a9.8 9.8 0 00-8.5 14.7L2 22l5.4-1.4A9.9 9.9 0 1012 2zm0 2a7.9 7.9 0 017.9 7.9A7.9 7.9 0 018 18.8l-.4-.2-3 .8.8-2.9-.2-.5A7.9 7.9 0 0112 4zm-3.1 4.2c-.2 0-.5.1-.7.4-.2.3-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.7 2.8 4.3 3.8 2.1.8 2.6.5 3.1.4.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.2-.2-.5-.3l-1.7-.8c-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.3-.1-1.1-.4-2-1.2-.7-.7-1.2-1.5-1.4-1.8-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5.1-.2.1-.4 0-.5l-.8-1.8c-.2-.4-.4-.4-.6-.4h-.5z'/%3E%3C/svg%3E");
}

/* Menueleiste sauber formatieren */
.container-header .container-nav {
  min-height: 70px;
  padding: 0 36px;
  background: rgba(190, 211, 224, 0.94) !important;
  overflow: visible;
}

.container-header .mod-menu {
  width: min(1180px, 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  padding: 25px 17px;
  color: #0f172a !important;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li > a:hover {
  color: #0056c7 !important;
}

/* Bearbeiten-Button soll das Menue nicht verschieben */
.container-header .icons,
.container-header .btn.jmodedit {
  position: absolute;
  right: 24px;
  top: 12px;
}

/* Falls das Menue bei vielen Punkten zu eng wird */
@media (max-width: 1200px) {
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    padding-left: 11px;
    padding-right: 11px;
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .tc-header-logo {
    width: 96px;
    height: 96px;
  }

  .tc-site-top {
    min-height: 96px;
  }

  .container-header .container-nav {
    justify-content: center;
    min-height: auto;
    padding: 12px 20px;
  }

  .container-header .mod-menu {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    padding: 10px 6px;
  }
}

/* Menuebalken schmaler, Logo groesser */
.tc-site-top {
  min-height: 132px;
  padding: 8px 0 10px;
}

.tc-header-logo {
  width: 145px;
  height: 145px;
}

.container-header .container-nav {
  min-height: 48px;
  padding: 0 28px;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 15px;
}

/* Tablet */
@media (max-width: 900px) {
  .tc-site-top {
    min-height: 112px;
  }

  .tc-header-logo {
    width: 120px;
    height: 120px;
  }

  .container-header .container-nav {
    min-height: 46px;
  }
}

/* Handy */
@media (max-width: 600px) {
  .tc-site-top {
    min-height: 96px;
  }

  .tc-header-logo {
    width: 100px;
    height: 100px;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Nachbesserung Cassiopeia: Training, Mitglied werden, Lesbarkeit */

/* Wichtig: Diese alten Seitenklassen wieder sauber stylen */
.membership-hero,
.training-hero,
.board-intro,
.teams-hero,
.clubhouse-hero,
.sponsors-hero,
.sponsor-offer-hero,
.tc-contact-hero,
.tc-legal-hero {
  max-width: 1180px;
  margin: 0 auto 32px;
  padding: 34px 38px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.membership-hero,
.board-intro,
.teams-hero,
.clubhouse-hero {
  text-align: center;
}

.membership-hero h1,
.training-hero h1,
.board-intro h2,
.teams-hero h1,
.clubhouse-hero h1 {
  margin: 0 0 14px;
  color: #172033;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
}

.membership-hero p,
.training-hero p,
.board-intro p,
.teams-hero p,
.clubhouse-hero p {
  margin: 0;
  color: #4b5563;
  font-size: 17px;
  line-height: 1.75;
}

/* Trainingstage heller und klarer */
.training-days-section {
  max-width: 100%;
  margin-top: 32px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.training-days-section h2 {
  margin-top: 0;
  margin-bottom: 22px;
  color: #172033;
}

.training-days-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.training-day-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.training-day-card h3 {
  margin: 0 0 10px;
  color: #172033;
  font-size: 24px;
}

.training-day-card strong {
  color: #172033;
}

.training-day-card p {
  color: #4b5563;
  line-height: 1.65;
}

/* Unterer Hinweis bei Training wieder als Kasten */
.training-note,
.membership-note {
  max-width: 1180px;
  margin: 32px auto 0;
  padding: 28px 32px;
  background: #eefaf2;
  border-left: 5px solid #11863f;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.training-note h2,
.membership-note h2 {
  margin-top: 0;
  color: #172033;
}

.training-note p,
.membership-note p {
  color: #4b5563;
  line-height: 1.7;
}

/* Mitglied werden: Dokumente sauberer */
.membership-docs {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.membership-doc {
  min-height: 190px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.membership-doc h3 {
  margin: 0 0 10px;
  color: #172033;
  font-size: 24px;
}

.membership-doc p {
  margin: 0;
  color: #4b5563;
  line-height: 1.7;
}

.membership-doc a {
  color: #0056c7;
  font-weight: 800;
}

.doc-icon,
.pdf-icon {
  min-width: 54px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #11863f;
  color: #ffffff !important;
  font-weight: 800;
  text-decoration: none;
}

/* Sidebar rechts etwas ruhiger */
.container-sidebar-right {
  padding-top: 72px;
}

.container-sidebar-right .moduletable {
  margin-bottom: 24px;
  background: transparent;
}

/* Ansprechpartner-Karte rechts */
.youth-contact-widget,
.clubhouse-contact-widget {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.youth-contact-widget img,
.clubhouse-contact-widget img {
  width: 100%;
  height: 510px;
  object-fit: cover;
  display: block;
}

.youth-contact-content,
.clubhouse-contact-content {
  padding: 26px;
}

.youth-contact-content h3,
.clubhouse-contact-content h3 {
  margin: 0 0 12px;
  color: #172033;
  font-size: 28px;
}

.youth-contact-content p,
.clubhouse-contact-content p {
  color: #4b5563;
  line-height: 1.7;
}

/* Mobile */
@media (max-width: 1000px) {
  .membership-docs,
  .training-days-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .container-sidebar-right {
    padding-top: 24px;
  }
}

@media (max-width: 700px) {
  .membership-hero,
  .training-hero,
  .training-days-section,
  .membership-note,
  .training-note {
    padding: 26px 22px;
  }

  .membership-docs,
  .training-days-grid {
    grid-template-columns: 1fr;
  }

  .youth-contact-widget img,
  .clubhouse-contact-widget img {
    height: 380px;
  }
}

/* Mitglied werden: schoene Download-Karten */
.membership-docs {
  max-width: 1180px;
  margin: 0 auto 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.membership-doc {
  min-height: 170px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  align-items: center;
  padding: 26px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
  color: #172033 !important;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.membership-doc:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.membership-doc .doc-icon {
  width: 58px;
  height: 58px;
  min-width: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #11863f;
  color: #ffffff !important;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.membership-doc .doc-content {
  display: block;
}

.membership-doc strong {
  display: block;
  margin-bottom: 8px;
  color: #172033;
  font-size: 24px;
  line-height: 1.2;
  text-decoration: none;
}

.membership-doc small {
  display: block;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
}

/* Keine Unterstreichung innerhalb der Download-Karten */
.membership-doc *,
.membership-doc:hover * {
  text-decoration: none !important;
}

/* Vierte Karte links schoen einrasten lassen */
.membership-docs .membership-doc:nth-child(4) {
  grid-column: span 1;
}

@media (max-width: 1000px) {
  .membership-docs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .membership-docs {
    grid-template-columns: 1fr;
  }

  .membership-doc {
    grid-template-columns: 50px 1fr;
    min-height: auto;
    padding: 22px;
  }

  .membership-doc .doc-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    font-size: 24px;
  }

  .membership-doc strong {
    font-size: 21px;
  }
}

/* Clubhaus mieten: Download-Karten ruhiger */
.clubhouse-documents {
  max-width: 1180px;
  margin: 32px auto;
  padding: 34px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.clubhouse-documents h2 {
  margin: 0 0 26px;
  color: #172033;
  font-size: 30px;
  line-height: 1.2;
}

.clubhouse-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.clubhouse-doc-card {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 30px 24px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  color: #172033 !important;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.clubhouse-doc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.clubhouse-doc-card .doc-icon {
  width: 58px;
  height: 58px;
  min-width: 58px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #11863f;
  color: #ffffff !important;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.clubhouse-doc-card .doc-content {
  display: block;
  width: 100%;
}

.clubhouse-doc-card strong {
  display: block;
  max-width: 220px;
  margin: 0 auto 12px;
  color: #172033;
  font-size: 22px;
  line-height: 1.18;
  text-decoration: none;
}

.clubhouse-doc-card small {
  display: block;
  max-width: 240px;
  margin: 0 auto;
  color: #4b5563;
  font-size: 15.5px;
  line-height: 1.55;
  text-decoration: none;
}

.clubhouse-doc-card *,
.clubhouse-doc-card:hover * {
  text-decoration: none !important;
}

@media (max-width: 1000px) {
  .clubhouse-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .clubhouse-documents {
    padding: 26px 22px;
  }

  .clubhouse-doc-grid {
    grid-template-columns: 1fr;
  }

  .clubhouse-doc-card {
    min-height: auto;
    padding: 26px 22px;
  }

  .clubhouse-doc-card strong {
    max-width: none;
    font-size: 21px;
  }

  .clubhouse-doc-card small {
    max-width: none;
  }
}

/* Vorstand: Karten sauber und ruhig */
.board-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.board-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.board-card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.board-card-content {
  flex: 1;
  padding: 26px;
  background: #ffffff;
}

.board-position {
  margin: 0 0 10px;
  color: #11863f;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.board-card h3 {
  margin: 0 0 14px;
  color: #172033;
  font-size: 24px;
  line-height: 1.2;
}

.board-card p {
  margin: 0;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.7;
}

/* Verhindert, dass Joomla/Editor Links oder Bilder komisch unterstreicht */
.board-card a,
.board-card a:hover {
  color: inherit;
  text-decoration: none !important;
}

.board-card img {
  border: 0;
}

/* Mobile */
@media (max-width: 1000px) {
  .board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .board-grid {
    grid-template-columns: 1fr;
  }

  .board-card img {
    height: 340px;
  }

  .board-card-content {
    padding: 24px;
  }
}

/* Sponsoren: Karten und Abschlussbereich korrigieren */
.sponsors-page,
.tc-sponsors-page {
  max-width: 1180px;
  margin: 0 auto;
}

.sponsors-grid {
  max-width: 1180px;
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sponsor-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
}

.sponsor-logo {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #ffffff;
  border-bottom: 1px solid rgba(23, 32, 51, 0.1);
}

.sponsor-logo img {
  width: auto;
  max-width: 100%;
  max-height: 105px;
  object-fit: contain;
}

.sponsor-content {
  flex: 1;
  padding: 24px 26px 28px;
}

.sponsor-content p:first-child {
  margin: 0 0 12px;
  color: #11863f;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.sponsor-content h3 {
  margin: 0 0 14px;
  color: #172033;
  font-size: 24px;
  line-height: 1.2;
}

.sponsor-content p {
  color: #4b5563;
  line-height: 1.7;
}

.sponsor-content a {
  color: #0056c7;
  font-weight: 800;
}

/* Unterer Danke-/Infobereich */
.sponsors-thanks,
.sponsor-thanks,
.sponsors-note,
.sponsor-note {
  max-width: 1180px;
  margin: 34px auto 0;
  padding: 30px 34px;
  background: rgba(255, 255, 255, 0.95);
  border-left: 5px solid #11863f;
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
}

.sponsors-thanks h2,
.sponsor-thanks h2,
.sponsors-note h2,
.sponsor-note h2 {
  margin: 0 0 12px;
  color: #172033;
  font-size: 30px;
}

.sponsors-thanks p,
.sponsor-thanks p,
.sponsors-note p,
.sponsor-note p {
  margin: 0;
  color: #4b5563;
  line-height: 1.7;
}

/* Joomla darf keine Sponsoren-Karten abschneiden */
.com-content-article__body {
  overflow: visible;
}

@media (max-width: 1000px) {
  .sponsors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .sponsors-grid {
    grid-template-columns: 1fr;
  }

  .sponsor-logo {
    height: 130px;
  }

  .sponsor-content {
    padding: 22px;
  }

  .sponsors-thanks,
  .sponsor-thanks,
  .sponsors-note,
  .sponsor-note {
    padding: 26px 22px;
  }
}

/* Kontaktseite: Formular und Karte sauber darstellen */
.tc-contact-page {
  max-width: 1180px;
  margin: 0 auto;
}

.tc-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
  gap: 32px;
  align-items: start;
}

.tc-contact-card {
  padding: 32px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.tc-contact-card h2,
.tc-contact-card h3 {
  margin-top: 0;
  color: #172033;
}

.tc-contact-card p,
.tc-contact-card li {
  color: #4b5563;
  line-height: 1.7;
}

.tc-contact-form {
  display: grid;
  gap: 14px;
}

.tc-contact-form label {
  color: #172033;
  font-weight: 800;
}

.tc-contact-form input,
.tc-contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  background: #ffffff;
  color: #172033;
  font-size: 16px;
}

.tc-contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.tc-contact-form button,
.tc-contact-form input[type="submit"],
.tc-contact-form .btn {
  width: auto;
  justify-self: start;
  padding: 14px 22px;
  border: 0;
  border-radius: 6px;
  background: #11863f;
  color: #ffffff !important;
  font-weight: 800;
  cursor: pointer;
}

.tc-contact-form button:hover,
.tc-contact-form input[type="submit"]:hover,
.tc-contact-form .btn:hover {
  background: #0b6f33;
}

/* Karte mit Abstand unter dem Formular */
.tc-contact-map {
  margin-top: 32px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.tc-contact-map iframe {
  width: 100%;
  min-height: 430px;
  display: block;
  border: 0;
}

/* Falls die Karte direkt nach dem Formular kommt */
.tc-contact-form + .tc-contact-map {
  margin-top: 32px;
}

/* Joomla-Standard-Kontaktformular abfangen */
.com-contact,
.com-contact__container,
.contact,
.contact-form {
  max-width: 1180px;
  margin: 0 auto;
}

.com-contact form,
.contact-form form {
  padding: 32px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.com-contact input,
.com-contact textarea,
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  background: #ffffff;
  color: #172033;
}

.com-contact button,
.com-contact .btn,
.contact-form button,
.contact-form .btn {
  padding: 14px 22px;
  border: 0;
  border-radius: 6px;
  background: #11863f;
  color: #ffffff !important;
  font-weight: 800;
}

/* Mobile */
@media (max-width: 900px) {
  .tc-contact-grid {
    grid-template-columns: 1fr;
  }

  .tc-contact-card {
    padding: 26px 22px;
  }

  .tc-contact-map iframe {
    min-height: 360px;
  }
}

/* Menuebalken final schoener */
.container-header .container-nav {
  width: min(1320px, calc(100% - 64px));
  min-height: 58px;
  margin: 0 auto 0;
  padding: 0 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(218, 232, 239, 0.88) !important;
  backdrop-filter: blur(8px);
  border-radius: 0 0 8px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.container-header .mod-menu {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.container-header .mod-menu > li {
  position: relative;
  margin: 0;
  padding: 0;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  position: relative;
  display: block;
  padding: 18px 16px;
  color: #172033 !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  border-radius: 6px;
  transition: background 0.18s ease, color 0.18s ease;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > span:hover {
  background: rgba(255, 255, 255, 0.48);
  color: #0b6f33 !important;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li.current > span {
  color: #0056c7 !important;
  background: rgba(255, 255, 255, 0.36);
}

.container-header .mod-menu > li.active > a::after,
.container-header .mod-menu > li.current > a::after,
.container-header .mod-menu > li.active > span::after,
.container-header .mod-menu > li.current > span::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: #11863f;
}

/* Bearbeiten-Icon aus dem Menuefluss nehmen */
.container-header .icons,
.container-header .btn.jmodedit {
  position: absolute;
  right: 18px;
  top: 12px;
  z-index: 80;
}

/* Wenn viele Menuepunkte vorhanden sind */
@media (max-width: 1200px) {
  .container-header .container-nav {
    width: calc(100% - 32px);
    padding: 0 18px;
  }

  .container-header .mod-menu {
    gap: 4px;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    padding-left: 11px;
    padding-right: 11px;
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 800px) {
  .container-header .container-nav {
    width: calc(100% - 24px);
    min-height: auto;
    padding: 10px 12px;
    border-radius: 0 0 8px 8px;
  }

  .container-header .mod-menu {
    flex-wrap: wrap;
    gap: 6px;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    padding: 11px 10px;
    font-size: 14px;
  }

  .container-header .mod-menu > li.active > a::after,
  .container-header .mod-menu > li.current > a::after,
  .container-header .mod-menu > li.active > span::after,
  .container-header .mod-menu > li.current > span::after {
    bottom: 4px;
  }
}

/* Menuebalken kompakter und sauber zentriert */
.container-header .container-nav {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 80px);
  min-height: 54px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(218, 232, 239, 0.9) !important;
  backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  overflow: visible;
}

.container-header .mod-menu {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-header .mod-menu > li {
  margin: 0;
  padding: 0;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  color: #172033 !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  border-radius: 6px;
  transition: background 0.18s ease, color 0.18s ease;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > span:hover {
  background: rgba(255, 255, 255, 0.58);
  color: #0b6f33 !important;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li.current > span {
  color: #0056c7 !important;
  background: rgba(255, 255, 255, 0.62);
}

.container-header .mod-menu > li.active > a::after,
.container-header .mod-menu > li.current > a::after,
.container-header .mod-menu > li.active > span::after,
.container-header .mod-menu > li.current > span::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: #11863f;
}

/* Bearbeiten-Button rechts aus dem Menuebalken rausnehmen */
.container-header .icons,
.container-header .btn.jmodedit,
.container-header joomla-edit-button {
  position: fixed !important;
  right: 16px !important;
  top: 16px !important;
  z-index: 9999 !important;
}

/* Mehr Luft unter dem Menue */
.container-header {
  padding-bottom: 34px;
}

/* Wenn es enger wird */
@media (max-width: 1200px) {
  .container-header .container-nav {
    max-width: calc(100% - 32px);
    padding: 8px 12px;
  }

  .container-header .mod-menu {
    flex-wrap: wrap;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    min-height: 34px;
    padding: 0 10px;
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  .container-header .container-nav {
    width: calc(100% - 24px);
  }

  .container-header .mod-menu {
    gap: 4px;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    font-size: 13px;
  }
}

/* Logo-Groesse wirklich erzwingen */
.tc-site-top .tc-logo-link img,
.tc-site-top img.tc-header-logo,
.container-header .tc-header-logo,
.container-header .custom img.tc-header-logo,
.container-header img[src*="logo"] {
  width: 250px !important;
  height: 250px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Platz fuer groesseres Logo */
.tc-site-top {
  min-height: 160px !important;
}

.container-header .container-topbar {
  overflow: visible !important;
}

/* Abstand zwischen Logo und Menuebalken verkleinern */
.tc-site-top {
  min-height: 120px !important;
  padding-top: 4px !important;
  padding-bottom: 0 !important;
}

.container-header .container-topbar {
  margin-bottom: -72px !important;
}

.container-header .container-nav {
  margin-top: 0 !important;
}

.container-header {
  padding-bottom: 18px !important;
}

/* Termine in der rechten Spalte */
.container-sidebar-right {
  padding-top: 96px;
}

.container-sidebar-right .event-auto-list,
.container-sidebar-right .event-list-widget {
  width: 100%;
  padding: 26px 24px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.event-auto-list::before,
.event-list-widget::before {
  content: "Naechste Termine";
  display: block;
  margin-bottom: 18px;
  color: #11863f;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.event-auto-list .mod-articles-category,
.event-list-widget .mod-articles-category {
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-auto-list .mod-articles-category li,
.event-list-widget .mod-articles-category li {
  position: relative;
  min-height: 58px;
  margin: 0;
  padding: 0 0 18px 54px;
  border-bottom: 1px solid rgba(23, 32, 51, 0.12);
}

.event-auto-list .mod-articles-category li + li,
.event-list-widget .mod-articles-category li + li {
  padding-top: 18px;
}

.event-auto-list .mod-articles-category li:last-child,
.event-list-widget .mod-articles-category li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.event-auto-list .mod-articles-category li::before,
.event-list-widget .mod-articles-category li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #172033 0 4px, transparent 5px),
    #8bd30f;
  border: 2px solid #ffffff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

.event-auto-list .mod-articles-category li + li::before,
.event-list-widget .mod-articles-category li + li::before {
  top: 22px;
}

.event-auto-list .mod-articles-category-title,
.event-list-widget .mod-articles-category-title,
.event-auto-list .mod-articles-category a,
.event-list-widget .mod-articles-category a {
  display: block;
  color: #0056c7 !important;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none !important;
}

.event-auto-list .mod-articles-category-title:hover,
.event-list-widget .mod-articles-category-title:hover,
.event-auto-list .mod-articles-category a:hover,
.event-list-widget .mod-articles-category a:hover {
  color: #0b6f33 !important;
}

.event-auto-list .mod-articles-category-date,
.event-list-widget .mod-articles-category-date,
.event-auto-list time,
.event-list-widget time {
  display: block;
  margin-top: 7px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 800;
}

.event-auto-list .mod-articles-category-introtext,
.event-list-widget .mod-articles-category-introtext,
.event-auto-list p,
.event-list-widget p {
  margin: 8px 0 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.55;
}

/* Falls nur ein einzelner Beitrag statt Kategorie-Liste angezeigt wird */
.container-sidebar-right .moduletable.event-auto-list h3,
.container-sidebar-right .moduletable.event-list-widget h3 {
  margin: 0 0 12px;
  color: #0056c7;
  font-size: 21px;
  line-height: 1.2;
}

.container-sidebar-right .moduletable.event-auto-list p,
.container-sidebar-right .moduletable.event-list-widget p {
  color: #4b5563;
}

/* Bearbeiten-Icon in Terminbox nach rechts oben */
.container-sidebar-right .event-auto-list .icons,
.container-sidebar-right .event-list-widget .icons,
.container-sidebar-right .event-auto-list .btn.jmodedit,
.container-sidebar-right .event-list-widget .btn.jmodedit {
  position: absolute;
  right: 12px;
  top: 12px;
}

/* Mobile */
@media (max-width: 1000px) {
  .container-sidebar-right {
    padding-top: 24px;
  }
}

/* Terminbox rechts: einzelne Joomla-Beitraege schoener darstellen */
.container-sidebar-right .moduletable.event-auto-list,
.container-sidebar-right .moduletable.event-list-widget,
.container-sidebar-right .event-auto-list,
.container-sidebar-right .event-list-widget {
  position: relative;
  width: 100%;
  padding: 30px 26px 28px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

/* Ueberschrift oben */
.container-sidebar-right .event-auto-list::before,
.container-sidebar-right .event-list-widget::before,
.container-sidebar-right .moduletable.event-auto-list::before,
.container-sidebar-right .moduletable.event-list-widget::before {
  content: "NAECHSTE TERMINE";
  display: block;
  margin: 0 0 24px;
  color: #11863f;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Falls Joomla einzelne Artikel ausgibt */
.container-sidebar-right .event-auto-list .mod-articles-category-title,
.container-sidebar-right .event-list-widget .mod-articles-category-title,
.container-sidebar-right .event-auto-list h3,
.container-sidebar-right .event-list-widget h3,
.container-sidebar-right .moduletable.event-auto-list h3,
.container-sidebar-right .moduletable.event-list-widget h3 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 54px;
  color: #0056c7 !important;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.18;
}

/* Tennisball neben Termin */
.container-sidebar-right .event-auto-list h3::before,
.container-sidebar-right .event-list-widget h3::before,
.container-sidebar-right .moduletable.event-auto-list h3::before,
.container-sidebar-right .moduletable.event-list-widget h3::before,
.container-sidebar-right .event-auto-list .mod-articles-category-title::before,
.container-sidebar-right .event-list-widget .mod-articles-category-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #172033 0 4px, transparent 5px),
    #8bd30f;
  border: 2px solid #ffffff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

/* Text unter dem Titel */
.container-sidebar-right .event-auto-list p,
.container-sidebar-right .event-list-widget p,
.container-sidebar-right .moduletable.event-auto-list p,
.container-sidebar-right .moduletable.event-list-widget p {
  margin: 6px 0 0 54px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.55;
}

/* Links nicht wie normale Textlinks aussehen lassen */
.container-sidebar-right .event-auto-list a,
.container-sidebar-right .event-list-widget a,
.container-sidebar-right .moduletable.event-auto-list a,
.container-sidebar-right .moduletable.event-list-widget a {
  color: inherit;
  text-decoration: none !important;
}

/* Abstand zwischen mehreren Terminen */
.container-sidebar-right .event-auto-list article,
.container-sidebar-right .event-list-widget article,
.container-sidebar-right .event-auto-list li,
.container-sidebar-right .event-list-widget li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(23, 32, 51, 0.12);
}

.container-sidebar-right .event-auto-list article:last-child,
.container-sidebar-right .event-list-widget article:last-child,
.container-sidebar-right .event-auto-list li:last-child,
.container-sidebar-right .event-list-widget li:last-child {
  border-bottom: 0;
}

/* Bearbeiten-Icon nach rechts oben */
.container-sidebar-right .event-auto-list .icons,
.container-sidebar-right .event-list-widget .icons,
.container-sidebar-right .moduletable.event-auto-list .icons,
.container-sidebar-right .moduletable.event-list-widget .icons,
.container-sidebar-right .event-auto-list .btn.jmodedit,
.container-sidebar-right .event-list-widget .btn.jmodedit,
.container-sidebar-right .moduletable.event-auto-list .btn.jmodedit,
.container-sidebar-right .moduletable.event-list-widget .btn.jmodedit {
  position: absolute !important;
  right: 12px !important;
  top: 12px !important;
}

.container-sidebar-right .event-date {
  margin-top: 4px !important;
  color: #172033 !important;
  font-weight: 800;
}

.container-sidebar-right .event-location {
  color: #4b5563 !important;
}

Ja, das ist gerade zu aufgeblasen und zu stark zentriert. Wir machen die Terminbox wieder kompakt, linksbündig und mit Titel „Termine“.
Bitte diesen Block ganz unten in deine user.css einfügen:
/* Termine: kompakte saubere Box */
.container-sidebar-right {
  padding-top: 72px !important;
}

.container-sidebar-right .event-auto-list,
.container-sidebar-right .event-list-widget,
.container-sidebar-right .moduletable.event-auto-list,
.container-sidebar-right .moduletable.event-list-widget {
  position: relative;
  max-width: 330px;
  min-height: 0 !important;
  margin: 0 auto 24px;
  padding: 26px 24px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  text-align: left !important;
}

/* Titel oben: aus Naechste Termine wird Termine */
.container-sidebar-right .event-auto-list::before,
.container-sidebar-right .event-list-widget::before,
.container-sidebar-right .moduletable.event-auto-list::before,
.container-sidebar-right .moduletable.event-list-widget::before {
  content: "Termine" !important;
  display: block;
  margin: 0 0 22px;
  color: #11863f;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

/* Einzelner Termin */
.container-sidebar-right .event-auto-list h3,
.container-sidebar-right .event-list-widget h3,
.container-sidebar-right .moduletable.event-auto-list h3,
.container-sidebar-right .moduletable.event-list-widget h3 {
  position: relative;
  margin: 0 0 8px !important;
  padding-left: 48px !important;
  color: #172033 !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  text-align: left !important;
}

/* Tennisball */
.container-sidebar-right .event-auto-list h3::before,
.container-sidebar-right .event-list-widget h3::before,
.container-sidebar-right .moduletable.event-auto-list h3::before,
.container-sidebar-right .moduletable.event-list-widget h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #172033 0 4px, transparent 5px),
    #8bd30f;
  border: 2px solid #ffffff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

/* Datum und Beschreibung */
.container-sidebar-right .event-auto-list p,
.container-sidebar-right .event-list-widget p,
.container-sidebar-right .moduletable.event-auto-list p,
.container-sidebar-right .moduletable.event-list-widget p {
  margin: 6px 0 0 48px !important;
  color: #4b5563 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

.container-sidebar-right .event-date {
  color: #172033 !important;
  font-weight: 900 !important;
}

.container-sidebar-right .event-location {
  color: #4b5563 !important;
}

/* Links in der Terminbox */
.container-sidebar-right .event-auto-list a,
.container-sidebar-right .event-list-widget a,
.container-sidebar-right .moduletable.event-auto-list a,
.container-sidebar-right .moduletable.event-list-widget a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Bearbeiten-Icon nur fuer dich sichtbar, sauber positioniert */
.container-sidebar-right .event-auto-list .icons,
.container-sidebar-right .event-list-widget .icons,
.container-sidebar-right .moduletable.event-auto-list .icons,
.container-sidebar-right .moduletable.event-list-widget .icons,
.container-sidebar-right .event-auto-list .btn.jmodedit,
.container-sidebar-right .event-list-widget .btn.jmodedit,
.container-sidebar-right .moduletable.event-auto-list .btn.jmodedit,
.container-sidebar-right .moduletable.event-list-widget .btn.jmodedit {
  position: absolute !important;
  right: 12px !important;
  top: 12px !important;
}

/* Auf Handy unter den Inhalt setzen */
@media (max-width: 1000px) {
  .container-sidebar-right {
    padding-top: 24px !important;
  }

  .container-sidebar-right .event-auto-list,
  .container-sidebar-right .event-list-widget,
  .container-sidebar-right .moduletable.event-auto-list,
  .container-sidebar-right .moduletable.event-list-widget {
    max-width: 100%;
  }
}

/* Termin-Titel moeglichst in einer Zeile halten */
.container-sidebar-right .event-auto-list h3,
.container-sidebar-right .event-list-widget h3,
.container-sidebar-right .moduletable.event-auto-list h3,
.container-sidebar-right .moduletable.event-list-widget h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  padding-left: 44px !important;
}

/* Terminbox etwas breiter machen */
.container-sidebar-right .event-auto-list,
.container-sidebar-right .event-list-widget,
.container-sidebar-right .moduletable.event-auto-list,
.container-sidebar-right .moduletable.event-list-widget {
  max-width: 380px !important;
}

/* Text passend zum kleineren Titel einruecken */
.container-sidebar-right .event-auto-list p,
.container-sidebar-right .event-list-widget p,
.container-sidebar-right .moduletable.event-auto-list p,
.container-sidebar-right .moduletable.event-list-widget p {
  margin-left: 44px !important;
}

/* Auf kleinen Bildschirmen darf der Titel wieder umbrechen */
@media (max-width: 1000px) {
  .container-sidebar-right .event-auto-list h3,
  .container-sidebar-right .event-list-widget h3,
  .container-sidebar-right .moduletable.event-auto-list h3,
  .container-sidebar-right .moduletable.event-list-widget h3 {
    white-space: normal !important;
  }
}

/* Automatische Termine als schoene Sidebar-Liste */
.container-sidebar-right .tc-events-auto {
  width: 100%;
  max-width: 390px;
  margin: 0 auto 24px;
  padding: 26px 24px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.container-sidebar-right .tc-events-auto::before {
  content: "Termine";
  display: block;
  margin-bottom: 20px;
  color: #11863f;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.container-sidebar-right .tc-events-auto ul,
.container-sidebar-right .tc-events-auto .mod-articles-category {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-sidebar-right .tc-events-auto li {
  position: relative;
  margin: 0;
  padding: 0 0 18px 50px;
  border-bottom: 1px solid rgba(23, 32, 51, 0.12);
}

.container-sidebar-right .tc-events-auto li + li {
  padding-top: 18px;
}

.container-sidebar-right .tc-events-auto li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.container-sidebar-right .tc-events-auto li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #172033 0 4px, transparent 5px),
    #8bd30f;
  border: 2px solid #ffffff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

.container-sidebar-right .tc-events-auto li + li::before {
  top: 19px;
}

.container-sidebar-right .tc-events-auto a,
.container-sidebar-right .tc-events-auto .mod-articles-category-title {
  display: block;
  color: #172033 !important;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none !important;
}

.container-sidebar-right .tc-events-auto .mod-articles-category-introtext,
.container-sidebar-right .tc-events-auto p {
  margin: 7px 0 0;
  color: #4b5563 !important;
  font-size: 14px;
  line-height: 1.5;
}

.container-sidebar-right .tc-events-auto .event-date {
  color: #172033 !important;
  font-weight: 900;
}

.container-sidebar-right .tc-events-auto .event-location {
  color: #4b5563 !important;
}

/* Clubhaus Dokumente: nur zwei Karten */
.clubhouse-doc-grid.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin: 0 auto;
}

/* Clubhaus Kalender */
.clubhouse-calendar-box {
  max-width: 1180px;
  margin: 32px auto;
  padding: 34px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.clubhouse-calendar-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.clubhouse-calendar-kicker {
  margin: 0 0 6px;
  color: #11863f;
  font-weight: 900;
  text-transform: uppercase;
}

.clubhouse-calendar-head h2 {
  margin: 0;
  color: #172033;
  font-size: 30px;
}

.clubhouse-calendar-head p {
  margin: 0;
  color: #4b5563;
}

.clubhouse-calendar {
  overflow: hidden;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

.calendar-month {
  padding: 18px 22px;
  background: #11863f;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays span {
  padding: 12px;
  background: #eefaf2;
  color: #172033;
  font-weight: 900;
  text-align: center;
}

.calendar-day {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(23, 32, 51, 0.1);
  border-right: 1px solid rgba(23, 32, 51, 0.1);
  color: #172033;
  font-size: 18px;
  font-weight: 800;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day.is-muted {
  color: #9ca3af;
  background: #f7f8fa;
}

.calendar-day.is-booked {
  background: #d92d20;
  color: #ffffff;
}

@media (max-width: 700px) {
  .clubhouse-doc-grid.is-two {
    grid-template-columns: 1fr;
  }

  .clubhouse-calendar-box {
    padding: 26px 18px;
  }

  .clubhouse-calendar-head {
    display: block;
  }

  .calendar-day {
    min-height: 48px;
    font-size: 15px;
  }
}

/* Clubhaus Google Kalender */
.clubhouse-calendar-box {
  max-width: 1180px;
  margin: 32px auto;
  padding: 34px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.clubhouse-calendar-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.clubhouse-calendar-kicker {
  margin: 0 0 6px;
  color: #11863f;
  font-weight: 900;
  text-transform: uppercase;
}

.clubhouse-calendar-head h2 {
  margin: 0;
  color: #172033;
  font-size: 30px;
}

.clubhouse-calendar-head p {
  margin: 0;
  color: #4b5563;
}

.clubhouse-google-calendar {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  background: #ffffff;
}

.clubhouse-google-calendar iframe {
  width: 100%;
  min-height: 620px;
  display: block;
}

@media (max-width: 700px) {
  .clubhouse-calendar-box {
    padding: 26px 18px;
  }

  .clubhouse-calendar-head {
    display: block;
  }

  .clubhouse-google-calendar iframe {
    min-height: 520px;
  }
}

/* Clubhaus Slideshow: Bilder als automatische Slideshow */
.clubhouse-slideshow {
  position: relative;
  max-width: 1180px;
  height: 430px;
  margin: 32px auto;
  overflow: hidden;
  border-radius: 8px;
  background: #eef1f5;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.clubhouse-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: clubhouseFade 25s infinite;
}

.clubhouse-slide:nth-child(1) {
  animation-delay: 0s;
}

.clubhouse-slide:nth-child(2) {
  animation-delay: 5s;
}

.clubhouse-slide:nth-child(3) {
  animation-delay: 10s;
}

.clubhouse-slide:nth-child(4) {
  animation-delay: 15s;
}

.clubhouse-slide:nth-child(5) {
  animation-delay: 20s;
}

.clubhouse-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@keyframes clubhouseFade {
  0% {
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  26% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .clubhouse-slideshow {
    height: 300px;
  }
}