/* ============================================================
   Protos Case Study — Divine
   Implemented from Claude Design handoff: Protos Case Study.dc.html
   ============================================================ */

@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Italic-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'TT Norms Pro'; src: url('fonts/TTNormsPro-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Norms Pro'; src: url('fonts/TTNormsPro-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Norms Pro'; src: url('fonts/TTNormsPro-DemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Norms Pro'; src: url('fonts/TTNormsPro-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Variable.ttf') format('truetype'); font-weight: 100 800; font-style: normal; font-display: swap; }

.protos-case {
  /* page frame — matches divine.de */
  --max-w: 1440px;
  --side-pad: 48px;

  --ink: #14161a;
  --ink-soft: #2a2a26;
  --ink-mid: #3a3a36;
  --ink-muted: #4a4a46;
  --gray: #5a5a54;
  --gray-faint: #a2a09a;
  --label: #626262;
  --beige: #e9e4de;
  --line: #e7e5df;
  --line-card: #e6e3da;
  --line-beige: #dcd7cd;
  --line-section: #afafaf;
  --dark: #16181c;
  --footer-bg: #0e0f11;
  --blue: #1ca2e8;
  --red: #e0483d;
}

.protos-case,
.protos-case * { box-sizing: border-box; }
.protos-case { margin: 0; padding: 0; }
.protos-case { overflow-x: clip; }
.protos-case {
  font-family: 'Inter Tight', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: var(--ink);
}
.protos-case a { color: var(--ink); text-decoration: none; }
.protos-case a:hover { color: var(--blue); }
.protos-case img { display: block; max-width: 100%; }
.protos-case p { text-wrap: pretty; }

.protos-case .container { max-width: var(--max-w); margin: 0 auto; padding-left: var(--side-pad); padding-right: var(--side-pad); }

@media (max-width: 1024px) { .protos-case { --side-pad: 32px; } }
@media (max-width: 767px) { .protos-case { --side-pad: 20px; } }

/* ===================== NAV ===================== */
.protos-case .site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6e4df;
}
.protos-case .site-nav__inner {
  padding-top: 22px; padding-bottom: 22px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.protos-case .site-nav__logo { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.protos-case .site-nav__links { display: flex; gap: 32px; font-size: 14px; font-weight: 500; }
.protos-case .site-nav__links a { color: var(--ink-muted); }
.protos-case .site-nav__links a:hover { color: var(--blue); }
.protos-case .site-nav__links a.is-active { color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.protos-case .site-nav__cta { justify-self: end; }
.protos-case .btn-contact {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dark); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: 9px;
}
.protos-case .btn-contact:hover { color: #fff; opacity: .88; }

/* ===================== HERO ===================== */
.protos-case .hero { padding-top: 60px; }
.protos-case .hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: start; }
.protos-case .hero__title { font-size: 76px; line-height: .98; font-weight: 500; letter-spacing: -.03em; margin: 0; }
.protos-case .hero__intro { font-size: 16px; line-height: 1.65; color: var(--ink-mid); margin: 6px 0 0; }
.protos-case .hero__banner {
  margin-top: 44px;
  border-radius: 0 0 25px 25px;
  height: 303px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: #0e1830 url('assets/hero-bg.jpg') center / cover no-repeat;
}
.protos-case .hero__banner img { position: relative; width: 340px; max-width: 60%; height: auto; }
.protos-case .hero__meta {
  margin-top: 26px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line); padding-bottom: 16px;
}
.protos-case .hero__meta-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.protos-case a.hero__meta-title { display: inline-flex; align-items: center; gap: 7px; transition: color .25s ease; }
.protos-case a.hero__meta-title svg { transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.protos-case a.hero__meta-title:hover { color: var(--blue); }
.protos-case a.hero__meta-title:hover svg { transform: translate(2px, -2px); }

/* ===================== SECTIONS ===================== */
.protos-case .section { padding-top: 120px; padding-bottom: 96px; position: relative; }
.protos-case .section--last::after { display: none; }
.protos-case .section__num { font-size: 13px; font-weight: 600; color: var(--gray-faint); margin-bottom: 4px; }
.protos-case .section__title { font-size: 60px; line-height: 1.02; font-weight: 500; letter-spacing: -.025em; margin: 0 0 20px; }
.protos-case .section__lead { max-width: 520px; font-size: 16px; line-height: 1.55; color: var(--ink-mid); margin: 0 0 46px; }

/* small uppercase labels on beige cards */
.protos-case .card-label {
  font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--label);
}
.protos-case .card-label--rule { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #d8d5cc; }

/* ===================== 01 CONTENT-ARCHITEKTUR ===================== */
.protos-case .arch .cover__kicker { margin-bottom: 26px; }
.protos-case .arch__lead {
  max-width: 620px; font-size: 18px; line-height: 1.55;
  color: var(--ink-soft); margin: 18px 0 64px;
}
.protos-case .arch__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: center; }
.protos-case .arch__board { background: var(--beige); border-radius: 16px; padding: 28px; }
.protos-case .arch__board img { width: 100%; border-radius: 8px; }
.protos-case .arch__caption {
  max-width: 640px; font-size: 16px; line-height: 1.6;
  color: var(--ink-mid); margin: 48px 0 0;
}

.protos-case .timeline { position: relative; padding-left: 36px; }
.protos-case .timeline::before {
  content: ''; position: absolute; left: 5px; top: 14px; bottom: 30px;
  width: 2px; background: #d8d5cc;
}
.protos-case .timeline__item { position: relative; padding: 20px 0; border-top: 1px solid var(--line); }
.protos-case .timeline__item::before {
  content: ''; position: absolute; left: -36px; top: 24px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--blue);
}
.protos-case .timeline__title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.protos-case .timeline__copy { font-size: 15px; line-height: 1.5; color: var(--gray); margin: 0; }

/* ===================== 02 COVER ===================== */
.protos-case .cover { padding-top: 96px; padding-bottom: 96px; position: relative; }

/* full-bleed section dividers — span the entire viewport width */
.protos-case .section::after,
.protos-case .cover::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 100vw;
  height: 1px;
  background: var(--line-section);
}
.protos-case .cover__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; }
.protos-case .cover__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.protos-case .cover__kicker-line { width: 44px; height: 1px; background: #c9c6bd; }
.protos-case .cover__kicker-text {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray-faint);
}
.protos-case .cover__title { font-size: 56px; line-height: 1.02; font-weight: 500; letter-spacing: -.025em; margin: 0; }
.protos-case .cover__lead { max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 15px 0; }
.protos-case .cover__image { display: flex; justify-content: center; }
.protos-case .cover__image img { width: 100%; max-width: 440px; }

