@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..600&display=swap');

/* ==========================================================================
   Yousefi Web & Business Akademie — „Block und Tafel“
   Papier (Block) = für Sie gebaut · Tafel = selbst lernen · Marker = Haken
   Grundeinheit: ein Kästchen (--k)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --block: #F1F4EC;
  --karo: #C9D6C3;
  --graphit: #1E2B25;
  --bleistift: #4E5C54;
  --tafel: #1F3D33;
  --marker: #C41E5E;

  --karo-fein: #DEE6D9;
  --papier-hell: #FAFBF7;
  --marker-dunkel: #9E1549;
  --marker-hell: #F59BBE;
  --marker-hauch: #F9E3EC;
  --tafel-hauch: #E1EBDD;
  --kreide-linie: rgba(241, 244, 236, 0.07);
  --kreide-rahmen: rgba(241, 244, 236, 0.34);

  --schrift-kopf: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --k: 1.5rem;
  --rand: 1.25rem;
  --maxw: 75rem;
  --abstand: clamp(4.5rem, 2.25rem + 6vw, 9rem);

  --t-titel: clamp(2.5rem, 1.2rem + 4.6vw, 5.5rem);
  --t-1: clamp(2rem, 1.25rem + 2.6vw, 3.5rem);
  --t-2: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --t-3: 1.1875rem;
  --t-text: 1.125rem;
  --t-klein: 0.9375rem;
  --t-ui: 1rem;

  --strich: 2px;
  --kante: 3px;
  --ecke: 3px;

  --kaestchen-leer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='16' height='16' rx='1' fill='none' stroke='%231E2B25' stroke-width='2'/%3E%3C/svg%3E");
  --kaestchen-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='16' height='16' rx='1' fill='none' stroke='%231E2B25' stroke-width='2'/%3E%3Cpath d='M6.5 12.5l4.5 4.5L22.5 2.5' fill='none' stroke='%23C41E5E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kaestchen-haken-tafel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='16' height='16' rx='1' fill='none' stroke='%23F1F4EC' stroke-width='2'/%3E%3Cpath d='M6.5 12.5l4.5 4.5L22.5 2.5' fill='none' stroke='%23F59BBE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nur-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19.5 6' fill='none' stroke='%23C41E5E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (min-width: 48rem) {
  :root { --rand: 2.25rem; }
}

@media (min-width: 90rem) {
  :root { --rand: 3rem; }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4,
p, ul, ol, dl, dd,
figure, blockquote, fieldset { margin: 0; }

ul, ol, fieldset, legend { padding: 0; }

img, svg { display: block; max-width: 100%; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

table { border-collapse: collapse; }

/* ---------- Grundlage ---------- */
body {
  min-height: 100vh;
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  line-height: 1.6;
  font-optical-sizing: auto;
  color: var(--graphit);
  background-color: var(--block);
  background-image:
    linear-gradient(var(--karo-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--karo-fein) 1px, transparent 1px);
  background-size: var(--k) var(--k);
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-kopf);
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-titel);
  font-weight: 780;
  font-stretch: 76%;
  line-height: 0.94;
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--t-1);
  font-weight: 720;
  font-stretch: 82%;
  line-height: 1;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--t-2);
  font-weight: 640;
  font-stretch: 92%;
  line-height: 1.15;
}

h4 {
  font-size: var(--t-3);
  font-weight: 640;
  line-height: 1.3;
}

strong { font-weight: 650; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--marker);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 0.15s ease, color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

a:hover { text-decoration-thickness: 3px; }

:focus-visible {
  outline: 3px solid var(--marker);
  outline-offset: 3px;
}

.flaeche-tafel :focus-visible,
.fuss :focus-visible,
.weiche__seite--gelernt :focus-visible { outline-color: var(--marker-hell); }

::selection {
  background: var(--marker);
  color: #fff;
}

.wrap {
  width: min(100% - 2 * var(--rand), var(--maxw));
  margin-inline: auto;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--rand);
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  font-family: var(--schrift-kopf);
  font-weight: 650;
  background: var(--graphit);
  color: var(--block);
  text-decoration: none;
  transform: translateY(-120%);
}

.skip-link:focus { transform: translateY(0.5rem); }

/* Sektionsabstand — die einzige Stelle */
main > section {
  padding-block: var(--sektion-oben, var(--abstand)) var(--sektion-unten, var(--abstand));
}

.vorspann {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 36rem;
}

.abschnittskopf {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
}

