/* HerzSMP – Dark-Theme mit rot/Herz-Akzent */
:root{
  --bg:#0c0508;
  --card:rgba(255,255,255,.045);
  --card-border:rgba(255,255,255,.09);
  --txt:#f6eef1;
  --muted:rgba(255,190,200,.62);
  --faint:rgba(255,120,140,.35);
  --acc:#ef4444;
  --acc2:#fb7185;
  --acc-soft:rgba(239,68,68,.16);
  --radius:.9rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--txt);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(239,68,68,.14), transparent 60%),
    radial-gradient(1000px 600px at 88% 2%, rgba(251,113,133,.12), transparent 60%),
    radial-gradient(900px 700px at 50% 118%, rgba(120,10,30,.5), transparent 65%),
    var(--bg);
  overflow-x:hidden;
}
/* Zahlen: tabellarisch, damit nichts jittert */
.mono, .ipbox, .mc-row__meta, .badge{font-variant-numeric:tabular-nums}

/* Hintergrund-Blobs */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform}
.b1{width:46vw; height:46vw; background:radial-gradient(circle,rgba(239,68,68,.5),transparent 70%); top:-14vw; left:-8vw; animation:drift 26s ease-in-out infinite}
.b2{width:38vw; height:38vw; background:radial-gradient(circle,rgba(251,113,133,.45),transparent 70%); top:6vw; right:-10vw; animation:drift 32s ease-in-out infinite reverse}
.b3{width:52vw; height:52vw; background:radial-gradient(circle,rgba(120,10,30,.6),transparent 70%); bottom:-22vw; left:22vw; animation:drift 38s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,-2vw) scale(1.08)}}

/* Fokus-Ringe */
:focus-visible{outline:2px solid var(--acc2); outline-offset:2px; border-radius:.4rem}

/* Kopf */
.top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(.9rem,4vw,2rem);
  background:rgba(12,5,8,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--card-border);
}
.brand{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--txt); min-height:44px}
.brand__heart{color:var(--acc); display:grid; place-items:center; filter:drop-shadow(0 0 10px rgba(239,68,68,.6))}
.brand__name{font-weight:700; font-size:1.15rem; letter-spacing:-.02em}
.brand__accent{color:var(--acc)}

