/* Gemeinsame Bausteine der Beispiel-Entwürfe (RS Studio) */
@font-face{font-family:Bricolage;font-weight:700;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Hanken;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Hanken;font-weight:500;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(/assets/fonts/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(/assets/fonts/manrope-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Atkinson;font-weight:400;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Atkinson;font-weight:700;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* Hinweisleiste: Beispiel-Entwurf */
.demo-bar{position:relative;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;padding:10px 16px;background:#0F0F0F;color:#F2EEE6;font:500 15px/1.4 Hanken,system-ui,sans-serif;text-align:center}
button{font:inherit}
.demo-bar b{color:#D9A54A}
.demo-bar a{color:#F2EEE6;text-decoration-color:#D9A54A;font-weight:500;text-underline-offset:3px;padding-block:6px}

/* Foto-Platzhalter: zeigt das Foto, sobald die Datei existiert */
.ph{position:relative;overflow:hidden;background:var(--ph-bg,#e9e4da);isolation:isolate}
.ph:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--ph-a,#e9e4da),var(--ph-b,#d8d0c2))}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.ph.has-photo img{opacity:1}
.ph-label{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#ffffffd9;color:#0F0F0F;font:500 13px/1.2 Hanken,system-ui,sans-serif}
.ph-label:before{content:"";width:16px;height:12px;border:2px solid currentColor;border-radius:3px;box-shadow:inset 0 0 0 2px #fff;background:radial-gradient(circle at 70% 35%,currentColor 2px,transparent 2.5px)}
.ph.has-photo .ph-label{display:none}

/* Demo-Formular */
.demo-sent{display:none;margin-top:14px;padding:12px 14px;border-radius:10px;background:#fff3cd;color:#5c4400;font:500 15px/1.4 Hanken,system-ui,sans-serif}
.demo-sent.show{display:block}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Zurück-Knopf (immer sichtbar) */
.demo-back{position:fixed;left:16px;bottom:16px;z-index:70;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 20px 8px 10px;border-radius:999px;background:#0F0F0F;color:#F2EEE6;font:600 16px/1 Hanken,system-ui,sans-serif;text-decoration:none;box-shadow:0 12px 30px -8px #0F0F0F99,0 0 0 2px #D9A54A;transition:transform .2s ease,background-color .2s ease}
.demo-back img{width:32px;height:32px;border-radius:9px}
.demo-back:hover{background:#D9A54A;color:#0F0F0F;transform:translateY(-2px)}
body{padding-bottom:84px}

/* Schmale Handys: lange Wörter umbrechen, Tippflächen mindestens 44 px */
.wrap>*{min-width:0}
h1,h2{overflow-wrap:break-word;hyphens:manual}
.demo-bar a{padding-block:12px}
footer a{display:inline-block;padding-block:12px}
.logo{min-height:44px}