.abschnittskopf p { max-width: 38rem; }

/* ---------- Kopf und Reiter ---------- */
.kopf {
  position: relative;
  z-index: 20;
  background: var(--block);
  border-bottom: var(--kante) solid var(--graphit);
}

.kopf__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k);
  min-height: 4.5rem;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--graphit);
  font-family: var(--schrift-kopf);
  line-height: 1;
  text-decoration: none;
}

.marke__zeichen {
  flex: none;
  width: 2.125rem;
  height: 2.125rem;
  overflow: visible;
}

.marke__kasten {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

.marke__haken {
  fill: none;
  stroke: var(--marker);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.marke__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.marke__name {
  font-size: 1.625rem;
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: -0.01em;
}

.marke__zusatz {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bleistift);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--schrift-kopf);
  font-size: var(--t-ui);
  font-weight: 620;
  background: var(--papier-hell);
  border: var(--strich) solid var(--graphit);
  border-radius: var(--ecke);
  cursor: pointer;
}

.nav-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.nav-toggle__zu { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__auf { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__zu { display: block; }

#site-nav {
  display: none;
  position: absolute;
  top: calc(100% + var(--kante));
  left: calc(-1 * var(--rand));
  right: calc(-1 * var(--rand));
  padding: var(--k) var(--rand);
  background: var(--block);
  border-bottom: var(--kante) solid var(--graphit);
}

#site-nav[data-open="true"] { display: block; }

.reiter {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.reiter__link {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.625rem 1rem;
  font-family: var(--schrift-kopf);
  font-size: 1.125rem;
  font-weight: 620;
  line-height: 1.15;
  color: var(--graphit);
  text-decoration: none;
  background: var(--papier-hell);
  border: var(--strich) solid var(--graphit);
  border-left-width: 0.75rem;
  border-radius: var(--ecke);
}

.reiter__link--lernen {
  background: var(--tafel);
  color: var(--block);
}

.reiter__link--gespraech {
  background: var(--marker);
  border-color: var(--marker-dunkel);
  color: #fff;
}

.reiter__link:hover { text-decoration: none; }
.reiter__link--gebaut:hover { background: var(--block); }
.reiter__link--lernen:hover { background: #29503F; }
.reiter__link--gespraech:hover { background: var(--marker-dunkel); }

.reiter__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

@media (min-width: 48rem) {
  .nav-toggle { display: none; }

  #site-nav,
  #site-nav[data-open="true"] {
    display: block;
    left: auto;
    right: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  .reiter {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .reiter__link {
    min-height: 2.75rem;
    padding: 0.5rem 1rem 0.625rem;
    font-size: 1rem;
    border-top: 0;
    border-left-width: var(--strich);
    border-radius: 0 0 var(--ecke) var(--ecke);
    transition: padding 0.15s ease, background-color 0.15s ease;
  }

  .reiter__link:hover,
  .reiter__link[aria-current="page"] { padding-bottom: 0.9375rem; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--schrift-kopf);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  border: var(--strich) solid transparent;
  border-radius: var(--ecke);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.knopf:hover { text-decoration: none; }

.knopf--marker {
  background: var(--marker);
  border-color: var(--marker);
  color: #fff;
}

.knopf--marker:hover {
  background: var(--marker-dunkel);
  border-color: var(--marker-dunkel);
}

.knopf--graphit {
  background: transparent;
  border-color: var(--graphit);
  color: var(--graphit);
}

.knopf--graphit:hover {
  background: var(--graphit);
  color: var(--block);
}

.knopf--kreide {
  background: var(--block);
  border-color: var(--block);
  color: var(--tafel);
}

.knopf--kreide:hover {
  background: transparent;
  color: var(--block);
}

.knopf[disabled],
.knopf[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.telefonzeile {
  font-family: var(--schrift-kopf);
  font-size: var(--t-ui);
  font-weight: 560;
}

/* ---------- Tafelfläche ---------- */
.flaeche-tafel {
  background-color: var(--tafel);
  background-image:
    linear-gradient(var(--kreide-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--kreide-linie) 1px, transparent 1px);
  background-size: var(--k) var(--k);
  color: var(--block);
}

.flaeche-tafel a { text-decoration-color: var(--marker-hell); }

/* ---------- Weiche (Hero Startseite) ---------- */
.weiche {
  --sektion-oben: calc(var(--abstand) * 0.55);
  --sektion-unten: 0px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: [voll-start] var(--rand) [inhalt-start] minmax(0, 1fr) [inhalt-ende] var(--rand) [voll-ende];
}

.weiche__titel {
  grid-column: inhalt-start / inhalt-ende;
  display: grid;
}

.weiche__titel span { display: block; }

.weiche__seite {
  grid-column: inhalt-start / inhalt-ende;
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding-block: calc(var(--k) * 1.5) calc(var(--k) * 2.5);
}

.weiche__seite h2 {
  font-size: var(--t-2);
  font-stretch: 90%;
  font-weight: 680;
  line-height: 1.15;
}

.weiche__seite p { max-width: 34rem; }

.weiche__seite--gelernt {
  grid-column: voll-start / voll-ende;
  padding-inline: var(--rand);
  background-color: var(--tafel);
  background-image:
    linear-gradient(var(--kreide-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--kreide-linie) 1px, transparent 1px);
  background-size: var(--k) var(--k);
  color: var(--block);
}

.weiche__seite--gelernt a { text-decoration-color: var(--marker-hell); }

.weiche__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.625rem;
}

@media (min-width: 64rem) {
  .weiche {
    --sektion-oben: calc(4.5rem + var(--abstand) * 0.45);
    --sektion-unten: calc(var(--abstand) * 0.75);
    grid-template-columns:
      [voll-start] minmax(var(--rand), 1fr)
      [inhalt-start] minmax(0, calc(var(--maxw) / 2))
      [mitte] minmax(0, calc(var(--maxw) / 2))
      [inhalt-ende] minmax(var(--rand), 1fr)
      [voll-ende];
  }

  .weiche::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 4.5rem;
    right: 0;
    bottom: 0;
    left: 50%;
    background-color: var(--tafel);
    background-image:
      linear-gradient(var(--kreide-linie) 1px, transparent 1px),
      linear-gradient(90deg, var(--kreide-linie) 1px, transparent 1px);
    background-size: var(--k) var(--k);
  }

  .weiche__titel {
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }

  .weiche__titel span:first-child { padding-right: calc(var(--k) * 2); }

  .weiche__titel span:last-child {
    padding-left: calc(var(--k) * 2);
    color: var(--block);
  }

  .weiche__seite {
    grid-row: 2;
    padding-block: calc(var(--k) * 2) 0;
  }

  .weiche__seite--gebaut {
    grid-column: inhalt-start / mitte;
    padding-right: calc(var(--k) * 2);
  }

  .weiche__seite--gelernt {
    grid-column: mitte / inhalt-ende;
    padding-inline: calc(var(--k) * 2) 0;
    background: none;
  }
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf {
  --sektion-oben: calc(var(--abstand) * 0.7);
  --sektion-unten: calc(var(--abstand) * 0.6);
  border-bottom: var(--kante) solid var(--graphit);
}

.seitenkopf__inner {
  display: grid;
  gap: calc(var(--k) * 0.75);
  max-width: 56rem;
}

.seitenkopf--lernen {
  background-color: var(--tafel);
  background-image:
    linear-gradient(var(--kreide-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--kreide-linie) 1px, transparent 1px);
  background-size: var(--k) var(--k);
  color: var(--block);
}

.seitenkopf--lernen :focus-visible { outline-color: var(--marker-hell); }

/* ---------- Checkliste (Bestandsaufnahme) ---------- */
.bestand__raster {
  display: grid;
  gap: calc(var(--k) * 2);
}

.bestand__text {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.bestand__text p { max-width: 34rem; }

.tickliste {
  counter-reset: stand;
  min-width: 0;
  background: var(--papier-hell);
  border: var(--strich) solid var(--graphit);
  border-radius: var(--ecke);
}

.tickliste__punkt {
  position: relative;
  display: grid;
  grid-template-columns: var(--k) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--karo);
}

.tickliste__punkt:last-of-type { border-bottom: 0; }

.tickliste__box {
  appearance: none;
  -webkit-appearance: none;
  width: var(--k);
  height: var(--k);
  margin: 0.125rem 0 0;
  background: var(--papier-hell);
  border: var(--strich) solid var(--graphit);
  border-radius: 2px;
  cursor: pointer;
}

.tickliste__box:checked { counter-increment: stand; }

.tickliste__box:hover { background: var(--block); }

.tickliste__label { cursor: pointer; }

.tickliste__satz {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.tickliste__bezug {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--schrift-kopf);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--bleistift);
}

.haken {
  position: absolute;
  left: 1.125rem;
  top: 0.375rem;
  width: 2.25rem;
  height: 2.25rem;
  overflow: visible;
  pointer-events: none;
}

.haken path {
  fill: none;
  stroke: var(--marker);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
}

.tickliste__box:checked + .tickliste__label .haken path { stroke-dashoffset: 0; }

.tickliste__summe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  padding: 0.875rem 1.25rem 1.125rem;
  font-family: var(--schrift-kopf);
  font-size: var(--t-ui);
  font-weight: 560;
  border-top: 4px double var(--graphit);
}

.tickliste__zahl::before {
  content: counter(stand);
  font-size: 2.5rem;
  font-weight: 780;
  font-stretch: 78%;
  line-height: 1;
  color: var(--marker);
}

@media (min-width: 64rem) {
  .bestand__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* ---------- Kontenblatt (Leistungen) ---------- */
.kontenblatt {
  margin-top: calc(var(--k) * 2);
  border-top: var(--kante) solid var(--graphit);
}

.kontenblatt__kopfzeile { display: none; }

.kontenblatt__zeile {
  display: grid;
  gap: 0.75rem;
  padding-block: var(--k);
  border-bottom: 1px solid var(--karo);
}

.kontenblatt__zeile h3 { font-size: var(--t-2); }

.kontenblatt__zeile p { max-width: 38rem; }

.kontenblatt__ergebnis {
  padding-left: calc(var(--k) + 0.625rem);
  font-family: var(--schrift-kopf);
  font-size: 1.0625rem;
  font-weight: 540;
  line-height: 1.4;
  background: var(--kaestchen-haken) left 0.0625rem / var(--k) var(--k) no-repeat;
}

.kontenblatt__mehr { margin-top: calc(var(--k) * 1.25); }

@media (min-width: 64rem) {
  .kontenblatt__kopfzeile,
  .kontenblatt__zeile {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
    gap: calc(var(--k) * 1.5);
  }

  .kontenblatt__kopfzeile {
    display: grid;
    padding-block: 0.625rem;
    font-family: var(--schrift-kopf);
    font-size: 0.9375rem;
    font-weight: 620;
    color: var(--bleistift);
    border-bottom: 4px double var(--graphit);
  }
}

/* ---------- Kurshefte ---------- */
.hefte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--k);
  margin-top: calc(var(--k) * 2);
}

.heft {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: calc(var(--k) * 1.25) var(--k) calc(var(--k) * 1.25) calc(var(--k) * 1.25);
  border: var(--strich) solid var(--kreide-rahmen);
  border-left: 0.75rem solid var(--block);
  border-radius: 0 var(--ecke) var(--ecke) 0;
}

.heft p { max-width: 40rem; }

.heft .knopf,
.heft__link { justify-self: start; }

.heft__link {
  font-family: var(--schrift-kopf);
  font-weight: 620;
}

.zehn-tage {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 40rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--kreide-rahmen);
  border-left: 1px solid var(--kreide-rahmen);
}

.zehn-tage li {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-family: var(--schrift-kopf);
  font-size: 0.9375rem;
  font-weight: 620;
  color: var(--karo);
  border-right: 1px solid var(--kreide-rahmen);
  border-bottom: 1px solid var(--kreide-rahmen);
}

.zehn-tage li:last-child {
  background: var(--block);
  color: var(--tafel);
}

.zehn-tage svg {
  position: absolute;
  inset: -12% -18% auto auto;
  width: 70%;
  height: 70%;
  overflow: visible;
}

.zehn-tage path {
  fill: none;
  stroke: var(--marker);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gruppensatz {
  margin-top: calc(var(--k) * 2);
  padding-top: var(--k);
  max-width: 50rem;
  font-family: var(--schrift-kopf);
  font-size: var(--t-2);
  font-weight: 600;
  font-stretch: 90%;
  line-height: 1.25;
  border-top: var(--strich) solid var(--kreide-rahmen);
}

.abschnitt-aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin-top: calc(var(--k) * 1.5);
}

@media (min-width: 30rem) {
  .zehn-tage { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .hefte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heft--breit { grid-column: 1 / -1; }
}

/* ---------- Lernpfad ---------- */
.pfad {
  list-style: none;
  display: grid;
  gap: calc(var(--k) * 1.5);
  margin-top: calc(var(--k) * 2);
}

.pfad__schritt {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-content: start;
  gap: 1rem;
}

.pfad__schritt:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.5rem - 1.5px);
  top: 3rem;
  bottom: calc(-1 * var(--k) * 1.5);
  border-left: var(--kante) solid var(--graphit);
}

