/* ==========================================================================
   ZENTRALE CI-KONFIGURATION (DESIGN TOKENS)
   Alle markenrelevanten Werte sind hier zentral gesammelt.
   Spätere Anpassung an die finale Corporate Identity erfolgt ausschließlich
   an dieser Stelle – nicht verteilt in einzelnen Komponenten.
   ========================================================================== */
:root{
  /* --- Hintergrundebenen (abgeleitet vom Markenblau #1c2f50) --- */
  --bg-void:        #050a14;
  --bg-primary:     #0a1526;
  --bg-elevated:    #101e36;
  --bg-elevated-2:  #16264240;

  /* --- Markenblau (aus Logo) --- */
  --brand-navy:     #1c2f50;
  --brand-navy-2:   #24395e;

  /* --- Akzente --- */
  --accent-blue:    #4ea8ff;
  --accent-cyan:    #6ee7f2;
  --accent-gold:    #c9a96a;   /* nur sparsam: THE KEY / PGD Mastertoken */
  --accent-gold-dim:#c9a96a55;

  /* --- Text --- */
  --text-primary:   #f4f6fb;
  --text-secondary: #a7b2c6;
  --text-muted:     #64708a;

  /* --- Linien / Rahmen --- */
  --line:           rgba(255,255,255,0.09);
  --line-strong:    rgba(255,255,255,0.16);

  /* --- Typografie --- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* --- Layout --- */
  --max-width: 1240px;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* --- Bewegung --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.6s;

  /* --- Permanentes Seiten-Hintergrundbild (bereinigt, ohne eingebranntes Logo) --- */
  --site-bg-image: url('../assets/site-background.jpg');
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   PERMANENTER SEITEN-HINTERGRUND
   Liegt fix hinter der gesamten Seite (nicht nur im Hero) und bleibt beim
   Scrollen an Ort und Stelle. Einzelne Sektionen legen sich mit
   halbtransparenten Flächen darüber, damit der Hintergrund überall dezent
   sichtbar bleibt, der Text aber lesbar ist.
   ========================================================================== */
.site-bg{
  position: fixed; inset: 0; z-index: -2;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 40%;
}
.site-bg-image{
  position:absolute; inset: -12%;
  background-image: var(--site-bg-image);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  transform: scale(1.06);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.site-bg-sheen{
  position:absolute; inset:-20% -60%;
  background: linear-gradient(100deg,
    transparent 40%,
    rgba(140,190,255,0.10) 48%,
    rgba(180,220,255,0.16) 50%,
    rgba(140,190,255,0.10) 52%,
    transparent 60%);
  mix-blend-mode: screen;
}
.site-bg::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,9,17,0.18) 0%, rgba(6,10,19,0.32) 40%, rgba(6,10,19,0.48) 100%);
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.wrap{ max-width: var(--max-width); margin:0 auto; padding:0 32px; }

:focus-visible{ outline: 2px solid var(--accent-blue); outline-offset: 3px; }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; letter-spacing:-0.01em; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  display:flex; align-items:center; gap:10px;
  margin-bottom: 20px;
}
.eyebrow::before{
  content:''; width:16px; height:1px; background: var(--accent-cyan);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              backdrop-filter var(--dur-fast) var(--ease),
              transform 320ms var(--ease);
}
/* Beim Herunterscrollen faehrt die Leiste nach oben aus dem Bild, beim
   Hochscrollen kommt sie zurueck. Bei geoeffnetem Menue bleibt sie stehen. */
.site-header.is-hidden{ transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce){
  .site-header{ transition: background var(--dur-fast) var(--ease); }
  .site-header.is-hidden{ transform:none; }
}
.site-header.is-scrolled{
  background: rgba(8,15,28,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 90px;
}
/* Logo bewusst groesser als der uebrige Kopf - es traegt die Marke und war
   mit 40 px zu zurueckhaltend fuer die Startseite. */
.nav-logo{ display:flex; align-items:center; height: 62px; }
.nav-logo img{ height: 62px; width:auto; display:block; }

.nav-links{ display:flex; align-items:center; gap: 26px; }
.nav-links a{
  font-size: 13.5px; font-weight:500; color: var(--text-secondary);
  position:relative; padding: 6px 0;
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--accent-cyan); transition: width var(--dur-fast) var(--ease);
}
.nav-links a:hover, .nav-links a.is-active{ color: var(--text-primary); }
.nav-links a:hover::after, .nav-links a.is-active::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; }

.btn{
  font-family: var(--font-body);
  font-size: 13.5px; font-weight:600;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease);
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{
  background: var(--text-primary); color: var(--bg-void);
}
.btn-primary:hover{ background: var(--accent-cyan); transform: translateY(-1px); }
.btn-brand-mark{
  height: 13px; width:auto; display:block;
}
.btn-outline{
  border:1px solid var(--line-strong); color: var(--text-primary);
}
.btn-outline:hover{ border-color: var(--accent-cyan); color: var(--accent-cyan); }

.nav-toggle{ display:none; width:24px; height:18px; position:relative; }
.nav-toggle span{
  position:absolute; left:0; right:0; height:1.5px; background: var(--text-primary);
  transition: all var(--dur-fast) var(--ease);
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:8px; }
.nav-toggle span:nth-child(3){ top:16px; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Schmale Leiste statt Vollbild: sie oeffnet nur so weit, wie die Eintraege
   brauchen, und bleibt rechts am Rand. Die Seite dahinter bleibt sichtbar. */
.mobile-panel{
  position: fixed; top: 82px; right: 0; z-index: 999;
  width: max-content; min-width: 220px; max-width: 78vw;
  max-height: calc(100vh - 100px);
  background: rgba(5,10,20,0.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong); border-right:0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: -18px 24px 60px rgba(0,0,0,0.5);
  padding: 14px 22px 16px;
  transform: translateX(105%);
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease);
  opacity: 0;
  overflow-y: auto;
}
.mobile-panel.is-open{ transform: translateX(0); opacity: 1; }
/* Rechtsbuendig, damit die Eintraege an der Kante stehen, an der auch der
   Menue-Knopf sitzt. */
.mobile-panel a{
  display:block; text-align:right; white-space:nowrap;
  font-family: var(--font-display); font-size: 15px; font-weight:500;
  padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text-secondary);
}
.mobile-panel a:last-child{ border-bottom:0; }
.mobile-panel a:hover{ color: var(--text-primary); }

/* Navigation steht auf grossen Ansichten vollstaendig im Kopf. Der
   Menue-Button erscheint erst, wenn die Eintraege nicht mehr nebeneinander
   passen. */
.nav-toggle{ display:none; }
@media (max-width: 1180px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width: 760px){
  .nav-logo, .nav-logo img{ height: 46px; }
  .nav-inner{ height: 82px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  padding: 140px 0 100px;
  overflow: hidden;
  background: transparent;
}
.hero-particles{
  position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
}
.hero .wrap{
  /* .hero ist ein Flex-Container — ohne width:100% würde .wrap sich auf
     seinen Inhalt schrumpfen und per Flex-Auto-Margin zentriert werden,
     statt wie in allen anderen Sektionen volle Breite zu nutzen. */
  width: 100%;
}
.hero-particles span{
  position:absolute; bottom:-10px;
  width: var(--s, 2px); height: var(--s, 2px);
  border-radius:50%;
  background: rgba(190,220,255,0.85);
  box-shadow: 0 0 6px 1px rgba(120,180,255,0.6);
  opacity:0;
  animation: particleRise var(--dur, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes particleRise{
  0%{ opacity:0; transform: translate(0,0); }
  8%{ opacity: var(--peak, 0.7); }
  85%{ opacity: var(--peak, 0.7); }
  100%{ opacity:0; transform: translate(var(--dx, 20px), var(--dy, -320px)); }
}
@media (prefers-reduced-motion: reduce){
  .hero-particles span{ animation:none; opacity:0; }
}

.hero::after{
  /* dezenter Vignette-Effekt nur an den Rändern, damit die Wellen sichtbar bleiben */
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(5,9,17,0.55) 0%, transparent 20%, transparent 88%, rgba(5,9,17,0.4) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  max-width: 920px;
}
.hero-headline{
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  line-height: 1.08;
  color: var(--text-primary);
  margin-bottom: 26px;
  max-width: 640px;
}
.hero-headline .hl{
  background: linear-gradient(100deg, var(--accent-cyan), var(--accent-blue));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size: 17px; color: var(--text-secondary); max-width: 620px; margin-bottom: 38px;
  text-align: left;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.btn-lg{ padding: 15px 28px; font-size:14.5px; }

.scroll-cue{
  position:absolute; bottom: 34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--text-muted); font-family: var(--font-mono); font-size:10.5px;
  letter-spacing:0.14em; text-transform:uppercase; z-index:2;
}
.scroll-cue .line{ width:1px; height:34px; background: linear-gradient(var(--text-muted), transparent); animation: scrollpulse 2s var(--ease) infinite; }
@keyframes scrollpulse{ 0%,100%{ opacity:0.3; } 50%{ opacity:1; } }

/* ==========================================================================
   SECTION SCAFFOLDING
   ========================================================================== */
section{ position:relative; padding: 130px 0; }
.section-head{ max-width: 760px; margin-bottom: 64px; }
.section-title{ font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height:1.15; color: var(--text-primary); }
.section-lede{ font-size: 16.5px; color: var(--text-secondary); margin-top: 20px; }

.divider-line{
  height:1px; background: var(--line); border:none;
}

/* ==========================================================================
   ABSCHNITT 2 — UNTERNEHMENSPOSITIONIERUNG
   ========================================================================== */
.positioning{ background: rgba(10,21,38,0.5); }
.positioning-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:start;
}
.positioning-text p{ color: var(--text-secondary); font-size:15.5px; margin-bottom: 18px; }
.positioning-text p:last-child{ margin-bottom:0; }

.capability-list{ display:flex; flex-direction:column; gap:0; }
.capability-item{
  padding: 22px 0; border-bottom: 1px solid var(--line);
  display:grid; grid-template-columns: 32px 1fr; gap: 18px; align-items:start;
  transition: padding-left var(--dur-fast) var(--ease);
}
.capability-item:first-child{ padding-top:0; }
.capability-item:hover{ padding-left:6px; }
.capability-icon{
  width:32px; height:32px; border-radius: var(--radius-sm);
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--accent-cyan);
}
.capability-item h4{ font-size:15.5px; font-weight:600; margin-bottom:4px; }
.capability-item p{ font-size:13.8px; color: var(--text-muted); }

@media (max-width: 900px){
  .positioning-grid{ grid-template-columns:1fr; gap:44px; }
}

/* ==========================================================================
   ABSCHNITT 3 — GESAMTARCHITEKTUR (SIGNATURE ELEMENT)
   ========================================================================== */
.architecture{
  background: rgba(5,10,20,0.55);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* ==========================================================================
   ORBIT-DIAGRAMM: Kreisdarstellung der Systemarchitektur
   Positionierung läuft vollständig über JavaScript (pseudo-3D via Skalierung/
   Deckkraft je nach Position auf der Ellipse), das ist robuster als
   verschachtelte CSS-3D-Transform-Ketten.
   ========================================================================== */
.orbit-diagram{ margin-top: -10px; }
.orbit-scene{
  position:relative;
  height: 560px;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.orbit-scene.is-visible{ opacity: 1; }

.orbit-path{
  position:absolute; top:50%; left:50%;
  width:660px; height:216px;
  transform: translate(-50%, -50%);
  border-radius:50%;
  border:1px solid rgba(110,231,242,0.16);
}

.orbit-node{
  position:absolute; top:50%; left:50%;
  width:150px; margin:-1px 0 0 -75px; /* zentriert die 150px breite Karte auf ihrem Ankerpunkt */
  will-change: transform, opacity;
  cursor: pointer;
}
.orbit-node-inner{
  display:flex; flex-direction:column; align-items:center;
  width:100%;
}

.orbit-hub{
  position:absolute; z-index:150; top:50%; left:50%;
  width:200px; height:200px; margin:-100px 0 0 -100px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--bg-elevated), var(--bg-void));
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  padding:30px;
  box-shadow: 0 0 70px rgba(201,169,106,0.18), inset 0 0 24px rgba(255,255,255,0.03);
}
.orbit-hub img{ width:100%; height:100%; object-fit:contain; }
.orbit-hub-caption{
  position:absolute; z-index:150; top:50%; left:50%;
  margin-top:112px;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.14em;
  color: var(--text-muted); text-transform:uppercase; white-space:nowrap;
}

.arch-node-marker{
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--line-strong);
  background: var(--bg-elevated);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; position:relative;
  color: var(--accent-cyan);
  z-index:2;
  overflow:hidden;
}
.arch-node-marker svg{ width:26px; height:26px; }
.orbit-node--key .arch-node-marker{ color: var(--accent-gold); border-color: var(--accent-gold-dim); }
.arch-node-marker.has-image{ background: var(--bg-void); padding:3px; }
.arch-node-marker.has-image img{ width:100%; height:100%; object-fit:contain; }
.arch-node-marker--placeholder{
  font-family: var(--font-display); font-size:26px; font-weight:600;
  color: var(--text-secondary); background: var(--bg-elevated-2); cursor: help;
}
.arch-node-marker::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border: 1px solid var(--accent-cyan); opacity:0.25;
}
.orbit-icon-zone{
  position:relative;
  width:96px; height:96px;
  display:flex; align-items:center; justify-content:center;
  margin: -16px auto 0;
}
.arch-node-text{
  position:absolute; top:100%; left:50%;
  width:142px; margin-top:10px;
  transform: translate(-50%, -6px);
  display:flex; flex-direction:column; align-items:center;
  background: var(--bg-elevated);
  border:1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding:16px 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  opacity:0; pointer-events:none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index:200;
}
.orbit-icon-zone:hover .arch-node-text,
.orbit-icon-zone:focus-within .arch-node-text,
.orbit-icon-zone.is-tapped .arch-node-text{
  opacity:1; pointer-events:auto;
  transform: translate(-50%, 0);
}
.arch-node h4{
  font-family: var(--font-mono);
  font-size:10.5px; font-weight:500; line-height:1.3;
  letter-spacing:0.06em; text-transform:uppercase;
  color: var(--text-primary);
  margin-bottom:8px; text-align:center;
}
.arch-node p{
  font-family: var(--font-body);
  font-size:12px; font-weight:400; color: var(--text-muted); line-height:1.55;
  text-align:center; margin:0;
}
.orbit-icon-zone:hover .arch-node h4{ color: var(--accent-cyan); }
.orbit-node--key .orbit-icon-zone:hover .arch-node h4{ color: var(--accent-gold); }

