/* ===================================================================
 * creativparc – Corporate Design
 *
 * Farben und Schrift nach SiteMap_creativparc_de.pdf:
 *
 *   Pantone 137 C            #FFA40D   Header, Spiegelpunkte,
 *                                      besondere Hervorhebungen
 *   Pantone Process Black C  #2C2A29   Copytext
 *   Pantone 428 C            #C0C6D6   Hintergrund, Offbuttons
 *
 *   Yanone Kaffeesatz        bold (700)   Headlines
 *                            light (300)  Copy
 *
 * Aufbau
 *   1  Design-Tokens
 *   2  Bootstrap-Variablen
 *   3  Grundtypografie
 *   4  Kopfbereich und Navigation
 *   5  Banner
 *   6  Icon-Leiste
 *   7  Icon-Kacheln
 *   8  Inhaltsflaechen und Module
 *   9  Zitatblase
 *  10  Footer
 *  11  Pop-Up
 *  12  Hilfsklassen
 * =================================================================== */


/* -------------------------------------------------------------------
 * 1  Design-Tokens
 * ---------------------------------------------------------------- */

:root {
    /* Corporate Design */
    --cp-orange: #ffa40d;
    --cp-black: #2C2A29;
    --cp-grey: #C0C6D6;

    /* Abstufungen, aus den drei CD-Farben abgeleitet */
    --cp-orange-dark: #E3530F;
    --cp-orange-light: #FFC259;
    --cp-black-soft: #57534F;
    --cp-black-muted: #8A8580;
    --cp-grey-dark: #414858;     /* CD-Grau abgedunkelt, fuer Schrift auf hellem Grund */
    --cp-grey-light: #E4E7EF;
    --cp-grey-lighter: #F2F4F8;
    --cp-white: #FFFFFF;

    /* Flaechen */
    --cp-surface: var(--cp-white);
    --cp-surface-shadow: 0 1px 3px rgba(44, 42, 41, .10), 0 6px 18px rgba(44, 42, 41, .06);

    /* Typografie
     * Yanone Kaffeesatz laeuft schmal und optisch klein. Die Basisgroesse
     * liegt deshalb ueber dem, was man einer Grotesk geben wuerde. */
    --cp-font: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --cp-font-size: 1.1875rem;   /* 19px */
    --cp-line-height: 1.55;
    --cp-weight-copy: 300;
    --cp-weight-strong: 600;
    --cp-weight-head: 700;

    /* Raster */
    --cp-radius: 2px;
    --cp-gap: 1.5rem;
    --cp-section-gap: 2.5rem;
}

.top-menue {
    display: flex;         /* Richtet die li-Elemente waagerecht nebeneinander aus */
    justify-content: flex-end;
    list-style: none;      /* Entfernt die Aufzählungszeichen (Listenpunkte) */
    margin: 0;             /* Entfernt den Standard-Außenabstand des Browser-Styles */
    padding: 0;            /* Entfernt den Standard-Innenabstand des Browser-Styles */
    gap: 0;
}

/* Filigraner Gegenpol zur Hauptnavigation: leichter Schnitt, kleiner,
 * gedeckte Farbe, keine Versalien. Die Eintraege trennt eine feine
 * Linie statt eines grossen Abstands. */
.top-menue li + li {
    border-left: 1px solid var(--cp-grey);
}

.top-menue a {
    display: block;
    padding: 0 .75rem;
    text-decoration: none; /* Entfernt den Unterstrich der Links */
    font-weight: var(--cp-weight-copy);
    font-size: 1rem;
    letter-spacing: .03em;
    color: var(--cp-black-soft);
}

.top-menue li:last-child a {
    padding-right: 0;
}

.top-menue a:hover,
.top-menue a:focus-visible {
    color: var(--cp-orange-dark);      /* Farbwechsel beim Drüberfahren mit der Maus */
}

/* Hotline in derselben leichten Anmutung */
.cp-header > .flex-container .cp-header-phone {
    font-weight: var(--cp-weight-copy);
    font-size: 1rem;
    letter-spacing: .03em;
    color: var(--cp-black-soft);
}

/* -------------------------------------------------------------------
 * 2  Bootstrap-Variablen
 *
 * Bootstrap 5 laesst sich ueber seine eigenen Custom Properties
 * umfaerben. Das ist der Weg, der ohne Sass-Build auskommt und den
 * Komponenten (Buttons, Modals, Navbar, Formulare) automatisch mit.
 * ---------------------------------------------------------------- */

