/* Entwurf 2 – Seit 1946. System: design/2.md (Cormorant + DM Sans, ratio 1.414, 6 colours). */
:root {
  --c-ink: #1c2230;
  --c-paper: #ffffff;
  --c-yellow: #ffe066;
  --c-red: #b3121a;
  --c-blue: #0b5796;
  --c-stone: #5b6170;

  --serif: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --fs--1: .8125rem;
  --fs-0: 1.0625rem;
  --fs-1: 1.5rem;
  --fs-2: 2.125rem;
  --fs-3: 3rem;
  --fs-4: 4.25rem;
  --fs-mast: clamp(4.25rem, 9vw, 8.5rem);
  --track-mast: -.03em;
  --track-head: -.01em;

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;
  --sp-9: 8rem;
  --gutter: 2rem;
  --side: 1.25rem;

  --r-0: 0;
  --r-pill: 999px;
}
@media (min-width: 48rem) { :root { --side: 3rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-0);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--c-yellow); color: var(--c-ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-blue); text-underline-offset: .18em; }
a:hover { color: var(--c-red); }
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.05; letter-spacing: var(--track-head); text-wrap: balance; }
h2 { font-size: var(--fs-3); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }

.wrap { width: min(80rem, 100% - var(--side) * 2); margin-inline: auto; }
.skip { position: absolute; left: var(--sp-3); top: calc(var(--sp-9) * -1); padding: var(--sp-2) var(--sp-3); background: var(--c-ink); color: var(--c-paper); z-index: 10; }
.skip:focus { top: var(--sp-3); }
.skip:hover { color: var(--c-paper); }

/* Top line */
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--c-ink); font-size: var(--fs--1); }
.top-line { font-weight: 500; }
.nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-ink); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--c-red); text-decoration: underline; }

/* Opening: the family */
.hero { display: grid; gap: var(--sp-6) var(--gutter); padding-block: var(--sp-6) var(--sp-8); }
.hero-main { display: grid; gap: var(--sp-4); align-content: start; justify-items: start; }
.hero h1 { font-size: var(--fs-4); line-height: .95; letter-spacing: var(--track-mast); max-width: 8ch; }
.lead { font-family: var(--serif); font-size: var(--fs-2); font-weight: 500; line-height: 1.15; max-width: 22ch; }
.hero-text { max-width: 34rem; }
.family { border-top: 1px solid var(--c-ink); padding-top: var(--sp-3); }
.family h2 { font-size: var(--fs-1); margin-bottom: var(--sp-3); }
.people li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--sp-1) var(--sp-3); align-items: start; padding-block: var(--sp-3); border-top: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent); }
.people li:first-child { border-top: 0; }
.people .y { font-size: var(--fs-1); }
.people b { font-family: var(--serif); font-size: var(--fs-1); font-weight: 600; display: block; line-height: 1.2; }
.people img { grid-column: 2; width: 5.5rem; margin-top: var(--sp-2); }
@media (min-width: 64rem) {
  .hero { grid-template-columns: 7fr 5fr; padding-block: var(--sp-7) var(--sp-8); }
  .hero h1 { font-size: var(--fs-mast); }
  .people li { grid-template-columns: 4.5rem 1fr 5.5rem; }
  .people img { grid-column: 3; grid-row: 1; margin-top: 0; }
}

.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-ink); border-radius: var(--r-pill);
  color: var(--c-ink); text-decoration: none; font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.pill:hover { background: var(--c-ink); color: var(--c-paper); }
.pill-red { background: var(--c-red); border-color: var(--c-red); color: var(--c-paper); }
.pill-red:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }

/* Chronik */
.chronik { padding-bottom: var(--sp-8); }
.chronik-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.chronik-head h2 { font-size: var(--fs-4); line-height: 1; }
.chronik-cols { display: none; }
.years { counter-reset: none; }
.year { display: grid; gap: var(--sp-2) var(--gutter); padding-block: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-ink); }
.y { font-family: var(--serif); font-size: var(--fs-3); font-weight: 600; line-height: 1; color: var(--c-red); font-variant-numeric: lining-nums; }
.us { max-width: 34rem; }
.world { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-1); line-height: 1.25; color: var(--c-stone); max-width: 26rem; }
.year-mark { background: var(--c-yellow); padding-inline: var(--sp-3); }
.year-photo figure { margin: var(--sp-2) 0 0; }
.year-photo img { width: 100%; max-width: 41.25rem; }
.year-photo figcaption { margin-top: var(--sp-2); font-size: var(--fs--1); color: var(--c-stone); }
@media (min-width: 44rem) { .year-photo figure { grid-column: 2 / -1; } }
.year-mark .us { font-family: var(--serif); font-size: var(--fs-1); font-weight: 600; line-height: 1.25; }
@media (min-width: 44rem) {
  .chronik-cols { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: var(--gutter); font-size: var(--fs--1); font-weight: 600; color: var(--c-stone); }
  .chronik-cols span:first-child { grid-column: 2; }
  .year { grid-template-columns: 3fr 5fr 4fr; align-items: baseline; }
  .chronik-head { grid-template-columns: 1fr; }
}

/* Generic blocks */
.block { padding-block: var(--sp-7); }
.block-rule { border-top: 1px solid var(--c-ink); }
.split { display: grid; gap: var(--sp-5) var(--gutter); }
.split-head { display: grid; gap: var(--sp-3); align-content: start; justify-items: start; max-width: 28rem; }
.price { font-weight: 600; }
@media (min-width: 64rem) { .split { grid-template-columns: 4fr 8fr; } .block { padding-block: var(--sp-8); } }

.register > div { display: grid; gap: var(--sp-1) var(--gutter); padding-block: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-ink); }
.register > div:first-child { border-top: 0; padding-top: 0; }
.register dt { font-family: var(--serif); font-size: var(--fs-1); font-weight: 600; line-height: 1.2; }
.register dt span { font-family: var(--sans); font-size: var(--fs-0); font-weight: 500; color: var(--c-stone); margin-left: var(--sp-2); }
.register dd { max-width: 38rem; }
@media (min-width: 44rem) { .register > div { grid-template-columns: 3fr 5fr; align-items: baseline; } }

address { font-style: normal; font-family: var(--serif); font-size: var(--fs-1); font-weight: 600; line-height: 1.25; }
.courses { margin-bottom: var(--sp-2); }
.courses li { padding-block: var(--sp-1); }

/* Team */
.team-title { margin-bottom: var(--sp-5); }
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }
.team img { width: 100%; max-width: 12rem; filter: grayscale(.15); margin-bottom: var(--sp-2); }
.team p { font-size: var(--fs--1); line-height: 1.45; color: var(--c-stone); max-width: 18rem; }
.team b { display: block; font-family: var(--serif); font-size: var(--fs-1); font-weight: 600; line-height: 1.15; color: var(--c-ink); margin-bottom: var(--sp-1); }
@media (min-width: 44rem) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .team { grid-template-columns: repeat(5, 1fr); gap: var(--sp-6) var(--gutter); } }

/* Footer */
.foot { border-top: 1px solid var(--c-ink); padding-block: var(--sp-6) var(--sp-7); font-size: var(--fs--1); }
.foot-mark { font-family: var(--serif); font-size: var(--fs-4); font-weight: 600; line-height: 1; letter-spacing: var(--track-mast); margin-bottom: var(--sp-5); }
.impressum h2 { font-size: var(--fs-2); margin-bottom: var(--sp-1); }
.impressum > p { margin-bottom: var(--sp-4); color: var(--c-stone); }
.impressum dl { display: grid; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-5); }
.impressum dt { font-weight: 600; }
.impressum dd { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
@media (min-width: 44rem) { .impressum dl { grid-template-columns: max-content 1fr; } .impressum dd { margin: 0; } }
.demo { max-width: 70ch; color: var(--c-stone); }