/* ============================================================
   Move2Beruf – öffentliches Unternehmensprofil (/unternehmen/{slug})

   Wer diese Seite liest, ist 14 bis 16 und entscheidet in wenigen
   Sekunden, ob sich der Weg zu diesem Betrieb lohnt. Die Seite stand
   bisher im Backend-Baukasten: graue Karten, Beschreibungslisten,
   15px Schiefer auf Weiß. Sauber gebaut und für eine Verwaltung
   richtig – für eine Schülerin, die auf dem Handy zwischen 40
   Betrieben sucht, eine Wand aus Text.

   Was diese Datei anders macht:
   - die Markenfarben der Website (Pink auf Navy) statt Verwaltungsgrau,
   - eine Kopfzone, die Name, Ort und "was kann ich hier werden" sofort
     zeigt, statt sie über vier Karten zu verteilen,
   - Ausbildungsberufe und Zeitfenster als große Flächen zum Antippen
     statt als Aufzählungspunkte,
   - alles ab 44px Zielgröße, weil die Seite auf dem Handy gelesen wird.

   Sie gilt nur innerhalb von .profilseite. Dieselbe Vorlage steckt in
   der Vorschau im Backend, und dort darf nichts davon auf die Seiten
   ringsum abfärben.

   Schriften self-hosted (kein fremder Server), dieselben wie auf der
   Startseite – die beiden Seiten gehören sichtbar zusammen.
   ============================================================ */

@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');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/outfit-v15-latin-800-900f0bbe1debca0dad4c7cadca56b83f.woff2') format('woff2');
}

.profilseite {
    --p-pink:      #fc8de7;
    --p-pink-soft: rgba(252, 141, 231, .16);
    --p-navy:      #082c6e;
    --p-navy-deep: #071c45;
    --p-yellow:    #ffed00;
    --p-paper:     #ffffff;
    --p-ink:       #0f172a;
    --p-muted:     #475569;
    --p-line:      #e2e8f0;
    --p-ok:        #15803d;
    --p-ok-soft:   #f0fdf4;
    --p-warn:      #b45309;

    --p-display: 'Unbounded', 'Arial Black', sans-serif;
    --p-body: 'Outfit', system-ui, 'Segoe UI', sans-serif;

    --p-r:  14px;
    --p-r2: 22px;

    font-family: var(--p-body);
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--p-ink);
    /* Die Textspalte darf nicht über die ganze Breite laufen – auf einem
       27-Zoll-Monitor wären das 180 Zeichen je Zeile. */
    max-width: 1100px;
    margin: 0 auto;
}

.profilseite :focus-visible { outline: 3px solid var(--p-navy); outline-offset: 3px; }

/* display:inline-flex an .pbtn und display:flex an .pberuf schlagen das
   hidden-Attribut. Ohne diese Regel steht der eingeklappte "Alle Berufe
   anzeigen"-Knopf als leere Pille auf der Seite. */
.profilseite [hidden] { display: none !important; }

/* ============================================================
   Kopfzone
   ============================================================ */
.phero {
    position: relative;
    overflow: hidden;
    border-radius: var(--p-r2);
    background: var(--p-navy-deep);
    color: #fff;
    padding: clamp(1.4rem, 4vw, 2.6rem);
    margin-bottom: 1.1rem;
    isolation: isolate;
}

/* Ein Bild aus dem Betrieb als Hintergrund, stark abgedunkelt: es soll
   Atmosphäre geben und nicht mit dem Namen um Aufmerksamkeit ringen.
   Ohne Bild bleibt das Navy stehen. */
.phero__grund {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: blur(2px);
    transform: scale(1.06);
    opacity: .32;
}
.phero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 88% -10%, var(--p-pink-soft), transparent 60%),
        linear-gradient(180deg, rgba(7, 28, 69, .55), rgba(7, 28, 69, .92));
}