.pfad__nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-family: var(--schrift-kopf);
  font-size: 1.375rem;
  font-weight: 780;
  background: var(--papier-hell);
  border: var(--kante) solid var(--graphit);
}

.pfad__inhalt {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.pfad__inhalt h3 { font-size: var(--t-2); }

.pfad__gabel {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.pfad__weg {
  display: block;
  padding: 0.625rem 0.875rem;
  font-family: var(--schrift-kopf);
  font-size: var(--t-ui);
  font-weight: 620;
  line-height: 1.25;
  text-decoration: none;
  border: var(--strich) solid var(--graphit);
  border-radius: var(--ecke);
}

.pfad__weg--kurs {
  background: var(--tafel);
  color: var(--block);
}

.pfad__weg--kurs:hover { background: #29503F; }

.pfad__weg--begleitung { background: var(--papier-hell); }

.pfad__weg--begleitung:hover { background: var(--block); }

@media (min-width: 64rem) {
  .pfad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--k);
  }

  .pfad__schritt {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .pfad__schritt:not(:last-child)::after {
    left: 3rem;
    right: calc(-1 * var(--k));
    top: calc(1.5rem - 1.5px);
    bottom: auto;
    border-left: 0;
    border-top: var(--kante) solid var(--graphit);
  }

  .pfad__inhalt { padding-right: 0.5rem; }

  .pfad__inhalt h3 { hyphens: manual; }
}

/* ---------- FAQ ---------- */
.fragen-raster {
  display: grid;
  gap: calc(var(--k) * 1.5);
}

.fragen {
  border-top: var(--kante) solid var(--graphit);
}

.frage { border-bottom: 1px solid var(--karo); }

.frage summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--k);
  gap: 1rem;
  align-items: start;
  padding-block: 1.125rem;
  font-family: var(--schrift-kopf);
  font-size: 1.25rem;
  font-weight: 620;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.frage summary::-webkit-details-marker { display: none; }

.frage summary::after {
  content: "";
  width: var(--k);
  height: var(--k);
  margin-top: 0.0625rem;
  border: var(--strich) solid var(--graphit);
  background:
    linear-gradient(var(--graphit), var(--graphit)) center / 10px 2px no-repeat,
    linear-gradient(var(--graphit), var(--graphit)) center / 2px 10px no-repeat,
    var(--papier-hell);
}

.frage[open] summary::after {
  background:
    linear-gradient(var(--graphit), var(--graphit)) center / 10px 2px no-repeat,
    var(--papier-hell);
}

.frage summary:hover { color: var(--marker-dunkel); }

.frage__antwort {
  max-width: 62ch;
  padding: 0 calc(var(--k) + 1rem) 1.5rem 0;
}

.frage__antwort p + p { margin-top: 0.75rem; }

@media (min-width: 64rem) {
  .fragen-raster {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: calc(var(--k) * 2);
    align-items: start;
  }
}

/* ---------- Zettel (CTA) und Kontaktblock ---------- */
.notiz {
  display: grid;
  gap: calc(var(--k) * 1.5);
  padding: calc(var(--k) * 1.25);
  background: var(--papier-hell);
  border: var(--kante) solid var(--graphit);
  border-radius: var(--ecke);
}

.notiz__text {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.notiz__text p { max-width: 40rem; }

.notiz__nummer {
  display: inline-block;
  font-family: var(--schrift-kopf);
  font-size: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);
  font-weight: 780;
  font-stretch: 78%;
  line-height: 1.05;
  text-decoration: none;
  white-space: nowrap;
}

.notiz__nummer:hover {
  text-decoration: underline;
  text-decoration-color: var(--marker);
  text-decoration-thickness: 3px;
}

.kontaktblock {
  display: grid;
  gap: 1.125rem;
  align-content: start;
}

.kontaktblock div { display: grid; gap: 0.125rem; }

.kontaktblock dt {
  font-family: var(--schrift-kopf);
  font-size: 0.9375rem;
  font-weight: 620;
  color: var(--bleistift);
}

.kontaktblock dd {
  font-size: 1.125rem;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.flaeche-tafel .kontaktblock dt { color: var(--karo); }

@media (min-width: 64rem) {
  .notiz {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: calc(var(--k) * 3);
    padding: calc(var(--k) * 2.5) calc(var(--k) * 3);
  }

  .notiz .kontaktblock {
    padding-left: calc(var(--k) * 2);
    border-left: 1px solid var(--karo);
  }
}

/* ---------- Fließtext, Listen, Kacheln, Hinweis ---------- */
.fliesstext { max-width: 68ch; }

.fliesstext > * + * { margin-top: 1rem; }

.fliesstext h2 {
  margin-top: 2.75rem;
  font-size: var(--t-2);
  font-weight: 700;
  font-stretch: 86%;
  line-height: 1.12;
}

.fliesstext h3 {
  margin-top: 2rem;
  font-size: var(--t-3);
  font-stretch: 100%;
}

.fliesstext > h2:first-child,
.fliesstext > h3:first-child { margin-top: 0; }

.fliesstext ol {
  padding-left: 1.75rem;
}

.fliesstext ol li::marker {
  font-family: var(--schrift-kopf);
  font-weight: 700;
}

.fliesstext ul:not([class]) { list-style: none; }

.fliesstext ul:not([class]) li {
  position: relative;
  padding-left: 1.5rem;
}

.fliesstext ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.75rem;
  border-top: var(--strich) solid var(--graphit);
}

.fliesstext li + li { margin-top: 0.375rem; }

.ergebnisliste,
.aufgabenliste {
  list-style: none;
  display: grid;
  gap: 0.625rem;
}

.ergebnisliste li,
.aufgabenliste li {
  padding-left: calc(var(--k) + 0.75rem);
  background: var(--kaestchen-haken) left 0.125rem / var(--k) var(--k) no-repeat;
}

.aufgabenliste li { background-image: var(--kaestchen-leer); }

.flaeche-tafel .ergebnisliste li,
.seitenkopf--lernen .ergebnisliste li { background-image: var(--kaestchen-haken-tafel); }

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: calc(var(--k) * 1.5) var(--k);
  margin-top: calc(var(--k) * 1.5);
}

