@font-face{font-family:"Inter";src:url("inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Frank Ruhl Libre";src:url("frank-ruhl-libre-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --rot:#A1232B;
  --creme:#FDF4E3;
  --text:#2E2A28;
  --grau:#B9B2AC;
  --weiss:#FFFFFF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--weiss);color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.75;letter-spacing:.01em;
}
.streifen{background:var(--creme) url("streifen.webp") center/cover no-repeat}

/* Kopf */
.kopf{padding:36px 56px}
.kopf a{display:inline-block}
.kopf img{display:block;height:68px;width:auto}

/* Inhalt */
main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:72px 24px 88px}
.herz{display:block;width:56px;height:auto;margin:0 auto 20px}
h1{font-family:"Frank Ruhl Libre",Georgia,serif;font-weight:500;color:var(--rot);
  font-size:clamp(34px,5.4vw,52px);line-height:1.15;text-align:center;text-wrap:balance;margin:0 0 12px}
.unter{text-align:center;font-size:19px;margin:0 0 72px}
.label{font-size:clamp(20px,2.4vw,26px);text-transform:uppercase;letter-spacing:.03em;color:var(--rot);line-height:1.3;margin:0 0 20px}
p{margin:0 0 18px}

.zeile{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-bottom:64px}
.zeile .links{text-align:right}
.laeden{display:grid;grid-template-columns:auto auto;justify-content:start;gap:24px 40px}
.laden strong{display:block;font-weight:600;white-space:nowrap}
a{color:var(--rot);text-underline-offset:3px}
a:hover{color:var(--text)}

/* Fuß */
.fuss{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;padding:40px 56px 36px;font-size:15px;color:var(--rot)}
.fuss img{width:48px;height:auto;display:block}
.fuss .mitte{text-align:center;line-height:1.5}
.fuss nav{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fuss nav a{text-decoration:none}
.fuss nav a:hover{text-decoration:underline}

/* Rechtsseiten */
.recht{max-width:720px}
.recht h1{text-align:left;font-size:clamp(30px,4.5vw,40px);margin-bottom:32px}
.recht h2{font-size:18px;text-transform:uppercase;letter-spacing:.03em;font-weight:400;color:var(--rot);margin:36px 0 10px}

@media (max-width:720px){
  .kopf{padding:24px 16px}
  .kopf img{height:48px}
  main{padding:48px 16px 64px}
  .unter{margin-bottom:48px}
  .zeile{grid-template-columns:1fr;gap:8px;margin-bottom:48px}
  .zeile .links{text-align:left}
  .laeden{grid-template-columns:1fr;gap:16px}
  .fuss{grid-template-columns:1fr 1fr;padding:32px 16px 28px}
  .fuss .mitte{grid-column:1 / -1;grid-row:2;text-align:left}
}