/* =========================================================
   geschichte-fuer-kids.de — kontakt.css
   Extra styles for the Kontakt page (/kontakt/) only.
   Loaded after /site.css.
   ========================================================= */
.h1-split em { display: block; }
.page-hero .lead { color: #e6e0f6; }

.mail-card {
  justify-self: start; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  margin-top: 6px; padding: 12px 12px 12px 14px; border-radius: var(--r-lg); max-width: 100%;
  background: rgba(27, 20, 58, .55); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-lg);
}
.mail-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--ramp-orange-light), var(--ramp-orange-deep)); }
.mail-ico svg { width: 26px; height: 26px; }
.mail-addr { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.6rem); text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.mail-addr:hover { color: var(--ramp-orange-light); }
.mail-copy {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--body); font-weight: 800; font-size: .9rem; color: var(--mesh-1); background: #fff; border: 0;
}
.mail-copy svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .mail-card { grid-template-columns: 44px minmax(0, 1fr); } .mail-ico { width: 44px; height: 44px; } .mail-copy { grid-column: 1 / -1; justify-content: center; } }

.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.topic {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 22px; gap: 16px; align-items: center;
  padding: 20px; border-radius: var(--r-lg); text-decoration: none;
  background: linear-gradient(170deg, rgba(255, 251, 246, .2) 0%, rgba(201, 174, 227, .1) 55%, rgba(140, 107, 224, .06) 100%);
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: var(--shadow), var(--glow-violet);
  transition: transform .25s ease, box-shadow .25s ease;
}
.topic:nth-child(3n+2) { box-shadow: var(--shadow), var(--glow-pink); }
.topic:nth-child(3n) { box-shadow: var(--shadow), var(--glow-teal); }
.topic:hover { transform: translateY(-5px); }
.topic-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: rgba(201, 174, 227, .16); border: 1px solid rgba(201, 174, 227, .3); }
.topic-copy b { display: block; font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
.topic-copy span { color: var(--mute); font-size: .92rem; line-height: 1.45; display: block; margin-top: 2px; }
.topic-go svg { width: 20px; height: 20px; color: var(--lilac); transition: transform .2s ease; }
.topic:hover .topic-go svg { transform: translateX(4px); }
@media (max-width: 960px) { .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .topics { grid-template-columns: 1fr; } }

.legal-note { margin-top: 22px; text-align: center; color: var(--mute); font-size: .92rem; }
.legal-note a { color: var(--lilac); }

.cta-warm { background: linear-gradient(120deg, var(--ramp-purple-deep), var(--bloom-plum) 60%, #8a3f5e); box-shadow: var(--shadow-lg), 0 40px 100px -50px rgba(217, 98, 46, .9); }
.cta-warm::before { background: radial-gradient(closest-side, rgba(247, 206, 116, .45), transparent); }
.cta-warm p { color: #e6e0f6; }