/* Nahweb · Inhaltsseiten (Runde 13): website-handwerk.html, website-restaurant.html, website-coiffeur.html, region.html,
   was-kostet-eine-website.html, selbsttest.html (Block «r13 Selbsttest» am Ende). Ergänzt style.css: Kopf, Fuss, Leiste, Knöpfe, Fragen, Personen, Karte mit Fahrzeit-Finder und
   die Tabellen der Orte kommen von dort. Klassen mit «sv-» (Seitenvorlage; «s-» gehört der gezeichneten Strasse).
   Der Farbroller im Held der Branchenseiten ist dasselbe Bauteil wie auf den Beispielen (beispiele/_rahmen/vergleich-v1.js,
   Regeln aus rahmen.css hierher übertragen). Erklärungen: README «Inhaltsseiten». */

/* Held */
.sv-held { position: relative; padding: calc(var(--kopf-h) + clamp(14px, 3.6vw, 52px)) 0 clamp(52px, 6.5vw, 104px); }
.sv-held::before, .sv-artikel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 620px; pointer-events: none;
  background: radial-gradient(50% 70% at 85% 0%, rgba(236, 90, 58, .14), transparent 70%);
}
.sv-held-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(36px, 5vw, 56px); }
.sv-held-text { min-width: 0; max-width: 620px; }

.sv-krumen ol { display: flex; flex-wrap: wrap; align-items: center; margin: -8px 0 0; font-size: 14px; line-height: 1.3; color: var(--stein); }
.sv-krumen li { display: inline-flex; align-items: center; }
.sv-krumen li + li::before { content: "›"; content: "›" / ""; margin: 0 9px; }
.sv-krumen a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; color: var(--tinte-2); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 4px; }
@media (hover: hover) { .sv-krumen a:hover { color: var(--tinte); text-decoration-color: currentColor; } }

.sv-titel {
  margin-top: 4px; font-family: var(--titel); font-weight: 700; font-stretch: 96%;
  font-size: 40px; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: break-word;
}
.sv-titel em {
  font-family: var(--akzent); font-style: italic; font-weight: 400; font-stretch: 100%;
  font-size: 1.1em; letter-spacing: -.015em; line-height: .8; color: var(--orange-gross); padding-right: .04em;
}
@media (max-width: 359px) { .sv-titel { font-size: 36px; } }
/* Ersatzschrift «G» (style.css, wie der grosse Titel der Startseite): bricht wie Bricolage um, solange diese lädt (kein Sprung) */
@media (min-width: 600px) { .sv-titel { font-size: clamp(46px, 5.2vw, 72px); font-family: "Bricolage Grotesque", "Bricolage Ersatz G", "Bricolage Ersatz GR", ui-sans-serif, system-ui, sans-serif; } }
.sv-lead { margin-top: 18px; max-width: 34em; font-size: 19px; line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }
.sv-lead a { color: var(--tinte); font-weight: 600; }
@media (min-width: 1024px) { .sv-lead { margin-top: 22px; font-size: 21px; } }
.sv-knoepfe { margin-top: 26px; display: grid; gap: 10px; }
@media (min-width: 600px) { .sv-knoepfe { display: flex; flex-wrap: wrap; } }
.sv-fakten { margin-top: 22px; }

/* Abschnitte */
.sv-abschnitt { padding-block: calc(var(--abstand) * .7); }
.sv-kopf { max-width: 46rem; }
.sv-h2 {
  font-family: var(--titel); font-weight: 700; font-stretch: 96%;
  font-size: 30px; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; overflow-wrap: break-word;
}
@media (min-width: 600px) { .sv-h2 { font-size: clamp(34px, 3.4vw, 46px); } }
.sv-einleitung { margin-top: 14px; max-width: 38em; font-size: 18px; line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
@media (min-width: 1024px) { .sv-einleitung { margin-top: 18px; font-size: 19.5px; } }
.sv-text { max-width: 40em; }
.sv-text > p:not([class]) { font-size: 17px; line-height: 1.62; color: var(--tinte-2); text-wrap: pretty; }
.sv-text > p + p { margin-top: 12px; }
:is(.sv-text, .sv-einleitung, .sv-preis-zeilen, .sv-teil, .sv-wissen, .sv-zeit) a { color: var(--tinte); font-weight: 600; }
.sv-abschnitt.sand .frage { background: var(--sand); }

/* Pfeil-Link (wie «Alle 52 Orte mit Fahrzeit») */
.sv-weiter { margin-top: 20px; display: flex; flex-wrap: wrap; column-gap: 28px; }
.sv-pfeil-link {
  display: inline-block; padding-block: 10px; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--tinte);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.sv-pfeil-link svg { display: inline-block; width: 16px; height: 16px; margin-left: 7px; vertical-align: -2px; transition: transform var(--dauer-hover) var(--ease-expo); }
@media (hover: hover) { .sv-pfeil-link:hover { color: var(--orange-text); } .sv-pfeil-link:hover svg { transform: translateX(3px); } }
.dunkel .sv-pfeil-link { color: var(--papier); text-decoration-color: var(--orange); }
@media (hover: hover) { .dunkel .sv-pfeil-link:hover { color: #FF8A6A; } }

/* Merkliste mit Nummern im Bleistiftkreis (Kreise aus der gezeichneten Strasse) */
.sv-merk { margin-top: clamp(28px, 3.5vw, 44px); display: grid; gap: 26px; }
.sv-merk > li { position: relative; padding-left: 52px; }
.sv-nr {
  position: absolute; left: 0; top: -6px; display: grid; place-items: center; width: 38px; height: 38px;
  font: 650 14.5px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--tinte);
  background: center / 100% 100% no-repeat;
}
.sv-merk-titel { font-family: var(--titel); font-weight: 700; font-size: 19.5px; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.sv-merk p { margin-top: 6px; max-width: 34em; font-size: 16.5px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
.sv-merk p strong { color: var(--tinte); font-weight: 650; }
.sv-nr + p { margin-top: 0; }
@media (min-width: 900px) {
  .sv-merk-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 64px; }
  .sv-merk-titel { font-size: 21px; }
}

/* Zahlen mit Quelle */
.sv-zahlen { margin: clamp(36px, 4.5vw, 60px) 0 0; }
.sv-zahlen-reihe { display: grid; gap: 22px; }
@media (min-width: 720px) { .sv-zahlen-reihe { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 40px; } }
.sv-zahl { padding-top: 14px; border-top: 1.3px solid rgba(59, 56, 51, .7); }
.sv-zahl-wert { font-family: var(--titel); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--orange-text); }
.sv-zahl-satz { margin-top: 8px; max-width: 22em; font-size: 17px; line-height: 1.45; color: var(--tinte); }
.sv-zahl-satz span { color: var(--tinte-2); }
@media (min-width: 1024px) { .sv-zahl-wert { font-size: 58px; } }
.sv-quelle { margin-top: 18px; max-width: 52em; font-size: 14px; line-height: 1.5; color: var(--tinte-2); }
.sv-quelle a { color: inherit; }

/* Gut zu wissen, Ihr Ort fehlt? */
.sv-wissen {
  margin-top: clamp(32px, 4vw, 48px); max-width: 44rem; padding: 18px 22px 20px;
  border-left: 3px solid var(--rotstift); border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  background: var(--weiss); box-shadow: var(--schatten);
}
.sv-wissen-titel { font: 650 13px/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-text); }
.sv-wissen p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
.sv-wissen strong { color: var(--tinte); font-weight: 650; }
.sv-wissen .sv-klein { font-size: 14.5px; }

/* Am Beispiel … */
.sv-beispiel { margin-top: clamp(26px, 3vw, 40px); display: grid; gap: 34px; }
@media (min-width: 900px) { .sv-beispiel { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: clamp(48px, 6vw, 96px); align-items: center; } }
.sv-beispiel .haken-liste { margin-top: 18px; gap: 12px; }
.sv-beispiel .haken-liste li { font-size: 17px; line-height: 1.45; }
.sv-klein { margin-top: 20px; max-width: 36em; font-size: 14.5px; line-height: 1.5; color: var(--tinte-2); }
.sv-karte-link {
  display: block; max-width: 400px; overflow: hidden; color: inherit; text-decoration: none;
  border-radius: var(--radius-gross); background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten);
  transition: transform var(--dauer-zustand) var(--ease-expo), box-shadow var(--dauer-zustand) var(--ease-aus);
}
.sv-karte-link img { width: 100%; }
.sv-karte-link-text {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 14px 22px;
  border-top: 1px solid var(--linie); font-weight: 650; font-size: 16.5px; line-height: 1.3;
}
.sv-karte-link-text svg { flex: none; width: 20px; height: 20px; color: var(--orange-text); transition: transform var(--dauer-hover) var(--ease-expo); }
@media (hover: hover) {
  .sv-karte-link:hover { transform: translateY(-3px); box-shadow: var(--schatten-gross); }
  .sv-karte-link:hover .sv-karte-link-text svg { transform: translate(2px, -2px); }
}
.sv-karte-link:focus-visible { outline-offset: 4px; border-radius: var(--radius-gross); }

