:root{
  --bg:          #121417;
  --bg-soft:     #1a1d21;
  --bg-soft-2:   #212529;
  --bg-header:   rgba(18, 20, 23, .82);
  --line:        #2b3036;
  --line-soft:   #23272c;

  --green:       #4fd07a;
  --green-dark:  #35a95d;
  --green-glow:  rgba(79, 208, 122, .28);
  --green-tint:  rgba(79, 208, 122, .10);

  --text:        #edeff1;
  --text-dim:    #99a0a8;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 8px;
  --header-h: 66px;
  --maxw: 1080px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
::selection{ background: var(--green-dark); color: #0d0f11; }
:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; }
[id]{ scroll-margin-top: calc(var(--header-h) + 20px); }


/* ---------- Header ---------- */

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
body.has-banner .site-header{ background: transparent; backdrop-filter: none; }
body.has-banner .site-header.scrolled,
.site-header.scrolled{
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-soft);
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .02em;
}
.brand img{
  width: 34px; height: 34px;
  transition: transform .4s var(--ease);
}
.brand:hover img{ transform: rotate(-6deg) scale(1.06); }

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px;
}
.nav-toggle span{ display: block; width: 22px; height: 2px; background: var(--text); }

.nav-list{
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav-list a{
  position: relative;
  display: block;
  padding: 8px 11px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: color .2s;
}
.nav-list a::after{
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 2px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-list a:hover{ color: var(--text); }
.nav-list a:hover::after{ transform: scaleX(1); }
.nav-list a.active{ color: var(--text); }
.nav-list a.active::after{ transform: scaleX(1); }

@media (max-width: 940px){
  .nav-toggle{ display: flex; }
  .nav-list{
    display: none;
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 14px 16px;
    background: #15181b;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-list.open{ display: flex; }
  .nav-list a{ padding: 12px 8px; }
  .nav-list a::after{ left: 8px; right: auto; width: 18px; }
}


/* ---------- Banner ---------- */

.banner{
  position: relative;
  width: 100%;
  min-height: clamp(420px, 72vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.banner-stage{ position: absolute; inset: 0; z-index: -2; background: #0e1013; }
.banner-img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s var(--ease), transform 9s linear;
}
.banner-img.is-active{ opacity: 1; transform: scale(1); }

.banner-overlay{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(18,20,23,.72) 0%, rgba(18,20,23,.30) 35%, rgba(18,20,23,.88) 100%);
}

.banner-profile{
  position: relative;
  z-index: 2;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 24px) 20px clamp(74px, 11vh, 110px);
}

.banner-icon{
  width: clamp(150px, 21vw, 240px);
  height: clamp(150px, 21vw, 240px);
  padding: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(79, 208, 122, .55),
    0 0 0 12px rgba(79, 208, 122, .07),
    0 22px 60px -24px rgba(0, 0, 0, .95);
  transition: transform .45s var(--ease), box-shadow .3s;
}
.banner-icon img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.banner-icon:hover{
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px var(--green),
    0 0 0 14px rgba(79, 208, 122, .11),
    0 26px 66px -24px rgba(0, 0, 0, .95);
}

.profile-name{
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.profile-tagline{
  margin: 8px 0 0;
  max-width: 34ch;
  color: #c6ccd2;
  font-size: clamp(.95rem, 2vw, 1.08rem);
}
.profile-handles{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 14px 0 0;
  font-size: .92rem;
  color: var(--text-dim);
}
.profile-handles strong{ color: var(--green); font-weight: 600; }
.profile-sep{ color: var(--line); }

.profile-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.banner-content{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px) clamp(52px, 8vh, 92px);
}
.banner-content h1{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 3.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.banner-content p{
  margin: 0 0 26px;
  max-width: 46ch;
  color: #c6ccd2;
  font-size: clamp(1rem, 2vw, 1.12rem);
}

.banner-dots{
  position: absolute;
  right: clamp(20px, 5vw, 40px);
  bottom: clamp(52px, 8vh, 92px);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.banner-dot{
  width: 9px; height: 9px;
  padding: 0;
  background: rgba(255,255,255,.28);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s, transform .25s var(--ease);
}
.banner-dot.is-active{ background: var(--green); transform: scale(1.25); }

.banner-progress{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.08);
  z-index: 2;
}
.banner-progress span{
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  box-shadow: 0 0 10px var(--green-glow);
}

.banner-compact{
  min-height: clamp(260px, 40vh, 400px);
}
.banner-compact .banner-content{
  padding-bottom: clamp(30px, 5vh, 54px);
}
.banner-compact .banner-content h1{
  font-size: clamp(1.9rem, 5vw, 3rem);
}
.banner-compact .banner-overlay{
  background: linear-gradient(to bottom, rgba(18,20,23,.78) 0%, rgba(18,20,23,.45) 40%, rgba(18,20,23,.94) 100%);
}
.banner-compact .section-eyebrow{ margin-bottom: 10px; }
.banner-compact .banner-dots{ bottom: clamp(30px, 5vh, 54px); }

@media (max-width: 640px){
  .banner{ min-height: 78vh; }
  .banner-dots{ bottom: 22px; }
}


/* ---------- Layout ---------- */

.page{
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

section{ padding: clamp(48px, 8vh, 82px) 0; }
section + section{ border-top: 1px solid var(--line-soft); }

body.has-banner .page > section:first-of-type{
  padding-top: clamp(44px, 7vh, 78px);
}

.section-eyebrow{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}
.section-eyebrow::before{
  content: "";
  width: 26px; height: 1px;
  background: var(--green);
}
.section-title{
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.01em;
}


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

.btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: .93rem;
  font-weight: 500;
  color: #0e1013;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover{
  background: #62dc8b;
  border-color: #62dc8b;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px var(--green-glow);
}
.btn:active{ transform: translateY(0); }

.btn-ghost{
  color: var(--text);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover{
  background: var(--bg-soft-2);
  border-color: var(--green);
  color: var(--text);
  box-shadow: none;
}


/* ---------- Karten ---------- */

.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.split-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}

.card{
  position: relative;
  display: block;
  padding: 24px 22px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--line);
  background: var(--bg-soft-2);
}
.card:hover::before{ transform: scaleX(1); }
.card-static:hover{ transform: none; }

.card h3, .card-heading{
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--text);
}
.card p{ margin: 0; color: var(--text-dim); font-size: .94rem; }
.card .btn{ margin-top: 16px; }

.platform-list{
  list-style: none;
  margin: 12px 0 0; padding: 0;
  color: var(--text-dim);
  font-size: .94rem;
}
.platform-list li{
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.platform-list li:last-child{ border-bottom: none; }
.platform-tag{
  display: inline-block;
  min-width: 72px;
  padding: 3px 9px;
  font-size: .78rem;
  font-weight: 500;
  text-align: center;
  color: var(--green);
  background: var(--green-tint);
  border: 1px solid rgba(79,208,122,.3);
  border-radius: 100px;
}
.platform-tag.pending{
  color: var(--text-dim);
  background: rgba(255,255,255,.04);
  border-color: var(--line);
}

.copyable{ cursor: pointer; }


/* ---------- Reveal ---------- */

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity: 1; transform: none; }
}


/* ---------- Rechtstexte ---------- */

.legal{ max-width: 780px; }
.legal h1{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
}
.legal h2{
  margin: 28px 0 8px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
}
.legal h3{
  margin: 20px 0 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.legal p, .legal li{ color: var(--text-dim); font-size: .94rem; }
.legal ul{ padding-left: 20px; }
.legal li{ margin-bottom: 8px; }
.legal a{ color: var(--green); word-break: break-word; }
.legal a:hover{ text-decoration: underline; }
.legal strong{ color: var(--text); font-weight: 500; }
.legal .placeholder{
  padding: 12px 14px;
  background: var(--bg-soft);
  border-left: 2px solid var(--green-dark);
  border-radius: var(--radius);
}

.legal ul.index{
  list-style: none;
  margin: 14px 0 28px;
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  columns: 2;
  column-gap: 28px;
}
.legal ul.index li{ margin-bottom: 6px; break-inside: avoid; }
.legal .index-link{ font-size: .9rem; }

.legal ul.glossary li{ margin-bottom: 14px; }

.legal .seal{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem;
}

@media (max-width: 700px){
  .legal ul.index{ columns: 1; }
}


/* ---------- Footer ---------- */

.site-footer {
  position: relative;

  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 20px;
  text-align: center;
  font-size: .85rem;
  color: var(--text-dim);
  background: #15181b;
  border-top: 1px solid var(--line-soft);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 9px;
}

.footer-legal a:hover {
  color: var(--green);
}

.footer-brand {
  color: var(--text-dim);
}

/* ---------- Info Button ---------- */

.footer-info {
  position: absolute;
  right: 20px;
  bottom: 24px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: var(--text-dim);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;

  transition: color .2s ease, transform .2s ease;
}

.footer-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 19px;
  height: 19px;

  border: 1.5px solid currentColor;
  border-radius: 50%;

  font-size: 12px;
  font-weight: 700;

  transition: all .2s ease;
}

.footer-info:hover {
  color: var(--green);
}

.footer-info:hover .footer-info-icon {
  background: var(--green);
  border-color: var(--green);
  color: #15181b;
  transform: scale(1.08);
}

/* ---------- Links in Karten ---------- */

.card a:not(.btn) {
  color: var(--green);
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(79, 208, 122, .3);
  transition: color .2s, border-color .2s;
}

.card a:not(.btn):hover {
  color: #62dc8b;
  border-bottom-color: var(--green);
}

.card .platform-list a {
  font-weight: 500;
}

/* ---------- Social-Links ---------- */

.social-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}

