/* Übersicht der Entwürfe und Impressum. Bewusst neutral. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #F4F5F7; color: #1C2230; font-family: "Schibsted Grotesk", Arial, sans-serif; font-size: 1.1rem; line-height: 1.55; }
.wrap { width: min(100% - 2rem, 52rem); margin: 0 auto; padding-block: 3rem 5rem; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; margin: .5rem 0 1rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 .5rem; }
a { color: inherit; }
:focus-visible { outline: 3px solid #2B59C3; outline-offset: 3px; }
.note { display: inline-block; background: #FFF3C4; border: 1px solid #E2C55A; padding: .3rem .7rem; border-radius: 6px; font-size: .95rem; margin: 0; }
.intro { color: #4A5468; max-width: 34em; }
.variants { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1rem; }
.variants a {
  display: grid; grid-template-columns: 4rem 1fr; gap: .25rem 1.25rem; align-items: start;
  background: #FFFFFF; border: 1px solid #D9DDE5; border-radius: 12px; padding: 1.25rem; text-decoration: none;
}
.variants a:hover { border-color: #1C2230; }
.variants__swatch { grid-row: 1 / span 2; width: 4rem; height: 4rem; border-radius: 10px; }
.variants__swatch--v1 { background: linear-gradient(135deg, #E4ECE3 0 60%, #12332D 60% 85%, #B8261D 85%); }
.variants__swatch--v2 { background: linear-gradient(135deg, #0F2440 0 60%, #1B3A63 60% 85%, #F0A732 85%); }
.variants__swatch--v3 { background: linear-gradient(135deg, #F2CF3E 0 60%, #2A1730 60% 85%, #CFE2F5 85%); }
.variants__name { font-weight: 800; font-size: 1.25rem; }
.variants__desc { color: #4A5468; }
.legal p, .legal li { max-width: 40em; }
.legal address { font-style: normal; }
.back { display: inline-block; margin-bottom: 1.5rem; }