/* =============================================================================
   Cyrcle Region Map – Region-Unterseite (Phase 2)
   ============================================================================= */

.crm-region-page {
    --crm-purple:     #560293;
    --crm-border:     #E5E7EB;
    --crm-text:       #1F2937;
    --crm-text-muted: #6B7280;
    --crm-gray:       #F8F8F8;
    --crm-heading:    #000000;
    /* Kampagnenschrift; das Theme lädt sie, hier wird sie nur referenziert. */
    --crm-font: 'SpaceGrotesk', 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Fließtext: 24px am Desktop, 16px auf dem Telefon, dazwischen gleitend. */
    --crm-body-size: clamp(16px, 1.15vw + 12px, 24px);
    /* Einheitliche Abstände zwischen den Abschnitten. */
    --crm-gap: clamp(48px, 7vw, 96px);
    /* Abstandsschema der Seite: eine Leiter in Vielfachen von 4 px. Jeder
       Abstand auf der Regionsseite stammt aus dieser Leiter, damit die Seite
       einen gleichmäßigen Rhythmus hat statt gewachsener Einzelwerte.
       --crm-gap bleibt daneben der große Abstand zwischen den Abschnitten. */
    --crm-space-xs:   4px;
    --crm-space-sm:   8px;
    --crm-space-md:  12px;
    --crm-space-lg:  16px;
    --crm-space-xl:  20px;
    --crm-space-2xl: 28px;
    --crm-space-3xl: 40px;
    /* Breite Inhaltsspalte für Kopfbereich und Fließtext. */
    --crm-content: 1020px;
    font-family: var(--crm-font) !important;
    font-size: var(--crm-body-size);
    color: var(--crm-text);
    /* Volle Breite, damit das Bild über die ganze Fläche laufen kann.
       Begrenzt wird erst innen (hero-inner, body). */
    width: 100%;
    max-width: 100%;
    margin: 0;
    line-height: 1.55;
}

/* Inhaltsspalte: zentriert auf der vollflächigen Seite. Beide Container
   sind exakt gleich breit und teilen denselben Seitenabstand, damit die
   Textkanten von Kopfbereich und Fließtext übereinanderliegen. */
.crm-rp-hero-inner,
.crm-rp-body,
.crm-rp-crumb {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--crm-content);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 40px);
}

/* Alle Maße als Außenmaße rechnen – sonst schlagen Innenabstände auf die
   Breite durch (analog zur Karte in map.css). */
.crm-region-page,
.crm-region-page *,
.crm-region-page *::before,
.crm-region-page *::after {
    box-sizing: border-box;
}

/* Kampagnenschrift auf der gesamten Seite erzwingen. Themes setzen ihre
   Schrift oft mit hoher Spezifität auf einzelne Elemente – deshalb
   !important, sonst greift sie nur stellenweise. */
.crm-region-page,
.crm-region-page * {
    font-family: var(--crm-font) !important;
}

/* Überschriften: schwarz, halbfett, Kampagnenschrift. Gilt für alle sechs
   Ebenen und schlägt jede Theme-Vorgabe. */
.crm-region-page h1,
.crm-region-page h2,
.crm-region-page h3,
.crm-region-page h4,
.crm-region-page h5,
.crm-region-page h6 {
    font-family: var(--crm-font) !important;
    font-weight: 600 !important;
    color: var(--crm-heading);
}

/* Ausnahme Kopfbereich: dort liegt die Überschrift auf der Bedarfsfarbe und
   erbt die automatisch kontrastgeprüfte Textfarbe (weiß bzw. Dunkeltext). */
.crm-region-page .crm-rp-hero h1,
.crm-region-page .crm-rp-hero h2,
.crm-region-page .crm-rp-hero .crm-rp-title {
    color: inherit;
}

/* Hervorhebungen im Fließtext ebenfalls auf 600 begrenzen. */
.crm-region-page strong,
.crm-region-page b {
    font-weight: 600 !important;
}

/* Fließtext erbt Größe und Schrift. */
.crm-region-page p,
.crm-region-page li,
.crm-region-page dd,
.crm-region-page dt {
    font-family: var(--crm-font) !important;
    font-size: inherit;
}

