/* casmartis.de · Markenschicht über werkblatt.css
   Herstellerkopf, Mega-Menü, Pfad, Seitenfuß, Startseite „Ein Tag am Fenster“, Bausteine der Bereichs-, Produkt- und Serviceseiten.
   Welt wie werkblatt.css: weißes Blatt, Tusche, Graphit, Befund-Grün; keine Radien, keine Schatten, keine Karten. */

:root {
  --leiste-h: 76px;
  --breite: 1360px;
  --breite-weit: 1480px;
}
html { scroll-padding-top: calc(var(--leiste-h) + 20px); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--tisch); }
::-webkit-scrollbar-thumb { background: var(--graphit); border: 3px solid var(--tisch); }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--seite); }
.knopf--inline { width: auto; padding: 0 26px; display: inline-flex; }
.knopf:focus-visible, .knopf--hell:focus-visible { outline-offset: 3px; }
.bald { color: var(--graphit); }
.bald__marke { font-size: 12.5px; font-weight: 560; color: var(--graphit); white-space: nowrap; }
.sprung:focus { top: 12px; z-index: 60; }

/* ---------------------------------------------------------------- Leiste: Herstellerkopf */
.leiste { position: sticky; top: 0; z-index: 40; background: var(--blatt); border-bottom: var(--linie) solid var(--tusche); }
.leiste__innen { max-width: var(--breite-weit); margin: 0 auto; height: var(--leiste-h); padding: 0 var(--seite); display: flex; align-items: center; gap: 28px; }
.leiste__logo { flex: none; display: block; padding: 6px 0; }
.leiste__logo img { width: 138px; height: auto; display: block; }
.leiste__nav { flex: 1; display: flex; justify-content: center; }
.leiste__liste { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.leiste__liste > li > a, .leiste__knopf {
  display: inline-flex; align-items: center; gap: 9px; height: var(--leiste-h); padding: 0 15px;
  font: inherit; font-size: 15.5px; font-weight: 620; color: var(--tusche); text-decoration: none;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.leiste__liste > li > a:hover, .leiste__knopf:hover, .leiste__knopf[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--befund); }
.leiste__liste > li > a[aria-current="page"], .leiste__knopf.ist-hier { box-shadow: inset 0 -3px 0 var(--tusche); }
.leiste__knopf::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.leiste__knopf[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.leiste__liste > li > a:focus-visible, .leiste__knopf:focus-visible { outline-offset: -6px; }
.leiste__kauf { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--tusche); color: var(--tusche); font-weight: 680; font-size: 15px; text-decoration: none; }
.leiste__kauf:hover { background: var(--tusche); color: var(--blatt); }
.leiste__menue { display: none; }

/* Mega-Menü: eine Linienliste je Bereich, Produkte nach Anwendung */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--blatt); border-bottom: var(--linie) solid var(--tusche); }
.mega__innen { max-width: var(--breite-weit); margin: 0 auto; padding: 34px var(--seite) 42px; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .9fr); gap: 0 48px; }
.mega__anwendung > h2, .mega__seite > h2 { font-size: 24px; line-height: 1.1; letter-spacing: -.02em; font-weight: 740; margin-bottom: 18px; }
.mega__gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; }
.mega__gruppe h3 { font-size: 15px; font-weight: 720; letter-spacing: 0; padding-bottom: 8px; border-bottom: var(--linie) solid var(--tusche); }
.mega__gruppe h3 a { color: var(--tusche); text-decoration: none; }
.mega__gruppe h3 a:hover { color: var(--befund); text-decoration: underline; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li { max-width: none; }
.mega li a, .mega li > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bleistift); color: var(--tusche); text-decoration: none; font-size: 15px; font-weight: 540; }
.mega li a:hover { color: var(--befund); }
.mega li a:hover .mega__typ { color: var(--befund); }
.mega__typ { font-family: var(--norm); font-size: 17px; color: var(--graphit); letter-spacing: 0; }
.mega li > span { color: var(--graphit); }
.mega__seite + .mega__seite { margin-top: 30px; }
.mega__seite p { font-size: 14.5px; color: var(--graphit); line-height: 1.5; }
.mega__bild { margin: 0; align-self: start; }
.mega__bild a { display: block; color: var(--tusche); text-decoration: none; }
.mega__bild img { border: 1px solid var(--tusche); background: var(--weiss); aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 60%; width: 100%; }
.mega__bild figcaption { margin-top: 10px; font-size: 14px; font-weight: 640; }
.mega__bild figcaption span { display: block; font-weight: 450; color: var(--graphit); font-size: 13px; margin-top: 2px; }

/* ---------------------------------------------------------------- Pfad (Brotkrumen) */
.pfad { max-width: var(--breite); margin: 0 auto; padding: 22px var(--seite) 0; }
.pfad ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--graphit); }
.pfad li { max-width: none; }
.pfad li + li::before { content: "/"; color: var(--bleistift); margin: 0 10px; }
.pfad a { color: var(--tusche); text-decoration: none; }
.pfad a:hover { color: var(--befund); text-decoration: underline; }

