/* =====================================================================================
   v53 · Designbeispiele – sechs freie Konzepte in zwei Gruppen
   Gruppe A liegt in der Nacht der Startwelt (Bühne, ausdrucksstark), Gruppe B im Tageslicht (ruhig, reduziert).
   Ansichten wechseln nur auf Bedienung: Der Bildschirm wird beim Smartphone schmal, sonst blendet das Bild über.
   ===================================================================================== */
.dx-head, .dx-g--a { --d-bg: #0B110E; --d-ink: #F3EFE6; --d-ink-2: rgba(243, 239, 230, .76); --d-gold: #D5AE60; --d-gold-2: #E9CE8F; --d-line: rgba(233, 206, 143, .2); background: var(--d-bg); color: var(--d-ink); }
.dx-head :focus-visible, .dx-g--a :focus-visible { outline-color: var(--d-gold-2); }

/* ---------- Einstieg ---------- */
.dx-head { position: relative; isolation: isolate; padding-block: clamp(30px, 4vw, 64px) clamp(30px, 3.6vw, 56px); overflow: hidden; }
.dx-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 90% at 84% 0%, rgba(213, 174, 96, .16), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 64px); }
.dx-head-in { display: grid; gap: 28px clamp(32px, 5vw, 80px); align-items: end; }
@media (min-width: 1000px) { .dx-head-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.dx-head-copy { display: grid; gap: 16px; justify-items: start; }
.dx-head .label { color: var(--d-gold); }
.dx-head .label::before { background: var(--d-gold); }
.dx-h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; max-width: 12em; }
.dx-lead { color: var(--d-ink-2); max-width: 36em; }
.dx-head .btn--gold, .dx-g--a .btn--gold { --b-bg: var(--d-gold); --b-fg: #10160F; }
.dx-map { display: grid; gap: 14px; }
.dx-map-g { display: grid; gap: 6px; padding: 14px 16px 10px; border: 1px solid var(--d-line); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.dx-map-g--b { background: rgba(243, 239, 230, .06); }
.dx-map-h { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--d-ink); font-family: var(--f-display); font-style: italic; font-size: 1.2rem; text-decoration: none; }
.dx-map-h b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--d-gold); color: #10160F; font: 600 .78rem/1 var(--f-mono); font-style: normal; }
.dx-map-g--b .dx-map-h b { background: var(--d-ink); }
.dx-map-h:hover { color: var(--d-gold-2); }
.dx-map ol { list-style: none; display: grid; }
.dx-map li a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; min-height: 40px; padding: 8px 2px; border-top: 1px solid var(--d-line); color: var(--d-ink); text-decoration: none; font-size: .95rem; }
.dx-map li a:hover .dx-map-n { text-decoration: underline; text-underline-offset: .2em; }
.dx-map-no { font: 500 .78rem/1 var(--f-mono); color: var(--d-gold-2); }
.dx-map-f { font-size: .8125rem; color: var(--d-ink-2); text-align: right; }
@media (max-width: 420px) { .dx-map-f { display: none; } .dx-map li a { grid-template-columns: 34px minmax(0, 1fr); } }
.dx-map-fine { font-size: .8125rem; color: var(--d-ink-2); }

