/*
===============================================================================
SCHLAGWÖRTER: GRUNDEINSTELLUNGEN, CSS-VARIABLEN, FARBEN, LAYOUT, SCHRIFT
===============================================================================

Zentrale Grundwerte der Website. Farben, Abstände, maximale Inhaltsbreite,
Schatten und Headerhöhe werden als Variablen definiert und können dadurch
an einer zentralen Stelle angepasst werden.
*/

:root {
    --orange: #f2692e;
    --orange-dark: #d93600;
    --black: #171717;
    --anthracite: #252525;
    --light-grey: #f3f3f3;
    --border-grey: #dddddd;
    --white: #ffffff;

    --container: 1200px;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.08);

    --header-height: 90px;
}

/*
===============================================================================
SCHLAGWÖRTER: BOX-MODELL, UNIVERSAL-RESET, ELEMENTGRÖSSEN
===============================================================================

Das Border-Box-Modell sorgt dafür, dass Innenabstände und Rahmen in der
angegebenen Breite und Höhe eines Elements enthalten sind.
*/

* {
    box-sizing: border-box;
}

/*
===============================================================================
SCHLAGWÖRTER: HTML, SCROLLVERHALTEN, ANCHOR-LINKS, MOBILE DARSTELLUNG
===============================================================================

Smooth Scrolling sorgt für weiches Scrollen zu Sprungzielen. Das Scroll-Padding
berücksichtigt den fixierten beziehungsweise sticky Header.
*/

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 10px);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/*
===============================================================================
SCHLAGWÖRTER: BODY, GRUNDSCHRIFT, TEXTFARBE, SEITENHINTERGRUND
===============================================================================

Definiert die grundlegende Darstellung des gesamten Dokuments.
*/

body {
    padding-top: var(--header-height);
    margin: 0;
    overflow-x: hidden;
    color: var(--black);
    background: var(--white);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.7;
}

/*
===============================================================================
SCHLAGWÖRTER: MOBILE MENÜ, SCROLLSPERRE, MENÜZUSTAND
===============================================================================

Während das mobile Menü geöffnet ist, wird das Scrollen der Hauptseite
unterbunden.
*/

body.menu-open {
    overflow: hidden;
}

/*
===============================================================================
SCHLAGWÖRTER: BILDER, RESPONSIVE BILDER, BLOCK-ELEMENT
===============================================================================

Bilder werden als Blockelemente behandelt und dürfen niemals breiter als
ihr übergeordnetes Element werden.
*/

img {
    display: block;
    max-width: 100%;
}

/*
===============================================================================
SCHLAGWÖRTER: LINKS, VERERBTE TEXTFARBE
===============================================================================
*/

a {
    color: inherit;
}

/*
===============================================================================
SCHLAGWÖRTER: ÜBERSCHRIFTEN, TYPOGRAFIE, ZEILENUMBRUCH
===============================================================================

Gemeinsame Grundeinstellungen für alle Überschriften.
*/

h1,
h2,
h3 {
    margin-top: 0;
    line-height: 1.15;
    overflow-wrap: break-word;
}

/*
===============================================================================
SCHLAGWÖRTER: HAUPTÜBERSCHRIFT, HERO, RESPONSIVE TYPOGRAFIE
===============================================================================
*/

h1 {
    margin-bottom: 24px;
    font-size: clamp(2.6rem, 7vw, 6.5rem);
    letter-spacing: -0.05em;
}

/*
===============================================================================
SCHLAGWÖRTER: ABSCHNITTSÜBERSCHRIFT, RESPONSIVE TYPOGRAFIE
===============================================================================
*/

h2 {
    margin-bottom: 20px;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    letter-spacing: -0.035em;
}

/*
===============================================================================
SCHLAGWÖRTER: UNTERÜBERSCHRIFT, KARTENÜBERSCHRIFT
===============================================================================
*/

h3 {
    margin-bottom: 16px;
    font-size: 1.35rem;
}

/*
===============================================================================
SCHLAGWÖRTER: ABSÄTZE, TEXTABSTÄNDE
===============================================================================
*/

p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/*
===============================================================================
SCHLAGWÖRTER: LETZTER ABSATZ, ABSTANDSKORREKTUR
===============================================================================

Der letzte Absatz innerhalb eines Containers erhält keinen zusätzlichen
unteren Außenabstand.
*/

p:last-child {
    margin-bottom: 0;
}

/*
===============================================================================
SCHLAGWÖRTER: LAYOUT, BASISKOMPONENTEN, INHALTSBREITE
===============================================================================
*/

/*
    SCHLAGWÖRTER: CONTAINER, ZENTRIERUNG, MAXIMALE BREITE

    Der Container begrenzt die Breite des Inhalts und zentriert ihn horizontal.
*/
.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

/*
    SCHLAGWÖRTER: SEKTIONEN, VERTIKALER ABSTAND

    Einheitlicher Innenabstand für größere Inhaltsabschnitte.
*/
.section {
    padding: 100px 0;
}