/* ---------------------------------------------------------------- Seitenkopf der Bereiche */
.bereich { max-width: var(--breite); margin: 0 auto; padding: 46px var(--seite) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px 72px; align-items: center; }
.bereich h1 { font-size: clamp(40px, 4.4vw, 70px); line-height: 1.02; letter-spacing: -.032em; font-weight: 760; }
.bereich__lead { margin-top: 22px; font-size: 20px; line-height: 1.55; max-width: 40ch; }
.bereich__fakten { list-style: none; margin: 28px 0 0; padding: 0; border-top: var(--linie) solid var(--tusche); max-width: 520px; }
.bereich__fakten li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bleistift); font-size: 15px; max-width: none; }
.bereich__fakten li span:first-child { color: var(--graphit); font-size: 13.5px; padding-top: 2px; }
.bereich__fakten .norm { font-family: var(--norm); font-size: 19px; letter-spacing: 0; }
.bereich__aktionen { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 30px; }
.bereich__bild { margin: 0; }
.bereich__bild img { width: 100%; height: auto; }
.bereich__bild--rahmen img { border: 1px solid var(--tusche); background: var(--weiss); }
.bereich__bild figcaption { margin-top: 10px; font-size: 13px; color: var(--graphit); }

/* ---------------------------------------------------------------- Startseite: Ein Tag am Fenster */
.tag {
  max-width: var(--breite-weit); margin: 0 auto; padding: 0 var(--seite);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(36px, 4.6vw, 72px);
}
.tag__auftakt { grid-column: 2; grid-row: 1; padding: clamp(40px, 7vh, 84px) 0 44px; align-self: start; }
.tag__auftakt h1 { font-size: clamp(46px, 5vw, 80px); line-height: .98; letter-spacing: -.035em; font-weight: 780; }
.tag__unter { margin-top: 22px; font-size: 19px; line-height: 1.55; max-width: 36ch; }
.tag__finder { margin: 34px 0 0; }
.tag__frage { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.tag__finder .hinweis { font-size: 13.5px; color: var(--graphit); margin-top: 2px; }
.tag__wellen { display: flex; align-items: flex-end; gap: 34px; margin-top: 18px; }
.welle-link { display: grid; justify-items: center; gap: 4px; color: var(--tusche); text-decoration: none; padding: 4px 6px 6px; }
.welle-link svg { display: block; overflow: visible; }
.welle-link[data-sw="40"] svg { width: 66px; height: 66px; }
.welle-link[data-sw="60"] svg { width: 98px; height: 98px; }
.welle-link .achteck__welle { fill: var(--blatt); stroke: var(--tusche); stroke-width: 1.5; stroke-dasharray: none; transition: stroke .15s, fill .15s; }
.welle-link .achteck__falz { fill: none; stroke: var(--tusche); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.welle-link:hover .achteck__welle, .welle-link:focus-visible .achteck__welle { stroke: var(--befund); stroke-width: 2.25; fill: url(#sch-befund); }
.welle-link__mass { font-family: var(--norm); font-size: 22px; line-height: 1; }
.welle-link__mm { font-size: 13px; color: var(--graphit); }
.welle-link__pfeil { font-size: 14px; font-weight: 680; color: var(--befund); text-decoration: underline; text-underline-offset: .2em; margin-top: 2px; }
.tag__wellen-rest { display: grid; gap: 10px; padding-bottom: 8px; font-size: 14.5px; }
.tag__wellen-rest a { font-weight: 620; }

.tag__buehne {
  grid-column: 1; grid-row: 1 / span 6; align-self: start; position: sticky; top: var(--leiste-h);
  height: calc(100vh - var(--leiste-h)); height: calc(100svh - var(--leiste-h)); min-height: 560px; max-height: 980px;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; padding: 22px 0 18px;
}
.tag__fig { margin: 0; min-height: 0; display: grid; }
.tag__fig svg { width: 100%; height: 100%; min-height: 0; display: block; overflow: visible; }
.tag__fig figcaption { font-size: 12.5px; color: var(--graphit); margin-top: 4px; }
.tag__zeiten { display: flex; align-items: stretch; margin-top: 12px; border-top: var(--linie) solid var(--tusche); }
.tag__zeiten button {
  flex: 1; min-height: 46px; display: grid; justify-items: start; align-content: center; gap: 1px; padding: 6px 12px 6px 0;
  background: none; border: 0; border-top: 3px solid transparent; margin-top: -1.25px; cursor: pointer; color: var(--graphit); text-align: left; font: inherit;
}
.tag__zeiten button + button { padding-left: 12px; border-left: 1px solid var(--bleistift); }
.tag__zeiten .zeit { font-family: var(--norm); font-size: 22px; line-height: 1; color: inherit; }
.tag__zeiten .was { font-size: 12.5px; }
.tag__zeiten button:hover { color: var(--tusche); }
.tag__zeiten button[aria-current="step"] { color: var(--tusche); border-top-color: var(--befund); }
.tag__zeiten button[aria-current="step"] .zeit { color: var(--befund); }
.tag__stueck { margin-top: 12px; }
.tag__stueck h2 { font-size: 13px; font-weight: 700; letter-spacing: 0; padding-bottom: 6px; border-bottom: var(--linie) solid var(--tusche); display: flex; justify-content: space-between; gap: 12px; }
.tag__stueck h2 span { font-weight: 450; color: var(--graphit); }
.tag__stueck ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.tag__stueck li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--bleistift); font-size: 13.5px; color: var(--graphit); max-width: none; transition: color .3s; }
.tag__stueck li .pos { font-family: var(--norm); font-size: 17px; color: inherit; }
.tag__stueck li.da { color: var(--tusche); border-bottom-style: solid; border-bottom-color: var(--tusche); }
.tag__stueck li.da .pos { color: var(--befund); }
.tag__stueck li.jetzt { font-weight: 650; }

.station { grid-column: 2; min-height: 82vh; min-height: 82svh; padding: 12vh 0; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--bleistift); }
.station h2 { font-size: clamp(32px, 3vw, 46px); line-height: 1.06; letter-spacing: -.03em; font-weight: 750; }
.station h2 .zeit { font-family: var(--norm); font-weight: 400; letter-spacing: 0; color: var(--befund); margin-right: .18em; }
.station > p { margin-top: 16px; font-size: 17.5px; line-height: 1.6; }
.station .grenze { font-size: 15px; }
.station__bild { margin: 26px 0 0; display: grid; grid-template-columns: 148px 1fr; gap: 18px; align-items: center; }
.station__bild img { width: 148px; height: auto; border: 1px solid var(--tusche); background: var(--weiss); aspect-ratio: 1; object-fit: contain; padding: 6px; }
.station__bild figcaption { font-size: 13.5px; color: var(--graphit); line-height: 1.45; }
.station__bild figcaption strong { display: block; color: var(--tusche); font-size: 15px; font-weight: 680; margin-bottom: 2px; }
.station__links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 22px; }
.station__links .pfeillink { margin-top: 0; }
.station:last-of-type { border-bottom: 1px solid var(--bleistift); }
/* Auslauf: Raum, in dem der Behang nach 22:00 ganz zufährt, bevor die Zeichnung den Blick verlässt */
.tag__ende { grid-column: 2; height: 50vh; height: 50svh; }

