/* AGB & Vertragsbedingungen — Seiten-eigene Regeln.
   Nav, Footer, Fonts und Grundfarben kommen aus v11.css (gemeinsame
   Tokens: --ink, --ink-soft, --ink-muted, --accent, --bg-soft, --rule,
   --sans, --serif). Hier steht nur, was diese Seite zusaetzlich braucht:
   Hero-Kicker, Inhaltsverzeichnis-Sidebar, Dokumenten-/Klausel-Layout,
   Druckstile. Einzige Kollision mit v11.css war .hero (Startseiten-Hero) —
   deshalb .agb-hero statt .hero. Alle anderen Klassennamen sind auf der
   restlichen Seite ungenutzt. */

.skip { position: fixed; top: 12px; left: 20px; padding: 10px; background: #fff; z-index: 100; transform: translateY(-180%); }
.skip:focus { transform: none; }

html { scroll-padding-top: 100px; }

/* Zentrale Inhaltsspalte. Deckungsgleich mit Navigations- und Fusszeile aus
   v11.css (max-width var(--col), gleiche seitliche Innenabstaende), damit
   Marke oben, Text und Fusszeile buendig untereinander stehen. Diese Regel
   fehlte nach dem Herausloesen aus der Ausgangsdatei — dadurch klebte der
   Inhalt ohne Rand an den Fensterkanten. */
.wrap { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }

/* Links im Fliesstext sichtbar machen — v11.css setzt global a{color:inherit},
   das reicht in Nav/Footer, aber nicht in einem Dokument voller Verweise. */
.content a, .related a, .document-credit a, .agb-contact a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.content a:hover, .related a:hover, .agb-contact a:hover { text-decoration-thickness: 2px; }

/* ---- Hero ---- */
.agb-hero { padding: 65px 0 44px; border-bottom: 1px solid var(--rule); }
.breadcrumb { font-size: 13px; color: var(--ink-muted); margin: 0 0 24px; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.agb-hero h1 { font: 500 clamp(36px, 5.3vw, 65px)/1.1 var(--serif); letter-spacing: -0.035em; margin: 0 0 24px; max-width: 850px; color: var(--ink); }
.agb-hero .intro { max-width: 740px; color: var(--ink-muted); font-size: 17px; margin: 0 0 24px; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.audience { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 9px; }
.audience::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.print-button { background: var(--ink); color: #fff; border: 0; border-radius: 9999px; padding: 10px 20px; font-size: 13px; display: inline-flex; gap: 9px; align-items: center; }
.print-button svg { width: 17px; height: 17px; }

/* ---- Layout: Inhaltsverzeichnis + Dokumente ---- */
.layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 70px; padding-top: 48px; padding-bottom: 90px; }
.contents { position: sticky; top: 105px; max-height: calc(100vh - 130px); overflow: auto; align-self: start; padding-right: 14px; scrollbar-width: thin; }
.contents h2 { font-size: 13px; margin: 0 0 17px; font-weight: 600; color: var(--ink); }
.contents details { border-top: 1px solid var(--rule); padding: 14px 0; }
.contents summary { cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.5; padding: 4px 0; color: var(--ink); }
.contents ol { list-style: none; margin: 10px 0 0; padding: 0; }
.contents li a { display: block; padding: 6px 8px 6px 12px; color: var(--ink-muted); text-decoration: none; font-size: 12px; line-height: 1.55; border-left: 2px solid transparent; }
.contents a:hover { color: var(--accent-deep); background: var(--bg-soft); }
.contents a[aria-current="true"] { color: var(--accent-deep); border-left-color: var(--accent); background: var(--bg-soft); }
.contents .extra-link { display: block; border-top: 1px solid var(--rule); padding: 15px 0; font-size: 13px; text-decoration: none; }

.content { min-width: 0; max-width: 800px; }
.content > .intro { color: var(--ink-muted); }
.document { margin-bottom: 70px; }
.document-head { padding-bottom: 26px; border-bottom: 1px solid var(--rule); margin-bottom: 30px; }
.meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-muted); margin-bottom: 18px; }
.version { background: var(--bg-soft); color: var(--accent-deep); padding: 4px 10px; border-radius: 4px; }
.document h2, .related h2 { font: 500 clamp(25px, 3vw, 34px)/1.3 var(--serif); letter-spacing: -0.02em; margin: 0 0 14px; color: var(--ink); }
.document-subtitle { font-size: 14px; color: var(--ink-muted); margin: 0; }
.document-credit { font-size: 12px; color: var(--ink-muted); line-height: 1.7; border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 36px; }

.legal-body { font-size: 15px; line-height: 1.85; color: var(--ink-soft); overflow-wrap: break-word; }
/* Jede nummerierte Ziffer beginnt einen Abschnitt. Eine feine Linie darueber
   gliedert das lange Dokument, ohne es zu zerschneiden — die erste Ziffer
   direkt unter der Dokumentkopfzeile bekommt sie nicht. */
.legal-body h3 {
  font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--ink);
  margin: 42px 0 22px; padding-top: 26px; border-top: 1px solid var(--rule);
  letter-spacing: -0.015em;
}
.legal-body h3:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
/* Der Fliesstext haengt an einer gemeinsamen linken Kante; die Klauselnummer
   sitzt in der Randspalte davor. Das gibt der Nummernfolge Halt und laesst
   den eigentlichen Text als ruhige Spalte lesen. Fortsetzungs-Absaetze und
   a)/b)/c)-Aufzaehlungen richten sich automatisch an derselben Kante aus. */
