/*
Theme Name: MaD-Event
Theme URI: https://mad-event.com
Author: MaD-Event
Description: Individuelles WordPress Theme für professionelle Veranstaltungstechnik.
Version: 2.4.49
License: GNU General Public License v2 or later
Text Domain: mad-event
*/

/* v2.4.47: Firmenbezeichnung auf der mobilen Kontaktseite ohne Silbentrennung. */
@media (max-width: 520px) {
    .contact-page .contact-info-card h2 span {
        display: block;
        width: max-content;
        max-width: 100%;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
        hyphens: none;
        font-size: 0.74em;
        letter-spacing: -0.025em;
    }
}

/* Business-Projektbelege: Motive vollständig und proportional zeigen. */
.audience-proof { background: #0a0a0a; }
.audience-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 40px;
}
.audience-proof-grid .home-featured-story img {
    height: 360px;
    aspect-ratio: auto;
    object-fit: contain;
    background: #080808;
}
.audience-proof-more { margin: 30px 0 0; }
@media (max-width: 760px) {
    .audience-proof-grid { grid-template-columns: 1fr; }
    .audience-proof-grid .home-featured-story img { height: auto; max-height: 360px; }
}

/* Startseite: nachvollziehbarer Projektablauf und Projektbeweise – v2.4.42 */
.home-process {
    background: #0d0d0d;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.home-process-heading { max-width: 880px; }
.home-process-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 44px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.home-process-list li {
    min-width: 0;
    padding: 26px 20px;
    border-top: 2px solid var(--accent-red);
    background: #151515;
}
.home-process-list span,
.home-process-list strong { display: block; }
.home-process-list span {
    color: var(--accent-text);
    font-weight: 800;
    letter-spacing: .15em;
}
.home-process-list strong {
    margin: 18px 0 10px;
    color: #fff;
    font-size: 1.08rem;
}
.home-process-list p {
    color: var(--text-muted);
    font-size: .94rem;
    line-height: 1.55;
}
.home-featured-stories { background: #0a0a0a; }
.home-featured-stories-heading { max-width: 900px; }
.home-featured-stories-heading h2 {
    margin: 12px 0 22px;
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    line-height: 1.05;
}
.home-featured-stories-heading h2 span { color: var(--accent-red); }
.home-featured-stories-heading > p:not(.section-kicker) {
    max-width: 760px;
    color: var(--text-muted);
    font-size: 1.08rem;
}
.home-featured-story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 44px;
}
.home-featured-story {
    min-width: 0;
    border: 1px solid #303030;
    background: #111;
    transition: transform .22s ease, border-color .22s ease;
}
.home-featured-story:hover,
.home-featured-story:focus-within {
    transform: translateY(-4px);
    border-color: var(--accent-red);
}
.home-featured-story > a { display: flex; height: 100%; flex-direction: column; }
.home-featured-story figure { margin: 0; overflow: hidden; background: #080808; }
.home-featured-story img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .35s ease;
}
.home-featured-story:first-child img { object-position: center 42%; }
.home-featured-story:nth-child(2) img { object-position: center 58%; }
.home-featured-story:hover img { transform: scale(1.025); }
.home-featured-story > a > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 26px;
}
.home-featured-story h3 {
    margin: 8px 0 14px;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.18;
}
.home-featured-story div > p:not(.section-kicker) {
    color: var(--text-muted);
    line-height: 1.6;
}
.home-featured-story div > span {
    margin-top: auto;
    padding-top: 24px;
    color: #fff;
    font-weight: 750;
}
.home-featured-stories-action { margin-top: 34px; text-align: center; }

@media (max-width: 980px) {
    .home-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-process-list li:last-child { grid-column: 1 / -1; }
    .home-featured-story-grid { grid-template-columns: 1fr; }
    .home-featured-story > a { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); }
    .home-featured-story img { height: 100%; min-height: 300px; aspect-ratio: auto; }
}

@media (max-width: 620px) {
    .home-process-list { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
    .home-process-list li:last-child { grid-column: auto; }
    .home-featured-story > a { display: flex; }
    .home-featured-story img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
    .home-featured-story > a > div { padding: 22px; }
}

/* Projektstory Süddeutsche Zeitung – v2.4.41 */
.story-card-media--sueddeutsche img {
    object-fit: contain;
    object-position: center 42%;
    background: #111;
}

.story-single-image--sueddeutsche {
    max-width: 920px;
}

.story-single-image--sueddeutsche img {
    height: auto;
    max-height: none;
    object-fit: contain;
}

.story-gallery--sueddeutsche img,
.story-location-image--sueddeutsche img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.story-location-image--sueddeutsche {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

/* Projektstory Wertsicherung – v2.4.38 */
.story-card-media--wertsicherung img,
.story-single-image--wertsicherung img {
    object-position: center 58%;
}
.story-location-image--wertsicherung {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}
.story-location-image--wertsicherung img {
    aspect-ratio: 4 / 5;
    object-position: center;
}

:root {
    --bg-dark: #0a0a0a;
    --bg-light: #151515;
    --text-main: #ffffff;
    --text-muted: #b5b5b5;
    --accent-red: #e30613;
    --accent-red-dark: #a8000b;
    --accent-text: #ff5a64;
    --focus-ring: #ff5a64;
    --border: rgba(255,255,255,0.1);
}

/* Referenzen: Protonic Event Partner – v2.4.9 */
.reference-logo-card--protonic {
    background: #ffffff;
    padding: clamp(24px, 2.8vw, 40px);
}

.reference-logo-card--protonic img {
    width: min(100%, 430px);
    height: auto;
    max-height: 150px;
    object-fit: contain;
    filter: none;
}

@media (max-width: 760px) {
    .reference-logo-card--protonic img { max-height: 120px; }
}

/* Referenzen: Mühlheimer Karnevalverein – v2.4.10 */
.reference-logo-card--muehlheimer-karnevalverein {
    background: #ffffff;
    padding: clamp(12px, 1.6vw, 20px);
}

.reference-logo-card--muehlheimer-karnevalverein img {
    width: auto;
    height: min(100%, 200px);
    max-width: 96%;
    max-height: 200px;
    object-fit: contain;
    filter: none;
}

@media (max-width: 760px) {
    .reference-logo-card--muehlheimer-karnevalverein img { max-height: 180px; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: "Inter", Arial, sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Tastaturbedienung und Sprunglink */
.skip-link {
    position: fixed;
    z-index: 9999;
    top: 12px;
    left: 12px;
    padding: 12px 18px;
    background: #fff;
    color: #070707;
    border-radius: 3px;
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform .18s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.content-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 96px;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* Kleine rote Texte brauchen auf Schwarz mehr Kontrast als das Markenrot. */
.ton-kicker,
.section-kicker,
.video-service-number,
.usecase-card > div > span,
.story-eyebrow,
.story-kicker {
    color: var(--accent-text);
}

/* v2.4.40: Einheitlicher Anfrageabschluss für Projekte und Projektstories. */
.stories-inquiry-cta {
    text-align: center;
    border-top: 1px solid var(--border);
}

.stories-inquiry-cta .container {
    max-width: 820px;
}

.stories-inquiry-cta h2 {
    margin-bottom: 18px;
}

.stories-inquiry-cta p:not(.section-kicker) {
    margin: 0 auto 30px;
    color: var(--text-muted);
}

.container {
    width: min(1200px, 90%);
    margin: auto;
}

/* Header */

.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(10,10,10,.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-logo {
    max-height: 60px;
    width: auto;
    display: block;
}

.logo a {
    display: flex;
    align-items: center;
}

.main-navigation ul {
    display: flex;
    gap: 35px;
    list-style: none;
}

.main-navigation a {
    color: white;
    font-weight: 500;
    transition: .3s;
}

.main-navigation a:hover {
    color: var(--accent-red);
}

/* Hero */

.hero {
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    background:
    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.85)
    ),
    url("assets/images/hero.jpg") center/cover;
}

.hero-content {
    max-width: 750px;
}

.hero h1 {
    font-size: clamp(2.8rem,5vw,5rem);
    line-height: 1.1;
    margin-bottom: 25px;
}

.hero span {
    color: var(--accent-red);
}

.hero p {
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-bottom: 40px;
}

/* Buttons */

.btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 3px;
    background: var(--accent-red);
    color:white;
    font-weight:600;
    transition:.3s;
}

.btn:hover {
    background: var(--accent-red-dark);
}


/* Sections */

.section {
    padding:100px 0;
}

.section-title {
    margin-bottom:50px;
}

.section-title h2 {
    font-size:2.5rem;
}

.section-title h2 span {
    color:var(--accent-red);
}


/* Cards */

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.card {
    background:var(--bg-light);
    padding:35px;
    border:1px solid var(--border);
    transition:.3s;
}

.card:hover {
    transform:translateY(-8px);
    border-color:var(--accent-red);
}

.card h3 {
    margin-bottom:15px;
    color:white;
}


/* Footer */

.site-footer {
    padding:40px 0;
    background:#050505;
    color:#999;
    text-align:center;
}

.footer-social {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:24px 0;
}

.footer-social-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border:1px solid #383838;
    border-radius:999px;
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:border-color .2s ease, color .2s ease, transform .2s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
    border-color:var(--accent-red);
    color:var(--accent-red);
    transform:translateY(-2px);
}

.footer-social-link:focus-visible {
    outline:2px solid var(--accent-red);
    outline-offset:3px;
}

.footer-social-icon {
    width:22px;
    height:22px;
    fill:currentColor;
    flex:0 0 auto;
}


/* Responsive */

@media(max-width:900px){

    .main-navigation ul {
        display:none;
    }

    .cards {
        grid-template-columns:1fr;
    }

    .hero {
        min-height:600px;
    }
}
.menu-toggle {
    display:none;
    background:none;
    border:none;
    color:white;
    font-size:32px;
    cursor:pointer;
}


@media(max-width:900px){

    .menu-toggle {
        display:block;
    }


    .main-navigation {
        position:absolute;
        top:90px;
        left:0;
        width:100%;
        background:#0a0a0a;
        display:none;
    }


    .main-navigation.active {
        display:block;
    }


    .main-navigation ul {
        display:flex;
        flex-direction:column;
        padding:30px;
        gap:20px;
    }

}
.card img {

    width:100%;
    height:240px;
    object-fit:cover;
    margin-bottom:20px;

}


.card ul {

    margin-top:20px;
    padding-left:20px;

}


.card li {

    color:#b5b5b5;
    margin-bottom:8px;

}
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {

    width:100%;
    padding:15px;
    background:#111;
    border:1px solid rgba(255,255,255,.15);
    color:white;
    margin-top:8px;
    margin-bottom:20px;

}


.wpcf7 textarea {

    min-height:150px;

}


.wpcf7 input[type="submit"] {

    background:#e30613;
    border:none;
    cursor:pointer;
    font-weight:600;
    padding:15px 35px;

}


.wpcf7 input[type="submit"]:hover {

    background:#a8000b;

}
/* Ton Portfolio */
.ton-page { overflow: hidden; }
.ton-hero {
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding: 150px 0 90px;
    background-image: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.64) 48%, rgba(0,0,0,.35) 100%), var(--ton-hero-image);
    background-position: center;
    background-size: cover;
}
.ton-hero-content { max-width: 820px; }
.ton-kicker { color: var(--accent-red); font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 12px; }
.ton-hero h1 { font-size: clamp(3rem, 7vw, 6.4rem); line-height: .98; max-width: 900px; margin-bottom: 25px; }
.ton-hero p:not(.ton-kicker) { max-width: 720px; color: #d0d0d0; font-size: clamp(1.05rem, 2vw, 1.35rem); margin-bottom: 34px; }
.ton-intro { border-bottom: 1px solid var(--border); }
.ton-intro-grid, .ton-partner-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.ton-intro h2, .ton-partners h2, .ton-section-heading h2, .ton-cta h2 { font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.08; }
.ton-intro-grid > p, .ton-partner-grid > div:last-child p { color: var(--text-muted); font-size: 1.12rem; }
.ton-category { padding-top: 120px; }
.ton-category-dark { background: #050505; }
.ton-section-heading { max-width: 780px; margin-bottom: 70px; }
.ton-section-heading > p:last-child { color: var(--text-muted); margin-top: 20px; font-size: 1.1rem; }
.ton-products { display: grid; gap: 45px; }
.ton-product { min-height: 460px; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border: 1px solid var(--border); background: linear-gradient(135deg, #181818, #0c0c0c); }
.ton-product-reverse .ton-product-image { order: 2; }
.ton-product-image { min-height: 420px; display: flex; align-items: center; justify-content: center; padding: 48px; background: radial-gradient(circle at center, #333 0, #151515 48%, #090909 100%); }
.ton-product-image img { width: 100%; height: 350px; object-fit: contain; filter: drop-shadow(0 25px 28px rgba(0,0,0,.45)); transition: transform .45s ease; }
.ton-product:hover .ton-product-image img { transform: scale(1.035); }
.ton-product-copy { padding: clamp(38px, 6vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.ton-product-copy h3 { font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1; margin-bottom: 25px; }
.ton-product-copy p { color: var(--text-muted); font-size: 1.08rem; }
.ton-partners { background: #101010; }
.ton-text-link { display: inline-block; margin-top: 30px; color: #fff; font-weight: 700; border-bottom: 2px solid var(--accent-red); padding-bottom: 5px; }
.ton-cta { min-height: 560px; display: flex; align-items: center; text-align: center; background-image: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.9)), var(--ton-cta-image); background-position: center; background-size: cover; }
.ton-cta-inner { max-width: 820px; }
.ton-cta h2 { margin-bottom: 35px; }

@media (max-width: 900px) {
    .ton-hero { min-height: 680px; }
    .ton-intro-grid, .ton-partner-grid, .ton-product { grid-template-columns: 1fr; gap: 30px; }
    .ton-product-reverse .ton-product-image { order: 0; }
    .ton-product-image { min-height: 330px; padding: 30px; }
    .ton-product-image img { height: 280px; }
    .ton-product-copy { padding: 36px 30px 46px; }
    .ton-category { padding-top: 90px; }
}

/* Startseite – klickbare Leistungskarten */
.hero-kicker,
.section-kicker,
.service-card-kicker {
    color: var(--accent-red);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-kicker { margin-bottom: 18px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-secondary-link,
.text-link {
    color: #fff;
    font-weight: 700;
    border-bottom: 2px solid var(--accent-red);
    padding-bottom: 5px;
}

.services-section { background: #080808; }
.section-title .section-intro {
    max-width: 720px;
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 1.08rem;
}

.service-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.service-card {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 38px;
    color: #fff;
    border: 1px solid var(--border);
    background-position: center;
    background-size: cover;
    isolation: isolate;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: inherit;
    background-position: center;
    background-size: cover;
    transition: transform .65s ease;
}

.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.92) 78%);
}

.service-card-ton {
    background-image: url('assets/images/ton/hero-ton.jpeg');
}

.service-card-light {
    background-image: linear-gradient(135deg, rgba(227,6,19,.12), rgba(0,0,0,.2)), url('assets/images/referenz-2.webp');
}

.service-card-video {
    background-image: linear-gradient(135deg, rgba(0,0,0,.16), rgba(0,0,0,.3)), url('assets/images/referenz-3.webp');
}

.service-card:hover,
.service-card:focus-visible {
    transform: translateY(-10px);
    border-color: var(--accent-red);
    box-shadow: 0 24px 55px rgba(0,0,0,.42);
}

.service-card:hover::before,
.service-card:focus-visible::before { transform: scale(1.055); }
.service-card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.service-card-number {
    position: absolute;
    top: 26px;
    right: 30px;
    color: rgba(255,255,255,.5);
    font-size: .84rem;
    font-weight: 700;
}

.service-card-content h3 {
    margin: 8px 0 18px;
    color: #fff;
    font-size: clamp(2.25rem, 4vw, 3.7rem);
    line-height: 1;
}

.service-card-content > p:not(.service-card-kicker) {
    max-width: 390px;
    margin-bottom: 30px;
    color: #d3d3d3;
}

.service-card-link {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: #fff;
    font-weight: 700;
}

.service-card-link span { color: var(--accent-red); transition: transform .25s ease; }
.service-card:hover .service-card-link span { transform: translateX(5px); }

.references-preview { background: #111; }
.references-preview-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: start;
}
.references-preview h2 { font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1.08; }
.references-preview-grid > div:last-child p { color: var(--text-muted); font-size: 1.1rem; }
.references-preview .text-link { display: inline-block; margin-top: 28px; }

.home-cta { text-align: center; background: #070707; }
.home-cta-inner { max-width: 820px; }
.home-cta h2 { margin: 8px 0 20px; font-size: clamp(2.5rem, 5vw, 5rem); }
.home-cta h2 span { color: var(--accent-red); }
.home-cta p:not(.section-kicker) { color: var(--text-muted); margin-bottom: 32px; font-size: 1.1rem; }

.narrow-content { max-width: 860px; }
.references-holding-page { padding-top: 80px; }
.references-holding-page h1 { font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1.03; margin: 12px 0 28px; }
.references-holding-page p { color: var(--text-muted); font-size: 1.12rem; margin-bottom: 20px; }
.references-holding-page .btn { margin-top: 18px; }

@media (max-width: 1000px) {
    .service-cards { grid-template-columns: 1fr; }
    .service-card { min-height: 420px; }
    .references-preview-grid { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 600px) {
    .service-card { min-height: 380px; padding: 28px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
}


/* Ton Portfolio v1.7 – freigestellte Produktbilder */
.ton-product {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.ton-product::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-red), transparent);
    opacity: 0;
    transition: opacity .4s ease;
}

.ton-product:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 6, 19, .5);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .36);
}

.ton-product:hover::after { opacity: 1; }

.ton-product-image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 52%, rgba(227, 6, 19, .16), transparent 34%),
        radial-gradient(circle at center, #2a2a2a 0, #151515 49%, #090909 100%);
}

.ton-product-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(227, 6, 19, .12);
    filter: blur(54px);
    opacity: .65;
}

.ton-product-image img {
    max-width: 88%;
    filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .62));
    will-change: transform;
}

.ton-product-copy h3::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 18px;
    background: var(--accent-red);
}

@media (prefers-reduced-motion: reduce) {
    .ton-product,
    .ton-product-image img { transition: none; }
    .ton-product:hover { transform: none; }
}

/* Leistungen v1.7.1 – vollständig anklickbare Kacheln */
.service-overview-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.service-overview-card p,
.service-overview-card li {
    color: var(--text-muted, #b7b7b7);
}

.service-overview-card .card-link-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
    color: #fff;
    font-weight: 600;
    transition: color .3s ease, gap .3s ease;
}

.service-overview-card:hover .card-link-label,
.service-overview-card:focus-visible .card-link-label {
    color: var(--accent-red);
    gap: 14px;
}

.service-overview-card:focus-visible {
    outline: 2px solid var(--accent-red);
    outline-offset: 4px;
}


/* Startseite v1.7.2 – Hero-Feinschliff */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 720px;
    padding-top: 90px;
    background:
        linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.64) 46%, rgba(0,0,0,.30) 100%),
        linear-gradient(180deg, rgba(0,0,0,.12) 50%, #080808 100%),
        url("assets/images/hero.webp") center 46% / cover no-repeat;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8% auto auto 7%;
    width: min(560px, 65vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(227, 6, 19, .12);
    filter: blur(100px);
    pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }
.hero-content { max-width: 900px; animation: heroReveal .85s cubic-bezier(.2,.7,.2,1) both; }
.hero-kicker { margin-bottom: 20px; color: #fff; }
.hero-kicker::before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 2px;
    margin-right: 12px;
    vertical-align: middle;
    background: var(--accent-red);
}

.hero h1 {
    max-width: 920px;
    margin-bottom: 28px;
    font-size: clamp(3rem, 6.7vw, 6.8rem);
    letter-spacing: -.045em;
    line-height: .98;
    text-wrap: balance;
}

.hero h1 span { color: #fff; text-shadow: 0 0 34px rgba(227,6,19,.18); }
.hero h1 span::after {
    content: "";
    display: block;
    width: clamp(86px, 11vw, 160px);
    height: 5px;
    margin-top: 22px;
    background: var(--accent-red);
}

.hero p.hero-lead {
    max-width: 760px;
    margin-bottom: 36px;
    color: rgba(255,255,255,.78);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    line-height: 1.65;
}

.hero-actions { gap: 14px; }
.hero .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 27px;
    border: 1px solid var(--accent-red);
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero .btn:hover,
.hero .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(227,6,19,.20); }
.hero .btn-outline { background: rgba(0,0,0,.30); border-color: rgba(255,255,255,.38); backdrop-filter: blur(7px); }
.hero .btn-outline:hover,
.hero .btn-outline:focus-visible { background: #fff; border-color: #fff; color: #070707; box-shadow: 0 14px 34px rgba(0,0,0,.24); }

.hero-scroll {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.58);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    transform: translateX(-50%);
}
.hero-scroll span {
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--accent-red), transparent);
    animation: scrollPulse 1.8s ease-in-out infinite;
}

