/* ==========================================================================
   webdesigncottbus.de – Layer über base.css
   Richtung: hell & redaktionell. Kühles Off-White als Grund, Tinte statt
   Schwarz, Terrakotta als einziger Akzent. Kein Tech-Blau.
   Fonts selbst gehostet · keine externen CDNs · DSGVO-konform
   ========================================================================== */

:root {
    /* Palette umgestellt – alle Bausteine aus base.css erben automatisch */
    --color-primary: #14171E;
    --color-primary-soft: #1E232C;
    --color-accent: #B84A16;
    --color-accent-hover: #983C11;
    --color-accent-light: #E8834A;
    --color-success: #00875A;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F4F5F7;
    --color-text: #14171E;
    --color-text-muted: #4A5462;
    --color-text-inverse-muted: rgba(255, 255, 255, .68);
    --color-border: #DFE3E9;
    --color-card: #FFFFFF;
    --color-accent-soft: rgba(184, 74, 22, .09);

    --gradient-accent: linear-gradient(135deg, #B84A16 0%, #E8834A 100%);
    --shadow-accent: 0 18px 42px -18px rgba(184, 74, 22, .45);

    --max-width: 1320px;
    --text-3xl: clamp(2.7rem, 1.2rem + 5vw, 6rem);
    --text-2xl: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
}

body { background: var(--color-bg-alt); }

/* Header: hell, Haarlinie, beim Scrollen Milchglas
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    background: #fff;
    box-shadow: none;
    border-bottom: 1px solid var(--color-border);
    /* Bewusst ohne Zustandswechsel beim Scrollen: kein Milchglas, keine
       Hoehenaenderung, keine Uebergaenge. Was sich nicht aendert, kann
       auch nicht verrutschen. */
    transition: none;
}
.site-header .container { min-height: 78px; }
.site-header.is-scrolled,
.site-header.is-hidden {
    background: #fff;
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-bottom-color: var(--color-border);
}
.site-header.is-scrolled .container { min-height: 78px; }

.brand__name { font-size: 1.3rem; letter-spacing: -.02em; color: var(--color-primary); }
.brand__claim { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted); }
.brand__dot { color: var(--color-accent); }
.brand:hover .brand__name { color: var(--color-accent); }

.main-nav a { color: var(--color-primary); font-weight: 500; }
.main-nav a:hover, .main-nav a.active { color: var(--color-accent); }
.main-nav > ul > li > a::after { background: var(--color-accent); }
.nav-toggle span { background: var(--color-primary); }
.nav-cta { background: var(--color-primary); color: #fff !important; border-radius: 4px; }
.nav-cta:hover { background: var(--color-accent); }

@media (max-width: 1023px) {
    .main-nav { background: var(--color-bg); }
    .main-nav a { color: var(--color-primary); }
}

/* Hero: redaktionell, kein Bild, Typografie trägt
   ========================================================================== */
.hero {
    min-height: 0;
    background: var(--color-bg-alt);
    background-image: none;
    color: var(--color-text);
    padding-top: clamp(4rem, 8vw, 6.5rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
    overflow: visible;
}
.hero::before, .hero::after { display: none; }

.hero h1 {
    font-size: var(--text-3xl);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--color-primary);
    max-width: 16ch;
    margin-bottom: 0;
    hyphens: none;
}
.hero h1 em { color: var(--color-accent); font-style: italic; }

.hero__brandstrip {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.hero__brandstrip::before { content: ''; width: 40px; height: 1px; background: var(--color-accent); }

/* Fußzeile des Heros: Lead links, Aktionen rechts */
.hero__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
    margin-top: clamp(2rem, 5vw, 3.25rem);
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--color-border);
}
.hero p.lead {
    color: var(--color-text-muted);
    font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
    max-width: 46ch;
    margin-bottom: 0;
}
.hero__actions { margin-top: 0; flex-wrap: nowrap; }
@media (max-width: 780px) {
    .hero__foot { grid-template-columns: 1fr; align-items: start; }
    .hero__actions { flex-wrap: wrap; }
    .hero__actions .btn { width: 100%; }
}

/* Kompakter Hero für Unterseiten */
.hero--compact { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero--compact h1 { max-width: 20ch; margin-bottom: 1.25rem; font-size: var(--text-2xl); }
.hero--compact p.lead { max-width: 60ch; }
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: none;
    border: 0;
    padding: 0;
    margin-bottom: 1.25rem;
}
.hero__badge::before { content: ''; width: 30px; height: 1px; background: var(--color-accent); }
.hero__trust { color: var(--color-text-muted); }

/* Werk-Galerie: läuft seitlich aus dem Raster heraus
   ========================================================================== */
