/* Credits-Seite und Credits im Kundenportal (Claude, 23.10.2026). Baut auf den Tokens aus site.css auf (Farben, Radien, Schatten,
   Jost für Überschriften). Messing nur für Preise, den Regler und Auswahlzustände. Umschalter ohne JavaScript über :has();
   ohne :has() stehen alle Inhalte untereinander. Vergleichsregler und Videos: public/js/credits.js. */

/* ---------------------------------------------------------------- Einstieg */
.cr-hero { --focus: #f5d27a; position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 96px); color: var(--on-dark);
  background: radial-gradient(1100px 520px at 78% 8%, #262a2f 0%, var(--dark) 62%); }
.cr-hero-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .cr-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.cr-hero-text { min-width: 0; }
.cr-hero-title { font-size: clamp(2.25rem, 4.3vw, 3.6rem); font-weight: 380; letter-spacing: -.02em; line-height: 1.06; margin: 0 0 .45em; color: var(--on-dark); max-width: 15ch; }
.cr-hero-lead { margin: 0; }
.cr-facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cr-facts li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 10px; border-radius: 999px; font-size: .92rem;
  color: var(--on-dark); background: rgba(255, 255, 255, .05); border: 1px solid rgba(243, 239, 231, .14); }
.cr-facts .icon { color: var(--brass-on-dark); }
.cr-hero-actions { margin-bottom: 0; }
.cr-hero-visual { min-width: 0; }

/* ---------------------------------------------------------------- Vorher-Nachher-Regler
   Ohne JavaScript: beide Bilder untereinander. Mit JavaScript (.js aus boot.js, vor dem ersten Zeichnen): übereinander, der
   fotorealistische Teil rechts vom Griff. Griff = Daumen des range-Felds (Tastatur, Ziehen); Linie und Schnitt folgen --pos. */
.ba { margin: 0; color: var(--on-dark); }
.ba-title { margin: 0 0 14px; font-size: 1.12rem; font-weight: 450; color: var(--on-dark); letter-spacing: 0; }
/* Ohne JavaScript: Raster mit zwei Zeilen, Etikett jeweils über seinem Bild (gleiche Rasterfläche). Mit JavaScript liegen die
   Etiketten außerhalb der beschnittenen Ebenen und bleiben unabhängig von der Reglerstellung lesbar. */
.ba-stage { display: grid; gap: 10px; grid-template-areas: "render" "photoreal"; }
.ba-render { grid-area: render; }
.ba-photoreal { grid-area: photoreal; }
.ba-stage .ba-tag { position: relative; inset: auto; align-self: start; margin: 12px; }
.ba-stage .ba-tag-render { grid-area: render; justify-self: start; }
.ba-stage .ba-tag-photoreal { grid-area: photoreal; justify-self: end; }
.ba-layer { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--dark-3); }
.ba-layer img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* .ba-tag (Etiketten 3D-Render | Fotorealistisch) steht in site.css, weil auch der Teaser im Paketabschnitt sie nutzt */
.cr-tag { position: absolute; z-index: 1; border-radius: 999px; line-height: 1.3; pointer-events: none; white-space: nowrap; }
.ba-line, .ba-range { display: none; }
.js .ba-stage { --pos: 50; --edge: calc(22px + (100% - 44px) * var(--pos) / 100); position: relative; display: block; aspect-ratio: 1280 / 854;
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(243, 239, 231, .14); box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .9);
  background: var(--dark-3); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.js .ba-layer { position: absolute; inset: 0; border-radius: 0; }
.js .ba-stage .ba-tag { position: absolute; margin: 0; top: 12px; }
.js .ba-stage .ba-tag-render { left: 12px; }
.js .ba-stage .ba-tag-photoreal { right: 12px; }
.js .ba-photoreal { clip-path: inset(0 0 0 var(--edge)); }
.js .ba-stage.is-loading img { opacity: .7; transition: opacity .2s; }
.js .ba-line { display: block; position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--edge); width: 2px; margin-left: -1px;
  background: var(--brass); box-shadow: 0 0 0 1px rgba(14, 15, 17, .25); pointer-events: none; }
