/* v2.css — conversion homepage sections (V2.0 copy deck).
   Problem · Lösung · Ablauf · Warum · Leistungen · Referenzen · Über uns · FAQ.
   Reuses the root paper tokens and the editorial restraint of styles.css.
   Prefixes: .band-, .steps-, .feat-, .proof-, .about-, .faq-, .cta-. */

/* ---------- shared band layout ---------- */

.band {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(72px, 12vh, 140px) clamp(24px, 5vw, 72px);
}
.band--tight { max-width: 860px; }
.band--alt { background: rgba(141, 125, 98, 0.05); max-width: none; }
.band--alt > .band-inner { max-width: 1100px; margin: 0 auto; }
body.crushed .band--alt { background: rgba(60, 52, 40, 0.06); }

.band-eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.band-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  margin-top: 16px;
  max-width: 20ch;
}
.band-title em { font-style: italic; font-weight: 500; color: var(--paper); }

.band-sub {
  margin-top: 24px;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  max-width: 46ch;
}

.band-body {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 200;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 60ch;
}
.band-body + .band-body { margin-top: 14px; }

/* plain bullet list (Problem / Lösung) */
.band-list {
  list-style: none;
  margin-top: 28px;
  display: grid;
  gap: 14px;
  max-width: 62ch;
}
.band-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  font-weight: 200;
  line-height: 1.6;
  color: var(--ink);
}
.band-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--paper);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ---------- CTA block (repeats through the page) ---------- */

.cta-block {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.cta-block--center { align-items: center; text-align: center; }

.cta-micro {
  font-size: 14px;
  font-weight: 200;
  color: var(--ink-soft);
}

.cta-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 15px 26px;
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.2s ease;
}
.cta-call:hover { background: transparent; color: var(--ink); }
.cta-call:disabled { opacity: 0.6; cursor: default; }
.cta-call .cta-arrow { font-size: 15px; }
body.crushed .cta-call { border-color: var(--ink); }

/* ---------- hero additions ---------- */

.hero .sub { margin-top: 22px; }
.hero-cta { margin-top: 30px; }
.hero-cta .cta-call { font-size: 16px; padding: 16px 28px; }

.hero-trust {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 12.5px;
  font-weight: 200;
  color: var(--ink-soft);
}
.hero-trust li {
  position: relative;
  padding-left: 20px;
}
.hero-trust li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--paper);
  font-weight: 500;
}

.hero-media-note {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 200;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
  margin-inline: auto;
}
.hero-media-note a { color: var(--ink); }

/* ---------- process steps (Ablauf) ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.steps li {
  counter-increment: step;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3vw, 44px);
  color: var(--paper);
  line-height: 1;
  margin-bottom: 14px;
}
.steps h3 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--ink);
}
.steps p {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 200;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- feature list (Warum / Leistungen) ---------- */

