/* DataSoft Pornodatenbank – Frontend

   Der Plugin-Bereich bringt seinen eigenen Farbraum als abgesetzte Fläche mit.
   So bleibt er in jedem Theme lesbar, ob das Theme hell oder dunkel ist.

   Der Schleier über gesperrten Medien entsteht serverseitig; die Regeln hier
   machen ihn weich und legen eine Milchglasfläche darüber. */

.dspdb {
    --dspdb-bg: #0e0f13;
    --dspdb-surface: #171922;
    --dspdb-surface-2: #1e212c;
    --dspdb-line: #2c3040;
    --dspdb-line-soft: #23262f;
    --dspdb-text: #e8e9ee;
    --dspdb-muted: #9aa0b4;
    --dspdb-accent: #c8a15a;
    --dspdb-accent-dark: #a3813f;
    --dspdb-accent-soft: rgba(200, 161, 90, .14);
    --dspdb-ok: #74c095;
    --dspdb-radius: 14px;
    --dspdb-radius-lg: 20px;
    --dspdb-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
    --dspdb-shadow-lift: 0 26px 50px -22px rgba(0, 0, 0, .95);
    background: var(--dspdb-bg);
    border-radius: 18px;
    color: var(--dspdb-text);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 2rem;
    padding: clamp(20px, 3.5vw, 44px);
    /* Das Layout richtet sich nach der Breite des Inhaltsbereichs, nicht nach
       der des Fensters. Themes mit schmaler Spalte bekommen so automatisch
       die einspaltige Variante. */
    container-type: inline-size;
}

/* Bricht aus einer schmalen Theme-Spalte aus und nutzt die Fensterbreite.
   Der Inhalt bleibt zentriert und bekommt oben eine Obergrenze, damit auf
   großen Bildschirmen keine überlangen Zeilen entstehen. */
.dspdb--full {
    border-radius: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    padding-left: max(24px, calc(50vw - 700px));
    padding-right: max(24px, calc(50vw - 700px));
    width: auto;
}

.dspdb *,
.dspdb *::before,
.dspdb *::after {
    box-sizing: border-box;
}

/* Überschriften und Text setzen sich gegen Theme-Vorgaben durch. */
.dspdb h1,
.dspdb h2,
.dspdb h3,
.dspdb h4,
.dspdb p,
.dspdb dt,
.dspdb dd,
.dspdb li,
.dspdb label,
.dspdb legend,
.dspdb th,
.dspdb td,
.dspdb figcaption {
    color: inherit;
}

.dspdb a {
    color: var(--dspdb-accent);
    text-decoration: none;
}

.dspdb a:hover {
    text-decoration: underline;
}

.dspdb img {
    max-width: 100%;
}

/* ------------------------------------------------------------- Meldungen */

.dspdb-note {
    border-radius: 10px;
    margin: 0 0 20px;
    padding: 12px 16px;
}

.dspdb-note--ok {
    background: rgba(80, 160, 110, .16);
    border: 1px solid rgba(80, 160, 110, .45);
}

.dspdb-note--err {
    background: rgba(190, 80, 80, .16);
    border: 1px solid rgba(190, 80, 80, .45);
}

/* -------------------------------------------------------------- Buttons */

