Mobil: Hero-Bild zuerst, Ergebnisse gekürzt, Abstände, Kacheln

src/pages/index.astro

@@ -160,7 +160,7 @@ const faq = {
   <section class="sec-b" aria-labelledby="e-h">
     <div class="pad"><H text="Ergebnisse" /></div>
     <p class="lead pad from-c mt-5" data-rv>Echte Kundinnen aus dem Salon, vorher und nachher. Damit Sie vorab sehen, was bei Haaren wie Ihren möglich ist.</p>
-    <div class="cases mt-8">
+    <div class="cases cases--home mt-8">
       {cases.map((c) => (
         <article class="case">
           <span class="cap case__n">{c.n} · {c.where}</span>
@@ -177,6 +177,7 @@ const faq = {
         </article>
       ))}
     </div>
+    <div class="pad row mt-6 cases__more"><a class="go" href="/haarverlaengerung">Mehr bei Great Lengths</a><a class="go" href="/balayage-farbe">Mehr bei Farbe</a></div>
   </section>
 
   <!-- Bewertungen -->

src/styles/global.css

@@ -467,3 +467,20 @@ body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
 .wcard__s.is-on { background: var(--blue); border-color: oklch(75% 0.08 245); }
 .wcard__foot { display: flex; justify-content: space-between; font-size: var(--t-small); line-height: 1.35; }
 .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
+
+/* ---------- Mobil-Feinschliff ---------- */
+@media (max-width: 55.99rem) {
+  .r3 > .a:empty, .r3 > .b:empty, .r3 > .ab:empty { display: none; }
+  .hero__grid .c { order: -1; }
+  .hero__foot .a { display: none; }
+  .case { padding-inline: var(--pad); }
+  .tile { aspect-ratio: auto; min-height: 9.5rem; }
+  .cases--home .case:nth-child(n + 2) { display: none; }
+  .trio__i .fig { display: none; }
+  .status li { display: grid; gap: 0.1rem; }
+  .status li span { text-align: left; }
+  .owner .fig { aspect-ratio: 4 / 5; }
+  .bye__pic { display: none; }
+}
+.cases__more { display: none; }
+@media (max-width: 55.99rem) { .cases__more { display: flex; } }