/* === Scroll reveal === */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .52s ease, transform .52s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay: .1s; }
[data-reveal][data-delay="2"] { transition-delay: .22s; }
[data-reveal][data-delay="3"] { transition-delay: .34s; }
[data-reveal][data-delay="4"] { transition-delay: .46s; }
[data-reveal][data-delay="5"] { transition-delay: .58s; }

/* === Check list stagger on reveal ===
   NOTE: No initial opacity:0 on li — only applied after is-visible fires
   animation-fill-mode:both handles the pre-start state via keyframes */
.check-list.is-visible li {
  animation: listSlide .42s ease both;
}
.check-list.is-visible li:nth-child(1) { animation-delay: .08s; }
.check-list.is-visible li:nth-child(2) { animation-delay: .18s; }
.check-list.is-visible li:nth-child(3) { animation-delay: .28s; }
.check-list.is-visible li:nth-child(4) { animation-delay: .38s; }
@keyframes listSlide {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* === FIX: Hero H1 line-height — compiled CSS uses 0.88 which causes
   letter overlap on multi-line titles; 1.02 keeps the tight look safely === */
.hero h1 {
  line-height: 1.02 !important;
}
@media (max-width: 900px) {
  .hero h1 {
    line-height: 1.05 !important;
    font-size: clamp(32px, 9.5vw, 52px) !important;
  }
}

/* === FIX: Section H2 line-height — 1.04 is too tight for 2-line headings === */
.service-list h2,
.process h2,
.content-two h2,
.faq h2,
.content h2 {
  line-height: 1.22 !important;
}

/* === FIX: Content paragraph readability — slightly tighten for cleaner look === */
.content-two p,
.content p,
.process p,
.faq p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* === Hero entrance === */
.hero-content {
  animation: heroIn .75s ease both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Topbar slide === */
.topbar {
  animation: barIn .45s ease both;
}
@keyframes barIn {
  from { transform: translateY(-6px); opacity: .85; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* === Button micro-interactions === */
.gold-btn {
  transition: transform .17s ease, box-shadow .17s ease !important;
}
.gold-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(180,140,50,.38) !important;
}
.outline-btn {
  transition: transform .17s ease !important;
}
.outline-btn:hover {
  transform: translateY(-2px) !important;
}

/* === Floating CTA pulse === */
.floating-cta {
  animation: ctaPulse 3s ease-in-out 2s infinite;
}
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.25); }
  50%      { box-shadow: 0 6px 28px rgba(180,140,50,.45); }
}

/* === Cards hover === */
.signature-card {
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.signature-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.38) !important;
}
.solution-card {
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.solution-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
}
.process-card {
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.process-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
}
.contact-card {
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.contact-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
}

/* === FIX: Step number centering — do NOT override display:grid from compiled CSS ===
   The compiled CSS already sets display:grid;place-items:center on .step b.
   Only add transition for hover effect. === */
.step b {
  display: grid !important;
  place-items: center !important;
  transition: transform .2s ease !important;
}
.step:hover b {
  transform: scale(1.12);
}

/* === Process-card number hover (index.html Ablauf) === */
.process-card b {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .2s ease !important;
}
.process-card:hover b {
  transform: scale(1.12);
}

/* === Service links slide === */
.service-link {
  display: inline-block;
  transition: padding-left .18s ease, color .18s ease !important;
}
.service-link:hover {
  padding-left: 7px;
}

/* === Trust strip hover === */
.trust-strip > div {
  transition: transform .2s ease !important;
}
.trust-strip > div:hover {
  transform: translateY(-2px) !important;
}

/* === FAQ details smooth === */
details summary {
  cursor: pointer;
  transition: opacity .18s ease;
}
details summary:hover {
  opacity: .8;
}

/* === Scroll progress glow === */
#scroll-progress {
  box-shadow: 0 0 6px rgba(180,140,50,.4);
}

