/* ===========================================================================
   Referenz-Detailseite
   ===========================================================================
   Nutzt durchgehend die Variablen aus style.css – Farben, Typo-Skala,
   Überschriftengrößen. Keine neuen Größenwerte, damit das System hält.
   =========================================================================== */

.page-referenz {
  background: var(--paper);
}

/* Der Header liegt auf der Startseite absolut über dem Hero.
   Auf Unterseiten braucht er einen eigenen Platz im Fluss. */
.page-referenz .site-header {
  position: relative;
  left: auto;
  transform: none;
  margin: 0 auto;
  padding-top: 28px;
}

.page-referenz .site-header,
.page-referenz .breadcrumb .container,
.page-referenz .case-viewer .container {
  width: min(var(--container), calc(100% - 64px));
}

/* --------------------------------------------------------------- Brotkrumen */

.breadcrumb {
  padding: 26px 0 0;
}

.breadcrumb ol {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--line);
}

.breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
}

/* ------------------------------------------------------------ Medien-Viewer */

.case-viewer {
  padding: 30px 0 0;
}

.viewer {
  position: relative;
}

.viewer:focus-visible {
  outline: 3px solid rgba(79, 73, 229, .34);
  outline-offset: 10px;
}

.viewer-count {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
  text-align: right;
}

.viewer-count b {
  color: var(--ink);
  font-weight: var(--label-weight);
}

.viewer-stage {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 14px;
  background: #0c0c14;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(8, 8, 8, .16);
}

/* Ohne JavaScript stehen alle Folien untereinander – die Seite bleibt
   vollständig nutzbar, statt leer zu sein. */
.viewer-slide + .viewer-slide {
  margin-top: 10px;
}

.viewer.is-enhanced .viewer-slide {
  display: none;
  margin: 0;
}

.viewer.is-enhanced .viewer-slide.is-active {
  display: block;
}

.viewer-slide img,
.viewer-slide video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.viewer-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(8, 8, 8, .12);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.viewer-prev { left: -24px; }
.viewer-next { right: -24px; }

.viewer-dots {
  display: flex;
  margin: 18px 0 0;
  padding: 0;
  gap: 8px;
  justify-content: center;
  list-style: none;
}

.viewer-dots button {
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9c8d4;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.viewer-dots button[aria-current="true"] {
  background: var(--purple);
  transform: scale(1.35);
}

/* --------------------------------------------------------------- Einleitung */

.case-intro {
  padding: 62px 0 0;
}

.case-intro h1 {
  display: flex;
  max-width: 15ch;
  margin: 0 0 26px;
  flex-direction: column;
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line);
  overflow-wrap: normal;
}

.case-lead {
  max-width: 62ch;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: var(--text-l);
  font-weight: var(--subline-weight);
  line-height: 1.55;
}

.case-labels {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}

.case-labels li {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
}

/* ----------------------------------------------- Herausforderung und Lösung */

.case-cols {
  padding: 72px 0 0;
}

.case-cols-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}

.case-cols h2 {
  margin: 0 0 20px;
  font-size: calc(var(--h3-size) * 1.25);
  font-weight: var(--h2-weight);
  line-height: 1.1;
}

.case-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--text-m);
  font-weight: var(--subline-weight);
  line-height: 1.5;
}

.case-list li {
  position: relative;
  padding-left: 26px;
}

.case-list li + li {
  margin-top: 12px;
}

.case-list li::before {
  position: absolute;
  top: .62em;
  left: 2px;
  width: 10px;
  height: 2px;
  content: "";
  background: var(--purple);
}

/* ------------------------------------------------------------- Kundenstimme */

.case-quote {
  padding: 78px 0 0;
}

.case-quote-grid {
  position: relative;
}

/* Das Anführungszeichen ist ein eigenständiges Gestaltungselement, kein
   Satzzeichen. Es sitzt bewusst über der Kartenkante und skaliert mit. */
.case-quote-mark {
  position: absolute;
  top: -58px;
  left: -10px;
  z-index: 2;
  color: var(--purple);
  font-size: clamp(150px, 15vw, 240px);
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.case-quote blockquote {
  position: relative;
  display: block;
  min-height: 0;
  margin: 0 0 0 148px;
  padding: 44px 50px 36px;
  border-radius: 12px;
  background: var(--white);
}

.case-quote blockquote p {
  max-width: 74ch;
  margin: 0 0 26px;
  font-size: var(--text-m);
  font-weight: var(--subline-weight);
  line-height: 1.6;
}

.case-quote footer img {
  width: 56px;
  height: 56px;
}

/* ------------------------------------------------- Blättern zwischen Cases */

.case-pager {
  padding: 86px 0 96px;
}

.case-pager-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
}

.case-pager a {
  display: block;
  transition: color .22s ease;
}

.case-pager-next {
  text-align: right;
}

.case-pager span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}

