/* ============================================================
   ZUSATZREGELN — Seitenpaket C (Referenzen, Kontakt)
   Nur Regeln, die sich mit den bestehenden Bausteinen nicht abbilden
   lassen. Jede Regel steht mit Begründung hier und nicht in
   sections.css / base.css / components.css / tokens.css.
   Ausschliesslich Tokens, keine Hex-, px- oder rem-Werte.
   ============================================================ */

/* ------------------------------------------------------------
   1 · Kennzahlenband auf dunklem Grund (referenzen.html)
   sections.css setzt die Kacheln des .statband auf var(--bg) — also
   weiss — und färbt die Ziffern in .section--invert/--shot gleichzeitig
   gelb. Auf der Referenzseite steht das Band auf grünem Grund; ohne
   diese Korrektur stünden gelbe Zahlen auf weisser Fläche. Die Kachel
   wird deshalb dunkel und der Fliesstext hell.
   ------------------------------------------------------------ */
.section--invert .statband > div,
.section--shot .statband > div { background: var(--green-700) }

.section--invert .statband span,
.section--shot .statband span { color: var(--text-invert-muted) }

/* ------------------------------------------------------------
   2 · Kontaktkarte in der Aside-Spalte (kontakt.html)
   .contactcard ist für die Startseite gebaut und bringt dort einen
   eigenen Aussenabstand und eine Maximalbreite mit. In der Aside-Spalte
   der Kontaktseite regelt der Grid-Gap die Abstände, und die Karte soll
   die volle Spaltenbreite nutzen.
   ------------------------------------------------------------ */
.contactpage__aside .contactcard { margin-top: 0; max-width: none }

/* ------------------------------------------------------------
   3 · Sterne im zentrierten Sektionskopf (referenzen.html)
   .head--center zentriert Text und Blockelemente, .stars ist ein
   Flex-Container und bliebe deshalb linksbündig stehen.
   ------------------------------------------------------------ */
.head--center .stars { justify-content: center }

/* ------------------------------------------------------------
   4 · Adresse in der Aside-Spalte (kontakt.html)
   <address> ist semantisch richtig für den Firmensitz, wird von den
   Browsern aber kursiv gesetzt. Innerhalb der Kontaktkarte soll die
   Anschrift wie die übrigen Meta-Zeilen aussehen.
   ------------------------------------------------------------ */
.contactpage address { font-style: normal }

/* Kontaktseite · Ansprechpartner-Foto als vollflächige Karte mit grüner
   Namensleiste – nimmt die Bildsprache der grünen Kontaktkarte darunter auf. */
.contactperson { margin-bottom: var(--space-5) }
.contactperson__img { width: 100%; aspect-ratio: var(--ratio-wide); object-fit: cover; object-position: center 28%; display: block }
.contactperson__cap { background: var(--green); color: var(--white); padding: var(--space-4) var(--space-5); display: grid; gap: 3px }
.contactperson__cap b { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--white) }
.contactperson__cap span { font-size: var(--fs-sm); color: rgb(var(--rgb-white) / .82); line-height: 1.5 }

/* Kontaktformular · gleichmäßiger vertikaler Rhythmus zwischen den Blöcken.
   .form (einstufig, ohne .form__step) hat sonst keinen Abstand zwischen
   Feld-Gruppen, Nachricht, Consent und Button – sie würden aneinanderkleben. */
.contactpage .form > * + * { margin-top: var(--space-5) }