/* ProgDeck: gleicher Plakatstil wie die senior-labs-Startseite (Anton, Großbuchstaben, Filmkorn),
   aber Neonblau statt Orange, damit man sofort sieht, wo man ist. */

.pd-body {
  background: #05070d;
}

.pd {
  --pd-bg: #05070d;
  --pd-panel: #0a1020;
  --pd-ink: #eaf4ff;
  --pd-muted: #94a6c4;
  --pd-neon: #2ee6ff;
  --pd-neon2: #7cf3ff;
  --pd-blue: #2b6bff;
  --pd-glow: rgba(46, 230, 255, 0.45);
  --pd-line: rgba(160, 210, 255, 0.14);
  --pd-display: Anton, 'Oswald', 'Arial Narrow', sans-serif;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pd-bg);
  color: var(--pd-ink);
  font-size: 1.2rem;
  line-height: 1.55;
}

.pd [hidden] {
  display: none !important;
}

/* Filmkorn über allem, wie bei senior-labs */
.pd::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.pd a {
  color: inherit;
}

/* ---------- Kopfzeile ---------- */
.pd-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
}

.pd-logo {
  font-family: var(--pd-display);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.pd-logo span {
  color: var(--pd-neon);
  text-shadow: 0 0 14px var(--pd-glow);
}

.pd-logo img {
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.35em;
  vertical-align: -0.24em;
  border-radius: 0.28em;
  box-shadow: 0 0 18px var(--pd-glow);
}

.pd-navr {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
}

.pd .langsw {
  border-color: var(--pd-line);
}

.pd .langsw button.on {
  background: var(--pd-neon);
  color: #04101f;
}

.pd-signin {
  text-decoration: none;
}

.pd-signin:hover {
  color: var(--pd-neon2);
}

.pd-linkbtn {
  min-height: 2.8rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.pd-user {
  color: var(--pd-muted);
}

/* ---------- Plakat ---------- */
.pd-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 100vh;
  padding: 7rem clamp(1rem, 4vw, 3rem) 8rem;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 75% 25%, rgba(43, 107, 255, 0.45) 0%, rgba(10, 20, 60, 0.6) 45%, transparent 75%),
    radial-gradient(60% 50% at 10% 90%, rgba(46, 230, 255, 0.18), transparent 70%),
    linear-gradient(180deg, #070b1a 0%, #05070d 90%);
}

/* Foto hinter dem Plakat: schwarz-weiß, blau eingefärbt, nach unten und links dunkel */
.pd-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/img/progdeck/hero.jpg') 70% 40% / cover;
  filter: grayscale(1) contrast(1.15) brightness(0.9);
  opacity: 0.7;
}

.pd-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #2b6bff;
  mix-blend-mode: color;
}

.pd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 7, 13, 0.92) 0%, rgba(5, 7, 13, 0.6) 45%, rgba(5, 7, 13, 0.25) 100%),
    linear-gradient(180deg, transparent 55%, #05070d 100%);
}

