/* handwerk.css — Panzer IT: Landingpage /handwerk/ für Handwerksbetriebe.
   Baut auf base.css/components.css/inner.css/wartung.css/kontakt.css/faq.css
   auf (keine Neudefinition von Tokens, keine Duplikate bestehender Klassen). */

/* ==========================================================================
   Hero — etwas breiter als die übrigen Seiten-Heros, da die Headline lang ist
   ========================================================================== */
.hw-hero__inner{ max-width:50rem; }
.hw-hero__inner h1{
  font-size:clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  max-width:22ch;
}
.hw-hero__lead{
  font-family:var(--font-display); font-weight:600; color:var(--c-brass);
  font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem);
}
.hw-hero__cta{
  display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4);
}

/* ==========================================================================
   Selbsttest
   ========================================================================== */
.selftest{ margin-top:var(--sp-5); max-width:56rem; }
.selftest__fieldset{ border:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.selftest__item{
  display:flex; align-items:flex-start; gap:.8em; cursor:pointer;
  padding:.5em 0;
}
.selftest__item input[type="checkbox"]{
  flex:none; width:1.3em; height:1.3em; margin-top:.15em;
  accent-color:var(--c-copper); cursor:pointer;
}
.selftest__item span{ color:var(--c-text); line-height:1.5; }
.selftest__result{
  margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px solid var(--c-line);
  color:var(--c-muted); font-size:.95rem;
}
.selftest__result strong{ color:var(--c-text); }
.selftest__result.is-warning{ color:var(--c-brass); }
.selftest__result.is-warning strong{ color:var(--c-copper); }

/* ==========================================================================
   Musterwebsite-Vorschau
   ========================================================================== */
.muster-preview{
  display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-5);
  align-items:center; margin-top:var(--sp-5);
}
.muster-preview__frame{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--c-line); background:var(--c-base);
}
.muster-preview__bar{
  display:flex; align-items:center; gap:.4em;
  padding:.7em 1em; background:var(--c-panel); border-bottom:1px solid var(--c-line);
}
.muster-preview__bar span:not(.muster-preview__url){
  width:.6em; height:.6em; border-radius:50%; background:var(--c-line);
}
.muster-preview__url{
  margin-left:.8em; font-size:.8rem; color:var(--c-muted);
  font-family:var(--font-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.muster-preview__body{
  aspect-ratio:16/10; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8em; text-align:center; padding:var(--sp-4);
  background:
    repeating-linear-gradient(135deg, rgba(184,115,51,.06) 0 12px, transparent 12px 24px),
    var(--c-panel);
}
.muster-preview__body p{ color:var(--c-muted); font-size:.9rem; max-width:28ch; }
.muster-preview__info h3{ font-size:1.3rem; }
.muster-preview__info p{ color:var(--c-muted); margin-top:.6em; }
.muster-preview__info .btn{ margin-top:var(--sp-3); }

@media (max-width:860px){
  .muster-preview{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Platzhalter-Kennzeichnung — für alle Stellen, an denen belegbare Angaben
   fehlen (Preise, Screenshots). Bewusst auffällig, nicht versteckt.
   ========================================================================== */
.hw-placeholder{
  border:1px dashed var(--c-copper); border-radius:var(--radius);
  background:rgba(184,115,51,.06); padding:var(--sp-3);
}
.hw-placeholder p{ color:var(--c-text); margin:0; }
.hw-placeholder__tag{
  display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.12em; font-size:.68rem; color:var(--c-copper);
  background:rgba(184,115,51,.16); padding:.3em .8em; border-radius:999px;
  margin-bottom:.6em;
}
.hw-placeholder__note{
  display:block; margin-top:.5em; color:var(--c-brass); font-size:.85rem;
}

/* ==========================================================================
   Abo-vs-Einmalkauf — Rechenbeispiel
   ========================================================================== */
.hw-calc{ margin-top:var(--sp-4); max-width:64ch; }
.hw-calc h3{ font-size:1.1rem; color:var(--c-brass); }
.hw-calc p{ color:var(--c-muted); margin-top:.5em; }
.hw-calc strong{ color:var(--c-text); }

/* ==========================================================================
   Was nicht enthalten ist
   ========================================================================== */
.hw-exclude-list{
  list-style:none; margin-top:var(--sp-4); max-width:56ch;
  display:flex; flex-direction:column;
}
.hw-exclude-list li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:.85em 0; border-top:1px solid var(--c-line);
}
.hw-exclude-list li:last-child{ border-bottom:1px solid var(--c-line); }
.hw-exclude-list span{ color:var(--c-text); }
.hw-exclude-list em{
  font-style:normal; color:var(--c-muted); font-size:.85rem;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  flex:none;
}

/* ==========================================================================
   Ablauf (3 Schritte) — eigenständige Variante der Startseiten-Timeline,
   da diese Seite home.css nicht lädt.
   ========================================================================== */
.hw-steps{
  display:grid; gap:var(--sp-3); grid-template-columns:repeat(3,1fr);
  margin-top:var(--sp-5);
}
.hw-step{ position:relative; padding-top:var(--sp-3); }
.hw-step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--c-copper),transparent);
}
.hw-step__num{
  font-family:var(--font-display); font-weight:700; color:var(--c-copper); font-size:1.5rem;
}
.hw-step h3{ font-size:1.1rem; margin-top:.4rem; }
.hw-step p{ color:var(--c-muted); font-size:.95rem; margin-top:.4rem; }

@media (max-width:860px){
  .hw-steps{ grid-template-columns:1fr; }
}