/* D-Dur – ein Zeichnungsbogen auf Millimeterpapier.
   Raster: 8 px = 1 mm, 40 px = 5 mm, 80 px = 1 cm. Jede Kante, jede Zeilenhöhe
   und jeder Abstand ist ein Vielfaches von 8 px; Inhaltskanten liegen auf cm-Linien.
   Schriftgrößen: 12 · 14 · 17 · 20 · 32 · 48. Schriftstärken: 400 · 500 · 600.
   Linien sind Schatten oder Verläufe, nie Rahmen: sie dürfen keine Höhe hinzufügen. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --tisch: #ebeae4;
  --papier: #fbfaf6;
  --tinte: #18202c;
  --tinte-2: #4f5866;
  --blau: #1f4fb0;
  --blau-tief: #173d8a;
  --linie: #c6ccd5;
  --raster-mm: rgb(31 79 176 / 0.035);
  --raster-5mm: rgb(31 79 176 / 0.055);
  --raster-cm: rgb(31 79 176 / 0.09);
  --mm: 8px;
  --cm: 80px;
  /* Bogen: Inhalt 12 cm, dazu je 1 cm Rand (5 mm Feldteilung, 5 mm bis zum Inhalt). */
  --bogen: 1120px;
  --streifen: 40px;
  --innen: 40px;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (max-width: 1151px) { :root { --bogen: 880px; } }
@media (max-width: 911px) {
  :root { --bogen: calc(100vw - 16px); --streifen: 8px; --innen: 16px; }
  @supports (width: round(down, 100px, 8px)) { :root { --bogen: round(down, 100vw - 16px, 8px); } }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 24px;
  color: var(--tinte);
  background: var(--tisch);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--blau); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--blau-tief); }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 4px; }

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: 48px; line-height: 56px; letter-spacing: -0.025em; }
h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.02em; }
h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.01em; }
p { margin: 0 0 16px; text-wrap: pretty; }
@media (max-width: 599px) { h1 { font-size: 32px; line-height: 40px; } }

.marke {
  display: block;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-2);
}

.uebersprung {
  position: absolute; left: -9999px; top: 8px;
  background: var(--tinte); color: #fff; padding: 8px 16px; z-index: 50;
}
.uebersprung:focus { left: 8px; }

/* Kopf: liegt über dem Tisch, seine Kanten fluchten mit dem Inhalt des Bogens. */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgb(235 234 228 / 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 -1px 0 var(--linie);
}
.kopf .rahmen {
  width: var(--bogen); margin: 0 auto; padding: 0 calc(var(--streifen) + var(--innen));
  display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px;
}
.wortmarke { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--tinte); }
.wortmarke img { width: 40px; height: 40px; mix-blend-mode: multiply; }
.wortmarke strong { display: block; font-size: 17px; line-height: 24px; letter-spacing: 0.06em; font-weight: 600; }
.wortmarke span span { display: block; font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-2); }
.navi { display: flex; align-items: center; gap: 32px; }
.navi a { color: var(--tinte-2); text-decoration: none; font-size: 14px; line-height: 24px; }
.navi a:hover { color: var(--blau); }
.navi .knopf { color: #fff; }
@media (max-width: 911px) { .navi a:not(.knopf) { display: none; } }

.knopf {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blau); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 17px; line-height: 32px;
  padding: 8px 24px;
  transition: background-color 0.2s;
}
.knopf:hover { background: var(--blau-tief); color: #fff; }
.knopf--leise { background: transparent; color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); }
.knopf--leise:hover { background: rgb(31 79 176 / 0.06); color: var(--blau-tief); }
.knopf--klein { font-size: 14px; line-height: 24px; padding: 8px 16px; }