/* Was wir liefern, was es kostet */
.sv-pakete { margin-top: clamp(34px, 4vw, 52px); display: grid; gap: 30px 20px; }
@media (min-width: 800px) { .sv-pakete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
.sv-paket {
  position: relative; padding: 26px 24px 26px; border-radius: var(--radius-gross);
  background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.sv-paket-tipp { background: var(--nacht); color: var(--papier); border-color: transparent; box-shadow: var(--schatten-gross); }
.sv-paket-band {
  position: absolute; top: -14px; left: 22px; padding: 6px 13px; border-radius: 999px;
  background: var(--orange); color: var(--tinte); font-size: 13px; font-weight: 700; line-height: 1.3;
}
.sv-paket-name { font-family: var(--titel); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.sv-paket-preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-top: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--linie); }
.sv-paket-tipp .sv-paket-preis { border-color: var(--nacht-linie); }
.sv-paket-chf { font-weight: 650; font-size: 17px; color: var(--tinte-2); }
.sv-paket-betrag { font-family: var(--titel); font-weight: 700; font-size: 54px; line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.sv-paket-einmal { font-size: 15.5px; font-weight: 500; color: var(--tinte-2); }
.sv-paket-text { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
.sv-paket-tipp :is(.sv-paket-chf, .sv-paket-einmal, .sv-paket-text) { color: #D9D2C7; }
@media (min-width: 1024px) { .sv-paket { padding: 34px 36px 32px; } .sv-paket-band { left: 34px; } .sv-paket-betrag { font-size: 64px; } }
@media (max-width: 359px) { .sv-paket-band { position: static; display: inline-block; margin: -6px 0 12px; } }
.sv-preis-zeilen { margin-top: 30px; display: grid; gap: 12px; max-width: 46em; }
.sv-preis-zeilen p { font-size: 16.5px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
.sv-preis-zeilen strong { color: var(--tinte); font-weight: 650; }

/* So läuft es ab */
.sv-schritte { margin-top: clamp(30px, 3.5vw, 48px); display: grid; gap: 26px; }
.sv-schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: end; padding-top: 16px; border-top: 1.3px solid rgba(59, 56, 51, .7); }
.sv-schritt-nr { font-family: var(--titel); font-weight: 700; font-size: 52px; line-height: .85; color: transparent; -webkit-text-stroke: 1.4px var(--tinte); }
.sv-schritt-titel { margin-bottom: .1em; font-family: var(--titel); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.sv-schritt p { grid-column: 1 / -1; margin-top: 10px; max-width: 30em; font-size: 16.5px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
@media (min-width: 900px) {
  .sv-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  .sv-schritt { display: block; padding-top: 22px; }
  .sv-schritt-nr { font-size: 68px; }
  .sv-schritt-titel { margin: 16px 0 0; font-size: 23px; }
}
.sv-zeit { margin-top: 30px; display: flex; align-items: flex-start; gap: 12px; max-width: 46em; font-size: 16.5px; line-height: 1.55; color: var(--tinte-2); }
.sv-zeit svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--orange-text); }
.sv-zeit strong { color: var(--tinte); font-weight: 650; }

/* Fragen: Klassen der Startseite (fragen-raster, frage); hier nur der Titel */
.sv-fragen .fragen-kopf .sv-h2 { max-width: 12em; }
@media (min-width: 1024px) { .sv-fragen .fragen-raster { gap: 72px; } }

/* Ausprobieren */
.sv-probieren {
  margin-top: clamp(24px, 3vw, 36px); display: grid; overflow: hidden;
  border-radius: var(--radius-gross); background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.sv-probieren img { width: 100%; aspect-ratio: 800 / 495; object-fit: cover; }
.sv-probieren-text { padding: 22px 22px 26px; }
.sv-probieren-titel { font-family: var(--titel); font-weight: 700; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.sv-probieren-text p { margin-top: 8px; max-width: 30em; font-size: 16.5px; line-height: 1.6; color: var(--tinte-2); }
.sv-probieren-text .knopf { margin-top: 20px; }
@media (min-width: 800px) {
  .sv-probieren { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
  .sv-probieren-text { padding: 36px clamp(28px, 4vw, 52px); }
  .sv-probieren-titel { font-size: 27px; }
}

/* Schluss (dunkel) */
.sv-schluss { position: relative; overflow: hidden; padding-block: calc(var(--abstand) * .85); }
.sv-schluss .kontakt-licht { left: auto; right: -30%; top: -40%; }
.sv-schluss-text { position: relative; max-width: 960px; }
.sv-schluss .abschnitt-lead { max-width: 34em; }
.sv-schluss .titel-gross { margin-top: 0; }
.sv-schluss .kontakt-knoepfe { margin-top: 30px; }
.sv-schluss .sv-weiter { margin-top: 18px; }
@media (min-width: 360px) and (max-width: 599px) {
  .sv-schluss .kontakt-knoepfe { display: grid; }
}

/* Regionsseite */
/* Liste aller Orte und Moment 1/2 der Karte: bis Teil B im Block «r13 Nah» von style.css, jetzt hier, weil nur die
   Regionsseite sie braucht (die Startseite lädt damit rund 0,65 KB gz weniger CSS vor dem ersten Bild). */
.orte-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 46rem; }
@media (min-width: 1000px) { .orte-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 56px; max-width: none; } }
@media (min-width: 600px) { .orte-tabelle [id$="-tagelswangen"] td:first-of-type { min-width: 8.5em; } }
.orte-titel { font-family: var(--titel); font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.orte-tabelle { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 16px; line-height: 1.35; }
.orte-tabelle :is(th, td) { height: 48px; padding: 8px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
.orte-tabelle thead th { height: auto; padding-top: 0; font-size: 13.5px; font-weight: 600; color: var(--stein); }
.orte-tabelle tbody th { font-weight: 600; }
.orte-tabelle :is(td, thead th + th) { width: 1%; padding-left: 12px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orte-tabelle thead th + th { white-space: normal; }
.orte-tabelle [id$="-tagelswangen"] td:first-of-type { min-width: 6em; white-space: normal; }
.orte-tabelle tbody tr:target { background: var(--orange-zart); }
.orte-plz { display: inline-block; min-width: 46px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--stein); }
.orte-gemeinde { display: block; padding-left: 50px; font-size: 13.5px; font-weight: 500; color: var(--stein); }
@media (max-width: 599px) {
  .orte-tabelle { font-size: 15.5px; }
  .orte-tabelle :is(td, thead th + th) { padding-left: 10px; }
  .orte-plz { display: block; min-width: 0; font-size: 13.5px; line-height: 1.3; }
  .orte-gemeinde { padding-left: 0; font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js:not(.js-notfall) .nah-karte[data-zeichnen]:not(.ist-gezeichnet, .zeichnet) .strasse > g:not(.s-heim) { visibility: hidden; }
  .nah-karte.zeichnet :is(.s-strich, .s-pfeil) { stroke-dasharray: 1 2; animation: s-zeichnen 700ms var(--ease-inout) both; }
  .nah-karte.zeichnet .s-strasse.i1 { animation-delay: 120ms; }
  .nah-karte.zeichnet .s-massstab { animation-delay: 300ms; }
  .nah-karte.zeichnet .s-kreis { animation-duration: 280ms; animation-delay: calc(450ms + var(--k, 0) * 45ms); }
  .nah-karte.zeichnet .s-ort:not(.ist-gewaehlt) :is(.s-name, .s-name-handy) { animation: s-ein 200ms var(--ease-aus) both; animation-delay: calc(700ms + var(--k, 0) * 45ms); }
  .nah-karte.zeichnet .s-punkt { animation: s-ein 200ms var(--ease-aus) both; animation-delay: calc(450ms + var(--k, 0) * 45ms); }
  .nah-karte.zeichnet .s-pinsel { mask: url("#s-malen"); }
  .nah-karte.zeichnet .s-malweg-maske { stroke-dasharray: 1 2; animation: s-zeichnen 1000ms var(--ease-inout) 900ms both; }
  .nah-karte.zeichnet .s-zeit { animation: s-ein 240ms var(--ease-aus) 1300ms both; }
  .nah-karte.zeichnet .s-zeit + .s-zeit { animation-delay: 1900ms; }
  .nah-karte.zeichnet .s-pfeil { animation-duration: 300ms; animation-delay: 2000ms; }
  .nah-karte.zeichnet .s-notiz { animation: s-notiz 360ms var(--ease-aus) 2050ms both; }
  .nah-karte[data-zeichnen] .s-tupfer :is(.s-tupfer-farbe, .s-borste) { stroke-dasharray: 1 2; animation: s-zeichnen 320ms var(--ease-aus) both; }
  .nah-karte[data-zeichnen] .frisch :is(.s-name, .s-name-handy) { animation: s-ein 160ms var(--ease-aus) 300ms both; }
}
@keyframes s-zeichnen { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes s-ein { from { opacity: 0; } }
@keyframes s-notiz { from { opacity: 0; transform: translateX(-4px); } }
@media (min-width: 1024px) {
  .sv-held-karte .sv-held-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: clamp(48px, 5vw, 88px); align-items: center; }
  .sv-held-roller .sv-held-raster { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); column-gap: clamp(48px, 5vw, 96px); align-items: center; }
}
.sv-held-karte .nah-karte { width: 100%; max-width: 560px; justify-self: center; }
.sv-orte .orte-raster { margin-top: clamp(30px, 3.5vw, 44px); }
@media (min-width: 1000px) {
  .sv-orte .orte-raster { display: block; columns: 2; column-gap: 56px; }
  .sv-orte .orte-gruppe { break-inside: avoid; padding-bottom: 40px; }
}
@media (min-width: 360px) { .sv-orte .orte-tabelle [id$="-tagelswangen"] td:first-of-type { white-space: nowrap; } }
.sv-orte .sv-quelle { margin-top: 26px; }
.sv-wer .personen { margin-top: 34px; }
@media (max-width: 899px) { .sv-wer-raster > .sv-text + .sv-text { margin-top: 56px; } }
@media (min-width: 900px) {
  .sv-wer-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: start; }
}

/* Ratgeber: Artikel mit Inhaltsverzeichnis */
.sv-artikel { position: relative; padding: calc(var(--kopf-h) + clamp(14px, 3.6vw, 52px)) 0 calc(var(--abstand) * .7); }
.sv-artikel-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.sv-artikel-kopf { min-width: 0; max-width: 46rem; }
.sv-artikel-kopf .sv-lead { max-width: none; }
.sv-stand { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--tinte-2); }
.sv-inhalt { margin-top: 28px; padding: 12px 8px 8px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); }
.sv-inhalt-titel { padding: 2px 12px 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); }
.sv-inhalt a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 8px;
  min-height: 44px; padding: 4px 10px; border-radius: 10px;
  font-size: 15.5px; line-height: 1.3; color: var(--tinte-2); text-decoration: none;
  transition: background-color var(--dauer-hover) var(--ease-aus), color var(--dauer-hover) var(--ease-aus);
}
@media (hover: hover) { .sv-inhalt a:hover { background: var(--sand); color: var(--tinte); } }
.sv-inhalt-nr { font-family: var(--titel); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--orange-text); }
.sv-artikel-text { min-width: 0; }
@media (min-width: 1100px) {
  .sv-artikel-raster { grid-template-columns: 220px minmax(0, 52rem); column-gap: clamp(48px, 5vw, 80px); }
  .sv-artikel-kopf { grid-column: 2; grid-row: 1; }
  .sv-inhalt {
    grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: calc(var(--kopf-h) + 28px);
    margin-top: 44px; padding: 0; border: 0; border-radius: 0; background: none;
  }
  .sv-inhalt-titel { padding: 0 0 10px; }
  .sv-inhalt ol { border-left: 1.5px solid var(--linie-stark); }
  .sv-inhalt a { min-height: 44px; padding: 6px 10px 6px 14px; border-radius: 0 10px 10px 0; font-size: 15px; }
  .sv-inhalt a:focus-visible { outline-offset: -3px; }
  .sv-artikel-text { grid-column: 2; grid-row: 2; }
}
.sv-teil { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linie-stark); }
.sv-teil .sv-h2 { font-size: 28px; }
@media (min-width: 600px) { .sv-teil .sv-h2 { font-size: clamp(30px, 3vw, 40px); } }
.sv-teil > p:not([class]) { max-width: 44rem; margin-top: 16px; font-size: 17.5px; line-height: 1.65; color: var(--tinte-2); text-wrap: pretty; }
.sv-teil strong { color: var(--tinte); font-weight: 650; }
.sv-teil > ul.sv-liste { max-width: 44rem; margin-top: 16px; display: grid; gap: 10px; }
.sv-liste li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.6; color: var(--tinte-2); }
.sv-liste li::before { content: ""; position: absolute; left: 0; top: .8em; width: 13px; height: 1.5px; background: var(--orange-text); }
.sv-teil .sv-merk { margin-top: 22px; max-width: 44rem; gap: 22px; }
sup { line-height: 0; font-size: .68em; vertical-align: super; }
.sv sup a { padding: 0 1px; font-weight: 650; color: var(--orange-text); text-decoration: none; }
sup a + a::before { content: "\202F"; }
@media (hover: hover) { .sv sup a:hover { text-decoration: underline; } }