@media (max-width: 1024px){
  .orbit-scene{ height:auto; opacity:1 !important; }
  .orbit-path, .orbit-hub, .orbit-hub-caption{ display:none; }
  .orbit-node{
    position:static; width:auto; margin:0; transform:none !important; opacity:1 !important;
    display:flex; flex-direction:row; align-items:center; padding:14px 0; border-bottom:1px solid var(--line);
  }
  .orbit-node-inner{ flex-direction:row; align-items:center; width:auto; }
  .orbit-icon-zone{ width:52px; height:52px; margin:0 16px 0 0; flex-shrink:0; }
  .arch-node-marker{ margin-bottom:0; width:52px; height:52px; }
  .arch-node-marker svg{ width:22px; height:22px; }
  .arch-node-text{
    position:static; width:auto; margin:0; transform:none !important;
    align-items:flex-start; text-align:left;
    background:none; border:none; box-shadow:none; padding:0;
    opacity:1 !important; pointer-events:auto !important;
  }
  .arch-node h4{ text-align:left; font-size:12px; }
  .arch-node p{ text-align:left; font-size:14px; line-height:1.5; }
}

.arch-statement{
  margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted);
  display:flex; flex-direction:column; gap:7px;
}
.arch-statement strong{ color: var(--text-secondary); font-weight:500; }

/* ==========================================================================
   ABSCHNITT 4 — DIGITAL ASSET ARCHITECTURE (Capability Grid)
   ========================================================================== */
.capability-grid-section{ background: rgba(10,21,38,0.5); }
.capability-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.capability-card{
  background: var(--bg-elevated); border:1px solid var(--line);
  border-radius: var(--radius-md); padding: 28px 24px;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.capability-card:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.capability-card-icon{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-strong); background: var(--bg-void);
  display:flex; align-items:center; justify-content:center;
  color: var(--accent-cyan); margin-bottom:18px;
}
.capability-card-icon svg{ width:19px; height:19px; }
.capability-card h4{
  font-family: var(--font-display); font-size:15px; font-weight:600;
  margin-bottom:10px;
}
.capability-card p{ font-size:13.5px; color: var(--text-muted); line-height:1.6; }

@media (max-width: 900px){
  .capability-grid{ grid-template-columns: 1fr 1fr; gap:16px; }
}

/* ==========================================================================
   ABSCHNITT 5 — REAL-WORLD-ASSET-INTEGRATION (Prozess-Flow)
   ========================================================================== */
.process-flow{
  display:flex; align-items:stretch; gap:0; margin: 48px 0 56px;
  overflow-x:auto; padding-bottom: 8px;
}
.process-step{
  flex:1; min-width: 148px; text-align:center; padding: 0 14px;
  position:relative;
}
.process-step-num{
  width:32px; height:32px; border-radius:50%; margin:0 auto 14px;
  border:1px solid var(--line-strong); background: var(--bg-elevated);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:12px; color: var(--accent-cyan);
}
.process-step p{ font-size:12.5px; color: var(--text-secondary); line-height:1.5; }
.process-arrow{
  flex-shrink:0; width:28px; display:flex; align-items:center; justify-content:center;
  color: var(--line-strong); padding-bottom: 30px;
}

@media (max-width: 900px){
  .process-flow{ flex-direction:column; gap: 20px; }
  .process-arrow{ display:none; }
  .process-step{ text-align:left; display:flex; align-items:center; gap:16px; padding:0; }
  .process-step-num{ margin:0; flex-shrink:0; }
}

.component-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.component-chip{
  font-family: var(--font-mono); font-size:11.5px; color: var(--text-secondary);
  border:1px solid var(--line); border-radius: 100px; padding: 8px 16px;
}

/* ==========================================================================
   ABSCHNITT 6 — BLOCKCHAIN INFRASTRUCTURE & VALYGO (Partner-Vergleich)
   ========================================================================== */