:root {
    --bs-primary: #FFA40D;
    --bs-primary-rgb: 255, 164, 13;
    --bs-secondary: #2C2A29;
    --bs-secondary-rgb: 44, 42, 41;

    --bs-body-color: var(--cp-black);
    --bs-body-color-rgb: 44, 42, 41;
    --bs-body-font-family: var(--cp-font);
    --bs-body-font-size: var(--cp-font-size);
    --bs-body-font-weight: var(--cp-weight-copy);
    --bs-body-line-height: var(--cp-line-height);

    --bs-heading-color: var(--cp-orange);

    --bs-link-color: var(--cp-orange);
    --bs-link-color-rgb: 255, 164, 13;
    --bs-link-hover-color: var(--cp-orange-dark);
    --bs-link-hover-color-rgb: 224, 141, 0;

    --bs-border-color: var(--cp-grey);
    --bs-border-radius: var(--cp-radius);
    --bs-border-radius-sm: var(--cp-radius);
    --bs-border-radius-lg: var(--cp-radius);

    --bs-emphasis-color: var(--cp-black);
    --bs-focus-ring-color: rgba(255, 164, 13, .35);
}


/* -------------------------------------------------------------------
 * 3  Grundtypografie
 * ---------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--cp-font);
    font-weight: var(--cp-weight-copy);
    font-size: var(--cp-font-size);
    line-height: var(--cp-line-height);
    color: var(--cp-black);

    /* Buettenpapier-Hintergrund des Corporate Designs.
     * Bewusst relativ referenziert – frueher stand hier eine absolute
     * URL auf relaunch.creativparc.de. */
    background-color: var(--cp-grey-lighter);
    background-image: url('../../media/background.jpg');
    background-repeat: repeat;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
.cp-headline {
    font-family: var(--cp-font);
    font-weight: 100;
    color: var(--cp-orange);
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: .6em;
    letter-spacing: .01em;
}

h1, .h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); }
h2, .h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.15rem); }
h3, .h3 { font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem); }
h4, .h4 { font-size: 1.35rem; }
h5, .h5 { font-size: 1.2rem; }
h6, .h6 { font-size: 1.1rem; }



/* Zwischenueberschriften im Fliesstext stehen in Copyfarbe, damit das
 * Orange seine Signalwirkung fuer H1/H2 behaelt. */
.cp-content h3,
.cp-content h4,
.cp-content h5,
.cp-content h6 {
    color: var(--cp-black);
}

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

strong, b {
    font-weight: var(--cp-weight-strong);
    color: var(--cp-black);
}

a {
    color: var(--cp-orange);
    text-decoration: none;
    transition: color .15s ease-in-out;
}

a:hover,
a:focus-visible {
    color: var(--cp-orange-dark);
    text-decoration: underline;
}

/* „Spiegelpunkte“ – Aufzaehlungspunkte in Orange, siehe CD-Legende */
.cp-content ul {
    list-style: none;
    padding-left: 1.4em;
}

.cp-content ul > li {
    position: relative;
    margin-bottom: .35em;
}

.cp-content ul > li::before {
    content: '•';
    position: absolute;
    left: -1em;
    color: var(--cp-orange);
    font-weight: var(--cp-weight-head);
}

.cp-content ol {
    padding-left: 1.4em;
}

.cp-content ol > li {
    margin-bottom: .35em;
}

.cp-content ol > li::marker {
    color: var(--cp-orange);
    font-weight: var(--cp-weight-strong);
}

hr,
.cp-rule {
    border: 0;
    border-top: 1px solid var(--cp-orange);
    opacity: 1;
    margin: var(--cp-gap) 0;
}

/* Sichtbarer Fokus – Yanone light hat wenig Kontrast, der Ring muss
 * deshalb deutlich ausfallen. */
:focus-visible {
    outline: 3px solid var(--cp-orange);
    outline-offset: 2px;
}

.cp-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    background: var(--cp-orange);
    color: var(--cp-black);
    padding: .75rem 1.25rem;
    font-weight: var(--cp-weight-head);
}

.cp-skip-link:focus {
    left: 0;
}


