/* ============================================================
   DOSSIER LAYER · Branchen-, Standort- und Hub-Seiten
   ------------------------------------------------------------
   Ein gemeinsames Design fuer die 44 Seiten der beiden Familien:
     .dsr--branche   17 x webseite-fuer-*.html
     .dsr--standort  25 x webdesign-*.html
     .dsr--hub        2 x branchen.html / standorte.html

   Diagnose, die dieses Layer aufloest: alle drei Gruppen waren
   Textdokumente. Branchen-Seiten wiederholten 9-18 mal denselben
   Takt (zentrierter Eyebrow, zentrierte H2, zentrierter Sub,
   schmale Prosa, Disc-Liste). Standort-Seiten waren .legal-page,
   also eine flache Spalte mit toter rechter Haelfte. Die Hubs
   waren Kachel-Verzeichnisse ohne Seitencharakter.

   Antwort: eine redaktionelle Doppelspalte (klebende Kapitel-
   Marke links, Inhalt rechts), Listen werden zu nummerierten
   Zeilen, und pro Seite genau drei dunkle Momente (Hero, ein
   Argument-Band, Schluss-CTA) nach der Restraint-Doktrin.

   Laedt NACH style.css. Alles unter .dsr gescoped, damit die
   geteilten Klassen (.pillar-*, .legal-page, .faq-item,
   .icon-grid, .highlight-box) auf den uebrigen ~50 Seiten
   unberuehrt bleiben. Monochrom, keine Akzentfarbe.
   ============================================================ */

.dsr {
    --dsr-ink: #0e0f12;
    --dsr-ink-2: #16181d;
    --dsr-ink-3: #1e2128;
    --dsr-on-ink: rgba(255, 255, 255, .72);
    --dsr-on-ink-dim: rgba(255, 255, 255, .48);
    --dsr-hair: rgba(17, 17, 17, .13);
    --dsr-hair-soft: rgba(17, 17, 17, .07);
    --dsr-hair-ink: rgba(255, 255, 255, .14);
    --dsr-rail: clamp(150px, 17vw, 232px);
    --dsr-gap: clamp(28px, 4.5vw, 68px);
    --dsr-measure: 68ch;
    --dsr-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   1 · HERO (dunkler Moment 1)
   ============================================================ */

.dsr .dsr-hero {
    position: relative;
    isolation: isolate;
    background: var(--dsr-ink);
    color: #fff;
    overflow: clip;
    /* .header ist position:fixed und 73px hoch: der Hero muss die
       Hoehe selbst freihalten, es gibt kein Offset am body. */
    padding: clamp(102px, 9vw, 126px) 0 clamp(44px, 6vw, 76px);
}

/* Sehr leiser Raster-Print, ersetzt jeden Farbverlauf. */
.dsr .dsr-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 72%);
    pointer-events: none;
}

/* Wortmarke der Seite: Branche bzw. Ort, als Kontur. */
.dsr .dsr-hero::after {
    content: attr(data-dsr-wm);
    position: absolute;
    right: -.06em;
    bottom: -.30em;
    z-index: -1;
    font-size: clamp(7rem, 20vw, 20rem);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .8;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .085);
    pointer-events: none;
    user-select: none;
}

.dsr .dsr-hero > .container { position: relative; z-index: 1; }

.dsr .dsr-hero .breadcrumb { color: var(--dsr-on-ink-dim); margin-bottom: clamp(28px, 4vw, 48px); }
.dsr .dsr-hero .breadcrumb a { color: rgba(255, 255, 255, .68); }
.dsr .dsr-hero .breadcrumb a:hover { color: #fff; }

.dsr .dsr-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 7px 14px;
    border: 1px solid var(--dsr-hair-ink);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}
.dsr .dsr-hero-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex: none;
}

.dsr .dsr-hero h1 {
    max-width: 21ch;
    margin: 0 0 22px;
    font-size: clamp(2.05rem, 4.4vw, 3.35rem);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -.04em;
    color: #fff;
    text-wrap: balance;
}
/* Ein Nomen als Kontur, gesetzt vom Codemod.
   Etwas Laufweite dazu: bei langen Woertern wie "Norddeutschland"
   laufen die Konturen sonst ineinander und der Zug wirkt schmutzig. */
.dsr .dsr-hero h1 .dsr-x {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .82);
    letter-spacing: .002em;
    padding-right: .04em;
}

.dsr .dsr-hero-sub {
    max-width: 56ch;
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.65;
    color: var(--dsr-on-ink);
}
.dsr .dsr-hero-sub a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.dsr .dsr-hero-sub a:hover { text-decoration-color: #fff; }
.dsr .dsr-hero-sub strong { color: #fff; }

.dsr .dsr-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

/* Checkliste: zwei Spalten, Haarlinien statt Bullets.
   Basis-Regel zeichnet einen dunklen Kreis mit weissem Haken, der auf
   Tinte unsichtbar waere. Deshalb Hintergrund zuruecksetzen und den
   Haken direkt als weisses SVG setzen. */
.dsr .dsr-hero-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(18px, 3vw, 36px);
    margin: clamp(26px, 3.5vw, 38px) 0 0;
    padding: 0;
    list-style: none;
}
.dsr .dsr-hero-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 13px 0;
    border-top: 1px solid var(--dsr-hair-ink);
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dsr-on-ink);
}
.dsr .dsr-hero-checklist li::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 3px;
    border-radius: 0;
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .85;
}

.dsr .dsr-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(28px, 3.5vw, 38px);
    padding: 15px 28px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--dsr-ink);
    font-size: .97rem;
    font-weight: 800;
    letter-spacing: -.01em;
    transition: box-shadow .3s ease, background .3s ease;
}
.dsr .dsr-hero-cta::after { content: "\2192"; font-weight: 700; }
/* REV-278/279: Buttons bewegen sich nicht. Nur Schatten/Farbe. */
.dsr .dsr-hero-cta:hover { transform: none; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); color: var(--dsr-ink); }

/* Faktenstapel rechts. Basis ist eine weisse Karte mit Schatten,
   die auf Tinte als leerer Block erschiene: komplett zuruecksetzen. */