/* --- composed card / spec list --- */
.protos-case .compose { padding-top: 96px; }
.protos-case .compose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.protos-case .compose__heading {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--label); margin-bottom: 14px;
}
.protos-case .compose__card { background: var(--beige); border-radius: 16px; padding: 26px; }
.protos-case .annotated { border-left: 3px solid #bababa; padding-left: 15px; margin-bottom: 15px; }
.protos-case .annotated__label {
  font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--label); margin-bottom: 6px;
}
.protos-case .annotated__link {
  display: inline-block; color: var(--blue);
  font-size: 16px; font-weight: 600;
  border-bottom: 1.5px solid var(--blue); padding-bottom: 1px;
  margin: 0 0 14px;
}
.protos-case .annotated__title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 20px; }
.protos-case .annotated__copy { font-size: 14px; line-height: 1.5; color: #4a4a44; margin: 0 0 22px; }

.protos-case .mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.protos-case .mini-card { border-radius: 11px; padding: 15px; position: relative; min-height: 104px; }
.protos-case .mini-card--dark { background: var(--dark); }
.protos-case .mini-card--light { background: #fff; border: 1px solid var(--line-card); }
.protos-case .mini-card__title { font-size: 14px; font-weight: 700; }
.protos-case .mini-card--dark .mini-card__title { color: #fff; }
.protos-case .mini-card__copy { font-size: 12px; line-height: 1.4; margin-top: 5px; color: #8a8a84; }
.protos-case .mini-card--dark .mini-card__copy { color: #9aa0a8; }
.protos-case .mini-card__arrow {
  position: absolute; right: 12px; bottom: 12px;
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.protos-case .mini-card__arrow--blue { background: var(--blue); color: #fff; }
.protos-case .mini-card__arrow--beige { background: #f1eee7; color: var(--ink); }

.protos-case .btn-more {
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line-card); border-radius: 9px;
  padding: 9px 9px 9px 16px;
}
.protos-case .btn-more__text { font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.protos-case .btn-more__arrow {
  width: 26px; height: 26px; border-radius: 6px; background: var(--blue);
  display: flex; align-items: center; justify-content: center; color: #fff;
}

.protos-case .spec-list__item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.protos-case .spec-list__title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.protos-case .spec-list__title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.protos-case .spec-list__accent { flex: 1; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #1ca2e8, #4fc3f4); }
.protos-case .spec-list__copy { font-size: 14px; line-height: 1.5; color: var(--gray); margin: 0; }

/* ===================== 02 BAUSTEINE ===================== */
.protos-case .blocks-title { margin-bottom: 44px; }
.protos-case .blocks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; position: relative; max-width: 1120px; margin: 0 auto; font-family: 'TT Norms Pro', system-ui, sans-serif; }
.protos-case .blocks > * { min-width: 0; }
.protos-case .block {
  border: 1px solid var(--line-beige); background: var(--beige);
  border-radius: 14px; padding: 18px;
}
.protos-case .block__label {
  font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--label);
  padding-bottom: 11px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(20, 22, 26, .14);
}
.protos-case .block--button { grid-column: 1 / 4; grid-row: 1; }
.protos-case .block--form { grid-column: 4 / 9; grid-row: 1; }
.protos-case .block--teaser { grid-column: 9 / 13; grid-row: 1 / 4; display: flex; flex-direction: column; }
.protos-case .block--header { grid-column: 1 / 9; grid-row: 2; position: relative; z-index: 10; overflow: visible; }
.protos-case .block--dropdown {
  grid-column: 7 / 9; grid-row: 3;
  position: relative; overflow: visible; z-index: 20;
  height: 123px;
}
.protos-case .dd {
  width: 145px; height: 171px;
  position: relative; top: -42px;
  border-radius: 0 0 10px 10px;
  background: #171e26;
  box-shadow: 0 18px 34px rgba(10, 15, 22, .35);
  padding: 12px 12px 10px 16px;
  display: flex; flex-direction: column;
}
.protos-case .dd__item {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  color: #e8eaee; font-size: 7.5px; font-weight: 500; letter-spacing: .03em;
  padding-left: 8px;
  transition: color .2s ease;
}
.protos-case .dd__item::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 2px; border-radius: 1px; background: var(--blue);
  opacity: 0; transition: opacity .2s ease;
}
.protos-case .dd__item.is-active,
.protos-case .dd__item:hover { color: var(--blue); }
.protos-case .dd__item.is-active::before,
.protos-case .dd__item:hover::before { opacity: 1; }
.protos-case .dd__contact {
  margin-top: 5px;
  background: #10a3e3; color: #fff;
  font-size: 7.5px; font-weight: 600; letter-spacing: .04em;
  text-align: center; padding: 6px 0; border-radius: 4px;
  transition: background-color .2s ease;
}
.protos-case .dd__contact:hover { background: #0d8dc6; color: #fff; }
.protos-case .block--partners { grid-column: 7 / 13; grid-row: 4; padding: 18px 22px; }

/* endless logo marquee */
.protos-case .marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.protos-case .marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.protos-case .marquee__track img {
  height: 30px; width: auto; max-width: none;
  flex-shrink: 0;
  opacity: .85;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.protos-case .block--type { grid-column: 1 / 7; grid-row: 3 / 5; position: relative; overflow: hidden; }

.protos-case .sample-stack { display: flex; flex-direction: column; gap: 12px; }
.protos-case .sample-btn {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--line-card); border-radius: 8px;
  padding: 11px 11px 11px 15px;
}
.protos-case .sample-btn span { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.protos-case .sample-btn--blue { background: var(--blue); border: none; padding: 11px; padding-left: 15px; }
.protos-case .sample-btn--blue span { color: #fff; }
.protos-case .sample-btn__box {
  width: 26px; height: 26px; border-radius: 3px;
  background: var(--blue); border: 1px solid #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.protos-case .sample-field {
  display: block; position: relative; cursor: text;
  background: #fff; border: 1px solid var(--line-card); border-radius: 8px;
  padding: 13px 15px; font-size: 13px;
}
.protos-case .sample-field input {
  width: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink); padding: 0; display: block;
}
.protos-case .sample-field__ph {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: #b3b1a9; pointer-events: none; transition: opacity .2s ease;
}
.protos-case .sample-field input:focus + .sample-field__ph,
.protos-case .sample-field input:not(:placeholder-shown) + .sample-field__ph { opacity: 0; }
.protos-case .sample-field .req { color: var(--red); }

.protos-case .teaser-card { border-radius: 11px; padding: 16px; position: relative; flex: 1; min-height: 118px; }
.protos-case .teaser-card--dark { background: var(--dark); }
.protos-case .teaser-card--light { background: #fff; border: 1px solid var(--line-card); margin-top: 12px; }
.protos-case .teaser-card__title { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.protos-case .teaser-card--dark .teaser-card__title { color: #fff; }
.protos-case .teaser-card__copy { font-size: 13px; line-height: 1.45; margin-top: 10px; color: #8a8a84; }
.protos-case .teaser-card--dark .teaser-card__copy { color: #9aa0a8; }
.protos-case .teaser-card__arrow {
  position: absolute; right: 16px; bottom: 16px;
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.protos-case .teaser-card__arrow--blue { background: var(--blue); color: #fff; }
.protos-case .teaser-card__arrow--gray { background: #eef2f6; color: var(--ink); }

.protos-case .sample-header {
  background: #fff; border: 1px solid var(--line-card); border-radius: 10px;
  padding: 12px 14px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  position: relative;
}
.protos-case .sample-header__icon {
  width: 34px; height: 34px; background: var(--dark);
  display: flex; align-items: center; justify-content: center;
}
.protos-case .protos-logo { display: flex; flex-direction: column; align-items: center; }
.protos-case .protos-logo__word { display: flex; align-items: flex-start; font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.protos-case .protos-logo__o { position: relative; }
.protos-case .protos-logo__dot {
  position: absolute; top: -2px; right: -1px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.protos-case .protos-logo__sub { font-size: 7px; letter-spacing: .42em; color: #8a8a84; padding-left: .42em; }
.protos-case .sample-header__right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.protos-case .sample-header__lang { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-muted); }

.protos-case .type-sample__kicker {
  color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 14px;
}
.protos-case .type-sample__title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.protos-case .type-sample__copy { font-size: 14px; line-height: 1.5; color: var(--gray); margin: 0; max-width: 420px; }

/* ===================== 03 CONTENT HUB ===================== */
.protos-case .hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.protos-case .hub-card { background: var(--beige); border-radius: 16px; padding: 22px; }
.protos-case .hub-card__shot { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
.protos-case .hub-card__shot img { width: 100%; }

/* ===================== 04 RESPONSIVE ===================== */
.protos-case .responsive-card { background: var(--beige); border-radius: 16px; padding: 34px 34px 46px; position: relative; overflow: hidden; }

/* device composition (positions derived from the original layout) */
.protos-case .devices { position: relative; aspect-ratio: 1064.47 / 601.74; max-width: 980px; margin: 22px auto 0; }
.protos-case .device { position: absolute; }
.protos-case .device img { width: 100%; height: auto; }
.protos-case .device--laptop { left: 0; top: 0; width: 75.95%; z-index: 1; }
.protos-case .device--tablet { left: 59.29%; top: 33.43%; width: 27.25%; z-index: 2; }
.protos-case .device--phone { left: 82.44%; top: 4.57%; width: 17.56%; z-index: 3; }

/* scroll-triggered entrance: each device drifts in from its own side */
.protos-case .devices .dev-in {
  opacity: 0;
  transform: var(--dfrom, translateY(50px));
  transition:
    transform 1.35s cubic-bezier(.19, 1.08, .28, 1),
    opacity .95s cubic-bezier(.33, 1, .68, 1);
}
.protos-case .device--laptop.dev-in { --dfrom: translate(-70px, 26px) scale(.97); }
.protos-case .device--tablet.dev-in { --dfrom: translateY(80px) rotate(2deg); transition-delay: .18s; }
.protos-case .device--phone.dev-in { --dfrom: translate(54px, -34px) rotate(3deg); transition-delay: .36s; }
.protos-case .devices--shown .dev-in { opacity: 1; transform: none; }

/* subtle lift on hover */
.protos-case .device { transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.protos-case .device:hover { transform: translateY(-6px); }

/* ===================== 05 ERGEBNIS ===================== */
.protos-case .result__title { margin-bottom: 44px; }
.protos-case .result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.protos-case .result__copy { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.protos-case .result__row {
  display: flex; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.protos-case .result__row:first-child { padding-top: 0; }
.protos-case .result__row dt { font-weight: 600; margin: 0; }
.protos-case .result__row dd { color: var(--gray-faint); margin: 0; }

/* ===================== NEXT CLIENT ===================== */
.protos-case .next-client { padding-top: 120px; padding-bottom: 96px; }
.protos-case .next-client__label {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #2b2b2b; margin-bottom: 16px;
}
.protos-case .next-client__link { font-size: 72px; line-height: 1; font-weight: 500; letter-spacing: -.03em; display: inline-block; }

/* ===================== FOOTER ===================== */
.protos-case .site-footer { background: var(--footer-bg); color: #fff; }
.protos-case .site-footer a:hover { color: var(--blue); }
.protos-case .site-footer__main { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.protos-case .site-footer__label {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #6a6c70; margin-bottom: 20px;
}
.protos-case .site-footer__title { font-size: 44px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.protos-case .site-footer__sub { font-size: 16px; color: #8a8c90; margin: 0; }
.protos-case .site-footer__cta-col { align-self: end; }
.protos-case .site-footer__copy { font-size: 15px; line-height: 1.6; color: #b6b8bc; margin: 0 0 22px; max-width: 380px; }
.protos-case .site-footer__copy a { color: #fff; text-decoration: underline; }
.protos-case .btn-footer {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--footer-bg);
  font-size: 14px; font-weight: 600;
  padding: 13px 22px; border-radius: 9px;
}
.protos-case .btn-footer:hover { color: var(--footer-bg); opacity: .88; }
.protos-case .site-footer__bar { border-top: 1px solid #212327; }
.protos-case .site-footer__bar-inner {
  padding-top: 22px; padding-bottom: 22px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: #7a7c80;
}
.protos-case .site-footer__brand-row { display: flex; align-items: center; gap: 22px; }
.protos-case .site-footer__brand { font-size: 18px; font-weight: 700; color: #fff; }
.protos-case .site-footer__links { display: flex; gap: 26px; }
.protos-case .site-footer__links a { color: #7a7c80; }

/* ===================== SMALL LABELS ===================== */
/* Eyebrow labels OUTSIDE the big containers — divine.de --font-mono style. */
.protos-case .cover__kicker-text,
.protos-case .compose__heading,
.protos-case .next-client__label,
.protos-case .site-footer__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em;
}
/* Labels INSIDE the big beige containers — TT Norms Pro, like the Bausteine. */
.protos-case .annotated__label,
.protos-case .card-label {
  font-family: 'TT Norms Pro', system-ui, sans-serif;
  letter-spacing: .14em;
}

/* ===================== ANIMATIONS ===================== */

/* hero entrance */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.protos-case .hero__title,
.protos-case .hero__intro,
.protos-case .hero__banner,
.protos-case .hero__meta {
  animation: rise-in .8s cubic-bezier(.22, .61, .36, 1) both;
}
.protos-case .hero__intro { animation-delay: .12s; }
.protos-case .hero__banner { animation-delay: .24s; }
.protos-case .hero__meta { animation-delay: .36s; }

/* scroll reveal (elements get .reveal via JS) */
.protos-case .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: 0ms;
}
/* directional fly-ins */
.protos-case .reveal--left { transform: translateX(-64px); }
.protos-case .reveal--right { transform: translateX(64px); }
.protos-case .reveal--down { transform: translateY(-44px); }
.protos-case .reveal.is-visible { opacity: 1; transform: none; }

/* timeline dots pop in with their item */
.protos-case .timeline__item.reveal::before { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .25s; }
.protos-case .timeline__item.reveal.is-visible::before { transform: scale(1); }

/* Baukasten assembly: pieces float in scattered & rotated, then snap into the grid */
.protos-case .blocks .assemble {
  opacity: 0;
  transform: var(--from, translateY(40px)) scale(.96);
  box-shadow: 0 22px 44px rgba(20, 22, 26, .13);
  will-change: transform, opacity;
  transition:
    transform 1.3s cubic-bezier(.19, 1.08, .28, 1),
    opacity .9s cubic-bezier(.33, 1, .68, 1),
    box-shadow 1.3s ease;
}
.protos-case .block--header.assemble { --from: translate(-90px, -14px) rotate(-2deg); }
.protos-case .block--button.assemble { --from: translate(-80px, 36px) rotate(-2.5deg); transition-delay: .1s; }
.protos-case .block--form.assemble { --from: translate(24px, -70px) rotate(1.5deg); transition-delay: .2s; }
.protos-case .block--teaser.assemble { --from: translate(90px, 42px) rotate(2deg); transition-delay: .3s; }
.protos-case .block--type.assemble { --from: translate(-70px, 60px) rotate(-2deg); transition-delay: .4s; }
.protos-case .block--partners.assemble { --from: translate(85px, 38px) rotate(1.5deg); transition-delay: .5s; }
.protos-case .block--dropdown.assemble {
  --from: translateY(-36px) scaleY(.8);
  transform-origin: top center;
  box-shadow: none;
  transition-delay: .75s;
}
.protos-case .blocks--built .assemble { opacity: 1; transform: none; box-shadow: 0 0 0 rgba(20, 22, 26, 0); }

/* parallax target gets transforms from JS — keep it smooth */
.protos-case .cover__image img { will-change: transform; }

/* ===================== HOVER EFFECTS ===================== */

/* nav links: animated underline */
.protos-case .site-nav__links a {
  position: relative;
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1.5px no-repeat;
  transition: color .25s ease, background-size .3s cubic-bezier(.22, .61, .36, 1);
}
.protos-case .site-nav__links a:hover { background-size: 100% 1.5px; }
.protos-case .site-nav__links a.is-active { background: none; }

/* buttons: lift + arrow nudge */
.protos-case .btn-contact,
.protos-case .btn-footer,
.protos-case .btn-more {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, opacity .25s ease;
}
.protos-case .btn-contact svg,
.protos-case .btn-footer svg,
.protos-case .btn-more__arrow svg { transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.protos-case .btn-contact:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 22, 26, .18); }
.protos-case .btn-contact:hover svg { transform: translateY(2px); }
.protos-case .btn-footer:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.protos-case .btn-footer:hover svg,
.protos-case .btn-more:hover .btn-more__arrow svg { transform: translate(2px, -2px); }
.protos-case .btn-more:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 22, 26, .1); }

/* cards: lift + shadow + arrow slide */
.protos-case .mini-card,
.protos-case .teaser-card,
.protos-case .hub-card,
.protos-case .block {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
.protos-case .mini-card__arrow,
.protos-case .teaser-card__arrow { transition: transform .3s cubic-bezier(.22, .61, .36, 1), background-color .3s ease; }
.protos-case .mini-card:hover,
.protos-case .teaser-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 22, 26, .12); }
.protos-case .mini-card:hover .mini-card__arrow,
.protos-case .teaser-card:hover .teaser-card__arrow { transform: translate(3px, -3px); }
.protos-case .block:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20, 22, 26, .08); }
.protos-case .block--dropdown:hover { transform: none; box-shadow: none; }

/* hub cards: screenshot zoom */
.protos-case .hub-card__shot { transform: translateZ(0); }
.protos-case .hub-card__shot img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.protos-case .hub-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(20, 22, 26, .1); }
.protos-case .hub-card:hover .hub-card__shot img { transform: scale(1.035); }

/* ---------- interactive Baukasten samples ---------- */

/* sample buttons: neutral ⇄ hover state like the real components */
.protos-case .sample-btn {
  cursor: pointer; color: var(--ink);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease,
              background-color .25s ease, border-color .25s ease, color .25s ease;
}
.protos-case .sample-btn > svg { stroke: currentColor; transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.protos-case .sample-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(20, 22, 26, .12); }
.protos-case .sample-btn:not(.sample-btn--blue):hover { background: var(--dark); border-color: var(--dark); color: #fff; }
.protos-case .sample-btn:hover > svg { transform: translate(2px, -2px); }
.protos-case .sample-btn__box { transition: background-color .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1); }
.protos-case .sample-btn__box svg { transition: stroke .25s ease; }
.protos-case .sample-btn--blue:hover { background: #158ccc; }
.protos-case .sample-btn--blue:hover .sample-btn__box { background: #fff; transform: translate(2px, -2px); }
.protos-case .sample-btn--blue:hover .sample-btn__box svg { stroke: #158ccc; }

/* form fields: hover + focus ring */
.protos-case .sample-field { transition: border-color .25s ease, box-shadow .25s ease; }
.protos-case .sample-field:hover { border-color: #c9c6bd; }
.protos-case .sample-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 162, 232, .15); }

/* teaser & mini cards: arrows switch to active (blue) state */
.protos-case .mini-card,
.protos-case .teaser-card { cursor: pointer; }
.protos-case .mini-card--light:hover .mini-card__arrow--beige,
.protos-case .teaser-card--light:hover .teaser-card__arrow--gray { background: var(--blue); color: #fff; }
.protos-case .mini-card--dark:hover .mini-card__arrow--blue,
.protos-case .teaser-card--dark:hover .teaser-card__arrow--blue { background: #3db4f0; }

/* header sample: icons, language switch, burger */
.protos-case .sample-header__icon {
  cursor: pointer; border: 0; padding: 0;
  transition: background-color .25s ease;
}
.protos-case .sample-header__icon:hover { background: var(--blue); }
.protos-case .sample-header__lang { cursor: pointer; transition: color .25s ease; }
.protos-case .sample-header__lang:hover { color: var(--blue); }
.protos-case .sample-header__lang:hover svg { stroke: var(--blue); }
.protos-case .sample-header__lang svg:last-child { transition: transform .25s ease; }
.protos-case .sample-header__lang:hover svg:last-child { transform: rotate(180deg); }

/* dropdown: toggled by the burger */
.protos-case .dd { transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1); transform-origin: top center; }
.protos-case .block--dropdown.is-closed .dd { opacity: 0; transform: translateY(-14px) scaleY(.92); pointer-events: none; }

/* partner strip: full opacity + pause on hover */
.protos-case .marquee__track img { transition: opacity .3s ease; }
.protos-case .block--partners:hover .marquee__track img { opacity: 1; }
.protos-case .block--partners:hover .marquee__track { animation-play-state: paused; }

/* annotated "Leistungen" link in the composed card */
.protos-case .annotated__link { cursor: pointer; transition: color .25s ease, border-color .25s ease; }
.protos-case .annotated__link:hover { color: #0f8ad0; border-color: #0f8ad0; }

/* next client: no hover effect */
.protos-case .next-client__link,
.protos-case .next-client__link:hover { color: var(--ink); transform: none; }

/* footer mail link */
.protos-case .site-footer__copy a { transition: color .25s ease; }

/* reduced motion: disable everything */
@media (prefers-reduced-motion: reduce) {
  .protos-case .hero__title,
.protos-case .hero__intro,
.protos-case .hero__banner,
.protos-case .hero__meta { animation: none; }
  .protos-case .reveal { opacity: 1; transform: none; transition: none; }
  .protos-case .marquee__track { animation: none; }
  .protos-case,
.protos-case *,
.protos-case *::before,
.protos-case *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .protos-case .hero__title { font-size: 56px; }
  .protos-case .hero__grid,
.protos-case .cover__grid,
.protos-case .compose__grid,
.protos-case .arch__grid,
.protos-case .result__grid { grid-template-columns: 1fr; gap: 36px; }
  .protos-case .cover__title { font-size: 44px; }
  .protos-case .section__title { font-size: 44px; }
  .protos-case .next-client__link { font-size: 44px; }
  .protos-case .site-footer__main { grid-template-columns: 1fr; }

  .protos-case .blocks { grid-template-columns: 1fr 1fr; }
  .protos-case .block--button { grid-column: 1 / 2; grid-row: auto; }
  .protos-case .block--form { grid-column: 2 / 3; grid-row: auto; }
  .protos-case .block--teaser { grid-column: 1 / 3; grid-row: auto; }
  .protos-case .block--header { grid-column: 1 / 3; grid-row: auto; }
  .protos-case .block--dropdown { display: none; }
  .protos-case .block--type { grid-column: 1 / 3; grid-row: auto; }
  .protos-case .block--partners { grid-column: 1 / 3; grid-row: auto; }

}

@media (max-width: 767px) {
  .protos-case .site-nav__links { display: none; }
  .protos-case .site-nav__inner { grid-template-columns: 1fr auto; }
  .protos-case .hero { padding-top: 40px; }
  .protos-case .hero__title { font-size: 42px; }
  .protos-case .hero__banner { height: 220px; border-radius: 0 0 18px 18px; }
  .protos-case .section { padding-top: 72px; padding-bottom: 64px; }
  .protos-case .cover { padding-bottom: 64px; }
  .protos-case .compose { padding-top: 56px; }
  .protos-case .section__title,
.protos-case .cover__title { font-size: 34px; }
  .protos-case .blocks { grid-template-columns: 1fr; }
  .protos-case .block--button,
.protos-case .block--form,
.protos-case .block--teaser,
.protos-case .block--header,
.protos-case .block--type,
.protos-case .block--partners { grid-column: 1 / 2; }
  .protos-case .hub-grid { grid-template-columns: 1fr; }
  .protos-case .mini-cards { grid-template-columns: 1fr; }
  .protos-case .responsive-card { padding: 22px 22px 30px; }
  .protos-case .next-client { padding-top: 70px; }
  .protos-case .next-client__link { font-size: 32px; }
  .protos-case .site-footer__title { font-size: 32px; }
  .protos-case .result__row { flex-direction: column; gap: 4px; }
}