.partner-section{ background: rgba(5,10,20,0.55); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* Gleiche Breite wie die Textspalten darunter, nicht wie die Ueberschrift -
   dadurch steht der Absatz in einer Flucht mit den nachfolgenden Texten.
   Prozentwert statt fester Pixel, damit es auf jeder Breite mitlaeuft. */
.partner-statement{
  font-size:15.5px; color: var(--text-secondary); line-height:1.7; max-width: 54%;
  margin-bottom: 56px;
}
@media (max-width: 1040px){ .partner-statement{ max-width: none; } }
.partner-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.partner-card{
  background: var(--bg-elevated); border:1px solid var(--line);
  border-radius: var(--radius-md); padding: 32px;
}
.partner-card-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.partner-card-logo{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background: var(--bg-void); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.partner-card-logo img{ width:70%; height:70%; object-fit:contain; }
.partner-card-logo span{
  font-family: var(--font-display); font-weight:600; font-size:16px; color: var(--text-secondary);
}
.partner-card h4{ font-family: var(--font-display); font-size:16px; font-weight:600; }
.partner-list{ display:flex; flex-direction:column; gap:12px; }
.partner-list li{
  font-size:13.5px; color: var(--text-muted); line-height:1.5;
  padding-left:18px; position:relative;
}
.partner-list li::before{
  content:''; position:absolute; left:0; top:7px;
  width:6px; height:1px; background: var(--accent-cyan);
}
.partner-card--valygo .partner-list li::before{ background: var(--accent-gold); }

@media (max-width: 900px){
  .partner-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   ABSCHNITT 7 — LAYER-0 ARCHITECTURE
   ========================================================================== */
.layer-stack{ margin: 48px 0 56px; display:flex; flex-direction:column; gap:10px; }
.layer-band{
  border:1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  padding: 18px 24px;
  display:flex; align-items:center; gap:16px;
  position:relative;
}
.layer-band-index{
  font-family: var(--font-mono); font-size:11px; color: var(--accent-cyan);
  border:1px solid var(--line-strong); border-radius:50%;
  width:28px; height:28px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.layer-band-label{ font-family: var(--font-display); font-weight:600; font-size:14.5px; }
.layer-band-desc{ font-size:12.5px; color: var(--text-muted); margin-left:auto; text-align:right; max-width:320px; }
.layer-band:not(:last-child)::after{
  content:''; position:absolute; left:32px; bottom:-11px;
  width:1px; height:10px; background: var(--line-strong);
}

@media (max-width: 700px){
  .layer-band{ flex-wrap:wrap; }
  .layer-band-desc{ margin-left:0; text-align:left; max-width:none; }
}

/* ==========================================================================
   ABSCHNITT 8 — THE KEY
   ========================================================================== */
.key-section{ background: rgba(10,21,38,0.5); }
.key-layout{ display:grid; grid-template-columns: 0.62fr 1.38fr; gap: 60px; align-items:center; }
/* Kein Container mehr: Das Objekt steht frei im Raum. Die Tiefe kommt aus
   perspective + einem weichen Schein dahinter, nicht aus einem Rahmen. */
.key-visual{
  aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
  position:relative; perspective: 900px;
  background: none; border:0; box-shadow:none; overflow:visible;
}
.key-visual::before{
  content:''; position:absolute; left:50%; top:52%;
  width:78%; height:78%; transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(120,170,235,0.20), rgba(150,175,215,0.06) 48%, transparent 74%);
  filter: blur(18px); pointer-events:none;
}
/* Feste 3D-Pose. Frueher stand die Drehung hier nur als Rueckfallwert in einer
   prefers-reduced-motion-Abfrage, weil das Skript sie sonst pro Frame gesetzt
   hat. Seit der Schluessel steht, muss sie immer gelten. */
.key-visual-spin{
  position:relative;
  width:52%; height:88%;
  transform-style: preserve-3d;
  transform: rotateZ(-6deg) rotateY(-18deg) rotateX(4deg);
}
.key-visual img{
  position:absolute; inset:0; margin:auto;
  width:100%; height:100%; object-fit:contain; object-position:center;
  will-change: filter, transform;
  backface-visibility: visible;
  filter: drop-shadow(0 26px 34px rgba(3,7,14,0.6));
}
.key-face-front{ transform: translateZ(10px); }
.key-face-back{ transform: rotateY(180deg) translateZ(10px); }

/* Bodenschatten: gibt dem schwebenden Objekt einen Standpunkt. */
.key-visual::after{
  content:''; position:absolute; left:50%; bottom:6%;
  width:42%; height:13px; transform:translateX(-50%);
  background: radial-gradient(ellipse, rgba(3,7,14,0.6), transparent 72%);
  filter: blur(8px); pointer-events:none;
}
.key-functions{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.key-body{
  font-size:14.5px; line-height:1.72; color: var(--text-secondary);
  margin-top:18px; max-width:62ch;
}
.key-function{
  font-size:12.5px; color: var(--text-secondary);
  border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.key-systemlogic{
  margin-top: 40px; padding-top: 28px; border-top:1px solid var(--line);
  font-family: var(--font-mono); font-size:12.5px; color: var(--text-muted);
  display:flex; flex-direction:column; gap:6px;
}
.key-systemlogic strong{ color: var(--text-secondary); font-weight:500; }

@media (max-width: 900px){
  .key-layout{ grid-template-columns:1fr; gap:32px; }
  .key-visual{ max-width:265px; margin:0 auto; }
}

/* ==========================================================================
   ABSCHNITT 9 — PGD MASTERTOKEN
   ========================================================================== */
.token-positioning{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:48px; }
.token-tag{
  font-family: var(--font-mono); font-size:12px; color: var(--accent-gold);
  border:1px solid var(--accent-gold-dim); border-radius:100px; padding:9px 18px;
}
.spec-table{ border-top:1px solid var(--line); }
.spec-row{
  display:flex; justify-content:space-between; gap:24px;
  padding: 14px 0; border-bottom:1px solid var(--line);
  font-size:13px;
}
.spec-label{ color: var(--text-muted); font-family: var(--font-mono); font-size:12px; }
.spec-value{
  color: var(--text-secondary); font-family: var(--font-mono);
  text-align:right;
}
.spec-value--placeholder{
  color: var(--text-muted); font-style:italic;
  border-bottom: 1px dashed var(--line-strong);
}
.token-disclaimer{
  margin-top: 32px; padding: 18px 20px;
  border:1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(10,21,38,0.4);
  font-size:12.5px; color: var(--text-muted); line-height:1.6;
}

/* ==========================================================================
   DOWNLOAD-KOMPONENTE (wiederverwendbar über mehrere Abschnitte hinweg)
   ========================================================================== */
.download-list{ display:flex; flex-direction:column; gap:10px; margin: 40px 0; }
.download-item{
  display:flex; align-items:center; gap:16px;
  border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 20px;
  transition: border-color var(--dur-fast) var(--ease);
}
.download-item{ text-decoration:none; color:inherit; }
.download-item:not(.download-item--disabled):hover{ border-color: var(--line-strong); background: var(--bg-elevated-2); }
.download-icon{
  width:36px; height:36px; border-radius: var(--radius-sm); flex-shrink:0;
  background: var(--bg-void); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--accent-cyan);
}
.download-icon svg{ width:16px; height:16px; }
.download-info{ flex:1; min-width:0; }
.download-info h5{ font-size:13.5px; font-weight:600; color: var(--text-primary); margin-bottom:3px; }
.download-info p{ font-size:11.5px; color: var(--text-muted); }
.download-action{
  font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
  color: var(--accent-cyan); flex-shrink:0; white-space:nowrap;
}
.download-item--disabled{ opacity:0.55; }
.download-item--disabled .download-icon{ color: var(--text-muted); }
.download-item--disabled .download-action{ color: var(--text-muted); }


/* ==========================================================================
   ABSCHNITT 10 — PRIVATE PARTICIPANT ACCESS (bewusst zurückhaltend)
   ========================================================================== */
.access-section{
  background: rgba(5,10,20,0.7);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}

/* ==========================================================================
   ABSCHNITT 11 — PROJECTS & TOKENIZATION
   ========================================================================== */
.model-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; margin: 44px 0 48px;
}
.model-item{
  border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; font-size:13px; color: var(--text-secondary);
}

/* ==========================================================================
   ABSCHNITT 12 — CONTINUOUS DEVELOPMENT
   ========================================================================== */
/* ==========================================================================
   UNTERABSCHNITTE
   Entstehen dort, wo zwei fruehere Abschnitte zu einem zusammengezogen wurden.
   ========================================================================== */
.subsection{
  margin-top: 84px; padding-top: 60px; border-top:1px solid var(--line);
}
.subsection-title{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.15rem, 2vw, 1.6rem); line-height:1.25;
  letter-spacing:-0.01em; color: var(--text-primary); margin-bottom:14px;
}
.subsection-lede{
  color: var(--text-secondary); max-width: 68ch; font-size:15px;
}
/* ==========================================================================
   HYPERSPHERE-GRAFIK
   Mischmodus screen: der schwarze Bildhintergrund verschwindet, ohne dass das
   Bild freigestellt werden muss. Wer den Modus entfernt, bekommt einen
   schwarzen Kasten auf dem Navy.
   ========================================================================== */
.hs{ margin-top:52px; padding-top:44px; border-top:1px solid var(--line); }
.hs-figure{
  margin:0 auto 10px; max-width:900px;   /* Hilfsmittel, nicht Hauptdarsteller */
}
/* Die Farbdaempfung steckt im Bild selbst: Saettigung von 0,44 auf 0,16
   zurueckgenommen, leicht abgedunkelt. Ueber die Deckkraft hier laesst sich
   fein nachjustieren - hoeher heisst praesenter. */
.hs-figure img{
  display:block; width:100%; height:auto;
  mix-blend-mode: screen;
  opacity: 0.88;
}
.hs-caption{
  text-align:center; font-family: var(--font-mono); font-size:9.5px;
  letter-spacing:0.12em; text-transform:uppercase; color: var(--text-muted);
  margin-bottom:26px;
}
/* Der Bildinhalt ist fein - unter dieser Breite wird die Beschriftung
   unlesbar, dann fuehrt der Zugangsbalken den Abschnitt allein. */
@media (max-width: 720px){
  .hs-figure{ display:none; }
}

/* ==========================================================================
   HIERARCHIE / EINORDNUNG
   Zeigt zwei Dinge gleichzeitig: den Abstieg Marke -> HyperSphere -> Sphaeren
   -> Digital -> Mastertoken, und die Zugangsschicht, die quer unter BEIDEN
   Sphaeren durchlaeuft. Bewusst in HTML/CSS statt als Bild, damit Texte
   editierbar bleiben und die Grafik auf dem Handy umbrechen kann.
   ========================================================================== */
.hierarchy{ margin-top:44px; }
.hier-step{
  border:1px solid var(--line); border-radius: var(--radius-md);
  background: rgba(16,30,54,0.4); padding:16px 20px; text-align:center;
}
.hier-kicker{
  font-family: var(--font-mono); font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--text-muted); margin-bottom:6px;
}
.hier-name{ font-family: var(--font-display); font-size:16px; font-weight:600; color: var(--text-primary); }
.hier-sub{ font-size:12.5px; color: var(--text-secondary); margin-top:4px; }
.hier-link{ width:1px; height:22px; background: var(--line-strong); margin:0 auto; }
.hier-spheres{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hier-sphere{
  border:1px solid var(--line); border-radius: var(--radius-md);
  padding:20px; background: rgba(16,30,54,0.28);
}
.hier-sphere h5{
  font-family: var(--font-display); font-size:14.5px; font-weight:600;
  color: var(--text-primary); margin-bottom:6px;
}
.hier-sphere p{ font-size:12.5px; color: var(--text-secondary); line-height:1.6; }
.hier-nested{
  margin-top:14px; padding-left:14px; border-left:1px solid var(--accent-gold-dim);
  display:flex; flex-direction:column; gap:10px;
}
.hier-nested div{ font-size:12.5px; color: var(--text-secondary); }
.hier-nested strong{ display:block; color: var(--text-primary); font-weight:600; font-size:13px; }
.hier-band{
  margin-top:18px; border:1px solid var(--accent-gold-dim); border-radius: var(--radius-md);
  background: rgba(201,169,106,0.05); padding:18px 20px;
}
.hier-band-label{
  font-family: var(--font-mono); font-size:10px; letter-spacing:0.13em;
  text-transform:uppercase; color: var(--accent-gold); margin-bottom:14px; text-align:center;
}
.hier-band-items{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.hier-band-item{ text-align:center; }
.hier-band-item strong{ display:block; font-family: var(--font-display); font-size:14px; color: var(--text-primary); }
.hier-band-item span{ font-size:12px; color: var(--text-secondary); }
.hier-note{ font-size:12.5px; color: var(--text-muted); margin-top:14px; text-align:center; }
@media (max-width: 700px){
  .hier-spheres{ grid-template-columns:1fr; gap:12px; }
  .hier-band-items{ grid-template-columns:1fr; gap:12px; text-align:left; }
  .hier-band-item{ text-align:left; }
}

/* --- Ebene 1: die Pruefung -------------------------------------------- */

/* --- Ebene 2: die zwei Ausgaenge -------------------------------------- */

@media (max-width: 900px){
          }

/* ==========================================================================
   THE KEY - TEXTAUFBAU
   Statt drei gleich aussehender Absaetze: eine Einleitung und darunter drei
   benannte Aussagen. Dadurch ist auf einen Blick erkennbar, was THE KEY ist,
   was es NICHT ist und wo es steht - die Abgrenzung "keine Blockchain" stand
   vorher mitten in einem Absatz und ging dort unter.
   ========================================================================== */
.key-copy{ max-width:64ch; }
.key-lede{
  font-size:16px; line-height:1.72; color: var(--text-secondary);
  margin-bottom:34px;
}
.key-facts{ border-top:1px solid var(--line); }
.key-fact{
  display:grid; grid-template-columns: 124px 1fr; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.key-fact-label{
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--accent-gold);
}
.key-fact p{ font-size:13.5px; line-height:1.65; color: var(--text-secondary); }
.key-origin{
  margin-top:24px; font-family: var(--font-mono); font-size:9.5px;
  letter-spacing:0.12em; text-transform:uppercase; color: var(--text-muted);
}
@media (max-width: 620px){
  .key-fact{ grid-template-columns:1fr; gap:6px; padding:14px 0; }
}

/* ==========================================================================
   THE KEY - GERAETEDARSTELLUNG
   Zeigt die App selbst statt eines abstrakten Schluesselobjekts. Das Telefon
   ist aus dem Mockup mit abgerundeter Maske freigestellt; der Wasser-
   hintergrund des Originals ist entfernt, weil er mit dem Seitenhintergrund
   kollidiert. Das frueher hier stehende Schluesselobjekt liegt als
   Alternative bereit.
   ========================================================================== */
.key-device{ margin:0; text-align:center; }
.key-device img{
  width:100%; max-width:250px; height:auto;
  filter: drop-shadow(0 30px 46px rgba(2,5,12,0.66));
}
.key-device figcaption{
  margin-top:16px; font-family: var(--font-mono); font-size:9.5px;
  letter-spacing:0.13em; text-transform:uppercase; color: var(--text-muted);
}
@media (max-width: 980px){ .key-device img{ max-width:200px; } }


/* ==========================================================================
   SCHICHTEN ALS HOCHFORMATIGE KARTEN
   Vorher vier flache Balken untereinander. Nebeneinander gestellt lesen sie
   sich als gleichrangige Ebenen einer Architektur statt als Rangfolge.
   Das Markenzeichen sitzt oben in jeder Karte - dieselbe Idee wie im frueheren
   Orbit. Der Anspruchsblock darunter nimmt exakt dieselbe Breite ein, damit
   die Aussenkanten durchlaufen.
   ========================================================================== */
.layer-stack{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
  margin-top:40px;
}
.layer-card{
  border:1px solid var(--line); border-radius: var(--radius-md);
  background: rgba(10,21,38,0.55);
  padding:28px 24px 26px;
  display:flex; flex-direction:column;
}
/* Oben ausgerichtet, nicht mittig: alle vier Marken beginnen dadurch an
   derselben Oberkante. Die feste Hoehe haelt die Karten gleich hoch,
   unabhaengig davon wie hoch das jeweilige Zeichen laeuft. */
.layer-card-mark{
  display:flex; align-items:flex-start; height:48px;
  margin-bottom:22px; opacity:0.85;
}
.layer-card-index{
  font-family: var(--font-mono); font-size:10px; letter-spacing:0.16em;
  color: var(--accent-gold); margin-bottom:10px;
}
.layer-card-title{
  font-family: var(--font-display); font-size:15px; font-weight:600;
  line-height:1.3; color: var(--text-primary); margin-bottom:12px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.layer-card-text{
  font-size:12.5px; line-height:1.6; color: var(--text-secondary);
}
/* Anspruchsblock buendig unter den Karten */
.pledge{ margin-left:0; margin-right:0; }
@media (max-width: 1100px){
  .layer-stack{ grid-template-columns: repeat(2, 1fr); gap:16px; }
}
@media (max-width: 620px){
  .layer-stack{ grid-template-columns:1fr; gap:12px; }
  .layer-card{ padding:22px 20px; }
  .layer-card-mark{ height:40px; margin-bottom:16px; }
}

/* Die vier Zeichen haben sehr unterschiedliche Proportionen. Gleiche Hoehe
   liesse das schmale V und den Schluessel winzig wirken - deshalb wird die
   optische Groesse angeglichen: breite Wortmarken niedriger, schmale Zeichen
   hoeher. Der Bezug ist die wahrgenommene Flaeche, nicht die Pixelhoehe. */
/* Die beiden Wortmarken stammen aus derselben Quelldatei und werden ueber die
   BREITE geregelt - dadurch ist das PG-Zeichen in beiden Karten exakt gleich
   gross, obwohl die goldene Fassung ohne "DIGITAL" niedriger ist.
   Die beiden schmalen Zeichen laufen ueber die Hoehe, weil ihre Dateien
   unterschiedlich viel weiche Aura enthalten. Bei einem Austausch: rendern,
   sichtbare Groesse messen, Wert anpassen - nicht einfach uebernehmen. */
.layer-card-mark img{ width:auto; display:block; }
.mark--pg  img{ width:92px; height:auto; }   /* PLAYGLOBAL, gold */
.mark--pgd img{ width:92px; height:auto; }   /* PLAYGLOBAL Digital */
.mark--v   img{ height:42px; }   /* VALYGO V - Datei hat weiche Aura */
.mark--key img{ height:48px; }   /* schmales Objekt - etwas hoeher, sonst wirkt es kleiner */   /* THE KEY */

/* ==========================================================================
   ANSPRUCH
   Steht am Ende des Infrastruktur-Abschnitts und soll als Zusage gelesen
   werden, nicht als Nachsatz: goldene Kante links, groessere Schrift,
   heller Ton, eigener Innenabstand.
   ========================================================================== */
.pledge{
  margin-top:44px; padding:28px 32px;
  border:1px solid var(--line); border-left:2px solid var(--accent-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  /* Dichte Flaeche, weil das Hintergrundbild hier durchlaeuft. Mit der
     frueheren, fast durchsichtigen Goldflaeche fiel der Kontrast von 144
     auf 117. Nicht wieder aufhellen. */
  background: rgba(11,22,38,0.88);
}
.pledge-label{
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.16em;
  text-transform:uppercase; color: var(--accent-gold); margin-bottom:12px;
}
.pledge-text{
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(1rem, 1.5vw, 1.22rem); line-height:1.6;
  color: var(--text-primary); max-width:72ch;
}
@media (max-width:760px){
  .pledge{ padding:22px 20px; margin-top:32px; }
}

/* Der Inhalt wandert beim Scrollen leicht nach oben und blendet aus, waehrend
   das Bild stehen bleibt - dadurch schiebt sich der Text ueber das Motiv
   hinweg. --rwa-lift und --rwa-fade kommen vom Skript. */
#real-world-integration .wrap{
  transform: translateY(var(--rwa-lift, 0px));
  opacity: var(--rwa-fade, 1);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce){
  #real-world-integration .wrap{ transform:none !important; opacity:1 !important; }
}


/* ==========================================================================
   INTEGRATION ALS SPEKTRUM
   Drei Stufen von Sichtbarkeit bis Eigentumsposition. Bewusst als Abfolge mit
   durchgehender Linie dargestellt, nicht als getrennte Kaesten - es ist ein
   Spektrum, keine Auswahl zwischen Alternativen.
   ========================================================================== */
/* Wie die Einleitung darueber gesetzt: gleiche Schrift, gleiche Groesse,
   gleiche Breite. Zuvor stand er in Display-Schrift und lief 78 px weiter
   nach rechts als alle uebrigen Texte des Abschnitts. */
.scale-intro{
  margin-top:48px; max-width:760px;
  font-size:16.5px; line-height:1.7;
  color: var(--text-secondary);
}
.scale{
  margin-top:44px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:0;
  border-top:1px solid var(--line);
}
.scale-step{
  display:grid; grid-template-columns: 40px 1fr; gap:16px;
  padding:30px 34px 34px 0;
  border-right:1px solid var(--line);
}
.scale-step:last-child{ border-right:0; padding-right:0; }
.scale-step:not(:first-child){ padding-left:34px; }
.scale-num{
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.12em;
  color: var(--accent-gold); padding-top:2px;
}
.scale-body h4{
  font-family: var(--font-display); font-size:15.5px; font-weight:600;
  color: var(--text-primary); margin-bottom:12px; line-height:1.35;
}
.scale-body p{
  font-size:13.5px; line-height:1.7; color: var(--text-secondary);
}
/* Hervorgehoben, weil hier die eigentliche Aussage des Abschnitts steht:
   kein Standardmodell, sondern ein flexibles Instrument - und der Hinweis,
   woraus sich Rechte und Funktionen ergeben. Als Fliesstext ging das unter. */
.scale-close{
  margin-top:44px; padding:30px 34px;
  border-left:2px solid var(--accent-gold);
  /* Dichte Flaeche, weil das Hintergrundbild hier durchlaeuft. Mit einer
     fast durchsichtigen Goldflaeche fiel der Kontrast von 144 auf 117.
     Nicht aufhellen. */
  background: rgba(11,22,38,0.88);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(0.98rem, 1.4vw, 1.16rem); line-height:1.65;
  color: var(--text-primary);
  max-width:78ch;
}
.scale-close strong{ color: var(--accent-gold); font-weight:600; }
@media (max-width:700px){ .scale-close{ padding:24px 22px; } }
@media (max-width: 900px){
  .scale{ grid-template-columns:1fr; }
  .scale-step{
    border-right:0; border-bottom:1px solid var(--line);
    padding:26px 0 26px 0;
  }
  .scale-step:not(:first-child){ padding-left:0; }
  .scale-step:last-child{ border-bottom:0; }
}

/* ==========================================================================
   BILDBAND: REAL ASSET -> DIGITALE STRUKTUR
   Liegt als Hintergrundebene im Abschnitt, hinter Text und Karten. Beim
   Scrollen wandert es durch, sodass es einmal vollstaendig zu sehen ist,
   bevor der naechste Abschnitt beginnt.
   Drehsinn folgt der Seite: links positiv, damit die linke Kante nach vorn
   kommt - wie bei der Sphaerenzeichnung. Elemente rechts drehen negativ.
   Das Bild ist echt freigestellt (Alphakanal), kein Mischmodus.
   Der Farbton wandert nach rechts ins Gold: die realen Werte links bleiben
   blau, die entstehende Struktur rechts wird warm.
   ACHTUNG: Die Faerbung entsteht durch direktes Mischen zwischen den beiden
   CI-Farben rgb(90,150,220) und rgb(201,169,106), nicht durch Drehen des
   Farbtons. Ein Farbtondreh von Blau nach Gold laeuft ueber GRUEN - das war
   eine frueher eingebaute Fassung und lag bei 24 Prozent Gruenanteil.
   ========================================================================== */
/* Zusaetzlicher Fussraum: nach den Karten bleibt Flaeche, in der das Bild
   frei sichtbar ist, bevor der naechste Abschnitt beginnt. */
#digital-asset-architecture{ position: relative; }
/* Fussraum, damit das Bild unter den Bloecken frei sichtbar wird. */
#real-world-integration{ position: relative; padding-bottom: 400px; }
/* Begrenzungsebene: schneidet das Bild exakt an den Abschnittskanten ab,
   damit es nicht in den naechsten Abschnitt laeuft. Bewusst als eigene Ebene
   und nicht als overflow auf dem Abschnitt - dort wuerde es das Klebenbleiben
   der linken Spalte ausschalten. Unten weich ausgeblendet statt hart
   abgeschnitten. */
.daa-clip{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 94%, transparent 100%);
}
.daa-band{
  /* Unten verankert statt mittig: dadurch schliesst das Bild auf JEDER
     Breite buendig mit der Abschnittsunterkante ab. Bei prozentualer
     Mittelverankerung stimmte es nur bei einer Breite.
     rotateY ist NEGATIV: die Vorlage ist mit Fluchtpunkt nach rechts
     gezeichnet, eine positive Drehung hebt die Raeumlichkeit auf. */
  position:absolute; left:0; right:auto; bottom:0; top:auto; width:100%;
  margin:0; z-index:0; pointer-events:none;
  /* Die Neigung kippt das Bild um rund 60 px nach unten - der feste Versatz
     gleicht das aus, damit es exakt mit der Unterkante abschliesst. */
  transform: translateY(calc(-62px + var(--daa-drift, 0px)))
             perspective(1150px) rotateY(-14deg) rotateX(6deg) rotateZ(-2.5deg);
  transform-origin: 0% 100%;
}
/* Zurueckhaltend, weil jetzt Text direkt darauf liegt statt in Kaesten
   darueber. Bei hoeherer Deckkraft sinkt der Kontrast der Fragen spuerbar. */
.daa-band img{
  display:block; width:100%; height:auto; opacity:0.62;
}
.daa-band figcaption{ display:none; }
/* Inhalt liegt darueber */
#real-world-integration .wrap{ position:relative; z-index:1; }
@media (max-width: 980px){
  .daa-band{ left:0; right:auto; width:104%; transform: translateY(calc(-50% + var(--daa-drift,0px))); }
  .daa-band img{ opacity:0.42; }
}



/* ==========================================================================
   TYPOGRAFIE-REGEL
   Blocksatz gilt fuer lange Fliesstextabsaetze, nicht fuer kurze Kartentexte:
   in schmalen Spalten reisst Blocksatz Loecher zwischen die Woerter. Wer eine
   neue Absatzklasse anlegt, ordnet sie hier ein statt sie einzeln zu stylen.
   ========================================================================== */
/* Durchgehende Linie fuer alle laufenden Texte der Seite: Blocksatz mit
   Silbentrennung. Kurze Auszeichnungen, Listen und Kartentexte bleiben
   linksbuendig - dort erzeugt Blocksatz Loecher. Beim Ergaenzen neuer
   Textbausteine bitte hier eintragen, sonst faellt der Absatz aus der Linie. */
.section-lede,
.subsection-lede,
.partner-statement,
.valygo-p,
.key-body,
.key-lede,
.rwa-text,
.hier-note,
/* Kurztexte bleiben bewusst linksbuendig */
.capability-card p, .entity-desc, .phase-card p, .bridge-node li,
.hier-sphere p, .hier-sub, .layer-band-desc, .valygo-caption,
.entity-role, .token-coin figcaption{
  text-align: left; hyphens: manual;
}
@media (max-width: 760px){
  /* Auf schmalen Spalten ist Blocksatz durchgehend schaedlich. */
  .section-lede, .subsection-lede, .partner-statement, .valygo-p,
  .key-body, .rwa-text, .hier-note, .gate-close, }

/* ==========================================================================
   ZUGANGSUMGEBUNG
   Aufgebaut wie der Sphaerenblock weiter oben: der Text steht rechts, das Bild
   liegt als Ebene dahinter und laeuft unter ihm durch. Weich ausgeblendete
   Raender statt harter Kante, leicht in den Raum gedreht.
   ========================================================================== */
.office{
  position:relative; display:grid; grid-template-columns: 1fr; align-items:center;
  min-height:450px;
  margin-top:56px; padding-top:48px; border-top:1px solid var(--line);
  padding-bottom:40px;
}
.office-shot{
  /* Das Bild ist echt freigestellt - nur Siegel und Schrift, kein Hintergrund.
     Deshalb keine zusaetzliche Blende: es gibt keine Flaeche, die auslaufen
     muesste.
     rotateX legt die Oberseite nach hinten, rotateY POSITIV zieht die linke
     Kante nach vorn und schickt die rechte in die Tiefe. */
  position:absolute; left:8%; top:48%; width:52%;
  z-index:0; pointer-events:none; margin:0;
  transform: translateY(-50%)
             perspective(900px) rotateY(26deg) rotateX(20deg) rotateZ(-2deg);
  transform-origin: 20% 50%;
}
.office-shot img{ display:block; width:100%; height:auto; opacity:.88; }
.office-copy{ position:relative; z-index:1; justify-self:end; max-width:460px; }
@media (max-width: 900px){
  .office{ grid-template-columns:1fr; min-height:0; }
  .office-shot{ position:static; transform:none; width:100%; max-width:520px; margin-bottom:24px; }
  .office-copy{ justify-self:stretch; max-width:none; }
}


/* Abstaende im Zugangsblock - die frueheren Regeln wurden mit der alten
   Zweispalten-Fassung entfernt. */
.office-label{
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--accent-gold); margin-bottom:12px;
}
.office-title{
  font-family: var(--font-display); font-size:17px; font-weight:600;
  color: var(--text-primary); margin-bottom:16px; line-height:1.35;
}
.office-text{
  font-size:13.5px; line-height:1.72; color: var(--text-secondary);
  margin-bottom:14px;
}
.office-text:last-child{ margin-bottom:0; }



.xchase{
  display:grid; grid-template-columns: 190px 1fr; gap:40px;
  margin-top:52px; padding-top:44px; border-top:1px solid var(--line);
}
.xchase-mark{ padding-right:32px; border-right:1px solid var(--line); }
/* Logo ist weiss auf Transparenz und damit fuer dunklen Grund gemacht.
   Seitenverhaeltnis 3:1 - Breite begrenzen, Hoehe folgt. */
.xchase-logo{ display:block; width:100%; max-width:168px; height:auto; }
.xchase-role{
  display:block; margin-top:10px; font-family: var(--font-mono); font-size:9.5px;
  letter-spacing:0.13em; text-transform:uppercase; color: var(--text-muted);
}
.xchase-body h4{
  font-family: var(--font-display); font-size:16px; font-weight:600;
  color: var(--text-primary); margin-bottom:14px;
}
.xchase-body p{
  font-size:14px; line-height:1.72; color: var(--text-secondary);
  margin-bottom:14px; text-align: justify; hyphens:auto;
}
.xchase-link{ margin-bottom:0 !important; }
.xchase-link a{ color: var(--accent-blue); font-size:12.5px; }
.xchase-link a:hover{ color: var(--accent-cyan); }

@media (max-width: 860px){
            .xchase{ grid-template-columns:1fr; gap:24px; }
  .xchase-mark{
    padding-right:0; border-right:0;
    padding-bottom:20px; border-bottom:1px solid var(--line);
  }
  .xchase-body p{ text-align:left; hyphens:manual; }
}

/* ==========================================================================
   SPHAEREN-ZEICHNUNG
   Die Vorlage ist eine Fotografie eines bedruckten Blattes: dunkle Tinte auf
   hellem Papier - also genau umgekehrt zu dieser Seite. Deshalb ist das Bild
   nicht eingebettet, sondern als GRAUSTUFEN-MASKE: die Tinte wird zur
   Deckkraft, die Farbe kommt aus dem CSS. Vorteile: das Papier verschwindet
   restlos, die Linienfarbe folgt der CI und laesst sich hier in einer Zeile
   aendern, und die Datei ist ein Bruchteil so gross wie ein farbiges PNG.
   Perspektive wurde entzerrt, die ungleichmaessige Beleuchtung ausgeglichen.
   ========================================================================== */
.sphere-split{
  /* Der Text steht rechts, die Zeichnung liegt als Ebene dahinter und laeuft
     unter ihm durch - wie die Karte im Hero. Deshalb nur noch eine Spalte
     fuer den Text, das Bild ist absolut positioniert. */
  position:relative; display:grid; grid-template-columns: 1fr; align-items:center;
  min-height:640px;
  /* Kein overflow:hidden - die Zeichnung darf oben und unten ueber den Block
     hinausreichen und ins Umfeld auslaufen. Die Blende beginnt erst weit
     draussen, dadurch entsteht keine sichtbare Kante. Ganz ohne Begrenzung
     lief sie 600 px in die Nachbarabschnitte, deshalb der grosszuegige,
     aber vorhandene Rahmen. */
  padding-block: 90px; margin-block: -90px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
/* Ecken weichgezeichnet: Die Vorlage hat Passermarken in den Ecken und eine
   harte Blattkante. Eine elliptische Blende auf dem Rahmen nimmt beides weg,
   ohne die Zeichnung selbst anzutasten - der Ink-Mask des Kindes bleibt
   unveraendert, hier wird nur zusaetzlich ausgeblendet. */
.sphere-art{
  /* Diese Zeichnung dreht bewusst POSITIV - anders als die uebrigen
     Hintergrundbilder. Das war eine bewusste Entscheidung und ist kein
     Versehen: nicht angleichen.
     ACHTUNG: .sphere-art darf kein Reveal-Ziel sein - das Skript setzt beim
     Aufdecken transform:none und wuerde die Neigung aufheben. */
  position:absolute; left:4.8%; top:50%; width:72%;
  z-index:0; pointer-events:none; margin:0;
  /* Weiter geoeffnet als zuvor: die Zeichnung soll bis unter die Textspalte
     reichen und dort auslaufen, nicht schon davor. */
  -webkit-mask-image: radial-gradient(ellipse 92% 84% at 42% 50%, #000 66%, rgba(0,0,0,0.40) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 84% at 42% 50%, #000 66%, rgba(0,0,0,0.40) 88%, transparent 100%);
  transform: translateY(calc(-50% + var(--art-drift, 0px)))
             perspective(1050px) rotateY(32deg) rotateX(17deg) rotateZ(-2.5deg);
  transform-origin: 30% 50%;
}
.sphere-art-ink{
  /* Pfad bewusst NICHT in einer Custom Property: Browser loesen url() dort
     relativ zum Dokument auf, nicht zum Stylesheet - der Verweis ginge dann
     ins Leere. */
  width:100%; aspect-ratio: 715 / 1000;
  /* Farbverlauf WAAGRECHT statt diagonal: links liegt in der Zeichnung die
     Real Asset Sphere, rechts die Capital Sphere. Damit folgt die Farbe der
     gleichen Zuordnung wie in der Entity Map im Hero - blau fuer Sphere 01,
     gold fuer Sphere 02 - statt nur dekorativ zu verlaufen. Die Mitte bleibt
     neutral, dort steht PLAYGLOBAL Digital. */
  /* ACHTUNG bei Aenderungen an der Maske: Die Vorlage ist ein Foto, das Papier
     traegt Restdeckkraft. Eine reine Gammakorrektur hebt diesen Schleier mit an
     und faerbt dann die leeren Flaechen ein - rechts sichtbar als Gelbstich.
     Die Maske braucht deshalb zuerst eine Schwelle, dann erst die Verstaerkung.
     Die Ankerfarben sind aus der Entity Map im Hero uebernommen, damit beide
     Zeichnungen dieselbe Sprache sprechen: Sphere 01 in deren Blau
     rgb(127,152,239), Sphere 02 in deren Gold rgb(218,169,125). Vorher stand
     hier das Cyan der Seite, das deutlich gruener und heller war. */
  background: linear-gradient(to right,
      rgb(127,152,239) 0%,
      rgb(163,180,236) 24%,
      rgb(214,214,214) 40%,
      rgb(219,190,158) 54%,
      rgb(218,169,125) 72%);
  /* Wie das Bild im Real-Asset-Abschnitt zurueckhaltend gehalten. */
  opacity:.42;
}
@supports (mask-image: url('')) or (-webkit-mask-image: url('')){
  .sphere-art-ink{
    -webkit-mask-image: url("../assets/sphere-drawing-mask.webp");
    mask-image: url("../assets/sphere-drawing-mask.webp");
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
  }
}
/* Ohne Maskenunterstuetzung waere hier ein farbiger Block zu sehen - dann
   lieber nichts zeigen. */
@supports not ((mask-image: url('')) or (-webkit-mask-image: url(''))){
  .sphere-art{ display:none; }
}
.sphere-text{ position:relative; z-index:1; justify-self:end; max-width:460px; }
.sphere-note{
  margin-top:16px; font-size:13px; line-height:1.65; color: var(--text-muted);
  max-width:60ch;
}
@media (max-width: 900px){
  .sphere-split{ grid-template-columns:1fr; gap:28px; min-height:0; padding-block:0; margin-block:0; -webkit-mask-image:none; mask-image:none; }
  .sphere-art{ position:static; transform:none; width:100%; max-width:340px; justify-self:center; }
  .sphere-text{ justify-self:stretch; max-width:none; }
  /* Achtung: "margin:0 auto" laesst ein Grid-Element auf seine Inhaltsbreite
     schrumpfen. Da das Kind width:100% hat, ergibt das 0 - die Zeichnung war
     dadurch unsichtbar. Zentriert wird deshalb per justify-self. */
  .sphere-art{ width:100%; max-width:340px; justify-self:center; }
}

@media (max-width: 760px){
      }

/* ==========================================================================
   NAECHSTES GESCHAEFTSFELD: CARBON CREDITS
   Aussagen ueber eigene Geschaeftsfelder sind Unternehmenskommunikation und
   duerfen selbstbewusst stehen. Die Zurueckhaltung dieser Seite gilt dem
   Mastertoken, nicht der Firmenstrategie.
   EINE Grenze bleibt: das Feld darf beschrieben, aber niemand zur Beteiligung
   eingeladen werden - "a market that will require infrastructure of this kind"
   ja, "an opportunity to participate" nein. Sonst kann die Seite als
   Angebotsanbahnung gelesen werden, mit dem Token daneben.
   ========================================================================== */
.outlook{
  margin-top:36px; padding:28px 30px;
  border:1px solid var(--line); border-left:2px solid var(--accent-cyan);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(110,231,242,0.035);
}
.outlook-label{
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--accent-cyan); margin-bottom:10px;
}
.outlook-title{
  font-family: var(--font-display); font-size:17px; font-weight:600;
  color: var(--text-primary); margin-bottom:14px; line-height:1.35;
}
.outlook-text{
  font-size:13.5px; line-height:1.72; color: var(--text-secondary);
  margin-bottom:12px; text-align:justify; hyphens:auto;
}
.outlook-text:last-child{ margin-bottom:0; }
@media (max-width:760px){
  .outlook{ padding:20px; }
  .outlook-text{ text-align:left; hyphens:manual; }
}

/* ==========================================================================
   VALYGO: KOPF MIT LOGO, TEXT UNTEREINANDER
   Das Logo sitzt rechts neben der Ueberschrift, der Text steht darunter in
   einer schmalen Spalte. Dadurch bleibt die rechte Haelfte fuer die Bildebene
   frei - sie wuerde sonst hinter dem Text liegen.
   ========================================================================== */
/* Der Kopf ist sonst auf 760 px begrenzt - fuer das rechts sitzende Logo
   muss er ueber die volle Inhaltsbreite gehen. Die Textspalte selbst bleibt
   durch die erste Rasterspalte begrenzt. */
/* Logo sitzt auf der Zeile der Ueberschrift, nicht ueber dem ganzen Kopf. */
/* Logo sitzt auf der Zeile der weissen Ueberschrift, direkt daneben. */
.valygo-stack{ max-width:54%; display:flex; flex-direction:column; gap:44px; }
@media (max-width: 1100px){
  .valygo-stack{ max-width:none; gap:34px; }
}

/* ==========================================================================
   VALYGO-BILDEBENE
   Hintergrundebene des Infrastruktur-Abschnitts. Begrenzungsebene wie im
   Abschnitt Digital Asset Architecture: schneidet an der Abschnittskante ab,
   damit nichts in den naechsten Abschnitt laeuft. Kein overflow am Abschnitt
   selbst - das wuerde klebende Elemente aushebeln.
   ========================================================================== */
#infrastructure{ position: relative; }
.vly-clip{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 92%, transparent 100%);
}
.vly-band{
  position:absolute; right:-2%; top:36%; width:104%; margin:0;
  transform: translateY(calc(-50% + var(--vly-drift, 0px)))
             perspective(1500px) rotateY(-14deg) rotateX(7deg) rotateZ(1.5deg);
  transform-origin: 70% 50%;
}
.vly-band img{ display:block; width:100%; height:auto; opacity:0.44; }
#infrastructure .wrap{ position:relative; z-index:1; }
/* Die Bildebene liegt bewusst AUSSERHALB von .wrap - sonst waere .wrap ihr
   Bezugsrahmen und die Ebene deckte nur den Inhaltsbereich statt des
   ganzen Abschnitts. */
@media (max-width: 1100px){
  /* Sichtbar statt ausgeblendet, ohne Drehung und schwaecher. */
  .vly-band{
    right:-14%; width:128%;
    transform: translateY(-50%) !important;
  }
  .vly-band img{ opacity:.42; }
}

/* ==========================================================================
   VALYGO-PARTNERSCHAFT
   Ersetzt zwei Aufzaehlungslisten. Die Kennzahlen stammen von valygo.com und
   sind auf VYOScan nachpruefbar - beim Aktualisieren bitte Quelle pruefen,
   sonst stehen hier irgendwann Zahlen ohne Deckung.
   ========================================================================== */
.valygo-h{
  font-family: var(--font-display); font-size:15.5px; font-weight:600;
  color: var(--text-primary); margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.valygo-p{
  font-size:14px; line-height:1.72; color: var(--text-secondary);
  margin-bottom:14px;
}
.valygo-note{ font-size:12.5px; color: var(--text-muted); margin-top:20px; }
.valygo-note a{ color: var(--accent-blue); }
.valygo-note a:hover{ color: var(--accent-cyan); }

/* --- Real-Asset-Anschluss ------------------------------------------- */
.rwa-followup{ margin-top:56px; padding-top:44px; border-top:1px solid var(--line); }
.rwa-text{
  font-size:14.5px; line-height:1.75; color: var(--text-secondary);
  max-width:74ch;
}

/* --- Mastertoken: Datenblatt links, Muenze rechts -------------------- */
/* Linksbuendig statt zentriert: sonst sitzt das Datenblatt eingerueckt unter
   den goldenen Kennzeichnungen darueber, die am Inhaltsrand beginnen. */
.token-datasheet{
  display:grid; grid-template-columns: 1fr 340px; gap:44px;
  align-items:center; max-width:1180px; margin:44px 0 0;
}
.token-datasheet .token-coin{
  order:2; margin:0; text-align:center;
}
.token-datasheet .token-coin img{
  width:100%; max-width:340px; height:auto; border-radius:0;
  filter: drop-shadow(0 30px 42px rgba(2,5,12,0.62));
}
.token-datasheet .spec-grid{ order:1; }
.spec-value--mono{
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.01em;
  word-break:break-all; color: var(--text-primary);
}
.spec-grid a{ color: var(--accent-blue); }
.spec-grid a:hover{ color: var(--accent-cyan); }

@media (max-width: 980px){
    .token-datasheet{ grid-template-columns:1fr; gap:32px; }
  .token-datasheet .token-coin{ order:1; }
  .token-datasheet .spec-grid{ order:2; }
}
@media (max-width: 700px){
    }


/* --- Technisch zu erwarten -------------------------------------------- */

/* ==========================================================================
   BAUFORM-VARIANTEN
   Gegen die Monotonie: Die Seite bestand fast durchgehend aus "Kopf oben,
   Kartenraster darunter". Diese drei Varianten brechen das Muster auf -
   ein Statement ohne jedes Raster, ein asymmetrisches Layout mit klebendem
   Kopf und eine nummerierte Liste statt Kacheln.
   ========================================================================== */

/* --- Statement ------------------------------------------------------- */
.statement-band{ background: rgba(4,9,18,0.5); padding: 92px 0; }
.statement-band .wrap{ max-width: 880px; text-align:center; }
/* Kein goldener Strich mehr - er machte das Band zum lautesten Element der
   Seite. Eine feine neutrale Linie ordnet es ein, ohne es anzuschreien. */
.statement-rule{
  width:64px; height:1px; margin:0 auto 32px;
  background: var(--line-strong);
}
.statement-text{
  margin:0; border:0; padding:0;
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(1.15rem, 2.2vw, 1.72rem); line-height:1.45;
  letter-spacing:-0.01em; color: var(--text-secondary);
}
/* Betonung ueber Helligkeit statt ueber Farbe: die beiden Begriffe treten
   hervor, ohne einen zweiten Farbakzent in die Seite zu tragen. */
.statement-text em{ font-style: normal; color: var(--text-primary); font-weight:500; }
.statement-source{
  margin-top:28px; font-family: var(--font-mono); font-size:10.5px;
  letter-spacing:0.16em; text-transform:uppercase; color: var(--text-muted);
}

/* --- Asymmetrisches Layout mit klebendem Kopf ------------------------- */
.split-layout{ display:grid; grid-template-columns: 0.82fr 1.18fr; gap:56px; align-items:start; }
/* Bewusst NICHT klebend: ein festgepinnter Kopf haelt die linke Haelfte
   dauerhaft besetzt und verdeckt das Hintergrundbild. So scrollt er mit heraus
   und gibt die Flaeche frei, waehrend die Karten weiterlaufen. */
.split-aside{ position:static; }
.split-aside .section-head{ margin-bottom:0; }
.split-main .capability-grid{ grid-template-columns: 1fr 1fr; gap:16px; }

/* --- Nummerierte Grundsatzliste --------------------------------------- */

@media (max-width: 980px){
  .split-layout{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width: 700px){
  .statement-band{ padding: 72px 0; }
    .split-main .capability-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 430px){
  .split-main .capability-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   HERO-HINTERGRUND: ENTITY MAP
   Fuellt den leeren rechten Bereich. Gemessen lag die rechte Haelfte bei einer
   mittleren Helligkeit von 16,7 gegenueber 39,2 links - Platz war da, und der
   Hintergrund ist dort ruhig.
   Die Karte ist nach hinten gekippt und stark abgeblendet: Sie soll Tiefe und
   Struktur geben, nicht gelesen werden. Wer die Deckkraft erhoeht, macht die
   Firmierungen lesbar - dann steht der Gesellschaftssitz im Hero.
   ========================================================================== */
.hero-map{
  /* Fixiert statt absolut: der Hero schneidet mit overflow:hidden ab, dadurch
     waere die Karte am Abschnittsende hart abgerissen. Am Sichtfenster
     verankert kann sie langsam nach oben wandern und erst mit dem naechsten
     Abschnitt ausblenden. z-index -1 haelt sie hinter allen Inhalten. */
  position:fixed; right:2%; top:50%;
  width:min(74vw, 1120px); z-index:-1; pointer-events:none;
  will-change: transform, opacity;
  /* Die Vorlage ist bereits perspektivisch gezeichnet. Die CSS-Drehung kommt
     nur noch dazu, damit sie etwas weiter nach hinten kippt. */
  transform: translateY(calc(-50% + var(--map-drift, 0px))) perspective(1600px) rotateY(-17deg) rotateX(3deg) rotateZ(-2deg);
  transform-origin: 62% 50%;
  opacity:0.42;
  filter: blur(0.7px) saturate(0.85);
  -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 45%, transparent 88%);
  mask-image: radial-gradient(ellipse at 60% 50%, #000 45%, transparent 88%);
}
.hero-map img{ display:block; width:100%; height:auto; }
/* Frueher ausgeblendet. Jetzt sichtbar, aber ohne Drehung und deutlich
   zurueckhaltender - auf schmalen Schirmen konkurriert das Motiv sonst mit
   der Schlagzeile. */
@media (max-width: 1100px){
  .hero-map{
    transform: translateY(-50%) !important;
    width: 150%; right: -30%; opacity: .5;
  }
}

/* Schluss-Statement: gleiche Bauform wie das erste, nur etwas ruhiger, weil
   danach nur noch der Footer kommt. */
.statement-band--close{ background: rgba(4,9,18,0.62); padding: 84px 0; }

/* ==========================================================================
   ABSCHNITTS-RHYTHMUS
   Drei Toene im festen Wechsel. tone-b ist bewusst transparent, damit der
   Hintergrund durchscheint - das erzeugt die groesste Abwechslung.
   Reihenfolge nicht willkuerlich aendern, sonst stehen zwei gleiche Toene
   nebeneinander und die Abschnittsgrenze verschwindet.
   ========================================================================== */
section.tone-a{ background: rgba(10,21,38,0.55); }
section.tone-b{ background: transparent; }
section.tone-deep{
  background: rgba(4,9,18,0.72);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.section-head--center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-head--center .section-title{ margin-left:auto; margin-right:auto; }
.section-head--center .section-lede{ margin-left:auto; margin-right:auto; }

/* ==========================================================================
   SCROLL-REVEAL
   Die Startzustaende greifen nur, wenn JS laeuft (html.reveal-ready). Ohne
   JavaScript oder bei "Bewegung reduzieren" ist alles sofort sichtbar.
   ========================================================================== */
.reveal-ready [data-reveal]{
  opacity:0; transform: translateY(16px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal].is-revealed{ opacity:1; transform:none; }

/* Fortschrittsbalken im Header */
.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
  transition: width .08s linear; pointer-events:none;
}
.nav-links a.is-active{ color: var(--text-primary); }
.nav-links a.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--accent-blue);
}
@media (prefers-reduced-motion: reduce){
  .reveal-ready [data-reveal]{ opacity:1 !important; transform:none !important; }
  .scroll-progress{ transition:none; }
}

/* ==========================================================================
   TOKEN-DATENBLATT
   Zentriert, seitenbreit, kompakt: Label-Wert-Paare im Raster statt als lange
   Zeilenliste. Halbiert die Hoehe gegenueber der frueheren Tabelle.
   ========================================================================== */
/* Linksbuendig unter den goldenen Kennzeichnungen, nicht zentriert.
   Die Breite ist so gewaehlt, dass die rechte Kante des Rasters mit dem Ende
   der Kennzeichnungen darueber abschliesst. */
.token-datasheet{ margin: 44px 0 0; max-width: 1040px; }
.token-coin{ margin:0 0 34px; text-align:center; }
.token-coin img{
  width:190px; height:auto; border-radius:50%;
  filter: drop-shadow(0 18px 28px rgba(3,7,14,0.55));
}
.token-coin figcaption{
  margin-top:12px; font-family: var(--font-mono); font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; color: var(--text-muted);
}
.spec-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden;
  background: rgba(16,30,54,0.32);
}
.spec-cell{
  padding:16px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px; min-width:0;
}
.spec-cell:nth-child(3n){ border-right:0; }
.spec-cell:nth-last-child(-n+2){ border-bottom:0; }
.spec-grid .spec-label{
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--text-muted);
}
.spec-grid .spec-value{
  font-size:13.5px; color: var(--text-primary); line-height:1.45; word-break:break-word;
}
@media (max-width: 860px){
  .spec-grid{ grid-template-columns: repeat(2, 1fr); }
  .spec-cell:nth-child(3n){ border-right:1px solid var(--line); }
  .spec-cell:nth-child(2n){ border-right:0; }
  .spec-cell:nth-last-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width: 520px){
  .spec-grid{ grid-template-columns: 1fr; }
  .spec-cell{ border-right:0 !important; }
  .token-coin img{ width:150px; }
}

/* ==========================================================================
   CAPITAL BRIDGE
   Die Bruecken-Grafik traegt die rechtlich wichtigste Aussage des Abschnitts:
   links steht, was DAM tut, rechts, was ausschliesslich die externen Partner
   tun. Wer die Grafik aendert, sollte diese Trennung erhalten.
   ========================================================================== */
.bridge-flow{
  display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items:stretch;
  gap:0; margin: 44px 0 28px;
}
.bridge-node{
  border:1px solid var(--line); border-radius: var(--radius-md);
  background: rgba(16,30,54,0.4); padding:22px 20px;
}
.bridge-node--mid{
  border-color: var(--accent-gold-dim); background: rgba(201,169,106,0.05);
}
.bridge-kicker{
  font-family: var(--font-mono); font-size:10px; letter-spacing:0.13em;
  text-transform:uppercase; color: var(--text-muted); margin-bottom:8px;
}
.bridge-node--mid .bridge-kicker{ color: var(--accent-gold); }
.bridge-name{
  font-family: var(--font-display); font-size:15px; font-weight:600;
  color: var(--text-primary); margin-bottom:10px;
}
.bridge-node ul{ list-style:none; padding:0; margin:0; }
.bridge-node li{
  font-size:12.5px; color: var(--text-secondary); line-height:1.55; padding:3px 0;
}
.bridge-arrow{
  align-self:center; padding:0 14px; color: var(--accent-blue);
  font-size:18px; line-height:1;
}
.bridge-caption{
  font-size:12.5px; color: var(--text-muted); text-align:center;
  padding-top:16px; border-top:1px solid var(--line);
}
.phase-card h5{
  font-family: var(--font-display); font-size:14.5px; font-weight:600;
  color: var(--text-primary); margin-bottom:8px;
}
.phase-card p{ font-size:12.5px; color: var(--text-secondary); line-height:1.6; }
@media (max-width: 900px){
  .bridge-flow{ grid-template-columns:1fr; gap:12px; }
  .bridge-arrow{ display:none; }
}

/* Zugangsband auf volle Breite, direkt unter der Zeichnung. Es ist die
   Kernaussage des Abschnitts und darf nicht schmaler sein als der Text. */
.hier-band--wide{
  margin-top:44px; padding:24px 28px;
}
.hier-band--wide .hier-band-items{ grid-template-columns: repeat(3,1fr); gap:24px; }
/* Der Slogan wirkt ueber Satz und Sperrung, nicht ueber Farbe: Mono,
   Grossbuchstaben, weit gesperrt, gedeckter Ton. Bewusst ohne goldene Marke
   und ohne farbige Hervorhebung - sonst konkurriert er mit dem Inhalt.
   Gleiche Sprache wie die Quellenangabe unter dem Statement weiter unten. */
.ent-slogan{
  margin-top:44px; padding-top:8px;
  text-align:center; font-family: var(--font-mono); font-weight:400;
  font-size:11.5px; line-height:1.7; letter-spacing:0.22em;
  text-transform:uppercase; color: var(--text-secondary);
}
.ent-slogan em{ font-style:normal; color: var(--text-primary); }
@media (max-width:760px){
  .hier-band--wide{ padding:18px 16px; }
  .hier-band--wide .hier-band-items{ grid-template-columns:1fr; gap:14px; }
  .ent-slogan{ margin-top:30px; padding-top:24px; font-size:10.5px; letter-spacing:0.18em; }
}

/* ==========================================================================
   GESELLSCHAFTEN ALS ZEILEN
   Vorher vier Kaesten mit Rolle plus Beschreibungsabsatz - 729 px fuer vier
   Namen. Jetzt eine Zeile je Gesellschaft: Standort, Firmierung, Aufgabe.
   Gleiche Information, deutlich flacher. Die eigene Gesellschaft ist golden
   abgesetzt, damit auf einen Blick klar ist, auf wessen Seite man ist.
   ========================================================================== */
.ent-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:32px; flex-wrap:wrap; margin-bottom:24px;
}
.ent-head .subsection-title{ margin:0; }
.ent-closing{
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--text-muted); margin:0;
}
/* Bewusst ohne Trennlinien: die Spaltenausrichtung ordnet die Zeilen bereits,
   zusaetzliche Linien machen daraus ein Formular. */
