fix: mobile padding + topbar layout (header/text nicht mehr gequetscht)

src/styles/site.css

@@ -218,6 +218,10 @@ img{display:block;max-width:100%}
 .toast.show{transform:translateX(-50%) translateY(0)}
 
 @media(max-width:900px){
+  .topbar .inner{flex-direction:column;gap:4px;padding:8px 20px;text-align:center;font-size:12px}
+  .topbar .right{flex-wrap:wrap;justify-content:center;gap:10px}
+  .container{padding:0 20px}
+  .header .inner{padding:12px 20px}
   .nav{display:none}
   .hero .grid,.split,.split.rev,.wallet-grid,.lp-hero .grid{grid-template-columns:1fr}
   .infostrip .grid{grid-template-columns:1fr}
@@ -230,3 +234,15 @@ img{display:block;max-width:100%}
   .opt-grid,.slots{grid-template-columns:1fr 1fr}
   .header-cta .tel{display:none}
 }
+
+@media(max-width:480px){
+  .topbar .inner{font-size:11px;padding:6px 16px}
+  .container{padding:0 18px}
+  .header .inner{padding:10px 16px;gap:12px}
+  .hero h1{font-size:clamp(32px,8vw,48px)}
+  .split h2{font-size:clamp(26px,6vw,36px)}
+  .head-center h2{font-size:clamp(26px,6vw,36px)}
+  .svc-grid{grid-template-columns:1fr}
+  .section{padding:clamp(40px,8vw,80px) 0}
+  .scard .body{padding:24px 20px 22px}
+}