/* Digitana Social - Profil bearbeiten V1
   Nur Bearbeiten-Reiter: Picker, Formularraster, Link-Kopieren und Verwaltungsboxen.
   Bestehende Profilbild-, Titelbild-, Feed-, Actionbox-, Radar- und Hintergrundlogik bleibt unberührt. */

@supports selector(:has(*)) {
  .ds-content-frame:has(.ds-profile-edit-form-v1),
  .ds-profile-body:has(.ds-profile-edit-form-v1) {
    overflow: visible;
  }
}


/* Aus base.css herausgezogener Grundblock fuer die Bearbeiten-Seite. */
.ds-profile-edit-form {
  width: 100%;
  max-width: 1040px;
}

.ds-profile-edit-panel {
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.ds-profile-edit-form-v1 .ds-profile-edit-panel h2,
.ds-profile-edit-accordion-summary span {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(32, 169, 255, 0.24);
}

.ds-profile-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 16px;
  align-items: end;
}

.ds-profile-edit-grid .ds-field-input,
.ds-profile-edit-grid select.ds-field-input {
  max-width: 360px;
  height: 34px;
}

.ds-profile-edit-grid .ds-form-field-full {
  grid-column: 1 / -1;
}

.ds-profile-textarea {
  width: min(620px, 100%);
  min-height: 76px;
  max-height: 130px;
  resize: vertical;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(28,31,34,0.98), rgba(0,0,0,0.99));
  color: var(--ds-text);
  font: inherit;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(215, 237, 255, 0.22),
    inset 0 9px 14px rgba(0, 0, 0, 0.55),
    inset 0 0 14px rgba(32, 169, 255, 0.07);
}

.ds-profile-edit-form-v1 {
  position: relative;
  overflow: visible;
}

.ds-profile-edit-form-v1 .ds-profile-edit-panel {
  position: relative;
  overflow: visible;
  margin-bottom: 18px;
}

.ds-profile-edit-form-v1 .ds-profile-edit-panel h2 {
  margin-bottom: 12px;
}

.ds-profile-edit-grid-steckbrief {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  align-items: start;
}

.ds-profile-edit-field-wide {
  grid-column: span 2;
}

.ds-profile-edit-form-v1 .ds-form-field,
.ds-profile-edit-form-v1 .ds-profile-edit-visibility-line {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.ds-profile-edit-form-v1 .ds-form-field:focus-within,
.ds-profile-edit-form-v1 .ds-profile-edit-visibility-line:focus-within,
.ds-profile-edit-form-v1 .ds-profile-edit-picker-open {
  z-index: 9100;
}

.ds-profile-edit-form-v1 .ds-field-input,
.ds-profile-edit-form-v1 .ds-profile-textarea {
  width: 100%;
  max-width: none;
}

.ds-profile-edit-textarea-medium {
  min-height: 96px;
}

.ds-profile-edit-direct-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 14px;
}

.ds-profile-edit-direct-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(215,237,255,0.10), transparent 55%),
    linear-gradient(135deg, rgba(19, 39, 58, 0.92), rgba(0,0,0,0.86));
  color: #eaf6ff;
  box-shadow:
    inset 0 0 0 1px rgba(215,237,255,0.14),
    inset 0 8px 14px rgba(0,0,0,0.38),
    0 8px 18px rgba(0,0,0,0.24);
  cursor: pointer;
}

.ds-profile-edit-direct-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ds-profile-edit-direct-check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: transparent;
  box-shadow: inset 0 0 0 1px rgba(215,237,255,0.36);
}

