:root {
  --page-1: #06101d;
  --page-2: #0a1829;
  --page-3: #10233a;

  --card-1: #0b1929;
  --card-2: #10243a;
  --card-3: #0b1726;

  --gold: #d1ad69;
  --gold-soft: #ead7ad;
  --gold-dark: #9f7d3e;

  --white: #ffffff;
  --text: #f6f3ed;
  --muted: #aeb7c4;
  --muted-2: #7f8b9b;

  --line: rgba(255, 255, 255, 0.10);
  --line-gold: rgba(209, 173, 105, 0.30);

  --surface: rgba(255, 255, 255, 0.055);
  --surface-hover: rgba(255, 255, 255, 0.085);
}


/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {
  min-height: 100vh;

  margin: 0;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    var(--text);

  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(49, 85, 126, 0.30),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 22%,
      rgba(209, 173, 105, 0.10),
      transparent 24%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(33, 68, 105, 0.25),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      var(--page-1) 0%,
      var(--page-2) 52%,
      #050c15 100%
    );

  background-attachment:
    fixed;
}


a,
button {
  -webkit-tap-highlight-color:
    transparent;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.public-header {
  width: 100%;

  min-height:
    92px;

  padding:
    24px 34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  position:
    relative;
}


.public-back-button {
  position:
    absolute;

  left:
    30px;

  top:
    24px;

  min-height:
    42px;

  padding:
    0 16px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.07);

  color:
    var(--text);

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    650;

  cursor:
    pointer;

  -webkit-backdrop-filter:
    blur(18px);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.15);

  z-index:
    5;
}


.public-back-button:hover {
  background:
    rgba(255, 255, 255, 0.11);
}


.public-back-button[hidden] {
  display:
    none !important;
}


.public-back-icon {
  font-size:
    19px;

  line-height:
    1;
}


.public-brand {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    10px 17px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius:
    16px;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 14px 36px
    rgba(0, 0, 0, 0.16);
}


.public-brand img {
  display:
    block;

  width:
    138px;

  height:
    auto;
}


/*
|--------------------------------------------------------------------------
| SHELL
|--------------------------------------------------------------------------
*/

.public-shell {
  width:
    100%;

  max-width:
    790px;

  margin:
    0 auto;

  padding:
    14px 20px 54px;
}


.public-loading {
  padding:
    90px 20px;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    14px;
}


/*
|--------------------------------------------------------------------------
| MAIN CARD
|--------------------------------------------------------------------------
*/

.public-card {
  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  padding:
    42px;

  border:
    1px solid
    rgba(209, 173, 105, 0.28);

  border-radius:
    30px;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(209, 173, 105, 0.12),
      transparent 26%
    ),
    radial-gradient(
      circle at 0% 65%,
      rgba(63, 101, 143, 0.16),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      var(--card-1) 0%,
      var(--card-2) 48%,
      var(--card-3) 100%
    );

  box-shadow:
    0 38px 100px
    rgba(0, 0, 0, 0.42),
    inset 0 1px 0
    rgba(255, 255, 255, 0.05);
}


.public-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    42px;

  right:
    42px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(234, 215, 173, 0.70),
      transparent
    );

  pointer-events:
    none;
}


