/* Webdesign-Seite – Seitenstile */

/* Hinweis: Klassen auf <p>/<ul>/<ol> sind doppelt notiert (z. B. .wd-019.wd-019),
   damit sie die Template-Regel ".mainInner p" (40px Abstand oben/unten, graue Farbe) schlagen. */

/* Basis */
body{margin:0;background:#161515}
:where(.wd-001) a{color:#b9a4ff}:where(.wd-001) a:hover{color:#ffffff}
.tg-space{background-color:#08070b;background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 78% 12%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 33% 72%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 88% 64%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 55% 40%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 6% 86%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 66% 88%,rgba(255,255,255,.6),transparent 60%),radial-gradient(circle at 18% 30%,rgba(90,38,128,.55),transparent 45%),radial-gradient(circle at 85% 75%,rgba(61,26,82,.9),transparent 50%)}
.mainnormal {
width:100%;
margin:0;
}
.mainInner {
padding-top: 0px;
}
/* Elemente */
.wd-001{font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #e8e6e3; background: #161515; letter-spacing: 0.01em}
.wd-002{position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden}
.wd-003{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%}
.wd-004{position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,11,10,0.86) 0%, rgba(12,11,10,0.5) 50%, rgba(12,11,10,0) 82%)}
.wd-005{position: relative; width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 96px 5%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 48px}
.wd-006{max-width: 680px; display: flex; flex-direction: column; gap: 28px}
.wd-007.wd-007{margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.18em; color: #8b63ff}
.wd-008{margin: 0; font-size: clamp(44px, 5.4vw, 76px); line-height: 1.04; font-weight: 700; letter-spacing: -0.02em; color: #ffffff}
.wd-009.wd-009{margin: 0; font-size: 20px; line-height: 1.6; font-weight: 300; color: #e6e2dd}
.wd-010{display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px}
.wd-011{display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px; background: #5b3fc4; color: #ffffff; text-decoration: none; font-size: 17px; font-weight: 500}
.wd-012{display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border: 1px solid rgba(255,255,255,0.7); color: #ffffff; text-decoration: none; font-size: 17px; font-weight: 500}
.wd-013{display: flex; flex-direction: column; gap: 4px; padding: 24px 28px; background: rgba(22,21,21,0.82); border-top: 3px solid #8b63ff}
.wd-014{font-size: 64px; line-height: 1; font-weight: 900; color: #ffffff}
.wd-015{font-size: 18px; font-weight: 500; color: #ffffff}
.wd-016{font-size: 14px; color: #b3afaa}
.wd-017{max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 120px 5%; display: flex; flex-direction: column; align-items: center; gap: 56px; text-align: center}
.wd-018{display: flex; flex-direction: column; gap: 20px; align-items: center}
.wd-019.wd-019{margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.18em; color: #cbb8ff}
.wd-020{margin: 0; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.12; font-weight: 700; color: #ffffff}
.wd-021{display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 12px 32px; line-height: 1.1}
.wd-022{font-size: 30px; font-weight: 300; color: #a9a5a0}
.wd-023{font-size: 40px; font-weight: 500; color: #f4f1ec}
.wd-024{font-size: clamp(40px, 4.4vw, 60px); font-weight: 900; color: #cbb8ff}
.wd-025{font-size: clamp(56px, 6.4vw, 92px); font-weight: 900; letter-spacing: -0.03em; color: #ffffff}
.wd-026{font-size: 40px; font-weight: 700; color: #ffffff; background: #6b3591; padding: 4px 18px 8px}
.wd-027{font-size: 34px; font-weight: 700; color: #cbb8ff}
.wd-028{font-size: 32px; font-weight: 400; color: #f4f1ec}
.wd-029{font-size: 30px; font-weight: 500; color: #cbb8ff}
.wd-030{font-size: 28px; font-weight: 300; color: #f4f1ec}
.wd-031{font-size: 26px; font-weight: 300; color: #a9a5a0}
.wd-032{max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 128px 5% 112px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 64px 96px; align-items: center}
.wd-033{display: flex; flex-direction: column; gap: 24px; max-width: 580px}
.wd-034{margin: 0; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; color: #ffffff}
.wd-035.wd-035{margin: 0; font-size: 18px; line-height: 1.7; font-weight: 300; color: #c9c5c0}
.wd-036{margin: 0; display: flex; flex-direction: column; gap: 12px}
.wd-037{background: #2a2827; border: 1px solid #3a3835}
.wd-038{display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #3a3835}
.wd-039{width: 10px; height: 10px; border-radius: 50%; background: #5a5652}
.wd-040{width: 100%; height: auto; display: block}
.wd-041{font-size: 15px; line-height: 1.5; color: #b3afaa}
.wd-042{background: #1e1d1c; border-top: 1px solid #2c2a28; border-bottom: 1px solid #2c2a28}
.wd-043{max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 96px 5%; display: flex; flex-direction: column; gap: 56px}
.wd-044{display: flex; flex-direction: column; gap: 16px; max-width: 720px}
.wd-045.wd-045{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 40px}
.wd-046.wd-046{display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 1px solid #3a3835}
.wd-047{font-size: 15px; font-weight: 500; letter-spacing: 0.12em; color: #8b63ff}
.wd-048{margin: 0; font-size: 24px; font-weight: 700; color: #ffffff}
.wd-049.wd-049{margin: 0; font-size: 17px; line-height: 1.65; font-weight: 300; color: #c9c5c0}
.wd-050{display: flex; flex-direction: column; gap: 24px; max-width: 600px}
.wd-051{display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; line-height: 1.15; padding: 8px 0}
.wd-052{font-size: 34px; font-weight: 900; color: #ffffff}
.wd-053{font-size: 26px; font-weight: 700; color: #ffffff; background: #3d1a52; padding: 4px 14px 6px}
.wd-054{font-size: 28px; font-weight: 700; color: #8b63ff}
.wd-055{font-size: 24px; font-weight: 500; color: #cbb8ff}
.wd-056{font-size: 22px; font-weight: 300; color: #a9a5a0}
.wd-057{align-self: flex-start; color: #ffffff; text-decoration: none; font-size: 17px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid #8b63ff}
.wd-058{background: #1e1d1c; border-top: 1px solid #2c2a28}
.wd-059{max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 120px 5%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 64px 96px; align-items: center}
.wd-060{display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 260px 220px; gap: 12px}
.wd-061{grid-column: 1 / 3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block}
.wd-062{width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block}
.wd-063{width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; display: block}
.wd-064{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr))}
.wd-065{position: relative; min-height: 480px}
.wd-066{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block}
.wd-067{box-sizing: border-box; padding: 112px 8%; display: flex; flex-direction: column; justify-content: center; gap: 24px; background: #161515}
.wd-068.wd-068{margin: 0; font-size: 18px; line-height: 1.7; font-weight: 300; color: #c9c5c0; max-width: 560px}
.wd-069{align-self: flex-start; display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; background: #5b3fc4; color: #ffffff; text-decoration: none; font-size: 17px; font-weight: 500}
.wd-070{max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 112px 5%; display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: center}
.wd-071{display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 30px; line-height: 1.15}
.wd-072{font-size: 48px; font-weight: 900; color: #ffffff}
.wd-073{font-size: 38px; font-weight: 700; color: #cbb8ff}
.wd-074{font-size: 30px; font-weight: 700; color: #ffffff; background: #6b3591; padding: 4px 14px 6px}
.wd-075{font-size: 32px; font-weight: 500; color: #f4f1ec}
.wd-076{font-size: 28px; font-weight: 500; color: #cbb8ff}
.wd-077{font-size: 26px; font-weight: 300; color: #f4f1ec}
.wd-078{font-size: 26px; font-weight: 500; color: #cbb8ff}
.wd-079{font-size: 24px; font-weight: 400; color: #f4f1ec}
.wd-080{font-size: 24px; font-weight: 300; color: #a9a5a0}
.wd-081{position: relative; overflow: hidden}
.wd-082{position: absolute; inset: 0; background: rgba(10,9,8,0.74)}
.wd-083{position: relative; max-width: 900px; margin: 0 auto; box-sizing: border-box; padding: 128px 5%; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center}
.wd-084{margin: 0; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.1; font-weight: 700; color: #ffffff}
.wd-085{color: #cbb8ff}
.wd-086.wd-086{margin: 0; font-size: 19px; line-height: 1.6; font-weight: 300; color: #e6e2dd; max-width: 620px}
.wd-087{display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 8px}
.wd-088{display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 1px solid rgba(255,255,255,0.75); color: #ffffff; text-decoration: none; font-size: 17px; font-weight: 500}
.wd-089{background: #333333}
.wd-090{max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 96px 5% 112px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 48px; font-size: 17px; line-height: 1.6; color: #b3afaa}
.wd-091.wd-091{margin: 0; font-weight: 700; color: #c9c6c2}
.wd-092.wd-092{margin: 0}
.wd-093{display: flex; flex-direction: column; gap: 16px}
.wd-094{color: #ffffff; text-decoration: none}
.wd-095{display: flex; flex-direction: column; gap: 4px}

/* Randabfallend in REDAXO: aus .mainnormal ausbrechen */
.wd-001{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
html,body{overflow-x:clip}

/* ===== Mobil (bis 767px): Abstände, Schriftgrößen, Word Clouds ===== */
@media (max-width:767px){

	.mainnormal {
width:100%;
margin:0;
}
.mainInner {
padding-top: 0px;
padding: 0px 0%;
width:100%;
}
  /* Sektions-Innenabstände */
  .wd-005{padding:330px 20px 44px;gap:28px}
  .wd-017{padding:72px 20px;gap:36px}
  .wd-032{padding:64px 20px 56px;gap:40px}
  .wd-043{padding:56px 20px;gap:36px}
  .wd-045.wd-045{gap:28px}
  .wd-059{padding:64px 20px;gap:40px}
  .wd-067{padding:56px 20px 64px;gap:20px}
  .wd-070{padding:72px 20px;gap:32px}
  .wd-083{padding:80px 20px;gap:22px}
  .wd-090{padding:56px 20px 64px;gap:32px}
  /* Hero */
  .wd-002 .wd-007.wd-007{color:#e3d8ff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
  .wd-002{min-height:0;align-items:flex-end;background:#0c0b0a}
  .wd-002 .wd-003.wd-003{height:500px;bottom:auto}
  .wd-004{background:linear-gradient(180deg,rgba(12,11,10,0) 0%,rgba(12,11,10,0) 22%,rgba(12,11,10,.55) 38%,rgba(12,11,10,.92) 50%,#0c0b0a 58%)}
  .wd-006{gap:20px}
  .wd-008{font-size:38px}
  .wd-009.wd-009{font-size:18px}
  .wd-013{padding:18px 20px}
  .wd-014{font-size:40px}
  /* Überschriften & Fließtext */
  .wd-020,.wd-034{font-size:30px}
  .wd-084{font-size:32px}
  .wd-033,.wd-050{gap:18px}
  /* Word Clouds kleiner skalieren */
  .wd-021,.wd-071{zoom:.68}
  .wd-051{zoom:.8}
  /* Bilder & Buttons */
  .wd-060{grid-template-rows:180px 130px;gap:8px}
  .wd-065{min-height:280px}
  .wd-011,.wd-012,.wd-069,.wd-088{padding:0 22px;min-height:48px;font-size:16px}
}

/* ===== Lesbarkeit Fließtext (v. a. iPhone/Safari) ===== */
.wd-001{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased}
.wd-009.wd-009,.wd-035.wd-035,.wd-049.wd-049,.wd-068.wd-068,.wd-086.wd-086{color:#dedad5}
.wd-016,.wd-041,.wd-090{color:#c4c0bb}
@media (max-width:767px){
  .wd-009.wd-009,.wd-035.wd-035,.wd-049.wd-049,.wd-068.wd-068,.wd-086.wd-086{font-weight:400;color:#ebe7e2}
  .wd-016,.wd-041,.wd-090{color:#d0ccc7}
}
/* ===== Ersatz für die entfernten <div class="clr"></div> im Template =====
   Die Handy-Navigation ist gefloatet und drückte den Einstieg sonst auf 0 px Breite. */
header, .menu, .mainnormal, .mainInner, .untenOuter, .untenInner { display:flow-root; }
@media (max-width:1000px){
  ul.rex-navi1 { float:none; }
}
/* ==========================================================
   HELLER MODUS (Betriebssystem/Browser auf „Hell“)
   Bild-Bereiche (Hero, Kontakt) und Sternenhimmel bleiben dunkel,
   alle übrigen Abschnitte werden hell.
   ========================================================== */
@media (prefers-color-scheme: light){
body{background:#f6f4f1}
.wd-001{background:#f6f4f1;color:#2a2826}
:where(.wd-001) a{color:#5b3fc4}:where(.wd-001) a:hover{color:#1b1918}
.wd-042,.wd-058{background:#ebe7e2;border-color:#d9d3cc}
.wd-067{background:#f6f4f1}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-007.wd-007{color:#6a45e0}
:is(.wd-032,.wd-042,.wd-058,.wd-067) :is(.wd-020,.wd-034,.wd-048){color:#1b1918}
:is(.wd-032,.wd-042,.wd-058,.wd-067) :is(.wd-035,.wd-068).wd-035,:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-068.wd-068{color:#3b3835}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-049.wd-049{color:#4a4642}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-041{color:#6b6661}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-047{color:#6a45e0}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-046.wd-046{border-top-color:#cfc8c0}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-037{background:#e4dfd9;border-color:#cfc8c0}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-038{border-bottom-color:#cfc8c0}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-039{background:#b5aea6}
/* Word Cloud auf hellem Grund */
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-052{color:#1b1918}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-054{color:#6a45e0}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-055{color:#7a55e8}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-056{color:#7a746e}
:is(.wd-032,.wd-042,.wd-058,.wd-067) .wd-057{color:#1b1918;border-bottom-color:#6a45e0}
}

/* Bildflächen auch am Handy vollflächig (Template-Regel ".mainInner img{height:auto}" aushebeln) */
.wd-003.wd-003,.wd-061.wd-061,.wd-062.wd-062,.wd-063.wd-063,.wd-066.wd-066{height:100%;max-width:none}