/* Alle Schaltflächen und Chips einheitlich. */
.crm-region-page .crm-rp-apply,
.crm-region-page .crm-rp-chip,
.crm-region-page .crm-rp-related-item,
.crm-region-page .crm-rp-zuschlag,
.crm-region-page .crm-info-btn,
.crm-region-page button,
.crm-region-page .button {
    border-width: 0;
    border-radius: 30px;
    padding: 10px 20px;
    font-family: var(--crm-font) !important;
}

/* ---- Hero ---- */
.crm-rp-hero {
    position: relative;   /* Bezug für den Zuschlag-Hinweis über dem Bild */
    overflow: hidden;
    margin: 0 0 var(--crm-gap);
}

.crm-rp-hero-img {
    position: relative;
}

/* Kopfbox unten auf dem Bild, bündig zur Inhaltsspalte. Der Rahmen ist nur
   das Positionsraster – die weiße Fläche ist die Box darin, damit sie sich
   an ihren Inhalt anpasst statt über die volle Spalte zu laufen. */
.crm-rp-hero-headline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(16px, 2.5vw, 32px);
    box-sizing: border-box;
    width: 100%;
    max-width: var(--crm-content);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 40px);
    /* Klicks laufen neben der Box durch aufs Bild. */
    pointer-events: none;
}

.crm-region-page .crm-rp-hero-box {
    display: inline-block;
    /* Schmale Box: das Bild soll daneben sichtbar bleiben. */
    max-width: 48%;
    padding: 20px;
    background: #fff;
    color: var(--crm-heading);
    pointer-events: auto;
}

/* Einschweben von links.
   Der Startzustand hängt an der Markierung, die region-hero.js im <head>
   setzt. Ohne JavaScript wird sie nie gesetzt – dann steht die Box einfach
   sofort da, statt unsichtbar zu bleiben.
   Losgelassen wird erst, wenn der Elementor-Seitenübergang durch ist; sonst
   liefe die Bewegung hinter dessen weißer Fläche ab.
   Der Versatz erzeugt kein Querscrollen, weil .crm-rp-hero abschneidet. */
.crm-rp-anim .crm-region-page .crm-rp-hero-box {
    opacity: 0;
    transform: translateX(-48px);
}

.crm-rp-anim .crm-region-page.crm-rp-ready .crm-rp-hero-box {
    animation: crm-rp-hero-box-in 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes crm-rp-hero-box-in {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: none; }
}

/* Wer Bewegung reduziert haben will, bekommt die Box sofort und ruhig.
   Auch der Startzustand muss hier zurück – region-hero.js schaltet unter
   dieser Einstellung zwar gar nicht erst scharf, aber die Regel darf nicht
   davon abhängen. */