.kachel {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: var(--k);
  border-top: var(--kante) solid var(--graphit);
}

.kachel h3 { font-size: var(--t-3); font-stretch: 96%; }

.flaeche-tafel .kachel { border-top-color: var(--block); }

.hinweis {
  max-width: 48rem;
  padding: 1rem 1.25rem;
  background: var(--papier-hell);
  border: var(--strich) dashed var(--graphit);
  border-radius: var(--ecke);
}

.hinweis > * + * { margin-top: 0.5rem; }

.hinweis__titel {
  font-family: var(--schrift-kopf);
  font-weight: 650;
}

/* ---------- Tabelle (Kassenbuch) ---------- */
.tabelle-rahmen {
  max-width: 100%;
  margin-top: calc(var(--k) * 1.5);
  overflow-x: auto;
  border-top: var(--kante) solid var(--graphit);
}

.tabelle {
  width: 100%;
  min-width: 36rem;
  font-size: 1rem;
  line-height: 1.45;
}

.tabelle caption {
  padding-block: 0.75rem;
  font-family: var(--schrift-kopf);
  font-weight: 650;
  text-align: left;
}

.tabelle th,
.tabelle td {
  padding: 0.75rem 1.25rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--karo);
}

.tabelle thead th {
  font-family: var(--schrift-kopf);
  font-size: 0.9375rem;
  font-weight: 620;
  color: var(--bleistift);
  border-bottom: 4px double var(--graphit);
}

