/* Agentur-Seite – Seitenstile (Basis + ehemals Inline-Styles) */

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

/* Basis */
body{margin:0;background:#161515}
:where(.ag-001) a{color:#b9a4ff}:where(.ag-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 */
.ag-001{font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #e8e6e3; background: #161515; letter-spacing: 0.01em}
.ag-002{position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden}
.ag-003{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%}
.ag-004{position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,11,10,0.88) 0%, rgba(12,11,10,0.62) 45%, rgba(12,11,10,0.05) 80%)}
.ag-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}
.ag-006{max-width: 660px; display: flex; flex-direction: column; gap: 28px}
.ag-007.ag-007{margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.18em; color: #8b63ff}
.ag-008{margin: 0; font-size: clamp(44px, 5.4vw, 76px); line-height: 1.04; font-weight: 700; letter-spacing: -0.02em; color: #ffffff}
.ag-009.ag-009{margin: 0; font-size: 20px; line-height: 1.6; font-weight: 300; color: #e6e2dd}
.ag-010{display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px}
.ag-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}
.ag-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}
.ag-013{display: flex; flex-direction: column; gap: 4px; padding: 24px 28px; background: rgba(22,21,21,0.82); border-top: 3px solid #8b63ff}
.ag-014{font-size: 64px; line-height: 1; font-weight: 900; color: #ffffff}
.ag-015{font-size: 18px; font-weight: 500; color: #ffffff}
.ag-016{font-size: 14px; color: #b3afaa}
.ag-017{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: start}
.ag-018{display: flex; flex-direction: column; gap: 24px}
.ag-019{margin: 0; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; color: #ffffff}
.ag-020.ag-020{margin: 0; font-size: 20px; line-height: 1.65; font-weight: 300; color: #e6e2dd}
.ag-021{display: flex; flex-direction: column; gap: 24px; padding-top: 8px}
.ag-022{margin: 0; font-size: 24px; font-weight: 700; color: #ffffff}
.ag-023.ag-023{margin: 0; font-size: 17px; line-height: 1.75; font-weight: 300; color: #c9c5c0}
.ag-024{background: #1e1d1c; border-top: 1px solid #2c2a28; border-bottom: 1px solid #2c2a28}
.ag-025{max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 72px 5%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 40px}
.ag-026{display: flex; flex-direction: column; gap: 8px}
.ag-027{font-size: 60px; line-height: 1; font-weight: 300; color: #ffffff}
.ag-028{font-size: 16px; color: #b3afaa}
.ag-029{max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 120px 5% 112px; display: flex; flex-direction: column; gap: 96px}
.ag-030{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 64px; align-items: center}
.ag-031{display: flex; flex-direction: column; gap: 24px; max-width: 520px}
.ag-032.ag-032{margin: 0; font-size: 18px; line-height: 1.7; font-weight: 300; color: #c9c5c0}
.ag-033{display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 30px; line-height: 1.1; text-align: center}
.ag-034{font-size: 30px; font-weight: 300; color: #a9a5a0}
.ag-035{font-size: 34px; font-weight: 700; color: #ffffff}
.ag-036{font-size: clamp(48px, 5vw, 72px); font-weight: 900; letter-spacing: -0.02em; color: #ffffff}
.ag-037{font-size: clamp(34px, 3.4vw, 48px); font-weight: 700; color: #8b63ff}
.ag-038{font-size: 36px; font-weight: 500; color: #ffffff}
.ag-039{font-size: 34px; font-weight: 700; color: #ffffff; background: #3d1a52; padding: 6px 18px 8px}
.ag-040{font-size: 32px; font-weight: 500; color: #cbb8ff}
.ag-041{font-size: 28px; font-weight: 400; color: #e8e6e3}
.ag-042{font-size: 28px; font-weight: 500; color: #8b63ff}
.ag-043{font-size: 26px; font-weight: 300; color: #a9a5a0}
.ag-044{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 48px}
.ag-045{display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 1px solid #3a3835}
.ag-046{font-size: 15px; font-weight: 500; letter-spacing: 0.12em; color: #8b63ff}
.ag-047{margin: 0; font-size: 26px; font-weight: 700; color: #ffffff}
.ag-048.ag-048{margin: 0; font-size: 17px; line-height: 1.65; font-weight: 300; color: #c9c5c0}
.ag-049{background: #1e1d1c; border-top: 1px solid #2c2a28}
.ag-050{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: start}
.ag-051{margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px}
.ag-052{width: 100%; height: auto; display: block}
.ag-053{font-size: 15px; line-height: 1.5; color: #b3afaa}
.ag-054{margin: 0; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.12; font-weight: 700; color: #ffffff}
.ag-055.ag-055{list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid #2e2c2a}
.ag-056.ag-056{display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid #2e2c2a}
.ag-057{font-size: 16px; font-weight: 500; color: #a9a5a0}
.ag-058{font-size: 17px; line-height: 1.55; font-weight: 400; color: #e2ded9}
.ag-059{color: #cbb8ff}
.ag-060{font-size: 16px; font-weight: 500; color: #8b63ff}
.ag-061{font-size: 17px; line-height: 1.55; font-weight: 700; color: #ffffff}
.ag-062{display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding-top: 8px}
.ag-063{font-size: 17px; line-height: 1.6; font-weight: 300; color: #c9c5c0}
.ag-064{max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 128px 5%; display: flex; flex-direction: column; align-items: center; gap: 56px; text-align: center}
.ag-065{display: flex; flex-direction: column; gap: 20px; align-items: center}
.ag-066.ag-066{margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.18em; color: #cbb8ff}
.ag-067{display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 12px 32px; line-height: 1.1}
.ag-068{font-size: 40px; font-weight: 500; color: #f4f1ec}
.ag-069{font-size: clamp(40px, 4.4vw, 60px); font-weight: 900; color: #cbb8ff}
.ag-070{font-size: clamp(56px, 6.4vw, 92px); font-weight: 900; letter-spacing: -0.03em; color: #ffffff}
.ag-071{font-size: 40px; font-weight: 700; color: #ffffff; background: #6b3591; padding: 4px 18px 8px}
.ag-072{font-size: 48px; font-weight: 300; color: #f4f1ec}
.ag-073{font-size: 32px; font-weight: 400; color: #f4f1ec}
.ag-074{font-size: 34px; font-weight: 700; color: #cbb8ff}
.ag-075{font-size: 28px; font-weight: 500; color: #cbb8ff}
.ag-076{display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; font-size: 17px; font-weight: 500}
.ag-077{color: #ffffff; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid #cbb8ff}
.ag-078{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr))}
.ag-079{position: relative; min-height: 420px}
.ag-080{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%}
.ag-081{box-sizing: border-box; padding: 112px 8%; display: flex; flex-direction: column; justify-content: center; gap: 28px; background: #161515}
.ag-082.ag-082{margin: 0; font-size: 18px; line-height: 1.7; font-weight: 300; color: #c9c5c0; max-width: 520px}
.ag-083{display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px; line-height: 1.15}
.ag-084{font-size: 44px; font-weight: 900; color: #ffffff}
.ag-085{font-size: 36px; font-weight: 700; color: #8b63ff}
.ag-086{font-size: 28px; font-weight: 700; color: #ffffff; background: #3d1a52; padding: 4px 14px 6px}
.ag-087{font-size: 28px; font-weight: 500; color: #ffffff}
.ag-088{font-size: 26px; font-weight: 500; color: #cbb8ff}
.ag-089{font-size: 26px; font-weight: 300; color: #e8e6e3}
.ag-090{font-size: 24px; font-weight: 500; color: #cbb8ff}
.ag-091{font-size: 24px; font-weight: 400; color: #e8e6e3}
.ag-092{font-size: 24px; font-weight: 300; color: #a9a5a0}
.ag-093{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}
.ag-094{position: relative; overflow: hidden}
.ag-095{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%}
.ag-096{position: absolute; inset: 0; background: rgba(10,9,8,0.72)}
.ag-097{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}
.ag-098{margin: 0; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.1; font-weight: 700; color: #ffffff}
.ag-099.ag-099{margin: 0; font-size: 19px; line-height: 1.6; font-weight: 300; color: #e6e2dd; max-width: 620px}
.ag-100{display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 8px}
.ag-101{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}
.ag-102{background: #333333}
.ag-103{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}
.ag-104.ag-104{margin: 0; font-weight: 700; color: #c9c6c2}
.ag-105.ag-105{margin: 0}
.ag-106{display: flex; flex-direction: column; gap: 16px}
.ag-107{color: #ffffff; text-decoration: none}
.ag-108{display: flex; flex-direction: column; gap: 4px}

/* Randabfallend: Seite aus .mainnormal ausbrechen (volle Fensterbreite) */
.ag-001{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
html,body{overflow-x:clip} /* kein horizontaler Scrollbalken durch 100vw */

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

.mainInner {
padding-top: 0px;
padding: 0px 0%;
width:100%;
}
  /* Sektions-Innenabstände */
  .ag-005{padding:330px 20px 44px;gap:28px}
  .ag-017{padding:64px 20px 56px;gap:40px}
  .ag-025{padding:48px 20px;gap:28px 20px;grid-template-columns:repeat(2,1fr)}
  .ag-029{padding:64px 20px 56px;gap:56px}
  .ag-030{gap:36px}
  .ag-044{gap:32px}
  .ag-050{padding:64px 20px;gap:40px}
  .ag-064{padding:72px 20px;gap:36px}
  .ag-081{padding:56px 20px 64px;gap:22px}
  .ag-097{padding:80px 20px;gap:22px}
  .ag-103{padding:56px 20px 64px;gap:32px}
  /* Hero */
  .ag-002 .ag-007.ag-007{color:#e3d8ff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
  .ag-002{min-height:0;align-items:flex-end;background:#0c0b0a}
  .ag-002 .ag-003.ag-003{height:500px;bottom:auto}
  .ag-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%)}
  .ag-006{gap:20px}
  .ag-008{font-size:38px}
  .ag-009.ag-009{font-size:18px}
  .ag-013{padding:18px 20px}
  .ag-014{font-size:48px}
  /* Überschriften & Fließtext */
  .ag-019,.ag-054{font-size:30px}
  .ag-098{font-size:32px}
  .ag-020.ag-020{font-size:18px}
  .ag-018,.ag-021,.ag-031{gap:18px}
  /* Kennzahlen */
  .ag-027{font-size:44px}
  .ag-028{font-size:15px}
  /* Word Clouds kleiner skalieren */
  .ag-033,.ag-067{zoom:.68}
  .ag-083{zoom:.72}
  .ag-076{gap:4px 24px}
  /* Lebenslauf */
  .ag-056.ag-056,.ag-062{grid-template-columns:84px 1fr;gap:16px}
  .ag-056.ag-056{padding:14px 0}
  /* Bilder & Buttons */
  .ag-079{min-height:260px}
  .ag-011,.ag-012,.ag-101{padding:0 22px;min-height:48px;font-size:16px}
}

/* ===== Lesbarkeit Fließtext (v. a. iPhone/Safari) ===== */
.ag-001{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased}
.ag-009.ag-009,.ag-020.ag-020,.ag-023.ag-023,.ag-032.ag-032,.ag-048.ag-048,.ag-063,.ag-082.ag-082,.ag-099.ag-099{color:#dedad5}
.ag-016,.ag-028,.ag-053,.ag-103,.ag-057{color:#c4c0bb}
@media (max-width:767px){
  .ag-009.ag-009,.ag-020.ag-020,.ag-023.ag-023,.ag-032.ag-032,.ag-048.ag-048,.ag-063,.ag-082.ag-082,.ag-099.ag-099{font-weight:400;color:#ebe7e2}
  .ag-016,.ag-028,.ag-053,.ag-103,.ag-057{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}
.ag-001{background:#f6f4f1;color:#2a2826}
:where(.ag-001) a{color:#5b3fc4}:where(.ag-001) a:hover{color:#1b1918}
.ag-024,.ag-049{background:#ebe7e2;border-color:#d9d3cc}
.ag-081{background:#f6f4f1}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-007{color:#6a45e0}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) :is(.ag-019,.ag-022,.ag-027,.ag-047,.ag-054,.ag-061){color:#1b1918}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) :is(.ag-020,.ag-032,.ag-082).ag-020,:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-032.ag-032,:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-082.ag-082{color:#3b3835}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-023.ag-023,:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-048.ag-048,:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-063{color:#4a4642}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) :is(.ag-028,.ag-053,.ag-057){color:#6b6661}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-058{color:#2a2826}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-059{color:#5b3fc4}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) :is(.ag-046,.ag-060){color:#6a45e0}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-045{border-top-color:#cfc8c0}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-055.ag-055,:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-056.ag-056{border-color:#d9d3cc}
/* Word Clouds auf hellem Grund */
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) :is(.ag-034,.ag-043,.ag-092){color:#7a746e}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) :is(.ag-035,.ag-036,.ag-038,.ag-084,.ag-087){color:#1b1918}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) :is(.ag-037,.ag-042,.ag-085){color:#6a45e0}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) :is(.ag-040,.ag-088,.ag-090){color:#7a55e8}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) :is(.ag-041,.ag-089,.ag-091){color:#3b3835}
:is(.ag-017,.ag-024,.ag-029,.ag-049,.ag-081) .ag-093{color:#1b1918;border-bottom-color:#6a45e0}
}

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