/* ========================
   Reset & Variablen
======================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --brand: #076584;
  --brand-hover: #047683;
  --bg-light: #f8f9fa;
  --bg-dark: #222c32;
  --text-light: #212529;
  --text-dark: #f8f9fa;
}

/* ========================
   Grundlayout & Farben
======================== */
html, body {
  min-width: 360px;
  min-height: 100svh;
  height: 100svh;
  background-color: var(--bg-light);
  color: var(--text-light);
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  min-width: 0;
}
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: var(--bg-dark);
    color: var(--text-dark);
  }
}

/* ========================
   Linktree-Zentrierung (perfekt auch mobil)
======================== */
.content-wrapper {
  min-height: 100svh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

/* ========================
   Logo-Profilbild – garantiert rund und immer zentriert
======================== */
.logo-profile {
  width: min(50vw, 50svh, 220px);
  height: min(50vw, 50svh, 220px);
  border-radius: 50%;
  background: #fff;
  margin: 0 auto 2rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
  overflow: hidden;
}

.logo-profile img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: auto;
}

/* Bei ganz kleinen Geräten das Profilbild nicht zu groß */
@media (max-width: 600px) {
  .logo-profile {
    width: min(80vw, 45svh, 140px);
    height: min(80vw, 45svh, 140px);
  }
}

/* ========================
   Center-Box für Buttons
======================== */
.center-box {
  width: 100%;
  max-width: 400px;
  min-width: 320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.5rem;
  box-sizing: border-box;
  background: transparent;
}

/* ========================
   Buttons: Brand-Design, Touch-Größe
======================== */
.center-box .btn {
  width: 100%;
  margin-bottom: 0.5rem;
  min-height: 44px;
  font-size: 1.1rem;
  font-family: inherit;
  border-radius: 0.4rem;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
}
.center-box .btn:last-child { margin-bottom: 0; }

/* Buttons: Standard Brand-Farbe, Hover/Focus/Klick = Hover-Farbe */
.btn, .btn-primary, .btn-secondary {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  transition: background 0.2s, border-color 0.2s;
  outline: none !important;
  box-shadow: none !important;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn:focus-visible {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: #fff !important;
}

/* Ausnahme: Modal-Footer Buttons = immer Hover-Farbe */
.modal-footer .btn,
.modal-footer .btn-primary,
.modal-footer .btn-secondary {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: #fff !important;
}
.modal-footer .btn:hover,
.modal-footer .btn:focus,
.modal-footer .btn:active,
.modal-footer .btn:focus-visible {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: #fff !important;
}

/* ========================
   Modals – Seite scrollt, Modal darkmode
======================== */
.modal-dialog,
.modal-content {
  max-height: none !important;
  overflow: visible !important;
}
.modal-body {
  overflow: visible !important;
  max-height: none !important;
  padding: 1rem;
}
.modal-header,
.modal-footer {
  position: sticky;
  z-index: 1020;
  background-color: var(--brand) !important;
  border-color: rgba(255,255,255,0.1);
}
.modal-header { top: 0; }
.modal-footer { bottom: 0; }
/* Modal-Header/Footer Text & Close-Button weiß */
.modal-header .btn-close,
.modal-header *,
.modal-footer * {
  color: #fff !important;
}
/* Darkmode: Modal-Hintergrund & Text */
@media (prefers-color-scheme: dark) {
  .modal-content {
    background-color: var(--bg-dark) !important;
    color: var(--text-dark) !important;
  }
  .modal-body {
    background-color: transparent !important;
    color: var(--text-dark) !important;
  }
  .modal-header,
  .modal-footer {
    background-color: var(--brand) !important;
    color: #fff !important;
  }
}

/* ========================
   Responsive Buttons & Box
======================== */
@media (max-width: 600px) {
  .center-box { max-width: 100%; }
}
@media (max-width: 400px) {
  .center-box { padding: 0.5rem 0.1rem; }
  .modal .modal-dialog { max-width: 100%; }
}

/* ========================
   Body-Scrolling bei offenen Modals erlauben
======================== */
body.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

/* ========================
   MODAL X IMMER WEISS
======================== */
.modal .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27%3e%3cline x1=%274%27 y1=%274%27 x2=%2712%27 y2=%2712%27 stroke=%27white%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3e%3cline x1=%2712%27 y1=%274%27 x2=%274%27 y2=%2712%27 stroke=%27white%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3e%3c/svg%3e") !important;
  background-size: 1em 1em;
  opacity: 1 !important;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}
.modal .btn-close:focus,
.modal .btn-close:active,
.modal .btn-close:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27%3e%3cline x1=%274%27 y1=%274%27 x2=%2712%27 y2=%2712%27 stroke=%27white%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3e%3cline x1=%2712%27 y1=%274%27 x2=%274%27 y2=%2712%27 stroke=%27white%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3e%3c/svg%3e") !important;
  background-size: 1em 1em;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
}