/*
Theme Name: Folienkarl — Das Original
Description: Eine einzelne Markenseite für folienkarl.de.
Version: 1.0.0
Text Domain: folienkarl-marke
*/
:root{color-scheme:light;--ink:#172927;--paper:#f4f2e9;--orange:#ff6438}
*{box-sizing:border-box}
html{min-height:100%;background:var(--ink)}
body{margin:0;padding:22px;min-height:100svh;background:var(--ink);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.brand-page{position:relative;display:grid;place-items:center;min-height:calc(100svh - 44px);overflow:hidden;isolation:isolate;border-radius:5px;background:var(--paper)}
.brand-page::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.25' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.brand{position:relative;z-index:2;text-align:center;padding:90px 32px 110px;width:100%;animation:appear .85s ease-out both}
.symbol{display:block;width:76px;height:76px;margin:0 auto 43px;overflow:visible}
h1{margin:0;white-space:nowrap;font-size:clamp(60px,13.25vw,218px);font-weight:800;letter-spacing:-.078em;line-height:1.02}
.folien{font-weight:400;letter-spacing:-.082em}
.karl{font-weight:800}
.domain{display:inline-block;font-size:.38em;letter-spacing:-.055em;margin-left:.08em;font-weight:700}
.tagline{margin:37px 0 0;font-size:clamp(11px,1.08vw,16px);font-weight:700;letter-spacing:.25em;line-height:1.6;text-transform:uppercase}
.peel{position:absolute;bottom:-1px;right:-1px;width:clamp(130px,22vw,360px);aspect-ratio:1;pointer-events:none;z-index:1;filter:drop-shadow(-8px -8px 16px #17292710)}
.registration{position:absolute;top:32px;left:32px;width:20px;height:20px;color:var(--ink);opacity:.5}
.registration::before,.registration::after{content:"";position:absolute;background:currentColor}
.registration::before{left:9px;top:0;width:1px;height:20px}
.registration::after{top:9px;left:0;height:1px;width:20px}
::selection{background:var(--orange);color:var(--ink)}
@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.brand-page{min-height:calc(100svh - 56px)}body{padding:28px}}
@media(max-width:600px){body{padding:10px}.brand-page{min-height:calc(100svh - 20px)}.brand{padding:80px 15px 120px}h1{font-size:14vw}.symbol{width:64px;height:64px;margin-bottom:35px}.tagline{font-size:10px;letter-spacing:.17em;margin-top:27px}.registration{top:22px;left:22px;width:16px;height:16px}.peel{width:43vw}}
@media(prefers-reduced-motion:reduce){.brand{animation:none}}