/*
    Das Marken-Aussehen fuer alle oeffentlichen Seiten.

    Ausgangslage: layout-public.html laedt bewusst dieselbe backend.css wie der
    angemeldete Bereich, damit Karten, Kacheln und Knoepfe nicht auseinander
    laufen. Das ist richtig - nur sieht backend.css aus wie ein Verwaltungs-
    werkzeug: weisser Grund, graue Linien, blaue Knoepfe. Die Startseite bringt
    dagegen das Marken-Aussehen mit (Navy, Pink, Gelb, Unbounded). Wer von der
    Startseite auf "Teilnehmende Unternehmen" klickte, landete optisch in einem
    anderen Produkt.

    Der Hebel ist deshalb NICHT, jeden Baustein einzeln zu ueberschreiben.
    backend.css ist sauber auf Tokens gebaut (--surface, --line, --text,
    --accent, --radius), und m2b-karte.css und m2b-profil.css benutzen
    dieselben. Diese Datei belegt die Tokens innerhalb von .app--public neu -
    damit dreht sich das komplette Baukastensystem auf einmal mit, inklusive
    der beiden Seiten-Stylesheets, die hier gar nicht erwaehnt werden.

    Danach bleibt nur wenig Handarbeit: Schriften, die Kopfleiste und die
    Stellen, an denen eine reine Umfaerbung den Kontrast kaputt machen wuerde
    (Pink traegt keine weisse Schrift).

    Alles steht unter .app--public. backend/layout.html setzt nur .app, der
    angemeldete Bereich bleibt damit unberuehrt - wichtig, weil mehrere
    Vorlagen ueber ${shell} in beiden Rahmen laufen.

    Die Farbwerte sind dieselben wie in preview-2027.html. Sie stehen hier
    absichtlich ein zweites Mal: die Startseite ist die einzige Seite, die
    gerade nicht umgebaut wird, und sie war vor zwei Commits kaputt. Die
    Tokens zusammenzulegen ist ein eigener Schritt, damit ein Rueckschritt
    dort zuzuordnen bleibt.
*/

/* ------------------------------------------------------------------ *
 * Schriften. Dieselben self-hosted Dateien wie auf der Startseite -
 * keine Google-Fonts-Einbindung, damit keine IP-Adressen abfliessen.
 * ------------------------------------------------------------------ */
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/unbounded-v12-latin-700-6547c9c92dc8646744ad279b0aed737c.woff2') format('woff2');
}

@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/fonts/unbounded-v12-latin-900-a06b2acf0a0bcd441ff2aff80e383a2a.woff2') format('woff2');
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/outfit-v15-latin-regular-23191c444b9e40528bdfc989d29560ea.woff2') format('woff2');
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/outfit-v15-latin-600-778dd8bec372ecd5ecef5c36da616fc6.woff2') format('woff2');
}

/* ------------------------------------------------------------------ *
 * Die Tokens neu belegt.
 *
 * Die Flaechen sind durchscheinendes Weiss statt fester Farben: so
 * bleiben Kacheln auf Kacheln unterscheidbar, ohne dass fuer jede
 * Schachtelungstiefe ein eigener Farbwert noetig waere.
 * ------------------------------------------------------------------ */
.app--public {
    /* Marke - eigener Namensraum, damit nichts aus backend.css kollidiert. */
    --m2b-navy-deep: #071c45;
    --m2b-navy: #0d2542;
    --m2b-pink: #fc8de7;
    --m2b-yellow: #ffed00;
    --m2b-ink: #082c6e;
    --m2b-display: 'Unbounded', 'Arial Black', sans-serif;
    --m2b-body: 'Outfit', 'Segoe UI', sans-serif;
    --m2b-max: 1140px;

    /* Flaechen */
    --bg: var(--m2b-navy-deep);
    --surface: rgba(255, 255, 255, .05);
    --surface-2: rgba(255, 255, 255, .08);
    --surface-3: rgba(255, 255, 255, .04);

    /* Linien */
    --line: rgba(255, 255, 255, .14);
    --line-strong: rgba(255, 255, 255, .26);

    /* Text */
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, .74);
    --text-subtle: rgba(255, 255, 255, .56);
    /* Bleibt hell. --text-invert heisst in backend.css "Schrift auf dunkler
       Flaeche" (dort die Seitenleiste), nicht "umgekehrte Schrift". Auf die
       dunkle Tinte gedreht stand "Anmelden" navy auf navy. */
    --text-invert: #ffffff;

    /* Akzent - Pink statt Blau */
    --accent: var(--m2b-pink);
    --accent-hover: #ffa8ee;
    --accent-soft: rgba(252, 141, 231, .16);
    --accent-line: rgba(252, 141, 231, .45);

    /* Status. Die Backend-Werte sind fuer weissen Grund gemischt und
       waeren auf Navy nicht mehr zu lesen - hier die hellen Fassungen. */
    --ok: #7ff0b0;
    --ok-soft: rgba(127, 240, 176, .14);
    --ok-line: rgba(127, 240, 176, .42);
    --warn: #ffd76e;
    --warn-soft: rgba(255, 215, 110, .14);
    --warn-line: rgba(255, 215, 110, .42);
    --danger: #ffa3a3;
    --danger-hover: #ffbdbd;
    --danger-soft: rgba(255, 163, 163, .14);
    --danger-line: rgba(255, 163, 163, .42);

    /* Masse - die Marke ist runder als das Backend. */
    --radius: 12px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow: 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, .45);

    --font: var(--m2b-body);
}

