/* 09-kontakt — Kontakt & Formular auf Dunkel (Besitzer: Kontakt-Agent, nicht im Template).
   Info-Spalte links, helle Formularkarte rechts (CF7 #6, Feld-Selektoren stehen im Formular-Markup in der DB).
   Nur Rollen-/CI-Tokens aus site.css, keine Hex-Werte. */

/* Langwörter (Redaktion) dürfen weder Kopf noch Rasterspalten weiten */
.rad-contact{overflow-wrap:anywhere}
.rad-contact__grid>*{min-width:0}

/* Kopf: Eyebrow + Zweizeiler, max. 24ch */
.rad-contact__head h2{margin-top:14px;max-width:24ch}

/* Raster 1440: Info .83fr, Formular 1.17fr */
.rad-contact__grid{display:grid;grid-template-columns:.83fr 1.17fr;gap:96px;margin-top:64px;align-items:start}

/* Info-Spalte */
.rad-contact__info h2{margin:0;font:var(--rad-w-h3) var(--rad-fs-h3)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);color:var(--vn-color-fg)}
.rad-contact .rad-contact__address{margin-top:14px;font-size:var(--vn-text-base);line-height:1.7}
.rad-contact__info .rad-text-link{margin-top:10px;color:var(--vn-color-fg)}

/* Öffnungszeiten: Hairline oben/unten; Liste + Live-Status aus [das_rad_zeiten] (08b-standort, seit 01.10.2026) */
.rad-contact__hours{margin-top:28px;padding:18px 0;border-top:1px solid var(--vn-color-line);border-bottom:1px solid var(--vn-color-line)}
.rad-contact__hours h3{margin:0 0 10px;font:600 var(--vn-text-sm)/1.4 var(--vn-font-body);letter-spacing:0;color:var(--vn-color-fg)}
.rad-contact__hours .rad-map__zeiten{margin:0}

/* Direktkontakt: Telefon und Mail nebeneinander in Textgröße (01.10.2026) */
.rad-contact__direct{display:flex;flex-wrap:wrap;column-gap:28px;margin-top:14px}
.rad-contact__direct a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:500 var(--vn-text-base)/1.5 var(--vn-font-body)}
/* Telefon/Mail: Schimmer + Schein (rad-shine) statt Unterstreichung (17.09.2026) */
.rad-contact__phone{color:var(--vn-color-accent-on-dark)}
.rad-contact__mail{color:var(--vn-color-fg)}

/* Formularkarte: hell auf Dunkel, trägt lokal die Rollen-Tokens von .rad-light */
.rad-contact__form{position:relative;background:var(--vn-color-paper);color:var(--vn-color-ink);border-radius:var(--vn-radius-xl);padding:36px;border:1px solid var(--vn-color-divider-light);
  --vn-color-bg:var(--vn-color-paper);--vn-color-fg:var(--vn-color-ink);--vn-color-muted:var(--vn-color-ink-muted);--vn-color-line:var(--vn-color-divider-light);--vn-color-accent-text:var(--vn-color-accent-strong);--vn-color-accent-text-small:var(--vn-color-accent-ink);--rad-stagger:120ms;--i:1}
.rad-contact__form :focus-visible{outline-color:var(--vn-color-accent-ink)}  /* Gold-800: 6.1:1 auf paper (Gold-500 wäre 2.55:1) */
.rad-contact__form h2{margin:0;font:var(--rad-w-h3) var(--rad-fs-h3)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);color:var(--vn-color-fg)}
.rad-contact .rad-contact__intro{margin:12px 0 26px;max-width:48ch;font-size:var(--vn-text-sm);line-height:1.7;color:var(--vn-color-muted)}