.ds-profile-edit-direct-choice input:checked + .ds-profile-edit-direct-check {
  color: #ffffff;
  background: color-mix(in srgb, var(--ds-profile-accent, #20a9ff) 44%, #000000);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--ds-profile-accent, #20a9ff) 44%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.42);
}

.ds-profile-edit-link-row {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: center;
  max-width: 820px;
}

.ds-profile-edit-link-label {
  color: #8edfff;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ds-profile-edit-copy {
  min-height: 34px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(226,242,252,0.28), rgba(56,157,215,0.38), rgba(0,0,0,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 14px rgba(32,169,255,0.18);
  cursor: pointer;
}

.ds-profile-edit-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px 16px;
  overflow: visible;
}

.ds-profile-edit-visibility-line {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(160px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.ds-profile-edit-visibility-name {
  color: #aee0ff;
  font-size: 0.80rem;
  letter-spacing: 0.04em;
}

.ds-profile-edit-picker {
  position: relative;
  width: min(100%, 320px);
  overflow: visible;
}

.ds-profile-edit-picker-trigger {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(215,237,255,0.14), transparent 50%),
    linear-gradient(135deg, rgba(35, 64, 84, 0.95), rgba(4, 17, 29, 0.98) 48%, rgba(0,0,0,0.98));
  text-align: left;
  box-shadow:
    0 0 11px rgba(32,169,255,0.14),
    inset 0 0 0 1px rgba(142,223,255,0.34),
    inset 0 10px 18px rgba(0,0,0,0.36);
  cursor: pointer;
}

.ds-profile-edit-picker-arrow {
  color: #dff7ff;
  font-size: 0.95rem;
}

.ds-profile-edit-picker-popover {
  position: absolute;
  z-index: 9000;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(360px, calc(100vw - 42px));
  padding: 8px;
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(215,237,255,0.14), transparent 48%),
    linear-gradient(135deg, rgba(27, 53, 73, 0.98), rgba(2, 11, 20, 0.99) 50%, rgba(0,0,0,0.99));
  box-shadow:
    0 24px 44px rgba(0,0,0,0.72),
    0 0 26px rgba(32,169,255,0.22),
    inset 0 0 0 1px rgba(142,223,255,0.20),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.ds-profile-edit-picker-popover[hidden] {
  display: none;
}

.ds-profile-edit-picker-choice {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dff5ff;
  text-align: left;
  cursor: pointer;
}

.ds-profile-edit-picker-choice:hover,
.ds-profile-edit-picker-choice-active {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 32%, rgba(4, 12, 22, 0.92)),
      rgba(4, 12, 22, 0.92) 72%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 42%, rgba(215,237,255,0.18)),
    0 0 14px color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 22%, transparent);
}

.ds-profile-edit-picker-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--ds-profile-edit-accent, #20a9ff);
  text-shadow:
    0 0 8px color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 58%, transparent),
    0 1px 0 #000000;
}

.ds-profile-edit-link-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.ds-profile-edit-friend-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px 16px;
  margin-top: 12px;
}

.ds-profile-edit-subbox {
  padding: 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.28);
  box-shadow: inset 0 0 0 1px rgba(215,237,255,0.08);
}

.ds-profile-edit-subbox > strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.ds-profile-edit-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 4px 0;
  color: #d8f0ff;
  font-size: 0.86rem;
}

.ds-profile-edit-mini-row a {
  color: #8edfff;
  text-decoration: none;
}

.ds-profile-edit-mini-row-actions span,
.ds-profile-edit-mini-row-actions form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ds-profile-links-public a {
  color: #8edfff;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ds-profile-links-public a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(32,169,255,0.4);
}