/* ------------------------------------------------------------------ *
 * Grundflaeche
 * ------------------------------------------------------------------ */

/* Der Rahmen faerbt nur sich selbst. Beim Ueberscrollen blitzte sonst der
   helle Grund aus backend.css durch, weil <body> ausserhalb liegt. */
body:has(.app--public) {
    background: #071c45;
}

.app--public {
    background:
            radial-gradient(1200px 600px at 82% -8%, rgba(252, 141, 231, .14), transparent 60%),
            radial-gradient(900px 500px at 8% 14%, rgba(252, 141, 231, .07), transparent 60%),
            var(--m2b-navy-deep);
    color: var(--text);
    font-family: var(--m2b-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    min-height: 100dvh;
}

.app--public ::selection {
    background: var(--m2b-pink);
    color: var(--m2b-ink);
}

/* Ueberschriften in der Display-Schrift - das ist neben der Farbe das
   zweite, woran man die Marke erkennt. */
.app--public h1,
.app--public h2,
.app--public h3,
.app--public .card__title,
.app--public .stat__value {
    font-family: var(--m2b-display);
    letter-spacing: -.01em;
}

.app--public h1 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.75rem, 4vw, 2.9rem);
    line-height: 1.1;
}

.app--public h2 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.3rem, 2.8vw, 1.85rem);
    line-height: 1.15;
}

/*
    Ueberschriften, die Bausteine benennen, sind ebenfalls <h2> - der Name
    eines Betriebs, die Ueberschrift einer Filterkarte. Die Regel oben hat sie
    mitgenommen und sie in Versalien auf Abschnittsgroesse gebracht:
    "PIXELSCHNITZEL" passte nicht mehr in seine Kachel und brach mitten im
    Wort um. Sie behalten deshalb ihre eigene Groesse; gross und in Versalien
    ist der Seitentitel, nicht jede Kachel.
*/
.app--public .firm__name,
.app--public .firmakachel__name,
.app--public .card__title,
.app--public .join__title,
.app--public .infonext__title,
.app--public .blase__name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

/* Lange Firmennamen ohne Leerzeichen sollen umbrechen duerfen, statt die
   Kachel zu sprengen. */
.app--public .firm__name,
.app--public .firmakachel__name {
    overflow-wrap: anywhere;
}

/* Die Augenbraue ueber der Ueberschrift. */
.app--public .kicker {
    color: var(--m2b-pink);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .8rem;
    margin: 0;
}

.app--public .lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 62ch;
}

.app--public .lead strong {
    color: var(--text);
}

/* Der Sprungeinstieg liegt ausserhalb von .app--public. */
body:has(.app--public) .skip-link:focus {
    background: #ffed00;
    color: #082c6e;
    outline: 2px solid #fc8de7;
}

/* ------------------------------------------------------------------ *
 * Kopfleiste. Pink auf Navy-Schrift wie auf der Startseite - das war
 * der auffaelligste Bruch: dort eine pinke Leiste, hier eine weisse.
 * ------------------------------------------------------------------ */
.app--public .pubbar {
    background: var(--m2b-pink);
    border-bottom: none;
    box-shadow: 0 10px 30px rgba(7, 28, 69, .28);
    color: var(--m2b-ink);
}

.app--public .pubbar__brand img {
    /* Das Logo liegt in voller Aufloesung vor und waere sonst 157px hoch. */
    height: 34px;
    width: auto;
}

