/* ===========================================================================
 * Ski-Gilde Jülich — Basis
 * Schriften, Reset, Typografie, Fokus, Formularelemente, Layout-Grundraster,
 * Höhenlinien-System, Bildvereinheitlichung.
 *
 * Cascade Layers sind hier bewusst NICHT im Einsatz (Konzept 11.1): die
 * Core-Styles von WordPress sind unlayered, und unlayered schlägt layered
 * unabhängig von der Reihenfolge. Theme-CSS in @layer zu legen hieße, dass
 * die Block-Library gewinnt.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Schriften — selbst gehostet, kein externer Request (Konzept 0.4, 11.4).
 * Gebaut mit deploy/subset-fonts.py.
 *
 * Eine Familie, vier Schnitte. Im Preload steht nur Barlow 400 latin — der
 * Schnitt, der den Fließtext und damit die Textmasse trägt. Die drei anderen
 * kommen per `swap` nach.
 * ------------------------------------------------------------------------ */
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Ausweich-Schrift mit angeglichenen Metriken — verhindert den Sprung beim
   Schriftwechsel und damit CLS (Konzept 11.2). */
@font-face {
  font-family: "Barlow Fallback";
  src: local("Helvetica Neue"), local("Arial Narrow"), local("Arial"), local("Liberation Sans");
  size-adjust: 94%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* NIE überschreiben — das bricht den Nutzer-Zoom (Konzept 4.3). */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sg-header-h) + var(--sp-5));
}

body {
  margin: 0;
  background: var(--sg-snow);
  color: var(--sg-ink);
  font-family: var(--sg-font-ui);
  font-size: var(--sg-fs-body);        /* 19px, Zielgruppe B */
  line-height: var(--sg-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Lange deutsche Komposita brechen bei 320px sonst aus der Spalte
   (Konzept 11.3). lang="de" am <html> ist Voraussetzung für die Trennung.
   overflow-wrap gilt überall — es verhindert das Herauslaufen zuverlässig.
   hyphens NUR im Fließtext: in einer 72px-Headline trennt der Browser mitten
   im Wort („Frem-den"), und das sieht in Display-Größen falsch aus. */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, figcaption, td, th, blockquote {
  overflow-wrap: break-word;
}
p, li, dd, dt, figcaption, td, th, blockquote { hyphens: auto; }

/* Unter 480px zählt jeder Pixel — dort trennt auch die Überschrift.
   „Jahreshauptversammlung" passt sonst in keine Spalte. */
@media (max-width: 480px) {
  h1, h2, h3, h4, h5, h6 { hyphens: auto; }
}

img, picture, video, svg, canvas { display: block; max-width: 100%; height: auto; }
img { background: var(--sg-firn); }

ul, ol { margin: 0; padding: 0; }
figure, blockquote, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------------------
 * Typografie
 * Eine Familie, Hierarchie über Größe und Gewicht — keine Breitenachse mehr.
 * ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--sg-font-ui); color: var(--sg-text); }

.sg-display-xl, h1 {
  font-size: var(--sg-fs-display-xl);
  font-weight: 700;
  line-height: var(--sg-lh-display-xl);
  letter-spacing: var(--sg-ls-display-xl);
}
.sg-display-l {
  font-size: var(--sg-fs-display-l);
  font-weight: 700;
  line-height: var(--sg-lh-display-l);
  letter-spacing: var(--sg-ls-display-l);
}
h2, .sg-h2 {
  font-size: var(--sg-fs-h2);
  font-weight: 700;
  line-height: var(--sg-lh-h2);
  letter-spacing: var(--sg-ls-h2);
}
h3, .sg-h3 {
  font-size: var(--sg-fs-h3);
  font-weight: 600;
  line-height: var(--sg-lh-h3);
  letter-spacing: var(--sg-ls-h3);
}
h4 { font-size: var(--sg-fs-body-l); font-weight: 600; line-height: 1.35; }

p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }

.sg-body-l { font-size: var(--sg-fs-body-l); line-height: 1.6; }

/* Editorial — dieselbe Familie, aber luftiger gesetzt und schmaler gehalten.
   Reiseberichte unterscheiden sich künftig über Rhythmus, nicht über Schrift. */
.sg-editorial {
  font-family: var(--sg-font-editorial);
  font-size: var(--sg-fs-editorial);
  line-height: var(--sg-lh-editorial);
  max-width: 66ch;
}
.sg-editorial p { margin-bottom: var(--sp-6); }

.sg-quote {
  font-family: var(--sg-font-editorial);
  font-size: var(--sg-fs-quote);
  font-weight: 500;
  line-height: var(--sg-lh-quote);
  letter-spacing: 0;
}

/* meta — Versalien, maximal drei Wörter (Konzept 4.3). */
.sg-meta {
  font-size: var(--sg-fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sg-ls-meta);
  line-height: 1.4;
  color: var(--sg-text-leise);
}