.ent-table{
  /* Der Standort steht linksbuendig zur Ueberschrift, Firmierung und Aufgabe
     bleiben an ihrer bisherigen Position. Die zweite Spalte ist deshalb eine
     feste Fuge, die den frueheren Abstand ersetzt - nicht entfernen, sonst
     ruecken alle drei Spalten nach links. */
  display:grid;
  grid-template-columns: max-content 200px max-content max-content minmax(0,1fr);
  column-gap:0 56px;
}
/* Die Dehnspalten brauchen ebenfalls die Trennlinie, sonst endet sie am Text. */
.ent-row::before, .ent-row::after{ content:''; }
.ent-row{
  /* display:contents gibt die Zellen an das Raster der Tabelle weiter. Nur so
     teilen sich ALLE Zeilen dieselben Spaltenbreiten - ein Raster je Zeile
     (wie zuvor) laesst jede Zeile eigene Breiten berechnen, dadurch beginnt
     jede an einer anderen Stelle. Die Trennlinien sitzen deshalb an den
     Zellen, nicht an der Zeile. */
  display: contents;
}
.ent-row > *{
  padding:13px 0;
}
.ent-edge{ }
.ent-edge:first-child{ display:none; }
.ent-edge:last-child{ grid-column:5; }
.ent-loc{
  grid-column:1;
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--text-muted);
}
.ent-name{
  grid-column:3; min-width:333px;
  font-family: var(--font-display); font-size:14.5px; font-weight:600;
  color: var(--text-primary);
}
.ent-task{ grid-column:4; font-size:13px; line-height:1.55; color: var(--text-secondary); white-space:nowrap; }
.ent-row--self .ent-loc{ color: var(--accent-gold); }
.ent-row--self .ent-task{ color: var(--text-primary); }
@media (max-width: 1120px) and (min-width: 861px){
  .ent-table{ grid-template-columns: max-content max-content minmax(0,1fr); column-gap:28px; }
  .ent-loc{ grid-column:1; } .ent-name{ grid-column:2; }
  .ent-task{ grid-column:3; white-space:normal; }
  .ent-edge{ display:none; }
}
@media (max-width: 860px){
  .ent-table{ grid-template-columns:1fr; }
  .ent-loc, .ent-name, .ent-task{ grid-column:1; }
  .ent-task{ white-space:normal; }
  .ent-edge{ display:none; }
  /* Einspaltig traegt nur die letzte Zelle der Zeile die Trennlinie. */
  .ent-row > *{ padding:3px 8px; }
  .ent-row > .ent-loc{ padding-top:14px; }
  .ent-row > .ent-task{ padding-bottom:16px; }

  .ent-head{ margin-bottom:18px; }
}