/* -------------------------------------------------------------------
 * 4  Kopfbereich und Navigation
 * ---------------------------------------------------------------- */

.cp-header {
    background: transparent;
}

/* Obere Zeile: Telefonnummer und Claim */
.cp-header-top {
    padding: .9rem 0 .4rem;
}

/* Logo links, rechts daneben das Menue und darunter der Claim.
 *
 * Ein Raster statt Flexbox, weil Menue und Claim uebereinander in
 * derselben Spalte stehen, das Logo aber ueber beide Zeilen reicht. */
.cp-header-top__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "logo nav"
        "logo claim";
    align-items: center;
    gap: .25rem 1.5rem;
}

.cp-logo {
    grid-area: logo;
}

.cp-header-navigation {
    grid-area: nav;
    align-self: end;
}

.cp-header-top__inner > .cp-header-contact {
    grid-area: claim;
    align-self: start;
}

.cp-logo img {
    max-height: 78px;
    max-width: 100%;
    height: auto;
    width: auto;
}

/* Schmal: Logo und Menueknopf in einer Zeile, der Claim darunter ueber
 * die volle Breite. */
@media (max-width: 991.98px) {
    .cp-header-top__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo nav"
            "claim claim";
    }

    .cp-header-navigation {
        align-self: center;
    }
}

.cp-header-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: .35rem 1.1rem;
    margin-left: auto;
}

.cp-header-phone {
    font-weight: var(--cp-weight-head);
    font-size: 1rem;
    color: var(--cp-grey-dark);
    white-space: nowrap;
}

.cp-header-phone:hover,
.cp-header-phone:focus-visible {
    color: var(--cp-orange-dark);
    text-decoration: none;
}

/* Slogan neben der Telefonnummer.
 *
 * Gesetzt in der Hausschrift, wie es die Vorgabe fuer die Schrift
 * festlegt. Die Schnitte der Vorlage – Headlines bold, Copy light –
 * treffen einen Slogan nicht; er steht deshalb im leichten Schnitt,
 * dafuer deutlich groesser als der Fliesstext.
 *
 * Kein kursiver Schnitt: Yanone Kaffeesatz bringt keinen mit, der
 * Browser wuerde die Buchstaben nur rechnerisch neigen. */
.cp-header-claim {
    font-family: var(--cp-font);
    font-weight: 300;
    font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
    line-height: 1.2;
    color: var(--cp-black-soft);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .cp-header-claim {
        white-space: normal;
    }
}

/* Hauptnavigation – dunkler Balken, Schrift versal
 *
 * Der Balken laeuft nicht ueber die volle Seitenbreite, sondern endet dort,
 * wo darunter das Bannerbild beginnt. Deshalb traegt nicht das <nav> die
 * Farbe, sondern ein Element innerhalb des Containers.
 *
 * Der Innenabstand entspricht dem weissen Rahmen des Banners, damit die
 * erste Beschriftung auf einer Linie mit dem Bild darunter steht. */
.cp-nav {
    --cp-nav-inset: 10px;
    --cp-nav-link-padding: 1.05rem;
}

/* Die --bs-navbar-* gehoeren auf genau das Element, das auch .navbar
 * traegt. Bootstrap setzt sie in der .navbar-Regel selbst; stuenden sie
 * hier weiter oben, wuerde die eigene Deklaration von Bootstrap die
 * vererbten Werte schlagen – die Beschriftungen waeren grau statt weiss
 * und der Balken bekaeme zusaetzliche Hoehe. */
.cp-nav__bar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-padding-x: 0;

    /* Der Innenabstand der Beschriftungen laeuft bei Bootstrap ueber diese
     * Variable. Setzt man ihn direkt auf .nav-link, greift er nicht: die
     * Regel .navbar-expand-lg .navbar-nav .nav-link ist staerker. */
    --bs-navbar-nav-link-padding-x: var(--cp-nav-link-padding);

    --bs-navbar-color: var(--cp-white);
    --bs-navbar-hover-color: var(--cp-orange);
    --bs-navbar-active-color: var(--cp-orange);
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, .35);
    --bs-navbar-toggler-focus-width: .2rem;

    background: var(--cp-black);
    padding-inline: var(--cp-nav-inset);
}