.tabelle tbody th {
  font-family: var(--schrift-kopf);
  font-size: 1.0625rem;
  font-weight: 640;
}

.tabelle .zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabelle tfoot th,
.tabelle tfoot td {
  font-family: var(--schrift-kopf);
  font-weight: 650;
  border-top: 4px double var(--graphit);
  border-bottom: 0;
}

/* ---------- Formular ---------- */
.form {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
}

.form__field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.form__field label,
.form__legende {
  font-family: var(--schrift-kopf);
  font-size: var(--t-ui);
  font-weight: 620;
}

.form__hilfe {
  font-size: var(--t-klein);
  line-height: 1.45;
  color: var(--bleistift);
}

.form__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.4;
  background: var(--papier-hell);
  border: var(--strich) solid var(--graphit);
  border-radius: var(--ecke);
}

select.form__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231E2B25' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  cursor: pointer;
}

textarea.form__input {
  min-height: 10.5rem;
  line-height: 1.75rem;
  resize: vertical;
  background-image: linear-gradient(transparent calc(1.75rem - 1px), var(--karo-fein) calc(1.75rem - 1px));
  background-size: 100% 1.75rem;
  background-position: 0 0.625rem;
  background-attachment: local;
}

.form__input::placeholder { color: var(--bleistift); }

