/* -------------------------
   0) Variablen
------------------------- */
:root {
  --tve-accent: #c62828;
  --tve-text: #1b1b1b;
  --tve-muted: #666;
  --tve-bg: #fff;
  --tve-border: #e2e2e2;
  --tve-input-radius: 6px;
  --tve-focus: #2962ff;
  --tve-focus-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15);
  --tve-error: #b00020;
  --tve-font: Arial, Helvetica, sans-serif;
  --tve-size: 15px;
}

/* -------------------------
   1) Basis / Typo
------------------------- */
.tve-form {
  font-family: var(--tve-font);
  font-size: var(--tve-size);
  color: var(--tve-text);
}

/* Überschriften der Fieldsets (Mitgliedsdaten, Vertreter, SEPA, ...) */
.tve-form h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 22px 0; /* top right bottom left */
  padding: 0;
  color: var(--tve-text);
  line-height: 1.3;
}

/* Pflichtstern */
.req { color: var(--tve-accent) !important; }

/* -------------------------
   2) Fieldset / Card
------------------------- */
.tve-form .tve-fieldset {
  background: var(--tve-bg);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 4px 16px;
}

/* -------------------------
   3) Inputs / Selects / Textareas
   (einheitliche Höhe = 40px für alle "einzeiligen" Felder)
------------------------- */
/* Standard-Inputs + Selects */
.tve-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.tve-form select {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  margin-top: 0;
  border: 1px solid var(--tve-border);
  border-radius: var(--tve-input-radius, 6px);
  box-sizing: border-box;
  background: #fff;
  color: var(--tve-text);
}

/* Select – native Optik neutralisieren */
.tve-form select {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
}

/* Textareas bleiben mehrzeilig */
.tve-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid var(--tve-border);
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
  color: var(--tve-text);
  resize: vertical;
}

/* Fokus-Zustand */
.tve-form input:focus,
.tve-form select:focus,
.tve-form textarea:focus {
  border-color: var(--tve-focus);
  box-shadow: var(--tve-focus-shadow);
  outline: none;
}

/* Fehlertext */
.tve-form .tve-error {
  color: var(--tve-error);
  font-size: 13px;
  margin-top: 4px;
}

/* Universeller Info-Text */
.infotext {
  font-size: 14px;
  color: var(--tve-muted);
  line-height: 1.45;
}

/* -------------------------
   4) Mitgliedsdaten-Grid (C4)
   Desktop: 2 Spalten / Mobil: 1 Spalte
------------------------- */
.tve-form .tve-row {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 Spalten (C4) */
  gap: 15px;
  margin: 10px 0;
}

.tve-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

/* Mobil: 1 Spalte */
@media (max-width: 600px) {
  .tve-form .tve-row,
  .tve-form .tve-row1,
  .tve-form .tve-row2,
  .tve-form .tve-row3,
  .tve-form .tve-row4 {
      grid-template-columns: 1fr !important;
  }
}


/* -------------------------
   5) IBAN
------------------------- */
/* Ausgeblendet
.iban-split { position: relative; align-items: center; background-color: red; }
.iban-fixed { position: absolute; margin-top: inherit; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 1; display: flex; align-items: center; }
.iban-rest  { width: 100%; padding-left: 38px !important; }
*/
.iban-split { display: flex !important; align-items: center !important; position: relative; box-sizing: border-box; overflow: hidden; }
.iban-split:focus-within { outline: none !important; border-color: var(--tve-focus); box-shadow: var(--tve-focus-shadow); border-radius: var(--tve-input-radius, 6px);  }
.iban-fixed { position: absolute; left: 12px; pointer-events: none; z-index: 2; }
.iban-rest	{ flex: 1; padding-left: 33px !important; }

/* -------------------------
   6) Tagify (Abteilungen)
------------------------- */
.tve-form .tagify {
  border: 1px solid var(--tve-border);
  border-radius: 6px;
  background: #fff;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  width: 100% !important;
}

.tve-form .tagify__input {
  min-height: 40px !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
}

.tagify__dropdown { z-index: 9999; }