.public-card::after {
  content:
    "";

  position:
    absolute;

  width:
    310px;

  height:
    310px;

  right:
    -170px;

  bottom:
    -190px;

  border:
    1px solid
    rgba(209, 173, 105, 0.16);

  border-radius:
    50%;

  box-shadow:
    0 0 0 32px
      rgba(209, 173, 105, 0.025),
    0 0 0 72px
      rgba(209, 173, 105, 0.018);

  pointer-events:
    none;
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.public-card-top {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    auto minmax(0, 1fr) auto;

  align-items:
    center;

  gap:
    24px;
}


.public-portrait-wrap {
  width:
    104px;

  height:
    104px;

  flex:
    0 0 auto;

  overflow:
    hidden;

  border:
    2px solid
    rgba(234, 215, 173, 0.65);

  border-radius:
    50%;

  padding:
    3px;

  background:
    linear-gradient(
      145deg,
      rgba(209, 173, 105, 0.30),
      rgba(255, 255, 255, 0.04)
    );

  box-shadow:
    0 16px 40px
    rgba(0, 0, 0, 0.32);
}


.public-portrait {
  display:
    block;

  width:
    100%;

  height:
    100%;

  border-radius:
    50%;

  object-fit:
    cover;
}


.public-identity {
  min-width:
    0;
}


.public-identity h1 {
  margin:
    0;

  color:
    var(--white);

  font-size:
    clamp(
      29px,
      4vw,
      38px
    );

  line-height:
    1.04;

  letter-spacing:
    -0.045em;

  font-weight:
    730;
}


.public-position {
  margin:
    9px 0 0;

  color:
    var(--gold-soft);

  font-size:
    14px;

  line-height:
    1.45;

  font-weight:
    560;
}


.public-logo-wrap {
  width:
    150px;

  min-height:
    80px;

  padding:
    12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius:
    18px;

  background:
    rgba(255, 255, 255, 0.93);

  box-shadow:
    0 14px 36px
    rgba(0, 0, 0, 0.20);
}


.public-logo {
  display:
    block;

  max-width:
    124px;

  max-height:
    62px;

  object-fit:
    contain;
}


.public-divider {
  position:
    relative;

  z-index:
    1;

  margin:
    30px 0 24px;

  border-top:
    1px solid
    var(--line-gold);
}


/*
|--------------------------------------------------------------------------
| COMPANY
|--------------------------------------------------------------------------
*/

.public-company {
  position:
    relative;

  z-index:
    1;
}


.public-company h2 {
  margin:
    0;

  color:
    var(--text);

  font-size:
    17px;

  font-weight:
    690;

  letter-spacing:
    -0.015em;
}


.public-company p {
  max-width:
    580px;

  margin:
    7px 0 0;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.6;
}


/*
|--------------------------------------------------------------------------
| MAIN ACTIONS
|--------------------------------------------------------------------------
*/

.public-actions {
  position:
    relative;

  z-index:
    1;

  margin-top:
    28px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(0, 0.65fr);

  gap:
    10px;
}


.public-button {
  min-height:
    52px;

  padding:
    13px 20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    14px;

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    750;

  letter-spacing:
    0.01em;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}


.public-button:hover {
  transform:
    translateY(-1px);
}


.public-button-primary {
  border:
    1px solid
    var(--gold);

  background:
    linear-gradient(
      135deg,
      #e2c27f,
      #bd9148
    );

  color:
    #142033;

  box-shadow:
    0 12px 28px
    rgba(185, 138, 61, 0.20);
}


.public-button-primary:hover {
  background:
    linear-gradient(
      135deg,
      #ecd090,
      #c69a52
    );
}


.public-button-secondary {
  border:
    1px solid
    rgba(255, 255, 255, 0.15);

  background:
    rgba(255, 255, 255, 0.055);

  color:
    var(--text);
}


.public-button-secondary:hover {
  background:
    rgba(255, 255, 255, 0.09);
}


/*
|--------------------------------------------------------------------------
| WALLET
|--------------------------------------------------------------------------
|
| Wallet gehört in die Verwaltung des Karteninhabers.
| Auf der öffentlichen Kontaktseite wird es bewusst nicht angezeigt.
|--------------------------------------------------------------------------
*/

.public-wallet-actions {
  display:
    none !important;
}


/*
|--------------------------------------------------------------------------
| QUICK ACTIONS
|--------------------------------------------------------------------------
*/

.public-quick-actions {
  position:
    relative;

  z-index:
    1;

  margin-top:
    12px;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    9px;
}


.public-quick-button {
  min-height:
    48px;

  padding:
    11px 13px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius:
    14px;

  background:
    var(--surface);

  color:
    #e8edf4;

  font-size:
    12px;

  font-weight:
    690;

  text-decoration:
    none;

  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}


.public-quick-button:hover {
  transform:
    translateY(-1px);

  background:
    var(--surface-hover);

  border-color:
    rgba(209, 173, 105, 0.28);
}


#mailContactButton::before {
  content:
    "✉";

  margin-right:
    8px;

  color:
    var(--gold);
}


