/* ============================================================
   MaHe Author Box v2.2.0 – Eyecatcher Edition
   ============================================================ */

:root {
  --mahe-ab-accent:     #cc0000;
  --mahe-ab-photo-size: 80px;
  --mahe-ab-radius:     16px;
  --mahe-ab-bg:         transparent;
  --mahe-ab-text:       inherit;
  --mahe-ab-name-size:        1.25em;
  --mahe-ab-contact-size:     0.95em;
  --mahe-ab-contact-size-mob: 0.88em;
  /* Social Buttons Desktop */
  --soc-min-w:    160px;
  --soc-pad:      9px 18px 9px 11px;
  --soc-icon:     28px;
  --soc-name:     0.78em;
  --soc-sub:      0.65em;
  --soc-gap:      9px;
  /* Social Buttons Mobile */
  --soc-min-w-mob:  120px;
  --soc-pad-mob:    7px 12px 7px 9px;
  --soc-icon-mob:   24px;
  --soc-name-mob:   0.72em;
  --soc-sub-mob:    0.60em;
  --soc-gap-mob:    7px;
  --mahe-ab-name-size-mobile:  1.1em;
  --mahe-ab-label-size:        0.7rem;
  --mahe-ab-label-size-mobile: 0.7rem;
  --mahe-ab-role-size-mobile:  0.95em;
  --mahe-ab-bio-size-mobile:   0.97em;
  --mahe-ab-role-size:  1.05em;
  --mahe-ab-bio-size:   1.05em;
  --mahe-ab-bio-align:  center;
}

/* ── Wrapper ───────────────────────────────────────────────── */
.mahe-ab {
  margin: 32px auto;
  font-size: 1rem;
  color: var(--mahe-ab-text);
  max-width: 680px;   /* kompakt auf Desktop */
  width: 100%;        /* volle Breite auf Mobile */
}

/* ── Label (Überschrift über der Box) ──────────────────────── */
.mahe-ab__label {
  font-size: var(--mahe-ab-label-size, .7rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .45;
  margin-bottom: 10px;
  text-align: center;
}

/* ============================================================
   STIL: LINE (Standard – horizontales Layout, Linien)
   ============================================================ */
.mahe-ab--line .mahe-ab__inner {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-top:    2px solid rgba(0,0,0,.07);
  border-bottom: 2px solid rgba(0,0,0,.07);
  background: transparent;
}

/* ============================================================
   STIL: CARD – zentriert, volle Breite, visuell stark
   ============================================================ */
.mahe-ab--card .mahe-ab__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        28px 32px 24px;
  border-radius:  var(--mahe-ab-radius);
  background:     var(--mahe-ab-bg, #f8f8f8);
  border:         1px solid rgba(0,0,0,.08);
  box-shadow:     0 2px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  position:       relative;
  overflow:       hidden;
}

/* Dezenter Akzentstreifen oben */
.mahe-ab--card .mahe-ab__inner::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     4px;
  background: var(--mahe-ab-accent);
  border-radius: var(--mahe-ab-radius) var(--mahe-ab-radius) 0 0;
}

/* ============================================================
   STIL: NONE
   ============================================================ */
.mahe-ab--none .mahe-ab__inner {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 0;
  background: transparent;
}

/* ── Foto ──────────────────────────────────────────────────── */
.mahe-ab__photo {
  flex: 0 0 auto;
}

/* Card: Foto bekommt Ring */
.mahe-ab--card .mahe-ab__photo {
  margin-bottom: 14px;
}

.mahe-ab--card .mahe-ab__photo-img,
.mahe-ab--card .mahe-ab__photo img,
.mahe-ab--card .mahe-ab__photo .avatar {
  outline: 3px solid var(--mahe-ab-accent);
  outline-offset: 3px;
}

.mahe-ab__photo-img,
.mahe-ab__photo img,
.mahe-ab__photo .avatar {
  width:         var(--mahe-ab-photo-size);
  height:        var(--mahe-ab-photo-size);
  min-width:     var(--mahe-ab-photo-size);
  border-radius: 50%;
  object-fit:    cover;
  display:       block;
}

/* ── Meta ──────────────────────────────────────────────────── */
.mahe-ab__meta {
  flex:      1 1 auto;
  min-width: 0;
}

