/* drivebro — Hilfe-Center (hilfe.html). Klassen mit Präfix hi-. */

/* ---------- Bühne mit weisser Suchkarte ---------- */
.hi-buehne h1{font-size:clamp(32px,3.8vw,54px)}
.hi-suchkarte{max-width:860px;margin-top:26px;padding:18px 20px 20px}
.hi-suche{display:flex;align-items:center;gap:12px;height:56px;padding:0 8px 0 18px;border:1.5px solid var(--linie);border-radius:999px;background:#fff;transition:border-color .2s,box-shadow .2s}
.hi-suche:focus-within{border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.hi-suche>.ic{width:21px;height:21px;color:var(--grau);flex:none}
.hi-suche input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--tinte);font-size:17px}
.hi-suche input::placeholder{color:var(--grau-hell)}
.hi-suche input::-webkit-search-cancel-button{display:none}
.hi-leeren{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--flaeche);color:var(--tinte);flex:none}
.hi-leeren[hidden]{display:none}
.hi-leeren .ic{width:18px;height:18px}
.hi-treffer{min-height:1.4em;margin:8px 0 0 18px;font-size:14px;color:var(--grau)}
.hi-themen{margin-top:8px}
.hi-themen .chip.aus{opacity:.4}

/* ---------- Fragen ---------- */
.hi-raster{max-width:940px}
.hi-thema{scroll-margin-top:calc(var(--kopf-h) + 20px)}
.hi-thema+.hi-thema{margin-top:clamp(40px,4.4vw,64px)}
.hi-thema[hidden]{display:none}
.hi-thema h2{display:flex;align-items:center;gap:16px;font-size:clamp(24px,2.4vw,32px);margin-bottom:18px}
.hi-thema h2 .glas{--s:48px;flex:none}
.hi-fragen{border-bottom:1px solid var(--linie)}
.hi-frage{border-top:1px solid var(--linie)}
.hi-frage[hidden]{display:none}
.hi-frage summary{position:relative;display:block;padding:18px 48px 18px 2px;font-size:17px;font-weight:600;line-height:1.4;color:var(--tinte);cursor:pointer;list-style:none;border-radius:8px}
.hi-frage summary::-webkit-details-marker{display:none}
.hi-frage summary::after{content:"";position:absolute;right:14px;top:50%;width:9px;height:9px;border-right:1.8px solid var(--grau);border-bottom:1.8px solid var(--grau);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--weich)}
.hi-frage[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.hi-frage summary:hover{color:var(--akzent)}
.hi-antwort{padding:0 48px 20px 2px}
.hi-antwort p+p,.hi-antwort ul+p{margin-top:10px!important}
.hi-liste{margin:8px 0 0;padding-left:20px;font-size:16px;line-height:1.6;color:var(--text)}
.hi-antwort p{margin:0;font-size:16.5px;line-height:1.65;color:var(--text);max-width:70ch}
.hi-antwort a,.hi-link{color:var(--akzent);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hi-frage mark{background:color-mix(in srgb,var(--limette) 40%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.hi-leer{display:grid;justify-items:center;gap:12px;text-align:center;padding:40px 16px}
.hi-leer[hidden]{display:none}
.hi-leer h2{font-size:24px}
.hi-leer p{margin:0;max-width:46ch;color:var(--grau)}

/* ---------- Betrug ---------- */
.hi-zweispaltig{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.hi-regeln{list-style:none;margin:0;padding:0;counter-reset:hi-regel;border-bottom:1px solid color-mix(in srgb,var(--akzent) 16%,transparent)}
.hi-regeln li{position:relative;padding:22px 0 22px 56px;border-top:1px solid color-mix(in srgb,var(--akzent) 16%,transparent);counter-increment:hi-regel}
.hi-regeln li::before{content:counter(hi-regel);position:absolute;left:0;top:20px;font-size:30px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--akzent)}
.hi-regeln h3{font-size:clamp(19px,1.6vw,22px);line-height:1.25;margin-bottom:6px}
.hi-regeln p{margin:0;font-size:16px;color:var(--text);max-width:60ch}

/* ---------- Kontakt ---------- */
.hi-kontakt{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(24px,4vw,64px);padding:clamp(24px,3.4vw,48px);scroll-margin-top:calc(var(--kopf-h) + 20px)}
.hi-kontakt-text h2{font-size:clamp(26px,2.6vw,36px);line-height:1.1;margin-bottom:12px}
.hi-kontakt-text p{color:var(--grau);font-size:17px}
.hi-form{display:grid;gap:14px;min-width:0}
.hi-form-fuss{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:4px}
.hi-danke{display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:var(--radius-feld);background:var(--gruen-flaeche)}
.hi-danke[hidden]{display:none}
.hi-danke:focus{outline:0}
.hi-danke h3{font-size:18px;margin-bottom:2px}
.hi-danke p{margin:0;font-size:14.5px;color:var(--text)}

/* Pfeil im Auswahlfeld (basis.css setzt background:#fff und überschreibt ihn) */
.hi-form .feld select{padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2377736B' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center}
.hi-form .feld select:disabled{background-color:var(--flaeche)}

/* ---------- Tablet und Telefon ---------- */
@media (max-width:1100px){
  .hi-zweispaltig,.hi-kontakt{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .hi-suchkarte{padding:14px 14px 16px}
  .hi-suche{padding-left:14px}
  .hi-suche input{font-size:16px}
  .hi-treffer{margin-left:14px}
  .hi-themen .chip{padding:8px 12px;font-size:14px}
  .hi-frage summary{font-size:16px;padding-right:40px}
  .hi-antwort{padding-right:8px}
  .hi-regeln li{padding-left:44px}
  .hi-regeln li::before{font-size:26px}
  .hi-form .feld-paar{grid-template-columns:minmax(0,1fr)}
}