/* Matma Immobilien AG — Rollen-Tokens
   Palette aus dem CD-Handbuch (B.J.Y.L.D. GmbH, Input/2026-08-26-Matma_Guidelines.pdf,
   Seiten 3–9): Matma Blau RGB 15/63/147, Matma Gold RGB 192/174/137, Manrope als
   Hausschrift, Wortmarke, Bubble-Störer.

   Haltung: hell und offen wie die Imagebroschüre Januar 2026 — grosse ruhige Flächen,
   vollflächiges Blau als Gegenstück, Gold als Titelfarbe auf Blau. Wärme kommt aus
   Papierton, Menschenbildern und Gold-auf-Blau, nicht aus grossen Beigeflächen.

   Zwei Fassungen, eine Bausteinsammlung: [data-fassung] tauscht nur die Flächenrollen.
   Komponenten verwenden ausschliesslich Rollen, nie die Palettenwerte. */

/* ============================================================
   Schriftdateien — mitgeliefert, nicht von Google nachgeladen.
   Beide sind freie Google-Schriften; die Dateien liegen unter assets/fonts/,
   damit das System auch ohne Netz und ohne externe Domain richtig rendert.

   font-display: optional statt swap. Die Schrift lädt entweder sofort oder gar
   nicht — es gibt keinen Austausch mitten im Rendern und damit keinen Sprung.
   Der schwerste Befund der heutigen matma.ch ist genau so ein Sprung
   (CLS 1.74 im Feld auf dem Desktop). Bei gleichzeitig ausgelieferten Dateien
   trifft «optional» praktisch immer.
   ============================================================ */

