/**
 * TONI.go – Einheitliches Layout für Kundenseiten (Teilnehmer/Gäste)
 * Mobile-first, PC-tauglich, konsistente Größen.
 */
:root {
  --rot: #c31924;
  --rot-dunkel: #a0141d;
  --rot-hell: #fff5f5;
  --rot-border: #ffd6d6;
  --grau: #5a5a5a;
  /* 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: #f7f5f0;
  padding: 0 20px 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  min-height: 100vh;
  color: #2c2c2c;
  font-size: var(--font-base);
  -webkit-font-smoothing: antialiased;
}

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

/* Header: rote Kachel (#c31924) – Referenz referenz-layout.html */
.kunde-head {
  background: #c31924;
  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 img {
  height: 110px;
  width: 110px;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
}

.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-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;
}

/* 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;
}

/* 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: #222; }
.kunde-buchung-item .meta { color: #555; }
.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; }

/* 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 #e0ddd8;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: #fffefc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.fahrt-card h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: #222; }
.fahrt-meta { color: #555; font-size: var(--font-small); margin-bottom: 10px; }

.kunde-list-title {
  margin: 24px 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
}
.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: #333; }
.kunde-section .kunde-bonus-status { margin: 0; font-weight: 600; font-size: var(--font-label); color: #333; }
.kunde-section .kunde-bonus-hinweis { margin: 0; font-size: var(--font-small); color: #555; }
.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); }

/* 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;
  gap: 12px;
  margin: 0 0 24px;
  -webkit-tap-highlight-color: transparent;
}
.kunde-quick-btn {
  flex: 1;
  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;
}

/* 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 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); }
}

/* 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 – einladende Startseite
   ======================================== */
.kunde-wrap.vorgarten-wrap { padding-top: 24px; }
.vorgarten {
  text-align: center;
  padding: 32px 0 48px;
}
.vorgarten-hero {
  margin-bottom: 36px;
}
.vorgarten-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.35;
  text-align: center;
}
.vorgarten-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-bottom: 32px;
}
.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(195, 25, 36, 0.3);
}
.vorgarten-btn-primary:hover {
  background: var(--rot-dunkel);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(195, 25, 36, 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 #e5e2dd;
}
.vorgarten-team-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vorgarten-team-btn:hover { color: #666; }
.vorgarten-admin-box {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: #fafaf8;
  border-radius: 12px;
  text-align: left;
  max-width: 280px;
  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.9rem;
}
.vorgarten-admin-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d0ccc6;
  border-radius: 8px;
  font-size: 1rem;
}