.reel-wrap { position: relative; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.reel {
    display: flex;
    gap: clamp(.9rem, 1.6vw, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: .25rem var(--content-padding) 1.25rem;
    margin: 0 calc(var(--content-padding) * -1);
    cursor: grab;
}
.reel::-webkit-scrollbar { display: none; }
.reel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.reel.is-dragging a { pointer-events: none; }

.reel__item {
    flex: 0 0 clamp(258px, 31vw, 430px);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}
.reel__shot {
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-primary);
    border: 1px solid var(--color-border);
    aspect-ratio: 16 / 10;
    margin-bottom: .9rem;
}
.reel__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out-expo); }
.reel__item:hover .reel__shot img { transform: scale(1.045); }
.reel__item h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.reel__item p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.reel__item .reel__result {
    display: inline-block;
    margin-top: .55rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-accent);
}
.reel-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: .25rem;
}
.reel-hint svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .reel-hint { display: none; } }

/* Abschnitte
   ========================================================================== */
.section--alt { background: #fff; }
.section--dark {
    background-color: var(--color-primary);
    background-image: none;
}
.section--dark .eyebrow { color: var(--color-accent-light); }
.section--dark .timeline__meta { color: var(--color-accent-light); }
.section-head--left { text-align: left; margin-left: 0; margin-right: 0; max-width: 780px; }
.section-head h2 { letter-spacing: -.03em; }

/* Buttons: eckig statt Pille, passt zum redaktionellen Ton
   ========================================================================== */
.btn { border-radius: 4px; padding: 1rem 1.9rem; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-accent); box-shadow: none; }
.btn--outline { border-color: var(--color-border); color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn--outline-light { color: var(--color-primary); border-color: var(--color-border); }
.btn--outline-light:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.section--dark .btn--outline-light { color: #fff; border-color: rgba(255, 255, 255, .4); }
.section--dark .btn--outline-light:hover { background: #fff; color: var(--color-primary); }

/* Karten: eckiger, ruhiger
   ========================================================================== */
.card, .step, .testimonial, .contact-tile, .browser-frame, .media, .shot, .table-wrap { border-radius: 10px; }
.card::before { height: 2px; }
.card__icon { border-radius: 8px; background: var(--color-accent-soft); color: var(--color-accent); }

/* Kennzahlen im Hero-Fuß */
.hero__stats { border-top-color: var(--color-border); }
.hero__stats .stat__label { color: var(--color-text-muted); }

/* Kartenleiste unter dem Hero */
.hero-strip { margin-top: 0; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.hero__cards { border-radius: 10px; box-shadow: none; border: 1px solid var(--color-border); background: var(--color-border); }
.hero__card svg { color: var(--color-accent); }

/* Projekt-Kacheln
   ========================================================================== */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 767px) { .projects { grid-template-columns: 1fr; } }
.project {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: var(--color-primary);
    box-shadow: none;
    border: 1px solid var(--color-border);
    color: inherit;
    transition: transform .5s var(--ease-out-expo), box-shadow .5s ease;
}
.project:hover { transform: translateY(-6px); box-shadow: 0 26px 56px -28px rgba(20, 23, 30, .45); color: inherit; }
.project__img { aspect-ratio: 16 / 10; overflow: hidden; }
.project__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out-expo); }
.project:hover .project__img img { transform: scale(1.05); }
.project__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2.5rem 1.6rem 1.4rem;
    background: linear-gradient(0deg, rgba(20, 23, 30, .95) 14%, rgba(20, 23, 30, .7) 58%, transparent 100%);
    color: #fff;
}
.project__body h3 { color: #fff; font-size: var(--text-lg); margin-bottom: .25rem; }
.project__meta { font-size: var(--text-sm); color: rgba(255, 255, 255, .74); }
.project__result {
    display: inline-block;
    margin-top: .7rem;
    padding: .28rem .8rem;
    border-radius: 3px;
    background: rgba(232, 131, 74, .18);
    border: 1px solid rgba(232, 131, 74, .42);
    color: #F4A87A;
    font-size: .76rem;
    font-weight: 600;
}
.project--wide { grid-column: span 2; }
@media (max-width: 767px) { .project--wide { grid-column: span 1; } }

/* Leistungs-Liste
   ========================================================================== */
.service-list { border-top: 1px solid var(--color-border); }
.service-item {
    display: grid;
    grid-template-columns: 4.5rem 1fr 1.15fr;
    gap: 1.5rem;
    align-items: start;
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-base);
}
.service-item:hover { background: rgba(184, 74, 22, .035); }
.service-item__no {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-accent);
    opacity: .55;
}
.service-item h3 { font-size: var(--text-xl); }
.service-item p { color: var(--color-text-muted); }
.section--dark .service-list, .section--dark .service-item { border-color: rgba(255, 255, 255, .12); }
.section--dark .service-item:hover { background: rgba(255, 255, 255, .04); }
.section--dark .service-item h3 { color: #fff; }
.section--dark .service-item p { color: var(--color-text-inverse-muted); }
@media (max-width: 860px) {
    .service-item { grid-template-columns: 3rem 1fr; }
    .service-item p { grid-column: 2; }
}

/* Ansprechpartner-Sektion mit Portrait
   ========================================================================== */
.person {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.person__photo { border-radius: 10px; overflow: hidden; background: var(--color-bg-alt); }
.person__photo img { width: 100%; display: block; }
.person__quote {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.15rem);
    line-height: 1.28;
    letter-spacing: -.02em;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}
.person__quote em { color: var(--color-accent); }
.person__name { font-weight: 600; color: var(--color-primary); }
.person__role { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: .2rem; }
@media (max-width: 820px) {
    .person { grid-template-columns: 1fr; }
    .person__photo { max-width: 320px; }
}

/* Preis-Karten
   ========================================================================== */
.price { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 700; color: var(--color-primary); line-height: 1; }
.price small { display: block; font-family: var(--font-body); font-size: .82rem; font-weight: 500; color: var(--color-text-muted); margin-top: .45rem; }
.card--dark .price { color: #fff; }
.card--dark .price small { color: var(--color-text-inverse-muted); }
.card__ribbon { background: var(--color-accent); }

/* Kontaktformular
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.field input, .field textarea, .field select {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: .85rem 1rem;
    width: 100%;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(184, 74, 22, .16);
}
.field textarea { min-height: 150px; resize: vertical; }
.field small { font-size: .78rem; color: var(--color-text-muted); }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-muted); }
.consent input { width: 1.1rem; height: 1.1rem; margin-top: .25rem; flex: none; }

/* Kontakt-Kacheln
   ========================================================================== */
.contact-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 767px) { .contact-tiles { grid-template-columns: 1fr; } }
.contact-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    transition: transform var(--transition-base) var(--ease-out-expo), border-color var(--transition-base);
}
.contact-tile:hover { transform: translateY(-3px); border-color: var(--color-accent); color: var(--color-text); }
.contact-tile svg { width: 22px; height: 22px; color: var(--color-accent); flex: none; }
.contact-tile strong { display: block; color: var(--color-primary); }
.contact-tile span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* CTA-Banner: Tinte statt Verlauf
   ========================================================================== */
