@font-face {
  font-family: "Archivo";
  src: url("/schriften/Archivo-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/schriften/JetBrainsMono-VF.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}


:root {
  --weiss: #FFFFFF;
  --tinte: #1A1A1A;
  --neben: #6B6A6A;
  --rot: #CD0407;
  --raster: #EDEDED;
  --platz: #F2F2F2;
  --hilf: #C9C9C9;
  --raster-bild: linear-gradient(to right, var(--raster) 1px, transparent 1px),
                 linear-gradient(to bottom, var(--raster) 1px, transparent 1px);

  --schrift: "Archivo", "Arial", sans-serif;
  --mono: "JetBrains Mono", "Consolas", monospace;

  --strich: 1.5px;
  --kl: 7px;
  --ay: 30px;
  --breite: 1360px;
  --rand: clamp(16px, 4vw, 40px);
  --abstand: clamp(72px, 9vw, 128px);
  --t-kurz: 180ms;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background-color: var(--weiss);
  background-image: var(--raster-bild);
  background-size: 24px 24px;
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 18px;
  line-height: 1.6;
  font-stretch: 100%;
  font-weight: 400;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; hyphens: manual; }
h1 { font-size: clamp(34px, 4.9vw, 64px); font-weight: 760; font-stretch: 116%; line-height: 1.03; }
h2 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 720; font-stretch: 118%; }
h3 { font-size: 22px; font-weight: 680; font-stretch: 110%; line-height: 1.25; }
p { margin: 0 0 1em; max-width: 68ch; }
ul, ol { margin: 0; padding: 0; }
.mono { font-family: var(--mono); font-size: 16px; line-height: 1.5; }
.klein { font-size: 16px; line-height: 1.5; }
.neben { color: var(--neben); }
.rot { color: var(--rot); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .nur-js { display: none !important; }

.rahmen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abstand) 0; }
.abschnitt__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 48px; margin-bottom: 40px; }
.abschnitt__kopf p { margin: 0; }
.abschnitt__kopf h2 { margin: 0; }
.abschnitt__kopf > div > p + p { margin-top: 1em; }
@media (min-width: 1100px) {
  .abschnitt__kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
}
.kennung { font-family: var(--mono); font-size: 16px; line-height: 1.5; color: var(--neben); margin: 0 0 10px; }


.weiter { display: inline-block; padding-block: 8px; font-weight: 620; }
.pfad a { display: inline-block; padding-block: 9.5px; }

.springen { position: absolute; left: 16px; top: -80px; z-index: 10; background: var(--tinte); color: var(--weiss); padding: 10px 16px; }
.springen:focus { top: 12px; }



.platz {
  display: inline-block;
  max-width: 100%;
  border: 1.5px dashed var(--tinte);
  background: var(--platz);
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinte);
}
.platz-block { border: 2px dashed var(--tinte); background: var(--platz); padding: 14px 18px; max-width: 68ch; margin: 32px 0 0; }
.platz-block .mono { display: block; }


.knopf {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 34px 12px 20px;
  border: 0;
  background: transparent;
  color: var(--weiss);
  font: inherit;
  font-size: 18px;
  font-weight: 640;
  font-stretch: 108%;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-kurz);
}
.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tinte);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 74px) 100%, 0 100%);
}
.knopf:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.knopf:active { transform: translateY(1px); }

.knopf-klein {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 14px;
  border: 1.5px solid var(--tinte);
  border-radius: 2px;
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.knopf-klein:hover { background: var(--platz); }
.knopf-klein[aria-pressed="true"] { background: var(--tinte); color: var(--weiss); }


.kopf { background: var(--weiss); border-bottom: var(--strich) solid var(--tinte); }
.kopf__leiste { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; column-gap: 20px; font-size: 16px; line-height: 1.4; }
.kopf__leiste > span { display: inline-flex; align-items: center; gap: .3em; }
.kopf__leiste a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-thickness: 1px; }
.kopf__haupt { display: flex; align-items: center; flex-wrap: nowrap; gap: 20px; padding-block: 0 12px; }
.marke { position: relative; display: flex; align-items: center; min-height: 44px; overflow: hidden; flex: 0 0 auto; margin-right: auto; padding-block: 3px; }
.marke img { width: 184px; height: auto; }

