/* Symbionics – Erweiterung fuer die neue Struktur.
   Nutzt ausschliesslich die Tokens der Live-CI (symbionics-live.css):
   Syne 700/800 + DM Sans, --black/--deep/--navy, --cyan/--cyan2, --amber fuer Regulatorik. */

.sx-text { color: rgba(255,255,255,0.66); }
body { line-height: 1.65; }

/* NAV */
nav { background: linear-gradient(to bottom, rgba(4,8,16,0.97) 0%, rgba(4,8,16,0.75) 70%, transparent 100%); }
.nav-links a.active { color: var(--white); }

/* HERO zweispaltig, Live-Stil */
#hero.hero2 {
  min-height: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 4rem;
  align-items: center;
  text-align: left;
  padding: 10rem 2.5rem 6rem;
}
#hero.hero2 .hero-glow { left: 30%; }
#hero.hero2 .hero-headline { font-size: clamp(2.7rem, 5.6vw, 5.2rem); line-height: 1; }
#hero.hero2 .hero-sub { margin: 0 0 2.25rem; max-width: 620px; color: rgba(255,255,255,0.68); }
#hero.hero2 .hero-actions { justify-content: flex-start; }
.hero-meta { margin-top: 1.5rem; font-size: .8rem; letter-spacing: .08em; color: rgba(255,255,255,.45); animation: fadeIn 1.4s .5s ease both; }
.hero-meta span { color: var(--cyan); }
.hero-panel {
  position: relative;
  border: 1px solid rgba(0,180,216,0.25);
  background: linear-gradient(160deg, rgba(10,30,60,0.75) 0%, rgba(6,13,26,0.9) 100%);
  padding: 2.25rem 2rem;
  animation: fadeInUp 1.1s .35s ease both;
}
.hero-panel::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,var(--cyan),transparent); }
.hero-panel-title { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.5rem; }
.hero-panel-item { display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--ghost); }
.hero-panel-item:first-of-type { border-top: 0; padding-top: 0; }
.hero-panel-num { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--cyan); font-size: 1.05rem; }
.hero-panel-item h3 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--white); margin-bottom: .2rem; }
.hero-panel-item p { font-size: .88rem; color: rgba(255,255,255,.58); line-height: 1.55; }
.hero-panel-foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(0,180,216,.2); font-size: .85rem; color: var(--white); }

/* SECTION-KOEPFE */
.sx { padding: 7rem 0; }
.sx.alt { background: var(--ghost2); border-top: 1px solid var(--ghost); border-bottom: 1px solid var(--ghost); }
.sx .container { max-width: 1180px; }
.sx-head { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 3rem; align-items: end; margin-bottom: 3.5rem; }
.sx-head.single { grid-template-columns: 1fr; max-width: 760px; }
.sx-h2 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--white); }
.sx-h2 em { font-style: normal; background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sx-intro { font-size: 1.02rem; color: rgba(255,255,255,.62); line-height: 1.75; }
.amber .section-label { color: var(--amber); }
.amber .sx-h2 em { background: linear-gradient(90deg, var(--amber) 0%, #FBBF24 100%); -webkit-background-clip: text; background-clip: text; }

/* GRIDS + KARTEN */
.sx-grid { display: grid; gap: 1px; background: var(--ghost); border: 1px solid var(--ghost); }
.sx-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.sx-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.sx-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.sx-card { background: var(--deep); padding: 2rem 1.75rem; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: background .3s; }
.sx-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,var(--cyan),transparent); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.sx-card:hover { background: #081428; }
.sx-card:hover::before, .sx-card.lit::before { transform: scaleX(1); }
.sx-who { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; }
.sx-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: .85rem; color: rgba(0,180,216,.55); margin-bottom: .9rem; }
.sx-card h3 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.22rem; line-height: 1.25; color: var(--white); margin-bottom: .8rem; }
.sx-card p { font-size: .9rem; color: rgba(255,255,255,.6); line-height: 1.65; }
.sx-gain { margin-top: 1.1rem; font-size: .86rem; color: var(--white); padding-left: .85rem; border-left: 2px solid var(--cyan); }
.sx-link { margin-top: auto; padding-top: 1.5rem; font-size: .85rem; font-weight: 500; color: var(--cyan); text-decoration: none; }
.sx-link:hover { color: var(--cyan2); }
a.sx-card { text-decoration: none; }
.sx-tags { margin-top: 1.1rem; font-size: .72rem; letter-spacing: .08em; color: rgba(0,180,216,.75); }
.sx-out { margin-top: 1.1rem; font-size: .8rem; color: var(--cyan); }
.sx-below { margin-top: 2rem; font-size: .95rem; color: rgba(255,255,255,.6); }
.sx-below a { color: var(--cyan); text-decoration: none; }

/* Amber-Variante (AI Act / Data Act) */
.amber .sx-card::before { background: linear-gradient(90deg, var(--amber), transparent); }
.amber .sx-who, .amber .sx-num, .amber .sx-link, .amber .sx-out { color: var(--amber); }
.amber .sx-num { opacity: .7; }
.amber .sx-gain { border-left-color: var(--amber); }
.sx-alerts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.sx-alert { font-size: .78rem; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.06); color: var(--amber); padding: .45rem .9rem; border-radius: 2px; }
.sx-alert.ok { border-color: rgba(0,180,216,.35); background: rgba(0,180,216,.06); color: var(--cyan); }

