/* ============ 21Layer — shared case-study stylesheet (/anwendungen/*) ============
   Ergaenzt legal.css, das auf diesen Seiten das Grundgeruest liefert:
   Announce-Bar, Navigation, Glass-Buttons und Footer. Hier steht nur, was die
   Fallstudien selbst brauchen.

   Die Regeln von .cs-detail__hero bis .cs-cta__btn stammen unveraendert aus
   dem frueheren Modal in index.html — nur um zwei Ebenen ausgerueckt. Die
   Modal-Huelle (.cs-modal, .cs-panel, .cs-close, .cs-nav) ist entfallen, die
   Fallstudie ist jetzt eine eigene Seite.

   Akzentfarben kommen pro Case als Inline-Variablen auf .case-main:
   --accent, --tint (als RGB-Tripel) und --accent-deep.
============================================================================ */

.case-main {
  --card: #ffffff;
  --ink: #16242a;
  --muted: #5f6e70;
  --faint: #97a2a3;
  --line: #e2e4e1;
  --hair: rgba(20, 40, 44, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: #eef0ee;

  background: var(--shell);
  /* Oben so viel Luft, dass die fixierte Navigationsleiste den Brotkrumen-Pfad
     nicht ueberdeckt: sie endet je nach Breite bei 117 bis 133px. */
  padding: calc(var(--ah) + clamp(96px, 8vw, 124px)) clamp(18px, 4vw, 56px) clamp(56px, 8vh, 104px);
}

.case-doc {
  max-width: 1240px; margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 2vw, 26px);
  overflow: hidden;
}

