/* Sailing Sisters Tokens. Kopie aus dem Design-Projekt, siehe QUELLE.md.
   Zusammengefuegt aus tokens/colors, typography, spacing, states, responsive,
   damit der Browser eine Datei laedt statt sechs nacheinander per Import.
   Nicht hier aendern: Aenderungen gehen an Design, dann neu uebernehmen. */

/* ===== tokens/colors.css ===== */
/* Sailing Sisters Farben. Gemessen aus dem Master-Logo, Stand 18.08.2026.
   Kontraste nach WCAG 2.1 gerechnet, siehe readme.md. */
:root{
  /* Kernfarben */
  --ss-navy:#061940;        /* Tiefsee-Navy: Text, dunkle Flächen. 17,20:1 auf Weiß */
  --ss-ocean:#2A7D9E;       /* Ocean-Blau: Flächenfarbe, nie Fließtext. 4,64:1 grenzwertig */
  --ss-red:#D61716;         /* Signalrot: Akzent (Wimpel), nie flächig, nie Text auf Navy */
  --ss-white:#FFFFFF;
  /* Abgeleitet */
  --ss-ocean-deep:#23698B;  /* Ocean für kleinen Text/Links auf Weiß, 6,06:1 */
  --ss-navy-100:#F0F1F4;    /* ruhige Abschnittsfläche */
  --ss-navy-200:#E1E3E8;    /* Trennlinien, Rahmen */
  --ss-navy-300:#B4BAC6;    /* deaktiviert, Platzhalter */
  --ss-navy-600:#4C5975;    /* Sekundärtext, 7,02:1 */
  /* Bildwelt-Sekundärpalette: nur Illustrationen und Bildflächen, nie Text, nie UI */
  --ss-sand-050:#F7E5B5;
  --ss-sand-100:#E3D6B4;    /* Zitat-Fläche ist die einzige UI-Ausnahme */
  --ss-sand-200:#DEC69F;
  --ss-ochre:#C9903F;
  --ss-terracotta:#C2703B;
  --ss-water-deep:#0E3A5C;
  --ss-foliage:#7B8A6A;
  /* Rollen */
  --ss-text:var(--ss-navy);
  --ss-text-muted:var(--ss-navy-600);
  --ss-text-invert:var(--ss-white);
  --ss-surface:var(--ss-white);
  --ss-surface-subtle:var(--ss-navy-100);
  --ss-surface-strong:var(--ss-navy);
  --ss-surface-accent:var(--ss-ocean);
  --ss-border:var(--ss-navy-200);
  --ss-link:var(--ss-ocean-deep);
  --ss-accent:var(--ss-red);
}

/* ===== tokens/typography.css ===== */
/* Schriftzuordnung verbindlich in readme.md, Abschnitt TYPOGRAFIE – SCHRIFTZUORDNUNG.
   --ss-font-brand (Ysabeau Office): alles, was man bedient oder überfliegt.
   --ss-font-read (Literata): alles, was erzählt wird, in ganzen Sätzen.
   ACHTUNG: --ss-size-h1/h2/h3 sind Größenstufen aus der Token-Quelle, KEINE HTML-Tags.
   Für Überschriften die Rollen-Token unten nehmen (--ss-size-page usw.). */
:root{
  --ss-font-brand:'Ysabeau Office','Segoe UI',system-ui,sans-serif;
  --ss-font-read:'Literata',Georgia,serif;
  --ss-size-display:3rem;    /* 48px / 1.15 SemiBold */
  --ss-size-h1:2rem;         /* 32px / 1.25 SemiBold */
  --ss-size-h2:1.5rem;       /* 24px / 1.25 SemiBold */
  --ss-size-h3:1.25rem;      /* 20px / 1.3  SemiBold */
  --ss-size-body:1.0625rem;  /* 17px / 1.6  Regular */
  --ss-size-small:0.9375rem; /* 15px / 1.5  Regular */
  --ss-size-caption:0.8125rem;/* 13px / 1.4 Regular */
  /* Rollen: welche Größe eine Überschrift bekommt. Siehe readme HEADING-HIERARCHIE. */
  --ss-size-page:var(--ss-size-display);   /* 48px Seitentitel, das h1 */
  --ss-size-section:var(--ss-size-h1);     /* 32px Abschnitt auf der Seite */
  --ss-size-sub:var(--ss-size-h2);         /* 24px Unterabschnitt, Abschnitt in umrandeter Fläche */
  --ss-size-card:var(--ss-size-h3);        /* 20px Titel in Karten und Listen */
  --ss-lh-tight:1.15; /* @kind other */
  --ss-lh-head:1.25; /* @kind other */
  --ss-lh-body:1.6; /* @kind other */
  --ss-weight-regular:400;
  --ss-weight-semibold:600;
  --ss-weight-bold:700;
  --ss-maxwidth-text:68ch;
  /* Social-Skala, Basis 1080x1080: Headline 84px (max 6 Wörter), Unterzeile 44px,
     Kacheltext 36px (max 5 Zeilen), Fußzeile 28px in Navy-600. Story: oben/unten 250px frei. */
}