.dsr .dsr-hero-stack {
    display: grid;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.dsr .dsr-hero-stat {
    position: relative;
    padding: 20px 22px;
    border: 1px solid var(--dsr-hair-ink);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}
.dsr .dsr-hero-stat:first-child { background: rgba(255, 255, 255, .085); border-color: rgba(255, 255, 255, .22); }
.dsr .dsr-hero-stat .stat-num,
.dsr .dsr-hero-stat > strong {
    display: block;
    font-size: clamp(1.45rem, 2.6vw, 1.95rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.035em;
    color: #fff;
}
.dsr .dsr-hero-stat .stat-lbl,
.dsr .dsr-hero-stat .stat-label,
.dsr .dsr-hero-stat > span:last-child {
    display: block;
    margin-top: 7px;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--dsr-on-ink-dim);
}
.dsr .dsr-hero-stat-tag {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

/* ============================================================
   2 · TRUST-ZEILE + LAUFBAND
   ============================================================ */

.dsr .trust-row {
    background: var(--white);
    border-bottom: 1px solid var(--dsr-hair-soft);
}
.dsr .trust-row-item {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--text-light);
    text-transform: none;
}
.dsr .trust-row-item svg { opacity: .55; }

.dsr-ticker {
    overflow: hidden;
    padding: 13px 0;
    background: var(--dsr-ink);
    border-block: 1px solid var(--dsr-hair-ink);
}
.dsr-ticker-track { display: flex; width: max-content; }
.dsr-ticker span {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    padding-right: 26px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, .42);
}
.dsr-ticker span::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
}
@media (prefers-reduced-motion: no-preference) {
    .dsr-ticker-track { animation: dsrTick 44s linear infinite; }
}
@keyframes dsrTick { to { transform: translateX(-50%); } }

/* ============================================================
   3 · DOSSIER-INDEX (ersetzt die Karten-Optik des art-toc)
   ============================================================ */

.dsr .pillar-section--accent { background: var(--white); padding-top: clamp(44px, 6vw, 72px); }

.dsr .art-toc {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 2px solid var(--dark);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.dsr .art-toc > strong {
    display: block;
    padding: 16px 0 4px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-lighter);
}
.dsr .art-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(24px, 4vw, 56px);
    margin: 0;
    padding: 0;
    counter-reset: dsrtoc;
    list-style: none;
}
.dsr .art-toc li {
    counter-increment: dsrtoc;
    margin: 0;
    border-top: 1px solid var(--dsr-hair-soft);
}
.dsr .art-toc li:first-child,
.dsr .art-toc li:nth-child(2) { border-top: 0; }
.dsr .art-toc a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    align-items: baseline;
    gap: 12px;
    padding: 14px 0;
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dark);
    transition: color .25s ease;
}
.dsr .art-toc a::before {
    content: counter(dsrtoc, decimal-leading-zero);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--text-lighter);
    font-variant-numeric: tabular-nums;
}
.dsr .art-toc a::after {
    content: "\2192";
    font-size: .8rem;
    color: var(--text-lighter);
    opacity: 0;
    transition: opacity .25s ease;
}
.dsr .art-toc a:hover { color: #000; }
.dsr .art-toc a:hover::after { opacity: 1; }

/* Kurzfassung: die Antwort direkt nach dem Index, linksbuendig. */
.dsr .dsr-lead {
    max-width: 74ch;
    margin: clamp(52px, 7vw, 84px) 0 0;
    padding-left: clamp(16px, 2vw, 26px);
    border-left: 2px solid var(--dark);
    text-align: left !important;
}
.dsr .dsr-lead > p:first-child {
    font-size: clamp(1.08rem, 1.6vw, 1.3rem) !important;
    line-height: 1.55 !important;
    color: var(--dark);
}
.dsr .dsr-lead > p { text-align: left; }

/* ============================================================
   4 · KAPITEL-SPINE: klebende Marke links, Inhalt rechts
   ============================================================ */

.dsr .pillar-section { counter-increment: none; }
.dsr main { counter-reset: dsrsec; }

.dsr .pillar-section:not(.pillar-section--accent):not(.pillar-section--final-cta) > .container {
    display: grid;
    grid-template-columns: var(--dsr-rail) minmax(0, 1fr);
    column-gap: var(--dsr-gap);
    align-items: start;
}
.dsr .pillar-section:not(.pillar-section--accent):not(.pillar-section--final-cta) > .container > * { grid-column: 2; min-width: 0; }

/* Die Basis zentriert mehrere Bausteine per margin-inline:auto.
   Als Grid-Item schaltet das die Streckung ab, das Item bemisst sich
   dann nach seiner Inhaltsbreite und sprengt auf 390px die Spur
   (die Kostentabelle wurde 454px breit in einer 390px-Spalte).
   Deshalb: Auto-Raender aus, Deckel weg, Mindestbreite null. */
.dsr .pillar-section > .container > .package-grid,
.dsr .pillar-section > .container > .cost-table-wrap,
.dsr .pillar-section > .container > .icon-grid,
.dsr .pillar-section > .container > ul.checklist,
.dsr .pillar-section > .container > .pillar-related-grid {
    max-width: none;
    margin-inline: 0;
    min-width: 0;
    justify-self: stretch;
}
/* Lesebreite behalten, nur die Auto-Raender aufheben. */
.dsr .pillar-section > .container > .faq-list,
.dsr .pillar-section > .container > .highlight-box {
    margin-inline: 0;
    min-width: 0;
    justify-self: start;
}

/* Gleiche Falle wie beim Kapitel-Kopf: die Regel darueber steht durch
   .container bei (0,3,0), dieser Selektor bei (0,4,0). */
.dsr .pillar-section:not(.pillar-section--accent):not(.pillar-section--final-cta) > .container > .pillar-section-header {
    grid-column: 1;
    grid-row: 1 / span 60;
    position: sticky;
    top: 96px;
    align-self: start;
    margin: 0;
    padding-top: 4px;
    text-align: left;
    counter-increment: dsrsec;
}
.dsr .pillar-section-header::before {
    content: counter(dsrsec, decimal-leading-zero);
    display: block;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dsr-hair);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--text-lighter);
    font-variant-numeric: tabular-nums;
}
.dsr .pillar-section-eyebrow {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    background: none;
    border: 0;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-lighter);
}
.dsr .pillar-section-eyebrow::before { content: none; }
.dsr .pillar-section-header h2 {
    margin: 0;
    font-size: clamp(1.18rem, 1.7vw, 1.42rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.dsr .pillar-section-sub {
    margin: 12px 0 0;
    font-size: .87rem;
    line-height: 1.6;
    color: var(--text-light);
}

/* ============================================================
   5 · KAPITEL-KOERPER
   ============================================================ */

.dsr .pillar-section-body { max-width: var(--dsr-measure); margin: 0; text-align: left; }
.dsr .pillar-section-body > p {
    margin: 0 0 18px;
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--text);
}
.dsr .pillar-section-body > p:first-child {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--dark);
}
.dsr .pillar-section-body h3 {
    margin: 34px 0 10px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Listen werden zu nummerierten Zeilen. Das ist der Kern des
   Umbaus: 173 Disc-Listen auf 17 Seiten waren die eigentliche
   Ursache der Textwand-Wirkung.

   Zwei Fallen, die hier bewusst umgangen werden:
   a) Die Basisregel steht bei (0,3,2) durch die :not()-Kette, also
      muss das :not() hier wiederholt werden, sonst gewinnt der Punkt.
   b) Kein display:grid auf dem li: nach dem <strong> folgt ein
      reiner Textknoten, den ein Grid-Container zu einem eigenen
      (dritten) Item macht. Deshalb relative Box plus absolute
      Ziffer, damit der Fliesstext am Label haengen bleibt. */