@media (prefers-reduced-motion: reduce) {
    .crm-region-page .crm-rp-hero-box,
    .crm-rp-anim .crm-region-page .crm-rp-hero-box,
    .crm-rp-anim .crm-region-page.crm-rp-ready .crm-rp-hero-box {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Auf schmaleren Schirmen bleiben 45 % nicht lesbar – die Überschrift bräche
   dort in Einzelwörter um. Die Box wächst deshalb stufenweise mit. */
@media (max-width: 1023px) {
    .crm-region-page .crm-rp-hero-box { max-width: 70%; }
}

.crm-region-page .crm-rp-hero-headline .crm-rp-title {
    margin: 0;
    color: var(--crm-heading);
}

/* Brotkrumen stehen im Textblock des Kopfbereichs. Der Block bringt seine
   Spaltenbreite und den Seitenabstand schon mit – die Brotkrumen setzen nur
   ihren Abstand nach unten. */
.crm-region-page .crm-rp-crumb-inner {
    width: auto;
    max-width: none;
    padding-inline: 0;
    margin-block: 0 14px;
    /* Untergrenze: 0.6em wären auf dem Telefon knapp 10px – auf der
       Bedarfsfarbe ist das nicht mehr sicher lesbar. */
    font-size: max(12px, 0.6em);
}

/* Auf der Bedarfsfarbe gilt die kontrastgeprüfte Textfarbe des Kopfbereichs,
   nicht das Grau der Fließtextvariante. Bewusst ohne Abdunklung per opacity:
   die Brotkrumen sind der kleinste Text im Kopfbereich – jede Abschwächung
   ginge direkt vom ohnehin knappen Kontrast auf der Bedarfsfarbe ab. */
.crm-region-page .crm-rp-crumb.crm-rp-crumb-inner,
.crm-region-page .crm-rp-crumb.crm-rp-crumb-inner a {
    color: inherit;
}

.crm-region-page .crm-rp-crumb.crm-rp-crumb-inner a:hover {
    color: inherit;
    text-decoration: underline;
}

.crm-rp-hero-img img {
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

.crm-rp-hero-inner {
    padding-block: clamp(24px, 3vw, 40px);
}

.crm-rp-level {
    display: inline-block;
    font-size: 0.62em;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
    opacity: 0.92;
}

.crm-rp-title {
    font-size: clamp(28px, 3vw + 16px, 48px);
    font-weight: 600 !important;
    margin: var(--crm-space-md) 0 var(--crm-space-sm);
    line-height: 1.12;
    color: inherit;   /* im farbigen Kopfbereich die Kontrastfarbe */
}

/* Regionsname als Zwischentitel im Kopfbereich. */
.crm-region-page .crm-rp-hero .crm-rp-region-name {
    font-size: clamp(20px, 1.4vw + 12px, 28px);
    font-weight: 600 !important;
    margin: var(--crm-space-sm) 0 0;
    line-height: 1.2;
}

/* LaSuB-Zugehörigkeit – kleine Zeile unter dem Fließtext, verlinkt auf die
   Beratungsseite des Standorts. */
.crm-rp-lasub {
    font-size: 0.7em;
    font-weight: 600 !important;
    margin: var(--crm-space-md) 0 0;
    opacity: 0.85;
}

.crm-region-page .crm-rp-lasub-link,
.crm-region-page .crm-rp-lasub-link:link,
.crm-region-page .crm-rp-lasub-link:visited {
    color: var(--crm-purple);
    text-decoration: none;
}

.crm-region-page .crm-rp-lasub-link:hover,
.crm-region-page .crm-rp-lasub-link:focus-visible {
    color: var(--crm-purple);
    text-decoration: underline;
}

/* ---- Sections ---- */
.crm-rp-section {
    margin-bottom: var(--crm-gap);
}

.crm-region-page .crm-rp-section h2 {
    font-size: clamp(22px, 1.6vw + 14px, 32px);
    font-weight: 600 !important;
    color: var(--crm-heading);
    margin: 0 0 var(--crm-space-2xl);
    line-height: 1.2;
}

.crm-rp-intro p {
    color: var(--crm-text);
}

/* ---- Chips / featured ---- */
.crm-rp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-space-md);
    margin-bottom: var(--crm-space-xl);
}

.crm-region-page .crm-rp-chip {
    background: var(--crm-gray);
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.7em;
    font-weight: 600 !important;
    border-width: 0;
}

/* Schulart-Tags: Hintergrundfarbe = Bedarfsstufe (Inline-Style aus den
   Einstellungen). Reine Anzeige, keine Links – die aus der Karte gewählte
   Schulart bekommt eine Kontur. */
.crm-region-page .crm-rp-chip {
    display: inline-block;
    outline: 2px solid transparent;   /* statt Border – Maße bleiben stabil */
    outline-offset: 0;
}

.crm-region-page .crm-rp-chip-active {
    outline-color: var(--crm-text);
}

.crm-rp-featured {
    margin: 0 0 var(--crm-space-lg);
}

/* Zuschlag-Hinweis oben über dem Hero-Bild – linksbündig zur Inhaltsspalte,
   nicht zum Fensterrand. left/right 0 plus margin-inline auto zentriert den
   Streifen; das gleiche padding wie bei hero-inner setzt die Kante. */
.crm-rp-zuschlag-wrap {
    position: absolute;
    /* 30px mehr Luft zum oberen Bildrand als die übrigen Kopfelemente. */
    top: clamp(46px, 2vw + 30px, 58px);
    left: 0;
    right: 0;
    z-index: 3;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--crm-content);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 40px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-region-page .crm-rp-zuschlag {
    display: inline-block;
    background: #F1E6FB;
    color: var(--crm-purple);
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.62em;
    font-weight: 600 !important;
    margin: 0;
    border-width: 0;
}

/* ---- Fact grid ---- */
.crm-rp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--crm-space-xl);
}

.crm-rp-fact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--crm-space-sm);
    padding: var(--crm-space-xl);
    background: var(--crm-gray);
    border-width: 0;
}