.services-section { position: relative; }
.services-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(227,6,19,.72), transparent);
}

@keyframes heroReveal {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
    0%,100% { opacity: .35; transform: scaleY(.65); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@media (max-width: 700px) {
    .hero {
        min-height: 680px;
        padding: 124px 0 88px;
        background:
            linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.82) 64%, #080808 100%),
            url("assets/images/hero.webp") 60% center / cover no-repeat;
    }
    .hero h1 { font-size: clamp(2.65rem, 13vw, 4.4rem); }
    .hero h1 span::after { height: 4px; margin-top: 18px; }
    .hero-actions { width: 100%; align-items: stretch; }
    .hero .btn { width: 100%; }
    .hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-content, .hero-scroll span { animation: none; }
}

/* Startseite v1.7.3 – Smartphone-Optimierung */
@media (max-width: 700px) {
    html,
    body {
        overflow-x: hidden;
    }

    .hero {
        height: auto;
        min-height: calc(100svh - 98px);
        padding: 72px 0 64px;
        align-items: flex-start;
        background:
            linear-gradient(180deg, rgba(0,0,0,.57) 0%, rgba(0,0,0,.78) 58%, #080808 100%),
            url("assets/images/hero.webp") 57% center / cover no-repeat;
    }

    .hero .container {
        width: min(100% - 36px, 1320px);
    }

    .hero-content {
        width: 100%;
        max-width: none;
    }

    .hero-kicker {
        max-width: 100%;
        margin-bottom: 38px;
        font-size: .92rem;
        line-height: 1.55;
        letter-spacing: .16em;
    }

    .hero-kicker::before {
        width: 30px;
        margin-right: 10px;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;
        margin: 0 0 28px;
        font-size: clamp(2.35rem, 10.7vw, 3.15rem);
        line-height: 1.04;
        letter-spacing: -.038em;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: manual;
        text-wrap: pretty;
    }

    .hero h1 span {
        display: block;
        margin-top: .08em;
    }

    .hero h1 span::after {
        width: 92px;
        height: 4px;
        margin-top: 22px;
    }

    .hero p.hero-lead {
        max-width: 100%;
        margin-bottom: 30px;
        font-size: 1.05rem;
        line-height: 1.55;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 12px;
    }

    .hero .btn {
        min-height: 56px;
        width: 100%;
        padding: 15px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 390px) {
    .hero {
        padding-top: 58px;
    }

    .hero .container {
        width: min(100% - 28px, 1320px);
    }

    .hero-kicker {
        margin-bottom: 30px;
        font-size: .82rem;
    }

    .hero h1 {
        font-size: clamp(2.05rem, 10.2vw, 2.55rem);
    }

    .hero p.hero-lead {
        font-size: 1rem;
    }
}

/* Version 1.8 – Projektband, Vertrauensbereich und Lichttechnik */
.project-strip {
    padding: 42px 0 0;
    overflow: hidden;
    background: #080808;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.project-strip-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}
.project-strip-heading p:last-child {
    color: var(--text-muted);
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.project-strip-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(260px, 1fr));
    gap: 8px;
    width: max-content;
    min-width: 100%;
}
.project-strip-item {
    position: relative;
    width: clamp(280px, 28vw, 470px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #111;
}
.project-strip-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.42));
    pointer-events: none;
}
.project-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.92) contrast(1.04);
    transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.project-strip-item:hover img {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.06);
}