.js .ba-range { display: block; position: absolute; z-index: 3; left: 0; top: 50%; width: 100%; height: 44px; margin: -22px 0 0; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; cursor: ew-resize; }
.ba-range:focus-visible { outline: none; }
.ba-range::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.ba-range::-moz-range-track { height: 44px; background: transparent; border: 0; }
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; cursor: grab;
  border: 2px solid var(--brass); background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c140' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .8); }
.ba-range::-moz-range-thumb { pointer-events: auto; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; cursor: grab;
  border: 2px solid var(--brass); background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c140' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .8); }
.ba-range:active::-webkit-slider-thumb { cursor: grabbing; }
.ba-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--dark), 0 0 0 6px #f5d27a; }
.ba-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--dark), 0 0 0 6px #f5d27a; }
.ba-rooms { display: none; }
.js .ba-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ba-room { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 44px; padding: 5px 5px 7px; margin: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 500; color: var(--on-dark-2); background: rgba(255, 255, 255, .04); border: 1px solid rgba(243, 239, 231, .14);
  transition: border-color .2s, color .2s, background-color .2s; }
.ba-room img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; opacity: .78; transition: opacity .2s; }
.ba-room:hover { color: var(--on-dark); border-color: rgba(243, 239, 231, .32); }
.ba-room:hover img, .ba-room[aria-pressed="true"] img { opacity: 1; }
.ba-room[aria-pressed="true"] { color: var(--on-dark); border-color: var(--brass-on-dark); background: rgba(242, 193, 64, .1); }
.ba-room:focus-visible { outline: 3px solid #f5d27a; outline-offset: 2px; }
.ba-caption { margin: 12px 0 0; font-size: .92rem; color: var(--on-dark-2); max-width: 62ch; }
/* Schmale Bildschirme: Etikett „Fotorealistisch“ unten rechts (über dem eingebrannten Hinweis), damit sich beide nicht überlagern */
@media (max-width: 599px) { .ba .ba-tag { margin: 8px; padding: 3px 9px; font-size: .74rem; }
  .js .ba .ba-tag { margin: 0; top: 8px; } .js .ba .ba-tag-render { left: 8px; } .js .ba .ba-tag-photoreal { right: 8px; top: auto; bottom: 26px; } }

/* ---------------------------------------------------------------- Produktübersicht */
.cr-products { background: var(--bg); }
.cr-group + .cr-group { margin-top: clamp(40px, 5vw, 64px); }
.cr-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 18px; }
.cr-group-title { margin: 0; font-size: clamp(1.45rem, 2.2vw, 1.8rem); font-weight: 450; }
.cr-group-text { margin: 0; color: var(--text-2); }
/* Handy und Tablet: Reiter 3D-Render | Fotorealistisch (Aussehen wie der Zahlungsweise-Schalter der Pakete) */
.cr-tabs, .cr-plan-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 22px; padding: 4px; border: 0; border-radius: 999px; background: var(--dark);
  box-shadow: inset 0 0 0 1px rgba(243, 239, 231, .1); min-inline-size: 0; max-width: 100%; }
.cr-tabs input, .cr-plan-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.cr-tabs label, .cr-plan-switch label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; color: var(--on-dark-2);
  font-family: var(--font-display); font-weight: 500; cursor: pointer; transition: background-color .25s, color .25s; white-space: nowrap; }
.cr-tabs label:hover, .cr-plan-switch label:hover { color: var(--on-dark); }
.cr-tabs input:checked + label, .cr-plan-switch input:checked + label { background: var(--brass) var(--gold-grad); color: var(--on-brass); }
.cr-tabs input:focus-visible + label, .cr-plan-switch input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 900px) { .cr-tabs { display: none; } }
@media (max-width: 899px) {
  .cr-groups:has(.cr-tabs input[value="photoreal"]:checked) .cr-group[data-quality="render"],
  .cr-groups:has(.cr-tabs input[value="render"]:checked) .cr-group[data-quality="photoreal"] { display: none; }
  .cr-groups:has(.cr-tabs input:checked) .cr-group + .cr-group { margin-top: 0; }
}
@supports not selector(:has(*)) { .cr-tabs { display: none; } }

