/* =========================
   Reset & Basis
========================= */

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

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #111;
  background-color: #fafafa;
  -webkit-font-smoothing: antialiased;
}

/* =========================
   Ruhige Textlinks im Impressum & Datenschutz
========================= */

main a {
  color: #111;                 /* normale Textfarbe */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

main a:hover {
  color: #333 !important; 
	text-decoration-thickness: 0px !important;
}


/* =========================
   Layout
========================= */

.container {
  max-width: 420px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* =========================
   LinkedIn-Style Header mit Bild
========================= */

.profile-header {
  position: relative;
  height: 220px;
  background-image: url("../images/nb-bg.jpg");
  background-size: cover;
  background-position: center;
}

/* leichter dunkler Verlauf für Lesbarkeit */

.profile-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.25)
  );
}

/* =========================
   Avatar groß & überlappend
========================= */

.avatar {
  position: absolute;
  bottom: -80px;            /* Hälfte von 160px */
  left: 1.5rem;
  width: 160px;
  height: 160px;
  z-index: 2;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fafafa;
  background-color: #fafafa;
}

/* =========================
   Header Text
========================= */

.header-text {
  position: absolute;
  bottom: 1.25rem;
  left: calc(1.5rem + 180px); /* Abstand neben Avatar */
  z-index: 2;
  color: #fff;
}

.header-text h1 {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}

.header-text .subline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

/* =========================
   Content Abstand wegen Avatar
========================= */

main .container {
  padding-top: 6rem; /* Platz für Avatar */
}

main .container.no-pt {
	padding-top: 0rem !important;
}

/* =========================
   Sections
========================= */

section {
  margin-top: 2rem;
}

section h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 0.75rem;
}

/* =========================
   Listen & Links
========================= */

.link-list,
.contact-list,
.legal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.link-list a,
.contact-list a {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
  color: #111;
  font-size: 0.95rem;
  background-color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.link-list a:hover,
.contact-list a:hover {
  background-color: #f1f1f1;
  border-color: #ccc;
}

/* =========================
   Footer
========================= */

footer {
  margin-top: 3rem;
  text-align: center;
}

.legal-list {
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.legal-list a {
  font-size: 0.75rem;
  color: #777;
  text-decoration: none;
}

.legal-list a:hover {
  text-decoration: underline;
}

footer small {
  font-size: 0.7rem;
  color: #999;
}


.link-list a, 
.contact-list a {
  position: relative;
  padding-left: 3rem; /* Platz für Icon */
}


/* YouTube */
.icon-youtube {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF0000'%3E%3Cpath d='M23.5 6.2s-.2-1.7-.9-2.4c-.8-.9-1.7-.9-2.1-1C17.5 2.5 12 2.5 12 2.5s-5.5 0-8.5.3c-.4 0-1.3.1-2.1 1C.7 4.5.5 6.2.5 6.2S0 8.1 0 10v1.9c0 1.9.5 3.8.5 3.8s.2 1.7.9 2.4c.8.9 1.9.9 2.4 1 1.7.2 7.2.3 7.2.3s5.5 0 8.5-.3c.4 0 1.3-.1 2.1-1 .7-.7.9-2.4.9-2.4s.5-1.9.5-3.8V10c0-1.9-.5-3.8-.5-3.8zM9.5 13.5v-6l6 3-6 3z'/%3E%3C/svg%3E")
    no-repeat 1rem center / 18px;
}

/* TV */
.icon-tv {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF0000' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='12' rx='2'/%3E%3Cline x1='8' y1='3' x2='12' y2='7'/%3E%3Cline x1='16' y1='3' x2='12' y2='7'/%3E%3C/svg%3E")
    no-repeat 1rem center / 18px;
}


/* Spotify */
.icon-spotify {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231DB954'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.3-.6.4-.9.2-2.5-1.5-5.6-1.8-9.3-.9-.4.1-.7-.1-.8-.5-.1-.4.1-.7.5-.8 4-.9 7.5-.6 10.3 1 .3.2.4.6.2 1zm1.3-2.8c-.2.4-.7.5-1.1.3-2.8-1.7-7.1-2.2-10.4-1.2-.4.1-.9-.1-1-.5-.1-.4.1-.9.5-1 3.8-1.1 8.5-.6 11.7 1.4.4.2.5.7.3 1zm.1-3c-3.4-2-9.1-2.2-12.3-1.2-.5.2-1-.1-1.2-.6-.2-.5.1-1 .6-1.2 3.7-1.1 9.9-.9 13.8 1.4.4.2.6.8.4 1.2-.2.4-.8.6-1.3.4z'/%3E%3C/svg%3E")
    no-repeat 1rem center / 18px;
}


/* Instagram */
.icon-instagram {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E1306C'%3E%3Cpath d='M7 2C4.2 2 2 4.2 2 7v10c0 2.8 2.2 5 5 5h10c2.8 0 5-2.2 5-5V7c0-2.8-2.2-5-5-5H7zm10 2c1.7 0 3 1.3 3 3v10c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3V7c0-1.7 1.3-3 3-3h10zm-5 3.5A4.5 4.5 0 1 0 16.5 12 4.5 4.5 0 0 0 12 7.5zm0 7.3A2.8 2.8 0 1 1 14.8 12 2.8 2.8 0 0 1 12 14.8zM17.2 6.8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E")
    no-repeat 1rem center / 18px;
}


/* Mail */
.icon-mail {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M2 4h20v16H2V4zm10 7L4 6v12h16V6l-8 5z'/%3E%3C/svg%3E")
    no-repeat 1rem center / 18px;
}

/* Presse */
.icon-press {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' ry='2'/%3E%3Cline x1='8' y1='7' x2='16' y2='7' stroke='%23fafafa' stroke-width='2'/%3E%3Cline x1='8' y1='11' x2='16' y2='11' stroke='%23fafafa' stroke-width='2'/%3E%3Cline x1='8' y1='15' x2='14' y2='15' stroke='%23fafafa' stroke-width='2'/%3E%3C/svg%3E")
    no-repeat 1rem center / 18px;
}

/* Aktuelles Reel */
.icon-reel {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23111' stroke-width='2'/%3E%3Cpolygon points='10,8 16,12 10,16' fill='%23111'/%3E%3C/svg%3E")
    no-repeat 1rem center / 18px;
}

/* LinkedIn */
.icon-linkedin {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A66C2'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM0 8h5v16H0V8zm7.5 0H12v2.2h.1c.6-1.1 2.1-2.2 4.4-2.2 4.7 0 5.5 3.1 5.5 7.1V24h-5v-7.8c0-1.9 0-4.3-2.6-4.3s-3 2-3 4.2V24h-5V8z'/%3E%3C/svg%3E")
    no-repeat 1rem center / 18px;
}



/* =========================
   Mobile Anpassung
========================= */

@media (max-width: 480px) {
  .profile-header {
    height: 180px;
  }

  .avatar {
    width: 120px;
    height: 120px;
    bottom: -60px;
  }

  .header-text {
    left: calc(1.5rem + 140px);
  }

  main .container {
    padding-top: 5rem;
  }
}