/* ==========================================================================
   Kundenbeispiel / Case-Study landing page (/branchen/<branche>/<firma>/)
   Data-driven block (app/Views/Pages/kunde.tpl.php).
   Reuses the redesigned start-page system from hero-extension.css:
   .eyebrow / .headline / .module-card(+__icon/__title/__sub) and the
   --c-* / --space-* / --fs-* custom properties. Only layout the shared
   classes do not cover lives here. Loaded only on customer pages, so
   page-scoped overrides (e.g. hiding the header .seals badge) are safe.
   ========================================================================== */

/* hide the Google reviews badge from the shared hero on customer pages */
.seals {
    display: none;
}

/* ---- section bands ---- */
.cs-band {
    padding-block: var(--space-6);
}
.cs-band--grey {
    background: #f2f5f5;
}
.cs-heading {
    margin-top: var(--space-5);
    margin-bottom: var(--space-4);
}

/* ---- customer aside ---- */
.cs-aside {
    margin-bottom: var(--space-4);
}
.cs-logo {
    margin-bottom: var(--space-3);
}
.cs-logo img {
    max-width: 170px;
    max-height: 72px;
    width: auto;
    height: auto;
}
.cs-portrait {
    max-width: 260px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: var(--space-3);
}
.cs-portrait img {
    width: 100%;
    height: auto;
    display: block;
}
.cs-leadquote {
    margin: 0;
    padding-left: var(--space-2);
    border-left: 4px solid var(--c-yellow);
}
.cs-leadquote__text {
    margin: 0 0 var(--space-1);
    color: var(--c-blue);
    font-style: italic;
}
.cs-leadquote__name {
    display: block;
    font-family: "Daytona Pro Condensed Bold", sans-serif;
    color: var(--c-blue);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cs-leadquote__company {
    display: block;
    color: var(--c-text);
    font-size: var(--fs-small);
    opacity: .8;
}

/* ---- key figures (bordered card, each stat centered under its icon) ---- */
.cs-stats-card {
    align-items: stretch;
    text-align: center;
}
.cs-stats {
    width: 100%;
    margin: 0;
}
.cs-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2) var(--space-1);
}
.cs-stat .module-card__icon {
    margin-bottom: var(--space-1);
}
.cs-stat__label {
    color: var(--c-text);
    font-size: var(--fs-small);
    line-height: var(--lh-tight);
}

/* ---- module cards linked to their feature pages ---- */
.cs-module-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.cs-module-link:hover {
    text-decoration: none;
    color: inherit;
}
.cs-more {
    align-self: center;
    margin-top: var(--space-2);
}

/* ---- pull quote ---- */
.cs-pullquote {
    margin: 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    border-left: 4px solid var(--c-yellow);
    color: var(--c-text);
    font-size: 1.375rem;
    line-height: var(--lh-body);
}

/* ---- conversation / result answers ---- */
.cs-qa__question {
    margin-top: 0;
}
.cs-qa__answer {
    margin: var(--space-1) 0 0;
    color: var(--c-text);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    opacity: .85;
}

/* ---- before / after / result: coloured top borders ---- */
.module-card.cs-top--red {
    border-top-color: #e0563f;
}
.module-card.cs-top--green {
    border-top-color: #6ac259;
}
.module-card.cs-top--yellow {
    border-top-color: var(--c-yellow);
}
.cs-points {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--c-border);
    width: 100%;
    text-align: left;
}
.cs-point {
    display: flex;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
}
.cs-point:last-child {
    padding-bottom: 0;
}
.cs-point__ico {
    flex: 0 0 auto;
    margin-top: .2rem;
    font-size: .85rem;
}
.cs-point__ico--neg {
    color: #e0563f;
}
.cs-point__ico--pos {
    color: #6ac259;
}
.cs-point__title {
    display: block;
    font-family: "Daytona Pro Condensed Bold", sans-serif;
    color: var(--c-blue);
    letter-spacing: 0.01em;
    line-height: var(--lh-tight);
}
.cs-point__desc {
    display: block;
    color: var(--c-text);
    font-size: var(--fs-small);
    line-height: var(--lh-tight);
    opacity: .8;
}

/* ---- result card ---- */
.cs-result p {
    color: var(--c-text);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    margin: 0 0 var(--space-2);
}
.cs-result__tagline {
    color: var(--c-blue) !important;
    font-family: "Daytona Pro Condensed Bold", sans-serif;
}
.cs-result__note {
    opacity: .75;
    margin-bottom: 0 !important;
}

/* ---- google snippet (clickable link to the customer site) ---- */
.cs-snippet {
    display: block;
    opacity: .9;
    text-decoration: none;
}
.cs-snippet:hover {
    opacity: 1;
    text-decoration: none;
}
.cs-snippet__brand {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}
.cs-snippet__favicon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-bg-soft);
    color: var(--c-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.cs-snippet__name {
    display: block;
    color: var(--c-text);
    font-size: 13px;
    line-height: 1.2;
}
.cs-snippet__url {
    display: block;
    color: var(--c-text);
    opacity: .7;
    font-size: 12px;
    line-height: 1.2;
}
.cs-snippet__title {
    display: block;
    color: #7b4bc9;
    font-size: 19px;
    margin: 4px 0;
}
.cs-snippet:hover .cs-snippet__title {
    text-decoration: underline;
}
.cs-snippet__desc {
    display: block;
    margin: 0;
    color: #9aa1b1;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    max-width: 640px;
}