/*
    SCHLAGWÖRTER: HELLER ABSCHNITT, HINTERGRUND
*/
.section--light {
    background: var(--light-grey);
}

/*
    SCHLAGWÖRTER: DUNKLER ABSCHNITT, KONTRAST, HINTERGRUND
*/
.section--dark {
    color: var(--white);
    background: var(--anthracite);
}

/*
    SCHLAGWÖRTER: FEATURE-SEKTION, BILD-LINKS-VOLLFORMAT, GROSSE BILDER

    Bild/Text-Sektionen mit Bild, das am linken Viewport-Rand startet,
    die volle Sektionshöhe einnimmt und den normalen Container-Rand ignoriert.
    Der Text bleibt innerhalb der normalen Inhaltsbreite.
*/
.section--feature {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.section--feature .split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
}

.section--feature .split-media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    min-height: 100%;
    overflow: hidden;
    background: var(--anthracite);
}

.section--feature .split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
    SCHLAGWÖRTER: KI-KENNZEICHNUNG, BILDHINWEIS, ZUGÄNGLICHKEIT

    Der dezente Hinweis steht direkt bei den drei redaktionellen Bildern.
    Die Formulierung beschreibt nur eine mögliche Unterstützung bei der
    Bilddarstellung und macht keine Aussage zur konkreten Bildherkunft.
*/
.image-ai-label {
    position: absolute;
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 5px 9px;
    color: var(--black);
    background: rgba(255, 255, 255, 0.40);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
    letter-spacing: 0.01em;
}

.section--feature .split-content {
    width: auto;
    margin: 0;
    padding: 100px 0 100px clamp(24px, 3vw, 56px);
    /* The media item is absolute and therefore no longer creates a grid item.
       Keep the text in the right column of the centered container while
       preserving a deliberate horizontal breathing space to the image. */
    grid-column: 2;
}

.section--feature .container {
    width: min(calc(100% - 40px), var(--container));
    max-width: var(--container);
    margin-inline: auto;
}

/*
===============================================================================
SCHLAGWÖRTER: ABSCHNITTSKÖPFE, BADGES, EINLEITUNGSTEXTE
===============================================================================
*/

/*
    SCHLAGWÖRTER: SECTION-HEADER, ABSCHNITTSÜBERSCHRIFT, MAXIMALE BREITE
*/
.section-header {
    max-width: 780px;
    margin-bottom: 50px;
}

/*
    SCHLAGWÖRTER: ÜBER UNS, SECTION-HEADER VOLLBREITE, FLIESSTEXT
    Überschrift und Einleitungstext des Abschnitts „Über uns" nutzen
    die gesamte verfügbare Containerbreite.
*/
#ueber-uns .section-header {
    max-width: none;
}

/*
    SCHLAGWÖRTER: ÜBER UNS, HINTERGRUNDBILD, LESBARKEIT
    Halbtransparenter Weiß-Overlay über dem Hintergrundbild für gute Lesbarkeit.
*/
#ueber-uns {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        url("images/ueber-uns.png");
    background-size: cover;
    background-position: center;
}

/*
    SCHLAGWÖRTER: UNSERE LEISTUNGEN, SECTION-HEADER VOLLBREITE, FLIESSTEXT
    Überschrift und Einleitungstext des Abschnitts „Unsere Leistungen"
    nutzen – wie bei „Über uns" – die gesamte verfügbare Containerbreite.
*/
#leistungen .section-header {
    max-width: none;
}

/*
    SCHLAGWÖRTER: UNSERE LEISTUNGEN, HINTERGRUNDBILD, LESBARKEIT
    Gleicher Stil wie „Über uns": Halbtransparenter Weiß-Overlay über einem
    Hintergrundbild, damit der Inhalt gut lesbar bleibt.
*/
#leistungen {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        url("images/kompetenz.png");
    background-size: cover;
    background-position: center;
}

/*
    SCHLAGWÖRTER: SECTION-HEADER-LEFT, LINKSBÜNDIGER ABSCHNITTSKOPF
*/
.section-header--left {
    margin-bottom: 24px;
    text-align: left;
}

/*
    SCHLAGWÖRTER: SECTION-BADGE, KATEGORIE, LABEL, AKZENTFARBE
*/
.section-badge {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--orange);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/*
    SCHLAGWÖRTER: SECTION-SUBTITLE, UNTERTITEL, EINLEITUNG
*/
.section-subtitle {
    font-size: 1.15rem;
    color: inherit;
    opacity: 0.9;
}

/*
    SCHLAGWÖRTER: LEAD, HERVORGEHOBENER EINLEITUNGSTEXT
*/
.lead {
    font-size: 1.2rem;
    line-height: 1.6;
}

/*
    SCHLAGWÖRTER: CARD-BADGE, NUMMERIERUNG, KARTEN
*/
.card-badge {
    margin-bottom: 24px;
    color: var(--orange);
    font-size: 0.9rem;
    font-weight: 700;
}