/* ARCHITEKTUR-KACHELN */
.sx-arch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; }
.sx-arch div { border: 1px solid rgba(0,180,216,.18); padding: 1.25rem; background: rgba(0,180,216,.03); }
.sx-arch b { display:block; font-family:'Syne',sans-serif; color: var(--white); font-size: 1rem; margin-bottom: .3rem; }
.sx-arch span { font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.5; display: block; }
.sx-arch small { display:block; font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--cyan); margin-bottom: .5rem; }

/* SCHRITTE */
.sx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; }
.sx-steps::before { content:''; position:absolute; top:1.35rem; left:0; right:0; height:1px; background: linear-gradient(90deg, var(--cyan), rgba(0,180,216,.1)); }
.sx-step-dot { width: 2.7rem; height: 2.7rem; border: 1px solid var(--cyan); background: var(--black); color: var(--cyan); font-family:'Syne',sans-serif; font-weight:800; display:flex; align-items:center; justify-content:center; border-radius:50%; position: relative; margin-bottom: 1.4rem; }
.sx-step h3 { font-family:'Syne',sans-serif; font-weight:700; color: var(--white); font-size: 1.25rem; margin-bottom: .6rem; }
.sx-step p { font-size: .9rem; color: rgba(255,255,255,.6); }
.sx-step .sx-out { margin-top: .9rem; }

/* LISTEN / VERGLEICH */
.sx-list { list-style: none; }
.sx-list li { padding: .7rem 0 .7rem 1.6rem; border-bottom: 1px solid var(--ghost); position: relative; font-size: .92rem; color: rgba(255,255,255,.72); }
.sx-list li::before { content: '→'; position: absolute; left: 0; color: var(--cyan); }
.sx-list.no li::before { content: '–'; color: rgba(255,255,255,.35); }
.sx-list.yes li::before { content: '✓'; color: var(--amber); }
.sx-col-title { font-family:'Syne',sans-serif; font-weight:700; color: var(--white); font-size: 1.05rem; margin-bottom: .75rem; }