/* Zeichnung „Ein Tag am Fenster“ */
.tag-svg .ebene-behang { transition: transform .5s var(--ease); }
.tag-svg .nacht { transition: opacity .5s var(--ease); }
.tag-svg .zeiger { transition: transform .5s var(--ease); transform-box: view-box; }
.tag-svg .teil .umriss { fill: var(--blatt); stroke: var(--tusche); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .25s, stroke-width .25s; }
.tag-svg .teil .innen-linie { fill: none; stroke: var(--graphit); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tag-svg .teil.aktiv .umriss { stroke: var(--befund); stroke-width: 2.25; fill: url(#sch-befund); }
.tag-svg .teil.aktiv .verdeckt { stroke: var(--befund); }
.tag-svg .bezug { fill: none; stroke: var(--graphit); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .25s; }
.tag-svg .teil.aktiv .bezug { stroke: var(--befund); stroke-width: 1.5; }
.tag-svg .pos { font-family: var(--norm); font-size: 22px; fill: var(--tusche); }
.tag-svg .teil.aktiv .pos { fill: var(--befund); }
.tag-svg .bezug-punkt { fill: var(--tusche); }
.tag-svg .teil .feder { fill: none; stroke: var(--tusche); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.tag-svg .teil.aktiv .feder { stroke: var(--befund); stroke-width: 2; fill: none; }
.tag-svg .teil.aktiv .bezug-punkt { fill: var(--punkt); stroke: var(--befund); stroke-width: 1.25; }
.tag-svg .uhr-zahl { font-family: var(--norm); font-size: 26px; fill: var(--tusche); }
.tag-svg .uhr-ring { fill: var(--blatt); stroke: var(--tusche); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tag-svg .uhr-strich { stroke: var(--tusche); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.tag-svg .zeiger line { stroke: var(--tusche); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tag-svg .beschrift { font-family: var(--text); font-size: 15px; fill: var(--graphit); }
.tag-svg .mond { transition: opacity .4s var(--ease); }

/* ---------------------------------------------------------------- Sortiment nach Anwendung */
.sortiment__anwendung + .sortiment__anwendung { margin-top: 64px; }
.sortiment__anwendung > h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.025em; font-weight: 740; padding-bottom: 14px; border-bottom: var(--linie) solid var(--tusche); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.sortiment__anwendung > h3 .bald__marke { font-size: 14px; letter-spacing: 0; }
.sortiment__zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 132px; gap: 20px 40px; padding: 22px 0; border-bottom: 1px solid var(--tusche); align-items: center; }
.sortiment__zeile h4 { font-size: 21px; font-weight: 720; letter-spacing: -.015em; margin: 0; }
.sortiment__zeile h4 a { color: var(--tusche); text-decoration: none; }
.sortiment__zeile h4 a:hover { color: var(--befund); text-decoration: underline; }
.sortiment__zeile > div > p { margin-top: 6px; font-size: 14.5px; color: var(--graphit); line-height: 1.5; }
.sortiment__produkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sortiment__produkte li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--bleistift); font-size: 15px; max-width: none; }
.sortiment__produkte li:last-child { border-bottom: 0; }
.sortiment__produkte a { color: var(--tusche); font-weight: 600; text-decoration: none; }
.sortiment__produkte a:hover { color: var(--befund); text-decoration: underline; }
.sortiment__produkte .norm { font-family: var(--norm); font-size: 17px; color: var(--graphit); white-space: nowrap; }
.sortiment__bild { margin: 0; }
.sortiment__bild img { width: 132px; height: 106px; object-fit: cover; border: 1px solid var(--tusche); background: var(--weiss); display: block; }
.sortiment__bild--frei img { object-fit: contain; border: 0; }
.sortiment__leer { padding: 22px 0; font-size: 15.5px; color: var(--graphit); border-bottom: 1px solid var(--tusche); }

/* ---------------------------------------------------------------- Unterschied: Rohrmotor im Längsschnitt mit Stückliste */
.unterschied { margin: 0; }
.unterschied svg { width: 100%; height: auto; display: block; overflow: visible; }
.stueckliste-text { list-style: none; margin: 30px 0 0; padding: 0; border-top: var(--linie) solid var(--tusche); }
.stueckliste-text li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--bleistift); max-width: none; }
.stueckliste-text .pos { font-family: var(--norm); font-size: 26px; line-height: 1; color: var(--befund); }
.stueckliste-text .pos--zusatz::before { content: ""; display: block; width: 18px; border-top: 1.5px dashed var(--tusche); transform: translateY(-6px); }
.stueckliste-text strong { font-size: 18px; font-weight: 720; }
.stueckliste-text p { margin-top: 4px; font-size: 15.5px; line-height: 1.55; color: var(--graphit); }
.stueckliste-text .pfeillink { margin-top: 0; white-space: nowrap; font-size: 14.5px; }

/* Hilfe: Text und Telefon links, nummerierte Liste rechts */
.hilfe { display: block; }
.hilfe h2 { font-size: clamp(32px, 3.3vw, 50px); line-height: 1.06; letter-spacing: -.03em; font-weight: 750; }
.hilfe__band { margin-top: 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 64px; align-items: center; padding: 22px 0 24px; border-top: var(--linie) solid var(--tusche); border-bottom: 1px solid var(--tusche); }
.hilfe__telefon { margin: 0; }
.hilfe__telefon a { font-family: var(--norm); font-size: clamp(36px, 5.4vw, 78px); line-height: 1; color: var(--tusche); text-decoration: none; letter-spacing: 0; }
.hilfe__telefon a:hover { color: var(--befund); }
.hilfe__text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--graphit); max-width: 50ch; }
.linkliste { list-style: none; margin: 0; padding: 0; border-top: var(--linie) solid var(--tusche); }
.linkliste li { padding: 16px 0 18px; border-bottom: 1px solid var(--bleistift); max-width: none; }
.linkliste a { font-size: 19px; font-weight: 720; color: var(--tusche); text-decoration-color: var(--bleistift); }
.linkliste a:hover { color: var(--befund); text-decoration-color: currentColor; }
.linkliste p { margin-top: 4px; font-size: 15.5px; color: var(--graphit); line-height: 1.5; }
/* Als Zeile unter dem Telefonband: drei Felder wie im Schriftfeld, getrennt durch Bleistiftlinien */
.linkliste--zeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
.linkliste--zeile li { padding: 18px 28px 22px; }
.linkliste--zeile li:first-child { padding-left: 0; }
.linkliste--zeile li + li { border-left: 1px solid var(--bleistift); }
@media (max-width: 760px) {
  .hilfe__band { grid-template-columns: 1fr; padding: 18px 0 20px; }
  .linkliste--zeile { grid-template-columns: 1fr; }
  .linkliste--zeile li, .linkliste--zeile li:first-child { padding: 16px 0 18px; }
  .linkliste--zeile li + li { border-left: 0; }
}
.nummernliste { list-style: none; margin: 0; padding: 0; border-top: var(--linie) solid var(--tusche); }
.nummernliste li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0 18px; border-bottom: 1px solid var(--bleistift); max-width: none; }
.nummernliste .nr { font-size: 24px; color: var(--befund); }
.nummernliste a { font-size: 19px; font-weight: 720; color: var(--tusche); text-decoration-color: var(--bleistift); }
.nummernliste a:hover { color: var(--befund); text-decoration-color: currentColor; }
.nummernliste p { margin-top: 4px; font-size: 15.5px; color: var(--graphit); line-height: 1.5; }

