/*--------------------------------------------------------------
  Buchungssystem – Design wie die Vereinsseite (Joomla / Gantry 5)
  Wird nach style.css geladen und überschreibt dort bewusst.
  Farben und Schrift (Roboto) entsprechen dem Gantry-Preset der Vereinsseite.
--------------------------------------------------------------*/

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --dj-blue: #1867a9;
  --dj-blue-dark: #124e82;
  --dj-blue-mid: #3180c2;
  --dj-blue-soft: #eaf2fa;
  --dj-gold: #ef6c00;
  --dj-ink: #444444;
  --dj-text: #666666;
  --dj-muted: #777777;
  --dj-bg: #ffffff;
  --dj-line: #e0e0e0;
  --dj-ok: #1a7f4b;
  --dj-warn: #b45309;
  --dj-danger: #c0392b;
  --dj-radius: 12px;
  --dj-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* ---------- Basis ---------- */
html, body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dj-text);
}
body {
  background: var(--dj-bg);
}
#page {
  overflow: visible;
}
/* Footer immer am unteren Rand, auch bei kurzen Seiten */
#page.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#page.site > .site-content-contain {
  flex: 1 0 auto;
  min-height: 0;
}
#page.site > footer.site-footer {
  flex-shrink: 0;
}
h1, h2, h3 {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 700;
  color: var(--dj-ink);
  text-transform: none;
  letter-spacing: 0;
}
h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 1rem; }
h2, .h2 { font-size: 1.4rem; line-height: 1.3; }
a { color: var(--dj-blue-mid); }
a:hover { color: var(--dj-blue-dark); }

.site-content-contain {
  margin-top: 0;
  min-height: 50vh;
}
.entry-content h1,
.entry-content h2 {
  margin-top: 2rem;
}

/* ---------- Header: blaues Banner + Navigationsleiste wie auf der Vereinsseite ---------- */
header#header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: auto;
  background: none;
  box-shadow: none;
  border: 0;
  z-index: 100;
  box-shadow: none;
  transition: box-shadow .2s;
}
.site-header__top {
  background: var(--dj-blue);
  color: #fff;
}
.site-header__top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 134px;
  gap: 1rem;
}
header#header .site-branding {
  position: static;
  transform: none;
  width: auto;
  max-width: 100%;
}
header#header .site-branding__link {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
  color: #fff;
}
header#header .site-branding img {
  width: auto;
  height: 76px;
  flex: none;
}
header#header .site-branding__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
header#header .site-branding__text strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
header#header .site-branding__text small {
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
}
.site-header__cta {
  flex: none;
  background: #fff;
  color: var(--dj-blue) !important;
  font-weight: 700;
  font-size: 1.15rem;
  padding: .8rem 1.5rem;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
  text-decoration: none !important;
  transition: background-color .2s, color .2s;
}
.site-header__cta:hover {
  background: var(--dj-blue-soft);
  color: var(--dj-blue-dark) !important;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: .7rem 1.4rem;
  border-radius: 6px;
  border-width: 2px;
  transition: background-color .2s, border-color .2s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary,
.btn-secondary {
  background: var(--dj-blue);
  border-color: var(--dj-blue);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background: var(--dj-blue-dark) !important;
  border-color: var(--dj-blue-dark) !important;
}
.btn:focus-visible {
  outline: 3px solid rgba(24, 103, 169, .35) !important;
  outline-offset: 2px;
}
/* sekundäre Aktionen */
.fahrt-buchen .btn.add-t {
  background: #fff;
  border-color: var(--dj-blue);
  color: var(--dj-blue) !important;
}
.fahrt-buchen .btn.add-t:hover {
  background: var(--dj-blue-soft) !important;
  border-color: var(--dj-blue) !important;
}
.fahrt-buchen .btn.delete-t {
  background: transparent;
  border-color: var(--dj-danger);
  color: var(--dj-danger) !important;
  padding: .4rem .9rem;
  font-size: .85rem;
}
.fahrt-buchen .btn.delete-t:hover {
  background: var(--dj-danger);
  color: #fff !important;
}

/* ---------- Seitentitel wie "Anmeldung zu den Skifahrten" ---------- */
.fahrt-buchen h1,
.entry-content h1 {
  color: var(--dj-ink);
  font-weight: 700;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--dj-blue);
  margin-bottom: 1.25rem;
}