/*
    Nur die direkten Kinder. In der Leiste stehen ausser den Menuepunkten noch
    zwei weitere Sorten <a>: die Knoepfe "Mitmachen"/"Anmelden" in
    .pubbar__actions und die vier Eintraege im Klappmenue "Infos fuer …". Beide
    sitzen tiefer und bringen ihre eigenen Farben mit.

    Ohne den Kindselektor nimmt diese Regel sie mit - und zwar gewinnend, weil
    sie mit dem Elementtyp am Ende spezifischer ist als die Regeln der beiden.
    Das Ergebnis war zweimal dieselbe dunkle Tinte auf dunklem Grund: erst
    "Anmelden" auf der Navy-Pille, dann die Eintraege im Klappmenue.

    :not(.navcta) bleibt zusaetzlich stehen, damit ein Knopf auch dann nicht
    umgefaerbt wird, wenn er einmal direkt in der Leiste landet.
*/
.app--public .pubbar__nav > a:not(.navcta),
.app--public .pubbar__nav summary {
    color: var(--m2b-ink);
    font-weight: 600;
    font-size: .95rem;
    border-radius: 999px;
    padding: .4rem .8rem;
    text-decoration: none;
}

.app--public .pubbar__nav > a:not(.navcta):hover,
.app--public .pubbar__nav summary:hover {
    background: rgba(8, 44, 110, .12);
}

/* Die aktive Seite als gefuellte Pille - wie "Start" auf der Startseite.
   aria-current traegt die Information ohnehin, sie wird nur sichtbar. */
.app--public .pubbar__nav a[aria-current="page"] {
    background: var(--m2b-navy);
    color: #fff;
}

.app--public .navgroup__menu {
    background: var(--m2b-navy);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .35rem;
}

.app--public .navgroup__menu a {
    color: #fff;
    display: block;
}

.app--public .navgroup__menu a:hover {
    background: var(--accent-soft);
    color: var(--m2b-pink);
}

.app--public .pubbar__toggle {
    background: var(--m2b-navy);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--m2b-body);
    font-weight: 600;
}

.app--public .navcta {
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    padding: .45rem 1.05rem;
    text-decoration: none;
    white-space: nowrap;
}

.app--public .navcta--ghost {
    background: transparent;
    border: 1.5px solid rgba(8, 44, 110, .45);
    color: var(--m2b-ink);
}

.app--public .navcta--ghost:hover {
    background: rgba(8, 44, 110, .1);
}

.app--public .navcta--solid {
    background: var(--m2b-navy);
    border: 1.5px solid var(--m2b-navy);
    color: #fff;
}

.app--public .navcta--solid:hover {
    background: var(--m2b-navy-deep);
}

/* ------------------------------------------------------------------ *
 * Inhaltsbreite. Das Backend nutzt die volle Flaeche, eine Website
 * liest sich in einer Spalte besser - dieselbe Breite wie die Startseite.
 * ------------------------------------------------------------------ */
.app--public .content {
    max-width: var(--m2b-max);
    margin: 0 auto;
    padding: 2.75rem 1.25rem 4.5rem;
    width: 100%;
}

.app--public .page-head {
    margin-bottom: 2.25rem;
}

.app--public .page-head h1 {
    margin: .35rem 0 .75rem;
}

/* ------------------------------------------------------------------ *
 * Die Stellen, an denen eine reine Umfaerbung nicht reicht.
 *
 * backend.css setzt auf --accent weisse Schrift. Das ging bei Blau auf,
 * bei Pink nicht: #fff auf #fc8de7 liegt bei etwa 2:1 und ist damit
 * weder lesbar noch barrierefrei. Gefuellte Flaechen tragen deshalb die
 * dunkle Tinte, und der Hauptknopf wird gelb - so wie auf der Startseite.
 * ------------------------------------------------------------------ */
.app--public .btn {
    border-radius: 999px;
    font-family: var(--m2b-body);
    font-weight: 600;
}

.app--public .btn--primary {
    background: var(--m2b-yellow);
    border-color: var(--m2b-yellow);
    color: var(--m2b-ink);
}

.app--public .btn--primary:hover {
    background: #fff45c;
    border-color: #fff45c;
    color: var(--m2b-ink);
}

.app--public .btn--secondary,
.app--public .btn--ghost {
    background: transparent;
    border: 1.5px solid var(--accent-line);
    color: var(--m2b-pink);
}

.app--public .btn--secondary:hover,
.app--public .btn--ghost:hover {
    background: var(--accent-soft);
    color: var(--m2b-pink);
}

