/* Die Rechtsseiten als ein Dokument: /agb/, /datenschutz/, /impressum/ (17.10.2026).

   Vorbild ist die AGB-Ausgabe 07.2026 als PDF in SharePoint (02_Contract
   Templates & T&C): Deckblatt mit Eyebrow, Titel mit Serifen-Kursive,
   Adresszeile und der Verlaufslinie darunter, der Hinweis als ruhiges Feld
   mit blauem Balken, die Teile als Navy-Baender, "Art. 12" in Markenblau.

   Was dazukommt, kommt fuer das Lesen am Bildschirm dazu und nicht als
   Schmuck: eine Kapitelleiste, die weiss, wo man ist, ein Ort-Anzeiger auf
   dem Telefon, Verweise auf jeden Abschnitt, ein Aufleuchten am Sprungziel
   und ein Druckbild, das wieder wie die PDF aussieht.

   Keine Kurzfassung oben (Daniel, 17.10.2026). Keine Kacheln, keine
   Farbflaechen ausser den Teilebaendern, die aus der PDF kommen (Daniel,
   17.09.2026: "ruhig, gross, viel Luft").

   Geladen ueber "recht: ja" im Kopfkommentar, build/pages.py haengt die
   Datei nach dem gemeinsamen Stilblock ein. Alles steht unter
   .dt-seite--recht, damit es gegen die gemeinsamen Regeln gewinnt und
   nirgends sonst wirkt. Die eigenen Klassen (.dt-dok, .dt-verweis,
   .dt-inhalt__nr, .dt-seite__zusatz) gibt es nur auf diesen Seiten. */

.dt-seite--recht{
  --recht-text:#2b3038;
  --recht-navy:#0b2647;
  --recht-oben:calc(var(--nav-h,74px) + 2rem);
  max-width:70rem;
}
.dt-seite--recht .dt-eyebrow{color:var(--color-blue)}
.dt-seite--recht ::selection{background:rgba(0,186,235,.22);color:inherit}

/* ---------- Deckblatt ---------- */
.dt-seite--recht .dt-seite__kopfteil{max-width:none;padding-bottom:0}
.dt-seite--recht .dt-seite__kopfteil > *:not(.dt-dok__linie){max-width:52rem}
.dt-seite--recht h1{margin-bottom:1.1rem;text-wrap:balance}
.dt-seite--recht .dt-seite__stand{font-size:12px;line-height:1.6;letter-spacing:.09em}
.dt-seite__zusatz{margin:.5rem 0 0;font-size:.95rem;line-height:1.55;color:var(--text-muted)}
.dt-seite--recht .dt-seite__zusatz a{color:var(--color-blue);text-underline-offset:.2em}
.dt-seite--recht .dt-seite__lead{color:var(--recht-text);max-width:44rem}