.mahe-ab--card .mahe-ab__meta {
  width: 100%;
}

/* ── Name ──────────────────────────────────────────────────── */
.mahe-ab__name {
  font-weight:   800;
  font-size:     var(--mahe-ab-name-size, 1.25em);
  line-height:   1.2;
  margin-bottom: 4px;
}

.mahe-ab--card .mahe-ab__name {
  font-size: calc(var(--mahe-ab-name-size, 1.25em) * 1.08);
}

.mahe-ab__name-link {
  color:           inherit;
  text-decoration: none;
}
.mahe-ab__name-link:hover {
  color:           var(--mahe-ab-accent);
  text-decoration: underline;
}

/* ── Rolle ─────────────────────────────────────────────────── */
.mahe-ab__role {
  font-size:     var(--mahe-ab-role-size, 1.05em);
  font-weight:   500;
  opacity:       .7;
  margin-bottom: 10px;
  display:       flex;
  align-items:   center;
  gap:           4px;
}

.mahe-ab--card .mahe-ab__role {
  justify-content: center;
}

/* ── Trennlinie zwischen Rolle und Bio (nur Card) ──────────── */
.mahe-ab--card .mahe-ab__bio {
  border-top:  1px solid rgba(0,0,0,.08);
  padding-top: 12px;
  margin-top:  2px;
}

/* ── Bio ───────────────────────────────────────────────────── */
.mahe-ab__bio {
  font-size:     var(--mahe-ab-bio-size, 1.05em);
  line-height:   1.6;
  margin-bottom: 10px;
  opacity:       .88;
  text-align:    var(--mahe-ab-bio-align, center);
}

/* ── Kontakt ───────────────────────────────────────────────── */
.mahe-ab__contact {
  display:       flex;
  flex-wrap:     wrap;
  gap:           4px;
  align-items:   baseline;
  font-size:     var(--mahe-ab-contact-size, .95em);
  margin-bottom: 10px;
}

.mahe-ab--card .mahe-ab__contact {
  justify-content: center;
}

.mahe-ab__contact-label {
  opacity: .6;
}

.mahe-ab__email {
  color:                  var(--mahe-ab-accent);
  text-decoration:        underline;
  text-underline-offset:  2px;
  word-break:             break-all;
  font-weight:            500;
}
.mahe-ab__email:hover {
  opacity: .75;
}

/* ── Icon-Emojis ───────────────────────────────────────────── */
.mahe-ab__icon {
  font-style: normal;
  line-height: 1;
}

/* ── Social Links ──────────────────────────────────────────── */
/* Wrapper: zentriert die Buttons ohne sie zu strecken */
.mahe-ab__social-wrap {
  width:           100%;
  display:         flex;
  justify-content: center;
  margin-top:      10px;
}

.mahe-ab__social {
  display:         flex;
  flex-wrap:       nowrap;
  gap:             6px;
  width:           auto;     /* nur so breit wie Inhalt */
  max-width:       100%;
}

.mahe-ab--card .mahe-ab__social-wrap {
  margin-top: 14px;
}

/* ── Breiter Labeled-Button ────────────────────────────────── */
.mahe-ab__social-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--soc-gap, 9px);
  padding:         var(--soc-pad, 9px 16px 9px 10px);
  border-radius:   10px;
  background:      var(--soc-color, #555);
  color:           #fff !important;
  text-decoration: none;
  transition:      transform .13s ease, box-shadow .13s ease, filter .13s ease;
  flex:            0 0 auto;
  min-width:       170px;      /* genug Platz für Text */
  width:           auto;
  box-sizing:      border-box;
  white-space:     nowrap;
}

.mahe-ab__social-link:hover {
  transform:  translateY(-2px);
  filter:     brightness(1.12);
  box-shadow: 0 5px 14px rgba(0,0,0,.22);
  color:      #fff !important;
}

/* Icon-Kreis */
.mahe-ab__soc-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--soc-icon, 28px);
  height:          var(--soc-icon, 28px);
  min-width:       var(--soc-icon, 28px);
  border-radius:   50%;
  background:      rgba(255,255,255,.18);
  flex-shrink:     0;
}

