/* AUZMS – Smartphone-Ansicht für ALLE Seiten (max 760px). Gleicher Inhalt wie am Desktop,
   nur kompakter dargestellt: kurze Wege, wischbare Galerien, Reiter, Akkordeons. Wird per media-Attribut nur dort geladen. */

:root{--sec-y:48px;--card-pad:18px;--gap:12px;--head-mb:24px}
h2{font-size:clamp(1.5rem,6.6vw,1.8rem);line-height:1.15}
.lead{font-size:1rem}

/* ---- Seitenkopf ---- */
.page-hero{padding:92px 0 28px}
.page-hero.has-img{padding-bottom:32px}
.page-hero h1{font-size:clamp(1.8rem,8vw,2.2rem);line-height:1.1}
.page-hero .lead{margin-top:.6rem}
.crumbs{margin-bottom:.6rem;font-size:.82rem}
.page-body>.sec:first-child{padding-top:34px}

/* ---- Text + Bild ---- */
.split{gap:22px}
.split>.pimg{order:-1}
.pimg img{width:100%;height:auto}

/* ---- Karten kompakt (Nutzen, Aufgaben, Fakten) ---- */
.grid-2,.grid-3,.grid-4{gap:10px}
.box{padding:16px}
.box h3{font-size:1.05rem}
.box p{font-size:.93rem}
.box.ib{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
.box.ib .ico{grid-row:1 / span 2;margin:0;width:44px;height:44px}
.box.ib h3{grid-column:2;margin:0 0 .2em}
.box.ib p{grid-column:2;margin:0}

/* ---- Schritte: Nummer links ---- */
.steps{gap:12px}
.steps li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:18px}
.steps li .n{grid-row:1 / span 2;margin:0}
.steps li h3{grid-column:2;margin:0 0 .25em;font-size:1.05rem}
.steps li p{grid-column:2;font-size:.93rem}

/* ---- Wischbare Reihen (Karten, Galerien, Handy-Screens) ---- */
.bento,.gal,.phones{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -22px;padding:4px 22px 8px;scroll-padding:0 22px;scrollbar-width:none}
.bento::-webkit-scrollbar,.gal::-webkit-scrollbar,.phones::-webkit-scrollbar{display:none}
.gal>figure{flex:0 0 84%;scroll-snap-align:start}
.phones>*{flex:0 0 56%;scroll-snap-align:start}
.snap-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.snap-dots i{width:7px;height:7px;border-radius:99px;background:rgba(127,137,170,.45);transition:width .25s,background .25s}
.snap-dots i.on{width:22px;background:#8b5cff}

/* ---- Produkte: Reiter statt Stapel ---- */
.prod-tabs{display:flex;gap:6px;padding:5px;max-width:380px;margin:0 auto 18px;border-radius:999px;background:rgba(127,137,170,.14);border:1px solid rgba(127,137,170,.28)}
.prod-tabs button{flex:1;padding:.72rem 1rem;border:0;border-radius:999px;background:transparent;color:inherit;font:600 1rem/1.1 var(--head);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.sec-dk .prod-tabs button{color:#b9c1de}
.prod-tabs button[aria-selected="true"]{color:#fff!important;background:linear-gradient(135deg,#8b5cff,#5b4bff 60%,#4a6bff);box-shadow:0 8px 22px rgba(110,80,255,.45)}
.prod-grid.tabbed>.prod-card{display:none}
.prod-grid.tabbed>.prod-card.on{display:flex;animation:prodIn .35s ease both}
@keyframes prodIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.prod-media{padding:14px 14px 0}
.prod-shot img{aspect-ratio:1.7}
.prod-body{padding:18px 18px 22px}
.prod-body h3{font-size:1.5rem}
.prod-body>p{font-size:.95rem}
.prod-body .ticks li{font-size:.92rem}
.prod-body .btn-row{flex-direction:column;gap:.5rem;margin-top:.4rem}

/* ---- Übersichtsseiten: Gruppen als Akkordeon ---- */
.svc-group{gap:12px}
.svc-intro{min-height:170px;padding:22px;position:relative}
.svc-grid{gap:10px}
.svc{padding:16px}
.js-acc .svc-intro{cursor:pointer}
.js-acc .svc-intro::after{content:"";position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .25s}
.js-acc .svc-group.open .svc-intro::after{transform:rotate(180deg)}
.js-acc .svc-group:not(.open) .svc-grid{display:none}

/* ---- FAQ ---- */
.faq details{padding:16px 18px;margin-bottom:10px}
.faq summary{font-size:1rem}

/* ---- Projekte, Rechtliches, Kontakt ---- */
.pj{padding:16px;gap:14px}
.pj-logo{height:80px}
.contact-grid{gap:22px}
.toc{display:flex;gap:8px;overflow-x:auto;position:static;margin:0 -22px 4px;padding:4px 22px;scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc b{display:none}
.toc a{white-space:nowrap;padding:.5rem .9rem;border:1px solid rgba(109,61,240,.3);border-radius:999px;background:#fff;color:#3a2fa0;font-size:.9rem}

/* ---- Abschluss-Karte & Footer ---- */
.hybrid .cta-card{padding:26px 20px;gap:20px;border-radius:22px}
.hybrid .cta-card h2{font-size:1.5rem}
.hybrid .cta-actions{width:100%}
.hybrid .cta-wrap{padding-bottom:44px}
.hybrid .sec.sec-dk + .cta-wrap,.hybrid .page-body:has(> .sec:last-child.sec-dk) + .cta-wrap{padding-top:48px}
.hybrid .site-footer{padding-top:44px;padding-bottom:70px}
.hybrid .foot-top{grid-template-columns:1fr 1fr;gap:26px 18px;padding-bottom:26px}
.hybrid .foot-brand,.hybrid .foot-top>:last-child{grid-column:1 / -1}
.hybrid .foot-col a{white-space:normal}

/* ---- Fester Aktions-Balken ---- */
.m-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(10,13,21,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.1);transform:translateY(110%);transition:transform .3s ease}
.m-cta.show{transform:none}
.m-cta .btn{flex:1;justify-content:center;padding:.75rem 1rem}
.m-cta .m-call{flex:0 0 48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.06)}
.m-cta .m-call svg{width:22px;height:22px}
.wa{bottom:84px;width:46px;height:46px}