/* CF7-Formular: Raster, Labels, Felder */
.rad-contact .wpcf7 form{margin:0}
.rad-contact .rad-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.rad-contact .rad-form-grid p{margin:0}
.rad-contact .rad-field-full{grid-column:1/-1}
.rad-contact .rad-form-grid label{display:block;font:600 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-contact .rad-field-optional{font-weight:400;color:var(--vn-color-muted)}
.rad-contact .wpcf7-form-control-wrap{display:block;position:relative;margin-top:8px}
.rad-contact .wpcf7-form-control-wrap:has(>select)::after{content:"";position:absolute;right:16px;top:24px;width:14px;height:14px;transform:translateY(-50%) rotate(90deg);background:currentColor;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 18h27M21 8l10 10-10 10' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 18h27M21 8l10 10-10 10' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.rad-contact .rad-form-grid input,.rad-contact .rad-form-grid select,.rad-contact .rad-form-grid textarea{display:block;width:100%;margin:0;background:var(--vn-color-paper);color:var(--vn-color-ink);border:1px solid color-mix(in srgb,var(--vn-color-ink) 50%,transparent);border-radius:var(--vn-radius-sm);min-height:48px;padding:12px 14px;font:400 .9375rem/1.5 var(--vn-font-body);appearance:none;-webkit-appearance:none;box-shadow:none;transition:border-color var(--vn-d-snap) var(--vn-ease-out)}
.rad-contact .rad-form-grid select{padding-right:44px;cursor:pointer}
.rad-contact .rad-form-grid textarea{min-height:140px;resize:vertical}
.rad-contact .rad-form-grid ::placeholder{color:var(--vn-color-muted);opacity:1}
.rad-contact .rad-form-grid input:focus,.rad-contact .rad-form-grid select:focus,.rad-contact .rad-form-grid textarea:focus{border-color:var(--vn-color-accent);outline:2px solid var(--vn-color-accent-ink);outline-offset:2px}

/* Fehler (Rollen-Token --vn-color-negative, 6.3:1 auf paper) */
.rad-contact .wpcf7-not-valid-tip{display:block;margin-top:6px;font:400 var(--vn-text-xs)/1.5 var(--vn-font-body);color:var(--vn-color-negative)}
.rad-contact .rad-form-grid [aria-invalid=true]{border-color:var(--vn-color-negative)}

/* Honeypot, Hilfetext, Submit */
.rad-contact .rad-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rad-contact .rad-field-help{margin:18px 0 20px;max-width:60ch;font-size:var(--vn-text-xs);line-height:1.6;color:var(--vn-color-muted)}
.rad-contact .rad-field-help a{color:var(--vn-color-fg);text-decoration:underline;text-underline-offset:3px}
.rad-contact .rad-form-submit{margin:0;display:flex;align-items:center;gap:12px}
.rad-contact .wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border-radius:var(--vn-radius-full);background:var(--vn-color-accent);color:var(--vn-color-ink);font:600 var(--vn-text-sm)/1.3 var(--vn-font-body);border:1px solid transparent;cursor:pointer;box-shadow:none;transition:background var(--vn-d-snap) var(--vn-ease-out)}
@media(hover:hover){.rad-contact .wpcf7-submit:hover{background:var(--vn-color-accent-on-dark)}}
.rad-contact .wpcf7-submit:disabled{opacity:.6;cursor:default}
.rad-contact .wpcf7 form.submitting .wpcf7-submit{pointer-events:none;opacity:.6}
.rad-contact .wpcf7-spinner{margin:0}

/* Rückmeldung: Rahmenfarbe je Zustand (CF7-Default-Rahmen wird überschrieben) */
.rad-contact .wpcf7 form .wpcf7-response-output{margin:20px 0 0;padding:14px 16px;border:1px solid var(--vn-color-line);border-radius:var(--vn-radius-sm);font-size:var(--vn-text-sm);line-height:1.7;color:var(--vn-color-fg)}
.rad-contact .wpcf7 form.sent .wpcf7-response-output{border-color:color-mix(in srgb,var(--vn-color-accent-strong) 60%,transparent)}
.rad-contact .wpcf7 form.invalid .wpcf7-response-output,.rad-contact .wpcf7 form.unaccepted .wpcf7-response-output,.rad-contact .wpcf7 form.spam .wpcf7-response-output,.rad-contact .wpcf7 form.failed .wpcf7-response-output,.rad-contact .wpcf7 form.aborted .wpcf7-response-output{border-color:var(--vn-color-negative)}

/* ≤1000: engeres Raster, Formular einspaltig */
@media(max-width:1000px){
  .rad-contact__grid{grid-template-columns:.8fr 1.2fr;gap:30px;margin-top:48px}
  .rad-contact .rad-form-grid{grid-template-columns:1fr}
  .rad-contact__form{padding:28px 24px}
}

/* ≤650: einspaltig, Formular zuerst (Kundenwunsch 01.10.2026), Adresse/Zeiten/Telefon darunter */
@media(max-width:650px){
  .rad-contact__grid{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:32px}
  .rad-contact__form{order:-1}
  .rad-contact__form{padding:24px 20px}
  .rad-contact__info,.rad-contact__form{overflow-wrap:anywhere}
  .rad-contact .rad-form-submit{position:relative}
  .rad-contact .wpcf7-submit{width:100%}
  .rad-contact .wpcf7-spinner{position:absolute;right:16px;top:50%;translate:0 -50%}
  /* iOS Safari zoomt beim Fokus, sobald ein Feld < 16 px hat → alle Eingabefelder (inkl. Honeypot) auf 16 px;
     Feldhöhe steigt damit 48 → 50 px (24 px Zeile + 24 px Padding + Rand), Textarea bleibt bei min-height 140 */
  .rad-contact .wpcf7 input:not([type=submit]),.rad-contact .wpcf7 select,.rad-contact .wpcf7 textarea{font-size:16px}
}

/* <440: „Bleib wegen der Menschen.“ passt bei 30 px nicht mehr in die Shell → festen Umbruch aufheben,
   der Zweizeiler fließt als Satzpaar in drei Zeilen ohne Waise (Leerzeichen vor dem <br> steht im Pattern) */
@media(max-width:440px){
  .rad-contact__head h2 br{display:none}
}

/* reduced-motion: statisch (Dauern sind in site.css auf 0 gesetzt) */
@media(prefers-reduced-motion:reduce){
  .rad-contact .rad-form-grid input,.rad-contact .rad-form-grid select,.rad-contact .rad-form-grid textarea,.rad-contact .wpcf7-submit{transition:none}
}

/* iOS zoomt bei Feldern < 16 px unabhängig von der Viewport-Breite — daher auf allen Touch-Geräten 16 px
   (Nachbesserung 08.09.2026; ergänzt die ≤650-Regel um Tablet und Querformat). */
@media(hover:none){
  .rad-contact .wpcf7 input:not([type=submit]),.rad-contact .wpcf7 select,.rad-contact .wpcf7 textarea{font-size:16px}
}

/* Eigene Seite /kontakt/ (seit 17.09.2026; Template „preview“ = Header + Inhalt + Footer ohne Seitentitel): der h1 übernimmt die
   h2-Optik, die Sektion beginnt unter dem fixierten Header. */
.rad-contact__h1{font-size:var(--rad-fs-h1);line-height:var(--rad-lh-h1);letter-spacing:var(--rad-ls-h1);text-transform:none}
.rad-contact--page{padding-top:calc(var(--rad-header-h) + var(--vn-section-y) * .5)}