/* Über casmartis: Text statt Spalten */
.marke-text { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px 72px; align-items: start; }
.marke-text h2 { font-size: clamp(32px, 3.3vw, 50px); line-height: 1.06; letter-spacing: -.03em; font-weight: 750; }
.marke-text .gross { margin-top: 0; }
.marke-text p + p { margin-top: 14px; }

/* Händler: Linienliste, der Hauptweg mit Knopf */
.haendlerliste { list-style: none; margin: 0; padding: 0; border-top: var(--linie) solid var(--tusche); }
.haendlerliste li { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--tusche); max-width: none; }
.haendlerliste__name { font-size: 24px; font-weight: 740; letter-spacing: -.02em; }
.haendlerliste__text { font-size: 15.5px; color: var(--graphit); line-height: 1.5; }
.haendlerliste li:not(.haendlerliste__haupt) .haendlerliste__name { font-weight: 640; }
.haendlerliste .pfeillink { margin-top: 0; }

/* ---------------------------------------------------------------- Kurzwege (Service, Fachbetriebe) */
.kurzwege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--linie) solid var(--tusche); }
.kurzwege--spalte { grid-template-columns: 1fr; align-self: start; }
.kurzwege--spalte .kurzweg + .kurzweg { padding-left: 0; border-left: 0; border-top: 1px solid var(--tusche); }
.kurzwege--spalte .kurzweg { padding: 16px 0 18px; }
.kurzweg { display: grid; align-content: start; gap: 8px; padding: 22px 24px 26px 0; color: var(--tusche); text-decoration: none; }
.kurzweg + .kurzweg { padding-left: 24px; border-left: 1px solid var(--tusche); }
.kurzweg strong { font-size: 19px; font-weight: 720; letter-spacing: -.01em; }
.kurzweg span { font-size: 15px; color: var(--graphit); line-height: 1.5; max-width: 40ch; }
.kurzweg em { font-style: normal; font-size: 14.5px; font-weight: 680; color: var(--befund); text-decoration: underline; text-underline-offset: .2em; margin-top: 4px; }
a.kurzweg:hover strong { color: var(--befund); }
.kaufbox p, .telefonzeile, .bereich__aktionen, .station__links, .haendler__hinweis { max-width: none; }
.telefonzeile { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 16px 0; border-top: 1px solid var(--tusche); border-bottom: 1px solid var(--tusche); }
.telefonzeile a[href^="tel:"] { font-family: var(--norm); font-size: 28px; color: var(--tusche); text-decoration: none; letter-spacing: 0; }
.telefonzeile a[href^="tel:"]:hover { color: var(--befund); }
.telefonzeile span { color: var(--graphit); font-size: 15px; }

