/* FH Wedel - Basis ueber den Tokens des Designsystems.
   Hier steht nur, was das Designsystem nicht selbst regelt. Abweichungen und
   Ergaenzungen sind in docs/designsystem-abweichungen.md begruendet.
   Keine eigenen Hexwerte; eigene Variablen tragen das Praefix --fhw-, damit
   sie nie mit kuenftigen Tokens des Designsystems kollidieren. */

:root {
    --fhw-seitenrand: var(--space-4);
}
@media (min-width: 48rem) {
    :root { --fhw-seitenrand: var(--space-5); }
}
@media (min-width: 64rem) {
    :root { --fhw-seitenrand: var(--space-6); }
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Seitenrahmen (guidelines/seitenbreite.html, TASK-89): Kopfleiste, Inhalt
   und Fusszeile enden an --seite-max (Site-Einstellung, Standard 1440 px),
   die Seite steht mittig, aussen Weiss (body aus base.css) mit Schatten an
   den Kanten. overflow: clip statt hidden: kein Scroll-Container, sticky
   bleibt am Viewport. Die Fusszeile steht auch auf kurzen Seiten unten. */
.fhw-rahmen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: var(--seite-max);
    margin-inline: auto;
    background: var(--surface-page);
    box-shadow: var(--shadow-seite);
    overflow: clip;
}

.fhw-rahmen > main {
    flex: 1 0 auto;
}

img,
picture,
video,
svg {
    max-width: 100%;
    height: auto;
}

/* Silbentrennung der Ueberschriften steht seit dem Handoff vom 03.10.2026 in
   base.css (Abweichung 5); Safari vor Version 17 kennt nur die Praefix-Form. */
h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-hyphens: auto;
}

ul,
ol {
    margin: 0 0 var(--space-4);
    padding-left: 1.25em;
}

li + li {
    margin-top: var(--space-1);
}

/* Inhaltsbreiten: 1200 px Inhalt, 720 px Lesetext, jeweils mit Seitenrand */
.fhw-inhalt {
    width: 100%;
    max-width: calc(var(--content-max) + 2 * var(--fhw-seitenrand));
    margin-inline: auto;
    padding-inline: var(--fhw-seitenrand);
}

.fhw-inhalt--schmal {
    max-width: calc(var(--content-narrow) + 2 * var(--fhw-seitenrand));
}

/* Sprunglink "Zum Inhalt": erst bei Tastaturfokus sichtbar */
.fhw-sprunglink {
    position: absolute;
    top: var(--space-2);
    left: var(--space-4);
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-m);
    background: var(--fh-blau);
    color: var(--text-invers);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transform: translateY(-200%);
}

.fhw-sprunglink:focus {
    transform: none;
    color: var(--text-invers);
}

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

/* Dunkle Flaechen: Links, Sekundaertext und Buttons setzt .flaeche-dunkel
   aus base.css (Handoff 03.10.2026, Abweichung 4); jede .fhw-dunkel traegt
   sie mit. Hier nur Grund und Ueberschriften: .flaeche-dunkel laesst die
   Ueberschriften dunkelblau (Rueckmeldung Nr. 24). */
.fhw-dunkel {
    background: var(--surface-dark);
    color: var(--text-invers);
}

.fhw-dunkel :is(h1, h2, h3, h4, h5, h6) {
    color: var(--text-invers);
}

/* Dachzeile (Eyebrow): Rot auf Hell, Gold auf Dunkel */
.fhw-dachzeile {
    margin: 0 0 var(--space-2);
    color: var(--text-dachzeile);
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--leading-tight);
    text-transform: uppercase;
}

.fhw-dunkel .fhw-dachzeile {
    color: var(--text-dachzeile-invers);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}