/* Speckemeyer — Forminator im Design der Seite

   Das Formular „Ersttermin – Rückruf oder vor Ort“ (tools/formular-anlegen.php)
   steht mit Formularstil „none“: Forminator lädt dann nur sein Raster, kein
   eigenes Design und keine Google Fonts. Die Optik kommt vollständig von hier,
   nach dem Entwurf (Ressourcen/Speckemeyer_Startseite.html, Abschnitt Formular):

   · border-radius 0, Felder 52px hoch (Touch-Ziel)
   · Haarlinien statt Kästen, kein Bold, nur 400/500
   · Wahl „Rückruf | vor Ort“ als zwei gleich breite Knöpfe (Klasse spm-seg)

   Alle Formularplätze stehen im Petrol-Abschnitt (.sec-deep). Die Regeln
   ohne .sec-deep sind die helle Grundform für den Fall, dass ein Formular
   einmal woanders steht. Knöpfe kommen aus Astra (Customizer → Buttons),
   hier nur die Umkehrung auf Petrol wie bei .wp-block-button__link. */

.spm .forminator-ui{
  --f-line:var(--line);
  --f-text:var(--ink);
  --f-muted:var(--ink-60);
  --f-field:#fff;
  --f-on:var(--petrol);
  --f-on-text:#fff;
  --f-mark:var(--petrol);
  --f-error:#B3261E;
  margin:0 0 18px;
  font-family:var(--font);
  color:var(--f-text);
}
.spm .sec-deep .forminator-ui{
  --f-line:rgba(255,255,255,.5);
  --f-text:#fff;
  --f-muted:rgba(255,255,255,.75);
  --f-field:rgba(255,255,255,.08);
  --f-on:#fff;
  --f-on-text:var(--petrol);
  --f-mark:var(--ice);
  /* Auf Petrol 5:1 — Rot wäre dort nicht lesbar. */
  --f-error:#FFD7D2;
}

/* ---------- Raster ---------- */
.spm .forminator-ui .forminator-row{margin:0 0 18px;}
.spm .forminator-ui .forminator-row.forminator-hidden{display:none;}
.spm .forminator-ui .forminator-field{margin:0;}

/* ---------- Schritte ---------- */
.spm .forminator-ui .forminator-pagination-steps{
  display:flex;gap:16px;margin:0 0 26px;counter-reset:spm-schritt;
}
.spm .forminator-ui .forminator-pagination-steps .forminator-break,
.spm .forminator-ui .forminator-step-dot{display:none;}
.spm .forminator-ui .forminator-step{
  flex:1 1 0;min-height:44px;margin:0;padding:0 0 10px;
  display:flex;align-items:flex-end;gap:8px;
  background:none;border:0;border-bottom:var(--hair) solid var(--f-line);border-radius:0;
  color:var(--f-muted);font-family:inherit;font-size:14px;font-weight:400;
  letter-spacing:.02em;text-align:left;text-transform:none;cursor:default;
  counter-increment:spm-schritt;
}
.spm .forminator-ui .forminator-step::before{content:counter(spm-schritt) ".";color:inherit;}
.spm .forminator-ui .forminator-step.forminator-current{
  color:var(--f-text);font-weight:500;border-bottom-color:var(--f-mark);
}
.spm .forminator-ui .forminator-step:hover,
.spm .forminator-ui .forminator-step:focus{background:none;}

/* ---------- Beschriftung ---------- */
.spm .forminator-ui .forminator-label{
  display:block;margin:0 0 8px;
  color:var(--f-text);font-size:14px;font-weight:500;line-height:1.4;
}
.spm .forminator-ui .forminator-required{color:var(--f-mark);}
.spm .forminator-ui .forminator-description{
  display:block;margin-top:8px;color:var(--f-muted);font-size:14px;line-height:1.5;
}

/* ---------- Felder ---------- */
.spm .forminator-ui .forminator-input,
.spm .forminator-ui .forminator-textarea{
  display:block;width:100%;min-height:52px;margin:0;padding:14px;
  border:1px solid var(--f-line);border-radius:0;box-shadow:none;
  background:var(--f-field);color:var(--f-text);
  font-family:inherit;font-size:16px;line-height:1.4;
}
.spm .forminator-ui .forminator-textarea{min-height:110px;resize:vertical;}
.spm .forminator-ui .forminator-input::placeholder,
.spm .forminator-ui .forminator-textarea::placeholder{color:var(--f-muted);}
.spm .forminator-ui .forminator-input:focus,
.spm .forminator-ui .forminator-textarea:focus{
  border-color:var(--f-text);outline:2px solid var(--f-text);outline-offset:2px;
}
/* Autofill des Browsers färbt sonst gelb-weiß ein. */
.spm .sec-deep .forminator-ui .forminator-input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  box-shadow:0 0 0 100px var(--petrol) inset;
}