/* ===== tokens/spacing.css ===== */
/* 4er-Basis. Erlaubte Abstände: 4 8 12 16 24 32 48 64 96. Dazwischen nichts.
   Kachel-Innenabstand: 80px auf 1080er Fläche, Slides 100px. */
:root{
  --ss-space-1:4px;
  --ss-space-2:8px;
  --ss-space-3:12px;
  --ss-space-4:16px;
  --ss-space-6:24px;
  --ss-space-8:32px;
  --ss-space-12:48px;
  --ss-space-16:64px;
  --ss-space-24:96px;
  /* Kanten: 4px kleine Elemente, 8px Karten/Bilder, vollrund nur Avatare + Signet */
  --ss-radius-sm:4px;
  --ss-radius-md:8px;
  --ss-radius-full:999px;
  /* Linien: 1px Navy-200 für Trennungen. Die 3px-Rot-Akzentlinie aus Block B ist gestrichen
     (Deko statt Hierarchie); das Rot trägt der Wimpel im Logo. */
  --ss-rule-divider:1px solid var(--ss-navy-200);
}

/* ===== tokens/states.css ===== */
/* Zustände, Fokus und Rückmeldungen. Ergänzung 13.09.2026.
   Grund: Block B beschreibt nur Hover. Fokus, Disabled und Status fehlten,
   damit war das System für Formulare, Member-Bereich und App nicht benutzbar. */
:root{
  /* Fokus: sichtbar, 2px, immer mit Abstand zur Kante (WCAG 2.4.7 / 2.4.11) */
  --ss-focus-color:var(--ss-ocean-deep);
  --ss-focus-width:2px;
  --ss-focus-offset:2px;
  /* Kleinste Trefferfläche für Finger und Maus (WCAG 2.5.8) */
  --ss-hit-min:44px;
  /* Übergänge: kurz und unauffällig, nie Bewegung oder Skalierung */
  --ss-transition:120ms ease-out; /* @kind other */
  /* Inaktiv. Von der Kontrastpflicht ausgenommen, deshalb bewusst blass. */
  --ss-disabled-fg:var(--ss-navy-300);
  --ss-disabled-bg:var(--ss-navy-200);
  /* Status. Aus der Bildpalette abgeleitet und so weit abgedunkelt,
     dass jeder Ton als Text auf Weiß über 4,5:1 liegt. Nie als Fläche,
     nie als einziger Träger der Information: das Wort steht immer dabei. */
  --ss-status-info:var(--ss-ocean-deep);  /* 6,06:1 */
  --ss-status-ok:#4F5C3C;                 /* Vegetation tief, 7,10:1 */
  --ss-status-warn:#8A5F14;               /* Ocker tief, 5,63:1 */
  --ss-status-error:var(--ss-red);        /* 5,26:1 auf Weiß, nur als Text und 1px-Rahmen */
  --ss-status-surface:var(--ss-navy-100);
}
/* Mausklick zeigt keinen Ring, Tastatur immer. Der Ring folgt der Rundung des
   Elements, deshalb wird hier kein border-radius gesetzt. */
:focus{outline:none}
:focus-visible{outline:var(--ss-focus-width) solid var(--ss-focus-color);outline-offset:var(--ss-focus-offset)}
[disabled],[aria-disabled="true"]{cursor:not-allowed}
/* Die Marke definiert keine Animation. Wer trotzdem eine baut, respektiert das hier. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* ===== tokens/responsive.css ===== */
/* Breakpoints und Lesebreite. Ergänzung 13.09.2026.
   Feste Formate (Social 1080, Slides 1920, Zoom, Luma) sind davon ausgenommen:
   die haben eine Leinwand, keine Fenstergröße. Alles andere ist mobile first. */
:root{
  --ss-bp-xs:320px;  /* kleinstes zu prüfendes Fenster */
  --ss-bp-s:480px;   /* Karten hören auf, nebeneinander zu stehen */
  --ss-bp-m:768px;   /* Tablet, zweispaltig */
  --ss-bp-l:1024px;  /* Laptop */
  --ss-bp-xl:1440px; /* großer Schirm, Inhalt wächst nicht weiter */
  --ss-measure:68ch; /* Textspalte, aus Block B */
  --ss-page-max:1200px;
}
/* Hinweis: Custom Properties funktionieren in @media nicht, die Werte oben sind
   die verbindliche Referenz und müssen in Media Queries wiederholt werden. */
.ss-measure{max-width:var(--ss-measure)}
.ss-page{max-width:var(--ss-page-max);margin:0 auto;padding-inline:24px}
/* Zweispaltiges wird unter 480px einspaltig, ohne Ausnahme. */
@media (max-width:480px){.ss-stack-s{flex-direction:column !important;align-items:stretch !important}}