/* Menue im Kopfbereich: hell statt dunkler Balken, rechtsbuendig.
 *
 * Das Navigationstemplate bringt einen eigenen .container mit. Neben
 * dem Logo wuerde dessen Innenabstand und Maximalbreite das Menue vom
 * rechten Rand wegschieben, deshalb wird er hier neutralisiert. */
.cp-header-navigation .container {
    max-width: none;
    padding-inline: 0;
}

.cp-header-navigation .cp-nav__bar {
    justify-content: flex-end;
    background: none;
    padding-inline: 0;
    --bs-navbar-color: var(--cp-grey-dark);
    --bs-navbar-hover-color: var(--cp-orange-light);
    --bs-navbar-active-color: var(--cp-orange-dark);
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, .2);
}

.cp-header-navigation .navbar-collapse {
    justify-content: flex-end;
}

/* Rechtsbuendig: den Innenabstand der letzten Beschriftung am rechten
 * Rand ausgleichen statt am linken. */
.cp-header-navigation .navbar-nav {
    margin-inline-start: 0;
    margin-inline-end: calc(-1 * var(--cp-nav-link-padding));
}

/* Das weisse Menuesymbol waere auf hellem Grund unsichtbar. */
.cp-header-navigation .cp-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232C2A29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Aufgeklappt auf schmalen Bildschirmen: Eintraege rechtsbuendig unter
 * dem Menueknopf. */
@media (max-width: 991.98px) {
    .cp-header-navigation .navbar-nav {
        margin-inline-end: 0;
        text-align: right;
    }
}

/* Die Beschriftungen bringen ihren eigenen Innenabstand mit. Damit die
 * erste buendig zum Bannerbild sitzt, wird er hier einmal ausgeglichen. */
.cp-nav .navbar-nav {
    /* Unterhalb des Umbruchpunkts greift die Variable oben nicht, dort
     * gilt diese. Beide Male derselbe Wert, damit die Ausrichtung in jeder
     * Breite stimmt. */
    --bs-nav-link-padding-x: var(--cp-nav-link-padding);

    gap: .1rem;
    margin-inline-start: calc(-1 * var(--cp-nav-link-padding));
}

.cp-nav .nav-link {
    text-transform: uppercase;
    font-weight: var(--cp-weight-strong);
    font-size: 1.05rem;
    letter-spacing: .06em;
    padding-block: .85rem;
    position: relative;
}

.cp-nav .nav-link::after {
    content: '';
    position: absolute;
    left: var(--cp-nav-link-padding);
    right: var(--cp-nav-link-padding);
    bottom: .5rem;
    height: 2px;
    background: var(--cp-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .15s ease-in-out;
}

.cp-nav .nav-link:hover::after,
.cp-nav .nav-link:focus-visible::after,
.cp-nav .nav-link.active::after {
    transform: scaleX(1);
}

.cp-nav .navbar-toggler {
    padding: .5rem .75rem;
    margin: .5rem 0;
}

.cp-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Sprachumschalter */
.cp-lang {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: .75rem;
    padding-left: .75rem;
    border-left: 1px solid rgba(255, 255, 255, .25);
    /* letzte Beschriftung buendig zum rechten Balkenrand */
    margin-right: -.4rem;
}

.cp-lang__item {
    text-transform: uppercase;
    font-size: .95rem;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .65);
    padding: .25rem .4rem;
}

.cp-lang__item:hover,
.cp-lang__item:focus-visible {
    color: var(--cp-orange);
    text-decoration: none;
}

.cp-lang__item[aria-current='true'] {
    color: var(--cp-orange);
    font-weight: var(--cp-weight-head);
}

@media (max-width: 991.98px) {
    .cp-lang {
        margin: .5rem 0 .75rem;
        padding: .75rem 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .25);
    }
}

/* Aufgeklappt auf schmalen Bildschirmen braucht der Balken unten Luft. */
@media (max-width: 991.98px) {
    .cp-nav .navbar-collapse.show,
    .cp-nav .navbar-collapse.collapsing {
        padding-bottom: .5rem;
    }
}


/* -------------------------------------------------------------------
 * 5  Banner
 * ---------------------------------------------------------------- */

.cp-banner {
    margin-bottom: 10px;
}

.cp-banner__figure {
    margin: 0;
    background: var(--cp-white);
    padding: 10px;
    box-shadow: var(--cp-surface-shadow);
}