.dsr .pillar-section-body ul:not(.checklist):not(.pill-wrap),
.dsr .dsr-rows {
    display: block;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: dsrrow;
    border-top: 1px solid var(--dsr-hair);
}
.dsr .pillar-section-body ul:not(.checklist):not(.pill-wrap) > li,
.dsr .dsr-rows > li {
    counter-increment: dsrrow;
    position: relative;
    display: block;
    margin: 0;
    padding: 16px 0 16px 46px;
    border-bottom: 1px solid var(--dsr-hair-soft);
    font-size: .97rem;
    line-height: 1.62;
    color: var(--text);
}
.dsr .pillar-section-body ul:not(.checklist):not(.pill-wrap) > li::before,
.dsr .dsr-rows > li::before {
    content: counter(dsrrow, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.32em;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--text-lighter);
    font-variant-numeric: tabular-nums;
}
/* Nur echte Label-Zeilen bekommen die Ueberschrift.
   Der Codemod setzt .is-def, wenn auf das <strong> ein Doppelpunkt
   oder Komma folgt. Ohne diese Pruefung wuerde aus
   "<strong>Mobilfreundliches</strong> Design" eine Ueberschrift
   "Mobilfreundliches" mit dem Rumpf "Design". */
.dsr .pillar-section-body ul:not(.checklist):not(.pill-wrap) > li.is-def > strong:first-child,
.dsr--standort .dsr-chap-body ul > li.is-def > strong:first-child,
.dsr .dsr-rows > li.is-def > strong:first-child {
    display: block;
    margin-bottom: 3px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--dark);
}

/* Verschachtelte Listen bleiben schlicht. */
.dsr .pillar-section-body ul:not(.checklist):not(.pill-wrap) ul {
    margin: 8px 0 0;
    padding-left: 16px;
    border: 0;
    list-style: disc;
}
.dsr .pillar-section-body ul:not(.checklist):not(.pill-wrap) ul > li {
    display: list-item;
    padding: 3px 0;
    border: 0;
    font-size: .93rem;
}
.dsr .pillar-section-body ul:not(.checklist):not(.pill-wrap) ul > li::before { content: none; }

/* Merksatz statt getoenter Box. */
.dsr .highlight-box {
    max-width: var(--dsr-measure);
    margin: 30px 0 0;
    padding: 22px 0 0;
    border: 0;
    border-top: 2px solid var(--dark);
    border-radius: 0;
    background: none;
    font-size: .97rem;
    line-height: 1.65;
    color: var(--text);
}
.dsr .highlight-box > strong:first-child {
    display: block;
    margin-bottom: 6px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-lighter);
}

/* Icon-Raster: Haarlinien, keine Schatten. */
.dsr .icon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 30px 0 0;
    padding: 1px;
    background: var(--dsr-hair-soft);
    border: 1px solid var(--dsr-hair-soft);
    border-radius: 14px;
    overflow: hidden;
}
.dsr .icon-grid-item {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 22px;
    border: 0;
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
}
.dsr .icon-grid-item:hover { transform: none; box-shadow: none; background: var(--bg); }
.dsr .icon-grid-item .icon-wrap {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--dsr-ink);
}
.dsr .icon-grid-item h3 { margin: 0 0 4px; font-size: .96rem; font-weight: 800; letter-spacing: -.015em; }
.dsr .icon-grid-item p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-light); }

/* Tabellen: Haarlinien, Ziffern tabellarisch, GW-Zeile invers. */
.dsr .pillar-section table,
.dsr .cost-table,
.dsr .pricing-table {
    width: 100%;
    margin: 28px 0 0;
    border-collapse: collapse;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.dsr .pillar-section table th {
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--dark);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-lighter);
    background: none;
}
.dsr .pillar-section table td {
    padding: 15px 16px;
    border-bottom: 1px solid var(--dsr-hair-soft);
    color: var(--text);
}
.dsr .pillar-section table th:first-child,
.dsr .pillar-section table td:first-child { padding-left: 0; }
.dsr .pillar-section table tr.is-gw td,
.dsr .pillar-section table tr.highlight-row td {
    background: var(--dsr-ink);
    color: #fff;
    font-weight: 700;
    border-bottom-color: var(--dsr-ink);
}
.dsr .pillar-section table tr.is-gw td:first-child,
.dsr .pillar-section table tr.highlight-row td:first-child { padding-left: 16px; border-radius: 10px 0 0 10px; }
.dsr .pillar-section table tr.is-gw td:last-child,
.dsr .pillar-section table tr.highlight-row td:last-child { border-radius: 0 10px 10px 0; }

/* Steht die Tabelle in der Karten-Huelle der Basis, braucht sie ihren
   Innenabstand zurueck, sonst klebt die erste Spalte am Kartenrand. */
.dsr .cost-table-wrap { border: 1px solid var(--dsr-hair-soft); box-shadow: none; }
.dsr .cost-table-wrap th,
.dsr .cost-table-wrap td { padding-left: 22px; padding-right: 22px; }
.dsr .cost-table-wrap th { padding-top: 20px; padding-bottom: 13px; }
.dsr .cost-table-wrap tr.highlight-row td:first-child,
.dsr .cost-table-wrap tr.is-gw td:first-child { border-radius: 0; }
.dsr .cost-table-wrap tr.highlight-row td:last-child,
.dsr .cost-table-wrap tr.is-gw td:last-child { border-radius: 0; }

/* ============================================================
   6 · FAQ als Haarlinien-Register
   ============================================================ */

