/* =========================================================
   iOS-artige Feinheiten – gemeinsam für alle Seiten
   (sanftes Einblenden, Glas-Header, taktiles Drücken,
    Pill-Buttons, Float-Button, weiche Farbverläufe)
   ========================================================= */

:root {
  --ease-ios: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Verhindert horizontalen Überlauf durch das ausgeblendete Mobilmenü,
   ohne den sticky Header zu beeinträchtigen. Nur die Kombination
   html + body = clip löst beides zuverlässig. */
html,
body {
  overflow-x: clip;
}

/* ---- Sanftes Einblenden beim Scrollen ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-ios), transform 0.7s var(--ease-ios);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* leichtes Nacheinander in Reihen – nur für Elemente OHNE Hover-Effekt.
   Bei den Karten (service-card / highlight-card) würde der transition-delay
   sonst auch den Hover (rein UND raus) verzögern, sodass sie nicht mehr
   identisch zu „Einkauf“ reagieren. Darum dort bewusst kein Stagger. */
.values-list > .reveal:nth-child(2) { transition-delay: 0.06s; }
.values-list > .reveal:nth-child(3) { transition-delay: 0.12s; }
.values-list > .reveal:nth-child(4) { transition-delay: 0.18s; }

/* ---- Glas-Header verdichtet sich beim Scrollen ---- */
header {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
header.scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

/* ---- Pill-Buttons (runder, iOS-typisch) ---- */
.btn,
.form-submit {
  border-radius: 999px;
}

/* ---- Taktiles Drücken wie auf dem iPhone ---- */
.btn,
.form-submit,
.contact-item,
.service-card,
.cost-card,
.highlight-card,
.contact-section,
.contact-box,
nav a,
.to-top {
  -webkit-tap-highlight-color: transparent;
}
.btn:active,
.form-submit:active {
  transform: scale(0.96);
}
.service-card:active,
.highlight-card:active,
.cost-card:active {
  transform: scale(0.99);
}

/* etwas lebendigeres Anheben mit iOS-Easing */
.service-card,
.highlight-card {
  transition: transform 0.35s var(--ease-ios), box-shadow 0.35s var(--ease-ios),
    border-color 0.25s ease;
}
.service-card:hover,
.highlight-card:hover {
  transform: translateY(-6px);
}

/* ---- Weiche Farbverläufe hinter dem Hero (Tiefe) ---- */
.hero {
  position: relative;
}
.hero > .container {
  position: relative;
  z-index: 2;
}
.hero-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.ios-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  z-index: 0;
  pointer-events: none;
}
.ios-blob.blob-a {
  width: 440px;
  height: 440px;
  background: #f4a242;
  opacity: 0.26;
  top: -70px;
  left: -90px;
}
.ios-blob.blob-b {
  width: 500px;
  height: 500px;
  background: #8fae9b;
  opacity: 0.3;
  top: 90px;
  right: -130px;
}

/* ---- Hero-Inhalt sanft beim Laden einblenden ---- */
.hero h1,
.hero p.lead,
.hero .btn-row,
.hero .trust-box,
.hero .location {
  animation: ios-rise 0.85s var(--ease-ios) both;
}
.hero p.lead { animation-delay: 0.06s; }
.hero .btn-row { animation-delay: 0.12s; }
.hero .trust-box { animation-delay: 0.18s; }
.hero .location { animation-delay: 0.24s; }
.hero-image {
  animation: ios-pop 1s var(--ease-ios) both;
}
@keyframes ios-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes ios-pop {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: none; }
}

/* ---- Gefrosteter „nach oben“-Button ---- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  color: var(--ink, #31433b);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: 0.35s var(--ease-ios);
  z-index: 900;
}
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:active {
  transform: scale(0.92);
}
.to-top svg {
  width: 22px;
  height: 22px;
}

/* ---- Barrierefreiheit: Bewegung reduzieren ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero h1, .hero p.lead, .hero .btn-row, .hero .trust-box,
  .hero .location, .hero-image { animation: none !important; }
  .to-top { transition: opacity 0.2s ease; }
}