.cr-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .cr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.cr-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 600px) and (max-width: 899px) { .cr-card { flex-direction: row; } .cr-card .cr-stage { flex: 0 0 46%; aspect-ratio: auto; min-height: 280px; } }
/* Bühne: Bild als Abzug, Kurzvideo im angedeuteten Handyrahmen, Film als Bildschirm. Dunkel in hellem und dunklem Farbschema. */
.cr-stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; padding: 22px 22px 34px; isolation: isolate;
  background: radial-gradient(120% 90% at 72% 12%, #2b2f35 0%, var(--dark) 70%); }
.cr-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 100%; border-radius: 8px; box-shadow: 0 18px 32px -18px rgba(0, 0, 0, .9); background: var(--dark-3); }
.cr-screen { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0c0d0f; box-shadow: 0 18px 32px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(243, 239, 231, .1); }
/* Handyrahmen: Höhe aus der Bühne (oben 16 px, unten 32 px Rand), Breite aus 9:16 */
.cr-phone { position: absolute; top: 16px; bottom: 32px; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 16; padding: 5px; border-radius: 24px;
  background: #0b0c0e; border: 1px solid rgba(243, 239, 231, .2); box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .95); }
.cr-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0c0d0f; }
.cr-screen .cr-video { border-radius: 0; }
.cr-phone .cr-video { border-radius: 19px; }
.cr-tag { left: 12px; bottom: 9px; padding: 2px 9px; font-size: .72rem; font-weight: 500; color: rgba(243, 239, 231, .88); background: rgba(22, 24, 27, .7); }
.cr-play { position: absolute; z-index: 2; right: 10px; bottom: 6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #f3efe7; background: rgba(22, 24, 27, .78); border: 1px solid rgba(243, 239, 231, .32); transition: background-color .2s, border-color .2s; }
.cr-play:hover { background: rgba(22, 24, 27, .95); border-color: rgba(243, 239, 231, .6); }
.cr-play:focus-visible { outline: 3px solid #f5d27a; outline-offset: 2px; }
.cr-play .cr-play-icon { fill: currentColor; stroke: none; margin-left: 2px; }
.cr-play .cr-pause-icon, .cr-play[data-state="playing"] .cr-play-icon { display: none; }
.cr-play[data-state="playing"] .cr-pause-icon { display: block; }
.cr-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 20px 22px 22px; }
.cr-title { margin: 0 0 4px; font-size: 1.45rem; font-weight: 450; }
.cr-text { margin: 0 0 14px; color: var(--text-2); font-size: .97rem; }
.cr-chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cr-chips li { padding: 3px 10px; border-radius: 999px; font-size: .82rem; line-height: 1.45; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); }
.cr-chips .cr-chip-plan { color: var(--brass-text); background: var(--brass-tint); border-color: transparent; font-weight: 600; }
/* Film: 30 Sekunden | 60 Sekunden, der Preis wechselt mit (ohne JavaScript über :has()) */
.cr-len { display: inline-flex; gap: 2px; margin: 0 0 14px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); align-self: flex-start; min-inline-size: 0; }
.cr-len input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.cr-len label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: .92rem; font-weight: 600; color: var(--text-2); cursor: pointer; transition: background-color .2s, color .2s; }
.cr-len input:checked + label { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(20, 18, 14, .12), 0 0 0 1px var(--line-strong); }
.cr-len input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.cr-card:has(.cr-len) [data-len="b"],
.cr-card:has(.cr-len input[value="b"]:checked) [data-len="a"] { display: none; }
.cr-card:has(.cr-len input[value="b"]:checked) [data-len="b"] { display: block; }
@supports selector(:has(*)) { .cr-len-tag { display: none; } }
@supports not selector(:has(*)) { .cr-len { display: none; } .cr-price + .cr-price { margin-top: 14px; } }
.cr-prices { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.cr-price p { margin: 0; }
.cr-len-tag { font-size: .85rem; font-weight: 600; color: var(--text-2); }
.cr-credits { font-family: var(--font-display); font-size: 1.95rem; font-weight: 450; line-height: 1.1; letter-spacing: -.01em; color: var(--brass-text); font-variant-numeric: tabular-nums; }
.cr-money { margin-top: 2px !important; font-size: .86rem; color: var(--text-2); }
.cr-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px !important; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: .82rem; font-weight: 600; line-height: 1.45; }
.cr-status.is-on { color: var(--ok); background: var(--ok-bg); }
.cr-status.is-soon { color: var(--text-2); background: var(--surface-3); }

