/* Sammelseiten: Source Collections (hell, kleiner Rang als die Libraries) und Freebies */
.pg-lead { max-width: 40em; margin-top: 26px; font-size: 16px; line-height: 1.7; color: var(--fg-2); }

/* ---------- Source Collections: helle Streifen, die in der Bildmitte aufklappen (dunkel, mit Artwork) – wie die SC-Karten der
   Startseite, nur senkrecht. Normaler Seitenfluss, nichts haelt die Seite an; offen bleibt offen (Zuklappen oberhalb liesse den
   Inhalt springen). Aufklappen per grid-template-rows auf einem Element, alles andere per transform/opacity. ---------- */
.scv { --h: 86px; --e: cubic-bezier(0.22, 0.9, 0.24, 1); position: relative; padding: clamp(30px, 4vw, 56px) 0 clamp(80px, 9vw, 130px); background: #e9e6df; color: #121214; isolation: isolate; }
.scv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 30% at 80% 0%, rgba(255, 255, 255, 0.8), transparent 70%), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025) 0 1px, transparent 1px 4px); }
.scv-list { display: grid; gap: 12px; }
.scv-c { --pc: 20, 20, 20; --acc: var(--pc); position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; background: #fbfaf7; color: #121214; scroll-margin-top: calc(var(--head-h) + 16px);
  box-shadow: 0 1px 0 rgba(18, 18, 20, 0.06), 0 10px 30px -18px rgba(18, 18, 20, 0.35); transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease; }