/* Bogen: Teilstriche im Streifen, Zeichenfläche im Rahmen. */
.bogen {
  position: relative;
  width: var(--bogen);
  margin: 40px auto;
  padding: var(--streifen);
  background: var(--papier);
  box-shadow: 0 0 0 1px var(--linie);
}
.bogen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* Mittenmarken */
    linear-gradient(var(--tinte), var(--tinte)) center top 24px / 2px 32px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) center bottom 24px / 2px 32px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) left 24px center / 32px 2px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) right 24px center / 32px 2px no-repeat,
    /* Feldteilung je 1 cm */
    repeating-linear-gradient(to right, var(--linie) 0 1px, transparent 1px var(--cm)) left var(--cm) top 24px / calc(100% - 159px) 16px no-repeat,
    repeating-linear-gradient(to right, var(--linie) 0 1px, transparent 1px var(--cm)) left var(--cm) bottom 24px / calc(100% - 159px) 16px no-repeat,
    repeating-linear-gradient(to bottom, var(--linie) 0 1px, transparent 1px var(--cm)) left 24px top var(--cm) / 16px calc(100% - 159px) no-repeat,
    repeating-linear-gradient(to bottom, var(--linie) 0 1px, transparent 1px var(--cm)) right 24px top var(--cm) / 16px calc(100% - 159px) no-repeat;
}
.zeichenflaeche {
  position: relative;
  box-shadow: inset 0 0 0 2px var(--tinte);
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--raster-cm) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-cm) 1px, transparent 1px),
    linear-gradient(var(--raster-5mm) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-5mm) 1px, transparent 1px),
    linear-gradient(var(--raster-mm) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-mm) 1px, transparent 1px);
  background-size: var(--cm) var(--cm), var(--cm) var(--cm), 40px 40px, 40px 40px, var(--mm) var(--mm), var(--mm) var(--mm);
  background-position: calc(-1 * var(--streifen)) calc(-1 * var(--streifen));
}
@media (max-width: 911px) {
  .bogen { margin: 8px auto; }
  .bogen::before { display: none; }
}

.rahmen { padding: 0 var(--innen); }

/* Abschnitte: dünne Linie von Rahmen zu Rahmen, je 1 cm Luft. */
.auftakt { padding: 80px 0; }
.abschnitt { padding: 80px 0; box-shadow: inset 0 1px 0 var(--linie); }
@media (max-width: 911px) { .auftakt, .abschnitt { padding: 48px 0; } }

/* Zwei Spalten: links 6 cm, 1 cm Luft, rechts 5 cm. Darunter einspaltig. */
.auftakt .rahmen,
.kopfzeile,
.person,
.kontakt {
  display: grid;
  grid-template-columns: calc(6 * var(--cm)) calc(5 * var(--cm));
  column-gap: var(--cm);
  align-items: start;
}
@media (max-width: 1151px) {
  .auftakt .rahmen, .kopfzeile, .person, .kontakt { grid-template-columns: 1fr; row-gap: 48px; }
}

.auftakt h1 { margin: 16px 0 24px; }
.einleitung { font-size: 20px; line-height: 32px; color: var(--tinte-2); }
.handlungen { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

.kopfzeile { margin-bottom: 48px; }
.kopfzeile .marke { margin-bottom: 8px; }
.kopfzeile p { color: var(--tinte-2); margin: 32px 0 0; }
@media (max-width: 1151px) { .kopfzeile { row-gap: 0; } .kopfzeile p { margin-top: 16px; } }

/* Bild: ein Format (5 : 6), eine Behandlung, Schnittmarken an allen vier Ecken. */
.bildfeld { margin: 0; max-width: calc(5 * var(--cm)); }
.bild { position: relative; }
.bild img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.bild { --marke-abstand: 24px; --marke-laenge: 16px; }
.bild::after {
  content: ""; position: absolute; inset: calc(-1 * var(--marke-abstand)); pointer-events: none;
  --m: linear-gradient(var(--blau), var(--blau));
  background:
    var(--m) left 0 top var(--marke-abstand) / var(--marke-laenge) 1px no-repeat,
    var(--m) left var(--marke-abstand) top 0 / 1px var(--marke-laenge) no-repeat,
    var(--m) right 0 top var(--marke-abstand) / var(--marke-laenge) 1px no-repeat,
    var(--m) right var(--marke-abstand) top 0 / 1px var(--marke-laenge) no-repeat,
    var(--m) left 0 bottom var(--marke-abstand) / var(--marke-laenge) 1px no-repeat,
    var(--m) left var(--marke-abstand) bottom 0 / 1px var(--marke-laenge) no-repeat,
    var(--m) right 0 bottom var(--marke-abstand) / var(--marke-laenge) 1px no-repeat,
    var(--m) right var(--marke-abstand) bottom 0 / 1px var(--marke-laenge) no-repeat;
}
@media (max-width: 911px) { .bild { --marke-abstand: 16px; --marke-laenge: 8px; } }
.auftakt .bild img { object-position: 56% 50%; }
@media (max-width: 911px) {
  @supports (height: round(down, 100px, 8px)) {
    .bild img { aspect-ratio: auto; height: round(down, (var(--bogen) - 48px) * 1.2, 8px); }
  }
}

/* Bemaßung unter dem Auftaktbild: Maßzahl über der Maßlinie, wie in der Zeichnung. */
.bemassung { position: relative; height: 48px; color: var(--blau); }
.bemassung svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bemassung line { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bemassung path { fill: currentColor; }
.bemassung .marke { position: absolute; left: 0; right: 0; top: 16px; text-align: center; }
.bemassung .zieh { stroke-dasharray: 600; stroke-dashoffset: 600; animation: ziehen 1.6s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.bemassung .zeige { opacity: 0; animation: zeigen 0.6s 1.5s forwards; }
@keyframes ziehen { to { stroke-dashoffset: 0; } }
@keyframes zeigen { to { opacity: 1; } }

/* Felder: Ziele und Kennzahlen als Zellen eines Schriftfelds. */
.ziele,
.zahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--papier);
  box-shadow: inset 0 0 0 1px var(--tinte);
}
.ziele article,
.zahl { padding: 24px; }
.ziele article + article,
.zahl + .zahl { box-shadow: inset 1px 0 0 var(--linie); }
.ziele h3 { margin: 0 0 8px; }
.ziele p { color: var(--tinte-2); margin: 0; }
@media (max-width: 911px) {
  .ziele, .zahlen { grid-template-columns: 1fr; }
  .ziele article + article, .zahl + .zahl { box-shadow: inset 0 1px 0 var(--linie); }
}

.zahl strong {
  display: block; white-space: nowrap;
  font-size: 48px; line-height: 56px; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--tinte);
}
.zahl strong small { font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: 0; margin-left: 8px; color: var(--tinte-2); }
.zahl > span { display: block; margin-top: 16px; padding-top: 8px; color: var(--tinte-2); box-shadow: inset 0 1px 0 var(--linie); }