/* Tabs */
.tabs{display:flex; gap:.3rem; overflow-x:auto; max-width:100%; scrollbar-width:thin}
.tab{
  appearance:none; border:1px solid transparent; background:transparent; color:var(--muted);
  font:inherit; font-size:.86rem; font-weight:600; white-space:nowrap;
  padding:.5rem .85rem; border-radius:.7rem; cursor:pointer; min-height:44px;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.tab:hover{color:var(--txt); background:var(--card)}
.tab[aria-current="page"]{color:var(--txt); background:var(--acc-soft); border-color:rgba(251,113,133,.4)}

/* Layout */
#main{position:relative; z-index:1; max-width:46rem; margin:0 auto; padding:2.2rem clamp(.9rem,4vw,2rem) 3rem}
.view{display:flex; flex-direction:column; gap:1.4rem; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
h1{margin:0; font-size:2rem; letter-spacing:-.03em}
.lead{margin:0 0 .2rem; color:var(--muted); font-size:.95rem}
.accent{color:var(--acc)}

/* Hero */
.hero{display:flex; flex-direction:column; align-items:center; text-align:center; padding:1.4rem 0 .4rem}
.hero__badge{
  width:5.4rem; height:5.4rem; border-radius:9999px; display:grid; place-items:center; color:var(--acc);
  background:linear-gradient(135deg,rgba(239,68,68,.25),rgba(251,113,133,.12));
  border:1px solid rgba(251,113,133,.4); box-shadow:0 0 40px rgba(239,68,68,.45);
  animation:floaty 5s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero h1{font-size:2.6rem; margin:.9rem 0 .2rem}
.hero__sub{margin:0; color:var(--muted); font-size:1.05rem}
.badges{display:flex; gap:.45rem; flex-wrap:wrap; justify-content:center; margin-top:.9rem}
.badge{font-size:.72rem; padding:.3rem .75rem; border-radius:9999px; border:1px solid var(--card-border); background:var(--card); color:#ffd7de}

/* Panels */
.panel{border-radius:var(--radius); background:rgba(0,0,0,.38); border:1px solid var(--card-border); padding:1.1rem 1.1rem 1.25rem}
.panel h2{margin:0 0 .2rem; font-size:1.05rem}
.panel .sub{margin:0 0 .9rem; color:var(--muted); font-size:.82rem}

/* Prinzip-Karten */
.prinzip-grid{display:grid; grid-template-columns:1fr; gap:.7rem}
@media (min-width:768px){.prinzip-grid{grid-template-columns:repeat(3,1fr)}}
.prinzip-card{background:var(--card); border:1px solid var(--card-border); border-radius:.8rem; padding:.95rem 1rem}
.prinzip-card__ic{color:var(--acc); margin-bottom:.5rem}
.prinzip-card b{display:block; font-size:.95rem; margin-bottom:.35rem}
.prinzip-card p{margin:0; color:var(--muted); font-size:.82rem; line-height:1.5}

/* Server-Status */
.mc-row{display:flex; align-items:center; gap:.8rem; background:#120a0c; border:2px solid #2a1418; border-radius:.5rem; padding:.7rem .8rem}
.mc-row__heart{color:var(--acc); flex:none; filter:drop-shadow(0 0 8px rgba(239,68,68,.6))}
.mc-row__mid{flex:1; min-width:0}
.mc-row__motd{font-size:.85rem; color:#f0d9de; white-space:pre-line; line-height:1.35}
.mc-row__meta{font-size:.74rem; color:#b08a92; margin-top:.25rem}
.mc-row__meta .on{color:#4ade80}.mc-row__meta .off{color:#f87171}
.bars{display:flex; align-items:flex-end; gap:2px; height:18px; flex:none}
.bars i{width:4px; background:#3a2026; display:block}
.bars i:nth-child(1){height:5px}.bars i:nth-child(2){height:8px}.bars i:nth-child(3){height:11px}
.bars i:nth-child(4){height:14px}.bars i:nth-child(5){height:17px}
.bars.live i{background:var(--acc)}
.iprow{display:flex; gap:.6rem; margin-top:.8rem}
.ipbox{flex:1; background:#0a0506; border:1px solid #3a2026; border-radius:.45rem; padding:.6rem .75rem; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem; color:var(--acc2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
button.copy{border:1px solid rgba(251,113,133,.4); background:var(--acc-soft); color:var(--txt); border-radius:.45rem; padding:.6rem 1rem; font:inherit; font-size:.86rem; cursor:pointer; min-height:44px; transition:background .15s ease}
button.copy:hover{background:rgba(239,68,68,.3)}
button.copy:disabled{opacity:.5; cursor:default}

/* Link-Karten */
.links{display:flex; flex-direction:column; gap:.7rem}
.link-card{display:flex; align-items:center; gap:1rem; padding:.8rem 1.1rem; border-radius:.9rem; background:var(--card); border:1px solid var(--card-border); color:var(--txt); text-decoration:none; backdrop-filter:blur(6px); transition:transform .15s ease, border-color .15s ease, background .15s ease}
.link-card:hover{transform:translateY(-2px); border-color:rgba(251,113,133,.45); background:rgba(255,255,255,.07)}
.link-card .ic{width:2.5rem; height:2.5rem; border-radius:.65rem; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.06)}
.link-card .ic svg{width:1.5rem; height:1.5rem}
.link-card .tx{flex:1; min-width:0}
.link-card .tx b{display:block; font-size:1rem; font-weight:600}
.link-card .tx small{display:block; color:var(--muted); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.link-card .go{opacity:0; transform:translateX(-6px); transition:all .15s ease; flex:none}
.link-card:hover .go{opacity:1; transform:none}
.link-card.yt:hover{color:#f87171}.link-card.dc:hover{color:#fb7185}

/* Bewerbung: Schritte */
.steps{margin:.4rem 0 .8rem; padding-left:1.2rem; color:var(--muted); font-size:.88rem; line-height:1.6}
.steps b{color:var(--txt)}
.note{margin:0; font-size:.8rem; color:var(--faint); line-height:1.5}

/* Formular */
form{margin-top:.4rem}
.grid2{display:grid; grid-template-columns:1fr; gap:.85rem}
@media (min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.field{display:flex; flex-direction:column; gap:.35rem}
.field label{font-size:.82rem; color:var(--muted); font-weight:600}
.req{color:var(--acc2)}
.field input,.field select,.field textarea{
  font:inherit; font-size:.9rem; color:var(--txt);
  background:rgba(255,255,255,.05); border:1px solid var(--card-border); border-radius:.55rem;
  padding:.65rem .75rem; min-height:44px; transition:border-color .15s ease, background .15s ease;
}
.field textarea{min-height:auto; resize:vertical; line-height:1.5}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px; background-size:5px 5px; background-repeat:no-repeat}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--acc2); background:rgba(255,255,255,.08)}
.field input:invalid:not(:focus):not(:placeholder-shown){border-color:rgba(248,113,113,.6)}
/* Honeypot ausblenden */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-actions{margin-top:1.1rem}
.submit{
  width:100%; min-height:48px; font:inherit; font-size:.95rem; font-weight:600; cursor:pointer;
  color:#fff; background:linear-gradient(135deg,var(--acc),#dc2626); border:1px solid rgba(251,113,133,.5);
  border-radius:.6rem; transition:transform .12s ease, box-shadow .15s ease, opacity .15s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.submit:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(239,68,68,.35)}
.submit:disabled{opacity:.6; cursor:default; transform:none}
.submit .spin{width:1rem; height:1rem; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-msg{min-height:1.2rem; margin:.7rem 0 0; font-size:.85rem}
.form-msg.ok{color:#4ade80}.form-msg.err{color:#f87171}

/* Creator-Cards (Teilnehmer) – im notschie.de-Stil: Avatar + Gradient-Ring + Glow */
.cards{display:grid; grid-template-columns:1fr; gap:.9rem}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.cards{grid-template-columns:1fr 1fr 1fr}}
.creator{
  background:var(--card); border:1px solid var(--card-border); border-radius:1rem;
  padding:1.5rem 1.2rem 1.3rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem;
  transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.creator:hover{transform:translateY(-4px); border-color:rgba(251,113,133,.5); box-shadow:0 14px 34px rgba(239,68,68,.22)}
/* Avatar mit Gradient-Ring + Glow */
.creator__avatar{
  width:5.2rem; height:5.2rem; border-radius:9999px; padding:3px; flex:none;
  background:linear-gradient(135deg,#ef4444,#fb7185,#f59e0b);
  box-shadow:0 0 30px rgba(239,68,68,.45), 0 0 10px rgba(251,113,133,.5);
  animation:floatyCard 5s ease-in-out infinite;
}
.creator__avatar img{width:100%; height:100%; border-radius:9999px; display:block; object-fit:cover; background:#1a0b0e}
.creator__avatar-fallback{
  width:100%; height:100%; border-radius:9999px; display:grid; place-items:center;
  background:#1a0b0e; color:var(--acc);
}
@keyframes floatyCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.creator__name{font-size:1.12rem; font-weight:700; letter-spacing:-.01em; text-shadow:0 0 18px rgba(239,68,68,.4)}
.creator__role{
  font-size:.72rem; padding:.26rem .72rem; border-radius:9999px;
  border:1px solid rgba(251,113,133,.4); background:var(--acc-soft); color:#ffd7de; font-weight:600;
}
.creator__mc{color:var(--muted); font-size:.82rem; font-family:ui-monospace,Menlo,Consolas,monospace}
.creator__yt{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.2rem;
  color:var(--muted); font-size:.8rem; text-decoration:none; transition:color .15s ease;
}
.creator__yt:hover{color:var(--acc2)}
.empty{color:var(--faint); font-size:.88rem; grid-column:1/-1}

/* Video-Embed */
.video-embed{position:relative; width:100%; aspect-ratio:16/9; border-radius:.8rem; overflow:hidden; border:1px solid var(--card-border); background:#000}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.center-cta{display:flex; justify-content:center}
.btn{display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.7rem 1.2rem; border-radius:.6rem; text-decoration:none; font-weight:600; font-size:.9rem; color:#fff; background:linear-gradient(135deg,var(--acc),#dc2626); border:1px solid rgba(251,113,133,.5); transition:transform .12s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(239,68,68,.35)}
/* Projekt-Videokarten */
.pvideo{background:var(--card); border:1px solid var(--card-border); border-radius:.8rem; overflow:hidden; display:flex; flex-direction:column}
.pvideo__frame{position:relative; width:100%; aspect-ratio:16/9; background:#000}
.pvideo__frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.pvideo__body{padding:.7rem .85rem}
.pvideo__body b{font-size:.92rem; display:block; margin-bottom:.2rem}
.pvideo__body .proj{color:var(--acc2); font-size:.76rem; font-weight:600}
.pvideo__body a{color:var(--muted); font-size:.78rem; text-decoration:none}
.pvideo__body a:hover{color:var(--acc2)}

/* Footer */
.foot{position:relative; z-index:1; text-align:center; color:var(--faint); font-size:.74rem; line-height:1.7; padding:1.5rem 1rem 2.5rem; max-width:46rem; margin:0 auto}
.foot a{color:rgba(255,190,200,.55); text-decoration:none}
.foot a:hover{color:var(--acc2)}

/* Toast */
#toast{position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%) translateY(20px); background:#1e0a10; border:1px solid rgba(251,113,133,.5); color:var(--txt); padding:.55rem 1.1rem; border-radius:.6rem; font-size:.85rem; opacity:0; transition:all .25s ease; z-index:20; pointer-events:none}
#toast.show{opacity:1; transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){
  .hero__badge,.blob,.creator__avatar{animation:none}
  .view{animation:none}
  html{scroll-behavior:auto}
}