/* Leuchtendes Gitter am Boden (Neon-Look) */
.pd-grid {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -2rem;
  z-index: -1;
  height: 45%;
  transform: perspective(26rem) rotateX(62deg);
  transform-origin: bottom;
  background-image:
    linear-gradient(rgba(46, 230, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 230, 255, 0.35) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(0deg, #000 10%, transparent 90%);
}

.pd-kicker {
  margin-bottom: 1.1rem;
  color: var(--pd-neon2);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.pd-h1 {
  margin: 0;
  font-family: var(--pd-display);
  font-size: clamp(3rem, 7.4vw, 7.5rem);
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55);
}

.pd-h1 span {
  display: block;
}

.pd-hl {
  color: var(--pd-neon);
  text-shadow: 0 0 22px var(--pd-glow), 0 0 60px rgba(43, 107, 255, 0.45);
}

/* Stempel wie bei senior-labs, aber als Neonschild */
.pd-stamp {
  display: inline-block;
  margin: 2rem 0 0.4rem 0.3rem;
  padding: 0.35rem 1.2rem 0.25rem;
  border: 3px solid var(--pd-neon);
  border-radius: 0.4rem;
  color: var(--pd-neon2);
  font-family: var(--pd-display);
  font-size: clamp(1.3rem, 2.4vw, 2.2rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: -3deg;
  box-shadow: 0 0 18px var(--pd-glow), inset 0 0 14px rgba(46, 230, 255, 0.25);
  text-shadow: 0 0 12px var(--pd-glow);
}

.pd-lead {
  max-width: 38rem;
  margin: 1.6rem 0 0;
  color: #cfdcf0;
}

.pd-hero .tip {
  max-width: 38rem;
  margin-top: 1.2rem;
}

.pd-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.9rem;
}

.pd-center {
  justify-content: center;
}

.pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.6rem;
  padding: 0 1.6rem;
  border-radius: 2px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

.pd-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.pd-btn.twitch {
  background: #9146ff;
  color: #fff;
}

.pd-btn.twitch:hover {
  background: #772ce8;
}

.pd-btn.ghost {
  border: 2px solid var(--pd-neon);
  box-shadow: 0 0 14px rgba(46, 230, 255, 0.25);
}

.pd-btn.ghost:hover {
  background: rgba(46, 230, 255, 0.1);
  color: var(--pd-neon2);
}

.pd-note {
  max-width: 38rem;
  margin: 1rem 0 0;
  color: var(--pd-muted);
  font-size: 1rem;
}

/* ---------- Anschauung: so sieht es in OBS aus ---------- */
.pd-mock {
  display: grid;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid rgba(46, 230, 255, 0.4);
  border-radius: 0.6rem;
  background: rgba(8, 14, 32, 0.85);
  box-shadow: 0 0 0 1px rgba(43, 107, 255, 0.2), 0 0 60px rgba(46, 230, 255, 0.18), 0 30px 80px rgba(0, 0, 0, 0.6);
  rotate: 2deg;
}

.pd-mock-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.pd-mock-tag i {
  padding: 2px 7px;
  background: #e91916;
  color: #fff;
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

.pd-mock-tag span {
  color: var(--pd-muted);
}

.pd-boss-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.pd-boss-top b {
  font-family: var(--pd-display);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pd-pct {
  color: var(--pd-neon);
  font-family: var(--pd-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 400;
  text-shadow: 0 0 14px var(--pd-glow);
}

.pd-bar {
  height: 1.1rem;
  margin-top: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(46, 230, 255, 0.35);
  border-radius: 2px;
  background: #050914;
}

.pd-bar span {
  display: block;
  width: 38.6%;
  height: 100%;
  background: linear-gradient(90deg, var(--pd-blue), var(--pd-neon));
  box-shadow: 0 0 16px var(--pd-glow);
  animation: pd-drain 9s ease-in-out infinite alternate;
}

@keyframes pd-drain {
  from {
    width: 61%;
  }
  to {
    width: 38.6%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-bar span {
    animation: none;
  }
}

.pd-boss-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
  font-weight: 700;
}

.pd-boss-meta small,
.pd-mplus small {
  color: var(--pd-muted);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-mplus {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--pd-line);
}

.pd-mplus div {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.6rem;
  background: rgba(8, 14, 32, 0.95);
}

.pd-mplus b {
  font-family: var(--pd-display);
  font-size: 1.5rem;
  font-weight: 400;
}

/* ---------- Abschnitte ---------- */
.pd-sec {
  padding: 6rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--pd-line);
}

.pd-wrap {
  max-width: 70rem;
  margin: 0 auto;
}

.pd-eyebrow {
  color: var(--pd-neon);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.pd-h2 {
  margin: 0.75rem 0 1.4rem;
  font-family: var(--pd-display);
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.pd-h2 > span {
  display: block;
}

/* Drei Schritte: große Ziffern als Neonumriss */
.pd-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 1.9rem;
}

.pd-n {
  color: transparent;
  font-family: var(--pd-display);
  font-size: 7rem;
  line-height: 0.85;
  -webkit-text-stroke: 2px var(--pd-neon);
  filter: drop-shadow(0 0 10px var(--pd-glow));
}

.pd-step h3 {
  margin: 0.9rem 0 0.4rem;
  font-size: 1.4rem;
}

.pd-step p {
  margin: 0;
  color: var(--pd-muted);
}

/* Was angezeigt wird */
.pd-feat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 1.75rem;
  background: var(--pd-line);
}

.pd-feat div {
  padding: 1.25rem 1rem;
  background: var(--pd-bg);
  font-weight: 700;
}

.pd-feat small {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--pd-neon);
  font-family: var(--pd-display);
  font-size: 1.4rem;
  font-weight: 400;
}

/* Ohne Addon: vorher / ProgDeck */
.pd-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 1.75rem;
  background: var(--pd-line);
}

.pd-vs > div {
  padding: 1.9rem;
  background: var(--pd-bg);
}

.pd-vs h3 {
  margin: 0 0 0.75rem;
  font-family: var(--pd-display);
  font-size: 1.75rem;
  font-weight: 400;
  text-transform: uppercase;
}

.pd-vs .bad h3 {
  color: var(--pd-muted);
  text-decoration: line-through;
  text-decoration-color: var(--pd-neon);
}

.pd-vs .good h3 {
  color: var(--pd-neon);
  text-shadow: 0 0 14px var(--pd-glow);
}

.pd-vs ul {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-vs li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.25rem;
  line-height: 1.45;
}

.pd-vs .bad li {
  color: var(--pd-muted);
}

.pd-vs .bad li::before {
  content: '–';
  font-weight: 700;
}

.pd-vs .good li {
  font-weight: 700;
}

.pd-vs .good li::before {
  content: '+';
  color: var(--pd-neon);
  font-weight: 700;
}

.pd-vs .good {
  box-shadow: inset 0 0 0 1px rgba(46, 230, 255, 0.55), inset 0 0 40px rgba(46, 230, 255, 0.08);
  background: linear-gradient(180deg, rgba(46, 230, 255, 0.07), transparent 60%), var(--pd-bg) !important;
}

/* Breite Fotos mit Text darüber: schwarz-weiß, blau eingefärbt (wie bei senior-labs in Orange) */
.pd-pic {
  position: relative;
  margin: 2.8rem 0 0;
  overflow: hidden;
  border: 1px solid var(--pd-line);
  background: #070b1a;
}

.pd-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(0.85);
}

.pd-pic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #2b6bff;
  mix-blend-mode: color;
  opacity: 0.85;
}