/* Anschrift: PLZ schmal vor dem Ort, wie man es schreibt. */
.spm .forminator-ui .forminator-field-address{
  display:grid;grid-template-columns:minmax(6.5em,30%) 1fr;column-gap:12px;
}
.spm .forminator-ui .forminator-field-address > .forminator-row{margin:0 0 18px;}
.spm .forminator-ui .forminator-field-address > .forminator-row:first-child{grid-column:1/-1;}
.spm .forminator-ui .forminator-field-address > .forminator-row:has([id$="-zip"]){grid-column:1;grid-row:2;}
.spm .forminator-ui .forminator-field-address > .forminator-row:has([id$="-city"]){grid-column:2;grid-row:2;}
.spm .forminator-ui .forminator-field-address .forminator-col{width:100%;max-width:none;padding:0;}
.spm .forminator-ui .forminator-row:has(> .forminator-field-address){margin-bottom:0;}

/* ---------- Wahlknöpfe (Radio-Gruppe mit Klasse spm-seg) ---------- */
.spm .forminator-ui .spm-seg .forminator-field{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.spm .forminator-ui .spm-seg .forminator-label,
.spm .forminator-ui .spm-seg .forminator-description,
.spm .forminator-ui .spm-seg .forminator-error-message{grid-column:1/-1;}
.spm .forminator-ui .spm-seg .forminator-label{margin-bottom:0;}
.spm .forminator-ui .spm-seg .forminator-radio{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:52px;margin:0;padding:8px 12px;
  border:1px solid var(--f-line);
  color:var(--f-text);font-size:15px;line-height:1.3;text-align:center;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.spm .forminator-ui .spm-seg .forminator-radio input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.spm .forminator-ui .spm-seg .forminator-radio-bullet{display:none;}
.spm .forminator-ui .spm-seg .forminator-radio:hover{border-color:var(--f-text);}
.spm .forminator-ui .spm-seg .forminator-radio:has(input:checked){
  background:var(--f-on);border-color:var(--f-on);color:var(--f-on-text);font-weight:500;
}
.spm .forminator-ui .spm-seg .forminator-radio:has(input:focus-visible){
  outline:2px solid var(--f-text);outline-offset:2px;
}

/* ---------- Hinweis „bei uns in Mettingen“ ---------- */
.spm .forminator-ui .spm-form-hinweis{
  margin:0;padding:2px 0 2px 14px;border-left:var(--hair) solid var(--f-mark);
  color:var(--f-muted);font-size:14px;line-height:1.6;
}
.spm .forminator-ui .spm-form-hinweis strong{color:var(--f-text);font-weight:500;}

/* ---------- Datenschutz-Kästchen ---------- */
/* Die Feldbeschriftung „Datenschutz“ steht nur für die Mail da; der Satz
   neben dem Kästchen sagt dasselbe. Für Screenreader bleibt sie lesbar. */
.spm .forminator-ui .forminator-field-gdprcheckbox .forminator-label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.spm .forminator-ui .forminator-checkbox{
  position:relative;display:flex;gap:12px;align-items:flex-start;margin:0;cursor:pointer;
  color:var(--f-muted);font-size:14px;line-height:1.5;
}
.spm .forminator-ui .forminator-checkbox input{
  flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--f-on);cursor:pointer;
}
.spm .forminator-ui .forminator-checkbox-box{display:none;}
.spm .forminator-ui .forminator-checkbox a{color:var(--f-text);text-decoration:underline;text-underline-offset:2px;}

/* ---------- Knöpfe ---------- */
.spm .forminator-ui .forminator-pagination-footer,
.spm .forminator-ui .forminator-row-last .forminator-field{
  display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0;
}
.spm .forminator-ui .forminator-button{
  flex:1 1 auto;min-height:52px;margin:0;border-radius:0;
}
.spm .forminator-ui .forminator-button.forminator-hidden{display:none;}
.spm .sec-deep .forminator-ui .forminator-button{
  background:#fff;color:var(--petrol);border-color:#fff;
}
.spm .sec-deep .forminator-ui .forminator-button:hover,
.spm .sec-deep .forminator-ui .forminator-button:focus{
  background:var(--ice);border-color:var(--ice);color:var(--petrol);
}
/* „Zurück“ als Umrissknopf, wie is-style-outline auf Petrol. */
.spm .sec-deep .forminator-ui .forminator-button-back{
  flex:0 0 auto;background:transparent;color:#fff;border-color:rgba(255,255,255,.6);
}
.spm .sec-deep .forminator-ui .forminator-button-back:hover,
.spm .sec-deep .forminator-ui .forminator-button-back:focus{
  background:#fff;color:var(--petrol);border-color:#fff;
}

/* ---------- Fehler und Erfolg ---------- */
.spm .forminator-ui .forminator-error-message{
  display:block;margin-top:8px;color:var(--f-error);font-size:14px;line-height:1.4;
}
.spm .forminator-ui .forminator-has_error .forminator-input,
.spm .forminator-ui .forminator-has_error .forminator-textarea,
.spm .forminator-ui .spm-seg .forminator-has_error .forminator-radio{
  border-color:var(--f-error);box-shadow:inset 3px 0 0 var(--f-error);
}
.spm .forminator-ui .forminator-response-message:not(:empty){
  margin:0 0 20px;padding:14px 16px;border-left:var(--hair) solid var(--f-mark);
  background:var(--f-field);color:var(--f-text);font-size:15px;line-height:1.55;
}
.spm .forminator-ui .forminator-response-message.forminator-error:not(:empty){border-left-color:var(--f-error);}
.spm .forminator-ui .forminator-response-message p{margin:0;}
.spm .forminator-ui .forminator-response-message strong{font-weight:500;}

/* ---------- Datumsfeld ---------- */
.spm .forminator-ui .forminator-input-with-icon{position:relative;}
.spm .forminator-ui .forminator-input-with-icon [class^="forminator-icon-"]{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--f-muted);font-size:18px;line-height:1;pointer-events:none;
}
.spm .forminator-ui .forminator-input-with-icon .forminator-input{padding-left:46px;cursor:pointer;}