/* ---------- Fahrten-Liste als Karten ---------- */
.fahrten {
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}
.fahrten .fahrt-card-col {
  margin-bottom: 1.25rem;
}
.fahrt-card {
  display: grid;
  grid-template-columns: 230px 1fr auto;
  gap: 0 1.75rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--dj-line);
  border-radius: 12px;
  box-shadow: var(--dj-shadow);
  padding: 1.5rem 1.75rem;
  transition: border-color .2s, box-shadow .2s;
}
.fahrt-card:hover {
  border-color: var(--dj-blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.fahrt-card.is-full {
  background: #fafafa;
}
.fahrt-card.is-full:hover { border-color: var(--dj-line); }
.fahrt-card__art {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dj-blue-dark);
  background: var(--dj-blue-soft);
  border-radius: 999px;
  padding: .2rem .7rem;
  margin-bottom: .6rem;
}
.fahrt-card__date {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dj-ink);
}
.fahrt-card__ort {
  margin-top: .35rem;
  color: var(--dj-muted);
  font-weight: 500;
}
.fahrt-card__ort::before {
  content: '';
  display: inline-block;
  width: .65em;
  height: .65em;
  border-radius: 50%;
  background: var(--dj-gold);
  margin-right: .5em;
}
.fahrt-card__text {
  font-size: .95rem;
  color: var(--dj-text);
  max-width: 62ch;
}
.fahrt-card__text p:last-child { margin-bottom: 0; }
.fahrt-card__action {
  text-align: right;
  min-width: 180px;
}
.fahrt-card__action form { margin: 0; }
.fahrt-card__action .btn { white-space: nowrap; }
.fahrt-badge {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .25rem .8rem;
  margin-bottom: .75rem;
  color: var(--dj-ok);
  background: #e6f4ec;
}
.fahrt-badge.is-low  { color: var(--dj-warn); background: #fdf0dc; }
.fahrt-badge.is-full { color: #4b5563; background: #e5e7eb; }

/* ---------- Fortschrittsanzeige ---------- */
.bs-steps {
  display: flex;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  counter-reset: step;
}
.bs-steps li {
  position: relative;
  flex: 1;
  text-align: center;
  font-size: .8rem;
  font-weight: 500;
  color: var(--dj-muted);
  counter-increment: step;
}
.bs-steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto .4rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dj-line);
  color: var(--dj-muted);
  position: relative;
  z-index: 1;
}
.bs-steps li::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(-50% + 17px);
  width: calc(100% - 34px);
  height: 2px;
  background: var(--dj-line);
}
.bs-steps li:first-child::after { display: none; }
.bs-steps li.is-done::before {
  content: '\2713';
  background: var(--dj-blue);
  border-color: var(--dj-blue);
  color: #fff;
}
.bs-steps li.is-done::after,
.bs-steps li.is-current::after { background: var(--dj-blue); }
.bs-steps li.is-current { color: var(--dj-ink); font-weight: 700; }
.bs-steps li.is-current::before {
  background: var(--dj-gold);
  border-color: var(--dj-gold);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(239, 108, 0, .2);
}

/* ---------- Buchungsformular ---------- */
.container.fahrt-buchen {
  max-width: 820px;
}
.fahrt-buchen h1 {
  font-size: 1.6rem;
}
/* Info-Box (Beschreibung) wie "Wichtiger Hinweis" */
.fahrt-buchen .beschreibung {
  background: var(--dj-blue-soft);
  border-left: 4px solid var(--dj-blue);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-size: .95rem;
  color: var(--dj-text);
}
.fahrt-buchen form::after {
  content: '';
  display: table;
  clear: both;
}
.fahrt-buchen .title {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: none;
  color: var(--dj-ink);
  margin-bottom: .25rem !important;
}
.fahrt-buchen .subtitle {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dj-blue);
  margin: 1.25rem 0 .75rem;
}
.fahrt-buchen .teilnehmer-infos,
.fahrt-buchen .teilnehmer-zusatz,
.fahrt-buchen .teilnehmer-zusammenfassung,
.fahrt-buchen .zahlung,
.fahrt-buchen .no-id {
  background: #fff;
  border: 1px solid var(--dj-line);
  border-radius: var(--dj-radius);
  box-shadow: var(--dj-shadow);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
}
.fahrt-buchen .teilnehmer-infos .subtitle:first-of-type { margin-top: .5rem; }

