/* Mobil-Überarbeitung 2026-09-30. Vier unabhängige Bausteine; jeder Block lässt sich einzeln löschen.
   Snapshot vorher: docs/backup-2026-09-30-vor-mobil/theme-snapshot.tgz */

/* === Baustein 1: Hero mit Bildband; Claim liegt verschleiert auf der Animation und wird im Takt der
   Plattenanimation freigelegt (--intro aus hero-wall.js, "phone"). Eyebrow, Text, Button darunter. === */
@media (max-width:760px){
 .plane-stage.has-wall{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;background:#fff}
 .plane-stage.has-wall .plane-inner{display:contents}
 .plane-stage.has-wall .hero-wall{grid-area:1/1;position:relative;inset:auto;z-index:0;height:clamp(260px,50svh,420px)}
 .plane-stage.has-wall .hero-wall-veil{background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.78))}
 .plane-stage.has-wall .plane-track{grid-area:1/1;align-self:center;position:relative;z-index:1;min-height:0;padding:0 20px;border:0}
 .plane-stage.has-wall .plane-tool{display:none}
 .plane-stage.has-wall .plane-inner>.eyebrow{grid-area:2/1;margin:0;padding:24px 20px 0}
 .plane-stage.has-wall .plane-after{grid-area:3/1;padding:14px 20px 40px}
 .plane-stage.has-wall .plane-caption{display:none}
 .plane-stage.has-wall #plane-claim{clip-path:inset(-.3em calc((1 - var(--intro,1)) * 100%) -.4em 0)}
}

/* === Baustein 2: Prinzipien kompakter === */
@media (max-width:650px){
 #anspruch.section{padding-block:48px 44px}
 #anspruch .section-heading{margin-bottom:24px}
 #anspruch .three-grid{gap:0}
 #anspruch .principle{display:grid;grid-template-columns:minmax(0,1fr);padding-block:14px}
 #anspruch .principle h3{font-size:19px;margin:0 0 4px}
 #anspruch .principle p:last-child{font-size:14px;margin:0}
}

/* === Baustein 3: Leistungen mit Fotos (Skript: services.js) === */
#leistungen.has-photos .service-row{grid-template-columns:70px minmax(0,1fr) 220px;align-items:center;padding:22px 0}
#leistungen .service-photo{margin:0;aspect-ratio:4/3;overflow:hidden;background:#34362f}
#leistungen .service-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
#leistungen .service-row:hover .service-photo img{transform:scale(1.04)}
@media (max-width:1000px){#leistungen.has-photos .service-row{grid-template-columns:44px minmax(0,1fr) 170px}}
@media (max-width:650px){
 #leistungen.has-photos .service-list{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:4px 20px 8px;scrollbar-width:none}
 #leistungen.has-photos .service-list::-webkit-scrollbar{display:none}
 #leistungen.has-photos .service-row{flex:0 0 80%;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;background:#2e302c;scroll-snap-align:start}
 #leistungen.has-photos .service-row:last-child{border:0}
 #leistungen.has-photos .service-photo{order:-1}
 #leistungen.has-photos .service-row .index{margin:16px 18px 6px;text-align:left;width:auto}
 #leistungen.has-photos .service-row>div{padding:0 18px 20px}
 #leistungen.has-photos .service-row h3{font-size:19px}
 #leistungen.has-photos .service-row div p{font-size:14px}
}
/* Desktop mit Maus: Fotos nicht in der Zeile, sondern groß am Mauszeiger (services.js, "photo-follow") */
#leistungen.photo-follow .service-row{grid-template-columns:70px minmax(0,1fr) 40px;padding:28px 0;cursor:default}
#leistungen.photo-follow .service-photo{display:none}
#leistungen.photo-follow .service-row h3{transition:transform .3s ease,color .3s ease}
#leistungen.photo-follow .service-row.is-hovered h3{transform:translateX(8px);color:#eac378}
.service-float{position:fixed;left:0;top:0;z-index:60;width:440px;aspect-ratio:4/3;margin:0;pointer-events:none;overflow:hidden;background:#34362f;box-shadow:0 18px 40px #0000004d;opacity:0;scale:.92;transition:opacity .25s ease,scale .25s ease}
.service-float.is-visible{opacity:1;scale:1}
.service-float img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){.service-float{width:340px}}
@media (prefers-reduced-motion:reduce){#leistungen .service-photo img,.service-float,#leistungen.photo-follow .service-row h3{transition:none}}

/* === Baustein 4: Projektgalerien wischbar (Skript: project-gallery.js, "swipe") === */
@media (max-width:650px){
 .project-gallery{display:flex;flex-direction:row;height:auto;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
 .project-gallery::-webkit-scrollbar{display:none}
 .project-gallery .project-view,.project-gallery .project-thumbs{display:contents}
 .project-gallery .project-view>.gallery-image,.project-gallery .gallery-choice{flex:0 0 86%;height:260px;scroll-snap-align:center}
 .project-gallery .gallery-choice{cursor:default}
 .project-gallery .gallery-image img,.project-view .gallery-image img{object-fit:cover}
}