.home-trust { background: #0d0d0d; }
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.trust-grid article {
    min-height: 260px;
    padding: 30px;
    background: linear-gradient(145deg, #151515, #0d0d0d);
    border: 1px solid rgba(255,255,255,.09);
}
.trust-grid strong {
    display: block;
    margin-bottom: 42px;
    color: var(--accent-red);
    font-size: .82rem;
    letter-spacing: .16em;
}
.trust-grid h3 { margin-bottom: 12px; font-size: 1.22rem; }
.trust-grid p { color: var(--text-muted); }

.light-page { background: #080808; }
.light-hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: end;
    padding: 170px 0 100px;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.16) 100%),
        linear-gradient(180deg, transparent 55%, #080808 100%),
        var(--light-hero-image) center / cover no-repeat;
}
.light-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at 24% 55%, rgba(227,6,19,.12), transparent 35%);
}
.light-hero-inner { max-width: 1180px; }
.light-hero h1 {
    max-width: 900px;
    margin: 14px 0 25px;
    font-size: clamp(3rem, 6vw, 6.4rem);
    line-height: .98;
    letter-spacing: -.045em;
}
.light-hero h1 span,
.light-intro h2 span,
.light-cta h2 span { color: var(--accent-red); }
.light-hero p:not(.section-kicker) {
    max-width: 760px;
    margin-bottom: 34px;
    color: rgba(255,255,255,.78);
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
}
.light-intro { padding-bottom: 70px; }
.light-intro-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: end;
}
.light-intro h2,
.light-cta h2 { font-size: clamp(2.25rem, 4vw, 4.3rem); line-height: 1.05; }
.light-intro-grid > p { color: var(--text-muted); font-size: 1.08rem; }
.light-feature-section { padding-top: 20px; }
.light-features { display: grid; gap: 110px; }
.light-feature {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 72px;
    align-items: center;
}
.light-feature-reverse .light-feature-media { order: 2; }
.light-feature-media {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background: #111;
}
.light-feature-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 0 80px rgba(0,0,0,.35);
    pointer-events: none;
}
.light-feature-media img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.light-feature-copy h2 { margin: 10px 0 22px; font-size: clamp(2rem, 3.3vw, 3.6rem); line-height: 1.08; }
.light-feature-copy > p:not(.section-kicker) { color: var(--text-muted); font-size: 1.06rem; }
.light-checklist { margin-top: 28px; list-style: none; }
.light-checklist li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.light-checklist li::before { content: ""; position: absolute; left: 0; top: 20px; width: 10px; height: 2px; background: var(--accent-red); }
.light-gallery-section { background: #0d0d0d; }
.light-gallery {
    display: grid;
    grid-template-columns: 1.5fr .75fr .75fr;
    gap: 10px;
}
.light-gallery figure { min-height: 430px; overflow: hidden; background: #111; }
.light-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.light-gallery figure:hover img { transform: scale(1.035); }
.light-cta { text-align: center; }
.light-cta-inner { max-width: 850px; }
.light-cta p:not(.section-kicker) { max-width: 680px; margin: 22px auto 30px; color: var(--text-muted); }

@media (max-width: 960px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .light-feature, .light-intro-grid { grid-template-columns: 1fr; gap: 38px; }
    .light-feature-reverse .light-feature-media { order: 0; }
    .light-gallery { grid-template-columns: 1fr 1fr; }
    .light-gallery-wide { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .project-strip { padding-top: 32px; }
    .project-strip-heading { display: block; }
    .project-strip-heading p:last-child { margin-top: 8px; font-size: .72rem; }
    .project-strip-track {
        display: flex;
        width: auto;
        min-width: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        padding: 0 18px 18px;
        scrollbar-width: none;
    }
    .project-strip-track::-webkit-scrollbar { display: none; }
    .project-strip-item { flex: 0 0 84vw; width: 84vw; scroll-snap-align: center; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-grid article { min-height: 0; }
    .trust-grid strong { margin-bottom: 24px; }
    .light-hero {
        min-height: 760px;
        padding: 145px 0 72px;
        align-items: end;
        background:
            linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.82) 64%, #080808 100%),
            var(--light-hero-image) 58% center / cover no-repeat;
    }
    .light-hero h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
    .light-intro, .light-feature-section, .light-gallery-section, .light-cta { padding: 72px 0; }
    .light-features { gap: 78px; }
    .light-feature-media, .light-feature-media img { min-height: 380px; }
    .light-gallery { grid-template-columns: 1fr; }
    .light-gallery-wide { grid-column: auto; }
    .light-gallery figure { min-height: 360px; }
}
.light-hero{
    position: relative;
    overflow: hidden;
}

.light-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index:1;
}

.light-hero .container{
    position: relative;
    z-index:2;
}
/* WPForms – MaD-Event Design */

.wpforms-container {
    margin: 0;
}

.wpforms-container .wpforms-field {
    margin-bottom: 22px;
}

.wpforms-container label,
.wpforms-container .wpforms-field-label {
    color: #f5f5f5 !important;
    font-weight: 600;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
    width: 100% !important;
    background: #101010 !important;
    color: #ffffff !important;
    border: 1px solid #363636 !important;
    border-radius: 4px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
    border-color: #e30613 !important;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.15) !important;
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 3px !important;
}

.wpforms-container textarea {
    min-height: 160px !important;
    resize: vertical;
}

.wpforms-container .wpforms-field-sublabel {
    color: #9b9b9b !important;
}

.wpforms-container .wpforms-error {
    color: #ff5a64 !important;
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
    width: 100% !important;
    background: #e30613 !important;
    color: #ffffff !important;
    border: 1px solid #e30613 !important;
    border-radius: 4px !important;
    padding: 15px 22px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
    background: #ff1220 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(227, 6, 19, 0.22);
}

.wpforms-container .cf-turnstile {
    margin: 8px 0 18px;
}

@media (max-width: 768px) {
    .wpforms-container input,
    .wpforms-container select,
    .wpforms-container textarea {
        font-size: 16px !important;
    }
}
/* =====================================================
   KONTAKTSEITE – MAD-EVENT
   ===================================================== */

.contact-grid {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.35fr);
    gap: 30px;
    align-items: start;
}

.contact-card {
    background: #151515;
    border: 1px solid #303030;
    padding: clamp(28px, 4vw, 52px);
    min-width: 0;
}

.contact-info-card {
    border-color: rgba(227, 6, 19, 0.75);
}

.contact-kicker {
    margin: 0 0 16px;
    color: #e30613;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-card h2 {
    margin: 0 0 22px;
    color: #ffffff;
    font-size: clamp(1.75rem, 3vw, 2.65rem);
    line-height: 1.08;
}

.contact-card h2 span {
    color: #e30613;
}

/* Lange Firmenbezeichnung in der schmaleren Kontaktspalte sauber halten */
.contact-info-card h2 {
    font-size: clamp(1.7rem, 2.1vw, 2rem);
}

.contact-info-card h2 span {
    display: inline-block;
    max-width: 100%;
}

.contact-intro,
.contact-form-intro {
    margin: 0 0 34px;
    color: #c5c5c5;
    font-size: 1rem;
    line-height: 1.7;
}

.contact-details {
    display: grid;
    gap: 0;
}

.contact-detail {
    padding: 20px 0;
    border-top: 1px solid #303030;
}

.contact-detail:last-child {
    border-bottom: 1px solid #303030;
}

.contact-detail-label {
    display: block;
    margin-bottom: 7px;
    color: #8e8e8e;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-detail a,
.contact-detail p {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.contact-detail a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-detail a:hover {
    color: #e30613;
}

.contact-review-note {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid rgba(227, 6, 19, .55);
    background: rgba(227, 6, 19, .07);
}

.contact-review-note p {
    margin: 0 0 12px;
    color: #c5c5c5;
    line-height: 1.6;
}

.contact-review-note a {
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.contact-review-note a:hover,
.contact-review-note a:focus-visible {
    color: var(--accent-red);
}


/* =====================================================
   WPFORMS – MAD-EVENT DESIGN
   ===================================================== */

.contact-form-card .wpforms-container {
    margin: 0;
}

.contact-form-card .wpforms-field {
    padding: 0 0 22px !important;
}

.contact-form-card .wpforms-field-label {
    margin-bottom: 9px !important;
    color: #f4f4f4 !important;
    font-weight: 700 !important;
}

.contact-form-card .wpforms-required-label {
    color: #e30613 !important;
}

.contact-form-card .wpforms-field-sublabel {
    color: #999999 !important;
}

.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card input[type="number"],
.contact-form-card input[type="url"],
.contact-form-card select,
.contact-form-card textarea {
    width: 100% !important;
    max-width: none !important;
    min-height: 52px !important;
    background: #0d0d0d !important;
    color: #ffffff !important;
    border: 1px solid #393939 !important;
    border-radius: 3px !important;
    padding: 13px 15px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    box-shadow: none !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.contact-form-card textarea {
    min-height: 180px !important;
    resize: vertical;
}

.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
    background: #101010 !important;
    border-color: #e30613 !important;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.14) !important;
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 3px !important;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
    color: #8a8a8a !important;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none; }
}

.contact-form-card .wpforms-error {
    color: #ff626c !important;
}

.contact-form-card .wpforms-error-container {
    color: #ffffff !important;
    background: rgba(227, 6, 19, 0.12) !important;
    border: 1px solid rgba(227, 6, 19, 0.45) !important;
    padding: 14px !important;
}

.contact-form-card .wpforms-submit-container {
    padding-top: 5px !important;
}

.contact-form-card button[type="submit"],
.contact-form-card .wpforms-submit {
    width: 100% !important;
    min-height: 56px !important;
    background: #e30613 !important;
    color: #ffffff !important;
    border: 1px solid #e30613 !important;
    border-radius: 3px !important;
    padding: 15px 24px !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-form-card button[type="submit"]:hover,
.contact-form-card .wpforms-submit:hover {
    background: #ff111f !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(227, 6, 19, 0.24);
}

.contact-form-card .cf-turnstile,
.contact-form-card .wpforms-field-turnstile {
    margin: 4px 0 20px;
}


/* =====================================================
   KONTAKTSEITE – TABLET UND SMARTPHONE
   ===================================================== */

@media (max-width: 900px) {

    .contact-grid {
        grid-template-columns: 1fr;
        width: min(720px, calc(100% - 30px));
    }

    .contact-info-card,
    .contact-form-card {
        padding: 32px 26px;
    }
}

@media (max-width: 520px) {

    .contact-grid {
        width: calc(100% - 24px);
        gap: 18px;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 26px 20px;
    }

    .contact-card h2 {
        font-size: 1.75rem;
    }

    .contact-form-card .wpforms-field-row {
        display: block !important;
    }

    .contact-form-card .wpforms-one-half,
    .contact-form-card .wpforms-first {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
    }

    /* WPForms belässt beim zweiten Namensfeld einen inneren Einzug. */
    .contact-form-card .wpforms-field-row-block {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-form-card iframe {
        max-width: 100%;
    }
}

/* =====================================================
   VIDEOTECHNIK – MAD-EVENT
   ===================================================== */
.video-page { background: #080808; overflow: hidden; }
.video-hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: flex-end;
    padding: 170px 0 100px;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(0,0,0,.91) 0%, rgba(0,0,0,.61) 50%, rgba(0,0,0,.24) 100%),
        linear-gradient(180deg, transparent 52%, #080808 100%),
        var(--video-hero-image) center / cover no-repeat;
}
.video-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at 23% 57%, rgba(227,6,19,.13), transparent 38%);
}
.video-hero-inner { max-width: 1180px; }
.video-hero h1 {
    max-width: 950px;
    margin: 14px 0 25px;
    font-size: clamp(3rem, 6vw, 6.4rem);
    line-height: .98;
    letter-spacing: -.045em;
}
.video-hero h1 span,
.video-intro h2 span,
.video-showcase-copy h2 span,
.video-cta h2 span { color: var(--accent-red); }
.video-hero p:not(.section-kicker) {
    max-width: 760px;
    margin-bottom: 34px;
    color: rgba(255,255,255,.80);
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
}
.video-intro-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 72px;
    align-items: end;
}
.video-intro h2,
.video-showcase-copy h2,
.video-cta h2 {
    font-size: clamp(2.25rem, 4vw, 4.3rem);
    line-height: 1.05;
}
.video-intro-grid > p { color: var(--text-muted); font-size: 1.08rem; }
.video-gallery-section { padding-top: 28px; }
.video-gallery {
    display: grid;
    grid-template-columns: 1.35fr .85fr .85fr;
    grid-template-rows: repeat(2, minmax(280px, 36vw));
    gap: 10px;
}
.video-gallery figure { position: relative; overflow: hidden; background: #111; }
.video-gallery figure:first-child { grid-row: 1 / 3; }
.video-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease, filter .4s ease; }
.video-gallery figure:hover img { transform: scale(1.035); filter: contrast(1.05) saturate(1.07); }
.video-gallery figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 34px 24px 20px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(transparent, rgba(0,0,0,.90));
}
.video-services-section { background: #0d0d0d; }
.video-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.video-service {
    min-height: 340px;
    padding: 32px;
    background: linear-gradient(145deg, #171717, #0b0b0b);
    border: 1px solid rgba(255,255,255,.10);
    transition: transform .3s ease, border-color .3s ease;
}
.video-service:hover { transform: translateY(-6px); border-color: rgba(227,6,19,.65); }
.video-service-number { display: block; margin-bottom: 44px; color: var(--accent-red); font-size: .82rem; font-weight: 800; letter-spacing: .16em; }
.video-service h3 { margin-bottom: 14px; font-size: 1.35rem; }
.video-service p { color: var(--text-muted); }
.video-service ul { margin-top: 18px; padding-left: 18px; color: var(--text-muted); }
.video-showcase { background: #050505; }
.video-showcase-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 70px;
    align-items: center;
}
.video-showcase-media { min-height: 560px; overflow: hidden; }
.video-showcase-media img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.video-showcase-copy p { margin-top: 22px; color: var(--text-muted); font-size: 1.08rem; }
.video-tech-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.10);
}
.video-tech-strip article { padding: 30px; background: #101010; }
.video-tech-strip strong { display: block; margin-bottom: 8px; color: #fff; }
.video-tech-strip p { color: var(--text-muted); font-size: .94rem; }
.video-cta { text-align: center; background: #0b0b0b; }
.video-cta-inner { max-width: 850px; }
.video-cta p:not(.section-kicker) { max-width: 680px; margin: 22px auto 30px; color: var(--text-muted); }

@media (max-width: 1000px) {
    .video-intro-grid, .video-showcase-grid { grid-template-columns: 1fr; gap: 38px; }
    .video-services { grid-template-columns: repeat(2, 1fr); }
    .video-tech-strip { grid-template-columns: repeat(2, 1fr); }
    .video-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .video-gallery figure:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 520px; }
    .video-gallery figure:not(:first-child) { min-height: 360px; }
}
@media (max-width: 700px) {
    .video-hero {
        min-height: 730px;
        padding: 145px 0 72px;
        background:
            linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.86) 65%, #080808 100%),
            var(--video-hero-image) 58% center / cover no-repeat;
    }
    .video-hero h1 { font-size: clamp(2.45rem, 11vw, 3.8rem); }
    .video-intro, .video-gallery-section, .video-services-section, .video-showcase, .video-cta { padding: 72px 0; }
    .video-gallery, .video-services, .video-tech-strip { grid-template-columns: 1fr; }
    .video-gallery figure:first-child { grid-column: auto; min-height: 420px; }
    .video-gallery figure:not(:first-child) { min-height: 340px; }
    .video-service { min-height: 0; }
    .video-showcase-media, .video-showcase-media img { min-height: 420px; }
}

/* =====================================================
   Startseite v2.0 – automatischer Vollbild-Hero-Slider
   ===================================================== */
.hero.hero-slider {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #080808;
}

.hero-slider-media,
.hero-slider-overlay {
    position: absolute;
    inset: 0;
}

.hero-slider-media {
    z-index: -3;
    background: #080808;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.035);
    transition: opacity 1.35s ease, transform 8s ease;
    will-change: opacity, transform;
}

.hero-slide.is-active {
    opacity: 1;
    transform: scale(1.09);
}

.hero-slider-overlay {
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.38) 100%),
        linear-gradient(180deg, rgba(0,0,0,.18) 48%, #080808 100%);
}

.hero.hero-slider::before {
    z-index: -1;
}

.hero.hero-slider .container,
.hero.hero-slider .hero-scroll {
    position: relative;
    z-index: 2;
}

@media (max-width: 700px) {
    .hero-slide {
        background-position: 58% center;
    }

    .hero-slider-overlay {
        background:
            linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.78) 58%, #080808 100%),
            linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.16));
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
        transform: none;
    }

    .hero-slide.is-active {
        transform: none;
    }
}

/* ==========================================================
   Referenzseite – schlichte Kundenlogo-Wand
   ========================================================== */
.references-page {
    background: #090909;
    min-height: 100vh;
}

.references-hero {
    padding: clamp(110px, 14vw, 190px) 0 clamp(55px, 7vw, 90px);
    border-bottom: 1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at 50% 0%, rgba(227, 6, 19, .12), transparent 42%),
        #090909;
}

.references-hero-inner {
    max-width: 920px;
    text-align: center;
}

.references-hero h1 {
    margin: 12px 0 20px;
    color: #fff;
    font-size: clamp(2.5rem, 6vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.references-hero p:last-child {
    max-width: 720px;
    margin: 0 auto;
    color: var(--text-muted, #b9b9b9);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
}

.references-logo-section {
    padding-top: clamp(55px, 8vw, 100px);
    padding-bottom: clamp(75px, 10vw, 130px);
}

.references-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 30px);
}

.reference-logo-card {
    position: relative;
    min-height: 220px;
    margin: 0;
    padding: clamp(25px, 3vw, 46px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 4px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.reference-logo-card--light {
    background: linear-gradient(145deg, #ffffff, #ededed);
}

.reference-logo-card--dark {
    background: linear-gradient(145deg, #171717, #050505);
}

.reference-logo-card img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.13));
}

.reference-logo-card:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 6, 19, .58);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

@media (max-width: 1050px) {
    .references-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .references-hero {
        padding-top: 105px;
    }

    .references-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-logo-card {
        min-height: 175px;
        padding: 24px;
    }

    .reference-logo-card img {
        height: 115px;
    }
}

@media (max-width: 470px) {
    .references-logo-grid {
        grid-template-columns: 1fr;
    }

    .reference-logo-card {
        min-height: 190px;
    }

    .reference-logo-card img {
        height: 130px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reference-logo-card {
        transition: none;
    }
}

/* =========================================================
   ÜBER MAD-EVENT – VERSION 2.2.2
   ========================================================= */

.about-page {
    background: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
}

.about-kicker {
    margin: 0 0 16px;
    color: var(--accent-red);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.about-page .section {
    padding: 100px 0;
}

.about-hero {
    padding: 150px 0 95px;
    background:
        radial-gradient(circle at 72% 32%, rgba(227, 6, 19, .12), transparent 30%),
        linear-gradient(180deg, #090909 0%, #111111 100%);
    border-bottom: 1px solid var(--border);
}

.about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
    gap: clamp(45px, 5vw, 75px);
    align-items: center;
}

.about-hero-copy {
    min-width: 0;
    position: relative;
    z-index: 2;
}

.about-hero-copy h1 {
    width: 100%;
    max-width: 720px;
    margin: 0 0 28px;
    font-size: clamp(3rem, 4.55vw, 4.9rem);
    line-height: 1.03;
    letter-spacing: -.038em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
}

.about-hero-copy h1 span {
    color: var(--accent-red);
}

.about-lead {
    max-width: 680px;
    margin: 0 0 34px;
    color: var(--text-muted);
    font-size: clamp(1.05rem, 1.45vw, 1.28rem);
    line-height: 1.72;
}

.about-hero-image {
    position: relative;
    min-width: 0;
    margin: 0;
    z-index: 1;
}

.about-hero-image::before {
    content: "";
    position: absolute;
    inset: 20px -20px -20px 20px;
    border: 1px solid rgba(227, 6, 19, .55);
    z-index: 0;
}

.about-hero-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(480px, 58vw, 680px);
    object-fit: cover;
    object-position: center 38%;
    background: #111;
}

.about-story-grid {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: start;
}

.about-story-grid > div {
    min-width: 0;
}

.about-story-grid h2,
.about-section-heading h2,
.about-closing h2,
.about-cta h2 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: clamp(2.15rem, 3.45vw, 3.65rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.about-copy {
    min-width: 0;
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.85;
}

.about-copy p {
    max-width: 100%;
}

.about-copy p + p {
    margin-top: 24px;
}

.about-copy strong {
    color: var(--text-main);
    font-weight: 650;
}

.about-section-dark,
.about-career-dark,
.about-today {
    background: #111111;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.about-section-heading {
    max-width: 900px;
    margin-bottom: 60px;
}

.about-timeline {
    position: relative;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--border);
}

.about-timeline-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 42px;
    padding: 38px 0;
    border-bottom: 1px solid var(--border);
}

.about-year {
    color: var(--accent-red);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.about-timeline-item h3 {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.2;
}

.about-timeline-item p {
    max-width: 820px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.8;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.about-value {
    min-height: 290px;
    padding: 34px;
    background: #111111;
    border: 1px solid var(--border);
    transition: transform .25s ease, border-color .25s ease;
}

.about-value:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 6, 19, .6);
}

.about-value > span {
    display: block;
    margin-bottom: 72px;
    color: var(--accent-red);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .15em;
}

.about-value h3 {
    margin: 0 0 14px;
    font-size: 1.55rem;
}

.about-value p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.75;
}

