/* ============================================================
   Die kleine Sprachschule — Hauptstylesheet
   Schriften laut PDF-Kommentare (Umrechnung: 1 pt = 1.333 px)

     - Logo:        Segoe Print Bold      30 pt  (≈ 40 px → 2.5rem)
     - Untertitel:  Segoe Print Bold      16 pt  (≈ 21 px → 1.3125rem)
     - H2-Überschriften: Segoe Print Bold 24 pt  (≈ 32 px → 2rem)
     - Body-Text:   Segoe Print Regular   15 pt  (≈ 20 px → 1.25rem)
     - Navigation:  Segoe Print Regular    9 pt  (≈ 12 px)

   Hinweis zur Navigation:
   Im Layout waren 9 pt vorgesehen. Das entspricht im Web etwa 12 px
   und ist damit aus Usability- und Accessibility-Sicht sehr klein.
   Daher wurde die Navigationsschrift auf 14 px angepasst (≈ 0.875rem),
   um eine bessere Lesbarkeit zu gewährleisten, ohne das Layout sichtbar
   zu verändern.

   Farbwerte:
     - Blau: #0067b3
   ============================================================ */

@font-face {
    font-family: 'Segoe Print';
    src: url('../fonts/Segoe_Print_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   Design Tokens
   ============================================================ */

:root {
    /* Farben */
    --color-primary: #0067b3;
    --color-white: #ffffff;
    --color-black: #000000;

    --color-hero-bg: rgba(0, 103, 179, 0.9);
    --color-navbar-bg: rgba(255, 255, 255, 1);

    /* Schrift */
    --font-family-main: 'Segoe Print', Georgia, "Times New Roman", Times, serif;

   /* ============================================================
   Schriftgrößen laut Kundenvorgabe (aus Printlayout)
   Umrechnung: 1 pt ≈ 1.333 px
   Diese Werte wurden NICHT direkt übernommen,
   da sie im Web zu klein wirken.
   ============================================================ */

/*
--font-size-logo: 2.5rem;        30 pt ≈ 40 px
--font-size-subtitle: 1.3125rem; 16 pt ≈ 21 px
--font-size-h2: 2rem;            24 pt ≈ 32 px
--font-size-body: 1.25rem;       15 pt ≈ 20 px
--font-size-nav: 0.75rem;        9 pt ≈ 12 px
*/


/* ============================================================
   Schriftgrößen an Web angepasst
   Ziel: bessere Lesbarkeit auf Desktop und mobilen Geräten
   ============================================================ */

--font-size-logo: 2.75rem;       /* 44px */
--font-size-subtitle: 1.5rem;    /* 24px */
--font-size-h2: 2.25rem;         /* 36px */
--font-size-body: 1.375rem;      /* 22px */
--font-size-nav: 0.875rem;       /* 14px */

    /* Abstände */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 1.25rem;
    --spacing-5: 2rem;
    --spacing-6: 3rem;
    --spacing-7: 4rem;
    --section-padding-y: 5rem;
    --hero-padding-top: 8.75rem;
    --hero-padding-bottom: 7.5rem;
    --section-gap: 4rem;

    /* Effekte */
    --blur-navbar: 4px;

    /* Logo */
    --logo-size: 6.5rem;
    --logo-offset-y: 0.5rem;
}


/* ============================================================
   Basis
   ============================================================ */

html {
    font-size: 16px;
}

/* ============================================================
   Seitenhintergrund
   ============================================================ */

body {
    margin: 0;
    font-family: var(--font-family-main);
    font-weight: 400;
    font-size: var(--font-size-body);
    line-height: 1.5;
    color: var(--color-black);

    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}


/* ============================================================
   Typografie laut Layout
   ============================================================ */

.subtitle {
    font-family: var(--font-family-main);
    font-weight: 700;
    font-size: var(--font-size-subtitle);
    padding-top: var(--spacing-3);
}
h1, h2, h3, h4 {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: break-word;
}
h2 {
    font-family: var(--font-family-main);
    font-weight: 700;
    font-size: var(--font-size-h2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: normal;
    overflow-wrap: normal;
}

/* ============================================================
   Überschriften – saubere Grundabstände
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--spacing-3);
    font-family: var(--font-family-main);
    color: var(--color-primary);
}


/* ============================================================
   Section-Abstände
   ============================================================ */

section {
    padding: 0;
    margin-top: var(--section-gap);
}


/* ============================================================
   Hero
   ============================================================ */

   #hero {
    margin-top: 0;
    background: var(--color-hero-bg);
    color: var(--color-white);
    padding-top: var(--hero-padding-top);
    padding-bottom: var(--hero-padding-bottom);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   Hero Icons
   ============================================================ */

.hero-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-icon {
    position: absolute;
}

/* EN Sprechblase links */

.hero-icon-en {
    left: 20%;
    top: 15%;
    width: 180px;
}

/* FR Sprechblase rechts */

.hero-icon-fr {
    right: 22%;
    top: 20%;
    width: 180px;
}

/* Haus unten rechts */

.hero-icon-house {
    right: 20%;
    bottom: 0px;
    width: 240px;
}

/* ============================================================
   Hero Text
   ============================================================ */

.hero-content {
    max-width: 43.75rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    transform: translateY(-0.75rem);
}

.hero-content h1 {
    font-size: var(--font-size-logo);
    margin-bottom: var(--spacing-4);
    color: #ffffff;
}

.hero-content .subtitle {
    font-size: var(--font-size-subtitle);
    line-height: 1.4;
}


/* ============================================================
   Navigation
   ============================================================ */

header {
    padding-top: 7.5rem;
}

.logo {
    font-family: var(--font-family-main);
    font-weight: 700;
    font-size: var(--font-size-logo);
}

.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: var(--color-navbar-bg);
    backdrop-filter: blur(var(--blur-navbar));
    -webkit-backdrop-filter: blur(var(--blur-navbar));
}

.navbar-brand {
    margin-right: var(--spacing-5);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.1;
    text-decoration: none;
    color: var(--color-black);
}

.logo-img {
    height: var(--logo-size);
    width: auto;
    display: block;
    position: relative;
    top: var(--logo-offset-y);
}

.navbar-nav {
    gap: var(--spacing-3);
}

.navbar-nav .nav-link {
    font-family: var(--font-family-main);
    font-size: var(--font-size-nav);
    font-weight: 400;
    color: var(--color-black);
    padding: var(--spacing-1) 0;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--color-primary);
}

.navbar-toggler {
    border: 0;
    padding: var(--spacing-1) var(--spacing-2);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background:  var(--color-navbar-bg);

}

.navbar-nav .nav-link.active {
    color: var(--color-primary);
}



/* ============================================================
   Inhaltsbox (für About, Vita, Services etc.)
   ============================================================ */

.content-box {
    padding: 2.5rem;
    max-width: 38rem;    /* passend zum Umbruch im Kundenlayout */
}

.content-box p {
    margin-bottom: 1.2em;
} 

.section-panel {
    background: rgba(255,255,255,0.9);
    padding: var(--section-padding-y);
}

/* ============================================================
   Section About
   ============================================================ */

.about-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   Section Vita
   ============================================================ */

.vita-images {
    margin-bottom: var(--spacing-6);
}

.vita-image {
    width: 100%;
    height: auto;
    display: block;
}

.vita-text {
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
}

.vita-text p {
    margin-bottom: 1.2em;
}

/* ============================================================
   Section Services
   ============================================================ */

.services-row {
    margin-bottom: var(--spacing-7);
}

.service-item {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-icon {
    width: 140px;
    height: 140px;
    object-fit: contain;
    margin-bottom: var(--spacing-4);
}

.service-line {
    width: 16rem;
    height: 3px;
    background: var(--color-primary);
    margin-bottom: var(--spacing-3);
}

.service-item p {
    max-width: 16rem;
    min-height: 4.5rem;
    margin: 0 auto;
    text-align: center;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

/* ============================================================
   Section Contact
   ============================================================ */
#contact {
    scroll-margin-top: 100px;
}
.contact-box {
    max-width: 100%;
}

.contact-image {
    width: 100%;
    height: auto;
    display: block;
}

.contact-label {
    color: var(--color-primary);
}

.contact-headline {
    font-family: var(--font-family-main);
    font-size: var(--font-size-h2);
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

.contact-label {
    color: var(--color-primary);
    font-weight: 600;
}

.contact-link {
    color: inherit;
    text-decoration: none;
     white-space: nowrap;
}

.contact-link:hover {
    text-decoration: underline;
}

.content-page h2 {
    margin-top: 2rem;
}

.content-page h3 {
    margin-top: 1.5rem;
}

.content-page h4 {
    margin-top: 1rem;
    font-size: 1.1rem;
}

/* ============================================================
   Section Address
   ============================================================ */

#address{
    margin-bottom: var(--section-gap);
}

.address-map-wrapper {
    text-align: center;
    margin-bottom: var(--spacing-5);
}

.address-map {
    max-width: 28rem;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.map-credit {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    opacity: 0.8;
    text-align: center;
}

.address-label {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: var(--spacing-2);
}

.address-text {
    text-align: center;
    margin-bottom: var(--spacing-7);
}

.address-footer {
    text-align: center;
    color: var(--color-primary);
    font-size: var(--font-size-h2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-4);
}

/* ============================================================
   Section Content
   ============================================================ */

#content{
    margin-bottom: var(--section-gap);
}

   #content .content-page {
    max-width: 70rem;
}

/* ============================================================
   Responsive Anpassungen
   ============================================================ */

@media (max-width: 400px) {

    body {
        font-size: 0.95rem;
    }

}   

@media (max-width: 575.98px) {

    body {
         font-size: 0.95rem;   /* ca. 15px */
        line-height: 1.5;
    }
 h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.3rem;
    }
      p {
        margin-bottom: 0.8rem;
    }
    .section-panel {
        padding: 1rem;
    }

    .content-box,
    .content-page {
        padding: 0;
         font-size: 0.95rem;
    }
      .about-image {
        margin-bottom: 1rem;
    }
     #about h2 {
        margin-top: 0.5rem;
        margin-bottom: 0.8rem;
    }

}   

@media (max-width: 991.98px) {
    body {
        font-size: 1.1rem; /* ca. 17–18px */
         line-height: 1.6;
    }
    .navbar-collapse {
        margin-top: var(--spacing-3);
    }

    .navbar-nav {
        gap: var(--spacing-2);
        align-items: flex-start !important;
    }

 .logo-img {
    height: 5.5rem;
}
header {
    padding-top: 6.5rem;
}
.hero-icon-en {
    left: 10%;
    top: 8%;
    width: 140px;
}

.hero-icon-fr {
    right: 10%;
    top: 5%;
    width: 140px;
}

.hero-icon-house {
    right: 2%;
    bottom: 0;
    width: 115px;
}

.hero-content {
    transform: none;
    top: 40px;
}
}