/* ============================================================
   meinebio.site – Bio-Seite (öffentlich)
   Design: Skalierte Version des Phone-Mockup-Designs
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --yellow:      #F2D000;
  --yellow-dark: #C8A900;
  --accent:      #F2D000;
  --dark:        #111111;
  --dark-mid:    #1E1E1E;
  --bg:          #F7F7F5;
  --gray-light:  #EDEDED;
  --gray-mid:    #6B6B6B;
  --gray-border: #D8D8D8;
  --white:       #FFFFFF;
  --radius-pill: 999px;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------------
   Bio-Container (zentriert, Phone-like)
   ---------------------------------------------------------------- */

.bio-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 48px;
}

.bio-previewbar {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  max-width: 480px;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.8125rem;
}

.bio-card {
  width: 100%;
  max-width: 480px;
  background: var(--bg);
  position: relative;
}

/* ----------------------------------------------------------------
   Cover
   ---------------------------------------------------------------- */

.bio-cover {
  width: 100%;
  aspect-ratio: 12 / 5;
  background: var(--accent);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.bio-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

.bio-cover__shape {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.15;
}

/* ----------------------------------------------------------------
   Avatar
   ---------------------------------------------------------------- */

.bio-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-top: -52px;
  position: relative;
  z-index: 1;
}

.bio-avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  background: linear-gradient(135deg, var(--accent) 0%, #111111 180%);
  overflow: hidden;
  flex-shrink: 0;
}

.bio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

.bio-page.avatar-rounded .bio-avatar { border-radius: 20px; }
.bio-page.avatar-square .bio-avatar { border-radius: 10px; }

/* ----------------------------------------------------------------
   Body
   ---------------------------------------------------------------- */

.bio-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 28px 32px;
  gap: 0;
}

.bio-name {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-align: center;
  margin-bottom: 8px;
  color: var(--dark);
}

.bio-role-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.bio-page.badge-light .bio-role-badge { color: #FFFFFF; }
.bio-page.badge-dark .bio-role-badge { color: #111111; }

/* Name color variants */
.bio-page.name-light .bio-name { color: #FFFFFF; }
.bio-page.name-accent .bio-name { color: var(--accent); }
/* name-dark is the default, no override needed */

.bio-tagline {
  font-size: 0.9375rem;
  color: var(--dark);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 20px;
  font-weight: 500;
  max-width: 380px;
}

/* ----------------------------------------------------------------
   Social Icons
   ---------------------------------------------------------------- */

.bio-socials {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* Socials: unter Avatar (Standard) */
.bio-socials--avatar {
  margin-top: 12px;
  margin-bottom: 10px;
}
.bio-socials--text {
  display: none;
}

/* Wenn "unter Text" aktiv: Avatar-Socials ausblenden, Text-Socials einblenden */
.bio-page.socials-under_text .bio-socials--avatar { display: none; }
.bio-page.socials-under_text .bio-socials--text   { display: flex; }

/* Links-Position: Standard = oberhalb Textblöcke */
.bio-links--top   { display: none; margin-bottom: 16px; }
.bio-links--above { margin-bottom: 16px; }
.bio-links--below { display: none; }

.bio-page.links-above_tagline    .bio-links--top   { display: flex; }
.bio-page.links-above_tagline    .bio-links--above { display: none; }
.bio-page.links-above_tagline    .bio-links--below { display: none; }

.bio-page.links-above_textblocks .bio-links--top   { display: none; }
.bio-page.links-above_textblocks .bio-links--above { display: flex; }
.bio-page.links-above_textblocks .bio-links--below { display: none; }

.bio-page.links-below_textblocks .bio-links--top   { display: none; }
.bio-page.links-below_textblocks .bio-links--above { display: none; }
.bio-page.links-below_textblocks .bio-links--below { display: flex; }

.bio-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--gray-light);
  color: var(--dark);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.bio-social:hover {
  background: var(--gray-light);
  border-color: var(--gray-border);
  transform: translateY(-1px);
}

.bio-social svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------------
   Sections (Über mich, Angebote, etc.)
   ---------------------------------------------------------------- */

.bio-section {
  width: 100%;
  margin-bottom: 20px;
}

.bio-section-title {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-bottom: 10px;
}

.bio-section-text {
  font-size: 0.9375rem;
  color: var(--gray-mid);
  line-height: 1.75;
}

/* Highlights (Bullet-Liste) */
.bio-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bio-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--dark);
}

.bio-highlight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Divider
   ---------------------------------------------------------------- */

.bio-divider {
  width: 100%;
  height: 1px;
  background: var(--gray-light);
  margin-bottom: 20px;
}

/* ----------------------------------------------------------------
   Block types: Heading, Divider (user-defined), YouTube
   ---------------------------------------------------------------- */

.bio-block-heading {
  width: 100%;
  text-align: left;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dark);
  padding: 4px 0 8px;
  line-height: 1.25;
}
.bio-block-heading--center { text-align: center !important; }
.bio-block-heading--right  { text-align: right !important; }