/* Eingabefelder: Label links, Feld rechts – am Handy untereinander */
.fahrt-buchen .input-group {
  flex-wrap: nowrap;
  margin-bottom: .85rem !important;
}
.fahrt-buchen .input-group * {
  font-family: 'Roboto', Arial, sans-serif;
}
.fahrt-buchen .input-group .input-group-prepend {
  width: 170px;
}
.fahrt-buchen .input-group .input-group-prepend .input-group-text {
  width: 100%;
  background: var(--dj-blue-soft);
  border: 1px solid var(--dj-line);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  color: var(--dj-ink);
  font-size: .9rem;
  font-weight: 500;
}
.fahrt-buchen .form-control,
.fahrt-buchen .custom-select {
  height: 46px;
  border: 1px solid var(--dj-line);
  border-radius: 0 6px 6px 0;
  font-size: 1rem;
  color: var(--dj-ink);
  box-shadow: none;
}
.fahrt-buchen textarea.form-control {
  height: auto;
  min-height: 110px;
  resize: vertical;
}
.fahrt-buchen .form-control:focus,
.fahrt-buchen .custom-select:focus {
  border-color: var(--dj-blue);
  box-shadow: 0 0 0 3px rgba(24, 103, 169, .18);
  z-index: 3;
}
.fahrt-buchen .input-group-append .input-group-text {
  background: #fff;
  border: 1px solid var(--dj-line);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  font-weight: 700;
  color: var(--dj-blue-dark);
  min-width: 82px;
  justify-content: flex-end;
}
.fahrt-buchen .input-group:has(.input-group-append) .custom-select {
  border-radius: 0;
}
.fahrt-buchen .required:after {
  color: var(--dj-danger);
}

/* Tagesauswahl */
.fahrt-buchen .tages-auswahl label {
  font-weight: 500;
  margin-bottom: .35rem;
}
.fahrt-buchen .tages-auswahl input[type=checkbox] {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  accent-color: var(--dj-blue);
}
.fahrt-buchen .text-danger {
  font-size: .85rem;
  background: #fdf0ee;
  border-radius: 4px;
  padding: .6rem .9rem;
  color: var(--dj-danger) !important;
}

.fahrt-buchen .submit {
  float: right;
  margin-top: .5rem;
  padding: .85rem 2rem;
}
.fahrt-buchen .add-t {
  margin-bottom: 1.5rem;
}
.fahrt-buchen .max-teilnehmer {
  color: var(--dj-warn);
}