.form__input:hover { border-color: var(--bleistift); }

.form__input:focus-visible {
  outline: 3px solid var(--marker);
  outline-offset: 2px;
  border-color: var(--graphit);
}

.form__input[aria-invalid="true"] {
  border-color: var(--marker);
  border-left-width: 0.5rem;
}

.form__error {
  font-family: var(--schrift-kopf);
  font-size: var(--t-klein);
  font-weight: 600;
  line-height: 1.35;
  color: var(--marker-dunkel);
}

.form__error:empty { display: none; }

.form__check {
  display: grid;
  grid-template-columns: var(--k) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.form__check input {
  appearance: none;
  -webkit-appearance: none;
  width: var(--k);
  height: var(--k);
  margin: 0.125rem 0 0;
  background: var(--papier-hell) center / 1.25rem no-repeat;
  border: var(--strich) solid var(--graphit);
  border-radius: 2px;
  cursor: pointer;
}

.form__check input:checked { background-image: var(--nur-haken); }

.form__check label {
  font-family: var(--schrift-text);
  font-size: var(--t-klein);
  font-weight: 400;
  line-height: 1.5;
}

.form__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.form__status {
  padding: 0.875rem 1rem;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  line-height: 1.4;
  background: var(--papier-hell);
  border-left: 0.5rem solid var(--bleistift);
}

.form__status:empty { display: none; }

.form__status[data-state="pending"] { border-left-color: var(--bleistift); }

.form__status[data-state="success"] {
  background: var(--tafel-hauch);
  border-left-color: var(--tafel);
}

.form__status[data-state="error"] {
  background: var(--marker-hauch);
  border-left-color: var(--marker);
  color: var(--marker-dunkel);
}

.kontakt-raster {
  display: grid;
  gap: calc(var(--k) * 2);
}

@media (min-width: 64rem) {
  .kontakt-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: calc(var(--k) * 3);
    align-items: start;
  }
}