/*
    SCHLAGWÖRTER: WKP, NUMMERN 01–04, GRÖSSER

    Die Nummern 01–04 im Bereich „Wiederkehrende Prüfung" werden
    etwas größer dargestellt.
*/
.wkp-intro .card-badge,
.benefit-grid .card-badge,
.service-card .card-badge {
    font-size: 1.25rem;
}

/*
    SCHLAGWÖRTER: DESKTOP-ZEILENUMBRUCH, RESPONSIVE BREAK
*/
.br-desktop {
    display: inline;
}

/*
===============================================================================
SCHLAGWÖRTER: SPLIT-LAYOUT, ZWEISPALTIGES LAYOUT, BILD UND TEXT
===============================================================================
*/

/*
    SCHLAGWÖRTER: SPLIT-LAYOUT, GRID, ZWEI SPALTEN

    Standardlayout für Bild-Text-Kombinationen.
*/
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

/*
    SCHLAGWÖRTER: SPLIT-MEDIA, BILDBEREICH, RESPONSIVE BILDHÖHE
*/
.split-media {
    position: relative;
    overflow: hidden;
    align-self: stretch;
    min-height: 420px;
    background: var(--light-grey);
}

/*
    SCHLAGWÖRTER: SPLIT-BILDER, OBJECT-FIT, BILDAUSSCHNITT
*/
.split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
    SCHLAGWÖRTER: SPLIT-CONTENT, TEXTBEREICH, VERTIKALE AUSRICHTUNG
*/
.split-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/*
    SCHLAGWÖRTER: REVERSE-LAYOUT, BILDREIHENFOLGE, DESKTOP
*/
.split-layout--reverse .split-media {
    order: 2;
}

/*
===============================================================================
SCHLAGWÖRTER: HEADER, STICKY HEADER, LOGO, NAVIGATION
===============================================================================
*/

/*
    SCHLAGWÖRTER: SITE-HEADER, STICKY, HEADER, TRANSPARENZ, TRENNLINIE

    Der Header bleibt beim Scrollen am oberen Bildschirmrand sichtbar.
*/
.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255);
    border-bottom: 1px solid var(--border-grey);
    backdrop-filter: blur(12px);
}

/*
    SCHLAGWÖRTER: HEADER-INNER, FLEXBOX, HEADER-HÖHE, AUSRICHTUNG
*/
.header-inner {
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/*
    SCHLAGWÖRTER: LOGO-LINK, LOGO-CONTAINER
*/
.logo-link {
    display: block;
    flex: 0 0 auto;
}

/*
    SCHLAGWÖRTER: LOGO, LOGOBREITE
*/
.logo {
    width: 165px;
    height: auto;
}

/*
    SCHLAGWÖRTER: HAUPTNAVIGATION, DESKTOP-NAVIGATION, FLEXBOX
*/
.main-navigation {
    display: flex;
    align-items: center;
    gap: 32px;
}

/*
    SCHLAGWÖRTER: NAVIGATIONSLINKS, HOVER, TYPOGRAFIE
*/
.main-navigation a {
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

/*
    SCHLAGWÖRTER: NAVIGATION-HOVER, AKZENTFARBE
*/
.main-navigation a:hover {
    color: var(--orange);
}

/*
    SCHLAGWÖRTER: NAVIGATION-BUTTON, KONTAKT, CALL-TO-ACTION
*/
.main-navigation .nav-button {
    padding: 12px 22px;
    color: var(--white);
    background: var(--orange);
}

/*
    SCHLAGWÖRTER: NAVIGATION-BUTTON-HOVER
*/
.main-navigation .nav-button:hover {
    color: var(--white);
    background: var(--orange-dark);
}

/*
    SCHLAGWÖRTER: MOBILE MENÜBUTTON, HAMBURGER-MENÜ

    Der Button ist standardmäßig unsichtbar und wird erst in der mobilen
    Media Query eingeblendet.
*/
.menu-button {
    display: none;
    width: 48px;
    height: 48px;
    padding: 11px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/*
    SCHLAGWÖRTER: HAMBURGER-LINIEN, MENÜICON
*/
.menu-button span {
    display: block;
    height: 2px;
    margin: 6px 0;
    background: var(--black);
}

/*
===============================================================================
SCHLAGWÖRTER: HERO, TITELBEREICH, HINTERGRUNDBILD, OVERLAY
===============================================================================
*/

/*
    SCHLAGWÖRTER: HERO, FULLSCREEN-BEREICH, HINTERGRUNDBILD

    Der Hero-Bereich nutzt mindestens die verfügbare Bildschirmhöhe unterhalb
    des Headers.
*/
.hero {
    position: relative;
    display: flex;
    min-height: calc(100vh - var(--header-height));
    align-items: center;
    color: var(--white);
    background:
        url("images/hero.jpg") center / cover no-repeat,
        var(--anthracite);
}

/*
    SCHLAGWÖRTER: DYNAMIC VIEWPORT, MOBILE BROWSER, HERO-HÖHE

    Die dynamische Viewport-Höhe berücksichtigt mobile Browserleisten genauer,
    sofern der Browser diese CSS-Einheit unterstützt.
*/
@supports (height: 100dvh) {
    .hero {
        min-height: calc(100dvh - var(--header-height));
    }
}

/*
    SCHLAGWÖRTER: HERO-OVERLAY, KONTRAST, LESBARKEIT, VERLAUF

    Der dunkle Verlauf verbessert die Lesbarkeit des Textes vor dem
    Hintergrundbild.
*/
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.65) 55%,
            rgba(0, 0, 0, 0.2) 100%
        );
}