.marke::after { content: ""; position: absolute; inset: -70% -12%; background: var(--weiss); transform: rotate(-5.4deg) translateX(110%); transform-origin: 0 50%; pointer-events: none; }
.k1 .marke::after { animation: schwinge 900ms cubic-bezier(.55, .05, .25, 1) 120ms both; }
@keyframes schwinge {
  from { transform: rotate(-5.4deg) translateX(0); }
  to   { transform: rotate(-5.4deg) translateX(110%); }
}
.navi ul { list-style: none; display: flex; flex-wrap: nowrap; gap: 0 18px; }
.navi a { position: relative; display: inline-block; padding: 10px 0; font-size: 17px; font-weight: 560; white-space: nowrap; text-decoration: none; background-image: linear-gradient(var(--tinte), var(--tinte)); background-position: 0 calc(100% - 6px); background-repeat: no-repeat; background-size: 0 2px; }
.navi a:hover, .navi a[aria-current="page"] { background-size: 100% 2px; }
.navi a::before { content: ""; position: absolute; inset: 0 -14px; }
.navi { display: none; }
.menue { position: relative; }
.menue summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 6px 14px; border: 1.5px solid var(--tinte); font-weight: 620; }
.menue summary::-webkit-details-marker { display: none; }
.menue summary::after { content: " +"; font-family: var(--mono); margin-left: 6px; }
.menue[open] summary::after { content: " −"; }
.menue ul { list-style: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; background: var(--weiss); border: 1.5px solid var(--tinte); padding: 8px 0; min-width: 250px; }
.menue li a { display: block; padding: 10px 18px; text-decoration: none; }
.menue li a:hover { text-decoration: underline; }
.kopf__knopf { display: none; flex: 0 0 auto; white-space: nowrap; font-size: 17px; padding: 10px 30px 12px 18px; }
@media (min-width: 720px) { .kopf__knopf { display: inline-flex; } }
@media (min-width: 1100px) { .navi { display: block; } .menue { display: none; } }
@media (max-width: 480px) { .marke img { width: 150px; } }


.kasten {
  position: relative;
  display: block;
  background: var(--weiss);
  border: var(--strich) solid var(--tinte);
  border-radius: 2px;
  padding: 12px 16px 14px;
  color: var(--tinte);
  text-decoration: none;
}
.kasten > :last-child { margin-bottom: 0; }
.kasten__art { display: block; font-family: var(--mono); font-size: 16px; line-height: 1.4; color: var(--neben); margin: 0; }
.kasten__titel { display: block; font-size: 20px; font-weight: 680; font-stretch: 110%; line-height: 1.2; margin: 2px 0 8px; }
.kasten__text { display: block; margin: 0; }

.kasten--ki::before { content: ""; position: absolute; inset: 3px; border: var(--strich) solid var(--tinte); border-radius: 1px; pointer-events: none; }
.kasten--ki { padding: 16px 20px 18px; }

.kasten--entscheid::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 var(--strich) var(--tinte); pointer-events: none; }


.kasten--link { transition: transform var(--t-kurz); }
.kasten--link:hover, .kasten--link:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 -1.5px var(--weiss), 8px 8px 0 0 var(--tinte);
}
.kasten--link:hover .kasten__titel, .kasten--link:focus-visible .kasten__titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }


.kasten__ki { display: block; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--hilf); font-family: var(--mono); font-size: 16px; line-height: 1.4; color: var(--neben); }
.kasten__ki b { color: var(--tinte); font-weight: 700; margin-right: .5ch; }
.kasten--link:hover .kasten__ki, .kasten--link:focus-visible .kasten__ki { color: var(--tinte); }


