/*
 * Gemeinsame Stilquelle fuer die "Buehnen-Seiten"
 * (Jobs, Leistungen, Referenzen, Kontakt, Über uns)
 * ------------------------------------------------------------------------------
 * Angelegt am 22.09.2026 (Referenzen-Umbau): Jobs.razor und Leistungen.razor
 * hatten bisher jede fuer sich dieselben Werte fuer Farben, Radien, Abstaende,
 * Kleinzeilen ("Eyebrow"), Karten-Hintergruende und Knopf-Formen im eigenen
 * <style>-Block stehen. Wollte man z. B. den roten Akzentton aendern, musste man
 * das an mehreren Stellen gleichzeitig tun und lief Gefahr, eine zu vergessen.
 *
 * ZWEI VERSCHIEDENE WEGE, je nachdem, was der Auftrag verlangte:
 *
 * 1. Jobs.razor / Leistungen.razor (erste Fassung, 22.09.2026): NUR
 *    nachweislich BYTE-GLEICHE Deklarationen wandern hierher, per
 *    Selektorliste OHNE Markup-Aenderung (die vorhandenen Klassennamen wie
 *    ".jobs-hero-copy" werden hier einfach zusaetzlich bedient). Ziel war
 *    ausdruecklich: am Aussehen aendert sich nichts. Wo sich zwei Seiten in
 *    einem Wert unterschieden (z. B. Knopf-Mindesthoehe 44px vs. 42px),
 *    bleibt die Regel lokal in der jeweiligen Seite stehen.
 *
 * 2. Kontakt.razor / UeberUns.razor(.css) (ergaenzt am 22.09.2026, Auftrag
 *    Frank Punkt 4 "vereinheitlichen"): Hier durften kleine Wertunterschiede
 *    bewusst ANGEGLICHEN werden (z. B. Kartenradius 30px -> 28px). Dafuer
 *    tragen die betroffenen Elemente im Markup zusaetzlich die Klassen
 *    "ps-card", "ps-card-soft", "ps-eyebrow", "ps-badge", "ps-pill-link" -
 *    diese Klassen sind der eigentliche, seitenunabhaengige Anschluss an die
 *    gemeinsame Formensprache und stehen jedem kuenftigen "Buehnen"-Umbau
 *    offen.
 *
 * Die Referenzseite (CmsPageRenderer.razor, Klasse "cms-reference-*") nutzt
 * denselben zweiten Weg.
 */

:root {
    /* Werte, die auf Jobs- UND Leistungen-Seite nachweislich identisch sind. */
    --ps-accent: #ed2024;
    --ps-accent-strong: #c81b1f;
    --ps-text: #eef2f6;
    --ps-muted: #aeb8c5;
    --ps-surface: #12161d;
    --ps-line: rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------------
 * Kleinzeile ("Eyebrow"): roter Strich + Grossbuchstaben-Label vor jeder
 * Ueberschrift. War auf Jobs (.jobs-eyebrow) und Leistungen (.services-eyebrow)
 * wortgleich doppelt gepflegt. Die Referenzseite bekommt dieselbe Optik direkt
 * ueber die neue Klasse .ps-eyebrow.
 * --------------------------------------------------------------------------- */
.jobs-eyebrow,
.services-eyebrow,
.ps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffd7cf;
    margin-bottom: 14px;
}

.jobs-eyebrow::before,
.services-eyebrow::before,
.ps-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ps-accent), rgba(237, 32, 36, 0.2));
}

/* ---------------------------------------------------------------------------
 * Plaketten-Grundform (Badge): runde Pille mit Grossbuchstaben-Text. Groesse
 * und Farbe unterscheiden sich zwischen den Seiten (bleiben deshalb lokal
 * stehen); Form, Zentrierung und Mindesthoehe sind ueberall gleich.
 * --------------------------------------------------------------------------- */
.jobs-logo-badge,
.jobs-highlight-label,
.services-overview-badge,
.services-overview-meta,
.ps-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Karten-Grundform "primaer": die grosse dunkle Kachel mit rotem Schimmer oben
 * rechts, wie sie bei Jobs (Hero-Text, Info-Karten, Hinweis-Karte, Kontakt-
 * Karte) und bei Leistungen (Status-Panel, Hero-Text, Themen-Kacheln) x-fach
 * identisch vorkam. Die Referenzseite bekommt dieselbe Form ueber .ps-card.
 * --------------------------------------------------------------------------- */
.jobs-hero-copy,
.jobs-info-card,
.jobs-note-card,
.jobs-contact-card,
.services-status-panel,
.services-hero-copy,
.services-topic-card,
.ps-card {
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(10, 13, 18, 0.98), rgba(24, 30, 38, 0.95));
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* ---------------------------------------------------------------------------
 * Karten-Grundform "sanft": etwas kleinerer Radius, eigener (etwas hellerer)
 * Verlauf - bei Jobs fuer die beiden Bild-Highlight-Kacheln (deren Foto den
 * Hintergrund am Ende ohnehin ueberschreibt), bei Leistungen fuer die drei
 * Uebersichtskarten. Bewusst eine ZWEITE, eigene Form statt der obigen - beide
 * Kartenarten sind auf den bestehenden Seiten echt unterschiedlich benutzt.
 * --------------------------------------------------------------------------- */
.jobs-highlight-card,
.services-overview-card,
.ps-card-soft {
    border-radius: 24px;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Pillenfoermiger Knopf/Link: Grundform (Zentrierung, Innenabstand, Radius,
 * Schriftstaerke, Uebergang) ist bei Jobs und Leistungen wortgleich - nur die
 * Mindesthoehe unterscheidet sich (44px/42px) und bleibt deshalb je Seite
 * lokal stehen.
 * --------------------------------------------------------------------------- */
.jobs-primary-link,
.jobs-secondary-link,
.services-anchor-link,
.services-primary-link,
.services-secondary-link,
.services-back-top,
.ps-pill-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* ---------------------------------------------------------------------------
 * Schlagzeilen-Umbruch (ergaenzt am 22.09.2026, Fund auf "Über uns"): eine
 * lange Schlagzeile darf nur an Wortgrenzen umbrechen. "overflow-wrap: break-
 * word" oder "anywhere" duerfen BEIDE mitten im Wort trennen, sobald eine
 * Zeile sonst ueberlaufen wuerde - genau das passierte auf "Über uns"
 * ("Familienunternehm/en"). "overflow-wrap: normal" + "word-break: normal"
 * verbieten das; "hyphens: auto" erlaubt einem langen Wort stattdessen einen
 * Umbruch am Silbenende mit Trennstrich (wirkt dank "lang="de"" auf
 * <html> in index.html). Gilt fuer alle grossen Schlagzeilen der
 * Buehnen-Seiten.
 * --------------------------------------------------------------------------- */
.jobs-hero-copy h1,
.services-hero-copy h1,
.contact-hero-copy h1,
.cms-reference-stage-title,
.ps-headline {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}