.cta-banner { background: var(--color-primary); background-size: auto; animation: none; border-radius: 10px; }
.cta-banner::before { display: none; }

/* Rechtstexte
   ========================================================================== */
.legal { max-width: 860px; }
.legal h2 { font-size: var(--text-xl); margin: 2.5rem 0 .9rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: var(--text-lg); margin: 1.75rem 0 .6rem; }
.legal p, .legal li { color: var(--color-text-muted); margin-bottom: .9rem; }
.legal ul { padding-left: 1.1rem; list-style: disc; list-style-position: outside; }

/* Footer
   ========================================================================== */
.site-footer { background: var(--color-primary); }
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
@media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__claim { color: var(--color-text-inverse-muted); }
.parent-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .84);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.parent-link:hover { border-color: var(--color-accent-light); color: #fff; }

/* Laufband und Spotlight
   ========================================================================== */
.marquee__item { color: var(--color-text-muted); font-weight: 500; }
.marquee__item:hover { color: var(--color-primary); }
.has-spot::after {
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
                rgba(184, 74, 22, .07), transparent 62%);
}

/* Buttons auf dunklem Grund (CTA-Banner, dunkle Sektionen)
   Ohne diese Regeln verschwindet der Tinte-Button auf dem Tinte-Banner.
   ========================================================================== */
.cta-banner .btn--primary,
.section--dark .btn--primary {
    background: #fff;
    color: var(--color-primary);
}
.cta-banner .btn--primary:hover,
.section--dark .btn--primary:hover {
    background: var(--color-accent);
    color: #fff;
}
.cta-banner .btn--outline-light,
.section--dark .btn--outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}
.cta-banner .btn--outline-light:hover,
.section--dark .btn--outline-light:hover {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
}
.cta-banner .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .45); }
.cta-banner .btn--outline:hover { background: #fff; color: var(--color-primary); border-color: #fff; }

/* Telefonnummer im Header
   ========================================================================== */
.header-phone {
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-primary) !important;
}
.header-phone svg { width: 16px; height: 16px; color: var(--color-accent); flex: none; }
.header-phone:hover { color: var(--color-accent) !important; }
.header-phone::after { display: none !important; }
@media (max-width: 1180px) and (min-width: 1024px) {
    .header-phone { font-size: .88rem; }
    .main-nav a { padding: .6rem .5rem; }
}