.social-link:hover {
  transform: translateX(4px);
  background: var(--bg-soft-2);
  border-color: var(--line);
  border-left-color: #62dc8b;
}

.social-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--green-tint);
  border: 1px solid rgba(79, 208, 122, .26);
  border-radius: 12px;
}

.social-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.social-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--text);
}

.social-meta {
  font-size: .88rem;
  color: var(--text-dim);
}

.social-host {
  flex-shrink: 0;
  font-size: .82rem;
  color: #7d848c;
  overflow-wrap: anywhere;
}

.social-link::after {
  content: "\2197";
  flex-shrink: 0;
  color: var(--green);
  font-size: 1rem;
  transition: transform .25s var(--ease);
}

.social-link:hover::after {
  transform: translate(2px, -2px);
}

@media (max-width: 620px) {
  .social-link {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 18px;
  }
  .social-host {
    width: 100%;
    padding-left: 62px;
  }
  .social-link::after { display: none; }
}

/* ---------- Abweichend: Profilbild als abgerundetes Viereck ---------- */

.banner-icon {
  border-radius: 24px;
}

.banner-icon img {
  border-radius: 24px;
}

/* ---------- Socials: Panel ueber dem Hintergrund ---------- */

.banner-socials {
  min-height: 0;
  flex: 1 0 auto;
}

