/* ==========================================================================
   TuRa Formulare (com_turaformulare)
   Alle Regeln sind auf .tura-form beschränkt, damit das Joomla-Template
   nicht beeinflusst wird.
   ========================================================================== */

.tura-form {
  --tura-brand: #c40809;
  --tura-brand-dark: #9e0607;
  --tura-ink: #424753;
  --tura-muted: #6d7280;
  --tura-line: #d8dade;
  --tura-bg: #ffffff;
  --tura-soft: #f6f6f7;
  --tura-error: #c40809;
  --tura-brand-soft: #fbeceb;
  --tura-error-bg: #fdf1f1;
  --tura-ok: #1c7c3c;
  --tura-ok-bg: #eef8f1;
  --tura-radius: 4px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tura-ink);
  max-width: 900px;
}

.tura-form *,
.tura-form *::before,
.tura-form *::after { box-sizing: border-box; }

/* Das Joomla-Template faerbt Absaetze und Tabellenzellen teilweise selbst ein.
   Innerhalb des Formulars setzen wir die Textfarbe deshalb ausdruecklich. */
.tura-form p,
.tura-form div,
.tura-form span,
.tura-form li,
.tura-form dd,
.tura-form dt,
.tura-form strong,
.tura-form b,
.tura-form table.tura-table td { color: var(--tura-ink); }

.tura-form a { color: var(--tura-brand); }

/* ---------- Überschriften ------------------------------------------------ */

.tura-form h2.tura-h {
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  background: var(--tura-brand);
  margin: 28px 0 0;
  padding: 9px 14px;
  border-radius: var(--tura-radius) var(--tura-radius) 0 0;
}

.tura-form h3.tura-sub {
  font-size: 15px;
  font-weight: bold;
  color: var(--tura-brand);
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--tura-line);
}

.tura-form .tura-panel {
  border: 1px solid var(--tura-line);
  border-top: none;
  border-radius: 0 0 var(--tura-radius) var(--tura-radius);
  padding: 16px 14px 18px;
  background: var(--tura-bg);
  margin: 0 0 4px;
}

.tura-form .tura-intro {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--tura-soft);
  border-left: 3px solid var(--tura-brand);
  border-radius: 0 var(--tura-radius) var(--tura-radius) 0;
  font-size: 14px;
}

/* Nur fuer angemeldete Redakteure sichtbar, siehe tmpl/form/_shell.php */
.tura-form .tura-testnote {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 2px dashed var(--tura-brand);
  border-radius: var(--tura-radius);
  background: var(--tura-brand-soft);
  font-size: 13.5px;
}

.tura-form .tura-testnote span { font-size: 12px; color: var(--tura-muted); }

.tura-form .tura-legal {
  font-size: 13.5px;
  color: var(--tura-ink);
  margin: 0 0 10px;
}

.tura-form .tura-note {
  font-size: 12.5px;
  color: var(--tura-muted);
  margin: 8px 0 0;
}

/* ---------- Raster ------------------------------------------------------- */

.tura-form .tura-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px 14px;
}

.tura-form .tura-grid > * { grid-column: span 12; }

.tura-form .tura-panel > .tura-grid:not(:last-child) { margin-bottom: 14px; }
.tura-form .tura-panel > .tura-legal + .tura-grid { margin-top: 4px; }

.tura-form .c3  { grid-column: span 3; }
.tura-form .c4  { grid-column: span 4; }
.tura-form .c6  { grid-column: span 6; }
.tura-form .c8  { grid-column: span 8; }
.tura-form .c9  { grid-column: span 9; }
.tura-form .c12 { grid-column: span 12; }

@media (max-width: 640px) {
  .tura-form .tura-grid > * { grid-column: span 12 !important; }
  .tura-form { font-size: 16px; } /* verhindert Zoom beim Fokus auf iOS */
}

/* ---------- Felder ------------------------------------------------------- */

.tura-form .tura-field { min-width: 0; }

