/* ==========================================================================
   Webdesign: Handy-Beispiel „Visitenkarte“ zum Durchscrollen (04.10.2026)
   Wischt man im Handy, scrollt die Beispielseite im Handy, nicht die Seite.
   Größen über Container-Einheiten: passt sich jeder Kartenbreite an.
   ========================================================================== */
.wd-hd{position:relative;container-type:inline-size;aspect-ratio:720/760;max-width:100%;background:#fff;border-radius:10px;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 3%;padding:3% 4% 8% 4%;box-sizing:border-box;margin:0 0 12px}
.wd-hd *{box-sizing:border-box}

/* Beschriftungen links */
.wd-hd-labels{display:flex;flex-direction:column;gap:4.2cqw;align-self:center}
.wd-hd-labels button{all:unset;cursor:pointer;display:flex;align-items:center;gap:2cqw;font:700 4.3cqw/1.15 Carlito,Calibri,"Segoe UI",Arial,sans-serif;color:#153572;transition:color .2s}
.wd-hd-labels button::before{content:"";flex:none;width:2.2cqw;height:2.2cqw;border-radius:50%;background:#C9D6E6;transition:background .2s,transform .2s}
.wd-hd-labels button.an{color:#C4661A}
.wd-hd-labels button.an::before{background:#E4892C;transform:scale(1.35)}
.wd-hd-labels button:focus-visible{outline:2px solid #E4892C;outline-offset:3px;border-radius:4px}

/* Handy */
.wd-hd-phone{position:relative;width:47cqw;height:95cqw;border-radius:7.5cqw;background:#1B1B1F;padding:1.6cqw;
  box-shadow:0 0 0 .5cqw #8E9097,0 0 0 .9cqw #3A3B40,0 4cqw 8cqw rgba(15,25,45,.28)}
.wd-hd-phone::before{content:"";position:absolute;top:2.6cqw;left:50%;transform:translateX(-50%);width:14cqw;height:3.6cqw;border-radius:999px;background:#000;z-index:3}
.wd-hd-screen{position:relative;width:100%;height:100%;border-radius:6cqw;overflow-y:auto;overflow-x:hidden;background:#141416;color:#F2EEE8;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none;
  font:2.45cqw/1.4 "Helvetica Neue",Arial,sans-serif}
.wd-hd-screen::-webkit-scrollbar{display:none}
.wd-hd-screen:focus-visible{outline:2px solid #E4892C;outline-offset:2px}

/* Beispielseite im Handy (Maße in em, 1em ≈ Schriftgröße im Handy) */
.hd-status{display:flex;justify-content:space-between;padding:1.1em 1.7em .3em;font-weight:700;font-size:.9em}
.hd-status span:last-child{letter-spacing:.15em}
.hd-oben{position:sticky;top:0;z-index:2;background:rgba(20,20,22,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hd-kopf{display:flex;align-items:center;gap:.7em;padding:.5em 1.1em .7em}
.hd-logo{flex:none;width:2.4em;height:2.4em;border-radius:50%;background:#E4892C;color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.05em}
.hd-kopf b{display:block;font-size:1.2em;line-height:1.1}.hd-kopf small{display:block;color:#B9B2A8;font-size:.8em}
.hd-burger{margin-left:auto;width:1.6em;height:1.1em;background:linear-gradient(#F2EEE8 0 0) top/100% 2px no-repeat,linear-gradient(#F2EEE8 0 0) center/100% 2px no-repeat,linear-gradient(#F2EEE8 0 0) bottom/100% 2px no-repeat}
.hd-foto{position:relative;margin:0 0 .8em}
.hd-foto img{display:block;width:100%;height:15em;object-fit:cover}
.hd-foto div{position:absolute;left:0;right:0;bottom:0;padding:2.2em 1.1em .8em;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.hd-foto b{display:block;font-size:1.65em;line-height:1.08;color:#fff}.hd-foto small{color:#E7DFD3}
.hd-box{margin:0 .9em .8em;padding:.8em .9em;border-radius:.8em;background:#222226}
.wd-hd .hd-h{margin:0 0 .5em;font-size:1.15em;color:#fff}
.hd-offen{margin:0 0 .4em;display:flex;align-items:center;gap:.45em}.hd-offen i{width:.6em;height:.6em;border-radius:50%;background:#4CC277}
.hd-zeiten{display:grid;grid-template-columns:auto 1fr;gap:.25em .8em;margin:0;color:#CFC8BE}.hd-zeiten .hd-t{font-weight:700;color:#F2EEE8}
.hd-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin:0 .9em .8em}
.hd-k{display:block;text-align:center;font-weight:800;padding:.75em .4em;border-radius:.6em;color:#fff}
.hd-k.or{background:#E4892C}.hd-k.gr{background:#25A55A}.hd-k.hell{background:#F2EEE8;color:#141416;margin-top:.6em}
.hd-karte{margin:0;padding:0}
.hd-karte .hd-z{display:flex;justify-content:space-between;gap:.6em;padding:.45em 0;border-top:1px solid #34343A}.hd-karte .hd-z:first-child{border-top:0}
.hd-karte .hd-z small{display:block;color:#A9A298;font-size:.82em}.hd-karte b{white-space:nowrap;color:#F5B76C}
.hd-map{position:relative;height:9em;border-radius:.6em;overflow:hidden;background:#DCE5D8}
.hd-map svg{display:block;width:100%;height:100%}
.hd-adr{margin:.5em 0 0;color:#CFC8BE}
.hd-fuss{padding:.8em 1.1em 1.2em;color:#8F887E;font-size:.85em;text-align:center}
.hd-menue{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);padding:.55em .4em 1.1em;background:rgba(20,20,22,.96);border-top:1px solid #2C2C31}
.hd-menue button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.2em;font-size:.82em;color:#A9A298}
.hd-menue button svg{width:1.7em;height:1.7em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hd-menue button.an{color:#E4892C}
.hd-menue.blink{animation:hdBlink 1.2s ease 2}
@keyframes hdBlink{50%{box-shadow:inset 0 0 0 2px #E4892C}}

/* Hinweis unten */
.wd-hd-tipp{position:absolute;left:0;right:0;bottom:1.6cqw;margin:0;text-align:center;font:700 3.6cqw/1.2 Carlito,Calibri,Arial,sans-serif;color:#C4661A}
.wd-hd-tipp span{display:inline-block;animation:hdWisch 1.8s ease-in-out infinite}
@keyframes hdWisch{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6cqw)}}
@media (prefers-reduced-motion:reduce){.wd-hd-tipp span,.hd-menue.blink{animation:none}.wd-hd-labels button,.wd-hd-labels button::before{transition:none}}