.scv-c.on { background: #0d0d0f; color: #f3f1ec; box-shadow: 0 40px 90px -40px rgba(var(--pc), 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
/* Motiv ueber die ganze offene Karte, rechts; links dunkel fuer den Text */
.scv-bg { position: absolute; inset: 0 0 0 32%; z-index: -2; width: 68%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 0.6s ease, transform 1.4s var(--e); }
.scv-c::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
  background: linear-gradient(90deg, #0d0d0f 32%, rgba(13, 13, 15, 0.9) 44%, rgba(13, 13, 15, 0.35) 72%, rgba(13, 13, 15, 0.15)), radial-gradient(40% 60% at 78% 60%, rgba(var(--pc), 0.35), transparent 70%), linear-gradient(0deg, rgba(13, 13, 15, 0.7), transparent 30%); }
.scv-c.on .scv-bg { opacity: 0.9; transform: none; }
.scv-c.on::before { opacity: 1; }
/* Streifen */
.scv-bar { position: relative; z-index: 2; height: var(--h); display: grid; grid-template-columns: calc(var(--h) - 24px) minmax(0, 1fr) auto 34px; align-items: center; gap: 18px; padding: 0 18px 0 12px; cursor: pointer; }
.scv-th { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: calc(var(--h) - 24px); }
.scv-th img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(18, 18, 20, 0.35)); transition: opacity 0.35s, transform 0.5s var(--e); }
.scv-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--pc)); color: #050505; opacity: 0; transform: scale(0.6); pointer-events: none; transition: opacity 0.35s, transform 0.5s var(--e); box-shadow: 0 0 0 6px rgba(var(--pc), 0.18), 0 0 30px -4px rgba(var(--pc), 0.7); }
.scv-play svg { width: 16px; height: 16px; margin-left: 2px; }
.scv-c.playing .scv-play svg { margin: 0; }
.scv-c.on .scv-play { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.2s; }
.scv-c.on .scv-th:has(.scv-play) img { opacity: 0; transform: scale(0.7); }
.scv-hd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; text-align: left; color: inherit; }
.scv-k { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b6860; white-space: nowrap; }
.scv-k em { font-style: normal; color: rgb(var(--red)); }
.scv-c.on .scv-k { color: rgb(var(--pc)); }
.scv-n { font: 400 clamp(26px, 2.6vw, 38px)/0.95 var(--disp); font-size: calc(clamp(26px, 2.6vw, 38px) * var(--fs, 1)); text-transform: uppercase; letter-spacing: 0.005em; white-space: nowrap; }
.scv-bar .price b { font-size: 26px; }
.scv-bar .price s { color: #6b6860; text-decoration-color: rgba(18, 18, 20, 0.65); }   /* heller Grund (zu) */
.scv-c.on .scv-bar .price s { color: #a9a59d; text-decoration-color: rgba(255, 255, 255, 0.7); }
.scv-c.on .scv-bar .price b { color: #fff; }
.scv-x { position: relative; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 18, 20, 0.2); transition: transform 0.5s var(--e), box-shadow 0.3s; }
.scv-x::before, .scv-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: currentColor; transition: transform 0.5s var(--e); }
.scv-x::after { transform: rotate(90deg); }
.scv-c.on .scv-x { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); transform: rotate(180deg); }
.scv-c.on .scv-x::after { transform: rotate(180deg); }
.scv-c:not(.on):hover { background: #fff; }
.scv-c:not(.on):hover .scv-th img { transform: translateY(-2px) scale(1.04); }
/* Aufklappen: Hoehe 0 -> Inhalt (ein Element), Inhalt blendet versetzt ein */
.scv-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.75s var(--e); }
.scv-c.on .scv-fold { grid-template-rows: 1fr; }
.scv-body { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(20px, 3vw, 50px); padding: 0 clamp(22px, 3vw, 40px); }
.scv-c.on .scv-body { padding-bottom: 14px; }   /* Platz fuer das Leuchten von "Add to cart" – sonst schneidet overflow: hidden es ab */
.scv-body > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.4s ease, transform 0.6s var(--e); }
.scv-c.on .scv-body > * { opacity: 1; transform: none; transition: opacity 0.6s ease 0.2s, transform 0.9s var(--e) 0.15s; }
/* beim Scrollen aufgeklappt (core.js .quick): Hoehe sofort, Inhalt kurz und gemeinsam */
.scv-c.quick .scv-fold { transition: none; }
.scv-c.quick.on .scv-body > * { transition: opacity 0.35s ease 0.04s, transform 0.5s var(--e) 0.04s; }
.scv-c.quick.on .scv-bg { transition: opacity 0.4s ease, transform 0.9s var(--e); }
.scv-c.quick::before { transition-duration: 0.4s; }
.scv-art { grid-column: 2; grid-row: 1; position: relative; min-height: clamp(260px, 26vw, 400px); margin: 0 0 clamp(22px, 2.6vw, 34px); }
.scv-box { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.75)); }
.scv-txt { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 14px; padding: 6px 0 clamp(22px, 2.6vw, 34px); }
.scv-t { max-width: 40em; font-size: 15px; line-height: 1.65; color: rgba(243, 241, 236, 0.78); }
.scv-s { display: none; }
.scv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.scv-tags li { padding: 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font: 600 10px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243, 241, 236, 0.72); }
.scv-spec { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: auto 0 0; padding-top: 10px; }
.scv-spec dt { order: 2; font: 600 9px/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: #8d8a83; margin-top: 7px; }
.scv-spec div { display: flex; flex-direction: column; }
.scv-spec dd { margin: 0; font: 400 34px/0.9 var(--disp); background: linear-gradient(180deg, #fff 20%, rgb(var(--pc)) 140%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scv-buy { display: flex; flex-wrap: wrap; gap: 10px; }
.scv-buy .btn--line { border-color: rgba(255, 255, 255, 0.3); color: #f3f1ec; }
.scv-buy .btn--line:hover { background: #f3f1ec; color: #121214; }
@media (max-width: 1100px) { .scv-body { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); } }
@media (max-width: 720px) {
  .scv { --h: 70px; }
  .scv-list { gap: 10px; }
  .scv-c { border-radius: 16px; }
  .scv-bar { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 0 14px 0 10px; }
  .scv-th { height: 48px; }
  .scv-x { display: none; }
  .scv-n { font-size: calc(24px * var(--fs, 1)); }
  .scv-bar .price b { font-size: 22px; }
  .scv-k span { display: none; }
  .scv-play { width: 40px; height: 40px; }
  .scv-body { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0 16px; }
  .scv-art { grid-column: 1; grid-row: 1; min-height: 0; height: 200px; margin: 4px 0 8px; }
  .scv-txt { grid-column: 1; grid-row: 2; gap: 12px; padding-top: 0; padding-bottom: 18px; }
  /* Leuchten von "Add to cart" passt in die 16 px Rand der Karte (overflow: hidden) – auch bei Maus darauf und gedrueckt */
  .scv-buy .btn--acc, .scv-buy .btn--acc:hover, .scv-buy .btn--acc:active { box-shadow: 0 0 0 1px rgb(var(--acc)), 0 8px 20px -8px rgba(var(--acc), 0.7); }
  .scv-bg { inset: 0 0 auto; width: 100%; height: 340px; }
  .scv-c::before { background: linear-gradient(180deg, rgba(13, 13, 15, 0.7) 0, rgba(13, 13, 15, 0.15) 70px, rgba(13, 13, 15, 0.25) 160px, #0d0d0f 330px), radial-gradient(60% 160px at 50% 160px, rgba(var(--pc), 0.35), transparent 70%); }
  .scv-t { font-size: 14px; line-height: 1.6; }
  .scv-spec { gap: 8px 22px; }
  .scv-spec dd { font-size: 28px; }
  .scv-buy .btn { flex: 1; padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 420px) { .scv-buy .scv-tr { flex: 0 0 52px; padding: 0; gap: 0; } .scv-tr span { display: none; } }
.btn--line { border: 1px solid rgba(18, 18, 20, 0.35); color: #121214; }
.btn--line:hover { background: #121214; color: #f3f1ec; }
/* Freebie-Zeilen teilen sich Kennung, Text und Stichworte */
.scl-k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b6860; }
.scl-k em { font-style: normal; color: rgb(var(--red)); }
.scl-t { max-width: 44em; font-size: 15px; line-height: 1.7; color: #3d3b37; }
.scl-t + .scl-t { margin-top: 10px; }
.scl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.scl-tags li { padding: 7px 11px; border: 1px solid rgba(18, 18, 20, 0.2); border-radius: 999px; font: 600 10.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: #3d3b37; }

/* ---------- Freebies ---------- */
.fzl { position: relative; padding: clamp(20px, 3vw, 40px) 0 clamp(80px, 9vw, 130px); }
.fz { --pc: var(--red); --acc: var(--pc); position: relative; display: grid; grid-template-columns: clamp(240px, 26vw, 340px) minmax(0, 1fr) minmax(300px, 400px); gap: clamp(24px, 3.5vw, 54px); align-items: center;
  padding: clamp(30px, 3.5vw, 50px); margin-bottom: 24px; border: 1px solid rgba(var(--pc), 0.3); border-radius: 22px; overflow: hidden; isolation: isolate; background: color-mix(in srgb, #0c0c0e 92%, transparent); }
.fz-art { position: relative; aspect-ratio: 1; }
.fz-bg { position: absolute; inset: -40%; z-index: -2; width: 180%; height: 180%; max-width: none; object-fit: cover; opacity: 0.22; filter: blur(2px) saturate(0.9); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.fz-box { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.85)); animation: bob 6s ease-in-out infinite; }
.fz:nth-child(2n) .fz-box { animation-delay: -3s; }
.fz h2 { margin: 10px 0 14px; font: 400 clamp(40px, 4.2vw, 64px)/0.92 var(--disp); text-transform: uppercase; }
.fz .scl-k { color: rgb(var(--pc)); }
.fz .scl-t { color: var(--fg-2); }
.fz .scl-tags li { border-color: var(--line-2); color: var(--fg-2); }
.fz-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 18px 0 0; padding: 0; list-style: none; }
.fz-facts b { display: block; font: 600 22px/1 var(--mono); }
.fz-facts span { font: 600 10px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.fz-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fz-get { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line-2); border-radius: 18px; background: rgba(0, 0, 0, 0.45); }
.fz-get .ff-h img { display: none; }
@media (max-width: 1100px) {
  .fz { grid-template-columns: clamp(200px, 30vw, 300px) minmax(0, 1fr); }
  .fz-get { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .fz { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .fz-art { max-width: 320px; width: 100%; margin: 0 auto; }
}

/* ---------- Rechtsseiten ---------- */
.lg { padding-bottom: clamp(80px, 9vw, 130px); }
.lg-t { max-width: 46em; font-size: 15.5px; line-height: 1.75; color: var(--fg-2); }
.lg-t h2 { margin: 2.2em 0 0.7em; font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--disp); text-transform: uppercase; color: var(--fg); }
.lg-t h2:first-child { margin-top: 0; }
.lg-t p { margin-top: 0.9em; }
.lg-t p.empty { display: none; }
.lg-t mark.todo { padding: 1px 6px; border-radius: 4px; background: rgba(var(--red), 0.18); color: #ffb3aa; font: 500 0.92em var(--mono); }

/* ---------- Team ---------- */
.tml { padding-bottom: clamp(80px, 9vw, 130px); }
.tm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.tm { position: relative; }
.tm-ph { position: relative; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: 18px; background: radial-gradient(80% 70% at 50% 30%, rgba(var(--red), 0.22), transparent 70%), linear-gradient(180deg, #17171b, #0b0b0d); box-shadow: inset 0 0 0 1px var(--line); }
.tm-ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(0.9); transform: scale(1.02); transition: filter 0.6s, transform 0.9s var(--ease-out); }
.tm:hover .tm-ph img { filter: none; transform: scale(1.06); }
.tm-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(64px, 8vw, 120px)/1 var(--disp); letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.35); }
.tm-t { margin-top: 16px; padding-right: 54px; }
.tm-t h2 { font: 400 clamp(26px, 2.2vw, 34px)/1 var(--disp); text-transform: uppercase; }
.tm-r { margin-top: 8px; font: 500 11.5px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.tm-li { position: absolute; right: 0; top: calc(100% - 44px); width: 42px; height: 42px; }
.tm-li svg { width: 17px; height: 17px; }
@media (max-width: 980px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tm-grid { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin: 0 auto; } }

.tm-wave { position: absolute; left: 12%; right: 12%; bottom: 16%; height: 46px; display: flex; align-items: center; gap: 3%; }
.tm-wave i { flex: 1; height: calc(20% + 70% * var(--h, 0.5)); border-radius: 2px; background: rgba(var(--red), 0.55); animation: tm-eq 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -97ms); }
.tm-wave i:nth-child(3n) { --h: 0.9; } .tm-wave i:nth-child(4n+1) { --h: 0.3; } .tm-wave i:nth-child(5n+2) { --h: 0.7; }
@keyframes tm-eq { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.tm-b { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.tm-draft { margin-left: 6px; padding: 2px 6px; border-radius: 4px; border: 1px dashed var(--line-2); font-style: normal; font-size: 9.5px; letter-spacing: 0.12em; color: var(--mute); }
/* Arbeitsweise */
.tw { padding-bottom: clamp(70px, 8vw, 120px); }
.tw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(30px, 4vw, 48px); }
.tw-c { position: relative; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(170deg, rgba(255, 255, 255, 0.035), transparent 60%); }
.tw-n { font: 500 11px var(--mono); color: rgb(var(--red)); letter-spacing: 0.1em; }
.tw-c h3 { margin: 14px 0 10px; font: 400 clamp(28px, 2.4vw, 36px)/1 var(--disp); text-transform: uppercase; }
.tw-c p { font-size: 15px; line-height: 1.7; color: var(--fg-2); }
.tw-mics { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.tw-mics > span { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.tw-mics ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tw-mics li { padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 999px; font: 600 10.5px/1 var(--body); letter-spacing: 0.08em; color: var(--fg-2); }
/* Zeitleiste */
.tt { padding-bottom: clamp(70px, 8vw, 120px); }
.tt-y { margin: clamp(26px, 3.5vw, 44px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tt-y li { display: grid; grid-template-columns: clamp(90px, 10vw, 150px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tt-yr { font: 400 clamp(34px, 3.4vw, 52px)/1 var(--disp); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); }
.tt-p { display: flex; flex-wrap: wrap; gap: 12px; }
.tt-p a { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 12px; font: 600 12px/1.2 var(--body); color: var(--fg-2); transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.tt-p a:hover { border-color: rgba(var(--pc), 0.6); color: #fff; background: rgba(var(--pc), 0.08); }
.tt-p img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
/* Kontakt */
.tc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(80px, 9vw, 130px); padding: clamp(28px, 3.4vw, 48px); border: 1px solid rgba(var(--red), 0.35); border-radius: 22px; background: radial-gradient(70% 120% at 0% 50%, rgba(var(--red), 0.18), transparent 70%); }
.tc h2 { max-width: 18em; margin-top: 12px; font: 400 clamp(28px, 3vw, 44px)/1 var(--disp); text-transform: uppercase; }
.tc-a { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .tw-grid { grid-template-columns: minmax(0, 1fr); } .tt-y li { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
/* Freebies-Seite: ein Formular fuer alle Packs oben, Zeilen ohne eigenes Formular (zwei Spalten) */
.fz-all { max-width: 640px; margin: 0 0 clamp(28px, 4vw, 48px); padding: clamp(22px, 3vw, 32px); border: 1px solid rgba(var(--red), 0.35); border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, rgba(var(--red), 0.14), transparent 60%), #0e0e10; }
.fz-all .nl-h { font: 400 clamp(26px, 2.6vw, 34px)/1 var(--disp); text-transform: uppercase; color: #fff; letter-spacing: 0.01em; }
.fz-all .ff-t { margin: 10px 0 16px; color: var(--fg-2); font-size: 14px; }
.fz-all .ff-news { margin-top: 12px; }
.fz:not(:has(.fz-get)) { grid-template-columns: clamp(240px, 26vw, 340px) minmax(0, 1fr); }
@media (max-width: 900px) { .fz:not(:has(.fz-get)) { grid-template-columns: minmax(0, 1fr); } }

.nf-a { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px !important; }   /* 404-Seite: Wege zurueck */