/* Reinigung Jetzt – Design-Tokens.
   Kopie aus dem Design System (Claude Design). Nicht hier ändern, sondern im Design System und dann hierher kopieren. */
/* Josefin Sans – Variable Font 100–700, SIL Open Font License.
   DSGVO: immer lokal hosten, nie über das Google-Fonts-CDN einbinden.
   WICHTIG: font-weight maximal 700 – höhere Werte erzeugen Fake-Bold. */
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url("assets/fonts/JosefinSans-Variable-latin.woff2") format('woff2');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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url("assets/fonts/JosefinSans-Variable-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Markenfarben aus dem offiziellen Logo-Guide. Faustregel 60/30/10:
   60 % Fläche (Navy oder Weiß), 30 % Gegenfläche, max. 10 % Akzent. */
:root{
  /* Kernfarben */
  --rj-navy:#1d2c4e;        /* Primärfarbe – Flächen, Überschriften, Text auf hell */
  --rj-navy-deep:#162240;   /* Abgedunkelte Fläche: Footer, Verlaufs-Enden */
  --rj-cyan:#00b3d3;        /* Akzentfarbe – Icons, Links auf dunkel, Highlights */
  --rj-cyan-light:#3ce9ea;  /* Verlaufs-Start – nur dekorativ (Logo, Grafiken) */
  --rj-cyan-deep:#0090bf;   /* Verlaufs-Ende, Hover-Zustände */
  --rj-cyan-dark:#007a99;   /* Text/Links auf hellen Flächen – Cyan ist dort zu hell (AA!) */
  --rj-gold:#f39c12;        /* CTA-/Aktionsfarbe – sparsam einsetzen */
  --rj-gold-dark:#e67e22;   /* Gold-Verlauf/Hover */
  --rj-white:#ffffff;

  /* Flächen & Funktionsfarben (abgeleitet, barrierefrei) */
  --rj-link-on-light:var(--rj-cyan-dark);
  --rj-surface-light:#f2f5fa;   /* Helle Sektionen – navy-getönt statt reinweiß */
  --rj-cyan-ice:#e6f7fb;        /* Getönte Info-Flächen, Icon-Hintergründe, Hover auf hell */
  --rj-border-light:#dfe5ee;    /* Linien/Rahmen auf hellen Flächen */
  --rj-text-muted-dark:rgba(255,255,255,.7);  /* Sekundärtext auf Navy */
  --rj-text-muted-light:#5a6478;              /* Sekundärtext auf hellen Flächen */
  --rj-success:#28a745;
  --rj-error:#bd2130;

  /* Verläufe */
  --rj-gradient-brand:linear-gradient(180deg,#3ce9ea 0%,#00b3d3 55%,#0090bf 100%); /* @kind color */
  --rj-gradient-button:linear-gradient(135deg,#00b3d3,#0090bf); /* @kind color */
  --rj-gradient-cta:linear-gradient(135deg,#f39c12,#e67e22); /* @kind color */
  --rj-gradient-hero:linear-gradient(180deg,#1d2c4e 0%,#162240 100%); /* @kind color */
}

/* Josefin Sans für alles. Kleine x-Höhe: Fließtext nie unter 16 px,
   rechtliche Texte nie unter 14 px. Skala Faktor ~1.25, Basis 16 px. */
:root{
  --rj-font:'Josefin Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --rj-weight-regular:400;
  --rj-weight-semibold:600;
  --rj-weight-bold:700;   /* Maximum – kein 800/900 verwenden */

  --rj-text-xs:0.8rem;
  --rj-text-sm:0.9rem;
  --rj-text-base:1rem;
  --rj-text-md:1.25rem;
  --rj-text-lg:1.563rem;
  --rj-text-xl:1.953rem;
  --rj-text-2xl:2.441rem;
  --rj-text-3xl:3.052rem;

  --rj-leading-body:1.7;
  --rj-leading-head:1.15;
  --rj-tracking-caps:0.18em;  /* für VERSALIEN (Slogan, Eyebrows) */
  --rj-tracking-ui:0.02em;    /* Buttons, UI-Labels */
  --rj-tracking-badge:0.1em;  /* Badges */
}

/* Feste Skala – keine Zwischenwerte erfinden. Wer 27 px braucht, nimmt 32. */
:root{
  --rj-space-xs:8px;    /* Icon↔Text, Badge-Innenleben */
  --rj-space-sm:12px;   /* Zeilen in Listen/Karten */
  --rj-space-md:20px;   /* Karten-Padding, Grid-Gap */
  --rj-space-lg:32px;   /* Abstand Überschrift→Inhalt */
  --rj-space-xl:48px;   /* Abstand zwischen Themenblöcken */
  --rj-space-2xl:72px;  /* Abstand zwischen Seitensektionen */
  --rj-container:1100px;
}

/* Form, Effekte, Bewegung. Glow-Schatten nur auf dunklen Flächen. */
:root{
  --rj-radius:14px;      /* Karten, Buttons */
  --rj-radius-sm:10px;   /* Icon-Container, Felder, kleine Elemente */
  --rj-radius-pill:999px;/* Badges */
  --rj-transition:0.3s cubic-bezier(0.4,0,0.2,1); /* @kind other */

  --rj-glow-cyan:rgba(0,179,211,.3);
  --rj-glow-gold:rgba(243,156,18,.35);
  --rj-shadow-card:0 8px 30px rgba(0,0,0,.2);
  --rj-card-bg:rgba(255,255,255,.06);      /* Glas-Karte auf Navy */
  --rj-card-border:rgba(255,255,255,.10);
  --rj-glass-blur:blur(10px); /* @kind other */

  --rj-focus-ring:3px solid var(--rj-cyan);
  --rj-focus-offset:2px;
}

/* Semantische Aliase – für Konsumenten, die nicht rj-* denken wollen.
   Sie zeigen ausschließlich auf bestehende Marken-Tokens. */
:root{
  --text-heading:var(--rj-navy);
  --text-body:var(--rj-navy);
  --text-muted:var(--rj-text-muted-light);
  --text-on-dark:var(--rj-white);
  --text-muted-on-dark:var(--rj-text-muted-dark);
  --text-link:var(--rj-link-on-light);
  --text-link-on-dark:var(--rj-cyan);

  --surface-page:var(--rj-white);
  --surface-muted:var(--rj-surface-light);
  --surface-info:var(--rj-cyan-ice);
  --surface-dark:var(--rj-navy);
  --surface-dark-deep:var(--rj-navy-deep);
  --surface-card:var(--rj-white);
  --surface-card-glass:var(--rj-card-bg);

  --border-default:var(--rj-border-light);
  --border-glass:var(--rj-card-border);

  --accent:var(--rj-cyan);
  --accent-strong:var(--rj-cyan-dark);
  --action:var(--rj-gold);
}