.cp-banner__image {
    display: block;
    width: 100%;
    height: auto;
}

.cp-banner__caption {
    margin: .5rem 0 0;
    font-size: .95rem;
    color: var(--cp-black-muted);
}

/* Abstandsvarianten, die im Modul waehlbar sind */
.cp-banner--pad-0 .cp-banner__figure { padding: 0; }
.cp-banner--pad-5 .cp-banner__figure { padding: 5px; }
.cp-banner--pad-20 .cp-banner__figure { padding: 20px; }


/* -------------------------------------------------------------------
 * 6  Icon-Leiste
 *
 * Die vier Sprechblasen-Signets unter dem Banner. Fuehren laut SiteMap
 * zu Orientierung, Erfolg, Abgrenzung und „Fuenf gute Gruende“.
 * ---------------------------------------------------------------- */

.cp-iconbar {
    background: var(--cp-grey-light);
    padding: 1.5rem 1rem;
    margin-bottom: var(--cp-gap);
    box-shadow: var(--cp-surface-shadow);
}

.cp-iconbar__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .cp-iconbar__list {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cp-iconbar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
    color: var(--cp-black);
    padding: .5rem;
}

.cp-iconbar__link:hover,
.cp-iconbar__link:focus-visible {
    color: var(--cp-orange);
    text-decoration: none;
}

.cp-iconbar__icon {
    /* Die Signets liegen mit rund 460 Pixeln Kantenlaenge vor. Ohne feste
     * Obergrenze wuerden sie die halbe Seite fuellen. */
    max-width: min(100%, 150px);
    height: auto;
    transition: transform .18s ease-in-out;
}

.cp-iconbar__link:hover .cp-iconbar__icon,
.cp-iconbar__link:focus-visible .cp-iconbar__icon {
    transform: translateY(-4px);
}

.cp-iconbar__label {
    font-weight: var(--cp-weight-head);
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cp-iconbar--size-m .cp-iconbar__icon { max-width: min(100%, 210px); }
.cp-iconbar--size-l .cp-iconbar__icon { max-width: min(100%, 280px); }


/* -------------------------------------------------------------------
 * 7  Icon-Kacheln
 *
 * Die orangen Kacheln der Seite „Mehrwert“. Laut SiteMap drei bis
 * sechs Stueck, jede mit eigenem Icon und eigenem Ziel (PDF, Seite
 * oder Pop-Up).
 * ---------------------------------------------------------------- */

.cp-tiles {
    margin-top: var(--cp-gap);
    margin-bottom: var(--cp-section-gap);
}

.cp-tiles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-tile {
    display: flex;
}

.cp-tile__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .9rem;
    width: 100%;
    padding: 2rem 1.25rem 1.5rem;
    text-align: center;
    color: var(--cp-white);
    background: var(--cp-orange);

    /* Die Kachel des Corporate Designs ist unten leicht eingezogen. */
    clip-path: polygon(0 0, 100% 0, 100% 93%, 50% 100%, 0 93%);
    transition: background-color .18s ease-in-out, transform .18s ease-in-out;
}

.cp-tile__link:hover,
.cp-tile__link:focus-visible {
    background: var(--cp-orange-dark);
    color: var(--cp-white);
    text-decoration: none;
    transform: translateY(-3px);
}

.cp-tile__icon {
    width: 96px;
    height: auto;
    /* Die freigestellten Signets sind weiss. Der Filter macht auch
     * dunkle Vorlagen weiss, damit jedes Icon aus dem Medienpool auf der
     * orangen Flaeche funktioniert. */
    filter: brightness(0) invert(1);
}

.cp-tile__title {
    font-weight: var(--cp-weight-head);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
    color: var(--cp-white);
}

.cp-tile__subtitle {
    font-size: 1rem;
    line-height: 1.35;
    margin: 0;
    padding-bottom: 1rem;
    color: rgba(255, 255, 255, .92);
}

.cp-tile__hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .85);
}


/* -------------------------------------------------------------------
 * 8  Inhaltsflaechen und Module
 * ---------------------------------------------------------------- */

.cp-main {
    padding-bottom: var(--cp-section-gap);
}

