/* ==========================================================================
   Blissify Vet – Fluid Typography
   --------------------------------------------------------------------------
   Override-Datei für das MODX-Theme (assets/theme/css/).
   MUSS als letztes Theme-Stylesheet NACH responsive.css eingebunden werden.

   Ziele:
   - Ein einziger, verlässlicher rem-Maßstab (1rem = 16px), statt der
     widersprüchlichen :root-Skalierung (16 / 16,5 / 17 / 18px) aus vars.css.
   - Body-Text nie kleiner als 16px (responsive.css schrumpft bisher auf 13px).
   - Fließende Schriftgrößen per clamp() zwischen 360px und 1280px Viewport.
   - Ruhigere, luftigere Mobil-Ansicht: kleinere Headlines, kompaktere
     Title-Bar, Breadcrumbs, die sauber umbrechen.

   Unverändert bleiben bewusst: Schriftfamilien (Salina / Montserrat)
   und sämtliche Farben.

   Formel der clamp()-Werte:  min @ 360px  →  max @ 1280px
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Basis-Maßstab
   vars.css setzt :root je nach Breakpoint auf 16–18px → alle rem-Werte
   wachsen am Desktop um 12,5 % (h1 = 3.429rem ≈ 62px statt der gemeinten 48px).
   Hier wird der Maßstab fix auf 100 % (= 16px bzw. Browser-Einstellung
   der Nutzer:innen) zurückgesetzt. Spätere Regel gleicher Spezifität gewinnt
   auch gegen die Media-Query-Varianten in vars.css.
   -------------------------------------------------------------------------- */
:root,
html {
    font-size: 100%;                 /* = 16px */
    -webkit-text-size-adjust: 100%;  /* iOS: kein automatisches Aufblasen im Querformat */
    text-size-adjust: 100%;

    /* Theme-Variablen an den neuen Maßstab anpassen */
    --pbmit-body-typography-font-size: 1rem;
    --pbmit-body-typography-line-height: 1.7;

    /* Eigene Skala – zentral anpassbar */
    --bv-fs-body: clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);    /* 16 → 17px */
    --bv-fs-h1:   clamp(1.875rem, 1.4348rem + 1.9565vw, 3rem);     /* 30 → 48px */
    --bv-fs-h2:   clamp(1.6875rem, 1.3207rem + 1.6304vw, 2.625rem);/* 27 → 42px */
    --bv-fs-h3:   clamp(1.4375rem, 1.1685rem + 1.1957vw, 2.125rem);/* 23 → 34px */
    --bv-fs-h4:   clamp(1.25rem, 1.0543rem + 0.8696vw, 1.75rem);   /* 20 → 28px */
    --bv-fs-h5:   clamp(1.125rem, 1.0272rem + 0.4348vw, 1.375rem); /* 18 → 22px */
    --bv-fs-h6:   clamp(1.0625rem, 1.0136rem + 0.2174vw, 1.1875rem);/* 17 → 19px */
    --bv-fs-tbar: clamp(1.875rem, 1.337rem + 2.3913vw, 3.25rem);   /* 30 → 52px */

    --bv-lh-tight:   1.15;  /* große Display-Headlines */
    --bv-lh-heading: 1.2;
    --bv-lh-sub:     1.25;  /* h4–h6 */
}


/* --------------------------------------------------------------------------
   2. Body-Text
   Beendet das „Schrumpfspiel“ aus responsive.css (15 / 14 / 13px).
   Hinweis: body-font-size beeinflusst rem ohnehin nicht – nur em-Werte
   und alles, was die Größe erbt.
   -------------------------------------------------------------------------- */
body {
    font-size: var(--bv-fs-body);
    line-height: 1.7;
}

@media (min-width: 1200px) {
    body {
        font-size: 1.0625rem;        /* 17px */
        line-height: 1.65;
    }
}

/* Fließtext-Absätze und Listen erben die Body-Größe,
   statt fest auf 13–14px zu stehen */
p,
li,
.pbmit-heading-desc {
    font-size: inherit;
    line-height: inherit;
}


/* --------------------------------------------------------------------------
   3. Überschriften h1–h6
   Line-heights einheitenlos, damit sie mit der Schriftgröße mitwachsen.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;              /* gleichmäßigere Zeilen (moderne Browser) */
    overflow-wrap: break-word;
}