/* ---------- Karte ---------- */
.karte {
  aspect-ratio: 4 / 3;
  border: var(--kante) solid var(--graphit);
  background: var(--papier-hell);
}

.karte iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Rechtstext ---------- */
.rechtstext {
  max-width: 68ch;
  font-size: 1.0625rem;
}

.rechtstext > * + * { margin-top: 0.875rem; }

.rechtstext h2 {
  margin-top: 2.5rem;
  font-size: var(--t-3);
  font-weight: 680;
  font-stretch: 94%;
  line-height: 1.25;
  padding-top: 0.75rem;
  border-top: 1px solid var(--karo);
}

.rechtstext h3 {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  font-stretch: 100%;
}

.rechtstext address { font-style: normal; }

.luecke {
  padding-inline: 0.25rem;
  font-family: var(--schrift-kopf);
  font-size: 0.9375em;
  font-weight: 600;
  background: var(--marker-hauch);
  border-bottom: var(--strich) dashed var(--marker);
}

/* ---------- Fuß ---------- */
.fuss {
  padding-block: calc(var(--k) * 2.5) calc(var(--k) * 1.5);
  font-size: var(--t-klein);
  line-height: 1.55;
  background: var(--graphit);
  color: var(--block);
}

.fuss a { text-decoration-color: var(--marker-hell); }

.fuss .marke { color: var(--block); }
.fuss .marke__haken { stroke: var(--marker-hell); }
.fuss .marke__zusatz { color: var(--karo); }

.fuss__raster {
  display: grid;
  gap: calc(var(--k) * 1.5) calc(var(--k) * 2);
}

.fuss__marke {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.fuss__marke p { max-width: 30rem; color: var(--karo); }

.fuss__titel {
  margin-bottom: 0.5rem;
  font-family: var(--schrift-kopf);
  font-size: var(--t-ui);
  font-weight: 650;
}

.fuss ul { list-style: none; }

.fuss li + li { margin-top: 0.375rem; }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: calc(var(--k) * 2);
  padding-top: var(--k);
  color: var(--karo);
  border-top: 1px solid rgba(241, 244, 236, 0.22);
}

.fuss__unten ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.fuss__unten li + li { margin-top: 0; }

@media (min-width: 48rem) {
  .fuss__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Styleguide-Hilfen ---------- */
.muster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--k);
  list-style: none;
  margin-top: calc(var(--k) * 1.5);
}

