@charset "UTF-8";

/* ============================================================
   Profile page additions
   ------------------------------------------------------------
   Ergänzungen nur für profil.php / body.profil-page
   Abhängig von Variablen aus main-min.css:
   --color-11, --color-13, --color-14, --color-15,
   --color-19, --color-21
============================================================ */


/* ============================================================
   01 Share button in right corner stack
============================================================ */

.profil-page .profile-share-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;
  box-sizing: border-box;

  background-color: var(--color-13);
  border-top: 1px solid var(--color-11);
  border-right: 0;
  border-left: 0;

  color: var(--color-11);
  text-decoration: none;

  cursor: pointer;
  transition:
    background-color .3s ease,
    color .3s ease,
    transform .2s ease;
}

.profil-page .profile-share-box::before {
  content: "";
  display: block;

  width: 18px;
  height: 18px;

  background-color: currentColor;

  -webkit-mask: url("../share.svg") no-repeat center / contain;
  mask: url("../share.svg") no-repeat center / contain;

  transition: background-color .3s ease, opacity .3s ease;
}

.profil-page .profile-share-box:hover,
.profil-page .profile-share-box:focus-visible {
  background-color: var(--color-21);
  color: var(--color-14);
}

.profil-page .profile-share-box:focus-visible {
  outline: 2px solid var(--color-19);
  outline-offset: 0;
}


/* Reihenfolge innerhalb der bestehenden corner-stack */

.profil-page .corner-stack .profile-share-box {
  order: 1;
}

.profil-page .corner-stack .help-box {
  order: 2;
}

.profil-page .corner-stack .return-box {
  order: 3;
}


/* ============================================================
   02 Share menu
============================================================ */

.profil-page .profile-share-menu {
  position: fixed;
  right: calc(2.5rem + .75rem);
  bottom: 3rem;
  z-index: 3000;

  width: 260px;
  min-width: 260px;
  padding: .75rem 0;
  box-sizing: border-box;

  background: rgba(0, 0, 0, 1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.profil-page .profile-share-menu[hidden] {
  display: none !important;
}

.profil-page .profile-share-option {
  display: block;

  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;

  background: transparent;
  border: 0;

  color: #f3f1ed !important;
  font: inherit;
  letter-spacing: .0825rem;
  text-align: left;
  text-decoration: none;

  cursor: pointer;
}

.profil-page .profile-share-option:hover,
.profil-page .profile-share-option:focus-visible {
  background: var(--color-19);
  outline: none;
}


/* ============================================================
   03 Profile text blocks
   ------------------------------------------------------------
   Für profile_front_render_profile_text_block(...)
============================================================ */

.profil-page .profile-section-title {
  margin: 0 0 .15rem;
}

.profil-page .description .profile-text-paragraph {
  margin: 0 0 .95rem;
}


/* Listen mit sauberem hängendem Einzug */

.profil-page .description .profile-inline-list {
  margin: .15rem 0 .95rem;
  padding-left: 0;
  list-style: none;
}

.profil-page .description .profile-inline-list li {
  display: grid;
  grid-template-columns: 1.15em minmax(0, 1fr);
  column-gap: .25em;

  margin: 0 0 .25rem;
  padding: 0;

  overflow-wrap: anywhere;
}

.profil-page .description .profile-inline-list li::before {
  content: "—";
  grid-column: 1;
}

.profil-page .description .profile-inline-list li > * {
  min-width: 0;
}


/* Lange Links innerhalb Profiltext sauber umbrechen */

.profil-page .description .profile-text-paragraph a,
.profil-page .description .profile-inline-list a {
  display: inline !important;

  max-width: 100%;

  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;

  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}


/* ============================================================
   04 Footer alignment on profile page
============================================================ */

.profil-page .footer-wrapper footer {
  width: 100%;
  max-width: calc(800px - 1em);
  margin: 0 0 0 1em;
  box-sizing: border-box;
}


/* ============================================================
   05 Tablet / mobile
============================================================ */

@media (max-width: 1024px) {
  .profil-page .profile-share-box {
    background-color: var(--color-15);
    border-top: 1px solid var(--color-13);
    color: var(--color-14);
  }

  .profil-page .profile-share-box:hover,
  .profil-page .profile-share-box:focus-visible {
    background-color: var(--color-21);
    color: var(--color-14);
  }
}

@media (max-width: 768px) {
  .profil-page .profile-share-menu {
    right: .5rem;
    left: .5rem;
    bottom: calc(8rem + env(safe-area-inset-bottom, 0px));

    width: auto;
    min-width: 0;
  }

  .profil-page .footer-wrapper {
    width: calc(100vw - 2.5rem);
    margin: 0;
  }

  .profil-page .footer-wrapper footer {
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  .profil-page .footertext {
    margin: .625rem auto;
    text-align: center;
  }
}