.case-pager b {
  font-size: calc(var(--h3-size) * 1.1);
  font-weight: var(--h2-weight);
  line-height: 1.1;
}

/* ------------------------------------------------------------------- Hover */

@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover,
  .case-pager a:hover {
    color: var(--purple);
  }

  .viewer-nav:hover,
  .viewer-nav:focus-visible {
    border-color: var(--purple);
    background: var(--purple);
    color: #fff;
  }

  .viewer-dots button:hover {
    background: var(--purple);
  }
}

/* ------------------------------------------------------------------- Mobile */

@media (max-width: 900px) {
  .page-referenz .site-header,
  .page-referenz .breadcrumb .container,
  .page-referenz .case-viewer .container {
    width: min(100% - 32px, var(--container));
  }

  .viewer-prev { left: 8px; }
  .viewer-next { right: 8px; }

  .viewer-nav {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .92);
  }

  .case-cols-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .case-quote-mark {
    position: static;
    display: block;
    font-size: 118px;
  }

  .case-quote blockquote {
    margin: -30px 0 0;
    padding: 30px 26px 24px;
  }

  .case-pager-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .case-pager-next {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .case-intro h1 {
    max-width: none;
  }

  .case-intro,
  .case-cols,
  .case-quote {
    padding-top: 46px;
  }
}

/* ===========================================================================
   Referenzübersicht
   =========================================================================== */

.page-uebersicht .container {
  width: min(var(--container), calc(100% - 64px));
}

/* Der Verlauf gehört an den Seitenkörper, nicht an die Hero-Sektion.
   Nur so liegt er auch hinter dem Header – sonst steht die Navigation
   auf einem weißen Streifen über dem Verlauf. */
.page-uebersicht {
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(244, 243, 240, 0) 56%, var(--paper) 94%),
    radial-gradient(115% 62% at 34% -14%, rgba(243, 199, 226, .95), rgba(243, 199, 226, 0) 68%),
    radial-gradient(52% 48% at 101% 4%, rgba(242, 170, 147, .95), rgba(242, 170, 147, 0) 70%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 780px;
}

.uebersicht-hero {
  padding: 8px 0 62px;
  background: transparent;
}

/* Deutlich mehr Luft zwischen Logo und Brotkrumen */
.page-uebersicht .breadcrumb {
  padding-top: 0;
}

.uebersicht-hero .breadcrumb {
  padding: 54px 0 42px;
}

/* Exakt dieselben Werte wie die Hero-Headline der Startseite. */
.uebersicht-hero h1 {
  display: flex;
  max-width: 980px;
  margin: 0 0 26px;
  flex-direction: column;
  color: var(--purple);
  font-size: clamp(62px, 8.2vw, 112px);
  font-weight: 500;
  line-height: .98;
}

.uebersicht-lead {
  max-width: 58ch;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: var(--text-l);
  font-weight: var(--subline-weight);
  line-height: 1.5;
}

/* ------------------------------------------------------------------ Filter */

.uebersicht-liste {
  padding: 4px 0 96px;
  background: transparent;
}

.case-filter {
  margin-bottom: 54px;
}

.case-filter .eyebrow {
  margin-bottom: 14px;
}

.case-filter-chips {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}

.case-filter-chips button {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.case-filter-chips button[aria-pressed="true"] {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

.case-filter-chips span {
  opacity: .62;
}

.case-filter-status {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
}

/* ------------------------------------------------------------------ Zeilen */

.case-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 62px;
  /* Oben ausgerichtet: die Labels stehen damit bündig zur Bildoberkante. */
  align-items: start;
}

/* Wichtig: display:grid überschreibt die eingebaute Regel des Browsers für
   [hidden]. Ohne diese Zeile bleiben ausgeblendete Zeilen sichtbar. */
.case-row[hidden] {
  display: none;
}

.case-row + .case-row {
  margin-top: 78px;
}

.case-row-media {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #0c0c14;
}

.case-row-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* entspricht dem Format aller Overview-Grafiken */
  object-fit: cover;
  transition: transform .5s ease;
}

/* Titel und Beschreibung stehen seit der redaktionellen Vereinheitlichung
   untereinander statt im Fließtext. Die Titel folgen jetzt durchgängig dem
   Muster „Kunde – Leistungsart“ und sind damit kurz genug, dass eine eigene
   Zeile das Scannen erleichtert statt es zu zerreißen. */
.case-row-text {
  max-width: 54ch;
  margin: 22px 0 26px;
  font-size: var(--text-l);
  line-height: 1.5;
}

.case-row-text h2,
.case-row-text p {
  display: block;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.case-row-text h2 {
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 600;
}

.case-row-text p {
  color: var(--muted);
  font-weight: var(--subline-weight);
}


/* Der gesamte Zeilenbereich ist klickbar, ohne verschachtelte Links:
   der Überschriften-Link spannt seine Fläche über die ganze Karte. */
.case-row-body h2 a::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
}