/* -------------------------
   7) Copy-Buttons (SEPA etc.)
------------------------- */
.tve-copy-btn {
  display: block;
  width: 100%;
  padding: .25rem .5rem;
  font-size: .75rem;
  font-weight: 500;
  color: #444 !important;
  background: #f2f2f2 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s ease;
  margin-bottom: .75rem;
  text-align: center;
  line-height: 1.2;
}
.tve-copy-btn:hover { background: #e0e0e0 !important; border-color: #bbb !important; color: #333 !important; }
.tve-copy-btn[style*="display: none"] { display: none !important; }
.tve-copy-btn[style*="color: rgb(40, 167, 69)"], .tve-copy-btn[style*="color: #28a745"] {
  background-color: #eafaf1 !important; border-color: #28a745 !important; color: #28a745 !important;
}

/* -------------------------
   8) Fehler-/Sonderreihen
------------------------- */
.tve-error-row { display: contents; }
.tve-error-row .tve-error { grid-column: 1 / -1; }
.tve-consents-bottom-error { display: contents; }
.tve-consents-bottom-error .tve-error { display: block; grid-column: 1 / -1; margin-top: 6px; }

/* -------------------------
   9) Zusatzfelder – 3 Spalten (Desktop)
   (EKT, Tennis, Weitere)
------------------------- */
#abt-extra-fields {
  display: grid;
  grid-template-columns: max-content 1fr 1fr; /* Label = max-content; Spalten 2+3 teilen Rest */
  column-gap: 20px;
  row-gap: 20px;
  margin-top: 20px;
}

/* Jede Zusatzfeld-Zeile liefert 3 Kinder (Label|Field|Hint) in das Grid */
#abt-extra-fields .tve-field-block { display: contents; }

.tve-label { font-weight: 600; white-space: nowrap; padding-top: 6px; }
.tve-field-content { display: flex; flex-direction: column; gap: 6px; }
.tve-field-hint  { padding-top: 6px; }

.abt-followup { display: flex; align-items: center; gap: 6px; }

/* Visuelle Box um jede Zusatzfeld-Variante */
.tve-info-box {
  background: #f9f9f9;
  border-left: 3px solid #0056b3;
  padding: 12px 14px;
  border-radius: 4px;
  margin-bottom: 22px;
  grid-column: 1 / -1;   /* Box geht über alle 3 Spalten */
}

/* -------------------------
   10) Mobil – Zusatzfelder stacken (Mitgliedsdaten bleiben 2->1 Spalten)
------------------------- */
@media (max-width: 720px) {
  /* Zusatzfelder → 1 Spalte */
  #abt-extra-fields { display: block; }
  #abt-extra-fields .tve-info-box { margin-bottom: 18px; }
  #abt-extra-fields .tve-field-block { display: block; }

  /* Reihenfolge: Label → Input → Fehler → Info → Checkbox */
  .tve-label { padding: 0; margin-bottom: 4px; white-space: normal; }
  .tve-field-content { margin-bottom: 6px; }
  .tve-field-hint  { padding: 0; margin-bottom: 6px; }
  .abt-followup    { margin-top: 4px; }
}

/* ===============================================
   Foto-/Video-Einwilligung – JA/NEIN Buttons OPTIMIERT
   Layout: weißes Feld, graue Außenkante, 40px hoch
   Fokus-Fix: Kein Schatten am Rand
================================================== */

/* 1) Radio-Punkte unsichtbar machen */
.tve-form .btn-check {
  position: absolute;
  opacity: 0;
  width: 0; 
  height: 0;
  pointer-events: none;
}

/* 2) Rahmen-Container (Wrapper) */
.tve-form .btn-group.w-100[role="group"] {
  display: flex;
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--tve-border);
  border-radius: 6px;
  overflow: hidden; /* Verhindert das Überstehen der Buttons */
  background: #fff;
  position: relative;
}

/* Mittige Trennlinie */
.tve-form .btn-group.w-100[role="group"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tve-border);
  transform: translateX(-0.5px);
  z-index: 2;
  pointer-events: none;
}

/* 3) Die Buttons (Labels) */
.tve-form .btn-group.w-100 .btn {
  flex: 1 1 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  height: 40px; 
  margin: 0 !important;      /* Wichtig: Verhindert Versatz */
  padding: 0 !important;
  border: none !important;    /* Rahmen kommt nur vom Wrapper */
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--tve-text);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  z-index: 1;
}