.fach { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 72px; align-items: start; border-top: var(--linie) solid var(--tusche); padding-top: 28px; }
.fach h2 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.028em; font-weight: 750; }
.fach p { font-size: 17px; line-height: 1.6; }
.fach h2 + p { margin-top: 14px; }
.fach__liste { list-style: none; margin: 0; padding: 0; }
.fach__liste li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--bleistift); font-size: 15.5px; max-width: none; }
.fach__liste .nr { font-size: 19px; }
.fach .knopf { margin-top: 22px; }

/* ---------------------------------------------------------------- Produktseite */
.produkt { max-width: var(--breite); margin: 0 auto; padding: 30px var(--seite) 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.produkt__bild { margin: 0; position: sticky; top: calc(var(--leiste-h) + 24px); }
.produkt__bild img { width: 100%; height: auto; border: 1px solid var(--tusche); background: var(--weiss); display: block; }
.produkt__bild figcaption { margin-top: 10px; font-size: 13px; color: var(--graphit); }
.produkt__info h1 { font-size: clamp(34px, 3.2vw, 50px); line-height: 1.05; letter-spacing: -.03em; font-weight: 760; }
.produkt__unter { margin-top: 12px; font-size: 18px; color: var(--graphit); line-height: 1.5; }
.produkt__art { margin-top: 10px; font-size: 13.5px; color: var(--graphit); }
.produkt__art .norm { font-family: var(--norm); font-size: 17px; color: var(--tusche); letter-spacing: 0; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 0 0; border-top: var(--linie) solid var(--tusche); }
.kennzahlen div { padding: 12px 14px 14px 0; border-bottom: 1px solid var(--tusche); }
.kennzahlen div:not(:nth-child(3n + 1)) { padding-left: 14px; border-left: 1px solid var(--bleistift); }
.kennzahlen dt { font-size: 12.5px; color: var(--graphit); }
.kennzahlen dd { margin: 4px 0 0; font-family: var(--norm); font-size: 26px; line-height: 1.05; letter-spacing: 0; }
.kennzahlen dd small { font-family: var(--text); font-size: 12.5px; color: var(--graphit); display: block; margin-top: 3px; }
.varianten-wahl { margin-top: 22px; }
.varianten-wahl p { font-size: 13.5px; color: var(--graphit); margin-bottom: 8px; }
.varianten-wahl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.varianten-wahl li { max-width: none; }
.varianten-wahl a, .varianten-wahl span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--tusche); color: var(--tusche); text-decoration: none; font-family: var(--norm); font-size: 18px; letter-spacing: 0; }
.varianten-wahl a:hover { background: var(--tisch); }
.varianten-wahl [aria-current="page"] { background: var(--tusche); color: var(--blatt); border-color: var(--tusche); }
.kaufbox { margin-top: 26px; border: var(--linie) solid var(--tusche); }
.kaufbox__kopf { padding: 12px 14px; border-bottom: 1px solid var(--tusche); font-size: 13.5px; color: var(--graphit); display: flex; justify-content: space-between; gap: 12px; }
.kaufbox__wege { padding: 14px; display: grid; gap: 10px; }
.kaufbox__weitere { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; font-weight: 640; }
.kaufbox__vorgabe { padding: 12px 14px 14px; border-top: 1px solid var(--tusche); }
.kaufbox__vorgabe .grenze { margin-top: 0; }
.kaufbox__sender { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.kaufbox__sender li { padding: 7px 0; border-bottom: 1px solid var(--bleistift); font-size: 14.5px; max-width: none; display: flex; justify-content: space-between; gap: 10px; }
.kaufbox__sender a { color: var(--tusche); font-weight: 620; }
.kaufbox__sender span { color: var(--graphit); font-size: 13px; }
.kaufbox__set { margin-top: 12px; font-size: 14.5px; }
.kaufbox__garantie { padding: 12px 14px; border-top: 1px solid var(--tusche); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.produkt__passt { margin-top: 22px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--tusche); border-bottom: 1px solid var(--tusche); }
.produkt__passt svg { width: 58px; height: 58px; overflow: visible; }
.produkt__passt p { font-size: 15px; line-height: 1.5; }
.produkt__passt a { font-weight: 680; }

.datenblatt { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.datenblatt caption { text-align: left; font-size: 13.5px; color: var(--graphit); padding-bottom: 10px; }
.datenblatt tbody { border-top: var(--linie) solid var(--tusche); }
.datenblatt th, .datenblatt td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--bleistift); vertical-align: baseline; }
.datenblatt th { font-weight: 450; color: var(--graphit); width: 38%; font-size: 14.5px; }
.datenblatt td .norm { font-family: var(--norm); font-size: 19px; letter-spacing: 0; }
.datenblatt-flaeche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.datenblatt-flaeche h3 { margin-bottom: 14px; }

