/* Paket B: Leistungen in der Marke «Klartext» (5. Oktober 2026). Katalog, 25 Detailseiten, Weiterleitung. Namensraum .svc-*.
   Vertrag: docs/design-system-2026-10-05-klartext.md. Nur Markentokens und Rollen aus dist/site.css (keine eigenen Farben oder Schriften).
   Linien statt Kästchen: Listen beginnen mit 1,5 px in --text-1 und trennen mit 1 px --linie-ton. Holz (--q-voll) nur als Linie, nie als Text.
   Bewegung: Reveals und Seitenkopf aus site.js/site.css; Filter-Reflow in dist/services-search.js. Keine scrollgebundene Linie mehr. */

/* ---------------------------------------------------------------- Raster: Titel über Spalten 1 bis 5, Inhalt ab Spalte 7 (wie .section-head) */
.svc-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-6);align-items:start}
.svc-split>:first-child{grid-column:1/span 5}
.svc-split>:last-child{grid-column:7/-1}
.svc-split h2{margin:0}
/* Aktionen ausserhalb des Seitenkopfs stehen sofort (site.css lässt sonst jede .page-actions beim Laden einblenden). */
html.js .svc-split .page-actions,html.js .svc-empty .page-actions{animation:none}

/* ---------------------------------------------------------------- Katalog: Kopf */
.svc-head h1{max-width:none}

/* ---------------------------------------------------------------- Katalog: Werkzeugleiste (klebt unter der Kopfzeile) */
.svc-toolbar{position:sticky;top:var(--header-h);z-index:40;background:var(--papier);border-bottom:1px solid var(--linie)}
.svc-toolbar-row{display:grid;grid-template-columns:minmax(300px,400px) auto;grid-template-areas:"search filters" "search count";justify-content:space-between;align-items:end;column-gap:var(--space-8);row-gap:var(--space-1);padding:var(--space-4) 0}
.svc-search{grid-area:search;margin:0;gap:var(--space-2)}
.svc-search-label{color:var(--text-1)}
.svc-search-field{position:relative}
.svc-search-field .input{-webkit-appearance:none;appearance:none}
.svc-search-field .input::-webkit-search-cancel-button,.svc-search-field .input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.svc-search-field:has(.svc-clear:not([hidden])) .input{padding-right:136px}
.svc-clear{position:absolute;top:2px;right:2px;bottom:2px;display:inline-flex;align-items:center;padding:0 14px;font:500 var(--fs-text-klein)/1 var(--sans);color:var(--text-1);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em}
.svc-clear:hover{text-decoration-thickness:2px;text-decoration-color:var(--q-voll)}
.svc-filters{grid-area:filters;position:relative;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-5);justify-self:end}
.svc-filters .filter{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0;font:var(--fw-navigation) var(--fs-navigation)/var(--lh-navigation) var(--sans);color:var(--text-2);white-space:nowrap;transition:color var(--dauer-kurz) linear}
.svc-filters .filter:hover,.svc-filters .filter[aria-pressed=true]{color:var(--text-1)}
/* Überfahren: Linie 2 px unter dem Wort wie in der Navigation; die gewählte Fläche trägt die gleitende Linie (.svc-filter-line). */
.svc-filters .filter::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--text-2);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-mittel) var(--kurve-praezise)}
.svc-filters .filter:not([aria-pressed=true]):hover::after{transform:scaleX(1)}
.svc-filter-line{position:absolute;left:0;bottom:6px;width:0;height:var(--linie-betont);background:var(--q-voll);pointer-events:none;transition:transform var(--dauer-mittel) var(--kurve-praezise),width var(--dauer-mittel) var(--kurve-praezise)}
html:not(.js) .svc-filters,html:not(.js) .svc-clear{display:none}
.svc-count{grid-area:count;justify-self:end;margin:0;font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--ls-meta);color:var(--text-2);white-space:nowrap}
.svc-count-num{display:inline-block;min-width:1.2em;text-align:right;font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums}
/* Sprungziele unter der klebenden Leiste: Tastaturfokus und #bereich-Anker landen unterhalb von Suche und Filtern.
   Die Höhe setzt dist/services-search.js als --svc-toolbar-h. */
@media (min-width:801px){#service-list li[data-category],#service-list .row,.svc-group,.svc-group .section-head,[data-svc-empty]{scroll-margin-top:var(--svc-toolbar-h,112px)}}

/* ---------------------------------------------------------------- Katalog: Bereiche und Zeilen */
.svc-catalogue{padding-top:var(--section-tight)}
.svc-group{padding-bottom:var(--section)}
.svc-group:last-child{padding-bottom:var(--section-tight)}
.svc-group .section-head{margin-bottom:var(--space-6)}
.svc-group[hidden]{display:none!important}
/* Zeile: Name und Vermerk links (Spalten 1 bis 5), Beschreibung ab Spalte 7, bündig mit der Einleitung des Abschnittskopfs. */
.svc-rows .row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-1)}
.svc-rows .row-title{grid-column:1/span 5;grid-row:1}
.svc-rows .row-meta{grid-column:1/span 5;grid-row:2;padding-top:0;text-align:left;white-space:normal}
.svc-rows .row-text{grid-column:7/-1;grid-row:1/span 2;padding-top:.3em;max-width:36em}
/* Pilot und «auf Anfrage» als Text, nicht als Statusquadrat (elemente.md: das Quadrat zeigt nie den Stand einer Leistung).
   Beide in Tinte und 500, damit sie sich von Leistungen in einem Einstieg mit Richtpreis abheben (Korrektur 5. Oktober 2026). */