.tura-form .tura-label {
  display: block;
  font-size: 13.5px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 4px;
  color: var(--tura-ink);
  text-transform: none;
  letter-spacing: normal;
}

.tura-form .tura-req { color: var(--tura-brand); font-weight: bold; }

.tura-form input[type="text"],
.tura-form input[type="email"],
.tura-form input[type="tel"],
.tura-form input[type="date"],
.tura-form input[type="number"],
.tura-form select {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 15px;
  color: var(--tura-ink);
  background: #fff;
  border: 1px solid var(--tura-line);
  border-radius: var(--tura-radius);
  -webkit-appearance: none;
  appearance: none;
  min-height: 42px;
}

.tura-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23666' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.tura-form input[type="date"] { -webkit-appearance: none; }

.tura-form input:focus,
.tura-form select:focus,
.tura-form textarea:focus {
  outline: 2px solid var(--tura-brand);
  outline-offset: 1px;
  border-color: var(--tura-brand);
}

.tura-form .tura-hint {
  display: block;
  font-size: 12px;
  color: var(--tura-muted);
  margin-top: 3px;
}

.tura-form input.tura-iban {
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- Auswahlgruppen (Radio / Checkbox) ---------------------------- */

.tura-form fieldset.tura-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.tura-form fieldset.tura-fieldset > legend {
  display: block;
  float: none;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0 0 6px;
  border: none;
  background: none;
  /* Ohne diese Angaben uebernimmt das Template seine eigene
     Legenden-Typografie und die Beschriftung wird viel zu gross. */
  font-size: 13.5px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--tura-ink);
}

.tura-form .tura-choices { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tura-form .tura-choices.tura-stack { flex-direction: column; gap: 10px; }

.tura-form .tura-choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  cursor: pointer;
  line-height: 1.45;
}

.tura-form .tura-choice input[type="radio"],
.tura-form .tura-choice input[type="checkbox"] {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: var(--tura-brand);
  cursor: pointer;
}

.tura-form .tura-choice span { flex: 1 1 auto; }

.tura-form .tura-choice-box {
  border: 1px solid var(--tura-line);
  border-radius: var(--tura-radius);
  padding: 11px 13px;
  background: #fff;
  transition: border-color .12s, background .12s;
}

.tura-form .tura-choice-box:hover { border-color: #b6b8bd; }

.tura-form .tura-choice-box.is-selected {
  border-color: var(--tura-brand);
  background: #fdf6f6;
}

.tura-form .tura-subchoice {
  margin: 10px 0 0 28px;
  padding: 10px 12px;
  border-left: 3px solid var(--tura-line);
  background: var(--tura-soft);
  border-radius: 0 var(--tura-radius) var(--tura-radius) 0;
}

.tura-form .tura-yesno {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 12px 14px;
  background: var(--tura-soft);
  border: 1px dashed var(--tura-line);
  border-radius: var(--tura-radius);
  margin: 18px 0 0;
}

.tura-form .tura-yesno strong { font-size: 14px; }

/* ---------- Bedingte Blöcke --------------------------------------------- */

.tura-form [data-tura-when] { display: none; }
.tura-form [data-tura-when].is-visible { display: block; }

.tura-form .tura-member {
  border: 1px solid var(--tura-line);
  border-left: 3px solid var(--tura-brand);
  border-radius: 0 var(--tura-radius) var(--tura-radius) 0;
  padding: 14px;
  margin: 16px 0 0;
  background: #fff;
}

.tura-form .tura-member > .tura-member-title {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tura-brand);
  margin: 0 0 12px;
}

/* ---------- Fehler ------------------------------------------------------- */

.tura-form .tura-error-msg {
  display: none;
  font-size: 12.5px;
  color: var(--tura-error);
  margin-top: 4px;
  font-weight: bold;
}

.tura-form .has-error .tura-error-msg { display: block; }