/* Tabellen */
.sv-tabelle-rahmen { margin-top: 22px; max-width: 52rem; overflow-x: auto; }
.sv-tabelle { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sv-tabelle caption { padding-bottom: 10px; text-align: left; font-weight: 650; font-size: 16px; line-height: 1.4; color: var(--tinte); text-wrap: balance; }
.sv-tabelle :is(th, td) { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linie-stark); text-align: left; vertical-align: top; }
.sv-tabelle :is(th, td):last-child { padding-right: 0; }
.sv-tabelle thead :is(th, td) { padding-top: 0; padding-bottom: 8px; border-bottom: 1.3px solid rgba(59, 56, 51, .7); font-size: 13.5px; font-weight: 650; letter-spacing: .02em; color: var(--tinte-2); }
.sv-tabelle tbody th { font-weight: 650; color: var(--tinte); }
.sv-tabelle td { color: var(--tinte-2); }
.sv-tabelle-zahlen td { white-space: nowrap; text-align: right; }
.sv-tabelle-zahlen thead th { text-align: right; }
.sv-unter { margin-top: 12px; max-width: 46rem; font-size: 14.5px; line-height: 1.55; color: var(--tinte-2); }
.sv-unter + .sv-unter { margin-top: 6px; }
@media (max-width: 599px) {
  .sv-tabelle { font-size: 15px; }
  .sv-tabelle :is(th, td) { padding-right: 10px; }
}

