/* INQIS Kontaktseite (Vorlage kontakt-anliegen, E308). ERZEUGT mit theme/tests/erzeuge-kontakt.php -- nicht von Hand aendern.
   Regeln aus dem Entwurf woertlich (Zeilen 41-136 und 142-163 ohne Menue), Schriften des Themes, Hover nur bei Maus;
   danach die Ergaenzungen fuer Contact Form 7 und die Ausgaenge. */
/* Auftakt */
.iq-auftakt{background:#000;color:#fff;padding-top:clamp(56px,7cqw,104px);padding-bottom:clamp(48px,5.6cqw,80px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px 64px;align-items:end}
.iq-zeile{display:flex;align-items:center;gap:12px;font-size:16px;color:#bdbdbd}
.iq-zeile .iq-punkt{width:10px;height:10px;margin:0}
.iq-titel{margin:22px 0 0;font-weight:600;font-size:clamp(46px,7.2cqw,112px);line-height:.96;letter-spacing:-.03em}
.iq-titel span{display:block;animation:iq-steigen .7s cubic-bezier(.23,1,.32,1) backwards}
.iq-titel span+span{animation-delay:.07s}
@keyframes iq-steigen{from{opacity:0;transform:translateY(18px)}}
.iq-einleitung{margin:0;max-width:30em;font-size:clamp(18px,1.45cqw,22px);line-height:1.5;color:#d4d4d4}
.iq-einleitung b{color:#fff;font-weight:700}
.iq-farbband{display:flex;height:6px;margin-top:28px;max-width:30em}
.iq-farbband span{flex:1}
/* Hauptteil */
.iq-haupt{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:56px clamp(40px,6cqw,96px);padding-top:clamp(56px,6cqw,88px);padding-bottom:clamp(72px,8cqw,120px);align-items:start}
.iq-schritt{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;font-size:clamp(24px,2.1cqw,30px);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.iq-schritt i{font-style:normal;display:inline-grid;place-items:center;flex:none;width:34px;height:34px;background:#000;color:#fff;font-size:16px;transform:translateY(-3px)}
/* Anliegen */
.iq-anliegen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 56px;padding:0;list-style:none}
.iq-wahl{width:100%;height:100%;min-height:96px;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px 18px;text-align:left;background:#fff;color:#000;border:1.5px solid #000;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .16s cubic-bezier(.23,1,.32,1),color .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1)}
.iq-wahl:active{transform:scale(.97)}
.iq-wahl b{display:flex;align-items:center;gap:10px;font-family:var(--wp--preset--font-family--jost);font-weight:600;font-size:17px;line-height:1.25}
.iq-wahl b::before{content:"";width:12px;height:12px;flex:none;background:var(--f)}
.iq-wahl small{font-size:15px;line-height:1.4;color:#4a4a4a}
@media (hover:hover) and (pointer:fine){.iq-wahl:hover{background:#f3f3f3}}
.iq-wahl[aria-pressed="true"]{background:#000;color:#fff}
.iq-wahl[aria-pressed="true"] small{color:#cfcfcf}
/* Formular */
.iq-form{display:flex;flex-direction:column;gap:26px}
.iq-paar{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.iq-feld{display:flex;flex-direction:column;gap:8px}
.iq-feld label,.iq-feld .iq-label{font-family:var(--wp--preset--font-family--jost);font-weight:600;font-size:16px}
.iq-feld label em,.iq-feld .iq-label em{font-style:normal;font-weight:400;color:#5a5a5a}
.iq-eingabe{font:inherit;font-size:18px;color:#000;background:#fff;border:1.5px solid #000;border-radius:0;min-height:56px;box-sizing:border-box;padding:12px 16px;width:100%;-webkit-appearance:none;appearance:none;transition:box-shadow .16s cubic-bezier(.23,1,.32,1)}
textarea.iq-eingabe{min-height:200px;resize:vertical;line-height:1.5}
.iq-eingabe:focus{box-shadow:inset 0 0 0 1.5px #000}
.iq-eingabe::placeholder{color:#8a8a8a}
.iq-eingabe[aria-invalid="true"]{border-color:#c4300a;box-shadow:inset 0 0 0 1.5px #c4300a}
.iq-hilfe{font-size:15px;color:#5a5a5a;line-height:1.4}
.iq-fehler{display:flex;align-items:center;gap:8px;font-family:var(--wp--preset--font-family--jost);font-size:15px;font-weight:600;color:#c4300a}
.iq-fehler::before{content:"";width:8px;height:8px;background:#c4300a;flex:none}
.iq-zaehler{align-self:flex-end;font-family:var(--wp--preset--font-family--jost);font-size:14px;color:#5a5a5a;margin-top:-2px}
.iq-art{display:flex;flex-wrap:wrap;gap:10px}
.iq-chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;box-sizing:border-box;padding:0 18px;border:1.5px solid #000;background:#fff;color:#000;font-family:var(--wp--preset--font-family--jost);font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .16s cubic-bezier(.23,1,.32,1),color .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1)}
.iq-chip:active{transform:scale(.97)}
.iq-chip[aria-pressed="true"]{background:#000;color:#fff}
.iq-zusatz{display:flex;flex-direction:column;gap:26px}
.iq-ein-a{animation:iq-ein-a .28s cubic-bezier(.23,1,.32,1)}
.iq-ein-b{animation:iq-ein-b .28s cubic-bezier(.23,1,.32,1)}
@keyframes iq-ein-a{from{opacity:0;transform:translateY(8px)}}
@keyframes iq-ein-b{from{opacity:0;transform:translateY(8px)}}
.iq-feld label.iq-zustimmung{font-family:inherit;font-weight:400}
.iq-zustimmung{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;font-size:16px;line-height:1.5;cursor:pointer}
.iq-zustimmung input{width:24px;height:24px;margin:1px 0 0;accent-color:#000;cursor:pointer}
.iq-zustimmung a{text-underline-offset:3px}
.iq-senden{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding-top:8px;border-top:1.5px solid #000;margin-top:6px}
.iq-knopf{display:inline-flex;align-items:center;gap:14px;min-height:56px;box-sizing:border-box;padding:0 28px;border:0;background:#000;color:#fff;font-family:var(--wp--preset--font-family--jost);font-weight:600;font-size:17px;cursor:pointer;text-decoration:none;margin-top:24px;-webkit-tap-highlight-color:transparent;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}
.iq-knopf:active{transform:scale(.97)}
.iq-knopf svg{transition:transform .2s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.iq-knopf:hover{background:#e8491d}.iq-knopf:hover svg{transform:translateX(4px)}}
.iq-senden p{margin:24px 0 0;font-size:15px;color:#5a5a5a;max-width:26em;line-height:1.45}
.iq-hinweis-oben{border:1.5px solid #c4300a;padding:14px 18px;font-family:var(--wp--preset--font-family--jost);font-size:16px;color:#c4300a;font-weight:600}
.iq-leer{border:1.5px dashed #9a9a9a;padding:28px 26px;color:#4a4a4a;font-size:17px}
/* Erfolg */
.iq-danke{border:1.5px solid #000;padding:clamp(28px,3.4cqw,48px);display:flex;flex-direction:column;gap:18px;animation:iq-ein-a .34s cubic-bezier(.23,1,.32,1)}
.iq-danke-marke{display:flex;align-items:center;gap:12px;font-family:var(--wp--preset--font-family--jost);font-size:16px;color:#14603a;font-weight:600}
.iq-danke-marke span{width:12px;height:12px;background:#14603a}
.iq-danke h2{margin:0;font-family:var(--wp--preset--font-family--jost);font-weight:600;font-size:clamp(30px,3.2cqw,44px);line-height:1.05;letter-spacing:-.02em}
.iq-danke p{margin:0;max-width:32em}
.iq-danke dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 24px;margin:6px 0 0;font-size:16px}
.iq-danke dt{font-family:var(--wp--preset--font-family--jost);color:#5a5a5a}
.iq-danke dd{margin:0}
.iq-danke .iq-knopf{align-self:flex-start;margin-top:8px}
/* Seitenspalte */
.iq-seitenspalte{display:flex;flex-direction:column;gap:28px;position:sticky;top:28px}
.iq-person{background:#000;color:#fff;display:flex;flex-direction:column}
.iq-foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%}
.iq-person-text{padding:24px 26px 28px;display:flex;flex-direction:column;gap:6px}
.iq-person-name{font-family:var(--wp--preset--font-family--jost);font-weight:600;font-size:24px;line-height:1.15}
.iq-person-rolle{font-size:16px;color:#bdbdbd}
.iq-direkt{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid #333;display:flex;flex-direction:column;gap:12px;font-size:16px}
.iq-direkt li{display:grid;grid-template-columns:96px 1fr;gap:12px}
.iq-direkt span{font-family:var(--wp--preset--font-family--jost);color:#9a9a9a}
.iq-direkt a{color:#fff;text-underline-offset:3px}
.iq-platz{font-family:var(--wp--preset--font-family--jost);font-size:14px;letter-spacing:.04em;background:#f2b705;color:#000;padding:1px 6px;justify-self:start;align-self:start}
.iq-kasten{border:1.5px solid #000;padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px}
.iq-kasten h3{margin:0;font-family:var(--wp--preset--font-family--jost);font-weight:600;font-size:19px}
.iq-kasten p{margin:0;font-size:16px;line-height:1.5}
.iq-kasten ul{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.iq-kasten li a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;font-family:var(--wp--preset--font-family--jost);font-size:16px;text-decoration:none;border-bottom:1px solid #d6d6d6}
@media (hover:hover) and (pointer:fine){.iq-kasten li a:hover{text-decoration:underline;text-underline-offset:4px}}
.iq-klein{font-size:15px;color:#4a4a4a;line-height:1.5}
@media (prefers-reduced-motion:reduce){.iq-seite *{animation:none !important;transition-duration:0s !important}}
@container (max-width:1100px){
.iq-anliegen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:900px){
.iq-auftakt{grid-template-columns:1fr}
.iq-haupt{grid-template-columns:1fr}
.iq-seitenspalte{position:static}
.iq-person{flex-direction:row}
.iq-foto{width:34%;min-width:0;aspect-ratio:1/1;align-self:center}
}
@container (max-width:600px){
.iq-anliegen{grid-template-columns:1fr;gap:10px}
.iq-wahl{min-height:0}
.iq-paar{grid-template-columns:1fr}
.iq-person{flex-direction:column}
.iq-foto{width:100%;aspect-ratio:16/9;align-self:auto}
.iq-direkt li{grid-template-columns:1fr;gap:0}
.iq-senden .iq-knopf{width:100%;justify-content:center}
}
/* INQIS: Ergaenzungen fuer Contact Form 7 und die Ausgaenge (Abweichungen vom Entwurf, A5) */
[data-iq-kontakt] [hidden]{display:none !important}
.iq-form p{margin:0}
.iq-form .wpcf7-form-control-wrap{display:block}
.iq-form .wpcf7-not-valid-tip{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:var(--wp--preset--font-family--jost);font-size:15px;font-weight:600;color:#c4300a}
.iq-form .wpcf7-not-valid-tip::before{content:"";width:8px;height:8px;background:#c4300a;flex:none}
.iq-form .wpcf7-not-valid{border-color:#c4300a;box-shadow:inset 0 0 0 1.5px #c4300a}
.iq-form .wpcf7-response-output{margin:0;padding:14px 18px;border:1.5px solid #c4300a;color:#c4300a;font-family:var(--wp--preset--font-family--jost);font-weight:600}
.iq-form.sent .wpcf7-response-output{display:none}
.iq-zustimmung .wpcf7-list-item{margin:0}
div.iq-zustimmung{display:block}
.iq-zustimmung label{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;cursor:pointer;font-family:inherit;font-weight:400}
.iq-form-sperre{display:flex;flex-direction:column;gap:18px}
.iq-form-sperre p{margin:0;max-width:34em}
.iq-ausweg{display:flex;flex-direction:column;gap:16px}
.iq-ausweg p{margin:0;max-width:34em}