/* ---------- Kalender ----------
   jQuery UI hängt den Kalender ans Ende von <body>, also außerhalb von
   .spm — einzige Stelle in dieser Datei ohne .spm-Präfix. Die Variablen
   aus .spm gelten dort nicht, deshalb direkt Astras Palette
   (Petrol = Farbe 0, Eisblau = Farbe 8). Forminator gibt jedem seiner
   Kalender die Klasse forminator-calendar; andere Datepicker bleiben unberührt. */
.ui-datepicker.forminator-calendar{
  width:320px;max-width:calc(100vw - 40px);margin-top:6px;padding:12px;
  border:1px solid #DFE6EC;border-radius:0;background:#fff;
  box-shadow:0 12px 32px rgba(10,40,55,.18);
  font-family:inherit;font-size:15px;color:#1A1A1A;
}
.ui-datepicker.forminator-calendar *{font-family:inherit;border-radius:0;}
.ui-datepicker.forminator-calendar .ui-datepicker-header{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:44px;margin:0 0 8px;padding:0 44px;border:0;background:none;
}
.ui-datepicker.forminator-calendar .ui-datepicker-prev,
.ui-datepicker.forminator-calendar .ui-datepicker-next{
  position:absolute;top:0;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--ast-global-color-0,#0B6782);cursor:pointer;
}
.ui-datepicker.forminator-calendar .ui-datepicker-prev{left:0;}
.ui-datepicker.forminator-calendar .ui-datepicker-next{right:0;}
.ui-datepicker.forminator-calendar .ui-datepicker-prev span,
.ui-datepicker.forminator-calendar .ui-datepicker-next span{display:none;}
.ui-datepicker.forminator-calendar .ui-datepicker-prev::before{content:"\2039";font-size:28px;line-height:1;}
.ui-datepicker.forminator-calendar .ui-datepicker-next::before{content:"\203A";font-size:28px;line-height:1;}
.ui-datepicker.forminator-calendar .ui-state-disabled.ui-datepicker-prev,
.ui-datepicker.forminator-calendar .ui-state-disabled.ui-datepicker-next{opacity:.25;cursor:default;}
.ui-datepicker.forminator-calendar .ui-datepicker-title{display:flex;gap:8px;margin:0;line-height:1;}
.ui-datepicker.forminator-calendar .ui-datepicker-title select{
  flex:0 0 auto;width:auto;min-width:5.5em;height:40px;margin:0;padding:0 8px;border:1px solid #DFE6EC;background:#fff;
  color:#1A1A1A;font-size:15px;
}
.ui-datepicker.forminator-calendar table{width:100%;margin:0;border-collapse:collapse;font-size:15px;}
.ui-datepicker.forminator-calendar th{
  padding:6px 0;border:0;color:rgba(26,26,26,.6);font-size:12px;font-weight:500;
}
.ui-datepicker.forminator-calendar td{padding:1px;border:0;}
.ui-datepicker.forminator-calendar td .ui-state-default{
  display:flex;align-items:center;justify-content:center;height:40px;margin:0;padding:0;
  border:1px solid transparent;background:none;color:#1A1A1A;text-align:center;font-weight:400;
}
.ui-datepicker.forminator-calendar td a.ui-state-default:hover{
  background:var(--ast-global-color-8,#C1DCF4);border-color:var(--ast-global-color-8,#C1DCF4);
}
.ui-datepicker.forminator-calendar td.ui-state-disabled{opacity:1;}
.ui-datepicker.forminator-calendar td.ui-state-disabled .ui-state-default{color:rgba(26,26,26,.28);}
.ui-datepicker.forminator-calendar td .ui-state-highlight{border-color:var(--ast-global-color-0,#0B6782);}
.ui-datepicker.forminator-calendar td .ui-state-active,
.ui-datepicker.forminator-calendar td .ui-state-active:hover{
  background:var(--ast-global-color-0,#0B6782);border-color:var(--ast-global-color-0,#0B6782);
  color:#fff;font-weight:500;
}