.about-closing,
.about-cta {
    background:
        linear-gradient(120deg, rgba(227, 6, 19, .08), transparent 40%),
        #101010;
    border-top: 1px solid var(--border);
}

.about-closing-inner,
.about-cta-inner {
    max-width: 900px;
}

.about-closing-inner > p:not(.about-kicker),
.about-cta-inner > p:not(.about-kicker) {
    max-width: 790px;
    margin: 24px 0 0;
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.85;
}

.about-closing-inner > p strong,
.about-cta-inner > p strong {
    color: var(--text-main);
}

.about-cta .btn {
    margin-top: 32px;
}

.about-signature {
    display: grid;
    gap: 5px;
    margin: 38px 0 34px;
    padding-left: 20px;
    border-left: 3px solid var(--accent-red);
}

.about-signature strong {
    font-size: 1.18rem;
}

.about-signature span {
    color: var(--text-muted);
    font-size: .95rem;
}

@media (max-width: 1100px) {
    .about-hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
        gap: 42px;
    }

    .about-hero-copy h1 {
        font-size: clamp(2.8rem, 4.5vw, 4.3rem);
    }

    .about-story-grid {
        grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
        gap: 50px;
    }

    .about-story-grid h2 {
        font-size: clamp(2rem, 3.25vw, 3.2rem);
    }
}

@media (max-width: 960px) {
    .about-hero-grid,
    .about-story-grid {
        grid-template-columns: 1fr;
    }

    .about-hero {
        padding: 125px 0 80px;
    }

    .about-hero-copy {
        max-width: 760px;
    }

    .about-hero-copy h1 {
        max-width: 700px;
        font-size: clamp(2.8rem, 7vw, 4.6rem);
    }

    .about-hero-image {
        width: min(100%, 720px);
        max-width: 720px;
    }

    .about-hero-image img {
        height: min(82vw, 700px);
    }

    .about-story-grid {
        gap: 35px;
    }

    .about-story-grid > div:first-child {
        max-width: 700px;
    }

    .about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .about-page .section {
        padding: 72px 0;
    }

    .about-hero {
        padding: 105px 0 65px;
    }

    .about-hero-grid {
        gap: 42px;
    }

    .about-hero-copy,
    .about-hero-image {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .about-hero-copy h1 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 24px;
        font-size: clamp(2.2rem, 8.6vw, 3.2rem);
        line-height: 1.04;
        letter-spacing: -.032em;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .about-lead {
        font-size: 1.04rem;
        line-height: 1.65;
    }

    .about-hero-image::before {
        inset: 12px -8px -12px 8px;
    }

    .about-hero-image img {
        width: 100%;
        height: min(118vw, 620px);
        object-position: center 35%;
    }

    .about-story-grid h2,
    .about-section-heading h2,
    .about-closing h2,
    .about-cta h2 {
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 1.08;
    }

    .about-copy {
        font-size: 1.02rem;
        line-height: 1.75;
    }

    .about-timeline-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 30px 0;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-value {
        min-height: 0;
    }

    .about-value > span {
        margin-bottom: 40px;
    }
}

@media (max-width: 420px) {
    .about-hero {
        padding-top: 98px;
    }

    .about-hero-copy h1 {
        font-size: clamp(2rem, 9.4vw, 2.65rem);
    }

    .about-kicker {
        font-size: .72rem;
    }

    .about-hero-image img {
        height: 122vw;
        max-height: 540px;
    }

    .about-story-grid {
        gap: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-value {
        transition: none;
    }

    .about-value:hover {
        transform: none;
    }
}

/* =========================================================
   MOBILE HEADER FIX – VERSION 2.2.2
   ========================================================= */

@media (max-width: 900px) {
    .site-header {
        width: 100%;
        max-width: 100vw;
        overflow: visible;
    }

    .header-inner {
        height: 76px;
        min-height: 76px;
        width: min(1200px, 92%);
        position: relative;
    }

    .logo {
        min-width: 0;
        max-width: calc(100% - 64px);
    }

    .logo a,
    .custom-logo-link {
        max-width: 100%;
    }

    .custom-logo {
        max-height: 48px;
        max-width: min(240px, 100%);
        width: auto;
        height: auto;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        padding: 0;
        margin-left: 12px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 3px;
        background: rgba(255,255,255,.04);
        color: #fff;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .menu-toggle:focus-visible {
        outline: 2px solid var(--accent-red);
        outline-offset: 3px;
    }

    .menu-toggle-icon {
        display: block;
        transform: translateY(-1px);
    }

    .main-navigation {
        position: fixed;
        z-index: 1100;
        top: 76px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        overscroll-behavior: contain;
        display: none;
        background: rgba(10,10,10,.98);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 18px 40px rgba(0,0,0,.35);
        -webkit-overflow-scrolling: touch;
    }

    .main-navigation.active {
        display: block;
    }

    .main-navigation ul {
        display: flex;
        flex-direction: column;
        width: min(1200px, 92%);
        margin: 0 auto;
        padding: 18px 0 24px;
        gap: 0;
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .main-navigation li:last-child {
        border-bottom: 0;
    }

    .main-navigation a {
        display: block;
        width: 100%;
        padding: 14px 4px;
        font-size: 1.05rem;
        line-height: 1.35;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 420px) {
    .header-inner {
        width: 94%;
    }

    .custom-logo {
        max-height: 42px;
        max-width: min(205px, 100%);
    }

    .menu-toggle {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 28px;
    }
}

/* =========================================================
   STARTSEITE – MOBILE HERO FEINSCHLIFF – VERSION 2.2.4
   ========================================================= */

@media (max-width: 700px) {
    /* Das Logo im festen Header nennt MaD-Event bereits –
       den doppelten Hero-Kicker auf Smartphones ausblenden. */
    .hero-kicker {
        display: none;
    }

    /* Mehr Luft zwischen festem Header und Hauptüberschrift. */
    .hero {
        padding-top: 100px;
    }

    .hero h1 {
        margin-top: 0;
    }
}

@media (max-width: 390px) {
    .hero {
        padding-top: 82px;
    }
}

/* =========================================================
   REFERENZEN – BRAND GUIDELINES – VERSION 2.2.4
   ========================================================= */

/* Gahrens + Battermann:
   gelieferte Negativ-Version auf dunklem Hintergrund,
   großzügiger Schutzraum und keine zusätzlichen Logo-Effekte. */
.reference-logo-card--gahrens-battermann {
    padding: clamp(34px, 4vw, 54px);
}

.reference-logo-card--gahrens-battermann img {
    width: 82%;
    height: auto;
    max-height: 125px;
    filter: none;
}

/* MATO:
   gelieferte Negativ-Version inkl. Schutzraum verwenden.
   Keine Logo-Effekte und keine sichtbare Umrandung der Kachel. */
.reference-logo-card--mato {
    border: none;
}

.reference-logo-card--mato img {
    width: 100%;
    height: auto;
    max-height: 150px;
    filter: none;
}

.reference-logo-card--mato:hover {
    border-color: transparent;
}

@media (max-width: 760px) {
    .reference-logo-card--gahrens-battermann img {
        max-height: 105px;
    }

    .reference-logo-card--mato img {
        max-height: 115px;
    }
}

@media (max-width: 470px) {
    .reference-logo-card--gahrens-battermann img,
    .reference-logo-card--mato img {
        max-height: 120px;
    }
}



/* =========================================================
   REFERENZEN – DESKTOP LOGOGRÖSSEN – VERSION 2.2.5
   Mobile Darstellung bleibt gegenüber 2.2.4 unverändert.
   ========================================================= */

@media (min-width: 761px) {
    /* G+B: auf dem 4-/3-spaltigen Desktop-Raster etwas präsenter,
       ohne das Logo selbst oder seinen Schutzraum zu verändern. */
    .reference-logo-card--gahrens-battermann {
        padding: 34px;
    }

    .reference-logo-card--gahrens-battermann img {
        width: 100%;
        max-height: 150px;
    }

    /* MATO: nur die verfügbare Fläche der Kachel vergrößern.
       Die gelieferte SVG inkl. Schutzraum bleibt unverändert. */
    .reference-logo-card--mato {
        padding: 30px;
    }

    .reference-logo-card--mato img {
        width: 100%;
        max-height: 172px;
    }
}


/* Doctor Blond Referenzlogo */
.reference-logo-card--doctor-blond img {
    width: min(100%, 190px);
    height: 150px;
    margin: 0 auto;
    object-fit: contain;
}


/* Degenhard Club-Band Referenzlogo – aus gelieferter PDF exportiert */
.reference-logo-card--degenhard-club-band {
    padding: clamp(28px, 3vw, 42px);
}

.reference-logo-card--degenhard-club-band img {
    width: 100%;
    height: auto;
    max-height: 135px;
    margin: 0 auto;
    object-fit: contain;
    filter: none;
}

@media (max-width: 760px) {
    .reference-logo-card--degenhard-club-band img {
        max-height: 105px;
    }
}

@media (max-width: 470px) {
    .reference-logo-card--degenhard-club-band img {
        max-height: 115px;
    }
}


/* Referenzen v2.2.10 – Essence Experts / SpeakNight */
.reference-logo-card--speaknight img {
    width: 96%;
    height: 150px;
    object-fit: contain;
    filter: none;
}

@media (max-width: 760px) {
    .reference-logo-card--speaknight img {
        width: 96%;
        height: 115px;
    }
}

@media (max-width: 470px) {
    .reference-logo-card--speaknight img {
        height: 130px;
    }
}


/* =========================================================
   REFERENZEN – ESSENCE EXPERTS & STIFTUNG SPARKASSE – VERSION 2.2.11
   ========================================================= */
.reference-logo-card--essence-experts,
.reference-logo-card--sparkasse-stiftung {
    padding: clamp(28px, 3.2vw, 46px);
}

.reference-logo-card--essence-experts img,
.reference-logo-card--sparkasse-stiftung img {
    width: 100%;
    height: auto;
    max-height: 135px;
    filter: none;
}

/* Liquid Move: breites Original-Banner unverzerrt und ohne Bildeffekt zeigen. */
.reference-logo-card--liquid-move {
    padding: clamp(22px, 2.8vw, 38px);
}

.reference-logo-card--liquid-move img {
    width: 100%;
    height: auto;
    max-height: 118px;
    object-fit: contain;
    filter: none;
}

@media (max-width: 760px) {
    .reference-logo-card--liquid-move img {
        max-height: 94px;
    }
}

@media (max-width: 760px) {
    .reference-logo-card--essence-experts img,
    .reference-logo-card--sparkasse-stiftung img {
        max-height: 105px;
    }
}


/* OMKO – Online Marketing Kongress Referenzlogo */
.reference-logo-card--omko img {
    width: min(100%, 260px);
    height: auto;
    max-height: 130px;
    object-fit: contain;
    filter: none;
}

@media (max-width: 760px) {
    .reference-logo-card--omko img {
        max-height: 115px;
    }
}

/* Marienhaus Gruppe – Referenzlogo v2.2.18
   Gemäß Corporate Design ausschließlich unverändert auf weißem Hintergrund
   mit großzügigem Schutzraum. */
.reference-logo-card--marienhaus {
    background: #ffffff;
    padding: clamp(34px, 4vw, 54px);
}

.reference-logo-card--marienhaus img {
    width: min(100%, 300px);
    height: auto;
    max-height: 145px;
    object-fit: contain;
    object-position: center;
    filter: none;
}

@media (max-width: 760px) {
    .reference-logo-card--marienhaus {
        padding: 30px;
    }

    .reference-logo-card--marienhaus img {
        max-height: 125px;
    }
}

/* =========================================================
   REFERENZEN – SAALBAU / ABG FRANKFURT HOLDING – VERSION 2.2.20
   Originales, transparentes Konzernlogo unverändert auf hellem Hintergrund.
   Das sehr breite Logo erhält eine breitere Kachel, damit Wortmarke und Claim
   ohne Beschnitt oder Verzerrung lesbar bleiben.
   ========================================================= */
.reference-logo-card--saalbau {
    background: #ffffff;
    grid-column: span 2;
    padding: clamp(28px, 3vw, 44px);
}

.reference-logo-card--saalbau img {
    width: 100%;
    height: auto;
    max-height: 145px;
    object-fit: contain;
    object-position: center;
    filter: none;
}

@media (max-width: 1050px) and (min-width: 761px) {
    .reference-logo-card--saalbau {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .reference-logo-card--saalbau {
        grid-column: 1 / -1;
        padding: 28px;
    }

    .reference-logo-card--saalbau img {
        max-height: 118px;
    }
}

@media (max-width: 470px) {
    .reference-logo-card--saalbau {
        grid-column: auto;
        padding: 24px;
    }

    .reference-logo-card--saalbau img {
        max-height: 105px;
    }
}

/* =========================================================
   REFERENZEN – SÜDDEUTSCHE ZEITUNG – VERSION 2.2.21
   Offizielle RGB-Wortmarke (schwarz) unverändert auf hellem Hintergrund.
   Das breite Seitenverhältnis wird mit reduziertem Innenabstand dargestellt,
   ohne Beschnitt, Verzerrung oder zusätzliche Bildeffekte.
   ========================================================= */
.reference-logo-card--sueddeutsche-zeitung {
    background: #ffffff;
    padding: clamp(20px, 2.4vw, 34px);
}

.reference-logo-card--sueddeutsche-zeitung img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    object-position: center;
    filter: none;
}

@media (max-width: 760px) {
    .reference-logo-card--sueddeutsche-zeitung img {
        max-height: 105px;
    }
}

@media (max-width: 470px) {
    .reference-logo-card--sueddeutsche-zeitung {
        padding: 22px;
    }

    .reference-logo-card--sueddeutsche-zeitung img {
        max-height: 110px;
    }
}


/* =========================================================
   Projekte & Kundenstimmen – v2.3.0
   ========================================================= */
.stories-hero,
.story-single-hero {
    padding: clamp(7rem, 12vw, 11rem) 0 clamp(3.5rem, 7vw, 6rem);
    background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.08), transparent 36%), #080808;
}
.stories-hero-inner,
.story-single-hero-inner { max-width: 900px; }
.stories-hero h1,
.story-single-hero h1 { margin: .35rem 0 1rem; }
.stories-hero p:last-child,
.story-single-subtitle { max-width: 760px; font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.76); }
.stories-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.story-card { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.035); }
.story-card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.story-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: #151515; }
.story-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.story-card-link:hover .story-card-media img { transform: scale(1.025); }
.story-card-body { padding: clamp(1.35rem, 3vw, 2rem); }
.story-card-kicker { margin: 0 0 .55rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.story-card h2 { margin: 0 0 .5rem; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.story-card-subtitle { margin: 0 0 1rem; font-weight: 600; opacity: .82; }
.story-card-cta { display: inline-block; margin-top: .75rem; font-weight: 700; }
.stories-trust { border-top: 1px solid rgba(255,255,255,.09); }
.story-single-image { margin-top: -2rem; position: relative; }
.story-single-image img { width: 100%; max-height: 680px; object-fit: cover; border-radius: 18px; }
.story-single-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: clamp(2rem, 5vw, 5rem); padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: 3rem; align-items: start; }
.story-single-content { font-size: 1.06rem; line-height: 1.75; }
.story-single-content h2 { margin-top: 2.25rem; }
.story-quote { position: sticky; top: 7rem; padding: 1.6rem; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.045); }
.story-quote blockquote { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; font-weight: 650; }
.story-quote p { margin: 1rem 0 0; opacity: .7; }
.story-single-back { padding-bottom: 5rem; }
.story-single-back a { font-weight: 700; }
.reference-logo-card--freaksound img { max-width: 88%; max-height: 78%; object-fit: contain; }
.reference-logo-card--congress-park-hanau img { max-width: 98%; max-height: 82%; object-fit: contain; }
.reference-logo-card--villa-stokkum img { max-width: 86%; max-height: 88%; object-fit: contain; }
@media (max-width: 760px) {
    .stories-grid,
    .story-single-layout { grid-template-columns: 1fr; }
    .story-quote { position: static; }
}

