/**
 * TONI.go – Einheitliches Layout für Kundenseiten (Teilnehmer/Gäste)
 * Mobile-first, PC-tauglich, konsistente Größen.
 */
:root {
  --fanbus-accent: #55b6c5;
  --fanbus-accent-hover: #25717d;
  --fanbus-accent-dark: #349aaa;
  --fanbus-accent-soft: #d4eef1;
  --fanbus-bg: #eef4f5;
  --fanbus-text: #263340;
  --fanbus-line: #d4dde3;
  --fanbus-muted: #5c6b78;
  --rot: #55b6c5;
  --rot-dunkel: #25717d;
  --rot-hell: #d4eef1;
  --rot-border: #b8dce3;
  --danger: #c31924;
  --grau: #5a5a5a;
  --gruen: #2e7d32;
  --text-primary: #4a4a4a;
  --text-secondary: #5c5c5c;
  --text-muted: #6b6b6b;
  /* Einheitliche Schriftgrößen */
  --font-base: 1rem;
  --font-small: 0.9rem;
  --font-label: 0.95rem;
  --font-heading: 1.25rem;
  --font-heading-lg: 1.5rem;
  /* Buttons & Touch-Targets (min 44px) */
  --btn-padding-y: 14px;
  --btn-padding-x: 18px;
  --btn-font: 1rem;
  --btn-gap: 10px;
  /* Cards */
  --card-padding: 20px;
  --card-gap: 16px;
  /* Layout */
  --max-narrow: 480px;
  --max-content: 560px;
  --max-wide: 900px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--fanbus-bg);
  padding: 0 20px 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  min-height: 100vh;
  color: var(--text-primary);
  font-size: var(--font-base);
  -webkit-font-smoothing: antialiased;
}

/* Mobile-first: Standard schmal, dann breiter */
.kunde-wrap {
  max-width: var(--max-narrow);
  width: 100%;
  margin: 0 auto;
  padding-top: 60px;
  overflow-x: hidden;
}
@media (min-width: 560px) {
  .kunde-wrap { max-width: var(--max-content); }
}
@media (min-width: 768px) {
  .kunde-wrap { max-width: 560px; }
}