/* Tabellenziffern — Pflicht für Daten und Uhrzeiten (Konzept 4.3). */
.sg-data, time, .sg-datum {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Fließtext-Spalte: maximal 68 Zeichen (Konzept 4.3). */
.sg-text-spalte { max-width: var(--w-text); }

a { color: var(--sg-link); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { text-decoration-thickness: .12em; }

strong, b { font-weight: 700; }

/* ---------------------------------------------------------------------------
 * Fokus (Konzept 4.6)
 * Kein border-radius im Fokus-Regelsatz — das rundet jedes fokussierte Element
 * und fällt in einem System mit Standardradius 0 als Sprung auf.
 * ------------------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--sg-fokus);
  outline-offset: 2px;
}

/* Sprungmarke — erstes fokussierbares Element der Seite (Konzept 11.3). */
.sg-skip {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 999;
  transform: translateY(-200%);
  background: var(--sg-blue-700);
  color: var(--sg-white);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--t-schnell) var(--ease-aus);
}
.sg-skip:focus-visible { transform: translateY(0); }

.sg-visuell-versteckt {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * Die Kante — in dieser Richtung abgeschaltet.
 *
 * Der geneigte Signalstrich war das Erkennungsmerkmal von „Kante & Firn"
 * (Konzept 3.4). Das Vereinsblatt setzt stattdessen auf Rahmen und Flächen.
 * Die Klasse bleibt in den Vorlagen stehen — sie wird hier still neutralisiert,
 * damit ein späterer Rückweg nur eine CSS-Änderung ist und kein Umbau von
 * sechzehn Dateien.
 * ------------------------------------------------------------------------ */
.sg-kante { position: relative; }
.sg-kante::after { content: none; }

/* ---------------------------------------------------------------------------
 * Layout-Grundraster („Off-Piste-Grid", Konzept 3.5)
 * 12 Spalten. Der Inhalt sitzt nie symmetrisch zentriert.
 * ------------------------------------------------------------------------ */
.sg-sektion {
  background: var(--sg-flaeche);
  color: var(--sg-text);
  padding-block: var(--sg-sektion-y);
  position: relative;
}
.sg-sektion--eng { padding-block: clamp(40px, 6vw, 96px); }

.sg-wrap {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sg-rand);
}
.sg-wrap--breit { max-width: var(--w-wide); }
.sg-wrap--voll  { max-width: none; padding-inline: 0; }

.sg-raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 859px) {
  .sg-raster { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .sg-raster > * { grid-column: 1 / -1 !important; }
}

/* Spaltenzuweisungen für die vier Sektionstypen aus 3.5. */
@media (min-width: 860px) {
  .sg-sp-1-6   { grid-column: 1 / 7; }
  .sg-sp-1-7   { grid-column: 1 / 8; }
  .sg-sp-2-7   { grid-column: 2 / 8; }
  .sg-sp-2-9   { grid-column: 2 / 10; }
  .sg-sp-5-12  { grid-column: 5 / 13; }
  .sg-sp-7-12  { grid-column: 7 / 13; }
  .sg-sp-8-12  { grid-column: 8 / 13; }
  .sg-sp-1-12  { grid-column: 1 / 13; }
}

/* Bild bricht bis an den Viewport-Rand (Hero, 6.1 Block 1).
   Der Abstand vom Inhaltsrand zum Bildschirmrand ist der Seitenrand plus die
   Hälfte dessen, was der Viewport breiter ist als die Inhaltsbreite. */
@media (min-width: 860px) {
  .sg-bricht-rechts { margin-right: calc(-1 * (max((100vw - var(--w-content)) / 2, 0px) + var(--sg-rand))); }
  .sg-bricht-links  { margin-left:  calc(-1 * (max((100vw - var(--w-content)) / 2, 0px) + var(--sg-rand))); }
}
/* 100vw schließt die Scrollleiste ein — ohne clip entstünde dadurch ein
   waagerechter Scrollbalken, und der verletzt WCAG 1.4.10 (Konzept 11.3).
   `clip` statt `hidden`, weil hidden position:sticky im Header bräche. */
body { overflow-x: clip; }

.sg-stapel > * + * { margin-top: var(--sp-5); }
.sg-stapel-6 > * + * { margin-top: var(--sp-6); }
.sg-stapel-8 > * + * { margin-top: var(--sp-8); }

/* ---------------------------------------------------------------------------
 * Höhenlinie (Konzept 3.3)
 * Eine einzige grafische Signatur: als Sektionstrenner, als Flächentextur,
 * als Scroll-Element. Immer aria-hidden, per currentColor einfärbbar.
 * ------------------------------------------------------------------------ */
.sg-hoehenlinie { display: block; width: 100%; color: var(--sg-linie); }
.sg-hoehenlinie--trenner { height: clamp(28px, 4vw, 56px); }
.sg-hoehenlinie--akzent  { height: 18px; width: 120px; color: var(--sg-kante-farbe); }

/* Flächentextur. Nimmt die Textfarbe der Sektion auf und funktioniert dadurch
   auf heller wie dunkler Fläche — auf Weiß wären weiße Linien unsichtbar. */
.sg-textur { position: relative; isolation: isolate; }
.sg-textur > .sg-textur__bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .05;
  color: var(--sg-text);
  pointer-events: none;
  overflow: hidden;
}
.sg-textur > .sg-textur__bild svg { width: 100%; height: 100%; }