/* Preis-Skala (Bleistift-Klammern, zwei Farbtupfer): nur Bild, die Tabelle ist die Auskunft. Lage = Betrag ÷ CHF 15'000. */
.sv-skala { display: none; }
@media (min-width: 700px) {
  .sv-skala { display: block; max-width: 52rem; margin: 30px 0 0; padding: 18px 20px 16px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); }
  .sv-skala-zeile { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; min-height: 44px; }
  .sv-skala-name { padding-right: 14px; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--tinte-2); }
  .sv-skala-bahn { position: relative; height: 100%; }
  .sv-skala-bahn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--linie-stark); }
  .sv-klammer, .sv-klammer-probe { position: absolute; top: 50%; height: 16px; margin-top: -8px; border: 1.3px solid var(--graphit); border-radius: 999px; background: var(--weiss); }
  .sv-klammer-mehr { background: repeating-linear-gradient(135deg, rgba(59, 56, 51, .2) 0 1.3px, transparent 1.3px 6px), var(--weiss); }
  .sv-k-fix1 { left: 3.333%; width: 6.667%; }
  .sv-k-fix2 { left: 13.333%; width: 20%; }
  .sv-k-frei1 { left: 4.667%; width: 10%; }
  .sv-k-frei2 { left: 20%; width: 33.333%; }
  .sv-k-ag1 { left: 6.667%; width: 16.667%; }
  .sv-k-ag2 { left: 33.333%; width: 66.667%; }
  .sv-tupfer, .sv-tupfer-probe { position: absolute; top: 50%; width: 30px; height: 14px; margin: -7px 0 0 -15px; background: url("img/unterstrich-v1.svg") center / 100% 100% no-repeat; }
  .sv-t-basis { left: 9.933%; }
  .sv-t-premium { left: 16.6%; }
  .sv-skala-achse { position: relative; height: 28px; margin: 4px 0 0 220px; border-top: 1.3px solid rgba(59, 56, 51, .7); }
  .sv-skala-achse span { position: absolute; top: 6px; transform: translateX(-50%); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--tinte-2); white-space: nowrap; }
  .sv-skala-achse span:first-child { left: 0; transform: none; }
  .sv-skala-achse .sv-a-1 { left: 16.667%; }
  .sv-skala-achse .sv-a-2 { left: 33.333%; }
  .sv-skala-achse .sv-a-3 { left: 50%; }
  .sv-skala-achse .sv-a-4 { left: 66.667%; }
  .sv-skala-achse .sv-a-5 { left: 83.333%; }
  .sv-skala-achse .sv-a-6 { left: 100%; transform: translateX(-100%); }
  .sv-skala-legende { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 8px 0 0 220px; font-size: 13px; line-height: 1.4; color: var(--tinte-2); }
  .sv-skala-legende span { position: relative; padding-left: 38px; }
  .sv-skala-legende i { left: 0; width: 28px; height: 12px; margin-top: -6px; }
  .sv-skala-legende .sv-tupfer-probe { width: 28px; height: 13px; margin: -6.5px 0 0; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .sv-skala-zeile { grid-template-columns: 150px minmax(0, 1fr); }
  .sv-skala-achse, .sv-skala-legende { margin-left: 150px; }
}

/* Checkliste */
.sv-checkliste { max-width: 44rem; margin-top: 20px; border-top: 1px solid var(--linie-stark); }
.sv-checkliste li { border-bottom: 1px solid var(--linie); }
.sv-checkliste label {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start;
  min-height: 48px; padding: 12px 0; cursor: pointer; font-size: 16.5px; line-height: 1.5; color: var(--tinte-2);
}
.sv-checkliste input { width: 24px; height: 24px; margin: 0; accent-color: var(--tinte); cursor: pointer; }
.sv-checkliste input:checked + span { color: var(--tinte); }
.sv-drucken { margin-top: 22px; }
.sv-drucken svg { width: 20px; height: 20px; }

/* Quellen */
.sv-quellen { max-width: 46rem; margin-top: 16px; padding-left: 1.5em; list-style: decimal; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.55; color: var(--tinte-2); }
.sv-quellen li { padding-left: 4px; scroll-margin-top: calc(var(--kopf-h) + 24px); }
.sv-quellen li::marker { font-weight: 700; color: var(--orange-text); }
.sv-quellen li:target { background: var(--orange-zart); box-shadow: -8px 0 0 var(--orange-zart), 8px 0 0 var(--orange-zart); border-radius: 4px; }
.sv-quellen a { color: var(--tinte); font-weight: 600; overflow-wrap: anywhere; }