.tura-form .has-error input:not([type="radio"]):not([type="checkbox"]),
.tura-form .has-error select {
  border-color: var(--tura-error);
  background: var(--tura-error-bg);
}

.tura-form .has-error > .tura-label,
.tura-form .has-error > legend,
.tura-form .has-error > fieldset > legend { color: var(--tura-error); }

.tura-form fieldset.has-error > .tura-choices > .tura-choice-box { border-color: var(--tura-error); }

/* Aus dem Hauptmitglied uebernommene Kontoinhaber-Felder */
.tura-form input.is-mirrored {
  background: var(--tura-soft);
  color: var(--tura-muted);
}

/* ---------- Meldungen ---------------------------------------------------- */

.tura-form .tura-alert {
  display: none;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--tura-radius);
  font-size: 14.5px;
  border: 1px solid transparent;
}

.tura-form .tura-alert.is-visible { display: block; }

.tura-form .tura-alert-error {
  background: var(--tura-error-bg);
  border-color: #eab6b6;
  color: #8d1112;
}

.tura-form .tura-alert-success {
  background: var(--tura-ok-bg);
  border-color: #b4dcc2;
  color: #16612f;
}

.tura-form .tura-alert h3 { margin: 0 0 6px; font-size: 16px; color: inherit; }
.tura-form .tura-alert ul { margin: 8px 0 0; padding-left: 20px; }
.tura-form .tura-alert li { margin-bottom: 4px; }

/* ---------- Schaltflächen ------------------------------------------------ */

.tura-form .tura-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
}

.tura-form .tura-btn {
  display: inline-block;
  font: inherit;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 26px;
  border: 1px solid var(--tura-brand);
  border-radius: var(--tura-radius);
  background: var(--tura-brand);
  color: #fff;
  cursor: pointer;
  min-height: 46px;
}

.tura-form .tura-btn:hover { background: var(--tura-brand-dark); border-color: var(--tura-brand-dark); }
.tura-form .tura-btn:disabled { opacity: .6; cursor: not-allowed; }

.tura-form .tura-btn-secondary {
  background: #fff;
  color: var(--tura-brand);
}

.tura-form .tura-btn-secondary:hover { background: #fdf1f1; color: var(--tura-brand-dark); }

/* ---------- Beitragstabellen -------------------------------------------- */

.tura-form .tura-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tura-form table.tura-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 14px;
}

.tura-form table.tura-table caption {
  caption-side: top;
  text-align: left;
  font-weight: bold;
  padding: 0 0 8px;
  color: var(--tura-ink);
}

.tura-form table.tura-table th,
.tura-form table.tura-table td {
  border: 1px solid var(--tura-line);
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
}

.tura-form table.tura-table thead th {
  background: var(--tura-brand-soft);
  color: var(--tura-brand-dark);
  font-weight: bold;
  border-bottom: 2px solid var(--tura-brand);
}

.tura-form table.tura-table td + td,
.tura-form table.tura-table th + th { text-align: right; white-space: nowrap; }

.tura-form table.tura-table tbody tr:nth-child(even) td { background: var(--tura-soft); }

/* ---------- Honigtopf (unsichtbar, nicht display:none wegen Bots) -------- */

.tura-form .tura-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Fortschritt / Ladezustand ----------------------------------- */

.tura-form .tura-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(196, 8, 9, .25);
  border-top-color: var(--tura-brand);
  border-radius: 50%;
  animation: tura-spin .7s linear infinite;
}

.tura-form.is-sending .tura-spinner { display: inline-block; }

@keyframes tura-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .tura-form .tura-spinner { animation: none; }
}

/* ==========================================================================
   DRUCKAUSGABE
   Nur das Abteilungswechsel-Formular ist zum Ausdrucken gedacht und muss
   auf EINE Seite passen. Es wird alles ausgeblendet, was nicht zum
   Formular gehört – unabhängig davon, was das Template sonst ausgibt.
   ========================================================================== */

