/* Seitenraster von hlsbrg. Farben, Schrift und Formen kommen nur aus den Tokens (design-grundlagen) und stil-hlsbrg. */
body.wk { margin: 0; }

.s-springen { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 8px 14px; border-radius: var(--wk-radius-s);
  background: var(--wk-akzent); color: var(--wk-auf-akzent); }
.s-springen:focus { top: 12px; }

.s-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px clamp(16px, 4vw, 48px); }
.s-wort { font-size: 20px; font-weight: 700; color: var(--wk-text); text-decoration: none; }
.s-nav { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.s-nav a { white-space: nowrap; color: var(--wk-text); text-decoration: none; border-radius: var(--wk-radius-s); padding: 4px 6px; }
.s-nav a:hover { background: var(--wk-akzent); color: var(--wk-auf-akzent); }
.s-nav a:hover .hlsbrg-klammer { color: inherit; }

.s-buehne-text { max-width: 760px; padding-bottom: var(--hlsbrg-neigung); }
.s-gross { font-size: clamp(44px, 8vw, 104px); margin: 8px 0 16px; overflow-wrap: anywhere; }

.s-spalte { max-width: 1080px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 48px); }
.s-lead { font-size: var(--wk-groesse-gross); max-width: var(--wk-lesebreite); color: var(--wk-text-2); }
.s-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 28px; margin-top: 32px; }
.s-raster .wk-h3 { margin: 6px 0; }

/* Rechtstexte: gut lesbarer Fließtext, keine Code-Schreibweise */
.s-text { max-width: var(--wk-lesebreite); }

.s-fuss { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 24px clamp(16px, 4vw, 48px) 40px; color: var(--wk-text-leise); font-size: 13px; }
.s-fuss a { color: var(--wk-text-2); }

/* Infoseite: die Bühne füllt den Bildschirm */
.s-info { min-height: calc(100vh - 140px); }
.s-zeile { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 28px; }

/* Karten im Portfolio: Bild oben, randlos in der Karte */
.s-karte { display: grid; align-content: start; gap: 6px; }
.s-karte-bild { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wk-radius-m); margin-bottom: 10px; background: var(--wk-flaeche); }
.s-karte .wk-klein p { margin: 0 0 8px; }