.massfig { margin: 0; }
.massfig .zg { display: block; width: 100%; height: auto; overflow: visible; }
.massfig .zg-quelle { position: absolute; width: 0; height: 0; overflow: hidden; }
.massfig .zg-teile { display: none; }
.mz-v { stroke: var(--tusche); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mz-vd { stroke: var(--tusche); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mz-i { stroke: var(--graphit); stroke-width: .9; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mz-s { stroke: var(--graphit); stroke-width: .9; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mz-m { stroke: var(--bleistift); stroke-width: .9; stroke-dasharray: 18 4 3 4; vector-effect: non-scaling-stroke; }
.mz-sz { stroke: var(--bleistift); stroke-width: 1.25; stroke-dasharray: 14 3 2 3 2 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mz-vk { stroke: var(--tusche); stroke-width: 1.1; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.mz-hw { stroke: var(--graphit); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mz-pk { fill: var(--tusche); }
.mz-v:not([fill]), .mz-vd:not([fill]), .mz-i:not([fill]), .mz-s:not([fill]), .mz-m:not([fill]), .mz-sz:not([fill]), .mz-vk:not([fill]), .mz-hw:not([fill]), .mz-sf:not([fill]) { fill: none; }
.mz-t, .mz-tk { font-family: var(--norm); fill: var(--tusche); }
.mz-ta, .mz-tb, .mz-pos { font-family: var(--norm); fill: var(--graphit); }
.mz-sf { stroke: var(--tusche); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.mz-sfl { stroke: var(--tusche); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mz-sfk { font-family: var(--text); fill: var(--graphit); }
.mz-sfw { font-family: var(--text); fill: var(--tusche); font-weight: 560; }
.massfig .zg-zwischen { font-family: var(--norm); font-size: 18px; line-height: 1.2; }
.reihe__produkt { display: block; margin-top: 6px; font-family: var(--text); font-size: 13.5px; font-weight: 640; letter-spacing: 0; line-height: 1.3; }
@media (max-width: 760px) {
  .massfig .zg-ganz { display: none; }
  .massfig .zg-teile { display: grid; gap: 26px; justify-items: center; }
  .massfig .zg-teil { width: 100%; height: auto; overflow: hidden; }
  .massfig .zg-zwischen { justify-self: stretch; margin: 6px 0 -8px; padding-top: 12px; border-top: 1px solid var(--tusche); }
}
.downloads { list-style: none; margin: 0; padding: 0; border-top: var(--linie) solid var(--tusche); }
.downloads li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--bleistift); max-width: none; font-size: 15.5px; }
.downloads a { color: var(--tusche); font-weight: 620; }
.downloads a:hover { color: var(--befund); }
.downloads .art { font-family: var(--norm); font-size: 16px; color: var(--graphit); letter-spacing: 0; }
.downloads .folgt { color: var(--graphit); }

.verwandt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--linie) solid var(--tusche); }
.verwandt a { display: grid; gap: 4px; padding: 16px 18px 18px 0; color: var(--tusche); text-decoration: none; }
.verwandt a + a { padding-left: 18px; border-left: 1px solid var(--bleistift); }
.verwandt .norm { font-family: var(--norm); font-size: 26px; letter-spacing: 0; }
.verwandt span:last-child { font-size: 14px; color: var(--graphit); }
.verwandt a:hover .norm { color: var(--befund); }

/* ---------------------------------------------------------------- Sender-Reihe (Produktlinie Sender) */
.senderreihe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--linie) solid var(--tusche); }
.senderreihe article { padding: 18px 16px 20px 0; display: grid; align-content: start; gap: 8px; }
.senderreihe article + article { padding-left: 16px; border-left: 1px solid var(--bleistift); }
.senderreihe img { width: 100%; height: clamp(170px, 17vw, 240px); object-fit: contain; background: var(--weiss); border: 1px solid var(--tusche); padding: 6px; }
.senderreihe h3 { font-family: var(--norm); font-weight: 400; font-size: 26px; letter-spacing: 0; line-height: 1; margin-top: 6px; }
.senderreihe p { font-size: 14px; line-height: 1.5; color: var(--graphit); }
.senderreihe .links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; font-weight: 640; margin-top: 2px; }

/* ---------------------------------------------------------------- Varianten Kabel / Funk */
.varianten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--linie) solid var(--tusche); }
.variante { padding: 24px 32px 28px 0; display: grid; grid-template-columns: 180px 1fr; gap: 6px 24px; align-content: start; }
.variante + .variante { padding-left: 32px; border-left: 1px solid var(--tusche); }
.variante figure { margin: 0; grid-row: span 4; }
.variante img { width: 180px; border: 1px solid var(--tusche); background: var(--weiss); aspect-ratio: 1; object-fit: cover; }
.variante h3 { font-size: 23px; }
.variante h3 small { display: block; font-size: 14px; font-weight: 500; color: var(--graphit); margin-top: 4px; letter-spacing: 0; }
.variante ul { margin: 6px 0 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.55; }
.variante li { margin-top: 4px; }
.variante .pfeillink { margin-top: 10px; }