.feat {
  list-style: none;
  margin-top: 36px;
  display: grid;
  gap: 2px;
}
.feat li {
  border-top: 1px solid var(--hairline);
  padding: 22px 0;
  display: grid;
  grid-template-columns: minmax(0, 16ch) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
}
.feat li:last-child { border-bottom: 1px solid var(--hairline); }
.feat h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--ink);
  line-height: 1.1;
}
.feat p {
  font-size: 15px;
  font-weight: 200;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- proof block (Referenzen) ---------- */

.proof {
  list-style: none;
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.proof li {
  background: var(--canvas);
  padding: clamp(22px, 2.5vw, 34px);
}
body.crushed .proof li { background: #ddd3bf; }
.proof h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--ink);
}
.proof p {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 200;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- about ---------- */

.about-body { margin-top: 22px; }

/* ---------- FAQ (native accordion) ---------- */

.faq {
  margin-top: 36px;
  border-top: 1px solid var(--hairline);
  max-width: 760px;
}
.faq-item {
  border-bottom: 1px solid var(--hairline);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.4;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 26px;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); top: 30px; }
.faq-item > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.faq-answer {
  padding: 0 40px 22px 0;
  font-size: 15px;
  font-weight: 200;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* ---------- packages: risk-reversal line under the pricing grid ---------- */

.pricing-risk {
  margin: clamp(24px, 4vh, 40px) clamp(24px, 5vw, 72px) 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  font-weight: 200;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- showcase reel caption override ---------- */

.services-kicker,
.services-count { color: var(--ink-soft); }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 8px; }
  .feat li { grid-template-columns: 1fr; gap: 8px; }
  .proof { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .band { padding-left: 20px; padding-right: 20px; }
  .cta-call { width: 100%; justify-content: center; }
  .cta-block { align-items: stretch; }
  .cta-block .cta-micro { text-align: center; }
}

/* header nav: several section links + EN + pill overflow below ~820px.
   Drop the anchor links (still reachable by scrolling); keep the language
   switch and the primary pill, which are the two that matter. */
@media (max-width: 820px) {
  .site-nav a:not(.nav-lang):not(.pill) { display: none; }
}

/* ===================================================================
   FINAL positioning (2026) — "Webseitenagentur für Unternehmen".
   Formal, restrained. Adds: statement cards, hero CTA row, ghost CTA,
   4-card eyebrows, 5-step wrap, package website-type, enquiry form.
   =================================================================== */

/* hero CTA row: primary "anfragen" + secondary link + microline */
.hero-cta-row {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.hero-microline {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* primary CTA — solid pill, used as <a> or <button> */
a.cta-primary,
button.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 15px 26px;
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.2s ease;
}
a.cta-primary:hover,
button.cta-primary:hover { background: transparent; color: var(--ink); }
button.cta-primary:disabled { opacity: 0.6; cursor: default; }

/* ghost CTA — outline pill for the secondary "Erstgespräch vereinbaren" */
.cta-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.cta-ghost:hover { background: var(--ink); color: var(--canvas); }

/* secondary text link (e.g. "Projekte ansehen →") */
.cta-textlink {
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}
.cta-textlink:hover { opacity: 0.62; }

/* statement card — the tinted "our focus / closing line" blocks */
.statement-card {
  margin-top: 34px;
  border: 1px solid var(--hairline);
  background: rgba(141, 125, 98, 0.06);
  padding: clamp(24px, 3vw, 40px);
}
body.crushed .statement-card { background: rgba(60, 52, 40, 0.08); }
/* `.statement-card .statement-eyebrow` (0,0,2,0) beats `.statement-card > p`
   (0,0,1,1); --accent-ink keeps the accent readable at 11px (AA). */
.statement-card .statement-eyebrow {
  font-size: 11px;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.statement-card h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 24ch;
}
.statement-card > p {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 200;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 66ch;
}
.statement-tags {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* per-card eyebrow inside the .proof 4-card grids (index, category).
   Selector is deliberately `.proof li .proof-eyebrow` (specificity 0,0,2,0)
   so it beats `.proof p` (0,0,1,1) — otherwise the eyebrow inherits the body
   colour/size instead of the accent. Uses --accent-ink for AA contrast. */
.proof li .proof-eyebrow {
  font-size: 11px;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 10px;
}

/* Ablauf: allow 5 steps to wrap instead of forcing 3 columns */
.steps--five {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
  .steps--five { grid-template-columns: 1fr; }
}

/* packages: website-type label above the paper name + netto note */
.pricing-type {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.15;
  color: var(--ink);
}
.pricing-name + .pricing-type { margin-top: 4px; }
.pricing-note-vat {
  margin: 18px clamp(24px, 5vw, 72px) 0;
  font-size: 12px;
  font-weight: 200;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* =================== enquiry form (contact) =================== */

.enquiry {
  width: min(760px, 100%);
  margin: clamp(36px, 6vh, 64px) auto 0;
  text-align: left;
}
.enquiry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.enquiry-field { display: flex; flex-direction: column; gap: 6px; }
.enquiry-field--full { grid-column: 1 / -1; }
.enquiry-label {
  font-size: 11px;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.enquiry-label .req { color: var(--accent); margin-left: 2px; }
.enquiry-input,
.enquiry-textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  padding: 8px 0;
  transition: border-color 0.2s ease;
}
.enquiry-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.enquiry-input:focus,
.enquiry-textarea:focus { outline: none; border-color: var(--ink); }
.enquiry-input::placeholder,
.enquiry-textarea::placeholder { color: rgba(77, 69, 55, 0.62); }
.enquiry-field--invalid .enquiry-input,
.enquiry-field--invalid .enquiry-textarea { border-color: var(--accent); }

.enquiry-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.enquiry-consent {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 200;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 66ch;
}
.enquiry-consent a { color: var(--ink); }

.enquiry-done {
  width: min(560px, 100%);
  margin: clamp(36px, 6vh, 64px) auto 0;
}
.enquiry-done[hidden] { display: none; }
.enquiry-done-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.enquiry-done p {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 200;
  color: var(--ink-soft);
}
.enquiry-done a { color: var(--ink); }

@media (max-width: 640px) {
  .enquiry-grid { grid-template-columns: 1fr; }
  .enquiry-input, .enquiry-textarea { font-size: 16px; }
  .enquiry-actions { flex-direction: column; align-items: stretch; }
  a.cta-primary, button.cta-primary, .cta-ghost { width: 100%; justify-content: center; }
}

/* final pricing cards drop the "live in" duration; keep the CTA bottom-aligned
   so cards with different bullet counts still line their actions up */
.pricing-tier .pricing-cta { margin-top: auto; padding-top: 18px; }

/* footer legal links must wrap on narrow screens instead of pushing the
   page wider than the viewport */
.plane-footer-legal { flex-wrap: wrap; justify-content: center; }