.muster { display: grid; height: 76px; font-family: var(--mono); font-size: 16px; line-height: 1.35; color: var(--neben); overflow: hidden; }
.m-balken { display: block; height: 6px; align-self: center; background: var(--hilf); width: 80%; }
.m-balken--kurz { width: 45%; }
.m-balken--lang { width: 95%; }
.muster--liste { grid-template-columns: 5ch minmax(0, 1fr); grid-auto-rows: 25px; column-gap: 12px; align-items: center; background-image: linear-gradient(to top, var(--hilf) 1px, transparent 1px); background-size: 100% 25px; }
.muster--maske { grid-template-columns: 8ch minmax(0, 1fr); grid-auto-rows: 34px; column-gap: 10px; align-items: center; }
.m-feld { display: block; height: 26px; border: 1px solid var(--neben); background: var(--weiss); }
.m-feld--kurz { width: 55%; }
.muster--tabelle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 25px; border: 1px solid var(--hilf); }
.muster--tabelle > * { display: flex; align-items: center; padding-inline: 8px; border-right: 1px solid var(--hilf); border-bottom: 1px solid var(--hilf); }
.muster--tabelle > :nth-child(2n) { border-right: 0; }
.muster--tabelle > :nth-last-child(-n+2) { border-bottom: 0; }
.m-zelle::before { content: ""; display: block; height: 6px; width: 70%; background: var(--hilf); }
.m-zelle--kurz::before { width: 40%; }
.muster--belege { position: relative; display: block; }
.m-blatt { position: absolute; left: 0; top: 0; width: 60%; max-width: 190px; height: 64px; border: 1px solid var(--neben); background: var(--weiss); }
.m-blatt:nth-child(1) { transform: translate(16px, 10px); }
.m-blatt:nth-child(2) { transform: translate(8px, 5px); }
.m-blatt--vorn { display: grid; grid-auto-rows: min-content; gap: 6px; padding: 4px 8px; }
.m-blatt--vorn .m-balken { width: 70%; }
.m-blatt--vorn .m-balken--kurz { width: 40%; }


.draht { position: absolute; display: block; pointer-events: none; --h: 1; --k1: var(--kl); --k2: var(--kl); --st: var(--strich); --o: 0 0; transform-origin: var(--o); }
.draht::before {
  content: "";
  position: absolute;
  top: calc(var(--h) * (50% - var(--st) / 2));
  bottom: calc(var(--h) * (50% - var(--st) / 2));
  left: calc((1 - var(--h)) * (50% - var(--st) / 2));
  right: calc((1 - var(--h)) * (50% - var(--st) / 2));
  background: var(--tinte);
}
.draht::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--tinte), var(--tinte)) calc((1 - var(--h)) * 50%) calc(var(--h) * 50%) / var(--k1) var(--k1) no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) calc(100% - (1 - var(--h)) * 50%) calc(100% - var(--h) * 50%) / var(--k2) var(--k2) no-repeat;
}
.draht--fluss { position: relative; }


@keyframes ziehen {
  from { transform: scale(calc(1 - var(--h)), var(--h)); }
  to   { transform: scale(1, 1); }
}
@keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }
.bewegt [data-zeichnen]:not(.zeichnet) .draht { transform: scale(calc(1 - var(--h)), var(--h)); }
.bewegt [data-zeichnen]:not(.zeichnet) .kasten--ki::before,
.bewegt [data-zeichnen]:not(.zeichnet) .kasten--entscheid::before { opacity: 0; }
.bewegt .zeichnet .draht { animation: ziehen var(--dauer, 360ms) cubic-bezier(.45, 0, .25, 1) var(--verz, 0ms) both; }
.bewegt .zeichnet .kasten--ki::before,
.bewegt .zeichnet .kasten--entscheid::before { animation: auftauchen 320ms ease-out var(--verz-ende, 900ms) both; }


.glied, .plan__system { --i: 0; }
.glied:nth-child(2), .plan__system:nth-child(2) { --i: 1; }
.glied:nth-child(3), .plan__system:nth-child(3) { --i: 2; }
.glied:nth-child(4), .plan__system:nth-child(4) { --i: 3; }
.glied:nth-child(5) { --i: 4; }
.glied:nth-child(6) { --i: 5; }