/* Achim Hunzinger / Zehntscheune – Projektstory v2.3.2 */
.story-facts { margin-top: 1.35rem; font-size: .92rem; letter-spacing: .03em; color: rgba(255,255,255,.62); }
.story-single-image--fixed img { aspect-ratio: 16/9; max-height: 720px; object-fit: cover; object-position: center 46%; }
.story-lead { font-size: clamp(1.12rem, 2vw, 1.28rem); line-height: 1.7; }
.story-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:2rem 0 3rem; }
.story-gallery figure,.story-location-image { margin:0; }
.story-gallery img,.story-location-image img { width:100%; border-radius:14px; display:block; }
.story-gallery img { aspect-ratio:4/5; object-fit:cover; }
.story-gallery figcaption,.story-location-image figcaption { margin-top:.55rem; font-size:.86rem; opacity:.62; }
.story-quote--portrait { overflow:hidden; padding:0 1.6rem 1.6rem; }
.story-quote--portrait > img { width:calc(100% + 3.2rem); max-width:none; height:auto; margin:0 -1.6rem 1.5rem; display:block; }
.story-relationship { display:block; margin-top:.35rem; font-size:.86rem; opacity:.55; }
.story-video { margin:3.5rem 0; padding-top:2.5rem; border-top:1px solid rgba(255,255,255,.1); }
.story-video-copy h2 { margin-top:.35rem; }
.story-video-consent { position:relative; overflow:hidden; margin-top:1.4rem; border-radius:16px; aspect-ratio:16/9; background:#111; }
.story-video-consent > img { width:100%; height:100%; object-fit:cover; filter:brightness(.42); }
.story-video-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem; text-align:center; }
.story-video-overlay p { margin:0; max-width:520px; }
.story-video-play { border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:.85rem 1.25rem; background:#fff; color:#111; font:inherit; font-weight:750; cursor:pointer; }
.story-video-consent iframe { width:100%; height:100%; border:0; display:block; }
.story-location-image { margin-top:3rem; }
.story-location-image img { aspect-ratio:16/10; object-fit:cover; }
@media(max-width:760px){.story-gallery{grid-template-columns:1fr}.story-gallery img{aspect-ratio:4/3}.story-facts{line-height:1.6}}

/* Referenzen → Projektstories CTA – v2.3.4 */
.references-projectstories {
    padding: 42px 0 8px;
}
.references-projectstories-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid rgba(227, 6, 19, .55);
    border-left: 5px solid var(--accent-red);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(227, 6, 19, .12), rgba(255,255,255,.035) 48%, rgba(255,255,255,.02));
    box-shadow: 0 22px 55px rgba(0,0,0,.26);
}
.references-projectstories-copy h2 {
    margin: 6px 0 10px;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.references-projectstories-copy p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--text-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}
.references-projectstories-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 310px;
    padding: 18px 28px;
    border-radius: 7px;
    box-shadow: 0 12px 32px rgba(227,6,19,.26);
    text-align: center;
    font-size: 1.02rem;
}
.references-projectstories-cta span {
    font-size: 1.35em;
    line-height: 1;
    transition: transform .2s ease;
}
.references-projectstories-cta:hover span,
.references-projectstories-cta:focus-visible span {
    transform: translateX(4px);
}
@media (max-width: 860px) {
    .references-projectstories-card { grid-template-columns: 1fr; }
    .references-projectstories-cta { width: 100%; min-width: 0; }
}

