/* Handy: kompakter Fuß. Wischkarten nur noch auf den Fallbeispielen (.rs, .g3 unten).
   Startseite 17.10.2026 auf Kundenwunsch ohne Wischreihen: Leistungen (.bx), Werte (.bento) und
   „Drei Wege“ (.pg) stehen untereinander, damit alles ohne Seitwärtswischen sichtbar ist. */
.m-dots{display:none}
@container pg (max-width:640px){
.pg>.hl{order:-1}
.m-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.m-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#C9CED6;cursor:pointer;transition:width .25s,background .25s}
.m-dots button.on{width:24px;background:#14161B}
.m-dots{gap:0;margin:-12px 0 -18px}
.m-dots button,.m-dots button.on{box-sizing:content-box;padding:18px 8px;background-clip:content-box}
.shot{height:300px}
.app-wrap{width:972px;height:700px;transform:translateX(-105px) scale(.452)}
.pt .pk small{flex-wrap:nowrap}
.ft-g{grid-template-columns:1fr 1fr}
.ft-g>div,.ft-g>div:first-child{padding:30px 20px}
.ft-g>div:first-child,.ft-g>div:last-child{grid-column:1/-1}
.ft-g>div:nth-child(3){border-left:1px solid #EEF0F3}
.ft-b{align-items:flex-start;text-align:left;padding:20px}
.ft-b nav{flex-wrap:wrap;gap:8px 18px}
}
@container pg (max-width:640px){
.rs:not(.solo),.g3:has(>.card.blue){display:flex;align-items:stretch;gap:12px;margin-left:-20px;margin-right:-20px;padding:4px 20px 18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;overscroll-behavior-x:contain;scrollbar-width:none;grid-template-columns:none}
.rs:not(.solo)::-webkit-scrollbar,.g3:has(>.card.blue)::-webkit-scrollbar{display:none}
.rs:not(.solo)>*,.g3:has(>.card.blue)>*{flex:0 0 84%;min-width:0;scroll-snap-align:start}
/* Programmkacheln (17.10.2026, Kundenmeldung „Kacheln unsauber“): vorher 42-px-Kacheln in 53 × 42 px
   grossen Zellen, dazu die Lage mit 8-px-Fuge gerechnet bei 6-px-Raster → neben jeder Kachel lugte die
   Zelle hervor. Jetzt Kachel = Zelle: quadratisch, gleiche Rundung, dieselbe Rechnung fuer beide.
   --tc ist die Zellbreite: (Seitenbreite − 2 × 20 px Rand − 5 × 8 px Fuge) / 6. Die Ueberschrift steht im
   Fluss darueber, das Feld mit den belegten Zeilen 4–13 haengt unten an (Abstand von unten: 13 − Zeile). */
.tools{--tc:calc((100cqw - 80px) / 6);height:auto;padding-bottom:calc(var(--tc) * 10 + 72px)}
.grid{inset:auto 0 0;height:calc(var(--tc) * 10 + 72px);grid-template-rows:repeat(10,1fr);gap:8px}
.grid i{border-radius:8px}.grid i:nth-child(n+61){display:none}
.tile{left:calc((var(--tc) + 8px) * var(--mc));top:auto;bottom:calc((var(--tc) + 8px) * (13 - var(--mr)));width:var(--tc);height:var(--tc);border-radius:8px;box-shadow:0 10px 18px -12px rgba(11,14,20,.4)}
.tile img{width:calc(var(--tc) / 2);height:calc(var(--tc) / 2)}
.ft-g li{overflow-wrap:anywhere}
}
@container pg (max-width:640px){.ul.cols{columns:1;grid-template-columns:1fr}}
@container pg (max-width:640px){.who-c{grid-template-columns:1fr!important;gap:22px!important;padding:28px 22px!important;align-items:start!important}.who-c .h2{font-size:32px!important}.who-c .btn{width:100%}}
@container pg (max-width:640px){.rc.rc-lg{font-size:12px}.rc.rc-lg .rc-w{left:6%;right:6%;top:28px;padding:16px 16px 0}.rc.rc-lg .rc-r{grid-template-columns:minmax(0,1fr) 56px 88px}.rc.rc-lg .rc-r>span:nth-child(3),.rc.rc-lg .rc-r>span:nth-child(4){display:none}.rc.rc-lg .rc-r>span:last-child{text-align:right}.rc-h b{font-size:1.3em}}
@container pg (max-width:640px){.card{padding:22px}.card .n{width:30px;height:30px;margin-bottom:14px;font-size:12.5px}.card h3{font-size:19px}.g3,.g4,.g2{gap:10px}}
/* Startseite Handy: Zeilen statt Kartenstapel (17.10.2026). Nach dem Aufloesen der Wischreihen waren Leistungen,
   Werte und Wege zusammen rund 6.000 px lang; Kundenwahl „Zeilen mit Vorschaubild“. Je Karte eine Zeile in einer
   gemeinsamen weissen Flaeche: links das unveraenderte App-Bild, in der alten Kartengroesse 326 × 300 gebaut und per
   transform auf --vs verkleinert; negative Raender geben den Platz frei, den transform nicht freigibt. NICHT zoom:
   iOS Safari vergroesserte die gezoomte Schrift wieder (Kundenscreenshot 17.10.2026, Texte uebereinander), Chrome
   und WebKit unter Windows zeigen das nicht. Rechts Titel und voller Text. „Mehr erfahren“
   zeigt nur auf #leistungen selbst und entfaellt mobil. Die Weg-Karten haben kein Bild und werden nur dichter. */
@container pg (max-width:640px){
.bx,.bento{display:block;padding:2px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #E8EBEF,0 18px 36px -30px rgba(11,14,20,.3)}
.bx-c,.bx-1,.bento>.bc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 0;border-radius:0;background:none;box-shadow:none;text-align:left}
.bx-c+.bx-c,.bento>.bc+.bc{border-top:1px solid #EEF0F3}
.bx-v,.bx-1 .bx-v,.bp,.bc.full .bp{--vs:.32;grid-column:1;grid-row:1/span 2;width:326px;height:300px;margin:0 calc(326px * (var(--vs) - 1)) calc(300px * (var(--vs) - 1)) 0;transform:scale(var(--vs));transform-origin:0 0;border-radius:32px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.bx-1 .bx-v{background:radial-gradient(120% 80% at 80% 0%,#5B8CFF 0%,rgba(91,140,255,0) 60%),linear-gradient(165deg,#3A75FF 0%,#2F6BFF 40%,#1E4FD8 100%)}
.bx-t,.bx-1 .bx-t{grid-column:2;grid-row:1;padding:0}
.bc h3,.bc p{grid-column:2}
.bx-t h3,.bx-1 .bx-t h3,.bc h3{margin:0;font-size:17px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:#14161B}
.bx-t p,.bx-1 .bx-t p,.bc p{max-width:none;margin:6px 0 0;font-size:14px;line-height:1.5;color:#5A616D}
.bx-b{display:none}
.pg{gap:12px;margin-top:28px}
.pc{padding:8px 8px 20px}
.pt{padding:18px}
.pt .pr{margin-top:12px}.pt .pr b{font-size:34px}
.pt p{margin-top:10px;font-size:14.5px}
.pt .btn{margin-top:16px;height:48px}
.pt .pk{margin-top:16px;min-height:52px}
.pc ul{margin-top:18px;gap:10px}
.pc li{font-size:14px}
}
/* Unter 360 px blieben neben dem Vorschaubild nur 130 px Text; „weiterverarbeiten“ lief ueber. */
@container pg (max-width:359px){.bx-v,.bx-1 .bx-v,.bp,.bc.full .bp{--vs:.24}.bx-c,.bx-1,.bento>.bc{column-gap:12px}.bx-t h3,.bx-1 .bx-t h3,.bc h3{font-size:16px;hyphens:auto}}