/* ===== Design Tokens & Basis (Section scoped) ===== */
.hh-donation-split{
  --ease:cubic-bezier(.22,.8,.24,1);
  --dur:400ms;

  --ink:#0f172a;
  --ink-muted:#475569;
  --card:#ffffff;
  --card-outline:#e2e8f0;

  --brand1:#3b82f6;   /* blau */
  --brand2:#06b6d4;   /* aqua */
  --ring:rgba(59,130,246,.45);
  --glow-a:rgba(255,255,255,.65);
  --glow-b:rgba(56,189,248,.18);

  --r:20px;
  --shadow:0 8px 24px rgba(0,0,0,.05);

  --bg-a:#f6fbff;
  --bg-b:#eef7ff;

  --px:20px;

  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  position:relative;
  isolation:isolate;
}

/* Hintergrund */
.hh-donation-split::before{
  content:"";
  position:absolute; z-index:0;
  top:0; bottom:0; left:0; right:0;
  background:linear-gradient(180deg,var(--bg-a) 0%, var(--bg-b) 100%);
  border-radius:var(--r);
  pointer-events:none;
}
@media (max-width:768px){
  .hh-donation-split::before{
    left:50%;
    right:auto;
    width:min(100%, calc(90% + (2 * var(--px))));
    transform:translateX(-50%);
  }
}

/* Container */
.hh-donation-split .donation-container{
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
  background:var(--card); border-radius:var(--r);
  box-shadow:var(--shadow); border:1px solid var(--card-outline);
  display:flex; flex-wrap:wrap; gap:32px; padding:40px; align-items:center;
}

/* Textspalte */
.hh-donation-split .donation-text{ flex:1 1 500px; }
.hh-donation-split .donation-text h2{
  font-size:clamp(24px,4vw,32px);
  font-weight:800; letter-spacing:-.02em; line-height:1.2;
  color:#2563eb; margin:0 0 12px;
}
.hh-donation-split .donation-text p{
  font-size:clamp(15px,2.2vw,16px);
  color:var(--ink); line-height:1.6; margin:10px 0;
}
.hh-donation-split .donation-text strong{ color:#047857; font-weight:700; }

.hh-donation-split .donation-list{
  list-style:none; padding:0; margin:12px 0 0 0; display:grid; gap:8px;
}
.hh-donation-split .donation-list li{
  display:flex; gap:10px; align-items:flex-start; line-height:1.5; color:var(--ink);
}
.hh-donation-split .donation-list li .icon{ min-width:1.25rem; text-align:center; }

/* CTA */
.hh-donation-split .cta-btn{
  display:inline-block; margin-top:20px;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  color:#fff; padding:14px 28px; border-radius:12px;
  font-weight:700; font-size:16px; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  box-shadow:0 8px 20px rgba(2,132,199,.25);
  -webkit-tap-highlight-color:transparent;
}
.hh-donation-split .cta-btn:hover{ transform:translateY(-2px); opacity:.95; }
.hh-donation-split .cta-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring), 0 8px 20px rgba(2,132,199,.25);
}

/* Bildspalte + Glow-Karte */
.hh-donation-split .donation-image{ flex:1 1 380px; text-align:center; display:grid; place-items:center; }
.hh-donation-split .donation-image figcaption{ font-size:15px; color:var(--ink-muted); margin:0 0 12px; font-style:italic; }

.hh-donation-split .donation-card{
  position:relative; display:block; width:100%;
  border-radius:16px; outline:none;
  padding:0; background:#fff; border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 8px 18px rgba(0,0,0,0.05);
  transform:translateY(0) scale(1);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  --mx:50%; --my:40%;
  overflow:hidden;
  max-width:320px;
  margin-inline:auto;
}
.hh-donation-split .donation-card:focus-visible{
  box-shadow:0 0 0 3px var(--ring), 0 10px 28px rgba(2,132,199,.25);
}
.hh-donation-split .donation-card::before{
  content:"";
  position:absolute; inset:-1px; pointer-events:none; z-index:0; opacity:0;
  border-radius:inherit;
  background:
    radial-gradient(160px circle at var(--mx) var(--my), var(--glow-a), rgba(255,255,255,0) 60%),
    radial-gradient(280px circle at var(--mx) var(--my), var(--glow-b), transparent 70%);
  transition:opacity .35s ease;
}
.hh-donation-split .donation-card > *{ position:relative; z-index:1; }

.hh-donation-split .donation-image img{
  display:block; width:100%; height:auto; object-fit:contain; border-radius:16px;
}

@media (hover:hover) and (pointer:fine){
  .hh-donation-split .donation-card:hover,
  .hh-donation-split .donation-card:focus-visible{
    transform: translateY(-6px);
    background: rgba(224,242,254,0.55);
    box-shadow: 0 8px 25px rgba(56,189,248,0.35),
                inset 0 0 8px rgba(14,165,233,0.15);
    border-color: rgba(56,189,248,0.25);
    outline:none;
  }
  .hh-donation-split .donation-card:hover::before,
  .hh-donation-split .donation-card:focus-visible::before{ opacity:1; }
}

/* Mobile */
@media (max-width:768px){
  .hh-donation-split .donation-container{ flex-direction:column; gap:20px; padding:24px; }
  .hh-donation-split .donation-text h2{ font-size:clamp(22px,5.2vw,28px); margin-bottom:8px; }
  .hh-donation-split .donation-text p{ font-size:15px; line-height:1.55; }
  .hh-donation-split .donation-list{ gap:6px; }
  .hh-donation-split .donation-list li{ gap:8px; font-size:15px; }
  .hh-donation-split .donation-image figcaption{ font-size:13px; margin-bottom:10px; opacity:.9; }
  .hh-donation-split .donation-card{ max-width:92vw; }
  .hh-donation-split .donation-card.is-active{
    transform: translateY(-6px);
    background: rgba(224,242,254,0.55);
    box-shadow: 0 8px 25px rgba(56,189,248,0.30);
    border-color: rgba(56,189,248,0.25);
  }
  .hh-donation-split .donation-card.is-active::before{ opacity:1; }
}

/* ===== Emoji-Boost beim Hover/Fokus ===== */
.hh-donation-split .don-emoji{
  display:inline-block; line-height:1;
  transition: transform 300ms ease, filter 300ms ease;
}
@media (hover:hover) and (pointer:fine){
  .hh-donation-split .donation-container:hover .don-emoji,
  .hh-donation-split .donation-container:focus-within .don-emoji,
  .hh-donation-split .cta-btn:hover .don-emoji,
  .hh-donation-split .cta-btn:focus-visible .don-emoji,
  .hh-donation-split .donation-card:hover .don-emoji,
  .hh-donation-split .donation-card:focus-visible .don-emoji{
    transform:scale(1.2) !important;
    filter:drop-shadow(0 2px 4px rgba(14,165,233,.30)) !important;
  }
}
@media (hover:none) and (pointer:coarse){
  .hh-donation-split .donation-card.is-active .don-emoji{
    transform:scale(1.2);
    filter:drop-shadow(0 2px 4px rgba(14,165,233,.30));
  }
}

/* Spacer Utility */
.hh-spacer { display:block; width:100%; height:0; clear:both; font-size:0; line-height:0; pointer-events:none; }

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  .hh-donation-split *, .hh-spacer, .hh-donation-split .don-emoji{ transition:none !important; }
}