.crm-rp-fact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--crm-space-xs);
    border-radius: 50%;
    background: #fff;
    font-size: 24px;
    line-height: 1;
    flex: 0 0 auto;
}

.crm-rp-fact-label {
    font-size: 16px;
    color: var(--crm-text-muted);
    letter-spacing: 0.03em;
}

.crm-rp-fact-value {
    font-size: 24px;
    font-weight: 600 !important;
}

.crm-rp-fact-note {
    font-size: 14px;
    line-height: 1.45;
    color: var(--crm-text-muted);
}

/* Begründung zum Bedarf – kleiner, direkt unter dem Bewerbungs-Button. */
.crm-region-page .crm-rp-demand-note {
    font-size: 0.62em;
    line-height: 1.45;
    opacity: 0.85;
    margin: var(--crm-space-lg) 0 0;
    max-width: 60ch;
}

/* In der weißen Kopfbox: der Hinweis folgt dem Button, etwas enger. */
.crm-region-page .crm-rp-hero-box .crm-rp-demand-note {
    margin-top: var(--crm-space-md);
    color: var(--crm-heading);
}

/* ---- Service ---- */
.crm-rp-service {
    background: var(--crm-gray);
    padding: var(--crm-space-2xl);
}

.crm-rp-service dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--crm-space-sm) var(--crm-space-xl);
    margin: 0 0 var(--crm-space-lg);
}

.crm-rp-service dt {
    font-weight: 600 !important;
    color: var(--crm-text-muted);
}

.crm-rp-service dd {
    margin: 0;
    font-weight: 600 !important;
}

.crm-rp-stand {
    font-weight: 500 !important;
    font-size: 0.6em;
    color: var(--crm-text-muted);
}

.crm-rp-beratung {
    font-weight: 600 !important;
    color: var(--crm-purple);
    text-decoration: none;
}

.crm-rp-beratung:hover {
    text-decoration: underline;
}

/* ---- Testimonial ---- */
.crm-rp-testimonial {
    border-left: 4px solid var(--crm-purple);
    padding-left: var(--crm-space-xl);
}

.crm-rp-quote {
    font-size: 1.05em;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: var(--crm-space-xl);
}

.crm-rp-person {
    display: flex;
    align-items: center;
    gap: var(--crm-space-md);
}

.crm-rp-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

/* Name und Fachangabe gehören zusammen – knappe Zeilenhöhe statt des vom
   Container geerbten Fließtext-Abstands, genau wie in der Karten-Sidebar. */
.crm-rp-person strong {
    display: block;
    font-size: 0.72em;
    line-height: 1.25;
}

.crm-rp-person span {
    display: block;
    font-size: 0.62em;
    line-height: 1.25;
    color: var(--crm-text-muted);
}

/* ---- CTA ---- */
.crm-rp-cta {
    text-align: center;
    margin: var(--crm-space-sm) 0 var(--crm-gap);
}

.crm-region-page .crm-rp-apply,
.crm-region-page .crm-rp-apply:link,
.crm-region-page .crm-rp-apply:visited {
    display: inline-block;
    background: var(--crm-purple);
    color: #fff !important;
    border-width: 0;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.78em;
    font-weight: 600 !important;
    text-decoration: none;
    line-height: 1.6;
}

/* Bewerbungs-CTA im Kopfbereich, unter dem Einleitungstext. */
.crm-region-page .crm-rp-apply-hero {
    margin-top: var(--crm-space-2xl);
}

/* In der weißen Kopfbox steht der Button direkt unter der Überschrift –
   eigene Zeile, etwas enger als im Textblock. */
.crm-region-page .crm-rp-hero-box .crm-rp-apply-hero {
    display: inline-block;
    margin-top: var(--crm-space-xl);
}

.crm-rp-apply:hover,
.crm-rp-apply:focus,
.crm-rp-apply:active {
    background: #3F026B;
    color: #fff !important;
}

.crm-rp-portal-closed {
    color: var(--crm-text-muted);
    font-style: italic;
}



/* =============================================================================
   Ausbaustufe 2 – Brotkrumen, Gruppierung, Kontakt, weitere Regionen
   ============================================================================= */

/* ---- Brotkrumen ---- */
.crm-rp-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.6em;
    color: var(--crm-text-muted);
    margin-block: 0 var(--crm-gap);
}