/* Weisse Inhaltskarte auf dem Buettenpapier */
/* Weisse Inhaltskarte auf dem Buettenpapier.
 *
 * Jeder Inhaltsbaustein bringt seine eigene Karte mit. Da sie ohne
 * Aussenabstand stehen, wachsen aufeinanderfolgende Bausteine zu einer
 * durchgehenden weissen Flaeche zusammen – so wie in der Vorlage, wo
 * Ueberschrift, Text und Zitat in einem Block stehen. */
.cp-content {
    background: var(--cp-surface);
    box-shadow: var(--cp-surface-shadow);
    padding: 2rem;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .cp-content {
        padding: 2.75rem 3rem;
    }
}

.cp-content > :last-child {
    margin-bottom: 0;
}

/* Titelkarte: schliesst eng an den folgenden Text an. */
.cp-content--head {
    background: none;
    text-align: center;
    box-shadow: none;
    padding-bottom: 0.5rem;
    padding-top: 0.75rem;

    h1 {
        color: var(--cp-black);
        /* text-decoration: underline; */
    }
}

@media (min-width: 768px) {
    .cp-content--head {
        padding-bottom: .5rem;
    }
}

/* Mehrspaltiger Text, „3 Textspalten“ der Seite Leistungen */
.cp-columns {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .cp-columns--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .cp-columns--3 { grid-template-columns: repeat(3, 1fr); }
}

.cp-columns__col > :last-child {
    margin-bottom: 0;
}

/* Bild-Text-Kombination */
.cp-figure {
    margin: 0 0 1rem;
}

.cp-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.cp-figure figcaption {
    margin-top: .4rem;
    font-size: .95rem;
    color: var(--cp-black-muted);
}

/* Downloadliste */
.cp-downloads {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-download {
    border-bottom: 1px solid var(--cp-grey-light);
}

.cp-download:last-child {
    border-bottom: 0;
}

.cp-download__link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem .25rem;
    color: var(--cp-black);
}

.cp-download__link:hover,
.cp-download__link:focus-visible {
    color: var(--cp-orange);
    text-decoration: none;
}

.cp-download__icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    background: var(--cp-orange);
    color: var(--cp-white);
    font-size: 1.1rem;
}

.cp-download__meta {
    margin-left: auto;
    font-size: .9rem;
    color: var(--cp-black-muted);
    white-space: nowrap;
}

/* Buttons
 * „Offbuttons“ laut CD in Pantone 428 C, aktive Buttons in Orange. */