/*
    SCHLAGWÖRTER: HERO-CONTENT, Z-INDEX, INNENABSTAND

    Der Inhalt liegt über dem Overlay und bleibt dadurch sichtbar.
*/
.hero-content {
    position: relative;
    z-index: 1;
    padding-top: 100px;
    padding-bottom: 100px;
}

/*
    SCHLAGWÖRTER: HERO-UNTERTITEL, EINLEITUNG, RESPONSIVE SCHRIFT
*/
.hero-subtitle {
    margin-bottom: 38px;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
}

/*
    SCHLAGWÖRTER: BUTTON-GRUPPE, FLEXBOX, AKTIONEN
*/
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/*
    SCHLAGWÖRTER: BUTTON, CTA, INTERAKTION, TOUCH-ZIEL
*/
.button {
    display: inline-flex;
    min-height: 54px;
    padding: 14px 26px;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

/*
    SCHLAGWÖRTER: PRIMÄRER BUTTON, ORANGE, CTA
*/
.button-primary {
    color: var(--white);
    background: var(--orange);
}

/*
    SCHLAGWÖRTER: PRIMÄRER BUTTON, HOVER, ANIMATION
*/
.button-primary:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
}

/*
    SCHLAGWÖRTER: SEKUNDÄRER BUTTON, TRANSPARENT, KONTRAST
*/
.button-secondary {
    color: var(--white);
    border-color: var(--white);
    background: transparent;
}

/*
    SCHLAGWÖRTER: SEKUNDÄRER BUTTON, HOVER
*/
.button-secondary:hover {
    color: var(--black);
    background: var(--white);
}

/*
    SCHLAGWÖRTER: HERO-FAKTEN, VORTEILE, LISTE
*/
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin: 60px 0 0;
    padding: 0;
    list-style: none;
}

/*
    SCHLAGWÖRTER: HERO-FAKTEN, AUFZÄHLUNG, ORANGE PUNKTE
*/
.hero-facts li::before {
    margin-right: 10px;
    color: var(--orange);
    content: "●";
}

/*
===============================================================================
SCHLAGWÖRTER: LEISTUNGEN, SERVICE-GRID, SERVICE-KARTEN
===============================================================================
*/

/*
    SCHLAGWÖRTER: SERVICE-GRID, DREI SPALTEN, LEISTUNGSÜBERSICHT
*/
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/*
    SCHLAGWÖRTER: SERVICE-CARD, LEISTUNGSKARTE, SCHATTEN, HOVER
*/
.service-card {
    padding: 38px;
    background: var(--white);
    border-top: 4px solid transparent;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

/*
    SCHLAGWÖRTER: SERVICE-CARD-HOVER, AKZENTLINIE, ANIMATION
*/
.service-card:hover {
    border-top-color: var(--orange);
    transform: translateY(-6px);
}

/*
    SCHLAGWÖRTER: FEATURED-CARD, HERVORGEHOBENE LEISTUNG
*/
.featured-card {
    color: var(--white);
    background: var(--anthracite);
    border-top-color: var(--orange);
}

/*
    SCHLAGWÖRTER: SERVICE-LISTE, AUFZÄHLUNG, ABSTÄNDE
*/
.service-card ul {
    margin: 22px 0 0;
    padding-left: 20px;
}

/*
    SCHLAGWÖRTER: SERVICE-LISTENEINTRÄGE
*/
.service-card li {
    margin-bottom: 8px;
}

/*
===============================================================================
SCHLAGWÖRTER: BILDINHALTE, CHECKLISTEN, TEXTLINKS
===============================================================================
*/

/*
    SCHLAGWÖRTER: CHECK-LISTE, VORTEILE, AUFZÄHLUNG
*/
.check-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

/*
    SCHLAGWÖRTER: CHECK-LISTE, ABSTÄNDE
*/
.check-list li {
    margin-bottom: 12px;
}

/*
    SCHLAGWÖRTER: CHECK-LISTE, HAKEN, PSEUDOELEMENT
*/
.check-list li::before {
    margin-right: 12px;
    color: var(--orange);
    font-weight: 700;
    content: "✓";
}

/*
    SCHLAGWÖRTER: TEXTLINK, INLINE-LINK, PFEIL
*/
.text-link {
    display: inline-flex;
    margin-top: 10px;
    min-height: 44px;
    align-items: center;
    color: var(--orange);
    font-weight: 700;
    text-decoration: none;
}

/*
    SCHLAGWÖRTER: TEXTLINK-PFEIL, ABSTAND, TRANSITION
*/
.text-link span {
    margin-left: 8px;
    transition: transform 0.2s ease;
}

/*
    SCHLAGWÖRTER: TEXTLINK-HOVER, PFEILANIMATION
*/
.text-link:hover span {
    transform: translateX(4px);
}

/*
===============================================================================
SCHLAGWÖRTER: WIEDERKEHRENDE PRÜFUNG, WKP, BENEFITS
===============================================================================
*/

/*
    SCHLAGWÖRTER: WKP-INTRO, LINKSAUSRICHTUNG, EINLEITUNG
*/
.wkp-intro {
    align-items: start;
}

/*
    SCHLAGWÖRTER: WKP-INTRO-TEXT, LINKE SPALTE, ÜBERSCHRIFT UND FLIESSTEXT

    Linke Spalte des Split-Layouts: Überschrift (Badge + h2) und
    einleitender Fließtext vertikal gestapelt.
*/
.wkp-intro-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/*
    SCHLAGWÖRTER: BENEFIT-GRID, WKP-VORTEILE, 2X2-RASTER

    Rechte Spalte des Split-Layouts: vier schmalere Karten in einem
    2x2-Raster (01/02 nebeneinander, 03/04 darunter).
*/
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid #4a4a4a;
    border-top: 0;
    background: var(--anthracite);
    align-self: start;
    /* SCHLAGWÖRTER: WKP, GRID EINRÜCKUNG, ZWEI ZEILEN NACH UNTEN */
    margin-top: 2em;
}