/* Schritte (Einlernen, Einbau) */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--linie) solid var(--tusche); counter-reset: schritt; }
.schritte li { padding: 18px 20px 20px 0; display: grid; gap: 8px; align-content: start; font-size: 15.5px; line-height: 1.5; max-width: none; }
.schritte li + li { padding-left: 20px; border-left: 1px solid var(--bleistift); }
.schritte li::before { counter-increment: schritt; content: counter(schritt); font-family: var(--norm); font-size: 30px; line-height: 1; color: var(--befund); }
.schritte strong { font-weight: 700; }

/* Prinzipfigur Schrägverzahnung */
.prinzip { margin: 0; }
.prinzip svg { width: 100%; max-width: 520px; height: auto; display: block; }

/* Legende kompakt */
.legende--kompakt { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--bleistift); }

/* ---------------------------------------------------------------- Seitenfuß */
.seitenfuss { margin-top: 150px; border-top: var(--linie) solid var(--tusche); }
.seitenfuss__innen { max-width: var(--breite-weit); margin: 0 auto; padding: 44px var(--seite) 40px; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
.seitenfuss__marke img { width: 150px; height: auto; display: block; }
.seitenfuss__marke p { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--graphit); max-width: 36ch; }
.seitenfuss__marke a[href^="tel:"] { font-family: var(--norm); font-size: 22px; color: var(--tusche); text-decoration: none; letter-spacing: 0; }
.seitenfuss nav h2 { font-size: 14px; font-weight: 720; letter-spacing: 0; padding-bottom: 10px; border-bottom: var(--linie) solid var(--tusche); }
.seitenfuss nav ul { list-style: none; margin: 0; padding: 0; }
.seitenfuss nav li a { display: block; padding: 8px 0; border-bottom: 1px solid var(--bleistift); color: var(--tusche); text-decoration: none; font-size: 15px; }
.seitenfuss nav li a:hover { color: var(--befund); text-decoration: underline; }
.seitenfuss__zeile { background: var(--tisch); }
.seitenfuss__zeile div { max-width: var(--breite-weit); margin: 0 auto; padding: 14px var(--seite); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--graphit); }
.seitenfuss__zeile a { color: var(--graphit); }
.seitenfuss__zeile a:hover { color: var(--tusche); }