.dsr .faq-list { max-width: var(--dsr-measure); margin: 0; border-top: 1px solid var(--dark); }
.dsr .faq-item {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--dsr-hair-soft);
    border-radius: 0;
    background: none;
    overflow: visible;
}
.dsr .faq-item summary,
.dsr .faq-item > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 0;
    background: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.015em;
    color: var(--dark);
    list-style: none;
    cursor: pointer;
}
.dsr .faq-item summary::-webkit-details-marker { display: none; }
.dsr .faq-item summary::after {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 5px;
    background:
        linear-gradient(var(--dark), var(--dark)) center/13px 1.5px no-repeat,
        linear-gradient(var(--dark), var(--dark)) center/1.5px 13px no-repeat;
    transition: transform .3s var(--dsr-ease);
}
.dsr .faq-item[open] summary::after { transform: rotate(135deg); }
.dsr .faq-item[open] summary { color: #000; }
.dsr .faq-item .faq-answer,
.dsr .faq-item > div,
.dsr .faq-item > p {
    margin: 0;
    padding: 0 40px 22px 0;
    font-size: .96rem;
    line-height: 1.7;
    color: var(--text);
}

/* ============================================================
   7 · DUNKLE MOMENTE 2 UND 3
   ============================================================ */

.dsr .dsr-night {
    position: relative;
    background: var(--dsr-ink);
    color: #fff;
}
.dsr .dsr-night .pillar-section-header::before,
.dsr .dsr-night .dsr-chap-head::before { border-bottom-color: var(--dsr-hair-ink); color: rgba(255, 255, 255, .4); }
/* Kapitel-Variante der Standort-Seiten: dieselben Rueckdrehungen.
   Ohne die erste Regel bliebe der Einstiegsabsatz dunkel auf Tinte. */
.dsr .dsr-night .dsr-chap-body > p,
.dsr .dsr-night .dsr-chap-body > p:first-child { color: var(--dsr-on-ink); }
.dsr .dsr-night .dsr-chap-body > p:first-child { color: #fff; }
.dsr .dsr-night .dsr-chap-body ul:not(.checklist):not(.pill-wrap) { border-top-color: var(--dsr-hair-ink); }
.dsr .dsr-night .dsr-chap-body ul:not(.checklist):not(.pill-wrap) > li { color: var(--dsr-on-ink); border-bottom-color: var(--dsr-hair-ink); }
.dsr .dsr-night .dsr-chap-body ul:not(.checklist):not(.pill-wrap) > li::before { color: rgba(255, 255, 255, .45); }
.dsr .dsr-night .pillar-section-eyebrow { color: rgba(255, 255, 255, .45); }
.dsr .dsr-night h2,
.dsr .dsr-night h3 { color: #fff; }
/* strong/b erben im Dunkelband nicht: mehrere Basisregeln setzen
   hart color:var(--dark), was auf Tinte unlesbar ist. Die weisse
   Tabellen-Karte wird davon wieder ausgenommen. */
.dsr .dsr-night strong,
.dsr .dsr-night b { color: #fff; }
.dsr .dsr-night table strong,
.dsr .dsr-night table b,
.dsr .dsr-night .cost-table-wrap strong,
.dsr .dsr-night .cost-table-wrap b { color: inherit; }
.dsr .dsr-night .pillar-section-sub,
.dsr .dsr-night .pillar-section-body > p,
.dsr .dsr-night .pillar-section-body ul:not(.checklist):not(.pill-wrap) > li { color: var(--dsr-on-ink); }
.dsr .dsr-night .pillar-section-body > p:first-child { color: #fff; }
.dsr .dsr-night .pillar-section-body ul:not(.checklist):not(.pill-wrap),
.dsr .dsr-night .faq-list { border-top-color: var(--dsr-hair-ink); }
.dsr .dsr-night .pillar-section-body ul:not(.checklist):not(.pill-wrap) > li,
.dsr .dsr-night .faq-item { border-bottom-color: var(--dsr-hair-ink); }
.dsr .dsr-night .pillar-section-body ul:not(.checklist):not(.pill-wrap) > li::before,
.dsr .dsr-night .pillar-section-body ul:not(.checklist):not(.pill-wrap) > li > strong:first-child { color: #fff; }
.dsr .dsr-night a { color: #fff; }

/* Tabellen im Dunkelband bleiben Papier: eine weisse Karte auf Tinte
   liest sich als Beleg. Nur die GW-Zeile kippt auf Tinte.
   (Die Basis liefert mit .cost-table-wrap bereits die weisse Karte;
   ohne diese Rueckdrehung waere heller Text auf Weiss unsichtbar.) */
/* Nur Tabellen MIT Huelle werden zu Papier. Eine huellenlose Tabelle
   (die Kreis-Vergleiche) bliebe sonst weiss auf weiss unsichtbar. */
.dsr .dsr-night .cost-table-wrap,
.dsr .dsr-night .pricing-table-wrap,
.dsr .dsr-night .table-wrap { background: #fff; border-color: transparent; }
.dsr .dsr-night .cost-table-wrap table,
.dsr .dsr-night .pricing-table-wrap table,
.dsr .dsr-night .table-wrap table { background: #fff; border-radius: 14px; }
.dsr .dsr-night .cost-table-wrap th { color: var(--text-lighter); border-bottom-color: var(--dark); }
.dsr .dsr-night .cost-table-wrap td { color: var(--text); border-bottom-color: var(--dsr-hair-soft); }
.dsr .dsr-night .cost-table-wrap tbody td:first-child { color: var(--dark); }
.dsr .dsr-night .cost-table-wrap tr.is-gw td,
.dsr .dsr-night .cost-table-wrap tr.highlight-row td { background: var(--dsr-ink); color: #fff; border-bottom-color: var(--dsr-ink); }
.dsr .dsr-night .cost-table-wrap tr.is-gw td:first-child,
.dsr .dsr-night .cost-table-wrap tr.highlight-row td:first-child { color: #fff; }
.dsr .dsr-night .cost-table-wrap a { color: var(--primary); }

/* Huellenlose Tabellen im Dunkelband: Haarlinien auf Tinte. */
.dsr .dsr-night table { background: none; }
.dsr .dsr-night table th { color: rgba(255, 255, 255, .5); border-bottom-color: rgba(255, 255, 255, .5); }
.dsr .dsr-night table td { color: var(--dsr-on-ink); border-bottom-color: var(--dsr-hair-ink); }
.dsr .dsr-night table tbody td:first-child { color: #fff; }
.dsr .dsr-night .highlight-box { border-top-color: #fff; color: var(--dsr-on-ink); }
.dsr .dsr-night .highlight-box > strong:first-child { color: rgba(255, 255, 255, .5); }
.dsr .dsr-night .icon-grid { background: var(--dsr-hair-ink); border-color: var(--dsr-hair-ink); }
.dsr .dsr-night .icon-grid-item { background: var(--dsr-ink-2); }
.dsr .dsr-night .icon-grid-item:hover { background: var(--dsr-ink-3); }
.dsr .dsr-night .icon-grid-item .icon-wrap { background: rgba(255, 255, 255, .12); }
.dsr .dsr-night .icon-grid-item p { color: var(--dsr-on-ink-dim); }
.dsr .dsr-night .faq-item summary { color: #fff; }
.dsr .dsr-night .faq-item summary::after { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); }

/* Der frueher hier stehende Block .dsr .pillar-section--final-cta
   (zentrierter heller Schluss der Branchen-Familie) ist entfallen.
   Alle 44 Dossier-Seiten schliessen mit .dsr-close (Abschnitt 10),
   keine Seite mit .dsr am body traegt die Klasse noch. Die sechs
   verbliebenen Trager (baukasten-vs-webdesigner, ki-findbar,
   onepager-erstellen-lassen, webdesign-preisindex-2026,
   webseite-kosten, website-mieten-vs-kaufen) sind keine
   Dossier-Seiten und wurden von diesem Layer nie erfasst. */

/* Merksatz-Plakette: im neuen Rhythmus hell, sonst waere sie ein
   vierter dunkler Moment mitten im Kapitel. */
.dsr--branche .visual-break {
    margin: 34px 0 0;
    padding: 26px 0 0;
    border: 0;
    border-top: 2px solid var(--dark);
    border-radius: 0;
    background: none;
    text-align: left;
}
.dsr--branche .visual-break h3 {
    margin: 0 0 8px;
    color: var(--dark);
    font-size: clamp(1.1rem, 1.9vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -.025em;
}
.dsr--branche .visual-break p { max-width: 62ch; margin: 0; color: var(--text-light); font-size: .97rem; }

/* Querverweis-Bloecke: Haarlinien statt weisser Karten. */
.dsr .cross-links,
.dsr .cross-link-section {
    margin: 26px 0 0;
    padding: 22px 0 0;
    border: 0;
    border-top: 1px solid var(--dsr-hair);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* ============================================================
   8 · STANDORT-SEITEN
   Der flache .legal-page-Text wird zu Kapiteln mit derselben
   Doppelspalte. Die tote rechte Haelfte verschwindet.
   ============================================================ */

.dsr--standort .legal-page { padding: 0; }
.dsr--standort .legal-page > .container { max-width: var(--max-width); }

/* Kurzfassung + Gruende-Raster direkt unter dem Hero. */
.dsr .dsr-intro { padding: clamp(44px, 6vw, 76px) 0 clamp(38px, 5vw, 60px); background: var(--white); }
.dsr .dsr-intro .dsr-lead { margin-top: 0; }
.dsr .dsr-intro .eeat-note { margin: clamp(26px, 3.5vw, 38px) 0 0 !important; }
.dsr .dsr-intro .icon-grid { margin-top: clamp(30px, 4vw, 44px); max-width: none; }

.dsr .dsr-chap { padding: clamp(38px, 5.5vw, 68px) 0; border-top: 1px solid var(--dsr-hair-soft); }
.dsr .dsr-chap:first-of-type { border-top: 0; }
.dsr .dsr-chap.dsr-night { border-top: 0; }
.dsr .dsr-chap > .container {
    display: grid;
    grid-template-columns: var(--dsr-rail) minmax(0, 1fr);
    column-gap: var(--dsr-gap);
    align-items: start;
}
.dsr .dsr-chap > .container > * { grid-column: 2; min-width: 0; }
/* Muss die Regel darueber schlagen: .container ist selbst eine Klasse,
   der Nachfahren-Selektor steht also bei (0,3,0). */
.dsr .dsr-chap > .container > .dsr-chap-head {
    grid-column: 1;
    grid-row: 1 / span 60;
    position: sticky;
    top: 96px;
    align-self: start;
    padding-top: 4px;
    counter-increment: dsrsec;
}
.dsr .dsr-chap-head::before {
    content: counter(dsrsec, decimal-leading-zero);
    display: block;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dsr-hair);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--text-lighter);
    font-variant-numeric: tabular-nums;
}
.dsr .dsr-chap-head h2 {
    margin: 0;
    font-size: clamp(1.15rem, 1.65vw, 1.38rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.dsr .dsr-chap-body { max-width: var(--dsr-measure); }
.dsr--standort .dsr-chap-body > p {
    margin: 0 0 16px;
    font-size: 1.02rem;
    line-height: 1.72;
}
.dsr--standort .dsr-chap-body > p:first-child { font-size: 1.08rem; color: var(--dark); }
.dsr--standort .dsr-chap-body > ul:not(.checklist):not(.pill-wrap):not(.city-links) {
    display: block;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: dsrrow;
    border-top: 1px solid var(--dsr-hair);
}
.dsr--standort .dsr-chap-body > ul:not(.checklist):not(.pill-wrap):not(.city-links) > li {
    counter-increment: dsrrow;
    position: relative;
    display: block;
    margin: 0;
    padding: 16px 0 16px 46px;
    border-bottom: 1px solid var(--dsr-hair-soft);
    line-height: 1.62;
}
.dsr--standort .dsr-chap-body > ul:not(.checklist):not(.pill-wrap):not(.city-links) > li::before {
    content: counter(dsrrow, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.32em;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: .69rem;
    font-weight: 800;
    color: var(--text-lighter);
    font-variant-numeric: tabular-nums;
}

/* Vergleichstabellen der drei Kreis-Seiten. Sie tragen inline
   width:100% und haben keine Scroll-Huelle; auf 390px schoben sie
   die Seite auf 454px. display:block gibt ihnen eine eigene. */
.dsr .dsr-chap-body table {
    width: 100%;
    margin: 26px 0 0;
    border-collapse: collapse;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.dsr .dsr-chap-body table th {
    padding: 0 16px 12px 0;
    border-bottom: 1px solid var(--dark);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-lighter);
    background: none;
}
.dsr .dsr-chap-body table td {
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--dsr-hair-soft);
    color: var(--text);
}
.dsr .dsr-chap-body table td:first-child { color: var(--dark); font-weight: 600; }
.dsr .dsr-night .dsr-chap-body table th { color: rgba(255, 255, 255, .5); border-bottom-color: rgba(255, 255, 255, .5); }
.dsr .dsr-night .dsr-chap-body table td { color: var(--dsr-on-ink); border-bottom-color: var(--dsr-hair-ink); }
.dsr .dsr-night .dsr-chap-body table td:first-child { color: #fff; }

/* Nachbarorte / Querverweise als Chip-Feld. */
.dsr .city-links,
.dsr .pill-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.dsr .city-links a,
.dsr .pill-wrap a,
.dsr .pill-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--dsr-hair);
    border-radius: 999px;
    background: var(--white);
    font-size: .87rem;
    font-weight: 600;
    color: var(--dark);
    transition: border-color .25s ease, background .25s ease;
}
.dsr .city-links a:hover,
.dsr .pill-wrap a:hover,
.dsr .pill-link:hover { transform: none; border-color: var(--dark); background: var(--bg); }
.dsr .dsr-night .city-links a,
.dsr .dsr-night .pill-wrap a { border-color: var(--dsr-hair-ink); background: rgba(255, 255, 255, .05); color: #fff; }
.dsr .dsr-night .city-links a:hover,
.dsr .dsr-night .pill-wrap a:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

.dsr .cross-link-section > h3,
.dsr .cross-links > h3 {
    margin: 0 0 4px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-lighter);
}

/* Byline aus der Praxis. */
.dsr .eeat-note {
    max-width: var(--dsr-measure);
    border-left: 2px solid var(--dark) !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 2px 0 2px 20px !important;
    font-size: .95rem;
    line-height: 1.65;
}

/* Der alte .stat-grid-Dunkelblock entfaellt: die Zahlen sitzen
   jetzt im Hero. Die REV-135-Regel :has(.stat-grid) greift nicht
   mehr, weil der Codemod das Element aus .legal-page heraushebt. */
.dsr .dsr-hero .stat-grid { display: contents; }

/* Ebenfalls entfallen, weil keine Dossier-Seite die Klassen mehr
   setzt: .dsr .cta-box (der alte CTA-Kasten) und .dsr .dsr-outro
   (der dunkle Ausklang der 24 Standort-Seiten, erste Haelfte des
   1.857px langen schwarzen Seitenendes, das Abschnitt 10 aufloest). */

/* Das alte .visual-break-Band ist im neuen Rhythmus ein
   vierter dunkler Moment. Restraint-Doktrin: entfaellt. */
.dsr--standort .visual-break { display: none; }

/* ============================================================
   9 · HUB-SEITEN
   ============================================================ */

.dsr--hub .dsr-hero h1 { max-width: 20ch; }

.dsr-count {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 18px;
}
.dsr-count b {
    font-size: clamp(3.2rem, 8vw, 5.6rem);
    font-weight: 900;
    line-height: .85;
    letter-spacing: -.05em;
    color: #fff;
}
.dsr-count span {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dsr-on-ink-dim);
    max-width: 12ch;
    line-height: 1.4;
}

.dsr-fam { padding: clamp(40px, 5.5vw, 68px) 0 0; }
.dsr-fam:last-of-type { padding-bottom: clamp(40px, 5.5vw, 68px); }
.dsr-fam > .container {
    display: grid;
    grid-template-columns: var(--dsr-rail) minmax(0, 1fr);
    column-gap: var(--dsr-gap);
    align-items: start;
}
.dsr-fam-head { position: sticky; top: 96px; align-self: start; }
.dsr-fam-head h2 {
    margin: 0 0 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dsr-hair);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.dsr-fam-head p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--text-light); }

.dsr-list { border-top: 1px solid var(--dsr-hair); }
.dsr-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--dsr-hair-soft);
    color: inherit;
    transition: background .25s ease, padding .25s ease;
}
.dsr-row:hover { background: var(--bg); padding-left: 12px; padding-right: 12px; color: inherit; }
.dsr-row-num {
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--text-lighter);
    font-variant-numeric: tabular-nums;
}
/* h3 statt strong: jede Branche bzw. jeder Ort behaelt eine eigene
   Ueberschrift, die Familie darueber ist die h2. Vorher waren es 17
   gleichrangige h2, die nur Linktexte waren. */
.dsr-row-main h3 {
    display: block;
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--dark);
    line-height: 1.3;
}
.dsr-row-main span { display: block; margin-top: 3px; font-size: .89rem; line-height: 1.5; color: var(--text-light); }
.dsr-row-go {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--dsr-hair);
    border-radius: 50%;
    font-size: .8rem;
    color: var(--dark);
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.dsr-row:hover .dsr-row-go { background: var(--dsr-ink); border-color: var(--dsr-ink); color: #fff; }

/* Kreis-Panels auf dem Standorte-Hub. */
.dsr-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--dsr-hair-soft); border: 1px solid var(--dsr-hair-soft); border-radius: 16px; overflow: hidden; }
.dsr-panel { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 24px; background: var(--white); color: inherit; transition: background .25s ease; }
.dsr-panel:hover { background: var(--bg); color: inherit; }
.dsr-panel-num { font-size: .69rem; font-weight: 800; letter-spacing: .05em; color: var(--text-lighter); font-variant-numeric: tabular-nums; }
.dsr-panel h3 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em; color: var(--dark); }
.dsr-panel p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--text-light); }
.dsr-panel em { margin-top: auto; padding-top: 14px; font-style: normal; font-size: .82rem; font-weight: 700; color: var(--dark); }
.dsr-panel em::after { content: " \2192"; }

/* Karte auf dem Standorte-Hub. */
.dsr--hub .loc-pro-layout { align-items: start; }
.dsr-maprow { padding: clamp(44px, 6vw, 76px) 0; }

/* Die Abschluss-Notiz .dsr-tail der beiden Hubs ist entfallen. Sie
   war zuletzt eine dritte Schluss-Variante neben .dsr-close, obwohl
   Hub und Kind einen Klick auseinander liegen. Beide Hubs schliessen
   jetzt mit .dsr-close (Abschnitt 10), gebaut von
   _build/build-hub-pages.cjs. */

/* ============================================================
   10 · SCHLUSS-CTA (der einzige Abschluss aller Dossier-Seiten)
   ------------------------------------------------------------
   Die globale .footer-cta ist auf allen 44 Dossier-Seiten entfallen
   (17 Branchen, 25 Standorte, 2 Hubs). Dieser Block ist jetzt der
   einzige Abschluss und hat den Konfigurator-Zweitweg sowie die drei
   Vertrauens-Zeilen der alten footer-cta uebernommen. Alle drei
   Gruppen teilen sich ab hier exakt eine Anatomie:
   Marke links (Eyebrow + Vertrauensspalte), Inhalt rechts
   (H2, Absatz, zwei Wege). .dsr-outro, .pillar-section--final-cta
   und der Hub-eigene .dsr-tail sind ersetzt.

   HELL, und zwar gemessen statt geschmeckt. Vollseiten-Capture
   webdesign-kiel bei 1440px, Zustand vorher: dsr-outro 383px auf
   #0e0f12, footer-cta 519px auf #111111, Footer 955px auf Tinte,
   zusammen 1.857px ununterscheidbares Schwarz am Seitenende. Auch
   nach dem Entfernen der footer-cta blieben 1.338px, und die Kante
   zwischen CTA und Footer waere unsichtbar geblieben: der einzige
   Abschluss der Seite haette wie der Anfang des Footers gelesen.
   Hell gesetzt bleibt die Doktrin aus Abschnitt 7 intakt (genau
   drei dunkle Momente: Hero, Argument-Band, Footer) und die Kante
   zum Footer wird die schaerfste Linie der Seite.

   Runde 2 nach der Design-Kritik, drei Korrekturen:

   (a) KEINE WORTMARKE MEHR. Der Ausklang trug bis Runde 1 dieselbe
       Kontur-Wortmarke wie der Hero. Im Hero funktioniert sie, weil
       sie dort 288px weiss auf Tinte steht. Auf Papier bei 172px und
       10% Tinte (#e7e7e7, Delta 24 gegen Weiss) wurde daraus ein
       Artefakt: unten um 45% der Glyphenhoehe an .dsr-close
       abgeschnitten, bei langen Nomen (HANDWERK, STEINBURG,
       FLENSBURG) zusaetzlich rechts, also auf zwei Seiten gekappt.
       Dazu steht 120px darunter die riesige Footer-Wortmarke
       "GuenstigeWebseiten": die Seite endete mit zwei uebereinander
       gestapelten Geister-Schriftzuegen. Das Register gehoert dem
       Footer. Der Ausklang traegt jetzt die 2px-Kante, die gefuellte
       Marke und die grosse H2, das reicht.

   (b) DIE MARKE IST GEFUELLT. Vorher stand dort ein 12,5px-Label und
       darunter 430px Nichts, waehrend jede Kapitel-Marke der Seite
       Nummer, Eyebrow, H2 und Kurzfassung traegt: der Ausklang war
       die eine Sektion, deren Spalte nie belegt wurde. Die drei
       Vertrauens-Zeilen sitzen jetzt dort als Beleg-Spalte. Damit
       endet auch die Haarlinie ueber ihnen an dem, was sie
       unterstreicht, statt 370px ins Leere zu laufen. Das Markup
       bleibt in Lesereihenfolge (Eyebrow, H2, Absatz, Aktionen,
       Vertrauen), nur die Rasterzuweisung holt die Liste nach links.

   (c) DIE INHALTSSPALTE IST GEDECKELT. Kapitel laufen auf
       --dsr-measure (68ch), der Ausklang auf 54ch: enger als jedes
       Kapitel, damit die rechte Kante eine Entscheidung ist und
       nicht der Rest der Zeile.
   ============================================================ */

.dsr .dsr-close {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(56px, 7.5vw, 104px) 0 clamp(60px, 8vw, 112px);
    background: var(--white);
    /* Die kraeftigste Haarlinie der Seite: das Kapitel darueber ist
       ebenfalls Papier, ohne diese Kante liefe der Schluss aus. */
    border-top: 2px solid var(--dsr-ink);
}

/* Raster-Print des Heros, in Tinte statt in Weiss. Bleibt als
   einziges Hintergrund-Motiv: er liegt unter den Textspalten, nicht
   hinter ihnen, und deckt nur die sonst leere untere rechte Ecke. */
.dsr .dsr-close::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(to right, rgba(17, 17, 17, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(17, 17, 17, .05) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(110% 100% at 88% 100%, #000 0%, transparent 68%);
    -webkit-mask-image: radial-gradient(110% 100% at 88% 100%, #000 0%, transparent 68%);
    pointer-events: none;
}

/* Dieselbe Doppelspalte wie die Kapitel, Inhaltsspalte gedeckelt.
   Die Regeln fuer Marke und Vertrauen muessen die Sammelregel
   schlagen: .container ist selbst eine Klasse, der Selektor darueber
   steht also bei (0,3,0). Gilt spiegelbildlich im Media-Query in
   Abschnitt 12. */
.dsr .dsr-close > .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--dsr-rail) minmax(0, 54ch);
    /* Zeile 1 exakt so hoch wie die Marke. Ohne min-content verteilt
       das Raster die Hoehe des zeilenspannenden Rumpfs auf beide
       Zeilen und die Beleg-Spalte rutscht 98px nach unten weg. */
    grid-template-rows: min-content 1fr;
    column-gap: var(--dsr-gap);
    align-items: start;
}
.dsr .dsr-close > .container > * { grid-column: 2; min-width: 0; }
/* Zwei Zeilen, damit die Beleg-Spalte direkt unter der Marke sitzt
   und nicht unter dem gesamten Rumpf: der Rumpf spannt beide Zeilen,
   Zeile 1 ist so hoch wie die Marke. */
.dsr .dsr-close > .container > .dsr-close-body { grid-column: 2; grid-row: 1 / span 2; }
.dsr .dsr-close > .container > .dsr-close-head { grid-column: 1; grid-row: 1; padding-top: 4px; }
/* Beleg-Spalte: DOM-Reihenfolge bleibt hinter den Aktionen, das
   Raster holt sie unter die Marke. */
.dsr .dsr-close > .container > .dsr-close-trust { grid-column: 1; grid-row: 2; align-self: start; }

.dsr .dsr-close-eyebrow {
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dsr-hair);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-lighter);
}

/* Der Schluss darf lauter sein als jedes Kapitel: er ist der
   letzte Eindruck und antwortet massstaeblich auf die H1. */
.dsr .dsr-close-body h2 {
    max-width: 17ch;
    margin: 0 0 16px !important;
    color: var(--dark);
    font-size: clamp(1.95rem, 4.2vw, 3.05rem) !important;
    font-weight: 900 !important;
    line-height: 1.04;
    letter-spacing: -.04em !important;
    text-wrap: balance;
}
.dsr .dsr-close-body > p {
    max-width: 54ch;
    margin: 0 0 clamp(28px, 3.6vw, 40px);
    font-size: clamp(1rem, 1.35vw, 1.1rem);
    line-height: 1.65;
    color: var(--text-light);
}
/* Inline-Verweise im Ausklang brauchen eine Affordanz: ohne
   Unterstreichung stehen sie dunkler als der Absatz und lesen
   damit weniger klickbar als der Text um sie herum. */
.dsr .dsr-close-body > p a {
    color: var(--dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--dsr-hair);
}
.dsr .dsr-close-body > p a:hover { text-decoration-color: var(--dark); }

.dsr .dsr-close-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}
/* Keine Bewegung im Hover, nur Farbe und Ring (REV-278 bis 280). */
.dsr .dsr-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .97rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.dsr .dsr-close-btn-primary { background: var(--dsr-ink); color: #fff; }
/* Pfeil wie am Hero-CTA aus CSS, nicht als Zeichen im Textknoten:
   sonst ist der Abstand davor eine Wortluecke und das gap der
   Flexbox wirkungslos. */
.dsr .dsr-close-btn-primary::after { content: "\2192"; font-weight: 700; }
.dsr .dsr-close-btn-primary:hover {
    transform: none;
    background: var(--dsr-ink-3);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(17, 17, 17, .07);
}
/* Nicht die uebliche Haarlinie: der Zweitweg ist ein Bedienelement,
   seine Kontur muss die 3:1 aus WCAG 1.4.11 halten. rgba(17,17,17,.45)
   auf Weiss ergibt #949494 und damit 3,03:1.
   Fuellung ausdruecklich weiss, nicht "none": sonst laeuft der
   Raster-Print des Bandes durch das Bedienelement hindurch. */
.dsr .dsr-close-btn-secondary { background: var(--white); color: var(--dark); border-color: rgba(17, 17, 17, .45); }
.dsr .dsr-close-btn-secondary:hover {
    transform: none;
    background: var(--white);
    color: var(--dark);
    border-color: var(--dark);
}

/* Vertrauens-Spalte in der Marke. Immer untereinander, nie als
   Zeile: als Zeile brach sie auf schmalen Viewporten 2 + 1 um und
   liess "Kein Pflicht-Abo" verwaist stehen. Monochrom, das Layer
   fuehrt keine Akzentfarbe. */
.dsr .dsr-close-trust {
    display: flex;
    flex-direction: column;
    gap: 9px;
    /* Keine eigene Haarlinie: die Marke darueber zieht bereits eine,
       eine zweite 22px spaeter waeren zwei Linien ohne Inhalt dazwischen. */
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    font-size: .84rem;
    line-height: 1.35;
    color: var(--text-light);
}
.dsr .dsr-close-trust > li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.dsr .dsr-close-trust > li::before { content: none; }
.dsr .dsr-close-trust .check { color: var(--dark); font-weight: 900; }

/* ============================================================
   11 · REVEALS (nur unterhalb des Heros, transform + opacity)
   ============================================================ */

.dsr.js-rv [data-dsr-rv] { opacity: 0; transform: translateY(16px); }
.dsr.js-rv [data-dsr-rv].is-in {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .65s var(--dsr-ease);
}
@media (prefers-reduced-motion: reduce) {
    .dsr.js-rv [data-dsr-rv] { opacity: 1; transform: none; }
}

/* ============================================================
   12 · SCHMALERE VIEWPORTS
   ============================================================ */

@media (max-width: 1080px) {
    .dsr .pillar-section:not(.pillar-section--accent):not(.pillar-section--final-cta) > .container,
    .dsr .dsr-chap > .container,
    .dsr .dsr-close > .container,
    .dsr-fam > .container {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 22px;
    }
    .dsr .pillar-section:not(.pillar-section--accent):not(.pillar-section--final-cta) > .container > *,
    .dsr .dsr-close > .container > *,
    .dsr .dsr-chap > .container > * { grid-column: 1; }
    /* Volle Spezifitaet, sonst gewinnen die Desktop-Regeln (0,4,0)
       trotz Media-Query und der Kopf spannt weiter ueber 60 Zeilen. */
    .dsr .pillar-section:not(.pillar-section--accent):not(.pillar-section--final-cta) > .container > .pillar-section-header,
    .dsr .dsr-chap > .container > .dsr-chap-head,
    .dsr .dsr-close > .container > .dsr-close-head,
    .dsr-fam > .container > .dsr-fam-head {
        grid-column: 1;
        grid-row: auto;
        position: static;
        top: auto;
    }
    /* Marke, Inhalt, Beleg-Spalte laufen hier untereinander. Die
       Vertrauens-Spalte braucht dieselbe volle Spezifitaet, sonst
       schlaegt die Desktop-Regel (0,4,0) weiter auf Spalte 1. */
    .dsr .dsr-close > .container > .dsr-close-head { padding-top: 0; }
    .dsr .dsr-close > .container > .dsr-close-body,
    .dsr .dsr-close > .container > .dsr-close-trust { grid-column: 1; grid-row: auto; }
    .dsr .dsr-close-body h2 { font-size: clamp(1.8rem, 5.6vw, 2.5rem) !important; }
    .dsr .pillar-section-header h2,
    .dsr .dsr-chap-head h2 { font-size: clamp(1.32rem, 3.4vw, 1.7rem); }
    .dsr .pillar-section-body,
    .dsr .dsr-chap-body,
    .dsr .highlight-box,
    .dsr .faq-list,
    .dsr .eeat-note { max-width: none; }
    .dsr .dsr-hero-grid { grid-template-columns: minmax(0, 1fr); }
    /* Basis zieht die Faktenspalte per order:-1 nach oben. Im dunklen
       Hero muss die H1 zuerst kommen. */
    .dsr .dsr-hero .pillar-hero-aside { order: 0; margin-top: 8px; }
    .dsr .dsr-hero-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dsr .dsr-hero-stat { padding: 16px 18px; }
    .dsr-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .dsr .dsr-hero { padding-bottom: clamp(36px, 8vw, 52px); }
    .dsr .dsr-hero::after { font-size: clamp(5.5rem, 34vw, 11rem); bottom: -.24em; }
    .dsr .dsr-hero h1 { max-width: none; }
    .dsr .dsr-hero-checklist { grid-template-columns: minmax(0, 1fr); }
    .dsr .dsr-hero-stack { grid-template-columns: minmax(0, 1fr); }
    .dsr .dsr-hero-cta { width: 100%; justify-content: center; }
    .dsr .art-toc ol { grid-template-columns: minmax(0, 1fr); }
    .dsr .art-toc li:nth-child(2) { border-top: 1px solid var(--dsr-hair-soft); }
    .dsr .icon-grid { grid-template-columns: minmax(0, 1fr); }
    .dsr .pillar-section-body > ul > li,
    .dsr--standort .dsr-chap-body > ul > li,
    .dsr .dsr-rows > li { grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; }
    .dsr-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px; padding: 17px 0; }
    .dsr-row:hover { padding-left: 0; padding-right: 0; }
    .dsr-panels { grid-template-columns: minmax(0, 1fr); }
    .dsr-count b { font-size: clamp(2.8rem, 17vw, 4rem); }
    .dsr .pillar-section table,
    .dsr .dsr-chap-body table { display: block; overflow-x: auto; }
    .dsr .dsr-close-body h2 { max-width: none; }
    .dsr .dsr-close-actions { gap: 10px; }
    .dsr .dsr-close-btn { width: 100%; justify-content: center; }
    .dsr .dsr-close-trust { font-size: .82rem; }
}