@font-face {
	font-family: 'Gelasio';
	font-style: normal;
	font-weight: 400 700;
	font-display: optional;
	src: url(assets/fonts/gelasio-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: 'Gelasio';
	font-style: normal;
	font-weight: 400 700;
	font-display: optional;
	src: url(assets/fonts/gelasio-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;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: optional;
	src: url(assets/fonts/manrope-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: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: optional;
	src: url(assets/fonts/manrope-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;
}

/* ============================================================
   Layer 1 — Palette. Werte stehen ausschliesslich hier.
   ============================================================ */
:root {
	--p-blau:        #0F3F93; /* Matma Blau, CD-Handbuch S. 4 (RGB 15/63/147) */
	--p-blau-tief:   #0A2D6B;
	--p-blau-hell:   #2A5CB8;

	/* Flächenblau: Matma Blau vertieft, ein Zehntel Matma Gold eingerührt.
	   Das Markenblau ist ein gesättigtes Signalblau — als grosse Fläche wirkt es
	   kalt und technisch. Dieser Ton ist dasselbe Markenblau, nur vertieft — kein Gold
	   eingerührt.
	   Gerechnet: Gold darauf 5.14:1 statt 4.49, Weiss 11.17:1 statt 9.76. */
	--p-blau-flaeche: #0C3479;
	--p-gold:        #C0AE89; /* Matma Gold, CD-Handbuch S. 4 (RGB 192/174/137) */
	--p-gold-hell:   #D6C9AC;
	--p-gold-tief:   #8C7A55; /* nur für Text auf hellen Flächen, nie als Markenfarbe */

	--p-sand-050:    #FBF9F5;
	--p-sand-100:    #F5F0E6;
	--p-sand-200:    #EBE3D4;
	--p-sand-300:    #DCD1BC;

	--p-weiss:       #FFFFFF;
	--p-tinte:       #1D2430;
	--p-tinte-leise: #5A6472;

	--p-frei:        #2E7D5B; /* Objektstatus frei */
	--p-reserviert:  #B8862B; /* Objektstatus reserviert */
	--p-vergeben:    #8A8F98; /* Objektstatus verkauft/vermietet */
}

/* ============================================================
   Layer 2 — Rollen.
   Fassung A «Papier»: warmes Papierweiss trägt, Sand als Band. (Voreinstellung)
   ============================================================ */
:root,
[data-fassung="papier"] {
	--surface:            var(--p-sand-050);
	--surface-muted:      var(--p-sand-100);
	--surface-card:       var(--p-weiss);
	--surface-deep:       var(--p-blau-flaeche);
	--surface-deep-strong: var(--p-blau-tief);

	--text:               var(--p-tinte);
	--text-muted:         var(--p-tinte-leise);
	--text-heading:       var(--p-blau);
	--text-on-deep:       var(--p-weiss);
	--heading-on-deep:    var(--p-gold);

	--accent:             var(--p-gold);
	--accent-ink:         var(--p-gold-tief);
	--accent-on-deep:     var(--p-gold);

	--line:               var(--p-sand-200);
	--line-strong:        var(--p-sand-300);
	--line-on-deep:       rgba(255, 255, 255, 0.22);
}

/* Fassung B «Sand»: Sand trägt durchgehend, Karten stehen weiss darauf. */
[data-fassung="sand"] {
	--surface:            var(--p-sand-100);
	--surface-muted:      var(--p-sand-200);
	--surface-card:       var(--p-weiss);
	--surface-deep:       var(--p-blau-flaeche);
	--surface-deep-strong: var(--p-blau-tief);

	--line:               var(--p-sand-300);
	--line-strong:        var(--p-gold);
}

/* ============================================================
   Schrift
   Umschalter: [data-titel="manrope"] setzt --font-display zurück auf die
   Hausschrift. Genau eine Zeile — Kims Bedingung «Rückkehr mit wenig Aufwand».
   ============================================================ */
:root {
	--font-display: 'Gelasio', Georgia, 'Times New Roman', serif;
	--font-body:    'Manrope', system-ui, -apple-system, sans-serif;

	--display-weight:  600;
	--display-tracking: -0.015em;
	--display-leading:  1.06;
}

[data-titel="manrope"] {
	--font-display: 'Manrope', system-ui, -apple-system, sans-serif;
	--display-weight:  800;
	--display-tracking: -0.03em;
	--display-leading:  1.0;
}

/* Fliessende Grössen. Basis 16 px bei 360 px Breite, 19 px bei 1440 px. */
:root {
	--step--1: clamp(0.86rem, 0.83rem + 0.13vw, 0.94rem);
	--step-0:  clamp(1.00rem, 0.96rem + 0.19vw, 1.13rem);
	--step-1:  clamp(1.20rem, 1.13rem + 0.32vw, 1.41rem);
	--step-2:  clamp(1.44rem, 1.32rem + 0.53vw, 1.80rem);
	--step-3:  clamp(1.73rem, 1.53rem + 0.87vw, 2.30rem);
	--step-4:  clamp(2.07rem, 1.76rem + 1.39vw, 2.94rem);
	--step-5:  clamp(2.49rem, 2.00rem + 2.19vw, 3.75rem);
	--step-6:  clamp(2.99rem, 2.24rem + 3.34vw, 4.80rem);

	--measure: 62ch;
	--measure-narrow: 46ch;
}

/* ============================================================
   Raum, Form, Tiefe
   Form: Flächen und Bilder sind rechtwinklig — so arbeitet die Imagebroschüre.
   Rundung lebt ausschliesslich im Bubble-Vokabular des CD-Handbuchs (S. 5):
   Bubble als Kreis, Knöpfe und Marken als Pille. Der Gegensatz ist die Absicht.
   ============================================================ */
:root {
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs:  0.75rem;
	--space-s:   1rem;
	--space-m:   1.5rem;
	--space-l:   2.25rem;
	--space-xl:  3.5rem;
	--space-2xl: 5rem;
	--space-3xl: 7.5rem;

	--radius:        0;
	--radius-pill:   999px;
	--radius-bubble: 50%;

	/* Bubble-Outline: ein 32stel des Durchmessers, CD-Handbuch S. 5 */
	--bubble-outline: 0.03125;

	--shadow-float: 0 0.5rem 1.75rem rgba(15, 63, 147, 0.22);

	--rhythm: clamp(3.5rem, 2rem + 6vw, 7.5rem); /* Abstand zwischen Sektionen */
	--gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
	--page:   82rem;
}

/* ============================================================
   Kontrast — gerechnet, nicht geschätzt. Bindend.
   Markenblau auf Weiss        9.76:1  ✓  Textfarbe, Titel, Knopffüllung
   Markenblau auf Sand         8.59:1  ✓
   Weiss auf Flächenblau      11.17:1  ✓  Text auf tiefen Flächen
   Gold auf Flächenblau        5.14:1  ✓  Titel UND Fliesstext — der Grund für den Ton
   Gold auf Markenblau         4.49:1  ✓  nur ab 24 px → kleine Flächen, Knöpfe
   Blau auf Gold               4.49:1  ✗  Fliesstext (Grenze 4.5) → Gold ist keine Textfläche
   Weiss auf Gold              2.17:1  ✗  nie
   Gold auf Weiss              2.17:1  ✗  nie als Textfarbe → dafür --accent-ink
   ============================================================ */