.phero__kopf {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.phero__logo {
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 20px;
    background: #fff;
    display: grid;
    place-items: center;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.phero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.phero__logo--leer { color: var(--p-navy); }

.phero__wer { min-width: min(100%, 260px); flex: 1 1 320px; }

.phero h1 {
    font-family: var(--p-display);
    font-weight: 900;
    font-size: clamp(1.65rem, 5.5vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -.015em;
    margin: 0;
    /* Lange Firmennamen ohne Leerzeichen sprengen sonst die Kachel. */
    overflow-wrap: anywhere;
}

.phero__ort {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0 0;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}
.phero__ort a { color: var(--p-pink); }

/* Die Angebote als erstes Signal: "hier gibt es eine Ausbildung" ist die
   Antwort auf die Frage, mit der die meisten hier landen. */
.pangebote {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .9rem 0 0;
    padding: 0;
}
.pangebote li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--p-pink);
    color: var(--p-navy);
    font-weight: 800;
    font-size: .88rem;
    padding: .35rem .85rem;
    border-radius: 999px;
}

.phero__tun {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.2rem;
}

/* Eigene Knöpfe statt .btn: die stammen aus dem Verwaltungsbaukasten und
   sind 32px hoch. Hier wird mit dem Daumen getippt. */
.pbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    padding: .6rem 1.35rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: 800 1rem/1.2 var(--p-body);
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.pbtn:active { transform: translateY(1px); }
.pbtn--pink { background: var(--p-pink); color: var(--p-navy); }
.pbtn--pink:hover { filter: brightness(1.06); color: var(--p-navy); }
.pbtn--hell { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .45); }
.pbtn--hell:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.pbtn--navy { background: var(--p-navy); color: #fff; }
.pbtn--navy:hover { filter: brightness(1.25); color: #fff; }
.pbtn--rand { border-color: var(--p-navy); color: var(--p-navy); background: transparent; }
.pbtn--rand:hover { background: var(--p-pink-soft); color: var(--p-navy); }
.pbtn--klein { min-height: 40px; padding: .4rem 1rem; font-size: .9rem; }
.pbtn[disabled], .pbtn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ============================================================
   Kennzahlen unter der Kopfzone
   ============================================================ */
.pfakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: .7rem;
    margin-bottom: 1.1rem;
}
.pfakt {
    background: #fff;
    border: 2px solid var(--p-line);
    border-radius: var(--p-r);
    padding: .8rem .9rem;
}
.pfakt__zahl {
    font-family: var(--p-display);
    font-weight: 900;
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--p-navy);
}
.pfakt__wort { font-size: .85rem; font-weight: 600; color: var(--p-muted); }
.pfakt--frei { border-color: var(--p-ok); background: var(--p-ok-soft); }
.pfakt--frei .pfakt__zahl { color: var(--p-ok); }

/* ============================================================
   Sprungleiste
   ============================================================ */
/* Klebt unter der Kopfleiste der Website und sagt jederzeit, wo man ist.
   Auf dem Handy waagerecht scrollbar statt umbrechend – zwei Zeilen
   Sprungmarken kosten den halben Bildschirm. */
