@font-face {
    font-family: "Maven Pro";
    src: url("MavenPro-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Maven Pro";
    src: url("MavenPro-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Maven Pro";
    src: url("MavenPro-SemiBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}


@font-face {
    font-family: "Libre Baskerville";
    src: url("LibreBaskerville-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Libre Baskerville";
    src: url("LibreBaskerville-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Sacramento";
    src: url("Sacramento-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}


/* =========================
   BASE
========================= */

body {
    font-family: 'Maven Pro', sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
	min-height: 100vh;
    background-color: #2c344c;
}

/* =========================
   HEADER
========================= */

header {
    background-color: #e4f0ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header h1 {
    font-family: Sacramento;
    margin: 0;
    color: #405f83;
    font-size: 24px;
    font-weight: 600;
}

nav a {
    margin-left: 25px;
    text-decoration: none;
    color: #405f83;
    font-weight: 500;
}

nav a.active,
nav a:hover {
    text-decoration: underline;
}

/* =========================
   HERO
========================= */

.hero {
    height: 600px;
    background-image: url("hero.jpg");
    background-size: cover;
    background-position: center 70%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(228, 240, 237, 0.4);
}

.hero-text {
    position: relative;
    z-index: 1;
    text-align: center;
    font-family: "Libre Baskerville", serif;
    color: #1f2a33;
}

.hero-title {
    font-size: 40px;
    font-style: italic;
    margin: 0;
}

.hero-subtitle {
    font-size: 28px;
    margin-top: 60px;
}

/* =========================
   SECTION SYSTEM
========================= */

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 80px 60px;
}

/* links / rechts sauber definieren */
.split-left,
.split-right-text {
    flex: 0 1 auto;
    max-width: 420px;
}

/* Bild immer fix */
.image-box {
    width: 380px;
    height: 380px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
	display: block;
}

/* =========================
   TYPOGRAPHY SYSTEM
========================= */

/* base heading */
.section-title {
    font-family: "Libre Baskerville", serif;
    font-size: 26px;
    margin-bottom: 15px;
}

.text--info {
    display: block;
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
    line-height: 1.7;
    font-size: 18px;
}

strong {
    font-weight: 600;
}

.einzug {
    display: block;
    margin-left: 40px;
    font-family: "Maven Pro";
    font-size: 20px;
}

/* =========================
   LAYOUT
========================= */


/* linke Spalte */
.split-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =========================
   SECTION VARIANTS
========================= */

/* Startseite Verbindung */
.section--connection .section-title {
    color: #e4f0ed;
    font-size: 34px;
    text-align: center;
    margin-bottom: 30px;
}

.section--connection {
    background-color: #405f83;
}

/* Startseite Über mich */
.section--about .section-title {
    color: #b96b6a;
    font-size: 32px;
}

.section--about .split-right-text {
    max-width: 360px;
	text-align: justify;
}

.section--about {
    background-color: #e4f0ed;
}

/* Zuhörzeit Für wen?*/
.section--zuhoerwer .section-title {
    font-size: 32px;
    margin-bottom: 20px;
    color: #f6e8e7;
}

.section--zuhoerwer .split-right-text {
    max-width: 360px;
    color: #e4f0ed;
}

.section--zuhoerwer {
    background-color: #405f83;
}

/* Zuhörzeit Wie?*/
.section--zuhoerwie .section-title {
    font-size: 32px;
    margin-bottom: 20px;
    color: #405f83;
}

.section--zuhoerwie {
    background-color: #e4f0ed ;
}

.section--zuhoerwie ul,
.section--zuhoerwie li {
    font-size: 18px;
    margin-top: 20px;
    padding-left: 1.5rem;
    color: #2c344c;
}

.section--zuhoerwie > div {
    display: inline-block;
    width: fit-content;
    margin: 0 auto;
}

.section--zuhoerwie p {
    width: 100%;
    max-width: 800px;
    color: #2c344c;
}

/* Zuhörzeit Warum?*/
.section--zuhoerwarum .section-title {
    font-size: 38px;
    margin-bottom: 10px;
    color: #f6e8e7;
    text-align: center;
}

.section--zuhoerwarum > div {
    display: inline-block;
    width: fit-content;
    margin: 0 auto;
	background-color: #405f83;
}

.section--zuhoerwarum p {
    width: 100%;
    max-width: 800px;
    color: #e4f0ed;
    margin-bottom: 20px;
    text-align: justify;
}

.section--zuhoerwarum {
    background-color: #405f83;
}

/* GFK Rosenberg*/
.section--GFKrosenberg .section-title {
    font-size: 35px;
    margin-bottom: 50px;
    color: #f6e8e7;
    text-align: left;
}

.section--GFKrosenberg {
    background-color: #405f83;
}

.section--GFKrosenberg p {
    width: 100%;
    max-width: 800px;
    color: #e4f0ed;
    margin-bottom: 30px;
    text-align: left;
    line-height: 1.4;
}

/* GFK Seminare*/
.section--GFKSeminare .section-title {
    font-size: 35px;
    margin-bottom: 50px;
    color: #405f83;
    text-align: center;
}

.section--GFKSeminare {
    background-color: #e4f0ed;
}

.section--GFKSeminare p {
    width: 100%;
    max-width: 800px;
    color: #2c344c;
    margin-bottom: 30px;
    text-align: left;
    line-height: 1.4;
}

.section--GFKSeminare .split-left {
    max-width: 780px;
}

/* Bewegung */
.section--Bewegung .section-title {
    font-size: 35px;
    margin-bottom: 50px;
    color: #f6e8e7;
    text-align: left;
}

.section--Bewegung {
    background-color: #405f83;
}

.section--Bewegung p {
    width: 100%;
    max-width: 800px;
    color: #e4f0ed;
    margin-bottom: 30px;
    text-align: left;
    line-height: 1.4;
}

/* Übermich Warum */

.section--ich_warum .section-title {
    font-size: 35px;
    margin-bottom: 1px;
    color: #405f83;
    text-align: left;
}

.section--ich_warum {
    background-color: #e4f0ed;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.section--ich_warum .split-left {
    max-width: 800px;
}

.section--ich_warum p {
    width: 100%;
    max-width: 900px;
    color: #2c344c;
    margin-bottom: 30px;
	margin-top: 0px;
    text-align: justify;
    line-height: 1.4;
}

/* Übermich Werte */
.section--werte {
    background-color: #e4f0ed;
    padding: 40px 20px;
	padding-top: 90px;
    display: flex;
}

/* Abstand zwischen den Blöcken */
.section--werte + .section--werte {
    padding: 30px 20px;
    margin-top: 0px;
}

.werte {
    max-width: 420px;
    width: 100%;
}

/* Typography */
.section-title {
    font-size: 35px;
    margin-bottom: 40px;
    color: #405f83;
}

.section-subtitle {
    font-family: "Libre Baskerville", serif;
    font-size: 20px;
    margin: 20px 0 10px;
    color: #405f83;
    margin-top: 0px;
}

.werte p {
    text-align: justify;
    margin-bottom: 0px;
    color: #2c344c;
}

/* 📱 MOBILE (Standard) → alles zentriert */
.section--werte {
    justify-content: center;
    text-align: center;
}

/* 💻 DESKTOP */
@media (min-width: 768px) {

    .section--werte-left {
        justify-content: flex-start;
        padding-left: 220px;
    }
    
.section--werte-center {
        justify-content: center;
    }


    .section--werte-right .werte {
        margin-left: auto;
        margin-right: 80px;
    }

    .werte {
        text-align: justify;
    }
    }

/* Übermich Werdegang */
.section--werdegang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 130px;
    background-color: #e4f0ed;
}

.section--werdegang .section-title {
    font-size: 35px;
    color: #405f83;
    text-align: center;
    margin: 0 0 20px 0;
}

.section--werdegang .section-subtitle {
    font-family: "Libre Baskerville", serif;
    font-size: 20px;
    color: #405f83;
    margin: 40px 0 10px 0;
    text-align: center;
}

.section--werdegang ul {
    margin-top: 22px;
}

.section--werdegang li {
    margin-bottom: 12px;
}

.section--werdegang p {
    line-height: 1.6;
    text-align: justify;
    max-width: 500px;
    width: 100%;
}

.section--werdegang a {
    color: #405f83;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

/* Hover-Effekt */
.section--werdegang a:hover {
    color: #2c344c;
    text-decoration-thickness: 2px;
}

/* Impressum */
.section--impressum {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #405f83;
    padding-left: 220px;
    padding-right: 220px; 
}

.section--impressum_light {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #e4f0ed;
    padding-left: 220px;
    padding-right: 220px; 
}

.section--impressum .section-title {
    color: #f6e8e7;
    font-size: 40px;
    margin: 0 0 0 0;
}

.section--impressum_light p {
    font-size: 25px;
    color: #405f83;
    margin: 30px 0 10px 0;
    text-align: left;
    min-height: 100vh;
}

/* Datenschutz */
.Datenschutz {
    display: flex;
    justify-content: flex-start;
    background-color: #405f83;
    padding-left: 220px;
    padding-right: 220px;
}

.section--Datenschutz_light {
    font-family: "Maven Pro";
    display: flex;
    justify-content: flex-start;
    background-color: #e4f0ed;
    padding-left: 220px;
    padding-right: 220px;
}

.Datenschutz_h2 {
    color: #f6e8e7;
    font-size: 40px;
    margin: 0 0 0 0;
    text-align:left;
}

.Datenschutz_h3 {
    font-size: 20px;
    color: #405f83;
    margin: 30px 0 10px 0;
    text-align: left;
}

.Datenschutz_h4 {
    font-size: 18px;
    color: #405f83;
    margin: 0 0 0 0;
    text-align: left;
}

.section--Datenschutz_light p {
    font-size: 20px;
    color: #2c344c;
    margin: 0 0 0 0;
    text-align: left;
}

/* Blog*/
.Blog_uebersicht {
    background-color: #405f83;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 80px 60px;
    flex: 1;
}

.section--Blog_uebersicht .section-title {
    color: #f6e8e7;
    font-size: 32px;
	margin-bottom: 50px;
}

.section--Blog_uebersicht .section-subtitle {
    color: #e4f0ed;
    font-size: 20px;
	margin-bottom: 25px;
}

.section--Blog_uebersicht .split-right-text {
    max-width: 360px;
}

.teaser {
    max-width: 420px;
    font-family: "Maven Pro", sans-serif;
    color: #e4f0ed;
	margin-bottom: 25px;
	text-align: justify;
}

.Blog_artikel {
    background-color: #e4f0ed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    flex: 1;
}

.Blog_artikel p {
    font-size: 20px;
    max-width: 800px;
    color: #2c344c;
    margin: 0 0 0 0;
    text-align: justify;
    line-height: 1.6;
}

/* shop*/
.shop {
    background-color: #e4f0ed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 80px 60px;
    flex: 1;
}

.section--shop .section-title {
    color: #b96b6a;
    font-size: 32px;
	margin-bottom: 50px;
}

.shop .split-right-text {
    max-width: 360px;
}


/* =========================
   BUTTON
========================= */

.btn {
    display: inline-block;
    background-color: #405f83;
    color: #e4f0ed;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 10px;
    width: fit-content;
	margin-top: 10px;
	margin-bottom: 10px;
}

.btn_rosa {
    display: inline-block;
    background-color: #f6e8e7;
    color: #1f2a33;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 10px;
    width: fit-content;
	margin-top: 10px;
	margin-bottom: 10px;
}

.section--about .btn {
    margin-top: 20px;
}

/* =========================
   PILLS
========================= */

.pill-link {
    display: block;
    background-color: #f6e8e7;
    color: #1f2a33;
    text-decoration: none;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 10px;
}

.pill-link--small {
    font-size: 15px;
    padding: 6px 10px;
    margin: 6px 0;
}

.pill-link--large {
    font-size: 18px;
    padding: 10px 16px;
}

/* =========================
   IMAGE
========================= */

.image-startseite { background-image: url("start.JPG"); }
.image-zuhoerzeit { background-image: url("zuhoerzeit.jpg"); }
.image-werbinich { background-image: url("werbinich.jpg"); }
.image-warum { background-image: url("warum8.jpg"); }
.image-rosenberg { background-image: url("rosenberg.JPG"); }
.image-bewegung { background-image: url("bewegung.JPG"); }
.image-werdegang { background-image: url("werdegang.JPG"); }
.image-260506 { background-image: url("260506.JPG"); }
.image-download { background-image: url("download.jpg"); }

.image-box--large {
    width: 450px;
    height: 450px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
	display: block;
}

.image-box--mega-large {
    width: 600px;
    height: 600px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.image-box--wide {
    width: 1000px;
    height: 400px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* =========================
   LISTS
========================= */

ul {
    padding-left: 1.2em;
    margin: 0;
}

li {
    margin-bottom: 10px;
}

/* =========================
   CONTACT
========================= */

.contact {
    background-color: #405f83;
    padding: 30px 80px 40px;
    color: #e4f0ed;
}

.contact-title {
    font-family: "Libre Baskerville", serif;
    font-size: 40px;
    margin-bottom: 20px;
}

.contact-line {
    font-size: 18px;
    margin: 5px 0;
}

/* =========================
   FOOTER
========================= */

.footer {
    background-color: #2c344c;
    padding: 20px;
    text-align: center;
    color: #e4f0ed;
}

.footer a {
    color: #e4f0ed;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* ===================================================================
   RESPONSIVE ADDON
   -------------------------------------------------------------------
   Dieser komplette Bereich wird NUR aktiviert,
   wenn die Bildschirmbreite 768px oder kleiner ist.

   Das bedeutet:
   - Smartphones
   - kleinere Tablets
   - schmale Browserfenster

   Alles außerhalb dieses Blocks bleibt dein originales
   Layout.

   Dadurch bleibt die bestehende Seite so wie du sie umgesetzt hast.
=================================================================== */

@media (max-width: 768px) {



    /* ==============================================================
       HEADER
       --------------------------------------------------------------
       Der Header war ursprünglich für große Bildschirme gebaut:
       Logo links, Navigation rechts.

       Auf Smartphones wäre dafür zu wenig Platz vorhanden.
       Deshalb kommt der Header untereinander.

       Ergebnis:
       - Überschrift oben
       - Navigation darunter
       - alles mittig
       - besser lesbar auf kleinen Displays
    ============================================================== */

    header {

        /* Elemente untereinander statt nebeneinander */
        flex-direction: column;

        /* horizontale Zentrierung */
        justify-content: center;

        /* Text mittig */
        text-align: center;

        /* kleinerer Abstand für Mobile */
        padding: 20px;
    }

    nav {

        /* Navigation bleibt Flexbox */
        display: flex;

        /* Links dürfen umbrechen */
        flex-wrap: wrap;

        /* Navigation mittig */
        justify-content: center;

        /* Abstand zwischen Links */
        gap: 12px;

        /* Abstand nach oben */
        margin-top: 10px;
    }

    nav a {

        /* Entfernt alte Desktop-Abstände */
        margin-left: 0;
    }



    /* ==============================================================
       HERO
       --------------------------------------------------------------
       Die Hero-Section war ursprünglich mit fester Höhe gebaut.

       Auf Smartphones kann das problematisch sein:
       - abgeschnittener Text
       - schlechte Bildausschnitte
       - unnötig große Bereiche

       Deshalb:
       - flexible Höhe
       - bessere Innenabstände
       - zentrierter Bildausschnitt
    ============================================================== */

    .hero {

        /* Höhe darf flexibel wachsen */
        height: auto;

        /* mindestens 80% der Bildschirmhöhe */
        min-height: 80vh;

        /* Innenabstände oben/rechts/unten/links */
        padding:
            120px 20px
            80px 20px;

        /* Bild wird mittig gezeigt */
        background-position: center center;
    }

    .hero-title {

        /* kleinere Schrift für Smartphones */
        font-size: 32px;

        /* bessere Zeilenhöhe */
        line-height: 1.3;
    }

    .hero-subtitle {

        /* ebenfalls kleinere Schrift */
        font-size: 22px;

        /* weniger Abstand nach oben */
        margin-top: 30px;
    }



    /* ==============================================================
       SECTION SYSTEM
       --------------------------------------------------------------
       Desktop:
       Die Sections sind nebeneinander aufgebaut:
       TEXT | BILD

       Mobile:
       Dafür ist zu wenig Platz.

       Deshalb:
       - alles untereinander
       - größere vertikale Lesbarkeit
       - kleinere Seitenabstände
    ============================================================== */

    .section {

        /* Elemente untereinander statt nebeneinander */
        flex-direction: column;

        /* Abstand zwischen den Elementen */
        gap: 40px;

        /* kleinere mobile Innenabstände */
        padding:
            50px 20px;
    }



    /* ==============================================================
       TEXT
       --------------------------------------------------------------
       Die Textcontainer hatten feste Maximalbreiten
       für Desktop.

       Auf Mobile würden dadurch:
       - unnötig schmale Textspalten entstehen
       - Platz verschwendet werden

       Deshalb:
       Text darf die gesamte Bildschirmbreite nutzen.
    ============================================================== */

    .split-left,
    .split-right-text {

        /* volle Breite erlauben */
        width: 100%;

        /* Desktop-Begrenzung entfernen */
        max-width: 100%;
    }



    /* ==============================================================
       IMAGES
       --------------------------------------------------------------
       Die Bilder arbeiten mit background-image.

       Solche Elemente brauchen:
       - feste Breite
       - feste Höhe

       sonst können manche Browser sie unsichtbar rendern.

       Deshalb:
       - volle Breite
       - feste Höhe
       - sauberer Bildausschnitt
    ============================================================== */

    .image-box,
    .image-box--large,
    .image-box--mega-large,
	.image-box--wide	{

        /* Bild darf die volle Breite nutzen */
        width: 100%;

        /* keine künstliche Begrenzung */
        max-width: 100%;

        /* feste Höhe für stabile Darstellung */
        height: 320px;

        /* Bild füllt den Bereich */
        background-size: cover;

        /* Bild bleibt zentriert */
        background-position: center;

        /* verhindert Wiederholungen */
        background-repeat: no-repeat;

        /* saubere Blockdarstellung */
        display: block;
    }



    /* ==============================================================
       SECTION ORDER / WRAPPER STABILISIERUNG
       --------------------------------------------------------------
       Manche Bilder liegen innerhalb zusätzlicher DIV-Container.

       Ohne diese Regel könnten Wrapper:
       - falsche Breiten bekommen
       - Bilder abschneiden
       - Layoutprobleme erzeugen

       Deshalb:
       Jeder direkte Container darf die volle Breite nutzen.
    ============================================================== */

    .section {

        /* Sicherheitshalber nochmal untereinander */
        flex-direction: column;
    }

    .image-box,
    .image-box--large,
    .image-box--mega-large {

        /* Erzwingt sichtbare Darstellung */
        display: block !important;

        /* volle Breite */
        width: 100%;

        /* keine Begrenzung */
        max-width: 100%;

        /* Mindesthöhe */
        min-height: 320px;

        /* Bildverhalten */
        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;
    }

    .section > div {

        /* jeder Container volle Breite */
        width: 100%;
    }



    /* ==============================================================
       TYPOGRAPHY
       --------------------------------------------------------------
       Große Desktop-Schriften wirken auf Smartphones
       schnell zu dominant.

       Deshalb:
       - kleinere Überschriften
       - besser lesbare Fließtexte
       - angenehmere Zeilenhöhe
    ============================================================== */

    .section-title {

        /* kleinere Überschriften */
        font-size: 30px;

        /* Überschrift mittig */
        text-align: center;
    }

    p,
    li {

        /* lesbare Mobile-Schriftgröße */
        font-size: 17px;

        /* angenehmere Lesbarkeit */
        line-height: 1.7;
    }



    /* ==============================================================
       FIXE PADDINGS ENTFERNEN
       --------------------------------------------------------------
       Einige Bereiche hatten Desktop-Abstände wie:
       padding-left: 220px;

       Das würde auf Smartphones fast den gesamten
       Platz verschwenden.

       Deshalb:
       kleine mobile Seitenabstände.
    ============================================================== */

    .section--impressum,
    .section--impressum_light,
    .Datenschutz,
    .section--Datenschutz_light {

        /* kleinere mobile Seitenabstände */
        padding-left: 20px;

        padding-right: 20px;
    }
	.section--ich_warum {
	padding-top: 10px;
	padding-bottom: 30px;
	}



    /* ==============================================================
       WERTE
       --------------------------------------------------------------
       Die Werte-Sections sollen auf Mobile:
       - kompakter
       - lesbarer
       - weniger eingeengt wirken
    ============================================================== */

    .section--werte {

        /* kleinerer Innenabstand */
        padding: 40px 20px;

        /* Text linksbündig */
        text-align: left;
    }

    .werte {

        /* volle Breite erlauben */
        max-width: 100%;
    }



    /* ==============================================================
       BLOG
       --------------------------------------------------------------
       Die Blogübersicht war ursprünglich horizontal aufgebaut.

       Auf Smartphones:
       - Bild oben
       - Text darunter

       Außerdem kleinere Innenabstände.
    ============================================================== */

	.Blog_uebersicht,
	.Blog_artikel {

		flex-direction: column;

		padding:
			50px 20px;
	}

	.Blog_uebersicht > div {
		width: 100%;
	}

	.Blog_uebersicht {
		align-items: center;
	}

    .teaser {

        /* Text darf volle Breite nutzen */
        max-width: 100%;
    }



    /* ==============================================================
       CONTACT
       --------------------------------------------------------------
       Der Kontaktbereich wird kompakter dargestellt,
       damit er auf Smartphones luftiger und lesbarer wirkt.
    ============================================================== */

    .contact {

        /* kleinere Innenabstände */
        padding: 40px 20px;

        /* Inhalt mittig */
        text-align: center;
    }

    .contact-title {

        /* kleinere Überschrift */
        font-size: 32px;
    }
	
}