@import url('fonts/fonts.css');
:root{
  --papier:#F6F5F2; --flaeche:#EFEDE8; --tinte:#14110F; --neben:#2E2926;
  --rot:#D32619; --rot-dunkel:#A91C12; --weiss:#FFFFFF; --auf-rot:#FFE8E5;
  --anzeige:'Archivo',Arial Narrow,Arial,sans-serif;
  --text:'Hanken Grotesk',Helvetica Neue,Arial,sans-serif;
  --weg:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 18px/1.6 var(--text);text-rendering:optimizeLegibility}
a{color:var(--rot-dunkel);text-underline-offset:3px;text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:3px solid var(--tinte);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
.huelle{max-width:1180px;margin:0 auto;padding:0 24px}

/* Kopfzeile */
.kopf{position:absolute;inset:0 0 auto 0;z-index:5}
.kopf .huelle{display:flex;justify-content:space-between;align-items:center;height:76px}
.marke-klein{font:900 20px/1 var(--anzeige);font-stretch:112%;letter-spacing:-.01em;color:var(--weiss);text-decoration:none}
.sprachen-wahl{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.sprachen-wahl a{display:block;padding:8px 10px;font:700 15px/1 var(--text);color:var(--weiss);text-decoration:none;border-radius:4px}
.sprachen-wahl a[aria-current]{background:var(--weiss);color:var(--rot)}
.sprachen-wahl a:hover{background:rgba(255,255,255,.18)}

/* Hero */
.hero{background:var(--rot);color:var(--weiss);padding:128px 0 0;overflow:hidden}
.hero .huelle{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:end}
.hinweis{font:600 17px/1.45 var(--text);color:var(--auf-rot);max-width:36em;margin:0 0 28px}
.hinweis strong{color:var(--weiss)}
.wortmarke{font:900 clamp(52px,calc(9.6vw - 12px),106px)/.86 var(--anzeige);font-stretch:118%;letter-spacing:-.035em;margin:0 0 36px}
.wortmarke .punkt{display:inline-block;width:.16em;height:.16em;background:currentColor;border-radius:.02em;margin-left:.04em;vertical-align:baseline}
.leitsatz{font:500 clamp(21px,2.1vw,27px)/1.4 var(--text);max-width:24em;margin:0 0 40px}
.bald{display:inline-flex;gap:14px;align-items:center;font:700 17px/1.3 var(--text);padding:16px 22px;background:var(--weiss);color:var(--tinte);border-radius:6px;margin:0 0 96px}
.bald span{font-weight:500;color:var(--neben)}
.telefon{align-self:end;justify-self:center;width:min(340px,100%);transform:translateY(8%)}
.telefon img{border-radius:36px 36px 0 0;box-shadow:0 -2px 0 8px #1a1a1a,0 30px 80px rgba(0,0,0,.35)}

/* Einblendung beim Laden */
@media (prefers-reduced-motion:no-preference){
  .wortmarke,.leitsatz,.bald,.hinweis{animation:auf .9s var(--weg) both}
  .leitsatz{animation-delay:.08s}.bald{animation-delay:.16s}.hinweis{animation-delay:0s}
  .telefon{animation:tel 1.1s .1s var(--weg) both}
  @keyframes auf{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes tel{from{opacity:0;transform:translateY(22%)}to{opacity:1;transform:translateY(8%)}}
  .sichtbar-werden{opacity:0;transform:translateY(28px);transition:opacity .8s var(--weg),transform .8s var(--weg)}
  .sichtbar-werden.da{opacity:1;transform:none}
}

/* Abschnitte */
section{padding:112px 0}
h2{font:900 clamp(38px,5.2vw,68px)/.98 var(--anzeige);font-stretch:112%;letter-spacing:-.025em;margin:0 0 28px;max-width:14em}
h3{font:800 24px/1.2 var(--anzeige);font-stretch:108%;margin:0 0 10px}
p{margin:0 0 18px;max-width:40em}
.neben{color:var(--neben)}

/* Drei Ebenen */
.ebenen{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:6px solid var(--tinte)}
.ebene{padding:28px 32px 8px 0}
.ebene+.ebene{padding-left:32px;border-left:2px solid #D8D4CC}
.zahl{font:900 clamp(56px,6.5vw,92px)/1 var(--anzeige);font-stretch:118%;letter-spacing:-.03em;color:var(--rot);margin:0 0 8px}

/* Bildschirme */
.bildschirme{background:var(--flaeche);padding:144px 0}
.reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:64px;align-items:start}
.reihe figure{margin:0}
.reihe figure:nth-child(2n){margin-top:72px}
.reihe img{border-radius:22px;box-shadow:0 18px 50px rgba(20,17,15,.18)}
figcaption{font:600 17px/1.45 var(--text);margin-top:18px;color:var(--tinte)}
figcaption span{display:block;font-weight:400;color:var(--neben)}

/* Sprachen */
.sprachliste{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;padding:0;margin:40px 0 0;font:800 clamp(26px,3vw,40px)/1.2 var(--anzeige);font-stretch:108%}
.sprachliste li:nth-child(3n+1){color:var(--rot)}

/* Daten + Quellen */
.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.quellen{list-style:none;padding:0;margin:24px 0 0}
.quellen li{padding:14px 0;border-bottom:2px solid #D8D4CC;font-weight:600}
.quellen li span{display:block;font-weight:400;color:var(--neben);font-size:16px}

/* Kauf */
.kauf{background:var(--tinte);color:var(--weiss);padding:96px 0}
.kauf h2{color:var(--weiss)}
.kauf p{color:#EAE6E0}

/* Fuss */
.fuss{padding:56px 0 72px;font-size:16px}
.fuss .huelle{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
.fuss nav a{display:inline-block;margin:0 18px 10px 0;font-weight:600}
.fuss p{max-width:none}

/* Rechtsseiten */
.rechtsseite .kopf{position:static;background:var(--rot)}
.rechtsseite main{max-width:780px;margin:0 auto;padding:72px 24px 96px}
.rechtsseite h1{font:900 clamp(38px,5vw,60px)/1 var(--anzeige);font-stretch:112%;letter-spacing:-.02em;margin:0 0 32px}
.rechtsseite h2{font-size:28px;margin:48px 0 12px}

@media (max-width:900px){
  .hero{padding-top:108px}
  .hero .huelle{grid-template-columns:1fr}
  .telefon{width:min(300px,78%)}
  .wortmarke{font-size:min(calc((100vw - 56px)/6.4),120px)}
  .bald{margin-bottom:48px;flex-direction:column;align-items:flex-start;gap:4px}
  .ebenen{grid-template-columns:1fr}
  .ebene+.ebene{padding-left:0;border-left:0;border-top:2px solid #D8D4CC}
  .reihe{grid-template-columns:1fr 1fr;gap:20px}
  .reihe figure:nth-child(2n){margin-top:40px}
  .zweispaltig,.fuss .huelle{grid-template-columns:1fr;gap:40px}
  section{padding:80px 0}.bildschirme{padding:96px 0}
}
@media (max-width:420px){
  .sprachen-wahl{gap:0}
  .sprachen-wahl a{padding:8px 6px;font-size:14px}
  .marke-klein{font-size:15px}
}
.nw{white-space:nowrap}