/* 4) Hover-Effekt */
.tve-form .btn-group.w-100 .btn:hover {
  background: #fcfcfc !important;
  color: #000;
}

/* 5) Ausgewählter Zustand (Checked) – Nur Textfarbe */
.tve-form .btn-check:checked + .btn.btn-outline-success {
  background-color: #f2f2f2 !important;
  color: #0a7b0a !important;
  font-weight: 700;
  box-shadow: none !important;
}

.tve-form .btn-check:checked + .btn.btn-outline-danger {
  background-color: #f2f2f2 !important;
  color: #a3000f !important;
  font-weight: 700;
  box-shadow: none !important;
}

/* 6) Fokus-Zustand (Tastatur) - KEIN Rand-Schatten */
.tve-form .btn-check:focus + .btn {
  outline: none !important;
  box-shadow: none !important; /* Entfernt den fehlerhaften Fokus-Rand */
  /* background: #caced9 !important; */ /* Subtiler Hintergrund als Fokus-Indikator */
}

/* --- Foto-Video Ende --- */

/* Einheitlicher Erfolgszustand für alle Copy-Buttons */
.tve-form .tve-copy-btn.is-success {
  background-color: #eafaf1 !important;
  border-color: #28a745 !important;
  color: #28a745 !important;
}

/* Optional: Smooth-Transition beim Umschalten */
.tve-form .tve-copy-btn {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Fallback (Browser ohne :has()) – JS setzt .is-error am Feld */
.tve-form input.is-error:not([type="checkbox"]):not([type="radio"]),
.tve-form select.is-error,
.tve-form textarea.is-error {
  border-color: var(--tve-error) !important;
  border-width: 2px !important;
  box-shadow: none !important;
}

.tve-col.has-error label { color: var(--tve-error) !important; }
.tve-col.has-error input:not(.iban-rest) { border-color: var(--tve-error) !important; }
.tve-col.has-error .iban-split { box-shadow: inset 0 0 0 1px var(--tve-error) !important; border-radius: var(--tve-input-radius, 6px); border: none !important; }
.tve-col.has-error .iban-rest { border: none !important; background: transparent !important; }

/* Dezenter roter Hintergrund für alle Feldtypen im Fehlerzustand */
.has-error input:not([type="checkbox"]):not([type="radio"]),
.has-error select,
.has-error textarea,
.has-error .iban-split,
.has-error .btn-group.w-100[role="group"] {
    background-color: #fff8f8 !important;
}

/* Speziell für die JA/NEIN Radio-Buttons (falls diese weiß bleiben sollen) */
.has-error .btn-group.w-100 .btn {
    background-color: #fff8f8 !important;
}

/* Rahmen und Hintergrund für Select-Felder im Fehlerfall */
.tve-col.has-error select {
    border-color: var(--tve-error) !important;
    background-color: #fff8f8 !important;
}

/* Falls du den Pfeil im Select bei Fehler auch rot oder sichtbar halten willst */
.tve-col.has-error select:focus {
    box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.15) !important;
    outline: none;
}

/* Spezieller Fix für den roten IBAN-Rahmen */
.tve-col.has-error .iban-split {
    border: 1px solid var(--tve-error) !important;
    border-radius: var(--tve-input-radius, 6px);
    background-color: #fff8f8 !important;
}

/* Verhindert, dass das innere Input den Container-Rahmen stört */
.tve-col.has-error .iban-rest {
    border: none !important;
    background: transparent !important;
}

/* 1. Die Checkbox im Fehlerzustand (Rahmen & Hintergrund) */
.tve-row.has-error input[type="checkbox"] {
  appearance: none; /* Deaktiviert das Standard-Design des Browsers */
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--tve-error) !important; /* Roter Rahmen */
  border-radius: 3px;
  background-color: #fff !important;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 8px;
  position: relative;
  top: -1px;
}

/* 2. Das Häkchen, wenn sie im Fehlerzustand angeklickt wird */
.tve-row.has-error input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--tve-error); /* Häkchen-Farbe */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.tve-row.has-error input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* 3. Hintergrund der gesamten Zeile dezent hellrot */
.tve-row.has-error {
  background-color: #fff8f8 !important;
  padding: 8px 12px;
  border-radius: 6px;
  margin-left: -12px; /* Gleicht das Padding aus, damit es bündig bleibt */
  margin-right: -12px;
}