/*
    SCHLAGWÖRTER: BENEFIT, WKP-KARTE, TRENNLINIEN

    Schmalere Karten im 2x2-Raster: reduzierte Innenabstände und
    kleinere Schrift für die rechte Spalte des Split-Layouts.
*/
.benefit {
    padding: 26px 24px;
    background: var(--anthracite);
    border-right: 1px solid #4a4a4a;
    border-bottom: 1px solid #4a4a4a;
}

/*
    SCHLAGWÖRTER: BENEFIT-GRID, RECHTE SPALTE, RAHMEN
*/
.benefit:nth-child(2n) {
    border-right: 0;
}

/*
    SCHLAGWÖRTER: BENEFIT-GRID, LETZTE REIHE, RAHMEN
*/
.benefit:nth-last-child(-n + 2) {
    border-bottom: 0;
}

/*
    SCHLAGWÖRTER: WKP, OBERE BEGRENZUNGSLINIE HALBIERT

    Die obere Begrenzungslinie der vier Kästen wird halbiert:
    Jede obere Hälfte (01 und 02) bekommt eine eigene halbe Linie,
    so dass die Linie zwischen 01 und 02 unterbrochen ist.
*/
.benefit:nth-child(1) {
    border-top: 1px solid #4a4a4a;
    border-top-right-radius: 0;
}
.benefit:nth-child(2) {
    border-top: 1px solid #4a4a4a;
    border-top-left-radius: 0;
}

/*
    SCHLAGWÖRTER: BENEFIT-ÜBERSCHRIFT
*/
.benefit h3 {
    margin-bottom: 12px;
    font-size: 1.05rem;
}

.benefit p {
    font-size: 0.95rem;
    line-height: 1.55;
}

/*
===============================================================================
SCHLAGWÖRTER: VORTEILE, ADVANTAGE-GRID, VORTEILSKARTEN
===============================================================================
*/

/*
    SCHLAGWÖRTER: ADVANTAGE-GRID, DREI SPALTEN
*/
.advantage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/*
    SCHLAGWÖRTER: ADVANTAGE-CARD, VORTEILSKARTE, FLEXBOX
*/
.advantage-card {
    display: flex;
    padding: 38px;
    flex-direction: column;
    background: var(--white);
    box-shadow: var(--shadow);
}

/*
    SCHLAGWÖRTER: ADVANTAGE-CARD-ÜBERSCHRIFT
*/
.advantage-card h3 {
    margin-bottom: 14px;
}

/*
    SCHLAGWÖRTER: ICON, VORTEIL-ICON, KREIS, HAKEN
*/
.icon {
    display: flex;
    width: 45px;
    height: 45px;
    margin-bottom: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: var(--orange);
    border-radius: 50%;
    font-weight: 700;
}

/*
===============================================================================
SCHLAGWÖRTER: ÜBER UNS, TEAM, TEAM-KARTEN, HINTERGRUNDBILD
===============================================================================
*/

/*
    SCHLAGWÖRTER: TEAM-GRID, TEAMMITGLIEDER, DREI SPALTEN
*/
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/*
    SCHLAGWÖRTER: TEAM-CARD, TEAM-KARTE, SCHATTEN
*/
.team-card {
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow);
}

/*
    SCHLAGWÖRTER: TEAM-CONTENT, TEAM-TEXT
*/
.team-content {
    padding: 32px;
}