/* Referenzen → Projektstories – Sichtbarkeit v2.3.5 */
.references-projectstories--top {
    padding: 34px 0 18px;
}
.references-projectstories--top .references-projectstories-card {
    border: 2px solid rgba(227, 6, 19, .72);
    border-left-width: 7px;
    background:
        radial-gradient(circle at 85% 20%, rgba(227,6,19,.22), transparent 34%),
        linear-gradient(120deg, rgba(227,6,19,.16), rgba(255,255,255,.055) 50%, rgba(255,255,255,.025));
}
.references-projectstories--top .references-projectstories-cta {
    background: var(--accent-red, #e30613);
    color: #fff;
    border: 2px solid var(--accent-red, #e30613);
    font-weight: 800;
    letter-spacing: .01em;
}
.references-projectstories--top .references-projectstories-cta:hover,
.references-projectstories--top .references-projectstories-cta:focus-visible {
    background: #fff;
    color: #111;
    border-color: #fff;
}
.references-projectstories--bottom {
    padding: 14px 0 clamp(54px, 7vw, 82px);
}
.references-projectstories-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(26px, 4vw, 42px);
    border: 2px solid rgba(227,6,19,.72);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(227,6,19,.18), rgba(255,255,255,.055));
    color: #fff;
    text-decoration: none;
    box-shadow: 0 20px 52px rgba(0,0,0,.30);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.references-projectstories-banner:hover,
.references-projectstories-banner:focus-visible {
    transform: translateY(-2px);
    border-color: #e30613;
    background: linear-gradient(110deg, rgba(227,6,19,.26), rgba(255,255,255,.075));
}
.references-projectstories-banner-copy {
    display: grid;
    gap: 7px;
}
.references-projectstories-banner-copy strong {
    font-size: clamp(1.45rem, 2.8vw, 2.15rem);
    line-height: 1.15;
}
.references-projectstories-banner-copy > span:last-child {
    color: rgba(255,255,255,.72);
    font-size: 1rem;
}
.references-projectstories-banner-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 22px;
    border-radius: 7px;
    background: #e30613;
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}
@media (max-width: 760px) {
    .references-projectstories-banner {
        align-items: stretch;
        flex-direction: column;
    }
    .references-projectstories-banner-action {
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

/* v2.3.6 – vollständige Achim-Kundenstimme */
.story-full-testimonial { margin-top: clamp(2.5rem,5vw,4.5rem); padding: clamp(1.5rem,3vw,2.5rem); border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.035); }
.story-full-testimonial p { line-height:1.72; }
.story-full-testimonial blockquote { margin:2rem 0; padding:1.25rem 1.5rem; border-left:4px solid #e5242a; background:rgba(255,255,255,.04); font-size:clamp(1.08rem,1.6vw,1.28rem); line-height:1.6; }
.story-testimonial-signature { margin-top:2rem; font-size:1.08rem; }
.story-testimonial-tags { opacity:.55; font-size:.86rem; overflow-wrap:anywhere; }
\n\n/* =========================================================\n   REFERENZEN – PETRY EVENTTECHNIK & WILLY-BRANDT-HALLE – VERSION 2.3.9\n   ========================================================= */\n.reference-logo-card--petry-eventtechnik {\n    background: #000000;\n    padding: clamp(24px, 2.6vw, 38px);\n}\n\n.reference-logo-card--petry-eventtechnik img {\n    width: min(100%, 315px);\n    height: auto;\n    max-height: 160px;\n    object-fit: contain;\n    filter: none;\n}\n\n.reference-logo-card--willy-brandt-halle {\n    background: #000000;\n    grid-column: span 2;\n    padding: clamp(28px, 3vw, 44px);\n}\n\n.reference-logo-card--willy-brandt-halle img {\n    width: min(100%, 620px);\n    height: auto;\n    max-height: 150px;\n    object-fit: contain;\n    filter: none;\n}\n\n@media (max-width: 1050px) and (min-width: 761px) {\n    .reference-logo-card--willy-brandt-halle {\n        grid-column: 1 / -1;\n    }\n}\n\n@media (max-width: 760px) {\n    .reference-logo-card--petry-eventtechnik img { max-height: 132px; }\n    .reference-logo-card--willy-brandt-halle { grid-column: 1 / -1; padding: 28px; }\n    .reference-logo-card--willy-brandt-halle img { max-height: 115px; }\n}\n\n@media (max-width: 470px) {\n    .reference-logo-card--willy-brandt-halle { grid-column: auto; padding: 24px; }\n    .reference-logo-card--willy-brandt-halle img { max-height: 95px; }\n}\n
/* TON PAGE v2.4.0 */
.ton-story{padding:110px 0}.ton-story-dark{background:#050505}.ton-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,7vw,100px);align-items:center}.ton-story-grid-reverse .ton-story-media{order:2}.ton-story-copy h2{font-size:clamp(2.25rem,4.4vw,4.5rem);line-height:1.04;margin-bottom:24px}.ton-story-copy>p:not(.ton-kicker){color:var(--text-muted);font-size:1.1rem;margin-bottom:24px}.ton-benefits{list-style:none;display:grid;gap:12px;margin:28px 0 32px}.ton-benefits li{position:relative;padding-left:25px;color:#e6e6e6}.ton-benefits li:before{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;background:var(--accent-red)}.ton-story-media{position:relative;min-height:570px;overflow:hidden;border:1px solid var(--border);background:#111}.ton-story-media img{width:100%;height:100%;min-height:570px;object-fit:cover;display:block;transition:transform .6s ease}.ton-story:hover .ton-story-media img{transform:scale(1.025)}.ton-story-media-focus-top img{object-position:center 28%}.ton-real-gallery{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:18px;margin-top:55px}.ton-real-gallery figure{margin:0;min-height:360px;overflow:hidden;border:1px solid var(--border);background:#111}.ton-real-gallery img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}.ton-system-overview{padding:110px 0}.ton-system-overview .ton-section-heading{margin-bottom:50px}.ton-system-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.ton-system-card{border:1px solid var(--border);background:linear-gradient(145deg,#171717,#0b0b0b);padding:30px 26px}.ton-system-card h3{font-size:1.55rem;margin-bottom:12px}.ton-system-card p{color:var(--text-muted);font-size:.98rem}.ton-system-card strong{color:#fff}.ton-competence-strip{padding:80px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.ton-competence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.ton-competence-item{padding:28px 0;border-top:2px solid var(--accent-red)}.ton-competence-item h3{font-size:1.35rem;margin-bottom:10px}.ton-competence-item p{color:var(--text-muted)}
@media(max-width:900px){.ton-story{padding:80px 0}.ton-story-grid{grid-template-columns:1fr;gap:35px}.ton-story-grid-reverse .ton-story-media{order:0}.ton-story-media,.ton-story-media img{min-height:420px}.ton-real-gallery{grid-template-columns:1fr 1fr}.ton-real-gallery figure:first-child{grid-column:1/-1}.ton-system-cards{grid-template-columns:1fr 1fr}.ton-competence-grid{grid-template-columns:1fr}}
@media(max-width:600px){.ton-story{padding:65px 0}.ton-story-media,.ton-story-media img{min-height:390px}.ton-real-gallery{grid-template-columns:1fr}.ton-real-gallery figure:first-child{grid-column:auto}.ton-real-gallery figure,.ton-real-gallery img{min-height:330px}.ton-system-cards{grid-template-columns:1fr}}

/* Video: regionale SEO-/Conversion-Sektion, v2.4.3 */
.video-local {
    background: linear-gradient(180deg, #0a0a0a 0%, #0e0e0e 100%);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.video-local-inner { max-width: 900px; }
.video-local h2 {
    margin-top: 10px;
    max-width: 820px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
}
.video-local h2 span { color: var(--accent-red); }
.video-local p:not(.section-kicker) {
    margin-top: 22px;
    max-width: 790px;
    color: var(--text-muted);
    font-size: 1.08rem;
}
.video-text-link {
    display: inline-block;
    margin-top: 26px;
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-red);
    padding-bottom: 4px;
}
.video-text-link:hover { color: var(--accent-red); }

@media (max-width: 600px) {
    .video-local { padding: 72px 0; }
    .video-local p:not(.section-kicker) { font-size: 1rem; }
}

/* Referenzen: Schauspiel Frankfurt und weiße WBH-Kachel – v2.4.4 */
.reference-logo-card--willy-brandt-halle {
    background: #ffffff;
}

.reference-logo-card--willy-brandt-halle img {
    background: #000000;
}

.reference-logo-card--schauspiel-frankfurt {
    background: #ffdf00;
    padding: 14px;
}

.reference-logo-card--schauspiel-frankfurt img {
    width: auto;
    max-width: 100%;
    height: 190px;
    max-height: 190px;
    object-fit: contain;
    filter: none;
}

.reference-logo-card--laemmerspieler-karnevalverein {
    background: #ffffff;
}

.reference-logo-card--laemmerspieler-karnevalverein img {
    width: 92%;
    max-width: 360px;
    height: auto;
    max-height: 185px;
    object-fit: contain;
    filter: none;
}

/* Textreferenzen mit ausdrücklicher Namensfreigabe – v2.4.6 */
.reference-logo-card--ihk-offenbach {
    background: #ffffff;
}

.reference-logo-card--ihk-offenbach .reference-logo-card-text {
    color: #111111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.reference-text-experience {
    max-width: 940px;
    margin: clamp(30px, 5vw, 58px) auto 0;
    padding: clamp(24px, 3.5vw, 38px);
    display: grid;
    grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr);
    gap: clamp(18px, 3vw, 36px);
    align-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-left: 4px solid var(--accent-red);
    background: linear-gradient(145deg, #171717, #0b0b0b);
}

.reference-text-experience .section-kicker {
    margin: 0;
}

.reference-text-experience p:last-child {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    line-height: 1.55;
}

@media (max-width: 650px) {
    .reference-text-experience {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .reference-logo-card--schauspiel-frankfurt img {
        height: 160px;
        max-height: 160px;
    }
}

/* Referenzen: optimierte Kramwinkel- und WBH-Darstellung – v2.4.8 */
.reference-logo-card--kramwinkel {
    background: #ffffff;
    padding: clamp(18px, 2.4vw, 30px);
}

.reference-logo-card--kramwinkel img {
    width: min(100%, 390px);
    max-width: 94%;
    max-height: 205px;
}

.reference-logo-card--willy-brandt-halle {
    background: #ffffff;
    padding: clamp(24px, 3vw, 42px);
}

.reference-logo-card--willy-brandt-halle img {
    width: min(100%, 640px);
    max-width: 100%;
    height: auto;
    max-height: 150px;
    background: transparent;
    object-fit: contain;
    filter: none;
}

@media (max-width: 760px) {
    .reference-logo-card--kramwinkel {
        padding: 18px;
    }

    .reference-logo-card--kramwinkel img {
        max-height: 180px;
    }
}

/* Startseite: kundenorientierte Neustrukturierung – v2.4.12 */
.home-usecases { background:#101010; }
.usecase-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.usecase-card { position:relative; min-height:410px; overflow:hidden; background:#171717; border:1px solid var(--border); }
.usecase-card img { width:100%; height:210px; object-fit:cover; display:block; }
.usecase-card div { padding:24px; }
.usecase-card span { color:var(--accent-red); font-weight:700; font-size:.8rem; letter-spacing:.12em; }
.usecase-card h3 { margin:8px 0 10px; font-size:1.35rem; }
.usecase-card p { margin:0; color:var(--text-muted); line-height:1.55; }
.home-personal { background:#090909; }
.home-personal-grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:clamp(36px,6vw,90px); align-items:center; }
.home-personal figure { margin:0; overflow:hidden; max-height:610px; }
.home-personal figure img { width:100%; height:100%; max-height:610px; object-fit:cover; object-position:center 35%; display:block; }
.home-personal-copy h2,.home-scale h2,.home-stories h2 { font-size:clamp(2rem,4vw,3.6rem); line-height:1.05; margin:.25em 0 .55em; }
.home-personal-copy h2 span,.home-scale h2 span,.home-stories h2 span { color:var(--accent-red); }
.home-personal-copy p,.home-scale-copy p,.home-stories p { color:var(--text-muted); font-size:1.08rem; line-height:1.7; }
.text-link { display:inline-block; margin-top:12px; color:#fff; font-weight:700; text-decoration:none; border-bottom:1px solid var(--accent-red); padding-bottom:4px; }
.home-scale { background:#151515; }
.home-scale-inner { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(35px,7vw,100px); align-items:start; }
.home-scale-copy strong { color:#fff; }
.home-stories { background:#0a0a0a; }
.home-stories-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); gap:clamp(35px,6vw,80px); align-items:center; }
.home-stories figure { margin:0; overflow:hidden; }
.home-stories figure img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.home-stories .btn { margin-top:18px; }
@media (max-width:1050px){ .usecase-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){
 .usecase-grid,.home-personal-grid,.home-scale-inner,.home-stories-grid{grid-template-columns:1fr;}
 .usecase-card{min-height:0}.usecase-card img{height:220px}
 .home-personal figure{max-height:480px}.home-personal figure img{max-height:480px}
 .home-personal-copy h2,.home-scale h2,.home-stories h2{font-size:clamp(2rem,10vw,3rem)}
}


/* Startseite Feinschliff – v2.4.14 */
@media (min-width: 761px) {
  .hero.hero-slider .hero-content { max-width: 1040px; }
  .hero.hero-slider h1 { max-width: 1040px; font-size: clamp(3rem, 5.9vw, 6.25rem); }
}


/* =========================================================
   STARTSEITE – MOBILE FINETUNING – VERSION 2.4.15
   Nur Smartphones: Typografie, Abstände und Header-Verhalten.
   Desktop/Tablet ab 768px bleiben unverändert.
   ========================================================= */
@media (max-width: 767px) {
    /* Auf Smartphones soll der Header den Seiteninhalt nicht dauerhaft
       überdecken. Er bleibt im normalen Dokumentfluss und verschwindet
       beim Scrollen – dadurch werden Abschnittsüberschriften nicht abgeschnitten. */
    .home .site-header {
        position: relative;
        top: auto;
    }

    .home .main-navigation {
        top: 76px;
    }

    /* Startseite insgesamt etwas kompakter, ohne Karten/Bilder klein zu machen. */
    .home .section {
        padding: 72px 0;
    }

    .home .section-title {
        margin-bottom: 34px;
    }

    .home .section-kicker,
    .home .service-card-kicker,
    .home .hero-kicker {
        font-size: .72rem;
        letter-spacing: .13em;
    }

    /* Große Abschnittsüberschriften auf ein ruhigeres mobiles Maß bringen. */
    .home .section-title h2,
    .home .home-personal-copy h2,
    .home .home-scale h2,
    .home .home-stories h2,
    .home .home-cta h2 {
        font-size: clamp(2.15rem, 9vw, 2.75rem);
        line-height: 1.06;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    /* Hero bleibt prominent, bricht aber sauberer und braucht weniger Höhe. */
    .home .hero.hero-slider {
        min-height: 0;
        height: auto;
        padding: 72px 0 78px;
    }

    .home .hero.hero-slider h1 {
        font-size: clamp(2.55rem, 11vw, 3.45rem);
        line-height: 1.04;
        max-width: 100%;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .home .hero.hero-slider p:not(.hero-kicker) {
        font-size: 1.04rem;
        line-height: 1.62;
        margin-bottom: 28px;
    }

    .home .hero-actions {
        gap: 14px;
        width: 100%;
    }

    .home .hero-actions .btn,
    .home .hero-actions .hero-secondary-link {
        width: 100%;
        text-align: center;
    }

    .home .hero-actions .hero-secondary-link {
        border: 1px solid rgba(255,255,255,.36);
        padding: 14px 20px;
    }

    /* Use Cases */
    .home .usecase-grid {
        gap: 16px;
    }

    .home .usecase-card img {
        height: 205px;
    }

    .home .usecase-card div {
        padding: 22px 22px 26px;
    }

    .home .usecase-card h3 {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .home .usecase-card p,
    .home .section-title .section-intro,
    .home .home-personal-copy p,
    .home .home-scale-copy p,
    .home .home-stories p,
    .home .home-cta p:not(.section-kicker) {
        font-size: 1rem;
        line-height: 1.62;
    }

    /* Persönliche Verantwortung */
    .home .home-personal-grid,
    .home .home-scale-inner,
    .home .home-stories-grid {
        gap: 30px;
    }

    .home .home-personal figure,
    .home .home-personal figure img {
        max-height: none;
    }

    .home .home-personal figure img {
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center 35%;
    }

    .home .text-link {
        line-height: 1.35;
    }

    /* Leistungskarten: große Bilder beibehalten, Text jedoch kompakter. */
    .home .service-cards {
        gap: 20px;
    }

    .home .service-card {
        min-height: 360px;
        padding: 26px;
    }

    .home .service-card-content h3 {
        font-size: clamp(2rem, 9vw, 2.65rem);
        margin-bottom: 14px;
    }

    .home .service-card-content > p:not(.service-card-kicker) {
        font-size: 1rem;
        line-height: 1.55;
        margin-bottom: 24px;
    }

    /* Projektband bewusst groß lassen, aber umgebende Luft reduzieren. */
    .home .project-strip {
        padding-top: 26px;
        padding-bottom: 54px;
    }

    .home .project-strip-heading {
        margin-bottom: 20px;
    }

    /* Skalierbarkeit: weniger Leerraum und besser lesbare Textlänge. */
    .home .home-scale-copy p + p {
        margin-top: 14px;
    }

    /* Kundenstimmen */
    .home .home-stories .btn,
    .home .home-cta .btn {
        width: 100%;
        text-align: center;
    }

    .home .home-stories figure img {
        aspect-ratio: 4 / 3;
    }

    /* Abschluss-CTA etwas kompakter als bisher. */
    .home .home-cta {
        padding-top: 76px;
        padding-bottom: 82px;
    }

    .home .home-cta p:not(.section-kicker) {
        margin-bottom: 26px;
    }
}

/* v2.4.36: Kleine Akzenttexte erhalten auf dunklem Grund WCAG-Kontrast.
   Das kräftige Markenrot großer Überschriften und Flächen bleibt erhalten. */
.section-kicker,
.usecase-card span,
.audience-card > span,
.ton-kicker,
.video-service-number,
.story-eyebrow,
.story-kicker {
    color: var(--accent-text);
}

@media (max-width: 420px) {
    .home .section {
        padding: 64px 0;
    }

    .home .hero.hero-slider {
        padding: 62px 0 68px;
    }

    .home .hero.hero-slider h1 {
        font-size: clamp(2.35rem, 10.7vw, 3rem);
    }

    .home .section-title h2,
    .home .home-personal-copy h2,
    .home .home-scale h2,
    .home .home-stories h2,
    .home .home-cta h2 {
        font-size: clamp(2rem, 8.8vw, 2.5rem);
    }
}


/* Startseite Mobile-Korrekturen – v2.4.16
   Hero-Overflow beseitigt und vertikale Abstände zwischen Einsatzbereichen
   und persönlicher Verantwortung moderat reduziert. */
.hero h1 .hero-title-first::after {
    content: none;
    display: none;
}

@media (max-width: 700px) {
    .home .hero.hero-slider h1 .hero-title-first {
        display: inline-block;
        margin-top: 0;
        font-size: .72em;
        line-height: 1.08;
        letter-spacing: -.045em;
        white-space: nowrap;
        max-width: 100%;
        text-shadow: none;
    }

    .home .home-usecases {
        padding-bottom: 40px;
    }

    .home .home-personal {
        padding-top: 48px;
    }
}

@media (max-width: 390px) {
    .home .hero.hero-slider h1 .hero-title-first {
        font-size: .70em;
    }

    .home .home-usecases {
        padding-bottom: 34px;
    }

    .home .home-personal {
        padding-top: 42px;
    }
}


/* v2.4.17 – zielgruppenbasierte Einstiege */
.home-audiences{background:#0b0b0b;border-top:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.audience-card{display:flex;flex-direction:column;min-height:340px;padding:34px;border:1px solid #303030;background:#121212;color:#fff;text-decoration:none;transition:.2s ease}
.audience-card:hover{transform:translateY(-3px);border-color:#ef0a18}
.audience-card>span{color:#ef0a18;font-weight:800;letter-spacing:.16em}.audience-card h3{font-size:clamp(1.45rem,2vw,2rem);margin:28px 0 18px}.audience-card p{color:#b9b9b9;line-height:1.65}.audience-card strong{margin-top:auto;padding-top:24px}.audience-card-featured{border-color:#5a1a1f;background:linear-gradient(145deg,#181111,#111)}
.audience-page{background:#080808;color:#fff}.audience-hero{padding:150px 0 110px;background:radial-gradient(circle at 80% 20%,#241114 0,transparent 40%),#090909}.audience-hero h1{max-width:900px;font-size:clamp(3rem,7vw,6.4rem);line-height:.98;margin:18px 0 28px}.audience-hero h1 span,.audience-detail-grid h2 span,.audience-cross h2 span,.operator-tech h2 span{color:#ef0a18}.audience-hero>div>p:not(.section-kicker){max-width:820px;color:#c2c2c2;font-size:1.3rem;line-height:1.7;margin-bottom:32px}
.audience-detail-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}.audience-detail-grid h2,.audience-cross h2,.operator-tech h2{font-size:clamp(2.5rem,5vw,4.8rem);line-height:1.05;margin-top:12px}.audience-detail-grid>div:last-child>p{font-size:1.2rem;line-height:1.75;color:#bcbcbc}.audience-list{list-style:none;padding:0;margin:28px 0 0}.audience-list li{padding:15px 0;border-bottom:1px solid #2b2b2b;font-weight:700}.audience-list li:before{content:'→';color:#ef0a18;margin-right:14px}
.audience-cross,.operator-tech{background:#121212}.audience-mini-grid,.operator-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}.audience-mini-grid a,.operator-grid article{padding:30px;border:1px solid #333;background:#0c0c0c;color:#fff;text-decoration:none}.audience-mini-grid h3,.operator-grid h3{font-size:1.5rem;margin:0 0 14px}.audience-mini-grid p,.operator-grid p,.operator-note{color:#bcbcbc;line-height:1.65}.operator-note{max-width:900px;margin-top:30px}.operator-hero{background:radial-gradient(circle at 78% 20%,#191919 0,transparent 42%),#080808}.private-hero{background:radial-gradient(circle at 80% 20%,#2a1215 0,transparent 40%),#090909}
@media(max-width:820px){.audience-grid,.audience-detail-grid,.audience-mini-grid,.operator-grid{grid-template-columns:1fr}.audience-grid{gap:14px;margin-top:28px}.audience-card{min-height:0;padding:26px}.audience-card h3{margin:18px 0 12px}.audience-hero{padding:95px 0 72px}.audience-hero h1{font-size:clamp(2.7rem,12vw,4.4rem)}.audience-hero>div>p:not(.section-kicker){font-size:1.08rem}.audience-detail-grid{gap:28px}.home-audiences{padding-top:70px;padding-bottom:70px}}

/* Operator-Kompetenz und interne Praxisverweise – v2.4.34 */
.operator-proof {
    background: #0d0d0d;
}
.operator-proof-grid {
    display: grid;
    grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
    gap: clamp(38px, 6vw, 82px);
    align-items: center;
}
.operator-proof-media {
    margin: 0;
    overflow: hidden;
    border: 1px solid #303030;
}
.operator-proof-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 38%;
}
.operator-proof-copy h2,
.operator-crosslinks h2 {
    margin: 12px 0 24px;
    font-size: clamp(2.3rem, 4.6vw, 4.4rem);
    line-height: 1.06;
}
.operator-proof-copy h2 span,
.operator-crosslinks h2 span {
    color: var(--accent-red);
}
.operator-proof-copy > p:not(.section-kicker) {
    color: #bcbcbc;
    font-size: 1.08rem;
    line-height: 1.72;
}
.operator-proof-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
}
.operator-proof-facts div {
    padding: 20px 18px;
    border-top: 2px solid var(--accent-red);
    background: #151515;
}
.operator-proof-facts strong,
.operator-proof-facts span {
    display: block;
}
.operator-proof-facts strong {
    color: #fff;
    font-size: 1rem;
}
.operator-proof-facts span {
    margin-top: 7px;
    color: #a9a9a9;
    font-size: .86rem;
    line-height: 1.45;
}
.operator-crosslinks {
    background: #090909;
}
.operator-crosslinks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
}
.operator-crosslinks-grid a {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 180px;
    padding: 28px;
    border: 1px solid #333;
    color: #fff;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.operator-crosslinks-grid a:hover,
.operator-crosslinks-grid a:focus-visible {
    transform: translateY(-3px);
    border-color: var(--accent-red);
    background: #121212;
}
.operator-crosslinks-grid strong {
    font-size: 1.35rem;
}
.operator-crosslinks-grid span {
    margin-top: auto;
    color: #bcbcbc;
    line-height: 1.55;
}

/* Google-Bewertungen als leichtes, datenschutzfreundliches Vertrauenssignal. */
.google-reviews-section {
    background: #0d0d0d;
}
.google-reviews-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding: clamp(30px, 5vw, 56px);
    border: 1px solid rgba(227, 6, 19, .58);
    border-left: 5px solid var(--accent-red);
    background: linear-gradient(120deg, rgba(227, 6, 19, .11), rgba(255,255,255,.025));
}
.google-reviews-copy h2 {
    margin: 10px 0 16px;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.08;
}
.google-reviews-copy p:last-child {
    max-width: 760px;
    margin-bottom: 0;
    color: #bcbcbc;
    font-size: 1.05rem;
    line-height: 1.65;
}
.google-reviews-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    text-align: center;
}
.google-review-secondary {
    color: #fff;
    font-weight: 750;
    text-decoration: none;
}
.google-review-secondary:hover,
.google-review-secondary:focus-visible {
    color: var(--accent-red);
}

@media (max-width: 900px) {
    .operator-proof-grid,
    .google-reviews-card {
        grid-template-columns: 1fr;
    }
    .operator-proof-media {
        max-width: 680px;
    }
    .operator-proof-media img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 767px) {
    .operator-proof-grid {
        gap: 28px;
    }
    .operator-proof-media img {
        aspect-ratio: 3 / 4;
        object-position: center 35%;
        border-radius: var(--ci-mobile-radius);
    }
    .operator-proof-copy h2,
    .operator-crosslinks h2,
    .google-reviews-copy h2 {
        font-size: var(--ci-mobile-h2);
        line-height: var(--ci-mobile-line-heading);
    }
    .operator-proof-copy > p:not(.section-kicker),
    .google-reviews-copy p:last-child {
        font-size: var(--ci-mobile-body);
        line-height: var(--ci-mobile-line);
    }
    .operator-proof-facts,
    .operator-crosslinks-grid {
        grid-template-columns: 1fr;
    }
    .operator-proof-facts {
        gap: 10px;
        margin-top: 24px;
    }
    .operator-crosslinks-grid {
        gap: 14px;
        margin-top: 26px;
    }
    .operator-crosslinks-grid a {
        min-height: 0;
        padding: var(--ci-mobile-card-pad);
    }
    .google-reviews-card {
        padding: 26px 22px;
        border-left-width: 4px;
    }
    .google-reviews-actions .btn {
        width: 100%;
    }
    .contact-review-note {
        padding: 20px 18px;
    }
}


/* =========================================================
   ZIELGRUPPENSEITEN – MOBILE FINETUNING – VERSION 2.4.20
   Kompaktere Abstände und ruhigere Typografie auf Smartphones.
   Desktop und Tablet ab 768px bleiben unverändert.
   ========================================================= */
@media (max-width: 767px) {
    /* Die neuen Zielgruppenseiten sollen auf dem Smartphone nicht wie
       Desktop-Layouts mit riesigen Abständen wirken. */
    .audience-page .section {
        padding: 62px 0;
    }

    .audience-page .audience-hero {
        padding-top: 94px;
        padding-bottom: 58px;
    }

    /* Lange Begriffe wie „Veranstaltungstechnik“ müssen in der
       verfügbaren Breite bleiben, ohne seitlich abgeschnitten zu werden. */
    .audience-page .audience-hero h1 {
        max-width: 100%;
        font-size: clamp(2.15rem, 9vw, 2.65rem);
        line-height: 1.04;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
        margin: 16px 0 24px;
    }

    .audience-page .audience-hero > div > p:not(.section-kicker) {
        max-width: 100%;
        font-size: 1.03rem;
        line-height: 1.62;
        margin-bottom: 26px;
    }

    .audience-page .audience-hero .btn,
    .audience-page .home-cta .btn {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .audience-page .audience-detail-grid {
        gap: 22px;
    }

    .audience-page .audience-detail-grid h2,
    .audience-page .audience-cross h2,
    .audience-page .operator-tech h2,
    .audience-page .private-dj-visual h2,
    .audience-page .home-cta h2 {
        max-width: 100%;
        font-size: clamp(2rem, 8.6vw, 2.45rem);
        line-height: 1.07;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
        margin-top: 10px;
    }

    .audience-page .audience-detail-grid > div:last-child > p,
    .audience-page .private-dj-visual p:not(.section-kicker),
    .audience-page .audience-cross .section-intro,
    .audience-page .home-cta p:not(.section-kicker) {
        font-size: 1.02rem;
        line-height: 1.62;
    }

    .audience-page .audience-list {
        margin-top: 22px;
    }

    .audience-page .audience-list li {
        padding: 14px 0;
        line-height: 1.45;
    }

    .audience-page .audience-mini-grid,
    .audience-page .operator-grid {
        gap: 16px;
        margin-top: 28px;
    }

    .audience-page .audience-mini-grid a,
    .audience-page .operator-grid article {
        padding: 24px;
    }

    .audience-page .audience-mini-grid h3,
    .audience-page .operator-grid h3 {
        font-size: 1.35rem;
        line-height: 1.25;
    }

    .audience-page .operator-note {
        margin-top: 24px;
        font-size: 1rem;
        line-height: 1.62;
    }

    /* Private Veranstaltungen: Bild und Textblock ohne zusätzliche
       Browser-Standardränder, mit kontrolliertem Abstand. */
    .audience-page .private-dj-visual .home-personal-grid {
        gap: 30px;
    }

    .audience-page .private-dj-visual figure {
        margin: 0;
    }

    .audience-page .private-dj-visual figure img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Abschlussbereiche bewusst kompakt halten. */
    .audience-page .home-cta {
        padding-top: 66px;
        padding-bottom: 72px;
    }
}

@media (max-width: 420px) {
    .audience-page .section {
        padding: 56px 0;
    }

    .audience-page .audience-hero {
        padding-bottom: 52px;
    }

    .audience-page .audience-hero h1 {
        font-size: clamp(2.05rem, 8.8vw, 2.4rem);
    }

    .audience-page .audience-detail-grid h2,
    .audience-page .audience-cross h2,
    .audience-page .operator-tech h2,
    .audience-page .private-dj-visual h2,
    .audience-page .home-cta h2 {
        font-size: clamp(1.9rem, 8.2vw, 2.25rem);
    }
}

/* =========================================================
   ZIELGRUPPENSEITEN – MOBILE DETAILFINETUNING – VERSION 2.4.21
   - lange Akzentwörter bleiben ungetrennt
   - Aufzählungen mit sauberem hängendem Einzug
   ========================================================= */
@media (max-width: 767px) {
    /* Das rote Akzentwort im Hero bleibt als Einheit erhalten.
       Passt es nicht mehr in die Restbreite, rutscht es komplett
       in die nächste Zeile statt getrennt zu werden. */
    .audience-page .audience-hero h1 span {
        display: inline-block;
        white-space: nowrap;
        hyphens: none;
        overflow-wrap: normal;
        word-break: keep-all;
    }

    /* Aufzählungen: Pfeil in eigener Spalte, Folgezeilen beginnen
       exakt unter dem ersten Buchstaben der ersten Textzeile. */
    .audience-page .audience-list li {
        position: relative;
        padding-left: 2rem;
        font-weight: 700;
    }

    .audience-page .audience-list li::before {
        position: absolute;
        left: 0;
        top: 14px;
        width: 1.35rem;
        margin-right: 0;
        text-align: left;
        font-weight: 700;
    }
}

/* =========================================================
   Thomas Kiersch / project-K & Young Voices – Projektstory v2.4.22
   ========================================================= */
.story-single-image--thomas img {
    aspect-ratio: 16 / 9;
    max-height: 720px;
    object-fit: cover;
    object-position: center 48%;
}
.story-single-layout--thomas .story-single-content {
    min-width: 0;
}
.story-location-image--thomas img {
    aspect-ratio: 4 / 5;
    max-height: 820px;
    object-position: center 38%;
}
.story-gallery--thomas img {
    aspect-ratio: 4 / 5;
    object-position: center center;
}
.story-location-image--thomas-bw img {
    aspect-ratio: 4 / 3;
    object-position: center 48%;
    filter: grayscale(1);
}
.story-quote--thomas {
    border-top: 3px solid var(--accent-red);
}
.story-quote--thomas .story-relationship {
    margin-top: .55rem;
    line-height: 1.5;
}
.story-testimonial-signature span {
    font-size: .92rem;
    font-weight: 400;
    opacity: .7;
}

/* =========================================================
   Kinderfeuerwehr Mühlheim – Projektstory v2.4.32
   ========================================================= */
.story-card-media--kinderfeuerwehr img {
    object-position: center 58%;
}
.story-single-image--kinderfeuerwehr img {
    aspect-ratio: 16 / 9;
    max-height: 720px;
    object-fit: cover;
    object-position: center 58%;
}
.story-single-layout--kinderfeuerwehr .story-single-content {
    min-width: 0;
}
.story-location-image--kinderfeuerwehr-ceremony img,
.story-location-image--kinderfeuerwehr-live img {
    aspect-ratio: 4 / 5;
    max-height: 820px;
    object-position: center 44%;
}
.story-gallery--kinderfeuerwehr img {
    aspect-ratio: 4 / 5;
    object-position: center center;
}
.story-quote--kinderfeuerwehr {
    border-top: 3px solid var(--accent-red);
}
.story-quote--kinderfeuerwehr .section-kicker {
    margin-top: 0;
}
.story-full-testimonial--kinderfeuerwehr blockquote {
    margin: 1.25rem 0 1.5rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--accent-red);
    font-size: clamp(1.12rem, 2vw, 1.35rem);
    line-height: 1.62;
}
.story-kinderfeuerwehr-cta {
    border-top: 3px solid var(--accent-red);
}
.story-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.35rem;
    margin-top: 1.5rem;
}
.story-secondary-link {
    color: #fff;
    font-weight: 750;
    text-decoration: none;
}
.story-secondary-link:hover,
.story-secondary-link:focus-visible {
    color: var(--accent-red);
}

/* Smartphone-Größen bewusst an die seit v2.4.15 optimierte Startseite angelehnt. */
@media (max-width: 767px) {
    .stories-hero,
    .story-single-hero {
        padding: 72px 0 42px;
    }

    .story-single-hero h1 {
        font-size: clamp(2.15rem, 9vw, 2.75rem);
        line-height: 1.06;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .story-single-subtitle {
        font-size: 1rem;
        line-height: 1.62;
    }

    .story-facts {
        font-size: .82rem;
        line-height: 1.55;
        letter-spacing: .02em;
    }

    .story-single-image,
    .story-single-image--thomas {
        margin-top: -1rem;
    }

    .story-single-image img,
    .story-single-image--thomas img {
        border-radius: 10px;
    }

    .story-single-image--thomas img {
        aspect-ratio: 4 / 3;
        max-height: none;
        object-position: center 48%;
    }

    .story-single-layout--thomas {
        gap: 28px;
        padding-top: 48px;
        padding-bottom: 38px;
    }

    .story-single-content {
        font-size: 1rem;
        line-height: 1.65;
    }

    .story-lead {
        font-size: 1.05rem;
        line-height: 1.66;
    }

    .story-single-content h2,
    .story-full-testimonial h2 {
        font-size: clamp(1.75rem, 7.5vw, 2.25rem);
        line-height: 1.1;
        margin-top: 2rem;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .story-gallery--thomas {
        gap: 18px;
        margin: 1.8rem 0 2.4rem;
    }

    .story-gallery--thomas img,
    .story-location-image--thomas img,
    .story-location-image--thomas-bw img {
        aspect-ratio: 4 / 3;
        max-height: none;
        object-fit: cover;
        border-radius: 10px;
    }

    .story-location-image--thomas img {
        object-position: center 38%;
    }

    .story-full-testimonial {
        margin-top: 2.4rem;
        padding: 22px 20px;
        border-radius: 12px;
    }

    .story-full-testimonial p {
        line-height: 1.65;
    }

    .story-quote--thomas {
        padding: 22px 20px;
        border-radius: 12px;
    }

    .story-quote--thomas blockquote {
        font-size: 1.08rem;
        line-height: 1.55;
    }

    .story-single-image--kinderfeuerwehr img {
        aspect-ratio: 4 / 5;
        max-height: none;
        object-position: center 56%;
    }

    .story-single-layout--kinderfeuerwehr {
        gap: 28px;
        padding-top: 42px;
        padding-bottom: 38px;
    }

    .story-gallery--kinderfeuerwehr {
        gap: 18px;
        margin: 1.8rem 0 2.4rem;
    }

    .story-gallery--kinderfeuerwehr img,
    .story-location-image--kinderfeuerwehr-live img {
        aspect-ratio: 4 / 3;
        max-height: none;
        object-fit: cover;
        border-radius: 10px;
    }

    /* Das Hochformat der akademischen Feier vollständig zeigen, damit
       die Person am Rednerpult nicht am oberen Bildrand abgeschnitten wird. */
    .story-location-image--kinderfeuerwehr-ceremony img {
        aspect-ratio: 3 / 4;
        max-height: none;
        object-fit: cover;
        object-position: center top;
        border-radius: 10px;
    }

    .story-full-testimonial--kinderfeuerwehr blockquote {
        padding-left: 1rem;
        font-size: 1.02rem;
        line-height: 1.55;
    }

    .story-cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .story-cta-actions .button {
        width: 100%;
        text-align: center;
    }
}


/* =========================================================
   PROJEKTSTORIES – MOBILE FINETUNING – VERSION 2.4.24
   iPhone: kompaktere Typografie + Header nicht sticky.
   Desktop/Tablet bleiben unverändert.
   ========================================================= */
@media (max-width: 767px) {
    /* Wie auf der Startseite: beim Lesen langer Stories soll der Header
       nicht dauerhaft Inhalt verdecken. */
    .single-referenz .site-header {
        position: relative;
        top: auto;
    }

    .single-referenz .main-navigation {
        top: 76px;
    }

    .single-referenz .story-single-hero {
        padding: 38px 0 34px;
    }

    .single-referenz .story-single-hero h1 {
        font-size: clamp(1.85rem, 7.5vw, 2.1rem);
        line-height: 1.08;
        letter-spacing: -.025em;
        margin-top: .45rem;
        margin-bottom: 1rem;
    }

    .single-referenz .story-single-subtitle {
        font-size: .98rem;
        line-height: 1.55;
        margin-bottom: 1rem;
    }

    .single-referenz .story-facts {
        font-size: .78rem;
        line-height: 1.5;
    }

    .single-referenz .story-single-image,
    .single-referenz .story-single-image--thomas {
        margin-top: 0;
    }

    .single-referenz .story-single-layout--thomas {
        padding-top: 36px;
        gap: 24px;
    }

    .single-referenz .story-single-content,
    .single-referenz .story-full-testimonial {
        font-size: .98rem;
        line-height: 1.58;
    }

    .single-referenz .story-lead {
        font-size: 1rem;
        line-height: 1.58;
        margin-bottom: 1.7rem;
    }

    .single-referenz .story-single-content h2 {
        font-size: clamp(1.7rem, 7vw, 2rem);
        line-height: 1.08;
        margin-top: 2.1rem;
        margin-bottom: .75rem;
        letter-spacing: -.015em;
    }

    .single-referenz .story-full-testimonial h2 {
        font-size: clamp(1.55rem, 6.4vw, 1.85rem);
        line-height: 1.1;
        margin-top: 1.2rem;
        margin-bottom: 1rem;
    }

    .single-referenz .story-full-testimonial {
        padding: 20px 18px;
    }

    .single-referenz .story-full-testimonial p {
        line-height: 1.58;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .single-referenz .story-gallery figcaption,
    .single-referenz .story-location-image figcaption {
        font-size: .82rem;
        line-height: 1.5;
    }

    .single-referenz .story-quote--thomas blockquote {
        font-size: 1.02rem;
        line-height: 1.48;
    }

    .single-referenz .story-single-back {
        padding-bottom: 3.5rem;
    }
}

/* =========================================================
   MAD-EVENT WEBSITE-CI – MOBILE SYSTEM – VERSION 2.4.25
   Einheitliche Größen, Abstände und Lesbarkeit für alle Unterseiten.
   Grundlage: die bewährten Mobile-Werte aus Startseite und Projektstories.
   Desktop/Tablet ab 768 px bleiben bewusst unverändert.
   ========================================================= */
:root {
    --ci-mobile-gutter: 18px;
    --ci-mobile-section-y: 64px;
    --ci-mobile-section-y-compact: 56px;
    --ci-mobile-h1: clamp(2.10rem, 8.9vw, 2.70rem);
    --ci-mobile-h2: clamp(1.75rem, 7.4vw, 2.20rem);
    --ci-mobile-h3: 1.35rem;
    --ci-mobile-lead: 1.03rem;
    --ci-mobile-body: 1rem;
    --ci-mobile-small: .82rem;
    --ci-mobile-kicker: .78rem;
    --ci-mobile-line: 1.62;
    --ci-mobile-line-heading: 1.08;
    --ci-mobile-card-pad: 24px;
    --ci-mobile-radius: 10px;
    --ci-mobile-gap: 22px;
}

@media (max-width: 767px) {
    /* Mobile Header: auf allen Seiten gleich – kein Überdecken beim Scrollen. */
    .site-header {
        position: relative;
        top: auto;
    }
    .main-navigation { top: 76px; }

    /* Einheitlicher Seitenrand auf allen regulären Unterseiten. */
    .about-page .container,
    .contact-page .container,
    .ton-page .container,
    .light-page .container,
    .video-page .container,
    .references-page .container,
    .stories-page .container,
    .audience-page .container,
    body.page-template-page-leistungen .container,
    body.page-template-page-impressum .container,
    body.page-template-page-datenschutz .container {
        width: calc(100% - (var(--ci-mobile-gutter) * 2));
        max-width: none;
    }

    /* Einheitlicher vertikaler Rhythmus. */
    .about-page .section,
    .contact-page .section,
    .ton-page .section,
    .light-page .section,
    .video-page .section,
    .references-page .section,
    .stories-page .section,
    .audience-page .section,
    body.page-template-page-leistungen .section,
    body.page-template-page-impressum .section,
    body.page-template-page-datenschutz .section {
        padding-top: var(--ci-mobile-section-y);
        padding-bottom: var(--ci-mobile-section-y);
    }

    /* Kicker / Eyebrows */
    .about-kicker,
    .contact-kicker,
    .ton-kicker,
    .section-kicker,
    .hero-kicker,
    .story-card-kicker {
        font-size: var(--ci-mobile-kicker);
        line-height: 1.45;
        letter-spacing: .14em;
    }

    /* Standard-H1 für Unterseiten. Projektstory bleibt bewusst kompakter
       und wird durch den v2.4.24 Story-Block darunter separat geführt. */
    .about-page .about-hero-copy h1,
    .contact-page .contact-hero h1,
    .ton-page .ton-hero h1,
    .light-page .light-hero h1,
    .video-page .video-hero h1,
    .references-page .references-hero h1,
    .stories-page .stories-hero h1,
    .audience-page .audience-hero h1,
    body.page-template-page-leistungen .hero h1 {
        max-width: 100%;
        font-size: var(--ci-mobile-h1);
        line-height: 1.06;
        letter-spacing: -.025em;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        text-wrap: pretty;
    }

    /* Standard-H2 für Inhaltssektionen. */
    .about-page .about-story-grid h2,
    .about-page .about-section-heading h2,
    .about-page .about-closing h2,
    .contact-page .contact-card h2,
    .contact-page .contact-closing-inner h2,
    .ton-page .ton-intro h2,
    .ton-page .ton-partners h2,
    .ton-page .ton-section-heading h2,
    .ton-page .ton-story-copy h2,
    .ton-page .ton-cta h2,
    .light-page .light-intro h2,
    .light-page .light-feature-copy h2,
    .light-page .light-cta h2,
    .video-page .video-intro h2,
    .video-page .video-showcase-copy h2,
    .video-page .video-cta h2,
    .references-page .references-projectstories-copy h2,
    .stories-page .stories-trust h2,
    .audience-page .audience-detail-grid h2,
    .audience-page .audience-cross h2,
    .audience-page .operator-tech h2,
    .audience-page .private-dj-visual h2,
    .audience-page .home-cta h2,
    body.page-template-page-leistungen main > .section h2,
    body.page-template-page-impressum .section-title h2,
    body.page-template-page-datenschutz .section-title h2 {
        max-width: 100%;
        font-size: var(--ci-mobile-h2);
        line-height: var(--ci-mobile-line-heading);
        letter-spacing: -.015em;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
        text-wrap: pretty;
    }

    /* Standard-Lesetext. */
    .about-copy,
    .about-closing-inner > p:not(.about-kicker),
    .contact-intro,
    .contact-form-intro,
    .contact-detail a,
    .contact-detail p,
    .contact-closing-inner > p,
    .ton-page p,
    .light-page p,
    .video-page p,
    .references-page .references-projectstories-copy p,
    .stories-page .story-card-subtitle,
    .audience-page .audience-detail-grid > div:last-child > p,
    .audience-page .private-dj-visual p:not(.section-kicker),
    .audience-page .audience-cross .section-intro,
    .audience-page .home-cta p:not(.section-kicker),
    body.page-template-page-leistungen main > .section p,
    body.page-template-page-impressum .card,
    body.page-template-page-datenschutz .card {
        font-size: var(--ci-mobile-body);
        line-height: var(--ci-mobile-line);
    }

    /* Leads etwas größer als normaler Fließtext, aber nicht überdimensioniert. */
    .about-lead,
    .contact-page .hero-lead,
    .ton-hero p:not(.ton-kicker),
    .light-hero p:not(.section-kicker),
    .video-hero p:not(.section-kicker),
    .references-hero-inner > p:not(.section-kicker),
    .audience-page .audience-hero > div > p:not(.section-kicker) {
        font-size: var(--ci-mobile-lead);
        line-height: var(--ci-mobile-line);
    }

    /* Karten / Listen */
    .service-overview-card,
    .contact-card,
    .video-service,
    .audience-page .audience-mini-grid a,
    .audience-page .operator-grid article,
    .stories-page .story-card {
        border-radius: 0;
    }
    .service-overview-card,
    .contact-card,
    .video-service,
    .audience-page .audience-mini-grid a,
    .audience-page .operator-grid article {
        padding: var(--ci-mobile-card-pad);
    }
    .service-overview-card h3,
    .video-service h3,
    .audience-page .audience-mini-grid h3,
    .audience-page .operator-grid h3,
    .about-value h3 {
        font-size: var(--ci-mobile-h3);
        line-height: 1.22;
    }

    /* Buttons: identische Touch-Höhe. */
    .btn,
    .hero .btn,
    .contact-form-card button[type="submit"],
    .contact-form-card .wpforms-submit {
        min-height: 56px;
        padding: 15px 20px;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Medien: konsistente Ecken nur dort, wo redaktionelle Bilder frei stehen. */
    .about-hero-image img,
    .ton-story-media img,
    .light-feature-media img,
    .video-showcase-media img {
        border-radius: var(--ci-mobile-radius);
    }

    /* Seitenspezifische Abstände, harmonisiert ohne Layout zu verändern. */
    .about-hero,
    .contact-hero,
    .ton-hero,
    .light-hero,
    .video-hero,
    .references-hero,
    .stories-hero,
    .audience-hero {
        padding-top: 70px;
        padding-bottom: 56px;
    }

    .contact-grid,
    .about-story-grid,
    .ton-intro-grid,
    .ton-partner-grid,
    .video-intro-grid,
    .video-showcase-grid,
    .light-intro-grid,
    .light-feature,
    .audience-detail-grid {
        gap: var(--ci-mobile-gap);
    }

    /* Referenzen: Logo-Karten weiter groß genug für Markenwirkung. */
    .references-logo-section {
        padding-top: var(--ci-mobile-section-y-compact);
        padding-bottom: var(--ci-mobile-section-y);
    }
}

@media (max-width: 420px) {
    :root {
        --ci-mobile-gutter: 16px;
        --ci-mobile-section-y: 56px;
        --ci-mobile-h1: clamp(2rem, 8.8vw, 2.45rem);
        --ci-mobile-h2: clamp(1.65rem, 7.2vw, 2.05rem);
    }
}


/* v2.4.27 – AVEMO Referenzlogo */
.reference-logo-card--avemo {
    background: #050505;
}
.reference-logo-card--avemo img {
    width: auto;
    max-width: 88%;
    max-height: 112px;
    object-fit: contain;
}

/* Tatüta-Tiger – offizielles Logo in Referenzen und Projektstory – v2.4.35 */
.reference-logo-card--tatueta-tiger {
    background: #ffffff;
    padding: clamp(20px, 2.4vw, 34px);
}
.reference-logo-card--tatueta-tiger img {
    width: auto;
    max-width: 76%;
    max-height: 185px;
    object-fit: contain;
}
.story-project-logo--tatueta-tiger {
    width: min(220px, 48vw);
    margin: 0 0 34px;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
}
.story-project-logo--tatueta-tiger img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    .reference-logo-card--avemo img {
        max-width: 86%;
        max-height: 96px;
    }
    .reference-logo-card--tatueta-tiger img {
        max-width: 72%;
        max-height: 155px;
    }
    .story-project-logo--tatueta-tiger {
        width: min(180px, 52vw);
        margin-bottom: 26px;
    }
}

/* v2.4.36: abschließende Priorität gegenüber älteren Komponentenregeln. */
.section-kicker,
.usecase-card span,
.audience-card > span {
    color: #ff5a64;
}

/* v2.4.39: Kontraststarke Akzenttexte mit abschließender Priorität. */
.section-kicker,
.usecase-card span,
.audience-card > span,
.ton-kicker,
.video-service-number,
.story-eyebrow,
.story-kicker {
    color: var(--accent-text);
}


/* Referenzlogo: 1. Karnevalsgesellschaft 1891 e. V. Klein-Auheim – v2.4.44 */
.reference-logo-card--1kg-karnevalsgesellschaft-klein-auheim {
    background: #ffffff;
    padding: clamp(18px, 2.2vw, 30px);
}
.reference-logo-card--1kg-karnevalsgesellschaft-klein-auheim img {
    width: auto;
    max-width: 82%;
    height: 190px;
    max-height: 190px;
    object-fit: contain;
    filter: none;
}
@media (max-width: 760px) {
    .reference-logo-card--1kg-karnevalsgesellschaft-klein-auheim img {
        max-width: 76%;
        height: 170px;
        max-height: 170px;
    }
}

/* v2.4.48: Sommerfest-Planungshilfe, mit lesbaren Textbreiten auf Mobilgeräten. */
.summer-planning { background: #101010; scroll-margin-top: 110px; }
.summer-planning-heading { max-width: 850px; margin-bottom: 38px; }
.summer-planning h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.15; margin: 12px 0 24px; }
.summer-planning h2 span { color: #ef0a18; }
.summer-planning p { color: #c2c2c2; line-height: 1.8; }
.summer-planning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.summer-planning-grid article { padding: 28px; border: 1px solid #333; border-radius: 12px; background: #161616; min-width: 0; }
.summer-planning h3 { font-size: 1.25rem; line-height: 1.4; margin: 0 0 14px; }
.summer-planning-inquiry { max-width: 850px; margin-top: 38px; }
.summer-planning-inquiry p { margin-bottom: 18px; }
.summer-planning-inquiry .btn { margin-top: 8px; }
.home-usecases .summer-planning-link { display: inline-block; color: #fff; font-weight: 600; margin-top: 18px; text-underline-offset: 5px; text-decoration: underline; }
.home-usecases .summer-planning-link:hover { color: #ff5360; }
.home-usecases .summer-planning-link:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@media (max-width: 700px) {
    .summer-planning-grid { grid-template-columns: 1fr; gap: 16px; }
    .summer-planning-grid article { padding: 22px; }
    .summer-planning h2 { overflow-wrap: break-word; }
}

/* v2.4.49: Persönliche Beratung vor der Leistungsübersicht. */
.service-intro { padding-bottom: 0; }
.service-intro-content { max-width: 850px; text-align: left; }
.service-intro-content h2 { font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.25; margin: 0 0 20px; }
.service-intro-content p { color: var(--text-muted, #c2c2c2); font-size: 1.1rem; line-height: 1.8; margin: 0; }
.service-intro + .section { padding-top: 44px; }
@media (max-width: 600px) {
    .service-intro-content p { font-size: 1rem; }
    .service-intro + .section { padding-top: 32px; }
}