/* Ermeth Kontakt, Marke «Klartext» (5. Oktober 2026, Paket C). layout() in scripts/site-shell.mjs lädt diese Datei für Seiten mit
   dem Anfrageformular (.inquiry-trap). Nur Markentokens und Rollen aus dist/site.css; Felder, Meldungen und Ablaufleiste kommen aus
   site.css und werden hier nur angeordnet. Formular links, Seitenspalte rechts, mobil darunter. Linien statt Kästchen. */

.inq{padding:0 0 var(--section)}
.inq-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-8);align-items:start}
.inq-main{grid-column:1/span 7;min-width:0}
.inq-aside{grid-column:9/-1;display:grid;gap:var(--space-6);min-width:0}

/* ---------------------------------------------------------------- Formular */
.inq-form{min-width:0}
.inq-pflicht{margin:calc(-1 * var(--space-3)) 0 var(--space-5);font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}
.inq-fieldset{min-width:0;margin:0 0 var(--space-7);padding:var(--space-5) 0 0;border:0;border-top:var(--linie-kontur) solid var(--text-1)}
/* Legende als normaler Block unter der Linie (float hebt sie aus dem Rahmen). */
.inq-fieldset legend:not(.sr-only){float:left;width:100%;margin:0 0 var(--space-5);padding:0;font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3);color:var(--text-1)}
.inq-fieldset legend:not(.sr-only)+*{clear:both}
.inq-fieldset.inq-versand{padding-top:var(--space-5)}
.inq-form .field-help{max-width:40em}
.inq-form .field-error{display:none}
.inq-form .field.is-invalid .field-error,.inq-form .field:has(:user-invalid) .field-error{display:flex}
.inq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--raster-steg);align-items:start}
.inq-form .field{align-content:start}
.inq-form .inquiry-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.inq-einwilligung{margin:0 0 var(--space-5)}
.inq-einwilligung .field{margin:0;max-width:42em}
.inq-einwilligung .field-error{margin-top:var(--space-2)}
.inq-einwilligung:has(.is-invalid,:user-invalid) .field-error{display:flex}
.inq-einwilligung a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em}
.inq-einwilligung a:hover{text-decoration-color:var(--q-voll);text-decoration-thickness:2px}
.inq-form .meldung{margin:0 0 var(--space-5)}
.meldung:empty{display:none}
.inq-vertrauen{margin:0 0 var(--space-4);max-width:40em;font:500 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1)}
.inq-send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.inq-send .button{white-space:normal}
.inq-mode{margin:var(--space-4) 0 0;max-width:40em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}
.inq-form[aria-busy=true]{opacity:.75}
.inq-form button:disabled{cursor:wait}
#contact-challenge:empty{display:none}

/* Zweiter Schritt: natives HubSpot-Formular (dist/contact-hubspot.mjs) */
.inq-native{padding-top:var(--space-5);border-top:var(--linie-kontur) solid var(--text-1)}
.inq-native h2{margin:0 0 var(--space-3)}
.inq-native .inq-mode{margin:0 0 var(--space-4)}
.inq-native .meldung{margin:0 0 var(--space-4)}
#hubspot-contact{min-width:0;margin-top:var(--space-5)}
#hubspot-contact iframe{width:100%;max-width:100%;border:0}
#native-alternatives{margin-top:var(--space-6)}
#native-alternatives .inq-mode{margin:0 0 var(--space-4)}

/* ---------------------------------------------------------------- Seitenspalte: Ablaufleiste nach dem Absenden, Präsentation, direkte Wege */
.inq-block{display:grid;align-content:start;gap:var(--space-3)}
.inq-block+.inq-block{padding-top:var(--space-6);border-top:1px solid var(--linie-ton)}
.inq-aside>.inq-block:first-child{padding-top:var(--space-5);border-top:var(--linie-kontur) solid var(--text-1)}
.inq-block h2{margin:0 0 var(--space-1)}
.inq-block p{margin:0;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1)}
.inq-block p.meta{font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);color:var(--text-2)}
.inq-weg-vorschau{margin:0 0 var(--space-1)!important}
.inq-weg>li{padding-bottom:var(--space-5)}
.inq-weg>li:last-child{padding-bottom:0}
.inq-weg .inq-weg-text{margin-top:var(--space-1);color:var(--text-1)}
.inq-direkt p{color:var(--text-2)}
.inq-direkt strong{color:var(--text-1);font-weight:600}
.inq-direkt a{display:inline-block;padding:6px 0;margin:-4px 0;color:var(--text-1);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;overflow-wrap:anywhere}
.inq-direkt a:hover{text-decoration-color:var(--q-voll);text-decoration-thickness:2px}

/* Lieber zuerst schauen */
.inq-mehr{border-top:1px solid var(--linie-ton)}
.inq-mehr h2{max-width:18ch;margin-bottom:var(--space-4)}
.inq-mehr .lead{margin:0}

/* ---------------------------------------------------------------- Responsiv */
@media (max-width:1100px){
 .inq-main{grid-column:1/span 7}
 .inq-aside{grid-column:8/-1;padding-left:var(--space-4)}
}
@media (max-width:900px){
 .inq-main,.inq-aside{grid-column:1/-1;padding-left:0}
 .inq-layout{row-gap:var(--space-7)}
}
@media (max-width:640px){
 .inq-grid{grid-template-columns:1fr}
 .inq-send{flex-direction:column;align-items:stretch}
 .inq-send .button{width:100%}
 .inq-mehr .page-actions{gap:0 var(--space-6)}
}