/* Nur Handy (bis 800px). Änderungen hier berühren die Desktop-Ansicht nicht.
   Alles skaliert über --u (kleinerer Wert aus Breite und sichtbarer Höhe),
   damit beide Kacheln samt Fußzeile ohne Scrollen auf den Bildschirm passen. */
:root{--vh:100svh;--u:max(min(1vw,calc(var(--vh) * .0055)),2.6px)}
@supports (height:100dvh){:root{--vh:100dvh}}
html,body{height:auto}
body{min-height:var(--vh);display:flex;flex-direction:column;overflow-x:clip}
.top{position:absolute;inset:0 0 auto;justify-content:flex-start;padding:calc(var(--u) * 4.4) calc(var(--u) * 6)}
.top img{height:calc(var(--u) * 7)}
.pick{--m:calc(var(--u) * 8);flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;min-height:0}
.side{min-height:0;gap:calc(var(--u) * 2.4);padding:calc(var(--u) * 3) calc(var(--u) * 6)}
.side:first-child{padding-top:calc(var(--u) * 16);padding-bottom:calc(var(--u) * 3 + var(--m));clip-path:polygon(0 0,100% 0,100% calc(100% - var(--m)),0 100%)}
.side:last-child{margin-top:calc(var(--m) * -1);padding-top:calc(var(--m) + var(--u) * 3);clip-path:polygon(0 var(--m),100% 0,100% 100%,0 100%)}
.eyebrow{font-size:max(.62rem,calc(var(--u) * 3))}
h2{font-size:calc(var(--u) * 9)}
p{font-size:max(.74rem,calc(var(--u) * 3.7))}
.go{margin-top:0;padding:calc(var(--u) * 3) calc(var(--u) * 5.5);font-size:max(.7rem,calc(var(--u) * 3.4))}
.foot{flex:none;padding:calc(var(--u) * 2.2) calc(var(--u) * 4) calc(var(--u) * 2.2 + env(safe-area-inset-bottom));background:#000;color:rgb(255 255 255/.7);text-align:center;font-size:max(.62rem,calc(var(--u) * 3))}