/* ============================================================
   Webdesign-Seiten (5 Werbeseiten /lp/ + /webdesign-koeln)
   21.10.2026, Adrian:
   1) Preis-Abschnitt „Ehrlicher Preis statt Lockangebot“
      (Entwurf C: großer Preis, drei Wege, leichter Regen)
   2) Kostenkasten als direkter Vergleich „Bei uns VS woanders“
   ============================================================ */

/* ---------- 1) Preis-Abschnitt ---------- */
/* clip statt hidden: schneidet den Regen ab, bricht aber das
   position:sticky der Karten auf dem Handy nicht */
section.wp-preis { position: relative; overflow: clip; }
section.wp-preis > .container { position: relative; z-index: 2; }
.wp-preis .lp-regen, .wp-preis .wd-matrix-canvas { opacity: .22; }

.wp-top { text-align: center; max-width: 760px; margin: 0 auto; }
.wp-top .eyebrow { display: inline-block; }
.wp-big { font-family: var(--font-headline); font-size: clamp(3.4rem, 10vw, 6.5rem); line-height: 1; color: var(--color-neon-1, #3DE029);
  margin: .5rem 0 .4rem; animation: wpGlow 3.5s ease-in-out infinite; }
.wp-big small { font-size: .32em; vertical-align: .9em; margin-right: .3rem; color: var(--color-light-1, #B8F5B0); letter-spacing: .05em; }
@keyframes wpGlow { 0%, 100% { text-shadow: 0 0 18px rgba(61,224,41,.35); } 50% { text-shadow: 0 0 34px rgba(61,224,41,.6); } }
@media (prefers-reduced-motion: reduce) { .wp-big { animation: none; text-shadow: 0 0 22px rgba(61,224,41,.4); } }
.wp-sub { font-weight: 700; font-size: 1.15rem; color: #fff; margin: 0 0 .3rem; }
.wp-mwst { font-size: 1rem; color: var(--color-light-1, #B8F5B0); margin: 0; }

.wp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.2rem 0 1.8rem; }
.wp-card { border-radius: 18px; padding: 1.4rem 1.3rem; background: #143322; border: 1px solid rgba(184,245,176,.2); }
.wp-card.on { background: linear-gradient(160deg, rgba(61,224,41,.22), rgba(61,224,41,.06)), #0f2f1d; border: 2px solid var(--color-neon-1, #3DE029);
  box-shadow: 0 0 40px rgba(61,224,41,.18); }
.wp-ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(61,224,41,.15); display: flex; align-items: center; justify-content: center; margin-bottom: .8rem; }
.wp-ico svg { width: 24px; height: 24px; stroke: var(--color-neon-1, #3DE029); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wp-card h3 { margin: 0 0 .3rem; font-size: 1.1rem; color: #fff; }
.wp-card .wp-pr { font-family: var(--font-headline); font-size: 1.5rem; color: var(--color-neon-1, #3DE029); margin: 0 0 .5rem; }
.wp-card .wp-pr.soft { font-family: var(--font-body, Inter, sans-serif); font-weight: 700; font-size: 1.05rem; }
.wp-card p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--color-light-3, #EDFAEB); }

.wp-band { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 18px; background: #fff; }
.wp-band img { width: 64px; height: 64px; border-radius: 50%; }
.wp-band p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: #1A1A1A; }
.wp-band b { color: var(--color-dark-1, #0D2B1A); }

@media (max-width: 767px) {
  .wp-big { font-size: clamp(3rem, 15vw, 4rem); }
  .wp-cards { grid-template-columns: 1fr; gap: .8rem; margin: 1.6rem 0 1.4rem; }
  /* kompakt: Symbol neben die Überschrift, weniger Innenabstand */
  .wp-card { display: grid; grid-template-columns: 38px 1fr; column-gap: .8rem; padding: 1rem 1.05rem; }
  .wp-ico { width: 38px; height: 38px; border-radius: 10px; margin: 0; grid-row: span 2; }
  .wp-ico svg { width: 20px; height: 20px; }
  .wp-card h3 { font-size: 1.02rem; margin: 0; align-self: end; }
  .wp-card .wp-pr { font-size: 1.2rem; margin: 0 0 .35rem; }
  .wp-card .wp-pr.soft { font-size: 1rem; }
  .wp-card p { grid-column: 1 / -1; font-size: .98rem; line-height: 1.5; }
  .wp-band { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 1.2rem 1.1rem; }
  .wp-band img { width: 56px; height: 56px; }
}

/* ---------- 2) Kostenkasten: direkter Vergleich ---------- */
.kd { margin-top: 1.8rem; padding: clamp(1.2rem, 3vw, 2rem); border-radius: 20px; background: #fff; border: 1px solid rgba(13,43,26,.08); box-shadow: 0 8px 24px rgba(13,43,26,.08); }
.kd-kopf { margin: 0; font-family: var(--font-headline); font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.25; color: var(--color-dark-1, #0D2B1A); }
.kd-unter { margin: .35rem 0 1.4rem; font-size: 1rem; color: #666; }
.kd-duell { display: grid; grid-template-columns: minmax(0, .85fr) auto minmax(0, 1.25fr); gap: 0; align-items: stretch; }
.kd-label { display: inline-block; margin: 0 0 .6rem; font-size: .95rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

.kd-wir { border-radius: 18px; padding: 1.5rem 1.4rem; background: var(--color-dark-1, #0D2B1A); color: #fff; display: flex; flex-direction: column;
  box-shadow: 0 14px 34px rgba(13,43,26,.22); }
.kd-wir .kd-label { color: var(--color-neon-1, #3DE029); }
.kd-zahl { font-family: var(--font-headline); font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--color-neon-1, #3DE029); text-shadow: 0 0 22px rgba(61,224,41,.35); }
.kd-einheit { display: block; margin: .3rem 0 .9rem; font-weight: 700; font-size: 1.1rem; color: #fff; }
.kd-wir p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.85); }
.kd-haken { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .45rem; }
.kd-haken li { position: relative; padding-left: 1.6rem; font-size: 1rem; font-weight: 600; color: #fff; }
.kd-haken li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-neon-1, #3DE029); font-weight: 800; }

.kd-vs { align-self: center; z-index: 2; width: 58px; height: 58px; margin: 0 -14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-neon-1, #3DE029); color: var(--color-dark-1, #0D2B1A); font-family: var(--font-headline); font-size: 1.05rem;
  box-shadow: 0 0 0 6px #fff, 0 8px 20px rgba(13,43,26,.25); }

.kd-andere { border-radius: 18px; padding: 1.5rem 1.4rem 1.5rem 2rem; background: rgba(176,48,48,.04); border: 2px solid rgba(176,48,48,.35); }
.kd-andere .kd-label { color: #B03030; }

.kd-fazit { display: flex; gap: .9rem; align-items: flex-start; margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-radius: 14px; background: var(--color-light-3, #EDFAEB); border-left: 5px solid var(--color-neon-1, #3DE029); }
.kd-fazit-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--color-neon-1, #3DE029); color: var(--color-dark-1, #0D2B1A); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.kd-fazit p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: #1A1A1A; }
.kd-fazit b { display: block; margin-bottom: .2rem; font-size: 1.12rem; color: var(--color-dark-1, #0D2B1A); }

@media (max-width: 899px) {
  .kd-duell { grid-template-columns: 1fr; }
  .kd-vs { justify-self: center; margin: -14px 0; }
  .kd-andere { padding: 1.8rem 1.1rem 1.2rem; }
  .kd-wir { padding: 1.3rem 1.2rem 1.6rem; }
}

/* Mini-Balken links: dieselbe Skala wie rechts, damit der Abstand sichtbar wird */
.kd-haken { margin: 0 0 1.4rem; }
.kd-skala-wir { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14); }
.kd-skala-titel { display: block; font-size: 1rem; color: rgba(255,255,255,.7); margin-bottom: .5rem; }
.kd-spur { position: relative; height: 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.kd-fuell { position: absolute; left: 0; top: 0; bottom: 0; width: .8%; min-width: 7px; border-radius: 999px; background: var(--color-neon-1, #3DE029); box-shadow: 0 0 12px rgba(61,224,41,.9); }
.kd-skala-zahlen { display: flex; justify-content: space-between; margin: .35rem 0 0; font-size: 1rem; color: rgba(255,255,255,.7); }
.wp-preis .wd-matrix-canvas { opacity: .34; }