/* Stückliste */
.stueckliste { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--papier); box-shadow: inset 0 0 0 1px var(--tinte); }
.stueckliste th,
.stueckliste td { text-align: left; vertical-align: top; padding: 16px 24px; box-shadow: inset 0 -1px 0 var(--linie); }
.stueckliste thead th { font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-2); box-shadow: inset 0 -1px 0 var(--tinte); }
.stueckliste tbody tr:last-child td { box-shadow: none; }
.stueckliste td:first-child,
.stueckliste th:first-child { width: var(--cm); padding-right: 0; font-family: var(--mono); color: var(--tinte-2); }
.stueckliste th:not(:first-child),
.stueckliste td:not(:first-child) { padding-left: 0; }
.stueckliste th:nth-child(2),
.stueckliste td:nth-child(2) { width: calc(6 * var(--cm)); }
.stueckliste td:nth-child(2) { font-weight: 600; }
.stueckliste td:nth-child(3) { color: var(--tinte-2); }
@media (max-width: 911px) {
  .stueckliste thead { display: none; }
  .stueckliste tr { display: grid; grid-template-columns: 48px 1fr; padding: 16px 24px; box-shadow: inset 0 -1px 0 var(--linie); }
  .stueckliste tbody tr:last-child { box-shadow: none; }
  .stueckliste td { padding: 0; box-shadow: none; width: auto !important; }
  .stueckliste td:nth-child(3) { grid-column: 2; margin-top: 4px; }
}

/* Person und Kontakt: Text links, Bild rechts, wie im Auftakt. */
.person .bildfeld,
.kontakt .bildfeld { grid-column: 2; grid-row: 1; }
.person > div,
.kontakt > div { grid-column: 1; grid-row: 1; }
.person h2,
.kontakt h2 { margin: 8px 0 24px; }
.person p { color: var(--tinte-2); }
.person p strong { color: var(--tinte); font-weight: 600; }
@media (max-width: 1151px) {
  .person .bildfeld, .kontakt .bildfeld, .person > div, .kontakt > div { grid-column: 1; grid-row: auto; }
}

.zielgruppen {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--papier); box-shadow: inset 0 0 0 1px var(--tinte);
}
.zielgruppen li { padding: 8px 24px; }
.zielgruppen li:nth-child(even) { box-shadow: inset 1px 0 0 var(--linie); }
.zielgruppen li:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--linie); }
.zielgruppen li:nth-child(4) { box-shadow: inset 1px 0 0 var(--linie), inset 0 1px 0 var(--linie); }