/*
    SCHLAGWÖRTER: TEAM-ROLLE, FUNKTION, POSITION
*/
.team-role {
    max-width: 100%;
    min-height: 1.2em;
    margin-bottom: 14px;
    overflow: hidden;
    color: var(--orange);
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
===============================================================================
SCHLAGWÖRTER: KONTAKT, KONTAKTFORMULAR, FORMULARLAYOUT
===============================================================================
*/

/*
    SCHLAGWÖRTER: KONTAKTABSCHNITT, DUNKLER HINTERGRUND, KONTRAST
*/
.contact-section {
    color: var(--white);
    background: var(--anthracite);
}

/*
    SCHLAGWÖRTER: CONTACT-GRID, KONTAKTINFORMATIONEN, FORMULAR
*/
.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: start;
}

/*
    SCHLAGWÖRTER: KONTAKT-ÜBERSCHRIFT, KLEINERE SCHRIFTGRÖSSE, DREI ZEILEN

    Die Überschrift im Kontaktbereich wird kleiner dargestellt, damit der
    lange Fragesatz auf drei Zeilen umbricht.
*/
#kontakt .section-header h2 {
    font-size: clamp(1.35rem, 1.9vw, 1.65rem);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 18px;
}

/*
    SCHLAGWÖRTER: KONTAKT-TEXTBLOCK, GRÖSSERE SCHRIFT, BÜNDIG ZUM FORMULAR

    Die Absätze unterhalb der Kontaktüberschrift werden vergrößert, damit
    das untere Ende des Textblocks ungefähr bündig mit dem unteren Ende
    des Kontaktformulars abschließt.
*/
#kontakt .contact-information p,
#kontakt .contact-information address {
    font-size: 1.15rem;
    line-height: 1.7;
}

#kontakt .contact-information p {
    margin-bottom: 22px;
}

#kontakt .contact-information address {
    margin: 28px 0;
}

/*
    SCHLAGWÖRTER: ADRESSE, KONTAKTINFORMATIONEN
*/
.contact-information address {
    margin: 32px 0;
    font-style: normal;
}

/*
    SCHLAGWÖRTER: KONTAKTLINKS, TELEFON, E-MAIL
*/
.contact-information a {
    color: var(--white);
    overflow-wrap: break-word;
    text-decoration-color: var(--orange);
}

/*
    SCHLAGWÖRTER: FORMULAR-CONTAINER, FORMULARKARTE
*/
.contact-form-wrapper {
    padding: 45px;
    color: var(--black);
    background: var(--white);
    box-shadow: var(--shadow);
}

/*
    SCHLAGWÖRTER: FORM-ROW, FORMULARZEILE, ZWEI SPALTEN
*/
.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

/*
    SCHLAGWÖRTER: FORM-FIELD, FORMULARFELD, ABSTÄNDE
*/
.form-field {
    margin-bottom: 22px;
}

/*
    SCHLAGWÖRTER: FORMULARLABEL, BESCHRIFTUNG
*/
.form-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 700;
}

/*
    SCHLAGWÖRTER: INPUT, TEXTAREA, FORMULARFELDER, EINGABEFELDER
*/
.form-field input,
.form-field textarea {
    width: 100%;
    max-width: 100%;
    padding: 14px;
    border: 1px solid var(--border-grey);
    border-radius: 0;
    background: var(--white);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
}

/*
    SCHLAGWÖRTER: TEXTAREA, NACHRICHTENFELD, RESIZE
*/
.form-field textarea {
    min-height: 140px;
    resize: vertical;
}

/*
    SCHLAGWÖRTER: FORMULAR-FOCUS, TASTATUR, SICHTBARER FOKUS
*/
.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--orange);
    outline: 2px solid rgba(242, 105, 46, 0.2);
}

/*
    SCHLAGWÖRTER: DATENSCHUTZ-CHECKBOX, PRIVACY-FIELD
*/
.privacy-field {
    display: flex;
    margin-bottom: 25px;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.55;
}

/*
    SCHLAGWÖRTER: CHECKBOX, AKZENTFARBE, DATENSCHUTZ
*/
.privacy-field input {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: var(--orange);
}

/*
    SCHLAGWÖRTER: FORMULAR-BUTTON, ABSENDEN
*/
.contact-form .button {
    width: 100%;
}

/*
    SCHLAGWÖRTER: FORMULAR-MELDUNG, STATUS, VALIDIERUNG
*/
.form-message {
    margin-top: 18px;
    font-weight: 700;
}

/*
    SCHLAGWÖRTER: FORMULAR-ERFOLG, SUCCESS
*/
.form-message.success {
    color: #16743a;
}

/*
    SCHLAGWÖRTER: FORMULAR-FEHLER, ERROR
*/
.form-message.error {
    color: #b00020;
}

/*
===============================================================================
SCHLAGWÖRTER: FOOTER, FOOTER-GRID, RECHTLICHE INFORMATIONEN
===============================================================================
*/

/*
    SCHLAGWÖRTER: SITE-FOOTER, FOOTER-HINTERGRUND, FOOTER-TEXT
*/
.site-footer {
    padding-top: 75px;
    color: #d5d5d5;
    background: #111111;
}