/* ==========================================================================
   GESELLSCHAFTSSTRUKTUR
   Bewusst statisch: Firmenstruktur ist eine Tatsache, keine Bewegung. Eine
   zweite Animation wuerde dem Orbit darueber nur Aufmerksamkeit wegnehmen.
   ========================================================================== */
.entity-block{ margin-top: 76px; padding-top: 56px; border-top:1px solid var(--line); }
@media (max-width:860px){ .entity-block{ padding-left:0; } }
.entity-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:40px;
}
.entity-card{
  border:1px solid var(--line); border-radius: var(--radius-md);
  background: rgba(16,30,54,0.4); padding: 24px 22px;
}
.entity-card--self{
  border-color: var(--accent-gold-dim);
  background: rgba(201,169,106,0.05);
}
.entity-loc{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--text-muted); margin-bottom:10px;
}
.entity-card--self .entity-loc{ color: var(--accent-gold); }
.entity-name{
  font-family: var(--font-display); font-size:16px; font-weight:600;
  color: var(--text-primary); margin-bottom:4px;
}
.entity-role{ font-size:13px; color: var(--accent-blue); margin-bottom:12px; }
.entity-card--self .entity-role{ color: var(--accent-gold); }
.entity-closing{
  margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
  text-align:center; font-family: var(--font-display); font-size:15px;
  color: var(--text-secondary); letter-spacing:0.01em;
}
.entity-desc{ font-size:13.5px; color: var(--text-secondary); line-height:1.6; }
@media (max-width: 700px){
  .entity-block{ margin-top:52px; padding-top:38px; }
  .entity-grid{ grid-template-columns: 1fr; gap:12px; margin-top:28px; }
  .entity-card{ padding:18px 16px; }
}