/* Der Knopf in der Sprechblase auf der Karte - dieselbe Rechnung. */
.app--public .blase__link {
    background: var(--m2b-yellow);
    color: var(--m2b-ink) !important;
}

.app--public .blase__link:hover {
    background: #fff45c;
}

/* Die Sprechblase selbst zeichnet Leaflet auf Weiss. Sie bleibt hell -
   sie sitzt auf der hellen Karte, nicht auf dem Navy der Seite. */
.app--public .leaflet-popup-content-wrapper,
.app--public .leaflet-popup-tip {
    background: #fff;
    color: #0f172a;
}

.app--public .leaflet-popup-content .blase__name {
    color: #0f172a;
}

.app--public .leaflet-popup-content .blase__standort,
.app--public .leaflet-popup-content .blase__adresse,
.app--public .leaflet-popup-content .blase__plaetze {
    color: #475569;
}

.app--public .leaflet-popup-content .blase__angebote {
    color: #15803d;
}

/* Die Kartenflaeche bleibt hell; nur der Rahmen darum gehoert zur Marke. */
.app--public #karte {
    background: #e8eef6;
}

.app--public .stat__label {
    color: var(--m2b-pink);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.app--public .stat__value {
    font-weight: 900;
}

.app--public .stat--accent .stat__value {
    color: var(--m2b-yellow);
}

/* ------------------------------------------------------------------ *
 * Info-Seiten
 *
 * Die vier Infoseiten sind reiner Fliesstext. Ihr Inhalt wird im Backend
 * gepflegt und kommt als Markup aus der Datenbank - deshalb gestaltet
 * .prose ueber den Elementtyp und nicht ueber Klassen, die ein Editor
 * nie vergeben wuerde.
 * ------------------------------------------------------------------ */
.app--public .infohero {
    border-bottom: 1px solid var(--line);
    margin-bottom: 2.25rem;
    padding-bottom: 1.75rem;
}

.app--public .infohero h1 {
    margin: .35rem 0 .75rem;
}

.app--public .infohero__datum {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin: 0;
}

.app--public .infohero__datum strong {
    background: var(--m2b-yellow);
    color: var(--m2b-ink);
    border-radius: 6px;
    padding: .05em .4em;
    font-weight: 700;
    white-space: nowrap;
}

.app--public .prose {
    max-width: 72ch;
}

.app--public .prose > * + * {
    margin-top: 1.1rem;
}

.app--public .prose h2 {
    margin-top: 2.5rem;
    margin-bottom: 0;
}

.app--public .prose h3 {
    font-family: var(--m2b-display);
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 1.9rem;
    margin-bottom: 0;
    text-transform: none;
}

.app--public .prose p,
.app--public .prose li {
    color: var(--text-muted);
}

.app--public .prose strong {
    color: var(--text);
}

/* :not(.btn) aus demselben Grund wie in der Kopfleiste: ein Knopf im
   Fliesstext ist auch ein <a>, und diese Regel gewinnt mit ihrem
   Elementtyp gegen .app--public .btn--primary. Der Knopf "Jetzt
   registrieren" stand dadurch pink auf gelb. */
.app--public .prose a:not(.btn) {
    color: var(--m2b-pink);
    text-underline-offset: .2em;
}

.app--public .prose ol {
    padding-left: 1.25rem;
}

.app--public .prose li + li {
    margin-top: .45rem;
}

/* Eigene Punkte statt der Browser-Marker: die sind auf Navy kaum zu
   sehen und lassen sich nicht einfaerben. */
.app--public .prose ul {
    list-style: none;
    padding-left: 0;
}

.app--public .prose ul > li {
    padding-left: 1.6rem;
    position: relative;
}

.app--public .prose ul > li::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: .62em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--m2b-pink);
}

.app--public .prose blockquote {
    border-left: 3px solid var(--accent-line);
    margin-left: 0;
    padding-left: 1rem;
    color: var(--text-muted);
}

.app--public .prose table {
    border-collapse: collapse;
    width: 100%;
}

.app--public .prose th,
.app--public .prose td {
    border: 1px solid var(--line);
    padding: .55rem .7rem;
    text-align: left;
}

.app--public .prose th {
    background: var(--surface-2);
    color: var(--text);
}

/* Breite Tabellen sollen die Seite nicht seitlich schieben. */
.app--public .prose__scroll {
    overflow-x: auto;
}