.muster__farbe {
  display: grid;
  gap: 0.25rem;
  font-family: var(--schrift-kopf);
  font-size: var(--t-klein);
}

.muster__farbe::before {
  content: "";
  height: 4.5rem;
  margin-bottom: 0.5rem;
  background: var(--farbe);
  border: var(--strich) solid var(--graphit);
}

.muster__farbe code { font-size: 0.875rem; }

.skala {
  display: grid;
  gap: calc(var(--k) * 1.25);
  margin-top: calc(var(--k) * 1.5);
}

.skala__zeile {
  display: grid;
  gap: 0.25rem;
  padding-bottom: var(--k);
  border-bottom: 1px solid var(--karo);
}

.titelprobe {
  font-family: var(--schrift-kopf);
  font-size: var(--t-titel);
  font-weight: 780;
  font-stretch: 76%;
  line-height: 0.94;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.skala__angabe {
  font-family: var(--schrift-kopf);
  font-size: 0.875rem;
  color: var(--bleistift);
}

.vorfuehrung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k);
  margin-top: calc(var(--k) * 1.25);
}

.vorfuehrung--tafel { padding: var(--k); }

.teil + .teil { margin-top: calc(var(--k) * 3); }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .haken path { transition: stroke-dashoffset 0.28s cubic-bezier(0.6, 0, 0.3, 1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Hoher Kontrast ---------- */
@media (forced-colors: active) {
  .tickliste__box:checked { background: Highlight; }
  .weiche::before { display: none; }
}

/* Telefonnummern im Fließtext nicht umbrechen */
a[href^="tel:"] { white-space: nowrap; }

/* === leistungen: Abschnitt mit Seitenspalte === */
.seitenspalte {
  display: grid;
  gap: calc(var(--k) * 1.5);
}

.abschnittskopf + .fliesstext { margin-top: calc(var(--k) * 1.5); }

@media (min-width: 64rem) {
  .seitenspalte {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: calc(var(--k) * 2);
    align-items: start;
  }
}

/* === leistungen: Felderliste === */
.felderliste {
  gap: calc(var(--k) * 1.25) calc(var(--k) * 2);
  margin-top: calc(var(--k) * 2);
  padding-top: calc(var(--k) * 1.25);
  border-top: var(--kante) solid var(--graphit);
}

.felderliste li {
  display: grid;
  gap: 0.375rem;
  align-content: start;
  background-position: left 0.1875rem;
}

.felderliste h3 { font-size: var(--t-2); }

.felderliste p { max-width: 34rem; }

@media (min-width: 48rem) {
  .felderliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === kurse: Gruppensatz als Abschnitt === */
.gruppe { --sektion-oben: 0px; }

.gruppe__inner {
  display: grid;
  gap: var(--k);
  padding-top: calc(var(--k) * 2);
  border-top: var(--strich) solid var(--kreide-rahmen);
}

.gruppe__inner > div {
  display: grid;
  gap: var(--k);
  align-content: start;
}

.gruppe .gruppensatz {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 64rem) {
  .gruppe__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: calc(var(--k) * 3);
  }
}

/* === kontakt: Formular und Direktkontakt === */
.kontakt-seite { padding-block: calc(var(--abstand) * 0.75) 0; }

.kontakt-seite > section {
  display: grid;
  gap: calc(var(--k) * 1.25);
  align-content: start;
  min-width: 0;
}

.kontakt-seite .kontaktblock {
  padding-top: var(--k);
  border-top: var(--kante) solid var(--graphit);
}

.form__check .form__input {
  min-height: var(--k);
  padding: 0;
}

.form__check .form__input[aria-invalid="true"] {
  border-color: var(--marker);
  border-left-width: var(--strich);
}

@media (min-width: 64rem) {
  .kontakt-seite .kontakt-fakten {
    padding-left: calc(var(--k) * 2);
    border-left: 1px solid var(--karo);
  }
}

/* === kontakt: Lernpfad-Ausschnitt === */
@media (min-width: 64rem) {
  .pfad--ausschnitt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 52rem;
  }
}

/* === kontakt: Text unter dem Lernpfad-Ausschnitt === */
.kontakt-danach__text { margin-top: calc(var(--k) * 2); }

/* === unterseiten: Seitenkopf linksbündig an der Wrap-Kante === */
.wrap.seitenkopf__inner { max-width: none; }
.seitenkopf__inner > * { max-width: 56rem; }
.seitenkopf__inner > .vorspann { max-width: 36rem; }