/*
    SCHLAGWÖRTER: FOOTER-GRID, FOOTER-SPALTEN
*/
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr 1fr;
    gap: 50px;
}

/*
    SCHLAGWÖRTER: FOOTER-LOGO, LOGOBREITE
*/
.footer-logo {
    width: 160px;
    margin-bottom: 24px;
}

/*
    SCHLAGWÖRTER: FOOTER-ÜBERSCHRIFT, SPALTENÜBERSCHRIFT
*/
.footer-heading {
    margin-bottom: 20px;
    color: var(--white);
    font-size: 1rem;
}

/*
    SCHLAGWÖRTER: FOOTER-LINKS, NAVIGATION, KONTAKT
*/
.site-footer a {
    display: block;
    margin-bottom: 10px;
    color: #d5d5d5;
    overflow-wrap: break-word;
    text-decoration: none;
    transition: color 0.2s ease;
}

/*
    SCHLAGWÖRTER: FOOTER-HOVER, LINKFARBE
*/
.site-footer a:hover {
    color: var(--orange);
}

/*
    SCHLAGWÖRTER: FOOTER-BOTTOM, COPYRIGHT, UNTERE INFORMATIONEN
*/
.footer-bottom {
    display: flex;
    margin-top: 60px;
    padding: 25px 0;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid #333333;
    font-size: 0.8rem;
}

/*
===============================================================================
SCHLAGWÖRTER: BARRIEREFREIHEIT, SKIP-LINK, FOKUS, UTILITIES
===============================================================================
*/

/*
    SCHLAGWÖRTER: SKIP-LINK, TASTATUR-NAVIGATION, BARRIEREFREIHEIT

    Der Link wird außerhalb des sichtbaren Bereichs positioniert und bei
    Tastaturfokus eingeblendet.
*/
.skip-link {
    position: absolute;
    z-index: 2000;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    color: var(--white);
    background: var(--black);
    transform: translateY(-180%);
    transition: transform 0.2s ease;
}

/*
    SCHLAGWÖRTER: SKIP-LINK-FOCUS, TASTATUR
*/
.skip-link:focus {
    transform: translateY(0);
}

/*
    SCHLAGWÖRTER: FOCUS-VISIBLE, BARRIEREFREIHEIT, FOKUSRAHMEN

    Sichtbare Fokusmarkierung für Tastaturbedienung.
*/
:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
}

/*
    SCHLAGWÖRTER: REDUCED-MOTION, BARRIEREFREIHEIT, ANIMATIONEN

    Nutzerinnen und Nutzer, die reduzierte Bewegung bevorzugen, erhalten
    möglichst wenige Animationen und Übergänge.
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/*
    SCHLAGWÖRTER: FORMULARMELDUNG, HIDDEN, AUSBLENDEN
*/
.form-message[hidden] {
    display: none;
}

/*
===============================================================================
SCHLAGWÖRTER: RESPONSIVE DESIGN, MEDIA QUERIES, BREAKPOINTS
===============================================================================

Die folgenden Media Queries passen Spaltenanzahl, Abstände, Navigation,
Schriftgrößen und Formularfelder an kleinere Bildschirmbreiten an.
===============================================================================
*/

/*
    SCHLAGWÖRTER: TABLET, BREAKPOINT 1024PX, ZWEI SPALTEN

    Mehrspaltige Raster werden auf Tablets auf zwei Spalten reduziert.
*/
@media (max-width: 1024px) {
    .service-grid,
    .team-grid,
    .advantage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }

    .contact-grid {
        gap: 50px;
    }

    .split-layout {
        gap: 40px;
    }
}

/*
    SCHLAGWÖRTER: TABLET-HOCHFORMAT, BREAKPOINT 900PX, ZEILENUMBRUCH

    Der für große Bildschirme vorgesehene manuelle Zeilenumbruch wird
    auf kleineren Bildschirmen deaktiviert.
*/
@media (max-width: 900px) {
    .br-desktop {
        display: none;
    }
}

