/* Gemeinsame Basis der Beispiel-Designs von Ruhrpott-Web */
@font-face{font-family:"Inter";src:url("../fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans.woff2") format("woff2");font-weight:100 1000;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3.woff2") format("woff2");font-weight:200 900;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid #0058B0;outline-offset:3px}

.demo-bar{position:sticky;top:0;z-index:100;background:#1D1D1F;color:#F5F5F7;font:500 14px/1.4 "Inter",system-ui,sans-serif;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;padding:9px clamp(16px,4vw,32px)}
.demo-bar a{color:#F5F5F7;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.demo-bar strong{font-weight:700}
.wrapx{max-width:1160px;margin:0 auto;padding-left:clamp(16px,4vw,32px);padding-right:clamp(16px,4vw,32px)}
.ph-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:15px}
.ph-img svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.5}
@media (max-width:600px){header .nav .btn{display:none}}