/* Zusammenfassung */
.fahrt-buchen .zusammenfassung-buchung .teilnehmer-zusammenfassung {
  padding-bottom: 1.25rem;
}
.fahrt-buchen .zusammenfassung-buchung .teilnehmer-zusammenfassung .row {
  font-size: 1rem;
  margin-left: 0;
  margin-right: 0;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--dj-line);
}
.fahrt-buchen .zusammenfassung-buchung .teilnehmer-zusammenfassung .row > div:first-child {
  color: var(--dj-muted);
  font-weight: 500;
}
.fahrt-buchen .zusammenfassung-buchung .teilnehmer-zusammenfassung .preis {
  font-weight: 700;
  white-space: nowrap;
}
.fahrt-buchen .zusammenfassung-buchung .teilnehmer-zusammenfassung .zwischensumme {
  border-bottom: 0;
  padding-top: .9rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.fahrt-buchen .zusammenfassung-buchung .teilnehmer-zusammenfassung .zwischensumme .col-md-12 {
  text-align: right;
}
.fahrt-buchen .gesamtsumme {
  font-size: 1.6rem !important;
  font-weight: 700;
  color: var(--dj-ink);
  background: #fff;
  border: 2px solid var(--dj-gold);
  border-radius: var(--dj-radius);
  padding: 1rem 1.5rem;
  text-align: right;
}
.fahrt-buchen .zahlung .gesamtsumme {
  text-align: left;
}
/* Das Bank-Formular wird per JS eingeblendet – hier nur Optik */
.fahrt-buchen .zahlung .bankeinzug {
  background: var(--dj-blue-soft);
  border-radius: 6px;
  padding: .25rem 1rem 1rem;
  margin-bottom: 1rem;
}
.fahrt-buchen .zahlung .row {
  margin-left: 0;
  margin-right: 0;
}
.fahrt-buchen .zahlung .row .col-md-6 { padding-left: 0; padding-right: 0; }
.fahrt-buchen .zahlung .row .col-md-6:empty { display: none; }

/* Fehlerseite / Danke-Seite */
.fahrt-buchen .subtitle + a.btn,
.fahrt-buchen > .row a.btn:only-child {
  margin-top: .5rem;
}
.fahrt-buchen .no-id a {
  color: var(--dj-blue);
}

/* ---------- Footer wie auf der Vereinsseite (grau, weiße Schrift, kompakt) ---------- */
footer.site-footer {
  background: #333333;
  border-top: 1px solid rgba(0, 0, 0, .05);
  padding: 1.1rem 0 .9rem;
  color: #fff;
  font-size: .85rem;
  line-height: 1.45;
}
footer.site-footer .container {
  display: block;
  color: #fff;
}
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 3rem;
  margin-bottom: .6rem;
}
.site-footer__col {
  line-height: 1.45;
}
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.55;
}
footer.site-footer a {
  color: #fff;
  text-decoration: none;
}
footer.site-footer a:hover,
footer.site-footer a:focus {
  color: #fff;
  text-decoration: underline;
}
.site-footer__copy {
  font-size: .75rem;
  color: rgba(255, 255, 255, .8);
}
@media (max-width: 767px) {
  footer.site-footer { text-align: center; }
  .site-footer__grid { justify-content: center; }
}
/* ---------- Tablet / Handy ---------- */
@media (max-width: 991px) {
  .fahrt-card {
    grid-template-columns: 1fr;
    gap: 1rem 0;
    padding: 1.25rem;
  }
  .fahrt-card__action {
    text-align: left;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  h1 { font-size: 1.5rem; }
  .site-header__top .container { min-height: 0; padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; }
  header#header .site-branding img { height: 56px; }
  header#header .site-branding__text strong { font-size: 1.15rem; }
  header#header .site-branding__text small { font-size: .8rem; }
  .site-header__cta { font-size: .95rem; padding: .55rem 1rem; }

  .fahrt-buchen .input-group {
    flex-wrap: wrap;
  }
  .fahrt-buchen .input-group .input-group-prepend {
    width: 100%;
  }
  .fahrt-buchen .input-group .input-group-prepend .input-group-text {
    border-right: 1px solid var(--dj-line);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
  }
  .fahrt-buchen .form-control,
  .fahrt-buchen .custom-select {
    flex: 1 1 100%;
    width: 100%;
    border-radius: 0 0 6px 6px;
  }
  .fahrt-buchen .input-group:has(.input-group-append) .custom-select {
    flex: 1 1 0;
    width: auto;
    border-radius: 0 0 0 6px;
  }
  .fahrt-buchen .input-group-append .input-group-text {
    border-radius: 0 0 6px 0;
  }
  .fahrt-buchen .teilnehmer-infos,
  .fahrt-buchen .teilnehmer-zusatz,
  .fahrt-buchen .teilnehmer-zusammenfassung,
  .fahrt-buchen .zahlung,
  .fahrt-buchen .no-id {
    padding: 1.1rem;
  }
  .fahrt-buchen .submit {
    float: none;
    width: 100%;
  }
  .fahrt-buchen .btn.add-t { width: 100%; }
  .fahrt-buchen .gesamtsumme { font-size: 1.3rem !important; }
  .bs-steps li { font-size: .68rem; }
  .bs-steps li::before { width: 28px; height: 28px; font-size: .8rem; }
  .bs-steps li::after { top: 13px; left: calc(-50% + 14px); width: calc(100% - 28px); }
  .fahrt-buchen .zusammenfassung-buchung .teilnehmer-zusammenfassung .preis { text-align: left; }
}

/* Gesamtsumme-Box: eigene Breite, kein Überlaufen durch Bootstrap-Spalten */
.fahrt-buchen .zusammenfassung-buchung > .row,
.fahrt-buchen .zahlung > .row {
  margin: 0 0 1.5rem;
  justify-content: flex-end;
}
.fahrt-buchen .zahlung > .row { justify-content: flex-start; }
.fahrt-buchen .zusammenfassung-buchung > .row > .col-md-6:empty { display: none; }
.fahrt-buchen .row .col-md-6.gesamtsumme {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  padding: 1rem 1.5rem;
}

/* Spamschutz: Honeypot-Feld unsichtbar (für Menschen und Screenreader) */
.bs-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Datenschutz-Einwilligung */
.fahrt-buchen .bs-consent {
  background: var(--dj-blue-soft);
  border-left: 4px solid var(--dj-blue);
  border-radius: 4px;
  padding: .9rem 1.1rem;
  margin: 1rem 0;
  font-size: .95rem;
}
.fahrt-buchen .bs-consent label {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: 0;
  cursor: pointer;
}
.fahrt-buchen .bs-consent input[type=checkbox] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: .15rem;
  accent-color: var(--dj-blue);
}


