/* =====================================================================
   User-App · Ergänzungen zum gemeinsamen Design-System (app-mobil.css)
   Präfix "ua-". Beide Marken in einer App: Gold = Dominacall24 (Anzeigen),
   Rosé/Burgund = MissLiberty (Community).
   ===================================================================== */

:root {
    --ua-ml:      #e8a6b8;                 /* Rosé für MissLiberty-Akzente */
    --ua-ml-tief: rgb(var(--c-burgund));
}

.ua-logo { height: 52px; width: auto; }
.ua-marke-dc { color: var(--ap-gold); }
.ua-marke-ml { color: var(--ua-ml); }

.ua-marke-pille { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.ua-marke-pille--dc { background: rgb(var(--c-gold) / .14); color: var(--ap-gold); }
.ua-marke-pille--ml { background: rgba(232,166,184,.14); color: var(--ua-ml); }

/* ------------------------------------------------ Waagerechte Spuren */
.ua-spur { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
.ua-spur::-webkit-scrollbar { display: none; }
.ua-spur > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Mitglieder-Karte (Community) */
.ua-mitglied { width: 132px; display: block; background: var(--ap-karte); border: 1px solid var(--ap-karte-rand); border-radius: var(--ap-radius); padding: 12px 10px; text-align: center; transition: transform var(--ap-dauer) var(--ap-kurve); }
.ua-mitglied:active { transform: scale(.97); }
.ua-mitglied .ap-avatar { width: 68px; height: 68px; font-size: 24px; margin: 0 auto 8px; }
.ua-mitglied__name { font-size: 14px; font-weight: 600; color: var(--ap-sand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-mitglied__meta { font-size: 11.5px; color: var(--ap-sand-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-mitglied__online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ap-ok); margin-right: 4px; vertical-align: middle; }

/* Anzeigen-Karte (Dominacall24) */
.ua-anzeige { width: 150px; display: block; border-radius: var(--ap-radius); overflow: hidden; background: var(--ap-karte); border: 1px solid var(--ap-karte-rand); transition: transform var(--ap-dauer) var(--ap-kurve); }
.ua-anzeige:active { transform: scale(.97); }
.ua-anzeige__bild { aspect-ratio: 3 / 4; background: rgba(255,255,255,.04); position: relative; }
.ua-anzeige__bild img { width: 100%; height: 100%; object-fit: cover; }
.ua-anzeige__marke { position: absolute; left: 8px; top: 8px; }
.ua-anzeige__text { padding: 9px 10px 11px; }
.ua-anzeige__name { font-size: 14px; font-weight: 600; color: var(--ap-sand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-anzeige__ort { font-size: 11.5px; color: var(--ap-sand-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Raster-Varianten für Listen */
.ua-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ua-raster .ua-anzeige, .ua-raster .ua-mitglied { width: auto; }
.ua-raster .ua-mitglied .ap-avatar { width: 84px; height: 84px; font-size: 30px; }

/* ------------------------------------------------ Profil (Detail) */
.ua-held { position: relative; margin: 0 -16px 14px; height: 260px; overflow: hidden; background: rgba(255,255,255,.04); }
.ua-held img { width: 100%; height: 100%; object-fit: cover; }
.ua-held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,.95)); }
.ua-held__text { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; }
.ua-held__name { font-family: var(--ap-serif); font-size: 30px; line-height: 1.05; color: var(--ap-sand); }
.ua-held__meta { font-size: 13px; color: var(--ap-sand-2); margin-top: 4px; }
.ua-held--leer { display: flex; align-items: center; justify-content: center; }
.ua-held--leer .ap-avatar { width: 120px; height: 120px; font-size: 44px; }

.ua-kinks { display: grid; gap: 10px; }
.ua-kinks__spalte { border-radius: var(--ap-radius-klein); padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid rgb(var(--c-gold) / .12); }
.ua-kinks__titel { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.ua-kinks__spalte--ja .ua-kinks__titel { color: var(--ap-ok); }
.ua-kinks__spalte--vielleicht .ua-kinks__titel { color: var(--ap-warn); }
.ua-kinks__spalte--tabu .ua-kinks__titel { color: var(--ap-rot); }
.ua-kinks__liste { display: flex; flex-wrap: wrap; gap: 6px; }
.ua-kinks__liste span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--ap-sand); }
.ua-kinks__liste span.ist-gemeinsam { background: rgb(var(--c-gold) / .18); color: var(--ap-gold); }

/* Galerie-Vorschau */
.ua-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ua-fotos a { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.05); }
.ua-fotos img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------ Nachrichten */
.ua-chat { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 12px; }
.ua-chat__tag { align-self: center; font-size: 11px; color: var(--ap-sand-3); padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.05); margin: 8px 0 4px; }
.ua-blase { max-width: 82%; padding: 9px 13px; border-radius: 18px; font-size: 15px; line-height: 1.4; color: var(--ap-sand); background: rgba(255,255,255,.07); align-self: flex-start; border-bottom-left-radius: 6px; word-wrap: break-word; }
.ua-blase--ich { align-self: flex-end; background: linear-gradient(180deg, rgb(var(--c-gold) / .32), rgb(var(--c-gold) / .2)); border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.ua-blase__zeit { display: block; font-size: 10.5px; color: var(--ap-sand-3); margin-top: 3px; text-align: right; }
.ua-blase img { border-radius: 12px; max-height: 260px; margin-top: 4px; }
.ua-schreiben { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + var(--ap-tabs-hoehe)); z-index: 35; padding: 8px 12px; background: linear-gradient(180deg, rgb(var(--c-noir) / .0), rgb(var(--c-noir) / .96) 25%); }
.ua-schreiben__innen { max-width: 560px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; }
.ua-schreiben textarea.ap-feld { min-height: 46px; max-height: 140px; border-radius: 22px; padding: 12px 16px; }
.ua-schreiben .ap-knopf--rund { width: 46px; height: 46px; flex: 0 0 auto; }
body.hat-schreibleiste .ap-inhalt { padding-bottom: calc(env(safe-area-inset-bottom) + var(--ap-tabs-hoehe) + 90px); }

/* ------------------------------------------------ Einladen */
.ua-kontakt { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ua-kontakt + .ua-kontakt { border-top: 1px solid rgb(var(--c-gold) / .10); }
.ua-kontakt__name { font-size: 15px; color: var(--ap-sand); }
.ua-kontakt__nr { font-size: 12px; color: var(--ap-sand-3); }
.ua-kontakt__knoepfe { margin-left: auto; display: flex; gap: 6px; }
.ua-kontakt__knoepfe .ap-knopf { width: 40px; height: 40px; padding: 0; border-radius: 12px; }
.ua-kontakt__knoepfe .ap-knopf--wa { color: #3ecf8e; border-color: rgba(62,207,142,.35); }

/* Konfetti-Moment (kleine Belohnung) */
.ua-konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.ua-konfetti span { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: ua-fall 1.6s ease-in forwards; }
@keyframes ua-fall { to { transform: translateY(110vh) rotate(540deg); opacity: 0; } }

/* Stimmungsvolle Begrüßungskarte */
.ua-hallo { background: linear-gradient(135deg, rgba(232,166,184,.16), rgb(var(--c-gold) / .12) 55%, rgba(255,255,255,.03)); border-color: rgba(232,166,184,.35); }

/* Termin-Zeile */
.ua-termin { display: flex; gap: 12px; align-items: center; }
.ua-termin__datum { flex: 0 0 auto; width: 52px; height: 56px; border-radius: 14px; background: rgba(232,166,184,.14); color: var(--ua-ml); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ua-termin__tag { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ua-termin__monat { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }

/* Segment oben (Anzeigen | Mitglieder) */
.ua-schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.06); margin: 14px 0 12px; }
.ua-schalter a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--ap-sand-2); }
.ua-schalter a.ist-aktiv { background: var(--ap-gold); color: var(--ap-noir); }
.ua-schalter a.ist-aktiv.ua-schalter--ml { background: var(--ua-ml); }

/* Telefonbuch-Zeile nach dem Einladen */
.ua-kontakt.ist-eingeladen { opacity: .55; }
.ua-kontakt.ist-eingeladen .ua-kontakt__name::after { content: " · eingeladen"; color: var(--ap-ok); font-size: 12px; }

/* Porträts im Held-Bild: Gesichter sitzen meist im oberen Drittel */
.ua-held img { object-position: center 25%; }

/* Wortmarke auf den Zugangsseiten: Zeichen + Name als Text, damit der Claim
   aus der Marke kommt und nicht in einer Bilddatei festhängt. */
.ua-zeichen { width: 60px; height: 60px; margin: 0 auto 12px; }
.ua-wortmarke { font-family: var(--ap-serif); font-size: 1.75rem; line-height: 1; color: var(--ap-sand); text-align: center; }
.ua-wortmarke span { color: var(--ap-gold); }