/* Text-Block */
.mahe-ab__soc-text {
  display:        flex;
  flex-direction: column;
  line-height:    1.2;
  text-align:     left;
}

.mahe-ab__soc-name {
  font-size:    var(--soc-name, .78em);
  font-weight:  700;
  white-space:  normal;
  word-break:   break-word;
  line-height:  1.25;
}

.mahe-ab__soc-sub {
  font-size:    var(--soc-sub, .65em);
  opacity:      .82;
  white-space:  normal;
}

/* SVG immer weiß */
.mahe-ab__svg {
  width:       17px;
  height:      17px;
  fill:        #fff;
  display:     block;
  flex-shrink: 0;
}

.mahe-ab__social-link .mahe-ab__svg path,
.mahe-ab__social-link .mahe-ab__svg circle,
.mahe-ab__social-link .mahe-ab__svg line {
  stroke: #fff;
}


/* ── Bio Absätze ───────────────────────────────────────────── */
.mahe-ab__bio-p {
  margin: 0 0 .65em;
  font-size: inherit;
  line-height: inherit;
}
.mahe-ab__bio-p:last-child {
  margin-bottom: 0;
}
.mahe-ab__bio strong {
  font-weight: 700;
}
.mahe-ab__bio em {
  font-style: italic;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet ≤ 768px */
@media (max-width: 768px) {
  .mahe-ab__social {
    flex-wrap: wrap;   /* auf Tablet ggf. umbrechen */
  }
  .mahe-ab--line .mahe-ab__inner,
  .mahe-ab--none .mahe-ab__inner {
    gap: 16px;
  }
  .mahe-ab--card .mahe-ab__inner {
    padding: 24px 18px 22px;
  }
}

/* Mobil ≤ 540px: Line-Stil wird auch zentriert gestapelt */
@media (max-width: 540px) {
  .mahe-ab--line .mahe-ab__inner,
  .mahe-ab--none .mahe-ab__inner {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            12px;
  }

  .mahe-ab--line .mahe-ab__role,
  .mahe-ab--none .mahe-ab__role {
    justify-content: center;
  }

  .mahe-ab--line .mahe-ab__contact,
  .mahe-ab--none .mahe-ab__contact {
    justify-content: center;
  }

  .mahe-ab--line .mahe-ab__social,
  .mahe-ab--none .mahe-ab__social {
    justify-content: center;
  }

  .mahe-ab__social {
    flex-wrap: wrap;
  }
  .mahe-ab__social-link {
    gap:       var(--soc-gap-mob, 7px);
    padding:   var(--soc-pad-mob, 7px 12px 7px 9px);
    flex:      0 0 auto;
    width:     auto;
    white-space: nowrap;
  }
  .mahe-ab__soc-icon {
    width:     var(--soc-icon-mob, 24px);
    height:    var(--soc-icon-mob, 24px);
    min-width: var(--soc-icon-mob, 24px);
  }
  .mahe-ab__soc-name  { font-size: var(--soc-name-mob, .72em); }
  .mahe-ab__soc-sub   { font-size: var(--soc-sub-mob,  .60em); }
  .mahe-ab__contact   { font-size: var(--mahe-ab-contact-size-mob, .88em); }

  .mahe-ab--card .mahe-ab__inner {
    padding: 22px 14px 20px;
  }

  .mahe-ab__name       { font-size: var(--mahe-ab-name-size-mobile,  1.1em);  }
  .mahe-ab__role       { font-size: var(--mahe-ab-role-size-mobile,  0.95em); }
  .mahe-ab__bio        { font-size: var(--mahe-ab-bio-size-mobile,   0.97em); }
  .mahe-ab__label      { font-size: var(--mahe-ab-label-size-mobile, 0.7rem);  }
}

/* Sehr klein ≤ 360px */
@media (max-width: 360px) {
  .mahe-ab__social {
    flex-direction: column;
    align-items: stretch;
  }
  .mahe-ab__social-link {
    min-width: unset;
    width: 100%;
    justify-content: flex-start;
  }
  .mahe-ab--card .mahe-ab__inner {
    padding: 18px 10px 16px;
  }
  .mahe-ab__bio {
    font-size: .97em;
  }
  .mahe-ab__social-link {
    width: 34px;
    height: 34px;
  }
}