.row-meta.is-pilot,.row-meta.is-anfrage{color:var(--text-1);font-weight:500}

/* ---------------------------------------------------------------- Katalog: Leerer Filter */
.svc-empty{padding:var(--space-6) 0 var(--section)}
.svc-empty .lead{margin:0}
.svc-empty q{quotes:"«" "»";font-weight:600}

/* ---------------------------------------------------------------- Brücke zu den Einstiegen und Abschluss */
.svc-offer-rows .row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);align-items:start}
.svc-offer-rows .row-title{grid-column:1/span 5}
.svc-offer-rows .row-text{grid-column:7/span 4;padding-top:.3em}
.svc-offer-rows .svc-preis{grid-column:11/-1;justify-self:end;text-align:right}
/* Richtpreis: Wort in Metadaten, Betrag in Newsreader 500 (Referenz .preis, anwendungen/web/web.css), nie unter 20 px. */
.svc-preis{display:grid;gap:2px;margin:0}
.svc-preis-label{font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--ls-meta);color:var(--text-2)}
.svc-preis-wert{font:500 clamp(26px, 22.29px + .95vw, 36px)/1.05 var(--serif);letter-spacing:-.02em;font-optical-sizing:auto;font-variant-numeric:lining-nums;color:var(--text-1);white-space:nowrap}
.svc-preis-wert small{font:400 var(--fs-text-klein)/1.3 var(--sans);letter-spacing:0;color:var(--text-2)}
.svc-bridge-foot{margin-top:var(--space-7)}
.svc-note{margin:0;max-width:36em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}
.svc-pilot-note h3{margin:0 0 var(--space-2)}
.svc-pilot-note p{margin:0 0 var(--space-3);max-width:36em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1)}
.svc-close .lead{margin:0}

/* ---------------------------------------------------------------- Detailseite: Kopf mit Zuordnung (Bereich, Einstieg, Demo) */
.svc-detail-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);align-items:start}
.svc-detail-head>*{grid-column:1/span 7}
.svc-detail-head>.kicker{grid-row:1}
.svc-detail-head>h1{grid-row:2;max-width:none;hyphens:manual}
.svc-detail-head>.lead{grid-row:3}
.svc-detail-head>.page-actions{grid-row:4}
.svc-detail-head>.svc-facts{grid-column:9/-1;grid-row:2/span 3;align-self:end}
.page-head .kicker .text-link{padding:12px 0;font:inherit;font-weight:500}
.svc-facts{margin:0;border-top:var(--linie-kontur) solid var(--text-1)}
.svc-facts>div{display:grid;gap:2px;padding:var(--space-3) 0 var(--space-4);border-bottom:1px solid var(--linie-ton)}
.svc-facts dt{font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--ls-meta);color:var(--text-2)}
.svc-facts dd{margin:0;font:500 17px/1.45 var(--sans);color:var(--text-1)}
.svc-facts .text-link{font-size:17px;font-weight:500}
.svc-fact-sub{display:block;font-weight:400}
html.js .svc-facts{animation:ph-auf var(--dauer-auftritt) var(--kurve-praezise) 380ms both}

/* ---------------------------------------------------------------- Detailseite: Umfang (drei Teile als Zeilen, ohne Nummern: keine echte Abfolge) */
.svc-intro{margin:var(--space-5) 0 0;max-width:36em;color:var(--text-1)}
.svc-steps{list-style:none;margin:0;padding:0;border-top:var(--linie-kontur) solid var(--text-1)}
.svc-steps>li{padding:var(--space-5) 0 var(--space-6);border-bottom:1px solid var(--linie-ton)}
.svc-steps h3{margin:0 0 var(--space-2)}
.svc-steps p{margin:0;max-width:36em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1)}

/* ---------------------------------------------------------------- Detailseite: Alltag (fiktiv gekennzeichnet), Passung, Grenzen */
.svc-example .muster-etikett{margin:0 0 var(--space-4)}
.svc-example-text{margin:0;max-width:32em;font:var(--fw-lead) var(--fs-lead)/var(--lh-lead) var(--sans);letter-spacing:var(--ls-lead);color:var(--text-1)}
.svc-fit-list{list-style:none;margin:0;padding:0;border-top:var(--linie-kontur) solid var(--text-1)}
.svc-fit-list>li{padding:var(--space-4) 0;border-bottom:1px solid var(--linie-ton);font:400 clamp(18px, 17.26px + .19vw, 20px)/1.45 var(--sans);color:var(--text-1);max-width:34em}
.svc-limits{margin-top:var(--space-6);max-width:36em}
.svc-limits h3{margin:0 0 var(--space-2);font-size:18px}
.svc-limits p{margin:0;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}