/* ---------------------------------------------------------------- Paketrechner */
.cr-calc { background: var(--surface-2); }
.cr-plan-switch label { padding: 0 16px; }
@media (max-width: 459px) { .cr-plan-switch { gap: 2px; padding: 3px; } .cr-plan-switch label { padding: 0 11px; font-size: .94rem; } }
.cr-mix .cr-mix-panel { display: none; }
.cr-mix:has(.cr-plan-switch input:nth-of-type(1):checked) .cr-mix-panel:nth-child(1),
.cr-mix:has(.cr-plan-switch input:nth-of-type(2):checked) .cr-mix-panel:nth-child(2),
.cr-mix:has(.cr-plan-switch input:nth-of-type(3):checked) .cr-mix-panel:nth-child(3),
.cr-mix:has(.cr-plan-switch input:nth-of-type(4):checked) .cr-mix-panel:nth-child(4),
.cr-mix:has(.cr-plan-switch input:nth-of-type(5):checked) .cr-mix-panel:nth-child(5),
.cr-mix:has(.cr-plan-switch input:nth-of-type(6):checked) .cr-mix-panel:nth-child(6) { display: block; }
@supports not selector(:has(*)) { .cr-mix .cr-mix-panel { display: block; } .cr-mix .cr-mix-panel + .cr-mix-panel { margin-top: 40px; } .cr-plan-switch { display: none; } }
.cr-mix-intro { margin: 2px 0 18px; font-family: var(--font-display); font-size: clamp(1.12rem, 1.6vw, 1.3rem); font-weight: 450; }
.cr-mix-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .cr-mix-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.cr-mix-card { padding: 20px 22px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cr-mix-title { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 1.2rem; font-weight: 500; }
.cr-mix-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cr-mix-rows li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.cr-mix-rows .icon { flex: none; margin-top: 2px; color: var(--brass-text); }
.cr-n { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-mix-note { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; color: var(--text-2); }
.cr-mix-note .icon { color: var(--brass-text); }
.cr-mix-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.cr-mix-foot p { margin: 0; color: var(--text-2); max-width: 48ch; }
.cr-mix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

/* ---------------------------------------------------------------- So einfach, fair, Preise, Abschluss */
.cr-fair { background: radial-gradient(1100px 480px at 15% 0%, #23262b 0%, var(--dark) 62%); }
.cr-fair-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .cr-fair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cr-fair-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.cr-fair-item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--radius); border: 1px solid rgba(243, 239, 231, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); }
.cr-fair-item p { margin: 0; padding-top: 9px; color: var(--on-dark); }
.cr-fair-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--brass-on-dark); border: 1px solid rgba(242, 193, 64, .45); background: rgba(242, 193, 64, .08); }

