/* ============================================================
   FAQ — eigene Seite
   Aufbau: Kopf mit Sprungleiste, danach vier Themenblöcke.
   Je Block links eine mitlaufende Marke, rechts die Fragen als
   Zeilen mit Haarlinien — keine Kästen, damit bei 18 Fragen
   kein Kachelteppich entsteht.
   Lädt nach style-hell.css + miller-hell.css.
   ============================================================ */

.fq{background:var(--paper);padding-block:clamp(104px,11vw,148px) clamp(56px,7vw,96px)}

.fq-crumb{font-size:13px;color:var(--ink-soft);margin-bottom:20px}
.fq-crumb a{color:var(--blue-logo)}
.fq-eyebrow{font-family:"Urbanist",system-ui,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-logo);display:block}

/* ---- Kopf: Aussage links, Direktkontakt rechts -------------- */
.fq-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:end;
  padding-bottom:clamp(32px,4vw,44px);border-bottom:1px solid var(--line)}
.fq-head h1{margin-top:16px;font-size:clamp(34px,4.4vw,60px);line-height:1.08;
  letter-spacing:-.026em;text-wrap:balance}
.fq-head-text>p{margin-top:20px;max-width:48ch;
  font-size:clamp(16px,1.35vw,18.5px);line-height:1.72;color:var(--ink-soft)}

.fq-ask{border-top:2px solid var(--blue-logo);padding-top:20px}
.fq-ask b{display:block;font-size:16.5px;line-height:1.35;color:var(--ink)}
.fq-ask p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-soft);max-width:34ch}
.fq-ask-ways{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.fq-ask-ways a{font-size:14px;font-weight:500;color:var(--navy);background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.fq-ask-ways a:hover{transform:translateY(-2px);border-color:var(--blue-logo);
  box-shadow:0 10px 24px rgba(2,82,166,.12)}
.fq-ask-ways a:active{transform:scale(.98)}

/* ---- Sprungleiste ------------------------------------------- */
.fq-jump{display:flex;flex-wrap:wrap;gap:8px;
  padding-block:clamp(22px,2.6vw,30px);border-bottom:1px solid var(--line)}
.fq-jump a{font-size:13.5px;font-weight:500;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.fq-jump a:hover{color:var(--navy);border-color:var(--blue-logo);background:var(--white)}

/* ---- Themenblöcke ------------------------------------------- */
.fq-block{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start;
  padding-block:clamp(38px,4.6vw,60px);border-bottom:1px solid var(--line)}
.fq-block:last-of-type{border-bottom:0}
.fq-block-head{position:sticky;top:118px}
.fq-block-head .no{font-family:"Urbanist",system-ui,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.14em;color:var(--blue-logo);font-variant-numeric:tabular-nums}
.fq-block-head h2{margin-top:10px;font-size:clamp(20px,2.1vw,25px);line-height:1.22;
  letter-spacing:-.014em;max-width:14ch}

.fq-list{border-top:1px solid var(--line)}
.fq-list details{border-bottom:1px solid var(--line)}
.fq-list summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:1fr 18px;gap:20px;align-items:center;
  padding:20px 2px;font-size:clamp(15.5px,1.3vw,17px);line-height:1.4;
  font-weight:500;color:var(--ink);transition:color .3s var(--ease)}
.fq-list summary:hover{color:var(--blue-logo)}
.fq-list summary::-webkit-details-marker{display:none}
.fq-list summary::after{content:"";width:11px;height:11px;justify-self:center;
  border-right:1.8px solid var(--blue-logo);border-bottom:1.8px solid var(--blue-logo);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.fq-list details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.fq-list .a{padding:0 2px 22px;font-size:15.5px;line-height:1.8;color:var(--ink-soft);
  max-width:68ch}
.fq-list .a+.a{margin-top:12px}
.fq-list .a a{color:var(--blue-logo);text-decoration:underline;text-underline-offset:3px}

/* ---- Abschluss ---------------------------------------------- */
.fq-outro{margin-top:clamp(44px,5vw,68px);background:var(--navy);color:var(--white);
  border-radius:var(--r);padding:clamp(28px,3.6vw,48px);
  display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.fq-outro h2{font-size:clamp(21px,2.3vw,29px);line-height:1.24;letter-spacing:-.016em;
  max-width:22ch}
.fq-outro p{margin-top:10px;font-size:15px;line-height:1.7;
  color:rgba(255,255,255,.8);max-width:44ch}
/* Der Standard-Glasbutton kommt auf dieser Fläche nur auf rund
   4:1 Kontrast. Hier deshalb deckendes Weiß. */
.fq-outro .btn--white{flex:none;background:var(--white);border-color:var(--white)}
.fq-outro .btn--white:hover{background:var(--white)}

/* ---- Mobil -------------------------------------------------- */
@media(max-width:900px){
  .fq{padding-top:clamp(92px,22vw,112px)}
  .fq-head{grid-template-columns:1fr;gap:28px;align-items:start}
  .fq-head h1{font-size:clamp(29px,8vw,38px)}
  .fq-head-text>p{max-width:none;font-size:16px}
  .fq-ask p{max-width:none}
  .fq-block{grid-template-columns:1fr;gap:16px}
  .fq-block-head{position:static}
  .fq-block-head h2{max-width:none;font-size:20px}
  .fq-list .a{max-width:none}
  .fq-outro{padding:24px 22px}
}