.crm-region-page .crm-rp-crumb a {
    color: var(--crm-text-muted);
    text-decoration: none;
}

.crm-region-page .crm-rp-crumb a:hover {
    color: var(--crm-purple);
    text-decoration: underline;
}

/* ---- Hero: Kurzintro ---- */
.crm-rp-lead {
    font-size: 0.85em;
    line-height: 1.5;
    margin: var(--crm-space-md) 0 0;
    opacity: 0.95;
    max-width: 60ch;
}

/* ---- Zwischenüberschriften der Faktengruppen ---- */
/* Gruppentitel („Wohnen", „Alltag & Mobilität", „Freizeit"). Der obere
   Abstand ist zugleich der Abstand zwischen den Gruppen. */
.crm-rp-subhead {
    font-size: 0.66em;
    font-weight: 600 !important;
    color: var(--crm-text-muted);
    margin: var(--crm-space-2xl) 0 var(--crm-space-sm);
}

.crm-rp-subhead:first-of-type { margin-top: var(--crm-space-xs); }

/* ---- Bewerbungsbutton direkt im Bedarfsabschnitt ---- */
.crm-region-page .crm-rp-apply-inline {
    font-size: 16px;
    padding: 12px 28px;
    margin-top: var(--crm-space-sm);
}

/* ---- Dienstbedingungen: mobil zusammenklappbar ---- */
.crm-rp-details summary {
    list-style: none;
    cursor: default;
}

.crm-rp-details summary::-webkit-details-marker { display: none; }
.crm-rp-details summary h2 { display: inline; }

.crm-rp-stand {
    display: inline-block;
    font-size: 13px;
    color: var(--crm-text-muted);
    background: #fff;
    border-radius: 6px;
    padding: var(--crm-space-sm) var(--crm-space-md);
    margin: var(--crm-space-xs) 0 0;
}

.crm-rp-stand-inline {
    font-weight: 500 !important;
    font-size: 13px;
    color: var(--crm-text-muted);
}

/* ---- Beratung & Bewerbung ---- */
.crm-rp-contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--crm-space-xl) var(--crm-space-2xl);
}

.crm-region-page .crm-rp-beratung { font-size: 0.72em; }

/* ---- Weitere Regionen ---- */
.crm-rp-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-space-md);
    margin-bottom: var(--crm-space-xl);
}

.crm-region-page .crm-rp-related-item {
    border-width: 0;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.72em;
    font-weight: 600 !important;
    text-decoration: none;
    color: var(--crm-text);
    background: var(--crm-gray);
    outline: 1px solid var(--crm-border);
    outline-offset: -1px;
}

.crm-region-page .crm-rp-related-item:hover,
.crm-region-page .crm-rp-related-item:focus-visible {
    outline: 2px solid var(--crm-purple);
    outline-offset: -2px;
    color: var(--crm-purple);
    text-decoration: none;
}

.crm-region-page .crm-rp-back {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 600 !important;
    color: var(--crm-purple);
    text-decoration: none;
}

.crm-region-page .crm-rp-back:hover { text-decoration: underline; }

/* ---- Mobil: mitlaufender Bewerbungs-Button ---- */
.crm-rp-sticky { display: none; }

/* =============================================================================
   Übersichtsseite /regionen/
   ============================================================================= */
.crm-ra-head { margin: var(--crm-space-sm) 0 var(--crm-space-3xl); padding: 0 var(--crm-space-xs); }

.crm-ra-head h1 {
    font-size: 36px;
    font-weight: 600 !important;
    color: var(--crm-purple);
    margin: var(--crm-space-sm) 0 var(--crm-space-md);
    line-height: 1.15;
}

.crm-ra-intro {
    font-size: 18px;
    color: var(--crm-text);
    margin: 0 0 var(--crm-space-lg);
    max-width: 65ch;
}

.crm-ra-group { margin-bottom: var(--crm-space-3xl); padding: 0 var(--crm-space-xs); }

.crm-ra-group h2 {
    font-size: 18px;
    font-weight: 600 !important;
    color: var(--crm-text-muted);
    margin: 0 0 var(--crm-space-lg);
}

.crm-ra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--crm-space-xl);
}

.crm-region-page .crm-ra-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--crm-border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--crm-text);
    background: #fff;
    transition: transform .12s ease, border-color .12s ease;
}