.legal-body p { margin: 0 0 14px; padding-left: 3.2em; }
.legal-body .clause { position: relative; margin-top: 20px; }
.legal-body .clause + .clause { margin-top: 20px; }
.clause-number {
  position: absolute; left: 0; top: 0.15em; margin: 0;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  color: var(--accent-deep); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.related { background: var(--bg-soft); padding: 34px; border-radius: var(--r-lg); }
.related > p { font-size: 14.5px; color: var(--ink-muted); max-width: 60ch; margin: 0; }
.trust-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 24px; padding: 20px 24px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.trust-cta:hover { border-color: var(--accent); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.trust-cta-label strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.trust-cta-label small { display: block; font-size: 12.5px; color: var(--ink-muted); margin-top: 4px; }
.trust-cta-arrow { font-size: 20px; color: var(--accent-deep); flex: none; }
/* Abschliessende Kontaktzeile. Mit Trennlinie und in normaler Textgroesse,
   damit sie als bewusster Schluss der Seite liest und nicht als verwaiste
   graue Restzeile unter der Karte. */
.agb-contact { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-muted); }
.agb-contact a { font-weight: 500; }

h2[id], h3[id], p[id] { scroll-margin-top: 18px; }

@media (min-width: 1600px) {
  .layout { gap: 90px; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .agb-hero { padding-top: 45px; }
  .legal-body { font-size: 14px; }
}
@media (max-width: 680px) {
  .agb-hero { padding: 32px 0; }
  .agb-hero h1 { font-size: clamp(26px, 8vw, 38px); }
  .agb-hero .intro { font-size: 15px; }
  .layout { display: block; padding-top: 26px; padding-bottom: 45px; }
  .contents { position: static; max-height: none; padding: 0; margin-bottom: 38px; }
  .contents h2 { margin-bottom: 12px; }
  .contents li a { font-size: 13px; padding: 8px 10px; }
  .document h2 { font-size: 28px; }
  .legal-body { font-size: 15px; line-height: 1.8; }
  .legal-body h3 { font-size: 18px; margin-top: 34px; padding-top: 22px; }
  .legal-body p { padding-left: 2.5em; }
  .clause-number { font-size: 12px; }
  .related { padding: 24px; }
  .trust-cta { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; }
  .document { margin-bottom: 45px; }
  .meta { font-size: 11px; }
  .audience { font-size: 12px; }
  .print-button { padding: 9px 16px; }
  html { scroll-padding-top: 85px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media print {
  @page { size: A4; margin: 18mm 18mm 20mm; }
  body { font-size: 10pt; color: #000; }
  .nav, .skip, .print-button, .contents, .footer, .trust-cta-arrow { display: none !important; }
  .agb-hero { padding: 24px 0; }
  .agb-hero h1 { font-size: 29pt; }
  .agb-hero .intro { font-size: 10pt; max-width: none; }
  .layout { display: block; padding: 20px 0; }
  .content { max-width: none; }
  .document { margin-bottom: 30px; }
  .document + .document, .related { break-before: page; }
  .document h2, .related h2 { font-size: 19pt; }
  .legal-body { font-size: 10pt; line-height: 1.55; }
  .legal-body h3 { font-size: 12pt; break-after: avoid; margin-top: 22px; }
  .legal-body p { orphans: 3; widows: 3; }
  .document-head, .trust-cta, .legal-body .clause { break-inside: avoid; }
  .meta { font-size: 9pt; }
  .related { background: none; padding: 0; }
  a { color: #000; }
  .version { background: none; border: 1px solid #aaa; }
  .document-credit { font-size: 8pt; }
}