/* Eingebettete Videos. Feste Hoehen (das Aftermovie stand auf 700px) sind
   auf dem Handy eine Bildschirmlaenge Leere neben einem winzigen Bild.

   Das <iframe> wird direkt angesprochen und nicht nur ueber einen Rahmen
   darum: Der Text kommt aus dem Backend, und ein Editor vergibt keine
   Hilfsklassen - dort steht das Video nackt zwischen zwei Absaetzen. */
.app--public .prose__video,
.app--public .prose iframe {
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-lg);
    display: block;
    overflow: hidden;
    width: 100%;
    background: var(--surface-2);
}

.app--public .prose__video iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

/* Die Weiterleitung auf die uebrigen Infoseiten am Fuss. */
.app--public .infonext {
    border-top: 1px solid var(--line);
    margin-top: 3rem;
    padding-top: 1.75rem;
}

.app--public .infonext__title {
    font-family: var(--m2b-display);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 .9rem;
    text-transform: none;
}

.app--public .infonext__links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

/* ------------------------------------------------------------------ *
 * Ausnahme: das Unternehmensprofil
 *
 * m2b-profil.css bringt in .profilseite ein vollstaendiges eigenes
 * Aussehen mit - dieselbe Marke (Pink, Navy, Gelb, Unbounded), aber auf
 * hellem Grund: weisse Kartenbloecke, eine navyblaue Kopfzone, eine
 * Reiterleiste auf --bg. Es ist in sich stimmig und war nie das, was
 * hier veraltet aussah.
 *
 * Auf Navy gedreht ging genau das kaputt, was der helle Grund getragen
 * hat: Die Reiterleiste (Ueber uns / Berufe / Programm) stand grau auf
 * Navy, und die Ueberschrift im pinken Block stand navy auf Navy - beides
 * unter 2:1 und praktisch nicht zu lesen.
 *
 * Die Seite bekommt ihren hellen Grund deshalb zurueck. Die Leiste und
 * die Fusszeile drumherum bleiben im Marken-Aussehen, damit der Weg von
 * der Liste ins Profil trotzdem nicht abreisst.
 * ------------------------------------------------------------------ */
body:has(.profilseite) {
    background: #f1f5f9;
}

.app--public:has(.profilseite) {
    /* Zurueck auf die Werte aus backend.css. */
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --text: #0f172a;
    --text-muted: #475569;
    --text-subtle: #64748b;
    --text-invert: #f8fafc;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-soft: #eff6ff;
    --accent-line: #bfdbfe;
    --ok: #15803d;
    --ok-soft: #f0fdf4;
    --ok-line: #bbf7d0;
    --warn: #b45309;
    --warn-soft: #fffbeb;
    --warn-line: #fde68a;
    --danger: #b91c1c;
    --danger-hover: #991b1b;
    --danger-soft: #fef2f2;
    --danger-line: #fecaca;

    background: #f1f5f9;
    color: var(--text);
}

/* Die Fusszeile steht hier auf hellem Grund und braucht daher die dunkle
   Fassung, sonst liefe helle Schrift auf hellem Grund. */
.app--public:has(.profilseite) .pubfoot {
    background: var(--m2b-navy-deep);
    color: rgba(255, 255, 255, .56);
}

/* ------------------------------------------------------------------ *
 * Fusszeile
 * ------------------------------------------------------------------ */
.app--public .pubfoot {
    background: rgba(7, 28, 69, .75);
    border-top: 1px solid var(--line);
    color: var(--text-subtle);
}

.app--public .pubfoot__links a {
    color: var(--m2b-pink);
    text-decoration: none;
}

.app--public .pubfoot__links a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Schmale Bildschirme. Dort klappt die Navigation als Schublade auf -
 * auf Navy, weil sie dann ueber dem Inhalt liegt und nicht mehr in der
 * pinken Leiste sitzt.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .app--public .pubbar__nav {
        background: var(--m2b-navy);
    }

    .app--public .pubbar__nav > a:not(.navcta),
    .app--public .pubbar__nav summary {
        color: #fff;
    }

    .app--public .pubbar__nav > a:not(.navcta):hover,
    .app--public .pubbar__nav summary:hover {
        background: var(--accent-soft);
    }

    .app--public .navcta--ghost {
        border-color: var(--accent-line);
        color: var(--m2b-pink);
    }

    .app--public .navcta--solid {
        background: var(--m2b-yellow);
        border-color: var(--m2b-yellow);
        color: var(--m2b-ink);
    }

    .app--public .content {
        padding: 2rem 1rem 3.5rem;
    }
}