/* Videoebene, liegt ueber der Diashow und unter dem Verlauf */
.banner-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-socials .banner-overlay {
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(18, 20, 23, .35) 0%, rgba(18, 20, 23, .82) 100%),
    linear-gradient(to bottom, rgba(18, 20, 23, .70) 0%, rgba(18, 20, 23, .40) 40%, rgba(18, 20, 23, .92) 100%);
}

.banner-socials .banner-profile {
  padding: calc(var(--header-h) + 28px) 20px clamp(74px, 11vh, 110px);
  width: 100%;
}

.social-panel {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 34px) clamp(18px, 3vw, 28px);
  text-align: center;
  background: rgba(20, 23, 26, .58);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 30px;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 34px 90px -34px rgba(0, 0, 0, .95);
}

.social-panel .banner-icon {
  width: clamp(96px, 15vw, 132px);
  height: clamp(96px, 15vw, 132px);
  margin: 0 auto;
  border-radius: 28px;
}
.social-panel .banner-icon img { border-radius: 28px; }

.social-panel .profile-name {
  margin-top: 16px;
  font-size: clamp(1.7rem, 4.4vw, 2.4rem);
}
.social-panel .profile-tagline { margin-bottom: 26px; }

/* Kanaele im Panel: kompakter als die breiten Kacheln */
.social-panel .social-list { gap: 9px; }

.social-panel .social-link {
  gap: 13px;
  padding: 12px 15px;
  text-align: left;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid var(--green);
  border-radius: 16px;
}

.social-panel .social-link:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .16);
  border-left-color: #62dc8b;
}

