/* Kundenbeispiel (case study) page specifics — extracted from webroot/redesign/kundenbeispiel-erste-hilfe-360.html. */

/* Page-level token overrides (prototype re-declared these for this page only) */
:root {
    --g-t-hero: clamp(2.4rem, 4.4vw, 3.7rem);
}

/* ---------- Hero: case study head ---------- */
.ghero .eyebrow { color: var(--g-yellow); margin-bottom: 0; }
.ghero h1 { font-family: var(--g-display); font-weight: 400; text-transform: uppercase; font-size: var(--g-t-hero); line-height: 1.08; letter-spacing: .01em; margin-top: 1.2rem; max-width: 18ch; color: #fff; }
.ghero h1 b { font-family: var(--g-display-bold); font-weight: 400; color: var(--g-yellow); }
@media (min-width: 901px) { .ghero h1 b { white-space: nowrap; } }
.ghero-sub { font-size: 1.25rem; color: #e6edf8; margin-top: 1.4rem; max-width: 56ch; }

.sec-head h2 b { color: var(--yellow-dark); }

/* ---------- Facts: icon tiles in white card ---------- */
.facts-card { background: var(--white); border: 1px solid var(--border); border-radius: 28px; padding: 34px; box-shadow: var(--sh-sm); }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fact { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 12px 8px; }
.fact .ic { width: 56px; height: 56px; border-radius: 16px; background: var(--yellow-soft); color: var(--yellow-dark); display: flex; align-items: center; justify-content: center; font-size: 1.45rem; }
.fact span { font-family: var(--f-body-bold); font-size: .98rem; color: var(--ink); line-height: 1.35; }
@media (max-width: 900px) { .facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facts-grid { grid-template-columns: 1fr; } }

/* ---------- Pull quote as dark ink band ---------- */
.pull-band { background: radial-gradient(circle at 86% 10%, rgba(245, 184, 0, .22), transparent 34%), linear-gradient(160deg, #5E7EB1, #48679C); border-radius: 38px; padding: 58px 64px; color: #fff; text-align: center; }
.pull-band blockquote { font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.45; max-width: 42ch; margin: 0 auto; }
.pull-band blockquote::before { content: "\f10d"; font-family: "Font Awesome 5 Pro"; font-weight: 900; display: block; color: var(--yellow); font-size: 1.4rem; margin-bottom: 18px; }
.pull-band cite { display: block; font-style: normal; font-size: .92rem; color: #b9c7e0; margin-top: 18px; }
@media (max-width: 860px) { .pull-band { padding: 44px 30px; } }

/* ---------- Modules: mod tiles (3 columns) ---------- */
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mod { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 28px; padding: 28px 26px; background: linear-gradient(145deg, #fff, #EAF1FB); text-decoration: none; box-shadow: var(--sh-sm); transition: transform .25s var(--ease), box-shadow .25s; min-height: 230px; }
.mod:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.mod .ic { width: 56px; height: 56px; border-radius: 16px; background: var(--white); color: var(--yellow-dark); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 18px; }
.mod h3 { font-size: 1.3rem; margin-bottom: 6px; }
.mod .sub { color: var(--yellow-dark); font-family: var(--f-body-bold); font-size: .88rem; margin-bottom: 10px; }
.mod .pill { margin-top: auto; align-self: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; font-family: var(--f-body-bold); font-size: .85rem; color: var(--ink); }
.mod .pill i { color: var(--yellow-dark); margin-left: 6px; transition: transform .2s var(--ease); }
.mod:hover .pill i { transform: translateX(4px); }
@media (max-width: 980px) { .mod-grid { grid-template-columns: 1fr; } .mod { min-height: 0; } }

/* ---------- Interview: benefit cards with badge ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.benefit { background: var(--white); border: 1px solid var(--border); border-radius: 24px; padding: 30px 26px; box-shadow: var(--sh-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.benefit:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.benefit .badge { width: 56px; height: 56px; border-radius: 16px; background: var(--yellow-soft); color: var(--yellow-dark); display: flex; align-items: center; justify-content: center; font-size: 1.45rem; margin-bottom: 18px; font-family: var(--f-body-bold); }
.benefit h3 { font-size: 1.08rem; margin-bottom: 8px; letter-spacing: 0; }
.benefit p { color: var(--text-mid); font-size: .95rem; line-height: 1.55; }
@media (max-width: 980px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ---------- Before / after / result ---------- */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; }
.ba-card { background: var(--white); border: 1px solid var(--border); border-radius: 28px; padding: 30px 28px; box-shadow: var(--sh-sm); }
.ba-card h3 { font-size: 1.2rem; margin-bottom: 18px; }
.ba-card ul { list-style: none; margin: 0; padding: 0; }
.ba-card li { position: relative; padding: 8px 0 8px 30px; }
.ba-card li b { display: block; font-family: var(--f-body-bold); font-weight: 400; font-size: .98rem; color: var(--ink); }
.ba-card li span { color: var(--text-mid); font-size: .92rem; line-height: 1.45; }
.ba-card li::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; position: absolute; left: 0; top: 10px; font-size: .85rem; }
.ba-card--before li::before { content: "\f068"; color: var(--danger); }
.ba-card--after li::before { content: "\f00c"; color: var(--success); }
.ba-card--result { background: linear-gradient(145deg, #fff, #D9E6F8); display: flex; flex-direction: column; }
.ba-card--result .ic { width: 56px; height: 56px; border-radius: 16px; background: var(--yellow-soft); color: var(--yellow-dark); display: flex; align-items: center; justify-content: center; font-size: 1.45rem; margin-bottom: 18px; }
.ba-card--result p { color: var(--text-mid); font-size: .96rem; line-height: 1.55; }
.ba-tagline { margin-top: 18px; font-family: var(--f-body-bold); font-size: 1.05rem; color: var(--blue-dark); }
.ba-tagline em { font-style: normal; background: linear-gradient(transparent 62%, rgba(245, 184, 0, .45) 62%); }
.ba-note { margin-top: auto; padding-top: 20px; }
.ba-note span { display: inline-block; background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; font-size: .88rem; color: var(--text-mid); }
.ba-note i { color: var(--yellow); margin-right: 8px; }
@media (max-width: 980px) { .ba-grid { grid-template-columns: 1fr; } }

/* ---------- Google snippet ---------- */
.gsnippet { display: block; max-width: 640px; margin: 44px auto 0; background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 22px 26px; box-shadow: var(--sh-sm); text-decoration: none; font-family: Arial, sans-serif; transition: transform .25s var(--ease), box-shadow .25s; }
.gsnippet:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.gsnippet .url { font-size: .82rem; color: #202124; display: flex; align-items: center; gap: 8px; }
.gsnippet .url i { color: var(--yellow-dark); }
.gsnippet .title { color: #1a0dab; font-size: 1.15rem; margin: 6px 0 4px; line-height: 1.3; }
.gsnippet:hover .title { text-decoration: underline; }
.gsnippet .desc { color: #4d5156; font-size: .88rem; line-height: 1.5; }

/* ---------- CTA: yellow-glow variant (background differs from base) ---------- */
.cta-box { background: radial-gradient(circle at 86% 10%, rgba(245, 184, 0, .22), transparent 34%), linear-gradient(160deg, #5E7EB1, #48679C); }

/* ---------- Template-specific helpers (view: Views/Pages/kunde.tpl.php) ---------- */
.gsnippet .title, .gsnippet .desc { display: block; }
.quote-band .quote-portrait {
    width: 50px; height: 50px; border-radius: 50%;
    object-fit: cover; margin-right: 10px; vertical-align: middle;
}
/* bootstrap .badge neutralisation inside interview cards */
.benefit .badge { padding: 0; line-height: 1; border-radius: 16px; white-space: normal; text-align: center; }

/* customer assets (uploads/kutego/kunden/<slug>/): logo in the facts card,
   result screenshot in the result card */
.ba-result-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 4px 0 14px;
    box-shadow: var(--sh-sm);
}

/* interview section: customer portrait left of "Ein Gespräch mit …" */
.sec-head--talk { display: flex; align-items: center; gap: 36px; justify-content: flex-start; }
.talk-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--white);
    box-shadow: var(--sh-sm);
    flex: 0 0 auto;
}


/* facts card head: customer logo + company name above the key figures */
.facts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.facts-head .facts-logo {
    max-height: 52px;
    max-width: 180px;
    width: auto;
}
.facts-head h3 { font-size: 1.25rem; margin: 0; }

/* mobile: company name + logo wrap instead of overflowing the card */
@media (max-width: 700px) {
    /* stack + center company name and logo */
    .facts-head { flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; }
    .facts-head .facts-logo { max-width: 100%; }
    .facts-head h3 { min-width: 0; overflow-wrap: anywhere; }
}

/* dedicated snippet section between before/after and the CTA box */
.gsnippet-sec { padding: 0 0 24px; }
.gsnippet-sec .gsnippet { margin-top: 0; }