@media print {
  .tura-print-host body,
  body.tura-printing { background: #fff !important; }

  body.tura-printing * { visibility: hidden !important; }

  body.tura-printing .tura-print-area,
  body.tura-printing .tura-print-area * { visibility: visible !important; }

  body.tura-printing .tura-print-area {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  body.tura-printing .tura-no-print,
  body.tura-printing .tura-no-print * { display: none !important; visibility: hidden !important; }
}

@page { size: A4 portrait; margin: 11mm 12mm; }

@media print {
  .tura-form.tura-print-area,
  .tura-form.tura-print-area p,
  .tura-form.tura-print-area div,
  .tura-form.tura-print-area span,
  .tura-form.tura-print-area li,
  .tura-form.tura-print-area strong,
  .tura-form.tura-print-area td { color: #000; }

  .tura-form.tura-print-area {
    font-size: 9.6pt;
    line-height: 1.28;
    max-width: none;
  }

  .tura-form.tura-print-area h2.tura-h {
    background: none !important;
    color: #000 !important;
    border-bottom: 1.5pt solid #000;
    border-radius: 0;
    padding: 0 0 2pt;
    margin: 7pt 0 4pt;
    font-size: 11pt;
  }

  .tura-form.tura-print-area h3.tura-sub {
    color: #000;
    font-size: 9.6pt;
    margin: 6pt 0 3pt;
    padding: 0 0 1pt;
    border-bottom: .5pt solid #666;
  }

  .tura-form.tura-print-area .tura-panel {
    border: none;
    padding: 0;
    margin: 0 0 4pt;
  }

  .tura-form.tura-print-area .tura-grid { gap: 5pt 9pt; }

  .tura-form.tura-print-area .tura-label,
  .tura-form.tura-print-area fieldset.tura-fieldset > legend {
    font-size: 8pt;
    margin: 0 0 1pt;
    font-weight: normal;
    color: #333;
  }

  .tura-form.tura-print-area input[type="text"],
  .tura-form.tura-print-area input[type="email"],
  .tura-form.tura-print-area input[type="tel"],
  .tura-form.tura-print-area input[type="date"],
  .tura-form.tura-print-area select {
    border: none;
    border-bottom: .5pt solid #000;
    border-radius: 0;
    background: none !important;
    padding: 0 0 1pt;
    min-height: 0;
    height: auto;
    font-size: 9.6pt;
    color: #000;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Der Einleitungskasten ist Bildschirm-Hilfe und gehoert nicht auf das
     ausgedruckte Formular - dort steht die Kopfzeile .tura-print-header. */
  .tura-form.tura-print-area .tura-intro { display: none !important; }

  .tura-form.tura-print-area .tura-choice-box {
    border: none;
    background: none !important;
    padding: 0;
  }

  .tura-form.tura-print-area .tura-choices { gap: 3pt 16pt; }

  .tura-form.tura-print-area .tura-hint,
  .tura-form.tura-print-area .tura-error-msg,
  .tura-form.tura-print-area .tura-alert { display: none !important; }

  .tura-form.tura-print-area .tura-signatures {
    display: flex;
    gap: 24pt;
    margin-top: 16pt;
    page-break-inside: avoid;
  }

  .tura-form.tura-print-area .tura-signature { flex: 1 1 0; }

  .tura-form.tura-print-area .tura-signature .tura-sig-line {
    border-top: .5pt solid #000;
    margin-top: 22pt;
    padding-top: 2pt;
    font-size: 8pt;
  }

  .tura-form.tura-print-area .tura-member { padding: 0; border: none; margin: 4pt 0 0; }
  .tura-form.tura-print-area .tura-member > .tura-member-title { color: #000; margin: 0 0 3pt; font-size: 8.5pt; }

  .tura-form.tura-print-area .tura-print-header {
    display: block !important;
    margin: 0 0 6pt;
    padding: 0 0 4pt;
    border-bottom: 1.5pt solid #000;
  }
}