h1 { font-size: var(--bv-fs-h1); line-height: var(--bv-lh-tight); }
h2 { font-size: var(--bv-fs-h2); line-height: var(--bv-lh-heading); margin-bottom: 0.75em; }
h3 { font-size: var(--bv-fs-h3); line-height: var(--bv-lh-heading); }
h4 { font-size: var(--bv-fs-h4); line-height: var(--bv-lh-sub); }
h5 { font-size: var(--bv-fs-h5); line-height: var(--bv-lh-sub); }
h6 { font-size: var(--bv-fs-h6); line-height: var(--bv-lh-sub); }


/* --------------------------------------------------------------------------
   4. Section-Headlines des Themes
   responsive.css setzt hier mobil 38–40px – auf dem iPhone zu wuchtig.
   -------------------------------------------------------------------------- */
.pbmit-heading-subheading .pbmit-title {
    font-size: var(--bv-fs-h2);
    line-height: var(--bv-lh-heading);
}

.pbmit-heading .pbmit-title {
    font-size: var(--bv-fs-h3);
    line-height: var(--bv-lh-heading);
}

/* Kleine Kicker-Zeile über der Headline: bisher rem-basiert und damit
   am Desktop mitgewachsen – jetzt fix ruhig */
.pbmit-heading-subheading .pbmit-subtitle {
    font-size: 0.8125rem;            /* 13px */
    line-height: 1.6;
}

.pbmit-heading-subheading {
    margin-bottom: clamp(1.25rem, 0.9rem + 1.5vw, 1.875rem);  /* 20 → 30px */
}


/* --------------------------------------------------------------------------
   5. Title-Bar (Seitenkopf mit Hintergrundbild)
   -------------------------------------------------------------------------- */
.pbmit-tbar-title,
.single-post .pbmit-title-bar-wrapper .pbmit-tbar-title {
    font-size: var(--bv-fs-tbar);
    line-height: var(--bv-lh-tight);
    /* Lange deutsche Komposita („Mitarbeiterführung“) sauber trennen */
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
    max-width: 100%;
}

/* Tablet: Bühne etwas niedriger als die 600px vom Desktop */
@media (max-width: 1199px) {
    .pbmit-title-bar-wrapper,
    .pbmit-title-bar-content {
        min-height: 420px;
    }
    .pbmit-title-bar-content {
        padding-top: 160px;
        padding-bottom: 48px;
    }
}

/* Mobil: statt 475px Mindesthöhe nur so hoch wie nötig */
@media (max-width: 767px) {
    .pbmit-title-bar-wrapper,
    .pbmit-title-bar-content {
        min-height: 300px;
    }
    .pbmit-title-bar-content {
        padding-top: 128px;          /* Platz für den Header (~100px) */
        padding-bottom: 32px;
    }
    .pbmit-tbar-title,
    .single-post .pbmit-title-bar-wrapper .pbmit-tbar-title {
        padding: 10px 14px;
        margin-bottom: 12px;
    }
    .single-post .pbmit-title-bar-wrapper .pbmit-title-bar-content-inner {
        width: 100%;
    }
}


/* --------------------------------------------------------------------------
   6. Breadcrumbs
   Mobil kleiner, mit sauberem Umbruch und weniger Innenabstand.
   -------------------------------------------------------------------------- */
.pbmit-breadcrumb-inner .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    margin: 0;
}

@media (max-width: 767px) {
    .pbmit-title-bar-wrapper .pbmit-breadcrumb,
    .pbmit-title-bar-wrapper .pbmit-breadcrumb a {
        font-size: 0.75rem;          /* 12px */
        line-height: 1.35;
        letter-spacing: 0.3px;
    }
    .pbmit-breadcrumb-inner .breadcrumb {
        row-gap: 4px;
    }
    .pbmit-breadcrumb-inner span:not(.sep) {
        padding: 2px 7px;
        border-radius: 8px;
    }
    .pbmit-breadcrumb-inner .sep {
        padding: 0 4px;
    }
    .pbmit-breadcrumb-inner i {
        font-size: 8px;
        top: -1px;
    }
}