.pnav {
    position: sticky;
    /* Nicht 0: darüber klebt bereits die Kopfzeile der Website (.pubbar, rund
       58px) beziehungsweise die des Backends (.topbar, exakt --topbar-h). Beide
       liegen auf z-index 30 und würden die Sprungleiste beim Scrollen einfach
       verdecken – sie wäre unterhalb des Hero nicht mehr zu sehen.
       .pblock bringt mit scroll-margin-top bereits den passenden Abstand mit,
       damit ein Sprungziel nicht unter dieser Leiste landet. */
    top: 3.6rem;
    z-index: 20;
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .6rem 0;
    margin-bottom: 1.1rem;
    background: var(--bg, #f1f5f9);
    border-bottom: 2px solid var(--p-line);
}
.pnav::-webkit-scrollbar { display: none; }
.pnav a {
    flex: none;
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    color: var(--p-muted);
    padding: .45rem .9rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pnav a:hover { background: var(--p-pink-soft); color: var(--p-navy); }
.pnav a.is-hier { background: var(--p-navy); color: #fff; }
/* Im Backend-Rahmen ist die Kopfleiste exakt --topbar-h hoch. Die Vorschau
   zeigt dieselbe Seite dort, und 1,6px Versatz wären eine sichtbare Lücke,
   durch die der Inhalt beim Scrollen durchläuft. */
.app:not(.app--public) .pnav { top: var(--topbar-h); }

/* ============================================================
   Abschnitte
   ============================================================ */
.pblock {
    background: #fff;
    border: 2px solid var(--p-line);
    border-radius: var(--p-r2);
    padding: clamp(1.1rem, 3vw, 1.8rem);
    margin-bottom: 1.1rem;
    /* Der Anker darf nicht unter der klebenden Sprungleiste landen. */
    scroll-margin-top: 4.5rem;
}
.pblock--pink { background: var(--p-pink-soft); border-color: transparent; }
.pblock--navy { background: var(--p-navy-deep); border-color: transparent; color: #fff; }

.pblock h2 {
    font-family: var(--p-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 3.4vw, 1.55rem);
    line-height: 1.2;
    margin: 0 0 .2rem;
    color: var(--p-navy);
}
.pblock--navy h2 { color: #fff; }
.pblock__unter {
    margin: 0 0 1rem;
    color: var(--p-muted);
    font-size: .95rem;
}
.pblock--navy .pblock__unter { color: rgba(255, 255, 255, .75); }
.pblock h3 {
    font-family: var(--p-display);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
    color: var(--p-navy);
}

.ptext {
    margin: 0;
    white-space: pre-line;
    max-width: 62ch;
    font-size: 1.05rem;
}

/* ============================================================
   Ausbildungsberufe
   ============================================================ */
/* Die wichtigste Liste der Seite. Als <li> mit Punkt davor ging sie
   zwischen den übrigen Karten unter; als Fläche mit eigener Farbe ist
   sie das, was man beim Überfliegen zuerst sieht. */
.pberufe {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
    gap: .55rem;
}
.pberuf {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 2px solid var(--p-navy);
    border-radius: var(--p-r);
    padding: .7rem .85rem;
    font-weight: 700;
    line-height: 1.25;
    /* "Fachinformatiker:in Anwendungsentwicklung" ist laenger als die Kachel
       breit ist; ohne das steht die Haelfte davon ausserhalb. */
    overflow-wrap: anywhere;
    min-width: 0;
}
.pberuf__zeichen {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--p-pink);
    color: var(--p-navy);
    display: grid;
    place-items: center;
    font-family: var(--p-display);
    font-weight: 900;
    font-size: .85rem;
}
.pberufe li[hidden] { display: none; }

.pmehr { margin-top: .8rem; }

.ptags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ptag {
    background: #fff;
    border: 2px solid var(--p-line);
    border-radius: 999px;
    padding: .28rem .8rem;
    font-weight: 600;
    font-size: .9rem;
}
.ptag--pink { background: var(--p-pink); border-color: var(--p-pink); color: var(--p-navy); font-weight: 700; }

/* ============================================================
   Standorte und Zeitfenster
   ============================================================ */
.pstandort + .pstandort {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 2px dashed var(--p-line);
}
.pstandort__kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .8rem;
    flex-wrap: wrap;
}
.pstandort__adresse { margin: .15rem 0 0; color: var(--p-muted); }

.pzeiten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: .6rem;
    margin-top: 1rem;
}
.pzeit {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border: 2px solid var(--p-line);
    border-radius: var(--p-r);
    padding: .8rem;
    background: #fff;
}
.pzeit--frei { border-color: var(--p-ok); background: var(--p-ok-soft); }
.pzeit--voll { border-color: #fecaca; background: #fef2f2; }
.pzeit--zu { opacity: .6; }
.pzeit--meins { border-color: var(--p-navy); background: var(--p-pink-soft); }

.pzeit__uhr {
    font-family: var(--p-display);
    font-weight: 700;
    font-size: 1.02rem;
    margin: 0;
    color: var(--p-navy);
}
.pzeit__zusatz { margin: 0; font-size: .8rem; font-weight: 700; color: var(--p-warn); }
.pzeit__stand { margin: 0; font-size: .88rem; color: var(--p-muted); }
.pzeit__stand strong { color: var(--p-ok); font-size: 1rem; }

/* Wie voll das Fenster schon ist – eine Zahl allein ("3 von 12 frei")
   verlangt Kopfrechnen, der Balken nicht. */
.pbalken {
    height: 7px;
    border-radius: 99px;
    background: rgba(8, 44, 110, .12);
    overflow: hidden;
}
.pbalken__fuellung { height: 100%; background: var(--p-ok); border-radius: 99px; }
.pzeit--voll .pbalken__fuellung { background: #b91c1c; }

.pzeit .pbtn { width: 100%; margin-top: .15rem; }
.pzeit__hinweis { margin: 0; font-size: .8rem; color: var(--p-muted); }

.phinweis {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    background: #fff;
    border: 2px solid var(--p-line);
    border-left-width: 6px;
    border-left-color: var(--p-pink);
    border-radius: var(--p-r);
    padding: .85rem 1rem;
    margin-top: 1rem;
}
.phinweis p { margin: 0; }
.phinweis--warn { border-left-color: var(--p-warn); }

.pnotiz { white-space: pre-line; margin: .5rem 0 0; }

/* ============================================================
   Karte
   ============================================================ */
.pkarte {
    height: 260px;
    border-radius: var(--p-r);
    border: 2px solid var(--p-line);
    margin-top: 1rem;
    background: #eef2f7;
    z-index: 0;
}
.pnadel__kopf {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--p-navy);
    border: 3px solid var(--p-pink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* ============================================================
   Bilder
   ============================================================ */
/* Ein großes Bild, der Rest daneben: eine Reihe gleich großer
   Briefmarken sagt weniger als ein Bild, auf dem man etwas erkennt. */
.pgalerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
    gap: .5rem;
}
.pgalerie__gross { grid-column: span 2; grid-row: span 2; }

.pbild {
    display: block;
    padding: 0;
    border: 0;
    background: var(--p-line);
    border-radius: var(--p-r);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    width: 100%;
}
.pbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.pbild:hover img { transform: scale(1.05); }

.pgalerie--klein { grid-template-columns: repeat(auto-fill, minmax(90px, 110px)); }
.pgalerie--klein .pbild { aspect-ratio: 1; border-radius: 999px; }

/* ---- Bildansicht ---- */
/* <dialog> statt eines nachgebauten Overlays: Fokusfalle, Escape und der
   inerte Hintergrund kommen vom Browser. */
.plupe {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 96vw;
    max-height: 96vh;
    overflow: visible;
}
.plupe::backdrop { background: rgba(7, 28, 69, .88); }
.plupe img {
    display: block;
    max-width: 96vw;
    max-height: 84vh;
    border-radius: var(--p-r);
    background: #000;
}
.plupe__leiste {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-top: .7rem;
}
.plupe__knopf {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}
.plupe__knopf:hover { background: rgba(255, 255, 255, .28); }
.plupe__zaehler { color: #fff; font-weight: 700; min-width: 4ch; text-align: center; }

/* ============================================================
   Kontakt
   ============================================================ */
.pkontakt { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: flex-start; }
.pkontakt__wer { flex: 1 1 220px; }
.pkontakt__name { font-family: var(--p-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 .6rem; }
.pkontakt__wege { display: flex; flex-direction: column; gap: .5rem; }
.pkontakt__weg {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 46px;
    padding: .5rem .9rem;
    border: 2px solid var(--p-line);
    border-radius: var(--p-r);
    text-decoration: none;
    font-weight: 700;
    color: var(--p-navy);
    overflow-wrap: anywhere;
}
.pkontakt__weg:hover { border-color: var(--p-navy); background: var(--p-pink-soft); color: var(--p-navy); }
.pkontakt__weg small { display: block; font-weight: 600; color: var(--p-muted); font-size: .75rem; }

/* ============================================================
   Website und Netzwerke
   ============================================================ */
.plinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: .5rem;
}
.plink {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: .55rem .9rem;
    border-radius: var(--p-r);
    text-decoration: none;
    font-weight: 700;
    background: rgba(255, 255, 255, .1);
    border: 2px solid rgba(255, 255, 255, .22);
    color: #fff;
}
.plink:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.plink svg { flex: none; }

/* ============================================================
   Abschluss
   ============================================================ */
.pende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--p-pink);
    color: var(--p-navy);
    border-radius: var(--p-r2);
    padding: clamp(1.1rem, 3vw, 1.8rem);
}
.pende h2 {
    font-family: var(--p-display);
    font-weight: 900;
    font-size: clamp(1.15rem, 3.4vw, 1.5rem);
    margin: 0;
}
.pende p { margin: .2rem 0 0; font-weight: 600; }
.pende__tun { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Der Weg zurück, oben auf der Seite. */
.pzurueck {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    font-weight: 700;
    color: var(--p-muted);
    margin-bottom: .7rem;
}
.pzurueck:hover { color: var(--p-navy); }

/* Der Entwurfshinweis für Betrieb und Organisationsteam. Bewusst gelb und
   quer über die Seite: er darf nicht wie ein Teil des Profils aussehen. */
.pentwurf {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: var(--p-yellow);
    color: var(--p-navy);
    border-radius: var(--p-r);
    padding: .9rem 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.pentwurf p { margin: 0; }

/* ============================================================
   Größere Bildschirme
   ============================================================ */
@media (min-width: 720px) {
    .phero__logo { width: 108px; height: 108px; }
    .pkarte { height: 320px; }
    .p2spalten {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 1.1rem;
        align-items: start;
    }
    .p2spalten > .pblock { margin-bottom: 0; }
    .p2spalten { margin-bottom: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .profilseite *, .plupe * { transition: none !important; animation: none !important; }
    .pbild:hover img { transform: none; }
}

@media print {
    .pnav, .phero__tun, .pende, .plupe, .pzeit .pbtn { display: none !important; }
    .phero { background: none; color: #000; border: 1px solid #999; }
    .phero__grund, .phero::after { display: none; }
    .phero h1, .phero__ort { color: #000; }
    .pblock { border: 1px solid #999; break-inside: avoid; }
}