/* ---------- Gruppen ---------- */
.dx-g { padding-block: clamp(56px, 6vw, 96px); }
.dx-g--a { border-top: 1px solid rgba(233, 206, 143, .12); }
.dx-g--b { background: var(--bg-2); }
.dx-g-head { display: grid; gap: 12px 48px; align-items: end; margin-bottom: 24px; }
@media (min-width: 1000px) { .dx-g-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.dx-g-head > div { display: grid; gap: 8px; }
.dx-tag { font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.dx-tag b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 600; }
.dx-g--a .dx-tag { color: var(--d-gold-2); }
.dx-g--a .dx-tag b { background: var(--d-gold); color: #10160F; }
.dx-h2 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem); line-height: 1.04; letter-spacing: -0.012em; }
.dx-g-text { color: var(--ink-2); font-size: 1.0625rem; max-width: 34em; }
.dx-g--a .dx-g-text { color: var(--d-ink-2); }
.dx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 22px; }
.dx-bar-l { font-size: .875rem; color: var(--ink-2); }
.dx-g--a .dx-bar-l { color: var(--d-ink-2); }
.dx-aspects { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); }
.dx-g--a .dx-aspects { border-color: var(--d-line); background: rgba(255, 255, 255, .04); }
.dx-aspects button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-weight: 600; font-size: .9rem; }
.dx-g--a .dx-aspects button { color: var(--d-ink); }
.dx-aspects button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.dx-g--a .dx-aspects button[aria-checked="true"] { background: var(--d-gold); color: #10160F; }

/* ---------- Karten ---------- */
.dx-cards { display: grid; gap: 28px clamp(18px, 2vw, 28px); }
@media (min-width: 700px) { .dx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dx-card { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; min-width: 0; scroll-margin-top: 24px; }
.dx-prev { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #151B17; text-decoration: none; container-type: inline-size; }
.dx-card--a .dx-prev { box-shadow: 0 28px 50px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(233, 206, 143, .16); background: radial-gradient(80% 90% at 50% 100%, rgba(213, 174, 96, .18), #121813 70%); }
.dx-card--b .dx-prev { background: var(--surface); box-shadow: 0 20px 40px -32px rgba(20, 26, 23, .55), 0 0 0 1px var(--rule); }
.dx-screen { position: absolute; top: 0; bottom: 0; left: 50%; width: 100%; transform: translateX(-50%); overflow: hidden; border-radius: 0; transition: width .55s cubic-bezier(.2, .8, .3, 1), top .55s cubic-bezier(.2, .8, .3, 1), bottom .55s cubic-bezier(.2, .8, .3, 1), border-radius .55s; }
.dx-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .45s ease; }
.dx-v--x { object-fit: contain; object-position: 50% 50%; background: var(--surface); }
.dx-card[data-aspect="d"] .dx-v--d, .dx-card[data-aspect="a"] .dx-v--a, .dx-card[data-aspect="u"] .dx-v--u, .dx-card[data-aspect="m"] .dx-v--m, .dx-card[data-aspect="x"] .dx-v--x { opacity: 1; }
.dx-card[data-aspect="m"] .dx-screen { top: 5%; bottom: 5%; width: 27%; border-radius: 4.4cqw; box-shadow: 0 0 0 1.2cqw #0B0F0D, 0 18px 40px -10px rgba(0, 0, 0, .6); }
.dx-card--b[data-aspect="m"] .dx-screen { box-shadow: 0 0 0 1.2cqw #1B1F1D, 0 18px 40px -16px rgba(20, 26, 23, .45); }
.dx-view-l { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(11, 17, 14, .78); color: #F3EFE6; font: 500 .72rem/1.5 var(--f-mono); letter-spacing: .04em; pointer-events: none; }
.dx-card--b .dx-view-l { background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.dx-body { display: grid; gap: 10px; align-content: start; }
.dx-k { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--ink-2); }
.dx-g--a .dx-k { color: var(--d-ink-2); }
.dx-no { display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 600 .75rem/1 var(--f-mono); }
.dx-g--a .dx-no { background: var(--d-gold); color: #10160F; }
.dx-t { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.85rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.dx-t a { color: inherit; text-decoration: none; }
.dx-t a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.dx-idea { font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: var(--gold-text); }
.dx-g--a .dx-idea { color: var(--d-gold-2); }
.dx-line { color: var(--ink-2); font-size: .98rem; }
.dx-g--a .dx-line { color: var(--d-ink-2); }
.dx-facts { display: grid; margin: 4px 0 0; border-top: 1px solid var(--rule); font-size: .875rem; }
.dx-g--a .dx-facts { border-top-color: var(--d-line); }
.dx-facts div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.dx-g--a .dx-facts div { border-bottom-color: var(--d-line); }
.dx-facts dt { font: 500 .72rem/1.6 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.dx-g--a .dx-facts dt { color: var(--d-ink-2); }
.dx-facts dd { margin: 0; }
/* Smartphone: Kurzangaben als 2 × 2-Raster statt vier Zeilen – die Übersicht bleibt kompakt */
@media (max-width: 699px) {
  .dx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .dx-facts div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 0; }
}
.dx-pal { list-style: none; display: flex; gap: 6px; padding: 2px 0; }
.dx-pal li { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .35); }
.dx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.dx-card.has-note .dx-prev { box-shadow: 0 0 0 2px var(--gold); }

/* „Was gefällt Ihnen daran?“ */
.lk-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; color: var(--ink); font-weight: 600; font-size: .9375rem; }
.lk-btn:hover { border-color: var(--ink); }
.lk-btn[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dx-g--a .lk-btn { color: var(--d-ink); border-color: rgba(243, 239, 230, .4); }
.dx-g--a .lk-btn:hover, .dx-g--a .lk-btn[aria-expanded="true"] { border-color: var(--d-gold-2); box-shadow: none; }
.lk-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #10160F; font: 600 .75rem/1 var(--f-mono); }
.lk { display: grid; gap: 10px; padding: 8px 0 2px; }
.lk-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.lk-fine { font-size: .8125rem; color: var(--ink-2); }
.lk-fine a { color: inherit; }
.dx-g--a .lk-fine { color: var(--d-ink-2); }
.dx-g--a .like-chip span { background: transparent; color: var(--d-ink); border-color: rgba(243, 239, 230, .35); }
.dx-g--a .like-chip span::before { background: transparent; border-color: rgba(243, 239, 230, .5); }
.dx-g--a .like-chip input:hover + span { border-color: var(--d-gold-2); }
.dx-g--a .like-chip input:checked + span { background: var(--d-ink); color: #10160F; border-color: var(--d-ink); }
.dx-g--a .like-chip input:focus-visible + span { outline-color: var(--d-gold-2); }

/* ---------- Besprechen ---------- */
.dx-talk { background: var(--bg); }
.dx-talk-grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 1000px) { .dx-talk-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.dx-talk-copy { display: grid; gap: 18px; align-content: start; }
.dx-free { padding: 14px 16px; border-left: 2px solid var(--gold); background: var(--gold-wash); color: var(--ink-2); font-size: .9375rem; }
.dx-notes { display: grid; gap: 10px; }
.dx-notes-empty { padding: 12px 0 0; color: var(--ink-2); font-size: .9375rem; }
.dx-notes-list { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.dx-notes-list:empty { display: none; }
.dx-notes-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dx-notes-list b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.2rem; }
.dx-notes-list span { grid-column: 1; color: var(--ink-2); font-size: .9375rem; }
.dx-notes-list button { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.dx-notes-list button:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Praxiswebsite im Einsatz ---------- */
.dx-real { background: var(--bg-2); }
.dx-real-grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .dx-real-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.dx-real-fig { margin: 0; }
.dx-real-copy { display: grid; gap: 16px; justify-items: start; }
.dx-real-note { font-size: .9375rem; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { .dx-screen, .dx-v { transition: none; } }
.dx-card > .anchor-alias { position: absolute; top: 0; left: 0; }