hr.bio-block-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--gray-light);
  margin: 4px 0;
  border-radius: 0;
}
hr.bio-block-divider--medium { border-top-width: 3px; }
hr.bio-block-divider--thick  { border-top-width: 6px; border-radius: 3px; }
hr.bio-block-divider--dark   { border-top-color: #111111; }
hr.bio-block-divider--light  { border-top-color: #ffffff; }
hr.bio-block-divider--accent { border-top-color: var(--accent); }

.bio-youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.bio-youtube iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ----------------------------------------------------------------
   Links / Buttons
   ---------------------------------------------------------------- */

.bio-links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.bio-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 16px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid var(--gray-light);
  background: var(--white);
  color: var(--dark);
}

.bio-link:hover {
  border-color: var(--gray-border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.bio-link--contact {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.bio-link--contact:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
  transform: translateY(-1px);
}

.bio-text-block {
  cursor: default;
  font-weight: 400;
  text-align: center;
  justify-content: center;
  align-items: center;
  line-height: 1.55;
}
/* Karte – hell */
.bio-link.bio-text-block--card {
  background: #fff !important;
  border: 1.5px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.13) !important;
  border-radius: 14px !important;
  color: #111 !important;
}
/* Karte – dunkel (textblock-dark) */
.bio-page.textblock-dark .bio-link.bio-text-block--card {
  background: #1E2130 !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.5) !important;
  color: #F0F0F0 !important;
}
/* Zitat – hell */
.bio-link.bio-text-block--quote {
  background: rgba(0,0,0,.04) !important;
  border: none !important;
  border-left: 4px solid rgba(0,0,0,.35) !important;
  border-radius: 0 6px 6px 0 !important;
  padding-left: 18px !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  font-style: italic;
}
/* Zitat – dunkel */
.bio-page.textblock-dark .bio-link.bio-text-block--quote {
  background: rgba(255,255,255,.06) !important;
  border-left: 4px solid rgba(255,255,255,.45) !important;
}
/* Integriert – kein Hintergrund, keine Umrandung */
.bio-link.bio-text-block--plain {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
/* Per-Block Textfarbe */
.bio-link.bio-text-block--color-dark  { color: #111111 !important; }
.bio-link.bio-text-block--color-light { color: #ffffff !important; }

/* YouTube Ausrichtung */
.bio-youtube--left   { width: 78%; margin-right: auto; }
.bio-youtube--right  { width: 78%; margin-left: auto; }

.bio-page.textblock-dark .bio-link.bio-text-block {
  background: #121317;
  color: #F8F8F8;
  border-color: #121317;
}

.bio-page.textblock-light .bio-link.bio-text-block {
  background: #FFFFFF;
  color: #111111;
  border-color: #EDEDED;
}

.bio-page.textalign-left .bio-body {
  align-items: flex-start;
}

.bio-page.textalign-left .bio-name,
.bio-page.textalign-left .bio-tagline,
.bio-page.textalign-left .bio-role-badge {
  text-align: left;
}

.bio-page.textalign-left .bio-socials {
  align-self: center;
}

.bio-page.textalign-left .bio-text-block {
  justify-content: flex-start;
  text-align: left;
}

.bio-page.textalign-center .bio-text-block {
  justify-content: center;
  text-align: center;
}

/* ----------------------------------------------------------------
   Kontakt-Sheet (Bottom Sheet)
   ---------------------------------------------------------------- */

.bio-contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.bio-contact-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.bio-contact-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.bio-contact-sheet.open {
  transform: translateY(0);
}

.bio-contact-sheet__inner {
  background: var(--white);
  border-top: 1px solid var(--gray-light);
  border-radius: 24px 24px 0 0;
  padding: 8px 20px 32px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.12);
}

.bio-contact-sheet__handle {
  width: 40px;
  height: 4px;
  background: var(--gray-border);
  border-radius: 2px;
  margin: 12px auto 20px;
}

.bio-contact-sheet__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  text-align: center;
}

.bio-contact-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.bio-contact-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 14px;
  transition: background 0.15s;
}

.bio-contact-option:hover { background: var(--gray-light); }

.bio-contact-option__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bio-contact-option__icon--mail { background: #EEF2FF; color: #4F46E5; }
.bio-contact-option__icon--wa   { background: #DCFCE7; color: #16A34A; }
.bio-contact-option__icon--web  { background: #FEF3C7; color: #D97706; }
.bio-contact-option__icon svg   { width: 20px; height: 20px; }

.bio-contact-option__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bio-contact-option__text strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--dark);
}

.bio-contact-option__text small {
  font-size: 0.8125rem;
  color: var(--gray-mid);
}

.bio-contact-sheet__close {
  width: 100%;
  background: none;
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  padding: 11px;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-mid);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.bio-contact-sheet__close:hover { border-color: var(--dark); color: var(--dark); }

/* ----------------------------------------------------------------
   Legal Links
   ---------------------------------------------------------------- */

.bio-legal {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.75rem;
  color: var(--gray-mid);
  margin-top: 8px;
}

.bio-legal a { color: var(--gray-mid); }
.bio-legal a:hover { color: var(--dark); text-decoration: underline; }

.bio-poweredby {
  display: block;
  text-align: center;
  font-size: 0.6875rem;
  color: rgba(107,107,107,0.55);
  margin-top: 12px;
  padding-bottom: 20px;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.bio-poweredby:hover { color: rgba(107,107,107,0.9); }

/* ----------------------------------------------------------------
   Theme Variants
   ---------------------------------------------------------------- */

.bio-page.theme-minimal {
  --bg: #FAFAFA;
  --white: #FFFFFF;
  --gray-light: #ECECEC;
  --gray-border: #E2E2E2;
}

.bio-page.theme-minimal .bio-card {
  max-width: 460px;
}

.bio-page.theme-minimal .bio-cover {
  aspect-ratio: 12 / 5;
}

.bio-page.theme-bold {
  --bg: #0F1013;
  --dark: #F5F7FA;
  --white: #1A1D23;
  --gray-light: #262A32;
  --gray-mid: #A3ADBD;
  --gray-border: #2F3641;
}

.bio-page.theme-bold .bio-cover {
  background: linear-gradient(120deg, #151922 0%, #232935 100%);
}

.bio-page.theme-bold .bio-tagline {
  color: #DBE2EC;
}

.bio-page.theme-bold .bio-link {
  background: #1A1D23;
  color: #F5F7FA;
  border-color: #2F3641;
}

.bio-page.theme-bold .bio-link:hover {
  border-color: #3A4454;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* Button-Stil gilt nur für Links/Buttons, nicht für Textboxen */
.bio-page.btn-rounded .bio-link:not(.bio-text-block) { border-radius: 16px; }
.bio-page.btn-pill .bio-link:not(.bio-text-block)    { border-radius: 999px; }
.bio-page.btn-square .bio-link:not(.bio-text-block)  { border-radius: 10px; }

/* ----------------------------------------------------------------
   Responsive (ab 480px Card mit Schatten)
   ---------------------------------------------------------------- */

@media (min-width: 520px) {
  .bio-page { padding: 40px 20px 60px; }
  .bio-card {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.1);
  }
  .bio-contact-sheet__inner { border-radius: 24px 24px 0 0; }
}

@media (max-width: 519px) {
  .bio-page { padding: 0; }
  .bio-card { border-radius: 0; }
}