/* ══════════════════════════════════════════════════════════════════════════
   Fischhandel Römer — Gestaltungstoken

   Stand 2026-09-08: umgestellt auf den Entwurf des Auftraggebers (Papiergrund,
   gerissene Kanten, Display-Serif „Bringbold Nineties", Korallenknöpfe).

   Jeder Farbwert ist GEMESSEN, nicht geschätzt — die drei Riss-Streifen und
   das Wappen des Kunden tragen die Marke pixelgenau in sich:

   | Rolle          | Wert     | Herkunft                                    |
   |----------------|----------|---------------------------------------------|
   | Navy           | #0a2a50  | Füllfarbe von WebUi/Blauer-Steifen.png      |
   | Papier         | #f2ede9  | Füllfarbe von WebUi/Besch-Streifen-oben.png |
   | Karten-Creme   | #faf6ed  | Füllung des Wappens, heller als der Grund   |
   | Koralle        | #fc5a5a  | Kontur des Wappens                          |
   | Display-Serif  | Bringbold Nineties (Kunde, OTF → woff2)         |
   | Fließschrift   | Inter, lokal                                    |

   Kontraste, in Python nachgerechnet (WCAG 2.2: Text 4,5:1; große Schrift und
   Bedienränder 3:1):

   Navy auf Papier          12,37:1     Navy auf Karten-Creme     13,34:1
   Papier auf Navy          12,37:1     Creme auf Navy            13,34:1
   Text ruhig auf Papier     5,83:1     Text leise auf Papier      4,63:1
   Text ruhig auf Navy       8,26:1     Text leise auf Navy        5,97:1
   Navy-tief auf Koralle     5,43:1     Koralle auf Navy           4,62:1
   Kontur auf Creme          3,03:1     Hellblau auf Hero          5,46:1

   Weiß auf Koralle wäre nur 3,11:1 — korallfarbene Flächen tragen deshalb
   dunkelblaue Schrift, niemals weiße.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Display-Serif des Kunden ──────────────────────────────────────────────
   Es gibt nur Regular und Oblique. Die Schrift ist von sich aus sehr fett;
   ein font-weight über 400 würde der Browser synthetisch fetten und die
   hochkontrastigen Haarstriche zumatschen. Deshalb steht überall 400.
   Die OTF-Datei bleibt als zweite Quelle stehen: sollte die woff2-Fassung
   fehlen, lädt der Browser die Originaldatei und die Seite sieht trotzdem
   richtig aus. */