.crm-region-page .crm-ra-card:hover,
.crm-region-page .crm-ra-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--crm-purple);
    text-decoration: none;
}

.crm-ra-card-img {
    display: block;
    height: 130px;
    background-size: cover;
    background-position: center;
    background-color: #F8F8F8;
}

.crm-ra-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--crm-space-sm);
    padding: var(--crm-space-lg);
}

.crm-ra-card-level {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600 !important;
    padding: var(--crm-space-xs) var(--crm-space-md);
    border-radius: 50px;
}

.crm-ra-card-title { font-size: 19px; font-weight: 600 !important; }

.crm-ra-card-text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--crm-text-muted);
}

.crm-ra-empty { color: var(--crm-text-muted); font-style: italic; padding: 0 var(--crm-space-xs); }

/* =============================================================================
   MOBIL
   ============================================================================= */
@media (max-width: 767px) {
    /* Überschriften und Faktenangaben auf dem Telefon eine Stufe kleiner.
       Die Seitenüberschrift mit !important, weil .crm-rp-title in der
       Grundregel eine clamp()-Größe trägt, die sonst je nach Ladereihenfolge
       gewinnen könnte. */
    .crm-rp-title {
        font-size: 32px !important;
        line-height: 2rem !important;
    }
    .crm-region-page .crm-rp-section h2 { font-size: 20px; }
    .crm-rp-subhead { font-size: 14px; }
    /* Mindesthöhe, damit die Kopfbox mit Brotkrumen und mehrzeiliger
       Überschrift auf dem Telefon nicht über den Bildrand hinausläuft. */
    /* Kopfbild auf dem Telefon deutlich höher: bei 260 px blieb neben der
       weißen Kopfbox kaum Bild übrig. Die Obergrenze von 600 px aus der
       Grundregel bleibt – eine kleinere hier wäre wirkungslos, weil
       min-height im Konfliktfall gewinnt. */
    .crm-rp-hero-img img { min-height: 500px; }
    .crm-rp-lead { font-size: 16px; }
    .crm-ra-head h1 { font-size: 26px; }
    .crm-ra-intro { font-size: 16px; }
    .crm-ra-card-title { font-size: 17px; }

    .crm-rp-fact-value { font-size: 20px; }
    .crm-rp-fact-label { font-size: 14px; }
    .crm-rp-fact-note  { font-size: 13px; }

    /* Kopfbox auf dem Bild: engeres Polster und volle Spaltenbreite – auf dem
       Telefon ist neben der Box ohnehin kein nutzbarer Bildausschnitt mehr. */
    .crm-region-page .crm-rp-hero-box { padding: 16px; max-width: 100%; }

    .crm-rp-fact-icon { width: 44px; height: 44px; font-size: 20px; }

    /* Fakten einspaltig – dreispaltig wird auf dem Telefon unlesbar. */
    .crm-rp-grid { grid-template-columns: 1fr; }
    .crm-ra-grid { grid-template-columns: 1fr; }

    /* Dienstbedingungen eingeklappt: lange Detailinfos verstopfen sonst
       den Weg zu Beratung und Bewerbung. */
    .crm-rp-details:not([open]) { padding-bottom: 0; }
    .crm-rp-details summary {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--crm-space-md);
    }
    .crm-rp-details summary::after {
        content: '▾';
        color: var(--crm-text-muted);
        font-size: 14px;
    }
    .crm-rp-details[open] summary::after { content: '▴'; }

    .crm-rp-contact-row { flex-direction: column; align-items: stretch; }
    .crm-region-page .crm-rp-contact-row .crm-rp-apply { text-align: center; }

    /* Bewerbungs-CTA bleibt erreichbar, ohne dass man zurückscrollen muss. */
    .crm-rp-sticky {
        display: block;
        position: sticky;
        bottom: 0;
        z-index: 20;
        padding: var(--crm-space-md) var(--crm-space-lg)
                 calc(var(--crm-space-md) + env(safe-area-inset-bottom));
        background: rgba(255,255,255,0.94);
        backdrop-filter: blur(6px);
        border-top: 1px solid var(--crm-border);
    }

    .crm-region-page .crm-rp-sticky a {
        display: block;
        max-width: var(--crm-content);
        margin: 0 auto;
        text-align: center;
        background: var(--crm-purple);
        color: #fff !important;
        border-radius: 50px;
        padding: var(--crm-space-md) var(--crm-space-xl);
        font-size: 16px;
        font-weight: 600 !important;
        text-decoration: none;
    }

    /* Der CTA im Bedarfsabschnitt wäre daneben doppelt. */
    .crm-region-page .crm-rp-apply-inline { display: none; }
}