/* ---------------------------------------------------------------- Mittlere Breiten */
@media (max-width: 1180px) {
  .leiste__innen { gap: 18px; }
  .leiste__liste > li > a, .leiste__knopf { padding: 0 10px; font-size: 15px; }
  .mega__innen { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .mega__bild { display: none; }
  .senderreihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .senderreihe article:nth-child(4) { padding-left: 0; border-left: 0; }
  .senderreihe article:nth-child(n + 4) { border-top: 1px solid var(--bleistift); }
  .verwandt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verwandt a:nth-child(3) { padding-left: 0; border-left: 0; }
  .verwandt a:nth-child(n + 3) { border-top: 1px solid var(--bleistift); }
  .variante { grid-template-columns: 1fr; }
  .variante figure { grid-row: auto; }
  .variante img { width: 160px; }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte li:nth-child(3) { padding-left: 0; border-left: 0; }
  .schritte li:nth-child(n + 3) { border-top: 1px solid var(--bleistift); }
  .seitenfuss__innen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seitenfuss__marke { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Kopf als Schublade */
@media (max-width: 1020px) {
  :root { --leiste-h: 64px; }
  .leiste__innen { gap: 12px; }
  .leiste__logo img { width: 116px; }
  .leiste__nav { display: none; position: fixed; z-index: 45; top: var(--leiste-h); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--blatt); border-top: var(--linie) solid var(--tusche); padding: 6px var(--seite) 40px; }
  .leiste.offen .leiste__nav { display: block; }
  .leiste__liste { flex-direction: column; gap: 0; }
  .leiste__liste > li { border-bottom: 1px solid var(--bleistift); }
  .leiste__liste > li > a, .leiste__knopf { width: 100%; height: auto; min-height: 56px; padding: 14px 0; font-size: 18px; justify-content: space-between; }
  .leiste__liste > li > a:hover, .leiste__knopf:hover, .leiste__knopf[aria-expanded="true"], .leiste__liste > li > a[aria-current="page"], .leiste__knopf.ist-hier { box-shadow: none; color: var(--befund); }
  .mega { position: static; border-bottom: 0; }
  .mega__innen { grid-template-columns: 1fr; padding: 4px 0 24px; gap: 24px; }
  .mega__gruppen { grid-template-columns: 1fr; gap: 20px; }
  .mega__anwendung > h2, .mega__seite > h2 { font-size: 19px; margin-bottom: 12px; }
  .mega li a, .mega li > span { min-height: 44px; align-items: center; }
  .leiste__kauf { margin-left: auto; min-height: 40px; padding: 0 12px; font-size: 14px; }
  .leiste__menue { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: none; border: 1.5px solid var(--tusche); font: inherit; font-size: 15px; font-weight: 680; color: var(--tusche); cursor: pointer; }
  .leiste__menue i { display: block; width: 16px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; }
  .leiste__menue i::after { content: ""; position: absolute; left: 0; right: 0; top: 2.75px; border-top: 1.5px solid currentColor; }
  .leiste.offen .leiste__menue { background: var(--tusche); color: var(--blatt); }
}

/* ---------------------------------------------------------------- Tablet: Startseite und Bereiche einspaltig */
@media (max-width: 920px) {
  .tag { display: block; }
  .tag__auftakt { padding: 30px 0 26px; }
  .tag__buehne { position: sticky; top: var(--leiste-h); z-index: 2; height: auto; min-height: 0; max-height: none; background: var(--blatt); padding: 10px 0 4px; border-bottom: 1px solid var(--tusche); }
  .tag__fig { height: clamp(180px, 30svh, 270px); }
  .tag__fig figcaption { display: none; }
  .tag__zeiten { margin-top: 6px; }
  .tag__zeiten .was { display: none; }
  .tag__stueck { display: none; }
  .station { min-height: 0; padding: 56px 0 64px; }
  .station:first-of-type { border-top: 0; }
  .tag__ende { height: 0; }
  .bereich, .produkt, .datenblatt-flaeche, .fach, .hilfe, .marke-text { grid-template-columns: 1fr; }
  .haendlerliste li { grid-template-columns: 1fr; gap: 6px; }
  .haendlerliste .knopf--inline { justify-self: start; }
  .stueckliste-text li { grid-template-columns: 36px minmax(0, 1fr); }
  .stueckliste-text .pfeillink { grid-column: 2; }
  .produkt__bild { position: static; }
  .sortiment__zeile { grid-template-columns: minmax(0, 1fr) 104px; }
  .sortiment__zeile > div:first-child { grid-column: 1 / -1; }
  .sortiment__bild { grid-column: 2; grid-row: 2; }
  .sortiment__bild img { width: 104px; height: 84px; }
  .kurzwege { grid-template-columns: 1fr; }
  .kurzweg + .kurzweg { padding-left: 0; border-left: 0; border-top: 1px solid var(--tusche); }
  .varianten { grid-template-columns: 1fr; }
  .variante + .variante { padding-left: 0; border-left: 0; border-top: 1px solid var(--tusche); }
}

/* ---------------------------------------------------------------- Handy */
@media (max-width: 760px) {
  .leiste__logo img { width: 104px; }
  .leiste__kauf { display: none; }
  .leiste__menue { margin-left: auto; }
  .tag__auftakt h1 { font-size: 40px; }
  .tag__unter { font-size: 17px; }
  .tag__wellen { gap: 26px; }
  .tag__zeiten button { padding: 6px 6px 6px 0; }
  .tag__zeiten button + button { padding-left: 8px; }
  .tag__zeiten .zeit { font-size: 19px; }
  .tag-svg .pos { font-size: 30px; }
  .tag-svg .uhr-zahl { font-size: 38px; }
  .station h2 { font-size: 30px; }
  .station > p { font-size: 16.5px; }
  .station__bild { grid-template-columns: 104px 1fr; gap: 14px; }
  .station__bild img { width: 104px; }
  .bereich { padding-top: 26px; }
  .bereich h1 { font-size: 36px; }
  .bereich__lead { font-size: 17.5px; }
  .bereich__fakten li { grid-template-columns: 112px 1fr; }
  .sortiment__produkte li { flex-wrap: wrap; gap: 2px 12px; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahlen div:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .kennzahlen div:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--bleistift); }
  .kaufbox__sender { grid-template-columns: 1fr; }
  .senderreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .senderreihe article:nth-child(n) { padding-left: 0; border-left: 0; padding-right: 10px; }
  .senderreihe article:nth-child(2n) { padding-left: 12px; border-left: 1px solid var(--bleistift); }
  .senderreihe article:nth-child(n + 3) { border-top: 1px solid var(--bleistift); }
  .schritte { grid-template-columns: 1fr; }
  .schritte li, .schritte li + li { padding-left: 0; border-left: 0; }
  .schritte li + li { border-top: 1px solid var(--bleistift); }
  .verwandt { grid-template-columns: 1fr 1fr; }
  .seitenfuss { margin-top: 96px; }
  .seitenfuss__innen { grid-template-columns: 1fr 1fr; }
  .seitenfuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .seitenfuss__innen { grid-template-columns: 1fr; }
  .verwandt { grid-template-columns: 1fr; }
  .verwandt a, .verwandt a + a { padding-left: 0; border-left: 0; }
  .verwandt a + a { border-top: 1px solid var(--bleistift); }
  /* Wellenwahl: die zwei Links rutschen unter die Achtecke, statt seitlich überzustehen */
  .tag__wellen { flex-wrap: wrap; gap: 14px 26px; }
  .tag__wellen-rest { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tag-svg .ebene-behang, .tag-svg .nacht, .tag-svg .zeiger, .tag__stueck li, .leiste__knopf::after { transition: none !important; }
}