.dt-dok{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.6rem 0 0}
.dt-dok__stand{display:inline-flex;align-items:center;gap:.55rem;margin-right:.6rem;font-family:var(--font-display);
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}
.dt-dok__stand::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--gradient-logo);flex:none}
.dt-dok__k{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border:1px solid var(--border-subtle);
  border-radius:999px;background:var(--surface-card,#fff);font-family:var(--font-display);font-size:.92rem;font-weight:600;
  color:var(--text-strong);text-decoration:none;cursor:pointer;
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background-color .2s var(--ease-out)}
.dt-seite--recht a.dt-dok__k{text-decoration:none;color:var(--text-strong)}
.dt-dok__k svg{flex:none;color:var(--color-blue)}
.dt-dok__k small{font-weight:500;font-size:.82rem;color:var(--text-subtle)}
.dt-dok__k:hover{border-color:var(--color-cyan);color:var(--color-navy)}
.dt-dok__k:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-cyan)}
.dt-dok__k.is-fertig{border-color:var(--color-cyan);background:rgba(0,186,235,.07)}
.dt-dok__k[hidden]{display:none}
.dt-dok__linie{height:3px;margin:2.4rem 0 3.6rem;border-radius:3px;background:var(--gradient-logo);
  transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  .dt-recht-js .dt-dok__linie{animation:dt-linie 1.1s var(--ease-out) .15s both}
  @keyframes dt-linie{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- Satzspiegel ---------- */
.dt-seite--recht .dt-seite__korpus{grid-template-columns:minmax(0,44rem)}
.dt-seite--recht .dt-seite__korpus--eins{display:block;max-width:44rem}
.dt-seite--recht .dt-seite__text p,.dt-seite--recht .dt-seite__text li{color:var(--recht-text);font-size:1.0625rem;line-height:1.7;
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 3;text-wrap:pretty}
.dt-seite--recht .dt-seite__text a{color:var(--color-blue);text-underline-offset:.2em;text-decoration-color:rgba(1,94,165,.35)}
.dt-seite--recht .dt-seite__text a:hover{text-decoration-color:var(--color-cyan)}
.dt-seite--recht h2,.dt-seite--recht h3,.dt-seite--recht .dt-visit,.dt-seite--recht section[id]{scroll-margin-top:var(--recht-oben)}
.dt-seite--recht h2,.dt-seite--recht h3{position:relative;text-wrap:balance;hyphens:manual}

/* Abschnittsnummern (Datenschutz, Impressum): die Ziffer in der Serife des
   Titels, im Logoverlauf, wie das kursive Wort im h1. */
.dt-seite--recht h2 .dt-nr,.dt-visit__nr{display:block;margin:0 0 .35rem;font-family:var(--font-serif);font-style:italic;
  font-weight:400;font-size:2.1rem;line-height:1;letter-spacing:0;font-variant-numeric:lining-nums;
  background:var(--gradient-logo);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 .1em .12em 0;width:max-content}
.dt-visit__nr{text-transform:none}
/* Impressum: die Visitenkarte behaelt ihre Groesse gegen die Textregel oben. */
.dt-seite--recht .dt-seite__text p.dt-visit__name{font-family:var(--font-display);font-size:clamp(1.85rem,3vw,2.5rem);font-weight:600;
  line-height:1.1;letter-spacing:-.03em;color:var(--text-strong);margin:.45rem 0 .5rem;hyphens:manual}
.dt-seite--recht .dt-seite__text p.dt-visit__adresse{font-size:1.15rem;line-height:1.5;color:var(--text-muted);margin:0;hyphens:manual}
.dt-seite--recht .dt-zeilen li{hyphens:manual}
.dt-seite--recht h2:not(:first-child){margin-top:4.25rem}
.dt-seite--recht .dt-seite__text > h2:first-child{margin-top:0}

/* ---------- AGB: Hinweis, Teile, Artikel ---------- */
.dt-seite--recht .dt-agb-hinweis{margin:0 0 4rem;padding:1.7rem 1.9rem 1.5rem 2.1rem;border-radius:1rem;
  background:var(--surface-subtle,#f6f7f9);border:1px solid var(--border-subtle)}
.dt-seite--recht .dt-agb-hinweis::before{width:4px}
.dt-seite--recht h2.dt-agb-hinweis__titel{margin:0 0 .8rem;font-size:1.05rem;letter-spacing:-.01em;color:var(--color-navy)}
.dt-seite--recht .dt-agb-hinweis p{font-size:1rem;line-height:1.65}
.dt-seite--recht .dt-agb-hinweis .dt-agb-hinweis__satz{font-size:1.02rem !important;color:var(--text-strong) !important}
.dt-seite--recht .dt-agb-liste{columns:1;margin:.2rem 0 1.3rem}
.dt-seite--recht .dt-agb-liste li{font-size:.97rem;line-height:1.55;margin:0 0 .6rem;padding-left:1.2rem}
.dt-seite--recht .dt-agb-liste b{font-weight:500;color:var(--recht-text)}
.dt-seite--recht .dt-agb-liste span{white-space:normal}

.dt-seite--recht h2.dt-teil,.dt-seite--recht h2.dt-teil[data-teil]{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem 1rem;
  margin:4.5rem 0 2rem;padding:1.15rem 1.4rem;border-radius:.9rem;color:#fff;
  font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.02em;line-height:1.25;
  background:linear-gradient(100deg,var(--recht-navy) 0%,#06325f 70%,#0a4a85 100%);
  box-shadow:0 18px 36px -24px rgba(0,40,79,.7)}
.dt-seite--recht h2.dt-teil .dt-nr,.dt-seite--recht h2.dt-teil[data-teil="d"] .dt-nr{display:inline-flex;align-items:center;
  margin:0;padding:.18rem .6rem;border-radius:999px;background:rgba(0,186,235,.16);color:#7fdcf6;
  font-family:var(--font-display);font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;-webkit-background-clip:border-box;background-clip:border-box;width:auto}
.dt-teil__umfang{margin-left:auto;font-family:var(--font-display);font-size:.8rem;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.62)}
.dt-seite--recht h3{margin-top:3rem;font-size:1.18rem;line-height:1.3}
.dt-seite--recht h2 + h3{margin-top:1.2rem}
.dt-seite--recht h3 .dt-art{font-weight:700;color:var(--color-blue)}
.dt-seite--recht .dt-abs > li{padding-left:2rem}
.dt-seite--recht .dt-abs > li::before{font-weight:700}
/* Die Wege am Ende: 44 Punkte hoch, wie jedes Tippziel der Seite. */
.dt-seite--recht .dt-schluss__tasten a{display:inline-flex;align-items:center;min-height:44px}
.dt-seite--recht .dt-quelle{margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid var(--border-subtle);font-size:.92rem;line-height:1.6}

/* ---------- Datenschutz: Auf einen Blick am Ende ---------- */
.dt-blick-ende{margin-top:4.25rem}
.dt-blick-ende h2{margin:0 0 1.2rem}
.dt-seite--recht .dt-blick{margin:0}

/* ---------- Verweis auf jeden Abschnitt ---------- */
.dt-verweis{position:absolute;left:-2.4rem;top:.05em;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  color:var(--color-blue);opacity:0;text-decoration:none;transition:opacity .2s var(--ease-out),background-color .2s var(--ease-out)}
.dt-seite--recht .dt-seite__text .dt-verweis{text-decoration:none}
.dt-verweis:hover{background:rgba(0,186,235,.1)}
.dt-verweis:focus-visible{opacity:1;outline:none;box-shadow:inset 0 0 0 2px var(--color-cyan)}
:is(h2,h3):hover > .dt-verweis,.dt-visit:hover .dt-verweis{opacity:1}
h2.dt-teil > .dt-verweis{position:static;color:#fff;width:28px;height:28px;margin-left:-.4rem}
h2.dt-teil:hover > .dt-verweis{opacity:.8}
.dt-verweis.is-fertig{opacity:1;color:var(--color-cyan)}
.dt-verweis__tipp{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;
  padding:.25rem .55rem;border-radius:6px;background:var(--color-ink-900,#10141a);color:#fff;font-family:var(--font-display);
  font-size:.75rem;font-weight:600;letter-spacing:0;pointer-events:none}
@media (max-width:1099px),(hover:none){
  /* 44 Punkte Tippflaeche, die negativen Raender nehmen den Platz in der Zeile wieder weg. */
  .dt-verweis{position:relative;left:auto;top:auto;display:inline-grid;vertical-align:middle;margin:-7px -7px -7px .1rem;
    width:44px;height:44px;opacity:.55}
  h2.dt-teil > .dt-verweis{opacity:.7;width:44px;height:44px;margin:-8px -8px -8px -.3rem}
}

/* ---------- Sprungziel: kurz aufleuchten, damit man sieht, wo man ist ---------- */
@media (prefers-reduced-motion:no-preference){
  .dt-seite--recht :is(h2,h3,.dt-visit,section)[id]:target{animation:dt-ziel 2.4s var(--ease-out) .35s both;border-radius:.6rem}
  .dt-seite--recht h2.dt-teil:target{animation-name:dt-ziel-teil}
  @keyframes dt-ziel{0%,35%{background-color:rgba(0,186,235,.13);box-shadow:0 0 0 .55rem rgba(0,186,235,.13)}
    100%{background-color:rgba(0,186,235,0);box-shadow:0 0 0 .55rem rgba(0,186,235,0)}}
  @keyframes dt-ziel-teil{0%,35%{box-shadow:0 0 0 .3rem rgba(0,186,235,.45)}100%{box-shadow:0 0 0 .3rem rgba(0,186,235,0)}}
  html:has(.dt-seite--recht){scroll-behavior:smooth}
}

/* ---------- Kapitelleiste ---------- */
.dt-seite--recht .dt-inhalt summary{gap:.8rem}
.dt-inhalt__titel{flex:none}
.dt-inhalt__ort{display:none}
.dt-seite--recht .dt-inhalt ol{counter-reset:none}
.dt-seite--recht .dt-inhalt a{display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:baseline;text-decoration:none;
  color:var(--text-muted);transition:color .2s var(--ease-out)}
.dt-seite--recht .dt-inhalt a:hover{color:var(--text-strong)}
.dt-seite--recht .dt-inhalt a.is-aktiv{color:var(--text-strong);font-weight:600}
.dt-inhalt__nr{font-family:var(--font-display);font-size:.78em;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-subtle)}
.dt-seite--recht .dt-inhalt a.is-aktiv .dt-inhalt__nr{color:var(--color-blue)}
.dt-seite--recht .dt-inhalt__vorab > a,.dt-seite--recht .dt-inhalt__nach > a{grid-template-columns:minmax(0,1fr)}
.dt-seite--recht .dt-inhalt__teil > a{grid-template-columns:minmax(0,1fr);gap:.1rem;font-weight:600;color:var(--text-strong)}
.dt-inhalt__teil > a small{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--color-blue)}
.dt-inhalt__teil > a em{font-style:normal;font-weight:400;font-size:.78rem;color:var(--text-subtle)}
.dt-inhalt__stand{display:none}

@media (min-width:1100px){
  .dt-seite--recht .dt-seite__korpus:not(.dt-seite__korpus--eins){grid-template-columns:15.5rem minmax(0,44rem);
    gap:clamp(3.5rem,6vw,6rem);align-items:start}
  .dt-seite--recht .dt-inhalt{position:sticky;top:var(--recht-oben);max-height:calc(100vh - var(--recht-oben) - 1.5rem);
    overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 .4rem 1rem 0}
  .dt-seite--recht .dt-inhalt summary{display:flex;position:sticky;top:0;z-index:1;min-height:0;padding:0 0 .9rem;margin:0 0 .9rem;
    background:var(--surface-page,#fff);border-bottom:1px solid var(--border-subtle)}
  .dt-recht-js .dt-seite--recht .dt-inhalt summary{pointer-events:none;cursor:default}
  .dt-seite--recht .dt-inhalt summary::after{content:none}
  .dt-inhalt__stand{display:block;margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.04em;font-weight:500;color:var(--text-subtle)}
  .dt-seite--recht .dt-inhalt > ol{position:relative;margin:0;padding:0 0 0 .95rem;list-style:none}
  .dt-seite--recht .dt-inhalt > ol::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:1px;background:var(--border-subtle)}
  .dt-seite--recht .dt-inhalt li,.dt-seite--recht .dt-inhalt__teile ol li,.dt-seite--recht .dt-inhalt__teile > li > a{padding-left:0;border-left:0}
  .dt-seite--recht .dt-inhalt li{font-size:.86rem;line-height:1.38;margin:0 0 .5rem}
  .dt-inhalt__marke{position:absolute;left:-.5px;top:0;width:2px;height:1.2rem;border-radius:2px;background:var(--gradient-logo);
    transform:translateY(var(--marke-y,0));transition:transform .45s var(--ease-out),height .45s var(--ease-out);opacity:0}
  .dt-inhalt__marke.is-da{opacity:1}
  .dt-recht-js .dt-seite--recht .dt-inhalt li:has(> a.is-aktiv){border-left-color:transparent}
  /* Teile: nur der aktive klappt seine Artikel auf. Ohne Skript stehen alle offen. */
  .dt-seite--recht .dt-inhalt__teil{margin:0 0 .85rem}
  .dt-seite--recht .dt-inhalt__teil > ol{margin:.45rem 0 0;padding:0;list-style:none}
  .dt-recht-js .dt-inhalt__teil{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .5s var(--ease-out)}
  .dt-recht-js .dt-inhalt__teil > ol{overflow:hidden;min-height:0}
  .dt-recht-js .dt-inhalt__teil.is-offen{grid-template-rows:auto 1fr}
  .dt-seite--recht .dt-inhalt__teil ol li{font-size:.82rem;margin:0 0 .4rem}
  .dt-seite--recht .dt-inhalt__teil ol a{grid-template-columns:1.7rem minmax(0,1fr)}
}

/* Telefon und Tablet: eine schmale Leiste klebt unter der Kopfzeile und sagt,
   wo man ist. Antippen klappt das Verzeichnis auf. Ohne Skript ein gewoehnliches
   Verzeichnis oben. */
@media (max-width:1099px){
  .dt-seite--recht{--recht-oben:calc(var(--nav-h,74px) + 4.25rem)}
  .dt-seite--recht .dt-inhalt{position:sticky;top:var(--nav-h,74px);z-index:40;margin:0 calc(-1 * var(--container-pad)) 2.5rem;
    padding:0 var(--container-pad);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(14px);
    backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
  .dt-seite--recht .dt-inhalt::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gradient-logo);
    transform:scaleX(var(--fortschritt,0));transform-origin:0 50%}
  .dt-seite--recht .dt-inhalt summary{min-height:52px;display:flex;align-items:center}
  .dt-recht-js .dt-seite--recht .dt-inhalt__ort:not(:empty){display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:.92rem;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--text-strong)}
  .dt-seite--recht .dt-inhalt summary::after{content:"";width:9px;height:9px;flex:none;margin:0 .3rem 0 .4rem;border-right:2px solid var(--text-subtle);
    border-bottom:2px solid var(--text-subtle);transform:translateY(-25%) rotate(45deg);transition:transform .25s var(--ease-out)}
  .dt-seite--recht .dt-inhalt[open] summary::after{content:"";transform:translateY(20%) rotate(225deg)}
  .dt-seite--recht .dt-inhalt[open] > ol{max-height:min(62vh,34rem);overflow:auto;overscroll-behavior:contain;padding:.2rem 0 1rem;margin:0}
  .dt-seite--recht .dt-inhalt > ol{padding-left:0;list-style:none}
  .dt-seite--recht .dt-inhalt li{font-size:.95rem;margin:0}
  .dt-seite--recht .dt-inhalt li a{min-height:44px;align-items:center;padding:.15rem 0}
  .dt-seite--recht .dt-inhalt__teil > ol{padding-left:0;list-style:none;margin:0 0 .6rem}
  .dt-seite--recht .dt-inhalt__teil > a{padding:.7rem 0 .3rem}
  .dt-inhalt__marke{display:none}
  /* Das Impressum ist zu kurz fuer einen Ort-Anzeiger. */
  .dt-seite--recht .dt-inhalt--kurz{display:none}
}
@media (max-width:640px){
  .dt-seite--recht .dt-seite__text p,.dt-seite--recht .dt-seite__text li{font-size:1.03rem;line-height:1.68}
  .dt-seite--recht .dt-agb-hinweis{padding:1.25rem 1.1rem 1.1rem 1.35rem}
  .dt-seite--recht h2.dt-teil{padding:1rem 1.1rem}
  .dt-teil__umfang{margin-left:0;flex-basis:100%}
  .dt-dok__linie{margin:2rem 0 2.6rem}
  .dt-dok__stand{flex-basis:100%;margin:0 0 .2rem}
  .dt-seite--recht h2 .dt-nr{font-size:1.8rem}
  /* Schmal: der Ort ersetzt das Wort "Inhalt", sobald er bekannt ist. */
  .dt-recht-js .dt-seite--recht .dt-inhalt summary:has(.dt-inhalt__ort:not(:empty)) .dt-inhalt__titel{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* ---------- Bildsymbole (17.10.2026) ----------
   Ruhig und klein: 20 Punkte in Ueberschriften, 16 in der Leiste, Logos der
   Dienstleister 16 bis 18. Alle sind Zierde (alt=""), der Text sagt dasselbe. */
.dt-sym{display:inline-block;flex:none;width:20px;height:20px;vertical-align:-.2em}
.dt-logo{display:inline-block;flex:none;width:18px;height:18px;object-fit:contain;border-radius:4px;vertical-align:-.2em}
.dt-kopf{display:flex;align-items:center;gap:.65rem;margin:0 0 .35rem}
.dt-seite--recht h2 .dt-kopf .dt-nr,.dt-kopf .dt-visit__nr{display:inline-block;margin:0}
.dt-kopf .dt-sym{width:24px;height:24px}
.dt-kopf--visit{display:inline-flex;vertical-align:middle;margin:0 .5rem 0 0}
.dt-kopf--visit .dt-sym{width:20px;height:20px}
.dt-mit-sym{display:flex;align-items:center;gap:.55rem}
/* Absatz mit Symbol: kein Flex, sonst wird jeder Verweis im Satz eine eigene Spalte. */
p.dt-mit-sym{display:block;position:relative;padding-left:32px}
p.dt-mit-sym .dt-sym{position:absolute;left:0;top:.15em;width:22px;height:22px}
.dt-eyebrow.dt-mit-sym .dt-sym{width:22px;height:22px}
.dt-seite--recht h2.dt-teil .dt-sym{width:28px;height:28px;border-radius:7px;background:#fff;padding:2px;box-sizing:border-box}
.dt-anbieter{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:-.35rem 0 1.1rem !important;font-family:var(--font-display);
  font-size:.82rem !important;font-weight:500;line-height:1.3 !important;color:var(--text-subtle) !important;hyphens:manual !important}
.dt-anbieter span{display:inline-flex;align-items:center;gap:.4rem}
.dt-anbieter .dt-logo{width:16px;height:16px}
.dt-zeilen--logos b{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 .5rem}
.dt-zeilen--logos b .dt-logo{align-self:center}
.dt-zeilen--logos b:not(:has(.dt-logo)){padding-left:calc(18px + .5rem)}
/* Leiste: Nummer, Symbol, Titel */
.dt-seite--recht .dt-inhalt a:has(> .dt-sym){grid-template-columns:2rem 1.45rem minmax(0,1fr)}
/* In der Leiste einfarbig und leise, Farbe nur am Eintrag, der gerade gelesen
   wird (OpenAI-Gegenprobe 17.10.2026: zwanzig bunte Kacheln wirkten wie Clip-Art). */
.dt-seite--recht .dt-inhalt a > .dt-sym{width:16px;height:16px;align-self:center;filter:grayscale(1);opacity:.5;
  transition:filter .3s var(--ease-out),opacity .3s var(--ease-out)}
.dt-seite--recht .dt-inhalt a.is-aktiv > .dt-sym,.dt-seite--recht .dt-inhalt a:hover > .dt-sym{filter:none;opacity:1}
.dt-seite--recht .dt-inhalt__teil > a:has(> .dt-sym){grid-template-columns:1.6rem minmax(0,1fr);column-gap:.5rem}
.dt-seite--recht .dt-inhalt__teil > a > .dt-sym{grid-row:1 / span 3;align-self:start;margin-top:.1rem;width:18px;height:18px}
.dt-druckkopf,.dt-druckende{display:none}

/* ---------- Druck: wie die AGB-PDF in SharePoint (17.10.2026) ----------
   A4, Kopf mit Logo und "Swiss based · Ausgabe", Titel mit Serifen-Kursive,
   Adresszeile, Verlaufslinie, Hinweis als graues Feld mit blauem Balken,
   Teile als Navy-Baender, Artikel blau, zwei Spalten (Chrome, Edge, Firefox;
   Safari einspaltig, siehe recht.js), Fuss mit Dokument und "Seite x / y".
   Safari druckt keine Randfelder: dort stehen Dokument, Stand und
   Druckzeit im Kopf und in der Schlusszeile, Seitenzahlen fehlen. */
/* @page steht oben, nicht in @media print: Safari uebergeht @page-Raender,
   die in einer @media print-Klammer stecken, und druckt dann randlos (0 mm,
   gemessen am 18.10.2026). Als Rand 20 mm oben/unten und 18 mm links/rechts,
   normale A4-Raender. */
@page{size:A4;margin:20mm 18mm}
@media print{
  html,body{background:#fff !important}
  html{font-size:10.5pt}
  header,footer,.dt-skip,.dt-marks,.dt-inhalt,.dt-dok,.dt-verweis,.dt-schluss,.dt-cs-btn,.dt-cs-panel,.dt-cs-ov,
  .dt-menu,.dt-hoch,.dt-sprache,.dt-chip,.dt-fortschritt,.dt-anbieter,[data-dartera-header]{display:none !important}
  .dt-section{padding:0 !important}
  .dt-container{padding:0 !important;max-width:none !important}
  .dt-guides::before,.dt-guides::after{display:none !important}
  .dt-seite--recht{max-width:none;color:#1d2229}
  .dt-seite--recht .dt-seite__korpus,.dt-seite--recht .dt-seite__korpus:not(.dt-seite__korpus--eins){display:block}
  .dt-seite--recht .dt-seite__text,.dt-seite--recht .dt-seite__korpus--eins{max-width:none}
  *{animation:none !important;transition:none !important}

  /* Kopf */
  .dt-druckkopf{display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 7mm}
  .dt-druckkopf__logo{height:10mm;width:auto}
  .dt-druckkopf__r{display:grid;justify-items:end;gap:1.5pt;font-family:var(--font-display);font-size:7pt;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:#4a5260}
  .dt-druckkopf__r > span:first-child{display:inline-flex;align-items:center;gap:4pt}
  .dt-druckkopf__ch{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dt-druckzeit{font-weight:400;font-size:6.5pt;letter-spacing:.02em;text-transform:none;color:#8a929e}
  .dt-seite--recht .dt-seite__kopfteil > *{max-width:none}
  .dt-seite--recht .dt-section-heading{margin:0}
  .dt-seite--recht .dt-eyebrow{font-size:7.5pt;letter-spacing:.12em;margin:0 0 2pt !important}
  .dt-seite--recht .dt-eyebrow .dt-sym{width:11pt;height:11pt}
  .dt-seite--recht h1{font-size:23pt;line-height:1.08;margin:0 0 3pt;letter-spacing:-.02em}
  .dt-seite--recht .dt-accent-gradient,.dt-seite--recht h2 .dt-nr,.dt-visit__nr{background:none !important;
    color:var(--color-blue) !important;-webkit-text-fill-color:var(--color-blue)}
  .dt-seite--recht .dt-seite__stand{font-size:7pt;font-weight:500;letter-spacing:.06em;margin:0;color:#6b7380}
  .dt-seite--recht .dt-seite__lead,.dt-seite__zusatz{font-size:8.6pt !important;line-height:1.45;margin:4pt 0 0 !important;color:#2b3038 !important}
  .dt-dok__linie{display:block;margin:5pt 0 9pt;height:2.2pt;border-radius:2pt;transform:none !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Satz */
  .dt-seite--recht .dt-seite__text p,.dt-seite--recht .dt-seite__text li,.dt-seite--recht .dt-adresse{font-size:8.6pt;line-height:1.46;
    color:#1d2229;orphans:3;widows:3;margin-bottom:4.5pt;hyphens:auto}
  .dt-seite--recht .dt-seite__text a{color:inherit;text-decoration:none}
  .dt-seite--recht .dt-seite__text .dt-kurz-absatz{break-inside:avoid}
  /* Ueberschrift nie allein unten: der Abstand nach ihr gehoert zu ihr
     (unsichtbarer Block, negativer Rand) und darf nicht gebrochen werden.
     Das wirkt auch in Safari, das break-after:avoid im Druck uebergeht. */
  .dt-seite--recht h2,.dt-seite--recht h3,.dt-agb-hinweis__titel{break-after:avoid;page-break-after:avoid;break-inside:avoid;page-break-inside:avoid}
  .dt-seite--recht h2::after,.dt-seite--recht h3::after{content:"";display:block;height:30pt;margin-bottom:-30pt}
  .dt-seite--recht h2{font-size:11.5pt;line-height:1.25;margin:11pt 0 4pt}
  .dt-seite--recht h2:not(:first-child){margin-top:11pt}
  .dt-seite--recht h3{font-size:9.4pt;line-height:1.3;margin:9.5pt 0 3pt}
  .dt-seite--recht h2 + h3{margin-top:4pt}
  .dt-seite--recht h3 .dt-art{margin-right:3pt}
  .dt-kopf{display:inline-flex;gap:4pt;margin:0 5pt 0 0;vertical-align:baseline}
  .dt-kopf .dt-sym{width:10pt;height:10pt}
  .dt-seite--recht h2 .dt-nr{display:inline;font-family:var(--font-display);font-style:normal;font-weight:700;font-size:1em;margin:0}
  .dt-visit__nr{font-family:var(--font-display);font-style:normal;font-weight:700}
  .dt-seite--recht .dt-abs > li{padding-left:13pt;margin-bottom:3pt}
  .dt-seite--recht .dt-abs > li::before{font-size:8.6pt;top:0}
  .dt-seite--recht .dt-abs ol[type=a]{margin:1pt 0 3pt;padding-left:11pt}
  .dt-seite--recht ul{padding-left:10pt}

  /* Hinweis wie in der PDF */
  .dt-seite--recht .dt-agb-hinweis{margin:0 0 12pt;padding:10pt 13pt 8pt 15pt;border-radius:5pt;background:#f3f5f8 !important;
    border:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dt-seite--recht .dt-agb-hinweis::before{width:3pt}
  .dt-seite--recht h2.dt-agb-hinweis__titel{font-size:9.5pt;margin:0 0 4pt}
  .dt-seite--recht .dt-agb-hinweis p,.dt-seite--recht .dt-agb-hinweis .dt-agb-hinweis__satz{font-size:8.4pt !important;line-height:1.42;margin-bottom:4pt !important}
  .dt-seite--recht .dt-agb-liste{columns:2;column-gap:12pt;margin:3pt 0 5pt}
  .dt-seite--recht .dt-agb-liste li{font-size:8pt;line-height:1.38;padding-left:8pt;margin-bottom:2.5pt}
  .dt-seite--recht .dt-agb-liste li::before{width:3pt;height:3pt;top:.55em;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dt-mit-sym .dt-sym{width:11pt !important;height:11pt !important}
  p.dt-mit-sym{padding-left:15pt}
  .dt-seite--recht .dt-agb-liste a{border:0;color:var(--color-blue)}

  /* Teile als Navy-Baender */
  /* Im Druck ein Block, kein Flex: sonst wird der Abstand-Trick (::after) ein
     Flex-Element und haelt das Band nicht mit dem ersten Artikel zusammen. */
  .dt-seite--recht h2.dt-teil,.dt-seite--recht h2.dt-teil[data-teil]{display:block;margin:12pt 0 7pt;padding:5pt 9pt;border-radius:5pt;box-shadow:none;
    font-size:10pt;gap:3pt 6pt;padding:6pt 11pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dt-seite--recht h2.dt-teil .dt-nr{font-size:9pt;padding:0;letter-spacing:0;text-transform:none;color:#5fd3f3 !important;
    -webkit-text-fill-color:#5fd3f3;background:none !important;margin-right:4pt}
  .dt-seite--recht h2.dt-teil .dt-sym{width:13pt;height:13pt;border-radius:3pt;vertical-align:-3pt;margin-right:5pt}
  .dt-teil__umfang{display:none}

  /* Tabellen mit Navy-Kopf */
  .dt-tabelle{overflow:visible;border:0;margin:4pt 0 6pt}
  .dt-tabelle table{min-width:0 !important;font-size:7.2pt;line-height:1.3}
  .dt-tabelle th,.dt-tabelle td{padding:2.5pt 3.5pt !important}
  .dt-tabelle thead th{background:var(--recht-navy) !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dt-tabelle tr{break-inside:avoid}

  /* Zeilen (Impressum, Dienstleister, Rechte) */
  .dt-seite--recht .dt-zeilen li{grid-template-columns:1fr;gap:1pt;padding:3pt 0;break-inside:avoid}
  .dt-seite--recht .dt-zeilen b,.dt-seite--recht .dt-zeilen span,.dt-seite--recht .dt-zeilen small{font-size:8.4pt}
  .dt-zeilen--logos b:not(:has(.dt-logo)){padding-left:0}
  .dt-logo{width:9pt;height:9pt}
  .dt-seite--recht .dt-blick li{grid-template-columns:16pt minmax(0,1fr);gap:6pt;padding:4pt 0;break-inside:avoid}
  .dt-seite--recht .dt-blick .dt-ico,.dt-seite--recht .dt-blick .dt-ico svg{width:16pt;height:16pt}
  .dt-seite--recht .dt-blick b{font-size:9pt}
  .dt-fluss{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:6pt !important;break-inside:avoid}
  .dt-fluss .dt-ico,.dt-fluss .dt-ico svg{width:18pt !important;height:18pt !important}
  .dt-seite--recht p.dt-visit__name{font-size:16pt !important;margin:2pt 0 !important}
  .dt-seite--recht p.dt-visit__adresse{font-size:9pt !important}
  .dt-seite--recht .dt-quelle{margin-top:8pt;padding-top:5pt;font-size:7.5pt !important;color:#4a5260 !important}

  /* Schlusszeile wie in der PDF */
  .dt-druckende{display:flex;flex-wrap:wrap;align-items:baseline;gap:2pt 12pt;margin:12pt 0 0;padding-top:5pt;
    border-top:.6pt solid #cfd6df;font-family:var(--font-display);font-size:7pt;color:#4a5260;break-inside:avoid;break-before:avoid}
  .dt-druckende b{font-size:9pt;color:var(--color-navy)}
  .dt-druckende .dt-druckzeit{margin-left:auto}

  /* Zwei Spalten wie die PDF, wo der Browser mehrspaltig sauber umbricht
     (recht.js setzt dt-druck-spalten fuer Chrome, Edge, Firefox). */
  .dt-druck-spalten .dt-seite--recht .dt-seite__text{columns:2;column-gap:7mm;column-fill:auto}
  .dt-druck-spalten .dt-seite--recht .dt-seite__text > .dt-agb-hinweis,
  .dt-druck-spalten .dt-seite--recht h2.dt-teil,
  .dt-druck-spalten .dt-seite--recht .dt-druckende,
  .dt-druck-spalten .dt-seite--recht .dt-blick-ende,
  .dt-druck-spalten .dt-seite--recht .dt-quelle{column-span:all}
  .dt-druck-spalten .dt-seite--recht .dt-agb-liste{columns:2}
}
/* Zuklappen nach der Wahl eines Eintrags ohne Uebergang, siehe schliesse() in recht.js. */
.dt-seite--recht details.dt-inhalt.is-sofort::details-content{transition:none}