/* Fahrtenliste: sofort sichtbar, ohne große Abstände; auf der Buchungsseite volle Breite */
.fahrten { margin-top: .5rem; margin-bottom: 2rem; }
.fahrten-liste { display: flex; flex-direction: column; gap: 1.1rem; }
.fahrten-leer { padding: 2rem 0; }
.entry-content h1, .entry-content h2 { margin-top: 1.25rem; }
.fahrt-buchen--liste.container { max-width: 1200px; }
.fahrt-buchen--liste .subtitle-text { margin: -.25rem 0 1.25rem; color: var(--dj-text); }
.site-content-contain .content-wrapper { padding-top: 0; }

/* ---------- Fixierter Header: beim Scrollen kompakter ---------- */
.site-header__top .container,
header#header .site-branding img,
header#header .site-branding__text strong {
  transition: min-height .2s ease, height .2s ease, font-size .2s ease;
}
header#header.is-scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
header#header.is-scrolled .site-header__top .container {
  min-height: 72px;
}
header#header.is-scrolled .site-branding img {
  height: 48px;
}
header#header.is-scrolled .site-branding__text strong {
  font-size: 1.2rem;
}
header#header.is-scrolled .site-branding__text small {
  display: none;
}
header#header.is-scrolled .site-header__cta {
  padding: .5rem 1.1rem;
  font-size: 1rem;
}
@media (max-width: 767px) {
  header#header.is-scrolled .site-header__top .container { padding-top: .5rem; padding-bottom: .5rem; }
  header#header.is-scrolled .site-branding img { height: 40px; }
  header#header.is-scrolled .site-branding__text strong { font-size: 1rem; }
}
/* Fixierter Header am Handy: beim Scrollen eine einzige schlanke Zeile */
@media (max-width: 767px) {
  header#header.is-scrolled .site-header__top .container {
    flex-wrap: nowrap;
    min-height: 0;
    gap: .5rem;
  }
  header#header.is-scrolled .site-branding__link { gap: .6rem; }
  header#header.is-scrolled .site-branding__text strong { font-size: .95rem; white-space: nowrap; }
  header#header.is-scrolled .site-header__cta {
    padding: .4rem .7rem;
    font-size: .85rem;
    white-space: nowrap;
  }
}
/* Buchungsseite: Liste bündig mit Header und Footer (ab Containerbreite) */
@media (min-width: 1230px) {
  .fahrt-buchen--liste.container { padding-left: 0; padding-right: 0; }
}