/* Brotkrumen
   ========================================================================== */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}
.crumbs a { color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-accent); }
.crumbs span[aria-hidden] { opacity: .5; }
.crumbs [aria-current] { color: var(--color-primary); font-weight: 500; }

/* Überschrift über der Werk-Galerie */
.reel__heading {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}
/* Footer-Überschriften: wie bisher h4 aussehend, semantisch aber h2 */
.site-footer .footer-head {
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-base);
    letter-spacing: 0;
    margin-bottom: 1.25rem;
}

/* Telefonnummer im Header: eigener Umriss-Button, bricht nie um
   ========================================================================== */
.main-nav > ul > li:has(.header-phone) { flex: none; }
.header-phone {
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    padding: .58rem 1.05rem !important;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    color: var(--color-primary) !important;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.header-phone svg { width: 17px; height: 17px; color: var(--color-accent); flex: none; }
.header-phone:hover { border-color: var(--color-accent); color: var(--color-accent) !important; background: var(--color-accent-soft); }
.header-phone:hover svg { color: var(--color-accent); }
.header-phone::after { display: none !important; }
.nav-cta { margin-left: .6rem; padding: .62rem 1.35rem !important; }

@media (max-width: 1240px) and (min-width: 1024px) {
    .main-nav > ul { gap: 0; }
    .main-nav a { padding: .6rem .45rem; font-size: .9rem; }
    .header-phone { font-size: .88rem; padding: .5rem .8rem !important; }
    .nav-cta { padding: .55rem 1rem !important; font-size: .88rem; }
}
@media (max-width: 1023px) {
    .header-phone { width: 100%; justify-content: center; margin-top: .75rem; font-size: 1.05rem; padding: .85rem 1rem !important; }
}

/* Heller Geist-Button für dunkle Flächen: immer lesbar
   ========================================================================== */
.btn--ghost-light {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .38);
}
.btn--ghost-light:hover {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
}
.btn--ghost-light:hover svg { color: var(--color-primary); }
.btn--ghost-light svg { color: #fff; }

/* Vollbreites Stadtband: verankert die Seite sichtbar in Cottbus,
   ohne den redaktionellen Hero mit einem Bild zu überlagern.
   Einsatz: siehe README, Abschnitt "Stadtbild einbauen".
   ========================================================================== */
.cityband {
    position: relative;
    min-height: clamp(300px, 42vw, 480px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-primary);
}
.cityband img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cityband::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(20, 23, 30, .88) 0%, rgba(20, 23, 30, .3) 55%, rgba(20, 23, 30, .12) 100%);
}
.cityband .container { position: relative; z-index: 2; padding-bottom: clamp(2rem, 4vw, 3rem); }
.cityband h2 { color: #fff; font-size: var(--text-2xl); max-width: 18ch; margin-bottom: .75rem; }
.cityband p { color: rgba(255, 255, 255, .8); max-width: 52ch; margin: 0; }
.cityband__credit {
    position: absolute;
    right: .75rem; bottom: .6rem;
    z-index: 3;
    font-size: .68rem;
    color: rgba(255, 255, 255, .55);
}
.cityband__credit a { color: inherit; text-decoration: underline; }

/* Abstand zwischen kompaktem Hero und folgendem Abschnitt schließen.
   Vorher addierten sich Hero-Unterkante und Abschnitts-Oberkante zu einem Loch.
   ========================================================================== */
.hero--compact + .section,
.hero--compact + .reel-wrap,
.hero + .reel-wrap { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Unterseiten-Hero bekommt eine Grundlinie, damit er nicht im Raum schwebt */
.hero--compact .container { position: relative; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero--compact .container::after {
    content: '';
    position: absolute;
    left: var(--content-padding);
    right: var(--content-padding);
    bottom: 0;
    height: 1px;
    background: var(--color-border);
}

/* Logo-Laufband: als bewusst gesetzte Wortmarken-Reihe statt loser Textkette
   ========================================================================== */
.marquee__item {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    font-family: var(--font-heading);
    font-size: clamp(.95rem, 1.2vw, 1.12rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-text-muted);
    opacity: 1;
    transition: border-color var(--transition-base), color var(--transition-base);
}
.marquee__item:hover { border-color: var(--color-accent); color: var(--color-primary); }

/* Laufband: engerer Abstand, seit die Namen als Wortmarken-Pillen laufen */
.marquee__track { gap: clamp(.7rem, 1.2vw, 1.1rem); }
.marquee { padding: .35rem 0; }