#callContactButton::before {
  content:
    "↗";

  margin-right:
    8px;

  color:
    var(--gold);
}


#websiteContactButton::before {
  content:
    "◎";

  margin-right:
    8px;

  color:
    var(--gold);
}


/*
|--------------------------------------------------------------------------
| DETAILS
|--------------------------------------------------------------------------
*/

.public-details {
  position:
    relative;

  z-index:
    1;

  margin-top:
    30px;

  padding-top:
    22px;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  column-gap:
    18px;

  row-gap:
    9px;

  border-top:
    1px solid
    var(--line-gold);
}


.public-detail-row {
  min-width:
    0;

  padding:
    14px 15px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  border:
    1px solid
    rgba(255, 255, 255, 0.075);

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.035);
}


.public-detail-label {
  color:
    var(--gold);

  font-size:
    9px;

  font-weight:
    760;

  text-transform:
    uppercase;

  letter-spacing:
    0.12em;
}


.public-detail-value {
  color:
    #edf1f5;

  font-size:
    12px;

  line-height:
    1.5;

  text-decoration:
    none;

  overflow-wrap:
    anywhere;
}


a.public-detail-value:hover {
  color:
    var(--gold-soft);
}


/*
|--------------------------------------------------------------------------
| ADDRESS
|--------------------------------------------------------------------------
*/

.public-address-block {
  position:
    relative;

  z-index:
    1;

  margin-top:
    10px;

  padding:
    15px;

  border:
    1px solid
    rgba(255, 255, 255, 0.075);

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.035);
}


.public-section-label {
  margin-bottom:
    7px;

  color:
    var(--gold);

  font-size:
    9px;

  font-weight:
    760;

  text-transform:
    uppercase;

  letter-spacing:
    0.12em;
}


.public-address {
  white-space:
    pre-line;

  color:
    #edf1f5;

  font-size:
    12px;

  line-height:
    1.55;
}


/*
|--------------------------------------------------------------------------
| SOCIALS
|--------------------------------------------------------------------------
*/

.public-socials {
  position:
    relative;

  z-index:
    1;

  margin-top:
    22px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.public-socials a {
  width:
    40px;

  height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(209, 173, 105, 0.25);

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, 0.06);

  transition:
    transform 160ms ease,
    background 160ms ease;
}


.public-socials a:hover {
  transform:
    translateY(-2px);

  background:
    rgba(209, 173, 105, 0.12);
}


.public-socials img {
  width:
    18px;

  height:
    18px;

  object-fit:
    contain;

  filter:
    brightness(0)
    invert(1);

  opacity:
    0.88;
}


/*
|--------------------------------------------------------------------------
| STATUS
|--------------------------------------------------------------------------
*/

.public-status {
  position:
    relative;

  z-index:
    1;

  min-height:
    18px;

  margin-top:
    18px;

  color:
    var(--muted);

  font-size:
    11px;
}


/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.public-footer {
  margin-top:
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  color:
    rgba(255, 255, 255, 0.44);

  font-size:
    10px;
}