/* Header: FANBUS-Akzent (Verlauf wie MyOffice) */
.kunde-head {
  background: linear-gradient(180deg, var(--fanbus-accent-dark) 0%, var(--fanbus-accent) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.kunde-head-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.kunde-head-inner--portal {
  justify-content: flex-start;
  text-align: left;
  gap: 28px;
}
/* Drei zentrierte Zeilen: TONI, by FANBUS.KOELN, Tagline */
.kunde-head--toni-centered .kunde-head-inner {
  justify-content: center;
  text-align: center;
}
.kunde-head--toni-centered .kunde-head-text {
  text-align: center;
}
.kunde-head--toni-centered .kunde-head-sub {
  margin-top: 6px;
}
.kunde-head-text { flex: 0 1 auto; }

/* Logo: kein festes Quadrat (wirkte wie „Bett“); echtes Alpha-PNG nutzt die volle Silhouette */
.kunde-head img,
.kunde-head .kunde-head-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: 96px;
  max-width: min(280px, 88vw);
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}

@media (min-width: 480px) {
  .kunde-head img,
  .kunde-head .kunde-head-logo {
    max-height: 110px;
    max-width: min(300px, 85vw);
  }
}

.kunde-head .kunde-head-brand {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 2px;
}
.kunde-head .kunde-head-toni-title {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0 0 2px;
}
.kunde-head .kunde-head-by {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.kunde-head--portal .kunde-head-brand {
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: #fff;
}
.kunde-head--portal .kunde-head-toni-title {
  font-size: 2rem;
}
.kunde-head--portal .kunde-head-by {
  font-size: 0.85rem;
}

.kunde-head .kunde-head-title {
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 0 4px;
  color: #fff;
}

.kunde-head .kunde-head-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.kunde-head-slogan { margin: 6px 0 0; }
.kunde-head-slogan-1 {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}
.kunde-head-slogan-2 {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 4px;
}

/* Ebenen-Breadcrumb: Stufe 1 (Kundenportal) → Stufe 2 (konkrete Fahrt) */
.kunde-ebene-breadcrumb {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  letter-spacing: 0.02em;
}

/* Kundenportal-/Teilnehmerportal-Badge: präsenter Hinweis („Adressleiste“) */
.kunde-portal-badge {
  margin: 0 0 18px 0;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}
.kunde-portal-badge--prominent .kunde-portal-badge-text {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.kunde-portal-badge-text {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.03em;
}

/* Informationsdienst – Abfahrt/Treffpunkt exponiert (Alle meine Fahrten: Mini-Strip) */
.info-dienst-mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: -16px -16px 12px -16px;
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  color: #fff;
  border-radius: 12px 12px 0 0;
  font-size: 0.9rem;
}
.info-dienst-mini .info-dienst-label {
  font-weight: 700;
  opacity: 0.95;
}
.info-dienst-mini span:last-child {
  opacity: 0.95;
}

/* Informationsdienst – Hero-Block (Mein Konto: großer Hingucker) */
.info-dienst-hero {
  margin: 0 0 20px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 35, 126, 0.25);
}
.info-dienst-hero-inner {
  padding: 20px 24px;
  background: linear-gradient(135deg, #1a237e 0%, #3949ab 50%, #283593 100%);
  color: #fff;
}
.info-dienst-hero-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 6px;
}
.info-dienst-hero-zeit {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.info-dienst-hero-ort {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 6px;
  opacity: 0.95;
}

/* Mitfahrportal-Block – helle Kachel, Grau/Rot als Akzent, nicht alles blau */
.portal-spiegel-hero {
  margin-bottom: 22px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 4px solid #5c6bc0;
}
.portal-spiegel-hero-inner {
  padding: 20px 22px;
  background: #fffefc;
  color: #2c2c2c;
}
.portal-spiegel-hero-titel {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: #333;
}
.portal-spiegel-hero-sub {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}

/* ========== Alle meine Fahrten – einheitliches Karten-System ==========
 * Eine Karten-Art, ein Abstand, ein Schatten. Akzente nur links (optional).
 */
.kunde-page-card {
  background: #fffefc;
  border: 1px solid #e0ddd8;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.kunde-page-card--accent-gruen { border-left: 4px solid #5c7c5c; }
.kunde-page-card--accent-grau  { border-left: 4px solid #7e8b99; }
.kunde-page-card--accent-blau { border-left: 4px solid #5c6bc0; }
.kunde-card .kunde-page-card { background: #fafaf8; }

.kunde-intro {
  margin: 0 0 16px;
  padding: 14px 18px;
  font-size: var(--font-label);
  color: #333;
}
.kunde-intro,
.kunde-portal-infos { background: #fffefc; border: 1px solid #e0ddd8; border-radius: 14px; }
.kunde-portal-infos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 16px 20px;
  margin-bottom: 16px;
  font-size: var(--font-small);
  color: #333;
}
.kunde-portal-infos .kunde-portal-slogan {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #e0ddd8;
  font-weight: 600;
  color: #2c5c2c;
}
@media (min-width: 480px) {
  .kunde-portal-infos { grid-template-columns: 1fr 1fr 1fr; }
}

.kunde-section {
  margin-bottom: 20px;
}
.kunde-section:last-child { margin-bottom: 0; }
.kunde-section-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
}
.kunde-section-desc {
  margin: 0 0 12px;
  font-size: var(--font-small);
  color: #555;
  line-height: 1.45;
}
.kunde-buchung-item {
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: var(--font-small);
}
.kunde-buchung-item strong { color: var(--text-secondary); }
.kunde-buchung-item .meta { color: var(--text-muted); }
.kunde-buchung-item .badge-karte { color: #2e7d32; }
.kunde-buchung-item .badge-hotel { color: #1565c0; }
.kunde-section-links { margin-top: 14px; font-size: var(--font-label); }
.kunde-section-links a { font-weight: 600; text-decoration: none; }
.kunde-section-links a.link-gruen { color: #2e7d32; }
.kunde-section-links a.link-neutral { color: #555; }
.kunde-section-links a:hover { text-decoration: underline; }

.btn-konto {
  display: inline-block;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: #5a5a5a;
  color: #fff !important;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  margin-top: 10px;
  font-size: var(--btn-font);
  transition: background 0.2s;
}
.btn-konto:hover { background: #444; color: #fff; }

.btn-konto--sekundaer { background: #5a5a5a; }
.btn-konto--sekundaer:hover { background: #444; }

/* Intro-Text zentriert */
.kunde-intro-zentriert {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 24px;
  line-height: 1.4;
}

/* Kommunikation (Messenger + Gruppenchats) – Teilnehmer „Alle meine Fahrten“ */
.kunde-kommunikation-banner {
  margin: 0 0 28px;
  padding: 20px 18px 22px;
  border-radius: 16px;
  background: linear-gradient(165deg, #faf8f5 0%, #f0ebe4 100%);
  border: 1px solid #e0d8ce;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.kunde-kommunikation-title {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #2a2622;
  text-align: center;
  letter-spacing: -0.02em;
}
.kunde-kommunikation-lead {
  margin: 0 0 18px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #5c564e;
  text-align: center;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
.kunde-kommunikation-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}
.kunde-kommunikation-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  text-decoration: none !important;
  color: #1f1c19 !important;
  font-weight: 700;
  border: 2px solid transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  min-height: 56px;
}
.kunde-kommunikation-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.kunde-kommunikation-btn--messenger {
  background: linear-gradient(135deg, #ffffff 0%, #f5f7fb 100%);
  border-color: #c5d4e8;
}
.kunde-kommunikation-btn--messenger:hover {
  border-color: #8fa8c4;
}
.kunde-kommunikation-btn--gruppen {
  background: linear-gradient(135deg, #fffef8 0%, #f8f4e8 100%);
  border-color: #ddd3b8;
}
.kunde-kommunikation-btn--gruppen:hover {
  border-color: #c4b48a;
}
.kunde-kommunikation-btn--highlight {
  border-color: var(--rot, #55b6c5);
  box-shadow: 0 4px 16px rgba(52, 154, 170, 0.15);
}
.kunde-kommunikation-btn-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.kunde-kommunikation-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.kunde-kommunikation-btn-label {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}
.kunde-kommunikation-btn-hint {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b6560;
  line-height: 1.3;
}
.kunde-kommunikation-badge {
  flex-shrink: 0;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rot, #55b6c5);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(52, 154, 170, 0.35);
}
.kunde-kommunikation-badge--amber {
  background: linear-gradient(180deg, #e8a317 0%, #c48000 100%);
  box-shadow: 0 2px 6px rgba(180, 120, 0, 0.35);
}
@media (min-width: 480px) {
  .kunde-kommunikation-actions {
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .kunde-kommunikation-btn {
    flex: 1 1 200px;
    max-width: 320px;
  }
}

/* Dezente Icons in Kacheln */
.kachel-icon {
  margin-right: 6px;
  opacity: 0.9;
}

/* Eintritt-Button pro Fahrt-Kachel */
.fahrt-card-eintritt { margin: 14px 0 0; }
.btn-konto-eintritt {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 14px 20px;
  font-size: 1.1rem;
  font-weight: 700;
}
/* „Jetzt einchecken“ als Hauptaktion (rot), damit es auf jeder „Noch nicht eingecheckt“-Karte sofort sichtbar ist */
.btn-konto-eintritt--checkin {
  background: var(--rot) !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 2px 10px rgba(52, 154, 170, 0.25);
}
.btn-konto-eintritt--checkin:hover {
  background: var(--rot-dunkel) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(52, 154, 170, 0.35);
}

/* Portal-Basis: Neue Fahrt buchen */
.kunde-portal-basis {
  text-align: center;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

/* Prominenter Start-Button des Kundenportals (Hauptaktion) */
a.btn-konto.kunde-btn-portal-start {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
a.btn-konto.kunde-btn-portal-start:hover {
  background: #444;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.btn-portal-buchen {
  display: inline-block;
  padding: var(--btn-padding-y) 20px;
  background: #fff;
  color: #555;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  font-size: var(--btn-font);
  margin-top: 10px;
  border: 1px solid #d0ccc6;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-portal-buchen:hover { background: #f5f3ef; color: var(--rot); border-color: #b0a99e; }

/* Fahrt-Karten (Alle meine Fahrten) – gleiche Basis wie kunde-page-card, Info-Strip oben */
.fahrt-card {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #e5e2dd;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: #fffefc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.fahrt-card h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: var(--text-secondary); }
.fahrt-card-status {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fahrt-card-hinweis { margin: 12px 0 0; font-size: var(--font-small); color: var(--text-muted); line-height: 1.4; }
.fahrt-meta { color: var(--text-muted); font-size: var(--font-small); margin-bottom: 10px; }
.kachel-desc { margin: 0 0 10px; font-size: var(--font-small); color: var(--text-muted); line-height: 1.4; }
.kunde-kachel-ueberschrift {
  margin: 28px 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.kunde-kachel-ueberschrift--first { margin-top: 0; }

/* Segment-Control: Aktive / Abgeschlossen (mobil optimiert) */
.fahrten-uebersicht { margin-bottom: 24px; }
.fahrten-filter {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #e5e2dd;
  background: #f0eeea;
  min-height: 52px;
  -webkit-tap-highlight-color: transparent;
}
.fahrten-filter-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 12px;
  border: none;
  border-right: 2px solid #e5e2dd;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 52px;
  transition: background 0.2s, color 0.2s;
}
.fahrten-filter-btn:last-child { border-right: none; }
.fahrten-filter-btn:hover { background: rgba(255,255,255,0.6); color: #333; }
.fahrten-filter-btn:focus { outline: none; }
.fahrten-filter-btn:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 2px;
}
.fahrten-filter-btn.is-active {
  background: #fffefc;
  color: var(--rot);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.fahrten-filter-label { word-break: break-word; }
.fahrten-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(0,0,0,0.08);
  color: #333;
}
.fahrten-filter-btn.is-active .fahrten-filter-count {
  background: var(--rot);
  color: #fff;
}
.fahrten-list { margin-top: 4px; }
.fahrten-list.fahrten-list--hidden { display: none; }
.fahrten-abgeschlossen-link { margin: -8px 0 16px; text-align: center; }
.fahrten-abgeschlossen-btn {
  background: none;
  border: none;
  padding: 6px 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fahrten-abgeschlossen-btn:hover { color: var(--rot); }
.fahrten-abgeschlossen-btn:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
.fahrten-list-intro {
  margin: 0 0 16px;
  font-size: var(--font-small);
  color: var(--text-muted);
  line-height: 1.4;
}
.fahrten-list-leer {
  margin: 12px 0 20px;
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-small);
  background: #f8f6f2;
  border-radius: 12px;
}

.kunde-list-title {
  margin: 24px 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.kunde-hint.kunde-hint--top { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; }
.kunde-section p:last-child { margin-bottom: 0; }
.kunde-section .kunde-section-desc + p { margin: 0; font-size: var(--font-label); color: var(--text-secondary); }
.kunde-section .kunde-bonus-status,
.kachel-bonus .kunde-bonus-status { margin: 0; font-weight: 600; font-size: var(--font-label); color: var(--text-secondary); }
.kunde-section .kunde-bonus-hinweis,
.kachel-bonus .kunde-bonus-hinweis { margin: 0; font-size: var(--font-small); color: var(--text-muted); }
.fahrt-card--empty { text-align: center; padding: 32px; }
.fahrt-card--empty .kunde-section-desc { margin-bottom: 16px; }
.fahrt-card--empty p:last-of-type { margin-bottom: 20px; font-size: var(--font-label); }

/* Portal-Nachrichten (Aktuelles von der Orga) – gleiche Karten-Handschrift */
.portal-nachrichten {
  margin-bottom: 24px;
}
.portal-nachrichten .kunde-section-title {
  margin-bottom: 14px;
}
.portal-nachricht-card {
  background: #fffefc;
  border: 1px solid #e5e2dd;
  border-left: 4px solid var(--rot);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.portal-nachricht-card:last-child { margin-bottom: 0; }
.portal-nachricht-titel {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #333;
}
.portal-nachricht-fahrt {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.portal-nachricht-text {
  font-size: var(--font-small);
  color: #444;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Bonus-Kachel oben auf „Alle meine Fahrten“ – gut sichtbar */
.bonus-block-top { margin-bottom: 24px; }
.kachel-bonus--prominent {
  border-left-width: 6px !important;
  background: linear-gradient(135deg, #fffefc 0%, #fff5f5 100%) !important;
  box-shadow: 0 4px 14px rgba(52, 154, 170, 0.12) !important;
}
.kachel-bonus--prominent .kunde-bonus-status { color: #155724; font-weight: 700; }
.kachel-bonus--prominent .kunde-bonus-hinweis { color: #333; font-weight: 600; }

/* Helle Kacheln – cremig, weicher Schatten */
.kunde-card {
  background: #fffefc;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.kunde-card h1,
.kunde-card h2 {
  margin: 0 0 16px;
  font-size: var(--font-heading-lg);
  font-weight: 700;
  color: #333;
}

.kunde-card h2 { font-size: var(--font-heading); }

/* Formulare */
.kunde-card label {
  font-weight: 600;
  display: block;
  margin: 10px 0 6px;
  color: #333;
  font-size: 0.95rem;
}

.kunde-card input,
.kunde-card select,
.kunde-card textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.2s;
  color: #111;
}

.kunde-card input:focus,
.kunde-card select:focus,
.kunde-card textarea:focus {
  outline: none;
  border-color: var(--rot);
}

/* Onboarding: erstes Dropdown mit Rot-Akzent (Referenz) */
.kunde-checkin-form .kunde-select-first,
.kunde-card select.kunde-select-first {
  border-color: var(--rot);
  border-width: 2px;
}

/* Grüne Box „Schon jebucht?“ – Referenz-Look */
.kunde-schon-gebucht-box {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 2px solid #2e7d32;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.kunde-schon-gebucht-titel {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: #1b5e20;
}
.kunde-schon-gebucht-sub {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: #1b5e20;
  line-height: 1.45;
}
.kunde-schon-gebucht-btn {
  background: #2e7d32 !important;
  display: inline-block;
}

/* Primärer Button (rot) – Touch-freundlich */
.kunde-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  background: var(--rot);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.kunde-btn[style*="width:100%"], .kunde-btn.full-width { width: 100%; margin-top: 16px; }

.kunde-btn:hover {
  background: var(--rot-dunkel);
}

.kunde-btn:active {
  transform: scale(0.99);
}

/* Sekundärer Button (grau) – Referenz */
.kunde-btn-sekundaer,
a.kunde-btn.kunde-btn-sekundaer {
  background: var(--grau) !important;
  color: #fff !important;
}
.kunde-btn-sekundaer:hover,
a.kunde-btn.kunde-btn-sekundaer:hover {
  background: #444 !important;
  color: #fff !important;
}

/* Link-Box (z.B. "Al aanjemeldt? Hee enlogge") */
.kunde-link-box {
  margin-top: 24px;
  padding: 16px;
  background: var(--rot-hell);
  border: 1px solid var(--rot-border);
  border-radius: 12px;
  text-align: center;
}

.kunde-link-box p {
  margin: 0 0 12px;
  color: #222;
  font-size: 0.95rem;
}

.kunde-link-box a {
  display: inline-block;
  padding: 12px 20px;
  background: var(--rot);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
}

.kunde-link-box a:hover {
  background: var(--rot-dunkel);
}

/* Fehlermeldung */
.kunde-error {
  background: #fff0f0;
  color: #b00;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  margin-bottom: 16px;
  border: 1px solid #ffd6d6;
}

/* Erfolgsmeldung */
.kunde-success {
  background: #f0f9f0;
  color: #155724;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  margin-bottom: 16px;
  border: 1px solid #c3e6cb;
}

/* Info-Box */
.kunde-info {
  background: var(--rot-hell);
  border: 1px solid var(--rot-border);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  color: #333;
  font-size: 0.95rem;
}

/* Quick-Nav: saubere Menü-Buttons – Grau/Weiß, Rot nur Hover */
.kunde-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
  -webkit-tap-highlight-color: transparent;
}
.kunde-quick-btn {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  font-size: var(--font-small);
  font-weight: 600;
  color: #444;
  background: #fffefc;
  border: 1px solid #e0ddd8;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.kunde-quick-btn:hover {
  background: #f5f3ef;
  color: var(--rot);
  border-color: #d0ccc6;
}
.kunde-quick-btn-start { font-weight: 700; }
.kunde-quick-btn-konto {
  background: var(--rot);
  color: #fff;
  border-color: var(--rot);
}
.kunde-quick-btn-konto:hover {
  background: #a8141e;
  color: #fff;
  border-color: #a8141e;
}

/* Quick-Nav mobil: 3 Buttons pro Zeile (2 Reihen bei 6 Buttons) – kein Überlauf */
@media (max-width: 560px) {
  .kunde-quick-nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .kunde-quick-btn {
    flex: 0 0 calc((100% - 24px) / 3);
    min-width: 0;
    max-width: calc((100% - 24px) / 3);
    box-sizing: border-box;
    padding: 10px 6px;
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
  }
}

/* Footer: dunkle Leiste „schon anjemeld?“ (Referenz) */
.kunde-footer-login {
  margin-top: 32px;
  padding: 16px 20px;
  background: #5a5a5a;
  border-radius: 12px;
  text-align: center;
}
.kunde-footer-login a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s;
}
.kunde-footer-login a:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Footer (Projekt-Infos) – größer, zentriert */
.kunde-footer {
  margin-top: 24px;
  margin-bottom: 32px;
  padding: 28px 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.kunde-footer-termine {
  margin-bottom: 14px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8e8e8;
}
.kunde-footer-termine a {
  color: var(--fanbus-accent-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kunde-footer-termine a:hover {
  color: var(--fanbus-accent-dark);
}

.kunde-footer p {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
}

.kunde-footer p:last-child {
  margin-bottom: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Zusatzlinks in Cards */
.kunde-hint {
  text-align: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  color: #666;
  font-size: 0.9rem;
}

.kunde-hint a {
  color: var(--rot);
  text-decoration: none;
  font-weight: 600;
}

.kunde-hint a:hover {
  text-decoration: underline;
}

/* Theke-Button – dezenter Gold-Akzent */
.kunde-nav a.kunde-btn-theke {
  background: #f5e6b8 !important;
  color: #5a4a1a !important;
  border-color: #e5d49a !important;
}
.kunde-nav a.kunde-btn-theke:hover {
  background: #ecdba8 !important;
  color: #3d3212 !important;
}
.kunde-nav a.kunde-btn-theke.aktive {
  background: var(--rot) !important;
  color: #fff !important;
  border-color: var(--rot) !important;
}

/* Navigationszeile Teilnehmer – kompakt, unaufdringlich */
.kunde-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: #f8f9fa;
  border-radius: 10px;
  margin-bottom: var(--card-gap);
  border: 1px solid #e8e8e8;
}
.kunde-nav a {
  flex: 0 1 auto;
  min-width: 60px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}
.kunde-nav a:not(.kunde-btn-theke):not(.aktive) {
  background: #fff;
  color: #555;
  border-color: #ddd;
}
.kunde-nav a:not(.kunde-btn-theke):not(.aktive):hover {
  background: #eee;
  color: #333;
}
.kunde-nav a.aktive {
  background: var(--rot);
  color: #fff;
  border-color: var(--rot);
}
.kunde-nav a.kunde-btn-theke {
  flex: 0 1 auto;
  min-width: 70px;
}

/* Theke: breiteres Layout für Getränke-Grid */
.kunde-wrap.theke-wrap {
  max-width: var(--max-narrow);
}
@media (min-width: 560px) {
  .kunde-wrap.theke-wrap { max-width: 640px; }
}
@media (min-width: 768px) {
  .kunde-wrap.theke-wrap { max-width: var(--max-wide); }
}
.kunde-wrap.theke-wrap .kunde-card {
  padding: var(--card-padding);
}
@media (min-width: 768px) {
  .kunde-wrap.theke-wrap .kunde-card { padding: 22px; }
}

/* Tippspiel: gleiche Breite wie Standard */
.kunde-wrap.tippspiel-wrap {
  max-width: var(--max-narrow);
}
@media (min-width: 560px) {
  .kunde-wrap.tippspiel-wrap { max-width: var(--max-content); }
}

/* ========== Zockerbude (Tippspiel) – eine Handschrift mit dem Rest von TONI ========== */
.kunde-card.tippspiel .zockerbude-match-header {
  background: var(--rot);
  color: #fff;
  padding: 20px 16px;
  border-radius: 16px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.kunde-card.tippspiel .zockerbude-match-title {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
  color: #fff;
}
.kunde-card.tippspiel .zockerbude-match-info {
  font-size: 1rem;
  margin: 6px 0;
  opacity: 0.95;
  color: rgba(255,255,255,0.95);
}
.kunde-card.tippspiel .zockerbude-match-info .jackpot { color: #c8e6c9; font-weight: 700; }
.kunde-card.tippspiel .zockerbude-games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 480px) {
  .kunde-card.tippspiel .zockerbude-games-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
.kunde-card.tippspiel .zockerbude-game-card {
  background: #fffefc;
  border: 1px solid #e0ddd8;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.kunde-card.tippspiel .zockerbude-game-card:hover {
  border-color: var(--rot);
  box-shadow: 0 4px 14px rgba(52,154,170,0.15);
}
.kunde-card.tippspiel .tiprow { margin-bottom: 14px; }
/* Zockerbude: große Touch-Felder (handytauglich) */
.kunde-card.tippspiel input[type="text"],
.kunde-card.tippspiel input[type="number"],
.kunde-wrap.tippspiel-wrap input[type="text"],
.kunde-wrap.tippspiel-wrap input[type="number"] {
  min-height: 52px;
  padding: 16px 18px;
  font-size: 18px;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .kunde-card.tippspiel input[type="text"],
  .kunde-card.tippspiel input[type="number"],
  .kunde-wrap.tippspiel-wrap input[type="text"],
  .kunde-wrap.tippspiel-wrap input[type="number"] {
    min-height: 56px;
    padding: 18px;
  }
  .kunde-card.tippspiel .kunde-btn { min-height: 56px; padding: 18px 20px; }
}
.kunde-card.tippspiel .kunde-btn { min-height: 52px; padding: 16px 24px; font-size: 1.05rem; width: 100%; margin-top: 20px; }

/* Admin-Box (ausklappbar) */
.admin-box-inner {
  display: none;
}
.admin-box-inner.open {
  display: block;
}
/* Rollen-Startseite: klare Trennung Mitfahrer / Admin */
.kunde-rolle-section {
  margin-bottom: 28px;
}
.kunde-rolle-section:last-child { margin-bottom: 0; }
.kunde-rolle-heading {
  font-size: var(--font-heading);
  font-weight: 700;
  margin: 0 0 12px;
  color: #333;
}
.kunde-rolle-admin .kunde-rolle-heading { color: var(--grau); }
.kunde-rolle-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kunde-rolle-buttons .kunde-btn { width: 100%; justify-content: center; }
.kunde-rolle-desc {
  font-size: var(--font-small);
  color: #666;
  margin: -8px 0 0 0;
  padding-left: 4px;
}
.kunde-btn-schon-gebucht {
  background: #2e7d32 !important;
  color: #fff !important;
}
.kunde-btn-schon-gebucht:hover { background: #1b5e20 !important; }.kunde-admin-toggle {
  background: none;
  border: none;
  color: #333;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0;
  margin: 0 0 12px;
}

/* ========================================
   Vorgarten (login.php) – gleiche Struktur wie zuvor; Anpassung nur: FANBUS-Petrol statt Rot
   ======================================== */
.kunde-wrap.vorgarten-wrap { padding-top: 24px; }

.vorgarten {
  text-align: center;
  padding: 32px 0 48px;
}

.vorgarten-teilnehmer-banner {
  max-width: 360px;
  margin: 0 auto 20px;
  padding: 14px 16px;
  background: var(--fanbus-accent-soft);
  border: 1px solid var(--fanbus-line);
  border-radius: 12px;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.45;
}

.vorgarten-teilnehmer-banner a {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--fanbus-accent-dark);
}

.vorgarten-teilnehmer-banner span {
  display: block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--fanbus-text);
  opacity: 0.88;
}

.vorgarten-hero {
  margin-bottom: 36px;
}

.vorgarten-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--fanbus-text);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.35;
  text-align: center;
}

.vorgarten-subline {
  font-size: var(--font-small);
  color: var(--fanbus-muted);
  margin: 12px 0 0;
  text-align: center;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}
.vorgarten-login-box {
  max-width: 320px;
  margin: 0 auto 24px;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--fanbus-line);
  box-shadow: 0 2px 12px rgba(38, 51, 64, 0.06);
}
.vorgarten-login-form label {
  display: block;
  margin: 12px 0 4px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
}
.vorgarten-login-form label:first-of-type { margin-top: 0; }
.vorgarten-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  box-sizing: border-box;
}
.vorgarten-input:focus {
  outline: none;
  border-color: var(--rot);
}
.vorgarten-passwort-vergessen {
  margin: 16px 0 0;
  text-align: center;
  font-size: var(--font-small);
}
.vorgarten-passwort-vergessen a { color: var(--text-muted); text-decoration: underline; }
.vorgarten-passwort-vergessen a:hover { color: var(--rot); }
.vorgarten-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin: 0 auto 24px;
  max-width: 320px;
}
.vorgarten-cta .vorgarten-btn {
  width: 100%;
  box-sizing: border-box;
}
.vorgarten-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
}
.vorgarten-fallback {
  margin: 0 0 32px;
  text-align: center;
  font-size: var(--font-small);
}
.vorgarten-fallback a {
  color: var(--text-muted);
  text-decoration: underline;
}
.vorgarten-fallback a:hover { color: var(--rot); }
.vorgarten-fallback-hinweis {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}
.vorgarten-btn {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 12px;
  text-decoration: none;
  min-width: 220px;
  text-align: center;
  transition: background 0.2s, transform 0.15s;
}
.vorgarten-btn-primary {
  background: var(--rot);
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(52, 154, 170, 0.3);
}
.vorgarten-btn-primary:hover {
  background: var(--rot-dunkel);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(52, 154, 170, 0.35);
}
.vorgarten-btn-sekundaer {
  background: var(--grau);
  color: #fff !important;
}
.vorgarten-btn-sekundaer:hover {
  background: #444;
  transform: translateY(-1px);
}
.vorgarten-btn:active { transform: translateY(0); }
.vorgarten-team {
  padding-top: 24px;
  border-top: 1px solid var(--fanbus-line);
}
.vorgarten-team-btn {
  background: none;
  border: none;
  color: var(--fanbus-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vorgarten-team-btn:hover { color: var(--fanbus-accent-dark); }
.vorgarten-admin-box {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--fanbus-line);
  border-radius: 12px;
  text-align: left;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.vorgarten-admin-box.open { display: block; }
.vorgarten-admin-form label {
  display: block;
  font-weight: 600;
  margin: 12px 0 4px;
  font-size: 0.95rem;
}
.vorgarten-admin-form input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--fanbus-line);
  border-radius: 10px;
  font-size: 16px;
  min-height: 48px;
  box-sizing: border-box;
}

.vorgarten-admin-form input:focus {
  outline: none;
  border-color: var(--fanbus-accent-dark);
}

/* Vorgarten + alle Formulare: mobile Touch-Ziele groß genug (kein Mikro mehr) */
@media (max-width: 560px) {
  .vorgarten-admin-box { max-width: 100%; padding: 24px; }
  .vorgarten-admin-form label { font-size: 1rem; }
  .vorgarten-admin-form input {
    font-size: 18px;
    padding: 18px 20px;
    min-height: 52px;
  }
  .kunde-card input,
  .kunde-card select,
  .kunde-card textarea {
    font-size: 18px;
    padding: 18px 20px;
    min-height: 52px;
  }
  .kunde-card label { font-size: 1rem; }
}