/* ---------------------------------------------------------------- Detailseite: Einstieg (eine getönte Fläche), Fragen, Ergänzungen, Abschluss */
.svc-entry .kicker{margin-bottom:var(--space-3)}
.svc-entry-intro{margin:var(--space-5) 0 0;max-width:30em;color:var(--text-1)}
/* Ohne Richtpreis: Vermerk als Wort an der Stelle des Betrags, in Schibsted (kein Statusquadrat, kein Holz). */
.svc-preis-ohne{margin:0;font:500 var(--fs-text-klein)/1.4 var(--sans);color:var(--text-2);white-space:nowrap}
.svc-entry-note{margin:var(--space-4) 0 0;max-width:36em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-2)}
.svc-entry .page-actions{margin-top:var(--space-6)}
.svc-offer{border-top:var(--linie-kontur) solid var(--text-1);padding-top:var(--space-4)}
.svc-offer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-2) var(--space-5)}
.svc-offer-top h3{margin:0}
.svc-offer-top .svc-preis{text-align:right}
.svc-offer-text{margin:var(--space-3) 0 var(--space-4);max-width:36em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1)}
.svc-includes{list-style:none;margin:0;padding:0}
.svc-includes>li{padding:var(--space-3) 0;border-top:1px solid var(--linie-ton);font:400 var(--fs-text-klein)/1.45 var(--sans);color:var(--text-1)}
.svc-includes>li:last-child{border-bottom:1px solid var(--linie-ton)}
.svc-faq .folds{margin:0}
.svc-close-mail{margin:var(--space-4) 0 0;max-width:36em;font:400 var(--fs-text-klein)/1.7 var(--sans);color:var(--text-1)}
.svc-close-mail .text-link{padding:6px 0}

/* ---------------------------------------------------------------- Weiterleitung */
.svc-moved h1{max-width:16em}

/* ---------------------------------------------------------------- Responsiv */
@media (max-width:1100px){
 .svc-toolbar-row{grid-template-columns:1fr;grid-template-areas:"search" "filters" "count";row-gap:var(--space-2);padding:var(--space-3) 0}
 .svc-search{max-width:520px}
 .svc-filters{justify-self:start;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
 .svc-filters::-webkit-scrollbar{display:none}
 .svc-count{justify-self:start}
 .svc-detail-head>*{grid-column:1/span 8}
 .svc-detail-head>.svc-facts{grid-column:1/span 8;grid-row:auto;margin-top:var(--space-7);align-self:start}
}
@media (max-width:900px){
 .svc-split{grid-template-columns:minmax(0,1fr);row-gap:var(--space-5)}
 .svc-split>:first-child,.svc-split>:last-child{grid-column:1/-1}
 .svc-rows .row{grid-template-columns:minmax(0,1fr);row-gap:var(--space-2)}
 .svc-rows .row-title,.svc-rows .row-meta,.svc-rows .row-text{grid-column:1/-1;grid-row:auto;padding-top:0}
 .svc-offer-rows .row{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--space-2);column-gap:var(--space-5)}
 .svc-offer-rows .row-title{grid-column:1;grid-row:1}
 .svc-offer-rows .svc-preis{grid-column:2;grid-row:1/span 2}
 .svc-offer-rows .row-text{grid-column:1;grid-row:2;padding-top:0}
 .svc-detail-head>*,.svc-detail-head>.svc-facts{grid-column:1/-1}
 .svc-bridge-foot{row-gap:var(--space-6)}
}
@media (max-width:800px){
 .svc-toolbar{position:static}
 .svc-head .line,.svc-head .line>span{display:inline;overflow:visible;padding:0;margin:0;animation:none}
 .svc-head .line+.line::before{content:' '}
}
@media (max-width:520px){
 .svc-offer-rows .row{grid-template-columns:minmax(0,1fr)}
 .svc-offer-rows .row-title,.svc-offer-rows .row-text,.svc-offer-rows .svc-preis{grid-column:1;grid-row:auto}
 .svc-offer-rows .svc-preis{justify-self:start;text-align:left;margin-top:var(--space-1)}
 .svc-offer-top .svc-preis{text-align:left}
 .svc-search-field:has(.svc-clear:not([hidden])) .input{padding-right:124px}
 .svc-clear{padding:0 10px}
}

/* ---------------------------------------------------------------- Druck: Werkzeugleiste und Leerzustand weglassen, alle Zeilen zeigen */
@media print{
 .svc-toolbar,.svc-empty{display:none!important}
 #service-list li[data-category],.svc-group{display:block!important}
}