/*
    SCHLAGWÖRTER: MOBILE, BREAKPOINT 800PX, EINSPALTIGES LAYOUT
*/
@media (max-width: 800px) {
    /*
        SCHLAGWÖRTER: MOBILE SEKTIONEN, VERTIKALE ABSTÄNDE
    */
    .section {
        padding: 75px 0;
    }

    /*
        SCHLAGWÖRTER: MOBILE SPLIT-LAYOUT, EINE SPALTE
    */
    .split-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /*
        SCHLAGWÖRTER: MOBILE BILDBEREICH, MINDESTHÖHE
    */
    .split-media {
        min-height: 300px;
    }

    /*
        SCHLAGWÖRTER: MOBILE FEATURE-SEKTION, NORMALER STACK-LAYOUT

        Auf kleinen Bildschirmen kehrt die Feature-Sektion zum normalen
        Stapel-Layout zurück, damit kein horizontaler Überlauf entsteht
        und das Bild den Text nicht überlagert.
    */
    .section--feature .split-layout {
        grid-template-columns: 1fr;
    }

    .section--feature .split-media {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        min-height: 300px;
        aspect-ratio: auto;
    }

    .section--feature .split-content {
        grid-column: 1;
        width: auto;
        margin: 0;
        padding: 60px 0 0;
    }

    .section--feature .split-content h2 br {
        display: none;
    }

    .section--feature .container {
        width: min(calc(100% - 40px), var(--container));
        margin-inline: auto;
    }

    .section--feature {
        padding: 75px 0;
    }

    /*
        SCHLAGWÖRTER: MOBILE BILDREIHENFOLGE, REVERSE-LAYOUT

        Auf mobilen Geräten wird das Bild auch bei umgekehrten Layouts
        oberhalb des Textes dargestellt.
    */
    .split-layout--reverse .split-media {
        order: -1;
    }

    /*
        SCHLAGWÖRTER: MOBILE KONTAKT-GRID, EINSPALTIG
    */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /*
        SCHLAGWÖRTER: MOBILE BENEFIT-GRID, EINSPALTIG
    */
    .benefit-grid {
        grid-template-columns: 1fr;
    }

    /*
        SCHLAGWÖRTER: MOBILE BENEFIT, TRENNLINIEN
    */
    .benefit {
        border-right: 0 !important;
        padding: 28px 24px;
    }

    .benefit:not(:last-child) {
        border-bottom: 1px solid #4a4a4a;
    }

    .benefit:last-child {
        border-bottom: 0;
    }

    /*
        SCHLAGWÖRTER: MOBILE WKP-INTRO, VOLLSTÄNDIGE BREITE
    */
    .wkp-intro-text {
        width: 100%;
    }

    /*
        SCHLAGWÖRTER: MOBILE VORTEILE, EINSPALTIG
    */
    .advantage-grid {
        grid-template-columns: 1fr;
    }

    /*
        SCHLAGWÖRTER: MOBILE NAVIGATION, HAMBURGER-MENÜ, OFF-CANVAS

        Die Desktopnavigation wird ausgeblendet. Das mobile Menü wird durch
        JavaScript über die Klasse "is-open" eingeblendet.
    */
    .menu-button {
        display: block;
    }

    /*
        SCHLAGWÖRTER: MOBILE NAVIGATION, FIXIERT, SCROLLBAR
    */
    .main-navigation {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        display: none;
        padding: 40px;
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        background: var(--white);
    }

    /*
        SCHLAGWÖRTER: MOBILE MENÜ GEÖFFNET, IS-OPEN
    */
    .main-navigation.is-open {
        display: flex;
    }

    /*
        SCHLAGWÖRTER: MOBILE NAVIGATIONSLINKS, TOUCH-BEDIENUNG
    */
    .main-navigation a {
        padding: 14px 0;
        border-bottom: 1px solid var(--border-grey);
        font-size: 1.2rem;
    }

    /*
        SCHLAGWÖRTER: MOBILE KONTAKT-BUTTON, NAVIGATION-CTA
    */
    .main-navigation .nav-button {
        margin-top: 12px;
        padding: 14px 20px;
        border-bottom: 0;
        text-align: center;
    }

    /*
        SCHLAGWÖRTER: MOBILE FORMULAR, FORM-ROW, EINSPALTIG
    */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/*
    SCHLAGWÖRTER: SMARTPHONE, BREAKPOINT 600PX, KOMPAKTE DARSTELLUNG
*/
@media (max-width: 600px) {
    /*
        SCHLAGWÖRTER: MOBILE CONTAINER, SEITENABSTAND
    */
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    /*
        SCHLAGWÖRTER: MOBILE RASTER, EINSPALTIG
    */
    .service-grid,
    .team-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    /*
        SCHLAGWÖRTER: MOBILE HERO, INNENABSTÄNDE
    */
    .hero-content {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    /*
        SCHLAGWÖRTER: MOBILE HERO-FAKTEN, VERTIKALE LISTE
    */
    .hero-facts {
        flex-direction: column;
        gap: 12px;
        margin-top: 40px;
    }

    /*
        SCHLAGWÖRTER: MOBILE BUTTONS, VOLLE BREITE
    */
    .button-group {
        flex-direction: column;
        align-items: stretch;
    }

    .button-group .button {
        width: 100%;
    }

    /*
        SCHLAGWÖRTER: MOBILE KARTEN, KOMPAKTE INNENABSTÄNDE
    */
    .service-card,
    .advantage-card,
    .benefit {
        padding: 28px;
    }

    /*
        SCHLAGWÖRTER: MOBILE KONTAKTFORMULAR, KOMPAKTER ABSTAND
    */
    .contact-form-wrapper {
        padding: 24px;
    }

    /*
        SCHLAGWÖRTER: MOBILE FOOTER, COPYRIGHT-BEREICH
    */
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: left;
    }

    /*
        SCHLAGWÖRTER: MOBILE LOGO, LOGOBREITE
    */
    .logo {
        width: 135px;
    }
}