/* Selbstzeichnende Linie. Startzustand nur, wenn JS läuft — ohne JS ist die
   Linie sofort vollständig da (Progressive Enhancement, Konzept 0.4). */
.js .sg-linie-zeichnet path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.js .sg-linie-zeichnet.ist-sichtbar path {
  transition: stroke-dashoffset var(--t-linie) ease-out;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .js .sg-linie-zeichnet path { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------------------
 * Bild-Vereinheitlichungs-Layer (Konzept 4.7 / 8.5)
 * Zieht Dias, frühe Digitalfotos und Handybilder zu einer visuellen Familie
 * zusammen. .sg-img ist ein WRAPPER — ersetzte Elemente rendern keine
 * Pseudoelemente. isolation verhindert, dass multiply gegen den falschen
 * Hintergrund rechnet.
 * ------------------------------------------------------------------------ */
.sg-img { position: relative; isolation: isolate; display: block; overflow: hidden; }
.sg-img > img { display: block; width: 100%; filter: saturate(.92) contrast(1.04); }
.sg-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--sg-blue-900);
  mix-blend-mode: multiply;
  opacity: .08;
}
/* In der Lightbox zählt das Original (Konzept 4.7). */
.sg-lightbox .sg-img::after { content: none; }
.sg-lightbox .sg-img > img { filter: none; }

.sg-img--4-5  { aspect-ratio: 4 / 5; }
.sg-img--3-2  { aspect-ratio: 3 / 2; }
.sg-img--4-3  { aspect-ratio: 4 / 3; }
.sg-img--16-9 { aspect-ratio: 16 / 9; }
.sg-img--21-9 { aspect-ratio: 21 / 9; }
.sg-img--1-1  { aspect-ratio: 1 / 1; }
.sg-img[class*="sg-img--"] > img { height: 100%; object-fit: cover; }

/* Platzhalter, wo noch kein Foto vorliegt — Höhenlinienfläche mit
   Bildbeschreibung. NIEMALS Stockfotos (Konzept 3.1, 4.7). */
.sg-bildplatz {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--sg-blue-800);
  color: var(--sg-blue-200);
  overflow: hidden;
  isolation: isolate;
}
.sg-bildplatz__text {
  position: relative;
  z-index: 1;
  padding: var(--sp-5);
  text-align: center;
  font-size: var(--sg-fs-meta);
  font-weight: 550;
  letter-spacing: var(--sg-ls-meta);
  text-transform: uppercase;
  max-width: 34ch;
}

/* ---------------------------------------------------------------------------
 * Formularelemente (Konzept 4.5, 4.6, 11.3)
 * Rahmen 1.5px border-strong wegen WCAG 1.4.11, Klickziel ≥ 48px.
 * ------------------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"],
input[type="password"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--sg-white);
  color: var(--sg-ink);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--t-schnell), box-shadow var(--t-schnell);
}
textarea { min-height: 9rem; resize: vertical; }

input:hover, select:hover, textarea:hover { border-color: var(--sg-blue-600); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--sg-blue-600);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--sg-error);
}

label { display: block; font-weight: 600; margin-bottom: var(--sp-2); }
.sg-feld + .sg-feld { margin-top: var(--sp-5); }
.sg-feld__hinweis { display: block; margin-top: var(--sp-2); font-size: var(--sg-fs-meta); color: var(--sg-slate-600); }
.sg-feld__fehler  { display: block; margin-top: var(--sp-2); font-size: var(--sg-fs-meta); color: var(--sg-error); font-weight: 600; }

input[type="checkbox"], input[type="radio"] {
  width: 1.375rem; height: 1.375rem;
  min-height: 0;
  accent-color: var(--sg-blue-700);
  flex: 0 0 auto;
  margin: .2em 0 0;
}
.sg-check { display: flex; gap: var(--sp-3); align-items: flex-start; }
.sg-check label { font-weight: 400; margin: 0; }

/* ---------------------------------------------------------------------------
 * Tabellen
 * ------------------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: var(--border-hair); }
th { font-weight: 650; }
tbody tr:nth-child(odd) { background: var(--sg-blue-50); }
.sg-footer tbody tr:nth-child(odd) { background: rgb(255 255 255 / .04); }

/* Breite Inhalte scrollen in ihrem eigenen Kasten, nie die Seite (11.3). */
.sg-scrollt { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------------
 * Einblenden beim Seitenaufbau (Konzept 3.6)
 * Gestaffelt, 60 ms Versatz. Nur mit JS — ohne JS ist alles sofort da.
 * ------------------------------------------------------------------------ */
.js .sg-tritt-ein { opacity: 0; transform: translateY(12px); }
.js .sg-tritt-ein.ist-sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-ruhig) var(--ease-aus), transform var(--t-ruhig) var(--ease-aus);
}
@media (prefers-reduced-motion: reduce) {
  .js .sg-tritt-ein { opacity: 1; transform: none; }
}

@media print {
  .sg-header, .sg-footer, .sg-skip, .sg-saisonband__hinweis { display: none; }
  body { font-size: 11pt; }
}