.cr-table-section { background: var(--surface-2); }
.cr-table-wrap { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.cr-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cr-table th, .cr-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.cr-table thead th { border-top: 0; font-size: .85rem; font-weight: 600; color: var(--text-2); padding-block: 14px 12px; }
.cr-table tbody th[scope="row"] { font-weight: 500; }
.cr-table-group th { padding-block: 11px; background: var(--surface-2); font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; color: var(--text); }
.cr-table .cr-col-num { text-align: right; white-space: nowrap; }
.cr-col-format { color: var(--text-2); }
.cr-cell-name { display: block; }
.cr-cell-format { display: none; margin-top: 2px; font-size: .86rem; font-weight: 400; color: var(--text-2); }
.cr-soon { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--text-2); background: var(--surface-3); }
.cr-cell-credits { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--brass-text); }
.cr-cell-net { display: block; font-weight: 600; }
.cr-cell-gross { display: block; font-size: .8rem; color: var(--text-2); }
.cr-table-note { margin: 12px 0 0; font-size: .9rem; }
@media (max-width: 699px) {
  .cr-table .cr-col-format { display: none; }
  .cr-cell-format { display: block; }
  .cr-table th, .cr-table td { padding: 12px 12px; }
  .cr-table thead th { font-size: .8rem; }
  .cr-cell-gross { white-space: nowrap; }
}

.cr-cta .cta-inner { gap: 22px 40px; }
.cr-cta .section-title { margin: 0; max-width: 20ch; }
.cr-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 1040px) { .cr-cta-actions { flex: none; flex-wrap: nowrap; } }
.cr-cta-actions .btn .icon { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- Kundenportal: eigenes Paket und kompakte Übersicht */
.cr-own .panel-title { margin-bottom: 10px; }
.cr-own-left { display: flex; gap: 10px; align-items: center; margin: 0 0 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--brass-tint); font-weight: 600; }
.cr-own-left .icon { flex: none; color: var(--brass-text); }
.cr-own .cr-mix-intro { margin-top: 16px; font-size: 1.05rem; }
.cr-own .cr-mix-card { padding: 16px 18px 18px; }
.cr-own .cr-mix-title { font-size: 1.08rem; }
.cr-own .cr-mix-rows { font-size: .95rem; }
.cr-own .cr-n { font-size: 1.08rem; }
.cr-plists { display: grid; gap: 22px; margin-top: 6px; }
@media (min-width: 960px) { .cr-plists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
.cr-plist-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 500; }
.cr-plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cr-pitem { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cr-pthumb { display: grid; place-items: center; width: 64px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--dark); }
.cr-pthumb img { width: 100%; height: 100%; object-fit: cover; }
.cr-pthumb .cr-pthumb-portrait-img, .cr-pthumb-portrait img { width: 25px; height: 44px; aspect-ratio: auto; }
.cr-pinfo { min-width: 0; }
.cr-pname { display: block; font-weight: 600; }
.cr-pmeta { display: block; font-size: .84rem; color: var(--text-2); }
.cr-pinfo .cr-status { margin-top: 6px; padding-block: 1px; font-size: .78rem; }
.cr-pprice { text-align: right; white-space: nowrap; }
.cr-pprice strong { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--brass-text); }
.cr-pprice > span, .cr-pprice > small { display: block; font-size: .8rem; color: var(--text-2); }
.cr-pprice strong small { display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 400; color: var(--text-2); }
@media (max-width: 519px) {
  .cr-pitem { grid-template-columns: 56px minmax(0, 1fr); align-items: start; row-gap: 4px; }
  .cr-pthumb { width: 56px; height: 40px; }
  .cr-pprice { grid-column: 2; text-align: left; white-space: normal; }
}
.cr-pinfo .cr-status { white-space: nowrap; }
.cr-portal-note { margin: 12px 0 0; font-size: .88rem; }
.cr-portal-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) { .ba-room, .ba-room img, .cr-play, .cr-len label, .cr-tabs label, .cr-plan-switch label { transition: none; } }
@media print { .ba-range, .ba-line, .cr-play, .cr-tabs, .cr-plan-switch { display: none !important; } .cr-mix .cr-mix-panel, .cr-group { display: block !important; } }
/* Bestellbar: Chip führt ins Studio (Link erbt die Chipfarbe, Unterstreichung erst beim Zeigen) */
.cr-status.is-on a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; min-height: 24px; }
.cr-status.is-on a:hover, .cr-status.is-on a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }