/* Entwurf 1 – Alle Klassen. System: design/1.md (Nunito, ratio 1.25, 6 colours). */
:root {
  --c-ink: #18233a;
  --c-paper: #ffffff;
  --c-mist: #edf3f9;
  --c-red: #d2131a;
  --c-yellow: #ffd200;
  --c-blue: #0a64ab;

  --font: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --fs--1: .85rem;
  --fs-0: 1.0625rem;
  --fs-1: 1.328rem;
  --fs-2: 1.66rem;
  --fs-3: 2.075rem;
  --fs-4: 2.594rem;
  --fs-5: clamp(2.594rem, 5.4vw, 4.05rem);
  --track-tight: -.02em;

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

  --r-1: .5rem;
  --r-2: 1.25rem;
  --r-pill: 999px;
  --focus: 3px;
}
@media (min-width: 48rem) { :root { --side: 2.5rem; } }

*, *::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(--font);
  font-size: var(--fs-0);
  line-height: 1.55;
  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: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--c-ink); }
:focus-visible { outline: var(--focus) solid var(--c-ink); outline-offset: var(--focus); box-shadow: 0 0 0 calc(var(--focus) * 2.5) var(--c-yellow); border-radius: var(--r-1); }
h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.15; letter-spacing: var(--track-tight); text-wrap: balance; }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-1); font-weight: 800; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* Header */
.top { border-bottom: 1px solid var(--c-mist); background: var(--c-paper); position: sticky; top: 0; z-index: 5; }
.top-in { display: flex; align-items: center; gap: var(--sp-5); padding-block: var(--sp-3); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--c-ink); text-decoration: none; margin-right: auto; }
.lplate { width: 2.25rem; height: 2.25rem; flex: none; }
.lp-bg { fill: var(--c-blue); }
.lp-l { fill: var(--c-paper); }
.brand-name { font-size: var(--fs-1); line-height: 1; font-weight: 600; }
.brand-name strong { font-weight: 900; }
.nav { display: none; gap: var(--sp-5); }
.nav a { color: var(--c-ink); font-weight: 700; text-decoration: none; padding: var(--sp-2) 0; }
.nav a:hover { color: var(--c-blue); text-decoration: underline; }
@media (min-width: 56rem) { .nav { display: flex; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill); border: 2px solid transparent;
  font-weight: 800; text-decoration: none; line-height: 1.2;
  transition: background-color .2s ease, color .2s ease;
}
.btn-red { background: var(--c-red); color: var(--c-paper); }
.btn-red:hover { background: color-mix(in srgb, var(--c-red) 80%, var(--c-ink)); color: var(--c-paper); }
.btn-ink { background: var(--c-ink); color: var(--c-paper); }
.btn-ink:hover { background: var(--c-blue); color: var(--c-paper); }
.btn-line { border-color: var(--c-ink); color: var(--c-ink); }
.btn-line:hover { background: var(--c-ink); color: var(--c-paper); }
.btn-small { min-height: 2.5rem; padding: var(--sp-2) var(--sp-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Hero */
.hero { display: grid; gap: var(--sp-6) var(--gutter); padding-block: var(--sp-7) var(--sp-8); }
.hero-text { display: grid; gap: var(--sp-5); align-content: center; }
.hero h1 { font-size: var(--fs-5); line-height: 1.05; }
.lede { font-size: var(--fs-1); line-height: 1.45; max-width: 34ch; }
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; max-width: 41.25rem; border-radius: var(--r-2); }
.hero-photo figcaption { margin-top: var(--sp-2); font-size: var(--fs--1); }
@media (min-width: 56rem) {
  .hero { grid-template-columns: 7fr 5fr; padding-block: var(--sp-8) var(--sp-9); }
  .index { grid-column: 1 / -1; }
}

/* Class index – the colour code */
.index { display: grid; gap: var(--sp-4); }
.index-title { font-size: var(--fs-1); font-weight: 800; letter-spacing: 0; }
.tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--sp-3); }
.tab {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 6.5rem; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-1);
  text-decoration: none;
}
.tabs .tab { transition: transform .2s ease; }
.tabs .tab:hover { transform: translateY(calc(var(--sp-1) * -1)); }
.code { font-size: var(--fs-2); font-weight: 900; line-height: 1; }
.tab-label { font-size: var(--fs--1); font-weight: 700; line-height: 1.2; }
.t-yellow { background: var(--c-yellow); color: var(--c-ink); }
.t-red { background: var(--c-red); color: var(--c-paper); }
.t-blue { background: var(--c-blue); color: var(--c-paper); }
.t-ink { background: var(--c-ink); color: var(--c-paper); }
a.tab:hover { color: inherit; }
a.t-red:hover, a.t-blue:hover, a.t-ink:hover { color: var(--c-paper); }
a.t-yellow:hover { color: var(--c-ink); }
@media (min-width: 72rem) { .tabs { grid-template-columns: repeat(7, 1fr); } }

/* Sections */
.section { padding-block: var(--sp-8); }
.section-mist { background: var(--c-mist); }
.section-head { display: grid; gap: var(--sp-3); max-width: 44rem; margin-bottom: var(--sp-7); }
.section-head p { font-size: var(--fs-1); line-height: 1.45; }
@media (min-width: 56rem) { .section { padding-block: var(--sp-9); } }

/* Class rows */
.rows { border-top: 2px solid var(--c-ink); }
.row { display: grid; gap: var(--sp-4) var(--gutter); padding-block: var(--sp-6); border-bottom: 1px solid var(--c-mist); scroll-margin-top: var(--sp-9); }
.row-tab .tab { width: 5.5rem; min-height: 5.5rem; justify-content: flex-end; }
.row-body { display: grid; gap: var(--sp-3) var(--gutter); align-content: start; }
.row h3 { font-size: var(--fs-3); font-weight: 900; letter-spacing: var(--track-tight); }
.facts { display: grid; gap: var(--sp-2); list-style: disc; padding-left: var(--sp-5); }
.facts li::marker { color: var(--c-blue); }
@media (min-width: 56rem) {
  .row { grid-template-columns: 2fr 10fr; }
  .row-body { grid-template-columns: 1fr 1fr; }
  .row-body h3 { grid-column: 1 / -1; }
  .row-body .facts:only-of-type:not(p + .facts) { grid-column: 1 / -1; columns: 2; column-gap: var(--gutter); display: block; }
  .row-body .facts:only-of-type:not(p + .facts) li { margin-bottom: var(--sp-2); }
}

.extras { display: grid; gap: var(--sp-6) var(--gutter); margin-top: var(--sp-7); }
.extras h3 { margin-bottom: var(--sp-3); }
.panel { background: var(--c-mist); border-radius: var(--r-2); padding: var(--sp-6); }
.price { display: grid; gap: var(--sp-3); justify-items: start; }
.price h3 { margin-bottom: 0; }
@media (min-width: 56rem) { .extras { grid-template-columns: 5fr 7fr; } .more { padding: var(--sp-6) 0; } }

/* Steps – a real sequence */
.steps { display: grid; gap: var(--sp-5) var(--gutter); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); border-top: 2px solid var(--c-ink); }
.steps li::before { content: counter(step); font-size: var(--fs-2); font-weight: 900; line-height: 1; color: var(--c-blue); }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Courses */
.kurse { display: grid; justify-items: start; }
.courses { width: 100%; max-width: 52rem; border-top: 2px solid var(--c-ink); margin-bottom: var(--sp-6); }
.courses li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-1) var(--sp-4); padding-block: var(--sp-4); border-bottom: 1px solid var(--c-mist); }
.tab-mini { width: 3rem; min-height: 3rem; padding: var(--sp-2); justify-content: center; align-items: center; grid-row: span 2; }
.tab-mini .code { font-size: var(--fs-0); }
.tab-none { background: var(--c-mist); }
.course-name { font-weight: 800; font-size: var(--fs-1); line-height: 1.2; }
.course-name small { display: block; font-size: var(--fs--1); font-weight: 400; }
.course-date { justify-self: start; }
@media (min-width: 40rem) {
  .courses li { grid-template-columns: auto 1fr auto; }
  .tab-mini { grid-row: auto; }
}

/* Team */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--gutter); }
.team li { display: grid; gap: var(--sp-1); align-content: start; }
.team img { border-radius: var(--r-2); margin-bottom: var(--sp-2); }
.team b { font-weight: 800; line-height: 1.25; }
.team span { font-size: var(--fs--1); }
.team q { margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--c-yellow); border-radius: var(--r-2); font-weight: 700; quotes: "„" "“"; }
@media (min-width: 40rem) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .team { grid-template-columns: repeat(5, 1fr); } }

/* Contact */
.contact { display: grid; gap: var(--sp-7) var(--gutter); align-items: start; }
.contact h2 { margin-bottom: var(--sp-5); }
address { font-style: normal; font-size: var(--fs-1); line-height: 1.45; margin-bottom: var(--sp-5); }
.contact-list { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.contact-list a { font-weight: 800; }
.hours h3 { margin-bottom: var(--sp-4); }
.hours dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-4); }
.hours dt { font-weight: 800; }
.hours dd { margin: 0; }
@media (min-width: 56rem) { .contact { grid-template-columns: 7fr 5fr; } }

/* Footer */
.foot { background: var(--c-ink); color: var(--c-paper); padding-block: var(--sp-8); font-size: var(--fs--1); }
.foot a { color: var(--c-paper); }
.foot a:hover { color: var(--c-yellow); }
.impressum h2 { font-size: var(--fs-2); margin-bottom: var(--sp-2); }
.impressum > p { margin-bottom: var(--sp-5); }
.impressum dl { display: grid; grid-template-columns: 1fr; gap: var(--sp-1) var(--sp-5); margin: 0 0 var(--sp-6); }
.impressum dt { font-weight: 800; }
.impressum dd { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
@media (min-width: 40rem) { .impressum dl { grid-template-columns: max-content 1fr; } .impressum dd { margin: 0; } }
.demo { max-width: 70ch; }