/* ============================================================================
   HeizHirsch — Anfrageformular, Kontaktkarte, Anfrage-Knopf, Mobile-Korrekturen
   Alles unter eigenen Klassen (.hh-*), damit nichts mit Elementor kollidiert.
   Farben kommen aus den globalen Elementor-Variablen, damit der Auftritt stimmt.
   ========================================================================== */

:root{
  --hh-accent: var(--e-global-color-accent, #E30613);
  --hh-dark:   var(--e-global-color-a703a68, #3A4743);
  --hh-panel:  #3A3F47;
  --hh-ink:    var(--e-global-color-text, #EDEDED);
  --hh-line:   rgba(255,255,255,.34);
  --hh-line-2: rgba(255,255,255,.14);
  --hh-ok:     #7BD88F;
}

/* ═══════════════ Schrittanzeige ═══════════════ */
.hh-form{ font-family:"Inter Tight", sans-serif; color:#FFF; }
.hh-form *{ box-sizing:border-box; }

.hh-steps{
  display:flex; align-items:center; gap:0; list-style:none;
  margin:0 0 22px; padding:0;
}
.hh-steps li{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  font-family:"Nunito Sans", sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.46);
  transition:color .2s ease;
}
.hh-steps li + li::before{
  content:""; width:18px; height:1px; background:var(--hh-line-2); margin:0 10px; flex:none;
}
.hh-steps .hh-num{
  width:24px; height:24px; flex:none; display:grid; place-items:center;
  border:1px solid var(--hh-line-2); border-radius:50%;
  font-size:11.5px; font-variant-numeric:tabular-nums;
}
.hh-steps li.is-done{ color:rgba(255,255,255,.72); }
.hh-steps li.is-done .hh-num{ border-color:var(--hh-ok); color:var(--hh-ok); }
.hh-steps li.is-current{ color:#FFF; }
.hh-steps li.is-current .hh-num{ background:var(--hh-accent); border-color:var(--hh-accent); color:#FFF; }
@media (max-width:479px){
  .hh-steps li span.hh-txt{ display:none; }
  .hh-steps li + li::before{ width:26px; margin:0 8px; }
}

/* ═══════════════ Schritte ═══════════════ */
.hh-step{ border:0; margin:0; padding:0; min-width:0; display:none; }
.hh-step.is-active{ display:block; animation:hh-in .28s ease both; }
@keyframes hh-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hh-step.is-active{ animation:none; } }

.hh-legend{
  display:block; width:100%; padding:0; margin:0 0 14px;
  font-family:"Nunito Sans", sans-serif; font-size:17px; font-weight:800;
  line-height:1.3; color:#FFF;
}

/* ═══════════════ Leistungskacheln ═══════════════ */
.hh-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:6px; }
@media (max-width:359px){ .hh-tiles{ grid-template-columns:1fr; } }

.hh-tile{ position:relative; display:block; cursor:pointer; }
.hh-tile input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.hh-tile-in{
  display:flex; flex-direction:column; gap:9px; height:100%;
  padding:15px 14px 14px; background:var(--hh-dark);
  border:1px solid var(--hh-line); transition:border-color .18s ease, background-color .18s ease;
}
.hh-tile-in svg{
  width:26px; height:26px; stroke:#FFF; fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .18s ease;
}
.hh-tile-t{
  font-family:"Nunito Sans", sans-serif; font-size:14px; font-weight:800;
  letter-spacing:.02em; line-height:1.25; color:#FFF;
}
.hh-tile-s{ font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.62); }
.hh-tile:hover .hh-tile-in{ border-color:#FFF; }
.hh-tile input:checked + .hh-tile-in{
  border-color:var(--hh-accent); background:linear-gradient(0deg, rgba(227,6,19,.14), rgba(227,6,19,.14)), var(--hh-dark);
}
.hh-tile input:checked + .hh-tile-in svg{ stroke:var(--hh-accent); }
.hh-tile input:focus-visible + .hh-tile-in{ outline:2px solid #FFF; outline-offset:2px; }

/* ═══════════════ Felder ═══════════════ */
.hh-field{ display:block; margin-bottom:14px; }
.hh-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:479px){ .hh-row{ grid-template-columns:1fr; gap:0; } }

.hh-label{
  display:block; margin-bottom:6px;
  font-family:"Nunito Sans", sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.74);
}
.hh-label .hh-opt{ color:rgba(255,255,255,.42); font-weight:600; letter-spacing:.04em; text-transform:none; }

.hh-form input[type="text"],
.hh-form input[type="email"],
.hh-form input[type="tel"],
.hh-form select,
.hh-form textarea{
  width:100%; display:block; padding:11px 13px;
  background:var(--hh-dark); color:#FFF;
  border:1px solid var(--hh-line); border-radius:0;
  font-family:"Inter Tight", sans-serif; font-size:15px; line-height:1.4;
  appearance:none; -webkit-appearance:none; transition:border-color .18s ease;
}
.hh-form textarea{ min-height:96px; resize:vertical; }
.hh-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
  padding-right:34px;
}
.hh-form select option{ background:var(--hh-dark); color:#FFF; }
.hh-form input:focus, .hh-form select:focus, .hh-form textarea:focus{
  outline:none; border-color:#FFF;
}
.hh-form input:focus-visible, .hh-form select:focus-visible, .hh-form textarea:focus-visible{
  outline:2px solid #FFF; outline-offset:1px;
}
.hh-form ::placeholder{ color:rgba(255,255,255,.38); }

.hh-field.has-error input,
.hh-field.has-error select,
.hh-field.has-error textarea{ border-color:var(--hh-accent); }

.hh-err{
  display:none; margin:6px 0 0; gap:6px; align-items:flex-start;
  font-size:13px; line-height:1.45; color:#FF8E8E;
}
.hh-err.is-shown{ display:flex; }
.hh-err svg{ width:14px; height:14px; flex:none; margin-top:2px; stroke:currentColor; fill:none; stroke-width:2; }

/* ═══════════════ Knöpfe ═══════════════ */
.hh-nav{ display:flex; gap:10px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.hh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border:1px solid #000; border-radius:0; cursor:pointer;
  background:#000; color:#FFF;
  font-family:"Nunito Sans", sans-serif; font-size:14px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; line-height:1;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.hh-btn:hover{ background:var(--hh-accent); border-color:var(--hh-accent); }
.hh-btn:focus-visible{ outline:2px solid #FFF; outline-offset:2px; }
.hh-btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hh-btn.hh-ghost{ background:transparent; border-color:var(--hh-line); color:#FFF; }
.hh-btn.hh-ghost:hover{ background:transparent; border-color:#FFF; }
.hh-btn[disabled]{ opacity:.55; cursor:default; }
.hh-btn.hh-grow{ flex:1 1 auto; }

.hh-hint{ margin:12px 0 0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.52); }
.hh-hint a{ color:rgba(255,255,255,.8); }

/* ═══════════════ Erfolg / Fehler ═══════════════ */
.hh-done{
  display:none; padding:22px 20px; background:var(--hh-dark); border:1px solid var(--hh-ok);
}
.hh-done.is-shown{ display:block; animation:hh-in .3s ease both; }
.hh-done-i{ width:38px; height:38px; margin-bottom:12px; stroke:var(--hh-ok); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hh-done h4{
  margin:0 0 8px; font-family:"Nunito Sans", sans-serif; font-size:19px; font-weight:800; color:#FFF; line-height:1.25;
}
.hh-done p{ margin:0 0 6px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.78); }
.hh-done dl{ margin:14px 0 0; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13.5px; }
.hh-done dt{ color:rgba(255,255,255,.5); }
.hh-done dd{ margin:0; color:#FFF; font-weight:600; }

.hh-fail{
  display:none; margin-top:14px; padding:13px 15px;
  background:rgba(227,6,19,.12); border:1px solid var(--hh-accent);
  font-size:14px; line-height:1.55; color:#FFD6D6;
}
.hh-fail.is-shown{ display:block; }
.hh-fail a{ color:#FFF; font-weight:700; }

/* Honeypot */
.hh-hp{ position:absolute; left:-9999px; top:-9999px; }

/* Sprungziel nicht unter dem klebenden Kopf verstecken */
#anfrage{ scroll-margin-top:80px; }

/* Service-Akkordeon: die Leistungsnamen sind jetzt Überschriften.
   Rein strukturell — das Aussehen bleibt exakt gleich. */
.svc-h{
  margin:0; padding:0; font-size:inherit; font-weight:inherit;
  line-height:inherit; color:inherit; letter-spacing:inherit;
}

/* ═══════════════ Seite /anfrage/ ═══════════════ */
.hh-seite{
  background:var(--hh-dark); color:#FFF;
  padding:clamp(30px,5vw,72px) clamp(16px,3vw,60px) clamp(40px,6vw,84px);
  font-family:"Inter Tight", sans-serif;
}
.hh-seite-in{ max-width:1180px; margin:0 auto; }
.hh-seite-kick{
  margin:0 0 12px; font-family:"Nunito Sans", sans-serif; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--hh-accent); font-weight:800;
}
.hh-seite h1{
  margin:0 0 14px; font-family:"Nunito Sans", sans-serif;
  font-size:clamp(28px,4.6vw,46px); font-weight:900; letter-spacing:-.03em;
  line-height:1.08; color:#FFF; max-width:16ch;
}
.hh-seite-lead{ margin:0; max-width:56ch; font-size:16.5px; line-height:1.62; color:rgba(255,255,255,.76); }
.hh-seite-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:clamp(18px,2.6vw,34px); margin-top:clamp(26px,4vw,46px); align-items:start;
}
@media (max-width:880px){ .hh-seite-grid{ grid-template-columns:1fr; } }
.hh-seite-form{ background:#3A3F47; border:1px solid rgba(255,255,255,.14); padding:clamp(18px,2.4vw,28px); }
.hh-seite-neben{ display:flex; flex-direction:column; gap:12px; }
.hh-vertrauen{ background:var(--hh-dark); border:1px solid rgba(255,255,255,.14); padding:16px 18px; }
.hh-vertrauen h2{
  margin:0 0 6px; font-family:"Nunito Sans", sans-serif; font-size:14.5px;
  font-weight:900; letter-spacing:-.005em; color:#FFF; display:flex; align-items:center; gap:9px;
}
.hh-vertrauen h2 svg{ width:17px; height:17px; stroke:var(--hh-accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.hh-vertrauen p{ margin:0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.7); }
.hh-direkt{ background:var(--hh-accent); padding:18px; }
.hh-direkt p{ margin:0 0 4px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:rgba(255,255,255,.85); }
.hh-direkt a{ display:block; font-family:"Nunito Sans", sans-serif; font-size:22px; font-weight:900; color:#FFF; text-decoration:none; letter-spacing:-.01em; }
.hh-direkt small{ display:block; margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.85); }
.hh-ablauf{ margin-top:clamp(26px,4vw,46px); }
.hh-ablauf-k{ margin:0 0 14px; font-family:"Nunito Sans", sans-serif; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:800; }
.hh-ablauf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:760px){ .hh-ablauf-grid{ grid-template-columns:1fr; } }
.hh-schritt{ border-top:2px solid var(--hh-accent); padding-top:13px; }
.hh-schritt b{ display:block; font-family:"Nunito Sans", sans-serif; font-size:10.5px;
  letter-spacing:.14em; color:var(--hh-accent); font-weight:800; margin-bottom:5px; }
.hh-schritt h2{ margin:0 0 5px; font-family:"Nunito Sans", sans-serif; font-size:15.5px; font-weight:900; color:#FFF; }
.hh-schritt p{ margin:0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.7); }