@media (max-width: 900px) {
  .ds-profile-edit-grid-steckbrief,
  .ds-profile-edit-link-grid,
  .ds-profile-edit-visibility-grid,
  .ds-profile-edit-friend-columns {
    grid-template-columns: 1fr;
  }

  .ds-profile-edit-field-wide {
    grid-column: auto;
  }

  .ds-profile-edit-link-row {
    grid-template-columns: 1fr;
  }

  .ds-profile-edit-visibility-line {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ds-profile-edit-picker {
    width: 100%;
  }
}

/* Korrekturblock Profil bearbeiten 14.05.2026: Hintergrund bleibt Hintergrund,
   Akzentfarbe ist getrennt und steuert nur feine UI-/Lichtakzente. */
.ds-profile-ui-accent-silver_gray { --ds-profile-accent: #d7edff; --ds-profile-edit-accent: #d7edff; }
.ds-profile-ui-accent-gold { --ds-profile-accent: #ffd76a; --ds-profile-edit-accent: #ffd76a; }
.ds-profile-ui-accent-metallic_red { --ds-profile-accent: #ff2f3f; --ds-profile-edit-accent: #ff2f3f; }
.ds-profile-ui-accent-metallic_blue { --ds-profile-accent: #20a9ff; --ds-profile-edit-accent: #20a9ff; }
.ds-profile-ui-accent-metallic_green { --ds-profile-accent: #38e889; --ds-profile-edit-accent: #38e889; }
.ds-profile-ui-accent-metallic_rose { --ds-profile-accent: #ff79ad; --ds-profile-edit-accent: #ff79ad; }
.ds-profile-ui-accent-metallic_violet { --ds-profile-accent: #a16bff; --ds-profile-edit-accent: #a16bff; }
.ds-profile-ui-accent-steel_blue { --ds-profile-accent: #6aa6c9; --ds-profile-edit-accent: #6aa6c9; }

.ds-profile-edit-visibility-grid {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 10px 18px;
}

.ds-profile-edit-visibility-line {
  grid-template-columns: minmax(130px, auto) minmax(150px, 220px);
}

.ds-profile-edit-picker {
  width: min(100%, 240px);
}


.ds-profile-edit-link-row {
  grid-template-columns: auto minmax(220px, 1fr) auto;
  max-width: 860px;
}

.ds-profile-edit-link-display {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 9px;
  color: #eaf6ff;
  background:
    linear-gradient(135deg, rgba(215,237,255,0.08), rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.26));
  box-shadow:
    inset 0 0 0 1px rgba(215,237,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 12px color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 12%, transparent);
  user-select: text;
  overflow-wrap: anywhere;
}

.ds-profile-edit-field-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 5px;
  min-height: 20px;
}

.ds-profile-edit-field-head .ds-field-label {
  margin: 0;
}

.ds-profile-edit-field-colon {
  color: #aee0ff;
  font-size: 0.78rem;
}

.ds-profile-edit-picker-inline {
  width: auto;
  display: inline-flex;
}

.ds-profile-edit-picker-trigger-inline {
  width: auto;
  min-height: 0;
  padding: 0 2px;
  border-radius: 0;
  background: transparent;
  color: #dff7ff;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 42%, transparent),
    0 1px 0 #000000;
}

.ds-profile-edit-picker-trigger-inline:hover,
.ds-profile-edit-picker-open .ds-profile-edit-picker-trigger-inline {
  color: #ffffff;
  text-shadow:
    0 0 12px color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 58%, transparent),
    0 1px 0 #000000;
}

.ds-profile-edit-picker-inline .ds-profile-edit-picker-popover {
  min-width: 220px;
  top: calc(100% + 9px);
}

.ds-profile-edit-link-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px 18px;
}

.ds-profile-edit-grid.ds-profile-edit-grid-compact {
  gap: 12px 18px;
}

.ds-profile-color-choice-grid {
  grid-template-columns: repeat(4, minmax(145px, 1fr));
}

@media (max-width: 1100px) {
  .ds-profile-edit-visibility-grid,
  .ds-profile-edit-link-grid {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }

  .ds-profile-color-choice-grid {
    grid-template-columns: repeat(3, minmax(145px, 1fr));
  }
}

@media (max-width: 900px) {
  .ds-profile-edit-visibility-grid,
  .ds-profile-edit-link-grid {
    grid-template-columns: 1fr;
  }

  .ds-profile-edit-visibility-line {
    grid-template-columns: 1fr;
  }

  .ds-profile-edit-picker {
    width: 100%;
  }

  .ds-profile-edit-picker-inline {
    width: auto;
  }

  .ds-profile-color-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* Mini-Korrektur 26.05.2026:
   Nur Profilgestaltung: Hintergrundfarbe bleibt volle Breite;
   Profilmuster, Profilbildposition und Akzentfarbe stehen darunter wieder nebeneinander.
   Der Selektor zielt bewusst auf den Profilgestaltungs-Grid mit Farbwahlfeld,
   damit keine anderen Bearbeiten-Bereiche verändert werden. */
@supports selector(:has(*)) {
  .ds-profile-edit-form-v1 .ds-profile-edit-accordion-body > .ds-profile-edit-grid.ds-profile-edit-grid-compact:has(> .ds-form-field-full .ds-profile-color-choice-grid) {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    align-items: start;
  }

  .ds-profile-edit-form-v1 .ds-profile-edit-accordion-body > .ds-profile-edit-grid.ds-profile-edit-grid-compact:has(> .ds-form-field-full .ds-profile-color-choice-grid) > .ds-form-field-full {
    grid-column: 1 / -1;
  }

  .ds-profile-edit-form-v1 .ds-profile-edit-accordion-body > .ds-profile-edit-grid.ds-profile-edit-grid-compact:has(> .ds-form-field-full .ds-profile-color-choice-grid) > .ds-form-field:not(.ds-form-field-full) .ds-profile-edit-picker {
    width: min(100%, 240px);
  }

  @media (max-width: 760px) {
    .ds-profile-edit-form-v1 .ds-profile-edit-accordion-body > .ds-profile-edit-grid.ds-profile-edit-grid-compact:has(> .ds-form-field-full .ds-profile-color-choice-grid) {
      grid-template-columns: 1fr;
    }
  }
}
/* Korrektur 14.05.2026:
   Nur Profilansicht + Auswahlbläschen-Farbe.
   Ziel: Vorname/Nachname sichtbar machen, Profilinformationen besser verteilen,
   Profilbild nicht aus der Mini-Thumbnail-Quelle strecken.
   Keine Feed-, Kommentar-, Radar-, Mein-Konto- oder Freundeslistenlogik. */

.ds-profile-summary.ds-profile-image-center {
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  gap: 20px 24px;
  align-items: start;
}

.ds-profile-summary.ds-profile-image-center .ds-profile-info-left {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  justify-self: stretch;
}

.ds-profile-summary.ds-profile-image-center .ds-profile-avatar-wrap {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.ds-profile-summary.ds-profile-image-center .ds-profile-info-right {
  grid-column: 3;
  grid-row: 1;
  text-align: left;
  justify-self: stretch;
}

.ds-profile-summary.ds-profile-image-left {
  grid-template-columns: auto minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 18px 24px;
  align-items: start;
}

.ds-profile-summary.ds-profile-image-left .ds-profile-avatar-wrap {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.ds-profile-summary.ds-profile-image-left .ds-profile-info-left {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  justify-self: stretch;
}

.ds-profile-summary.ds-profile-image-left .ds-profile-info-right {
  grid-column: 3;
  grid-row: 1;
  text-align: left;
  justify-self: stretch;
  margin-top: 0;
}

.ds-profile-summary.ds-profile-image-right {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap: 18px 24px;
  align-items: start;
}

.ds-profile-summary.ds-profile-image-right .ds-profile-info-left {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  justify-self: stretch;
}

.ds-profile-summary.ds-profile-image-right .ds-profile-info-right {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  justify-self: stretch;
  margin-top: 0;
}

.ds-profile-summary.ds-profile-image-right .ds-profile-avatar-wrap {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}

.ds-profile-summary .ds-profile-info-block {
  max-width: none;
}

.ds-profile-summary .ds-profile-line-block p,
.ds-profile-summary .ds-profile-contact-lines p {
  overflow-wrap: anywhere;
}

.ds-profile-summary .ds-profile-avatar-image {
  image-rendering: auto;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

@media (max-width: 980px) {
  .ds-profile-summary.ds-profile-image-center,
  .ds-profile-summary.ds-profile-image-left,
  .ds-profile-summary.ds-profile-image-right {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }

  .ds-profile-summary.ds-profile-image-center .ds-profile-info-left,
  .ds-profile-summary.ds-profile-image-center .ds-profile-avatar-wrap,
  .ds-profile-summary.ds-profile-image-center .ds-profile-info-right,
  .ds-profile-summary.ds-profile-image-left .ds-profile-info-left,
  .ds-profile-summary.ds-profile-image-left .ds-profile-avatar-wrap,
  .ds-profile-summary.ds-profile-image-left .ds-profile-info-right,
  .ds-profile-summary.ds-profile-image-right .ds-profile-info-left,
  .ds-profile-summary.ds-profile-image-right .ds-profile-avatar-wrap,
  .ds-profile-summary.ds-profile-image-right .ds-profile-info-right {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
    justify-self: stretch;
  }

  .ds-profile-summary .ds-profile-avatar-wrap {
    justify-self: center;
  }
}


/* --------------------------------------------------------------------------
   Digitana Social - Profilansicht Glasgruppen + Bildschaerfe 2026-05-14
   Nur Profilansicht: keine Feed-, Kommentar-, Freunde-, Radar- oder Kontoaenderung.
   -------------------------------------------------------------------------- */
.ds-profile-summary.ds-profile-summary-glass {
  align-items: start;
  padding: 34px 54px 36px;
  min-height: 0;
  background: transparent;
  border-bottom: 0;
}

.ds-profile-summary.ds-profile-summary-glass .ds-profile-info-block {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-self: start;
  max-width: none;
  min-width: 0;
}

.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center {
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  gap: 18px 32px;
  align-items: start;
}

.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-info-left,
.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-info-right {
  text-align: left;
  justify-self: stretch;
}

.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-avatar-wrap {
  align-self: start;
  justify-self: center;
  margin-top: 0;
}

.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-left {
  grid-template-columns: auto minmax(250px, 1fr) minmax(250px, 1fr);
  gap: 18px 30px;
}

.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-right {
  grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr) auto;
  gap: 18px 30px;
}

.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-left .ds-profile-info-left,
.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-left .ds-profile-info-right,
.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-right .ds-profile-info-left,
.ds-profile-summary.ds-profile-summary-glass.ds-profile-image-right .ds-profile-info-right {
  text-align: left;
  justify-self: stretch;
  align-self: start;
  margin-top: 0;
}

.ds-profile-summary.ds-profile-summary-glass .ds-profile-avatar-wrap {
  width: 112px;
  height: 112px;
  align-self: start;
  image-rendering: auto;
  transform: translateZ(0);
}

.ds-profile-summary.ds-profile-summary-glass .ds-profile-avatar-open,
.ds-profile-summary.ds-profile-summary-glass .ds-profile-avatar-image,
.ds-profile-summary.ds-profile-summary-glass .ds-profile-avatar-placeholder {
  width: 112px;
  height: 112px;
}

.ds-profile-summary.ds-profile-summary-glass .ds-profile-avatar-image {
  display: block;
  object-fit: cover;
  object-position: var(--ds-avatar-x, 50%) var(--ds-avatar-y, 50%);
  transform: translate3d(var(--ds-avatar-shift-x, 0%), var(--ds-avatar-shift-y, 0%), 0) scale(var(--ds-avatar-zoom, 1));
  transform-origin: center center;
  image-rendering: auto;
  backface-visibility: hidden;
  will-change: transform;
  filter: none;
}

.ds-profile-leitsatz-public {
  margin: 0 0 12px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.45;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--ds-profile-accent, #20a9ff) 34%, transparent),
    0 1px 0 #000000;
}

.ds-profile-glass-card {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 8px 11px;
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025) 42%, rgba(0,0,0,0.16)),
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.18));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ds-profile-accent, #20a9ff) 20%, rgba(255,255,255,0.12)),
    inset 0 1px 0 rgba(255,255,255,0.11),
    0 0 15px color-mix(in srgb, var(--ds-profile-accent, #20a9ff) 12%, transparent),
    0 8px 20px rgba(0,0,0,0.12);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.ds-profile-glass-card p {
  margin: 2px 0;
  color: #f2fbff;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.ds-profile-glass-card p:first-child {
  margin-top: 0;
}

.ds-profile-glass-card p:last-child {
  margin-bottom: 0;
}

.ds-profile-glass-card span {
  color: #d4eaff;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.ds-profile-glass-card a {
  color: #8ee3ff;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ds-profile-glass-card a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px color-mix(in srgb, var(--ds-profile-accent, #20a9ff) 42%, transparent);
}

.ds-profile-summary.ds-profile-image-center .ds-profile-info-left .ds-profile-glass-card,
.ds-profile-summary.ds-profile-image-left .ds-profile-info-left .ds-profile-glass-card,
.ds-profile-summary.ds-profile-image-right .ds-profile-info-left .ds-profile-glass-card,
.ds-profile-summary.ds-profile-image-center .ds-profile-info-left .ds-profile-leitsatz-public {
  align-self: flex-start;
}

.ds-profile-summary.ds-profile-image-center .ds-profile-info-right .ds-profile-glass-card,
.ds-profile-summary.ds-profile-image-left .ds-profile-info-right .ds-profile-glass-card,
.ds-profile-summary.ds-profile-image-right .ds-profile-info-right .ds-profile-glass-card {
  align-self: flex-start;
}

@media (max-width: 980px) {
  .ds-profile-summary.ds-profile-summary-glass,
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center,
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-left,
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-right {
    grid-template-columns: 1fr;
    padding: 24px 22px 28px;
    gap: 14px;
  }

  .ds-profile-summary.ds-profile-summary-glass .ds-profile-info-left,
  .ds-profile-summary.ds-profile-summary-glass .ds-profile-info-right,
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-info-left,
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-info-right {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
    justify-self: stretch;
  }

  .ds-profile-summary.ds-profile-summary-glass .ds-profile-avatar-wrap {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }

  .ds-profile-glass-card,
  .ds-profile-leitsatz-public {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Digitana Social - Profilansicht Layout-Hardfix + sanfte Verdichtung 2026-05-14
   NUR CSS Profilansicht: Bildposition links/mitte/rechts wieder erzwingen,
   Text/Glasblasen kleiner. Keine Logik-, Template-, Feed-, Freunde-, Radar- oder Kontoänderung.
   -------------------------------------------------------------------------- */

/* Sanfter, kompakter - ohne die Glasoptik selbst zu verändern. */
.ds-profile-summary.ds-profile-summary-glass {
  padding: 28px 44px 30px;
}

.ds-profile-summary.ds-profile-summary-glass .ds-profile-info-block {
  gap: 6px;
  font-size: 0.89rem;
  line-height: 1.26;
}

.ds-profile-leitsatz-public {
  margin: 0 0 8px;
  font-size: 0.90rem;
  line-height: 1.30;
}

.ds-profile-glass-card {
  padding: 5px 8px;
  border-radius: 9px;
}

.ds-profile-glass-card p {
  margin: 1px 0;
  font-size: 0.89rem;
  line-height: 1.27;
}

.ds-profile-glass-card span {
  letter-spacing: 0.008em;
}

/* Desktop-/Tabletbreite: NICHT auf Einspalte fallen lassen.
   Damit bleibt links/mittig/rechts auch bei schmaleren Desktopfenstern korrekt. */
@media (min-width: 761px) {
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
    gap: 16px 28px;
    align-items: start;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-info-left {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    justify-self: stretch;
    align-self: start;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-avatar-wrap {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    margin-top: 0;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-info-right {
    grid-column: 3;
    grid-row: 1;
    text-align: left;
    justify-self: stretch;
    align-self: start;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-left {
    display: grid;
    grid-template-columns: auto minmax(230px, 1fr) minmax(230px, 1fr);
    gap: 16px 26px;
    align-items: start;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-left .ds-profile-avatar-wrap {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    margin-top: 0;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-left .ds-profile-info-left {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    justify-self: stretch;
    align-self: start;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-left .ds-profile-info-right {
    grid-column: 3;
    grid-row: 1;
    text-align: left;
    justify-self: stretch;
    align-self: start;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-right {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(230px, 1fr) auto;
    gap: 16px 26px;
    align-items: start;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-right .ds-profile-info-left {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    justify-self: stretch;
    align-self: start;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-right .ds-profile-info-right {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    justify-self: stretch;
    align-self: start;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-right .ds-profile-avatar-wrap {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    margin-top: 0;
  }
}

/* Nur echte Handybreite: dann darf es einspaltig werden. */
@media (max-width: 760px) {
  .ds-profile-summary.ds-profile-summary-glass,
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center,
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-left,
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-right {
    display: grid;
    grid-template-columns: 1fr;
    padding: 22px 18px 24px;
    gap: 12px;
  }

  .ds-profile-summary.ds-profile-summary-glass .ds-profile-info-left,
  .ds-profile-summary.ds-profile-summary-glass .ds-profile-info-right,
  .ds-profile-summary.ds-profile-summary-glass .ds-profile-avatar-wrap {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    text-align: left;
  }

  .ds-profile-summary.ds-profile-summary-glass .ds-profile-avatar-wrap {
    justify-self: center;
  }

  .ds-profile-summary.ds-profile-summary-glass .ds-profile-info-block {
    gap: 6px;
    font-size: 0.88rem;
  }

  .ds-profile-glass-card p {
    font-size: 0.88rem;
    line-height: 1.25;
  }
}

/* --------------------------------------------------------------------------
   Digitana Social - Profilansicht Mitte: linke Textseite rechtsbuendig 2026-05-14
   NUR fuer Profilbildposition mittig: linke Glasgruppen zum Bild hin ausrichten.
   Keine Aenderung an Links/Rechts-Position, Logik, Groessen oder Funktionen.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-info-left {
    text-align: right;
    align-items: flex-end;
  }

  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-info-left .ds-profile-glass-card,
  .ds-profile-summary.ds-profile-summary-glass.ds-profile-image-center .ds-profile-info-left .ds-profile-leitsatz-public {
    align-self: flex-end;
  }
}

/* --------------------------------------------------------------------------
   Bearbeiten-Seite kompletter Feinschliff V1
   Obere Einstellungen, Push/Licht-Steuerung und Ziehharmonika-Bereiche.
   -------------------------------------------------------------------------- */
.ds-profile-edit-top-settings {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(210px, 0.85fr) minmax(230px, 1fr);
  gap: 16px 18px;
  align-items: start;
  margin-bottom: 14px;
}

.ds-profile-edit-setting-card {
  min-width: 0;
}

.ds-profile-edit-setting-card h2 {
  margin: 0 0 10px;
}

.ds-profile-edit-direct-options-compact {
  gap: 8px;
  margin-bottom: 0;
}

.ds-profile-edit-direct-status {
  min-height: 18px;
  margin: 7px 2px 0;
  color: #a8cbe2;
  font-size: 0.76rem;
  line-height: 1.35;
}

.ds-profile-edit-light-mode .ds-profile-edit-picker {
  width: min(100%, 260px);
}

.ds-profile-edit-light-mode-note {
  margin: 7px 2px 0;
  color: #a8cbe2;
  font-size: 0.76rem;
  line-height: 1.35;
}

.ds-profile-edit-section-profilelink .ds-profile-edit-link-row {
  margin-top: 14px;
}

.ds-profile-edit-accordion {
  display: block;
  margin: 0 0 12px;
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.72), rgba(8,23,36,0.80) 48%, rgba(0,0,0,0.78));
  box-shadow:
    inset 0 0 0 1px rgba(215,237,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 14px color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 10%, transparent);
  overflow: visible;
}

.ds-profile-edit-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-bottom: 1px solid transparent;
}

.ds-profile-edit-accordion-summary::-webkit-details-marker {
  display: none;
}

.ds-profile-edit-accordion-summary::marker {
  content: "";
}

.ds-profile-edit-accordion-summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--ds-profile-edit-accent, #20a9ff);
  font-size: 1.08rem;
  font-weight: 700;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 60%, transparent),
    0 1px 0 #000000;
}

.ds-profile-edit-accordion[open] .ds-profile-edit-accordion-summary {
  border-bottom-color: rgba(215,237,255,0.10);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ds-profile-edit-accent, #20a9ff) 18%, rgba(4,12,22,0.84)),
      rgba(4,12,22,0.74) 70%);
}

.ds-profile-edit-accordion[open] .ds-profile-edit-accordion-summary::after {
  content: "−";
}

.ds-profile-edit-accordion-body {
  padding: 14px 14px 16px;
  overflow: visible;
}

.ds-profile-edit-accordion-body .ds-profile-edit-visibility-grid,
.ds-profile-edit-accordion-body .ds-profile-edit-grid {
  margin-top: 2px;
}

@media (max-width: 1050px) {
  .ds-profile-edit-top-settings {
    grid-template-columns: 1fr;
  }

  .ds-profile-edit-light-mode .ds-profile-edit-picker {
    width: min(100%, 320px);
  }
}

@media (max-width: 820px) {
  .ds-profile-edit-grid {
    grid-template-columns: 1fr;
  }

  .ds-profile-edit-grid .ds-field-input,
  .ds-profile-edit-grid select.ds-field-input,
  .ds-profile-textarea {
    width: 100%;
    max-width: 100%;
  }
}