.case-row-body {
  position: static;
}

/* Kein Versatz nach oben – die erste Chip-Reihe schließt mit dem Bild ab. */
.case-row-body .case-labels {
  margin-top: 0;
}

.case-row {
  position: relative;
}



.case-row-cta {
  gap: 10px;
}

.case-row-cta b {
  font-weight: 600;
  transition: transform .22s ease;
}

.case-more {
  margin-top: 72px;
  text-align: center;
}

.case-more button {
  margin: 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  .case-filter-chips button:hover {
    border-color: var(--purple);
    color: var(--purple);
  }

  .case-filter-chips button[aria-pressed="true"]:hover {
    color: #fff;
  }

  .case-row-media {
    transition: box-shadow .28s ease;
  }

  .case-row:hover .case-row-media {
    box-shadow: 0 18px 40px rgba(8, 8, 8, .18);
  }

  .case-row:hover .case-row-media img {
    transform: scale(1.04);
  }

  .case-row:hover .case-row-cta b {
    transform: translateX(4px);
  }
}

@media (max-width: 900px) {
  .page-uebersicht .container {
    width: min(100% - 32px, var(--container));
  }

  .case-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Einspaltig steht das Label nicht mehr bündig zur Bildoberkante, sondern
     schiebt sich zwischen Bild und Titel. Da die Leistungsart ohnehin im Titel
     steht, entfällt es hier ganz. Über den Filter bleibt sie erreichbar. */
  .case-row .case-labels {
    display: none;
  }

  .case-row-text {
    margin-top: 0;
  }

  .case-row + .case-row {
    margin-top: 54px;
  }

  .uebersicht-hero {
    padding-bottom: 46px;
  }

  .uebersicht-hero h1 {
    font-size: clamp(38px, 10.8vw, 78px);
  }
}

/* ---------------------------------------------------------------------------
   Rechtstexte: Impressum, Datenschutzerklärung
   ---------------------------------------------------------------------------
   Bewusst schmale Spalte. Rechtstexte werden nicht überflogen, sondern gelesen
   oder gezielt durchsucht – beides funktioniert bei rund 70 Zeichen je Zeile
   am besten.
   --------------------------------------------------------------------------- */

.legal {
  padding: 26px 0 96px;
}

.legal .container {
  max-width: 70ch;
}

.legal h1 {
  margin: 0 0 40px;
  color: var(--purple);
  font-size: clamp(40px, 5.6vw, 64px);
  font-weight: 500;
  line-height: 1.04;
}

.legal h2 {
  margin: 44px 0 12px;
  font-size: var(--h3-size);
  font-weight: var(--h2-weight);
  line-height: 1.25;
}

.legal h3 {
  margin: 30px 0 8px;
  font-size: var(--text-l);
  font-weight: var(--h2-weight);
}

.legal p,
.legal li {
  margin: 0 0 14px;
  font-size: var(--text-l);
  font-weight: var(--subline-weight);
  line-height: 1.6;
}

.legal ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tabellen für Empfänger, Speicherfristen und Rechtsgrundlagen */
.legal table {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: collapse;
  font-size: var(--text-m);
}

.legal th,
.legal td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: var(--subline-weight);
}

.legal th {
  color: var(--muted);
  font-weight: var(--label-weight);
}

@media (max-width: 900px) {
  .legal {
    padding-bottom: 64px;
  }

  .legal h2 {
    margin-top: 34px;
  }
}

/* ---------------------------------------------------------------------------
   Aufmacherbild statt Foliengalerie
   ---------------------------------------------------------------------------
   Übergangslösung: Solange für ein Projekt keine Folien-Screenshots vorliegen,
   steht hier das Kachelbild aus der Übersicht. Es hat dasselbe Format wie der
   Viewer, der Seitenaufbau ändert sich beim Nachrüsten also nicht.
   --------------------------------------------------------------------------- */

.case-hero {
  padding: 30px 0 0;
}

.case-hero .container {
  width: min(var(--container), calc(100% - 64px));
}

.case-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 22px 50px rgba(8, 8, 8, .16);
}

@media (max-width: 900px) {
  .case-hero .container {
    width: min(100% - 32px, var(--container));
  }

  .case-hero img {
    border-radius: 10px;
  }
}

/* ------------------------------------------------------------ Fehlerseite */

.legal-404 {
  padding: 96px 0 120px;
}

.legal-404 .eyebrow {
  margin-bottom: 18px;
}

.legal-404 .button {
  margin: 14px 12px 26px 0;
  text-decoration: none;   /* .legal a unterstreicht sonst auch Schaltflächen */
}

.legal-404 .button-primary {
  color: var(--white);     /* sonst erbt der Text die Linkfarbe und verschwindet */
}

.legal-404 .button-ghost {
  color: var(--ink);
}