.dspdb-btn {
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 22px;
    text-align: center;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Die Farben der Schaltflächen werden gegen Theme-Regeln durchgesetzt,
   deshalb die zusätzlichen Element-Selektoren. */
.dspdb a.dspdb-btn--primary,
.dspdb button.dspdb-btn--primary,
.dspdb .dspdb-btn--primary {
    background: var(--dspdb-accent);
    color: #14151a;
}

.dspdb a.dspdb-btn--primary:hover,
.dspdb button.dspdb-btn--primary:hover,
.dspdb .dspdb-btn--primary:hover {
    background: var(--dspdb-accent-dark);
    color: #14151a;
    text-decoration: none;
}

.dspdb a.dspdb-btn--ghost,
.dspdb button.dspdb-btn--ghost,
.dspdb .dspdb-btn--ghost {
    background: transparent;
    border-color: var(--dspdb-line);
    color: var(--dspdb-text);
}

.dspdb a.dspdb-btn--ghost:hover,
.dspdb button.dspdb-btn--ghost:hover,
.dspdb .dspdb-btn--ghost:hover {
    border-color: var(--dspdb-accent);
    color: var(--dspdb-text);
    text-decoration: none;
}

.dspdb-link-btn {
    background: none;
    border: 0;
    color: var(--dspdb-muted);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}

/* -------------------------------------------------------------- Katalog */

.dspdb-catalog__head {
    border-bottom: 1px solid var(--dspdb-line-soft);
    margin-bottom: 30px;
    padding-bottom: 26px;
}

.dspdb-catalog__kicker {
    color: var(--dspdb-accent);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.dspdb-catalog__title {
    font-size: clamp(2rem, 4.4vw, 3rem);
    letter-spacing: -.02em;
    line-height: 1.08;
    margin: 0 0 14px;
}

.dspdb-catalog__intro {
    color: var(--dspdb-muted);
    font-size: 1.04rem;
    margin: 0;
    max-width: 60ch;
}

.dspdb-catalog__count {
    color: var(--dspdb-muted);
    font-size: .88rem;
    margin: 0 0 16px;
}

/* Kennzahlen belegen, dass die Datenbank gepflegt ist, noch bevor der
   Besucher das erste Mal filtert. */
.dspdb-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.dspdb-stats li {
    display: flex;
    flex-direction: column;
}

.dspdb-stats strong {
    color: var(--dspdb-accent);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.dspdb-stats span {
    color: var(--dspdb-muted);
    font-size: .82rem;
    letter-spacing: .04em;
}

/* --------------------------------------------------------------- Suche */

.dspdb-filter {
    background: var(--dspdb-surface);
    border: 1px solid var(--dspdb-line);
    border-radius: var(--dspdb-radius-lg);
    box-shadow: var(--dspdb-shadow);
    margin-bottom: 18px;
    padding: 18px 20px;
}

.dspdb-filter__bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dspdb-filter__search {
    flex: 1 1 260px;
    margin: 0;
}

.dspdb-filter__sort {
    flex: 0 1 210px;
    margin: 0;
}

.dspdb-filter__search input {
    background: var(--dspdb-surface-2);
    border: 1px solid var(--dspdb-line);
    border-radius: 999px;
    color: var(--dspdb-text);
    padding: 13px 20px;
    width: 100%;
}

.dspdb-filter__search input::placeholder {
    color: var(--dspdb-muted);
}

.dspdb-filter__search input:focus,
.dspdb-filter select:focus {
    border-color: var(--dspdb-accent);
    outline: none;
}

.dspdb-filter__more {
    border-top: 1px solid var(--dspdb-line-soft);
    margin-top: 16px;
    padding-top: 4px;
}

.dspdb-filter__more summary {
    align-items: center;
    color: var(--dspdb-muted);
    cursor: pointer;
    display: flex;
    font-size: .9rem;
    font-weight: 600;
    gap: 8px;
    list-style: none;
    padding: 12px 0 2px;
}

.dspdb-filter__more summary::-webkit-details-marker {
    display: none;
}

.dspdb-filter__more summary::after {
    content: "＋";
    font-size: .95rem;
}

.dspdb-filter__more[open] summary::after {
    content: "－";
}

.dspdb-filter__more summary:hover {
    color: var(--dspdb-text);
}

.dspdb-filter__badge {
    background: var(--dspdb-accent);
    border-radius: 999px;
    color: #14151a;
    font-size: .74rem;
    font-weight: 700;
    min-width: 20px;
    padding: 1px 7px;
    text-align: center;
}

.dspdb-filter__grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 16px 0;
}

.dspdb-filter__item {
    margin: 0;
}

.dspdb-filter__item label {
    color: var(--dspdb-muted);
    display: block;
    font-size: .8rem;
    letter-spacing: .03em;
    margin-bottom: 5px;
}

.dspdb-filter select,
.dspdb-form select {
    background: var(--dspdb-surface-2);
    border: 1px solid var(--dspdb-line);
    border-radius: 9px;
    color: var(--dspdb-text);
    padding: 10px 11px;
    width: 100%;
}

.dspdb-filter__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --------------------------------------------------------------- Chips */

.dspdb-chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.dspdb-chips--plain {
    margin: 0 0 20px;
}

.dspdb-chip {
    background: var(--dspdb-surface-2);
    border: 1px solid var(--dspdb-line);
    border-radius: 999px;
    color: var(--dspdb-muted);
    font-size: .82rem;
    padding: 6px 13px;
}

/* Ein gesetzter Filter lässt sich einzeln abwählen. Ohne das bleibt nur
   „alles zurücksetzen“, und der Besucher verliert seine übrige Auswahl. */
.dspdb-chip--drop {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.dspdb .dspdb-chip--drop {
    color: var(--dspdb-text);
}

.dspdb .dspdb-chip--drop:hover {
    border-color: var(--dspdb-accent);
    color: var(--dspdb-accent);
    text-decoration: none;
}

.dspdb-chip--drop span[aria-hidden] {
    color: var(--dspdb-muted);
    font-size: 1rem;
    line-height: 1;
}

.dspdb-chips__clear {
    font-size: .82rem;
}

/* -------------------------------------------------------------- Badges */

.dspdb-badge {
    background: rgba(10, 11, 15, .82);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1;
    padding: 5px 10px;
    text-transform: uppercase;
    white-space: nowrap;
}

.dspdb-badge--verified {
    background: rgba(200, 161, 90, .92);
    border-color: transparent;
    color: #14151a;
}

.dspdb-badge--featured {
    background: rgba(255, 255, 255, .92);
    border-color: transparent;
    color: #14151a;
}

.dspdb-badge--available {
    background: rgba(80, 160, 110, .92);
    border-color: transparent;
    color: #0d1a12;
}

/* -------------------------------------------------------------- Kacheln */

.dspdb-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

/* auto-fit statt auto-fill: die Vorschlagsliste hat nur vier Einträge. Mit
   auto-fill blieben die überzähligen Spalten stehen und rechts entstünde ein
   leerer Streifen. */
.dspdb-grid--compact {
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dspdb-similar {
    border-top: 1px solid var(--dspdb-line-soft);
    padding-top: 28px;
}

.dspdb-card {
    background: var(--dspdb-surface);
    border: 1px solid var(--dspdb-line-soft);
    border-radius: var(--dspdb-radius-lg);
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.dspdb-card:hover {
    border-color: rgba(200, 161, 90, .55);
    box-shadow: var(--dspdb-shadow-lift);
    transform: translateY(-4px);
}

.dspdb-card__link {
    color: inherit;
    display: block;
}

.dspdb-card__link:hover {
    text-decoration: none;
}

.dspdb-card__media {
    aspect-ratio: 3 / 4;
    background: var(--dspdb-surface-2);
    overflow: hidden;
    position: relative;
}

.dspdb-card__img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    width: 100%;
}

.dspdb-card:hover .dspdb-card__img {
    transform: scale(1.05);
}

.dspdb-card__img--empty {
    background: linear-gradient(140deg, #22252f, #171922);
    display: block;
    height: 100%;
    width: 100%;
}

/* Name und Stammdaten liegen als Textebene im Bild. Das Auge erfasst so
   zuerst das Motiv und die Angaben erst danach. */
.dspdb-card__caption {
    background: linear-gradient(180deg, transparent, rgba(8, 9, 12, .9) 62%);
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    left: 0;
    padding: 42px 16px 14px;
    position: absolute;
    right: 0;
}

.dspdb-card__name {
    color: #fff;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.dspdb-card__meta {
    color: rgba(255, 255, 255, .74);
    font-size: .82rem;
}

.dspdb-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    left: 12px;
    max-width: calc(100% - 24px);
    position: absolute;
    top: 12px;
    z-index: 2;
}

.dspdb-card__counts {
    background: rgba(10, 11, 15, .72);
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-size: .72rem;
    gap: 8px;
    padding: 5px 11px;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2;
}

.dspdb-card__body {
    padding: 14px 17px 17px;
}

/* Das Gesuch. Zwei Zeilen genügen, sonst zerreißt das Raster. */
.dspdb-card__headline {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--dspdb-muted);
    display: -webkit-box;
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------- Aktivität */

.dspdb-stream {
    border-top: 1px solid var(--dspdb-line-soft);
    margin-top: 44px;
    padding-top: 26px;
}

.dspdb-stream__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.dspdb-stream__list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.dspdb-stream__item a {
    align-items: center;
    border: 1px solid var(--dspdb-line-soft);
    border-radius: 999px;
    color: inherit;
    display: flex;
    gap: 12px;
    padding: 8px 16px 8px 8px;
    transition: border-color .2s ease, background-color .2s ease;
}

.dspdb-stream__item a:hover {
    background: var(--dspdb-surface);
    border-color: rgba(200, 161, 90, .45);
    text-decoration: none;
}

.dspdb-stream__avatar {
    border-radius: 50%;
    flex: 0 0 44px;
    height: 44px;
    overflow: hidden;
    width: 44px;
}

.dspdb-stream__img,
.dspdb-stream__avatar .dspdb-card__img--empty {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.dspdb-stream__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dspdb-stream__text strong {
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dspdb-stream__text span {
    color: var(--dspdb-muted);
    font-size: .78rem;
}

.dspdb-stream__ago {
    color: rgba(154, 160, 180, .7);
    font-size: .72rem;
}

.dspdb-empty {
    background: var(--dspdb-surface);
    border: 1px solid var(--dspdb-line);
    border-radius: var(--dspdb-radius);
    padding: 28px;
    text-align: center;
}

.dspdb-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}

.dspdb-pagination a,
.dspdb-pagination span {
    border: 1px solid var(--dspdb-line);
    border-radius: 8px;
    display: block;
    padding: 8px 13px;
}

.dspdb-pagination .current {
    background: var(--dspdb-accent);
    border-color: var(--dspdb-accent);
    color: #14151a;
}

/* -------------------------------------------------------------- Profil */

.dspdb-breadcrumb {
    color: var(--dspdb-muted);
    font-size: .86rem;
    margin-bottom: 18px;
}

.dspdb-breadcrumb span {
    margin: 0 6px;
}

.dspdb-profile__head {
    display: grid;
    gap: clamp(24px, 3.5vw, 44px);
    grid-template-columns: minmax(280px, 420px) 1fr;
    margin-bottom: 44px;
}

.dspdb-profile__portrait {
    align-self: start;
    aspect-ratio: 3 / 4;
    background: var(--dspdb-surface-2);
    border: 1px solid var(--dspdb-line-soft);
    border-radius: var(--dspdb-radius-lg);
    box-shadow: var(--dspdb-shadow);
    overflow: hidden;
}

.dspdb-profile__img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.dspdb-profile__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.dspdb-profile__title {
    font-size: clamp(1.9rem, 4.2vw, 2.7rem);
    letter-spacing: -.02em;
    line-height: 1.08;
    margin: 0 0 10px;
}

/* Das Gesuch steht bewusst direkt unter dem Namen und größer als die
   Stammdaten – es entscheidet, ob die Karte für den Produzenten passt. */
.dspdb-profile__headline {
    font-size: 1.16rem;
    line-height: 1.5;
    margin: 0 0 12px;
    max-width: 54ch;
}

.dspdb-profile__facts {
    color: var(--dspdb-muted);
    font-size: .92rem;
    margin: 0 0 16px;
}

.dspdb-profile__teaser {
    color: var(--dspdb-muted);
    margin: 0 0 22px;
    max-width: 62ch;
}

/* ---------------------------------------------------------- Kontaktsperre */

/* Der Kasten ist der Verkaufspunkt der ganzen Ansicht. Er darf deshalb
   sichtbar aus der Fläche herauskommen, ohne marktschreierisch zu werden:
   ein Hauch Goldton im Verlauf, sonst dieselbe Sprache wie der Rest. */
.dspdb-gate {
    background:
        linear-gradient(160deg, var(--dspdb-accent-soft), transparent 58%),
        var(--dspdb-surface);
    border: 1px solid var(--dspdb-line);
    border-radius: var(--dspdb-radius-lg);
    box-shadow: var(--dspdb-shadow);
    padding: 24px 26px;
}

.dspdb-gate.is-open {
    background: var(--dspdb-surface);
    border-color: rgba(80, 160, 110, .5);
}

.dspdb-gate__kicker {
    color: var(--dspdb-accent);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.dspdb-gate.is-open .dspdb-gate__kicker {
    color: #74c095;
}

.dspdb-gate__lead {
    margin: 0 0 12px;
}

.dspdb-gate__text {
    color: var(--dspdb-muted);
    margin: 0 0 16px;
}

.dspdb-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.dspdb-gate__note {
    border-top: 1px solid var(--dspdb-line);
    color: var(--dspdb-muted);
    font-size: .82rem;
    margin: 16px 0 0;
    padding-top: 12px;
}

.dspdb-contact {
    margin: 0;
}

.dspdb-contact__row {
    border-bottom: 1px solid var(--dspdb-line);
    display: grid;
    gap: 6px;
    grid-template-columns: 160px 1fr;
    padding: 9px 0;
}

.dspdb-contact__row:last-child {
    border-bottom: 0;
}

.dspdb-contact dt {
    color: var(--dspdb-muted);
    font-size: .88rem;
}

.dspdb-contact dd {
    margin: 0;
    word-break: break-word;
}

/* Die gesperrten Kontaktwege: Bezeichnungen lesbar, Werte als Platzhalter.
   Der Interessent soll sehen, welche Wege hinterlegt sind – Telefon,
   WhatsApp, Instagram, Pornhub –, nur eben nicht deren Inhalt.

   Als Zeilenliste untereinander wären es bei einem gut gepflegten Profil
   vierzehn Zeilen, und der Freischalt-Knopf rutschte aus dem Blickfeld.
   Zweispaltig bleibt der Kasten überschaubar. */
.dspdb-ways {
    display: grid;
    gap: 0 28px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

/* Bezeichnung und Maske in einer Zeile, mit fester Spalte für die
   Bezeichnung. Untereinander gestapelt saß die Punktereihe optisch näher am
   nächsten Feldnamen als an ihrem eigenen – die Zuordnung kippte. Nebeneinander
   ist sie eindeutig, und die Zeile ist halb so hoch.

   Der Aufbau entspricht der freigeschalteten Liste. Wer die Sperre sieht,
   erkennt daran schon, wie die Angaben nach dem Freischalten dastehen. */
.dspdb-way {
    align-items: baseline;
    border-bottom: 1px solid var(--dspdb-line-soft);
    display: grid;
    gap: 10px;
    grid-template-columns: 112px 1fr;
    line-height: 1.4;
    margin: 0;
    padding: 7px 0;
}

.dspdb-way__label {
    color: var(--dspdb-muted);
    font-size: .84rem;
}

.dspdb-mask {
    color: var(--dspdb-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .92rem;
    letter-spacing: .04em;
    opacity: .55;
    user-select: none;
    /* Eine umbrechende Maske würde die Rasterzeile in die Höhe ziehen. */
    white-space: nowrap;
}

.dspdb-ways__note {
    color: var(--dspdb-muted);
    font-size: .8rem;
    margin: 14px 0 0;
}

.dspdb-locked-inline {
    background: var(--dspdb-surface-2);
    border-left: 3px solid var(--dspdb-accent);
    border-radius: 6px;
    color: var(--dspdb-muted);
    font-size: .9rem;
    margin: 0;
    padding: 10px 14px;
}

/* ------------------------------------------------------------ Abschnitte */

.dspdb-section {
    margin-bottom: 36px;
}

.dspdb-section__title {
    align-items: baseline;
    display: flex;
    font-size: 1.3rem;
    gap: 10px;
    margin: 0 0 12px;
}

.dspdb-section__count {
    color: var(--dspdb-muted);
    font-size: .84rem;
    font-weight: 400;
}

.dspdb-section__hint {
    color: var(--dspdb-muted);
    font-size: .88rem;
    margin: 0 0 16px;
    max-width: 62ch;
}

/* --------------------------------------------- Galerie und Verschleierung */

.dspdb-gal {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.dspdb-gal__item {
    aspect-ratio: 3 / 4;
    background: var(--dspdb-surface-2);
    border: 1px solid var(--dspdb-line-soft);
    border-radius: var(--dspdb-radius);
    margin: 0;
    overflow: hidden;
    position: relative;
    transition: border-color .25s ease;
}

.dspdb-gal__item:hover {
    border-color: rgba(200, 161, 90, .5);
}

.dspdb-gal__img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Der Schleier: das Bild kommt bereits stark reduziert vom Server, hier wird
   die Fläche zusätzlich weichgezeichnet und leicht abgedunkelt. */
.dspdb-veiled {
    filter: blur(9px) saturate(.72) brightness(.82);
    transform: scale(1.06);
}

.dspdb-gal__item.is-locked::after {
    background: linear-gradient(180deg, rgba(15, 16, 20, .05), rgba(15, 16, 20, .55));
    content: "";
    inset: 0;
    position: absolute;
}

.dspdb-gal__lock,
.dspdb-video__lock {
    background: rgba(10, 11, 15, .78);
    border-radius: 999px;
    bottom: 12px;
    color: #fff;
    font-size: .74rem;
    left: 50%;
    letter-spacing: .06em;
    padding: 6px 14px;
    position: absolute;
    text-transform: uppercase;
    transform: translateX(-50%);
    z-index: 2;
}

/* --------------------------------------------------------------- Videos */

.dspdb-videos {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.dspdb-video {
    background: var(--dspdb-surface-2);
    border: 1px solid var(--dspdb-line);
    border-radius: 12px;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.dspdb-video.is-locked {
    aspect-ratio: 16 / 10;
}

.dspdb-video img,
.dspdb-video video {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.dspdb-video figcaption {
    color: var(--dspdb-muted);
    font-size: .84rem;
    padding: 9px 12px;
}

.dspdb-video.is-locked figcaption {
    padding: 6px 14px;
}

/* ------------------------------------------------------------- Merkmale */

/* Die Gruppen liegen untereinander über die volle Breite, jede als eigener
   Abschnitt. Vorher standen sie als Kacheln in drei Spalten. Das war kompakt,
   aber unruhig: „Erscheinung“ mit zwölf Angaben und „Konditionen“ mit einer
   lagen gleichwertig nebeneinander, und beim Lesen musste das Auge dauernd
   die Spalte wechseln.

   Innerhalb der Gruppe entscheidet die Feldart über die Bauform, siehe
   DSPDB_Helpers::group_body(). */
.dspdb-specs__group {
    border-top: 1px solid var(--dspdb-line-soft);
    padding: 22px 0 6px;
}

.dspdb-specs__group:first-of-type {
    border-top: 0;
    padding-top: 4px;
}

.dspdb-specs__group-title {
    align-items: baseline;
    color: var(--dspdb-text);
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    gap: 10px;
    letter-spacing: .01em;
    margin: 0 0 16px;
    text-transform: none;
}

/* Die laufende Nummer gibt der langen Seite Halt: man erkennt beim Scrollen,
   wo man ist, ohne die Überschriften lesen zu müssen. */
.dspdb-specs__num {
    color: var(--dspdb-accent);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .08em;
}

/* Einzelwerte: Bezeichnung klein darüber, Wert darunter groß. Gestapelt
   statt nebeneinander, weil die Werte so eine gemeinsame Leselinie bilden
   und man die Spalte „Wert“ am Stück abfahren kann. */
/* Sechs Spalten auf voller Breite. Bei 160 Pixern Mindestbreite waren es
   sieben, und „Erscheinung“ mit dreizehn Angaben zerfiel in ein Feld aus
   sehr schmalen Streifen. */
.dspdb-facts {
    display: grid;
    gap: 2px 18px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.dspdb-fact {
    border-left: 2px solid var(--dspdb-line-soft);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 0 10px 12px;
}

/* Siehe DSPDB_Helpers::group_body(): Werte über 22 Zeichen. */
.dspdb-fact.is-wide {
    grid-column: span 2;
}

.dspdb-fact__label {
    color: var(--dspdb-muted);
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dspdb-fact__value {
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.35;
}

/* Mehrfachwerte: jeder Eintrag ein eigenes Feld. Als Kommakette hinter einer
   Bezeichnung sind sechs Genres kaum zu erfassen, einzeln sind sie abzählbar
   und lassen sich mit dem Blick vergleichen.

   Bezeichnung links, Einträge rechts. Untereinander gestapelt brauchten vier
   solche Blöcke – Produktionsarten, Genres, Rollen, Veröffentlichung – die
   doppelte Höhe, und zwischen Bezeichnung und Einträgen entstand eine Lücke,
   die die Zuordnung aufweichte. */
/* Der linke Einzug entspricht Rand und Innenabstand von .dspdb-fact, damit
   alle Bezeichnungen der Gruppe auf einer Linie beginnen. */
.dspdb-tags,
.dspdb-prose {
    align-items: start;
    display: grid;
    gap: 6px 16px;
    grid-template-columns: 154px 1fr;
    padding: 9px 0 9px 14px;
}

/* Erster Block nach dem Kennzahlenraster: etwas Luft, sonst klebt die
   Chipreihe an der Werteliste darüber. */
.dspdb-facts + .dspdb-tags,
.dspdb-facts + .dspdb-prose {
    margin-top: 10px;
}

/* Gleiche Optik wie die Bezeichnungen im Kennzahlenraster, damit sich alle
   Bezeichnungen der Seite als eine Sorte lesen. */
.dspdb-tags__label,
.dspdb-prose__label {
    color: var(--dspdb-muted);
    font-size: .74rem;
    letter-spacing: .06em;
    margin: 0;
    /* Auf die Mitte der ersten Chipreihe ausrichten. */
    padding-top: 7px;
    text-transform: uppercase;
}

.dspdb-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dspdb-tags__list li {
    background: var(--dspdb-surface-2);
    border: 1px solid var(--dspdb-line);
    border-radius: 999px;
    font-size: .88rem;
    padding: 5px 12px;
}

/* Fließtext bekommt eine begrenzte Zeilenlänge. Über die volle Breite von
   1300 Pixeln wären es weit über hundert Zeichen je Zeile, und das Auge
   verliert beim Rücksprung die Zeile. */
.dspdb-prose p {
    margin: 0 0 10px;
    max-width: 78ch;
}

.dspdb-prose p:last-child {
    margin-bottom: 0;
}

.dspdb-specs__group.is-locked .dspdb-locked-inline {
    margin: 0 0 10px;
}

/* ------------------------------------------------------------ Lightbox */

.dspdb-gal__zoom {
    cursor: zoom-in;
    display: block;
    height: 100%;
}

.dspdb-lightbox {
    align-items: center;
    background: rgba(6, 7, 10, .94);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 4vmin;
    position: fixed;
    z-index: 99999;
}

.dspdb-lightbox[hidden] {
    display: none;
}

.dspdb-lightbox img {
    border-radius: 8px;
    box-shadow: 0 30px 80px -30px #000;
    max-height: 92vh;
    max-width: 100%;
    object-fit: contain;
}

.dspdb-lightbox__close {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    height: 44px;
    line-height: 1;
    position: absolute;
    right: 3vmin;
    top: 3vmin;
    width: 44px;
}

.dspdb-lightbox__close:hover {
    background: rgba(255, 255, 255, .2);
}

.dspdb-noscroll {
    overflow: hidden;
}

/* -------------------------------------------------- Konto und Formulare */

.dspdb-account__title {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    margin: 0 0 10px;
}

.dspdb-account__lead {
    color: var(--dspdb-muted);
    margin: 0 0 24px;
}

.dspdb-form {
    max-width: 640px;
}

.dspdb-form--fields {
    max-width: none;
}

.dspdb-form p {
    margin: 0 0 16px;
}

.dspdb-form label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.dspdb-form input[type="text"],
.dspdb-form input[type="email"],
.dspdb-form input[type="tel"],
.dspdb-form input[type="url"],
.dspdb-form input[type="password"],
.dspdb-form input[type="number"],
.dspdb-form input[type="date"],
.dspdb-form input[type="file"],
.dspdb-form textarea {
    background: var(--dspdb-surface-2);
    border: 1px solid var(--dspdb-line);
    border-radius: 9px;
    color: var(--dspdb-text);
    padding: 11px 13px;
    width: 100%;
}

.dspdb-form input:focus,
.dspdb-form textarea:focus,
.dspdb-form select:focus {
    border-color: var(--dspdb-accent);
    outline: none;
}

.dspdb-form__help {
    color: var(--dspdb-muted);
    font-size: .88rem;
    margin-top: 14px;
}

.dspdb-form__hint,
.dspdb-field__hint,
.dspdb-fieldset__hint,
.dspdb-panel__hint {
    color: var(--dspdb-muted);
    display: block;
    font-size: .82rem;
    font-weight: 400;
    margin-top: 4px;
}

.dspdb-check label,
.dspdb-checks__opt {
    font-weight: 400;
}

.dspdb-choice {
    border: 0;
    display: grid;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
}

.dspdb-choice legend {
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 8px;
    padding: 0;
}

.dspdb-choice__opt {
    background: var(--dspdb-surface);
    border: 1px solid var(--dspdb-line);
    border-radius: 12px;
    cursor: pointer;
    display: grid;
    font-weight: 400;
    gap: 4px;
    grid-template-columns: 22px 1fr;
    padding: 14px 16px;
}

.dspdb-choice__opt strong {
    grid-column: 2;
}

.dspdb-choice__opt span {
    color: var(--dspdb-muted);
    font-size: .88rem;
    grid-column: 2;
}

.dspdb-choice__opt input {
    grid-row: 1 / span 2;
    margin-top: 4px;
}

.dspdb-choice__opt.is-on {
    border-color: var(--dspdb-accent);
}

.dspdb-fieldset {
    border: 1px solid var(--dspdb-line);
    border-radius: 12px;
    margin: 0 0 22px;
    padding: 16px 18px;
}

.dspdb-fieldset legend {
    font-weight: 700;
    padding: 0 8px;
}

.dspdb-fieldset__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.dspdb-field {
    margin: 0;
}

.dspdb-field--textarea,
.dspdb-field--checks {
    grid-column: 1 / -1;
}

.dspdb-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.dspdb-checks__opt {
    align-items: center;
    display: flex;
    font-size: .9rem;
    gap: 6px;
    margin: 0;
}

/* ------------------------------------------------------------- Panels */

.dspdb-panel {
    background: var(--dspdb-surface);
    border: 1px solid var(--dspdb-line);
    border-radius: var(--dspdb-radius);
    margin-bottom: 22px;
    padding: 20px 22px;
}

.dspdb-panel__title {
    font-size: 1.15rem;
    margin: 0 0 12px;
}

.dspdb-balance {
    color: var(--dspdb-accent);
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 14px;
}

.dspdb-unlocked {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dspdb-unlocked li {
    border-bottom: 1px solid var(--dspdb-line);
    padding: 8px 0;
}

.dspdb-unlocked li:last-child {
    border-bottom: 0;
}

.dspdb-table {
    border-collapse: collapse;
    width: 100%;
}

.dspdb-table th,
.dspdb-table td {
    border-bottom: 1px solid var(--dspdb-line);
    padding: 9px 10px;
    text-align: left;
}

.dspdb-table th {
    color: var(--dspdb-muted);
    font-size: .84rem;
    font-weight: 600;
}

.dspdb-table .num {
    text-align: right;
}

.dspdb-mediagrid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    margin-top: 18px;
}

.dspdb-mediagrid__item {
    background: var(--dspdb-surface-2);
    border: 1px solid var(--dspdb-line);
    border-radius: 10px;
    margin: 0;
    overflow: hidden;
}

.dspdb-mediagrid__item img {
    display: block;
    height: auto;
    width: 100%;
}

.dspdb-mediagrid__video {
    align-items: center;
    background: linear-gradient(140deg, #262a36, #181a23);
    color: var(--dspdb-muted);
    display: flex;
    font-size: .84rem;
    height: 96px;
    justify-content: center;
}

.dspdb-mediagrid__item figcaption {
    display: flex;
    flex-wrap: wrap;
    font-size: .78rem;
    gap: 6px;
    justify-content: space-between;
    padding: 7px 9px;
}

.dspdb-inline-form {
    display: inline;
}

/* -------------------------------------------------------------- Pakete */

.dspdb-packages {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 20px;
}

.dspdb-package {
    background: var(--dspdb-surface);
    border: 1px solid var(--dspdb-line);
    border-radius: var(--dspdb-radius);
    display: flex;
    flex-direction: column;
    padding: 22px;
    text-align: center;
}

/* Das Einzelpaket hat keine Zeile „je Freischaltung“, weil der Preis
   dort schon der Preis je Freischaltung ist. Damit die Schaltflächen
   trotzdem auf einer Linie sitzen, wird die Aktion nach unten
   geschoben statt dem Text zu folgen. */
.dspdb-package__action {
    margin-top: auto;
    padding-top: 6px;
}

.dspdb-package__title {
    font-size: 1.1rem;
    margin: 0 0 10px;
}

.dspdb-package__tokens {
    color: var(--dspdb-accent);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.dspdb-package__price {
    font-size: 1.15rem;
    margin: 0 0 2px;
}

.dspdb-package__per,
.dspdb-package__hint {
    color: var(--dspdb-muted);
    font-size: .84rem;
    margin: 0 0 14px;
}

.dspdb-tokens__note {
    color: var(--dspdb-muted);
    font-size: .84rem;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

/* ------------------------------------- Anpassung an schmale Bereiche

   Diese Blöcke stehen am Dateiende, und das ist keine Kosmetik: Container-
   und Media-Queries erhöhen die Spezifität nicht. Standen sie oben, gewann
   jede gleichrangige Regel weiter unten in der Datei – die Anpassung für
   .dspdb-facts oder .dspdb-contact__row lief ins Leere, weil deren
   Grundregel später kommt.

   Maßgeblich ist die Breite des Inhaltsbereichs, nicht die des Fensters.
   Ein Theme mit schmaler Spalte bekommt damit dieselbe Ansicht wie ein
   Telefon. */

/* Der Umbruch des Profilkopfs kommt früh: Das Porträt belegt bis zu 420
   Pixel. Bliebe der Kopf bei 810 Pixern zweispaltig, blieben für Name,
   Merkmale und den Kontaktkasten nur rund 350 Pixel – zu wenig für die
   beiden Schaltflächen nebeneinander. */
@container (max-width: 900px) {
    .dspdb-profile__head {
        grid-template-columns: 1fr;
    }

    .dspdb-profile__portrait {
        margin: 0 auto;
        max-width: 360px;
        width: 100%;
    }

    /* Kontaktwege einspaltig: bei 270 Pixern Mindestbreite je Spalte bliebe
       ohnehin nur eine, aber so bleibt die Bezeichnungsspalte erhalten. */
    .dspdb-ways {
        grid-template-columns: 1fr;
    }
}

@container (max-width: 600px) {
    .dspdb-contact__row {
        grid-template-columns: 1fr;
    }

    .dspdb-way {
        grid-template-columns: 96px 1fr;
    }

    /* Zwei Werte pro Zeile statt einem: bei 190 Pixern Mindestbreite bliebe
       auf dem Telefon eine einzige Spalte übrig und die Gruppe würde
       unnötig lang. Kurze Werte wie „38“ vertragen die halbe Breite. */
    .dspdb-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Ein Wert, der über die ganze Zeile läuft, statt über zwei Spalten. */
    .dspdb-fact.is-wide {
        grid-column: 1 / -1;
    }

    /* Bezeichnung wieder über die Einträge: 154 Pixel für die Bezeichnung
       lassen auf Telefonbreite zu wenig für die Chips. */
    .dspdb-tags,
    .dspdb-prose {
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .dspdb-tags__label,
    .dspdb-prose__label {
        padding-top: 0;
    }

    .dspdb-stats {
        gap: 22px;
    }

    .dspdb-stats strong {
        font-size: 1.4rem;
    }

    .dspdb-filter__sort {
        flex: 1 1 100%;
    }
}

/* Fallback für Browser ohne Container-Queries. */
@supports not (container-type: inline-size) {
    @media (max-width: 940px) {
        .dspdb-profile__head {
            grid-template-columns: 1fr;
        }

        .dspdb-profile__portrait {
            margin: 0 auto;
            max-width: 360px;
            width: 100%;
        }

        .dspdb-ways {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 640px) {
        .dspdb-contact__row {
            grid-template-columns: 1fr;
        }

        .dspdb-way {
            grid-template-columns: 96px 1fr;
        }

        .dspdb-facts {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .dspdb-fact.is-wide {
            grid-column: 1 / -1;
        }

        .dspdb-tags,
        .dspdb-prose {
            grid-template-columns: 1fr;
            padding-left: 0;
        }

        .dspdb-tags__label,
        .dspdb-prose__label {
            padding-top: 0;
        }
    }
}