.public-footer a {
  color:
    var(--gold-soft);

  font-weight:
    720;

  text-decoration:
    none;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
  max-width: 600px
) {

  .public-header {
    min-height:
      76px;

    padding:
      16px 18px;
  }


  .public-back-button {
    left:
      14px;

    top:
      17px;

    width:
      40px;

    height:
      40px;

    min-height:
      40px;

    padding:
      0;
  }


  .public-back-label {
    display:
      none;
  }


  .public-brand {
    padding:
      8px 13px;

    border-radius:
      13px;
  }


  .public-brand img {
    width:
      116px;
  }


  .public-shell {
    padding:
      6px 11px 32px;
  }


  .public-card {
    padding:
      26px 20px 24px;

    border-radius:
      24px;
  }


  .public-card::before {
    left:
      24px;

    right:
      24px;
  }


  .public-card-top {
    grid-template-columns:
      76px minmax(0, 1fr);

    align-items:
      center;

    gap:
      15px;
  }


  .public-portrait-wrap {
    width:
      76px;

    height:
      76px;
  }


  .public-identity h1 {
    font-size:
      26px;
  }


  .public-position {
    margin-top:
      6px;

    font-size:
      12px;
  }


  .public-logo-wrap {
    grid-column:
      1 / -1;

    width:
      auto;

    min-height:
      0;

    margin-top:
      5px;

    padding:
      10px 13px;

    justify-self:
      start;

    border-radius:
      13px;
  }


  .public-logo {
    max-width:
      112px;

    max-height:
      48px;
  }


  .public-divider {
    margin:
      23px 0 19px;
  }


  .public-company h2 {
    font-size:
      16px;
  }


  .public-company p {
    font-size:
      12px;
  }


  .public-actions {
    grid-template-columns:
      1fr;

    margin-top:
      22px;
  }


  .public-button {
    min-height:
      50px;
  }


  .public-quick-actions {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .public-quick-button {
    min-height:
      48px;

    padding:
      9px 6px;

    font-size:
      11px;
  }


  #mailContactButton::before,
  #callContactButton::before,
  #websiteContactButton::before {
    display:
      none;
  }


  .public-details {
    grid-template-columns:
      1fr;

    margin-top:
      24px;
  }


  .public-detail-row {
    padding:
      13px 14px;
  }

}


@media (
  max-width: 390px
) {

  .public-card {
    padding:
      23px 17px 22px;
  }


  .public-card-top {
    grid-template-columns:
      68px minmax(0, 1fr);
  }


  .public-portrait-wrap {
    width:
      68px;

    height:
      68px;
  }


  .public-identity h1 {
    font-size:
      23px;
  }


  .public-quick-actions {
    gap:
      6px;
  }


  .public-quick-button {
    font-size:
      10px;
  }

}


/*
|--------------------------------------------------------------------------
| SIGBUY PUBLIC V-CARD — FINAL POLISH
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Card separation / depth
|--------------------------------------------------------------------------
*/

.public-card {
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(209, 173, 105, 0.16),
      transparent 25%
    ),
    radial-gradient(
      circle at 3% 72%,
      rgba(74, 112, 154, 0.18),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #102238 0%,
      #142b45 46%,
      #0c1b2d 100%
    );

  border-color:
    rgba(209, 173, 105, 0.38);

  box-shadow:
    0 42px 110px
      rgba(0, 0, 0, 0.50),
    0 0 0 1px
      rgba(255, 255, 255, 0.025),
    inset 0 1px 0
      rgba(255, 255, 255, 0.07);
}


/*
|--------------------------------------------------------------------------
| Stronger hero
|--------------------------------------------------------------------------
*/

.public-card-top {
  gap:
    28px;
}


.public-portrait-wrap {
  width:
    112px;

  height:
    112px;

  border-width:
    2px;

  box-shadow:
    0 18px 46px
      rgba(0, 0, 0, 0.38),
    0 0 0 5px
      rgba(209, 173, 105, 0.045);
}


.public-identity h1 {
  font-size:
    clamp(
      34px,
      4.6vw,
      43px
    );

  font-weight:
    760;

  letter-spacing:
    -0.05em;
}


.public-position {
  margin-top:
    8px;

  font-size:
    13px;

  color:
    #e3c98f;
}


/*
|--------------------------------------------------------------------------
| Company logo slightly quieter
|--------------------------------------------------------------------------
*/

