/* ============================================================
   Case Studies (referenz-*.html)
   Haltung: Dossier, nicht Werbeseite. Die Seite fuehrt einen
   Nachweis - lange Lesestrecke, belegte Zahlen mit Quelle,
   und die Grenzen des Belegs mit demselben Gewicht wie das
   Ergebnis. Deshalb keine Kennzahl-Kacheln, keine Chips ueber
   jeder Section, keine Nummernmarker.
   ============================================================ */

/* ---- Ruecklink in die Referenzuebersicht ---- */
.back-link {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--fs-0);
    color: var(--ink-3);
    text-decoration: none;
    margin-bottom: 1.6rem;
}
.back-link:hover { color: var(--accent); }

/* ---- Lesestrecke ---- */
.case-prose { max-width: 68ch; }
.case-prose > p {
    font-size: var(--fs-2);
    line-height: 1.78;
    color: var(--ink-2);
    text-wrap: pretty;
    margin-bottom: 1.35rem;
}
.case-prose > p:last-child { margin-bottom: 0; }
.case-prose > p strong { font-weight: 500; color: var(--ink); }
.case-prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.case-prose h3 {
    font-size: var(--fs-3);
    margin: 2.6rem 0 1rem;
}

/* ---- Grosses Projektbild ---- */
.case-figure { margin: 0; }
.case-figure img {
    width: 100%; height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-lg);
    background: var(--card);
}
.case-figure figcaption {
    margin-top: 1.1rem;
    max-width: 62ch;
    font-size: var(--fs-1);
    line-height: 1.68;
    color: var(--ink-3);
}
.case-figure figcaption strong { color: var(--ink-2); font-weight: 500; }

/* Beleg-Bild neben erklaerendem Text */
.evidence {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(1.8rem, 4vw, 3.5rem);
    align-items: start;
}
@media (max-width: 879px) { .evidence { grid-template-columns: 1fr; } }

/* ---- Belegte Zahl: Aussage mit Quelle, keine Kennzahl-Kachel ---- */
.claim {
    margin: clamp(2rem, 5vh, 3rem) 0;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    max-width: 68ch;
}
.claim p {
    font-size: var(--fs-2);
    line-height: 1.7;
    color: var(--ink);
    margin: 0 0 1.2rem;
}
.claim dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem 1.4rem;
    margin: 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}
.claim dt {
    font-size: var(--fs-0);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 500;
    color: var(--ink-4);
    white-space: nowrap;
    padding-top: .12rem;
}
.claim dd {
    margin: 0;
    font-size: var(--fs-1);
    line-height: 1.6;
    color: var(--ink-2);
}
@media (max-width: 560px) {
    .claim dl { grid-template-columns: 1fr; gap: .2rem; }
    .claim dd { margin-bottom: .8rem; }
}

/* ---- Woertliches Zitat ---- */
.longquote {
    margin: 0;
    max-width: 68ch;
    padding-left: clamp(1rem, 3vw, 2rem);
    border-left: 1px solid var(--line);
}
.longquote blockquote { margin: 0; }
.longquote p {
    font-size: var(--fs-2);
    line-height: 1.8;
    color: var(--ink-2);
    margin-bottom: 1.2rem;
}
.longquote blockquote p:last-child { margin-bottom: 0; }
.longquote figcaption {
    margin-top: 1.6rem;
    font-size: var(--fs-0);
    line-height: 1.6;
    color: var(--ink-4);
}

/* ---- Grenzen: das dunkle Band traegt die Ehrlichkeit ---- */
.dark-band .case-prose > p { color: rgba(255, 255, 255, .78); }
.dark-band .case-prose > p strong { color: #fff; font-weight: 500; }
.dark-band .deflist > div { border-top-color: rgba(255, 255, 255, .16); }
.dark-band .deflist dt { color: #fff; }
.dark-band .deflist dd { color: rgba(255, 255, 255, .74); }

/* ---- Abschluss-Aktionen ---- */
.case-actions {
    display: flex; flex-wrap: wrap; gap: .85rem;
    margin-top: clamp(1.8rem, 4vh, 2.6rem);
}

/* ---- Messwerte als Tabelle, nicht als Kennzahl-Kacheln ----
   Drei Messungen mit derselben Vergleichsbasis gehoeren in eine
   Tabelle: gleiche Zeile, gleiche Quelle, vergleichbar. */
.data-table-wrap { overflow-x: auto; margin: clamp(1.6rem, 4vh, 2.4rem) 0; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-1);
    min-width: 34rem;
}
.data-table caption {
    text-align: left;
    font-size: var(--fs-0);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 500;
    color: var(--ink-4);
    padding-bottom: .9rem;
}
.data-table th, .data-table td {
    text-align: left;
    padding: .95rem 1.2rem .95rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: baseline;
}
.data-table thead th {
    font-size: var(--fs-0);
    font-weight: 500;
    color: var(--ink-4);
    border-bottom-color: var(--ink-4);
}
.data-table tbody th { font-weight: 400; color: var(--ink-2); }
.data-table .num {
    font-size: var(--fs-3);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
}
.data-table .delta { color: var(--success); white-space: nowrap; }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Lange Case-Study-Titel auf schmalen Viewports ----
   Diese Datei laedt nur auf den Case Studies. Deren Titel sind
   deutlich laenger als die der uebrigen Seiten ("Buchungsanfragen"
   allein sind 16 Zeichen), deshalb hier eine eigene Groessenstufe
   statt eines Umbruchs mitten im Wort. */
@media (max-width: 620px) {
    .hero h1 { font-size: clamp(1.95rem, 1.1rem + 4.4vw, 2.75rem); }
}
/* Eyebrow im Hero darf umbrechen statt ueberzulaufen. Block statt
   Flexbox, damit der Punkt auf der ersten Zeile mitlaeuft und nicht
   allein darueber steht. */
.hero h1 .eyebrow {
    display: block;
    max-width: 100%;
    line-height: 1.45;
}

/* ---- Zwei ergaenzende Belege nebeneinander ---- */
.figure-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: clamp(1.8rem, 4vh, 2.6rem);
}
.figure-duo .case-figure figcaption { font-size: var(--fs-0); line-height: 1.6; }
@media (max-width: 879px) { .figure-duo { grid-template-columns: 1fr; } }