/* ==========================================================================
   MOBILE DICHTE
   Auf schmalen Screens wird die Seite sonst rund doppelt so hoch wie am
   Desktop: Raster fallen auf eine Spalte, die Abstaende bleiben aber gross.
   ========================================================================== */
@media (max-width: 700px){
  section{ padding: 78px 0; }
  .wrap{ padding: 0 20px; }
  .section-head{ margin-bottom: 40px; }
  .capability-grid{ grid-template-columns: 1fr 1fr; gap:12px; }
  .capability-card{ padding:20px 16px; }
  .model-grid{ gap:10px; margin: 32px 0 36px; }
  .key-functions{ gap:8px; }
  .layer-stack{ margin: 34px 0 40px; }
  .process-flow{ margin: 34px 0 40px; }
  }
@media (max-width: 430px){
  .capability-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 700px){
  .subsection{ margin-top:56px; padding-top:40px; }
}

@keyframes statusPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

/* ==========================================================================
   ABSCHNITT 13 — RESPONSIBLE STRUCTURING
   ========================================================================== */

@media (max-width: 700px){
    }

/* ==========================================================================
   RECHTSTEXTE ALS EINBLENDUNG
   Liegt ueber der Seite statt in ihr. Der Inhalt bleibt im Dokument und ist
   damit auffindbar, unterbricht aber nicht den Lesefluss.
   ========================================================================== */