.cp-btn {
    display: inline-block;
    font-family: var(--cp-font);
    font-weight: var(--cp-weight-head);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: var(--cp-radius);
    background: var(--cp-orange);
    color: var(--cp-white);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.cp-btn:hover,
.cp-btn:focus-visible {
    background: var(--cp-orange-dark);
    color: var(--cp-white);
    text-decoration: none;
}

.cp-btn--off {
    background: var(--cp-grey);
    color: var(--cp-black);
}

.cp-btn--off:hover,
.cp-btn--off:focus-visible {
    background: var(--cp-orange);
    color: var(--cp-white);
}

/* Formulare (YForm) */
.cp-form .form-control,
.cp-form .form-select {
    font-family: var(--cp-font);
    font-weight: var(--cp-weight-copy);
    font-size: var(--cp-font-size);
    border-color: var(--cp-grey);
    border-radius: var(--cp-radius);
}

.cp-form .form-control:focus,
.cp-form .form-select:focus {
    border-color: var(--cp-orange);
    box-shadow: 0 0 0 .2rem rgba(255, 164, 13, .25);
}

.cp-form .form-label,
.cp-form .control-label {
    font-weight: var(--cp-weight-strong);
    color: var(--cp-black);
}

/* YForm erzeugt weiterhin Markup nach Bootstrap 3. Diese Regeln bringen
 * es auf denselben Stand wie die uebrigen Formulare, ohne dass eigene
 * YForm-Templates gepflegt werden muessen. */
.cp-form .form-group {
    margin-bottom: 1.25rem;
}

.cp-form .help-block {
    display: block;
    margin-top: .35rem;
    font-size: .95rem;
    color: var(--cp-black-muted);
}

.cp-form .has-error .form-control {
    border-color: #C0392B;
}

.cp-form .has-error .help-block,
.cp-form .has-error .control-label {
    color: #C0392B;
}

.cp-form .btn,
.cp-form input[type='submit'],
.cp-form button[type='submit'] {
    display: inline-block;
    font-family: var(--cp-font);
    font-weight: var(--cp-weight-head);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: var(--cp-radius);
    background: var(--cp-orange);
    color: var(--cp-white);
}

.cp-form .btn:hover,
.cp-form input[type='submit']:hover,
.cp-form button[type='submit']:hover {
    background: var(--cp-orange-dark);
    color: var(--cp-white);
}

.cp-form .alert-success {
    background: var(--cp-grey-light);
    border-left: 4px solid var(--cp-orange);
    padding: 1rem 1.25rem;
}


/* -------------------------------------------------------------------
 * 9  Zitatblase
 *
 * Der orange Kasten mit Zitat auf den Seiten Orientierung, Erfolg,
 * Abgrenzung und „Fuenf gute Gruende“.
 * ---------------------------------------------------------------- */

.cp-quote {
    background: var(--cp-orange);
    color: var(--cp-white);
    padding: 1.75rem 1.5rem 2.25rem;
    margin: 0 0 var(--cp-gap);
    clip-path: polygon(0 0, 100% 0, 100% 93%, 50% 100%, 0 93%);
}

@media (min-width: 992px) {
    .cp-quote {
        float: right;
        width: 300px;
        margin: 0 0 1.5rem 2rem;
    }
}

/* Eigenstaendiger Zitatblock ueber die volle Breite */
.cp-quote--block {
    float: none;
    width: auto;
    margin: 0 0 var(--cp-gap);
    box-shadow: var(--cp-surface-shadow);
}

@media (min-width: 992px) {
    .cp-quote--block {
        float: none;
        width: auto;
        margin: 0 0 var(--cp-gap);
        padding: 2.5rem 3rem 3.25rem;
    }

    .cp-quote--block .cp-quote__text {
        font-size: 1.6rem;
    }
}

.cp-quote__text {
    font-weight: var(--cp-weight-strong);
    font-size: 1.3rem;
    line-height: 1.35;
    margin: 0;
}

.cp-quote__source {
    display: block;
    margin-top: .9rem;
    font-size: .95rem;
    font-style: normal;
    color: rgba(255, 255, 255, .85);
}


/* -------------------------------------------------------------------
 * 10  Footer
 * ---------------------------------------------------------------- */

.cp-footer {
    margin-top: var(--cp-section-gap);
}

.cp-footer__links {
    background: var(--cp-orange);
    padding: 1rem 0;
}

.cp-footer__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-footer__link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--cp-black);
    font-weight: var(--cp-weight-strong);
}

.cp-footer__link:hover,
.cp-footer__link:focus-visible {
    color: var(--cp-white);
    text-decoration: none;
}

.cp-footer__icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
    transition: transform .18s ease-in-out;
}

.cp-footer__link:hover .cp-footer__icon,
.cp-footer__link:focus-visible .cp-footer__icon {
    transform: scale(1.08);
}

/* Die Vorlage zeigt im Footer nur die Signets. Die Beschriftung bleibt
 * als zugaengliche Bezeichnung erhalten, aber unsichtbar – sonst waere
 * fuer Screenreader und Tastaturnutzer nicht erkennbar, wohin ein Link
 * fuehrt. */
.cp-footer__label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cp-footer__meta {
    background: var(--cp-black);
    color: rgba(255, 255, 255, .75);
    padding: .85rem 0;
    font-size: .95rem;
}

.cp-footer__meta a {
    color: rgba(255, 255, 255, .75);
}

.cp-footer__meta a:hover,
.cp-footer__meta a:focus-visible {
    color: var(--cp-orange);
}

.cp-footer__meta-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    align-items: center;
    justify-content: space-between;
}


/* Galerie und Bildvergroesserung */

.cp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.cp-gallery__item {
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
}

.cp-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .25s ease-in-out;
}

.cp-gallery__item:hover img,
.cp-gallery__item:focus-visible img {
    transform: scale(1.05);
}

.cp-lightbox .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--cp-radius);
    background: var(--cp-white);
    padding: .75rem;
}

.cp-lightbox__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 1;
    background-color: var(--cp-white);
    opacity: .9;
    padding: .75rem;
}

.cp-lightbox__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}

.cp-lightbox__caption {
    margin: .6rem 0 0;
    font-size: .95rem;
    color: var(--cp-black-muted);
}


