@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root { --red: #d9231c; --text: #181818; --muted: #666; --border: #e7e7e7; --max-width: 1180px; --ink: var(--text); --line: var(--border); --paper: #fffefd; --blush: #fff1f1; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #f7f5f3; }
body { margin: 0; color: var(--text); background: #f7f5f3; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: "Nunito Sans", Arial, Helvetica, sans-serif; font-weight: 700; }
a { color: inherit; }
.site-frame { overflow: hidden; width: min(100% - 48px, var(--max-width)); margin: 20px auto; border: 1px solid #d5cfcc; border-radius: 11px; background: var(--paper); box-shadow: 0 8px 30px rgba(36, 19, 16, 0.08); }
.site-header { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 66px; padding: 0 38px; border-bottom: 1px solid var(--line); }
.mini-brand { width: 38px; height: 38px; overflow: hidden; }.mini-logo { display: block; position: relative; width: 38px; height: 38px; overflow: hidden; }.mini-logo img { position: absolute; width: 66px; max-width: none; top: -7px; left: -14px; }
.contact-button { justify-self: end; padding: 10px 20px; border-radius: 7px; background: var(--red); color: white; font-size: .76rem; font-weight: 700; text-decoration: none; box-shadow: 0 3px 8px rgba(229, 34, 27, .22); }
.hero { display: grid; grid-template-columns: minmax(270px,1.3fr) minmax(220px,.7fr); align-items: center; justify-items: center; column-gap: clamp(22px,5vw,52px); width: min(100% - 80px, 780px); margin: 0 auto; padding: 50px 0 34px; }.identity { display: flex; flex-direction: column; align-items: center; align-self: center; }.hero-logo { display: block; width: 238px; height: 178px; object-fit: contain; }.wordmark { margin: -3px 0 0; font-family: "Nunito Sans", Arial, Helvetica, sans-serif; font-size: 3.1rem; font-weight: 500; letter-spacing: .01em; line-height: 1; }.portrait { width: min(100%, 245px); height: 276px; margin: 0 auto; overflow: hidden; border: 1px solid #dfdcda; border-radius: 12px; background: #efeeee; box-shadow: 0 4px 10px rgba(0,0,0,.1); }.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.introduction { grid-column: 1 / -1; max-width: 560px; margin-top: 24px; margin-inline: auto; text-align: center; }.introduction h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.25; }.introduction p { max-width: 560px; margin: 13px auto 0; font-size: .95rem; line-height: 1.6; }.introduction .purpose { margin-top: 8px; color: var(--red); font-weight: 700; }.coming-soon { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 19px; border: 1px solid #d9d2d0; border-radius: 8px; font-size: .875rem; font-weight: 600; text-decoration: none; }.coming-soon:hover, .coming-soon:focus-visible { border-color: var(--red); color: var(--red); }.coming-soon span { color: var(--red); font-size: 1.6rem; line-height: .7; }
.klotzomat-card { display: grid; grid-template-columns: 210px 1fr 116px; align-items: center; gap: 26px; width: min(100% - 80px, 850px); margin: 0 auto 34px; padding: 22px 26px; border: 1px solid #e1dddd; border-radius: 12px; box-shadow: 0 3px 12px rgba(0,0,0,.045); }.sorter-illustration { position: relative; width: 204px; height: 115px; border-bottom: 6px solid #cbc9c4; }.hopper { position: absolute; top: 0; left: 80px; width: 55px; height: 28px; border: 9px solid #bcbbb7; border-top: 13px solid #d7d6d0; clip-path: polygon(0 0,100% 0,74% 100%,26% 100%); }.machine { position: absolute; top: 28px; left: 63px; width: 90px; height: 48px; border: 3px solid #c7c8c5; border-radius: 6px; background: linear-gradient(135deg,#f7f7f4,#c4c6c3); box-shadow: 13px 10px 0 #9d9f9d; }.machine i { display: inline-block; width: 13px; height: 13px; margin: 18px 2px 0 9px; border-radius: 50%; background: var(--red); }.belt { position: absolute; top: 72px; left: 7px; width: 192px; height: 17px; border-radius: 9px; background: #565859; transform: skewX(-9deg); }.belt b { display: inline-block; width: 11px; height: 10px; margin: 3px 6px; border-radius: 2px; background: #f0cc2a; }.bin { position: absolute; top: 87px; width: 42px; height: 25px; border: 2px solid #babbb9; border-radius: 2px 2px 7px 7px; background: #e7e6e1; }.bin-one { left: 18px; }.bin-two { left: 80px; }.bin-three { left: 142px; }.section-label { margin: 0 0 7px; color: var(--red); font-size: .8125rem; font-weight: 700; }.klotzomat-copy h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; line-height: 1.2; }.klotzomat-copy > p:last-child { margin: 12px 0 0; font-size: .875rem; line-height: 1.6; }.value-seal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 105px; height: 105px; border-radius: 50%; background: #fff6f3; text-align: center; }.value-seal span { color: var(--red); font-size: 2rem; line-height: .85; }.value-seal strong { margin-top: 7px; font-size: .69rem; line-height: 1.45; }
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; padding: 31px max(40px,12%); background: var(--blush); }.values article { text-align: center; }.values span { color: var(--red); font-size: 2.1rem; line-height: 1; }.values h2 { margin: 7px 0 4px; font-size: .875rem; }.values p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.6; }.site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 19px 35px; color: var(--muted); font-size: .75rem; text-align: center; }.site-footer p { margin: 0; }.trademark { flex-basis: 100%; max-width: 630px; }sup { font-size: .55em; }
.site-footer a { color: inherit; text-underline-offset: 3px; }.site-footer a:hover, .site-footer a:focus-visible { color: var(--red); }
.legal-page { min-height: 100svh; background: var(--paper); }.legal-shell { width: min(100% - 48px, 760px); margin: 0 auto; padding: 54px 0 38px; }.legal-brand { display: inline-block; color: var(--text); font-family: "Nunito Sans", Arial, Helvetica, sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; }.legal-content { margin-top: 72px; }.legal-content h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1.1; }.legal-content section { margin-top: 48px; }.legal-content h2 { margin: 0 0 12px; font-size: 1.2rem; line-height: 1.3; }.legal-content p { margin: 0; }.legal-content a { color: var(--text); text-underline-offset: 3px; }.legal-content a:hover, .legal-content a:focus-visible { color: var(--red); }.legal-footer { margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--border); font-size: .875rem; }.legal-footer a { color: var(--text); text-underline-offset: 3px; }.legal-footer a:hover, .legal-footer a:focus-visible { color: var(--red); }
@media (max-width: 700px) { body { font-size: 14px; }.wordmark { font-size: 2rem; } }
@media (max-width: 650px) { .site-frame { width: 100%; min-height: 100svh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }.site-header { min-height: 58px; padding: 0 20px; }.contact-button { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 16px; }.hero { display: flex; flex-direction: column; width: min(100% - 38px,440px); padding-top: 35px; }.identity { margin-bottom: 21px; }.hero-logo { width: 190px; height: 142px; }.wordmark { margin-top: -2px; font-size: 2rem; }.portrait { order: 2; width: 174px; height: 200px; }.introduction { order: 3; margin-top: 20px; }.introduction p { font-size: .875rem; }.introduction p:nth-of-type(3) { display: none; }.coming-soon { margin-top: 16px; font-size: .8125rem; }.klotzomat-card { grid-template-columns: 104px 1fr; gap: 14px; width: min(100% - 38px,440px); padding: 16px; }.sorter-illustration { width: 96px; height: 88px; transform: scale(.56); transform-origin: left center; }.value-seal { display: none; }.klotzomat-copy h2 { font-size: 1rem; }.klotzomat-copy > p:last-child { display: none; }.values { gap: 10px; padding: 25px 17px; }.values h2 { font-size: .75rem; }.values p { font-size: .6875rem; }.values span { font-size: 1.75rem; }.site-footer { padding: 18px; font-size: .6875rem; } }