/* Phase 2: konsistente Raster und gut lesbare Abstände auf allen Geräten. */
html { scroll-padding-top: 100px; }
[id] { scroll-margin-top: 100px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #98251b; outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.price-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.price-card { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.price-card .price-top { min-height: 0; }
.price-card .price-top > strong { font-variant-numeric: tabular-nums; }
.price-card.featured { order: initial; }
.price-card ul { flex: 1; }
.price-card a { overflow-wrap: anywhere; }
.opening-section { background: #f6f6f4; }
.opening-section .wrap { display: grid; gap: 20px; }
.opening-section p { max-width: 65ch; color: #60636a; line-height: 1.6; }
.opening-section .btn { justify-self: start; }
.price-intro { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; padding:20px 22px; border-radius:18px; background:#f6f6f4; }
.price-footnote { max-width:70ch; color:#60636a; font-size:.875rem; line-height:1.55; margin-top:24px; }
.pilot-inline { margin-top:20px; padding-top:16px; border-top:1px solid #dfdfdc; font-size:.875rem; line-height:1.5; }
.examples-links { margin-top:18px; font-size:.875rem; line-height:1.5; }
.pilot-inline a,.examples-links a { color:#91231a; }
.search-demo { position:relative; }
.example-label { position:absolute; z-index:3; top:18px; right:16px; padding:5px 9px; border-radius:7px; background:#fff; color:#383a3d; font-size:11px; font-weight:700; line-height:1.2; }
.search-demo-note { max-width:50ch; }
@media (min-width: 768px) {
  .price-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .price-card .price-top { min-height: 155px; }
}
@media (min-width: 1024px) {
  .wrap { width:min(calc(100% - clamp(40px,8vw,96px)), 1100px); margin-inline:auto; }
  .section { padding-block:clamp(56px,6vw,88px); }
  .hero { padding-top:28px; }
  .hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,4vw,56px); align-items:center; }
  .hero h1 { font-size:clamp(44px,4.2vw,62px); max-width:13ch; }
  .hero-lead { max-width:65ch; }
  .hero-art { min-width:0; }
  .check-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,5vw,70px); align-items:center; }
  .report { width:100%; max-width:520px; transform:none; }
  .opening-section .wrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items:center; gap:32px 64px; }
  .opening-section .btn { grid-column:2; }
  .price-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .price-top { min-height:155px; }
  p { max-width:70ch; }
}
@media (max-width: 767px) {
  .wrap { width:calc(100% - 40px); }
  .price-card.featured { order:initial; }
  .price-grid { grid-template-columns:1fr; }
  .price-top { min-height:0; }
  .price-intro .btn { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
.free-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; padding:20px 22px; border-radius:18px; background:#f6f6f4; }
.free-line p { font-weight:700; }
.price-subtitle { margin-top:8px; font-size:.875rem; color:#60636a; }
.pilot-inline .text-link { display:inline; min-height:0; font-size:inherit; line-height:inherit; border:0; text-decoration:underline; text-underline-offset:3px; color:#91231a; }
.examples-links a { font-weight:700; text-underline-offset:3px; }
.opening-inner > .text-link { justify-self:start; }
@media (min-width:1024px) { .opening-inner > .text-link { grid-column:2; } }
@media (max-width:767px) { .free-line .btn { width:100%; } }

/* Prüfung Claude 9.11.2026: Desktop-Hero, Rechtsseiten auf dem Handy, Tippflächen */
@media (min-width: 1024px) {
  .hero-copy { grid-template-columns:1fr; gap:22px; align-items:start; padding:clamp(40px,4vw,60px) clamp(32px,3.5vw,52px) clamp(44px,4vw,60px); border-radius:5px 70px 5px 5px; }
  .hero-support { padding-bottom:0; }
  .hero-actions { margin-top:22px; }
  .hero-assurance { margin-top:18px; }
  .hero-art { width:100%; margin:0; }
}
.legal .wrap > * { min-width:0; }
.legal h1 { overflow-wrap:break-word; hyphens:auto; }
@media (max-width: 600px) { .legal h1 { font-size:clamp(30px,8.6vw,42px); } }
.examples-links a, .contact-side a[href^="mailto:"], .faq-grid .text-link[href^="mailto:"] { display:inline-block; padding-block:10px; }

/* Website-Beispiele wieder auf der Hauptseite: Coiffeur und Blumenladen */
.website-examples { display:grid; gap:44px; margin:56px 0 48px; }
.website-examples .website-example { margin:0; min-width:0; }
.website-example--blumen .website-example-location { color:#526556; }
.website-example--blumen .website-example-headline i { color:#526b53; }
.website-example--blumen .website-example-button { background:#405b45; color:#fff; }
.website-example-art { display:grid; place-items:center; width:100%; aspect-ratio:2.15; margin-top:clamp(16px,2.5vw,28px); background:#e5eadf; border-radius:3px 3px 0 0; overflow:hidden; }
.website-example-art svg { height:92%; width:auto; }
@media (min-width: 900px) {
  .website-examples { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
  .website-examples .website-example-headline { font-size:clamp(26px,2.6vw,40px); }
}