/* 4. Textfarbe rot */
.tve-row.has-error .tve-checkbox span {
  color: var(--tve-error) !important;
}

/* Checkbox-Zeilen über die volle Breite (2 Spalten des Grids) */
.tve-row--full {
  display: block !important; /* Hebt das 2-Spalten-Grid auf */
  width: 100%;
}

/* Optional: Damit der Text nicht zu nah am Rand klebt */
.tve-row--full .tve-checkbox {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.tve-row--full .tve-checkbox span {
  flex: 1;
  line-height: 1.4;
}

/* Nur wenn die Reihe NICHT vom JS auf display:none gesetzt wurde, darf has-error wirken */
.tve-row.has-error[style*="display: none"] {
    display: none !important;
}

.tve-form #guardian-consent-row {
  display: none !important; 
}
.tve-form:has(input[name="auswahl"][value="minderjaehrig"]:checked)
  #guardian-consent-row {
  display: block !important;
}

/* ===========================================================
   CONSENT-REIHEN (Bestätigungen & Einwilligungen)
   - Saubere Ausrichtung, konsistente Abstände
   - Dezente Fehlerdarstellung ohne zu viel Luft
   =========================================================== */

/* 1) Checkbox+Text in einer Linie, mit definierter Lücke */
.tve-form .tve-row .tve-checkbox {
  display: flex;					/* statt block/inline-block → bessere Ausrichtung */
  align-items: center;				/* vertikal zentrieren */
  gap: 8px;						/* definierter Abstand zwischen Checkbox & Text */
  line-height: 1.4;					/* stabile Textzeilenhöhe */
  margin: 6px 0;					/* moderater Außenabstand je Zeile */
}

/* 2) Die eigentliche Checkbox: Gerade, ohne Versatz */
.tve-form .tve-row .tve-checkbox input[type="checkbox"] {
  margin: 0;						/* Browser-Default entfernen */
  transform: none;					/* mögliche ältere Fixes neutralisieren */
}

/* 3) Label-Text sauber ausgerichtet */
.tve-form .tve-row .tve-checkbox span {
  display: inline-block;			/* stabile Grundlinie */
  line-height: 1.4;
}

/* 4) Fehlerzustand für Consent-Reihen */
.tve-form .tve-row.has-error {
  padding: 0 !important;			/* globale Überpolsterung der Row entfernen */
  background: transparent !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.tve-form .tve-row.has-error .tve-checkbox {
  padding: 0 !important;				/* kein zusätzliches Padding */	
  background-color: #fff8f8 !important;	/* sehr dezente Rotfläche */
  border-radius: 4px;
}

/* 3) Checkbox selbst rot einfärben */
.tve-form .tve-row.has-error .tve-checkbox input[type="checkbox"] {
  border-color: #b00020 !important;		/* roter Rahmen */
}

/* 4) Der Consent-Text wird rot, aber ohne Layout-Verschiebung */
.tve-form .tve-row.has-error .tve-checkbox span {
  color: #b00020 !important;			/* roter Text */
}

/* 5) Keine zusätzlichen Abstände bei der gesamten Consent-Row */
.tve-form .tve-row--full.tve-row.has-error {
  padding: 0 !important;
}

.tve-form .tve-row--full .tve-checkbox {
  width: 100%;						/* volle Breite bei Full-Width-Consent-Zeilen */
}

/* ===========================================================
   Abteilungs-Zusatzfelder: subtile Lesbarkeit & Konsistenz
   =========================================================== */
#abt-extra-fields .tve-info-box {
  background: #fafafa;
  border-left: 3px solid #0b5ed7; /* dezent, konsistent zur Aktionsfarbe */
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
}

#abt-extra-fields .tve-label {
  font-weight: 600;
  white-space: nowrap;
  padding-top: 6px;
}

#abt-extra-fields .tve-field-content {
  display: flex;
  flex-direction: column;
  gap: 6px;      /* gleicher Abstand zwischen Label/Input/Fehler */
}