/* Fragen */
.fragen { background: var(--papier); box-shadow: inset 0 0 0 1px var(--tinte); }
.fragen details + details { box-shadow: inset 0 1px 0 var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 16px; gap: 24px; align-items: center;
  padding: 16px 24px; font-weight: 600;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; width: 16px; height: 16px;
  background:
    linear-gradient(var(--blau), var(--blau)) center / 16px 2px no-repeat,
    linear-gradient(var(--blau), var(--blau)) center / 2px 16px no-repeat;
  transition: transform 0.25s;
}
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen summary:hover { color: var(--blau); }
.fragen .antwort { padding: 0 24px 24px; color: var(--tinte-2); max-width: calc(8 * var(--cm)); }
.fragen .antwort p:last-child { margin-bottom: 0; }

/* Kontakt */
.kontaktwege { margin: 32px 0 0; padding: 0; list-style: none; background: var(--papier); box-shadow: inset 0 0 0 1px var(--tinte); }
/* Werte auf der 2-cm-Linie: Beschriftungsspalte minus Einzug. */
.kontaktwege li { display: grid; grid-template-columns: calc(2 * var(--cm) - 24px) 1fr; gap: 0; padding: 16px 24px; align-items: baseline; }
.kontaktwege li + li { box-shadow: inset 0 1px 0 var(--linie); }
.kontaktwege a,
.kontaktwege address { font-size: 20px; line-height: 32px; font-weight: 600; font-style: normal; text-decoration: none; color: var(--tinte); }
.kontaktwege a { color: var(--blau); }
.kontaktwege a:hover { color: var(--blau-tief); text-decoration: underline; }
@media (max-width: 480px) { .kontaktwege li { grid-template-columns: 1fr; gap: 8px; } }

/* Schriftfeld: rechts unten an der Zeichenfläche, Spalten wie der Inhalt. */
.schriftfeld { padding: 0 0 40px; }
.schriftfeld .rahmen { display: grid; grid-template-columns: calc(6 * var(--cm)) calc(5 * var(--cm)); column-gap: var(--cm); }
.schriftfeld .feld { grid-column: 2; margin: 0; background: var(--papier); box-shadow: inset 0 0 0 1px var(--tinte); }
.schriftfeld .feld > div { padding: 8px 24px; }
.schriftfeld dt { font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-2); }
.schriftfeld dd { margin: 0; font-size: 14px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.schriftfeld dd a { color: var(--blau); display: inline-block; padding: 8px 0; margin: -8px 0; }
@media (max-width: 1151px) {
  .schriftfeld .rahmen { grid-template-columns: 1fr; }
  .schriftfeld .feld { grid-column: 1; }
}

/* Rechtsseiten */
.rechtstext { padding: 80px 0; }
.rechtstext .blatt { max-width: calc(8 * var(--cm)); background: var(--papier); box-shadow: inset 0 0 0 1px var(--tinte); padding: 40px; }
.rechtstext h1 { font-size: 32px; line-height: 40px; margin: 16px 0 32px; }
.rechtstext h2 { font-size: 20px; line-height: 24px; margin: 32px 0 8px; }
.rechtstext h3 { font-size: 17px; line-height: 24px; margin: 24px 0 8px; }
.rechtstext p,
.rechtstext li { color: var(--tinte-2); }
.rechtstext address { font-style: normal; color: var(--tinte); margin-bottom: 16px; }
.rechtstext ul { margin: 0 0 16px; padding-left: 24px; }
.rechtstext .stand { margin-top: 32px; font-size: 14px; color: var(--tinte-2); }
@media (max-width: 911px) { .rechtstext { padding: 48px 0; } .rechtstext .blatt { padding: 16px; } }

/* Erscheinen beim Scrollen */
.js .erscheint { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .erscheint.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bemassung .zieh { animation: none; stroke-dashoffset: 0; }
  .bemassung .zeige { animation: none; opacity: 1; }
  .js .erscheint { opacity: 1; transform: none; transition: none; }
}

@media print {
  body { background: #fff; }
  .kopf { position: static; }
}
@media (max-width: 911px) { .einleitung { font-size: 17px; line-height: 24px; } }
@media (max-width: 1151px) {
  .einleitung, .kopfzeile p { max-width: calc(8 * var(--cm)); }
  .stueckliste th:nth-child(2), .stueckliste td:nth-child(2) { width: calc(3 * var(--cm)); }
}