/* Konzept: geteilte Fläche. Links steht die Wortmarke fest auf einem Farbfeld, rechts läuft der Inhalt. */
@font-face{font-family:"Outfit";src:url(outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(hanken.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:"Hanken Grotesk";src:url(hanken-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-02AF,U+1E00-1EFF}
:root{
  --field:#123b33;--on-field:#dfeae1;--paper:#f6f7f3;--ink:#15211e;--muted:#55645e;--line:#d6dcd4;
  --display:"Outfit","Avenir Next",system-ui,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(24px,5vw,80px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:100vh}
.field{position:sticky;top:0;height:100vh;min-height:520px;background:var(--field);color:var(--on-field);padding:var(--gutter);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.mark{display:block;width:min(100%,62vh);aspect-ratio:933/897;background:currentColor;-webkit-mask:url(logo-mask.png) left top/contain no-repeat;mask:url(logo-mask.png) left top/contain no-repeat}
.mark span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mark.small{width:92px}
.imprint-line{margin:0;font-size:.875rem;line-height:1.5}

.content{padding:var(--gutter);padding-bottom:40px;display:flex;flex-direction:column;min-width:0}
h1{font:400 clamp(2.1rem,3.7vw,3.6rem)/1.08 var(--display);letter-spacing:-.022em;margin:0;max-width:17em;text-wrap:balance}
.lead{margin:28px 0 0;max-width:34em;font-size:1.1875rem;color:var(--muted)}
.write{margin-top:32px;align-self:flex-start;font:500 1.0625rem/1.3 var(--body);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

.offers{list-style:none;margin:clamp(64px,10vh,120px) 0 0;padding:0;border-bottom:1px solid var(--line)}
.offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 32px;padding:clamp(28px,4vh,44px) 0;border-top:1px solid var(--line)}
.offer h2{font:400 1.75rem/1.15 var(--display);letter-spacing:-.012em;margin:0;text-wrap:balance}
.offer p{margin:0;max-width:32em}
.offer .more{display:inline-flex;gap:.5em;align-items:baseline;margin-top:14px;font-weight:500;text-decoration:none}
.offer .more i{font-style:normal;transition:transform .2s ease}
.offer .more:hover i{transform:translateX(5px)}
.offer .more span{border-bottom:1px solid var(--line);transition:border-color .2s ease}
.offer .more:hover span{border-color:var(--ink)}
.services{list-style:none;display:flex;flex-wrap:wrap;gap:4px 20px;margin:14px 0 0;padding:0;color:var(--muted);font-size:.9375rem}

footer{margin-top:auto;padding-top:64px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:.875rem;color:var(--muted)}
footer nav{display:flex;gap:24px}
footer a{text-underline-offset:3px}
footer p{margin:0;max-width:36em}

/* Rechtstexte */
.legal{max-width:40em}
.legal h1{font-size:clamp(2rem,3vw,2.75rem)}
.legal h2{font:500 1.25rem/1.3 var(--display);margin:36px 0 8px}
.legal p,.legal address{margin:0 0 12px;font-style:normal}
.legal ul{margin:0 0 12px;padding-left:1.2em}
.back{align-self:flex-start;margin-bottom:40px;font-size:.9375rem;text-underline-offset:3px}

@media (max-width:860px){
  .split{display:block}
  .field{position:static;height:auto;min-height:0;gap:56px;padding-block:32px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
  .mark{width:min(68vw,320px)}
  .content{padding-block:48px 32px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
  .offer{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}