@font-face {
  font-family: 'Bringbold Nineties';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bringbold-regular.woff2') format('woff2'),
       url('../fonts/Bringbold%20Nineties%20Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Bringbold Nineties';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bringbold-oblique.woff2') format('woff2'),
       url('../fonts/Bringbold%20Nineties%20Oblique.otf') format('opentype');
}

/* ── Inter für Fließtext und Bedienelemente ─────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;          /* Variable Font: eine Datei für alle Schnitte */
  font-display: swap;
  src: url('../fonts/inter-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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-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;
}

:root {
  /* ── Marke ────────────────────────────────────────────────────────────── */
  --navy:          #0a2a50;
  --navy-tief:     #071d38;   /* Fußzeile, Schrift auf Koralle */
  --navy-hoch:     #14406e;   /* Karten auf Navy */
  --tiefblau:      #1d3686;
  --papier:        #f2ede9;   /* Grund der hellen Sektionen — Farbe des Risses */
  --creme:         #faf6ed;   /* Karten: heller als der Grund */
  --creme-tief:    #ece5dc;   /* zweite Papierlage */
  --dunst:         #e1edf5;
  --koralle:       #fc5a5a;
  --koralle-hell:  #ff7b7b;   /* Zeigefinger-Zustand */
  --koralle-schrift: #c93636; /* nur diese Tönung ist auf hell als Text lesbar */
  --hellblau:      #8fc0e0;   /* Gruppenlabels auf Navy — 5,42:1 */
  /* Die erste Hero-Zeile im Entwurf ist kräftiger und heller als das
     gedeckte --hellblau. Wert am Entwurf abgelesen, Kontrast gegen den
     tatsächlich gerenderten Grund gemessen (siehe README). */
  --hero-blau:     #8ed3f0;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text:          #0a2a50;
  --text-ruhig:    rgba(10, 42, 80, .74);   /* 5,83:1 auf Papier */
  --text-leise:    rgba(10, 42, 80, .66);   /* 4,63:1 auf Papier */
  --text-auf-navy:       #faf6ed;
  --text-auf-navy-ruhig: rgba(250, 246, 237, .76);  /* 8,26:1 */
  --text-auf-navy-leise: rgba(250, 246, 237, .62);  /* 5,97:1 */

  /* ── Ränder und Flächen ───────────────────────────────────────────────── */
  --rand:          rgba(10, 42, 80, .14);
  --rand-stark:    rgba(10, 42, 80, .50);   /* 3,03:1 — WCAG 1.4.11 */
  --rand-fein:     rgba(10, 42, 80, .22);   /* nur Zierlinien, kein Bedienrand */
  /* Trennstriche in Karten. Sie trennen zwei Textblöcke und tragen selbst
     keine Information — daher gilt die 3:1-Regel für Bedienränder hier nicht. */
  --strich:        rgba(10, 42, 80, .28);
  --rand-auf-navy: rgba(250, 246, 237, .38);
  --schleier:      rgba(10, 42, 80, .05);
  --fokus:         #fc5a5a;

  /* ── Schrift ──────────────────────────────────────────────────────────── */
  --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial,
             sans-serif;
  /* Die Rückfallkette der Display-Serif ist bewusst kräftig und hochkontrastig
     gewählt, damit die Seite auch ohne die Kundenschrift nicht zerfällt. */
  --schrift-display: 'Bringbold Nineties', 'Playfair Display', 'Iowan Old Style',
                     'Palatino Linotype', Georgia, 'Times New Roman', serif;

  --t-xs:  clamp(.75rem,  .73rem + .10vw, .8125rem);
  --t-s:   clamp(.875rem, .85rem + .12vw, .9375rem);
  --t-m:   clamp(1rem,    .97rem + .15vw, 1.0625rem);
  --t-l:   clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --t-xl:  clamp(1.3125rem, 1.22rem + .48vw, 1.625rem);
  --t-2xl: clamp(1.625rem, 1.42rem + 1vw,   2.375rem);
  --t-3xl: clamp(2.125rem, 1.70rem + 2.1vw, 3.375rem);
  --t-4xl: clamp(2.5rem,   1.85rem + 3.2vw, 4.5rem);

  /* Überschriften des Entwurfs: die Hero läuft bis 6,5rem, die
     Sektionsüberschriften bis 3,5rem. Beide eng gesetzt. */
  --d-hero:    clamp(2.375rem, 1.1rem + 6.4vw, 6.25rem);
  --d-titel:   clamp(1.875rem, 1.25rem + 2.6vw, 3.5rem);
  --d-band:    clamp(2rem,     1.2rem + 3.4vw, 4rem);
  --d-karte:   clamp(1.375rem, 1.2rem + .8vw,  1.875rem);

  /* ── Abstände ─────────────────────────────────────────────────────────── */
  --r-1: .25rem;  --r-2: .5rem;   --r-3: .75rem;  --r-4: 1rem;
  --r-5: 1.5rem;  --r-6: 2rem;    --r-7: 3rem;    --r-8: 4rem;
  --r-9: 6rem;    --r-10: 8rem;

  --spalte:      75rem;
  --spalte-eng:  46rem;

  /* ── Form ─────────────────────────────────────────────────────────────── */
  --rund-xs:    .25rem;
  --rund-s:     .6rem;
  --rund-m:     .875rem;
  --rund-l:     1.125rem;   /* Karten des Entwurfs */
  --rund-xl:    1.75rem;
  --rund-pille: 999px;

  --schatten-s: 0 1px 2px rgba(7, 29, 56, .08);
  --schatten-m: 0 6px 20px rgba(7, 29, 56, .10);
  --schatten-l: 0 22px 60px rgba(7, 29, 56, .18);
  --schatten-karte: 0 10px 30px -12px rgba(7, 29, 56, .30);

  /* Höhe der gerissenen Kanten. Die Grafiken werden auf die Fensterbreite
     gestreckt; die Grenzen halten den Riss bei 390 px fein und bei 2560 px
     kräftig, ohne dass er zur Welle wird. */
  /* Wappenmasse: das Bild ist 941 x 1095 px, also 0,86 mal so breit wie hoch.
     Die Breite haelt in der Navigation die Luecke frei, in der das absolut
     liegende Wappen sitzt. */
  --wappen-h:     clamp(5.5rem, 9vw, 8.5rem);
  --wappen-b:     calc(var(--wappen-h) * .86);
  /* Luft ueber der Beschriftung der Kopfzeile, im Entwurf rund 3,3 % der
     Fensterbreite. Derselbe Wert setzt das Wappen von oben ab. */
  --kopf-oben:    clamp(var(--r-4), 3.3vw, var(--r-7));

  --riss-h:       clamp(2rem, 4.2vw, 5.5rem);
  /* Das Navigationsband ist 2108 × 70 px, also 30:1. Bei 1440 px Breite
     sind das 48 px; die Grenzen halten es bei 390 px fein und bei 2560 px
     kräftig, ohne dass die Risskante zur Welle wird. */
  --kopf-riss-h:  clamp(1.75rem, 3.6vw, 4.5rem);

  --tempo:  .24s;
  --tempo-l: .5s;
  --kurve:  cubic-bezier(.22, .61, .36, 1);

  /* Papierkorn als Data-URI — kein zusätzlicher Request. */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.42'/%3E%3C/svg%3E");
}