/* NK Webdesign – Seitenlook „Schaufenster dunkel“
   Vorlage: skillpaketv1/designsysteme/…/framer/DESIGN.md (schwarze Leinwand, Plakat-Typo mit enger
   Laufweite, weiße Pillen-Knöpfe, Browser-Rahmen als Schaufenster) – übertragen in NK-Farben. */

.wd {
  --leinwand: #0d1117;
  --flaeche-1: #151a22;
  --flaeche-2: #1c222c;
  --haar-dunkel: rgba(255, 255, 255, 0.08);
  --gedaempft: #9aa3b2;
  --blau-licht: #6d8bff;
  background: var(--leinwand);
  color: #fff;
}
body:has(.wd) { background: #0d1117; }
.navigation-innen { background: rgba(255, 255, 255, 0.92); }

/* ---------- Typografie ---------- */
.wd .ueberschrift {
  color: #fff;
  font-size: clamp(2.6rem, 6.6vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  max-width: 13ch;
}
.wd .ueberschrift .blau, .wd h1 .blau { color: var(--blau-licht); }
.wd .unterzeile { color: var(--gedaempft); font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.55; }
.wd .textlink { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.wd .textlink:hover { color: var(--blau-licht); border-color: var(--blau-licht); }
.wd-auge {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px;
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--gedaempft);
}
.wd-auge::before { content: ""; width: 8px; height: 8px; background: var(--blau); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.wd .abschnitt { padding: clamp(90px, 11vw, 150px) 0; background: transparent; }
.wd .wd-abschnitt-tief { background: #0a0d12; border-block: 1px solid var(--haar-dunkel); }
.wd-kopfzeile {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px 48px; flex-wrap: wrap;
  margin-bottom: clamp(44px, 6vw, 80px);
}
.wd-kopfzeile > div { flex: 1 1 520px; }
.wd-kopfzeile .unterzeile { margin: 0; flex: 0 1 430px; }
.wd-fall .ueberschrift { font-size: clamp(2.6rem, 5vw, 4.8rem); }
.wd .merkmale li { color: #c3cad6; }
.wd-nr { font: 500 0.78rem/1 var(--mono); color: var(--gedaempft); margin-bottom: 22px; }

/* ---------- Knöpfe: weiße Pille (primär), Kohle-Pille (zweitrangig) ---------- */
.wd .knopf-weiss:hover { background: #fff; box-shadow: 0 18px 50px -16px rgba(109, 139, 255, 0.6); }
.knopf-kohle { background: var(--flaeche-1); color: #fff; border-color: var(--haar-dunkel); padding: 14px 24px; }
.knopf-kohle:hover { background: var(--flaeche-2); border-color: rgba(255, 255, 255, 0.2); box-shadow: none; }

/* ---------- Kopf: Wand aus echten Kundenseiten über die ganze Breite ---------- */
.wd-held {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 150px 0 110px;
  overflow: clip;
  isolation: isolate;
  text-align: center;
  background: var(--leinwand);
}
.wd-held .huelle { position: relative; z-index: 3; }
.wd-held .wd-auge { justify-content: center; }
.wd-held h1 {
  color: #fff;
  font-size: clamp(3.1rem, 10.5vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
  max-width: 11ch;
  margin: 0 auto;
  text-shadow: 0 10px 60px rgba(13, 17, 23, 0.8);
}
.wd-held .unterzeile { color: #c3cad6; margin: 30px auto 0; max-width: 44ch; }
.wd-held .kopf-aktionen { justify-content: center; }
.wd-held .glut { z-index: 2; background: radial-gradient(circle, rgba(109, 139, 255, 0.18), transparent 62%); }
/* Abdunklung: Mitte ruhig für den Text, Ränder zeigen die Seiten, unten weicher Übergang */
.wd-held::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 50%, rgba(13, 17, 23, 0.93) 0%, rgba(13, 17, 23, 0.8) 42%, rgba(13, 17, 23, 0.3) 100%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.55) 0%, transparent 22%, transparent 72%, #0d1117 100%);
}
.schau-wand {
  position: absolute; z-index: 0;
  inset: -28% -14%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  transform: perspective(2000px) rotateX(20deg) rotateZ(-9deg);
  pointer-events: none;
}
.schau-spalte:nth-child(even) { margin-top: -170px; }
.schau-band { display: flex; flex-direction: column; gap: 22px; padding-bottom: 22px; animation: schau-lauf 64s linear infinite; will-change: transform; }
.schau-spalte:nth-child(2) .schau-band { animation-duration: 78s; animation-direction: reverse; }
.schau-spalte:nth-child(3) .schau-band { animation-duration: 56s; }
.schau-spalte:nth-child(4) .schau-band { animation-duration: 70s; animation-direction: reverse; }
.schau-spalte:nth-child(5) .schau-band { animation-duration: 60s; }
@keyframes schau-lauf { to { transform: translateY(-25%); } }
.schau-fenster { border-radius: 14px; overflow: hidden; background: var(--flaeche-1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -24px rgba(0, 0, 0, 0.7); }
.schau-leiste {
  height: 26px; padding-left: 46px;
  display: flex; align-items: center;
  font: 10px/1 var(--mono); color: #6e7787; white-space: nowrap; overflow: hidden;
  background:
    radial-gradient(circle at 14px 50%, #3a4250 3.5px, transparent 4px),
    radial-gradient(circle at 25px 50%, #3a4250 3.5px, transparent 4px),
    radial-gradient(circle at 36px 50%, #3a4250 3.5px, transparent 4px);
}
.schau-fenster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.schau-fakten {
  list-style: none; padding: 0; margin: 44px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  font-family: var(--mono); font-size: 0.82rem; color: var(--gedaempft);
}
.schau-fakten li { display: inline-flex; align-items: center; gap: 9px; }
.live-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--blau-licht); flex: none; animation: live-puls 2s ease-out infinite; }
@keyframes live-puls { 0% { box-shadow: 0 0 0 0 rgba(109, 139, 255, 0.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(109, 139, 255, 0); } }

/* ---------- Laufband: große Plakat-Wörter ---------- */
.wd-laufband { overflow: hidden; padding: clamp(22px, 3vw, 34px) 0; border-block: 1px solid var(--haar-dunkel); background: var(--leinwand); }
.wd-laufband-spur { display: flex; width: max-content; animation: wd-band 34s linear infinite; }
.wd-laufband span {
  display: inline-flex; align-items: center; gap: clamp(26px, 3vw, 48px);
  padding-right: clamp(26px, 3vw, 48px);
  font-size: clamp(2.2rem, 5.4vw, 4.8rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1;
  white-space: nowrap; color: #fff;
}
.wd-laufband span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5); }
.wd-laufband span::after { content: ""; width: 0.4em; height: 0.4em; background: var(--blau); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
@keyframes wd-band { to { transform: translateX(-50%); } }

/* ---------- Leistungen: dunkles Bento mit einer blauen Lichtkachel ---------- */
.wd-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.wd-kachel {
  position: relative; overflow: hidden;
  background: var(--flaeche-1);
  border: 1px solid var(--haar-dunkel);
  border-radius: 24px;
  padding: clamp(26px, 3vw, 42px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.wd-kachel h3 { color: #fff; font-size: clamp(1.45rem, 2.1vw, 2rem); letter-spacing: -0.035em; }
.wd-kachel > p:not(.wd-nr):not(.wd-riesig), .wd-bildtext > p:not(.wd-nr) { color: var(--gedaempft); margin-top: 12px; max-width: 56ch; }
.wd-k4 { grid-column: span 4; }
.wd-k2 { grid-column: span 2; }
.wd-licht { background: radial-gradient(130% 110% at 0% 0%, #7d99ff 0%, #2f5bff 42%, #1a32b8 100%); border-color: transparent; }
.wd-licht .wd-nr, .wd-licht > p:not(.wd-riesig) { color: rgba(255, 255, 255, 0.85) !important; }
.wd-riesig { margin-top: 14px; font-size: clamp(4.4rem, 8.6vw, 8rem); font-weight: 600; letter-spacing: -0.07em; line-height: 0.9; color: #fff; }
.wd-serp {
  display: block; margin-top: 28px;
  background: #fff; border-radius: 14px; padding: 18px 20px;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.9);
  transform: rotate(-1.6deg);
  transition: transform 0.6s var(--feder-schwung);
}
.wd-kachel:hover .wd-serp { transform: rotate(0deg) translateY(-4px); }
.wd-serp span { display: block; }
.wd-serp .url { font-size: 12px; color: #4d5156; }
.wd-serp .titel { font-size: 18px; color: #1a0dab; margin: 5px 0 4px; line-height: 1.3; }
.wd-serp .text { font-size: 13px; color: #4d5156; line-height: 1.45; }
.wd-bildkachel { padding: 0; min-height: 420px; display: flex; align-items: flex-end; }
.wd-bildkachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--feder); }
.wd-bildkachel:hover img { transform: scale(1.05); }
.wd-bildkachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 17, 23, 0) 25%, rgba(13, 17, 23, 0.94) 100%); }
.wd-bildtext { position: relative; z-index: 1; padding: clamp(26px, 3vw, 42px); }

/* ---------- Pakete ---------- */
.wd-pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.wd-paket {
  display: flex; flex-direction: column;
  background: var(--flaeche-1);
  border: 1px solid var(--haar-dunkel);
  border-radius: 24px;
  padding: clamp(28px, 3vw, 40px);
}
.wd-paket h3 { color: #fff; font-size: clamp(1.7rem, 2.4vw, 2.3rem); letter-spacing: -0.04em; }
.wd-paket .wofuer { color: var(--gedaempft); margin-top: 12px; }
.wd-paket .merkmale { grid-template-columns: 1fr; gap: 12px; margin-top: 26px; margin-bottom: 26px; }
.wd-paket .paket-fuss { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--haar-dunkel); font: 0.78rem/1.4 var(--mono); color: var(--gedaempft); }
.wd-paket-top {
  background: var(--flaeche-2);
  border-color: rgba(109, 139, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(109, 139, 255, 0.3), 0 50px 100px -40px rgba(47, 91, 255, 0.75);
  transform: translateY(-16px);
}
.wd-paket-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wd-abzeichen { background: var(--blau); color: #fff; border-radius: 999px; padding: 6px 12px; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.04em; }
.wd-pakete-hinweis { margin-top: 44px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.wd-pakete-hinweis p { color: var(--gedaempft); font-size: 0.95rem; }

/* ---------- Werbefilm über die ganze Breite ---------- */
.film { position: relative; background: var(--leinwand); }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 100svh; object-fit: cover; background: var(--leinwand); cursor: pointer; }
@media (max-aspect-ratio: 3/4) { .film-video { aspect-ratio: 9 / 16; } }
.film-leiste { position: absolute; right: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 36px); }
.film-ton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(13, 17, 23, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font: 600 0.92rem var(--schrift); cursor: pointer;
  transition: background 0.3s var(--feder), border-color 0.3s var(--feder), transform 0.5s var(--feder);
}
.film-ton:hover { background: var(--blau); border-color: var(--blau); }
.film-ton:active { transform: scale(0.96); transition-duration: 0.08s; }
.film-ton[aria-pressed="false"] .welle { opacity: 0.3; }

/* ---------- Fallstudie ---------- */
.wd-fall { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(44px, 6vw, 96px); align-items: center; }
.wd-fakten { list-style: none; padding: 0; margin: 38px 0 0; border-top: 1px solid var(--haar-dunkel); }
.wd-fakten li { display: grid; grid-template-columns: 118px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--haar-dunkel); }
.wd-fakten .schluessel { font: 0.76rem/1.6 var(--mono); color: var(--gedaempft); }
.wd-fakten .wert { color: #e3e7ee; }
.wd-buehne { position: relative; padding: 0 0 12% 0; }
.wd-buehne::before { content: ""; position: absolute; inset: 10% 0 0; background: radial-gradient(closest-side, rgba(47, 91, 255, 0.45), transparent); filter: blur(30px); z-index: 0; }
.wd-browser { position: relative; z-index: 1; border-radius: 16px; overflow: hidden; background: var(--flaeche-1); box-shadow: 0 0 0 1px var(--haar-dunkel), 0 50px 100px -40px rgba(0, 0, 0, 0.9); }
.wd-browser .schau-leiste { height: 32px; font-size: 11px; padding-left: 52px; background-color: var(--flaeche-2); }
.wd-browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.wd-telefon {
  position: absolute; z-index: 2; right: -3%; bottom: 0; width: 27%;
  border-radius: 26px; overflow: hidden;
  border: 6px solid #1c222c;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95);
}
.wd-telefon img { display: block; width: 100%; height: auto; }

/* ---------- Referenzen: Galerie echter Seiten ---------- */
.wd-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wd-projekt-fuss > div { min-width: 0; }
.wd-projekt {
  display: block; text-decoration: none; color: #fff;
  background: var(--flaeche-1);
  border: 1px solid var(--haar-dunkel);
  border-radius: 24px; padding: 12px;
  transition: transform 0.6s var(--feder-schwung), border-color 0.4s var(--feder), background 0.4s var(--feder);
}
a.wd-projekt:hover { transform: translateY(-6px); border-color: rgba(109, 139, 255, 0.5); background: var(--flaeche-2); }
.wd-projekt .wd-browser { border-radius: 14px; box-shadow: none; }
.wd-projekt .wd-browser img { transition: transform 1.2s var(--feder); }
a.wd-projekt:hover .wd-browser img { transform: scale(1.04); }
.wd-projekt-fuss { display: flex; align-items: center; gap: 16px; padding: 18px 10px 8px; }
.wd-projekt-fuss .nr { font: 500 0.8rem/1 var(--mono); color: var(--gedaempft); align-self: flex-start; padding-top: 6px; }
.wd-projekt-fuss h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -0.03em; }
.wd-projekt-fuss .branche { color: var(--gedaempft); font-size: 0.92rem; margin-top: 4px; }
.wd-projekt-fuss .kreis {
  margin-left: auto; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--leinwand);
  transition: transform 0.55s var(--feder-schwung), background 0.3s var(--feder), color 0.3s var(--feder);
}
a.wd-projekt:hover .kreis { background: var(--blau); color: #fff; transform: scale(1.1) rotate(45deg); }
.wd-projekt-bald .kreis { background: var(--flaeche-2); color: var(--gedaempft); }

/* ---------- Ladezeit-Rennen auf dunkel ---------- */
.wd .rennen { background: rgba(255, 255, 255, 0.03); border-color: var(--haar-dunkel); }
.wd .rennen .kern { background: var(--flaeche-1); color: #fff; box-shadow: none; }
.wd .rennen-kopf h3 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -0.04em; }
.wd .rennen-kopf p, .wd .rennen-fazit { color: var(--gedaempft); }
.wd .rennen-fazit strong { color: var(--blau-licht); }
.wd .rennen .knopf-blau:hover { background: var(--blau-dunkel); }
.wd .bahn-spur { background: rgba(255, 255, 255, 0.06); border-color: var(--haar-dunkel); }
.wd .bahn-fuellung { background: #4a5263; }
.wd .bahn-nk .bahn-fuellung { background: var(--blau); box-shadow: 0 0 24px rgba(47, 91, 255, 0.7); }
.wd .bahn-kopf .zeit { color: var(--gedaempft); white-space: nowrap; }
.wd .bahn-nk .bahn-kopf .zeit { color: var(--blau-licht); }

/* ---------- Fragen ---------- */
.wd-fragen-gitter { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.wd .fragen { margin-top: 0; border-top: 1px solid var(--haar-dunkel); }
.wd .fragen details { background: transparent; border: 0; border-bottom: 1px solid var(--haar-dunkel); border-radius: 0; box-shadow: none; margin: 0; }
.wd .fragen summary { color: #fff; padding: 26px 0; font-size: clamp(1.08rem, 1.5vw, 1.3rem); letter-spacing: -0.02em; }
.wd .fragen summary:hover { color: var(--blau-licht); }
.wd .fragen summary::after { color: var(--blau-licht); }
.wd .fragen .antwort { color: var(--gedaempft); padding: 0 0 26px; }

/* ---------- Schluss: blaue Lichtkarte ---------- */
.wd-schluss { padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 10vw, 140px); }
.wd-schluss-karte {
  position: relative; overflow: hidden;
  border-radius: 32px;
  padding: clamp(48px, 8vw, 120px) clamp(26px, 6vw, 96px);
  background: radial-gradient(120% 130% at 100% 0%, #7d99ff 0%, #2f5bff 40%, #1a32b8 100%);
}
.wd-schluss-karte .wd-auge { color: rgba(255, 255, 255, 0.8); }
.wd-schluss-karte .wd-auge::before { background: #fff; }
.wd-schluss-karte h2 { position: relative; color: #fff; font-size: clamp(2.5rem, 6.4vw, 5.8rem); line-height: 0.92; letter-spacing: -0.055em; max-width: 12ch; }
.wd-schluss-karte .unterzeile { position: relative; color: rgba(255, 255, 255, 0.86); max-width: 44ch; margin-top: 24px; }
.wd-schluss-karte .kopf-aktionen { position: relative; }
.wd-schluss-karte .glyphe { position: absolute; right: -4%; top: 50%; height: 125%; width: auto; transform: translateY(-50%); opacity: 0.16; pointer-events: none; }

/* ---------- Tablet & Handy ---------- */
@media (max-width: 900px) {
  .wd-bento, .wd-pakete, .wd-fall, .wd-fragen-gitter { grid-template-columns: 1fr; }
  .wd-k4, .wd-k2 { grid-column: auto; }
  .wd-paket-top { transform: none; }
  .wd-bildkachel { min-height: 460px; }
}
@media (max-width: 760px) {
  .schau-wand { inset: -18% -55%; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: perspective(1400px) rotateX(18deg) rotateZ(-10deg); }
  .schau-spalte:nth-child(n+4) { display: none; }
  .schau-band { gap: 14px; padding-bottom: 14px; }
  .wd-held { padding: 130px 0 90px; }
  .wd-held::after {
    background:
      radial-gradient(95% 58% at 50% 50%, rgba(13, 17, 23, 0.95) 0%, rgba(13, 17, 23, 0.84) 55%, rgba(13, 17, 23, 0.45) 100%),
      linear-gradient(180deg, rgba(13, 17, 23, 0.5) 0%, transparent 20%, transparent 75%, #0d1117 100%);
  }
  .wd-galerie { grid-template-columns: minmax(0, 1fr); }
  .wd-fakten li { grid-template-columns: 1fr; gap: 4px; }
  .wd-telefon { right: 2%; width: 30%; border-width: 4px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .schau-band, .live-punkt, .wd-laufband-spur { animation: none; }
}

/* =====================================================================
   Dunkler Look für ALLE NK-Seiten (main.wd): helle Grundflächen umgedreht,
   Bausteine aus stil.css passen sich darüber automatisch an.
   ===================================================================== */
.wd {
  --weiss: #151a22;
  --papier: #0d1117;
  --tinte-2: #b4bccb;
  --tinte-3: #8a93a6;
  --haar: rgba(255, 255, 255, 0.1);
  --haar-weich: rgba(255, 255, 255, 0.06);
  --blau-tief: rgba(47, 91, 255, 0.16);
  --schatten-leicht: 0 14px 40px -20px rgba(0, 0, 0, 0.7);
  --schatten-schwebend: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}
.wd .abschnitt-weiss { background: #0a0d12; border-block: 1px solid var(--haar-dunkel); }
.wd h1, .wd h2, .wd h3 { color: #fff; }
.wd .blau { color: var(--blau-licht); }
.wd .knopf:not(.knopf-blau):not(.knopf-weiss):not(.knopf-leise):not(.knopf-kohle) { background: #fff; color: var(--leinwand); }
.wd .knopf:not(.knopf-blau):not(.knopf-weiss):not(.knopf-leise):not(.knopf-kohle) .kreis { background: var(--blau); color: #fff; }
.wd .knopf-leise { color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.wd .knopf-leise:hover { color: #fff; border-color: var(--blau-licht); background: rgba(47, 91, 255, 0.18); }
.wd .kern { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.wd .schale { background: rgba(255, 255, 255, 0.03); border-color: var(--haar-dunkel); }
.wd .plakette { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #c9d1de; }
.wd .laufband-teil span, .wd .zahl-karte .zahl,
.wd .kontakt-karte dd a, .wd .feld input, .wd .feld textarea, .wd .feld select { color: #fff; }
.wd .feld input, .wd .feld textarea, .wd .feld select { background: var(--flaeche-1); border-color: rgba(255, 255, 255, 0.14); }
.wd .feld input::placeholder, .wd .feld textarea::placeholder { color: #6e7787; }
.wd .feld select option { background: #151a22; color: #fff; }
/* Partner-Band bleibt ein heller Streifen: echte Logos haben helle Hintergründe */
.wd .partner-band { --weiss: #ffffff; --papier: #f5f6f9; --tinte-2: #465062; --tinte-3: #8a93a6; --haar: rgba(13, 17, 23, 0.09); background: #f5f6f9; color: var(--tinte); }
.wd .partner-band .partner-logo { color: var(--tinte); }
.wd .schlussblock .unterzeile, .wd .schlussblock .mail-hinweis { color: rgba(255, 255, 255, 0.86); }
.wd .region-orte li { background: var(--flaeche-1); border-color: var(--haar-dunkel); color: #c9d1de; }
.wd .abschnitt-weiss .region-orte li { background: var(--flaeche-1); }

/* Plakat-Überschriften auch auf den anderen Seiten */
.wd .ueberschrift { max-width: 16ch; }
.wd .kopf:not(.wd-held) { background: radial-gradient(60% 70% at 85% 0%, rgba(47, 91, 255, 0.22), transparent 70%), var(--leinwand); padding: 190px 0 110px; }
.wd .kopf:not(.wd-held) h1 { color: #fff; font-size: clamp(2.8rem, 7.4vw, 6.6rem); line-height: 0.92; letter-spacing: -0.055em; max-width: 14ch; }
.wd .kopf:not(.wd-held) .unterzeile { color: #b4bccb; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.wd .glut { background: radial-gradient(circle, rgba(109, 139, 255, 0.18), transparent 62%); }

/* Startseite: Schreibmaschine als Plakat über der Wand */
.wd-held.buehne { min-height: 100svh; }
.wd-held .buehne-gitter { display: block; text-align: center; }
.wd-held h1.plakette { margin: 0 auto 26px; font-size: 11px; line-height: 1.4; letter-spacing: 0.18em; max-width: none; text-shadow: none; color: #c9d1de; }
.wd-held .buehne-titel { color: #fff; font-size: clamp(3.1rem, 10.5vw, 10rem); line-height: 0.86; letter-spacing: -0.06em; text-shadow: 0 10px 60px rgba(13, 17, 23, 0.8); }
.wd-held .buehne-titel .zeile-blau { color: var(--blau-licht); display: block; min-height: 0.95em; }
.wd-held .buehne-aktionen { justify-content: center; }
@media (max-width: 560px) {
  .wd-held .buehne-titel { hyphens: manual; }
}