/*
  Eigene Anpassungen */
html {
    height: 100%;

    /* Absicherung gegen horizontalen Overflow */
    overflow-x: hidden;
}

body {
    height: auto;

    /* überschreibt template height:100% */
    min-height: 100vh;

    /* trotzdem mindestens Viewport-Höhe */
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.woff") format("woff");
}

@font-face {
    font-family: "Montserrat_medium";
    src: url("../fonts/Montserrat-Medium.woff") format("woff");
}

@font-face {
    font-family: "Montserrat_medium_italic";
    src: url("../fonts/Montserrat-MediumItalic.woff") format("woff");
}

@font-face {
    font-family: "Montserrat_bold";
    src: url("../fonts/Montserrat-Bold.woff") format("woff");
}

@font-face {
    font-family: "Montserrat_semibold_italic";
    src: url("../fonts/Montserrat-SemiBoldItalic.woff") format("woff");
}

@font-face {
    font-family: "Montserrat_italic";
    src: url("../fonts/Montserrat-Italic.woff") format("woff");
}

body,
p,
td,
th,
ul,
li {
    font-family: "Montserrat";
    font-size: 1.2rem!important;
}

h1,
h2,
h3,
h4 {
    font-family: "Montserrat_medium";
    letter-spacing: 0.03em;
}

h1,
.h1 {
    font-family: "Montserrat_medium_italic";
    letter-spacing: 0.04em;
    font-size: clamp(1.75rem, 4.2vw, 2.65rem);
}

h2,
.h2 {
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
}

h3,
.h3 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

header.masthead h1,
header.masthead .h1 {
    font-family: "Montserrat_medium_italic";
    letter-spacing: 0.04em;
    font-size: clamp(1.75rem, 4.2vw, 2.65rem);
}

header.masthead h2,
header.masthead .h2 {
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
}

a {
    color: #407e5b;
    text-decoration: none;
    font-family: "Montserrat_medium";
}

a:hover {
    font-family: "Montserrat_bold";
}

/* Helleres Mintgrün für Links auf blauem Hintergrund */
.bg-primary a {
    color: #b6dbc7;
}

#mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #b6dbc7;
}

.link-success {
    color: #b6dbc7 !important;
}

.btn-secondary:hover {
    color: #407e5b;
}

.montserrat-medium-italic {
    font-family: "Montserrat_medium_italic";
}


/* Hellgrau für Abschnittswechsel */
.bg-soft-gray {
    background-color: var(--bs-gray-200);
}

/* Kompakter Seitenkopf für Unterseiten */
.page-header {
    padding-top: 10.5rem;
    padding-bottom: 1.5rem;
    background-image: linear-gradient(rgba(64, 126, 91, 0.8), rgba(64, 126, 91, 0.8)), url("../assets/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Geschwungene Linie unter der H1 im Seitenkopf */
.page-header h1::after {
    content: "";
    display: block;
    width: 2.75rem;
    height: 14px;
    margin-top: 0.35rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'%3E%3Cpath d='M1 8 Q 8 -1 15 8 T 29 8' stroke='%23a2cdb5' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Mehr Abstand im Burger-Menü zwischen 992–1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #mainNav .navbar-nav .nav-item .nav-link {
        padding: 0.75rem 0;
    }
}

/* Kleinere H1 im Seitenkopf zwischen 992–1199px für Zeilenumbruch */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .page-header h1 {
        font-size: 2.3rem;
    }
}

/* Maximale Breite für Porträtfotos */
.portrait-photo {
    max-width: 253px;
}

/* Abstand für Sprungmarken zur fixierten Nav */
section[id] {
    scroll-margin-top: 130px;
}

/* Verhindert einzelne Wörter am Zeilenende */
p,
li,
h1,
h2,
h3,
h4 {
    text-wrap: pretty;
}

/* Zweispaltige Liste ab Tablet-Breite */
@media (min-width: 768px) {
    .education-list {
        columns: 2;
        column-gap: 3rem;
    }

    .education-list li {
        break-inside: avoid;
    }
}