/* NETZWERK */
.sx-net { border: 1px solid rgba(0,180,216,.2); background: linear-gradient(135deg, rgba(0,180,216,.05) 0%, rgba(0,180,216,.015) 100%); padding: 3.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.sx-net p { color: rgba(255,255,255,.64); margin-bottom: 1rem; font-size: .98rem; }
.sx-net-brand { font-family:'Syne',sans-serif; font-weight:800; font-size: 1.6rem; color: var(--white); margin-bottom: .25rem; }
.sx-net-brand em { font-style: normal; color: var(--cyan); }
.sx-net-claim { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.5rem; }

/* HINWEIS */
.sx-note { border-left: 2px solid var(--amber); background: rgba(245,158,11,.05); padding: 1.1rem 1.35rem; font-size: .88rem; color: rgba(255,255,255,.7); margin-top: 2rem; }
.sx-note.cyan { border-left-color: var(--cyan); background: rgba(0,180,216,.05); }

/* UNTERSEITEN */
.pagehero { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 10rem 2rem 5rem; }
.pagehero .hero-glow { left: 20%; }
.crumb { font-size: .78rem; color: rgba(255,255,255,.45); margin-bottom: 2rem; }
.crumb a { color: var(--cyan); text-decoration: none; }
.pagehero h1 { font-family:'Syne',sans-serif; font-weight:800; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--white); margin-bottom: 1.5rem; max-width: 980px; }
.pagehero h1 em { font-style: normal; display: block; background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan2) 60%, rgba(0,212,255,.6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pagehero.amber h1 em { background: linear-gradient(90deg, var(--amber) 0%, #FBBF24 100%); -webkit-background-clip: text; background-clip: text; }
.pagehero .lead { font-size: 1.1rem; color: rgba(255,255,255,.68); max-width: 720px; margin-bottom: 2.25rem; line-height: 1.75; }
.pagehero .hero-actions { justify-content: flex-start; }
.sx-faq h3 { font-family:'Syne',sans-serif; font-weight:700; color: var(--white); font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
.sx-faq p { color: rgba(255,255,255,.64); font-size: .95rem; }
.sx-band { text-align: center; padding: 6rem 2rem; border-top: 1px solid var(--ghost); position: relative; z-index: 2; }
.sx-band .sx-h2 { margin-bottom: 1rem; }
.sx-band p { color: rgba(255,255,255,.6); max-width: 620px; margin: 0 auto 2rem; }
.sx-band .hero-actions { justify-content: center; }
.btn-amber-sx { background: var(--amber); color: var(--black); font-weight:600; font-size:.9rem; padding:.85rem 2rem; text-decoration:none; border-radius:2px; display:inline-block; transition: all .2s; }
.btn-amber-sx:hover { background:#FBBF24; transform: translateY(-1px); }

/* Feinschliff nach Sichtpruefung */
#hero.hero2 .hero-headline { font-size: clamp(2.4rem, 4.8vw, 4.4rem); }
.sx-h2 { font-size: clamp(1.8rem, 3.3vw, 2.8rem); overflow-wrap: break-word; hyphens: manual; }
.sx-net { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.sx-net .sx-h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.pagehero h1, .hero-headline, .cta-headline { overflow-wrap: break-word; hyphens: manual; }
html, body { max-width: 100%; overflow-x: hidden; }

/* RESPONSIVE */
@media (max-width: 1080px) {
  .sx-grid.g4 { grid-template-columns: repeat(2, 1fr); }
  .sx-arch { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  #hero.hero2 { grid-template-columns: 1fr; gap: 2.5rem; padding: 7.5rem 1.25rem 4rem; }
  .sx-head, .sx-net { grid-template-columns: 1fr; gap: 1.5rem; }
  .sx-grid.g3, .sx-grid.g2 { grid-template-columns: 1fr; }
  .sx-steps { grid-template-columns: 1fr 1fr; }
  .sx-steps::before { display: none; }
}
@media (max-width: 768px) {
  .nav-links { display: flex !important; }
  .nav-links li:not(:last-child) { display: none; }
  .nav-cta { padding: .5rem .9rem !important; font-size: .78rem !important; }
  .sx { padding: 4.5rem 0; }
  .sx .container { padding: 0 1.25rem; }
  .sx-grid.g4, .sx-arch, .sx-steps { grid-template-columns: 1fr; }
  .sx-net { padding: 1.75rem; }
  .pagehero { padding: 7.5rem 1.25rem 3.5rem; }
  #hero.hero2 .hero-headline { font-size: 2.45rem; }
  .hero-panel { padding: 1.6rem 1.25rem; }
}