/* === OS color scheme: html gets light-mode before body.light-mode fires === */
html.light-mode {
  background: #e2d5bc;
  color-scheme: light;
}

/* =====================================================================
   LIGHT MODE OVERHAUL — compiled CSS uses near-white panels (#fff,.96)
   on light-cream body which is glaring. Override with deep amber tones.
   ===================================================================== */

/* Deeper, warmer body base */
body.light-mode {
  background: #e2d5bc !important;
  color: #1a150e !important;
}

/* Warmer body gradient — was near-white #fffdf7 at top */
body.light-mode::before {
  background:
    radial-gradient(circle at 15% 8%, rgba(200,155,40,.12), transparent 28%),
    linear-gradient(180deg, #e8d9c0 0%, #dccba8 100%) !important;
}

/* Reduce grid-line pattern — was .14, too visually noisy */
body.light-mode::after {
  opacity: .04 !important;
}

/* Warm amber panels — replace near-white rgba(255,255,255,.92-.96) */
body.light-mode .trust-strip,
body.light-mode .service-list,
body.light-mode .process,
body.light-mode .contact-card,
body.light-mode .content-two > div:first-child,
body.light-mode .content,
body.light-mode .faq,
body.light-mode .faq details,
body.light-mode .service-tabs,
body.light-mode .process-card,
body.light-mode .detail-card,
body.light-mode .material-pill {
  background: linear-gradient(145deg, #f3e5ca, #ead9b8) !important;
  box-shadow: 0 3px 14px rgba(90,55,8,.10) !important;
  border-color: rgba(155,110,25,.16) !important;
}

/* Solution cards — was #fffaf0 (near-white) */
body.light-mode .solution-card,
body.light-mode .solution-note {
  background: #f0dfc0 !important;
  box-shadow: 0 3px 14px rgba(90,55,8,.10) !important;
  border-color: rgba(155,110,25,.16) !important;
}

/* Softer topbar and dropdown shadows */
body.light-mode .topbar {
  background: rgba(237,224,196,.92) !important;
  box-shadow: 0 3px 12px rgba(90,55,8,.13) !important;
}
body.light-mode .mobile-menu,
body.light-mode .dropdown-panel {
  background: rgba(240,228,204,.98) !important;
  box-shadow: 0 4px 14px rgba(90,55,8,.14) !important;
}

/* Footer softer */
body.light-mode .footer {
  background: #d8c9a8 !important;
}

/* Cookie banner */
body.light-mode .cookie {
  background: rgba(240,228,204,.98) !important;
}

/* solution-note "Hinweis:" strong — was golden #f7df90, unreadable on amber */
body.light-mode .solution-note strong {
  color: #7a5c14 !important;
}

/* solution-card text */
body.light-mode .solution-card h3 {
  color: #171717 !important;
}
body.light-mode .solution-card p,
body.light-mode .solution-card li {
  color: #3a3020 !important;
}

/* Step & process-card numbers — keep dark text on gold badge */
body.light-mode .process-card b,
body.light-mode .step b {
  color: #050505 !important;
}

/* small labels — darker gold, not blown-out */
body.light-mode small {
  color: #7a5c14 !important;
}

/* FAQ details border */
body.light-mode details {
  border-color: rgba(155,110,25,.22) !important;
}

/* Portrait card */
body.light-mode .portrait-card p {
  color: #1a150e !important;
}
body.light-mode .portrait-card span {
  color: #7a5c14 !important;
}

/* Scroll progress bar stays gold in light mode */
body.light-mode #scroll-progress {
  box-shadow: 0 0 5px rgba(160,120,30,.5);
}

/* === Footer links === */
.footer a {
  text-decoration: none;
}
.footer a:hover {
  opacity: .85;
  text-decoration: underline;
}

/* Social column — same rhythm as Kontakt / Rechtliches, slightly bolder links */
.footer-inner > div:last-child a {
  font-weight: 500;
  letter-spacing: .01em;
}

body.light-mode .footer p a {
  color: #3a2a08 !important;
}