.social-panel .social-icon {
  width: 40px; height: 40px;
  font-size: 1.2rem;
  border-radius: 13px;
}

.social-panel .social-name { font-size: 1rem; }
.social-panel .social-meta { font-size: .83rem; }

@media (max-width: 620px) {
  .social-panel .social-link { flex-wrap: nowrap; }
  .social-panel .social-link::after { display: inline; }
}


/* ---------- Kanal-Icons aus CSS, in den Markenfarben ---------- */

.social-link::before {
  content: "";
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--marke, var(--green));
  border-radius: 13px;
  box-shadow: 0 6px 18px -9px var(--marke, var(--green));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.social-link:hover::before {
  transform: scale(1.07) rotate(-4deg);
  box-shadow: 0 10px 24px -9px var(--marke, var(--green));
}

.social-link.is-discord   { --marke: #5865F2; }
.social-link.is-tiktok    { --marke: #FE2C55; }
.social-link.is-youtube   { --marke: #FF0033; }
.social-link.is-whatsapp  { --marke: #25D366; }
.social-link.is-instagram { --marke: #C13584; }

.social-link.is-discord::before   { content: "D"; }
.social-link.is-tiktok::before    { content: "T"; }
.social-link.is-youtube::before   { content: "\25B6"; font-size: .82rem; }
.social-link.is-whatsapp::before  { content: "W"; }

/* Balken links und Pfeil rechts uebernehmen die Markenfarbe */
.social-panel .social-link,
.social-panel .social-link:hover { border-left-color: var(--marke, var(--green)); }
.social-link::after { color: var(--marke, var(--green)); }

/* Kanaele erscheinen nacheinander */
.social-panel .social-link {
  opacity: 0;
  transform: translateY(8px);
  animation: social-auf .5s var(--ease) forwards;
}
.social-panel .social-link:nth-child(1) { animation-delay: .05s; }
.social-panel .social-link:nth-child(2) { animation-delay: .12s; }
.social-panel .social-link:nth-child(3) { animation-delay: .19s; }
.social-panel .social-link:nth-child(4) { animation-delay: .26s; }
.social-panel .social-link:nth-child(5) { animation-delay: .33s; }

@keyframes social-auf {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .social-panel .social-link {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Kanal-Logos als SVG im CSS ---------- */

.social-link::before {
  background-image: var(--icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64%;
}

/* TikTok: dunkle Kachel, Strich in Cyan aus dem Icon */
.social-link.is-tiktok { --marke: #121418; --akzent: #25F4EE; }

.social-panel .social-link,
.social-panel .social-link:hover { border-left-color: var(--akzent, var(--marke, var(--green))); }
.social-link::after { color: var(--akzent, var(--marke, var(--green))); }
.social-link:hover::before { box-shadow: 0 10px 24px -9px var(--akzent, var(--marke)); }

.social-link.is-discord::before {
  content: "";
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z' fill='%23fff'/></svg>");
  background-size: 58%;
}

.social-link.is-tiktok::before {
  content: "";
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z' fill='%2325F4EE' transform='translate(-1.1,-0.8)'/><path d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z' fill='%23FE2C55' transform='translate(1.1,0.8)'/><path d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z' fill='%23fff'/></svg>");
  background-size: 52%;
}

.social-link.is-youtube::before {
  content: "";
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.5 6.4v11.2L16.5 12z' fill='%23fff'/></svg>");
  background-size: 82%;
}

.social-link.is-whatsapp::before {
  content: "";
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z' fill='%23fff'/></svg>");
  background-size: 58%;
}

.social-link.is-instagram::before {
  content: "";
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077' fill='%23fff'/></svg>");
  background-size: 56%;
}

.social-link.is-instagram::before {
  background-image: var(--icon), linear-gradient(135deg, #F9CE34 0%, #EE2A7B 55%, #6228D7 100%);
  background-size: 56%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* Kacheln insgesamt etwas groesser */
.social-link::before { width: 46px; height: 46px; border-radius: 15px; }
.social-panel .social-icon { width: 46px; height: 46px; }

/* Seite endet mit dem Fenster: kein unnoetiges Scrollen */
.banner-socials .banner-profile { padding-bottom: clamp(56px, 8vh, 84px); }