/* Einheitliche Ränder auf Handy, Tablet und Desktop (Claude, 9.11.2026).
   Kopfzeile, Startbereich und alle Abschnitte teilen dieselbe Breite. */
:root { --gutter: 20px; --container: min(calc(100% - 2 * var(--gutter)), 1100px); }
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

.wrap, .top > .wrap { width: var(--container); margin-inline: auto; }
.legal .wrap { max-width: 780px; }

/* Startbereich: eine einzige Karte, Text und Beispiel darin, gleiche Kanten wie die Kopfzeile */
.hero { padding-top: 16px; overflow: visible; }
.hero .hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 36px 20px 24px;
  background: #f1f2ee; border-radius: 6px 48px 6px 6px;
}
.hero .hero-copy {
  display: block; padding: 0; margin: 0; background: none; border-radius: 0; overflow: visible;
}
.hero .hero-copy:before, .hero .hero-art:before, .hero .hero-art:after { display: none; }
.hero .hero-art {
  width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  display: grid; grid-template-columns: 1fr; gap: 12px; justify-items: center;
}
.hero .art-caption { width: 100%; }
.hero .orbit { display: none; }
.hero .search-demo { width: min(100%, 320px); }
.hero h1 { font-size: clamp(40px, 11vw, 58px); max-width: 12ch; }
.hero-support { margin-top: 20px; padding: 0; }
.hero-actions { margin-top: 22px; }
.hero-assurance { margin-top: 18px; }

@media (min-width: 768px) {
  .hero .hero-grid { padding: 48px 40px 40px; border-radius: 6px 64px 6px 6px; }
  .hero h1 { font-size: clamp(48px, 7vw, 64px); }
}
@media (min-width: 900px) {
  .hero { padding-top: 20px; }
  .hero .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 4vw, 64px); align-items: center;
    padding: clamp(44px, 4.5vw, 64px) clamp(36px, 4vw, 56px);
    border-radius: 6px 80px 6px 6px;
  }
  .hero h1 { font-size: clamp(44px, 4.6vw, 64px); max-width: 12ch; }
  .hero .hero-actions { justify-items: start; }
  .hero .search-demo { width: min(100%, 330px); }
}