.blatt {
  --blatt-rand: clamp(12px, 2.4vw, 32px);
  background-color: var(--weiss);
  background-image: var(--raster-bild);
  background-size: 24px 24px;
  border: var(--strich) solid var(--tinte);
  padding: var(--blatt-rand);
}
.blatt--buehne { container-type: inline-size; }
.buehne { padding-top: clamp(16px, 2.2vw, 28px); }
.buehne__text { margin-bottom: clamp(28px, 3.6vw, 48px); }
.buehne__text h1 { margin: 0 0 20px; }
.buehne__text h1 .zeile { display: block; }
.buehne__unter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 48px; }
.unterzeile { font-size: 20px; line-height: 1.55; margin: 0; max-width: 34em; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0; }
@media (min-width: 840px) {
  .buehne__text h1 { font-size: clamp(34px, calc(100cqi / 21.5), 64px); }
}
@media (min-width: 1100px) {
  .buehne__unter { grid-template-columns: minmax(0, 1fr) max-content; align-items: end; }
  .unterzeile { font-size: 21px; }
}


.plan { --sx: 28px; --bus: 72px; --zu-ki: 40px; }
.plan__netz { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.plan__systeme { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.plan__system { position: relative; padding-right: 44px; }
.plan__system > .kasten { height: 100%; }
.plan__stich { --h: 1; top: calc(var(--ay) - 8px); right: 22px; width: 22px; height: 16px; --k2: 0px; --verz: calc(var(--i) * 220ms); --dauer: 200ms; }
.plan__holm { --h: 0; top: 0; bottom: -16px; right: 14px; width: 16px; --k1: 0px; --k2: 0px; --verz: calc(var(--i) * 220ms + 160ms); --dauer: 240ms; }
.plan__system:first-child .plan__holm { top: calc(var(--ay) - .75px); }
.plan__system:last-child .plan__holm { bottom: calc(-1 * var(--zu-ki)); --k2: var(--kl); }
.plan__schiene { display: none; }
.plan__ki { margin-top: var(--zu-ki); --verz-ende: 1100ms; }
.plan__ki .kasten__titel { font-size: 24px; }
.kasten--link:hover ~ .draht, .kasten--link:focus-visible ~ .draht { --st: 3.5px; }
@media (min-width: 900px) {
  .plan__netz { grid-template-columns: minmax(0, 64fr) minmax(0, 10fr) minmax(0, 26fr); align-items: center; }
  .plan__systeme { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; column-gap: 24px; row-gap: var(--bus); }
  .plan__system { padding-right: 0; }
  .plan__holm { display: none; }
  .plan__stich { --h: 0; left: calc(var(--sx) - 8px); right: auto; top: 100%; bottom: auto; width: 16px; height: calc(var(--bus) / 2 + .75px); --k1: var(--kl); --k2: 0px; --verz: calc(var(--i) * 150ms); --dauer: 360ms; }
  .plan__system:nth-child(n+3) .plan__stich { top: auto; bottom: 100%; --k1: 0px; --k2: var(--kl); --o: 0 100%; }
  .plan__schiene { display: block; --h: 1; left: var(--sx); right: 26%; top: calc(50% - 8px); height: 16px; --k1: 0px; --k2: var(--kl); --verz: 650ms; --dauer: 600ms; }
  .plan__ki { grid-column: 3; margin-top: 0; --verz-ende: 1250ms; }
}
.plan__ki .kasten__text { font-family: var(--mono); font-size: 16px; line-height: 1.45; color: var(--neben); }


.plan .draht, .plan .kasten__ki { transition: opacity 300ms, visibility 0s; }
.plan .plan__ki { transition: transform var(--t-kurz), opacity 300ms, visibility 0s; }
.plan[data-ansicht="ohne"] :is(.draht, .kasten__ki) { opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 0s 300ms; }
.plan[data-ansicht="ohne"] .plan__ki { opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 0s 300ms; }

.plan__fuss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; margin-top: 36px; align-items: end; }
@media (min-width: 900px) { .plan__fuss { grid-template-columns: minmax(0, 1fr) auto; } }
.schriftfeld { border: var(--strich) solid var(--tinte); background: var(--weiss); font-family: var(--mono); font-size: 16px; line-height: 1.45; max-width: 640px; }
.schriftfeld p { margin: 0; padding: 8px 12px; max-width: none; }
.schriftfeld p + p { border-top: 1px solid var(--tinte); }
.ansicht { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ansicht > span { font-family: var(--mono); font-size: 16px; color: var(--neben); margin-right: 4px; }


.reihe { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.reihe .kasten__titel { font-size: 21px; }
@media (min-width: 640px) { .reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .reihe { grid-template-columns: repeat(5, minmax(0, 1fr)); } .reihe .kasten__titel { font-size: 20px; } }


.leiste { --hx: 14px; --sx: 48px; --kd: 32px; --lg: 16px; }
@media (min-width: 900px) { .leiste { --sx: 72px; --lg: 20px; } }
.leiste__knoten { width: max-content; max-width: 100%; min-width: 220px; margin: 0 0 var(--kd); }
.leiste__knoten .kasten__titel { font-size: 24px; margin-bottom: 0; }
.leiste__knoten > .draht { --h: 0; left: calc(var(--hx) - 8px - var(--strich)); top: 100%; width: 16px; height: calc(var(--kd) + var(--strich)); --k2: 0px; --dauer: 240ms; }
.leiste__liste { list-style: none; display: grid; gap: var(--lg); padding-left: var(--sx); }
.glied { position: relative; }
.glied > .draht--holm { --h: 0; left: calc(var(--hx) - var(--sx) - 8px); width: 16px; top: 0; bottom: calc(-1 * var(--lg)); --k1: 0px; --k2: 0px; --verz: calc(200ms + var(--i) * 170ms); --dauer: 230ms; }
.glied:last-child > .draht--holm { bottom: auto; height: calc(var(--ay) + .75px); }
.glied > .draht--stich { --h: 1; left: calc(var(--hx) - var(--sx)); width: calc(var(--sx) - var(--hx)); top: calc(var(--ay) - 8px); height: 16px; --k1: 0px; --verz: calc(330ms + var(--i) * 170ms); --dauer: 260ms; }
.leiste .kasten--ki { --verz-ende: 0ms; }
.leiste__fuss { margin: 24px 0 0; }


.kasten--zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: baseline; }
.kasten--zeile .kasten__titel { margin: 0; }
.kasten--zeile .kasten__text { grid-column: 1 / -1; margin-top: 4px; }
.kasten--zeile.ohne-nr { grid-template-columns: minmax(0, 1fr); }
.zeile__nr { font-family: var(--mono); font-size: 16px; color: var(--neben); }
@media (min-width: 900px) {
  .kasten--zeile { grid-template-columns: 3ch minmax(0, 17em) minmax(0, 1fr); gap: 0 24px; }
  .kasten--zeile .kasten__text { grid-column: auto; margin-top: 0; }
  .kasten--zeile.ohne-nr { grid-template-columns: minmax(0, 18em) minmax(0, 1fr); }
}


.kasten--feld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; padding: 14px 18px 16px; }
.kasten--feld h3 { margin: 0; font-size: 22px; }
.kasten--feld p { margin: 0; }
.feld__uns { font-size: 17px; }
.feld__marke { display: block; font-family: var(--mono); font-size: 16px; color: var(--neben); }
@media (min-width: 1000px) {
  .kasten--feld { grid-template-columns: minmax(0, 15em) minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .kasten--feld .feld__kopf { grid-row: 1 / span 2; }
}


.schluss { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; max-width: 1180px; }
.schluss > .draht { --h: 0; width: 16px; height: 48px; margin-left: 20px; --dauer: 700ms; --verz: 100ms; }
.schluss > .draht--zu { --o: 0 100%; }
.schluss .kasten--entscheid { --verz-ende: 800ms; }
.schluss .kasten--ki { --verz-ende: 800ms; padding: 12px 16px 14px; }
@media (min-width: 900px) {
  .schluss { grid-template-columns: minmax(0, 1fr) minmax(40px, .45fr) minmax(0, 1.1fr) minmax(40px, .45fr) minmax(0, 1fr); align-items: start; }
  .schluss > .draht { --h: 1; width: auto; height: 16px; margin: calc(var(--ay) - 8px) 0 0; }
  .schluss > .draht--zu { --o: 100% 0; }
  .schluss > .kasten { height: 100%; }
}


.produkte { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 760px) { .produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.produkt { background: var(--weiss); border: 1px solid var(--neben); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.produkt__zeichen { height: 56px; display: flex; align-items: center; }
.produkt__zeichen img { height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.produkt__zeichen--hoch img { height: 56px; }
.produkt h3 { margin: 4px 0 0; font-size: 22px; }
.produkt p { margin: 0; }
.produkt__status { font-family: var(--mono); font-size: 16px; color: var(--neben); }
.produkt__module { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.produkt__module li { padding-left: 16px; position: relative; }
@media (min-width: 1100px) { .produkt__module { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
.produkt__module li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--tinte); }

.aufzaehlung { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aufzaehlung li { padding-left: 18px; position: relative; }
.aufzaehlung li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--tinte); }
.verweise { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 0; }

.schritte { list-style: none; counter-reset: schritt; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.schritte li { counter-increment: schritt; position: relative; padding-left: 44px; }
.schritte li::before { content: counter(schritt, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--mono); color: var(--neben); }
.hinweis { margin: 16px 0 0; color: var(--neben); }
.seitenkopf .produkt__zeichen { margin-bottom: 20px; }


.kontakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1100px) { .kontakt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.kontakt__wege { border-top: var(--strich) solid var(--tinte); padding-top: 16px; margin-top: 28px; }
.kontakt__wege p { margin-bottom: .4em; }
.kontakt__wege a:not(.weiter) { display: inline-block; padding-block: 8px; }
.formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; background: var(--weiss); border: var(--strich) solid var(--tinte); padding: clamp(16px, 3vw, 32px); }
.formular .zeile2 { display: grid; gap: 18px; }
@media (min-width: 700px) { .formular .zeile2 { grid-template-columns: 1fr 1fr; } }
.formular p { margin: 0; }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 620; font-size: 17px; }
.feld input, .feld textarea { font: inherit; font-size: 18px; color: var(--tinte); background: var(--weiss); border: 1.5px solid var(--tinte); border-radius: 2px; padding: 10px 12px; min-height: 48px; width: 100%; }
.feld textarea { min-height: 140px; resize: vertical; }
.feld small, .feld__hinweis { font-size: 16px; color: var(--neben); }
.feld__hinweis { margin: 0; }
.honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }


.schlussblock { border-top: var(--strich) solid var(--tinte); padding-top: 32px; }
.schlussblock h2 { font-size: clamp(26px, 2.6vw, 34px); }


.fuss { margin-top: var(--abstand); border-top: var(--strich) solid var(--tinte); padding-block: 40px 48px; background: var(--weiss); }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; }
@media (min-width: 1100px) { .fuss__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

@media (min-width: 700px) { .fuss__raster--drei { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); } }
.fuss__anschrift { font-style: normal; font-size: 16px; line-height: 1.7; }
.fuss__anschrift b { font-weight: 680; }
.fuss__anschrift a { display: inline-block; padding: 9px 0; }
.fuss__raster--drei ul { flex-direction: column; gap: 0; }
.fuss__raster--drei ul a { padding: 4px 0; }
.fuss ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.fuss ul a { display: inline-block; padding: 8px 0; }
.fuss p { margin: 0 0 .5em; }
.steckbrief { margin-top: 24px !important; padding-top: 16px; border-top: 1px solid var(--tinte); font-size: 16px; line-height: 1.7; max-width: none !important; }
.steckbrief a { position: relative; }
.steckbrief a::before { content: ""; position: absolute; inset: -14px 0; }
.schalter { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 14px 6px 8px; border: 1.5px solid var(--tinte); background: var(--weiss); color: var(--tinte); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.schalter__bahn { position: relative; width: 44px; height: 24px; border: 1.5px solid var(--tinte); background: var(--weiss); }
.schalter__bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; background: var(--tinte); transition: transform var(--t-kurz); }
.schalter[aria-pressed="true"] .schalter__bahn::after { transform: translateX(20px); }


.seitenkopf { padding-top: clamp(40px, 6vw, 72px); }
.seitenkopf h1 { font-size: clamp(34px, 4.4vw, 58px); max-width: 22ch; margin: 0; }
.seitenkopf .abschnitt__kopf { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.abschnitt__kopf--oben { align-items: start !important; }
.seitenkopf + .abschnitt { padding-top: clamp(24px, 4vw, 48px); }
.pfad { font-family: var(--mono); font-size: 16px; margin: 0 0 16px; }
.pfad a { text-decoration-thickness: 1px; }
.seitenliste { list-style: none; display: grid; gap: 0; border-top: var(--strich) solid var(--tinte); }
.seitenliste li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding: 16px 12px; border-bottom: 1px solid var(--tinte); background: var(--weiss); scroll-margin-top: 24px; }
.seitenliste li:target { box-shadow: inset 4px 0 0 var(--tinte); }
.seitenliste .weg-adr { font-family: var(--mono); font-size: 16px; overflow-wrap: anywhere; }
.seitenliste h2 { font-size: 24px; margin: 0; }
.seitenliste p { margin: 0; }
.seitenliste p a { position: relative; }
.seitenliste p a::before { content: ""; position: absolute; inset: -14px 0; }
@media (min-width: 900px) { .seitenliste li { grid-template-columns: 18ch minmax(0, 1fr); } .seitenliste li > :not(.weg-adr) { grid-column: 2; } .seitenliste .weg-adr { grid-row: 1 / 4; } }


.bewegung-aus *, .bewegung-aus *::before, .bewegung-aus *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


@media print {
  body { background: #fff; font-size: 12pt; }
  .kopf__leiste, .navi, .menue, .kopf__knopf, .schalter, .ansicht, .formular button, .springen { display: none !important; }
  .blatt { background: #fff; }
  .draht, .kasten--ki::before, .kasten--entscheid::before { transform: none !important; opacity: 1 !important; animation: none !important; visibility: visible !important; }
  .plan__ki, .kasten__ki { opacity: 1 !important; visibility: visible !important; }
  .abschnitt { padding-top: 24pt; }
  .kasten, .produkt { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12pt; }
}

.rechtstext { max-width: 820px; padding-bottom: var(--abstand); overflow-wrap: anywhere; }
.rechtstext h1 { overflow-wrap: normal; margin-bottom: .8em; font-size: min(clamp(34px, 4.9vw, 64px), calc(8vw - 3px)); }
.rechtstext h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 1.6em 0 .5em; }
.rechtstext h3, .rechtstext h4 { font-size: 19px; margin: 1.4em 0 .4em; }
.rechtstext p, .rechtstext ul, .rechtstext ol { margin: 0 0 1em; }
.rechtstext table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.rechtstext td, .rechtstext th { border: 1px solid var(--neben); padding: 8px 10px; text-align: left; vertical-align: top; }
.rechtstext .rechtstext-pdf { margin-top: 2em; font-family: var(--mono); font-size: 16px; }

.rechtstext #itkanzlei_txt_copyright { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 3em; font-family: var(--mono); font-size: 16px; color: var(--neben); }
.rechtstext #itkanzlei_txt_copyright > div:empty { display: none; }
.rechtstext #itkanzlei_txt_copyright a { display: block; }
#itkanzlei_img_copyright { content: url("/logo/itrk-datenschutz.png"); display: block; width: 340px; max-width: 100%; height: auto; }