Oben verankerter Glas-Header, der beim Scrollen dichter wird und eine Trennlinie anlegt — Orientierung ohne Platz zu kosten. Vorbild: Bernstein Glas-Header.
Ihr Bauvorhaben
Alles im Blick, sauber sortiert.
Scrollen Sie nach unten — der Kopf legt beim Scrollen eine dezente Trennlinie an und wird dichter.
Kuechenmontage
Termin bestaetigt, Material geliefert.
Badsanierung
Angebot wartet auf Ihre Freigabe.
Malerarbeiten
Zwei Raeume, Wunschfarbe abgestimmt.
Terrassenbau
Unterbau geplant, Belag zur Auswahl.
Fenstertausch
Aufmass erledigt, Liefertermin folgt.
Bodenverlegung
Muster ausgewaehlt, Termin in Planung.
<div class="mh1-phone">
<div class="mh1-notch" aria-hidden="true"></div>
<!-- .mh1-screen ist die Scroll-Flaeche: overflow-y:auto + height:100% -->
<div class="mh1-screen">
<header class="mh1-header">
<span class="mh1-logo">
<span class="mh1-logomark" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 21v-6h6v6"/></svg>
</span>
Musterbau
</span>
<button type="button" class="mh1-iconbtn" aria-label="Benachrichtigungen">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
<span class="mh1-badge" aria-hidden="true"></span>
</button>
</header>
<div class="mh1-body">
<p class="mh1-eyebrow">Ihr Bauvorhaben</p>
<h1 class="mh1-h1">Alles im Blick, sauber sortiert.</h1>
<p class="mh1-lead">Scrollen Sie nach unten — der Kopf legt beim Scrollen eine dezente Trennlinie an und wird dichter.</p>
<!-- 16:10 Bild-Andeutung als CSS-Verlauf (im Projekt durch echtes <img> ersetzen) -->
<div class="mh1-hero" aria-hidden="true"></div>
<div class="mh1-card"><h4>Kuechenmontage</h4><p>Termin bestaetigt, Material geliefert.</p><div class="mh1-skel"></div><div class="mh1-skel s2"></div></div>
<!-- weitere Karten identisch: Badsanierung, Malerarbeiten, Terrassenbau ... (genug zum Scrollen) -->
</div>
</div>
</div>
<style>
/* Sticky Glas-Header (mobil) — alle Klassen mh1- gescopt */
.mh1-phone{--akzent:#7c87ff;position:relative;overflow:hidden;max-width:360px;margin:0 auto;height:640px;
border-radius:30px;border:1px solid #26262c;background:#111114;
box-shadow:0 24px 60px -24px rgba(0,0,0,.8);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#e9e9ee}
.mh1-phone *{box-sizing:border-box}
.mh1-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:20;
width:110px;height:26px;border-radius:0 0 16px 16px;background:#0c0c0f}
.mh1-notch::after{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
width:44px;height:5px;border-radius:99px;background:#26262c}
/* Scroll-Flaeche — hier lebt position:sticky */
.mh1-screen{position:relative;height:100%;overflow-y:auto;background:#16161a;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mh1-screen::-webkit-scrollbar{width:0}
/* Der Glas-Header */
.mh1-header{position:sticky;top:0;z-index:10;
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:44px 16px 14px;
background:rgba(22,22,26,.55);
border-bottom:1px solid transparent;
-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
transition:background .28s ease,border-color .28s ease,padding .28s ease}
.mh1-header.scrolled{background:rgba(20,20,24,.82);border-bottom-color:#26262c;padding-top:38px;padding-bottom:12px}
.mh1-logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:.2px;color:#f4f4f5}
.mh1-logomark{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--akzent,#7c87ff),#3f47b3)}
.mh1-logomark svg{width:17px;height:17px;color:#fff}
.mh1-iconbtn{-webkit-appearance:none;appearance:none;position:relative;
width:46px;height:46px;border-radius:13px;border:1px solid #26262c;background:rgba(28,28,34,.6);
color:#e9e9ee;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:border-color .18s ease,background .18s ease,transform .18s ease}
.mh1-iconbtn svg{width:22px;height:22px}
.mh1-badge{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;
background:var(--akzent,#7c87ff);border:2px solid #16161a}
@media (hover:hover){.mh1-iconbtn:hover{border-color:var(--akzent,#7c87ff);background:#1c1c22}}
.mh1-iconbtn:active{transform:scale(.94)}
.mh1-iconbtn:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
/* Inhalt zum Scrollen */
.mh1-body{padding:18px 16px 28px}
.mh1-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--akzent,#7c87ff);margin:0 0 8px}
.mh1-h1{font-size:25px;line-height:1.18;font-weight:700;letter-spacing:-.01em;margin:0 0 10px;color:#f4f4f5}
.mh1-lead{font-size:14px;line-height:1.6;color:#a1a1aa;margin:0 0 20px}
.mh1-hero{aspect-ratio:16/10;border-radius:16px;border:1px solid #26262c;margin:0 0 18px;position:relative;overflow:hidden;
background:radial-gradient(120% 120% at 80% 12%,color-mix(in srgb,var(--akzent,#7c87ff) 42%,transparent),transparent 55%),
linear-gradient(135deg,#22222e,#16161a)}
.mh1-hero::after{content:"";position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:28px 28px;
-webkit-mask-image:radial-gradient(ellipse 70% 70% at 65% 30%,#000 20%,transparent 80%);
mask-image:radial-gradient(ellipse 70% 70% at 65% 30%,#000 20%,transparent 80%)}
.mh1-card{background:#1c1c22;border:1px solid #26262c;border-radius:16px;padding:16px;margin-bottom:12px}
.mh1-card h4{margin:0 0 6px;font-size:14px;font-weight:600;color:#f4f4f5}
.mh1-card p{margin:0;font-size:13px;line-height:1.55;color:#a1a1aa}
.mh1-skel{height:9px;border-radius:99px;background:#26262c;margin-top:10px}
.mh1-skel.s2{width:64%}
@media (prefers-reduced-motion:reduce){
.mh1-header{transition:none}
.mh1-iconbtn{transition:none}
.mh1-iconbtn:active{transform:none}
.mh1-screen{scroll-behavior:auto}
}
</style>
<script>
/* Beim Scrollen der .mh1-screen bekommt der Header die Klasse .scrolled
(dichterer Hintergrund + Trennlinie). Scroll-Ziel ist die INNERE Flaeche,
nicht window — sonst greift es im echten Handy-Vollbild nicht. */
(function(){
var phones=document.querySelectorAll('.mh1-phone');
phones.forEach(function(p){
var screen=p.querySelector('.mh1-screen');
var header=p.querySelector('.mh1-header');
if(!screen||!header)return;
screen.addEventListener('scroll',function(){
header.classList.toggle('scrolled',screen.scrollTop>8);
},{passive:true});
});
})();
</script>