/* ===================================================================
   Konzept 1: Fokus-Seite mit vollflächigem Farbhintergrund
   =================================================================== */

/* --- Roter Hintergrund --- */
.page-red-background {
    background-color: #D32F2F; /* Ein modernes, kräftiges Rot */
    color: #ffffff;
}

.page-red-background .content-text {
    background-color: rgba(255, 255, 255, 0.05); /* Leichter Glaseffekt */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-red-background .content-text h1 {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* Anpassung für andere Grundfarben (Beispiele) */

/* --- Blauer Hintergrund --- */
.page-blue-background {
    background-color: #1976D2; /* Ein sattes Blau */
    color: #ffffff;
}
.page-blue-background .content-text {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.page-blue-background .content-text h1 {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* --- Grüner Hintergrund --- */
.page-green-background {
    background-color: #388E3C; /* Ein beruhigendes Grün */
    color: #ffffff;
}
.page-green-background .content-text {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.page-green-background .content-text h1 {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}





/* ===================================================================
   Konzept 2: Moderne Typografie
   =================================================================== */

/* Neue Grundschriftart für den Fließtext */
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

/* Akzent-Schriftart für Überschriften für einen professionellen Look */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* Visuelle Verfeinerung der Content-Boxen */
.content-text {
    /* Größerer Abstand zwischen den Boxen für mehr Luftigkeit */
    margin-bottom: 30px;
}

.content-text h1 {
    font-size: 28px; /* Etwas größer für mehr Wirkung */
    font-weight: 700;
    border: none; /* Klare Optik ohne Linie */
    padding-bottom: 0;
    margin-bottom: 20px;
}




/* ===================================================================
   Konzept 3: Diagonale Sektionen
   =================================================================== */

.diagonal-section-top {
    position: relative;
    background-color: #e6f2ff; /* Farbe Ihrer Wahl, passend zur Top-Bar */
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 20px;
}

.diagonal-section-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Erbt den Hintergrund der Sektion */
    transform-origin: top left;
    transform: skewY(-2deg); /* Der Winkel der Diagonale */
    z-index: -1;
}

/* Wichtig: Der Inhalt muss wieder "gerade" gerückt werden */
.diagonal-section-top > * {
    position: relative;
    z-index: 1;
}

/* Diagonale am unteren Rand */
.diagonal-section-bottom {
    position: relative;
    background-color: #fff; /* Oder eine andere Farbe */
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 20px;
}

.diagonal-section-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transform-origin: bottom left;
    transform: skewY(-2deg);
    z-index: -1;
}

.diagonal-section-bottom > * {
    position: relative;
    z-index: 1;
}

.top-bar {
	background: linear-gradient(135deg, #afd6e7 33%, #d8e8fa 33.0%);
}