/* -------------------------------------------------------------------
 * 11  Pop-Up
 *
 * Begriffserklaerungen wie „Marketingdesign“ oder „KSK-Abgabe“
 * erscheinen in einem Overlay statt auf einer eigenen Seite.
 * ---------------------------------------------------------------- */

/* Begriff im Fliesstext, der ein Pop-Up oeffnet */
.cp-term {
    color: var(--cp-orange);
    font-weight: var(--cp-weight-strong);
    border: 0;
    background: none;
    padding: 0;
    border-bottom: 1px dotted var(--cp-orange);
    cursor: help;
}

.cp-term:hover,
.cp-term:focus-visible {
    color: var(--cp-orange-dark);
    border-bottom-style: solid;
}

.cp-popup .modal-content {
    border: 0;
    border-top: 6px solid var(--cp-orange);
    border-radius: var(--cp-radius);
}

.cp-popup .modal-header {
    border-bottom: 0;
    padding-bottom: .25rem;
}

.cp-popup .modal-title {
    color: var(--cp-orange);
    font-weight: var(--cp-weight-head);
}

.cp-popup .modal-body {
    padding-top: 0;
}

.cp-popup .modal-body > :last-child {
    margin-bottom: 0;
}


/* -------------------------------------------------------------------
 * 12  Hilfsklassen
 * ---------------------------------------------------------------- */

.cp-text-orange { color: var(--cp-orange) !important; }
.cp-text-black  { color: var(--cp-black) !important; }
.cp-text-muted  { color: var(--cp-black-muted) !important; }

.cp-bg-orange { background-color: var(--cp-orange) !important; }
.cp-bg-grey   { background-color: var(--cp-grey) !important; }
.cp-bg-white  { background-color: var(--cp-white) !important; }

.cp-mb-0 { margin-bottom: 0 !important; }
.cp-mb-1 { margin-bottom: .5rem !important; }
.cp-mb-2 { margin-bottom: 1rem !important; }
.cp-mb-3 { margin-bottom: 1.5rem !important; }
.cp-mb-4 { margin-bottom: 2.5rem !important; }

.cp-credit {
    font-size: .9rem;
    color: var(--cp-black-muted);
    margin-top: 1.25rem;
}

/* Nur fuer Screenreader */
.cp-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* -------------------------------------------------------------------
 * Druck
 * ---------------------------------------------------------------- */

@media print {
    body {
        background: none;
        color: #000;
        font-size: 11pt;
    }

    .cp-nav,
    .cp-iconbar,
    .cp-footer__links,
    .cp-skip-link {
        display: none !important;
    }

    .cp-content {
        box-shadow: none;
        padding: 0;
    }

    a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: 9pt;
    }
}

.flex-container {
    display: flex; /* Aktiviert Flexbox für die direkten Kinder */
    width: 100%;    /* Der Eltern-Container nutzt die volle Breite */
}

.flex-item {
    flex: 0 0 50%; /* flex-grow: 0, flex-shrink: 0, flex-basis: 50% */
    box-sizing: border-box; /* Verhindert, dass Padding/Border die 50% sprengen */

    /* Optische Gestaltung für das Beispiel */
    padding: 20px;
}

/* Oberste Zeile im Kopfbereich: Hotline links, Impressum/Datenschutz
 * rechts.
 *
 * Statt zwei starrer Haelften nimmt jede Seite nur so viel Platz, wie
 * sie braucht. Ohne seitlichen Innenabstand steht die Hotline buendig
 * mit dem Logo und der letzte Link buendig mit dem Menue darunter.
 * Reicht die Breite nicht, rutschen die Links in eine eigene Zeile,
 * statt abgeschnitten zu werden. */
.cp-header > .flex-container {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .25rem 1.5rem;
    padding-block: .75rem .25rem;
}

.cp-header > .flex-container > .flex-item {
    flex: 0 1 auto;
    padding: 0;
}

@media (max-width: 575.98px) {
    .cp-header > .flex-container,
    .cp-header > .flex-container .cp-header-phone,
    .cp-header .top-menue a {
        font-size: .95rem;
    }

    /* Umgebrochen stehen die Links links unter der Hotline. */
    .cp-header .top-menue li:first-child a {
        padding-left: 0;
    }
}