/* Eigenes Icon aus der Mediathek statt Emoji (Einstellungen → Icons) */
.crm-rp-fact-icon-img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
}


/* =============================================================================
   Info-Schaltfläche („i") mit Hinweisfeld
   Aufklappen per Hover erledigt das CSS, den Klick (Touch) info-tooltip.js.
   ============================================================================= */
.crm-info {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

.crm-region-page .crm-info-btn,
.crm-container .crm-info-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border-width: 0;
    border-radius: 30px;
    background: rgba(255,255,255,0.92);
    color: #1F2937;
    font-size: 15px;
    font-weight: 600 !important;
    font-style: italic;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.crm-region-page .crm-info-btn:hover,
.crm-container .crm-info-btn:hover {
    background: #fff;
}

.crm-region-page .crm-info-btn:focus-visible,
.crm-container .crm-info-btn:focus-visible {
    outline: 3px solid var(--crm-purple, #560293);
    outline-offset: 2px;
}

.crm-info-bubble {
    /* Bewusst display statt visibility/opacity: diskrete Eigenschaften mit
       Übergang bleiben beim Ein- und Ausblenden hängen. Ein Hinweisfeld muss
       verlässlich erscheinen, nicht animieren. */
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 40;
    width: max-content;
    max-width: min(300px, 70vw);
    padding: var(--crm-space-md) var(--crm-space-lg);
    border-radius: 12px;
    background: #1F2937;
    color: #fff;
    font-size: 14px;
    font-weight: 400 !important;
    font-style: normal;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}

/* Kleines Dreieck nach oben */
.crm-info-bubble::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 9px;
    width: 10px;
    height: 10px;
    background: inherit;
    transform: rotate(45deg);
}

.crm-info:hover .crm-info-bubble,
.crm-info:focus-within .crm-info-bubble,
.crm-info.crm-info-open .crm-info-bubble {
    display: block;
}

/* Das Info-Symbol sitzt oben links, das Feld klappt also nach rechts auf.
   Auf schmalen Geräten die Breite am Sichtfeld ausrichten, damit nichts
   über den Rand hinausragt. */
@media (max-width: 560px) {
    /* Bezugspunkt wird der Badge-Container statt des kleinen i-Symbols –
       sonst beginnt das Feld erst rechts vom Symbol und läuft über den Rand. */
    .crm-rp-zuschlag-wrap .crm-info { position: static; }

    /* Bezug ist die Padding-Box des Streifens, deshalb den Seitenabstand
       ausdrücklich setzen – sonst startet das Feld am Fensterrand. */
    .crm-rp-zuschlag-wrap .crm-info-bubble {
        left: clamp(16px, 3vw, 40px);
        right: auto;
        max-width: calc(100vw - 2 * clamp(16px, 3vw, 40px));
    }
}

/* Fächer nach Bedarfsstufe – eine Zeile je Stufe. */
.crm-region-page .crm-rp-subject-groups {
    margin: 0 0 var(--crm-space-lg);
}

.crm-region-page .crm-rp-subject-group {
    margin: 0 0 var(--crm-space-sm);
}

.crm-region-page .crm-rp-subject-group:last-child {
    margin-bottom: 0;
}

/* ---- Pro & Contra ---- */
.crm-region-page .crm-rp-procontra p {
    margin: 0 0 var(--crm-space-lg);
}

.crm-region-page .crm-rp-procontra-list {
    margin: 0;
    padding-left: 1.2em;
}

.crm-region-page .crm-rp-procontra-list li {
    margin: 0 0 var(--crm-space-sm);
}

.crm-region-page .crm-rp-procontra-list li:last-child {
    margin-bottom: 0;
}

/* Einzelner Baustein per Shortcode auf einer fremden Seite. Schrift, Farben
   und Abstandsleiter kommen vom Wrapper; den großen Abstand zwischen den
   Abschnitten setzt dort der Seitenbaukasten, nicht das Plugin. */
.crm-rp-embed .crm-rp-section {
    margin-bottom: 0;
}