/* Größeres Zitat auf der Startseite */
.quote-text {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

/* Kompakterer Hero-Bereich auf der Startseite */
header.masthead.masthead-home {
    padding-bottom: 3.875rem;
}

@media (min-width: 992px) {
    header.masthead.masthead-home {
        min-height: 0;
        padding-top: 6rem;
        padding-bottom: 2.8125rem;
    }
}

/* Geschwungene Trennlinie im Claim */
.claim-divider {
    color: #a2cdb5;
}

.claim-divider svg {
    vertical-align: middle;
}

/* Die mobile Variante der Trennlinie (eigener Block unter der H1, nicht die
   inline Variante zwischen den Claim-Unterzeilen) erbt einen Zeilenabstand
   für ihr Inline-SVG, der die Box deutlich höher macht als das 14px-Symbol
   selbst. Das erzeugte trotz margin-top:0 sichtbaren
   Abstand zur H1 darüber. */
.claim-divider.d-xl-none {
    line-height: 0;
}

/* Claim-Unterzeile: jede der beiden Aussagen bricht nur als Ganzes um */
.claim-sub span {
    white-space: nowrap;
}

/* Navigationsleiste bekommt eine explizite Breite statt sich nur auf
   left:0/right:0 zu verlassen. Grund: Bei fixierten Elementen mit right:0
   kann die berechnete Breite in manchen Browsern/Bildschirm-Situationen die
   Breite der Scrollleiste mit einschließen, wodurch die Leiste minimal
   breiter als der sichtbare Bereich wird - das drückt Inhalte (hier den
   Burger-Button) über den rechten Rand hinaus. */
#mainNav {
    width: 100%;
}

/* Der innere .container ist selbst ein Flex-Kind von #mainNav und würde
   trotz width:100% über dessen Breite hinauswachsen, weil Flex-Items
   standardmäßig nicht unter ihre Inhaltsgröße (min-width: auto) schrumpfen -
   betraf bei sehr schmalen Bildschirmen (ab ca. 320px) weiterhin den
   Burger-Button. */
#mainNav > .container {
    min-width: 0;
}

/* Logo schrumpft auf sehr schmalen Bildschirmen (behebt Nav-Überlauf unter
   ca. 394px, z. B. iPhone SE/6/7/8) - width="200" am img plus .img-fluid
   allein reicht nicht, weil das Logo im Flex-Container der Navigation nicht
   unter seine 200px-Vorgabe schrumpfen darf. Wert am 2026-09-23 von 130px
   auf 180px angehoben, nachdem sich herausstellte, dass der eigentliche
   Burger-Button-Überlauf an der #mainNav-Breite lag (siehe unten), nicht am
   Logo - die starke Verkleinerung war dafür also gar nicht nötig gewesen.*/
@media (max-width: 420px) {
    .navbar-brand img {
        max-width: 180px;
    }
}

/* Alle Textgrößen auf sehr schmalen Bildschirmen ein Stück kleiner */
@media (max-width: 430px) {
    body,
    p,
    td,
    th,
    ul,
    li {
        font-size: 1.05rem !important;
    }

    header.masthead-home h1 {
        font-size: 1.5rem;
    }

    h2,
    header.masthead h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    .claim-sub {
        font-size: 0.85rem;
    }
}

/* Etwas großzügigerer Zeilenabstand für H1*/
h1,
.h1 {
    line-height: 1.35;
}

/* Ausnahme: Der Hero-Claim "Ganzheitlich begleiten" auf der Startseite bricht
   wegen des   zwischen den Wörtern nie zweizeilig um */
header.masthead h1,
header.masthead .h1 {
    line-height: 1.2;
}

/* Etwas großzügigerer Zeilenabstand für H2, analog zur H1-Regel oben -
   ergänzt 2026-09-23 nach Kundinnen-Feedback. */
h2,
.h2 {
    line-height: 1.35;
}