.public-logo-wrap {
  width:
    132px;

  min-height:
    72px;

  padding:
    10px 12px;

  border-radius:
    16px;

  background:
    rgba(255, 255, 255, 0.96);
}


.public-logo {
  max-width:
    108px;

  max-height:
    54px;
}


/*
|--------------------------------------------------------------------------
| Company closer to hero
|--------------------------------------------------------------------------
*/

.public-divider {
  margin:
    23px 0 17px;
}


.public-company h2 {
  font-size:
    16px;
}


.public-company p {
  margin-top:
    5px;

  font-size:
    11px;

  letter-spacing:
    0.035em;

  color:
    #9ca9b8;
}


/*
|--------------------------------------------------------------------------
| Main actions slightly tighter
|--------------------------------------------------------------------------
*/

.public-actions {
  margin-top:
    23px;
}


.public-button {
  min-height:
    50px;

  border-radius:
    13px;
}


/*
|--------------------------------------------------------------------------
| Quick actions
|--------------------------------------------------------------------------
*/

.public-quick-actions {
  margin-top:
    10px;
}


.public-quick-button {
  min-height:
    46px;

  border-radius:
    12px;
}


/*
|--------------------------------------------------------------------------
| Compact data area
|--------------------------------------------------------------------------
*/

.public-details {
  margin-top:
    24px;

  padding-top:
    18px;

  column-gap:
    12px;

  row-gap:
    7px;
}


.public-detail-row {
  padding:
    10px 12px;

  gap:
    4px;

  border-radius:
    12px;
}


.public-detail-label {
  font-size:
    8px;

  letter-spacing:
    0.13em;
}


.public-detail-value {
  font-size:
    11px;

  line-height:
    1.38;
}


/*
|--------------------------------------------------------------------------
| Address compact
|--------------------------------------------------------------------------
*/

.public-address-block {
  margin-top:
    7px;

  padding:
    11px 12px;

  border-radius:
    12px;
}


.public-section-label {
  margin-bottom:
    4px;

  font-size:
    8px;
}


.public-address {
  font-size:
    11px;

  line-height:
    1.42;
}


/*
|--------------------------------------------------------------------------
| Socials
|--------------------------------------------------------------------------
*/

.public-socials {
  margin-top:
    17px;

  gap:
    8px;
}


.public-socials a {
  width:
    36px;

  height:
    36px;
}


.public-socials img {
  width:
    16px;

  height:
    16px;
}


/*
|--------------------------------------------------------------------------
| Footer quieter
|--------------------------------------------------------------------------
*/

.public-footer {
  margin-top:
    18px;

  opacity:
    0.78;
}


/*
|--------------------------------------------------------------------------
| Mobile polish
|--------------------------------------------------------------------------
*/

@media (
  max-width: 600px
) {

  .public-card {
    padding:
      24px 18px 22px;
  }


  .public-card-top {
    grid-template-columns:
      82px minmax(0, 1fr);

    gap:
      14px;
  }


  .public-portrait-wrap {
    width:
      82px;

    height:
      82px;
  }


  .public-identity h1 {
    font-size:
      27px;
  }


  .public-position {
    font-size:
      11px;
  }


  .public-logo-wrap {
    width:
      auto;

    min-height:
      0;

    padding:
      8px 11px;
  }


  .public-logo {
    max-width:
      102px;

    max-height:
      44px;
  }


  .public-divider {
    margin:
      20px 0 15px;
  }


  .public-company h2 {
    font-size:
      15px;
  }


  .public-company p {
    font-size:
      10px;
  }


  .public-actions {
    margin-top:
      19px;
  }


  .public-details {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    column-gap:
      7px;

    row-gap:
      7px;
  }


  .public-detail-row {
    padding:
      10px;
  }


  .public-detail-value {
    font-size:
      10px;
  }


  .public-address {
    font-size:
      10px;
  }

}


@media (
  max-width: 420px
) {

  .public-details {
    grid-template-columns:
      1fr;
  }

}