.legal-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
}
.legal-overlay[hidden]{ display:none; }
.legal-backdrop{
  position:absolute; inset:0; background: rgba(3,7,14,0.82);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.legal-sheet{
  position:relative; z-index:1;
  width:min(760px, 100%); max-height:min(84vh, 900px);
  display:flex; flex-direction:column;
  background: var(--bg-primary);
  border:1px solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55);
}
.legal-sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; border-bottom:1px solid var(--line);
}
.legal-eyebrow{
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.16em;
  text-transform:uppercase; color: var(--accent-gold);
}
.legal-close{
  font-size:22px; line-height:1; color: var(--text-secondary);
  padding:2px 8px; border-radius:4px;
  transition: color var(--dur-fast) var(--ease);
}
.legal-close:hover{ color: var(--text-primary); }
.legal-sheet-body{ overflow-y:auto; padding:28px 28px 8px; }
.legal-doc[hidden]{ display:none; }
.legal-doc-title{
  font-family: var(--font-display); font-size:18px; font-weight:600;
  color: var(--text-primary); margin-bottom:18px;
}
.legal-doc p{
  font-size:13.5px; line-height:1.78; color: var(--text-secondary);
  margin-bottom:15px; text-align:justify; hyphens:auto;
}
.legal-switch{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:16px 28px 20px; border-top:1px solid var(--line);
}
.legal-switch button{
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--text-muted);
  padding:7px 12px; border:1px solid var(--line); border-radius:4px;
  transition: all var(--dur-fast) var(--ease);
}
.legal-switch button:hover{ color: var(--text-primary); border-color: var(--line-strong); }
.legal-switch button.is-active{
  color: var(--accent-gold); border-color: var(--accent-gold-dim);
  background: rgba(201,169,106,0.06);
}
@media (max-width:600px){
  .legal-overlay{ padding:0; }
  .legal-sheet{ max-height:100vh; height:100vh; border-radius:0; border:0; }
  .legal-doc p{ text-align:left; hyphens:manual; }
}

/* ==========================================================================
   GESELLSCHAFTEN ALS BALKEN
   Jede Zeile ist ein flacher Balken mit sehr zurueckhaltender Fuellung:
   die eigene Gesellschaft in Gold, die uebrigen im Blau der Umgebung.
   Die Deckung ist bewusst niedrig - staerkere Flaechen wirken wie Buttons.
   ========================================================================== */