#abt-extra-fields .tve-field-hint {
  padding-top: 6px;
  color: var(--tve-muted);
  font-size: 14px;
}

/* ===========================================================
   Foto/Video – Fieldset/Legend optisch wie Feld-Labels
   (keine zusätzliche Card-Optik in den Spalten)
   =========================================================== */
.tve-form .tve-consent-group { border: 0; margin: 0; padding: 0; }
.tve-form .tve-consent-group > legend.tve-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px 0;
  padding: 0;
}

/* H2 in Cards oben ohne Extra-Abstand */
.tve-form .tve-fieldset > h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

/* Warn-Box */
.tve-form .alert.alert-warning {
    /* Deine gewünschte Form & Struktur */
    font-size: 1em;
    margin: 10px 0;
    line-height: 1.3;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    display: block;
	border-color: red;
	color: red;
    
    /* Falls dein Theme die Farben überschreibt, 
       kannst du hier die Original-Bootstrap-Werte erzwingen: */
    /* background-color: #fff3cd; */
    /* border-color: #ffeeba; */
    /* color: #856404; */
}

/* ===========================================================
   Info-Box "Datenschutz" – Optik wie vorher, ohne Inline-Styles
   (setzt voraus: entweder Bootstrap-Icon-Klasse .fa vorhanden
   oder du lieferst Font Awesome selbst – sonst Icon einfach entfernen)
   =========================================================== */
.tve-form .tve-alert-info {
  /* übernimmt die Rolle der früheren Inline-Styles */
  font-size: 0.82em;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  margin: 10px 0;
  line-height: 1.3;

  /* Aussehen wie "alert alert-info" – falls kein Bootstrap aktiv ist */
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: #055160;                  /* dezentes Info-Blau für Text */
}

/* Linkfärbung/Unterstreichung wie vorher */
.tve-form .tve-alert-info .tve-alert-link {
  text-decoration: underline;
  color: #0056b3;
  white-space: nowrap;
}
.tve-form .tve-alert-info .tve-alert-link:hover {
  text-decoration: none;
}

.custom-muted-text { font-size: 0.85em; }

/* Zusatzfelder (EKT/Tennis/Weitere) – subtile Vereinheitlichung */
#abt-extra-fields .tve-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px 0;
}
#abt-extra-fields .tve-field-content { gap: 6px; }
#abt-extra-fields .tve-field-hint  { color: var(--tve-muted); font-size: 14px; line-height: 1.4; }

/* Box leicht ruhiger, keine Designänderung – nur konsistent */
#abt-extra-fields .tve-info-box {
  background: #fafafa;
  border-left: 3px solid #0b5ed7;
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
}

/* Foto/Video – Sichtbarkeit der 14–17-Checkbox robust über Form-Klasse steuern */
#photo-minor-box { 
  display: none !important; 
}
.is-minor-14-17 #photo-minor-box { 
  display: block !important; 
}

/* Foto/Video Radios – roter Rahmen im Fehlerzustand (Column-basiert) */
.tve-form .tve-col.has-error .btn-group {
  border: 1px solid #b00020 !important;
  border-radius: 8px;
}

/* -------------------------
   4a) NEUES GRID-SYSTEM: 1–4 Spalten
------------------------- */

/* 1 Spalte */
.tve-form .tve-row1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin: 10px 0;
}

/* 2 Spalten (Standard) */
.tve-form .tve-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 10px 0;
}

/* 3 Spalten */
.tve-form .tve-row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin: 10px 0;
}

/* 4 Spalten */
.tve-form .tve-row4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  margin: 10px 0;
}

/* Spaltenelement */
.tve-col {
  display: flex;
  flex-direction: column;
}



/* NEU --------------------------------------------------------------- */
.tve-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px 20px;
  margin-bottom: 20px;
  /* min-height: 120px; */
  box-sizing: border-box;
}

.tve-card__texts {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.tve-card__title {
  font-weight: 800;
  color: #111;
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.tve-card__sub {
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Alle Inhalts-Cards initial verstecken */
#group-vertreter, #group-status, #group-user, #group-bank {
    display: none;
}

/* Die Auswahl-Checkboxen etwas schöner untereinander */
.tve-checkbox-label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}