.pd-pic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pd-pic figcaption {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.pd-pic figcaption b {
  display: block;
  font-family: var(--pd-display);
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
}

.pd-pic figcaption b > span {
  display: block;
}

/* Tisch mit Tastatur: flacher Streifen, Text rechts */
.pd-desk {
  aspect-ratio: 5 / 1;
}

/* Das Foto ist sehr dunkel: etwas aufhellen */
.pd-desk img {
  filter: grayscale(1) contrast(1.25) brightness(1.5);
}

.pd-desk::after {
  background: linear-gradient(90deg, rgba(5, 7, 13, 0.1) 30%, rgba(5, 7, 13, 0.85) 75%);
}

.pd-desk figcaption {
  right: clamp(1.1rem, 4vw, 3rem);
  max-width: 50%;
  text-align: right;
}

.pd-desk figcaption b {
  font-size: clamp(1.4rem, 3.4vw, 3rem);
}

/* Gruppe am Rechner: Text links */
.pd-team {
  aspect-ratio: 21 / 9;
}

.pd-team img {
  object-position: 60% 50%;
}

.pd-team::after {
  background: linear-gradient(90deg, rgba(5, 7, 13, 0.92) 0%, rgba(5, 7, 13, 0.4) 45%, rgba(5, 7, 13, 0) 70%);
}

.pd-team figcaption {
  left: clamp(1.1rem, 4vw, 2.5rem);
  max-width: 46%;
}

.pd-team figcaption b {
  font-size: clamp(1.5rem, 3.8vw, 3.4rem);
}

/* Abschluss: Reihe Rechner im Hintergrund, unten Neonglühen */
.pd-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 9rem 1rem;
  text-align: center;
  background: radial-gradient(120% 95% at 50% 118%, #2ee6ff 0%, #2b6bff 20%, #142a7a 42%, #070b1a 72%, #05070d 100%);
}

.pd-final::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/img/progdeck/final.jpg') center / cover;
  filter: grayscale(1) contrast(1.2) brightness(0.6);
  mix-blend-mode: luminosity;
  opacity: 0.35;
}

.pd-final .pd-h2 {
  font-size: clamp(2.8rem, 8vw, 7rem);
}

/* ---------- Angemeldet ---------- */
.pd-app {
  flex: 1;
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding: 8rem clamp(1rem, 4vw, 3rem) 4rem;
}

.pd-card {
  padding: 2rem;
  border: 1px solid rgba(46, 230, 255, 0.35);
  border-radius: 0.6rem;
  background: var(--pd-panel);
  box-shadow: 0 0 40px rgba(46, 230, 255, 0.1);
}

.pd-card p {
  margin: 0;
  color: #cfdcf0;
}

/* ---------- Fuß ---------- */
.pd-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding: 1.75rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--pd-line);
  color: var(--pd-muted);
  font-size: 0.95rem;
}

/* ---------- Schmal ---------- */
@media (max-width: 62rem) {
  .pd-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 7.5rem;
  }

  .pd-mock {
    max-width: 32rem;
    rotate: 0deg;
  }
}

@media (max-width: 49rem) {
  .pd-steps,
  .pd-vs {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-feat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .pd-logo {
    font-size: 1.35rem;
  }

  .pd-navr {
    gap: 0.6rem;
  }

  .pd-signin,
  .pd-user {
    display: none;
  }

  .pd-stamp {
    font-size: 1.15rem;
    white-space: normal;
  }

  .pd-mplus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Schmal: Fotos höher, damit der Text darauf Platz hat */
  .pd-desk {
    aspect-ratio: 5 / 2;
  }

  .pd-team {
    aspect-ratio: 4 / 3;
  }

  .pd-desk figcaption,
  .pd-team figcaption {
    max-width: 70%;
  }
}