.cs-detail__hero {
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 72px) clamp(28px, 3vw, 44px);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--tint), 0.12), rgba(var(--tint), 0) 55%),
    linear-gradient(180deg, rgba(var(--tint),0.05), rgba(var(--tint),0) 70%);
  border-bottom: 1px solid var(--line);
}
.cs-detail__pillar {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--accent-deep, var(--accent));
  background: rgba(var(--tint), 0.14);
  border: 1px solid rgba(var(--tint), 0.24);
  padding: 5px 13px; border-radius: 100px;
  margin-bottom: 18px;
}
.cs-detail__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cs-detail__pills .cs-detail__pill {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--accent-deep, var(--accent));
  background: rgba(var(--tint), 0.16);
  border: 1px solid rgba(var(--tint), 0.3);
  padding: 5px 13px; border-radius: 100px; white-space: nowrap;
}
.cs-detail__type { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.cs-detail__tag { margin-top: 12px; font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.cs-detail__result { margin-top: 24px; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(1.05rem, 1.65vw, 1.375rem); line-height: 1.38; color: var(--accent-deep, var(--accent)); text-wrap: pretty; }
/* Bewusst ohne max-width: der Ergebnissatz soll auf dem Desktop einzeilig
   stehen. Die Schriftgroesse ist dafuer ausgemessen — der laengste der vier
   Saetze braucht bei 24,8px rund 1120px, das Innenmass des Kopfes liegt je
   nach Fensterbreite zwischen 858 und 1129px. Die Werte unten halten ueberall
   ab 1024px acht Prozent Reserve. Engste Stellen sind 1024px und, in der
   skalierenden Zone, 1180px.
   Kein white-space: nowrap — ein kuenftig laengerer Satz soll lieber
   umbrechen als am Rand von .case-doc abgeschnitten zu werden. */

.cs-body { padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 72px) clamp(40px, 5vw, 72px); }
.cs-block + .cs-block { margin-top: clamp(34px, 4vh, 52px); }
.cs-block__k { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.cs-block p { font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.7; color: var(--ink); max-width: 85ch; text-wrap: pretty; }
.cs-block p + p { margin-top: 14px; }
.cs-block p.muted { color: var(--muted); }

/* Das Recording nutzt die volle Breite der Spalte: es beginnt, wo der Text
   beginnt, und endet mit demselben Abstand zum rechten Rand. Anders als der
   Fliesstext (85ch) ist es nicht begrenzt.

   Statt eines Rahmens hebt es ein weicher Schein in der Signalfarbe vom
   Papier ab, dazu eine kaum sichtbare Haarlinie, die die Kante dort haelt,
   wo die Aufnahme selbst weiss ist.

   Das Seitenverhaeltnis kommt pro Seite als --cs-ar aus dem HTML und
   entspricht dem Video. So fuellt jede Aufnahme den Rahmen genau aus —
   ohne Rand und ohne Beschnitt. */
.cs-video {
  position: relative; aspect-ratio: var(--cs-ar, 16 / 9);
  width: 100%;
  margin: clamp(10px, 1.4vw, 20px) 0 clamp(10px, 1.4vw, 20px);
  border-radius: clamp(10px, 1.1vw, 15px);
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 30%, #f4f5f4, #e6e8e6);
  box-shadow:
    0 0 0 1px rgba(20, 40, 44, 0.06),
    0 1px 2px rgba(20, 40, 44, 0.05),
    0 22px 44px -30px rgba(var(--tint), 0.55);
  display: grid; place-items: center;
}
.cs-video__label { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; color: var(--faint); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.cs-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; background: #000; display: block; cursor: pointer; }
.cs-video__play { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--faint); display: grid; place-items: center; }
.cs-video__play::after { content: ""; border-left: 14px solid var(--faint); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }

/* custom minimal player: click video to play/pause; bar only scrubs */
.cs-video__toggle {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  border: none; background: none; cursor: pointer; padding: 0;
}
.cs-video__icon {
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(12,20,22,0.46); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  opacity: 1; transform: scale(1);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.cs-video__icon::after {
  content: ""; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px;
}
/* while playing: hide the center symbol entirely (no hover reveal) */
.cs-video.is-playing .cs-video__icon { opacity: 0; transform: scale(0.85); pointer-events: none; }
.cs-video.is-playing .cs-video__icon::after {
  border-left: none; border-top: none; border-bottom: none; margin: 0;
  width: 18px; height: 20px;
  border-left: 6px solid #fff; border-right: 6px solid #fff; box-sizing: border-box;
}
.cs-video__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 22px 16px 12px;
  background: linear-gradient(to top, rgba(8,14,16,0.62), rgba(8,14,16,0));
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.cs-video:hover .cs-video__bar { opacity: 1; }
.cs-video__seek:focus-visible ~ .cs-video__bar, .cs-video__bar:focus-within { opacity: 1; }

/* Vollbild-Knopf. Bewusst oben rechts und nicht in der Steuerleiste: deren
   pointerdown-Handler springt an die geklickte Stelle im Video (case.js), ein
   Knopf darin wuerde also bei jedem Klick die Abspielposition verreissen. */
.cs-video__full {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 10px; cursor: pointer;
  color: #fff; background: rgba(12, 20, 22, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-video__full svg { width: 18px; height: 18px; display: block; }
.cs-video__full .cs-video__full-close { display: none; }
.cs-video:hover .cs-video__full,
.cs-video__full:focus-visible { opacity: 1; }
.cs-video__full:hover { background: rgba(12, 20, 22, 0.74); }
.cs-video__full:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Ohne Hover — also auf Touchgeraeten — waren Steuerleiste und Knopf bisher
   gar nicht erreichbar. Dort stehen beide dauerhaft. */
@media (hover: none) {
  .cs-video__full, .cs-video__bar { opacity: 1; }
}

/* Vollbild. Die beiden Regelsaetze stehen getrennt, weil ein Browser, der das
   jeweils andere Pseudoelement nicht kennt, sonst die ganze Selektorliste
   verwirft. */
.cs-video:fullscreen {
  aspect-ratio: auto; width: 100vw; height: 100vh;
  border: none; border-radius: 0; box-shadow: none; background: #000;
}
.cs-video:fullscreen .cs-video__media { object-fit: contain; object-position: center; }
.cs-video:fullscreen .cs-video__bar { opacity: 1; }
.cs-video:fullscreen .cs-video__full { opacity: 1; }
.cs-video:fullscreen .cs-video__full-open { display: none; }
.cs-video:fullscreen .cs-video__full-close { display: block; }

.cs-video:-webkit-full-screen {
  aspect-ratio: auto; width: 100vw; height: 100vh;
  border: none; border-radius: 0; box-shadow: none; background: #000;
}
.cs-video:-webkit-full-screen .cs-video__media { object-fit: contain; object-position: center; }
.cs-video:-webkit-full-screen .cs-video__bar { opacity: 1; }
.cs-video:-webkit-full-screen .cs-video__full { opacity: 1; }
.cs-video:-webkit-full-screen .cs-video__full-open { display: none; }
.cs-video:-webkit-full-screen .cs-video__full-close { display: block; }
.cs-video__seek {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  display: block; /* sonst Luft unter der Textgrundlinie, der Punkt saesse daneben */
  border-radius: 100px; cursor: pointer; margin: 0; pointer-events: none;
  background: linear-gradient(to right, #fff var(--p, 0%), rgba(255,255,255,0.28) var(--p, 0%));
}
.cs-video__bar { cursor: pointer; }
.cs-video__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 0; height: 0; opacity: 0;
}
.cs-video__seek::-moz-range-thumb {
  width: 0; height: 0; border: none; opacity: 0;
}
.cs-video__seek:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Punkt am laufenden Ende der Linie: zeigt, dass man greifen und spulen kann.
   Die Linie sitzt 12px ueber dem Boden der Leiste und ist 4px hoch, ihre
   Mitte also bei 14px; 16px Innenabstand links und rechts. */
.cs-video__bar::after {
  content: ""; position: absolute; bottom: 8px;
  left: calc(16px + (100% - 32px) * var(--f, 0));
  width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: #fff; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s var(--ease);
}
.cs-video__bar:hover::after, .cs-video__bar:active::after { transform: scale(1.2); }

/* Tempo-Knopf unten rechts (case.js legt ihn an). Die Linie endet links
   davon: rechts 72px statt 16px Innenabstand, der Punkt rechnet mit. Der
   Knopf ist 24px hoch (Mindestgroesse fuer Touch) und sitzt mittig auf der
   Linie (Mitte 14px ueber dem Boden). Er liegt ueber der Leiste, ein Klick
   darauf spult also nicht. */
.cs-video.has-rate .cs-video__bar { padding-right: 72px; }
.cs-video.has-rate .cs-video__bar::after { left: calc(16px + (100% - 88px) * var(--f, 0)); }
.cs-video__rate {
  position: absolute; right: 12px; bottom: 2px; z-index: 4;
  height: 24px; min-width: 46px; padding: 0 9px;
  border: none; border-radius: 100px; cursor: pointer;
  font: 600 12px/24px "Schibsted Grotesk", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  /* Gleiche dunkle Glasflaeche wie der Vollbild-Knopf, damit er auch auf
     hellen Aufnahmen gut sichtbar ist. */
  color: #fff; background: rgba(12, 20, 22, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cs-video__rate:hover { background: rgba(12, 20, 22, 0.74); }
/* Schneller als normal: dunkler und mit hellem Ring, auf einen Blick erkennbar. */
.cs-video__rate.is-fast { background: rgba(12, 20, 22, 0.74); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.cs-video__rate:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.cs-video:hover .cs-video__rate { opacity: 1; }
@media (hover: none) { .cs-video__rate { opacity: 1; } }
.cs-video:fullscreen .cs-video__rate { opacity: 1; }
.cs-video:-webkit-full-screen .cs-video__rate { opacity: 1; }

.cs-list { list-style: none; display: flex; flex-direction: column; gap: 12px; max-width: 80ch; }
.cs-list li { position: relative; padding-left: 26px; font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.5; color: var(--ink); }
/* Kreis mittig zur ersten Zeile: deren Mitte liegt bei 0,75em (Zeilenhoehe
   1,5), der Kreis ist mit Rand 12px hoch. Aus Pixeln nachgemessen, dort sitzt
   auch die Mitte der Grossbuchstaben. */
.cs-list li::before { content: ""; position: absolute; left: 4px; top: calc(0.75em - 6px); width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); }

.cs-cta { margin-top: clamp(36px, 5vh, 56px); padding-top: clamp(28px, 3vh, 40px); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cs-cta__txt { font-family: "Newsreader", Georgia, serif; font-size: clamp(1.1rem, 1.5vw, 1.4rem); color: var(--ink); }
.cs-cta__btn {
  display: inline-flex; align-items: center; gap: 0.6em; flex: none;
  font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; cursor: pointer;
  /* --accent-deep statt --accent: mit weisser Schrift lagen Teal, Amber,
     Violett und Grapefruit sonst zwischen 3,16 und 4,37:1 und damit unter der
     Schwelle von 4,5:1. Die dunklen Varianten halten sie alle. */
  background: var(--accent-deep, var(--accent)); border: none; border-radius: 100px; padding: 0.85em 1.5em;
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.cs-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cs-cta__btn .arrow { transition: transform 0.35s var(--ease); }
.cs-cta__btn:hover .arrow { transform: translateX(4px); }
/* ---------- Weitere Anwendungen ---------- */
/* Eine Liste statt Bildkacheln: die Standbilder waren als Vorschau zu
   dominant, und die Zeilenform nutzt die gewonnene Breite besser. Sie
   ersetzt zugleich die fruehere Vorher/Naechste-Leiste — von hier aus
   sind alle uebrigen Fallstudien direkt erreichbar, nicht nur zwei. */
.cs-more { max-width: 1240px; margin: clamp(46px, 7vh, 82px) auto 0; }
.cs-more__head {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 18px;
}
.cs-more__grid {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
}
.cs-more__card {
  position: relative; isolation: isolate;
  display: flex; align-items: baseline;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 34px);
  text-decoration: none; color: inherit;
}
.cs-more__card + .cs-more__card { border-top: 1px solid var(--line); }
/* Beim Zeigen leuchtet die Zeile in der Signalfarbe ihres Falls auf (die
   Farben setzt case.js je Zeile): ein weicher Schein von links und eine
   feine Kante in der Akzentfarbe — dieselbe Sprache wie die Karten auf der
   Startseite. Als Ebenen mit Deckkraft, weil sich Verlaeufe nicht
   ueberblenden lassen. */
.cs-more__card::before,
.cs-more__card::after {
  content: ""; position: absolute; pointer-events: none;
  opacity: 0; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.cs-more__card::before {
  inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(var(--tint), 0.08), rgba(var(--tint), 0.025) 55%, rgba(var(--tint), 0) 85%);
}
.cs-more__card::after {
  left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  transform: scaleY(0.4); transform-origin: center;
}
.cs-more__card:hover::before, .cs-more__card:focus-visible::before { opacity: 1; }
.cs-more__card:hover::after, .cs-more__card:focus-visible::after { opacity: 1; transform: scaleY(1); }
.cs-more__title { transition: color 0.35s var(--ease); }
.cs-more__card:hover .cs-more__title, .cs-more__card:focus-visible .cs-more__title { color: var(--accent-deep, var(--accent)); }
.cs-more__card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cs-more__name {
  flex: 0 0 clamp(190px, 26%, 330px);
  display: flex; flex-direction: column; gap: 5px;
}
.cs-more__industry {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.cs-more__title {
  font-family: "Newsreader", Georgia, serif; font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.22; color: var(--ink);
  text-wrap: balance;
}
.cs-more__txt { flex: 1 1 auto; font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.cs-more__arrow {
  flex: none; color: var(--faint); font-size: 15px;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.cs-more__card:hover .cs-more__arrow { transform: translateX(4px); color: var(--accent); }

/* ---------- Schmalere Viewports ---------- */
@media (max-width: 900px) {
  /* Die Zeile bricht auf zwei Ebenen um, sobald Titel und Kurztext
     nebeneinander zu eng wuerden. */
  .cs-more__card { flex-wrap: wrap; gap: 8px clamp(18px, 3vw, 44px); }
  .cs-more__name { flex-basis: 100%; }
  .cs-more__txt { flex-basis: 100%; }
}

@media (max-width: 720px) {
  .case-main { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-more__card, .cs-more__arrow, .cs-cta__btn, .cs-cta__btn .arrow,
  .cs-video__icon, .cs-video__bar, .cs-video__full, .cs-video__rate { transition: none; }
  .cs-cta__btn:hover { transform: none; }
  .cs-more__card:hover .cs-more__arrow { transform: none; }
  .cs-more__card::before, .cs-more__card::after, .cs-more__title { transition: none; }
}