/* Bleistiftkreise aus der Strasse: sechs verschiedene, der Reihe nach */
.sv-merk > li:nth-child(6n+1) > .sv-nr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='332.88 60.65 17.04 17.04'%3E%3Cpath d='m338.8 63.1c.6 0 2.4-.3 3.5-.2 1.1.1 2.4.4 3.3 1 1 .6 1.9 1.6 2.4 2.6.5 1 .7 2.4.6 3.6-.1 1.2-.5 2.7-1.2 3.6-.7 1-2 1.7-3.1 2.1-1.1.4-2.4.4-3.6.3-1.2-.1-2.5-.4-3.4-1.1-.9-.7-1.8-1.8-2.3-2.9-.5-1.1-.9-2.5-.8-3.7.1-1.2.4-2.7 1.2-3.7.7-1 2.4-1.8 3.3-2.2.9-.4 1.6-.3 1.9-.3' fill='none' stroke='%233B3833' stroke-width='0.677' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sv-merk > li:nth-child(6n+2) > .sv-nr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='231.4 324.4 16.93 16.93'%3E%3Cpath d='m234.8 337.7c-.3-.6-1.6-2.2-1.8-3.3-.2-1.1.2-2.4.6-3.5.4-1.1 1-2.2 1.8-3 .8-.8 1.9-1.7 3-2 1.1-.3 2.6-.3 3.8.1 1.2.4 2.5 1.1 3.3 2 .8.9 1.4 2.3 1.5 3.5.1 1.2-.2 2.6-.7 3.7-.4 1.1-1.1 2.3-2 3.1-.9.8-2.2 1.4-3.4 1.6-1.2.2-2.6.2-3.8-.2-1.2-.4-2.7-1.5-3.4-2.1-.7-.6-.8-1.5-1-1.8' fill='none' stroke='%233B3833' stroke-width='0.672' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sv-merk > li:nth-child(6n+3) > .sv-nr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='260.24 248.57 14.33 14.33'%3E%3Cpath d='m263.7 259.5c-.3-.4-1.4-1.4-1.8-2.3-.4-.9-.7-2.2-.5-3.1.2-.9 1-1.9 1.7-2.6.7-.7 1.8-1.3 2.7-1.5 1-.2 2.1-.3 3 0 .9.3 1.8.9 2.5 1.6.7.7 1.6 1.5 1.9 2.4.3.9.4 2.3.1 3.3-.3 1-1 2-1.8 2.7-.8.7-1.9 1.4-2.9 1.6-1 .2-2.2-.1-3.1-.5-.9-.4-2-1.2-2.6-1.7-.6-.5-.8-1.1-1-1.3' fill='none' stroke='%233B3833' stroke-width='0.569' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sv-merk > li:nth-child(6n+4) > .sv-nr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='418.75 311.97 14.89 14.89'%3E%3Cpath d='m431.3 316.9c.1.5.5 2 .4 3-.1.9-.5 2-1 2.7-.5.7-1.4 1.3-2.2 1.7-.8.5-1.8.9-2.8 1-1 .1-2.2-.1-3-.6-.8-.5-1.6-1.5-2.1-2.4-.5-.9-.8-2.1-.7-3.1.1-1 .7-2 1.3-2.8.6-.8 1.4-1.4 2.3-1.9.9-.5 1.9-1 2.9-1 1 0 2.2.3 3.1.9.9.5 1.8 1.7 2.3 2.4.5.7.6 1.3.7 1.5' fill='none' stroke='%233B3833' stroke-width='0.591' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sv-merk > li:nth-child(6n+5) > .sv-nr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='202.19 458.24 14.14 14.14'%3E%3Cpath d='m204.3 463.8c.2-.4.8-1.7 1.4-2.4.6-.7 1.5-1.6 2.4-1.9.9-.3 2.1-.2 3.1.1 1 .3 2.1.9 2.8 1.7.7.8 1.1 2 1.2 3 .1 1-.3 2.1-.7 3-.4.9-.9 1.9-1.7 2.5-.7.6-1.8 1.2-2.8 1.4-1 .2-2.2.1-3.2-.3-1-.4-2.2-1.1-2.8-2-.6-.9-.7-2.2-.7-3.3 0-1.1.6-2.4.9-3.1.3-.7.7-1.2.8-1.4' fill='none' stroke='%233B3833' stroke-width='0.561' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sv-merk > li:nth-child(6n+6) > .sv-nr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='272.39 111.87 14.51 14.51'%3E%3Cpath d='m274.9 122.2c-.1-.5-.9-1.9-.9-2.8 0-.9.2-2 .7-2.8.4-.8 1.2-1.4 2-2 .8-.6 1.7-1.2 2.6-1.4.9-.2 2.2 0 3.1.4.9.4 1.8 1.2 2.4 2.1.6.9 1 2 1 3 0 1-.6 2.1-1.1 2.9-.5.8-1.1 1.6-1.9 2.2-.8.6-1.7 1.2-2.7 1.3-1 .1-2.2-.1-3.2-.5-1-.4-2.1-1.3-2.7-1.9-.6-.6-.6-1.3-.7-1.6' fill='none' stroke='%233B3833' stroke-width='0.576' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Farbroller im Held der Branchenseiten (Moment 1; bewegt sich nur unter dem Finger) */
.sv-roller { justify-self: center; width: 100%; max-width: 560px; }
.sv-roller .nw-vergleich { margin: 0; }
.sv-roller .nw-vergleich-unter { max-width: 26em; }
@media (min-width: 1024px) { .js .sv-roller .nw-vergleich { --b: 290px; } html:not(.js) .sv-roller .nw-vergleich { --b: 250px; } }
.nw-vergleich { --b: min(300px, 78vw); margin: 16px 0 0; display: grid; justify-items: center; gap: 12px; }
.nw-vergleich-buehne { position: relative; width: 100%; max-width: calc(var(--b) * 2 + 16px); }
.nw-vergleich-schirm { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nw-vergleich-ebene {
  position: relative; display: block; overflow: hidden; margin: 0;
  aspect-ratio: 390 / 844; padding-top: 12.55%;
  border-radius: 13%/6%; background: #45453F;
  box-shadow: 0 0 0 5px var(--tinte), 0 24px 40px -26px rgba(40, 24, 12, .55);
}
.nw-vergleich-ebene img { display: block; width: 100%; height: auto; max-width: none; margin: 0; }
.nw-vergleich-ebene::before {
  content: "9:41"; content: "9:41" / ""; position: absolute; z-index: 2; inset: 0 0 auto 0; aspect-ratio: 390 / 49;
  display: flex; align-items: center; padding-left: 9%;
  font: 650 12px/1 var(--text); letter-spacing: -.01em; color: #F3EFE6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 12'%3E%3Cg fill='%23F3EFE6'%3E%3Crect x='0' y='7' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3' width='3' height='8' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='10' rx='.8'/%3E%3Cpath d='M28 3.2a9 9 0 0 1 11.6 0l-1.3 1.4a7 7 0 0 0-9 0zM30.4 5.8a5.3 5.3 0 0 1 6.8 0l-1.3 1.4a3.4 3.4 0 0 0-4.2 0zM33.8 10.6l-1.7-1.8a2.4 2.4 0 0 1 3.4 0z'/%3E%3Crect x='44' y='1.2' width='19' height='9.6' rx='2.6' fill='none' stroke='%23F3EFE6' stroke-opacity='.4'/%3E%3Crect x='45.6' y='2.8' width='14.4' height='6.4' rx='1.4'/%3E%3Crect x='63.8' y='4.2' width='1.6' height='3.6' rx='.8' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") right 8% center / 21% auto no-repeat;
}
.nw-vergleich-alt { background: #F2F2F2; }
.nw-vergleich-alt::before {
  color: #111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 12'%3E%3Cg fill='%23111'%3E%3Crect x='0' y='7' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3' width='3' height='8' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='10' rx='.8'/%3E%3Cpath d='M28 3.2a9 9 0 0 1 11.6 0l-1.3 1.4a7 7 0 0 0-9 0zM30.4 5.8a5.3 5.3 0 0 1 6.8 0l-1.3 1.4a3.4 3.4 0 0 0-4.2 0zM33.8 10.6l-1.7-1.8a2.4 2.4 0 0 1 3.4 0z'/%3E%3Crect x='44' y='1.2' width='19' height='9.6' rx='2.6' fill='none' stroke='%23111' stroke-opacity='.4'/%3E%3Crect x='45.6' y='2.8' width='14.4' height='6.4' rx='1.4'/%3E%3Crect x='63.8' y='4.2' width='1.6' height='3.6' rx='.8' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
}
.sv-roller[data-beispiel="tannenhirsch"] .nw-vergleich-neu { background: #0C1712; }
.sv-roller[data-beispiel="kammstrich"] .nw-vergleich-neu { background: #F7F0EB; }
.sv-roller[data-beispiel="kammstrich"] .nw-vergleich-neu::before { color: #111; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 12'%3E%3Cg fill='%23111'%3E%3Crect x='0' y='7' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3' width='3' height='8' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='10' rx='.8'/%3E%3Cpath d='M28 3.2a9 9 0 0 1 11.6 0l-1.3 1.4a7 7 0 0 0-9 0zM30.4 5.8a5.3 5.3 0 0 1 6.8 0l-1.3 1.4a3.4 3.4 0 0 0-4.2 0zM33.8 10.6l-1.7-1.8a2.4 2.4 0 0 1 3.4 0z'/%3E%3Crect x='44' y='1.2' width='19' height='9.6' rx='2.6' fill='none' stroke='%23111' stroke-opacity='.4'/%3E%3Crect x='45.6' y='2.8' width='14.4' height='6.4' rx='1.4'/%3E%3Crect x='63.8' y='4.2' width='1.6' height='3.6' rx='.8' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E"); }
.nw-vergleich-etikett { display: block; margin-top: 8px; font: 650 14px/1.3 var(--text); color: var(--tinte-2); text-align: center; }
.nw-vergleich-paar { display: grid; justify-items: stretch; }
.nw-vergleich-unter { max-width: calc(var(--b) + 48px); margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tinte-2); text-align: center; text-wrap: pretty; }
.nw-vergleich-mit, .nw-vergleich-notiz { display: none; }
.sv-roller.ist-bereit .nw-vergleich-mit { display: inline; }
.sv-roller.ist-bereit .nw-vergleich-ohne { display: none; }
.sv-roller.ist-bereit .nw-vergleich-notiz { display: block; }
.nw-vergleich-notiz { margin: 0; font: 560 21px/1.05 "Nahweb Notiz", "Segoe Print", "Bradley Hand", cursive; color: var(--rotstift); }
/* Mit Skript Platz für Notiz und Zusatzsatz schon vor dem Einsetzen des Rollers halten (sonst rutscht der Held um ~17 px) */
.js .sv-roller .nw-vergleich-mit { display: inline; visibility: hidden; }
.js .sv-roller .nw-vergleich-notiz { display: block; visibility: hidden; }
.sv-roller.ist-bereit :is(.nw-vergleich-mit, .nw-vergleich-notiz) { visibility: visible; }

.js .nw-vergleich-buehne {
  width: var(--b); max-width: none; padding: calc(var(--b) * .03); border-radius: calc(var(--b) * .16);
  background: linear-gradient(155deg, #34302C 0%, #121110 38%, #1E1C1A 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 40px 60px -40px rgba(40, 24, 12, .55);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: ew-resize;
}

@media (max-width: 899px) { .js .nw-vergleich { --b: min(250px, 66vw); } }
.js .nw-vergleich-schirm { display: block; aspect-ratio: 390 / 844; overflow: hidden; border-radius: calc(var(--b) * .13); isolation: isolate; }
.js .nw-vergleich-paar { position: absolute; inset: 0; display: block; z-index: 0; }
.js .nw-vergleich-ebene { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.js .nw-vergleich-paar-neu { z-index: 1; -webkit-clip-path: inset(0 calc((100 - var(--wert, 50)) * 1%) 0 0); clip-path: inset(0 calc((100 - var(--wert, 50)) * 1%) 0 0); }
.js .nw-vergleich-etikett {
  position: absolute; z-index: 3; top: 15%; margin: 0; padding: 3px 8px; border-radius: 6px;
  font: 650 12.5px/1.3 var(--text); color: var(--papier); background: rgba(21, 19, 15, .78); pointer-events: none;
}
.js .nw-vergleich-paar-neu .nw-vergleich-etikett { left: 10px; }
.js .nw-vergleich-paar-alt .nw-vergleich-etikett { right: 10px; }
.nw-roller { position: absolute; z-index: 4; top: calc(var(--b) * .03); bottom: calc(var(--b) * .03); left: calc(var(--b) * .03 + (var(--b) * .94) * var(--wert, 50) / 100); width: 0; pointer-events: none; }
.nw-roller-walze {
  position: absolute; top: 6%; bottom: 30%; left: -8px; width: 16px; border-radius: 8px;
  background: repeating-linear-gradient(0deg, rgba(21, 19, 15, .10) 0 1px, transparent 1px 3px), linear-gradient(90deg, #E6E0D6, #FFFDF9 45%, #D8D1C5);
  box-shadow: 0 0 0 1.5px var(--tinte), 0 6px 14px -6px rgba(21, 19, 15, .5);
}
.nw-roller-buegel { position: absolute; left: -1.5px; top: 70%; bottom: 52px; width: 3px; border-radius: 2px; background: var(--tinte); box-shadow: 0 0 0 1.5px rgba(250, 248, 245, .9); }
.nw-roller-griff {
  position: absolute; left: -24px; bottom: 6px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: auto; cursor: ew-resize;
  background: var(--tinte); color: var(--papier); box-shadow: 0 4px 12px -4px rgba(21, 19, 15, .55);
  outline: none; touch-action: none;
}
.nw-roller-griff svg { width: 26px; height: 26px; }
.nw-roller-griff:focus-visible { box-shadow: 0 0 0 3px var(--papier), 0 0 0 5.5px var(--rotstift); }
@media (prefers-reduced-motion: no-preference) {
  .nw-vergleich:not(.ist-zieht) .nw-vergleich-paar-neu { transition: clip-path 240ms var(--ease-aus), -webkit-clip-path 240ms var(--ease-aus); }
  .nw-vergleich:not(.ist-zieht) .nw-roller { transition: left 240ms var(--ease-aus); }
}
@media (forced-colors: active) {
  .nw-vergleich-ebene::before { forced-color-adjust: none; }
  .nw-roller-walze, .nw-roller-griff { forced-color-adjust: none; border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .nw-roller-buegel { forced-color-adjust: none; background: ButtonText; }
  .nw-roller-griff:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .nw-vergleich-notiz { color: CanvasText; }
}
@media print {
  .nw-vergleich-notiz, .nw-roller { display: none !important; }
}

@media (forced-colors: active) {
  .sv-nr { background-image: none !important; border: 1.5px solid CanvasText; border-radius: 50%; }
  .sv-paket, .sv-probieren, .sv-karte-link, .sv-wissen, .sv-paket-band { border: 1px solid CanvasText; }
  .sv-wissen { border-left-width: 3px; }
  .sv-zahl, .sv-schritt { border-top-color: CanvasText; }
  .sv-schritt-nr { -webkit-text-stroke-color: CanvasText; }
    .sv-liste li::before { forced-color-adjust: none; background: CanvasText; }
  .sv-klammer { border-color: CanvasText; }
}

@media print {
  .sv-held, .sv-artikel { padding: 0 0 12px !important; }
  .sv-held::before, .sv-artikel::before, .sv-krumen, .sv-knoepfe, .sv-roller, .sv-schluss, .sv-probieren, .sv-drucken, .sv-inhalt,
  .sv-weiter, .sv-karte-link, .sv-skala, .fragen-hilfe, .frage-zeichen, .fuss nav.fuss-spalte { display: none !important; }
  .sv-held-karte .nah-karte { max-width: 120mm; margin-top: 6mm; }
  .fuss-oben { padding-top: 8mm; }
  .sv-wer-raster > .sv-text + .sv-text { margin-top: 18px; }
  .sv-abschnitt { padding-block: 14px !important; background: none !important; }
  .sv-ausprobieren { display: none !important; }
  .sv-titel { font-size: 24pt !important; }
  .sv-titel em { color: #000000 !important; }
  .sv-h2 { font-size: 17pt !important; break-after: avoid; }
  .sv-lead, .sv-einleitung, .sv-text p, .sv-merk p, .sv-teil > p, .sv-liste li, .sv-checkliste label, .sv-quellen, .antwort p, .sv-preis-zeilen p,
  .sv-paket-text, .sv-schritt p, .sv-zeit, .sv-wissen p, .sv-klein, .sv-quelle, .sv-unter, .sv-tabelle td { color: #000000 !important; }
  .sv-paket, .sv-paket-tipp, .sv-wissen { background: none !important; color: #000000 !important; box-shadow: none !important; border: .5pt solid #8A8A8A !important; break-inside: avoid; }
  .sv-paket-tipp * { color: #000000 !important; }
  .sv-paket-band { position: static; display: inline-block; margin-bottom: 6px; border: .5pt solid #8A8A8A; background: none; }
  .sv-merk > li, .sv-schritt, .sv-zahl, .frage { break-inside: avoid; }
  .sv-tabelle-rahmen { overflow: visible; }
    .sv-checkliste input { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: 3px; border: 1pt solid #000000; border-radius: 2px; background: none; }
  .sv-checkliste label { min-height: 0; padding: 6px 0; }
  .sv-quellen a::after { content: " " attr(href); font-weight: 400; font-size: 8pt; overflow-wrap: anywhere; }
  .sv-teil { margin-top: 18px; padding-top: 12px; }
  .sv-artikel-raster, .sv-held-raster { display: block; }
  sup a { color: #000000; }
}

/* === r13 Selbsttest (selbsttest.html, README «Selbsttest») ===
   Welche Tipps zu sehen sind, entscheidet nur CSS (:has()): Tipp bei «Nein»/«Weiss nicht», Zeile «Das ist schon gut» bei «Ja»,
   jeweils nur für die gewählte Variante (mit/ohne Website). Ohne :has() (alte Browser) gilt der Grundzustand: beide Fragenlisten
   mit Zwischentitel, alle Tipps unter «Alle Tipps». Keine Bewegung; «Nein» ist nie rot. */
.st-held { padding-bottom: clamp(36px, 4.5vw, 64px); }
.st-abschnitt { padding-top: clamp(36px, 4.5vw, 64px); }
.st-raster { display: grid; gap: 32px; align-items: start; }
.st-spalte, .st-ergebnis-text { min-width: 0; max-width: 44rem; }
@media (min-width: 1024px) {
  .st-raster { grid-template-columns: minmax(0, 340px) minmax(0, 44rem); column-gap: clamp(48px, 6vw, 96px); }
  .st-karte, .st-weiter { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--kopf-h) + 24px); }
  .st-spalte, .st-ergebnis-text { grid-column: 2; grid-row: 1; }
  .st-quellen { grid-column: 2; grid-row: 2; }
}
.st-karte, .st-weiter-kasten { padding: 22px 22px 24px; border-radius: var(--radius); background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.st-art, .st-frage fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.st-art-titel, .st-legende { padding: 0; font-family: var(--titel); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
.st-art-titel { font-size: 21px; line-height: 1.2; }
.st-art-wahl { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (min-width: 1024px) { .st-art-wahl { grid-template-columns: minmax(0, 1fr); } }
.st-hinweis { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }
.st-zu-tipps { margin-top: 32px; }
.st-zu-tipps-oben { width: 100%; margin-top: 18px; }
@media (max-width: 1023px) { .st-zu-tipps-oben { display: none; } }
/* Wahlknöpfe (Radios als Pillen, das ganze Feld ist das Ziel) */
.st-art-pille, .st-pille { position: relative; display: block; }
.st-art-pille input, .st-pille input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.st-art-pille span, .st-pille span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 12px; border-radius: 999px;
  border: 1.5px solid var(--linie-stark); background: var(--papier); color: var(--tinte);
  font-weight: 650; font-size: 16px; line-height: 1.2; text-align: center;
  transition: background-color var(--dauer-hover) var(--ease-aus), border-color var(--dauer-hover) var(--ease-aus), color var(--dauer-hover) var(--ease-aus);
}
.st-pille span { min-height: 48px; padding-inline: 6px; font-size: 15.5px; background: var(--weiss); }
:is(.st-art-pille, .st-pille) input:checked + span { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
:is(.st-art-pille, .st-pille) input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (hover: hover) { :is(.st-art-pille, .st-pille):hover input:not(:checked) + span { border-color: var(--tinte-2); } }
/* Fragen: ruhige Liste, Nummer im Bleistiftkreis (.sv-merk) */
.st-fragen-teil + .st-fragen-teil { margin-top: 56px; }
.st-zwischen { font-size: clamp(26px, 2.6vw, 34px); }
.st-fragen { gap: 34px; }
.st-legende { font-size: 19px; line-height: 1.3; }
.st-pruefen { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }
.st-antworten { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 27rem; }
.st-warum { margin-top: 4px; }
.st-warum summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--tinte-2); }
.st-warum summary span { text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 4px; }
.st-warum summary::-webkit-details-marker { display: none; }
.st-warum summary::after { content: "+"; content: "+" / ""; font-weight: 500; font-size: 18px; line-height: 1; }
.st-warum[open] summary::after { content: "–"; content: "–" / ""; }
@media (hover: hover) { .st-warum summary:hover { color: var(--tinte); } .st-warum summary:hover span { text-decoration-color: currentColor; } }
.st-warum p { margin: 0 0 4px; max-width: 34em; font-size: 15.5px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
@media (max-width: 399px) {
  .st-fragen > li { padding-left: 46px; }
  .st-fragen .sv-nr { width: 34px; height: 34px; top: -4px; }
  .st-antworten { gap: 5px; }
  .st-pille span { font-size: 14.5px; padding-inline: 3px; line-height: 1.15; }
}
/* Ergebnis */
.st-ergebnis { padding-top: clamp(48px, 6vw, 88px); }
#h-ergebnis[tabindex="-1"]:focus { outline: none; }
.st-leer, .st-alles-ja { margin-top: 22px; max-width: 40em; padding: 16px 20px; border-radius: var(--radius-klein); background: var(--sand); font-size: 17px; line-height: 1.5; color: var(--tinte); }
.st-tipps { margin-top: 24px; display: grid; gap: 14px; }
.st-tipp { padding: 18px 22px 20px; border-left: 3px solid var(--rotstift); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; background: var(--sand); }
.st-tipp-titel, .st-gut-titel, .st-weiter-titel { font-family: var(--titel); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
.st-tipp-titel { font-size: 19.5px; line-height: 1.25; }
.st-tipp p { margin-top: 6px; max-width: 38em; font-size: 16.5px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
.st-selbst strong { color: var(--tinte); font-weight: 650; }
.st-gut-teil { margin-top: 34px; }
.st-gut-titel { font-size: 21px; line-height: 1.2; }
.st-gut { margin-top: 12px; display: grid; gap: 8px; }
.st-gut li { display: flex; align-items: center; gap: 12px; font-size: 16.5px; line-height: 1.4; color: var(--tinte); }
.st-gut svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--orange-zart); color: var(--orange-text); }
.st-quellen { margin-top: 2px; max-width: 44rem; }
@media (min-width: 1024px) { .st-quellen { margin-top: 34px; } }
.st-weiter-kasten { box-shadow: var(--schatten-gross); }
.st-weiter-kasten + .st-weiter-kasten { margin-top: 16px; }
.st-weiter-titel { font-size: 22px; line-height: 1.2; }
.st-weiter-kasten p { margin-top: 8px; font-size: 16.5px; line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.st-weiter-kasten .knopf { width: 100%; margin-top: 18px; padding-inline: 16px; gap: 8px; }
.st-weiter-kasten .st-weiter-link { margin-top: 8px; }
/* Sichtbarkeit: Grundzustand = Browser ohne :has() */
.st-mit-has, .st-leer, .st-alles-ja, .st-gut-teil { display: none; }
@supports selector(:has(*)) {
  .st-mit-has { display: revert; }
  .st-ohne-has, .st-tipp, .st-gut li { display: none; }
  .st-seite:has(#st-art-mit:checked):not(:has(.st-fragen-a input:checked)) .st-leer,
  .st-seite:has(#st-art-ohne:checked):not(:has(.st-fragen-b input:checked)) .st-leer,
  .st-seite:has(#st-art-mit:checked):has(.st-fragen-a [value="ja"]:checked) .st-gut-teil,
  .st-seite:has(#st-art-ohne:checked):has(.st-fragen-b [value="ja"]:checked) .st-gut-teil { display: block; }
  .st-seite:has(#a1-nein:checked, #a1-weiss:checked) #tipp-a1 { display: block; }
  .st-seite:has(#a2-nein:checked, #a2-weiss:checked) #tipp-a2 { display: block; }
  .st-seite:has(#a3-nein:checked, #a3-weiss:checked) #tipp-a3 { display: block; }
  .st-seite:has(#a4-nein:checked, #a4-weiss:checked) #tipp-a4 { display: block; }
  .st-seite:has(#a5-nein:checked, #a5-weiss:checked) #tipp-a5 { display: block; }
  .st-seite:has(#a6-nein:checked, #a6-weiss:checked) #tipp-a6 { display: block; }
  .st-seite:has(#a7-nein:checked, #a7-weiss:checked) #tipp-a7 { display: block; }
  .st-seite:has(#a8-nein:checked, #a8-weiss:checked) #tipp-a8 { display: block; }
  .st-seite:has(#b1-nein:checked, #b1-weiss:checked) #tipp-b1 { display: block; }
  .st-seite:has(#b2-nein:checked, #b2-weiss:checked) #tipp-b2 { display: block; }
  .st-seite:has(#b3-nein:checked, #b3-weiss:checked) #tipp-b3 { display: block; }
  .st-seite:has(#b4-nein:checked, #b4-weiss:checked) #tipp-b4 { display: block; }
  .st-seite:has(#b5-nein:checked, #b5-weiss:checked) #tipp-b5 { display: block; }
  .st-seite:has(#b6-nein:checked, #b6-weiss:checked) #tipp-b6 { display: block; }
  .st-seite:has(#a1-ja:checked) #gut-a1 { display: flex; }
  .st-seite:has(#a2-ja:checked) #gut-a2 { display: flex; }
  .st-seite:has(#a3-ja:checked) #gut-a3 { display: flex; }
  .st-seite:has(#a4-ja:checked) #gut-a4 { display: flex; }
  .st-seite:has(#a5-ja:checked) #gut-a5 { display: flex; }
  .st-seite:has(#a6-ja:checked) #gut-a6 { display: flex; }
  .st-seite:has(#a7-ja:checked) #gut-a7 { display: flex; }
  .st-seite:has(#a8-ja:checked) #gut-a8 { display: flex; }
  .st-seite:has(#b1-ja:checked) #gut-b1 { display: flex; }
  .st-seite:has(#b2-ja:checked) #gut-b2 { display: flex; }
  .st-seite:has(#b3-ja:checked) #gut-b3 { display: flex; }
  .st-seite:has(#b4-ja:checked) #gut-b4 { display: flex; }
  .st-seite:has(#b5-ja:checked) #gut-b5 { display: flex; }
  .st-seite:has(#b6-ja:checked) #gut-b6 { display: flex; }
  .st-seite:has(#st-art-mit:checked):has(#a1-ja:checked):has(#a2-ja:checked):has(#a3-ja:checked):has(#a4-ja:checked):has(#a5-ja:checked):has(#a6-ja:checked):has(#a7-ja:checked):has(#a8-ja:checked) .st-alles-a,
  .st-seite:has(#st-art-ohne:checked):has(#b1-ja:checked):has(#b2-ja:checked):has(#b3-ja:checked):has(#b4-ja:checked):has(#b5-ja:checked):has(#b6-ja:checked) .st-alles-b { display: block; }
  .st-seite:has(#st-art-ohne:checked) .st-nur-a, .st-seite:has(#st-art-mit:checked) .st-nur-b { display: none !important; }
}
@media (forced-colors: active) {
  :is(.st-art-pille, .st-pille) span { border-color: ButtonText; }
  :is(.st-art-pille, .st-pille) input:checked + span { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .st-tipp, .st-leer, .st-alles-ja, .st-karte, .st-weiter-kasten { border: 1px solid CanvasText; }
  .st-tipp { border-left-width: 3px; }
  .st-gut svg { border: 1px solid CanvasText; }
}
@media print {
  .st-zu-tipps, .st-warum, .st-weiter-kasten .knopf, .st-weiter-link, .st-hinweis { display: none !important; }
  .st-karte, .st-weiter-kasten, .st-tipp, .st-leer, .st-alles-ja { background: none !important; box-shadow: none !important; border: .5pt solid #8A8A8A !important; break-inside: avoid; }
  .st-tipp { border-left: 2pt solid #000000 !important; }
  :is(.st-art-pille, .st-pille) span { min-height: 0; padding: 3px 8px; border: .5pt solid #8A8A8A; background: none !important; color: #000000 !important; font-weight: 400; }
  :is(.st-art-pille, .st-pille) input:checked + span { border: 2pt solid #000000; font-weight: 800; }
  .st-raster { display: block; }
  .st-weiter, .st-spalte { margin-top: 18px; }
  .st-frage { break-inside: avoid; }
  .st-legende, .st-pruefen, .st-tipp p, .st-gut li, .st-weiter-kasten p { color: #000000 !important; }
}
/* === Ende r13 Selbsttest === */

/* r13 Skizze (README «Website neu zeichnen»): Satz unter «Ausprobieren» der Branchenseiten */
.sv-probieren-text p.sv-probieren-auch { margin-top: 16px; font-size: 15.5px; }
.sv-probieren-auch a { color: var(--tinte); font-weight: 650; }

/* === r13 Korrektur === */
.sv-zahlen-nachsatz { margin-top: 14px; max-width: 44em; font-size: 16px; line-height: 1.5; color: var(--tinte); }
/* Selbsttest: Mit der breiteren Ersatzschrift brach «Haben Sie schon eine Website?» am Handy in zwei Zeilen und sprang beim
   Laden der Schrift um 25 px (CLS 0,045). Die schmalere Ersatzschrift «G» (wie .sv-titel) bricht dort wie die echte Schrift. */
@media (max-width: 1023px) { .st-art-titel { font-family: "Bricolage Grotesque", "Bricolage Ersatz G", "Bricolage Ersatz GR", ui-sans-serif, system-ui, sans-serif; } }