/*
 * Ergänzungen zu bundle.css für www.sportgerichtstag.de.
 *
 * Nur, was bundle.css für ein Sitepackage fehlt (Seitenraster, Fließtext, Sprunglink,
 * Abschnitte, Referentenraster, Formularhüllen), und die zwei Kontrastkorrekturen im dunklen
 * Modus (Entscheidung E4, 03.11.2026). Regeln für Selektoren:
 *   - ausschließlich Klassen mit dem Präfix dsgt- in BEM-Schreibweise, keine anderen
 *     Namensräume und keine nackten Elementselektoren außer innerhalb von .dsgt-prose;
 *   - Werte ausschließlich aus tokens.css (Farben, Abstände, Radien, Schriften). Schriftgrößen
 *     entsprechen den Typografie-Stufen dort (display-2, heading-1 … footnote).
 * Gehört etwas davon ins Design System, wandert es dorthin und fällt hier weg.
 */

/* Sprunglink: unsichtbar, bis er den Fokus hat. */
.dsgt-skip{position:absolute;left:var(--space-4);top:var(--space-2);z-index:10;padding:var(--space-2) var(--space-4);background:var(--surface-raised);color:var(--brand);border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-weight:600;transform:translateY(-200%)}
.dsgt-skip:focus{transform:none}

/* Nur für Screenreader. */
.dsgt-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Grundschrift für alles, was keine Komponente selbst setzt (Typografie-Stufe body). */
.dsgt-body{font-size:16px;line-height:26px}

/* Abschnitte der Startseite: space-8 mobil, space-9 ab Desktop - einmal, nicht doppelt. */
.dsgt-section{padding:var(--space-8) 0}
.dsgt-section + .dsgt-section{padding-top:0}
@media(min-width:1024px){.dsgt-section{padding:var(--space-9) 0}.dsgt-section + .dsgt-section{padding-top:0}}

/* Inhaltsseiten: Kopf und Abstand zum Footer. */
.dsgt-page{padding-bottom:var(--space-8)}
@media(min-width:1024px){.dsgt-page{padding-bottom:var(--space-9)}}
.dsgt-page-head{padding:var(--space-8) 0 var(--space-7);max-width:68ch}
.dsgt-page-head__title{margin:0 0 var(--space-4)}
.dsgt-page-head__lead{margin:0;color:var(--ink-muted)}

/* Elemente untereinander. */
.dsgt-stack > * + *{margin-top:var(--space-7)}
.dsgt-heading{margin:0 0 var(--space-4)}
.dsgt-lead{margin:0 0 var(--space-6);max-width:60ch;color:var(--ink-muted)}

/* Seitenraster: Inhalt 8/12, Randspalte 3/12, dazwischen eine Spalte Luft. */
.dsgt-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
@media(min-width:1024px){.dsgt-layout--aside{grid-template-columns:minmax(0,8fr) minmax(0,3fr);column-gap:calc(100% / 12)}}

/* Fließtext aus dem Editor (Configuration/RTE/Sportgerichtstag.yaml). Hierarchie nach dem
   Design System: h2 heading-1, h3 heading-2, h4 heading-3. */
.dsgt-prose{max-width:68ch;font-size:16px;line-height:26px}
.dsgt-prose > :first-child{margin-top:0}
.dsgt-prose > :last-child{margin-bottom:0}
.dsgt-prose p,.dsgt-prose ul,.dsgt-prose ol,.dsgt-prose table{margin:0 0 var(--space-4)}
.dsgt-prose ul,.dsgt-prose ol{padding-left:var(--space-5)}
.dsgt-prose li + li{margin-top:var(--space-1)}
.dsgt-prose h2{font-family:var(--font-serif);font-size:28px;line-height:34px;font-weight:500;margin:var(--space-7) 0 var(--space-4)}
.dsgt-prose h3{font-family:var(--font-serif);font-size:22px;line-height:28px;font-weight:500;margin:var(--space-6) 0 var(--space-3)}
.dsgt-prose h4{font-family:var(--font-sans);font-size:17px;line-height:24px;font-weight:600;margin:var(--space-5) 0 var(--space-2)}
.dsgt-prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.dsgt-prose a:hover{color:var(--brand-strong)}
.dsgt-prose strong,.dsgt-prose b{font-weight:600}
.dsgt-prose table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
.dsgt-prose th,.dsgt-prose td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dsgt-prose th{background:var(--surface-sunken);font-weight:600}
.dsgt-prose caption{caption-side:bottom;padding-top:var(--space-2);font-size:12px;line-height:18px;color:var(--ink-muted);text-align:left}
/* In einer Kachel bleibt der Text so knapp wie .dsgt-card__text. */
.dsgt-card__text.dsgt-prose{max-width:none}
.dsgt-card__text.dsgt-prose ul{padding-left:var(--space-4)}

/* Bilder: rechtwinklig, ohne Rahmen, Nachweis in footnote darunter. */
.dsgt-figure{margin:0 0 var(--space-5)}
.dsgt-figure__image{display:block;max-width:100%;height:auto}
.dsgt-figure__caption{margin-top:var(--space-2);font-size:12px;line-height:18px;color:var(--ink-muted)}

/* Referenten im Raster. */
.dsgt-speaker-grid{display:grid;gap:var(--space-5);grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:720px){.dsgt-speaker-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.dsgt-speaker-grid{grid-template-columns:repeat(3,1fr)}}
.dsgt-speaker__photo{display:block}

/* Formular: Knopfzeile, Pflichtmarke, Fangfeld (für Menschen unsichtbar, für Programme ein
   gewöhnliches Feld - deshalb nicht display:none). */
.dsgt-form__actions{margin-top:var(--space-2)}
.dsgt-field__required{color:var(--ink-muted);font-weight:400}
.dsgt-form__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.dsgt-field__input[aria-invalid=true]{border-color:var(--danger)}

/* Veranstaltungshinweis: Abstand Kicker. Die Angaben sind ein <dl>; der Browser rückt <dd> sonst ein. */
.dsgt-event__fact dd{margin-left:0}

/* E4 - Kontrastkorrekturen im dunklen Modus. In bundle.css stehen Hero-Kicker und die Linie
   unter dem aktiven Navigationspunkt in accent-fill auf brand; im Dunkelmodus sind das
   #d9b35c auf #9bb8de, Kontrast 1,02 statt mindestens 4,5 (Text) bzw. 3 (Linie). Auf
   brand-Flächen nimmt das Design System sonst on-brand - hier also auch. Im hellen Modus
   bleibt es beim Messing. */
[data-theme="dark"] .dsgt-hero__kicker{color:var(--on-brand)}
[data-theme="dark"] .dsgt-header__link--active{border-bottom-color:var(--on-brand)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dsgt-hero__kicker{color:var(--on-brand)}
  :root:not([data-theme="light"]) .dsgt-header__link--active{border-bottom-color:var(--on-brand)}
}