/* =========================================================
   eyecandy.css – Illustrationen, Beratungs-Block, Animationen
   Wird NACH style.css eingebunden und ändert dort nichts.
   ========================================================= */

:root {
  --ec-orange: #eb6834;      /* Orange aus der Balkengrafik */
  --ec-orange-tint: #fdeee7;
  --ec-orange-line: #f7cdb9;
  --ec-shadow-lift: 0 2px 4px rgba(16, 40, 60, .06), 0 18px 36px rgba(16, 40, 60, .11);
}

/* ---------- Hero: Punkteraster und Farbschimmer ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; right: -80px; top: 24px; width: 460px; height: 460px; pointer-events: none;
  background-image: radial-gradient(var(--primary) 1.4px, transparent 1.7px); background-size: 22px 22px; opacity: .13;
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%); mask-image: radial-gradient(circle, #000 35%, transparent 70%);
}
.hero::after {
  content: ""; position: absolute; left: -160px; top: 280px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(235, 104, 52, .10), transparent 65%);
}
.hero > .wrap { position: relative; z-index: 1; }

/* Schild-Abzeichen an der Karte "Wann Sie uns brauchen" */
.hero-card { position: relative; }
.hero-card::after {
  content: ""; position: absolute; top: -18px; right: 24px; width: 46px; height: 46px; border-radius: 13px; transform: rotate(6deg);
  background: var(--ec-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 5l12 4.5v9c0 8-5 14-12 16.5C13 32.5 8 26.5 8 18.5v-9z' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M14.5 20l4 4 7-7.5' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat;
  box-shadow: 0 10px 22px rgba(235, 104, 52, .35);
}

/* Vertrauensleiste unter den Hero-Buttons */
.hero-trust { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.hero-trust li { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: .93rem; line-height: 1.3; }
.hero-trust strong { display: block; color: var(--ink); font-size: 1rem; }
.hero-trust svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }

/* ---------- Überschrift mit Illustration ---------- */
.ec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 48px; align-items: center; margin-bottom: 8px; }
.ec-illu { display: block; width: 100%; height: auto; }
.ec-illu-col { max-width: 400px; margin-top: 28px; }

/* ---------- Karten: leichtes Anheben ---------- */
.card, .pe-grid > div, .form-card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover, .pe-grid > div:hover { transform: translateY(-4px); box-shadow: var(--ec-shadow-lift); }
.card .num { background: linear-gradient(135deg, var(--primary), #2a93b3); color: #fff; box-shadow: 0 6px 14px rgba(15, 110, 140, .25); }

/* Akkordeon: offener Baustein bekommt eine orange Nummer */
details[open] > summary .acc-no { color: var(--ec-orange); }

/* Golden Circle: sanft pulsierender Kern */
.gc .why { animation: ec-pulse 3.2s ease-out infinite; }
@keyframes ec-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 110, 140, .35); }
  70%  { box-shadow: 0 0 0 22px rgba(15, 110, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 110, 140, 0); }
}

/* ---------- Beratung: eigener Block mit Foto ---------- */
.beratung { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--primary-tint), #f3f9fb 75%); }
.beratung::before {
  content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(235, 104, 52, .10), transparent 65%);
}
.beratung-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.beratung-media { position: relative; margin: 0 24px 24px 0; }
.beratung-media::before {   /* versetzter Rahmen hinter dem Foto */
  content: ""; position: absolute; inset: 24px -24px -24px 24px; border-radius: 24px;
  background: var(--ec-orange-tint); border: 2px solid var(--ec-orange-line);
}
.beratung-media img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px; background: #dbecf2; box-shadow: 0 24px 50px rgba(16, 40, 60, .18);
}
.beratung-badge {
  position: absolute; z-index: 2; left: -18px; bottom: 32px; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: 14px; padding: 12px 18px 12px 12px; box-shadow: var(--ec-shadow-lift);
  font-size: .9rem; color: var(--ink-soft); line-height: 1.3;
}
.beratung-badge strong { display: block; color: var(--ink); font-size: 1rem; }
.beratung-badge svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: var(--ec-orange); color: #fff; }
.beratung .checks { margin: 22px 0 28px; }
.beratung .checks li { color: var(--ink); }

@media (max-width: 900px) {
  .ec-head { grid-template-columns: 1fr; gap: 20px; }
  .ec-head .ec-illu { max-width: 300px; }
  .ec-illu-col { max-width: 300px; }
  .beratung-grid { grid-template-columns: 1fr; gap: 48px; }
  .beratung-media { margin: 0 14px 22px 0; }
  .beratung-media::before { inset: 14px -14px -14px 14px; }
  .beratung-badge { left: 12px; bottom: -22px; padding: 10px 14px 10px 10px; }
  .beratung-badge svg { width: 34px; height: 34px; padding: 7px; }
  .hero::before { width: 300px; height: 300px; right: -120px; }
}

/* ---------- Einblenden beim Scrollen (nur mit JavaScript) ---------- */
.ec-js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.ec-js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gc .why { animation: none; }
  .card, .pe-grid > div { transition: none; }
  .card:hover, .pe-grid > div:hover { transform: none; }
}