.ent-row > *{
  padding:15px 0;
  /* Die Flaeche liegt auf jeder Zelle, auch auf der leeren Fugenspalte -
     sonst reisst der Balken zwischen den Spalten auf. */
  background: rgba(78,168,255,0.055);
  transition: background var(--dur-fast) var(--ease);
}
.ent-fill{ grid-column:2; }
.ent-row > *:first-child{
  padding-left:20px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.ent-row > *:last-child{
  padding-right:20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ent-row--self > *{ background: rgba(201,169,106,0.075); }
.ent-row:hover > *{ background: rgba(78,168,255,0.09); }
.ent-row--self:hover > *{ background: rgba(201,169,106,0.11); }
.ent-table{ row-gap:8px; }

/* ==========================================================================
   BEGRENZUNGSEBENE DER SPHAERENZEICHNUNG
   Liegt ueber dem gesamten Abschnitt, damit die Zeichnung am Bildschirmrand
   beginnt statt am Inhaltscontainer. Weich ausgeblendete Kanten.
   ========================================================================== */
#unternehmen{ position: relative; }
#unternehmen .wrap{ position:relative; z-index:1; }
/* Auf die Hoehe des Sphaerenblocks begrenzt, nicht auf den ganzen Abschnitt:
   die Zeichnung ist 1713 px hoch und ragte sonst 373 px oben und 701 px
   unten darueber hinaus. Grosszuegiger Rahmen mit weichen Kanten, damit sie
   nicht hart abgeschnitten wirkt. */
.sphere-clip{
  position:absolute; left:0; right:0; top:38%; height:34%;
  overflow:hidden; z-index:0; pointer-events:none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
@media (max-width: 900px){
  /* Sichtbar statt ausgeblendet: als flaches Band hinter dem Textblock,
     ohne Drehung. */
  .sphere-clip{ top: 34%; height: 30%; }
  .sphere-art{
    position:absolute; left:-8%; top:50%; width:116%;
    transform: translateY(-50%) !important;
  }
  .sphere-art-ink{ opacity:.3; }
}

/* ==========================================================================
   BLOCKSATZ FUER ALLE LAUFENDEN TEXTE
   Eine durchgehende Linie: jeder mehrzeilige Fliesstext steht im Blocksatz
   mit Silbentrennung. Kurze Auszeichnungen, Listen, Karten- und
   Tabellentexte bleiben linksbuendig - dort reisst Blocksatz Loecher.
   Beim Ergaenzen neuer Textbausteine bitte hier eintragen.
   ========================================================================== */
.hero-sub,
.section-lede,
.subsection-lede,
.sphere-note,
.hier-note,
.positioning-text p,
.partner-statement,
.valygo-p,
.pledge-text,
.outlook-text,
.scale-intro,
.scale-close,
.scale-body p,
.key-lede,
.key-fact p,
.bridge-caption,
.office-text,
.legal-doc p,
.xchase-body p,
.token-note,
.capital-note,
.statement-lede{
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Schmale Ansichten: Blocksatz wird dort loechrig. */
@media (max-width: 760px){
  .hero-sub, .section-lede, .subsection-lede, .sphere-note, .hier-note,
  .positioning-text p, .partner-statement, .valygo-p, .pledge-text,
  .outlook-text, .scale-intro, .scale-close, .scale-body p, .key-lede,
  .key-fact p, .bridge-caption, .office-text, .legal-doc p,
  .xchase-body p, .token-note, .capital-note, .statement-lede{
    text-align: left; hyphens: manual;
  }
}

/* ==========================================================================
   LESBARKEIT AUF KLEINEN BILDSCHIRMEN
   Die Mono-Auszeichnungen stehen mit 9,5 px an der Grenze des Lesbaren.
   Auf Handys leicht groesser und mit etwas weniger Sperrung.
   ========================================================================== */
@media (max-width: 620px){
  .key-fact-label, .key-origin, .office-label,
  .outlook-label, .scale-num, .gate-tag, .fq-tag,
  .eyebrow, .footer-col h4, .legal-eyebrow{
    font-size: 10.5px;
    letter-spacing: 0.11em;
  }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background: rgba(4,8,15,0.85); border-top:1px solid var(--line);
  padding: 64px 0 32px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px;
  padding-bottom: 48px;
}
/* Die frueher hier gezeigte Bildmarke war schmal; das vollstaendige Logo
   mit Schriftzug braucht mehr Hoehe, sonst wird der Zusatz unleserlich. */
.footer-brand-col img{ height:46px; width:auto; display:block; margin-bottom:22px; }
.footer-brand-col p{ font-size:12.5px; color: var(--text-muted); line-height:1.6; max-width:270px; }
.footer-col h5{
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--text-muted); margin-bottom:18px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{
  font-size:13px; color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover{ color: var(--text-primary); }
.footer-pending{
  font-size:13px; color: var(--text-muted); cursor: help;
  border-bottom: 1px dashed var(--line-strong);
}
.footer-bottom{
  border-top:1px solid var(--line); margin-top:44px; padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12px; color: var(--text-muted);
}

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand-col{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}




@media (max-width: 600px){
  .spec-row{ flex-direction:column; gap:4px; }
  .spec-value{ text-align:left; }
}




/* ==========================================================================
   UTILITY / FOOTER-STUB (temporär, bis Footer-Block ergänzt wird)
   ========================================================================== */
.build-stub{
  padding: 60px 0; text-align:center;
  border-top: 1px dashed var(--line-strong);
  color: var(--text-muted); font-family: var(--font-mono); font-size:12.5px;
}

/* ==========================================================================
   NAVIGATION MIT UNTERPUNKTEN
   "Community" klappt beim Ueberfahren auf. Bewusst ohne JavaScript geloest -
   :hover und :focus-within reichen und funktionieren auch ohne Skript.
   ========================================================================== */
.nav-group{ position:relative; display:flex; align-items:center; }
.nav-group-btn{
  font-family: var(--font-body); font-size:13.5px; font-weight:500;
  color: var(--text-secondary); letter-spacing:0.01em;
  display:flex; align-items:center; gap:6px;
  transition: color var(--dur-fast) var(--ease);
}
.nav-group-btn::after{
  content:''; width:5px; height:5px; margin-top:-3px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.nav-group:hover .nav-group-btn,
.nav-group:focus-within .nav-group-btn{ color: var(--text-primary); }
.nav-group:hover .nav-group-btn::after,
.nav-group:focus-within .nav-group-btn::after{ transform: rotate(225deg); margin-top:2px; }
.nav-submenu{
  position:absolute; top:100%; right:0; margin-top:10px;
  min-width:196px; padding:8px 0;
  background: rgba(6,12,22,0.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast) var(--ease);
}
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu{ opacity:1; visibility:visible; transform: translateY(0); }
.nav-submenu a{
  display:block; padding:9px 20px; font-size:13px; white-space:nowrap;
  color: var(--text-secondary);
}
.nav-submenu a:hover{ color: var(--text-primary); background: rgba(78,168,255,0.06); }
.nav-submenu a.is-current{ color: var(--accent-gold); }

/* ==========================================================================
   COMMUNITY-UEBERSICHT
   Zwei Gruppen: was heute laeuft und was ueber PLAYGLOBAL Digital erreichbar
   wird. Die Statusangabe steht als Wort dabei, damit ohne Zusatztext klar
   ist, was nutzbar ist und was noch nicht.
   ========================================================================== */
.comm-group{ margin-top:64px; }
.comm-group-head{ max-width:76ch; }
.comm-group-tag{
  display:inline-block; margin-bottom:14px;
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.16em;
  text-transform:uppercase; color: var(--text-muted);
  padding:5px 11px; border:1px solid var(--line); border-radius:3px;
}
.comm-group-tag--live{
  color: var(--accent-cyan);
  border-color: rgba(110,231,242,0.32);
  background: rgba(110,231,242,0.05);
}
.comm-group-head h3{
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.42rem);
  font-weight:600; color: var(--text-primary); margin-bottom:12px; line-height:1.3;
}
.comm-group-head p{ font-size:14px; line-height:1.7; color: var(--text-secondary); }

.comm-list{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
  margin-top:30px;
}
.comm-item{
  display:flex; flex-direction:column; padding:24px 24px 26px;
  border:1px solid var(--line); border-radius: var(--radius-md);
  background: rgba(10,21,38,0.5);
}
a.comm-item{ transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
a.comm-item:hover{ border-color: var(--line-strong); background: rgba(78,168,255,0.06); }
.comm-item--live{ border-color: rgba(110,231,242,0.24); }
.comm-item--live:hover{ background: rgba(110,231,242,0.06); }
.comm-item--soon{
  border-color: var(--accent-gold-dim);
  background: rgba(201,169,106,0.05);
}
.comm-item--soon:hover{ background: rgba(201,169,106,0.09); }
.comm-status{
  display:inline-block; margin-bottom:13px;
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--text-muted);
}
.comm-item--live .comm-status{ color: var(--accent-cyan); }
.comm-item--soon .comm-status{ color: var(--accent-gold); }
.comm-item h4{
  font-family: var(--font-display); font-size:15.5px; font-weight:600;
  color: var(--text-primary); margin-bottom:10px; line-height:1.35;
}
.comm-item p{ font-size:13px; line-height:1.65; color: var(--text-secondary); }
.comm-link{
  margin-top:16px; padding-top:13px; border-top:1px solid var(--line);
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.11em;
  text-transform:uppercase; color: var(--text-muted);
}
.comm-item--live .comm-link{ color: rgba(110,231,242,0.75); }
.comm-item--soon .comm-link{ color: var(--accent-gold); }
.comm-note{
  margin-top:52px; padding:24px 28px;
  border-left:2px solid var(--line-strong);
  background: rgba(10,20,34,0.82);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size:12.5px; line-height:1.75; color: var(--text-secondary); max-width:84ch;
}
.comm-note strong{ color: var(--accent-cyan); font-weight:600; }
@media (max-width: 1000px){ .comm-list{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){
  .comm-list{ grid-template-columns:1fr; }
  .comm-group{ margin-top:48px; }
  .comm-note{ padding:20px 22px; }
}

/* ==========================================================================
   PARTNERHINWEIS IM FOOTER
   Mittig am Fussende, ueber dem Schlussbalken. Bewusst grosszuegig gesetzt:
   die Partnerschaft ist eine tragende Aussage, kein Kleingedrucktes.
   Goldene Kennzeichnung darueber, feine Linien links und rechts.
   ========================================================================== */
.footer-partner{
  display:flex; flex-direction:column; align-items:center;
  margin-top:56px; padding-top:44px;
  border-top:1px solid var(--line);
  text-align:center;
  transition: opacity var(--dur-fast) var(--ease);
}
.footer-partner:hover{ opacity:.82; }

/* Kennzeichnung mit Linien links und rechts */
.footer-partner-label{
  display:flex; align-items:center; gap:16px;
  margin-bottom:22px;
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.2em;
  text-transform:uppercase; color: var(--accent-gold);
}
.footer-partner-label::before,
.footer-partner-label::after{
  content:''; display:block; width:52px; height:1px;
  background: linear-gradient(to right, transparent, var(--accent-gold-dim));
}
.footer-partner-label::after{
  background: linear-gradient(to left, transparent, var(--accent-gold-dim));
}

.footer-partner-brand{ display:flex; align-items:center; gap:18px; margin-bottom:14px; }
.footer-partner-brand img{ height:44px; width:auto; display:block; flex:none; }
.footer-partner-name{
  font-family: var(--font-display); font-size:30px; font-weight:600;
  letter-spacing:0.13em; line-height:1;
  color: var(--text-primary);
}
.footer-partner-role{
  font-size:13px; line-height:1.6; color: var(--text-secondary);
  max-width:44ch;
}
@media (max-width: 620px){
  .footer-partner{ margin-top:44px; padding-top:36px; }
  .footer-partner-brand{ gap:13px; }
  .footer-partner-brand img{ height:34px; }
  .footer-partner-name{ font-size:23px; }
  .footer-partner-label::before,
  .footer-partner-label::after{ width:30px; }
}

/* ==========================================================================
   PARTNERVERWEIS IM INFRASTRUKTURABSCHNITT
   Bewusst zurueckhaltend: nur eine Zeile mit Zeichen, Marke und Rolle, ohne
   Rahmen und Flaeche. Ein voller Balken wirkte hier wie ein Werbebanner.
   ========================================================================== */
.partner-link{
  display:inline-flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin-top:26px;
  transition: opacity var(--dur-fast) var(--ease);
}
.partner-link:hover{ opacity:.75; }
.partner-link img{ height:22px; width:auto; display:block; flex:none; }
.partner-link-name{
  font-family: var(--font-display); font-size:14px; font-weight:600;
  letter-spacing:0.08em; color: var(--text-primary);
}
.partner-link-role{
  font-family: var(--font-mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--text-muted);
  border-left:1px solid var(--line); padding-left:11px;
}
@media (max-width: 700px){
  .partner-link-role{ border-left:0; padding-left:0; flex-basis:100%; }
}

/* ==========================================================================
   RUECKWEG AUF UNTERSEITEN
   Steht oben, damit man nicht bis ans Ende scrollen muss, um zurueck zur
   Uebersicht zu kommen.
   ========================================================================== */
.page-back{ padding: 120px 0 0; }
.page-back a{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.13em;
  text-transform:uppercase; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.page-back a:hover{ color: var(--accent-gold); }
@media (max-width: 760px){ .page-back{ padding-top: 100px; } }

@media (max-width: 620px){
  /* Steht bewusst am Ende des Stylesheets: die Grundregeln dieser Klassen
     stehen weiter oben und wuerden den Media Query sonst ueberschreiben.
     Doppelter Selektor noetig: die Grundregel heisst .spec-grid .spec-label
     und ist damit spezifischer als ein einfaches .spec-label. */
  .spec-grid .spec-label{ font-size: 10.5px; letter-spacing: 0.11em; }
  /* Community-Seite: Status- und Gruppenkennzeichnungen ebenfalls anheben. */
  .comm-status, .comm-link, .comm-group-tag, .footer-partner-label{
    font-size: 10.5px; letter-spacing: 0.13em;
  }
}